@wrongstack/tui 0.298.2 → 0.298.3

package/dist/components/sidebar-panel-frame.d.ts

@@ -1,15 +1,15 @@
 import type React from 'react';
 export interface SidebarPanelFrameProps {
-    /** Accent color for border + title (mirrors `theme.monitor.*` on bottom panels). */
+    /** Accent color for the rail, title, and separator. */
     accent: string;
     /** Header glyph, e.g. `glyphs.fleet` or `glyphs.sessions`. */
     icon: string;
     /** Uppercase title (e.g. "FLEET", "PLAN", "AGENTS"). */
     title: string;
     /**
-     * Width allocated to this panel frame, including the frame's own border and
-     * padding. When nested in RightSidebar, pass that shell's content width —
-     * not the outer sidebar width — so both chrome layers remain in bounds.
+     * Width allocated to this routed panel inside RightSidebar. The outer shell
+     * owns the border and padding; this frame spends the full content width on
+     * hierarchy and data.
      */
     width: number;
     /** Optional quiet subtitle hidden on narrow terminals. */
@@ -18,14 +18,8 @@ export interface SidebarPanelFrameProps {
     right?: React.ReactNode | undefined;
     /** Footer content (key hints, footer note). Renders under the body. */
     footer?: React.ReactNode | undefined;
-    /** Body content. Renders inside the scrollable region. */
+    /** Body content. The outer RightSidebar owns viewport clipping. */
     children?: React.ReactNode | undefined;
-    /**
-     * Body scroll offset (in rows). When the body exceeds the visible window,
-     * older rows are clipped from the top and a "↑ N earlier" marker is shown.
-     * Pass `0` when no scrolling is needed (single panel fits in viewport).
-     */
-    bodyScrollOffset?: number | undefined;
 }
 /**
  * Truncate a string to fit within `max` display columns, adding an ellipsis.
@@ -47,8 +41,9 @@ export declare function SidebarSectionHeader({ glyph, label, color, badge, badge
     badgeColor?: string | undefined;
     innerWidth: number;
 }): React.ReactElement;
-/** A raised "card" wrapper. On truecolor terminals it gets a subtle lifted
- *  surface so sections read as stacked panels; otherwise it is a plain box. */
+/** A raised content band sized for a narrow rail. Section headers provide the
+ * accent, while the lifted surface groups related data without spending any
+ * horizontal columns on nested chrome. */
 export declare function SidebarPanelCard({ innerWidth, marginBottom, children, }: {
     innerWidth: number;
     marginBottom?: number | undefined;
@@ -56,17 +51,12 @@ export declare function SidebarPanelCard({ innerWidth, marginBottom, children, }
 }): React.ReactElement;
 /**
  * SidebarPanelFrame — the standard chrome wrapper used by every sidebar
- * panel variant. Renders a round border in the panel's accent color with a
- * glyph + title header, optional kicker + right-aligned badge, a scrollable
- * body region, and an optional footer.
- *
- * Scrolling: the body itself doesn't scroll. The host (app-view / SidebarContent)
- * computes scroll offsets from the focused panel index. We accept a
- * `bodyScrollOffset` and a fixed body height so panels that exceed their
- * viewport can be paged with Shift+Tab + ↑↓ while focused. When the body
- * scrolls, a "↑ N earlier" indicator is shown at the top of the body region.
+ * panel variant. It renders an accent-led title and telemetry strip inside the
+ * existing RightSidebar shell, followed by a natural-height body and optional
+ * footer. Avoiding a second border preserves scarce horizontal space; the
+ * outer shell clips the combined routed-panel and persistent-content stack.
  */
-export declare function SidebarPanelFrame({ accent, icon, title, width, kicker, right, footer, children, bodyScrollOffset, }: SidebarPanelFrameProps): React.ReactElement;
+export declare function SidebarPanelFrame({ accent, icon, title, width, kicker, right, footer, children, }: SidebarPanelFrameProps): React.ReactElement;
 /**
  * useSidebarPanelSize — returns a sensible default width / height for a
  * sidebar panel given the terminal dimensions. Width mirrors

package/dist/index.js

@@ -35419,9 +35419,7 @@ function SidebarContent({
 import { useEffect as useEffect68, useState as useState41 } from "react";
 import { jsx as jsx76, jsxs as jsxs73 } from "react/jsx-runtime";
 function trunc3(s2, max) {
-  if (max <= 0) return "";
-  if (s2.length <= max) return s2;
-  return `${s2.slice(0, Math.max(1, max - 1))}\u2026`;
+  return truncateDisplay(s2, max);
 }
 function SidebarSectionHeader({
   glyph: glyph2,
@@ -35469,46 +35467,24 @@ function SidebarPanelFrame({
   kicker,
   right,
   footer,
-  children,
-  bodyScrollOffset = 0
+  children
 }) {
-  const innerWidth = Math.max(8, width - 4);
-  const { stdout } = useStdout();
-  const sidebarHeight = Math.max(1, (stdout?.rows ?? 32) - 2);
-  const bodyHeight = Math.max(1, sidebarHeight - 4);
-  return /* @__PURE__ */ jsxs73(
-    Box,
-    {
-      flexDirection: "column",
-      width,
-      height: sidebarHeight,
-      overflowY: "hidden",
-      borderStyle: "round",
-      borderColor: accent,
-      paddingX: 1,
-      flexShrink: 0,
-      children: [
-        /* @__PURE__ */ jsx76(Box, { height: 1, children: /* @__PURE__ */ jsx76(Text, { color: accent, bold: true, wrap: "truncate", children: trunc3(`${icon} ${title}${kicker ? ` / ${kicker}` : ""}`, innerWidth) }) }),
-        right ? /* @__PURE__ */ jsx76(Box, { height: 1, children: /* @__PURE__ */ jsx76(Text, { wrap: "truncate", children: right }) }) : null,
-        /* @__PURE__ */ jsxs73(Box, { flexDirection: "column", height: bodyHeight, overflowY: "hidden", flexShrink: 0, children: [
-          bodyScrollOffset > 0 ? /* @__PURE__ */ jsx76(Box, { children: /* @__PURE__ */ jsxs73(Text, { color: theme.textMuted, dimColor: true, children: [
-            "\u2191 ",
-            bodyScrollOffset,
-            " earlier"
-          ] }) }) : null,
-          /* @__PURE__ */ jsx76(
-            Box,
-            {
-              flexDirection: "column",
-              ...bodyScrollOffset > 0 ? { marginTop: -bodyScrollOffset } : {},
-              children
-            }
-          )
-        ] }),
-        footer ? /* @__PURE__ */ jsx76(Box, { height: 1, marginTop: 1, children: /* @__PURE__ */ jsx76(Text, { wrap: "truncate", dimColor: true, children: footer }) }) : null
-      ]
-    }
-  );
+  const innerWidth = Math.max(8, width);
+  const showKicker = !!kicker && innerWidth >= 24;
+  return /* @__PURE__ */ jsxs73(Box, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs73(Box, { height: 1, width: innerWidth, children: [
+      /* @__PURE__ */ jsx76(Text, { color: accent, bold: true, children: "\u258C" }),
+      /* @__PURE__ */ jsx76(Text, { color: accent, bold: true, wrap: "truncate", children: trunc3(` ${icon} ${title}`, Math.max(1, innerWidth - 1)) })
+    ] }),
+    showKicker || right ? /* @__PURE__ */ jsxs73(Box, { height: 1, width: innerWidth, children: [
+      showKicker ? /* @__PURE__ */ jsx76(Text, { color: theme.textMuted, dimColor: true, wrap: "truncate", children: trunc3(kicker, Math.max(1, right ? Math.floor(innerWidth * 0.55) : innerWidth)) }) : null,
+      /* @__PURE__ */ jsx76(Box, { flexGrow: 1 }),
+      right ? /* @__PURE__ */ jsx76(Text, { wrap: "truncate", children: right }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx76(Text, { color: accent, wrap: "truncate", children: "\u2500".repeat(innerWidth) }),
+    /* @__PURE__ */ jsx76(Box, { flexDirection: "column", children }),
+    footer ? /* @__PURE__ */ jsx76(Box, { height: 1, marginTop: 1, children: /* @__PURE__ */ jsx76(Text, { wrap: "truncate", dimColor: true, children: footer }) }) : null
+  ] });
 }
 
 // src/components/sidebar-panels.tsx
@@ -35575,7 +35551,7 @@ function ProjectPickerSidebar({
   currentProject,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const projectCount = items.filter((item) => item.kind === "project").length;
   const selectableCount = items.filter((item) => item.key !== "__divider__").length;
   const start = Math.max(0, Math.min(selected - 2, Math.max(0, items.length - 5)));
@@ -35656,7 +35632,7 @@ function FleetPanelSidebar({
   runningCount,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const all = Object.values(entries);
   const leader = all.find((e) => e.id === "leader");
   const subagents = all.filter((e) => e !== leader && e.status === "running");
@@ -35690,7 +35666,7 @@ function AgentsPanelSidebar({
   nowTick,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const all = Object.values(entries);
   const running = all.filter((e) => e.status === "running");
   const done = all.filter((e) => e.status === "success");
@@ -35727,13 +35703,10 @@ function AgentsPanelSidebar({
             }
           ),
           /* @__PURE__ */ jsx77(Text, { color: theme.textPrimary, wrap: "truncate", bold: true, children: trunc3(hotAgent.name || hotAgent.id, inner - 4) }),
-          /* @__PURE__ */ jsxs74(Text, { color: theme.textMuted, children: [
-            "ctx ",
-            Math.round((hotAgent.ctxPct ?? 0) * 100),
-            "% \xB7",
-            " ",
-            hotAgent.currentTool?.name ?? "idle"
-          ] })
+          /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, wrap: "truncate", children: trunc3(
+            `ctx ${Math.round((hotAgent.ctxPct ?? 0) * 100)}% \xB7 ${hotAgent.currentTool?.name ?? "idle"}`,
+            inner
+          ) })
         ] }) : /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, children: "no live agents" }) }),
         /* @__PURE__ */ jsxs74(SidebarPanelCard, { innerWidth: inner, marginBottom: 0, children: [
           /* @__PURE__ */ jsx77(
@@ -35767,7 +35740,7 @@ function AgentsPanelSidebar({
 function worktreeStatusVisual(status) {
   switch (status) {
     case "active":
-      return { glyph: "\u25CF", color: theme.warn };
+      return { glyph: "\u2022", color: theme.warn };
     case "committing":
       return { glyph: "\u25D0", color: theme.accent };
     case "merging":
@@ -35786,7 +35759,7 @@ function WorktreePanelSidebar({
   worktrees,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const list = Object.values(worktrees);
   const active = list.filter(
     (w) => w.status === "active" || w.status === "committing" || w.status === "merging"
@@ -35803,18 +35776,18 @@ function WorktreePanelSidebar({
       kicker: "isolation",
       right: /* @__PURE__ */ jsxs74(Text, { children: [
         /* @__PURE__ */ jsxs74(Text, { color: theme.warn, children: [
-          "\u25B6",
+          "A",
           active
         ] }),
         /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, children: " " }),
         /* @__PURE__ */ jsxs74(Text, { color: theme.success, children: [
-          glyphs.success,
+          "D",
           merged
         ] }),
         failed > 0 ? /* @__PURE__ */ jsxs74(Fragment27, { children: [
           /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, children: " " }),
           /* @__PURE__ */ jsxs74(Text, { color: theme.error, children: [
-            "\u2717",
+            "!",
             failed
           ] })
         ] }) : null
@@ -35822,18 +35795,22 @@ function WorktreePanelSidebar({
       footer: "F4 details",
       children: /* @__PURE__ */ jsx77(SidebarPanelCard, { innerWidth: inner, marginBottom: 0, children: list.length === 0 ? /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, children: "no worktrees" }) : list.slice(0, 10).map((w) => {
         const v = worktreeStatusVisual(w.status);
-        const branch = trunc3(w.branch.replace(/^wstack\/ap\//, ""), inner - 16);
+        const diff = `+${w.insertions}/-${w.deletions}`;
+        const showDiff = inner >= 24;
+        const rowChrome = displayWidth(v.glyph) + 1;
+        const diffWidth = showDiff ? displayWidth(diff) + 1 : 0;
+        const branch = trunc3(
+          w.branch.replace(/^wstack\/ap\//, ""),
+          Math.max(4, inner - rowChrome - diffWidth)
+        );
         return /* @__PURE__ */ jsxs74(Box, { flexDirection: "row", children: [
           /* @__PURE__ */ jsx77(Text, { color: v.color, children: v.glyph }),
           /* @__PURE__ */ jsx77(Text, { color: theme.textPrimary, children: " " }),
           /* @__PURE__ */ jsx77(Text, { wrap: "truncate", children: branch }),
-          /* @__PURE__ */ jsx77(Box, { flexGrow: 1 }),
-          /* @__PURE__ */ jsxs74(Text, { color: theme.textMuted, children: [
-            "+",
-            w.insertions,
-            "/-",
-            w.deletions
-          ] })
+          showDiff ? /* @__PURE__ */ jsxs74(Fragment27, { children: [
+            /* @__PURE__ */ jsx77(Box, { flexGrow: 1 }),
+            /* @__PURE__ */ jsx77(Text, { color: theme.textMuted, children: diff })
+          ] }) : null
         ] }, w.branch);
       }) })
     }
@@ -35847,7 +35824,7 @@ function PlanPanelSidebar({
   title,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const total = openCount + inProgressCount + doneCount;
   const ratio = total > 0 ? doneCount / total : 0;
   const ordered = [
@@ -35893,8 +35870,8 @@ function PlanPanelSidebar({
             }
           ),
           /* @__PURE__ */ jsxs74(Box, { children: [
-            /* @__PURE__ */ jsx77(Text, { color: ratio === 1 && total > 0 ? theme.success : theme.accent, children: "\u2588".repeat(Math.round(ratio * (inner - 4))) }),
-            /* @__PURE__ */ jsx77(Text, { color: theme.borderSubtle, children: "\u2591".repeat(Math.max(0, inner - 4 - Math.round(ratio * (inner - 4)))) })
+            /* @__PURE__ */ jsx77(Text, { color: ratio === 1 && total > 0 ? theme.success : theme.accent, children: "\u2588".repeat(Math.round(ratio * inner)) }),
+            /* @__PURE__ */ jsx77(Text, { color: theme.borderSubtle, children: "\u2591".repeat(Math.max(0, inner - Math.round(ratio * inner))) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs74(SidebarPanelCard, { innerWidth: inner, marginBottom: 0, children: [
@@ -35932,7 +35909,7 @@ function PlanPanelSidebar({
   );
 }
 function TodosPanelSidebar({ todos, width }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const ordered = [...todos].sort((a, b) => {
     const rank = (t) => t.status === "in_progress" ? 0 : t.status === "pending" ? 1 : 2;
     return rank(a) - rank(b);
@@ -35977,7 +35954,7 @@ function TodosPanelSidebar({ todos, width }) {
   );
 }
 function QueuePanelSidebar({ items, width }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   return /* @__PURE__ */ jsx77(
     SidebarPanelFrame,
     {
@@ -36014,7 +35991,7 @@ function ProcessListPanelSidebar({
   processes,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   return /* @__PURE__ */ jsx77(
     SidebarPanelFrame,
     {
@@ -36046,7 +36023,7 @@ function GoalPanelSidebar({
   coordinatorRunning,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const displayGoal = goal ? goal.refinedGoal || goal.goal : "";
   const stateIcon = goal?.goalState === "active" ? "\u{1F504}" : goal?.goalState === "paused" ? "\u23F8" : goal?.goalState === "completed" ? "\u2705" : "\u23F9";
   const progress = typeof goal?.progress === "number" ? goal.progress : 0;
@@ -36091,8 +36068,8 @@ function GoalPanelSidebar({
             }
           ),
           /* @__PURE__ */ jsxs74(Box, { children: [
-            /* @__PURE__ */ jsx77(Text, { color: theme.success, children: "\u2588".repeat(Math.round(progress / 100 * (inner - 4))) }),
-            /* @__PURE__ */ jsx77(Text, { color: theme.borderSubtle, children: "\u2591".repeat(Math.max(0, inner - 4 - Math.round(progress / 100 * (inner - 4)))) })
+            /* @__PURE__ */ jsx77(Text, { color: theme.success, children: "\u2588".repeat(Math.round(progress / 100 * inner)) }),
+            /* @__PURE__ */ jsx77(Text, { color: theme.borderSubtle, children: "\u2591".repeat(Math.max(0, inner - Math.round(progress / 100 * inner))) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs74(SidebarPanelCard, { innerWidth: inner, marginBottom: 0, children: [
@@ -36134,7 +36111,7 @@ function SessionsPanelSidebar({
   currentSessionId,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const live = liveSessions?.slice(0, 3) ?? [];
   const resume = resumeSessions?.slice(0, 3) ?? [];
   const total = (liveSessions?.length ?? 0) + (resumeSessions?.length ?? 0);
@@ -36226,7 +36203,7 @@ function CoordinatorPanelSidebar({
   elapsedMs,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   return /* @__PURE__ */ jsxs74(
     SidebarPanelFrame,
     {
@@ -36271,7 +36248,7 @@ function KanbanPanelSidebar({
   activeCardTitles,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   return /* @__PURE__ */ jsxs74(
     SidebarPanelFrame,
     {
@@ -36334,7 +36311,7 @@ function ConnectionsPanelSidebar({
   connections,
   width
 }) {
-  const inner = Math.max(8, width - 4);
+  const inner = Math.max(8, width);
   const okCount = connections.filter((c) => c.status === "ok").length;
   const warnCount = connections.filter((c) => c.status === "warn").length;
   const downCount = connections.filter((c) => c.status === "down").length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrongstack/tui",
-  "version": "0.298.2",
+  "version": "0.298.3",
   "license": "MIT",
   "description": "WrongStack terminal UI: Ink-based interactive renderer with history, pickers, and slash menus.",
   "repository": {
@@ -28,12 +28,12 @@
   "dependencies": {
     "ink": "7.1.1",
     "react": "^19.2.8",
-    "@wrongstack/kanban": "0.298.2",
-    "@wrongstack/core": "0.298.2",
-    "@wrongstack/tools": "0.298.2",
-    "@wrongstack/runtime": "0.298.2",
-    "@wrongstack/sage": "0.298.2",
-    "@wrongstack/sdd": "0.298.2"
+    "@wrongstack/core": "0.298.3",
+    "@wrongstack/tools": "0.298.3",
+    "@wrongstack/kanban": "0.298.3",
+    "@wrongstack/runtime": "0.298.3",
+    "@wrongstack/sdd": "0.298.3",
+    "@wrongstack/sage": "0.298.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",