jettypod 4.4.115 → 4.4.118

package/apps/dashboard/components/CardMenu.tsx

@@ -7,14 +7,17 @@ interface CardMenuProps {
   itemId: number;
   itemTitle?: string;
   itemType?: string;
+  itemDescription?: string | null;
+  conversational?: boolean;
   currentStatus: string;
   onStatusChange: (id: number, newStatus: string) => Promise<void>;
-  onTriggerClaude?: (id: number, title: string, type: string) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   hasActiveSession?: boolean;
   onOpenSession?: (id: string) => void;
+  usageAllowed?: boolean;
 }
 
-export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentStatus, onStatusChange, onTriggerClaude, hasActiveSession, onOpenSession }: CardMenuProps) {
+export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescription, conversational = false, currentStatus, onStatusChange, onTriggerClaude, hasActiveSession, onOpenSession, usageAllowed = true }: CardMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
@@ -74,7 +77,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
       await onStatusChange(itemId, 'in_progress');
       // Trigger Claude panel after status change succeeds
       if (onTriggerClaude) {
-        onTriggerClaude(itemId, itemTitle, itemType);
+        onTriggerClaude(itemId, itemTitle, itemType, conversational, itemDescription);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update status');
@@ -102,10 +105,16 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
       {(currentStatus === 'backlog' || currentStatus === 'cancelled') && (
         <button
           onClick={handleStart}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          disabled={!usageAllowed}
+          className={`w-full px-3 py-2 text-left text-sm flex items-center gap-2 ${
+            usageAllowed
+              ? 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+              : 'text-zinc-400 dark:text-zinc-600 cursor-not-allowed'
+          }`}
           data-testid="start-button"
+          title={!usageAllowed ? 'Weekly usage limit reached' : undefined}
         >
-          <span className="text-blue-500">▶</span>
+          <span className={usageAllowed ? 'text-blue-500' : 'text-zinc-400 dark:text-zinc-600'}>▶</span>
           Start
         </button>
       )}

package/apps/dashboard/components/ClaudePanel.tsx

@@ -10,6 +10,39 @@ import { GateCard } from './GateCard';
 import type { SessionItem } from './SessionList';
 import type { Session } from '../contexts/ClaudeSessionContext';
 
+// Tool name → human-friendly verb mapping for activity indicator
+const TOOL_VERBS: Record<string, string> = {
+  Read: 'Reading',
+  Grep: 'Searching for',
+  Glob: 'Finding files matching',
+  Bash: 'Running',
+  Edit: 'Editing',
+  Write: 'Writing',
+  Task: 'Delegating',
+  WebFetch: 'Fetching',
+  WebSearch: 'Searching web for',
+};
+
+function extractFilename(path: string): string {
+  return path.split('/').pop() || path;
+}
+
+function humanizeToolCall(toolName: string, param: string): string {
+  const verb = TOOL_VERBS[toolName] || toolName;
+  if (['Read', 'Edit', 'Write'].includes(toolName)) {
+    return `${verb} ${extractFilename(param)}...`;
+  }
+  if (toolName === 'Bash') {
+    const short = param.length > 40 ? param.slice(0, 40) : param;
+    return `${verb} ${short}...`;
+  }
+  if (['Grep', 'Glob', 'WebSearch'].includes(toolName)) {
+    const short = param.length > 30 ? param.slice(0, 30) : param;
+    return `${verb} ${short}...`;
+  }
+  return `${verb} ${param}...`;
+}
+
 // Unescape content that may have literal \n, \t, \r from JSON stringification
 function unescapeContent(content: string | undefined): string {
   if (!content) return '';
@@ -187,6 +220,7 @@ interface ClaudePanelProps {
   error: string | null;
   exitCode: number | null;
   canRetry: boolean;
+  queuedMessage?: { message: string; images?: unknown[] } | null;
   onClose: () => void;
   onRetry: () => void;
   onSendMessage: (message: string, images?: Array<{ type: string; dataUrl: string }>) => void;
@@ -213,6 +247,7 @@ export function ClaudePanel({
   error,
   exitCode,
   canRetry,
+  queuedMessage,
   onClose,
   onRetry,
   onSendMessage,
@@ -228,6 +263,9 @@ export function ClaudePanel({
 }: ClaudePanelProps) {
   const contentRef = useRef<HTMLDivElement>(null);
   const hasGates = messages.some(m => m.type === 'gate');
+  // Force detail view when no user messages (e.g., welcome session with static content)
+  const hasUserMessages = messages.some(m => m.type === 'user');
+  const effectiveNarratedMode = hasUserMessages ? narratedMode : false;
 
   // Track answered question gates by timestamp → selected option id
   const [answeredQuestions, setAnsweredQuestions] = useState<Map<number, string>>(new Map());
@@ -247,7 +285,7 @@ export function ClaudePanel({
   // Reset expanded state when toggling between summary/detail views
   useEffect(() => {
     setExpandedIndices(new Set());
-  }, [narratedMode]);
+  }, [effectiveNarratedMode]);
 
   // Drag-and-drop state lifted to panel level so the entire panel is a drop target
   const [isDragging, setIsDragging] = useState(false);
@@ -367,14 +405,14 @@ export function ClaudePanel({
                 <button
                   onClick={onToggleNarratedMode}
                   className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
-                    narratedMode
+                    effectiveNarratedMode
                       ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                       : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200'
                   }`}
-                  aria-label={narratedMode ? 'Show full conversation' : 'Show summary view'}
+                  aria-label={effectiveNarratedMode ? 'Show full conversation' : 'Show summary view'}
                   data-testid="narrated-mode-toggle"
                 >
-                  {narratedMode ? 'Summary' : 'Details'}
+                  {effectiveNarratedMode ? 'Summary' : 'Details'}
                 </button>
               )}
               <button
@@ -540,7 +578,7 @@ export function ClaudePanel({
               </div>
             ) : (
               <>
-                {narratedMode ? (
+                {effectiveNarratedMode ? (
                   /* Narrated mode: show gate cards, user messages, assistant text, and a working indicator */
                   <>
                     {(() => {
@@ -591,8 +629,14 @@ export function ClaudePanel({
                     {status === 'streaming' && (
                       <div className="flex items-center gap-2 text-xs text-zinc-400 py-2">
                         <span className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse" />
-                        Working...
                         <ElapsedTimer isStreaming={true} timerKey={`${activeSessionId ?? 'default'}-${messages.filter(m => m.type === 'user').length}`} />
+                        {(() => {
+                          const lastToolUse = [...messages].reverse().find(m => m.type === 'tool_use');
+                          if (!lastToolUse || !lastToolUse.tool_name) return 'Working...';
+                          const firstParamValue = lastToolUse.tool_input ? Object.values(lastToolUse.tool_input)[0] : null;
+                          const param = typeof firstParamValue === 'string' ? firstParamValue : '';
+                          return humanizeToolCall(lastToolUse.tool_name, param);
+                        })()}
                       </div>
                     )}
                   </>
@@ -604,7 +648,8 @@ export function ClaudePanel({
                       const lastUserMessageIndex = filteredMessages.findLastIndex(m => m.type === 'user');
                       const userMessageCount = filteredMessages.filter(m => m.type === 'user').length;
                       const lastAssistantIndex = filteredMessages.findLastIndex(m => m.type === 'assistant' || m.type === 'text');
-                      const hasIntermediates = filteredMessages.filter(m => m.type === 'assistant' || m.type === 'text').length > 1;
+                      // Only show collapse UI when there's an actual conversation (user messages exist)
+                      const hasIntermediates = userMessageCount > 0 && filteredMessages.filter(m => m.type === 'assistant' || m.type === 'text').length > 1;
 
                       const allExpanded = hasIntermediates && filteredMessages.every((m, i) =>
                         (m.type !== 'assistant' && m.type !== 'text') || i === lastAssistantIndex || expandedIndices.has(i)
@@ -638,7 +683,8 @@ export function ClaudePanel({
                           {filteredMessages.map((message, index) => {
                             const isAssistant = message.type === 'assistant' || message.type === 'text';
                             const isFinal = isAssistant && index === lastAssistantIndex;
-                            const isIntermediate = isAssistant && !isFinal;
+                            // Don't collapse when no user messages (e.g., welcome session with static content)
+                            const isIntermediate = isAssistant && !isFinal && userMessageCount > 0;
                             const isExpanded = expandedIndices.has(index);
 
                             // Get first line for collapsed summary
@@ -744,6 +790,16 @@ export function ClaudePanel({
                     What's next?
                   </div>
                 )}
+                {/* Queued message — shown below status indicator while Claude is processing */}
+                {queuedMessage && (
+                  <div className="bg-blue-50 border border-blue-100 rounded-lg p-3 opacity-60" data-testid="queued-message">
+                    <div className="flex items-center gap-1.5 mb-1">
+                      <UserIcon />
+                      <span className="text-xs text-zinc-400">Queued</span>
+                    </div>
+                    <div className="text-sm text-zinc-700 whitespace-pre-wrap">{queuedMessage.message}</div>
+                  </div>
+                )}
               </>
             )}
           </div>
@@ -974,7 +1030,7 @@ function ElapsedTimer({ isStreaming, timerKey }: { isStreaming: boolean; timerKe
   const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
 
   return (
-    <div className="text-xs text-zinc-500 mt-1 text-right" data-testid="elapsed-timer">
+    <div className="text-xs text-zinc-500 -translate-y-px" data-testid="elapsed-timer">
       {display}
     </div>
   );

package/apps/dashboard/components/ConnectClaudeScreen.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+type ConnectState = 'idle' | 'waiting' | 'success' | 'error';
+
+const AUTH_TIMEOUT_MS = 2 * 60 * 1000; // 2 minutes
+
+interface ConnectClaudeScreenProps {
+  onConnect: () => Promise<{ success: boolean; error?: string }>;
+  onCheckAuth: () => Promise<boolean>;
+}
+
+export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScreenProps) {
+  const [state, setState] = useState<ConnectState>('idle');
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cleanup = () => {
+    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+    if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; }
+  };
+
+  useEffect(() => {
+    return cleanup;
+  }, []);
+
+  const handleSuccess = () => {
+    cleanup();
+    setCompletedSteps([1, 2, 3]);
+    setState('success');
+    setTimeout(() => {
+      window.location.href = '/';
+    }, 1500);
+  };
+
+  const handleError = (message: string) => {
+    cleanup();
+    setCompletedSteps([]);
+    setErrorMessage(message);
+    setState('error');
+  };
+
+  const handleConnect = async () => {
+    setState('waiting');
+    setCompletedSteps([1]);
+    setErrorMessage(null);
+
+    // Trigger claude login (opens browser)
+    let result: { success: boolean; error?: string };
+    try {
+      result = await onConnect();
+    } catch {
+      handleError('Failed to start Claude login. Please try again.');
+      return;
+    }
+
+    if (result.success) {
+      handleSuccess();
+      return;
+    }
+
+    // Start polling in case login succeeds via browser after process exits
+    pollRef.current = setInterval(async () => {
+      try {
+        const authed = await onCheckAuth();
+        if (authed) {
+          handleSuccess();
+        }
+      } catch {
+        // Polling check failed — ignore and retry on next interval
+      }
+    }, 2000);
+
+    // Set timeout to stop polling after AUTH_TIMEOUT_MS
+    timeoutRef.current = setTimeout(() => {
+      handleError('Authentication timed out. Make sure you completed sign-in in the browser, then try again.');
+    }, AUTH_TIMEOUT_MS);
+  };
+
+  const steps = [
+    'Open Anthropic login in browser',
+    'Sign in to your Anthropic account',
+    'Return to JettyPod — ready to go',
+  ];
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Logo */}
+        <div className="flex flex-col items-center space-y-4">
+          <Image
+            src="/jettypod_wordmark.png"
+            alt="JettyPod"
+            width={160}
+            height={40}
+            priority
+          />
+          <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+            Connect Claude Code
+          </h1>
+          <p className="text-zinc-500 dark:text-zinc-400 text-center">
+            Claude Code needs to be connected to your Anthropic account.
+            This will open your browser to sign in.
+          </p>
+        </div>
+
+        {/* Error Banner */}
+        {errorMessage && (
+          <div
+            className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm"
+            data-testid="connect-error"
+          >
+            {errorMessage}
+          </div>
+        )}
+
+        {/* Progress Stepper */}
+        <div className="flex flex-col gap-4">
+          {steps.map((label, i) => {
+            const stepNum = i + 1;
+            const isDone = completedSteps.includes(stepNum);
+            const isActive = !isDone && (
+              (state === 'idle' && stepNum === 1) ||
+              (state === 'waiting' && stepNum === Math.max(...completedSteps) + 1)
+            );
+
+            return (
+              <div
+                key={stepNum}
+                className={`flex items-center gap-3 text-sm ${
+                  isDone ? 'text-zinc-900 dark:text-zinc-100' :
+                  isActive ? 'text-zinc-900 dark:text-zinc-100 font-medium' :
+                  'text-zinc-400 dark:text-zinc-500'
+                }`}
+              >
+                <span
+                  className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 transition-all duration-300 ${
+                    isDone ? 'bg-green-400 text-white' :
+                    isActive ? 'bg-[#c8d9da] text-[#3d4d4e]' :
+                    'bg-zinc-200 dark:bg-zinc-700 text-zinc-400 dark:text-zinc-500'
+                  }`}
+                >
+                  {isDone ? '✓' : stepNum}
+                </span>
+                <span>{label}</span>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Connect Button */}
+        <div className="pt-4">
+          {state === 'success' ? (
+            <div
+              className="w-full py-3 px-6 rounded-xl font-medium text-center bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
+              data-testid="connect-success"
+            >
+              ✓ Connected!
+            </div>
+          ) : (
+            <button
+              onClick={handleConnect}
+              disabled={state === 'waiting'}
+              className="w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100 disabled:opacity-60 disabled:transform-none disabled:cursor-default"
+              style={{
+                cursor: state === 'waiting' ? 'default' : 'pointer',
+                background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
+                color: '#3d4d4e',
+                boxShadow: `
+                  0 1px 1px rgba(0, 0, 0, 0.02),
+                  0 2px 4px rgba(0, 0, 0, 0.03),
+                  0 6px 12px rgba(0, 0, 0, 0.05),
+                  0 12px 24px rgba(0, 0, 0, 0.06),
+                  0 20px 40px rgba(129, 157, 159, 0.2),
+                  0 32px 64px rgba(129, 157, 159, 0.18),
+                  inset 0 2px 4px rgba(255, 255, 255, 1),
+                  inset 0 -2px 4px rgba(129, 157, 159, 0.05)
+                `,
+              }}
+              data-testid="connect-claude-button"
+            >
+              {state === 'waiting' ? (
+                <span className="flex items-center justify-center gap-2">
+                  <span className="inline-block w-4 h-4 border-2 border-[#c8d9da] border-t-[#3d4d4e] rounded-full animate-spin" />
+                  Waiting for login...
+                </span>
+              ) : state === 'error' ? (
+                'Try Again'
+              ) : (
+                'Connect Claude Code'
+              )}
+            </button>
+          )}
+        </div>
+
+        {/* Status text */}
+        {state === 'waiting' && (
+          <p className="text-sm text-zinc-400 dark:text-zinc-500 text-center">
+            A browser window should have opened. Complete the sign-in there.
+          </p>
+        )}
+
+        {/* Info Section */}
+        <div className="pt-8 space-y-4">
+          <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm">
+            <p>
+              <strong className="text-zinc-700 dark:text-zinc-300">Why do I need this?</strong>
+            </p>
+            <p className="mt-2">
+              JettyPod uses Claude Code under the hood. Claude Code requires its own
+              Anthropic account to work. This is a one-time setup — you won&apos;t need to
+              do this again on this computer.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}