GoPlasmatic · shankar-gpio · May 29, 2026 · May 29, 2026 · May 29, 2026
diff --git 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
diff --git 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
@@ -20,14 +20,31 @@ 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 }) {
   const Icon = ICON[topo.kind]
   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
@@ -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
@@ -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
@@ -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>