jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/ClaudePanelInput.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useRef, useCallback, KeyboardEvent, ChangeEvent } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useRef, useCallback, useEffect, KeyboardEvent, ChangeEvent } from 'react';
+import { m, AnimatePresence } from 'framer-motion';
 
 export interface AttachedImage {
   id: string;
@@ -19,6 +19,7 @@ interface ClaudePanelInputProps {
   placeholder?: string;
   attachedImages?: AttachedImage[];
   onImagesChange?: (images: AttachedImage[]) => void;
+  activeSessionId?: string | null;
 }
 
 const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
@@ -31,6 +32,7 @@ export function ClaudePanelInput({
   placeholder = 'Type a message...',
   attachedImages: externalImages,
   onImagesChange,
+  activeSessionId,
 }: ClaudePanelInputProps) {
   const [message, setMessage] = useState('');
   const [isFocused, setIsFocused] = useState(false);
@@ -42,6 +44,13 @@ export function ClaudePanelInput({
   const attachedImages = externalImages ?? internalImages;
   const setAttachedImages = onImagesChange ?? setInternalImages;
 
+  // Auto-focus textarea when active session changes (new session or tab switch)
+  useEffect(() => {
+    if (activeSessionId && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [activeSessionId]);
+
   const handleSend = useCallback(() => {
     const trimmed = message.trim();
     const hasContent = trimmed || attachedImages.length > 0;
@@ -93,20 +102,20 @@ export function ClaudePanelInput({
 
   return (
     <div
-      className="border-t border-zinc-200 bg-zinc-50 p-3"
+      className="border-t border-zinc-200 bg-zinc-50 p-4"
       data-testid="claude-panel-input"
     >
       <div
         className={`
-          relative rounded-lg border transition-all duration-200
-          ${isFocused ? 'border-blue-500 bg-white' : 'border-zinc-300 bg-white'}
+          relative rounded-lg border-2 transition-[border-color,box-shadow] duration-200 ease-out
+          ${isFocused ? 'border-[#819D9F] bg-white' : 'border-zinc-300 bg-white'}
           ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
         `}
       >
 
         {/* Thumbnail preview section */}
         {attachedImages.length > 0 && (
-          <div className="flex flex-wrap gap-2 px-3 pt-2" data-testid="image-preview-section">
+          <div className="flex flex-wrap gap-3 px-4 pt-3" data-testid="image-preview-section">
             {attachedImages.map(image => (
               <div
                 key={image.id}
@@ -116,12 +125,12 @@ export function ClaudePanelInput({
                 <img
                   src={image.dataUrl}
                   alt={image.name}
-                  className="w-16 h-16 object-cover rounded border border-zinc-200"
+                  className="w-16 h-16 object-cover rounded"
                 />
                 <button
                   type="button"
                   onClick={() => removeImage(image.id)}
-                  className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-zinc-700 hover:bg-zinc-900 text-white rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                  className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-zinc-700 hover:bg-zinc-900 text-white rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-out"
                   data-testid="remove-image-button"
                   aria-label={`Remove ${image.name}`}
                 >
@@ -143,10 +152,10 @@ export function ClaudePanelInput({
           disabled={disabled}
           rows={1}
           className={`
-            w-full resize-none bg-transparent px-3 py-2.5 text-sm text-zinc-900
+            w-full resize-none bg-transparent px-4 py-3 text-base text-zinc-900
             placeholder:text-zinc-400 focus:outline-none
             ${isExpanded ? 'min-h-[80px]' : 'min-h-[40px]'}
-            transition-all duration-200
+            transition-[min-height] duration-200 ease-out
           `}
           style={{ maxHeight: '200px' }}
           data-testid="claude-input-textarea"
@@ -155,12 +164,12 @@ export function ClaudePanelInput({
         {/* Footer with character count and hints - only show when expanded */}
         <AnimatePresence>
           {isExpanded && (
-            <motion.div
+            <m.div
               initial={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: 'auto' }}
               exit={{ opacity: 0, height: 0 }}
               transition={{ duration: 0.15 }}
-              className="flex items-center justify-between px-3 pb-2 text-xs text-zinc-500"
+              className="flex items-center justify-between px-4 pb-3 text-xs text-zinc-500"
             >
               <div className="flex items-center gap-3" data-testid="keyboard-hints">
                 <span>
@@ -177,14 +186,14 @@ export function ClaudePanelInput({
                   <span>
                     <kbd className="px-1.5 py-0.5 rounded bg-zinc-200 text-zinc-600 font-mono text-[10px]">Esc</kbd>
                     <kbd className="px-1.5 py-0.5 rounded bg-zinc-200 text-zinc-600 font-mono text-[10px] ml-0.5">Esc</kbd>
-                    {' '}to stop
+                    {' '}to interrupt
                   </span>
                 )}
               </div>
               <span data-testid="character-count">
                 {characterCount > 0 ? `${characterCount} chars` : ''}
               </span>
-            </motion.div>
+            </m.div>
           )}
         </AnimatePresence>
       </div>

package/apps/dashboard/components/ConnectClaudeScreen.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import { Button } from '@/components/ui/Button';
+
+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-10">
+        {/* Logo */}
+        <div className="flex flex-col items-center space-y-6">
+          <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-2 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-5 py-4 rounded-xl text-base"
+            data-testid="connect-error"
+          >
+            {errorMessage}
+          </div>
+        )}
+
+        {/* Progress Stepper */}
+        <div className="flex flex-col gap-5">
+          {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-4 text-base ${
+                  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-base font-semibold flex-shrink-0 transition-colors duration-200 ease-out ${
+                    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-6">
+          {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'}
+              size="lg"
+              fullWidth
+              data-testid="connect-claude-button"
+            >
+              {state === 'waiting' ? (
+                <span className="flex items-center justify-center gap-3">
+                  <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-base 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-10 space-y-4">
+          <div className="border-2 border-zinc-200 dark:border-zinc-700 rounded-xl p-6 text-zinc-500 dark:text-zinc-400 text-base">
+            <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>
+  );
+}

package/apps/dashboard/components/CopyableId.tsx

@@ -51,15 +51,15 @@ export function CopyableId({ id, title, type, size = 'sm' }: CopyableIdProps) {
   };
 
   const sizeClasses = size === 'md'
-    ? 'text-sm px-1.5 py-1'
-    : 'text-xs px-1 py-0.5';
+    ? 'text-base px-1.5 py-1'
+    : 'text-sm px-1 py-0.5';
 
   const iconClasses = size === 'md' ? 'w-4 h-4' : 'w-3 h-3';
 
   return (
     <button
       onClick={handleCopy}
-      className={`flex items-center gap-1 text-zinc-400 font-mono -mx-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 active:scale-95 transition-all ${sizeClasses}`}
+      className={`flex items-center gap-1 text-zinc-400 font-mono -mx-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 active:scale-95 transition-[color,background-color,transform] duration-200 ease-out ${sizeClasses}`}
       title={`Copy: #${id} ${title} (${type})`}
     >
       <span>#{id}</span>

package/apps/dashboard/components/DetailReviewActions.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface DetailReviewActionsProps {
+  workItemId: number;
+}
+
+export function DetailReviewActions({ workItemId }: DetailReviewActionsProps) {
+  const router = useRouter();
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    const res = await fetch(`/api/work/${workItemId}/status`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: 'done' }),
+    });
+    if (res.ok) {
+      router.push('/');
+    } else {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectConfirm = async () => {
+    if (!rejectReason.trim()) return;
+    setIsSubmitting(true);
+    const res = await fetch(`/api/work/${workItemId}/status`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: 'in_progress', rejectionReason: rejectReason.trim() }),
+    });
+    if (res.ok) {
+      router.push(`/?rejected=${workItemId}&reason=${encodeURIComponent(rejectReason.trim())}`);
+    } else {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (showRejectInput) {
+    return (
+      <div className="flex items-center gap-2" data-testid="detail-review-reject-area">
+        <Input
+          type="text"
+          value={rejectReason}
+          onChange={(e) => setRejectReason(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && rejectReason.trim()) handleRejectConfirm();
+            if (e.key === 'Escape') {
+              setShowRejectInput(false);
+              setRejectReason('');
+            }
+          }}
+          placeholder="Rejection reason..."
+          size="sm"
+          error
+          autoFocus
+          data-testid="detail-review-reject-input"
+        />
+        <Button
+          onClick={handleRejectConfirm}
+          disabled={!rejectReason.trim()}
+          loading={isSubmitting}
+          variant="destructive"
+          size="sm"
+          data-testid="detail-review-reject-confirm"
+        >
+          Reject
+        </Button>
+        <Button
+          onClick={() => { setShowRejectInput(false); setRejectReason(''); }}
+          variant="ghost"
+          size="sm"
+          data-testid="detail-review-reject-cancel"
+        >
+          Cancel
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2" data-testid="detail-review-actions">
+      <Button
+        onClick={handleAccept}
+        loading={isSubmitting}
+        size="sm"
+        data-testid="detail-review-accept"
+      >
+        Accept
+      </Button>
+      <Button
+        onClick={() => setShowRejectInput(true)}
+        variant="secondary"
+        size="sm"
+        data-testid="detail-review-reject"
+      >
+        Reject
+      </Button>
+    </div>
+  );
+}