History panel and undo in the editor (#49)

#48 made every change revertible; this makes that reachable. The bar was that
undoing what the agent just did should take one obvious click, not a hunt.

Settles the rail-layout question, which is the part #53 and #57 depend on. Four
things wanted one strip of screen — inspector, history, journal, chat — so they
are tabs in one EditorRail rather than each bolting on its own chrome. That
keeps the canvas at one width instead of a different width per panel, and adding
the journal or chat later is adding a tab.

Two constraints held. Selecting an object still lands you in the inspector with
no extra click: the page watches the selection and switches tabs itself, so the
rail never becomes something you operate before you can edit. And the canvas
stays worth watching while the agent edits it — the rail is a fixed 20rem column
that closes completely when nothing needs it. On a phone the same tabs render in
the bottom sheet the inspector already lived in.

A reverted entry stays in the list, struck through and marked, and the revert
appears as its own entry — because that is what it is. Making the original
disappear would be rewriting history rather than appending to it, and would
leave no way to undo the undo.

Conflicts are reported as what actually happened. A 409 from a revert is not a
plain failure: it carries the change set that DID apply alongside the entities
deliberately left alone, so the message is "2 of 3 changes undone — “North Bed”
was edited since, so it was left alone" rather than a generic toast. A bare
failure would be a lie about the two that applied; a bare success would hide the
one that didn't.

Undo is one implementation, not two: useUndo owns the mutation, the per-change-
set outcome and the phrasing, and UndoButton renders it. #57's inline undo on an
agent turn uses the same hook, so undo behaves identically wherever it appears.

The panel says plainly that deleting a whole garden isn't covered and can't be
undone, rather than leaving that to be discovered.

Closes #49

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

web/src/pages/GardenEditorPage.tsx

@@ -3,6 +3,8 @@ import { getRouteApi } from '@tanstack/react-router'
 import { Alert } from '@/components/ui/Alert'
 import { Button } from '@/components/ui/Button'
 import { GardenCanvas } from '@/editor/GardenCanvas'
+import { EditorRail, type RailTab } from '@/editor/EditorRail'
+import { HistoryPanel } from '@/editor/HistoryPanel'
 import { Inspector } from '@/editor/Inspector'
 import { PlopInspector } from '@/editor/PlopInspector'
 import { PlantPicker } from '@/editor/PlantPicker'
@@ -38,6 +40,8 @@ export function GardenEditorPage() {
   const selectPlanting = useEditorStore((s) => s.selectPlanting)
   const focusedObjectId = useEditorStore((s) => s.focusedObjectId)
   const setFocusedObject = useEditorStore((s) => s.setFocusedObject)
+  const railTab = useEditorStore((s) => s.railTab)
+  const setRailTab = useEditorStore((s) => s.setRailTab)
   const armedPlant = useEditorStore((s) => s.armedPlant)
   const setArmedPlant = useEditorStore((s) => s.setArmedPlant)
   const setArmedKind = useEditorStore((s) => s.setArmedKind)
@@ -86,6 +90,7 @@ export function GardenEditorPage() {
       setArmedPlant(null)
       setLiveObject(null)
       setLivePlanting(null)
+      setRailTab(null)
     }
     clear()
     setFocusedObject(focus ?? null)
@@ -110,6 +115,16 @@ export function GardenEditorPage() {
     }
   }, [focusedObjectId, objects, full.data, setFocusedObject])
 
+  // Selecting anything lands you in the inspector without a click — the rail
+  // must never be something you operate before you can edit. Deselecting drops
+  // back out of the inspector, but leaves History/Chat open if that's where you
+  // were, since those aren't about the selection.
+  const hasSelection = selectedId != null || selectedPlantingId != null
+  useEffect(() => {
+    if (hasSelection) setRailTab('inspector')
+    else if (useEditorStore.getState().railTab === 'inspector') setRailTab(null)
+  }, [hasSelection, setRailTab])
+
   const exitFocus = () => {
     setFocusedObject(null)
     setArmedPlant(null)
@@ -270,6 +285,48 @@ export function GardenEditorPage() {
     setPicker(null)
   }
 
+  // One rail, tabs inside it — the layout decision #49 settles for the journal
+  // (#53) and chat (#57) panels too: they add a tab here rather than each
+  // claiming their own strip of screen.
+  const railTabs: RailTab[] = [
+    {
+      id: 'inspector',
+      label: 'Inspector',
+      render: () =>
+        selectedObject ? (
+          <Inspector
+            key={`obj-${selectedObject.id}`}
+            object={selectedObject}
+            gardenId={gid}
+            unit={garden.unitPref}
+            readOnly={!canEdit}
+            onFocus={() => {
+              setFocusedObject(selectedObject.id)
+              select(null)
+            }}
+          />
+        ) : selectedPlop ? (
+          <PlopInspector
+            key={`plop-${selectedPlop.id}`}
+            plop={selectedPlop}
+            plant={plantsById.get(selectedPlop.plantId)}
+            gardenId={gid}
+            unit={garden.unitPref}
+            readOnly={!canEdit}
+            onChangePlant={() => setPicker('change')}
+            onClose={() => selectPlanting(null)}
+          />
+        ) : (
+          <p className="text-sm text-muted">Select a bed or a planting to edit it.</p>
+        ),
+    },
+    {
+      id: 'history',
+      label: 'History',
+      render: () => <HistoryPanel gardenId={gid} canEdit={canEdit} />,
+    },
+  ]
+
   return (
     <div className="flex h-[calc(100vh-8rem)] flex-col gap-3 md:flex-row">
       <div className="shrink-0 md:w-40">
@@ -285,6 +342,13 @@ export function GardenEditorPage() {
           <p className="mb-2 rounded-md bg-border/40 px-2 py-1 text-xs text-muted">👁 View only</p>
         )}
         {focusedObjectId == null && canEdit && <Palette />}
+        <Button
+          variant="ghost"
+          className="mt-2 w-full text-sm"
+          onClick={() => setRailTab(railTab === 'history' ? null : 'history')}
+        >
+          History
+        </Button>
       </div>
 
       <div className="relative min-h-0 flex-1">
@@ -335,34 +399,17 @@ export function GardenEditorPage() {
         )}
       </div>
 
-      {(selectedObject || selectedPlop) && (
-        <div className="fixed inset-x-0 bottom-0 z-30 max-h-[65vh] overflow-y-auto rounded-t-xl border-t border-border bg-surface p-4 shadow-lg md:static md:max-h-none md:w-72 md:shrink-0 md:rounded-xl md:border md:p-4 md:shadow-sm">
-          {selectedObject && (
-            <Inspector
-              key={`obj-${selectedObject.id}`}
-              object={selectedObject}
-              gardenId={gid}
-              unit={garden.unitPref}
-              readOnly={!canEdit}
-              onFocus={() => {
-                setFocusedObject(selectedObject.id)
-                select(null)
-              }}
-            />
-          )}
-          {selectedPlop && (
-            <PlopInspector
-              key={`plop-${selectedPlop.id}`}
-              plop={selectedPlop}
-              plant={plantsById.get(selectedPlop.plantId)}
-              gardenId={gid}
-              unit={garden.unitPref}
-              readOnly={!canEdit}
-              onChangePlant={() => setPicker('change')}
-              onClose={() => selectPlanting(null)}
-            />
-          )}
-        </div>
+      {railTab && (
+        <EditorRail
+          tabs={railTabs}
+          activeId={railTab}
+          onActivate={setRailTab}
+          onClose={() => {
+            setRailTab(null)
+            select(null)
+            selectPlanting(null)
+          }}
+        />
       )}
 
       {picker && (