ompchamber 0.3.0

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

@@ -0,0 +1,202 @@
+import { useMemo } from 'preact/hooks';
+import { AlertCircle, Ban, Clock, Code2, Play } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { highlightCode, highlightJson, tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+/** Panel khusus untuk tool `eval` — eksekusi kode script, browser eval, dsb. */
+export function Eval({ tool }: { tool: ToolCallData }) {
+  const input = tool.input;
+  const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, any>) : undefined;
+
+  const code =
+    typeof inputObj?.code === 'string'
+      ? inputObj.code
+      : typeof input === 'string'
+        ? input
+        : '';
+
+  const language = (typeof inputObj?.language === 'string' ? inputObj.language : 'js').toUpperCase();
+  const timeout = typeof inputObj?.timeout === 'number' ? `${inputObj.timeout}s` : undefined;
+  const title = typeof inputObj?.title === 'string' ? inputObj.title : undefined;
+
+  const output = tool.output || (tool.error ? `Error: ${tool.error}` : '');
+  const isError = tool.status === 'error' || output.includes('ToolError:') || output.includes('Command exited with code');
+  const isAborted = output.includes('Command aborted') || tool.status === 'aborted';
+
+  const syntaxReady = useSyntaxReady();
+
+  const jsonResult = useMemo(
+    () => (!isError && !isAborted ? tryParseJson(output) : { isValid: false }),
+    [output, isError, isAborted]
+  );
+
+  const truncatedCode = useMemo(() => truncateTailLines(code, MAX_OUTPUT_LINES), [code]);
+  const highlightedCode = useMemo(
+    () => highlightCode(truncatedCode.text, 'javascript'),
+    [truncatedCode, syntaxReady]
+  );
+  const truncatedOutput = useMemo(() => truncateTailLines(output, MAX_OUTPUT_LINES), [output]);
+  const truncatedJson = useMemo(
+    () => (jsonResult.isValid && jsonResult.pretty ? truncateTailLines(jsonResult.pretty, MAX_OUTPUT_LINES) : null),
+    [jsonResult]
+  );
+  const highlightedJson = useMemo(
+    () => (truncatedJson ? highlightJson(truncatedJson.text) : ''),
+    [truncatedJson, syntaxReady]
+  );
+
+  return (
+    <div className="space-y-2">
+      {/* Code Card */}
+      {code && (
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-3 py-1.5">
+            <div className="flex items-center gap-2">
+              <Code2 size={12} className="text-ink/60" />
+              <span className="font-mono text-[10.5px] font-semibold text-ink">
+                {title || 'Script Evaluation'}
+              </span>
+              <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+                {language}
+              </span>
+              {timeout && (
+                <span className="flex items-center gap-1 font-mono text-[9.5px] text-ink/40">
+                  <Clock size={10} />
+                  <span>{timeout}</span>
+                </span>
+              )}
+            </div>
+
+            <CopyButton
+              text={code}
+              className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9.5px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              label="Copy"
+            />
+          </div>
+
+          {truncatedCode.skipped > 0 && (
+            <div className="border-b border-ink/6 bg-canvas/40 px-3 py-1 font-mono text-[9.5px] text-ink/45">
+              … {truncatedCode.skipped} earlier lines hidden
+            </div>
+          )}
+          <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
+            <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+              {truncatedCode.text.split('\n').map((_, idx) => (
+                <div key={idx}>{idx + 1}</div>
+              ))}
+            </div>
+            <pre
+              className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+              dangerouslySetInnerHTML={{ __html: highlightedCode }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Output / Result Block */}
+      {output && (
+        <div
+          className={`overflow-hidden rounded-lg border ${
+            isError
+              ? 'border-error/25 bg-error/[0.03]'
+              : isAborted
+                ? 'border-warning/25 bg-warning/[0.03]'
+                : 'border-ink/8 bg-paper'
+          }`}
+        >
+          <div
+            className={`flex items-center justify-between border-b px-3 py-1.5 ${
+              isError
+                ? 'border-error/15 bg-error/[0.06]'
+                : isAborted
+                  ? 'border-warning/15 bg-warning/[0.06]'
+                  : 'border-ink/6 bg-canvas/30'
+            }`}
+          >
+            <div className="flex items-center gap-1.5">
+              {isError ? (
+                <>
+                  <AlertCircle size={11} className="text-error" />
+                  <span className="text-[9.5px] font-semibold uppercase tracking-wider text-error">
+                    Execution Error
+                  </span>
+                </>
+              ) : isAborted ? (
+                <>
+                  <Ban size={11} className="text-warning" />
+                  <span className="text-[9.5px] font-semibold uppercase tracking-wider text-warning">
+                    Evaluation Aborted
+                  </span>
+                </>
+              ) : (
+                <>
+                  <Play size={11} className="text-success" />
+                  <span className="text-[9.5px] font-semibold uppercase tracking-wider text-ink/50">
+                    Evaluation Result
+                  </span>
+                  {jsonResult.isValid && (
+                    <>
+                      <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+                        JSON
+                      </span>
+                      {jsonResult.linesCount && jsonResult.linesCount > 1 && (
+                        <span className="font-mono text-[9.5px] text-ink/40">
+                          {jsonResult.linesCount} lines
+                        </span>
+                      )}
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+
+            <CopyButton
+              text={jsonResult.isValid && jsonResult.pretty ? jsonResult.pretty : output}
+              className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9.5px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              label="Copy"
+            />
+          </div>
+
+          {jsonResult.isValid && jsonResult.pretty ? (
+            <>
+              {truncatedJson && truncatedJson.skipped > 0 && (
+                <div className="border-b border-ink/6 bg-canvas/40 px-3 py-1 font-mono text-[9.5px] text-ink/45">
+                  … {truncatedJson.skipped} earlier lines hidden
+                </div>
+              )}
+              <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
+                <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+                  {(truncatedJson ? truncatedJson.text : jsonResult.pretty).split('\n').map((_, idx) => (
+                    <div key={idx}>{idx + 1}</div>
+                  ))}
+                </div>
+                <pre
+                  className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+                  dangerouslySetInnerHTML={{ __html: highlightedJson }}
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              {truncatedOutput.skipped > 0 && (
+                <div className="border-b border-ink/6 bg-canvas/40 px-3 py-1 font-mono text-[9.5px] text-ink/45">
+                  … {truncatedOutput.skipped} earlier lines hidden
+                </div>
+              )}
+              <pre
+                className={`max-h-48 overflow-y-auto p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words select-text ${
+                  isError ? 'text-error' : isAborted ? 'text-warning' : 'text-ink/80'
+                }`}
+              >
+                {truncatedOutput.text}
+              </pre>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { GitBranch, GitMerge, GitPullRequest } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+
+interface GithubItem {
+  title?: unknown;
+  number?: unknown;
+  state?: unknown;
+  author?: unknown;
+  url?: unknown;
+  additions?: unknown;
+  deletions?: unknown;
+  merged?: unknown;
+}
+
+function stateOf(item: GithubItem): 'open' | 'merged' | 'closed' {
+  if (item.merged === true || item.state === 'merged') return 'merged';
+  if (item.state === 'closed') return 'closed';
+  return 'open';
+}
+
+const STATE_STYLES = {
+  open: 'bg-success/10 text-success',
+  merged: 'bg-ink/10 text-ink/60',
+  closed: 'bg-error/10 text-error',
+} as const;
+
+function parseGithubItems(output: string): GithubItem[] {
+  if (!output) return [];
+  try {
+    const data = JSON.parse(output);
+    if (Array.isArray(data)) return data;
+    if (data && typeof data === 'object') {
+      if (Array.isArray(data.items)) return data.items;
+      if (Array.isArray(data.pullRequests)) return data.pullRequests;
+      if (Array.isArray(data.issues)) return data.issues;
+    }
+  } catch {}
+  return [];
+}
+
+/** Ringkasan PR/issue untuk tool `github` — details.items[] atau output. */
+export function Github({ tool }: { tool: ToolCallData }) {
+  const details = tool.details ?? {};
+  const items: GithubItem[] = Array.isArray(details.items)
+    ? details.items
+    : parseGithubItems(tool.output ?? '');
+
+  if (items.length === 0) {
+    if (!tool.output) return null;
+    return <FallbackOutput text={tool.output} />;
+  }
+
+  return (
+    <ul className="divide-y divide-ink/6 overflow-hidden rounded-lg border border-ink/8 bg-canvas/40">
+      {items.map((item, index) => {
+        const state = stateOf(item);
+        const title = typeof item.title === 'string' ? item.title : '';
+        const number = typeof item.number === 'number' ? `#${item.number}` : '';
+        const author = typeof item.author === 'string' ? item.author : '';
+        const additions = typeof item.additions === 'number' ? item.additions : undefined;
+        const deletions = typeof item.deletions === 'number' ? item.deletions : undefined;
+        return (
+          <li key={index} className="px-2.5 py-2 text-[11.5px]">
+            <div className="flex items-center gap-1.5">
+              {state === 'merged' ? (
+                <GitMerge size={12} className="shrink-0 text-success" />
+              ) : state === 'closed' ? (
+                <GitPullRequest size={12} className="shrink-0 text-error" />
+              ) : (
+                <GitBranch size={12} className="shrink-0 text-success" />
+              )}
+              <span className="min-w-0 flex-1 truncate font-medium text-ink">{title}</span>
+              {number && <span className="shrink-0 font-mono text-[10px] text-ink/45">{number}</span>}
+            </div>
+            <div className="mt-1 flex items-center gap-1.5 pl-[18px] text-[10px] text-ink/50">
+              <span className={`rounded-full px-1.5 py-px font-mono ${STATE_STYLES[state]}`}>{state}</span>
+              {author && <span>{author}</span>}
+              {(additions !== undefined || deletions !== undefined) && (
+                <span className="ml-auto font-mono">
+                  {additions !== undefined && <span className="text-success">+{additions}</span>}
+                  {deletions !== undefined && <span className="ml-1 text-error">-{deletions}</span>}
+                </span>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -0,0 +1,247 @@
+import { AlertTriangle, CheckCircle2, CircleDot, FileText, Flag, Hand, Target } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { isRecord } from '@/shared/lib/util/guards';
+
+interface GoalItem {
+  title?: unknown;
+  description?: unknown;
+  status?: unknown;
+  progress?: unknown;
+  id?: unknown;
+}
+
+interface YieldFileItem {
+  path: string;
+  description?: string;
+}
+
+interface YieldPayload {
+  summary?: string;
+  report?: string;
+  architecture?: string;
+  files?: (YieldFileItem | string)[];
+  status?: string;
+  error?: string | null;
+}
+
+function itemLabel(item: GoalItem): string {
+  if (typeof item.title === 'string' && item.title) return item.title;
+  return typeof item.description === 'string' ? item.description : '';
+}
+
+function itemProgress(item: GoalItem): number | undefined {
+  return typeof item.progress === 'number' && Number.isFinite(item.progress) ? item.progress : undefined;
+}
+
+function itemStatus(item: GoalItem): 'active' | 'done' | 'paused' {
+  const s = typeof item.status === 'string' ? item.status.toLowerCase() : '';
+  if (s === 'done' || s === 'completed') return 'done';
+  if (s === 'paused' || s === 'yielded') return 'paused';
+  return 'active';
+}
+
+const STATUS_STYLES = {
+  active: 'bg-ink/8 text-ink/60',
+  done: 'bg-success/10 text-success',
+  paused: 'bg-warning/10 text-warning',
+} as const;
+
+function extractYieldPayload(tool: ToolCallData): YieldPayload | null {
+  const details = isRecord(tool.details) ? tool.details : undefined;
+  const input = isRecord(tool.input) ? tool.input : undefined;
+
+  const data = (details && isRecord(details.data) ? details.data : undefined)
+    ?? (input && isRecord(input.data) ? input.data : undefined)
+    ?? details
+    ?? input;
+
+  if (!data) return null;
+
+  const summary = typeof data.summary === 'string' ? data.summary : undefined;
+  const report = typeof data.report === 'string' ? data.report : undefined;
+  const architecture = typeof data.architecture === 'string' ? data.architecture : undefined;
+  const rawFiles = Array.isArray(data.files) ? data.files : undefined;
+  const files: (YieldFileItem | string)[] = [];
+  if (rawFiles) {
+    for (const f of rawFiles) {
+      if (typeof f === 'string' && f) {
+        files.push(f);
+      } else if (isRecord(f) && typeof f.path === 'string') {
+        files.push({ path: f.path, description: typeof f.description === 'string' ? f.description : undefined });
+      }
+    }
+  }
+
+  const status = typeof details?.status === 'string' ? details.status : (typeof data.status === 'string' ? data.status : undefined);
+  const error = typeof data.error === 'string' ? data.error : null;
+
+  if (!summary && !report && !architecture && files.length === 0 && !error) {
+    return null;
+  }
+
+  return { summary, report, architecture, files: files.length > 0 ? files : undefined, status, error };
+}
+
+/** Panel untuk tool `goal` / `yield` — status goal + progress atau structured yield result. */
+export function Goal({ tool }: { tool: ToolCallData }) {
+  const details = tool.details ?? {};
+  const items: GoalItem[] = Array.isArray(details.items) ? details.items : [];
+  const isYield = tool.type === 'yield' || tool.name === 'yield';
+  const isError = tool.status === 'error';
+
+  // Structured yield view (common in subagent result submissions)
+  if (isYield) {
+    const payload = extractYieldPayload(tool);
+    if (payload) {
+      return (
+        <div className="overflow-hidden rounded-lg border border-ink/10 bg-paper text-[12px] text-ink select-text">
+          <div className="flex items-center justify-between border-b border-ink/8 bg-canvas/40 px-3 py-2">
+            <div className="flex items-center gap-2">
+              <span className={`flex h-5 w-5 items-center justify-center rounded-md ${isError || payload.error ? 'bg-error/10 text-error' : 'bg-success/10 text-success'}`}>
+                {isError || payload.error ? <AlertTriangle size={12} /> : <CheckCircle2 size={12} />}
+              </span>
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-ink/70">
+                {isError || payload.error ? 'Yield Error' : 'Yield Result'}
+              </span>
+            </div>
+            {(payload.status || (isError ? 'error' : 'success')) && (
+              <span className={`rounded-full px-2 py-0.5 font-mono text-[9.5px] font-medium uppercase ${isError || payload.error ? 'bg-error/10 text-error' : 'bg-success/10 text-success'}`}>
+                {payload.status || (isError ? 'failed' : 'success')}
+              </span>
+            )}
+          </div>
+
+          <div className="space-y-2.5 p-3">
+            {(payload.error || (isError && tool.output)) && (
+              <div className="flex items-start gap-2 rounded-md bg-error/10 p-2.5 text-error text-[11.5px]">
+                <AlertTriangle size={13} className="shrink-0 mt-0.5" />
+                <span className="font-mono leading-relaxed">{payload.error || tool.output}</span>
+              </div>
+            )}
+
+            {payload.summary && (
+              <div>
+                <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">Summary</span>
+                <p className="mt-0.5 font-sans text-[12px] text-ink font-medium leading-relaxed">
+                  {payload.summary}
+                </p>
+              </div>
+            )}
+
+            {payload.report && payload.report !== payload.summary && (
+              <div className="rounded-md border border-ink/8 bg-canvas/30 p-2.5">
+                <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">Report</span>
+                <div className="mt-1 text-[11.5px] text-ink/85 leading-relaxed">
+                  <MarkdownRenderer content={payload.report} />
+                </div>
+              </div>
+            )}
+
+            {payload.architecture && (
+              <div>
+                <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">Evidence / Architecture</span>
+                <div className="mt-0.5 text-[11px] text-ink/75 leading-relaxed bg-ink/[0.03] p-2 rounded border border-ink/6">
+                  <MarkdownRenderer content={payload.architecture} />
+                </div>
+              </div>
+            )}
+
+            {payload.files && payload.files.length > 0 && (
+              <div>
+                <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">
+                  Files Inspected ({payload.files.length})
+                </span>
+                <div className="mt-1 grid grid-cols-1 gap-1 sm:grid-cols-2">
+                  {payload.files.map((file, i) => {
+                    const filePath = typeof file === 'string' ? file : file.path;
+                    const desc = typeof file === 'string' ? undefined : file.description;
+                    return (
+                      <div
+                        key={i}
+                        className="flex flex-col justify-between rounded border border-ink/6 bg-canvas/40 p-1.5"
+                      >
+                        <span className="inline-flex items-center gap-1 font-mono text-[10.5px] font-medium text-ink truncate">
+                          <FileText size={10} className="shrink-0 text-ink/50" />
+                          <span className="truncate">{filePath}</span>
+                        </span>
+                        {desc && (
+                          <span className="text-[10px] text-ink/60 leading-tight mt-0.5 truncate">
+                            {desc}
+                          </span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+  }
+
+  if (items.length === 0) {
+    if (!tool.output) {
+      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">
+          <Target size={13} className="shrink-0" />
+          <span>{isYield ? 'No yield' : 'No goals'}</span>
+        </div>
+      );
+    }
+    return <FallbackOutput text={tool.output} />;
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8">
+      <div className="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">
+          {isYield ? 'Yield' : 'Goals'}
+        </span>
+        <span className="ml-2 rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9.5px] text-ink/45">
+          {items.length}
+        </span>
+      </div>
+      <div className="divide-y divide-ink/6 bg-canvas/40 py-1">
+        {items.map((item, index) => {
+          const label = itemLabel(item);
+          if (!label) return null;
+          const progress = itemProgress(item);
+          const status = itemStatus(item);
+          return (
+            <div key={typeof item.id === 'string' ? item.id : `goal-${index}`} className="px-2.5 py-1.5">
+              <div className="flex items-start gap-2 text-[11.5px]">
+                {isYield ? (
+                  <Hand size={11} className="mt-0.5 shrink-0 text-ink/40" />
+                ) : (
+                  <Flag size={11} className="mt-0.5 shrink-0 text-ink/40" />
+                )}
+                <span className="min-w-0 flex-1 break-words text-ink/80">{label}</span>
+                <span className={`shrink-0 rounded-full px-1.5 py-px font-mono text-[9px] ${STATUS_STYLES[status]}`}>
+                  {status}
+                </span>
+              </div>
+              {progress !== undefined && (
+                <div className="mt-1.5 flex items-center gap-1.5 pl-[18px]">
+                  <div className="h-1 flex-1 overflow-hidden rounded-full bg-ink/8">
+                    <div
+                      className="h-full rounded-full bg-ink/60 transition-all duration-300"
+                      style={{ width: `${Math.min(100, Math.max(0, Math.round(progress * 100)))}%` }}
+                    />
+                  </div>
+                  <span className="flex shrink-0 items-center gap-0.5 font-mono text-[9px] text-ink/45">
+                    <CircleDot size={8} />
+                    {Math.round(progress * 100)}%
+                  </span>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}