tuiboard 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -0,0 +1,106 @@
+# Changelog
+
+All notable changes to **tuiboard** are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.7.2] - 2026-06-02
+
+### Changed
+- Documentation: the intro and npm description now lead with the modular pitch
+  (a kanban with three optional panels you switch on or off) instead of a
+  bundled four-zone dashboard.
+
+## [0.7.1] - 2026-06-02
+
+### Changed
+- Modals (new task, schedule, time block, assign, delete, detail, search, help)
+  now open in the Agenda's slot — an opaque panel of the same width — instead of
+  a side panel that pushed the dashboard left. Opening a modal no longer reflows
+  the board/planner; the Agenda returns when the modal closes.
+- Modal titles now ride in the panel's top border (`┤ … ├`), matching the board
+  columns and the zones, instead of sitting as a body text line.
+- A clipped board column keeps its task rows until it's scrolled down to less
+  than half visible (previously: blanked as soon as it was clipped at all), so a
+  column that's mostly on-screen stays useful.
+
+## [0.7.0] - 2026-06-01
+
+### Added
+- **Configurable zones.** A `zones:` config block turns the planner, agenda, or
+  agents view off (`off`), starts it collapsed (`hidden`), or leaves it on
+  (`on`, the default; `true`/`false` alias `on`/`off`). The board is always on.
+  tuiboard can now be a pure kanban, kanban + calendar, kanban + agents, or any
+  mix. A disabled zone is never rendered, is skipped by `Shift-Tab`, has an
+  inert F-key, and **its background work never starts** — no calendar fetch and
+  no `~/.claude` reads when the agents zone is off.
+- Documented zones in the README, the AI setup prompt, and `config.example.yaml`.
+
+### Changed
+- Renamed the internal "virtual" zone to **"planner"** throughout (code,
+  identifiers, comments, and the `VirtualPanel`/`virtual-panel` files) for
+  clarity. The visible "Today/Tomorrow" panel is unchanged.
+- Reworked the responsive layout to combine three inputs — `enabled ∧ desired ∧
+  fits-width`. Auto-hide now only reports what fits; it never force-shows a
+  disabled or intentionally-hidden zone, and `F1`/`F2`/`F3` toggles persist
+  across terminal resizes.
+
+## [0.6.2] - 2026-05-30
+
+### Changed
+- Updated the hero screenshot to show the live calendar overlay (Google +
+  Microsoft 365 events side by side) and the aligned agent rows.
+- Refreshed the README intro to mention the calendar overlay.
+
+## [0.6.1] - 2026-05-30
+
+### Added
+- **Manual full-refresh key (`r`).** Reloads boards from disk, rescans agents,
+  and force-refetches the agenda calendar (bypassing the 30-minute cache) so
+  externally-edited events show without a restart.
+
+### Changed
+- Day-navigation keys (`[` / `]` / `\`) now work from any zone, not just when
+  the agenda is focused; pressing one also moves focus to the agenda.
+- Added arrow keys and `r refresh` to the bottom cheat-sheet; the day-navigation
+  hint is now always visible in the agenda's resting state.
+- Agent rows right-align the activity age in a fixed-width field so the end of
+  each working directory lines up across rows.
+
+## [0.6.0] - 2026-05-30
+
+First public release on npm. This entry captures the full feature set at launch.
+
+### Added
+- **Kanban board** over plain CommonMark files using the Obsidian Tasks-plugin
+  emoji vocabulary — no lock-in, the files stay yours. Multiple boards as tabs;
+  `##` headings become columns; `Done` and `Archive` columns are treated
+  specially. Quick-add syntax (`@assignee`, `#tag`, scheduling, time blocks,
+  priority), multi-select (`Space`), undo (`Ctrl-Z`), filters, search (`/`),
+  zoom (`z`), and atomic file round-trips with an external-edit watcher.
+- **Planner** — a Today/Tomorrow panel aggregating everything scheduled across
+  all boards.
+- **Agenda** — a 24-hour timeline with click-to-arm time-blocking, plus a
+  read-only **calendar overlay** for Google Calendar and Microsoft 365
+  (dependency-light, bring-your-own-credentials, all-day events skipped, each
+  calendar in its own color). Day-navigation with `[` / `]` / `\` pages tasks
+  and events across days.
+- **`tuiboard calendar-setup`** — one-time OAuth for new users (Google browser
+  flow, Microsoft device-code flow); prints the exact `calendars:` block to add.
+- **Live agents view** — reads local Claude Code sessions from `~/.claude` with
+  zero setup, showing status, branch, and last activity. `Enter` opens a session
+  in a terminal; the launch command is overridable via `resume_command`.
+- **Keyboard-first with full mouse support**, a responsive multi-zone layout
+  that adapts to terminal width, standalone `--view=` modes, and the `tb` alias.
+- Config resolution via `$TUIBOARD_CONFIG`, a project-local `.tuiboard/`, the
+  global `~/.config/tuiboard/`, or a cwd fallback scan.
+
+Built with [OpenTUI](https://opentui.com) + SolidJS on Bun.
+
+[0.7.2]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.2
+[0.7.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.1
+[0.7.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.0
+[0.6.2]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.6.2
+[0.6.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.6.1
+[0.6.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.6.0

package/README.md

@@ -1,9 +1,10 @@
 # tuiboard
 
-A terminal dashboard that unifies **kanban**, a **Today/Tomorrow planner
-panel**, a **24-hour agenda** (with a read-only Google / Microsoft 365
-calendar overlay), and a **live agent view** for Claude Code sessions — all
-on top of plain markdown task files.
+A terminal **kanban** board on plain markdown files, with three optional panels
+you switch on or off: a **Today/Tomorrow planner** across all your boards, a
+**24-hour agenda** with a read-only Google / Microsoft 365 calendar overlay, and
+a **live view of your Claude Code sessions**. Run it as a pure kanban, or any mix
+of the four. The board is always on; the rest is opt-in (see [Zones](#zones)).
 
 Built with [OpenTUI](https://opentui.com) + SolidJS on Bun. Cross-platform
 (Linux, macOS, Windows). No vendor lock-in: boards are CommonMark with
@@ -269,11 +270,11 @@ are rebuilt only after an in-app mutation.
 
 ## Layouts
 
-Launch `tuiboard` with no flag for the default 4-zone dashboard.
+Launch `tuiboard` with no flag for the default dashboard (every enabled zone).
 
 | Flag | View | Use case |
 |---|---|---|
-| (none) | **Dashboard** — all 4 zones | Default; everything in one terminal |
+| (none) | **Dashboard** — every enabled zone | Default; your configured layout |
 | `--view=board` | Kanban + planner panel only | Focus mode, or a single WezTerm pane |
 | `--view=timeline` | Timeline fullscreen | Wall-mounted "what's now" |
 | `--view=agents` | Agent view fullscreen | Cross-machine session monitor |
@@ -353,6 +354,8 @@ session (until the next terminal resize).
 
 ## Status
 
+See [CHANGELOG.md](CHANGELOG.md) for the full release history.
+
 - **v0.7** — configurable zones: turn the planner, agenda, or agents view off
   (or start it collapsed) via the `zones:` config, so tuiboard can be a pure
   kanban, kanban + calendar, or any mix.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tuiboard",
-  "version": "0.7.0",
-  "description": "Terminal dashboard for markdown task boards. Kanban + Today/Tomorrow + 24h timeline + Claude Code agent view, all in one TUI.",
+  "version": "0.7.2",
+  "description": "Terminal kanban for markdown task boards, with optional Today/Tomorrow planner, 24h agenda + calendar overlay, and a live Claude Code agent view. Use only the panels you want.",
   "type": "module",
   "license": "MIT",
   "author": "Nazzareno Giannelli <nazzareno.giannelli@gmail.com>",
@@ -36,6 +36,7 @@
     "bin/",
     ".tuiboard/config.example.yaml",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {

package/src/app.tsx

@@ -121,11 +121,11 @@ function App() {
       <TopBar store={store} />
       <box style={{ height: 1 }} />
       {/*
-        rootView and ModalLayer are siblings inside a flex-row so the
-        modal can sit beside the view as a fixed-width, full-height
-        side panel. ModalLayer renders only when ui.modal is set,
-        otherwise its <Show> resolves to nothing and the rootView gets
-        the whole row.
+        rootView + ModalLayer are flex-row siblings. The modal panel is exactly
+        the Agenda's width, and the Dashboard hides the Agenda while a modal is
+        open — so the modal drops into the Agenda's slot with zero reflow of the
+        left side (board / planner / agents). When no modal is open ModalLayer
+        renders nothing and rootView gets the whole row.
       */}
       <box style={{ flexDirection: "row", flexGrow: 1 }}>
         <box style={{ flexDirection: "column", flexGrow: 1 }}>

package/src/ui/BoardView.tsx

@@ -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`)
@@ -140,16 +147,22 @@ 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.
@@ -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;
 }
@@ -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}
     >

package/src/views/Dashboard.tsx

@@ -30,8 +30,12 @@ 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;
 
@@ -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 */}