@pennyfarthing/cyclist 10.4.0 → 11.0.0-alpha.0

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();

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

@@ -8,12 +8,11 @@
  * - Statistics display
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ScrollArea } from '@/components/ui/scroll-area';
 
 // =============================================================================
 // Types
@@ -125,6 +124,30 @@ export function AuditLogPanel(): React.ReactElement {
   const [error, setError] = useState<string | null>(null);
   const [expandedEntry, setExpandedEntry] = useState<number | null>(null);
 
+  // Auto-scroll refs (using ref instead of state for synchronous updates)
+  const autoScrollRef = useRef(true);
+  const topRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Detect manual scroll to pause/resume auto-scroll
+  // Re-runs when loading changes so the listener attaches after the scroll container renders
+  useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    const handler = () => {
+      autoScrollRef.current = el.scrollTop === 0;
+    };
+    el.addEventListener('scroll', handler);
+    return () => el.removeEventListener('scroll', handler);
+  }, [loading]);
+
+  // Auto-scroll to newest entry when entries change
+  useEffect(() => {
+    if (autoScrollRef.current && topRef.current && entries.length > 0) {
+      topRef.current.scrollIntoView();
+    }
+  }, [entries]);
+
   // Fetch entries
   const fetchEntries = useCallback(async () => {
     try {
@@ -326,7 +349,8 @@ export function AuditLogPanel(): React.ReactElement {
       </div>
 
       {/* Entries List */}
-      <ScrollArea className="audit-log-entries flex-1">
+      <div ref={scrollContainerRef} className="audit-log-entries flex-1" style={{ overflow: 'auto' }}>
+        <div ref={topRef} />
         {entries.length === 0 ? (
           <div className="p-4 text-muted text-center">No entries</div>
         ) : (
@@ -456,7 +480,7 @@ export function AuditLogPanel(): React.ReactElement {
             </tbody>
           </table>
         )}
-      </ScrollArea>
+      </div>
     </TooltipProvider>
     </div>
   );

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

@@ -6,13 +6,12 @@
  */
 
 import React, { useState } from 'react';
-import { RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useGitStatus, RepoStatusData, DirtyFile } from '../../hooks/useGitStatus';
-import { useClaudeContext } from '../../contexts/ClaudeContext';
+
 
 /** Get CSS class for file status */
 function getFileStatusClass(status: string): string {
@@ -152,11 +151,6 @@ function RepoStatus({ repo }: RepoStatusProps): React.ReactElement {
 
 export function GitPanel(): React.ReactElement {
   const { repos, isLoading, error } = useGitStatus();
-  const { send } = useClaudeContext();
-
-  const handleSyncAll = () => {
-    send('Sync all repos');
-  };
 
   if (isLoading) {
     return (
@@ -193,19 +187,6 @@ export function GitPanel(): React.ReactElement {
 
   return (
     <div className="git-panel stacked" data-testid="git-panel">
-      <div className="git-panel-actions">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button className="sync-all-btn" onClick={handleSyncAll} aria-label="Sync all repos">
-                <RefreshCw size={14} />
-                <span>Sync all repos</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Pull latest changes for all repos</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
       {repos.map(repo => (
         <RepoStatus key={repo.name} repo={repo} />
       ))}

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

@@ -65,7 +65,6 @@ const PANEL_DISPLAY_NAMES: Record<string, string> = {
   diffs: 'Diffs',
   debug: 'Debug',
   'audit-log': 'Audit Log',
-  tty: 'Terminal',
   message: 'Message',
   sprint: 'Sprint',
   workflow: 'Workflow',

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

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Check, Loader, Circle, AlertTriangle } from 'lucide-react';
+import { Check, Copy, Loader, Circle, AlertTriangle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -240,6 +240,35 @@ function JiraLink({ jiraKey, storyId }: { jiraKey: string; storyId: string }): R
   );
 }
 
+/**
+ * CopyButton - Copy ID + title to clipboard on click
+ */
+function CopyButton({ text }: { text: string }): React.ReactElement {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard API not available
+    }
+  };
+
+  return (
+    <button
+      className={`copy-id-button ${copied ? 'copied' : ''}`}
+      onClick={handleCopy}
+      aria-label={`Copy ${text}`}
+      title="Copy ID + title"
+    >
+      {copied ? <Check size={12} /> : <Copy size={12} />}
+    </button>
+  );
+}
+
 /**
  * EpicGroup - Renders a single epic with its stories
  */
@@ -281,6 +310,7 @@ function EpicGroup({
         </Button>
         <span className="epic-title">{epic.title}</span>
         {epic.jiraKey && <span className="epic-jira">{epic.jiraKey}</span>}
+        <CopyButton text={`${epic.id} ${epic.title}`} />
         <ContextIndicator hasContext={epic.hasContext ?? false} testIdPrefix="epic" id={epic.id} />
         {completed && epic.hasContext && (
           <Badge variant="default" className="epic-ready-badge" data-testid={`epic-ready-badge-${epic.id}`}>
@@ -347,6 +377,7 @@ function EpicGroup({
                 <PriorityDot priority={story.priority} storyId={story.id} />
                 <StatusBadge status={story.status} storyId={story.id} />
                 {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
+                <CopyButton text={`${story.id} ${story.title}`} />
                 <div className="story-info">
                   <span className="story-title">{story.title}</span>
                   <span className="story-meta">

package/src/public/components/panels/index.ts

@@ -17,8 +17,6 @@ export { DiffsPanel } from './DiffsPanel';
 export { DebugPanel } from './DebugPanel';
 export { SettingsPanel } from './SettingsPanel';
 export { AuditLogPanel } from './AuditLogPanel';
-export { TTYPanel } from './TTYPanel';
-
 // Legacy exports - kept for backwards compatibility and tests
 export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';
 export { BikeLanePanel, ConnectedBikeLanePanel } from './BikeLanePanel';