@pennyfarthing/cyclist 10.2.0 → 10.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pennyfarthing/cyclist",
-  "version": "10.2.0",
+  "version": "10.3.1",
   "description": "Visual terminal interface for Claude Code",
   "author": "1898andCo",
   "type": "module",
@@ -19,37 +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",
-    "lint": "eslint src/",
-    "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",
@@ -79,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.3.1",
+    "@pennyfarthing/shared": "^10.3.1"
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
@@ -187,5 +159,32 @@
       ],
       "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",
+    "lint": "eslint src/",
+    "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/App.tsx

@@ -17,11 +17,14 @@ import {
 } from './components/DockviewWorkspace';
 import { CommandPaletteProvider } from './components/CommandPalette';
 import { ClaudeProvider } from './contexts/ClaudeContext';
+import ClaudeContext from './contexts/ClaudeContext';
 import { MessageQueueProvider } from './contexts/MessageQueueContext';
 import { useLayoutPersistence } from './hooks/useLayoutPersistence';
 import { loadFontSettings, applyFontSettings } from './utils/font-presets';
 import { loadPresetFromProject, applyPreset } from './utils/color-presets';
 import { ErrorBoundary } from './components/ErrorBoundary';
+import { StandalonePanel, getStandalonePanelName } from './components/StandalonePanel';
+import { BikeRackWorkspace } from './components/BikeRackWorkspace';
 import ApprovalModal, { useApprovalModal } from './components/ApprovalModal';
 import { subscribeToPermissionRequests, sendPermissionResponse, createApprovalResponse } from './components/ApprovalModal';
 import type { ApprovalRequest, GrantScope } from './components/ApprovalModal';
@@ -198,6 +201,12 @@ function RootErrorFallback(): React.ReactElement {
 // =============================================================================
 
 export default function App(): React.ReactElement {
+  // Detect route mode (computed before hooks, used after)
+  const isBikeRackIndex = window.location.pathname === '/bikerack';
+  const standalonePanelName = getStandalonePanelName();
+
+  // --- All hooks called unconditionally (React rules of hooks) ---
+
   const { layout, isLoading, saveLayout } = useLayoutPersistence();
 
   // Set up reduced motion support
@@ -254,6 +263,31 @@ export default function App(): React.ReactElement {
     hide();
   }, [request, hide]);
 
+  // --- BikeRack routes (after all hooks) ---
+
+  // BikeRack Dockview workspace (MSSCI-14877) — /bikerack renders Dockview layout
+  // No-op ClaudeContext: BikeRack has no Claude CLI subprocess, skip WebSocket
+  if (isBikeRackIndex) {
+    const noop = () => () => {};
+    return (
+      <ClaudeContext.Provider value={{
+        send: () => {}, abort: () => {}, clear: () => {},
+        clearAndReload: () => {}, setMode: () => {},
+        isConnected: false, mode: 'default',
+        onMessage: noop, onComplete: noop, onError: noop,
+        onUserMessage: noop, onClear: noop,
+      }}>
+        <BikeRackWorkspace />
+      </ClaudeContext.Provider>
+    );
+  }
+
+  // BikeRack standalone panel routing (MSSCI-14821)
+  // URL-based detection only (Rule 10) — ?panel=X renders single panel full-screen
+  if (standalonePanelName) {
+    return <StandalonePanel />;
+  }
+
   return (
     <ErrorBoundary fallback={<RootErrorFallback />} panelName="App">
       <ClaudeProvider>

package/src/public/components/AgentPopup.tsx

@@ -61,6 +61,7 @@ const AGENT_COLORS: Record<string, string> = {
   'ux-designer': '#f0abfc',
   'tech-writer': '#e5e5e5',
   orchestrator: '#e879f9',
+  ba: '#a3e635',
 };
 
 // =============================================================================

package/src/public/components/BikeRackIndex.tsx

@@ -0,0 +1,54 @@
+/**
+ * BikeRackIndex - Index page listing all available panels
+ *
+ * Story MSSCI-14822: BikeRackIndex panel listing page
+ * Epic: 101 (BikeRack Mode)
+ *
+ * Lists all 13 panels with links to standalone mode via ?panel=X.
+ * Styled with Tailwind dark mode, consistent with Cyclist.
+ *
+ * Rules:
+ * - No dockview-react imports (Rule 7)
+ * - No BikeRack-specific props (Rule 2)
+ * - URL-based detection only (Rule 10)
+ */
+
+import React from 'react';
+
+const PANELS = [
+  { id: 'sprint', label: 'Sprint', description: 'Story tracking and sprint progress' },
+  { id: 'git', label: 'Git', description: 'Repository status and branches' },
+  { id: 'diffs', label: 'Diffs', description: 'Code changes and diffs' },
+  { id: 'todos', label: 'Todos', description: 'Acceptance criteria tracking' },
+  { id: 'workflow', label: 'Workflow', description: 'Current workflow state' },
+  { id: 'background', label: 'Background', description: 'Background tasks' },
+  { id: 'audit', label: 'Audit', description: 'OTEL spans and logs' },
+  { id: 'changed', label: 'Changed', description: 'Changed files' },
+  { id: 'ac', label: 'AC', description: 'Acceptance criteria detail' },
+  { id: 'tty', label: 'TTY', description: 'Terminal output' },
+  { id: 'debug', label: 'Debug', description: 'Debug information' },
+  { id: 'bikelane', label: 'BikeLane', description: 'Workflow visualization' },
+  { id: 'settings', label: 'Settings', description: 'Theme, fonts, and display preferences' },
+] as const;
+
+export function BikeRackIndex(): React.ReactElement {
+  return (
+    <div className="bg-slate-900 min-h-screen text-gray-200 p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-white mb-8">BikeRack</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {PANELS.map((panel) => (
+            <a
+              key={panel.id}
+              href={`/?panel=${panel.id}`}
+              className="block border border-slate-700 rounded-lg p-4 hover:bg-slate-800 hover:text-cyan-400 transition-colors"
+            >
+              <div className="text-lg font-semibold text-white mb-1">{panel.label}</div>
+              <p className="text-sm text-gray-400">{panel.description}</p>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/public/components/BikeRackWorkspace.tsx

@@ -0,0 +1,142 @@
+/**
+ * BikeRackWorkspace - Dockview-based panel layout for BikeRack mode
+ *
+ * Story MSSCI-14877: Migrate BikeRack from index page to Dockview layout
+ * Epic: 102 (BikeRack Follow-up)
+ *
+ * Replaces BikeRackIndex with a proper Dockview layout.
+ * No MessagePanel (sacred center) — BikeRack is a monitoring dashboard.
+ * Single Dockview group — users can freely rearrange panels.
+ */
+
+import React, { useCallback, useRef } from 'react';
+import {
+  DockviewReact,
+  DockviewReadyEvent,
+  DockviewApi,
+  IDockviewPanelProps,
+} from 'dockview-react';
+import 'dockview-react/dist/styles/dockview.css';
+import { ErrorBoundary } from './ErrorBoundary';
+import { panelRegistry } from './panel-registry';
+import PersonaHeader from './PersonaHeader.js';
+import '../styles/dockview-theme.css';
+
+// =============================================================================
+// BikeRack Panel Definitions
+// =============================================================================
+
+/**
+ * Panels included in BikeRack Dockview mode.
+ * Unlike base Cyclist, BikeRack does NOT include MessagePanel.
+ */
+export const BIKERACK_PANELS: string[] = [
+  'sprint',
+  'git',
+  'diffs',
+  'todo',
+  'workflow',
+  'background',
+  'audit-log',
+  'changed',
+  'ac',
+  'debug',
+  'settings',
+];
+
+const PANEL_TITLES: Record<string, string> = {
+  sprint: 'Sprint',
+  git: 'Git',
+  diffs: 'Diffs',
+  todo: 'Todo',
+  workflow: 'Workflow',
+  background: 'Subagents',
+  'audit-log': 'Audit Log',
+  changed: 'Changed',
+  ac: 'AC',
+  debug: 'Debug',
+  settings: 'Settings',
+};
+
+// =============================================================================
+// Panel Adapter
+// =============================================================================
+
+interface PanelAdapterParams {
+  panelId: string;
+}
+
+function PanelAdapter({ params }: IDockviewPanelProps<PanelAdapterParams>): React.ReactElement | null {
+  const Component = panelRegistry.get(params.panelId);
+
+  if (!Component) {
+    return (
+      <div data-testid={`panel-${params.panelId}`} className="dockview-panel-content">
+        <div style={{ padding: '16px', color: 'var(--text-secondary, #94a3b8)' }}>
+          {PANEL_TITLES[params.panelId] || params.panelId}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid={`panel-${params.panelId}`} className="dockview-panel-content">
+      <ErrorBoundary panelName={params.panelId}>
+        <div className="error-boundary-wrapper">
+          <Component />
+        </div>
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+// =============================================================================
+// BikeRackWorkspace Component
+// =============================================================================
+
+export function BikeRackWorkspace(): React.ReactElement {
+  const apiRef = useRef<DockviewApi | null>(null);
+
+  const onReady = useCallback((event: DockviewReadyEvent) => {
+    const api = event.api;
+    apiRef.current = api;
+
+    // Single group — all panels as tabs, user can rearrange freely
+    const first = api.addPanel({
+      id: BIKERACK_PANELS[0],
+      component: 'PanelAdapter',
+      params: { panelId: BIKERACK_PANELS[0] },
+      title: PANEL_TITLES[BIKERACK_PANELS[0]],
+    });
+
+    for (let i = 1; i < BIKERACK_PANELS.length; i++) {
+      api.addPanel({
+        id: BIKERACK_PANELS[i],
+        component: 'PanelAdapter',
+        params: { panelId: BIKERACK_PANELS[i] },
+        position: { referencePanel: first.id },
+        title: PANEL_TITLES[BIKERACK_PANELS[i]],
+      });
+    }
+  }, []);
+
+  const components = { PanelAdapter };
+
+  return (
+    <div className="cyclist-app cyclist-dockview" style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'column' }}>
+      <div data-testid="bikerack-portrait-anchor" style={{ flexShrink: 0 }}>
+        <PersonaHeader />
+      </div>
+      <div className="flex-1" style={{ flexGrow: 1, minHeight: 0 }}>
+        <DockviewReact
+          className="dockview-container"
+          onReady={onReady}
+          components={components}
+          watermarkComponent={() => null}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default BikeRackWorkspace;