dsh-plugin-container 0.0.0-stage → 0.3.0

package/src/client/tabs/console.jsx

@@ -0,0 +1,211 @@
+/** Command terminal: shell-free docker argv, live output, history, cancel. */
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import {
+  Button,
+  CopyButton,
+  Spinner,
+  cx,
+  formatDuration,
+  formatTime,
+} from '../components.jsx'
+import { IconTerminal, IconX } from '../icons.jsx'
+import { readHistory, writeHistory } from '../store.js'
+
+const QUICK_DOCKER = ['ps -a', 'images', 'volume ls', 'network ls', 'compose ls', 'system df', 'info', 'version']
+const QUICK_APPLE = ['ls -a', 'image ls', 'volume ls', 'network ls', 'system df', 'system version']
+const SENSITIVE = /(?:^|\s)(login|logout|--password(?:-stdin)?|--token|--registry-token)(?:\s|=|$)/u
+
+function statusLabel(t, status) {
+  if (status === 'running') return t('commandRunning')
+  if (status === 'cancelling') return t('stopping')
+  if (status === 'cancelled') return t('cancelled')
+  if (status === 'timed-out') return t('timedOut')
+  if (status === 'failed') return t('failed')
+  return t('commandFinished')
+}
+
+export default function ConsoleTab({ t, provider, runs, runState, context, status, cwd, onCwdChange, draft, setDraft, onRun }) {
+  const [history, setHistory] = useState(() => readHistory())
+  const [historyIndex, setHistoryIndex] = useState(-1)
+  const [now, setNow] = useState(() => Date.now())
+  const [stick, setStick] = useState(true)
+  const preRef = useRef(null)
+  const run = runState?.run ?? null
+  const active = run !== null && (run.status === 'running' || run.status === 'cancelling')
+  const output = runState?.stdout ?? ''
+  const stderr = runState?.stderr ?? ''
+  const combined = stderr === '' ? output : `${output}${output.endsWith('\n') || output === '' ? '' : '\n'}\n[stderr]\n${stderr}`
+  const hasOutput = combined.trim() !== ''
+  const runId = run?.id
+
+  useEffect(() => {
+    if (!active) return undefined
+    const timer = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(timer)
+  }, [active])
+
+  useEffect(() => {
+    if (runId !== undefined) setStick(true)
+  }, [runId])
+
+  useEffect(() => {
+    if (!stick) return
+    const element = preRef.current
+    if (element !== null) element.scrollTop = element.scrollHeight
+  }, [combined, stick, run?.status])
+
+  const addHistory = (command) => {
+    if (SENSITIVE.test(command)) return
+    setHistory((current) => {
+      const next = [command, ...current.filter((entry) => entry !== command)].slice(0, 50)
+      writeHistory(next)
+      return next
+    })
+  }
+
+  const submit = async (event) => {
+    event?.preventDefault()
+    const command = draft.trim()
+    if (command === '' || active) return
+    addHistory(command)
+    setHistoryIndex(-1)
+    await onRun({
+      command,
+      context: context ?? undefined,
+      cwd: cwd.trim() === '' ? undefined : cwd.trim(),
+      title: provider === 'apple-container' ? 'container' : 'docker',
+    })
+  }
+
+  const navigateHistory = (event) => {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+    if (history.length === 0) return
+    event.preventDefault()
+    if (event.key === 'ArrowUp') {
+      const next = historyIndex < 0 ? 0 : Math.min(historyIndex + 1, history.length - 1)
+      setHistoryIndex(next)
+      setDraft(history[next])
+    } else {
+      const next = historyIndex - 1
+      if (next < 0) {
+        setHistoryIndex(-1)
+        setDraft('')
+      } else {
+        setHistoryIndex(next)
+        setDraft(history[next])
+      }
+    }
+  }
+
+  const elapsed = run?.startedAt !== undefined ? (run.endedAt ?? (active ? now : run.endedAt)) - run.startedAt : undefined
+  const isApple = provider === 'apple-container'
+  const commandPrefix = isApple ? 'container' : 'docker'
+  const quick = useMemo(() => (isApple ? QUICK_APPLE : QUICK_DOCKER), [isApple])
+
+  return (
+    <div className="dsh-docker-console">
+      <form className="dsh-docker-console-form" onSubmit={submit}>
+        <div className="dsh-docker-console-row">
+          <span className="dsh-docker-console-prompt">$</span>
+          <input
+            className="dsh-docker-input dsh-docker-console-input"
+            value={draft}
+            onChange={(event) => {
+              setDraft(event.target.value)
+              setHistoryIndex(-1)
+            }}
+            onKeyDown={navigateHistory}
+            placeholder={isApple ? t('appleCommandPlaceholder') : t('commandPlaceholder')}
+            aria-label={isApple ? t('appleCommandPlaceholder') : t('commandPlaceholder')}
+            spellCheck="false"
+            autoCapitalize="off"
+            autoCorrect="off"
+          />
+          {active ? (
+            <Button type="button" variant="danger" onClick={() => runs.cancel()}><IconX size={13} /> {t('cancel')}</Button>
+          ) : (
+            <Button type="submit" variant="primary" disabled={draft.trim() === ''}><IconTerminal size={13} /> {t('run')}</Button>
+          )}
+        </div>
+        <div className="dsh-docker-console-meta">
+          <span className="dsh-docker-console-hint">{isApple ? t('providerLabel') : t('contextLabel')}: <span className="dsh-docker-mono">{isApple ? t('providerApple') : context ?? t('noContext')}</span></span>
+          <span className="dsh-docker-console-hint">·</span>
+          <span className="dsh-docker-console-hint">{t('cwd')}</span>
+          <input
+            className="dsh-docker-input dsh-docker-console-cwd"
+            value={cwd}
+            onChange={(event) => onCwdChange(event.target.value)}
+            placeholder={t('cwdPlaceholder')}
+            aria-label={t('cwd')}
+            spellCheck="false"
+          />
+          <span className="dsh-docker-console-hint dsh-docker-truncate">{t('shellHint')}</span>
+        </div>
+        <div className="dsh-docker-chip-row" style={{ alignItems: 'center' }}>
+          <span className="dsh-docker-console-hint">{t('quickCommands')}</span>
+          {quick.map((command) => (
+            <button key={command} type="button" className="dsh-docker-quick" onClick={() => setDraft(`${commandPrefix} ${command}`)}>
+              {command}
+            </button>
+          ))}
+          {history.length > 0 && (
+            <>
+              <span className="dsh-docker-console-hint" style={{ marginLeft: 4 }}>{t('history')}</span>
+              {history.slice(0, 4).map((command, index) => (
+                <button key={`${command}-${index}`} type="button" className="dsh-docker-quick" title={command} onClick={() => setDraft(command)}>
+                  {command.length > 28 ? `${command.slice(0, 28)}…` : command}
+                </button>
+              ))}
+              <Button size="sm" variant="ghost" onClick={() => { setHistory([]); writeHistory([]) }}>{t('resetHistory')}</Button>
+            </>
+          )}
+        </div>
+      </form>
+
+      <div className="dsh-docker-console-output">
+        <div className="dsh-docker-output-head">
+          <div className="dsh-docker-output-title">
+            <IconTerminal size={14} />
+            {run !== null ? <span className="dsh-docker-output-cmd" title={run.displayCommand}>{run.displayCommand}</span> : <span>{t('terminal')}</span>}
+          </div>
+          <div className="dsh-docker-output-actions">
+            {runState?.truncated === true && <span className="dsh-docker-chip">{t('truncation')}</span>}
+            <CopyButton text={combined} label={t('copy')} copiedLabel={t('copied')} className="dsh-docker-btn dsh-docker-sm" />
+            <Button size="sm" onClick={() => runs.reset()} disabled={run === null && !hasOutput}>{t('clear')}</Button>
+          </div>
+        </div>
+        {runState?.error !== undefined && runState?.error !== null && runState.error !== '' ? (
+          <pre className="dsh-docker-output-pre" style={{ color: 'var(--dsw-alias-label-error)' }}>{runState.error}</pre>
+        ) : (
+          <pre
+            ref={preRef}
+            className={cx('dsh-docker-output-pre', !hasOutput && 'dsh-docker-no-output')}
+            onScroll={() => {
+              const element = preRef.current
+              if (element === null) return
+              setStick(element.scrollHeight - element.scrollTop - element.clientHeight < 28)
+            }}
+          >
+            {hasOutput ? combined : t('noOutput')}
+          </pre>
+        )}
+        <div className="dsh-docker-run-status" data-status={run?.status ?? 'idle'}>
+          <span className="dsh-docker-dot" />
+          {run === null ? <span>{t('noActiveRun')}</span> : (
+            <>
+              <span>{statusLabel(t, run.status)}</span>
+              {run.exitCode !== null && run.exitCode !== undefined && <span>{t('exitCode')}: <span className="dsh-docker-mono">{run.exitCode}</span></span>}
+              {elapsed !== undefined && <span>{t('elapsed')}: <span className="dsh-docker-mono">{formatDuration(Math.max(0, elapsed))}</span></span>}
+              <span>{isApple ? t('providerLabel') : t('contextLabel')}: <span className="dsh-docker-mono">{isApple ? t('providerApple') : run.context ?? context ?? '—'}</span></span>
+              <span className="dsh-docker-muted">{formatTime(run.startedAt)}</span>
+              {active && <Spinner size={12} />}
+            </>
+          )}
+          <span style={{ flex: 1 }} />
+          <span className="dsh-docker-muted dsh-docker-mono">{isApple ? status?.runtime?.details?.status ?? '' : status?.context?.endpoint ?? ''}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/tabs/containers.jsx

@@ -0,0 +1,148 @@
+/** Containers tab with search, state filter, and per-row actions. */
+import { useMemo, useState } from 'react'
+
+import {
+  Button,
+  Chips,
+  EmptyState,
+  ErrorState,
+  IconButton,
+  LoadingSkeleton,
+  SearchInput,
+  StateLabel,
+} from '../components.jsx'
+import { useDockerList } from '../hooks.js'
+import { IconAlert, IconAttach, IconBox, IconExec, IconInfo, IconPlay, IconRestart, IconSparkles, IconStop, IconTerminal, IconTrash } from '../icons.jsx'
+
+export default function ContainersTab({ t, api, provider, context, status, refreshToken, features, onAction, onAttach, onRunContainer, onAskAI, canAskAI, onInspect }) {
+  const [all, setAll] = useState(true)
+  const [search, setSearch] = useState('')
+  const enabled = status?.daemon?.state === 'running'
+  const list = useDockerList(api, provider, 'containers', context, { all, refreshToken, enabled })
+  const items = list.data?.items ?? []
+  const filtered = useMemo(() => {
+    const needle = search.trim().toLowerCase()
+    if (needle === '') return items
+    return items.filter((item) =>
+      [item.name, item.image, item.id, item.status, item.ports.join(' ')]
+        .join(' ')
+        .toLowerCase()
+        .includes(needle),
+    )
+  }, [items, search])
+
+  const act = (action, item, focusConsole = false, follow = false) => {
+    onAction({ kind: 'container', action, id: item.id, follow }, { focusConsole })
+  }
+
+  return (
+    <div className="dsh-docker-stack">
+      <div className="dsh-docker-toolbar">
+        <div className="dsh-docker-toolbar-left">
+          <SearchInput value={search} onChange={setSearch} placeholder={t('search')} label={t('search')} />
+          <div className="dsh-docker-seg" role="group" aria-label={t('status')}>
+            <button type="button" aria-pressed={all} onClick={() => setAll(true)}>{t('all')}</button>
+            <button type="button" aria-pressed={!all} onClick={() => setAll(false)}>{t('running')}</button>
+          </div>
+        </div>
+        <div className="dsh-docker-toolbar-right">
+          <span className="dsh-docker-muted">{filtered.length} / {items.length}</span>
+          {features.includes('run') ? <Button size="sm" variant="primary" onClick={() => onRunContainer()}>{t('runContainer')}</Button> : <span className="dsh-docker-muted">{t('restartFeatures')}</span>}
+          <Button size="sm" onClick={list.reload} disabled={list.loading}>{t('refresh')}</Button>
+        </div>
+      </div>
+
+      {!enabled && items.length === 0 ? (
+        <EmptyState icon={<IconAlert size={20} />} title={provider === 'apple-container' ? t('appleSystemStopped') : t('daemonStopped')} text={provider === 'apple-container' ? t('appleSystemStoppedBody') : t('daemonStoppedBody')} />
+      ) : list.loading && list.data === null ? (
+        <LoadingSkeleton rows={6} />
+      ) : list.error !== null && list.data === null ? (
+        <ErrorState title={t('listFailed')} text={list.error.message} retryLabel={t('retry')} onRetry={list.reload} />
+      ) : filtered.length === 0 ? (
+        <EmptyState icon={<IconBox size={20} />} title={search === '' ? t('emptyContainers') : t('emptySearch')} text={search === '' ? undefined : search} />
+      ) : (
+        <section className="dsh-docker-card">
+          <div className="dsh-docker-table-wrap">
+            <table className="dsh-docker-table">
+              <thead>
+                <tr>
+                  <th>{t('name')}</th>
+                  <th>{t('image')}</th>
+                  <th>{t('status')}</th>
+                  <th>{t('ports')}</th>
+                  <th>{t('created')}</th>
+                  <th className="dsh-docker-col-actions">{t('actions')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map((item) => (
+                  <tr key={item.id}>
+                    <td>
+                      <button type="button" className="dsh-docker-row-title" style={{ border: 0, padding: 0, background: 'none', cursor: 'pointer', textAlign: 'left' }} onClick={() => onInspect('container', item.id)}>
+                        {item.name || item.id}
+                      </button>
+                      {item.id !== item.name && <div className="dsh-docker-mono dsh-docker-muted">{item.id}</div>}
+                    </td>
+                    <td className="dsh-docker-mono dsh-docker-truncate" title={item.image}>{item.image}</td>
+                    <td><StateLabel state={item.state} t={t} /></td>
+                    <td><Chips values={item.ports.slice(0, 2)} mono /></td>
+                    <td className="dsh-docker-muted">{item.runningFor || item.createdAt || '—'}</td>
+                    <td className="dsh-docker-col-actions">
+                      <span className="dsh-docker-row-actions">
+                        {item.state === 'running' ? (
+                          <IconButton size="sm" label={t('stopContainer')} onClick={() => act('stop', item)}>
+                            <IconStop size={14} />
+                          </IconButton>
+                        ) : (
+                          <IconButton size="sm" label={t('startContainer')} onClick={() => act('start', item)}>
+                            <IconPlay size={14} />
+                          </IconButton>
+                        )}
+                        {provider === 'docker' && (
+                          <IconButton size="sm" label={t('restartContainer')} onClick={() => act('restart', item)}>
+                            <IconRestart size={14} />
+                          </IconButton>
+                        )}
+                        {canAskAI && (
+                          <IconButton
+                            size="sm"
+                            label={item.state === 'running' ? t('askAi') : t('diagnose')}
+                            onClick={() => onAskAI(item, item.state === 'running' ? 'ask' : 'diagnose')}
+                          >
+                            <IconSparkles size={14} />
+                          </IconButton>
+                        )}
+                        {features.includes('exec') && item.state === 'running' && (
+                          <IconButton size="sm" label={t('exec')} onClick={() => onAttach(item, 'exec')}>
+                            <IconExec size={14} />
+                          </IconButton>
+                        )}
+                        {features.includes('attach') && item.state === 'running' && (
+                          <IconButton size="sm" label={t('attach')} onClick={() => onAttach(item)}>
+                            <IconAttach size={14} />
+                          </IconButton>
+                        )}
+                        <IconButton size="sm" label={t('logs')} onClick={() => act('logs', item, true)}>
+                          <IconTerminal size={14} />
+                        </IconButton>
+                        <IconButton size="sm" label={t('followLogs')} onClick={() => act('logs', item, true, true)}>
+                          <IconTerminal size={14} style={{ transform: 'scaleX(-1)' }} />
+                        </IconButton>
+                        <IconButton size="sm" label={t('inspect')} onClick={() => onInspect('container', item.id)}>
+                          <IconInfo size={14} />
+                        </IconButton>
+                        <IconButton size="sm" label={t('remove')} onClick={() => act('delete', item)}>
+                          <IconTrash size={14} />
+                        </IconButton>
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}

package/src/client/tabs/images.jsx

@@ -0,0 +1,127 @@
+/** Images tab with search, inspect/remove actions, and a pull form. */
+import { useMemo, useState } from 'react'
+
+import {
+  Button,
+  EmptyState,
+  ErrorState,
+  IconButton,
+  LoadingSkeleton,
+  SearchInput,
+  displayValue,
+  shortId,
+} from '../components.jsx'
+import { useDockerList } from '../hooks.js'
+import { IconAlert, IconImage, IconInfo, IconPlay, IconTrash, IconDownload } from '../icons.jsx'
+
+const IMAGE_REF = /^[A-Za-z0-9][A-Za-z0-9_.:/@-]*$/u
+
+export default function ImagesTab({ t, api, provider, context, status, refreshToken, features = [], onAction, onRunContainer, onInspect, onNotify }) {
+  const showArchitecture = features.includes('image-architecture')
+  const [search, setSearch] = useState('')
+  const [pull, setPull] = useState('')
+  const enabled = status?.daemon?.state === 'running'
+  const list = useDockerList(api, provider, 'images', context, { refreshToken, enabled })
+  const items = list.data?.items ?? []
+  const filtered = useMemo(() => {
+    const needle = search.trim().toLowerCase()
+    if (needle === '') return items
+    return items.filter((item) => `${item.name} ${item.id} ${item.repository} ${item.tag}`.toLowerCase().includes(needle))
+  }, [items, search])
+
+  const submitPull = (event) => {
+    event.preventDefault()
+    const reference = pull.trim()
+    if (!IMAGE_REF.test(reference)) {
+      onNotify('error', t('pullInvalid'))
+      return
+    }
+    setPull('')
+    onAction({ kind: 'image', action: 'pull', id: reference }, { focusConsole: true })
+  }
+
+  return (
+    <div className="dsh-docker-stack">
+      <div className="dsh-docker-toolbar">
+        <div className="dsh-docker-toolbar-left">
+          <SearchInput value={search} onChange={setSearch} placeholder={t('search')} label={t('search')} />
+          <form onSubmit={submitPull} className="dsh-docker-toolbar-left" style={{ gap: 6 }}>
+            <input
+              className="dsh-docker-input"
+              style={{ width: 200 }}
+              value={pull}
+              onChange={(event) => setPull(event.target.value)}
+              placeholder={t('pullPlaceholder')}
+              aria-label={t('pullPlaceholder')}
+              spellCheck="false"
+            />
+            <Button size="sm" type="submit" disabled={pull.trim() === ''}><IconDownload size={13} /> {t('pull')}</Button>
+          </form>
+        </div>
+        <div className="dsh-docker-toolbar-right">
+          <span className="dsh-docker-muted">{filtered.length} / {items.length}</span>
+          {!showArchitecture && <span className="dsh-docker-muted">{t('restartForArchitecture')}</span>}
+          <Button size="sm" onClick={list.reload} disabled={list.loading}>{t('refresh')}</Button>
+        </div>
+      </div>
+
+      {!enabled && items.length === 0 ? (
+        <EmptyState icon={<IconAlert size={20} />} title={provider === 'apple-container' ? t('appleSystemStopped') : t('daemonStopped')} text={provider === 'apple-container' ? t('appleSystemStoppedBody') : t('daemonStoppedBody')} />
+      ) : list.loading && list.data === null ? (
+        <LoadingSkeleton rows={6} />
+      ) : list.error !== null && list.data === null ? (
+        <ErrorState title={t('listFailed')} text={list.error.message} retryLabel={t('retry')} onRetry={list.reload} />
+      ) : filtered.length === 0 ? (
+        <EmptyState icon={<IconImage size={20} />} title={search === '' ? t('emptyImages') : t('emptySearch')} text={search === '' ? t('pullPlaceholder') : search} />
+      ) : (
+        <section className="dsh-docker-card">
+          <div className="dsh-docker-table-wrap">
+            <table className="dsh-docker-table">
+              <thead>
+                <tr>
+                  <th>{t('repository')}</th>
+                  <th>{t('tag')}</th>
+                  <th>{t('id')}</th>
+                  {showArchitecture && <th>{t('architecture')}</th>}
+                  <th className="dsh-docker-col-num">{t('size')}</th>
+                  <th>{t('createdSince')}</th>
+                  <th className="dsh-docker-col-actions">{t('actions')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map((item) => {
+                  const inspectId = provider === 'apple-container' ? item.name : item.id
+                  return (
+                  <tr key={`${item.id}-${item.name}`}>
+                    <td className="dsh-docker-mono dsh-docker-truncate" title={item.repository}>{item.repository}</td>
+                    <td className="dsh-docker-mono">{displayValue(item.tag)}</td>
+                    <td className="dsh-docker-mono dsh-docker-muted" title={item.id}>{shortId(item.id)}</td>
+                    {showArchitecture && <td className="dsh-docker-mono">{displayValue(item.architecture)}</td>}
+                    <td className="dsh-docker-col-num">{displayValue(item.size)}</td>
+                    <td className="dsh-docker-muted">{displayValue(item.createdSince)}</td>
+                    <td className="dsh-docker-col-actions">
+                      <span className="dsh-docker-row-actions">
+                        {features.includes('run') && item.name !== '<none>' && (
+                          <IconButton size="sm" label={t('runFromImage')} onClick={() => onRunContainer(item.name)}>
+                            <IconPlay size={14} />
+                          </IconButton>
+                        )}
+                        <IconButton size="sm" label={t('inspect')} onClick={() => onInspect('image', inspectId)}>
+                          <IconInfo size={14} />
+                        </IconButton>
+                        <IconButton size="sm" label={t('removeImage')} onClick={() => onAction({ kind: 'image', action: 'delete', id: inspectId })}>
+                          <IconTrash size={14} />
+                        </IconButton>
+                      </span>
+                    </td>
+                  </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}

package/src/client/tabs/networks.jsx

@@ -0,0 +1,91 @@
+/** Networks tab. */
+import { useMemo, useState } from 'react'
+
+import { Button, EmptyState, ErrorState, IconButton, LoadingSkeleton, SearchInput, displayValue } from '../components.jsx'
+import { useDockerList } from '../hooks.js'
+import { IconAlert, IconInfo, IconNetwork, IconTrash } from '../icons.jsx'
+
+const BUILTIN = new Set(['bridge', 'host', 'none'])
+
+export default function NetworksTab({ t, api, provider, context, status, refreshToken, onAction, onInspect }) {
+  const [search, setSearch] = useState('')
+  const enabled = status?.daemon?.state === 'running'
+  const list = useDockerList(api, provider, 'networks', context, { refreshToken, enabled })
+  const items = list.data?.items ?? []
+  const builtin = provider === 'apple-container' ? new Set(['default']) : BUILTIN
+  const filtered = useMemo(() => {
+    const needle = search.trim().toLowerCase()
+    return needle === '' ? items : items.filter((item) => `${item.name} ${item.driver} ${item.scope} ${item.id}`.toLowerCase().includes(needle))
+  }, [items, search])
+
+  return (
+    <div className="dsh-docker-stack">
+      <div className="dsh-docker-toolbar">
+        <div className="dsh-docker-toolbar-left">
+          <SearchInput value={search} onChange={setSearch} placeholder={t('search')} label={t('search')} />
+        </div>
+        <div className="dsh-docker-toolbar-right">
+          <span className="dsh-docker-muted">{filtered.length} / {items.length}</span>
+          <Button size="sm" onClick={list.reload} disabled={list.loading}>{t('refresh')}</Button>
+        </div>
+      </div>
+      {!enabled && items.length === 0 ? (
+        <EmptyState icon={<IconAlert size={20} />} title={provider === 'apple-container' ? t('appleSystemStopped') : t('daemonStopped')} text={provider === 'apple-container' ? t('appleSystemStoppedBody') : t('daemonStoppedBody')} />
+      ) : list.loading && list.data === null ? (
+        <LoadingSkeleton rows={5} />
+      ) : list.error !== null && list.data === null ? (
+        <ErrorState title={t('listFailed')} text={list.error.message} retryLabel={t('retry')} onRetry={list.reload} />
+      ) : filtered.length === 0 ? (
+        <EmptyState icon={<IconNetwork size={20} />} title={search === '' ? t('emptyNetworks') : t('emptySearch')} text={search === '' ? undefined : search} />
+      ) : (
+        <section className="dsh-docker-card">
+          <div className="dsh-docker-table-wrap">
+            <table className="dsh-docker-table">
+              <thead>
+                <tr>
+                  <th>{t('name')}</th>
+                  <th>{t('driver')}</th>
+                  <th>{t('scope')}</th>
+                  <th>IPv4</th>
+                  <th>IPv6</th>
+                  <th>{t('internal')}</th>
+                  <th className="dsh-docker-col-actions">{t('actions')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map((item) => (
+                  <tr key={item.id}>
+                    <td>
+                      <div className="dsh-docker-row-title">{item.name}</div>
+                      <div className="dsh-docker-mono dsh-docker-muted">{item.id}</div>
+                    </td>
+                    <td>{displayValue(item.driver)}</td>
+                    <td>{displayValue(item.scope)}</td>
+                    <td>{displayValue(item.ipv4)}</td>
+                    <td>{displayValue(item.ipv6)}</td>
+                    <td>{displayValue(item.internal)}</td>
+                    <td className="dsh-docker-col-actions">
+                      <span className="dsh-docker-row-actions">
+                        <IconButton size="sm" label={t('inspect')} onClick={() => onInspect('network', item.id)}>
+                          <IconInfo size={14} />
+                        </IconButton>
+                        <IconButton
+                          size="sm"
+                          label={t('removeNetwork')}
+                          disabled={builtin.has(item.name)}
+                          onClick={() => onAction({ kind: 'network', action: 'delete', id: item.name })}
+                        >
+                          <IconTrash size={14} />
+                        </IconButton>
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}