@pennyfarthing/cyclist 10.0.0 → 10.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pennyfarthing/cyclist",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "Visual terminal interface for Claude Code",
   "author": "1898andCo",
   "type": "module",
@@ -19,36 +19,7 @@
     "src/public/",
     "portraits/"
   ],
-  "scripts": {
-    "dev": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron dist/main.js\"",
-    "dev:cdp": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --remote-debugging-port=9222 dist/main.js\"",
-    "dev:once": "npm run build && electron dist/main.js",
-    "dev:web": "CYCLIST_ELECTRON_MODE= CYCLIST_DEV_WEB=1 CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} tsx watch src/server.ts",
-    "dev:server": "tsx watch src/server.ts",
-    "dev:debug": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect src/server.ts",
-    "dev:debug-brk": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect-brk src/server.ts",
-    "dev:electron-debug": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --inspect=9229 dist/main.js\"",
-    "dev:vite": "vite --config vite.config.ts",
-    "build": "npm run build:commands && tsc --build && tsc -p tsconfig.preload.json && npm run build:react",
-    "build:react": "vite build",
-    "build:commands": "node scripts/generate-slash-commands.js",
-    "build:electron": "npm run build && electron-builder -c.npmRebuild=false",
-    "start": "node dist/server.js",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:e2e": "playwright test",
-    "test:e2e:web": "playwright test --project=web-chromium",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:trace": "playwright show-trace",
-    "prepack": "./scripts/copy-portraits.sh",
-    "install:app": "./scripts/install-app.sh",
-    "install:cli": "./scripts/install-cli.sh",
-    "install:all": "npm run install:app && npm run install:cli"
-  },
   "dependencies": {
-    "@pennyfarthing/core": "workspace:*",
-    "@pennyfarthing/shared": "workspace:*",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -78,7 +49,9 @@
     "ws": "^8.19.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.8.2"
+    "yaml": "^2.8.2",
+    "@pennyfarthing/core": "^10.0.1",
+    "@pennyfarthing/shared": "^10.0.1"
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
@@ -115,7 +88,7 @@
   "build": {
     "appId": "com.cyclist.app",
     "productName": "Cyclist",
-    "copyright": "Copyright \u00a9 2026",
+    "copyright": "Copyright © 2026",
     "asar": true,
     "directories": {
       "output": "release",
@@ -186,5 +159,31 @@
       ],
       "category": "Development"
     }
+  },
+  "scripts": {
+    "dev": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron dist/main.js\"",
+    "dev:cdp": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --remote-debugging-port=9222 dist/main.js\"",
+    "dev:once": "npm run build && electron dist/main.js",
+    "dev:web": "CYCLIST_ELECTRON_MODE= CYCLIST_DEV_WEB=1 CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} tsx watch src/server.ts",
+    "dev:server": "tsx watch src/server.ts",
+    "dev:debug": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect src/server.ts",
+    "dev:debug-brk": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect-brk src/server.ts",
+    "dev:electron-debug": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --inspect=9229 dist/main.js\"",
+    "dev:vite": "vite --config vite.config.ts",
+    "build": "npm run build:commands && tsc --build && tsc -p tsconfig.preload.json && npm run build:react",
+    "build:react": "vite build",
+    "build:commands": "node scripts/generate-slash-commands.js",
+    "build:electron": "npm run build && electron-builder -c.npmRebuild=false",
+    "start": "node dist/server.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:web": "playwright test --project=web-chromium",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:trace": "playwright show-trace",
+    "install:app": "./scripts/install-app.sh",
+    "install:cli": "./scripts/install-cli.sh",
+    "install:all": "npm run install:app && npm run install:cli"
   }
-}
+}

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/MessageView.tsx

@@ -20,6 +20,7 @@ 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';
@@ -227,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

package/src/public/utils/askUserQuestion.ts

@@ -0,0 +1,21 @@
+/**
+ * AskUserQuestion Utility
+ *
+ * Utility functions for detecting AskUserQuestion tool_use messages.
+ *
+ * Story: MSSCI-14395 - Render AskUserQuestion tool via Reflector QuickActions
+ */
+
+interface ToolUseMessage {
+  type: string;
+  tool_name?: string;
+  tool_id?: string;
+  input?: Record<string, unknown>;
+}
+
+/**
+ * Check if a tool_use message is an AskUserQuestion tool call.
+ */
+export function isAskUserQuestion(toolUse: ToolUseMessage): boolean {
+  return toolUse.tool_name === 'AskUserQuestion';
+}