claude-ws 0.3.97 → 0.3.99

package/src/components/kanban/task-card.tsx

@@ -1,14 +1,45 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Task } from '@/types';
 import { cn, getProjectColor } from '@/lib/utils';
-import { GripVertical, MessageSquare, Trash2, Search } from 'lucide-react';
+import { GripVertical, MessageSquare, Trash2, Search, Network } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useTaskStore } from '@/stores/task-store';
 import { useProjectStore } from '@/stores/project-store';
+import { useQuestionsStore } from '@/stores/questions-store';
+import { useWorkflowStore } from '@/stores/workflow-store';
 import type { ChatHistoryMatch } from '@/hooks/use-chat-history-search';
 
+function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diffMs = now - timestamp;
+  const diffMin = Math.floor(diffMs / 60000);
+  const diffHr = Math.floor(diffMs / 3600000);
+  const diffDay = Math.floor(diffMs / 86400000);
+
+  if (diffMin < 1) return 'just now';
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDay < 30) return `${diffDay}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+
+function formatAbsoluteTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleString();
+}
+
+function RelativeTime({ timestamp }: { timestamp: number }) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 60000);
+    return () => clearInterval(interval);
+  }, []);
+  return <>{formatRelativeTime(timestamp)}</>;
+}
+
 interface TaskCardProps {
   task: Task;
   attemptCount?: number;
@@ -20,7 +51,14 @@ interface TaskCardProps {
 export function TaskCard({ task, attemptCount = 0, searchQuery = '', isMobile = false, chatHistoryMatch }: TaskCardProps) {
   const { selectedTaskId, selectTask, deleteTask } = useTaskStore();
   const { projects, selectedProjectIds, isAllProjectsMode } = useProjectStore();
+  const { getByTaskId } = useQuestionsStore();
+  const { getByTaskId: getWorkflowByTaskId } = useWorkflowStore();
+  const tTask = useTranslations('task');
+  const tKanban = useTranslations('kanban');
   const isSelected = selectedTaskId === task.id;
+  const hasPendingQuestion = !!getByTaskId(task.id);
+  const workflowEntry = getWorkflowByTaskId(task.id);
+  const hasActiveWorkflow = workflowEntry && workflowEntry.summary.activeCount > 0;
 
   // Helper function to highlight matched text
   const highlightText = (text: string) => {
@@ -47,7 +85,7 @@ export function TaskCard({ task, attemptCount = 0, searchQuery = '', isMobile =
 
   const handleDelete = async (e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm(`Delete task "${task.title}"?`)) return;
+    if (!confirm(tTask('deleteTaskConfirm', { title: task.title }))) return;
     try {
       await fetch(`/api/tasks/${task.id}`, { method: 'DELETE' });
       deleteTask(task.id);
@@ -115,11 +153,31 @@ export function TaskCard({ task, attemptCount = 0, searchQuery = '', isMobile =
               : '-left-1 -translate-x-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none',
             'hover:bg-muted'
           )}
-          aria-label="Drag to reorder"
+          aria-label={tKanban('dragToReorder')}
         >
           <GripVertical className="size-4" />
         </button>
 
+        {/* Pending question indicator dot */}
+        {hasPendingQuestion && (
+          <span
+            className="absolute top-1.5 right-1.5 size-2 rounded-full bg-amber-500 z-10"
+            title="Pending question"
+          />
+        )}
+
+        {/* Active workflow indicator */}
+        {hasActiveWorkflow && (
+          <span
+            className="absolute top-1.5 flex items-center gap-0.5 text-[9px] font-medium text-blue-500 z-10"
+            style={{ right: hasPendingQuestion ? '1rem' : '0.375rem' }}
+            title={`${workflowEntry.summary.activeCount} agent${workflowEntry.summary.activeCount !== 1 ? 's' : ''} running`}
+          >
+            <Network className="size-2.5" />
+            <span>{workflowEntry.summary.activeCount}</span>
+          </span>
+        )}
+
         {/* Delete button - always visible for Done/Cancelled tasks */}
         {showDeleteButton && (
           <button
@@ -129,7 +187,7 @@ export function TaskCard({ task, attemptCount = 0, searchQuery = '', isMobile =
               'text-muted-foreground hover:text-destructive',
               'hover:bg-muted pointer-events-auto z-10'
             )}
-            aria-label="Delete task"
+            aria-label={tKanban('deleteTask')}
           >
             <Trash2 className="size-3" />
           </button>
@@ -186,6 +244,14 @@ export function TaskCard({ task, attemptCount = 0, searchQuery = '', isMobile =
               </div>
             </div>
           )}
+
+          {/* Timestamp - shows relative time, switches to exact time on card hover */}
+          {task.updatedAt && (
+            <div className="mt-1.5 text-[10px] text-muted-foreground/70">
+              <span className="group-hover:hidden"><RelativeTime timestamp={task.updatedAt} /></span>
+              <span className="hidden group-hover:inline">{formatAbsoluteTime(task.updatedAt)}</span>
+            </div>
+          )}
         </div>
       </div>
     </div>

package/src/components/project-settings/component-selector.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { Search, Check, Loader2, Trash2, Upload } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -24,6 +25,7 @@ interface InstalledStatus {
 }
 
 export function ComponentSelector({ type, selectedIds, onChange, projectId, installedIds = [], onRefresh, onCloseDialog }: ComponentSelectorProps) {
+  const t = useTranslations('agentFactory');
   const [components, setComponents] = useState<AgentFactoryPlugin[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
@@ -113,7 +115,7 @@ export function ComponentSelector({ type, selectedIds, onChange, projectId, inst
       onRefresh?.();
     } catch (error) {
       console.error('Error uninstalling component:', error);
-      alert('Failed to uninstall component');
+      alert(t('failedToUninstallComponent'));
     } finally {
       setUninstalling(null);
     }

package/src/components/project-settings/plugin-upload-dialog.tsx

@@ -13,6 +13,7 @@ import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Upload, FileArchive, Loader2, AlertCircle, Package, FileText, Folder, Check, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 interface PreviewItem {
   type: 'skill' | 'command' | 'agent' | 'agent_set' | 'unknown';
@@ -35,6 +36,7 @@ interface PluginUploadDialogProps {
  * - Import to agent factory as well
  */
 export function PluginUploadDialog({ open, onOpenChange, projectId, onUploadSuccess }: PluginUploadDialogProps) {
+  const t = useTranslations('agentFactory');
   const [step, setStep] = useState<'upload' | 'preview' | 'importing'>('upload');
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -370,15 +372,15 @@ export function PluginUploadDialog({ open, onOpenChange, projectId, onUploadSucc
                 {uploading ? (
                   <div className="flex flex-col items-center gap-3">
                     <Loader2 className="w-12 h-12 animate-spin text-muted-foreground" />
-                    <p className="text-muted-foreground">Analyzing archive...</p>
+                    <p className="text-muted-foreground">{t('analyzingArchive')}</p>
                   </div>
                 ) : (
                   <div className="flex flex-col items-center gap-3">
                     <Upload className="w-12 h-12 text-muted-foreground" />
                     <div>
-                      <p className="font-medium">Click to upload or drag and drop</p>
+                      <p className="font-medium">{t('clickToUploadOrDrag')}</p>
                       <p className="text-sm text-muted-foreground mt-1">
-                        .zip, .tar, .gz, .gzip, or .tgz files
+                        {t('supportedFormats')}
                       </p>
                     </div>
                   </div>
@@ -395,7 +397,7 @@ export function PluginUploadDialog({ open, onOpenChange, projectId, onUploadSucc
 
               {/* Info */}
               <div className="text-sm text-muted-foreground bg-muted/50 p-3 rounded-lg">
-                <p className="font-medium mb-2">Automatic Organization:</p>
+                <p className="font-medium mb-2">{t('automaticOrganization')}</p>
                 <p className="text-xs mb-2">
                   Files will be automatically organized into the correct folders:
                 </p>
@@ -495,7 +497,7 @@ export function PluginUploadDialog({ open, onOpenChange, projectId, onUploadSucc
           {step === 'importing' && (
             <div className="flex flex-col items-center gap-4 py-8">
               <Loader2 className="w-12 h-12 animate-spin text-muted-foreground" />
-              <p className="text-muted-foreground">Installing plugins...</p>
+              <p className="text-muted-foreground">{t('importingPlugins')}</p>
             </div>
           )}
         </div>

package/src/components/project-settings/project-settings-dialog.tsx

@@ -19,6 +19,7 @@ import { ComponentSelector } from './component-selector';
 import { useProjectSettingsStore } from '@/stores/project-settings-store';
 import { useAgentFactoryUIStore } from '@/stores/agent-factory-ui-store';
 import { useToast } from '@/hooks/use-toast';
+import { useTranslations } from 'next-intl';
 
 interface InstallResult {
   installed: string[];
@@ -33,6 +34,7 @@ interface ProjectSettingsDialogProps {
 }
 
 export function ProjectSettingsDialog({ open, onOpenChange, projectId }: ProjectSettingsDialogProps) {
+  const t = useTranslations('settings');
   const { projects } = useProjectStore();
   const { setOpen: setAgentFactoryOpen } = useAgentFactoryUIStore();
   const {
@@ -155,8 +157,8 @@ export function ProjectSettingsDialog({ open, onOpenChange, projectId }: Project
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Project Settings</DialogTitle>
-            <DialogDescription>No projects available</DialogDescription>
+            <DialogTitle>{t('projectSettings')}</DialogTitle>
+            <DialogDescription>{t('noProjectsAvailable')}</DialogDescription>
           </DialogHeader>
         </DialogContent>
       </Dialog>
@@ -169,7 +171,7 @@ export function ProjectSettingsDialog({ open, onOpenChange, projectId }: Project
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Settings className="h-5 w-5" />
-            {selectedProject?.name || 'Project Settings'}
+            {selectedProject?.name || t('projectSettings')}
           </DialogTitle>
           <DialogDescription>
             Configure plugins and agent sets for this project

package/src/components/questions/questions-panel.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { MessageCircleQuestion, X } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useQuestionsStore, type PendingQuestionEntry } from '@/stores/questions-store';
+import { useTaskStore } from '@/stores/task-store';
+import { cn } from '@/lib/utils';
+
+interface Question {
+  question: string;
+  header: string;
+  options: Array<{ label: string; description: string }>;
+  multiSelect: boolean;
+}
+
+function QuestionEntryItem({ entry }: { entry: PendingQuestionEntry }) {
+  const { selectTask } = useTaskStore();
+  const { closePanel } = useQuestionsStore();
+
+  const questions = entry.questions as Question[];
+  const firstQuestion = questions[0];
+
+  const handleGoToTask = () => {
+    selectTask(entry.taskId);
+    closePanel();
+  };
+
+  const timeAgo = formatTimeAgo(entry.timestamp);
+
+  return (
+    <div className="border-b border-border last:border-b-0">
+      {/* Clickable summary row - opens task in chat */}
+      <button
+        onClick={handleGoToTask}
+        className="w-full text-left px-4 py-3 hover:bg-accent/50 transition-colors flex items-start gap-2"
+      >
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <span className="text-sm font-medium truncate">{entry.taskTitle}</span>
+            <span className="text-[10px] text-muted-foreground shrink-0">{timeAgo}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Badge variant="outline" className="text-[10px] px-1 py-0">
+              {firstQuestion?.header}
+            </Badge>
+            <span className="text-xs text-muted-foreground truncate">
+              {firstQuestion?.question}
+            </span>
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+}
+
+function formatTimeAgo(timestamp: number): string {
+  const diffMs = Date.now() - timestamp;
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return 'just now';
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMs / 3600000);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  return `${Math.floor(diffMs / 86400000)}d ago`;
+}
+
+interface QuestionsPanelProps {
+  className?: string;
+}
+
+export function QuestionsPanel({ className }: QuestionsPanelProps) {
+  const { isOpen, closePanel, pendingQuestions } = useQuestionsStore();
+  const entries = Array.from(pendingQuestions.values()).sort((a, b) => b.timestamp - a.timestamp);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      <div
+        className="fixed inset-0 bg-black/50 z-40 sm:hidden"
+        onClick={closePanel}
+      />
+
+      {/* Sidebar */}
+      <div
+        className={cn(
+          'fixed right-0 top-0 h-full w-96 bg-background border-l shadow-lg z-50',
+          'flex flex-col',
+          className
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <MessageCircleQuestion className="size-4 text-muted-foreground" />
+            <h2 className="font-semibold text-sm">Pending Questions</h2>
+            {entries.length > 0 && (
+              <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                {entries.length}
+              </Badge>
+            )}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={closePanel}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          {entries.length === 0 ? (
+            <div className="px-4 py-12 text-center">
+              <MessageCircleQuestion className="size-10 text-muted-foreground/30 mx-auto mb-3" />
+              <p className="text-sm text-muted-foreground">No pending questions</p>
+              <p className="text-xs text-muted-foreground/70 mt-1">
+                Questions from running tasks will appear here
+              </p>
+            </div>
+          ) : (
+            entries.map((entry) => (
+              <QuestionEntryItem
+                key={entry.attemptId}
+                entry={entry}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/settings/folder-browser-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Dialog,
   DialogContent,
@@ -44,6 +45,9 @@ export function FolderBrowserDialog({
   onSelect,
   initialPath,
 }: FolderBrowserDialogProps) {
+  const t = useTranslations('settings');
+  const tCommon = useTranslations('common');
+  const tSidebar = useTranslations('sidebar');
   const [currentPath, setCurrentPath] = useState(initialPath || '');
   const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
   const [parentPath, setParentPath] = useState<string | null>(null);
@@ -152,7 +156,7 @@ export function FolderBrowserDialog({
   const handleCreate = async () => {
     const trimmedName = createName.trim();
     if (!trimmedName) {
-      toast.error('Name cannot be empty');
+      toast.error(tSidebar('nameCannotBeEmpty'));
       return;
     }
 
@@ -174,12 +178,12 @@ export function FolderBrowserDialog({
         throw new Error(data.error || 'Create failed');
       }
 
-      toast.success('Folder created');
+      toast.success(t('folderCreated'));
       setCreateDialogOpen(false);
       // Refresh directory listing
       fetchDirectory(currentPath);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Create failed');
+      toast.error(err instanceof Error ? err.message : t('createFailed'));
     } finally {
       setIsCreating(false);
     }
@@ -212,7 +216,7 @@ export function FolderBrowserDialog({
 
     const trimmedName = renameName.trim();
     if (!trimmedName) {
-      toast.error('Name cannot be empty');
+      toast.error(tSidebar('nameCannotBeEmpty'));
       return;
     }
 
@@ -238,12 +242,12 @@ export function FolderBrowserDialog({
         throw new Error(data.error || 'Rename failed');
       }
 
-      toast.success('Folder renamed');
+      toast.success(t('folderRenamed'));
       setRenameDialogOpen(false);
       // Refresh directory listing
       fetchDirectory(currentPath);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Rename failed');
+      toast.error(err instanceof Error ? err.message : t('renameFailed'));
     } finally {
       setIsRenaming(false);
     }
@@ -263,9 +267,9 @@ export function FolderBrowserDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[600px] h-[600px] flex flex-col overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Select Folder</DialogTitle>
+          <DialogTitle>{t('selectFolder')}</DialogTitle>
           <DialogDescription>
-            Navigate to and select your project folder
+            {t('navigateAndSelect')}
           </DialogDescription>
         </DialogHeader>
 
@@ -291,7 +295,7 @@ export function FolderBrowserDialog({
             disabled={!parentPath || loading}
           >
             <ChevronUp className="h-4 w-4 mr-1" />
-            Up
+            {t('up')}
           </Button>
           <Button
             variant="outline"
@@ -300,7 +304,7 @@ export function FolderBrowserDialog({
             disabled={loading}
           >
             <Home className="h-4 w-4 mr-1" />
-            Home
+            {t('home')}
           </Button>
           <div className="flex-1" />
           <Button
@@ -310,7 +314,7 @@ export function FolderBrowserDialog({
             disabled={loading || !currentPath}
           >
             <FolderPlus className="h-4 w-4 mr-1" />
-            New Folder
+            {t('createNewFolder')}
           </Button>
         </div>
 
@@ -330,7 +334,7 @@ export function FolderBrowserDialog({
               </div>
             ) : directories.length === 0 ? (
               <div className="flex items-center justify-center h-[200px] text-muted-foreground">
-                No subdirectories
+                {t('noSubdirectories')}
               </div>
             ) : (
               <div className="p-2 space-y-1">
@@ -354,7 +358,7 @@ export function FolderBrowserDialog({
                         e.stopPropagation();
                         openRenameDialog(dir);
                       }}
-                      title="Rename folder"
+                      title={t('renameFolderTitle')}
                     >
                       <Pencil className="h-3.5 w-3.5" />
                     </Button>
@@ -368,10 +372,10 @@ export function FolderBrowserDialog({
         {/* Actions */}
         <div className="flex justify-end gap-2 pt-2">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {tCommon('cancel')}
           </Button>
           <Button onClick={handleSelect} disabled={!currentPath}>
-            Select This Folder
+            {t('selectThisFolder')}
           </Button>
         </div>
       </DialogContent>
@@ -380,14 +384,14 @@ export function FolderBrowserDialog({
       <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Create New Folder</DialogTitle>
+            <DialogTitle>{t('createNewFolder')}</DialogTitle>
             <DialogDescription>
-              Enter a name for the new folder in <strong>{currentPath.split('/').pop() || currentPath}</strong>
+              {t('enterFolderNameIn')} <strong>{currentPath.split('/').pop() || currentPath}</strong>
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="create-folder-name">Folder Name</Label>
+              <Label htmlFor="create-folder-name">{t('folderName')}</Label>
               <Input
                 id="create-folder-name"
                 ref={createInputRef}
@@ -405,10 +409,10 @@ export function FolderBrowserDialog({
               onClick={() => setCreateDialogOpen(false)}
               disabled={isCreating}
             >
-              Cancel
+              {tCommon('cancel')}
             </Button>
             <Button onClick={handleCreate} disabled={isCreating}>
-              {isCreating ? 'Creating...' : 'Create'}
+              {isCreating ? tCommon('creating') : tCommon('create')}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -418,14 +422,14 @@ export function FolderBrowserDialog({
       <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Rename Folder</DialogTitle>
+            <DialogTitle>{t('renameFolder')}</DialogTitle>
             <DialogDescription>
-              Enter a new name for <strong>{renameTarget?.name}</strong>
+              {t('enterNewNameFor')} <strong>{renameTarget?.name}</strong>
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="rename-folder-name">New Name</Label>
+              <Label htmlFor="rename-folder-name">{t('newName')}</Label>
               <Input
                 id="rename-folder-name"
                 ref={renameInputRef}
@@ -443,10 +447,10 @@ export function FolderBrowserDialog({
               onClick={() => setRenameDialogOpen(false)}
               disabled={isRenaming}
             >
-              Cancel
+              {tCommon('cancel')}
             </Button>
             <Button onClick={handleRename} disabled={isRenaming}>
-              {isRenaming ? 'Renaming...' : 'Rename'}
+              {isRenaming ? tCommon('renaming') : tCommon('rename')}
             </Button>
           </DialogFooter>
         </DialogContent>