Rough edges: mobile 100dvh, session-expiry in chat, sticky error toasts, journal date filter (#93 )

Part of #85. 100vh→100dvh on both full-height pages (editor + public), a 401 during chat now redirects to /login instead of mislabelling a dead session as "assistant broken", error toasts persist (capped at 4) with a close button, and the journal's built-but-unreachable date filter gets a UI. Gadfly round handled (public-page 100dvh, toast cap, shared date-input class). Larger deferred items (revision retention, agent toolbox gaps) noted for their own issues.
Address Gadfly findings on #85
2026-07-22 03:54:02 +00:00 · 2026-07-21 23:53:18 -04:00 · 2026-07-22 03:34:07 +00:00 · 2026-07-21 23:33:38 -04:00 · 2026-07-21 23:31:10 -04:00 · 2026-07-22 03:27:32 +00:00
9 changed files with 205 additions and 14 deletions
@@ -1,5 +1,12 @@
 import { useEffect, useRef, type ReactNode } from 'react'

+// Tabbable controls inside the dialog, in DOM order. type="hidden" inputs are
+// excluded — they'd match `input:not([disabled])` and, sitting at a boundary,
+// break the wrap math. Hoisted out of the handler so it isn't rebuilt per Tab.
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), ' +
+  'input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
 /**
 * A centered modal dialog over a dimmed backdrop. Closes on Escape or a backdrop
 * click, unless `busy` (a mutation is in flight) — then it stays put so the
@@ -27,12 +34,57 @@ export function Modal({
  busyRef.current = busy

  useEffect(() => {
-    cardRef.current?.focus()
+    const card = cardRef.current
+    // Remember who opened the dialog so focus can return there on close —
+    // otherwise it lands on <body> and a keyboard user loses their place.
+    const opener = document.activeElement as HTMLElement | null
+    card?.focus()
+
+    const focusable = () =>
+      Array.from(card?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? [])
+
    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape' && !busyRef.current) onCloseRef.current()
+      if (e.key === 'Escape' && !busyRef.current) {
+        onCloseRef.current()
+        return
+      }
+      if (e.key !== 'Tab') return
+      const items = focusable()
+      if (items.length === 0) {
+        e.preventDefault()
+        card?.focus()
+        return
+      }
+      const first = items[0]
+      const last = items[items.length - 1]
+      const active = document.activeElement
+      // If focus is NOT inside the dialog, pull it back in rather than let Tab
+      // escape. This is the robust case that covers focus having fallen to
+      // <body> — a control that was removed (ShareGardenModal's remove-share
+      // button) or disabled while busy — as well as any externally-stolen focus.
+      if (!card || !card.contains(active)) {
+        e.preventDefault()
+        ;(e.shiftKey ? last : first).focus()
+        return
+      }
+      if (e.shiftKey && (active === first || active === card)) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault()
+        first.focus()
+      }
    }
    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      // Restore focus to the opener only if it's still in the document — the
+      // delete/clear flows this trap targets often remove the element that
+      // opened the dialog (a garden card, a plop row). A disconnected node's
+      // focus() silently no-ops and leaves focus on <body>, so fall through to
+      // that case explicitly rather than pretend it worked.
+      if (opener && opener.isConnected) opener.focus()
+    }
  }, [])

  return (
@@ -17,9 +17,16 @@ interface ToastState {

 let nextId = 1

+// Error toasts no longer auto-dismiss (#85), so a burst of failures could grow
+// the stack without bound and push older ones off-screen. Cap it: keep the most
+// recent MAX_TOASTS and drop the oldest, so the newest — the one that just
+// happened — is always visible.
+const MAX_TOASTS = 4
+
 export const useToastStore = create<ToastState>((set) => ({
  toasts: [],
-  push: (message, tone = 'info') => set((s) => ({ toasts: [...s.toasts, { id: nextId++, message, tone }] })),
+  push: (message, tone = 'info') =>
+    set((s) => ({ toasts: [...s.toasts, { id: nextId++, message, tone }].slice(-MAX_TOASTS) })),
  dismiss: (id) => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
 }))

@@ -32,21 +39,34 @@ export const toast = {
 // Param is `item`, not `toast`, so it doesn't shadow the module's `toast` export.
 function ToastItem({ item }: { item: Toast }) {
  const dismiss = useToastStore((s) => s.dismiss)
+  const isError = item.tone === 'error'
  useEffect(() => {
+    // Error toasts are the primary report that a mutation failed, so they do NOT
+    // auto-dismiss — a user who looked away at second 4 would otherwise lose the
+    // only notice, with nothing to retrieve (#85). Info toasts still time out.
+    if (isError) return
    const t = setTimeout(() => dismiss(item.id), 4000)
    return () => clearTimeout(t)
-  }, [item.id, dismiss])
+  }, [item.id, dismiss, isError])
  return (
    <div
-      role={item.tone === 'error' ? 'alert' : 'status'}
+      role={isError ? 'alert' : 'status'}
      className={cn(
-        'pointer-events-auto rounded-md border px-3 py-2 text-sm shadow-md',
-        item.tone === 'error'
+        'pointer-events-auto flex items-start gap-2 rounded-md border px-3 py-2 text-sm shadow-md',
+        isError
          ? 'border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300'
          : 'border-border bg-surface text-fg',
      )}
    >
-      {item.message}
+      <span className="flex-1">{item.message}</span>
+      <button
+        type="button"
+        onClick={() => dismiss(item.id)}
+        aria-label="Dismiss"
+        className="-mr-1 shrink-0 rounded px-1 text-current opacity-60 outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40"
+      >
+        ✕
+      </button>
    </div>
  )
 }
@@ -235,7 +235,13 @@ export function GardenCanvas({
        className="h-full w-full select-none"
        style={{ touchAction: 'none' }}
        onPointerDown={onCanvasPointerDown}
+        // role="application" tells a screen reader this is an interactive canvas
+        // to operate, not a document to read linearly. The <title> names it, and
+        // objects inside are individually focusable buttons (see ObjectShape).
+        role="application"
+        aria-label={`${garden.name} — garden layout. Tab between objects; Enter selects; arrow keys nudge a selection.`}
      >
+        <title>{garden.name} garden layout</title>
        <g transform={`translate(${viewport.tx} ${viewport.ty}) scale(${viewport.scale})`}>
          {drawnGridCm != null && (
            <>
@@ -16,6 +16,11 @@ import {
 import type { EditorObject } from './types'
 import { objectDisplayName } from './kinds'

+// Shared styling for the small From/To date inputs, so the two stay in step and
+// don't drift from each other.
+const dateInputClass =
+  'rounded-md border border-border bg-surface px-1.5 py-1 text-fg outline-none focus-visible:ring-2 focus-visible:ring-accent/40'
+
 /**
 * The garden's journal: write an entry, read the season back.
 *
@@ -42,7 +47,15 @@ export function JournalPanel({
  scopeObjectId: number | null
  onScopeChange: (id: number | null) => void
 }) {
-  const filter = scopeObjectId != null ? { objectId: scopeObjectId } : {}
+  // Date-range narrowing (#85): the backend and JournalFilter already supported
+  // from/to; they just had no UI. Empty inputs don't filter.
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const filter = {
+    ...(scopeObjectId != null ? { objectId: scopeObjectId } : {}),
+    ...(from ? { from } : {}),
+    ...(to ? { to } : {}),
+  }
  const journal = useJournal(gardenId, filter)
  const entries = journal.data?.pages.flatMap((p) => p.entries) ?? []
  const scopedObject = objects.find((o) => o.id === scopeObjectId) ?? null
@@ -70,6 +83,41 @@ export function JournalPanel({
        )}
      </div>

+      <div className="flex items-center gap-2 text-xs text-muted">
+        <label className="flex items-center gap-1">
+          <span>From</span>
+          <input
+            type="date"
+            value={from}
+            max={to || undefined}
+            onChange={(e) => setFrom(e.target.value)}
+            className={dateInputClass}
+          />
+        </label>
+        <label className="flex items-center gap-1">
+          <span>To</span>
+          <input
+            type="date"
+            value={to}
+            min={from || undefined}
+            onChange={(e) => setTo(e.target.value)}
+            className={dateInputClass}
+          />
+        </label>
+        {(from || to) && (
+          <button
+            type="button"
+            onClick={() => {
+              setFrom('')
+              setTo('')
+            }}
+            className="rounded px-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
      {canEdit && (
        <Composer
          gardenId={gardenId}
@@ -1,5 +1,6 @@
-import { memo, type PointerEvent } from 'react'
+import { memo, type KeyboardEvent, type PointerEvent } from 'react'
 import { objectTransform } from './shared'
+import { kindDef, objectDisplayName } from './kinds'
 import type { EditorObject } from './types'

 const DEFAULT_FILL = '#8a8a8a'
@@ -57,11 +58,50 @@ export const ObjectShape = memo(function ObjectShape({
    onSelect(object.id)
  }

+  // Keyboard path into selection (#84): the arrow-key nudge handler already
+  // exists but only ever acted on a pointer selection, so it was unreachable
+  // without a mouse. Enter/Space on a focused object selects it, which is the
+  // step that was missing.
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      e.stopPropagation()
+      onSelect(object.id)
+    }
+  }
+
  const stroke = selected ? '#2f7a3e' : '#00000033'
  const strokeWidth = selected ? 2 : 1

+  // A concise accessible name: the object's label plus its kind's canonical
+  // label, e.g. "North Bed, In-ground" — reusing kindDef so it never diverges
+  // from what the UI shows (an ad-hoc kind.replace() gave "in ground"). The
+  // dimensions aren't included; they need the garden's unit context this
+  // component doesn't hold, so they're a follow-up.
+  const kindLabel = kindDef(object.kind)?.label ?? object.kind
+  const label = `${objectDisplayName(object)}, ${kindLabel}`
+
+  // Keyboard focus needs to be VISIBLE — that's the point of making the canvas
+  // keyboard-reachable. The `object-shape` class carries a :focus-visible rule
+  // (styles/index.css) that draws a dashed ring; :focus-visible means it shows
+  // for keyboard focus but NOT a mouse click, which is exactly what we want. CSS
+  // rather than React state because onFocus on an SVG <g> is unreliable and a
+  // presentation attribute is overridden by any CSS rule.
  return (
-    <g transform={objectTransform(object)} onPointerDown={handleDown} style={{ cursor: 'pointer' }}>
+    <g
+      className="object-shape"
+      transform={objectTransform(object)}
+      onPointerDown={handleDown}
+      onKeyDown={handleKey}
+      role="button"
+      tabIndex={0}
+      aria-label={label}
+      // aria-current, not aria-pressed: selecting an object isn't a toggle (a
+      // toggle is what aria-pressed means). aria-current marks it as the active
+      // item among the objects. Omitted, not "false", when unselected.
+      aria-current={selected || undefined}
+      style={{ cursor: 'pointer' }}
+    >
      {object.shape === 'circle' ? (
        <ellipse
          cx={0}
@@ -160,6 +160,15 @@ export async function streamChat(
    handlers.onError('Could not reach the server.')
    return
  }
+  if (res.status === 401) {
+    // Session expired mid-conversation (#85). Reporting this as "the assistant is
+    // unavailable" would send the user chasing a config problem that isn't there.
+    // Send them to sign in again, preserving where they were.
+    handlers.onError('Your session has expired — please sign in again.')
+    const back = encodeURIComponent(location.pathname + location.search)
+    window.location.assign(`/login?redirect=${back}`)
+    return
+  }
  if (!res.ok || !res.body) {
    // 503 is the assistant being turned off at runtime (#79) — the route exists,
    // there's just no model behind it. Distinct from a 404, which would mean the
@@ -398,8 +398,11 @@ export function GardenEditorPage() {
    })
  }

+  // 100dvh, not 100vh: on mobile Safari/Chrome 100vh is the *largest* viewport
+  // (URL bar hidden), so with the bar showing the editor overflowed and pushed
+  // the canvas bottom + Fit button under the browser chrome (#85).
  return (
-    <div className="flex h-[calc(100vh-8rem)] flex-col gap-3 md:flex-row">
+    <div className="flex h-[calc(100dvh-8rem)] flex-col gap-3 md:flex-row">
      <div className="shrink-0 md:w-40">
        <h1 className="mb-2 truncate text-lg font-semibold tracking-tight" title={garden.name}>
          {garden.name}
@@ -53,7 +53,7 @@ export function PublicGardenPage() {
  }

  return (
-    <div className="flex h-[calc(100vh-8rem)] flex-col gap-3">
+    <div className="flex h-[calc(100dvh-8rem)] flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <h1 className="truncate text-lg font-semibold tracking-tight" title={garden.name}>
          {garden.name}
@@ -28,6 +28,19 @@
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
+
+  /* Keyboard focus on a canvas object (#84). :focus-visible shows the ring for
+     keyboard focus but not a mouse click; the dashed accent ring distinguishes
+     "focused" from the solid ring that marks "selected". A CSS rule overrides
+     the shape's inline stroke presentation attributes. */
+  .object-shape {
+    outline: none;
+  }
+  .object-shape:focus-visible :is(rect, ellipse) {
+    stroke: var(--color-accent-strong);
+    stroke-width: 2;
+    stroke-dasharray: 5 4;
+  }
 }

 /* Dark theme: override the same tokens so utilities recolor automatically. */
Author	SHA1	Message	Date
steve	1e2b763566	Rough edges: mobile 100dvh, session-expiry in chat, sticky error toasts, journal date filter (#93 ) Build image / build-and-push (push) Successful in 11s Details Part of #85. 100vh→100dvh on both full-height pages (editor + public), a 401 during chat now redirects to /login instead of mislabelling a dead session as "assistant broken", error toasts persist (capped at 4) with a close button, and the journal's built-but-unreachable date filter gets a UI. Gadfly round handled (public-page 100dvh, toast cap, shared date-input class). Larger deferred items (revision retention, agent toolbox gaps) noted for their own issues.	2026-07-22 03:54:02 +00:00
steveandClaude Opus 4.8	757ac7394d	Address Gadfly findings on #85 Build image / build-and-push (push) Successful in 16s Details - PublicGardenPage had the same 100vh mobile bug I fixed in the editor — 100dvh there too, so the fix is consistent across both full-height pages. - Cap the toast stack at 4 (drop oldest). Now that error toasts don't auto- dismiss, a burst of failures could otherwise grow the stack unbounded and push the newest — the one that just happened — off-screen. - Hoist the From/To date-input styling to a shared dateInputClass const so the two don't drift. Not taken: reusing safeRedirectPath for the 401 redirect (it validates an incoming redirect param, it doesn't build the outgoing one — the two uses don't overlap), and refactoring the three-branch filter spread (it's clear at three fields; a helper earns its keep when there are more). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ	2026-07-21 23:53:18 -04:00
steve	e3d8e01e5b	Make the canvas keyboard-reachable + trap focus in dialogs (#92 ) Build image / build-and-push (push) Successful in 6s Details Closes #84 (scoped first slice). Objects are focusable role=button with an aria-label and Enter/Space selection — which makes the existing arrow-key nudge reachable by keyboard for the first time — with a :focus-visible ring. The <svg> gets role=application + label + title. Modal traps Tab (robustly: pulls back focus fallen to <body> when a control is removed/disabled) and restores focus to the opener if it's still in the DOM. Verified live with real keyboard. Gadfly round addressed (canonical kind label, aria-current, trap robustness).	2026-07-22 03:34:07 +00:00
steveandClaude Opus 4.8	4b348dcbc0	Address Gadfly findings on #84 Build image / build-and-push (push) Successful in 10s Details - Object aria-label uses kindDef().label (the canonical "In-ground") instead of an ad-hoc kind.replace() that produced "in ground" and diverged from the UI. 4+ models flagged this. - aria-current, not aria-pressed, for the selected object — selection isn't a toggle, which is what aria-pressed means; aria-current marks the active item. - Modal focus trap made robust: if focus is NOT inside the dialog (fell to <body> because the focused control was removed — ShareGardenModal's remove-share button — or disabled while busy, or externally stolen), Tab now pulls it back in instead of escaping. The previous branches only handled focus being exactly at a known boundary. - Focus restore checks opener.isConnected before calling focus(): the delete/ clear flows this targets often remove the element that opened the dialog, and a disconnected node's focus() silently no-ops. - Hoisted the focusable-element selector to a module constant, and excluded input[type="hidden"] (it matched input:not([disabled]) and, at a boundary, broke the wrap). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ	2026-07-21 23:33:38 -04:00
steveandClaude Opus 4.8	d82db48e4b	Rough edges: mobile 100dvh, session-expiry in chat, sticky error toasts, journal date filter (#85 ) Build image / build-and-push (push) Successful in 30s Details Gadfly review (reusable) / review (pull_request) Successful in 5m41s Details Adversarial Review (Gadfly) / review (pull_request) Successful in 5m41s Details The safe, self-contained wins from the #85 bundle: - Mobile viewport. The editor used `100vh`, which on mobile Safari/Chrome is the LARGEST viewport (URL bar hidden), so with the bar visible the canvas bottom and Fit button were pushed under the browser chrome. `100dvh` fixes it. - Session expiry mid-chat. A 401 during a chat turn was mapped to "the assistant is not available right now" — sending the user to debug a config problem that isn't there. Now it says the session expired and redirects to /login, preserving the path, like the rest of the app treats 401. - Error toasts persist. Error toasts were the primary report that a mutation failed, yet auto-dismissed at 4s with no way to retrieve them — look away and it's gone. Errors now stay until dismissed; info toasts still time out; both get a close button. - Journal date filter. `from`/`to` existed in the API and JournalFilter but had no UI, so "show me last spring" was unreachable. Added two date inputs (with a Clear) that feed the existing filter. No backend change. Deferred to their own follow-ups (too big for this bundle, or need a decision): revision-history retention/pruning, the agent toolbox's missing corrective tools, plop-level journal entries from the UI, and the editor's max-width cap (a layout call worth confirming rather than changing blind). The DESIGN.md API-listing drift the issue mentioned was already fixed in #89. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ	2026-07-21 23:31:10 -04:00
steve	20bf7ee03d	Image normalization: decode HEIC/webp/png/jpeg → JPEG (#91 ) Build image / build-and-push (push) Successful in 7s Details Closes #80. internal/imagenorm.Normalize decodes jpeg/png/heic/webp and re-encodes JPEG, so the seed-packet path (and majordomo's vision) only ever see a format they can read — HEIC (iPhone default) included. CGO stays off: heic via libheif-as-WASM, webp pure Go. Hostile-upload bounds: byte cap, overflow-safe pre-decode pixel/dimension guard, and a recover around the third-party decoders. The ~5 MB only links in when #81 imports it. Gadfly's blocking round addressed (panic recovery, the untested pixel-bomb guard now tested, sentinel errors, lowered pixel cap); EXIF orientation deferred to the #81 handler.	2026-07-22 03:27:32 +00:00
steveandClaude Opus 4.8	bfc5d9a871	Make the canvas keyboard-reachable + trap focus in dialogs (#84 ) Build image / build-and-push (push) Successful in 9s Details Gadfly review (reusable) / review (pull_request) Successful in 7m40s Details Adversarial Review (Gadfly) / review (pull_request) Successful in 7m41s Details The arrow-key nudge handler existed but only ever acted on a POINTER selection, and nothing could select without a mouse — so the feature was unusable by exactly the keyboard users it's for. This is the scoped first slice: give the canvas a keyboard path in, and fix the Modal focus trap that every destructive confirmation goes through. Canvas: - The <svg> gets role="application" + an aria-label describing the controls, and a <title> naming the garden — a screen reader now announces an interactive canvas rather than an empty graphic. - Each object <g> is a focusable role="button" with an aria-label (name + kind) and aria-pressed reflecting selection. Enter/Space selects it — the step that was missing — which makes the existing arrow-key nudge reachable. - A :focus-visible CSS rule draws a dashed accent ring on keyboard focus (and NOT on a mouse click, which is the point of :focus-visible). CSS rather than React state because onFocus on an SVG <g> is unreliable, and a CSS rule cleanly overrides the shape's inline stroke. Modal (blast radius: DeleteGarden/ClearBed/DeletePlant/DeleteSeedLot/Share): - Tab is trapped inside the dialog and wraps at the ends, instead of walking out into the page behind the backdrop. - On close, focus returns to the element that opened the dialog rather than landing on <body>. Verified live against the built binary with real keyboard input: Tab focuses an object (SVG <g tabindex> genuinely takes focus), Enter flips aria-pressed false→true, the focus-visible dash renders (computed stroke-dasharray "5px, 4px"), the dialog traps focus through 5 Tabs, and Escape closes it and restores focus to the opener. Follow-ups noted, not done here: object dimensions in the aria-label (needs the garden's unit context this component doesn't hold), roving-tabindex between plops inside a focused bed, and the EditorRail tablist semantics. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ	2026-07-21 23:20:47 -04:00