claude-ws 0.1.1 → 0.1.3

package/src/components/sidebar/file-browser/file-icon.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Folder, FolderOpen, File } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { FileExtensionIcon } from '@/components/ui/file-extension-icon';
 
 interface FileIconProps {
   name: string;
@@ -11,101 +10,16 @@ interface FileIconProps {
   size?: 'sm' | 'md';
 }
 
-// Icon config: [label, color]
-const EXT_ICONS: Record<string, [string, string]> = {
-  js: ['JS', 'text-yellow-500'],
-  jsx: ['JS', 'text-yellow-400'],
-  mjs: ['JS', 'text-yellow-500'],
-  cjs: ['JS', 'text-yellow-500'],
-  ts: ['TS', 'text-blue-500'],
-  tsx: ['TS', 'text-blue-400'],
-  json: ['{ }', 'text-amber-500'],
-  yaml: ['Y', 'text-rose-400'],
-  yml: ['Y', 'text-rose-400'],
-  css: ['#', 'text-purple-500'],
-  scss: ['S#', 'text-pink-500'],
-  html: ['<>', 'text-orange-500'],
-  xml: ['<>', 'text-orange-400'],
-  svg: ['◇', 'text-amber-400'],
-  md: ['MD', 'text-sky-500'],
-  mdx: ['MD', 'text-sky-400'],
-  py: ['PY', 'text-green-500'],
-  go: ['GO', 'text-cyan-500'],
-  rs: ['RS', 'text-orange-600'],
-  sh: ['$', 'text-slate-400'],
-  sql: ['Q', 'text-cyan-500'],
-  png: ['◫', 'text-emerald-500'],
-  jpg: ['◫', 'text-emerald-500'],
-  jpeg: ['◫', 'text-emerald-500'],
-  gif: ['◫', 'text-emerald-500'],
-  webp: ['◫', 'text-emerald-500'],
-  ico: ['◫', 'text-emerald-500'],
-  txt: ['T', 'text-muted-foreground'],
-  log: ['≡', 'text-muted-foreground'],
-  env: ['⚙', 'text-yellow-600'],
-  lock: ['🔒', 'text-slate-500'],
-  db: ['DB', 'text-cyan-600'],
-  sqlite: ['DB', 'text-cyan-600'],
-  sqlite3: ['DB', 'text-cyan-600'],
-};
-
-// Special files
-const FILE_ICONS: Record<string, [string, string]> = {
-  'package.json': ['{ }', 'text-green-500'],
-  'tsconfig.json': ['TS', 'text-blue-500'],
-  'next.config.ts': ['N', 'text-slate-400'],
-  'next.config.js': ['N', 'text-slate-400'],
-  'next.config.mjs': ['N', 'text-slate-400'],
-  'tailwind.config.ts': ['TW', 'text-cyan-400'],
-  'tailwind.config.js': ['TW', 'text-cyan-400'],
-  '.gitignore': ['G', 'text-orange-500'],
-  '.npmignore': ['N', 'text-red-500'],
-  '.env': ['⚙', 'text-yellow-600'],
-  '.env.local': ['⚙', 'text-yellow-600'],
-  'README.md': ['i', 'text-sky-500'],
-  'LICENSE': ['§', 'text-amber-500'],
-  'LICENSE.md': ['§', 'text-amber-500'],
-  'LICENSE.txt': ['§', 'text-amber-500'],
-  'Dockerfile': ['🐳', 'text-sky-500'],
-};
-
-function getExt(name: string): string {
-  const i = name.lastIndexOf('.');
-  return i > 0 ? name.slice(i + 1).toLowerCase() : '';
-}
-
 export function FileIcon({ name, type, isExpanded, className, size = 'md' }: FileIconProps) {
-  const isSmall = size === 'sm';
-  const iconSize = isSmall ? 'size-3' : 'size-4';
-  const textSize = isSmall ? 'text-[7px] w-3' : 'text-[10px] w-4';
-
-  // Folders
-  if (type === 'directory') {
-    const Icon = isExpanded ? FolderOpen : Folder;
-    return <Icon className={cn(iconSize, 'text-amber-500', className)} />;
-  }
-
-  // Special files first
-  const special = FILE_ICONS[name];
-  if (special) {
-    return (
-      <span className={cn(textSize, 'font-bold text-center', special[1], className)}>
-        {special[0]}
-      </span>
-    );
-  }
-
-  // By extension
-  const ext = getExt(name);
-  const config = EXT_ICONS[ext];
-  if (config) {
-    return (
-      <span className={cn(textSize, 'font-bold text-center', config[1], className)}>
-        {config[0]}
-      </span>
-    );
-  }
-
-  // Default
-  return <File className={cn(iconSize, 'text-muted-foreground', className)} />;
+  const iconSize = size === 'sm' ? 12 : 16;
+
+  return (
+    <FileExtensionIcon
+      name={name}
+      type={type}
+      isExpanded={isExpanded}
+      size={iconSize}
+      className={className}
+    />
+  );
 }

package/src/components/task/conversation-view.tsx

@@ -5,7 +5,7 @@ import { Loader2, FileText } from 'lucide-react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { MessageBlock } from '@/components/claude/message-block';
 import { ToolUseBlock } from '@/components/claude/tool-use-block';
-import { RunningDots } from '@/components/ui/running-dots';
+import { RunningDots, useRandomStatusVerb } from '@/components/ui/running-dots';
 import { cn } from '@/lib/utils';
 import type { ClaudeOutput, ClaudeContentBlock, AttemptFile, PendingFile } from '@/types';
 
@@ -125,9 +125,19 @@ export function ConversationView({
   const [historicalTurns, setHistoricalTurns] = useState<ConversationTurn[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [lastIsRunning, setLastIsRunning] = useState(isRunning);
+  const statusVerb = useRandomStatusVerb();
+  // Track if user is manually scrolling (to pause auto-scroll)
+  const userScrollingRef = useRef(false);
+  const userScrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Check if user is near bottom of scroll area (within threshold)
   const isNearBottom = () => {
+    const detachedContainer = scrollAreaRef.current?.closest('[data-detached-scroll-container]');
+    if (detachedContainer) {
+      const threshold = 150;
+      return detachedContainer.scrollHeight - detachedContainer.scrollTop - detachedContainer.clientHeight < threshold;
+    }
+
     const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
     if (!viewport) return true;
     const threshold = 150; // pixels from bottom
@@ -137,21 +147,66 @@ export function ConversationView({
   // Scroll to bottom of scroll area viewport (only if user is near bottom)
   const scrollToBottomIfNear = () => {
     if (isNearBottom()) {
-      const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
-      if (viewport) {
-        viewport.scrollTop = viewport.scrollHeight;
+      const detachedContainer = scrollAreaRef.current?.closest('[data-detached-scroll-container]');
+      if (detachedContainer) {
+        detachedContainer.scrollTop = detachedContainer.scrollHeight;
+      } else {
+        const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+        if (viewport) {
+          viewport.scrollTop = viewport.scrollHeight;
+        }
       }
     }
   };
 
   // Force scroll to bottom (bypasses isNearBottom check)
   const scrollToBottom = () => {
-    const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
-    if (viewport) {
-      viewport.scrollTop = viewport.scrollHeight;
+    const detachedContainer = scrollAreaRef.current?.closest('[data-detached-scroll-container]');
+    if (detachedContainer) {
+      detachedContainer.scrollTop = detachedContainer.scrollHeight;
+    } else {
+      const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+      if (viewport) {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
     }
   };
 
+  // Scroll to bottom with retry for better reliability (especially in detached mode)
+  const scrollToBottomWithRetry = (attempts = 3) => {
+    const attemptScroll = (remainingAttempts: number) => {
+      // Check if we're in a detached window
+      const detachedContainer = scrollAreaRef.current?.closest('[data-detached-scroll-container]');
+
+      if (detachedContainer) {
+        // In detached mode, scroll the detached container
+        detachedContainer.scrollTop = detachedContainer.scrollHeight;
+        requestAnimationFrame(() => {
+          const isAtBottom = detachedContainer.scrollHeight - detachedContainer.scrollTop - detachedContainer.clientHeight < 10;
+          if (!isAtBottom && remainingAttempts > 0) {
+            setTimeout(() => attemptScroll(remainingAttempts - 1), 100);
+          }
+        });
+      } else {
+        // Normal mode, scroll the ScrollArea viewport
+        const viewport = scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+        if (viewport && viewport.scrollHeight > 0) {
+          viewport.scrollTop = viewport.scrollHeight;
+          requestAnimationFrame(() => {
+            const isAtBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 10;
+            if (!isAtBottom && remainingAttempts > 0) {
+              setTimeout(() => attemptScroll(remainingAttempts - 1), 100);
+            }
+          });
+        } else if (remainingAttempts > 0) {
+          // Viewport not ready, retry
+          setTimeout(() => attemptScroll(remainingAttempts - 1), 100);
+        }
+      }
+    };
+    attemptScroll(attempts);
+  };
+
   // Load historical conversation
   const loadHistory = async () => {
     try {
@@ -174,9 +229,9 @@ export function ConversationView({
 
   // Auto-scroll to bottom when switching to a new task (after history loads)
   useEffect(() => {
-    if (!isLoading && historicalTurns.length > 0) {
-      // Small delay to ensure DOM is updated
-      setTimeout(scrollToBottom, 100);
+    if (!isLoading) {
+      // Use retry logic for better reliability in detached mode
+      scrollToBottomWithRetry(5);
     }
   }, [taskId, isLoading]);
 
@@ -188,11 +243,73 @@ export function ConversationView({
     setLastIsRunning(isRunning);
   }, [isRunning, lastIsRunning]);
 
-  // Auto-scroll to bottom on new messages (only if user is near bottom)
+  // Detect user scroll to pause auto-scroll
   useEffect(() => {
-    scrollToBottomIfNear();
+    const getScrollContainer = () => {
+      const detachedContainer = scrollAreaRef.current?.closest('[data-detached-scroll-container]');
+      if (detachedContainer) return detachedContainer;
+      return scrollAreaRef.current?.querySelector('[data-slot="scroll-area-viewport"]');
+    };
+
+    const handleScroll = () => {
+      // Mark user as scrolling
+      userScrollingRef.current = true;
+
+      // Clear previous timeout
+      if (userScrollTimeoutRef.current) {
+        clearTimeout(userScrollTimeoutRef.current);
+      }
+
+      // Reset after user stops scrolling AND is near bottom
+      userScrollTimeoutRef.current = setTimeout(() => {
+        if (isNearBottom()) {
+          userScrollingRef.current = false;
+        }
+      }, 150);
+    };
+
+    const container = getScrollContainer();
+    if (container) {
+      container.addEventListener('scroll', handleScroll, { passive: true });
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener('scroll', handleScroll);
+      }
+      if (userScrollTimeoutRef.current) {
+        clearTimeout(userScrollTimeoutRef.current);
+      }
+    };
+  }, [isLoading]);
+
+  // Auto-scroll to bottom on new messages (only if user is near bottom and not manually scrolling)
+  useEffect(() => {
+    if (!userScrollingRef.current) {
+      scrollToBottomIfNear();
+    }
   }, [currentMessages, historicalTurns, isRunning]);
 
+  // Continuous auto-scroll during streaming (respects user scroll intent)
+  // Uses requestAnimationFrame to smoothly scroll as content appears
+  useEffect(() => {
+    if (!isRunning) return;
+
+    let rafId: number;
+
+    const autoScroll = () => {
+      // Only auto-scroll if user is not manually scrolling
+      if (!userScrollingRef.current) {
+        scrollToBottomIfNear();
+      }
+      rafId = requestAnimationFrame(autoScroll);
+    };
+
+    rafId = requestAnimationFrame(autoScroll);
+
+    return () => cancelAnimationFrame(rafId);
+  }, [isRunning]);
+
   const renderContentBlock = (
     block: ClaudeContentBlock,
     index: number,
@@ -243,7 +360,7 @@ export function ConversationView({
       const blocks = output.message.content;
 
       return (
-        <div key={(output as any)._msgId || index} className="space-y-1 max-w-full overflow-hidden">
+        <div key={(output as any)._msgId || index} className="space-y-1 w-full max-w-full overflow-hidden">
           {blocks.map((block, blockIndex) =>
             renderContentBlock(block, blockIndex, lastToolUseId, toolResultsMap, isStreaming)
           )}
@@ -305,7 +422,7 @@ export function ConversationView({
 
   // User prompt - simple muted box with file thumbnails
   const renderUserTurn = (turn: ConversationTurn) => (
-    <div key={`user-${turn.attemptId}`} className="bg-muted/40 rounded-lg px-4 py-3 text-[15px] leading-relaxed break-words space-y-3">
+    <div key={`user-${turn.attemptId}`} className="bg-muted/40 rounded-lg px-4 py-3 text-[15px] leading-relaxed break-words space-y-3 w-full max-w-full overflow-hidden">
       <div>{turn.prompt}</div>
       {turn.files && turn.files.length > 0 && (
         <div className="flex flex-wrap gap-2 pt-1">
@@ -349,7 +466,7 @@ export function ConversationView({
 
   // Assistant response - clean text flow
   const renderAssistantTurn = (turn: ConversationTurn) => (
-    <div key={`assistant-${turn.attemptId}`} className="space-y-4 max-w-full overflow-hidden">
+    <div key={`assistant-${turn.attemptId}`} className="space-y-4 w-full max-w-full overflow-hidden">
       {turn.messages.map((msg, idx) => renderMessage(msg, idx, false, turn.messages))}
     </div>
   );
@@ -390,8 +507,8 @@ export function ConversationView({
     : historicalTurns;
 
   return (
-    <ScrollArea ref={scrollAreaRef} className={cn('h-full', className)}>
-      <div className="space-y-6 p-4 pb-24 max-w-full overflow-hidden">
+    <ScrollArea ref={scrollAreaRef} className={cn('h-full w-full max-w-full overflow-x-hidden', className)}>
+      <div className="space-y-6 p-4 pb-24 w-full max-w-full overflow-x-hidden box-border">
         {/* Historical turns */}
         {filteredHistoricalTurns.map(renderTurn)}
 
@@ -401,7 +518,7 @@ export function ConversationView({
             <>
               {/* User prompt if not in history */}
               {!filteredHistoricalTurns.some(t => t.attemptId === currentAttemptId && t.type === 'user') && currentPrompt && (
-                <div className="bg-muted/40 rounded-lg px-4 py-3 text-[15px] leading-relaxed break-words space-y-3">
+                <div className="bg-muted/40 rounded-lg px-4 py-3 text-[15px] leading-relaxed break-words space-y-3 w-full max-w-full overflow-hidden">
                   <div>{currentPrompt}</div>
                   {currentFiles && currentFiles.length > 0 && (
                     <div className="flex flex-wrap gap-2 pt-1">
@@ -437,7 +554,7 @@ export function ConversationView({
                 </div>
               )}
               {/* Streaming response */}
-              <div className="space-y-4 max-w-full overflow-hidden">
+              <div className="space-y-4 w-full max-w-full overflow-hidden">
                 {currentMessages.map((msg, idx) => renderMessage(msg, idx, true, currentMessages))}
               </div>
             </>
@@ -447,8 +564,8 @@ export function ConversationView({
         {isRunning && !hasVisibleContent(currentMessages) &&
           !filteredHistoricalTurns.some(t => t.attemptId === currentAttemptId && t.type === 'assistant') && (
             <div className="flex items-center gap-2 text-muted-foreground text-sm py-1">
-              <RunningDots className="text-primary" />
-              <span className="font-mono text-[14px]">Thinking...</span>
+              <RunningDots />
+              <span className="font-mono text-[14px]" style={{ color: '#b9664a' }}>{statusVerb}...</span>
             </div>
           )}
       </div>

package/src/components/task/file-icon.tsx

@@ -1,49 +1,81 @@
 'use client';
 
-import {
-  FileText,
-  FileCode,
-  FileJson,
-  FileImage,
-  File,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { FileExtensionIcon } from '@/components/ui/file-extension-icon';
+
+// MIME type to extension mapping
+const MIME_TO_EXT: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/jpg': 'jpg',
+  'image/gif': 'gif',
+  'image/webp': 'webp',
+  'image/svg+xml': 'svg',
+  'image/x-icon': 'ico',
+  'image/bmp': 'bmp',
+  'application/json': 'json',
+  'application/pdf': 'pdf',
+  'application/xml': 'xml',
+  'application/zip': 'zip',
+  'application/gzip': 'gz',
+  'application/x-tar': 'tar',
+  'application/x-rar-compressed': 'rar',
+  'application/x-7z-compressed': '7z',
+  'text/plain': 'txt',
+  'text/html': 'html',
+  'text/css': 'css',
+  'text/javascript': 'js',
+  'text/typescript': 'ts',
+  'text/markdown': 'md',
+  'text/xml': 'xml',
+  'text/csv': 'csv',
+  'application/javascript': 'js',
+  'application/typescript': 'ts',
+  'application/x-typescript': 'ts',
+};
 
 interface FileIconProps {
   mimeType: string;
   className?: string;
+  /** File name for better extension detection */
+  fileName?: string;
 }
 
-// Map MIME types to Lucide icons
-export function FileIcon({ mimeType, className }: FileIconProps) {
-  const iconClass = cn('size-6', className);
+function getExtensionFromMime(mimeType: string): string {
+  // Direct mapping
+  if (mimeType in MIME_TO_EXT) {
+    return MIME_TO_EXT[mimeType];
+  }
 
+  // Fallback patterns
   if (mimeType.startsWith('image/')) {
-    return <FileImage className={iconClass} />;
+    return mimeType.split('/')[1] || 'image';
   }
-
-  if (mimeType === 'application/json') {
-    return <FileJson className={iconClass} />;
+  if (mimeType.startsWith('video/')) {
+    return mimeType.split('/')[1] || 'video';
   }
-
-  if (
-    mimeType.includes('typescript') ||
-    mimeType.includes('javascript') ||
-    mimeType === 'text/css' ||
-    mimeType === 'text/html' ||
-    mimeType === 'text/xml' ||
-    mimeType === 'application/xml'
-  ) {
-    return <FileCode className={iconClass} />;
+  if (mimeType.startsWith('audio/')) {
+    return mimeType.split('/')[1] || 'audio';
   }
-
-  if (
-    mimeType === 'text/plain' ||
-    mimeType === 'text/markdown' ||
-    mimeType === 'application/pdf'
-  ) {
-    return <FileText className={iconClass} />;
+  if (mimeType.includes('typescript')) {
+    return 'ts';
   }
+  if (mimeType.includes('javascript')) {
+    return 'js';
+  }
+
+  return 'txt';
+}
+
+export function FileIcon({ mimeType, className, fileName }: FileIconProps) {
+  // Use fileName if provided, otherwise derive from mimeType
+  const name = fileName || `file.${getExtensionFromMime(mimeType)}`;
 
-  return <File className={iconClass} />;
+  return (
+    <FileExtensionIcon
+      name={name}
+      type="file"
+      size={24}
+      className={className}
+    />
+  );
 }

package/src/components/task/prompt-input.tsx

@@ -18,6 +18,7 @@ import { X } from 'lucide-react';
 
 export interface PromptInputRef {
   submit: () => void;
+  focus: () => void;
 }
 
 interface PromptInputProps {
@@ -365,21 +366,24 @@ export const PromptInput = forwardRef<PromptInputRef, PromptInputProps>(({
     fileInputRef.current?.click();
   };
 
-  // Expose submit function to parent via ref
+  // Expose submit and focus functions to parent via ref
   useImperativeHandle(ref, () => ({
     submit: () => {
       if (!prompt.trim() || disabled) return;
       handleSubmit({ preventDefault: () => { } } as FormEvent);
     },
+    focus: () => {
+      textareaRef.current?.focus();
+    },
   }));
 
   return (
     <FileDropZone
       onFilesSelected={handleFilesSelected}
       disabled={disabled}
-      className={cn('relative flex flex-col', className)}
+      className={cn('relative flex flex-col overflow-x-hidden', className)}
     >
-      <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full min-w-0">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full min-w-0 overflow-x-hidden">
         {/* Command Selector */}
         <CommandSelector
           isOpen={showCommands}
@@ -422,7 +426,7 @@ export const PromptInput = forwardRef<PromptInputRef, PromptInputProps>(({
         )}
 
         {/* Input area */}
-        <div className="w-full min-w-0">
+        <div className="w-full min-w-0 max-w-full">
           {/* File Mention Dropdown */}
           <FileMentionDropdown
             query={fileMentionQuery}
@@ -433,10 +437,10 @@ export const PromptInput = forwardRef<PromptInputRef, PromptInputProps>(({
 
           {/* Textarea and buttons as a single block */}
           <div className={cn(
-            'rounded-md border overflow-hidden bg-background',
+            'rounded-md border overflow-hidden bg-background w-full max-w-full',
             selectedCommand ? 'border-primary' : 'border-input'
           )}>
-            <div className="relative">
+            <div className="relative w-full max-w-full">
               <Textarea
                 ref={textareaRef}
                 value={prompt}
@@ -451,9 +455,10 @@ export const PromptInput = forwardRef<PromptInputRef, PromptInputProps>(({
                 placeholder={placeholder}
                 disabled={disabled}
                 className={cn(
-                  'min-h-10 max-h-48 resize-none w-full break-words overflow-y-auto border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0',
+                  'min-h-10 max-h-48 resize-none w-full break-words overflow-y-auto border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0 text-base',
                   selectedCommand && 'border-primary'
                 )}
+                style={{ fontSize: '16px' }}
               />
               {selectedCommand && (
                 <div className="absolute top-2 right-2">