repoburg 1.3.202 → 1.3.209

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

@@ -1,584 +0,0 @@
-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 { fetchProviderCommands } from '../api/providers.ts';
-import type { ProviderSlashCommand, SessionRuntimeConfig, Extension, Attachment } from '../types/index.ts';
-
-const MIN_HEIGHT = 32;
-const MAX_HEIGHT = 200;
-
-/** Parse runtime_config from the active session detail. */
-function parseRuntimeConfig(json: string | null | undefined): SessionRuntimeConfig {
-  if (!json) return {};
-  try {
-    return JSON.parse(json) as SessionRuntimeConfig;
-  } catch {
-    return {};
-  }
-}
-
-/** 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);
-  const [slashFilter, setSlashFilter] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [subPopup, setSubPopup] = useState<SlashCommand['subPopup']>(undefined);
-  const [skillPopup, setSkillPopup] = useState(false);
-  const [skillFilter, setSkillFilter] = useState('');
-  const [selectedSkills, setSelectedSkills] = useState<Extension[]>([]);
-
-  const commands = slashOpen ? filterCommands(slashFilter, capabilities, providerCommands) : [];
-
-  // Restore prompt after cancel
-  useEffect(() => {
-    if (restoredPrompt !== null) {
-      setValue(restoredPrompt);
-      requestAnimationFrame(() => {
-        if (taRef.current) {
-          taRef.current.style.height = 'auto';
-          taRef.current.style.height = Math.min(taRef.current.scrollHeight, MAX_HEIGHT) + 'px';
-        }
-      });
-      useStore.setState({ restoredPrompt: null });
-    }
-  }, [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;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        cancelTurn();
-      }
-    }
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [isRunning, cancelTurn]);
-
-  // 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;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, MAX_HEIGHT) + 'px';
-  }
-
-  function handleSend() {
-    const v = value.trim();
-    if (!v || isRunning) return;
-
-    // Build prompt with skill prefixes
-    let prompt = v;
-    if (selectedSkills.length > 0) {
-      const skillPrefix = selectedSkills.map((s) => `$${s.name}`).join(' ');
-      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);
-
-    // 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') {
-      setSkillPopup(true);
-      setSkillFilter('');
-      setSlashOpen(false);
-      setValue('');
-    } else if (cmd.id === 'model') {
-      setShowModelSelector(true);
-      setSlashOpen(false);
-      setValue('');
-    } else {
-      setSlashOpen(false);
-      setValue('');
-    }
-  }
-
-  function handleSkillSelect(skill: Extension) {
-    setSelectedSkills((prev) => [...prev, skill]);
-    setSkillPopup(false);
-    setValue('');
-    if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
-  }
-
-  function handleOptionSelect(optionValue: string) {
-    const config = parseRuntimeConfig(detail?.runtime_config);
-
-    if (subPopup === 'sandbox') {
-      config.sandboxMode = optionValue as SessionRuntimeConfig['sandboxMode'];
-    } else if (subPopup === 'websearch') {
-      config.webSearchMode = optionValue as SessionRuntimeConfig['webSearchMode'];
-    } else if (subPopup === 'network') {
-      config.networkAccessEnabled = optionValue === 'true';
-    }
-
-    updateRuntimeConfig(config as Record<string, unknown>);
-    setSubPopup(undefined);
-    setSlashOpen(false);
-    setValue('');
-    if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    // Slash popup keyboard navigation
-    if (slashOpen && !subPopup) {
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setSelectedIndex((i) => Math.min(i + 1, commands.length - 1));
-        return;
-      }
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setSelectedIndex((i) => Math.max(i - 1, 0));
-        return;
-      }
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (commands[selectedIndex]) {
-          handleSlashCommand(commands[selectedIndex]);
-        }
-        return;
-      }
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        setSlashOpen(false);
-        setValue('');
-        return;
-      }
-    }
-
-    if (subPopup && e.key === 'Escape') {
-      e.preventDefault();
-      setSubPopup(undefined);
-      return;
-    }
-
-    // Cmd/Ctrl+Enter to send
-    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !isRunning) {
-      e.preventDefault();
-      handleSend();
-      return;
-    }
-
-    // ESC to cancel while running
-    if (e.key === 'Escape' && isRunning) {
-      e.preventDefault();
-      cancelTurn();
-    }
-  }
-
-  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const newValue = e.target.value;
-    setValue(newValue);
-    autoResize();
-
-    // Detect `/` at start of input → slash popup
-    if (newValue.startsWith('/') && !newValue.includes(' ') && !isRunning) {
-      setSlashOpen(true);
-      setSlashFilter(newValue.slice(1));
-      setSelectedIndex(0);
-    } else {
-      setSlashOpen(false);
-      setSubPopup(undefined);
-    }
-
-    // Detect `$` trigger anywhere → skill popup
-    if (newValue.startsWith('$') && !isRunning) {
-      setSkillPopup(true);
-      setSkillFilter(newValue.slice(1));
-    } else if (!newValue.startsWith('$')) {
-      setSkillPopup(false);
-    }
-  }
-
-  const currentConfig = parseRuntimeConfig(detail?.runtime_config);
-
-  const sandboxOptions = [
-    { value: 'read-only', label: 'Read Only', description: 'Agent can only read files' },
-    { value: 'workspace-write', label: 'Workspace Write', description: 'Agent can read and write in workspace' },
-    { value: 'danger-full-access', label: 'Danger Full Access', description: 'Agent has unrestricted access' },
-  ];
-
-  const webSearchOptions = [
-    { value: 'disabled', label: 'Disabled', description: 'No web search' },
-    { value: 'cached', label: 'Cached', description: 'Use cached search results' },
-    { value: 'live', label: 'Live', description: 'Perform live web searches' },
-  ];
-
-  const networkOptions = [
-    { value: 'false', label: 'Disabled', description: 'No network access' },
-    { value: 'true', label: 'Enabled', description: 'Allow network access in sandbox' },
-  ];
-
-  return (
-    <div
-      className={`cmd-bar${dragOver ? ' drag-over' : ''}`}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      {slashOpen && !subPopup && (
-        <SlashPopup
-          commands={commands}
-          selectedIndex={selectedIndex}
-          onSelect={handleSlashCommand}
-          onHover={setSelectedIndex}
-        />
-      )}
-      {slashOpen && subPopup === 'sandbox' && (
-        <OptionSubPopup
-          title="Sandbox Mode"
-          options={sandboxOptions}
-          currentValue={currentConfig.sandboxMode}
-          onSelect={handleOptionSelect}
-          onClose={() => setSubPopup(undefined)}
-        />
-      )}
-      {slashOpen && subPopup === 'websearch' && (
-        <OptionSubPopup
-          title="Web Search"
-          options={webSearchOptions}
-          currentValue={currentConfig.webSearchMode}
-          onSelect={handleOptionSelect}
-          onClose={() => setSubPopup(undefined)}
-        />
-      )}
-      {slashOpen && subPopup === 'network' && (
-        <OptionSubPopup
-          title="Network Access"
-          options={networkOptions}
-          currentValue={currentConfig.networkAccessEnabled === true ? 'true' : 'false'}
-          onSelect={handleOptionSelect}
-          onClose={() => setSubPopup(undefined)}
-        />
-      )}
-      {skillPopup && (
-        <SkillMentionPopup
-          filter={skillFilter}
-          onSelect={handleSkillSelect}
-          onClose={() => { setSkillPopup(false); setValue(''); }}
-        />
-      )}
-      {selectedSkills.length > 0 && (
-        <div className="skill-badges">
-          {selectedSkills.map((s) => (
-            <span key={s.id} className="skill-badge">
-              ${s.name}
-              <button className="skill-badge-remove" onClick={() => setSelectedSkills((prev) => prev.filter((x) => x.id !== s.id))}>×</button>
-            </span>
-          ))}
-        </div>
-      )}
-      {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>
-  );
-}