feat(ui): redesign workspace shell with context panel, tabbed sidebars, and faster diff UX (#433)

* feat: tabbed right sidebar, context panel, floating diff comments

* fix: auto-close left sidebar when context panel opens

- Increase default context panel width from 520 to 600 pixels
- Increase sidebar minimum width from 200 to 300 pixels
- Replace collapsible component with custom button in diff view

* refactoring: rework sidebars, tabs, and file tree layout

- Rewrite AnimatedTabs as segment-style with sliding indicator
- Upgrade SidebarFilesTree to match FilesView features (context menus,
  git status, file icons, CRUD dialogs, fuzzy search ranking)
- Restructure FilesView header: tabs row + actions row, remove breadcrumbs
- Show relative path in context panel header, track active tab
- Allow left sidebar to stay open alongside context panel
- Hide diff/files tabs from header on desktop (mobile-only)
- Move chevron after group name in session sidebar
- Compact tab heights in right sidebar and git view
- Size PreviewToggleButton to match other action buttons
- Remove directory loading spinner from folder icons

* feat: add project icon and color customization

- Enable users to assign custom icons to projects
- Allow users to choose accent colors for projects
- Stabilize repo status UI during project switching

* feat: add scroll fade indicators to editor tabs

* style: reduce spacing and icon sizes in header

* style: adjust tab component padding from uniform to vertical-horizontal

* feat: Add session state indicators to project tabs

* feat: Enhance session status handling and improve UI responsiveness

* fix: preserve upstream tracking on branch rename

* fix: improve initial remote selection for pull requests

- Uses saved remote name from previous session when available
- Selects remote based on tracking branch when possible
- Falls back to origin or first available remote

* perf(diff): faster highlight, stable stacked scroll

- split/unified Pierre worker pools; prefer shiki-wasm
- align diff CSS line-height; disable scroll anchoring; drop WebKit compositing hacks
- harden stacked pin/align (cancel on user scroll/input); prevent overscroll
- make overlay scrollbar MutationObserver optional; disable for diff container

* feat: handle binary files in diff view

* fix: adjust project tabs layout and drag regions

* style: update drag overlay visual styling

* feat: enable number keys to switch projects in the sidebar

* fix: recognize octet-stream as text-based MIME type

* feat: add keyboard navigation to context panel

* feat: add session pinning to sidebar

- Pin important sessions to keep them at the top
- Pinned sessions persist across browser sessions

* refactor: move context usage display from chat input to header

packages/ui/src/stores/useProjectsStore.ts

@@ -23,6 +23,7 @@ interface ProjectsStore {
   setActiveProject: (id: string) => void;
   setActiveProjectIdOnly: (id: string) => void;
   renameProject: (id: string, label: string) => void;
+  updateProjectMeta: (id: string, meta: { label?: string; icon?: string | null; color?: string | null }) => void;
   reorderProjects: (fromIndex: number, toIndex: number) => void;
   validateProjectPath: (path: string) => ProjectPathValidationResult;
   synchronizeFromSettings: (settings: DesktopSettings) => void;
@@ -72,7 +73,8 @@ const deriveProjectLabel = (path: string): string => {
     return 'Root';
   }
   const segments = normalized.split('/').filter(Boolean);
-  return segments[segments.length - 1] || normalized;
+  const raw = segments[segments.length - 1] || normalized;
+  return raw.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 };
 
 const createProjectId = (): string => {
@@ -377,6 +379,26 @@ export const useProjectsStore = create<ProjectsStore>()(
       persistProjects(nextProjects, activeProjectId);
     },
 
+    updateProjectMeta: (id: string, meta: { label?: string; icon?: string | null; color?: string | null }) => {
+      if (vscodeWorkspace) {
+        return;
+      }
+      const { projects, activeProjectId } = get();
+      const nextProjects = projects.map((project) => {
+        if (project.id !== id) return project;
+        const updated = { ...project };
+        if (meta.label !== undefined) {
+          const trimmed = meta.label.trim();
+          if (trimmed) updated.label = trimmed;
+        }
+        if (meta.icon !== undefined) updated.icon = meta.icon;
+        if (meta.color !== undefined) updated.color = meta.color;
+        return updated;
+      });
+      set({ projects: nextProjects });
+      persistProjects(nextProjects, activeProjectId);
+    },
+
     reorderProjects: (fromIndex: number, toIndex: number) => {
       if (vscodeWorkspace) {
         return;