@tonyclaw/agent-inspector 3.0.13 → 3.0.15

package/src/components/ProxyViewerContainer.tsx

@@ -2,7 +2,11 @@ import { useState, useEffect, useCallback, useRef, useMemo, useTransition, type
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
 import { fetchJson, fetchJsonWithTimeout } from "../lib/apiClient";
-import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
+import {
+  DeleteInspectorGroupsResponseSchema,
+  InspectorGroupsListResponseSchema,
+  type InspectorGroup,
+} from "../lib/groupContract";
 import { ImportLogsResponseSchema, type ImportLogsResponse } from "../lib/logImportContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
@@ -58,6 +62,11 @@ const DeleteLogsResponseSchema = z.object({
   sessionArchiveLogsDeleted: z.number().int().nonnegative().optional(),
 });
 
+type GroupCleanupResult = {
+  deleted: number;
+  ok: boolean;
+};
+
 type SessionPageRequest =
   | { kind: "newest" }
   | { kind: "oldest" }
@@ -190,6 +199,50 @@ function fetchSessionLogsPage(
   );
 }
 
+type SessionLogIdCollection = {
+  ids: number[];
+  truncated: boolean;
+};
+
+async function collectSessionLogIds(
+  sessionId: string,
+  onProgress: (logCount: number, pageCount: number) => void,
+): Promise<SessionLogIdCollection> {
+  const ids = new Set<number>();
+  let page = await fetchSessionLogsPage(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT);
+  for (const log of page.logs) {
+    ids.add(log.id);
+  }
+  onProgress(ids.size, 1);
+
+  let loadedPages = 1;
+  while (page.hasNewer && page.newestLogId !== null && loadedPages < MAX_SESSION_RELOAD_PAGES) {
+    page = await fetchSessionLogsPage(
+      sessionId,
+      { kind: "newer", afterLogId: page.newestLogId },
+      SESSION_RELOAD_PAGE_LIMIT,
+    );
+    for (const log of page.logs) {
+      ids.add(log.id);
+    }
+    loadedPages += 1;
+    onProgress(ids.size, loadedPages);
+  }
+
+  return { ids: [...ids], truncated: page.hasNewer };
+}
+
+async function deleteAllGroupsForFullHistoryDelete(): Promise<GroupCleanupResult> {
+  try {
+    const result = await fetchJson("/api/groups", DeleteInspectorGroupsResponseSchema, {
+      method: "DELETE",
+    });
+    return { deleted: result.deleted, ok: true };
+  } catch {
+    return { deleted: 0, ok: false };
+  }
+}
+
 export function mergeLogsById(
   previousLogs: readonly CapturedLog[],
   incomingLogs: readonly CapturedLog[],
@@ -685,27 +738,88 @@ export function ProxyViewerContainer({
     [showToast],
   );
 
-  const handleDeleteCurrentView = useCallback(
-    async (ids: number[]): Promise<void> => {
-      if (ids.length === 0) return;
-      const persistedIds = ids.filter((id) => Number.isInteger(id) && id >= 0);
+  const handleDeleteCurrentView = useCallback(async (): Promise<void> => {
+    const deleteRequestId = sessionPageRequestIdRef.current + 1;
+    sessionPageRequestIdRef.current = deleteRequestId;
+    setSessionPageLoading(true);
+    stopSessionLoadProgress();
+    dismissToast();
+
+    try {
+      if (selectedSession === "__all__") {
+        startSessionLoadProgress("Deleting stored history", deleteRequestId);
+        const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
+          method: "DELETE",
+        });
+        const groupCleanup = await deleteAllGroupsForFullHistoryDelete();
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs([]);
+        logIndexRef.current.clear();
+        setLogPage(null);
+        setKnownSessions([]);
+        setSessionMemberships([]);
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+        const groupMessage = groupCleanup.ok
+          ? ` Cleared ${groupCleanup.deleted.toString()} group${
+              groupCleanup.deleted === 1 ? "" : "s"
+            }.`
+          : " Group cleanup failed; open Groups to retry Clear.";
+        showToast({
+          message: `Deleted ${result.cleared.toString()} stored log${
+            result.cleared === 1 ? "" : "s"
+          } across all sessions.${groupMessage}`,
+          tone: groupCleanup.ok ? "success" : "error",
+        });
+        return;
+      }
+
+      const sessionId = selectedSession;
+      startSessionLoadProgress("Deleting session history", deleteRequestId);
+      const collected = await collectSessionLogIds(sessionId, (logCount, pageCount) => {
+        updateSessionLoadProgress("Deleting session history", deleteRequestId, logCount, pageCount);
+      });
+      const idSet = new Set(collected.ids);
+      for (const log of allLogs) {
+        if (log.sessionId === sessionId) {
+          idSet.add(log.id);
+        }
+      }
+      const persistedIds = [...idSet].filter((id) => Number.isInteger(id) && id >= 0);
       if (persistedIds.length === 0) {
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs((prev) => {
+          const remaining = prev.filter((log) => log.sessionId !== sessionId);
+          logIndexRef.current = buildLogIndex(remaining);
+          return remaining;
+        });
+        setLogPage((prev) =>
+          prev === null
+            ? null
+            : {
+                ...prev,
+                logs: prev.logs.filter((log) => log.sessionId !== sessionId),
+              },
+        );
+        setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
         showToast({
-          message: "No persisted log records were found for this view.",
-          tone: "error",
+          message: "No stored log records were found for this session.",
+          tone: "success",
         });
         return;
       }
-      const idSet = new Set(persistedIds);
-      const removed = allLogs.filter((log) => idSet.has(log.id));
+
       const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
         method: "DELETE",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ ids: persistedIds }),
       });
 
+      if (sessionPageRequestIdRef.current !== deleteRequestId) return;
       setAllLogs((prev) => {
-        const remaining = prev.filter((log) => !idSet.has(log.id));
+        const remaining = prev.filter((log) => log.sessionId !== sessionId);
         logIndexRef.current = buildLogIndex(remaining);
         return remaining;
       });
@@ -714,19 +828,33 @@ export function ProxyViewerContainer({
           ? null
           : {
               ...prev,
-              logs: prev.logs.filter((log) => !idSet.has(log.id)),
+              logs: prev.logs.filter((log) => log.sessionId !== sessionId),
             },
       );
-      setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(removed)));
+      setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+      setSessionPageLoading(false);
+      stopSessionLoadProgress();
       showToast({
         message: `Deleted ${result.cleared.toString()} stored log${
           result.cleared === 1 ? "" : "s"
-        } from the current view.`,
-        tone: "success",
+        } for this session${collected.truncated ? ". More history may remain." : "."}`,
+        tone: collected.truncated ? "error" : "success",
       });
-    },
-    [allLogs, showToast],
-  );
+    } finally {
+      if (sessionPageRequestIdRef.current === deleteRequestId) {
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+      }
+    }
+  }, [
+    allLogs,
+    dismissToast,
+    selectedSession,
+    showToast,
+    startSessionLoadProgress,
+    stopSessionLoadProgress,
+    updateSessionLoadProgress,
+  ]);
 
   const handleReloadSession = useCallback(() => {
     if (initialSessionId !== undefined) {

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -6,6 +6,7 @@ import {
   Copy,
   Download,
   FlaskConical,
+  History,
   Loader2,
   Network,
   PackageCheck,
@@ -18,8 +19,10 @@ import useSWR from "swr";
 import {
   EcosystemPackagesResponseSchema,
   EcosystemTaskResponseSchema,
+  EcosystemTasksResponseSchema,
   type EcosystemPackage,
   type EcosystemPackageState,
+  type EcosystemRecipe,
   type EcosystemRunnerPreset,
   type EcosystemTask,
   type EcosystemTaskAction,
@@ -101,6 +104,15 @@ async function fetchEcosystemTask(url: string) {
   );
 }
 
+async function fetchEcosystemTasks(url: string) {
+  return fetchJson(
+    url,
+    EcosystemTasksResponseSchema,
+    undefined,
+    (response) => `Failed to load ecosystem tasks: ${String(response.status)}`,
+  );
+}
+
 async function startEcosystemTask(
   packageId: string,
   action: EcosystemTaskAction,
@@ -114,6 +126,16 @@ async function startEcosystemTask(
   return response.task;
 }
 
+async function startEcosystemRecipe(recipeId: string): Promise<EcosystemTask> {
+  const response = await fetchJson(
+    `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`,
+    EcosystemTaskResponseSchema,
+    { method: "POST" },
+    (result) => `Failed to start ecosystem recipe: ${String(result.status)}`,
+  );
+  return response.task;
+}
+
 function stateLabel(state: EcosystemPackageState): string {
   switch (state) {
     case "installed":
@@ -164,6 +186,8 @@ function taskActionLabel(action: EcosystemTaskAction): string {
       return "Help";
     case "runner-presets":
       return "Presets";
+    case "recipe":
+      return "Recipe";
   }
 }
 
@@ -180,6 +204,18 @@ function taskStatusLabel(task: EcosystemTask): string {
   }
 }
 
+function taskStatusClassName(status: EcosystemTask["status"]): string {
+  switch (status) {
+    case "queued":
+    case "running":
+      return "border-cyan-300/20 bg-cyan-300/8 text-cyan-100";
+    case "succeeded":
+      return "border-emerald-400/20 bg-emerald-400/8 text-emerald-100";
+    case "failed":
+      return "border-red-400/20 bg-red-400/8 text-red-100";
+  }
+}
+
 function packagePrimaryAction(pkg: EcosystemPackage): EcosystemTaskAction | null {
   switch (pkg.state) {
     case "available":
@@ -292,15 +328,7 @@ function TaskConsole({ task }: { task: EcosystemTask | null }): JSX.Element | nu
             <div className="break-all font-mono text-[11px] text-white/35">{task.command}</div>
           </div>
         </div>
-        <Badge
-          variant="outline"
-          className={cn(
-            "shrink-0",
-            task.status === "failed"
-              ? "border-red-400/20 bg-red-400/8 text-red-100"
-              : "border-cyan-300/20 bg-cyan-300/8 text-cyan-100",
-          )}
-        >
+        <Badge variant="outline" className={cn("shrink-0", taskStatusClassName(task.status))}>
           {task.status}
         </Badge>
       </div>
@@ -372,10 +400,110 @@ function RunnerPresetCard({ preset }: { preset: EcosystemRunnerPreset }): JSX.El
   );
 }
 
+function RecipeCard({
+  recipe,
+  copied,
+  running,
+  onCopy,
+  onRun,
+}: {
+  recipe: EcosystemRecipe;
+  copied: boolean;
+  running: boolean;
+  onCopy: (recipe: EcosystemRecipe) => void;
+  onRun: (recipe: EcosystemRecipe) => void;
+}): JSX.Element {
+  return (
+    <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-start gap-2">
+            <FlaskConical className="size-4 shrink-0 text-cyan-200/75" />
+            <div className="text-sm font-semibold leading-snug">{recipe.title}</div>
+          </div>
+          <div className="mt-1 text-xs leading-5 text-muted-foreground">{recipe.description}</div>
+        </div>
+        <Badge variant="outline" className="border-white/10 bg-white/[0.04] text-white/55">
+          {recipe.runnable ? recipe.stage : "Template"}
+        </Badge>
+      </div>
+      <div className="mt-3 rounded-md bg-black/20 p-2 font-mono text-[11px] leading-5 text-white/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+        {recipe.command}
+      </div>
+      <div className="mt-3 flex items-center justify-between gap-2">
+        <span className="rounded bg-white/[0.035] px-2 py-1 font-mono text-[11px] text-white/35">
+          {recipe.packageId}
+        </span>
+        <div className="flex items-center gap-2">
+          <Button type="button" size="sm" variant="outline" onClick={() => onCopy(recipe)}>
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+            {copied ? "Copied" : "Copy"}
+          </Button>
+          {recipe.runnable && (
+            <Button
+              type="button"
+              size="sm"
+              variant="secondary"
+              disabled={running}
+              onClick={() => onRun(recipe)}
+            >
+              {running ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Rocket className="size-3.5" />
+              )}
+              {running ? "Running" : "Run"}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RecentTaskRow({
+  task,
+  selected,
+  onSelect,
+}: {
+  task: EcosystemTask;
+  selected: boolean;
+  onSelect: (task: EcosystemTask) => void;
+}): JSX.Element {
+  const label = task.recipeId ?? taskActionLabel(task.action);
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.025] px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <History className="size-3.5 shrink-0 text-white/40" />
+          <div className="truncate text-xs font-semibold text-white/75">{label}</div>
+          <Badge variant="outline" className={cn("shrink-0", taskStatusClassName(task.status))}>
+            {task.status}
+          </Badge>
+        </div>
+        <div className="mt-1 flex min-w-0 flex-wrap items-center gap-2 font-mono text-[10px] text-white/35">
+          <span>{task.packageId}</span>
+          <span>{new Date(task.createdAt).toLocaleTimeString()}</span>
+          {task.exitCode !== null && <span>exit {String(task.exitCode)}</span>}
+        </div>
+      </div>
+      <Button
+        type="button"
+        size="sm"
+        variant={selected ? "secondary" : "outline"}
+        onClick={() => onSelect(task)}
+      >
+        {selected ? "Open" : "View"}
+      </Button>
+    </div>
+  );
+}
+
 export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedPresets, setCopiedPresets] = useState(false);
+  const [copiedRecipeId, setCopiedRecipeId] = useState<string | null>(null);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [taskError, setTaskError] = useState<string | null>(null);
   const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
@@ -395,8 +523,14 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
       revalidateOnFocus: false,
     },
   );
+  const tasksResponse = useSWR(open ? "/api/ecosystem/tasks" : null, fetchEcosystemTasks, {
+    refreshInterval: 2500,
+    revalidateOnFocus: false,
+  });
   const packages = response.data?.packages ?? [];
   const runnerPresets = response.data?.runnerPresets ?? [];
+  const recipes = response.data?.recipes ?? [];
+  const recentTasks = (tasksResponse.data?.tasks ?? []).slice(0, 6);
   const installedCount = useMemo(
     () =>
       packages.filter((pkg) => pkg.state === "installed" || pkg.state === "update-available")
@@ -418,14 +552,33 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
       window.setTimeout(() => setCopiedPresets(false), 1200);
     });
   };
+  const copyRecipeCommand = (recipe: EcosystemRecipe): void => {
+    void copyTextToClipboard(recipe.command).then(() => {
+      setCopiedRecipeId(recipe.id);
+      window.setTimeout(() => setCopiedRecipeId(null), 1200);
+    });
+  };
+  const runRecipe = (recipe: EcosystemRecipe): void => {
+    setTaskError(null);
+    void startEcosystemRecipe(recipe.id)
+      .then((task) => {
+        setActiveTaskId(task.id);
+        void activeTaskResponse.mutate({ task }, { revalidate: true });
+        void tasksResponse.mutate();
+      })
+      .catch((error: unknown) => {
+        setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem recipe");
+      });
+  };
 
   const activeTask = activeTaskResponse.data?.task ?? null;
 
   useEffect(() => {
     if (activeTask === null) return;
+    void tasksResponse.mutate();
     if (activeTask.status !== "succeeded") return;
     void response.mutate();
-  }, [activeTask, response]);
+  }, [activeTask, response, tasksResponse]);
 
   const handleStartTask = (packageId: string, action: EcosystemTaskAction): void => {
     setTaskError(null);
@@ -433,6 +586,7 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
       .then((task) => {
         setActiveTaskId(task.id);
         void activeTaskResponse.mutate({ task }, { revalidate: true });
+        void tasksResponse.mutate();
       })
       .catch((error: unknown) => {
         setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
@@ -514,6 +668,40 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
             </section>
           </div>
 
+          <section className="mt-3">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <div className="text-sm font-semibold">Lab recipes</div>
+              <div className="hidden items-center gap-1 font-mono text-[11px] text-muted-foreground sm:flex">
+                <Sparkles className="size-3.5" />
+                copy-ready workflows
+              </div>
+            </div>
+            <div className="grid gap-3 md:grid-cols-2">
+              {recipes.map((recipe) => (
+                <RecipeCard
+                  key={recipe.id}
+                  recipe={recipe}
+                  copied={copiedRecipeId === recipe.id}
+                  running={
+                    activeTask !== null &&
+                    activeTask.recipeId === recipe.id &&
+                    (activeTask.status === "queued" || activeTask.status === "running")
+                  }
+                  onCopy={copyRecipeCommand}
+                  onRun={runRecipe}
+                />
+              ))}
+              {response.isLoading &&
+                recipes.length === 0 &&
+                [0, 1].map((index) => (
+                  <div
+                    key={index}
+                    className="h-40 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
+                  />
+                ))}
+            </div>
+          </section>
+
           <section className="mt-3">
             <div className="mb-2 flex items-center justify-between gap-3">
               <div className="text-sm font-semibold">Runner presets</div>
@@ -574,6 +762,29 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
               {taskError}
             </div>
           )}
+          {recentTasks.length > 0 && (
+            <section className="mt-3">
+              <div className="mb-2 flex items-center justify-between gap-3">
+                <div className="text-sm font-semibold">Recent Lab runs</div>
+                <div className="hidden font-mono text-[11px] text-muted-foreground sm:block">
+                  last {String(recentTasks.length)}
+                </div>
+              </div>
+              <div className="grid gap-2 md:grid-cols-2">
+                {recentTasks.map((task) => (
+                  <RecentTaskRow
+                    key={task.id}
+                    task={task}
+                    selected={activeTaskId === task.id}
+                    onSelect={(selectedTask) => {
+                      setActiveTaskId(selectedTask.id);
+                      void activeTaskResponse.mutate({ task: selectedTask }, { revalidate: true });
+                    }}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
           <TaskConsole task={activeTask} />
         </div>
       </DialogContent>

package/src/components/proxy-viewer/ToolTraceEvents.tsx

@@ -1,18 +1,21 @@
 import { type JSX } from "react";
-import { Wrench } from "lucide-react";
+import { AlertTriangle, Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
 import { dispatchLogFocusRequest } from "./logFocus";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
+  warnings?: readonly string[];
 };
 
+const VISIBLE_TOOL_LIMIT = 4;
+
 function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
     <button
       type="button"
       key={event.id}
-      className="inline-flex min-w-0 items-center gap-1.5 rounded-md bg-white/[0.035] px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="inline-flex h-6 max-w-[11rem] min-w-0 items-center gap-1 rounded-md bg-white/[0.028] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       onClick={() =>
         dispatchLogFocusRequest({
           logId: event.logId,
@@ -21,21 +24,44 @@ function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
         })
       }
       aria-label={`Open response tool call ${event.name}`}
-      title={`Open ${event.name} in Response`}
     >
-      <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
+      <Wrench className="size-3 shrink-0 text-sky-400/65" />
       <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
     </button>
   );
 }
 
-export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
-  if (events.length === 0) return null;
+export function ToolTraceEvents({
+  events,
+  warnings = [],
+}: ToolTraceEventsProps): JSX.Element | null {
+  if (events.length === 0 && warnings.length === 0) return null;
+  const visibleEvents = events.slice(0, VISIBLE_TOOL_LIMIT);
+  const hiddenCount = Math.max(0, events.length - visibleEvents.length);
   return (
-    <div className="mx-3 mb-2 flex flex-wrap gap-1.5">
-      {events.map((event) => (
-        <ToolTraceEventChip key={event.id} event={event} />
-      ))}
+    <div className="mx-3 mb-2 flex min-w-0 items-center gap-1.5 overflow-hidden rounded-md bg-black/[0.10] px-2 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.025)]">
+      {events.length > 0 && (
+        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-300/70">
+          <Wrench className="size-3" />
+          {events.length}
+        </span>
+      )}
+      {warnings.length > 0 && (
+        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-amber-300/20 bg-amber-300/[0.08] px-1.5 font-mono text-[10px] font-semibold text-amber-100">
+          <AlertTriangle className="size-3" />
+          {warnings.length}
+        </span>
+      )}
+      <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+        {visibleEvents.map((event) => (
+          <ToolTraceEventChip key={event.id} event={event} />
+        ))}
+        {hiddenCount > 0 && (
+          <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-white/[0.025] px-1.5 font-mono text-[11px] font-semibold text-muted-foreground">
+            +{hiddenCount}
+          </span>
+        )}
+      </div>
     </div>
   );
 }

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -361,7 +361,10 @@ export const TurnGroup = memo(function TurnGroup({
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }
                 />
-                <ToolTraceEvents events={toolEventsByLogId.get(log.id) ?? []} />
+                <ToolTraceEvents
+                  events={toolEventsByLogId.get(log.id) ?? []}
+                  warnings={log.warnings ?? []}
+                />
               </div>
             </div>
           );

package/src/lib/ecosystemContract.ts

@@ -35,13 +35,31 @@ export const EcosystemRunnerPresetSchema = z.object({
   agentsDir: z.string(),
 });
 
+export const EcosystemRecipeSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  stage: z.string(),
+  packageId: z.string(),
+  description: z.string(),
+  command: z.string(),
+  requiresSession: z.boolean(),
+  runnable: z.boolean(),
+});
+
 export const EcosystemPackagesResponseSchema = z.object({
   checkedAt: z.string(),
   packages: z.array(EcosystemPackageSchema),
   runnerPresets: z.array(EcosystemRunnerPresetSchema),
+  recipes: z.array(EcosystemRecipeSchema),
 });
 
-export const EcosystemTaskActionSchema = z.enum(["install", "upgrade", "help", "runner-presets"]);
+export const EcosystemTaskActionSchema = z.enum([
+  "install",
+  "upgrade",
+  "help",
+  "runner-presets",
+  "recipe",
+]);
 
 export const EcosystemTaskStatusSchema = z.enum(["queued", "running", "succeeded", "failed"]);
 
@@ -49,6 +67,7 @@ export const EcosystemTaskSchema = z.object({
   id: z.string(),
   packageId: z.string(),
   npmName: z.string(),
+  recipeId: z.string().nullable().default(null),
   action: EcosystemTaskActionSchema,
   status: EcosystemTaskStatusSchema,
   command: z.string(),
@@ -71,6 +90,7 @@ export const EcosystemTasksResponseSchema = z.object({
 export type EcosystemPackageState = z.infer<typeof EcosystemPackageStateSchema>;
 export type EcosystemPackage = z.infer<typeof EcosystemPackageSchema>;
 export type EcosystemRunnerPreset = z.infer<typeof EcosystemRunnerPresetSchema>;
+export type EcosystemRecipe = z.infer<typeof EcosystemRecipeSchema>;
 export type EcosystemPackagesResponse = z.infer<typeof EcosystemPackagesResponseSchema>;
 export type EcosystemTaskAction = z.infer<typeof EcosystemTaskActionSchema>;
 export type EcosystemTaskStatus = z.infer<typeof EcosystemTaskStatusSchema>;