@wrongstack/tui 0.308.0 → 0.308.2

package/dist/app-view-sidebar.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { AppViewProps } from './app-view-contract.js';
-import type { PanelId } from './ui-contracts.js';
-import type { useSidebarConnections, useSidebarKanban, useSidebarProcessList } from './hooks/use-sidebar-panel-data.js';
 import type { usePlanPanelData } from './components/plan-panel.js';
+import type { useSidebarConnections, useSidebarKanban, useSidebarProcessList } from './hooks/use-sidebar-panel-data.js';
+import type { PanelId } from './ui-contracts.js';
 export interface AppViewSidebarProps {
     host: AppViewProps['host'];
     runtime: AppViewProps['runtime'];

package/dist/components/history/tool-entry.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { HistoryEntry } from './types.js';
 export declare function ToolEntry({ entry, termWidth, multiDiffSummaryThreshold, showSageMemoryInject, }: {
     entry: Extract<HistoryEntry, {

package/dist/components/sidebar-card.d.ts

@@ -0,0 +1,34 @@
+import type React from 'react';
+export interface CardProps {
+    /** Outer content width in cols (already inside the parent frame's
+     *  border + padding — i.e. the available width the card must fill). */
+    innerWidth: number;
+    /** Optional bottom margin (defaults to 0). Persistent cards chain with
+     *  no margin; the F-twin frame usually adds its own spacing. */
+    marginBottom?: number | undefined;
+    /** Optional accent color for the top + bottom cap hairlines. When set,
+     *  paints the frame in the panel's state color (green = healthy,
+     *  red = alerting, etc.). */
+    accent?: string | undefined;
+    /** Draw the top + bottom hairline around the card body. When false, the
+     *  Card renders only the body (no corners, no bottom rule) so it can be
+     *  nested inside an outer frame without double-chroming. The F-twin
+     *  SidebarPanelFrame uses this for the title row. */
+    capped?: boolean | undefined;
+    /**
+     * Render-prop body. The Card walks the returned tree, flattens Fragments +
+     * column Boxes, and wraps every top-level child in a `│ ... │` row so the
+     * frame stays intact on every body line. `bodyWidth` is the inner content
+     * width (already accounting for side bars + padding) so callers don't
+     * have to recompute it.
+     */
+    children: (bodyWidth: number) => React.ReactNode;
+}
+/**
+ * A raised "card" wrapper for the persistent sidebar content. The accent
+ * top edge and hairlines stay at the card's full width to visually "frame"
+ * it; the body content is inset by 1 column on each side so text never
+ * touches the colored surface directly.
+ */
+export declare function Card({ innerWidth, marginBottom, accent, capped, children, }: CardProps): React.ReactElement;
+//# sourceMappingURL=sidebar-card.d.ts.map

package/dist/components/sidebar-content.d.ts

@@ -5,6 +5,7 @@ import type React from 'react';
 import type { ResumeSessionEntry } from '../app-state.js';
 import type { FleetEntry } from '../app-state-fleet.js';
 import type { HeapSample } from '../heap-watchdog.js';
+import type { PanelId } from '../ui-contracts.js';
 import type { LiveSessionEntry } from './sessions-panel.js';
 export interface SidebarContentProps {
     /** Live context window data from useStatusbarViewModel. */
@@ -72,6 +73,17 @@ export interface SidebarContentProps {
     heapHistory?: readonly number[] | undefined;
     /** Total physical RAM in bytes — denominator of the RAM ratio. */
     totalMem?: number | undefined;
+    /**
+     * Set of F-key panels that are routed to the sidebar AND win a slot
+     * under `SIDEBAR_PANEL_LIMIT` this render. The persistent AGENT SWARM /
+     * MISSIONS / SESSIONS cards check this set and skip themselves when the
+     * corresponding F twin is already mounted above — otherwise the user
+     * would see the same data rendered twice (once as a routed twin, once
+     * as a persistent card). The F twin wins because it has its own Card
+     * chrome and richer header / status affordances; the persistent card
+     * is the fallback when the twin is at the bottom (F-key default).
+     */
+    effectiveSidebarRoutes?: ReadonlySet<PanelId> | undefined;
 }
 /**
  * Normalized "is this session row the current session?" predicate used by
@@ -89,6 +101,23 @@ export interface SidebarContentProps {
  * single source of truth.
  */
 export declare function isCurrentSession(rowId: string | undefined, currentSessionId: string | undefined, fallbackIsCurrent?: boolean | undefined): boolean;
+/**
+ * (Replaced by `SidebarSectionHeader` in `./sidebar-panel-frame.tsx`.)
+ * Kept here as a doc-comment so anyone hunting for "the sidebar's section
+ * header" lands on the right file. The local `SectionHeader` symbol was
+ * promoted to the shared `sidebar-panel-frame.tsx` so routed panels and
+ * persistent content cards use the same capsuled-pill component.
+ */
+/**
+ * The `Card` component now lives in `./sidebar-card.tsx` as the shared
+ * raised-surface iskelet used by both the persistent cards (this file) and
+ * the routed F-key panel twins (`sidebar-panel-frame.tsx` +
+ * `sidebar-panels-{workspace,task}.tsx`). Imported at the top of this file
+ * for the `MODEL CORE`, `PROMPT CACHE`, `SYSTEM`, `AGENT SWARM`, `MISSIONS`,
+ * `SESSIONS`, and `TOOL TICKER` cards — the migration keeps the persistent
+ * call sites identical because the shared component preserves the same
+ * `innerWidth` / `marginBottom` / `accent` / `children` contract.
+ */
 interface ContextSegment {
     label: string;
     shortLabel: string;
@@ -102,6 +131,6 @@ export declare function contextSpectrum(breakdown: ContextBreakdown | undefined,
 } | undefined, width: number): Array<ContextSegment & {
     cells: number;
 }>;
-export declare function SidebarContent({ contextWindow, contextBreakdown, cacheStats, cacheCoverageTokens, entries, fleetCounts, provider, model, width, scrollOffset, focused, todos, showSwarmSection, liveSessions, resumeSessions, currentSessionId, processMemory, cpuPercent, cpuHistory, rssHistory, heapHistory, totalMem, }: SidebarContentProps): React.ReactElement;
+export declare function SidebarContent({ contextWindow, contextBreakdown, cacheStats, cacheCoverageTokens, entries, fleetCounts, provider, model, width, scrollOffset, focused, todos, showSwarmSection, liveSessions, resumeSessions, currentSessionId, processMemory, cpuPercent, cpuHistory, rssHistory, heapHistory, totalMem, effectiveSidebarRoutes, }: SidebarContentProps): React.ReactElement;
 export {};
 //# sourceMappingURL=sidebar-content.d.ts.map

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

@@ -1,4 +1,5 @@
-import type React from 'react';
+import React from 'react';
+import { type CardProps } from './sidebar-card.js';
 export interface SidebarPanelFrameProps {
     /** Accent color for the rail, title, and separator. */
     accent: string;
@@ -14,12 +15,28 @@ export interface SidebarPanelFrameProps {
     width: number;
     /** Optional quiet subtitle hidden on narrow terminals. */
     kicker?: string | undefined;
-    /** Optional right-aligned header content (status badge, counts, etc.). */
+    /** Optional right-aligned header content (status badge, counts, etc.).
+     *  Wrapped automatically in a pill chrome if `pillStatus` is supplied. */
     right?: React.ReactNode | undefined;
+    /**
+     * When provided, the right-side header content is rendered through
+     * `SidebarStatusPill` with the given color and label. Existing
+     * `right={<Text>...</Text>}` callers still work; pass `pillLabel`+`pillColor`
+     * for the new look without rewriting every call site.
+     */
+    pillLabel?: string | undefined;
+    pillColor?: string | undefined;
     /** Footer content (key hints, footer note). Renders under the body. */
     footer?: React.ReactNode | undefined;
-    /** Body content. The outer RightSidebar owns viewport clipping. */
-    children?: React.ReactNode | undefined;
+    /**
+     * Body content. Pass a function to receive the Card's *body content width*
+     * (the inset width after the Card's optional `│` sides and body padding,
+     * not the outer card width). This mirrors the `Card` render prop and lets
+     * `SidebarSectionHeader` / `SidebarStatRow` / `SidebarWorklistRow` size
+     * their dotted leaders and metric columns to the actual available width
+     * instead of over-shooting into the Card's side bars.
+     */
+    children?: React.ReactNode | ((bodyWidth: number) => React.ReactNode) | undefined;
 }
 /**
  * Truncate a string to fit within `max` display columns, adding an ellipsis.
@@ -27,36 +44,103 @@ export interface SidebarPanelFrameProps {
  * helper without pulling in sidebar-content.tsx's full implementation.
  */
 export declare function trunc(s: string, max: number): string;
+/**
+ * A "capsuled" status pill, e.g. `⟦ live 12 ⟧`. Used in panel headers
+ * (right side) and stat rows. Renders inline — no Box, no flex — so it can
+ * sit next to a label without burning a row of its own.
+ */
+export declare function SidebarStatusPill({ label, color, outlined, }: {
+    label: string;
+    color: string;
+    /** When true, render the brackets in muted color so the inner label
+     *  reads as the main signal — useful in dense stat rows. */
+    outlined?: boolean | undefined;
+}): React.ReactElement;
+/**
+ * A label : value row, sized for narrow rails. Reserves the first column
+ * for an optional accent rail so a stat block reads as a single column of
+ * cohesive data rather than a stack of loose Text nodes. The separator is
+ * a flexible dot-leader so the value always lands at the right edge.
+ */
+export declare function SidebarStatRow({ label, value, color, accent, innerWidth, valueMuted, }: {
+    label: string;
+    value: string;
+    color?: string | undefined;
+    /** Optional accent rail. When set, a 1-col rail glyph is drawn at the
+     *  start of the row in this color so a block of rows reads as a "tag". */
+    accent?: string | undefined;
+    innerWidth: number;
+    valueMuted?: boolean | undefined;
+}): React.ReactElement;
+/**
+ * A subtle horizontal divider with an optional centered diamond ornament.
+ * Width-aware: on very narrow rails the diamond is dropped so the rule
+ * never overflows the column.
+ */
+export declare function SidebarDivider({ innerWidth, ornament, color, }: {
+    innerWidth: number;
+    /** When set, draws `ornament` centered on the rule. */
+    ornament?: string | undefined;
+    color?: string | undefined;
+}): React.ReactElement;
 /**
  * A section header: colored glyph + bold uppercase label, a dotted leader
  * filling the remaining width, and an optional right-aligned badge. Always
  * renders exactly one row of exactly `innerWidth` columns — the badge is
  * dropped gracefully when there is no room (narrow terminals).
+ *
+ * Modernized (v2):
+ *   * The glyph sits inside a 1-col "node" rail (▎) so it reads as a
+ *     visual anchor and never collides with the leading bold label.
+ *   * The badge is rendered through `SidebarStatusPill` (when `pill` is
+ *     true) so it picks up the capsuled ⟦ ⟧ treatment.
+ *   * The leader uses a real dotted leader (·) instead of a thin rule
+ *     (╌) which renders inconsistently across terminal emulators.
  */
-export declare function SidebarSectionHeader({ glyph, label, color, badge, badgeColor, innerWidth, }: {
+export declare function SidebarSectionHeader({ glyph, label, color, badge, badgeColor, innerWidth, pill, badgeMuted, }: {
     glyph: string;
     label: string;
     color: string;
     badge?: string | undefined;
     badgeColor?: string | undefined;
     innerWidth: number;
+    /** Render the badge as a capsuled pill instead of a bare token. */
+    pill?: boolean | undefined;
+    /** When true, color the badge in muted text instead of accent. Useful
+     *  for "no data yet" empty-state badges. */
+    badgeMuted?: boolean | undefined;
 }): React.ReactElement;
-/** 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;
-    children: React.ReactNode;
-}): React.ReactElement;
+/**
+ * A thin wrapper around the shared `Card` iskelet from
+ * `./sidebar-card.tsx`. Preserved as a public export so existing test
+ * fixtures and direct callers (e.g. `card-frame-integrity.test.tsx`) keep
+ * working without changes. The new shared `Card` carries an extra `capped`
+ * flag (defaulting to `true` for the legacy semantic of always drawing
+ * the top + bottom cap); routed F-twin callers that want a hairline
+ * divider instead of a corner frame should use the shared `Card` directly
+ * with `capped={false}`.
+ */
+export declare function SidebarPanelCard(props: CardProps): React.ReactElement;
 /**
  * SidebarPanelFrame — the standard chrome wrapper used by every sidebar
- * 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.
+ * panel variant. It composes a title row + optional status row + optional
+ * kicker + body on top of the shared `Card` iskelet from
+ * `./sidebar-card.tsx` (the same family the persistent MODEL CORE /
+ * PROMPT CACHE / SYSTEM / AGENT SWARM / MISSIONS / SESSIONS cards use),
+ * followed by an optional footer rendered below the card. The outer
+ * RightSidebar still owns the border + padding + viewport clipping so
+ * the routed frame's corners sit flush with the persistent cards down
+ * the rail.
+ *
+ * v3: the chrome is delegated to the shared `Card` so the routed F twins
+ * and the persistent cards read as one family at a glance. The previous
+ * hand-rolled "borderless" title chrome is gone — the Card corners are
+ * the only top/bottom rule. The `▎` rail at the title row's left edge is
+ * preserved as the panel's accent signal (matching the persistent cards'
+ * stage banner style), and the `│` sides from the Card body supply the
+ * "framed" look on rails wide enough to afford them.
  */
-export declare function SidebarPanelFrame({ accent, icon, title, width, kicker, right, footer, children, }: SidebarPanelFrameProps): React.ReactElement;
+export declare function SidebarPanelFrame({ accent, icon, title, width, kicker, right, pillLabel, pillColor, footer, children, }: SidebarPanelFrameProps): React.ReactElement;
 /**
  * useSidebarPanelSize — returns a sensible default width / height for a
  * sidebar panel given the terminal dimensions. Width mirrors

package/dist/components/sidebar-panels-shared.d.ts

@@ -8,6 +8,28 @@ export declare function liveSessionGlyph(status: string): string;
 export declare function liveSessionColor(status: string): string;
 export declare function fmtRelative(iso: string | undefined, now?: number): string;
 export declare function fmtShortDuration(ms: number): string;
+/**
+ * Shared "empty state" row used by every routed F-twin sidebar panel and the
+ * persistent cards. Replaces the patchwork of `◇ scanning for links…`,
+ * `{glyphs.dividerDot} no X`, etc. with one consistent look:
+ *
+ *     · no sessions
+ *
+ * The leading `·` (dividerDot) is the muted accent, the message is in
+ * `theme.textMuted`, and the row honors the rail's body width. Callers
+ * only supply the noun (and an optional active-verb form for "scanning"
+ * style progress states). Keep the language lower-case to read as a
+ * quiet signal rather than a banner.
+ */
+export declare function EmptyState({ message, innerWidth, variant, }: {
+    message: string;
+    innerWidth: number;
+    /** `idle` is the standard "no X" / "no data yet" hint. `scanning` is
+     *  for live-discovery states (e.g. probing connections) where the dot
+     *  pulses in the accent color so a glance down the rail reads as
+     *  "actively working". */
+    variant?: 'idle' | 'scanning' | undefined;
+}): React.ReactElement;
 export declare function SidebarWorklistRow({ icon, iconColor, label, labelColor, innerWidth, dim, strikethrough, }: {
     icon: string;
     iconColor: string;

package/dist/components/sidebar-panels-workspace.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { FleetEntry } from '../app-state.js';
-import type { WorktreeRow } from '../ui-contracts.js';
+import { type WorktreeRow } from '../ui-contracts.js';
 import type { ProjectPickerItem } from './project-picker.js';
 export interface ProjectPickerSidebarProps {
     items: readonly ProjectPickerItem[];

package/dist/components/sidebar-panels.d.ts

@@ -1,4 +1,4 @@
-export { fleetStatusVisual, fmtRelative, fmtShortDuration, liveSessionColor, liveSessionGlyph, SidebarWorklistRow, } from './sidebar-panels-shared.js';
-export { type AgentsPanelSidebarProps, AgentsPanelSidebar, type ConnectionsPanelSidebarProps, ConnectionsPanelSidebar, type CoordinatorPanelSidebarProps, CoordinatorPanelSidebar, type FleetPanelSidebarProps, FleetPanelSidebar, type ProjectPickerSidebarProps, ProjectPickerSidebar, type WorktreePanelSidebarProps, WorktreePanelSidebar, } from './sidebar-panels-workspace.js';
-export { type GoalPanelSidebarProps, GoalPanelSidebar, type KanbanPanelSidebarProps, KanbanPanelSidebar, type PlanPanelSidebarProps, PlanPanelSidebar, type ProcessListPanelSidebarProps, ProcessListPanelSidebar, type QueuePanelSidebarProps, QueuePanelSidebar, type SessionsPanelSidebarProps, SessionsPanelSidebar, type TodosPanelSidebarProps, TodosPanelSidebar, } from './sidebar-panels-task.js';
+export { EmptyState, fleetStatusVisual, fmtRelative, fmtShortDuration, liveSessionColor, liveSessionGlyph, SidebarWorklistRow, } from './sidebar-panels-shared.js';
+export { GoalPanelSidebar, type GoalPanelSidebarProps, KanbanPanelSidebar, type KanbanPanelSidebarProps, PlanPanelSidebar, type PlanPanelSidebarProps, ProcessListPanelSidebar, type ProcessListPanelSidebarProps, QueuePanelSidebar, type QueuePanelSidebarProps, SessionsPanelSidebar, type SessionsPanelSidebarProps, TodosPanelSidebar, type TodosPanelSidebarProps, } from './sidebar-panels-task.js';
+export { AgentsPanelSidebar, type AgentsPanelSidebarProps, ConnectionsPanelSidebar, type ConnectionsPanelSidebarProps, CoordinatorPanelSidebar, type CoordinatorPanelSidebarProps, FleetPanelSidebar, type FleetPanelSidebarProps, ProjectPickerSidebar, type ProjectPickerSidebarProps, WorktreePanelSidebar, type WorktreePanelSidebarProps, } from './sidebar-panels-workspace.js';
 //# sourceMappingURL=sidebar-panels.d.ts.map

package/dist/components/sidebar.d.ts

@@ -45,5 +45,5 @@ export interface RightSidebarProps {
      */
     children?: React.ReactNode | undefined;
 }
-export declare function RightSidebar({ width, maxHeight, focused, children }: RightSidebarProps): React.ReactElement | null;
+export declare function RightSidebar({ width, maxHeight, focused, children, }: RightSidebarProps): React.ReactElement | null;
 //# sourceMappingURL=sidebar.d.ts.map