@larose/pi-web 0.3.0

package/src/client/shared.ts

@@ -0,0 +1,99 @@
+export type GitHead = { type: "branch"; name: string } | { type: "detached"; commit: string; shortCommit: string };
+
+export interface GitContext {
+  repositoryRoot: string;
+  worktreeRoot: string;
+  relativeCwd: string;
+  head: GitHead;
+  isLinkedWorktree: boolean;
+}
+
+export interface GitWorktreeSummary {
+  worktreeRoot: string;
+  cwd: string;
+  head: GitHead;
+  isLinkedWorktree: boolean;
+}
+
+export interface GitWorkspaceInspection {
+  cwd: string;
+  context: GitContext | null;
+  worktrees: GitWorktreeSummary[];
+  creation:
+    | { available: true; reasonCode: null; reason: null }
+    | { available: false; reasonCode: string; reason: string };
+}
+
+export interface SessionWorkspaceContext {
+  repositoryRoot: string;
+  worktreeRoot: string;
+  relativeCwd: string;
+}
+
+export interface SessionSummary {
+  id: string;
+  cwd: string;
+  gitContext: GitContext | null;
+  workspaceContext: SessionWorkspaceContext | null;
+  name?: string;
+  created: string;
+  modified: string;
+  messageCount: number;
+  firstMessage: string;
+}
+
+export interface RepositorySessionGroup {
+  type: "repository";
+  cwd: string;
+  repositoryRoot: string;
+  sessions: SessionSummary[];
+  worktrees: GitWorktreeSummary[];
+}
+
+export interface StandaloneSessionGroup {
+  type: "standalone";
+  cwd: string;
+  sessions: SessionSummary[];
+}
+
+export type SessionGroup = RepositorySessionGroup | StandaloneSessionGroup;
+
+export interface SessionListing {
+  groups: SessionGroup[];
+  knownCwds: string[];
+  activeSessionIds: string[];
+  runningSessionIds: string[];
+}
+
+export function requiredElement<T extends Element>(selector: string, root: ParentNode = document): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) {
+    throw new Error(`Missing required element: ${selector}`);
+  }
+  return element;
+}
+
+export function textElement(tag: string, className: string, text: string): HTMLElement {
+  const element = document.createElement(tag);
+  element.className = className;
+  element.textContent = text;
+  return element;
+}
+
+export function readableError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export async function api<T>(path: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(path, options);
+  const body = (await response.json().catch(() => undefined)) as { error?: { message?: string } } | undefined;
+
+  if (!response.ok) {
+    throw new Error(body?.error?.message ?? `Request failed (${response.status})`);
+  }
+  return body as T;
+}
+
+export function sessionPath(id: string): string {
+  return `/sessions/${encodeURIComponent(id)}`;
+}

package/src/client/slash-completion.ts

@@ -0,0 +1,184 @@
+export interface SlashCompletionCommand {
+  name: string;
+  description?: string;
+}
+
+export interface FuzzyMatch {
+  matches: boolean;
+  score: number;
+}
+
+export interface SlashCompletionState<T extends SlashCompletionCommand = SlashCompletionCommand> {
+  query: string;
+  matches: T[];
+  selectedIndex: number;
+}
+
+export interface SlashCompletionWindow<T extends SlashCompletionCommand = SlashCompletionCommand> {
+  startIndex: number;
+  items: T[];
+}
+
+/** Mirrors pi-tui's command-name fuzzy matching and scoring. */
+export function fuzzyMatch(query: string, text: string): FuzzyMatch {
+  const queryLower = query.toLowerCase();
+  const textLower = text.toLowerCase();
+
+  const matchQuery = (normalizedQuery: string): FuzzyMatch => {
+    if (normalizedQuery.length === 0) {
+      return { matches: true, score: 0 };
+    }
+    if (normalizedQuery.length > textLower.length) {
+      return { matches: false, score: 0 };
+    }
+
+    let queryIndex = 0;
+    let score = 0;
+    let lastMatchIndex = -1;
+    let consecutiveMatches = 0;
+
+    for (let index = 0; index < textLower.length && queryIndex < normalizedQuery.length; index += 1) {
+      if (textLower[index] !== normalizedQuery[queryIndex]) {
+        continue;
+      }
+
+      const isWordBoundary = index === 0 || /[\s\-_./:]/.test(textLower[index - 1] ?? "");
+      if (lastMatchIndex === index - 1) {
+        consecutiveMatches += 1;
+        score -= consecutiveMatches * 5;
+      } else {
+        consecutiveMatches = 0;
+        if (lastMatchIndex >= 0) {
+          score += (index - lastMatchIndex - 1) * 2;
+        }
+      }
+      if (isWordBoundary) {
+        score -= 10;
+      }
+
+      score += index * 0.1;
+      lastMatchIndex = index;
+      queryIndex += 1;
+    }
+
+    if (queryIndex < normalizedQuery.length) {
+      return { matches: false, score: 0 };
+    }
+    if (normalizedQuery === textLower) {
+      score -= 100;
+    }
+
+    return { matches: true, score };
+  };
+
+  const primaryMatch = matchQuery(queryLower);
+  if (primaryMatch.matches) {
+    return primaryMatch;
+  }
+
+  const alphaNumericMatch = queryLower.match(/^(?<letters>[a-z]+)(?<digits>[0-9]+)$/);
+  const numericAlphaMatch = queryLower.match(/^(?<digits>[0-9]+)(?<letters>[a-z]+)$/);
+  const swappedQuery = alphaNumericMatch
+    ? `${alphaNumericMatch.groups?.digits ?? ""}${alphaNumericMatch.groups?.letters ?? ""}`
+    : numericAlphaMatch
+      ? `${numericAlphaMatch.groups?.letters ?? ""}${numericAlphaMatch.groups?.digits ?? ""}`
+      : "";
+  if (!swappedQuery) {
+    return primaryMatch;
+  }
+
+  const swappedMatch = matchQuery(swappedQuery);
+  return swappedMatch.matches ? { matches: true, score: swappedMatch.score + 5 } : primaryMatch;
+}
+
+/** Mirrors pi-tui's stable fuzzy filtering, including whitespace and slash tokenization. */
+export function fuzzyFilter<T>(items: readonly T[], query: string, getText: (item: T) => string): T[] {
+  if (!query.trim()) {
+    return [...items];
+  }
+
+  const tokens = query
+    .trim()
+    .split(/[\s/]+/)
+    .filter((token) => token.length > 0);
+  if (tokens.length === 0) {
+    return [...items];
+  }
+
+  const results: Array<{ item: T; totalScore: number }> = [];
+  for (const item of items) {
+    let totalScore = 0;
+    let allMatch = true;
+
+    for (const token of tokens) {
+      const match = fuzzyMatch(token, getText(item));
+      if (!match.matches) {
+        allMatch = false;
+        break;
+      }
+      totalScore += match.score;
+    }
+
+    if (allMatch) {
+      results.push({ item, totalScore });
+    }
+  }
+
+  results.sort((left, right) => left.totalScore - right.totalScore);
+  return results.map(({ item }) => item);
+}
+
+export function slashCommandQuery(value: string): string | null {
+  return /^\/(\S*)$/.exec(value)?.[1] ?? null;
+}
+
+export function createSlashCompletionState<T extends SlashCompletionCommand>(
+  commands: readonly T[],
+  value: string,
+  selectedName?: string,
+): SlashCompletionState<T> | null {
+  const query = slashCommandQuery(value);
+  if (query === null) {
+    return null;
+  }
+
+  const matches = fuzzyFilter(commands, query, (command) => command.name);
+  if (matches.length === 0) {
+    return null;
+  }
+
+  const previousIndex = selectedName === undefined ? -1 : matches.findIndex((command) => command.name === selectedName);
+
+  return {
+    query,
+    matches,
+    selectedIndex: previousIndex >= 0 ? previousIndex : 0,
+  };
+}
+
+export function moveSlashCompletionSelection<T extends SlashCompletionCommand>(
+  state: SlashCompletionState<T>,
+  offset: number,
+): SlashCompletionState<T> {
+  const count = state.matches.length;
+  const selectedIndex = (((state.selectedIndex + offset) % count) + count) % count;
+
+  return { ...state, selectedIndex };
+}
+
+export function getSlashCompletionWindow<T extends SlashCompletionCommand>(
+  state: SlashCompletionState<T>,
+  maxVisible = 5,
+): SlashCompletionWindow<T> {
+  const size = Math.max(1, Math.floor(maxVisible));
+  const startIndex = Math.max(0, Math.min(state.matches.length - size, state.selectedIndex - Math.floor(size / 2)));
+
+  return {
+    startIndex,
+    items: state.matches.slice(startIndex, startIndex + size),
+  };
+}
+
+export function completeSlashCommand(command: SlashCompletionCommand): string {
+  return `/${command.name} `;
+}

package/src/client/transcript-activity.ts

@@ -0,0 +1,188 @@
+export const MAX_ACTIVITY_PREVIEW_CHARS = 120;
+
+export interface TranscriptMessage {
+  role: string;
+  content?: unknown;
+  toolCallId?: string;
+  toolName?: string;
+  isError?: boolean;
+  display?: boolean;
+  stopReason?: string;
+}
+
+export interface TranscriptMessageEntry {
+  kind: "message";
+  entryId: string;
+  message: TranscriptMessage;
+}
+
+export interface TranscriptCustomEntry {
+  kind: "custom";
+  entryId: string;
+  customType: string;
+  data: unknown;
+}
+
+export type TranscriptEntry = TranscriptMessageEntry | TranscriptCustomEntry;
+
+export type ActivityItem =
+  | { kind: "thinking"; text: string }
+  | { kind: "toolCall"; name: string; arguments: unknown }
+  | { kind: "toolResult"; message: TranscriptMessage };
+
+export interface ActivityGroup {
+  kind: "activity";
+  items: ActivityItem[];
+  preview?: string;
+  lastAction?: string;
+  outcome?: "aborted";
+}
+
+export type GroupedTranscriptEntry = TranscriptEntry | ActivityGroup;
+
+export interface PartitionedAssistantContent {
+  activity: ActivityItem[];
+  responseContent: unknown;
+  hasResponse: boolean;
+}
+
+function boundedText(value: string, maximum: number): string {
+  const characters = Array.from(value);
+  if (characters.length <= maximum) {
+    return value;
+  }
+
+  const prefix = characters
+    .slice(0, maximum - 1)
+    .join("")
+    .trimEnd();
+  return `${prefix}…`;
+}
+
+export function activityPreview(value: string): string {
+  const plainText = value
+    .replace(/\[([^\]]+)\]\([^\s)]+\)/gu, "$1")
+    .replace(/`([^`]+)`/gu, "$1")
+    .replace(/[*~]{1,3}/gu, "")
+    .replace(/^#{1,6}\s+/gmu, "");
+  const normalized = plainText.replace(/\s+/gu, " ").trim();
+  const sentenceEnd = /[.!?。！？](?=\s|$)/u.exec(normalized);
+  const sentence = sentenceEnd ? normalized.slice(0, sentenceEnd.index + sentenceEnd[0].length) : normalized;
+
+  return boundedText(sentence, MAX_ACTIVITY_PREVIEW_CHARS);
+}
+
+export function toolActionLabel(toolName: unknown, completed = false): string {
+  const name = typeof toolName === "string" && toolName.trim() ? toolName.trim() : "tool";
+  return `Tool · ${name}${completed ? " · done" : ""}`;
+}
+
+export function partitionAssistantContent(content: unknown): PartitionedAssistantContent {
+  if (!Array.isArray(content)) {
+    return {
+      activity: [],
+      responseContent: content,
+      hasResponse: content !== undefined && content !== "",
+    };
+  }
+
+  const activity: ActivityItem[] = [];
+  const response: unknown[] = [];
+
+  for (const part of content) {
+    if (!part || typeof part !== "object") {
+      response.push(part);
+      continue;
+    }
+
+    const block = part as Record<string, unknown>;
+    if (block.type === "thinking") {
+      activity.push({ kind: "thinking", text: typeof block.thinking === "string" ? block.thinking : "" });
+      continue;
+    }
+
+    if (block.type === "toolCall") {
+      activity.push({
+        kind: "toolCall",
+        name: typeof block.name === "string" && block.name.trim() ? block.name : "tool",
+        arguments: block.arguments,
+      });
+      continue;
+    }
+
+    response.push(part);
+  }
+
+  return { activity, responseContent: response, hasResponse: response.length > 0 };
+}
+
+function appendActivityItem(group: ActivityGroup, item: ActivityItem): void {
+  group.items.push(item);
+
+  if (item.kind === "thinking") {
+    const preview = activityPreview(item.text);
+    if (preview) {
+      group.preview = preview;
+    }
+  } else if (item.kind === "toolCall") {
+    group.lastAction = toolActionLabel(item.name);
+  } else {
+    group.lastAction = toolActionLabel(item.message.toolName, true);
+  }
+}
+
+export function groupTranscriptActivity(entries: TranscriptEntry[]): GroupedTranscriptEntry[] {
+  const grouped: GroupedTranscriptEntry[] = [];
+  let activity: ActivityGroup | undefined;
+
+  const ensureActivity = (): ActivityGroup => {
+    if (activity) {
+      return activity;
+    }
+
+    activity = { kind: "activity", items: [] };
+    grouped.push(activity);
+    return activity;
+  };
+
+  for (const entry of entries) {
+    if (entry.kind !== "message") {
+      grouped.push(entry);
+      continue;
+    }
+
+    const { message } = entry;
+    if (message.role === "user") {
+      activity = undefined;
+      grouped.push(entry);
+      continue;
+    }
+
+    if (message.role === "assistant") {
+      const partitioned = partitionAssistantContent(message.content);
+      for (const item of partitioned.activity) {
+        appendActivityItem(ensureActivity(), item);
+      }
+      if (message.stopReason === "aborted") {
+        ensureActivity().outcome = "aborted";
+      }
+
+      if (partitioned.hasResponse) {
+        grouped.push({
+          ...entry,
+          message: { ...message, content: partitioned.responseContent },
+        });
+      }
+      continue;
+    }
+
+    if (message.role === "toolResult" || message.role === "live-tool") {
+      appendActivityItem(ensureActivity(), { kind: "toolResult", message });
+      continue;
+    }
+
+    grouped.push(entry);
+  }
+
+  return grouped;
+}

package/src/client/usage-format.ts

@@ -0,0 +1,156 @@
+export interface SessionUsage {
+  tokens: {
+    input: number;
+    output: number;
+    cacheRead: number;
+    cacheWrite: number;
+    total: number;
+  };
+  context: {
+    tokens: number | null;
+    contextWindow: number;
+    percent: number | null;
+  } | null;
+}
+
+export interface SessionContextUsageDisplay {
+  state: "loading" | "known" | "unknown" | "unavailable";
+  percentageText: string;
+  capacityText: string | null;
+  meterPercent: number | null;
+  autoCompactionEnabled: boolean;
+  accessibleText: string;
+}
+
+export interface SessionUsageDisplay {
+  tokenLines: string[];
+  tokenAccessibleText: string;
+  context: SessionContextUsageDisplay;
+}
+
+const fullNumberFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+
+/** Format token counts using the same compact thresholds as Pi's footer. */
+export function formatCompactTokens(count: number): string {
+  if (count < 1_000) {
+    return count.toString();
+  }
+  if (count < 10_000) {
+    return `${(count / 1_000).toFixed(1)}k`;
+  }
+  if (count < 1_000_000) {
+    return `${Math.round(count / 1_000)}k`;
+  }
+  if (count < 10_000_000) {
+    return `${(count / 1_000_000).toFixed(1)}M`;
+  }
+  return `${Math.round(count / 1_000_000)}M`;
+}
+
+function fullTokens(count: number): string {
+  return `${fullNumberFormatter.format(count)} tokens`;
+}
+
+function punctuate(parts: string[], fallback: string): string {
+  return `${parts.length > 0 ? parts.join("; ") : fallback}.`;
+}
+
+export function formatSessionUsage(usage: SessionUsage | null, autoCompactionEnabled: boolean): SessionUsageDisplay {
+  if (!usage) {
+    return {
+      tokenLines: ["Loading…"],
+      tokenAccessibleText: "Token usage is loading.",
+      context: {
+        state: "loading",
+        percentageText: "Loading…",
+        capacityText: null,
+        meterPercent: null,
+        autoCompactionEnabled: false,
+        accessibleText: "Context usage is loading.",
+      },
+    };
+  }
+
+  const tokenLines: string[] = [];
+  const tokenAccessibleParts: string[] = [];
+  const inputOutputParts: string[] = [];
+  const cacheParts: string[] = [];
+
+  if (usage.tokens.input) {
+    inputOutputParts.push(`In ${formatCompactTokens(usage.tokens.input)}`);
+    tokenAccessibleParts.push(`Input: ${fullTokens(usage.tokens.input)}`);
+  }
+  if (usage.tokens.output) {
+    inputOutputParts.push(`Out ${formatCompactTokens(usage.tokens.output)}`);
+    tokenAccessibleParts.push(`Output: ${fullTokens(usage.tokens.output)}`);
+  }
+  if (usage.tokens.cacheRead) {
+    cacheParts.push(`Cache read ${formatCompactTokens(usage.tokens.cacheRead)}`);
+    tokenAccessibleParts.push(`Cache read: ${fullTokens(usage.tokens.cacheRead)}`);
+  }
+  if (usage.tokens.cacheWrite) {
+    cacheParts.push(`write ${formatCompactTokens(usage.tokens.cacheWrite)}`);
+    tokenAccessibleParts.push(`Cache write: ${fullTokens(usage.tokens.cacheWrite)}`);
+  }
+
+  if (inputOutputParts.length > 0) {
+    tokenLines.push(inputOutputParts.join(" · "));
+  }
+  if (cacheParts.length > 0) {
+    tokenLines.push(cacheParts.join(" · "));
+  }
+
+  const tokenAccessibleText = punctuate(tokenAccessibleParts, "No token usage yet");
+
+  if (!usage.context) {
+    return {
+      tokenLines,
+      tokenAccessibleText,
+      context: {
+        state: "unavailable",
+        percentageText: "Unavailable",
+        capacityText: null,
+        meterPercent: null,
+        autoCompactionEnabled,
+        accessibleText: autoCompactionEnabled
+          ? "Context usage unavailable; auto-compaction enabled."
+          : "Context usage unavailable.",
+      },
+    };
+  }
+
+  const contextWindow = formatCompactTokens(usage.context.contextWindow);
+  if (usage.context.tokens === null || usage.context.percent === null) {
+    return {
+      tokenLines,
+      tokenAccessibleText,
+      context: {
+        state: "unknown",
+        percentageText: "—",
+        capacityText: `? / ${contextWindow} tokens`,
+        meterPercent: null,
+        autoCompactionEnabled,
+        accessibleText:
+          `Context: unknown of ${fullTokens(usage.context.contextWindow)} until the next model response; ` +
+          `auto-compaction ${autoCompactionEnabled ? "enabled" : "disabled"}.`,
+      },
+    };
+  }
+
+  const roundedPercent = Math.round(usage.context.percent);
+
+  return {
+    tokenLines,
+    tokenAccessibleText,
+    context: {
+      state: "known",
+      percentageText: `${roundedPercent}% used`,
+      capacityText: `${formatCompactTokens(usage.context.tokens)} / ${contextWindow} tokens`,
+      meterPercent: Math.min(100, Math.max(0, usage.context.percent)),
+      autoCompactionEnabled,
+      accessibleText:
+        `Context: ${fullTokens(usage.context.tokens)} of ${fullTokens(usage.context.contextWindow)} ` +
+        `(${roundedPercent}%); auto-compaction ${autoCompactionEnabled ? "enabled" : "disabled"}.`,
+    },
+  };
+}

package/src/client/workspace-browser.ts

@@ -0,0 +1,36 @@
+import type { GitContext } from "./shared.js";
+
+export function repositoryName(root: string): string {
+  const normalized = root.replace(/[\\/]+$/, "");
+  return normalized.split(/[\\/]/).pop() || root;
+}
+
+export function displayRelativePath(relativePath: string): string {
+  return relativePath === "." ? "(root)" : relativePath;
+}
+
+export function relativePathWithin(root: string, candidate: string): string | null {
+  const separator = root.includes("\\") && !root.includes("/") ? "\\" : "/";
+  const normalizedRoot = root.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  const normalizedCandidate = candidate.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  const caseInsensitive = /^[A-Za-z]:/.test(normalizedRoot);
+  const comparableRoot = caseInsensitive ? normalizedRoot.toLocaleLowerCase() : normalizedRoot;
+  const comparableCandidate = caseInsensitive ? normalizedCandidate.toLocaleLowerCase() : normalizedCandidate;
+  if (comparableCandidate === comparableRoot) {
+    return ".";
+  }
+
+  const rootPrefix = comparableRoot === "/" ? "/" : `${comparableRoot}/`;
+  if (!comparableCandidate.startsWith(rootPrefix)) {
+    return null;
+  }
+
+  return normalizedCandidate.slice(rootPrefix.length).replaceAll("/", separator);
+}
+
+export function worktreeTargetPath(context: GitContext, name: string): string {
+  const root = context.repositoryRoot.replace(/[\\/]$/, "");
+  const separator = root.includes("\\") && !root.includes("/") ? "\\" : "/";
+  const relativeCwd = context.relativeCwd === "." ? "" : `${separator}${context.relativeCwd}`;
+  return `${root}${separator}.pi${separator}worktrees${separator}${name || "<name>"}${relativeCwd}`;
+}