@pennyfarthing/cyclist 10.0.3 → 10.2.0

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

@@ -8,10 +8,19 @@
  * Note: Tool call display moved to AuditLogPanel for comprehensive view.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { HotspotsDialog } from '../dialogs/HotspotsDialog';
+import { CodeMarkersDialog } from '../dialogs/CodeMarkersDialog';
+import { ComplexityDialog } from '../dialogs/ComplexityDialog';
+import { DependenciesDialog } from '../dialogs/DependenciesDialog';
+import { AgentLoadDialog } from '../AgentLoadDialog';
+import { DeadCodeDialog } from '../DeadCodeDialog';
+import { HealthGauge } from '../HealthGauge';
+import { ContextSparkline, SparklinePoint } from '../ContextSparkline';
+import { useHealthScore } from '../../hooks/useHealthScore';
 
 /** Context tier type */
 type ContextTier = 'FULL' | 'REFRESH' | 'HANDOFF' | 'MINIMAL';
@@ -94,6 +103,49 @@ export function DebugPanel(): React.ReactElement {
   const [context, setContext] = useState<ContextData | null>(null);
   const [tokenStats, setTokenStats] = useState<Record<string, unknown> | null>(null);
   const [breakdownExpanded, setBreakdownExpanded] = useState(false);
+  const [hotspotsOpen, setHotspotsOpen] = useState(false);
+  const [codeMarkersOpen, setCodeMarkersOpen] = useState(false);
+  const [complexityOpen, setComplexityOpen] = useState(false);
+  const [dependenciesOpen, setDependenciesOpen] = useState(false);
+  const [agentLoadOpen, setAgentLoadOpen] = useState(false);
+  const [deadCodeOpen, setDeadCodeOpen] = useState(false);
+  const healthScore = useHealthScore();
+  const sparklineRef = useRef<SparklinePoint[]>([]);
+  const [sparklineVersion, setSparklineVersion] = useState(0);
+
+  const pushSparklinePoint = useCallback((percent: number, tokens: number) => {
+    const buf = sparklineRef.current;
+    buf.push({ percent, tokens, timestamp: Date.now() });
+    if (buf.length > 50) buf.shift();
+    setSparklineVersion(v => v + 1);
+  }, []);
+
+  const handleDimensionClick = (dimensionName: string) => {
+    switch (dimensionName) {
+      case 'churn':
+        setHotspotsOpen(true);
+        break;
+      case 'test_gaps':
+        // TODO: TestGapsDialog — for now no drill-down
+        break;
+      case 'todo_density':
+      case 'deprecation_debt':
+        setCodeMarkersOpen(true);
+        break;
+      case 'complexity':
+        setComplexityOpen(true);
+        break;
+      case 'dead_code':
+        setDeadCodeOpen(true);
+        break;
+      case 'dependency_freshness':
+        setDependenciesOpen(true);
+        break;
+      case 'agent_context_efficiency':
+        setAgentLoadOpen(true);
+        break;
+    }
+  };
 
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -104,7 +156,11 @@ export function DebugPanel(): React.ReactElement {
       try {
         const data = JSON.parse(event.data);
         if (data.type === 'init' || data.type === 'update') {
-          setContext(data.context as ContextData);
+          const ctx = data.context as ContextData;
+          setContext(ctx);
+          if (ctx.percent != null) {
+            pushSparklinePoint(ctx.percent, ctx.tokens ?? 0);
+          }
         }
       } catch {
         // Ignore parse errors
@@ -126,7 +182,7 @@ export function DebugPanel(): React.ReactElement {
       contextWs.close();
       tokenWs.close();
     };
-  }, []);
+  }, [pushSparklinePoint]);
 
   // Compute tier-specific CSS class
   const tierClass = context?.tier ? `tier-${context.tier.toLowerCase()}` : '';
@@ -134,6 +190,19 @@ export function DebugPanel(): React.ReactElement {
 
   return (
     <div className="debug-panel" data-testid="debug-panel">
+      <HealthGauge
+        score={healthScore.data?.composite_score ?? null}
+        dimensions={healthScore.data?.dimensions ?? []}
+        totalDimensions={8}
+        onDimensionClick={handleDimensionClick}
+        isLoading={healthScore.isLoading}
+        lastFetchedAt={healthScore.lastFetchedAt}
+        onRefresh={healthScore.refresh}
+        error={healthScore.error}
+      />
+
+      <Separator className="my-3" />
+
       <h4>Context Usage</h4>
       {context ? (
         <div className="context-info">
@@ -200,6 +269,7 @@ export function DebugPanel(): React.ReactElement {
               style={{ width: `${context.percent || 0}%` }}
             />
           </div>
+          <ContextSparkline history={sparklineRef.current} key={sparklineVersion} />
           <span className="context-text">
             {(context.tokens ?? 0).toLocaleString()} / {context.baseline != null && context.available != null
               ? (context.baseline + context.available).toLocaleString()
@@ -261,6 +331,12 @@ export function DebugPanel(): React.ReactElement {
         <div className="placeholder">No token stats</div>
       )}
 
+      <HotspotsDialog open={hotspotsOpen} onOpenChange={setHotspotsOpen} />
+      <CodeMarkersDialog open={codeMarkersOpen} onOpenChange={setCodeMarkersOpen} />
+      <ComplexityDialog open={complexityOpen} onOpenChange={setComplexityOpen} />
+      <DependenciesDialog open={dependenciesOpen} onOpenChange={setDependenciesOpen} />
+      <AgentLoadDialog isOpen={agentLoadOpen} onClose={() => setAgentLoadOpen(false)} />
+      <DeadCodeDialog isOpen={deadCodeOpen} onClose={() => setDeadCodeOpen(false)} />
     </div>
   );
 }

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

@@ -6,6 +6,7 @@
  */
 
 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';
@@ -61,14 +62,12 @@ function FileList({ files }: FileListProps): React.ReactElement {
 
 interface RepoStatusProps {
   repo: RepoStatusData;
-  onPullDevelop?: (repoName: string, repoPath: string) => void;
 }
 
-function RepoStatus({ repo, onPullDevelop }: RepoStatusProps): React.ReactElement {
+function RepoStatus({ repo }: RepoStatusProps): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
-  const { name, path, branch, ahead, behind, developBehind, staged, modified, untracked, isDirty, files } = repo;
+  const { name, branch, ahead, behind, developBehind, staged, modified, untracked, isDirty, files } = repo;
   const hasFiles = files.length > 0;
-  const hasDevelopUpdates = developBehind !== undefined && developBehind > 0;
 
   return (
     <TooltipProvider delayDuration={300}>
@@ -90,14 +89,14 @@ function RepoStatus({ repo, onPullDevelop }: RepoStatusProps): React.ReactElemen
           <span className="branch-name">{branch}</span>
         </div>
 
-        {(ahead !== undefined && ahead > 0) || (behind !== undefined && behind > 0) ? (
+        {((ahead !== undefined && ahead > 0) || (behind !== undefined && behind > 0) || (developBehind !== undefined && developBehind > 0)) && (
           <div className="sync-status">
             {ahead !== undefined && ahead > 0 && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span className="ahead">↑{ahead}</span>
                 </TooltipTrigger>
-                <TooltipContent>Commits ahead</TooltipContent>
+                <TooltipContent>Commits ahead of remote</TooltipContent>
               </Tooltip>
             )}
             {behind !== undefined && behind > 0 && (
@@ -105,29 +104,15 @@ function RepoStatus({ repo, onPullDevelop }: RepoStatusProps): React.ReactElemen
                 <TooltipTrigger asChild>
                   <span className="behind">↓{behind}</span>
                 </TooltipTrigger>
-                <TooltipContent>Commits behind</TooltipContent>
+                <TooltipContent>Commits behind remote</TooltipContent>
               </Tooltip>
             )}
-          </div>
-        ) : null}
-
-        {hasDevelopUpdates && (
-          <div className="develop-behind-warning">
-            <span className="warning-icon">⚠️</span>
-            <span className="warning-text">develop is {developBehind} commit{developBehind > 1 ? 's' : ''} ahead</span>
-            {onPullDevelop && (
+            {developBehind !== undefined && developBehind > 0 && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="pull-develop-btn"
-                    onClick={() => onPullDevelop(name, path)}
-                  >
-                    Pull
-                  </Button>
+                  <span className="develop-behind">⟳{developBehind}</span>
                 </TooltipTrigger>
-                <TooltipContent>Pull latest from develop</TooltipContent>
+                <TooltipContent>develop is {developBehind} commit{developBehind > 1 ? 's' : ''} ahead</TooltipContent>
               </Tooltip>
             )}
           </div>
@@ -169,11 +154,8 @@ export function GitPanel(): React.ReactElement {
   const { repos, isLoading, error } = useGitStatus();
   const { send } = useClaudeContext();
 
-  const handlePullDevelop = (repoName: string, repoPath: string) => {
-    const prompt = repoPath === '.'
-      ? `pull develop`
-      : `cd ${repoPath} && git pull origin develop`;
-    send(prompt);
+  const handleSyncAll = () => {
+    send('Sync all repos');
   };
 
   if (isLoading) {
@@ -211,8 +193,21 @@ 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} onPullDevelop={handlePullDevelop} />
+        <RepoStatus key={repo.name} repo={repo} />
       ))}
     </div>
   );

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

@@ -248,6 +248,7 @@ export function MessagePanel(): React.ReactElement {
     handleBellModeChange,
     handleRelayModeChange,
     handleTirePump,
+    handleAgentSwitch,
   } = useControlBar();
 
   // Claude context for WebSocket communication
@@ -415,13 +416,53 @@ export function MessagePanel(): React.ReactElement {
     handleStop();
   }, [pauseQueue, handleStop]);
 
+  // Resizable editor panel
+  const [editorHeight, setEditorHeight] = useState<number | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    const startY = e.clientY;
+    const panelEl = panelRef.current;
+    if (!panelEl) return;
+    const panelRect = panelEl.getBoundingClientRect();
+    const startEditorHeight = editorHeight ?? panelEl.querySelector('.message-panel-editor')?.getBoundingClientRect().height ?? 150;
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!isDragging.current) return;
+      const delta = startY - ev.clientY;
+      const newHeight = Math.max(80, Math.min(startEditorHeight + delta, panelRect.height * 0.7));
+      setEditorHeight(newHeight);
+    };
+    const onMouseUp = () => {
+      isDragging.current = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }, [editorHeight]);
+
   return (
-    <div className="message-panel" data-testid="message-panel">
+    <div className="message-panel" data-testid="message-panel" ref={panelRef}>
       <PersonaHeader />
       <div className="message-panel-content">
         <MessageView messages={messages} />
       </div>
-      <div className="message-panel-editor">
+      <div
+        className="message-panel-resize-handle"
+        onMouseDown={handleResizeStart}
+      />
+      <div
+        className="message-panel-editor"
+        style={editorHeight != null ? { height: editorHeight, flexShrink: 0 } : undefined}
+      >
         <div className="editor-with-controls">
           <div className="editor-area">
             <Editor
@@ -444,6 +485,7 @@ export function MessagePanel(): React.ReactElement {
             contextPercent={contextPercent}
             currentAgent={currentAgent}
             onTirePump={handleTirePump}
+            onAgentSwitch={handleAgentSwitch}
           />
         </div>
       </div>

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

@@ -53,11 +53,11 @@ interface Settings {
 interface ThemeMetadata {
   id: string;
   name: string;
-  tier: 'S' | 'A' | 'B' | 'U';
+  tier: string;
 }
 
-// Tier sort order: S=0, A=1, B=2, U=3
-const TIER_ORDER: Record<string, number> = { S: 0, A: 1, B: 2, U: 3 };
+// Tier sort order: S=0, A=1, B=2, unranked=3
+const TIER_ORDER: Record<string, number> = { S: 0, A: 1, B: 2 };
 
 // Panel display names for the visibility toggles
 const PANEL_DISPLAY_NAMES: Record<string, string> = {
@@ -348,7 +348,7 @@ export function SettingsPanel(): React.ReactElement {
         >
           {sortedThemes.map(theme => (
             <option key={theme.id} value={theme.id}>
-              [{theme.tier}] {theme.name}
+              [{theme.tier || 'Unranked'}] {theme.name}
             </option>
           ))}
         </select>