pi-web-toolkit 0.1.1 → 0.2.0

package/extensions/web_browse.ts

@@ -14,7 +14,6 @@
 import {
   defineTool,
   type ExtensionAPI,
-  truncateHead,
   formatSize,
   DEFAULT_MAX_BYTES,
   DEFAULT_MAX_LINES,
@@ -22,236 +21,14 @@ import {
 import { StringEnum } from "@earendil-works/pi-ai";
 import { Text } from "@earendil-works/pi-tui";
 import { Type, type Static } from "typebox";
-import { spawn } from "node:child_process";
-import * as fs from "node:fs";
-import * as os from "node:os";
-import * as path from "node:path";
-
-interface BrowseAction {
-  type: "click" | "fill" | "type" | "press" | "wait" | "wait_selector" | "scroll";
-  selector?: string;
-  value?: string;
-  key?: string;
-  ms?: number;
-  direction?: "down" | "up" | "bottom" | "top";
-  amount?: number;
-  state?: "attached" | "visible" | "hidden";
-}
-
-interface AgentBrowserBatchItem {
-  success: boolean;
-  command: string[];
-  result?: any;
-  error?: string | null;
-}
-
-function requireString(action: BrowseAction, field: "selector" | "value" | "key"): string {
-  const value = action[field];
-  if (typeof value !== "string" || value.length === 0) {
-    throw new Error(`Action "${action.type}" requires non-empty ${field}`);
-  }
-  return value;
-}
-
-function requireInteger(action: BrowseAction, field: "ms" | "amount"): number {
-  const value = action[field];
-  if (!Number.isInteger(value) || value < 0) {
-    throw new Error(`Action "${action.type}" requires non-negative integer ${field}`);
-  }
-  return value;
-}
-
-function waitForSelectorScript(selector: string, state: "attached" | "visible" | "hidden"): string {
-  const selectorLiteral = JSON.stringify(selector);
-  const stateLiteral = JSON.stringify(state);
-  return `await new Promise((resolve, reject) => {
-    const selector = ${selectorLiteral};
-    const state = ${stateLiteral};
-    const deadline = Date.now() + 30000;
-    const isVisible = (el) => !!(el && (el.offsetWidth || el.offsetHeight || el.getClientRects().length));
-    const check = () => {
-      const el = document.querySelector(selector);
-      const ok = state === "attached" ? !!el : state === "hidden" ? !isVisible(el) : isVisible(el);
-      if (ok) return resolve(true);
-      if (Date.now() > deadline) return reject(new Error(\`Timed out waiting for ${state} selector: ${selector}\`));
-      setTimeout(check, 100);
-    };
-    check();
-  })`;
-}
-
-function buildBatchCommands(
-  url: string,
-  actions: BrowseAction[],
-  selector?: string,
-): string[][] {
-  const commands: string[][] = [["open", url]];
-
-  for (const action of actions) {
-    switch (action.type) {
-      case "click":
-        commands.push(["click", requireString(action, "selector")]);
-        break;
-      case "fill":
-        commands.push(["fill", requireString(action, "selector"), requireString(action, "value")]);
-        break;
-      case "type":
-        commands.push(["type", requireString(action, "selector"), requireString(action, "value")]);
-        break;
-      case "press": {
-        if (action.selector) {
-          commands.push(["focus", action.selector]);
-        }
-        commands.push(["press", requireString(action, "key")]);
-        break;
-      }
-      case "wait":
-        commands.push(["wait", String(requireInteger(action, "ms"))]);
-        break;
-      case "wait_selector": {
-        const state = action.state ?? "visible";
-        const waitSelector = requireString(action, "selector");
-        if (state === "visible") {
-          commands.push(["wait", waitSelector]);
-        } else {
-          commands.push(["eval", waitForSelectorScript(waitSelector, state)]);
-        }
-        break;
-      }
-      case "scroll": {
-        const dir = action.direction ?? "down";
-        if (dir === "top") {
-          commands.push(["eval", "window.scrollTo(0, 0)"]);
-        } else if (dir === "bottom") {
-          commands.push(["eval", "window.scrollTo(0, document.body.scrollHeight)"]);
-        } else {
-          commands.push(["scroll", dir, String(action.amount ?? 500)]);
-        }
-        break;
-      }
-      default:
-        throw new Error(`Unsupported browser action: ${(action as BrowseAction).type}`);
-    }
-  }
-
-  // Extract content
-  if (selector) {
-    commands.push(["get", "text", selector, "--json"]);
-  } else {
-    commands.push(["snapshot", "-i", "--json"]);
-  }
-
-  // Metadata
-  commands.push(["get", "title", "--json"]);
-  commands.push(["get", "url", "--json"]);
-
-  return commands;
-}
-
-function runAgentBrowserBatch(
-  commands: string[][],
-  options: { session: string; headless: boolean; signal?: AbortSignal; timeout?: number },
-): Promise<AgentBrowserBatchItem[]> {
-  const args = ["--session", options.session];
-  if (!options.headless) args.push("--headed");
-  args.push("batch", "--bail", "--json");
-
-  return new Promise((resolve, reject) => {
-    const proc = spawn("agent-browser", args, {
-      shell: false,
-      stdio: ["pipe", "pipe", "pipe"],
-    });
-
-    let stdout = "";
-    let stderr = "";
-    let timeoutId: NodeJS.Timeout | undefined;
-    let settled = false;
-
-    const cleanup = () => {
-      if (timeoutId) clearTimeout(timeoutId);
-      if (options.signal) options.signal.removeEventListener("abort", kill);
-    };
-
-    const settleReject = (err: Error) => {
-      if (settled) return;
-      settled = true;
-      cleanup();
-      reject(err);
-    };
-
-    const kill = () => proc.kill("SIGTERM");
-
-    proc.stdout.on("data", (data: Buffer) => {
-      stdout += data.toString();
-    });
-
-    proc.stderr.on("data", (data: Buffer) => {
-      stderr += data.toString();
-    });
-
-    if (options.timeout) {
-      timeoutId = setTimeout(() => {
-        proc.kill("SIGTERM");
-        settleReject(new Error(`agent-browser timed out after ${options.timeout}ms`));
-      }, options.timeout);
-    }
-
-    proc.on("close", (code) => {
-      if (settled) return;
-      settled = true;
-      cleanup();
-
-      if (code !== 0 && !stdout.trim()) {
-        reject(new Error(`agent-browser failed (exit ${code}):\n${stderr || "unknown error"}`));
-        return;
-      }
-
-      try {
-        const results = JSON.parse(stdout) as AgentBrowserBatchItem[];
-        resolve(results);
-      } catch (err: any) {
-        reject(new Error(
-          `Failed to parse agent-browser output: ${err.message}\nstdout: ${stdout}\nstderr: ${stderr}`
-        ));
-      }
-    });
-
-    proc.on("error", (err: any) => {
-      if (err.code === "ENOENT") {
-        settleReject(new Error(
-          "agent-browser is not installed.\n\nInstall it with:\n  npm i -g agent-browser && agent-browser install\n\nThen run: agent-browser doctor"
-        ));
-      } else {
-        settleReject(err);
-      }
-    });
-
-    if (options.signal) {
-      if (options.signal.aborted) kill();
-      else options.signal.addEventListener("abort", kill, { once: true });
-    }
-
-    proc.stdin.write(JSON.stringify(commands));
-    proc.stdin.end();
-  });
-}
-
-function closeAgentBrowserSession(session: string, signal?: AbortSignal): Promise<void> {
-  return new Promise((resolve) => {
-    const proc = spawn("agent-browser", ["--session", session, "close"], {
-      shell: false,
-      stdio: ["ignore", "ignore", "ignore"],
-    });
-    const done = () => resolve();
-    proc.on("close", done);
-    proc.on("error", done);
-    if (signal) {
-      const kill = () => proc.kill("SIGTERM");
-      if (signal.aborted) kill();
-      else signal.addEventListener("abort", kill, { once: true });
-    }
-  });
-}
+import {
+  type BrowseAction,
+  buildBatchCommands,
+  runAgentBrowserBatch,
+  closeAgentBrowserSession,
+} from "./utils/agent-browser";
+import { writeWithFallback } from "./utils/output-sink";
+import { abbreviateUrl, getErrorText, normalizeWhitespace } from "./utils/render-helpers";
 
 export const WebBrowseActionSchema = Type.Object({
   type: StringEnum(["click", "fill", "type", "press", "wait", "wait_selector", "scroll"] as const),
@@ -277,6 +54,34 @@ export const WebBrowseParamsSchema = Type.Object({
 
 export type WebBrowseInput = Static<typeof WebBrowseParamsSchema>;
 
+function formatBrowseStep(action: BrowseAction): string {
+  switch (action.type) {
+    case "click":
+      return `click ${action.selector ?? ""}`;
+    case "fill":
+      return `fill ${action.selector ?? ""} "${action.value ?? ""}"`;
+    case "type":
+      return `type ${action.selector ?? ""} "${action.value ?? ""}"`;
+    case "press":
+      return action.selector
+        ? `focus ${action.selector} + press ${action.key ?? ""}`
+        : `press ${action.key ?? ""}`;
+    case "wait":
+      return action.selector
+        ? `wait for ${action.selector}`
+        : `wait ${action.ms ?? 0}ms`;
+    case "wait_selector":
+      return `wait for ${action.selector ?? ""} (${action.state ?? "visible"})`;
+    case "scroll": {
+      const dir = action.direction ?? "down";
+      if (dir === "top" || dir === "bottom") return `scroll to ${dir}`;
+      return `scroll ${dir}${action.amount ? ` ${action.amount}px` : ""}`;
+    }
+    default:
+      return String((action as any).type);
+  }
+}
+
 const webBrowseTool = defineTool({
   name: "web_browse",
   label: "Web Browse",
@@ -303,10 +108,22 @@ const webBrowseTool = defineTool({
   async execute(toolCallId, params, signal, onUpdate) {
     let fullOutputPath: string | undefined;
     const session = `pi-web-browse-${toolCallId}`;
+    const actionCount = params.actions.length;
+    const steps = [
+      `open ${params.url}`,
+      ...(params.actions as BrowseAction[]).map(formatBrowseStep),
+      params.selector ? `get text ${params.selector}` : "snapshot",
+      "get title",
+      "get url",
+    ];
+
+    // Stream planned steps for isPartial rendering
+    onUpdate?.({
+      content: [{ type: "text", text: `Browsing ${params.url} (${actionCount} actions)...` }],
+      details: { url: params.url, steps, actionCount, selector: params.selector, headless: params.headless ?? true },
+    });
 
     try {
-      onUpdate?.({ content: [{ type: "text", text: `Browsing ${params.url}...` }], details: {} });
-
       const commands = buildBatchCommands(
         params.url,
         params.actions as BrowseAction[],
@@ -347,6 +164,7 @@ const webBrowseTool = defineTool({
 
       const title = titleResult?.result?.title ?? "";
       const finalUrl = urlResult?.result?.url ?? params.url;
+      const preview = content.replace(/\s+/g, " ").trim().slice(0, 500);
 
       const lines: string[] = [
         `Title: ${title || "(no title)"}`,
@@ -358,24 +176,23 @@ const webBrowseTool = defineTool({
       ];
 
       const rawText = lines.join("\n");
-      const truncation = truncateHead(rawText, {
-        maxLines: DEFAULT_MAX_LINES,
-        maxBytes: DEFAULT_MAX_BYTES,
+      const sink = await writeWithFallback(rawText, {
+        tmpPrefix: "pi-web-browse-",
       });
-
-      let finalText = truncation.content;
-      if (truncation.truncated) {
-        const fullOutputDir = await fs.promises.mkdtemp(path.join(os.tmpdir(), "pi-web-browse-"));
-        fullOutputPath = path.join(fullOutputDir, "output.txt");
-        await fs.promises.writeFile(fullOutputPath, rawText, "utf-8");
-        finalText += `\n\n[Output truncated: ${truncation.outputLines} of ${truncation.totalLines} lines (${formatSize(truncation.outputBytes)} of ${formatSize(truncation.totalBytes)}). Full output saved to: ${fullOutputPath}]`;
-      }
-
-      onUpdate?.({ content: [{ type: "text", text: `Extracted from ${finalUrl}` }], details: {} });
+      fullOutputPath = sink.fullOutputPath;
 
       return {
-        content: [{ type: "text", text: finalText }],
-        details: { title, url: finalUrl, fullOutputPath },
+        content: [{ type: "text", text: sink.text }],
+        details: {
+          title,
+          url: finalUrl,
+          fullOutputPath,
+          preview,
+          selector: params.selector,
+          headless: params.headless ?? true,
+          actionCount,
+          steps,
+        },
       };
     } catch (err: any) {
       throw new Error(`Error browsing ${params.url}: ${err.message ?? err}`);
@@ -388,24 +205,109 @@ const webBrowseTool = defineTool({
     let text = theme.fg("toolTitle", theme.bold("web_browse "));
     text += theme.fg("muted", args.url);
     text += theme.fg("dim", ` (${args.actions?.length ?? 0} actions)`);
+    if (args.selector) {
+      text += theme.fg("dim", ` [selector=${args.selector}]`);
+    }
+    if (args.headless === false) {
+      text += theme.fg("dim", " [headed]");
+    }
     return new Text(text, 0, 0);
   },
 
-  renderResult(result, { expanded, isPartial }, theme) {
+  renderResult(result, { expanded, isPartial }, theme, context) {
+    const isError = context?.isError ?? false;
+
     if (isPartial) {
-      return new Text(theme.fg("warning", "Browsing..."), 0, 0);
+      const progress = (result.details as any);
+      const steps = progress?.steps as string[] | undefined;
+      const url = progress?.url as string | undefined;
+      const actionCount = progress?.actionCount ?? steps?.length ?? 0;
+      let text = theme.fg("warning", "Browsing");
+      if (url) {
+        text += `  ${theme.fg("dim", abbreviateUrl(url))}`;
+      }
+      text += theme.fg("dim", ` (${actionCount} steps)`);
+      if (steps && steps.length > 0) {
+        // Limit to first 5 steps to avoid blowing up vertical space
+        const maxPreviewSteps = 5;
+        for (let i = 0; i < Math.min(steps.length, maxPreviewSteps); i++) {
+          text += `\n  ${theme.fg("dim", `[${i + 1}] ${steps[i]}`)}`;
+        }
+        if (steps.length > maxPreviewSteps) {
+          text += `\n  ${theme.fg("muted", `... and ${steps.length - maxPreviewSteps} more`)}`;
+        }
+      }
+      return new Text(text, 0, 0);
+    }
+
+    const details = result.details as {
+      title?: string;
+      url?: string;
+      fullOutputPath?: string;
+      preview?: string;
+      selector?: string;
+      headless?: boolean;
+      actionCount?: number;
+      steps?: string[];
+    } | undefined;
+
+    if (isError) {
+      const errText = getErrorText(result);
+      let text = theme.fg("error", "✗ Browse failed");
+      if (details?.url) text += `  ${theme.fg("dim", abbreviateUrl(details.url))}`;
+      text += `\n\n  ${theme.fg("toolOutput", errText)}`;
+      if (details?.steps && details.steps.length > 0) {
+        text += `\n\n${theme.fg("dim", "Steps attempted:")}`;
+        for (let i = 0; i < details.steps.length; i++) {
+          text += `\n  ${theme.fg("dim", `[${i + 1}] ${details.steps[i]}`)}`;
+        }
+      }
+      return new Text(text, 0, 0);
     }
-    const details = result.details as { title?: string; url?: string; fullOutputPath?: string } | undefined;
+
     let text = theme.fg("success", "✓ Browsed");
     if (details?.title) {
-      text += theme.fg("muted", ` — ${details.title}`);
+      text += `  ${theme.fg("toolTitle", details.title)}`;
     }
-    if (expanded && details?.url) {
-      text += `\n${theme.fg("dim", details.url)}`;
+    if (details?.url) {
+      text += `\n  ${theme.fg("dim", abbreviateUrl(details.url))}`;
+    }
+    if (details?.actionCount) {
+      text += theme.fg("muted", ` (${details.actionCount} actions)`);
+    }
+
+    if (details?.selector) {
+      text += `\n  ${theme.fg("dim", `[selector=${details.selector}]`)}`;
     }
-    if (expanded && details?.fullOutputPath) {
-      text += `\n${theme.fg("dim", `Full output: ${details.fullOutputPath}`)}`;
+    if (details?.headless === false) {
+      text += `${details?.selector ? "" : "\n  "}${theme.fg("dim", "[headed]")}`;
     }
+
+    if (!expanded && details?.preview) {
+      const snippet = normalizeWhitespace(details.preview);
+      const short = snippet.length > 160
+        ? snippet.slice(0, 160).replace(/\s+\S*$/, "") + "..."
+        : snippet;
+      text += `\n\n  ${theme.fg("muted", short)}`;
+    }
+
+    if (expanded) {
+      if (details?.steps && details.steps.length > 0) {
+        text += `\n\n${theme.fg("dim", "Steps:")}`;
+        for (let i = 0; i < details.steps.length; i++) {
+          text += `\n  ${theme.fg("dim", `[${i + 1}] ${details.steps[i]}`)}`;
+        }
+      }
+
+      if (details?.preview) {
+        text += `\n\n  ${theme.fg("muted", normalizeWhitespace(details.preview))}`;
+      }
+
+      if (details?.fullOutputPath) {
+        text += `\n\n${theme.fg("accent", `Full output: ${details.fullOutputPath}`)}`;
+      }
+    }
+
     return new Text(text, 0, 0);
   },
 });

package/extensions/web_fetch.ts

@@ -13,7 +13,6 @@
 import {
   defineTool,
   type ExtensionAPI,
-  truncateHead,
   formatSize,
   DEFAULT_MAX_BYTES,
   DEFAULT_MAX_LINES,
@@ -23,7 +22,10 @@ import { Type, type Static } from "typebox";
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { runScrapling } from "./utils/scrapling";
+import { runScraplingWithFallback } from "./utils/scrapling";
+import { extractPreview } from "./utils/content-preview";
+import { writeWithFallback } from "./utils/output-sink";
+import { abbreviateUrl, getDomain, getErrorText, normalizeWhitespace, formatExtraction } from "./utils/render-helpers";
 
 export const WebFetchParamsSchema = Type.Object({
   url: Type.String({ description: "Full URL to fetch (e.g. https://example.com/article)" }),
@@ -45,9 +47,11 @@ const webFetchTool = defineTool({
   ].join(" "),
   promptSnippet: "Fetch full page content from a URL as markdown",
   promptGuidelines: [
-    "Use web_fetch after web_search to read full articles, docs, or pages found in search results.",
-    "Always pass the full URL including https://.",
+    "Use web_fetch to read a single static page (article, doc, or blog) when given a specific URL.",
+    "For a single URL, always use web_fetch instead of web_batch_fetch.",
     "If the page is dynamic/JavaScript-heavy, the tool automatically uses browser automation.",
+    "When reading multiple (2–5) pages at once (e.g., after web_search), prefer web_batch_fetch over repeated web_fetch calls.",
+    "Always pass the full URL including https://.",
   ],
   parameters: WebFetchParamsSchema,
 
@@ -57,46 +61,37 @@ const webFetchTool = defineTool({
     let tmpFull: string | undefined;
 
     try {
-      const cmd = params.stealthy ? "stealthy-fetch" : "fetch";
-      const args = ["extract", cmd, params.url, tmpFile, "--ai-targeted"];
-      if (params.selector) {
-        args.push("--css-selector", params.selector);
-      }
+      const { ok, stderr } = await runScraplingWithFallback(
+        params.url,
+        tmpFile,
+        { selector: params.selector, stealthy: params.stealthy, noGetFallback: params.stealthy },
+        signal,
+      );
 
-      const { stdout, stderr, exitCode } = await runScrapling(args, signal);
-
-      if (exitCode !== 0) {
-        // Try fallback to simple HTTP GET if fetch/stealthy-fetch failed
-        if (!params.stealthy) {
-          const fallback = await runScrapling(["extract", "get", params.url, tmpFile, "--ai-targeted"], signal);
-          if (fallback.exitCode !== 0) {
-            throw new Error(`Failed to fetch ${params.url}\n\nscrapling error:\n${stderr || fallback.stderr}`);
-          }
-        } else {
-          throw new Error(`Failed to fetch ${params.url}\n\nscrapling error:\n${stderr}`);
-        }
+      if (!ok) {
+        throw new Error(`Failed to fetch ${params.url}\n\nscrapling error:\n${stderr}`);
       }
 
       const content = await fs.promises.readFile(tmpFile, "utf-8");
       const stats = await fs.promises.stat(tmpFile);
 
+      const preview = extractPreview(content, 500);
       const rawText = `Fetched: ${params.url}\nSize: ${stats.size} bytes\n\n---\n\n${content}`;
-      const truncation = truncateHead(rawText, {
-        maxLines: DEFAULT_MAX_LINES,
-        maxBytes: DEFAULT_MAX_BYTES,
+      const sink = await writeWithFallback(rawText, {
+        tmpPrefix: "pi-web-fetch-full-",
       });
-
-      let finalText = truncation.content;
-      if (truncation.truncated) {
-        const tmpFullDir = await fs.promises.mkdtemp(path.join(os.tmpdir(), "pi-web-fetch-full-"));
-        tmpFull = path.join(tmpFullDir, "output.txt");
-        await fs.promises.writeFile(tmpFull, rawText, "utf-8");
-        finalText += `\n\n[Output truncated: ${truncation.outputLines} of ${truncation.totalLines} lines (${formatSize(truncation.outputBytes)} of ${formatSize(truncation.totalBytes)}). Full output saved to: ${tmpFull}]`;
-      }
+      tmpFull = sink.fullOutputPath;
 
       return {
-        content: [{ type: "text", text: finalText }],
-        details: { url: params.url, bytes: stats.size, fullOutputPath: tmpFull },
+        content: [{ type: "text", text: sink.text }],
+        details: {
+          url: params.url,
+          bytes: stats.size,
+          fullOutputPath: tmpFull,
+          preview,
+          selector: params.selector,
+          stealthy: params.stealthy,
+        },
       };
     } catch (err: any) {
       throw new Error(`Error fetching ${params.url}: ${err.message ?? err}`);
@@ -108,27 +103,73 @@ const webFetchTool = defineTool({
   renderCall(args, theme) {
     let text = theme.fg("toolTitle", theme.bold("web_fetch "));
     text += theme.fg("muted", args.url);
+    if (args.stealthy) {
+      text += theme.fg("dim", " [stealthy]");
+    }
     if (args.selector) {
-      text += theme.fg("dim", ` selector=${args.selector}`);
+      text += theme.fg("dim", ` [selector=${args.selector}]`);
     }
     return new Text(text, 0, 0);
   },
 
-  renderResult(result, { expanded, isPartial }, theme) {
+  renderResult(result, { expanded, isPartial }, theme, context) {
+    const isError = context?.isError ?? false;
+
     if (isPartial) {
-      return new Text(theme.fg("warning", "Fetching..."), 0, 0);
+      const url = (result.details as any)?.url as string | undefined;
+      const domain = url ? getDomain(url) : "";
+      const label = domain ? `Fetching ${domain}...` : "Fetching...";
+      return new Text(theme.fg("warning", label), 0, 0);
     }
-    const details = result.details as { url?: string; bytes?: number; fullOutputPath?: string } | undefined;
+    const details = result.details as {
+      url?: string;
+      bytes?: number;
+      fullOutputPath?: string;
+      preview?: string;
+      selector?: string;
+      stealthy?: boolean;
+    } | undefined;
+
+    if (isError) {
+      const errText = getErrorText(result);
+      let text = theme.fg("error", "✗ Fetch failed");
+      if (details?.url) text += `  ${theme.fg("dim", abbreviateUrl(details.url))}`;
+      text += `\n\n  ${theme.fg("toolOutput", errText)}`;
+      return new Text(text, 0, 0);
+    }
+
     let text = theme.fg("success", "✓ Fetched");
-    if (details?.bytes) {
-      text += theme.fg("muted", ` (${formatSize(details.bytes)})`);
+    if (details?.url) {
+      text += `  ${theme.fg("dim", abbreviateUrl(details.url))}`;
     }
+    if (details?.bytes && details?.preview) {
+      text += `  ${theme.fg("muted", formatExtraction(details.bytes, details.preview.length))}`;
+    }
+
+    if (details?.selector) {
+      text += `\n  ${theme.fg("dim", `[selector=${details.selector}]`)}`;
+    }
+    if (details?.stealthy) {
+      text += `${details?.selector ? "" : "\n  "}${theme.fg("dim", "[stealthy]")}`;
+    }
+
+    if (!expanded && details?.preview) {
+      const snippet = normalizeWhitespace(details.preview);
+      const short = snippet.length > 160
+        ? snippet.slice(0, 160).replace(/\s+\S*$/, "") + "..."
+        : snippet;
+      text += `\n\n  ${theme.fg("muted", short)}`;
+    }
+
     if (expanded) {
-      text += `\n${theme.fg("dim", details?.url ?? "")}`;
+      if (details?.preview) {
+        text += `\n\n  ${theme.fg("muted", normalizeWhitespace(details.preview))}`;
+      }
       if (details?.fullOutputPath) {
-        text += `\n${theme.fg("dim", `Full output: ${details.fullOutputPath}`)}`;
+        text += `\n\n${theme.fg("accent", `Full output: ${details.fullOutputPath}`)}`;
       }
     }
+
     return new Text(text, 0, 0);
   },
 });