@thoth-agents/pi-thoth-theme 0.4.0 → 0.6.0

package/README.md

@@ -27,6 +27,26 @@ from the repository root. Restart Pi after installation.
 Select the `thoth` theme in Pi's theme settings. Theme selection is independent
 of the module toggles below.
 
+## User messages
+
+The `thoth` theme renders user messages in `#E8DCB5` on `#120E0A`.
+The extension surrounds the original Markdown with a top `╭── <icon> user ─…╮`
+and bottom `╰─…╯` frame, separated from the content by blank lines. Both borders
+fill the content width after Pi's horizontal padding and adapt on terminal resize.
+Framing is skipped when the width is missing, invalid, or too narrow to fit the
+title, one fill cell and the closing corner (13 columns with the current icons).
+This is display-only: stored messages, assistant replies and thinking are unchanged.
+Blank content and already-framed messages are left alone. The frame is independent
+of the optional modules below.
+
+The frame reuses `icons`: `"nerd"` (the existing default) selects nf-fa-user
+(U+F007), `"unicode"` selects `●` (U+25CF), and `"ascii"` selects `@`.
+Set `"icons": "nerd"` in the package configuration and use a Nerd Font in your
+terminal for the Nerd glyph; use `"icons": "unicode"` for its Unicode fallback.
+
+Markdown accents and syntax colors remain shared with assistant messages; only
+ordinary user text and the frame use `userMessageText` (`#E8DCB5`).
+
 ## Modules
 
 - **Status line**: a responsive footer below the input showing cumulative

package/dist/index.ts

@@ -139,6 +139,9 @@ var init_render_kit = __esm({
       completed: "\u2713",
       deleted: "\u2713",
       failed: "\u2717",
+      timedOut: "\u25F7",
+      resolved: "\u21BB",
+      expectedExit: "\u2713",
       cancelled: "\u2717",
       interrupted: "\u2717",
       blocked: "\u2717"
@@ -159,6 +162,9 @@ var init_panel_frame = __esm({
   }
 });
 
+// src/index.ts
+import { visibleWidth as visibleWidth8 } from "@earendil-works/pi-tui";
+
 // ../pi-core/src/validation.ts
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -521,6 +527,7 @@ function cachedComponent(renderFn) {
 
 // src/shared/icons.ts
 var ICONS = {
+  user: { nerd: "\uF007", unicode: "\u25CF", ascii: "@" },
   branch: { nerd: "\uE0A0", unicode: "\u2442", ascii: "git" },
   folder: { nerd: "\uF07C", unicode: "dir", ascii: "dir" },
   model: { nerd: "\u{F06A9}", unicode: "\u25CF", ascii: "*" },
@@ -592,7 +599,10 @@ var STATUS_ICONS = {
   running: { nerd: "\u25D0", unicode: "\u25D0", ascii: "*" },
   completed: { nerd: "\uF00C", unicode: "\u2713", ascii: "+" },
   failed: { nerd: "\uF00D", unicode: "\u2717", ascii: "x" },
-  cancelled: STOP,
+  timedOut: { nerd: "\uF017", unicode: "\u25F7", ascii: "T" },
+  resolved: { nerd: "\uF021", unicode: "\u21BB", ascii: "~" },
+  expectedExit: { nerd: "\uF00C", unicode: "\u2713", ascii: "+" },
+  cancelled: { ...STOP, ascii: "#" },
   interrupted: STOP,
   stopping: STOP,
   deleted: BLOCKED,
@@ -967,6 +977,9 @@ var STATUS_ROLE = {
   running: "accent",
   completed: "success",
   failed: "error",
+  timedOut: "warning",
+  resolved: "muted",
+  expectedExit: "dim",
   cancelled: "muted",
   interrupted: "warning",
   stopping: "warning",
@@ -978,13 +991,16 @@ var TOOL_FOOTER_STATUS = {
   completed: "completed",
   deleted: "completed",
   failed: "failed",
+  timedOut: "timedOut",
+  resolved: "resolved",
+  expectedExit: "expectedExit",
   cancelled: "failed",
   interrupted: "failed",
   blocked: "failed"
 };
 function startsWithFooterGlyph(footer, mode) {
   const plain = stripTerminalSequences(footer);
-  return ["completed", "failed"].some((status) => {
+  return ["completed", "failed", "timedOut", "resolved", "expectedExit"].some((status) => {
     const glyph = statusIcon(status, mode);
     return plain.startsWith(glyph) && (plain.length === glyph.length || /^\s/u.test(plain.slice(glyph.length)));
   });
@@ -1729,43 +1745,71 @@ function decorateEditor(editor, deps) {
 import { truncateToWidth as truncateToWidth7, visibleWidth as visibleWidth6 } from "@earendil-works/pi-tui";
 function createWorkingState(requestRender) {
   let startedAt;
+  let pendingBackground = 0;
   let ticker;
   let disposed = false;
   function stop() {
     if (ticker !== void 0) clearInterval(ticker);
     ticker = void 0;
-    startedAt = void 0;
+  }
+  function syncTicker() {
+    if (startedAt === void 0 && pendingBackground === 0) {
+      stop();
+    } else if (ticker === void 0) {
+      ticker = setInterval(requestRender, 50);
+      ticker.unref?.();
+    }
+    requestRender();
   }
   return {
     get isWorking() {
-      return startedAt !== void 0;
+      return startedAt !== void 0 || pendingBackground > 0;
     },
     start() {
       if (disposed) return;
-      stop();
       startedAt = Date.now();
-      ticker = setInterval(requestRender, 50);
-      ticker.unref?.();
-      requestRender();
+      syncTicker();
     },
     end() {
       if (disposed) return;
-      stop();
-      requestRender();
+      startedAt = void 0;
+      syncTicker();
+    },
+    setPendingBackground(count) {
+      if (disposed || pendingBackground === count) return;
+      pendingBackground = count;
+      syncTicker();
     },
     status(indicator, width, styleMuted = (text) => text, frame, mode = "nerd") {
       const ready = `${icon("ready", mode)} ready`;
       const separator2 = icon("separator", mode);
+      const now = frame?.now ?? Date.now();
+      const fallback = () => {
+        if (pendingBackground === 0)
+          return styleMuted(truncateToWidth7(ready, width, ""));
+        const glyphs = frames("workingFrames", mode);
+        const glyph = glyphs[Math.floor(now / 200) % glyphs.length];
+        const label2 = renderWorkingIndicator(
+          `${glyph} working${icon("ellipsis", mode)}`,
+          frame ?? createBreathingFrame(now),
+          styleMuted,
+          glyphs
+        );
+        return truncateToWidth7(
+          `${label2}${styleMuted(` ${separator2} ${pendingBackground} bg`)}`,
+          width,
+          ""
+        );
+      };
       if (!indicator || typeof indicator !== "object" || !("renderInBorder" in indicator) || typeof indicator.renderInBorder !== "function") {
-        return styleMuted(truncateToWidth7(ready, width, ""));
+        return fallback();
       }
       const working = "kind" in indicator && indicator.kind === "working";
-      const now = frame?.now ?? Date.now();
       const elapsed = working && startedAt !== void 0 ? ` ${separator2} ${formatDuration(Math.floor((now - startedAt) / 1e3) * 1e3)}` : "";
       const nativeWidth = Math.max(1, width - visibleWidth6(elapsed));
       const native = indicator.renderInBorder(nativeWidth);
       if (typeof native !== "string" || visibleWidth6(native) === 0) {
-        return styleMuted(truncateToWidth7(ready, width, ""));
+        return fallback();
       }
       const fitted = truncateToWidth7(native, nativeWidth, "");
       const label = working && startedAt !== void 0 ? renderWorkingIndicator(
@@ -1782,11 +1826,107 @@ function createWorkingState(requestRender) {
     },
     dispose() {
       disposed = true;
+      startedAt = void 0;
+      pendingBackground = 0;
       stop();
     }
   };
 }
 
+// src/status-line/orca-child-hold.ts
+var memoryKey = /* @__PURE__ */ Symbol.for("@thoth-agents/pi-thoth-theme/orca-child-holds");
+function createOrcaChildHold(events) {
+  const processState = globalThis;
+  processState[memoryKey] ??= /* @__PURE__ */ new Map();
+  const sessions = processState[memoryKey];
+  let announced = /* @__PURE__ */ new Set();
+  let subagents = [];
+  let background = [];
+  let timer;
+  let disposed = false;
+  function reconcile(prefix, tasks) {
+    const live = /* @__PURE__ */ new Set();
+    const byId = /* @__PURE__ */ new Map();
+    for (const task of tasks) {
+      if (disposed) return;
+      const id = `${prefix}${task.id}`;
+      if (!byId.has(id)) byId.set(id, task);
+      if (!task.live) continue;
+      live.add(id);
+      if (announced.has(id)) continue;
+      announced.add(id);
+      events.emit("task:subagent:lifecycle", {
+        id,
+        status: "started",
+        agent: task.agent,
+        ...task.description ? { description: task.description } : {}
+      });
+    }
+    for (const id of announced) {
+      if (disposed) return;
+      if (!id.startsWith(prefix) || live.has(id)) continue;
+      announced.delete(id);
+      const status = byId.get(id)?.status;
+      events.emit("task:subagent:lifecycle", {
+        id,
+        status: status === "failed" || status === "timed_out" ? "failed" : status === "cancelled" || status === "interrupted" ? "aborted" : "completed"
+      });
+    }
+  }
+  return {
+    startSession(sessionId) {
+      if (disposed) return;
+      if (timer !== void 0) clearTimeout(timer);
+      announced = sessions.get(sessionId) ?? /* @__PURE__ */ new Set();
+      sessions.set(sessionId, announced);
+      subagents = [];
+      background = [];
+      timer = setTimeout(() => {
+        timer = void 0;
+        if (disposed) return;
+        reconcile("thoth:subagent:", subagents);
+        reconcile("thoth:bg:", background);
+      }, 0);
+      timer.unref?.();
+    },
+    updateSubagents(data) {
+      if (disposed) return;
+      subagents = [
+        ...data.tasks.map((task) => ({
+          id: task.id,
+          live: task.mode === "background" && (task.status === "queued" || task.status === "running" || task.status === "stopping"),
+          status: task.status,
+          agent: task.agent,
+          description: task.displayName
+        })),
+        ...data.history.map((task) => ({
+          id: task.id,
+          live: false,
+          status: task.status,
+          agent: task.agent
+        }))
+      ];
+      if (timer === void 0) reconcile("thoth:subagent:", subagents);
+    },
+    updateBackground(data) {
+      if (disposed) return;
+      background = data.tasks.map((task) => ({
+        id: task.id,
+        live: task.status === "running",
+        status: task.status,
+        agent: task.kind === "command_watch" ? "watch" : "process",
+        description: task.name
+      }));
+      if (timer === void 0) reconcile("thoth:bg:", background);
+    },
+    dispose() {
+      disposed = true;
+      if (timer !== void 0) clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+}
+
 // src/status-line/throughput.ts
 function createThroughputTracker() {
   let pending;
@@ -1930,6 +2070,7 @@ function registerStatusLine(pi, ctx, config) {
       requestRender();
     };
     const working = createWorkingState(invalidateRender);
+    const orcaChildHold = createOrcaChildHold(pi.events);
     const editorDecorations = /* @__PURE__ */ new Set();
     const refreshSession = () => {
       if (disposed) return;
@@ -1937,7 +2078,12 @@ function registerStatusLine(pi, ctx, config) {
       invalidateRender();
     };
     let offSubagentUsage;
+    let offBackgroundWork = [];
     unsubs.push(() => offSubagentUsage?.());
+    unsubs.push(() => {
+      for (const off of offBackgroundWork) off();
+      offBackgroundWork = [];
+    });
     if (footerData?.onBranchChange) {
       unsubs.push(footerData.onBranchChange(invalidateRender));
     }
@@ -1958,7 +2104,50 @@ function registerStatusLine(pi, ctx, config) {
         data: {}
       });
     };
+    const subscribeAndRequestBackgroundWork = () => {
+      const sessionId = ctx.sessionManager.getSessionId();
+      for (const off of offBackgroundWork) off();
+      orcaChildHold.startSession(sessionId);
+      let subagentPending = 0;
+      let backgroundPending = 0;
+      if (inputBoxEnabled) working.setPendingBackground(0);
+      offBackgroundWork = [
+        subscribe(pi.events, SUBAGENTS_STATE_CHANNEL, {
+          sessionId,
+          onSnapshot: ({ data }) => {
+            if (disposed) return;
+            orcaChildHold.updateSubagents(data);
+            subagentPending = data.tasks.filter(
+              (task) => task.mode === "background" && (task.status === "queued" || task.status === "running" || task.status === "stopping")
+            ).length;
+            if (inputBoxEnabled)
+              working.setPendingBackground(subagentPending + backgroundPending);
+          }
+        }),
+        subscribe(pi.events, BACKGROUND_STATE_CHANNEL, {
+          sessionId,
+          onSnapshot: ({ data }) => {
+            if (disposed) return;
+            orcaChildHold.updateBackground(data);
+            backgroundPending = data.counts.running;
+            if (inputBoxEnabled)
+              working.setPendingBackground(subagentPending + backgroundPending);
+          }
+        })
+      ];
+      for (const channel of [
+        SUBAGENTS_STATE_REQUEST,
+        BACKGROUND_STATE_REQUEST
+      ]) {
+        request(pi.events, channel, {
+          source: "@thoth-agents/pi-thoth-theme",
+          sessionId,
+          data: {}
+        });
+      }
+    };
     if (pi?.on) {
+      unsubs.push(pi.on("session_shutdown", dispose));
       unsubs.push(
         pi.on("session_start", () => {
           if (disposed) return;
@@ -1967,6 +2156,7 @@ function registerStatusLine(pi, ctx, config) {
           if (inputBoxEnabled) working.end();
           refreshSession();
           subscribeAndRequestSubagentUsage();
+          subscribeAndRequestBackgroundWork();
         })
       );
       if (inputBoxEnabled) {
@@ -1992,6 +2182,22 @@ function registerStatusLine(pi, ctx, config) {
       unsubs.push(pi.on("thinking_level_select", invalidateRender));
     }
     subscribeAndRequestSubagentUsage();
+    subscribeAndRequestBackgroundWork();
+    function dispose() {
+      if (disposed) return;
+      disposed = true;
+      working.dispose();
+      orcaChildHold.dispose();
+      for (const decoration of editorDecorations) decoration.dispose();
+      editorDecorations.clear();
+      for (const unsub of unsubs) {
+        try {
+          unsub();
+        } catch {
+        }
+      }
+      unsubs.length = 0;
+    }
     return {
       getStatusSnapshot,
       render(width) {
@@ -2025,19 +2231,7 @@ function registerStatusLine(pi, ctx, config) {
         return cachedLines;
       },
       invalidate: invalidateRender,
-      dispose() {
-        disposed = true;
-        working.dispose();
-        for (const decoration of editorDecorations) decoration.dispose();
-        editorDecorations.clear();
-        for (const unsub of unsubs) {
-          try {
-            unsub();
-          } catch {
-          }
-        }
-        unsubs.length = 0;
-      }
+      dispose
     };
   });
 }
@@ -4115,6 +4309,22 @@ function registerWelcome(pi, ctx, config, options) {
 // src/index.ts
 function thothTheme(pi) {
   const config = loadConfig();
+  pi.registerMarkdownTransformer((markdown, context) => {
+    if (context.messageType !== "user" || !markdown.trim()) return markdown;
+    if (/^╭── [\uF007●@] user ─+╮\r?\n\r?\n[\s\S]*\r?\n\r?\n╰─+╯$/.test(markdown))
+      return markdown;
+    const width = context.availableWidth;
+    const title = `\u256D\u2500\u2500 ${icon("user", config.icons)} user `;
+    const titleWidth = visibleWidth8(title);
+    if (!Number.isInteger(width) || width < titleWidth + 2) return markdown;
+    const top = `${title}${"\u2500".repeat(width - titleWidth - 1)}\u256E`;
+    const bottom = `\u2570${"\u2500".repeat(width - 2)}\u256F`;
+    return `${top}
+
+${markdown}
+
+${bottom}`;
+  });
   const owner = {};
   const cwd = process.cwd();
   const resolveToolRenderers = config.tools.enabled ? createToolRendererResolver(pi, config, cwd) : void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoth-agents/pi-thoth-theme",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Modular Thoth theme, status line, tool styling, and welcome header for Pi.",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "@earendil-works/pi-tui": "1.0.2",
     "@earendil-works/pi-ai": "1.0.2",
     "@rolldown/binding-wasm32-wasi": "^1.2.4",
-    "@thoth-agents/pi-core": "^0.3.0"
+    "@thoth-agents/pi-core": "^0.5.0"
   },
   "upstream": {
     "repository": "https://github.com/QuangThai/pi-omp-theme",