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/components/chat/ChatMessage.tsx

@@ -204,11 +204,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         const resolvedProvider = typeof providerID === 'string' && providerID.trim().length > 0 ? providerID : undefined;
         const resolvedModel = typeof modelID === 'string' && modelID.trim().length > 0 ? modelID : undefined;
         const resolvedVariant = typeof variant === 'string' && variant.trim().length > 0 ? variant : undefined;
- 
+
         if (!resolvedAgent && !resolvedProvider && !resolvedModel && !resolvedVariant) {
             return null;
         }
- 
+
         return {
             agentName: resolvedAgent,
             providerId: resolvedProvider,
@@ -344,7 +344,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         const variants = model?.variants;
         return Boolean(variants && Object.keys(variants).length > 0);
     }, [isUser, modelID, providerID, providers]);
- 
+
     const displayAgentName = useStickyDisplayValue<string>(agentName);
     const displayProviderIDValue = useStickyDisplayValue<string>(providerID ?? undefined);
     const displayModelName = useStickyDisplayValue<string>(modelName);
@@ -532,36 +532,36 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
 
     const shouldShowHeader = React.useMemo(() => {
         if (isUser) return true;
-        
+
         // Use turn grouping context if available for more precise control
         const headerMessageId = turnGroupingContext?.headerMessageId;
         if (headerMessageId) {
             // For turn grouping: only show header for the first assistant message in the turn
             const isFirstAssistantInTurn = message.info.id === headerMessageId;
-            
+
             if (isFirstAssistantInTurn) {
                 // For completed messages, always show header (historical messages)
                 if (streamPhase === 'completed') {
                     return true;
                 }
-                
+
                 // For streaming messages: show header when streaming starts and keep it visible
                 const isCurrentlyStreaming = streamPhase === 'streaming' || streamPhase === 'cooldown';
                 const hasStartedStreaming = shouldShowHeaderRef.current;
-                
+
                 // Update the ref when streaming starts
                 if (isCurrentlyStreaming && !hasStartedStreaming) {
                     shouldShowHeaderRef.current = true;
                 }
-                
+
                 // Show header if streaming has started or is currently active
                 return hasStartedStreaming || isCurrentlyStreaming;
             }
-            
+
             // For non-first assistant messages, don't show header
             return false;
         }
-        
+
         // Fallback to original logic when turn grouping is not available
         if (!previousRole) return true;
         return previousRole.isUser;
@@ -600,7 +600,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     const headerVariantRaw = !isUser ? (variantFromTurnStore ?? previousUserMetadata?.variant) : undefined;
 
     const headerVariant = !isUser && modelHasVariants ? (headerVariantRaw ?? 'Default') : undefined;
- 
+
     const assistantSummaryCandidate =
         typeof turnGroupingContext?.summaryBody === 'string' && turnGroupingContext.summaryBody.trim().length > 0
             ? turnGroupingContext.summaryBody
@@ -634,6 +634,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         if (!detail) {
             return undefined;
         }
+        if (errorName === 'SessionRetry') {
+            return `Opencode failed to send a message. Retry attempt info: \n\`${detail}\``;
+        }
         return `Opencode failed to send message with error:\n\`${detail}\``;
     }, [isUser, message.info]);