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/index.css

@@ -564,33 +564,25 @@ html:not(.dark) .chat-scroll {
 /* Pierre diff viewer styling */
 .pierre-diff-wrapper {
   --diffs-font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  --diffs-font-size: var(--text-code, 13px);
-  --diffs-line-height: 1.5;
+  --diffs-font-size: var(--text-code);
+  --diffs-line-height: 24px;
   --diffs-tab-size: 2;
   --diffs-header-font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
   --diffs-min-number-column-width: 4ch;
   --diffs-gap-inline: 0;
   --diffs-gap-block: 0;
+
+  /* Prevent browser scroll anchoring jumps during async highlight/virtualization */
+  overflow-anchor: none;
+}
+
+/* Prevent scroll anchoring in stacked diff scroll container */
+[data-diff-virtual-root] {
+  overflow-anchor: none;
 }
 
 /* Desktop: slightly smaller diff code text */
-:root:not(.mobile-pointer) .pierre-diff-wrapper {
-  --diffs-font-size: 0.8125rem;
-}
-
-/* WebKit scroll rendering optimizations */
-/* Note: avoid will-change and contain as they break resize behavior */
-.pierre-diff-wrapper,
-.pierre-diff-wrapper diffs-container {
-  /* Force GPU compositing layer */
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-
-  /* WebKit touch scroll optimization */
-  -webkit-overflow-scrolling: touch;
-}
+ 
 
 .pierre-diff-wrapper diffs-container {
   display: block;
@@ -686,6 +678,17 @@ html:not(.dark) .chat-scroll {
   }
 }
 
+/* Utility: hide scrollbars without affecting layout */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
 /* Git right-sidebar header/actions collapse to icon-only when narrow. */
 @container git-header (max-width: 26rem) {
   .git-header-label {
@@ -952,11 +955,9 @@ textarea[data-terminal-hidden-input="true"]::placeholder {
 @keyframes grid-pulse {
   0%, 100% {
     opacity: 0.2;
-    transform: scale(0.8);
   }
   50% {
     opacity: 1;
-    transform: scale(1);
   }
 }