claude-ws 0.2.1 → 0.3.1

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.1",
+  "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"
@@ -67,7 +68,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",
@@ -122,9 +123,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/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);
   });
 
@@ -635,9 +654,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,
@@ -663,8 +723,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 {
@@ -695,49 +755,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}`);
-
-      // Wait for port to be released
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      console.log(`[Server] Extracted command: ${actualCommand}, logFile: ${logFile}`);
 
-      // 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,27 +7,26 @@ 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';
-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';
 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 +47,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 +89,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[]) => {
@@ -182,7 +181,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,21 +225,7 @@ function KanbanApp() {
         onOpenChange={setCreateTaskOpen}
         onTaskCreated={handleTaskCreated}
       />
-      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
       <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 && (
@@ -250,11 +234,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>
   );