Coffee Shop UI Components and Data Layer

ui/src/
├── app/                      # Root wiring
│   ├── App.tsx               # Pathname-based route switch
│   ├── AppProviders.tsx      # QueryClientProvider + Toaster
│   ├── NotFoundPage.tsx
│   └── routes.ts             # appRoutes constants + isControlRoomPath()
├── features/
│   ├── coffee-shop/          # Order management feature
│   │   ├── api/coffee.ts     # Fetch helpers (fetchMenu, fetchOrders, createOrder, updateOrderStatus)
│   │   ├── components/       # Page, layout, customer panel, barista panel
│   │   ├── hooks/            # TanStack Query hooks + composed shop state
│   │   └── lib/              # Domain types and pure helpers
│   └── assistant/            # Browser AI assistant feature
│       ├── components/       # Landing page, transcript, composer, tool-activity drawer
│       ├── hooks/            # useLfmCoffeeAssistant + reducer support
│       └── lib/              # Model loading, generation, MCP client, tool parsing
└── shared/
    ├── hooks/                # useThemePreference
    ├── lib/
    └── ui/
        ├── retroui/          # shadcn/ui-style primitives
        ├── SelectField.tsx
        ├── StatusBadge.tsx
        ├── TextAreaField.tsx
        ├── TextField.tsx
        └── ThemeToggle.tsx

export function CoffeeShopPage() {
  const state = useCoffeeShopState();
  const { actions, createOrderMutation, draftState, errorMessage,
          menu, menuCount, orders, ordersQuery, queue, theme,
          toggleTheme, workspace } = state;

  return (
    <CoffeeShopLayout
      activeOrders={queue.activeOrders.length}
      baristaPanel={<BaristaPanel ... />}
      customerPanel={<CustomerPanel ... />}
      errorMessage={errorMessage}
      isRefreshing={ordersQuery.isFetching}
      ...
    />
  );
}

const menuKey  = ["menu"]   as const;
const ordersKey = ["orders"] as const;

export function useMenuQuery() {
  return useQuery({
    queryKey: menuKey,
    queryFn: fetchMenu,
    staleTime: 60_000,       // menu changes rarely
  });
}

export function useOrdersQuery() {
  return useQuery({
    queryKey: ordersKey,
    queryFn: fetchOrders,
    refetchInterval: 4_000,  // poll every 4 s for live queue updates
  });
}

export function useCreateOrderMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (payload: PlaceOrderRequest) => createOrder(payload),
    onSuccess: async () => queryClient.invalidateQueries({ queryKey: ordersKey }),
  });
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: true,
    },
  },
});