tuiboard 0.8.0 → 0.8.1

package/.tuiboard/config.example.yaml

@@ -65,8 +65,9 @@ archive_column: Archive
 # Optional: overlay read-only calendar events on the Agenda (the 24h timeline).
 # Connect a provider with `tuiboard calendar-setup google` / `... microsoft`,
 # which opens the auth flow and prints the exact block to paste here. Bring your
-# own credentials — nothing is hosted, nothing leaves your machine. All-day
-# events are skipped; each calendar keeps its own color. Paths support `~`.
+# own credentials — nothing is hosted, nothing leaves your machine. Timed events
+# render on the 24h grid; all-day events show as chips at the top. Each calendar
+# keeps its own color. Paths support `~`.
 #
 # To CREATE / EDIT / DELETE events (not just read), re-auth with:
 # calendar-setup google --write. Then press `n` / click an empty slot to create;

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.8.1] - 2026-06-04
+
+### Added
+- **Set an event's date from the Agenda modal.** When creating or editing a
+  Google Calendar event you can now append a date token to the title — `t` /
+  `tm` / `+3` / `lun` / `2026-06-10`, the same shortcuts as task scheduling — so
+  you're no longer limited to the day the Agenda is showing. Natural order is
+  `Title [date] HH:MM-HH:MM` (e.g. `Lunch tomorrow 12-13`); without a date token
+  it still defaults to the viewed day. On edit, a date token moves the event to
+  another day.
+- **All-day events now show in the Agenda.** Previously skipped, all-day events
+  (Google and Microsoft) render as a chip strip at the top of the Agenda — like
+  Google Calendar's all-day band — instead of being dropped.
+- **Create all-day events from the Agenda.** Add `allday` (or `all-day`) anywhere
+  in the new-event title — e.g. `Holiday 2026-12-25 allday` — to create a
+  date-only Google event instead of a timed one. It appears in the top chip
+  strip. (Editing all-day events isn't supported; create only.)
+
 ## [0.8.0] - 2026-06-03
 
 ### Added
@@ -134,6 +152,7 @@ First public release on npm. This entry captures the full feature set at launch.
 
 Built with [OpenTUI](https://opentui.com) + SolidJS on Bun.
 
+[0.8.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.8.1
 [0.8.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.8.0
 [0.7.3]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.3
 [0.7.2]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.2

package/README.md

@@ -179,12 +179,14 @@ at all — handy if you don't use Claude Code and don't want tuiboard reading
 
 ## Calendars (Agenda overlay)
 
-The **Agenda** zone (the 24h timeline) can overlay read-only events from Google
-Calendar and Microsoft 365 alongside your time-blocked tasks — rendered as
-colored `📅` blocks you can't edit, so the day's real shape is visible at a
-glance. All-day events are skipped; each calendar keeps its own color. Events
-are cached 30 min on disk and refreshed every 5 min. **Bring your own
-credentials** — there's nothing to sign up for and nothing leaves your machine.
+The **Agenda** zone (the 24h timeline) can overlay events from Google Calendar
+and Microsoft 365 alongside your time-blocked tasks — timed events render as
+colored `📅` blocks on the grid, and all-day events ride in a chip strip at the
+top (like Google Calendar's all-day band). The day's real shape is visible at a
+glance. Each calendar keeps its own color. Events are cached 30 min on disk and
+refreshed every 5 min. **Bring your own credentials** — there's nothing to sign
+up for and nothing leaves your machine. (Reading is the default; opt into
+creating/editing events below.)
 
 Connect a calendar with the built-in setup command:
 
@@ -253,15 +255,29 @@ tuiboard calendar-setup google --write
 ```
 
 **Create** — in the Agenda zone, press **`n`** (or **click an empty time slot**)
-to open the new-event modal: type a title (append `HH:MM-HH:MM` to change the
-time), press Enter, pick the target calendar with `j`/`k`, Enter to create. Only
-calendars you can write to (owner/writer) show in the picker.
+to open the new-event modal: type a title, press Enter, pick the target calendar
+with `j`/`k`, Enter to create. Only calendars you can write to (owner/writer)
+show in the picker. Append tokens to the title to set the **time** and **date**:
+
+```
+Standup 9:00-9:30            # today (or the viewed day), 09:00–09:30
+Lunch tomorrow 12-13         # tomorrow, 12:00–13:00
+Review 2026-06-10 15-16      # that date, 15:00–16:00
+Call +3 16:00-16:30          # in 3 days · lun = next Monday also works
+Holiday 2026-12-25 allday    # an all-day event (no time)
+```
+
+The date defaults to whichever day the Agenda is showing; an explicit date token
+(`t` / `tm` / `+N` / weekday / `YYYY-MM-DD`) overrides it. The time is taken from
+the clicked slot, or `HH:MM-HH:MM`. Add **`allday`** (or `all-day`) anywhere in
+the title to create an all-day event instead — it lands in the top chip strip.
 
 **Edit / delete** — **click an existing event** in the Agenda to select it (only
 events on writable calendars can be selected; read-only ones just say so). Then:
 
 - **`e`** (or Enter) opens the edit modal, prefilled with the title and time —
-  change either (`Title HH:MM-HH:MM`) and Enter to save.
+  change the title, time, and/or date (same `Title [date] HH:MM-HH:MM` syntax)
+  and Enter to save. A date token moves the event to another day.
 - **`d`** deletes it (with a confirm).
 - **`Esc`** deselects.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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",

package/src/store/calendar.ts

@@ -37,6 +37,10 @@ export interface CalEvent {
    *  on an owner/writer calendar, with a write-scoped token. Microsoft events
    *  and read-only-calendar events are never editable. */
   editable?: boolean;
+  /** All-day event (date-only, no time). Rendered as a chip at the top of the
+   *  Agenda rather than on the 24h grid; startMin/endMin are unused. Display
+   *  only — not editable from tuiboard. */
+  allDay?: boolean;
 }
 
 const GOOGLE_FALLBACK_COLOR = "#e8a05c";
@@ -231,29 +235,45 @@ function localRfc3339(dateIso: string, min: number): string {
   );
 }
 
+/** The day after `dateIso` (YYYY-MM-DD). Google all-day events use an EXCLUSIVE
+ *  end date, so a single-day all-day event ends on the following day. */
+function nextDayIso(dateIso: string): string {
+  const d = new Date(dayStartMs(dateIso) + 24 * 60 * 60000);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
 /**
  * Create a Google Calendar event on `calendarId`. Unlike the read path, this
  * surfaces failures (returns {ok:false,error}) so the UI can flash a banner.
+ * Pass `allDay` for a date-only event (start/end as dates, end exclusive).
  */
 export async function createGoogleEvent(
   cfg: GoogleCalendarConfig,
-  args: { calendarId: string; title: string; dateIso: string; startMin: number; endMin: number },
+  args: { calendarId: string; title: string; dateIso: string; startMin: number; endMin: number; allDay?: boolean },
 ): Promise<{ ok: true } | { ok: false; error: string }> {
   const access = await googleAccessToken(cfg.token);
   if (!access) {
     return { ok: false, error: "not authorized — run: tuiboard calendar-setup google --write" };
   }
   try {
+    const body = args.allDay
+      ? {
+          summary: args.title,
+          start: { date: args.dateIso },
+          end: { date: nextDayIso(args.dateIso) },
+        }
+      : {
+          summary: args.title,
+          start: { dateTime: localRfc3339(args.dateIso, args.startMin) },
+          end: { dateTime: localRfc3339(args.dateIso, args.endMin) },
+        };
     const res = await fetch(
       `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(args.calendarId)}/events`,
       {
         method: "POST",
         headers: { Authorization: `Bearer ${access}`, "Content-Type": "application/json" },
-        body: JSON.stringify({
-          summary: args.title,
-          start: { dateTime: localRfc3339(args.dateIso, args.startMin) },
-          end: { dateTime: localRfc3339(args.dateIso, args.endMin) },
-        }),
+        body: JSON.stringify(body),
       },
     );
     if (!res.ok) {
@@ -387,7 +407,24 @@ async function fetchGoogle(
           for (const it of data.items ?? []) {
             const startRaw = it.start?.dateTime;
             const endRaw = it.end?.dateTime;
-            if (!startRaw || !endRaw) continue; // skip all-day (date only)
+            if (!startRaw || !endRaw) {
+              // All-day / date-only event: the per-day query already scoped it
+              // to a day it covers, so just surface it as a chip (display only).
+              const dayKey = it.start?.date;
+              if (!dayKey) continue;
+              out.push({
+                uid: it.id ?? `${cal.id}:allday:${dayKey}`,
+                ev: {
+                  title: it.summary ?? "(no title)",
+                  startMin: 0,
+                  endMin: 0,
+                  color: cal.color,
+                  source: "google",
+                  allDay: true,
+                },
+              });
+              continue;
+            }
             const { startMin, endMin } = toMinutes(Date.parse(startRaw), Date.parse(endRaw), base);
             out.push({
               uid: it.id ?? `${cal.id}:${startRaw}`,
@@ -540,7 +577,18 @@ async function fetchMicrosoft(
     };
     const events: CalEvent[] = [];
     for (const it of data.value ?? []) {
-      if (it.isAllDay) continue; // mirror Google: skip all-day events
+      if (it.isAllDay) {
+        // All-day event → chip at the top of the Agenda (display only).
+        events.push({
+          title: it.subject ?? "(no title)",
+          startMin: 0,
+          endMin: 0,
+          color,
+          source: "microsoft",
+          allDay: true,
+        });
+        continue;
+      }
       const s = it.start?.dateTime;
       const e = it.end?.dateTime;
       if (!s || !e) continue;

package/src/store/index.ts

@@ -95,6 +95,8 @@ export interface EventPicker {
   dateIso: string;
   startMin: number;
   endMin: number;
+  /** Create as a date-only all-day event (start/end times ignored). */
+  allDay?: boolean;
   cals: WritableCalendar[];
 }
 
@@ -1137,7 +1139,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
   /** Step 1 → step 2: stash the parsed title + time, load calendars if needed,
    *  preselect the default, and either show the picker or (single calendar)
    *  create immediately. */
-  async function advanceEventToStep2(title: string, startMin: number, endMin: number): Promise<void> {
+  async function advanceEventToStep2(title: string, startMin: number, endMin: number, dateIso?: string, allDay?: boolean): Promise<void> {
     const g = config.calendars?.google;
     if (!g || !state.ui.eventPicker) { closeModal(); return; }
     let cals = state.ui.eventPicker.cals;
@@ -1154,6 +1156,8 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       p.title = title;
       p.startMin = startMin;
       p.endMin = endMin;
+      if (dateIso) p.dateIso = dateIso; // explicit date token overrides the viewed day
+      p.allDay = !!allDay;
       p.cals = cals;
       p.sel = idx < 0 ? 0 : idx;
       p.step = 2;
@@ -1176,6 +1180,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     if (!p || !g) { closeModal(); return; }
     const calendarId = p.cals[p.sel]?.id ?? g.defaultCalendar ?? "primary";
     const title = p.title.trim() || "(busy)";
+    const allDay = !!p.allDay;
     closeModal();
     const r = await createGoogleEvent(g, {
       calendarId,
@@ -1183,10 +1188,11 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       dateIso: p.dateIso,
       startMin: p.startMin,
       endMin: p.endMin,
+      allDay,
     });
     if (r.ok) {
       calendarStore.refresh(true);
-      flashBanner("info", `📅 Event created: ${title}`);
+      flashBanner("info", allDay ? `📅 All-day event created: ${title}` : `📅 Event created: ${title}`);
     } else {
       flashBanner("error", `Create failed: ${r.error}`);
     }
@@ -1218,8 +1224,9 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     setTimeout(() => openModal({ kind: "event-edit" }), 0);
   }
 
-  /** Save the edited title/time to the selected event, refresh, close. */
-  async function confirmEventEdit(title: string, startMin: number, endMin: number): Promise<void> {
+  /** Save the edited title/time/date to the selected event, refresh, close.
+   *  `dateIso` (optional) moves the event to another day; defaults to its day. */
+  async function confirmEventEdit(title: string, startMin: number, endMin: number, dateIso?: string): Promise<void> {
     const sel = state.ui.selectedCalEvent;
     const g = config.calendars?.google;
     if (!sel || !g) { closeModal(); return; }
@@ -1228,7 +1235,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       calendarId: sel.calendarId,
       eventId: sel.eventId,
       title: title.trim() || sel.title,
-      dateIso: sel.dateIso,
+      dateIso: dateIso ?? sel.dateIso,
       startMin,
       endMin,
     });

package/src/ui/Modal.tsx

@@ -273,9 +273,76 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
 
 // ─── New calendar event ──────────────────────────────────────────────────────
 
+/**
+ * Parse an event input line into title + time + (optional) date. Tokens are
+ * peeled off the END, time first then date, so the natural order is
+ * "Title [date] [time]":
+ *   "Standup 9:00-9:30"          → title, 09:00-09:30, (default date)
+ *   "Lunch tomorrow 12-13"       → title, 12:00-13:00, tomorrow
+ *   "Review 2026-06-10 15-16"    → title, 15:00-16:00, that date
+ * A trailing token is only consumed if it parses AND something is left for the
+ * title, so a one-word title like "tomorrow" stays a title. `dateIso` is set
+ * only when an explicit date token was found (caller falls back to its default).
+ */
+function peelEventInput(
+  text: string,
+  defStart: number,
+  defEnd: number,
+): { title: string; startMin: number; endMin: number; dateIso?: string; allDay: boolean } {
+  let title = text.trim();
+  let startMin = defStart;
+  let endMin = defEnd;
+  let dateIso: string | undefined;
+
+  // 0) an "allday" / "all-day" keyword anywhere → date-only event (time ignored)
+  let allDay = false;
+  if (/(^|\s)(all-?day)(\s|$)/i.test(title)) {
+    allDay = true;
+    title = title.replace(/(^|\s)all-?day(\s|$)/i, " ").replace(/\s+/g, " ").trim();
+  }
+
+  // 1) trailing time token
+  const mt = title.match(/\s(\S+)$/);
+  const ttok = mt?.[1];
+  if (mt && mt.index !== undefined && ttok) {
+    const tb = parseTimeBlockShortcut(ttok);
+    if (tb && tb.endMin > tb.startMin) {
+      const rest = title.slice(0, mt.index).trim();
+      if (rest) {
+        title = rest;
+        startMin = tb.startMin;
+        endMin = tb.endMin;
+      }
+    }
+  }
+  // 2) trailing date token (on what's left)
+  const md = title.match(/\s(\S+)$/);
+  const dtok = md?.[1];
+  if (md && md.index !== undefined && dtok) {
+    const d = parseDateShortcut(dtok);
+    if (typeof d === "string") {
+      const rest = title.slice(0, md.index).trim();
+      if (rest) {
+        title = rest;
+        dateIso = d;
+      }
+    }
+  }
+  return { title, startMin, endMin, dateIso, allDay };
+}
+
+/** Short "Mon 10 Jun" style label for an ISO date, for modal titles. */
+function shortDate(iso: string): string {
+  const [y, m, d] = iso.split("-").map((n) => parseInt(n, 10));
+  if (!y || !m || !d) return iso;
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return `${d} ${months[m - 1]}`;
+}
+
 /**
  * Two-step "new Google Calendar event" modal. Step 1: a title+time `<input>`
- * (time prefilled from the clicked slot; append `HH:MM-HH:MM` to override).
+ * (time prefilled from the clicked slot; append `HH:MM-HH:MM` to override, and
+ * a date token like `tomorrow` / `2026-06-10` to change the day).
  * Step 2: a non-input calendar list navigated via handleKey (no input focused),
  * preselected to the configured default. See `openEventModal` / `confirmEventPicker`.
  */
@@ -288,26 +355,12 @@ function EventModal(props: { store: TuiStore }) {
   function submit(text: string) {
     const p = picker();
     if (!p) return;
-    const trimmed = text.trim();
-    let title = trimmed;
-    let startMin = p.startMin;
-    let endMin = p.endMin;
-    // Peel a trailing time token: "Standup 9:00-9:30" / "Lunch 12-13".
-    const m = trimmed.match(/\s(\S+)$/);
-    const tok = m?.[1];
-    if (m && m.index !== undefined && tok) {
-      const tb = parseTimeBlockShortcut(tok);
-      if (tb && tb.endMin > tb.startMin) {
-        title = trimmed.slice(0, m.index).trim();
-        startMin = tb.startMin;
-        endMin = tb.endMin;
-      }
-    }
+    const { title, startMin, endMin, dateIso, allDay } = peelEventInput(text, p.startMin, p.endMin);
     if (!title) {
       setError("Title required");
       return;
     }
-    void props.store.advanceEventToStep2(title, startMin, endMin);
+    void props.store.advanceEventToStep2(title, startMin, endMin, dateIso, allDay);
   }
 
   return (
@@ -317,7 +370,7 @@ function EventModal(props: { store: TuiStore }) {
         fallback={
           <DialogShell
             title="New event"
-            hint={`${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)} · append HH:MM-HH:MM to change · Enter add · Esc cancel`}
+            hint={`${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)} · add a time, a date (tm · +3 · 2026-06-10), or "allday" · Enter add · Esc`}
           >
             <input
               focused
@@ -337,7 +390,7 @@ function EventModal(props: { store: TuiStore }) {
         }
       >
         <DialogShell
-          title={`Calendar · ${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)}`}
+          title={`Calendar · ${shortDate(picker()!.dateIso)} ${picker()!.allDay ? "all day" : `${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)}`}`}
           hint="j/k choose · Enter create · Esc cancel"
         >
           <For each={picker()!.cals}>
@@ -387,33 +440,19 @@ function EventEditModal(props: { store: TuiStore }) {
       props.store.closeModal();
       return;
     }
-    const trimmed = text.trim();
-    let title = trimmed;
-    let startMin = s.startMin;
-    let endMin = s.endMin;
-    // Peel a trailing time token: "Standup 9:00-9:30" / "Lunch 12-13".
-    const m = trimmed.match(/\s(\S+)$/);
-    const tok = m?.[1];
-    if (m && m.index !== undefined && tok) {
-      const tb = parseTimeBlockShortcut(tok);
-      if (tb && tb.endMin > tb.startMin) {
-        title = trimmed.slice(0, m.index).trim();
-        startMin = tb.startMin;
-        endMin = tb.endMin;
-      }
-    }
+    const { title, startMin, endMin, dateIso } = peelEventInput(text, s.startMin, s.endMin);
     if (!title) {
       setError("Title required");
       return;
     }
-    void props.store.confirmEventEdit(title, startMin, endMin);
+    void props.store.confirmEventEdit(title, startMin, endMin, dateIso);
   }
 
   return (
     <Show when={sel()}>
       <DialogShell
-        title="Edit event"
-        hint="append HH:MM-HH:MM to change the time · Enter save · Esc cancel"
+        title={`Edit event · ${shortDate(sel()!.dateIso)}`}
+        hint="change title, HH:MM-HH:MM, and/or a date (tm · +3 · lun · 2026-06-10) · Enter save · Esc"
       >
         <input
           focused
@@ -789,6 +828,7 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  \\                  Jump back to today\n"}</span>
         <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) scheduling\n"}</span>
         <span style={{ fg: T.text }}>{"  n / click slot     New Google Calendar event (needs: calendar-setup google --write)\n"}</span>
+        <span style={{ fg: T.text }}>{"                     append date+time: Lunch tomorrow 12-13 · Review 2026-06-10 15-16 · Holiday 25-12 allday\n"}</span>
         <span style={{ fg: T.text }}>{"  click an event     Select an editable Google event — then e edit · d delete · Esc\n"}</span>
         <span style={{ fg: T.text }}>{"  c (any zone)       Toggle ARM MODE — then click a task, click a slot, repeat\n"}</span>
         <span style={{ fg: T.text }}>{"  click empty row    Place the armed task here (30-min block, or move if it has one)\n"}</span>

package/src/ui/TimelineView.tsx

@@ -115,9 +115,13 @@ export function TimelineView(props: TimelineViewProps) {
   });
 
   // Read-only calendar events (Google / Microsoft), merged into the grid for
-  // display only — not cursor-navigable, not editable.
+  // display only — not cursor-navigable. Timed events go on the 24h grid;
+  // all-day events are pulled out into a chip strip at the top (no time slot).
   const calEntries = createMemo(() =>
-    buildCalendarEntries(props.store.calendar.events()),
+    buildCalendarEntries(props.store.calendar.events().filter((e) => !e.allDay)),
+  );
+  const allDayEvents = createMemo(() =>
+    props.store.calendar.events().filter((e) => e.allDay),
   );
 
   // Recompute the row map every minute so the "now" marker stays current.
@@ -405,9 +409,32 @@ export function TimelineView(props: TimelineViewProps) {
         </text>
       </Show>
 
-      {/* The 24h grid now owns the whole panel — no sticky section above
-          it. Tasks are armed for scheduling from the board / planner panel
-          via the `C` shortcut, then placed by clicking a slot here. */}
+      {/* All-day events ride in a chip strip above the 24h grid (like Google
+          Calendar's top band) — they have no time slot to sit in. Display only. */}
+      <Show when={allDayEvents().length > 0}>
+        <box style={{ flexDirection: "row", height: 1 }}>
+          <text wrapMode="none" style={{ flexShrink: 0 }}>
+            <span style={{ fg: T.textDim }}>{"▦ "}</span>
+          </text>
+          <For each={allDayEvents().slice(0, 8)}>
+            {(e) => (
+              <text wrapMode="none" truncate style={{ flexShrink: 1, marginRight: 1 }}>
+                <span style={{ fg: e.color }}>{"●"}</span>
+                <span style={{ fg: T.text }}>{" " + tailTruncate(e.title, 18)}</span>
+              </text>
+            )}
+          </For>
+          <Show when={allDayEvents().length > 8}>
+            <text wrapMode="none" style={{ flexShrink: 0 }}>
+              <span style={{ fg: T.textDim }}>{`+${allDayEvents().length - 8}`}</span>
+            </text>
+          </Show>
+        </box>
+      </Show>
+
+      {/* The 24h grid owns the rest of the panel. 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)}
         style={{