Chat panel in the garden editor (#57) (#71)

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/editor/ChatPanel.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { errorMessage } from '@/lib/api'
+import { Button } from '@/components/ui/Button'
+import { TextArea } from '@/components/ui/TextArea'
+import { cn } from '@/lib/cn'
+import {
+  describeStep,
+  streamChat,
+  useAgentHistory,
+  useAgentRefresh,
+  useClearAgentHistory,
+  type AgentStep,
+  type AgentTurn,
+} from '@/lib/agent'
+import { useUndo } from '@/lib/history'
+import { UndoButton } from './UndoButton'
+
+/**
+ * Talk to the garden assistant, in the editor beside the canvas.
+ *
+ * Here rather than on its own page because watching the garden change as the
+ * agent works IS the confirmation — which is what makes acting without asking
+ * first tolerable. It also means the agent never has to guess which garden you
+ * mean.
+ */
+export function ChatPanel({ gardenId, canEdit }: { gardenId: number; canEdit: boolean }) {
+  const history = useAgentHistory(gardenId, true)
+  const clear = useClearAgentHistory(gardenId)
+  const refresh = useAgentRefresh(gardenId)
+  const undo = useUndo(gardenId)
+
+  const [input, setInput] = useState('')
+  // The turn in flight: what we sent, the steps so far, and how it ended.
+  const [pending, setPending] = useState<{ message: string; steps: AgentStep[] } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [warning, setWarning] = useState<string | null>(null)
+  const abort = useRef<AbortController | null>(null)
+  const bottom = useRef<HTMLDivElement>(null)
+
+  // Deliberately NOT aborted on unmount. Selecting an object auto-switches the
+  // rail to the inspector, so aborting here would mean clicking the canvas
+  // mid-turn silently killed the turn — and the canvas is exactly what you're
+  // meant to be watching. The request continues, the exchange is persisted
+  // server-side, and coming back to this tab shows it. Only Stop aborts, and
+  // even that only stops us READING: the turn keeps running server-side, which
+  // is why its work still lands in History either way.
+
+  // Follow the conversation as it grows, including mid-turn as steps arrive.
+  useEffect(() => {
+    bottom.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
+  }, [history.data, pending])
+
+  const send = () => {
+    const message = input.trim()
+    if (!message || pending) return
+    setInput('')
+    setError(null)
+    setWarning(null)
+    setPending({ message, steps: [] })
+
+    const controller = new AbortController()
+    abort.current = controller
+
+    void streamChat(
+      gardenId,
+      message,
+      {
+        onStep: (step) => {
+          setPending((p) => (p ? { ...p, steps: [...p.steps, step] } : p))
+          // The canvas updating under the conversation is the whole point of
+          // putting the chat here, so refresh it as each step lands — but only
+          // it: nothing else can have changed until the turn commits.
+          refresh.canvas()
+        },
+        onDone: (turn: AgentTurn) => {
+          setPending(null)
+          refresh.everything()
+          if (turn.truncated) {
+            setError('That turned into more steps than I should take at once — check what changed before continuing.')
+          }
+        },
+        onWarning: setWarning,
+        onError: (message) => {
+          setPending(null)
+          setError(message)
+          // Something may still have landed before it failed.
+          refresh.everything()
+        },
+      },
+      controller.signal,
+    )
+  }
+
+  const messages = history.data ?? []
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-fg">Assistant</h2>
+        {messages.length > 0 && (
+          <button
+            type="button"
+            onClick={() =>
+              clear.mutate(undefined, {
+                onError: (err) => setError(errorMessage(err, "Couldn't clear the conversation.")),
+              })
+            }
+            disabled={clear.isPending}
+            className="rounded px-1.5 py-0.5 text-xs text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
+          >
+            Start over
+          </button>
+        )}
+      </div>
+
+      {!canEdit && (
+        <p className="rounded-md bg-border/40 px-2 py-1 text-xs text-muted">
+          You can only view this garden, so the assistant can't change anything in it.
+        </p>
+      )}
+
+      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+        {history.isPending && <p className="text-sm text-muted">Loading the conversation…</p>}
+        {/* A failed load rendering as an empty thread would look like the
+            conversation had been lost, which is a much worse thing to believe. */}
+        {history.isError && (
+          <Alert>{errorMessage(history.error, "Couldn't load the conversation.")}</Alert>
+        )}
+
+        {history.isSuccess && messages.length === 0 && !pending && (
+          <p className="text-sm text-muted">
+            Ask for what you want and it'll do it — “change the garlic bed to cucumbers this year”, “fill the
+            north half of the west bed with beans”, “what's in here?”. Everything it does lands as one change you
+            can undo.
+          </p>
+        )}
+
+        {messages.map((m) => (
+          <Bubble key={m.id} role={m.role} body={m.body}>
+            {/* Undo on the turn itself, so the common case never involves
+                opening the History panel. Same hook #49 uses, not a second
+                implementation. */}
+            {m.role === 'assistant' && m.changeSetId != null && canEdit && (
+              <UndoButton changeSet={{ id: m.changeSetId }} undo={undo} className="mt-1 items-start" />
+            )}
+          </Bubble>
+        ))}
+
+        {pending && (
+          <>
+            <Bubble role="user" body={pending.message} />
+            <div className="rounded-lg border border-border px-2.5 py-2 text-sm">
+              <ol className="flex flex-col gap-0.5">
+                {pending.steps.map((s) => (
+                  <li key={s.index} className="text-xs text-muted">
+                    {describeStep(s)}…
+                  </li>
+                ))}
+              </ol>
+              <p className="mt-1 flex items-center gap-1.5 text-xs text-muted">
+                <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+                {pending.steps.length === 0 ? 'Thinking…' : 'Working…'}
+              </p>
+            </div>
+          </>
+        )}
+
+        {warning && <Alert tone="info">{warning}</Alert>}
+        {error && <Alert>{error}</Alert>}
+        <div ref={bottom} />
+      </div>
+
+      <div className="flex flex-col gap-2 border-t border-border pt-2">
+        <TextArea
+          label="Message"
+          name="agentMessage"
+          rows={2}
+          placeholder="Change the garlic bed to cucumbers this year"
+          value={input}
+          disabled={!!pending}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            // Enter sends, Shift+Enter breaks the line — the convention every
+            // chat box uses, and typing a newline by accident mid-thought is a
+            // worse failure than the reverse.
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault()
+              send()
+            }
+          }}
+        />
+        <div className="flex justify-end gap-2">
+          {pending && (
+            <Button
+              variant="ghost"
+              className="px-2 py-1 text-xs"
+              onClick={() => {
+                abort.current?.abort()
+                setPending(null)
+                refresh.everything()
+              }}
+            >
+              Stop
+            </Button>
+          )}
+          <Button className="px-3 py-1.5 text-sm" disabled={!!pending || input.trim() === ''} onClick={send}>
+            {pending ? 'Working…' : 'Send'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Bubble({
+  role,
+  body,
+  children,
+}: {
+  role: 'user' | 'assistant'
+  body: string
+  children?: ReactNode
+}) {
+  const mine = role === 'user'
+  return (
+    <div className={cn('flex flex-col', mine ? 'items-end' : 'items-start')}>
+      <div
+        className={cn(
+          'max-w-[90%] whitespace-pre-wrap rounded-lg px-2.5 py-2 text-sm',
+          mine ? 'bg-accent/15 text-fg' : 'border border-border text-fg',
+        )}
+      >
+        {body}
+      </div>
+      {children}
+    </div>
+  )
+}

web/src/editor/UndoButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/Button'
 import { cn } from '@/lib/cn'
-import type { ChangeSet, UndoOutcome, useUndo } from '@/lib/history'
+import type { UndoOutcome, UndoTarget, useUndo } from '@/lib/history'
 
 /**
  * Undo, plus what happened. Paired with useUndo so the history list and the
@@ -14,7 +14,7 @@ export function UndoButton({
   className,
   label = 'Undo',
 }: {
-  changeSet: ChangeSet
+  changeSet: UndoTarget
   undo: ReturnType<typeof useUndo>
   className?: string
   label?: string

web/src/lib/agent.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { describeStep } from './agent'
+
+describe('describeStep', () => {
+  // Raw tool names tell you the agent is busy; these tell you what it's busy
+  // DOING, which is the difference between the panel feeling alive and hung.
+  it("names tools in the app's own vocabulary", () => {
+    expect(describeStep({ index: 0, tools: ['clear_object'] })).toBe('Clearing a bed')
+    expect(describeStep({ index: 1, tools: ['find_plant'] })).toBe('Looking up a plant')
+  })
+
+  it('collapses repeats within one step', () => {
+    expect(describeStep({ index: 0, tools: ['fill_region', 'fill_region'] })).toBe('Filling a bed')
+  })
+
+  it('joins distinct tools', () => {
+    expect(describeStep({ index: 0, tools: ['clear_object', 'fill_region'] })).toBe('Clearing a bed, Filling a bed')
+  })
+
+  it('says something for a step with no tool calls', () => {
+    expect(describeStep({ index: 0, tools: [] })).toBe('Thinking')
+  })
+
+  // A tool added server-side before the client knows about it should degrade to
+  // something readable rather than showing snake_case at the user.
+  it('falls back readably for an unknown tool', () => {
+    expect(describeStep({ index: 0, tools: ['prune_orchard'] })).toBe('prune orchard')
+  })
+})

web/src/lib/agent.ts

@@ -0,0 +1,232 @@
+// The garden assistant's client (#57).
+//
+// The chat lives in the editor, not on its own page, because watching the canvas
+// change as the agent works IS the confirmation — which is what makes acting
+// without asking first tolerable. So this module's job is as much about
+// surfacing progress as it is about sending a message.
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+import { API_BASE, api } from './api'
+import { gardenFullKey } from './objects'
+import { historyKey } from './history'
+
+const capabilitiesSchema = z.object({ agent: z.boolean() })
+
+/** Whether this instance has the assistant configured. Without it the panel
+ *  isn't rendered at all — a dead button is worse than no button. */
+export function useCapabilities() {
+  return useQuery({
+    queryKey: ['capabilities'] as const,
+    queryFn: async () => capabilitiesSchema.parse(await api.get('/capabilities')),
+    staleTime: Infinity, // server config; it doesn't change under a running page
+  })
+}
+
+export const agentMessageSchema = z.object({
+  id: z.number(),
+  conversationId: z.number(),
+  role: z.enum(['user', 'assistant']),
+  body: z.string(),
+  changeSetId: z.number().optional(),
+  createdAt: z.string(),
+})
+export type AgentMessage = z.infer<typeof agentMessageSchema>
+
+const historySchema = z.object({ messages: z.array(agentMessageSchema) })
+
+export function agentHistoryKey(gardenId: number) {
+  return ['gardens', gardenId, 'agent-history'] as const
+}
+
+/** The stored conversation, so a reload doesn't lose the thread — which is
+ *  exactly when someone reloads, to check whether a change actually landed. */
+export function useAgentHistory(gardenId: number, enabled: boolean) {
+  return useQuery({
+    queryKey: agentHistoryKey(gardenId),
+    enabled,
+    queryFn: async (): Promise<AgentMessage[]> =>
+      historySchema.parse(await api.get(`/gardens/${gardenId}/agent/history`)).messages,
+  })
+}
+
+export function useClearAgentHistory(gardenId: number) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (): Promise<void> => {
+      await api.delete(`/gardens/${gardenId}/agent/history`)
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: agentHistoryKey(gardenId) }),
+  })
+}
+
+/** One completed turn, as the server reports it. */
+export interface AgentTurn {
+  reply: string
+  changeSetId?: number
+  steps: number
+  truncated?: boolean
+}
+
+/** A step the model just finished, named in the app's own vocabulary. */
+export interface AgentStep {
+  index: number
+  tools: string[]
+}
+
+// What each tool is doing, in words. Raw tool names ("fill_region") tell you the
+// agent is busy; these tell you what it's busy DOING, which is the difference
+// between the panel feeling alive and feeling hung.
+const TOOL_LABELS: Record<string, string> = {
+  list_gardens: 'Looking at your gardens',
+  describe_garden: 'Reading the garden',
+  create_object: 'Adding a bed',
+  move_object: 'Moving a bed',
+  place_planting: 'Planting',
+  fill_region: 'Filling a bed',
+  clear_object: 'Clearing a bed',
+  find_plant: 'Looking up a plant',
+  create_plant: 'Adding a plant to your catalog',
+  add_journal_entry: 'Writing a journal note',
+}
+
+export function describeStep(step: AgentStep): string {
+  if (step.tools.length === 0) return 'Thinking'
+  const labels = step.tools.map((t) => TOOL_LABELS[t] ?? t.replace(/_/g, ' '))
+  // Repeated tools in one step read as one action, not a list of identical ones.
+  return [...new Set(labels)].join(', ')
+}
+
+const chatEventSchema = z.object({
+  step: z.object({ index: z.number(), tools: z.array(z.string()) }).optional(),
+  done: z
+    .object({
+      reply: z.string(),
+      changeSetId: z.number().optional(),
+      steps: z.number(),
+      truncated: z.boolean().optional(),
+    })
+    .optional(),
+  error: z.string().optional(),
+  // The turn worked but something adjacent to it didn't — currently, the
+  // exchange couldn't be saved. Dropping this on the floor would recreate
+  // exactly the silent swallow the server added it to avoid.
+  warning: z.string().optional(),
+})
+
+export interface StreamHandlers {
+  onStep: (step: AgentStep) => void
+  onDone: (turn: AgentTurn) => void
+  onError: (message: string) => void
+  /** The turn succeeded, but something alongside it didn't. */
+  onWarning?: (message: string) => void
+}
+
+/**
+ * Send a message and stream the reply.
+ *
+ * Hand-rolled rather than EventSource, which can only issue GETs — this needs a
+ * POST body. The wire format is still SSE so a proxy that understands it doesn't
+ * buffer, and so switching to EventSource later wouldn't change the server.
+ */
+export async function streamChat(
+  gardenId: number,
+  message: string,
+  handlers: StreamHandlers,
+  signal?: AbortSignal,
+): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(`${API_BASE}/agent/chat`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ gardenId, message }),
+      credentials: 'same-origin',
+      signal,
+    })
+  } catch {
+    // An abort here is the caller's own doing — Stop, or navigating away — not a
+    // failure to report back to them. The read loop below already knew this; the
+    // request path did not.
+    if (signal?.aborted) return
+    handlers.onError('Could not reach the server.')
+    return
+  }
+  if (!res.ok || !res.body) {
+    handlers.onError(
+      res.status === 404
+        ? "This instance doesn't have the assistant configured."
+        : 'The assistant is not available right now.',
+    )
+    return
+  }
+
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ''
+  for (;;) {
+    let chunk: ReadableStreamReadResult<Uint8Array>
+    try {
+      chunk = await reader.read()
+    } catch {
+      // An aborted read is the caller navigating away, not a failure worth
+      // reporting back to them.
+      if (signal?.aborted) return
+      handlers.onError('The connection dropped partway through.')
+      return
+    }
+    if (chunk.done) break
+    buffer += decoder.decode(chunk.value, { stream: true })
+
+    // SSE frames are separated by a blank line; anything after the last one is
+    // a partial frame to keep for the next chunk.
+    const frames = buffer.split('\n\n')
+    buffer = frames.pop() ?? ''
+    for (const frame of frames) {
+      const line = frame.split('\n').find((l) => l.startsWith('data:'))
+      if (!line) continue
+      // Parsed AND validated: a malformed or unexpected frame shouldn't kill a
+      // working stream, and shouldn't be trusted into the UI either.
+      const parsed = chatEventSchema.safeParse(safeJson(line.slice(5).trim()))
+      if (!parsed.success) continue
+      const e = parsed.data
+      if (e.warning) handlers.onWarning?.(e.warning)
+      if (e.error) handlers.onError(e.error)
+      else if (e.step) handlers.onStep(e.step)
+      else if (e.done) handlers.onDone(e.done)
+    }
+  }
+}
+
+function safeJson(raw: string): unknown {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Refreshes for the two moments that need different amounts of work.
+ *
+ * Mid-turn, only the canvas can have changed: the change set isn't written until
+ * the turn commits, and the exchange isn't stored until it finishes. Refetching
+ * those on every step would be up to 2×(N−1) requests per turn for data that
+ * cannot have moved.
+ */
+export function useAgentRefresh(gardenId: number) {
+  const qc = useQueryClient()
+  const canvas = () => {
+    void qc.invalidateQueries({ queryKey: gardenFullKey(gardenId) })
+  }
+  return {
+    /** After a step: the garden may have changed under the conversation. */
+    canvas,
+    /** After a turn: the change set and the stored exchange exist now too. */
+    everything: () => {
+      canvas()
+      void qc.invalidateQueries({ queryKey: historyKey(gardenId) })
+      void qc.invalidateQueries({ queryKey: agentHistoryKey(gardenId) })
+    },
+  }
+}

web/src/lib/history.test.ts

@@ -113,3 +113,29 @@ describe('totalChanges', () => {
     ).toBe(13)
   })
 })
+
+describe('describeUndo with an unknown total', () => {
+  // The chat panel offers Undo on a turn knowing only its change set id — the
+  // agent's reply carries the id, not the tally. Inventing a denominator to
+  // fill the sentence would be worse than not having one.
+  it("doesn't invent a denominator it was never given", () => {
+    const out = describeUndo(
+      { id: 5 },
+      {
+        changeSet: changeSet({ id: 6, counts: [{ entityType: 'planting', op: 'delete', n: 2 }] }),
+        conflicts: [{ entityType: 'object', entityId: 7, reason: 'changed', name: 'North Bed' }],
+      },
+    )
+    expect(out.tone).toBe('partial')
+    expect(out.message).toBe('Partly undone — “North Bed” was edited since, so it was left alone.')
+    expect(out.message).not.toMatch(/\d+ of \d+/)
+  })
+
+  it('still reports a clean undo the same way', () => {
+    const out = describeUndo(
+      { id: 5 },
+      { changeSet: changeSet({ id: 6, counts: [{ entityType: 'object', op: 'update', n: 1 }] }), conflicts: [] },
+    )
+    expect(out).toEqual({ tone: 'ok', message: 'Undone.' })
+  })
+})

web/src/lib/history.ts

@@ -113,9 +113,10 @@ export function useRevertChangeSet(gardenId: number) {
   })
 }
 
-/** How many rows a change set touched, for "3 changes" in the list. */
-export function totalChanges(cs: ChangeSet): number {
-  return cs.counts.reduce((sum, c) => sum + c.n, 0)
+/** How many rows a change set touched, for "3 changes" in the list. Undefined
+ *  counts total zero, which callers read as "no denominator to quote". */
+export function totalChanges(cs: { counts?: ChangeCount[] }): number {
+  return (cs.counts ?? []).reduce((sum, c) => sum + c.n, 0)
 }
 
 const ENTITY_NOUNS: Record<ChangeCount['entityType'], [string, string]> = {
@@ -171,7 +172,7 @@ export function useUndo(gardenId: number) {
   const revert = useRevertChangeSet(gardenId)
   const [outcomes, setOutcomes] = useState<Record<number, UndoOutcome>>({})
 
-  const undo = (cs: ChangeSet) => {
+  const undo = (cs: UndoTarget) => {
     setOutcomes((prev) => ({ ...prev, [cs.id]: { tone: 'pending', message: 'Undoing…' } }))
     revert.mutate(cs.id, {
       onSuccess: (result) => {
@@ -197,6 +198,19 @@ export function useUndo(gardenId: number) {
   }
 }
 
+/**
+ * What undo needs to know about a change set.
+ *
+ * `counts` is optional because the chat panel offers Undo on a turn knowing only
+ * its change set id — the agent's reply carries the id, not the tally. Fabricating
+ * counts to satisfy a type would produce a confidently wrong "1 of 1 changes
+ * undone"; leaving them out lets describeUndo say what it actually knows.
+ */
+export interface UndoTarget {
+  id: number
+  counts?: ChangeCount[]
+}
+
 export interface UndoOutcome {
   tone: 'pending' | 'ok' | 'partial' | 'error'
   message: string
@@ -208,7 +222,7 @@ export interface UndoOutcome {
  * useful thing to report: a bare failure would be a lie about the two that did
  * apply, and a bare success would hide the one that didn't.
  */
-export function describeUndo(target: ChangeSet, result: RevertResult): UndoOutcome {
+export function describeUndo(target: UndoTarget, result: RevertResult): UndoOutcome {
   const skipped = result.conflicts.map(describeConflict).join('; ')
   const applied = result.changeSet ? totalChanges(result.changeSet) : 0
   if (result.conflicts.length === 0) {
@@ -221,6 +235,9 @@ export function describeUndo(target: ChangeSet, result: RevertResult): UndoOutco
   if (applied === 0) {
     return { tone: 'error', message: `Nothing was undone — ${skipped}.` }
   }
+  // Only claim a denominator when we have one. "2 of 3" from a caller that
+  // never knew the total would be a number invented to fill a sentence.
   const total = totalChanges(target)
-  return { tone: 'partial', message: `${applied} of ${total} changes undone — ${skipped}.` }
+  const scale = total > 0 ? `${applied} of ${total} changes undone` : 'Partly undone'
+  return { tone: 'partial', message: `${scale} — ${skipped}.` }
 }

web/src/pages/GardenEditorPage.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/Button'
 import { GardenCanvas } from '@/editor/GardenCanvas'
 import { EditorRail, type RailTab } from '@/editor/EditorRail'
 import { HistoryPanel } from '@/editor/HistoryPanel'
+import { ChatPanel } from '@/editor/ChatPanel'
 import { JournalPanel } from '@/editor/JournalPanel'
 import { Inspector } from '@/editor/Inspector'
 import { PlopInspector } from '@/editor/PlopInspector'
@@ -30,6 +31,7 @@ import {
 } from '@/lib/objects'
 import { toEditorPlanting } from '@/lib/plantings'
 import type { Plant } from '@/lib/plants'
+import { useCapabilities } from '@/lib/agent'
 import { useJournalCounts } from '@/lib/journal'
 import { attributableLots, lotsByPlant, useSeedLots, type SeedLot } from '@/lib/seedLots'
 import { useSeedTray } from '@/lib/seedTray'
@@ -64,6 +66,7 @@ export function GardenEditorPage() {
   const journalObjectId = useEditorStore((s) => s.journalObjectId)
   const setJournalObjectId = useEditorStore((s) => s.setJournalObjectId)
   const journalCounts = useJournalCounts(gid)
+  const capabilities = useCapabilities()
   const journalTotal = useMemo(
     () => [...(journalCounts.data?.values() ?? [])].reduce((a, b) => a + b, 0),
     [journalCounts.data],
@@ -385,6 +388,16 @@ export function GardenEditorPage() {
     },
   ]
 
+  // Only when the instance actually has the assistant configured. A tab that
+  // opens onto an apology is worse than no tab.
+  if (capabilities.data?.agent) {
+    railTabs.push({
+      id: 'chat',
+      label: 'Assistant',
+      render: () => <ChatPanel 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">
@@ -422,6 +435,15 @@ export function GardenEditorPage() {
         >
           History
         </Button>
+        {capabilities.data?.agent && (
+          <Button
+            variant="ghost"
+            className="mt-1 w-full text-sm"
+            onClick={() => setRailTab(railTab === 'chat' ? null : 'chat')}
+          >
+            💬 Assistant
+          </Button>
+        )}
       </div>
 
       <div className="relative flex min-h-0 flex-1 flex-col gap-2">