feat(docker): agent-client helper, Docker container list page

- lib/agent-client.ts: server-side execAgent() that calls the ops-agent
  directly via OPS_AGENT_URL/OPS_AGENT_SECRET and streams SSE output
- lib/parse-docker.ts: pure parser for fixed-width docker ps table output
- app/docker/page.tsx: server component that fetches initial container list
  and passes it to the client component
- app/docker/_components/docker-table.tsx: client component with 5s
  auto-refresh via useEffect, status badge, and Link to /docker/[name]
- app/docker/[name]/page.tsx: placeholder detail page (logs in Story 3)

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

app/docker/[name]/page.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { getCurrentUser } from '@/lib/session'
+
+export const dynamic = 'force-dynamic'
+
+type Props = {
+  params: Promise<{ name: string }>
+}
+
+export default async function DockerDetailPage({ params }: Props) {
+  const user = await getCurrentUser()
+  if (!user) redirect('/login')
+
+  const { name } = await params
+  const containerName = decodeURIComponent(name)
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-6xl space-y-6">
+        <div className="flex items-center gap-3">
+          <Link href="/docker" className="text-sm text-muted-foreground hover:text-foreground">
+            ← Containers
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <h1 className="text-2xl font-semibold tracking-tight font-mono">{containerName}</h1>
+        </div>
+        <div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">
+          Log viewer coming in Story 3.
+        </div>
+      </div>
+    </div>
+  )
+}

app/docker/_components/docker-table.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { type Container, parseDockerPs } from '@/lib/parse-docker'
+
+async function fetchContainers(): Promise<Container[]> {
+  const res = await fetch('/api/agent/exec', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ command_key: 'docker_ps' }),
+  })
+
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`agent ${res.status}: ${text}`)
+  }
+
+  const reader = res.body?.getReader()
+  if (!reader) throw new Error('no response body')
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let output = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() ?? ''
+
+    for (const line of lines) {
+      if (line.startsWith('data:')) {
+        try {
+          const parsed = JSON.parse(line.slice(5).trim()) as { data?: string }
+          if (parsed.data !== undefined) output += parsed.data
+        } catch {
+          // ignore malformed
+        }
+      }
+    }
+  }
+
+  return parseDockerPs(output)
+}
+
+function statusBadge(status: string) {
+  const up = status.toLowerCase().startsWith('up')
+  return (
+    <span
+      className={
+        'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ' +
+        (up
+          ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+          : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400')
+      }
+    >
+      <span
+        className={
+          'size-1.5 rounded-full ' +
+          (up ? 'bg-green-500 dark:bg-green-400' : 'bg-zinc-400 dark:bg-zinc-500')
+        }
+      />
+      {status}
+    </span>
+  )
+}
+
+type Props = {
+  initialContainers: Container[]
+  initialError: string | null
+}
+
+export default function DockerTable({ initialContainers, initialError }: Props) {
+  const [containers, setContainers] = useState<Container[]>(initialContainers)
+  const [error, setError] = useState<string | null>(initialError)
+  const [refreshing, setRefreshing] = useState(false)
+  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true)
+    try {
+      const data = await fetchContainers()
+      setContainers(data)
+      setError(null)
+      setLastUpdated(new Date())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'refresh failed')
+    } finally {
+      setRefreshing(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    const id = setInterval(refresh, 5000)
+    return () => clearInterval(id)
+  }, [refresh])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            {containers.length} container{containers.length !== 1 ? 's' : ''}
+          </span>
+          {refreshing && (
+            <span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
+          )}
+        </div>
+        <span className="text-xs text-muted-foreground">
+          updated {lastUpdated.toLocaleTimeString()}
+        </span>
+      </div>
+
+      {error && (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/50">
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Name</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Image</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">Ports</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
+            </tr>
+          </thead>
+          <tbody>
+            {containers.length === 0 && !error ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
+                  No containers running
+                </td>
+              </tr>
+            ) : (
+              containers.map((c) => (
+                <tr
+                  key={c.id}
+                  className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
+                >
+                  <td className="px-4 py-3 font-mono text-xs">
+                    <Link
+                      href={`/docker/${encodeURIComponent(c.name)}`}
+                      className="font-medium text-foreground hover:underline"
+                    >
+                      {c.name}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{c.image}</td>
+                  <td className="px-4 py-3">{statusBadge(c.status)}</td>
+                  <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                    {c.ports || '—'}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-muted-foreground">{c.created}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

app/docker/page.tsx

@@ -0,0 +1,34 @@
+import { redirect } from 'next/navigation'
+import { getCurrentUser } from '@/lib/session'
+import { execAgent } from '@/lib/agent-client'
+import { parseDockerPs, type Container } from '@/lib/parse-docker'
+import DockerTable from './_components/docker-table'
+
+export const dynamic = 'force-dynamic'
+
+export default async function DockerPage() {
+  const user = await getCurrentUser()
+  if (!user) redirect('/login')
+
+  let initialContainers: Container[] = []
+  let initialError: string | null = null
+
+  try {
+    const output = await execAgent('docker_ps')
+    initialContainers = parseDockerPs(output)
+  } catch (err) {
+    initialError = err instanceof Error ? err.message : 'Failed to fetch containers'
+  }
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-6xl space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Docker Containers</h1>
+          <p className="text-sm text-muted-foreground">Auto-refreshes every 5 seconds</p>
+        </div>
+        <DockerTable initialContainers={initialContainers} initialError={initialError} />
+      </div>
+    </div>
+  )
+}

lib/agent-client.ts

@@ -0,0 +1,58 @@
+import 'server-only'
+
+const AGENT_URL = process.env.OPS_AGENT_URL ?? 'http://127.0.0.1:3099'
+const AGENT_SECRET = process.env.OPS_AGENT_SECRET ?? ''
+
+export async function execAgent(
+  commandKey: string,
+  args: string[] = [],
+  onChunk?: (chunk: string) => void,
+): Promise<string> {
+  const response = await fetch(`${AGENT_URL}/agent/v1/exec`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${AGENT_SECRET}`,
+    },
+    body: JSON.stringify({ command_key: commandKey, args }),
+    cache: 'no-store',
+  })
+
+  if (!response.ok) {
+    const text = await response.text()
+    throw new Error(`agent error ${response.status}: ${text}`)
+  }
+
+  const reader = response.body?.getReader()
+  if (!reader) throw new Error('no response body')
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let output = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() ?? ''
+
+    for (const line of lines) {
+      if (line.startsWith('data:')) {
+        const jsonStr = line.slice(5).trim()
+        try {
+          const parsed = JSON.parse(jsonStr) as { data?: string }
+          if (parsed.data !== undefined) {
+            output += parsed.data
+            onChunk?.(parsed.data)
+          }
+        } catch {
+          // skip malformed SSE data
+        }
+      }
+    }
+  }
+
+  return output
+}

lib/parse-docker.ts

@@ -0,0 +1,40 @@
+export type Container = {
+  id: string
+  image: string
+  command: string
+  created: string
+  status: string
+  ports: string
+  name: string
+}
+
+// Parse the fixed-width table output of `docker ps --format table`
+export function parseDockerPs(output: string): Container[] {
+  const lines = output.trim().split('\n').filter(Boolean)
+  if (lines.length < 2) return []
+
+  const header = lines[0]
+
+  const COLS = ['CONTAINER ID', 'IMAGE', 'COMMAND', 'CREATED', 'STATUS', 'PORTS', 'NAMES'] as const
+  const positions = COLS.map((col) => header.indexOf(col))
+
+  // Must find at least NAMES (last) to produce useful output
+  if (positions[6] === -1) return []
+
+  const extract = (line: string, i: number): string => {
+    const start = positions[i]
+    if (start === -1) return ''
+    const nextIdx = positions.slice(i + 1).find((p) => p !== -1)
+    return line.slice(start, nextIdx).trim()
+  }
+
+  return lines.slice(1).map((line) => ({
+    id: extract(line, 0),
+    image: extract(line, 1),
+    command: extract(line, 2),
+    created: extract(line, 3),
+    status: extract(line, 4),
+    ports: extract(line, 5),
+    name: extract(line, 6),
+  }))
+}