@pennyfarthing/cyclist 9.4.0 → 10.0.1

package/src/public/components/ApprovalModal/index.tsx

@@ -40,6 +40,7 @@ export const TOOL_NAME_TESTID = 'tool-name';
 export const APPROVE_BUTTON_TESTID = 'approve-button';
 export const REJECT_BUTTON_TESTID = 'reject-button';
 export const ALWAYS_ALLOW_TESTID = 'always-allow-checkbox';
+export const WARNING_TESTID = 'approval-modal-warning';
 
 // ============================================================================
 // Constants - Keyboard Shortcuts
@@ -120,6 +121,9 @@ export interface ApprovalRequest {
   toolName: string;
   input: ToolInput;
   reason?: string;
+  severity?: ActionSeverity;
+  warning?: string;
+  agent?: string;
 }
 
 export interface ApprovalResponse {
@@ -145,6 +149,12 @@ export interface ApprovalModalProps {
   onDismiss?: () => void;
   /** Additional CSS class name */
   className?: string;
+  /** Server-provided severity classification (MSSCI-14323) */
+  severity?: ActionSeverity;
+  /** Server-provided warning text for destructive operations (MSSCI-14323) */
+  warning?: string;
+  /** Agent name requesting permission (MSSCI-14392) */
+  agent?: string;
 }
 
 interface UseApprovalModalResult {
@@ -361,6 +371,9 @@ interface HookRequestMessage {
   toolId: string;
   toolName: string;
   input: Record<string, unknown>;
+  severity?: 'safe' | 'normal' | 'destructive';
+  warning?: string;
+  agent?: string;
   context?: {
     percentage: number;
     isHigh: boolean;
@@ -417,6 +430,9 @@ export function subscribeToPermissionRequests(
               toolId: msg.toolId,
               toolName: msg.toolName,
               input: msg.input as ToolInput,
+              severity: msg.severity as ActionSeverity | undefined,
+              warning: msg.warning,
+              agent: msg.agent,
             });
           }
         } catch (err) {
@@ -487,6 +503,9 @@ export default function ApprovalModal({
   onReject,
   onDismiss,
   className = '',
+  severity: serverSeverity,
+  warning,
+  agent,
 }: ApprovalModalProps): React.ReactElement {
   const [alwaysAllow, setAlwaysAllow] = useState(false);
 
@@ -506,7 +525,7 @@ export default function ApprovalModal({
     return () => document.removeEventListener('keydown', handleKey);
   }, [isOpen, alwaysAllow, onApprove]);
 
-  const severity = classifyActionSeverity(toolName, input);
+  const severity = serverSeverity ?? classifyActionSeverity(toolName, input);
   const severityClass = SEVERITY_CLASSNAMES[severity];
   const preview = formatCommandPreview(toolName, input);
   const icon = getToolIcon(toolName);
@@ -546,6 +565,8 @@ export default function ApprovalModal({
             <div>
               <div className="flex items-center gap-2 mb-3 text-sm text-muted-foreground">
                 <span className="approval-modal__icon" data-icon={icon} />
+                {agent && <span data-testid="agent-name" className="font-medium">{agent}</span>}
+                {agent && <span className="text-muted-foreground/50">/</span>}
                 <span data-testid={TOOL_NAME_TESTID}>{toolName}</span>
               </div>
 
@@ -564,6 +585,15 @@ export default function ApprovalModal({
           </DialogDescription>
         </DialogHeader>
 
+        {warning && (
+          <div
+            data-testid={WARNING_TESTID}
+            className="text-sm text-destructive font-medium"
+          >
+            {warning}
+          </div>
+        )}
+
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <Checkbox
             id="always-allow"

package/src/public/components/AskUserQuestionBlock.tsx

@@ -0,0 +1,162 @@
+/**
+ * AskUserQuestionBlock Component
+ *
+ * Renders interactive buttons for AskUserQuestion tool_use messages.
+ * Uses the existing ClaudeContext to send responses back via WebSocket.
+ *
+ * Story: MSSCI-14395 - Render AskUserQuestion tool via Reflector QuickActions
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useClaudeContext } from '../contexts/ClaudeContext';
+
+interface QuestionOption {
+  label: string;
+  description: string;
+}
+
+interface Question {
+  question: string;
+  header: string;
+  options: QuestionOption[];
+  multiSelect: boolean;
+}
+
+interface AskUserQuestionToolUse {
+  type: 'tool_use';
+  tool_name: string;
+  tool_id: string;
+  input: {
+    questions: Question[];
+  };
+  timestamp: number;
+}
+
+interface AskUserQuestionBlockProps {
+  toolUse: AskUserQuestionToolUse;
+}
+
+function SingleSelectQuestion({ question, onSubmit, disabled }: {
+  question: Question;
+  onSubmit: (answer: string) => void;
+  disabled: boolean;
+}) {
+  return (
+    <div className="ask-question-group">
+      <Badge variant="secondary" className="ask-question-header">{question.header}</Badge>
+      <p className="ask-question-text">{question.question}</p>
+      <div className="ask-question-options">
+        {question.options.map((opt) => (
+          <Button
+            key={opt.label}
+            variant="secondary"
+            size="sm"
+            className="ask-question-option"
+            onClick={() => onSubmit(opt.label)}
+            disabled={disabled}
+          >
+            <span className="ask-option-label">{opt.label}</span>
+            <span className="ask-option-desc">{opt.description}</span>
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MultiSelectQuestion({ question, onSubmit, disabled }: {
+  question: Question;
+  onSubmit: (answers: string[]) => void;
+  disabled: boolean;
+}) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const toggleOption = useCallback((label: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(label)) {
+        next.delete(label);
+      } else {
+        next.add(label);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(Array.from(selected));
+  }, [selected, onSubmit]);
+
+  return (
+    <div className="ask-question-group">
+      <Badge variant="secondary" className="ask-question-header">{question.header}</Badge>
+      <p className="ask-question-text">{question.question}</p>
+      <div className="ask-question-options">
+        {question.options.map((opt) => (
+          <Button
+            key={opt.label}
+            variant="secondary"
+            size="sm"
+            className="ask-question-option"
+            onClick={() => toggleOption(opt.label)}
+            disabled={disabled}
+            aria-pressed={selected.has(opt.label)}
+          >
+            <span className="ask-option-label">{opt.label}</span>
+            <span className="ask-option-desc">{opt.description}</span>
+          </Button>
+        ))}
+      </div>
+      <Button
+        variant="default"
+        size="sm"
+        className="ask-question-submit"
+        onClick={handleSubmit}
+        disabled={disabled || selected.size === 0}
+        aria-label="Confirm"
+      >
+        Confirm
+      </Button>
+    </div>
+  );
+}
+
+export function AskUserQuestionBlock({ toolUse }: AskUserQuestionBlockProps): React.ReactElement {
+  const { send } = useClaudeContext();
+  const [isDisabled, setIsDisabled] = useState(false);
+  const questions = toolUse.input?.questions || [];
+
+  const handleSingleSelect = useCallback((answer: string) => {
+    setIsDisabled(true);
+    send(answer, []);
+  }, [send]);
+
+  const handleMultiSelect = useCallback((answers: string[]) => {
+    setIsDisabled(true);
+    send(answers.join(', '), []);
+  }, [send]);
+
+  return (
+    <div className="ask-user-question-block">
+      {questions.map((q, i) => (
+        q.multiSelect ? (
+          <MultiSelectQuestion
+            key={i}
+            question={q}
+            onSubmit={handleMultiSelect}
+            disabled={isDisabled}
+          />
+        ) : (
+          <SingleSelectQuestion
+            key={i}
+            question={q}
+            onSubmit={handleSingleSelect}
+            disabled={isDisabled}
+          />
+        )
+      ))}
+    </div>
+  );
+}

package/src/public/components/ControlBar.tsx

@@ -174,25 +174,24 @@ export function ControlBar({
             <TooltipContent>Relay Mode: Auto-handoff to next agent (Cmd+4)</TooltipContent>
           </Tooltip>
 
-          {/* TirePump Button - visible at 50%+ context, warning at 70%+ */}
-          {contextPercent >= 50 && currentAgent && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  type="button"
-                  className={`btn-toggle pump-toggle ${contextPercent >= 70 ? 'warning' : ''}`}
-                  data-testid="pump-toggle"
-                  onClick={onTirePump}
-                  aria-label="TirePump: Clear context and reload agent"
-                >
-                  <span className="toggle-icon">🫧</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{`TirePump: Clear context (${contextPercent}%) and reload ${currentAgent}`}</TooltipContent>
-            </Tooltip>
-          )}
+          {/* TirePump Button - always visible, warning style at 70%+ */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                type="button"
+                className={`btn-toggle pump-toggle ${contextPercent >= 70 ? 'warning' : ''}`}
+                data-testid="pump-toggle"
+                onClick={onTirePump}
+                disabled={!currentAgent}
+                aria-label="TirePump: Clear context and reload agent"
+              >
+                <span className="toggle-icon">⬆️</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{currentAgent ? `TirePump: Clear context (${contextPercent}%) and reload ${currentAgent}` : 'TirePump: No agent loaded'}</TooltipContent>
+          </Tooltip>
         </div>
 
       {/* Stop button - always visible, disabled when not running */}

package/src/public/components/DockviewWorkspace.tsx

@@ -107,7 +107,7 @@ const PANEL_TITLES: Record<string, string> = {
   workflow: 'Workflow',
   ac: 'AC',
   todo: 'Todo',
-  background: 'Background',
+  background: 'Subagents',
   git: 'Git',
   hotspots: 'Hotspots',
   settings: 'Settings',
@@ -257,6 +257,7 @@ export function createDefaultDockviewLayout(): SerializedDockview {
               views: [PANEL_INVENTORY.MESSAGE],
               activeView: PANEL_INVENTORY.MESSAGE,
               id: 'center',
+              hideHeader: true,
             },
             size: 600, // Center takes remaining space
           },
@@ -433,10 +434,11 @@ export function DockviewWorkspace({
       try {
         api.fromJSON(initialLayout);
 
-        // After restoring, lock the message panel's group
+        // After restoring, lock the message panel's group and hide its tab bar
         const messagePanel = api.getPanel(PANEL_INVENTORY.MESSAGE);
         if (messagePanel?.group) {
           messagePanel.group.locked = 'no-drop-target';
+          messagePanel.group.model.header.hidden = true;
         }
 
         setIsReady(true);
@@ -503,8 +505,10 @@ export function DockviewWorkspace({
     }
 
     // Lock the center group - MessagePanel cannot be closed or moved
+    // Hide the tab bar so users can't accidentally close the message tab
     if (messagePanel?.group) {
       messagePanel.group.locked = 'no-drop-target';
+      messagePanel.group.model.header.hidden = true;
     }
 
     // Set initial sidebar sizes
@@ -555,9 +559,9 @@ export function DockviewWorkspace({
         handleLayoutChange();
       }),
       api.onDidRemovePanel((e) => {
-        // Track closed panels (except message which can't be closed)
+        // Track closed panels for restoration
         const panelId = e?.panel?.id;
-        if (panelId && panelId !== PANEL_INVENTORY.MESSAGE) {
+        if (panelId) {
           closedPanels.add(panelId);
           updateClosedPanelsList();
         }
@@ -622,6 +626,32 @@ export function DockviewWorkspace({
     };
   }, []);
 
+  // Listen for panel toggle commands via WebSocket (View menu integration)
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/settings`);
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'panel:toggle' && data.panelId) {
+          const api = dockviewApiRef;
+          if (!api) return;
+          const existing = api.getPanel(data.panelId);
+          if (existing) {
+            existing.api.close();
+          } else {
+            restorePanel(data.panelId);
+          }
+        }
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    return () => ws.close();
+  }, []);
+
   // Component map for Dockview
   const components = {
     PanelAdapter,
@@ -638,7 +668,7 @@ export function DockviewWorkspace({
     workflow: 'Workflow',
     ac: 'AC',
     todo: 'Todo',
-    background: 'Background',
+    background: 'Subagents',
     git: 'Git',
     hotspots: 'Hotspots',
     settings: 'Settings',

package/src/public/components/Message.tsx

@@ -6,7 +6,7 @@
  * Story MSSCI-12777 - User Avatar from GitHub
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { parseMarkdown } from '../utils/markdown';
@@ -75,7 +75,63 @@ function UserAvatar(): React.ReactElement {
   return <span className="avatar-emoji">👤</span>;
 }
 
+function useSortableTables(contentRef: React.RefObject<HTMLDivElement | null>) {
+  const attachSort = useCallback(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const headers = el.querySelectorAll<HTMLTableCellElement>('th.sortable-th');
+    headers.forEach((th) => {
+      if (th.dataset.sortBound) return;
+      th.dataset.sortBound = '1';
+      th.style.cursor = 'pointer';
+      th.addEventListener('click', () => {
+        const colIdx = parseInt(th.dataset.col || '0', 10);
+        const table = th.closest('table');
+        if (!table) return;
+        const tbody = table.querySelector('tbody');
+        if (!tbody) return;
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+        const currentDir = th.dataset.sortDir === 'asc' ? 'desc' : 'asc';
+
+        // Clear all indicators in this table
+        table.querySelectorAll<HTMLTableCellElement>('th.sortable-th').forEach((h) => {
+          h.dataset.sortDir = '';
+          const ind = h.querySelector('.sort-indicator');
+          if (ind) ind.textContent = '';
+        });
+
+        th.dataset.sortDir = currentDir;
+        const indicator = th.querySelector('.sort-indicator');
+        if (indicator) indicator.textContent = currentDir === 'asc' ? ' \u25B2' : ' \u25BC';
+
+        rows.sort((a, b) => {
+          const aText = (a.children[colIdx]?.textContent || '').trim();
+          const bText = (b.children[colIdx]?.textContent || '').trim();
+          const aNum = parseFloat(aText);
+          const bNum = parseFloat(bText);
+          // Numeric sort if both parse as numbers
+          if (!isNaN(aNum) && !isNaN(bNum)) {
+            return currentDir === 'asc' ? aNum - bNum : bNum - aNum;
+          }
+          const cmp = aText.localeCompare(bText, undefined, { sensitivity: 'base' });
+          return currentDir === 'asc' ? cmp : -cmp;
+        });
+
+        for (const row of rows) {
+          tbody.appendChild(row);
+        }
+      });
+    });
+  }, [contentRef]);
+
+  useEffect(() => {
+    attachSort();
+  });
+}
+
 export default function Message({ message, isLastAgentMessage, isFirstInTurn = true }: MessageProps): React.ReactElement {
+  const contentRef = useRef<HTMLDivElement>(null);
+  useSortableTables(contentRef);
   const roleClass = `message-${message.type}`;
   const testId = `message-${message.type}`;
   const continuationClass = !isFirstInTurn ? ' continuation' : '';
@@ -139,7 +195,7 @@ export default function Message({ message, isLastAgentMessage, isFirstInTurn = t
   const html = message.content ? parseMarkdown(message.content) : '';
 
   return (
-    <div data-testid={testId} className={`message ${roleClass}${continuationClass}`}>
+    <div data-testid={testId} className={`message ${roleClass}${continuationClass}`} ref={contentRef}>
       <div data-testid="avatar" className="message-avatar">
         {message.type === 'user' ? <UserAvatar /> : (
           <AssistantAvatar

package/src/public/components/MessageView.tsx

@@ -20,12 +20,15 @@ import { Button } from '@/components/ui/button';
 import MessageList, { MessageListHandle } from './MessageList';
 import Message from './Message';
 import ToolCallBlock from './ToolCallBlock';
+import { AskUserQuestionBlock } from './AskUserQuestionBlock';
 import ToolStack from './ToolStack';
 import SubagentSpan from './SubagentSpan';
 import QuickActions from './QuickActions';
+import { Separator } from '@/components/ui/separator';
 import { isSkillContent } from '../utils/messageFilters';
 import { groupToolsIntoStacks, ToolStackData } from '../utils/toolStackGrouper';
 import { usePersona } from '../hooks/usePersona';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { useStatsStrip } from '../hooks/useStatsStrip';
 import type { MessageData } from '../types/message';
 
@@ -61,7 +64,7 @@ interface ToolStackGroup {
 type RenderItem = MessageData | SubagentGroup | ToolStackGroup;
 
 interface Turn {
-  speaker: 'user' | 'agent';
+  speaker: 'user' | 'agent' | 'system';
   items: RenderItem[];
   timestamp: number;
 }
@@ -74,9 +77,10 @@ function formatTurnTime(timestamp: number): string {
  * Classify an item as 'user' or 'agent' for turn grouping.
  * Tools, subagents, and stacks are all part of the agent's turn.
  */
-function speakerOf(item: RenderItem): 'user' | 'agent' {
+function speakerOf(item: RenderItem): 'user' | 'agent' | 'system' {
   if ('isToolStack' in item || 'messages' in item) return 'agent';
   const msg = item as MessageData;
+  if (msg.type === 'context_cleared') return 'system';
   return (msg.type === 'user' || msg.type === 'bell_injected') ? 'user' : 'agent';
 }
 
@@ -84,6 +88,7 @@ export default function MessageView({ messages }: MessageViewProps): React.React
   const messageListRef = useRef<MessageListHandle>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const { persona } = usePersona();
+  const colorScheme = useColorScheme();
   const { projectInfo } = useStatsStrip();
 
   // Persist subagent collapsed state across re-renders/remounts
@@ -223,6 +228,21 @@ export default function MessageView({ messages }: MessageViewProps): React.React
     const msg = item as MessageData;
 
     if (msg.type === 'tool_use' && msg.tool_name && msg.tool_id) {
+      // MSSCI-14395: Render AskUserQuestion as interactive buttons
+      if (msg.tool_name === 'AskUserQuestion') {
+        return (
+          <AskUserQuestionBlock
+            key={`ask-${msg.tool_id}`}
+            toolUse={{
+              type: 'tool_use',
+              tool_name: msg.tool_name,
+              tool_id: msg.tool_id,
+              input: (msg.input || {}) as { questions: Array<{ question: string; header: string; options: Array<{ label: string; description: string }>; multiSelect: boolean }> },
+              timestamp: msg.timestamp,
+            }}
+          />
+        );
+      }
       const result = toolResults.get(msg.tool_id);
       return (
         <ToolCallBlock
@@ -262,7 +282,11 @@ export default function MessageView({ messages }: MessageViewProps): React.React
       <div data-testid="message-view" className="message-view">
         <div className="message-view-empty">
           <div>
-            <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🚴</div>
+            <img
+              src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.png'}
+              alt="Cyclist"
+              style={{ height: '2.5rem', marginBottom: '0.5rem', opacity: 0.6 }}
+            />
             <div>Type <code style={{
               background: 'var(--bg-tertiary, #0f0f1a)',
               padding: '2px 6px',
@@ -286,6 +310,26 @@ export default function MessageView({ messages }: MessageViewProps): React.React
         autoScroll={isAtBottom}
       >
         {turns.map((turn, turnIndex) => {
+          // System turns (context_cleared) render as a divider bar
+          if (turn.speaker === 'system') {
+            // Still increment globalIdx for system items
+            turn.items.forEach(() => globalIdx++);
+            return (
+              <div key={`turn-${turnIndex}`} className="turn-group turn-system">
+                <div className="context-cleared-bar">
+                  <Separator className="context-cleared-line" />
+                  <span className="context-cleared-label">
+                    Context cleared
+                  </span>
+                  <span className="context-cleared-time">
+                    {formatTurnTime(turn.timestamp)}
+                  </span>
+                  <Separator className="context-cleared-line" />
+                </div>
+              </div>
+            );
+          }
+
           // Track which items in this turn are "first message" (non-tool, non-stack)
           let seenMessage = false;
 

package/src/public/components/PersonaHeader.tsx

@@ -19,6 +19,7 @@ import React, { useState, useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { usePersona } from '../hooks/usePersona';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { AgentPopup } from './AgentPopup';
 
 // Agent colors matching CLI statusbar (statusline.sh)
@@ -59,6 +60,7 @@ function humanizeTheme(theme: string): string {
 
 export default function PersonaHeader(): React.ReactElement {
   const { persona } = usePersona();
+  const colorScheme = useColorScheme();
   const [portraitError, setPortraitError] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isCompact, setIsCompact] = useState(false);
@@ -165,7 +167,7 @@ export default function PersonaHeader(): React.ReactElement {
             )}
           </div>
           <img
-            src="/images/cyclist-dark.png"
+            src={colorScheme === 'dark' ? '/images/cyclist-dark.png' : '/images/cyclist-light.png'}
             alt="Cyclist"
             className="persona-branding"
           />

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

@@ -71,7 +71,7 @@ export function BackgroundPanel(): React.ReactElement {
   if (tasks.length === 0) {
     return (
       <div className="background-panel empty" data-testid="background-panel">
-        <div className="placeholder">No background tasks</div>
+        <div className="placeholder">No subagent tasks</div>
       </div>
     );
   }