tuiboard 0.8.3 → 0.9.0

package/src/store/index.ts

@@ -19,10 +19,12 @@
  */
 
 import { readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
 import { createMemo } from "solid-js";
 import { createStore, produce } from "solid-js/store";
 
-import type { Config } from "~/config/loader";
+import { isHiddenColumn, type Config } from "~/config/loader";
 import {
   createBoardWatcher,
   type BoardWatcher,
@@ -39,7 +41,12 @@ import {
   type WritableCalendar,
 } from "./calendar";
 import { ConflictError, statMtime, writeBoardFile } from "~/io/writer";
+import { addBoardToConfig } from "~/boards/config-writer";
+import { createBoardFile } from "~/boards/create";
+import { scanDirectory, type BoardCandidate } from "~/boards/scan";
+import { suggestBoardsDir } from "~/boards/suggest";
 import { isTask, parseBoard } from "~/parser/markdown";
+import { buildRing, ringPosition, samePane, stepRing, type Pane } from "~/ui/pane-ring";
 import { serializeBoard } from "~/parser/serialize";
 import type {
   Board,
@@ -80,6 +87,7 @@ export type ModalKind =
   | { kind: "event-edit" }
   | { kind: "confirm-delete-event" }
   | { kind: "search" }
+  | { kind: "board-new" }
   | { kind: "help" };
 
 /**
@@ -87,6 +95,33 @@ export type ModalKind =
  * title+time `<input>`; step 2 is the calendar picker, navigated via handleKey
  * (no input focused). Lives in UI state so the key handler can drive it.
  */
+/**
+ * State of the board-creation wizard, alive only while
+ * `modal.kind === "board-new"`. Kept beside the modal rather than inside it,
+ * the way `eventPicker` is: the modal says *what* is open, this says where the
+ * user has got to.
+ */
+export interface BoardNew {
+  step: "mode" | "name" | "columns" | "dir" | "pick";
+  /** Chosen path through the wizard. */
+  mode?: "create" | "adopt";
+  /** Selection index — the mode list on step 1, the candidate list on "pick". */
+  sel: number;
+  name: string;
+  /** Comma-separated, as typed. */
+  columns: string;
+  dir: string;
+  candidates: BoardCandidate[];
+  /** Indexes of the candidates ticked for adoption. */
+  ticked: number[];
+  /**
+   * True on first run, when there is no board behind the modal to go back to.
+   * Escape does not dismiss it.
+   */
+  mandatory: boolean;
+  error?: string;
+}
+
 export interface EventPicker {
   step: 1 | 2;
   /** Selection index into `cals` (step 2). */
@@ -150,6 +185,16 @@ export interface UIState {
    * Toggled with `z`.
    */
   zoomed: boolean;
+  /**
+   * The terminal is too narrow to host more than one zone. Set by the
+   * responsive layer, never by the user.
+   *
+   * Distinct from `zoomed`, which is the user's own choice, because the two
+   * must not overwrite each other: widening the window has to restore the
+   * layout without also cancelling a `z` the user pressed on purpose. What the
+   * renderer reads is the OR of the two — see `singlePane`.
+   */
+  narrow: boolean;
   /**
    * Grab mode: when true, h/l moves the cursor task between adjacent
    * columns instead of just moving the cursor. Toggled with `g`. Exit
@@ -201,6 +246,8 @@ export interface UIState {
   modal?: ModalKind;
   /** Two-step new-event modal state (set only while `modal.kind === "event"`). */
   eventPicker?: EventPicker;
+  /** Board-creation wizard state (set only while `modal.kind === "board-new"`). */
+  boardNew?: BoardNew;
 }
 
 export interface UndoEntry {
@@ -275,6 +322,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       col: 0,
       row: 0,
       zoomed: false,
+      narrow: false,
       grabbing: false,
       armMode: false,
       agendaOffset: 0,
@@ -803,6 +851,174 @@ export function createTuiStore({ config }: CreateStoreOptions) {
 
   // ─── Cursor / UI ─────────────────────────────────────────────────────────
 
+  // ─── Board creation wizard ───────────────────────────────────────────────
+  // The screen is thin on purpose: everything that touches the disk lives in
+  // src/boards/, so the same steps are reachable from `tuiboard board add`.
+
+  function openBoardNew(mandatory = false): void {
+    setState("ui", "boardNew", {
+      step: "mode",
+      sel: 0,
+      name: "",
+      columns: "Todo, Doing, Done",
+      dir: suggestBoardsDir(config),
+      candidates: [],
+      ticked: [],
+      mandatory,
+    });
+    openModal({ kind: "board-new" });
+  }
+
+  function patchBoardNew(patch: Partial<BoardNew>): void {
+    setState("ui", "boardNew", produce((b: BoardNew | undefined) => {
+      if (b) Object.assign(b, patch);
+    }));
+  }
+
+  function closeBoardNew(): void {
+    // A mandatory wizard has nothing behind it: there is no board to return to.
+    if (state.ui.boardNew?.mandatory) return;
+    setState("ui", "boardNew", undefined);
+    closeModal();
+  }
+
+  /** Step 1: which way through. */
+  function boardNewChooseMode(mode: "create" | "adopt"): void {
+    patchBoardNew({ mode, step: mode === "create" ? "name" : "dir", error: undefined });
+  }
+
+  function boardNewMove(delta: number): void {
+    const b = state.ui.boardNew;
+    if (!b) return;
+    const len = b.step === "pick" ? b.candidates.length : 2;
+    if (len === 0) return;
+    patchBoardNew({ sel: Math.max(0, Math.min(len - 1, b.sel + delta)) });
+  }
+
+  /** Step "pick": Space ticks a candidate. Already-configured ones are inert. */
+  function boardNewToggle(): void {
+    const b = state.ui.boardNew;
+    if (!b || b.step !== "pick") return;
+    const c = b.candidates[b.sel];
+    if (!c || c.alreadyInConfig) return;
+    const ticked = b.ticked.includes(b.sel)
+      ? b.ticked.filter((i) => i !== b.sel)
+      : [...b.ticked, b.sel];
+    patchBoardNew({ ticked });
+  }
+
+  /** Text submitted by the modal's <input>, per step. */
+  function boardNewSubmitText(text: string): void {
+    const b = state.ui.boardNew;
+    if (!b) return;
+    const value = text.trim();
+
+    if (b.step === "name") {
+      if (!value) return patchBoardNew({ error: "the board needs a name" });
+      return patchBoardNew({ name: value, step: "columns", error: undefined });
+    }
+    if (b.step === "columns") {
+      return commitCreate(b.name, value || b.columns);
+    }
+    if (b.step === "dir") {
+      const dir = expandHome(value || b.dir);
+      const candidates = scanDirectory(dir, {
+        existingPaths: state.boards.map((lb) => lb.board.filepath),
+      });
+      if (candidates.length === 0) {
+        return patchBoardNew({ dir, error: `no board files in ${dir}` });
+      }
+      return patchBoardNew({ dir, candidates, step: "pick", sel: 0, ticked: [], error: undefined });
+    }
+  }
+
+  /** Create the file, register it, open it — in that order. */
+  function commitCreate(name: string, columnsText: string): void {
+    const b = state.ui.boardNew;
+    if (!b) return;
+    const columns = columnsText.split(",").map((c) => c.trim()).filter(Boolean);
+    const path = join(b.dir, `${name}.md`);
+    try {
+      createBoardFile(path, { columns });
+    } catch (e) {
+      return patchBoardNew({ error: (e as Error).message });
+    }
+    try {
+      addBoardToConfig({ path, name });
+    } catch (e) {
+      // The file is on disk and is not lost: say exactly that, and stay put.
+      return patchBoardNew({
+        error: `created ${path}, but not registered: ${(e as Error).message}`,
+      });
+    }
+    finishBoardNew([{ path, name }]);
+  }
+
+  /** Adopt every ticked candidate; one failure does not stop the others. */
+  function boardNewConfirmPick(): void {
+    const b = state.ui.boardNew;
+    if (!b || b.step !== "pick") return;
+    const chosen = (b.ticked.length > 0 ? b.ticked : [b.sel])
+      .map((i) => b.candidates[i])
+      .filter((c): c is BoardCandidate => !!c && !c.alreadyInConfig);
+    if (chosen.length === 0) return patchBoardNew({ error: "nothing to adopt" });
+
+    const added: Array<{ path: string; name: string }> = [];
+    const failed: string[] = [];
+    for (const c of chosen) {
+      try {
+        addBoardToConfig({ path: c.path, name: c.suggestedName });
+        added.push({ path: c.path, name: c.suggestedName });
+      } catch (e) {
+        failed.push(`${c.suggestedName}: ${(e as Error).message}`);
+      }
+    }
+    if (added.length === 0) return patchBoardNew({ error: failed.join(" · ") });
+    finishBoardNew(added, failed);
+  }
+
+  function finishBoardNew(
+    added: Array<{ path: string; name: string }>,
+    failed: string[] = [],
+  ): void {
+    const problems = [...failed];
+    for (const a of added) {
+      const res = addBoard(a.path, a.name);
+      if (!res.ok) problems.push(`${a.name}: ${res.error}`);
+    }
+    setState("ui", "boardNew", undefined);
+    closeModal();
+    const what = added.length === 1 ? added[0]!.name : `${added.length} boards`;
+    if (problems.length > 0) flashBanner("warn", `Added ${what} — ${problems.join(" · ")}`);
+    else flashBanner("info", `Added ${what}`);
+  }
+
+  /**
+   * Adopt a board while tuiboard is running: parse it, append it, start
+   * watching it, and move the cursor onto it.
+   *
+   * Called after the file and the config entry already exist (that ordering is
+   * what keeps a failure conservative — see the board lifecycle spec), so this
+   * is the last and least destructive step: if it fails, the board is still
+   * registered and appears on the next launch.
+   */
+  function addBoard(path: string, name?: string): { ok: true } | { ok: false; error: string } {
+    if (state.boards.some((b) => b.board.filepath === path)) {
+      return { ok: false, error: "that board is already open" };
+    }
+    let loaded: LoadedBoard;
+    try {
+      loaded = loadOne(path, name);
+    } catch (e) {
+      return { ok: false, error: (e as Error).message };
+    }
+    setState("boards", (boards) => [...boards, loaded]);
+    watcher.watch(path);
+    setState("rev", (r) => r + 1);
+    setActiveBoard(state.boards.length - 1);
+    return { ok: true };
+  }
+
   function setActiveBoard(idx: number): void {
     const len = state.boards.length;
     if (len === 0) return;
@@ -829,7 +1045,11 @@ export function createTuiStore({ config }: CreateStoreOptions) {
   function recomputeVisible(): void {
     const v = computeVisible();
     setState("ui", "visibleZones", v);
-    if (!v[state.ui.activeZone]) setActiveZone("board");
+    // In single-pane the active zone is drawn because it is active, not
+    // because it "fits", so it is never orphaned — and dragging focus to the
+    // board on every narrowing is exactly the behaviour that made a resize
+    // throw the user off the planner.
+    if (!v[state.ui.activeZone] && !singlePane()) setActiveZone("board");
   }
 
   /** Set a zone's desired visibility (user intent). Showing a disabled zone is
@@ -851,25 +1071,140 @@ export function createTuiStore({ config }: CreateStoreOptions) {
 
   /** Update the terminal-width fit cache (called by the responsive layout) and
    *  recompute. Never overrides enablement or the user's desired visibility. */
-  function applyResponsiveFits(fits: Partial<Record<ActiveZone, boolean>>): void {
+  /**
+   * What the terminal's width allows, applied in one shot.
+   *
+   * `narrow` travels with the fits rather than in its own call on purpose:
+   * `recomputeVisible` behaves differently in single-pane, so setting the two
+   * separately makes the result depend on which came first — and the wrong
+   * order silently reintroduces the focus-stealing this mode removes.
+   */
+  function applyResponsiveFits(
+    fits: Partial<Record<ActiveZone, boolean>>,
+    opts: { narrow?: boolean } = {},
+  ): void {
     lastFits = {
       board: true,
       planner: fits.planner !== false,
       timeline: fits.timeline !== false,
       agents: fits.agents !== false,
     };
+    if (opts.narrow !== undefined) setState("ui", "narrow", opts.narrow);
     recomputeVisible();
   }
 
+  /**
+   * Next zone, wrapping.
+   *
+   * Reachability is decided by what the user enabled and wants — never by what
+   * fits. Width governs how many zones are drawn at once, not which ones
+   * exist: filtering on `visibleZones` here is what used to leave a narrow
+   * terminal with a single candidate, making this function return immediately
+   * and Shift-Tab do nothing.
+   */
   function cycleActiveZone(): void {
-    const visible = ZONE_ORDER.filter((z) => state.ui.visibleZones[z]);
-    if (visible.length <= 1) return;
-    const currentIdx = visible.indexOf(state.ui.activeZone);
-    const nextIdx = (currentIdx + 1) % visible.length;
-    setActiveZone(visible[nextIdx]!);
+    const reachable = ZONE_ORDER.filter(
+      (z) => enabledZones[z] && (singlePane() ? desiredVisible[z] : state.ui.visibleZones[z]),
+    );
+    if (reachable.length <= 1) return;
+    const currentIdx = reachable.indexOf(state.ui.activeZone);
+    const nextIdx = (currentIdx + 1) % reachable.length;
+    setActiveZone(reachable[nextIdx]!);
+  }
+
+  /**
+   * One pane on screen at a time — the state the whole renderer keys off.
+   *
+   * Two roads in: the user pressed `z`, or the terminal is too narrow to hold
+   * two zones side by side. They are deliberately the same state: a narrow
+   * terminal should behave like a deliberate focus, not like a degraded
+   * dashboard.
+   */
+  function singlePane(): boolean {
+    return state.ui.narrow || state.ui.zoomed;
+  }
+
+  function setNarrow(v: boolean): void {
+    if (state.ui.narrow === v) return;
+    setState("ui", "narrow", v);
+    recomputeVisible();
+  }
+
+  /**
+   * One step along the single-pane ring: `h` / `l` when only one pane is on
+   * screen. Left and right stop meaning geometry there and mean sequence —
+   * planner, each drawn board column, agenda, agents — closing into a ring.
+   *
+   * Returns false when it did not apply (not in single-pane, or the ring holds
+   * a single pane), so the caller can fall back to today's behaviour.
+   */
+  /** The ring as it stands right now, plus where the cursor sits on it. */
+  function ringNow(): { ring: Pane[]; current: Pane } {
+    const board = state.boards[state.ui.activeBoardIndex]?.board;
+    const rendered = (board?.columns ?? [])
+      .map((c, i) => ({ name: c.name, i }))
+      .filter(({ name }) => !isHiddenColumn(config, name))
+      .map(({ i }) => i);
+
+    const ring = buildRing({
+      enabledZones: {
+        planner: enabledZones.planner && desiredVisible.planner,
+        board: rendered.length > 0,
+        timeline: enabledZones.timeline && desiredVisible.timeline,
+        agents: enabledZones.agents && desiredVisible.agents,
+      },
+      renderedColumns: rendered,
+    });
+
+    const current: Pane =
+      state.ui.activeZone === "board"
+        ? { kind: "column", index: state.ui.col }
+        : { kind: "zone", zone: state.ui.activeZone };
+
+    return { ring, current };
+  }
+
+  /** What the single-pane top bar shows: this pane's name and its place. */
+  function currentPane(): { label: string; position: { at: number; of: number } } | undefined {
+    const { ring, current } = ringNow();
+    if (ring.length === 0) return undefined;
+    const board = state.boards[state.ui.activeBoardIndex]?.board;
+    const label =
+      current.kind === "column"
+        ? (board?.columns[current.index]?.name ?? "Board")
+        : current.zone === "planner"
+          ? "Today / Tomorrow"
+          : current.zone === "timeline"
+            ? "Agenda"
+            : "Agents";
+    return { label, position: ringPosition(ring, current) };
+  }
+
+  function stepPane(delta: 1 | -1): boolean {
+    if (!singlePane()) return false;
+
+    const { ring, current } = ringNow();
+    if (ring.length <= 1) return false;
+
+    const next = stepRing(ring, current, delta);
+    if (samePane(next, current)) return false;
+
+    if (next.kind === "column") {
+      setActiveZone("board");
+      setCursor(next.index, 0);
+    } else {
+      setActiveZone(next.zone);
+    }
+    return true;
   }
 
   function toggleZoom(): void {
+    // Below the threshold there is nothing to zoom out to: leaving would put
+    // back the cramped multi-column layout this mode exists to escape.
+    if (state.ui.narrow) {
+      flashBanner("info", "Nothing else fits at this width");
+      return;
+    }
     setState("ui", "zoomed", (z: boolean) => !z);
   }
 
@@ -1308,6 +1643,15 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     addTask,
     deleteTask,
     moveTaskWithinBoard,
+    // boards
+    addBoard,
+    openBoardNew,
+    closeBoardNew,
+    boardNewChooseMode,
+    boardNewMove,
+    boardNewToggle,
+    boardNewSubmitText,
+    boardNewConfirmPick,
     // ui
     setActiveBoard,
     setCursor,
@@ -1316,6 +1660,10 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     toggleZoneDesired,
     applyResponsiveFits,
     cycleActiveZone,
+    singlePane,
+    stepPane,
+    currentPane,
+    setNarrow,
     toggleZoom,
     toggleGrab,
     exitGrab,
@@ -1375,15 +1723,34 @@ function noopCalendarStore(): CalendarStore {
   };
 }
 
+/**
+ * Read and parse one board. Throws on failure — the caller decides what to do
+ * with the message, because at runtime it must reach the screen through the
+ * banner, never through stderr: writing to stderr while the renderer owns the
+ * alternate screen is what breaks the layout.
+ */
+/** `~` is what people type; node's fs does not know it. */
+function expandHome(p: string): string {
+  if (p === "~") return homedir();
+  if (p.startsWith("~/")) return join(homedir(), p.slice(2));
+  return p;
+}
+
+function loadOne(path: string, name?: string): LoadedBoard {
+  const content = readFileSync(path, "utf-8");
+  const { board } = parseBoard(content, { filepath: path });
+  if (name) board.name = name;
+  return { board, mtimeMs: statMtime(path) };
+}
+
 function loadAll(config: Config): LoadedBoard[] {
   const out: LoadedBoard[] = [];
   for (const b of config.boards) {
     try {
-      const content = readFileSync(b.path, "utf-8");
-      const { board } = parseBoard(content, { filepath: b.path });
-      if (b.name) board.name = b.name;
-      out.push({ board, mtimeMs: statMtime(b.path) });
+      out.push(loadOne(b.path, b.name));
     } catch (e) {
+      // Startup only, before the renderer takes the screen — safe to print,
+      // and better than starting with a board silently missing.
       console.error(`Skipping ${b.path}: ${(e as Error).message}`);
     }
   }

package/src/ui/BoardView.tsx

@@ -68,6 +68,8 @@ function columnId(boardPath: string, idx: number): string {
 
 export function BoardView(props: BoardViewProps) {
   const ui = () => props.store.state.ui;
+  // One pane on screen — by the user's `z` or by the terminal's width.
+  const singlePane = () => props.store.singlePane();
   // Width of the clipping viewport (the board zone), read from layout.
   let viewportRef: SizedBoxLike | undefined;
   // Horizontal scroll offset in cells, applied as a negative left margin on
@@ -95,7 +97,7 @@ export function BoardView(props: BoardViewProps) {
    * (Python kanban `z`).
    */
   const renderedColumns = createMemo(() => {
-    if (!ui().zoomed || ui().activeZone === "planner") return visibleColumns();
+    if (!singlePane() || ui().activeZone === "planner") return visibleColumns();
     const cols = visibleColumns();
     // ui.col is a board.columns index (carries Archive); map it to the
     // rendered list so zoom focuses the column actually under the cursor.
@@ -118,7 +120,7 @@ export function BoardView(props: BoardViewProps) {
   // geometry used everywhere (COL_WIDTH + COL_GAP).
   createEffect(() => {
     const colIdx = ui().col;
-    if (ui().zoomed || ui().activeZone === "planner") {
+    if (singlePane() || ui().activeZone === "planner") {
       setScrollX(0);
       return;
     }
@@ -156,7 +158,7 @@ export function BoardView(props: BoardViewProps) {
    */
   const columnTasksVisible = (i: number): boolean => {
     const vw = viewportW();
-    if (vw <= 0 || ui().zoomed) return true;
+    if (vw <= 0 || singlePane()) return true;
     const stride = COL_WIDTH + COL_GAP;
     const start = i * stride;
     const left = Math.max(start, scrollX());
@@ -192,11 +194,11 @@ export function BoardView(props: BoardViewProps) {
         <box
           style={{
             flexDirection: "row",
-            flexGrow: ui().zoomed ? 1 : 0,
+            flexGrow: singlePane() ? 1 : 0,
             flexShrink: 0,
             height: "100%",
             alignItems: "stretch",
-            marginLeft: ui().zoomed ? 0 : -scrollX(),
+            marginLeft: singlePane() ? 0 : -scrollX(),
           }}
         >
           <For each={renderedColumns()}>
@@ -211,7 +213,7 @@ export function BoardView(props: BoardViewProps) {
                   column={col}
                   columnIndex={originalIndex}
                   active={isActive()}
-                  zoomed={ui().zoomed && isActive()}
+                  zoomed={singlePane() && isActive()}
                   tasksVisible={columnTasksVisible(i())}
                   boxId={columnId(props.board.filepath, originalIndex)}
                 />

package/src/ui/Chrome.tsx

@@ -30,7 +30,21 @@ export function TopBar(props: { store: TuiStore }) {
     return { open, done, cols };
   };
 
+  // Single-pane: one zone fills the screen, so the tab strip has nothing left
+  // to orient anybody — you cannot see the zones you are not in. It is replaced
+  // by where you are in the ring. When the two compete for room the position
+  // wins: the board name is one keystroke from being obvious, the ring
+  // position is not.
+  const singlePane = () => props.store.singlePane();
+  const paneLabel = () => {
+    const p = props.store.currentPane();
+    if (!p) return "";
+    const { at, of } = p.position;
+    return `⤢ ${p.label}  ‹ ${at + 1}/${of} ›`;
+  };
+
   return (
+    <Show when={!singlePane()} fallback={<CompactBar store={props.store} label={paneLabel()} />}>
     <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
       <box style={{ flexDirection: "row", flexShrink: 1, overflow: "hidden" }}>
         {/* Brand + date */}
@@ -63,6 +77,16 @@ export function TopBar(props: { store: TuiStore }) {
             );
           }}
         </For>
+        {/* New board — the browser's new-tab button, in a terminal. Clickable
+            like the tabs beside it; `+` does the same from the keyboard. */}
+        <box
+          style={{ flexShrink: 0, flexDirection: "row" }}
+          onMouseDown={() => props.store.openBoardNew()}
+        >
+          <text wrapMode="none">
+            <span style={{ fg: T.textDim }}> + </span>
+          </text>
+        </box>
       </box>
       <Show when={activeStats()}>
         <text wrapMode="none" style={{ flexShrink: 0, marginLeft: 2 }}>
@@ -72,11 +96,51 @@ export function TopBar(props: { store: TuiStore }) {
         </text>
       </Show>
     </box>
+    </Show>
   );
 }
 
+/**
+ * The narrow-terminal top bar: board name, then the ring position. Everything
+ * else — the date, the per-board counters, the other tabs — is dropped rather
+ * than truncated mid-word, which is what the full bar does at 60 columns.
+ */
+function CompactBar(props: { store: TuiStore; label: string }) {
+  const boardName = () =>
+    props.store.state.boards[props.store.state.ui.activeBoardIndex]?.board.name ?? "";
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
+      <text wrapMode="none" style={{ flexShrink: 1 }}>
+        <span style={{ fg: T.textDim }}>{boardName() + "  "}</span>
+      </text>
+      <text wrapMode="none" style={{ flexShrink: 0 }}>
+        <span style={{ fg: T.accent, attributes: ATTR.bold }}>{props.label}</span>
+      </text>
+    </box>
+  );
+}
+
+/**
+ * Curated cheat-sheet: only the keys that keep you unstuck (move, switch
+ * zone/board, help, quit) plus the highest-frequency, on-brand actions (done,
+ * new, schedule). Everything else — zoom, toggles, multi-select,
+ * edit/assign/archive/delete, undo — lives in `?`.
+ */
+const HINTS_FULL =
+  "hjkl ↑↓←→ move · Tab board · ⇧Tab zone · ⏎ done · n new · t today · b block · c schedule · r refresh · z zoom · ? help · q quit";
+
+/**
+ * Single-pane keeps the ones that matter with one pane on screen: walking the
+ * ring, jumping zones, completing, and the way out. The full line is 130
+ * characters and this bar truncates rather than wraps, so at 60 columns the
+ * choice is not "which keys fit" but "which keys are still readable" — a hint
+ * cut to `⏎ don…` is worse than no hint.
+ */
+const HINTS_COMPACT = "hl pane · ⇧Tab zone · ⏎ done · ? help · q quit";
+
 export function BottomBar(props: { store: TuiStore }) {
   const banner = () => props.store.state.ui.banner;
+  const hints = () => (props.store.singlePane() ? HINTS_COMPACT : HINTS_FULL);
   return (
     <box style={{ flexDirection: "column", marginTop: 1 }}>
       <box style={{ height: 1, flexDirection: "row" }}>
@@ -107,16 +171,8 @@ export function BottomBar(props: { store: TuiStore }) {
         </Show>
       </box>
       <box style={{ height: 1, flexDirection: "row" }}>
-        {/*
-          Curated cheat-sheet: only the keys that keep you unstuck (move,
-          switch zone/board, help, quit) plus the highest-frequency, on-brand
-          actions (done, new, schedule). Everything else — zoom, toggles,
-          multi-select, edit/assign/archive/delete, undo — lives in `?`.
-        */}
         <text wrapMode="none" truncate>
-          <span style={{ fg: T.textDim }}>
-            {"hjkl ↑↓←→ move · Tab board · ⇧Tab zone · ⏎ done · n new · t today · b block · c schedule · r refresh · z zoom · ? help · q quit"}
-          </span>
+          <span style={{ fg: T.textDim }}>{hints()}</span>
         </text>
       </box>
     </box>