tuiboard 0.6.2 → 0.7.1

package/src/store/index.test.ts

@@ -10,7 +10,7 @@ describe("test runner smoke", () => {
 });
 
 /** Builds a minimal config with no boards — enough to exercise pure UI actions. */
-function emptyConfig(): Config {
+function emptyConfig(overrides: Partial<Config> = {}): Config {
   return {
     root: process.cwd(),
     loaded: false,
@@ -18,6 +18,8 @@ function emptyConfig(): Config {
     assignees: [],
     doneColumn: "Done",
     archiveColumn: "Archive",
+    zones: { planner: "on", agenda: "on", agents: "on" },
+    ...overrides,
   };
 }
 
@@ -29,16 +31,16 @@ describe("UI activeZone", () => {
 
   it("setActiveZone updates the zone", () => {
     const store = createTuiStore({ config: emptyConfig() });
-    store.setActiveZone("virtual");
-    expect(store.state.ui.activeZone).toBe("virtual");
+    store.setActiveZone("planner");
+    expect(store.state.ui.activeZone).toBe("planner");
     store.setActiveZone("timeline");
     expect(store.state.ui.activeZone).toBe("timeline");
   });
 
-  it("setActiveZone('virtual') resets row to 0", () => {
+  it("setActiveZone('planner') resets row to 0", () => {
     const store = createTuiStore({ config: emptyConfig() });
     store.setCursor(0, 7);
-    store.setActiveZone("virtual");
+    store.setActiveZone("planner");
     expect(store.state.ui.row).toBe(0);
   });
 });
@@ -47,7 +49,7 @@ describe("UI visibleZones", () => {
   it("defaults to all four zones visible", () => {
     const store = createTuiStore({ config: emptyConfig() });
     expect(store.state.ui.visibleZones).toEqual({
-      virtual: true,
+      planner: true,
       board: true,
       timeline: true,
       agents: true,
@@ -58,7 +60,7 @@ describe("UI visibleZones", () => {
     const store = createTuiStore({ config: emptyConfig() });
     store.setZoneVisible("timeline", false);
     expect(store.state.ui.visibleZones.timeline).toBe(false);
-    expect(store.state.ui.visibleZones.virtual).toBe(true);
+    expect(store.state.ui.visibleZones.planner).toBe(true);
     expect(store.state.ui.visibleZones.board).toBe(true);
     expect(store.state.ui.visibleZones.agents).toBe(true);
   });
@@ -80,7 +82,7 @@ describe("UI visibleZones", () => {
 describe("UI cycleActiveZone", () => {
   it("cycles through all visible zones in fixed order", () => {
     const store = createTuiStore({ config: emptyConfig() });
-    store.setActiveZone("virtual");
+    store.setActiveZone("planner");
     store.cycleActiveZone();
     expect(store.state.ui.activeZone).toBe("board");
     store.cycleActiveZone();
@@ -88,7 +90,7 @@ describe("UI cycleActiveZone", () => {
     store.cycleActiveZone();
     expect(store.state.ui.activeZone).toBe("agents");
     store.cycleActiveZone();
-    expect(store.state.ui.activeZone).toBe("virtual"); // wrap
+    expect(store.state.ui.activeZone).toBe("planner"); // wrap
   });
 
   it("skips hidden zones", () => {
@@ -101,7 +103,7 @@ describe("UI cycleActiveZone", () => {
 
   it("is a no-op when only one zone is visible (board only)", () => {
     const store = createTuiStore({ config: emptyConfig() });
-    store.setZoneVisible("virtual", false);
+    store.setZoneVisible("planner", false);
     store.setZoneVisible("timeline", false);
     store.setZoneVisible("agents", false);
     store.cycleActiveZone();
@@ -156,3 +158,67 @@ describe("Agenda day navigation", () => {
     expect(store.state.ui.row).toBe(0);
   });
 });
+
+describe("zones config", () => {
+  it("enables and shows all zones by default", () => {
+    const s = createTuiStore({ config: emptyConfig() });
+    expect(s.state.ui.enabledZones).toEqual({ board: true, planner: true, timeline: true, agents: true });
+    expect(s.state.ui.visibleZones).toEqual({ board: true, planner: true, timeline: true, agents: true });
+  });
+
+  it("disables a zone set to off (never enabled, never visible)", () => {
+    const s = createTuiStore({
+      config: emptyConfig({ zones: { planner: "on", agenda: "off", agents: "off" } }),
+    });
+    expect(s.state.ui.enabledZones.timeline).toBe(false);
+    expect(s.state.ui.enabledZones.agents).toBe(false);
+    expect(s.state.ui.visibleZones.timeline).toBe(false);
+    expect(s.state.ui.visibleZones.agents).toBe(false);
+  });
+
+  it("a hidden zone is enabled but not visible at start; F-key reveals it", () => {
+    const s = createTuiStore({
+      config: emptyConfig({ zones: { planner: "hidden", agenda: "on", agents: "on" } }),
+    });
+    expect(s.state.ui.enabledZones.planner).toBe(true);
+    expect(s.state.ui.visibleZones.planner).toBe(false);
+    s.toggleZoneDesired("planner");
+    expect(s.state.ui.visibleZones.planner).toBe(true);
+  });
+
+  it("F-key toggle is a no-op on a disabled zone", () => {
+    const s = createTuiStore({
+      config: emptyConfig({ zones: { planner: "on", agenda: "off", agents: "on" } }),
+    });
+    s.toggleZoneDesired("timeline");
+    expect(s.state.ui.visibleZones.timeline).toBe(false);
+  });
+
+  it("Shift-Tab cycle skips disabled zones", () => {
+    const s = createTuiStore({
+      config: emptyConfig({ zones: { planner: "on", agenda: "off", agents: "off" } }),
+    });
+    s.setActiveZone("board");
+    s.cycleActiveZone();
+    expect(s.state.ui.activeZone).toBe("planner");
+    s.cycleActiveZone();
+    expect(s.state.ui.activeZone).toBe("board"); // timeline + agents skipped
+  });
+
+  it("responsive fits never force-show a disabled zone", () => {
+    const s = createTuiStore({
+      config: emptyConfig({ zones: { planner: "on", agenda: "off", agents: "on" } }),
+    });
+    s.applyResponsiveFits({ planner: true, timeline: true, agents: true });
+    expect(s.state.ui.visibleZones.timeline).toBe(false); // disabled stays off
+    expect(s.state.ui.visibleZones.agents).toBe(true);
+  });
+
+  it("responsive hides a zone that doesn't fit; it returns when it fits again", () => {
+    const s = createTuiStore({ config: emptyConfig() });
+    s.applyResponsiveFits({ planner: true, timeline: false, agents: true });
+    expect(s.state.ui.visibleZones.timeline).toBe(false);
+    s.applyResponsiveFits({ planner: true, timeline: true, agents: true });
+    expect(s.state.ui.visibleZones.timeline).toBe(true);
+  });
+});

package/src/store/index.ts

@@ -8,7 +8,7 @@
  * The store also owns:
  *   - The list of loaded boards (with their original mtime watermark)
  *   - UI state: active board index, cursor (col/row), collapse flags,
- *     filter, mode (kanban / virtual / list)
+ *     filter, mode (kanban / planner / list)
  *   - The undo log
  *
  * Mutations always:
@@ -71,17 +71,28 @@ export type ModalKind =
   | { kind: "help" };
 
 /** Which dashboard zone owns the keyboard cursor. */
-export type ActiveZone = "virtual" | "board" | "timeline" | "agents";
+export type ActiveZone = "planner" | "board" | "timeline" | "agents";
 
 /** Fixed cycling order for Shift+Tab navigation. */
-const ZONE_ORDER: readonly ActiveZone[] = ["virtual", "board", "timeline", "agents"];
+const ZONE_ORDER: readonly ActiveZone[] = ["planner", "board", "timeline", "agents"];
 
 export interface UIState {
   activeBoardIndex: number;
   /** Which dashboard zone owns the keyboard cursor right now. */
   activeZone: ActiveZone;
-  /** Which zones are currently rendered. `board` cannot be hidden (load-bearing). */
+  /**
+   * Which zones are actually rendered right now. Derived from
+   * `enabledZones ∧ desiredVisible ∧ fits-at-current-width`. Read by the views;
+   * never set directly — go through setZoneVisible / toggleZoneDesired /
+   * applyResponsiveFits, which recompute it.
+   */
   visibleZones: Record<ActiveZone, boolean>;
+  /**
+   * Which zones are enabled at all (from the `zones:` config). A disabled zone
+   * is never rendered, is skipped by Shift-Tab, has an inert F-key, and its
+   * background work never started. `board` is always enabled.
+   */
+  enabledZones: Record<ActiveZone, boolean>;
   /** Column index (within active board) — meaningful only when `activeZone === "board"`. */
   col: number;
   /** Row index inside the active zone. */
@@ -109,7 +120,7 @@ export interface UIState {
   armedTimelineRef?: TaskRef;
   /**
    * Persistent calendar "arm mode" (toggled with `c`). While on, clicking any
-   * task in the board / virtual panel arms it for the timeline, so you can
+   * task in the board / planner panel arms it for the timeline, so you can
    * schedule several tasks in a row — click a task, click a slot, repeat —
    * without re-pressing `c`. `Esc` (or `c` again) exits. Distinct from
    * `armedTimelineRef`, which is the single task currently armed.
@@ -150,7 +161,7 @@ export interface StoreState {
   undo: UndoEntry[];
   /**
    * Monotonic mutation counter. Bumped on every board mutation (via
-   * `saveBoard`). Derived views (board columns, virtual panel, timeline) read
+   * `saveBoard`). Derived views (board columns, planner panel, timeline) read
    * it so their memos recompute on any change — a reliable top-level signal
    * dependency, since OpenTUI/Solid's fine-grained tracking of deeply-nested
    * store edits (e.g. growing a column's `children` array) doesn't always
@@ -169,12 +180,43 @@ export interface CreateStoreOptions {
 export function createTuiStore({ config }: CreateStoreOptions) {
   const initialBoards = loadAll(config);
 
+  // ─── Zone enablement (from `zones:` config) ──────────────────────────────
+  // `enabledZones` is a hard gate; `desiredVisible` is the user's runtime
+  // intent (F-keys flip it); `lastFits` is the terminal-width fit cache. The
+  // rendered `visibleZones` is the AND of all three. The board is always on.
+  const z = config.zones;
+  const enabledZones: Record<ActiveZone, boolean> = {
+    board: true,
+    planner: z.planner !== "off",
+    timeline: z.agenda !== "off",
+    agents: z.agents !== "off",
+  };
+  const desiredVisible: Record<ActiveZone, boolean> = {
+    board: true,
+    planner: z.planner === "on",
+    timeline: z.agenda === "on",
+    agents: z.agents === "on",
+  };
+  let lastFits: Record<ActiveZone, boolean> = {
+    board: true,
+    planner: true,
+    timeline: true,
+    agents: true,
+  };
+  const computeVisible = (): Record<ActiveZone, boolean> => ({
+    board: true,
+    planner: enabledZones.planner && desiredVisible.planner && lastFits.planner,
+    timeline: enabledZones.timeline && desiredVisible.timeline && lastFits.timeline,
+    agents: enabledZones.agents && desiredVisible.agents && lastFits.agents,
+  });
+
   const [state, setState] = createStore<StoreState>({
     boards: initialBoards,
     ui: {
       activeBoardIndex: 0,
       activeZone: "board",
-      visibleZones: { virtual: true, board: true, timeline: true, agents: true },
+      visibleZones: computeVisible(),
+      enabledZones,
       col: 0,
       row: 0,
       zoomed: false,
@@ -198,11 +240,17 @@ export function createTuiStore({ config }: CreateStoreOptions) {
   );
 
   // Agents store has its own lifecycle (chokidar watcher on ~/.claude).
-  // Shared dispose() boundary below so SIGINT cleans both.
-  const agentsStore: AgentsStore = createAgentsStore();
-  // Calendar feeds (read-only) merged into the Agenda zone. No-op when no
-  // `calendars:` block is configured.
-  const calendarStore: CalendarStore = createCalendarStore(config.calendars, isoToday);
+  // Shared dispose() boundary below so SIGINT cleans both. When the agents
+  // zone is disabled we skip the watcher entirely (no `~/.claude` reads at all)
+  // and hand back an inert stub.
+  const agentsStore: AgentsStore = enabledZones.agents
+    ? createAgentsStore()
+    : noopAgentsStore();
+  // Calendar feeds (read-only) merged into the Agenda zone. Skipped entirely
+  // (no network) when the agenda zone is disabled.
+  const calendarStore: CalendarStore = enabledZones.timeline
+    ? createCalendarStore(config.calendars, isoToday)
+    : noopCalendarStore();
   watcher.onChange((filepath) => {
     // External edit. Re-read this board from disk.
     try {
@@ -716,19 +764,46 @@ export function createTuiStore({ config }: CreateStoreOptions) {
 
   function setActiveZone(zone: ActiveZone): void {
     setState("ui", "activeZone", zone);
-    // Moving to a vertical-list zone (virtual / agents / timeline) resets
+    // Moving to a vertical-list zone (planner / agents / timeline) resets
     // the row cursor to the top so the user always lands somewhere sensible.
     if (zone !== "board") setState("ui", "row", 0);
   }
 
+  /** Recompute `visibleZones` from enabled ∧ desired ∧ fits; bounce the cursor
+   *  to the board if the active zone just became invisible. */
+  function recomputeVisible(): void {
+    const v = computeVisible();
+    setState("ui", "visibleZones", v);
+    if (!v[state.ui.activeZone]) setActiveZone("board");
+  }
+
+  /** Set a zone's desired visibility (user intent). Showing a disabled zone is
+   *  ignored; the board can never be hidden. Used by direct reveals (day-nav,
+   *  arm flow) and the responsive layout's per-zone calls. */
   function setZoneVisible(zone: ActiveZone, visible: boolean): void {
-    // Board is the load-bearing zone — never allow it to be hidden.
     if (zone === "board" && !visible) return;
-    setState("ui", "visibleZones", zone, visible);
-    // If we just hid the active zone, bounce the cursor to "board".
-    if (!visible && state.ui.activeZone === zone) {
-      setActiveZone("board");
-    }
+    if (visible && !enabledZones[zone]) return; // can't reveal a disabled zone
+    desiredVisible[zone] = visible;
+    recomputeVisible();
+  }
+
+  /** Flip a zone's visibility (the F1/F2/F3 toggles). No-op if disabled. */
+  function toggleZoneDesired(zone: ActiveZone): void {
+    if (zone === "board" || !enabledZones[zone]) return;
+    desiredVisible[zone] = !desiredVisible[zone];
+    recomputeVisible();
+  }
+
+  /** 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 {
+    lastFits = {
+      board: true,
+      planner: fits.planner !== false,
+      timeline: fits.timeline !== false,
+      agents: fits.agents !== false,
+    };
+    recomputeVisible();
   }
 
   function cycleActiveZone(): void {
@@ -1034,6 +1109,8 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     setCursor,
     setActiveZone,
     setZoneVisible,
+    toggleZoneDesired,
+    applyResponsiveFits,
     cycleActiveZone,
     toggleZoom,
     toggleGrab,
@@ -1069,6 +1146,22 @@ export type TuiStore = ReturnType<typeof createTuiStore>;
 
 // ─── Load helpers ────────────────────────────────────────────────────────────
 
+/** Inert agents store for when the agents zone is disabled — no chokidar
+ *  watcher, no `~/.claude` reads at all. */
+function noopAgentsStore(): AgentsStore {
+  return { sessions: () => [], refresh: () => {}, dispose: async () => {} };
+}
+
+/** Inert calendar store for when the agenda zone is disabled — no fetching. */
+function noopCalendarStore(): CalendarStore {
+  return {
+    events: () => [],
+    setActiveDate: () => {},
+    refresh: () => {},
+    dispose: async () => {},
+  };
+}
+
 function loadAll(config: Config): LoadedBoard[] {
   const out: LoadedBoard[] = [];
   for (const b of config.boards) {

package/src/ui/AgentsBar.tsx

@@ -1,7 +1,7 @@
 /**
  * Compact agent status strip for the dashboard. The non-archived sessions
  * render inside a vertical scrollbox so the list scrolls with the mouse wheel
- * (like the board / virtual / timeline zones) AND follows the keyboard cursor
+ * (like the board / planner / timeline zones) AND follows the keyboard cursor
  * via scrollChildIntoView — same pattern as BoardView's columns.
  *
  * The border color reflects activeZone === "agents" so the cursor ring is

package/src/ui/BoardView.tsx

@@ -1,7 +1,7 @@
 /**
  * Kanban board view — horizontal scrolling row of full-height columns.
  *
- * Mirrors the Today/Tomorrow virtual panel: each column has a fixed width
+ * Mirrors the Today/Tomorrow planner panel: each column has a fixed width
  * and stretches vertically to fill the board area. Columns that don't fit
  * the available horizontal space are reached via horizontal scroll. Zoom
  * mode collapses everything down to the single active column at full
@@ -31,6 +31,13 @@ interface SizedBoxLike {
 
 /** Fixed column width when not zoomed. Single source of truth for layout. */
 const COL_WIDTH = 42;
+/**
+ * Minimum fraction of a column that must be inside the viewport for its task
+ * rows to render. Above this, a column that's mostly on-screen keeps its tasks
+ * (the last one may be cut at the edge); below it — a thin sliver clipped at the
+ * edge — only the title shows as a "more columns →" hint.
+ */
+const MIN_TASKS_VISIBLE_FRACTION = 0.5;
 /**
  * Width of a collapsed column — one with no OPEN tasks (an all-done lane like
  * "Done", or an empty column). It shows just the `✓ N` counter; zoom (`z`)
@@ -88,7 +95,7 @@ export function BoardView(props: BoardViewProps) {
    * (Python kanban `z`).
    */
   const renderedColumns = createMemo(() => {
-    if (!ui().zoomed || ui().activeZone === "virtual") return visibleColumns();
+    if (!ui().zoomed || 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.
@@ -111,7 +118,7 @@ export function BoardView(props: BoardViewProps) {
   // geometry used everywhere (COL_WIDTH + COL_GAP).
   createEffect(() => {
     const colIdx = ui().col;
-    if (ui().zoomed || ui().activeZone === "virtual") {
+    if (ui().zoomed || ui().activeZone === "planner") {
       setScrollX(0);
       return;
     }
@@ -140,20 +147,26 @@ export function BoardView(props: BoardViewProps) {
   });
 
   /**
-   * Is the column at rendered index `i` fully inside the viewport? Used to
-   * blank the task rows of a column that's only partly on-screen. Defaults to
-   * true while the viewport width is still unknown (first paint) and in zoom.
+   * Should the column at rendered index `i` render its task rows? Yes unless
+   * it's clipped down to a thin sliver at the viewport edge (less than
+   * MIN_TASKS_VISIBLE_FRACTION on-screen) — then only its title shows as a
+   * "more columns →" hint. A mostly-visible column keeps its tasks even if the
+   * last one is cut at the edge. Defaults to true while the viewport width is
+   * still unknown (first paint) and in zoom.
    */
-  const columnFullyVisible = (i: number): boolean => {
+  const columnTasksVisible = (i: number): boolean => {
     const vw = viewportW();
     if (vw <= 0 || ui().zoomed) return true;
     const stride = COL_WIDTH + COL_GAP;
     const start = i * stride;
-    return start >= scrollX() && start + COL_WIDTH <= scrollX() + vw;
+    const left = Math.max(start, scrollX());
+    const right = Math.min(start + COL_WIDTH, scrollX() + vw);
+    const visibleFraction = Math.max(0, right - left) / COL_WIDTH;
+    return visibleFraction >= MIN_TASKS_VISIBLE_FRACTION;
   };
 
   // Measure the viewport width once at mount, regardless of the active zone.
-  // Otherwise — since tuiboard now starts focused on the virtual panel — the
+  // Otherwise — since tuiboard now starts focused on the planner panel — the
   // scroll effect early-returns and viewportW stays 0, so partly-clipped
   // columns briefly show their task rows until the board is first touched.
   onMount(() => {
@@ -199,7 +212,7 @@ export function BoardView(props: BoardViewProps) {
                   columnIndex={originalIndex}
                   active={isActive()}
                   zoomed={ui().zoomed && isActive()}
-                  fullyVisible={columnFullyVisible(i())}
+                  tasksVisible={columnTasksVisible(i())}
                   boxId={columnId(props.board.filepath, originalIndex)}
                 />
               );
@@ -223,11 +236,11 @@ interface ColumnViewProps {
    */
   zoomed: boolean;
   /**
-   * False when the column is only partly on-screen (clipped by horizontal
-   * scroll). Its title still renders (clipped) as a "more columns" hint, but
-   * the task rows are blanked so no half-cut task text shows.
+   * False when the column is clipped down to a thin sliver at the viewport
+   * edge. Its title still renders as a "more columns" hint, but the task rows
+   * are blanked. Mostly-visible columns keep their tasks.
    */
-  fullyVisible?: boolean;
+  tasksVisible?: boolean;
   /** Stable DOM-equivalent id used by `scrollChildIntoView`. */
   boxId: string;
 }
@@ -328,7 +341,7 @@ function ColumnView(props: ColumnViewProps) {
         flexShrink: 0,
         // No explicit height — Yoga stretches us along the row's cross
         // axis, so the column always fills the full board height. Same
-        // contract as the Today/Tomorrow virtual panel next door.
+        // contract as the Today/Tomorrow planner panel next door.
         marginRight: COL_GAP,
         border: true,
         borderStyle: "rounded",
@@ -349,9 +362,9 @@ function ColumnView(props: ColumnViewProps) {
           scrollbarOptions: { visible: false },
         }}
       >
-        {/* Blank the task rows when the column is only partly on-screen — its
-            (clipped) title still shows as a "more columns" hint. */}
-        <Show when={props.fullyVisible !== false}>
+        {/* Blank the task rows only when the column is a thin clipped sliver —
+            its title still shows as a "more columns" hint. */}
+        <Show when={props.tasksVisible !== false}>
         {/*
           Keyed on the task-list signature so a structural change (add/delete/
           move) rebuilds the <For> fresh in the correct order, working around

package/src/ui/Modal.tsx

@@ -20,41 +20,21 @@ import {
   parseTimeBlockShortcut,
 } from "~/store/parsers";
 import { ATTR, T } from "~/ui/glyphs";
+import { TIMELINE_WIDTH } from "~/views/Dashboard";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
-/** Fixed side-panel width for any modal. Wide enough for Detail / Help
- *  without being absurd for Edit / Confirm. */
-const MODAL_WIDTH = 64;
+/** The modal panel matches the Agenda's width so it can drop into the Agenda's
+ *  slot (which the Dashboard vacates while a modal is open) with no reflow. */
+const MODAL_WIDTH = TIMELINE_WIDTH;
 
 export function ModalLayer(props: { store: TuiStore }) {
   const modal = createMemo(() => props.store.state.ui.modal);
   return (
     <Show when={modal()}>
-      <box
-        style={{
-          flexDirection: "column",
-          width: MODAL_WIDTH,
-          minWidth: MODAL_WIDTH,
-          flexGrow: 0,
-          flexShrink: 0,
-          // Stretch to the parent's height so the modal panel matches
-          // the timeline / board zones it sits next to. Same contract as
-          // every other zone — fixed cross-axis size, full-height fill.
-          alignSelf: "stretch",
-          marginLeft: 1,
-          backgroundColor: T.panelBgActive,
-          border: true,
-          borderStyle: "rounded",
-          borderColor: T.borderActive,
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 1,
-          paddingBottom: 1,
-        }}
-      >
-        <ModalRouter store={props.store} modal={modal()!} />
-      </box>
+      {/* Each modal's DialogShell IS the panel box (border + title + slot
+          dimensions), so it drops into the Agenda's slot directly. */}
+      <ModalRouter store={props.store} modal={modal()!} />
     </Show>
   );
 }
@@ -87,11 +67,31 @@ interface DialogShellProps {
 function DialogShell(props: DialogShellProps) {
   void props.width;
   return (
-    <box style={{ flexDirection: "column" }}>
-      <text>
-        <span style={{ fg: T.accent, attributes: ATTR.bold }}>{props.title}</span>
-      </text>
-      <box style={{ height: 1 }} />
+    <box
+      style={{
+        // The modal panel: same width + marginLeft as the Agenda so it occupies
+        // the Agenda's slot (the Dashboard hides the Agenda while a modal is
+        // open) with no reflow. The title rides in the top border, exactly like
+        // the board columns and the other zones.
+        flexDirection: "column",
+        width: MODAL_WIDTH,
+        minWidth: MODAL_WIDTH,
+        flexGrow: 0,
+        flexShrink: 0,
+        alignSelf: "stretch",
+        marginLeft: 1,
+        backgroundColor: T.panelBgActive,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: T.borderActive,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
+      title={`┤ ${props.title} ├`}
+      titleAlignment="left"
+    >
       {props.children}
       <Show when={props.hint}>
         <text>
@@ -207,11 +207,7 @@ function ScheduleModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiS
 
   return (
     <DialogShell
-      title={
-        markedCount > 1
-          ? `Schedule ${markedCount} selected tasks`
-          : `Schedule: ${task?.displayTitle.slice(0, 50) ?? ""}`
-      }
+      title={markedCount > 1 ? `Schedule · ${markedCount} tasks` : "Schedule"}
       hint="t = today · tm = tomorrow · +3 = in 3 days · lun = next Monday · 2026-06-15 · empty/-clear · Esc to cancel"
       width={70}
     >
@@ -256,11 +252,7 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
 
   return (
     <DialogShell
-      title={
-        markedCount > 1
-          ? `Time block ${markedCount} selected tasks`
-          : `Time block: ${task?.displayTitle.slice(0, 50) ?? ""}`
-      }
+      title={markedCount > 1 ? `Time block · ${markedCount} tasks` : "Time block"}
       hint="n = now+30 · 9:00 · 9-11 · 09:30-10:45 · - to clear · Esc to cancel"
       width={70}
     >
@@ -588,12 +580,12 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  h j k l  ←↑↓→     Move cursor inside the active zone\n"}</span>
         <span style={{ fg: T.text }}>{"  Tab               Next board (kanban zone)\n"}</span>
         <span style={{ fg: T.text }}>{"  1..9              Jump to board N\n"}</span>
-        <span style={{ fg: T.text }}>{"  v                 Toggle Today/Tomorrow virtual panel focus\n"}</span>
-        <span style={{ fg: T.text }}>{"  Shift-Tab         Cycle active zone (virtual → board → timeline → agents)\n"}</span>
-        <span style={{ fg: T.text }}>{"  F1 / F2 / F3      Toggle visibility of Virtual / Timeline / Agents zones\n"}</span>
+        <span style={{ fg: T.text }}>{"  v                 Toggle Today/Tomorrow planner panel focus\n"}</span>
+        <span style={{ fg: T.text }}>{"  Shift-Tab         Cycle active zone (planner → board → timeline → agents)\n"}</span>
+        <span style={{ fg: T.text }}>{"  F1 / F2 / F3      Toggle visibility of Planner / Timeline / Agents zones\n"}</span>
         <span style={{ fg: T.text }}>{"  z                 Zoom active zone (or column) to full screen\n"}</span>
         <span style={{ fg: T.text }}>{"  r                 Refresh everything (boards from disk, agents, agenda calendar)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nTask actions (work in board, virtual, AND timeline zones)\n"}</span>
+        <span style={{ fg: T.textDim }}>{"\nTask actions (work in board, planner, AND timeline zones)\n"}</span>
         <span style={{ fg: T.text }}>{"  Enter             Toggle done\n"}</span>
         <span style={{ fg: T.text }}>{"  o                 Open detail view\n"}</span>
         <span style={{ fg: T.text }}>{"  e                 Edit task text\n"}</span>