jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/ClaudePanelInput.tsx

@@ -1,7 +1,6 @@
-'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 +18,7 @@ interface ClaudePanelInputProps {
   placeholder?: string;
   attachedImages?: AttachedImage[];
   onImagesChange?: (images: AttachedImage[]) => void;
+  activeSessionId?: string | null;
 }
 
 const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
@@ -31,6 +31,7 @@ export function ClaudePanelInput({
   placeholder = 'Type a message...',
   attachedImages: externalImages,
   onImagesChange,
+  activeSessionId,
 }: ClaudePanelInputProps) {
   const [message, setMessage] = useState('');
   const [isFocused, setIsFocused] = useState(false);
@@ -38,10 +39,37 @@ export function ClaudePanelInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const lastEscapeTimeRef = useRef<number>(0);
 
+  // Per-session draft map: save/restore draft text when switching tabs
+  const draftsRef = useRef(new Map<string, string>());
+  const prevSessionRef = useRef(activeSessionId);
+  const messageRef = useRef(message);
+  messageRef.current = message;
+
+  useEffect(() => {
+    const prevId = prevSessionRef.current;
+    if (prevId && prevId !== activeSessionId) {
+      draftsRef.current.set(prevId, messageRef.current);
+    }
+    const restored = activeSessionId ? draftsRef.current.get(activeSessionId) ?? '' : '';
+    setMessage(restored);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+    prevSessionRef.current = activeSessionId;
+  }, [activeSessionId]);
+
   // Use external image state if provided (panel-level drag-drop), otherwise internal
   const attachedImages = externalImages ?? internalImages;
   const setAttachedImages = onImagesChange ?? setInternalImages;
 
+  // Auto-focus textarea on mount and when active session changes.
+  // The mount case handles when ClaudePanelInput replaces ReviewFooter after rejection.
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [activeSessionId]);
+
   const handleSend = useCallback(() => {
     const trimmed = message.trim();
     const hasContent = trimmed || attachedImages.length > 0;
@@ -93,20 +121,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] 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 +144,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 +171,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 +183,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 +205,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

@@ -1,7 +1,5 @@
-'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';
 
@@ -89,15 +87,14 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
 
   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">
+      <div className="max-w-md w-full space-y-10">
         {/* Logo */}
-        <div className="flex flex-col items-center space-y-4">
-          <Image
+        <div className="flex flex-col items-center space-y-6">
+          <img
             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
@@ -111,7 +108,7 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
         {/* 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"
+            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}
@@ -119,7 +116,7 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
         )}
 
         {/* Progress Stepper */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-5">
           {steps.map((label, i) => {
             const stepNum = i + 1;
             const isDone = completedSteps.includes(stepNum);
@@ -131,14 +128,14 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
             return (
               <div
                 key={stepNum}
-                className={`flex items-center gap-3 text-sm ${
+                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-xs font-semibold flex-shrink-0 transition-all duration-300 ${
+                  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'
@@ -153,7 +150,7 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
         </div>
 
         {/* Connect Button */}
-        <div className="pt-4">
+        <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"
@@ -162,29 +159,15 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
               ✓ Connected!
             </div>
           ) : (
-            <button
+            <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)
-                `,
-              }}
+              size="lg"
+              fullWidth
               data-testid="connect-claude-button"
             >
               {state === 'waiting' ? (
-                <span className="flex items-center justify-center gap-2">
+                <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>
@@ -193,20 +176,20 @@ export function ConnectClaudeScreen({ onConnect, onCheckAuth }: ConnectClaudeScr
               ) : (
                 'Connect Claude Code'
               )}
-            </button>
+            </Button>
           )}
         </div>
 
         {/* Status text */}
         {state === 'waiting' && (
-          <p className="text-sm text-zinc-400 dark:text-zinc-500 text-center">
+          <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-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">
+        <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>

package/apps/dashboard/components/CopyableId.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState } from 'react';
 
@@ -51,15 +50,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] duration-200 ease-out ${sizeClasses}`}
       title={`Copy: #${id} ${title} (${type})`}
     >
       <span>#{id}</span>

package/apps/dashboard/components/DetailReviewActions.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { dataBridge } from '@/lib/data-bridge';
+
+interface DetailReviewActionsProps {
+  workItemId: number;
+}
+
+export function DetailReviewActions({ workItemId }: DetailReviewActionsProps) {
+  const navigate = useNavigate();
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    try {
+      await dataBridge.updateStatus(workItemId, 'done');
+      navigate('/');
+    } catch {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectConfirm = async () => {
+    if (!rejectReason.trim()) return;
+    setIsSubmitting(true);
+    try {
+      await dataBridge.updateStatus(workItemId, 'in_progress', rejectReason.trim());
+      navigate(`/?rejected=${workItemId}&reason=${encodeURIComponent(rejectReason.trim())}`);
+    } catch {
+      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>
+  );
+}