tuiboard 0.7.3 → 0.8.0

package/.tuiboard/config.example.yaml

@@ -68,10 +68,17 @@ archive_column: Archive
 # own credentials — nothing is hosted, nothing leaves your machine. All-day
 # events are skipped; 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;
+# click an existing event to select it, `e` to edit, `d` to delete.
+# `default_calendar` (a calendar id) sets the default target for new events;
+# override per-event in the modal.
+#
 # calendars:
 #   google:
 #     enabled: true
 #     token: ~/.config/tuiboard/google_token.json
+#     # default_calendar: you@example.com   # default target for new events
 #     # color: "#e8a05c"            # fallback when a calendar has no color
 #   microsoft:
 #     enabled: true

package/CHANGELOG.md

@@ -5,6 +5,27 @@ 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.0] - 2026-06-03
+
+### Added
+- **Create, edit & delete Google Calendar events from the Agenda** (opt-in
+  write). Re-authorize with `tuiboard calendar-setup google --write`, then:
+  - **Create** — press `n` (or click an empty Agenda slot) to open a new-event
+    modal: type a title (append `HH:MM-HH:MM` to set the time), pick the target
+    calendar, Enter to create. A `default_calendar` config sets the default
+    target (override per-event in the modal).
+  - **Edit / delete** — click an existing event on a writable calendar to select
+    it, then `e` (or Enter) to edit its title/time, `d` to delete (with confirm),
+    `Esc` to deselect. Edits stay on the same calendar. Read-only events can't be
+    selected.
+
+  Every change appears in the Agenda and on Google Calendar immediately.
+  Read-only setups are unaffected — the write UI only appears when the token
+  carries the write scope, and only Google events on owner/writer calendars are
+  selectable. Microsoft event write is not supported yet.
+- Expanded the README with a step-by-step Google Cloud OAuth client setup (the
+  bring-your-own-credentials flow), so first-time users have a clear path.
+
 ## [0.7.3] - 2026-06-02
 
 ### Fixed
@@ -113,6 +134,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.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
 [0.7.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.1

package/README.md

@@ -193,13 +193,37 @@ tuiboard calendar-setup google      # opens your browser (read-only scope)
 tuiboard calendar-setup microsoft   # device-code flow, no redirect
 ```
 
-**Google** needs a one-time OAuth client (free): Google Cloud Console → enable
-*Google Calendar API* → create an *OAuth client ID* (type **Desktop app**) →
-download the JSON to `~/.config/tuiboard/google_credentials.json`, then run the
-command above. **Microsoft** needs an Azure app registration (Public client,
-`Calendars.Read` delegated) whose client ID goes in
-`~/.config/tuiboard/azure_config.json` — running `calendar-setup microsoft` with
-no config writes a template that walks you through it.
+**Microsoft** needs an Azure app registration (Public client, `Calendars.Read`
+delegated) whose client ID goes in `~/.config/tuiboard/azure_config.json` —
+running `calendar-setup microsoft` with no config writes a template that walks
+you through it.
+
+#### Google: one-time OAuth client setup
+
+There's no hosted tuiboard app — **you create your own free OAuth client** in
+your own Google Cloud project, so nothing is shared and your data never passes
+through anyone else's servers. It takes about five minutes, once:
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/) and
+   create a project (or pick an existing one) from the project dropdown.
+2. **APIs & Services → Library** → search **"Google Calendar API"** → **Enable**.
+3. **APIs & Services → OAuth consent screen**: if prompted, choose **External**,
+   give the app a name and your email, and save. You don't need to publish it or
+   submit for verification — as the project owner you're automatically a test
+   user of your own app, which is all tuiboard needs. (Add your Google address
+   under **Test users** if it asks.)
+4. **APIs & Services → Credentials → Create credentials → OAuth client ID**.
+   Application type: **Desktop app**. Create.
+5. **Download JSON** on the client you just made, and save it as
+   `~/.config/tuiboard/google_credentials.json`.
+6. Run `tuiboard calendar-setup google` (add `--write` to also create/edit/delete
+   — see below). Your browser opens; approve the access. You'll briefly see an
+   "unverified app" notice — that's expected for your own personal client; click
+   **Advanced → go to (your app)** to continue. The token is saved and the
+   command prints the YAML block to paste into your config.
+
+The `calendar-setup` command prints these exact steps too if it doesn't find the
+credentials file.
 
 After connecting, the command prints the exact YAML to paste into your config:
 
@@ -219,6 +243,46 @@ expired, or unconfigured calendar never breaks the board — it just shows no
 events. Set either provider's `enabled: false` (or drop the block) to turn it
 off; add a `color:` to override the fallback block color.
 
+### Creating, editing & deleting events (Google, opt-in)
+
+Reading is the default. To also **create, edit, and delete** Google Calendar
+events from the Agenda, re-authorize with the write scope:
+
+```bash
+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.
+
+**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.
+- **`d`** deletes it (with a confirm).
+- **`Esc`** deselects.
+
+Edits stay on the same calendar (moving an event between calendars isn't
+supported). Every change appears in the Agenda right away and on Google Calendar.
+
+Set the calendar new events default to with `default_calendar` (a calendar id;
+unset → your primary). You can still override per-event in the modal:
+
+```yaml
+calendars:
+  google:
+    enabled: true
+    token: ~/.config/tuiboard/google_token.json
+    default_calendar: you@example.com   # optional; default target for new events
+```
+
+The write scope is opt-in: without `--write`, tuiboard stays read-only and the
+`n` shortcut / slot-click / event-selection do nothing. Microsoft event write
+isn't supported yet (read-only).
+
 ## Markdown board format
 
 `tuiboard` reads and writes **plain CommonMark** with the Obsidian

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "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/calendar/setup.ts

@@ -21,7 +21,9 @@ import { dirname, isAbsolute, join, resolve } from "node:path";
 import { loadConfig } from "~/config/loader";
 
 const TUIBOARD_DIR = join(homedir(), ".config", "tuiboard");
-const GOOGLE_SCOPE = "https://www.googleapis.com/auth/calendar.readonly";
+const GOOGLE_SCOPE_RO = "https://www.googleapis.com/auth/calendar.readonly";
+/** Added with `--write`: lets tuiboard CREATE events (and still read them). */
+const GOOGLE_SCOPE_EVENTS = "https://www.googleapis.com/auth/calendar.events";
 const MS_SCOPE = "Calendars.Read offline_access openid profile";
 
 function expandPath(p: string, root: string): string {
@@ -32,8 +34,10 @@ function expandPath(p: string, root: string): string {
 function openBrowser(url: string): void {
   try {
     if (process.platform === "win32") {
-      // `start` is a cmd builtin; the empty "" is the window title arg.
-      spawn("cmd", ["/c", "start", "", url], { detached: true, stdio: "ignore" }).unref();
+      // NOT `cmd /c start`: cmd treats the `&` in an OAuth URL as a command
+      // separator and truncates it (→ Google "invalid_request"). rundll32 gets
+      // the URL as a single literal argv, no shell parsing.
+      spawn("rundll32", ["url.dll,FileProtocolHandler", url], { detached: true, stdio: "ignore" }).unref();
     } else if (process.platform === "darwin") {
       spawn("open", [url], { detached: true, stdio: "ignore" }).unref();
     } else {
@@ -58,8 +62,10 @@ interface GoogleClientSecrets {
   token_uri?: string;
 }
 
-async function setupGoogle(credsPath: string, tokenPath: string): Promise<number> {
+async function setupGoogle(credsPath: string, tokenPath: string, write: boolean): Promise<number> {
+  const scopes = write ? [GOOGLE_SCOPE_RO, GOOGLE_SCOPE_EVENTS] : [GOOGLE_SCOPE_RO];
   console.log("\n── Google Calendar setup ──────────────────────────────────");
+  console.log(write ? "Mode: read + create events" : "Mode: read-only (add --write to create events)");
   if (!existsSync(credsPath)) {
     console.log(`OAuth client file not found:\n  ${credsPath}\n
 Create it:
@@ -88,7 +94,10 @@ Create it:
     console.log("client_id / client_secret missing from the OAuth client file.");
     return 1;
   }
-  const authUri = secrets.auth_uri || "https://accounts.google.com/o/oauth2/auth";
+  // Force the current v2 authorization endpoint. Desktop client_secret files
+  // still ship the legacy `/o/oauth2/auth` in `auth_uri`, which returns
+  // "Error 400: invalid_request (GeneralOAuthFlow)" for loopback + multi-scope.
+  const authUri = "https://accounts.google.com/o/oauth2/v2/auth";
   const tokenUri = secrets.token_uri || "https://oauth2.googleapis.com/token";
 
   // Loopback server captures the ?code= redirect.
@@ -96,15 +105,22 @@ Create it:
   const result = new Promise<{ code?: string; error?: string }>((r) => (resolveResult = r));
   const server = Bun.serve({
     port: 0,
+    // Bind the IPv4 loopback explicitly. On Windows `localhost` resolves to
+    // IPv6 `::1` first; if the server is IPv4-only the redirect is refused.
+    // We also use 127.0.0.1 in the redirect URI so the two always match.
+    hostname: "127.0.0.1",
     fetch(req) {
       const u = new URL(req.url);
       const code = u.searchParams.get("code") ?? undefined;
       const error = u.searchParams.get("error") ?? undefined;
       if (code || error) {
-        resolveResult({ code, error });
         const msg = error
           ? `Authorization failed: ${error}`
           : "tuiboard is now connected to Google Calendar. You can close this tab.";
+        // Resolve AFTER the response is handed back so the success page has a
+        // moment to flush; resolving synchronously lets the caller stop the
+        // server before the bytes reach the browser (→ ERR_CONNECTION_REFUSED).
+        setTimeout(() => resolveResult({ code, error }), 300);
         return new Response(`<!doctype html><meta charset=utf-8><body style="font:16px system-ui;padding:3rem">${msg}</body>`, {
           headers: { "content-type": "text/html" },
         });
@@ -112,24 +128,24 @@ Create it:
       return new Response("waiting for Google…", { headers: { "content-type": "text/plain" } });
     },
   });
-  const redirectUri = `http://localhost:${server.port}`;
+  const redirectUri = `http://127.0.0.1:${server.port}`;
   const authUrl =
     `${authUri}?` +
     new URLSearchParams({
       client_id: clientId,
       redirect_uri: redirectUri,
       response_type: "code",
-      scope: GOOGLE_SCOPE,
+      scope: scopes.join(" "),
       access_type: "offline",
       prompt: "consent",
     }).toString();
 
-  console.log("Opening your browser to authorize Google Calendar (read-only)…");
+  console.log(`Opening your browser to authorize Google Calendar (${write ? "read + write" : "read-only"})…`);
   console.log(`If it doesn't open, visit:\n  ${authUrl}\n`);
   openBrowser(authUrl);
 
   const { code, error } = await result;
-  server.stop(true);
+  server.stop(); // graceful: lets the success page finish sending
   if (error || !code) {
     console.log(`\nSetup cancelled${error ? `: ${error}` : ""}.`);
     return 1;
@@ -165,7 +181,7 @@ Create it:
     token_uri: tokenUri,
     client_id: clientId,
     client_secret: clientSecret,
-    scopes: [GOOGLE_SCOPE],
+    scopes,
     expiry: data.expires_in ? new Date(Date.now() + data.expires_in * 1000).toISOString() : undefined,
   });
   console.log(`\n✓ Google Calendar connected. Token saved:\n  ${tokenPath}\n`);
@@ -279,8 +295,9 @@ function usage(): void {
   console.log(`tuiboard calendar-setup — connect a calendar to the Agenda overlay
 
 Usage:
-  tuiboard calendar-setup google      Browser OAuth for Google Calendar
-  tuiboard calendar-setup microsoft   Device-code flow for Microsoft 365
+  tuiboard calendar-setup google           Browser OAuth, read-only
+  tuiboard calendar-setup google --write   Browser OAuth, read + create events
+  tuiboard calendar-setup microsoft        Device-code flow for Microsoft 365
 
 Tokens are written to the paths in your tuiboard config (calendars.google.token
 / calendars.microsoft.tokenCache), or ~/.config/tuiboard/ if no calendars block
@@ -289,7 +306,8 @@ prints the exact YAML.`);
 }
 
 export async function runCalendarSetup(argv: string[]): Promise<number> {
-  const provider = (argv[0] ?? "").toLowerCase();
+  const write = argv.includes("--write");
+  const provider = (argv.find((a) => !a.startsWith("--")) ?? "").toLowerCase();
   const cfg = loadConfig();
   const root = cfg.root;
 
@@ -299,7 +317,7 @@ export async function runCalendarSetup(argv: string[]): Promise<number> {
       ? expandPath(g.credentials, root)
       : join(TUIBOARD_DIR, "google_credentials.json");
     const tokenPath = g?.token ? expandPath(g.token, root) : join(TUIBOARD_DIR, "google_token.json");
-    const rc = await setupGoogle(credsPath, tokenPath);
+    const rc = await setupGoogle(credsPath, tokenPath, write);
     if (rc === 0 && !g) {
       console.log(`Add this to your tuiboard config (${cfg.loaded ? "config found" : "create ~/.config/tuiboard/config.yaml"}):
 

package/src/config/loader.ts

@@ -83,6 +83,9 @@ export interface GoogleCalendarConfig {
   credentials?: string;
   /** Fallback color when a calendar has none of its own. */
   color?: string;
+  /** Calendar id new events are created on by default (override in the modal).
+   *  Unset → the account's primary calendar. Requires `--write` setup. */
+  defaultCalendar?: string;
 }
 
 export interface MicrosoftCalendarConfig {
@@ -152,6 +155,7 @@ interface RawConfig {
       token?: string;
       credentials?: string;
       color?: string;
+      default_calendar?: string;
     };
     microsoft?: {
       enabled?: boolean;
@@ -191,6 +195,7 @@ function normalizeCalendars(
       token: expandPath(g.token, root),
       credentials: g.credentials ? expandPath(g.credentials, root) : undefined,
       color: g.color,
+      defaultCalendar: g.default_calendar,
     };
   }
   const m = raw.microsoft;

package/src/input/handleKey.ts

@@ -14,6 +14,7 @@
  */
 
 import { isHiddenColumn } from "~/config/loader";
+import { googleTokenCanWrite } from "~/store/calendar";
 import { isTask } from "~/parser/markdown";
 import {
   isoToday,
@@ -59,6 +60,14 @@ export function handleKey(
       }
       return;
     }
+    if (ui.modal.kind === "confirm-delete-event") {
+      if (key.name === "y" || key.name === "enter" || key.name === "return") {
+        void store.confirmDeleteEvent();
+      } else if (key.name === "n") {
+        store.closeModal();
+      }
+      return;
+    }
     if ((ui.modal.kind === "help" ||
          ui.modal.kind === "detail" ||
          ui.modal.kind === "agent-detail") &&
@@ -66,6 +75,17 @@ export function handleKey(
       store.closeModal();
       return;
     }
+    // New-event modal: step 1 typing goes to the <input>; step 2 (no input
+    // focused) is the calendar picker, driven here.
+    if (ui.modal.kind === "event") {
+      const p = ui.eventPicker;
+      if (p && p.step === 2) {
+        if (key.name === "j" || key.name === "down") { store.setEventSel(p.sel + 1); return; }
+        if (key.name === "k" || key.name === "up") { store.setEventSel(p.sel - 1); return; }
+        if (key.name === "enter" || key.name === "return") { void store.confirmEventPicker(); return; }
+      }
+      return;
+    }
     return;
   }
 
@@ -85,6 +105,11 @@ export function handleKey(
       store.flashBanner("info", wasMode ? "Arm mode off" : "Disarmed");
       return;
     }
+    if (ui.selectedCalEvent) {
+      store.clearCalSelection();
+      store.flashBanner("info", "Event deselected");
+      return;
+    }
     if (ui.grabbing) {
       store.exitGrab();
       store.flashBanner("info", "Grab released");
@@ -294,6 +319,34 @@ function handleTimelineZone(
   );
   const target = entries[ui.row];
 
+  // A selected (clicked) calendar event takes over e/d/Enter for edit/delete.
+  // Any other key drops the selection and is then handled normally below.
+  const selCal = ui.selectedCalEvent;
+  if (selCal) {
+    if (key.name === "e" || key.name === "enter" || key.name === "return") {
+      store.openEventEditModal();
+      return;
+    }
+    if (key.name === "d") {
+      openLater({ kind: "confirm-delete-event" });
+      return;
+    }
+    store.clearCalSelection();
+  }
+
+  // `n` (Agenda zone) = create a Google Calendar event at the now-rounded slot.
+  // Mirrors `n` = new task in the board. Gated on Google write being connected.
+  if ((key.name === "n" || key.name === "N") && !key.ctrl) {
+    const g = store.config.calendars?.google;
+    if (g && googleTokenCanWrite(g.token)) {
+      const { startMin, endMin } = nextNowBlock();
+      store.openEventModal(store.agendaDate(), startMin, endMin);
+    } else {
+      store.flashBanner("warn", "Connect Google write first: tuiboard calendar-setup google --write");
+    }
+    return;
+  }
+
   // Armed-block adjustments take priority over navigation. While a block
   // is armed, j/k nudge its start time and +/- nudge its end.
   const armedRef = ui.armedTimelineRef;

package/src/store/calendar.ts

@@ -29,6 +29,14 @@ export interface CalEvent {
   endMin: number;
   color: string;
   source: "google" | "microsoft";
+  /** Google calendar id this event lives on (set for Google events only). */
+  calendarId?: string;
+  /** Google event id (set for Google events only). Needed to edit/delete. */
+  eventId?: string;
+  /** True when this event can be edited/deleted from tuiboard: a Google event
+   *  on an owner/writer calendar, with a write-scoped token. Microsoft events
+   *  and read-only-calendar events are never editable. */
+  editable?: boolean;
 }
 
 const GOOGLE_FALLBACK_COLOR = "#e8a05c";
@@ -143,6 +151,182 @@ async function googleAccessToken(tokenPath: string): Promise<string | null> {
   }
 }
 
+// ─── Google write (calendar list + event creation) ──────────────────────────
+
+/** A calendar the connected account can write to (accessRole owner/writer). */
+export interface WritableCalendar {
+  id: string;
+  summary: string;
+  accessRole: string;
+  color: string;
+  primary: boolean;
+}
+
+/**
+ * List the calendars the connected Google account can WRITE to (owner/writer),
+ * with display name + color. Used by the new-event calendar picker. Returns []
+ * on any failure. (Read path `fetchGoogle` keeps its own, reader-scoped query.)
+ */
+export async function listGoogleCalendars(
+  cfg: GoogleCalendarConfig,
+): Promise<WritableCalendar[]> {
+  const access = await googleAccessToken(cfg.token);
+  if (!access) return [];
+  try {
+    const res = await fetch(
+      "https://www.googleapis.com/calendar/v3/users/me/calendarList",
+      { headers: { Authorization: `Bearer ${access}` } },
+    );
+    if (!res.ok) return [];
+    const list = (await res.json()) as {
+      items?: Array<{
+        id: string;
+        summary?: string;
+        accessRole?: string;
+        backgroundColor?: string;
+        primary?: boolean;
+      }>;
+    };
+    return (list.items ?? [])
+      .filter((c) => c.accessRole === "owner" || c.accessRole === "writer")
+      .map((c) => ({
+        id: c.id,
+        summary: c.summary ?? c.id,
+        accessRole: c.accessRole ?? "reader",
+        color: c.backgroundColor || cfg.color || GOOGLE_FALLBACK_COLOR,
+        primary: c.primary === true,
+      }));
+  } catch {
+    return [];
+  }
+}
+
+/** True if the persisted Google token carries an event-write scope. Gates the
+ *  whole event-creation UI so read-only users never see it. */
+export function googleTokenCanWrite(tokenPath: string): boolean {
+  try {
+    const tok = JSON.parse(readFileSync(tokenPath, "utf-8")) as { scopes?: string[] };
+    return (
+      Array.isArray(tok.scopes) &&
+      tok.scopes.some((s) => s.includes("calendar.events") || s.endsWith("/auth/calendar"))
+    );
+  } catch {
+    return false;
+  }
+}
+
+/** RFC3339 timestamp with the LOCAL UTC offset for `min` minutes past local
+ *  midnight of `dateIso` — e.g. "2026-06-03T15:00:00+02:00". Per-instant offset,
+ *  so DST is handled; Google then stores the wall-clock time exactly as typed. */
+function localRfc3339(dateIso: string, min: number): string {
+  const d = new Date(dayStartMs(dateIso) + min * 60000);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const offMin = -d.getTimezoneOffset(); // minutes east of UTC
+  const sign = offMin >= 0 ? "+" : "-";
+  const off = Math.abs(offMin);
+  return (
+    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+    `T${pad(d.getHours())}:${pad(d.getMinutes())}:00` +
+    `${sign}${pad(Math.floor(off / 60))}:${pad(off % 60)}`
+  );
+}
+
+/**
+ * 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.
+ */
+export async function createGoogleEvent(
+  cfg: GoogleCalendarConfig,
+  args: { calendarId: string; title: string; dateIso: string; startMin: number; endMin: number },
+): 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 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) },
+        }),
+      },
+    );
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      return { ok: false, error: `${res.status} ${body.slice(0, 140)}` };
+    }
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: String(e) };
+  }
+}
+
+/**
+ * Edit an existing Google Calendar event's title + time (same calendar — moving
+ * an event between calendars is intentionally not supported). PATCH so untouched
+ * fields (attendees, description, recurrence, …) are preserved.
+ */
+export async function updateGoogleEvent(
+  cfg: GoogleCalendarConfig,
+  args: { calendarId: string; eventId: string; title: string; dateIso: string; startMin: number; endMin: number },
+): 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 res = await fetch(
+      `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(args.calendarId)}/events/${encodeURIComponent(args.eventId)}`,
+      {
+        method: "PATCH",
+        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) },
+        }),
+      },
+    );
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      return { ok: false, error: `${res.status} ${body.slice(0, 140)}` };
+    }
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: String(e) };
+  }
+}
+
+/** Delete a Google Calendar event. DELETE returns 204 (no body) on success. */
+export async function deleteGoogleEvent(
+  cfg: GoogleCalendarConfig,
+  args: { calendarId: string; eventId: string },
+): 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 res = await fetch(
+      `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(args.calendarId)}/events/${encodeURIComponent(args.eventId)}`,
+      { method: "DELETE", headers: { Authorization: `Bearer ${access}` } },
+    );
+    // 410 Gone = already deleted; treat as success (the goal state is reached).
+    if (!res.ok && res.status !== 410) {
+      const body = await res.text().catch(() => "");
+      return { ok: false, error: `${res.status} ${body.slice(0, 140)}` };
+    }
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: String(e) };
+  }
+}
+
 async function fetchGoogle(
   cfg: GoogleCalendarConfig,
   dateIso: string,
@@ -168,13 +352,17 @@ async function fetchGoogle(
     );
     if (!listRes.ok) return [];
     const list = (await listRes.json()) as {
-      items?: Array<{ id: string; backgroundColor?: string; selected?: boolean }>;
+      items?: Array<{ id: string; backgroundColor?: string; selected?: boolean; accessRole?: string }>;
     };
+    // Events are editable only with a write-scoped token AND on a calendar the
+    // account owns/can-write. Computed once here, stamped on each event below.
+    const canWrite = googleTokenCanWrite(cfg.token);
     const cals = (list.items ?? []).map((c) => ({
       id: c.id,
       color: c.backgroundColor || fallback,
+      writable: canWrite && (c.accessRole === "owner" || c.accessRole === "writer"),
     }));
-    if (cals.length === 0) cals.push({ id: "primary", color: fallback });
+    if (cals.length === 0) cals.push({ id: "primary", color: fallback, writable: false });
 
     const events: CalEvent[] = [];
     const seen = new Set<string>();
@@ -209,6 +397,9 @@ async function fetchGoogle(
                 endMin,
                 color: cal.color,
                 source: "google",
+                calendarId: cal.id,
+                eventId: it.id,
+                editable: cal.writable && !!it.id,
               },
             });
           }

package/src/store/index.ts

@@ -28,7 +28,16 @@ import {
   type BoardWatcher,
 } from "~/io/watcher";
 import { createAgentsStore, type AgentsStore } from "./agents";
-import { createCalendarStore, type CalendarStore } from "./calendar";
+import {
+  createCalendarStore,
+  createGoogleEvent,
+  deleteGoogleEvent,
+  googleTokenCanWrite,
+  listGoogleCalendars,
+  updateGoogleEvent,
+  type CalendarStore,
+  type WritableCalendar,
+} from "./calendar";
 import { ConflictError, statMtime, writeBoardFile } from "~/io/writer";
 import { isTask, parseBoard } from "~/parser/markdown";
 import { serializeBoard } from "~/parser/serialize";
@@ -67,9 +76,44 @@ export type ModalKind =
   | { kind: "confirm-delete"; ref: TaskRef }
   | { kind: "detail"; ref: TaskRef }
   | { kind: "agent-detail"; sessionId: string }
+  | { kind: "event"; dateIso: string; startMin: number; endMin: number }
+  | { kind: "event-edit" }
+  | { kind: "confirm-delete-event" }
   | { kind: "search" }
   | { kind: "help" };
 
+/**
+ * Transient state for the two-step "new calendar event" modal. Step 1 is the
+ * title+time `<input>`; step 2 is the calendar picker, navigated via handleKey
+ * (no input focused). Lives in UI state so the key handler can drive it.
+ */
+export interface EventPicker {
+  step: 1 | 2;
+  /** Selection index into `cals` (step 2). */
+  sel: number;
+  title: string;
+  dateIso: string;
+  startMin: number;
+  endMin: number;
+  cals: WritableCalendar[];
+}
+
+/**
+ * The Google Calendar event currently selected in the Agenda (by clicking an
+ * editable event band). Parallel to `armedTimelineRef` but for read/write
+ * calendar events rather than tasks. While set, `e` edits and `d` deletes it.
+ */
+export interface SelectedCalEvent {
+  calendarId: string;
+  eventId: string;
+  title: string;
+  startMin: number;
+  endMin: number;
+  /** The Agenda day the event was selected on — its date for the API call. */
+  dateIso: string;
+  color: string;
+}
+
 /** Which dashboard zone owns the keyboard cursor. */
 export type ActiveZone = "planner" | "board" | "timeline" | "agents";
 
@@ -118,6 +162,13 @@ export interface UIState {
    * cancels.
    */
   armedTimelineRef?: TaskRef;
+  /**
+   * The Google Calendar event currently selected in the Agenda (clicked). While
+   * set, the Agenda zone's `e` edits it and `d` deletes it; any navigation key
+   * or `Esc` clears it. Only ever set for editable events (owner/writer + write
+   * token), so the presence of this implies "actionable".
+   */
+  selectedCalEvent?: SelectedCalEvent;
   /**
    * Persistent calendar "arm mode" (toggled with `c`). While on, clicking any
    * task in the board / planner panel arms it for the timeline, so you can
@@ -146,6 +197,8 @@ export interface UIState {
   banner?: { kind: "info" | "warn" | "error"; text: string; ts: number };
   /** Open modal, if any. Keyboard handler routes input to the modal when set. */
   modal?: ModalKind;
+  /** Two-step new-event modal state (set only while `modal.kind === "event"`). */
+  eventPicker?: EventPicker;
 }
 
 export interface UndoEntry {
@@ -1058,6 +1111,150 @@ export function createTuiStore({ config }: CreateStoreOptions) {
 
   function closeModal(): void {
     setState("ui", "modal", undefined);
+    setState("ui", "eventPicker", undefined);
+  }
+
+  // ─── New calendar event (two-step modal) ─────────────────────────────────
+
+  /** Open the "new event" modal for a time slot. Guarded on Google write being
+   *  connected; prefetches the writable calendars while the user types. */
+  function openEventModal(dateIso: string, startMin: number, endMin: number): void {
+    const g = config.calendars?.google;
+    if (!g || !googleTokenCanWrite(g.token)) {
+      flashBanner("warn", "Connect Google write first: tuiboard calendar-setup google --write");
+      return;
+    }
+    setState("ui", "eventPicker", { step: 1, sel: 0, title: "", dateIso, startMin, endMin, cals: [] });
+    // Defer the modal open so the OpenTUI <input> mounts after this key event.
+    setTimeout(() => openModal({ kind: "event", dateIso, startMin, endMin }), 0);
+    void listGoogleCalendars(g).then((cals) => {
+      setState("ui", "eventPicker", produce((p: EventPicker | undefined) => {
+        if (p && p.cals.length === 0) p.cals = cals;
+      }));
+    });
+  }
+
+  /** 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> {
+    const g = config.calendars?.google;
+    if (!g || !state.ui.eventPicker) { closeModal(); return; }
+    let cals = state.ui.eventPicker.cals;
+    if (cals.length === 0) cals = await listGoogleCalendars(g);
+    if (cals.length === 0) {
+      flashBanner("warn", "No writable Google calendars");
+      closeModal();
+      return;
+    }
+    const def = g.defaultCalendar;
+    const idx = cals.findIndex((c) => (def ? c.id === def : c.primary));
+    setState("ui", "eventPicker", produce((p: EventPicker | undefined) => {
+      if (!p) return;
+      p.title = title;
+      p.startMin = startMin;
+      p.endMin = endMin;
+      p.cals = cals;
+      p.sel = idx < 0 ? 0 : idx;
+      p.step = 2;
+    }));
+    if (cals.length === 1) void confirmEventPicker();
+  }
+
+  /** Move the step-2 calendar selection (wraps). */
+  function setEventSel(n: number): void {
+    setState("ui", "eventPicker", produce((p: EventPicker | undefined) => {
+      if (!p || p.cals.length === 0) return;
+      p.sel = ((n % p.cals.length) + p.cals.length) % p.cals.length;
+    }));
+  }
+
+  /** Create the event on the selected calendar, refresh the agenda, close. */
+  async function confirmEventPicker(): Promise<void> {
+    const p = state.ui.eventPicker;
+    const g = config.calendars?.google;
+    if (!p || !g) { closeModal(); return; }
+    const calendarId = p.cals[p.sel]?.id ?? g.defaultCalendar ?? "primary";
+    const title = p.title.trim() || "(busy)";
+    closeModal();
+    const r = await createGoogleEvent(g, {
+      calendarId,
+      title,
+      dateIso: p.dateIso,
+      startMin: p.startMin,
+      endMin: p.endMin,
+    });
+    if (r.ok) {
+      calendarStore.refresh(true);
+      flashBanner("info", `📅 Event created: ${title}`);
+    } else {
+      flashBanner("error", `Create failed: ${r.error}`);
+    }
+  }
+
+  // ─── Edit / delete an existing calendar event ────────────────────────────
+
+  /** Select an editable Google event (clicked in the Agenda). Toggles off if
+   *  the same event is clicked again. Clears any armed task so the two
+   *  selection models don't fight. */
+  function selectCalEvent(sel: SelectedCalEvent): void {
+    const cur = state.ui.selectedCalEvent;
+    if (cur && cur.calendarId === sel.calendarId && cur.eventId === sel.eventId) {
+      setState("ui", "selectedCalEvent", undefined);
+      return;
+    }
+    setState("ui", "armedTimelineRef", undefined);
+    setState("ui", "selectedCalEvent", sel);
+  }
+
+  function clearCalSelection(): void {
+    setState("ui", "selectedCalEvent", undefined);
+  }
+
+  /** Open the edit modal for the selected event (deferred so the <input>
+   *  mounts after this key event). No-op if nothing is selected. */
+  function openEventEditModal(): void {
+    if (!state.ui.selectedCalEvent) return;
+    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> {
+    const sel = state.ui.selectedCalEvent;
+    const g = config.calendars?.google;
+    if (!sel || !g) { closeModal(); return; }
+    closeModal();
+    const r = await updateGoogleEvent(g, {
+      calendarId: sel.calendarId,
+      eventId: sel.eventId,
+      title: title.trim() || sel.title,
+      dateIso: sel.dateIso,
+      startMin,
+      endMin,
+    });
+    clearCalSelection();
+    if (r.ok) {
+      calendarStore.refresh(true);
+      flashBanner("info", `✏ Event updated: ${title.trim() || sel.title}`);
+    } else {
+      flashBanner("error", `Update failed: ${r.error}`);
+    }
+  }
+
+  /** Delete the selected event, refresh, close. */
+  async function confirmDeleteEvent(): Promise<void> {
+    const sel = state.ui.selectedCalEvent;
+    const g = config.calendars?.google;
+    if (!sel || !g) { closeModal(); return; }
+    closeModal();
+    const r = await deleteGoogleEvent(g, { calendarId: sel.calendarId, eventId: sel.eventId });
+    clearCalSelection();
+    if (r.ok) {
+      calendarStore.refresh(true);
+      flashBanner("info", `🗑 Event deleted: ${sel.title}`);
+    } else {
+      flashBanner("error", `Delete failed: ${r.error}`);
+    }
   }
 
   // ─── Private mutation helper ─────────────────────────────────────────────
@@ -1133,6 +1330,15 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     resetAllOverdueToToday,
     openModal,
     closeModal,
+    openEventModal,
+    advanceEventToStep2,
+    setEventSel,
+    confirmEventPicker,
+    selectCalEvent,
+    clearCalSelection,
+    openEventEditModal,
+    confirmEventEdit,
+    confirmDeleteEvent,
     flashBanner,
     clearBanner,
     // undo

package/src/store/timeline.ts

@@ -50,6 +50,12 @@ export interface CalTimelineEntry extends BaseEntry {
   title: string;
   color: string;
   source: "google" | "microsoft";
+  /** Google calendar id (Google events only) — needed to edit/delete. */
+  calendarId?: string;
+  /** Google event id (Google events only) — needed to edit/delete. */
+  eventId?: string;
+  /** True when this event can be edited/deleted from tuiboard. */
+  editable?: boolean;
 }
 
 export type TimelineEntry = TaskTimelineEntry | CalTimelineEntry;
@@ -168,7 +174,16 @@ export function buildTimelineEntries(
  * the target day) into grid entries, clipped to the rendered window.
  */
 export function buildCalendarEntries(
-  events: Array<{ title: string; startMin: number; endMin: number; color: string; source: "google" | "microsoft" }>,
+  events: Array<{
+    title: string;
+    startMin: number;
+    endMin: number;
+    color: string;
+    source: "google" | "microsoft";
+    calendarId?: string;
+    eventId?: string;
+    editable?: boolean;
+  }>,
 ): CalTimelineEntry[] {
   const out: CalTimelineEntry[] = [];
   for (const e of events) {
@@ -179,6 +194,9 @@ export function buildCalendarEntries(
       title: e.title,
       color: e.color,
       source: e.source,
+      calendarId: e.calendarId,
+      eventId: e.eventId,
+      editable: e.editable,
       startMin: e.startMin,
       endMin: e.endMin,
       startRow: rows.startRow,

package/src/ui/Modal.tsx

@@ -21,6 +21,7 @@ import {
 } from "~/store/parsers";
 import { ATTR, T } from "~/ui/glyphs";
 import { AGENDA_WIDTH } from "~/ui/layout";
+import { formatHm } from "~/store/timeline";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
@@ -50,6 +51,9 @@ function ModalRouter(props: { store: TuiStore; modal: NonNullable<TuiStore["stat
     case "confirm-delete": return <ConfirmDeleteModal store={props.store} modal={m} />;
     case "detail":   return <DetailModal store={props.store} modal={m} />;
     case "agent-detail": return <AgentDetailModal store={props.store} modal={m} />;
+    case "event":    return <EventModal store={props.store} />;
+    case "event-edit": return <EventEditModal store={props.store} />;
+    case "confirm-delete-event": return <ConfirmDeleteEventModal store={props.store} />;
     case "search":   return <SearchModal store={props.store} />;
     case "help":     return <HelpModal store={props.store} />;
   }
@@ -267,6 +271,191 @@ function TimeBlockModal(props: { store: TuiStore; modal: Extract<NonNullable<Tui
   );
 }
 
+// ─── New calendar event ──────────────────────────────────────────────────────
+
+/**
+ * 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).
+ * Step 2: a non-input calendar list navigated via handleKey (no input focused),
+ * preselected to the configured default. See `openEventModal` / `confirmEventPicker`.
+ */
+function EventModal(props: { store: TuiStore }) {
+  const picker = () => props.store.state.ui.eventPicker;
+  const defaultId = () => props.store.config.calendars?.google?.defaultCalendar;
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal<string | undefined>();
+
+  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;
+      }
+    }
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.advanceEventToStep2(title, startMin, endMin);
+  }
+
+  return (
+    <Show when={picker()}>
+      <Show
+        when={picker()!.step === 2}
+        fallback={
+          <DialogShell
+            title="New event"
+            hint={`${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)} · append HH:MM-HH:MM to change · Enter add · Esc cancel`}
+          >
+            <input
+              focused
+              value={value()}
+              onInput={(v: string) => {
+                setValue(v);
+                setError(undefined);
+              }}
+              onSubmit={((v: string) => submit(v)) as any}
+            />
+            <Show when={error()}>
+              <text>
+                <span style={{ fg: T.bannerError }}>{error()!}</span>
+              </text>
+            </Show>
+          </DialogShell>
+        }
+      >
+        <DialogShell
+          title={`Calendar · ${formatHm(picker()!.startMin)}-${formatHm(picker()!.endMin)}`}
+          hint="j/k choose · Enter create · Esc cancel"
+        >
+          <For each={picker()!.cals}>
+            {(c, i) => {
+              const isSel = () => i() === picker()!.sel;
+              const isDefault = defaultId() ? c.id === defaultId() : c.primary;
+              return (
+                <box style={{ backgroundColor: isSel() ? T.cardBgCursor : undefined }}>
+                  <text wrapMode="none" truncate>
+                    <span style={{ fg: isSel() ? T.accent : T.textDim }}>
+                      {isSel() ? "▶ " : "  "}
+                    </span>
+                    <span style={{ fg: c.color }}>{"● "}</span>
+                    <span style={{ fg: T.text }}>{c.summary}</span>
+                    <Show when={isDefault}>
+                      <span style={{ fg: T.textDim }}>{"  (default)"}</span>
+                    </Show>
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </DialogShell>
+      </Show>
+    </Show>
+  );
+}
+
+// ─── Edit existing calendar event ────────────────────────────────────────────
+
+/**
+ * Edit the selected Google Calendar event's title + time (same calendar). A
+ * single `<input>` prefilled with "Title HH:MM-HH:MM"; Enter saves via PATCH.
+ * Reads `ui.selectedCalEvent` (set by clicking an editable event in the Agenda).
+ */
+function EventEditModal(props: { store: TuiStore }) {
+  const sel = () => props.store.state.ui.selectedCalEvent;
+  const s0 = sel();
+  const [value, setValue] = createSignal(
+    s0 ? `${s0.title} ${formatHm(s0.startMin)}-${formatHm(s0.endMin)}` : "",
+  );
+  const [error, setError] = createSignal<string | undefined>();
+
+  function submit(text: string) {
+    const s = sel();
+    if (!s) {
+      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;
+      }
+    }
+    if (!title) {
+      setError("Title required");
+      return;
+    }
+    void props.store.confirmEventEdit(title, startMin, endMin);
+  }
+
+  return (
+    <Show when={sel()}>
+      <DialogShell
+        title="Edit event"
+        hint="append HH:MM-HH:MM to change the time · Enter save · Esc cancel"
+      >
+        <input
+          focused
+          value={value()}
+          onInput={(v: string) => {
+            setValue(v);
+            setError(undefined);
+          }}
+          onSubmit={((v: string) => submit(v)) as any}
+        />
+        <Show when={error()}>
+          <text>
+            <span style={{ fg: T.bannerError }}>{error()!}</span>
+          </text>
+        </Show>
+      </DialogShell>
+    </Show>
+  );
+}
+
+// ─── Confirm delete calendar event ───────────────────────────────────────────
+
+function ConfirmDeleteEventModal(props: { store: TuiStore }) {
+  const sel = () => props.store.state.ui.selectedCalEvent;
+  return (
+    <DialogShell title="Delete event?" hint="⏎/y confirm · Esc/n cancel">
+      <text wrapMode="none" truncate>
+        <span style={{ fg: sel()?.color ?? T.text }}>{"📅 "}</span>
+        <span style={{ fg: T.text }}>{sel()?.title ?? "(missing)"}</span>
+        <Show when={sel()}>
+          <span style={{ fg: T.textDim }}>
+            {`  ${formatHm(sel()!.startMin)}-${formatHm(sel()!.endMin)}`}
+          </span>
+        </Show>
+      </text>
+      <text>
+        <span style={{ fg: T.textDim }}>Deletes from Google Calendar — cannot be undone here.</span>
+      </text>
+    </DialogShell>
+  );
+}
+
 // ─── Assign ──────────────────────────────────────────────────────────────────
 
 function AssignModal(props: { store: TuiStore; modal: Extract<NonNullable<TuiStore["state"]["ui"]["modal"]>, { kind: "assign" }> }) {
@@ -599,6 +788,8 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  [ / ]              Previous / next day (tasks + calendar events)\n"}</span>
         <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 }}>{"  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>
         <span style={{ fg: T.text }}>{"  click band         Arm an existing block (or place the armed task at its start)\n"}</span>

package/src/ui/TimelineView.tsx

@@ -36,6 +36,7 @@ import {
   onMount,
 } from "solid-js";
 
+import { googleTokenCanWrite } from "~/store/calendar";
 import type { TaskRef } from "~/store/index";
 import {
   DAY_START_HOUR,
@@ -92,6 +93,13 @@ export function TimelineView(props: TimelineViewProps) {
   const viewedDate = () => props.store.agendaDate();
   const isToday = () => props.store.state.ui.agendaOffset === 0;
 
+  // The Google event currently selected (clicked) for edit/delete, if any.
+  const selectedCal = () => props.store.state.ui.selectedCalEvent;
+  const selectedCalKey = () => {
+    const s = selectedCal();
+    return s ? `${s.calendarId}:${s.eventId}` : undefined;
+  };
+
   // Task entries drive the cursor + arm/keyboard interactions.
   const entries = createMemo(() => {
     props.store.state.rev; // recompute on any board mutation
@@ -189,11 +197,34 @@ export function TimelineView(props: TimelineViewProps) {
   const onBlockClick = (entry: TimelineEntry, event: MouseEventLike) => {
     props.store.setActiveZone("timeline");
 
-    // Calendar events are read-only: they can't be armed or moved. A click on
-    // one while a task is armed just places the armed task at that slot;
-    // otherwise it's a no-op (beyond focusing the zone).
+    // Calendar events can't be armed or time-block-moved. While a task is armed,
+    // a click places that task at this slot (unchanged). Otherwise: an editable
+    // Google event gets SELECTED for edit/delete (toggles off on re-click); a
+    // read-only event just reports that it can't be changed.
     if (entry.kind !== "task") {
-      if (armedRef()) onEmptyRowClick(entry.startRow, event);
+      if (armedRef()) {
+        onEmptyRowClick(entry.startRow, event);
+        return;
+      }
+      if (entry.kind === "calendar") {
+        if (entry.editable && entry.calendarId && entry.eventId) {
+          const wasSelected = selectedCalKey() === `${entry.calendarId}:${entry.eventId}`;
+          props.store.selectCalEvent({
+            calendarId: entry.calendarId,
+            eventId: entry.eventId,
+            title: entry.title,
+            startMin: entry.startMin,
+            endMin: entry.endMin,
+            dateIso: viewedDate(),
+            color: entry.color,
+          });
+          if (!wasSelected) {
+            props.store.flashBanner("info", `Selected "${tailTruncate(entry.title, 28)}" · e edit · d delete · Esc`);
+          }
+        } else {
+          props.store.flashBanner("info", "Read-only event — not on a writable calendar");
+        }
+      }
       return;
     }
 
@@ -238,7 +269,17 @@ export function TimelineView(props: TimelineViewProps) {
   const onEmptyRowClick = (rowIndex: number, event: MouseEventLike) => {
     const armed = armedTask();
     const ref = armedRef();
-    if (!armed || !ref) return;
+    if (!armed || !ref) {
+      // Nothing armed: an empty-slot click creates a Google Calendar event at
+      // that time (only when Google write is connected — otherwise a no-op).
+      const g = props.store.config.calendars?.google;
+      if (g && googleTokenCanWrite(g.token)) {
+        const startMin = Math.max(0, DAY_START_HOUR * 60 + rowIndex * MINS_PER_ROW);
+        const endMin = Math.min(24 * 60 - 1, startMin + DEFAULT_BLOCK_MIN);
+        props.store.openEventModal(viewedDate(), startMin, endMin);
+      }
+      return;
+    }
     const targetMin = DAY_START_HOUR * 60 + rowIndex * MINS_PER_ROW;
 
     // Unscheduled task → create a fresh block at the clicked row.
@@ -335,10 +376,21 @@ export function TimelineView(props: TimelineViewProps) {
           </span>
         </text>
       </Show>
+      {/* A selected calendar event shows its own action hint. */}
+      <Show when={selectedCal()}>
+        <text wrapMode="none">
+          <span style={{ fg: T.warm, attributes: ATTR.bold }}>
+            {"📅 "}{tailTruncate(selectedCal()!.title, 28)}{" "}
+          </span>
+          <span style={{ fg: T.textDim }}>
+            {"  e edit · d delete · Esc deselect"}
+          </span>
+        </text>
+      </Show>
       {/* Day-navigation hint — always visible in the resting state (not while
-          arming) so the [ ] day-switch is discoverable. Off-today, the
-          "\ today" reset is highlighted to pull the eye back. */}
-      <Show when={!armMode() && !armedTask()}>
+          arming or with an event selected) so the [ ] day-switch is
+          discoverable. Off-today, the "\ today" reset is highlighted. */}
+      <Show when={!armMode() && !armedTask() && !selectedCal()}>
         <text wrapMode="none">
           <span style={{ fg: T.warm }}>{"◷ "}</span>
           <span style={{ fg: T.textDim }}>{"[ ] change day · "}</span>
@@ -376,6 +428,7 @@ export function TimelineView(props: TimelineViewProps) {
                 rowIndex={i()}
                 cursorEntry={isActive() ? cursorEntry() : undefined}
                 armedEntry={armedEntry()}
+                selectedCalKey={selectedCalKey()}
                 innerWidth={props.width ? props.width - 4 : undefined}
                 onBlockClick={onBlockClick}
                 onEmptyRowClick={onEmptyRowClick}
@@ -423,6 +476,8 @@ interface TimelineRowProps {
   cursorEntry: TimelineEntry | undefined;
   /** When set, the armed entry — used to tint its rows warm. */
   armedEntry: TimelineEntry | undefined;
+  /** `${calendarId}:${eventId}` of the selected calendar event, if any. */
+  selectedCalKey: string | undefined;
   /** Panel content width (border+padding already removed). Undefined = fullscreen. */
   innerWidth?: number;
   onBlockClick: (entry: TimelineEntry, event: MouseEventLike) => void;
@@ -455,6 +510,13 @@ function TimelineRow(props: TimelineRowProps) {
   const rightIsArmed = () =>
     !!props.armedEntry && right().entry === props.armedEntry;
 
+  const isSelectedCal = (e: TimelineEntry | undefined) =>
+    !!props.selectedCalKey &&
+    e?.kind === "calendar" &&
+    `${e.calendarId}:${e.eventId}` === props.selectedCalKey;
+  const leftIsSelCal = () => isSelectedCal(left().entry);
+  const rightIsSelCal = () => isSelectedCal(right().entry);
+
   const entryDone = (e: TimelineEntry | undefined) =>
     e?.kind === "task" && e.task.done;
   const leftIsDone = () => entryDone(left().entry);
@@ -490,6 +552,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -518,6 +581,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               leftIsCursor(),
               leftIsArmed(),
+              leftIsSelCal(),
               leftIsBlock(),
               leftIsDone(),
             ),
@@ -540,6 +604,7 @@ function TimelineRow(props: TimelineRowProps) {
             backgroundColor: laneBg(
               rightIsCursor(),
               rightIsArmed(),
+              rightIsSelCal(),
               rightIsBlock(),
               rightIsDone(),
             ),
@@ -726,10 +791,11 @@ function isBlockKind(k: RowMapEntry["kind"]): boolean {
 function laneBg(
   isCursor: boolean,
   isArmed: boolean,
+  isSelectedCal: boolean,
   isBlock: boolean,
   isDone: boolean,
 ): string | undefined {
-  if (isArmed) return T.warmDim;
+  if (isArmed || isSelectedCal) return T.warmDim;
   if (isCursor) return T.cardBgCursor;
   if (isBlock) return isDone ? T.cardBlockBgDone : T.cardBlockBg;
   return undefined;