@a-t-h-i/bot-lobby 0.6.12 → 0.6.13

package/README.md

@@ -1,6 +1,9 @@
 # Bot-Lobby
 
-A [Pi](https://pi.dev) extension that turns Pi into a multi-agent software team.
+A [Pi](https://pi.dev) extension that forces you to vibe code intentionally.
+You still describe what you want in plain words, but you don't just hand it
+over: you and the model work out together what's needed until the picture is
+clear, and then a multi-agent software team builds what you agreed on.
 
 ![The Lobby tab: your conversation with the oracle, the activity log of every agent, and their latest thoughts](https://raw.githubusercontent.com/a-t-h-i/bot-lobby/main/docs/gallery.png)
 
@@ -12,8 +15,9 @@ work to three domain agents — **Designer+Frontend**, **Backend** and **QA**
 each running in its own isolated `pi` process. QA's reviewer is the quality
 gate before anything is marked done.
 
-The rule: **LLMs decide, the engine enforces.** Agents propose; the
-extension validates every state change, permission and approval through one
+The rule: **you decide with the LLMs, and the engine enforces.** Agents
+propose; you shape and approve the plan with the oracle; the extension
+validates every state change, permission and approval through one
 `orchestrate` tool.
 
 The oracle is meant to be your most capable model; the agents can be smaller
@@ -61,6 +65,10 @@ extra instructions.
 | `/bot-lobby settings \| config` | Edit settings / show the effective config |
 | `/bot-lobby knowledge` | Knowledge file sizes |
 | `/bot-lobby minimize \| restore` | Hide bot-lobby in this session (`ctrl+shift+m`) |
+| `/bot-lobby web` | Start the browser UI on this machine (loopback only) and open its link |
+| `/bot-lobby web link` | Print the browser UI's link |
+| `/bot-lobby web stop` | Stop the browser UI |
+| `/bot-lobby web reset` | Reset the browser UI's link (its old cookies stop working) |
 
 ## Quick fix or the team
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-t-h-i/bot-lobby",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "Structured multi-agent software engineering orchestrator for Pi",
   "type": "module",
   "license": "Apache-2.0",
@@ -25,7 +25,8 @@
   },
   "files": [
     "src",
-    "prompts"
+    "prompts",
+    "webui/dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -37,7 +38,11 @@
     "image": "https://raw.githubusercontent.com/a-t-h-i/bot-lobby/main/docs/gallery.png"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p webui --noEmit",
+    "web:dev": "node src/webui/dev/serve.ts",
+    "web:build": "vite build --config webui/vite.config.ts && node webui/scripts/build-info.mjs",
+    "web:typecheck": "tsc -p webui --noEmit",
+    "web:check": "playwright test",
     "test": "node --test --test-reporter=dot test/*.test.ts"
   },
   "peerDependencies": {
@@ -50,10 +55,32 @@
     "@earendil-works/pi-ai": "0.87.0",
     "@earendil-works/pi-coding-agent": "0.87.0",
     "@earendil-works/pi-tui": "0.87.0",
+    "@axe-core/playwright": "4.13.0",
+    "@playwright/test": "1.62.0",
+    "@shadcn/react": "0.3.1",
+    "@tailwindcss/vite": "4.3.3",
     "@types/node": "^22.10.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "1.49.0",
+    "radix-ui": "1.6.7",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-markdown": "10.1.0",
+    "recharts": "3.10.1",
+    "remark-gfm": "4.0.1",
+    "shiki": "4.5.0",
     "socket.io": "4.8.4",
+    "sonner": "2.0.8",
+    "tailwind-merge": "3.7.0",
+    "tailwindcss": "4.3.3",
+    "tw-animate-css": "1.4.0",
     "typebox": "1.3.27",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vite": "8.3.2"
   },
   "dependencies": {
     "https-proxy-agent": "^9.1.0",

package/src/ask/tool.ts

@@ -11,6 +11,7 @@ import { Container, Text } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { isSubagentProcess } from "../pi/quiet.ts";
 import { askUser, type Asker } from "./dialog.ts";
+import { promptHub } from "../lobby/prompt-hub.ts";
 import { isImagePath } from "./image.ts";
 import { relayAsker, relayEnabled } from "./relay.ts";
 import { ASK_TOOL, MAX_HEADER, MAX_LABEL, MAX_OPTIONS, MAX_QUESTIONS, MIN_OPTIONS, RESERVED, type AskQuestion, type AskResult } from "./types.ts";
@@ -114,7 +115,7 @@ export function registerAskTool(pi: ExtensionAPI, ask?: Asker): void {
       const questions = (params as { questions: AskQuestion[] }).questions;
       const invalid = invalidQuestions(questions);
       if (invalid) throw new Error(`${invalid}.`);
-      const result = await asker(questions, ctx, signal);
+      const result = await promptHub.run("questionnaire", "oracle", { questions }, () => asker(questions, ctx, signal), { signal });
       return { content: [{ type: "text", text: answerSummary(questions, result) }], details: result };
     },
     renderCall(args, theme) {

package/src/lobby/keys.ts

@@ -4,7 +4,7 @@
  * (`{ "toggleThinking": "alt+t" }`). They work in typing and browsing mode
  * alike, so each default is a key that never types a character.
  */
-import { matchesKey, type KeyId } from "@earendil-works/pi-tui";
+import { Key, matchesKey, type KeyId } from "@earendil-works/pi-tui";
 
 export const LOBBY_ACTIONS = {
   hide: { key: "alt+l", help: "hide the lobby (back to pi)" },
@@ -37,6 +37,19 @@ export function keyMap(overrides: Readonly<Record<string, string>> = {}): KeyMap
   return map;
 }
 
+/** Alt+digit jumps to the tab at `index`; the same key the TUI matches. */
+export function tabJumpKey(index: number): KeyId {
+  return Key.alt(String(index + 1) as "1");
+}
+
+/** `keyMap` with the web-only tab cycling defaults; user overrides win. */
+export function webKeyMap(overrides: Readonly<Record<string, string>> = {}): KeyMap {
+  const map = keyMap(overrides);
+  if (!overrides.nextTab?.trim()) map.nextTab = "alt+]";
+  if (!overrides.prevTab?.trim()) map.prevTab = "alt+[";
+  return map;
+}
+
 /** The action `data` triggers under `map`, if any. */
 export function actionFor(data: string, map: KeyMap): LobbyAction | undefined {
   for (const action of Object.keys(map) as LobbyAction[]) {

package/src/lobby/mini.ts

@@ -36,6 +36,8 @@ export interface MiniInput {
   runs: readonly AgentRun[];
   planning?: MiniPlanning;
   quickfix?: MiniQuickFix;
+  /** The loopback web UI's link, while its server runs. */
+  webLink?: string;
   /** The key that opens the lobby, as shown. */
   key: string;
 }
@@ -107,10 +109,16 @@ function quickFixSegment(quickfix: MiniQuickFix | undefined, theme?: LobbyTheme)
   return `${paint(theme, "accent", "quick fix")} ${paint(theme, "success", quickfix.running ? "◐" : "○")} ${paint(theme, "muted", quickfix.title)}${paint(theme, "dim", queued)}`;
 }
 
+/** The web link, while the server runs; pure: the link arrives as input. */
+function webSegment(link: string | undefined, theme?: LobbyTheme): string | undefined {
+  if (!link) return undefined;
+  return paint(theme, "dim", link);
+}
+
 /** The status line, at most `width` columns. */
 export function miniLine(input: MiniInput, width: number, theme?: LobbyTheme): string {
   if (width < 12) return "";
-  const segments = [taskSegment(input, theme), planningSegment(input.planning, theme), quickFixSegment(input.quickfix, theme)].filter((segment): segment is string => Boolean(segment));
+  const segments = [taskSegment(input, theme), planningSegment(input.planning, theme), quickFixSegment(input.quickfix, theme), webSegment(input.webLink, theme)].filter((segment): segment is string => Boolean(segment));
   const body = segments.length > 0 ? segments.join(paint(theme, "dim", "  │  ")) : paint(theme, "dim", "idle");
   const hint = paint(theme, "dim", `  ${input.key} opens`);
   const line = ` ${paint(theme, "accent", "◆ bot-lobby")}  ${body}`;

package/src/lobby/models/metrics.ts

@@ -0,0 +1,14 @@
+/**
+ * Pure metrics data helpers shared by the terminal tab and the web API.
+ * This module touches neither the terminal nor pi-tui (unlike
+ * `../tabs/metrics.ts`, which draws through `layout.ts`), so the loopback
+ * server can import it freely.
+ */
+import type { MetricRecord } from "../../state/metrics.ts";
+
+/** Runs whose agent, model, thinking level, kind, status or task mention `query`. */
+export function filterRecords(records: readonly MetricRecord[], query: string | undefined): MetricRecord[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...records];
+  return records.filter((record) => [record.agent, record.model ?? "", record.thinking ?? "", record.kind, record.status, record.taskId ?? ""].join(" ").toLowerCase().includes(needle));
+}

package/src/lobby/planner.ts

@@ -27,7 +27,7 @@ import { describeToolCall } from "../pi/activity.ts";
 import { appendMetrics, type MetricRecord } from "../state/metrics.ts";
 import { savePlannedTask, type IssueRef, type PlannedTask } from "../state/backlog.ts";
 import { planSteps } from "../pi/plan-checklist.ts";
-import { KEEP_WHOLE, MAX_SPLIT_REVISIONS, partBrief, partInfo, parseSplit, splitFailedQuestion, splitLabel, splitProblems, splitPrompt, splitQuestion, splitRequest, type SplitProposal } from "./split.ts";
+import { KEEP_WHOLE, MAX_SPLIT_REVISIONS, partBrief, partInfo, parseSplit, splitFailedQuestion, splitProblems, splitPrompt, splitQuestion, splitRequest, type SplitProposal } from "./split.ts";
 import type { AskQuestion, AskResult } from "../ask/types.ts";
 import { PANEL_MEMBERS, type PanelMember } from "../schemas/configuration.ts";
 import { truncate } from "../text.ts";

package/src/lobby/prompt-hub.ts

@@ -0,0 +1,161 @@
+/**
+ * Bot-lobby's questions answerable from several surfaces, with the first
+ * answer winning. A surface registers (`terminal` today; the web page later);
+ * `open` shows the prompt on every surface, `answer` settles it once, and a
+ * cancelled caller's `signal` withdraws every surface. The terminal drives
+ * its prompts through `run`, which wraps today's code unchanged.
+ */
+import { lobbyTopics } from "./topics.ts";
+
+export type PromptKind = "questionnaire" | "choose" | "confirm" | "text" | "sessionDialog";
+
+/** A pending question in the shape the later web API lists. */
+export interface WebPrompt {
+  id: string;
+  kind: PromptKind;
+  createdAt: number;
+  from: string;
+  payload: unknown;
+}
+
+/** One surface a prompt shows on; `withdraw` takes it back off screen. */
+export interface PromptSurface {
+  name: string;
+  show(prompt: WebPrompt): void;
+  withdraw(id: string): void;
+}
+
+interface Pending {
+  prompt: WebPrompt;
+}
+
+interface Outcome {
+  id: string;
+  value: unknown;
+  how: "answered" | "dismissed" | "cancelled";
+}
+
+/** How many settled prompts are remembered (late answers report 409 off this). */
+const MAX_OUTCOMES = 50;
+
+function nextId(seq: number): string {
+  return `p${seq}-${Date.now().toString(36)}`;
+}
+
+function showOn(surfaces: Iterable<PromptSurface>, prompt: WebPrompt): void {
+  for (const surface of surfaces) surface.show(prompt);
+}
+
+function withdrawFrom(surfaces: Iterable<PromptSurface>, id: string): void {
+  for (const surface of surfaces) surface.withdraw(id);
+}
+
+/** Questions from several surfaces; the first answer wins. */
+export class PromptHub {
+  private seq = 0;
+  private readonly pendingMap = new Map<string, Pending>();
+  private readonly surfaces = new Map<string, PromptSurface>();
+  private readonly outcomes: Outcome[] = [];
+
+  /** Put a surface on show duty; returns its unregister function. */
+  registerSurface(surface: PromptSurface): () => void {
+    this.surfaces.set(surface.name, surface);
+    for (const entry of this.pendingMap.values()) surface.show(entry.prompt);
+    return () => {
+      this.surfaces.delete(surface.name);
+    };
+  }
+
+  /** The questions still waiting for an answer, oldest first. */
+  pending(): WebPrompt[] {
+    return [...this.pendingMap.values()].map((entry) => entry.prompt);
+  }
+
+  /** Show a prompt on every surface; the answer settles it later. */
+  open(kind: PromptKind, from: string, payload: unknown): WebPrompt {
+    this.seq += 1;
+    const prompt: WebPrompt = { id: nextId(this.seq), kind, createdAt: Date.now(), from, payload };
+    this.pendingMap.set(prompt.id, { prompt });
+    showOn(this.surfaces.values(), prompt);
+    lobbyTopics.bump("prompts");
+    return prompt;
+  }
+
+  /**
+   * Settle `id` with `value`. True when this call won; false when the prompt
+   * is already settled or unknown (the later web API answers 409 then).
+   */
+  answer(id: string, value: unknown): boolean {
+    if (!this.pendingMap.has(id)) return false;
+    this.settle(id, value, "answered");
+    return true;
+  }
+
+  /** Take `id` back without an answer; false when already settled or unknown. */
+  dismiss(id: string): boolean {
+    if (!this.pendingMap.has(id)) return false;
+    this.settle(id, undefined, "dismissed");
+    return true;
+  }
+
+  /** What settled `id`, if it is still remembered. */
+  outcome(id: string): Outcome | undefined {
+    return this.outcomes.find((entry) => entry.id === id);
+  }
+
+  private settle(id: string, value: unknown, how: Outcome["how"]): void {
+    this.pendingMap.delete(id);
+    withdrawFrom(this.surfaces.values(), id);
+    this.outcomes.push({ id, value, how });
+    if (this.outcomes.length > MAX_OUTCOMES) this.outcomes.splice(0, this.outcomes.length - MAX_OUTCOMES);
+    lobbyTopics.bump("prompts");
+  }
+
+  /**
+   * Run today's terminal code for a prompt: it shows on every surface, the
+   * terminal's `show` answers it, and a cancelled `signal` withdraws them
+   * all. With only the terminal registered this is exactly today's behaviour.
+   */
+  async run<T>(kind: PromptKind, from: string, payload: unknown, show: (prompt: WebPrompt) => Promise<T>, options?: { signal?: AbortSignal }): Promise<T> {
+    const prompt = this.open(kind, from, payload);
+    const signal = options?.signal;
+    if (signal?.aborted) return this.cancelled(prompt.id, show, prompt);
+    const onAbort = () => this.dismiss(prompt.id);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    try {
+      const value = await show(prompt);
+      return this.claim(prompt.id, value);
+    } finally {
+      signal?.removeEventListener("abort", onAbort);
+    }
+  }
+
+  /** The caller was already cancelled: withdraw every surface, keep today's result. */
+  private async cancelled<T>(id: string, show: (prompt: WebPrompt) => Promise<T>, prompt: WebPrompt): Promise<T> {
+    this.pendingMap.delete(id);
+    withdrawFrom(this.surfaces.values(), id);
+    lobbyTopics.bump("prompts");
+    return this.remember(id, await show(prompt));
+  }
+
+  /** Claim the win for `value`, unless another surface answered first. */
+  private claim<T>(id: string, value: T): T {
+    if (!this.pendingMap.has(id)) return this.remembered(id, value);
+    this.settle(id, value, "answered");
+    return value;
+  }
+
+  private remember<T>(id: string, value: T): T {
+    if (!this.outcome(id)) this.outcomes.push({ id, value, how: "cancelled" });
+    lobbyTopics.bump("prompts");
+    return value;
+  }
+
+  private remembered<T>(id: string, fallback: T): T {
+    const outcome = this.outcome(id);
+    return (outcome?.value ?? fallback) as T;
+  }
+}
+
+/** The process-wide hub; the terminal surface registers at lobby start. */
+export const promptHub = new PromptHub();

package/src/lobby/prompts.ts

@@ -0,0 +1,35 @@
+/**
+ * Strings the terminal lobby and the web lobby share: tab metadata and the
+ * short status lines shown while a question is answered elsewhere. Pure on
+ * purpose (no `node:*`, no `@earendil-works/pi-tui`): the web page imports
+ * this file directly.
+ */
+
+export const TAB_IDS = ["lobby", "tasks", "plan", "quickfix", "issues", "metrics", "git", "knowledge", "excalidraw"] as const;
+export type TabId = (typeof TAB_IDS)[number];
+
+export const TAB_LABELS: Record<TabId, string> = {
+  lobby: "Lobby",
+  tasks: "Tasks",
+  plan: "Plan",
+  quickfix: "Quick fix",
+  issues: "Issues",
+  metrics: "Metrics",
+  git: "Git",
+  knowledge: "Knowledge",
+  excalidraw: "Excalidraw",
+};
+
+/** The tabs on show: Issues only while `lobby.issues` switches it on. */
+export function visibleTabs(issues: boolean): TabId[] {
+  return TAB_IDS.filter((tab) => issues || tab !== "issues");
+}
+
+/** A question answered in the terminal while the web lobby watched it. */
+export const ANSWERED_IN_TERMINAL = "already answered in the terminal";
+
+/** Pi itself is asking in the terminal; the web lobby waits. */
+export const PI_ASKING_IN_TERMINAL = "pi is asking in the terminal";
+
+/** The window is too narrow to show the lobby. */
+export const NARROW_WINDOW = "the window is too narrow to show the lobby";