@pennyfarthing/cyclist 10.4.0 → 11.0.0-alpha.0

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