Add workspace awareness to UI project selector

- Add workspaceId to /api/projects response and new /api/workspaces endpoint
- Group projects by workspace in sidebar selector with ListSubheader
- Show workspace chip badge in AppBar next to page title

Author: prih

src/api/rest/index.ts

@@ -38,6 +38,7 @@ export function createRestApp(projectManager: ProjectManager): express.Express {
       return {
         id,
         projectDir: p.config.projectDir,
+        workspaceId: p.workspaceId ?? null,
         stats: {
           docs:      p.docGraph      ? p.docGraph.order      : 0,
           code:      p.codeGraph     ? p.codeGraph.order      : 0,
@@ -51,6 +52,18 @@ export function createRestApp(projectManager: ProjectManager): express.Express {
     res.json({ results: projects });
   });
 
+  // List workspaces
+  app.get('/api/workspaces', (_req, res) => {
+    const workspaces = projectManager.listWorkspaces().map(id => {
+      const ws = projectManager.getWorkspace(id)!;
+      return {
+        id,
+        projects: ws.config.projects,
+      };
+    });
+    res.json({ results: workspaces });
+  });
+
   // Project stats
   app.get('/api/projects/:projectId/stats', (req, res) => {
     const p = (req as any).project;

ui/src/entities/project/api.ts

@@ -3,9 +3,15 @@ import { request, unwrapList, type ListResponse } from '@/shared/api/client.ts';
 export interface ProjectInfo {
   id: string;
   projectDir: string;
+  workspaceId: string | null;
   stats: { docs: number; code: number; knowledge: number; files: number; tasks: number };
 }
 
+export interface WorkspaceInfo {
+  id: string;
+  projects: string[];
+}
+
 export interface ProjectDetailedStats {
   docs: { nodes: number; edges: number } | null;
   code: { nodes: number; edges: number } | null;
@@ -19,6 +25,10 @@ export function listProjects(): Promise<ProjectInfo[]> {
   return request<ListResponse<ProjectInfo>>('/projects').then(unwrapList);
 }
 
+export function listWorkspaces(): Promise<WorkspaceInfo[]> {
+  return request<ListResponse<WorkspaceInfo>>('/workspaces').then(unwrapList);
+}
+
 export function getProjectStats(projectId: string) {
   return request<ProjectDetailedStats>(`/projects/${projectId}/stats`);
 }

ui/src/entities/project/index.ts

@@ -1,2 +1,2 @@
-export { listProjects, getProjectStats, type ProjectInfo, type ProjectDetailedStats } from './api.ts';
+export { listProjects, listWorkspaces, getProjectStats, type ProjectInfo, type WorkspaceInfo, type ProjectDetailedStats } from './api.ts';
 export { useProjects } from './useProjects.ts';

ui/src/entities/project/useProjects.ts

@@ -1,17 +1,18 @@
 import { useState, useEffect } from 'react';
-import { listProjects, type ProjectInfo } from './api.ts';
+import { listProjects, listWorkspaces, type ProjectInfo, type WorkspaceInfo } from './api.ts';
 
 export function useProjects() {
   const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    listProjects()
-      .then(setProjects)
+    Promise.all([listProjects(), listWorkspaces()])
+      .then(([p, w]) => { setProjects(p); setWorkspaces(w); })
       .catch((e) => setError(e.message))
       .finally(() => setLoading(false));
   }, []);
 
-  return { projects, loading, error };
+  return { projects, workspaces, loading, error };
 }

ui/src/widgets/layout/Layout.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Outlet, useNavigate, useLocation, useParams } from 'react-router-dom';
 import {
-  AppBar, Box, Drawer, IconButton, List, ListItemButton, ListItemIcon,
-  ListItemText, Toolbar, Typography, Select, MenuItem,
+  AppBar, Box, Chip, Drawer, IconButton, List, ListItemButton, ListItemIcon,
+  ListItemText, ListSubheader, Toolbar, Typography, Select, MenuItem,
   Divider, useTheme,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -19,7 +19,7 @@ import PsychologyIcon from '@mui/icons-material/Psychology';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import BuildIcon from '@mui/icons-material/Build';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
-import { useProjects } from '@/entities/project/index.ts';
+import { useProjects, type WorkspaceInfo } from '@/entities/project/index.ts';
 import { useThemeMode } from '@/shared/lib/ThemeModeContext.tsx';
 import { WsProvider } from '@/shared/lib/useWebSocket.ts';
 
@@ -73,15 +73,54 @@ function buildDocumentTitle(pathname: string): string {
   return parts.join(' :: ');
 }
 
+/** Build grouped menu items: workspace subheaders + project items, then standalone projects. */
+function buildGroupedItems(
+  projects: { id: string; workspaceId: string | null }[],
+  workspaces: WorkspaceInfo[],
+): React.ReactNode[] {
+  const items: React.ReactNode[] = [];
+  const placed = new Set<string>();
+
+  for (const ws of workspaces) {
+    const wsProjects = projects.filter(p => p.workspaceId === ws.id);
+    if (wsProjects.length === 0) continue;
+    items.push(
+      <ListSubheader key={`ws-${ws.id}`} sx={{ lineHeight: '32px', fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        {ws.id}
+      </ListSubheader>
+    );
+    for (const p of wsProjects) {
+      items.push(<MenuItem key={p.id} value={p.id}>{p.id}</MenuItem>);
+      placed.add(p.id);
+    }
+  }
+
+  const standalone = projects.filter(p => !placed.has(p.id));
+  if (standalone.length > 0 && workspaces.length > 0) {
+    items.push(
+      <ListSubheader key="ws-standalone" sx={{ lineHeight: '32px', fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        Standalone
+      </ListSubheader>
+    );
+  }
+  for (const p of standalone) {
+    items.push(<MenuItem key={p.id} value={p.id}>{p.id}</MenuItem>);
+  }
+
+  return items;
+}
+
 export default function Layout() {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const { projects, loading } = useProjects();
+  const { projects, workspaces, loading } = useProjects();
   const navigate = useNavigate();
   const location = useLocation();
   const { projectId } = useParams();
   const { mode, toggle } = useThemeMode();
   const { palette } = useTheme();
 
+  const currentProject = projects.find(p => p.id === projectId);
+
   const pageTitle = getPageTitle(location.pathname);
   const documentTitle = buildDocumentTitle(location.pathname);
 
@@ -117,9 +156,7 @@ export default function Layout() {
             </Typography>
           )}
         >
-          {projects.map((p) => (
-            <MenuItem key={p.id} value={p.id}>{p.id}</MenuItem>
-          ))}
+          {buildGroupedItems(projects, workspaces)}
         </Select>
       </Box>
       <Divider />
@@ -187,9 +224,20 @@ export default function Layout() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-            {pageTitle}
-          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1 }}>
+            <Typography variant="h6" noWrap>
+              {pageTitle}
+            </Typography>
+            {currentProject?.workspaceId && (
+              <Chip
+                label={currentProject.workspaceId}
+                size="small"
+                variant="outlined"
+                color="primary"
+                sx={{ fontWeight: 600 }}
+              />
+            )}
+          </Box>
           <IconButton color="inherit" onClick={toggle} title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}>
             {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
           </IconButton>