On a phone the editor stacked a control column (title, share, season, a
7-chip palette wrapping to 3 rows, journal/history/assistant) ABOVE the
canvas, crushing the garden — the point of the app — into a short strip.
There was no single "mode" switch: fixtures lived in the palette, plants
in a floating focus toolbar, and journal/assistant in the rail.

Mobile-first now (#99): the canvas is the whole screen, and a bottom mode
bar switches the tools docked beneath it —
- Fixtures  → the object palette (arm → tap to place)
- Plants    → the seed tray, once a bed is focused; focusing a bed enters
              this mode. No bed focused → a "tap a bed, then Plant here"
              hint. Done planting / Clear ride along.
- Journal   → opens the journal rail sheet
- Assistant → opens the chat rail sheet (hidden with no model configured)

A slim mobile top strip keeps the garden name / season / share that lived
in the desktop column. Closing a panel rail returns to a canvas mode so
the bar reappears; History stays a rail sub-tab (not a fifth mode).

Desktop is untouched: the mode bar is md:hidden and the side-column layout
stands; `mode` is an inert hint there. Store gains `mode`/`setMode`
(reset with the rest of transient state on garden switch).

Verified live at 390px (each mode + the select-bed → Plant here → seed-tray
flow, canvas now dominant) and 1280px (desktop unchanged). tsc + vitest
(92) + build green. DESIGN.md updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ

@@ -129,5 +144,6 @@ export const useEditorStore = create<EditorState>((set) => ({
       railTab: null,
       seasonYear: null,
       journalObjectId: null,
+      mode: 'fixtures',

@@ -169,6 +172,13 @@ export function GardenEditorPage() {
     }
   }, [focusedObjectId, objects, full.data, setFocusedObject])
 
+  // Focusing a bed IS "placing plants", so the mobile mode bar follows into Plants

@@ -190,0 +208,4 @@
+    } else if (m === 'assistant') {
+      setRailTab('chat')
+    } else {
+      const rt = useEditorStore.getState().railTab

@@ -490,2 +538,3 @@
+            bottom Plants-mode strip so they don't wrap over the canvas. */}
         {focusedObject && (
-          <div className="absolute left-2 top-2 z-20 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface/90 px-2 py-1.5 text-sm shadow-sm backdrop-blur">
+          <div className="absolute left-2 top-2 z-20 hidden flex-wrap items-center gap-2 rounded-lg border border-border bg-surface/90 px-2 py-1.5 text-sm shadow-sm backdrop-blur md:flex">

@@ -539,0 +589,4 @@
+          bar (#99). md:hidden — desktop uses the left column. A panel-mode rail
+          (journal/assistant) or the inspector overlays this while open. */}
+      <div className="shrink-0 md:hidden">
+        {canEdit && (mode === 'fixtures' || mode === 'plants') && (

@@ -539,0 +593,4 @@
+          <div className="mb-2 min-h-[2.25rem]">
+            {mode === 'fixtures' && <Palette />}
+            {mode === 'plants' &&
+              (focusedObject?.plantable ? (

@@ -539,0 +621,4 @@
+                  </Button>
+                </div>
+              ) : (
+                <p className="px-1 text-xs text-muted">Tap a bed, then “🌱 Plant here” to start planting.</p>

@@ -539,0 +625,4 @@
+              ))}
+          </div>
+        )}
+        <ModeBar mode={mode} onSelect={selectMode} hasAssistant={!!capabilities.data?.agent} />

@@ -548,2 +642,4 @@
               select(null)
               selectPlanting(null)
+            } else {
+              setMode('fixtures')

@@ -578,0 +682,4 @@
+  { id: 'assistant', label: 'Assistant', icon: '💬' },
+]
+
+function ModeBar({

@@ -578,0 +691,4 @@
+  onSelect: (m: EditorMode) => void
+  hasAssistant: boolean
+}) {
+  const modes = hasAssistant ? MODES : MODES.filter((m) => m.id !== 'assistant')