claude-ws 0.2.0 → 0.3.0

package/bin/claudekanban.js

@@ -14,6 +14,26 @@ const path = require('path');
 const fs = require('fs');
 const os = require('os');
 
+const isWindows = process.platform === 'win32';
+
+/**
+ * Convert Windows backslash paths to forward slashes for safe shell embedding.
+ * On Unix, this is a no-op since paths already use forward slashes.
+ */
+function toShellSafePath(p) {
+  return isWindows ? p.replace(/\\/g, '/') : p;
+}
+
+/**
+ * Cross-platform command existence check.
+ * Uses 'where' on Windows, 'which' on Unix.
+ */
+function whichCommand(cmd) {
+  const { execSync } = require('child_process');
+  const checker = isWindows ? 'where' : 'which';
+  execSync(`${checker} ${cmd}`, { stdio: 'ignore' });
+}
+
 // Load environment variables
 require('dotenv').config({ path: path.join(__dirname, '..', '.env') });
 
@@ -80,8 +100,7 @@ async function runMigrations() {
     if (!tsxCmd) {
       // Try global tsx
       try {
-        const { execSync } = require('child_process');
-        execSync('which tsx', { stdio: 'ignore' });
+        whichCommand('tsx');
         tsxCmd = 'tsx';
       } catch {
         throw new Error('tsx not found - this should not happen after dependency installation');
@@ -89,9 +108,13 @@ async function runMigrations() {
     }
 
     const { execSync } = require('child_process');
-    execSync(`"${tsxCmd}" -e "require('${dbPath}'); console.log('[Claude Workspace] ✓ Database ready');"`, {
+    // Use forward slashes in shell-embedded paths to avoid Windows backslash escape issues
+    const safeDbPath = toShellSafePath(dbPath);
+    const safeTsxCmd = toShellSafePath(tsxCmd);
+    execSync(`"${safeTsxCmd}" -e "require('${safeDbPath}'); console.log('[Claude Workspace] ✓ Database ready');"`, {
       cwd: packageRoot,
       stdio: 'inherit',
+      shell: true,
       env: { ...process.env }
     });
 
@@ -119,7 +142,7 @@ async function startServer() {
 
     let installCmd = 'npm install --production=false';
     try {
-      execSync('which pnpm', { stdio: 'ignore' });
+      whichCommand('pnpm');
       installCmd = 'pnpm install --no-frozen-lockfile';
     } catch {
       // pnpm not found, use npm
@@ -172,9 +195,10 @@ async function startServer() {
     const { execSync } = require('child_process');
     try {
       const nextBin = path.join(packageRoot, 'node_modules', '.bin', 'next');
+      const safeNextBin = toShellSafePath(nextBin);
 
       // Run next build using local binary directly
-      execSync(`"${nextBin}" build`, {
+      execSync(`"${safeNextBin}" build`, {
         cwd: packageRoot,
         stdio: 'inherit',
         shell: true,
@@ -218,8 +242,7 @@ async function startServer() {
   if (!tsxCmd) {
     try {
       // Try using tsx from global or local pnpm/npm
-      const { execSync } = require('child_process');
-      execSync('which tsx', { stdio: 'ignore' });
+      whichCommand('tsx');
       tsxCmd = 'tsx';
     } catch {
       console.error('[Claude Workspace] Error: tsx not found');

package/next.config.ts

@@ -1,5 +1,8 @@
 import type { NextConfig } from "next";
 import path from "path";
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 
 const nextConfig: NextConfig = {
   outputFileTracingRoot: path.join(__dirname),
@@ -26,4 +29,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-ws",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "A beautifully crafted workspace interface for Claude Code with real-time streaming and local SQLite database",
   "keywords": [
@@ -67,7 +67,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.2.5",
+    "@anthropic-ai/claude-agent-sdk": "^0.2.20",
     "@anthropic-ai/sdk": "^0.71.2",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
@@ -90,6 +90,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -121,9 +122,11 @@
     "eslint-config-next": "^16.1.3",
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.1",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.562.0",
     "nanoid": "^5.1.6",
     "next": "^16.1.3",
+    "next-intl": "^4.7.0",
     "next-themes": "^0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",

package/public/docs/swagger/swagger.yaml

@@ -771,6 +771,141 @@ paths:
               schema:
                 $ref: '#/components/schemas/Error'
 
+  /api/files/operations:
+    delete:
+      tags:
+        - Files
+      summary: Delete file or folder
+      description: |
+        Delete a file or folder recursively from the filesystem.
+
+        **Security:**
+        - Path traversal validation via `path.relative()` check
+        - File existence check before deletion
+        - Permission error handling (EACCES -> 403)
+      operationId: deleteFileOrFolder
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - path
+                - rootPath
+              properties:
+                path:
+                  type: string
+                  description: Absolute path to file/folder to delete
+                rootPath:
+                  type: string
+                  description: Root directory path for security validation
+      responses:
+        "200":
+          description: File/folder deleted successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  success:
+                    type: boolean
+                    example: true
+        "400":
+          description: Bad request (missing required fields)
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "403":
+          description: Path traversal detected or permission denied
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "404":
+          description: Path not found
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "500":
+          description: Server error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+    post:
+      tags:
+        - Files
+      summary: Download file or folder as ZIP
+      description: |
+        Create a ZIP archive of a file or folder for download.
+
+        **Security:**
+        - Path traversal validation via `path.relative()` check
+        - File existence check before zipping
+        - Only operations within provided rootPath
+      operationId: downloadAsZip
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - path
+                - rootPath
+              properties:
+                path:
+                  type: string
+                  description: Absolute path to file/folder to zip
+                rootPath:
+                  type: string
+                  description: Root directory path for security validation
+      responses:
+        "200":
+          description: ZIP archive created successfully
+          content:
+            application/zip:
+              schema:
+                type: string
+                format: binary
+          headers:
+            Content-Disposition:
+              description: Download filename
+              schema:
+                type: string
+                example: 'attachment; filename="folder.zip"'
+            Content-Length:
+              description: ZIP file size in bytes
+              schema:
+                type: integer
+        "400":
+          description: Bad request (missing required fields)
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "403":
+          description: Path traversal detected or permission denied
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "404":
+          description: Path not found
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        "500":
+          description: Server error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
   /api/git/discard:
     post:
       tags:

package/server.ts

@@ -599,12 +599,17 @@ app.prepare().then(async () => {
 
   // Handle AskUserQuestion detection from AgentManager
   agentManager.on('question', ({ attemptId, toolUseId, questions }) => {
-    console.log(`[Server] AskUserQuestion detected for ${attemptId}`);
+    console.log(`[Server] AskUserQuestion detected for ${attemptId}`, {
+      toolUseId,
+      questionCount: questions?.length,
+      questions: questions?.map((q: any) => ({ header: q.header, question: q.question?.substring(0, 50) }))
+    });
     io.to(`attempt:${attemptId}`).emit('question:ask', {
       attemptId,
       toolUseId,
       questions,
     });
+    console.log(`[Server] Emitted question:ask to attempt:${attemptId}`);
   });
 
   // Handle background shell detection from AgentManager (Bash with run_in_background=true)
@@ -630,9 +635,50 @@ app.prepare().then(async () => {
       });
       if (!project) return;
 
-      // Add delay to let SDK's process start first, then our kill command takes over
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      // Extract port and find existing process PID
+      // Add delay to let nohup process bind to port before checking
+      const portMatch = shell.originalCommand?.match(/lsof\s+-ti\s+:(\d+)/);
+      if (portMatch) {
+        const port = portMatch[1];
+        console.log(`[Server] Waiting 6.6s for process to bind to port ${port}...`);
+        await new Promise(resolve => setTimeout(resolve, 6666));
+        try {
+          const { execSync } = require('child_process');
+          const pidOutput = execSync(`lsof -ti :${port} 2>/dev/null || true`, { encoding: 'utf-8' }).trim();
+          if (pidOutput) {
+            const pid = parseInt(pidOutput.split('\n')[0], 10);
+            if (pid) {
+              // Track existing process instead of respawning
+              console.log(`[Server] Found existing process on port ${port}: PID ${pid}`);
+              const shellId = shellManager.trackExternalProcess({
+                projectId: project.id,
+                attemptId,
+                pid,
+                command: shell.command,
+                cwd: project.path,
+              });
 
+              if (shellId) {
+                await db.insert(schema.shells).values({
+                  id: shellId,
+                  projectId: project.id,
+                  attemptId,
+                  command: shell.command,
+                  cwd: project.path,
+                  pid,
+                  status: 'running',
+                });
+                console.log(`[Server] Tracking external process ${shellId} (PID ${pid})`);
+                return;
+              }
+            }
+          }
+        } catch {
+          // Fall through to spawn new shell
+        }
+      }
+
+      // No existing process found, spawn new shell
       const shellId = shellManager.spawn({
         projectId: project.id,
         attemptId,
@@ -658,8 +704,8 @@ app.prepare().then(async () => {
   });
 
   // Handle tracked process from BGPID pattern in bash output
-  // Kill the nohup'd process and respawn via ShellManager for realtime streaming
-  agentManager.on('trackedProcess', async ({ attemptId, pid, command }) => {
+  // Track existing process instead of kill-and-respawn to avoid port conflicts
+  agentManager.on('trackedProcess', async ({ attemptId, pid, command, logFile: eventLogFile }) => {
     console.log(`[Server] Tracked process detected for ${attemptId}: PID ${pid}`);
 
     try {
@@ -690,49 +736,43 @@ app.prepare().then(async () => {
         return;
       }
 
-      // Kill the nohup'd process - we'll respawn via ShellManager for realtime streaming
-      try {
-        process.kill(pid, 'SIGTERM');
-        console.log(`[Server] Killed nohup'd process ${pid}`);
-      } catch {
-        console.log(`[Server] Process ${pid} already dead or not killable`);
-      }
-
-      // Extract actual command from nohup wrapper
-      // Pattern: "nohup <command> > /tmp/xxx.log 2>&1 & echo ..."
-      // or: "kill ...; sleep ...; nohup <command> > ..."
+      // Extract actual command from nohup wrapper, use eventLogFile if provided
       let actualCommand = command;
-      const nohupMatch = command.match(/nohup\s+(.+?)\s*>\s*\/tmp\//);
+      let logFile = eventLogFile;
+      const nohupMatch = command.match(/nohup\s+(.+?)\s*>\s*(\/tmp\/[^\s]+\.log)/);
       if (nohupMatch) {
         actualCommand = nohupMatch[1].trim();
+        logFile = logFile || nohupMatch[2];
       }
-      console.log(`[Server] Extracted command: ${actualCommand}`);
+      console.log(`[Server] Extracted command: ${actualCommand}, logFile: ${logFile}`);
 
-      // Wait for port to be released
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
-      // Spawn via ShellManager for realtime stdout/stderr capture
-      const shellId = shellManager.spawn({
+      // Track existing process via ShellManager (no kill-and-respawn)
+      const shellId = shellManager.trackExternalProcess({
         projectId: project.id,
         attemptId,
+        pid,
         command: actualCommand,
         cwd: project.path,
-        description: `Background: ${actualCommand.substring(0, 50)}`,
+        logFile,
       });
 
+      if (!shellId) {
+        console.error(`[Server] Failed to track process: PID ${pid} not alive`);
+        return;
+      }
+
       // Save to database for persistence
-      const shellInfo = shellManager.getShellInfo(shellId);
       await db.insert(schema.shells).values({
         id: shellId,
         projectId: project.id,
         attemptId,
         command: actualCommand,
         cwd: project.path,
-        pid: shellInfo?.pid || null,
+        pid,
         status: 'running',
       });
 
-      console.log(`[Server] Tracked external process ${shellId} (PID ${pid}) for project ${project.id}`);
+      console.log(`[Server] Tracking external process ${shellId} (PID ${pid}) for project ${project.id}`);
     } catch (error) {
       console.error(`[Server] Failed to track process:`, error);
     }

package/src/app/{layout.tsx → [locale]/layout.tsx}

@@ -3,7 +3,11 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import { Toaster } from 'sonner';
 import { ThemeProvider } from '@/components/providers/theme-provider';
 import { SocketProvider } from '@/components/providers/socket-provider';
-import './globals.css';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { locales } from '@/i18n/config';
+import '../globals.css';
 
 // Force dynamic rendering to avoid Next.js 16 Turbopack bugs
 export const dynamic = 'force-dynamic';
@@ -42,22 +46,34 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
+  params,
 }: Readonly<{
   children: React.ReactNode;
+  params: Promise<{ locale: string }>;
 }>) {
+  const { locale } = await params;
+
+  if (!locales.includes(locale as any)) {
+    notFound();
+  }
+
+  const messages = await getMessages();
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
       >
-        <SocketProvider>
-          <ThemeProvider>
-            {children}
-            <Toaster position="top-right" richColors closeButton />
-          </ThemeProvider>
-        </SocketProvider>
+        <NextIntlClientProvider messages={messages}>
+          <SocketProvider>
+            <ThemeProvider>
+              {children}
+              <Toaster position="top-right" richColors closeButton />
+            </ThemeProvider>
+          </SocketProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );

package/src/app/{page.tsx → [locale]/page.tsx}

@@ -7,7 +7,7 @@ import { Header } from '@/components/header';
 import { Board } from '@/components/kanban/board';
 import { CreateTaskDialog } from '@/components/kanban/create-task-dialog';
 import { TaskDetailPanel } from '@/components/task/task-detail-panel';
-import { SettingsDialog } from '@/components/settings/settings-dialog';
+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';
@@ -18,16 +18,17 @@ import { useTaskStore } from '@/stores/task-store';
 import { Task } from '@/types';
 import { useSidebarStore } from '@/stores/sidebar-store';
 import { useAgentFactoryUIStore } from '@/stores/agent-factory-ui-store';
+import { useSettingsUIStore } from '@/stores/settings-ui-store';
 
 function KanbanApp() {
   const [createTaskOpen, setCreateTaskOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = 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();
 
   const { projects, selectedProjectIds, fetchProjects, loading: projectLoading } = useProjectStore();
   const { selectedTask, fetchTasks, setSelectedTask, setPendingAutoStartTask } = useTaskStore();
@@ -48,8 +49,8 @@ function KanbanApp() {
   // Rehydrate from localStorage and fetch projects on mount
   useEffect(() => {
     useProjectStore.persist.rehydrate();
-    fetchProjects();
-  }, [fetchProjects]);
+    useProjectStore.getState().fetchProjects();
+  }, []);
 
   // Read project from URL and select it
   useEffect(() => {
@@ -90,9 +91,9 @@ function KanbanApp() {
   // Fetch tasks when selectedProjectIds changes
   useEffect(() => {
     if (!projectLoading) {
-      fetchTasks(selectedProjectIds);
+      useTaskStore.getState().fetchTasks(selectedProjectIds);
     }
-  }, [selectedProjectIds, projectLoading, fetchTasks]);
+  }, [selectedProjectIds, projectLoading]);
 
   // Handle task created event - select task if startNow is true
   const handleTaskCreated = (task: Task, startNow: boolean, processedPrompt?: string, fileIds?: string[]) => {
@@ -172,7 +173,7 @@ function KanbanApp() {
       <div className="flex h-screen items-center justify-center">
         <div className="flex items-center gap-3 text-muted-foreground">
           <img src="/logo.svg" alt="Logo" className="h-8 w-8 animate-spin" />
-          <span>Loading to Claude Workspace</span>
+          <span>Loading to Claude<span style={{ color: '#d87756' }}>.</span>WS</span>
         </div>
       </div>
     );
@@ -182,7 +183,6 @@ function KanbanApp() {
     <div className="flex h-screen flex-col">
       <Header
         onCreateTask={() => setCreateTaskOpen(true)}
-        onOpenSettings={() => setSettingsOpen(true)}
         onAddProject={() => setSetupOpen(true)}
         searchQuery={searchQuery}
         onSearchChange={setSearchQuery}
@@ -227,7 +227,6 @@ function KanbanApp() {
         onOpenChange={setCreateTaskOpen}
         onTaskCreated={handleTaskCreated}
       />
-      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
       <SetupDialog open={setupOpen || autoShowSetup} onOpenChange={setSetupOpen} />
       <ApiKeyDialog
         open={needsApiKey}
@@ -250,11 +249,17 @@ function KanbanApp() {
         </div>
       )}
 
+      {/* Settings Page */}
+      {settingsOpen && (
+        <div className="fixed inset-0 z-50 bg-background">
+          <SettingsPage />
+        </div>
+      )}
+
       {/* Right Sidebar - actions panel */}
       <RightSidebar
         projectId={selectedProjectIds[0]}
         onCreateTask={() => setCreateTaskOpen(true)}
-        onOpenSettings={() => setSettingsOpen(true)}
       />
     </div>
   );