@openlines/opl-pi-sht 0.1.14

package/extensions/opl-footer/index.ts

@@ -0,0 +1,368 @@
+import type { ExtensionAPI, ReadonlyFooterDataProvider, Theme, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { AssistantMessage } from "@earendil-works/pi-ai";
+import { visibleWidth, truncateToWidth } from "@earendil-works/pi-tui";
+import type { TUI } from "@earendil-works/pi-tui";
+
+import type { SegmentContext, StatusLineSegmentId, UsageStats, SessionStats, SessionEvent, ThinkingLevelEvent, AssistantMessageEvent, ToolResultEvent, UserBashEvent } from "./types.js";
+import { renderSegment } from "./segments/index.js";
+import { getGitStatus, invalidateGitStatus, invalidateGitBranch } from "./git-status.js";
+import { getEffectiveConfig } from "./config.js";
+import { getIcons } from "./icons.js";
+import { getDefaultColors, fg } from "./theme.js";
+
+const GIT_BRANCH_PATTERNS: RegExp[] = [
+  /\bgit\s+(checkout|switch|branch\s+-[dDmM]|merge|rebase|pull|reset|worktree)/,
+  /\bgit\s+stash\s+(pop|apply)/,
+];
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Status Line Builder
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** Render a single segment and return its content with width */
+function renderSegmentWithWidth(
+  segId: StatusLineSegmentId,
+  ctx: SegmentContext
+): { content: string; width: number; visible: boolean } {
+  const rendered = renderSegment(segId, ctx);
+  if (!rendered.visible || !rendered.content) {
+    return { content: "", width: 0, visible: false };
+  }
+  return { content: rendered.content, width: visibleWidth(rendered.content), visible: true };
+}
+
+/**
+ * Build footer content from left and right segments.
+ * Left segments are left-aligned, right segments are right-aligned.
+ */
+function buildFooterContent(
+  ctx: SegmentContext,
+  leftSegments: StatusLineSegmentId[],
+  rightSegments: StatusLineSegmentId[],
+  availableWidth: number,
+): string {
+  const maxContentWidth = Math.max(0, availableWidth - 2);
+
+  // Render left segments
+  const leftParts: string[] = [];
+  for (const segId of leftSegments) {
+    const { content, visible } = renderSegmentWithWidth(segId, ctx);
+    if (visible) {
+      leftParts.push(content);
+    }
+  }
+
+  // Render right segments
+  const rightParts: string[] = [];
+  let rightWidth = 0;
+  for (const segId of rightSegments) {
+    const { content, width, visible } = renderSegmentWithWidth(segId, ctx);
+    if (visible) {
+      rightParts.push(content);
+      rightWidth += width + 1; // +1 for space between
+    }
+  }
+  if (rightParts.length > 0) {
+    rightWidth -= 1; // Remove trailing space
+  }
+
+  let leftStr = leftParts.join(" ");
+  let rightStr = rightParts.join(" ");
+
+  // Handle case with no right segments
+  if (rightParts.length === 0) {
+    const finalLeft = truncateToWidth(leftStr, maxContentWidth);
+    return " " + finalLeft + " ".repeat(Math.max(0, maxContentWidth - visibleWidth(finalLeft))) + " ";
+  }
+
+  // If right side alone is too big, just show right side
+  if (rightWidth >= maxContentWidth) {
+    return " " + truncateToWidth(rightStr, maxContentWidth) + " ";
+  }
+
+  // Ensure at least 1 space between left and right
+  const maxLeftWidth = maxContentWidth - rightWidth - 1;
+  const finalLeft = truncateToWidth(leftStr, Math.max(0, maxLeftWidth));
+  const finalLeftWidth = visibleWidth(finalLeft);
+
+  const padding = maxContentWidth - finalLeftWidth - rightWidth;
+
+  const result = " " + finalLeft + " ".repeat(padding) + rightStr + " ";
+  return truncateToWidth(result, availableWidth);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Extension
+// ═══════════════════════════════════════════════════════════════════════════
+
+export default function footer(pi: ExtensionAPI) {
+  let sessionStartTime = Date.now();
+  let currentCtx: ExtensionContext | null = null;
+  let footerDataRef: ReadonlyFooterDataProvider | null = null;
+  let lastBranchLength = 0;
+  let cachedUsageStats: UsageStats | null = null;
+  let tuiRef: TUI | null = null;
+
+  // Session stats accumulators
+  let turns = 0;
+  let steps = 0;
+  let modelRequests = 0;
+  let modelToolCalls = 0;
+  let llmMs = 0;
+  let toolMs = 0;
+  let ttftSamples: number[] = [];
+  let turnStartMs = 0;
+  let toolMsThisTurn = 0;
+  let ttftRecordedThisTurn = false;
+  let agentStartMs = 0;
+  let lastTurnaroundMs = 0;
+  const toolStartTimes = new Map<string, number>();
+
+  // Track session start
+  pi.on("session_start", async (_event: unknown, ctx: ExtensionContext) => {
+    sessionStartTime = Date.now();
+    currentCtx = ctx;
+    lastBranchLength = 0;
+    cachedUsageStats = null;
+    turns = 0;
+    steps = 0;
+    modelRequests = 0;
+    modelToolCalls = 0;
+    llmMs = 0;
+    toolMs = 0;
+    ttftSamples = [];
+    turnStartMs = 0;
+    toolMsThisTurn = 0;
+    ttftRecordedThisTurn = false;
+    agentStartMs = 0;
+    lastTurnaroundMs = 0;
+    toolStartTimes.clear();
+
+    if (ctx.hasUI) {
+      setupFooter(ctx);
+    }
+  });
+
+  // Track user-prompt-to-completion turnaround. agent_start may fire multiple
+  // times per user turn (retries/compaction); only the first since the last
+  // settle marks when the user's prompt began processing. agent_settled is the
+  // authoritative "fully done, no auto-continuation" signal.
+  pi.on("agent_start", async (_event: unknown, _ctx: ExtensionContext) => {
+    if (agentStartMs === 0) agentStartMs = Date.now();
+  });
+
+  pi.on("agent_settled", async (_event: unknown, _ctx: ExtensionContext) => {
+    if (agentStartMs > 0) {
+      lastTurnaroundMs = Date.now() - agentStartMs;
+      agentStartMs = 0;
+    }
+  });
+
+  pi.on("turn_start", async (_event: unknown, _ctx: ExtensionContext) => {
+    turnStartMs = Date.now();
+    toolMsThisTurn = 0;
+    ttftRecordedThisTurn = false;
+  });
+
+  pi.on("turn_end", async (_event: unknown, _ctx: ExtensionContext) => {
+    turns++;
+    const elapsed = Date.now() - turnStartMs;
+    llmMs += Math.max(0, elapsed - toolMsThisTurn);
+  });
+
+  pi.on("tool_execution_start", async (event: { toolCallId: string }, _ctx: ExtensionContext) => {
+    steps++;
+    toolStartTimes.set(event.toolCallId, Date.now());
+  });
+
+  pi.on("tool_execution_end", async (event: { toolCallId: string }, _ctx: ExtensionContext) => {
+    const start = toolStartTimes.get(event.toolCallId);
+    if (start !== undefined) {
+      const elapsed = Date.now() - start;
+      toolMs += elapsed;
+      toolMsThisTurn += elapsed;
+      toolStartTimes.delete(event.toolCallId);
+    }
+  });
+
+  pi.on("message_update", async (_event: unknown, _ctx: ExtensionContext) => {
+    if (!ttftRecordedThisTurn && turnStartMs > 0) {
+      ttftSamples.push(Date.now() - turnStartMs);
+      ttftRecordedThisTurn = true;
+    }
+  });
+
+  // Invalidate git status on file changes
+  pi.on("tool_result", async (event: ToolResultEvent, _ctx: ExtensionContext) => {
+    if (event.toolName === "write" || event.toolName === "edit") {
+      invalidateGitStatus();
+    }
+    if (event.toolName === "bash" && event.input?.command) {
+      const cmd = String(event.input.command);
+      if (GIT_BRANCH_PATTERNS.some(p => p.test(cmd))) {
+        invalidateGitStatus();
+        invalidateGitBranch();
+        setTimeout(() => tuiRef?.requestRender(), 100);
+      }
+    }
+  });
+
+  // Also catch user escape commands (! prefix)
+  pi.on("user_bash", async (event: UserBashEvent, _ctx: ExtensionContext) => {
+    if (GIT_BRANCH_PATTERNS.some(p => p.test(event.command))) {
+      invalidateGitStatus();
+      invalidateGitBranch();
+      tuiRef?.requestRender();
+    }
+  });
+
+  function buildSegmentContext(ctx: ExtensionContext, width: number, theme: Theme): SegmentContext {
+    const effectiveConfig = getEffectiveConfig();
+    const colors = effectiveConfig.colors ?? getDefaultColors();
+
+    const branch = (ctx.sessionManager?.getBranch?.() ?? []) as SessionEvent[];
+    const branchLen = branch.length;
+
+    const isAssistantMessageEvent = (e: SessionEvent): e is AssistantMessageEvent =>
+      e.type === "message" && (e as AssistantMessageEvent).message.role === "assistant";
+    const completedMessages = branch
+      .filter(isAssistantMessageEvent)
+      .map(e => e.message as AssistantMessage)
+      .filter(m => m.stopReason !== "error" && m.stopReason !== "aborted");
+
+    // Cache usageStats — only recompute when branch grows
+    let usageStats: UsageStats;
+    if (cachedUsageStats && branchLen === lastBranchLength) {
+      usageStats = cachedUsageStats;
+    } else {
+      usageStats = completedMessages.reduce<UsageStats>(
+        (acc, m) => ({
+          input: acc.input + m.usage.input,
+          output: acc.output + m.usage.output,
+          cacheRead: acc.cacheRead + m.usage.cacheRead,
+          cacheWrite: acc.cacheWrite + m.usage.cacheWrite,
+          cost: acc.cost + m.usage.cost.total,
+        }),
+        { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0 },
+      );
+      cachedUsageStats = usageStats;
+      lastBranchLength = branchLen;
+    }
+
+    const isThinkingEvent = (e: SessionEvent): e is ThinkingLevelEvent =>
+      e.type === "thinking_level_change";
+    const thinkingLevelFromSession = branch
+      .filter(isThinkingEvent)
+      .reduce((_, e) => e.thinkingLevel ?? "off", "off");
+
+    const lastAssistant = completedMessages.at(-1);
+
+    // Calculate context percentage
+    const contextTokens = lastAssistant
+      ? lastAssistant.usage.input + lastAssistant.usage.output +
+        lastAssistant.usage.cacheRead + lastAssistant.usage.cacheWrite
+      : 0;
+    const contextWindow = ctx.model?.contextWindow || 0;
+    const contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+
+    // Get git status (cached)
+    const gitBranch = footerDataRef?.getGitBranch() ?? null;
+    const gitStatus = getGitStatus(gitBranch);
+
+    // Check if using OAuth subscription
+    const usingSubscription = ctx.model
+      ? ctx.modelRegistry?.isUsingOAuth?.(ctx.model) ?? false
+      : false;
+
+    // Local model detection: use model ID prefix (local.*) instead of URL
+    // This allows litellm proxy to correctly separate local vs cloud models
+    const isLocalModel = ctx.model?.id?.startsWith?.("local.") ?? false;
+
+    // Reconstruct turns/steps from branch so they survive quit/resume.
+    // Timing stats (llmMs, toolMs, ttftSamples) are ephemeral — not stored in messages.
+    const branchTurns = completedMessages.length;
+    const branchSteps = branch.filter(
+      (e) => e.type === "message" && (e as AssistantMessageEvent).message?.role === "toolResult",
+    ).length;
+
+    // Count model requests (each assistant message = 1 request)
+    const branchModelRequests = completedMessages.length;
+
+    // Count tool calls from assistant message content
+    const branchModelToolCalls = completedMessages.reduce((sum, msg) => {
+      const content = (msg as any).content || [];
+      return sum + content.filter((block: any) => block?.type === "toolCall").length;
+    }, 0);
+
+    return {
+      model: ctx.model,
+      isLocalModel,
+      thinkingLevel: thinkingLevelFromSession || pi.getThinkingLevel(),
+      sessionId: ctx.sessionManager?.getSessionId?.(),
+      usageStats,
+      contextPercent,
+      contextWindow,
+      usingSubscription,
+      sessionStartTime,
+      git: gitStatus,
+      options: effectiveConfig.segmentOptions ?? {},
+      width,
+      theme,
+      colors,
+      icons: getIcons(effectiveConfig.icons),
+      sessionStats: { turns: branchTurns, steps: branchSteps, modelRequests: branchModelRequests, modelToolCalls: branchModelToolCalls, llmMs, toolMs, ttftSamples, lastTurnaroundMs },
+    };
+  }
+
+  function setupFooter(ctx: ExtensionContext) {
+    ctx.ui.setFooter((tui: TUI, theme: Theme, footerData: ReadonlyFooterDataProvider) => {
+      footerDataRef = footerData;
+      tuiRef = tui;
+
+      // Expose a re-render trigger for out-of-turn state changes (e.g. /caveman toggle).
+      (globalThis as Record<string, unknown>).__footerRequestRender = () => tui.requestRender();
+
+      // Subscribe to branch changes for re-render
+      const unsub = footerData.onBranchChange(() => tui.requestRender());
+
+      return {
+        dispose: unsub,
+        invalidate() {},
+        render(width: number): string[] {
+          if (!currentCtx) return [];
+
+          const effectiveConfig = getEffectiveConfig();
+          let segmentCtx;
+          try {
+            segmentCtx = buildSegmentContext(currentCtx, width, theme);
+          } catch {
+            return [];
+          }
+
+          const row1 = buildFooterContent(
+            segmentCtx,
+            effectiveConfig.row1LeftSegments,
+            effectiveConfig.row1RightSegments,
+            width,
+          );
+          const row2 = buildFooterContent(
+            segmentCtx,
+            effectiveConfig.row2LeftSegments,
+            effectiveConfig.row2RightSegments,
+            width,
+          );
+          const row3 = buildFooterContent(
+            segmentCtx,
+            effectiveConfig.row3LeftSegments,
+            effectiveConfig.row3RightSegments,
+            width,
+          );
+
+          const divider = fg(theme, "separator", "─".repeat(width), segmentCtx.colors);
+
+          return ["", row1, divider, row2, divider, row3];
+        },
+      };
+    });
+  }
+}

package/extensions/opl-footer/segments/caveman.ts

@@ -0,0 +1,25 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor } from "../theme.js";
+import { color } from "./helpers.js";
+
+interface CavemanState {
+  enabled: boolean;
+  mode: string;
+}
+
+function readCavemanState(): CavemanState | undefined {
+  return (globalThis as Record<string, unknown>).__caveman as CavemanState | undefined;
+}
+
+export const cavemanSegment = {
+  id: "caveman" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const state = readCavemanState();
+    if (!state) return { content: "", visible: false };
+
+    const label = applyColor(ctx.theme, "dim", "Caveman mode:");
+    const value = state.enabled ? state.mode.toUpperCase() : "OFF";
+
+    return { content: `${label} ${color(ctx, "modeIndicator", value)}`, visible: true };
+  },
+};

package/extensions/opl-footer/segments/chat-mode.ts

@@ -0,0 +1,24 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor } from "../theme.js";
+import { color } from "./helpers.js";
+
+interface ChatModeState {
+  mode: string;
+}
+
+function readChatModeState(): ChatModeState | undefined {
+  return (globalThis as Record<string, unknown>).__chatMode as ChatModeState | undefined;
+}
+
+export const chatModeSegment = {
+  id: "chat_mode" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const state = readChatModeState();
+    if (!state) return { content: "", visible: false };
+
+    const label = applyColor(ctx.theme, "dim", "Chat mode:");
+    const value = state.mode === "off" ? "OFF" : "ON";
+
+    return { content: `${label} ${color(ctx, "modeIndicator", value)}`, visible: true };
+  },
+};

package/extensions/opl-footer/segments/context.ts

@@ -0,0 +1,92 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor, resolveColorToRgb } from "../theme.js";
+import { color } from "./helpers.js";
+import { formatTokens } from "./helpers.js";
+
+// Set to a number (0–100) to override context % for visual testing, null to disable
+const DEBUG_PCT: number | null = null;
+
+const DEFAULT_BAR_WIDTH     = 18;
+const DEFAULT_FILLED_CHAR   = "▋";
+const DEFAULT_UNFILLED_CHAR = "▋";
+const DEFAULT_UNFILLED_COLOR = "#4e4c49";
+const DEFAULT_START = { r: 0xf2, g: 0x93, b: 0x73 };
+const DEFAULT_MID   = { r: 0xd6, g: 0x78, b: 0x58 };
+const DEFAULT_END   = { r: 0xae, g: 0x4f, b: 0x2f };
+const DEFAULT_MID_FRAC = 0.55; // 0–1: where MID sits along the gradient
+
+export function lerp(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t);
+}
+
+function positionColor(
+  pos: number,
+  barWidth: number,
+  start: { r: number; g: number; b: number },
+  mid: { r: number; g: number; b: number },
+  end: { r: number; g: number; b: number },
+  midFrac: number,
+): string {
+  const t = pos / Math.max(barWidth - 1, 1);
+  let r: number, g: number, b: number;
+  if (t <= midFrac) {
+    const f = t / midFrac;
+    r = lerp(start.r, mid.r, f);
+    g = lerp(start.g, mid.g, f);
+    b = lerp(start.b, mid.b, f);
+  } else {
+    const f = (t - midFrac) / (1 - midFrac);
+    r = lerp(mid.r, end.r, f);
+    g = lerp(mid.g, end.g, f);
+    b = lerp(mid.b, end.b, f);
+  }
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+export const contextPctSegment = {
+  id: "context_pct" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const pct = DEBUG_PCT ?? ctx.contextPercent;
+    const barOpts = ctx.options.contextBar ?? {};
+
+    const barWidth     = barOpts.barWidth     ?? DEFAULT_BAR_WIDTH;
+    const filledChar   = barOpts.filledChar   ?? DEFAULT_FILLED_CHAR;
+    const unfilledChar = barOpts.unfilledChar ?? DEFAULT_UNFILLED_CHAR;
+    const unfilledColor = barOpts.unfilledColor ?? DEFAULT_UNFILLED_COLOR;
+    const start   = (barOpts.gradientStart ? resolveColorToRgb(ctx.theme, barOpts.gradientStart) : null) ?? DEFAULT_START;
+    const mid     = (barOpts.gradientMid   ? resolveColorToRgb(ctx.theme, barOpts.gradientMid)   : null) ?? DEFAULT_MID;
+    const end     = (barOpts.gradientEnd   ? resolveColorToRgb(ctx.theme, barOpts.gradientEnd)   : null) ?? DEFAULT_END;
+    const midFrac = barOpts.gradientMidPoint ?? DEFAULT_MID_FRAC;
+
+    const filled = Math.round((pct / 100) * barWidth);
+
+    let bar = "";
+    for (let i = 0; i < barWidth; i++) {
+      if (i < filled) {
+        bar += positionColor(i, barWidth, start, mid, end, midFrac) + filledChar;
+      } else {
+        bar += applyColor(ctx.theme, unfilledColor, unfilledChar);
+      }
+    }
+    bar += "\x1b[0m";
+
+    // Show: (00.00%) 99999 / 99999
+    const used = Math.round((pct / 100) * ctx.contextWindow);
+    const pctLabel = `(${pct.toFixed(2)}%) ${formatTokens(used)} / ${formatTokens(ctx.contextWindow)}`;
+    const pctStr = color(ctx, "contextLabel", pctLabel);
+
+    return { content: `${bar} ${pctStr}`, visible: true };
+  },
+};
+
+export const contextTotalSegment = {
+  id: "context_total" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const window = ctx.contextWindow;
+    if (!window) return { content: "", visible: false };
+    return {
+      content: color(ctx, "context", `${window}`),
+      visible: true,
+    };
+  },
+};

package/extensions/opl-footer/segments/cost.ts

@@ -0,0 +1,25 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor } from "../theme.js";
+import { color } from "./helpers.js";
+
+export const costSegment = {
+  id: "cost" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const { cost } = ctx.usageStats;
+
+    if (cost === 0 && !ctx.isLocalModel) {
+      return {
+        content: color(ctx, "cost", "$0.00") + applyColor(ctx.theme, "dim", " (no pricing)"),
+        visible: true,
+      };
+    }
+
+    const content = color(ctx, "cost", `$${cost.toFixed(2)}`);
+
+    if (ctx.isLocalModel) {
+      return { content: content + applyColor(ctx.theme, "dim", " (local model)"), visible: true };
+    }
+
+    return { content, visible: true };
+  },
+};

package/extensions/opl-footer/segments/git.ts

@@ -0,0 +1,47 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor } from "../theme.js";
+import { color, withIcon } from "./helpers.js";
+
+export const gitSegment = {
+  id: "git" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const opts = ctx.options.git ?? {};
+    const { branch, staged, unstaged, untracked } = ctx.git;
+
+    if (!branch && staged === 0 && unstaged === 0 && untracked === 0) {
+      return { content: "", visible: false };
+    }
+
+    const isDirty = staged > 0 || unstaged > 0 || untracked > 0;
+    const showBranch = opts.showBranch !== false;
+    const branchColor = isDirty ? "gitDirty" : "gitClean";
+
+    let content = "";
+    if (showBranch && branch) {
+      content = color(ctx, branchColor, withIcon(ctx.icons.branch, branch));
+    }
+
+    const indicators: string[] = [];
+    if (opts.showUnstaged !== false && unstaged > 0) {
+      indicators.push(applyColor(ctx.theme, "warning", `*${unstaged}`));
+    }
+    if (opts.showStaged !== false && staged > 0) {
+      indicators.push(applyColor(ctx.theme, "success", `+${staged}`));
+    }
+    if (opts.showUntracked !== false && untracked > 0) {
+      indicators.push(applyColor(ctx.theme, "muted", `?${untracked}`));
+    }
+
+    if (indicators.length > 0) {
+      const indicatorText = indicators.join(" ");
+      if (!content && showBranch === false) {
+        content = color(ctx, branchColor, ctx.icons.git ? `${ctx.icons.git} ` : "") + indicatorText;
+      } else {
+        content += content ? ` ${indicatorText}` : indicatorText;
+      }
+    }
+
+    if (!content) return { content: "", visible: false };
+    return { content, visible: true };
+  },
+};

package/extensions/opl-footer/segments/helpers.ts

@@ -0,0 +1,18 @@
+import type { SegmentContext } from "../types.js";
+import { fg } from "../theme.js";
+
+export function formatTokens(n: number): string {
+  if (n < 1000) return n.toString();
+  if (n < 10000) return `${(n / 1000).toFixed(2)}k`;
+  if (n < 1000000) return `${(n / 1000).toFixed(2)}k`;
+  if (n < 10000000) return `${(n / 1000000).toFixed(2)}M`;
+  return `${(n / 1000000).toFixed(2)}M`;
+}
+
+export function withIcon(icon: string, text: string): string {
+  return icon ? `${icon} ${text}` : text;
+}
+
+export function color(ctx: SegmentContext, semantic: string, text: string): string {
+  return fg(ctx.theme, semantic as any, text, ctx.colors);
+}

package/extensions/opl-footer/segments/index.ts

@@ -0,0 +1,51 @@
+import type { RenderedSegment, SegmentContext, StatusLineSegmentId } from "../types.js";
+import { piSegment } from "./pi.js";
+import { modelSegment } from "./model.js";
+import { pathSegment } from "./path.js";
+import { gitSegment } from "./git.js";
+import { thinkingSegment } from "./thinking.js";
+import { tokenInSegment, tokenOutSegment, tokenTotalSegment, cacheReadSegment, cacheWriteSegment } from "./tokens.js";
+import { costSegment } from "./cost.js";
+import { contextPctSegment, contextTotalSegment } from "./context.js";
+import { separatorSegment } from "./separator.js";
+import { cavemanSegment } from "./caveman.js";
+import { planModeSegment } from "./plan-mode.js";
+import { chatModeSegment } from "./chat-mode.js";
+import { modeSwitcherSegment } from "./mode-switcher.js";
+import { sessionStatsSegment, perfStatsSegment } from "./session-stats.js";
+
+const SEGMENTS = {
+  pi: piSegment,
+  model: modelSegment,
+  path: pathSegment,
+  git: gitSegment,
+  thinking: thinkingSegment,
+  token_in: tokenInSegment,
+  token_out: tokenOutSegment,
+  token_total: tokenTotalSegment,
+  cost: costSegment,
+  context_pct: contextPctSegment,
+  context_total: contextTotalSegment,
+  cache_read: cacheReadSegment,
+  cache_write: cacheWriteSegment,
+  separator: separatorSegment,
+  caveman: cavemanSegment,
+  plan_mode: planModeSegment,
+  chat_mode: chatModeSegment,
+  mode_switcher: modeSwitcherSegment,
+  session_stats: sessionStatsSegment,
+  perf_stats: perfStatsSegment,
+};
+
+export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {
+  if (id.startsWith("text:")) {
+    const text = id.slice(5);
+    return { content: text, visible: text.length > 0 };
+  }
+
+  const segment = SEGMENTS[id as keyof typeof SEGMENTS];
+  if (!segment) {
+    return { content: "", visible: false };
+  }
+  return segment.render(ctx);
+}

package/extensions/opl-footer/segments/mode-switcher.ts

@@ -0,0 +1,24 @@
+import type { RenderedSegment, SegmentContext } from "../types.js";
+import { applyColor } from "../theme.js";
+
+interface AgentModeState {
+  mode: string;
+  appearance?: { modeColor?: string };
+}
+
+function readAgentModeState(): AgentModeState | undefined {
+  return (globalThis as Record<string, unknown>).__agentMode as AgentModeState | undefined;
+}
+
+export const modeSwitcherSegment = {
+  id: "mode_switcher" as const,
+  render(ctx: SegmentContext): RenderedSegment {
+    const state = readAgentModeState();
+    const mode = state?.mode ?? "off";
+
+    const label = applyColor(ctx.theme, "dim", "Mode:");
+    const value = mode === "off" ? "Normal" : mode.charAt(0).toUpperCase() + mode.slice(1);
+    const valueStr = applyColor(ctx.theme, state?.appearance?.modeColor ?? "muted", value);
+    return { content: `${label} ${valueStr}`, visible: true };
+  },
+};