pi-extended-teams 2.1.16 → 2.1.18

package/README.md

@@ -10,7 +10,13 @@ Read agents are the default. Edit agents are opt-in and should own isolated file
 
 ## Install and run
 
-Install from GitHub:
+Install from npm:
+
+```bash
+pi install npm:pi-extended-teams
+```
+
+Or install directly from GitHub:
 
 ```bash
 pi install git:github.com/dantetekanem/pi-extended-teams

package/extensions/index.ts

@@ -496,12 +496,13 @@ export default function (pi: ExtensionAPI) {
     teamActivityWidgetMounted = true;
     sessionCtx.ui.setWidget(
       "01-pi-extended-teams-readers",
-      (tui: any) => {
+      (tui: any, theme: any) => {
         teamActivityWidgetTui = tui;
         return teamActivityStatusWidget(
           () => teamActivityStatusSnapshot,
           isTeamActivityExpanded,
-          () => tui.requestRender?.()
+          () => tui.requestRender?.(),
+          theme
         );
       },
       { placement: "belowEditor" }

package/extensions/ui/agent-follow-view.test.ts

@@ -10,6 +10,29 @@ function stripAnsi(text: string): string {
   return text.replace(ANSI_SGR_SEQUENCE, "");
 }
 
+function makeTheme() {
+  const foregroundCodes: Record<string, number> = {
+    accent: 213,
+    border: 141,
+    borderAccent: 141,
+    customMessageLabel: 213,
+    dim: 247,
+    error: 210,
+    muted: 247,
+    success: 114,
+    syntaxFunction: 117,
+    syntaxString: 213,
+    text: 253,
+    thinkingText: 141,
+    warning: 222,
+  };
+  return {
+    fg: vi.fn((token: string, text: string) => `\x1b[38;5;${foregroundCodes[token] ?? 253}m${text}\x1b[39m`),
+    bg: vi.fn((_token: string, text: string) => `\x1b[48;5;235m${text}\x1b[49m`),
+    bold: vi.fn((text: string) => `\x1b[1m${text}\x1b[22m`),
+  };
+}
+
 function makeAgent(overrides: Partial<RunningReadAgent> = {}): RunningReadAgent {
   return {
     runId: "run-1",
@@ -223,7 +246,8 @@ describe("agent follow transcript", () => {
     expect(lines.join("\n")).not.toContain("complete final report body");
   });
 
-  it("uses semantic chrome colors while leaving prose and raw output neutral", () => {
+  it("uses Pi theme tokens for semantic chrome while leaving prose and raw output neutral", () => {
+    const theme = makeTheme();
     const lines = formatAgentFollowTranscript([
       { role: "assistant", content: [
         { type: "thinking", thinking: "Neutral thinking prose" },
@@ -243,7 +267,7 @@ describe("agent follow transcript", () => {
       },
       { role: "toolResult", toolCallId: "edit-failure", toolName: "edit", content: "Edit failed", isError: true },
       { role: "toolResult", toolCallId: "bash-raw", toolName: "bash", content: "neutral shell output", isError: false },
-    ], { width: 80 });
+    ], { width: 80, theme });
 
     const pendingHeader = lines.find((line) => stripAnsi(line).startsWith("read")) || "";
     const pendingState = lines.find((line) => stripAnsi(line).includes("waiting for result")) || "";
@@ -261,6 +285,12 @@ describe("agent follow transcript", () => {
     expect(rawOutput).toBe("\x1b[38;5;141m│\x1b[39m neutral shell output");
     expect(lines).toContain("Neutral thinking prose");
     expect(lines).toContain("Neutral assistant prose");
+    expect(theme.fg).toHaveBeenCalledWith("syntaxFunction", "read");
+    expect(theme.fg).toHaveBeenCalledWith("syntaxString", "src/pending.ts");
+    expect(theme.fg).toHaveBeenCalledWith("warning", "waiting for result…");
+    expect(theme.fg).toHaveBeenCalledWith("success", "+2");
+    expect(theme.fg).toHaveBeenCalledWith("error", "−1");
+    expect(theme.fg).toHaveBeenCalledWith("borderAccent", "│");
   });
 
   it("keeps claim and release tools compact and semantically colored", () => {
@@ -285,7 +315,7 @@ describe("agent follow transcript", () => {
         details: { released: ["src/a.ts"] },
         isError: false,
       },
-    ], { width: 80 });
+    ], { width: 80, theme: makeTheme() });
 
     expect(lines.map(stripAnsi)).toEqual([
       "claim · src/a.ts, src/b.ts · ✓",
@@ -367,6 +397,7 @@ describe("agent follow component", () => {
     let contextPercent = 23;
     const done = vi.fn();
     const tui = { terminal: { rows: 30 }, requestRender: vi.fn() };
+    const theme = makeTheme();
     const agent = makeAgent({
       session: {
         messages: [{ role: "assistant", content: [{ type: "text", text: "Working now" }] }],
@@ -376,15 +407,17 @@ describe("agent follow component", () => {
         }),
       } as any,
     });
-    const component = createAgentFollowComponent(tui, done, { getAgents: () => [agent] });
+    const component = createAgentFollowComponent(tui, done, { getAgents: () => [agent] }, theme);
 
     const first = component.render(140).join("\n");
     expect(first).toMatch(/\(reader\) gpt-model\/high · reading-default · 1m00s · 46k tok \(23%\) · Verifying assumptions\.{1,3}/);
     expect(first).not.toContain("502k tok");
     expect(first).toContain("Working now");
     expect(stripAnsi(first)).not.toContain("progress:");
-    expect(first).toContain("\x1b[48;2;22;23;32m");
-    expect(first).not.toContain("\x1b[48;5;235m");
+    expect(theme.bg).toHaveBeenCalledWith("customMessageBg", expect.any(String));
+    expect(theme.fg).toHaveBeenCalledWith("borderAccent", expect.any(String));
+    expect(first).toContain("\x1b[48;5;235m");
+    expect(first).not.toContain("\x1b[48;2;22;23;32m");
 
     billedTokens = 2_300_000;
     contextTokens = 80_000;
@@ -400,6 +433,31 @@ describe("agent follow component", () => {
     component.dispose();
   });
 
+  it("rebuilds cached themed content when Pi invalidates the component", () => {
+    const tui = { terminal: { rows: 20 }, requestRender: vi.fn() };
+    let color = 31;
+    const theme = {
+      fg: vi.fn((_token: string, text: string) => `\x1b[${color}m${text}\x1b[39m`),
+      bg: vi.fn((_token: string, text: string) => text),
+      bold: vi.fn((text: string) => text),
+    };
+    const agent = makeAgent({
+      session: {
+        messages: [{ role: "assistant", content: [{ type: "toolCall", id: "read-1", name: "read", arguments: { path: "README.md" } }] }],
+      } as any,
+    });
+    const component = createAgentFollowComponent(tui, vi.fn(), { getAgents: () => [agent] }, theme);
+
+    expect(component.render(100).join("\n")).toContain("\x1b[31mread");
+    color = 32;
+    component.invalidate();
+    const rerendered = component.render(100).join("\n");
+
+    expect(rerendered).toContain("\x1b[32mread");
+    expect(rerendered).not.toContain("\x1b[31mread");
+    component.dispose();
+  });
+
   it("uses the ordinary agent status when no stored progress is present", () => {
     const tui = { terminal: { rows: 20 }, requestRender: vi.fn() };
     const agent = makeAgent({ latestProgress: undefined, status: "working" });

package/extensions/ui/agent-follow-view.ts

@@ -1,23 +1,12 @@
 import { Input, Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
 import type { RunningReadAgent } from "../runtime/types";
 import { initialContextUsage } from "../../src/utils/runtime";
-import { dimAnsi, pink, purple } from "./ansi";
-import { createFramePanelRowRenderer, framePanel } from "./frame";
+import { createFramePanelRowRenderer, framePanel, type FramePanelStyle } from "./frame";
 import { extractTextParts, formatAnimatedProgress, formatContextUsage, formatElapsed, formatModelLabel, sanitizePlainTuiLine, sanitizeTuiLine, sanitizeTuiText } from "./renderers";
+import { resolveExtendedTeamsTheme, type ExtendedTeamsForegroundToken, type ExtendedTeamsTheme } from "./theme";
 
 const REFRESH_INTERVAL_MS = 250;
 const MAX_NAVIGATION_AGENTS = 6;
-const AGENT_FOLLOW_BACKGROUND = "\x1b[48;2;22;23;32m";
-const ACTION_FOREGROUND = "\x1b[38;5;117m";
-const PATH_FOREGROUND = "\x1b[38;5;213m";
-const SUCCESS_FOREGROUND = "\x1b[38;5;114m";
-const FAILURE_FOREGROUND = "\x1b[38;5;210m";
-const PENDING_FOREGROUND = "\x1b[38;5;222m";
-const BODY_FOREGROUND = "\x1b[38;5;253m";
-const MUTED_FOREGROUND = "\x1b[38;5;247m";
-const STRUCTURAL_FOREGROUND = "\x1b[38;5;141m";
-const ANSI_FOREGROUND_RESET = "\x1b[39m";
-const ANSI_RESET = "\x1b[0m";
 const COLLAPSED_TOOL_RESULT_LINE_LIMIT = 14;
 const COLLAPSED_TOOL_RESULT_HEAD_LINES = 8;
 const COLLAPSED_TOOL_RESULT_TAIL_LINES = 3;
@@ -32,6 +21,7 @@ export interface AgentFollowViewOptions {
 export interface AgentFollowTranscriptOptions {
   expandLargeToolResults?: boolean;
   width?: number;
+  theme?: ExtendedTeamsTheme;
 }
 
 type TranscriptBlock =
@@ -78,40 +68,40 @@ function compactTranscriptLine(text: string): string {
   return sanitizePlainTuiLine(text).replace(/\s+/g, " ").trim();
 }
 
-function semanticAnsi(text: string, foreground: string): string {
-  return `${foreground}${text}${ANSI_FOREGROUND_RESET}`;
+function themed(theme: ExtendedTeamsTheme, token: ExtendedTeamsForegroundToken, text: string): string {
+  return theme.fg(token, text);
 }
 
-function actionAnsi(text: string): string {
-  return semanticAnsi(text, ACTION_FOREGROUND);
+function actionText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "syntaxFunction", text);
 }
 
-function pathAnsi(text: string): string {
-  return semanticAnsi(text, PATH_FOREGROUND);
+function pathText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "syntaxString", text);
 }
 
-function successAnsi(text: string): string {
-  return semanticAnsi(text, SUCCESS_FOREGROUND);
+function successText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "success", text);
 }
 
-function failureAnsi(text: string): string {
-  return semanticAnsi(text, FAILURE_FOREGROUND);
+function failureText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "error", text);
 }
 
-function pendingAnsi(text: string): string {
-  return semanticAnsi(text, PENDING_FOREGROUND);
+function pendingText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "warning", text);
 }
 
-function bodyAnsi(text: string): string {
-  return semanticAnsi(text, BODY_FOREGROUND);
+function bodyText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "text", text);
 }
 
-function mutedAnsi(text: string): string {
-  return semanticAnsi(text, MUTED_FOREGROUND);
+function mutedText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "muted", text);
 }
 
-function structuralAnsi(text: string): string {
-  return semanticAnsi(text, STRUCTURAL_FOREGROUND);
+function structuralText(theme: ExtendedTeamsTheme, text: string): string {
+  return themed(theme, "borderAccent", text);
 }
 
 function boundTranscriptLine(line: string, width?: number): string {
@@ -146,26 +136,26 @@ function editDiffCounts(details: unknown): { added: number; removed: number } |
   return { added, removed };
 }
 
-function renderState(state: string): string {
-  if (state === "failed") return failureAnsi(state);
-  if (state === "working" || state === "submitting") return pendingAnsi(state);
-  if (state === "duplicate") return mutedAnsi(state);
-  return successAnsi(state);
+function renderState(theme: ExtendedTeamsTheme, state: string): string {
+  if (state === "failed") return failureText(theme, state);
+  if (state === "working" || state === "submitting") return pendingText(theme, state);
+  if (state === "duplicate") return mutedText(theme, state);
+  return successText(theme, state);
 }
 
-function renderActionPathState(action: string, path: string, state: string, width?: number): string {
+function renderActionPathState(theme: ExtendedTeamsTheme, action: string, path: string, state: string, width?: number): string {
   const renderedState = state === "failed"
-    ? failureAnsi("✗")
+    ? failureText(theme, "✗")
     : state === "succeeded"
-      ? successAnsi("✓")
-      : renderState(state);
+      ? successText(theme, "✓")
+      : renderState(theme, state);
   return boundTranscriptLine(
-    `${actionAnsi(action)}${mutedAnsi(" · ")}${pathAnsi(path)}${mutedAnsi(" · ")}${renderedState}`,
+    `${actionText(theme, action)}${mutedText(theme, " · ")}${pathText(theme, path)}${mutedText(theme, " · ")}${renderedState}`,
     width,
   );
 }
 
-function renderCompactToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }>, width?: number): string[] | undefined {
+function renderCompactToolBlock(theme: ExtendedTeamsTheme, block: Extract<TranscriptBlock, { kind: "tool" }>, width?: number): string[] | undefined {
   if (block.name === "report_progress") {
     const details = asRecord(block.details);
     const args = asRecord(block.args);
@@ -178,20 +168,20 @@ function renderCompactToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }
 
   if (block.name === "edit") {
     const path = toolPath(block.args);
-    if (block.result === undefined) return [renderActionPathState("edit", path, "working", width)];
-    if (block.isError) return [renderActionPathState("edit", path, "failed", width)];
+    if (block.result === undefined) return [renderActionPathState(theme, "edit", path, "working", width)];
+    if (block.isError) return [renderActionPathState(theme, "edit", path, "failed", width)];
     const counts = editDiffCounts(block.details);
     const added = counts ? `+${counts.added}` : "+?";
     const removed = counts ? `−${counts.removed}` : "−?";
     return [boundTranscriptLine(
-      `${actionAnsi("edit")}${mutedAnsi(" · ")}${pathAnsi(path)}${mutedAnsi(" · ")}${successAnsi(added)} ${failureAnsi(removed)}${mutedAnsi(" · ")}${successAnsi("✓")}`,
+      `${actionText(theme, "edit")}${mutedText(theme, " · ")}${pathText(theme, path)}${mutedText(theme, " · ")}${successText(theme, added)} ${failureText(theme, removed)}${mutedText(theme, " · ")}${successText(theme, "✓")}`,
       width,
     )];
   }
 
   if (block.name === "write") {
     const state = block.result === undefined ? "working" : block.isError ? "failed" : "succeeded";
-    return [renderActionPathState("write", toolPath(block.args), state, width)];
+    return [renderActionPathState(theme, "write", toolPath(block.args), state, width)];
   }
 
   if (block.name === "claim_file" || block.name === "release_file") {
@@ -203,7 +193,7 @@ function renderCompactToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }
         ? "failed"
         : "succeeded";
     const action = block.name === "claim_file" ? "claim" : "release";
-    return [renderActionPathState(action, toolPaths(block.args), state, width)];
+    return [renderActionPathState(theme, action, toolPaths(block.args), state, width)];
   }
 
   if (block.name === "report_and_exit") {
@@ -215,27 +205,27 @@ function renderCompactToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }
         : accepted === false
           ? "duplicate"
           : "accepted";
-    return [boundTranscriptLine(`${actionAnsi("final report")}${mutedAnsi(" · ")}${renderState(state)}`, width)];
+    return [boundTranscriptLine(`${actionText(theme, "final report")}${mutedText(theme, " · ")}${renderState(theme, state)}`, width)];
   }
 
   return undefined;
 }
 
-function renderToolHeader(block: Extract<TranscriptBlock, { kind: "tool" }>): string {
+function renderToolHeader(theme: ExtendedTeamsTheme, block: Extract<TranscriptBlock, { kind: "tool" }>): string {
   const detail = compactToolArgs(block.name, block.args);
-  if (!detail) return actionAnsi(block.name);
+  if (!detail) return actionText(theme, block.name);
   const isPath = typeof asRecord(block.args)?.path === "string";
-  const renderedDetail = isPath ? pathAnsi(detail) : bodyAnsi(`${block.name === "bash" ? "$ " : ""}${detail}`);
-  return `${actionAnsi(block.name)}${mutedAnsi(" · ")}${renderedDetail}`;
+  const renderedDetail = isPath ? pathText(theme, detail) : bodyText(theme, `${block.name === "bash" ? "$ " : ""}${detail}`);
+  return `${actionText(theme, block.name)}${mutedText(theme, " · ")}${renderedDetail}`;
 }
 
-function renderToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }>, expandLargeToolResults: boolean, width?: number): string[] {
-  const compactBlock = renderCompactToolBlock(block, width);
+function renderToolBlock(theme: ExtendedTeamsTheme, block: Extract<TranscriptBlock, { kind: "tool" }>, expandLargeToolResults: boolean, width?: number): string[] {
+  const compactBlock = renderCompactToolBlock(theme, block, width);
   if (compactBlock) return compactBlock;
 
-  const header = renderToolHeader(block);
+  const header = renderToolHeader(theme, block);
   if (block.result === undefined) {
-    return [header, `${structuralAnsi("│")} ${pendingAnsi("waiting for result…")}`, `${structuralAnsi("╰─")} ${pendingAnsi("running")}`, ""];
+    return [header, `${structuralText(theme, "│")} ${pendingText(theme, "waiting for result…")}`, `${structuralText(theme, "╰─")} ${pendingText(theme, "running")}`, ""];
   }
 
   const result = block.result || "(no output)";
@@ -253,14 +243,15 @@ function renderToolBlock(block: Extract<TranscriptBlock, { kind: "tool" }>, expa
     ? line
     : truncateToWidth(line, resultLineWidth, "…"));
   const body = boundedLines.map((line, index) => isCollapsed && index === COLLAPSED_TOOL_RESULT_HEAD_LINES
-    ? `${structuralAnsi("│")} ${mutedAnsi(line)}`
-    : `${structuralAnsi("│")} ${line}`);
+    ? `${structuralText(theme, "│")} ${mutedText(theme, line)}`
+    : `${structuralText(theme, "│")} ${line}`);
   const summary = `${resultLines.length} line${resultLines.length === 1 ? "" : "s"} · ${formatResultSize(result)}${isCollapsed ? " · collapsed" : ""}`;
-  const renderedSummary = block.isError ? failureAnsi(summary) : successAnsi(summary);
-  return [header, ...body, `${structuralAnsi("╰─")} ${renderedSummary}`, ""];
+  const renderedSummary = block.isError ? failureText(theme, summary) : successText(theme, summary);
+  return [header, ...body, `${structuralText(theme, "╰─")} ${renderedSummary}`, ""];
 }
 
 export function formatAgentFollowTranscript(messages: any[], options: AgentFollowTranscriptOptions = {}): string[] {
+  const theme = resolveExtendedTeamsTheme(options.theme);
   const blocks: TranscriptBlock[] = [];
   const toolsById = new Map<string, Extract<TranscriptBlock, { kind: "tool" }>>();
 
@@ -311,14 +302,15 @@ export function formatAgentFollowTranscript(messages: any[], options: AgentFollo
 
   const lines = blocks.flatMap(block => {
     if (block.kind === "tool") {
-      return renderToolBlock(block, options.expandLargeToolResults === true, options.width);
+      return renderToolBlock(theme, block, options.expandLargeToolResults === true, options.width);
     }
     if (block.label === "thinking") {
-      return [purple(block.label), block.text.replace(/\*\*/g, ""), ""];
+      return [theme.fg("thinkingText", block.label), block.text.replace(/\*\*/g, ""), ""];
     }
-    return [block.label === "user" ? pink(block.label) : purple(block.label), block.text, ""];
+    const labelToken = block.label === "user" ? "customMessageLabel" : "accent";
+    return [theme.fg(labelToken, block.label), block.text, ""];
   });
-  return lines.length > 0 ? lines : [dimAnsi("Waiting for the agent's first transcript event…")];
+  return lines.length > 0 ? lines : [theme.fg("dim", "Waiting for the agent's first transcript event…")];
 }
 
 function currentAgent(agents: RunningReadAgent[], selectedName: string | undefined): RunningReadAgent | undefined {
@@ -328,8 +320,14 @@ function currentAgent(agents: RunningReadAgent[], selectedName: string | undefin
 export function createAgentFollowComponent(
   tui: any,
   done: () => void,
-  options: AgentFollowViewOptions
+  options: AgentFollowViewOptions,
+  providedTheme?: ExtendedTeamsTheme
 ) {
+  const theme = resolveExtendedTeamsTheme(providedTheme);
+  const frameStyle: FramePanelStyle = {
+    border: (text) => theme.fg("borderAccent", text),
+    background: (text) => theme.bg("customMessageBg", text),
+  };
   let selectedName = options.initialAgentName;
   let offsetFromBottom = 0;
   let lastBodyHeight = 10;
@@ -501,32 +499,32 @@ export function createAgentFollowComponent(
       if (!agent) {
         const emptyBodyHeight = Math.max(4, terminalRows - 6);
         return framePanel([
-          pink("agent navigation"),
-          purple("↑  main agent"),
-          dimAnsi("No active agents. Press ↑ or esc to return to main."),
+          theme.fg("accent", "agent navigation"),
+          theme.fg("borderAccent", "↑  main agent"),
+          theme.fg("dim", "No active agents. Press ↑ or esc to return to main."),
           ...Array.from({ length: emptyBodyHeight }, () => ""),
-        ], innerWidth, AGENT_FOLLOW_BACKGROUND);
+        ], innerWidth, frameStyle);
       }
 
       const selectedIndex = Math.max(0, agents.findIndex(item => item.name === agent.name));
       const navigationStart = Math.max(0, Math.min(selectedIndex - 2, agents.length - MAX_NAVIGATION_AGENTS));
       const visibleAgents = agents.slice(navigationStart, navigationStart + MAX_NAVIGATION_AGENTS);
-      const navigationLines = [pink("agent navigation"), purple("↑  main agent")];
-      if (navigationStart > 0) navigationLines.push(dimAnsi(`   … ${navigationStart} agent${navigationStart === 1 ? "" : "s"} above`));
+      const navigationLines = [theme.fg("accent", "agent navigation"), theme.fg("borderAccent", "↑  main agent")];
+      if (navigationStart > 0) navigationLines.push(theme.fg("dim", `   … ${navigationStart} agent${navigationStart === 1 ? "" : "s"} above`));
       for (const item of visibleAgents) {
         const selected = item.name === agent.name;
-        navigationLines.push(`${selected ? pink("->") : "  "} ${item.name}`);
+        navigationLines.push(`${selected ? theme.fg("accent", "->") : "  "} ${item.name}`);
       }
       const remainingAgents = agents.length - navigationStart - visibleAgents.length;
-      if (remainingAgents > 0) navigationLines.push(dimAnsi(`↓  … ${remainingAgents} more agent${remainingAgents === 1 ? "" : "s"}`));
+      if (remainingAgents > 0) navigationLines.push(theme.fg("dim", `↓  … ${remainingAgents} more agent${remainingAgents === 1 ? "" : "s"}`));
 
       const messageLines = options.sendMessage ? [
-        purple("─".repeat(innerWidth)),
-        composingMessage ? pink(`message ${agent.name}`) : dimAnsi(`message ${agent.name}`),
-        ...(composingMessage ? messageInput.render(innerWidth) : [dimAnsi("> Press m to start typing")]),
+        theme.fg("border", "─".repeat(innerWidth)),
+        composingMessage ? theme.fg("accent", `message ${agent.name}`) : theme.fg("dim", `message ${agent.name}`),
+        ...(composingMessage ? messageInput.render(innerWidth) : [theme.fg("dim", "> Press m to start typing")]),
         ...(messageStatus
-          ? [dimAnsi(messageStatus)]
-          : composingMessage ? [dimAnsi("enter send · esc cancel")] : []),
+          ? [theme.fg("dim", messageStatus)]
+          : composingMessage ? [theme.fg("dim", "enter send · esc cancel")] : []),
       ] : [];
       const bodyHeight = Math.max(4, terminalRows - navigationLines.length - 6 - messageLines.length);
       lastBodyHeight = bodyHeight;
@@ -611,6 +609,7 @@ export function createAgentFollowComponent(
         cachedTranscriptLines = formatAgentFollowTranscript(currentMessages, {
           expandLargeToolResults,
           width: currentTranscriptWidth,
+          theme,
         }).flatMap(line => wrapTextWithAnsi(line, currentTranscriptWidth));
       }
       const transcriptLines = cachedTranscriptLines;
@@ -623,10 +622,10 @@ export function createAgentFollowComponent(
 
       const frameContent = [
         ...navigationLines,
-        purple("─".repeat(innerWidth)),
+        theme.fg("border", "─".repeat(innerWidth)),
         headline,
-        dimAnsi(help),
-        purple("─".repeat(innerWidth)),
+        theme.fg("dim", help),
+        theme.fg("border", "─".repeat(innerWidth)),
         ...visible,
         ...messageLines,
       ];
@@ -670,8 +669,8 @@ export function createAgentFollowComponent(
         }
       }
       if (!renderedFrame) {
-        renderedFrame = framePanel(frameContent, innerWidth, AGENT_FOLLOW_BACKGROUND);
-        cachedFrameRowRenderer = createFramePanelRowRenderer(innerWidth, AGENT_FOLLOW_BACKGROUND);
+        renderedFrame = framePanel(frameContent, innerWidth, frameStyle);
+        cachedFrameRowRenderer = createFramePanelRowRenderer(innerWidth, frameStyle);
       }
       cachedFrameWidth = innerWidth;
       cachedFrameContent = frameContent;
@@ -684,6 +683,20 @@ export function createAgentFollowComponent(
     },
     invalidate() {
       messageInput.invalidate();
+      transcriptAgent = undefined;
+      transcriptMessages = undefined;
+      transcriptMessageCount = -1;
+      transcriptLastMessage = undefined;
+      transcriptWidth = -1;
+      cachedTranscriptLines = [];
+      cachedFrameWidth = -1;
+      cachedFrameRowRenderer = undefined;
+      cachedFrameContent = null;
+      cachedFrameLines = null;
+      fastFrameKey = "";
+      fastFrameMessages = undefined;
+      fastFrameMessageCount = -1;
+      fastFrameLastMessage = undefined;
     },
     dispose() {
       clearInterval(refreshTimer);
@@ -765,7 +778,7 @@ export function createAgentFollowComponent(
 export async function openAgentFollowView(ctx: any, options: AgentFollowViewOptions): Promise<void> {
   if (ctx.mode && ctx.mode !== "tui") return;
   await ctx.ui.custom(
-    (tui: any, _theme: any, _keybindings: any, done: () => void) => createAgentFollowComponent(tui, done, options),
+    (tui: any, theme: any, _keybindings: any, done: () => void) => createAgentFollowComponent(tui, done, options, theme),
     {
       overlay: true,
       overlayOptions: {

package/extensions/ui/frame.ts

@@ -5,44 +5,58 @@ const ANSI_PURPLE = "\x1b[38;5;141m";
 const ANSI_PANEL_BG = "\x1b[48;5;235m";
 const SINGLE_COLUMN_FRAME_TEXT = /^[\x20-\x7E\u00B7]*$/;
 
-// Fill a line to `width` visible columns with the dark panel background. Every
-// full reset emitted by pink/purple/dimAnsi/theme.fg is followed by a fresh
-// background code so embedded foreground colors don't punch holes in the fill.
-function panelBgFillMeasured(line: string, lineWidth: number, width: number, background: string): string {
-  const pad = Math.max(0, width - lineWidth);
-  const reasserted = line.includes(ANSI_RESET)
-    ? line.split(ANSI_RESET).join(ANSI_RESET + background)
-    : line;
-  return `${background}${reasserted}${" ".repeat(pad)}${ANSI_RESET}`;
+export interface FramePanelStyle {
+  border(text: string): string;
+  background(text: string): string;
+}
+
+type FramePanelBackground = string | FramePanelStyle;
+
+// Fill a line to `width` visible columns. The legacy string path preserves the
+// public ANSI helpers; custom layouts can instead compose Pi theme callbacks.
+function panelBgFillMeasured(line: string, lineWidth: number, width: number, background: FramePanelBackground): string {
+  const padded = `${line}${" ".repeat(Math.max(0, width - lineWidth))}`;
+  if (typeof background === "string") {
+    const reasserted = padded.includes(ANSI_RESET)
+      ? padded.split(ANSI_RESET).join(ANSI_RESET + background)
+      : padded;
+    return `${background}${reasserted}${ANSI_RESET}`;
+  }
+  return padded.includes(ANSI_RESET)
+    ? padded.split(ANSI_RESET).map((segment) => background.background(segment)).join(ANSI_RESET)
+    : background.background(padded);
 }
 
 export function panelBgFill(line: string, width: number, background = ANSI_PANEL_BG): string {
   return panelBgFillMeasured(line, visibleWidth(line), width, background);
 }
 
-function renderFramePanelRow(line: string, innerWidth: number, span: number, background: string, sideBorder: string): string {
+function styledBorder(text: string, background: FramePanelBackground): string {
+  return typeof background === "string"
+    ? `${background}${ANSI_PURPLE}${text}${ANSI_RESET}`
+    : background.background(background.border(text));
+}
+
+function renderFramePanelRow(line: string, innerWidth: number, span: number, background: FramePanelBackground, sideBorder: string): string {
   const singleColumn = SINGLE_COLUMN_FRAME_TEXT.test(line);
-  if (singleColumn && line.length <= innerWidth) {
-    return `${sideBorder}${background} ${line} ${" ".repeat(innerWidth - line.length)}${ANSI_RESET}${sideBorder}`;
-  }
   const lineWidth = singleColumn ? line.length : visibleWidth(line);
   const boundedLine = lineWidth > innerWidth ? truncateToWidth(line, innerWidth, "…", true) : line;
   const boundedWidth = lineWidth > innerWidth ? (singleColumn ? boundedLine.length : visibleWidth(boundedLine)) : lineWidth;
   return sideBorder + panelBgFillMeasured(` ${boundedLine} `, boundedWidth + 2, span, background) + sideBorder;
 }
 
-export function createFramePanelRowRenderer(innerWidth: number, background = ANSI_PANEL_BG): (line: string) => string {
+export function createFramePanelRowRenderer(innerWidth: number, background: FramePanelBackground = ANSI_PANEL_BG): (line: string) => string {
   const span = innerWidth + 2;
-  const sideBorder = `${background}${ANSI_PURPLE}│${ANSI_RESET}`;
+  const sideBorder = styledBorder("│", background);
   return (line: string) => renderFramePanelRow(line, innerWidth, span, background, sideBorder);
 }
 
-// Wrap content lines in a rounded border with a dark interior. `innerWidth` is
-// the column count between the one-space padding inside each side border.
-export function framePanel(contentLines: string[], innerWidth: number, background = ANSI_PANEL_BG): string[] {
+// Wrap content lines in a rounded border. `innerWidth` is the column count
+// between the one-space padding inside each side border.
+export function framePanel(contentLines: string[], innerWidth: number, background: FramePanelBackground = ANSI_PANEL_BG): string[] {
   const span = innerWidth + 2;
   const rule = "─".repeat(span);
-  const border = (text: string) => `${background}${ANSI_PURPLE}${text}${ANSI_RESET}`;
+  const border = (text: string) => styledBorder(text, background);
   const sideBorder = border("│");
   const out: string[] = [border(`╭${rule}╮`)];
   for (const line of contentLines) {

package/extensions/ui/status-widget.test.ts

@@ -14,6 +14,32 @@ function makeSnapshot(overrides: Partial<TeamActivityStatusSnapshot> = {}): Team
 }
 
 describe("agent activity status widget", () => {
+  it("uses Pi theme tokens and refreshes cached styles after invalidation", () => {
+    const snapshot = makeSnapshot({
+      activeCount: 1,
+      readCount: 1,
+      entries: [{ name: "reader", role: "read", status: "thinking" }],
+    });
+    let color = 31;
+    const theme = {
+      fg: vi.fn((_token: string, text: string) => `\x1b[${color}m${text}\x1b[39m`),
+      bg: vi.fn((_token: string, text: string) => text),
+      bold: vi.fn((text: string) => text),
+    };
+    const widget = teamActivityStatusWidget(() => snapshot, () => false, undefined, theme);
+
+    expect(widget.render(120).join("\n")).toContain("\x1b[31magent activity");
+    expect(theme.fg).toHaveBeenCalledWith("accent", "agent activity");
+    expect(theme.fg).toHaveBeenCalledWith("border", expect.any(String));
+
+    color = 32;
+    widget.invalidate();
+    const rerendered = widget.render(120).join("\n");
+    expect(rerendered).toContain("\x1b[32magent activity");
+    expect(rerendered).not.toContain("\x1b[31magent activity");
+    widget.dispose();
+  });
+
   it("renders open snapshots without a collapse hint", () => {
     const entries: TeamActivityStatusEntry[] = [{
       name: "reader",

package/extensions/ui/status-widget.ts

@@ -1,6 +1,6 @@
 import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
-import { dimAnsi, pink, purple } from "./ansi";
 import { formatAnimatedProgress } from "./renderers";
+import { resolveExtendedTeamsTheme, type ExtendedTeamsTheme } from "./theme";
 
 export interface TeamActivityStatusEntry {
   name: string;
@@ -62,21 +62,21 @@ function formatStatusSummary(statusCounts: TeamActivityStatusCounts | undefined)
   return shown.join(" · ");
 }
 
-function formatAggregatePreview(snapshot: TeamActivityStatusSnapshot): string {
+function formatAggregatePreview(snapshot: TeamActivityStatusSnapshot, theme: ExtendedTeamsTheme): string {
   const summary = formatStatusSummary(snapshot.statusCounts) || formatRoleSummary(snapshot);
-  return `${pink("summary")} ${purple(summary)} ${dimAnsi("↓ navigate")}`;
+  return `${theme.fg("accent", "summary")} ${theme.fg("borderAccent", summary)} ${theme.fg("dim", "↓ navigate")}`;
 }
 
-function formatExpandedEntry(entry: TeamActivityStatusEntry): string {
+function formatExpandedEntry(entry: TeamActivityStatusEntry, theme: ExtendedTeamsTheme): string {
   if (entry.displayText) return entry.displayText;
-  const status = entry.status ? ` ${purple(entry.status)}` : "";
-  const detail = entry.detail ? ` ${dimAnsi(entry.detail)}` : "";
-  return `${pink(entry.name)} ${purple(entry.role)}${status}${detail}`;
+  const status = entry.status ? ` ${theme.fg("borderAccent", entry.status)}` : "";
+  const detail = entry.detail ? ` ${theme.fg("dim", entry.detail)}` : "";
+  return `${theme.fg("accent", entry.name)} ${theme.fg("borderAccent", entry.role)}${status}${detail}`;
 }
 
-function formatHeader(snapshot: TeamActivityStatusSnapshot): string {
+function formatHeader(snapshot: TeamActivityStatusSnapshot, theme: ExtendedTeamsTheme): string {
   const summary = `${formatCountSummary(snapshot)} · ↓ navigate`;
-  return `${pink("agent activity")}  ${dimAnsi(summary)}`;
+  return `${theme.fg("accent", "agent activity")}  ${theme.fg("dim", summary)}`;
 }
 
 interface ProgressTransition {
@@ -131,8 +131,10 @@ function splitProgressDisplay(displayText: string | undefined): { prefix: string
 export function teamActivityStatusWidget(
   getSnapshot: () => TeamActivityStatusSnapshot | null | undefined,
   _getExpanded: () => boolean,
-  requestRender?: () => void
+  requestRender?: () => void,
+  providedTheme?: ExtendedTeamsTheme
 ) {
+  const theme = resolveExtendedTeamsTheme(providedTheme);
   const transitions = new Map<string, ProgressTransition>();
   let animationTimer: NodeJS.Timeout | null = null;
   let summarySnapshot: TeamActivityStatusSnapshot | null | undefined;
@@ -186,15 +188,15 @@ export function teamActivityStatusWidget(
       if (!hasCachedTransitionEntry || transition) transitionHints[hintIndex] = transition;
     }
     if (!entry.displayText) {
-      return animationResult(`${purple(branch)} ${formatExpandedEntry(entry)}`, false, width);
+      return animationResult(`${theme.fg("border", branch)} ${formatExpandedEntry(entry, theme)}`, false, width);
     }
 
     if (!transition || transition.source !== entry.displayText) {
       const parsed = splitProgressDisplay(entry.displayText);
       if (!parsed) {
-        return animationResult(`${purple(branch)} ${formatExpandedEntry(entry)}`, false, width);
+        return animationResult(`${theme.fg("border", branch)} ${formatExpandedEntry(entry, theme)}`, false, width);
       }
-      const branchPrefix = `${purple(branch)} `;
+      const branchPrefix = `${theme.fg("border", branch)} `;
       const prefixVisibleWidth = SINGLE_COLUMN_STATUS_TEXT.test(parsed.prefix)
         ? parsed.prefix.length
         : visibleWidth(parsed.prefix);
@@ -273,14 +275,14 @@ export function teamActivityStatusWidget(
       transitionHints[hintIndex] = transition;
     } else if (transition.branch !== branch) {
       transition.branch = branch;
-      transition.linePrefix = `${purple(branch)} ${transition.prefix}`;
+      transition.linePrefix = `${theme.fg("border", branch)} ${transition.prefix}`;
     }
 
     const elapsed = Math.max(0, now - transition.startedAt);
     if (elapsed < 200) {
       const remaining = Math.max(0, Math.ceil(transition.previous.length * (1 - elapsed / 200)));
       const progressText = transition.previous.slice(0, remaining);
-      return animationResult(`${transition.linePrefix}${dimAnsi(progressText)}`, true, width, currentTransitionRenderedWidth(transition, progressText, transition.previousSingleColumn, width));
+      return animationResult(`${transition.linePrefix}${theme.fg("dim", progressText)}`, true, width, currentTransitionRenderedWidth(transition, progressText, transition.previousSingleColumn, width));
     }
     if (elapsed < 1000) {
       const revealed = Math.floor(transition.target.length * ((elapsed - 200) / 800));
@@ -324,7 +326,7 @@ export function teamActivityStatusWidget(
           headerWriteCount = snapshot.writeCount;
           headerUnreadCount = snapshot.unreadCount;
           headerWidth = width;
-          headerLine = truncateToWidth(formatHeader(snapshot), width, "…", true);
+          headerLine = truncateToWidth(formatHeader(snapshot, theme), width, "…", true);
         }
         summaryLines = [headerLine];
         if (shouldUseAggregatePreview(snapshot)) {
@@ -350,7 +352,7 @@ export function teamActivityStatusWidget(
             aggregateReadCount = snapshot.readCount;
             aggregateWriteCount = snapshot.writeCount;
             aggregateWidth = width;
-            aggregateLine = truncateToWidth(formatAggregatePreview(snapshot), width, "…", true);
+            aggregateLine = truncateToWidth(formatAggregatePreview(snapshot, theme), width, "…", true);
           }
           summaryLines.push(aggregateLine);
         }
@@ -409,7 +411,7 @@ export function teamActivityStatusWidget(
         if (remainingCount !== remaining || remainingWidth !== width) {
           remainingCount = remaining;
           remainingWidth = width;
-          remainingLine = truncateToWidth(dimAnsi(`└─ … ${remaining} more active agent${remaining === 1 ? "" : "s"}`), width, "…", true);
+          remainingLine = truncateToWidth(theme.fg("dim", `└─ … ${remaining} more active agent${remaining === 1 ? "" : "s"}`), width, "…", true);
         }
         lines.push(remainingLine);
       }
@@ -420,7 +422,7 @@ export function teamActivityStatusWidget(
         stopAnimationTimer();
       }
 
-      const border = purple("─".repeat(Math.max(0, width)));
+      const border = theme.fg("border", "─".repeat(Math.max(0, width)));
       const rendered = [...lines, border];
       if (animationActive) {
         stableLines = null;
@@ -432,7 +434,38 @@ export function teamActivityStatusWidget(
       }
       return rendered;
     },
-    invalidate() {},
+    invalidate() {
+      transitions.clear();
+      summarySnapshot = undefined;
+      summaryUpdatedAt = -1;
+      summaryWidth = -1;
+      summaryLines = [];
+      headerActiveCount = -1;
+      headerReadCount = -1;
+      headerWriteCount = -1;
+      headerUnreadCount = -1;
+      headerWidth = -1;
+      aggregateStatusCounts = {};
+      aggregateStatusCountSize = -1;
+      aggregateActiveCount = -1;
+      aggregateReadCount = -1;
+      aggregateWriteCount = -1;
+      aggregateWidth = -1;
+      remainingCount = -1;
+      remainingWidth = -1;
+      transitionHintSnapshot = undefined;
+      transitionHintUpdatedAt = -1;
+      transitionHintEntries.length = 0;
+      transitionHints.length = 0;
+      transitionRosterRoles.length = 0;
+      transitionRosterNames.length = 0;
+      transitionRosterKeys.length = 0;
+      transitionRosterCount = -1;
+      stableSnapshot = undefined;
+      stableUpdatedAt = -1;
+      stableWidth = -1;
+      stableLines = null;
+    },
     dispose() {
       stopAnimationTimer();
     },

package/extensions/ui/theme.ts

@@ -0,0 +1,34 @@
+export type ExtendedTeamsForegroundToken =
+  | "accent"
+  | "border"
+  | "borderAccent"
+  | "customMessageLabel"
+  | "dim"
+  | "error"
+  | "muted"
+  | "success"
+  | "syntaxFunction"
+  | "syntaxString"
+  | "text"
+  | "thinkingText"
+  | "warning";
+
+export type ExtendedTeamsBackgroundToken = "customMessageBg";
+
+export interface ExtendedTeamsTheme {
+  fg(token: ExtendedTeamsForegroundToken, text: string): string;
+  bg(token: ExtendedTeamsBackgroundToken, text: string): string;
+}
+
+const plainTheme: ExtendedTeamsTheme = {
+  fg: (_token, text) => text,
+  bg: (_token, text) => text,
+};
+
+export function resolveExtendedTeamsTheme(theme?: Partial<ExtendedTeamsTheme> | null): ExtendedTeamsTheme {
+  if (!theme) return plainTheme;
+  return {
+    fg: (token, text) => typeof theme.fg === "function" ? theme.fg(token, text) : text,
+    bg: (token, text) => typeof theme.bg === "function" ? theme.bg(token, text) : text,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-extended-teams",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "description": "Control-first, session-connected subagents for Pi with live navigation and intent-tier routing",
   "repository": {
     "type": "git",