@visual-z/xeno 0.6.0 → 0.7.1

package/src/tui/ui/screen.ts

@@ -31,7 +31,7 @@ import { screenLayout, sidebarContentWidth, type ScreenLayout } from "./layout.t
 import { greetingLines, mascotFrame, MASCOT_FRAME_MS, MASCOT_FRAMES, type Greeting } from "./mascot.ts";
 import { MessageList, type MessageFeatures } from "./messages.ts";
 import { Motion } from "./motion.ts";
-import { contextLabel, sidebarLines, topbarRow, type Line, type StatusModel } from "./status.ts";
+import { contextLabel, modeLabels, sidebarLines, topbarRow, type Line, type StatusModel } from "./status.ts";
 import { DEFAULT_CELL, stripImageRows } from "./image-size.ts";
 import { Pictures, type PictureSource } from "./pictures.ts";
 import type { ImageView, ViewItem } from "./items.ts";
@@ -96,6 +96,7 @@ export class Screen {
   private sidebarWanted = true;
   private status: StatusModel | undefined;
   private dockState: DockState = { model: "", thinking: "", busy: false, activity: "" };
+  private transientActivity: { readonly label: string; readonly startedAt: number; readonly timeoutMs: number } | undefined;
   private home: Greeting | undefined;
   private greetingPlayed = false;
   private greetingFrame = MASCOT_FRAMES;
@@ -112,7 +113,7 @@ export class Screen {
   private queue: readonly string[] = [];
   private attachmentImages: readonly ImageView[] = [];
   private attachmentsKey = "";
-  private picturesSource: PictureSource = { mode: "chip", protocol: "blocks", cell: DEFAULT_CELL, widthCells: 60, load: async () => null };
+  private picturesSource: PictureSource = { mode: "chip", protocol: "blocks", cell: DEFAULT_CELL, widthCells: 60, load: async () => ({ kind: "error", reason: "closed" }) };
   private readonly attachments: BoxRenderable;
   private widgets: readonly string[] = [];
   private unread = 0;
@@ -317,7 +318,7 @@ export class Screen {
 
   private paintStatus(): void {
     const model = this.status;
-    if (model && this.topbar.visible) this.topbar.setRows([topbarRow(model, Math.max(1, this.renderer.width - 2))]);
+    if (model && this.topbar.visible) this.topbar.setRows([topbarRow(this.shape.tier === "sidebar" ? { ...model, title: null } : model, Math.max(1, this.renderer.width - 2))]);
     if (this.controlShown) {
       this.sidebar.borderColor = this.controlFocused ? this.colors.accent : this.colors.line;
       this.sidebarRows.setRows(this.controlView.rows(this.sidebarRows.width, this.sidebarRows.height, this.controlFocused));
@@ -327,7 +328,7 @@ export class Screen {
     if (!model) { this.sidebarRows.setRows([]); return; }
     if (this.sidebar.visible) {
       const width = Math.max(1, this.shape.sidebarWidth - 3);
-      this.sidebarRows.setRows(sidebarLines(model, width, Math.max(0, this.renderer.height - 1)));
+      this.sidebarRows.setRows(sidebarLines(model, width, Math.max(0, this.renderer.height - (this.shape.topbar ? 1 : 0) - 1)));
     }
   }
 
@@ -348,6 +349,12 @@ export class Screen {
     this.paintEdges();
   }
 
+  setTransientActivity(activity: { readonly label: string; readonly timeoutMs: number } | undefined): void {
+    this.transientActivity = activity ? { ...activity, startedAt: Date.now() } : undefined;
+    this.syncActivity();
+    this.paintEdges();
+  }
+
   private paintEdges(): void {
     const width = Math.max(2, this.renderer.width - (this.shape.tier === "sidebar" ? this.shape.sidebarWidth : 0) - 2);
     const d = this.dockState, dialog = this.dialogs.open;
@@ -361,6 +368,7 @@ export class Screen {
     let left: Label[] = [];
     if (dialog) {
       left = [{ segs: [{ text: this.dialogs.title, role: "text", bold: true }], priority: 0, min: 8 }];
+      if (this.status?.activity?.state === "blocked") right.push({ segs: [{ text: this.status.activity.label, role: "warning" }], priority: 1, min: 8 });
       if (this.dialogs.edgeHint) right.push({ segs: [{ text: this.dialogs.edgeHint, role: "muted" }], priority: 3, min: 10 });
     } else if (this.controlShown && this.renderer.height <= 3) {
       // No transcript rows remain for a drawer. Keep its state and explain how
@@ -368,19 +376,25 @@ export class Screen {
       left = [{ segs: [{ text: "Resize for control", role: "accent" }], priority: 0, min: 1 }];
     } else if (d.busy) {
       const seconds = Math.max(0, Math.floor((Date.now() - this.busySince) / 1000));
-      left = [{ segs: [{ text: "●", role: "accent", spin: true }, { text: ` ${d.activity}`, role: "muted" }, { text: ` ${seconds}s`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
+      const activity = this.status?.activity;
+      const label = activity ? `${activity.label}${activity.label === "Running tool" || activity.label === "Retrying" ? ` · ${activity.detail}` : ""}${activity.queued ? ` · ${activity.queued} queued` : ""}` : d.activity;
+      const transient = this.transientActivity ? ` · ${this.transientActivityText()}` : "";
+      left = [{ segs: [{ text: "●", role: "accent", spin: activity?.state !== "blocked" }, { text: ` ${label}${transient}`, role: activity?.state === "blocked" ? "warning" : "muted" }, { text: ` ${seconds}s`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
       right.push({ segs: [{ text: "esc interrupt", role: "muted" }], priority: 4 });
+    } else if (this.transientActivity) {
+      left = [{ segs: [{ text: "●", role: "accent", spin: true }, { text: ` ${this.transientActivityText()}`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
     } else {
       // A draft taller than the box says what scrolled out of view (fix-tui-composer-growth DoD 4).
       const { above, below } = this.composer.overflow;
       if (above) left = [{ segs: [{ text: `↑ ${above} more`, role: "muted" }], priority: 1 }];
       if (below && !this.toastText) right.push({ segs: [{ text: `↓ ${below} more`, role: "muted" }], priority: 2 });
+      if (!above && this.status?.activity) left = [{ segs: [{ text: this.status.activity.label, role: this.status.activity.state === "error" ? "error" : this.status.activity.state === "blocked" ? "warning" : "muted" }], priority: 1, min: 4 }];
     }
     this.topEdge.setRows([edgeLine({ width, corners: ["╭", "╮"], role, left, right })]);
-    const bottomLeft: Label[] = d.model ? [
-      { segs: [{ text: d.model, role: "text", bold: true }], priority: 0, min: 8 },
+    const bottomLeft: Label[] = [...(this.status ? modeLabels(this.status) : []), ...(d.model ? [
+      { segs: [{ text: d.model, role: "text" as const, bold: true }], priority: 1, min: 8 },
       ...(d.thinking ? [{ segs: [{ text: d.thinking, role: "muted" as const }], priority: 2 }] : []),
-    ] : [];
+    ] : [])];
     const context = this.shape.tier !== "sidebar" && this.status ? contextLabel(this.status) : undefined;
     this.bottomEdge.setRows([edgeLine({ width, corners: ["╰", "╯"], role, left: bottomLeft, right: context ? [context] : [] })]);
   }
@@ -393,7 +407,7 @@ export class Screen {
 
   /** The clock runs only while something on screen shows the activity glyph. */
   private syncActivity(): void {
-    const wanted = this.animations && (this.dockState.busy || this.dialogs.animated);
+    const wanted = this.animations && (this.dockState.busy || this.transientActivity !== undefined || this.dialogs.animated);
     if (wanted && !this.activity.running) { this.lastEvent = Date.now(); this.startClock(ACTIVITY_MS); }
     else if (!wanted && this.activity.running) { this.activity.stop(); this.paintEdges(); }
   }
@@ -409,6 +423,13 @@ export class Screen {
     }, undefined, intervalMs);
   }
 
+  private transientActivityText(): string {
+    const activity = this.transientActivity!;
+    const elapsed = Math.max(0, Math.floor((Date.now() - activity.startedAt) / 1000));
+    const deadline = Math.max(1, Math.ceil(activity.timeoutMs / 1000));
+    return `${activity.label} · ${elapsed}s / ${deadline}s max`;
+  }
+
   /** The spinner's current interval (tests). */
   get activityInterval(): number { return this.activity.running ? this.activityMs : 0; }
 

package/src/tui/ui/status.ts

@@ -34,6 +34,10 @@ export interface StatusModel {
   readonly workspace: string;
   readonly workspaceShort: string;
   readonly branch: string | null;
+  readonly mode?: { readonly yolo: boolean; readonly workflow: "build" | "plan" };
+  readonly provider?: { readonly name: string; readonly api: string; readonly host: string | null; readonly role: string | null; readonly ready: boolean };
+  readonly activity?: { readonly state: string; readonly label: string; readonly detail: string; readonly queued: number };
+  readonly git?: { readonly staged: number; readonly changed: number; readonly untracked: number; readonly conflicted: number; readonly ahead: number; readonly behind: number } | null;
   readonly context?: ContextStatus;
   readonly usage?: { readonly input: number; readonly output: number; readonly cacheRate: number; readonly cost: string | null };
   readonly tools: { readonly running: number; readonly done: number; readonly failed: number };
@@ -71,10 +75,18 @@ function shareSeg(context: ContextStatus): Seg | undefined {
   return { text: `${context.estimated ? "~" : ""}${Math.round(share * 100)}%`, role: share >= CONTEXT_WARNING ? "warning" : "text" };
 }
 
-/** The input box's bottom-right label where there is no sidebar: `ctx ~12%`. */
+/** The input box's bottom-right label names the measured budget: `seg ~12%` or `model ~12%`. */
 export function contextLabel(model: StatusModel): Label | undefined {
   const share = model.context && shareSeg(model.context);
-  return share ? { segs: [{ text: "ctx ", role: "muted" }, share], priority: 1 } : undefined;
+  return share ? { segs: [{ text: model.context?.trigger === null ? "model " : "seg ", role: "muted" }, share], priority: 3 } : undefined;
+}
+
+export function modeLabels(model: StatusModel): Label[] {
+  if (!model.mode) return [];
+  return [
+    { segs: [{ text: model.mode.yolo ? "YOLO" : "Approval", role: model.mode.yolo ? "warning" : "muted", bold: model.mode.yolo }], priority: 0 },
+    { segs: [{ text: model.mode.workflow === "plan" ? "Plan" : "Build", role: "accent" }], priority: 0 },
+  ];
 }
 
 export function terminalTitle(model: StatusModel): string {
@@ -91,6 +103,16 @@ function firstLine(text: string): string { return text.split("\n").find(line =>
  * row is narrow: location goes before counts, as OpenCode #570 asked.
  */
 export function topbarRow(model: StatusModel, width: number): Seg[] {
+  if (model.provider) {
+    const provider = model.provider;
+    return splitLine(width, [
+      { segs: [{ text: "xeno", role: "text", bold: true }], priority: 0 },
+      { segs: [{ text: `${provider.ready ? "" : "! "}${provider.name}`, role: provider.ready ? "text" : "warning" }], priority: 0, min: 6 },
+      { segs: [{ text: provider.api, role: "muted" }], priority: 2, min: 8 },
+      ...(provider.host ? [{ segs: [{ text: provider.host, role: "muted" as const }], priority: 3, min: 8 }] : []),
+      ...(provider.role ? [{ segs: [{ text: `agent ${provider.role}`, role: "accent" as const }], priority: 1, min: 8 }] : []),
+    ], model.title ? [{ segs: [{ text: firstLine(model.title), role: "muted" }], priority: 4, min: 12 }] : []);
+  }
   const left: Label[] = [
     { segs: [{ text: "xeno", role: "text", bold: true }], priority: 0 },
     // Never dropped, but gives up width after cost and background counts, before the handoff counts go.
@@ -175,6 +197,9 @@ function sidebarBlocks(model: StatusModel, w: number): Block[] {
     ...title.map(text => [{ text, role: model.title ? "text" : "muted", bold: Boolean(model.title) }] as Line),
     [{ text: clipText(model.workspace, w), role: "muted" }],
     ...(model.branch ? [[{ text: "⎇ ", role: "muted" }, { text: model.branch, role: "muted" }] as Line] : []),
+    ...(model.git ? [[{ text: `${model.git.staged} staged · ${model.git.changed} changed · ${model.git.untracked} new`, role: "muted" }] as Line,
+      ...(model.git.conflicted ? [[{ text: `${model.git.conflicted} conflicts`, role: "warning" }] as Line] : []),
+      ...(model.git.ahead || model.git.behind ? [[{ text: `↑${model.git.ahead} ↓${model.git.behind}`, role: "muted" }] as Line] : [])] : model.git === null ? [[{ text: "Git unavailable", role: "muted" }] as Line] : []),
   ] });
   const context = model.context;
   if (model.goal) blocks.push({ list: false, items: [], head: [
@@ -190,10 +215,11 @@ function sidebarBlocks(model: StatusModel, w: number): Block[] {
     const tone = share !== undefined && share >= CONTEXT_WARNING ? "warning" : "accent";
     const shareText = shareSeg(context);
     blocks.push({ list: false, items: [], head: [
-      row([{ text: "Context", role: "text", bold: true }], shareText ? [shareText] : []),
+      row([{ text: "Context", role: "text", bold: true }], shareText ? [{ text: context.trigger === null ? "model " : "seg ", role: "muted" }, shareText] : []),
       ...(share === undefined ? [] : [[{ text: "━".repeat(filled), role: tone }, { text: "─".repeat(Math.max(0, w - filled)), role: "line" }] as Line]),
-      [{ text: `${est}${compact(context.used)}${context.window ? ` / ${compact(context.window)}` : ""}`, role: "text" }, { text: ` · node ${context.segment}`, role: "muted" }],
-      ...(context.trigger !== null ? [[{ text: `cut at ${est}${compact(context.trigger)}`, role: "muted" }] as Line] : []),
+      [{ text: `Segment ${est}${compact(context.used)}${context.trigger !== null ? ` / ${est}${compact(context.trigger)}` : " · cut disabled"}`, role: "text" }],
+      [{ text: context.window ? `Model ${est}${compact(context.used)} / ${compact(context.window)} · ${est}${Math.round(context.used / context.window * 100)}%` : "Model window unknown", role: "muted" }],
+      [{ text: `node ${context.segment}`, role: "muted" }],
     ] });
   }
   const usage = model.usage, tools = model.tools;
@@ -222,7 +248,7 @@ function sidebarBlocks(model: StatusModel, w: number): Block[] {
   blocks.push({ list: true, head: [row([{ text: "Tasks", role: "text", bold: true }], [{ text: `${tasks.length} open`, role: "muted" }])],
     items: tasks.map(task => [{ text: task.status === "blocked" ? "! " : "◐ ", role: task.status === "blocked" ? "warning" : "accent" }, { text: task.what, role: "text" }] as Line) });
   const files = model.files ?? [];
-  blocks.push({ list: true, head: [row([{ text: "Files", role: "text", bold: true }], [{ text: String(files.length), role: "muted" }])],
+  blocks.push({ list: true, head: [row([{ text: "Agent files", role: "text", bold: true }], [{ text: String(files.length), role: "muted" }])],
     items: files.map(file => fileLine(file, w)) });
   const background = model.background ?? [];
   blocks.push({ list: true, head: [row([{ text: "Background", role: "text", bold: true }], [{ text: String(background.length), role: "muted" }])],