@swarmclawai/swarmclaw 1.8.0 → 1.8.1

package/src/components/connectors/connector-list.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import type { Connector } from '@/types'
+import { getConnectorReadiness, hasConnectorCredentials } from '@/lib/connectors/connector-readiness'
 import {
   ConnectorPlatformIcon,
   ConnectorPlatformBadge,
@@ -27,20 +28,10 @@ function relativeTime(ts: number): string {
 
 type ConnectorGroup = 'needs-setup' | 'attention' | 'healthy'
 
-function hasConnectorCredentials(connector: Connector): boolean {
-  return connector.platform === 'whatsapp'
-    || connector.platform === 'openclaw'
-    || connector.platform === 'signal'
-    || (connector.platform === 'bluebubbles' && (!!connector.credentialId || !!connector.config?.password))
-    || !!connector.credentialId
-}
-
 function getConnectorGroup(connector: Connector): ConnectorGroup {
-  const missingRoute = !connector.agentId && !connector.chatroomId
-  const needsSetup = !hasConnectorCredentials(connector) || !!connector.qrDataUrl || missingRoute
-  if (needsSetup) return 'needs-setup'
-  if (connector.status === 'running' && !connector.lastError) return 'healthy'
-  return 'attention'
+  const readiness = getConnectorReadiness(connector)
+  if (readiness.state === 'needs_setup') return 'needs-setup'
+  return readiness.state
 }
 
 export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
@@ -274,12 +265,14 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                     const isToggling = toggling === c.id
                     const hasCredentials = hasConnectorCredentials(c)
                     const lastMsg = c.presence?.lastMessageAt
-                    const missingRoute = !chatroom && !agent
-                    const issues = [
-                      !hasCredentials ? { label: 'Credentials missing', tone: 'text-red-400 bg-red-500/10' } : null,
-                      c.qrDataUrl ? { label: 'QR required', tone: 'text-amber-400 bg-amber-500/10' } : null,
-                      missingRoute ? { label: 'Routing missing', tone: 'text-amber-300 bg-amber-500/10' } : null,
-                    ].filter(Boolean) as Array<{ label: string; tone: string }>
+                    const readiness = getConnectorReadiness(c)
+                    const issues = readiness.checks
+                      .filter((check) => check.status !== 'ready')
+                      .map((check) => ({
+                        label: check.label,
+                        detail: check.detail,
+                        tone: check.status === 'error' ? 'text-red-400 bg-red-500/10' : 'text-amber-300 bg-amber-500/10',
+                      }))
 
                     return (
                       <div
@@ -359,7 +352,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                         {issues.length > 0 ? (
                           <div className="flex flex-wrap gap-1.5 mb-3">
                             {issues.map((issue) => (
-                              <span key={issue.label} className={`px-2 py-1 rounded-[7px] text-[10px] font-700 ${issue.tone}`}>
+                              <span key={issue.label} title={issue.detail} className={`px-2 py-1 rounded-[7px] text-[10px] font-700 ${issue.tone}`}>
                                 {issue.label}
                               </span>
                             ))}
@@ -370,6 +363,21 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                           </div>
                         )}
 
+                        <div className="mb-3 rounded-[10px] border border-white/[0.04] bg-white/[0.02] px-3 py-2">
+                          <div className="text-[10px] font-700 uppercase tracking-[0.08em] text-text-3/55">Readiness</div>
+                          <div className="mt-1 text-[11px] text-text-2">{readiness.summary}</div>
+                          <div className="mt-2 flex flex-col gap-1">
+                            {readiness.checks.slice(0, 3).map((check) => (
+                              <div key={check.id} className="flex items-start justify-between gap-2 text-[10px]">
+                                <span className="text-text-3/65">{check.label}</span>
+                                <span className={`max-w-[150px] break-words text-right ${check.status === 'ready' ? 'text-emerald-300' : check.status === 'error' ? 'text-red-300' : 'text-amber-300'}`}>
+                                  {check.detail}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
                         <div className="flex items-center gap-2 mt-auto pt-2 border-t border-white/[0.04]">
                           {c.lastError ? (
                             <span className="text-[10px] text-red-400 truncate flex-1">
@@ -382,6 +390,14 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                           )}
 
                           <div className="flex gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+                            <a
+                              href={readiness.doctorHref}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="px-2 py-1 rounded-[6px] text-[10px] font-600 transition-all opacity-0 group-hover:opacity-100 bg-white/[0.05] text-text-3 hover:bg-white/[0.08] hover:text-text-2"
+                            >
+                              Doctor
+                            </a>
                             {c.status === 'error' && hasCredentials && (
                               <button
                                 onClick={(e) => handleReconnect(e, c)}

package/src/components/evidence/evidence-shelf.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { ExternalLink, FileText } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { EvidenceArtifact } from '@/types'
+
+function formatKind(kind: EvidenceArtifact['kind']): string {
+  return kind.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ')
+}
+
+function formatTimestamp(at: number | null | undefined): string {
+  if (!at) return ''
+  return new Date(at).toLocaleString()
+}
+
+export function EvidenceShelf({
+  artifacts,
+  loading = false,
+  title = 'Evidence Shelf',
+  emptyLabel = 'No linked evidence yet.',
+  className,
+}: {
+  artifacts: EvidenceArtifact[]
+  loading?: boolean
+  title?: string
+  emptyLabel?: string
+  className?: string
+}) {
+  return (
+    <section className={cn('rounded-[12px] border border-white/[0.06] bg-white/[0.025] p-4', className)}>
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <div className="text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">{title}</div>
+          <div className="mt-1 text-[12px] text-text-3/65">{artifacts.length} linked artifact{artifacts.length === 1 ? '' : 's'}</div>
+        </div>
+      </div>
+      {loading ? (
+        <div className="rounded-[10px] border border-white/[0.05] bg-white/[0.02] px-3 py-3 text-[11px] text-text-3/60">
+          Loading evidence...
+        </div>
+      ) : artifacts.length === 0 ? (
+        <div className="rounded-[10px] border border-dashed border-white/[0.08] bg-white/[0.02] px-3 py-3 text-[11px] text-text-3/60">
+          {emptyLabel}
+        </div>
+      ) : (
+        <div className="flex max-h-[280px] flex-col gap-2 overflow-y-auto">
+          {artifacts.map((artifact) => {
+            const href = artifact.url || artifact.href || null
+            const content = (
+              <>
+                <span className="flex min-w-0 flex-1 items-start gap-2">
+                  <FileText size={14} className="mt-0.5 shrink-0 text-text-3/70" />
+                  <span className="min-w-0">
+                    <span className="flex flex-wrap items-center gap-2">
+                      <span className="truncate text-[12px] font-700 text-text">{artifact.title}</span>
+                      <span className="rounded-full bg-white/[0.05] px-2 py-0.5 text-[9px] font-800 uppercase tracking-[0.08em] text-text-3/70">
+                        {formatKind(artifact.kind)}
+                      </span>
+                    </span>
+                    {(artifact.description || artifact.preview) && (
+                      <span className="mt-1 line-clamp-2 block text-[11px] leading-relaxed text-text-3/68">
+                        {artifact.description || artifact.preview}
+                      </span>
+                    )}
+                    <span className="mt-1 block text-[10px] text-text-3/45">
+                      {artifact.source.label || artifact.source.id}
+                      {artifact.createdAt ? ` - ${formatTimestamp(artifact.createdAt)}` : ''}
+                    </span>
+                  </span>
+                </span>
+                {href && <ExternalLink size={13} className="mt-0.5 shrink-0 text-text-3/65" />}
+              </>
+            )
+            return href ? (
+              <a
+                key={`${artifact.kind}:${artifact.id}`}
+                href={href}
+                target={href.startsWith('/api/') || href.startsWith('http') ? '_blank' : undefined}
+                rel={href.startsWith('http') ? 'noreferrer' : undefined}
+                className="flex items-start gap-2 rounded-[10px] border border-white/[0.05] bg-white/[0.02] px-3 py-2.5 transition-colors hover:bg-white/[0.05]"
+              >
+                {content}
+              </a>
+            ) : (
+              <div
+                key={`${artifact.kind}:${artifact.id}`}
+                className="flex items-start gap-2 rounded-[10px] border border-white/[0.05] bg-white/[0.02] px-3 py-2.5"
+              >
+                {content}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/home/home-launchpad.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { OperationsPulsePanel } from '@/components/operations/operations-pulse-panel'
 import { LaunchActionCard } from '@/components/shared/launch-action-card'
 import type { Agent } from '@/types'
 
@@ -142,6 +143,8 @@ export function HomeLaunchpad({
         </div>
       </div>
 
+      <OperationsPulsePanel className="mt-6" compact />
+
       <div className="mt-6 grid gap-3 lg:grid-cols-3">
         <PathCard
           kicker="Self-hosted assistant"

package/src/components/operations/operations-pulse-panel.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { AlertTriangle, CheckCircle2, Clock, PlugZap, RefreshCw } from 'lucide-react'
+import { api } from '@/lib/app/api-client'
+import { cn } from '@/lib/utils'
+import type { OperationPulse, OperationPulseAction, OperationPulseRange, OperationPulseSeverity } from '@/types'
+
+const SEVERITY_CLASS: Record<OperationPulseSeverity, string> = {
+  high: 'border-rose-500/20 bg-rose-500/[0.06] text-rose-200',
+  medium: 'border-amber-500/20 bg-amber-500/[0.06] text-amber-200',
+  low: 'border-white/[0.06] bg-white/[0.025] text-text-2',
+}
+
+function formatRelative(at: number | null, generatedAt: number): string {
+  if (!at) return 'recent'
+  const diff = Math.max(0, generatedAt - at)
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.round(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.round(diff / 3_600_000)}h ago`
+  return `${Math.round(diff / 86_400_000)}d ago`
+}
+
+function kpiTone(value: number, danger = false): string {
+  if (value <= 0) return 'text-text'
+  return danger ? 'text-rose-300' : 'text-amber-300'
+}
+
+function Kpi({ label, value, danger = false }: { label: string; value: number; danger?: boolean }) {
+  return (
+    <div className="min-w-[110px] rounded-[12px] border border-white/[0.06] bg-white/[0.025] px-3 py-2">
+      <div className="text-[10px] font-700 uppercase tracking-[0.1em] text-text-3/55">{label}</div>
+      <div className={cn('mt-1 font-display text-[22px] font-700 tracking-normal', kpiTone(value, danger))}>{value}</div>
+    </div>
+  )
+}
+
+function actionIcon(action: OperationPulseAction) {
+  if (action.severity === 'high') return <AlertTriangle size={15} />
+  if (action.kind === 'connector') return <PlugZap size={15} />
+  if (action.kind === 'mission') return <Clock size={15} />
+  return <CheckCircle2 size={15} />
+}
+
+export function OperationsPulsePanel({
+  defaultRange = '24h',
+  className,
+  compact = false,
+}: {
+  defaultRange?: OperationPulseRange
+  className?: string
+  compact?: boolean
+}) {
+  const router = useRouter()
+  const [range, setRange] = useState<OperationPulseRange>(defaultRange)
+  const [pulse, setPulse] = useState<OperationPulse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const loadPulse = useCallback(async (nextRange = range, silent = false) => {
+    if (silent) setRefreshing(true)
+    else setLoading(true)
+    try {
+      const next = await api<OperationPulse>('GET', `/operations/pulse?range=${nextRange}`)
+      setPulse(next)
+    } catch {
+      setPulse(null)
+    } finally {
+      setLoading(false)
+      setRefreshing(false)
+    }
+  }, [range])
+
+  useEffect(() => {
+    void loadPulse(range)
+  }, [loadPulse, range])
+
+  const actions = pulse?.actions || []
+  const stable = useMemo(() => {
+    if (!pulse) return false
+    return pulse.kpis.failedRuns === 0
+      && pulse.kpis.pendingApprovals === 0
+      && pulse.kpis.connectorAttention === 0
+      && pulse.kpis.budgetWarnings === 0
+  }, [pulse])
+
+  return (
+    <section className={cn('rounded-[16px] border border-white/[0.06] bg-white/[0.025] p-4', className)}>
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <div className="text-[10px] font-700 uppercase tracking-[0.16em] text-accent-bright/70">Operations Pulse</div>
+          <h2 className="mt-1 font-display text-[16px] font-700 tracking-normal text-text">What needs operator attention next</h2>
+          <p className="mt-1 max-w-[680px] text-[12px] leading-relaxed text-text-3/68">
+            Missions, runs, approvals, connector readiness, and budget pressure rolled into one triage queue.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {(['24h', '7d'] as const).map((item) => (
+            <button
+              key={item}
+              type="button"
+              onClick={() => setRange(item)}
+              className={cn(
+                'rounded-[9px] px-2.5 py-1.5 text-[11px] font-700 transition-colors',
+                range === item ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.08] hover:text-text-2',
+              )}
+            >
+              {item}
+            </button>
+          ))}
+          <button
+            type="button"
+            onClick={() => void loadPulse(range, true)}
+            className="inline-flex items-center gap-1.5 rounded-[9px] border border-white/[0.08] bg-white/[0.04] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.08]"
+          >
+            <RefreshCw size={13} className={refreshing ? 'animate-spin' : ''} />
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="mt-4 rounded-[12px] border border-white/[0.05] bg-white/[0.02] px-3 py-4 text-[12px] text-text-3/60">
+          Loading pulse...
+        </div>
+      ) : !pulse ? (
+        <div className="mt-4 rounded-[12px] border border-rose-500/20 bg-rose-500/[0.06] px-3 py-3 text-[12px] text-rose-200">
+          Operations pulse is unavailable.
+        </div>
+      ) : (
+        <>
+          <div className={cn('mt-4 grid gap-2', compact ? 'grid-cols-2 md:grid-cols-3 xl:grid-cols-6' : 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6')}>
+            <Kpi label="Missions" value={pulse.kpis.activeMissions} />
+            <Kpi label="Running" value={pulse.kpis.runningRuns} />
+            <Kpi label="Failed" value={pulse.kpis.failedRuns} danger />
+            <Kpi label="Approvals" value={pulse.kpis.pendingApprovals} />
+            <Kpi label="Connectors" value={pulse.kpis.connectorAttention} danger />
+            <Kpi label="Budgets" value={pulse.kpis.budgetWarnings} />
+          </div>
+
+          <div className="mt-4">
+            {stable || actions.length === 0 ? (
+              <div className="rounded-[12px] border border-emerald-500/15 bg-emerald-500/[0.05] px-3 py-3 text-[12px] text-emerald-200">
+                No current blockers in the selected window.
+              </div>
+            ) : (
+              <div className="grid gap-2 lg:grid-cols-2">
+                {actions.map((action) => (
+                  <button
+                    key={action.id}
+                    type="button"
+                    onClick={() => router.push(action.href)}
+                    className={cn('rounded-[12px] border px-3 py-3 text-left transition-colors hover:bg-white/[0.06]', SEVERITY_CLASS[action.severity])}
+                  >
+                    <div className="flex items-start gap-2">
+                      <span className="mt-0.5 shrink-0">{actionIcon(action)}</span>
+                      <span className="min-w-0 flex-1">
+                        <span className="flex items-center justify-between gap-3">
+                          <span className="truncate text-[12px] font-800 text-text">{action.title}</span>
+                          <span className="shrink-0 text-[10px] text-text-3/55">{formatRelative(action.createdAt, pulse.generatedAt)}</span>
+                        </span>
+                        <span className="mt-1 line-clamp-2 block text-[12px] leading-relaxed text-text-3/72">{action.summary}</span>
+                        {action.evidence.length > 0 && (
+                          <span className="mt-2 flex flex-wrap gap-1.5">
+                            {action.evidence.slice(0, 2).map((item) => (
+                              <span key={item} className="rounded-full bg-white/[0.06] px-2 py-0.5 text-[10px] font-700 text-text-3/80">
+                                {item}
+                              </span>
+                            ))}
+                          </span>
+                        )}
+                      </span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </section>
+  )
+}

package/src/components/quality/quality-workspace.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { toast } from 'sonner'
 import { MainContent } from '@/components/layout/main-content'
+import { OperationsPulsePanel } from '@/components/operations/operations-pulse-panel'
 import { RunList } from '@/components/runs/run-list'
 import { PageLoader } from '@/components/ui/page-loader'
 import { useWs } from '@/hooks/use-ws'
@@ -310,6 +311,8 @@ export function QualityWorkspace() {
 
           {activeTab === 'overview' && (
             <div className="flex flex-col gap-6">
+              <OperationsPulsePanel defaultRange="7d" compact />
+
               <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                 <StatTile
                   label="Needs Attention"

package/src/components/runs/run-list.tsx

@@ -5,7 +5,8 @@ import { api } from '@/lib/app/api-client'
 import { useNow } from '@/hooks/use-now'
 import { useWs } from '@/hooks/use-ws'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
-import type { RunEventRecord, SessionRunRecord, SessionRunStatus } from '@/types'
+import { EvidenceShelf } from '@/components/evidence/evidence-shelf'
+import type { EvidenceArtifact, RunBrief, RunEventRecord, SessionRunRecord, SessionRunStatus } from '@/types'
 import { PageLoader } from '@/components/ui/page-loader'
 import { formatElapsed } from '@/lib/format-display'
 import { GroundingPanel } from '@/components/knowledge/grounding-panel'
@@ -41,7 +42,11 @@ export function RunList() {
   const [query, setQuery] = useState('')
   const [selected, setSelected] = useState<SessionRunRecord | null>(null)
   const [selectedEvents, setSelectedEvents] = useState<RunEventRecord[]>([])
+  const [selectedBrief, setSelectedBrief] = useState<RunBrief | null>(null)
+  const [selectedArtifacts, setSelectedArtifacts] = useState<EvidenceArtifact[]>([])
   const [eventsLoading, setEventsLoading] = useState(false)
+  const [briefLoading, setBriefLoading] = useState(false)
+  const [artifactsLoading, setArtifactsLoading] = useState(false)
 
   const fetchRuns = useCallback(async () => {
     try {
@@ -61,29 +66,42 @@ export function RunList() {
   useEffect(() => {
     if (!selected) return
     let cancelled = false
-    api<RunEventRecord[]>('GET', `/runs/${selected.id}/events?limit=200`)
-      .then((events) => {
-        if (cancelled) return
-        setSelectedEvents(Array.isArray(events) ? events : [])
-      })
-      .catch(() => {
-        if (!cancelled) setSelectedEvents([])
-      })
-      .finally(() => {
-        if (!cancelled) setEventsLoading(false)
-      })
+    void Promise.allSettled([
+      api<RunEventRecord[]>('GET', `/runs/${selected.id}/events?limit=200`),
+      api<RunBrief>('GET', `/runs/${selected.id}/brief`),
+      api<EvidenceArtifact[]>('GET', `/artifacts?runId=${encodeURIComponent(selected.id)}`),
+    ]).then(([eventsResult, briefResult, artifactsResult]) => {
+      if (cancelled) return
+      setSelectedEvents(eventsResult.status === 'fulfilled' && Array.isArray(eventsResult.value) ? eventsResult.value : [])
+      setSelectedBrief(briefResult.status === 'fulfilled' ? briefResult.value : null)
+      setSelectedArtifacts(artifactsResult.status === 'fulfilled' && Array.isArray(artifactsResult.value) ? artifactsResult.value : [])
+    }).finally(() => {
+      if (cancelled) return
+      setEventsLoading(false)
+      setBriefLoading(false)
+      setArtifactsLoading(false)
+    })
     return () => { cancelled = true }
   }, [selected])
 
   const closeSelected = useCallback(() => {
     setSelected(null)
     setSelectedEvents([])
+    setSelectedBrief(null)
+    setSelectedArtifacts([])
     setEventsLoading(false)
+    setBriefLoading(false)
+    setArtifactsLoading(false)
   }, [])
 
   const openSelected = useCallback((run: SessionRunRecord) => {
     setSelected(run)
+    setSelectedEvents([])
+    setSelectedBrief(null)
+    setSelectedArtifacts([])
     setEventsLoading(true)
+    setBriefLoading(true)
+    setArtifactsLoading(true)
   }, [])
 
   const sources = useMemo(() => {
@@ -242,6 +260,61 @@ export function RunList() {
               <p className="text-[12px] text-text-3/60 font-mono">{selected.id}</p>
             </div>
 
+            {/* Brief */}
+            <div className="mb-6">
+              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Brief</label>
+              {briefLoading ? (
+                <div className="rounded-[12px] border border-white/[0.04] bg-white/[0.02] p-4 text-[11px] text-text-3/60">
+                  Loading brief...
+                </div>
+              ) : selectedBrief ? (
+                <div className="rounded-[12px] border border-white/[0.05] bg-white/[0.025] p-4">
+                  <div className="text-[13px] font-700 text-text">{selectedBrief.title}</div>
+                  <p className="mt-1 text-[12px] leading-relaxed text-text-3/70">{selectedBrief.objective}</p>
+                  <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                    <div className="rounded-[10px] border border-white/[0.04] bg-white/[0.02] px-3 py-2">
+                      <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/55">Owner</div>
+                      <div className="mt-1 text-[11px] text-text-2">{selectedBrief.owner ? `${selectedBrief.owner.type}:${selectedBrief.owner.id}` : selectedBrief.source}</div>
+                    </div>
+                    <div className="rounded-[10px] border border-white/[0.04] bg-white/[0.02] px-3 py-2">
+                      <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/55">Usage</div>
+                      <div className="mt-1 text-[11px] text-text-2">
+                        {selectedBrief.usage.inputTokens ?? 0} in / {selectedBrief.usage.outputTokens ?? 0} out
+                        {selectedBrief.usage.estimatedCost != null ? ` - $${selectedBrief.usage.estimatedCost.toFixed(4)}` : ''}
+                      </div>
+                    </div>
+                  </div>
+                  {selectedBrief.warnings.length > 0 && (
+                    <div className="mt-3 flex flex-col gap-1.5">
+                      {selectedBrief.warnings.map((warning) => (
+                        <div key={warning} className="rounded-[9px] border border-amber-500/20 bg-amber-500/[0.06] px-3 py-2 text-[11px] text-amber-200">
+                          {warning}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {selectedBrief.timeline.length > 0 && (
+                    <div className="mt-3 flex flex-wrap gap-1.5">
+                      {selectedBrief.timeline.slice(0, 5).map((item, index) => (
+                        <span key={`${item.label}:${item.at}:${index}`} className="rounded-full bg-white/[0.05] px-2 py-1 text-[10px] font-700 text-text-3/80">
+                          {item.label} {new Date(item.at).toLocaleTimeString()}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {selectedBrief.evidence.length > 0 && (
+                    <div className="mt-3 text-[11px] text-text-3/65">
+                      {selectedBrief.evidence.length} brief evidence item{selectedBrief.evidence.length === 1 ? '' : 's'} found.
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="rounded-[12px] border border-white/[0.04] bg-white/[0.02] p-4 text-[11px] text-text-3/60">
+                  No brief available for this run.
+                </div>
+              )}
+            </div>
+
             {/* Timing */}
             <div className="mb-6 space-y-2">
               <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Timing</label>
@@ -308,6 +381,15 @@ export function RunList() {
               </div>
             )}
 
+            <div className="mb-6">
+              <EvidenceShelf
+                artifacts={selectedArtifacts}
+                loading={artifactsLoading}
+                title="Evidence Shelf"
+                emptyLabel="No linked artifacts, files, reports, or citations for this run."
+              />
+            </div>
+
             <div className="mb-2">
               <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Replay</label>
               <div className="rounded-[12px] border border-white/[0.04] bg-white/[0.02] max-h-[260px] overflow-auto">