@zinn-dev/opencode 0.0.0-stage → 0.1.0

package/pkg/data.ts

@@ -0,0 +1,349 @@
+import type { Ctx, DetailState, Loaded, Relation, TaskDetail, TaskSummary } from "./types.ts";
+
+import { appendFileSync } from "node:fs";
+import { createSignal } from "solid-js";
+
+type BunProc = Bun.Subprocess<"ignore", "pipe", "pipe">;
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+export function asString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : undefined;
+}
+export function asStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  const out: string[] = [];
+  for (const item of value) {
+    if (typeof item === "string") {
+      out.push(item);
+    }
+  }
+  return out;
+}
+export function errorText(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+export function log(_ctx: Ctx, message: string, extra?: Record<string, unknown>): void {
+  const path = process.env.ZINN_INSPECTOR_LOG;
+  if (!path) {
+    return;
+  }
+  try {
+    const line = `${new Date().toISOString()} ${message}${extra ? ` ${JSON.stringify(extra)}` : ""}\n`;
+    appendFileSync(path, line);
+  } catch {}
+}
+export function zinnErrorCode(stderr: string): string | undefined {
+  const trimmed = stderr.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    const body = isRecord(parsed) ? parsed["error"] : undefined;
+    return isRecord(body) ? asString(body["code"]) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+export function zinnErrorMessage(stderr: string): string | undefined {
+  const trimmed = stderr.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    if (isRecord(parsed)) {
+      const body = parsed["error"];
+      if (isRecord(body)) {
+        const message = asString(body["message"]);
+        if (message) {
+          return message;
+        }
+      }
+    }
+  } catch {
+    return trimmed.split("\n")[0];
+  }
+  return trimmed.split("\n")[0];
+}
+export async function runZinn(args: string[]): Promise<Loaded<string>> {
+  const cmd = ["zinn", ...args];
+  let proc: BunProc;
+
+  try {
+    proc = Bun.spawn(cmd, { stdout: "pipe", stderr: "pipe", stdin: "ignore" });
+  } catch (error) {
+    return { ok: false, error: `cannot run zinn: ${errorText(error)}` };
+  }
+
+  try {
+    const [stdout, stderr, exitCode] = await Promise.all([
+      new Response(proc.stdout).text(),
+      new Response(proc.stderr).text(),
+      proc.exited,
+    ]);
+    if (exitCode !== 0) {
+      return {
+        ok: false,
+        error: zinnErrorMessage(stderr) ?? `zinn exited with code ${exitCode}`,
+        code: zinnErrorCode(stderr),
+      };
+    }
+    return { ok: true, value: stdout };
+  } catch (error) {
+    return { ok: false, error: `zinn read failed: ${errorText(error)}` };
+  }
+}
+export function parseTaskList(raw: string): Loaded<Map<string, TaskSummary>> {
+  let data: unknown;
+
+  try {
+    data = JSON.parse(raw);
+  } catch (error) {
+    return { ok: false, error: `bad zinn json: ${errorText(error)}` };
+  }
+
+  if (!Array.isArray(data)) {
+    return { ok: false, error: "unexpected zinn task list shape" };
+  }
+
+  const map = new Map<string, TaskSummary>();
+  for (const item of data) {
+    if (!isRecord(item)) {
+      continue;
+    }
+    const key = asString(item["key"]);
+    const title = asString(item["title"]);
+    if (!key || !title) {
+      continue;
+    }
+    map.set(key, {
+      key,
+      title,
+      status: asString(item["status"]) ?? "",
+      column: asString(item["column"]) ?? "",
+      priority: asString(item["priority"]) ?? null,
+      labels: asStringArray(item["labels"]),
+    });
+  }
+  return { ok: true, value: map };
+}
+export const LABEL_HEX = {
+  red: "#cd3131",
+  green: "#0dbc79",
+  yellow: "#e5e510",
+  blue: "#2472c8",
+  magenta: "#bc3fbc",
+  cyan: "#11a8cd",
+  white: "#e5e5e5",
+  gray: "#666666",
+};
+export type LabelColor = string | null;
+export type LabelColors = ReadonlyMap<string, LabelColor>;
+export const PRIORITY_COLOR: Record<string, string> = {
+  urgent: LABEL_HEX["red"],
+  high: LABEL_HEX["yellow"],
+  medium: LABEL_HEX["blue"],
+  low: LABEL_HEX["gray"],
+};
+export const CHIP_PRIORITY = "urgent";
+export const CHIP_PAD = 2;
+export const CONTEXT_SEPARATOR = " | ";
+export const LABEL_SEPARATOR = ", ";
+export const [labelColors, setLabelColors] = createSignal<LabelColors>(new Map());
+export function parseLabelColors(raw: string): LabelColors {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return new Map();
+  }
+  if (!Array.isArray(data)) {
+    return new Map();
+  }
+  const out = new Map<string, LabelColor>();
+  for (const item of data) {
+    if (!isRecord(item)) {
+      continue;
+    }
+    const name = asString(item["name"]);
+    if (!name) {
+      continue;
+    }
+    out.set(
+      name,
+      (LABEL_HEX as Record<string, string | undefined>)[asString(item["color"]) ?? ""] ?? null,
+    );
+  }
+  return out;
+}
+export function parseRelations(value: unknown): Relation[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  const out: Relation[] = [];
+
+  for (const item of value) {
+    if (!isRecord(item)) {
+      continue;
+    }
+    const task = item["task"];
+    if (!isRecord(task)) {
+      continue;
+    }
+    const key = asString(task["key"]);
+    if (!key) {
+      continue;
+    }
+    out.push({
+      type: asString(item["type"]) ?? "related",
+      direction: asString(item["direction"]) ?? "outgoing",
+      task: {
+        key,
+        title: asString(task["title"]) ?? "",
+        status: asString(task["status"]) ?? "",
+      },
+    });
+  }
+  return out;
+}
+export function parseTaskDetail(raw: string): Loaded<TaskDetail> {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch (error) {
+    return { ok: false, error: `bad zinn json: ${errorText(error)}` };
+  }
+
+  if (!isRecord(data)) {
+    return { ok: false, error: "unexpected zinn task view shape" };
+  }
+
+  const key = asString(data["key"]);
+  const title = asString(data["title"]);
+  if (!key || !title) {
+    return { ok: false, error: "zinn task view had no key/title" };
+  }
+
+  const comments = Array.isArray(data["comments"]) ? data["comments"].length : 0;
+  return {
+    ok: true,
+    value: {
+      key,
+      title,
+      status: asString(data["status"]) ?? "",
+      column: asString(data["column"]) ?? "",
+      priority: asString(data["priority"]) ?? null,
+      labels: asStringArray(data["labels"]),
+      relations: parseRelations(data["relations"]),
+      comments,
+      description: asString(data["description"]) ?? "",
+    },
+  };
+}
+export let keyMapCache: Promise<Loaded<Map<string, TaskSummary>>> | undefined;
+export let keyMapInflight: Promise<Loaded<Map<string, TaskSummary>>> | undefined;
+export function loadKeyMap(): Promise<Loaded<Map<string, TaskSummary>>> {
+  if (!keyMapCache) {
+    void loadLabelColors();
+    const pending = runZinn(["task", "list", "--json"]).then((result) => {
+      if (!result.ok) {
+        return result;
+      }
+      return parseTaskList(result.value);
+    });
+    keyMapCache = pending;
+    keyMapInflight = pending;
+    void pending.then(() => {
+      if (keyMapInflight === pending) {
+        keyMapInflight = undefined;
+      }
+    });
+  }
+  return keyMapCache;
+}
+export const LABEL_TTL_MS = 5 * 60 * 1000;
+export let labelColorsCache: Promise<void> | undefined;
+export let labelColorsAt = 0;
+export let labelColorsInflight = false;
+export function loadLabelColors(force = false): Promise<void> {
+  if (labelColorsInflight && labelColorsCache !== undefined) {
+    return labelColorsCache;
+  }
+  if (
+    !force &&
+    labelColorsCache !== undefined &&
+    labelColorsAt !== 0 &&
+    Date.now() - labelColorsAt <= LABEL_TTL_MS
+  ) {
+    return labelColorsCache;
+  }
+  labelColorsInflight = true;
+  const pending = runZinn(["label", "list", "--json"])
+    .then((result) => {
+      if (result.ok) {
+        setLabelColors(parseLabelColors(result.value));
+        labelColorsAt = Date.now();
+      }
+    })
+    .finally(() => {
+      labelColorsInflight = false;
+    });
+  labelColorsCache = pending;
+  return pending;
+}
+export function refreshKeyMap(forceLabels = false): Promise<Loaded<Map<string, TaskSummary>>> {
+  void loadLabelColors(forceLabels);
+  if (keyMapInflight) {
+    keyMapCache = keyMapInflight;
+    return keyMapInflight;
+  }
+  keyMapCache = undefined;
+  return loadKeyMap();
+}
+export const BOARD_TTL_MS = 60 * 1000;
+export function shouldReadBoard(input: {
+  force: boolean;
+  zinnTotal: number;
+  lastReadZinn: number;
+  msSinceRead: number;
+  ttl: number;
+}): boolean {
+  if (input.force) {
+    return true;
+  }
+  if (input.zinnTotal !== input.lastReadZinn) {
+    return true;
+  }
+  return input.msSinceRead > input.ttl;
+}
+export const flaggedUnknown = new Map<string, Set<string>>();
+export function flaggedFor(sessionID: string): Set<string> {
+  let set = flaggedUnknown.get(sessionID);
+  if (!set) {
+    set = new Set<string>();
+    flaggedUnknown.set(sessionID, set);
+  }
+  return set;
+}
+export function loadDetail(key: string): Promise<DetailState> {
+  return runZinn(["task", "view", key, "--json"]).then((result) => {
+    if (!result.ok) {
+      return { kind: "error", error: result.error };
+    }
+    const parsed = parseTaskDetail(result.value);
+    if (!parsed.ok) {
+      return { kind: "error", error: parsed.error };
+    }
+    return { kind: "ready", detail: parsed.value };
+  });
+}

package/pkg/dialogs.tsx

@@ -0,0 +1,208 @@
+/** @jsxImportSource @opentui/solid */
+import type { JSX } from "@opentui/solid";
+import type { Ctx, DetailState, Relation, TaskSummary } from "./types.ts";
+
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+
+import { labelColors, loadDetail, log, PRIORITY_COLOR } from "./data.ts";
+import { firstParagraph, truncate } from "./rows.ts";
+import { inspectorTheme } from "./theme.ts";
+
+export function RelationLine(props: { ctx: Ctx; relation: Relation }): JSX.Element {
+  const theme = () => inspectorTheme(props.ctx);
+  const arrow = () => (props.relation.direction === "incoming" ? "←" : "→");
+
+  return (
+    <text fg={theme().textMuted}>
+      {`${arrow()} ${props.relation.type} ${props.relation.task.key} ${truncate(props.relation.task.title, 40)}`}
+    </text>
+  );
+}
+
+export function Detail(props: {
+  ctx: Ctx;
+  taskKey: string;
+  unknown: boolean;
+  mentions?: number;
+}): JSX.Element {
+  const theme = () => inspectorTheme(props.ctx);
+  const [state, setState] = createSignal<DetailState>({ kind: "loading" });
+  let alive = true;
+  const mentionLine = () => {
+    const count = props.mentions;
+    if (count === undefined) {
+      return undefined;
+    }
+
+    return `mentioned ${count} ${count === 1 ? "time" : "times"} in this chat`;
+  };
+
+  onMount(() => {
+    const started = Date.now();
+    log(props.ctx, "detail loading", { key: props.taskKey });
+    onCleanup(() => {
+      alive = false;
+    });
+    void loadDetail(props.taskKey).then((result) => {
+      log(props.ctx, "detail settled", {
+        key: props.taskKey,
+        kind: result.kind,
+        ms: Date.now() - started,
+      });
+      if (!alive) {
+        return;
+      }
+      setState(result);
+    });
+  });
+
+  const body = createMemo<JSX.Element>(() => {
+    const current = state();
+    if (current.kind === "loading") {
+      return <text fg={theme().textMuted}>Loading {props.taskKey}…</text>;
+    }
+    if (current.kind === "error") {
+      return (
+        <box flexDirection="column" gap={1}>
+          <Show when={props.unknown}>
+            <text fg={theme().warning}>
+              {props.taskKey} is not in this store. Check the task key.
+            </text>
+          </Show>
+          <text fg={theme().error}>{current.error}</text>
+        </box>
+      );
+    }
+
+    const detail = current.detail;
+    return (
+      <box flexDirection="column" gap={1}>
+        <text fg={theme().text}>
+          <b>{detail.title}</b>
+        </text>
+
+        <text wrapMode="none" fg={theme().textMuted}>
+          <span style={{ fg: theme().text }}>{detail.key}</span>
+          <span>{` · ${detail.column} · ${detail.status} · priority `}</span>
+          <Show when={detail.priority} fallback={<span>none</span>}>
+            <span style={{ fg: PRIORITY_COLOR[detail.priority ?? ""] ?? theme().textMuted }}>
+              {detail.priority}
+            </span>
+          </Show>
+        </text>
+        <Show
+          when={detail.labels.length > 0}
+          fallback={<text fg={theme().textMuted}>labels: none</text>}
+        >
+          <text wrapMode="none" fg={theme().textMuted}>
+            <span>{"labels: "}</span>
+            <For each={detail.labels}>
+              {(label, index) => (
+                <>
+                  <Show when={index() > 0}>
+                    <span>{", "}</span>
+                  </Show>
+                  <span style={{ fg: labelColors().get(label) ?? theme().textMuted }}>{label}</span>
+                </>
+              )}
+            </For>
+          </text>
+        </Show>
+        <Show when={detail.relations.length > 0}>
+          <box flexDirection="column">
+            <text fg={theme().textMuted}>relations:</text>
+            <For each={detail.relations}>
+              {(relation) => <RelationLine ctx={props.ctx} relation={relation} />}
+            </For>
+          </box>
+        </Show>
+        <text fg={theme().textMuted}>{`comments: ${detail.comments}`}</text>
+        <Show when={mentionLine()}>
+          <text fg={theme().textMuted}>{mentionLine()}</text>
+        </Show>
+        <Show when={detail.description.length > 0}>
+          <text fg={theme().text}>{firstParagraph(detail.description)}</text>
+        </Show>
+        <text fg={theme().textMuted}>esc closes</text>
+      </box>
+    );
+  });
+
+  return (
+    <box flexDirection="column" paddingLeft={2} paddingRight={2}>
+      {body()}
+    </box>
+  );
+}
+
+export type PickerOption = {
+  title: string;
+  description: string;
+  value: string;
+};
+export function pickerOptions(
+  keys: readonly string[],
+  map: Map<string, TaskSummary> | undefined,
+  includeUnknown: boolean,
+): PickerOption[] {
+  const out: PickerOption[] = [];
+  for (const key of keys) {
+    const summary = map?.get(key);
+
+    if (!summary) {
+      if (!includeUnknown) {
+        continue;
+      }
+
+      out.push({ title: key, description: "not in store", value: key });
+      continue;
+    }
+
+    const meta = [summary.column, summary.status, summary.priority].filter(
+      (part): part is string => typeof part === "string" && part !== "none" && part.length > 0,
+    );
+
+    out.push({
+      title: `${key} · ${truncate(summary.title, 64)}`,
+      description: meta.length > 0 ? meta.join(" · ") : "·",
+      value: key,
+    });
+  }
+  return out;
+}
+export function openDetail(ctx: Ctx, key: string, unknown: boolean, mentions?: number): void {
+  log(ctx, "row clicked, opening dialog", { key, unknown });
+  ctx.ui.dialog.show(
+    () => <Detail ctx={ctx} taskKey={key} unknown={unknown} mentions={mentions} />,
+    () => log(ctx, "dialog closed", { key }),
+  );
+  ctx.ui.dialog.set({ size: "large" });
+}
+export function openPicker(
+  ctx: Ctx,
+  title: string,
+  keys: readonly string[],
+  map: Map<string, TaskSummary> | undefined,
+  includeUnknown: boolean,
+  mentions?: ReadonlyMap<string, number>,
+): void {
+  const options = pickerOptions(keys, map, includeUnknown);
+
+  if (options.length === 0) {
+    ctx.ui.toast.show({
+      variant: "warning",
+      title: "Zinn",
+      message: "nothing to pick: no tasks in the store",
+    });
+    return;
+  }
+
+  log(ctx, "picker opened", { title, options: options.length });
+
+  void ctx.ui.dialog.select({ title, placeholder: "search tasks", options }).then((value) => {
+    if (value === undefined) {
+      return;
+    }
+    openDetail(ctx, value, includeUnknown, mentions?.get(value));
+  });
+}

package/pkg/options.ts

@@ -0,0 +1,39 @@
+export const SECTION_ROWS = 5;
+// Reserve two columns for status glyphs that terminals can render wide.
+export const MARKER_COLUMNS = 2;
+export const PRIORITY_COLUMNS = 1;
+export const RAIL_COLUMNS = 1;
+export const SESSION_GLYPH = "⧗";
+export const RUNNING_FRAMES = ["■", "□", "▪", "▫"];
+export const RUNNING_INTERVAL = 300;
+export const SCROLLBAR_COLUMNS = 1;
+// Sidebar width minus horizontal padding and its scrollbar.
+export const SLOT_COLUMNS = 42 - 2 - 2 - SCROLLBAR_COLUMNS;
+export const PRIORITY_LETTER: Record<string, string | undefined> = {
+  urgent: "U",
+  high: "H",
+  medium: "M",
+  low: "L",
+};
+export function priorityLetter(priority: string | null): string {
+  if (!priority) {
+    return "";
+  }
+  return PRIORITY_LETTER[priority] ?? "";
+}
+export type CurrentMark = "off" | "glyph";
+export type InspectorOptions = {
+  rows: 1 | 2;
+  current: CurrentMark;
+};
+export const DEFAULT_OPTIONS: InspectorOptions = { rows: 1, current: "off" };
+export function readCurrentMark(value: unknown): CurrentMark {
+  return value === "glyph" ? "glyph" : "off";
+}
+export function readOptions(options: unknown): InspectorOptions {
+  if (typeof options !== "object" || options === null) {
+    return DEFAULT_OPTIONS;
+  }
+  const bag = options as Record<string, unknown>;
+  return { rows: bag["rows"] === 2 ? 2 : 1, current: readCurrentMark(bag["current"]) };
+}

package/pkg/rows.ts

@@ -0,0 +1,109 @@
+export function flatten(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+export function truncate(text: string, max: number): string {
+  const flat = flatten(text);
+  if (flat.length <= max) {
+    return flat;
+  }
+  return `${flat.slice(0, Math.max(0, max - 1))}…`;
+}
+export function firstParagraph(text: string): string {
+  const block = text.split(/\n\s*\n/)[0] ?? "";
+  return truncate(block, 500);
+}
+export const COLUMN_GLYPH: Record<string, string | undefined> = {
+  Done: "✔",
+  Blocked: "✖",
+  "In Progress": "▸",
+};
+export function columnGlyph(column: string): string {
+  return COLUMN_GLYPH[column] ?? "";
+}
+export type RowTone = "normal" | "done" | "created" | "blocked" | "warning";
+export type DisplayRow = {
+  key: string;
+  title: string;
+  glyph: string;
+  tone: RowTone;
+  unknown: boolean;
+  created: boolean;
+  mine: boolean;
+  priority: string | null;
+  labels: string[];
+  column: string;
+};
+export function sameDisplayRow(a: DisplayRow, b: DisplayRow): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  return (
+    a.key === b.key &&
+    a.title === b.title &&
+    a.priority === b.priority &&
+    a.column === b.column &&
+    a.glyph === b.glyph &&
+    a.tone === b.tone &&
+    a.unknown === b.unknown &&
+    a.created === b.created &&
+    a.mine === b.mine &&
+    sameLabels(a.labels, b.labels)
+  );
+}
+export function sameLabels(a: readonly string[], b: readonly string[]): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+// Solid keys rows by object identity. Retain unchanged row objects.
+export function stableRows(
+  cache: Map<string, DisplayRow>,
+  candidates: readonly DisplayRow[],
+): Array<DisplayRow> {
+  const out: Array<DisplayRow> = [];
+
+  for (const candidate of candidates) {
+    const previous = cache.get(candidate.key);
+    const row =
+      previous !== undefined && sameDisplayRow(previous, candidate) ? previous : candidate;
+    cache.set(candidate.key, row);
+    out.push(row);
+  }
+
+  const keep = new Set(candidates.map((candidate) => candidate.key));
+  for (const key of [...cache.keys()]) {
+    if (!keep.has(key)) {
+      cache.delete(key);
+    }
+  }
+
+  return out;
+}
+export function rowTone(column: string, unknown: boolean, created: boolean): RowTone {
+  if (unknown) {
+    return "warning";
+  }
+  if (created) {
+    return "created";
+  }
+  if (column === "Done") {
+    return "done";
+  }
+  if (column === "Blocked") {
+    return "blocked";
+  }
+  return "normal";
+}