feat: more ui qa

apps/desktop/src/app/shell/app-shell.tsx

@@ -138,7 +138,7 @@ export function AppShell({
         tools={titlebarTools}
       />
 
-      <main className="relative z-3 flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-(--glass-chat-surface-background) transition-none">
+      <main className="relative z-3 flex min-h-0 w-full flex-1 flex-col overflow-hidden transition-none">
         <PaneShell className="min-h-0 flex-1">
           <div
             aria-hidden="true"

apps/desktop/src/app/shell/gateway-menu-panel.tsx

@@ -42,11 +42,13 @@ export function GatewayMenuPanel({
   const gatewayOpen = gatewayState === 'open'
   const gatewayConnecting = gatewayState === 'connecting'
   const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
+
   const connectionLabel = gatewayOpen
     ? 'Connected'
     : gatewayConnecting
       ? 'Connecting'
       : prettyState(gatewayState || 'offline')
+
   const inferenceLabel = gatewayOpen
     ? inferenceStatus?.ready
       ? 'Inference ready'
@@ -54,6 +56,7 @@ export function GatewayMenuPanel({
         ? 'Inference not ready'
         : 'Checking inference'
     : 'Disconnected'
+
   const platforms = Object.entries(statusSnapshot?.gateway_platforms || {}).sort(([l], [r]) => l.localeCompare(r))
   const recentLogs = logLines.slice(-5)
 

apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx

@@ -89,7 +89,11 @@ export function useStatusbarItems({
     const failed = actions.filter(t => !t.status.running && (t.status.exit_code ?? 0) !== 0).length
     const previewRunning = previewServerRestartStatus === 'running' ? 1 : 0
     const previewFailed = previewServerRestartStatus === 'error' ? 1 : 0
-    const subagentsRunning = Object.values(subagentsBySession).reduce((sum, items) => sum + activeSubagentCount(items), 0)
+
+    const subagentsRunning = Object.values(subagentsBySession).reduce(
+      (sum, items) => sum + activeSubagentCount(items),
+      0
+    )
 
     return {
       bgFailed: failed + previewFailed,
@@ -275,16 +279,7 @@ export function useStatusbarItems({
       },
       versionItem
     ],
-    [
-      busy,
-      contextBar,
-      contextUsage,
-      currentModel,
-      currentProvider,
-      sessionStartedAt,
-      turnStartedAt,
-      versionItem
-    ]
+    [busy, contextBar, contextUsage, currentModel, currentProvider, sessionStartedAt, turnStartedAt, versionItem]
   )
 
   const leftStatusbarItems = useMemo(

apps/desktop/src/app/shell/sidebar-label.tsx

@@ -2,17 +2,20 @@ import type * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-type SidebarPanelLabelProps = React.ComponentProps<'span'>
+interface SidebarPanelLabelProps extends React.ComponentProps<'span'> {
+  dotClassName?: string
+}
 
-export function SidebarPanelLabel({ children, className, ...props }: SidebarPanelLabelProps) {
+export function SidebarPanelLabel({ children, className, dotClassName, ...props }: SidebarPanelLabelProps) {
   return (
     <span
       className={cn(
-        'flex min-w-0 items-center gap-1.5 text-[0.6875rem] font-medium text-sidebar-foreground/55',
+        'flex min-w-0 items-center gap-2 pl-2 text-[0.64rem] font-semibold uppercase tracking-[0.16em] text-(--theme-primary)',
         className
       )}
       {...props}
     >
+      <span aria-hidden="true" className={cn('dither inline-block size-2 shrink-0 rounded-[1px]', dotClassName)} />
       <span className="min-w-0 truncate leading-none">{children}</span>
     </span>
   )

apps/desktop/src/app/shell/statusbar-controls.tsx

@@ -49,7 +49,7 @@ export function StatusbarControls({ className, leftItems = [], items = [], ...pr
   return (
     <footer
       className={cn(
-        'flex h-5 shrink-0 items-stretch justify-between gap-2 border-t border-(--ui-stroke-tertiary) bg-(--glass-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
+        'flex h-5 shrink-0 items-stretch justify-between gap-2 border-t border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
         className
       )}
       {...props}

apps/desktop/src/app/shell/titlebar-controls.tsx

@@ -183,10 +183,7 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
       <DropdownMenuTrigger asChild>
         <button
           aria-label="Profiles"
-          className={cn(
-            titlebarButtonClass,
-            'grid place-items-center bg-transparent select-none [&_svg]:size-4'
-          )}
+          className={cn(titlebarButtonClass, 'grid place-items-center bg-transparent select-none [&_svg]:size-4')}
           onPointerDown={event => event.stopPropagation()}
           title="Profiles"
           type="button"
@@ -220,7 +217,7 @@ function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof us
   const className = cn(
     titlebarButtonClass,
     'grid place-items-center bg-transparent select-none [&_svg]:size-4',
-    tool.active && 'bg-(--ui-bg-tertiary)! text-foreground!',
+    tool.active && 'bg-(--ui-control-active-background)! text-foreground!',
     tool.className
   )
 

apps/desktop/src/app/shell/titlebar.test.ts

@@ -21,8 +21,6 @@ describe('titlebarControlsPosition', () => {
   })
 
   it('uses the macOS fallback while the initial window state is unknown', () => {
-    expect(titlebarControlsPosition(undefined).left).toBe(
-      TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X
-    )
+    expect(titlebarControlsPosition(undefined).left).toBe(TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X)
   })
 })

apps/desktop/src/app/shell/titlebar.ts

@@ -13,13 +13,13 @@ export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
 export const TITLEBAR_EDGE_INSET = 14
 
 export const titlebarButtonClass =
-  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] rounded-md text-muted-foreground/85 transition-colors hover:bg-(--ui-bg-tertiary) hover:text-foreground'
+  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] rounded-md text-muted-foreground/85 transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground'
 
 export const titlebarHeaderBaseClass =
-  'pointer-events-none relative z-3 flex h-(--titlebar-height) shrink-0 items-center justify-start gap-3 border-b border-(--ui-stroke-tertiary) bg-(--glass-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))]'
+  'pointer-events-none relative z-3 flex h-(--titlebar-height) shrink-0 items-center justify-start gap-3 border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))]'
 
 export const titlebarHeaderShadowClass =
-  "after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:bg-linear-to-b after:from-(--glass-chat-surface-background) after:to-transparent after:content-['']"
+  "after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:bg-linear-to-b after:from-(--ui-chat-surface-background) after:to-transparent after:content-['']"
 
 export function titlebarControlsPosition(
   windowButtonPosition: HermesConnection['windowButtonPosition'] | undefined,