@kud/jira-ink 0.2.1 → 0.3.1

package/README.md

@@ -1,9 +1,9 @@
 # @kud/jira-ink
 
 Controlled [Ink](https://github.com/vadimdemedes/ink) components for viewing
-Jira issues in the terminal — the issue detail screen, extracted from
-[`@kud/jira-cli`](https://github.com/kud/jira-cli)'s TUI so it can be shared
-with ambre's cockpit.
+Jira issues in the terminal — the board and the issue detail screen, extracted
+from [`@kud/jira-cli`](https://github.com/kud/jira-cli)'s TUI so they can be
+shared with ambre's cockpit.
 
 Every component is **presentation-only**: props in, no data fetching, no
 app-level input. The consuming surface owns selection, navigation and loading,
@@ -71,6 +71,49 @@ const issue = await issueDetailOf(client, baseUrl, "SHOP-1234")
 | `issueDetailOf`   | Fetches one issue through a `@kud/jira` client into the view-ready shape |
 | `transitionsOf`   | The issue's available status transitions, `{ id, name, to }`             |
 | `IssueDetail`     | The shape the view reads: strings throughout, ADF already Markdown       |
+
+### The board
+
+A tabbed list of issues: rows grouped under their epic, a type pill, a priority glyph and an age on each, and a `/` search that takes plain words or JQL. The host owns the frame, the fetch and the quit key; the board owns only the layers it pushes itself (its search box and its legend).
+
+```tsx
+import { boardOf, IssueBoard } from "@kud/jira-ink"
+
+const model = await boardOf(client, "assignee = currentUser() ORDER BY updated DESC", {
+  board: config.defaultBoard, // optional — its columns become the tabs
+  tabs: config.tabs,          // optional — hand-written tabs win over the board
+})
+
+<IssueBoard
+  model={model}
+  viewer="you"
+  loadedAt={Date.now()}
+  scope={{ kind: "mine" }}
+  showingAll={false}
+  searchError={null}
+  width={100}
+  height={30}
+  onOpen={openIssue}
+  onToggleAll={toggleAll}
+  onRefresh={refresh}
+  onSearch={runSearch}
+  onClearSearch={clearSearch}
+  frame={({ facts, hints, body }) => <MyFrame facts={facts} hints={hints}>{body}</MyFrame>}
+/>
+```
+
+**Tabs come from one of three places, in order of precedence.** Hand-written `tabs` in the config file (statuses by id or name); the board's own column configuration (`getBoardConfiguration`, statuses matched **by id**, never by name); or Jira's status categories — To do, In progress, Done — which every status on every instance carries, so the last needs no configuration and can never name one workflow's vocabulary. Statuses no configured tab claims go to a derived **Off board** tab, drawn only when it holds something; a board with no columns falls through to categories. The board supplies the *vocabulary*, never the population: the fetch stays one query, bucketed client-side.
+
+| Export | What it is |
+| --- | --- |
+| `IssueBoard` | The tabbed board over a `BoardModel`; a `frame` slot hands the host its title facts, hints and body |
+| `boardOf` | Runs one JQL through a `@kud/jira` client and derives the tabs |
+| `toBoardRow` | One `JiraIssue` → `BoardRow`, the container question answered via `isContainerType` |
+| `tabsFromConfig` · `tabsFromBoard` · `tabsFromCategories` | The three tab sources, each a `BoardTabs` with its `source` named |
+| `tabOf` · `countsFor` · `visibleTabs` | Which tab a row belongs to, per-tab counts, which tabs to draw |
+| `blocksFor` | One tab's rows as drawn: container rows head their group, absent parents get a fence, orphans last, a gap between groups |
+| `priorityGlyph` · `relativeAge` · `pillVariantFor` | Row glyphs |
+| `mockBoard` · `MOCK_BOARD_ROWS` | An invented board for screenshots and tests |
 ## Development
 
 ```sh

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { MarkdownTheme } from '@kud/ink-markdown';
 import { Hint } from '@kud/ink-ui';
-import { LocatedAttachment, JiraClient } from '@kud/jira';
+import { LocatedAttachment, JiraClient, BoardTab as BoardTab$1, JiraBoardConfiguration, JiraIssue, SearchMode } from '@kud/jira';
 
 /**
  * One issue, as the detail screen reads it: every field already a string, ADF
@@ -99,4 +99,172 @@ type IssueBodyProps = {
  */
 declare const IssueBody: ({ client, baseUrl, issueKey, onExit, width, height, frame, theme, }: IssueBodyProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null | undefined;
 
-export { IssueBody, type IssueBodyProps, type IssueDetail, IssueDetailView, type IssueDetailViewProps, type Transition, issueDetailOf, transitionsOf };
+/** Jira's own three, plus `unknown` for a status that arrives without one. */
+type StatusCategory = "new" | "indeterminate" | "done" | "unknown";
+/**
+ * One issue, as the board reads it: every field already a string, the
+ * container question already answered. The view never touches a raw
+ * `JiraIssue`, so a host that fakes the fetch gets a board it can predict.
+ * The field names deliberately match the cockpit's own row vocabulary
+ * (`key`, `container`, `parent`) without importing it.
+ */
+type BoardRow = {
+    key: string;
+    summary: string;
+    status: string;
+    statusId: string;
+    category: StatusCategory;
+    type: string;
+    container: boolean;
+    priority: string | null;
+    parent?: {
+        key: string;
+        summary: string;
+    };
+    assignee: string;
+    /** ISO timestamp, kept whole so the view can draw a relative age. */
+    updated: string;
+};
+declare const toBoardRow: (issue: JiraIssue) => BoardRow;
+/**
+ * Where a board's tabs came from, in order of precedence: the user's own
+ * `tabs` in the config file, then the board's column configuration, then
+ * Jira's status categories — which every status on every instance carries,
+ * so the last one needs no configuration and can never name one workflow's
+ * vocabulary.
+ */
+type TabSource = "config" | "board" | "categories";
+type BoardTab = {
+    value: string;
+    label: string;
+    /** Status ids (or, for a config tab, names) this tab claims. Absent on a category tab. */
+    statuses?: Set<string>;
+    category?: StatusCategory;
+    /** The derived tab holding statuses no other tab claims. */
+    offBoard?: boolean;
+};
+type BoardTabs = {
+    source: TabSource;
+    tabs: BoardTab[];
+};
+declare const OFF_BOARD = "__off_board__";
+declare const tabsFromConfig: (configured: BoardTab$1[]) => BoardTabs;
+/**
+ * Columns are matched to statuses by ID, never by name — name-matching is
+ * how a transition table once silently stopped matching anything.
+ */
+declare const tabsFromBoard: (configuration: JiraBoardConfiguration) => BoardTabs | null;
+declare const tabsFromCategories: () => BoardTabs;
+/** The tab a row belongs to. Nothing ever falls out: unclaimed rows go Off board, or In progress on a category board. */
+declare const tabOf: (row: BoardRow, { tabs }: BoardTabs) => string;
+declare const countsFor: (rows: BoardRow[], tabs: BoardTabs) => Record<string, number>;
+/** Tabs worth drawing: every configured one, plus Off board only when it holds something. */
+declare const visibleTabs: (tabs: BoardTabs, counts: Record<string, number>) => BoardTab[];
+/**
+ * What one tab draws, in order. A container that is itself in the tab HEADS
+ * its group as a selectable row, its children hanging beneath it; a parent
+ * that is not in the tab gets a dim fence instead, because there is no row
+ * to select. Container-headed groups come first, then fenced ones, then rows
+ * with no parent — and each group after the first is preceded by a blank
+ * line. A tab where nothing has a parent and nothing is a container degrades
+ * to a plain list, never to a lone fence.
+ */
+type Block = {
+    kind: "gap";
+} | {
+    kind: "fence";
+    key: string | null;
+    summary: string;
+} | {
+    kind: "issue";
+    row: BoardRow;
+    depth: 0 | 1;
+};
+declare const blocksFor: (rows: BoardRow[]) => Block[];
+/** Index into `blocks` of the n-th issue, so a cursor over issues maps to a line. */
+declare const blockIndexOfIssue: (blocks: Block[], issueIndex: number) => number;
+/**
+ * Priority names are per-instance, so this matches the default scheme, the
+ * common renames and the P0–P4 ladder rather than an exact list. Medium — or
+ * anything unrecognised — draws nothing: the glyph column marks the two ends
+ * only.
+ */
+declare const priorityGlyph: (name: string | null) => "\u25B2" | "\u25BC" | " ";
+declare const relativeAge: (iso: string, now?: number) => string;
+declare const pillVariantFor: (row: Pick<BoardRow, "type" | "container">) => "group" | "info" | "error" | "muted";
+type BoardModel = {
+    rows: BoardRow[];
+    tabs: BoardTabs;
+};
+type BoardOptions = {
+    /** Hand-written tabs from the config file — wins over everything. */
+    tabs?: BoardTab$1[];
+    /** A board whose column configuration supplies the tabs. */
+    board?: number;
+    limit?: number;
+};
+/**
+ * One assignee-scoped query, bucketed client-side. The board supplies the
+ * VOCABULARY, never the population — `getBoardIssues` would drop your
+ * tickets on every other board. A board with no columns, or none given,
+ * falls through to categories.
+ */
+declare const boardOf: (client: JiraClient, jql: string, { tabs, board, limit }?: BoardOptions) => Promise<BoardModel>;
+
+/** What the board is showing, named in the title row. */
+type BoardScope = {
+    kind: "mine";
+} | {
+    kind: "search";
+    query: string;
+    mode: "jql" | "text";
+};
+type IssueBoardProps = {
+    model: BoardModel;
+    /** Who the `mine` scope belongs to, for the title row. */
+    viewer: string;
+    loadedAt: number;
+    scope: BoardScope;
+    /** Whether closed work beyond the recent window has been loaded. */
+    showingAll: boolean;
+    /** Jira's own words for a query it rejected; drawn under the search box, query kept. */
+    searchError: string | null;
+    width: number;
+    height: number;
+    onOpen: (key: string) => void;
+    onToggleAll: () => void;
+    onRefresh: () => void;
+    onSearch: (query: string, mode: SearchMode) => void;
+    onClearSearch: () => void;
+    /**
+     * The host draws the chrome — border, title row, hints at the foot — and
+     * places the parts. Without it the board draws a plain column, which is
+     * what a test or an embedded pane wants.
+     */
+    frame?: (parts: {
+        facts: string;
+        hints: Hint[];
+        body: ReactNode;
+    }) => ReactNode;
+};
+/**
+ * Rows are windowed by hand rather than handed to `Table`, which renders every
+ * row and has no notion of a cursor. A backlog of two hundred issues would
+ * otherwise scroll the selected row off the top of the terminal.
+ *
+ * The board binds no `q` and no back key of its own — those belong to the
+ * host — only the keys that open and close the layers it pushes itself: the
+ * search input and the legend.
+ */
+declare const IssueBoard: ({ model, viewer, loadedAt, scope, showingAll, searchError, width, height, onOpen, onToggleAll, onRefresh, onSearch, onClearSearch, frame, }: IssueBoardProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null | undefined;
+
+/**
+ * An invented board for screenshots and tests — every key, name and host is
+ * made up. It carries what the contract must keep exercising: a container
+ * that is itself in a tab with a child under it, a parent that is not, an
+ * orphan, all three categories, and both ends of priority.
+ */
+declare const MOCK_BOARD_ROWS: BoardRow[];
+declare const mockBoard: () => BoardModel;
+
+export { type Block, type BoardModel, type BoardOptions, type BoardRow, type BoardScope, type BoardTab, type BoardTabs, IssueBoard, type IssueBoardProps, IssueBody, type IssueBodyProps, type IssueDetail, IssueDetailView, type IssueDetailViewProps, MOCK_BOARD_ROWS, OFF_BOARD, type StatusCategory, type TabSource, type Transition, blockIndexOfIssue, blocksFor, boardOf, countsFor, issueDetailOf, mockBoard, pillVariantFor, priorityGlyph, relativeAge, tabOf, tabsFromBoard, tabsFromCategories, tabsFromConfig, toBoardRow, transitionsOf, visibleTabs };

package/dist/index.js

@@ -1,10 +1,10 @@
 import { MarkdownViewport } from '@kud/ink-markdown';
-import { useTabs, KeyValue, Badge, Tabs, FooterHints, StatusMessage, LoadingScreen } from '@kud/ink-ui';
+import { useTabs, KeyValue, Badge, Tabs, FooterHints, StatusMessage, useListCursor, pillWidth, colors, TextInput, SelectableRow, Pill, LoadingScreen } from '@kud/ink-ui';
 import { useInput, Box, Text, useStdout } from 'ink';
-import { useState, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { exec } from 'child_process';
-import { locateAttachments, adfToMarkdown } from '@kud/jira';
+import { locateAttachments, adfToMarkdown, isContainerType, looksLikeJql } from '@kud/jira';
 
 // src/components/issue-detail-view.tsx
 var truncate = (s, max) => s.length <= max ? s : `${s.slice(0, Math.max(0, max - 1))}\u2026`;
@@ -61,7 +61,8 @@ var IssueDetailView = ({
     if (key.upArrow || input === "k") setScroll((s) => Math.max(0, s - 1));
   });
   const source = active === "comments" ? commentsAsMarkdown(issue) : active === "attachments" ? attachmentsAsMarkdown(issue) : issue.description || "_No description._";
-  const chromeLines = frame ? 8 : 12;
+  const keyValueRows = 3 + (issue.parent ? 1 : 0) + (issue.labels.length > 0 ? 1 : 0) + (frame ? 0 : 1);
+  const chromeLines = keyValueRows + 1 + 2 + 1 + (frame ? 0 : 4);
   const bodyHeight = Math.max(3, height - chromeLines);
   const hints = [
     ["\u2190\u2192", "section"],
@@ -88,7 +89,7 @@ var IssueDetailView = ({
       issue.labels.length > 0 && /* @__PURE__ */ jsx(KeyValue, { label: "labels", value: issue.labels.join(", ") })
     ] }),
     /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Tabs, { items: tabs, active: active ?? "description" }) }),
-    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Box, { marginTop: 1, height: bodyHeight, overflow: "hidden", children: /* @__PURE__ */ jsx(
       MarkdownViewport,
       {
         source,
@@ -223,5 +224,481 @@ var IssueBody = ({
     }
   );
 };
+var CATEGORIES = ["new", "indeterminate", "done"];
+var categoryOf = (key) => CATEGORIES.find((c) => c === key) ?? "unknown";
+var toBoardRow = (issue) => ({
+  key: issue.key,
+  summary: issue.fields.summary ?? "",
+  status: issue.fields.status?.name ?? "\u2014",
+  statusId: issue.fields.status?.id ?? "",
+  category: categoryOf(issue.fields.status?.statusCategory?.key),
+  type: issue.fields.issuetype?.name ?? "",
+  container: isContainerType(issue.fields.issuetype),
+  priority: issue.fields.priority?.name ?? null,
+  ...issue.fields.parent ? {
+    parent: {
+      key: issue.fields.parent.key,
+      summary: issue.fields.parent.fields?.summary ?? ""
+    }
+  } : {},
+  assignee: issue.fields.assignee?.displayName ?? "unassigned",
+  updated: issue.fields.updated ?? ""
+});
+var OFF_BOARD = "__off_board__";
+var CATEGORY_TABS = [
+  { value: "todo", label: "To do", category: "new" },
+  { value: "doing", label: "In progress", category: "indeterminate" },
+  { value: "done", label: "Done", category: "done" }
+];
+var withOffBoard = (tabs) => [
+  ...tabs,
+  { value: OFF_BOARD, label: "Off board", offBoard: true }
+];
+var tabsFromConfig = (configured) => ({
+  source: "config",
+  tabs: withOffBoard(
+    configured.map((t, i) => ({
+      value: `config:${i}`,
+      label: t.label,
+      statuses: new Set(t.statuses.map((s) => s.toLowerCase()))
+    }))
+  )
+});
+var tabsFromBoard = (configuration) => {
+  const columns = configuration.columnConfig?.columns ?? [];
+  if (columns.length === 0) return null;
+  return {
+    source: "board",
+    tabs: withOffBoard(
+      columns.map((c, i) => ({
+        value: `column:${i}`,
+        label: c.name,
+        statuses: new Set(c.statuses.map((s) => s.id))
+      }))
+    )
+  };
+};
+var tabsFromCategories = () => ({
+  source: "categories",
+  tabs: CATEGORY_TABS
+});
+var tabOf = (row, { tabs }) => {
+  const claimed = tabs.find(
+    (t) => t.statuses?.has(row.statusId) || t.statuses?.has(row.status.toLowerCase())
+  );
+  if (claimed) return claimed.value;
+  const byCategory = tabs.find((t) => t.category && t.category === row.category);
+  if (byCategory) return byCategory.value;
+  return tabs.find((t) => t.offBoard)?.value ?? "doing";
+};
+var countsFor = (rows, tabs) => {
+  const counts = Object.fromEntries(
+    tabs.tabs.map((t) => [t.value, 0])
+  );
+  for (const row of rows)
+    counts[tabOf(row, tabs)] = (counts[tabOf(row, tabs)] ?? 0) + 1;
+  return counts;
+};
+var visibleTabs = (tabs, counts) => tabs.tabs.filter((t) => !t.offBoard || (counts[t.value] ?? 0) > 0);
+var blocksFor = (rows) => {
+  const hasStructure = rows.some((r) => r.parent || r.container);
+  if (!hasStructure)
+    return rows.map((row) => ({ kind: "issue", row, depth: 0 }));
+  const heads = new Map(rows.filter((r) => r.container).map((r) => [r.key, r]));
+  const children = /* @__PURE__ */ new Map();
+  const orphans = [];
+  for (const row of rows) {
+    if (row.container) continue;
+    const key = row.parent?.key;
+    if (!key) {
+      orphans.push(row);
+      continue;
+    }
+    children.set(key, [...children.get(key) ?? [], row]);
+  }
+  const groups = [];
+  for (const [key, head] of heads)
+    groups.push([
+      { kind: "issue", row: head, depth: 0 },
+      ...(children.get(key) ?? []).map((row) => ({
+        kind: "issue",
+        row,
+        depth: 1
+      }))
+    ]);
+  for (const [key, kids] of children) {
+    if (heads.has(key)) continue;
+    groups.push([
+      { kind: "fence", key, summary: kids[0].parent?.summary ?? "" },
+      ...kids.map((row) => ({ kind: "issue", row, depth: 1 }))
+    ]);
+  }
+  if (orphans.length)
+    groups.push([
+      ...groups.length ? [{ kind: "fence", key: null, summary: "No epic" }] : [],
+      ...orphans.map((row) => ({ kind: "issue", row, depth: 0 }))
+    ]);
+  return groups.flatMap(
+    (group, i) => i === 0 ? group : [{ kind: "gap" }, ...group]
+  );
+};
+var blockIndexOfIssue = (blocks, issueIndex) => {
+  let seen = -1;
+  for (let i = 0; i < blocks.length; i++) {
+    if (blocks[i].kind === "issue" && ++seen === issueIndex) return i;
+  }
+  return 0;
+};
+var priorityGlyph = (name) => {
+  const n = (name ?? "").trim().toLowerCase();
+  if (/highest|high|critical|blocker|urgent|^p[01]$/.test(n)) return "\u25B2";
+  if (/lowest|low|minor|trivial|^p[3-5]$/.test(n)) return "\u25BC";
+  return " ";
+};
+var UNITS = [
+  [60, "m"],
+  [60, "h"],
+  [24, "d"],
+  [7, "w"]
+];
+var relativeAge = (iso, now = Date.now()) => {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  let value = Math.max(0, Math.round((now - then) / 1e3));
+  let unit = "s";
+  for (const [size, next] of UNITS) {
+    if (value < size) break;
+    value = Math.round(value / size);
+    unit = next;
+  }
+  return `${value}${unit}`;
+};
+var pillVariantFor = (row) => {
+  if (row.container) return "group";
+  const t = row.type.toLowerCase();
+  if (t === "bug") return "error";
+  if (t === "story") return "info";
+  return "muted";
+};
+var boardOf = async (client, jql, { tabs, board, limit = 200 } = {}) => {
+  const [issues, derived] = await Promise.all([
+    client.searchIssues(jql, { limit }),
+    tabs?.length ? Promise.resolve(tabsFromConfig(tabs)) : board !== void 0 ? client.getBoardConfiguration(board).then(tabsFromBoard) : Promise.resolve(null)
+  ]);
+  return { rows: issues.map(toBoardRow), tabs: derived ?? tabsFromCategories() };
+};
+var CHROME = 6;
+var LEGEND = [
+  ["\u25B2", "high priority"],
+  ["\u25BC", "low priority"],
+  ["\u2500\u2500 epic \u2500\u2500", "a parent not in this tab; its rows hang beneath"],
+  ["\u2514\u2500", "a row under the container above it"],
+  ["story \xB7 bug \xB7 task", "issue type"],
+  ["2d", "time since last update"]
+];
+var windowFor = (focus, total, size) => {
+  const start = Math.max(
+    0,
+    Math.min(focus - Math.floor(size / 2), total - size)
+  );
+  return { start, end: start + size };
+};
+var modeOf = (s) => s.mode === "auto" ? looksLikeJql(s.draft) ? "jql" : "text" : s.mode;
+var rule = (label, width) => {
+  const head = `\u2500\u2500 ${label} `;
+  return head + "\u2500".repeat(Math.max(0, width - [...head].length));
+};
+var tabLegendLine = (model) => model.tabs.source === "categories" ? [
+  "To do \xB7 In progress \xB7 Done",
+  "status category \u2014 not any one board's column"
+] : model.tabs.source === "board" ? ["tabs", "this board's own columns, matched by status id"] : ["tabs", "your config file's tabs"];
+var IssueBoard = ({
+  model,
+  viewer,
+  loadedAt,
+  scope,
+  showingAll,
+  searchError,
+  width,
+  height,
+  onOpen,
+  onToggleAll,
+  onRefresh,
+  onSearch,
+  onClearSearch,
+  frame
+}) => {
+  const [legend, setLegend] = useState(false);
+  const [search, setSearch] = useState({
+    open: false,
+    draft: "",
+    mode: "auto"
+  });
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const tick = setInterval(() => setNow(Date.now()), 3e4);
+    return () => clearInterval(tick);
+  }, []);
+  const narrowed = useMemo(() => {
+    if (!search.open || modeOf(search) === "jql" || !search.draft.trim())
+      return model.rows;
+    const words = search.draft.trim().toLowerCase();
+    return model.rows.filter(
+      (r) => `${r.key} ${r.summary}`.toLowerCase().includes(words)
+    );
+  }, [model.rows, search]);
+  const counts = countsFor(narrowed, model.tabs);
+  const shown = visibleTabs(model.tabs, counts);
+  const tabItems = shown.map((t) => ({
+    value: t.value,
+    label: t.label,
+    count: counts[t.value] ?? 0
+  }));
+  const listFocused = !search.open && !legend;
+  const initial = shown.find((t) => t.category === "indeterminate")?.value ?? shown[0]?.value;
+  const { active, setActive } = useTabs(tabItems, {
+    initial,
+    isActive: listFocused
+  });
+  const tab = active ?? initial ?? "";
+  const blocks = useMemo(
+    () => blocksFor(narrowed.filter((r) => tabOf(r, model.tabs) === tab)),
+    [narrowed, model.tabs, tab]
+  );
+  const issues = blocks.filter(
+    (b) => b.kind === "issue"
+  );
+  const { cursor, setCursor } = useListCursor(issues.length, {
+    vimKeys: true,
+    isActive: listFocused
+  });
+  useEffect(() => setCursor(0), [tab, setCursor]);
+  useInput((input, key) => {
+    if (search.open) {
+      if (key.escape) setSearch((s) => ({ ...s, open: false }));
+      if (key.tab)
+        setSearch((s) => ({
+          ...s,
+          mode: modeOf(s) === "jql" ? "text" : "jql"
+        }));
+      return;
+    }
+    if (legend) {
+      if (input === "?" || key.escape) setLegend(false);
+      return;
+    }
+    if (key.return && issues[cursor]) onOpen(issues[cursor].row.key);
+    if ((key.leftArrow || key.rightArrow) && tabItems.length) {
+      const at = tabItems.findIndex((t) => t.value === tab);
+      const next = (at + (key.leftArrow ? -1 : 1) + tabItems.length) % tabItems.length;
+      setActive(tabItems[next].value);
+    }
+    if (input === "/")
+      setSearch((s) => ({
+        ...s,
+        open: true,
+        draft: scope.kind === "search" ? scope.query : s.draft
+      }));
+    if (input === "?") setLegend(true);
+    if (input === "a") onToggleAll();
+    if (input === "r") onRefresh();
+    if (input === "x" && scope.kind === "search") onClearSearch();
+  });
+  const searching = search.open || scope.kind === "search";
+  const chrome = CHROME + (searching ? 1 : 0) + (searchError ? 1 : 0);
+  const size = Math.max(3, height - chrome);
+  const focus = blockIndexOfIssue(blocks, cursor);
+  const { start, end } = windowFor(focus, blocks.length, size);
+  const keyWidth = Math.max(8, ...narrowed.map((r) => r.key.length));
+  const typeWidth = Math.max(
+    0,
+    ...narrowed.map((r) => pillWidth(r.type.toLowerCase()))
+  );
+  const scopeLabel = scope.kind === "mine" ? `@${viewer}` : scope.mode === "jql" ? "jql" : `\u201C${scope.query}\u201D`;
+  const countLabel = search.open && narrowed.length !== model.rows.length ? `${narrowed.length} of ${model.rows.length}` : `${model.rows.length} ${model.rows.length === 1 ? "item" : "items"}`;
+  const facts = `${countLabel} \xB7 ${scopeLabel} \xB7 updated ${relativeAge(new Date(loadedAt).toISOString(), now)} ago`;
+  const hints = search.open ? [
+    ["enter", "run"],
+    ["\u21E5", modeOf(search) === "jql" ? "as plain words" : "as jql"],
+    ["esc", "cancel"]
+  ] : legend ? [["?", "close"]] : [
+    ["\u2191\u2193", "move"],
+    ["\u2190\u2192", "tab"],
+    ["enter", "open"],
+    ["/", scope.kind === "search" ? "edit" : "search"],
+    ...scope.kind === "search" ? [["x", "clear"]] : [["a", showingAll ? "recent only" : "everything"]],
+    ["r", "refresh"],
+    ["?", "legend"],
+    ["q", "quit"]
+  ];
+  const emptyHint = () => {
+    const total = Object.values(counts).reduce((a, b) => a + b, 0);
+    if (total === 0) {
+      if (scope.kind === "search")
+        return "Nothing matches \u2014 / to edit, x to clear.";
+      return showingAll ? "Nothing is assigned to you." : "No open issues assigned to you \u2014 press a to include everything.";
+    }
+    const elsewhere = shown.filter((t) => t.value !== tab && (counts[t.value] ?? 0) > 0).map((t) => `${t.label} (${counts[t.value]})`).join(", ");
+    const current = shown.find((t) => t.value === tab);
+    const closed = current?.category === "done" && !showingAll ? " Only the last 14 days of closed work is loaded \u2014 press a for everything." : "";
+    return `Nothing here \u2014 \u2190\u2192 to ${elsewhere}.${closed}`;
+  };
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    search.open ? /* @__PURE__ */ jsxs(Box, { paddingRight: 1, children: [
+      /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: colors.accent, children: "  / " }) }),
+      /* @__PURE__ */ jsx(Box, { flexGrow: 1, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          defaultValue: search.draft,
+          placeholder: "words, or JQL",
+          onChange: (draft) => setSearch((s) => ({ ...s, draft })),
+          onSubmit: (query) => {
+            setSearch((s) => ({ ...s, open: false, draft: query }));
+            if (query.trim()) onSearch(query, search.mode);
+            else onClearSearch();
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: modeOf(search) === "jql" ? "JQL" : "plain" }) })
+    ] }) : scope.kind === "search" ? /* @__PURE__ */ jsxs(Box, { paddingRight: 1, children: [
+      /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: colors.accent, children: "  / " }) }),
+      /* @__PURE__ */ jsx(Box, { flexGrow: 1, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: scope.query }) }),
+      /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: scope.mode === "jql" ? "JQL" : "plain" }) })
+    ] }) : null,
+    searchError ? /* @__PURE__ */ jsxs(Text, { color: colors.error, children: [
+      "  \u2717 ",
+      searchError
+    ] }) : null,
+    /* @__PURE__ */ jsx(Box, { paddingLeft: 2, marginTop: searching || searchError ? 0 : 1, children: /* @__PURE__ */ jsx(Tabs, { active: tab, items: tabItems }) }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 1, height: size, paddingRight: 1, children: legend ? [...LEGEND, tabLegendLine(model)].map(([glyph, meaning]) => /* @__PURE__ */ jsxs(Box, { paddingLeft: 4, children: [
+      /* @__PURE__ */ jsx(Box, { width: 28, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: colors.accent, children: glyph }) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: meaning })
+    ] }, glyph)) : issues.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: emptyHint() }) }) : blocks.slice(start, end).map(
+      (block, i) => block.kind === "gap" ? /* @__PURE__ */ jsx(Text, { children: " " }, `gap:${start + i}`) : block.kind === "fence" ? /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: rule(
+        block.key ? `${block.summary} \xB7 ${block.key}` : block.summary,
+        width - 7
+      ) }) }, `f:${block.key ?? "none"}`) : /* @__PURE__ */ jsxs(SelectableRow, { active: start + i === focus, children: [
+        block.depth === 1 ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, width: 3, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2514\u2500 " }) }) : null,
+        /* @__PURE__ */ jsx(Box, { flexShrink: 0, width: 2, children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: priorityGlyph(block.row.priority) === "\u25B2" ? colors.warning : colors.muted,
+            children: priorityGlyph(block.row.priority)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flexShrink: 0, width: keyWidth + 2, children: /* @__PURE__ */ jsx(Text, { color: colors.accent, bold: start + i === focus, children: block.row.key }) }),
+        /* @__PURE__ */ jsx(Box, { flexShrink: 0, width: typeWidth + 2, children: /* @__PURE__ */ jsx(Pill, { tone: "soft", variant: pillVariantFor(block.row), children: block.row.type.toLowerCase() }) }),
+        /* @__PURE__ */ jsx(Box, { flexGrow: 1, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", bold: start + i === focus, children: block.row.summary }) }),
+        /* @__PURE__ */ jsx(Box, { flexShrink: 0, width: 5, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: relativeAge(block.row.updated, now) }) })
+      ] }, block.row.key)
+    ) }),
+    /* @__PURE__ */ jsx(Box, { marginTop: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: issues.length ? `${cursor + 1}/${issues.length}` : " " }) })
+  ] });
+  if (frame) return frame({ facts, hints, body });
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: facts }),
+    body,
+    /* @__PURE__ */ jsx(FooterHints, { hints })
+  ] });
+};
+
+// src/lib/board-mock.ts
+var CHECKOUT = { key: "SHOP-300", summary: "Basket and checkout correctness" };
+var STOREFRONT = { key: "SHOP-350", summary: "Storefront refresh" };
+var MOCK_BOARD_ROWS = [
+  {
+    key: "SHOP-300",
+    summary: CHECKOUT.summary,
+    status: "To Do",
+    statusId: "10000",
+    category: "new",
+    type: "Epic",
+    container: true,
+    priority: "Medium",
+    assignee: "Ada Okafor",
+    updated: "2026-08-14T10:00:00.000Z"
+  },
+  {
+    key: "SHOP-412",
+    summary: "Checkout total ignores the discount on the last item",
+    status: "In Progress",
+    statusId: "10001",
+    category: "indeterminate",
+    type: "Bug",
+    container: false,
+    priority: "High",
+    parent: CHECKOUT,
+    assignee: "Ada Okafor",
+    updated: "2026-08-14T09:12:00.000Z"
+  },
+  {
+    key: "SHOP-408",
+    summary: "Add a dark theme to the storefront",
+    status: "In Review",
+    statusId: "10002",
+    category: "indeterminate",
+    type: "Story",
+    container: false,
+    priority: "Medium",
+    parent: STOREFRONT,
+    assignee: "Ada Okafor",
+    updated: "2026-08-13T16:40:00.000Z"
+  },
+  {
+    key: "SHOP-397",
+    summary: "Search returns stale results after a filter change",
+    status: "To Do",
+    statusId: "10000",
+    category: "new",
+    type: "Bug",
+    container: false,
+    priority: "Medium",
+    parent: CHECKOUT,
+    assignee: "Ada Okafor",
+    updated: "2026-08-11T08:00:00.000Z"
+  },
+  {
+    key: "SHOP-401",
+    summary: "Coupon field accepts whitespace-only codes",
+    status: "In Progress",
+    statusId: "10001",
+    category: "indeterminate",
+    type: "Bug",
+    container: false,
+    priority: "Low",
+    parent: CHECKOUT,
+    assignee: "Ada Okafor",
+    updated: "2026-08-12T11:30:00.000Z"
+  },
+  {
+    key: "PLAT-88",
+    summary: "Rotate the staging database credentials",
+    status: "Blocked",
+    statusId: "10005",
+    category: "indeterminate",
+    type: "Task",
+    container: false,
+    priority: "Highest",
+    assignee: "Ada Okafor",
+    updated: "2026-08-09T14:05:00.000Z"
+  },
+  {
+    key: "SHOP-390",
+    summary: "Show the VAT breakdown on the order summary",
+    status: "Done",
+    statusId: "10003",
+    category: "done",
+    type: "Story",
+    container: false,
+    priority: "Medium",
+    parent: CHECKOUT,
+    assignee: "Ada Okafor",
+    updated: "2026-08-08T10:00:00.000Z"
+  }
+];
+var mockBoard = () => ({
+  rows: MOCK_BOARD_ROWS,
+  tabs: tabsFromCategories()
+});
 
-export { IssueBody, IssueDetailView, issueDetailOf, transitionsOf };
+export { IssueBoard, IssueBody, IssueDetailView, MOCK_BOARD_ROWS, OFF_BOARD, blockIndexOfIssue, blocksFor, boardOf, countsFor, issueDetailOf, mockBoard, pillVariantFor, priorityGlyph, relativeAge, tabOf, tabsFromBoard, tabsFromCategories, tabsFromConfig, toBoardRow, transitionsOf, visibleTabs };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kud/jira-ink",
-  "version": "0.2.1",
-  "description": "Ink components for viewing Jira issues: the issue detail screen, shared by jira-cli's TUI and cockpit",
+  "version": "0.3.1",
+  "description": "Ink components for viewing Jira issues: the board and the issue detail screen, shared by jira-cli's TUI and cockpit",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,11 +29,12 @@
     "react": ">=19"
   },
   "dependencies": {
-    "@kud/ink-ui": "0.25.0",
     "@kud/ink-markdown": "0.3.0",
-    "@kud/jira": "0.3.0"
+    "@kud/ink-ui": "0.25.0",
+    "@kud/jira": "0.4.0"
   },
   "devDependencies": {
+    "@kud/cli-testing": "0.1.0",
     "@types/node": "26.5.0",
     "@types/react": "19.2.18",
     "ink": "7.1.1",