UI: project as seperated workspace

backend/app/core/session_alias_store.py

@@ -42,6 +42,8 @@ class SessionAliasStore:
                 conn.execute("ALTER TABLE session_cache ADD COLUMN pinned INTEGER NOT NULL DEFAULT 0")
             if "archived" not in cols:
                 conn.execute("ALTER TABLE session_cache ADD COLUMN archived INTEGER NOT NULL DEFAULT 0")
+            if "project_id" not in cols:
+                conn.execute("ALTER TABLE session_cache ADD COLUMN project_id INTEGER")
 
     def sync_sessions(self, sessions: list[dict[str, Any]]) -> None:
         now = datetime.now(timezone.utc).isoformat()
@@ -75,20 +77,31 @@ class SessionAliasStore:
             else:
                 conn.execute("DELETE FROM session_cache")
 
-    def list_cached_sessions(self) -> list[dict[str, Any]]:
+    def list_cached_sessions(self, project_id: int | None = None) -> list[dict[str, Any]]:
         with self._connect() as conn:
-            rows = conn.execute(
+            if project_id is not None:
-                """
+                rows = conn.execute(
-                SELECT session_key, created_at, updated_at, alias, pinned, archived
+                    """
-                FROM session_cache
+                    SELECT session_key, created_at, updated_at, alias, pinned, archived, project_id
-                ORDER BY pinned DESC, archived ASC, updated_at DESC
+                    FROM session_cache
-                """
+                    WHERE project_id = ? OR project_id IS NULL
-            ).fetchall()
+                    ORDER BY pinned DESC, archived ASC, updated_at DESC
+                    """,
+                    (project_id,)
+                ).fetchall()
+            else:
+                rows = conn.execute(
+                    """
+                    SELECT session_key, created_at, updated_at, alias, pinned, archived, project_id
+                    FROM session_cache
+                    ORDER BY pinned DESC, archived ASC, updated_at DESC
+                    """
+                ).fetchall()
         return [self._row_to_session_item(row) for row in rows]
 
-    def sync_and_list(self, sessions: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    def sync_and_list(self, sessions: list[dict[str, Any]], project_id: int | None = None) -> list[dict[str, Any]]:
         self.sync_sessions(sessions)
-        return self.list_cached_sessions()
+        return self.list_cached_sessions(project_id)
 
     def set_alias(self, session_key: str, alias: str) -> None:
         now = datetime.now(timezone.utc).isoformat()
@@ -111,32 +124,36 @@ class SessionAliasStore:
         alias: str | None = None,
         pinned: bool | None = None,
         archived: bool | None = None,
+        project_id: int | None = None,
     ) -> dict[str, Any]:
         now = datetime.now(timezone.utc).isoformat()
         with self._connect() as conn:
             row = conn.execute(
-                "SELECT alias, pinned, archived FROM session_cache WHERE session_key = ?",
+                "SELECT alias, pinned, archived, project_id FROM session_cache WHERE session_key = ?",
                 (session_key,),
             ).fetchone()
             current_alias = (str(row["alias"]) if row and row["alias"] else "")
             current_pinned = bool(row["pinned"]) if row else False
             current_archived = bool(row["archived"]) if row else False
+            current_project_id = row["project_id"] if row and "project_id" in row.keys() else None
             next_alias = current_alias if alias is None else alias.strip()
             next_pinned = current_pinned if pinned is None else bool(pinned)
             next_archived = current_archived if archived is None else bool(archived)
+            next_project_id = current_project_id if project_id is None else project_id
             conn.execute(
                 """
-                INSERT INTO session_cache (session_key, created_at, updated_at, alias, pinned, archived, last_seen_at)
+                INSERT INTO session_cache (session_key, created_at, updated_at, alias, pinned, archived, project_id, last_seen_at)
-                VALUES (?, '', '', ?, ?, ?, ?)
+                VALUES (?, '', '', ?, ?, ?, ?, ?)
                 ON CONFLICT(session_key) DO UPDATE SET
                   alias = excluded.alias,
                   pinned = excluded.pinned,
                   archived = excluded.archived,
+                  project_id = excluded.project_id,
                   last_seen_at = excluded.last_seen_at
                 """,
-                (session_key, next_alias, int(next_pinned), int(next_archived), now),
+                (session_key, next_alias, int(next_pinned), int(next_archived), next_project_id, now),
             )
-        return {"alias": next_alias or None, "pinned": next_pinned, "archived": next_archived}
+        return {"alias": next_alias or None, "pinned": next_pinned, "archived": next_archived, "project_id": next_project_id}
 
     def get_alias(self, session_key: str) -> str | None:
         with self._connect() as conn:
@@ -159,6 +176,7 @@ class SessionAliasStore:
         title = alias or fallback
         pinned = bool(row["pinned"]) if "pinned" in row.keys() else False
         archived = bool(row["archived"]) if "archived" in row.keys() else False
+        project_id = row["project_id"] if "project_id" in row.keys() else None
         return {
             "key": row["session_key"],
             "created_at": row["created_at"],
@@ -167,6 +185,7 @@ class SessionAliasStore:
             "alias": alias or None,
             "pinned": pinned,
             "archived": archived,
+            "project_id": project_id,
         }
 
 

backend/main.py

@@ -116,6 +116,7 @@ class SessionAliasUpdateRequest(BaseModel):
     title: Optional[str] = None
     pinned: Optional[bool] = None
     archived: Optional[bool] = None
+    project_id: Optional[int] = None
 
 
 class BatchDeleteRequest(BaseModel):
@@ -299,11 +300,11 @@ async def nanobot_chat_stream(request: ChatRequest):
     )
 
 @app.get("/nanobot/sessions")
-def get_sessions():
+def get_sessions(project_id: Optional[int] = None):
     if not nanobot_service.agent:
-        return session_alias_store.list_cached_sessions()
+        return session_alias_store.list_cached_sessions(project_id=project_id)
     sessions = nanobot_service.agent.sessions.list_sessions()
-    return session_alias_store.sync_and_list(sessions)
+    return session_alias_store.sync_and_list(sessions, project_id=project_id)
 
 @app.get("/nanobot/sessions/{session_id}")
 def get_session(session_id: str):
@@ -320,12 +321,23 @@ def get_session(session_id: str):
         "messages": session.messages
     }
 
+class EnsureSessionRequest(BaseModel):
+    project_id: Optional[int] = None
+
 @app.post("/nanobot/sessions/{session_id}/ensure")
-def ensure_session(session_id: str):
+def ensure_session(session_id: str, request: EnsureSessionRequest = EnsureSessionRequest()):
     if not nanobot_service.agent:
         raise HTTPException(status_code=400, detail="Nanobot not running")
     session = nanobot_service.agent.sessions.get_or_create(session_id)
     nanobot_service.agent.sessions.save(session)
+    
+    # Save project_id to the alias store immediately upon creation
+    if request.project_id is not None:
+        session_alias_store.update_alias_meta(
+            session_key=session_id,
+            project_id=request.project_id
+        )
+        
     alias = session_alias_store.get_alias(session_id)
     return {
         "key": session.key,
@@ -333,6 +345,7 @@ def ensure_session(session_id: str):
         "updated_at": session.updated_at,
         "metadata": session.metadata,
         "alias": alias,
+        "project_id": request.project_id
     }
 
 @app.delete("/nanobot/sessions/{session_id}")
@@ -382,6 +395,7 @@ def update_session(session_id: str, payload: SessionAliasUpdateRequest):
         alias=payload.title,
         pinned=payload.pinned,
         archived=payload.archived,
+        project_id=payload.project_id,
     )
     return {"status": "success", **updated}
 

frontend/src/App.tsx

@@ -32,9 +32,11 @@ function MainLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-screen w-full bg-background text-foreground overflow-hidden">
       <Sidebar />
-      <main className="flex-1 flex flex-col overflow-hidden h-screen">
+      <main className="flex-1 flex flex-col overflow-hidden h-screen relative">
-        <div className="flex justify-center border-b">
+        <div className="absolute top-0 left-0 right-0 h-14 flex justify-center items-center pointer-events-none z-30">
-          <ProjectSwitcher />
+          <div className="pointer-events-auto">
+            <ProjectSwitcher />
+          </div>
         </div>
         <div className="flex-1 overflow-hidden">
           {children}

frontend/src/components/ProjectSwitcher.tsx

@@ -40,7 +40,7 @@ export function ProjectSwitcher() {
   };
 
   return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-background h-12">
+    <div className="flex items-center gap-2 bg-transparent h-10">
       <DropdownMenu>
         <DropdownMenuTrigger className="flex h-8 items-center gap-1 rounded-md px-2 font-semibold hover:bg-accent hover:text-accent-foreground outline-none transition-colors">
           <Folder className="h-4 w-4 mr-1 text-blue-500" />

frontend/src/components/Sidebar.tsx

@@ -359,7 +359,7 @@ function DashboardSection({
                     className="text-red-600 focus:text-red-600 focus:bg-red-50"
                   >
                     <Trash2 className="mr-2 h-4 w-4" />
-                    <span>{t('deleteSession')}</span>
+                    <span>{t('delete')}</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
                 </DropdownMenu>
@@ -409,7 +409,10 @@ function SidebarBody() {
 
   const fetchSessions = async () => {
     try {
-      const data = await api.get<SessionInfo[]>("/nanobot/sessions");
+      const url = currentProject 
+        ? `/nanobot/sessions?project_id=${currentProject.id}`
+        : "/nanobot/sessions";
+      const data = await api.get<SessionInfo[]>(url);
       setSessions(data);
     } catch (e) {
       console.error("Failed to fetch sessions", e);
@@ -418,7 +421,7 @@ function SidebarBody() {
 
   useEffect(() => {
     fetchSessions();
-  }, [location.pathname, location.search]);
+  }, [location.pathname, location.search, currentProject?.id]);
 
   useEffect(() => {
     const onFocus = () => fetchSessions();
@@ -453,7 +456,8 @@ function SidebarBody() {
   const handleNewThread = async () => {
     const newSessionId = `api:${Date.now()}`;
     try {
-      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, {});
+      const payload = currentProject ? { project_id: currentProject.id } : {};
+      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, payload);
       await fetchSessions();
       window.dispatchEvent(new Event("nanobot:sessions-changed"));
     } catch (e) {

frontend/src/i18n/locales/en.json

@@ -8,6 +8,7 @@
   "unpin": "Unpin",
   "archive": "Archive",
   "unarchive": "Unarchive",
+  "delete": "Delete",
   "deleteSession": "Delete Session",
   "confirmDeleteSession": "Are you sure you want to delete this session?",
   "confirmBatchDeleteSessions": "Are you sure you want to delete the selected {{count}} threads?",

frontend/src/i18n/locales/zh.json

@@ -8,6 +8,7 @@
   "unpin": "取消置顶",
   "archive": "归档",
   "unarchive": "取消归档",
+  "delete": "删除",
   "deleteSession": "删除会话",
   "confirmDeleteSession": "确定要删除这个会话吗？",
   "confirmBatchDeleteSessions": "确定要删除选中的 {{count}} 个会话吗？",

frontend/src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
 import { useDashboardStore } from '../store/dashboardStore';
@@ -7,7 +7,9 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { X } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { X, Type, AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
 import { VegaChart } from "@/components/VegaChart";
 import 'react-grid-layout/css/styles.css';
@@ -45,9 +47,13 @@ function inferChartKeys(data: Record<string, unknown>[]) {
 
 export function Dashboard() {
   const { t } = useTranslation();
-  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards } = useDashboardStore();
+  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards, renameDashboard, updateDashboardTitleStyle } = useDashboardStore();
   const { currentProject } = useProjectStore();
 
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     if (currentProject) {
       loadDashboards(currentProject.id);
@@ -85,6 +91,19 @@ export function Dashboard() {
     }
   };
 
+  const handleTitleSubmit = () => {
+    if (activeDashboard && currentProject && editTitle.trim()) {
+      renameDashboard(activeDashboard.id, editTitle.trim(), currentProject.id);
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleStyleChange = (key: string, value: string) => {
+    if (activeDashboard && currentProject) {
+      updateDashboardTitleStyle(activeDashboard.id, { [key]: value }, currentProject.id);
+    }
+  };
+
   if (!currentProject) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
@@ -113,7 +132,106 @@ export function Dashboard() {
 
   return (
     <div className="p-4 h-full overflow-y-auto">
-      <h1 className="text-2xl font-bold mb-4">{activeDashboard.name || t('dashboardMenu')}</h1>
+      <div className="mb-4 flex items-center justify-between group">
+        {isEditingTitle ? (
+          <Input
+            ref={titleInputRef}
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onBlur={handleTitleSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleTitleSubmit();
+              if (e.key === 'Escape') setIsEditingTitle(false);
+            }}
+            className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-zinc-200 focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
+          />
+        ) : (
+          <div className="flex items-center gap-2">
+            <h1 
+              className="text-2xl font-bold cursor-pointer hover:bg-zinc-100 px-2 py-1 -ml-2 rounded transition-colors"
+              style={{
+                fontSize: activeDashboard.titleStyle?.fontSize || '1.5rem',
+                fontWeight: activeDashboard.titleStyle?.fontWeight || '700',
+                color: activeDashboard.titleStyle?.color || 'inherit',
+                fontStyle: activeDashboard.titleStyle?.fontStyle || 'normal',
+                textDecoration: activeDashboard.titleStyle?.textDecoration || 'none',
+                textAlign: activeDashboard.titleStyle?.textAlign || 'left',
+              }}
+              onClick={() => {
+                setEditTitle(activeDashboard.name || t('dashboardMenu'));
+                setIsEditingTitle(true);
+                setTimeout(() => titleInputRef.current?.focus(), 0);
+              }}
+            >
+              {activeDashboard.name || t('dashboardMenu')}
+            </h1>
+            <Popover>
+              <PopoverTrigger>
+                <div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Type className="h-4 w-4 text-zinc-500" />
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-3" align="start">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('fontSize') || 'Font Size'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.25rem')}>S</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.5rem')}>M</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.875rem')}>L</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '2.25rem')}>XL</Button>
+                    </div>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textStyle') || 'Text Style'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontWeight === 'normal' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontWeight', activeDashboard.titleStyle?.fontWeight === 'normal' ? '700' : 'normal')}
+                      >
+                        <Bold className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontStyle === 'italic' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontStyle', activeDashboard.titleStyle?.fontStyle === 'italic' ? 'normal' : 'italic')}
+                      >
+                        <Italic className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.textDecoration === 'underline' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('textDecoration', activeDashboard.titleStyle?.textDecoration === 'underline' ? 'none' : 'underline')}
+                      >
+                        <Underline className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textColor') || 'Text Color'}</label>
+                    <div className="flex items-center gap-2">
+                      {['inherit', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'].map(color => (
+                        <button
+                          key={color}
+                          className={`w-6 h-6 rounded-full border border-zinc-200 flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
+                          style={{ backgroundColor: color === 'inherit' ? '#18181b' : color }}
+                          onClick={() => handleStyleChange('color', color)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
       <ResponsiveGridLayout
         className="layout"
         layouts={layouts}

frontend/src/store/dashboardStore.ts

@@ -17,6 +17,14 @@ export interface ChartConfig {
 export interface DashboardConfig {
   id: string;
   name: string;
+  titleStyle?: {
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    fontStyle?: string;
+    textDecoration?: string;
+  };
   createdAt: number;
   charts: ChartConfig[];
 }
@@ -28,6 +36,7 @@ interface DashboardState {
   createDashboard: (name: string, projectId: number) => string;
   deleteDashboard: (id: string, projectId: number) => void;
   renameDashboard: (id: string, newName: string, projectId: number) => void;
+  updateDashboardTitleStyle: (id: string, style: DashboardConfig['titleStyle'], projectId: number) => void;
   setActiveDashboard: (id: string | null) => void;
   addChart: (chart: Omit<ChartConfig, 'layout'>, dashboardId: string, projectId: number) => void;
   removeChart: (chartId: string, dashboardId: string, projectId: number) => void;
@@ -133,6 +142,13 @@ export const useDashboardStore = create<DashboardState>((set) => ({
     saveDashboardsToStorage(nextDashboards, projectId);
     return { dashboards: nextDashboards };
   }),
+  updateDashboardTitleStyle: (id, style, projectId) => set((state) => {
+    const nextDashboards = state.dashboards.map((d) => 
+      d.id === id ? { ...d, titleStyle: { ...d.titleStyle, ...style } } : d
+    );
+    saveDashboardsToStorage(nextDashboards, projectId);
+    return { dashboards: nextDashboards };
+  }),
   setActiveDashboard: (id) => set({ activeDashboardId: id }),
   addChart: (chart, dashboardId, projectId) => set((state) => {
     const nextDashboards = state.dashboards.map((d) => {