feat(ui): add action buttons to Docker, Git, systemd, and Caddy modules

- Docker table: Restart and Stop buttons per container row (docker_compose_restart / docker_compose_stop)
- Git repos list: Fetch and Pull buttons per repo; Pull disabled when working tree is dirty
- systemd units list: Restart button per unit (systemctl_restart)
- Caddy: Edit link on /caddy page, new /caddy/edit page with textarea + 3-step Validate → Save+Reload flow
- All buttons open ConfirmDialog with exact agent-call preview, then stream output via StreamingTerminal
- Add docker_compose_stop to ops-agent/commands.yml.example

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/caddy/_components/caddy-editor.tsx

@@ -0,0 +1,214 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useFlowRun } from '@/hooks/useFlowRun'
+import ConfirmDialog from '@/components/ConfirmDialog'
+import StreamingTerminal from '@/components/StreamingTerminal'
+
+type Phase = 'edit' | 'writing' | 'validating' | 'validated' | 'saving' | 'saved'
+
+type DialogPending = 'validate' | 'save' | null
+
+type Props = {
+  initialContent: string
+  initialError: string | null
+}
+
+const VALIDATE_PREVIEW =
+  'cat > /srv/scrum4me/caddy/Caddyfile.new \\\n  && mv /srv/scrum4me/caddy/Caddyfile.new /srv/scrum4me/caddy/Caddyfile\ncaddy validate --config /srv/scrum4me/caddy/Caddyfile'
+
+const SAVE_PREVIEW = 'caddy reload --config /srv/scrum4me/caddy/Caddyfile'
+
+export default function CaddyEditor({ initialContent, initialError }: Props) {
+  const [content, setContent] = useState(initialContent)
+  const [phase, setPhase] = useState<Phase>('edit')
+  const [dialogPending, setDialogPending] = useState<DialogPending>(null)
+
+  const writeFlow = useFlowRun()
+  const validateFlow = useFlowRun()
+  const reloadFlow = useFlowRun()
+
+  // Chain: write done → start validate
+  useEffect(() => {
+    if (phase === 'writing' && writeFlow.status === 'done') {
+      setPhase('validating')
+      validateFlow.start('caddy_validate')
+    } else if (phase === 'writing' && (writeFlow.status === 'failed' || writeFlow.status === 'error')) {
+      setPhase('edit')
+    }
+  }, [writeFlow.status, phase, validateFlow.start])
+
+  // Validate done → validated phase
+  useEffect(() => {
+    if (phase === 'validating' && validateFlow.status === 'done') {
+      setPhase('validated')
+    } else if (phase === 'validating' && (validateFlow.status === 'failed' || validateFlow.status === 'error')) {
+      setPhase('edit')
+    }
+  }, [validateFlow.status, phase])
+
+  // Reload done → saved
+  useEffect(() => {
+    if (phase === 'saving' && reloadFlow.status === 'done') {
+      setPhase('saved')
+    } else if (phase === 'saving' && (reloadFlow.status === 'failed' || reloadFlow.status === 'error')) {
+      setPhase('validated')
+    }
+  }, [reloadFlow.status, phase])
+
+  const handleValidateConfirm = useCallback(() => {
+    setDialogPending(null)
+    setPhase('writing')
+    writeFlow.reset()
+    validateFlow.reset()
+    writeFlow.start('caddy_write_config', [], content)
+  }, [content, writeFlow.reset, writeFlow.start, validateFlow.reset])
+
+  const handleSaveConfirm = useCallback(() => {
+    setDialogPending(null)
+    setPhase('saving')
+    reloadFlow.reset()
+    reloadFlow.start('caddy_reload')
+  }, [reloadFlow.reset, reloadFlow.start])
+
+  const handleEditAgain = () => {
+    writeFlow.reset()
+    validateFlow.reset()
+    reloadFlow.reset()
+    setPhase('edit')
+  }
+
+  const isActive = phase === 'writing' || phase === 'validating' || phase === 'saving'
+
+  return (
+    <div className="space-y-6">
+      {initialError && (
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+          Failed to load current config: {initialError}
+        </div>
+      )}
+
+      {/* Textarea */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-medium tracking-tight">Caddyfile</h2>
+          {phase === 'saved' && (
+            <span className="inline-flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+              <span className="size-2 rounded-full bg-green-500" />
+              Reloaded successfully
+            </span>
+          )}
+          {phase === 'validated' && (
+            <span className="inline-flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+              <span className="size-2 rounded-full bg-green-500" />
+              Config is valid
+            </span>
+          )}
+        </div>
+        <textarea
+          value={content}
+          onChange={(e) => {
+            setContent(e.target.value)
+            // Reset validated state if user edits after validation
+            if (phase === 'validated' || phase === 'saved') setPhase('edit')
+          }}
+          readOnly={isActive}
+          rows={24}
+          spellCheck={false}
+          className="w-full rounded-lg border border-border bg-zinc-950 p-4 font-mono text-xs text-zinc-100 focus:outline-none focus:ring-1 focus:ring-ring resize-y disabled:opacity-50"
+        />
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-3">
+        {(phase === 'edit' || phase === 'validated' || phase === 'saved') && (
+          <button
+            onClick={() => setDialogPending('validate')}
+            disabled={isActive || !content.trim()}
+            className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted/50 disabled:opacity-50 transition-colors"
+          >
+            Validate
+          </button>
+        )}
+        {(phase === 'validated') && (
+          <button
+            onClick={() => setDialogPending('save')}
+            disabled={isActive}
+            className="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 disabled:opacity-50 transition-colors"
+          >
+            Save + Reload
+          </button>
+        )}
+        {(phase === 'validated' || phase === 'saved') && (
+          <button
+            onClick={handleEditAgain}
+            className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted/50 transition-colors"
+          >
+            Edit again
+          </button>
+        )}
+        {phase === 'saved' && (
+          <Link
+            href="/caddy"
+            className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted/50 transition-colors"
+          >
+            ← Back to Caddy
+          </Link>
+        )}
+      </div>
+
+      {/* Write flow terminal (step 1 of validate) */}
+      {(phase === 'writing' || phase === 'validating' || (writeFlow.status !== 'idle' && writeFlow.lines.length > 0)) && (
+        <div className="space-y-1">
+          <p className="text-xs text-muted-foreground">Writing config…</p>
+          <StreamingTerminal
+            lines={writeFlow.lines}
+            status={writeFlow.status === 'done' ? 'done' : writeFlow.status}
+            error={writeFlow.error}
+          />
+        </div>
+      )}
+
+      {/* Validate flow terminal (step 2 of validate) */}
+      {(phase === 'validating' || phase === 'validated' || (validateFlow.status !== 'idle')) && (
+        <div className="space-y-1">
+          <p className="text-xs text-muted-foreground">Validating config…</p>
+          <StreamingTerminal
+            lines={validateFlow.lines}
+            status={validateFlow.status}
+            error={validateFlow.error}
+          />
+        </div>
+      )}
+
+      {/* Reload flow terminal */}
+      {(phase === 'saving' || phase === 'saved' || (reloadFlow.status !== 'idle')) && (
+        <div className="space-y-1">
+          <p className="text-xs text-muted-foreground">Reloading Caddy…</p>
+          <StreamingTerminal
+            lines={reloadFlow.lines}
+            status={reloadFlow.status}
+            error={reloadFlow.error}
+          />
+        </div>
+      )}
+
+      {/* Confirm dialogs */}
+      <ConfirmDialog
+        open={dialogPending === 'validate'}
+        title="Validate Caddyfile"
+        commandPreview={VALIDATE_PREVIEW}
+        onConfirm={handleValidateConfirm}
+        onCancel={() => setDialogPending(null)}
+      />
+      <ConfirmDialog
+        open={dialogPending === 'save'}
+        title="Save + Reload Caddy"
+        commandPreview={SAVE_PREVIEW}
+        onConfirm={handleSaveConfirm}
+        onCancel={() => setDialogPending(null)}
+      />
+    </div>
+  )
+}

app/caddy/edit/page.tsx

@@ -0,0 +1,43 @@
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+import { getCurrentUser } from '@/lib/session'
+import { execAgent } from '@/lib/agent-client'
+import CaddyEditor from '../_components/caddy-editor'
+
+export const dynamic = 'force-dynamic'
+
+export default async function CaddyEditPage() {
+  const user = await getCurrentUser()
+  if (!user) redirect('/login')
+
+  let initialContent = ''
+  let initialError: string | null = null
+  try {
+    initialContent = await execAgent('caddy_show_config')
+  } catch (err) {
+    initialError = err instanceof Error ? err.message : 'failed to load config'
+  }
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-4xl space-y-6">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/caddy"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            ← Caddy
+          </Link>
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">Edit Caddyfile</h1>
+            <p className="text-sm text-muted-foreground">
+              Edit, validate, then save and reload Caddy
+            </p>
+          </div>
+        </div>
+
+        <CaddyEditor initialContent={initialContent} initialError={initialError} />
+      </div>
+    </div>
+  )
+}

app/caddy/page.tsx

@@ -1,4 +1,5 @@
 import { redirect } from 'next/navigation'
+import Link from 'next/link'
 import { codeToHtml } from 'shiki'
 import { getCurrentUser } from '@/lib/session'
 import { execAgent } from '@/lib/agent-client'
@@ -41,7 +42,15 @@ export default async function CaddyPage() {
         </div>
 
         <section className="space-y-3">
-          <h2 className="text-lg font-medium tracking-tight">Caddyfile</h2>
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-medium tracking-tight">Caddyfile</h2>
+            <Link
+              href="/caddy/edit"
+              className="rounded-md border border-border px-3 py-1 text-xs hover:bg-muted/50 transition-colors"
+            >
+              Edit
+            </Link>
+          </div>
           {configError ? (
             <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
               {configError}

app/docker/_components/docker-table.tsx

@@ -3,6 +3,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { type Container, parseDockerPs } from '@/lib/parse-docker'
+import { useFlowRun } from '@/hooks/useFlowRun'
+import ConfirmDialog from '@/components/ConfirmDialog'
+import StreamingTerminal from '@/components/StreamingTerminal'
 
 async function fetchContainers(): Promise<Container[]> {
   const res = await fetch('/api/agent/exec', {
@@ -68,6 +71,13 @@ function statusBadge(status: string) {
   )
 }
 
+type ActionDef = {
+  commandKey: string
+  args: string[]
+  preview: string
+  title: string
+}
+
 type Props = {
   initialContainers: Container[]
   initialError: string | null
@@ -78,6 +88,8 @@ export default function DockerTable({ initialContainers, initialError }: Props)
   const [error, setError] = useState<string | null>(initialError)
   const [refreshing, setRefreshing] = useState(false)
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
+  const [pendingAction, setPendingAction] = useState<ActionDef | null>(null)
+  const flowRun = useFlowRun()
 
   const refresh = useCallback(async () => {
     setRefreshing(true)
@@ -98,6 +110,12 @@ export default function DockerTable({ initialContainers, initialError }: Props)
     return () => clearInterval(id)
   }, [refresh])
 
+  const handleConfirm = useCallback(() => {
+    if (!pendingAction) return
+    flowRun.start(pendingAction.commandKey, pendingAction.args)
+    setPendingAction(null)
+  }, [pendingAction, flowRun.start])
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -129,12 +147,13 @@ export default function DockerTable({ initialContainers, initialError }: Props)
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Ports</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
             </tr>
           </thead>
           <tbody>
             {containers.length === 0 && !error ? (
               <tr>
-                <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
+                <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
                   No containers running
                 </td>
               </tr>
@@ -158,12 +177,69 @@ export default function DockerTable({ initialContainers, initialError }: Props)
                     {c.ports || '—'}
                   </td>
                   <td className="px-4 py-3 text-xs text-muted-foreground">{c.created}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() =>
+                          setPendingAction({
+                            commandKey: 'docker_compose_restart',
+                            args: [c.name],
+                            preview: `docker compose restart ${c.name}`,
+                            title: `Restart ${c.name}`,
+                          })
+                        }
+                        disabled={flowRun.status === 'running'}
+                        className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
+                      >
+                        Restart
+                      </button>
+                      <button
+                        onClick={() =>
+                          setPendingAction({
+                            commandKey: 'docker_compose_stop',
+                            args: [c.name],
+                            preview: `docker compose stop ${c.name}`,
+                            title: `Stop ${c.name}`,
+                          })
+                        }
+                        disabled={flowRun.status === 'running'}
+                        className="rounded-md border border-destructive/30 px-2 py-1 text-xs text-destructive hover:bg-destructive/10 disabled:opacity-50 transition-colors"
+                      >
+                        Stop
+                      </button>
+                    </div>
+                  </td>
                 </tr>
               ))
             )}
           </tbody>
         </table>
       </div>
+
+      {flowRun.status !== 'idle' && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-foreground">Output</span>
+            {flowRun.status !== 'running' && (
+              <button
+                onClick={flowRun.reset}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Close
+              </button>
+            )}
+          </div>
+          <StreamingTerminal lines={flowRun.lines} status={flowRun.status} error={flowRun.error} />
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={pendingAction !== null}
+        title={pendingAction?.title ?? ''}
+        commandPreview={pendingAction?.preview ?? ''}
+        onConfirm={handleConfirm}
+        onCancel={() => setPendingAction(null)}
+      />
     </div>
   )
 }

app/git/_components/git-repos-list.tsx

@@ -3,6 +3,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { type RepoStatus, parseGitStatus } from '@/lib/parse-git'
+import { useFlowRun } from '@/hooks/useFlowRun'
+import ConfirmDialog from '@/components/ConfirmDialog'
+import StreamingTerminal from '@/components/StreamingTerminal'
 
 interface RepoEntry {
   path: string
@@ -78,6 +81,13 @@ function statusBadge(status: RepoStatus) {
   )
 }
 
+type ActionDef = {
+  commandKey: string
+  args: string[]
+  preview: string
+  title: string
+}
+
 type Props = {
   initialRepos: RepoEntry[]
 }
@@ -86,6 +96,8 @@ export default function GitReposList({ initialRepos }: Props) {
   const [repos, setRepos] = useState<RepoEntry[]>(initialRepos)
   const [refreshing, setRefreshing] = useState(false)
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
+  const [pendingAction, setPendingAction] = useState<ActionDef | null>(null)
+  const flowRun = useFlowRun()
 
   const refresh = useCallback(async () => {
     setRefreshing(true)
@@ -112,6 +124,12 @@ export default function GitReposList({ initialRepos }: Props) {
     return () => clearInterval(id)
   }, [refresh])
 
+  const handleConfirm = useCallback(() => {
+    if (!pendingAction) return
+    flowRun.start(pendingAction.commandKey, pendingAction.args)
+    setPendingAction(null)
+  }, [pendingAction, flowRun.start])
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -137,6 +155,7 @@ export default function GitReposList({ initialRepos }: Props) {
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Ahead</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Path</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -173,11 +192,69 @@ export default function GitReposList({ initialRepos }: Props) {
                   )}
                 </td>
                 <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{r.path}</td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() =>
+                        setPendingAction({
+                          commandKey: 'git_fetch',
+                          args: [r.path],
+                          preview: `git fetch --quiet\n(in ${r.path})`,
+                          title: `Fetch ${r.name}`,
+                        })
+                      }
+                      disabled={flowRun.status === 'running'}
+                      className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
+                    >
+                      Fetch
+                    </button>
+                    <button
+                      onClick={() =>
+                        setPendingAction({
+                          commandKey: 'git_pull',
+                          args: [r.path],
+                          preview: `git pull --ff-only\n(in ${r.path})`,
+                          title: `Pull ${r.name}`,
+                        })
+                      }
+                      disabled={flowRun.status === 'running' || r.status?.dirty === true}
+                      title={r.status?.dirty ? 'Working tree is dirty — commit or stash changes first' : undefined}
+                      className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                      Pull
+                    </button>
+                  </div>
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
+
+      {flowRun.status !== 'idle' && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-foreground">Output</span>
+            {flowRun.status !== 'running' && (
+              <button
+                onClick={flowRun.reset}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Close
+              </button>
+            )}
+          </div>
+          <StreamingTerminal lines={flowRun.lines} status={flowRun.status} error={flowRun.error} />
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={pendingAction !== null}
+        title={pendingAction?.title ?? ''}
+        commandPreview={pendingAction?.preview ?? ''}
+        onConfirm={handleConfirm}
+        onCancel={() => setPendingAction(null)}
+      />
     </div>
   )
 }

app/systemd/_components/systemd-units-list.tsx

@@ -3,6 +3,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { parseSystemctlStatus, type UnitStatus, type ActiveState } from '@/lib/parse-systemd'
+import { useFlowRun } from '@/hooks/useFlowRun'
+import ConfirmDialog from '@/components/ConfirmDialog'
+import StreamingTerminal from '@/components/StreamingTerminal'
 
 interface UnitEntry {
   unit: string
@@ -84,6 +87,13 @@ function StatusBadge({ status }: { status: UnitStatus }) {
   )
 }
 
+type ActionDef = {
+  commandKey: string
+  args: string[]
+  preview: string
+  title: string
+}
+
 type Props = {
   initialUnits: UnitEntry[]
 }
@@ -92,6 +102,8 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
   const [units, setUnits] = useState<UnitEntry[]>(initialUnits)
   const [refreshing, setRefreshing] = useState(false)
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
+  const [pendingAction, setPendingAction] = useState<ActionDef | null>(null)
+  const flowRun = useFlowRun()
 
   const refresh = useCallback(async () => {
     setRefreshing(true)
@@ -118,6 +130,12 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
     return () => clearInterval(id)
   }, [refresh])
 
+  const handleConfirm = useCallback(() => {
+    if (!pendingAction) return
+    flowRun.start(pendingAction.commandKey, pendingAction.args)
+    setPendingAction(null)
+  }, [pendingAction, flowRun.start])
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -142,6 +160,7 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Description</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
               <th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -173,11 +192,52 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
                 <td className="px-4 py-3 text-xs text-muted-foreground">
                   {entry.status?.uptime || '—'}
                 </td>
+                <td className="px-4 py-3">
+                  <button
+                    onClick={() =>
+                      setPendingAction({
+                        commandKey: 'systemctl_restart',
+                        args: [entry.unit],
+                        preview: `sudo /usr/bin/systemctl restart ${entry.unit}`,
+                        title: `Restart ${entry.unit}`,
+                      })
+                    }
+                    disabled={flowRun.status === 'running'}
+                    className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
+                  >
+                    Restart
+                  </button>
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
+
+      {flowRun.status !== 'idle' && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-foreground">Output</span>
+            {flowRun.status !== 'running' && (
+              <button
+                onClick={flowRun.reset}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Close
+              </button>
+            )}
+          </div>
+          <StreamingTerminal lines={flowRun.lines} status={flowRun.status} error={flowRun.error} />
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={pendingAction !== null}
+        title={pendingAction?.title ?? ''}
+        commandPreview={pendingAction?.preview ?? ''}
+        onConfirm={handleConfirm}
+        onCancel={() => setPendingAction(null)}
+      />
     </div>
   )
 }