#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

@@ -107,2 +107,3 @@
 - **State:** TanStack Query for all server state (editor keyed on `gardens/:id/full`; optimistic mutations with version-conflict rollback). One small Zustand store for ephemeral editor state only: viewport, selection, focused object, active tool, in-flight drag.
-- **Editor components (`web/src/editor/`):** `GardenCanvas` (svg root + viewport g), `useViewport` (use-gesture pan/zoom/pinch), `ObjectShape`, `PlopMarker` (semantic-zoom branching), `Palette` (drag-to-place object kinds), `Inspector` (side panel; bottom sheet on mobile), `PlantPicker`. Pure geometry helpers (local↔world transforms, unit formatting) in `web/src/lib/geometry.ts`, unit-tested.
+- **Editor components (`web/src/editor/`):** `GardenCanvas` (svg root + viewport g), `useViewport` (use-gesture pan/zoom/pinch), `ObjectShape`, `PlopMarker` (semantic-zoom branching), `Palette` (drag-to-place object kinds), `EditorRail` (the one side panel), `Inspector`, `HistoryPanel`, `PlantPicker`.
+- **One rail, tabs inside it.** The inspector, history, and later the journal and chat panel all want the same strip of screen; rather than each bolting on its own chrome they are tabs in `EditorRail` — so the canvas is one width instead of a different width per panel, and adding a panel is adding a tab. Selecting an object switches to the Inspector tab automatically, so the rail is never something you operate before you can edit; on a phone the same tabs render in the bottom sheet the inspector already used. Pure geometry helpers (local↔world transforms, unit formatting) in `web/src/lib/geometry.ts`, unit-tested.

@@ -0,0 +66,4 @@
+            )}
+          >
+            {tab.label}
+            {tab.badge != null && tab.badge !== false && tab.badge !== 0 && (

@@ -0,0 +15,4 @@
+ */
+export function HistoryPanel({ gardenId, canEdit }: { gardenId: number; canEdit: boolean }) {
+  const history = useGardenHistory(gardenId)
+  const undo = useUndo(gardenId)

@@ -0,0 +20,4 @@
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="text-sm font-semibold text-fg">History</h2>

@@ -0,0 +42,4 @@
+          variant="ghost"
+          className="text-sm"
+          disabled={history.isFetchingNextPage}
+          onClick={() => void history.fetchNextPage()}

@@ -0,0 +101,4 @@
+          {reverted && <p className="mt-1 text-xs text-muted">Undone</p>}
+        </div>
+
+        {canEdit && totalChanges(changeSet) > 0 && (

@@ -0,0 +115,4 @@
+}
+
+/** A compact "3m ago" / "yesterday" for a UTC timestamp. */
+export function relativeTime(iso: string): string {

@@ -0,0 +125,4 @@
+  const hours = Math.round(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.round(hours / 24)
+  if (days === 1) return 'yesterday'

@@ -0,0 +18,4 @@
+export const changeCountSchema = z.object({
+  entityType: z.enum(['garden', 'object', 'planting']),
+  op: z.enum(['create', 'update', 'delete']),
+  n: z.number(),

@@ -0,0 +24,4 @@
+
+export const changeSetSchema = z.object({
+  id: z.number(),
+  gardenId: z.number(),

@@ -0,0 +94,4 @@
+ * the history list so the new entry (and the "reverted" mark on its target)
+ * appear — on failure too, because a 409 means part of it applied.
+ */
+export function useRevertChangeSet(gardenId: number) {

@@ -0,0 +98,4 @@
+  const qc = useQueryClient()
+  const refresh = () => {
+    void qc.invalidateQueries({ queryKey: gardenFullKey(gardenId) })
+    void qc.invalidateQueries({ queryKey: historyKey(gardenId) })

@@ -0,0 +158,4 @@
+}
+
+/**
+ * The one undo implementation, shared by the history list and (per #49) the

@@ -0,0 +166,4 @@
+ */
+export function useUndo(gardenId: number) {
+  const revert = useRevertChangeSet(gardenId)
+  const [outcomes, setOutcomes] = useState<Record<number, UndoOutcome>>({})

@@ -0,0 +175,4 @@
+        setOutcomes((prev) => ({ ...prev, [cs.id]: describeUndo(cs, result) }))
+      },
+      onError: (err) => {
+        const result = revertConflicts(err)

@@ -0,0 +189,4 @@
+  return {
+    undo,
+    outcomeFor: (id: number): UndoOutcome | undefined => outcomes[id],
+    isPending: revert.isPending,

@@ -0,0 +206,4 @@
+ */
+export function describeUndo(target: ChangeSet, result: RevertResult): UndoOutcome {
+  const skipped = result.conflicts.map(describeConflict).join('; ')
+  if (result.conflicts.length === 0) {

@@ -113,0 +120,4 @@
+  // 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(() => {

@@ -366,0 +404,4 @@
+          tabs={railTabs}
+          activeId={railTab}
+          onActivate={setRailTab}
+          onClose={() => {