fix(frontend): persist completed tasks and reinforce types

- Add centralized types file with SessionId, DraftSession, Message types
- Add type guards: isDraftSessionId, isGeneralSession, isTaskSession
- Add session renaming for draft sessions (double-click or pencil icon)
- Fix messages disappearing after task completion
- Add getAllTasks() to include completed tasks in API response
- Add "Claude is working..." indicator during task execution
- Sort tasks by start time descending

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: guzus

frontend/src/app/page.tsx

@@ -8,9 +8,10 @@ import { FileViewer } from "@/components/chat/file-viewer";
 import { SettingsView } from "@/components/chat/settings-view";
 import { ChatHeader } from "@/components/chat/chat-header";
 import { WelcomeSection } from "@/components/chat/welcome-section";
-import { MessageItem, type Message } from "@/components/chat/message-item";
+import { MessageItem } from "@/components/chat/message-item";
 import { TypingIndicator } from "@/components/chat/typing-indicator";
 import { ChatInput } from "@/components/chat/chat-input";
+import { type Message, isDraftSessionId, isGeneralSession } from "@/lib/types";
 
 export default function HomePage() {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -26,10 +27,13 @@ export default function HomePage() {
     try {
       const data = await api.getTasks();
       setTasks(data);
-      // Clear pending message if it now exists in tasks
+      // Clear pending message only if task exists AND has output (response received)
       setPendingMessage((prev) => {
-        if (prev && data.some((t) => t.prompt === prev.content)) {
-          return null;
+        if (prev) {
+          const matchingTask = data.find((t) => t.prompt === prev.content);
+          if (matchingTask && matchingTask.output) {
+            return null;
+          }
         }
         return prev;
       });
@@ -46,17 +50,14 @@ export default function HomePage() {
 
   // Update messages based on active session
   useEffect(() => {
-    // Check if this is a draft session
-    const isDraftSession = typeof activeSession === "string" && activeSession.startsWith("draft-");
-
-    if (isDraftSession) {
+    if (isDraftSessionId(activeSession)) {
       // Draft session - only show pending message if exists
       if (pendingMessage) {
         setMessages([pendingMessage]);
       } else {
         setMessages([]);
       }
-    } else if (activeSession === "general" || !activeSession) {
+    } else if (isGeneralSession(activeSession)) {
       // Show all messages for general session
       const taskMessages: Message[] = tasks.flatMap((task) => {
         const msgs: Message[] = [
@@ -118,9 +119,11 @@ export default function HomePage() {
         }
 
         setMessages(sessionMessages);
-      } else {
-        setMessages([]);
+      } else if (pendingMessage) {
+        // Task not found yet but we have a pending message - show it
+        setMessages([pendingMessage]);
       }
+      // If no task and no pending message, keep previous messages (don't clear)
     }
   }, [activeSession, tasks, pendingMessage]);
 
@@ -142,8 +145,7 @@ export default function HomePage() {
       type: "text",
     };
 
-    // Check if we're in a draft session
-    const isDraftSession = typeof activeSession === "string" && activeSession.startsWith("draft-");
+    const wasDraftSession = isDraftSessionId(activeSession);
 
     setPendingMessage(userMessage);
     setInput("");
@@ -154,8 +156,8 @@ export default function HomePage() {
       const newTask = await api.createTask(input, workingDir, 1);
 
       // If this was a draft session, remove it and switch to the new task
-      if (isDraftSession) {
-        removeDraftSession(activeSession);
+      if (wasDraftSession) {
+        removeDraftSession(activeSession as `draft-${string}`);
         // Switch to the new task's session
         if (newTask?.id) {
           setActiveSession(newTask.id);
@@ -183,10 +185,9 @@ export default function HomePage() {
   const runningTask = tasks.find((t) => t.status === "running");
 
   // Get current session name
-  const isDraftSession = typeof activeSession === "string" && activeSession.startsWith("draft-");
-  const currentSessionName = isDraftSession
+  const currentSessionName = isDraftSessionId(activeSession)
     ? "New Session"
-    : activeSession === "general" || !activeSession
+    : isGeneralSession(activeSession)
     ? "General"
     : tasks.find((t) => t.id === activeSession)?.prompt.slice(0, 30) || "Session";
 
@@ -238,8 +239,18 @@ export default function HomePage() {
             ))}
           </div>
 
+          {/* Running Indicator - show when task is running */}
+          {runningTask && (
+            <div className="px-6 py-2 mx-4">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                <span>Claude is working...</span>
+              </div>
+            </div>
+          )}
+
           {/* Typing Indicator */}
-          {isTyping && <TypingIndicator />}
+          {isTyping && !runningTask && <TypingIndicator />}
         </div>
       </ScrollArea>
 

frontend/src/components/chat/chat-layout.tsx

@@ -5,26 +5,24 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { ServerBar } from "./server-bar";
 import { ChatSidebar } from "./chat-sidebar";
 import { api, type Repository } from "@/lib/api";
+import { type DraftSession, type SessionId, isDraftSessionId } from "@/lib/types";
 
-export interface DraftSession {
-  id: string;
-  name: string;
-  createdAt: string;
-}
+export type { DraftSession };
 
 interface ChatContextType {
   activeWorkspace: string;
   setActiveWorkspace: (id: string) => void;
-  activeSession: string;
-  setActiveSession: (id: string) => void;
+  activeSession: SessionId;
+  setActiveSession: (id: SessionId) => void;
   selectedFile: string | null;
   setSelectedFile: (path: string | null) => void;
   currentRepository: Repository | null;
   showSettings: boolean;
   setShowSettings: (show: boolean) => void;
   draftSessions: DraftSession[];
-  createNewSession: () => string;
-  removeDraftSession: (id: string) => void;
+  createNewSession: () => DraftSession["id"];
+  removeDraftSession: (id: DraftSession["id"]) => void;
+  renameDraftSession: (id: DraftSession["id"], name: string) => void;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -43,15 +41,15 @@ interface ChatLayoutProps {
 
 export function ChatLayout({ children }: ChatLayoutProps) {
   const [activeWorkspace, setActiveWorkspace] = useState<string>("");
-  const [activeSession, setActiveSession] = useState<string>("general");
+  const [activeSession, setActiveSession] = useState<SessionId>("general");
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [currentRepository, setCurrentRepository] = useState<Repository | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [draftSessions, setDraftSessions] = useState<DraftSession[]>([]);
 
   // Create a new draft session
-  const createNewSession = useCallback(() => {
-    const id = `draft-${Date.now()}`;
+  const createNewSession = useCallback((): DraftSession["id"] => {
+    const id = `draft-${Date.now()}` as const;
     const newSession: DraftSession = {
       id,
       name: "New Session",
@@ -65,10 +63,17 @@ export function ChatLayout({ children }: ChatLayoutProps) {
   }, []);
 
   // Remove a draft session (when it becomes a real task)
-  const removeDraftSession = useCallback((id: string) => {
+  const removeDraftSession = useCallback((id: DraftSession["id"]) => {
     setDraftSessions((prev) => prev.filter((s) => s.id !== id));
   }, []);
 
+  // Rename a draft session
+  const renameDraftSession = useCallback((id: DraftSession["id"], name: string) => {
+    setDraftSessions((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, name } : s))
+    );
+  }, []);
+
   // Fetch repository details when workspace changes
   useEffect(() => {
     if (!activeWorkspace) {
@@ -104,6 +109,7 @@ export function ChatLayout({ children }: ChatLayoutProps) {
         draftSessions,
         createNewSession,
         removeDraftSession,
+        renameDraftSession,
       }}
     >
       <TooltipProvider>
@@ -126,6 +132,11 @@ export function ChatLayout({ children }: ChatLayoutProps) {
               setSelectedFile(null);
               setShowSettings(false);
             }}
+            onSessionRename={(sessionId, name) => {
+              if (isDraftSessionId(sessionId)) {
+                renameDraftSession(sessionId, name);
+              }
+            }}
             onFileSelect={setSelectedFile}
             onNewSession={() => {
               createNewSession();

frontend/src/components/chat/chat-sidebar.tsx

@@ -16,6 +16,7 @@ interface ChatSidebarProps {
   activeSession?: string;
   draftSessions?: DraftSession[];
   onSessionSelect?: (sessionId: string) => void;
+  onSessionRename?: (sessionId: string, name: string) => void;
   onFileSelect?: (filePath: string) => void;
   onNewSession?: () => void;
   onShowSettings?: () => void;
@@ -34,6 +35,7 @@ export function ChatSidebar({
   activeSession,
   draftSessions = [],
   onSessionSelect,
+  onSessionRename,
   onFileSelect,
   onNewSession,
   onShowSettings,
@@ -187,6 +189,7 @@ export function ChatSidebar({
             sessions={sessions}
             activeSession={activeSession}
             onSessionSelect={onSessionSelect}
+            onSessionRename={onSessionRename}
             onNewSession={onNewSession}
           />
         ) : (

frontend/src/components/chat/message-item.tsx

@@ -1,21 +1,10 @@
 "use client";
 
-import { cn } from "@/lib/utils";
-import { formatDate } from "@/lib/utils";
+import { cn, formatDate } from "@/lib/utils";
 import { Bot, User, Terminal, FileCode, CheckCircle2 } from "lucide-react";
+import { type Message } from "@/lib/types";
 
-export interface Message {
-  id: string;
-  author: {
-    name: string;
-    avatar?: string;
-    isBot?: boolean;
-  };
-  content: string;
-  timestamp: string;
-  type?: "text" | "code" | "action";
-  actionType?: "command" | "file_change" | "tool";
-}
+export type { Message };
 
 interface MessageItemProps {
   message: Message;

frontend/src/components/chat/sidebar/chat-tab.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { Plus, MessageCircle, Play, CheckCircle2, Circle } from "lucide-react";
+import { Plus, MessageCircle, Play, CheckCircle2, Circle, Pencil } from "lucide-react";
+import { isDraftSessionId } from "@/lib/types";
 
 export interface Session {
   id: string;
@@ -15,10 +17,42 @@ interface ChatTabProps {
   sessions: Session[];
   activeSession?: string;
   onSessionSelect?: (sessionId: string) => void;
+  onSessionRename?: (sessionId: string, name: string) => void;
   onNewSession?: () => void;
 }
 
-export function ChatTab({ sessions, activeSession, onSessionSelect, onNewSession }: ChatTabProps) {
+export function ChatTab({ sessions, activeSession, onSessionSelect, onSessionRename, onNewSession }: ChatTabProps) {
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when editing starts
+  useEffect(() => {
+    if (editingSessionId && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingSessionId]);
+
+  const startEditing = (session: Session) => {
+    if (isDraftSessionId(session.id)) {
+      setEditingSessionId(session.id);
+      setEditingName(session.name);
+    }
+  };
+
+  const finishEditing = () => {
+    if (editingSessionId && editingName.trim()) {
+      onSessionRename?.(editingSessionId, editingName.trim());
+    }
+    setEditingSessionId(null);
+    setEditingName("");
+  };
+
+  const cancelEditing = () => {
+    setEditingSessionId(null);
+    setEditingName("");
+  };
   const getStatusIcon = (status: Session["status"]) => {
     switch (status) {
       case "running":
@@ -64,6 +98,9 @@ export function ChatTab({ sessions, activeSession, onSessionSelect, onNewSession
         ) : (
           sessions.map((session) => {
             const isActive = activeSession === session.id || (!activeSession && session.id === "general");
+            const isEditing = editingSessionId === session.id;
+            const isRenamable = isDraftSessionId(session.id);
+
             return (
               <div
                 key={session.id}
@@ -73,11 +110,52 @@ export function ChatTab({ sessions, activeSession, onSessionSelect, onNewSession
                     ? "bg-primary/10 text-primary"
                     : "text-muted-foreground hover:bg-secondary hover:text-foreground"
                 )}
-                onClick={() => onSessionSelect?.(session.id)}
+                onClick={() => !isEditing && onSessionSelect?.(session.id)}
               >
                 {getStatusIcon(session.status)}
-                <MessageCircle className="w-3.5 h-3.5 opacity-60" />
-                <span className="flex-1 text-sm truncate">{session.name}</span>
+                <MessageCircle className="w-3.5 h-3.5 opacity-60 flex-shrink-0" />
+                {isEditing ? (
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={editingName}
+                    onChange={(e) => setEditingName(e.target.value)}
+                    onBlur={finishEditing}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        finishEditing();
+                      } else if (e.key === "Escape") {
+                        cancelEditing();
+                      }
+                    }}
+                    className="flex-1 text-sm bg-background border border-border rounded px-1 py-0.5 outline-none focus:ring-1 focus:ring-primary"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                ) : (
+                  <>
+                    <span
+                      className="flex-1 text-sm truncate"
+                      onDoubleClick={(e) => {
+                        e.stopPropagation();
+                        startEditing(session);
+                      }}
+                    >
+                      {session.name}
+                    </span>
+                    {isRenamable && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startEditing(session);
+                        }}
+                        className="opacity-0 group-hover:opacity-100 w-5 h-5 flex items-center justify-center rounded hover:bg-secondary/80 text-muted-foreground hover:text-foreground transition-opacity"
+                      >
+                        <Pencil className="w-3 h-3" />
+                      </button>
+                    )}
+                  </>
+                )}
               </div>
             );
           })