tuiboard 0.6.2 → 0.7.1

package/src/ui/{VirtualPanel.tsx → PlannerPanel.tsx}

@@ -1,14 +1,14 @@
-/** The fixed Today/Tomorrow virtual panel — always on the left. */
+/** The fixed Today/Tomorrow planner panel — always on the left. */
 
 import { For, Show, createEffect, createMemo } from "solid-js";
 
 import { ATTR, T } from "~/ui/glyphs";
 import { TaskRow } from "~/ui/TaskRow";
 import {
-  buildVirtualItems,
-  groupVirtualItems,
-  type VirtualGroup,
-} from "~/store/virtual-panel";
+  buildPlannerItems,
+  groupPlannerItems,
+  type PlannerGroup,
+} from "~/store/planner-panel";
 import type { TuiStore } from "~/store/index";
 
 interface ScrollBoxLike {
@@ -32,15 +32,15 @@ const BUCKET_HEADER: Record<string, { label: string; color: string }> = {
   priority: { label: "🔺 Priority", color: T.today },
 };
 
-export function VirtualPanel(props: { store: TuiStore }) {
+export function PlannerPanel(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));
+    return buildPlannerItems(props.store.state.boards.map((b) => b.board));
   });
-  const groups = createMemo(() => groupVirtualItems(items()));
-  const isActive = createMemo(() => props.store.state.ui.activeZone === "virtual");
+  const groups = createMemo(() => groupPlannerItems(items()));
+  const isActive = createMemo(() => props.store.state.ui.activeZone === "planner");
   const isZoomed = createMemo(
-    () => props.store.state.ui.zoomed && props.store.state.ui.activeZone === "virtual",
+    () => props.store.state.ui.zoomed && props.store.state.ui.activeZone === "planner",
   );
   const cursorRow = createMemo(() => props.store.state.ui.row);
   let scrollBoxRef: ScrollBoxLike | undefined;
@@ -121,7 +121,7 @@ export function VirtualPanel(props: { store: TuiStore }) {
             availableWidth={isZoomed() ? 100 : 36}
             isMarkedFn={(r) => props.store.isMarked(r)}
             onClickItem={(flatIndex) => {
-              props.store.setActiveZone("virtual");
+              props.store.setActiveZone("planner");
               props.store.setCursor(0, flatIndex);
               // In calendar arm mode, a click also arms the task for the
               // timeline (click a task, then a slot to place it).
@@ -141,7 +141,7 @@ export function VirtualPanel(props: { store: TuiStore }) {
 }
 
 function RenderGroups(props: {
-  groups: VirtualGroup[];
+  groups: PlannerGroup[];
   isActive: boolean;
   cursorRow: number;
   availableWidth: number;
@@ -258,7 +258,7 @@ function RenderGroups(props: {
 }
 
 function isFirstOfSection(
-  groups: VirtualGroup[],
+  groups: PlannerGroup[],
   idx: number,
 ): boolean {
   if (idx === 0) return true;

package/src/ui/TimelineView.tsx

@@ -354,7 +354,7 @@ export function TimelineView(props: TimelineViewProps) {
       </Show>
 
       {/* The 24h grid now owns the whole panel — no sticky section above
-          it. Tasks are armed for scheduling from the board / virtual panel
+          it. Tasks are armed for scheduling from the board / planner panel
           via the `C` shortcut, then placed by clicking a slot here. */}
       <scrollbox
         ref={(r: ScrollBoxLike) => (scrollBoxRef = r)}

package/src/ui/glyphs.ts

@@ -29,7 +29,7 @@ export const ATTR = {
  *    instead of raw ANSI names like "red"/"yellow" — those tend to render
  *    as fully-saturated traffic-light colors in most themes and clash
  *    with everything around them.
- *  - The Today/Tomorrow virtual panel has its own *warm* identity
+ *  - The Today/Tomorrow planner panel has its own *warm* identity
  *    (peach/orange) so the user instantly knows "this is the time zone";
  *    everything else uses a *cool* identity (soft cyan) for active focus.
  *  - Cursor row highlight is the only opaque paint outside the modal.
@@ -137,7 +137,7 @@ export function cellWidth(s: string): number {
 }
 
 /**
- * Per-board accent palette. Used by the virtual panel to color-code the
+ * Per-board accent palette. Used by the planner panel to color-code the
  * source-board tag on priority/agenda items, so the user can recognize
  * which board a cross-cutting item came from at a glance.
  *

package/src/views/BoardOnly.tsx

@@ -1,5 +1,5 @@
 /**
- * Standalone fullscreen view for the kanban board (with virtual panel).
+ * Standalone fullscreen view for the kanban board (with planner panel).
  * Mounted when the user launches `tuiboard --view=board`, AND used inside
  * the dashboard via composition.
  *
@@ -13,7 +13,7 @@
 import { Show, createMemo } from "solid-js";
 
 import { BoardView } from "~/ui/BoardView";
-import { VirtualPanel } from "~/ui/VirtualPanel";
+import { PlannerPanel } from "~/ui/PlannerPanel";
 import type { TuiStore } from "~/store/index";
 
 export function BoardOnly(props: { store: TuiStore }) {
@@ -24,10 +24,10 @@ export function BoardOnly(props: { store: TuiStore }) {
 
   return (
     <box style={{ flexDirection: "row", flexGrow: 1 }}>
-      <Show when={!ui().zoomed || ui().activeZone === "virtual"}>
-        <VirtualPanel store={props.store} />
+      <Show when={!ui().zoomed || ui().activeZone === "planner"}>
+        <PlannerPanel store={props.store} />
       </Show>
-      <Show when={(!ui().zoomed || ui().activeZone !== "virtual") && activeBoard()}>
+      <Show when={(!ui().zoomed || ui().activeZone !== "planner") && activeBoard()}>
         <BoardView store={props.store} board={activeBoard()!} />
       </Show>
     </box>

package/src/views/Dashboard.tsx

@@ -1,7 +1,7 @@
 /**
  * The default tuiboard view: a 4-zone dashboard.
  *
- *   ┌─Virtual─┬─Board────────┬─Timeline─┐
+ *   ┌─Planner─┬─Board────────┬─Timeline─┐
  *   │         │              │          │
  *   │         │              │          │
  *   │         ├──────────────┤          │
@@ -24,14 +24,18 @@ import { Show, createMemo } from "solid-js";
 import { AgentsBar } from "~/ui/AgentsBar";
 import { BoardView } from "~/ui/BoardView";
 import { TimelineView } from "~/ui/TimelineView";
-import { VirtualPanel } from "~/ui/VirtualPanel";
+import { PlannerPanel } from "~/ui/PlannerPanel";
 import { AgentsOnly } from "~/views/AgentsOnly";
 import { BoardOnly } from "~/views/BoardOnly";
 import { TimelineOnly } from "~/views/TimelineOnly";
 import type { TuiStore } from "~/store/index";
 
-/** Width (in cells) for the right-column Timeline panel on a wide terminal. */
-const TIMELINE_WIDTH = 50;
+/**
+ * Width (in cells) for the right-column Agenda panel on a wide terminal. The
+ * modal panel matches this so it can drop into the Agenda's slot (see
+ * ModalLayer) without reflowing the rest of the dashboard.
+ */
+export const TIMELINE_WIDTH = 50;
 /** Row height for the bottom Agents strip — enough for ~5 sessions. */
 const AGENTS_HEIGHT = 7;
 
@@ -53,7 +57,7 @@ export function Dashboard(props: { store: TuiStore }) {
  * standalone view wrappers so a `z` press in the dashboard produces
  * the same visual as launching `tuiboard --view=<zone>`.
  *
- * Board + virtual share BoardOnly because both live in the top-left
+ * Board + planner share BoardOnly because both live in the top-left
  * zone of the normal layout and BoardOnly already respects ui.zoomed
  * to render only the active panel between them.
  */
@@ -80,12 +84,12 @@ function FourZoneLayout(props: { store: TuiStore }) {
 
   return (
     <box style={{ flexDirection: "row", flexGrow: 1 }}>
-      {/* Left column: virtual + board on top, agents on bottom */}
+      {/* Left column: planner + board on top, agents on bottom */}
       <box style={{ flexDirection: "column", flexGrow: 1 }}>
         {/* Top zone */}
         <box style={{ flexDirection: "row", flexGrow: 1 }}>
-          <Show when={visible().virtual}>
-            <VirtualPanel store={props.store} />
+          <Show when={visible().planner}>
+            <PlannerPanel store={props.store} />
           </Show>
           <Show when={visible().board && activeBoard()}>
             <BoardView store={props.store} board={activeBoard()!} />
@@ -96,8 +100,9 @@ function FourZoneLayout(props: { store: TuiStore }) {
           <AgentsBar store={props.store} height={AGENTS_HEIGHT} />
         </Show>
       </box>
-      {/* Right column: timeline (full height) */}
-      <Show when={visible().timeline}>
+      {/* Right column: Agenda (full height). Hidden while a modal is open so
+          the modal panel takes its slot with no reflow. */}
+      <Show when={visible().timeline && !ui().modal}>
         <TimelineView store={props.store} width={TIMELINE_WIDTH} />
       </Show>
       {/* ModalLayer rendered at App level so it can sit beside any view */}