paseo-plugin-chat-view 0.0.0-stage → 0.1.0

package/shared/mermaid/zoom.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import { MIN_SCALE, fitScale } from "./layout";
+import {
+  ZOOM_MAX,
+  ZOOM_MIN,
+  canZoomIn,
+  canZoomOut,
+  fitBothScale,
+  fitRowZoom,
+  sameZoom,
+  toolbarState,
+  zoomIn,
+  zoomLabel,
+  zoomOut,
+} from "./zoom";
+
+describe("zoom steps", () => {
+  it("starts at 100% and steps by a quarter, the way the Paseo viewport does", () => {
+    expect(zoomIn(1)).toBeCloseTo(1.25);
+    expect(zoomOut(1)).toBeCloseTo(0.8);
+  });
+
+  it("returns exactly to 100% after stepping in and back out", () => {
+    // 1.25 * 0.8 is not 1 in floating point; the label and the disabled state
+    // of the fit button both compare against 1, so the step has to land on it.
+    expect(zoomOut(zoomIn(1))).toBe(1);
+    expect(zoomIn(zoomOut(1))).toBe(1);
+  });
+
+  it("stops at the limits instead of overshooting them", () => {
+    expect(zoomIn(ZOOM_MAX)).toBe(ZOOM_MAX);
+    expect(zoomIn(3.5)).toBe(ZOOM_MAX);
+    expect(zoomOut(ZOOM_MIN)).toBe(ZOOM_MIN);
+    expect(zoomOut(0.3)).toBe(ZOOM_MIN);
+  });
+
+  it("reports when a step is no longer possible, so the button can go quiet", () => {
+    expect(canZoomIn(1)).toBe(true);
+    expect(canZoomIn(ZOOM_MAX)).toBe(false);
+    expect(canZoomOut(1)).toBe(true);
+    expect(canZoomOut(ZOOM_MIN)).toBe(false);
+  });
+
+  it("labels the zoom as a whole percent", () => {
+    expect(zoomLabel(1)).toBe("100%");
+    expect(zoomLabel(0.8)).toBe("80%");
+    expect(zoomLabel(1.5625)).toBe("156%");
+    expect(zoomLabel(0.5454)).toBe("55%");
+  });
+
+  it("treats zooms that differ by less than a rounding error as the same", () => {
+    expect(sameZoom(1, 1.0000000000000002)).toBe(true);
+    expect(sameZoom(1, 1.01)).toBe(false);
+  });
+});
+
+describe("fitRowZoom", () => {
+  it("shrinks a wide drawing that hit the readability floor until all of it shows", () => {
+    // fitScale stops at MIN_SCALE and lets the row scroll; fit to view goes past that.
+    const rowScale = fitScale(600, 2000);
+    expect(rowScale).toBe(MIN_SCALE);
+    expect(fitRowZoom(rowScale, 2000, 600)).toBeCloseTo(600 / (2000 * MIN_SCALE));
+    expect(fitRowZoom(rowScale, 2000, 600)).toBeLessThan(1);
+  });
+
+  it("never grows a drawing past its default size", () => {
+    // A three-node chart in a wide row would otherwise become a poster.
+    expect(fitRowZoom(fitScale(900, 300), 300, 900)).toBe(1);
+  });
+
+  it("is a no-op when the drawing already fits the row", () => {
+    expect(fitRowZoom(fitScale(900, 1200), 1200, 900)).toBe(1);
+  });
+
+  it("leaves the drawing alone before the row has been measured", () => {
+    expect(fitRowZoom(0.75, 1200, 0)).toBe(1);
+    expect(fitRowZoom(0, 1200, 900)).toBe(1);
+    expect(fitRowZoom(0.75, 0, 900)).toBe(1);
+  });
+});
+
+describe("fitBothScale", () => {
+  it("fits both axes of the pop-out without changing the aspect ratio", () => {
+    expect(fitBothScale({ width: 1600, height: 800 }, { width: 800, height: 600 })).toBe(0.5);
+    expect(fitBothScale({ width: 400, height: 800 }, { width: 800, height: 600 })).toBe(0.75);
+  });
+
+  it("keeps the padding clear of the drawing", () => {
+    expect(fitBothScale({ width: 1600, height: 800 }, { width: 800, height: 600 }, 20)).toBe(
+      760 / 1600,
+    );
+  });
+
+  it("grows a small drawing to fill the window, which is what popping out is for", () => {
+    expect(fitBothScale({ width: 300, height: 200 }, { width: 1200, height: 900 })).toBe(4);
+  });
+
+  it("leaves the drawing alone before the window has been measured", () => {
+    expect(fitBothScale({ width: 300, height: 200 }, { width: 0, height: 0 })).toBe(1);
+    expect(fitBothScale({ width: 0, height: 200 }, { width: 1200, height: 900 })).toBe(1);
+  });
+});
+
+describe("toolbarState", () => {
+  it("offers the zoom steps and the pop-out at the default zoom", () => {
+    expect(toolbarState({ zoom: 1, fitZoom: 1, showCode: false })).toEqual({
+      zoomIn: true,
+      zoomOut: true,
+      fit: false,
+      popOut: true,
+    });
+  });
+
+  it("offers fit to view only when it would change something", () => {
+    expect(toolbarState({ zoom: 1, fitZoom: 0.6, showCode: false }).fit).toBe(true);
+    expect(toolbarState({ zoom: 0.6, fitZoom: 0.6, showCode: false }).fit).toBe(false);
+    expect(toolbarState({ zoom: 0.6000001, fitZoom: 0.6, showCode: false }).fit).toBe(false);
+  });
+
+  it("quiets the step that has reached its limit", () => {
+    expect(toolbarState({ zoom: ZOOM_MAX, fitZoom: 1, showCode: false }).zoomIn).toBe(false);
+    expect(toolbarState({ zoom: ZOOM_MIN, fitZoom: 1, showCode: false }).zoomOut).toBe(false);
+  });
+
+  it("quiets every drawing control while the source is shown", () => {
+    // Zooming text that is not on screen would be a change the reader cannot see.
+    expect(toolbarState({ zoom: 1, fitZoom: 0.6, showCode: true })).toEqual({
+      zoomIn: false,
+      zoomOut: false,
+      fit: false,
+      popOut: false,
+    });
+  });
+});

package/shared/mermaid/zoom.ts

@@ -0,0 +1,114 @@
+/**
+ * The zoom model behind the toolbar, kept pure so it can be tested without
+ * mounting anything.
+ *
+ * Zoom is a multiplier over the scale the drawing was fitted at: 1 is "as
+ * fitted", which is what the toolbar labels 100%. This is the same convention
+ * as Paseo's own diagram viewport, where the fit transform has scale 1, so a
+ * reader who knows one knows the other. The fitted scale itself depends on
+ * where the drawing sits: in the row it is `fitScale` from layout.ts, in the
+ * pop-out it is `fitBothScale` below.
+ */
+
+export const ZOOM_MIN = 0.25;
+export const ZOOM_MAX = 4;
+/** Paseo zooms by 1.25 in and 0.8 out; the two are exact inverses. */
+export const ZOOM_STEP = 1.25;
+
+const EPSILON = 1e-3;
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export function clampZoom(zoom: number): number {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoom));
+}
+
+/**
+ * Snaps away the floating point residue of a multiply-then-divide, so stepping
+ * in and back out lands on exactly the value it started from.
+ */
+function snap(zoom: number): number {
+  return Math.round(zoom * 1e6) / 1e6;
+}
+
+export function zoomIn(zoom: number): number {
+  return clampZoom(snap(zoom * ZOOM_STEP));
+}
+
+export function zoomOut(zoom: number): number {
+  return clampZoom(snap(zoom / ZOOM_STEP));
+}
+
+export function canZoomIn(zoom: number): boolean {
+  return zoom < ZOOM_MAX - EPSILON;
+}
+
+export function canZoomOut(zoom: number): boolean {
+  return zoom > ZOOM_MIN + EPSILON;
+}
+
+export function sameZoom(a: number, b: number): boolean {
+  return Math.abs(a - b) < EPSILON;
+}
+
+export function zoomLabel(zoom: number): string {
+  return `${Math.round(zoom * 100)}%`;
+}
+
+/**
+ * The zoom that shows the whole drawing across the row.
+ *
+ * The row's own fit stops shrinking at the readability floor and scrolls
+ * sideways past it; "fit to view" is the reader asking to see all of it anyway.
+ * It never goes above 1, because the default already grows small drawings as
+ * far as they should go, and 1 means the request was already satisfied.
+ */
+export function fitRowZoom(rowScale: number, naturalWidth: number, available: number): number {
+  if (!(rowScale > 0) || !(naturalWidth > 0) || !(available > 0)) return 1;
+  return Math.min(1, snap(available / (naturalWidth * rowScale)));
+}
+
+/**
+ * The scale that fits a drawing inside both axes of a viewport, with `padding`
+ * kept clear on every side. Unlike the row, the pop-out grows a small drawing
+ * as far as the window allows: seeing it large is the point of popping out.
+ */
+export function fitBothScale(natural: Size, viewport: Size, padding = 0): number {
+  const width = viewport.width - padding * 2;
+  const height = viewport.height - padding * 2;
+  if (!(natural.width > 0) || !(natural.height > 0) || !(width > 0) || !(height > 0)) return 1;
+  return Math.min(width / natural.width, height / natural.height);
+}
+
+export interface ToolbarState {
+  zoomIn: boolean;
+  zoomOut: boolean;
+  fit: boolean;
+  popOut: boolean;
+}
+
+/**
+ * Which drawing controls are worth pressing right now. A control that would
+ * change nothing is shown quiet rather than hidden, so the toolbar keeps its
+ * shape and the reader learns where the limits are.
+ */
+export function toolbarState({
+  zoom,
+  fitZoom,
+  showCode,
+}: {
+  zoom: number;
+  fitZoom: number;
+  showCode: boolean;
+}): ToolbarState {
+  if (showCode) return { zoomIn: false, zoomOut: false, fit: false, popOut: false };
+  return {
+    zoomIn: canZoomIn(zoom),
+    zoomOut: canZoomOut(zoom),
+    fit: !sameZoom(zoom, fitZoom),
+    popOut: true,
+  };
+}

package/shared/settings.ts

@@ -0,0 +1,41 @@
+import { defineSettings } from "@getpaseo/plugin";
+import { z } from "zod";
+
+export const paletteModeSchema = z.enum(["vivid", "soft", "high_contrast"]);
+export type PaletteMode = z.output<typeof paletteModeSchema>;
+
+export const displayModeSchema = z.preprocess(
+  (value) => (value === "codex" ? "folded" : value),
+  z.enum(["folded", "detailed"]),
+);
+export type DisplayMode = z.output<typeof displayModeSchema>;
+
+export const languageModeSchema = z.enum(["auto", "zh-CN", "en-US"]);
+export type LanguageMode = z.output<typeof languageModeSchema>;
+
+export const activitySettings = defineSettings({
+  id: "display",
+  scope: "host",
+  version: 3,
+  schema: z.object({
+    mermaidEnabled: z.boolean().default(true),
+    compactActivityEnabled: z.boolean().default(true),
+    stickyEnabled: z.boolean().default(true),
+    readonlyMessagesEnabled: z.boolean().default(true),
+    // Off until a model endpoint is configured: an unconfigured button must not look actionable.
+    enhanceEnabled: z.boolean().default(false),
+    enhanceBaseUrl: z.string().default(""),
+    enhanceApiKey: z.string().default(""),
+    enhanceModel: z.string().default(""),
+    palette: paletteModeSchema.default("vivid"),
+    displayMode: displayModeSchema.default("folded"),
+    language: languageModeSchema.default("zh-CN"),
+  }),
+  // v1 stored none of the enhance fields, v2 none of readonly; defaults fill them in on next parse.
+  migrate: (values) => values,
+});
+
+export const DEFAULT_PALETTE_MODE: PaletteMode = "vivid";
+export const DEFAULT_DISPLAY_MODE: DisplayMode = "folded";
+
+export type ChatViewSettings = z.output<typeof activitySettings.schema>;

package/shared/sticky/history.test.ts

@@ -0,0 +1,91 @@
+import { expect, it } from "vitest";
+import { PromptHistory } from "./history";
+
+const time = "2026-10-06T10:00:00.000Z";
+
+it("retains the latest prompt at the bottom across older pages and clears replacement history", () => {
+  const history = new PromptHistory();
+  expect(history.latest()).toBeUndefined();
+  history.add({ type: "user_message", text: "current", messageId: "u2" }, time, 3);
+  history.add({ type: "user_message", text: "older", messageId: "u1" }, time, 1);
+  history.add({ type: "assistant_message", text: "answer", messageId: "a2" }, time, 4);
+  expect(history.latest()).toMatchObject({ id: "u2", text: "current" });
+  history.add({ type: "user_message", text: "new round", messageId: "u3" }, time, 5);
+  expect(history.latest()).toMatchObject({ id: "u3", text: "new round" });
+  history.clear();
+  expect(history.latest()).toBeUndefined();
+});
+
+it("associates virtualized native and plugin rows with their own prompt, not the latest prompt", () => {
+  const history = new PromptHistory();
+  history.add(
+    { type: "user_message", text: "first", messageId: "u1", clientMessageId: "local1" },
+    time,
+    1,
+  );
+  history.add({ type: "assistant_message", text: "answer", messageId: "a1" }, time, 2);
+  history.add({ type: "user_message", text: "second", messageId: "u2" }, time, 3);
+  history.add({ type: "assistant_message", text: "answer", messageId: "a2" }, time, 4);
+  history.add({ type: "assistant_message", text: "answer delta", messageId: "a1" }, time, 5);
+  expect(history.resolve("chat-view/a1/0", "chat-view/a1/0")).toEqual({
+    id: "local1",
+    text: "first",
+    aliases: ["local1", "u1"],
+  });
+  expect(history.resolve("a2:segment:abc", "a2")).toMatchObject({ id: "u2", text: "second" });
+  expect(history.resolve("u2", "u2")).toMatchObject({ id: "u2", text: "second" });
+});
+
+it("waits for an older page instead of borrowing a newer prompt", () => {
+  const history = new PromptHistory();
+  const earlier = Date.parse(time) - 1000;
+  history.add({ type: "assistant_message", text: "tail", messageId: "a2" }, time, 20);
+  expect(history.resolve(`assistant_${earlier}_hash_0`, null)).toBeUndefined();
+  expect(history.resolve("a2", null)).toBeUndefined();
+  history.add(
+    { type: "user_message", text: "earlier question", messageId: "u1" },
+    new Date(earlier - 1000).toISOString(),
+    1,
+  );
+  history.add({ type: "reasoning", text: "thinking" }, new Date(earlier).toISOString(), 2);
+  expect(history.resolve(`chat-view/thought_${earlier}_hash_0/0`, null)).toMatchObject({
+    id: "u1",
+    text: "earlier question",
+  });
+});
+
+it("keeps tool ownership across lifecycle updates and clears stale history after replacement", () => {
+  const history = new PromptHistory();
+  history.add({ type: "user_message", text: "first", messageId: "u1" }, time, 1);
+  history.add(
+    {
+      type: "tool_call",
+      callId: "tool1",
+      name: "read",
+      status: "running",
+      error: null,
+      detail: { type: "read", filePath: "a.ts" },
+    },
+    time,
+    2,
+  );
+  history.add({ type: "user_message", text: "second", messageId: "u2" }, time, 3);
+  history.add(
+    {
+      type: "tool_call",
+      callId: "tool1",
+      name: "read",
+      status: "completed",
+      error: null,
+      detail: { type: "read", filePath: "a.ts" },
+    },
+    time,
+    4,
+  );
+  expect(history.resolve("compact-agent-activity/agent_tool_tool1/0", null)).toMatchObject({
+    id: "u1",
+    text: "first",
+  });
+  history.clear();
+  expect(history.resolve("agent_tool_tool1", null)).toBeUndefined();
+});

package/shared/sticky/history.ts

@@ -0,0 +1,86 @@
+import type { AgentTimelineItem } from "@getpaseo/protocol/agent-types";
+
+export interface StickyPrompt {
+  id: string;
+  text: string;
+  aliases?: readonly string[];
+}
+
+interface PromptPosition extends StickyPrompt {
+  seq: number;
+  time: number;
+}
+
+/** Keeps prompt metadata, never assistant bodies or tool outputs. */
+export class PromptHistory {
+  private prompts = new Map<number, PromptPosition>();
+  private identities = new Map<string, number>();
+  private oldestTime = Infinity;
+
+  clear() {
+    this.prompts.clear();
+    this.identities.clear();
+    this.oldestTime = Infinity;
+  }
+
+  latest(): StickyPrompt | undefined {
+    let selected: PromptPosition | undefined;
+    for (const prompt of this.prompts.values()) {
+      if (!selected || prompt.seq > selected.seq) selected = prompt;
+    }
+    return selected
+      ? { id: selected.id, text: selected.text, aliases: selected.aliases }
+      : undefined;
+  }
+
+  add(item: AgentTimelineItem, timestamp: string, seq: number) {
+    const time = Date.parse(timestamp);
+    this.oldestTime = Math.min(this.oldestTime, time);
+    if (item.type === "user_message") {
+      const id = item.clientMessageId ?? item.messageId;
+      if (id)
+        this.prompts.set(seq, {
+          id,
+          text: item.text,
+          seq,
+          time,
+          aliases: [item.clientMessageId, item.messageId].filter(
+            (value): value is string => !!value,
+          ),
+        });
+      if (item.clientMessageId) this.identities.set(item.clientMessageId, seq);
+      if (item.messageId) this.identities.set(item.messageId, seq);
+    } else if (item.type === "assistant_message" && item.messageId) {
+      const previous = this.identities.get(item.messageId);
+      this.identities.set(item.messageId, previous === undefined ? seq : Math.min(previous, seq));
+    } else if (item.type === "tool_call") {
+      // The host's tool stream row keeps the call identity across lifecycle updates.
+      const id = `agent_tool_${item.callId}`;
+      const previous = this.identities.get(id);
+      this.identities.set(id, previous === undefined ? seq : Math.min(previous, seq));
+    }
+  }
+
+  resolve(rowId: string, messageId: string | null): StickyPrompt | undefined {
+    const sourceId = sourceIdentity(rowId);
+    const identity = sourceIdentity(messageId ?? sourceId);
+    const seq =
+      this.identities.get(identity) ?? this.identities.get(identity.split(":segment:")[0]!);
+    const match = /^(?:assistant|thought|user)_(\d+)_/.exec(sourceId);
+    const time = match ? Number(match[1]) : undefined;
+    // A timestamp outside the fetched window needs an older page first.
+    if (seq === undefined && (time === undefined || time < this.oldestTime)) return undefined;
+    let selected: PromptPosition | undefined;
+    for (const prompt of this.prompts.values()) {
+      const before = seq !== undefined ? prompt.seq <= seq : prompt.time <= time!;
+      if (before && (!selected || prompt.seq > selected.seq)) selected = prompt;
+    }
+    return selected
+      ? { id: selected.id, text: selected.text, aliases: selected.aliases }
+      : undefined;
+  }
+}
+
+function sourceIdentity(id: string): string {
+  return /^[a-z][a-z0-9-]*\/(.+)\/\d+$/.exec(id)?.[1] ?? id;
+}