tuiboard 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Terminal dashboard for markdown task boards. Kanban + Today/Tomorrow + 24h timeline + Claude Code agent view, all in one TUI.",
   "type": "module",
   "license": "MIT",

package/src/app.tsx

@@ -76,6 +76,13 @@ function applyResponsiveLayout(): void {
 applyResponsiveLayout();
 process.stdout.on("resize", applyResponsiveLayout);
 
+// Land on the Today/Tomorrow panel by default — for a daily-planning tool the
+// first question is "what's on my plate today", and that panel answers it. On
+// a narrow terminal where the panel auto-hides, fall back to the board.
+if (store.state.ui.visibleZones.virtual) {
+  store.setActiveZone("virtual");
+}
+
 const { view } = parseArgs(process.argv.slice(2));
 
 // ─── App shell ──────────────────────────────────────────────────────────────

package/src/input/handleKey.ts

@@ -49,10 +49,11 @@ export function handleKey(
       return;
     }
     if (ui.modal.kind === "confirm-delete") {
-      if (key.name === "y") {
-        const ref = ui.modal.ref;
-        store.deleteTask(ref);
+      if (key.name === "y" || key.name === "enter" || key.name === "return") {
+        // Delete the whole multi-selection if any, else just the cursor task.
+        const n = store.applyToMarkedOr(ui.modal.ref, (r) => store.deleteTask(r));
         store.closeModal();
+        if (n > 1) store.flashBanner("info", `Deleted ${n} tasks`);
       } else if (key.name === "n") {
         store.closeModal();
       }
@@ -532,7 +533,8 @@ function dispatchTaskAction(
     return true;
   }
 
-  // Multi-select toggle
+  // Multi-select toggle. The cursor stays put so you can mark in any order
+  // (contiguous or sparse) and unmark freely with j/k + Space.
   if (key.name === "space") {
     store.toggleMark(ref);
     return true;

package/src/store/index.ts

@@ -141,6 +141,16 @@ export interface StoreState {
   boards: LoadedBoard[];
   ui: UIState;
   undo: UndoEntry[];
+  /**
+   * Monotonic mutation counter. Bumped on every board mutation (via
+   * `saveBoard`). Derived views (board columns, virtual 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
+   * propagate to an already-mounted `<For>`. This is the same mechanism that
+   * makes a board switch refresh everything.
+   */
+  rev: number;
 }
 
 // ─── Construction ───────────────────────────────────────────────────────────
@@ -168,9 +178,13 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       filter: "all",
     },
     undo: [],
+    rev: 0,
   });
 
   // ─── Watcher ─────────────────────────────────────────────────────────────
+  // Last content tuiboard itself wrote per board path — used by the watcher's
+  // self-write guard to ignore our own writes echoed back by the OS / sync.
+  const lastWrittenContent = new Map<string, string>();
   const watcher: BoardWatcher = createBoardWatcher(
     initialBoards.map((b) => b.board.filepath),
   );
@@ -182,6 +196,13 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     // External edit. Re-read this board from disk.
     try {
       const content = readFileSync(filepath, "utf-8");
+      // Robust self-write guard: if what's on disk is byte-identical to what we
+      // last wrote, this event is our own write echoed back — even if the mtime
+      // changed (Windows fs latency, antivirus, or Obsidian/vault-sync
+      // re-saving the same bytes). The in-memory board is authoritative, so
+      // reloading would only clobber a just-added/edited task with no net
+      // change — and spuriously flash "Reloaded after external edit". Skip.
+      if (lastWrittenContent.get(filepath) === content) return;
       const { board } = parseBoard(content, { filepath });
       const mtimeMs = statMtime(filepath);
       setState(
@@ -192,6 +213,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
           lb.mtimeMs = mtimeMs;
         }),
       );
+      setState("rev", (r) => r + 1);
       flashBanner("info", `Reloaded ${board.name} after external edit`);
     } catch (e) {
       flashBanner("error", `Reload failed: ${(e as Error).message}`);
@@ -256,8 +278,16 @@ export function createTuiStore({ config }: CreateStoreOptions) {
   function saveBoard(boardPath: string): void {
     const lb = getBoardByPath(boardPath);
     if (!lb) return;
+    // Signal "data changed" to every derived view (see StoreState.rev). This
+    // runs for every mutation since they all persist through saveBoard.
+    setState("rev", (r) => r + 1);
     try {
       const content = serializeBoard(lb.board);
+      // Record what we're writing so the watcher can recognize this exact
+      // content echoed back (Obsidian / vault-sync may re-save the file with
+      // identical bytes but a fresh mtime — a content match means it's still
+      // our write, not a genuine external edit).
+      lastWrittenContent.set(boardPath, content);
       watcher.markSelfWrite(boardPath);
       const { mtimeMs } = writeBoardFile(boardPath, content, {
         expectedMtimeMs: lb.mtimeMs,
@@ -504,23 +534,24 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       timeBlockSource: init.timeBlock ? "watch-emoji" : undefined,
     };
 
-    let taskIndex = 0;
+    // Insert by REASSIGNING the children array (not an in-place unshift/push
+    // inside produce). A new array reference is what Solid's <For> reliably
+    // reconciles; the in-place mutation left the mounted column stale until the
+    // board was switched away and back. (Delete uses splice and happened to
+    // re-render, but reassignment is the dependable pattern for both grow and
+    // shrink.)
+    const prevTaskCount = listTasks(col).length;
     setState(
       "boards",
       (b) => b.board.filepath === boardPath,
       "board",
       "columns",
       columnIndex,
-      produce((c: Column) => {
-        if (insertPos === "top") {
-          c.children.unshift(newTask);
-          taskIndex = 0;
-        } else {
-          c.children.push(newTask);
-          taskIndex = listTasks(c).length - 1;
-        }
-      }),
+      "children",
+      (prev: Column["children"]) =>
+        insertPos === "top" ? [newTask, ...prev] : [...prev, newTask],
     );
+    const taskIndex = insertPos === "top" ? 0 : prevTaskCount;
 
     pushUndo({
       description: `add task: ${init.displayTitle.slice(0, 40)}`,
@@ -763,26 +794,52 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       if (m[key]) delete m[key];
       else m[key] = true;
     }));
+    // Bump rev so the ● indicators re-render. OpenTUI/Solid's fine-grained
+    // tracking of a dynamic-key Record doesn't reliably reach the mounted
+    // task rows; rev is the proven top-level signal (same as the cursor).
+    setState("rev", (r) => r + 1);
   }
 
   function isMarked(ref: TaskRef): boolean {
+    state.rev; // subscribe to the mutation counter (see toggleMark/clearMarks)
     return state.ui.marked[markKey(ref)] === true;
   }
 
   function clearMarks(): void {
-    setState("ui", "marked", {});
+    // Delete keys via produce (NOT `setState("ui","marked",{})`): replacing the
+    // whole object doesn't notify subscribers that read it via Object.keys(),
+    // so the ● indicators wouldn't repaint. A produce-mutation does notify
+    // granularly — same path toggleMark uses.
+    setState("ui", "marked", produce((m: Record<string, true>) => {
+      for (const k of Object.keys(m)) delete m[k];
+    }));
+    setState("rev", (r) => r + 1);
   }
 
-  /** Decoded list of currently marked refs. */
+  /**
+   * Decoded list of currently marked refs, sorted by board, then column, then
+   * taskIndex DESCENDING. The descending order matters for index-shifting
+   * operations (delete, archive/move): processing the highest taskIndex first
+   * means earlier indices stay valid as later tasks are removed. Order is
+   * irrelevant for in-place edits (schedule, time block, priority, done).
+   */
   function getMarkedRefs(): TaskRef[] {
-    return Object.keys(state.ui.marked).map((k) => {
-      const [boardPath, ci, ti] = k.split("::");
-      return {
-        boardPath: boardPath!,
-        columnIndex: Number(ci),
-        taskIndex: Number(ti),
-      };
-    });
+    return Object.keys(state.ui.marked)
+      .map((k) => {
+        const [boardPath, ci, ti] = k.split("::");
+        return {
+          boardPath: boardPath!,
+          columnIndex: Number(ci),
+          taskIndex: Number(ti),
+        };
+      })
+      .sort((a, b) =>
+        a.boardPath !== b.boardPath
+          ? a.boardPath.localeCompare(b.boardPath)
+          : a.columnIndex !== b.columnIndex
+            ? a.columnIndex - b.columnIndex
+            : b.taskIndex - a.taskIndex,
+      );
   }
 
   /**

package/src/ui/AgentRow.tsx

@@ -2,7 +2,7 @@
  * Single-line render of an AgentSession. Used in both AgentsBar (compact
  * dashboard strip) and AgentsOnly (fullscreen list).
  *
- * Layout: cursor · status-dot · name · git branch · cwd_short · age
+ * Layout: cursor · status-dot · name · git branch  ……right-pinned: cwd_short · age
  */
 
 import { Show, createMemo } from "solid-js";
@@ -69,10 +69,13 @@ export function AgentRow(props: AgentRowProps) {
         <Show when={props.session.gitBranch}>
           <span style={{ fg: T.textDim }}>{"  "}{props.session.gitBranch}</span>
         </Show>
-        <span style={{ fg: T.textDim }}>{"  "}{props.session.cwdShort}</span>
       </text>
+      {/* cwd + age pinned together on the right, so the session titles align
+          cleanly on the left instead of being pushed around by the path. */}
       <text style={{ flexShrink: 0 }} wrapMode="none">
-        <span style={{ fg: T.textDim }}>{" "}{ageStr()}</span>
+        <span style={{ fg: T.textDim }}>
+          {props.session.cwdShort}{"   "}{ageStr()}
+        </span>
       </text>
     </box>
   );

package/src/ui/AgentsBar.tsx

@@ -58,7 +58,10 @@ export function AgentsBar(props: AgentsBarProps) {
         flexDirection: "column",
         height: props.height,
         flexGrow: props.height ? 0 : 1,
-        marginTop: 1,
+        // No top gap — the agents strip sits flush under the board columns so
+        // the columns reclaim that row (the 1-row gap read as ~double the
+        // timeline's 1-col gap because terminal cells are taller than wide).
+        marginTop: 0,
         border: true,
         borderStyle: "rounded",
         borderColor: isActive() ? T.borderActive : T.border,

package/src/ui/BoardView.tsx

@@ -8,7 +8,7 @@
  * board width.
  */
 
-import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onMount } from "solid-js";
 
 import { isHiddenColumn } from "~/config/loader";
 import { isTask } from "~/parser/markdown";
@@ -66,6 +66,11 @@ export function BoardView(props: BoardViewProps) {
   // Horizontal scroll offset in cells, applied as a negative left margin on
   // the inner column row. A signal so the shift re-renders reactively.
   const [scrollX, setScrollX] = createSignal(0);
+  // Laid-out viewport width, captured alongside the scroll so we can tell
+  // which columns are fully visible (and blank the task rows of the ones that
+  // are only partly on-screen — keeps a clipped column's title as a "there's
+  // more" hint without the chopped-word task text).
+  const [viewportW, setViewportW] = createSignal(0);
 
   /**
    * Columns shown in the view — the Done and Archive columns are filtered
@@ -115,14 +120,14 @@ export function BoardView(props: BoardViewProps) {
       (c) => cols.indexOf(c) === colIdx,
     );
     if (visibleIndex < 0) return;
-    // Columns are uniform width today, so the active column's start offset is
-    // visibleIndex * stride. Passing an explicit start/width (rather than an
-    // index) keeps the geometry correct if columns ever become variable-width.
     const colStart = visibleIndex * (COL_WIDTH + COL_GAP);
     // setTimeout(0) lets OpenTUI commit layout so viewportRef.width is current.
+    // Minimal scroll (right-align when off-screen) — a partly-cut neighbouring
+    // column is left as a "there's more to scroll" hint.
     setTimeout(() => {
       const vw = viewportRef?.width ?? 0;
       if (vw <= 0) return;
+      setViewportW(vw);
       setScrollX((prev) =>
         computeColumnScrollLeft({
           colStart,
@@ -134,6 +139,30 @@ export function BoardView(props: BoardViewProps) {
     }, 0);
   });
 
+  /**
+   * 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.
+   */
+  const columnFullyVisible = (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;
+  };
+
+  // Measure the viewport width once at mount, regardless of the active zone.
+  // Otherwise — since tuiboard now starts focused on the virtual 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(() => {
+    setTimeout(() => {
+      const vw = viewportRef?.width ?? 0;
+      if (vw > 0) setViewportW(vw);
+    }, 0);
+  });
+
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
       {/* Clipping viewport: fills the board zone, hides overflow. */}
@@ -158,7 +187,7 @@ export function BoardView(props: BoardViewProps) {
           }}
         >
           <For each={renderedColumns()}>
-            {(col) => {
+            {(col, i) => {
               const originalIndex = props.board.columns.indexOf(col);
               const isActive = () =>
                 ui().activeZone === "board" && ui().col === originalIndex;
@@ -170,6 +199,7 @@ export function BoardView(props: BoardViewProps) {
                   columnIndex={originalIndex}
                   active={isActive()}
                   zoomed={ui().zoomed && isActive()}
+                  fullyVisible={columnFullyVisible(i())}
                   boxId={columnId(props.board.filepath, originalIndex)}
                 />
               );
@@ -192,6 +222,12 @@ interface ColumnViewProps {
    * shown inline because the user has explicitly focused this column.
    */
   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.
+   */
+  fullyVisible?: boolean;
   /** Stable DOM-equivalent id used by `scrollChildIntoView`. */
   boxId: string;
 }
@@ -202,7 +238,13 @@ function taskRowId(boardPath: string, colIdx: number, rowIdx: number): string {
 }
 
 function ColumnView(props: ColumnViewProps) {
-  const allTasks = createMemo(() => props.column.children.filter(isTask));
+  const allTasks = createMemo(() => {
+    // Subscribe to the store's mutation counter so this list recomputes on
+    // any board change — fine-grained tracking of a nested children-array
+    // edit doesn't reliably re-render an already-mounted <For> here.
+    props.store.state.rev;
+    return props.column.children.filter(isTask);
+  });
   const openTasks = createMemo(() =>
     props.store.applyBoardFilter(allTasks().filter((t) => !t.done)),
   );
@@ -210,9 +252,36 @@ function ColumnView(props: ColumnViewProps) {
 
   // In zoom mode, show open tasks first, then a divider, then done tasks.
   // In normal mode, show only open tasks; done collapse to a counter.
-  const visibleTasks = createMemo(() => {
-    if (props.zoomed) return [...openTasks(), ...doneTasks()];
-    return openTasks();
+  const visibleTasks = createMemo(() =>
+    props.zoomed ? [...openTasks(), ...doneTasks()] : openTasks(),
+  );
+
+  // Structural signature of the visible task list (id + order). OpenTUI's <For>
+  // appends a prepended/inserted item to the END of the rendered container
+  // instead of placing it at its array index — so after an add the data is
+  // right but the on-screen order is wrong until a full remount. We key a
+  // <Show> on this signature: when membership/order changes (add / delete /
+  // move) it changes, forcing the list to rebuild fresh in the correct order
+  // (the same thing a board switch does). A plain text edit leaves ids/order
+  // untouched → no remount → cheap in-place update.
+  const taskListKey = createMemo(() => {
+    props.store.state.rev; // recompute on any mutation, including mark changes
+    const ids = visibleTasks().map((t) => t.id).join("|");
+    // Fold the current selection into the key too. OpenTUI doesn't reliably
+    // re-render a per-row `marked` prop on a store change, so a selection
+    // change (mark / unmark / clear) must rebuild the list to repaint the ●
+    // dots — same remount trick the add fix relies on. Without this, cleared
+    // marks stayed stuck on whatever task now sits at that position.
+    const marks = props.store
+      .getMarkedRefs()
+      .filter(
+        (r) =>
+          r.boardPath === props.board.filepath &&
+          r.columnIndex === props.columnIndex,
+      )
+      .map((r) => r.taskIndex)
+      .join(",");
+    return `${ids}#${marks}`;
   });
 
   const cursorRow = createMemo(() => props.store.state.ui.row);
@@ -280,44 +349,57 @@ function ColumnView(props: ColumnViewProps) {
           scrollbarOptions: { visible: false },
         }}
       >
-        <For each={visibleTasks()}>
-          {(task, ri) => {
-            const ref = {
-              boardPath: props.board.filepath,
-              columnIndex: props.columnIndex,
-              taskIndex: allTasks().indexOf(task),
-            };
-            return (
-              <box id={taskRowId(props.board.filepath, props.columnIndex, ri())}>
-                <TaskRow
-                  task={task}
-                  cursor={props.active && ri() === cursorRow()}
-                  marked={props.store.isMarked(ref)}
-                  grabbed={
-                    props.active &&
-                    ri() === cursorRow() &&
-                    props.store.state.ui.grabbing
-                  }
-                  // Column inner cell width for a TaskRow: COL_WIDTH 42 −
-                  // border 2 − col padding 2 − TaskRow padding 2 = 36 cols
-                  // (when not zoomed). Zoomed → column grows to fill, so
-                  // ~terminal width − some chrome.
-                  availableWidth={props.zoomed ? 100 : 36}
-                  onClick={() => {
-                    props.store.setActiveZone("board");
-                    props.store.setCursor(props.columnIndex, ri());
-                    // In calendar arm mode, a click also arms the task so the
-                    // user can immediately drop it on a timeline slot.
-                    if (props.store.state.ui.armMode) {
-                      props.store.armTimeline(ref);
-                      props.store.setZoneVisible("timeline", true);
-                    }
-                  }}
-                />
-              </box>
-            );
-          }}
-        </For>
+        {/* 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}>
+        {/*
+          Keyed on the task-list signature so a structural change (add/delete/
+          move) rebuilds the <For> fresh in the correct order, working around
+          OpenTUI's <For> appending inserted items to the end. Text-only edits
+          keep the same key → no rebuild → in-place update.
+        */}
+        <Show when={taskListKey()} keyed>
+          {() => (
+            <For each={visibleTasks()}>
+              {(task, ri) => {
+                const ref = {
+                  boardPath: props.board.filepath,
+                  columnIndex: props.columnIndex,
+                  taskIndex: allTasks().indexOf(task),
+                };
+                return (
+                  <box id={taskRowId(props.board.filepath, props.columnIndex, ri())}>
+                    <TaskRow
+                      task={task}
+                      cursor={props.active && ri() === cursorRow()}
+                      marked={props.store.isMarked(ref)}
+                      grabbed={
+                        props.active &&
+                        ri() === cursorRow() &&
+                        props.store.state.ui.grabbing
+                      }
+                      // Column inner cell width for a TaskRow: COL_WIDTH 42 −
+                      // border 2 − col padding 2 − TaskRow padding 2 = 36 cols
+                      // (when not zoomed). Zoomed → column grows to fill, so
+                      // ~terminal width − some chrome.
+                      availableWidth={props.zoomed ? 100 : 36}
+                      onClick={() => {
+                        props.store.setActiveZone("board");
+                        props.store.setCursor(props.columnIndex, ri());
+                        // In calendar arm mode, a click also arms the task so
+                        // the user can immediately drop it on a timeline slot.
+                        if (props.store.state.ui.armMode) {
+                          props.store.armTimeline(ref);
+                          props.store.setZoneVisible("timeline", true);
+                        }
+                      }}
+                    />
+                  </box>
+                );
+              }}
+            </For>
+          )}
+        </Show>
 
         <Show when={!props.zoomed && doneTasks().length > 0}>
           <box
@@ -333,6 +415,7 @@ function ColumnView(props: ColumnViewProps) {
             </text>
           </box>
         </Show>
+        </Show>
       </scrollbox>
     </box>
   );

package/src/ui/Chrome.tsx

@@ -30,44 +30,40 @@ export function TopBar(props: { store: TuiStore }) {
     return { open, done, cols };
   };
 
-  // Build a flat token list for the tab row so we can render as a single
-  // <text> without JSX fragments (which OpenTUI's Solid renderer doesn't
-  // play well with inside <text>).
-  const tabsText = () => {
-    const parts: Array<{ text: string; active: boolean; brand?: boolean }> = [];
-    parts.push({ text: "tuiboard", active: false, brand: true });
-    parts.push({ text: `  ${isoToday()}   `, active: false });
-    boards().forEach((b: { board: { name: string } }, i: number) => {
-      const isActive = i === active();
-      parts.push({
-        text: isActive ? `[${i + 1} ${b.board.name}]` : ` ${i + 1} ${b.board.name} `,
-        active: isActive,
-      });
-      parts.push({ text: " ", active: false });
-    });
-    return parts;
-  };
-
   return (
     <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
-      <text wrapMode="none" truncate style={{ flexGrow: 1, flexShrink: 1 }}>
-        <For each={tabsText()}>
-          {(p) => (
-            <span
-              style={{
-                fg: p.brand
-                  ? T.accent
-                  : p.active
-                    ? T.accent
-                    : T.textDim,
-                attributes: p.brand || p.active ? ATTR.bold : 0,
-              }}
-            >
-              {p.text}
-            </span>
-          )}
+      <box style={{ flexDirection: "row", flexShrink: 1, overflow: "hidden" }}>
+        {/* Brand + date */}
+        <text wrapMode="none" style={{ flexShrink: 0 }}>
+          <span style={{ fg: T.todayPale, attributes: ATTR.bold }}>tuiboard</span>
+          <span style={{ fg: T.textDim }}>{`  ${isoToday()}   `}</span>
+        </text>
+        {/* Clickable board tabs */}
+        <For each={boards()}>
+          {(b: { board: { name: string } }, i) => {
+            const isActive = () => i() === active();
+            return (
+              <box
+                style={{ flexShrink: 0, flexDirection: "row" }}
+                onMouseDown={() => props.store.setActiveBoard(i())}
+              >
+                <text wrapMode="none">
+                  <span
+                    style={{
+                      fg: isActive() ? T.accent : T.textDim,
+                      attributes: isActive() ? ATTR.bold : 0,
+                    }}
+                  >
+                    {isActive()
+                      ? `[${i() + 1} ${b.board.name}] `
+                      : ` ${i() + 1} ${b.board.name}  `}
+                  </span>
+                </text>
+              </box>
+            );
+          }}
         </For>
-      </text>
+      </box>
       <Show when={activeStats()}>
         <text wrapMode="none" style={{ flexShrink: 0, marginLeft: 2 }}>
           <span style={{ fg: T.textDim }}>
@@ -119,7 +115,7 @@ export function BottomBar(props: { store: TuiStore }) {
         */}
         <text wrapMode="none" truncate>
           <span style={{ fg: T.textDim }}>
-            {"hjkl move · Tab board · ⇧Tab zone · ⏎ done · n new · c schedule · ? help · q quit"}
+            {"hjkl move · Tab board · ⇧Tab zone · ⏎ done · n new · t today · b block · c schedule · z zoom · ? help · q quit"}
           </span>
         </text>
       </box>

package/src/ui/Modal.tsx

@@ -188,6 +188,7 @@ function EditModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore
 
 function ScheduleModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "schedule" }> }) {
   const task = props.store.getTask(props.modal.ref);
+  const markedCount = props.store.getMarkedRefs().length;
   const [value, setValue] = createSignal(task?.scheduled ?? "");
   const [error, setError] = createSignal<string | undefined>();
 
@@ -197,13 +198,20 @@ function ScheduleModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiS
       setError(`Cannot parse "${text}". Try: t · tm · +3 · lun · 2026-06-15`);
       return;
     }
-    props.store.setScheduled(props.modal.ref, d ?? undefined);
+    const n = props.store.applyToMarkedOr(props.modal.ref, (r) =>
+      props.store.setScheduled(r, d ?? undefined),
+    );
+    if (n > 1) props.store.flashBanner("info", `${n} tasks scheduled`);
     props.store.closeModal();
   }
 
   return (
     <DialogShell
-      title={`Schedule: ${task?.displayTitle.slice(0, 50) ?? ""}`}
+      title={
+        markedCount > 1
+          ? `Schedule ${markedCount} selected tasks`
+          : `Schedule: ${task?.displayTitle.slice(0, 50) ?? ""}`
+      }
       hint="t = today · tm = tomorrow · +3 = in 3 days · lun = next Monday · 2026-06-15 · empty/-clear · Esc to cancel"
       width={70}
     >
@@ -226,6 +234,7 @@ function ScheduleModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiS
 
 function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "timeblock" }> }) {
   const task = props.store.getTask(props.modal.ref);
+  const markedCount = props.store.getMarkedRefs().length;
   const init = task?.timeBlock
     ? `${fmtMin(task.timeBlock.startMin)}-${fmtMin(task.timeBlock.endMin)}`
     : "";
@@ -238,13 +247,20 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
       setError(`Cannot parse "${text}". Try: n · 9:00 · 9-11 · 09:30-10:45 · - to clear`);
       return;
     }
-    props.store.setTimeBlock(props.modal.ref, r ?? undefined);
+    const n = props.store.applyToMarkedOr(props.modal.ref, (ref) =>
+      props.store.setTimeBlock(ref, r ?? undefined),
+    );
+    if (n > 1) props.store.flashBanner("info", `${n} tasks time-blocked`);
     props.store.closeModal();
   }
 
   return (
     <DialogShell
-      title={`Time block: ${task?.displayTitle.slice(0, 50) ?? ""}`}
+      title={
+        markedCount > 1
+          ? `Time block ${markedCount} selected tasks`
+          : `Time block: ${task?.displayTitle.slice(0, 50) ?? ""}`
+      }
       hint="n = now+30 · 9:00 · 9-11 · 09:30-10:45 · - to clear · Esc to cancel"
       width={70}
     >
@@ -267,16 +283,24 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
 
 function AssignModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "assign" }> }) {
   const task = props.store.getTask(props.modal.ref);
+  const markedCount = props.store.getMarkedRefs().length;
   const [value, setValue] = createSignal(task?.assignee ?? "");
 
   function submit(text: string) {
     const t = text.trim().replace(/^@/, "");
-    props.store.setAssignee(props.modal.ref, t || undefined);
+    const n = props.store.applyToMarkedOr(props.modal.ref, (r) =>
+      props.store.setAssignee(r, t || undefined),
+    );
+    if (n > 1) props.store.flashBanner("info", `${n} tasks assigned`);
     props.store.closeModal();
   }
 
   return (
-    <DialogShell title="Assignee" hint="Name without @ · empty to clear · Esc to cancel" width={50}>
+    <DialogShell
+      title={markedCount > 1 ? `Assignee — ${markedCount} selected tasks` : "Assignee"}
+      hint="Name without @ · empty to clear · Esc to cancel"
+      width={50}
+    >
       <input
         focused
         value={value()}
@@ -291,14 +315,20 @@ function AssignModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiSto
 
 function ConfirmDeleteModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "confirm-delete" }> }) {
   const task = props.store.getTask(props.modal.ref);
+  const markedCount = props.store.getMarkedRefs().length;
+  const bulk = markedCount > 1;
   return (
     <DialogShell
-      title="Delete task?"
-      hint="y to confirm · Esc/n to cancel"
+      title={bulk ? `Delete ${markedCount} selected tasks?` : "Delete task?"}
+      hint="⏎/y confirm · Esc/n cancel"
       width={70}
     >
       <text>
-        <span style={{ fg: T.text }}>{task?.displayTitle ?? "(missing)"}</span>
+        <span style={{ fg: T.text }}>
+          {bulk
+            ? `${markedCount} marked tasks will be deleted.`
+            : task?.displayTitle ?? "(missing)"}
+        </span>
       </text>
     </DialogShell>
   );
@@ -594,9 +624,10 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  Enter             Open (resume) the selected session in a new WezTerm tab\n"}</span>
         <span style={{ fg: T.text }}>{"  o                 Session detail (cwd, branch, last prompts, resume cmd)\n"}</span>
         <span style={{ fg: T.textDim }}>{"\nMulti-select\n"}</span>
-        <span style={{ fg: T.text }}>{"  Space             Mark / unmark task — single-task actions then\n"}</span>
-        <span style={{ fg: T.text }}>{"                    apply to ALL marked instead of just the cursor\n"}</span>
-        <span style={{ fg: T.text }}>{"  Esc               Clear marks (when no modal is open)\n"}</span>
+        <span style={{ fg: T.text }}>{"  Space             Mark / unmark task (cursor stays — mark in any order)\n"}</span>
+        <span style={{ fg: T.text }}>{"                    Every task action (done/schedule/time block/assign/\n"}</span>
+        <span style={{ fg: T.text }}>{"                    priority/archive/delete) then applies to ALL marked\n"}</span>
+        <span style={{ fg: T.text }}>{"  Esc               Clear the selection (when no modal is open)\n"}</span>
         <span style={{ fg: T.textDim }}>{"\nBulk\n"}</span>
         <span style={{ fg: T.text }}>{"  T                 Reset ALL overdue tasks (any board) to today\n"}</span>
         <span style={{ fg: T.textDim }}>{"\nGlobal\n"}</span>

package/src/ui/TaskRow.tsx

@@ -29,12 +29,6 @@ interface TaskRowProps {
   contextColor?: string;
   /** If true, hide the date suffix (used when group header already conveys date). */
   hideDateSuffix?: boolean;
-  /**
-   * Optional title tint (e.g. the source-board accent in the virtual panel).
-   * Applies only to non-done, non-overdue, non-today rows — those keep their
-   * status color. Done-green always wins over any tint.
-   */
-  tintColor?: string;
   /**
    * Total cell width available to this row, in terminal columns. When set,
    * TaskRow computes the exact title budget from this width minus the row's
@@ -52,9 +46,7 @@ interface TaskRowProps {
 export function TaskRow(props: TaskRowProps) {
   const status = createMemo(() => statusOf(props.task));
   const suffix = createMemo(() => buildSuffix(props.task, props.hideDateSuffix));
-  const titleColor = createMemo(() =>
-    titleColorFor(props.task, status(), props.tintColor),
-  );
+  const titleColor = createMemo(() => titleColorFor(props.task, status()));
   const suffixColor = createMemo(() => suffixColorFor(props.task, status()));
 
   // Compute the title budget from availableWidth + this row's actual overhead
@@ -157,7 +149,13 @@ export function TaskRow(props: TaskRowProps) {
   );
 }
 
-type TaskStatus = "done" | "overdue" | "today" | "future" | "unscheduled";
+type TaskStatus =
+  | "done"
+  | "overdue"
+  | "today"
+  | "tomorrow"
+  | "future"
+  | "unscheduled";
 
 function statusOf(t: Task): TaskStatus {
   if (t.done) return "done";
@@ -165,26 +163,24 @@ function statusOf(t: Task): TaskStatus {
   if (!d) return "unscheduled";
   if (d < isoToday()) return "overdue";
   if (d === isoToday()) return "today";
+  if (d === isoTomorrow()) return "tomorrow";
   return "future";
 }
 
-function titleColorFor(
-  task: Task,
-  status: TaskStatus,
-  tintColor?: string,
-): string | undefined {
-  // Done-green always wins so a completed task reads as "done" at a glance,
-  // regardless of which board it came from.
+function titleColorFor(task: Task, status: TaskStatus): string | undefined {
+  // Precedence: done (green) > overdue (red) > priority (orange) > today
+  // (pale yellow) > tomorrow (grey) > default. The orange now *means*
+  // "priority flag" — only tasks with a priority get it; everything scheduled
+  // today is the calm pale yellow instead.
   if (status === "done") return T.done;
-  // A board tint (virtual panel) takes precedence over the date-status colors:
-  // the panel's section headers (Overdue/Today/Tomorrow) already convey the
-  // date, so the row color is freed up to signal the *source board* instead.
-  if (tintColor) return tintColor;
   if (status === "overdue") return T.overdue;
-  if (status === "today") return T.today;
+  // Tomorrow is uniformly grey — even priority tasks — so everything set for
+  // tomorrow reads consistently as "later, de-emphasized".
+  if (status === "tomorrow") return T.textDim;
+  if (task.priority !== "none") return T.today;
+  if (status === "today") return T.todayPale;
   // future / unscheduled: terminal default fg (looks right on any theme).
   return T.text;
-  void task;
 }
 
 /**
@@ -218,7 +214,8 @@ function buildSuffix(task: Task, hideDate?: boolean): string | undefined {
 function suffixColorFor(task: Task, status: TaskStatus): string | undefined {
   if (status === "done") return T.textDone;
   if (status === "overdue") return T.overdue;
-  if (status === "today") return T.today;
+  if (status === "today") return T.todayPale;
+  if (status === "tomorrow") return T.textDim;
   if (status === "future") return T.scheduled;
   return T.textDim;
   void task;

package/src/ui/TimelineView.tsx

@@ -85,12 +85,13 @@ export function TimelineView(props: TimelineViewProps) {
   const armedRef = () => props.store.state.ui.armedTimelineRef;
   const armMode = () => props.store.state.ui.armMode;
 
-  const entries = createMemo(() =>
-    buildTimelineEntries(
+  const entries = createMemo(() => {
+    props.store.state.rev; // recompute on any board mutation
+    return buildTimelineEntries(
       props.store.state.boards.map((b) => b.board),
       isoToday(),
-    ),
-  );
+    );
+  });
 
   // Recompute the row map every minute so the "now" marker stays current.
   // No more sticky-unscheduled trimming — the unscheduled list lived at the

package/src/ui/VirtualPanel.tsx

@@ -2,7 +2,7 @@
 
 import { For, Show, createEffect, createMemo } from "solid-js";
 
-import { ATTR, T, boardColor } from "~/ui/glyphs";
+import { ATTR, T } from "~/ui/glyphs";
 import { TaskRow } from "~/ui/TaskRow";
 import {
   buildVirtualItems,
@@ -20,20 +20,21 @@ const vpRowId = (flatIndex: number) => `${VP_ROW_PREFIX}${flatIndex}`;
 
 const SECTION_HEADER: Record<string, { label: string; color: string }> = {
   overdue: { label: "● Overdue", color: T.overdue },
-  today: { label: "● Today", color: T.today },
-  tomorrow: { label: "→ Tomorrow", color: T.warmDim },
+  today: { label: "● Today", color: T.todayPale },
+  tomorrow: { label: "→ Tomorrow", color: T.textDim },
 };
 
 // Only the agenda and priority buckets get a header. The "rest" bucket has
 // no header of its own — its items already sit under their own
 // `— board · column —` sub-dividers, so a generic label would be redundant.
 const BUCKET_HEADER: Record<string, { label: string; color: string }> = {
-  agenda: { label: "⏰ Agenda", color: T.accent },
-  priority: { label: "🔺 Priority", color: T.highest },
+  agenda: { label: "⏰ Agenda", color: T.todayPale },
+  priority: { label: "🔺 Priority", color: T.today },
 };
 
 export function VirtualPanel(props: { store: TuiStore }) {
   const items = createMemo(() => {
+    props.store.state.rev; // recompute on any board mutation
     return buildVirtualItems(props.store.state.boards.map((b) => b.board));
   });
   const groups = createMemo(() => groupVirtualItems(items()));
@@ -70,15 +71,18 @@ export function VirtualPanel(props: { store: TuiStore }) {
     <box
       style={{
         flexDirection: "column",
-        width: isZoomed() ? undefined : 38,
-        minWidth: isZoomed() ? undefined : 38,
+        // Match the kanban column width (BoardView COL_WIDTH = 42) so the
+        // Today/Tomorrow panel reads as just another column.
+        width: isZoomed() ? undefined : 42,
+        minWidth: isZoomed() ? undefined : 42,
         flexGrow: isZoomed() ? 1 : 0,
         marginRight: 1,
         border: true,
         borderStyle: "rounded",
-        // Today/Tomorrow panel keeps its warm identity at all times — when
-        // focused it brightens, otherwise it dims, but never goes cool.
-        borderColor: isActive() ? T.warmActive : T.warm,
+        // Today/Tomorrow identity: a soft pale yellow. Brighter when focused,
+        // muted when not — but always the same calm hue (the title rides the
+        // border color too).
+        borderColor: isActive() ? T.todayPale : T.todayPaleDim,
         paddingLeft: 1,
         paddingRight: 1,
       }}
@@ -109,12 +113,12 @@ export function VirtualPanel(props: { store: TuiStore }) {
             groups={groups()}
             isActive={isActive()}
             cursorRow={cursorRow()}
-            // Panel inner cell width seen by a TaskRow: panel 38 col
+            // Panel inner cell width seen by a TaskRow: panel 42 col
             // (or full width in zoom) − border 2 − panel padding 2 −
-            // TaskRow padding 2 = 32 cols normal, ~terminal width − 6
+            // TaskRow padding 2 = 36 cols normal, ~terminal width − 6
             // when zoomed. Pass that so TaskRow can budget the title
             // dynamically against the row's actual overhead.
-            availableWidth={isZoomed() ? 100 : 32}
+            availableWidth={isZoomed() ? 100 : 36}
             isMarkedFn={(r) => props.store.isMarked(r)}
             onClickItem={(flatIndex) => {
               props.store.setActiveZone("virtual");
@@ -147,13 +151,22 @@ function RenderGroups(props: {
   return (
     <For each={props.groups}>
       {(group, gi) => {
-        const sectionHeader = isFirstOfSection(props.groups, gi())
+        const firstOfSection = isFirstOfSection(props.groups, gi());
+        const sectionHeader = firstOfSection
           ? SECTION_HEADER[group.section]
           : undefined;
         const bucketHeader = BUCKET_HEADER[group.bucket];
 
         return (
-          <box style={{ flexDirection: "column" }}>
+          // Breathing room between the macro buckets within a section
+          // (Agenda → Priority → normal tasks). The first bucket of a section
+          // gets its gap from the section header's own marginTop instead.
+          <box
+            style={{
+              flexDirection: "column",
+              marginTop: firstOfSection ? 0 : 1,
+            }}
+          >
             <Show when={sectionHeader}>
               <box style={{ paddingLeft: 1, paddingRight: 1, marginTop: 1 }}>
                 <text>
@@ -166,7 +179,19 @@ function RenderGroups(props: {
             <Show when={bucketHeader}>
               <box style={{ paddingLeft: 1, paddingRight: 1 }}>
                 <text>
-                  <span style={{ fg: bucketHeader!.color }}>{"  "}{bucketHeader!.label}</span>
+                  {/* In the Tomorrow section everything is grey — including the
+                      Agenda / Priority bucket labels — so the whole section
+                      reads as "later". */}
+                  <span
+                    style={{
+                      fg:
+                        group.section === "tomorrow"
+                          ? T.textDim
+                          : bucketHeader!.color,
+                    }}
+                  >
+                    {"  "}{bucketHeader!.label}
+                  </span>
                 </text>
               </box>
             </Show>
@@ -181,10 +206,6 @@ function RenderGroups(props: {
                         cursor={props.isActive && item.flatIndex === props.cursorRow}
                         marked={props.isMarkedFn(item.ref)}
                         availableWidth={props.availableWidth}
-                        // Tint the title with the source board's accent so a
-                        // cross-cutting Today/Tomorrow item is recognizable by
-                        // its board at a glance (done-green still wins).
-                        tintColor={boardColor(item.boardIndex)}
                         // Today / Tomorrow sections already say so in their
                         // header — drop the redundant per-row "today"/"tmrw"
                         // date label (the ⌚ time block stays). Overdue rows
@@ -217,7 +238,6 @@ function RenderGroups(props: {
                             cursor={props.isActive && item.flatIndex === props.cursorRow}
                             marked={props.isMarkedFn(item.ref)}
                             availableWidth={props.availableWidth}
-                            tintColor={boardColor(item.boardIndex)}
                             hideDateSuffix={
                               group.section === "today" || group.section === "tomorrow"
                             }

package/src/ui/glyphs.ts

@@ -74,7 +74,10 @@ export const T = {
 
   // Status-based row colors — kept clearly distinct in hue + brightness
   overdue: "#e26a6a",        // hue 0°, sat 65%, light 65% — clearly red
-  today: "#e8a05c",          // hue 30°, sat 75%, light 64% — clearly orange
+  today: "#e8a05c",          // warm orange — now the PRIORITY accent (flagged tasks)
+  // Today/Tomorrow identity + today-scheduled task titles: a soft pale yellow.
+  todayPale: "#eaf6ad",      // bright, calm — the Today/Tomorrow zone accent
+  todayPaleDim: "#9aa06f",   // muted version for the unfocused panel border
   scheduled: "#c89a6a",      // dimmer warm for non-today future
   future: "#8a90a8",