taskai-cli 1.6.6__tar.gz → 1.7.0__tar.gz

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/DEVLOG.md

@@ -33,8 +33,97 @@ Fixed the long-standing `update_item` quirk: it now calls
 `update <id> --due_by MM-DD-YYYY` no longer throws. Extended
 `_parse_item_kwargs` in the same pass — maps `depends_on` (`"1,2,3"`) to
 `dependency_ids`, and guarded the `due_by` branch with `isinstance(v, str)`
-so it's idempotent for the recursive re-parse. Edit panel's Due by /
-Depends on fields round-trip now.
+so it's idempotent for the recursive re-parse. `update <id> --due_by` /
+`--depends_on` round-trip now.
+
+Then a long edit-panel pass (DEVPLAN Phase 4). Two bugs first:
+
+- Completed checkbox wouldn't uncheck. `_parse_item_kwargs`'s `completed`
+  case was `bool(v)`, and `bool("false")` is `True` — a regression from
+  routing `update` through `_parse_item_kwargs` above (pydantic used to
+  coerce the `"false"` string fine downstream). Now parses the string; real
+  bools (`done`/`undone`, the recursive re-parse) pass straight through.
+- Every debounced field POST was unfocusing the field mid-type.
+  `renderEditForm` did `innerHTML = ""` and rebuilt the whole form on every
+  `applyTree` — including the one after its own debounced update. Now tracks
+  `renderedItemId`; a same-item refresh does an in-place `refreshFieldValues`
+  that skips whatever field is `document.activeElement`. Value logic pulled
+  into a shared `fieldDisplayValue`.
+
+Description editor: moved `description` to the bottom of `FIELD_DEFS` and
+made its `textarea` flex to fill the space the fixed fields + comment feed
+leave (`min-height: 96px` floor). Density pass on the form too — gaps and
+paddings pulled in (16→10 / 6→3 / 8·10→5·8), radius 8→6.
+
+Comments (Phase 4, "Show comments"):
+
+- `browser.py`: `_full_tree()` attaches a resolved `comments` array to each
+  item dump (`_resolve_comments`, skips a dangling id). Not a `TodoItem`
+  field — rides the same `/api/tree` read.
+- `editpanel.js`: `buildCommentsSection` — flat feed (no cards), each row is
+  date on the left + comment right-aligned and wrapping, oldest→newest,
+  below the description box. Add box is a 2-row `<textarea>` (fixed 52px,
+  `resize: none`): Enter sends `comment <id> "<text>"` through
+  `/api/command`, Shift+Enter is a newline. List is a fixed `height` (200px,
+  a `:root` var) with a scrollbar on overflow; opens pinned to the newest
+  and sticks there on add, but keeps your place if you've scrolled up
+  (`stickToBottom` check + `requestAnimationFrame` so it also works on the
+  first render).
+
+Panel layout:
+
+- Labels moved inline — `.edit-field` is a row now, fixed 76px label column
+  on the left, control fills the rest; each fixed field is one line.
+  `description` / `.edit-comments` opt back out to stacked.
+- Panel width 320 → 448 (`EDIT_PANEL_EXPANDED_WIDTH` + `.edit-panel.expanded`).
+- Panel/console clash: both are `position: fixed` and overlapped bottom-right.
+  Console heights are `:root` vars now; `.edit-panel.expanded` height is
+  `calc(100vh - <console height>)` toggled by
+  `body:has(.console-panel.expanded)`, so it stops exactly at the console's
+  top edge and animates with it. The height lost when the console opens is
+  split evenly — half off description, half off the comment list
+  (`body:has(.console-panel.expanded) .comment-list` shrinks ~200→82px).
+
+Not done: comment count on the canvas node (still "consider" in the plan).
+
+Keyboard shortcuts + left-hand shortcuts panel (Phase 4, last bullet). New
+`shortcuts.js` — one `SHORTCUTS` registry feeds both a global `keydown`
+handler and the rows of `#shortcut-panel`, a left-side mirror of the edit
+panel (44px chevron / 300px white panel, same `:root` var + `:has()`
+console-clash handling, same inline-label rows).
+
+Alex flagged two risks up front; the design answers each with one mechanism:
+
+- Don't wreck typing. The handler returns early with no `preventDefault`
+  whenever `document.activeElement` is an input/textarea/select/CE — so
+  arrows and letters behave normally while editing. The only `whileTyping`
+  entries are backtick (and only when the console input itself has focus, so
+  it can close it) and `Esc`.
+- Don't shadow OS/browser keys. Only modifier-free keys and `Shift+<key>`
+  are bound — nothing with Ctrl/Cmd/Alt or F-keys. So browser zoom stays on
+  `Cmd/Ctrl` `+/-/0` and we use bare `+`/`-`/`0`; tab/window/menu combos are
+  all untouched.
+
+Bindings: `` ` `` terminal (focuses cmdline; also closes from inside), `?`
+shortcuts panel, `e` edit panel, `Esc` (leave field / deselect / show-all,
+context-dependent), arrows navigate, `Shift`+arrows pan, `+`/`-` zoom, `0`
+fit, `a` add child + open edit panel with the name field focused+selected,
+`d` toggle done/undone, `Delete` delete (with `confirm()`). Client-only
+shortcuts leave no console trace; `a`/`d`/`Delete` go through `/api/command`
+and print only their `output` line, no `> echo`. A shortcut never moves
+focus except terminal-open and add-node.
+
+Supporting refactors:
+
+- `canvas.js`: right-panel width plumbing generalised to a `side` param —
+  `setPanelWidth(side, …)` / `setPanelWidthInstant(side, …)`,
+  `panelWidthAnimId {left,right}`, and `applyCanvasSize` subtracts both
+  reservations + `margin-left`s the canvas past the left panel.
+  `setRightPanelWidth[Instant]` kept as wrappers so `editpanel.js` didn't
+  change.
+- `console.js`: pulled out `toggleConsole(force)` (focus on open, blur on
+  close so the shortcut layer revives), `showAll()`, and `postCommand()`,
+  all reused by `shortcuts.js`.
 
 ---
 

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/DEVPLAN.md

@@ -110,8 +110,14 @@ unless you're told to fix them):**
   not just `update` — and its `due_by` branch is guarded with
   `isinstance(v, str)` so the helper is idempotent (safe for the
   already-parsed kwargs `update_item`'s `recursive=True` branch passes back
-  down). Edit panel's **Due by** and **Depends on** fields now round-trip
-  end to end.
+  down). The edit panel's **Due by** field and `--depends_on` from the
+  console/CLI now round-trip end to end (there's no "Depends on" field in
+  the panel any more). Follow-up the same session: the `completed` branch was
+  `bool(v)`, and `bool("false")` is `True` — so once `update` started going
+  through `_parse_item_kwargs`, unchecking the edit panel's Completed box
+  (which POSTs `--completed "false"`) always re-checked it. Now parses the
+  string (`"true"/"1"/"yes"`), with real bools passing straight through for
+  the `done`/`undone` dispatch and the recursive re-parse.
 - **Sync is one-directional: CLI → browser only, not the reverse.**
   `GET /api/tree` (`browser.py`) reloads from disk (`db.flush()`) on every
   call, and `canvas.js` refetches on window focus, so browser-side views
@@ -330,6 +336,10 @@ add new visual knobs there, not inline in `draw()`.
       trips `<input type="date">`'s `YYYY-MM-DD` to/from the CLI's
       `MM-DD-YYYY`; `dependency_ids` round-trips to/from the CLI's
       comma-separated `depends_on` id list.
+      (Later: the `dependency_ids` / "Depends on" field was dropped from
+      `FIELD_DEFS` — there's no CLI `depend` command creating that data
+      anyway, see 1.4 / TRIAGE — and the field order changed so
+      `description` sits last, above the Phase 4 comment feed.)
 - [x] **No Save button** — deliberate deviation from the original plan.
       Every field change posts straight to `/api/command` as
       `update <id> --<field> <value>`. Checkbox sends immediately on toggle;
@@ -341,9 +351,10 @@ add new visual knobs there, not inline in `draw()`.
 
 While wiring this up, confirmed against a throwaway test item (created and
 deleted, not real data): `name`/`description`/`priority`/`completed` all
-update correctly end to end. `due_by` and `depends_on` originally hit the
-`update_item`/`_parse_item_kwargs` bug documented above — **now fixed** (see
-that entry), so all seven fields round-trip.
+update correctly end to end. `due_by` (and `--depends_on` from the console
+/ CLI) originally hit the `update_item`/`_parse_item_kwargs` bug documented
+above — **now fixed** (see that entry), so every field the panel exposes
+round-trips.
 
 ### 1.6 — Console
 
@@ -620,24 +631,90 @@ Builds on Phase 1's canvas / edit panel / console. Still plain HTML/CSS/JS, no
 framework, everything routed through the existing `/api/tree` + `/api/command`
 endpoints.
 
-- [ ] **Show comments.** Items carry `comment_ids` but the browser never
-      surfaces them. Render an item's comments in the edit panel — read-only
-      list at minimum; adding one posts `comment <id> <text>` through
-      `/api/command` like every other field. Consider a comment-count
-      affordance on the canvas node itself.
-- [ ] **Much larger description editor.** The `description` field in the edit
-      panel is a small single-line-ish input today. Make it a real multi-line
-      textarea that dominates the panel (large fixed height or auto-grow), so
-      the panel is usable for actual note-taking — likely widen the panel
-      itself while a node is selected.
-- [ ] **Keyboard shortcuts + a shortcuts panel.** Add real key bindings
-      (toggle console, toggle edit panel, complete / delete the selected
-      node, deselect, focus a search box, zoom/pan, …) and a **left-hand
-      panel listing them**, mirroring the right-hand edit panel and
-      collapsible the same way. Follow the existing `STYLE` object +
-      collapsible-panel machinery (`setRightPanelWidth`); this adds a left
-      equivalent. Supersedes the single console-toggle shortcut noted in
-      Phase 3's UX pass.
+- [x] **Show comments.** Backend: `_full_tree()` (`browser.py`) attaches a
+      resolved `comments` array to each item dump via `_resolve_comments`
+      (skips a dangling comment id rather than 500-ing the tree) — not a
+      `TodoItem` field, it just rides along on the same `/api/tree` read.
+      Frontend (`editpanel.js`): `buildCommentsSection` renders a flat,
+      read-only feed below the description box — no cards, each row is the
+      date (left, muted) and the comment text (right-aligned, wraps under
+      itself), oldest→newest. The add box is a 2-row `<textarea>` (fixed
+      52px, `resize: none`); **Enter** sends `comment <id> "<text>"` through
+      `/api/command` like every other field, **Shift+Enter** is a newline.
+      The list is a fixed `height` (200px, a `:root` var) with a scrollbar
+      on overflow; it opens pinned to the newest comment and stays there on
+      add, but preserves scroll position if you've scrolled up into the
+      history (`stickToBottom` check + `requestAnimationFrame` for the first
+      render). Comment count on the canvas node itself is **not** done —
+      still just "consider".
+- [x] **Much larger description editor.** `description` moved to the *bottom*
+      of the field list (`FIELD_DEFS` in `editpanel.js`), flagged
+      `grow: true` → an `.edit-field-grow` class whose `textarea` flexes to
+      fill the vertical space the fixed fields + comment feed leave
+      (`min-height: 96px` floor, `resize: vertical` kept). It was always a
+      `<textarea>` — just no longer a 60px slit. Also this pass, on the same
+      panel:
+      - **Inline labels.** `.edit-field` went from stacked to a row layout —
+        a fixed 76px label column on the left, control fills the rest — so
+        each fixed field is one line instead of two. Description and the
+        comment feed opt back out to stacked (`.edit-field-grow`,
+        `.edit-comments`).
+      - **Wider panel.** `EDIT_PANEL_EXPANDED_WIDTH` 320 → 448 (JS constant
+        + `.edit-panel.expanded` in `style.css`).
+      - **No clash with the console.** Both panels are `position: fixed` and
+        were overlapping in the bottom-right. Console heights are now `:root`
+        vars (`--console-h-collapsed/expanded`); `.edit-panel.expanded`
+        height is `calc(100vh - <console height>)`, switched via
+        `body:has(.console-panel.expanded) …`, so the edit panel stops
+        exactly at the console's top edge in both states and animates with
+        it. The height the edit panel loses when the console opens is split
+        evenly — half off the description box, half off the comment list
+        (`body:has(.console-panel.expanded) .comment-list` shrinks by half
+        the delta, ~200→82px).
+      - Panel-widen-*further*-on-select was considered and skipped; revisit
+        if 448px still feels tight for note-taking.
+      Two edit-panel bugs fixed in passing: the Completed checkbox not
+      un-checking (see the `_parse_item_kwargs` `completed` note under
+      "Known code quirks"), and every debounced field POST tearing down and
+      unfocusing the field being typed in — `renderEditForm` now tracks
+      `renderedItemId` and does an in-place `refreshFieldValues` for a
+      same-item refresh, skipping whatever field is `document.activeElement`
+      (value logic shared through a new `fieldDisplayValue`).
+- [x] **Keyboard shortcuts + a shortcuts panel.** New `shortcuts.js`: one
+      `SHORTCUTS` registry drives both a global `keydown` handler and the
+      rows of a left-hand reference panel (`#shortcut-panel` in
+      `index.html`, `.shortcut-panel` in `style.css`) — a mirror of the
+      edit panel: 44px chevron collapsed, 300px white panel expanded, same
+      `:root` var / `body:has(.console-panel.expanded)` height-clash
+      handling, same inline-label row shape.
+      **Two rules keep it from fighting the browser or the text fields**
+      (see the DEVLOG discussion): (1) the handler bails with no
+      `preventDefault` whenever a field is focused — so arrows/letters type
+      normally while editing — except entries flagged `whileTyping` (just
+      backtick, and only when the console input itself is focused, so it can
+      close it; plus `Esc`); (2) only modifier-free keys and `Shift+<key>`
+      are ever bound — nothing with Ctrl/Cmd/Alt or a function key — so
+      browser zoom (`Cmd/Ctrl` `+/-/0`), tab/window combos, the menu bar,
+      etc. are never shadowed. Bindings: `` ` `` terminal (focuses the
+      command line; also closes from inside), `?` this panel, `e` edit
+      panel, `Esc` (leave field / deselect / show-all, context-dependent),
+      arrows navigate the tree, `Shift`+arrows pan, `+`/`-` zoom, `0`
+      fit/show-all, `a` add a child + open the edit panel with the name
+      field focused, `d` toggle done/undone, `Delete` delete (with a
+      `confirm()`). Client-only shortcuts (zoom/pan/nav/show-all) leave no
+      console trace; the mutating ones (`a`/`d`/`Delete`) run through the
+      same `/api/command` path and surface only their `output` line — no
+      `> echo`. A shortcut never moves focus except the two that should
+      (terminal open, add-node).
+      **`canvas.js` change:** the right-panel width plumbing was
+      generalised to a `side` param — `setPanelWidth(side, …)` /
+      `setPanelWidthInstant(side, …)`, with `panelWidthAnimId {left,right}`
+      and `applyCanvasSize` now subtracting both reservations and shoving
+      the canvas over with `margin-left`. `setRightPanelWidth[Instant]`
+      kept as thin wrappers so `editpanel.js` was untouched.
+      **`console.js` change:** extracted `toggleConsole(force)` (focus on
+      open / blur on close), `showAll()`, and a `postCommand(input)` helper,
+      all reused by `shortcuts.js`.
 
 ---
 

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: taskai-cli
-Version: 1.6.6
+Version: 1.7.0
 Author-email: Alex Paskal <alexcpaskal@gmail.com>
 Requires-Python: >=3.12
 Requires-Dist: fastapi>=0.141.1

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "taskai-cli"
-version = "1.6.6"
+version = "1.7.0"
 description = ""
 authors = [{name = "Alex Paskal", email = "alexcpaskal@gmail.com"}]
 readme = "README.md"

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/taskai/static/canvas.js

@@ -221,16 +221,19 @@ function worldToScreen(wx, wy) {
 	return { x: wx * view.scale + view.offsetX, y: wy * view.scale + view.offsetY };
 }
 
-// width (px) reserved on the right for the edit panel — the canvas fills the rest
+// width (px) reserved on each side — right for the edit panel, left for the
+// shortcuts panel; the canvas fills what's between them
 let rightPanelWidth = 0;
-let rightPanelWidthAnimId = null;
+let leftPanelWidth = 0;
+const panelWidthAnimId = { left: null, right: null };
 
-// keep in sync with the CSS width transition duration on .edit-panel in style.css
+// keep in sync with the CSS width transition on .edit-panel / .shortcut-panel
 const PANEL_TRANSITION_MS = 200;
 
 function applyCanvasSize() {
-	canvas.width = window.innerWidth - rightPanelWidth;
+	canvas.width = window.innerWidth - rightPanelWidth - leftPanelWidth;
 	canvas.height = window.innerHeight;
+	canvas.style.marginLeft = leftPanelWidth + "px"; // shove the canvas past the left panel
 }
 
 function resizeCanvas() {
@@ -253,33 +256,39 @@ function _rescaleForWidthChange(oldWidth, startScale, centerWorld) {
 	view.offsetY = canvas.height / 2 - centerWorld.y * view.scale;
 }
 
-// jumps straight to `width` with no animation — for initial setup, where
-// there's nothing on screen yet to transition from
-function setRightPanelWidthInstant(width) {
-	if (rightPanelWidthAnimId !== null) {
-		cancelAnimationFrame(rightPanelWidthAnimId);
-		rightPanelWidthAnimId = null;
+function _panelWidth(side) { return side === "left" ? leftPanelWidth : rightPanelWidth; }
+function _setPanelWidthVar(side, w) {
+	if (side === "left") leftPanelWidth = w;
+	else rightPanelWidth = w;
+}
+
+// jumps a side's reservation straight to `width` with no animation — for
+// initial setup, where there's nothing on screen yet to transition from
+function setPanelWidthInstant(side, width) {
+	if (panelWidthAnimId[side] !== null) {
+		cancelAnimationFrame(panelWidthAnimId[side]);
+		panelWidthAnimId[side] = null;
 	}
 
 	const oldWidth = canvas.width;
 	const startScale = view.scale;
 	const centerWorld = screenToWorld(canvas.width / 2, canvas.height / 2);
 
-	rightPanelWidth = width;
+	_setPanelWidthVar(side, width);
 	applyCanvasSize();
 	_rescaleForWidthChange(oldWidth, startScale, centerWorld);
 
 	draw();
 }
 
-// eases the right-panel reservation (and the canvas size/zoom that follow
-// it) to `targetWidth` over `duration`ms, matching the panel's own CSS
-// transition so the graph resizes in step with it rather than snapping.
-function setRightPanelWidth(targetWidth, duration = PANEL_TRANSITION_MS) {
-	if (rightPanelWidthAnimId !== null) cancelAnimationFrame(rightPanelWidthAnimId);
-	if (rightPanelWidth === targetWidth) return;
+// eases a side's reservation (and the canvas size/zoom that follow it) to
+// `targetWidth` over `duration`ms, matching the panel's own CSS transition
+// so the graph resizes in step with it rather than snapping.
+function setPanelWidth(side, targetWidth, duration = PANEL_TRANSITION_MS) {
+	if (panelWidthAnimId[side] !== null) cancelAnimationFrame(panelWidthAnimId[side]);
+	if (_panelWidth(side) === targetWidth) return;
 
-	const startWidth = rightPanelWidth;
+	const startWidth = _panelWidth(side);
 	const startScale = view.scale;
 	const oldWidth = canvas.width;
 	const centerWorld = screenToWorld(canvas.width / 2, canvas.height / 2);
@@ -289,18 +298,22 @@ function setRightPanelWidth(targetWidth, duration = PANEL_TRANSITION_MS) {
 		const t = Math.min(1, (now - startTime) / duration);
 		const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
 
-		rightPanelWidth = startWidth + (targetWidth - startWidth) * eased;
+		_setPanelWidthVar(side, startWidth + (targetWidth - startWidth) * eased);
 		applyCanvasSize();
 		_rescaleForWidthChange(oldWidth, startScale, centerWorld);
 
 		draw();
 
-		rightPanelWidthAnimId = t < 1 ? requestAnimationFrame(step) : null;
+		panelWidthAnimId[side] = t < 1 ? requestAnimationFrame(step) : null;
 	}
 
-	rightPanelWidthAnimId = requestAnimationFrame(step);
+	panelWidthAnimId[side] = requestAnimationFrame(step);
 }
 
+// back-compat wrappers — editpanel.js drives the right side through these
+function setRightPanelWidthInstant(width) { setPanelWidthInstant("right", width); }
+function setRightPanelWidth(width, duration) { setPanelWidth("right", width, duration); }
+
 // true if the world point (x, y) falls inside node's square
 function hitTest(node, x, y) {
 	const half = node.size / 2;

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/taskai/static/console.js

@@ -7,10 +7,19 @@ const consoleToggle = document.getElementById("console-toggle");
 const consoleInput = document.getElementById("console-input");
 const consoleScrollback = document.getElementById("console-scrollback");
 
-consoleToggle.addEventListener("click", () => {
-	const expanded = consolePanel.classList.toggle("expanded");
+// `force` omitted = toggle; true/false = force that state. Opening focuses
+// the command line so you can type straight away; closing blurs it so the
+// keyboard-shortcut layer (which ignores keys while a field is focused)
+// comes back to life.
+function toggleConsole(force) {
+	const expanded = typeof force === "boolean" ? force : !consolePanel.classList.contains("expanded");
+	consolePanel.classList.toggle("expanded", expanded);
 	consoleToggle.setAttribute("aria-expanded", String(expanded));
-});
+	if (expanded) consoleInput.focus();
+	else consoleInput.blur();
+}
+
+consoleToggle.addEventListener("click", () => toggleConsole());
 
 function appendLine(text) {
 	const line = document.createElement("div");
@@ -50,6 +59,34 @@ function resolveDotRefs(command) {
 	return command.replace(/(^|\s)\.(?=\s|$)/g, `$1${selectedNode.id}`);
 }
 
+// POST a raw command string to the shared endpoint; returns the parsed
+// { output, tree, focus } (or throws). Callers decide what to echo.
+async function postCommand(input) {
+	const res = await fetch("/api/command", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ input }),
+	});
+	return res.json();
+}
+
+// select the synthetic root and ease the view out to fit the whole forest —
+// the `show` / `show all` console command and the keyboard shortcut share this
+async function showAll() {
+	let tree;
+	try {
+		const res = await fetch("/api/tree");
+		tree = await res.json();
+	} catch (err) {
+		appendLine("Error: " + err.message);
+		return;
+	}
+	applyTree(tree);
+	selectedNode = rootNode;
+	if (typeof onNodeSelected === "function") onNodeSelected(null);
+	fitAll();
+}
+
 const commandHistory = [];
 let historyIndex = commandHistory.length; // length = not currently browsing history
 
@@ -90,18 +127,7 @@ consoleInput.addEventListener("keydown", async (e) => {
 
 	// `show all` / bare `show` — select the synthetic root and fit the forest
 	if (/^show(\s+all)?$/i.test(command)) {
-		let tree;
-		try {
-			const res = await fetch("/api/tree");
-			tree = await res.json();
-		} catch (err) {
-			appendLine("Error: " + err.message);
-			return;
-		}
-		applyTree(tree);
-		selectedNode = rootNode;
-		if (typeof onNodeSelected === "function") onNodeSelected(null);
-		fitAll();
+		await showAll();
 		return;
 	}
 

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/taskai/static/index.html

@@ -8,6 +8,16 @@
 <body>
 	<canvas id="myCanvas"></canvas>
 
+	<div id="shortcut-panel" class="shortcut-panel">
+		<button id="shortcut-toggle" class="shortcut-toggle" aria-label="Toggle shortcuts panel" aria-expanded="false">
+			<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M6 1L13 8L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+				<path d="M0 1L7 8L0 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+			</svg>
+		</button>
+		<div class="shortcut-body"></div>
+	</div>
+
 	<div id="edit-panel" class="edit-panel">
 		<button id="edit-toggle" class="edit-toggle" aria-label="Toggle edit panel" aria-expanded="false">
 			<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -34,5 +44,6 @@
 	<script src="/static/canvas.js"></script>
 	<script src="/static/editpanel.js"></script>
 	<script src="/static/console.js"></script>
+	<script src="/static/shortcuts.js"></script>
 </body>
 </html>

taskai_cli-1.7.0/taskai/static/shortcuts.js

@@ -0,0 +1,266 @@
+// Global keyboard shortcuts + the left-hand reference panel that lists them.
+// One registry (SHORTCUTS) drives both the key handler and the panel rows.
+//
+// Design rules (see the discussion in DEVLOG):
+//   1. Shortcuts are inert while a text field is focused — the handler bails
+//      out with no preventDefault, so arrows/letters behave normally when
+//      typing. The only exceptions are marked `whileTyping`.
+//   2. Only modifier-free keys and Shift+<key> are bound. Nothing with
+//      Ctrl/Cmd/Alt or a function key, so no OS/browser shortcut is shadowed
+//      (browser zoom stays on Cmd/Ctrl +/-/0; we use bare +/-/0).
+//   3. A shortcut never moves focus, except the two that are supposed to:
+//      opening the terminal, and add-node (which focuses the name field).
+
+const shortcutPanel = document.getElementById("shortcut-panel");
+const shortcutToggle = document.getElementById("shortcut-toggle");
+const shortcutBody = document.querySelector("#shortcut-panel .shortcut-body");
+
+const SHORTCUT_PANEL_COLLAPSED_WIDTH = 44;
+const SHORTCUT_PANEL_EXPANDED_WIDTH = 300;
+
+// reserve the collapsed strip's width in the canvas from the start (instant)
+setPanelWidthInstant("left", SHORTCUT_PANEL_COLLAPSED_WIDTH);
+
+function toggleShortcutPanel(force) {
+	const expanded = typeof force === "boolean" ? force : !shortcutPanel.classList.contains("expanded");
+	shortcutPanel.classList.toggle("expanded", expanded);
+	shortcutToggle.setAttribute("aria-expanded", String(expanded));
+	setPanelWidth("left", expanded ? SHORTCUT_PANEL_EXPANDED_WIDTH : SHORTCUT_PANEL_COLLAPSED_WIDTH);
+}
+
+shortcutToggle.addEventListener("click", () => toggleShortcutPanel());
+
+function toggleEditPanel() {
+	if (editPanel.classList.contains("expanded")) closeEditPanel();
+	else openEditPanel();
+}
+
+// --- action helpers --------------------------------------------------------
+
+// the selected node, or null when the selection is the synthetic root
+// (i.e. "nothing / the whole tree")
+function selectedRealNode() {
+	return selectedNode && selectedNode !== rootNode ? selectedNode : null;
+}
+
+// run a DB-mutating command through the shared endpoint. No `> echo` (that's
+// for things the user typed), but we do surface `output` since the command
+// changed the database — matching "not visible unless it modifies the DB".
+async function runMutation(input) {
+	let data;
+	try {
+		data = await postCommand(input);
+	} catch (err) {
+		appendLine("Error: " + err.message);
+		return null;
+	}
+	if (data.output) appendLine(data.output.trim());
+	applyTree(data.tree);
+	return data;
+}
+
+function toggleDoneSelected() {
+	const node = selectedRealNode();
+	if (!node) return;
+	const item = itemForNode(node);
+	runMutation(`${item && item.completed ? "undone" : "done"} ${node.id}`);
+}
+
+function deleteSelected() {
+	const node = selectedRealNode();
+	if (!node) return;
+	const item = itemForNode(node);
+	const label = item ? item.name : node.id;
+	if (!window.confirm(`Delete "${label}" and everything under it?`)) return;
+	runMutation(`delete ${node.id}`);
+}
+
+// add a child of the selected node (or a new root when nothing is selected),
+// then select it, open the edit panel, and put the cursor in the name field
+async function addNodeAndEdit() {
+	const parent = selectedRealNode();
+	const input = parent ? `add ${parent.id} "New task"` : `create "New task"`;
+
+	const before = new Set(Object.keys(latestItemsById));
+	const data = await runMutation(input);
+	if (!data) return;
+
+	const newId = Object.keys(latestItemsById).find(id => !before.has(id));
+	const node = newId && nodes.find(n => n.id === String(newId));
+	if (!node) return;
+
+	selectedNode = node;
+	if (typeof onNodeSelected === "function") onNodeSelected(itemForNode(node));
+	focusOnNode(node);
+	if (typeof openEditPanel === "function") openEditPanel();
+
+	requestAnimationFrame(() => {
+		const nameInput = document.querySelector('#edit-panel [data-field-key="name"]');
+		if (nameInput) {
+			nameInput.focus();
+			nameInput.select();
+		}
+	});
+}
+
+function handleEscape() {
+	const el = document.activeElement;
+	if (el === consoleInput) {
+		toggleConsole(false);
+		return;
+	}
+	if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable)) {
+		el.blur();
+		return;
+	}
+	showAll(); // deselects (selectedNode = rootNode) and fits the whole forest
+}
+
+// --- registry ------------------------------------------------------------
+
+const ARROW_DIR = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" };
+// screen-space pan vectors, matching console.js's "pan <dir>" commands
+const PAN_VEC = { ArrowUp: [0, 1], ArrowDown: [0, -1], ArrowLeft: [1, 0], ArrowRight: [-1, 0] };
+
+const SHORTCUTS = [
+	{ section: "Panels" },
+	{
+		combos: [{ key: "`" }], glyphs: ["`"], desc: "Toggle terminal",
+		whileTyping: (el) => el === consoleInput, // also closes it from inside
+		run: () => toggleConsole(),
+	},
+	{
+		combos: [{ key: "?" }], glyphs: ["?"], desc: "Toggle this panel",
+		run: () => toggleShortcutPanel(),
+	},
+	{
+		combos: [{ key: "e" }], glyphs: ["e"], desc: "Toggle edit panel",
+		run: () => toggleEditPanel(),
+	},
+	{
+		combos: [{ key: "Escape" }], glyphs: ["Esc"], desc: "Leave field · deselect · show all",
+		whileTyping: true, keepDefault: true,
+		run: handleEscape,
+	},
+
+	{ section: "Move around" },
+	{
+		combos: [{ key: "ArrowUp" }, { key: "ArrowDown" }, { key: "ArrowLeft" }, { key: "ArrowRight" }],
+		glyphs: ["↑", "↓", "←", "→"], desc: "Navigate the tree",
+		run: (e) => navigate(ARROW_DIR[e.key]),
+	},
+	{
+		combos: [
+			{ key: "ArrowUp", shift: true }, { key: "ArrowDown", shift: true },
+			{ key: "ArrowLeft", shift: true }, { key: "ArrowRight", shift: true },
+		],
+		glyphs: ["⇧↑", "⇧↓", "⇧←", "⇧→"], desc: "Pan the view",
+		run: (e) => { const [dx, dy] = PAN_VEC[e.key]; canvasPan(dx * PAN_AMOUNT, dy * PAN_AMOUNT); },
+	},
+	{
+		combos: [{ key: "+" }, { key: "=" }], glyphs: ["+"], desc: "Zoom in",
+		run: () => canvasZoom(ZOOM_FACTOR),
+	},
+	{
+		combos: [{ key: "-" }], glyphs: ["–"], desc: "Zoom out",
+		run: () => canvasZoom(1 / ZOOM_FACTOR),
+	},
+	{
+		combos: [{ key: "0" }], glyphs: ["0"], desc: "Fit / show all",
+		run: () => showAll(),
+	},
+
+	{ section: "Selected node" },
+	{
+		combos: [{ key: "a" }], glyphs: ["a"], desc: "Add a child, edit its name",
+		run: () => addNodeAndEdit(),
+	},
+	{
+		combos: [{ key: "d" }], glyphs: ["d"], desc: "Toggle done",
+		run: () => toggleDoneSelected(),
+	},
+	{
+		combos: [{ key: "Delete" }], glyphs: ["Del"], desc: "Delete (asks first)",
+		run: () => deleteSelected(),
+	},
+];
+
+// --- key handling --------------------------------------------------------
+
+function isTypingContext() {
+	const el = document.activeElement;
+	if (!el) return false;
+	return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.isContentEditable;
+}
+
+// a named key (ArrowUp, Delete, Escape) can be gated on Shift; a typed
+// character (a, +, ?, `) already carries Shift in e.key, so don't re-check it
+function comboMatches(combo, e) {
+	if (e.ctrlKey || e.metaKey || e.altKey) return false;
+	if (combo.key.length > 1 && (combo.shift === true) !== e.shiftKey) return false;
+	return combo.key === e.key;
+}
+
+window.addEventListener("keydown", (e) => {
+	if (e.ctrlKey || e.metaKey || e.altKey) return; // leave browser/OS combos alone
+
+	const typing = isTypingContext();
+
+	for (const sc of SHORTCUTS) {
+		if (!sc.combos) continue;
+
+		const wt = typeof sc.whileTyping === "function"
+			? sc.whileTyping(document.activeElement)
+			: !!sc.whileTyping;
+		if (typing && !wt) continue;
+
+		if (!sc.combos.some(c => comboMatches(c, e))) continue;
+
+		if (!sc.keepDefault) e.preventDefault();
+		sc.run(e);
+		return;
+	}
+});
+
+// --- panel rendering ---------------------------------------------------
+
+function renderShortcutList() {
+	shortcutBody.innerHTML = "";
+
+	const list = document.createElement("div");
+	list.className = "shortcut-list";
+
+	SHORTCUTS.forEach(sc => {
+		if (sc.section) {
+			const h = document.createElement("div");
+			h.className = "shortcut-section";
+			h.textContent = sc.section;
+			list.appendChild(h);
+			return;
+		}
+
+		const row = document.createElement("div");
+		row.className = "shortcut-row";
+
+		const keys = document.createElement("div");
+		keys.className = "shortcut-keys";
+		sc.glyphs.forEach(g => {
+			const k = document.createElement("span");
+			k.className = "shortcut-key";
+			k.textContent = g;
+			keys.appendChild(k);
+		});
+		row.appendChild(keys);
+
+		const desc = document.createElement("div");
+		desc.className = "shortcut-desc";
+		desc.textContent = sc.desc;
+		row.appendChild(desc);
+
+		list.appendChild(row);
+	});
+
+	shortcutBody.appendChild(list);
+}
+
+renderShortcutList();

{taskai_cli-1.6.6 → taskai_cli-1.7.0}/taskai/static/style.css

@@ -343,3 +343,122 @@ body:has(.console-panel.expanded) .comment-list {
 .comment-add-input:focus {
 	border-color: #4772fa;
 }
+
+/* ── shortcuts panel ──────────────────────────────────────────────────────
+   left-side mirror of the edit panel: collapsed is a bare chevron button,
+   expanded is a white reference panel. Same collapse/clash rules. */
+.shortcut-panel {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	background: transparent;
+	border-right: none;
+	box-shadow: none;
+	width: 44px;
+	height: 44px;
+	overflow: hidden;
+	transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.shortcut-panel.expanded {
+	width: 300px;
+	height: calc(100vh - var(--console-h-collapsed));
+	background: #ffffff;
+	border-right: 1px solid #e2e4ea;
+	box-shadow: 2px 0 10px rgba(15, 23, 42, 0.06);
+}
+
+body:has(.console-panel.expanded) .shortcut-panel.expanded {
+	height: calc(100vh - var(--console-h-expanded));
+}
+
+.shortcut-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 44px;
+	height: 44px;
+	border: none;
+	background: transparent;
+	color: #9aa0ab;
+	cursor: pointer;
+	padding: 0;
+}
+
+.shortcut-toggle:hover {
+	color: #23252b;
+	background: rgba(15, 23, 42, 0.05);
+	border-radius: 10px;
+}
+
+.shortcut-toggle svg {
+	transition: transform 0.2s ease;
+}
+
+.shortcut-panel.expanded .shortcut-toggle svg {
+	transform: rotate(180deg);
+}
+
+.shortcut-body {
+	flex: 1;
+	overflow: auto;
+}
+
+.shortcut-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 12px 14px;
+}
+
+.shortcut-section {
+	font-weight: 600;
+	font-size: 11px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: #9aa0ab;
+	margin-top: 8px;
+}
+
+.shortcut-section:first-child {
+	margin-top: 0;
+}
+
+/* same inline-label shape as .edit-field: keys in a fixed left column */
+.shortcut-row {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	gap: 10px;
+	font-size: 12px;
+	color: #6b7280;
+}
+
+.shortcut-keys {
+	flex: none;
+	width: 92px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
+.shortcut-key {
+	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+	font-size: 11px;
+	line-height: 1.4;
+	color: #23252b;
+	background: #f5f6f8;
+	border: 1px solid #e2e4ea;
+	border-radius: 5px;
+	padding: 0 5px;
+	white-space: nowrap;
+}
+
+.shortcut-desc {
+	flex: 1;
+	min-width: 0;
+}