claude-ws 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-ws",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "description": "A beautifully crafted workspace interface for Claude Code with real-time streaming and local SQLite database",
   "keywords": [
@@ -16,6 +16,7 @@
     "sqlite"
   ],
   "license": "MIT",
+  "author": "Claude Workspace",
   "repository": {
     "type": "git",
     "url": "https://github.com/Claude-Workspace/claude-ws.git"

package/server.ts

@@ -26,12 +26,31 @@ const dev = process.env.NODE_ENV !== 'production';
 const hostname = 'localhost';
 const port = parseInt(process.env.PORT || '8556', 10);
 
+// API authentication key (optional)
+const API_ACCESS_KEY = process.env.API_ACCESS_KEY;
+
 const app = next({ dev, hostname, port, turbopack: false });
 const handle = app.getRequestHandler();
 
 app.prepare().then(async () => {
   const httpServer = createServer((req, res) => {
     const parsedUrl = parse(req.url!, true);
+    const pathname = parsedUrl.pathname || '';
+
+    // API authentication check
+    const isApiRoute = pathname.startsWith('/api/');
+    const isVerifyEndpoint = pathname === '/api/auth/verify';
+
+    if (isApiRoute && !isVerifyEndpoint && API_ACCESS_KEY && API_ACCESS_KEY.length > 0) {
+      const providedKey = req.headers['x-api-key'];
+
+      if (!providedKey || providedKey !== API_ACCESS_KEY) {
+        res.writeHead(401, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Unauthorized', message: 'Valid API key required' }));
+        return;
+      }
+    }
+
     handle(req, res, parsedUrl);
   });
 

package/src/app/[locale]/page.tsx

@@ -11,7 +11,7 @@ import { SettingsPage } from '@/components/settings/settings-page';
 import { SetupDialog } from '@/components/settings/setup-dialog';
 import { SidebarPanel, FileTabsPanel, DiffTabsPanel } from '@/components/sidebar';
 import { RightSidebar } from '@/components/right-sidebar';
-import { ApiKeyProvider, ApiKeyDialog, useApiKeyCheck } from '@/components/auth/api-key-dialog';
+import { ApiKeyProvider } from '@/components/auth/api-key-dialog';
 import { PluginList } from '@/components/agent-factory/plugin-list';
 import { useProjectStore } from '@/stores/project-store';
 import { useTaskStore } from '@/stores/task-store';
@@ -23,10 +23,8 @@ import { useSettingsUIStore } from '@/stores/settings-ui-store';
 function KanbanApp() {
   const [createTaskOpen, setCreateTaskOpen] = useState(false);
   const [setupOpen, setSetupOpen] = useState(false);
-  const [apiKeyRefresh, setApiKeyRefresh] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
 
-  const { needsApiKey } = useApiKeyCheck(apiKeyRefresh);
   const { open: agentFactoryOpen, setOpen: setAgentFactoryOpen } = useAgentFactoryUIStore();
   const { open: settingsOpen, setOpen: setSettingsOpen } = useSettingsUIStore();
 
@@ -228,19 +226,6 @@ function KanbanApp() {
         onTaskCreated={handleTaskCreated}
       />
       <SetupDialog open={setupOpen || autoShowSetup} onOpenChange={setSetupOpen} />
-      <ApiKeyDialog
-        open={needsApiKey}
-        onOpenChange={(open) => {
-          // Allow closing only if not needed
-          if (!open && !needsApiKey) return;
-        }}
-        onSuccess={() => {
-          // Trigger refresh to re-check API key status
-          setApiKeyRefresh(prev => prev + 1);
-          // Refetch projects after API key is set
-          fetchProjects();
-        }}
-      />
 
       {/* Agent Factory Dialog */}
       {agentFactoryOpen && (

package/src/app/api/tasks/[id]/route.ts

@@ -1,6 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { db, schema } from '@/lib/db';
 import { eq } from 'drizzle-orm';
+import { rm } from 'fs/promises';
+import { join } from 'path';
+import { UPLOADS_DIR } from '@/lib/file-utils';
 import type { TaskStatus } from '@/types';
 
 // GET /api/tasks/[id] - Get a single task
@@ -106,7 +109,7 @@ export async function PATCH(
   return PUT(request, { params });
 }
 
-// DELETE /api/tasks/[id] - Delete a task
+// DELETE /api/tasks/[id] - Delete a task and its uploaded files
 export async function DELETE(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> }
@@ -114,6 +117,22 @@ export async function DELETE(
   try {
     const { id } = await params;
 
+    // Query attempt IDs to clean up upload directories before DB cascade
+    const attempts = await db
+      .select({ id: schema.attempts.id })
+      .from(schema.attempts)
+      .where(eq(schema.attempts.taskId, id));
+
+    // Delete physical upload files for each attempt
+    for (const attempt of attempts) {
+      const attemptDir = join(UPLOADS_DIR, attempt.id);
+      try {
+        await rm(attemptDir, { recursive: true, force: true });
+      } catch {
+        // Directory may not exist if no files were uploaded
+      }
+    }
+
     const result = await db
       .delete(schema.tasks)
       .where(eq(schema.tasks.id, id));

package/src/components/auth/api-key-dialog.tsx

@@ -273,11 +273,38 @@ function headersToObject(headers: HeadersInit): Record<string, string> {
   return headers as Record<string, string>;
 }
 
+// Event name for triggering API key dialog from fetch interceptor
+const API_KEY_REQUIRED_EVENT = 'claude-kanban:api-key-required';
+
 /**
- * Provider that patches global fetch to include API key
+ * Dispatch event to trigger API key dialog
+ */
+function dispatchApiKeyRequired(): void {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent(API_KEY_REQUIRED_EVENT));
+  }
+}
+
+/**
+ * Provider that patches global fetch to include API key and handle 401 responses
  * Must be a client component and wrap the app
  */
 export function ApiKeyProvider({ children }: { children: React.ReactNode }) {
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
+  const [refreshCounter, setRefreshCounter] = useState(0);
+
+  // Listen for API key required events from fetch interceptor
+  useEffect(() => {
+    const handleApiKeyRequired = () => {
+      setShowAuthDialog(true);
+    };
+
+    window.addEventListener(API_KEY_REQUIRED_EVENT, handleApiKeyRequired);
+    return () => {
+      window.removeEventListener(API_KEY_REQUIRED_EVENT, handleApiKeyRequired);
+    };
+  }, []);
+
   // Patch fetch immediately on render (synchronously)
   // This ensures it's available before any useEffect in child components runs
   if (typeof window !== 'undefined' && !window.fetch._apiKeyPatched) {
@@ -286,33 +313,64 @@ export function ApiKeyProvider({ children }: { children: React.ReactNode }) {
     window.fetch = async (url, options) => {
       const apiKey = getStoredApiKey();
 
-      // If no API key stored, just pass through
-      if (!apiKey) {
-        return originalFetch(url, options);
-      }
-
-      // Build new headers object with API key
+      // Build new headers object with API key if available
       const existingHeaders = options?.headers
         ? headersToObject(options.headers)
         : {};
 
       const newHeaders: Record<string, string> = {
         ...existingHeaders,
-        'x-api-key': apiKey,
       };
 
+      // Add API key if stored
+      if (apiKey) {
+        newHeaders['x-api-key'] = apiKey;
+      }
+
       // Create new options with merged headers
       const newOptions: RequestInit = {
         ...options,
         headers: newHeaders,
       };
 
-      return originalFetch(url, newOptions);
+      const response = await originalFetch(url, newOptions);
+
+      // Check for 401 on API routes (except auth/verify endpoint)
+      const urlString = typeof url === 'string' ? url : url.toString();
+      const isApiRoute = urlString.includes('/api/');
+      const isVerifyEndpoint = urlString.includes('/api/auth/verify');
+
+      if (response.status === 401 && isApiRoute && !isVerifyEndpoint) {
+        // Clear stored key if it's invalid
+        if (apiKey) {
+          clearStoredApiKey();
+        }
+        // Trigger API key dialog
+        dispatchApiKeyRequired();
+      }
+
+      return response;
     };
 
     // Mark as patched to avoid double-patching
     window.fetch._apiKeyPatched = true;
   }
 
-  return <>{children}</>;
+  const handleAuthSuccess = () => {
+    setShowAuthDialog(false);
+    setRefreshCounter((prev) => prev + 1);
+    // Reload the page to refetch all data with new API key
+    window.location.reload();
+  };
+
+  return (
+    <>
+      {children}
+      <ApiKeyDialog
+        open={showAuthDialog}
+        onOpenChange={setShowAuthDialog}
+        onSuccess={handleAuthSuccess}
+      />
+    </>
+  );
 }

package/src/components/editor/markdown-file-viewer.tsx

@@ -1,119 +1,227 @@
 'use client';
 
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { cn } from '@/lib/utils';
 import { CodeBlock } from '@/components/claude/code-block';
+import { ExternalLink, FileText, Folder } from 'lucide-react';
 
 interface MarkdownFileViewerProps {
   content: string;
   className?: string;
+  /** Current file path (used to resolve relative links) */
+  currentFilePath?: string;
+  /** Callback when a local file link is clicked */
+  onLocalFileClick?: (resolvedPath: string) => void;
 }
 
-// Markdown rendering components optimized for file viewing
-const markdownComponents = {
-  h1: ({ children }: any) => (
-    <h1 className="text-2xl font-bold mt-8 mb-4 pb-2 border-b first:mt-0">{children}</h1>
-  ),
-  h2: ({ children }: any) => (
-    <h2 className="text-xl font-semibold mt-6 mb-3 pb-1.5 border-b first:mt-0">{children}</h2>
-  ),
-  h3: ({ children }: any) => (
-    <h3 className="text-lg font-semibold mt-5 mb-2 first:mt-0">{children}</h3>
-  ),
-  h4: ({ children }: any) => (
-    <h4 className="text-base font-semibold mt-4 mb-2 first:mt-0">{children}</h4>
-  ),
-  p: ({ children }: any) => (
-    <p className="mb-4 last:mb-0 leading-7">{children}</p>
-  ),
-  ul: ({ children }: any) => (
-    <ul className="list-disc list-outside ml-6 mb-4 space-y-1.5">{children}</ul>
-  ),
-  ol: ({ children }: any) => (
-    <ol className="list-decimal list-outside ml-6 mb-4 space-y-1.5">{children}</ol>
-  ),
-  li: ({ children }: any) => (
-    <li className="leading-7">{children}</li>
-  ),
-  code({ inline, className, children, ...props }: any) {
-    const match = /language-(\w+)/.exec(className || '');
-    let codeString = '';
-    if (Array.isArray(children)) {
-      codeString = children.map(child => (typeof child === 'string' ? child : '')).join('');
-    } else if (typeof children === 'string') {
-      codeString = children;
-    } else if (children && typeof children === 'object' && 'props' in children) {
-      codeString = String(children.props?.children || '');
-    } else {
-      codeString = String(children || '');
-    }
-    codeString = codeString.replace(/\n$/, '');
-    const isMultiLine = codeString.includes('\n');
-    if (!inline && (match || isMultiLine)) {
-      return <CodeBlock code={codeString} language={match?.[1]} />;
+/**
+ * Check if a URL is an external/absolute URL (http, https, mailto, tel, etc.)
+ * Returns true for external links, false for local file references
+ */
+function isExternalUrl(url: string): boolean {
+  if (!url) return false;
+  // Match common external protocols
+  const externalProtocols = /^(https?:\/\/|mailto:|tel:|ftp:\/\/|file:\/\/|data:|javascript:|#)/i;
+  return externalProtocols.test(url);
+}
+
+/**
+ * Resolve a relative path from the current file's directory
+ * @param currentFilePath - The path of the current markdown file
+ * @param relativePath - The relative path from the link
+ * @returns The resolved absolute path
+ */
+function resolveRelativePath(currentFilePath: string, relativePath: string): string {
+  // Get the directory of the current file
+  const lastSlashIndex = currentFilePath.lastIndexOf('/');
+  const currentDir = lastSlashIndex >= 0 ? currentFilePath.substring(0, lastSlashIndex) : '';
+
+  // Handle paths starting with ./
+  if (relativePath.startsWith('./')) {
+    relativePath = relativePath.substring(2);
+  }
+
+  // Split paths into segments
+  const baseParts = currentDir.split('/').filter(Boolean);
+  const relativeParts = relativePath.split('/').filter(Boolean);
+
+  // Process each segment of the relative path
+  for (const part of relativeParts) {
+    if (part === '..') {
+      // Go up one directory
+      baseParts.pop();
+    } else if (part !== '.') {
+      // Add the segment
+      baseParts.push(part);
     }
-    return (
-      <code className="px-1.5 py-0.5 bg-muted rounded text-sm font-mono" {...props}>
+  }
+
+  return baseParts.join('/');
+}
+
+/**
+ * Create markdown components with access to file link handling
+ */
+function createMarkdownComponents(
+  currentFilePath: string | undefined,
+  onLocalFileClick: ((resolvedPath: string) => void) | undefined
+) {
+  return {
+    h1: ({ children }: any) => (
+      <h1 className="text-2xl font-bold mt-8 mb-4 pb-2 border-b first:mt-0">{children}</h1>
+    ),
+    h2: ({ children }: any) => (
+      <h2 className="text-xl font-semibold mt-6 mb-3 pb-1.5 border-b first:mt-0">{children}</h2>
+    ),
+    h3: ({ children }: any) => (
+      <h3 className="text-lg font-semibold mt-5 mb-2 first:mt-0">{children}</h3>
+    ),
+    h4: ({ children }: any) => (
+      <h4 className="text-base font-semibold mt-4 mb-2 first:mt-0">{children}</h4>
+    ),
+    p: ({ children }: any) => (
+      <p className="mb-4 last:mb-0 leading-7">{children}</p>
+    ),
+    ul: ({ children }: any) => (
+      <ul className="list-disc list-outside ml-6 mb-4 space-y-1.5">{children}</ul>
+    ),
+    ol: ({ children }: any) => (
+      <ol className="list-decimal list-outside ml-6 mb-4 space-y-1.5">{children}</ol>
+    ),
+    li: ({ children }: any) => (
+      <li className="leading-7">{children}</li>
+    ),
+    code({ inline, className, children, ...props }: any) {
+      const match = /language-(\w+)/.exec(className || '');
+      let codeString = '';
+      if (Array.isArray(children)) {
+        codeString = children.map(child => (typeof child === 'string' ? child : '')).join('');
+      } else if (typeof children === 'string') {
+        codeString = children;
+      } else if (children && typeof children === 'object' && 'props' in children) {
+        codeString = String(children.props?.children || '');
+      } else {
+        codeString = String(children || '');
+      }
+      codeString = codeString.replace(/\n$/, '');
+      const isMultiLine = codeString.includes('\n');
+      if (!inline && (match || isMultiLine)) {
+        return <CodeBlock code={codeString} language={match?.[1]} />;
+      }
+      return (
+        <code className="px-1.5 py-0.5 bg-muted rounded text-sm font-mono" {...props}>
+          {children}
+        </code>
+      );
+    },
+    pre: ({ children }: any) => (
+      <div className="my-4 w-full max-w-full overflow-x-auto">{children}</div>
+    ),
+    strong: ({ children }: any) => (
+      <strong className="font-semibold">{children}</strong>
+    ),
+    em: ({ children }: any) => (
+      <em className="italic">{children}</em>
+    ),
+    // Link component with local file handling
+    a: ({ href, children }: any) => {
+      const hrefString = href || '';
+
+      // External links: open in new tab
+      if (isExternalUrl(hrefString)) {
+        return (
+          <a
+            href={hrefString}
+            className="text-primary underline hover:no-underline inline-flex items-center gap-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {children}
+            <ExternalLink className="size-3 opacity-50" />
+          </a>
+        );
+      }
+
+      // Determine if path looks like a folder (ends with / or no extension)
+      const hasExtension = hrefString.includes('.') && !hrefString.endsWith('/');
+      const looksLikeFolder = hrefString.endsWith('/') || !hasExtension;
+      const Icon = looksLikeFolder ? Folder : FileText;
+
+      // Local file links: handle with callback or show as non-interactive
+      if (currentFilePath && onLocalFileClick) {
+        const resolvedPath = resolveRelativePath(currentFilePath, hrefString);
+        return (
+          <button
+            type="button"
+            onClick={() => onLocalFileClick(resolvedPath)}
+            className="text-primary underline hover:no-underline cursor-pointer inline-flex items-center gap-1 bg-transparent border-none p-0 font-inherit text-inherit"
+            title={looksLikeFolder ? `Navigate to ${resolvedPath}` : `Open ${resolvedPath}`}
+          >
+            <Icon className="size-3 opacity-50" />
+            {children}
+          </button>
+        );
+      }
+
+      // Fallback: render as plain text with appropriate icon (no handler available)
+      return (
+        <span className="text-muted-foreground inline-flex items-center gap-1" title={hrefString}>
+          <Icon className="size-3 opacity-50" />
+          {children}
+        </span>
+      );
+    },
+    blockquote: ({ children }: any) => (
+      <blockquote className="border-l-4 border-muted-foreground/30 pl-4 my-4 text-muted-foreground italic">
         {children}
-      </code>
-    );
-  },
-  pre: ({ children }: any) => (
-    <div className="my-4 w-full max-w-full overflow-x-auto">{children}</div>
-  ),
-  strong: ({ children }: any) => (
-    <strong className="font-semibold">{children}</strong>
-  ),
-  em: ({ children }: any) => (
-    <em className="italic">{children}</em>
-  ),
-  a: ({ href, children }: any) => (
-    <a href={href} className="text-primary underline hover:no-underline" target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  ),
-  blockquote: ({ children }: any) => (
-    <blockquote className="border-l-4 border-muted-foreground/30 pl-4 my-4 text-muted-foreground italic">
-      {children}
-    </blockquote>
-  ),
-  table: ({ children }: any) => (
-    <div className="overflow-x-auto my-4">
-      <table className="min-w-full text-sm border-collapse border border-border">{children}</table>
-    </div>
-  ),
-  thead: ({ children }: any) => (
-    <thead className="bg-muted">{children}</thead>
-  ),
-  th: ({ children }: any) => (
-    <th className="border border-border px-3 py-2 font-medium text-left">{children}</th>
-  ),
-  td: ({ children }: any) => (
-    <td className="border border-border px-3 py-2">{children}</td>
-  ),
-  hr: () => <hr className="my-6 border-border" />,
-  img: ({ src, alt }: any) => (
-    <img src={src} alt={alt || ''} className="max-w-full h-auto my-4 rounded-lg" />
-  ),
-  // Task list items (GFM)
-  input: ({ checked, ...props }: any) => (
-    <input
-      type="checkbox"
-      checked={checked}
-      disabled
-      className="mr-2 pointer-events-none"
-      {...props}
-    />
-  ),
-};
+      </blockquote>
+    ),
+    table: ({ children }: any) => (
+      <div className="overflow-x-auto my-4">
+        <table className="min-w-full text-sm border-collapse border border-border">{children}</table>
+      </div>
+    ),
+    thead: ({ children }: any) => (
+      <thead className="bg-muted">{children}</thead>
+    ),
+    th: ({ children }: any) => (
+      <th className="border border-border px-3 py-2 font-medium text-left">{children}</th>
+    ),
+    td: ({ children }: any) => (
+      <td className="border border-border px-3 py-2">{children}</td>
+    ),
+    hr: () => <hr className="my-6 border-border" />,
+    img: ({ src, alt }: any) => (
+      <img src={src} alt={alt || ''} className="max-w-full h-auto my-4 rounded-lg" />
+    ),
+    // Task list items (GFM)
+    input: ({ checked, ...props }: any) => (
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled
+        className="mr-2 pointer-events-none"
+        {...props}
+      />
+    ),
+  };
+}
 
 // Memoized markdown viewer for file content
 export const MarkdownFileViewer = memo(function MarkdownFileViewer({
   content,
-  className
+  className,
+  currentFilePath,
+  onLocalFileClick
 }: MarkdownFileViewerProps) {
+  // Memoize markdown components to avoid recreating on every render
+  const markdownComponents = useMemo(
+    () => createMarkdownComponents(currentFilePath, onLocalFileClick),
+    [currentFilePath, onLocalFileClick]
+  );
+
   return (
     <div className={cn('h-full overflow-auto', className)}>
       <div className="max-w-4xl mx-auto px-6 py-8 prose-sm">

package/src/components/kanban/create-task-dialog.tsx

@@ -184,7 +184,7 @@ export function CreateTaskDialog({ open, onOpenChange, onTaskCreated }: CreateTa
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-[500px] overflow-hidden" onKeyDown={handleKeyDown}>
+      <DialogContent className="sm:max-w-[500px] overflow-visible" onKeyDown={handleKeyDown}>
         <DialogHeader>
           <DialogTitle>{t('createNewTask')}</DialogTitle>
           <DialogDescription>

package/src/components/right-sidebar.tsx

@@ -2,19 +2,28 @@
 
 import { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
-import { Plus, Settings, Package, X, Sun, Moon } from 'lucide-react';
+import { Plus, Settings, Package, X, Sun, Moon, LogOut } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useRightSidebarStore } from '@/stores/right-sidebar-store';
 import { useAgentFactoryUIStore } from '@/stores/agent-factory-ui-store';
 import { useSettingsUIStore } from '@/stores/settings-ui-store';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
+import { clearStoredApiKey } from '@/components/auth/api-key-dialog';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { useTranslations } from 'next-intl';
 
 interface RightSidebarProps {
@@ -30,6 +39,7 @@ export function RightSidebar({ projectId, onCreateTask, className }: RightSideba
   const { setOpen: setSettingsOpen } = useSettingsUIStore();
   const { theme, setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
 
   // Prevent hydration mismatch
   useEffect(() => {
@@ -40,6 +50,20 @@ export function RightSidebar({ projectId, onCreateTask, className }: RightSideba
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   };
 
+  const handleLogout = () => {
+    clearStoredApiKey();
+    window.location.reload();
+  };
+
+  const handleLogoutClick = () => {
+    setShowLogoutConfirm(true);
+  };
+
+  const handleLogoutConfirm = () => {
+    setShowLogoutConfirm(false);
+    handleLogout();
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -136,7 +160,39 @@ export function RightSidebar({ projectId, onCreateTask, className }: RightSideba
         <div className="pl-6">
           <LanguageSwitcher />
         </div>
+
+        {/* Logout button - under language switcher */}
+        <div className="pl-6">
+          <Button
+            variant="outline"
+            onClick={handleLogoutClick}
+            className="w-full justify-start gap-2 text-destructive hover:text-destructive"
+          >
+            <LogOut className="h-4 w-4" />
+            {t('logout')}
+          </Button>
+        </div>
       </div>
+
+      {/* Logout Confirmation Dialog */}
+      <Dialog open={showLogoutConfirm} onOpenChange={setShowLogoutConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('logoutConfirmTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('logoutConfirmMessage')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowLogoutConfirm(false)}>
+              {t('cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleLogoutConfirm}>
+              {t('logout')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

package/src/components/sidebar/file-browser/file-tab-content.tsx

@@ -11,6 +11,7 @@ import { useActiveProject } from '@/hooks/use-active-project';
 import { useTaskStore } from '@/stores/task-store';
 import { useContextMentionStore } from '@/stores/context-mention-store';
 import { useProjectStore } from '@/stores/project-store';
+import { waitForElement } from '@/lib/utils';
 
 interface FileContent {
   content: string | null;
@@ -285,7 +286,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
     if (matchPositions[nextMatch - 1]) {
       setEditorPosition(matchPositions[nextMatch - 1]);
     }
-    setTimeout(() => searchInputRef.current?.focus(), 0);
+    requestAnimationFrame(() => searchInputRef.current?.focus());
   }, [searchQuery, totalMatches, currentMatch, matchPositions]);
 
   const handlePrevMatch = useCallback(() => {
@@ -295,7 +296,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
     if (matchPositions[prevMatch - 1]) {
       setEditorPosition(matchPositions[prevMatch - 1]);
     }
-    setTimeout(() => searchInputRef.current?.focus(), 0);
+    requestAnimationFrame(() => searchInputRef.current?.focus());
   }, [searchQuery, totalMatches, currentMatch, matchPositions]);
 
   const closeSearch = useCallback(() => {
@@ -685,7 +686,75 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 <span className="text-xs mt-1">{formatFileSize(content.size)}</span>
               </div>
             ) : isMarkdownFile && viewMode === 'preview' ? (
-              <MarkdownFileViewer content={editedContent} className="h-full" />
+              <MarkdownFileViewer
+                content={editedContent}
+                className="h-full"
+                currentFilePath={filePath}
+                onLocalFileClick={async (resolvedPath) => {
+                  const store = useSidebarStore.getState();
+
+                  /**
+                   * Helper to navigate file explorer to a folder path
+                   * Opens sidebar, switches to files tab, expands folders, sets selection
+                   */
+                  const navigateToFolder = async (folderPath: string) => {
+                    // 1. Open sidebar if not open
+                    if (!store.isOpen) {
+                      store.setIsOpen(true);
+                    }
+
+                    // 2. Switch to files tab
+                    store.setActiveTab('files');
+
+                    // 3. Expand all parent folders and target folder
+                    const pathParts = folderPath.replace(/\/$/, '').split('/').filter(Boolean);
+                    let currentPath = '';
+                    for (const part of pathParts) {
+                      currentPath = currentPath ? `${currentPath}/${part}` : part;
+                      store.expandFolder(currentPath);
+                    }
+
+                    // 4. Set selected file to highlight and trigger scroll
+                    store.setSelectedFile(folderPath.replace(/\/$/, ''));
+
+                    // 5. Wait for element to appear in DOM, then scroll into view
+                    const element = await waitForElement(`[data-path="${folderPath.replace(/\/$/, '')}"]`);
+                    element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                  };
+
+                  // Check if path looks like a folder (ends with / or no extension)
+                  const hasExtension = resolvedPath.includes('.') && !resolvedPath.endsWith('/');
+                  const looksLikeFolder = resolvedPath.endsWith('/') || !hasExtension;
+
+                  if (looksLikeFolder) {
+                    navigateToFolder(resolvedPath);
+                  } else {
+                    // Try to open as a file
+                    try {
+                      const res = await fetch(
+                        `/api/files/content?basePath=${encodeURIComponent(activeProject?.path || '')}&path=${encodeURIComponent(resolvedPath)}`
+                      );
+
+                      if (res.ok) {
+                        // It's a valid file - open it in a new tab
+                        store.openTab(resolvedPath);
+                      } else {
+                        const data = await res.json();
+                        if (data.error === 'Path is not a file' || res.status === 400) {
+                          // It's a directory - navigate to it
+                          navigateToFolder(resolvedPath);
+                        } else {
+                          // Other error - try to open anyway
+                          store.openTab(resolvedPath);
+                        }
+                      }
+                    } catch {
+                      // On error, just try to open the tab
+                      store.openTab(resolvedPath);
+                    }
+                  }
+                }}
+              />
             ) : (
               <CodeEditorWithInlineEdit
                 value={editedContent}

package/src/components/sidebar/file-browser/file-tree-item.tsx

@@ -177,6 +177,7 @@ export function FileTreeItem({
   return (
     <DropdownMenu open={contextMenuOpen} onOpenChange={setContextMenuOpen}>
       <div
+        data-path={entry.path}
         className={cn(
           'flex items-center gap-1 py-1 px-2 cursor-pointer rounded-sm text-sm relative group',
           // Hover: only apply when not selected

package/src/lib/session-manager.ts

@@ -29,15 +29,18 @@ export class SessionManager {
 
   /**
    * Get the last session ID for a task (for resume)
-   * Returns sessions from completed or cancelled attempts
-   * Cancelled attempts have valid sessions - user just stopped the work
-   * Only 'failed' attempts (errors) may have corrupted sessions
+   * Returns sessions from completed, cancelled, OR failed attempts
+   * Session IDs are captured early in the SDK stream (from system message),
+   * so even failed attempts typically have valid sessions.
+   * Including failed attempts preserves conversation context on retry —
+   * without this, retrying after an API error (400/429/500) would start
+   * a fresh session and Claude would lose all prior context.
    */
   async getLastSessionId(taskId: string): Promise<string | null> {
     const lastResumableAttempt = await db.query.attempts.findFirst({
       where: and(
         eq(schema.attempts.taskId, taskId),
-        inArray(schema.attempts.status, ['completed', 'cancelled'])
+        inArray(schema.attempts.status, ['completed', 'cancelled', 'failed'])
       ),
       orderBy: [desc(schema.attempts.createdAt)],
     });

package/src/lib/utils.ts

@@ -4,3 +4,42 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Wait for an element to appear in the DOM using MutationObserver.
+ * More reliable than setTimeout for waiting on dynamic content.
+ * @param selector - CSS selector for the target element
+ * @param timeout - Max wait time in ms (default: 5000)
+ * @returns Promise resolving to the element, or null if timeout
+ */
+export function waitForElement<T extends Element = Element>(
+  selector: string,
+  timeout = 5000
+): Promise<T | null> {
+  return new Promise((resolve) => {
+    // Check if element already exists
+    const existing = document.querySelector<T>(selector);
+    if (existing) {
+      return resolve(existing);
+    }
+
+    const observer = new MutationObserver(() => {
+      const element = document.querySelector<T>(selector);
+      if (element) {
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Timeout fallback
+    setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, timeout);
+  });
+}