pi-webmcp 0.1.0

package/src/services/PiWebMcpServeService.ts

@@ -0,0 +1,176 @@
+import type { AgentToolResult } from "@earendil-works/pi-coding-agent";
+import { NodeHttpServer } from "@effect/platform-node";
+import { Context, Effect, FileSystem, Layer, Path, Ref, Scope } from "effect";
+import { HttpPlatform, HttpServer, HttpServerRequest, HttpServerRespondable, HttpServerResponse, HttpStaticServer } from "effect/unstable/http";
+import { PiContext } from "./PiApi";
+import { PiWebMcpToolStateService } from "./PiWebMcpToolStateService";
+
+export type PiWebMcpServeParams = {
+  readonly path: string;
+};
+
+type Mount = {
+  readonly root: string;
+  readonly kind: "file" | "directory";
+  readonly fileName?: string;
+};
+
+function withCorsOrigins(
+  request: HttpServerRequest.HttpServerRequest,
+  response: HttpServerResponse.HttpServerResponse,
+  allowedOrigins: ReadonlySet<string>,
+) {
+  const requestOrigin = request.headers.origin;
+
+  if (!requestOrigin || !allowedOrigins.has(requestOrigin)) {
+    return response;
+  }
+
+  return HttpServerResponse.setHeaders(response, {
+    "Access-Control-Allow-Origin": requestOrigin,
+    "Access-Control-Allow-Methods": "GET, HEAD, OPTIONS",
+    "Access-Control-Allow-Headers": "Range, Content-Type, Accept, Origin",
+    "Access-Control-Expose-Headers": "Content-Length, Content-Range, Accept-Ranges, ETag, Last-Modified",
+    "Vary": "Origin",
+  });
+}
+
+export class PiWebMcpServeService extends Context.Service<PiWebMcpServeService, {
+  readonly execute: (params: PiWebMcpServeParams) => Effect.Effect<AgentToolResult<unknown>, never, PiContext>;
+}>()("pi-webmcp/PiWebMcpServeService") {
+  static readonly live = Layer.effect(
+    PiWebMcpServeService,
+    Effect.gen(function*() {
+      const scope = yield* Scope.Scope;
+      const fileSystem = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const httpPlatform = yield* HttpPlatform.HttpPlatform;
+      const piContext = yield* PiContext;
+      const toolState = yield* PiWebMcpToolStateService;
+      const mountsRef = yield* Ref.make<Mount[]>([]);
+
+      const app = Effect.gen(function*() {
+        const request = yield* HttpServerRequest.HttpServerRequest;
+        const stagedTools = yield* toolState.staged;
+        const committedTools = yield* toolState.committed;
+        const allowedOrigins = new Set([...committedTools, ...stagedTools].map((tool) => `https://${tool.origin}`));
+
+        if (request.method === "OPTIONS") {
+          return withCorsOrigins(request, HttpServerResponse.empty({ status: 204 }), allowedOrigins);
+        }
+
+        if (request.method !== "GET" && request.method !== "HEAD") {
+          return HttpServerResponse.text("Method not allowed", { status: 405 });
+        }
+
+        const url = new URL(request.url, "http://localhost");
+        const index = Number(url.pathname.split("/").filter(Boolean)[0]);
+        const mounts = yield* Ref.get(mountsRef);
+        const mount = Number.isInteger(index) && index >= 0 ? mounts[index] : undefined;
+
+        if (!mount) {
+          return withCorsOrigins(request, HttpServerResponse.text("Not found", { status: 404 }), allowedOrigins);
+        }
+
+        const prefix = `/${index}`;
+        const suffix = url.pathname === prefix ? "/" : url.pathname.slice(prefix.length);
+        let rewrittenUrl: string;
+
+        if (mount.kind === "directory") {
+          rewrittenUrl = `${suffix}${url.search}`;
+        } else if (suffix === "/" || suffix === "") {
+          rewrittenUrl = `/${encodeURIComponent(mount.fileName!)}${url.search}`;
+        } else if (decodeURIComponent(suffix.startsWith("/") ? suffix.slice(1) : suffix) === mount.fileName) {
+          rewrittenUrl = `${suffix}${url.search}`;
+        } else {
+          return withCorsOrigins(request, HttpServerResponse.text("Forbidden", { status: 403 }), allowedOrigins);
+        }
+
+        const staticApp = yield* HttpStaticServer.make({ root: mount.root });
+        const rewrittenRequest = request.modify({ url: rewrittenUrl });
+        const response = yield* staticApp.pipe(
+          Effect.provideService(HttpServerRequest.HttpServerRequest, rewrittenRequest),
+          Effect.catch((error: unknown) => HttpServerRespondable.toResponseOrElse(error, HttpServerResponse.text("Not found", { status: 404 }))),
+        );
+
+        return withCorsOrigins(request, response, allowedOrigins);
+      });
+
+      const startServer = yield* Effect.cached(Effect.gen(function*() {
+        const serverContext = yield* Layer.buildWithScope(NodeHttpServer.layerTest, scope);
+        const server = Context.get(serverContext, HttpServer.HttpServer);
+
+        yield* server.serve(app).pipe(
+          Effect.provideService(FileSystem.FileSystem, fileSystem),
+          Effect.provideService(Path.Path, path),
+          Effect.provideService(HttpPlatform.HttpPlatform, httpPlatform),
+          Effect.provideService(PiContext, piContext),
+          Scope.provide(scope),
+        );
+
+        if (server.address._tag === "UnixAddress") {
+          return yield* Effect.die("webmcp_serve requires a TCP HTTP server address");
+        }
+
+        return { origin: `http://localhost:${server.address.port}` };
+      }));
+
+      return PiWebMcpServeService.of({
+        execute: Effect.fn("PiWebMcpServeService.execute")(
+          function*(params: PiWebMcpServeParams) {
+            const ctx = yield* PiContext;
+            const server = yield* startServer;
+            const resolvedPath = path.isAbsolute(params.path)
+              ? params.path
+              : path.resolve(ctx.cwd, params.path);
+            const stat = yield* fileSystem.stat(resolvedPath);
+
+            if (stat.type !== "File" && stat.type !== "Directory") {
+              return {
+                content: [{ type: "text" as const, text: `Cannot serve ${resolvedPath}: path is not a file or directory.` }],
+                details: {},
+              };
+            }
+
+            const mount: Mount = stat.type === "File"
+              ? {
+                root: path.dirname(resolvedPath),
+                kind: "file",
+                fileName: path.basename(resolvedPath),
+              }
+              : {
+                root: resolvedPath,
+                kind: "directory",
+              };
+
+            const id = yield* Ref.modify(mountsRef, (mounts) => {
+              const next = [...mounts, mount];
+              return [String(next.length - 1), next] as const;
+            });
+
+            return {
+              content: [{
+                type: "text" as const,
+                text: `Serving ${mount.kind} at ${
+                  mount.kind === "file"
+                    ? `${server.origin}/${id}/${encodeURIComponent(mount.fileName!)}`
+                    : `${server.origin}/${id}/`
+                }`,
+              }],
+              details: {},
+            };
+          },
+          (effect) =>
+            effect.pipe(
+              Effect.catch((cause: unknown) =>
+                Effect.succeed({
+                  content: [{ type: "text" as const, text: `Failed to serve path: ${cause instanceof Error ? cause.message : String(cause)}` }],
+                  details: {},
+                })
+              ),
+            ),
+        ),
+      });
+    }),
+  );
+}

package/src/services/PiWebMcpSettingsService.ts

@@ -0,0 +1,57 @@
+import { getAgentDir, SettingsManager } from "@earendil-works/pi-coding-agent";
+import { Context, Effect, Layer, Option, Schema } from "effect";
+import { Origin } from "../schemas/WebMcpTool";
+import { PiContext } from "./PiApi";
+
+export class PiWebMcpSettings extends Schema.Class<PiWebMcpSettings>("pi-webmcp/PiWebMcpSettings")({
+  allowedOrigins: Schema.optionalKey(Schema.Array(Schema.String)),
+  disallowedOrigins: Schema.optionalKey(Schema.Array(Schema.String)),
+}) {}
+
+class PiSettings extends Schema.Class<PiSettings>("pi-webmcp/PiSettings")({
+  webmcp: Schema.optionalKey(PiWebMcpSettings),
+}) {}
+
+export class PiWebMcpSettingsService extends Context.Service<PiWebMcpSettingsService, {
+  readonly allowedOrigins: Option.Option<ReadonlySet<Origin>>;
+  readonly disallowedOrigins: Option.Option<ReadonlySet<Origin>>;
+}>()("pi-webmcp/PiWebMcpSettingsService") {
+  static readonly live = Layer.effect(
+    PiWebMcpSettingsService,
+    Effect.gen(function*() {
+      const ctx = yield* PiContext;
+      const manager = SettingsManager.create(ctx.cwd, getAgentDir());
+
+      const normalizeOrigin = (origin: string): Origin => {
+        try {
+          const url = new URL(origin.includes("://") ? origin : `https://${origin}`);
+          return Schema.decodeSync(Origin)(url.host);
+        } catch {
+          return Schema.decodeSync(Origin)(origin);
+        }
+      };
+
+      const normalizeOrigins = (origins: ReadonlyArray<string>): ReadonlySet<Origin> => {
+        return new Set(origins.map(normalizeOrigin));
+      };
+
+      const globalSettings = yield* Schema.decodeUnknownEffect(PiSettings)(manager.getGlobalSettings());
+      const projectSettings = yield* Schema.decodeUnknownEffect(PiSettings)(manager.getProjectSettings());
+
+      const globalWebMcp = globalSettings.webmcp;
+      const projectWebMcp = projectSettings.webmcp;
+
+      const allowedOrigins = Option.map(
+        Option.fromUndefinedOr(projectWebMcp?.allowedOrigins ?? globalWebMcp?.allowedOrigins),
+        (origins) => normalizeOrigins(origins),
+      );
+
+      const disallowedOrigins = Option.map(
+        Option.fromUndefinedOr(projectWebMcp?.disallowedOrigins ?? globalWebMcp?.disallowedOrigins),
+        (origins) => normalizeOrigins(origins),
+      );
+
+      return PiWebMcpSettingsService.of({ allowedOrigins, disallowedOrigins });
+    }),
+  );
+}

package/src/services/PiWebMcpSystemPromptService.ts

@@ -0,0 +1,67 @@
+import { Context, Effect, Layer, Option } from "effect";
+import { WebMcpTool } from "../schemas/WebMcpTool";
+import { BrowserClient } from "./BrowserClient";
+import { PiContext } from "./PiApi";
+import { PiWebMcpToolStateService } from "./PiWebMcpToolStateService";
+import { WebMcpToolDiffService } from "./WebMcpToolDiffService";
+
+function formatTools(tools: WebMcpTool[], options: { readonly includeDescription: boolean; readonly unavailableOriginLabel?: string; }) {
+  if (tools.length === 0) return "none";
+
+  const groups: WebMcpTool[][] = [];
+  for (const tool of tools) {
+    const group = groups.find((group) => group[0]?.origin === tool.origin);
+    if (group) {
+      group.push(tool);
+    } else {
+      groups.push([tool]);
+    }
+  }
+
+  return groups.map((list) => {
+    const origin = list[0]!.origin;
+    const body = list
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((tool) => {
+        const description = options.includeDescription && tool.description ? ` ${tool.description}` : "";
+        return `- **${tool.name}**${description}`;
+      })
+      .join("\n");
+
+    const originLabel = options.unavailableOriginLabel ? `${origin} (${options.unavailableOriginLabel})` : origin;
+    return `${originLabel}\n${body}`;
+  }).join("\n\n");
+}
+
+export class PiWebMcpSystemPromptService extends Context.Service<PiWebMcpSystemPromptService, {
+  readonly getSystemPrompt: () => Effect.Effect<string | undefined, never, PiContext>;
+}>()("pi-webmcp/PiWebMcpSystemPromptService") {
+  static readonly live = Layer.effect(
+    PiWebMcpSystemPromptService,
+    Effect.gen(function*() {
+      const browser = yield* BrowserClient;
+      const toolState = yield* PiWebMcpToolStateService;
+      const toolDiff = yield* WebMcpToolDiffService;
+
+      return PiWebMcpSystemPromptService.of({
+        getSystemPrompt: Effect.fn("PiWebMcpSystemPromptService.getSystemPrompt")(function*() {
+          const cdp = yield* browser.get;
+
+          if (Option.isNone(cdp)) {
+            return "WebMCP connection is not live. No WebMCP tools are currently available.";
+          }
+
+          const staged = yield* toolState.staged;
+          const committed = yield* toolState.committed;
+          const diff = toolDiff.diff(committed, staged);
+
+          if (!toolDiff.hasDiff(diff)) return undefined;
+
+          return `WebMCP connection is live.\n\nNew tools available:\n\n${formatTools(diff.added, { includeDescription: true })}\n\nTools no longer available:\n\n${
+            formatTools(diff.removed, { includeDescription: false, unavailableOriginLabel: "none remain" })
+          }\n\nKeep a running internal ledger of the WebMCP tool changes listed above and prefer it over calling webmcp_list. Only call webmcp_list when you are genuinely confused about which tools are available or need the full grouped listing; it does not actively scan the browser.`;
+        }),
+      });
+    }),
+  );
+}

package/src/services/PiWebMcpToolStateService.ts

@@ -0,0 +1,49 @@
+import { Context, Effect, Layer, Option, Ref, Result, Schema } from "effect";
+import { WebMcpTool, WebMcpTools } from "../schemas/WebMcpTool";
+import { PiContext } from "./PiApi";
+
+export class PiWebMcpToolStateService extends Context.Service<PiWebMcpToolStateService, {
+  readonly stage: (tools: WebMcpTool[]) => Effect.Effect<void>;
+  readonly staged: Effect.Effect<WebMcpTool[]>;
+  readonly commit: () => Effect.Effect<Option.Option<WebMcpTool[]>>;
+  readonly committed: Effect.Effect<WebMcpTool[], never, PiContext>;
+}>()("pi-webmcp/PiWebMcpToolStateService") {
+  static readonly live = Layer.effect(
+    PiWebMcpToolStateService,
+    Effect.gen(function*() {
+      const stagedRef = yield* Ref.make<Option.Option<WebMcpTool[]>>(Option.none());
+
+      return PiWebMcpToolStateService.of({
+        stage: Effect.fn("PiWebMcpToolStateService.stage")(function*(tools: WebMcpTool[]) {
+          yield* Ref.set(stagedRef, Option.some(tools));
+        }),
+        staged: Effect.gen(function*() {
+          const tools = yield* Ref.get(stagedRef);
+          return Option.getOrElse(tools, () => []);
+        }),
+        commit: Effect.fn("PiWebMcpToolStateService.commit")(function*() {
+          return yield* Ref.getAndSet(stagedRef, Option.none());
+        }),
+        committed: Effect.gen(function*() {
+          const ctx = yield* PiContext;
+          const branch = ctx.sessionManager.getBranch();
+
+          for (let index = branch.length - 1; index >= 0; index--) {
+            const entry = branch[index];
+            if (entry.type !== "message") continue;
+            if (entry.message?.role !== "user") continue;
+
+            const details = entry.message as typeof entry.message & { details?: { webmcp?: { tools?: unknown; }; }; };
+            const result = Schema.decodeUnknownResult(WebMcpTools)(details.details?.webmcp?.tools);
+
+            if (Result.isSuccess(result)) {
+              return [...result.success];
+            }
+          }
+
+          return [];
+        }),
+      });
+    }),
+  );
+}

package/src/services/WebMcpEventService.ts

@@ -0,0 +1,157 @@
+import { Context, Effect, Layer, Queue, Result, Schema, Stream } from "effect";
+import { WebMcpTool } from "../schemas/WebMcpTool";
+import { BrowserClient } from "./BrowserClient";
+
+export const WebMcpEventToolAdded = Schema.TaggedStruct("WebMcpEventToolAdded", {
+  sessionId: Schema.String,
+  tool: WebMcpTool,
+});
+
+export const WebMcpEventToolRemoved = Schema.TaggedStruct("WebMcpEventToolRemoved", {
+  sessionId: Schema.String,
+  frameId: Schema.String,
+  name: Schema.String,
+});
+
+export const WebMcpEventSessionCleared = Schema.TaggedStruct("WebMcpEventSessionCleared", {
+  sessionId: Schema.String,
+});
+
+export const WebMcpEvent = Schema.Union([
+  WebMcpEventToolAdded,
+  WebMcpEventToolRemoved,
+  WebMcpEventSessionCleared,
+]);
+
+export type WebMcpEvent = typeof WebMcpEvent.Type;
+
+class TargetInfo extends Schema.Class<TargetInfo>("TargetInfo")({
+  targetId: Schema.String,
+  title: Schema.String,
+  url: Schema.URLFromString,
+  type: Schema.String,
+  attached: Schema.optionalKey(Schema.Boolean),
+}) {}
+
+function isPageTarget(target: TargetInfo) {
+  return target.type === "page" && target.url.protocol !== "chrome:" && target.url.protocol !== "devtools:";
+}
+
+export class WebMcpEventService extends Context.Service<WebMcpEventService, {
+  readonly changes: Stream.Stream<WebMcpEvent, never, never>;
+}>()("pi-webmcp/WebMcpEventService") {
+  static readonly liveWithoutDependencies = Layer.effect(
+    WebMcpEventService,
+    Effect.gen(function*() {
+      const browser = yield* BrowserClient;
+
+      const setup = Effect.gen(function*() {
+        const cdp = yield* browser.connect();
+        const targetBySession = new Map<string, TargetInfo>();
+
+        return Stream.callback<WebMcpEvent>((queue) => {
+          return Effect.gen(function*() {
+            const attachTarget = async (target: TargetInfo) => {
+              if (!isPageTarget(target) || target.attached) return;
+              try {
+                const { sessionId } = await cdp.send("Target.attachToTarget", { targetId: target.targetId, flatten: true });
+                targetBySession.set(sessionId, target);
+                await cdp.send("Page.enable", {}, sessionId);
+                await cdp.send("WebMCP.enable", {}, sessionId);
+              } catch {
+                // Tab may have closed between discovery and attach
+              }
+            };
+
+            const onToolsAdded = (ev: any, sessionId?: string) => {
+              if (!sessionId) return;
+              const target = targetBySession.get(sessionId);
+              if (!target) throw new Error(`Missing target info for WebMCP session: ${sessionId}`);
+              const origin = target.url.host;
+              for (const tool of ev.tools ?? []) {
+                const result = Schema.decodeUnknownResult(WebMcpTool)({ ...tool, origin, sessionId });
+                if (Result.isFailure(result)) continue;
+                Queue.offerUnsafe(queue, WebMcpEventToolAdded.make({ sessionId, tool: result.success }));
+              }
+            };
+
+            const onToolsRemoved = (ev: any, sessionId?: string) => {
+              if (!sessionId) return;
+              for (const removed of ev.tools ?? []) {
+                const name = removed?.name;
+                const frameId = removed?.frameId;
+                if (!name || !frameId) continue;
+                Queue.offerUnsafe(queue, WebMcpEventToolRemoved.make({ sessionId, frameId, name }));
+              }
+            };
+
+            const onFrameNavigated = (ev: any, sessionId?: string) => {
+              if (!sessionId || ev.frame?.parentId) return;
+              Queue.offerUnsafe(queue, WebMcpEventSessionCleared.make({ sessionId }));
+              cdp.send("WebMCP.enable", {}, sessionId).catch(() => {});
+            };
+
+            const onDetachedFromTarget = ({ sessionId }: { sessionId?: string; }) => {
+              if (!sessionId) return;
+              targetBySession.delete(sessionId);
+              Queue.offerUnsafe(queue, WebMcpEventSessionCleared.make({ sessionId }));
+            };
+
+            const onTargetCreated = ({ targetInfo }: { targetInfo?: unknown; }) => {
+              if (!targetInfo) return;
+              const result = Schema.decodeUnknownResult(TargetInfo)(targetInfo);
+              if (Result.isFailure(result)) return;
+              void attachTarget(result.success);
+            };
+
+            const onTargetInfoChanged = ({ targetInfo }: { targetInfo?: unknown; }) => {
+              if (!targetInfo) return;
+              const result = Schema.decodeUnknownResult(TargetInfo)(targetInfo);
+              if (Result.isFailure(result)) return;
+              void attachTarget(result.success);
+            };
+
+            yield* Effect.acquireRelease(
+              Effect.gen(function*() {
+                yield* Effect.sync(() => cdp.on("WebMCP.toolsAdded", onToolsAdded));
+                yield* Effect.sync(() => cdp.on("WebMCP.toolsRemoved", onToolsRemoved));
+                yield* Effect.sync(() => cdp.on("Page.frameNavigated", onFrameNavigated));
+                yield* Effect.sync(() => cdp.on("Target.detachedFromTarget", onDetachedFromTarget));
+                yield* Effect.sync(() => cdp.on("Target.targetCreated", onTargetCreated));
+                yield* Effect.sync(() => cdp.on("Target.targetInfoChanged", onTargetInfoChanged));
+
+                yield* Effect.tryPromise(() => cdp.send("Target.setDiscoverTargets", { discover: true }));
+
+                const { targetInfos } = yield* Effect.tryPromise(() => cdp.send("Target.getTargets"));
+                const pages = targetInfos?.flatMap((targetInfo: unknown) => {
+                  const result = Schema.decodeUnknownResult(TargetInfo)(targetInfo);
+                  return Result.isSuccess(result) && isPageTarget(result.success) ? [result.success] : [];
+                }) ?? [];
+                for (const target of pages) {
+                  yield* Effect.tryPromise(() => attachTarget(target)).pipe(Effect.ignore);
+                }
+              }).pipe(Effect.ignore),
+              () =>
+                Effect.sync(() => {
+                  cdp.off!("WebMCP.toolsAdded", onToolsAdded);
+                  cdp.off!("WebMCP.toolsRemoved", onToolsRemoved);
+                  cdp.off!("Page.frameNavigated", onFrameNavigated);
+                  cdp.off!("Target.detachedFromTarget", onDetachedFromTarget);
+                  cdp.off!("Target.targetCreated", onTargetCreated);
+                  cdp.off!("Target.targetInfoChanged", onTargetInfoChanged);
+                }),
+            );
+          }).pipe(Effect.ignore);
+        });
+      });
+
+      return WebMcpEventService.of({
+        changes: Stream.unwrap(setup.pipe(Effect.orDie)),
+      });
+    }),
+  );
+
+  static readonly live = WebMcpEventService.liveWithoutDependencies.pipe(
+    Layer.provide(BrowserClient.live),
+  );
+}

package/src/services/WebMcpToolDiffService.ts

@@ -0,0 +1,28 @@
+import { Context, Layer } from "effect";
+import { WebMcpTool } from "../schemas/WebMcpTool";
+
+export type WebMcpToolDiff = {
+  readonly added: WebMcpTool[];
+  readonly removed: WebMcpTool[];
+};
+
+export class WebMcpToolDiffService extends Context.Service<WebMcpToolDiffService, {
+  readonly diff: (previous: WebMcpTool[], next: WebMcpTool[]) => WebMcpToolDiff;
+  readonly hasDiff: (diff: WebMcpToolDiff) => boolean;
+}>()("pi-webmcp/WebMcpToolDiffService") {
+  static readonly live = Layer.succeed(
+    WebMcpToolDiffService,
+    WebMcpToolDiffService.of({
+      diff: (previous, next) => {
+        const previousHashes = new Set(previous.map((tool) => tool.hash));
+        const nextHashes = new Set(next.map((tool) => tool.hash));
+
+        return {
+          added: next.filter((tool) => !previousHashes.has(tool.hash)),
+          removed: previous.filter((tool) => !nextHashes.has(tool.hash)),
+        };
+      },
+      hasDiff: (diff) => diff.added.length > 0 || diff.removed.length > 0,
+    }),
+  );
+}

package/src/services/WebMcpToolsService.ts

@@ -0,0 +1,46 @@
+import { Context, Effect, Layer, Match, Stream } from "effect";
+import { WebMcpTool } from "../schemas/WebMcpTool";
+import { WebMcpEventService } from "./WebMcpEventService";
+
+export class WebMcpToolsService extends Context.Service<WebMcpToolsService, {
+  readonly changes: Stream.Stream<WebMcpTool[], never, never>;
+}>()("pi-webmcp/WebMcpToolsService") {
+  static readonly liveWithoutDependencies = Layer.effect(
+    WebMcpToolsService,
+    Effect.gen(function*() {
+      const events = yield* WebMcpEventService;
+
+      return WebMcpToolsService.of({
+        changes: events.changes.pipe(
+          Stream.scan(new Map<string, WebMcpTool>(), (registry: Map<string, WebMcpTool>, event) =>
+            Match.valueTags(event, {
+              WebMcpEventToolAdded: ({ sessionId, tool }) => {
+                const next = new Map(registry);
+                next.set(`${sessionId}::${tool.frameId}::${tool.name}`, tool);
+                return next;
+              },
+              WebMcpEventToolRemoved: ({ sessionId, frameId, name }) => {
+                const next = new Map(registry);
+                next.delete(`${sessionId}::${frameId}::${name}`);
+                return next;
+              },
+              WebMcpEventSessionCleared: ({ sessionId }) => {
+                const next = new Map(registry);
+                for (const key of registry.keys()) {
+                  if (key.startsWith(`${sessionId}::`)) {
+                    next.delete(key);
+                  }
+                }
+                return next;
+              },
+            })),
+          Stream.map((registry) => [...registry.values()]),
+        ),
+      });
+    }),
+  );
+
+  static readonly live = WebMcpToolsService.liveWithoutDependencies.pipe(
+    Layer.provide(WebMcpEventService.live),
+  );
+}

package/src/utils/copy.ts

@@ -0,0 +1 @@
+export const agentConnectInstruction = "WebMCP is not connected. Ask the user to run `/webmcp` before using WebMCP tools.";

package/src/utils/renderers.ts

@@ -0,0 +1,70 @@
+import { type AgentToolResult, getMarkdownTheme, keyText, type Theme, type ToolRenderResultOptions } from "@earendil-works/pi-coding-agent";
+import { Markdown, Text } from "@earendil-works/pi-tui";
+import type { Origin, ToolId } from "../schemas/WebMcpTool";
+
+export type PiWebMcpRenderCallOptions = {
+  readonly toolName: string;
+  readonly origin?: Origin;
+  readonly webMcpTool?: ToolId;
+  readonly target?: string;
+};
+
+export const renderPiWebMcpCall = (
+  theme: Theme,
+  { toolName, origin, webMcpTool, target }: PiWebMcpRenderCallOptions,
+) => {
+  let text = theme.fg("toolTitle", theme.bold(toolName));
+
+  if (target) {
+    text += ` ${theme.fg("toolOutput", target)}`;
+    text += ` ${theme.fg("dim", `(${keyText("app.tools.expand")} to expand)`)}`;
+    return new Text(text, 0, 0);
+  }
+
+  if (!origin) {
+    text += ` ${theme.fg("dim", `(${keyText("app.tools.expand")} to expand)`)}`;
+    return new Text(text, 0, 0);
+  }
+
+  text += ` ${theme.fg("accent", origin)}`;
+
+  if (webMcpTool) {
+    text += ` ${theme.fg("dim", ":")} ${theme.fg("toolOutput", webMcpTool)}`;
+  }
+
+  text += ` ${theme.fg("dim", `(${keyText("app.tools.expand")} to expand)`)}`;
+
+  return new Text(text, 0, 0);
+};
+
+const getTextResult = (result: AgentToolResult<unknown>): string => {
+  return result.content?.find((c) => c.type === "text")?.text ?? "";
+};
+
+export const renderPiWebMcpResult = (
+  result: AgentToolResult<unknown>,
+  { expanded }: ToolRenderResultOptions,
+): Text => {
+  if (!expanded) return new Text("", 0, 0);
+  return new Text(getTextResult(result), 0, 0);
+};
+
+export const renderPiWebMcpMarkdownResult = (
+  result: AgentToolResult<unknown>,
+  { expanded }: ToolRenderResultOptions,
+) => {
+  if (!expanded) return new Text("", 0, 0);
+  return new Markdown(getTextResult(result), 0, 0, getMarkdownTheme());
+};
+
+export const renderPiWebMcpServeResult = (
+  result: AgentToolResult<unknown>,
+  { expanded }: ToolRenderResultOptions,
+): Text => {
+  if (!expanded) return new Text("", 0, 0);
+  return new Text(`\n${getTextResult(result)}`, 0, 0);
+};
+
+export const renderPiWebMcpListMessage = (message: { readonly content: unknown; }) => {
+  return new Markdown(typeof message.content === "string" ? message.content : "", 0, 0, getMarkdownTheme());
+};