claude-ws 0.1.1 → 0.1.3

package/next.config.ts

@@ -8,6 +8,11 @@ const nextConfig: NextConfig = {
         hostname: 'cdn.jsdelivr.net',
         pathname: '/npm/vscode-icons-js@*/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        pathname: '/vscode-icons/vscode-icons/**',
+      },
     ],
   },
 };

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "claude-ws",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "description": "A beautifully crafted workspace interface for Claude Code with real-time streaming and local SQLite database",
-  "keywords": ["claude", "claude-code", "workspace", "task-management", "ai", "anthropic", "nextjs", "sqlite"],
+  "keywords": [
+    "claude",
+    "claude-code",
+    "workspace",
+    "task-management",
+    "ai",
+    "anthropic",
+    "nextjs",
+    "sqlite"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -48,13 +57,15 @@
   "scripts": {
     "dev": "tsx server.ts",
     "dev:next": "next dev",
-    "build": "next build",
+    "build": "NODE_ENV=production next build",
     "start": "NODE_ENV=production tsx server.ts",
     "lint": "eslint",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
-    "prepublish:build": "pnpm run build",
-    "publish:npm": "pnpm run prepublish:build && npm publish --access public"
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "version:major": "npm version major --no-git-tag-version",
+    "publish:npm": "pnpm run build && npm publish --access public"
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.5",
@@ -115,6 +126,7 @@
     "tailwind-merge": "^3.4.0",
     "tar": "^7.5.2",
     "tsx": "^4.21.0",
+    "vscode-icons-js": "^11.6.1",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
@@ -132,4 +144,4 @@
     "typescript": "^5"
   },
   "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48"
-}
+}

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

@@ -25,12 +25,26 @@ export async function GET(
     let totalDeletions = 0;
     let filesChanged = 0;
 
-    // Context usage: Use LATEST attempt only (most recent)
-    // Each attempt is a separate session - context doesn't accumulate across attempts
+    // Context usage: Use LATEST attempt with actual context data
+    // When a new turn starts, the latest attempt may have 0 context (not yet updated)
+    // In that case, fall back to the previous completed attempt's context
     const latestAttempt = attempts[0]; // Already ordered by createdAt DESC
-    const contextUsed = latestAttempt?.contextUsed || 0;
-    const contextLimit = latestAttempt?.contextLimit || 200000;
-    const contextPercentage = latestAttempt?.contextPercentage || 0;
+
+    // If latest attempt is running and has no context data yet, use previous attempt's context
+    let contextUsed = latestAttempt?.contextUsed || 0;
+    let contextLimit = latestAttempt?.contextLimit || 200000;
+    let contextPercentage = latestAttempt?.contextPercentage || 0;
+
+    // Fallback to previous attempt if current is running with no context data
+    if (latestAttempt?.status === 'running' && contextPercentage === 0 && attempts.length > 1) {
+      const previousAttempt = attempts[1];
+      if (previousAttempt?.contextPercentage && previousAttempt.contextPercentage > 0) {
+        contextUsed = previousAttempt.contextUsed || 0;
+        contextLimit = previousAttempt.contextLimit || 200000;
+        contextPercentage = previousAttempt.contextPercentage;
+        console.log(`[Stats] Using previous attempt context: ${contextPercentage}% (current attempt is running with no data)`);
+      }
+    }
 
     // Calculate context health metrics (ClaudeKit formulas)
     // Note: We approximate input/output split since DB only stores total contextUsed

package/src/app/globals.css

@@ -303,11 +303,40 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    box-sizing: border-box;
   }
 
   body {
     @apply bg-background text-foreground;
   }
+
+  /* Prevent horizontal scrolling on mobile */
+  html, body {
+    overflow-x: hidden;
+    max-width: 100vw;
+  }
+
+  /* Prevent iOS Safari zoom on input focus (inputs smaller than 16px trigger zoom) */
+  @media screen and (max-width: 767px) {
+    input, textarea, select {
+      font-size: 16px !important;
+    }
+
+    /* Ensure all fixed elements respect viewport bounds */
+    .fixed {
+      max-width: 100vw !important;
+      overflow-x: hidden !important;
+    }
+
+    /* Force Radix ScrollArea to respect viewport width on mobile */
+    [data-slot="scroll-area"],
+    [data-slot="scroll-area-viewport"],
+    [data-slot="scroll-area-viewport"] > div {
+      max-width: 100vw !important;
+      width: 100% !important;
+      overflow-x: hidden !important;
+    }
+  }
 }
 
 /* Custom scrollbar styling - minimal and modern */
@@ -390,21 +419,21 @@
   animation: spin-border 2s linear infinite;
 }
 
-/* Green glow animation for processing spinner */
-@keyframes glow-green {
+/* Warm glow animation for processing spinner */
+@keyframes glow-warm {
 
   0%,
   100% {
-    filter: drop-shadow(0 0 2px #22c55e) drop-shadow(0 0 4px #22c55e);
+    filter: drop-shadow(0 0 2px #b9664a) drop-shadow(0 0 4px #b9664a);
   }
 
   50% {
-    filter: drop-shadow(0 0 4px #22c55e) drop-shadow(0 0 12px #22c55e) drop-shadow(0 0 16px #22c55e);
+    filter: drop-shadow(0 0 4px #b9664a) drop-shadow(0 0 12px #b9664a) drop-shadow(0 0 16px #b9664a);
   }
 }
 
-.animate-glow-green {
-  animation: glow-green 1.5s ease-in-out infinite;
+.animate-glow-warm {
+  animation: glow-warm 2s ease-in-out infinite;
 }
 
 /* Inline Edit Diff Styling */

package/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import { Toaster } from 'sonner';
 import { ThemeProvider } from '@/components/providers/theme-provider';
@@ -15,14 +15,17 @@ const geistMono = Geist_Mono({
   subsets: ['latin'],
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  interactiveWidget: 'resizes-content',
+};
+
 export const metadata: Metadata = {
   title: 'Claude Workspace',
   description: 'Workspace powered by Claude Code CLI',
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    interactiveWidget: 'resizes-content',
-  },
   icons: {
     icon: '/favicon.ico',
     apple: '/logo.png',

package/src/components/claude/code-block.tsx

@@ -21,9 +21,9 @@ export function CodeBlock({ code, language, className }: CodeBlockProps) {
   };
 
   return (
-    <div className={cn('relative group rounded-md overflow-hidden border border-border', className)}>
+    <div className={cn('relative group rounded-md overflow-hidden border border-border w-full max-w-full', className)}>
       {/* Header with language label and copy button */}
-      <div className="flex items-center justify-between px-3 py-1.5 bg-muted/50 border-b border-border">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-muted/50 border-b border-border w-full">
         <span className="text-xs font-mono text-muted-foreground">
           {language || 'text'}
         </span>
@@ -31,7 +31,7 @@ export function CodeBlock({ code, language, className }: CodeBlockProps) {
           variant="ghost"
           size="icon-sm"
           onClick={handleCopy}
-          className="size-6 opacity-0 group-hover:opacity-100 transition-opacity"
+          className="size-6 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
         >
           {copied ? (
             <Check className="size-3" />
@@ -40,7 +40,7 @@ export function CodeBlock({ code, language, className }: CodeBlockProps) {
           )}
         </Button>
       </div>
-      <pre className="p-3 bg-muted/30 text-[13px] leading-relaxed whitespace-pre-wrap break-words font-mono">
+      <pre className="p-3 bg-muted/30 text-[13px] leading-relaxed whitespace-pre-wrap break-words font-mono w-full max-w-full overflow-x-auto">
         <code className={language ? `language-${language}` : ''}>{code}</code>
       </pre>
     </div>

package/src/components/claude/diff-view.tsx

@@ -118,11 +118,11 @@ export function DiffView({ oldText, newText, filePath, className }: DiffViewProp
   }, [diffLines]);
 
   return (
-    <div className={cn('rounded-md border border-border overflow-hidden text-xs font-mono', className)}>
+    <div className={cn('rounded-md border border-border overflow-hidden text-xs font-mono w-full max-w-full', className)}>
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-1.5 bg-muted/50 border-b border-border">
-        <span className="text-muted-foreground truncate">{filePath || 'changes'}</span>
-        <div className="flex items-center gap-2 text-[11px]">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-muted/50 border-b border-border w-full">
+        <span className="text-muted-foreground truncate min-w-0 flex-1">{filePath || 'changes'}</span>
+        <div className="flex items-center gap-2 text-[11px] shrink-0">
           {stats.added > 0 && (
             <span className="text-green-600 dark:text-green-400">+{stats.added}</span>
           )}
@@ -133,7 +133,7 @@ export function DiffView({ oldText, newText, filePath, className }: DiffViewProp
       </div>
 
       {/* Diff content */}
-      <div className="overflow-x-auto max-h-64">
+      <div className="overflow-x-auto max-h-64 w-full max-w-full">
         <table className="w-full border-collapse">
           <tbody>
             {diffLines.map((line, idx) => (
@@ -163,7 +163,7 @@ export function DiffView({ oldText, newText, filePath, className }: DiffViewProp
 
                 {/* Content */}
                 <td className={cn(
-                  'px-2 py-0 whitespace-pre',
+                  'px-2 py-0 whitespace-pre-wrap break-all',
                   line.type === 'added' && 'text-green-700 dark:text-green-300',
                   line.type === 'removed' && 'text-red-700 dark:text-red-300'
                 )}>

package/src/components/claude/message-block.tsx

@@ -85,8 +85,8 @@ export function MessageBlock({ content, isThinking = false, isStreaming = false,
           ) : (
             <ChevronRight className="size-3" />
           )}
-          <RunningDots className="text-primary" />
-          <span className="font-mono text-[14px]">Thinking...</span>
+          <RunningDots />
+          <span className="font-mono text-[14px]" style={{ color: '#b9664a' }}>Thinking...</span>
         </button>
 
         {isExpanded && (
@@ -99,7 +99,7 @@ export function MessageBlock({ content, isThinking = false, isStreaming = false,
   }
 
   return (
-    <div className={cn('text-[15px] leading-7 max-w-full overflow-hidden', className)}>
+    <div className={cn('text-[15px] leading-7 max-w-full w-full overflow-hidden', className)}>
       <MarkdownContent content={displayContent} />
     </div>
   );
@@ -176,7 +176,7 @@ function MarkdownContent({ content }: { content: string }) {
         },
         // Pre blocks
         pre: ({ children }) => (
-          <div className="my-2 overflow-x-auto">{children}</div>
+          <div className="my-2 w-full max-w-full overflow-x-auto">{children}</div>
         ),
         // Strong/Bold
         strong: ({ children }) => (

package/src/components/claude/response-renderer.tsx

@@ -14,10 +14,49 @@ interface ResponseRendererProps {
 
 export function ResponseRenderer({ messages, className }: ResponseRendererProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const userScrollingRef = useRef(false);
+  const userScrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Check if user is near bottom
+  const isNearBottom = () => {
+    const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+    if (!viewport) return true;
+    const threshold = 150;
+    return viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < threshold;
+  };
 
-  // Auto-scroll to bottom on new messages
+  // Detect user scroll to pause auto-scroll
+  useEffect(() => {
+    const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+    if (!viewport) return;
+
+    const handleScroll = () => {
+      userScrollingRef.current = true;
+      if (userScrollTimeoutRef.current) {
+        clearTimeout(userScrollTimeoutRef.current);
+      }
+      userScrollTimeoutRef.current = setTimeout(() => {
+        if (isNearBottom()) {
+          userScrollingRef.current = false;
+        }
+      }, 150);
+    };
+
+    viewport.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      viewport.removeEventListener('scroll', handleScroll);
+      if (userScrollTimeoutRef.current) {
+        clearTimeout(userScrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Auto-scroll to bottom on new messages (only if not manually scrolling)
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (!userScrollingRef.current && isNearBottom()) {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
   }, [messages]);
 
   const renderContentBlock = (block: ClaudeContentBlock, index: number) => {
@@ -103,7 +142,7 @@ export function ResponseRenderer({ messages, className }: ResponseRendererProps)
   }
 
   return (
-    <ScrollArea className={cn('h-full', className)}>
+    <ScrollArea ref={scrollAreaRef} className={cn('h-full', className)}>
       <div className="space-y-4 p-4">
         {messages.map((message, index) => renderMessage(message, index))}
         <div ref={bottomRef} />

package/src/components/claude/tool-use-block.tsx

@@ -161,17 +161,17 @@ function BashBlock({ command, output, isError }: { command: string; output?: str
   const outputLines = output?.split('\n').length || 0;
 
   return (
-    <div className="rounded-md border border-border overflow-hidden text-xs font-mono">
+    <div className="rounded-md border border-border overflow-hidden text-xs font-mono w-full max-w-full">
       {/* Command header */}
       <div
         className={cn(
-          'flex items-center gap-2 px-3 py-2 bg-zinc-900 dark:bg-zinc-950',
+          'flex items-center gap-2 px-3 py-2 bg-zinc-900 dark:bg-zinc-950 w-full max-w-full',
           hasOutput && 'cursor-pointer hover:bg-zinc-800 dark:hover:bg-zinc-900'
         )}
         onClick={() => hasOutput && setIsExpanded(!isExpanded)}
       >
         <Terminal className="size-3.5 text-zinc-400 shrink-0" />
-        <code className="text-zinc-100 flex-1 truncate">{command}</code>
+        <code className="text-zinc-100 flex-1 truncate min-w-0">{command}</code>
         <div className="flex items-center gap-1">
           <Button
             variant="ghost"
@@ -249,11 +249,11 @@ export function ToolUseBlock({ name, input, result, isError, isStreaming, classN
   const isCompleted = !isStreaming && result && !isError;
 
   return (
-    <div className={cn('group max-w-full overflow-hidden my-2', className)}>
+    <div className={cn('group w-full max-w-full overflow-hidden my-2', className)}>
       {/* Main status line */}
       <div
         className={cn(
-          'flex items-start gap-2.5 py-1.5 px-2 rounded-md transition-colors min-w-0 border border-transparent',
+          'flex items-start gap-2.5 py-1.5 px-2 rounded-md transition-colors min-w-0 w-full max-w-full border border-transparent',
           isStreaming ? 'text-foreground bg-accent/30 border-accent/20' : 'text-muted-foreground hover:bg-accent/20',
           hasOtherDetails && 'cursor-pointer'
         )}
@@ -272,9 +272,9 @@ export function ToolUseBlock({ name, input, result, isError, isStreaming, classN
 
         {/* Streaming spinner or icon */}
         {isStreaming ? (
-          <RunningDots className="shrink-0 text-green-500 dark:text-green-400 mt-1 animate-glow-green" />
+          <RunningDots className="shrink-0" />
         ) : isCompleted ? null : (
-          <Icon className={cn('size-4 shrink-0 mt-1', isError && 'text-destructive')} />
+          <Icon className={cn('size-4 shrink-0', isError && 'text-destructive')} />
         )}
 
         {/* Tool name and target - allow wrapping */}
@@ -310,7 +310,7 @@ export function ToolUseBlock({ name, input, result, isError, isStreaming, classN
 
       {/* Special view for Bash */}
       {isBash && Boolean(inputObj?.command) && (
-        <div className="mt-1.5 ml-5">
+        <div className="mt-1.5 ml-5 w-full max-w-full overflow-hidden pr-5">
           <BashBlock
             command={String(inputObj?.command)}
             output={result}
@@ -321,14 +321,14 @@ export function ToolUseBlock({ name, input, result, isError, isStreaming, classN
 
       {/* Special view for Edit with diff */}
       {hasEditDiff && (
-        <div className="mt-1.5 ml-5">
+        <div className="mt-1.5 ml-5 w-full max-w-full overflow-hidden pr-5">
           <EditBlock input={inputObj} result={result} isError={isError} />
         </div>
       )}
 
       {/* Standard expandable details for other tools */}
       {isExpanded && hasOtherDetails && (
-        <div className="ml-5 mt-1 pl-4 border-l border-border/50 text-[13px] text-muted-foreground space-y-2 max-w-full overflow-hidden">
+        <div className="ml-5 mt-1 pl-4 border-l border-border/50 text-[13px] text-muted-foreground space-y-2 w-full max-w-full overflow-hidden pr-5">
           {inputObj && Object.keys(inputObj).length > 1 && (
             <pre className="font-mono bg-muted/30 p-2 rounded overflow-x-auto max-h-32 whitespace-pre-wrap break-all">
               {JSON.stringify(inputObj, null, 2)}

package/src/components/kanban/board.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, useTransition } from 'react';
 import {
   DndContext,
   DragEndEvent,
@@ -24,8 +24,22 @@ interface BoardProps {
 }
 
 export function Board({ attempts = [], onCreateTask }: BoardProps) {
-  const { tasks, reorderTasks } = useTaskStore();
+  const { tasks, reorderTasks, selectTask, setPendingAutoStartTask } = useTaskStore();
   const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [, startTransition] = useTransition();
+  const lastReorderRef = useRef<string>('');
+  const [pendingNewTaskStart, setPendingNewTaskStart] = useState<{ taskId: string; description: string } | null>(null);
+
+  // Handle auto-start for newly created tasks moved to In Progress
+  useEffect(() => {
+    if (pendingNewTaskStart) {
+      const { taskId, description } = pendingNewTaskStart;
+      // Select the task and trigger auto-start
+      selectTask(taskId);
+      setPendingAutoStartTask(taskId, description);
+      setPendingNewTaskStart(null);
+    }
+  }, [pendingNewTaskStart, selectTask, setPendingAutoStartTask]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -94,39 +108,11 @@ export function Board({ attempts = [], onCreateTask }: BoardProps) {
     // Check if dropping over a column
     const overColumn = KANBAN_COLUMNS.find((col) => col.id === overId);
     if (overColumn) {
-      // Moving to a different column
-      if (activeTask.status !== overColumn.id) {
-        const targetTasks = tasksByStatus.get(overColumn.id) || [];
-        reorderTasks(activeTask.id, overColumn.id, targetTasks.length);
-      }
-    } else {
-      // Dropping over another task
-      const overTask = tasks.find((t) => t.id === overId);
-      if (overTask) {
-        const targetColumn = overTask.status;
-        const columnTasks = tasksByStatus.get(targetColumn) || [];
-
-        // Find current position in the active task's current column
-        const oldIndex = columnTasks.findIndex((t) => t.id === activeId);
-
-        // Find position in target column
-        const newIndex = columnTasks.findIndex((t) => t.id === overId);
-
-        // If moving to different column or reordering within same column
-        if (activeTask.status !== targetColumn || oldIndex !== newIndex) {
-          // Handle the move in the target column
-          if (activeTask.status !== targetColumn) {
-            // Moving to different column - place at the position of overTask
-            reorderTasks(activeTask.id, targetColumn, newIndex);
-          } else if (oldIndex !== -1 && newIndex !== -1) {
-            // Reordering within same column
-            const reordered = arrayMove(columnTasks, oldIndex, newIndex);
-            const newPosition = reordered.findIndex((t) => t.id === activeId);
-            reorderTasks(activeTask.id, activeTask.status, newPosition);
-          }
-        }
-      }
+      // Moving to a different column - don't reorder during drag, just for visual
+      // The actual reorder happens in handleDragEnd
+      return;
     }
+    // Don't do anything during dragOver - let handleDragEnd handle the reordering
   };
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -143,41 +129,70 @@ export function Board({ attempts = [], onCreateTask }: BoardProps) {
     const activeTask = tasks.find((t) => t.id === activeId);
     if (!activeTask) return;
 
-    // Check if dropping over a column
-    const overColumn = KANBAN_COLUMNS.find((col) => col.id === overId);
-    if (overColumn) {
-      if (activeTask.status !== overColumn.id) {
-        const targetTasks = tasksByStatus.get(overColumn.id) || [];
-        reorderTasks(activeTask.id, overColumn.id, targetTasks.length);
-      }
-    } else {
-      // Dropping over another task
-      const overTask = tasks.find((t) => t.id === overId);
-      if (overTask) {
-        const targetColumn = overTask.status;
-        const columnTasks = tasksByStatus.get(targetColumn) || [];
-
-        // Find current position in the active task's current column
-        const oldIndex = columnTasks.findIndex((t) => t.id === activeId);
-
-        // Find position in target column
-        const newIndex = columnTasks.findIndex((t) => t.id === overId);
-
-        // If moving to different column or reordering within same column
-        if (activeTask.status !== targetColumn || oldIndex !== newIndex) {
-          // Handle the move in the target column
-          if (activeTask.status !== targetColumn) {
-            // Moving to different column - place at the position of overTask
-            reorderTasks(activeTask.id, targetColumn, newIndex);
-          } else if (oldIndex !== -1 && newIndex !== -1) {
-            // Reordering within same column
-            const reordered = arrayMove(columnTasks, oldIndex, newIndex);
-            const newPosition = reordered.findIndex((t) => t.id === activeId);
-            reorderTasks(activeTask.id, activeTask.status, newPosition);
+    // Skip if we just processed this exact same reorder
+    if (lastReorderRef.current === `${activeId}-${overId}`) {
+      return;
+    }
+
+    // Mark this reorder as in-progress
+    lastReorderRef.current = `${activeId}-${overId}`;
+
+    // Check if this is a newly created task moving to In Progress
+    const isNewTaskToInProgress = !activeTask.chatInit && activeTask.status === 'todo';
+
+    // Wrap in startTransition to avoid blocking the UI during reordering
+    startTransition(async () => {
+      // Check if dropping over a column
+      const overColumn = KANBAN_COLUMNS.find((col) => col.id === overId);
+      if (overColumn) {
+        if (activeTask.status !== overColumn.id) {
+          const targetTasks = tasksByStatus.get(overColumn.id) || [];
+          await reorderTasks(activeTask.id, overColumn.id, targetTasks.length);
+
+          // If this is a newly created task moving to In Progress, trigger auto-start
+          if (isNewTaskToInProgress && overColumn.id === 'in_progress' && activeTask.description) {
+            setPendingNewTaskStart({ taskId: activeTask.id, description: activeTask.description });
+          }
+        }
+      } else {
+        // Dropping over another task
+        const overTask = tasks.find((t) => t.id === overId);
+        if (overTask) {
+          const targetColumn = overTask.status;
+          const columnTasks = tasksByStatus.get(targetColumn) || [];
+
+          // Find current position in the active task's current column
+          const oldIndex = columnTasks.findIndex((t) => t.id === activeId);
+
+          // Find position in target column
+          const newIndex = columnTasks.findIndex((t) => t.id === overId);
+
+          // If moving to different column or reordering within same column
+          if (activeTask.status !== targetColumn || oldIndex !== newIndex) {
+            // Handle the move in the target column
+            if (activeTask.status !== targetColumn) {
+              // Moving to different column - place at the position of overTask
+              await reorderTasks(activeTask.id, targetColumn, newIndex);
+
+              // If this is a newly created task moving to In Progress, trigger auto-start
+              if (isNewTaskToInProgress && targetColumn === 'in_progress' && activeTask.description) {
+                setPendingNewTaskStart({ taskId: activeTask.id, description: activeTask.description });
+              }
+            } else if (oldIndex !== -1 && newIndex !== -1) {
+              // Reordering within same column
+              const reordered = arrayMove(columnTasks, oldIndex, newIndex);
+              const newPosition = reordered.findIndex((t) => t.id === activeId);
+              await reorderTasks(activeTask.id, activeTask.status, newPosition);
+            }
           }
         }
       }
-    }
+
+      // Reset the ref after a short delay to allow for rapid reordering of different tasks
+      setTimeout(() => {
+        lastReorderRef.current = '';
+      }, 100);
+    });
   };
 
   const handleDragCancel = () => {

package/src/components/providers/socket-provider.tsx

@@ -20,7 +20,8 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 
     socketInstance.on('connect', () => {
       console.log('[SocketProvider] Connected:', socketInstance.id);
-      setSocket(socketInstance);
+      // Defer setSocket to avoid setState during render
+      Promise.resolve().then(() => setSocket(socketInstance));
     });
 
     socketInstance.on('disconnect', () => {