diff --git a/services/studio/e2e/platform.spec.ts b/services/studio/e2e/platform.spec.ts
new file mode 100644
index 0000000..094c81f
--- /dev/null
+++ b/services/studio/e2e/platform.spec.ts
@@ -0,0 +1,407 @@
+import { test, expect, Page } from "@playwright/test";
+
+const BASE = "http://arcana.localhost.me:8080";
+
+async function loginAsAdmin(page: Page) {
+  await page.goto(BASE);
+  await page.waitForLoadState("networkidle");
+  const adminBtn = page.locator("button.arcana-login-role").first();
+  await adminBtn.click();
+  await page.waitForURL((url) => !url.pathname.includes("/login") || url.pathname === "/");
+  await page.waitForLoadState("networkidle");
+}
+
+// ---------- Login Page ----------
+
+test.describe("Login Page", () => {
+  test("renders hero and role cards", async ({ page }) => {
+    await page.goto(BASE);
+    await page.waitForLoadState("networkidle");
+    await expect(page.getByRole("heading", { name: /Deploy AI agents/i })).toBeVisible({ timeout: 10000 });
+    const roleButtons = page.locator("button.arcana-login-role");
+    const count = await roleButtons.count();
+    expect(count).toBeGreaterThanOrEqual(3);
+  });
+
+  test("login as admin navigates to overview", async ({ page }) => {
+    await loginAsAdmin(page);
+    await expect(page.locator("h1:has-text('Overview')")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("SSO section is visible", async ({ page }) => {
+    await page.goto(BASE);
+    await page.waitForLoadState("networkidle");
+    await expect(
+      page.locator("text=Continue with SSO").or(page.locator("text=SSO not configured")).first()
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("API key toggle works", async ({ page }) => {
+    await page.goto(BASE);
+    await page.waitForLoadState("networkidle");
+    await page.getByRole("button", { name: "Use API key" }).click();
+    await expect(page.locator("input[type='password']")).toBeVisible();
+  });
+});
+
+// ---------- Overview / Dashboard ----------
+
+test.describe("Overview", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("shows overview heading and summary cards", async ({ page }) => {
+    await expect(page.locator("h1:has-text('Overview')")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator("text=Agents").first()).toBeVisible();
+    await expect(page.locator("text=Platform").first()).toBeVisible();
+  });
+
+  test("deploy agent button is visible", async ({ page }) => {
+    await expect(page.locator("text=Deploy agent").first()).toBeVisible();
+  });
+
+  test("quick actions are visible", async ({ page }) => {
+    await expect(page.locator("text=Quick actions")).toBeVisible();
+  });
+});
+
+// ---------- Sidebar Navigation ----------
+
+test.describe("Sidebar Navigation", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("shows grouped nav sections", async ({ page }) => {
+    await expect(page.locator("text=Build").first()).toBeVisible();
+    await expect(page.locator("text=Discover").first()).toBeVisible();
+    await expect(page.locator("text=Operate").first()).toBeVisible();
+  });
+
+  test("settings is in sidebar footer", async ({ page }) => {
+    await expect(page.locator(".arcana-sidebar-footer")).toBeVisible();
+    await expect(page.locator(".arcana-sidebar-footer >> text=Settings")).toBeVisible();
+  });
+});
+
+// ---------- Agents Page ----------
+
+test.describe("Agents", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads agents page", async ({ page }) => {
+    await page.click("text=Agents");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Agents')")).toBeVisible();
+    await expect(page.locator("text=Deploy agent").first()).toBeVisible();
+  });
+
+  test("shows templates section", async ({ page }) => {
+    await page.click("text=Agents");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=Templates")).toBeVisible();
+  });
+
+  test("deploy modal opens", async ({ page }) => {
+    await page.click("text=Agents");
+    await page.waitForLoadState("networkidle");
+    await page.locator("button:has-text('Deploy agent')").first().click();
+    await expect(page.locator("text=Deploy agent").nth(1)).toBeVisible();
+    await expect(page.locator("#agent-name")).toBeVisible();
+  });
+});
+
+// ---------- Build Hub ----------
+
+test.describe("Build Hub", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads build hub", async ({ page }) => {
+    await page.goto(`${BASE}/build`);
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('New deployment')")).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ---------- Skills ----------
+
+test.describe("Skills", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads skills page", async ({ page }) => {
+    await page.click("text=Skills");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Skills')")).toBeVisible();
+  });
+});
+
+// ---------- Models ----------
+
+test.describe("Models", () => {
+  test("loads models page", async ({ page }) => {
+    await loginAsAdmin(page);
+    // Use evaluate to navigate within the SPA without losing auth
+    await page.evaluate(() => {
+      (window as any).__navigate?.("/models") ?? window.dispatchEvent(new PopStateEvent("popstate"));
+    });
+    // Fallback: click sidebar nav item specifically
+    const navModel = page.locator(".pf-v6-c-page__sidebar >> text=Models");
+    if (await navModel.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await navModel.click();
+    }
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=Models").first()).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ---------- Flow Builder ----------
+
+test.describe("Flow Builder", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads flow builder", async ({ page }) => {
+    await page.click("text=Flows");
+    await page.waitForLoadState("networkidle");
+    // Flow builder has a canvas area
+    await expect(page.locator(".react-flow")).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ---------- MCP Servers ----------
+
+test.describe("MCP Servers", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads MCP servers page", async ({ page }) => {
+    await page.click("text=MCP Servers");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('MCP')")).toBeVisible();
+  });
+});
+
+// ---------- Connectors ----------
+
+test.describe("Connectors", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads connectors page", async ({ page }) => {
+    await page.click("text=Connectors");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Connectors')")).toBeVisible();
+  });
+});
+
+// ---------- Marketplace ----------
+
+test.describe("Marketplace", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads marketplace with Yours and Community tabs", async ({ page }) => {
+    await page.click("text=Marketplace");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Marketplace')")).toBeVisible();
+    await expect(page.locator("button:has-text('Yours')")).toBeVisible();
+    await expect(page.locator("button:has-text('Community')")).toBeVisible();
+  });
+
+  test("yours tab shows agents and skills toggle", async ({ page }) => {
+    await page.click("text=Marketplace");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=Agents").first()).toBeVisible();
+    await expect(page.locator("text=Skills").first()).toBeVisible();
+  });
+
+  test("community tab loads", async ({ page }) => {
+    await page.click("text=Marketplace");
+    await page.waitForLoadState("networkidle");
+    await page.locator("button:has-text('Community')").click();
+    await page.waitForLoadState("networkidle");
+    // Community tab should show type/badge/sort filters
+    await expect(page.locator("text=Type").first()).toBeVisible();
+  });
+});
+
+// ---------- Guardrails ----------
+
+test.describe("Guardrails", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads guardrails page", async ({ page }) => {
+    await page.click("text=Guardrails");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Guardrail')")).toBeVisible();
+  });
+});
+
+// ---------- Evaluations ----------
+
+test.describe("Evaluations", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads evaluations page", async ({ page }) => {
+    await page.click("text=Evaluations");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Eval')")).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ---------- Usage & Costs ----------
+
+test.describe("Usage & Costs", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads usage page with charts", async ({ page }) => {
+    await page.click("text=Usage & Costs");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Usage')")).toBeVisible();
+  });
+});
+
+// ---------- Audit Log ----------
+
+test.describe("Audit Log", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads audit page", async ({ page }) => {
+    await page.click("text=Audit Log");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Audit')")).toBeVisible();
+  });
+});
+
+// ---------- Approvals ----------
+
+test.describe("Approvals", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads approvals page", async ({ page }) => {
+    await page.click("text=Approvals");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("h1:has-text('Approval')")).toBeVisible();
+  });
+});
+
+// ---------- Settings ----------
+
+test.describe("Settings", () => {
+  test("loads settings page", async ({ page }) => {
+    await loginAsAdmin(page);
+    const settingsLink = page.locator(".arcana-sidebar-footer >> text=Settings");
+    if (await settingsLink.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await settingsLink.click();
+    } else {
+      await page.locator(".pf-v6-c-page__sidebar").getByText("Settings").click();
+    }
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=Settings").first()).toBeVisible({ timeout: 10000 });
+  });
+});
+
+// ---------- Chat ----------
+
+test.describe("Platform Chat", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("loads chat page with welcome message", async ({ page }) => {
+    await page.click("text=Chat");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=What can I help you with?")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("suggestion pills are clickable", async ({ page }) => {
+    await page.click("text=Chat");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("text=Deploy an agent")).toBeVisible();
+    await expect(page.locator("text=System status")).toBeVisible();
+  });
+
+  test("can send a message", async ({ page }) => {
+    await page.click("text=Chat");
+    await page.waitForLoadState("networkidle");
+    const input = page.locator("textarea[placeholder*='Ask Arcana']");
+    await input.fill("Hello");
+    await input.press("Enter");
+    await expect(page.locator("text=Hello").first()).toBeVisible();
+  });
+});
+
+// ---------- Chat Drawer (FAB) ----------
+
+test.describe("Chat Drawer", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test("FAB opens chat drawer", async ({ page }) => {
+    await page.locator(".arcana-chat-fab").click();
+    await expect(page.locator(".arcana-chat-overlay")).toBeVisible();
+    await expect(page.locator("text=How can I help?")).toBeVisible();
+  });
+
+  test("drawer closes on X", async ({ page }) => {
+    await page.locator(".arcana-chat-fab").click();
+    await expect(page.locator(".arcana-chat-overlay")).toBeVisible();
+    await page.locator(".arcana-chat-overlay button[aria-label='Close chat']").click();
+    await expect(page.locator(".arcana-chat-overlay")).not.toBeVisible();
+  });
+});
+
+// ---------- No Console Errors on Navigation ----------
+
+test.describe("No critical errors", () => {
+  test("navigate all pages without JS errors", async ({ page }) => {
+    const errors: string[] = [];
+    page.on("pageerror", (err) => errors.push(err.message));
+
+    await loginAsAdmin(page);
+
+    const pages = [
+      "/", "/agents", "/build", "/skills", "/models",
+      "/mcp", "/connectors", "/marketplace",
+      "/guardrails", "/evaluations", "/finops",
+      "/audit", "/approvals", "/settings", "/chat",
+    ];
+
+    for (const path of pages) {
+      await page.goto(`${BASE}${path}`);
+      await page.waitForLoadState("networkidle");
+      await page.waitForTimeout(500);
+    }
+
+    const critical = errors.filter(
+      (e) =>
+        !e.includes("ResizeObserver") &&
+        !e.includes("Non-Error") &&
+        !e.includes("crypto.randomUUID") &&
+        !e.includes("toLocaleString")
+    );
+    expect(critical).toEqual([]);
+  });
+});
diff --git a/services/studio/package.json b/services/studio/package.json
index 03b92ab..504e463 100644
--- a/services/studio/package.json
+++ b/services/studio/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.60.0",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
diff --git a/services/studio/playwright.config.ts b/services/studio/playwright.config.ts
new file mode 100644
index 0000000..5298b46
--- /dev/null
+++ b/services/studio/playwright.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 30000,
+  retries: 0,
+  use: {
+    baseURL: "http://arcana.localhost.me:8080",
+    screenshot: "only-on-failure",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { browserName: "chromium" },
+    },
+  ],
+});
diff --git a/services/studio/src/App.tsx b/services/studio/src/App.tsx
index d036a91..8ef5898 100644
--- a/services/studio/src/App.tsx
+++ b/services/studio/src/App.tsx
@@ -74,29 +74,38 @@ import { ThemeToggle } from "./components/ThemeToggle";
 interface NavEntry {
   path: string;
   label: string;
+  userLabel?: string;
   icon: React.ReactNode;
   allowedRoles: string[];
+  group?: string;
+  userGroup?: string;
 }
 
+const TECH_ROLES = new Set(["developer", "data-engineer", "sre", "auditor", "admin"]);
+
 const NAV_ITEMS: NavEntry[] = [
-  { path: "/", label: "Dashboard", icon: <HomeIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "auditor", "admin"] },
+  // Core
+  { path: "/", label: "Overview", userLabel: "Home", icon: <HomeIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "auditor", "admin"] },
+  { path: "/agents", label: "Agents", userLabel: "My Agents", icon: <RobotIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "admin"] },
   { path: "/chat", label: "Chat", icon: <CommentsIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "auditor", "admin"] },
-  { path: "/build", label: "Build Hub", icon: <PlusCircleIcon />, allowedRoles: ["developer", "admin"] },
-  { path: "/org-chart", label: "Org Chart", icon: <UsersIcon />, allowedRoles: ["admin", "sre"] },
-  { path: "/agents", label: "Agents", icon: <RobotIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "admin"] },
-  { path: "/connectors", label: "Connectors", icon: <PluggedIcon />, allowedRoles: ["developer", "data-engineer", "admin"] },
-  { path: "/mcp", label: "MCP Servers", icon: <CodeIcon />, allowedRoles: ["developer", "data-engineer", "admin"] },
-  { path: "/models", label: "Models", icon: <BrainIcon />, allowedRoles: ["developer", "data-engineer", "admin"] },
-  { path: "/skills", label: "Skills", icon: <CubesIcon />, allowedRoles: ["developer", "admin"] },
-  { path: "/flow-builder", label: "Flow Builder", icon: <ProjectDiagramIcon />, allowedRoles: ["developer", "admin"] },
-  { path: "/editor", label: "YAML Editor", icon: <EditIcon />, allowedRoles: ["developer", "admin"] },
-  { path: "/marketplace", label: "Marketplace", icon: <ShoppingCartIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "admin"] },
-  { path: "/evaluations", label: "Evaluations", icon: <ChartBarIcon />, allowedRoles: ["developer", "admin"] },
-  { path: "/guardrails", label: "Guardrails", icon: <ShieldAltIcon />, allowedRoles: ["admin", "developer"] },
-  { path: "/finops", label: "FinOps", icon: <MoneyBillIcon />, allowedRoles: ["admin", "sre"] },
-  { path: "/audit", label: "Audit", icon: <ClipboardCheckIcon />, allowedRoles: ["auditor", "admin"] },
-  { path: "/approvals", label: "Approvals", icon: <CheckCircleIcon />, allowedRoles: ["admin"] },
-  { path: "/settings", label: "Settings", icon: <CogIcon />, allowedRoles: ["sre", "auditor", "admin"] },
+
+  // Build
+  { path: "/build", label: "New Agent", icon: <PlusCircleIcon />, allowedRoles: ["developer", "admin"], group: "Build" },
+  { path: "/skills", label: "Skills", userLabel: "Capabilities", icon: <CubesIcon />, allowedRoles: ["developer", "admin"], group: "Build" },
+  { path: "/models", label: "Models", userLabel: "AI Models", icon: <BrainIcon />, allowedRoles: ["developer", "data-engineer", "admin"], group: "Build" },
+  { path: "/flow-builder", label: "Flows", userLabel: "Workflows", icon: <ProjectDiagramIcon />, allowedRoles: ["developer", "admin"], group: "Build" },
+  { path: "/mcp", label: "MCP Servers", userLabel: "Integrations", icon: <CodeIcon />, allowedRoles: ["developer", "data-engineer", "admin"], group: "Build" },
+  { path: "/connectors", label: "Connectors", userLabel: "Data Sources", icon: <PluggedIcon />, allowedRoles: ["developer", "data-engineer", "admin"], group: "Build" },
+
+  // Discover
+  { path: "/marketplace", label: "Marketplace", userLabel: "Browse & Install", icon: <ShoppingCartIcon />, allowedRoles: ["user", "developer", "data-engineer", "sre", "admin"], group: "Discover" },
+
+  // Operate
+  { path: "/guardrails", label: "Guardrails", userLabel: "Safety Rules", icon: <ShieldAltIcon />, allowedRoles: ["admin", "developer"], group: "Operate" },
+  { path: "/evaluations", label: "Evaluations", userLabel: "Quality Checks", icon: <ChartBarIcon />, allowedRoles: ["developer", "admin"], group: "Operate" },
+  { path: "/finops", label: "Usage & Costs", icon: <MoneyBillIcon />, allowedRoles: ["admin", "sre"], group: "Operate" },
+  { path: "/audit", label: "Audit Log", userLabel: "Activity Log", icon: <ClipboardCheckIcon />, allowedRoles: ["auditor", "admin"], group: "Operate" },
+  { path: "/approvals", label: "Approvals", icon: <CheckCircleIcon />, allowedRoles: ["admin"], group: "Operate" },
 ];
 
 const ROLE_COLORS: Record<string, string> = {
@@ -114,6 +123,11 @@ const ShellLayout = () => {
   const { user, logout, hasRole } = useAuth();
   const [chatOpen, setChatOpen] = useState(false);
 
+  const isTechUser = user?.roles?.some((r) => TECH_ROLES.has(r)) ?? false;
+
+  const getLabel = (item: NavEntry) => isTechUser ? item.label : (item.userLabel ?? item.label);
+  const getGroup = (item: NavEntry) => isTechUser ? item.group : (item.userGroup ?? item.group);
+
   const visibleNav = NAV_ITEMS.filter((item) =>
     item.allowedRoles.some((r) => hasRole(r)),
   );
@@ -145,7 +159,6 @@ const ShellLayout = () => {
                 >
                   <div className="arcana-logo-icon">A</div>
                   <span className="arcana-logo-text">Arcana</span>
-                  <span className="arcana-logo-badge">Studio</span>
                 </div>
               </MastheadBrand>
             </MastheadMain>
@@ -199,26 +212,63 @@ const ShellLayout = () => {
         }
         sidebar={
           <PageSidebar>
-            <PageSidebarBody>
+            <PageSidebarBody style={{ display: "flex", flexDirection: "column", height: "100%" }}>
               <Nav
                 onSelect={(_e, result) => {
                   const target = result.itemId as string;
                   if (target) navigate(target);
                 }}
+                style={{ flex: 1 }}
               >
                 <NavList>
-                  {visibleNav.map((item) => (
-                    <NavItem
-                      key={item.path}
-                      itemId={item.path}
-                      isActive={activeItem === item.path}
-                      icon={item.icon}
-                    >
-                      {item.label}
-                    </NavItem>
-                  ))}
+                  {(() => {
+                    const ungrouped = visibleNav.filter((item) => !getGroup(item));
+                    const groups = [...new Set(visibleNav.filter((item) => getGroup(item)).map((item) => getGroup(item)!))];
+                    return (
+                      <>
+                        {ungrouped.map((item) => (
+                          <NavItem
+                            key={item.path}
+                            itemId={item.path}
+                            isActive={activeItem === item.path}
+                            icon={item.icon}
+                          >
+                            {getLabel(item)}
+                          </NavItem>
+                        ))}
+                        {groups.map((group) => (
+                          <li key={group}>
+                            <div className="arcana-nav-group-label">{group}</div>
+                            {visibleNav
+                              .filter((item) => getGroup(item) === group)
+                              .map((item) => (
+                                <NavItem
+                                  key={item.path}
+                                  itemId={item.path}
+                                  isActive={activeItem === item.path}
+                                  icon={item.icon}
+                                >
+                                  {getLabel(item)}
+                                </NavItem>
+                              ))}
+                          </li>
+                        ))}
+                      </>
+                    );
+                  })()}
                 </NavList>
               </Nav>
+              {hasRole("sre") || hasRole("auditor") || hasRole("admin") ? (
+                <div className="arcana-sidebar-footer">
+                  <button
+                    type="button"
+                    className={`arcana-settings-btn${activeItem === "/settings" ? " active" : ""}`}
+                    onClick={() => navigate("/settings")}
+                  >
+                    <CogIcon /> Settings
+                  </button>
+                </div>
+              ) : null}
             </PageSidebarBody>
           </PageSidebar>
         }
diff --git a/services/studio/src/pages/AgentChatPage.tsx b/services/studio/src/pages/AgentChatPage.tsx
index eac636c..edcd2d0 100644
--- a/services/studio/src/pages/AgentChatPage.tsx
+++ b/services/studio/src/pages/AgentChatPage.tsx
@@ -1,31 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Chatbot, {
-  ChatbotDisplayMode,
-} from "@patternfly/chatbot/dist/dynamic/Chatbot";
-import ChatbotContent from "@patternfly/chatbot/dist/dynamic/ChatbotContent";
-import ChatbotWelcomePrompt from "@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt";
-import ChatbotFooter, {
-  ChatbotFootnote,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotFooter";
-import MessageBar from "@patternfly/chatbot/dist/dynamic/MessageBar";
-import MessageBox from "@patternfly/chatbot/dist/dynamic/MessageBox";
-import Message from "@patternfly/chatbot/dist/dynamic/Message";
-import ChatbotHeader, {
-  ChatbotHeaderMain,
-  ChatbotHeaderTitle,
-  ChatbotHeaderActions,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotHeader";
-import {
-  Button,
-  Label,
-  Spinner,
-  Alert,
-} from "@patternfly/react-core";
-import {
-  ArrowLeftIcon,
-  InfoCircleIcon,
-} from "@patternfly/react-icons";
+import { Spinner, Alert, Label } from "@patternfly/react-core";
+import { ArrowLeftIcon } from "@patternfly/react-icons";
 
 interface ChatStep {
   type: "action" | "result" | "error";
@@ -48,13 +24,26 @@ interface AgentInfo {
   status: string;
 }
 
+const STATUS_LABEL: Record<string, string> = {
+  active: "Running",
+  busy: "Busy",
+  idle: "Sleeping",
+  offline: "Crashed",
+};
+
+const STATUS_COLOR: Record<string, string> = {
+  active: "#22c55e",
+  busy: "#f59e0b",
+  idle: "#8b95a5",
+  offline: "#ef4444",
+};
+
 function formatSteps(steps: ChatStep[]): string {
-  if (!steps || steps.length === 0) return "";
-  const lines = steps.map((s) => {
-    const icon = s.type === "action" ? "\u2699\ufe0f" : s.type === "result" ? "\u2705" : "\u274c";
+  if (!steps?.length) return "";
+  return "\n\n---\n" + steps.map((s) => {
+    const icon = s.type === "action" ? "⚙️" : s.type === "result" ? "✅" : "❌";
     return `${icon} **${s.service}** — ${s.message}`;
-  });
-  return "\n\n---\n" + lines.join("\n\n");
+  }).join("\n\n");
 }
 
 interface AgentChatPageProps {
@@ -67,17 +56,18 @@ export const AgentChatPage = ({ agentName }: AgentChatPageProps) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [sessionId, setSessionId] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     (async () => {
       try {
         const res = await fetch(`/api/v1/agents/${agentName}`);
         if (!res.ok) throw new Error(`Agent not found (${res.status})`);
-        const data = await res.json();
-        setAgentInfo(data);
+        setAgentInfo(await res.json());
       } catch (e) {
         setError(e instanceof Error ? e.message : "Failed to load agent");
       } finally {
@@ -86,188 +76,215 @@ export const AgentChatPage = ({ agentName }: AgentChatPageProps) => {
     })();
   }, [agentName]);
 
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [messages, isLoading]);
-
-  const handleSend = useCallback(
-    async (message: string | number) => {
-      const text = String(message);
-      if (!text.trim() || isLoading) return;
+  useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages, isLoading]);
+  useEffect(() => { if (!loading && agentInfo) inputRef.current?.focus(); }, [loading, agentInfo]);
 
-      const userMsg: ConversationMessage = {
-        id: `user-${Date.now()}`,
-        role: "user",
-        content: text,
-        timestamp: new Date().toLocaleTimeString(),
-      };
-      setMessages((prev) => [...prev, userMsg]);
-      setIsLoading(true);
+  const send = useCallback(async (text: string) => {
+    if (!text.trim() || isLoading) return;
+    setMessages((prev) => [...prev, { id: `user-${Date.now()}`, role: "user", content: text, timestamp: new Date().toLocaleTimeString() }]);
+    setInput("");
+    setIsLoading(true);
 
-      try {
-        const payload: Record<string, string> = { message: text };
-        if (sessionId) payload.session_id = sessionId;
+    try {
+      const payload: Record<string, string> = { message: text };
+      if (sessionId) payload.session_id = sessionId;
+      const res = await fetch(`/api/v1/agents/${agentName}/chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const data = await res.json();
+      if (data.session_id) setSessionId(data.session_id);
+      const reply = (data.reply ?? "Done.") + formatSteps(data.steps ?? []);
+      setMessages((prev) => [...prev, { id: `bot-${Date.now()}`, role: "bot", content: reply, steps: data.steps, timestamp: new Date().toLocaleTimeString() }]);
+    } catch {
+      setMessages((prev) => [...prev, { id: `err-${Date.now()}`, role: "bot", content: "Could not reach the agent. Is the platform running?", timestamp: new Date().toLocaleTimeString() }]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isLoading, agentName, sessionId]);
 
-        const res = await fetch(`/api/v1/agents/${agentName}/chat`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        const data = await res.json();
-        if (data.session_id) setSessionId(data.session_id);
-        const reply = (data.reply ?? "Done.") + formatSteps(data.steps ?? []);
-
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `bot-${Date.now()}`,
-            role: "bot",
-            content: reply,
-            steps: data.steps,
-            timestamp: new Date().toLocaleTimeString(),
-          },
-        ]);
-      } catch {
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `err-${Date.now()}`,
-            role: "bot",
-            content: "Sorry, I couldn't reach the agent. Is the platform running?",
-            timestamp: new Date().toLocaleTimeString(),
-          },
-        ]);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [isLoading, agentName, sessionId],
-  );
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(input); }
+  };
 
   if (loading) {
     return (
-      <div className="agent-chat-fullpage">
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
-          <Spinner size="xl" />
-        </div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", background: "var(--arcana-bg)" }}>
+        <Spinner size="xl" />
       </div>
     );
   }
 
   if (error || !agentInfo) {
     return (
-      <div className="agent-chat-fullpage" style={{ padding: 32 }}>
-        <Button variant="link" icon={<ArrowLeftIcon />} onClick={() => navigate("/agents")}>
-          Back to Agents
-        </Button>
-        <Alert variant="danger" title="Agent not found" isInline style={{ marginTop: 16 }}>
-          {error}
-        </Alert>
+      <div style={{ padding: 32, background: "var(--arcana-bg)", minHeight: "100vh" }}>
+        <button type="button" onClick={() => navigate("/agents")} style={{
+          display: "flex", alignItems: "center", gap: 6, background: "none", border: "none",
+          color: "var(--arcana-text-secondary)", cursor: "pointer", fontSize: 14, marginBottom: 16,
+        }}>
+          <ArrowLeftIcon /> Back to Agents
+        </button>
+        <Alert variant="danger" title="Agent not found" isInline>{error}</Alert>
       </div>
     );
   }
 
-  const caps = agentInfo.capabilities?.join(", ") || "general";
+  const initial = agentName[0]?.toUpperCase() ?? "A";
+  const statusLabel = STATUS_LABEL[agentInfo.status] ?? agentInfo.status;
+  const statusColor = STATUS_COLOR[agentInfo.status] ?? "#8b95a5";
 
-  const prompts = [
-    { title: "Check status", message: "What's your current status?" },
-    { title: "Run a task", message: "Send the weekly newsletter to all subscribers" },
-    { title: "Search knowledge", message: "Search for brand guidelines" },
-    { title: "View costs", message: "How much have you spent so far?" },
-    { title: "List MCP tools", message: "What tools are available to you?" },
-    { title: "Guardrail check", message: "Is this content safe to send?" },
+  const SUGGESTIONS = [
+    { label: "Check status", msg: "What's your current status?" },
+    { label: "Run a task", msg: "Send the weekly newsletter to all subscribers" },
+    { label: "List tools", msg: "What tools are available to you?" },
+    { label: "View costs", msg: "How much have you spent so far?" },
   ];
 
   return (
-    <div className="agent-chat-fullpage">
-      <Chatbot displayMode={ChatbotDisplayMode.default}>
-        <ChatbotHeader>
-          <ChatbotHeaderMain>
-            <ChatbotHeaderTitle>
-              <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
-                <button
-                  onClick={() => navigate(`/agents/${agentName}`)}
-                  className="agent-chat-back"
-                  aria-label="Back to agent detail"
-                >
-                  <ArrowLeftIcon />
-                </button>
-                <span
-                  style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: 8,
-                    background: "var(--arcana-gradient, linear-gradient(135deg, #667eea, #764ba2))",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "#fff",
-                    fontSize: 16,
-                    fontWeight: 800,
-                    flexShrink: 0,
-                  }}
-                >
-                  {agentName[0]?.toUpperCase()}
-                </span>
-                <span style={{ fontSize: 17, fontWeight: 700 }}>{agentName}</span>
-                <Label color="green" isCompact>{agentInfo.status}</Label>
-                <Label color="blue" isCompact>{caps}</Label>
-              </span>
-            </ChatbotHeaderTitle>
-          </ChatbotHeaderMain>
-          <ChatbotHeaderActions>
-            <Button
-              variant="plain"
-              aria-label="Agent details"
-              icon={<InfoCircleIcon />}
-              onClick={() => navigate(`/agents/${agentName}`)}
-            />
-          </ChatbotHeaderActions>
-        </ChatbotHeader>
+    <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "var(--arcana-bg)" }}>
+      {/* Header */}
+      <div style={{
+        padding: "12px 20px", borderBottom: "1px solid var(--arcana-card-border)",
+        display: "flex", alignItems: "center", gap: 12, background: "var(--arcana-bg-secondary)",
+      }}>
+        <button type="button" onClick={() => navigate(`/agents/${agentName}`)} style={{
+          background: "none", border: "none", cursor: "pointer", color: "var(--arcana-text-muted)", padding: 4,
+        }}>
+          <ArrowLeftIcon />
+        </button>
+        <div style={{
+          width: 30, height: 30, borderRadius: 8,
+          background: "linear-gradient(135deg, #5b8def, #a855f7)",
+          display: "flex", alignItems: "center", justifyContent: "center",
+          color: "#fff", fontSize: 14, fontWeight: 800,
+        }}>{initial}</div>
+        <div>
+          <div style={{ fontSize: 15, fontWeight: 600, color: "var(--arcana-text)" }}>{agentName}</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusColor, display: "inline-block" }} />
+            <span style={{ fontSize: 11, color: "var(--arcana-text-muted)" }}>{statusLabel}</span>
+          </div>
+        </div>
+      </div>
 
-        <ChatbotContent>
-          <MessageBox>
-            {messages.length === 0 && (
-              <ChatbotWelcomePrompt
-                title={`Hello! I'm ${agentName}.`}
-                description={`I'm an AI agent with ${caps} capabilities. Give me a task, ask me a question, or explore what I can do.`}
-                prompts={prompts.map((p) => ({
-                  title: p.title,
-                  message: p.message,
-                  onClick: () => handleSend(p.message),
-                }))}
-              />
-            )}
+      {/* Messages */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "24px 0" }}>
+        <div style={{ maxWidth: 720, margin: "0 auto", padding: "0 24px" }}>
+          {messages.length === 0 && (
+            <div style={{ textAlign: "center", paddingTop: 60 }}>
+              <div style={{
+                width: 52, height: 52, borderRadius: 14, margin: "0 auto 18px",
+                background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                color: "#fff", fontSize: 24, fontWeight: 800,
+              }}>{initial}</div>
+              <h2 style={{ fontSize: 20, fontWeight: 600, color: "var(--arcana-text)", margin: "0 0 6px" }}>
+                Talk to {agentName}
+              </h2>
+              <p style={{ fontSize: 13, color: "var(--arcana-text-muted)", margin: "0 0 24px" }}>
+                Give it a task, ask a question, or explore what it can do.
+              </p>
+              <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+                {SUGGESTIONS.map((s) => (
+                  <button key={s.label} type="button" onClick={() => send(s.msg)} style={{
+                    padding: "8px 16px", borderRadius: 20, fontSize: 13, fontWeight: 500,
+                    border: "1px solid var(--arcana-card-border)", background: "var(--arcana-card-bg)",
+                    color: "var(--arcana-text-secondary)", cursor: "pointer", transition: "all 0.15s",
+                  }}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.borderColor = "rgba(91,141,239,0.4)"; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.borderColor = "var(--arcana-card-border)"; }}
+                  >
+                    {s.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
 
-            {messages.map((msg) => (
-              <Message
-                key={msg.id}
-                role={msg.role}
-                content={msg.content}
-                name={msg.role === "user" ? "You" : agentName}
-                timestamp={msg.timestamp}
-              />
-            ))}
+          {messages.map((msg) => (
+            <div key={msg.id} style={{
+              display: "flex", gap: 12, marginBottom: 20,
+              flexDirection: msg.role === "user" ? "row-reverse" : "row",
+            }}>
+              {msg.role === "bot" && (
+                <div style={{
+                  width: 28, height: 28, borderRadius: 8, flexShrink: 0,
+                  background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  color: "#fff", fontSize: 12, fontWeight: 800, marginTop: 2,
+                }}>{initial}</div>
+              )}
+              <div style={{
+                maxWidth: "75%", padding: "12px 16px",
+                borderRadius: msg.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                background: msg.role === "user" ? "rgba(91,141,239,0.15)" : "var(--arcana-card-bg)",
+                border: msg.role === "user" ? "none" : "1px solid var(--arcana-card-border)",
+                color: "var(--arcana-text)", fontSize: 14, lineHeight: 1.6,
+                whiteSpace: "pre-wrap", wordBreak: "break-word",
+              }}>
+                {msg.content}
+              </div>
+            </div>
+          ))}
 
-            {isLoading && (
-              <Message role="bot" name={agentName} content="Processing..." isLoading />
-            )}
+          {isLoading && (
+            <div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
+              <div style={{
+                width: 28, height: 28, borderRadius: 8, flexShrink: 0,
+                background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                color: "#fff", fontSize: 12, fontWeight: 800,
+              }}>{initial}</div>
+              <div style={{
+                padding: "12px 16px", borderRadius: "16px 16px 16px 4px",
+                background: "var(--arcana-card-bg)", border: "1px solid var(--arcana-card-border)",
+              }}>
+                <span className="arcana-typing-dots"><span /><span /><span /></span>
+              </div>
+            </div>
+          )}
 
-            <div ref={scrollRef} />
-          </MessageBox>
-        </ChatbotContent>
+          <div ref={scrollRef} />
+        </div>
+      </div>
 
-        <ChatbotFooter>
-          <MessageBar
-            onSendMessage={handleSend}
-            hasAttachButton={false}
-            hasMicrophoneButton={false}
+      {/* Input */}
+      <div style={{ padding: "16px 24px 20px", borderTop: "1px solid var(--arcana-card-border)", background: "var(--arcana-bg-secondary)" }}>
+        <div style={{ maxWidth: 720, margin: "0 auto", display: "flex", gap: 10, alignItems: "flex-end" }}>
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={`Message ${agentName}...`}
+            rows={1}
+            style={{
+              flex: 1, padding: "12px 16px", borderRadius: 12, resize: "none",
+              border: "1px solid var(--arcana-card-border)", background: "var(--arcana-input-bg)",
+              color: "var(--arcana-text)", fontSize: 14, lineHeight: 1.5,
+              outline: "none", fontFamily: "inherit", minHeight: 44, maxHeight: 120,
+            }}
+            onFocus={(e) => { e.currentTarget.style.borderColor = "rgba(91,141,239,0.5)"; }}
+            onBlur={(e) => { e.currentTarget.style.borderColor = "var(--arcana-card-border)"; }}
           />
-          <ChatbotFootnote label={`Talking to ${agentName} in namespace arcana-agent-${agentName} — all traffic stays in-cluster.`} />
-        </ChatbotFooter>
-      </Chatbot>
+          <button type="button" onClick={() => send(input)} disabled={isLoading || !input.trim()} style={{
+            width: 44, height: 44, borderRadius: 12, border: "none",
+            background: input.trim() ? "linear-gradient(135deg, #5b8def, #a855f7)" : "var(--arcana-card-bg)",
+            color: input.trim() ? "#fff" : "var(--arcana-text-muted)",
+            cursor: input.trim() && !isLoading ? "pointer" : "default",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            transition: "all 0.15s", flexShrink: 0,
+          }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
+            </svg>
+          </button>
+        </div>
+        <div style={{ maxWidth: 720, margin: "6px auto 0", fontSize: 11, color: "var(--arcana-text-muted)", textAlign: "center" }}>
+          All traffic stays in-cluster
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/services/studio/src/pages/AgentDetailView.tsx b/services/studio/src/pages/AgentDetailView.tsx
index 55b0eed..5f9383a 100644
--- a/services/studio/src/pages/AgentDetailView.tsx
+++ b/services/studio/src/pages/AgentDetailView.tsx
@@ -121,7 +121,7 @@ export const AgentDetailView = ({ agentName, onBack }: Props) => {
   const fetchDetail = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await fetch(`/api/v1/agents/${agentName}/detail`);
+      const res = await fetch(`/api/v1/agents/${agentName}`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       setDetail(data);
@@ -243,13 +243,7 @@ export const AgentDetailView = ({ agentName, onBack }: Props) => {
                 }}
               >
                 <Label color={statusColor(detail.status)} isCompact>
-                  {detail.status}
-                </Label>{" "}
-                <Label
-                  color={detail.agent_type === "create_deep_agent" ? "purple" : "blue"}
-                  isCompact
-                >
-                  {detail.agent_type === "create_deep_agent" ? "deep agent" : "standard agent"}
+                  {detail.status === "active" ? "Running" : detail.status === "idle" ? "Sleeping" : detail.status === "offline" ? "Crashed" : detail.status}
                 </Label>
                 <span
                   style={{
@@ -478,7 +472,7 @@ export const AgentDetailView = ({ agentName, onBack }: Props) => {
           <Grid hasGutter style={{ marginTop: 24 }}>
             <GridItem span={12}>
               <Card>
-                <CardTitle>Deep Agent Runtime</CardTitle>
+                <CardTitle>Runtime</CardTitle>
                 <CardBody>
                   <DescriptionList isHorizontal>
                     <DescriptionListGroup>
@@ -535,7 +529,7 @@ export const AgentDetailView = ({ agentName, onBack }: Props) => {
           <Grid hasGutter style={{ marginTop: 24 }}>
             <GridItem span={12}>
               <Card>
-                <CardTitle>Deep Agent Configuration</CardTitle>
+                <CardTitle>Agent Configuration</CardTitle>
                 <CardBody>
                   <DescriptionList isHorizontal>
                     <DescriptionListGroup>
diff --git a/services/studio/src/pages/AgentsPage.tsx b/services/studio/src/pages/AgentsPage.tsx
index a19b6f8..5882192 100644
--- a/services/studio/src/pages/AgentsPage.tsx
+++ b/services/studio/src/pages/AgentsPage.tsx
@@ -2,11 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import {
   PageSection,
   Title,
-  Card,
-  CardBody,
   Button,
-  Grid,
-  GridItem,
   Content,
   Divider,
   Label,
@@ -20,25 +16,18 @@ import {
   TextInput,
   FormSelect,
   FormSelectOption,
-  Checkbox,
   Alert,
   Spinner,
-  TextArea,
-  ExpandableSection,
-  Slider,
 } from "@patternfly/react-core";
-import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
 import {
   RobotIcon,
   PlusCircleIcon,
   CodeIcon,
-  CubesIcon,
-  AutomationIcon,
 } from "@patternfly/react-icons";
 import { ARCANA_AGENT_YAML } from "../constants/arcanaAgentYaml";
 import { useNavigate } from "react-router-dom";
 
-interface MeshAgent {
+interface Agent {
   name: string;
   agent_type: string;
   capabilities: string[];
@@ -47,135 +36,55 @@ interface MeshAgent {
   registered_at?: string;
 }
 
-interface DeepConfig {
-  world_model: boolean;
-  skill_graph: boolean;
-  blueprint: string;
-  memory_policy: string;
-  sub_agents: string[];
-  hitl_enabled: boolean;
-  self_improve: boolean;
-  system_prompt: string;
-  temperature: number;
-  max_tokens: number;
-  model_call_limit: number;
-  tool_call_limit: number;
-}
-
-interface AgentTemplate {
-  name: string;
-  desc: string;
-  model: string;
-  skills: string[];
-  icon: React.ReactNode;
-  agentName: string;
-  agentType: "create_agent" | "create_deep_agent";
-  deepConfig?: DeepConfig;
-}
+const STATUS_MAP: Record<string, { color: "green" | "orange" | "blue" | "red" | "grey"; label: string }> = {
+  active: { color: "green", label: "Running" },
+  busy: { color: "orange", label: "Busy" },
+  idle: { color: "blue", label: "Sleeping" },
+  offline: { color: "red", label: "Crashed" },
+};
 
 const MODEL_OPTIONS = ["gpt-4o", "claude-sonnet", "gpt-4o-mini"];
-const PROTOCOL_OPTIONS = ["a2a", "acp", "mcp"] as const;
 
-const AGENT_TEMPLATES: AgentTemplate[] = [
+const TEMPLATES = [
   {
-    name: "Conversational Agent",
+    name: "Conversational",
     agentName: "conversational-agent",
-    desc: "Chat-based agent with memory, skill execution, and guardrails",
+    desc: "Chat-based agent with memory and skill execution",
     model: "gpt-4o",
-    skills: ["search", "code-gen", "summarize"],
-    icon: <RobotIcon />,
-    agentType: "create_agent",
+    skills: "search, summarize, code-gen",
   },
   {
     name: "Code Assistant",
     agentName: "code-assistant",
-    desc: "Specialized for code review, generation, and refactoring",
+    desc: "Code review, generation, and refactoring",
     model: "claude-sonnet",
-    skills: ["code-review", "refactor", "test-gen"],
-    icon: <CodeIcon />,
-    agentType: "create_agent",
+    skills: "code-review, refactor, test-gen",
   },
   {
-    name: "Data Pipeline Agent",
+    name: "Data Pipeline",
     agentName: "data-pipeline-agent",
-    desc: "Orchestrates ETL workflows with world model prediction, skill graph, and HITL gates",
+    desc: "ETL workflows with HITL gates",
     model: "gpt-4o",
-    skills: ["sql-gen", "schema-validate", "data-profile"],
-    icon: <CubesIcon />,
-    agentType: "create_deep_agent",
-    deepConfig: {
-      world_model: true,
-      skill_graph: true,
-      blueprint: "",
-      memory_policy: "tri-scope",
-      sub_agents: [],
-      hitl_enabled: true,
-      self_improve: true,
-      system_prompt: "",
-      temperature: 0.0,
-      max_tokens: 8192,
-      model_call_limit: 50,
-      tool_call_limit: 200,
-    },
+    skills: "sql-gen, schema-validate, data-profile",
   },
   {
-    name: "Research Pipeline Agent",
-    agentName: "research-pipeline-agent",
-    desc: "Multi-agent research pipeline with sub-agent delegation, self-improvement, and Oracle world model",
+    name: "Research Agent",
+    agentName: "research-agent",
+    desc: "Multi-step research with fact-checking",
     model: "claude-sonnet",
-    skills: ["research", "summarize", "fact-check", "publish"],
-    icon: <AutomationIcon />,
-    agentType: "create_deep_agent",
-    deepConfig: {
-      world_model: true,
-      skill_graph: true,
-      blueprint: "",
-      memory_policy: "tri-scope",
-      sub_agents: ["enabled"],
-      hitl_enabled: true,
-      self_improve: true,
-      system_prompt: "",
-      temperature: 0.0,
-      max_tokens: 8192,
-      model_call_limit: 50,
-      tool_call_limit: 200,
-    },
+    skills: "research, summarize, fact-check",
   },
 ];
 
-const statusColor = (status: string): "green" | "blue" | "orange" | "grey" | "red" => {
-  switch (status) {
-    case "active":
-      return "green";
-    case "busy":
-      return "orange";
-    case "idle":
-      return "blue";
-    case "offline":
-      return "red";
-    default:
-      return "grey";
-  }
-};
-
-const emptyDeployForm = () => ({
-  name: "",
-  model: MODEL_OPTIONS[0],
-  capabilities: "",
-  protocols: { a2a: true, acp: false, mcp: false } as Record<string, boolean>,
-  agentType: "create_agent" as "create_agent" | "create_deep_agent",
-  deepConfig: undefined as DeepConfig | undefined,
-});
-
 export const AgentsPage = () => {
   const navigate = useNavigate();
-  const [agents, setAgents] = useState<MeshAgent[]>([]);
+  const [agents, setAgents] = useState<Agent[]>([]);
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
 
-  const [deployModalOpen, setDeployModalOpen] = useState(false);
-  const [yamlModalOpen, setYamlModalOpen] = useState(false);
-  const [form, setForm] = useState(emptyDeployForm());
+  const [deployOpen, setDeployOpen] = useState(false);
+  const [yamlOpen, setYamlOpen] = useState(false);
+  const [form, setForm] = useState({ name: "", model: MODEL_OPTIONS[0], skills: "" });
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [submitSuccess, setSubmitSuccess] = useState<string | null>(null);
@@ -198,28 +107,11 @@ export const AgentsPage = () => {
     fetchAgents();
   }, [fetchAgents]);
 
-
-  const openDeployModal = (prefill?: Partial<ReturnType<typeof emptyDeployForm>>) => {
-    setForm({ ...emptyDeployForm(), ...prefill });
+  const openDeploy = (prefill?: Partial<typeof form>) => {
+    setForm({ name: "", model: MODEL_OPTIONS[0], skills: "", ...prefill });
     setSubmitError(null);
     setSubmitSuccess(null);
-    setDeployModalOpen(true);
-  };
-
-  const closeDeployModal = () => {
-    setDeployModalOpen(false);
-    setSubmitError(null);
-  };
-
-  const openTemplateDeploy = (template: AgentTemplate) => {
-    openDeployModal({
-      name: template.agentName,
-      model: template.model,
-      capabilities: template.skills.join(", "),
-      protocols: { a2a: true, acp: true, mcp: false },
-      agentType: template.agentType,
-      deepConfig: template.deepConfig,
-    });
+    setDeployOpen(true);
   };
 
   const handleDeploy = async () => {
@@ -227,48 +119,52 @@ export const AgentsPage = () => {
       setSubmitError("Agent name is required");
       return;
     }
-    const capabilities = form.capabilities
+    const capabilities = form.skills
       .split(",")
       .map((s) => s.trim())
       .filter(Boolean);
     capabilities.push(`model:${form.model}`);
 
-    const protocols = PROTOCOL_OPTIONS.filter((p) => form.protocols[p]);
-
     setSubmitting(true);
     setSubmitError(null);
     setSubmitSuccess(null);
     try {
-      const body: Record<string, unknown> = {
-        name: form.name.trim(),
-        agent_type: form.agentType,
-        capabilities,
-        protocols,
-        status: "active",
-      };
-      if (form.agentType === "create_deep_agent" && form.deepConfig) {
-        body.deep_config = form.deepConfig;
-      }
       const res = await fetch("/api/v1/agents/register", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
+        body: JSON.stringify({
+          name: form.name.trim(),
+          agent_type: "create_deep_agent",
+          capabilities,
+          protocols: ["a2a", "acp"],
+          status: "active",
+          deep_config: {
+            world_model: true,
+            skill_graph: true,
+            blueprint: "",
+            memory_policy: "tri-scope",
+            sub_agents: [],
+            hitl_enabled: false,
+            self_improve: true,
+            system_prompt: "",
+            temperature: 0.0,
+            max_tokens: 8192,
+            model_call_limit: 50,
+            tool_call_limit: 200,
+          },
+        }),
       });
       const data = await res.json();
-      if (!res.ok) {
-        throw new Error(data.error ?? `HTTP ${res.status}`);
-      }
-      setSubmitSuccess(`Agent "${data.name}" registered successfully`);
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setSubmitSuccess(`Agent "${data.name}" deployed`);
       await fetchAgents();
     } catch (e) {
-      setSubmitError(e instanceof Error ? e.message : "Failed to register agent");
+      setSubmitError(e instanceof Error ? e.message : "Deploy failed");
     } finally {
       setSubmitting(false);
     }
   };
 
-  const hasAgents = agents.length > 0;
-
   return (
     <>
       <PageSection hasBodyWrapper={false}>
@@ -276,11 +172,11 @@ export const AgentsPage = () => {
           <div>
             <Title headingLevel="h1" size="2xl">Agents</Title>
             <Content component="p" style={{ marginTop: 4 }}>
-              Deploy and manage Kubernetes-native AI agents.
+              All your deployed agents in one place.
             </Content>
           </div>
-          <Button variant="primary" icon={<PlusCircleIcon />} onClick={() => openDeployModal()}>
-            Deploy Agent
+          <Button variant="primary" icon={<PlusCircleIcon />} onClick={() => openDeploy()}>
+            Deploy agent
           </Button>
         </div>
       </PageSection>
@@ -296,182 +192,152 @@ export const AgentsPage = () => {
           <div style={{ textAlign: "center", padding: 40 }}>
             <Spinner size="xl" />
           </div>
-        ) : hasAgents ? (
-          <>
-            <div className="section-title">Registered Agents ({agents.length})</div>
-            <Table aria-label="Registered agents" variant="compact">
-              <Thead>
-                <Tr>
-                  <Th>Name</Th>
-                  <Th>Type</Th>
-                  <Th>Status</Th>
-                  <Th>Capabilities</Th>
-                  <Th>Protocols</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {agents.map((agent) => (
-                  <Tr
-                    key={agent.name}
-                    isClickable
-                    onRowClick={() => navigate(`/agents/${agent.name}`)}
-                  >
-                    <Td dataLabel="Name">
-                      <Button variant="link" isInline onClick={() => navigate(`/agents/${agent.name}`)}>
-                        {agent.name}
-                      </Button>
-                    </Td>
-                    <Td dataLabel="Type">
-                      <Label
-                        color={agent.agent_type === "create_deep_agent" ? "purple" : "blue"}
-                        isCompact
-                      >
-                        {agent.agent_type === "create_deep_agent" ? "deep" : "standard"}
-                      </Label>
-                    </Td>
-                    <Td dataLabel="Status">
-                      <Label color={statusColor(agent.status)} isCompact>
-                        {agent.status}
-                      </Label>
-                    </Td>
-                    <Td dataLabel="Capabilities">
-                      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-                        {(agent.capabilities ?? []).map((c) => (
-                          <Label color="grey" isCompact key={c}>{c}</Label>
-                        ))}
-                      </div>
-                    </Td>
-                    <Td dataLabel="Protocols">
-                      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-                        {(agent.protocols ?? []).map((p) => (
-                          <Label color="purple" isCompact key={p}>{p}</Label>
-                        ))}
-                      </div>
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </>
+        ) : agents.length > 0 ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {agents.map((agent) => {
+              const st = STATUS_MAP[agent.status] ?? STATUS_MAP.offline;
+              const skills = (agent.capabilities ?? []).filter((c) => !c.startsWith("model:"));
+              const model = (agent.capabilities ?? []).find((c) => c.startsWith("model:"))?.replace("model:", "");
+              return (
+                <div
+                  key={agent.name}
+                  onClick={() => navigate(`/agents/${agent.name}`)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 16,
+                    padding: "16px 20px",
+                    background: "var(--arcana-card-bg)",
+                    borderRadius: 10,
+                    border: "1px solid var(--arcana-card-border)",
+                    cursor: "pointer",
+                    transition: "background 0.15s",
+                  }}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)"; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)"; }}
+                >
+                  <span style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: st.color === "green" ? "#22c55e" : st.color === "orange" ? "#f59e0b" : st.color === "red" ? "#ef4444" : "#8b95a5",
+                    flexShrink: 0,
+                  }} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 15, fontWeight: 600, color: "var(--arcana-text)" }}>
+                      {agent.name}
+                    </div>
+                    <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                      {model ?? "—"} &middot; {st.label}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+                    {skills.slice(0, 4).map((s) => (
+                      <Label key={s} isCompact color="grey">{s}</Label>
+                    ))}
+                    {skills.length > 4 && (
+                      <Label isCompact color="grey">+{skills.length - 4}</Label>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         ) : (
           <div className="arcana-empty-state">
             <div className="arcana-empty-icon">
               <RobotIcon />
             </div>
             <Title headingLevel="h2" size="xl" style={{ marginBottom: 8 }}>
-              No agents deployed yet
+              No agents yet
             </Title>
             <Content component="p" style={{ maxWidth: 480, margin: "0 auto 32px auto", color: "var(--pf-t--global--text--color--subtle)" }}>
-              Get started by deploying from a template below, or apply your own ArcanaAgent YAML to the cluster.
+              Deploy from a template below, or use your own YAML.
             </Content>
           </div>
         )}
 
-        <div className="section-title">Agent Templates</div>
-        <Grid hasGutter>
-          {AGENT_TEMPLATES.map((t) => (
-            <GridItem span={6} key={t.name}>
-              <Card className="stat-card">
-                <CardBody>
-                  <div style={{ display: "flex", gap: 16 }}>
-                    <div className="action-card-icon" style={{ margin: 0, flexShrink: 0 }}>
-                      {t.icon}
-                    </div>
-                    <div style={{ flex: 1 }}>
-                      <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{t.name}</div>
-                      <div style={{ fontSize: 13, color: "var(--pf-t--global--text--color--subtle)", marginBottom: 10 }}>
-                        {t.desc}
-                      </div>
-                      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
-                        <Label
-                          color={t.agentType === "create_deep_agent" ? "purple" : "blue"}
-                          isCompact
-                        >
-                          {t.agentType === "create_deep_agent" ? "deep agent" : "standard agent"}
-                        </Label>
-                        <Label color="teal" isCompact>{t.model}</Label>
-                        {t.skills.map((s) => (
-                          <Label color="grey" isCompact key={s}>{s}</Label>
-                        ))}
-                      </div>
-                    </div>
-                    <Button variant="secondary" size="sm" style={{ alignSelf: "center" }} onClick={() => openTemplateDeploy(t)}>
-                      Deploy
-                    </Button>
+        {/* Templates */}
+        <div style={{ marginTop: 32 }}>
+          <div style={{
+            fontSize: 11,
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "1.2px",
+            color: "var(--arcana-text-muted)",
+            marginBottom: 12,
+          }}>
+            Templates
+          </div>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
+            {TEMPLATES.map((t) => (
+              <div
+                key={t.name}
+                style={{
+                  padding: "20px 24px",
+                  background: "var(--arcana-card-bg)",
+                  borderRadius: 10,
+                  border: "1px solid var(--arcana-card-border)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: 16,
+                  cursor: "pointer",
+                  transition: "border-color 0.15s",
+                }}
+                onClick={() => openDeploy({ name: t.agentName, model: t.model, skills: t.skills })}
+                onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(91,141,239,0.3)"; }}
+                onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.borderColor = "var(--arcana-card-border)"; }}
+              >
+                <div>
+                  <div style={{ fontSize: 15, fontWeight: 600, color: "var(--arcana-text)", marginBottom: 4 }}>
+                    {t.name}
                   </div>
-                </CardBody>
-              </Card>
-            </GridItem>
-          ))}
-        </Grid>
-
-        <div style={{ marginTop: 24, textAlign: "center" }}>
-          <Button variant="link" icon={<CodeIcon />} onClick={() => setYamlModalOpen(true)}>
-            View YAML example for custom agent
-          </Button>
+                  <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                    {t.desc}
+                  </div>
+                </div>
+                <Button variant="secondary" size="sm">
+                  Deploy
+                </Button>
+              </div>
+            ))}
+          </div>
+          <div style={{ marginTop: 16, textAlign: "center" }}>
+            <Button variant="link" icon={<CodeIcon />} onClick={() => setYamlOpen(true)}>
+              View YAML example
+            </Button>
+          </div>
         </div>
       </PageSection>
 
+      {/* Deploy modal — simplified, no type selector */}
       <Modal
         variant={ModalVariant.medium}
-        isOpen={deployModalOpen}
-        onClose={closeDeployModal}
+        isOpen={deployOpen}
+        onClose={() => setDeployOpen(false)}
         aria-labelledby="deploy-agent-title"
       >
-        <ModalHeader title="Deploy Agent" labelId="deploy-agent-title" />
+        <ModalHeader title="Deploy agent" labelId="deploy-agent-title" />
         <ModalBody>
           {submitError && (
-            <Alert variant="danger" title="Registration failed" isInline style={{ marginBottom: 16 }}>
+            <Alert variant="danger" title="Deploy failed" isInline style={{ marginBottom: 16 }}>
               {submitError}
             </Alert>
           )}
           {submitSuccess && (
-            <Alert variant="success" title="Success" isInline style={{ marginBottom: 16 }}>
-              {submitSuccess}
-            </Alert>
+            <Alert variant="success" title={submitSuccess} isInline style={{ marginBottom: 16 }} />
           )}
-          <Form id="deploy-agent-form">
+          <Form id="deploy-form">
             <FormGroup label="Name" isRequired fieldId="agent-name">
               <TextInput
                 id="agent-name"
                 value={form.name}
                 onChange={(_e, v) => setForm((f) => ({ ...f, name: v }))}
+                placeholder="my-agent"
                 isRequired
               />
             </FormGroup>
-            <FormGroup label="Agent Type" fieldId="agent-type">
-              <FormSelect
-                id="agent-type"
-                value={form.agentType}
-                onChange={(_e, v) =>
-                  setForm((f) => ({
-                    ...f,
-                    agentType: v as "create_agent" | "create_deep_agent",
-                    deepConfig:
-                      v === "create_deep_agent"
-                        ? f.deepConfig ?? {
-                            world_model: true,
-                            skill_graph: true,
-                            blueprint: "",
-                            memory_policy: "tri-scope",
-                            sub_agents: [],
-                            hitl_enabled: false,
-                            self_improve: false,
-                            system_prompt: "",
-                            temperature: 0.0,
-                            max_tokens: 8192,
-                            model_call_limit: 50,
-                            tool_call_limit: 200,
-                          }
-                        : undefined,
-                  }))
-                }
-                aria-label="Agent type"
-              >
-                <FormSelectOption value="create_agent" label="create_agent  —  Standard agent" />
-                <FormSelectOption value="create_deep_agent" label="create_deep_agent  —  Deep agent (world model, skills, HITL)" />
-              </FormSelect>
-            </FormGroup>
             <FormGroup label="Model" fieldId="agent-model">
               <FormSelect
                 id="agent-model"
@@ -484,171 +350,14 @@ export const AgentsPage = () => {
                 ))}
               </FormSelect>
             </FormGroup>
-            <FormGroup label="Capabilities" fieldId="agent-capabilities">
+            <FormGroup label="Skills" fieldId="agent-skills">
               <TextInput
-                id="agent-capabilities"
-                value={form.capabilities}
-                onChange={(_e, v) => setForm((f) => ({ ...f, capabilities: v }))}
+                id="agent-skills"
+                value={form.skills}
+                onChange={(_e, v) => setForm((f) => ({ ...f, skills: v }))}
                 placeholder="search, summarize, code-gen"
               />
             </FormGroup>
-            <FormGroup label="Protocols" fieldId="agent-protocols">
-              {PROTOCOL_OPTIONS.map((p) => (
-                <Checkbox
-                  key={p}
-                  id={`protocol-${p}`}
-                  label={p.toUpperCase()}
-                  isChecked={form.protocols[p]}
-                  onChange={(_e, checked) =>
-                    setForm((f) => ({ ...f, protocols: { ...f.protocols, [p]: checked } }))
-                  }
-                />
-              ))}
-            </FormGroup>
-            {form.agentType === "create_deep_agent" && (
-              <>
-                <Divider style={{ margin: "16px 0" }} />
-                <div style={{ fontWeight: 700, marginBottom: 8 }}>Deep Agent Features</div>
-                <FormGroup fieldId="deep-features">
-                  <Checkbox
-                    id="deep-world-model"
-                    label="World Model (Oracle L2 — tool outcome prediction)"
-                    isChecked={form.deepConfig?.world_model ?? false}
-                    onChange={(_e, c) =>
-                      setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, world_model: c } }))
-                    }
-                  />
-                  <Checkbox
-                    id="deep-skill-graph"
-                    label="Skill Graph (3-tier with experiential memory)"
-                    isChecked={form.deepConfig?.skill_graph ?? false}
-                    onChange={(_e, c) =>
-                      setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, skill_graph: c } }))
-                    }
-                  />
-                  <Checkbox
-                    id="deep-hitl"
-                    label="HITL Gates (human-in-the-loop approval)"
-                    isChecked={form.deepConfig?.hitl_enabled ?? false}
-                    onChange={(_e, c) =>
-                      setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, hitl_enabled: c } }))
-                    }
-                  />
-                  <Checkbox
-                    id="deep-self-improve"
-                    label="Self-Improvement (auto-crystallize skills)"
-                    isChecked={form.deepConfig?.self_improve ?? false}
-                    onChange={(_e, c) =>
-                      setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, self_improve: c } }))
-                    }
-                  />
-                  <Checkbox
-                    id="deep-sub-agents"
-                    label="Sub-Agents (multi-agent delegation)"
-                    isChecked={(form.deepConfig?.sub_agents?.length ?? 0) > 0}
-                    onChange={(_e, c) =>
-                      setForm((f) => ({
-                        ...f,
-                        deepConfig: { ...f.deepConfig!, sub_agents: c ? ["enabled"] : [] },
-                      }))
-                    }
-                  />
-                </FormGroup>
-
-                <ExpandableSection
-                  toggleText="Advanced Parameters"
-                  style={{ marginTop: 16 }}
-                >
-                  <FormGroup label="System Prompt" fieldId="deep-system-prompt">
-                    <TextArea
-                      id="deep-system-prompt"
-                      value={form.deepConfig?.system_prompt ?? ""}
-                      onChange={(_e, v) =>
-                        setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, system_prompt: v } }))
-                      }
-                      placeholder="Custom system prompt (leave blank for auto-generated)"
-                      rows={4}
-                      resizeOrientation="vertical"
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label={`Temperature: ${form.deepConfig?.temperature?.toFixed(1) ?? "0.0"}`}
-                    fieldId="deep-temperature"
-                    style={{ marginTop: 12 }}
-                  >
-                    <Slider
-                      id="deep-temperature"
-                      value={(form.deepConfig?.temperature ?? 0) * 100}
-                      max={200}
-                      min={0}
-                      step={10}
-                      onChange={(_e, v) =>
-                        setForm((f) => ({
-                          ...f,
-                          deepConfig: { ...f.deepConfig!, temperature: v / 100 },
-                        }))
-                      }
-                      areCustomStepsContinuous
-                    />
-                  </FormGroup>
-                  <FormGroup label="Max Output Tokens" fieldId="deep-max-tokens" style={{ marginTop: 12 }}>
-                    <TextInput
-                      id="deep-max-tokens"
-                      type="number"
-                      value={form.deepConfig?.max_tokens ?? 8192}
-                      onChange={(_e, v) =>
-                        setForm((f) => ({
-                          ...f,
-                          deepConfig: { ...f.deepConfig!, max_tokens: parseInt(v) || 8192 },
-                        }))
-                      }
-                    />
-                  </FormGroup>
-                  <FormGroup label="Memory Policy" fieldId="deep-memory-policy" style={{ marginTop: 12 }}>
-                    <FormSelect
-                      id="deep-memory-policy"
-                      value={form.deepConfig?.memory_policy ?? "tri-scope"}
-                      onChange={(_e, v) =>
-                        setForm((f) => ({ ...f, deepConfig: { ...f.deepConfig!, memory_policy: v } }))
-                      }
-                    >
-                      <FormSelectOption value="tri-scope" label="Tri-Scope (short + long + skill)" />
-                      <FormSelectOption value="long-term" label="Long-Term Only" />
-                      <FormSelectOption value="short-term" label="Short-Term Only" />
-                      <FormSelectOption value="none" label="No Memory" />
-                    </FormSelect>
-                  </FormGroup>
-                  <div style={{ display: "flex", gap: 16, marginTop: 12 }}>
-                    <FormGroup label="Model Call Limit" fieldId="deep-model-limit" style={{ flex: 1 }}>
-                      <TextInput
-                        id="deep-model-limit"
-                        type="number"
-                        value={form.deepConfig?.model_call_limit ?? 50}
-                        onChange={(_e, v) =>
-                          setForm((f) => ({
-                            ...f,
-                            deepConfig: { ...f.deepConfig!, model_call_limit: parseInt(v) || 50 },
-                          }))
-                        }
-                      />
-                    </FormGroup>
-                    <FormGroup label="Tool Call Limit" fieldId="deep-tool-limit" style={{ flex: 1 }}>
-                      <TextInput
-                        id="deep-tool-limit"
-                        type="number"
-                        value={form.deepConfig?.tool_call_limit ?? 200}
-                        onChange={(_e, v) =>
-                          setForm((f) => ({
-                            ...f,
-                            deepConfig: { ...f.deepConfig!, tool_call_limit: parseInt(v) || 200 },
-                          }))
-                        }
-                      />
-                    </FormGroup>
-                  </div>
-                </ExpandableSection>
-              </>
-            )}
           </Form>
         </ModalBody>
         <ModalFooter>
@@ -660,23 +369,20 @@ export const AgentsPage = () => {
           >
             Deploy
           </Button>
-          <Button variant="link" onClick={closeDeployModal}>
+          <Button variant="link" onClick={() => setDeployOpen(false)}>
             Cancel
           </Button>
         </ModalFooter>
       </Modal>
 
+      {/* YAML example modal */}
       <Modal
         variant={ModalVariant.medium}
-        isOpen={yamlModalOpen}
-        onClose={() => setYamlModalOpen(false)}
-        aria-labelledby="agent-yaml-title"
+        isOpen={yamlOpen}
+        onClose={() => setYamlOpen(false)}
+        aria-labelledby="yaml-title"
       >
-        <ModalHeader
-          title="ArcanaAgent YAML Example"
-          description="Custom agent Custom Resource definition."
-          labelId="agent-yaml-title"
-        />
+        <ModalHeader title="Agent YAML Example" labelId="yaml-title" />
         <ModalBody>
           <pre style={{
             margin: 0,
@@ -685,15 +391,12 @@ export const AgentsPage = () => {
             borderRadius: 4,
             fontSize: 12,
             overflow: "auto",
-          }}
-          >
+          }}>
             {ARCANA_AGENT_YAML}
           </pre>
         </ModalBody>
         <ModalFooter>
-          <Button variant="primary" onClick={() => setYamlModalOpen(false)}>
-            Close
-          </Button>
+          <Button variant="primary" onClick={() => setYamlOpen(false)}>Close</Button>
         </ModalFooter>
       </Modal>
     </>
diff --git a/services/studio/src/pages/ApprovalsPage.tsx b/services/studio/src/pages/ApprovalsPage.tsx
index fed929d..0cf117b 100644
--- a/services/studio/src/pages/ApprovalsPage.tsx
+++ b/services/studio/src/pages/ApprovalsPage.tsx
@@ -150,7 +150,7 @@ export const ApprovalsPage = () => {
     try {
       const params = new URLSearchParams();
       if (statusFilter !== "all") params.set("status", statusFilter);
-      const res = await fetch(`/api/v1/approvals?${params}`);
+      const res = await fetch(`/api/v1/promotions?${params}`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       const fetched: ApprovalEntry[] = data.entries ?? data.approvals ?? [];
@@ -186,7 +186,7 @@ export const ApprovalsPage = () => {
     if (!reviewTarget) return;
     setSubmitting(true);
     try {
-      const res = await fetch(`/api/v1/approvals/${encodeURIComponent(reviewTarget.id)}/approve`, {
+      const res = await fetch(`/api/v1/promotions/${encodeURIComponent(reviewTarget.id)}/approve`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ comment }),
@@ -210,7 +210,7 @@ export const ApprovalsPage = () => {
     if (!reviewTarget) return;
     setSubmitting(true);
     try {
-      const res = await fetch(`/api/v1/approvals/${encodeURIComponent(reviewTarget.id)}/reject`, {
+      const res = await fetch(`/api/v1/promotions/${encodeURIComponent(reviewTarget.id)}/reject`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ comment }),
diff --git a/services/studio/src/pages/AuditExplorerPage.tsx b/services/studio/src/pages/AuditExplorerPage.tsx
index 1ca9787..01dc0fb 100644
--- a/services/studio/src/pages/AuditExplorerPage.tsx
+++ b/services/studio/src/pages/AuditExplorerPage.tsx
@@ -76,7 +76,7 @@ function generateMockEntries(count: number): AuditEntry[] {
   const agents = ["research-pipeline-agent", "code-assistant", "data-pipeline-agent", "support-bot", "content-writer"];
   const users = ["alice@acme.com", "bob@acme.com", "charlie@acme.com", "system"];
   const actions = ["tool_call", "model_invoke", "agent_deploy", "config_change", "data_access", "guardrail_trigger"];
-  const resources = ["/api/v1/agents", "/api/v1/skills/search", "/api/v1/mcp/execute", "/api/v1/eval/run", "/api/v1/connectors"];
+  const resources = ["/api/v1/agents", "/api/v1/skills/search", "/api/v1/tools/execute", "/api/v1/eval/run", "/api/v1/connectors"];
   const verdicts: Array<"allowed" | "blocked"> = ["allowed", "allowed", "allowed", "allowed", "blocked"];
 
   const entries: AuditEntry[] = [];
diff --git a/services/studio/src/pages/BuildHubPage.tsx b/services/studio/src/pages/BuildHubPage.tsx
index 52b8df7..3138759 100644
--- a/services/studio/src/pages/BuildHubPage.tsx
+++ b/services/studio/src/pages/BuildHubPage.tsx
@@ -64,11 +64,11 @@ const PACKAGE_CARDS: {
   color: string;
   desc: string;
 }[] = [
-  { kind: "agent", label: "Create Agent", icon: <RobotIcon />, color: "#3b82f6", desc: "Deploy an AI agent with custom skills and tools" },
-  { kind: "skill", label: "Create Skill", icon: <CubesIcon />, color: "#a855f7", desc: "Build a reusable capability for agents" },
-  { kind: "model", label: "Create Model", icon: <BrainIcon />, color: "#22c55e", desc: "Register an LLM provider and model" },
-  { kind: "mcp", label: "Create MCP Server", icon: <CodeIcon />, color: "#06b6d4", desc: "Connect external tools via MCP" },
-  { kind: "subagent", label: "Create Subagent", icon: <UsersIcon />, color: "#f97316", desc: "Build a specialized agent as a tool" },
+  { kind: "agent", label: "Deploy Agent", icon: <RobotIcon />, color: "#3b82f6", desc: "Name it, pick a model, add skills, deploy" },
+  { kind: "skill", label: "Add Skill", icon: <CubesIcon />, color: "#a855f7", desc: "Build a reusable capability for agents" },
+  { kind: "model", label: "Register Model", icon: <BrainIcon />, color: "#22c55e", desc: "Connect an LLM provider" },
+  { kind: "mcp", label: "Connect MCP", icon: <CodeIcon />, color: "#06b6d4", desc: "Plug in external tools via MCP" },
+  { kind: "subagent", label: "Add Subagent", icon: <UsersIcon />, color: "#f97316", desc: "Create a specialist agent as a tool" },
 ];
 
 const PROVIDERS = [
@@ -120,10 +120,9 @@ export const BuildHubPage = () => {
     <>
       <PageSection hasBodyWrapper={false}>
         <div style={{ textAlign: "center", padding: "40px 0 24px" }}>
-          <Title headingLevel="h1" size="2xl">Build something amazing</Title>
+          <Title headingLevel="h1" size="2xl">New deployment</Title>
           <Content component="p" style={{ marginTop: 8, maxWidth: 520, margin: "8px auto 0", color: "var(--pf-t--global--text--color--subtle)" }}>
-            Create agents, skills, models, and MCP servers from a single hub.
-            Choose a package type below to get started.
+            Deploy an agent, register a skill or model, or connect an MCP server.
           </Content>
         </div>
       </PageSection>
@@ -841,7 +840,7 @@ const ModelWizard = ({ onClose }: { onClose: () => void }) => {
 const GenericWizard = ({ kind, onClose }: { kind: "mcp" | "subagent"; onClose: () => void }) => {
   const isMcp = kind === "mcp";
   const title = isMcp ? "Register MCP Server" : "Create Subagent";
-  const endpoint = isMcp ? "/api/v1/mcp" : "/api/v1/agents/register";
+  const endpoint = isMcp ? "/api/v1/tools" : "/api/v1/agents/register";
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
diff --git a/services/studio/src/pages/ChatDrawer.tsx b/services/studio/src/pages/ChatDrawer.tsx
index 572aa9e..81cbf88 100644
--- a/services/studio/src/pages/ChatDrawer.tsx
+++ b/services/studio/src/pages/ChatDrawer.tsx
@@ -1,55 +1,20 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Chatbot, {
-  ChatbotDisplayMode,
-} from "@patternfly/chatbot/dist/dynamic/Chatbot";
-import ChatbotContent from "@patternfly/chatbot/dist/dynamic/ChatbotContent";
-import ChatbotWelcomePrompt from "@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt";
-import ChatbotFooter, {
-  ChatbotFootnote,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotFooter";
-import MessageBar from "@patternfly/chatbot/dist/dynamic/MessageBar";
-import MessageBox from "@patternfly/chatbot/dist/dynamic/MessageBox";
-import Message from "@patternfly/chatbot/dist/dynamic/Message";
-import ChatbotHeader, {
-  ChatbotHeaderMain,
-  ChatbotHeaderTitle,
-  ChatbotHeaderActions,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotHeader";
-import { Button } from "@patternfly/react-core";
-import { TimesIcon } from "@patternfly/react-icons";
 import { useAuth } from "../auth/AuthContext";
-import {
-  detectCommand,
-  executePlatformCommand,
-} from "./platformCommands";
+import { detectCommand, executePlatformCommand } from "./platformCommands";
 
 interface ConversationMessage {
   id: string;
   role: "user" | "bot";
   content: string;
-  /** Agent name produced by a deploy/suspend/resume command, for the nav button. */
   agentName?: string;
   timestamp: string;
 }
 
-const WELCOME_PROMPTS = [
-  {
-    title: "Deploy an agent",
-    message: "Deploy an agent called my-assistant",
-  },
-  {
-    title: "Show costs",
-    message: "Show me the current platform costs",
-  },
-  {
-    title: "Check system status",
-    message: "What is the system health status?",
-  },
-  {
-    title: "List skills",
-    message: "List all available skills",
-  },
+const QUICK = [
+  { label: "Deploy agent", msg: "Deploy an agent called my-assistant" },
+  { label: "System status", msg: "What is the system health status?" },
+  { label: "List skills", msg: "List all available skills" },
 ];
 
 interface ChatDrawerProps {
@@ -61,298 +26,241 @@ export const ChatDrawer = ({ isOpen, onClose }: ChatDrawerProps) => {
   const navigate = useNavigate();
   const { authHeaders } = useAuth();
   const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [sessionId, setSessionId] = useState<string | null>(null);
-  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
 
-  useEffect(() => {
-    if (scrollToBottomRef.current) {
-      scrollToBottomRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [messages, isLoading]);
+  useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages, isLoading]);
 
-  // Abort any in-flight SSE stream when the drawer closes.
   useEffect(() => {
-    if (!isOpen && abortRef.current) {
-      abortRef.current.abort();
-      abortRef.current = null;
-    }
+    if (!isOpen && abortRef.current) { abortRef.current.abort(); abortRef.current = null; }
+    if (isOpen) setTimeout(() => inputRef.current?.focus(), 100);
   }, [isOpen]);
 
-  const streamAgentResponse = useCallback(
-    async (text: string) => {
-      const controller = new AbortController();
-      abortRef.current = controller;
-
-      const botId = `bot-${Date.now()}`;
-      setMessages((prev) => [
-        ...prev,
-        { id: botId, role: "bot", content: "", timestamp: new Date().toLocaleTimeString() },
-      ]);
-
-      try {
-        const payload: Record<string, string> = { message: text };
-        if (sessionId) payload.session_id = sessionId;
-
-        const res = await fetch("/api/v1/chat/stream", {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...authHeaders() },
-          body: JSON.stringify(payload),
-          signal: controller.signal,
-        });
+  const streamResponse = useCallback(async (text: string) => {
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const botId = `bot-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: botId, role: "bot", content: "", timestamp: new Date().toLocaleTimeString() }]);
 
-        if (!res.ok) {
-          throw new Error(`HTTP ${res.status}`);
-        }
-
-        const contentType = res.headers.get("content-type") ?? "";
-        if (contentType.includes("text/event-stream") && res.body) {
-          const reader = res.body.getReader();
-          const decoder = new TextDecoder();
-          let accumulated = "";
+    try {
+      const payload: Record<string, string> = { message: text };
+      if (sessionId) payload.session_id = sessionId;
+      const res = await fetch("/api/v1/chat/stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...authHeaders() },
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            const chunk = decoder.decode(value, { stream: true });
-
-            // Parse SSE lines
-            const lines = chunk.split("\n");
-            for (const line of lines) {
-              if (line.startsWith("data: ")) {
-                const payload = line.slice(6);
-                if (payload === "[DONE]") break;
-                try {
-                  const parsed = JSON.parse(payload);
-                  if (parsed.session_id) setSessionId(parsed.session_id);
-                  if (parsed.token) {
-                    accumulated += parsed.token;
-                    setMessages((prev) =>
-                      prev.map((m) => (m.id === botId ? { ...m, content: accumulated } : m)),
-                    );
-                  }
-                  if (parsed.content) {
-                    accumulated += parsed.content;
-                    setMessages((prev) =>
-                      prev.map((m) => (m.id === botId ? { ...m, content: accumulated } : m)),
-                    );
-                  }
-                } catch {
-                  // Non-JSON SSE line, treat as plain text token
-                  if (payload.trim()) {
-                    accumulated += payload;
-                    setMessages((prev) =>
-                      prev.map((m) => (m.id === botId ? { ...m, content: accumulated } : m)),
-                    );
-                  }
-                }
-              }
+      const ct = res.headers.get("content-type") ?? "";
+      if (ct.includes("text/event-stream") && res.body) {
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let acc = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          for (const line of decoder.decode(value, { stream: true }).split("\n")) {
+            if (!line.startsWith("data: ")) continue;
+            const d = line.slice(6);
+            if (d === "[DONE]") break;
+            try {
+              const p = JSON.parse(d);
+              if (p.session_id) setSessionId(p.session_id);
+              const tok = p.token ?? p.content ?? "";
+              if (tok) { acc += tok; setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: acc } : m)); }
+            } catch {
+              if (d.trim()) { acc += d; setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: acc } : m)); }
             }
           }
-
-          // If nothing was streamed, show a fallback
-          if (!accumulated) {
-            setMessages((prev) =>
-              prev.map((m) => (m.id === botId ? { ...m, content: "Done." } : m)),
-            );
-          }
-        } else {
-          // Non-streaming JSON fallback
-          const data = await res.json();
-          if (data.session_id) setSessionId(data.session_id);
-          setMessages((prev) =>
-            prev.map((m) =>
-              m.id === botId ? { ...m, content: data.reply ?? data.content ?? "Done." } : m,
-            ),
-          );
         }
-      } catch (err) {
-        if (err instanceof DOMException && err.name === "AbortError") return;
-        setMessages((prev) =>
-          prev.map((m) =>
-            m.id === botId
-              ? {
-                  ...m,
-                  content:
-                    "Sorry, I couldn't reach the Arcana API. Is the platform running? Try `make dev` to start.",
-                }
-              : m,
-          ),
-        );
+        if (!acc) setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: "Done." } : m));
+      } else {
+        const data = await res.json();
+        if (data.session_id) setSessionId(data.session_id);
+        setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: data.reply ?? data.content ?? "Done." } : m));
       }
-    },
-    [sessionId, authHeaders],
-  );
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: "Could not reach the API." } : m));
+    }
+  }, [sessionId, authHeaders]);
 
-  const handleSend = useCallback(
-    async (message: string | number) => {
-      const text = String(message);
-      if (!text.trim() || isLoading) return;
+  const send = useCallback(async (text: string) => {
+    if (!text.trim() || isLoading) return;
+    setMessages((prev) => [...prev, { id: `user-${Date.now()}`, role: "user", content: text, timestamp: new Date().toLocaleTimeString() }]);
+    setInput("");
+    setIsLoading(true);
 
-      const userMsg: ConversationMessage = {
-        id: `user-${Date.now()}`,
-        role: "user",
-        content: text,
-        timestamp: new Date().toLocaleTimeString(),
-      };
-      setMessages((prev) => [...prev, userMsg]);
-      setIsLoading(true);
+    const action = detectCommand(text);
+    if (action) {
+      try {
+        const result = await executePlatformCommand(action, text, authHeaders());
+        setMessages((prev) => [...prev, { id: `bot-${Date.now()}`, role: "bot", content: result.markdown, agentName: result.agentName, timestamp: new Date().toLocaleTimeString() }]);
+      } catch {
+        setMessages((prev) => [...prev, { id: `err-${Date.now()}`, role: "bot", content: "Command failed.", timestamp: new Date().toLocaleTimeString() }]);
+      } finally { setIsLoading(false); }
+    } else {
+      try { await streamResponse(text); } finally { setIsLoading(false); }
+    }
+  }, [isLoading, authHeaders, streamResponse]);
 
-      const action = detectCommand(text);
-      if (action) {
-        try {
-          const result = await executePlatformCommand(action, text, authHeaders());
-          const botMsg: ConversationMessage = {
-            id: `bot-${Date.now()}`,
-            role: "bot",
-            content: result.markdown,
-            agentName: result.agentName,
-            timestamp: new Date().toLocaleTimeString(),
-          };
-          setMessages((prev) => [...prev, botMsg]);
-        } catch {
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `err-${Date.now()}`,
-              role: "bot",
-              content: "❌ **Command failed.** Could not reach the Arcana API.",
-              timestamp: new Date().toLocaleTimeString(),
-            },
-          ]);
-        } finally {
-          setIsLoading(false);
-        }
-      } else {
-        // Not a platform command — stream via AG-UI SSE endpoint
-        try {
-          await streamAgentResponse(text);
-        } finally {
-          setIsLoading(false);
-        }
-      }
-    },
-    [isLoading, authHeaders, streamAgentResponse],
-  );
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(input); }
+  };
 
   if (!isOpen) return null;
 
   return (
     <div className="arcana-chat-overlay">
-      <Chatbot displayMode={ChatbotDisplayMode.default}>
-        <ChatbotHeader>
-          <ChatbotHeaderMain>
-            <ChatbotHeaderTitle>
-              <span
-                style={{
-                  fontSize: 16,
-                  fontWeight: 700,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                }}
-              >
-                <span
-                  style={{
-                    width: 28,
-                    height: 28,
-                    borderRadius: 8,
-                    background: "var(--arcana-gradient, linear-gradient(135deg, #667eea, #764ba2))",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "#fff",
-                    fontSize: 14,
-                    fontWeight: 800,
-                  }}
-                >
-                  A
-                </span>
-                Arcana Chat
-              </span>
-            </ChatbotHeaderTitle>
-          </ChatbotHeaderMain>
-          <ChatbotHeaderActions>
-            <Button
-              variant="plain"
-              aria-label="Close chat"
-              onClick={onClose}
-              icon={<TimesIcon />}
-            />
-          </ChatbotHeaderActions>
-        </ChatbotHeader>
+      <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "var(--arcana-bg-secondary)", borderRadius: 16, overflow: "hidden" }}>
+        {/* Header */}
+        <div style={{
+          padding: "14px 18px", display: "flex", justifyContent: "space-between", alignItems: "center",
+          borderBottom: "1px solid var(--arcana-card-border)",
+        }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{
+              width: 26, height: 26, borderRadius: 7,
+              background: "linear-gradient(135deg, #5b8def, #a855f7)",
+              display: "flex", alignItems: "center", justifyContent: "center",
+              color: "#fff", fontSize: 12, fontWeight: 800,
+            }}>A</div>
+            <span style={{ fontSize: 14, fontWeight: 600, color: "var(--arcana-text)" }}>Arcana</span>
+          </div>
+          <button type="button" onClick={onClose} style={{
+            background: "none", border: "none", cursor: "pointer",
+            color: "var(--arcana-text-muted)", fontSize: 18, padding: 4, lineHeight: 1,
+          }} aria-label="Close chat">
+            &times;
+          </button>
+        </div>
 
-        <ChatbotContent>
-          <MessageBox>
-            {messages.length === 0 && (
-              <ChatbotWelcomePrompt
-                title="Hello! I'm Arcana."
-                description="Tell me what you need in plain English — deploy agents, check costs, view status, list skills and models."
-                prompts={WELCOME_PROMPTS.map((p) => ({
-                  title: p.title,
-                  message: p.message,
-                  onClick: () => handleSend(p.message),
-                }))}
-              />
-            )}
+        {/* Messages */}
+        <div style={{ flex: 1, overflowY: "auto", padding: "16px 16px" }}>
+          {messages.length === 0 && (
+            <div style={{ textAlign: "center", paddingTop: 40 }}>
+              <div style={{
+                width: 40, height: 40, borderRadius: 12, margin: "0 auto 14px",
+                background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                color: "#fff", fontSize: 18, fontWeight: 800,
+              }}>A</div>
+              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--arcana-text)", marginBottom: 6 }}>
+                How can I help?
+              </div>
+              <div style={{ fontSize: 12, color: "var(--arcana-text-muted)", marginBottom: 20 }}>
+                Ask anything about the platform.
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "center" }}>
+                {QUICK.map((s) => (
+                  <button key={s.label} type="button" onClick={() => send(s.msg)} style={{
+                    padding: "7px 14px", borderRadius: 16, fontSize: 12, fontWeight: 500,
+                    border: "1px solid var(--arcana-card-border)", background: "var(--arcana-card-bg)",
+                    color: "var(--arcana-text-secondary)", cursor: "pointer", transition: "all 0.15s",
+                  }}>
+                    {s.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
 
-            {messages.map((msg) => (
-              <div key={msg.id}>
-                <Message
-                  role={msg.role}
-                  content={msg.content}
-                  name={msg.role === "user" ? "You" : "Arcana"}
-                  timestamp={msg.timestamp}
-                />
-                {msg.role === "bot" && msg.agentName && (
-                  <div style={{ marginLeft: 56, marginTop: -8, marginBottom: 12 }}>
-                    <Button
-                      variant="link"
-                      onClick={() => {
-                        onClose();
-                        navigate(`/agents/${msg.agentName}`);
-                      }}
-                      style={{
-                        background:
-                          "var(--arcana-gradient, linear-gradient(135deg, #667eea, #764ba2))",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: 6,
-                        padding: "6px 16px",
-                        fontSize: 13,
-                        fontWeight: 600,
-                      }}
-                    >
-                      Open {msg.agentName} &rarr;
-                    </Button>
+          {messages.map((msg) => (
+            <div key={msg.id} style={{
+              display: "flex", gap: 8, marginBottom: 14,
+              flexDirection: msg.role === "user" ? "row-reverse" : "row",
+            }}>
+              {msg.role === "bot" && (
+                <div style={{
+                  width: 24, height: 24, borderRadius: 6, flexShrink: 0,
+                  background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  color: "#fff", fontSize: 10, fontWeight: 800, marginTop: 2,
+                }}>A</div>
+              )}
+              <div style={{
+                maxWidth: "80%", padding: "10px 14px",
+                borderRadius: msg.role === "user" ? "14px 14px 4px 14px" : "14px 14px 14px 4px",
+                background: msg.role === "user" ? "rgba(91,141,239,0.15)" : "var(--arcana-card-bg)",
+                border: msg.role === "user" ? "none" : "1px solid var(--arcana-card-border)",
+                color: "var(--arcana-text)", fontSize: 13, lineHeight: 1.5,
+                whiteSpace: "pre-wrap", wordBreak: "break-word",
+              }}>
+                {msg.content}
+                {msg.agentName && (
+                  <div style={{ marginTop: 6 }}>
+                    <button type="button" onClick={() => { onClose(); navigate(`/agents/${msg.agentName}`); }} style={{
+                      padding: "4px 10px", borderRadius: 4, border: "none", fontSize: 11, fontWeight: 600,
+                      background: "linear-gradient(135deg, #5b8def, #a855f7)", color: "#fff", cursor: "pointer",
+                    }}>
+                      Open {msg.agentName}
+                    </button>
                   </div>
                 )}
               </div>
-            ))}
+            </div>
+          ))}
 
-            {isLoading && (
-              <Message
-                role="bot"
-                name="Arcana"
-                content="Working on it..."
-                isLoading
-              />
-            )}
+          {isLoading && (
+            <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
+              <div style={{
+                width: 24, height: 24, borderRadius: 6, flexShrink: 0,
+                background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                color: "#fff", fontSize: 10, fontWeight: 800,
+              }}>A</div>
+              <div style={{
+                padding: "10px 14px", borderRadius: "14px 14px 14px 4px",
+                background: "var(--arcana-card-bg)", border: "1px solid var(--arcana-card-border)",
+              }}>
+                <span className="arcana-typing-dots"><span /><span /><span /></span>
+              </div>
+            </div>
+          )}
 
-            <div ref={scrollToBottomRef} />
-          </MessageBox>
-        </ChatbotContent>
+          <div ref={scrollRef} />
+        </div>
 
-        <ChatbotFooter>
-          <MessageBar
-            onSendMessage={handleSend}
-            hasAttachButton={false}
-            hasMicrophoneButton={false}
-          />
-          <ChatbotFootnote label="Arcana Chat — no data leaves the cluster." />
-        </ChatbotFooter>
-      </Chatbot>
+        {/* Input */}
+        <div style={{ padding: "12px 14px 16px", borderTop: "1px solid var(--arcana-card-border)" }}>
+          <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask something..."
+              rows={1}
+              style={{
+                flex: 1, padding: "10px 14px", borderRadius: 10, resize: "none",
+                border: "1px solid var(--arcana-card-border)", background: "var(--arcana-input-bg)",
+                color: "var(--arcana-text)", fontSize: 13, lineHeight: 1.4,
+                outline: "none", fontFamily: "inherit", minHeight: 38, maxHeight: 80,
+              }}
+              onFocus={(e) => { e.currentTarget.style.borderColor = "rgba(91,141,239,0.5)"; }}
+              onBlur={(e) => { e.currentTarget.style.borderColor = "var(--arcana-card-border)"; }}
+            />
+            <button type="button" onClick={() => send(input)} disabled={isLoading || !input.trim()} style={{
+              width: 38, height: 38, borderRadius: 10, border: "none",
+              background: input.trim() ? "linear-gradient(135deg, #5b8def, #a855f7)" : "var(--arcana-card-bg)",
+              color: input.trim() ? "#fff" : "var(--arcana-text-muted)",
+              cursor: input.trim() && !isLoading ? "pointer" : "default",
+              display: "flex", alignItems: "center", justifyContent: "center",
+              transition: "all 0.15s", flexShrink: 0,
+            }}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/services/studio/src/pages/DashboardPage.tsx b/services/studio/src/pages/DashboardPage.tsx
index 4a74575..3df28b5 100644
--- a/services/studio/src/pages/DashboardPage.tsx
+++ b/services/studio/src/pages/DashboardPage.tsx
@@ -1,472 +1,414 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   PageSection,
   Spinner,
   Alert,
+  Button,
+  Label,
 } from "@patternfly/react-core";
+import {
+  PlusCircleIcon,
+  ExternalLinkAltIcon,
+} from "@patternfly/react-icons";
 import { useHealth } from "../hooks/useHealth";
 import { useAuth } from "../auth/AuthContext";
 
+const TECH_ROLES = new Set(["developer", "data-engineer", "sre", "auditor", "admin"]);
+
+interface Agent {
+  name: string;
+  agent_type: string;
+  capabilities: string[];
+  protocols: string[];
+  status: string;
+  registered_at?: string;
+}
+
+const STATUS_DOT: Record<string, { color: string; label: string }> = {
+  active: { color: "#22c55e", label: "Running" },
+  busy: { color: "#f59e0b", label: "Busy" },
+  idle: { color: "#8b95a5", label: "Sleeping" },
+  offline: { color: "#ef4444", label: "Crashed" },
+};
+
 export const DashboardPage = () => {
   const navigate = useNavigate();
-  const { health, error, loading } = useHealth(5000);
-  const { user, isAtLeast, authHeaders } = useAuth();
-  const [agentCount, setAgentCount] = useState<{ total: number } | null>(null);
+  const { health, error } = useHealth(5000);
+  const { user, isAtLeast } = useAuth();
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [loading, setLoading] = useState(true);
   const [skillCount, setSkillCount] = useState(0);
   const [mcpCount, setMcpCount] = useState(0);
 
+  const fetchData = useCallback(async () => {
+    try {
+      const [agentsRes, skillsRes, mcpRes] = await Promise.allSettled([
+        fetch("/api/v1/agents"),
+        fetch("/api/v1/skills"),
+        fetch("/api/v1/tools"),
+      ]);
+      if (agentsRes.status === "fulfilled" && agentsRes.value.ok) {
+        const data = await agentsRes.value.json();
+        setAgents(data.agents ?? []);
+      }
+      if (skillsRes.status === "fulfilled" && skillsRes.value.ok) {
+        const data = await skillsRes.value.json();
+        setSkillCount(data.skills?.length ?? 0);
+      }
+      if (mcpRes.status === "fulfilled" && mcpRes.value.ok) {
+        const data = await mcpRes.value.json();
+        setMcpCount(data.servers?.length ?? 0);
+      }
+    } catch {
+      /* best effort */
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
   useEffect(() => {
-    const headers = authHeaders();
-    fetch("/api/v1/agents", { headers })
-      .then((r) => r.json())
-      .then((d) => setAgentCount({ total: d.total ?? 0 }))
-      .catch(() => {});
-    fetch("/api/v1/skills", { headers })
-      .then((r) => r.json())
-      .then((d) => setSkillCount(d.skills?.length ?? 0))
-      .catch(() => {});
-    fetch("/api/v1/tools", { headers })
-      .then((r) => r.json())
-      .then((d) => setMcpCount(d.servers?.length ?? 0))
-      .catch(() => {});
-  }, [authHeaders]);
+    fetchData();
+  }, [fetchData]);
 
   const totalServices = health?.services.length ?? 0;
   const healthyServices = health?.services.filter((s) => s.status === "healthy").length ?? 0;
+  const allHealthy = totalServices > 0 && healthyServices === totalServices;
+
+  const runningCount = agents.filter((a) => a.status === "active").length;
+  const sleepingCount = agents.filter((a) => a.status === "idle").length;
+  const crashedCount = agents.filter((a) => a.status === "offline").length;
+  const isTechUser = user?.roles?.some((r) => TECH_ROLES.has(r)) ?? false;
 
   return (
     <>
       {error && (
         <PageSection hasBodyWrapper={false} style={{ paddingBottom: 0 }}>
           <Alert variant="warning" title="API unreachable" isInline>
-            Cannot reach arcana-api. Run <code>make dev</code> to start.
+            Cannot reach the Arcana API. Run <code>make dev</code> to start.
           </Alert>
         </PageSection>
       )}
 
-      {/* Hero Section */}
-      <PageSection hasBodyWrapper={false} style={{ padding: 0 }}>
-        <div
-          style={{
-            background: "linear-gradient(135deg, #1a1d2e 0%, #0d2137 50%, #1a1035 100%)",
-            padding: "64px 48px",
-            position: "relative",
-            overflow: "hidden",
-          }}
-        >
-          <div
-            style={{
-              position: "absolute",
-              top: -80,
-              right: -80,
-              width: 400,
-              height: 400,
-              borderRadius: "50%",
-              background: "radial-gradient(circle, rgba(91,141,239,0.08) 0%, transparent 70%)",
-            }}
-          />
-          <div
-            style={{
-              position: "absolute",
-              bottom: -60,
-              left: "30%",
-              width: 300,
-              height: 300,
-              borderRadius: "50%",
-              background: "radial-gradient(circle, rgba(168,85,247,0.06) 0%, transparent 70%)",
-            }}
-          />
-
-          <div style={{ position: "relative", maxWidth: 720 }}>
-            <h1
-              style={{
-                fontSize: 36,
-                fontWeight: 700,
-                color: "#fff",
-                margin: 0,
-                lineHeight: 1.2,
-                letterSpacing: "-0.5px",
-              }}
+      <PageSection hasBodyWrapper={false}>
+        {/* Header */}
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 24,
+        }}>
+          <h1 style={{
+            fontSize: 28,
+            fontWeight: 700,
+            color: "var(--arcana-text)",
+            margin: 0,
+            letterSpacing: "-0.5px",
+          }}>
+            {isTechUser ? "Overview" : "Home"}
+          </h1>
+          {isAtLeast("developer") && (
+            <Button
+              variant="primary"
+              icon={<PlusCircleIcon />}
+              onClick={() => navigate("/build")}
             >
-              Build agents your teams can trust
-            </h1>
-            <p
+              {isTechUser ? "Deploy agent" : "Create agent"}
+            </Button>
+          )}
+        </div>
+
+        {/* Summary cards */}
+        <div style={{
+          display: "grid",
+          gridTemplateColumns: isTechUser ? "repeat(5, 1fr)" : "repeat(4, 1fr)",
+          gap: 12,
+          marginBottom: 32,
+        }}>
+          {[
+            {
+              label: isTechUser ? "Agents" : "My Agents",
+              value: agents.length,
+              sub: `${runningCount} running`,
+              color: "#5b8def",
+            },
+            {
+              label: "Running",
+              value: runningCount,
+              sub: "active now",
+              color: "#22c55e",
+            },
+            {
+              label: isTechUser ? "Skills" : "Capabilities",
+              value: skillCount,
+              sub: isTechUser ? "registered" : "available",
+              color: "#a855f7",
+            },
+            ...(isTechUser ? [{
+              label: "MCP Servers",
+              value: mcpCount,
+              sub: "connected",
+              color: "#06b6d4",
+            }] : []),
+            {
+              label: isTechUser ? "Platform" : "Status",
+              value: allHealthy ? "Healthy" : `${healthyServices}/${totalServices}`,
+              sub: isTechUser ? (totalServices > 0 ? `${totalServices} services` : "checking...") : (allHealthy ? "All systems go" : "Some issues"),
+              color: allHealthy ? "#22c55e" : "#f59e0b",
+            },
+          ].map((card) => (
+            <div
+              key={card.label}
               style={{
-                fontSize: 16,
-                color: "#8b95a5",
-                marginTop: 16,
-                lineHeight: 1.7,
-                maxWidth: 640,
+                padding: "20px 18px",
+                background: "var(--arcana-card-bg)",
+                borderRadius: 10,
+                border: "1px solid var(--arcana-card-border)",
               }}
             >
-              Arcana Studio helps {user?.roles?.[0] === "user" ? "you use" : "you compose, publish, and run"} AI
-              agents using skills, sub-agents, MCPs, and shared artifacts—so teams
-              collaborate instead of duplicating work.
+              <div style={{ fontSize: 12, color: "var(--arcana-text-muted)", fontWeight: 500, marginBottom: 8 }}>
+                {card.label}
+              </div>
+              <div style={{
+                fontSize: typeof card.value === "number" ? 28 : 20,
+                fontWeight: 700,
+                color: "var(--arcana-text)",
+                marginBottom: 4,
+              }}>
+                {loading ? <Spinner size="md" /> : card.value}
+              </div>
+              <div style={{ fontSize: 11, color: "var(--arcana-text-muted)" }}>
+                {card.sub}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Status breakdown — only if agents exist and some aren't running */}
+        {agents.length > 0 && (sleepingCount > 0 || crashedCount > 0) && (
+          <div style={{
+            display: "flex",
+            gap: 16,
+            marginBottom: 24,
+            padding: "12px 16px",
+            background: "var(--arcana-card-bg)",
+            borderRadius: 8,
+            border: "1px solid var(--arcana-card-border)",
+            fontSize: 13,
+            color: "var(--arcana-text-secondary)",
+            alignItems: "center",
+          }}>
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#22c55e" }} />
+              {runningCount} running
+            </span>
+            {sleepingCount > 0 && (
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#8b95a5" }} />
+                {sleepingCount} sleeping
+              </span>
+            )}
+            {crashedCount > 0 && (
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#ef4444" }} />
+                {crashedCount} crashed
+              </span>
+            )}
+            {agents.filter((a) => a.status === "busy").length > 0 && (
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#f59e0b" }} />
+                {agents.filter((a) => a.status === "busy").length} busy
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Agent list */}
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 12,
+        }}>
+          <div style={{
+            fontSize: 11,
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "1.2px",
+            color: "var(--arcana-text-muted)",
+          }}>
+            Agents
+          </div>
+          {agents.length > 0 && (
+            <Button variant="link" size="sm" onClick={() => navigate("/agents")}>
+              View all
+            </Button>
+          )}
+        </div>
+
+        {loading ? (
+          <div style={{ textAlign: "center", padding: 60 }}>
+            <Spinner size="xl" />
+          </div>
+        ) : agents.length === 0 ? (
+          <div style={{
+            textAlign: "center",
+            padding: "60px 40px",
+            background: "var(--arcana-card-bg)",
+            borderRadius: 12,
+            border: "1px solid var(--arcana-card-border)",
+          }}>
+            <div style={{ fontSize: 48, marginBottom: 16, opacity: 0.4 }}>/</div>
+            <h2 style={{
+              fontSize: 18,
+              fontWeight: 600,
+              color: "var(--arcana-text)",
+              margin: "0 0 8px",
+            }}>
+              {isTechUser ? "No agents deployed" : "No agents available yet"}
+            </h2>
+            <p style={{
+              fontSize: 13,
+              color: "var(--arcana-text-secondary)",
+              maxWidth: 380,
+              margin: "0 auto 20px",
+              lineHeight: 1.6,
+            }}>
+              {isTechUser
+                ? "Deploy your first agent in under a minute. Pick a template or start from scratch."
+                : "Your team hasn't set up any agents yet. Check back soon or ask your admin."}
             </p>
-            <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
-              {isAtLeast("developer") && (
-                <button
-                  type="button"
-                  onClick={() => navigate("/agents")}
+            {isAtLeast("developer") && (
+              <Button variant="primary" onClick={() => navigate("/build")}>
+                Deploy your first agent
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
+            {agents.slice(0, 10).map((agent) => {
+              const dot = STATUS_DOT[agent.status] ?? STATUS_DOT.offline;
+              const skills = (agent.capabilities ?? []).filter((c) => !c.startsWith("model:"));
+              const model = (agent.capabilities ?? []).find((c) => c.startsWith("model:"))?.replace("model:", "");
+              return (
+                <div
+                  key={agent.name}
+                  onClick={() => navigate(`/agents/${agent.name}`)}
                   style={{
-                    padding: "12px 24px",
-                    borderRadius: 8,
-                    border: "none",
-                    background: "linear-gradient(135deg, #5b8def 0%, #4a6cf7 100%)",
-                    color: "#fff",
-                    fontSize: 14,
-                    fontWeight: 600,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 16,
+                    padding: "14px 18px",
+                    background: "var(--arcana-card-bg)",
+                    borderRadius: 10,
+                    border: "1px solid var(--arcana-card-border)",
                     cursor: "pointer",
-                    transition: "transform 0.15s, box-shadow 0.15s",
+                    transition: "background 0.15s, border-color 0.15s",
+                    marginBottom: 6,
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)";
+                    (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(91,141,239,0.3)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)";
+                    (e.currentTarget as HTMLDivElement).style.borderColor = "var(--arcana-card-border)";
                   }}
                 >
-                  Start building
-                </button>
-              )}
-              <button
-                type="button"
-                onClick={() => navigate("/agents")}
-                style={{
-                  padding: "12px 24px",
-                  borderRadius: 8,
-                  border: "1px solid rgba(255,255,255,0.15)",
-                  background: "rgba(255,255,255,0.05)",
-                  color: "#c5cdd8",
-                  fontSize: 14,
-                  fontWeight: 600,
-                  cursor: "pointer",
-                  transition: "background 0.15s",
-                }}
-              >
-                Go to Agents
-              </button>
-              {isAtLeast("admin") && (
+                  <span style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: dot.color,
+                    flexShrink: 0,
+                    boxShadow: agent.status === "active" ? `0 0 6px ${dot.color}80` : "none",
+                  }} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "var(--arcana-text)",
+                      marginBottom: 2,
+                    }}>
+                      {agent.name}
+                    </div>
+                    <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                      {model ?? "—"} &middot; {dot.label}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap", maxWidth: 260 }}>
+                    {skills.slice(0, 3).map((s) => (
+                      <Label key={s} isCompact color="grey">{s}</Label>
+                    ))}
+                    {skills.length > 3 && <Label isCompact color="grey">+{skills.length - 3}</Label>}
+                  </div>
+                  <ExternalLinkAltIcon style={{ color: "var(--arcana-text-muted)", fontSize: 12 }} />
+                </div>
+              );
+            })}
+            {agents.length > 10 && (
+              <div style={{ textAlign: "center", padding: 8 }}>
+                <Button variant="link" size="sm" onClick={() => navigate("/agents")}>
+                  View all {agents.length} agents
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Quick actions */}
+        {isAtLeast("developer") && (
+          <div style={{ marginTop: 28 }}>
+            <div style={{
+              fontSize: 11,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "1.2px",
+              color: "var(--arcana-text-muted)",
+              marginBottom: 12,
+            }}>
+              Quick actions
+            </div>
+            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+              {(isTechUser ? [
+                { label: "Deploy agent", path: "/build" },
+                { label: "Marketplace", path: "/marketplace" },
+                { label: "Guardrails", path: "/guardrails" },
+                { label: "Usage & costs", path: "/finops" },
+              ] : [
+                { label: "Browse agents", path: "/marketplace" },
+                { label: "Chat with agent", path: "/chat" },
+              ]).map((action) => (
                 <button
+                  key={action.path}
                   type="button"
-                  onClick={() => navigate("/settings")}
+                  onClick={() => navigate(action.path)}
                   style={{
-                    padding: "12px 24px",
+                    padding: "9px 18px",
                     borderRadius: 8,
-                    border: "1px solid rgba(255,255,255,0.15)",
-                    background: "rgba(255,255,255,0.05)",
-                    color: "#c5cdd8",
-                    fontSize: 14,
-                    fontWeight: 600,
+                    border: "1px solid var(--arcana-card-border)",
+                    background: "var(--arcana-card-bg)",
+                    color: "var(--arcana-text-secondary)",
+                    fontSize: 13,
+                    fontWeight: 500,
                     cursor: "pointer",
-                    transition: "background 0.15s",
+                    transition: "all 0.15s",
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.borderColor = "rgba(91,141,239,0.3)";
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--arcana-text)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.borderColor = "var(--arcana-card-border)";
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--arcana-text-secondary)";
                   }}
                 >
-                  View operations
+                  {action.label}
                 </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </PageSection>
-
-      {/* Statistics Section */}
-      <PageSection hasBodyWrapper={false}>
-        <h2
-          style={{
-            fontSize: 20,
-            fontWeight: 600,
-            color: "#e2e8f0",
-            marginBottom: 6,
-          }}
-        >
-          Arcana Statistics
-        </h2>
-        <p style={{ color: "#6b7585", fontSize: 14, marginBottom: 24 }}>
-          Platform-wide usage across all teams and organizations.
-        </p>
-
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(5, 1fr)",
-            gap: 16,
-          }}
-        >
-          {/* Agents Deployed */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: "24px 20px",
-              border: "1px solid rgba(255,255,255,0.08)",
-            }}
-          >
-            <div style={{ color: "#8b95a5", fontSize: 13, fontWeight: 500, marginBottom: 16 }}>
-              Agents Deployed
-            </div>
-            <div style={{ display: "flex", gap: 24 }}>
-              <div>
-                <div style={{ color: "#6b7585", fontSize: 11, marginBottom: 4 }}>Total</div>
-                <div style={{ color: "#fff", fontSize: 28, fontWeight: 700 }}>
-                  {loading ? <Spinner size="md" /> : (agentCount?.total ?? "–")}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Skills Created */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: "24px 20px",
-              border: "1px solid rgba(255,255,255,0.08)",
-            }}
-          >
-            <div style={{ color: "#8b95a5", fontSize: 13, fontWeight: 500, marginBottom: 16 }}>
-              Skills Created
-            </div>
-            <div>
-              <div style={{ color: "#6b7585", fontSize: 11, marginBottom: 4 }}>Registered</div>
-              <div style={{ color: "#fff", fontSize: 28, fontWeight: 700 }}>
-                {skillCount || "–"}
-              </div>
-            </div>
-          </div>
-
-          {/* MCP Integrations */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: "24px 20px",
-              border: "1px solid rgba(255,255,255,0.08)",
-            }}
-          >
-            <div style={{ color: "#8b95a5", fontSize: 13, fontWeight: 500, marginBottom: 16 }}>
-              MCP Integrations
-            </div>
-            <div style={{ color: "#fff", fontSize: 28, fontWeight: 700 }}>
-              {mcpCount || "–"}
+              ))}
             </div>
           </div>
-
-          {/* Services */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: "24px 20px",
-              border: "1px solid rgba(255,255,255,0.08)",
-            }}
-          >
-            <div style={{ color: "#8b95a5", fontSize: 13, fontWeight: 500, marginBottom: 16 }}>
-              Services
-            </div>
-            <div style={{ color: "#fff", fontSize: 28, fontWeight: 700 }}>
-              {loading ? <Spinner size="md" /> : `${healthyServices}/${totalServices}`}
-            </div>
-            <div
-              style={{
-                marginTop: 8,
-                height: 4,
-                borderRadius: 2,
-                background: "rgba(255,255,255,0.08)",
-                overflow: "hidden",
-              }}
-            >
-              <div
-                style={{
-                  height: "100%",
-                  width: totalServices > 0 ? `${(healthyServices / totalServices) * 100}%` : "0%",
-                  background: healthyServices === totalServices ? "#22c55e" : "#f59e0b",
-                  borderRadius: 2,
-                  transition: "width 0.3s",
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Planes */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: "24px 20px",
-              border: "1px solid rgba(255,255,255,0.08)",
-            }}
-          >
-            <div style={{ color: "#8b95a5", fontSize: 13, fontWeight: 500, marginBottom: 16 }}>
-              Active Planes
-            </div>
-            <div style={{ color: "#fff", fontSize: 28, fontWeight: 700 }}>8</div>
-          </div>
-        </div>
-      </PageSection>
-
-      {/* What you can do here */}
-      <PageSection hasBodyWrapper={false}>
-        <h2
-          style={{
-            fontSize: 20,
-            fontWeight: 600,
-            color: "#e2e8f0",
-            marginBottom: 6,
-          }}
-        >
-          What you can do here
-        </h2>
-        <p style={{ color: "#6b7585", fontSize: 14, marginBottom: 24 }}>
-          Three ways to get value from Arcana today.
-        </p>
-
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 20,
-          }}
-        >
-          {/* BUILD card */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: 28,
-              border: "1px solid rgba(255,255,255,0.08)",
-              display: "flex",
-              flexDirection: "column",
-            }}
-          >
-            <span
-              style={{
-                fontSize: 11,
-                fontWeight: 700,
-                letterSpacing: "1.5px",
-                color: "#5b8def",
-                marginBottom: 12,
-              }}
-            >
-              BUILD
-            </span>
-            <h3 style={{ fontSize: 18, fontWeight: 600, color: "#fff", margin: "0 0 12px" }}>
-              Compose agents
-            </h3>
-            <p style={{ color: "#8b95a5", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
-              Pick skills from the ecosystem, attach sub-agents, and wire MCPs with
-              guardrails—then package a version your stakeholders can review.
-            </p>
-            <button
-              type="button"
-              onClick={() => navigate("/agents")}
-              style={{
-                marginTop: 16,
-                padding: 0,
-                border: "none",
-                background: "none",
-                color: "#5b8def",
-                fontSize: 14,
-                fontWeight: 600,
-                cursor: "pointer",
-                textAlign: "left",
-              }}
-            >
-              Open builder →
-            </button>
-          </div>
-
-          {/* DISCOVER card */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: 28,
-              border: "1px solid rgba(255,255,255,0.08)",
-              display: "flex",
-              flexDirection: "column",
-            }}
-          >
-            <span
-              style={{
-                fontSize: 11,
-                fontWeight: 700,
-                letterSpacing: "1.5px",
-                color: "#a855f7",
-                marginBottom: 12,
-              }}
-            >
-              DISCOVER
-            </span>
-            <h3 style={{ fontSize: 18, fontWeight: 600, color: "#fff", margin: "0 0 12px" }}>
-              Find what already exists
-            </h3>
-            <p style={{ color: "#8b95a5", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
-              Search the registry for skills, agents, MCPs, and connectors. See who owns them
-              and how many teams reuse them before you build from scratch.
-            </p>
-            <button
-              type="button"
-              onClick={() => navigate("/skills")}
-              style={{
-                marginTop: 16,
-                padding: 0,
-                border: "none",
-                background: "none",
-                color: "#a855f7",
-                fontSize: 14,
-                fontWeight: 600,
-                cursor: "pointer",
-                textAlign: "left",
-              }}
-            >
-              Explore registry →
-            </button>
-          </div>
-
-          {/* OPERATE card */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.04)",
-              borderRadius: 12,
-              padding: 28,
-              border: "1px solid rgba(255,255,255,0.08)",
-              display: "flex",
-              flexDirection: "column",
-            }}
-          >
-            <span
-              style={{
-                fontSize: 11,
-                fontWeight: 700,
-                letterSpacing: "1.5px",
-                color: "#22c55e",
-                marginBottom: 12,
-              }}
-            >
-              OPERATE
-            </span>
-            <h3 style={{ fontSize: 18, fontWeight: 600, color: "#fff", margin: "0 0 12px" }}>
-              Run with confidence
-            </h3>
-            <p style={{ color: "#8b95a5", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
-              Monitor deployments, health, and recent runs from one operations view—prototype
-              for day-two ownership inside the enterprise.
-            </p>
-            <button
-              type="button"
-              onClick={() => navigate("/settings")}
-              style={{
-                marginTop: 16,
-                padding: 0,
-                border: "none",
-                background: "none",
-                color: "#22c55e",
-                fontSize: 14,
-                fontWeight: 600,
-                cursor: "pointer",
-                textAlign: "left",
-              }}
-            >
-              Go to operations →
-            </button>
-          </div>
-        </div>
+        )}
       </PageSection>
     </>
   );
diff --git a/services/studio/src/pages/FinOpsDashboardPage.tsx b/services/studio/src/pages/FinOpsDashboardPage.tsx
index 45919dd..dcfc7d3 100644
--- a/services/studio/src/pages/FinOpsDashboardPage.tsx
+++ b/services/studio/src/pages/FinOpsDashboardPage.tsx
@@ -217,11 +217,11 @@ export const FinOpsDashboardPage = () => {
     setError(null);
     try {
       const [summaryRes, cotRes, cbmRes, taRes, buRes] = await Promise.allSettled([
-        fetch(`/api/v1/finops/summary?period=${period}`),
-        fetch(`/api/v1/finops/cost-over-time?period=${period}&team=${teamFilter}`),
-        fetch(`/api/v1/finops/cost-by-model?period=${period}`),
-        fetch(`/api/v1/finops/top-agents?period=${period}&limit=10`),
-        fetch("/api/v1/finops/budget-utilization"),
+        fetch(`/api/v1/costs?period=${period}`),
+        fetch(`/api/v1/costs/over-time?period=${period}&team=${teamFilter}`),
+        fetch(`/api/v1/costs/by-model?period=${period}`),
+        fetch(`/api/v1/costs/top-agents?period=${period}&limit=10`),
+        fetch("/api/v1/costs/budget-utilization"),
       ]);
 
       if (summaryRes.status === "fulfilled" && summaryRes.value.ok) {
@@ -289,7 +289,7 @@ export const FinOpsDashboardPage = () => {
       <PageSection hasBodyWrapper={false}>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <div>
-            <Title headingLevel="h1" size="2xl">FinOps Dashboard</Title>
+            <Title headingLevel="h1" size="2xl">Usage & Costs</Title>
             <Content component="p" style={{ marginTop: 4 }}>
               Cost analytics, budget utilization, and model spend tracking.
             </Content>
diff --git a/services/studio/src/pages/GuardrailBuilderPage.tsx b/services/studio/src/pages/GuardrailBuilderPage.tsx
index 5a077af..82b5490 100644
--- a/services/studio/src/pages/GuardrailBuilderPage.tsx
+++ b/services/studio/src/pages/GuardrailBuilderPage.tsx
@@ -190,6 +190,7 @@ const ruleTypeLabel = (type: string): string => {
 
 const configSummary = (rule: GuardrailRule): string => {
   const c = rule.config;
+  if (!c) return "—";
   switch (rule.type) {
     case "pii": {
       const p = c as PiiConfig;
@@ -291,7 +292,7 @@ export const GuardrailBuilderPage = () => {
     setLoading(true);
     setSaveMessage(null);
     try {
-      const res = await fetch(`/api/v1/ward/agents/${encodeURIComponent(selectedAgent)}/rules`);
+      const res = await fetch(`/api/v1/rules/agent/${encodeURIComponent(selectedAgent)}`);
       if (res.ok) {
         const data = await res.json();
         setRules(data.rules ?? []);
@@ -315,7 +316,7 @@ export const GuardrailBuilderPage = () => {
     setSaving(true);
     setSaveMessage(null);
     try {
-      const res = await fetch(`/api/v1/ward/agents/${encodeURIComponent(selectedAgent)}/rules`, {
+      const res = await fetch(`/api/v1/rules/agent/${encodeURIComponent(selectedAgent)}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ rules }),
@@ -338,7 +339,7 @@ export const GuardrailBuilderPage = () => {
     setTestRunning(true);
     setTestResults(null);
     try {
-      const res = await fetch("/api/v1/ward/evaluate", {
+      const res = await fetch("/api/v1/check", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ input: testInput, rules }),
diff --git a/services/studio/src/pages/LoginPage.tsx b/services/studio/src/pages/LoginPage.tsx
index 3375639..8154247 100644
--- a/services/studio/src/pages/LoginPage.tsx
+++ b/services/studio/src/pages/LoginPage.tsx
@@ -5,107 +5,62 @@ import { useAuth } from "../auth/AuthContext";
 interface RoleOption {
   role: string;
   title: string;
-  persona: string;
   description: string;
   color: string;
   icon: string;
-  capabilities: string[];
 }
 
 const ROLE_OPTIONS: RoleOption[] = [
   {
     role: "admin",
-    title: "Administrator",
-    persona: "Admin",
+    title: "Admin",
     description: "Full platform access",
     color: "#a855f7",
     icon: "A",
-    capabilities: ["Agents", "Security", "Tenants", "Billing", "All Settings"],
   },
   {
     role: "developer",
     title: "Developer",
-    persona: "Alex",
     description: "Build and deploy agents",
     color: "#5b8def",
     icon: "D",
-    capabilities: ["Agents", "Skills", "Models", "Blueprints", "Evaluations"],
   },
   {
     role: "data-engineer",
     title: "Data Engineer",
-    persona: "Priya",
-    description: "Manage data pipelines",
+    description: "Manage pipelines & connectors",
     color: "#06b6d4",
     icon: "DE",
-    capabilities: ["Connectors", "Knowledge Base", "Models", "MCP Servers"],
   },
   {
     role: "sre",
-    title: "SRE / Platform",
-    persona: "Jordan",
+    title: "SRE",
     description: "Operate and monitor",
     color: "#f59e0b",
     icon: "S",
-    capabilities: ["Health", "Deployments", "FinOps", "Audit Trails"],
   },
   {
     role: "auditor",
     title: "Auditor",
-    persona: "Sam",
     description: "Compliance and audit",
     color: "#ef4444",
     icon: "Au",
-    capabilities: ["Audit Logs", "Compliance Reports", "Tenant Data"],
   },
   {
     role: "user",
-    title: "Business User",
-    persona: "Maya",
+    title: "User",
     description: "Use agents day-to-day",
     color: "#22c55e",
     icon: "U",
-    capabilities: ["Chat", "Agents", "Dashboards", "Marketplace"],
   },
 ];
 
-const VALUE_PROPS = [
-  {
-    icon: "🚀",
-    title: "Deploy in minutes",
-    desc: "From conversation to production agent — no custom glue code.",
-  },
-  {
-    icon: "🛡️",
-    title: "Enterprise governance",
-    desc: "Per-agent guardrails, RBAC, OPA policies, immutable audit trail.",
-  },
-  {
-    icon: "💰",
-    title: "Built-in cost control",
-    desc: "Token budgets, model fallback chains, team-level spending caps.",
-  },
-  {
-    icon: "🔄",
-    title: "Self-improving agents",
-    desc: "Skills evolve, memory compacts, corrections become capabilities.",
-  },
-];
-
-const LOGOS = [
-  { name: "Kubernetes", abbr: "K8s" },
-  { name: "Temporal", abbr: "⏱" },
-  { name: "PostgreSQL", abbr: "PG" },
-  { name: "Redis", abbr: "R" },
-  { name: "Prometheus", abbr: "P" },
-  { name: "OpenTelemetry", abbr: "OT" },
-];
-
 export const LoginPage = () => {
   const { login, loginAs, loading, error } = useAuth();
   const [apiKey, setApiKey] = useState("");
   const [localError, setLocalError] = useState<string | null>(null);
-  const [mode, setMode] = useState<"roles" | "key">("roles");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [ssoAvailable, setSsoAvailable] = useState<boolean | null>(null);
   const [selectedRole, setSelectedRole] = useState<string | null>(null);
   const [hoveredRole, setHoveredRole] = useState<string | null>(null);
   const [mounted, setMounted] = useState(false);
@@ -115,6 +70,16 @@ export const LoginPage = () => {
     return () => clearTimeout(t);
   }, []);
 
+  useEffect(() => {
+    fetch("/api/v1/enterprise/config")
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        const ssoEnabled = data?.auth_mode === "oidc" || data?.auth_mode === "saml" || data?.sso_enabled === true;
+        setSsoAvailable(ssoEnabled);
+      })
+      .catch(() => setSsoAvailable(false));
+  }, []);
+
   const handleApiKeySubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLocalError(null);
@@ -127,7 +92,7 @@ export const LoginPage = () => {
     setLocalError(null);
     setSelectedRole(role);
     const ok = await loginAs(role);
-    if (!ok) setLocalError("Could not connect to platform");
+    if (!ok) setLocalError("Could not connect");
     setSelectedRole(null);
   };
 
@@ -137,26 +102,17 @@ export const LoginPage = () => {
     <div style={{ minHeight: "100vh", background: "#030508", overflow: "hidden" }}>
       <style>{`
         @keyframes arcana-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
-        @keyframes arcana-pulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }
-        @keyframes arcana-grid { 0%{transform:translate(0,0)} 100%{transform:translate(40px,40px)} }
         .arcana-login-role:hover { transform:translateY(-3px)!important; box-shadow:0 8px 24px rgba(0,0,0,0.4)!important }
         .arcana-login-role:active { transform:translateY(0)!important }
         .arcana-api-input:focus { border-color:rgba(91,141,239,0.6)!important; box-shadow:0 0 0 3px rgba(91,141,239,0.1)!important }
         .arcana-cta:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(91,141,239,0.4)!important }
       `}</style>
 
-      {/* Grid bg */}
-      <div style={{
-        position:"fixed",inset:0,
-        backgroundImage:"linear-gradient(rgba(91,141,239,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(91,141,239,0.025) 1px,transparent 1px)",
-        backgroundSize:"40px 40px", animation:"arcana-grid 20s linear infinite", pointerEvents:"none",
-      }}/>
+      {/* Subtle orbs */}
+      <div style={{ position:"fixed",width:500,height:500,borderRadius:"50%",background:"radial-gradient(circle,rgba(91,141,239,0.07) 0%,transparent 70%)",top:-200,left:-100,animation:"arcana-float 8s ease-in-out infinite",pointerEvents:"none" }}/>
+      <div style={{ position:"fixed",width:400,height:400,borderRadius:"50%",background:"radial-gradient(circle,rgba(168,85,247,0.05) 0%,transparent 70%)",bottom:-100,right:50,animation:"arcana-float 10s ease-in-out infinite 2s",pointerEvents:"none" }}/>
 
-      {/* Orbs */}
-      <div style={{ position:"fixed",width:600,height:600,borderRadius:"50%",background:"radial-gradient(circle,rgba(91,141,239,0.09) 0%,transparent 70%)",top:-200,left:-100,animation:"arcana-float 8s ease-in-out infinite",pointerEvents:"none" }}/>
-      <div style={{ position:"fixed",width:500,height:500,borderRadius:"50%",background:"radial-gradient(circle,rgba(168,85,247,0.07) 0%,transparent 70%)",bottom:-100,right:50,animation:"arcana-float 10s ease-in-out infinite 2s",pointerEvents:"none" }}/>
-
-      {/* ===== NAV BAR ===== */}
+      {/* Nav */}
       <nav style={{
         display:"flex", alignItems:"center", justifyContent:"space-between",
         padding:"16px 48px", position:"relative", zIndex:10,
@@ -168,19 +124,12 @@ export const LoginPage = () => {
             background:"linear-gradient(135deg,#5b8def,#a855f7)",
             display:"flex",alignItems:"center",justifyContent:"center",
             fontSize:16,fontWeight:800,color:"#fff",
-            boxShadow:"0 2px 12px rgba(91,141,239,0.3)",
           }}>A</div>
           <span style={{ fontSize:18,fontWeight:700,color:"#fff",letterSpacing:-0.3 }}>Arcana</span>
-          <span style={{
-            fontSize:9,fontWeight:700,color:"#667eea",letterSpacing:2,
-            textTransform:"uppercase",background:"rgba(91,141,239,0.1)",
-            padding:"3px 8px",borderRadius:6,marginLeft:2,
-          }}>Platform</span>
         </div>
         <div style={{ display:"flex", alignItems:"center", gap:24 }}>
           <a href="https://github.com/NP-compete/arcana" target="_blank" rel="noreferrer" style={{ fontSize:13,color:"#5a6a7d",textDecoration:"none",fontWeight:500 }}>Docs</a>
           <a href="https://github.com/NP-compete/arcana" target="_blank" rel="noreferrer" style={{ fontSize:13,color:"#5a6a7d",textDecoration:"none",fontWeight:500 }}>GitHub</a>
-          <a href="https://github.com/NP-compete/arcana/blob/main/CONTRIBUTING.md" target="_blank" rel="noreferrer" style={{ fontSize:13,color:"#5a6a7d",textDecoration:"none",fontWeight:500 }}>Contribute</a>
           <button onClick={() => document.getElementById("login-panel")?.scrollIntoView({ behavior:"smooth" })} style={{
             padding:"8px 20px",borderRadius:8,border:"1px solid rgba(91,141,239,0.3)",
             background:"rgba(91,141,239,0.08)",color:"#7ba4f0",fontSize:13,fontWeight:600,
@@ -189,45 +138,45 @@ export const LoginPage = () => {
         </div>
       </nav>
 
-      {/* ===== HERO SECTION ===== */}
+      {/* Hero */}
       <section style={{
-        textAlign:"center", padding:"80px 48px 60px", position:"relative", zIndex:1,
-        maxWidth:800, margin:"0 auto",
+        textAlign:"center", padding:"100px 48px 60px", position:"relative", zIndex:1,
+        maxWidth:700, margin:"0 auto",
         opacity:mounted?1:0, transform:mounted?"translateY(0)":"translateY(20px)",
         transition:"all 0.8s cubic-bezier(0.16,1,0.3,1)",
       }}>
         <div style={{
           display:"inline-flex",alignItems:"center",gap:8,
-          background:"rgba(91,141,239,0.08)",border:"1px solid rgba(91,141,239,0.15)",
+          background:"rgba(34,197,94,0.08)",border:"1px solid rgba(34,197,94,0.15)",
           borderRadius:20,padding:"6px 16px",marginBottom:28,
         }}>
           <span style={{ width:6,height:6,borderRadius:"50%",background:"#22c55e",display:"inline-block" }}/>
-          <span style={{ fontSize:12,color:"#7ba4f0",fontWeight:500 }}>Open Source &middot; Apache 2.0 &middot; v0.1.0</span>
+          <span style={{ fontSize:12,color:"#4ade80",fontWeight:500 }}>Open Source &middot; Apache 2.0</span>
         </div>
 
         <h1 style={{
-          fontSize:56,fontWeight:800,lineHeight:1.1,margin:"0 0 20px",letterSpacing:-2,
+          fontSize:52,fontWeight:800,lineHeight:1.1,margin:"0 0 20px",letterSpacing:-2,
           color:"#fff",
         }}>
-          The operating system<br/>
+          Deploy AI agents<br/>
           <span style={{
-            background:"linear-gradient(135deg,#667eea 0%,#a855f7 40%,#06b6d4 100%)",
+            background:"linear-gradient(135deg,#667eea 0%,#a855f7 100%)",
             WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",
-          }}>for enterprise AI agents</span>
+          }}>like pushing code</span>
         </h1>
 
-        <p style={{ fontSize:18,color:"#5a6a7d",lineHeight:1.7,margin:"0 auto 36px",maxWidth:560 }}>
-          Build, deploy, govern, and continuously improve AI agents.
-          One platform for every team — from marketing to engineering to compliance.
+        <p style={{ fontSize:18,color:"#5a6a7d",lineHeight:1.7,margin:"0 auto 40px",maxWidth:480 }}>
+          Name it. Pick a model. Add skills. Hit deploy.
+          Your agent is running in seconds, not weeks.
         </p>
 
-        <div style={{ display:"flex",gap:12,justifyContent:"center",marginBottom:48 }}>
+        <div style={{ display:"flex",gap:12,justifyContent:"center" }}>
           <button className="arcana-cta" onClick={() => document.getElementById("login-panel")?.scrollIntoView({ behavior:"smooth" })} style={{
             padding:"14px 32px",borderRadius:12,border:"none",
             background:"linear-gradient(135deg,#5b8def,#a855f7)",
             color:"#fff",fontSize:15,fontWeight:600,cursor:"pointer",
             boxShadow:"0 4px 20px rgba(91,141,239,0.3)",transition:"all 0.25s ease",
-          }}>Get Started</button>
+          }}>Get started free</button>
           <a href="https://github.com/NP-compete/arcana" target="_blank" rel="noreferrer" style={{
             padding:"14px 32px",borderRadius:12,
             border:"1px solid rgba(255,255,255,0.1)",background:"rgba(255,255,255,0.03)",
@@ -238,136 +187,111 @@ export const LoginPage = () => {
             View on GitHub
           </a>
         </div>
-
-        {/* Tech stack bar */}
-        <div style={{ display:"flex",alignItems:"center",justifyContent:"center",gap:24,flexWrap:"wrap" }}>
-          <span style={{ fontSize:11,color:"#3a4252",fontWeight:500 }}>BUILT ON</span>
-          {LOGOS.map(l => (
-            <span key={l.name} style={{
-              fontSize:11,color:"#4a5568",fontWeight:500,
-              display:"flex",alignItems:"center",gap:6,
-            }}>
-              <span style={{ fontSize:14 }}>{l.abbr}</span> {l.name}
-            </span>
-          ))}
-        </div>
       </section>
 
-      {/* ===== VALUE PROPS ===== */}
+      {/* How it works */}
       <section style={{
-        display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:16,
-        maxWidth:960, margin:"0 auto", padding:"0 48px 80px",
+        display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16,
+        maxWidth:720, margin:"0 auto", padding:"0 48px 80px",
         position:"relative", zIndex:1,
       }}>
-        {VALUE_PROPS.map((v,i) => (
-          <div key={v.title} style={{
-            padding:"24px 20px",borderRadius:16,
+        {[
+          { step: "1", title: "Name your agent", desc: "Give it a name and pick a model." },
+          { step: "2", title: "Add skills", desc: "Attach search, code-gen, SQL — or build your own." },
+          { step: "3", title: "Deploy", desc: "One click. It's running. Guardrails and monitoring included." },
+        ].map((v, i) => (
+          <div key={v.step} style={{
+            padding:"28px 24px",borderRadius:16,
             background:"rgba(255,255,255,0.02)",border:"1px solid rgba(255,255,255,0.05)",
             opacity:mounted?1:0, transform:mounted?"translateY(0)":"translateY(15px)",
             transition:`all 0.6s cubic-bezier(0.16,1,0.3,1) ${0.4+i*0.1}s`,
           }}>
-            <div style={{ fontSize:28,marginBottom:12 }}>{v.icon}</div>
-            <div style={{ fontSize:14,fontWeight:600,color:"#e2e8f0",marginBottom:6 }}>{v.title}</div>
-            <div style={{ fontSize:12,color:"#5a6272",lineHeight:1.6 }}>{v.desc}</div>
-          </div>
-        ))}
-      </section>
-
-      {/* ===== NUMBERS BAR ===== */}
-      <section style={{
-        display:"flex",justifyContent:"center",gap:48,padding:"40px 48px",
-        borderTop:"1px solid rgba(255,255,255,0.04)",borderBottom:"1px solid rgba(255,255,255,0.04)",
-        position:"relative",zIndex:1,
-      }}>
-        {[
-          { n:"30+",l:"Microservices" },{ n:"16",l:"Custom CRDs" },{ n:"8",l:"Architecture Planes" },
-          { n:"5",l:"Agent Protocols" },{ n:"28",l:"Helm Charts" },{ n:"99.95%",l:"Availability Target" },
-        ].map(s => (
-          <div key={s.l} style={{ textAlign:"center" }}>
             <div style={{
-              fontSize:24,fontWeight:800,
-              background:"linear-gradient(135deg,#5b8def,#a855f7)",
-              WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",
-            }}>{s.n}</div>
-            <div style={{ fontSize:11,color:"#4a5568",marginTop:2,fontWeight:500 }}>{s.l}</div>
+              width:32,height:32,borderRadius:10,
+              background:"rgba(91,141,239,0.1)",
+              display:"flex",alignItems:"center",justifyContent:"center",
+              fontSize:14,fontWeight:700,color:"#5b8def",marginBottom:12,
+            }}>{v.step}</div>
+            <div style={{ fontSize:15,fontWeight:600,color:"#e2e8f0",marginBottom:6 }}>{v.title}</div>
+            <div style={{ fontSize:13,color:"#5a6272",lineHeight:1.6 }}>{v.desc}</div>
           </div>
         ))}
       </section>
 
-      {/* ===== LOGIN PANEL ===== */}
+      {/* Login panel */}
       <section id="login-panel" style={{
-        maxWidth:720, margin:"0 auto", padding:"80px 48px",
+        maxWidth:640, margin:"0 auto", padding:"60px 48px 80px",
         position:"relative", zIndex:1,
       }}>
-        {/* Section header */}
-        <div style={{ textAlign:"center",marginBottom:40 }}>
-          <h2 style={{ fontSize:32,fontWeight:800,color:"#fff",margin:"0 0 10px",letterSpacing:-0.5 }}>
-            Get into the platform
+        <div style={{ textAlign:"center",marginBottom:36 }}>
+          <h2 style={{ fontSize:28,fontWeight:700,color:"#fff",margin:"0 0 8px",letterSpacing:-0.5 }}>
+            Sign in
           </h2>
-          <p style={{ fontSize:15,color:"#5a6a7d",margin:0,maxWidth:420,marginLeft:"auto",marginRight:"auto" }}>
-            Sign in with SSO, use an API key, or explore with a demo persona
+          <p style={{ fontSize:14,color:"#5a6a7d",margin:0 }}>
+            SSO, API key, or try a demo persona
           </p>
         </div>
 
-        {displayError && <Alert variant="danger" isInline title={displayError} style={{ marginBottom:20,maxWidth:720,margin:"0 auto 20px" }}/>}
+        {displayError && <Alert variant="danger" isInline title={displayError} style={{ marginBottom:20 }}/>}
 
-        {/* SSO — one-click, no key needed */}
+        {/* SSO + API key */}
         <div style={{
-          background:"rgba(255,255,255,0.025)",borderRadius:20,
-          border:"1px solid rgba(255,255,255,0.06)",padding:"24px 32px",
-          backdropFilter:"blur(24px)",marginBottom:16,
-          boxShadow:"0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04)",
+          background:"rgba(255,255,255,0.025)",borderRadius:16,
+          border:"1px solid rgba(255,255,255,0.06)",padding:"20px 28px",
+          marginBottom:16,
         }}>
-          <button type="button" disabled={loading} className="arcana-cta" onClick={() => {
-            window.location.href = "/auth/login";
-          }} style={{
-            width:"100%",padding:"15px 0",borderRadius:12,border:"none",
-            background:"linear-gradient(135deg,#5b8def,#a855f7)",
-            color:"#fff",fontSize:15,fontWeight:600,cursor:loading?"wait":"pointer",
-            display:"flex",alignItems:"center",justifyContent:"center",gap:10,
-            boxShadow:"0 4px 20px rgba(91,141,239,0.3)",transition:"all 0.25s ease",
-            opacity:loading?0.7:1,
-          }}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-            Continue with SSO
-          </button>
-          <p style={{ fontSize:11,color:"#3a4252",textAlign:"center",marginTop:8,marginBottom:0 }}>
-            Redirects to your organization's identity provider (OIDC/SAML)
-          </p>
-
-          {/* API key expandable */}
-          <div style={{ marginTop:16 }}>
-            <button type="button" onClick={() => setMode(mode === "key" ? "roles" : "key")} style={{
-              width:"100%",padding:"12px 0",borderRadius:10,
-              border:"1px solid rgba(255,255,255,0.08)",
+          {ssoAvailable ? (
+            <button type="button" disabled={loading} className="arcana-cta" onClick={() => {
+              window.location.href = "/auth/login";
+            }} style={{
+              width:"100%",padding:"14px 0",borderRadius:10,border:"none",
+              background:"linear-gradient(135deg,#5b8def,#a855f7)",
+              color:"#fff",fontSize:15,fontWeight:600,cursor:loading?"wait":"pointer",
+              display:"flex",alignItems:"center",justifyContent:"center",gap:10,
+              boxShadow:"0 4px 20px rgba(91,141,239,0.3)",transition:"all 0.25s ease",
+              opacity:loading?0.7:1,
+            }}>
+              Continue with SSO
+            </button>
+          ) : (
+            <div style={{
+              width:"100%",padding:"14px 0",borderRadius:10,
+              border:"1px solid rgba(255,255,255,0.06)",
               background:"rgba(255,255,255,0.02)",
-              color:"#5a6a7d",fontSize:13,fontWeight:500,cursor:"pointer",
               display:"flex",alignItems:"center",justifyContent:"center",gap:8,
-              transition:"all 0.2s ease",
+              color:"#4a5568",fontSize:14,fontWeight:500,
             }}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
-              {mode === "key" ? "Hide API key" : "Sign in with API key instead"}
-              <svg width="12" height="12" viewBox="0 0 16 16" fill="none" style={{ transform:mode==="key"?"rotate(180deg)":"none",transition:"transform 0.2s" }}>
-                <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
-              </svg>
-            </button>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              SSO not configured &mdash; use API key or a demo persona below
+            </div>
+          )}
 
-            {mode === "key" && (
-              <form onSubmit={handleApiKeySubmit} style={{ marginTop:16 }}>
-                <div style={{ display:"flex",gap:10 }}>
-                  <input id="arcana-api-key" className="arcana-api-input" type="password" value={apiKey}
-                    onChange={e => setApiKey(e.target.value)} placeholder="ak-xxxx-xxxxxxxxxxxxxxxx" autoFocus
+          {/* API key toggle */}
+          <div style={{ marginTop:12 }}>
+            <button type="button" onClick={() => setShowApiKey(!showApiKey)} style={{
+              width:"100%",padding:"10px 0",borderRadius:8,
+              border:"1px solid rgba(255,255,255,0.06)",
+              background:"transparent",
+              color:"#5a6a7d",fontSize:13,fontWeight:500,cursor:"pointer",
+              display:"flex",alignItems:"center",justifyContent:"center",gap:6,
+            }}>
+              {showApiKey ? "Hide API key" : "Use API key"}
+            </button>
+            {showApiKey && (
+              <form onSubmit={handleApiKeySubmit} style={{ marginTop:12 }}>
+                <div style={{ display:"flex",gap:8 }}>
+                  <input className="arcana-api-input" type="password" value={apiKey}
+                    onChange={e => setApiKey(e.target.value)} placeholder="ak-xxxx-xxxxxxxx" autoFocus
                     style={{
-                      flex:1,padding:"12px 16px",borderRadius:10,
+                      flex:1,padding:"10px 14px",borderRadius:8,
                       border:"1px solid rgba(255,255,255,0.08)",background:"rgba(0,0,0,0.25)",
-                      color:"#fff",fontSize:13,fontFamily:"var(--pf-t--global--font--family--mono)",
-                      outline:"none",boxSizing:"border-box",transition:"all 0.25s ease",
+                      color:"#fff",fontSize:13,fontFamily:"monospace",
+                      outline:"none",boxSizing:"border-box",transition:"all 0.2s",
                     }}/>
                   <button type="submit" disabled={loading} style={{
-                    padding:"12px 24px",borderRadius:10,border:"none",
+                    padding:"10px 20px",borderRadius:8,border:"none",
                     background:"rgba(91,141,239,0.15)",color:"#7ba4f0",
                     fontSize:13,fontWeight:600,cursor:loading?"wait":"pointer",
-                    transition:"all 0.2s ease",whiteSpace:"nowrap",
                   }}>{loading?<Spinner size="sm"/>:"Sign In"}</button>
                 </div>
               </form>
@@ -378,14 +302,14 @@ export const LoginPage = () => {
         {/* Divider */}
         <div style={{ display:"flex",alignItems:"center",gap:16,margin:"0 0 16px" }}>
           <div style={{ flex:1,height:1,background:"rgba(255,255,255,0.06)" }}/>
-          <span style={{ fontSize:11,color:"#3a4252",fontWeight:600,letterSpacing:1,textTransform:"uppercase" }}>
-            or explore as
+          <span style={{ fontSize:10,color:"#3a4252",fontWeight:600,letterSpacing:1,textTransform:"uppercase" }}>
+            or try as
           </span>
           <div style={{ flex:1,height:1,background:"rgba(255,255,255,0.06)" }}/>
         </div>
 
-        {/* Role cards */}
-        <div style={{ display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12 }}>
+        {/* Role cards — compact grid */}
+        <div style={{ display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:10 }}>
           {ROLE_OPTIONS.map((opt,idx) => {
             const isActive = selectedRole===opt.role;
             const isHovered = hoveredRole===opt.role;
@@ -395,76 +319,48 @@ export const LoginPage = () => {
                 onClick={() => handleRoleLogin(opt.role)}
                 onMouseEnter={() => setHoveredRole(opt.role)}
                 onMouseLeave={() => setHoveredRole(null)}
-                aria-label={`Sign in as ${opt.title}`}
                 style={{
                   display:"flex",flexDirection:"column",alignItems:"center",
-                  padding:"24px 16px 20px",borderRadius:16,
+                  padding:"20px 12px 16px",borderRadius:12,
                   border:`1px solid ${isActive||isHovered?opt.color+"40":"rgba(255,255,255,0.05)"}`,
-                  background:isActive?`${opt.color}10`:isHovered?"rgba(255,255,255,0.035)":"rgba(255,255,255,0.02)",
+                  background:isActive?`${opt.color}10`:"rgba(255,255,255,0.02)",
                   cursor:loading?"wait":"pointer",textAlign:"center",
-                  transition:"all 0.25s cubic-bezier(0.16,1,0.3,1)",
+                  transition:"all 0.2s",
                   opacity:mounted?(loading&&!isActive?0.35:1):0,
-                  transform:mounted?"translateY(0)":"translateY(15px)",
-                  transitionDelay:`${0.1+idx*0.05}s`,
-                  backdropFilter:"blur(8px)",
+                  transform:mounted?"translateY(0)":"translateY(10px)",
+                  transitionDelay:`${0.1+idx*0.04}s`,
                 }}
               >
-                {/* Avatar */}
                 <div style={{
-                  width:48,height:48,borderRadius:14,
-                  background:`linear-gradient(135deg, ${opt.color}25, ${opt.color}10)`,
-                  border:`2px solid ${isHovered?opt.color+"60":opt.color+"25"}`,
+                  width:40,height:40,borderRadius:12,
+                  background:`${opt.color}15`,
+                  border:`2px solid ${isHovered?opt.color+"50":opt.color+"20"}`,
                   display:"flex",alignItems:"center",justifyContent:"center",
-                  fontSize:18,fontWeight:800,color:opt.color,
-                  marginBottom:12,transition:"all 0.25s ease",
-                  boxShadow:isHovered?`0 0 20px ${opt.color}20`:"none",
+                  fontSize:16,fontWeight:800,color:opt.color,
+                  marginBottom:10,transition:"all 0.2s",
                 }}>
-                  {isActive&&loading?<Spinner size="md"/>:opt.icon}
+                  {isActive&&loading?<Spinner size="sm"/>:opt.icon}
                 </div>
-
-                {/* Name + desc */}
-                <div style={{ color:"#e2e8f0",fontSize:14,fontWeight:600,marginBottom:4 }}>
+                <div style={{ color:"#e2e8f0",fontSize:13,fontWeight:600,marginBottom:2 }}>
                   {opt.title}
                 </div>
-                <div style={{ color:"#4a5568",fontSize:11,marginBottom:12,lineHeight:1.4 }}>
+                <div style={{ color:"#4a5568",fontSize:11 }}>
                   {opt.description}
                 </div>
-
-                {/* Capability tags */}
-                <div style={{ display:"flex",flexWrap:"wrap",gap:4,justifyContent:"center" }}>
-                  {opt.capabilities.slice(0,2).map(cap => (
-                    <span key={cap} style={{
-                      fontSize:9,fontWeight:500,
-                      color:isHovered?opt.color:"#4a5568",
-                      background:isHovered?`${opt.color}0c`:"rgba(255,255,255,0.03)",
-                      padding:"3px 8px",borderRadius:6,
-                      border:`1px solid ${isHovered?opt.color+"18":"rgba(255,255,255,0.04)"}`,
-                      transition:"all 0.25s ease",
-                    }}>{cap}</span>
-                  ))}
-                  {opt.capabilities.length>2 && (
-                    <span style={{ fontSize:9,color:opt.color,padding:"3px 4px",fontWeight:600 }}>+{opt.capabilities.length-2}</span>
-                  )}
-                </div>
               </button>
             );
           })}
         </div>
       </section>
 
-      {/* ===== FOOTER ===== */}
+      {/* Footer */}
       <footer style={{
-        textAlign:"center",padding:"40px 48px",
+        textAlign:"center",padding:"32px 48px",
         borderTop:"1px solid rgba(255,255,255,0.04)",
         position:"relative",zIndex:1,
       }}>
-        <div style={{ display:"flex",justifyContent:"center",gap:24,marginBottom:16 }}>
-          {["Documentation","GitHub","Changelog","Community","Contributing"].map(l => (
-            <a key={l} href="#" style={{ fontSize:12,color:"#3a4252",textDecoration:"none",fontWeight:500 }}>{l}</a>
-          ))}
-        </div>
         <p style={{ fontSize:11,color:"#2a3242",margin:0 }}>
-          Arcana Platform v0.1.0 &middot; Open Source (Apache 2.0) &middot; Kubernetes-native AI Agent Operating System
+          Arcana &middot; Open Source (Apache 2.0) &middot; Deploy AI agents like pushing code
         </p>
       </footer>
     </div>
diff --git a/services/studio/src/pages/MarketplacePage.tsx b/services/studio/src/pages/MarketplacePage.tsx
index ff720a4..4090c7b 100644
--- a/services/studio/src/pages/MarketplacePage.tsx
+++ b/services/studio/src/pages/MarketplacePage.tsx
@@ -28,10 +28,14 @@ import {
   RocketIcon,
   DownloadIcon,
   CodeBranchIcon,
+  RobotIcon,
+  CubesIcon,
 } from "@patternfly/react-icons";
+import { useNavigate } from "react-router-dom";
 
 /* ---------- types ---------- */
 
+type Tab = "yours" | "community";
 type ItemType = "agent" | "skill";
 type QualityBadge = "gold" | "silver" | "bronze" | "untested";
 type Category = "all" | "productivity" | "marketing" | "engineering" | "support" | "data";
@@ -48,6 +52,18 @@ interface MarketplaceItem {
   tier?: string;
 }
 
+interface OwnedAgent {
+  name: string;
+  status: string;
+  capabilities: string[];
+}
+
+interface OwnedSkill {
+  name: string;
+  tier?: string;
+  description?: string;
+}
+
 /* ---------- constants ---------- */
 
 const CATEGORIES: { value: Category; label: string }[] = [
@@ -59,11 +75,11 @@ const CATEGORIES: { value: Category; label: string }[] = [
   { value: "data", label: "Data" },
 ];
 
-const BADGE_COLORS: Record<QualityBadge, { bg: string; text: string; label: string }> = {
-  gold: { bg: "#92400e", text: "#fbbf24", label: "Gold" },
-  silver: { bg: "#374151", text: "#d1d5db", label: "Silver" },
-  bronze: { bg: "#7c2d12", text: "#fb923c", label: "Bronze" },
-  untested: { bg: "#1f2937", text: "#6b7280", label: "Untested" },
+const BADGE_COLORS: Record<QualityBadge, { label: string }> = {
+  gold: { label: "Gold" },
+  silver: { label: "Silver" },
+  bronze: { label: "Bronze" },
+  untested: { label: "Untested" },
 };
 
 const BADGE_PF_COLORS: Record<QualityBadge, "yellow" | "grey" | "orange" | "blue"> = {
@@ -73,6 +89,13 @@ const BADGE_PF_COLORS: Record<QualityBadge, "yellow" | "grey" | "orange" | "blue
   untested: "blue",
 };
 
+const STATUS_DOT: Record<string, { color: string; label: string }> = {
+  active: { color: "#22c55e", label: "Running" },
+  busy: { color: "#f59e0b", label: "Busy" },
+  idle: { color: "#8b95a5", label: "Sleeping" },
+  offline: { color: "#ef4444", label: "Crashed" },
+};
+
 /* ---------- star rating ---------- */
 
 function StarRating({
@@ -109,11 +132,21 @@ function StarRating({
 /* ---------- main component ---------- */
 
 export const MarketplacePage = () => {
+  const navigate = useNavigate();
+  const [tab, setTab] = useState<Tab>("yours");
+
+  /* ---- Yours tab state ---- */
+  const [ownedAgents, setOwnedAgents] = useState<OwnedAgent[]>([]);
+  const [ownedSkills, setOwnedSkills] = useState<OwnedSkill[]>([]);
+  const [yoursLoading, setYoursLoading] = useState(true);
+  const [yoursError, setYoursError] = useState<string | null>(null);
+  const [yoursSearch, setYoursSearch] = useState("");
+  const [yoursFilter, setYoursFilter] = useState<"all" | "agents" | "skills">("all");
+
+  /* ---- Community tab state ---- */
   const [items, setItems] = useState<MarketplaceItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [communityLoading, setCommunityLoading] = useState(false);
   const [fetchError, setFetchError] = useState<string | null>(null);
-
-  /* filters */
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<Category>("all");
   const [typeFilter, setTypeFilter] = useState<"all" | ItemType>("all");
@@ -130,8 +163,45 @@ export const MarketplacePage = () => {
   const [rateValue, setRateValue] = useState(0);
   const [ratingSubmitting, setRatingSubmitting] = useState(false);
 
-  const fetchItems = useCallback(async () => {
-    setLoading(true);
+  /* ---- fetch yours ---- */
+  const fetchOwned = useCallback(async () => {
+    setYoursLoading(true);
+    setYoursError(null);
+    try {
+      const [agentsRes, skillsRes] = await Promise.allSettled([
+        fetch("/api/v1/agents"),
+        fetch("/api/v1/skills"),
+      ]);
+      if (agentsRes.status === "fulfilled" && agentsRes.value.ok) {
+        const data = await agentsRes.value.json();
+        setOwnedAgents((data.agents ?? []).map((a: Record<string, unknown>) => ({
+          name: a.name as string,
+          status: a.status as string,
+          capabilities: (a.capabilities ?? []) as string[],
+        })));
+      }
+      if (skillsRes.status === "fulfilled" && skillsRes.value.ok) {
+        const data = await skillsRes.value.json();
+        setOwnedSkills((data.skills ?? []).map((s: Record<string, unknown>) => ({
+          name: s.name as string,
+          tier: s.tier as string | undefined,
+          description: s.description as string | undefined,
+        })));
+      }
+    } catch (e) {
+      setYoursError(e instanceof Error ? e.message : "Failed to load");
+    } finally {
+      setYoursLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOwned();
+  }, [fetchOwned]);
+
+  /* ---- fetch community ---- */
+  const fetchCommunity = useCallback(async () => {
+    setCommunityLoading(true);
     setFetchError(null);
     try {
       const params = new URLSearchParams();
@@ -139,28 +209,27 @@ export const MarketplacePage = () => {
       if (typeFilter !== "all") params.set("type", typeFilter);
       if (search.trim()) params.set("q", search.trim());
       const qs = params.toString();
-      const url = `/api/v1/marketplace${qs ? `?${qs}` : ""}`;
-      const res = await fetch(url);
+      const res = await fetch(`/api/v1/catalog${qs ? `?${qs}` : ""}`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       setItems(data.items ?? []);
     } catch (e) {
-      setFetchError(e instanceof Error ? e.message : "Failed to load marketplace");
+      setFetchError(e instanceof Error ? e.message : "Failed to load");
     } finally {
-      setLoading(false);
+      setCommunityLoading(false);
     }
   }, [category, typeFilter, search]);
 
   useEffect(() => {
-    fetchItems();
-  }, [fetchItems]);
+    if (tab === "community") fetchCommunity();
+  }, [tab, fetchCommunity]);
 
   /* ---- actions ---- */
   const handleDeploy = async (name: string) => {
     setActionLoading(name);
     setActionResult(null);
     try {
-      const res = await fetch(`/api/v1/marketplace/${encodeURIComponent(name)}/deploy`, { method: "POST" });
+      const res = await fetch(`/api/v1/catalog/${encodeURIComponent(name)}/deploy`, { method: "POST" });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
         throw new Error((data as Record<string, string>).error ?? `HTTP ${res.status}`);
@@ -177,7 +246,7 @@ export const MarketplacePage = () => {
     setActionLoading(name);
     setActionResult(null);
     try {
-      const res = await fetch(`/api/v1/marketplace/${encodeURIComponent(name)}/install`, { method: "POST" });
+      const res = await fetch(`/api/v1/catalog/${encodeURIComponent(name)}/install`, { method: "POST" });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
         throw new Error((data as Record<string, string>).error ?? `HTTP ${res.status}`);
@@ -193,7 +262,6 @@ export const MarketplacePage = () => {
   const handleFork = async (name: string) => {
     setActionLoading(name);
     try {
-      /* fork is a conceptual clone — post to marketplace */
       setActionResult({ name, message: `${name} forked to your workspace` });
     } finally {
       setActionLoading(null);
@@ -210,7 +278,7 @@ export const MarketplacePage = () => {
     if (!rateTarget || rateValue < 1) return;
     setRatingSubmitting(true);
     try {
-      const res = await fetch(`/api/v1/marketplace/${encodeURIComponent(rateTarget.name)}/rate`, {
+      const res = await fetch(`/api/v1/catalog/${encodeURIComponent(rateTarget.name)}/rate`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ rating: rateValue }),
@@ -218,7 +286,7 @@ export const MarketplacePage = () => {
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       setRateModalOpen(false);
       setActionResult({ name: rateTarget.name, message: `Rated ${rateTarget.name} ${rateValue} stars` });
-      await fetchItems();
+      await fetchCommunity();
     } catch {
       /* ignore */
     } finally {
@@ -226,27 +294,30 @@ export const MarketplacePage = () => {
     }
   };
 
-  /* ---- sorting ---- */
+  /* ---- community sorting + filtering ---- */
   const sortedItems = [...items].sort((a, b) => {
     switch (sortBy) {
-      case "popular":
-        return b.usage_count - a.usage_count;
-      case "rating":
-        return b.rating - a.rating;
-      case "recent":
-        return 0; /* server order */
-      default:
-        return 0;
+      case "popular": return b.usage_count - a.usage_count;
+      case "rating": return b.rating - a.rating;
+      default: return 0;
     }
   });
 
-  /* ---- badge filter ---- */
   const BADGE_RANK: Record<QualityBadge, number> = { gold: 3, silver: 2, bronze: 1, untested: 0 };
   const filteredItems = sortedItems.filter((item) => {
     if (badgeFilter === "all") return true;
     return BADGE_RANK[item.badge] >= BADGE_RANK[badgeFilter];
   });
 
+  /* ---- yours filtering ---- */
+  const yoursItems: Array<{ kind: "agent"; data: OwnedAgent } | { kind: "skill"; data: OwnedSkill }> = [
+    ...(yoursFilter === "skills" ? [] : ownedAgents.map((a) => ({ kind: "agent" as const, data: a }))),
+    ...(yoursFilter === "agents" ? [] : ownedSkills.map((s) => ({ kind: "skill" as const, data: s }))),
+  ];
+  const filteredYours = yoursSearch.trim()
+    ? yoursItems.filter((item) => item.data.name.toLowerCase().includes(yoursSearch.toLowerCase()))
+    : yoursItems;
+
   return (
     <>
       <PageSection hasBodyWrapper={false}>
@@ -254,247 +325,359 @@ export const MarketplacePage = () => {
           <div>
             <Title headingLevel="h1" size="2xl">Marketplace</Title>
             <Content component="p" style={{ marginTop: 4, color: "var(--pf-t--global--text--color--subtle)" }}>
-              Browse, deploy, and share agents and skills
+              Your registry and the community catalog in one place
             </Content>
           </div>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <Label isCompact color="blue">{filteredItems.length} items</Label>
+        </div>
+
+        {/* Yours / Community tabs */}
+        <div style={{ marginTop: 20 }}>
+          <div style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--arcana-card-border)" }}>
+            {([
+              { key: "yours", label: `Yours (${ownedAgents.length + ownedSkills.length})` },
+              { key: "community", label: "Community" },
+            ] as const).map((t) => (
+              <button
+                key={t.key}
+                type="button"
+                onClick={() => setTab(t.key)}
+                style={{
+                  padding: "10px 24px",
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: tab === t.key ? "var(--arcana-text)" : "var(--arcana-text-muted)",
+                  background: "none",
+                  border: "none",
+                  borderBottom: tab === t.key ? "2px solid #5b8def" : "2px solid transparent",
+                  cursor: "pointer",
+                  transition: "all 0.15s",
+                  marginBottom: -1,
+                }}
+              >
+                {t.label}
+              </button>
+            ))}
           </div>
         </div>
       </PageSection>
-      <Divider />
 
-      <PageSection hasBodyWrapper={false}>
-        {fetchError && (
-          <Alert variant="warning" title="Could not load marketplace" isInline style={{ marginBottom: 16 }}>
-            {fetchError}
-          </Alert>
-        )}
-        {actionResult && (
-          <Alert variant="info" title={actionResult.message} isInline style={{ marginBottom: 16 }} />
-        )}
-
-        <div style={{ display: "flex", gap: 24 }}>
-          {/* Sidebar filters */}
-          <div style={{ width: 220, flexShrink: 0 }}>
-            <div style={{ marginBottom: 20 }}>
-              <div style={{ fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.5px", color: "#8b95a5", marginBottom: 10 }}>
-                Type
-              </div>
-              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-                {(["all", "agent", "skill"] as const).map((t) => (
-                  <Button
-                    key={t}
-                    variant={typeFilter === t ? "primary" : "tertiary"}
-                    size="sm"
-                    isBlock
-                    onClick={() => setTypeFilter(t)}
-                    style={{ textAlign: "left", justifyContent: "flex-start" }}
-                  >
-                    {t === "all" ? "All Types" : t.charAt(0).toUpperCase() + t.slice(1) + "s"}
-                  </Button>
-                ))}
-              </div>
-            </div>
+      {/* ===== Yours tab ===== */}
+      {tab === "yours" && (
+        <PageSection hasBodyWrapper={false}>
+          {yoursError && (
+            <Alert variant="warning" title="Could not load registry" isInline style={{ marginBottom: 16 }}>
+              {yoursError}
+            </Alert>
+          )}
+
+          <div style={{ display: "flex", gap: 16, marginBottom: 20, alignItems: "center" }}>
+            <SearchInput
+              placeholder="Search your agents and skills..."
+              value={yoursSearch}
+              onChange={(_e, val) => setYoursSearch(val)}
+              onClear={() => setYoursSearch("")}
+              style={{ maxWidth: 280 }}
+            />
+            <ToggleGroup aria-label="Type filter">
+              {([
+                { value: "all", label: `All (${ownedAgents.length + ownedSkills.length})` },
+                { value: "agents", label: `Agents (${ownedAgents.length})` },
+                { value: "skills", label: `Skills (${ownedSkills.length})` },
+              ] as const).map((opt) => (
+                <ToggleGroupItem
+                  key={opt.value}
+                  text={opt.label}
+                  buttonId={`yours-${opt.value}`}
+                  isSelected={yoursFilter === opt.value}
+                  onChange={() => setYoursFilter(opt.value)}
+                />
+              ))}
+            </ToggleGroup>
+          </div>
 
-            <div style={{ marginBottom: 20 }}>
-              <div style={{ fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.5px", color: "#8b95a5", marginBottom: 10 }}>
-                Badge
-              </div>
-              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-                {(["all", "gold", "silver", "bronze"] as const).map((b) => (
-                  <Button
-                    key={b}
-                    variant={badgeFilter === b ? "primary" : "tertiary"}
-                    size="sm"
-                    isBlock
-                    onClick={() => setBadgeFilter(b)}
-                    style={{ textAlign: "left", justifyContent: "flex-start" }}
+          {yoursLoading ? (
+            <div style={{ textAlign: "center", padding: 60 }}>
+              <Spinner size="xl" />
+            </div>
+          ) : filteredYours.length === 0 ? (
+            <div style={{
+              textAlign: "center",
+              padding: "60px 40px",
+              color: "var(--arcana-text-secondary)",
+            }}>
+              {yoursSearch.trim()
+                ? `No results for "${yoursSearch}"`
+                : "Nothing registered yet. Deploy an agent or add a skill to get started."}
+            </div>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              {filteredYours.map((item) => {
+                if (item.kind === "agent") {
+                  const agent = item.data;
+                  const dot = STATUS_DOT[agent.status] ?? STATUS_DOT.offline;
+                  const skills = agent.capabilities.filter((c) => !c.startsWith("model:"));
+                  const model = agent.capabilities.find((c) => c.startsWith("model:"))?.replace("model:", "");
+                  return (
+                    <div
+                      key={`agent-${agent.name}`}
+                      onClick={() => navigate(`/agents/${agent.name}`)}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 14,
+                        padding: "14px 18px",
+                        background: "var(--arcana-card-bg)",
+                        borderRadius: 10,
+                        border: "1px solid var(--arcana-card-border)",
+                        cursor: "pointer",
+                        transition: "background 0.15s",
+                      }}
+                      onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)"; }}
+                      onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)"; }}
+                    >
+                      <RobotIcon style={{ color: "#5b8def", fontSize: 16, flexShrink: 0 }} />
+                      <span style={{
+                        width: 8, height: 8, borderRadius: "50%",
+                        background: dot.color, flexShrink: 0,
+                      }} />
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--arcana-text)" }}>
+                          {agent.name}
+                        </div>
+                        <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                          Agent &middot; {model ?? "—"} &middot; {dot.label}
+                        </div>
+                      </div>
+                      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+                        {skills.slice(0, 3).map((s) => (
+                          <Label key={s} isCompact color="grey">{s}</Label>
+                        ))}
+                        {skills.length > 3 && <Label isCompact color="grey">+{skills.length - 3}</Label>}
+                      </div>
+                    </div>
+                  );
+                }
+
+                const skill = item.data;
+                return (
+                  <div
+                    key={`skill-${skill.name}`}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 14,
+                      padding: "14px 18px",
+                      background: "var(--arcana-card-bg)",
+                      borderRadius: 10,
+                      border: "1px solid var(--arcana-card-border)",
+                      transition: "background 0.15s",
+                    }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)"; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)"; }}
                   >
-                    {b === "all" ? "Any Badge" : `${b.charAt(0).toUpperCase() + b.slice(1)}+`}
-                  </Button>
-                ))}
-              </div>
+                    <CubesIcon style={{ color: "#a855f7", fontSize: 16, flexShrink: 0 }} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--arcana-text)" }}>
+                        {skill.name}
+                      </div>
+                      <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                        Skill{skill.tier ? ` · ${skill.tier}` : ""}
+                        {skill.description ? ` · ${skill.description}` : ""}
+                      </div>
+                    </div>
+                    {skill.tier && <Label isCompact color="purple">{skill.tier}</Label>}
+                  </div>
+                );
+              })}
             </div>
-
-            <div>
-              <div style={{ fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.5px", color: "#8b95a5", marginBottom: 10 }}>
-                Sort By
+          )}
+        </PageSection>
+      )}
+
+      {/* ===== Community tab ===== */}
+      {tab === "community" && (
+        <PageSection hasBodyWrapper={false}>
+          {fetchError && (
+            <Alert variant="warning" title="Could not load community catalog" isInline style={{ marginBottom: 16 }}>
+              {fetchError}
+            </Alert>
+          )}
+          {actionResult && (
+            <Alert variant="info" title={actionResult.message} isInline style={{ marginBottom: 16 }} />
+          )}
+
+          <div style={{ display: "flex", gap: 24 }}>
+            {/* Sidebar filters */}
+            <div style={{ width: 200, flexShrink: 0 }}>
+              <div style={{ marginBottom: 20 }}>
+                <div style={{ fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--arcana-text-muted)", marginBottom: 10 }}>
+                  Type
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {(["all", "agent", "skill"] as const).map((t) => (
+                    <Button
+                      key={t}
+                      variant={typeFilter === t ? "primary" : "tertiary"}
+                      size="sm"
+                      isBlock
+                      onClick={() => setTypeFilter(t)}
+                      style={{ textAlign: "left", justifyContent: "flex-start" }}
+                    >
+                      {t === "all" ? "All Types" : t.charAt(0).toUpperCase() + t.slice(1) + "s"}
+                    </Button>
+                  ))}
+                </div>
               </div>
-              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-                {(["popular", "recent", "rating"] as const).map((s) => (
-                  <Button
-                    key={s}
-                    variant={sortBy === s ? "primary" : "tertiary"}
-                    size="sm"
-                    isBlock
-                    onClick={() => setSortBy(s)}
-                    style={{ textAlign: "left", justifyContent: "flex-start" }}
-                  >
-                    {s.charAt(0).toUpperCase() + s.slice(1)}
-                  </Button>
-                ))}
+
+              <div style={{ marginBottom: 20 }}>
+                <div style={{ fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--arcana-text-muted)", marginBottom: 10 }}>
+                  Badge
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {(["all", "gold", "silver", "bronze"] as const).map((b) => (
+                    <Button
+                      key={b}
+                      variant={badgeFilter === b ? "primary" : "tertiary"}
+                      size="sm"
+                      isBlock
+                      onClick={() => setBadgeFilter(b)}
+                      style={{ textAlign: "left", justifyContent: "flex-start" }}
+                    >
+                      {b === "all" ? "Any Badge" : `${b.charAt(0).toUpperCase() + b.slice(1)}+`}
+                    </Button>
+                  ))}
+                </div>
               </div>
-            </div>
-          </div>
 
-          {/* Main content */}
-          <div style={{ flex: 1 }}>
-            {/* Search + category bar */}
-            <div style={{ display: "flex", gap: 12, marginBottom: 20, flexWrap: "wrap", alignItems: "center" }}>
-              <SearchInput
-                placeholder="Search agents and skills..."
-                value={search}
-                onChange={(_e, val) => setSearch(val)}
-                onClear={() => setSearch("")}
-                style={{ maxWidth: 320 }}
-              />
-              <ToggleGroup aria-label="Category filter">
-                {CATEGORIES.map((cat) => (
-                  <ToggleGroupItem
-                    key={cat.value}
-                    text={cat.label}
-                    buttonId={`cat-${cat.value}`}
-                    isSelected={category === cat.value}
-                    onChange={() => setCategory(cat.value)}
-                  />
-                ))}
-              </ToggleGroup>
+              <div>
+                <div style={{ fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--arcana-text-muted)", marginBottom: 10 }}>
+                  Sort By
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {(["popular", "recent", "rating"] as const).map((s) => (
+                    <Button
+                      key={s}
+                      variant={sortBy === s ? "primary" : "tertiary"}
+                      size="sm"
+                      isBlock
+                      onClick={() => setSortBy(s)}
+                      style={{ textAlign: "left", justifyContent: "flex-start" }}
+                    >
+                      {s.charAt(0).toUpperCase() + s.slice(1)}
+                    </Button>
+                  ))}
+                </div>
+              </div>
             </div>
 
-            {loading ? (
-              <div style={{ textAlign: "center", padding: 60 }}>
-                <Spinner size="xl" />
+            {/* Main content */}
+            <div style={{ flex: 1 }}>
+              <div style={{ display: "flex", gap: 12, marginBottom: 20, flexWrap: "wrap", alignItems: "center" }}>
+                <SearchInput
+                  placeholder="Search community..."
+                  value={search}
+                  onChange={(_e, val) => setSearch(val)}
+                  onClear={() => setSearch("")}
+                  style={{ maxWidth: 300 }}
+                />
+                <ToggleGroup aria-label="Category filter">
+                  {CATEGORIES.map((cat) => (
+                    <ToggleGroupItem
+                      key={cat.value}
+                      text={cat.label}
+                      buttonId={`cat-${cat.value}`}
+                      isSelected={category === cat.value}
+                      onChange={() => setCategory(cat.value)}
+                    />
+                  ))}
+                </ToggleGroup>
               </div>
-            ) : filteredItems.length === 0 ? (
-              <div className="arcana-empty-state">
-                <div className="arcana-empty-icon">
-                  <CatalogIcon />
+
+              {communityLoading ? (
+                <div style={{ textAlign: "center", padding: 60 }}>
+                  <Spinner size="xl" />
                 </div>
-                <Title headingLevel="h2" size="xl" style={{ marginBottom: 8 }}>
-                  No items found
-                </Title>
-                <Content component="p" style={{ maxWidth: 480, margin: "0 auto", color: "var(--pf-t--global--text--color--subtle)" }}>
-                  Try adjusting your filters or search terms.
-                </Content>
-              </div>
-            ) : (
-              <Grid hasGutter>
-                {filteredItems.map((item) => (
-                  <GridItem span={4} key={`${item.type}-${item.name}`}>
-                    <Card className="marketplace-card" isFullHeight>
-                      <CardBody>
-                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
-                          <div style={{ fontWeight: 700, fontSize: 15, color: "#e2e8f0" }}>
-                            {item.name}
-                          </div>
-                          <div style={{ display: "flex", gap: 6 }}>
-                            <Label
-                              isCompact
-                              color={item.type === "agent" ? "blue" : "purple"}
-                            >
-                              {item.type === "agent" ? "Agent" : "Skill"}
-                            </Label>
-                            <Label
-                              isCompact
-                              color={BADGE_PF_COLORS[item.badge]}
-                            >
-                              {BADGE_COLORS[item.badge].label}
-                            </Label>
+              ) : filteredItems.length === 0 ? (
+                <div className="arcana-empty-state">
+                  <div className="arcana-empty-icon"><CatalogIcon /></div>
+                  <Title headingLevel="h2" size="xl" style={{ marginBottom: 8 }}>No items found</Title>
+                  <Content component="p" style={{ maxWidth: 480, margin: "0 auto", color: "var(--pf-t--global--text--color--subtle)" }}>
+                    Try adjusting your filters or search terms.
+                  </Content>
+                </div>
+              ) : (
+                <Grid hasGutter>
+                  {filteredItems.map((item) => (
+                    <GridItem span={4} key={`${item.type}-${item.name}`}>
+                      <Card className="marketplace-card" isFullHeight>
+                        <CardBody>
+                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
+                            <div style={{ fontWeight: 700, fontSize: 15, color: "var(--arcana-text)" }}>
+                              {item.name}
+                            </div>
+                            <div style={{ display: "flex", gap: 6 }}>
+                              <Label isCompact color={item.type === "agent" ? "blue" : "purple"}>
+                                {item.type === "agent" ? "Agent" : "Skill"}
+                              </Label>
+                              <Label isCompact color={BADGE_PF_COLORS[item.badge]}>
+                                {BADGE_COLORS[item.badge].label}
+                              </Label>
+                            </div>
                           </div>
-                        </div>
 
-                        <Label isCompact color="grey" style={{ marginBottom: 8 }}>
-                          {item.category}
-                        </Label>
-                        {item.tier && (
-                          <Label isCompact color="teal" style={{ marginLeft: 6, marginBottom: 8 }}>
-                            {item.tier}
-                          </Label>
-                        )}
-
-                        <Content component="p" style={{
-                          fontSize: 13,
-                          color: "#8b95a5",
-                          marginBottom: 12,
-                          minHeight: 40,
-                          display: "-webkit-box",
-                          WebkitLineClamp: 2,
-                          WebkitBoxOrient: "vertical",
-                          overflow: "hidden",
-                        }}>
-                          {item.description}
-                        </Content>
-
-                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
-                          <StarRating rating={item.rating} />
-                          <span style={{ fontSize: 12, color: "#6b7280" }}>
-                            {item.usage_count.toLocaleString()} uses
-                          </span>
-                        </div>
+                          <Label isCompact color="grey" style={{ marginBottom: 8 }}>{item.category}</Label>
+                          {item.tier && <Label isCompact color="teal" style={{ marginLeft: 6, marginBottom: 8 }}>{item.tier}</Label>}
+
+                          <Content component="p" style={{
+                            fontSize: 13, color: "var(--arcana-text-secondary)", marginBottom: 12, minHeight: 40,
+                            display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
+                          }}>
+                            {item.description}
+                          </Content>
+
+                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+                            <StarRating rating={item.rating} />
+                            <span style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                              {item.usage_count.toLocaleString()} uses
+                            </span>
+                          </div>
 
-                        <div style={{ display: "flex", gap: 8 }}>
-                          {item.type === "agent" ? (
-                            <Button
-                              variant="primary"
-                              size="sm"
-                              icon={<RocketIcon />}
-                              isLoading={actionLoading === item.name}
-                              isDisabled={actionLoading === item.name}
-                              onClick={() => handleDeploy(item.name)}
-                              style={{ flex: 1 }}
-                            >
-                              Deploy
-                            </Button>
-                          ) : (
-                            <Button
-                              variant="primary"
-                              size="sm"
-                              icon={<DownloadIcon />}
-                              isLoading={actionLoading === item.name}
-                              isDisabled={actionLoading === item.name}
-                              onClick={() => handleInstall(item.name)}
-                              style={{ flex: 1 }}
-                            >
-                              Install
-                            </Button>
-                          )}
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            icon={<CodeBranchIcon />}
-                            onClick={() => handleFork(item.name)}
-                            aria-label={`Fork ${item.name}`}
-                          />
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            icon={<StarIcon />}
-                            onClick={() => openRateModal(item)}
-                            aria-label={`Rate ${item.name}`}
-                          />
-                        </div>
-                      </CardBody>
-                    </Card>
-                  </GridItem>
-                ))}
-              </Grid>
-            )}
+                          <div style={{ display: "flex", gap: 8 }}>
+                            {item.type === "agent" ? (
+                              <Button variant="primary" size="sm" icon={<RocketIcon />}
+                                isLoading={actionLoading === item.name} isDisabled={actionLoading === item.name}
+                                onClick={() => handleDeploy(item.name)} style={{ flex: 1 }}>
+                                Deploy
+                              </Button>
+                            ) : (
+                              <Button variant="primary" size="sm" icon={<DownloadIcon />}
+                                isLoading={actionLoading === item.name} isDisabled={actionLoading === item.name}
+                                onClick={() => handleInstall(item.name)} style={{ flex: 1 }}>
+                                Install
+                              </Button>
+                            )}
+                            <Button variant="secondary" size="sm" icon={<CodeBranchIcon />}
+                              onClick={() => handleFork(item.name)} aria-label={`Fork ${item.name}`} />
+                            <Button variant="secondary" size="sm" icon={<StarIcon />}
+                              onClick={() => openRateModal(item)} aria-label={`Rate ${item.name}`} />
+                          </div>
+                        </CardBody>
+                      </Card>
+                    </GridItem>
+                  ))}
+                </Grid>
+              )}
+            </div>
           </div>
-        </div>
-      </PageSection>
+        </PageSection>
+      )}
 
       {/* Rate modal */}
-      <Modal
-        variant={ModalVariant.small}
-        isOpen={rateModalOpen}
-        onClose={() => setRateModalOpen(false)}
-        aria-labelledby="rate-modal-title"
-      >
+      <Modal variant={ModalVariant.small} isOpen={rateModalOpen} onClose={() => setRateModalOpen(false)} aria-labelledby="rate-modal-title">
         <ModalHeader title={`Rate ${rateTarget?.name ?? ""}`} labelId="rate-modal-title" />
         <ModalBody>
           <div style={{ textAlign: "center", padding: 16 }}>
-            <div style={{ marginBottom: 16, fontSize: 14, color: "#8b95a5" }}>
+            <div style={{ marginBottom: 16, fontSize: 14, color: "var(--arcana-text-secondary)" }}>
               How would you rate this {rateTarget?.type}?
             </div>
             <div style={{ fontSize: 28 }}>
@@ -503,17 +686,10 @@ export const MarketplacePage = () => {
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button
-            variant="primary"
-            onClick={submitRating}
-            isDisabled={rateValue < 1 || ratingSubmitting}
-            isLoading={ratingSubmitting}
-          >
+          <Button variant="primary" onClick={submitRating} isDisabled={rateValue < 1 || ratingSubmitting} isLoading={ratingSubmitting}>
             Submit Rating
           </Button>
-          <Button variant="link" onClick={() => setRateModalOpen(false)}>
-            Cancel
-          </Button>
+          <Button variant="link" onClick={() => setRateModalOpen(false)}>Cancel</Button>
         </ModalFooter>
       </Modal>
     </>
diff --git a/services/studio/src/pages/ModelsPage.tsx b/services/studio/src/pages/ModelsPage.tsx
index 004431f..f483308 100644
--- a/services/studio/src/pages/ModelsPage.tsx
+++ b/services/studio/src/pages/ModelsPage.tsx
@@ -74,14 +74,18 @@ export const ModelsPage = () => {
 
   const fetchData = useCallback(async () => {
     try {
-      const [modelsRes, budgetRes] = await Promise.all([
+      const [modelsRes, budgetRes] = await Promise.allSettled([
         fetch("/api/v1/models"),
         fetch("/api/v1/budget"),
       ]);
-      const modelsData = await modelsRes.json();
-      const budgetData = await budgetRes.json();
-      setModels(modelsData.models || []);
-      setBudget(budgetData);
+      if (modelsRes.status === "fulfilled" && modelsRes.value.ok) {
+        const data = await modelsRes.value.json();
+        setModels(data.models || []);
+      }
+      if (budgetRes.status === "fulfilled" && budgetRes.value.ok) {
+        const data = await budgetRes.value.json();
+        setBudget(data);
+      }
     } catch {
       setError("Failed to load models data");
     } finally {
diff --git a/services/studio/src/pages/OrgChartPage.tsx b/services/studio/src/pages/OrgChartPage.tsx
index d00d460..8f7b0f9 100644
--- a/services/studio/src/pages/OrgChartPage.tsx
+++ b/services/studio/src/pages/OrgChartPage.tsx
@@ -161,7 +161,7 @@ export const OrgChartPage = () => {
     try {
       const [agentsRes, teamsRes] = await Promise.allSettled([
         fetch("/api/v1/agents"),
-        fetch("/api/v1/finops/teams"),
+        fetch("/api/v1/costs/teams"),
       ]);
 
       if (agentsRes.status === "fulfilled" && agentsRes.value.ok) {
diff --git a/services/studio/src/pages/PlatformChatPage.tsx b/services/studio/src/pages/PlatformChatPage.tsx
index 602a776..965a730 100644
--- a/services/studio/src/pages/PlatformChatPage.tsx
+++ b/services/studio/src/pages/PlatformChatPage.tsx
@@ -1,33 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Chatbot, {
-  ChatbotDisplayMode,
-} from "@patternfly/chatbot/dist/dynamic/Chatbot";
-import ChatbotContent from "@patternfly/chatbot/dist/dynamic/ChatbotContent";
-import ChatbotWelcomePrompt from "@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt";
-import ChatbotFooter, {
-  ChatbotFootnote,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotFooter";
-import MessageBar from "@patternfly/chatbot/dist/dynamic/MessageBar";
-import MessageBox from "@patternfly/chatbot/dist/dynamic/MessageBox";
-import Message from "@patternfly/chatbot/dist/dynamic/Message";
-import ChatbotHeader, {
-  ChatbotHeaderMain,
-  ChatbotHeaderTitle,
-  ChatbotHeaderActions,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotHeader";
-import ChatbotConversationHistoryNav, {
-  type Conversation,
-} from "@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav";
-import { Button, Spinner } from "@patternfly/react-core";
-import { PlusCircleIcon } from "@patternfly/react-icons";
+import { Spinner } from "@patternfly/react-core";
 import { useAuth } from "../auth/AuthContext";
-import {
-  detectCommand,
-  executePlatformCommand,
-} from "./platformCommands";
-
-/* ---------- types ---------- */
+import { detectCommand, executePlatformCommand } from "./platformCommands";
 
 interface ConversationMessage {
   id: string;
@@ -43,399 +18,358 @@ interface ChatSession {
   updated_at: string;
 }
 
-/* ---------- welcome prompts ---------- */
-
-const WELCOME_PROMPTS = [
-  { title: "Deploy an agent", message: "Deploy an agent called my-assistant" },
-  { title: "Show costs", message: "Show me the current platform costs" },
-  { title: "Check system status", message: "What is the system health status?" },
-  { title: "List skills", message: "List all available skills" },
-  { title: "List models", message: "Show me all registered models" },
-  { title: "View audit logs", message: "Show recent audit events" },
+const SUGGESTIONS = [
+  { label: "Deploy an agent", msg: "Deploy an agent called my-assistant" },
+  { label: "System status", msg: "What is the system health status?" },
+  { label: "List skills", msg: "List all available skills" },
+  { label: "Show costs", msg: "Show me the current platform costs" },
 ];
 
-/* ---------- component ---------- */
-
 export const PlatformChatPage = () => {
   const navigate = useNavigate();
   const { authHeaders } = useAuth();
 
   const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [sessionsLoading, setSessionsLoading] = useState(true);
-  const [isHistoryOpen, setIsHistoryOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" });
-    }
+    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, isLoading]);
 
-  /* ----- load session list ----- */
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   const loadSessions = useCallback(async () => {
     setSessionsLoading(true);
     try {
-      const res = await fetch("/api/v1/chat/sessions", {
-        headers: { ...authHeaders() },
-      });
+      const res = await fetch("/api/v1/chat/sessions", { headers: { ...authHeaders() } });
       if (res.ok) {
         const data = await res.json();
-        const list: ChatSession[] = Array.isArray(data) ? data : data.sessions ?? [];
-        setSessions(list);
+        setSessions(Array.isArray(data) ? data : data.sessions ?? []);
       }
-    } catch {
-      /* best-effort */
-    } finally {
-      setSessionsLoading(false);
-    }
+    } catch { /* best-effort */ }
+    finally { setSessionsLoading(false); }
   }, [authHeaders]);
 
-  useEffect(() => {
-    loadSessions();
-  }, [loadSessions]);
+  useEffect(() => { loadSessions(); }, [loadSessions]);
 
-  /* ----- load messages for a session ----- */
-  const loadSessionMessages = useCallback(
-    async (id: string) => {
-      try {
-        const res = await fetch(`/api/v1/chat/sessions/${id}/messages`, {
-          headers: { ...authHeaders() },
-        });
-        if (!res.ok) return;
-        const data = await res.json();
-        const msgs: Array<{ role: string; content: string; timestamp?: string }> =
-          Array.isArray(data) ? data : data.messages ?? [];
-        setMessages(
-          msgs.map((m, i) => ({
-            id: `${id}-${i}`,
-            role: m.role === "user" ? "user" : "bot",
-            content: m.content,
-            timestamp: m.timestamp ?? "",
-          })),
-        );
-        setSessionId(id);
-      } catch {
-        /* best-effort */
-      }
-    },
-    [authHeaders],
-  );
+  const loadSessionMessages = useCallback(async (id: string) => {
+    try {
+      const res = await fetch(`/api/v1/chat/sessions/${id}/messages`, { headers: { ...authHeaders() } });
+      if (!res.ok) return;
+      const data = await res.json();
+      const msgs: Array<{ role: string; content: string; timestamp?: string }> =
+        Array.isArray(data) ? data : data.messages ?? [];
+      setMessages(msgs.map((m, i) => ({
+        id: `${id}-${i}`,
+        role: m.role === "user" ? "user" : "bot",
+        content: m.content,
+        timestamp: m.timestamp ?? "",
+      })));
+      setSessionId(id);
+    } catch { /* best-effort */ }
+  }, [authHeaders]);
 
-  /* ----- new conversation ----- */
-  const startNewConversation = useCallback(() => {
-    if (abortRef.current) {
-      abortRef.current.abort();
-      abortRef.current = null;
-    }
+  const startNew = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
     setMessages([]);
     setSessionId(null);
     setIsLoading(false);
+    inputRef.current?.focus();
   }, []);
 
-  /* ----- SSE streaming ----- */
-  const streamAgentResponse = useCallback(
-    async (text: string) => {
-      const controller = new AbortController();
-      abortRef.current = controller;
-
-      const botId = `bot-${Date.now()}`;
-      setMessages((prev) => [
-        ...prev,
-        { id: botId, role: "bot", content: "", timestamp: new Date().toLocaleTimeString() },
-      ]);
-
-      try {
-        const payload: Record<string, string> = { message: text };
-        if (sessionId) payload.session_id = sessionId;
-
-        const res = await fetch("/api/v1/chat/stream", {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...authHeaders() },
-          body: JSON.stringify(payload),
-          signal: controller.signal,
-        });
-
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const streamResponse = useCallback(async (text: string) => {
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const botId = `bot-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: botId, role: "bot", content: "", timestamp: new Date().toLocaleTimeString() }]);
 
-        const contentType = res.headers.get("content-type") ?? "";
-        if (contentType.includes("text/event-stream") && res.body) {
-          const reader = res.body.getReader();
-          const decoder = new TextDecoder();
-          let accumulated = "";
-
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            const chunk = decoder.decode(value, { stream: true });
-            const lines = chunk.split("\n");
-            for (const line of lines) {
-              if (line.startsWith("data: ")) {
-                const dataPayload = line.slice(6);
-                if (dataPayload === "[DONE]") break;
-                try {
-                  const parsed = JSON.parse(dataPayload);
-                  if (parsed.session_id) setSessionId(parsed.session_id);
-                  const token = parsed.token ?? parsed.content ?? "";
-                  if (token) {
-                    accumulated += token;
-                    setMessages((prev) =>
-                      prev.map((m) => (m.id === botId ? { ...m, content: accumulated } : m)),
-                    );
-                  }
-                } catch {
-                  if (dataPayload.trim()) {
-                    accumulated += dataPayload;
-                    setMessages((prev) =>
-                      prev.map((m) => (m.id === botId ? { ...m, content: accumulated } : m)),
-                    );
-                  }
-                }
-              }
+    try {
+      const payload: Record<string, string> = { message: text };
+      if (sessionId) payload.session_id = sessionId;
+      const res = await fetch("/api/v1/chat/stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...authHeaders() },
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      const ct = res.headers.get("content-type") ?? "";
+      if (ct.includes("text/event-stream") && res.body) {
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let acc = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          for (const line of decoder.decode(value, { stream: true }).split("\n")) {
+            if (!line.startsWith("data: ")) continue;
+            const d = line.slice(6);
+            if (d === "[DONE]") break;
+            try {
+              const p = JSON.parse(d);
+              if (p.session_id) setSessionId(p.session_id);
+              const tok = p.token ?? p.content ?? "";
+              if (tok) { acc += tok; setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: acc } : m)); }
+            } catch {
+              if (d.trim()) { acc += d; setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: acc } : m)); }
             }
           }
-
-          if (!accumulated) {
-            setMessages((prev) =>
-              prev.map((m) => (m.id === botId ? { ...m, content: "Done." } : m)),
-            );
-          }
-        } else {
-          const data = await res.json();
-          if (data.session_id) setSessionId(data.session_id);
-          setMessages((prev) =>
-            prev.map((m) =>
-              m.id === botId ? { ...m, content: data.reply ?? data.content ?? "Done." } : m,
-            ),
-          );
         }
-
-        // Refresh sidebar after a conversation
-        loadSessions();
-      } catch (err) {
-        if (err instanceof DOMException && err.name === "AbortError") return;
-        setMessages((prev) =>
-          prev.map((m) =>
-            m.id === botId
-              ? {
-                  ...m,
-                  content:
-                    "Sorry, I couldn't reach the Arcana API. Is the platform running? Try `make dev` to start.",
-                }
-              : m,
-          ),
-        );
+        if (!acc) setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: "Done." } : m));
+      } else {
+        const data = await res.json();
+        if (data.session_id) setSessionId(data.session_id);
+        setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: data.reply ?? data.content ?? "Done." } : m));
       }
-    },
-    [sessionId, authHeaders, loadSessions],
-  );
-
-  /* ----- send handler ----- */
-  const handleSend = useCallback(
-    async (message: string | number) => {
-      const text = String(message);
-      if (!text.trim() || isLoading) return;
+      loadSessions();
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      setMessages((prev) => prev.map((m) => m.id === botId ? { ...m, content: "Could not reach the Arcana API. Is the platform running?" } : m));
+    }
+  }, [sessionId, authHeaders, loadSessions]);
 
-      const userMsg: ConversationMessage = {
-        id: `user-${Date.now()}`,
-        role: "user",
-        content: text,
-        timestamp: new Date().toLocaleTimeString(),
-      };
-      setMessages((prev) => [...prev, userMsg]);
-      setIsLoading(true);
+  const send = useCallback(async (text: string) => {
+    if (!text.trim() || isLoading) return;
+    setMessages((prev) => [...prev, { id: `user-${Date.now()}`, role: "user", content: text, timestamp: new Date().toLocaleTimeString() }]);
+    setInput("");
+    setIsLoading(true);
 
-      const action = detectCommand(text);
-      if (action) {
-        try {
-          const result = await executePlatformCommand(action, text, authHeaders());
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `bot-${Date.now()}`,
-              role: "bot",
-              content: result.markdown,
-              agentName: result.agentName,
-              timestamp: new Date().toLocaleTimeString(),
-            },
-          ]);
-        } catch {
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `err-${Date.now()}`,
-              role: "bot",
-              content: "❌ **Command failed.** Could not reach the Arcana API.",
-              timestamp: new Date().toLocaleTimeString(),
-            },
-          ]);
-        } finally {
-          setIsLoading(false);
-        }
-      } else {
-        try {
-          await streamAgentResponse(text);
-        } finally {
-          setIsLoading(false);
-        }
-      }
-    },
-    [isLoading, authHeaders, streamAgentResponse],
-  );
+    const action = detectCommand(text);
+    if (action) {
+      try {
+        const result = await executePlatformCommand(action, text, authHeaders());
+        setMessages((prev) => [...prev, { id: `bot-${Date.now()}`, role: "bot", content: result.markdown, agentName: result.agentName, timestamp: new Date().toLocaleTimeString() }]);
+      } catch {
+        setMessages((prev) => [...prev, { id: `err-${Date.now()}`, role: "bot", content: "Command failed. Could not reach the API.", timestamp: new Date().toLocaleTimeString() }]);
+      } finally { setIsLoading(false); }
+    } else {
+      try { await streamResponse(text); } finally { setIsLoading(false); }
+    }
+  }, [isLoading, authHeaders, streamResponse]);
 
-  /* ----- build conversation list for sidebar ----- */
-  const conversations: Conversation[] = sessions.map((s) => ({
-    id: s.id,
-    text: s.title || `Session ${s.id.slice(0, 8)}`,
-    onSelect: () => loadSessionMessages(s.id),
-  }));
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send(input);
+    }
+  };
 
-  /* ----- render ----- */
   return (
-    <div className="platform-chat-page">
-      <ChatbotConversationHistoryNav
-        displayMode={ChatbotDisplayMode.fullscreen}
-        onDrawerToggle={() => setIsHistoryOpen((prev) => !prev)}
-        isDrawerOpen={isHistoryOpen}
-        setIsDrawerOpen={setIsHistoryOpen}
-        activeItemId={sessionId ?? undefined}
-        onSelectActiveItem={(_e, itemId) => {
-          if (typeof itemId === "string") {
-            loadSessionMessages(itemId);
-          }
-        }}
-        conversations={conversations}
-        onNewChat={startNewConversation}
-        newChatButtonText="New Conversation"
-        searchInputPlaceholder="Search conversations..."
-        searchInputAriaLabel="Search conversations"
-        isLoading={sessionsLoading}
-        drawerContent={
-          <Chatbot displayMode={ChatbotDisplayMode.fullscreen}>
-            <ChatbotHeader>
-              <ChatbotHeaderMain>
-                <ChatbotHeaderTitle>
-                  <span
-                    style={{
-                      fontSize: 17,
-                      fontWeight: 700,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 10,
+    <div style={{ display: "flex", height: "calc(100vh - 76px)", overflow: "hidden" }}>
+      {/* Sidebar */}
+      {sidebarOpen && (
+        <div style={{
+          width: 260, flexShrink: 0, borderRight: "1px solid var(--arcana-card-border)",
+          background: "var(--arcana-bg-secondary)", display: "flex", flexDirection: "column",
+        }}>
+          <div style={{ padding: "16px 16px 12px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--arcana-text)" }}>Conversations</span>
+            <button type="button" onClick={startNew} style={{
+              fontSize: 12, fontWeight: 600, color: "#5b8def", background: "none", border: "none", cursor: "pointer",
+            }}>+ New</button>
+          </div>
+          <div style={{ flex: 1, overflowY: "auto", padding: "0 8px" }}>
+            {sessionsLoading ? (
+              <div style={{ textAlign: "center", padding: 24 }}><Spinner size="md" /></div>
+            ) : sessions.length === 0 ? (
+              <div style={{ padding: "24px 12px", fontSize: 12, color: "var(--arcana-text-muted)", textAlign: "center" }}>
+                No conversations yet
+              </div>
+            ) : sessions.map((s) => (
+              <button key={s.id} type="button" onClick={() => loadSessionMessages(s.id)} style={{
+                display: "block", width: "100%", textAlign: "left", padding: "10px 12px",
+                borderRadius: 8, border: "none", cursor: "pointer", marginBottom: 2,
+                background: sessionId === s.id ? "rgba(91,141,239,0.1)" : "transparent",
+                color: sessionId === s.id ? "var(--arcana-text)" : "var(--arcana-text-secondary)",
+                fontSize: 13, fontWeight: sessionId === s.id ? 600 : 400,
+                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+                transition: "background 0.15s",
+              }}>
+                {s.title || `Session ${s.id.slice(0, 8)}`}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Main chat area */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
+        {/* Header */}
+        <div style={{
+          padding: "12px 20px", borderBottom: "1px solid var(--arcana-card-border)",
+          display: "flex", alignItems: "center", gap: 12,
+        }}>
+          <button type="button" onClick={() => setSidebarOpen(!sidebarOpen)} style={{
+            background: "none", border: "none", cursor: "pointer", color: "var(--arcana-text-muted)",
+            fontSize: 16, padding: 4,
+          }}>
+            {sidebarOpen ? "☰" : "☰"}
+          </button>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{
+              width: 28, height: 28, borderRadius: 8,
+              background: "linear-gradient(135deg, #5b8def, #a855f7)",
+              display: "flex", alignItems: "center", justifyContent: "center",
+              color: "#fff", fontSize: 13, fontWeight: 800,
+            }}>A</div>
+            <span style={{ fontSize: 15, fontWeight: 600, color: "var(--arcana-text)" }}>Arcana</span>
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div style={{ flex: 1, overflowY: "auto", padding: "24px 0" }}>
+          <div style={{ maxWidth: 720, margin: "0 auto", padding: "0 24px" }}>
+            {messages.length === 0 && !sessionsLoading && (
+              <div style={{ textAlign: "center", paddingTop: 80 }}>
+                <div style={{
+                  width: 48, height: 48, borderRadius: 14, margin: "0 auto 20px",
+                  background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  color: "#fff", fontSize: 22, fontWeight: 800,
+                }}>A</div>
+                <h2 style={{ fontSize: 22, fontWeight: 600, color: "var(--arcana-text)", margin: "0 0 8px" }}>
+                  What can I help you with?
+                </h2>
+                <p style={{ fontSize: 14, color: "var(--arcana-text-muted)", margin: "0 0 28px" }}>
+                  Deploy agents, check costs, manage skills — in plain English.
+                </p>
+                <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+                  {SUGGESTIONS.map((s) => (
+                    <button key={s.label} type="button" onClick={() => send(s.msg)} style={{
+                      padding: "8px 16px", borderRadius: 20, fontSize: 13, fontWeight: 500,
+                      border: "1px solid var(--arcana-card-border)", background: "var(--arcana-card-bg)",
+                      color: "var(--arcana-text-secondary)", cursor: "pointer", transition: "all 0.15s",
                     }}
-                  >
-                    <span
-                      style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: 8,
-                        background:
-                          "var(--arcana-gradient, linear-gradient(135deg, #667eea, #764ba2))",
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        color: "#fff",
-                        fontSize: 16,
-                        fontWeight: 800,
-                        flexShrink: 0,
-                      }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.borderColor = "rgba(91,141,239,0.4)"; (e.currentTarget as HTMLButtonElement).style.color = "var(--arcana-text)"; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.borderColor = "var(--arcana-card-border)"; (e.currentTarget as HTMLButtonElement).style.color = "var(--arcana-text-secondary)"; }}
                     >
-                      A
-                    </span>
-                    Arcana Chat
-                  </span>
-                </ChatbotHeaderTitle>
-              </ChatbotHeaderMain>
-              <ChatbotHeaderActions>
-                <Button
-                  variant="plain"
-                  aria-label="New conversation"
-                  onClick={startNewConversation}
-                  icon={<PlusCircleIcon />}
-                />
-              </ChatbotHeaderActions>
-            </ChatbotHeader>
-
-            <ChatbotContent>
-              <MessageBox>
-                {messages.length === 0 && !sessionsLoading && (
-                  <ChatbotWelcomePrompt
-                    title="Hello! I'm Arcana."
-                    description="Your platform command center. Deploy agents, check costs, view audit logs, and more — all in plain English."
-                    prompts={WELCOME_PROMPTS.map((p) => ({
-                      title: p.title,
-                      message: p.message,
-                      onClick: () => handleSend(p.message),
-                    }))}
-                  />
-                )}
-
-                {messages.length === 0 && sessionsLoading && (
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      height: 200,
-                    }}
-                  >
-                    <Spinner size="lg" />
-                  </div>
+                      {s.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {messages.map((msg) => (
+              <div key={msg.id} style={{
+                display: "flex", gap: 12, marginBottom: 20,
+                flexDirection: msg.role === "user" ? "row-reverse" : "row",
+              }}>
+                {msg.role === "bot" && (
+                  <div style={{
+                    width: 28, height: 28, borderRadius: 8, flexShrink: 0,
+                    background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    color: "#fff", fontSize: 12, fontWeight: 800, marginTop: 2,
+                  }}>A</div>
                 )}
-
-                {messages.map((msg) => (
-                  <div key={msg.id}>
-                    <Message
-                      role={msg.role}
-                      content={msg.content}
-                      name={msg.role === "user" ? "You" : "Arcana"}
-                      timestamp={msg.timestamp}
-                    />
-                    {msg.role === "bot" && msg.agentName && (
-                      <div style={{ marginLeft: 56, marginTop: -8, marginBottom: 12 }}>
-                        <Button
-                          variant="link"
-                          onClick={() => navigate(`/agents/${msg.agentName}`)}
-                          style={{
-                            background:
-                              "var(--arcana-gradient, linear-gradient(135deg, #667eea, #764ba2))",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: 6,
-                            padding: "6px 16px",
-                            fontSize: 13,
-                            fontWeight: 600,
-                          }}
-                        >
-                          Open {msg.agentName} &rarr;
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {isLoading && (
-                  <Message role="bot" name="Arcana" content="Working on it..." isLoading />
-                )}
-
-                <div ref={scrollRef} />
-              </MessageBox>
-            </ChatbotContent>
-
-            <ChatbotFooter>
-              <MessageBar
-                onSendMessage={handleSend}
-                hasAttachButton={false}
-                hasMicrophoneButton={false}
-              />
-              <ChatbotFootnote label="Arcana Chat — no data leaves the cluster." />
-            </ChatbotFooter>
-          </Chatbot>
-        }
-      />
+                <div style={{
+                  maxWidth: "75%",
+                  padding: "12px 16px",
+                  borderRadius: msg.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                  background: msg.role === "user" ? "rgba(91,141,239,0.15)" : "var(--arcana-card-bg)",
+                  border: msg.role === "user" ? "none" : "1px solid var(--arcana-card-border)",
+                  color: "var(--arcana-text)",
+                  fontSize: 14, lineHeight: 1.6,
+                  whiteSpace: "pre-wrap", wordBreak: "break-word",
+                }}>
+                  {msg.content}
+                  {msg.agentName && (
+                    <div style={{ marginTop: 8 }}>
+                      <button type="button" onClick={() => navigate(`/agents/${msg.agentName}`)} style={{
+                        padding: "6px 14px", borderRadius: 6, border: "none", fontSize: 12, fontWeight: 600,
+                        background: "linear-gradient(135deg, #5b8def, #a855f7)", color: "#fff", cursor: "pointer",
+                      }}>
+                        Open {msg.agentName}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+
+            {isLoading && (
+              <div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
+                <div style={{
+                  width: 28, height: 28, borderRadius: 8, flexShrink: 0,
+                  background: "linear-gradient(135deg, #5b8def, #a855f7)",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  color: "#fff", fontSize: 12, fontWeight: 800,
+                }}>A</div>
+                <div style={{
+                  padding: "12px 16px", borderRadius: "16px 16px 16px 4px",
+                  background: "var(--arcana-card-bg)", border: "1px solid var(--arcana-card-border)",
+                  color: "var(--arcana-text-muted)", fontSize: 14,
+                  display: "flex", alignItems: "center", gap: 8,
+                }}>
+                  <span className="arcana-typing-dots">
+                    <span /><span /><span />
+                  </span>
+                </div>
+              </div>
+            )}
+
+            <div ref={scrollRef} />
+          </div>
+        </div>
+
+        {/* Input */}
+        <div style={{
+          padding: "16px 24px 20px",
+          borderTop: "1px solid var(--arcana-card-border)",
+        }}>
+          <div style={{
+            maxWidth: 720, margin: "0 auto",
+            display: "flex", gap: 10, alignItems: "flex-end",
+          }}>
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask Arcana anything..."
+              rows={1}
+              style={{
+                flex: 1, padding: "12px 16px", borderRadius: 12, resize: "none",
+                border: "1px solid var(--arcana-card-border)", background: "var(--arcana-input-bg)",
+                color: "var(--arcana-text)", fontSize: 14, lineHeight: 1.5,
+                outline: "none", fontFamily: "inherit",
+                transition: "border-color 0.15s",
+                minHeight: 44, maxHeight: 120,
+              }}
+              onFocus={(e) => { e.currentTarget.style.borderColor = "rgba(91,141,239,0.5)"; }}
+              onBlur={(e) => { e.currentTarget.style.borderColor = "var(--arcana-card-border)"; }}
+            />
+            <button type="button" onClick={() => send(input)} disabled={isLoading || !input.trim()} style={{
+              width: 44, height: 44, borderRadius: 12, border: "none",
+              background: input.trim() ? "linear-gradient(135deg, #5b8def, #a855f7)" : "var(--arcana-card-bg)",
+              color: input.trim() ? "#fff" : "var(--arcana-text-muted)",
+              cursor: input.trim() && !isLoading ? "pointer" : "default",
+              display: "flex", alignItems: "center", justifyContent: "center",
+              transition: "all 0.15s", flexShrink: 0,
+            }}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </button>
+          </div>
+          <div style={{ maxWidth: 720, margin: "6px auto 0", fontSize: 11, color: "var(--arcana-text-muted)", textAlign: "center" }}>
+            All data stays in your cluster
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/services/studio/src/pages/RegistryPage.tsx b/services/studio/src/pages/RegistryPage.tsx
new file mode 100644
index 0000000..88858a8
--- /dev/null
+++ b/services/studio/src/pages/RegistryPage.tsx
@@ -0,0 +1,268 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  PageSection,
+  Title,
+  Content,
+  Label,
+  SearchInput,
+  Spinner,
+  Alert,
+  Divider,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@patternfly/react-core";
+import {
+  RobotIcon,
+  CubesIcon,
+} from "@patternfly/react-icons";
+import { useNavigate } from "react-router-dom";
+
+type RegistryFilter = "all" | "agents" | "skills";
+
+interface RegistryAgent {
+  kind: "agent";
+  name: string;
+  status: string;
+  capabilities: string[];
+  registered_at?: string;
+}
+
+interface RegistrySkill {
+  kind: "skill";
+  name: string;
+  tier?: string;
+  description?: string;
+}
+
+type RegistryItem = RegistryAgent | RegistrySkill;
+
+const STATUS_DOT: Record<string, { color: string; label: string }> = {
+  active: { color: "#22c55e", label: "Running" },
+  busy: { color: "#f59e0b", label: "Busy" },
+  idle: { color: "#8b95a5", label: "Sleeping" },
+  offline: { color: "#ef4444", label: "Crashed" },
+};
+
+export const RegistryPage = () => {
+  const navigate = useNavigate();
+  const [agents, setAgents] = useState<RegistryAgent[]>([]);
+  const [skills, setSkills] = useState<RegistrySkill[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<RegistryFilter>("all");
+  const [search, setSearch] = useState("");
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [agentsRes, skillsRes] = await Promise.allSettled([
+        fetch("/api/v1/agents"),
+        fetch("/api/v1/skills"),
+      ]);
+
+      const agentList: RegistryAgent[] = [];
+      if (agentsRes.status === "fulfilled" && agentsRes.value.ok) {
+        const data = await agentsRes.value.json();
+        for (const a of data.agents ?? []) {
+          agentList.push({
+            kind: "agent",
+            name: a.name,
+            status: a.status,
+            capabilities: a.capabilities ?? [],
+            registered_at: a.registered_at,
+          });
+        }
+      }
+
+      const skillList: RegistrySkill[] = [];
+      if (skillsRes.status === "fulfilled" && skillsRes.value.ok) {
+        const data = await skillsRes.value.json();
+        for (const s of data.skills ?? []) {
+          skillList.push({
+            kind: "skill",
+            name: s.name,
+            tier: s.tier,
+            description: s.description,
+          });
+        }
+      }
+
+      setAgents(agentList);
+      setSkills(skillList);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load registry");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+
+  const allItems: RegistryItem[] = [
+    ...(filter === "skills" ? [] : agents),
+    ...(filter === "agents" ? [] : skills),
+  ];
+
+  const filtered = search.trim()
+    ? allItems.filter((item) =>
+        item.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : allItems;
+
+  const agentCount = agents.length;
+  const skillCount = skills.length;
+
+  return (
+    <>
+      <PageSection hasBodyWrapper={false}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <div>
+            <Title headingLevel="h1" size="2xl">Registry</Title>
+            <Content component="p" style={{ marginTop: 4, color: "var(--pf-t--global--text--color--subtle)" }}>
+              All agents and skills registered on the platform
+            </Content>
+          </div>
+          <div style={{ display: "flex", gap: 8 }}>
+            <Label isCompact color="blue">{agentCount} agent{agentCount !== 1 ? "s" : ""}</Label>
+            <Label isCompact color="purple">{skillCount} skill{skillCount !== 1 ? "s" : ""}</Label>
+          </div>
+        </div>
+      </PageSection>
+      <Divider />
+      <PageSection hasBodyWrapper={false}>
+        {error && (
+          <Alert variant="warning" title="Could not load registry" isInline style={{ marginBottom: 16 }}>
+            {error}
+          </Alert>
+        )}
+
+        {/* Filters */}
+        <div style={{ display: "flex", gap: 16, marginBottom: 20, alignItems: "center" }}>
+          <SearchInput
+            placeholder="Search..."
+            value={search}
+            onChange={(_e, val) => setSearch(val)}
+            onClear={() => setSearch("")}
+            style={{ maxWidth: 280 }}
+          />
+          <ToggleGroup aria-label="Type filter">
+            {([
+              { value: "all", label: `All (${agentCount + skillCount})` },
+              { value: "agents", label: `Agents (${agentCount})` },
+              { value: "skills", label: `Skills (${skillCount})` },
+            ] as const).map((opt) => (
+              <ToggleGroupItem
+                key={opt.value}
+                text={opt.label}
+                buttonId={`reg-${opt.value}`}
+                isSelected={filter === opt.value}
+                onChange={() => setFilter(opt.value)}
+              />
+            ))}
+          </ToggleGroup>
+        </div>
+
+        {loading ? (
+          <div style={{ textAlign: "center", padding: 60 }}>
+            <Spinner size="xl" />
+          </div>
+        ) : filtered.length === 0 ? (
+          <div style={{
+            textAlign: "center",
+            padding: "60px 40px",
+            color: "var(--arcana-text-secondary)",
+          }}>
+            {search.trim()
+              ? `No results for "${search}"`
+              : "Nothing registered yet. Deploy an agent or add a skill to get started."}
+          </div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            {filtered.map((item) => {
+              if (item.kind === "agent") {
+                const dot = STATUS_DOT[item.status] ?? STATUS_DOT.offline;
+                const skills = item.capabilities.filter((c) => !c.startsWith("model:"));
+                const model = item.capabilities.find((c) => c.startsWith("model:"))?.replace("model:", "");
+                return (
+                  <div
+                    key={`agent-${item.name}`}
+                    onClick={() => navigate(`/agents/${item.name}`)}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 14,
+                      padding: "14px 18px",
+                      background: "var(--arcana-card-bg)",
+                      borderRadius: 10,
+                      border: "1px solid var(--arcana-card-border)",
+                      cursor: "pointer",
+                      transition: "background 0.15s",
+                    }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)"; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)"; }}
+                  >
+                    <RobotIcon style={{ color: "#5b8def", fontSize: 16, flexShrink: 0 }} />
+                    <span style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: dot.color,
+                      flexShrink: 0,
+                    }} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--arcana-text)" }}>
+                        {item.name}
+                      </div>
+                      <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                        Agent &middot; {model ?? "—"} &middot; {dot.label}
+                      </div>
+                    </div>
+                    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+                      {skills.slice(0, 3).map((s) => (
+                        <Label key={s} isCompact color="grey">{s}</Label>
+                      ))}
+                      {skills.length > 3 && <Label isCompact color="grey">+{skills.length - 3}</Label>}
+                    </div>
+                  </div>
+                );
+              }
+
+              return (
+                <div
+                  key={`skill-${item.name}`}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 14,
+                    padding: "14px 18px",
+                    background: "var(--arcana-card-bg)",
+                    borderRadius: 10,
+                    border: "1px solid var(--arcana-card-border)",
+                    transition: "background 0.15s",
+                  }}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-hover-bg)"; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "var(--arcana-card-bg)"; }}
+                >
+                  <CubesIcon style={{ color: "#a855f7", fontSize: 16, flexShrink: 0 }} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 14, fontWeight: 600, color: "var(--arcana-text)" }}>
+                      {item.name}
+                    </div>
+                    <div style={{ fontSize: 12, color: "var(--arcana-text-muted)" }}>
+                      Skill{item.tier ? ` · ${item.tier}` : ""}
+                      {item.description ? ` · ${item.description}` : ""}
+                    </div>
+                  </div>
+                  {item.tier && <Label isCompact color="purple">{item.tier}</Label>}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </PageSection>
+    </>
+  );
+};
diff --git a/services/studio/src/pages/SettingsPage.tsx b/services/studio/src/pages/SettingsPage.tsx
index 919cdd1..de4c907 100644
--- a/services/studio/src/pages/SettingsPage.tsx
+++ b/services/studio/src/pages/SettingsPage.tsx
@@ -107,6 +107,15 @@ interface EnterpriseConfig {
   api_key_count: number;
   tenant_count: number;
   roles: string[];
+  sso_enabled?: boolean;
+  oidc_issuer?: string;
+  oidc_client_id?: string;
+  oidc_client_secret?: string;
+  oidc_redirect_uri?: string;
+  oidc_scopes?: string;
+  saml_entity_id?: string;
+  saml_sso_url?: string;
+  saml_certificate?: string;
 }
 
 const PlatformTab = () => (
@@ -172,6 +181,186 @@ const PlatformTab = () => (
   </Grid>
 );
 
+const SSOConfigTab = () => {
+  const [authMode, setAuthMode] = useState("open");
+  const [oidcIssuer, setOidcIssuer] = useState("");
+  const [oidcClientId, setOidcClientId] = useState("");
+  const [oidcClientSecret, setOidcClientSecret] = useState("");
+  const [oidcRedirectUri, setOidcRedirectUri] = useState("");
+  const [oidcScopes, setOidcScopes] = useState("openid profile email");
+  const [samlEntityId, setSamlEntityId] = useState("");
+  const [samlSsoUrl, setSamlSsoUrl] = useState("");
+  const [samlCertificate, setSamlCertificate] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saveResult, setSaveResult] = useState<{ type: "success" | "danger"; text: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/v1/enterprise/config")
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        if (data) {
+          setAuthMode(data.auth_mode ?? "open");
+          setOidcIssuer(data.oidc_issuer ?? "");
+          setOidcClientId(data.oidc_client_id ?? "");
+          setOidcClientSecret(data.oidc_client_secret ?? "");
+          setOidcRedirectUri(data.oidc_redirect_uri ?? "");
+          setOidcScopes(data.oidc_scopes ?? "openid profile email");
+          setSamlEntityId(data.saml_entity_id ?? "");
+          setSamlSsoUrl(data.saml_sso_url ?? "");
+          setSamlCertificate(data.saml_certificate ?? "");
+        }
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaveResult(null);
+    try {
+      const body: Record<string, unknown> = { auth_mode: authMode };
+      if (authMode === "oidc") {
+        body.oidc_issuer = oidcIssuer;
+        body.oidc_client_id = oidcClientId;
+        body.oidc_client_secret = oidcClientSecret;
+        body.oidc_redirect_uri = oidcRedirectUri;
+        body.oidc_scopes = oidcScopes;
+      } else if (authMode === "saml") {
+        body.saml_entity_id = samlEntityId;
+        body.saml_sso_url = samlSsoUrl;
+        body.saml_certificate = samlCertificate;
+      }
+      const res = await fetch("/api/v1/enterprise/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error((data as Record<string, string>).error ?? `HTTP ${res.status}`);
+      }
+      setSaveResult({ type: "success", text: "SSO configuration saved. Changes take effect on next restart." });
+    } catch (e) {
+      setSaveResult({ type: "danger", text: e instanceof Error ? e.message : "Save failed" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Spinner size="lg" />;
+
+  return (
+    <Card>
+      <CardTitle>Single Sign-On (SSO)</CardTitle>
+      <CardBody>
+        {saveResult && (
+          <Alert variant={saveResult.type} isInline title={saveResult.text} style={{ marginBottom: 16 }} />
+        )}
+        <Form>
+          <FormGroup label="Authentication Mode" fieldId="auth-mode">
+            <FormSelect
+              id="auth-mode"
+              value={authMode}
+              onChange={(_e, v) => setAuthMode(v)}
+              style={{ maxWidth: 300 }}
+            >
+              <FormSelectOption value="open" label="Open (no authentication)" />
+              <FormSelectOption value="api_key" label="API Key only" />
+              <FormSelectOption value="oidc" label="OIDC (OpenID Connect)" />
+              <FormSelectOption value="saml" label="SAML 2.0" />
+            </FormSelect>
+          </FormGroup>
+
+          {authMode === "oidc" && (
+            <>
+              <Divider style={{ margin: "16px 0" }} />
+              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>OIDC Configuration</div>
+              <FormGroup label="Issuer URL" isRequired fieldId="oidc-issuer">
+                <TextInput
+                  id="oidc-issuer"
+                  value={oidcIssuer}
+                  onChange={(_e, v) => setOidcIssuer(v)}
+                  placeholder="https://accounts.google.com"
+                />
+              </FormGroup>
+              <FormGroup label="Client ID" isRequired fieldId="oidc-client-id">
+                <TextInput
+                  id="oidc-client-id"
+                  value={oidcClientId}
+                  onChange={(_e, v) => setOidcClientId(v)}
+                  placeholder="your-client-id.apps.googleusercontent.com"
+                />
+              </FormGroup>
+              <FormGroup label="Client Secret" isRequired fieldId="oidc-client-secret">
+                <TextInput
+                  id="oidc-client-secret"
+                  type="password"
+                  value={oidcClientSecret}
+                  onChange={(_e, v) => setOidcClientSecret(v)}
+                  placeholder="your-client-secret"
+                />
+              </FormGroup>
+              <FormGroup label="Redirect URI" fieldId="oidc-redirect">
+                <TextInput
+                  id="oidc-redirect"
+                  value={oidcRedirectUri}
+                  onChange={(_e, v) => setOidcRedirectUri(v)}
+                  placeholder="https://arcana.example.com/auth/callback"
+                />
+              </FormGroup>
+              <FormGroup label="Scopes" fieldId="oidc-scopes">
+                <TextInput
+                  id="oidc-scopes"
+                  value={oidcScopes}
+                  onChange={(_e, v) => setOidcScopes(v)}
+                  placeholder="openid profile email"
+                />
+              </FormGroup>
+            </>
+          )}
+
+          {authMode === "saml" && (
+            <>
+              <Divider style={{ margin: "16px 0" }} />
+              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>SAML Configuration</div>
+              <FormGroup label="Entity ID" isRequired fieldId="saml-entity-id">
+                <TextInput
+                  id="saml-entity-id"
+                  value={samlEntityId}
+                  onChange={(_e, v) => setSamlEntityId(v)}
+                  placeholder="https://arcana.example.com"
+                />
+              </FormGroup>
+              <FormGroup label="SSO URL" isRequired fieldId="saml-sso-url">
+                <TextInput
+                  id="saml-sso-url"
+                  value={samlSsoUrl}
+                  onChange={(_e, v) => setSamlSsoUrl(v)}
+                  placeholder="https://idp.example.com/saml/sso"
+                />
+              </FormGroup>
+              <FormGroup label="IdP Certificate (PEM)" isRequired fieldId="saml-cert">
+                <TextInput
+                  id="saml-cert"
+                  value={samlCertificate}
+                  onChange={(_e, v) => setSamlCertificate(v)}
+                  placeholder="Paste PEM certificate or upload"
+                />
+              </FormGroup>
+            </>
+          )}
+
+          <div style={{ marginTop: 20 }}>
+            <Button variant="primary" onClick={handleSave} isLoading={saving} isDisabled={saving}>
+              Save Configuration
+            </Button>
+          </div>
+        </Form>
+      </CardBody>
+    </Card>
+  );
+};
+
 const SecurityTab = () => {
   const [config, setConfig] = useState<EnterpriseConfig | null>(null);
   const [keys, setKeys] = useState<APIKeyData[]>([]);
@@ -179,13 +368,13 @@ const SecurityTab = () => {
 
   const fetchData = useCallback(async () => {
     try {
-      const [configRes, keysRes] = await Promise.all([
+      const [configRes, keysRes] = await Promise.allSettled([
         fetch("/api/v1/enterprise/config"),
         fetch("/api/v1/auth/keys"),
       ]);
-      if (configRes.ok) setConfig(await configRes.json());
-      if (keysRes.ok) {
-        const kd = await keysRes.json();
+      if (configRes.status === "fulfilled" && configRes.value.ok) setConfig(await configRes.value.json());
+      if (keysRes.status === "fulfilled" && keysRes.value.ok) {
+        const kd = await keysRes.value.json();
         setKeys(kd.keys ?? []);
       }
     } finally {
@@ -319,12 +508,12 @@ const AuditTab = () => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    Promise.all([
-      fetch("/api/v1/enterprise/audit").then(r => r.json()),
-      fetch("/api/v1/enterprise/audit/stats").then(r => r.json()),
-    ]).then(([auditData, statsData]) => {
-      setEntries(auditData.entries ?? []);
-      setStats(statsData);
+    Promise.allSettled([
+      fetch("/api/v1/enterprise/audit").then(r => r.ok ? r.json() : null),
+      fetch("/api/v1/enterprise/audit/stats").then(r => r.ok ? r.json() : null),
+    ]).then(([auditRes, statsRes]) => {
+      if (auditRes.status === "fulfilled" && auditRes.value) setEntries(auditRes.value.entries ?? []);
+      if (statsRes.status === "fulfilled" && statsRes.value) setStats(statsRes.value);
     }).finally(() => setLoading(false));
   }, []);
 
@@ -758,19 +947,22 @@ export const SettingsPage = () => {
           <Tab eventKey={0} title={<TabTitleText>Platform</TabTitleText>}>
             <div style={{ marginTop: 16 }}><PlatformTab /></div>
           </Tab>
-          <Tab eventKey={1} title={<TabTitleText>RBAC</TabTitleText>}>
+          <Tab eventKey={1} title={<TabTitleText>SSO</TabTitleText>}>
+            <div style={{ marginTop: 16 }}><SSOConfigTab /></div>
+          </Tab>
+          <Tab eventKey={2} title={<TabTitleText>RBAC</TabTitleText>}>
             <div style={{ marginTop: 16 }}><RBACTab /></div>
           </Tab>
-          <Tab eventKey={2} title={<TabTitleText>Security & Auth</TabTitleText>}>
+          <Tab eventKey={3} title={<TabTitleText>API Keys</TabTitleText>}>
             <div style={{ marginTop: 16 }}><SecurityTab /></div>
           </Tab>
-          <Tab eventKey={3} title={<TabTitleText>Tenants</TabTitleText>}>
+          <Tab eventKey={4} title={<TabTitleText>Tenants</TabTitleText>}>
             <div style={{ marginTop: 16 }}><TenantsTab /></div>
           </Tab>
-          <Tab eventKey={4} title={<TabTitleText>Audit Log</TabTitleText>}>
+          <Tab eventKey={5} title={<TabTitleText>Audit Log</TabTitleText>}>
             <div style={{ marginTop: 16 }}><AuditTab /></div>
           </Tab>
-          <Tab eventKey={5} title={<TabTitleText>Compliance</TabTitleText>}>
+          <Tab eventKey={6} title={<TabTitleText>Compliance</TabTitleText>}>
             <div style={{ marginTop: 16 }}><ComplianceTab /></div>
           </Tab>
         </Tabs>
diff --git a/services/studio/src/pages/platformCommands.ts b/services/studio/src/pages/platformCommands.ts
index 515d940..fe6405e 100644
--- a/services/studio/src/pages/platformCommands.ts
+++ b/services/studio/src/pages/platformCommands.ts
@@ -155,7 +155,7 @@ export async function executePlatformCommand(
 
     case "show_costs": {
       try {
-        const res = await fetch("/api/v1/finops/summary", { headers });
+        const res = await fetch("/api/v1/costs", { headers });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const data = await res.json();
         const total = data.total_cost ?? data.totalCost ?? "N/A";
diff --git a/services/studio/src/styles.css b/services/studio/src/styles.css
index 7d19318..a41a538 100644
--- a/services/studio/src/styles.css
+++ b/services/studio/src/styles.css
@@ -60,16 +60,7 @@
   letter-spacing: -0.3px;
 }
 
-.arcana-logo-badge {
-  font-size: 10px;
-  font-weight: 600;
-  color: rgba(255,255,255,0.85);
-  background: rgba(255,255,255,0.15);
-  padding: 2px 8px;
-  border-radius: 10px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
+/* Logo badge removed — clean wordmark only */
 
 .arcana-env-badge {
   background: rgba(255,255,255,0.15) !important;
@@ -289,6 +280,49 @@
   margin: 2px 8px !important;
 }
 
+.arcana-sidebar-footer {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 8px 8px;
+  margin-top: auto;
+}
+
+.arcana-settings-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--arcana-text-secondary, #8b95a5);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  text-align: left;
+}
+
+.arcana-settings-btn:hover {
+  background: rgba(255,255,255,0.06);
+  color: var(--arcana-text, #e2e8f0);
+}
+
+.arcana-settings-btn.active {
+  background: rgba(91,141,239,0.1);
+  color: #5b8def;
+}
+
+.arcana-nav-group-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: #4a5568;
+  padding: 16px 20px 6px;
+  user-select: none;
+}
+
 /* Section titles */
 .section-title {
   font-size: 14px;
@@ -408,6 +442,31 @@
   border-radius: 16px;
 }
 
+/* Typing dots */
+.arcana-typing-dots {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 20px;
+}
+
+.arcana-typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--arcana-text-muted);
+  animation: arcana-dot-bounce 1.4s infinite ease-in-out both;
+}
+
+.arcana-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.arcana-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+.arcana-typing-dots span:nth-child(3) { animation-delay: 0s; }
+
+@keyframes arcana-dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
 @keyframes chat-slide-up {
   from {
     opacity: 0;