@aliou/pi-synthetic 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliou/pi-synthetic",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "license": "MIT",
   "type": "module",
   "private": false,
@@ -30,6 +30,9 @@
     "@mariozechner/pi-coding-agent": ">=0.52.7",
     "@mariozechner/pi-tui": ">=0.51.0"
   },
+  "dependencies": {
+    "@aliou/pi-utils-ui": "^0.1.2"
+  },
   "devDependencies": {
     "@aliou/biome-plugins": "^0.3.2",
     "@biomejs/biome": "^2.4.2",

package/src/tools/search.ts

@@ -1,3 +1,4 @@
+import { ToolCallHeader, ToolFooter } from "@aliou/pi-utils-ui";
 import type {
   AgentToolResult,
   ExtensionAPI,
@@ -5,7 +6,8 @@ import type {
   Theme,
   ToolRenderResultOptions,
 } from "@mariozechner/pi-coding-agent";
-import { Text } from "@mariozechner/pi-tui";
+import { getMarkdownTheme, keyHint } from "@mariozechner/pi-coding-agent";
+import { Container, Markdown, Text } from "@mariozechner/pi-tui";
 import { type Static, Type } from "@sinclair/typebox";
 
 export const SYNTHETIC_WEB_SEARCH_TOOL = "synthetic_web_search" as const;
@@ -24,8 +26,6 @@ interface SyntheticSearchResponse {
 interface WebSearchDetails {
   results?: SyntheticSearchResult[];
   query?: string;
-  error?: string;
-  isError?: boolean;
 }
 
 const SearchParams = Type.Object({
@@ -58,139 +58,168 @@ export function registerSyntheticWebSearchTool(pi: ExtensionAPI): void {
         details: { query: params.query },
       });
 
-      try {
-        const apiKey = process.env.SYNTHETIC_API_KEY;
-        if (!apiKey) {
-          const error = "SYNTHETIC_API_KEY is not configured";
-          return {
-            content: [{ type: "text", text: `Error: ${error}` }],
-            details: { error, isError: true },
-          };
-        }
-
-        const response = await fetch("https://api.synthetic.new/v2/search", {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${apiKey}`,
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ query: params.query }),
-          signal,
-        });
-
-        if (!response.ok) {
-          const errorText = await response.text();
-          const error = `Search API error: ${response.status} ${errorText}`;
-          return {
-            content: [{ type: "text", text: `Error: ${error}` }],
-            details: { error, isError: true },
-          };
-        }
+      const apiKey = process.env.SYNTHETIC_API_KEY;
+      if (!apiKey) {
+        throw new Error("SYNTHETIC_API_KEY is not configured");
+      }
 
-        let data: SyntheticSearchResponse;
-        try {
-          data = await response.json();
-        } catch (parseError) {
-          const error =
-            parseError instanceof Error
-              ? `Failed to parse search results: ${parseError.message}`
-              : "Failed to parse search results";
-          return {
-            content: [{ type: "text", text: `Error: ${error}` }],
-            details: { error, isError: true },
-          };
-        }
+      const response = await fetch("https://api.synthetic.new/v2/search", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ query: params.query }),
+        signal,
+      });
 
-        let content = `Found ${data.results.length} result(s):\n\n`;
-        for (const result of data.results) {
-          content += `## ${result.title}\n`;
-          content += `URL: ${result.url}\n`;
-          content += `Published: ${result.published}\n`;
-          content += `\n${result.text}\n`;
-          content += "\n---\n\n";
-        }
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Search API error: ${response.status} ${errorText}`);
+      }
 
-        return {
-          content: [{ type: "text", text: content }],
-          details: {
-            results: data.results,
-            query: params.query,
-          },
-        };
-      } catch (error) {
-        if (error instanceof Error && error.name === "AbortError") {
-          return {
-            content: [{ type: "text", text: "Search cancelled" }],
-            details: { query: params.query },
-          };
-        }
+      let data: SyntheticSearchResponse;
+      try {
+        data = await response.json();
+      } catch (parseError) {
+        throw new Error(
+          parseError instanceof Error
+            ? `Failed to parse search results: ${parseError.message}`
+            : "Failed to parse search results",
+        );
+      }
 
-        const message =
-          error instanceof Error ? error.message : "Unknown error occurred";
-        return {
-          content: [{ type: "text", text: `Error: ${message}` }],
-          details: { error: message, isError: true },
-        };
+      let content = `Found ${data.results.length} result(s):\n\n`;
+      for (const result of data.results) {
+        content += `## ${result.title}\n`;
+        content += `URL: ${result.url}\n`;
+        content += `Published: ${result.published}\n`;
+        content += `\n${result.text}\n`;
+        content += "\n---\n\n";
       }
+
+      return {
+        content: [{ type: "text", text: content }],
+        details: {
+          results: data.results,
+          query: params.query,
+        },
+      };
     },
 
-    renderCall(args: SearchParamsType, theme: Theme): Text {
-      let text = theme.fg("toolTitle", theme.bold("Synthetic: WebSearch "));
-      text += theme.fg("accent", `"${args.query}"`);
-      return new Text(text, 0, 0);
+    renderCall(args: SearchParamsType, theme: Theme) {
+      return new ToolCallHeader(
+        {
+          toolName: "Synthetic: WebSearch",
+          mainArg: `"${args.query}"`,
+          showColon: true,
+        },
+        theme,
+      );
     },
 
     renderResult(
       result: AgentToolResult<WebSearchDetails>,
       options: ToolRenderResultOptions,
       theme: Theme,
-    ): Text {
+    ) {
       const { expanded, isPartial } = options;
+      const SNIPPET_LINES = 5;
 
       if (isPartial) {
-        const text =
-          result.content?.[0]?.type === "text"
-            ? result.content[0].text
-            : "Searching...";
-        return new Text(theme.fg("dim", text), 0, 0);
+        return new Text(
+          theme.fg("muted", "Synthetic: WebSearch: fetching..."),
+          0,
+          0,
+        );
       }
 
       const details = result.details;
-      if (details?.isError) {
+      const results = details?.results || [];
+      const container = new Container();
+
+      // When the tool throws, the framework calls renderResult with
+      // details={} (empty object) and the error message in content.
+      // Detect this by checking for missing results in details.
+      if (!details?.results) {
+        const textBlock = result.content.find((c) => c.type === "text");
         const errorMsg =
-          result.content?.[0]?.type === "text"
-            ? result.content[0].text
-            : "Error occurred";
-        return new Text(theme.fg("error", errorMsg), 0, 0);
+          (textBlock?.type === "text" && textBlock.text) || "Search failed";
+        container.addChild(new Text(theme.fg("error", errorMsg), 0, 0));
+        return container;
       }
 
-      const results = details?.results || [];
-      let text = theme.fg("success", `✓ Found ${results.length} result(s)`);
-
-      if (!expanded && results.length > 0) {
+      if (results.length === 0) {
+        container.addChild(
+          new Text(theme.fg("muted", "Synthetic: WebSearch: no results"), 0, 0),
+        );
+      } else if (!expanded) {
+        // Collapsed: show result count + first result title
+        let text = theme.fg("success", `Found ${results.length} result(s)`);
         const first = results[0];
-        text += `\n  ${theme.fg("dim", `${first.title}`)}`;
-        if (results.length > 1) {
-          text += theme.fg("dim", ` (${results.length - 1} more)`);
+        if (first) {
+          text += `\n  ${theme.fg("dim", first.title)}`;
+          if (results.length > 1) {
+            text += theme.fg("dim", ` (+${results.length - 1} more)`);
+          }
         }
-        text += theme.fg("muted", " [Ctrl+O to expand]");
-      }
+        text += theme.fg("muted", ` ${keyHint("expandTools", "to expand")}`);
+        container.addChild(new Text(text, 0, 0));
+      } else {
+        // Expanded: show each result with title, URL, date, and snippet
+        container.addChild(
+          new Text(
+            theme.fg("success", `Found ${results.length} result(s)`),
+            0,
+            0,
+          ),
+        );
 
-      if (expanded) {
         for (const r of results) {
-          text += `\n\n${theme.fg("accent", theme.bold(r.title))}`;
-          text += `\n${theme.fg("dim", r.url)}`;
+          container.addChild(new Text("", 0, 0));
+          container.addChild(
+            new Text(
+              `${theme.fg("dim", ">")} ${theme.fg("accent", theme.bold(r.title))}`,
+              0,
+              0,
+            ),
+          );
+          container.addChild(new Text(`  ${theme.fg("dim", r.url)}`, 0, 0));
+          if (r.published) {
+            container.addChild(
+              new Text(
+                `  ${theme.fg("muted", `Published: ${r.published}`)}`,
+                0,
+                0,
+              ),
+            );
+          }
+
           if (r.text) {
-            const preview = r.text.slice(0, 200);
-            text += `\n${theme.fg("muted", preview)}`;
-            if (r.text.length > 200) {
-              text += theme.fg("dim", "...");
-            }
+            container.addChild(new Text("", 0, 0));
+            const snippet = r.text
+              .split("\n")
+              .slice(0, SNIPPET_LINES)
+              .map((line) => `> ${line}`)
+              .join("\n");
+            container.addChild(
+              new Markdown(snippet, 0, 0, getMarkdownTheme(), {
+                color: (text: string) => theme.fg("toolOutput", text),
+              }),
+            );
           }
         }
       }
 
-      return new Text(text, 0, 0);
+      container.addChild(new Text("", 0, 0));
+      container.addChild(
+        new ToolFooter(theme, {
+          items: [{ label: "results", value: `${results.length} result(s)` }],
+          separator: " | ",
+        }),
+      );
+
+      return container;
     },
   });
 }