feat: render screenshots inline in TUI via Image component; add parallelization guidance to SKILL.md

- browser_screenshot now has renderResult that creates an Image component
  for inline display in Kitty/iTerm2/Ghostty/WezTerm terminals
- Falls back to dim text placeholder on terminals without image support
- Updated system prompt table description to mention TUI inline rendering
- Added Parallelization section to SKILL.md teaching the agent to batch
  independent operations (browser_open_urls, browser_http_get, etc.)

2 files changed, 26 insertions, 1 deletions

diff --git a/src/domains/screenshot.ts b/src/domains/screenshot.ts
index 03b49f0..60d4b26 100644
--- a/src/domains/screenshot.ts
+++ b/src/domains/screenshot.ts
@@ -1,5 +1,7 @@
+import { readFileSync } from "node:fs";
 import { writeFile, rename } from "node:fs/promises";
 import { Type } from "typebox";
+import { Image, type ImageTheme, Text } from "@mariozechner/pi-tui";
 import type { BrowserClient } from "../client";
 import { type Result, err, ok } from "../util/result";
 import { defineBrowserTool, type ToolErr, type ToolOk } from "../util/tool";
@@ -82,6 +84,29 @@ export const screenshotTool = defineBrowserTool({
       details: { path: cap.data.path, format: cap.data.format, attached: false },
     });
   },
+
+  renderResult(result, _expanded, theme) {
+    const details = result.details as { path?: string; format?: string } | undefined;
+    const filePath = details?.path;
+    if (!filePath) {
+      return new Text(theme.fg("error", "Screenshot path missing"), 0, 0);
+    }
+    try {
+      const buf = readFileSync(filePath);
+      const b64 = buf.toString("base64");
+      const mimeType = details?.format === "jpeg" ? "image/jpeg" : "image/png";
+      const imageTheme: ImageTheme = {
+        fallbackColor: (str: string) => theme.fg("dim", str),
+      };
+      return new Image(b64, mimeType, imageTheme, {
+        maxWidthCells: 80,
+        maxHeightCells: 24,
+        filename: filePath,
+      });
+    } catch {
+      return new Text(theme.fg("warning", `Screenshot saved: ${filePath}`), 0, 0);
+    }
+  },
 });
 
 export const captureWithCrosshair = async (
diff --git a/src/prompt.ts b/src/prompt.ts
index d4ac8a3..6d2b2ab 100644
--- a/src/prompt.ts
+++ b/src/prompt.ts
@@ -21,7 +21,7 @@ to interact with pages visually, and other tools alongside them.
 
 | Tool | Purpose |
 |------|---------|
-| browser_screenshot | Capture a PNG screenshot of the current page (result details include path and attached: false — the LLM reads the image via the saved file path) |
+| browser_screenshot | Capture a PNG or JPEG screenshot of the current page (rendered inline in the TUI; the LLM reads the image via the saved file path) |
 | browser_click | Click at viewport coordinates |
 | browser_type | Type text into the focused element |
 | browser_press_key | Press a keyboard key (Enter, Tab, Escape, arrows, etc.) |