@pennyfarthing/cyclist 9.4.0 → 10.0.1

package/src/public/components/panels/MessagePanel.tsx

@@ -32,7 +32,14 @@ interface SDKToolUseBlock {
   input?: Record<string, unknown>;
 }
 
-type SDKContentBlock = SDKTextBlock | SDKToolUseBlock | { type: string; text?: string };
+interface SDKToolResultBlock {
+  type: 'tool_result';
+  tool_use_id?: string;
+  content?: string;
+  is_error?: boolean;
+}
+
+type SDKContentBlock = SDKTextBlock | SDKToolUseBlock | SDKToolResultBlock | { type: string; text?: string };
 
 interface SDKMessage {
   type: string;
@@ -141,7 +148,7 @@ function transformMessage(sdkMessage: SDKMessage): MessageData[] {
     return results;
   }
 
-  // Handle user messages
+  // Handle user messages (may contain tool_result blocks for completed Task tools)
   if (sdkMessage.type === 'user') {
     let content = '';
     const contentArray = sdkMessage.message?.content || sdkMessage.content;
@@ -152,6 +159,23 @@ function transformMessage(sdkMessage: SDKMessage): MessageData[] {
         )
         .map(block => block.text)
         .join('');
+
+      // MSSCI-14394: Extract tool_result blocks from user messages.
+      // The SDK delivers tool results inside user-type messages with tool_use_id
+      // matching the original tool_use's tool_id. Without extracting these,
+      // the subagent cleanup code never fires and spans accumulate forever.
+      const toolResultBlocks = contentArray.filter(
+        (block): block is SDKToolResultBlock => block.type === 'tool_result'
+      );
+      for (const resultBlock of toolResultBlocks) {
+        results.push({
+          type: 'tool_result',
+          tool_id: resultBlock.tool_use_id,
+          content: typeof resultBlock.content === 'string' ? resultBlock.content : '',
+          timestamp,
+          is_error: resultBlock.is_error,
+        });
+      }
     } else if (typeof contentArray === 'string') {
       content = contentArray;
     }
@@ -216,15 +240,18 @@ export function MessagePanel(): React.ReactElement {
     isStopping,
     bellMode,
     relayMode,
+    contextPercent,
+    currentAgent,
     handleStop,
     handleForceStop,
     handleReset,
     handleBellModeChange,
     handleRelayModeChange,
+    handleTirePump,
   } = useControlBar();
 
   // Claude context for WebSocket communication
-  const { send, abort, onMessage, onComplete, onError, onUserMessage, isConnected } = useClaudeContext();
+  const { send, abort, onMessage, onComplete, onError, onUserMessage, onClear, isConnected } = useClaudeContext();
 
   // Persona context - capture current persona to stamp on agent messages
   const { persona } = usePersona();
@@ -272,7 +299,26 @@ export function MessagePanel(): React.ReactElement {
           ? { ...msg, agentSlug: p.slug ?? undefined, agentTheme: p.theme ?? undefined, agentCharacter: p.character ?? undefined }
           : msg
       );
-      setMessages(prev => [...prev, ...stamped]);
+
+      // MSSCI-14394: When tool_results arrive for completed Task tools, remove their
+      // subagent messages from the view (they have parent_id matching the tool_result's tool_id).
+      const completedTaskIds = stamped
+        .filter(m => m.type === 'tool_result' && !m.parent_id && m.tool_id)
+        .map(m => m.tool_id!);
+
+      if (completedTaskIds.length > 0) {
+        setMessages(prev => {
+          const idsToRemove = new Set(completedTaskIds.filter(id =>
+            prev.some(m => m.parent_id === id)
+          ));
+          if (idsToRemove.size > 0) {
+            return [...prev.filter(m => !m.parent_id || !idsToRemove.has(m.parent_id)), ...stamped];
+          }
+          return [...prev, ...stamped];
+        });
+      } else {
+        setMessages(prev => [...prev, ...stamped]);
+      }
     }
   }, []);
 
@@ -317,6 +363,19 @@ export function MessagePanel(): React.ReactElement {
     return cleanup;
   }, [onUserMessage]);
 
+  // Subscribe to clear events — insert a divider message
+  useEffect(() => {
+    const cleanup = onClear(() => {
+      setMessages(prev => [...prev, {
+        type: 'context_cleared',
+        content: 'Context cleared',
+        timestamp: Date.now(),
+      }]);
+      setIsProcessing(false);
+    });
+    return cleanup;
+  }, [onClear]);
+
   // Connect to Claude events via WebSocket context
   useEffect(() => {
     if (!isConnected) {
@@ -382,6 +441,9 @@ export function MessagePanel(): React.ReactElement {
             relayMode={relayMode}
             onBellModeChange={handleBellModeChange}
             onRelayModeChange={handleRelayModeChange}
+            contextPercent={contextPercent}
+            currentAgent={currentAgent}
+            onTirePump={handleTirePump}
           />
         </div>
       </div>

package/src/public/components/panels/SettingsPanel.tsx

@@ -45,10 +45,6 @@ interface Settings {
     show_flow?: boolean;
     sidebar_width?: number;
   };
-  notifications?: {
-    phase_change?: boolean;
-    sound?: boolean;
-  };
   pennyfarthing?: {
     theme?: string;
   };
@@ -80,8 +76,8 @@ const PANEL_DISPLAY_NAMES: Record<string, string> = {
   settings: 'Settings',
 };
 
-// Panels that cannot be hidden (sacred center)
-const PROTECTED_PANELS = new Set(['message']);
+// Panels that cannot be hidden
+const PROTECTED_PANELS = new Set<string>();
 
 export function SettingsPanel(): React.ReactElement {
   const [settings, setSettings] = useState<Settings | null>(null);
@@ -147,6 +143,7 @@ export function SettingsPanel(): React.ReactElement {
 
     // Load color preset from project config
     loadPresetFromProject().then(presetId => {
+      applyPreset(presetId);
       setColorPreset(presetId);
     });
 
@@ -425,28 +422,6 @@ export function SettingsPanel(): React.ReactElement {
 
       <Separator className="my-2" />
 
-      <section className="settings-section">
-        <h4>Notifications</h4>
-        <div className="toggle-setting">
-          <Switch
-            checked={settings.notifications?.phase_change || false}
-            onCheckedChange={(checked: boolean) => handleToggle('notifications', 'phase_change', checked)}
-            disabled={saving}
-          />
-          Phase change alerts
-        </div>
-        <div className="toggle-setting">
-          <Switch
-            checked={settings.notifications?.sound || false}
-            onCheckedChange={(checked: boolean) => handleToggle('notifications', 'sound', checked)}
-            disabled={saving}
-          />
-          Sound effects
-        </div>
-      </section>
-
-      <Separator className="my-2" />
-
       <section className="settings-section">
         <h4>Panel Visibility</h4>
         <div className="panel-visibility-list">

package/src/public/components/panels/WorkflowPanel.tsx

@@ -10,9 +10,11 @@
  * Epic: epic-76 (Dockview Panel Migration)
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useClaudeContext } from '../../contexts/ClaudeContext';
 import { useStory } from '../../hooks/useStory';
 import type { WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
 
@@ -89,7 +91,10 @@ function SteppedProgress({ phases }: { phases: WorkflowPhase[] }): React.ReactEl
 // Available Workflows List (MSSCI-14301)
 // =============================================================================
 
-function AvailableWorkflowsList({ workflows }: { workflows: AvailableWorkflow[] }): React.ReactElement {
+function AvailableWorkflowsList({ workflows, onStart }: {
+  workflows: AvailableWorkflow[];
+  onStart?: (workflow: AvailableWorkflow) => void;
+}): React.ReactElement {
   return (
     <div className="available-workflows">
       <div className="available-workflows-header">
@@ -113,6 +118,17 @@ function AvailableWorkflowsList({ workflows }: { workflows: AvailableWorkflow[]
             {wf.type === 'stepped' && (
               <div className="workflow-entry-hint">/workflow start {wf.name}</div>
             )}
+            <div className="workflow-entry-footer">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="workflow-start-button"
+                data-testid="workflow-start-button"
+                onClick={() => onStart?.(wf)}
+              >
+                Start
+              </Button>
+            </div>
           </div>
         ))}
       </div>
@@ -126,6 +142,12 @@ function AvailableWorkflowsList({ workflows }: { workflows: AvailableWorkflow[]
 
 export function WorkflowPanel(): React.ReactElement {
   const { story, isLoading, error, availableWorkflows } = useStory();
+  const { send, isConnected } = useClaudeContext();
+
+  const handleStartWorkflow = useCallback((wf: AvailableWorkflow) => {
+    if (!isConnected) return;
+    send(`/workflow start ${wf.name}`);
+  }, [send, isConnected]);
 
   if (isLoading) {
     return (
@@ -159,7 +181,7 @@ export function WorkflowPanel(): React.ReactElement {
     if (availableWorkflows && availableWorkflows.length > 0) {
       return (
         <div className="workflow-panel" data-testid="workflow-panel">
-          <AvailableWorkflowsList workflows={availableWorkflows} />
+          <AvailableWorkflowsList workflows={availableWorkflows} onStart={handleStartWorkflow} />
         </div>
       );
     }

package/src/public/contexts/ClaudeContext.tsx

@@ -24,6 +24,7 @@ interface WebSocketClaudeMessage {
 type MessageCallback = (message: ClaudeMessage) => void;
 type CompleteCallback = () => void;
 type ErrorCallback = (error: string) => void;
+type ClearCallback = () => void;
 
 /** User message sent via send() - for display in MessagePanel */
 interface UserMessageData {
@@ -56,6 +57,8 @@ interface ClaudeContextValue {
   onError: (callback: ErrorCallback) => () => void;
   /** Subscribe to user messages sent via send() - for display in MessagePanel */
   onUserMessage: (callback: UserMessageCallback) => () => void;
+  /** Subscribe to clear/reset events */
+  onClear: (callback: ClearCallback) => () => void;
 }
 
 // =============================================================================
@@ -83,6 +86,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
   const completeCallbacksRef = useRef<Set<CompleteCallback>>(new Set());
   const errorCallbacksRef = useRef<Set<ErrorCallback>>(new Set());
   const userMessageCallbacksRef = useRef<Set<UserMessageCallback>>(new Set());
+  const clearCallbacksRef = useRef<Set<ClearCallback>>(new Set());
 
   // Connect to WebSocket
   const connect = useCallback(() => {
@@ -204,6 +208,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     }
 
     wsRef.current.send(JSON.stringify({ type: 'clear' }));
+    clearCallbacksRef.current.forEach(cb => cb());
   }, []);
 
   // Clear session and reload agent (TirePump)
@@ -215,6 +220,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
 
     console.log('[ClaudeContext] TirePump: clearAndReload agent:', agent);
     wsRef.current.send(JSON.stringify({ type: 'clearAndReload', agent }));
+    clearCallbacksRef.current.forEach(cb => cb());
   }, []);
 
   // Set permission mode
@@ -260,6 +266,14 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     };
   }, []);
 
+  // Subscribe to clear/reset events
+  const onClear = useCallback((callback: ClearCallback) => {
+    clearCallbacksRef.current.add(callback);
+    return () => {
+      clearCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
   const value = useMemo(() => ({
     send,
     abort,
@@ -272,7 +286,8 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     onComplete,
     onError,
     onUserMessage,
-  }), [send, abort, clear, clearAndReload, setMode, isConnected, mode, onMessage, onComplete, onError, onUserMessage]);
+    onClear,
+  }), [send, abort, clear, clearAndReload, setMode, isConnected, mode, onMessage, onComplete, onError, onUserMessage, onClear]);
 
   return (
     <ClaudeContext.Provider value={value}>

package/src/public/hooks/useColorScheme.ts

@@ -0,0 +1,27 @@
+/**
+ * useColorScheme Hook
+ *
+ * Tracks the user's preferred color scheme (light/dark) via
+ * the prefers-color-scheme media query.
+ */
+
+import { useState, useEffect } from 'react';
+
+export type ColorScheme = 'light' | 'dark';
+
+export function useColorScheme(): ColorScheme {
+  const [scheme, setScheme] = useState<ColorScheme>(() =>
+    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setScheme(e.matches ? 'dark' : 'light');
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  return scheme;
+}

package/src/public/hooks/usePlanModeExit.ts

@@ -0,0 +1,105 @@
+/**
+ * usePlanModeExit - Smooth plan mode exit with tirepump choice
+ *
+ * Story: MSSCI-14327
+ *
+ * Handles the transition from plan mode to accept mode after plan approval,
+ * and offers the user a choice to tirepump (commit/push) changes.
+ */
+
+import { useState, useCallback } from 'react';
+import type { Mode } from '../components/ModeSwitch/index';
+
+/** The Claude CLI mode to transition to after plan exit */
+export const PLAN_EXIT_MODE = 'acceptEdits';
+
+export interface PlanModeExitOptions {
+  currentMode: Mode;
+  setMode: (mode: Mode) => void;
+  approved: boolean;
+  wsConnected?: boolean;
+}
+
+export interface TirepumpOption {
+  action: 'tirepump' | 'continue';
+  label: string;
+}
+
+export interface PlanModeExitResult {
+  showTirepumpChoice: boolean;
+  options?: TirepumpOption[];
+  localOnly?: boolean;
+}
+
+export interface TirepumpChoiceOptions {
+  choice: 'tirepump' | 'continue';
+  currentAgent?: string;
+  setMode?: (mode: Mode) => void;
+  onContextClear?: (data: { agent: string }) => void;
+}
+
+export interface TirepumpChoiceResult {
+  contextCleared: boolean;
+  action: 'tirepump' | 'continue';
+}
+
+const TIREPUMP_OPTIONS: TirepumpOption[] = [
+  { action: 'tirepump', label: 'Commit & push changes' },
+  { action: 'continue', label: 'Continue without committing' },
+];
+
+export async function handlePlanModeExit(
+  options: PlanModeExitOptions
+): Promise<PlanModeExitResult> {
+  const { currentMode, setMode, approved, wsConnected } = options;
+
+  if (!approved) {
+    return { showTirepumpChoice: false };
+  }
+
+  // Transition from plan to accept if not already there
+  if (currentMode !== 'accept') {
+    setMode('accept');
+  }
+
+  const localOnly = wsConnected === false;
+
+  return {
+    showTirepumpChoice: true,
+    options: TIREPUMP_OPTIONS,
+    ...(localOnly && { localOnly: true }),
+  };
+}
+
+export async function handleTirepumpChoice(
+  options: TirepumpChoiceOptions
+): Promise<TirepumpChoiceResult> {
+  const { choice, currentAgent, onContextClear } = options;
+
+  if (choice === 'tirepump') {
+    onContextClear?.({ agent: currentAgent ?? '' });
+    return { contextCleared: true, action: 'tirepump' };
+  }
+
+  return { contextCleared: false, action: 'continue' };
+}
+
+export function usePlanModeExit() {
+  const [showChoice, setShowChoice] = useState(false);
+  const [exitResult, setExitResult] = useState<PlanModeExitResult | null>(null);
+
+  const exitPlanMode = useCallback(async (options: PlanModeExitOptions) => {
+    const result = await handlePlanModeExit(options);
+    setExitResult(result);
+    setShowChoice(result.showTirepumpChoice);
+    return result;
+  }, []);
+
+  const chooseTirepump = useCallback(async (options: TirepumpChoiceOptions) => {
+    const result = await handleTirepumpChoice(options);
+    setShowChoice(false);
+    return result;
+  }, []);
+
+  return { showChoice, exitResult, exitPlanMode, chooseTirepump };
+}

package/src/public/styles/dockview-theme.css

@@ -21,7 +21,7 @@
   /* Dockview CSS variable mappings to Cyclist theme */
   --dv-group-view-background-color: var(--bg-secondary, #0f0f1a);
   --dv-tabs-and-actions-container-background-color: var(--bg-tertiary, #1a1a2e);
-  --dv-activegroup-visiblepanel-tab-background-color: var(--accent-color, #6366f1);
+  --dv-activegroup-visiblepanel-tab-background-color: var(--accent, #6366f1);
   --dv-activegroup-visiblepanel-tab-color: var(--text-primary, #ffffff);
   --dv-activegroup-hiddenpanel-tab-background-color: var(--bg-tertiary, #1a1a2e);
   --dv-activegroup-hiddenpanel-tab-color: var(--text-secondary, #a1a1aa);
@@ -29,11 +29,11 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--text-secondary, #a1a1aa);
   --dv-inactivegroup-hiddenpanel-tab-background-color: var(--bg-tertiary, #1a1a2e);
   --dv-inactivegroup-hiddenpanel-tab-color: var(--text-muted, #71717a);
-  --dv-separator-border: var(--border-color, #27272a);
-  --dv-paneview-header-border-color: var(--border-color, #27272a);
+  --dv-separator-border: var(--border, #27272a);
+  --dv-paneview-header-border-color: var(--border, #27272a);
   --dv-tab-close-icon: var(--text-muted, #71717a);
   --dv-drag-over-background-color: rgba(99, 102, 241, 0.2);
-  --dv-drag-over-border-color: var(--accent-color, #6366f1);
+  --dv-drag-over-border-color: var(--accent, #6366f1);
 }
 
 .dockview-container {
@@ -70,12 +70,12 @@
 }
 
 .cyclist-dockview .dv-tab:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
 }
 
 /* Active tab indicator */
 .cyclist-dockview .dv-tab.dv-active-tab {
-  border-bottom: 2px solid var(--accent-color, #6366f1);
+  border-bottom: 2px solid var(--accent, #6366f1);
 }
 
 /* Tab close button */
@@ -93,13 +93,11 @@
    ============================================================================= */
 
 .cyclist-dockview .dv-group-panel {
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
 }
 
-/* Message panel - hide close button (sacred, cannot be closed) */
-.cyclist-dockview .dv-tab[data-panel-id="message"] .dv-close-action {
-  display: none !important;
-}
+/* Message panel tab bar is hidden via Dockview API (group.headerVisible = false)
+   in DockviewWorkspace.tsx - no CSS selector needed */
 
 /* =============================================================================
    Resize Sash Styles
@@ -111,11 +109,11 @@
 }
 
 .cyclist-dockview .dv-resize-container .dv-sash:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
 }
 
 .cyclist-dockview .dv-resize-container .dv-sash:active {
-  background-color: var(--accent-color-bright, #818cf8);
+  background-color: var(--accent-hover, #818cf8);
 }
 
 /* =============================================================================
@@ -151,12 +149,12 @@
 
 /* Focus indicators */
 .cyclist-dockview .dv-tab:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: -2px;
 }
 
 .cyclist-dockview .dv-sash:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
 }
 
 /* Reduced motion */
@@ -206,7 +204,7 @@
   padding: 4px 8px;
   margin: 4px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 4px;
   color: var(--text-secondary, #a1a1aa);
   font-size: 12px;
@@ -215,9 +213,9 @@
 }
 
 .cyclist-dockview .dv-tabs-overflow-dropdown-default:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
   color: var(--text-primary, #ffffff);
-  border-color: var(--accent-color, #6366f1);
+  border-color: var(--accent, #6366f1);
 }
 
 /* Overflow dropdown container (list of hidden tabs) */
@@ -229,7 +227,7 @@
   max-height: 300px;
   overflow-y: auto;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;
@@ -249,12 +247,12 @@
 }
 
 .cyclist-dockview .dv-tabs-overflow-container .dv-tab:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
 }
 
 .cyclist-dockview .dv-tabs-overflow-container .dv-tab:not(:last-child) {
-  border-bottom: 1px solid var(--border-color, #27272a);
+  border-bottom: 1px solid var(--border, #27272a);
 }
 
 /* =============================================================================
@@ -293,7 +291,7 @@
   gap: 4px;
   padding: 6px 10px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   color: var(--text-secondary, #a1a1aa);
   cursor: pointer;
@@ -302,9 +300,9 @@
 }
 
 .panel-restore-button:hover {
-  background-color: var(--bg-hover, #27272a);
+  background-color: var(--bg-tertiary, #27272a);
   color: var(--text-primary, #ffffff);
-  border-color: var(--accent-color, #6366f1);
+  border-color: var(--accent, #6366f1);
 }
 
 .panel-restore-icon {
@@ -314,7 +312,7 @@
 }
 
 .panel-restore-count {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
   padding: 2px 6px;
   border-radius: 10px;
@@ -329,7 +327,7 @@
   margin-top: 4px;
   min-width: 160px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   overflow: hidden;
@@ -342,7 +340,7 @@
   color: var(--text-muted, #71717a);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  border-bottom: 1px solid var(--border-color, #27272a);
+  border-bottom: 1px solid var(--border, #27272a);
 }
 
 .panel-restore-item {
@@ -359,12 +357,12 @@
 }
 
 .panel-restore-item:hover {
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   color: var(--text-primary, #ffffff);
 }
 
 .panel-restore-item:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: -2px;
 }
 
@@ -396,7 +394,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(10, 10, 15, 0.9);
+  background-color: color-mix(in srgb, var(--bg-primary, #0a0a0f) 90%, transparent);
   z-index: 10;
 }
 
@@ -407,7 +405,7 @@
   gap: 12px;
   padding: 24px;
   background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border-color, #27272a);
+  border: 1px solid var(--border, #27272a);
   border-radius: 8px;
   text-align: center;
 }
@@ -424,7 +422,7 @@
 
 .tty-restart-button {
   padding: 8px 16px;
-  background-color: var(--accent-color, #6366f1);
+  background-color: var(--accent, #6366f1);
   border: none;
   border-radius: 6px;
   color: var(--text-primary, #ffffff);
@@ -439,7 +437,7 @@
 }
 
 .tty-restart-button:focus-visible {
-  outline: 2px solid var(--accent-color, #6366f1);
+  outline: 2px solid var(--accent, #6366f1);
   outline-offset: 2px;
 }