ompchamber 0.3.0

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/SearchFs.tsx

@@ -0,0 +1,132 @@
+import { useMemo, useState } from 'preact/hooks';
+import { File, Folder, FolderSearch } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { formatBytes } from '@/shared/lib/format/number';
+import { CopyButton } from '@/client/components/common/CopyButton';
+
+interface FsItem {
+  path?: unknown;
+  name?: unknown;
+  type?: unknown;
+  size?: unknown;
+  matches?: unknown;
+}
+
+function itemPath(f: FsItem): string {
+  return typeof f.path === 'string' ? f.path : typeof f.name === 'string' ? f.name : '';
+}
+
+function itemType(f: FsItem): 'file' | 'dir' | 'unknown' {
+  const t = typeof f.type === 'string' ? f.type.toLowerCase() : '';
+  if (t === 'file' || t === 'directory' || t === 'dir') return t === 'directory' || t === 'dir' ? 'dir' : 'file';
+  return 'unknown';
+}
+
+/** Panel untuk tool `search_fs` (legacy) — hasil pencarian filesystem yang readable. */
+export function SearchFs({ tool }: { tool: ToolCallData }) {
+  const [filter, setFilter] = useState('');
+  const details = tool.details ?? {};
+  const rawItems: FsItem[] = Array.isArray(details.results) ? details.results : [];
+
+  const items: FsItem[] = useMemo(() => {
+    if (rawItems.length > 0) return rawItems;
+    if (tool.output) {
+      try {
+        const data = JSON.parse(tool.output);
+        if (Array.isArray(data)) return data;
+        if (data && typeof data === 'object') {
+          if (Array.isArray(data.results)) return data.results;
+          if (Array.isArray(data.items)) return data.items;
+          if (Array.isArray(data.files)) return data.files;
+        }
+      } catch {}
+    }
+    const lines = (tool.output ?? '').split(/\r?\n/).filter(Boolean);
+    return lines.map((line) => {
+      const isDir = line.endsWith('/');
+      return {
+        path: line,
+        type: isDir ? 'dir' : 'file',
+      };
+    });
+  }, [rawItems, tool.output]);
+
+  const filtered = useMemo(() => {
+    if (!filter) return items;
+    const lower = filter.toLowerCase();
+    return items.filter((it) => itemPath(it).toLowerCase().includes(lower));
+  }, [items, filter]);
+
+  if (items.length === 0) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-dashed border-ink/15 px-3 py-2.5 text-[11.5px] text-ink/45">
+        <FolderSearch size={13} className="shrink-0" />
+        <span>No filesystem matches found</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between rounded-lg border border-ink/8 bg-paper px-3 py-2">
+        <div className="flex items-center gap-2">
+          <FolderSearch size={13} className="text-ink/60" />
+          <span className="text-[11px] font-semibold text-ink">Filesystem Search</span>
+          <span className="rounded-full bg-ink/5 px-2 py-0.5 font-mono text-[9.5px] text-ink/50">
+            {items.length} {items.length === 1 ? 'entry' : 'entries'}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {items.length > 5 && (
+            <input
+              type="text"
+              placeholder="Filter..."
+              value={filter}
+              onChange={(e) => setFilter(e.currentTarget.value)}
+              className="h-6 w-24 rounded border border-ink/10 bg-canvas px-2 text-[10.5px] text-ink focus:outline-none"
+            />
+          )}
+          <CopyButton
+            text={items.map((it) => itemPath(it)).join('\n')}
+            className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+            label="Copy"
+          />
+        </div>
+      </div>
+
+      <div className="max-h-64 divide-y divide-ink/6 overflow-y-auto rounded-lg border border-ink/8 bg-paper">
+        {filtered.map((item, index) => {
+          const path = itemPath(item);
+          if (!path) return null;
+          const type = itemType(item);
+          const size = typeof item.size === 'number' && item.size > 0 ? formatBytes(item.size) : '';
+
+          return (
+            <div
+              key={index}
+              className="flex items-center gap-2 px-3 py-1.5 text-[11.5px] transition-colors hover:bg-ink/[0.02]"
+            >
+              {type === 'dir' ? (
+                <Folder size={12} className="shrink-0 text-ink/50" />
+              ) : (
+                <File size={12} className="shrink-0 text-ink/40" />
+              )}
+              <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-ink/80">{path}</span>
+              {type !== 'unknown' && (
+                <span
+                  className={`shrink-0 rounded px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider ${
+                    type === 'dir' ? 'bg-ink/8 text-ink/60' : 'bg-ink/5 text-ink/45'
+                  }`}
+                >
+                  {type}
+                </span>
+              )}
+              {size && <span className="shrink-0 font-mono text-[10px] text-ink/40">{size}</span>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/SearchTool.tsx

@@ -0,0 +1,317 @@
+import { useMemo, useState } from 'preact/hooks';
+import { ChevronRight, FileSearch, FileText, FolderSearch } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
+
+interface MatchLine {
+  lineNum: number;
+  text: string;
+  isMatch: boolean;
+}
+
+interface ParsedFileMatches {
+  path: string;
+  lines: MatchLine[];
+  matchCount: number;
+}
+
+function queryOf(tool: ToolCallData): string {
+  const input = tool.input;
+  if (input && typeof input === 'object') {
+    if (typeof input.pattern === 'string') return input.pattern;
+    if (typeof input.path === 'string') return input.path;
+    if (typeof input.glob === 'string') return input.glob;
+    if (typeof input.query === 'string') return input.query;
+    if (typeof input.regex === 'string') return input.regex;
+    if (typeof input.search === 'string') return input.search;
+    if (typeof input.text === 'string') return input.text;
+  }
+  if (typeof tool.target === 'string' && tool.target !== '.') return tool.target;
+  return '';
+}
+
+/** Parses markdown hierarchical output or standard ripgrep/grep tool output */
+function parseGrepOutput(output: string): { files: ParsedFileMatches[]; totalMatches: number; isGlobList: boolean } {
+  const lines = output.split(/\r?\n/);
+  const files: ParsedFileMatches[] = [];
+  const dirStack: string[] = [];
+  let currentFile: ParsedFileMatches | null = null;
+  let isGlobList = true;
+
+  for (const rawLine of lines) {
+    const trimmed = rawLine.trimEnd();
+    if (!trimmed) continue;
+
+    // Filter out pagination/limit notices (e.g. "[20 results limit reached...]", "Showing files 1-20 of 41...")
+    if (
+      (trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+      /^Showing files \d+/i.test(trimmed) ||
+      /^Found \d+ matches/i.test(trimmed)
+    ) {
+      continue;
+    }
+
+    // 1. Detect standard ripgrep format: "path/to/file.tsx:18:code" or "path/to/file.tsx:18:5:code"
+    const standardRgMatch = trimmed.match(/^([^:\n]+(?:\.[a-zA-Z0-9_-]+|\/[^:\n]+)):(\d+)(?::\d+)?:(.*)$/);
+    if (standardRgMatch) {
+      isGlobList = false;
+      const filePath = standardRgMatch[1].trim();
+      const lineNum = parseInt(standardRgMatch[2], 10) || 1;
+      const text = standardRgMatch[3];
+
+      let targetFile = files.find((f) => f.path === filePath);
+      if (!targetFile) {
+        if (currentFile && currentFile.lines.length > 0 && !files.includes(currentFile)) {
+          files.push(currentFile);
+        }
+        targetFile = { path: filePath, lines: [], matchCount: 0 };
+        files.push(targetFile);
+        currentFile = targetFile;
+      }
+      targetFile.lines.push({ lineNum, text, isMatch: true });
+      targetFile.matchCount++;
+      continue;
+    }
+
+    // 1b. Detect standard ripgrep context line: "path/to/file.tsx-17-code"
+    const standardRgCtx = trimmed.match(/^([^:\n]+(?:\.[a-zA-Z0-9_-]+|\/[^:\n]+))-(\d+)-(.*)$/);
+    if (standardRgCtx) {
+      isGlobList = false;
+      const filePath = standardRgCtx[1].trim();
+      const lineNum = parseInt(standardRgCtx[2], 10) || 1;
+      const text = standardRgCtx[3];
+
+      let targetFile = files.find((f) => f.path === filePath);
+      if (!targetFile) {
+        if (currentFile && currentFile.lines.length > 0 && !files.includes(currentFile)) {
+          files.push(currentFile);
+        }
+        targetFile = { path: filePath, lines: [], matchCount: 0 };
+        files.push(targetFile);
+        currentFile = targetFile;
+      }
+      targetFile.lines.push({ lineNum, text, isMatch: false });
+      continue;
+    }
+
+    // 2. Detect heading lines like "# app/", "## components/", "#### File.tsx"
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const name = headingMatch[2].trim();
+
+      // Adjust directory stack based on heading depth
+      dirStack.length = Math.min(dirStack.length, level - 1);
+
+      if (name.endsWith('/')) {
+        dirStack[level - 1] = name;
+      } else {
+        // File heading
+        if (currentFile && currentFile.lines.length > 0 && !files.includes(currentFile)) {
+          files.push(currentFile);
+        }
+        const fullDir = dirStack.filter(Boolean).join('');
+        const fullPath = fullDir ? `${fullDir.replace(/\/+$/, '')}/${name}` : name;
+        currentFile = { path: fullPath, lines: [], matchCount: 0 };
+      }
+      continue;
+    }
+
+    // 3. Match code line format: " 18|..." or "*19|..." or "18:..." or "18│..." (unicode \u2502)
+    const codeMatch = trimmed.match(/^(\*?)(\s*\d+)[|:\u2502](.*)$/);
+    if (codeMatch) {
+      isGlobList = false;
+      const isMatch = codeMatch[1] === '*';
+      const lineNum = parseInt(codeMatch[2].trim(), 10) || 1;
+      const text = codeMatch[3];
+
+      if (!currentFile) {
+        currentFile = { path: 'Results', lines: [], matchCount: 0 };
+        files.push(currentFile);
+      }
+
+      currentFile.lines.push({ lineNum, text, isMatch });
+      if (isMatch) currentFile.matchCount++;
+      continue;
+    }
+
+    // 4. Handle plain file list output (glob format)
+    if (!trimmed.startsWith('#') && !codeMatch) {
+      if (trimmed.includes('|') || trimmed.includes(':') || trimmed.includes('\u2502')) {
+        isGlobList = false;
+      }
+      const fullDir = dirStack.filter(Boolean).join('');
+      const fullPath = fullDir ? `${fullDir.replace(/\/+$/, '')}/${trimmed}` : trimmed;
+      files.push({
+        path: fullPath,
+        lines: [],
+        matchCount: 1,
+      });
+    }
+  }
+
+  if (currentFile && currentFile.lines.length > 0 && !files.includes(currentFile)) {
+    files.push(currentFile);
+  }
+
+  const totalMatches = files.reduce((acc, f) => acc + (f.matchCount || f.lines.length || 1), 0);
+  return { files, totalMatches, isGlobList };
+}
+
+/** Panel untuk tool pencarian file — grep/glob/ast_grep dengan visualisasi hierarkis & readable. */
+export function SearchTool({ tool }: { tool: ToolCallData }) {
+  const [filterText, setFilterText] = useState('');
+  const details = (tool.details ?? {}) as Record<string, any>;
+  const output = tool.output || (typeof details.displayContent === 'string' ? details.displayContent : '');
+  const query = queryOf(tool);
+  const isGlob = tool.type === 'glob' || tool.name === 'glob';
+
+  const display = useMemo(() => truncateTailLines(output, MAX_OUTPUT_LINES), [output]);
+  const { files, totalMatches, isGlobList } = useMemo(() => parseGrepOutput(display.text), [display.text]);
+
+  const filteredFiles = useMemo(() => {
+    if (!filterText) return files;
+    const lower = filterText.toLowerCase();
+    return files
+      .map((file) => {
+        const pathMatches = file.path.toLowerCase().includes(lower);
+        const matchingLines = file.lines.filter((l) => l.text.toLowerCase().includes(lower));
+        if (pathMatches) return file;
+        if (matchingLines.length > 0) {
+          return { ...file, lines: matchingLines };
+        }
+        return null;
+      })
+      .filter((f): f is ParsedFileMatches => f !== null);
+  }, [files, filterText]);
+
+  const syntaxReady = useSyntaxReady();
+
+  const highlightedByFile = useMemo(() => {
+    return filteredFiles.map((file) => {
+      const lang = getLanguageFromPath(file.path);
+      return highlightLines(
+        file.lines.map((line) => line.text).join('\n'),
+        lang
+      );
+    });
+  }, [filteredFiles, syntaxReady]);
+
+  if (!output && files.length === 0) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-dashed border-ink/15 px-3 py-2.5 text-[11.5px] text-ink/45">
+        {isGlob ? <FolderSearch size={13} className="shrink-0" /> : <FileSearch size={13} className="shrink-0" />}
+        <span>No {isGlob ? 'files' : 'matches'} found{query ? ` for "${query}"` : ''}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Header Info Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-ink/8 bg-paper px-3 py-2">
+        <div className="flex flex-wrap items-center gap-2 text-[11px]">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-ink/5 text-ink/60">
+            {isGlob || isGlobList ? <FolderSearch size={12} /> : <FileSearch size={12} />}
+          </span>
+          <span className="font-semibold text-ink">
+            {isGlob || isGlobList ? 'Files Found' : 'Search Matches'}
+          </span>
+          <span className="rounded-full bg-ink/5 px-2 py-0.5 font-mono text-[10px] text-ink/60">
+            {totalMatches} {totalMatches === 1 ? 'match' : 'matches'}
+          </span>
+          {files.length > 1 && (
+            <span className="font-mono text-[10px] text-ink/40">
+              in {files.length} {files.length === 1 ? 'file' : 'files'}
+            </span>
+          )}
+          {query && (
+            <span className="rounded border border-ink/10 bg-canvas px-1.5 py-0.5 font-mono text-[10px] text-ink/75">
+              "{query}"
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {files.length > 4 && (
+            <input
+              type="text"
+              placeholder="Filter paths..."
+              value={filterText}
+              onChange={(e) => setFilterText(e.currentTarget.value)}
+              className="h-6 w-28 rounded border border-ink/10 bg-canvas px-2 text-[10.5px] text-ink placeholder:text-ink/30 focus:border-ink/30 focus:outline-none"
+            />
+          )}
+          <CopyButton
+            text={output}
+            className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+            label="Copy"
+          />
+        </div>
+      </div>
+
+      {/* Results Container */}
+      {display.skipped > 0 && (
+        <div className="rounded-lg border border-dashed border-ink/15 bg-canvas/50 px-3 py-1.5 font-mono text-[10.5px] text-ink/55">
+          … {display.skipped} earlier lines hidden
+        </div>
+      )}
+      <div className="max-h-80 space-y-2 overflow-y-auto overscroll-contain pr-0.5">
+        {filteredFiles.map((file, fileIdx) => (
+          <div key={fileIdx} className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+            {/* File Header */}
+            <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-2.5 py-1.5">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <FileText size={12} className="shrink-0 text-ink/40" />
+                <span className="truncate font-mono text-[11px] font-medium text-ink/85">{file.path}</span>
+              </div>
+              {file.matchCount > 0 && !isGlobList && (
+                <span className="ml-2 shrink-0 rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9.5px] text-ink/50">
+                  {file.matchCount} {file.matchCount === 1 ? 'hit' : 'hits'}
+                </span>
+              )}
+            </div>
+
+            {/* Code Lines inside file — satu scroll horizontal per file, semua row selebar konten terlebar */}
+            {file.lines.length > 0 && (
+              <div className="overflow-x-auto overscroll-x-contain">
+                <div className="w-max min-w-full divide-y divide-ink/[0.04] font-mono text-[11px] leading-relaxed select-text">
+                  {file.lines.map((line, lineIdx) => (
+                    <div
+                      key={lineIdx}
+                      className={`flex items-start gap-2.5 px-2.5 py-1 transition-colors ${
+                        line.isMatch ? 'bg-warning/[0.08] text-ink' : 'bg-paper text-ink/60 hover:bg-ink/[0.02]'
+                      }`}
+                    >
+                      <span
+                        className={`sticky left-0 z-10 flex w-9 shrink-0 select-none items-center justify-end bg-inherit font-mono text-[10px] ${
+                          line.isMatch ? 'font-semibold text-warning-dark dark:text-warning' : 'text-ink/30'
+                        }`}
+                      >
+                        {line.isMatch && <ChevronRight size={10} className="mr-0.5 text-warning" />}
+                        {line.lineNum}
+                      </span>
+                      <pre
+                        className="shiki whitespace-pre font-mono"
+                        dangerouslySetInnerHTML={{ __html: highlightedByFile[fileIdx]?.[lineIdx] || '&nbsp;' }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {filteredFiles.length === 0 && (
+          <div className="rounded-lg border border-dashed border-ink/15 p-4 text-center font-mono text-[11px] text-ink/40">
+            No results match filter "{filterText}"
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/SecurityScan.tsx

@@ -0,0 +1,102 @@
+import { ShieldAlert, ShieldCheck } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+
+interface ScanFinding {
+  severity?: unknown;
+  message?: unknown;
+  file?: unknown;
+  path?: unknown;
+  line?: unknown;
+  rule?: unknown;
+}
+
+function severityOf(f: ScanFinding): 'high' | 'medium' | 'low' | 'info' {
+  const s = typeof f.severity === 'string' ? f.severity.toLowerCase() : '';
+  if (s === 'high' || s === 'critical' || s === 'error') return 'high';
+  if (s === 'medium' || s === 'warning') return 'medium';
+  if (s === 'low') return 'low';
+  return 'info';
+}
+
+const SEVERITY_STYLES = {
+  high: 'bg-error/10 text-error',
+  medium: 'bg-warning/10 text-warning',
+  low: 'bg-ink/8 text-ink/60',
+  info: 'bg-ink/5 text-ink/50',
+} as const;
+
+function countBySeverity(findings: ScanFinding[]): Record<string, number> {
+  const counts: Record<string, number> = { high: 0, medium: 0, low: 0, info: 0 };
+  for (const f of findings) counts[severityOf(f)]++;
+  return counts;
+}
+
+function parseScanFindings(output: string): ScanFinding[] {
+  if (!output) return [];
+  try {
+    const data = JSON.parse(output);
+    if (Array.isArray(data)) return data;
+    if (data && typeof data === 'object') {
+      if (Array.isArray(data.findings)) return data.findings;
+      if (Array.isArray(data.vulnerabilities)) return data.vulnerabilities;
+      if (Array.isArray(data.issues)) return data.issues;
+    }
+  } catch {}
+  return [];
+}
+
+/** Panel untuk tool `security_scan` — ringkasan + temuan scan. */
+export function SecurityScan({ tool }: { tool: ToolCallData }) {
+  const details = tool.details ?? {};
+  const findings: ScanFinding[] = Array.isArray(details.findings)
+    ? details.findings
+    : parseScanFindings(tool.output ?? '');
+
+  if (findings.length === 0) {
+    if (!tool.output) {
+      return (
+        <div className="flex items-center gap-2 rounded-lg border border-success/20 bg-success/[0.04] px-3 py-2.5 text-[11.5px] text-success">
+          <ShieldCheck size={13} className="shrink-0" />
+          <span>No issues found</span>
+        </div>
+      );
+    }
+    return <FallbackOutput text={tool.output} />;
+  }
+
+  const counts = countBySeverity(findings);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8">
+      <div className="flex items-center gap-2 border-b border-ink/8 bg-paper px-2.5 py-1.5">
+        <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">Findings</span>
+        <span className="ml-auto flex items-center gap-1.5 font-mono text-[9.5px]">
+          {counts.high > 0 && <span className="rounded-full bg-error/10 px-1.5 py-px text-error">{counts.high} high</span>}
+          {counts.medium > 0 && <span className="rounded-full bg-warning/10 px-1.5 py-px text-warning">{counts.medium} med</span>}
+          {counts.low > 0 && <span className="rounded-full bg-ink/8 px-1.5 py-px text-ink/55">{counts.low} low</span>}
+        </span>
+      </div>
+      <div className="divide-y divide-ink/6 bg-canvas/40 py-1">
+        {findings.map((f, index) => {
+          const sev = severityOf(f);
+          const msg = typeof f.message === 'string' ? f.message : '';
+          const file = typeof f.file === 'string' ? f.file : typeof f.path === 'string' ? f.path : '';
+          const line = typeof f.line === 'number' ? f.line : undefined;
+          const rule = typeof f.rule === 'string' ? f.rule : undefined;
+          return (
+            <div key={index} className="flex items-start gap-2 px-2.5 py-1.5 text-[11.5px]">
+              <ShieldAlert size={11} className={`mt-0.5 shrink-0 ${sev === 'high' ? 'text-error' : sev === 'medium' ? 'text-warning' : 'text-ink/40'}`} />
+              <span className="min-w-0 flex-1 break-words">
+                <span className={`mr-1.5 rounded-full px-1.5 py-px font-mono text-[9px] ${SEVERITY_STYLES[sev]}`}>{sev}</span>
+                {file && <span className="font-mono text-[10px] text-ink/45">{file}{line !== undefined ? `:${line}` : ''}: </span>}
+                <span className="text-ink/80">{msg}</span>
+                {rule && <span className="ml-1 font-mono text-[9.5px] text-ink/35">({rule})</span>}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}