@opencode-cockpit/shell 0.2.2 → 0.3.1

package/dist/tui/components/badge.js

@@ -5,25 +5,45 @@ import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
-import { badgeText, kindColor, kindOf } from "../lib/view.js";
+import { BADGE_RULE, badgeText, kindColor, kindOf } from "../lib/view.js";
 
-/** Status pill: label on a coloured background, readable in any font and colour scheme. */
+/**
+ * Status mark: a coloured rule and its label.
+ *
+ * Not a filled pill. A block of colour has to be as wide as the word inside it, and a list of
+ * them reads as a wall of colour rather than as a list of shells; the rule carries the same
+ * meaning in one column.
+ */
 export function Badge(props) {
   const theme = () => props.api.theme.current;
   const kind = () => kindOf(props.shell);
+  const colour = () => kindColor(theme(), kind());
   return (() => {
     var _el$ = _$createElement("text"),
       _el$2 = _$createElement("span"),
-      _el$3 = _$createElement("b");
+      _el$3 = _$createElement("span"),
+      _el$4 = _$createElement("b");
     _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$3);
     _$setProp(_el$, "flexShrink", 0);
     _$setProp(_el$, "wrapMode", "none");
-    _$insertNode(_el$2, _el$3);
-    _$insert(_el$3, () => badgeText(kind(), props.frame));
-    _$effect(_$p => _$setProp(_el$2, "style", {
-      fg: theme().background,
-      bg: kindColor(theme(), kind())
-    }, _$p));
+    _$insert(_el$2, BADGE_RULE);
+    _$insertNode(_el$3, _el$4);
+    _$insert(_el$4, () => badgeText(kind(), props.frame).slice(BADGE_RULE.length));
+    _$effect(_p$ => {
+      var _v$ = {
+          fg: colour()
+        },
+        _v$2 = {
+          fg: colour()
+        };
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "style", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$3, "style", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 }

package/dist/tui/components/sidebar.js

@@ -39,6 +39,7 @@ export function SidebarShells(props) {
       _$insertNode(_el$2, _el$3);
       _$insertNode(_el$2, _el$5);
       _$setProp(_el$2, "wrapMode", "none");
+      _$setProp(_el$2, "marginBottom", 1);
       _$insertNode(_el$3, _$createTextNode(`Shells`));
       _$insertNode(_el$5, _el$6);
       _$insert(_el$5, counts, null);

package/dist/tui/lib/view.js

@@ -30,11 +30,20 @@ export function kindColor(theme, kind) {
   }
 }
 
-/** Fixed 7-column pill so lists line up: " ⠹ RUN ", " FAIL  ". */
+/**
+ * The status mark: a coloured rule and its label, in a fixed 7 columns so lists line up.
+ *
+ * It used to be a filled pill. Filled blocks have to be as wide as their text, so a column of
+ * them stacks into a wall of colour that competes with the shell names beside it; a rule carries
+ * the same colour in one column and lets the list breathe.
+ */
 export function badgeText(kind, frame = 0) {
-  if (kind === "run") return ` ${SPINNER[frame % SPINNER.length]} RUN `;
-  return ` ${BADGE_LABEL[kind].padEnd(4)}  `;
+  if (kind === "run") return `▌ ${SPINNER[frame % SPINNER.length]} RUN`;
+  return `▌ ${BADGE_LABEL[kind].padEnd(5)}`;
 }
+
+/** The rule itself, so it can be coloured apart from the label it marks. */
+export const BADGE_RULE = "▌";
 const RANK = {
   run: 0,
   fail: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-cockpit/shell",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Background shells for OpenCode: the agent starts, waits on and drives PTYs; you watch them in a docked TUI panel",
   "type": "module",
   "license": "MIT",
@@ -51,9 +51,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@opencode-cockpit/client": "0.2.2",
-    "@opencode-cockpit/daemon": "0.2.2",
-    "@opencode-cockpit/protocol": "0.2.2",
+    "@opencode-cockpit/client": "0.3.1",
+    "@opencode-cockpit/daemon": "0.3.1",
+    "@opencode-cockpit/protocol": "0.3.1",
     "@opencode-ai/plugin": "1.18.31"
   },
   "devDependencies": {

package/types/tui/components/badge.d.ts

@@ -1,7 +1,13 @@
 /** @jsxImportSource @opentui/solid */
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
 import type { ShellInfo } from "@opencode-cockpit/protocol/shell";
-/** Status pill: label on a coloured background, readable in any font and colour scheme. */
+/**
+ * Status mark: a coloured rule and its label.
+ *
+ * Not a filled pill. A block of colour has to be as wide as the word inside it, and a list of
+ * them reads as a wall of colour rather than as a list of shells; the rule carries the same
+ * meaning in one column.
+ */
 export declare function Badge(props: {
     api: TuiPluginApi;
     shell: ShellInfo;

package/types/tui/lib/view.d.ts

@@ -7,8 +7,16 @@ export declare const BADGE_LABEL: Record<Kind, string>;
 /** Braille spinner: single-width in every terminal font. */
 export declare const SPINNER: string[];
 export declare function kindColor(theme: TuiThemeCurrent, kind: Kind): import("@opentui/core").RGBA;
-/** Fixed 7-column pill so lists line up: " ⠹ RUN ", " FAIL  ". */
+/**
+ * The status mark: a coloured rule and its label, in a fixed 7 columns so lists line up.
+ *
+ * It used to be a filled pill. Filled blocks have to be as wide as their text, so a column of
+ * them stacks into a wall of colour that competes with the shell names beside it; a rule carries
+ * the same colour in one column and lets the list breathe.
+ */
 export declare function badgeText(kind: Kind, frame?: number): string;
+/** The rule itself, so it can be coloured apart from the label it marks. */
+export declare const BADGE_RULE = "\u258C";
 /** Running first (oldest first, stable tabs), then failures, stopped, done (most recent first). */
 export declare function order(list: readonly ShellInfo[]): ShellInfo[];
 export interface PartitionOptions {