@pennyfarthing/cyclist 10.3.1 → 11.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pennyfarthing/cyclist",
-  "version": "10.3.1",
+  "version": "11.0.0-alpha.0",
   "description": "Visual terminal interface for Claude Code",
   "author": "1898andCo",
   "type": "module",
@@ -19,7 +19,37 @@
     "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": "^10.4.0",
+    "@pennyfarthing/shared": "^10.4.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -42,16 +72,11 @@
     "electron-window-state": "^5.0.3",
     "express": "^4.18.2",
     "lucide-react": "^0.563.0",
-    "node-pty": "^1.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.4.0",
     "ws": "^8.19.0",
-    "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.8.2",
-    "@pennyfarthing/core": "^10.3.1",
-    "@pennyfarthing/shared": "^10.3.1"
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
@@ -159,32 +184,5 @@
       ],
       "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

@@ -29,6 +29,13 @@ import ApprovalModal, { useApprovalModal } from './components/ApprovalModal';
 import { subscribeToPermissionRequests, sendPermissionResponse, createApprovalResponse } from './components/ApprovalModal';
 import type { ApprovalRequest, GrantScope } from './components/ApprovalModal';
 
+// Environment discriminator injected by server.ts (ADR-0024)
+declare global {
+  interface Window {
+    __CYCLIST_MODE__?: 'cyclist' | 'bikerack';
+  }
+}
+
 // Import all panel components
 // Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
 import {
@@ -44,7 +51,6 @@ import {
   DebugPanel,
   SettingsPanel,
   AuditLogPanel,
-  TTYPanel,
 } from './components/panels';
 
 // =============================================================================
@@ -60,7 +66,6 @@ registerPanelComponent(PANEL_INVENTORY.CHANGED, ChangedPanel);
 registerPanelComponent(PANEL_INVENTORY.DIFFS, DiffsPanel);
 registerPanelComponent(PANEL_INVENTORY.DEBUG, DebugPanel);
 registerPanelComponent(PANEL_INVENTORY.AUDIT_LOG, AuditLogPanel);
-registerPanelComponent(PANEL_INVENTORY.TTY, TTYPanel);
 
 // Right sidebar panels
 // Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
@@ -202,12 +207,13 @@ 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 isBikeRackIndex = window.__CYCLIST_MODE__ === 'bikerack';
   const standalonePanelName = getStandalonePanelName();
 
   // --- All hooks called unconditionally (React rules of hooks) ---
 
-  const { layout, isLoading, saveLayout } = useLayoutPersistence();
+  const layoutEndpoint = isBikeRackIndex ? '/api/settings/bikerack-layout' : '/api/settings/layout';
+  const { layout, isLoading, saveLayout } = useLayoutPersistence(layoutEndpoint);
 
   // Set up reduced motion support
   useReducedMotion();
@@ -268,6 +274,13 @@ export default function App(): React.ReactElement {
   // BikeRack Dockview workspace (MSSCI-14877) — /bikerack renders Dockview layout
   // No-op ClaudeContext: BikeRack has no Claude CLI subprocess, skip WebSocket
   if (isBikeRackIndex) {
+    if (isLoading) {
+      return (
+        <div className="cyclist-loading" style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="loading-spinner" aria-label="Loading layout..." />
+        </div>
+      );
+    }
     const noop = () => () => {};
     return (
       <ClaudeContext.Provider value={{
@@ -277,7 +290,10 @@ export default function App(): React.ReactElement {
         onMessage: noop, onComplete: noop, onError: noop,
         onUserMessage: noop, onClear: noop,
       }}>
-        <BikeRackWorkspace />
+        <BikeRackWorkspace
+          initialLayout={layout ?? undefined}
+          onLayoutChange={saveLayout}
+        />
       </ClaudeContext.Provider>
     );
   }

package/src/public/components/BikeRackIndex.tsx

@@ -25,7 +25,6 @@ const PANELS = [
   { 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' },

package/src/public/components/BikeRackWorkspace.tsx

@@ -9,17 +9,20 @@
  * Single Dockview group — users can freely rearrange panels.
  */
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useEffect, useState } from 'react';
 import {
   DockviewReact,
   DockviewReadyEvent,
   DockviewApi,
   IDockviewPanelProps,
+  SerializedDockview,
+  DockviewDefaultTab,
 } 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 { useFocusPanel } from '../hooks/useFocusPanel.js';
 import '../styles/dockview-theme.css';
 
 // =============================================================================
@@ -94,12 +97,41 @@ function PanelAdapter({ params }: IDockviewPanelProps<PanelAdapterParams>): Reac
 // BikeRackWorkspace Component
 // =============================================================================
 
-export function BikeRackWorkspace(): React.ReactElement {
+export interface BikeRackWorkspaceProps {
+  initialLayout?: SerializedDockview;
+  onLayoutChange?: (layout: SerializedDockview) => void;
+}
+
+export function BikeRackWorkspace({
+  initialLayout,
+  onLayoutChange,
+}: BikeRackWorkspaceProps): React.ReactElement {
   const apiRef = useRef<DockviewApi | null>(null);
+  const [dockviewApi, setDockviewApi] = useState<DockviewApi | null>(null);
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Panel focus mode — stash/restore layout on /bc CLI events
+  useFocusPanel(dockviewApi);
 
   const onReady = useCallback((event: DockviewReadyEvent) => {
     const api = event.api;
     apiRef.current = api;
+    setDockviewApi(api);
+
+    // Restore saved layout if available (must have actual panels, not just empty {})
+    if (initialLayout && initialLayout.grid && initialLayout.panels
+        && Object.keys(initialLayout.panels).length > 0) {
+      try {
+        api.fromJSON(initialLayout);
+        // Verify panels were actually created
+        if (api.panels.length > 0) {
+          return;
+        }
+        console.warn('[BikeRackWorkspace] Restored layout produced no panels, building default');
+      } catch (err) {
+        console.warn('[BikeRackWorkspace] Failed to restore layout, building default:', err);
+      }
+    }
 
     // Single group — all panels as tabs, user can rearrange freely
     const first = api.addPanel({
@@ -118,23 +150,66 @@ export function BikeRackWorkspace(): React.ReactElement {
         title: PANEL_TITLES[BIKERACK_PANELS[i]],
       });
     }
+  }, [initialLayout]);
+
+  // Subscribe to layout changes for persistence
+  const handleLayoutChange = useCallback(() => {
+    const api = apiRef.current;
+    if (!api || !onLayoutChange) return;
+
+    // Never save empty layouts — prevents corruption loop
+    if (api.panels.length === 0) return;
+
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+
+    saveTimeoutRef.current = setTimeout(() => {
+      const serialized = api.toJSON();
+      // Double-check: don't persist if serialization produced empty panels
+      if (serialized.panels && Object.keys(serialized.panels).length > 0) {
+        onLayoutChange(serialized);
+      }
+    }, 300);
+  }, [onLayoutChange]);
+
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!api) return;
+
+    const disposables = [
+      api.onDidLayoutChange(() => handleLayoutChange()),
+      api.onDidAddPanel(() => handleLayoutChange()),
+      api.onDidRemovePanel(() => handleLayoutChange()),
+    ];
+
+    return () => disposables.forEach(d => d.dispose());
+  }, [handleLayoutChange]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
   }, []);
 
-  const components = { PanelAdapter };
+  // Memoize to prevent DockviewReact from reinitializing on re-render
+  const components = React.useMemo(() => ({ 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>
+      <DockviewReact
+        className="dockview-container"
+        onReady={onReady}
+        components={components}
+        defaultTabComponent={(props) => <DockviewDefaultTab {...props} hideClose />}
+        watermarkComponent={() => null}
+      />
     </div>
   );
 }

package/src/public/components/DockviewWorkspace.tsx

@@ -13,7 +13,7 @@
  * - Theme integration via CSS custom properties
  */
 
-import React, { useEffect, useRef, useCallback, useState, ComponentType } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
@@ -23,11 +23,13 @@ import {
   DockviewApi,
   IDockviewPanel,
   SerializedDockview,
+  DockviewDefaultTab,
 } from 'dockview-react';
 import 'dockview-react/dist/styles/dockview.css';
 import { ErrorBoundary } from './ErrorBoundary';
-import { panelRegistry } from './panel-registry';
+import { panelRegistry, type PanelComponent } from './panel-registry';
 import { useResponsiveLayout, MIN_DIMENSIONS, SIDEBAR_WIDTHS } from '../hooks/useResponsiveLayout';
+import { useFocusPanel } from '../hooks/useFocusPanel.js';
 import '../styles/dockview-theme.css';
 
 // =============================================================================
@@ -40,7 +42,6 @@ export const PANEL_INVENTORY = {
   DIFFS: 'diffs',
   DEBUG: 'debug',
   AUDIT_LOG: 'audit-log',
-  TTY: 'tty',
   // Center panel (sacred)
   MESSAGE: 'message',
   // Right sidebar panels
@@ -62,7 +63,7 @@ export type PanelId = typeof PANEL_INVENTORY[keyof typeof PANEL_INVENTORY];
 /**
  * Register a panel component by ID
  */
-export function registerPanelComponent(id: string, component: ComponentType): void {
+export function registerPanelComponent(id: string, component: PanelComponent): void {
   panelRegistry.set(id, component);
 }
 
@@ -81,7 +82,7 @@ export function getDockviewApi(): DockviewApi | null {
 
 // Panel group definitions (needed for restore logic)
 // Exported so layout persistence can merge missing panels
-export const LEFT_SIDEBAR_PANELS = [PANEL_INVENTORY.CHANGED, PANEL_INVENTORY.DIFFS, PANEL_INVENTORY.DEBUG, PANEL_INVENTORY.AUDIT_LOG, PANEL_INVENTORY.TTY] as const;
+export const LEFT_SIDEBAR_PANELS = [PANEL_INVENTORY.CHANGED, PANEL_INVENTORY.DIFFS, PANEL_INVENTORY.DEBUG, PANEL_INVENTORY.AUDIT_LOG] as const;
 export const RIGHT_SIDEBAR_PANELS = [
   PANEL_INVENTORY.SPRINT,
   PANEL_INVENTORY.WORKFLOW,
@@ -98,7 +99,6 @@ const PANEL_TITLES: Record<string, string> = {
   diffs: 'Diffs',
   debug: 'Debug',
   'audit-log': 'Audit Log',
-  tty: 'Terminal',
   message: 'Message',
   sprint: 'Sprint',
   workflow: 'Workflow',
@@ -404,11 +404,15 @@ export function DockviewWorkspace({
   onLayoutChange,
 }: DockviewWorkspaceProps): React.ReactElement {
   const apiRef = useRef<DockviewApi | null>(null);
+  const [dockviewApi, setDockviewApi] = useState<DockviewApi | null>(null);
   const { isSmall, isBelowMinimum, sidebarWidth } = useResponsiveLayout();
   const [isReady, setIsReady] = useState(false);
   const [closedPanelsList, setClosedPanelsList] = useState<string[]>([]);
   const [showRestoreMenu, setShowRestoreMenu] = useState(false);
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Panel focus mode — stash/restore layout on /bc CLI events
+  useFocusPanel(dockviewApi);
+
   // Track if responsive effect should apply - skip on initial load to respect saved collapsed state
   const hasAppliedInitialLayout = useRef(false);
   const previousIsSmall = useRef<boolean | null>(null);
@@ -423,6 +427,7 @@ export function DockviewWorkspace({
     const api = event.api;
     apiRef.current = api;
     dockviewApiRef = api;
+    setDockviewApi(api);
 
     // Use native fromJSON if we have a saved layout, otherwise build default
     if (initialLayout && initialLayout.grid && initialLayout.panels) {
@@ -526,6 +531,9 @@ export function DockviewWorkspace({
     const api = apiRef.current;
     if (!api || !onLayoutChange) return;
 
+    // Never save empty layouts — prevents corruption loop
+    if (api.panels.length === 0) return;
+
     // Debounce saves
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -534,7 +542,10 @@ export function DockviewWorkspace({
     saveTimeoutRef.current = setTimeout(() => {
       // Use native Dockview toJSON for complete layout serialization
       const serializedLayout = api.toJSON();
-      onLayoutChange(serializedLayout);
+      // Double-check: don't persist if serialization produced empty panels
+      if (serializedLayout.panels && Object.keys(serializedLayout.panels).length > 0) {
+        onLayoutChange(serializedLayout);
+      }
     }, 300);
   }, [onLayoutChange]);
 
@@ -659,7 +670,6 @@ export function DockviewWorkspace({
     diffs: 'Diffs',
     debug: 'Debug',
     'audit-log': 'Audit Log',
-    tty: 'Terminal',
     sprint: 'Sprint',
     workflow: 'Workflow',
     ac: 'AC',
@@ -728,6 +738,7 @@ export function DockviewWorkspace({
         className="dockview-container"
         onReady={onReady}
         components={components}
+        defaultTabComponent={(props) => <DockviewDefaultTab {...props} hideClose />}
         watermarkComponent={() => null}
       />
     </div>

package/src/public/components/StandalonePanel.tsx

@@ -24,7 +24,6 @@ import {
   AuditLogPanel,
   ChangedPanel,
   ACPanel,
-  TTYPanel,
   DebugPanel,
   BikeLanePanel,
   SettingsPanel,
@@ -44,7 +43,6 @@ export const PANEL_REGISTRY: Record<string, React.ComponentType> = {
   audit: AuditLogPanel,
   changed: ChangedPanel,
   ac: ACPanel,
-  tty: TTYPanel,
   debug: DebugPanel,
   bikelane: BikeLanePanel,
   settings: SettingsPanel,
@@ -70,7 +68,7 @@ export function StandalonePanel(): React.ReactElement {
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw', backgroundColor: 'var(--bg-primary, #1a1a2e)', color: 'var(--text-primary, #e4e4e7)' }}>
         <h1>Panel not found</h1>
         <p>
-          <a href="/bikerack" style={{ color: 'var(--accent, #818cf8)' }}>Back to BikeRack</a>
+          <a href="/" style={{ color: 'var(--accent, #818cf8)' }}>Back to BikeRack</a>
         </p>
       </div>
     );

package/src/public/components/panel-registry.ts

@@ -8,4 +8,6 @@
 
 import type { ComponentType } from 'react';
 
-export const panelRegistry: Map<string, ComponentType> = new Map();
+export type PanelComponent = ComponentType;
+
+export const panelRegistry: Map<string, PanelComponent> = new Map();