@ai-setting/roy-plugin-task-show 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Types shared across the task-show plugin.
+ *
+ * The plugin keeps its own model of what constitutes a "task solving trace"
+ * (a sequence of tool calls with metadata) and exposes helpers used by both
+ * the data collector, the HTTP server, and the visualization frontend.
+ */
+/**
+ * A single tool invocation captured by the `tool:after.execute` hook.
+ *
+ * Fields mirror the payload the global hook manager emits:
+ *   { tool: { name, ... }, args, context, result }
+ * plus a few derived fields (timestamp, durationMs, sequence) that make the
+ * frontend rendering straightforward.
+ */
+export interface ToolCallRecord {
+    /** Zero-based sequence number within the task. */
+    sequence: number;
+    /** Name of the tool that was invoked (e.g. `read_file`, `bash`). */
+    toolName: string;
+    /** Arbitrary JSON-serializable arguments that were passed to the tool. */
+    args: Record<string, unknown>;
+    /** Whether the tool reported success. */
+    success: boolean;
+    /** Truncated output text. We intentionally do not store the entire result body. */
+    outputPreview: string;
+    /** Error message (if the tool failed). */
+    error?: string;
+    /** Execution duration in milliseconds. */
+    durationMs: number;
+    /** Unix ms when the call finished. */
+    timestamp: number;
+    /** Iteration index within the agent loop (if exposed by the hook context). */
+    iteration?: number;
+    /** Optional metadata bag carried over from the tool result. */
+    metadata?: Record<string, unknown>;
+    /** If the input args look like image-related content, we tag the call so the UI can render a badge. */
+    hasAttachment?: boolean;
+}
+/**
+ * A complete task session — the visualization root.
+ */
+export interface TaskSession {
+    /** Task ID as exposed by the TaskComponent / getCurrentTaskId(). */
+    taskId: number;
+    /** Human-readable title (best-effort, often empty for very short tasks). */
+    title: string;
+    /** Session start time. */
+    startedAt: number;
+    /** Session end time (set when the task transitions to a terminal status). */
+    endedAt?: number;
+    /** Current lifecycle status. */
+    status: "running" | "completed" | "failed" | "cancelled" | "unknown";
+    /** Ordered list of tool calls. */
+    toolCalls: ToolCallRecord[];
+    /** Cached URL the visualization page is served at. */
+    visualizationUrl?: string;
+}
+/**
+ * Minimal PluginEnv surface we depend on.
+ *
+ * We avoid importing private types from the host project's barrels so the
+ * plugin stays loosely coupled. Tests can substitute a fake.
+ */
+export interface PluginEnvLike {
+    registerHook?: (def: {
+        point: string;
+        priority?: number;
+        name?: string;
+        handler: (ctx: unknown) => unknown | Promise<unknown>;
+    }) => void;
+    getComponent?: (name: string) => unknown;
+    getConfig?: (key: string) => unknown;
+}
+/**
+ * Configuration consumed by the plugin.
+ *
+ * Mirrors the schema described in plugin.json (which is what the loader passes
+ * through `config`).
+ */
+export interface TaskShowConfig {
+    port: number;
+    host: string;
+    autoStart: boolean;
+    maxStoredTasks: number;
+    urlInjectEnabled: boolean;
+    publicDir: string;
+    /** Custom client-side logger prefix (handy for tests). */
+    logPrefix?: string;
+}
+/**
+ * Default configuration. Keeping these as a single source of truth simplifies
+ * the loader in plugin.json.
+ */
+export declare const DEFAULT_CONFIG: TaskShowConfig;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,mFAAmF;IACnF,aAAa,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,uGAAuG;IACvG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;IACrE,kCAAkC;IAClC,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;KACvD,KAAK,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;CACtC;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,cAO5B,CAAC"}

package/dist/types.js

@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Types shared across the task-show plugin.
+ *
+ * The plugin keeps its own model of what constitutes a "task solving trace"
+ * (a sequence of tool calls with metadata) and exposes helpers used by both
+ * the data collector, the HTTP server, and the visualization frontend.
+ */
+/**
+ * Default configuration. Keeping these as a single source of truth simplifies
+ * the loader in plugin.json.
+ */
+export const DEFAULT_CONFIG = {
+    port: 7788,
+    host: "127.0.0.1",
+    autoStart: true,
+    maxStoredTasks: 50,
+    urlInjectEnabled: true,
+    publicDir: "public",
+};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAyFH;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAmB;IAC5C,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,IAAI;IACf,cAAc,EAAE,EAAE;IAClB,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC"}

package/dist/url-injector.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Mutates a ToolResult output to append a visualization URL.
+ *
+ * The roy-agent core emits ToolResult objects like:
+ *   { success, output, error?, metadata? }
+ *
+ * We mutate `result.output` in-place by appending a markdown link with the
+ * per-task URL. The mutation is **non-destructive** — we never alter or trim
+ * the original content, only append after a divider so LLM agents can still
+ * parse the response.
+ */
+import type { TaskShowConfig } from "./types.js";
+/**
+ * Build the public URL the visualization lives at. Exposed so that unit tests
+ * (and the plugin entry point) can produce identical strings.
+ */
+export declare function buildVisualizationUrl(cfg: Pick<TaskShowConfig, "host" | "port">, taskId: number | string): string;
+/**
+ * Optional banner linking to the index page (used when the plugin wants to
+ * mention "see all recent tasks" alongside a single URL).
+ */
+export declare function buildIndexUrl(cfg: Pick<TaskShowConfig, "host" | "port">): string;
+/**
+ * Result of an injection attempt — we want callers (especially tests) to be
+ * able to verify whether a result was actually modified.
+ */
+export interface InjectionResult {
+    /** True iff the output text was actually mutated. */
+    mutated: boolean;
+    /** The final visualization URL we appended. */
+    url?: string;
+    /** The full output AFTER mutation. */
+    output?: string;
+}
+/**
+ * Append the visualization URL to a tool result.
+ *
+ * - The mutation only runs when `enabled` is true.
+ * - The hook context shape is intentionally permissive (any) because the
+ *   ToolResult shape across versions can drift slightly. We only depend on
+ *   a string `output`.
+ */
+export declare function injectVisualizationUrl(opts: {
+    ctx?: any;
+    cfg: TaskShowConfig;
+    taskId: number;
+}): InjectionResult;
+/**
+ * Helper for tests / non-tool callers — given a raw string output, returns a
+ * new string with the banner appended. Does not mutate the input.
+ */
+export declare function appendVisualizationBanner(output: string, cfg: Pick<TaskShowConfig, "host" | "port">, taskId: number | string, extraLines?: string[]): string;
+//# sourceMappingURL=url-injector.d.ts.map

package/dist/url-injector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url-injector.d.ts","sourceRoot":"","sources":["../src/url-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,EAC1C,MAAM,EAAE,MAAM,GAAG,MAAM,GACtB,MAAM,CAIR;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,GACzC,MAAM,CAGR;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,GAAG,EAAE,cAAc,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,eAAe,CAyBlB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,EAC1C,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,UAAU,GAAE,MAAM,EAAO,GACxB,MAAM,CAMR"}

package/dist/url-injector.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Mutates a ToolResult output to append a visualization URL.
+ *
+ * The roy-agent core emits ToolResult objects like:
+ *   { success, output, error?, metadata? }
+ *
+ * We mutate `result.output` in-place by appending a markdown link with the
+ * per-task URL. The mutation is **non-destructive** — we never alter or trim
+ * the original content, only append after a divider so LLM agents can still
+ * parse the response.
+ */
+/**
+ * Build the public URL the visualization lives at. Exposed so that unit tests
+ * (and the plugin entry point) can produce identical strings.
+ */
+export function buildVisualizationUrl(cfg, taskId) {
+    // Pretty prefix shown to humans: http(s)://host:port
+    const host = cfg.host === "0.0.0.0" ? "localhost" : cfg.host;
+    return `http://${host}:${cfg.port}/task/${encodeURIComponent(String(taskId))}`;
+}
+/**
+ * Optional banner linking to the index page (used when the plugin wants to
+ * mention "see all recent tasks" alongside a single URL).
+ */
+export function buildIndexUrl(cfg) {
+    const host = cfg.host === "0.0.0.0" ? "localhost" : cfg.host;
+    return `http://${host}:${cfg.port}/`;
+}
+/**
+ * Append the visualization URL to a tool result.
+ *
+ * - The mutation only runs when `enabled` is true.
+ * - The hook context shape is intentionally permissive (any) because the
+ *   ToolResult shape across versions can drift slightly. We only depend on
+ *   a string `output`.
+ */
+export function injectVisualizationUrl(opts) {
+    const { ctx, cfg, taskId } = opts;
+    if (!cfg.urlInjectEnabled)
+        return { mutated: false };
+    if (!ctx)
+        return { mutated: false };
+    const result = ctx?.result ?? ctx?.toolResult ?? null;
+    if (!result || typeof result.output !== "string") {
+        return { mutated: false };
+    }
+    const url = buildVisualizationUrl(cfg, taskId);
+    const banner = `\n\n---\n📊 **可视化工具调用链路**: <${url}>\n` +
+        `(浏览器访问即可查看 mermaid 流程图：每个工具调用、参数、结果摘要、耗时)`;
+    const newOutput = result.output + banner;
+    result.output = newOutput;
+    // Make sure the URL is also recorded in metadata — some chat clients
+    // prefer to render markdown from a structured field.
+    if (typeof result.metadata === "object" && result.metadata !== null) {
+        result.metadata.task_visualization_url = url;
+    }
+    return { mutated: true, url, output: newOutput };
+}
+/**
+ * Helper for tests / non-tool callers — given a raw string output, returns a
+ * new string with the banner appended. Does not mutate the input.
+ */
+export function appendVisualizationBanner(output, cfg, taskId, extraLines = []) {
+    const url = buildVisualizationUrl(cfg, taskId);
+    const banner = `\n\n---\n📊 **可视化工具调用链路**: <${url}>` +
+        (extraLines.length ? "\n" + extraLines.map((l) => `> ${l}`).join("\n") : "");
+    return output + banner;
+}
+//# sourceMappingURL=url-injector.js.map

package/dist/url-injector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url-injector.js","sourceRoot":"","sources":["../src/url-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,GAA0C,EAC1C,MAAuB;IAEvB,qDAAqD;IACrD,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;AACjF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAC3B,GAA0C;IAE1C,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC;AACvC,CAAC;AAeD;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB,CAAC,IAItC;IACC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAElC,IAAI,CAAC,GAAG,CAAC,gBAAgB;QAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACrD,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAEpC,MAAM,MAAM,GAAG,GAAG,EAAE,MAAM,IAAI,GAAG,EAAE,UAAU,IAAI,IAAI,CAAC;IACtD,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,MAAM,GACV,+BAA+B,GAAG,KAAK;QACvC,2CAA2C,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;IACzC,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;IAE1B,qEAAqE;IACrE,qDAAqD;IACrD,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;QACnE,MAAM,CAAC,QAAoC,CAAC,sBAAsB,GAAG,GAAG,CAAC;IAC5E,CAAC;IAED,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AACnD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CACvC,MAAc,EACd,GAA0C,EAC1C,MAAuB,EACvB,aAAuB,EAAE;IAEzB,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,MAAM,GACV,+BAA+B,GAAG,GAAG;QACrC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/E,OAAO,MAAM,GAAG,MAAM,CAAC;AACzB,CAAC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ai-setting/roy-plugin-task-show",
+  "version": "0.1.0",
+  "description": "roy-agent plugin: visualize task solving process via tool call flow on a local web service",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "public",
+    "plugin.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "bun test",
+    "start:demo": "bun run scripts/run-demo.ts",
+    "verify": "bun run scripts/verify-service.ts",
+    "publish:local": "bun run scripts/publish.ts --dry-run --verify",
+    "publish:dry": "bun run scripts/publish.ts --dry-run",
+    "publish": "bun run scripts/publish.ts --tag latest",
+    "publish:verify": "bun run scripts/publish.ts --tag latest --verify"
+  },
+  "keywords": [
+    "roy-agent",
+    "plugin",
+    "visualization",
+    "task-show",
+    "mermaid",
+    "tools",
+    "hook"
+  ],
+  "engines": {
+    "node": ">=18",
+    "bun": ">=1.0.0"
+  },
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "@ai-setting/roy-agent-core": "*"
+  },
+  "peerDependenciesMeta": {
+    "@ai-setting/roy-agent-core": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ai-setting/roy-plugin-task-visualize.git"
+  },
+  "homepage": "https://github.com/ai-setting/roy-plugin-task-visualize#readme",
+  "bugs": {
+    "url": "https://github.com/ai-setting/roy-plugin-task-visualize/issues"
+  },
+  "author": {
+    "name": "ai-setting",
+    "email": "ai-setting@users.noreply.github.com"
+  }
+}

package/plugin.json

@@ -0,0 +1,62 @@
+{
+  "name": "@ai-setting/roy-plugin-task-show",
+  "version": "0.1.0",
+  "type": "tool-plugin",
+  "description": "Visualize the tool call chain of a task on a local web service and inject the URL into tool results",
+  "main": "dist/index.js",
+  "hooks": [
+    {
+      "point": "tool:after.execute",
+      "purpose": "Collect every tool invocation: tool name, args, result, timing, success"
+    },
+    {
+      "point": "task:after.update",
+      "purpose": "When a task transitions to a terminal status (completed/failed), mark the session and emit the visualization URL"
+    }
+  ],
+  "commands": [
+    {
+      "name": "task-show",
+      "description": "Open the local visualization service in your browser (alias of the configured port)"
+    }
+  ],
+  "config": {
+    "port": {
+      "type": "number",
+      "default": 7788,
+      "description": "HTTP port the local visualization service binds to"
+    },
+    "host": {
+      "type": "string",
+      "default": "127.0.0.1",
+      "description": "HTTP host the local visualization service binds to"
+    },
+    "autoStart": {
+      "type": "boolean",
+      "default": true,
+      "description": "Start the HTTP server when the plugin initializes"
+    },
+    "maxStoredTasks": {
+      "type": "number",
+      "default": 50,
+      "description": "Maximum number of completed tasks to keep in memory (older ones are evicted)"
+    },
+    "urlInjectEnabled": {
+      "type": "boolean",
+      "default": true,
+      "description": "Append a \ud83d\udcca visualization URL to the last tool result when a task completes"
+    },
+    "publicDir": {
+      "type": "string",
+      "default": "public",
+      "description": "Directory holding the static visualization frontend (HTML/JS/CSS)"
+    }
+  },
+  "roy-agent": {
+    "minVersion": "0.6.0",
+    "extends": "BasePlugin",
+    "registerAs": "task-show"
+  },
+  "repository": "github:ai-setting/roy-plugin-task-visualize",
+  "bugs": "https://github.com/ai-setting/roy-plugin-task-visualize/issues"
+}

package/public/app.js

@@ -0,0 +1,133 @@
+/* ------------------------------------------------------------------------- */
+/* roy-plugin-task-show — small progressive enhancements                     */
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Allow each <tr data-args="..."> to expand a JSON dialog on click.
+ * `data-args` carries a single-line JSON string; we pretty-print it on demand.
+ */
+(function attachArgsExpander() {
+  const rows = document.querySelectorAll('tr[data-args]');
+  rows.forEach((row) => {
+    row.style.cursor = "zoom-in";
+    row.addEventListener("click", () => {
+      const raw = row.getAttribute("data-args") || "";
+      let parsed;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        parsed = raw;
+      }
+      openDialog({
+        title: row.querySelector("td:nth-child(2)")?.textContent?.trim() || "Tool call",
+        body: JSON.stringify(parsed, null, 2),
+      });
+    });
+  });
+
+  function openDialog({ title, body }) {
+    const overlay = document.createElement("div");
+    overlay.style.cssText = [
+      "position:fixed",
+      "inset:0",
+      "background:rgba(0,0,0,0.6)",
+      "display:flex",
+      "align-items:center",
+      "justify-content:center",
+      "z-index:9999",
+      "padding:24px",
+    ].join(";");
+    const box = document.createElement("div");
+    box.style.cssText = [
+      "background:#0f172a",
+      "color:#e2e8f0",
+      "border-radius:10px",
+      "padding:18px",
+      "max-width:780px",
+      "width:100%",
+      "max-height:80vh",
+      "overflow:auto",
+      "box-shadow:0 12px 40px rgba(0,0,0,0.5)",
+    ].join(";");
+    box.innerHTML =
+      `<header style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">` +
+        `<strong style="font-size:15px">${escapeHtml(title)}</strong>` +
+        `<button id="dlg-close" style="background:transparent;color:#94a3b8;border:none;font-size:18px;cursor:pointer">×</button>` +
+      `</header>` +
+      `<pre style="white-space:pre-wrap">${escapeHtml(body)}</pre>`;
+    overlay.appendChild(box);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    box.querySelector("#dlg-close").addEventListener("click", close);
+    document.body.appendChild(overlay);
+
+    function close() {
+      overlay.remove();
+      document.removeEventListener("keydown", onKey);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") close();
+    }
+    document.addEventListener("keydown", onKey);
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+})();
+
+/**
+ * Poll the session summary every 3 seconds while a task is running so the
+ * index page (and the per-task page when status changes) updates without a
+ * manual refresh. Lightweight: single GET, no debouncing.
+ */
+(function attachLiveRefresh() {
+  const banner = document.querySelector('[data-live-refresh]');
+  if (!banner) return;
+  const taskId = banner.getAttribute('data-task-id') || '';
+  const initialStatus = banner.getAttribute('data-status') || 'running';
+
+  async function poll() {
+    try {
+      const url = taskId ? `/api/sessions/${encodeURIComponent(taskId)}` : '/api/sessions';
+      const res = await fetch(url, { headers: { accept: 'application/json' } });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        // Index page — refresh the table cells without losing scroll position.
+        const tbody = document.querySelector('.sessions tbody');
+        if (!tbody) return;
+        tbody.innerHTML = data
+          .map((s) => {
+            const tools = Array.from(new Set((s.toolCalls || []).map((c) => c.toolName))).map((t) => `<code>${t}</code>`).join(' ');
+            return (
+              '<tr>' +
+              `<td><a href="/task/${s.taskId}">#${s.taskId}</a></td>` +
+              `<td><span class="badge badge-${s.status}">${s.status}</span></td>` +
+              `<td>${(s.toolCalls || []).length} calls · ${(s.toolCalls || []).reduce((a, c) => a + c.durationMs, 0)} ms</td>` +
+              `<td>${(s.title || '(no title)')}</td>` +
+              `<td>${new Date(s.startedAt).toISOString().replace('T', ' ').slice(0, 19)}</td>` +
+              `<td class="tools">${tools}</td>` +
+              '</tr>'
+            );
+          })
+          .join('');
+      } else if (data && data.taskId != null) {
+        if (data.status !== initialStatus) {
+          // Reload to pick up the new status badge & flow chart.
+          location.reload();
+        }
+      }
+    } catch (e) {
+      // network blip — try again next tick
+    }
+  }
+
+  setInterval(poll, 3000);
+})();

package/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>roy-plugin-task-show</title>
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body data-live-refresh>
+    <header class="topbar">
+      <h1>📊 roy-plugin-task-show</h1>
+      <p class="meta">
+        Standalone landing page served by the visualization service. The plugin
+        replaces the index when sessions exist.
+      </p>
+    </header>
+    <section class="panel">
+      <h2>No sessions yet</h2>
+      <p class="empty">
+        The <code>roy-agent</code> host process has not recorded any tool
+        calls yet. Trigger a session — for example by sending a message in
+        <code>interactive</code> mode — and refresh this page.
+      </p>
+      <p>
+        Useful endpoints while you wait:
+        <ul>
+          <li><a href="/api/sessions">/api/sessions</a> — JSON list of recorded sessions.</li>
+          <li><a href="/static/style.css">/static/style.css</a> — bundled CSS.</li>
+          <li><a href="/static/app.js">/static/app.js</a> — bundled JS.</li>
+        </ul>
+      </p>
+    </section>
+    <script src="/static/app.js"></script>
+  </body>
+</html>