@swarmclawai/swarmclaw 1.7.3 → 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'
 
@@ -73,6 +74,9 @@ type Props = {
   onReviewApprovals: () => void
   onInspectFailedRuns: () => void
   onStartReleaseQaMission: () => void
+  onStartLaunchSprintMission: () => void
+  onStartCostAuditMission: () => void
+  onStartConnectorSmokeMission: () => void
 }
 
 export function HomeLaunchpad({
@@ -92,12 +96,15 @@ export function HomeLaunchpad({
   onReviewApprovals,
   onInspectFailedRuns,
   onStartReleaseQaMission,
+  onStartLaunchSprintMission,
+  onStartCostAuditMission,
+  onStartConnectorSmokeMission,
 }: Props) {
   return (
     <div className="max-w-[980px] mx-auto px-6 py-10">
       <div className="rounded-[20px] border border-white/[0.06] bg-white/[0.025] p-6">
         <div className="inline-flex rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1 text-[11px] font-700 uppercase tracking-[0.16em] text-text-3/70">
-          v1.6 Launchpad
+          Mission Command
         </div>
         <div className="mt-4 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div className="max-w-[620px]">
@@ -136,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"
@@ -159,13 +168,54 @@ export function HomeLaunchpad({
           kicker="Autonomous mission"
           title="Run with budgets"
           description="Start a mission template for release QA, research, support triage, cost audit, or failed-run review with reports and caps."
-          primaryLabel="Open Missions"
+          primaryLabel="Release QA"
           secondaryLabel="Quality Center"
           onPrimary={onStartReleaseQaMission}
           onSecondary={onRunEvalSuite}
         />
       </div>
 
+      <div className="mt-6 rounded-[18px] border border-white/[0.06] bg-white/[0.025] p-4">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <div className="text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">Mission starters</div>
+            <p className="mt-1 max-w-[620px] text-[12px] leading-relaxed text-text-3/68">
+              Jump directly into the workflows that produce reusable evidence and shareable reports.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={onStartReleaseQaMission}
+              className="rounded-[10px] border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-[12px] font-display font-700 text-emerald-200 hover:bg-emerald-500/15"
+            >
+              Release QA
+            </button>
+            <button
+              type="button"
+              onClick={onStartLaunchSprintMission}
+              className="rounded-[10px] border border-white/[0.08] bg-white/[0.04] px-3 py-2 text-[12px] font-display font-700 text-text-2 hover:bg-white/[0.08]"
+            >
+              Launch Sprint
+            </button>
+            <button
+              type="button"
+              onClick={onStartCostAuditMission}
+              className="rounded-[10px] border border-white/[0.08] bg-white/[0.04] px-3 py-2 text-[12px] font-display font-700 text-text-2 hover:bg-white/[0.08]"
+            >
+              Cost Audit
+            </button>
+            <button
+              type="button"
+              onClick={onStartConnectorSmokeMission}
+              className="rounded-[10px] border border-white/[0.08] bg-white/[0.04] px-3 py-2 text-[12px] font-display font-700 text-text-2 hover:bg-white/[0.08]"
+            >
+              Connector Smoke
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div className="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
         <LaunchActionCard
           title={firstAgent ? 'Open First Agent Chat' : 'Open Agents'}

package/src/components/missions/mission-template-install-dialog.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
+import { api } from '@/lib/app/api-client'
 import { HintTip } from '@/components/shared/hint-tip'
 import { AdvancedSettingsSection } from '@/components/shared/advanced-settings-section'
 import { inputClass } from '@/components/shared/form-styles'
@@ -28,6 +29,7 @@ interface Props {
   sessions: Session[]
   onClose: () => void
   onInstall: (template: MissionTemplate, input: InstantiateInput) => Promise<void>
+  onSessionCreated?: (session: Session) => void
 }
 
 function formatDuration(sec: number | null | undefined): string {
@@ -48,7 +50,7 @@ function intOrNull(s: string): number | null {
   return n == null ? null : Math.round(n)
 }
 
-export function MissionTemplateInstallDialog({ template, sessions, onClose, onInstall }: Props) {
+export function MissionTemplateInstallDialog({ template, sessions, onClose, onInstall, onSessionCreated }: Props) {
   const [title, setTitle] = useState('')
   const [goal, setGoal] = useState('')
   const [criteriaText, setCriteriaText] = useState('')
@@ -134,6 +136,26 @@ export function MissionTemplateInstallDialog({ template, sessions, onClose, onIn
     }
   }
 
+  const createDriverSession = async () => {
+    if (!template) return
+    setBusy(true)
+    try {
+      const session = await api<Session>('POST', '/chats', {
+        name: `${template.name} mission driver`,
+        sessionType: 'human',
+        heartbeatEnabled: true,
+        heartbeatIntervalSec: 300,
+      })
+      setRootSessionId(session.id)
+      onSessionCreated?.(session)
+      toast.success('Mission driver chat created')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Unable to create mission driver chat')
+    } finally {
+      setBusy(false)
+    }
+  }
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
       <div
@@ -197,6 +219,16 @@ export function MissionTemplateInstallDialog({ template, sessions, onClose, onIn
                 </option>
               ))}
             </select>
+            {sessions.length === 0 && (
+              <button
+                type="button"
+                onClick={() => void createDriverSession()}
+                disabled={busy}
+                className="mt-2 self-start rounded-[10px] border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-[12px] font-700 text-emerald-200 hover:bg-emerald-500/15 disabled:opacity-40"
+              >
+                Create mission driver chat
+              </button>
+            )}
           </label>
         </div>
 

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

@@ -1,8 +1,10 @@
 'use client'
 
 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'
@@ -104,6 +106,8 @@ function EmptyState({ title, description }: { title: string; description: string
 }
 
 export function QualityWorkspace() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
   const agents = useAppStore((s) => s.agents)
   const agentOptions = useMemo(
     () => Object.values(agents).filter((agent) => !agent.trashedAt),
@@ -125,6 +129,20 @@ export function QualityWorkspace() {
   const [evalBusy, setEvalBusy] = useState<string | null>(null)
   const [approvalBusy, setApprovalBusy] = useState<string | null>(null)
 
+  useEffect(() => {
+    const tab = searchParams.get('tab') as QualityTab | null
+    if (tab && TABS.some((item) => item.id === tab)) setActiveTab(tab)
+  }, [searchParams])
+
+  const selectTab = useCallback((tab: QualityTab) => {
+    setActiveTab(tab)
+    router.replace(`/quality?tab=${tab}`, { scroll: false })
+  }, [router])
+
+  const openMissionTemplate = useCallback((templateId: string) => {
+    router.push(`/missions?template=${encodeURIComponent(templateId)}`)
+  }, [router])
+
   const loadQualityData = useCallback(async (opts: { silent?: boolean } = {}) => {
     if (opts.silent) setRefreshing(true)
     else setLoading(true)
@@ -278,7 +296,7 @@ export function QualityWorkspace() {
               <button
                 key={tab.id}
                 type="button"
-                onClick={() => setActiveTab(tab.id)}
+                onClick={() => selectTab(tab.id)}
                 className={cn(
                   'min-w-fit rounded-[9px] px-3 py-2 text-[12px] font-700 transition-colors',
                   activeTab === tab.id
@@ -293,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"
@@ -328,9 +348,10 @@ export function QualityWorkspace() {
                       <p className="mt-1 text-[12px] text-text-3/65">Shortest path to unblock operator review.</p>
                     </div>
                     <div className="flex flex-wrap gap-2">
-                      <button onClick={() => setActiveTab('evals')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Eval Lab</button>
-                      <button onClick={() => setActiveTab('approvals')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Approvals</button>
-                      <button onClick={() => setActiveTab('runs')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Runs</button>
+                      <button onClick={() => openMissionTemplate('release-candidate-qa')} className="rounded-[9px] border border-emerald-500/25 bg-emerald-500/10 px-2.5 py-1.5 text-[11px] font-700 text-emerald-200 hover:bg-emerald-500/15">Start QA Mission</button>
+                      <button onClick={() => selectTab('evals')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Eval Lab</button>
+                      <button onClick={() => selectTab('approvals')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Approvals</button>
+                      <button onClick={() => selectTab('runs')} className="rounded-[9px] border border-white/[0.08] px-2.5 py-1.5 text-[11px] font-700 text-text-2 hover:bg-white/[0.05]">Runs</button>
                     </div>
                   </div>
                   {runHealth.recentFailures.length === 0 && approvalGroups.totalPending === 0 && evalSummary.failedRuns === 0 ? (
@@ -340,7 +361,7 @@ export function QualityWorkspace() {
                       {runHealth.recentFailures.slice(0, 4).map((run) => (
                         <button
                           key={run.id}
-                          onClick={() => setActiveTab('runs')}
+                          onClick={() => selectTab('runs')}
                           className="rounded-[12px] border border-rose-500/20 bg-rose-500/[0.04] px-3 py-3 text-left transition-colors hover:bg-rose-500/[0.07]"
                         >
                           <div className="text-[11px] font-700 uppercase tracking-[0.1em] text-rose-300">Failed Run</div>
@@ -351,7 +372,7 @@ export function QualityWorkspace() {
                       {approvalGroups.categories.slice(0, 4).map((group) => (
                         <button
                           key={group.category}
-                          onClick={() => setActiveTab('approvals')}
+                          onClick={() => selectTab('approvals')}
                           className="rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] px-3 py-3 text-left transition-colors hover:bg-amber-500/[0.07]"
                         >
                           <div className="text-[11px] font-700 uppercase tracking-[0.1em] text-amber-300">Approval</div>
@@ -435,6 +456,13 @@ export function QualityWorkspace() {
                       </div>
                     </div>
                   )}
+                  <button
+                    type="button"
+                    onClick={() => openMissionTemplate('release-candidate-qa')}
+                    className="mt-3 w-full rounded-[10px] border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-[12px] font-800 text-emerald-200 transition-colors hover:bg-emerald-500/15"
+                  >
+                    Start Release QA Mission
+                  </button>
                   <button
                     type="button"
                     disabled={!selectedAgentId || !selectedScenarioId || !!evalBusy}