@zinn-dev/opencode 0.1.0 → 0.2.0

package/README.md

@@ -7,7 +7,7 @@ Requires OpenCode 2.2.0 and Zinn CLI 0.41.0 or newer on `PATH`.
 Add this entry to the `plugins` array in `~/.config/opencode/cli.json`:
 
 ```json
-{ "package": "@zinn-dev/opencode@0.1.0", "options": { "rows": 2, "current": "glyph" } }
+{ "package": "@zinn-dev/opencode@0.2.0", "options": { "rows": 2, "current": "glyph" } }
 ```
 
 Read the [setup, options, compatibility, update and removal guide](https://zinn.sh/integrations/opencode/inspector).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zinn-dev/opencode",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Experimental Zinn task inspector for the OpenCode TUI.",
   "keywords": [

package/pkg/components.tsx

@@ -15,7 +15,7 @@ import {
   PRIORITY_COLOR,
   labelColors,
 } from "./data.ts";
-import { MARKER_COLUMNS, RAIL_COLUMNS, SESSION_GLYPH, priorityLetter } from "./options.ts";
+import { RAIL_COLUMNS, SESSION_GLYPH, priorityLetter } from "./options.ts";
 import { truncate } from "./rows.ts";
 import { TINT_ALPHA_STRONG, TINT_ALPHA_SUBTLE, inspectorTheme, toneColor } from "./theme.ts";
 
@@ -38,16 +38,39 @@ export function Overflow(props: {
   return (
     <box
       flexDirection="row"
+      gap={1}
       backgroundColor={hover() ? theme().backgroundElement : "transparent"}
       onMouseOver={() => setHover(true)}
       onMouseOut={() => setHover(false)}
       onMouseUp={onClick}
     >
+      <text width={RAIL_COLUMNS} flexShrink={0} fg={theme().borderSubtle}>
+        │
+      </text>
       <text flexShrink={0} fg={theme().textMuted}>{`+${props.count} ${props.label}`}</text>
     </box>
   );
 }
 
+export function RailLine(props: {
+  ctx: Ctx;
+  glyph: string;
+  color?: RGBA;
+  onMouseDown?: () => void;
+  children: JSX.Element;
+}): JSX.Element {
+  const theme = () => inspectorTheme(props.ctx);
+
+  return (
+    <box flexDirection="row" gap={1} onMouseDown={props.onMouseDown}>
+      <text width={RAIL_COLUMNS} flexShrink={0} fg={props.color ?? theme().borderSubtle}>
+        {props.glyph}
+      </text>
+      {props.children}
+    </box>
+  );
+}
+
 type MetaPart = {
   text: string;
   color: string | null;
@@ -69,15 +92,54 @@ export function Row(props: {
   const keyColor = toneColor(props.ctx, () => props.row.tone);
   const metaColor = () => theme().textMuted;
   const glyph = () => props.current === "glyph";
-  const markerColumns = () => {
+  const done = () => props.row.column === "Done";
+  const mark = () => {
+    if (glyph() && props.row.mine) {
+      return props.markGlyph ?? SESSION_GLYPH;
+    }
+
+    if (props.row.created) {
+      return "+";
+    }
+
+    if (done()) {
+      return "│";
+    }
+
     if (!props.dense) {
-      return MARKER_COLUMNS + (glyph() ? RAIL_COLUMNS : 0);
+      return props.row.glyph || "│";
+    }
+
+    return "│";
+  };
+  const markColor = () => {
+    if (glyph() && props.row.mine) {
+      return theme().accent;
+    }
+
+    if (props.row.created) {
+      return theme().info;
+    }
+
+    if (props.row.unknown) {
+      return theme().warning;
     }
-    return (glyph() ? RAIL_COLUMNS : 0) + (props.row.created ? 1 : 0);
+
+    if (done()) {
+      return theme().success;
+    }
+
+    if (!props.dense && props.row.glyph.length > 0) {
+      return keyColor();
+    }
+
+    return theme().borderSubtle;
   };
-  const metaIndent = () => markerColumns() + 1;
-  const sessionMark = () => props.markGlyph ?? (props.row.mine ? SESSION_GLYPH : " ");
-  const statusGlyph = () => (props.dense ? (props.row.created ? "+" : "") : props.row.glyph);
+  const createdBadge = () => !props.dense && props.row.created && mark() !== "+";
+  const railColor = () => (done() ? theme().success : theme().borderSubtle);
+  const metaMark = () => (props.row.created && mark() !== "+" ? "+" : "│");
+  const metaMarkColor = () =>
+    props.row.created && mark() !== "+" ? theme().info : railColor();
   const [hover, setHover] = createSignal(false);
   const onEnter = () => setHover(true);
   const onLeave = () => setHover(false);
@@ -86,11 +148,8 @@ export function Row(props: {
     const byte = (n: number) => n.toString(16).padStart(2, "0");
     return `#${byte(r)}${byte(g)}${byte(b)}${hover() ? TINT_ALPHA_STRONG : TINT_ALPHA_SUBTLE}`;
   };
-  const done = () => props.row.column === "Done";
   const background = () =>
     done() ? wash(theme().success) : hover() ? theme().backgroundElement : "transparent";
-  // Every row reserves the left border, coloured only for Done rows so nothing shifts.
-  const railColor = () => (done() ? theme().success : "transparent");
   const onClick = (event: { stopPropagation: () => void }) => {
     event.stopPropagation();
     if (hover()) {
@@ -100,13 +159,15 @@ export function Row(props: {
 
   const head = (
     <box flexDirection="row" gap={1}>
-      <text width={markerColumns()} flexShrink={0} fg={keyColor()}>
-        {glyph() ? <span style={{ fg: theme().accent }}>{sessionMark()}</span> : null}
-        {statusGlyph()}
+      <text width={RAIL_COLUMNS} flexShrink={0} fg={markColor()}>
+        {mark()}
       </text>
 
       <text flexShrink={0} fg={keyColor()}>
         {props.row.key}
+        <Show when={createdBadge()}>
+          <span style={{ fg: theme().info }}>+</span>
+        </Show>
       </text>
       {!props.dense && (
         <text flexShrink={0} fg={metaColor()}>
@@ -115,7 +176,7 @@ export function Row(props: {
       )}
 
       <text wrapMode="none" flexShrink={1} fg={metaColor()}>
-        {truncate(props.row.title, props.titleColumns)}
+        {truncate(props.row.title, props.titleColumns - (createdBadge() ? 1 : 0))}
       </text>
     </box>
   );
@@ -177,8 +238,10 @@ export function Row(props: {
   });
 
   const meta = () => (
-    <box flexDirection="row">
-      <text flexShrink={0}>{` `.repeat(metaIndent())}</text>
+    <box flexDirection="row" gap={1}>
+      <text width={RAIL_COLUMNS} flexShrink={0} fg={metaMarkColor()}>
+        {metaMark()}
+      </text>
       <text wrapMode="none" flexShrink={1} fg={metaColor()}>
         <For each={metaPlan()}>
           {(part) => (
@@ -208,8 +271,6 @@ export function Row(props: {
     <box
       flexDirection={props.dense ? "column" : "row"}
       backgroundColor={background()}
-      border={["left"]}
-      borderColor={railColor()}
       onMouseOver={onEnter}
       onMouseOut={onLeave}
       onMouseUp={onClick}

package/pkg/sidebar.tsx

@@ -18,7 +18,7 @@ import {
 } from "solid-js";
 
 import { clearPanel, publishPanel } from "./commands.ts";
-import { Overflow, Row } from "./components.tsx";
+import { Overflow, RailLine, Row } from "./components.tsx";
 import {
   BOARD_TTL_MS,
   errorText,
@@ -30,7 +30,6 @@ import {
 } from "./data.ts";
 import { openDetail, openPicker } from "./dialogs.tsx";
 import {
-  MARKER_COLUMNS,
   PRIORITY_COLUMNS,
   RAIL_COLUMNS,
   RUNNING_FRAMES,
@@ -395,18 +394,17 @@ export function Sidebar(props: {
   const knownOverflow = createMemo(() => knownRows().length - visibleKnown().length);
   const visibleUnknown = createMemo(() => unknownRows().slice(0, SECTION_ROWS));
   const unknownOverflow = createMemo(() => unknownRows().length - visibleUnknown().length);
-  const contentIndent = () => RAIL_COLUMNS + (props.options.current === "glyph" ? 1 : 0) + 1;
   const titleColumns = createMemo(() => {
     const rows = [...visibleKnown(), ...visibleUnknown()];
     let key = 0;
     for (const row of rows) {
       key = Math.max(key, row.key.length);
     }
-    const gaps = props.options.rows === 2 ? 3 : 4;
+    const gaps = props.options.rows === 2 ? 2 : 3;
     const priority = props.options.rows === 2 ? 0 : PRIORITY_COLUMNS;
-    return Math.max(8, SLOT_COLUMNS - RAIL_COLUMNS - MARKER_COLUMNS - priority - key - gaps);
+    return Math.max(8, SLOT_COLUMNS - RAIL_COLUMNS - priority - key - gaps);
   });
-  const metaColumns = Math.max(8, SLOT_COLUMNS - RAIL_COLUMNS - MARKER_COLUMNS);
+  const metaColumns = Math.max(8, SLOT_COLUMNS - RAIL_COLUMNS - 1);
   let published: PanelSnapshot | undefined;
   createEffect(() => {
     const loaded = map();
@@ -434,6 +432,7 @@ export function Sidebar(props: {
     const loaded = map();
     return loaded.ok ? undefined : loaded.error;
   });
+  const sectionHasRows = () => knownRows().length + unknownRows().length > 0;
   const knownKeys = () => scan().known.map((mention) => mention.key);
   const unknownKeys = () => scan().unknown.map((mention) => mention.key);
   const knownPicker = () => {
@@ -461,29 +460,40 @@ export function Sidebar(props: {
 
   return (
     <box flexDirection="column">
-      <box flexDirection="row" gap={1} paddingLeft={contentIndent()} onMouseDown={reload}>
+      <RailLine ctx={props.ctx} glyph="┏" onMouseDown={reload}>
         <text fg={theme().text}>
           <b>ZINN</b>
         </text>
         <text fg={theme().textMuted}>[{headerDetail()}]</text>
-      </box>
+      </RailLine>
+
       <Show when={failure()}>
-        <text fg={theme().error}>{truncate(failure() ?? "", 40)}</text>
+        <RailLine ctx={props.ctx} glyph={sectionHasRows() ? "│" : "┗"}>
+          <text wrapMode="none" flexShrink={1} fg={theme().error}>
+            {truncate(failure() ?? "", 40)}
+          </text>
+        </RailLine>
       </Show>
-      <Show when={!loading() && map().ok && knownRows().length === 0 && unknownRows().length === 0}>
-        <text fg={theme().textMuted}>no task keys in this chat</text>
+
+      <Show when={!loading() && map().ok && !sectionHasRows()}>
+        <RailLine ctx={props.ctx} glyph="┗">
+          <text fg={theme().textMuted}>no task keys in this chat</text>
+        </RailLine>
       </Show>
+
       <For each={visibleKnown()}>
         {(row, index) => (
           <>
             <Show when={props.options.rows === 2 && index() > 0}>
-              <box
-                height={1}
-                borderStyle="single"
-                border={["top"]}
-                borderColor={theme().borderSubtle}
-                marginLeft={contentIndent()}
-              />
+              <RailLine ctx={props.ctx} glyph="│">
+                <box
+                  flexGrow={1}
+                  height={1}
+                  borderStyle="single"
+                  border={["top"]}
+                  borderColor={theme().borderSubtle}
+                />
+              </RailLine>
             </Show>
             <Row
               ctx={props.ctx}
@@ -502,14 +512,21 @@ export function Sidebar(props: {
           </>
         )}
       </For>
+
       <Show when={knownOverflow() > 0}>
         <Overflow ctx={props.ctx} count={knownOverflow()} label="more" onOpen={knownPicker} />
       </Show>
+
       <Show when={createdKeys().size > 0}>
-        <text fg={theme().info}>{`+ created this session (${createdKeys().size})`}</text>
+        <RailLine ctx={props.ctx} glyph="│">
+          <text fg={theme().info}>{`+ created this session (${createdKeys().size})`}</text>
+        </RailLine>
       </Show>
+
       <Show when={unknownRows().length > 0}>
-        <text fg={theme().warning}>unknown keys (not in store)</text>
+        <RailLine ctx={props.ctx} glyph="│">
+          <text fg={theme().warning}>unknown keys (not in store)</text>
+        </RailLine>
         <For each={visibleUnknown()}>
           {(row) => (
             <Row
@@ -533,10 +550,10 @@ export function Sidebar(props: {
         </Show>
       </Show>
 
-      <Show when={!loading() && map().ok && knownRows().length + unknownRows().length > 0}>
-        <box paddingLeft={contentIndent()}>
+      <Show when={!loading() && map().ok && sectionHasRows()}>
+        <RailLine ctx={props.ctx} glyph="┗">
           <text fg={theme().textMuted}>recent mentions</text>
-        </box>
+        </RailLine>
       </Show>
     </box>
   );