repoburg 1.3.196 → 1.3.197

package/agent-pane/frontend/src/components/CollapsibleToolCalls.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import CollapsibleToolCalls, { isToolItem } from './CollapsibleToolCalls.tsx';
-import { makeItem } from '../test/fixtures.ts';
+import { makeItem, makeTurn } from '../test/fixtures.ts';
 
 describe('isToolItem', () => {
   it('returns true for tool types', () => {
@@ -25,14 +25,14 @@ describe('CollapsibleToolCalls', () => {
   });
 
   it('returns null when items is empty', () => {
-    const { container } = render(<CollapsibleToolCalls items={[]} />);
+    const { container } = render(<CollapsibleToolCalls items={[]} turn={makeTurn('t1', 's1')} />);
     expect(container.firstChild).toBeNull();
   });
 
   it('shows collapsed state by default (no item content visible)', () => {
     const item = makeItem('i1', 't1', 'command_execution');
     item.data = { command: 'ls', aggregated_output: '' };
-    render(<CollapsibleToolCalls items={[item]} />);
+    render(<CollapsibleToolCalls items={[item]} turn={makeTurn('t1', 's1')} />);
     expect(screen.getByText(/1 tool call/)).toBeInTheDocument();
     // Item card content should NOT be rendered when collapsed
     expect(screen.queryByText('Command')).not.toBeInTheDocument();
@@ -41,7 +41,7 @@ describe('CollapsibleToolCalls', () => {
   it('expands on header click and shows item cards', () => {
     const item = makeItem('i1', 't1', 'command_execution');
     item.data = { command: 'echo hello', aggregated_output: 'hello' };
-    render(<CollapsibleToolCalls items={[item]} />);
+    render(<CollapsibleToolCalls items={[item]} turn={makeTurn('t1', 's1')} />);
     const header = document.querySelector('.tool-calls-header')!;
     fireEvent.click(header);
     expect(screen.getByText('Command')).toBeInTheDocument();

package/agent-pane/frontend/src/components/CollapsibleToolCalls.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Wrench, ChevronRight } from 'lucide-react';
 import { MemoItemCard } from './TurnContent.tsx';
-import type { Item } from '../types/index.ts';
+import type { Item, Turn, DiscussionThread } from '../types/index.ts';
 
 const TOOL_TYPES = new Set(['command_execution', 'file_change', 'mcp_tool_call', 'web_search']);
 
@@ -11,9 +11,12 @@ export function isToolItem(item: Item): boolean {
 
 interface Props {
   items: Item[];
+  runtimeType?: string;
+  turn: Turn;
+  threads?: DiscussionThread[];
 }
 
-export default function CollapsibleToolCalls({ items }: Props) {
+export default function CollapsibleToolCalls({ items, runtimeType, turn, threads = [] }: Props) {
   const [expanded, setExpanded] = useState(false);
 
   if (items.length === 0) return null;
@@ -38,10 +41,16 @@ export default function CollapsibleToolCalls({ items }: Props) {
       {expanded && (
         <div className="tool-calls-body">
           {items.map((item) => (
-            <MemoItemCard key={item.id} item={item} />
+            <MemoItemCard
+              key={item.id}
+              item={item}
+              runtimeType={runtimeType}
+              turn={turn}
+              threads={threads}
+            />
           ))}
         </div>
       )}
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/CommandInputBar.test.tsx

@@ -67,7 +67,7 @@ describe('CommandInputBar', () => {
     fireEvent.change(textarea, { target: { value: 'hello world' } });
     fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
 
-    expect(submitPrompt).toHaveBeenCalledWith('hello world');
+    expect(submitPrompt).toHaveBeenCalledWith('hello world', undefined);
   });
 
   it('send button calls submitPrompt with trimmed value', async () => {
@@ -82,7 +82,7 @@ describe('CommandInputBar', () => {
     const sendBtn = document.querySelector('.cmd-send-btn') as HTMLElement;
     fireEvent.click(sendBtn);
 
-    expect(submitPrompt).toHaveBeenCalledWith('test');
+    expect(submitPrompt).toHaveBeenCalledWith('test', undefined);
   });
 
   it('send button is disabled when input is empty', () => {

package/agent-pane/frontend/src/components/CommandInputBar.tsx

@@ -1,11 +1,12 @@
-import { useRef, useState, useEffect } from 'react';
-import { ArrowUp, Square } from 'lucide-react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { ArrowUp, Square, Paperclip, X, FileText } from 'lucide-react';
 import { useStore } from '../store/store.ts';
 import SlashPopup, { type SlashCommand, filterCommands } from './input/SlashPopup.tsx';
 import OptionSubPopup from './input/OptionSubPopup.tsx';
 import SkillMentionPopup from './input/SkillMentionPopup.tsx';
 import { useProvider } from '../hooks/useProvider.ts';
-import type { SessionRuntimeConfig, Extension } from '../types/index.ts';
+import { fetchProviderCommands } from '../api/providers.ts';
+import type { ProviderSlashCommand, SessionRuntimeConfig, Extension, Attachment } from '../types/index.ts';
 
 const MIN_HEIGHT = 32;
 const MAX_HEIGHT = 200;
@@ -20,17 +21,64 @@ function parseRuntimeConfig(json: string | null | undefined): SessionRuntimeConf
   }
 }
 
+/** Format file size for display. */
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
+/** Frontend-only attachment type with preview URL and metadata. */
+interface PendingAttachment {
+  id: string;
+  name: string;
+  media_type: string;
+  data: string; // base64 (no data: URI prefix)
+  previewUrl?: string; // object URL for image thumbnails
+  size: number;
+}
+
+/** Generate a unique ID for pending attachments. */
+let attachmentIdCounter = 0;
+function nextAttachmentId(): string {
+  attachmentIdCounter += 1;
+  return `att-${Date.now()}-${attachmentIdCounter}`;
+}
+
 export default function CommandInputBar() {
   const [value, setValue] = useState('');
   const taRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const { submitPrompt, cancelTurn, updateRuntimeConfig, setShowModelSelector } = useStore();
   const activeSessionId = useStore((s) => s.activeSessionId);
   const detail = useStore((s) => (s.activeSessionId ? s.sessionDetails[s.activeSessionId] : null));
   const restoredPrompt = useStore((s) => s.restoredPrompt);
+  const quotedText = useStore((s) => s.quotedText);
   const isRunning = detail?.is_running === 1;
   const noSession = !activeSessionId;
 
   const { capabilities } = useProvider(detail?.runtime_type);
+  const runtimeType = detail?.runtime_type ?? null;
+  const canAttach = capabilities.imageAttachments;
+
+  // Attachment state
+  const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
+  const [dragOver, setDragOver] = useState(false);
+  const [previewImage, setPreviewImage] = useState<PendingAttachment | null>(null);
+
+  // Provider-native slash commands (e.g. Claude CLI /compact, /clear) — fetched dynamically.
+  const [providerCommands, setProviderCommands] = useState<ProviderSlashCommand[]>([]);
+  useEffect(() => {
+    if (!runtimeType) {
+      setProviderCommands([]);
+      return;
+    }
+    let cancelled = false;
+    fetchProviderCommands(runtimeType)
+      .then((cmds) => { if (!cancelled) setProviderCommands(cmds); })
+      .catch(() => { if (!cancelled) setProviderCommands([]); });
+    return () => { cancelled = true; };
+  }, [runtimeType]);
 
   // Slash popup state
   const [slashOpen, setSlashOpen] = useState(false);
@@ -41,7 +89,7 @@ export default function CommandInputBar() {
   const [skillFilter, setSkillFilter] = useState('');
   const [selectedSkills, setSelectedSkills] = useState<Extension[]>([]);
 
-  const commands = slashOpen ? filterCommands(slashFilter, capabilities) : [];
+  const commands = slashOpen ? filterCommands(slashFilter, capabilities, providerCommands) : [];
 
   // Restore prompt after cancel
   useEffect(() => {
@@ -57,6 +105,23 @@ export default function CommandInputBar() {
     }
   }, [restoredPrompt]);
 
+  // Append quoted text to input
+  useEffect(() => {
+    if (quotedText !== null) {
+      setValue((prev) => prev + quotedText);
+      setTimeout(() => {
+        if (taRef.current) {
+          taRef.current.style.height = 'auto';
+          taRef.current.style.height = Math.min(taRef.current.scrollHeight, MAX_HEIGHT) + 'px';
+          taRef.current.focus();
+          const len = taRef.current.value.length;
+          taRef.current.setSelectionRange(len, len);
+        }
+      }, 0);
+      useStore.setState({ quotedText: null });
+    }
+  }, [quotedText]);
+
   // ESC to cancel running turn (global — textarea is disabled while running)
   useEffect(() => {
     if (!isRunning) return;
@@ -70,14 +135,108 @@ export default function CommandInputBar() {
     return () => window.removeEventListener('keydown', onKey);
   }, [isRunning, cancelTurn]);
 
-  // Close slash popup when session changes
+  // Close slash popup when session changes + clear attachments
   useEffect(() => {
     setSlashOpen(false);
     setSubPopup(undefined);
     setSkillPopup(false);
     setSelectedSkills([]);
+    // Revoke all preview URLs and clear attachments
+    setAttachments((prev) => {
+      for (const att of prev) {
+        if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
+      }
+      return [];
+    });
   }, [activeSessionId]);
 
+  // Esc key to close image preview modal
+  useEffect(() => {
+    if (!previewImage) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setPreviewImage(null);
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [previewImage]);
+
+  // --- Attachment handlers ---
+
+  const handleFiles = useCallback((files: FileList | File[] | null): void => {
+    if (!files) return;
+    const fileArray = Array.from(files);
+    for (const file of fileArray) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        // result = "data:image/png;base64,iVBOR..."
+        const base64 = result.split(',')[1] ?? '';
+        const previewUrl = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
+        setAttachments((prev) => [...prev, {
+          id: nextAttachmentId(),
+          name: file.name,
+          media_type: file.type || 'application/octet-stream',
+          data: base64,
+          previewUrl,
+          size: file.size,
+        }]);
+      };
+      reader.readAsDataURL(file);
+    }
+  }, []);
+
+  const removeAttachment = useCallback((id: string): void => {
+    setAttachments((prev) => {
+      const removed = prev.find((a) => a.id === id);
+      if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);
+      return prev.filter((a) => a.id !== id);
+    });
+  }, []);
+
+  // --- Drag and drop ---
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!canAttach || isRunning) return;
+    setDragOver(true);
+  }, [canAttach, isRunning]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    if (!canAttach || isRunning) return;
+    handleFiles(e.dataTransfer.files);
+  }, [canAttach, isRunning, handleFiles]);
+
+  // --- Paste handler ---
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    if (!canAttach) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const imageFiles: File[] = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+    if (imageFiles.length > 0) {
+      e.preventDefault();
+      handleFiles(imageFiles);
+    }
+  }, [canAttach, handleFiles]);
+
   function autoResize() {
     const el = taRef.current;
     if (!el) return;
@@ -96,16 +255,43 @@ export default function CommandInputBar() {
       prompt = `${skillPrefix}\n\n${v}`;
     }
 
+    // Map pending attachments to shared Attachment type (strip id, previewUrl, size)
+    const sentAttachments: Attachment[] = attachments.map(({ id: _id, previewUrl: _previewUrl, size: _size, ...rest }) => rest);
+
     setValue('');
     setSelectedSkills([]);
     if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
     setSlashOpen(false);
     setSubPopup(undefined);
     setSkillPopup(false);
-    submitPrompt(prompt);
+
+    // Revoke all preview URLs and clear attachments
+    for (const att of attachments) {
+      if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
+    }
+    setAttachments([]);
+
+    submitPrompt(prompt, sentAttachments.length > 0 ? sentAttachments : undefined);
   }
 
   function handleSlashCommand(cmd: SlashCommand) {
+    // Provider-native commands (e.g. /compact) — insert as text; the runtime interprets them.
+    if (cmd.insertAsText) {
+      const replacement = `/${cmd.id} `;
+      setValue(replacement);
+      setSlashOpen(false);
+      setSubPopup(undefined);
+      requestAnimationFrame(() => {
+        if (taRef.current) {
+          taRef.current.focus();
+          const len = replacement.length;
+          taRef.current.setSelectionRange(len, len);
+          taRef.current.style.height = 'auto';
+          taRef.current.style.height = Math.min(taRef.current.scrollHeight, MAX_HEIGHT) + 'px';
+        }
+      });
+      return;
+    }
     if (cmd.subPopup) {
       setSubPopup(cmd.subPopup);
     } else if (cmd.id === 'skills') {
@@ -240,7 +426,12 @@ export default function CommandInputBar() {
   ];
 
   return (
-    <div className="cmd-bar">
+    <div
+      className={`cmd-bar${dragOver ? ' drag-over' : ''}`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
       {slashOpen && !subPopup && (
         <SlashPopup
           commands={commands}
@@ -293,28 +484,100 @@ export default function CommandInputBar() {
           ))}
         </div>
       )}
-      <textarea
-        ref={taRef}
-        className="cmd-textarea"
-        placeholder={
-          noSession ? 'Select or create a session…' : isRunning ? 'Agent is running…' : 'Type a message…  Use / for commands'
-        }
-        autoComplete="off"
-        value={value}
-        disabled={isRunning || noSession}
-        rows={1}
-        style={{ minHeight: MIN_HEIGHT, maxHeight: MAX_HEIGHT }}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-      />
-      {isRunning ? (
-        <button className="cmd-stop-btn" onClick={() => cancelTurn()} title="Stop (Esc)">
-          <Square size={15} />
-        </button>
-      ) : (
-        <button className="cmd-send-btn" onClick={handleSend} disabled={!value.trim() || noSession} title="Send (⌘↵)">
-          <ArrowUp size={16} />
-        </button>
+      {attachments.length > 0 && (
+        <div className="attachment-preview-area">
+          {attachments.map((att) => (
+            <div key={att.id} className="attachment-chip" title={att.name}>
+              {att.previewUrl ? (
+                <img
+                  src={att.previewUrl}
+                  alt={att.name}
+                  className="attachment-thumb"
+                  onClick={() => setPreviewImage(att)}
+                  style={{ cursor: 'pointer' }}
+                />
+              ) : (
+                <FileText size={20} className="attachment-file-icon" />
+              )}
+              <div className="attachment-info">
+                <span className="attachment-name">{att.name}</span>
+                <span className="attachment-size">{formatSize(att.size)}</span>
+              </div>
+              <button
+                className="attachment-remove"
+                onClick={() => removeAttachment(att.id)}
+                title="Remove attachment"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      {canAttach && !isRunning && !noSession && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept="image/*,application/pdf,text/*,.ts,.js,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.css,.html,.xml,.yml,.yaml,.toml,.ini,.sh,.sql"
+          style={{ display: 'none' }}
+          onChange={(e) => {
+            handleFiles(e.target.files);
+            e.target.value = '';
+          }}
+        />
+      )}
+      <div className="cmd-input-row">
+        {canAttach && !isRunning && !noSession && (
+          <button
+            className="attachment-clip-btn"
+            onClick={() => fileInputRef.current?.click()}
+            title="Attach files"
+            disabled={isRunning}
+          >
+            <Paperclip size={16} />
+          </button>
+        )}
+        <textarea
+          ref={taRef}
+          className="cmd-textarea"
+          placeholder={
+            noSession ? 'Select or create a session…' : isRunning ? 'Agent is running…' : 'Type a message…  Use / for commands'
+          }
+          autoComplete="off"
+          value={value}
+          disabled={isRunning || noSession}
+          rows={1}
+          style={{ minHeight: MIN_HEIGHT, maxHeight: MAX_HEIGHT }}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+        />
+        {isRunning ? (
+          <button className="cmd-stop-btn" onClick={() => cancelTurn()} title="Stop (Esc)">
+            <Square size={15} />
+          </button>
+        ) : (
+          <button className="cmd-send-btn" onClick={handleSend} disabled={!value.trim() || noSession} title="Send (⌘↵)">
+            <ArrowUp size={16} />
+          </button>
+        )}
+      </div>
+
+      {/* Image preview modal — only for images */}
+      {previewImage && (
+        <div className="image-preview-modal" onClick={() => setPreviewImage(null)}>
+          <div className="image-preview-content" onClick={(e) => e.stopPropagation()}>
+            <img src={previewImage.previewUrl} alt={previewImage.name} />
+            <div className="image-preview-info">
+              <span>{previewImage.name}</span>
+              <span>{formatSize(previewImage.size)}</span>
+            </div>
+            <button className="image-preview-close" onClick={() => setPreviewImage(null)}>
+              <X size={20} />
+            </button>
+          </div>
+        </div>
       )}
     </div>
   );

package/agent-pane/frontend/src/components/CommandPalette.test.tsx

@@ -177,12 +177,8 @@ describe('CommandPalette', () => {
     render(<CommandPalette />);
     fireEvent.click(screen.getByText('Switch to Turns Tab'));
     expect(switchRightTab).toHaveBeenCalledWith('turns');
-    fireEvent.click(screen.getByText('Switch to Metrics Tab'));
-    expect(switchRightTab).toHaveBeenCalledWith('metrics');
     fireEvent.click(screen.getByText('Switch to Changes Tab'));
     expect(switchRightTab).toHaveBeenCalledWith('changes');
-    fireEvent.click(screen.getByText('Switch to Logs Tab'));
-    expect(switchRightTab).toHaveBeenCalledWith('logs');
   });
 
   it('Close Tab action calls closeTab', () => {

package/agent-pane/frontend/src/components/CommandPalette.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useStore } from '../store/store.ts';
-import { Plus, Trash2, Send, Square, List, BarChart3, FileCode, ScrollText, X, CornerDownLeft } from 'lucide-react';
+import { Plus, Trash2, Send, Square, List, FileCode, X, CornerDownLeft } from 'lucide-react';
 import type { RightTab } from '../types/index.ts';
 
 interface Command {
@@ -72,14 +72,6 @@ export default function CommandPalette() {
         action: () => store.switchRightTab('turns' as RightTab),
         available: !!store.activeSessionId,
       },
-      {
-        id: 'tab-metrics',
-        label: 'Switch to Metrics Tab',
-        hint: 'View token usage and session info',
-        icon: BarChart3,
-        action: () => store.switchRightTab('metrics' as RightTab),
-        available: !!store.activeSessionId,
-      },
       {
         id: 'tab-changes',
         label: 'Switch to Changes Tab',
@@ -88,14 +80,6 @@ export default function CommandPalette() {
         action: () => store.switchRightTab('changes' as RightTab),
         available: !!store.activeSessionId,
       },
-      {
-        id: 'tab-logs',
-        label: 'Switch to Logs Tab',
-        hint: 'View event log',
-        icon: ScrollText,
-        action: () => store.switchRightTab('logs' as RightTab),
-        available: !!store.activeSessionId,
-      },
       {
         id: 'close-tab',
         label: 'Close Tab',