@pennyfarthing/cyclist 10.3.1 → 11.0.0-alpha.0

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';

package/src/public/hooks/useFocusPanel.ts

@@ -0,0 +1,137 @@
+/**
+ * useFocusPanel Hook
+ *
+ * React hook for handling panel focus events via /ws/focus WebSocket.
+ * Story MSSCI-14977 - BikeShow client layout stash/restore on panel focus
+ * Epic 104: /bc CLI Panel Focus
+ *
+ * Listens to /ws/focus WebSocket for focus events.
+ *
+ * Multi-group layouts (Cyclist): maximizeGroup/exitMaximizedGroup
+ * Single-group layouts (BikeRack): activate target tab, stash previous
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import type { DockviewApi } from 'dockview-react';
+
+export interface UseFocusPanelResult {
+  /** Currently focused panel ID, or null if not in focus mode */
+  focusedPanel: string | null;
+  /** Whether the workspace is currently in single-panel focus mode */
+  isInFocusMode: boolean;
+}
+
+/** WebSocket message format from /ws/focus */
+interface FocusMessage {
+  type: 'init' | 'update';
+  focus: string | null;
+}
+
+/**
+ * Hook for managing panel focus mode.
+ *
+ * @param api - Dockview API instance for layout manipulation, or null if not ready
+ * @returns Focus state including current focused panel and mode
+ */
+export function useFocusPanel(api: DockviewApi | null): UseFocusPanelResult {
+  const [focusedPanel, setFocusedPanel] = useState<string | null>(null);
+  const [isInFocusMode, setIsInFocusMode] = useState(false);
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const isMountedRef = useRef(true);
+
+  // Refs to access latest values inside WebSocket callbacks without re-creating the effect
+  const apiRef = useRef(api);
+  apiRef.current = api;
+
+  // Stash the previously active panel ID for single-group reset
+  const previousActivePanelRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws/focus`;
+
+    const handleFocusChange = (focus: string | null) => {
+      const currentApi = apiRef.current;
+      if (!currentApi) return;
+
+      if (focus !== null) {
+        const panel = currentApi.getPanel(focus);
+        if (!panel) return;
+
+        const isMultiGroup = currentApi.groups.length > 1;
+
+        if (isMultiGroup) {
+          // Multi-group (Cyclist): maximize the target panel's group
+          currentApi.maximizeGroup(panel);
+        } else {
+          // Single-group (BikeRack): stash current active, switch tab
+          if (!previousActivePanelRef.current) {
+            previousActivePanelRef.current = currentApi.activePanel?.id ?? null;
+          }
+          panel.api.setActive();
+        }
+
+        setIsInFocusMode(true);
+        setFocusedPanel(focus);
+      } else {
+        // Reset
+        const isMaximized = currentApi.hasMaximizedGroup();
+
+        if (isMaximized) {
+          // Multi-group: exit maximize
+          currentApi.exitMaximizedGroup();
+        } else if (previousActivePanelRef.current) {
+          // Single-group: restore previous active tab
+          const prev = currentApi.getPanel(previousActivePanelRef.current);
+          if (prev) prev.api.setActive();
+        }
+
+        previousActivePanelRef.current = null;
+        setIsInFocusMode(false);
+        setFocusedPanel(null);
+      }
+    };
+
+    const connect = () => {
+      if (!isMountedRef.current) return;
+
+      wsRef.current = new WebSocket(wsUrl);
+
+      wsRef.current.onmessage = (event: MessageEvent) => {
+        try {
+          const msg = JSON.parse(event.data) as FocusMessage;
+          if (msg.type === 'update') {
+            // Live /bc commands — apply focus change immediately
+            handleFocusChange(msg.focus);
+          }
+          // 'init' messages are ignored — focus is ephemeral, not persistent.
+          // Stale focus values in config would destroy the layout on page load.
+        } catch {
+          // Ignore malformed messages
+        }
+      };
+
+      wsRef.current.onclose = () => {
+        reconnectTimeoutRef.current = setTimeout(connect, 2000);
+      };
+    };
+
+    connect();
+
+    return () => {
+      isMountedRef.current = false;
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  return { focusedPanel, isInFocusMode };
+}

package/src/public/hooks/useLayoutPersistence.ts

@@ -42,6 +42,9 @@ function isValidDockviewLayout(layout: unknown): layout is SerializedDockview {
   if (!layoutObj.grid || typeof layoutObj.grid !== 'object') return false;
   if (!layoutObj.panels || typeof layoutObj.panels !== 'object') return false;
 
+  // A layout with zero panels is empty — treat as invalid so default panels get created
+  if (Object.keys(layoutObj.panels as Record<string, unknown>).length === 0) return false;
+
   const grid = layoutObj.grid as Record<string, unknown>;
   // Grid should have root, width, height, orientation
   if (!grid.root || typeof grid.width !== 'number' || typeof grid.height !== 'number') return false;
@@ -49,7 +52,7 @@ function isValidDockviewLayout(layout: unknown): layout is SerializedDockview {
   return true;
 }
 
-export function useLayoutPersistence(): UseLayoutPersistenceResult {
+export function useLayoutPersistence(endpoint: string = '/api/settings/layout'): UseLayoutPersistenceResult {
   const [layout, setLayout] = useState<SerializedDockview | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
@@ -62,7 +65,7 @@ export function useLayoutPersistence(): UseLayoutPersistenceResult {
   useEffect(() => {
     const loadLayout = async () => {
       try {
-        const response = await fetch('/api/settings/layout');
+        const response = await fetch(endpoint);
         if (response.ok) {
           const data = await response.json();
           if (data.layout && isValidDockviewLayout(data.layout)) {
@@ -87,7 +90,7 @@ export function useLayoutPersistence(): UseLayoutPersistenceResult {
     };
 
     loadLayout();
-  }, []);
+  }, [endpoint]);
 
   // Debounced save function via REST API - saves native Dockview format directly
   const saveLayout = useCallback((newLayout: SerializedDockview) => {
@@ -106,7 +109,7 @@ export function useLayoutPersistence(): UseLayoutPersistenceResult {
       setIsSaving(true);
       try {
         // Save native Dockview format directly - no conversion needed
-        const response = await fetch('/api/settings/layout', {
+        const response = await fetch(endpoint, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(layoutToSave),
@@ -123,7 +126,7 @@ export function useLayoutPersistence(): UseLayoutPersistenceResult {
         setIsSaving(false);
       }
     }, DEBOUNCE_DELAY);
-  }, []);
+  }, [endpoint]);
 
   // Cleanup debounce timer on unmount
   useEffect(() => {

package/src/public/styles/dockview-theme.css

@@ -78,15 +78,7 @@
   border-bottom: 2px solid var(--accent, #6366f1);
 }
 
-/* Tab close button */
-.cyclist-dockview .dv-tab .dv-default-tab-content .dv-close-action {
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.cyclist-dockview .dv-tab:hover .dv-default-tab-content .dv-close-action {
-  opacity: 1;
-}
+/* Tab close button removed via defaultTabComponent with hideClose={true} */
 
 /* =============================================================================
    Group Styles
@@ -366,81 +358,6 @@
   outline-offset: -2px;
 }
 
-/* =============================================================================
-   TTY Panel Styles (MSSCI-14211)
-   ============================================================================= */
-
-.tty-panel {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-primary, #0a0a0f);
-}
-
-.tty-terminal-container {
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Error/Exit overlay */
-.tty-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: color-mix(in srgb, var(--bg-primary, #0a0a0f) 90%, transparent);
-  z-index: 10;
-}
-
-.tty-overlay-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 24px;
-  background-color: var(--bg-tertiary, #1a1a2e);
-  border: 1px solid var(--border, #27272a);
-  border-radius: 8px;
-  text-align: center;
-}
-
-.tty-overlay-icon {
-  font-size: 32px;
-}
-
-.tty-overlay-message {
-  color: var(--text-secondary, #a1a1aa);
-  font-size: 14px;
-  max-width: 300px;
-}
-
-.tty-restart-button {
-  padding: 8px 16px;
-  background-color: var(--accent, #6366f1);
-  border: none;
-  border-radius: 6px;
-  color: var(--text-primary, #ffffff);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.tty-restart-button:hover {
-  background-color: var(--accent-hover, #4f46e5);
-}
-
-.tty-restart-button:focus-visible {
-  outline: 2px solid var(--accent, #6366f1);
-  outline-offset: 2px;
-}
-
 /* =============================================================================
    Accessibility Utilities
    ============================================================================= */

package/src/public/styles/tailwind.css

@@ -1752,6 +1752,33 @@
   text-decoration: line-through;
 }
 
+/* Copy ID Button — show on hover, feedback on click */
+.enhanced-sprint-panel .copy-id-button {
+  opacity: 0;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.enhanced-sprint-panel .story-item:hover .copy-id-button,
+.enhanced-sprint-panel .epic-header:hover .copy-id-button {
+  opacity: 1;
+}
+
+.enhanced-sprint-panel .copy-id-button:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.enhanced-sprint-panel .copy-id-button.copied {
+  opacity: 1;
+  color: var(--success-color, #4ec9b0);
+}
+
 /* Future Initiatives Section */
 .enhanced-sprint-panel .future-epic {
   display: flex;
@@ -2000,38 +2027,6 @@
   color: var(--status-warning, #cca700);
 }
 
-/* Sync all repos action bar */
-.git-panel .git-panel-actions {
-  padding: 0 0 4px;
-}
-
-.git-panel .sync-all-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.08));
-  border-radius: 4px;
-  background: var(--bg-tertiary, #2d2d2d);
-  color: var(--text-secondary, #8b8b8b);
-  font-size: 0.75rem;
-  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-}
-
-.git-panel .sync-all-btn:hover {
-  background: var(--bg-hover, #3d3d3d);
-  color: var(--text-primary, #e0e0e0);
-  border-color: var(--accent-color, #007acc);
-}
-
-.git-panel .sync-all-btn:active {
-  background: var(--bg-active, #4d4d4d);
-}
-
 .git-panel .repo-status .file-status {
   gap: 6px;
 }