From 20c072b4c1d6f8f0f10ed82394fffedff2ba9da6 Mon Sep 17 00:00:00 2001
From: shankar-gpio <shankar@goplasmatic.io>
Date: Fri, 29 May 2026 11:33:42 +0530
Subject: [PATCH 1/2] Phase 4: command palette, empty states, console UX, brand
 pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Polish & power-user features (proposal.md §5.6/§5.7/§6/§7):

- Command palette (⌘K): accessible-Dialog-based palette with nav, action
  commands, and substring search across channels/workflows/connectors; global
  ⌘K/Ctrl-K listener in AppLayout; header search trigger.
- Empty states: shared EmptyState component (icon + explainer + CTA) replacing
  the bare "No X found" rows on channels/connectors/workflows/traces.
- Data Console: sample-payload seeding on channel pick, "Insert sample",
  in-memory request history with restore, and "open as trace" deep links.
- Accessibility: ConfirmDialog migrated onto the accessible Dialog primitive.
- Brand pass: Montserrat display font + --font-display token applied to
  headings/CardTitle; Orion mark SVG logo + favicon; shadow→border card
  surfaces; table density mode (context + provider + header toggle); neural
  glow on topology nodes; unified leftover red/emerald usages onto semantic
  destructive/chart-2 tokens (fixes light-only error blocks in dark mode).

Dark mode was already the default; no change needed there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 index.html                                |   4 +-
 public/orion-logo.svg                     |  24 +++
 src/app.tsx                               |   3 +
 src/components/graph/nodes.tsx            |  19 +-
 src/components/layout/app-layout.tsx      |  19 +-
 src/components/layout/header.tsx          |  24 ++-
 src/components/layout/sidebar.tsx         |   6 +-
 src/components/shared/command-palette.tsx | 222 ++++++++++++++++++++++
 src/components/shared/confirm-dialog.tsx  |  45 ++---
 src/components/shared/empty-state.tsx     |  30 +++
 src/components/shared/import-dialog.tsx   |   7 +-
 src/components/ui/card.tsx                |   4 +-
 src/components/ui/table.tsx               |  49 +++--
 src/index.css                             |   5 +
 src/lib/density-context.ts                |   8 +
 src/lib/density-provider.tsx              |  19 ++
 src/lib/use-density.ts                    |   8 +
 src/pages/channel-form.tsx                |   2 +-
 src/pages/channels.tsx                    |  21 +-
 src/pages/connector-form.tsx              |   2 +-
 src/pages/connectors.tsx                  |  28 ++-
 src/pages/console.tsx                     | 117 +++++++++++-
 src/pages/settings.tsx                    |   4 +-
 src/pages/traces.tsx                      |  16 +-
 src/pages/workflow-detail.tsx             |   4 +-
 src/pages/workflows.tsx                   |  16 +-
 26 files changed, 620 insertions(+), 86 deletions(-)
 create mode 100644 public/orion-logo.svg
 create mode 100644 src/components/shared/command-palette.tsx
 create mode 100644 src/components/shared/empty-state.tsx
 create mode 100644 src/lib/density-context.ts
 create mode 100644 src/lib/density-provider.tsx
 create mode 100644 src/lib/use-density.ts
diff --git a/index.html b/index.html
index 0beabc2..d452110 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,12 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/plasmatic-logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/orion-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Orion — Plasmatic</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet" />
     <script>
       // Prevent flash: apply stored theme before first paint
       (function() {
diff --git a/public/orion-logo.svg b/public/orion-logo.svg
new file mode 100644
index 0000000..edd9d3c
--- /dev/null
+++ b/public/orion-logo.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <style>
+      .cls-1 { fill: #4cbd97; }
+      .cls-2 { fill: #063b4c; }
+      .cls-3 { fill: #ef476f; }
+      .cls-4 { fill: #119fcd; }
+      .cls-5 { fill: #ffd167; }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M65.3,122.4v-5.03l-4.36-2.51-15.53,8.96c1.28,2.62,2.73,5.14,4.36,7.54l15.53-8.96h0Z"/>
+    <path class="cls-4" d="M39.21,92.25c-.09,1.34-.15,2.7-.15,4.06,0,2.05.11,4.08.3,6.09l25.93,14.97v-10.06l-26.08-15.06Z"/>
+    <path class="cls-4" d="M74.01,117.37v5.03l53.69,31c3.1-1.41,6.07-3.06,8.88-4.93l-58.21-33.61-4.36,2.52Z"/>
+    <path class="cls-1" d="M138.24,75.25l4.36,2.52,15.53-8.96c-1.28-2.62-2.73-5.14-4.36-7.54l-15.53,8.96v5.03Z"/>
+    <path class="cls-5" d="M164.17,90.23l-21.57-12.46h0s-8.71,5.03-8.71,5.03l30.44,17.57c.09-1.34.15-2.7.15-4.06,0-2.05-.11-4.08-.3-6.09Z"/>
+    <path class="cls-2" d="M74.01,82.47l-8.71-5.03v69.86c2.75,1.97,5.66,3.73,8.71,5.24v-70.06Z"/>
+    <polygon class="cls-2" points="74.01 117.37 74.01 107.31 125.18 77.77 133.89 82.8 74.01 117.37"/>
+    <path class="cls-2" d="M129.53,70.22l-53.66-31.01c-3.1,1.41-6.07,3.05-8.88,4.93l58.19,33.63,8.67,5.01.03.02,8.71-5.03-13.07-7.55Z"/>
+    <polygon class="cls-3" points="133.89 82.8 133.89 82.8 129.53 85.32 129.53 114.54 138.24 119.58 138.24 85.32 133.89 82.8 133.89 82.8"/>
+    <path class="cls-3" d="M129.53,40.09v30.13l8.71,5.03v-29.93c-2.75-1.97-5.66-3.73-8.71-5.24Z"/>
+  </g>
+</svg>
diff --git a/src/app.tsx b/src/app.tsx
index a71641c..9599380 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Toaster } from "sonner"
 import { ThemeProvider } from "@/lib/theme-provider"
 import { useTheme } from "@/lib/use-theme"
+import { DensityProvider } from "@/lib/density-provider"
 import { AppLayout } from "@/components/layout/app-layout"
 import { OperationsPage } from "@/pages/operations"
 import { SystemMapPage } from "@/pages/system-map"
@@ -39,6 +40,7 @@ function ThemedToaster() {
 export default function App() {
   return (
     <ThemeProvider>
+      <DensityProvider>
       <QueryClientProvider client={queryClient}>
         <ThemedToaster />
         <BrowserRouter>
@@ -66,6 +68,7 @@ export default function App() {
           </Routes>
         </BrowserRouter>
       </QueryClientProvider>
+      </DensityProvider>
     </ThemeProvider>
   )
 }
diff --git a/src/components/graph/nodes.tsx b/src/components/graph/nodes.tsx
index cba0a50..d8f84f0 100644
--- a/src/components/graph/nodes.tsx
+++ b/src/components/graph/nodes.tsx
@@ -20,6 +20,22 @@ function accentDot(topo: TopoNode): string {
   }
 }
 
+// Soft neural-style glow keyed to the node's health, reinforcing the
+// "nervous system" brand metaphor for the topology canvas.
+function glow(topo: TopoNode): string {
+  if (topo.unresolved) return ""
+  if (topo.kind === "connector")
+    return topo.enabled ? "shadow-[0_0_18px_-6px_rgba(76,189,151,0.7)]" : ""
+  switch (topo.status) {
+    case "active":
+      return "shadow-[0_0_18px_-6px_rgba(76,189,151,0.7)]"
+    case "draft":
+      return "shadow-[0_0_18px_-6px_rgba(17,159,205,0.7)]"
+    default:
+      return ""
+  }
+}
+
 const ICON = { channel: Radio, workflow: GitBranch, connector: Plug }
 
 function BaseNode({ topo }: { topo: TopoNode }) {
@@ -27,7 +43,8 @@ function BaseNode({ topo }: { topo: TopoNode }) {
   return (
     <div
       className={cn(
-        "flex min-w-[150px] items-center gap-2 rounded-md border bg-card px-3 py-2 shadow-sm",
+        "flex min-w-[150px] items-center gap-2 rounded-md border bg-card px-3 py-2 transition-shadow",
+        glow(topo),
         topo.unresolved && "border-dashed text-muted-foreground",
       )}
     >
diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx
index 9104756..e125ec1 100644
--- a/src/components/layout/app-layout.tsx
+++ b/src/components/layout/app-layout.tsx
@@ -1,17 +1,34 @@
+import { useEffect, useState } from "react"
 import { Outlet } from "react-router"
 import { Sidebar } from "./sidebar"
 import { Header } from "./header"
+import { CommandPalette } from "@/components/shared/command-palette"
 
 export function AppLayout() {
+  const [paletteOpen, setPaletteOpen] = useState(false)
+
+  // Global ⌘K / Ctrl-K to open the command palette.
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault()
+        setPaletteOpen((o) => !o)
+      }
+    }
+    window.addEventListener("keydown", handler)
+    return () => window.removeEventListener("keydown", handler)
+  }, [])
+
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
-        <Header />
+        <Header onOpenSearch={() => setPaletteOpen(true)} />
         <main className="flex-1 overflow-auto p-6">
           <Outlet />
         </main>
       </div>
+      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
     </div>
   )
 }
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index ce20a1b..66bda0e 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,18 +1,36 @@
 import { useHealth } from "@/hooks/use-health"
 import { useTheme } from "@/lib/use-theme"
+import { useDensity } from "@/lib/use-density"
 import { cn } from "@/lib/utils"
-import { Activity, Moon, Sun } from "lucide-react"
+import { Activity, Moon, Rows2, Rows3, Search, Sun } from "lucide-react"
 
-export function Header() {
+export function Header({ onOpenSearch }: { onOpenSearch: () => void }) {
   const { data: health } = useHealth()
   const { resolvedTheme, setTheme } = useTheme()
+  const { compact, setCompact } = useDensity()
 
   const isHealthy = health?.status === "ok"
 
   return (
     <header className="flex h-14 items-center justify-between border-b bg-card px-6">
-      <div />
+      <button
+        onClick={onOpenSearch}
+        className="inline-flex h-8 w-64 items-center gap-2 rounded-md border border-input bg-background/50 px-3 text-sm text-muted-foreground transition-colors hover:border-chart-2/40 hover:text-foreground"
+        aria-label="Open command palette"
+      >
+        <Search className="h-3.5 w-3.5" />
+        <span className="flex-1 text-left">Search…</span>
+        <kbd className="rounded border bg-muted px-1.5 font-mono text-[10px]">⌘K</kbd>
+      </button>
       <div className="flex items-center gap-3">
+        <button
+          onClick={() => setCompact(!compact)}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          aria-label={compact ? "Switch to comfortable density" : "Switch to compact density"}
+          title={compact ? "Comfortable density" : "Compact density"}
+        >
+          {compact ? <Rows2 className="h-4 w-4" /> : <Rows3 className="h-4 w-4" />}
+        </button>
         <button
           onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
           className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index d839591..bcd4628 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -51,11 +51,11 @@ export function Sidebar() {
         className="flex h-14 items-center gap-2.5 border-b border-sidebar-border px-4 transition-colors hover:bg-sidebar-accent/50"
       >
         <img
-          src="/plasmatic-logo.png"
-          alt="Plasmatic"
+          src="/orion-logo.svg"
+          alt="Orion"
           className="h-7 w-7"
         />
-        <span className="text-lg font-semibold tracking-tight text-sidebar-foreground">
+        <span className="font-display text-lg font-bold tracking-tight text-sidebar-foreground">
           Orion
         </span>
       </NavLink>
diff --git a/src/components/shared/command-palette.tsx b/src/components/shared/command-palette.tsx
new file mode 100644
index 0000000..700ec3b
--- /dev/null
+++ b/src/components/shared/command-palette.tsx
@@ -0,0 +1,222 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useNavigate } from "react-router"
+import { useChannels } from "@/hooks/use-channels"
+import { useWorkflows } from "@/hooks/use-workflows"
+import { useConnectors } from "@/hooks/use-connectors"
+import { useTheme } from "@/lib/use-theme"
+import { Dialog } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+import {
+  Search,
+  Gauge,
+  Network,
+  Radio,
+  GitBranch,
+  Plug,
+  Activity,
+  ZapOff,
+  FileText,
+  Terminal,
+  Settings,
+  Plus,
+  Upload,
+  SunMoon,
+  type LucideIcon,
+} from "lucide-react"
+
+interface Command {
+  id: string
+  label: string
+  hint?: string
+  group: string
+  icon: LucideIcon
+  keywords?: string
+  run: () => void
+}
+
+interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+}
+
+/**
+ * ⌘K command palette built on the accessible Dialog. Offers quick navigation,
+ * common actions, and fuzzy-ish substring search across channels, workflows, and
+ * connectors (fetched only while open).
+ */
+export function CommandPalette({ open, onClose }: CommandPaletteProps) {
+  const navigate = useNavigate()
+  const { resolvedTheme, setTheme } = useTheme()
+  const [query, setQuery] = useState("")
+  const [active, setActive] = useState(0)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const { data: channels } = useChannels(open ? { limit: 200 } : {})
+  const { data: workflows } = useWorkflows(open ? { limit: 200 } : {})
+  const { data: connectors } = useConnectors(open ? { limit: 200 } : {})
+
+  // Reset transient state whenever the palette opens.
+  useEffect(() => {
+    if (open) {
+      setQuery("")
+      setActive(0)
+    }
+  }, [open])
+
+  const go = (to: string) => {
+    navigate(to)
+    onClose()
+  }
+
+  const commands = useMemo<Command[]>(() => {
+    const nav: Command[] = [
+      { id: "nav-ops", label: "Operations", group: "Go to", icon: Gauge, run: () => go("/") },
+      { id: "nav-map", label: "System Map", group: "Go to", icon: Network, run: () => go("/system-map") },
+      { id: "nav-channels", label: "Channels", group: "Go to", icon: Radio, run: () => go("/channels") },
+      { id: "nav-workflows", label: "Workflows", group: "Go to", icon: GitBranch, run: () => go("/workflows") },
+      { id: "nav-connectors", label: "Connectors", group: "Go to", icon: Plug, run: () => go("/connectors") },
+      { id: "nav-traces", label: "Traces", group: "Go to", icon: Activity, run: () => go("/traces") },
+      { id: "nav-breakers", label: "Circuit Breakers", group: "Go to", icon: ZapOff, run: () => go("/circuit-breakers") },
+      { id: "nav-audit", label: "Audit Log", group: "Go to", icon: FileText, run: () => go("/audit") },
+      { id: "nav-console", label: "Data Console", group: "Go to", icon: Terminal, run: () => go("/console") },
+      { id: "nav-settings", label: "Settings", group: "Go to", icon: Settings, run: () => go("/settings") },
+    ]
+
+    const actions: Command[] = [
+      { id: "act-new-channel", label: "Create channel", group: "Actions", icon: Plus, run: () => go("/channels/new") },
+      { id: "act-new-connector", label: "Create connector", group: "Actions", icon: Plus, run: () => go("/connectors/new") },
+      { id: "act-import-workflow", label: "Import workflow", group: "Actions", icon: Upload, run: () => go("/workflows") },
+      {
+        id: "act-theme",
+        label: `Switch to ${resolvedTheme === "dark" ? "light" : "dark"} theme`,
+        group: "Actions",
+        icon: SunMoon,
+        keywords: "theme dark light mode",
+        run: () => {
+          setTheme(resolvedTheme === "dark" ? "light" : "dark")
+          onClose()
+        },
+      },
+    ]
+
+    const entities: Command[] = [
+      ...(channels?.data ?? []).map((c) => ({
+        id: `ch-${c.channel_id}`,
+        label: c.name,
+        hint: "channel",
+        group: "Channels",
+        icon: Radio,
+        keywords: c.route_pattern ?? "",
+        run: () => go(`/channels/${c.channel_id}`),
+      })),
+      ...(workflows?.data ?? []).map((w) => ({
+        id: `wf-${w.workflow_id}`,
+        label: w.name,
+        hint: "workflow",
+        group: "Workflows",
+        icon: GitBranch,
+        keywords: (w.tags ?? []).join(" "),
+        run: () => go(`/workflows/${w.workflow_id}`),
+      })),
+      ...(connectors?.data ?? []).map((c) => ({
+        id: `co-${c.id}`,
+        label: c.name,
+        hint: c.connector_type,
+        group: "Connectors",
+        icon: Plug,
+        run: () => go(`/connectors/${c.id}`),
+      })),
+    ]
+
+    return [...nav, ...actions, ...entities]
+  }, [channels, workflows, connectors, resolvedTheme]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return commands
+    return commands.filter((c) =>
+      `${c.label} ${c.group} ${c.hint ?? ""} ${c.keywords ?? ""}`.toLowerCase().includes(q)
+    )
+  }, [commands, query])
+
+  // Keep the active index in range as the filtered set shrinks.
+  useEffect(() => {
+    setActive((a) => Math.min(a, Math.max(0, filtered.length - 1)))
+  }, [filtered.length])
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      setActive((a) => Math.min(a + 1, filtered.length - 1))
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      setActive((a) => Math.max(a - 1, 0))
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      filtered[active]?.run()
+    }
+  }
+
+  // Group consecutive results by their group label for section headers.
+  const groups: { group: string; items: Command[] }[] = []
+  filtered.forEach((c) => {
+    const last = groups[groups.length - 1]
+    if (last && last.group === c.group) last.items.push(c)
+    else groups.push({ group: c.group, items: [c] })
+  })
+
+  let flatIndex = -1
+
+  return (
+    <Dialog open={open} onClose={onClose} className="max-w-xl" aria-label="Command palette">
+      <div className="flex items-center gap-2 border-b px-4">
+        <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <input
+          autoFocus
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder="Search or jump to…"
+          className="h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+        />
+      </div>
+      <div ref={listRef} className="max-h-[60vh] overflow-y-auto p-2">
+        {filtered.length === 0 ? (
+          <p className="px-2 py-8 text-center text-sm text-muted-foreground">No results</p>
+        ) : (
+          groups.map((g) => (
+            <div key={g.group} className="mb-1">
+              <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+                {g.group}
+              </p>
+              {g.items.map((c) => {
+                flatIndex++
+                const idx = flatIndex
+                return (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => c.run()}
+                    onMouseMove={() => setActive(idx)}
+                    className={cn(
+                      "flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
+                      idx === active ? "bg-accent text-accent-foreground" : "text-foreground"
+                    )}
+                  >
+                    <c.icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <span className="flex-1 truncate">{c.label}</span>
+                    {c.hint && (
+                      <span className="shrink-0 text-xs uppercase tracking-wide text-muted-foreground/60">
+                        {c.hint}
+                      </span>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ))
+        )}
+      </div>
+    </Dialog>
+  )
+}
diff --git a/src/components/shared/confirm-dialog.tsx b/src/components/shared/confirm-dialog.tsx
index a1385b9..44c6c86 100644
--- a/src/components/shared/confirm-dialog.tsx
+++ b/src/components/shared/confirm-dialog.tsx
@@ -1,5 +1,11 @@
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogFooter,
+} from "@/components/ui/dialog"
 
 interface ConfirmDialogProps {
   title: string
@@ -17,26 +23,21 @@ export function ConfirmDialog({
   destructive,
 }: ConfirmDialogProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>{title}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-muted-foreground">{description}</p>
-        </CardContent>
-        <CardFooter className="justify-end gap-2">
-          <Button variant="outline" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button
-            variant={destructive ? "destructive" : "default"}
-            onClick={onConfirm}
-          >
-            Confirm
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
+    <Dialog open onClose={onCancel} className="max-w-md" aria-label={title}>
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant={destructive ? "destructive" : "default"} onClick={onConfirm}>
+          Confirm
+        </Button>
+      </DialogFooter>
+    </Dialog>
   )
 }
diff --git a/src/components/shared/empty-state.tsx b/src/components/shared/empty-state.tsx
new file mode 100644
index 0000000..bf08481
--- /dev/null
+++ b/src/components/shared/empty-state.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react"
+import type { LucideIcon } from "lucide-react"
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description?: string
+  action?: ReactNode
+}
+
+/**
+ * Teaching empty state: an icon, a one-line explanation of the primitive, and the
+ * primary call-to-action. Used in list pages in place of bare "No X found" rows.
+ */
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center gap-3 px-6 py-12 text-center">
+      <div className="rounded-full bg-muted p-3 text-muted-foreground">
+        <Icon className="h-6 w-6" />
+      </div>
+      <div className="space-y-1">
+        <p className="font-medium">{title}</p>
+        {description && (
+          <p className="mx-auto max-w-sm text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {action && <div className="mt-1 flex items-center gap-2">{action}</div>}
+    </div>
+  )
+}
diff --git a/src/components/shared/import-dialog.tsx b/src/components/shared/import-dialog.tsx
index beab22a..65f6842 100644
--- a/src/components/shared/import-dialog.tsx
+++ b/src/components/shared/import-dialog.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button"
 import { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "@/components/ui/dialog"
 import { Textarea } from "@/components/ui/textarea"
 import { Badge } from "@/components/ui/badge"
+import { enabledBadgeClass } from "@/lib/status"
 import type { ImportResult } from "@/api/types"
 
 interface ImportDialogProps {
@@ -60,7 +61,7 @@ export function ImportDialog({ title, onImport, onClose }: ImportDialogProps) {
           />
 
           {error && (
-            <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
               {error}
             </div>
           )}
@@ -70,12 +71,12 @@ export function ImportDialog({ title, onImport, onClose }: ImportDialogProps) {
               <div className="flex flex-wrap items-center gap-2">
                 {result.dry_run && <Badge variant="secondary">Dry run</Badge>}
                 {result.would_create !== undefined && (
-                  <Badge variant="outline" className="border-emerald-200 text-emerald-700">
+                  <Badge variant="outline" className={enabledBadgeClass}>
                     {result.would_create} would create
                   </Badge>
                 )}
                 {!result.dry_run && (
-                  <Badge variant="outline" className="border-emerald-200 text-emerald-700">
+                  <Badge variant="outline" className={enabledBadgeClass}>
                     {result.imported} imported
                   </Badge>
                 )}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index cabfbfc..9715c72 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground transition-colors",
       className
     )}
     {...props}
@@ -35,7 +35,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn("font-display font-semibold leading-none tracking-tight", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index c0df655..96e0992 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { useDensity } from "@/lib/use-density"
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -69,31 +70,39 @@ TableRow.displayName = "TableRow"
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  const { compact } = useDensity()
+  return (
+    <th
+      ref={ref}
+      className={cn(
+        "px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        compact ? "h-8" : "h-10",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  const { compact } = useDensity()
+  return (
+    <td
+      ref={ref}
+      className={cn(
+        "align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        compact ? "px-2 py-1" : "p-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
diff --git a/src/index.css b/src/index.css
index db67da8..6cf6a63 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,6 +42,7 @@
   --radius-xl: calc(var(--radius) + 4px);
   --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
   --font-mono: "DM Mono", "Fira Code", monospace;
+  --font-display: "Montserrat", "DM Sans", system-ui, sans-serif;
 }
 
 /* Light theme */
@@ -124,4 +125,8 @@
   body {
     @apply bg-background text-foreground;
   }
+  h1, h2, h3 {
+    font-family: var(--font-display);
+    letter-spacing: -0.01em;
+  }
 }
diff --git a/src/lib/density-context.ts b/src/lib/density-context.ts
new file mode 100644
index 0000000..3b0db75
--- /dev/null
+++ b/src/lib/density-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react"
+
+export interface DensityContextValue {
+  compact: boolean
+  setCompact: (compact: boolean) => void
+}
+
+export const DensityContext = createContext<DensityContextValue | null>(null)
diff --git a/src/lib/density-provider.tsx b/src/lib/density-provider.tsx
new file mode 100644
index 0000000..ad93611
--- /dev/null
+++ b/src/lib/density-provider.tsx
@@ -0,0 +1,19 @@
+import { useEffect, useState, type ReactNode } from "react"
+import { DensityContext } from "./density-context"
+
+/** Provides the table/console density preference, persisted to localStorage. */
+export function DensityProvider({ children }: { children: ReactNode }) {
+  const [compact, setCompact] = useState(
+    () => localStorage.getItem("orion-density") === "compact"
+  )
+
+  useEffect(() => {
+    localStorage.setItem("orion-density", compact ? "compact" : "comfortable")
+  }, [compact])
+
+  return (
+    <DensityContext.Provider value={{ compact, setCompact }}>
+      {children}
+    </DensityContext.Provider>
+  )
+}
diff --git a/src/lib/use-density.ts b/src/lib/use-density.ts
new file mode 100644
index 0000000..10c2a80
--- /dev/null
+++ b/src/lib/use-density.ts
@@ -0,0 +1,8 @@
+import { useContext } from "react"
+import { DensityContext } from "./density-context"
+
+export function useDensity() {
+  const ctx = useContext(DensityContext)
+  if (!ctx) throw new Error("useDensity must be used within DensityProvider")
+  return ctx
+}
diff --git a/src/pages/channel-form.tsx b/src/pages/channel-form.tsx
index 570ba42..602162a 100644
--- a/src/pages/channel-form.tsx
+++ b/src/pages/channel-form.tsx
@@ -178,7 +178,7 @@ function ChannelForm({ existing }: { existing?: Channel }) {
           <ChannelConfigEditor value={config} onChange={setConfig} />
 
           {error && (
-            <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/pages/channels.tsx b/src/pages/channels.tsx
index 1e792c3..6e1d29e 100644
--- a/src/pages/channels.tsx
+++ b/src/pages/channels.tsx
@@ -17,8 +17,9 @@ import { Button } from "@/components/ui/button"
 import { Select } from "@/components/ui/select"
 import { PageHeader } from "@/components/shared/page-header"
 import { StatusBadge } from "@/components/shared/status-badge"
+import { EmptyState } from "@/components/shared/empty-state"
 import { formatDate } from "@/lib/utils"
-import { ChevronLeft, ChevronRight, Plus, Upload } from "lucide-react"
+import { ChevronLeft, ChevronRight, Plus, Radio, Upload } from "lucide-react"
 
 const PAGE_SIZE = 20
 const columnHelper = createColumnHelper<Channel>()
@@ -161,8 +162,22 @@ export function ChannelsPage() {
               ))
             ) : table.getRowModel().rows.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={columns.length} className="text-center text-muted-foreground py-8">
-                  No channels found
+                <TableCell colSpan={columns.length} className="p-0">
+                  <EmptyState
+                    icon={Radio}
+                    title="No channels yet"
+                    description="Channels are the service endpoints that receive requests and run a workflow. Create your first one or import existing definitions."
+                    action={
+                      <>
+                        <Button variant="outline" onClick={() => setShowImport(true)}>
+                          <Upload className="h-4 w-4" /> Import
+                        </Button>
+                        <Button onClick={() => navigate("/channels/new")}>
+                          <Plus className="h-4 w-4" /> Create Channel
+                        </Button>
+                      </>
+                    }
+                  />
                 </TableCell>
               </TableRow>
             ) : (
diff --git a/src/pages/connector-form.tsx b/src/pages/connector-form.tsx
index 2f56e21..af54b44 100644
--- a/src/pages/connector-form.tsx
+++ b/src/pages/connector-form.tsx
@@ -107,7 +107,7 @@ function ConnectorForm({ existing }: { existing?: Connector }) {
           <ConnectorConfigEditor connectorType={type} value={config} onChange={setConfig} />
 
           {error && (
-            <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
               {error}
             </div>
           )}
diff --git a/src/pages/connectors.tsx b/src/pages/connectors.tsx
index 10567fc..2995c0c 100644
--- a/src/pages/connectors.tsx
+++ b/src/pages/connectors.tsx
@@ -15,8 +15,10 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Button } from "@/components/ui/button"
 import { Select } from "@/components/ui/select"
 import { PageHeader } from "@/components/shared/page-header"
+import { EmptyState } from "@/components/shared/empty-state"
+import { enabledBadgeClass, disabledBadgeClass } from "@/lib/status"
 import { formatDate } from "@/lib/utils"
-import { ChevronLeft, ChevronRight, Plus, RefreshCw, Upload } from "lucide-react"
+import { ChevronLeft, ChevronRight, Plug, Plus, RefreshCw, Upload } from "lucide-react"
 
 const PAGE_SIZE = 20
 const columnHelper = createColumnHelper<Connector>()
@@ -37,11 +39,7 @@ const columns = [
     cell: (info) => (
       <Badge
         variant="outline"
-        className={
-          info.getValue()
-            ? "border-emerald-200 text-emerald-700"
-            : "border-muted-foreground/30 text-muted-foreground"
-        }
+        className={info.getValue() ? enabledBadgeClass : disabledBadgeClass}
       >
         {info.getValue() ? "Enabled" : "Disabled"}
       </Badge>
@@ -153,8 +151,22 @@ export function ConnectorsPage() {
               ))
             ) : table.getRowModel().rows.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={columns.length} className="text-center text-muted-foreground py-8">
-                  No connectors found
+                <TableCell colSpan={columns.length} className="p-0">
+                  <EmptyState
+                    icon={Plug}
+                    title="No connectors yet"
+                    description="Connectors link workflows to external systems — HTTP services, databases, Kafka, caches, and storage. Create one or import existing definitions."
+                    action={
+                      <>
+                        <Button variant="outline" onClick={() => setShowImport(true)}>
+                          <Upload className="h-4 w-4" /> Import
+                        </Button>
+                        <Button onClick={() => navigate("/connectors/new")}>
+                          <Plus className="h-4 w-4" /> Create Connector
+                        </Button>
+                      </>
+                    }
+                  />
                 </TableCell>
               </TableRow>
             ) : (
diff --git a/src/pages/console.tsx b/src/pages/console.tsx
index 043fcd4..ccce6e6 100644
--- a/src/pages/console.tsx
+++ b/src/pages/console.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { Link } from "react-router"
 import { dataApi } from "@/api/data"
 import { useChannels } from "@/hooks/use-channels"
 import type { ProcessResponse, ProfileResult } from "@/api/types"
@@ -9,7 +10,23 @@ import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { PageHeader } from "@/components/shared/page-header"
 import { JsonViewer } from "@/components/shared/json-viewer"
-import { Send } from "lucide-react"
+import { formatDate } from "@/lib/utils"
+import { ExternalLink, Send } from "lucide-react"
+
+const SAMPLE_PAYLOAD = '{\n  "example": "value"\n}'
+const isBlankPayload = (p: string) => {
+  const compact = p.replace(/\s/g, "")
+  return compact === "" || compact === "{}"
+}
+
+interface HistoryEntry {
+  channel: string
+  payload: string
+  sync: boolean
+  status?: string
+  traceId?: string
+  at: string
+}
 
 function fmtMs(ms: number | undefined): string {
   if (ms === undefined) return "--"
@@ -89,11 +106,25 @@ export function ConsolePage() {
   const [loading, setLoading] = useState(false)
   const [result, setResult] = useState<ProcessResponse | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [history, setHistory] = useState<HistoryEntry[]>([])
 
   const { data: channels } = useChannels({ limit: 200 })
   const channelList = channels?.data ?? []
 
   const profileResult = result?._orion?.profile
+  const traceId = result?.id
+
+  // Pre-fill a starter payload when a channel is picked and the editor is empty.
+  const onChannelChange = (value: string) => {
+    setChannel(value)
+    if (value && isBlankPayload(payload)) setPayload(SAMPLE_PAYLOAD)
+  }
+
+  const restore = (h: HistoryEntry) => {
+    setChannel(h.channel)
+    setPayload(h.payload)
+    setSync(h.sync)
+  }
 
   const handleSend = async () => {
     setError(null)
@@ -117,7 +148,21 @@ export function ConsolePage() {
       const res = sync
         ? await dataApi.processSync(channel, { data }, profile)
         : await dataApi.processAsync(channel, { data })
-      setResult(res as ProcessResponse)
+      const typed = res as ProcessResponse
+      setResult(typed)
+      setHistory((prev) =>
+        [
+          {
+            channel,
+            payload,
+            sync,
+            status: typed.status,
+            traceId: typed.id,
+            at: new Date().toISOString(),
+          },
+          ...prev,
+        ].slice(0, 8)
+      )
     } catch (e) {
       setError(e instanceof Error ? e.message : "Request failed")
     } finally {
@@ -137,7 +182,7 @@ export function ConsolePage() {
           <CardContent className="space-y-4">
             <div>
               <label className="mb-1 block text-sm font-medium">Channel</label>
-              <Select value={channel} onChange={(e) => setChannel(e.target.value)}>
+              <Select value={channel} onChange={(e) => onChannelChange(e.target.value)}>
                 <option value="">Select a channel...</option>
                 {channelList.map((c) => (
                   <option key={c.channel_id} value={c.name}>
@@ -148,7 +193,16 @@ export function ConsolePage() {
             </div>
 
             <div>
-              <label className="mb-1 block text-sm font-medium">JSON Payload</label>
+              <div className="mb-1 flex items-center justify-between">
+                <label className="block text-sm font-medium">JSON Payload</label>
+                <button
+                  type="button"
+                  onClick={() => setPayload(SAMPLE_PAYLOAD)}
+                  className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+                >
+                  Insert sample
+                </button>
+              </div>
               <Textarea
                 value={payload}
                 onChange={(e) => setPayload(e.target.value)}
@@ -194,7 +248,7 @@ export function ConsolePage() {
             )}
 
             {error && (
-              <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                 {error}
               </div>
             )}
@@ -204,7 +258,16 @@ export function ConsolePage() {
         <div className="space-y-6">
           <Card>
             <CardHeader>
-              <CardTitle>Response</CardTitle>
+              <CardTitle className="flex items-center justify-between">
+                Response
+                {traceId && (
+                  <Button variant="outline" size="sm" asChild>
+                    <Link to={`/traces/${traceId}`}>
+                      <ExternalLink className="h-3.5 w-3.5" /> Open as trace
+                    </Link>
+                  </Button>
+                )}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               {result ? (
@@ -218,6 +281,48 @@ export function ConsolePage() {
           </Card>
 
           {profileResult && <ProfilePanel profile={profileResult} />}
+
+          {history.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm">Recent requests</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-1">
+                {history.map((h, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+                  >
+                    <button
+                      type="button"
+                      onClick={() => restore(h)}
+                      className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                    >
+                      <Badge variant="outline" className="shrink-0 text-xs">
+                        {h.sync ? "Sync" : "Async"}
+                      </Badge>
+                      <span className="truncate font-medium">{h.channel}</span>
+                      {h.status && (
+                        <span className="shrink-0 text-xs text-muted-foreground">{h.status}</span>
+                      )}
+                      <span className="ml-auto shrink-0 text-xs text-muted-foreground">
+                        {formatDate(h.at)}
+                      </span>
+                    </button>
+                    {h.traceId && (
+                      <Link
+                        to={`/traces/${h.traceId}`}
+                        className="shrink-0 text-muted-foreground hover:text-foreground"
+                        aria-label="Open trace"
+                      >
+                        <ExternalLink className="h-3.5 w-3.5" />
+                      </Link>
+                    )}
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 8134443..afcec6b 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -101,10 +101,10 @@ export function SettingsPage() {
               {backup.isPending ? "Creating..." : "Create Backup"}
             </Button>
             {backup.isSuccess && (
-              <p className="text-sm text-emerald-600">Backup created successfully.</p>
+              <p className="text-sm text-chart-2">Backup created successfully.</p>
             )}
             {backup.isError && (
-              <p className="text-sm text-red-600">
+              <p className="text-sm text-destructive">
                 Failed: {backup.error?.message}
               </p>
             )}
diff --git a/src/pages/traces.tsx b/src/pages/traces.tsx
index 2913d43..4f5f6ab 100644
--- a/src/pages/traces.tsx
+++ b/src/pages/traces.tsx
@@ -17,9 +17,10 @@ import { Input } from "@/components/ui/input"
 import { PageHeader } from "@/components/shared/page-header"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { TraceAnalytics } from "@/components/traces/trace-analytics"
+import { EmptyState } from "@/components/shared/empty-state"
 import { formatDate, formatDuration } from "@/lib/utils"
 import { traceStatusBadgeClass } from "@/lib/status"
-import { ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react"
+import { ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown, Activity } from "lucide-react"
 
 const PAGE_SIZE = 20
 
@@ -196,8 +197,17 @@ export function TracesPage() {
               ))
             ) : table.getRowModel().rows.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={columns.length} className="text-center text-muted-foreground py-8">
-                  No traces found
+                <TableCell colSpan={columns.length} className="p-0">
+                  <EmptyState
+                    icon={Activity}
+                    title="No traces found"
+                    description="Traces are captured as requests flow through channels. Adjust the filters above, or send a request from the Data Console to generate one."
+                    action={
+                      <Button variant="outline" onClick={() => navigate("/console")}>
+                        Open Data Console
+                      </Button>
+                    }
+                  />
                 </TableCell>
               </TableRow>
             ) : (
diff --git a/src/pages/workflow-detail.tsx b/src/pages/workflow-detail.tsx
index 033b40f..0138903 100644
--- a/src/pages/workflow-detail.tsx
+++ b/src/pages/workflow-detail.tsx
@@ -179,7 +179,7 @@ export function WorkflowDetailPage() {
                 </Button>
 
                 {testError && (
-                  <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                     {testError}
                   </div>
                 )}
@@ -194,7 +194,7 @@ export function WorkflowDetailPage() {
                 {testResult ? (
                   <div className="space-y-4">
                     <div className="flex items-center gap-3">
-                      <Badge variant={testResult.matched ? "default" : "secondary"} className={testResult.matched ? "bg-emerald-500" : ""}>
+                      <Badge variant={testResult.matched ? "default" : "secondary"} className={testResult.matched ? "bg-chart-2 text-white" : ""}>
                         {testResult.matched ? "Matched" : "No Match"}
                       </Badge>
                       {testResult.errors.length > 0 && (
diff --git a/src/pages/workflows.tsx b/src/pages/workflows.tsx
index e4e8fd1..29df67a 100644
--- a/src/pages/workflows.tsx
+++ b/src/pages/workflows.tsx
@@ -17,8 +17,9 @@ import { Input } from "@/components/ui/input"
 import { PageHeader } from "@/components/shared/page-header"
 import { StatusBadge } from "@/components/shared/status-badge"
 import { WorkflowImportWizard } from "@/components/shared/workflow-import-wizard"
+import { EmptyState } from "@/components/shared/empty-state"
 import { formatDate } from "@/lib/utils"
-import { ChevronLeft, ChevronRight, Upload } from "lucide-react"
+import { ChevronLeft, ChevronRight, GitBranch, Upload } from "lucide-react"
 
 const PAGE_SIZE = 20
 const columnHelper = createColumnHelper<Workflow>()
@@ -156,8 +157,17 @@ export function WorkflowsPage() {
               ))
             ) : table.getRowModel().rows.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={columns.length} className="text-center text-muted-foreground py-8">
-                  No workflows found
+                <TableCell colSpan={columns.length} className="p-0">
+                  <EmptyState
+                    icon={GitBranch}
+                    title="No workflows yet"
+                    description="Workflows are task pipelines, often AI-generated and imported here for review, validation, dry-run, and safe rollout."
+                    action={
+                      <Button onClick={() => setShowImport(true)}>
+                        <Upload className="h-4 w-4" /> Import workflow
+                      </Button>
+                    }
+                  />
                 </TableCell>
               </TableRow>
             ) : (

From cf548f7b2c7457bb28e7da4e130a6ecb5458a55f Mon Sep 17 00:00:00 2001
From: shankar-gpio <shankar@goplasmatic.io>
Date: Fri, 29 May 2026 11:51:32 +0530
Subject: [PATCH 2/2] Remove rollout from workflows; make the diagram the
 primary view

- Drop the RolloutControl card and header rollout text from the workflow
  detail page, and the Rollout column from the workflows list.
- Simplify the import wizard's final step to a plain "Activate workflow"
  (no rollout percentage); delete the now-unused rollout-control component.
- Promote the WorkflowVisualizer to a full-width primary panel at the top of
  the detail page; move Relationships/Dry Run/Versions/JSON into a secondary
  tab strip below (defaulting to Relationships).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/shared/rollout-control.tsx     | 72 -------------------
 .../shared/workflow-import-wizard.tsx         | 43 +++--------
 src/pages/workflow-detail.tsx                 | 26 ++-----
 src/pages/workflows.tsx                       |  8 ---
 4 files changed, 13 insertions(+), 136 deletions(-)
 delete mode 100644 src/components/shared/rollout-control.tsx

diff --git a/src/components/shared/rollout-control.tsx b/src/components/shared/rollout-control.tsx
deleted file mode 100644
index 9c60472..0000000
--- a/src/components/shared/rollout-control.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState } from "react"
-import { useSetWorkflowRollout } from "@/hooks/use-workflows"
-import { Slider } from "@/components/ui/slider"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { RotateCcw } from "lucide-react"
-
-interface RolloutControlProps {
-  workflowId: string
-  current: number | null | undefined
-}
-
-/**
- * Canary rollout control: a 0–100% slider + numeric input mapped onto the existing
- * `useSetWorkflowRollout()` mutation (toast feedback is handled by the hook), with a
- * one-click rollback to 0%.
- */
-export function RolloutControl({ workflowId, current }: RolloutControlProps) {
-  const setRollout = useSetWorkflowRollout()
-  const initial = current ?? 0
-  const [value, setValue] = useState(initial)
-
-  const clamp = (n: number) => Math.max(0, Math.min(100, Math.round(n)))
-  const dirty = value !== initial
-
-  const apply = (next: number) =>
-    setRollout.mutate({ id: workflowId, req: { rollout_percentage: clamp(next) } })
-
-  return (
-    <Card>
-      <CardHeader className="pb-3">
-        <CardTitle className="text-sm">Canary rollout</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-center gap-4">
-          <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} className="flex-1" />
-          <div className="flex items-center gap-1">
-            <Input
-              type="number"
-              min={0}
-              max={100}
-              value={value}
-              onChange={(e) => setValue(clamp(Number(e.target.value)))}
-              className="w-20"
-            />
-            <span className="text-sm text-muted-foreground">%</span>
-          </div>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          {value}% of matching traffic runs this workflow version.
-        </p>
-        <div className="flex items-center gap-2">
-          <Button size="sm" onClick={() => apply(value)} disabled={!dirty || setRollout.isPending}>
-            {setRollout.isPending ? "Applying..." : "Apply"}
-          </Button>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              setValue(0)
-              apply(0)
-            }}
-            disabled={setRollout.isPending || (value === 0 && initial === 0)}
-          >
-            <RotateCcw className="h-3.5 w-3.5" /> Rollback to 0%
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/src/components/shared/workflow-import-wizard.tsx b/src/components/shared/workflow-import-wizard.tsx
index f424aaf..7699aab 100644
--- a/src/components/shared/workflow-import-wizard.tsx
+++ b/src/components/shared/workflow-import-wizard.tsx
@@ -6,7 +6,6 @@ import {
   useImportWorkflows,
   useTestWorkflow,
   useChangeWorkflowStatus,
-  useSetWorkflowRollout,
 } from "@/hooks/use-workflows"
 import type { JsonLogicValue, ValidationResponse, WorkflowTestResponse } from "@/api/types"
 import { useTheme } from "@/lib/use-theme"
@@ -14,8 +13,6 @@ import { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "@/c
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
 import { Badge } from "@/components/ui/badge"
-import { Slider } from "@/components/ui/slider"
-import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import { stepResultBadgeClass } from "@/lib/status"
 import { AlertCircle, CheckCircle2, Play } from "lucide-react"
@@ -29,10 +26,10 @@ interface WorkflowImportWizardProps {
 }
 
 /**
- * Guided workflow import: paste → validate → import (as draft) → dry-run → activate
- * with a rollout %. The dry-run and activate steps target the definition's
- * `workflow_id` (the test/status endpoints are id-scoped, and `import` returns only
- * counts); if the pasted definition omits an id, those steps are skipped with a note.
+ * Guided workflow import: paste → validate → import (as draft) → dry-run → activate.
+ * The dry-run and activate steps target the definition's `workflow_id` (the
+ * test/status endpoints are id-scoped, and `import` returns only counts); if the
+ * pasted definition omits an id, those steps are skipped with a note.
  */
 export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProps) {
   const { resolvedTheme } = useTheme()
@@ -40,7 +37,6 @@ export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProp
   const importWorkflows = useImportWorkflows()
   const testWorkflow = useTestWorkflow()
   const changeStatus = useChangeWorkflowStatus()
-  const setRollout = useSetWorkflowRollout()
 
   const [step, setStep] = useState<StepIndex>(0)
   const [text, setText] = useState("")
@@ -52,7 +48,6 @@ export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProp
   const [testResult, setTestResult] = useState<WorkflowTestResponse | null>(null)
   const [testError, setTestError] = useState<string | null>(null)
 
-  const [rollout, setRolloutValue] = useState(100)
   const [activated, setActivated] = useState(false)
 
   const parsed = useMemo(() => {
@@ -84,7 +79,6 @@ export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProp
     setTestResult(null)
     setTestError(null)
     setActivated(false)
-    setRolloutValue(100)
   }
 
   const close = () => {
@@ -150,12 +144,7 @@ export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProp
     if (!workflowId) return
     changeStatus.mutate(
       { id: workflowId, req: { status: "active" } },
-      {
-        onSuccess: () => {
-          setRollout.mutate({ id: workflowId, req: { rollout_percentage: rollout } })
-          setActivated(true)
-        },
-      }
+      { onSuccess: () => setActivated(true) }
     )
   }
 
@@ -323,31 +312,15 @@ export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProp
           <div className="space-y-4">
             {activated ? (
               <div className="flex items-center gap-2 rounded-md border border-chart-2/40 p-3 text-sm text-chart-2">
-                <CheckCircle2 className="h-4 w-4" /> Activated at {rollout}% rollout.
+                <CheckCircle2 className="h-4 w-4" /> Workflow activated.
               </div>
             ) : workflowId ? (
               <>
                 <p className="text-sm text-muted-foreground">
-                  Activate the workflow and choose how much matching traffic it should receive.
+                  Activate the imported workflow so it begins handling matching traffic.
                 </p>
-                <div className="flex items-center gap-4">
-                  <Slider value={rollout} onValueChange={setRolloutValue} className="flex-1" />
-                  <div className="flex items-center gap-1">
-                    <Input
-                      type="number"
-                      min={0}
-                      max={100}
-                      value={rollout}
-                      onChange={(e) =>
-                        setRolloutValue(Math.max(0, Math.min(100, Number(e.target.value))))
-                      }
-                      className="w-20"
-                    />
-                    <span className="text-sm text-muted-foreground">%</span>
-                  </div>
-                </div>
                 <Button onClick={activate} disabled={changeStatus.isPending}>
-                  {changeStatus.isPending ? "Activating…" : `Activate at ${rollout}%`}
+                  {changeStatus.isPending ? "Activating…" : "Activate workflow"}
                 </Button>
               </>
             ) : (
diff --git a/src/pages/workflow-detail.tsx b/src/pages/workflow-detail.tsx
index 0138903..4ad9b71 100644
--- a/src/pages/workflow-detail.tsx
+++ b/src/pages/workflow-detail.tsx
@@ -20,7 +20,6 @@ import { StatusBadge } from "@/components/shared/status-badge"
 import { LifecycleActions } from "@/components/shared/lifecycle-actions"
 import { VersionHistory } from "@/components/shared/version-history"
 import { VersionCompare } from "@/components/shared/version-compare"
-import { RolloutControl } from "@/components/shared/rollout-control"
 import { JsonViewer } from "@/components/shared/json-viewer"
 import { RelationshipGraph } from "@/components/graph/relationship-graph"
 import { stepResultBadgeClass } from "@/lib/status"
@@ -108,13 +107,6 @@ export function WorkflowDetailPage() {
                 ))}
               </div>
             )}
-            {workflow.status !== "active" &&
-              workflow.rollout_percentage !== undefined &&
-              workflow.rollout_percentage !== null && (
-                <span className="text-sm text-muted-foreground">
-                  Rollout: {workflow.rollout_percentage}%
-                </span>
-              )}
             <span className="text-sm text-muted-foreground">
               {workflow.tasks?.length ?? 0} tasks
             </span>
@@ -130,27 +122,19 @@ export function WorkflowDetailPage() {
         />
       </div>
 
-      {workflow.status === "active" && (
-        <RolloutControl workflowId={workflow.workflow_id} current={workflow.rollout_percentage} />
-      )}
+      {/* Diagram is the primary content of the page. */}
+      <div className="h-[calc(100dvh-19rem)] min-h-[520px] overflow-hidden rounded-lg border">
+        <WorkflowVisualizer workflows={[toVisualizerWorkflow(workflow)]} />
+      </div>
 
-      <Tabs defaultValue="visualization">
+      <Tabs defaultValue="relationships">
         <TabsList>
-          <TabsTrigger value="visualization">Visualization</TabsTrigger>
           <TabsTrigger value="relationships">Relationships</TabsTrigger>
           <TabsTrigger value="test">Dry Run</TabsTrigger>
           <TabsTrigger value="versions">Versions</TabsTrigger>
           <TabsTrigger value="json">JSON</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="visualization">
-          <div className="h-[calc(100dvh-18rem)] min-h-[600px] rounded-lg border">
-            <WorkflowVisualizer
-              workflows={[toVisualizerWorkflow(workflow)]}
-            />
-          </div>
-        </TabsContent>
-
         <TabsContent value="relationships">
           <RelationshipGraph kind="workflow" id={workflow.workflow_id} />
         </TabsContent>
diff --git a/src/pages/workflows.tsx b/src/pages/workflows.tsx
index 29df67a..abd2db9 100644
--- a/src/pages/workflows.tsx
+++ b/src/pages/workflows.tsx
@@ -54,14 +54,6 @@ const columns = [
     header: "Version",
     cell: (info) => <span className="text-muted-foreground">v{info.getValue()}</span>,
   }),
-  columnHelper.accessor("rollout_percentage", {
-    header: "Rollout",
-    cell: (info) => {
-      const val = info.getValue()
-      if (val === undefined || val === null) return <span className="text-muted-foreground">--</span>
-      return <span className="text-sm">{val}%</span>
-    },
-  }),
   columnHelper.accessor("tasks", {
     header: "Tasks",
     cell: (info) => <span className="text-muted-foreground">{info.getValue()?.length ?? 0}</span>,

No results