Spaces:

Cukinator
/

meridian-amd

Running

App Files Files Community

Cukinator commited on 18 days ago

Commit

bc1328f

1 Parent(s): db163ae

Deploy Frontend2 to Space

Browse files

Files changed (30) hide show

Meridian.html +236 -0
ai-engine.jsx +366 -0
api-client.jsx +63 -0
backend/data/inbox.json +10 -0
backend/data/issues.json +20 -0
backend/data/people.json +11 -0
backend/data/projects.json +7 -0
backend/data/prs.json +9 -0
data.jsx +208 -0
detail-modals.jsx +557 -0
icons.jsx +63 -0
index.html +0 -0
interactions.jsx +293 -0
landing.css +897 -0
landing.html +1147 -0
mock-api.jsx +147 -0
shell.jsx +374 -0
staticwebapp.config.json +14 -0
styles.css +437 -0
vanguard.css +387 -0
views-ai-marketplace.jsx +686 -0
views-chat.jsx +294 -0
views-code.jsx +22 -0
views-compute.jsx +495 -0
views-detail.jsx +551 -0
views-main.jsx +547 -0
views-more.jsx +496 -0
views-nexus.jsx +585 -0
views-settings.jsx +543 -0
vscode.html +1263 -0

Meridian.html ADDED Viewed

	@@ -0,0 +1,236 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Meridian — Project Manager</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="vanguard.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script type="text/babel" src="icons.jsx"></script>
+  <script type="text/babel" src="data.jsx"></script>
+  <script src="mock-api.jsx"></script>
+  <script type="text/babel" src="api-client.jsx"></script>
+  <script type="text/babel" src="ai-engine.jsx"></script>
+  <script type="text/babel" src="interactions.jsx"></script>
+  <script type="text/babel" src="detail-modals.jsx"></script>
+  <script type="text/babel" src="shell.jsx"></script>
+  <script type="text/babel" src="views-main.jsx"></script>
+  <script type="text/babel" src="views-detail.jsx"></script>
+  <script type="text/babel" src="views-more.jsx"></script>
+  <script type="text/babel" src="views-settings.jsx"></script>
+  <script type="text/babel" src="views-chat.jsx"></script>
+  <script type="text/babel" src="views-code.jsx"></script>
+  <script type="text/babel" src="views-compute.jsx"></script>
+  <script type="text/babel" src="views-ai-marketplace.jsx"></script>
+  <script type="text/babel" src="views-nexus.jsx"></script>
+  <script type="text/babel">
+    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+      "accent": "rose",
+      "theme": "dark",
+      "density": "relaxed",
+      "sidebar": "expanded",
+      "cardStyle": "detailed"
+    }/*EDITMODE-END*/;
+    const ACCENT_MAP = {
+      lime:   { c: "oklch(0.85 0.17 145)", dim: "oklch(0.40 0.10 145)", soft: "oklch(0.30 0.06 145)", fg: "oklch(0.20 0.05 145)" },
+      cyan:   { c: "oklch(0.78 0.13 220)", dim: "oklch(0.40 0.09 220)", soft: "oklch(0.30 0.06 220)", fg: "oklch(0.18 0.04 220)" },
+      violet: { c: "oklch(0.72 0.18 300)", dim: "oklch(0.40 0.10 300)", soft: "oklch(0.30 0.07 300)", fg: "oklch(0.98 0.03 300)" },
+      amber:  { c: "oklch(0.80 0.14 75)",  dim: "oklch(0.44 0.09 75)",  soft: "oklch(0.30 0.06 75)",  fg: "oklch(0.20 0.04 75)" },
+      rose:   { c: "oklch(0.72 0.17 20)",  dim: "oklch(0.40 0.10 20)",  soft: "oklch(0.30 0.07 20)",  fg: "oklch(0.98 0.03 20)" },
+    };
+    function App() {
+      const [settings, setSettings] = React.useState(() => {
+        try {
+          const saved = JSON.parse(localStorage.getItem("meridian-settings"));
+          return { ...TWEAK_DEFAULTS, ...(saved || {}) };
+        } catch { return TWEAK_DEFAULTS; }
+      });
+      const [view, setView] = React.useState(() => localStorage.getItem("meridian-view") || "home");
+      const [issueId, setIssueId] = React.useState("AUR-412");
+      const [paletteOpen, setPaletteOpen] = React.useState(false);
+      const [inboxOpen, setInboxOpen] = React.useState(false);
+      const [tweaksOpen, setTweaksOpen] = React.useState(false);
+      // Apply theme + accent to :root
+      React.useEffect(() => {
+        document.documentElement.dataset.theme = settings.theme;
+        document.documentElement.dataset.density = settings.density;
+        const a = ACCENT_MAP[settings.accent] || ACCENT_MAP.lime;
+        document.documentElement.style.setProperty("--accent", a.c);
+        document.documentElement.style.setProperty("--accent-dim", a.dim);
+        document.documentElement.style.setProperty("--accent-soft", a.soft);
+        document.documentElement.style.setProperty("--accent-fg", a.fg);
+        localStorage.setItem("meridian-settings", JSON.stringify(settings));
+      }, [settings]);
+      React.useEffect(() => {
+        localStorage.setItem("meridian-view", view);
+      }, [view]);
+      // Keyboard shortcuts
+      React.useEffect(() => {
+        const onKey = (e) => {
+          const tag = e.target.tagName;
+          const typing = tag === "INPUT" || tag === "TEXTAREA";
+          if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+            e.preventDefault();
+            setPaletteOpen(true);
+          } else if (e.key === "Escape") {
+            setPaletteOpen(false);
+            setInboxOpen(false);
+          } else if (!typing && !e.metaKey && !e.ctrlKey) {
+            if (e.key === "g") {
+              window.__g = true;
+              setTimeout(() => { window.__g = false; }, 900);
+            } else if (window.__g) {
+              const map = { h: "home", i: "inbox", s: "issues", d: "docs", r: "roadmap", p: "prs", t: "team" };
+              if (map[e.key]) { setView(map[e.key]); window.__g = false; }
+            } else if (e.key === "c") {
+              e.preventDefault();
+              window.openNewIssue();
+            } else if (e.key === "?") {
+              window.toast("Shortcuts: ⌘K · C new issue · G+letter to jump");
+            }
+          }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+      }, []);
+      // Edit-mode integration (Tweaks toolbar)
+      React.useEffect(() => {
+        const onMsg = (e) => {
+          if (!e.data || typeof e.data !== "object") return;
+          if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
+          if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
+          if (e.data.type === "meridian:vscode-commit") {
+            const { fileName, commitMessage, branch, additions } = e.data;
+            const issueId = `AUR-${Math.floor(700 + Math.random() * 100)}`;
+            const prId = `#${Math.floor(2000 + Math.random() * 1000)}`;
+            // 1. Add PR
+            PRS.unshift({
+              id: prId, title: `feat: add ${fileName} via AI codegen`, status: "open",
+              author: "you", branch: branch || "feat/ai-generated", base: "main", issue: issueId,
+              project: "Aurora", additions: additions || 0, deletions: 0,
+              checks: { passed: 0, failed: 0, running: 1 }, reviewers: [], updated: "just now",
+            });
+            // 2. Add Issue
+            ISSUES.unshift({
+              id: issueId, title: `Implement ${fileName}`, status: "progress", priority: "high",
+              project: "aurora", assignees: ["u1"], labels: ["feature"], due: "Today",
+              created: "just now", estimate: 3, commentCount: 0, sprint: "Iter 42", branch: branch || "feat/ai-generated"
+            });
+            // 3. Add to Docs
+            DOCS[0].children.push({
+               id: `d${Date.now()}`, title: `RFC — ${fileName} architecture`, updated: "just now", author: "you"
+            });
+            // 4. Add to Roadmap
+            ROADMAP.unshift({
+              id: `r${Date.now()}`, title: `Launch ${fileName} capabilities`, project: "aurora",
+              q: "Q2", startCol: 0, span: 2, progress: 10, status: "progress"
+            });
+            // 5. Update Sprint
+            const activeSprint = SPRINTS.find(s => s.active);
+            if (activeSprint) {
+              activeSprint.scope += 1;
+            }
+            // 6. Add Inbox Notification
+            INBOX.unshift({
+              id: `inbox-${Date.now()}`, type: "pr", unread: true,
+              title: `Your PR is open: feat: add ${fileName} via AI codegen`,
+              body: commitMessage || "AI-generated code committed and pushed.",
+              time: "just now", actor: "you", target: prId, kind: "pr"
+            });
+            window.toast(`PR ${prId} created and linked to ${issueId}. Docs and Roadmap updated.`);
+            window.meridianRefresh && window.meridianRefresh();
+          }
+        };
+        window.addEventListener("message", onMsg);
+        window.parent.postMessage({ type: "__edit_mode_available" }, "*");
+        return () => window.removeEventListener("message", onMsg);
+      }, []);
+      // Persist settings to host
+      const setSettingsPersist = React.useCallback((updater) => {
+        setSettings(prev => {
+          const next = typeof updater === "function" ? updater(prev) : updater;
+          window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
+          return next;
+        });
+      }, []);
+      const renderView = () => {
+        switch (view) {
+          case "home":    return <HomeView setView={setView} setIssueId={setIssueId} cardStyle={settings.cardStyle} />;
+          case "inbox":   return <InboxView />;
+          case "issues":  return <IssuesView setView={setView} setIssueId={setIssueId} cardStyle={settings.cardStyle} />;
+          case "issue":   return <IssueDetail issueId={issueId} setView={setView} />;
+          case "sprints": return <SprintsView setView={setView} setIssueId={setIssueId} />;
+          case "roadmap": return <RoadmapView />;
+          case "docs":    return <DocsView />;
+          case "prs":     return <PRsView />;
+          case "team":    return <TeamView />;
+          case "settings": return <SettingsView settings={settings} setSettings={setSettingsPersist} />;
+          case "chat":    return <ChatView />;
+          case "code":    return <CodeEditorView />;
+          case "compute":  return <ComputeView />;
+          case "aimarket": return <AIMarketplaceView />;
+          case "nexus":    return <NexusView />;
+          default:        return <HomeView setView={setView} setIssueId={setIssueId} />;
+        }
+      };
+      return (
+        <div className="app" data-sidebar={settings.sidebar} data-screen-label={view}>
+          <Sidebar view={view} setView={setView} collapsed={settings.sidebar === "collapsed"} />
+          <Topbar
+            view={view}
+            theme={settings.theme}
+            setTheme={(t) => setSettingsPersist(s => ({ ...s, theme: t }))}
+            onToggleSidebar={() => setSettingsPersist(s => ({ ...s, sidebar: s.sidebar === "collapsed" ? "expanded" : "collapsed" }))}
+            onOpenPalette={() => setPaletteOpen(true)}
+            onOpenInbox={() => setInboxOpen(o => !o)}
+            onOpenTweaks={() => setTweaksOpen(o => !o)}
+          />
+          <main className="main">{renderView()}</main>
+          <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} setView={setView} />
+          <InboxPanel open={inboxOpen} onClose={() => setInboxOpen(false)} />
+          <TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} settings={settings} setSettings={setSettingsPersist} />
+          <HintBar onOpenPalette={() => setPaletteOpen(true)} />
+          <ModalHost />
+          <Toaster />
+        </div>
+      );
+    }
+    ReactDOM.createRoot(document.getElementById("root")).render(
+      <AIPanelProvider>
+        <App />
+      </AIPanelProvider>
+    );
+  </script>
+</body>
+</html>

ai-engine.jsx ADDED Viewed

	@@ -0,0 +1,366 @@

+// ── Meridian AI Engine ─────────────────────────────────────────────────────
+// Single shared AI backed by an AMD vLLM Endpoint
+// Each view passes a `role` so the system prompt is context-aware.
+//
+// La URL del endpoint se configura en Settings → AI & Integrations
+// y se persiste en localStorage bajo la clave 'meridian-amd-endpoint'.
+const AMD_MODEL = "llama-3.3-70b-versatile";
+const LS_AMD_ENDPOINT = 'meridian-amd-endpoint';
+const getAmdUrl = () => (localStorage.getItem(LS_AMD_ENDPOINT) || '').trim();
+const setAmdUrl = (url) => localStorage.setItem(LS_AMD_ENDPOINT, url.trim());
+// Exponer globalmente para que todos los views puedan acceder
+window.getAmdUrl = getAmdUrl;
+window.setAmdUrl = setAmdUrl;
+// ── System prompts per role ────────────────────────────────────────────────
+const ROLE_PROMPTS = {
+  general: `You are VaultMind AI, the intelligent assistant embedded in Meridian — a modern project management platform for engineering teams. You have awareness of the team's issues, PRs, sprints, roadmap, docs, and compute jobs. Be concise, insightful, and proactive. Respond in plain text or markdown.`,
+  code: `You are the Meridian Code Agent embedded in the Code Editor. Your job is to help users create, edit, and run web files (HTML, CSS, JavaScript). When asked to create a file, output only clean, complete, functional code. Always suggest running the file after creating it. Mention the run command in terminal syntax (e.g. "open index.html" for HTML, "node app.js" for JS). Keep explanations short — the user wants working code fast.`,
+  pr: `You are the Meridian PR Analyst. You analyze pull requests for engineering teams. When given PR data, evaluate:
+- Merge readiness (checks, reviewers, conflicts)
+- Risk level (High / Medium / Low) based on size, scope, and affected areas
+- Suggested reviewers or missing context
+- Potential issues: missing tests, breaking changes, security concerns
+- Concrete action items for the author
+Format your response with clear sections. Be direct — teams are busy.`,
+  sprint: `You are the Meridian Sprint Coach. You analyze sprint health for engineering teams. When given sprint data (issues, burndown, velocity), provide:
+- Sprint health score and trend
+- At-risk items that may not complete
+- Blocking issues and suggested unblocking actions
+- Retrospective themes and talking points
+- Velocity comparison with previous sprints
+Be concise and actionable. Teams read this during standups.`,
+  issues: `You are the Meridian Issue Triage Assistant. You help engineering teams manage their backlog. When given a list of issues, identify:
+- Duplicates or related issues that should be linked
+- Priority mismatches (high priority with no assignee, etc.)
+- Issues blocking other issues
+- Stale issues that need attention
+- Recommended sprint candidates
+Output a structured triage report.`,
+  roadmap: `You are the Meridian Roadmap Analyst. You analyze quarterly roadmaps for engineering teams. When given roadmap items and their progress, provide:
+- Delivery confidence per milestone (%)
+- Items at risk of slipping to next quarter
+- Dependency bottlenecks
+- Suggested reprioritization
+- Executive summary paragraph
+Be direct. Skip the caveats.`,
+  team: `You are the Meridian Team Intelligence assistant. You analyze team workload and capacity. When given team data, provide:
+- Overloaded team members (load > 80%)
+- Under-allocated capacity available for new work
+- Suggested task reassignments for balance
+- Who to pull in for specific tasks based on skills/current load
+- Team health observations
+Keep it practical and respectful.`,
+  docs: `You are the Meridian Docs Writer. You help engineering teams write, summarize, and improve technical documentation. You can:
+- Summarize long documents into bullet points
+- Expand brief notes into full docs
+- Improve clarity and structure of existing content
+- Generate ADRs (Architecture Decision Records) from descriptions
+- Write meeting notes, retrospectives, and engineering specs
+Match the tone of the existing content.`,
+  compute: `You are the Meridian Compute Analyst. You analyze GPU compute jobs and infrastructure usage. When given job and quota data, provide:
+- Current spend efficiency analysis
+- Jobs that can be optimized (region, GPU tier, duration)
+- Spot instance opportunities for cost savings
+- Queue wait time predictions
+- Recommendations for GPU selection based on workload type
+Output cost estimates where possible.`,
+};
+// ── Core call function ─────────────────────────────────────────────────────
+async function amdChat({ role = "general", messages, contextData = null, onChunk = null }) {
+  const url = getAmdUrl();
+  if (!url) throw new Error("AMD_URL_NOT_SET");
+  const systemPrompt = ROLE_PROMPTS[role] || ROLE_PROMPTS.general;
+  const contextBlock = contextData
+    ? `\n\n--- LIVE WORKSPACE DATA ---\n${JSON.stringify(contextData, null, 2)}\n--- END DATA ---`
+    : "";
+  const body = {
+    model: AMD_MODEL,
+    max_tokens: 1024,
+    stream: !!onChunk,
+    messages: [
+      { role: "system", content: systemPrompt + contextBlock },
+      ...messages,
+    ],
+  };
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer dummy-key`,
+    },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error?.message || `AMD API HTTP ${res.status}`);
+  }
+  // Streaming
+  if (onChunk) {
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let fullText = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      const chunk = decoder.decode(value);
+      const lines = chunk.split("\n").filter(l => l.startsWith("data: ") && l !== "data: [DONE]");
+      for (const line of lines) {
+        try {
+          const data = JSON.parse(line.slice(6));
+          const delta = data.choices?.[0]?.delta?.content || "";
+          if (delta) { fullText += delta; onChunk(delta, fullText); }
+        } catch (_) { }
+      }
+    }
+    return fullText;
+  }
+  // Non-streaming
+  const data = await res.json();
+  return data.choices?.[0]?.message?.content || "";
+}
+// ── Floating AI Panel ──────────────────────────────────────────────────────
+const AIPanelContext = React.createContext(null);
+const AIPanelProvider = ({ children }) => {
+  const [open, setOpen] = React.useState(false);
+  const [role, setRole] = React.useState("general");
+  const [ctxData, setCtxData] = React.useState(null);
+  const [messages, setMessages] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [streamText, setStreamText] = React.useState("");
+  const scrollRef = React.useRef(null);
+  const openAI = React.useCallback((initialPrompt, aiRole = "general", data = null) => {
+    setRole(aiRole);
+    setCtxData(data);
+    setOpen(true);
+    if (initialPrompt) {
+      // fire off immediately
+      setTimeout(() => sendAI(initialPrompt, aiRole, data, []), 80);
+    }
+  }, []);
+  React.useEffect(() => {
+    window.openAI = openAI;
+  }, [openAI]);
+  React.useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, streamText]);
+  const sendAI = async (text, overrideRole, overrideData, prevMessages) => {
+    const r = overrideRole ?? role;
+    const ctx = overrideData ?? ctxData;
+    const hist = prevMessages ?? messages;
+    if (!text.trim() || loading) return;
+    setLoading(true);
+    setStreamText("");
+    const userMsg = { role: "user", content: text };
+    const newHist = [...hist, userMsg];
+    setMessages(newHist);
+    try {
+      let accumulated = "";
+      await amdChat({
+        role: r,
+        messages: newHist,
+        contextData: ctx,
+        onChunk: (delta, full) => {
+          accumulated = full;
+          setStreamText(full);
+        },
+      });
+      setMessages(m => [...m, { role: "assistant", content: accumulated }]);
+      setStreamText("");
+    } catch (e) {
+      const msg = `⚠ API Error: ${e?.message || String(e)}`;
+      setMessages(m => [...m, { role: "assistant", content: msg }]);
+      setStreamText("");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSend = (e) => {
+    e.preventDefault();
+    const el = document.getElementById("ai-panel-input");
+    if (!el) return;
+    const text = el.value.trim();
+    if (!text) return;
+    el.value = "";
+    sendAI(text);
+  };
+  const ROLE_LABELS = {
+    general: "VaultMind AI", code: "Code Agent", pr: "PR Analyst",
+    sprint: "Sprint Coach", issues: "Issue Triage", roadmap: "Roadmap Analyst",
+    team: "Team Intel", docs: "Docs Writer", compute: "Compute Analyst",
+  };
+  const renderMd = (text) => {
+    if (!text) return "";
+    // Simple markdown: bold, code, line breaks
+    return text
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+      .replace(/`([^`]+)`/g, "<code style='background:var(--bg-3);padding:1px 4px;border-radius:3px;font-family:var(--font-mono);font-size:0.9em'>$1</code>")
+      .replace(/\n/g, "<br>");
+  };
+  if (!open) return (
+    <AIPanelContext.Provider value={{ openAI }}>
+      {children}
+    </AIPanelContext.Provider>
+  );
+  return (
+    <AIPanelContext.Provider value={{ openAI }}>
+      {children}
+      {/* Backdrop */}
+      <div onClick={() => setOpen(false)} style={{
+        position: "fixed", inset: 0, zIndex: 299,
+        background: "oklch(0 0 0 / 0.3)", backdropFilter: "blur(2px)",
+      }} />
+      {/* Panel */}
+      <div style={{
+        position: "fixed", top: 0, right: 0, bottom: 0, width: 440, zIndex: 300,
+        background: "var(--bg-0)", borderLeft: "1px solid var(--border)",
+        display: "flex", flexDirection: "column",
+        boxShadow: "-20px 0 60px oklch(0 0 0 / 0.35)",
+        animation: "slideInRight 200ms cubic-bezier(0.2,0.7,0.2,1)",
+      }}>
+        {/* Header */}
+        <div style={{
+          padding: "14px 16px", borderBottom: "1px solid var(--border)",
+          display: "flex", alignItems: "center", gap: 10, flexShrink: 0,
+        }}>
+          <Icon name="sparkle" size={16} style={{ color: "var(--accent)" }} />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{ROLE_LABELS[role] || "AI"}</div>
+            <div style={{ fontSize: 10.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{role} mode</div>
+          </div>
+          <button className="segmented" style={{ gap: 4, background: "transparent", border: "none" }}>
+            {Object.keys(ROLE_LABELS).slice(0, 5).map(r2 => (
+              <button key={r2} className={role === r2 ? "on" : ""} style={{ fontSize: 10, padding: "3px 7px", textTransform: "capitalize" }}
+                onClick={() => setRole(r2)}>{r2}</button>
+            ))}
+          </button>
+          <button className="icon-btn" onClick={() => { setMessages([]); setStreamText(""); }}>
+            <Icon name="plus" size={13} style={{ transform: "rotate(45deg)" }} />
+          </button>
+          <button className="icon-btn" onClick={() => setOpen(false)}>
+            <Icon name="x" size={14} />
+          </button>
+        </div>
+        {/* Messages */}
+        <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: "16px", display: "flex", flexDirection: "column", gap: 14 }}>
+          {messages.length === 0 && !loading && (
+            <div style={{ textAlign: "center", marginTop: 40, color: "var(--fg-3)" }}>
+              <Icon name="sparkle" size={28} style={{ opacity: 0.4, marginBottom: 10, color: "var(--accent)" }} />
+              <div style={{ fontSize: 13, color: "var(--fg-2)", marginBottom: 20 }}>Ask me anything about your {role === "general" ? "workspace" : role}.</div>
+              {[
+                role === "pr" && "Analyze all open PRs",
+                role === "sprint" && "Summarize sprint 42 health",
+                role === "issues" && "Which issues are blocking the sprint?",
+                role === "team" && "Who has capacity for a new task?",
+                role === "code" && "Create a landing page with a hero section",
+                role === "compute" && "How can I reduce my compute costs?",
+                role === "general" && "Give me today's standup brief",
+              ].filter(Boolean).map((s, i) => (
+                <button key={i} onClick={() => { sendAI(s); }}
+                  style={{ display: "block", width: "100%", textAlign: "left", padding: "9px 12px", margin: "4px 0", borderRadius: 8, border: "1px solid var(--border)", background: "var(--bg-1)", cursor: "pointer", fontSize: 12.5, color: "var(--fg-1)", transition: "border-color 0.15s" }}
+                  onMouseEnter={e => e.currentTarget.style.borderColor = "var(--accent-dim)"}
+                  onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border)"}>
+                  {s}
+                </button>
+              ))}
+            </div>
+          )}
+          {messages.map((m, i) => (
+            <div key={i} style={{ display: "flex", gap: 10, flexDirection: m.role === "user" ? "row-reverse" : "row" }}>
+              <div style={{
+                width: 28, height: 28, borderRadius: 14, flexShrink: 0,
+                background: m.role === "user" ? "var(--accent)" : "var(--bg-2)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+              }}>
+                {m.role === "user"
+                  ? <Icon name="team" size={14} style={{ color: "var(--accent-fg)" }} />
+                  : <Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} />}
+              </div>
+              <div style={{
+                maxWidth: "85%", padding: "10px 13px", borderRadius: 10, fontSize: 13, lineHeight: 1.55,
+                background: m.role === "user" ? "var(--accent-dim)" : "var(--bg-1)",
+                border: m.role === "user" ? "none" : "1px solid var(--border)",
+                borderTopRightRadius: m.role === "user" ? 2 : 10,
+                borderTopLeftRadius: m.role === "user" ? 10 : 2,
+                color: "var(--fg-1)",
+              }} dangerouslySetInnerHTML={{ __html: renderMd(m.content) }} />
+            </div>
+          ))}
+          {/* Streaming */}
+          {loading && (
+            <div style={{ display: "flex", gap: 10 }}>
+              <div style={{ width: 28, height: 28, borderRadius: 14, flexShrink: 0, background: "var(--bg-2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} />
+              </div>
+              <div style={{ maxWidth: "85%", padding: "10px 13px", borderRadius: 10, fontSize: 13, lineHeight: 1.55, background: "var(--bg-1)", border: "1px solid var(--border)", borderTopLeftRadius: 2, color: "var(--fg-1)" }}>
+                {streamText
+                  ? <span dangerouslySetInnerHTML={{ __html: renderMd(streamText) }} />
+                  : <span style={{ display: "flex", gap: 4, alignItems: "center" }}>
+                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1s ease-in-out infinite" }} />
+                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1s ease-in-out 0.2s infinite" }} />
+                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1s ease-in-out 0.4s infinite" }} />
+                  </span>}
+              </div>
+            </div>
+          )}
+        </div>
+        {/* Input */}
+        <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border)", flexShrink: 0 }}>
+          <form onSubmit={handleSend} style={{ display: "flex", gap: 8 }}>
+            <input id="ai-panel-input" placeholder={`Ask ${ROLE_LABELS[role] || "AI"}…`}
+              style={{ flex: 1, padding: "10px 12px", borderRadius: 8, border: "1px solid var(--border)", background: "var(--bg-1)", color: "var(--fg-0)", outline: "none", fontSize: 13 }} />
+            <button type="submit" disabled={loading} className="btn primary"
+              style={{ padding: "0 14px", height: 40, opacity: loading ? 0.5 : 1 }}>
+              <Icon name="arrow-up" size={14} />
+            </button>
+          </form>
+        </div>
+      </div>
+      <style>{`@keyframes slideInRight { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }`}</style>
+    </AIPanelContext.Provider>
+  );
+};
+window.amdChat = amdChat;
+window.AIPanelProvider = AIPanelProvider;

api-client.jsx ADDED Viewed

	@@ -0,0 +1,63 @@

+// api-client.jsx — fetch wrapper for CRUD operations
+// Reads from /backend/data/*.json (static files on Azure).
+// Writes fall back to in-memory ISSUES/PRS/DOCS arrays + localStorage delta.
+// mock-api.jsx intercepts /api/* and handles mutations in-memory.
+// Pre-load JSON data from static backend files on first load
+(async function seedFromBackend() {
+  const tryLoad = async (url, globalName) => {
+    try {
+      const r = await window._realFetch(url);
+      if (!r.ok) return;
+      const data = await r.json();
+      if (Array.isArray(data) && typeof window[globalName] !== 'undefined') {
+        // Merge: backend is source of truth; localStorage deltas layered on top
+        const delta = JSON.parse(localStorage.getItem('meridian-delta-' + globalName) || '{}');
+        window[globalName].length = 0;
+        data.forEach(item => {
+          window[globalName].push(delta[item.id] ? { ...item, ...delta[item.id] } : item);
+        });
+        // Append any newly created items stored only in delta
+        Object.values(delta).forEach(d => {
+          if (d._new && !window[globalName].find(i => i.id === d.id)) {
+            window[globalName].push(d);
+          }
+        });
+        console.log(`[api-client] Loaded ${window[globalName].length} items for ${globalName} from backend`);
+      }
+    } catch(e) {
+      console.log(`[api-client] Backend not available for ${globalName}, using built-in data`);
+    }
+  };
+  // Stash real fetch before mock-api overrides it
+  window._realFetch = window._realFetch || window.fetch.bind(window);
+  await Promise.allSettled([
+    tryLoad('/backend/data/issues.json', 'ISSUES'),
+    tryLoad('/backend/data/prs.json', 'PRS'),
+    tryLoad('/backend/data/docs.json', 'DOCS'),
+    tryLoad('/backend/data/projects.json', 'PROJECTS'),
+    tryLoad('/backend/data/people.json', 'PEOPLE'),
+    tryLoad('/backend/data/inbox.json', 'INBOX'),
+  ]);
+})();
+window.apiFetch = async (method, path, body) => {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } };
+  if (body !== undefined) opts.body = JSON.stringify(body);
+  const res = await fetch(path, opts); // mock-api intercepts /api/* mutations
+  if (!res.ok) throw new Error(res.status);
+  return res.json();
+};
+// Persist a mutation delta to localStorage so it survives refresh
+window.persistDelta = (collection, item) => {
+  const key = 'meridian-delta-' + collection;
+  const delta = JSON.parse(localStorage.getItem(key) || '{}');
+  delta[item.id] = item;
+  localStorage.setItem(key, JSON.stringify(delta));
+};
+window.meridianRefresh = () =>
+  document.dispatchEvent(new CustomEvent('meridian:refresh'));

backend/data/inbox.json ADDED Viewed

	@@ -0,0 +1,10 @@

+[
+  { "id": "n1", "type": "mention", "from": "u1", "target": "AUR-412", "text": "mentioned you in a comment", "snippet": "@you — can you weigh in on the tile-size heuristic? I think 256 is…", "time": "12m", "unread": true, "kind": "issue" },
+  { "id": "n2", "type": "review",  "from": "u4", "target": "#2339",   "text": "requested your review on", "snippet": "feat(tokens): v3 semantic layer", "time": "34m", "unread": true, "kind": "pr" },
+  { "id": "n3", "type": "assign",  "from": "u5", "target": "NIM-110", "text": "assigned you", "snippet": "Regional failover runbook for EU-West primary", "time": "1h", "unread": true, "kind": "issue" },
+  { "id": "n4", "type": "status",  "from": "u2", "target": "#2341",   "text": "marked checks failing on", "snippet": "e2e-canvas: 'cursor-reconnect' flaked on retry", "time": "2h", "unread": true, "kind": "pr" },
+  { "id": "n5", "type": "comment", "from": "u6", "target": "EMB-523", "text": "replied in a thread", "snippet": "The snapshot approach feels right, but we should bound…", "time": "3h", "unread": false, "kind": "issue" },
+  { "id": "n6", "type": "doc",     "from": "u1", "target": "d12",     "text": "updated the PRD", "snippet": "Aurora: collaborative canvas — v0.4 with multi-select changes", "time": "6h", "unread": false, "kind": "doc" },
+  { "id": "n7", "type": "merged",  "from": "u6", "target": "#2334",   "text": "merged pull request", "snippet": "feat(comments): resolve threads with context snapshot", "time": "1d", "unread": false, "kind": "pr" },
+  { "id": "n8", "type": "due",     "target": "HAL-033",               "text": "is due tomorrow", "snippet": "Rotate SSO signing keys for SAML federation", "time": "1d", "unread": false, "kind": "issue" }
+]

backend/data/issues.json ADDED Viewed

	@@ -0,0 +1,20 @@

+[
+  { "id": "AUR-412", "title": "Rebuild canvas-rendering pipeline for 10k+ node graphs", "status": "progress", "priority": "urgent", "project": "aurora", "assignees": ["u2","u3"], "labels": ["perf","infra"], "due": "Apr 29", "created": "Apr 02", "estimate": 8, "commentCount": 14, "sprint": "Iter 42", "branch": "perf/canvas-pipeline" },
+  { "id": "AUR-418", "title": "Keyboard navigation for multi-select in tree view", "status": "todo", "priority": "high", "project": "aurora", "assignees": ["u4"], "labels": ["a11y"], "due": "May 02", "created": "Apr 11", "estimate": 3, "commentCount": 4, "sprint": "Iter 42" },
+  { "id": "TES-207", "title": "Design tokens v3: unify semantic layer across platforms", "status": "review", "priority": "high", "project": "tessera", "assignees": ["u1","u4"], "labels": ["design","docs"], "due": "Apr 25", "created": "Mar 28", "estimate": 5, "commentCount": 22, "sprint": "Iter 42", "branch": "design/tokens-v3" },
+  { "id": "NIM-091", "title": "Migrate ingestion workers from AWS Batch to Kubernetes Jobs", "status": "progress", "priority": "high", "project": "nimbus", "assignees": ["u7","u5"], "labels": ["infra"], "due": "May 10", "created": "Mar 20", "estimate": 13, "commentCount": 31, "sprint": "Iter 42", "branch": "infra/k8s-migration" },
+  { "id": "HAL-033", "title": "Rotate SSO signing keys for SAML federation", "status": "todo", "priority": "urgent", "project": "halcyon", "assignees": ["u8"], "labels": ["security"], "due": "Apr 22", "created": "Apr 15", "estimate": 2, "commentCount": 3, "sprint": "Iter 42" },
+  { "id": "EMB-514", "title": "Fix drag-preview offset on trackpad in Safari 17", "status": "backlog", "priority": "med", "project": "ember", "assignees": ["u6"], "labels": ["bug"], "due": null, "created": "Apr 18", "estimate": 1, "commentCount": 2 },
+  { "id": "AUR-401", "title": "Collaborative cursors: presence reconciliation on reconnect", "status": "progress", "priority": "med", "project": "aurora", "assignees": ["u2"], "labels": ["feature"], "due": "May 05", "created": "Apr 07", "estimate": 5, "commentCount": 18, "sprint": "Iter 42", "branch": "feat/presence-reconnect" },
+  { "id": "TES-214", "title": "Docs site: MDX components for live previews", "status": "todo", "priority": "low", "project": "tessera", "assignees": ["u1"], "labels": ["docs","feature"], "due": "May 14", "created": "Apr 10", "estimate": 3, "commentCount": 6 },
+  { "id": "NIM-103", "title": "Rate-limit public search endpoint per workspace", "status": "review", "priority": "high", "project": "nimbus", "assignees": ["u5","u9"], "labels": ["security","perf"], "due": "Apr 26", "created": "Apr 08", "estimate": 3, "commentCount": 9, "sprint": "Iter 42", "branch": "sec/search-ratelimit" },
+  { "id": "HAL-035", "title": "Audit log export as Parquet for BigQuery ingestion", "status": "backlog", "priority": "med", "project": "halcyon", "assignees": ["u8","u9"], "labels": ["infra","docs"], "due": null, "created": "Apr 16", "estimate": 5, "commentCount": 1 },
+  { "id": "EMB-520", "title": "Inline previews of Figma frames in comment threads", "status": "done", "priority": "med", "project": "ember", "assignees": ["u6","u4"], "labels": ["feature","design"], "due": "Apr 12", "created": "Mar 30", "estimate": 3, "commentCount": 11 },
+  { "id": "AUR-395", "title": "Telemetry: sampled traces for canvas interactions", "status": "done", "priority": "low", "project": "aurora", "assignees": ["u7"], "labels": ["infra","perf"], "due": "Apr 08", "created": "Mar 22", "estimate": 2, "commentCount": 5 },
+  { "id": "TES-199", "title": "Color contrast warnings inline in token editor", "status": "done", "priority": "high", "project": "tessera", "assignees": ["u1"], "labels": ["a11y","design"], "due": "Apr 14", "created": "Apr 01", "estimate": 2, "commentCount": 7 },
+  { "id": "NIM-110", "title": "Regional failover runbook for EU-West primary", "status": "todo", "priority": "urgent", "project": "nimbus", "assignees": ["u7"], "labels": ["infra","docs","security"], "due": "Apr 30", "created": "Apr 17", "estimate": 5, "commentCount": 2, "sprint": "Iter 42" },
+  { "id": "HAL-041", "title": "SCIM provisioning: nested group mapping", "status": "progress", "priority": "med", "project": "halcyon", "assignees": ["u8"], "labels": ["feature","security"], "due": "May 09", "created": "Apr 09", "estimate": 8, "commentCount": 14, "sprint": "Iter 42", "branch": "feat/scim-groups" },
+  { "id": "EMB-523", "title": "Comments: resolve threads without losing context", "status": "review", "priority": "med", "project": "ember", "assignees": ["u6","u3"], "labels": ["feature"], "due": "Apr 27", "created": "Apr 13", "estimate": 3, "commentCount": 8, "sprint": "Iter 42", "branch": "feat/resolve-threads" },
+  { "id": "AUR-422", "title": "Export canvas → SVG with embedded fonts", "status": "todo", "priority": "low", "project": "aurora", "assignees": ["u3"], "labels": ["feature"], "due": "May 20", "created": "Apr 18", "estimate": 5, "commentCount": 0 },
+  { "id": "TES-220", "title": "Motion tokens: cubic-bezier presets", "status": "backlog", "priority": "low", "project": "tessera", "assignees": ["u4"], "labels": ["design"], "due": null, "created": "Apr 19", "estimate": 2, "commentCount": 1 }
+]

backend/data/people.json ADDED Viewed

	@@ -0,0 +1,11 @@

+[
+  { "id": "u1", "name": "Amara Okafor", "handle": "amara", "hue": 300 },
+  { "id": "u2", "name": "Rohan Mehta", "handle": "rohan", "hue": 220 },
+  { "id": "u3", "name": "Kenji Ito", "handle": "kenji", "hue": 145 },
+  { "id": "u4", "name": "Sofía Ruiz", "handle": "sofia", "hue": 20 },
+  { "id": "u5", "name": "Lior Shapira", "handle": "lior", "hue": 75 },
+  { "id": "u6", "name": "Priya Raman", "handle": "priya", "hue": 340 },
+  { "id": "u7", "name": "Noah Bergström", "handle": "noah", "hue": 180 },
+  { "id": "u8", "name": "Aiyana Redcloud", "handle": "aiyana", "hue": 40 },
+  { "id": "u9", "name": "Tomás Velasco", "handle": "tomas", "hue": 260 }
+]

backend/data/projects.json ADDED Viewed

	@@ -0,0 +1,7 @@

+[
+  { "id": "aurora",  "name": "Aurora",  "code": "AUR", "color": "oklch(0.78 0.14 220)" },
+  { "id": "tessera", "name": "Tessera", "code": "TES", "color": "oklch(0.72 0.17 300)" },
+  { "id": "nimbus",  "name": "Nimbus",  "code": "NIM", "color": "oklch(0.80 0.14 75)"  },
+  { "id": "halcyon", "name": "Halcyon", "code": "HAL", "color": "oklch(0.80 0.16 145)" },
+  { "id": "ember",   "name": "Ember",   "code": "EMB", "color": "oklch(0.72 0.17 20)"  }
+]

backend/data/prs.json ADDED Viewed

	@@ -0,0 +1,9 @@

+[
+  { "id": "#2341", "title": "perf(canvas): tile-based rendering with offscreen canvas", "author": "u2", "status": "open", "branch": "perf/canvas-pipeline", "base": "main", "issue": "AUR-412", "additions": 842, "deletions": 217, "reviewers": ["u3","u7"], "checks": { "passed": 11, "failed": 1, "running": 2 }, "updated": "2h ago" },
+  { "id": "#2339", "title": "feat(tokens): v3 semantic layer", "author": "u1", "status": "review", "branch": "design/tokens-v3", "base": "main", "issue": "TES-207", "additions": 1204, "deletions": 890, "reviewers": ["u4"], "checks": { "passed": 14, "failed": 0, "running": 0 }, "updated": "5h ago" },
+  { "id": "#2338", "title": "infra(k8s): batch → jobs migration phase 2", "author": "u7", "status": "draft", "branch": "infra/k8s-migration", "base": "main", "issue": "NIM-091", "additions": 421, "deletions": 180, "reviewers": ["u5"], "checks": { "passed": 8, "failed": 0, "running": 3 }, "updated": "1d ago" },
+  { "id": "#2337", "title": "sec(search): per-workspace rate limiting", "author": "u5", "status": "review", "branch": "sec/search-ratelimit", "base": "main", "issue": "NIM-103", "additions": 312, "deletions": 44, "reviewers": ["u9","u7"], "checks": { "passed": 12, "failed": 0, "running": 0 }, "updated": "3h ago" },
+  { "id": "#2335", "title": "feat(scim): nested group mapping", "author": "u8", "status": "open", "branch": "feat/scim-groups", "base": "main", "issue": "HAL-041", "additions": 678, "deletions": 121, "reviewers": ["u9"], "checks": { "passed": 9, "failed": 2, "running": 0 }, "updated": "6h ago" },
+  { "id": "#2334", "title": "feat(comments): resolve threads with context snapshot", "author": "u6", "status": "merged", "branch": "feat/resolve-threads", "base": "main", "issue": "EMB-523", "additions": 298, "deletions": 76, "reviewers": ["u3"], "checks": { "passed": 15, "failed": 0, "running": 0 }, "updated": "1d ago" },
+  { "id": "#2332", "title": "feat(presence): reconcile on websocket reconnect", "author": "u2", "status": "open", "branch": "feat/presence-reconnect", "base": "main", "issue": "AUR-401", "additions": 184, "deletions": 52, "reviewers": ["u7"], "checks": { "passed": 13, "failed": 0, "running": 1 }, "updated": "8h ago" }
+]

data.jsx ADDED Viewed

	@@ -0,0 +1,208 @@

+// Mock data for Meridian
+const PEOPLE = [
+  { id: "u1", name: "Amara Okafor", handle: "amara", hue: 300 },
+  { id: "u2", name: "Rohan Mehta", handle: "rohan", hue: 220 },
+  { id: "u3", name: "Kenji Ito", handle: "kenji", hue: 145 },
+  { id: "u4", name: "Sofía Ruiz", handle: "sofia", hue: 20 },
+  { id: "u5", name: "Lior Shapira", handle: "lior", hue: 75 },
+  { id: "u6", name: "Priya Raman", handle: "priya", hue: 340 },
+  { id: "u7", name: "Noah Bergström", handle: "noah", hue: 180 },
+  { id: "u8", name: "Aiyana Redcloud", handle: "aiyana", hue: 40 },
+  { id: "u9", name: "Tomás Velasco", handle: "tomas", hue: 260 },
+];
+const initials = (name) => name.split(" ").map(w => w[0]).slice(0,2).join("").toUpperCase();
+const Avatar = ({ user, size = "sm" }) => {
+  if (!user) return null;
+  const s = { "--h": user.hue };
+  return (
+    <span className={`avatar ${size}`} style={{ background: `linear-gradient(135deg, oklch(0.62 0.16 ${user.hue}), oklch(0.52 0.18 ${(user.hue+60)%360}))`}} title={user.name}>
+      {initials(user.name)}
+    </span>
+  );
+};
+const AvatarStack = ({ users, max = 3, size = "xs" }) => {
+  const shown = users.slice(0, max);
+  const extra = users.length - shown.length;
+  return (
+    <span style={{ display: "inline-flex" }}>
+      {shown.map((u, i) => (
+        <span key={u.id} style={{ marginLeft: i === 0 ? 0 : -6, border: "1.5px solid var(--bg-1)", borderRadius: "50%", display: "inline-block" }}>
+          <Avatar user={u} size={size} />
+        </span>
+      ))}
+      {extra > 0 && (
+        <span className={`avatar ${size}`} style={{ marginLeft: -6, background: "var(--bg-3)", color: "var(--fg-1)", border: "1.5px solid var(--bg-1)" }}>
+          +{extra}
+        </span>
+      )}
+    </span>
+  );
+};
+const PROJECTS = [
+  { id: "aurora", name: "Aurora", code: "AUR", color: "oklch(0.78 0.14 220)" },
+  { id: "tessera", name: "Tessera", code: "TES", color: "oklch(0.72 0.17 300)" },
+  { id: "nimbus", name: "Nimbus", code: "NIM", color: "oklch(0.80 0.14 75)" },
+  { id: "halcyon", name: "Halcyon", code: "HAL", color: "oklch(0.80 0.16 145)" },
+  { id: "ember", name: "Ember", code: "EMB", color: "oklch(0.72 0.17 20)" },
+];
+const LABELS = [
+  { id: "bug", name: "bug", color: "oklch(0.70 0.17 20)" },
+  { id: "feature", name: "feature", color: "oklch(0.78 0.14 220)" },
+  { id: "infra", name: "infra", color: "oklch(0.68 0.12 260)" },
+  { id: "design", name: "design", color: "oklch(0.72 0.17 300)" },
+  { id: "perf", name: "perf", color: "oklch(0.80 0.14 75)" },
+  { id: "a11y", name: "a11y", color: "oklch(0.80 0.16 145)" },
+  { id: "docs", name: "docs", color: "oklch(0.65 0.02 250)" },
+  { id: "security", name: "security", color: "oklch(0.70 0.17 0)" },
+];
+// Status enum
+const STATUS = ["backlog", "todo", "progress", "review", "done"];
+const STATUS_META = {
+  backlog:  { label: "Backlog",     klass: "todo" },
+  todo:     { label: "Todo",        klass: "todo" },
+  progress: { label: "In progress", klass: "progress" },
+  review:   { label: "In review",   klass: "review" },
+  done:     { label: "Done",        klass: "done" },
+  blocked:  { label: "Blocked",     klass: "blocked" },
+};
+const PRIORITY = {
+  urgent: { label: "Urgent", klass: "priority-high", icon: "🔺", dots: 4 },
+  high:   { label: "High",   klass: "priority-high", dots: 3 },
+  med:    { label: "Medium", klass: "priority-med",  dots: 2 },
+  low:    { label: "Low",    klass: "priority-low",  dots: 1 },
+  none:   { label: "No priority", klass: "priority-low", dots: 0 },
+};
+const PriorityGlyph = ({ level }) => {
+  const n = PRIORITY[level]?.dots ?? 0;
+  const heights = [4, 7, 10, 13];
+  const color = level === "urgent" || level === "high" ? "var(--rose)"
+    : level === "med" ? "var(--amber)" : "var(--fg-3)";
+  return (
+    <span style={{ display: "inline-flex", alignItems: "flex-end", gap: 1.5, height: 14 }} title={PRIORITY[level]?.label}>
+      {[0,1,2,3].map(i => (
+        <span key={i} style={{
+          width: 2.5,
+          height: heights[i],
+          background: i < n ? color : "var(--border-strong)",
+          borderRadius: 1
+        }} />
+      ))}
+    </span>
+  );
+};
+const pick = (arr, n) => {
+  const out = [];
+  const used = new Set();
+  while (out.length < n && out.length < arr.length) {
+    const i = Math.floor((Math.sin((out.length+1) * 9301 + n * 49297) * 0.5 + 0.5) * arr.length) % arr.length;
+    if (!used.has(i)) { used.add(i); out.push(arr[i]); }
+  }
+  return out;
+};
+const ISSUES = [
+  { id: "AUR-412", title: "Rebuild canvas-rendering pipeline for 10k+ node graphs", status: "progress", priority: "urgent", project: "aurora", assignees: ["u2","u3"], labels: ["perf","infra"], due: "Apr 29", created: "Apr 02", estimate: 8, commentCount: 14, sprint: "Iter 42", branch: "perf/canvas-pipeline" },
+  { id: "AUR-418", title: "Keyboard navigation for multi-select in tree view", status: "todo", priority: "high", project: "aurora", assignees: ["u4"], labels: ["a11y"], due: "May 02", created: "Apr 11", estimate: 3, commentCount: 4, sprint: "Iter 42" },
+  { id: "TES-207", title: "Design tokens v3: unify semantic layer across platforms", status: "review", priority: "high", project: "tessera", assignees: ["u1","u4"], labels: ["design","docs"], due: "Apr 25", created: "Mar 28", estimate: 5, commentCount: 22, sprint: "Iter 42", branch: "design/tokens-v3" },
+  { id: "NIM-091", title: "Migrate ingestion workers from AWS Batch to Kubernetes Jobs", status: "progress", priority: "high", project: "nimbus", assignees: ["u7","u5"], labels: ["infra"], due: "May 10", created: "Mar 20", estimate: 13, commentCount: 31, sprint: "Iter 42", branch: "infra/k8s-migration" },
+  { id: "HAL-033", title: "Rotate SSO signing keys for SAML federation", status: "todo", priority: "urgent", project: "halcyon", assignees: ["u8"], labels: ["security"], due: "Apr 22", created: "Apr 15", estimate: 2, commentCount: 3, sprint: "Iter 42" },
+  { id: "EMB-514", title: "Fix drag-preview offset on trackpad in Safari 17", status: "backlog", priority: "med", project: "ember", assignees: ["u6"], labels: ["bug"], due: null, created: "Apr 18", estimate: 1, commentCount: 2 },
+  { id: "AUR-401", title: "Collaborative cursors: presence reconciliation on reconnect", status: "progress", priority: "med", project: "aurora", assignees: ["u2"], labels: ["feature"], due: "May 05", created: "Apr 07", estimate: 5, commentCount: 18, sprint: "Iter 42", branch: "feat/presence-reconnect" },
+  { id: "TES-214", title: "Docs site: MDX components for live previews", status: "todo", priority: "low", project: "tessera", assignees: ["u1"], labels: ["docs","feature"], due: "May 14", created: "Apr 10", estimate: 3, commentCount: 6 },
+  { id: "NIM-103", title: "Rate-limit public search endpoint per workspace", status: "review", priority: "high", project: "nimbus", assignees: ["u5","u9"], labels: ["security","perf"], due: "Apr 26", created: "Apr 08", estimate: 3, commentCount: 9, sprint: "Iter 42", branch: "sec/search-ratelimit" },
+  { id: "HAL-035", title: "Audit log export as Parquet for BigQuery ingestion", status: "backlog", priority: "med", project: "halcyon", assignees: ["u8","u9"], labels: ["infra","docs"], due: null, created: "Apr 16", estimate: 5, commentCount: 1 },
+  { id: "EMB-520", title: "Inline previews of Figma frames in comment threads", status: "done", priority: "med", project: "ember", assignees: ["u6","u4"], labels: ["feature","design"], due: "Apr 12", created: "Mar 30", estimate: 3, commentCount: 11 },
+  { id: "AUR-395", title: "Telemetry: sampled traces for canvas interactions", status: "done", priority: "low", project: "aurora", assignees: ["u7"], labels: ["infra","perf"], due: "Apr 08", created: "Mar 22", estimate: 2, commentCount: 5 },
+  { id: "TES-199", title: "Color contrast warnings inline in token editor", status: "done", priority: "high", project: "tessera", assignees: ["u1"], labels: ["a11y","design"], due: "Apr 14", created: "Apr 01", estimate: 2, commentCount: 7 },
+  { id: "NIM-110", title: "Regional failover runbook for EU-West primary", status: "todo", priority: "urgent", project: "nimbus", assignees: ["u7"], labels: ["infra","docs","security"], due: "Apr 30", created: "Apr 17", estimate: 5, commentCount: 2, sprint: "Iter 42" },
+  { id: "HAL-041", title: "SCIM provisioning: nested group mapping", status: "progress", priority: "med", project: "halcyon", assignees: ["u8"], labels: ["feature","security"], due: "May 09", created: "Apr 09", estimate: 8, commentCount: 14, sprint: "Iter 42", branch: "feat/scim-groups" },
+  { id: "EMB-523", title: "Comments: resolve threads without losing context", status: "review", priority: "med", project: "ember", assignees: ["u6","u3"], labels: ["feature"], due: "Apr 27", created: "Apr 13", estimate: 3, commentCount: 8, sprint: "Iter 42", branch: "feat/resolve-threads" },
+  { id: "AUR-422", title: "Export canvas → SVG with embedded fonts", status: "todo", priority: "low", project: "aurora", assignees: ["u3"], labels: ["feature"], due: "May 20", created: "Apr 18", estimate: 5, commentCount: 0 },
+  { id: "TES-220", title: "Motion tokens: cubic-bezier presets", status: "backlog", priority: "low", project: "tessera", assignees: ["u4"], labels: ["design"], due: null, created: "Apr 19", estimate: 2, commentCount: 1 },
+];
+// Pull requests
+const PRS = [
+  { id: "#2341", title: "perf(canvas): tile-based rendering with offscreen canvas", author: "u2", status: "open", branch: "perf/canvas-pipeline", base: "main", issue: "AUR-412", additions: 842, deletions: 217, reviewers: ["u3","u7"], checks: { passed: 11, failed: 1, running: 2 }, updated: "2h ago" },
+  { id: "#2339", title: "feat(tokens): v3 semantic layer", author: "u1", status: "review", branch: "design/tokens-v3", base: "main", issue: "TES-207", additions: 1204, deletions: 890, reviewers: ["u4"], checks: { passed: 14, failed: 0, running: 0 }, updated: "5h ago" },
+  { id: "#2338", title: "infra(k8s): batch → jobs migration phase 2", author: "u7", status: "draft", branch: "infra/k8s-migration", base: "main", issue: "NIM-091", additions: 421, deletions: 180, reviewers: ["u5"], checks: { passed: 8, failed: 0, running: 3 }, updated: "1d ago" },
+  { id: "#2337", title: "sec(search): per-workspace rate limiting", author: "u5", status: "review", branch: "sec/search-ratelimit", base: "main", issue: "NIM-103", additions: 312, deletions: 44, reviewers: ["u9","u7"], checks: { passed: 12, failed: 0, running: 0 }, updated: "3h ago" },
+  { id: "#2335", title: "feat(scim): nested group mapping", author: "u8", status: "open", branch: "feat/scim-groups", base: "main", issue: "HAL-041", additions: 678, deletions: 121, reviewers: ["u9"], checks: { passed: 9, failed: 2, running: 0 }, updated: "6h ago" },
+  { id: "#2334", title: "feat(comments): resolve threads with context snapshot", author: "u6", status: "merged", branch: "feat/resolve-threads", base: "main", issue: "EMB-523", additions: 298, deletions: 76, reviewers: ["u3"], checks: { passed: 15, failed: 0, running: 0 }, updated: "1d ago" },
+  { id: "#2332", title: "feat(presence): reconcile on websocket reconnect", author: "u2", status: "open", branch: "feat/presence-reconnect", base: "main", issue: "AUR-401", additions: 184, deletions: 52, reviewers: ["u7"], checks: { passed: 13, failed: 0, running: 1 }, updated: "8h ago" },
+];
+// Docs tree
+const DOCS = [
+  { id: "d1", title: "Engineering handbook", emoji: "◐", section: "space", children: [
+    { id: "d2", title: "Architecture decisions", emoji: "◇", children: [
+      { id: "d3", title: "ADR 041 — Canvas rendering pipeline", updated: "2d ago", author: "u2" },
+      { id: "d4", title: "ADR 042 — Multi-region data residency", updated: "5d ago", author: "u7" },
+      { id: "d5", title: "ADR 043 — Typed RPC between services", updated: "1w ago", author: "u5" },
+    ]},
+    { id: "d6", title: "On-call runbooks", emoji: "◈", children: [
+      { id: "d7", title: "Ingestion pipeline saturation", updated: "3d ago", author: "u7" },
+      { id: "d8", title: "SAML SSO outage procedure", updated: "1w ago", author: "u8" },
+    ]},
+    { id: "d9", title: "Release process", updated: "4d ago", author: "u5" },
+  ]},
+  { id: "d10", title: "Product briefs", emoji: "◑", section: "space", children: [
+    { id: "d11", title: "Q2 planning — themes & bets", updated: "1d ago", author: "u1" },
+    { id: "d12", title: "Aurora: collaborative canvas PRD", updated: "2d ago", author: "u1" },
+    { id: "d13", title: "Tessera: design system v3 vision", updated: "6h ago", author: "u4" },
+  ]},
+  { id: "d14", title: "Meeting notes", emoji: "◎", section: "space", children: [
+    { id: "d15", title: "Apr 18 — Platform weekly", updated: "2d ago", author: "u5" },
+    { id: "d16", title: "Apr 17 — Design review: Aurora", updated: "3d ago", author: "u4" },
+    { id: "d17", title: "Apr 15 — Incident review: EU-West", updated: "5d ago", author: "u7" },
+  ]},
+];
+// Activity / notifications
+const INBOX = [
+  { id: "n1", type: "mention", from: "u1", target: "AUR-412", text: "mentioned you in a comment", snippet: "@you — can you weigh in on the tile-size heuristic? I think 256 is…", time: "12m", unread: true, kind: "issue" },
+  { id: "n2", type: "review", from: "u4", target: "#2339", text: "requested your review on", snippet: "feat(tokens): v3 semantic layer", time: "34m", unread: true, kind: "pr" },
+  { id: "n3", type: "assign", from: "u5", target: "NIM-110", text: "assigned you", snippet: "Regional failover runbook for EU-West primary", time: "1h", unread: true, kind: "issue" },
+  { id: "n4", type: "status", from: "u2", target: "#2341", text: "marked checks failing on", snippet: "e2e-canvas: 'cursor-reconnect' flaked on retry", time: "2h", unread: true, kind: "pr" },
+  { id: "n5", type: "comment", from: "u6", target: "EMB-523", text: "replied in a thread", snippet: "The snapshot approach feels right, but we should bound…", time: "3h", unread: false, kind: "issue" },
+  { id: "n6", type: "doc", from: "u1", target: "d12", text: "updated the PRD", snippet: "Aurora: collaborative canvas — v0.4 with multi-select changes", time: "6h", unread: false, kind: "doc" },
+  { id: "n7", type: "merged", from: "u6", target: "#2334", text: "merged pull request", snippet: "feat(comments): resolve threads with context snapshot", time: "1d", unread: false, kind: "pr" },
+  { id: "n8", type: "due", target: "HAL-033", text: "is due tomorrow", snippet: "Rotate SSO signing keys for SAML federation", time: "1d", unread: false, kind: "issue" },
+];
+// Sprints
+const SPRINTS = [
+  { id: "i42", name: "Iteration 42", range: "Apr 14 – Apr 28", active: true, done: 12, scope: 34, velocity: 47 },
+  { id: "i41", name: "Iteration 41", range: "Mar 31 – Apr 13", active: false, done: 29, scope: 29, velocity: 52 },
+  { id: "i40", name: "Iteration 40", range: "Mar 17 – Mar 30", active: false, done: 27, scope: 31, velocity: 45 },
+  { id: "i43", name: "Iteration 43", range: "Apr 28 – May 12", active: false, done: 0, scope: 18, velocity: 0 },
+];
+// Roadmap items
+const ROADMAP = [
+  { id: "r1", title: "Aurora 2.0 — collaborative canvas", project: "aurora", q: "Q2", startCol: 0, span: 9, progress: 62, status: "progress" },
+  { id: "r2", title: "Tessera design tokens v3", project: "tessera", q: "Q2", startCol: 1, span: 5, progress: 85, status: "review" },
+  { id: "r3", title: "Nimbus EU-West multi-region", project: "nimbus", q: "Q2", startCol: 2, span: 10, progress: 40, status: "progress" },
+  { id: "r4", title: "Halcyon — SSO hardening", project: "halcyon", q: "Q2", startCol: 0, span: 4, progress: 58, status: "progress" },
+  { id: "r5", title: "Ember — comment system overhaul", project: "ember", q: "Q2", startCol: 4, span: 6, progress: 30, status: "progress" },
+  { id: "r6", title: "Aurora plugins SDK preview", project: "aurora", q: "Q3", startCol: 9, span: 6, progress: 5, status: "todo" },
+  { id: "r7", title: "Tessera — motion system", project: "tessera", q: "Q3", startCol: 6, span: 4, progress: 0, status: "todo" },
+  { id: "r8", title: "Nimbus — query cost insights", project: "nimbus", q: "Q3", startCol: 12, span: 6, progress: 0, status: "todo" },
+  { id: "r9", title: "Halcyon — audit log streaming", project: "halcyon", q: "Q3", startCol: 4, span: 7, progress: 0, status: "todo" },
+];
+Object.assign(window, {
+  PEOPLE, PROJECTS, LABELS, STATUS, STATUS_META, PRIORITY,
+  ISSUES, PRS, DOCS, INBOX, SPRINTS, ROADMAP,
+  Avatar, AvatarStack, PriorityGlyph, initials
+});

detail-modals.jsx ADDED Viewed

	@@ -0,0 +1,557 @@

+// Rich detail modals — real content, not empty toasts.
+// Each export is a component that renders inside ModalShell.
+const WeekModal = ({ onClose }) => {
+  const days = [
+    { day: "Mon", date: "Apr 20", items: [
+      { time: "09:30", title: "Aurora canvas perf sync", kind: "meeting", people: ["u1","u2","u3"] },
+      { time: "11:00", title: "AUR-412 due", kind: "due", priority: "urgent" },
+      { time: "14:00", title: "1:1 with Rohan", kind: "meeting", people: ["u1","u2"] },
+    ]},
+    { day: "Tue", date: "Apr 21", items: [
+      { time: "10:00", title: "Iteration 42 mid-point review", kind: "meeting", people: ["u1","u2","u5","u7"] },
+      { time: "16:30", title: "Tessera token migration demo", kind: "demo" },
+    ]},
+    { day: "Wed", date: "Apr 22", items: [
+      { time: "09:00", title: "Design systems working group", kind: "meeting", people: ["u1","u4"] },
+      { time: "15:00", title: "TSR-88 due", kind: "due", priority: "high" },
+    ]},
+    { day: "Thu", date: "Apr 23", items: [
+      { time: "all day", title: "Focus day — no meetings", kind: "focus" },
+    ]},
+    { day: "Fri", date: "Apr 24", items: [
+      { time: "10:30", title: "Sprint retro Iter 42", kind: "meeting", people: ["u1","u2","u5","u7","u9"] },
+      { time: "14:00", title: "Release cut", kind: "milestone" },
+    ]},
+  ];
+  const kindColor = { meeting: "var(--violet)", due: "var(--rose)", demo: "var(--amber)", focus: "var(--accent)", milestone: "var(--cyan)" };
+  return (
+    <ModalShell title="This week" subtitle="Apr 20 – Apr 26 · 7 meetings · 2 due dates" onClose={onClose} width={620}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        {days.map((d, i) => (
+          <div key={i} style={{ padding: "10px 0", borderBottom: i < days.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
+            <div className="flex items-center gap-10" style={{ marginBottom: 6 }}>
+              <div style={{ width: 56 }}>
+                <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{d.day}</div>
+                <div className="mono" style={{ fontSize: 13, color: i === 0 ? "var(--accent)" : "var(--fg-1)" }}>{d.date}</div>
+              </div>
+              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
+                {d.items.map((it, j) => (
+                  <div key={j} className="flex items-center gap-10" style={{ fontSize: 12.5, padding: "4px 0" }}>
+                    <span className="mono muted-2" style={{ fontSize: 11, width: 52 }}>{it.time}</span>
+                    <span style={{ width: 4, height: 14, background: kindColor[it.kind], borderRadius: 2 }} />
+                    <span style={{ flex: 1 }}>{it.title}</span>
+                    {it.people && <AvatarStack users={it.people.map(id => PEOPLE.find(p => p.id === id))} size="xs" />}
+                    {it.priority && <span className="tag" style={{ color: "var(--rose)" }}>{it.priority}</span>}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+const DigestModal = ({ onClose }) => (
+  <ModalShell title="Daily digest" subtitle="Monday · 20 April 2026 · auto-generated 07:30" onClose={onClose} width={620}
+    footer={<>
+      <button className="btn ghost sm" onClick={onClose}>Close</button>
+      <button className="btn sm" onClick={() => { window.toast("Digest sent to #team-platform"); onClose(); }}><Icon name="sparkle" size={12} /> Send to Slack</button>
+    </>}>
+    <div style={{ fontSize: 13.5, lineHeight: 1.65, color: "var(--fg-1)" }}>
+      <div style={{ marginBottom: 18 }}>
+        <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>At a glance</div>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
+          <div className="card" style={{ padding: 10 }}>
+            <div className="muted" style={{ fontSize: 11 }}>Iteration progress</div>
+            <div className="mono" style={{ fontSize: 18, marginTop: 2 }}>12<span className="muted-2" style={{ fontSize: 11 }}>/34 pts</span></div>
+          </div>
+          <div className="card" style={{ padding: 10 }}>
+            <div className="muted" style={{ fontSize: 11 }}>Your review queue</div>
+            <div className="mono" style={{ fontSize: 18, marginTop: 2, color: "var(--amber)" }}>3 <span className="muted-2" style={{ fontSize: 11 }}>PRs waiting</span></div>
+          </div>
+          <div className="card" style={{ padding: 10 }}>
+            <div className="muted" style={{ fontSize: 11 }}>Blocked</div>
+            <div className="mono" style={{ fontSize: 18, marginTop: 2, color: "var(--rose)" }}>1 <span className="muted-2" style={{ fontSize: 11 }}>SSO audit</span></div>
+          </div>
+        </div>
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>What changed overnight</div>
+      <ul style={{ paddingLeft: 18, marginBottom: 18 }}>
+        <li>Kenji pushed 4 commits to <span className="mono">perf/canvas-pipeline</span>; checks green.</li>
+        <li>Priya closed <span className="mono">TSR-88</span> (token migration — Android).</li>
+        <li>Security audit freeze pushed to Apr 29 — unblocks <span className="mono">SEC-12</span>.</li>
+        <li>Sara asked for your review on <span className="mono">#2341</span> 12m ago.</li>
+      </ul>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Suggested focus today</div>
+      <ol style={{ paddingLeft: 18 }}>
+        <li>Review <span className="mono">#2341</span> — on Iteration 42 critical path.</li>
+        <li>Decide tile-size heuristic (Kenji's question on AUR-412).</li>
+        <li>30m to unblock SSO audit freeze before standup.</li>
+      </ol>
+    </div>
+  </ModalShell>
+);
+const FilterModal = ({ scope, onClose }) => {
+  const [status, setStatus] = React.useState(new Set());
+  const [priority, setPriority] = React.useState(new Set());
+  const [assignee, setAssignee] = React.useState(new Set());
+  const [labelSet, setLabelSet] = React.useState(new Set());
+  const toggle = (setFn, v) => setFn(prev => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
+  const count = status.size + priority.size + assignee.size + labelSet.size;
+  const Chip = ({ on, onClick, children, color }) => (
+    <button onClick={onClick} className="chip" style={{
+      background: on ? "var(--accent-soft)" : "transparent",
+      borderColor: on ? "var(--accent-dim)" : "var(--border)",
+      color: on ? "var(--fg-0)" : (color || "var(--fg-1)"),
+      cursor: "pointer"
+    }}>{on && <Icon name="check" size={10} strokeWidth={2.5} />} {children}</button>
+  );
+  return (
+    <ModalShell title={`Filter ${scope || "issues"}`} subtitle={`${count} filter${count === 1 ? "" : "s"} active`} onClose={onClose} width={520}
+      footer={<>
+        <button className="btn ghost sm" onClick={() => { setStatus(new Set()); setPriority(new Set()); setAssignee(new Set()); setLabelSet(new Set()); }}>Clear</button>
+        <button className="btn sm primary" onClick={() => { window.toast(count ? `${count} filters applied` : "No filters"); onClose(); }}>Apply</button>
+      </>}>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Status</div>
+      <div className="flex items-center gap-6" style={{ flexWrap: "wrap", marginBottom: 14 }}>
+        {["backlog","todo","progress","review","done"].map(s => (
+          <Chip key={s} on={status.has(s)} onClick={() => toggle(setStatus, s)}>{s}</Chip>
+        ))}
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Priority</div>
+      <div className="flex items-center gap-6" style={{ flexWrap: "wrap", marginBottom: 14 }}>
+        {["urgent","high","medium","low"].map(p => (
+          <Chip key={p} on={priority.has(p)} onClick={() => toggle(setPriority, p)}>{p}</Chip>
+        ))}
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Assignee</div>
+      <div className="flex items-center gap-6" style={{ flexWrap: "wrap", marginBottom: 14 }}>
+        {PEOPLE.slice(0, 6).map(u => (
+          <button key={u.id} onClick={() => toggle(setAssignee, u.id)} className="chip" style={{
+            background: assignee.has(u.id) ? "var(--accent-soft)" : "transparent",
+            borderColor: assignee.has(u.id) ? "var(--accent-dim)" : "var(--border)",
+            cursor: "pointer", gap: 6
+          }}>
+            <Avatar user={u} size="xs" /> {u.name.split(" ")[0]}
+          </button>
+        ))}
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Labels</div>
+      <div className="flex items-center gap-6" style={{ flexWrap: "wrap" }}>
+        {LABELS.slice(0, 8).map(l => (
+          <Chip key={l.id} on={labelSet.has(l.id)} onClick={() => toggle(setLabelSet, l.id)} color={l.color}>#{l.name}</Chip>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+const PRDetailModal = ({ pr, onClose }) => {
+  const author = PEOPLE.find(p => p.id === pr.author);
+  const reviewers = pr.reviewers.map(id => PEOPLE.find(p => p.id === id));
+  const files = [
+    { path: "src/renderer/tile.ts", add: 142, del: 18 },
+    { path: "src/renderer/composite.ts", add: 88, del: 34 },
+    { path: "src/hit-test/rtree.ts", add: 214, del: 0 },
+    { path: "test/renderer.bench.ts", add: 96, del: 12 },
+  ];
+  const commits = [
+    { sha: "a3f21e", msg: "refactor: extract tile from renderer", by: author, time: "6h" },
+    { sha: "b7c044", msg: "perf: adaptive tile sizing (256/128 split)", by: author, time: "4h" },
+    { sha: "e9d881", msg: "test: scene benchmarks at 1k/5k/10k", by: author, time: "2h" },
+  ];
+  return (
+    <ModalShell title={pr.title} subtitle={`${pr.id} · ${pr.branch} → ${pr.base}`} onClose={onClose} width={720}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Close</button>
+        <button className="btn ghost sm" onClick={() => { window.toast("Requested changes"); onClose(); }}>Request changes</button>
+        <button className="btn sm primary" onClick={() => { window.toast(`Approved ${pr.id}`); onClose(); }}><Icon name="check" size={12} /> Approve</button>
+      </>}>
+      <div className="flex items-center gap-10" style={{ marginBottom: 14 }}>
+        <Avatar user={author} size="sm" />
+        <div>
+          <div style={{ fontSize: 13 }}><strong>{author.name}</strong> <span className="muted">opened this PR · {pr.updated}</span></div>
+          <div className="muted-2 mono" style={{ fontSize: 11 }}>@{author.handle} · {pr.base}</div>
+        </div>
+        <div style={{ flex: 1 }} />
+        <span className="chip" style={{ color: "var(--accent)", textTransform: "capitalize" }}>{pr.status}</span>
+      </div>
+      <div className="card" style={{ padding: 12, marginBottom: 14 }}>
+        <div className="flex items-center gap-10" style={{ fontSize: 12 }}>
+          <div>
+            <div className="muted-2 mono" style={{ fontSize: 10 }}>CHECKS</div>
+            <div className="flex items-center gap-6 mono" style={{ marginTop: 2 }}>
+              {pr.checks.passed > 0 && <span style={{ color: "var(--status-done)" }}><Icon name="check" size={11} /> {pr.checks.passed}</span>}
+              {pr.checks.failed > 0 && <span style={{ color: "var(--rose)" }}><Icon name="x" size={11} /> {pr.checks.failed}</span>}
+              {pr.checks.running > 0 && <span style={{ color: "var(--amber)" }}><Icon name="clock" size={11} /> {pr.checks.running}</span>}
+            </div>
+          </div>
+          <div style={{ width: 1, height: 30, background: "var(--border)" }} />
+          <div>
+            <div className="muted-2 mono" style={{ fontSize: 10 }}>DIFF</div>
+            <div className="mono" style={{ marginTop: 2 }}><span style={{ color: "var(--status-done)" }}>+{pr.additions}</span> <span style={{ color: "var(--rose)" }}>−{pr.deletions}</span></div>
+          </div>
+          <div style={{ width: 1, height: 30, background: "var(--border)" }} />
+          <div>
+            <div className="muted-2 mono" style={{ fontSize: 10 }}>REVIEWERS</div>
+            <div style={{ marginTop: 2 }}><AvatarStack users={reviewers} size="xs" /></div>
+          </div>
+          {pr.issue && <>
+            <div style={{ width: 1, height: 30, background: "var(--border)" }} />
+            <div>
+              <div className="muted-2 mono" style={{ fontSize: 10 }}>LINKED</div>
+              <div className="mono" style={{ marginTop: 2 }}>{pr.issue}</div>
+            </div>
+          </>}
+        </div>
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Files changed</div>
+      <div style={{ border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden", marginBottom: 14 }}>
+        {files.map((f, i) => (
+          <div key={i} className="flex items-center gap-10" style={{ padding: "8px 12px", borderBottom: i < files.length - 1 ? "1px solid var(--border-subtle)" : "none", fontSize: 12 }}>
+            <Icon name="hash" size={11} style={{ color: "var(--fg-3)" }} />
+            <span className="mono flex-1 truncate">{f.path}</span>
+            <span className="mono" style={{ color: "var(--status-done)" }}>+{f.add}</span>
+            <span className="mono" style={{ color: "var(--rose)" }}>−{f.del}</span>
+          </div>
+        ))}
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Commits</div>
+      <div>
+        {commits.map((c, i) => (
+          <div key={i} className="flex items-center gap-10" style={{ padding: "6px 0", borderTop: i > 0 ? "1px solid var(--border-subtle)" : "none", fontSize: 12 }}>
+            <Avatar user={c.by} size="xs" />
+            <span className="mono muted-2" style={{ fontSize: 10.5, width: 56 }}>{c.sha}</span>
+            <span className="flex-1">{c.msg}</span>
+            <span className="muted-2 mono" style={{ fontSize: 11 }}>{c.time} ago</span>
+          </div>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+const ProjectDetailModal = ({ project, onClose }) => {
+  const issues = ISSUES.filter(i => i.project === project.id);
+  const roadmap = ROADMAP.filter(r => r.project === project.id);
+  const byStatus = { backlog: 0, todo: 0, progress: 0, review: 0, done: 0 };
+  issues.forEach(i => { byStatus[i.status] = (byStatus[i.status] || 0) + 1; });
+  const team = [...new Set(issues.flatMap(i => i.assignees))].map(id => PEOPLE.find(p => p.id === id)).filter(Boolean);
+  const total = issues.length || 1;
+  return (
+    <ModalShell
+      title={<span className="flex items-center gap-8"><span style={{ width: 10, height: 10, borderRadius: 3, background: project.color }} />{project.name}</span>}
+      subtitle={`${project.code} · ${issues.length} issues · ${team.length} contributors`}
+      onClose={onClose} width={680}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Close</button>
+        <button className="btn sm primary" onClick={() => { onClose(); window.__goIssues && window.__goIssues(); }}>Open project →</button>
+      </>}>
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }}>
+        <div className="card" style={{ padding: 12 }}>
+          <div className="muted mono" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>Issue breakdown</div>
+          <div style={{ display: "flex", height: 6, borderRadius: 3, overflow: "hidden", background: "var(--bg-3)", marginBottom: 8 }}>
+            <div style={{ flex: byStatus.done, background: "var(--status-done)" }} />
+            <div style={{ flex: byStatus.review, background: "var(--status-review)" }} />
+            <div style={{ flex: byStatus.progress, background: "var(--status-progress)" }} />
+            <div style={{ flex: byStatus.todo + byStatus.backlog, background: "var(--fg-3)" }} />
+          </div>
+          {[
+            { k: "done", l: "Done", c: "var(--status-done)" },
+            { k: "review", l: "In review", c: "var(--status-review)" },
+            { k: "progress", l: "In progress", c: "var(--status-progress)" },
+            { k: "todo", l: "Todo", c: "var(--fg-3)" },
+          ].map(r => (
+            <div key={r.k} className="flex items-center gap-6" style={{ fontSize: 11.5, padding: "2px 0" }}>
+              <span style={{ width: 6, height: 6, borderRadius: 2, background: r.c }} />
+              <span style={{ flex: 1 }}>{r.l}</span>
+              <span className="mono muted-2">{byStatus[r.k]} · {Math.round((byStatus[r.k] / total) * 100)}%</span>
+            </div>
+          ))}
+        </div>
+        <div className="card" style={{ padding: 12 }}>
+          <div className="muted mono" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>Contributors</div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            {team.slice(0, 5).map(u => (
+              <div key={u.id} className="flex items-center gap-8" style={{ fontSize: 12 }}>
+                <Avatar user={u} size="xs" />
+                <span>{u.name}</span>
+                <span className="mono muted-2" style={{ marginLeft: "auto", fontSize: 11 }}>{issues.filter(i => i.assignees.includes(u.id)).length}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {roadmap.length > 0 && <>
+        <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Roadmap</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 14 }}>
+          {roadmap.map(r => (
+            <div key={r.id} className="flex items-center gap-8" style={{ fontSize: 12.5, padding: "6px 0", borderBottom: "1px solid var(--border-subtle)" }}>
+              <Icon name="bolt" size={11} style={{ color: project.color }} />
+              <span style={{ flex: 1 }}>{r.title}</span>
+              <div style={{ width: 60, height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                <div style={{ width: `${r.progress}%`, height: "100%", background: project.color }} />
+              </div>
+              <span className="mono muted-2" style={{ fontSize: 11 }}>{r.progress}%</span>
+            </div>
+          ))}
+        </div>
+      </>}
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Recent issues</div>
+      <div>
+        {issues.slice(0, 5).map(is => (
+          <div key={is.id} className="flex items-center gap-8" style={{ padding: "6px 0", fontSize: 12, borderBottom: "1px solid var(--border-subtle)" }}>
+            <PriorityGlyph level={is.priority} />
+            <span className="mono muted-2" style={{ fontSize: 11, width: 64 }}>{is.id}</span>
+            <span className="flex-1 truncate">{is.title}</span>
+            <AvatarStack users={is.assignees.map(id => PEOPLE.find(p => p.id === id))} size="xs" />
+          </div>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+const SprintReportModal = ({ onClose }) => (
+  <ModalShell title="Iteration 42 — Report" subtitle="Apr 14 – Apr 28 · day 6 of 14" onClose={onClose} width={620}
+    footer={<>
+      <button className="btn ghost sm" onClick={onClose}>Close</button>
+      <button className="btn sm" onClick={() => { window.toast("Report exported to PDF"); onClose(); }}><Icon name="download" size={12} /> Export PDF</button>
+    </>}>
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 16 }}>
+      {[
+        { l: "Scope", v: "34 pts" },
+        { l: "Completed", v: "12 pts", c: "var(--status-done)" },
+        { l: "Remaining", v: "22 pts" },
+        { l: "Confidence", v: "82%", c: "var(--status-done)" },
+      ].map((s, i) => (
+        <div key={i} className="card" style={{ padding: 10 }}>
+          <div className="muted mono" style={{ fontSize: 10.5 }}>{s.l}</div>
+          <div className="mono" style={{ fontSize: 18, color: s.c || "var(--fg-0)", marginTop: 2 }}>{s.v}</div>
+        </div>
+      ))}
+    </div>
+    <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Highlights</div>
+    <ul style={{ paddingLeft: 18, fontSize: 13, lineHeight: 1.7, color: "var(--fg-1)", marginBottom: 14 }}>
+      <li>Canvas tile-based pipeline on track — p95 paint down from 18ms → 9ms.</li>
+      <li>Token migration closed for iOS + Android (TSR-88).</li>
+      <li>SSO audit blocked by Infra review — est. +3d slip.</li>
+    </ul>
+    <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Risks</div>
+    <ul style={{ paddingLeft: 18, fontSize: 13, lineHeight: 1.7, color: "var(--fg-1)" }}>
+      <li><span style={{ color: "var(--rose)" }}>High</span> · SSO audit freeze — coordination with Security eng.</li>
+      <li><span style={{ color: "var(--amber)" }}>Medium</span> · Plugin shim timing — needs decision by day 10.</li>
+    </ul>
+  </ModalShell>
+);
+const RetroModal = ({ onClose }) => (
+  <ModalShell title="Retrospective draft" subtitle="Auto-generated by Meridian AI from Iteration 42 activity" onClose={onClose} width={620}
+    footer={<>
+      <button className="btn ghost sm" onClick={onClose}>Close</button>
+      <button className="btn sm" onClick={() => { window.toast("Retro saved to Docs → Retros"); onClose(); }}>Save to docs</button>
+    </>}>
+    <div style={{ fontSize: 13.5, lineHeight: 1.7, color: "var(--fg-1)" }}>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>What went well</div>
+      <ul style={{ paddingLeft: 18, marginBottom: 14 }}>
+        <li>Tile-based pipeline PR landed with zero rework — good prior spec.</li>
+        <li>Kenji + Sara's pairing on hit-test rtree halved original estimate.</li>
+      </ul>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>What didn't</div>
+      <ul style={{ paddingLeft: 18, marginBottom: 14 }}>
+        <li>SSO audit blockers discovered day 4, not day 0 — slipped scope.</li>
+        <li>Design review for token migration queued behind launch prep.</li>
+      </ul>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>Action items</div>
+      <ul style={{ paddingLeft: 18 }}>
+        <li>Add dependency mapping to kickoff template (owner: Amara).</li>
+        <li>Reserve 2 design review slots per week (owner: Priya).</li>
+      </ul>
+    </div>
+  </ModalShell>
+);
+const AIAnswerModal = ({ question, onClose }) => {
+  const answers = {
+    "Summarize Iteration 42 progress": {
+      tldr: "On track — 12/34 pts done at day 6/14, 82% confidence to close by Apr 26.",
+      body: [
+        "Canvas rebuild (AUR-412) is the iteration's critical path and it's shipping under budget. Kenji's pairing with Sara compressed the hit-test rtree work from 8pts to 5pts.",
+        "Token migration (TSR-88) closed yesterday. Design systems team now unblocked on cascading work.",
+        "SSO infra freeze (SEC-12) is the one red flag — blocked waiting on Security eng review. Audit deadline is firm; consider escalating.",
+      ],
+      sources: ["AUR-412", "TSR-88", "SEC-12", "Iter 42 board"],
+    },
+    "What's blocking Aurora?": {
+      tldr: "One live blocker: tile-size heuristic decision on AUR-412. Kenji is waiting on a call.",
+      body: [
+        "Kenji's question (12m ago): 'Are we going 256px tiles or adaptive? Worried about memory on large documents.'",
+        "Sara's prototype in the branch uses adaptive — base 256, halves if point count > 2k. Working well in benchmarks (9ms p95 at 10k nodes).",
+        "Recommend: approve adaptive approach, park the fixed-tile alternative for post-ship measurement.",
+      ],
+      sources: ["AUR-412", "#2341", "Kenji comment"],
+    },
+    "Draft release notes for last sprint": {
+      tldr: "Iteration 41 shipped 3 user-facing changes + 2 infra improvements.",
+      body: [
+        "**Canvas performance** — multi-select drag is now smooth up to 10k nodes (was ~2k).",
+        "**Tokens** — iOS and Android token libraries now regenerate nightly from the single source.",
+        "**Infra** — CI perf budget guard (fails builds that regress p95 paint > 8ms).",
+      ],
+      sources: ["Iter 41 board", "#2298", "#2312"],
+    },
+    "What are the top blocking issues right now?": {
+      tldr: "3 active blockers across Aurora and Tessera. SEC-12 is highest severity — audit deadline is firm.",
+      body: [
+        "**SEC-12** (Blocker) — SSO infra freeze pending Security eng review. Audit deadline Jun 1 is immovable. Escalation recommended today.",
+        "**AUR-401** (High) — Canvas hit-test regression under 10k nodes. Kenji identified root cause; fix in review. ETA: tomorrow.",
+        "**TSR-92** (Medium) — Tessera token sync failing on Windows CI. Intermittent; likely a path separator bug. Assigned to Priya.",
+      ],
+      sources: ["SEC-12", "AUR-401", "TSR-92", "Iter 42 board"],
+    },
+    "What's the status of open pull requests?": {
+      tldr: "7 open PRs: 2 ready to merge, 3 in review, 2 drafts. Oldest is 4 days stale.",
+      body: [
+        "**Ready to merge**: #2341 (token sync fix) and #2338 (CI timeout bump) — both approved, checks green.",
+        "**In review**: #2345 (canvas resize), #2347 (SSO middleware), #2349 (notifier service) — all awaiting 1 more approval.",
+        "**Drafts**: #2350 (Tessera dark mode), #2352 (perf dashboard) — not ready for review.",
+        "Recommend merging #2341 first — it unblocks Tessera iOS and Android nightly builds.",
+      ],
+      sources: ["#2341", "#2338", "#2345", "PR board"],
+    },
+    "Who has the highest workload this sprint?": {
+      tldr: "Kenji is over-allocated at 18pts assigned vs 12pt sprint capacity. Sara and Priya are on track.",
+      body: [
+        "**Kenji** (18pts / 12pt cap) — carrying AUR-412 canvas rebuild solo since Diego moved to security audit. Recommend pulling TSR-92 off his plate.",
+        "**Sara** (11pts) — on track. Leading design systems token migration; pairing with Kenji 2h/day this week.",
+        "**Priya** (9pts) — slightly under-allocated. Available to absorb TSR-92 (3pts) if Kenji needs relief.",
+        "**Diego** (8pts) — pulled into SEC-12 mid-sprint. His original 6pts of canvas work is now unassigned.",
+      ],
+      sources: ["Iter 42 board", "Team capacity", "AUR-412", "SEC-12"],
+    },
+    "What milestones are at risk this quarter?": {
+      tldr: "Aurora launch (Jun 12) is amber. SSO audit (Jul 1) is red. Tessera 2.0 (Aug 22) is green.",
+      body: [
+        "**Aurora launch Jun 12** (Amber) — canvas rebuild on track, but SEC-12 SSO blocker creates a 5-day slip risk if not resolved by May 15. Mitigation: ship without SSO, add in hotfix.",
+        "**SSO audit Jul 1** (Red) — Security eng review not started. Requires 3-week turnaround minimum. Must begin by Jun 9 to hit deadline. Escalate to VP Eng.",
+        "**Tessera 2.0 Aug 22** (Green) — token migration complete, dark mode in progress. 6-week buffer remaining.",
+      ],
+      sources: ["Roadmap Q2–Q3", "SEC-12", "AUR-412", "TSR-88"],
+    },
+  };
+  const a = answers[question] || { tldr: "Meridian AI is thinking…", body: [], sources: [] };
+  return (
+    <ModalShell
+      title={<span className="flex items-center gap-8"><Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} />{question}</span>}
+      subtitle="Meridian AI · drawing from issues, PRs, and recent activity"
+      onClose={onClose} width={600}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Close</button>
+        <button className="btn sm" onClick={() => { window.toast("Answer copied"); onClose(); }}><Icon name="link" size={12} /> Copy answer</button>
+      </>}>
+      <div className="card" style={{ padding: 12, marginBottom: 14, borderColor: "var(--accent-dim)", background: "var(--accent-soft)" }}>
+        <div className="mono muted-2" style={{ fontSize: 10.5, marginBottom: 4, letterSpacing: "0.08em", textTransform: "uppercase" }}>TL;DR</div>
+        <div style={{ fontSize: 13.5 }}>{a.tldr}</div>
+      </div>
+      <div style={{ fontSize: 13.5, lineHeight: 1.7, color: "var(--fg-1)", marginBottom: 14 }}>
+        {a.body.map((p, i) => <p key={i} style={{ marginBottom: 8 }}>{p}</p>)}
+      </div>
+      {a.sources.length > 0 && (
+        <div>
+          <div className="mono muted-2" style={{ fontSize: 10.5, marginBottom: 4, letterSpacing: "0.08em", textTransform: "uppercase" }}>Sources</div>
+          <div className="flex items-center gap-6" style={{ flexWrap: "wrap" }}>
+            {a.sources.map((s, i) => <span key={i} className="chip mono">{s}</span>)}
+          </div>
+        </div>
+      )}
+    </ModalShell>
+  );
+};
+const TeammateModal = ({ user, onClose }) => {
+  const assigned = ISSUES.filter(i => i.assignees.includes(user.id));
+  const authored = PRS.filter(p => p.author === user.id);
+  return (
+    <ModalShell
+      title={<span className="flex items-center gap-10"><Avatar user={user} size="sm" />{user.name}</span>}
+      subtitle={`@${user.handle} · Helix workspace`}
+      onClose={onClose} width={560}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Close</button>
+        <button className="btn sm" onClick={() => { window.toast(`Messaged ${user.name.split(" ")[0]}`); onClose(); }}><Icon name="message" size={12} /> Message</button>
+      </>}>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 14 }}>
+        <div className="card" style={{ padding: 10 }}>
+          <div className="muted mono" style={{ fontSize: 10.5 }}>Open issues</div>
+          <div className="mono" style={{ fontSize: 20, marginTop: 2 }}>{assigned.length}</div>
+        </div>
+        <div className="card" style={{ padding: 10 }}>
+          <div className="muted mono" style={{ fontSize: 10.5 }}>PRs authored</div>
+          <div className="mono" style={{ fontSize: 20, marginTop: 2 }}>{authored.length}</div>
+        </div>
+        <div className="card" style={{ padding: 10 }}>
+          <div className="muted mono" style={{ fontSize: 10.5 }}>Timezone</div>
+          <div className="mono" style={{ fontSize: 13, marginTop: 4 }}>Europe/Berlin</div>
+        </div>
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Currently working on</div>
+      {assigned.slice(0, 4).map(is => (
+        <div key={is.id} className="flex items-center gap-8" style={{ padding: "6px 0", fontSize: 12, borderBottom: "1px solid var(--border-subtle)" }}>
+          <PriorityGlyph level={is.priority} />
+          <span className="mono muted-2" style={{ fontSize: 11, width: 64 }}>{is.id}</span>
+          <span className="flex-1 truncate">{is.title}</span>
+          <span className={`status ${is.status === "backlog" ? "todo" : is.status}`}><span className="s-dot" /></span>
+        </div>
+      ))}
+    </ModalShell>
+  );
+};
+const AttachModal = ({ onClose }) => {
+  const [stage, setStage] = React.useState("picker");
+  const files = [
+    { name: "paint-trace-apr18.json", size: "842 KB", icon: "hash" },
+    { name: "benchmark-10k.pdf", size: "1.2 MB", icon: "docs" },
+    { name: "tile-size-sketch.png", size: "210 KB", icon: "image" },
+  ];
+  return (
+    <ModalShell title="Attach" onClose={onClose} width={480}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
+      </>}>
+      <div className="card" style={{ padding: 18, textAlign: "center", border: "2px dashed var(--border-strong)", marginBottom: 14, cursor: "pointer" }}
+        onClick={() => { window.toast("File picker opened (demo)"); }}>
+        <Icon name="attach" size={22} style={{ color: "var(--fg-3)" }} />
+        <div style={{ fontSize: 13, marginTop: 8, fontWeight: 500 }}>Drop files or click to browse</div>
+        <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>Up to 100 MB per file</div>
+      </div>
+      <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Recent in this workspace</div>
+      <div>
+        {files.map((f, i) => (
+          <button key={i} className="flex items-center gap-10" style={{ width: "100%", padding: "8px 6px", textAlign: "left", borderRadius: 6, borderBottom: i < files.length - 1 ? "1px solid var(--border-subtle)" : "none" }}
+            onClick={() => { window.toast(`Attached ${f.name}`); onClose(); }}>
+            <Icon name={f.icon} size={14} style={{ color: "var(--fg-3)" }} />
+            <span style={{ flex: 1, fontSize: 12.5 }}>{f.name}</span>
+            <span className="muted-2 mono" style={{ fontSize: 11 }}>{f.size}</span>
+          </button>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+Object.assign(window, { WeekModal, DigestModal, FilterModal, PRDetailModal, ProjectDetailModal, SprintReportModal, RetroModal, AIAnswerModal, TeammateModal, AttachModal });

icons.jsx ADDED Viewed

	@@ -0,0 +1,63 @@

+// Minimal stroke icon set — lucide-style, 16px default
+const Icon = ({ name, size = 16, className = "", strokeWidth = 1.6, ...rest }) => {
+  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, ...rest };
+  switch (name) {
+    case "search": return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
+    case "inbox": return <svg {...common}><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.5 3 12v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6l-2.5-6.5A2 2 0 0 0 16.6 4H7.4a2 2 0 0 0-1.9 1.5Z"/></svg>;
+    case "home": return <svg {...common}><path d="m3 10 9-7 9 7v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2Z"/></svg>;
+    case "dash": return <svg {...common}><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>;
+    case "issues": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
+    case "roadmap": return <svg {...common}><path d="M3 6h4M17 6h4M3 12h4M17 12h4M3 18h4M17 18h4"/><path d="M7 6h10M7 12h6M7 18h8"/></svg>;
+    case "sprint": return <svg {...common}><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>;
+    case "docs": return <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h6"/></svg>;
+    case "git": return <svg {...common}><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M18 8.5v3a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4v-3"/><path d="M12 12.5v3"/></svg>;
+    case "team": return <svg {...common}><circle cx="9" cy="8" r="4"/><path d="M1 21a8 8 0 0 1 16 0"/><circle cx="17" cy="6" r="3"/><path d="M23 17a6 6 0 0 0-6-6"/></svg>;
+    case "settings": return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.7l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.7-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.7.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.7 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.7.3h.1a1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5h.1a1.6 1.6 0 0 0 1.7-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.7v.1a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg>;
+    case "plus": return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
+    case "filter": return <svg {...common}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5z"/></svg>;
+    case "chevron-down": return <svg {...common}><path d="m6 9 6 6 6-6"/></svg>;
+    case "chevron-right": return <svg {...common}><path d="m9 6 6 6-6 6"/></svg>;
+    case "chevron-left": return <svg {...common}><path d="m15 6-6 6 6 6"/></svg>;
+    case "more": return <svg {...common}><circle cx="12" cy="12" r="1.2"/><circle cx="5" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></svg>;
+    case "star": return <svg {...common}><path d="m12 3 2.9 6 6.6.6-5 4.5 1.5 6.5L12 17.7 6 20.6l1.5-6.5-5-4.5 6.6-.6z"/></svg>;
+    case "calendar": return <svg {...common}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
+    case "clock": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
+    case "check": return <svg {...common}><path d="m5 12 5 5 10-12"/></svg>;
+    case "x": return <svg {...common}><path d="M6 6l12 12M18 6 6 18"/></svg>;
+    case "link": return <svg {...common}><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 1 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 1 0 7 7l1-1"/></svg>;
+    case "branch": return <svg {...common}><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>;
+    case "pr": return <svg {...common}><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M6 8.5v7"/><path d="M11 6h3a4 4 0 0 1 4 4v5.5"/></svg>;
+    case "commit": return <svg {...common}><circle cx="12" cy="12" r="3.5"/><path d="M3 12h5.5M15.5 12H21"/></svg>;
+    case "message": return <svg {...common}><path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
+    case "bell": return <svg {...common}><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>;
+    case "tag": return <svg {...common}><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z"/><circle cx="7.5" cy="7.5" r="1.2"/></svg>;
+    case "flag": return <svg {...common}><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><path d="M4 22v-7"/></svg>;
+    case "sidebar": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>;
+    case "expand": return <svg {...common}><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>;
+    case "sparkle": return <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg>;
+    case "doc-add": return <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M12 13v5M9.5 15.5h5"/></svg>;
+    case "lock": return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>;
+    case "globe": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"/></svg>;
+    case "bolt": return <svg {...common}><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>;
+    case "play": return <svg {...common}><path d="M6 3v18l15-9z"/></svg>;
+    case "list": return <svg {...common}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
+    case "board": return <svg {...common}><rect x="3" y="3" width="7" height="14" rx="1"/><rect x="14" y="3" width="7" height="10" rx="1"/></svg>;
+    case "timeline": return <svg {...common}><path d="M3 7h9M3 12h14M3 17h6"/><circle cx="13" cy="7" r="2"/><circle cx="18" cy="12" r="2"/><circle cx="10" cy="17" r="2"/></svg>;
+    case "download": return <svg {...common}><path d="M12 3v12M6 11l6 6 6-6M4 21h16"/></svg>;
+    case "eye": return <svg {...common}><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>;
+    case "attach": return <svg {...common}><path d="m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.4l9.2-9.3a4 4 0 1 1 5.7 5.7l-9.3 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg>;
+    case "arrow-up": return <svg {...common}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
+    case "arrow-right": return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
+    case "trend": return <svg {...common}><path d="m3 17 6-6 4 4 8-8M14 7h7v7"/></svg>;
+    case "database": return <svg {...common}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"/></svg>;
+    case "component": return <svg {...common}><path d="M12 2 4 6l8 4 8-4zM4 12l8 4 8-4M4 18l8 4 8-4"/></svg>;
+    case "moon": return <svg {...common}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>;
+    case "sun": return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>;
+    case "code": return <svg {...common}><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>;
+    case "hash": return <svg {...common}><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>;
+    case "at": return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg>;
+    default: return <svg {...common}><rect x="4" y="4" width="16" height="16" rx="2"/></svg>;
+  }
+};
+window.Icon = Icon;

index.html CHANGED Viewed

Binary files a/index.html and b/index.html differ

interactions.jsx ADDED Viewed

	@@ -0,0 +1,293 @@

+// Global interaction helpers: toast, modal, project selection, copy link.
+// Exposes window.toast(msg), window.confirmAction(msg, cb), window.openNewIssue(),
+// window.openShareModal(title), and a <Toaster /> component mounted by App.
+(function () {
+  const listeners = new Set();
+  let nextId = 1;
+  const state = { toasts: [], modal: null };
+  const emit = () => listeners.forEach(l => l());
+  window.__ui = {
+    subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); },
+    get state() { return state; },
+    toast(msg, opts = {}) {
+      const id = nextId++;
+      state.toasts = [...state.toasts, { id, msg, kind: opts.kind || "info" }];
+      emit();
+      setTimeout(() => {
+        state.toasts = state.toasts.filter(t => t.id !== id);
+        emit();
+      }, opts.duration || 2800);
+    },
+    openModal(modal) { state.modal = modal; emit(); },
+    closeModal() { state.modal = null; emit(); },
+  };
+  // Convenience
+  window.toast = (msg, opts) => window.__ui.toast(msg, opts);
+  window.copyLink = (label) => {
+    const url = `https://meridian.app/${(label || "link").toLowerCase().replace(/\s+/g, "-")}`;
+    try {
+      navigator.clipboard?.writeText(url);
+    } catch (e) { /* noop */ }
+    window.toast(`Link copied — ${url}`);
+  };
+  window.openNewIssue = (prefill) => window.__ui.openModal({ kind: "new-issue", prefill: prefill || {} });
+  window.openNewDoc = () => window.__ui.openModal({ kind: "new-doc" });
+  window.openNewPR = () => window.__ui.openModal({ kind: "new-pr" });
+  window.openInvite = () => window.__ui.openModal({ kind: "invite" });
+  window.openShare = (title) => window.__ui.openModal({ kind: "share", title });
+  window.openPicker = (opts) => window.__ui.openModal({ kind: "picker", ...opts });
+  window.openWeek = () => window.__ui.openModal({ kind: "week" });
+  window.openDigest = () => window.openAI("Give me a daily digest of what happened, what I need to focus on, and any risks.", "general", { inbox: typeof INBOX !== 'undefined' ? INBOX : [], issues: typeof ISSUES !== 'undefined' ? ISSUES : [] });
+  window.openFilter = (scope) => window.__ui.openModal({ kind: "filter", scope });
+  window.openPR = (pr) => window.__ui.openModal({ kind: "pr-detail", pr });
+  window.openProject = (project) => window.__ui.openModal({ kind: "project", project });
+  window.openSprintReport = () => window.openAI("Generate a sprint report for Iteration 42. Summarize completed work, carryover, and team velocity.", "sprint", { issues: typeof ISSUES !== 'undefined' ? ISSUES : [] });
+  window.openRetro = () => window.openAI("Draft a retrospective for the current sprint. Identify what went well, what didn't, and action items.", "sprint", { issues: typeof ISSUES !== 'undefined' ? ISSUES : [] });
+  window.openTeammate = (user) => window.__ui.openModal({ kind: "teammate", user });
+  window.openAttach = () => window.__ui.openModal({ kind: "attach" });
+})();
+// ---- React bits ----
+function useUIState() {
+  const [, force] = React.useReducer(x => x + 1, 0);
+  React.useEffect(() => window.__ui.subscribe(force), []);
+  return window.__ui.state;
+}
+const Toaster = () => {
+  const { toasts } = useUIState();
+  return (
+    <div style={{
+      position: "fixed", bottom: 20, left: "50%", transform: "translateX(-50%)",
+      display: "flex", flexDirection: "column", gap: 6, zIndex: 500, pointerEvents: "none"
+    }}>
+      {toasts.map(t => (
+        <div key={t.id} className="mono" style={{
+          background: "var(--bg-2)", border: "1px solid var(--border-strong)",
+          color: "var(--fg-0)", padding: "8px 14px", borderRadius: 8, fontSize: 12,
+          boxShadow: "0 8px 24px -8px rgba(0,0,0,0.5)", pointerEvents: "auto",
+          animation: "toastIn 180ms ease",
+        }}>{t.msg}</div>
+      ))}
+    </div>
+  );
+};
+const ModalShell = ({ title, subtitle, onClose, children, footer, width = 480 }) => (
+  <div className="overlay" onClick={onClose} style={{ alignItems: "center" }}>
+    <div onClick={e => e.stopPropagation()} style={{
+      width, maxWidth: "calc(100vw - 40px)", background: "var(--bg-1)",
+      border: "1px solid var(--border-strong)", borderRadius: 12,
+      boxShadow: "0 30px 80px -20px rgba(0,0,0,0.6)", overflow: "hidden",
+      display: "flex", flexDirection: "column", maxHeight: "80vh"
+    }}>
+      <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 13.5, fontWeight: 600 }}>{title}</div>
+          {subtitle && <div className="muted mono" style={{ fontSize: 11, marginTop: 2 }}>{subtitle}</div>}
+        </div>
+        <button className="icon-btn" onClick={onClose}><Icon name="x" size={14} /></button>
+      </div>
+      <div style={{ flex: 1, overflow: "auto", padding: 18 }}>{children}</div>
+      {footer && <div style={{ padding: "10px 14px", borderTop: "1px solid var(--border)", display: "flex", gap: 8, justifyContent: "flex-end", background: "var(--bg-0)" }}>{footer}</div>}
+    </div>
+  </div>
+);
+const NewIssueModal = ({ prefill, onClose }) => {
+  const [title, setTitle] = React.useState(prefill.title || "");
+  const [description, setDescription] = React.useState("");
+  const [priority, setPriority] = React.useState(prefill.priority || "med");
+  const [project, setProject] = React.useState(prefill.project || PROJECTS[0].id);
+  const submit = async () => {
+    if (!title.trim()) { window.toast("Add a title first"); return; }
+    const proj = PROJECTS.find(p => p.id === project);
+    try {
+      await window.apiFetch('POST', '/api/issues', { title: title.trim(), description: description.trim(), priority, project, status: prefill.status || 'backlog' });
+      window.meridianRefresh();
+      window.toast(`Created issue in ${proj.code}`);
+      onClose();
+    } catch (e) {
+      window.toast("Failed to create issue");
+    }
+  };
+  return (
+    <ModalShell title="New issue" subtitle="⌘↵ to create · ESC to dismiss" onClose={onClose} width={560}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
+        <button className="btn sm primary" onClick={submit}>Create issue</button>
+      </>}>
+      <input autoFocus placeholder="Issue title" value={title} onChange={e => setTitle(e.target.value)}
+        onKeyDown={e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit(); }}
+        style={{ width: "100%", background: "transparent", border: "none", outline: "none", fontSize: 18, padding: "4px 2px", color: "var(--fg-0)", marginBottom: 10 }} />
+      <textarea placeholder="Add description… (optional)" rows={4} value={description} onChange={e => setDescription(e.target.value)} style={{
+        width: "100%", background: "var(--bg-0)", border: "1px solid var(--border)",
+        outline: "none", borderRadius: 8, padding: 10, fontSize: 13, color: "var(--fg-0)",
+        fontFamily: "inherit", resize: "vertical", marginBottom: 14
+      }} />
+      <div className="flex items-center gap-8" style={{ flexWrap: "wrap" }}>
+        <select value={project} onChange={e => setProject(e.target.value)} className="btn ghost sm">
+          {PROJECTS.map(p => <option key={p.id} value={p.id}>{p.code} — {p.name}</option>)}
+        </select>
+        <select value={priority} onChange={e => setPriority(e.target.value)} className="btn ghost sm">
+          {[["urgent","Urgent"],["high","High"],["med","Medium"],["low","Low"],["none","None"]].map(([v,l]) => <option key={v} value={v}>{l}</option>)}
+        </select>
+        <button className="btn ghost sm"><Icon name="at" size={12} /> Assignee</button>
+        <button className="btn ghost sm"><Icon name="calendar" size={12} /> Due date</button>
+      </div>
+    </ModalShell>
+  );
+};
+const NewDocModal = ({ onClose }) => {
+  const [title, setTitle] = React.useState("");
+  const submit = async () => {
+    if (!title.trim()) { window.toast("Add a title"); return; }
+    try {
+      await window.apiFetch('POST', '/api/docs', { title: title.trim() });
+      window.meridianRefresh();
+      window.toast(`Draft created · ${title}`);
+      onClose();
+    } catch (e) {
+      window.toast("Failed to create doc");
+    }
+  };
+  return (
+    <ModalShell title="New document" onClose={onClose} width={520}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
+        <button className="btn sm primary" onClick={submit}>Create</button>
+      </>}>
+      <input autoFocus placeholder="Untitled document" value={title} onChange={e => setTitle(e.target.value)}
+        style={{ width: "100%", background: "transparent", border: "none", outline: "none", fontSize: 20, padding: "4px 2px", color: "var(--fg-0)", fontFamily: "var(--font-editorial, inherit)" }} />
+      <div className="muted" style={{ fontSize: 12, marginTop: 16 }}>A private draft will appear in Docs → Drafts. You can move or share it later.</div>
+    </ModalShell>
+  );
+};
+const NewPRModal = ({ onClose }) => {
+  const [title, setTitle] = React.useState("");
+  const [branch, setBranch] = React.useState("");
+  const submit = async () => {
+    if (!title || !branch) { window.toast("Title and branch required"); return; }
+    try {
+      await window.apiFetch('POST', '/api/prs', { title, branch, base: 'main', status: 'open' });
+      window.meridianRefresh();
+      window.toast(`Opened PR · ${branch} → main`);
+      onClose();
+    } catch (e) {
+      window.toast("Failed to open PR");
+    }
+  };
+  return (
+    <ModalShell title="Open pull request" onClose={onClose} width={560}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
+        <button className="btn sm primary" onClick={submit}>Open PR</button>
+      </>}>
+      <input autoFocus placeholder="PR title" value={title} onChange={e => setTitle(e.target.value)}
+        style={{ width: "100%", background: "var(--bg-0)", border: "1px solid var(--border)", outline: "none", fontSize: 14, padding: "8px 10px", borderRadius: 8, color: "var(--fg-0)", marginBottom: 10 }} />
+      <div className="flex items-center gap-8">
+        <input placeholder="feature/branch-name" value={branch} onChange={e => setBranch(e.target.value)} className="mono"
+          style={{ flex: 1, background: "var(--bg-0)", border: "1px solid var(--border)", outline: "none", fontSize: 13, padding: "8px 10px", borderRadius: 8, color: "var(--fg-0)" }} />
+        <span className="mono muted-2">→</span>
+        <div className="mono" style={{ padding: "8px 10px", border: "1px solid var(--border)", borderRadius: 8, background: "var(--bg-0)", fontSize: 13 }}>main</div>
+      </div>
+    </ModalShell>
+  );
+};
+const InviteModal = ({ onClose }) => {
+  const [email, setEmail] = React.useState("");
+  const submit = () => {
+    if (!email.includes("@")) { window.toast("Enter a valid email"); return; }
+    window.toast(`Invite sent to ${email}`);
+    onClose();
+  };
+  return (
+    <ModalShell title="Invite to workspace" subtitle="Helix · enterprise" onClose={onClose} width={480}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Cancel</button>
+        <button className="btn sm primary" onClick={submit}>Send invite</button>
+      </>}>
+      <input autoFocus placeholder="name@company.com" value={email} onChange={e => setEmail(e.target.value)}
+        onKeyDown={e => e.key === "Enter" && submit()}
+        style={{ width: "100%", background: "var(--bg-0)", border: "1px solid var(--border)", outline: "none", fontSize: 14, padding: "10px 12px", borderRadius: 8, color: "var(--fg-0)" }} />
+      <div className="muted" style={{ fontSize: 11.5, marginTop: 10 }}>They'll receive an email with a workspace join link valid for 7 days.</div>
+    </ModalShell>
+  );
+};
+const ShareModal = ({ title, onClose }) => {
+  const url = `https://meridian.app/docs/${(title || "doc").toLowerCase().replace(/\s+/g, "-")}`;
+  const copy = () => {
+    try { navigator.clipboard?.writeText(url); } catch {}
+    window.toast("Link copied");
+    onClose();
+  };
+  return (
+    <ModalShell title="Share" subtitle={title} onClose={onClose} width={480}
+      footer={<>
+        <button className="btn ghost sm" onClick={onClose}>Done</button>
+        <button className="btn sm primary" onClick={copy}><Icon name="link" size={12} /> Copy link</button>
+      </>}>
+      <div className="mono" style={{ padding: "10px 12px", background: "var(--bg-0)", border: "1px solid var(--border)", borderRadius: 8, fontSize: 12, color: "var(--fg-1)", marginBottom: 14, wordBreak: "break-all" }}>{url}</div>
+      <div style={{ fontSize: 12.5, marginBottom: 6, fontWeight: 500 }}>People with access</div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        {PEOPLE.slice(0, 3).map(u => (
+          <div key={u.id} className="flex items-center gap-8" style={{ fontSize: 12.5 }}>
+            <Avatar user={u} size="xs" />
+            <span>{u.name}</span>
+            <span className="mono muted-2" style={{ marginLeft: "auto", fontSize: 11 }}>Editor</span>
+          </div>
+        ))}
+      </div>
+    </ModalShell>
+  );
+};
+const PickerModal = ({ title, options, onChoose, onClose }) => (
+  <ModalShell title={title} onClose={onClose} width={400}>
+    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      {options.map(o => (
+        <button key={o.value} className="palette-item" onClick={() => { onChoose(o); onClose(); }}>
+          {o.icon && <Icon name={o.icon} size={14} style={{ color: o.color || "var(--fg-2)" }} />}
+          {o.swatch && <span style={{ width: 10, height: 10, borderRadius: 3, background: o.swatch, flexShrink: 0 }} />}
+          <span style={{ flex: 1, textAlign: "left" }}>{o.label}</span>
+          {o.hint && <span className="mono muted-2" style={{ fontSize: 11 }}>{o.hint}</span>}
+        </button>
+      ))}
+    </div>
+  </ModalShell>
+);
+const ModalHost = () => {
+  const { modal } = useUIState();
+  if (!modal) return null;
+  const close = () => window.__ui.closeModal();
+  switch (modal.kind) {
+    case "new-issue": return <NewIssueModal prefill={modal.prefill} onClose={close} />;
+    case "new-doc":   return <NewDocModal onClose={close} />;
+    case "new-pr":    return <NewPRModal onClose={close} />;
+    case "invite":    return <InviteModal onClose={close} />;
+    case "share":     return <ShareModal title={modal.title} onClose={close} />;
+    case "picker":    return <PickerModal title={modal.title} options={modal.options} onChoose={modal.onChoose} onClose={close} />;
+    case "week":      return <WeekModal onClose={close} />;
+    case "digest":    return <DigestModal onClose={close} />;
+    case "filter":    return <FilterModal scope={modal.scope} onClose={close} />;
+    case "pr-detail": return <PRDetailModal pr={modal.pr} onClose={close} />;
+    case "project":   return <ProjectDetailModal project={modal.project} onClose={close} />;
+    case "sprint-report": return <SprintReportModal onClose={close} />;
+    case "retro":     return <RetroModal onClose={close} />;
+    case "ai":        return <AIAnswerModal question={modal.question} onClose={close} />;
+    case "teammate":  return <TeammateModal user={modal.user} onClose={close} />;
+    case "attach":    return <AttachModal onClose={close} />;
+    default: return null;
+  }
+};
+Object.assign(window, { Toaster, ModalHost });

landing.css ADDED Viewed

	@@ -0,0 +1,897 @@

+/* Meridian — Landing
+   Dark, vanguardista, inspirado en el sistema interno */
+:root {
+  --bg-0: oklch(0.16 0.008 250);
+  --bg-1: oklch(0.20 0.009 250);
+  --bg-2: oklch(0.24 0.010 250);
+  --bg-3: oklch(0.28 0.012 250);
+  --bg-elev: oklch(0.22 0.010 250);
+  --border: oklch(0.30 0.012 250);
+  --border-strong: oklch(0.40 0.015 250);
+  --border-subtle: oklch(0.24 0.010 250);
+  --fg-0: oklch(0.97 0.005 250);
+  --fg-1: oklch(0.82 0.010 250);
+  --fg-2: oklch(0.62 0.012 250);
+  --fg-3: oklch(0.45 0.012 250);
+  --accent: oklch(0.85 0.17 145);          /* lime */
+  --accent-fg: oklch(0.20 0.05 145);
+  --accent-dim: oklch(0.40 0.10 145);
+  --accent-soft: oklch(0.30 0.06 145);
+  --violet: oklch(0.72 0.18 300);
+  --amber:  oklch(0.80 0.14 75);
+  --rose:   oklch(0.72 0.17 20);
+  --cyan:   oklch(0.78 0.13 220);
+  --font-ui: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+  --font-editorial: "Fraunces", "Tiempos", Georgia, serif;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+  --max: 1240px;
+}
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  background: var(--bg-0);
+  color: var(--fg-0);
+  font-family: var(--font-ui);
+  font-feature-settings: "cv11", "ss01", "ss03";
+  -webkit-font-smoothing: antialiased;
+  font-size: 15px;
+  line-height: 1.5;
+}
+body {
+  overflow-x: hidden;
+}
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
+.mono { font-family: var(--font-mono); }
+.editorial { font-family: var(--font-editorial); font-style: italic; font-weight: 400; }
+/* ===== Background field ===== */
+.bg-field {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background:
+    radial-gradient(80vw 60vh at 50% -10%, oklch(0.28 0.10 145 / 0.18), transparent 60%),
+    radial-gradient(60vw 60vh at 100% 30%, oklch(0.30 0.14 300 / 0.12), transparent 65%),
+    radial-gradient(60vw 60vh at 0% 70%, oklch(0.30 0.10 220 / 0.10), transparent 65%);
+}
+.bg-grid {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background-image:
+    linear-gradient(to right, oklch(0.30 0.012 250 / 0.45) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.30 0.012 250 / 0.45) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
+  opacity: 0.5;
+}
+.bg-noise {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
+  mix-blend-mode: overlay;
+}
+/* ===== Nav ===== */
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 28px;
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  background: oklch(0.16 0.008 250 / 0.55);
+  border-bottom: 1px solid oklch(0.30 0.012 250 / 0.5);
+}
+.brand {
+  display: inline-flex; align-items: center; gap: 10px;
+  font-weight: 600; letter-spacing: -0.01em;
+}
+.brand .logo {
+  width: 26px; height: 26px; border-radius: 7px;
+  background:
+    conic-gradient(from 200deg, var(--accent), var(--violet), var(--cyan), var(--accent));
+  position: relative;
+  box-shadow: 0 0 30px oklch(0.85 0.17 145 / 0.45);
+}
+.brand .logo::after {
+  content: ""; position: absolute; inset: 5px;
+  border-radius: 3px;
+  background: var(--bg-0);
+  mask: radial-gradient(circle at 30% 30%, #000 40%, transparent 41%);
+}
+.brand .name { font-size: 15px; }
+.brand .ws { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); margin-left: 4px; }
+.nav-links { display: flex; gap: 4px; }
+.nav-links a {
+  padding: 7px 12px; border-radius: 8px;
+  font-size: 13.5px; color: var(--fg-1);
+  transition: background 120ms, color 120ms;
+}
+.nav-links a:hover { background: oklch(0.28 0.012 250 / 0.6); color: var(--fg-0); }
+.nav-actions { display: flex; gap: 8px; align-items: center; }
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 9px 16px; border-radius: 9px;
+  font-size: 13.5px; font-weight: 500;
+  border: 1px solid var(--border);
+  background: var(--bg-1);
+  color: var(--fg-0);
+  transition: all 140ms;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--bg-2); border-color: var(--border-strong); transform: translateY(-1px); }
+.btn.primary {
+  background: var(--accent); color: var(--accent-fg);
+  border-color: transparent;
+  box-shadow: 0 6px 24px oklch(0.85 0.17 145 / 0.30), inset 0 1px 0 oklch(1 0 0 / 0.30);
+}
+.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
+.btn.ghost:hover { background: oklch(0.28 0.012 250 / 0.6); color: var(--fg-0); }
+.btn.lg { padding: 12px 20px; font-size: 14.5px; border-radius: 11px; }
+.kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--fg-2); background: oklch(0.20 0.009 250 / 0.6); }
+/* ===== Section base ===== */
+.section { position: relative; z-index: 1; padding: 120px 28px; }
+.wrap { max-width: var(--max); margin: 0 auto; }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-family: var(--font-mono); font-size: 11.5px;
+  text-transform: uppercase; letter-spacing: 0.14em;
+  color: var(--fg-2);
+  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
+  background: oklch(0.20 0.009 250 / 0.6);
+}
+.eyebrow .dot {
+  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
+  box-shadow: 0 0 10px var(--accent);
+  animation: pulse 1.8s ease-in-out infinite;
+}
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; }
+h1 { font-size: clamp(48px, 7.2vw, 96px); line-height: 1.02; }
+h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; }
+h3 { font-size: 22px; line-height: 1.2; }
+.lead { font-size: 19px; color: var(--fg-2); max-width: 60ch; line-height: 1.5; }
+/* ===== Hero ===== */
+.hero { padding-top: 160px; padding-bottom: 80px; }
+.hero-grid {
+  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center;
+}
+.hero h1 .cursor {
+  display: inline-block; width: 0.55ch; height: 0.9em;
+  background: var(--accent); margin-left: 0.05em; vertical-align: -0.06em;
+  animation: blink 1.05s steps(2,end) infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+.hero .badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
+.hero h1 { margin-bottom: 24px; }
+.hero h1 .word-shimmer {
+  background: linear-gradient(120deg, var(--fg-0) 30%, var(--accent) 50%, var(--fg-0) 70%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: shimmer 5s linear infinite;
+}
+@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.hero p.lead { margin-bottom: 32px; }
+.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
+.hero-meta { display: flex; gap: 20px; margin-top: 36px; color: var(--fg-2); font-size: 12.5px; flex-wrap: wrap; }
+.hero-meta .d { display: inline-flex; align-items: center; gap: 6px; }
+.hero-meta .d .ind { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
+/* ===== Hero "video" — animated UI mock ===== */
+.hero-video {
+  position: relative;
+  border-radius: 18px;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-1);
+  box-shadow:
+    0 40px 100px oklch(0 0 0 / 0.6),
+    0 0 0 1px oklch(0.85 0.17 145 / 0.15),
+    inset 0 1px 0 oklch(1 0 0 / 0.05);
+  aspect-ratio: 16 / 11;
+  transform: perspective(1400px) rotateY(-7deg) rotateX(4deg);
+  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.hero-video:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(2deg); }
+.hv-chrome {
+  height: 32px; display: flex; align-items: center; gap: 8px;
+  padding: 0 12px; border-bottom: 1px solid var(--border);
+  background: var(--bg-2);
+}
+.hv-chrome .dot { width: 9px; height: 9px; border-radius: 50%; }
+.hv-chrome .url {
+  margin-left: 12px; font-family: var(--font-mono); font-size: 11px;
+  color: var(--fg-2); padding: 2px 10px; border-radius: 6px;
+  background: var(--bg-1); border: 1px solid var(--border);
+  flex: 1;
+}
+.hv-stage { position: absolute; inset: 32px 0 0 0; overflow: hidden; display: flex; flex-direction: column; }
+/* fake toolbar */
+.hv-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-1); flex-shrink: 0; }
+.hv-tabs { display: inline-flex; gap: 2px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
+.hv-tabs span { padding: 3px 10px; font-size: 11px; color: var(--fg-2); border-radius: 5px; }
+.hv-tabs span.on { background: var(--bg-0); color: var(--fg-0); box-shadow: var(--shadow-sm); }
+.hv-presence { display: inline-flex; align-items: center; gap: 8px; }
+.hv-presence .pa { width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid var(--bg-1); margin-left: -8px; }
+.hv-presence .pa-1 { background: linear-gradient(135deg, var(--violet), var(--cyan)); margin-left: 0; }
+.hv-presence .pa-2 { background: linear-gradient(135deg, var(--rose), var(--amber)); }
+.hv-presence .pa-3 { background: linear-gradient(135deg, var(--cyan), var(--accent)); }
+.hv-presence .pn { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
+.hv-presence .pn-d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.4s infinite; }
+/* sub-anim: live kanban */
+.kanban {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
+  padding: 12px; flex: 1; min-height: 0;
+}
+.kcol { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.kcol h5 {
+  margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--fg-2); display: flex; align-items: center; gap: 6px;
+}
+.kcol h5 .ct { margin-left: auto; font-family: var(--font-mono); color: var(--fg-3); }
+.kcol h5 .sd { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.kcol.todo h5 { color: oklch(0.65 0.012 250); }
+.kcol.prog h5 { color: var(--amber); }
+.kcol.done h5 { color: var(--accent); }
+.kcol.is-target { background: oklch(0.30 0.06 145 / 0.18); border-color: var(--accent-soft); transition: background 200ms, border-color 200ms; }
+.kcard {
+  background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px;
+  padding: 8px 9px; font-size: 11px; color: var(--fg-1);
+  display: flex; flex-direction: column; gap: 5px;
+  transition: opacity 220ms;
+}
+.kcard .id { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); }
+.kcard .title { color: var(--fg-0); font-weight: 500; line-height: 1.3; }
+.kcard .meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg-2); }
+.kcard .meta .av { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); flex-shrink: 0; }
+.kcard .tag { display: inline-flex; padding: 1px 5px; border-radius: 3px; background: var(--bg-3); font-family: var(--font-mono); font-size: 9px; color: var(--fg-2); }
+.kcard.k-target.is-ghost { opacity: 0.18; }
+/* moving card — JS-driven, smooth grab+drop */
+.kcard.moving {
+  position: absolute; z-index: 7;
+  width: 28%; left: 0; top: 0;
+  pointer-events: none;
+  background: var(--bg-elev);
+  box-shadow: 0 18px 40px oklch(0 0 0 / 0.55), 0 0 0 1.5px var(--accent);
+  opacity: 0;
+  transition: left 1100ms cubic-bezier(0.5, 0, 0.3, 1),
+              top 1100ms cubic-bezier(0.5, 0, 0.3, 1),
+              transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1),
+              opacity 250ms,
+              box-shadow 250ms;
+}
+.kcard.moving.is-grabbed {
+  transform: rotate(2.5deg) scale(1.04);
+  box-shadow: 0 24px 50px oklch(0 0 0 / 0.6), 0 0 0 1.5px var(--accent), 0 0 30px oklch(0.85 0.17 145 / 0.4);
+}
+.kcard.moving.is-visible { opacity: 1; }
+/* live cursor */
+/* live cursor — JS-driven, follows the card */
+.cursor-fly {
+  position: absolute; width: 18px; height: 18px; z-index: 8;
+  left: 0; top: 0;
+  pointer-events: none; opacity: 0;
+  transition: left 1100ms cubic-bezier(0.5, 0, 0.3, 1),
+              top 1100ms cubic-bezier(0.5, 0, 0.3, 1),
+              opacity 250ms;
+}
+.cursor-fly.is-visible { opacity: 1; }
+.cursor-fly svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.6)); }
+.cursor-fly .label {
+  position: absolute; top: 16px; left: 16px;
+  font-size: 9.5px; font-family: var(--font-mono);
+  background: var(--accent); color: var(--accent-fg);
+  padding: 2px 6px; border-radius: 4px;
+  white-space: nowrap; font-weight: 600;
+}
+/* bottom stats strip (replaces ticker + floating badges) */
+.hv-stats {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-1);
+  flex-shrink: 0;
+}
+.hv-stat { padding: 8px 12px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
+.hv-stat:last-child { border-right: none; }
+.hv-k { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
+.hv-v { font-size: 11.5px; color: var(--fg-0); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hv-d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.hv-d-ok { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
+.hv-bar { display: block !important; width: 100%; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; padding: 0; }
+.hv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius: 3px; transition: width 1.2s ease-out; }
+/* Floating badges (deprecated, hidden) */
+.float-badge { display: none !important; }
+/* ===== Logo strip ===== */
+.logos {
+  padding: 20px 28px 60px;
+  position: relative; z-index: 1;
+}
+.logos .row {
+  display: flex; align-items: center; justify-content: center; gap: 60px;
+  flex-wrap: wrap;
+  color: var(--fg-2); font-size: 13px;
+  font-family: var(--font-mono);
+  opacity: 0.7;
+}
+.logos .row span { letter-spacing: 0.05em; }
+.logos .label {
+  text-align: center; font-family: var(--font-mono); font-size: 11px;
+  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.18em;
+  margin-bottom: 24px;
+}
+/* ===== Features grid ===== */
+.feature-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
+.feature-head h2 { margin-top: 16px; margin-bottom: 16px; }
+.feature-head p { color: var(--fg-2); font-size: 18px; margin: 0; }
+.features {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 16px;
+}
+.f-card {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250));
+  padding: 22px;
+  position: relative; overflow: hidden;
+  display: flex; flex-direction: column;
+  min-height: 320px;
+  transition: border-color 200ms, transform 300ms;
+}
+.f-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
+.f-card .label {
+  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
+  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px;
+  display: flex; align-items: center; gap: 6px;
+}
+.f-card .label .n { color: var(--accent); }
+.f-card h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -0.02em; }
+.f-card p { color: var(--fg-2); margin: 0 0 16px 0; font-size: 14px; }
+.f-card .canvas { flex: 1; position: relative; margin-top: auto; min-height: 130px; border-radius: 12px; overflow: hidden; background: oklch(0.16 0.008 250); border: 1px solid var(--border-subtle); }
+.f-wide-3 { grid-column: span 3; }
+.f-wide-4 { grid-column: span 4; }
+.f-wide-2 { grid-column: span 2; }
+/* feature canvases — Sparkline / orbit / stream / type */
+.spark-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.spark-svg .ln { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 600; stroke-dashoffset: 600; animation: dashIn 3.2s cubic-bezier(0.6,0.05,0.2,1) infinite; }
+.spark-svg .area { fill: url(#g-area); opacity: 0; animation: areaIn 3.2s cubic-bezier(0.6,0.05,0.2,1) infinite; }
+.spark-svg .pt { fill: var(--accent); }
+@keyframes dashIn { 0% { stroke-dashoffset: 600; } 60%,100% { stroke-dashoffset: 0; } }
+@keyframes areaIn { 0%,40% { opacity: 0; } 70%,100% { opacity: 1; } }
+/* orbit (collab) */
+.orbit { position: absolute; inset: 0; }
+.orbit .ring {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+  border: 1px dashed var(--border-strong); border-radius: 50%;
+}
+.orbit .ring.r1 { width: 90px; height: 90px; animation: spin 18s linear infinite; }
+.orbit .ring.r2 { width: 150px; height: 150px; animation: spin 30s linear infinite reverse; }
+.orbit .ring.r3 { width: 220px; height: 220px; animation: spin 50s linear infinite; }
+@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
+.orbit .core {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+  width: 36px; height: 36px; border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, var(--accent), var(--accent-dim));
+  box-shadow: 0 0 30px oklch(0.85 0.17 145 / 0.5);
+}
+.orbit .av {
+  position: absolute; width: 22px; height: 22px; border-radius: 50%;
+  background: linear-gradient(135deg, var(--violet), var(--cyan)); border: 2px solid var(--bg-1);
+  font-size: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
+}
+.orbit .av.a1 { left: 50%; top: 50%; transform: translate(-50%,-50%) translateX(45px); animation: orbita 18s linear infinite; }
+.orbit .av.a2 { left: 50%; top: 50%; background: linear-gradient(135deg, var(--rose), var(--amber)); transform: translate(-50%,-50%) translateX(75px); animation: orbita 30s linear infinite reverse; }
+.orbit .av.a3 { left: 50%; top: 50%; background: linear-gradient(135deg, var(--cyan), var(--accent)); transform: translate(-50%,-50%) translateX(110px); animation: orbita 50s linear infinite; }
+@keyframes orbita {
+  from { transform: translate(-50%,-50%) rotate(0deg) translateX(var(--r, 45px)) rotate(0deg); }
+  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--r, 45px)) rotate(-360deg); }
+}
+.orbit .av.a1 { --r: 45px; }
+.orbit .av.a2 { --r: 75px; }
+.orbit .av.a3 { --r: 110px; }
+/* terminal-typing card */
+.term { padding: 14px; height: 100%; font-family: var(--font-mono); font-size: 11px; color: var(--fg-1); display: flex; flex-direction: column; gap: 4px; }
+.term .l { white-space: nowrap; overflow: hidden; }
+.term .l .pr { color: var(--accent); }
+.term .l .key { color: var(--cyan); }
+.term .l .str { color: var(--amber); }
+.term .l .com { color: var(--fg-3); }
+.term .l.l1 { animation: typing 4s steps(40, end) infinite; }
+.term .blink { display: inline-block; width: 6px; height: 11px; background: var(--accent); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
+/* timeline canvas */
+.tl { position: absolute; inset: 12px; display: flex; flex-direction: column; gap: 6px; }
+.tl .row { display: flex; align-items: center; gap: 8px; height: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
+.tl .row .lab { width: 60px; }
+.tl .bar { height: 9px; border-radius: 3px; background: var(--accent-soft); position: relative; }
+.tl .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; animation: fill 4s ease-out infinite; }
+.tl .bar.b1 .fill { width: 0; animation-delay: 0s; }
+.tl .bar.b2 { background: oklch(0.30 0.07 300); }
+.tl .bar.b2 .fill { background: var(--violet); width: 0; animation-delay: 0.4s; }
+.tl .bar.b3 { background: oklch(0.30 0.06 75); }
+.tl .bar.b3 .fill { background: var(--amber); width: 0; animation-delay: 0.8s; }
+.tl .bar.b4 { background: oklch(0.30 0.07 220); }
+.tl .bar.b4 .fill { background: var(--cyan); width: 0; animation-delay: 1.2s; }
+@keyframes fill {
+  0% { width: 0; }
+  60%,100% { width: var(--w, 70%); }
+}
+.tl .bar.b1 .fill { --w: 80%; }
+.tl .bar.b2 .fill { --w: 55%; }
+.tl .bar.b3 .fill { --w: 70%; }
+.tl .bar.b4 .fill { --w: 30%; }
+.tl .marker { position: absolute; right: 16%; top: 0; bottom: 0; width: 1px; background: var(--accent); }
+.tl .marker::before { content: "today"; position: absolute; top: -14px; right: -16px; font-size: 9px; color: var(--accent); font-family: var(--font-mono); }
+/* AI inbox triage */
+.ai-stream { position: absolute; inset: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
+.ai-row {
+  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: oklch(0.20 0.009 250 / 0.7);
+  font-size: 10.5px;
+  animation: aiSlide 6s ease-in-out infinite;
+}
+.ai-row .av { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); flex-shrink: 0; }
+.ai-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-1); }
+.ai-row .tag { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); }
+.ai-row.r2 { animation-delay: 1s; }
+.ai-row.r3 { animation-delay: 2s; }
+.ai-row.r4 { animation-delay: 3s; }
+@keyframes aiSlide {
+  0% { opacity: 0; transform: translateX(-10px); }
+  10%,80% { opacity: 1; transform: translateX(0); }
+  100% { opacity: 0; transform: translateX(0); }
+}
+/* counter */
+.counter-canvas { display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; gap: 6px; }
+.counter-canvas .num { font-family: var(--font-editorial); font-size: 48px; line-height: 1; color: var(--fg-0); }
+.counter-canvas .num em { font-style: normal; color: var(--accent); }
+.counter-canvas .lab { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.16em; }
+/* ===== Big stage section ===== */
+.stage-section {
+  padding: 100px 28px 140px; position: relative; z-index: 1;
+}
+.stage-shell {
+  max-width: 1180px; margin: 0 auto;
+  border-radius: 24px;
+  border: 1px solid var(--border-strong);
+  background: linear-gradient(180deg, var(--bg-1), oklch(0.16 0.008 250));
+  overflow: hidden;
+  box-shadow: 0 60px 120px oklch(0 0 0 / 0.55);
+  position: relative;
+}
+.stage-tabs {
+  display: flex; gap: 4px; padding: 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-2);
+}
+.stage-tabs button {
+  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
+  color: var(--fg-2); transition: all 140ms;
+  border: 1px solid transparent;
+}
+.stage-tabs button:hover { color: var(--fg-0); background: var(--bg-3); }
+.stage-tabs button.on { background: var(--bg-0); color: var(--fg-0); border-color: var(--border); }
+.stage-content { aspect-ratio: 16 / 8; position: relative; }
+.stage-pane { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms; pointer-events: none; }
+.stage-pane.on { opacity: 1; pointer-events: auto; }
+/* Pane: gantt */
+.gantt { padding: 24px; height: 100%; display: flex; flex-direction: column; gap: 10px; }
+.gantt .head { display: grid; grid-template-columns: 180px 1fr; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em; }
+.gantt .head .weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
+.gantt .grow { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
+.g-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; font-size: 12px; }
+.g-row .nm { color: var(--fg-1); display: flex; align-items: center; gap: 8px; }
+.g-row .nm .d { width: 8px; height: 8px; border-radius: 2px; }
+.g-row .gtrack { position: relative; height: 22px; background: var(--bg-2); border-radius: 6px; }
+.g-row .gtrack .b { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15); }
+/* Pane: kanban big */
+.bk { padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: 100%; }
+.bk-col { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
+.bk-col h5 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-2); display: flex; align-items: center; gap: 6px; justify-content: space-between; }
+.bk-col h5 .ct { font-family: var(--font-mono); color: var(--fg-3); }
+.bk-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 9px; padding: 9px; font-size: 11.5px; display: flex; flex-direction: column; gap: 6px; cursor: grab; user-select: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, box-shadow .25s, border-color .25s; will-change: transform; position: relative; }
+.bk-card:hover { border-color: var(--fg-3); box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translateY(-1px); }
+.bk-card.is-dragging { cursor: grabbing; opacity: .92; transform: rotate(-2deg) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px var(--accent-soft); z-index: 50; pointer-events: none; }
+.bk-card.is-floating { position: fixed; z-index: 9999; pointer-events: none; transition: none; }
+.bk-card.just-landed { animation: cardPop .5s cubic-bezier(.2,.8,.2,1); }
+@keyframes cardPop { 0% { transform: scale(.92); box-shadow: 0 0 0 2px var(--accent); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
+.bk-col.is-drop-target { background: color-mix(in oklch, var(--accent) 8%, var(--bg-2)); border-color: var(--accent-soft); }
+.bk-col .drop-zone { min-height: 36px; border: 1.5px dashed var(--border); border-radius: 8px; transition: all .2s; opacity: 0; height: 0; padding: 0; margin: 0; pointer-events: none; }
+.bk-col.is-drop-target .drop-zone { opacity: 1; height: 32px; padding: 4px; border-color: var(--accent-soft); background: color-mix(in oklch, var(--accent) 6%, transparent); }
+.bk-card .id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
+.bk-card .t { color: var(--fg-0); font-weight: 500; line-height: 1.3; font-size: 12px; }
+.bk-card .ft { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
+.bk-card .pri { width: 6px; height: 6px; border-radius: 50%; }
+/* Pane: docs */
+.docs-pane { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
+.docs-side { border-right: 1px solid var(--border); padding: 16px 12px; background: var(--bg-2); overflow-y: auto; }
+.docs-side .gr { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 8px 6px; }
+.docs-side .item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; font-size: 12px; color: var(--fg-1); }
+.docs-side .item:hover, .docs-side .item.on { background: var(--bg-3); color: var(--fg-0); }
+.docs-side .item .di { width: 12px; height: 12px; opacity: 0.6; }
+.docs-body { padding: 32px 40px; overflow-y: auto; }
+.docs-body h3 { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 36px; letter-spacing: -0.02em; color: var(--fg-0); margin-bottom: 12px; }
+.docs-body .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.12em; }
+.docs-body p { color: var(--fg-1); margin: 0 0 14px; max-width: 60ch; line-height: 1.6; font-size: 13.5px; }
+.docs-body p .hl { background: oklch(0.30 0.07 75 / 0.4); padding: 0 3px; border-radius: 2px; }
+.docs-body .embed {
+  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
+  background: var(--bg-2); display: flex; gap: 12px; align-items: center;
+  font-size: 12px; color: var(--fg-1); margin: 18px 0;
+}
+.docs-body .embed .iv {
+  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
+  background: linear-gradient(135deg, var(--violet), var(--cyan));
+  display: inline-flex; align-items: center; justify-content: center;
+  color: white; font-weight: 600;
+}
+/* ===== Quote block ===== */
+.quote-section { padding: 80px 28px; position: relative; z-index: 1; }
+.quote {
+  max-width: 920px; margin: 0 auto; text-align: center;
+  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
+  font-size: clamp(28px, 3vw, 42px); line-height: 1.25; color: var(--fg-0);
+  letter-spacing: -0.02em;
+}
+.quote .who {
+  margin-top: 32px;
+  font-family: var(--font-ui); font-style: normal; font-weight: 500;
+  font-size: 13px; color: var(--fg-2); letter-spacing: 0;
+  display: flex; gap: 12px; align-items: center; justify-content: center;
+}
+.quote .who .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--amber)); }
+/* ===== Pricing ===== */
+.pricing-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
+.pricing-head h2 { margin: 16px 0; }
+.pricing-head p { color: var(--fg-2); font-size: 18px; margin: 0 0 24px; }
+.bill-toggle {
+  display: inline-flex; padding: 4px;
+  background: var(--bg-1); border: 1px solid var(--border);
+  border-radius: 999px;
+  position: relative;
+}
+.bill-toggle button {
+  padding: 8px 16px; font-size: 13px; font-weight: 500;
+  border-radius: 999px; color: var(--fg-2);
+  transition: color 200ms; position: relative; z-index: 2;
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.bill-toggle button.on { color: var(--accent-fg); }
+.bill-toggle button .save { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
+.bill-toggle button.on .save { background: oklch(1 0 0 / 0.15); color: var(--accent-fg); }
+.bill-toggle .pill {
+  position: absolute; top: 4px; left: 4px;
+  height: calc(100% - 8px);
+  background: var(--accent); border-radius: 999px;
+  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms;
+  z-index: 1;
+}
+.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+.tier {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250));
+  padding: 28px;
+  display: flex; flex-direction: column; gap: 18px;
+  transition: border-color 200ms, transform 300ms;
+  position: relative;
+  overflow: hidden;
+}
+.tier:hover { border-color: var(--border-strong); transform: translateY(-3px); }
+.tier.featured {
+  border-color: var(--accent);
+  background:
+    radial-gradient(60% 50% at 80% 0%, oklch(0.30 0.10 145 / 0.35), transparent 70%),
+    linear-gradient(180deg, oklch(0.22 0.012 250), oklch(0.18 0.008 250));
+  box-shadow: 0 30px 60px oklch(0.85 0.17 145 / 0.10);
+}
+.tier .badge {
+  position: absolute; top: 18px; right: 18px;
+  font-family: var(--font-mono); font-size: 10px;
+  padding: 3px 8px; border-radius: 999px;
+  background: var(--accent); color: var(--accent-fg);
+  text-transform: uppercase; letter-spacing: 0.1em;
+}
+.tier h3 { font-size: 18px; }
+.tier .desc { color: var(--fg-2); font-size: 13.5px; margin-top: 4px; min-height: 40px; }
+.tier .price-row { display: flex; align-items: baseline; gap: 6px; }
+.tier .price {
+  font-family: var(--font-editorial); font-style: normal; font-weight: 400;
+  font-size: 56px; line-height: 1; letter-spacing: -0.03em;
+}
+.tier .per { color: var(--fg-2); font-size: 12.5px; font-family: var(--font-mono); }
+.tier .feats { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
+.tier .feat { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--fg-1); line-height: 1.45; }
+.tier .feat .ck { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
+.tier .btn { width: 100%; justify-content: center; }
+/* ===== FAQ ===== */
+.faq { max-width: 820px; margin: 0 auto; }
+.faq-item {
+  border-bottom: 1px solid var(--border);
+  padding: 22px 4px;
+}
+.faq-q {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 17px; font-weight: 500; color: var(--fg-0);
+  width: 100%; text-align: left; gap: 16px;
+  letter-spacing: -0.01em;
+}
+.faq-q .pl {
+  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--font-mono); transition: transform 200ms, background 200ms;
+  flex-shrink: 0; color: var(--fg-2);
+}
+.faq-item.open .faq-q .pl { transform: rotate(45deg); background: var(--accent); color: var(--accent-fg); border-color: transparent; }
+.faq-a {
+  max-height: 0; overflow: hidden;
+  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.faq-item.open .faq-a { max-height: 280px; }
+.faq-a p { color: var(--fg-2); font-size: 14.5px; margin: 12px 0 0; max-width: 60ch; line-height: 1.6; }
+/* ===== CTA ===== */
+.cta-section { padding: 80px 28px 140px; position: relative; z-index: 1; }
+.cta-card {
+  max-width: var(--max); margin: 0 auto;
+  border-radius: 28px;
+  background:
+    radial-gradient(60% 80% at 50% 0%, oklch(0.30 0.12 145 / 0.4), transparent 70%),
+    linear-gradient(180deg, var(--bg-1), oklch(0.16 0.008 250));
+  border: 1px solid var(--border-strong);
+  padding: 80px 40px;
+  text-align: center;
+  position: relative; overflow: hidden;
+  box-shadow: 0 50px 120px oklch(0 0 0 / 0.5);
+}
+.cta-card::before {
+  content: ""; position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    linear-gradient(to right, oklch(0.30 0.012 250 / 0.4) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.30 0.012 250 / 0.4) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: radial-gradient(ellipse at 50% 100%, black 0%, transparent 70%);
+}
+.cta-card h2 { margin: 16px 0 14px; max-width: 740px; margin-left: auto; margin-right: auto; }
+.cta-card .lead { margin: 0 auto 32px; }
+.cta-card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; position: relative; z-index: 2; }
+/* ===== Footer ===== */
+footer.foot {
+  position: relative; z-index: 1;
+  border-top: 1px solid var(--border);
+  padding: 40px 28px 30px;
+  font-size: 13px; color: var(--fg-2);
+}
+.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
+.foot-grid h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0 0 12px; font-family: var(--font-mono); font-weight: 500; }
+.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.foot-grid a:hover { color: var(--fg-0); }
+.foot-bot { max-width: var(--max); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-3); flex-wrap: wrap; gap: 12px; }
+/* ===== Login modal ===== */
+.lg-overlay {
+  position: fixed; inset: 0; z-index: 200;
+  background: oklch(0 0 0 / 0.6);
+  backdrop-filter: blur(10px);
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+  opacity: 0; pointer-events: none;
+  transition: opacity 220ms;
+}
+.lg-overlay.open { opacity: 1; pointer-events: auto; }
+.lg-modal {
+  width: 440px; max-width: 100%;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  border-radius: 18px;
+  padding: 36px 32px;
+  box-shadow: 0 60px 120px oklch(0 0 0 / 0.6);
+  transform: translateY(12px) scale(0.98);
+  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  position: relative;
+}
+.lg-overlay.open .lg-modal { transform: translateY(0) scale(1); }
+.lg-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; }
+.lg-x:hover { background: var(--bg-2); color: var(--fg-0); }
+.lg-modal h3 { font-size: 22px; margin-bottom: 4px; letter-spacing: -0.02em; }
+.lg-modal p.sub { color: var(--fg-2); font-size: 13.5px; margin: 0 0 22px; }
+.lg-field { margin-bottom: 12px; }
+.lg-field label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 6px; font-family: var(--font-mono); }
+.lg-field input {
+  width: 100%; padding: 10px 12px; font-size: 14px;
+  background: var(--bg-1); border: 1px solid var(--border);
+  border-radius: 9px; color: var(--fg-0); outline: none;
+  transition: border-color 140ms;
+  font-family: inherit;
+}
+.lg-field input:focus { border-color: var(--accent); }
+.lg-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; margin-bottom: 16px; font-size: 12.5px; color: var(--fg-2); }
+.lg-row a { color: var(--accent); }
+.lg-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
+.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
+.lg-sso { display: flex; flex-direction: column; gap: 8px; }
+.lg-sso .btn { justify-content: center; }
+.lg-foot { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--fg-2); }
+.lg-foot a { color: var(--accent); }
+/* Reveal */
+.rv { opacity: 0; transform: translateY(20px); transition: opacity 700ms, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
+.rv.in { opacity: 1; transform: translateY(0); }
+/* === Scroll progress bar === */
+.scroll-prog {
+  position: fixed; top: 0; left: 0; height: 2px; width: 0;
+  background: linear-gradient(90deg, var(--accent), var(--violet));
+  box-shadow: 0 0 10px var(--accent);
+  z-index: 200; transition: width 80ms linear;
+}
+/* === Hero floating particles === */
+.particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
+.particles span {
+  position: absolute; bottom: -20px; width: 3px; height: 3px;
+  border-radius: 50%; background: var(--accent);
+  box-shadow: 0 0 6px var(--accent);
+  opacity: 0;
+  animation: rise linear infinite;
+}
+.particles span:nth-child(1) { left: 8%;  animation-duration: 14s; animation-delay: 0s; }
+.particles span:nth-child(2) { left: 18%; animation-duration: 18s; animation-delay: 2s; background: var(--violet); box-shadow: 0 0 6px var(--violet); }
+.particles span:nth-child(3) { left: 28%; animation-duration: 22s; animation-delay: 4s; }
+.particles span:nth-child(4) { left: 42%; animation-duration: 16s; animation-delay: 1s; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
+.particles span:nth-child(5) { left: 56%; animation-duration: 20s; animation-delay: 3s; }
+.particles span:nth-child(6) { left: 68%; animation-duration: 24s; animation-delay: 5s; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
+.particles span:nth-child(7) { left: 82%; animation-duration: 17s; animation-delay: 0.5s; }
+.particles span:nth-child(8) { left: 92%; animation-duration: 19s; animation-delay: 2.5s; background: var(--rose); box-shadow: 0 0 6px var(--rose); }
+@keyframes rise {
+  0%   { transform: translateY(0) translateX(0); opacity: 0; }
+  10%  { opacity: 1; }
+  100% { transform: translateY(-110vh) translateX(60px); opacity: 0; }
+}
+/* === Mouse spotlight === */
+.spotlight {
+  position: fixed; pointer-events: none; z-index: 1;
+  width: 600px; height: 600px; border-radius: 50%;
+  background: radial-gradient(circle, oklch(0.85 0.17 145 / 0.10), transparent 60%);
+  transform: translate(-50%, -50%);
+  transition: opacity 300ms;
+  mix-blend-mode: screen;
+}
+/* === Magnetic CTA glow === */
+.btn.primary { position: relative; overflow: hidden; }
+.btn.primary::after {
+  content: ""; position: absolute; inset: 0;
+  background: linear-gradient(120deg, transparent 30%, oklch(1 0 0 / 0.35) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.btn.primary:hover::after { transform: translateX(100%); }
+/* === Logos marquee === */
+.logos-marquee {
+  overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
+  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
+}
+.logos-marquee .track {
+  display: inline-flex; gap: 80px; align-items: center;
+  animation: marquee 32s linear infinite;
+  white-space: nowrap;
+  padding-right: 80px;
+}
+.logos-marquee .track span { color: var(--fg-2); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.05em; opacity: 0.7; transition: opacity 300ms, color 300ms; }
+.logos-marquee .track span:hover { opacity: 1; color: var(--fg-0); }
+@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+/* === Hero h1 letter rise === */
+.hero h1 .ww { display: inline-block; }
+.hero h1 .ww > span {
+  display: inline-block;
+  opacity: 0; transform: translateY(20px) rotateX(-30deg);
+  animation: rise-letter 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+@keyframes rise-letter { to { opacity: 1; transform: translateY(0) rotateX(0); } }
+/* === Big number counters === */
+.stats-strip {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
+  border: 1px solid var(--border); border-radius: 18px;
+  background: linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250));
+  overflow: hidden;
+}
+.stats-strip .st { padding: 28px 24px; border-right: 1px solid var(--border-subtle); position: relative; }
+.stats-strip .st:last-child { border-right: none; }
+.stats-strip .st .num {
+  font-family: var(--font-editorial); font-style: normal; font-weight: 400;
+  font-size: 52px; line-height: 1; letter-spacing: -0.03em;
+  color: var(--fg-0);
+}
+.stats-strip .st .num em { color: var(--accent); font-style: normal; }
+.stats-strip .st .lab { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 8px; }
+.stats-strip .st .sub { font-size: 12.5px; color: var(--fg-2); margin-top: 4px; }
+@media (max-width: 900px) {
+  .stats-strip { grid-template-columns: repeat(2, 1fr); }
+  .stats-strip .st:nth-child(2) { border-right: none; }
+  .stats-strip .st:nth-child(1), .stats-strip .st:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
+}
+/* === Glow pulse around hero card === */
+.hero-video::before {
+  content: ""; position: absolute; inset: -2px; border-radius: 19px;
+  background: conic-gradient(from 0deg, transparent 0%, var(--accent) 25%, transparent 50%, var(--violet) 75%, transparent 100%);
+  opacity: 0.4; z-index: -1;
+  animation: spin 8s linear infinite;
+  filter: blur(8px);
+}
+/* Responsive */
+@media (max-width: 980px) {
+  .hero-grid { grid-template-columns: 1fr; }
+  .hero-video { transform: none; aspect-ratio: 16/10; }
+  .hero-video:hover { transform: none; }
+  .features { grid-template-columns: repeat(2, 1fr); }
+  .f-wide-3, .f-wide-4 { grid-column: span 2; }
+  .tiers { grid-template-columns: 1fr; }
+  .foot-grid { grid-template-columns: 1fr 1fr; }
+  .float-badge { display: none; }
+  .nav-links { display: none; }
+  .stage-content { aspect-ratio: 16/12; }
+  .docs-pane { grid-template-columns: 1fr; }
+  .docs-side { display: none; }
+}
+@media (max-width: 600px) {
+  .features { grid-template-columns: 1fr; }
+  .f-wide-3, .f-wide-4 { grid-column: span 1; }
+  .foot-grid { grid-template-columns: 1fr; }
+  .section { padding: 80px 20px; }
+  .nav { padding: 12px 16px; }
+  .bk { grid-template-columns: repeat(2, 1fr); }
+}

landing.html ADDED Viewed

	@@ -0,0 +1,1147 @@

+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Meridian — Where work finds its rhythm</title>
+  <meta name="description" content="Meridian es el sistema operativo del equipo: issues, sprints, docs y roadmap en una sola pieza." />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="landing.css" />
+  <script>
+    (function() {
+      try {
+        const saved = JSON.parse(localStorage.getItem('meridian-settings'));
+        if (saved) {
+          const ACCENT_MAP = {
+            lime:   { c: "oklch(0.85 0.17 145)", dim: "oklch(0.40 0.10 145)", soft: "oklch(0.30 0.06 145)", fg: "oklch(0.20 0.05 145)" },
+            cyan:   { c: "oklch(0.78 0.13 220)", dim: "oklch(0.40 0.09 220)", soft: "oklch(0.30 0.06 220)", fg: "oklch(0.18 0.04 220)" },
+            violet: { c: "oklch(0.72 0.18 300)", dim: "oklch(0.40 0.10 300)", soft: "oklch(0.30 0.07 300)", fg: "oklch(0.98 0.03 300)" },
+            amber:  { c: "oklch(0.80 0.14 75)",  dim: "oklch(0.44 0.09 75)",  soft: "oklch(0.30 0.06 75)",  fg: "oklch(0.20 0.04 75)" },
+            rose:   { c: "oklch(0.72 0.17 20)",  dim: "oklch(0.40 0.10 20)",  soft: "oklch(0.30 0.07 20)",  fg: "oklch(0.98 0.03 20)" },
+          };
+          if (saved.theme) document.documentElement.dataset.theme = saved.theme;
+          if (saved.density) document.documentElement.dataset.density = saved.density;
+          const a = ACCENT_MAP[saved.accent] || ACCENT_MAP.lime;
+          document.documentElement.style.setProperty('--accent', a.c);
+          document.documentElement.style.setProperty('--accent-dim', a.dim);
+          document.documentElement.style.setProperty('--accent-soft', a.soft);
+          document.documentElement.style.setProperty('--accent-fg', a.fg);
+        }
+      } catch (e) {}
+    })();
+  </script>
+</head>
+<body>
+  <div class="scroll-prog" id="scroll-prog"></div>
+  <div class="bg-field"></div>
+  <div class="bg-grid"></div>
+  <div class="bg-noise"></div>
+  <div class="spotlight" id="spotlight"></div>
+  <div class="particles">
+    <span></span><span></span><span></span><span></span>
+    <span></span><span></span><span></span><span></span>
+  </div>
+  <!-- ========= NAV ========= -->
+  <nav class="nav">
+    <a class="brand" href="#">
+      <span class="logo"></span>
+      <span class="name">Meridian</span>
+      <span class="ws">/ aurora</span>
+    </a>
+    <div class="nav-links">
+      <a href="#features">Product</a>
+      <a href="#stage">Demo</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#faq">FAQ</a>
+      <a href="#" id="changelog-link">Changelog</a>
+    </div>
+    <div class="nav-actions">
+      <button class="btn ghost" id="open-login">Log in</button>
+      <button class="btn primary" id="open-signup">Start for free →</button>
+    </div>
+  </nav>
+  <!-- ========= HERO ========= -->
+  <section class="section hero">
+    <div class="wrap hero-grid">
+      <div>
+        <div class="badge-row rv">
+          <span class="eyebrow"><span class="dot"></span>v3.4 — Vector AI triage</span>
+          <span class="eyebrow mono">amd hackaton at lablab.ai</span>
+        </div>
+        <h1 class="rv">
+          <span class="ww">Where</span><br/>
+          <span class="ww">work</span><br/>
+          <span class="ww">finds its </span><span class="word-shimmer">rhythm</span><span class="cursor"></span>
+        </h1>
+        <p class="lead rv">
+          Issues, sprints, docs, roadmap y PRs en una sola pieza, hecha a la
+          velocity del teclado. Sin tabs perdidos. Sin standups eternos.
+        </p>
+        <div class="hero-cta rv">
+          <button class="btn primary lg" id="cta-hero">Start for free</button>
+          <button class="btn lg" id="cta-demo">
+            See live demo
+            <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rose); box-shadow:0 0 8px var(--rose); animation: pulse 1.4s infinite"></span>
+          </button>
+        </div>
+        <div class="hero-meta rv">
+          <span class="d"><span class="ind"></span>14.231 equipos activos</span>
+          <span class="d mono">SOC 2 · ISO 27001</span>
+          <span class="d mono">99.99% uptime</span>
+        </div>
+      </div>
+      <!-- Hero "video" -->
+      <div class="hero-video rv" aria-label="Demo en vivo de Meridian">
+        <div class="hv-chrome">
+          <span class="dot" style="background: var(--rose)"></span>
+          <span class="dot" style="background: var(--amber)"></span>
+          <span class="dot" style="background: var(--accent)"></span>
+          <span class="url">meridian.app/aurora/sprint-22</span>
+        </div>
+        <div class="hv-stage">
+          <!-- toolbar fake -->
+          <div class="hv-toolbar">
+            <div class="hv-tabs">
+              <span class="on">Board</span>
+              <span>List</span>
+              <span>Timeline</span>
+            </div>
+            <div class="hv-presence">
+              <span class="pa pa-1">JL</span>
+              <span class="pa pa-2">MK</span>
+              <span class="pa pa-3">RT</span>
+              <span class="pn"><span class="pn-d"></span>3 en línea</span>
+            </div>
+          </div>
+          <div class="kanban">
+            <div class="kcol todo" data-col="todo">
+              <h5><span class="sd"></span>Backlog<span class="ct">3</span></h5>
+              <div class="kcard"><span class="id">AUR-411</span><span class="title">Onboarding: empty state</span><span class="meta"><span class="av"></span>JL · <span class="tag">design</span></span></div>
+              <div class="kcard"><span class="id">AUR-413</span><span class="title">Sentry tracing webhooks</span><span class="meta"><span class="av" style="background: linear-gradient(135deg, var(--rose), var(--amber))"></span>MK · <span class="tag">infra</span></span></div>
+              <div class="kcard"><span class="id">AUR-419</span><span class="title">Bulk re-prioritize</span><span class="meta"><span class="av" style="background: linear-gradient(135deg, var(--cyan), var(--accent))"></span>SP</span></div>
+            </div>
+            <div class="kcol prog" data-col="prog">
+              <h5><span class="sd"></span>In progress<span class="ct">2</span></h5>
+              <div class="kcard k-target"><span class="id">AUR-412</span><span class="title">Realtime cursors</span><span class="meta"><span class="av"></span>JL · <span class="tag">edit</span></span></div>
+              <div class="kcard"><span class="id">AUR-407</span><span class="title">Vector triage digest</span><span class="meta"><span class="av" style="background: linear-gradient(135deg, var(--rose), var(--amber))"></span>RT · <span class="tag">ml</span></span></div>
+            </div>
+            <div class="kcol done" data-col="done">
+              <h5><span class="sd"></span>Shipped<span class="ct">2</span></h5>
+              <div class="kcard"><span class="id">AUR-401</span><span class="title">Cmd-K fuzzy search</span><span class="meta"><span class="av"></span>RT · <span class="tag">ship</span></span></div>
+              <div class="kcard"><span class="id">AUR-403</span><span class="title">Relative dates</span><span class="meta"><span class="av" style="background: linear-gradient(135deg, var(--cyan), var(--violet))"></span>JL</span></div>
+            </div>
+          </div>
+          <!-- single moving card (the "live" demo) -->
+          <div class="kcard moving" id="moving-card">
+            <span class="id">AUR-405</span>
+            <span class="title">Embed Figma en docs</span>
+            <span class="meta"><span class="av" style="background: linear-gradient(135deg, var(--violet), var(--cyan))"></span>julia · <span class="tag">ship</span></span>
+          </div>
+          <!-- cursor that "drags" the card -->
+          <div class="cursor-fly">
+            <svg viewBox="0 0 16 16">
+              <path d="M2 2 L13 7 L8 8.5 L7 14 Z" fill="oklch(0.85 0.17 145)" stroke="oklch(0.20 0.05 145)" stroke-width="1"/>
+            </svg>
+            <span class="label">julia</span>
+          </div>
+          <!-- bottom live stats -->
+          <div class="hv-stats">
+            <div class="hv-stat"><span class="hv-k">Cycle</span><span class="hv-v">3.2d</span></div>
+            <div class="hv-stat"><span class="hv-k">Burn</span><span class="hv-v hv-bar"><i style="width:64%"></i></span></div>
+            <div class="hv-stat"><span class="hv-k">Build</span><span class="hv-v"><span class="hv-d hv-d-ok"></span>passed · 1m 04s</span></div>
+            <div class="hv-stat"><span class="hv-k">PR</span><span class="hv-v">#882 merged</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= LOGOS ========= -->
+  <section class="logos">
+    <div class="wrap">
+      <div class="label">Construido con equipos en</div>
+      <div class="logos-marquee">
+        <div class="track">
+          <span>◌ ARCWAVE</span>
+          <span>HELIOS·CO</span>
+          <span>FRAME / SHIFT</span>
+          <span>NORTH BUREAU</span>
+          <span>nimbus<sup>×</sup></span>
+          <span>—— ECHO LABS</span>
+          <span>VANGUARD&nbsp;OPS</span>
+          <span>◇ KINETIC</span>
+          <span>POLARIS&nbsp;/CO</span>
+          <span>※ SUBSTRATE</span>
+          <span>◌ ARCWAVE</span>
+          <span>HELIOS·CO</span>
+          <span>FRAME / SHIFT</span>
+          <span>NORTH BUREAU</span>
+          <span>nimbus<sup>×</sup></span>
+          <span>—— ECHO LABS</span>
+          <span>VANGUARD&nbsp;OPS</span>
+          <span>◇ KINETIC</span>
+          <span>POLARIS&nbsp;/CO</span>
+          <span>※ SUBSTRATE</span>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= STATS STRIP ========= -->
+  <section class="section" style="padding-top:40px; padding-bottom:40px">
+    <div class="wrap">
+      <div class="stats-strip rv">
+        <div class="st">
+          <div class="num"><em data-stat="14231">0</em></div>
+          <div class="lab">Active teams</div>
+          <div class="sub">+18% this quarter</div>
+        </div>
+        <div class="st">
+          <div class="num"><em data-stat="3.2" data-decimals="1">0.0</em><span style="font-size:28px;color:var(--fg-2)">d</span></div>
+          <div class="lab">Cycle time medio</div>
+          <div class="sub">vs 5.7d en herramientas tradicionales</div>
+        </div>
+        <div class="st">
+          <div class="num"><em data-stat="42">0</em><span style="font-size:28px;color:var(--fg-2)">ms</span></div>
+          <div class="lab">Latencia p50</div>
+          <div class="sub">acción → render</div>
+        </div>
+        <div class="st">
+          <div class="num"><em data-stat="99.99" data-decimals="2">0</em><span style="font-size:28px;color:var(--fg-2)">%</span></div>
+          <div class="lab">Uptime SLA</div>
+          <div class="sub">últimos 12 meses</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= FEATURES ========= -->
+  <section class="section" id="features">
+    <div class="wrap">
+      <div class="feature-head rv">
+        <span class="eyebrow"><span class="dot"></span>The product</span>
+        <h2>One tool. <span class="editorial">Zero friction.</span></h2>
+        <p>Cada pieza de Meridian está pensada para que el work se mueva sin que tengas que recordarlo.</p>
+      </div>
+      <div class="features rv">
+        <!-- Velocity -->
+        <div class="f-card f-wide-3">
+          <div class="label"><span class="n">01</span> · velocity</div>
+          <h3>Shortcuts everywhere. Mouse optional.</h3>
+          <p>Cmd-K abre la paleta. C crea issue. G+S va a sprints. Aprendés en una tarde, no lo soltás más.</p>
+          <div class="canvas" style="display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:18px">
+            <span class="kbd" style="font-size:12px;padding:6px 10px">⌘K</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">C</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">G</span><span style="color:var(--fg-3)">+</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">S</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">⌘ ↵</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">/</span>
+            <span class="kbd" style="font-size:12px;padding:6px 10px">⇧?</span>
+            <div style="flex-basis: 100%; height: 0"></div>
+            <div class="term" style="background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:10px 12px;width:100%;max-width:340px;margin-top:10px">
+              <div class="l mono"><span class="pr">›</span> &nbsp;assign aur-412 julia<span class="blink"></span></div>
+            </div>
+          </div>
+        </div>
+        <!-- AI triage -->
+        <div class="f-card f-wide-3">
+          <div class="label"><span class="n">02</span> · vector ai</div>
+          <h3>Triage automático con embeddings.</h3>
+          <p>Tu inbox se ordena solo: duplicados, prioridad, owner sugerido. Vos solo confirmás.</p>
+          <div class="canvas">
+            <div class="ai-stream">
+              <div class="ai-row">
+                <span class="av"></span>
+                <span class="t">"Login no funciona en Safari iOS 17"</span>
+                <span class="tag">→ AUR-402 dup</span>
+              </div>
+              <div class="ai-row r2">
+                <span class="av" style="background:linear-gradient(135deg,var(--rose),var(--amber))"></span>
+                <span class="t">"Notif push se pierden"</span>
+                <span class="tag">→ infra · alta</span>
+              </div>
+              <div class="ai-row r3">
+                <span class="av" style="background:linear-gradient(135deg,var(--cyan),var(--violet))"></span>
+                <span class="t">"¿Cómo invito a un externo?"</span>
+                <span class="tag">→ docs/sharing</span>
+              </div>
+              <div class="ai-row r4">
+                <span class="av"></span>
+                <span class="t">"Roadmap de Q2 disponible?"</span>
+                <span class="tag">→ raúl</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Realtime collab -->
+        <div class="f-card f-wide-2">
+          <div class="label"><span class="n">03</span> · collaboration</div>
+          <h3>Realtime, no saving.</h3>
+          <p>Los cursores, las decisiones y los cambios se mueven con el equipo.</p>
+          <div class="canvas">
+            <div class="orbit">
+              <div class="ring r1"></div>
+              <div class="ring r2"></div>
+              <div class="ring r3"></div>
+              <div class="core"></div>
+              <div class="av a1">JL</div>
+              <div class="av a2">MK</div>
+              <div class="av a3">RT</div>
+            </div>
+          </div>
+        </div>
+        <!-- Velocity counter -->
+        <div class="f-card f-wide-2">
+          <div class="label"><span class="n">04</span> · numbers</div>
+          <h3>Measured velocity.</h3>
+          <p>Cycle time, throughput y burn — actualizados en vivo.</p>
+          <div class="canvas">
+            <div class="counter-canvas">
+              <div class="num"><em data-count="3.2">0.0</em>d</div>
+              <div class="lab">cycle time medio</div>
+            </div>
+          </div>
+        </div>
+        <!-- Roadmap -->
+        <div class="f-card f-wide-2">
+          <div class="label"><span class="n">05</span> · roadmap</div>
+          <h3>Quarters, no fantasy.</h3>
+          <p>Iniciativas con dependencias y riesgo, en una sola línea.</p>
+          <div class="canvas">
+            <div class="tl">
+              <div class="row"><span class="lab">Auth v2</span><div class="bar b1"><div class="fill"></div></div></div>
+              <div class="row"><span class="lab">Vector AI</span><div class="bar b2"><div class="fill"></div></div></div>
+              <div class="row"><span class="lab">Docs sync</span><div class="bar b3"><div class="fill"></div></div></div>
+              <div class="row"><span class="lab">SAML SSO</span><div class="bar b4"><div class="fill"></div></div></div>
+            </div>
+          </div>
+        </div>
+        <!-- Velocity full -->
+        <div class="f-card f-wide-3">
+          <div class="label"><span class="n">06</span> · analysis</div>
+          <h3>Trend that is understood without charts.</h3>
+          <p>Burndown semanal con anotaciones, no dashboards huérfanos.</p>
+          <div class="canvas">
+            <svg class="spark-svg" viewBox="0 0 600 160" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="g-area" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" stop-color="oklch(0.85 0.17 145)" stop-opacity="0.45"/>
+                  <stop offset="100%" stop-color="oklch(0.85 0.17 145)" stop-opacity="0"/>
+                </linearGradient>
+              </defs>
+              <path class="area" d="M0,140 L0,110 C 60,100 90,60 150,70 S 240,120 300,90 S 420,40 480,55 S 580,30 600,20 L600,160 L0,160 Z"/>
+              <path class="ln"   d="M0,110 C 60,100 90,60 150,70 S 240,120 300,90 S 420,40 480,55 S 580,30 600,20"/>
+              <circle class="pt" cx="600" cy="20" r="4"/>
+            </svg>
+          </div>
+        </div>
+        <!-- Editor -->
+        <div class="f-card f-wide-3">
+          <div class="label"><span class="n">07</span> · docs</div>
+          <h3>Notion for humans, Markdown for machines.</h3>
+          <p>Documentos que viven al lado del código, con embeds y backlinks de issues.</p>
+          <div class="canvas" style="padding:14px;font-family:var(--font-editorial);font-style:italic;font-size:24px;line-height:1.3;letter-spacing:-0.02em;color:var(--fg-1)">
+            "El feedback negativo se dispara cuando el cycle time supera 4 días"
+            <div style="font-family:var(--font-mono);font-style:normal;font-size:10.5px;color:var(--fg-3);text-transform:uppercase;letter-spacing:0.12em;margin-top:14px">— retro · sprint 21</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= STAGE (interactive demo) ========= -->
+  <section class="section stage-section" id="stage">
+    <div class="wrap">
+      <div class="feature-head rv">
+        <span class="eyebrow"><span class="dot"></span>Interactive tour</span>
+        <h2>See Meridian <span class="editorial">from the inside</span>.</h2>
+        <p>Cambiá de vista. Como en la app real.</p>
+      </div>
+      <div class="stage-shell rv">
+        <div class="stage-tabs" role="tablist">
+          <button data-tab="kanban" class="on">Sprint board</button>
+          <button data-tab="gantt">Roadmap</button>
+          <button data-tab="docs">Docs</button>
+        </div>
+        <div class="stage-content">
+          <!-- Kanban pane -->
+          <div class="stage-pane on" data-pane="kanban">
+            <div class="bk">
+              <div class="bk-col" data-col="backlog">
+                <h5>Backlog <span class="ct">12</span></h5>
+                <div class="drop-zone"></div>
+                <div class="bk-card" data-id="AUR-419"><span class="id">AUR-419</span><span class="t">Bulk re-prioritize</span><span class="ft"><span class="pri" style="background:var(--fg-3)"></span>P3 · SP</span></div>
+                <div class="bk-card" data-id="AUR-422"><span class="id">AUR-422</span><span class="t">CSV export en issues</span><span class="ft"><span class="pri" style="background:var(--amber)"></span>P2 · MK</span></div>
+                <div class="bk-card" data-id="AUR-424"><span class="id">AUR-424</span><span class="t">Filtro por label combinado</span><span class="ft"><span class="pri" style="background:var(--fg-3)"></span>P3 · —</span></div>
+              </div>
+              <div class="bk-col" data-col="todo">
+                <h5>Todo <span class="ct">7</span></h5>
+                <div class="drop-zone"></div>
+                <div class="bk-card" data-id="AUR-409"><span class="id">AUR-409</span><span class="t">Auth: rotación de tokens</span><span class="ft"><span class="pri" style="background:var(--rose)"></span>P0 · NM</span></div>
+                <div class="bk-card" data-id="AUR-410"><span class="id">AUR-410</span><span class="t">Sprint board: keyboard reorder</span><span class="ft"><span class="pri" style="background:var(--amber)"></span>P2 · EH</span></div>
+                <div class="bk-card" data-id="AUR-411"><span class="id">AUR-411</span><span class="t">Empty state en proyecto nuevo</span><span class="ft"><span class="pri" style="background:var(--fg-3)"></span>P3 · JL</span></div>
+              </div>
+              <div class="bk-col" data-col="progress">
+                <h5>In progress <span class="ct">4</span></h5>
+                <div class="drop-zone"></div>
+                <div class="bk-card" data-id="AUR-407"><span class="id">AUR-407</span><span class="t">Vector triage: digest semanal</span><span class="ft"><span class="pri" style="background:var(--rose)"></span>P0 · RT</span></div>
+                <div class="bk-card" data-id="AUR-408"><span class="id">AUR-408</span><span class="t">A11y: drag handle del board</span><span class="ft"><span class="pri" style="background:var(--amber)"></span>P2 · EH</span></div>
+              </div>
+              <div class="bk-col" data-col="shipped">
+                <h5>Shipped <span class="ct">23</span></h5>
+                <div class="drop-zone"></div>
+                <div class="bk-card" data-id="AUR-401"><span class="id">AUR-401</span><span class="t">Cmd-K · fuzzy en body</span><span class="ft"><span class="pri" style="background:var(--accent)"></span>done · RT</span></div>
+                <div class="bk-card" data-id="AUR-403"><span class="id">AUR-403</span><span class="t">Fechas relativas en todo</span><span class="ft"><span class="pri" style="background:var(--accent)"></span>done · JL</span></div>
+                <div class="bk-card" data-id="AUR-405"><span class="id">AUR-405</span><span class="t">Embed de Figma en docs</span><span class="ft"><span class="pri" style="background:var(--accent)"></span>done · MK</span></div>
+              </div>
+            </div>
+          </div>
+          <!-- Gantt pane -->
+          <div class="stage-pane" data-pane="gantt">
+            <div class="gantt">
+              <div class="head">
+                <span>Iniciativa</span>
+                <div class="weeks">
+                  <span>W23</span><span>W24</span><span>W25</span><span>W26</span><span>W27</span><span>W28</span><span>W29</span><span>W30</span>
+                </div>
+              </div>
+              <div class="grow">
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--accent)"></span>Auth v2 · rotación</span>
+                  <div class="gtrack"><div class="b" style="left:5%;width:30%;background:var(--accent)"></div></div>
+                </div>
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--violet)"></span>Vector AI · embeddings</span>
+                  <div class="gtrack"><div class="b" style="left:18%;width:42%;background:var(--violet)"></div></div>
+                </div>
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--amber)"></span>Docs sync (Notion-like)</span>
+                  <div class="gtrack"><div class="b" style="left:30%;width:38%;background:var(--amber)"></div></div>
+                </div>
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--cyan)"></span>SAML / SSO Enterprise</span>
+                  <div class="gtrack"><div class="b" style="left:55%;width:28%;background:var(--cyan)"></div></div>
+                </div>
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--rose)"></span>Mobile · PWA offline</span>
+                  <div class="gtrack"><div class="b" style="left:65%;width:30%;background:var(--rose)"></div></div>
+                </div>
+                <div class="g-row">
+                  <span class="nm"><span class="d" style="background:var(--fg-2)"></span>API v2 público</span>
+                  <div class="gtrack"><div class="b" style="left:80%;width:18%;background:var(--fg-2)"></div></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Docs pane -->
+          <div class="stage-pane" data-pane="docs">
+            <div class="docs-pane">
+              <div class="docs-side">
+                <div class="gr">Aurora</div>
+                <div class="item"><svg class="di" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Plan trimestral</div>
+                <div class="item on"><svg class="di" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Retro sprint 21</div>
+                <div class="item"><svg class="di" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Decisión: vector store</div>
+                <div class="gr">Engineering</div>
+                <div class="item"><svg class="di" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Postmortem · cache</div>
+                <div class="item"><svg class="di" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>RFC · auth rotation</div>
+              </div>
+              <div class="docs-body">
+                <div class="meta">retro · sprint 21 · 4 jun</div>
+                <h3>Lo que aprendimos del último ciclo</h3>
+                <p>Cerramos sprint 21 con un <span class="hl">cycle time de 3.2 días</span> — una mejora de 18% sobre el anterior. La hipótesis: el triage automático con vector AI nos sacó la fricción del lunes.</p>
+                <p>El feedback negativo se dispara cuando el cycle time supera 4 días. Mantenerlo abajo de eso es probablemente el indicador más correlacionado con NPS interno.</p>
+                <div class="embed">
+                  <span class="iv">📊</span>
+                  <div>
+                    <div style="font-weight:500;color:var(--fg-0)">Burndown · Sprint 21</div>
+                    <div style="font-size:11px;color:var(--fg-3);font-family:var(--font-mono);margin-top:2px">embed · meridian/charts</div>
+                  </div>
+                </div>
+                <p>Próximo paso: medir si el digest semanal del viernes mantiene la inercia o la rompe en transición de fin de semana.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= QUOTE ========= -->
+  <section class="quote-section">
+    <div class="wrap">
+      <p class="quote rv">
+        "Probamos cinco herramientas en seis meses. Meridian fue la primera que el equipo
+        <span style="color:var(--accent);font-style:normal;font-weight:500">no quiso reemplazar</span>.
+        Las cosas se mueven."
+        <span class="who">
+          <span class="av"></span>
+          Lucía Bermúdez · Head of Eng, Helios·co
+        </span>
+      </p>
+    </div>
+  </section>
+  <!-- ========= PRICING ========= -->
+  <section class="section" id="pricing">
+    <div class="wrap">
+      <div class="pricing-head rv">
+        <span class="eyebrow"><span class="dot"></span>Pricing</span>
+        <h2>You pay for what you use. <span class="editorial">Nothing more.</span></h2>
+        <p>Empezá gratis. Crecé sin sorpresas. Cancelá con un click.</p>
+        <div class="bill-toggle" id="bill-toggle" role="tablist">
+          <span class="pill" id="bill-pill"></span>
+          <button class="on" data-bill="month">Monthly</button>
+          <button data-bill="year">Yearly <span class="save">-20%</span></button>
+        </div>
+      </div>
+      <div class="tiers rv">
+        <!-- Free -->
+        <div class="tier">
+          <div>
+            <h3>Solo</h3>
+            <div class="desc">For a person or a side project.</div>
+          </div>
+          <div class="price-row">
+            <span class="price">$0</span>
+            <span class="per">per user / month</span>
+          </div>
+          <div class="feats">
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>1 workspace · hasta 3 usuarios</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Issues, sprints y docs ilimitados</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Cmd-K, atajos, shortcuts</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>API y CLI básicos</div>
+          </div>
+          <button class="btn login-trigger">Start for free</button>
+        </div>
+        <!-- Team featured -->
+        <div class="tier featured">
+          <span class="badge">popular</span>
+          <div>
+            <h3>Team</h3>
+            <div class="desc">Para equipos que envían cosas todas las semanas.</div>
+          </div>
+          <div class="price-row">
+            <span class="price" data-month="$12" data-year="$10">$12</span>
+            <span class="per">per user / month</span>
+          </div>
+          <div class="feats">
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Unlimited workspaces</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Vector AI triage incluido</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Roadmap, métricas y burndown</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>GitHub, Slack, Linear sync</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Soporte priority — &lt; 4h</div>
+          </div>
+          <button class="btn primary login-trigger">Try 14 days free</button>
+        </div>
+        <!-- Enterprise -->
+        <div class="tier">
+          <div>
+            <h3>Enterprise</h3>
+            <div class="desc">Para organizaciones con cumplimiento serio.</div>
+          </div>
+          <div class="price-row">
+            <span class="price" style="font-size:38px">A medida</span>
+          </div>
+          <div class="feats">
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>SSO/SAML, SCIM, audit log</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>SOC 2 type II, ISO 27001</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>Despliegue en tu nube (BYOC)</div>
+            <div class="feat"><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>SLA 99.99% · soporte dedicado</div>
+          </div>
+          <button class="btn">Talk to sales</button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= FAQ ========= -->
+  <section class="section" id="faq">
+    <div class="wrap">
+      <div class="feature-head rv">
+        <span class="eyebrow"><span class="dot"></span>FAQ</span>
+        <h2>Reasonable <span class="editorial">questions</span>.</h2>
+      </div>
+      <div class="faq rv">
+        <div class="faq-item open">
+          <button class="faq-q">¿Puedo migrar desde Linear, Jira o Notion? <span class="pl">+</span></button>
+          <div class="faq-a"><p>Sí. Tenemos importadores con un click para Linear y Jira (issues, comentarios, attachments, sprints). Para Notion importamos páginas como docs, conservando la jerarquía.</p></div>
+        </div>
+        <div class="faq-item">
+          <button class="faq-q">¿Cómo se cobran los usuarios invitados? <span class="pl">+</span></button>
+          <div class="faq-a"><p>Los guests con permiso de solo-comentario son gratis. Solo cobramos por usuarios con acceso de edición a issues o docs.</p></div>
+        </div>
+        <div class="faq-item">
+          <button class="faq-q">¿Mis datos son míos? <span class="pl">+</span></button>
+          <div class="faq-a"><p>Siempre. Exportás todo en JSON o Markdown desde Settings → Data. No usamos tus issues para entrenar modelos. Punto.</p></div>
+        </div>
+        <div class="faq-item">
+          <button class="faq-q">¿Funciona offline? <span class="pl">+</span></button>
+          <div class="faq-a"><p>El web app cachea tus últimos 30 días localmente. La PWA mobile (Q3) lo hace nativo, con sync al volver online.</p></div>
+        </div>
+        <div class="faq-item">
+          <button class="faq-q">¿Hay descuento para startups/educación/OSS? <span class="pl">+</span></button>
+          <div class="faq-a"><p>Sí, tres programas: Startups (50% por 1 año si tenés &lt; $5M raised), educación (gratis para .edu) y OSS (gratis para repos públicos verificados).</p></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========= CTA ========= -->
+  <section class="cta-section">
+    <div class="cta-card rv">
+      <span class="eyebrow"><span class="dot"></span>Empezar</span>
+      <h2>El work no se hace solo.<br/><span class="editorial">But almost.</span></h2>
+      <p class="lead">14 días gratis en Team. Sin tarjeta. 90 segundos de setup.</p>
+      <div class="row">
+        <button class="btn primary lg login-trigger">Start for free →</button>
+        <button class="btn lg" id="cta-demo-2">See live demo</button>
+      </div>
+    </div>
+  </section>
+  <!-- ========= FOOTER ========= -->
+  <footer class="foot">
+    <div class="foot-grid">
+      <div>
+        <a class="brand" href="#" style="margin-bottom:14px">
+          <span class="logo"></span>
+          <span class="name">Meridian</span>
+        </a>
+        <p style="color:var(--fg-2);font-size:13px;max-width:36ch;margin:14px 0 0">El sistema operativo del equipo.<br/>Hecho en Buenos Aires, San Francisco y Lisboa.</p>
+      </div>
+      <div>
+        <h5>Product</h5>
+        <ul>
+          <li><a href="#features">Funcionalidades</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+          <li><a href="#">Integraciones</a></li>
+          <li><a href="#">Changelog</a></li>
+          <li><a href="#">Roadmap</a></li>
+        </ul>
+      </div>
+      <div>
+        <h5>Company</h5>
+        <ul>
+          <li><a href="#">Sobre nosotros</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Trabajos</a></li>
+          <li><a href="#">Prensa</a></li>
+        </ul>
+      </div>
+      <div>
+        <h5>Legal</h5>
+        <ul>
+          <li><a href="#">Privacy</a></li>
+          <li><a href="#">Terms</a></li>
+          <li><a href="#">Security</a></li>
+          <li><a href="#">Status</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="foot-bot">
+      <span class="mono">© 2026 Meridian Software, Inc.</span>
+      <span class="mono">v3.4.2 · BUE / SFO / LIS</span>
+    </div>
+  </footer>
+  <!-- ========= LOGIN MODAL ========= -->
+  <div class="lg-overlay" id="login-overlay" role="dialog" aria-modal="true" aria-labelledby="lg-title">
+    <div class="lg-modal">
+      <button class="lg-x" id="lg-close" aria-label="Cerrar">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
+      </button>
+      <h3 id="lg-title">Welcome back</h3>
+      <p class="sub">Ingresá a tu workspace.</p>
+      <div style="display:flex;align-items:center;gap:8px;background:oklch(0.25 0.06 145/0.35);border:1px solid oklch(0.85 0.17 145/0.3);border-radius:8px;padding:8px 12px;margin-bottom:14px;font-size:12px;color:var(--accent)">
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg>
+        Cuenta demo — entrá con un click
+      </div>
+      <form id="lg-form">
+        <div class="lg-field">
+          <label>Email de work</label>
+          <input type="email" id="lg-email" value="demo@meridian.app" autocomplete="email" />
+        </div>
+        <div class="lg-field">
+          <label>Password</label>
+          <input type="password" id="lg-password" value="demo1234" autocomplete="current-password" />
+        </div>
+        <div class="lg-row">
+          <label style="display:inline-flex;align-items:center;gap:6px"><input type="checkbox" checked /> Recordar 30 días</label>
+          <a href="#">¿Olvidaste?</a>
+        </div>
+        <button type="submit" class="btn primary" style="width:100%;justify-content:center">Enter Meridian →</button>
+      </form>
+      <div class="lg-divider">or continue with</div>
+      <div class="lg-sso">
+        <button class="btn login-sso">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M21.35 11.1H12v3.9h5.35c-.5 2.5-2.6 4.3-5.35 4.3-3.25 0-5.9-2.65-5.9-5.9s2.65-5.9 5.9-5.9c1.6 0 3 .65 4 1.55l2.75-2.75C16.95 4.7 14.65 3.7 12 3.7 6.85 3.7 2.7 7.85 2.7 13s4.15 9.3 9.3 9.3c5.35 0 8.9-3.75 8.9-9.05 0-.6-.05-1.15-.15-1.65z"/></svg>
+          Continue with Google
+        </button>
+        <button class="btn login-sso">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 .3c-6.6 0-12 5.4-12 12 0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.3-3.2-.1-.3-.6-1.6.1-3.4 0 0 1-.3 3.4 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.6 3.4-1.2 3.4-1.2.7 1.7.2 3 .1 3.4.8.9 1.3 2 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.7-1.6 8.1-6.1 8.1-11.4 0-6.6-5.4-12-12-12z"/></svg>
+          Continue with GitHub
+        </button>
+        <button class="btn login-sso">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 8l9 6 9-6"/></svg>
+          SSO / SAML
+        </button>
+      </div>
+      <div class="lg-foot">No account? <a href="#" id="lg-signup">Crear workspace</a></div>
+    </div>
+  </div>
+  <script>
+    // === Spotlight follow ===
+    const spot = document.getElementById('spotlight');
+    document.addEventListener('mousemove', (e) => {
+      spot.style.left = e.clientX + 'px';
+      spot.style.top = e.clientY + 'px';
+    });
+    // === Scroll progress ===
+    const prog = document.getElementById('scroll-prog');
+    window.addEventListener('scroll', () => {
+      const h = document.documentElement;
+      const sc = h.scrollTop / (h.scrollHeight - h.clientHeight);
+      prog.style.width = (sc * 100) + '%';
+    });
+    // === Stats counters ===
+    const statObs = new IntersectionObserver((es) => {
+      es.forEach(e => {
+        if (!e.isIntersecting) return;
+        const el = e.target;
+        const target = parseFloat(el.dataset.stat);
+        const dec = parseInt(el.dataset.decimals || '0');
+        const dur = 1400; const t0 = performance.now();
+        const tick = (t) => {
+          const p = Math.min(1, (t - t0) / dur);
+          const ease = 1 - Math.pow(1 - p, 3);
+          const v = target * ease;
+          el.textContent = dec ? v.toFixed(dec) : Math.round(v).toLocaleString('es-AR');
+          if (p < 1) requestAnimationFrame(tick);
+          else el.textContent = dec ? target.toFixed(dec) : target.toLocaleString('es-AR');
+        };
+        requestAnimationFrame(tick);
+        statObs.unobserve(el);
+      });
+    }, { threshold: 0.4 });
+    document.querySelectorAll('em[data-stat]').forEach(el => statObs.observe(el));
+    // === Magnetic buttons ===
+    document.querySelectorAll('.btn.primary').forEach(b => {
+      b.addEventListener('mousemove', (e) => {
+        const r = b.getBoundingClientRect();
+        const x = e.clientX - r.left - r.width/2;
+        const y = e.clientY - r.top - r.height/2;
+        b.style.transform = `translate(${x*0.15}px, ${y*0.20}px)`;
+      });
+      b.addEventListener('mouseleave', () => { b.style.transform = ''; });
+    });
+    // === Hero h1 letter rise ===
+    document.querySelectorAll('.hero h1 .ww').forEach((wrap, wi) => {
+      const txt = wrap.textContent;
+      wrap.textContent = '';
+      [...txt].forEach((ch, i) => {
+        const s = document.createElement('span');
+        s.textContent = ch === ' ' ? '\u00A0' : ch;
+        s.style.animationDelay = (wi * 200 + i * 30) + 'ms';
+        wrap.appendChild(s);
+      });
+    });
+    // === Kanban live drag animation — cycles across all columns ===
+    (function kanbanLive() {
+      const stage = document.querySelector('.hv-stage');
+      const moving = document.getElementById('moving-card');
+      const cursor = document.querySelector('.cursor-fly');
+      const cols = [...document.querySelectorAll('.kcol')]; // [backlog, prog, shipped]
+      if (!stage || !moving || !cursor || !cols.length) return;
+      const counts = cols.map(c => c.querySelector('.ct'));
+      const titleEl = moving.querySelector('.title');
+      const idEl = moving.querySelector('.id');
+      const tagEl = moving.querySelector('.tag');
+      // Card identities to rotate (id, title, tag, priority color)
+      const items = [
+        { id: 'AUR-405', title: 'Embed Figma en docs',     tag: 'docs',  pri: 'var(--accent)' },
+        { id: 'AUR-412', title: 'Realtime cursors',        tag: 'edit',  pri: 'var(--violet)' },
+        { id: 'AUR-407', title: 'Vector triage digest',    tag: 'ml',    pri: 'var(--rose)'   },
+        { id: 'AUR-419', title: 'Bulk re-prioritize',      tag: 'ux',    pri: 'var(--amber)'  },
+        { id: 'AUR-413', title: 'Sentry tracing webhooks', tag: 'infra', pri: 'var(--cyan)'   },
+      ];
+      const placeOver = (el) => {
+        const sr = stage.getBoundingClientRect();
+        const tr = el.getBoundingClientRect();
+        return { x: tr.left - sr.left, y: tr.top - sr.top };
+      };
+      const colSlotPos = (col) => {
+        // position above first real card in col
+        const sr = stage.getBoundingClientRect();
+        const cr = col.getBoundingClientRect();
+        const firstCard = col.querySelector('.kcard');
+        if (firstCard) {
+          const fr = firstCard.getBoundingClientRect();
+          return { x: fr.left - sr.left, y: fr.top - sr.top };
+        }
+        return { x: cr.left - sr.left + 12, y: cr.top - sr.top + 40 };
+      };
+      const moveTo = (x, y) => {
+        moving.style.left = x + 'px';
+        moving.style.top = y + 'px';
+        cursor.style.left = (x + moving.offsetWidth - 16) + 'px';
+        cursor.style.top = (y + 14) + 'px';
+      };
+      const wait = (ms) => new Promise(r => setTimeout(r, ms));
+      function setMovingContent(item) {
+        idEl.textContent = item.id;
+        titleEl.textContent = item.title;
+        if (tagEl) tagEl.textContent = item.tag;
+      }
+      // Track count per col (start matching DOM)
+      const colCounts = counts.map(c => parseInt(c.textContent, 10) || 0);
+      const updateCounts = () => counts.forEach((c, i) => c.textContent = colCounts[i]);
+      let fromIdx = 1; // start: In progress
+      let itemIdx = 0;
+      async function loop() {
+        await wait(700);
+        while (true) {
+          const item = items[itemIdx % items.length];
+          setMovingContent(item);
+          // pick next column (different from current)
+          let toIdx;
+          do { toIdx = Math.floor(Math.random() * cols.length); } while (toIdx === fromIdx);
+          const fromCol = cols[fromIdx];
+          const toCol = cols[toIdx];
+          // 1) appear over a card in fromCol (use first card as anchor)
+          const anchor = fromCol.querySelector('.kcard') || fromCol;
+          const start = placeOver(anchor);
+          moveTo(start.x, start.y);
+          moving.classList.add('is-visible');
+          cursor.classList.add('is-visible');
+          await wait(420);
+          // 2) grab/lift
+          moving.classList.add('is-grabbed');
+          await wait(280);
+          // decrement source
+          colCounts[fromIdx] = Math.max(0, colCounts[fromIdx] - 1);
+          updateCounts();
+          // 3) drag to target col
+          toCol.classList.add('is-target');
+          const dest = colSlotPos(toCol);
+          moveTo(dest.x, dest.y);
+          await wait(950);
+          // 4) drop
+          moving.classList.remove('is-grabbed');
+          colCounts[toIdx] += 1;
+          updateCounts();
+          await wait(380);
+          // 5) fade out
+          moving.classList.remove('is-visible');
+          cursor.classList.remove('is-visible');
+          toCol.classList.remove('is-target');
+          await wait(900);
+          fromIdx = toIdx;
+          itemIdx++;
+        }
+      }
+      loop();
+    })();
+    // === Reveal on scroll ===
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
+    }, { threshold: 0.12 });
+    document.querySelectorAll('.rv').forEach(el => io.observe(el));
+    // === Stage tabs ===
+    const tabs = document.querySelectorAll('.stage-tabs button');
+    const panes = document.querySelectorAll('.stage-pane');
+    tabs.forEach(t => t.addEventListener('click', () => {
+      tabs.forEach(x => x.classList.remove('on'));
+      panes.forEach(x => x.classList.remove('on'));
+      t.classList.add('on');
+      document.querySelector(`.stage-pane[data-pane="${t.dataset.tab}"]`).classList.add('on');
+    }));
+    // Auto-rotate tabs (disabled — let user drive it)
+    // let tabIdx = 0;
+    // setInterval(() => { tabIdx = (tabIdx + 1) % tabs.length; tabs[tabIdx].click(); }, 6000);
+    // === Demo: interactive drag + auto-shuffle ===
+    (function demoBoard() {
+      const board = document.querySelector('.stage-pane[data-pane="kanban"] .bk');
+      if (!board) return;
+      const cols = board.querySelectorAll('.bk-col');
+      let dragging = null, ghost = null, offsetX = 0, offsetY = 0;
+      let userActive = false, lastUser = 0;
+      function updateCounts() {
+        cols.forEach(c => {
+          const ct = c.querySelector('h5 .ct');
+          const n = c.querySelectorAll('.bk-card').length;
+          if (ct) ct.textContent = n;
+        });
+      }
+      function getCol(el) {
+        while (el && !el.classList?.contains('bk-col')) el = el.parentElement;
+        return el;
+      }
+      function clearTargets() {
+        cols.forEach(c => c.classList.remove('is-drop-target'));
+      }
+      function startDrag(card, ev) {
+        const rect = card.getBoundingClientRect();
+        offsetX = ev.clientX - rect.left;
+        offsetY = ev.clientY - rect.top;
+        dragging = card;
+        userActive = true;
+        lastUser = Date.now();
+        // create floating ghost
+        ghost = card.cloneNode(true);
+        ghost.classList.add('is-floating', 'is-dragging');
+        ghost.style.width = rect.width + 'px';
+        ghost.style.left = rect.left + 'px';
+        ghost.style.top = rect.top + 'px';
+        document.body.appendChild(ghost);
+        card.style.opacity = '0.25';
+        document.body.style.cursor = 'grabbing';
+        ev.preventDefault();
+      }
+      function moveDrag(ev) {
+        if (!ghost) return;
+        ghost.style.left = (ev.clientX - offsetX) + 'px';
+        ghost.style.top = (ev.clientY - offsetY) + 'px';
+        // detect column under cursor
+        clearTargets();
+        const elUnder = document.elementFromPoint(ev.clientX, ev.clientY);
+        const col = getCol(elUnder);
+        if (col && board.contains(col)) col.classList.add('is-drop-target');
+      }
+      function endDrag(ev) {
+        if (!ghost || !dragging) return;
+        const elUnder = document.elementFromPoint(ev.clientX, ev.clientY);
+        const targetCol = getCol(elUnder);
+        const card = dragging;
+        if (targetCol && board.contains(targetCol) && targetCol !== card.parentElement) {
+          targetCol.appendChild(card);
+          card.classList.add('just-landed');
+          setTimeout(() => card.classList.remove('just-landed'), 600);
+        }
+        card.style.opacity = '';
+        ghost.remove();
+        ghost = null;
+        dragging = null;
+        document.body.style.cursor = '';
+        clearTargets();
+        updateCounts();
+      }
+      board.addEventListener('mousedown', (ev) => {
+        const card = ev.target.closest('.bk-card');
+        if (!card || !board.contains(card)) return;
+        startDrag(card, ev);
+      });
+      window.addEventListener('mousemove', moveDrag);
+      window.addEventListener('mouseup', endDrag);
+      // touch support
+      board.addEventListener('touchstart', (ev) => {
+        const card = ev.target.closest('.bk-card');
+        if (!card) return;
+        const t = ev.touches[0];
+        startDrag(card, { clientX: t.clientX, clientY: t.clientY, preventDefault: () => ev.preventDefault() });
+      }, { passive: false });
+      window.addEventListener('touchmove', (ev) => {
+        if (!ghost) return;
+        const t = ev.touches[0];
+        moveDrag({ clientX: t.clientX, clientY: t.clientY });
+        ev.preventDefault();
+      }, { passive: false });
+      window.addEventListener('touchend', (ev) => {
+        if (!ghost) return;
+        const t = ev.changedTouches[0];
+        endDrag({ clientX: t.clientX, clientY: t.clientY });
+      });
+      // === Auto-shuffle: pick a random card, FLIP-animate to a different col ===
+      function autoMove() {
+        if (Date.now() - lastUser < 8000) return; // pause if user just played
+        if (dragging) return;
+        const allCards = [...board.querySelectorAll('.bk-card')];
+        if (!allCards.length) return;
+        const card = allCards[Math.floor(Math.random() * allCards.length)];
+        const fromCol = card.parentElement;
+        const otherCols = [...cols].filter(c => c !== fromCol);
+        const toCol = otherCols[Math.floor(Math.random() * otherCols.length)];
+        // FLIP: capture from
+        const r1 = card.getBoundingClientRect();
+        toCol.classList.add('is-drop-target');
+        toCol.appendChild(card);
+        // capture to
+        const r2 = card.getBoundingClientRect();
+        const dx = r1.left - r2.left;
+        const dy = r1.top - r2.top;
+        // animate
+        card.style.transition = 'none';
+        card.style.transform = `translate(${dx}px, ${dy}px) rotate(-1deg) scale(1.04)`;
+        card.style.boxShadow = '0 12px 30px rgba(0,0,0,.4)';
+        card.style.zIndex = '10';
+        requestAnimationFrame(() => {
+          card.style.transition = 'transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .65s';
+          card.style.transform = '';
+          card.style.boxShadow = '';
+        });
+        setTimeout(() => {
+          card.style.zIndex = '';
+          card.style.transition = '';
+          toCol.classList.remove('is-drop-target');
+          card.classList.add('just-landed');
+          setTimeout(() => card.classList.remove('just-landed'), 600);
+          updateCounts();
+        }, 700);
+      }
+      setInterval(autoMove, 3500);
+      // pause auto on hover
+      board.addEventListener('mouseenter', () => { lastUser = Date.now(); });
+    })();
+    // === Billing toggle ===
+    const billBtns = document.querySelectorAll('#bill-toggle button');
+    const pill = document.getElementById('bill-pill');
+    function setPill(btn) {
+      const r = btn.getBoundingClientRect();
+      const pr = btn.parentElement.getBoundingClientRect();
+      pill.style.width = r.width + 'px';
+      pill.style.transform = `translateX(${r.left - pr.left - 4}px)`;
+    }
+    requestAnimationFrame(() => setPill(document.querySelector('#bill-toggle button.on')));
+    window.addEventListener('resize', () => setPill(document.querySelector('#bill-toggle button.on')));
+    billBtns.forEach(b => b.addEventListener('click', () => {
+      billBtns.forEach(x => x.classList.remove('on'));
+      b.classList.add('on');
+      setPill(b);
+      const mode = b.dataset.bill;
+      document.querySelectorAll('.tier .price[data-month]').forEach(p => {
+        p.textContent = mode === 'year' ? p.dataset.year : p.dataset.month;
+      });
+    }));
+    // === FAQ ===
+    document.querySelectorAll('.faq-item').forEach(item => {
+      item.querySelector('.faq-q').addEventListener('click', () => {
+        item.classList.toggle('open');
+      });
+    });
+    // === Counter ===
+    const ce = document.querySelector('.counter-canvas .num em');
+    if (ce) {
+      const target = parseFloat(ce.dataset.count);
+      const co = new IntersectionObserver((entries) => {
+        entries.forEach(e => {
+          if (e.isIntersecting) {
+            let v = 0;
+            const step = () => {
+              v += target / 50;
+              if (v >= target) { ce.textContent = target.toFixed(1); return; }
+              ce.textContent = v.toFixed(1);
+              requestAnimationFrame(step);
+            };
+            step();
+            co.unobserve(e.target);
+          }
+        });
+      }, { threshold: 0.4 });
+      co.observe(ce);
+    }
+    // === Login modal ===
+    const overlay = document.getElementById('login-overlay');
+    const openLogin = () => overlay.classList.add('open');
+    const closeLogin = () => overlay.classList.remove('open');
+    document.getElementById('open-login').addEventListener('click', openLogin);
+    document.getElementById('open-signup').addEventListener('click', openLogin);
+    document.getElementById('cta-hero').addEventListener('click', openLogin);
+    document.getElementById('cta-demo').addEventListener('click', () => {
+      document.getElementById('stage').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    document.getElementById('cta-demo-2').addEventListener('click', () => {
+      document.getElementById('stage').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    document.querySelectorAll('.login-trigger').forEach(b => b.addEventListener('click', openLogin));
+    document.getElementById('lg-close').addEventListener('click', closeLogin);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeLogin(); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeLogin(); });
+    // Demo login — always succeeds, no backend required
+    function handleLogin(e) {
+      e.preventDefault();
+      const btn = document.querySelector('#lg-form button[type=submit]');
+      if (btn) { btn.textContent = 'Entrando…'; btn.style.pointerEvents = 'none'; }
+      localStorage.setItem('meridian-token', 'demo-token');
+      localStorage.setItem('meridian-user', JSON.stringify({ email: 'demo@meridian.app', name: 'Demo User' }));
+      setTimeout(() => { window.location.href = 'Meridian.html'; }, 400);
+    }
+    document.getElementById('lg-form').addEventListener('submit', handleLogin);
+    // document.querySelectorAll('.login-sso').forEach(b => b.addEventListener('click', goToApp));
+    // document.getElementById('lg-signup').addEventListener('click', (e) => { e.preventDefault(); goToApp(); });
+  </script>
+</body>
+</html>

mock-api.jsx ADDED Viewed

	@@ -0,0 +1,147 @@

+// mock-api.jsx — simulated CRUD backend for demo mode (no real server needed)
+// Intercepts /api/issues, /api/prs, /api/docs fetch calls.
+// AI chat is handled by ai-engine.jsx → AMD directly (no mock needed).
+// Must load after data.jsx.
+(function () {
+  const delay = (ms) => new Promise(r => setTimeout(r, ms));
+  const handleRequest = async (path, method, body) => {
+    await delay(180 + Math.random() * 250);
+    // Issues list
+    if (path === '/api/issues' && method === 'GET') {
+      return typeof ISSUES !== 'undefined' ? [...ISSUES] : [];
+    }
+    // Single issue
+    const issueMatch = path.match(/^\/api\/issues\/([^/]+)$/);
+    if (issueMatch) {
+      const id = issueMatch[1];
+      if (method === 'GET') {
+        return typeof ISSUES !== 'undefined' ? ISSUES.find(i => i.id === id) || null : null;
+      }
+      if (method === 'PATCH' && typeof ISSUES !== 'undefined') {
+        const idx = ISSUES.findIndex(i => i.id === id);
+        if (idx !== -1) {
+          Object.assign(ISSUES[idx], body || {});
+          return { ...ISSUES[idx] };
+        }
+        return null;
+      }
+    }
+    // Create issue
+    if (path === '/api/issues' && method === 'POST' && typeof ISSUES !== 'undefined') {
+      const proj = (typeof PROJECTS !== 'undefined' ? PROJECTS : []).find(p => p.id === (body && body.project)) || { code: 'AUR' };
+      const num = 400 + Math.floor(Math.random() * 200);
+      const newIssue = {
+        id: `${proj.code}-${num}`,
+        title: body.title || 'Untitled',
+        priority: body.priority || 'med',
+        status: body.status || 'backlog',
+        project: body.project || (PROJECTS[0] && PROJECTS[0].id),
+        assignees: body.assignees || [],
+        labels: body.labels || [],
+        estimate: null,
+        created: 'just now',
+        updated: 'just now',
+        commentCount: 0,
+      };
+      ISSUES.unshift(newIssue);
+      return newIssue;
+    }
+    // PRs list
+    if (path === '/api/prs' && method === 'GET') {
+      return typeof PRS !== 'undefined' ? [...PRS] : [];
+    }
+    // Create PR
+    if (path === '/api/prs' && method === 'POST' && typeof PRS !== 'undefined') {
+      const newPR = {
+        id: `#${2360 + Math.floor(Math.random() * 40)}`,
+        title: body.title || 'Untitled PR',
+        branch: body.branch || 'feature/new',
+        base: body.base || 'main',
+        status: body.status || 'open',
+        author: 'u1',
+        project: body.project || 'Aurora',
+        additions: 0,
+        deletions: 0,
+        checks: { passed: 0, failed: 0, running: 1 },
+        reviewers: [],
+        comments: 0,
+        draft: false,
+        updated: 'just now',
+      };
+      PRS.unshift(newPR);
+      return newPR;
+    }
+    // Docs list
+    if (path === '/api/docs' && method === 'GET') {
+      return typeof DOCS !== 'undefined' ? [...DOCS] : [];
+    }
+    // Create doc
+    if (path === '/api/docs' && method === 'POST' && typeof DOCS !== 'undefined') {
+      const newDoc = {
+        id: `doc-${Date.now()}`,
+        title: (body && body.title) || 'Untitled',
+        icon: 'doc-add',
+        section: 'Drafts',
+        children: [],
+      };
+      DOCS.push(newDoc);
+      return newDoc;
+    }
+    // Auth / login (stub — always succeeds in demo mode)
+    if (path === '/api/auth/login' && method === 'POST') {
+      return { token: 'demo-token-' + Date.now(), user: { id: 'u1', name: 'Amara Osei' } };
+    }
+    // 404 fallback
+    return { error: 'Not found', path, method };
+  };
+  // --- Fetch interceptor ---
+  const originalFetch = window.fetch.bind(window);
+  window.fetch = async (input, init = {}) => {
+    const url = typeof input === 'string' ? input : (input instanceof URL ? input.toString() : input.url);
+    if (!url || !url.startsWith('/api/')) {
+      return originalFetch(input, init);
+    }
+    const method = ((init && init.method) || 'GET').toUpperCase();
+    let body = null;
+    if (init && init.body) {
+      try { body = JSON.parse(init.body); } catch { body = init.body; }
+    }
+    try {
+      const data = await handleRequest(url, method, body);
+      return new Response(JSON.stringify(data), {
+        status: data === null ? 404 : 200,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    } catch (err) {
+      console.error('[mock-api] Error handling', method, url, err);
+      return new Response(JSON.stringify({ error: err.message }), {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
+  };
+  // Also cover window.apiFetch so mutations reach the mock
+  // (apiFetch is defined later in api-client.jsx, so we patch it after DOMContentLoaded)
+  document.addEventListener('DOMContentLoaded', () => {
+    // Nothing needed: apiFetch already calls window.fetch which is now intercepted
+  });
+  console.log('[mock-api] Demo mode active — all /api/* requests are simulated');
+})();

shell.jsx ADDED Viewed

	@@ -0,0 +1,374 @@

+// Shell: sidebar + topbar + inbox panel + command palette
+const Sidebar = ({ view, setView, collapsed }) => {
+  const nav = [
+    { id: "home",     label: "Home",       icon: "home" },
+    { id: "inbox",    label: "Inbox",      icon: "inbox", badge: 4 },
+    { id: "issues",   label: "Issues",     icon: "issues" },
+    { id: "sprints",  label: "Sprints",    icon: "sprint" },
+    { id: "roadmap",  label: "Roadmap",    icon: "roadmap" },
+    { id: "docs",     label: "Docs",       icon: "docs" },
+    { id: "chat",     label: "VaultMind AI", icon: "sparkle" },
+    { id: "code",     label: "Code Editor",  icon: "code" },
+    { id: "compute",  label: "Compute",      icon: "sprint" },
+    { id: "aimarket", label: "AI Infrastructure", icon: "bolt" },
+    { id: "nexus",    label: "Nexus",        icon: "sparkle" },
+    { id: "prs",      label: "Pull requests", icon: "pr" },
+    { id: "team",     label: "Team",       icon: "team" },
+    { id: "settings", label: "Settings",   icon: "settings" },
+  ];
+  return (
+    <nav className="sidebar">
+      <div className="sb-brand">
+        <span className="sb-logo" aria-hidden />
+        <div style={{ lineHeight: 1.15 }}>
+          <div className="name">Meridian</div>
+          <div className="ws mono">helix · enterprise</div>
+        </div>
+        <span style={{ marginLeft: "auto" }} className="mono muted-2" title="workspace shortcut">⌘</span>
+      </div>
+      <div className="sb-section">
+        {nav.map(n => (
+          <button key={n.id} className={`sb-item ${view === n.id ? "active" : ""}`} onClick={() => setView(n.id)}>
+            <span className="sb-ind" />
+            <Icon name={n.icon} className="sb-icon" />
+            <span>{n.label}</span>
+            {n.badge && <span className="sb-badge">{n.badge}</span>}
+          </button>
+        ))}
+      </div>
+      <div className="sb-section">
+        <div className="sb-label"><span>Projects</span><span className="count">{PROJECTS.length}</span></div>
+        {PROJECTS.map(p => (
+          <button key={p.id} className="sb-proj" onClick={() => window.openProject(p)}>
+            <span className="dot" style={{ background: p.color }} />
+            <span className="truncate">{p.name}</span>
+            <span className="sb-badge mono">{p.code}</span>
+          </button>
+        ))}
+      </div>
+      <div className="sb-section">
+        <div className="sb-label"><span>Views</span><Icon name="plus" size={12} /></div>
+        {[
+          { id: "assigned", label: "Assigned to me", count: 7 },
+          { id: "review",   label: "Needs review", count: 3 },
+          { id: "urgent",   label: "Urgent", count: 2 },
+          { id: "recent",   label: "Recently updated", count: 12 },
+        ].map(v => (
+          <button key={v.id} className="sb-proj" onClick={() => { setView("issues"); window.openFilter(v.label); }}>
+            <Icon name="filter" size={14} style={{ color: "var(--fg-3)" }} />
+            <span className="truncate">{v.label}</span>
+            <span className="sb-badge mono">{v.count}</span>
+          </button>
+        ))}
+      </div>
+      <div style={{ flex: 1 }} />
+      <div className="sb-foot">
+        <Avatar user={PEOPLE[0]} size="sm" />
+        <div className="who" style={{ lineHeight: 1.2, flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 12.5, fontWeight: 500 }}>{PEOPLE[0].name}</div>
+          <div className="mono muted-2" style={{ fontSize: 10.5 }}>online · EU</div>
+        </div>
+        <button className="icon-btn" title="Account menu" onClick={() => window.openTeammate(PEOPLE[0])}><Icon name="more" size={14} /></button>
+      </div>
+    </nav>
+  );
+};
+const Topbar = ({ view, onToggleSidebar, onOpenPalette, onOpenInbox, onOpenTweaks, theme, setTheme }) => {
+  const crumb = {
+    home: ["Home"],
+    inbox: ["Inbox", "All activity"],
+    issues: ["Projects", "Aurora", "Issues"],
+    sprints: ["Sprints", "Iteration 42"],
+    roadmap: ["Roadmap", "Q2 — Q3 2026"],
+    docs: ["Docs", "Engineering handbook", "ADR 041 — Canvas rendering pipeline"],
+    prs: ["Code", "Pull requests"],
+    team: ["Team", "Members"],
+    issue: ["Projects", "Aurora", "AUR-412"],
+    chat: ["VaultMind AI", "Chat"],
+    compute:  ["Compute", "GPU Instances"],
+    aimarket: ["AI Infrastructure", "Studios & Models"],
+    nexus:    ["Nexus", "Cloud AI Platform"],
+    settings: ["Settings", "Workspace"],
+  }[view] || ["Home"];
+  return (
+    <header className="topbar">
+      <button className="icon-btn" onClick={onToggleSidebar} title="Toggle sidebar"><Icon name="sidebar" size={16} /></button>
+      <div className="breadcrumbs">
+        {crumb.map((c, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && <span className="sep">/</span>}
+            <span className={i === crumb.length - 1 ? "current" : ""}>{c}</span>
+          </React.Fragment>
+        ))}
+      </div>
+      <div className="topbar-spacer" />
+      <button className="search" onClick={onOpenPalette} style={{ cursor: "pointer" }}>
+        <Icon name="search" size={13} />
+        <span style={{ flex: 1, textAlign: "left", color: "var(--fg-3)" }}>Search, jump to, or ask…</span>
+        <span className="kbd-hint mono">⌘K</span>
+      </button>
+      <div className="topbar-actions">
+        <button className="icon-btn" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} title="Toggle theme">
+          <Icon name={theme === "dark" ? "sun" : "moon"} size={15} />
+        </button>
+        <button className="icon-btn" title="Notifications" onClick={onOpenInbox}>
+          <Icon name="bell" size={15} /><span className="dot" />
+        </button>
+        <button className="btn sm" onClick={() => window.openPicker({
+          title: "Create",
+          options: [
+            { value: "issue", label: "New issue", icon: "issues", hint: "C" },
+            { value: "doc", label: "New document", icon: "docs", hint: "⌘⇧D" },
+            { value: "pr", label: "Open pull request", icon: "pr" },
+            { value: "invite", label: "Invite teammate", icon: "team" },
+          ],
+          onChoose: (o) => {
+            if (o.value === "issue") window.openNewIssue();
+            else if (o.value === "doc") window.openNewDoc();
+            else if (o.value === "pr") window.openNewPR();
+            else if (o.value === "invite") window.openInvite();
+          },
+        })}>
+          <Icon name="plus" size={13} /> New
+        </button>
+      </div>
+    </header>
+  );
+};
+// ---- Command palette ----
+const PALETTE_ITEMS = [
+  { group: "Jump to", items: [
+    { id: "p-home", label: "Home", icon: "home", kbd: "G H", action: (setView) => setView("home") },
+    { id: "p-inbox", label: "Inbox", icon: "inbox", kbd: "G I", action: (setView) => setView("inbox") },
+    { id: "p-issues", label: "Issues", icon: "issues", kbd: "G S", action: (setView) => setView("issues") },
+    { id: "p-docs", label: "Docs", icon: "docs", kbd: "G D", action: (setView) => setView("docs") },
+    { id: "p-roadmap", label: "Roadmap", icon: "roadmap", kbd: "G R", action: (setView) => setView("roadmap") },
+    { id: "p-prs", label: "Pull requests", icon: "pr", kbd: "G P", action: (setView) => setView("prs") },
+    { id: "p-sprints", label: "Sprints", icon: "sprint", action: (setView) => setView("sprints") },
+  ]},
+  { group: "Create", items: [
+    { id: "c-issue", label: "Create new issue…", icon: "plus", kbd: "C", action: () => window.openNewIssue() },
+    { id: "c-doc", label: "Create new document…", icon: "doc-add", kbd: "⌘⇧D", action: () => window.openNewDoc() },
+    { id: "c-pr", label: "Open pull request…", icon: "pr", action: () => window.openNewPR() },
+  ]},
+  { group: "Recent", items: [
+    { id: "r-1", label: "AUR-412 — Rebuild canvas-rendering pipeline", icon: "issues", action: (setView) => setView("issue") },
+    { id: "r-2", label: "Aurora collaborative canvas PRD", icon: "docs", action: (setView) => setView("docs") },
+    { id: "r-3", label: "#2341 perf(canvas): tile-based rendering", icon: "pr", action: (setView) => setView("prs") },
+    { id: "r-4", label: "Iteration 42 — Apr 14 – Apr 28", icon: "sprint", action: (setView) => setView("sprints") },
+  ]},
+  { group: "Ask Meridian AI", items: [
+    { id: "ai-1", label: "Summarize Iteration 42 progress", icon: "sparkle", action: (setView) => { window.chatInitialQuery = "Summarize Iteration 42 progress"; setView("chat"); } },
+    { id: "ai-2", label: "What's blocking Aurora?", icon: "sparkle", action: (setView) => { window.chatInitialQuery = "What's blocking Aurora?"; setView("chat"); } },
+    { id: "ai-3", label: "Draft release notes for last sprint", icon: "sparkle", action: (setView) => { window.chatInitialQuery = "Draft release notes for last sprint"; setView("chat"); } },
+  ]},
+];
+const CommandPalette = ({ open, onClose, setView }) => {
+  const [q, setQ] = React.useState("");
+  const [sel, setSel] = React.useState(0);
+  React.useEffect(() => {
+    if (!open) { setQ(""); setSel(0); }
+  }, [open]);
+  const all = React.useMemo(() => {
+    const query = q.trim().toLowerCase();
+    return PALETTE_ITEMS.map(g => ({
+      ...g,
+      items: g.items.filter(it => !query || it.label.toLowerCase().includes(query))
+    })).filter(g => g.items.length);
+  }, [q]);
+  const flat = all.flatMap(g => g.items);
+  const go = (it) => {
+    if (it.action) it.action(setView);
+    onClose();
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") { e.preventDefault(); setSel(s => Math.min(s + 1, flat.length - 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setSel(s => Math.max(s - 1, 0)); }
+    else if (e.key === "Enter") { const it = flat[sel]; if (it) go(it); }
+    else if (e.key === "Escape") onClose();
+  };
+  if (!open) return null;
+  return (
+    <div className="overlay" onClick={onClose}>
+      <div className="palette" onClick={e => e.stopPropagation()}>
+        <div className="palette-input">
+          <Icon name="search" size={16} style={{ color: "var(--fg-2)" }} />
+          <input
+            autoFocus
+            placeholder="Search, jump to, ask…"
+            value={q}
+            onChange={e => { setQ(e.target.value); setSel(0); }}
+            onKeyDown={onKey}
+          />
+          <span className="kbd-hint mono">ESC</span>
+        </div>
+        <div className="palette-list">
+          {all.map((g, gi) => (
+            <div key={gi}>
+              <div className="palette-group">{g.group}</div>
+              {g.items.map((it) => {
+                const idx = flat.indexOf(it);
+                return (
+                  <button
+                    key={it.id}
+                    className={`palette-item ${idx === sel ? "sel" : ""}`}
+                    onMouseEnter={() => setSel(idx)}
+                    onClick={() => go(it)}
+                  >
+                    <Icon name={it.icon} size={15} style={{ color: "var(--fg-2)" }} />
+                    <span className="truncate">{it.label}</span>
+                    {it.kbd && <span className="k mono">{it.kbd}</span>}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+// ---- Inbox panel ----
+const InboxPanel = ({ open, onClose }) => {
+  const [filter, setFilter] = React.useState("all");
+  const list = INBOX.filter(n => filter === "all" || (filter === "unread" && n.unread));
+  const kindIcon = { issue: "issues", pr: "pr", doc: "docs" };
+  return (
+    <aside className={`inbox-panel ${open ? "open" : ""}`}>
+      <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 8 }}>
+        <Icon name="inbox" size={15} />
+        <strong style={{ fontSize: 13.5 }}>Inbox</strong>
+        <span className="mono muted-2" style={{ fontSize: 11 }}>{INBOX.filter(n => n.unread).length} unread</span>
+        <div style={{ flex: 1 }} />
+        <div className="segmented">
+          <button className={filter === "all" ? "on" : ""} onClick={() => setFilter("all")}>All</button>
+          <button className={filter === "unread" ? "on" : ""} onClick={() => setFilter("unread")}>Unread</button>
+        </div>
+        <button className="icon-btn" onClick={onClose}><Icon name="x" size={14} /></button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1 }}>
+        {list.map(n => {
+          const user = PEOPLE.find(p => p.id === n.from);
+          return (
+            <button key={n.id} onClick={() => { window.toast(`Opening ${n.target}`); onClose(); }} className="flex items-center gap-12" style={{
+              width: "100%", padding: "10px 14px", borderBottom: "1px solid var(--border-subtle)",
+              textAlign: "left", background: n.unread ? "transparent" : "var(--bg-0)", opacity: n.unread ? 1 : 0.75
+            }}>
+              {n.unread && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", flexShrink: 0 }} />}
+              {!n.unread && <span style={{ width: 6, flexShrink: 0 }} />}
+              {user ? <Avatar user={user} size="sm" /> : <span className="avatar sm" style={{ background: "var(--bg-3)" }}><Icon name={kindIcon[n.kind]} size={10} /></span>}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 12.5, color: "var(--fg-0)", lineHeight: 1.35 }}>
+                  {user && <strong style={{ fontWeight: 600 }}>{user.name.split(" ")[0]} </strong>}
+                  <span className="muted">{n.text} </span>
+                  <span className="mono" style={{ color: "var(--accent)" }}>{n.target}</span>
+                </div>
+                <div className="truncate muted" style={{ fontSize: 11.5, marginTop: 2 }}>{n.snippet}</div>
+              </div>
+              <span className="mono muted-2" style={{ fontSize: 10.5, flexShrink: 0 }}>{n.time}</span>
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+};
+// ---- Tweaks panel ----
+const TweaksPanel = ({ open, onClose, settings, setSettings }) => {
+  const accents = [
+    { id: "lime", value: "oklch(0.85 0.17 145)" },
+    { id: "cyan", value: "oklch(0.78 0.13 220)" },
+    { id: "violet", value: "oklch(0.72 0.18 300)" },
+    { id: "amber", value: "oklch(0.80 0.14 75)" },
+    { id: "rose", value: "oklch(0.72 0.17 20)" },
+  ];
+  return (
+    <div className={`tweaks ${open ? "open" : ""}`}>
+      <div className="flex items-center justify-between">
+        <h4>Tweaks</h4>
+        <button className="icon-btn" onClick={onClose}><Icon name="x" size={12} /></button>
+      </div>
+      <div className="tweak-row">
+        <label>Accent</label>
+        <div className="swatches">
+          {accents.map(a => (
+            <button
+              key={a.id}
+              className={`swatch ${settings.accent === a.id ? "sel" : ""}`}
+              style={{ background: a.value }}
+              onClick={() => setSettings(s => ({ ...s, accent: a.id }))}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="tweak-row">
+        <label>Theme</label>
+        <div className="segmented">
+          {["dark","light"].map(t => (
+            <button key={t} className={settings.theme === t ? "on" : ""} onClick={() => setSettings(s => ({...s, theme: t}))}>{t}</button>
+          ))}
+        </div>
+      </div>
+      <div className="tweak-row">
+        <label>Density</label>
+        <div className="segmented">
+          {["compact","default","relaxed"].map(d => (
+            <button key={d} className={settings.density === d ? "on" : ""} onClick={() => setSettings(s => ({...s, density: d}))}>{d}</button>
+          ))}
+        </div>
+      </div>
+      <div className="tweak-row">
+        <label>Sidebar</label>
+        <div className="segmented">
+          {["expanded","collapsed"].map(d => (
+            <button key={d} className={settings.sidebar === d ? "on" : ""} onClick={() => setSettings(s => ({...s, sidebar: d}))}>{d}</button>
+          ))}
+        </div>
+      </div>
+      <div className="tweak-row">
+        <label>Card style</label>
+        <div className="segmented">
+          {["detailed","minimal"].map(d => (
+            <button key={d} className={settings.cardStyle === d ? "on" : ""} onClick={() => setSettings(s => ({...s, cardStyle: d}))}>{d}</button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+const HintBar = ({ onOpenPalette }) => (
+  <div className="hint-bar">
+    <span><kbd>⌘K</kbd> search</span>
+    <span><kbd>C</kbd> new issue</span>
+    <span><kbd>G</kbd>+<kbd>I</kbd> inbox</span>
+    <span><kbd>?</kbd> help</span>
+  </div>
+);
+Object.assign(window, { Sidebar, Topbar, CommandPalette, InboxPanel, TweaksPanel, HintBar });

staticwebapp.config.json ADDED Viewed

	@@ -0,0 +1,14 @@

+{
+  "navigationFallback": {
+    "rewrite": "/index.html",
+    "exclude": ["/api/*", "*.{css,jsx,js,json,png,jpg,svg,ico,html,gif,woff,woff2}"]
+  },
+  "mimeTypes": {
+    ".jsx": "application/javascript",
+    ".json": "application/json"
+  },
+  "globalHeaders": {
+    "Cache-Control": "no-cache",
+    "Access-Control-Allow-Origin": "*"
+  }
+}

styles.css ADDED Viewed

	@@ -0,0 +1,437 @@

+/* Meridian — Project Manager
+   Design tokens + base styles */
+:root {
+  /* Dark (default) */
+  --bg-0: oklch(0.18 0.008 250);
+  --bg-1: oklch(0.21 0.009 250);
+  --bg-2: oklch(0.24 0.010 250);
+  --bg-3: oklch(0.28 0.012 250);
+  --bg-hover: oklch(0.26 0.012 250);
+  --bg-elev: oklch(0.23 0.010 250);
+  --border: oklch(0.32 0.012 250);
+  --border-strong: oklch(0.40 0.015 250);
+  --border-subtle: oklch(0.26 0.010 250);
+  --fg-0: oklch(0.97 0.005 250);
+  --fg-1: oklch(0.82 0.010 250);
+  --fg-2: oklch(0.65 0.012 250);
+  --fg-3: oklch(0.48 0.012 250);
+  --accent: oklch(0.85 0.17 145);
+  --accent-fg: oklch(0.20 0.05 145);
+  --accent-dim: oklch(0.40 0.10 145);
+  --accent-soft: oklch(0.30 0.06 145);
+  --violet: oklch(0.70 0.18 300);
+  --violet-soft: oklch(0.32 0.08 300);
+  --amber: oklch(0.80 0.14 75);
+  --amber-soft: oklch(0.32 0.06 75);
+  --rose: oklch(0.72 0.17 20);
+  --rose-soft: oklch(0.32 0.08 20);
+  --cyan: oklch(0.78 0.12 220);
+  --cyan-soft: oklch(0.32 0.06 220);
+  --status-todo: oklch(0.55 0.010 250);
+  --status-progress: oklch(0.75 0.14 75);
+  --status-review: oklch(0.72 0.17 300);
+  --status-done: oklch(0.80 0.16 145);
+  --status-blocked: oklch(0.68 0.18 20);
+  --font-ui: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+  --font-editorial: "Fraunces", "Tiempos", Georgia, serif;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --sidebar-w: 240px;
+  --sidebar-collapsed-w: 56px;
+  --context-w: 280px;
+  --topbar-h: 44px;
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
+  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.25);
+  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.35);
+  --density-row: 36px;
+  --density-pad: 12px;
+}
+[data-theme="light"] {
+  --bg-0: oklch(0.985 0.003 250);
+  --bg-1: oklch(0.975 0.004 250);
+  --bg-2: oklch(0.96 0.005 250);
+  --bg-3: oklch(0.93 0.006 250);
+  --bg-hover: oklch(0.95 0.005 250);
+  --bg-elev: oklch(1 0 0);
+  --border: oklch(0.90 0.007 250);
+  --border-strong: oklch(0.82 0.010 250);
+  --border-subtle: oklch(0.93 0.005 250);
+  --fg-0: oklch(0.18 0.015 250);
+  --fg-1: oklch(0.30 0.015 250);
+  --fg-2: oklch(0.48 0.012 250);
+  --fg-3: oklch(0.62 0.010 250);
+  --accent: oklch(0.62 0.17 145);
+  --accent-fg: oklch(0.98 0.03 145);
+  --accent-dim: oklch(0.80 0.10 145);
+  --accent-soft: oklch(0.92 0.06 145);
+  --violet-soft: oklch(0.93 0.04 300);
+  --amber-soft: oklch(0.94 0.06 75);
+  --rose-soft: oklch(0.94 0.05 20);
+  --cyan-soft: oklch(0.93 0.04 220);
+  --shadow-sm: 0 1px 2px oklch(0.5 0.01 250 / 0.08);
+  --shadow-md: 0 4px 12px oklch(0.5 0.01 250 / 0.10);
+  --shadow-lg: 0 16px 40px oklch(0.5 0.01 250 / 0.14);
+}
+[data-density="compact"] {
+  --density-row: 30px;
+  --density-pad: 8px;
+}
+[data-density="relaxed"] {
+  --density-row: 44px;
+  --density-pad: 16px;
+}
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  height: 100%;
+  font-family: var(--font-ui);
+  font-feature-settings: "cv11", "ss01", "ss03";
+  background: var(--bg-0);
+  color: var(--fg-0);
+  font-size: 13px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+button, input, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+button { cursor: pointer; background: none; border: none; padding: 0; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg-0); }
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
+::-webkit-scrollbar-track { background: transparent; }
+.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
+.editorial { font-family: var(--font-editorial); }
+/* ==== App shell ==== */
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  grid-template-rows: var(--topbar-h) 1fr;
+  grid-template-areas:
+    "sidebar topbar"
+    "sidebar main";
+  height: 100vh;
+  width: 100vw;
+}
+.app[data-sidebar="collapsed"] {
+  grid-template-columns: var(--sidebar-collapsed-w) 1fr;
+}
+.sidebar { grid-area: sidebar; border-right: 1px solid var(--border); background: var(--bg-1); overflow: hidden; display: flex; flex-direction: column; }
+.topbar { grid-area: topbar; border-bottom: 1px solid var(--border); background: var(--bg-0); display: flex; align-items: center; padding: 0 16px; gap: 12px; }
+.main { grid-area: main; overflow: hidden; display: flex; min-width: 0; }
+/* Topbar */
+.breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 12.5px; }
+.breadcrumbs .sep { color: var(--fg-3); }
+.breadcrumbs .current { color: var(--fg-0); font-weight: 500; }
+.topbar-spacer { flex: 1; }
+.topbar-actions { display: flex; align-items: center; gap: 6px; }
+.kbd-hint {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-family: var(--font-mono); font-size: 10.5px;
+  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
+  color: var(--fg-2); background: var(--bg-1);
+}
+.icon-btn {
+  width: 28px; height: 28px; border-radius: 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--fg-1); transition: background 120ms, color 120ms;
+  position: relative;
+}
+.icon-btn:hover { background: var(--bg-2); color: var(--fg-0); }
+.icon-btn .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+/* Sidebar */
+.sb-brand {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; height: var(--topbar-h); border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.sb-logo {
+  width: 24px; height: 24px; border-radius: 6px;
+  background: linear-gradient(135deg, var(--accent), var(--violet));
+  position: relative; overflow: hidden; flex-shrink: 0;
+}
+.sb-logo::after {
+  content: ""; position: absolute; inset: 4px;
+  border-radius: 3px;
+  background: var(--bg-1);
+  mask: radial-gradient(circle at 30% 30%, #000 40%, transparent 41%);
+}
+.sb-brand .name { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
+.sb-brand .ws { font-size: 11px; color: var(--fg-2); font-family: var(--font-mono); }
+.sb-section { padding: 10px 8px; }
+.sb-label { padding: 6px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
+.sb-label .count { font-family: var(--font-mono); }
+.sb-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 10px; border-radius: 6px;
+  color: var(--fg-1); font-size: 13px;
+  width: 100%; text-align: left;
+  transition: background 100ms, color 100ms;
+}
+.sb-item:hover { background: var(--bg-2); color: var(--fg-0); }
+.sb-item.active { background: var(--bg-2); color: var(--fg-0); }
+.sb-item.active .sb-ind { background: var(--accent); }
+.sb-item .sb-icon { width: 16px; height: 16px; color: var(--fg-2); flex-shrink: 0; }
+.sb-item.active .sb-icon { color: var(--accent); }
+.sb-item .sb-badge { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }
+.sb-item .sb-ind { width: 2px; height: 14px; border-radius: 2px; background: transparent; margin-left: -10px; margin-right: 8px; }
+.sb-proj {
+  display: flex; align-items: center; gap: 10px;
+  padding: 5px 10px; border-radius: 6px;
+  color: var(--fg-1); font-size: 12.5px;
+  width: 100%; text-align: left;
+}
+.sb-proj:hover { background: var(--bg-2); }
+.sb-proj .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
+.sb-foot { margin-top: auto; border-top: 1px solid var(--border); padding: 10px; display: flex; align-items: center; gap: 10px; }
+.avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
+.avatar.sm { width: 20px; height: 20px; font-size: 9.5px; }
+.avatar.xs { width: 16px; height: 16px; font-size: 8.5px; }
+.avatar.lg { width: 32px; height: 32px; font-size: 12.5px; }
+/* Collapsed sidebar */
+.app[data-sidebar="collapsed"] .sb-item span,
+.app[data-sidebar="collapsed"] .sb-item .sb-badge,
+.app[data-sidebar="collapsed"] .sb-label,
+.app[data-sidebar="collapsed"] .sb-proj span,
+.app[data-sidebar="collapsed"] .sb-brand .name,
+.app[data-sidebar="collapsed"] .sb-brand .ws,
+.app[data-sidebar="collapsed"] .sb-foot .who { display: none; }
+.app[data-sidebar="collapsed"] .sb-item { justify-content: center; padding: 6px; }
+/* Buttons */
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-1); color: var(--fg-0);
+  font-size: 12.5px; font-weight: 500;
+  transition: all 120ms;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
+.btn.primary {
+  background: var(--accent); color: var(--accent-fg); border-color: transparent;
+}
+.btn.primary:hover { filter: brightness(1.05); }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
+.btn.ghost:hover { background: var(--bg-2); color: var(--fg-0); }
+.btn.sm { padding: 2px 8px; font-size: 11.5px; height: 24px; }
+/* Segmented */
+.segmented { display: inline-flex; background: var(--bg-1); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
+.segmented button { padding: 3px 9px; font-size: 11.5px; color: var(--fg-2); border-radius: 5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
+.segmented button:hover { color: var(--fg-0); }
+.segmented button.on { background: var(--bg-3); color: var(--fg-0); box-shadow: var(--shadow-sm); }
+/* Chips / pills / tags */
+.chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 7px; border-radius: 4px;
+  font-size: 11px; font-weight: 500;
+  font-family: var(--font-mono);
+  background: var(--bg-2); color: var(--fg-1);
+  border: 1px solid var(--border);
+  height: 20px;
+  white-space: nowrap;
+}
+.chip.solid { border-color: transparent; }
+.chip .d { width: 6px; height: 6px; border-radius: 50%; }
+.chip.priority-high { color: var(--rose); }
+.chip.priority-med { color: var(--amber); }
+.chip.priority-low { color: var(--fg-2); }
+.tag { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 10.5px; border-radius: 3px; background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border); font-family: var(--font-mono); height: 18px; }
+/* Status badge with dot */
+.status {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11.5px; color: var(--fg-1);
+}
+.status .s-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
+.status.todo { color: var(--status-todo); }
+.status.todo .s-dot { background: transparent; }
+.status.progress { color: var(--status-progress); }
+.status.progress .s-dot { background: conic-gradient(currentColor 0 50%, transparent 50%); border-color: currentColor; }
+.status.review { color: var(--status-review); }
+.status.review .s-dot { background: conic-gradient(currentColor 0 75%, transparent 75%); border-color: currentColor; }
+.status.done { color: var(--status-done); }
+.status.done .s-dot { background: currentColor; }
+.status.blocked { color: var(--status-blocked); }
+.status.blocked .s-dot { background: currentColor; border-color: currentColor; }
+/* Card */
+.card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; }
+/* Scrollable content panes */
+.scroll-y { overflow-y: auto; }
+/* Page header (inside main) */
+.page-header {
+  display: flex; align-items: center; padding: 10px 20px;
+  border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap;
+  min-height: 48px;
+  background: var(--bg-0);
+}
+.page-title { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
+.page-title .eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); font-weight: 500; }
+/* Search input */
+.search {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--bg-1); border: 1px solid var(--border);
+  border-radius: 6px; padding: 3px 8px; color: var(--fg-2);
+  font-size: 12px; min-width: 280px;
+}
+.search input { background: transparent; border: none; outline: none; flex: 1; color: var(--fg-0); }
+.search input::placeholder { color: var(--fg-3); }
+/* Table-ish lists */
+.row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 12px; height: var(--density-row);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12.5px;
+}
+.row:hover { background: var(--bg-1); }
+/* Focus ring */
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+/* Tweaks panel */
+.tweaks {
+  position: fixed; bottom: 16px; right: 16px;
+  width: 260px; background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  padding: 12px; z-index: 100;
+  box-shadow: var(--shadow-lg);
+  display: none; flex-direction: column; gap: 10px;
+}
+.tweaks.open { display: flex; }
+.tweaks h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
+.tweak-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
+.tweak-row label { color: var(--fg-1); }
+.swatches { display: flex; gap: 5px; }
+.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); cursor: pointer; }
+.swatch.sel { border-color: var(--fg-0); }
+/* Shortcut hint bar */
+.hint-bar {
+  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
+  display: flex; gap: 16px; padding: 6px 14px;
+  background: var(--bg-elev); border: 1px solid var(--border-strong);
+  border-radius: 999px; box-shadow: var(--shadow-md);
+  font-size: 11.5px; color: var(--fg-2); z-index: 50;
+  pointer-events: none;
+}
+.hint-bar kbd { font-family: var(--font-mono); color: var(--fg-0); font-size: 10.5px; padding: 1px 5px; border-radius: 3px; background: var(--bg-2); border: 1px solid var(--border); }
+/* Modal / palette */
+.overlay {
+  position: fixed; inset: 0; background: oklch(0 0 0 / 0.5);
+  backdrop-filter: blur(3px);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 12vh; z-index: 200;
+}
+.palette {
+  width: 620px; max-width: 92vw;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.palette-input {
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 16px; border-bottom: 1px solid var(--border);
+}
+.palette-input input {
+  flex: 1; background: transparent; border: none; outline: none;
+  color: var(--fg-0); font-size: 15px;
+}
+.palette-list { max-height: 420px; overflow-y: auto; padding: 6px; }
+.palette-group { padding: 8px 10px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
+.palette-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--fg-1);
+  width: 100%; text-align: left;
+}
+.palette-item:hover, .palette-item.sel { background: var(--bg-2); color: var(--fg-0); }
+.palette-item .k { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }
+@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+select.btn { appearance: none; cursor: pointer; padding-right: 20px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
+/* Inbox overlay */
+.inbox-panel {
+  position: fixed; top: var(--topbar-h); right: 0; bottom: 0;
+  width: 420px; background: var(--bg-1); border-left: 1px solid var(--border);
+  z-index: 150; display: flex; flex-direction: column;
+  transform: translateX(100%); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-lg);
+}
+.inbox-panel.open { transform: translateX(0); }
+/* Utility */
+.flex { display: flex; }
+.col { flex-direction: column; }
+.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.flex-1 { flex: 1; min-width: 0; }
+.min-w-0 { min-width: 0; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.muted { color: var(--fg-2); }
+.muted-2 { color: var(--fg-3); }
+.hidden { display: none; }
+.divider { height: 1px; background: var(--border); margin: 8px 0; }
+.vdivider { width: 1px; background: var(--border); align-self: stretch; }
+/* Icon sizes */
+.i-14 { width: 14px; height: 14px; }
+.i-16 { width: 16px; height: 16px; }
+.i-18 { width: 18px; height: 18px; }
+/* Subtle ruling */
+.ruled > * + * { border-top: 1px solid var(--border-subtle); }

vanguard.css ADDED Viewed

	@@ -0,0 +1,387 @@

+/* Vanguard layer — gradients, glow, animations on top of base styles.css */
+/* Animated aurora backdrop */
+.app {
+  position: relative;
+  isolation: isolate;
+}
+.app::before {
+  content: "";
+  position: fixed; inset: 0;
+  background:
+    radial-gradient(ellipse 60% 50% at 15% 0%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 60%),
+    radial-gradient(ellipse 50% 40% at 85% 10%, color-mix(in oklch, var(--violet) 16%, transparent) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 30% at 50% 100%, color-mix(in oklch, var(--cyan) 12%, transparent) 0%, transparent 60%);
+  filter: blur(40px);
+  z-index: -1;
+  pointer-events: none;
+  animation: aurora 24s ease-in-out infinite alternate;
+}
+[data-theme="light"] .app::before {
+  opacity: 0.45;
+}
+@keyframes aurora {
+  0%   { transform: translate(0, 0) scale(1); }
+  33%  { transform: translate(3%, -2%) scale(1.08); }
+  66%  { transform: translate(-2%, 3%) scale(0.95); }
+  100% { transform: translate(2%, 2%) scale(1.05); }
+}
+/* Sidebar + topbar become slightly translucent over aurora */
+.sidebar, .topbar {
+  background: color-mix(in oklch, var(--bg-1) 82%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+.topbar { background: color-mix(in oklch, var(--bg-0) 72%, transparent); }
+/* Gradient brand logo — conic, rotating */
+.sb-logo {
+  background: conic-gradient(from 0deg,
+    var(--accent),
+    var(--violet),
+    var(--cyan),
+    var(--amber),
+    var(--accent));
+  animation: logo-spin 18s linear infinite;
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent),
+    0 0 24px -4px color-mix(in oklch, var(--accent) 50%, transparent);
+}
+.sb-logo::after {
+  mask: radial-gradient(circle at 30% 30%, #000 35%, transparent 36%);
+}
+@keyframes logo-spin { to { transform: rotate(360deg); } }
+/* Accent primary button — gradient + glow */
+.btn.primary {
+  background: linear-gradient(135deg,
+    var(--accent) 0%,
+    color-mix(in oklch, var(--accent) 60%, var(--cyan)) 100%);
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent),
+    0 6px 20px -8px color-mix(in oklch, var(--accent) 80%, transparent),
+    inset 0 1px 0 color-mix(in oklch, white 20%, transparent);
+  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms;
+}
+.btn.primary:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent),
+    0 10px 28px -8px color-mix(in oklch, var(--accent) 80%, transparent),
+    inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
+  filter: none;
+}
+/* Card shimmer on hover */
+.card {
+  position: relative;
+  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms, box-shadow 240ms;
+  overflow: hidden;
+}
+.card::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(135deg,
+    transparent 40%,
+    color-mix(in oklch, var(--accent) 6%, transparent) 55%,
+    transparent 70%);
+  opacity: 0;
+  transition: opacity 400ms;
+  pointer-events: none;
+}
+.card:hover {
+  border-color: var(--border-strong);
+  box-shadow: 0 12px 32px -16px oklch(0 0 0 / 0.4);
+}
+.card:hover::after { opacity: 1; }
+/* Kanban cards: lift + subtle gradient border on hover */
+button.card { cursor: pointer; }
+button.card:hover {
+  transform: translateY(-2px);
+}
+/* Sidebar item — animated gradient indicator */
+.sb-item { position: relative; transition: color 140ms; }
+.sb-item.active .sb-ind {
+  background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 50%, var(--violet)));
+  box-shadow: 0 0 10px -2px var(--accent);
+}
+.sb-item.active {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--accent) 10%, transparent) 0%,
+    transparent 80%);
+}
+/* Topbar search — inner glow on focus */
+.search { transition: border-color 180ms, box-shadow 180ms; }
+.search:hover { border-color: var(--border-strong); }
+.search:focus-within {
+  border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
+}
+/* Status dots glow by state */
+.status.progress .s-dot { box-shadow: 0 0 8px -1px var(--status-progress); }
+.status.done .s-dot     { box-shadow: 0 0 8px -1px var(--status-done); }
+.status.review .s-dot   { box-shadow: 0 0 8px -1px var(--status-review); }
+.status.blocked .s-dot  { box-shadow: 0 0 8px -1px var(--status-blocked); }
+/* Chips — gradient fills for states */
+.chip { backdrop-filter: blur(6px); }
+/* Priority urgent — gentle pulse */
+.priority-pulse {
+  animation: pulse-urgent 1.8s ease-in-out infinite;
+}
+@keyframes pulse-urgent {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+/* Avatar — gradient ring for online */
+.avatar { position: relative; box-shadow: inset 0 0 0 1px color-mix(in oklch, white 10%, transparent); }
+/* Page transitions */
+.main > * {
+  animation: fade-slide 260ms cubic-bezier(0.2, 0, 0, 1);
+}
+@keyframes fade-slide {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* Staggered list items */
+.stagger > * { animation: fade-slide 320ms cubic-bezier(0.2, 0, 0, 1) both; }
+.stagger > *:nth-child(1) { animation-delay: 20ms; }
+.stagger > *:nth-child(2) { animation-delay: 50ms; }
+.stagger > *:nth-child(3) { animation-delay: 80ms; }
+.stagger > *:nth-child(4) { animation-delay: 110ms; }
+.stagger > *:nth-child(5) { animation-delay: 140ms; }
+.stagger > *:nth-child(6) { animation-delay: 170ms; }
+.stagger > *:nth-child(7) { animation-delay: 200ms; }
+.stagger > *:nth-child(8) { animation-delay: 230ms; }
+/* Hero greeting — gradient text */
+.hero-title {
+  background: linear-gradient(120deg,
+    var(--fg-0) 0%,
+    var(--fg-0) 40%,
+    color-mix(in oklch, var(--accent) 70%, var(--fg-0)) 65%,
+    color-mix(in oklch, var(--violet) 80%, var(--fg-0)) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: shimmer 8s ease-in-out infinite;
+}
+@keyframes shimmer {
+  0%, 100% { background-position: 0% 50%; }
+  50%      { background-position: 100% 50%; }
+}
+/* Stat counters — editorial numerals */
+.stat-num {
+  font-family: var(--font-editorial);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  background: linear-gradient(180deg, var(--fg-0) 0%, color-mix(in oklch, var(--fg-0) 70%, var(--accent)) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+/* Segmented pill — animated selection glow */
+.segmented button.on {
+  background: linear-gradient(135deg,
+    color-mix(in oklch, var(--bg-3) 100%, transparent),
+    color-mix(in oklch, var(--accent) 12%, var(--bg-3)));
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 0.2),
+    inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
+}
+/* Icon button — ripple on click (CSS-only pulse) */
+.icon-btn { transition: background 140ms, color 140ms, transform 120ms; }
+.icon-btn:active { transform: scale(0.92); }
+/* Kanban column header counter — subtle badge */
+.col-badge {
+  background: color-mix(in oklch, var(--accent) 16%, var(--bg-2));
+  color: var(--accent);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+}
+/* Burndown actual line — glow */
+.burndown-actual { filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 60%, transparent)); }
+/* Velocity bars — gradient */
+.velo-bar {
+  background: linear-gradient(180deg,
+    color-mix(in oklch, var(--accent) 90%, transparent) 0%,
+    color-mix(in oklch, var(--accent) 30%, var(--bg-3)) 100%);
+  box-shadow: 0 0 12px -3px var(--accent);
+}
+.velo-bar.dim {
+  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
+  box-shadow: none;
+}
+/* Roadmap bar — gradient fill with progress wipe */
+.roadmap-bar {
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+}
+.roadmap-bar::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--proj, var(--accent)) 55%, transparent) 0%,
+    color-mix(in oklch, var(--proj, var(--accent)) 18%, transparent) 100%);
+  opacity: 0.9;
+  mix-blend-mode: screen;
+}
+/* Gradient divider */
+.grad-divider {
+  height: 1px;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    var(--border-strong) 20%,
+    var(--border-strong) 80%,
+    transparent 100%);
+}
+/* Command palette — glassmorphism */
+.palette {
+  background: color-mix(in oklch, var(--bg-elev) 85%, transparent);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--border-strong));
+  box-shadow:
+    0 24px 80px -20px oklch(0 0 0 / 0.6),
+    0 0 0 1px color-mix(in oklch, var(--accent) 10%, transparent),
+    inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
+  animation: palette-in 240ms cubic-bezier(0.2, 0, 0, 1);
+}
+@keyframes palette-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+.palette-item { transition: background 120ms, color 120ms, transform 100ms; }
+.palette-item.sel {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--accent) 14%, transparent),
+    transparent);
+}
+/* Inbox panel — glass */
+.inbox-panel {
+  background: color-mix(in oklch, var(--bg-1) 82%, transparent);
+  backdrop-filter: blur(18px);
+}
+/* Tweaks panel — glass */
+.tweaks {
+  background: color-mix(in oklch, var(--bg-elev) 78%, transparent);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border-strong));
+  box-shadow:
+    0 20px 60px -20px oklch(0 0 0 / 0.5),
+    0 0 0 1px color-mix(in oklch, var(--accent) 10%, transparent);
+}
+/* Hint bar — glass */
+.hint-bar {
+  background: color-mix(in oklch, var(--bg-elev) 80%, transparent);
+  backdrop-filter: blur(16px);
+}
+/* Row hover — subtle gradient sweep */
+.row { transition: background 160ms; position: relative; }
+.row:hover {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--accent) 6%, transparent) 0%,
+    var(--bg-1) 20%);
+}
+/* Avatar stack — gradient bg (override flat) */
+.avatar {
+  transition: transform 140ms;
+}
+.avatar:hover { transform: translateY(-1px) scale(1.06); z-index: 2; }
+/* Notification dot pulse */
+.icon-btn .dot {
+  animation: dot-pulse 2.4s ease-in-out infinite;
+  box-shadow: 0 0 8px -1px var(--accent);
+}
+@keyframes dot-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.3); opacity: 0.65; }
+}
+/* Gradient progress track */
+.grad-progress {
+  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 60%, var(--violet)) 100%);
+  box-shadow: 0 0 10px -3px var(--accent);
+}
+/* Subtle scan line on data cards */
+.scan::before {
+  content: "";
+  position: absolute;
+  top: 0; left: -50%;
+  width: 50%; height: 100%;
+  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 8%, transparent), transparent);
+  animation: scan 6s linear infinite;
+  pointer-events: none;
+}
+@keyframes scan {
+  to { left: 150%; }
+}
+/* Issue detail hero — spotlight */
+.issue-spotlight {
+  position: relative;
+}
+.issue-spotlight::before {
+  content: "";
+  position: absolute;
+  top: -40px; left: -40px; right: -40px; height: 200px;
+  background: radial-gradient(ellipse 60% 100% at 20% 50%,
+    color-mix(in oklch, var(--accent) 10%, transparent) 0%,
+    transparent 60%);
+  z-index: -1;
+  pointer-events: none;
+}
+/* Tag / chip gradient on hover */
+.chip:hover, .tag:hover {
+  border-color: var(--border-strong);
+  background: color-mix(in oklch, var(--bg-3) 100%, transparent);
+}
+/* Kanban column boundary glow on drop target sim */
+.kanban-col {
+  position: relative;
+}
+/* Make topbar breadcrumb current accent on active */
+.breadcrumbs .current {
+  background: linear-gradient(90deg, var(--fg-0), color-mix(in oklch, var(--accent) 50%, var(--fg-0)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+/* reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}

views-ai-marketplace.jsx ADDED Viewed

	@@ -0,0 +1,686 @@

+// AI Marketplace — Studios, Model APIs, Storage, Templates
+const STUDIO_GPU_TABLE = [
+  { id: "v520",  name: "V520",     speed: 18,   mem: 8,   cpus: 8,   priceHr: 0.29, spot: 0.15,  wait: 2, avail: true },
+  { id: "v620",  name: "V620",     speed: 105,  mem: 32,  cpus: 8,   priceHr: 0.53, spot: 0.27,  wait: 2, avail: true },
+  { id: "w7800", name: "W7800",    speed: 89,   mem: 32,  cpus: 16,  priceHr: 1.67, spot: 0.84,  wait: 2, avail: true },
+  { id: "w7900", name: "W7900",    speed: 123,  mem: 48,  cpus: 48,  priceHr: 1.43, spot: 0.72,  wait: 2, avail: true },
+  { id: "mi210", name: "MI210",    speed: 181,  mem: 64,  cpus: 30,  priceHr: 3.06, spot: 1.53,  wait: 2, avail: true },
+  { id: "mi250x",name: "MI250X",   speed: 383,  mem: 128, cpus: 26,  priceHr: 5.17, spot: 2.59,  wait: 2, avail: true },
+  { id: "mi300a",name: "MI300A",   speed: 3800, mem: 128, cpus: 16,  priceHr: 6.99, spot: null,  wait: 3, avail: false },
+  { id: "mi300x",name: "MI300X",   speed: 10496,mem: 192, cpus: 224, priceHr: 35.91, spot: null, wait: 4, avail: true },
+];
+const STUDIO_TYPES = [
+  { id: "ai-dev",   label: "AI development", icon: "code",      desc: "Jupyter + VS Code + GPU access" },
+  { id: "python",   label: "Python",          icon: "sprint",    desc: "Pure compute environment" },
+  { id: "comfy",    label: "ComfyUI",         icon: "component", desc: "Image & video gen workflows" },
+  { id: "training", label: "Training run",    icon: "bolt",      desc: "Distributed model training" },
+  { id: "inference",label: "Inference server",icon: "play",      desc: "vLLM / TGI serving endpoint" },
+];
+const GPU_QTY = [1, 2, 4, 8];
+const LLM_MODELS = [
+  { id: "nexacore-72b",     name: "NexaCore-72B",       provider: "VaultMind Labs", category: "reasoning",  ctx: "128k", inputPrice: 8.00,  outputPrice: 24.00, badge: "FLAGSHIP",  badgeC: "var(--accent)",            latency: "~2.1s",  features: ["Chain-of-thought","Code interpreter","Function calling","JSON mode"] },
+  { id: "vaultmind-34b",    name: "VaultMind-34B",      provider: "VaultMind Labs", category: "general",    ctx: "64k",  inputPrice: 2.00,  outputPrice: 6.00,  badge: "POPULAR",   badgeC: "oklch(0.78 0.13 220)",    latency: "~0.8s",  features: ["Function calling","JSON mode","Streaming"] },
+  { id: "arclight-7b",      name: "ArcLight-7B",        provider: "VaultMind Labs", category: "fast",       ctx: "32k",  inputPrice: 0.20,  outputPrice: 0.40,  badge: "FAST",      badgeC: "oklch(0.80 0.14 75)",     latency: "~0.15s", features: ["Ultra-low latency","High throughput"] },
+  { id: "deepchroma-vis",   name: "DeepChroma Vision",  provider: "ChromaAI",       category: "multimodal", ctx: "32k",  inputPrice: 3.50,  outputPrice: 10.50, badge: "VISION",    badgeC: "oklch(0.72 0.18 300)",    latency: "~1.4s",  features: ["Image input","Document parsing","OCR","Chart analysis"] },
+  { id: "sonartext-embed",  name: "SonarText Embed",    provider: "SonarAI",        category: "embedding",  ctx: "8k",   inputPrice: 0.02,  outputPrice: null,  badge: "EMBED",     badgeC: "oklch(0.78 0.13 220)",    latency: "~40ms",  features: ["1536-dim vectors","Batch API","MTEB top-5"] },
+  { id: "novasynth-audio",  name: "NovaSynth Audio",    provider: "NovaSynth",      category: "audio",      ctx: "—",    inputPrice: 0.006, outputPrice: null,  badge: "AUDIO",     badgeC: "oklch(0.72 0.17 20)",     latency: "~200ms", features: ["ASR","Diarization","Translation","Timestamps"] },
+];
+const STORAGE_PLANS = [
+  { id: "obj",   name: "Object Storage",   priceGb: 0.022, iops: "—",    throughput: "Up to 2 GB/s",  features: ["S3-compatible API","Multi-region replication","Lifecycle rules","Versioning"] },
+  { id: "ssd",   name: "SSD Block",        priceGb: 0.08,  iops: "50k",  throughput: "Up to 8 GB/s",  features: ["NFS / iSCSI mount","Snapshots","Low latency","Resize online"] },
+  { id: "nvme",  name: "NVMe Ultra",       priceGb: 0.18,  iops: "500k", throughput: "Up to 30 GB/s", features: ["Direct attach","Sub-100µs latency","Ideal for training","Non-volatile"] },
+];
+const TEMPLATES = [
+  { id: "llm-ft",    name: "LLM Fine-tuning",       gpu: "MI210 64 GB", icon: "sprint",    tags: ["PyTorch","LoRA","HuggingFace"],  desc: "LoRA / QLoRA fine-tuning with Accelerate & Transformers." },
+  { id: "rag",       name: "RAG Pipeline",           gpu: "W7800",       icon: "database",  tags: ["LangChain","pgvector","FastAPI"], desc: "Vector store + retrieval-augmented generation ready to deploy." },
+  { id: "sdxl",      name: "Stable Diffusion XL",   gpu: "W7900",   icon: "star",      tags: ["Diffusers","ComfyUI","LoRA"],     desc: "SDXL inference + LoRA training environment pre-configured." },
+  { id: "whisper",   name: "Whisper Transcription",  gpu: "V520",         icon: "message",   tags: ["Whisper","FastAPI","Batch"],      desc: "Large-v3 Whisper for batch audio transcription at scale." },
+  { id: "vision",    name: "Vision Classifier",      gpu: "V620",         icon: "eye",       tags: ["torchvision","ViT","W&B"],        desc: "EfficientNet / ViT training with Weights & Biases logging." },
+  { id: "embed-srv", name: "Embedding Server",       gpu: "V520",         icon: "component", tags: ["vLLM","FastAPI","Redis"],         desc: "Deploy your own embedding model with vLLM + FastAPI caching." },
+];
+// ---- Studios Tab ----
+const StudiosTab = () => {
+  const [studioType, setStudioType]   = React.useState("ai-dev");
+  const [selectedGpu, setSelectedGpu] = React.useState("w7800");
+  const [qty, setQty]                 = React.useState(1);
+  const [interruptible, setInterruptible] = React.useState(true);
+  const [mode, setMode]               = React.useState("gpu");
+  const [launching, setLaunching]     = React.useState(false);
+  const gpu = STUDIO_GPU_TABLE.find(g => g.id === selectedGpu) || STUDIO_GPU_TABLE[2];
+  const effectivePrice = interruptible && gpu.spot ? gpu.spot : gpu.priceHr;
+  const totalHr = (effectivePrice * qty).toFixed(2);
+  const launch = () => {
+    if (!gpu.avail) { window.toast("GPU unavailable as interruptible"); return; }
+    setLaunching(true);
+    setTimeout(() => {
+      setLaunching(false);
+      window.toast(`Studio launched — ${qty}× ${gpu.name} · $${totalHr}/hr`);
+    }, 1600);
+  };
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 20 }}>
+      {/* Left */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {/* Studio type */}
+        <div className="card" style={{ padding: 16 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 12 }}>Studio type</div>
+          <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 2 }}>
+            {STUDIO_TYPES.map(t => (
+              <button
+                key={t.id}
+                onClick={() => setStudioType(t.id)}
+                style={{
+                  flexShrink: 0, padding: "12px 16px", borderRadius: 10,
+                  border: `1.5px solid ${studioType === t.id ? "var(--accent)" : "var(--border)"}`,
+                  background: studioType === t.id ? "var(--accent-soft)" : "var(--bg-1)",
+                  cursor: "pointer", textAlign: "center", minWidth: 120,
+                  transition: "border-color .15s, background .15s",
+                }}
+              >
+                <Icon name={t.icon} size={18} style={{ color: studioType === t.id ? "var(--accent)" : "var(--fg-2)", marginBottom: 6, display: "block", margin: "0 auto 8px" }} />
+                <div style={{ fontSize: 12, fontWeight: 600, color: studioType === t.id ? "var(--fg-0)" : "var(--fg-1)" }}>{t.label}</div>
+                <div style={{ fontSize: 10.5, color: "var(--fg-3)", marginTop: 3 }}>{t.desc}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+        {/* Machine grid */}
+        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+          <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", flex: 1 }}>Machine</div>
+            <div className="segmented">
+              <button className={mode === "cpu" ? "on" : ""} onClick={() => setMode("cpu")}>CPU</button>
+              <button className={mode === "gpu" ? "on" : ""} onClick={() => setMode("gpu")}>GPU</button>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <span style={{ fontSize: 11.5, color: "var(--fg-2)" }}>Interruptible</span>
+              <button
+                onClick={() => setInterruptible(v => !v)}
+                style={{
+                  width: 32, height: 18, borderRadius: 9, border: "none", cursor: "pointer",
+                  background: interruptible ? "var(--accent)" : "var(--bg-3)",
+                  position: "relative", transition: "background .2s", flexShrink: 0,
+                }}
+              >
+                <span style={{
+                  position: "absolute", top: 2, left: interruptible ? 16 : 2,
+                  width: 14, height: 14, borderRadius: "50%", background: "#fff",
+                  transition: "left .2s", display: "block",
+                }} />
+              </button>
+            </div>
+          </div>
+          {/* Table header */}
+          <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 100px 90px 70px 130px 80px", padding: "6px 16px", borderBottom: "1px solid var(--border-subtle)", fontSize: 10.5, color: "var(--fg-3)", fontWeight: 600, letterSpacing: ".05em", textTransform: "uppercase" }}>
+            <span>Qty</span><span>Model</span><span>Speed (TFLOPs)</span><span>Memory (GB)</span><span>CPUs</span><span>Cost (/hour)</span><span>Wait (min)</span>
+          </div>
+          {STUDIO_GPU_TABLE.map(g => {
+            const sel = selectedGpu === g.id;
+            const effectiveP = interruptible && g.spot ? g.spot : g.priceHr;
+            return (
+              <div
+                key={g.id}
+                onClick={() => { if (!(!g.avail && interruptible)) setSelectedGpu(g.id); }}
+                style={{
+                  display: "grid", gridTemplateColumns: "80px 1fr 100px 90px 70px 130px 80px",
+                  padding: "9px 16px", borderBottom: "1px solid var(--border-subtle)",
+                  background: sel ? "var(--accent-soft)" : "transparent",
+                  cursor: (!g.avail && interruptible) ? "not-allowed" : "pointer",
+                  opacity: (!g.avail && interruptible) ? 0.45 : 1,
+                  transition: "background .12s",
+                  alignItems: "center",
+                }}
+              >
+                {/* Qty buttons */}
+                <div style={{ display: "flex", gap: 3 }}>
+                  {GPU_QTY.map(n => (
+                    <button
+                      key={n}
+                      onClick={e => { e.stopPropagation(); setSelectedGpu(g.id); setQty(n); }}
+                      style={{
+                        width: 16, height: 16, fontSize: 9, borderRadius: 3, border: "none",
+                        background: sel && qty === n ? "var(--accent)" : "var(--bg-3)",
+                        color: sel && qty === n ? "var(--accent-fg)" : "var(--fg-2)",
+                        cursor: "pointer", fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center",
+                      }}
+                    >{n}</button>
+                  ))}
+                </div>
+                <span style={{ fontSize: 13, fontWeight: sel ? 600 : 400, color: sel ? "var(--fg-0)" : "var(--fg-1)" }}>{g.name}</span>
+                <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-2)" }}>{g.speed.toLocaleString()}</span>
+                <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-2)" }}>{g.mem}</span>
+                <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-2)" }}>{g.cpus}</span>
+                <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                  {interruptible && g.spot && (
+                    <span className="mono" style={{ fontSize: 10, color: "var(--fg-3)", textDecoration: "line-through" }}>${g.priceHr.toFixed(2)}</span>
+                  )}
+                  <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: sel ? "var(--accent)" : "var(--fg-0)" }}>
+                    ${(effectiveP * qty).toFixed(2)}
+                  </span>
+                </span>
+                <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                  {!g.avail && interruptible
+                    ? <span style={{ fontSize: 10.5, color: "oklch(0.80 0.14 75)" }}>⚠ Unavailable</span>
+                    : <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-2)" }}>{g.wait} min</span>
+                  }
+                </span>
+              </div>
+            );
+          })}
+          <div style={{ padding: "8px 16px", fontSize: 10.5, color: "var(--fg-3)" }}>
+            ⚡ Interruptible machines are 40–60% cheaper but may experience data loss on preemption.
+          </div>
+        </div>
+      </div>
+      {/* Right — summary + launch */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div className="card" style={{ padding: 16 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 14 }}>Teamspace</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", background: "var(--bg-0)", border: "1px solid var(--border)", borderRadius: 7 }}>
+            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", flexShrink: 0 }} />
+            <span style={{ fontSize: 12.5, flex: 1 }}>model-performance-assessment-project</span>
+            <Icon name="chevron-down" size={13} style={{ color: "var(--fg-3)" }} />
+          </div>
+        </div>
+        <div className="card" style={{ padding: 16 }}>
+          <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Summary</strong>
+          <div className="divider" />
+          {[
+            { label: "Studio type", value: STUDIO_TYPES.find(t => t.id === studioType)?.label },
+            { label: "Machine",     value: `${qty}× ${gpu.name}` },
+            { label: "Memory",      value: `${gpu.mem * qty} GB` },
+            { label: "CPUs",        value: gpu.cpus * qty },
+            { label: "Mode",        value: interruptible && gpu.spot ? "Interruptible" : "On-demand" },
+          ].map(r => (
+            <div key={r.label} className="flex items-center justify-between" style={{ padding: "5px 0", fontSize: 12.5 }}>
+              <span className="muted">{r.label}</span>
+              <span className="mono" style={{ fontWeight: 500 }}>{r.value}</span>
+            </div>
+          ))}
+          <div className="divider" />
+          <div className="flex items-center justify-between" style={{ padding: "6px 0" }}>
+            <span style={{ fontSize: 13 }}>Rate</span>
+            <span style={{ fontSize: 20, fontWeight: 700, color: "var(--accent)", fontFamily: "var(--font-mono)" }}>
+              ${totalHr}<span style={{ fontSize: 11, fontWeight: 400, color: "var(--fg-3)" }}>/hr</span>
+            </span>
+          </div>
+          {interruptible && gpu.spot && (
+            <div className="mono muted-2" style={{ fontSize: 10.5, marginTop: 2 }}>
+              Saved ${((gpu.priceHr - gpu.spot) * qty).toFixed(2)}/hr vs on-demand
+            </div>
+          )}
+        </div>
+        <button
+          className="btn primary"
+          style={{ width: "100%", padding: "12px", fontSize: 14, fontWeight: 600, opacity: launching ? 0.6 : 1 }}
+          onClick={launch}
+          disabled={launching}
+        >
+          {launching
+            ? <><Icon name="clock" size={14} /> Starting studio…</>
+            : <><Icon name="bolt" size={14} /> Launch studio</>
+          }
+        </button>
+        <div className="card" style={{ padding: 14 }}>
+          <div className="muted-2 mono" style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 10 }}>Live availability</div>
+          {[
+            { label: "MI300X",  slots: 2 },
+            { label: "MI250X",  slots: 8 },
+            { label: "W7800",      slots: 11 },
+            { label: "W7900",  slots: 5 },
+            { label: "V520",        slots: 24 },
+          ].map(a => (
+            <div key={a.label} className="flex items-center justify-between" style={{ fontSize: 11.5, padding: "3px 0" }}>
+              <span className="mono">{a.label}</span>
+              <span style={{ color: a.slots > 8 ? "var(--accent)" : a.slots > 2 ? "oklch(0.80 0.14 75)" : "oklch(0.72 0.17 20)" }}>
+                {a.slots} free
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+// ---- Model APIs Tab ----
+const ModelAPIsTab = () => {
+  const [categoryFilter, setCategoryFilter] = React.useState("all");
+  const [activeModel, setActiveModel]       = React.useState(null);
+  const [testInput, setTestInput]           = React.useState("Explain transformer attention in 2 sentences.");
+  const [testRunning, setTestRunning]       = React.useState(false);
+  const [testOutput, setTestOutput]         = React.useState("");
+  const categories = ["all", "reasoning", "general", "fast", "multimodal", "embedding", "audio"];
+  const filtered = categoryFilter === "all" ? LLM_MODELS : LLM_MODELS.filter(m => m.category === categoryFilter);
+  const runTest = () => {
+    if (!testInput.trim()) return;
+    setTestRunning(true);
+    setTestOutput("");
+    const responses = [
+      "Transformer attention computes a weighted sum over all input tokens, where weights are derived from dot-product similarity between query and key vectors. This allows the model to dynamically focus on the most relevant parts of the sequence regardless of distance.",
+      "Attention mechanisms let each token in a sequence selectively attend to all other tokens by computing compatibility scores scaled by the square root of the key dimension. The result is a context-aware representation that enables long-range dependency modeling.",
+    ];
+    const resp = responses[Math.floor(Math.random() * responses.length)];
+    let i = 0;
+    const iv = setInterval(() => {
+      setTestOutput(resp.slice(0, i));
+      i += 3;
+      if (i > resp.length) { clearInterval(iv); setTestRunning(false); }
+    }, 18);
+  };
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 20 }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {/* Category filter */}
+        <div className="flex items-center gap-8" style={{ flexWrap: "wrap" }}>
+          {categories.map(c => (
+            <button
+              key={c}
+              onClick={() => setCategoryFilter(c)}
+              style={{
+                padding: "5px 12px", borderRadius: 20, fontSize: 12, fontWeight: 500,
+                border: `1.5px solid ${categoryFilter === c ? "var(--accent)" : "var(--border)"}`,
+                background: categoryFilter === c ? "var(--accent-soft)" : "var(--bg-1)",
+                color: categoryFilter === c ? "var(--accent)" : "var(--fg-1)",
+                cursor: "pointer", textTransform: "capitalize",
+              }}
+            >{c}</button>
+          ))}
+        </div>
+        {/* Model cards */}
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
+          {filtered.map(m => (
+            <button
+              key={m.id}
+              onClick={() => setActiveModel(activeModel?.id === m.id ? null : m)}
+              style={{
+                textAlign: "left", padding: 16, borderRadius: 12,
+                border: `1.5px solid ${activeModel?.id === m.id ? "var(--accent)" : "var(--border)"}`,
+                background: activeModel?.id === m.id ? "var(--accent-soft)" : "var(--bg-1)",
+                cursor: "pointer", transition: "border-color .15s, background .15s",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 6 }}>
+                <div>
+                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{m.name}</div>
+                  <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 1 }}>{m.provider}</div>
+                </div>
+                <span style={{
+                  fontSize: 9, padding: "2px 6px", borderRadius: 4, fontFamily: "var(--font-mono)", fontWeight: 700,
+                  background: m.badgeC + "22", color: m.badgeC,
+                }}>{m.badge}</span>
+              </div>
+              <div style={{ fontSize: 11.5, color: "var(--fg-2)", marginBottom: 10, lineHeight: 1.5 }}>{m.desc}</div>
+              <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 10 }}>
+                {m.features.map(f => (
+                  <span key={f} style={{ fontSize: 10, padding: "2px 6px", borderRadius: 4, background: "var(--bg-3)", color: "var(--fg-2)" }}>{f}</span>
+                ))}
+              </div>
+              <div className="divider" style={{ margin: "8px 0" }} />
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 11.5 }}>
+                <div>
+                  <span className="mono" style={{ fontWeight: 600, color: "var(--fg-0)" }}>${m.inputPrice.toFixed(3)}</span>
+                  <span className="muted-2"> in</span>
+                  {m.outputPrice && <>
+                    <span className="muted-2"> · </span>
+                    <span className="mono" style={{ fontWeight: 600, color: "var(--fg-0)" }}>${m.outputPrice.toFixed(2)}</span>
+                    <span className="muted-2"> out</span>
+                  </>}
+                  <span className="muted-2"> /1M tokens</span>
+                </div>
+                <div style={{ display: "flex", gap: 10 }}>
+                  <span className="mono muted-2" style={{ fontSize: 10 }}>ctx {m.ctx}</span>
+                  <span className="mono muted-2" style={{ fontSize: 10 }}>{m.latency}</span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+      {/* Right — test panel */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {activeModel ? (
+          <>
+            <div className="card" style={{ padding: 16 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                <span style={{ fontSize: 9, padding: "2px 6px", borderRadius: 4, fontFamily: "var(--font-mono)", fontWeight: 700, background: activeModel.badgeC + "22", color: activeModel.badgeC }}>{activeModel.badge}</span>
+                <strong style={{ fontSize: 13 }}>{activeModel.name}</strong>
+              </div>
+              <div style={{ fontSize: 11.5, color: "var(--fg-2)", lineHeight: 1.6, marginBottom: 12 }}>{activeModel.desc}</div>
+              <div className="divider" />
+              {[
+                { label: "Context", value: activeModel.ctx },
+                { label: "Input",   value: `$${activeModel.inputPrice.toFixed(3)} /1M tokens` },
+                { label: "Output",  value: activeModel.outputPrice ? `$${activeModel.outputPrice.toFixed(2)} /1M tokens` : "N/A" },
+                { label: "Latency", value: activeModel.latency },
+              ].map(r => (
+                <div key={r.label} className="flex items-center justify-between" style={{ padding: "4px 0", fontSize: 12 }}>
+                  <span className="muted">{r.label}</span>
+                  <span className="mono">{r.value}</span>
+                </div>
+              ))}
+            </div>
+            <div className="card" style={{ padding: 16 }}>
+              <strong style={{ fontSize: 12, display: "block", marginBottom: 8 }}>Quick test</strong>
+              <textarea
+                value={testInput}
+                onChange={e => setTestInput(e.target.value)}
+                rows={3}
+                style={{
+                  width: "100%", resize: "vertical", padding: "8px 10px",
+                  background: "var(--bg-0)", border: "1px solid var(--border)",
+                  borderRadius: 7, fontSize: 12, outline: "none", boxSizing: "border-box",
+                  fontFamily: "var(--font-mono)", color: "var(--fg-0)",
+                }}
+              />
+              <button
+                className="btn primary sm"
+                style={{ width: "100%", marginTop: 8, opacity: testRunning ? 0.6 : 1 }}
+                onClick={runTest}
+                disabled={testRunning}
+              >
+                {testRunning ? <><Icon name="clock" size={12} /> Generating…</> : <><Icon name="play" size={12} /> Run</>}
+              </button>
+              {(testOutput || testRunning) && (
+                <div style={{ marginTop: 10, padding: "10px 12px", background: "var(--bg-0)", border: "1px solid var(--border-subtle)", borderRadius: 7, fontSize: 11.5, lineHeight: 1.65, minHeight: 60, fontFamily: "var(--font-mono)", color: "var(--fg-1)", whiteSpace: "pre-wrap" }}>
+                  {testOutput || <span className="muted-2">…</span>}
+                  {testRunning && <span style={{ animation: "pulse 1s infinite", color: "var(--accent)" }}>▍</span>}
+                </div>
+              )}
+            </div>
+            <button className="btn primary" style={{ width: "100%" }} onClick={() => window.toast(`API key created for ${activeModel.name}`)}>
+              <Icon name="plus" size={13} /> Create API key
+            </button>
+          </>
+        ) : (
+          <div className="card" style={{ padding: 32, textAlign: "center" }}>
+            <Icon name="sparkle" size={28} style={{ color: "var(--fg-3)", marginBottom: 12 }} />
+            <div style={{ fontSize: 13.5, fontWeight: 500, marginBottom: 6 }}>Select a model</div>
+            <div style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.6 }}>Pick any model from the list to see pricing details and run a quick test.</div>
+          </div>
+        )}
+        <div className="card" style={{ padding: 14 }}>
+          <div className="muted-2 mono" style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 10 }}>API usage this month</div>
+          {[
+            { model: "VaultMind-34B", tokens: "2.4M", cost: "$4.80" },
+            { model: "ArcLight-7B",   tokens: "18.1M", cost: "$3.62" },
+            { model: "SonarText",     tokens: "44.2M", cost: "$0.88" },
+          ].map(u => (
+            <div key={u.model} className="flex items-center justify-between" style={{ fontSize: 11.5, padding: "3px 0" }}>
+              <span className="truncate" style={{ flex: 1 }}>{u.model}</span>
+              <span className="mono muted-2" style={{ marginRight: 8 }}>{u.tokens}</span>
+              <span className="mono" style={{ color: "var(--fg-0)" }}>{u.cost}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+// ---- Storage Tab ----
+const StorageTab = () => {
+  const [selectedPlan, setSelectedPlan] = React.useState("obj");
+  const [sizeGb, setSizeGb]             = React.useState(500);
+  const plan = STORAGE_PLANS.find(p => p.id === selectedPlan);
+  const monthlyCost = (plan.priceGb * sizeGb).toFixed(2);
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 300px", gap: 20 }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
+          {STORAGE_PLANS.map(p => (
+            <button
+              key={p.id}
+              onClick={() => setSelectedPlan(p.id)}
+              style={{
+                textAlign: "left", padding: 16, borderRadius: 12,
+                border: `1.5px solid ${selectedPlan === p.id ? "var(--accent)" : "var(--border)"}`,
+                background: selectedPlan === p.id ? "var(--accent-soft)" : "var(--bg-1)",
+                cursor: "pointer", transition: "border-color .15s, background .15s",
+              }}
+            >
+              <Icon name="database" size={18} style={{ color: selectedPlan === p.id ? "var(--accent)" : "var(--fg-3)", marginBottom: 10 }} />
+              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{p.name}</div>
+              <div style={{ fontSize: 20, fontWeight: 700, color: "var(--accent)", fontFamily: "var(--font-mono)", marginBottom: 2 }}>
+                ${p.priceGb.toFixed(3)}<span style={{ fontSize: 11, fontWeight: 400, color: "var(--fg-3)" }}>/GB/mo</span>
+              </div>
+              <div style={{ fontSize: 11, color: "var(--fg-3)", marginBottom: 10 }}>{p.throughput}</div>
+              <div className="divider" />
+              {p.features.map(f => (
+                <div key={f} className="flex items-center gap-6" style={{ padding: "3px 0", fontSize: 11.5 }}>
+                  <Icon name="check" size={11} style={{ color: "var(--accent)", flexShrink: 0 }} strokeWidth={2.5} />
+                  <span className="muted">{f}</span>
+                </div>
+              ))}
+            </button>
+          ))}
+        </div>
+        <div className="card" style={{ padding: 16 }}>
+          <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Configure volume</strong>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+            <div>
+              <label style={{ fontSize: 11.5, color: "var(--fg-2)", display: "block", marginBottom: 6 }}>Volume name</label>
+              <input
+                defaultValue="training-data-vol-1"
+                style={{ width: "100%", padding: "8px 10px", background: "var(--bg-0)", border: "1px solid var(--border)", borderRadius: 7, fontSize: 12.5, outline: "none", boxSizing: "border-box" }}
+              />
+            </div>
+            <div>
+              <label style={{ fontSize: 11.5, color: "var(--fg-2)", display: "block", marginBottom: 6 }}>Region</label>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", background: "var(--bg-0)", border: "1px solid var(--border)", borderRadius: 7 }}>
+                <span style={{ fontSize: 12.5, flex: 1 }}>US East (N. Virginia)</span>
+                <Icon name="chevron-down" size={13} style={{ color: "var(--fg-3)" }} />
+              </div>
+            </div>
+          </div>
+          <div style={{ marginTop: 14 }}>
+            <label style={{ fontSize: 11.5, color: "var(--fg-2)", display: "block", marginBottom: 6 }}>
+              Size: <strong className="mono">{sizeGb >= 1024 ? (sizeGb / 1024).toFixed(1) + " TB" : sizeGb + " GB"}</strong>
+            </label>
+            <input
+              type="range" min="10" max="10240" step="10" value={sizeGb}
+              onChange={e => setSizeGb(Number(e.target.value))}
+              style={{ width: "100%", accentColor: "var(--accent)" }}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-3)", marginTop: 2 }}>
+              <span>10 GB</span><span>1 TB</span><span>10 TB</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Right */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div className="card" style={{ padding: 16 }}>
+          <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Estimate</strong>
+          <div className="divider" />
+          {[
+            { label: "Plan",       value: plan.name },
+            { label: "Size",       value: sizeGb >= 1024 ? (sizeGb / 1024).toFixed(1) + " TB" : sizeGb + " GB" },
+            { label: "IOPS",       value: plan.iops },
+            { label: "Throughput", value: plan.throughput },
+          ].map(r => (
+            <div key={r.label} className="flex items-center justify-between" style={{ padding: "5px 0", fontSize: 12 }}>
+              <span className="muted">{r.label}</span>
+              <span className="mono">{r.value}</span>
+            </div>
+          ))}
+          <div className="divider" />
+          <div className="flex items-center justify-between" style={{ padding: "6px 0" }}>
+            <span style={{ fontSize: 13 }}>Monthly cost</span>
+            <span style={{ fontSize: 22, fontWeight: 700, color: "var(--accent)", fontFamily: "var(--font-mono)" }}>${monthlyCost}</span>
+          </div>
+        </div>
+        <button className="btn primary" style={{ width: "100%" }} onClick={() => window.toast("Volume provisioning started")}>
+          <Icon name="database" size={13} /> Create volume
+        </button>
+        <div className="card" style={{ padding: 14 }}>
+          <div className="muted-2 mono" style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 8 }}>Existing volumes</div>
+          {[
+            { name: "datasets-main",   size: "2 TB",   type: "Object",  used: 68 },
+            { name: "checkpoints-v3",  size: "500 GB", type: "SSD",     used: 42 },
+          ].map(v => (
+            <div key={v.name} style={{ padding: "7px 0", borderBottom: "1px solid var(--border-subtle)" }}>
+              <div className="flex items-center justify-between" style={{ marginBottom: 4 }}>
+                <span style={{ fontSize: 12, fontWeight: 500 }}>{v.name}</span>
+                <span className="mono muted-2" style={{ fontSize: 10 }}>{v.size} · {v.type}</span>
+              </div>
+              <div style={{ height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                <div style={{ width: `${v.used}%`, height: "100%", background: v.used > 80 ? "oklch(0.72 0.17 20)" : "var(--accent)" }} />
+              </div>
+              <span className="mono muted-2" style={{ fontSize: 10 }}>{v.used}% used</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+// ---- Templates Tab ----
+const TemplatesTab = () => {
+  const [deploying, setDeploying] = React.useState(null);
+  const deploy = (t) => {
+    setDeploying(t.id);
+    setTimeout(() => {
+      setDeploying(null);
+      window.toast(`Template "${t.name}" cloned — studio launching on ${t.gpu}`);
+    }, 1500);
+  };
+  return (
+    <div>
+      <div style={{ marginBottom: 16, fontSize: 13, color: "var(--fg-2)" }}>
+        One-click environments — pre-configured with the right GPU, framework, and starter code.
+      </div>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
+        {TEMPLATES.map(t => (
+          <div
+            key={t.id}
+            className="card"
+            style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <div style={{
+                width: 36, height: 36, borderRadius: 8, background: "var(--accent-soft)",
+                display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+              }}>
+                <Icon name={t.icon} size={16} style={{ color: "var(--accent)" }} />
+              </div>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</div>
+                <div className="mono muted-2" style={{ fontSize: 10.5 }}>{t.gpu}</div>
+              </div>
+            </div>
+            <div style={{ fontSize: 12, color: "var(--fg-2)", lineHeight: 1.55, flex: 1 }}>{t.desc}</div>
+            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+              {t.tags.map(tag => (
+                <span key={tag} style={{ fontSize: 10, padding: "2px 7px", borderRadius: 4, background: "var(--bg-3)", color: "var(--fg-2)", fontFamily: "var(--font-mono)" }}>{tag}</span>
+              ))}
+            </div>
+            <button
+              className="btn sm"
+              style={{ width: "100%", marginTop: 4, opacity: deploying === t.id ? 0.6 : 1 }}
+              onClick={() => deploy(t)}
+              disabled={deploying === t.id}
+            >
+              {deploying === t.id
+                ? <><Icon name="clock" size={12} /> Cloning…</>
+                : <><Icon name="play" size={12} /> Use template</>
+              }
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+// ---- Main view ----
+const AIMarketplaceView = () => {
+  const [tab, setTab] = React.useState("studios");
+  const TABS = [
+    { id: "studios",   label: "Studios",    icon: "bolt" },
+    { id: "models",    label: "Model APIs", icon: "sparkle" },
+    { id: "storage",   label: "Storage",    icon: "database" },
+    { id: "templates", label: "Templates",  icon: "component" },
+  ];
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title">
+          <Icon name="bolt" size={15} style={{ color: "var(--accent)" }} />
+          <span>AI Infrastructure</span>
+          <span className="chip mono" style={{ color: "var(--accent)" }}>Meridian</span>
+        </div>
+        <div className="topbar-spacer" />
+        <div className="segmented">
+          {TABS.map(t => (
+            <button key={t.id} className={tab === t.id ? "on" : ""} onClick={() => setTab(t.id)}>
+              <Icon name={t.icon} size={12} style={{ marginRight: 4 }} />
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <button className="btn ghost sm" onClick={() => window.toast("Docs opened")}>
+          <Icon name="docs" size={13} /> Docs
+        </button>
+        <button className="btn ghost sm" style={{ color: "var(--accent)" }}
+          onClick={() => window.openAI(
+            `I'm browsing the AI Infrastructure marketplace. Help me choose the right GPU and model for my use case.`,
+            "compute",
+            { gpus: STUDIO_GPU_TABLE, models: LLM_MODELS.map(m=>({id:m.id,name:m.name,category:m.category,inputPrice:m.inputPrice,outputPrice:m.outputPrice})) }
+          )}>
+          <Icon name="sparkle" size={13} /> AI Summary
+        </button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: 20 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          {tab === "studios"   && <StudiosTab />}
+          {tab === "models"    && <ModelAPIsTab />}
+          {tab === "storage"   && <StorageTab />}
+          {tab === "templates" && <TemplatesTab />}
+        </div>
+      </div>
+    </div>
+  );
+};
+window.AIMarketplaceView = AIMarketplaceView;

views-chat.jsx ADDED Viewed

	@@ -0,0 +1,294 @@

+const ReasoningSteps = ({ steps, status }) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const bottomRef = React.useRef(null);
+  const stepsArray = steps || [];
+  React.useEffect(() => {
+    if (isExpanded && bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [stepsArray.length, isExpanded]);
+  const getLatestText = () => {
+    if (stepsArray.length > 0) {
+      const lastStep = stepsArray[stepsArray.length - 1];
+      return typeof lastStep === 'object' ? (lastStep.content || lastStep.status || lastStep.thought) : lastStep;
+    }
+    return status || 'Processing...';
+  };
+  return (
+    <div className="flex col gap-8 mb-8" style={{ background: 'var(--bg-1)', padding: 12, borderRadius: 8, border: '1px solid var(--border)', cursor: 'pointer' }}
+         onClick={() => setIsExpanded(!isExpanded)}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-8">
+          {status ? <Icon name="bolt" size={12} style={{ color: 'var(--accent)' }} /> : <Icon name="check" size={12} style={{ color: 'var(--status-done)' }} />}
+          <span className="mono muted-2" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+            Reasoning Process {stepsArray.length > 0 ? `(${stepsArray.length})` : ''}
+          </span>
+        </div>
+        {stepsArray.length > 0 && (
+          <span className="mono muted-2" style={{ fontSize: 10 }}>{isExpanded ? 'Collapse' : 'Expand'}</span>
+        )}
+      </div>
+      {isExpanded && stepsArray.length > 0 ? (
+        <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {stepsArray.map((step, idx) => {
+            const stepText = typeof step === 'object' ? (step.content || step.status || step.thought || JSON.stringify(step)) : step;
+            return (
+              <div key={idx} className="flex gap-8" style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)', color: 'var(--fg-2)', lineHeight: 1.4 }}>
+                <span style={{ color: 'var(--fg-3)', width: 16, textAlign: 'right', flexShrink: 0 }}>{idx + 1}</span>
+                <span style={{ flex: 1 }}>{stepText}</span>
+              </div>
+            );
+          })}
+          <div ref={bottomRef} />
+        </div>
+      ) : (
+        <div className="flex gap-8" style={{ marginTop: 4, fontSize: 11.5, fontFamily: 'var(--font-mono)', color: 'var(--fg-2)' }}>
+          <span style={{ color: 'var(--fg-3)', width: 16, textAlign: 'right' }}>{stepsArray.length > 0 ? '>' : ''}</span>
+          <span className="truncate" style={{ fontStyle: 'italic' }}>{getLatestText()}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+const ChatView = () => {
+  const [messages, setMessages] = React.useState([]);
+  const [input, setInput] = React.useState('');
+  const [isTyping, setIsTyping] = React.useState(false);
+  const [activeSession, setActiveSession] = React.useState(null);
+  const scrollRef = React.useRef(null);
+  const token = localStorage.getItem('meridian-token');
+  // Check for initial query if coming from Command Palette
+  React.useEffect(() => {
+    if (window.chatInitialQuery) {
+      const q = window.chatInitialQuery;
+      window.chatInitialQuery = null;
+      // Small delay so the view is mounted
+      setTimeout(() => sendMessage(q), 50);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isTyping]);
+  const sendMessage = async (text) => {
+    if (!text || !text.trim()) return;
+    if (isTyping) return;
+    const userMsg = { id: Date.now(), text, sender: 'user', timestamp: new Date() };
+    setMessages(prev => [...prev, userMsg]);
+    setIsTyping(true);
+    const typingId = Date.now() + 1;
+    const thinkingMsg = { id: typingId, text: '', sender: 'ai', timestamp: new Date(), status: 'Thinking...', steps: [] };
+    setMessages(prev => [...prev, thinkingMsg]);
+    const liveSteps = [
+      'Parsing query...', 'Searching issues and PRs...',
+      'Cross-referencing sprint data...', 'Analyzing team and roadmap...', 'Composing response...',
+    ];
+    let stepIdx = 0;
+    const stepTimer = setInterval(() => {
+      if (stepIdx < liveSteps.length) {
+        const step = liveSteps[stepIdx++];
+        setMessages(prev => prev.map(msg =>
+          msg.id === typingId ? { ...msg, steps: [...(msg.steps || []), step] } : msg
+        ));
+      } else { clearInterval(stepTimer); }
+    }, 320);
+    try {
+      const key = window.getAmdUrl ? window.getAmdUrl() : '';
+      if (!key) throw new Error('AMD_URL_NOT_SET');
+      const history = messages.slice(-10).map(m => ({
+        role: m.sender === 'user' ? 'user' : 'assistant',
+        content: m.text
+      })).filter(m => m.content);
+      clearInterval(stepTimer);
+      // Stream from AMD
+      const res = await fetch(key, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer dummy-key` },
+        body: JSON.stringify({
+          model: 'llama-3.3-70b-versatile',
+          max_tokens: 1024,
+          stream: true,
+          messages: [
+            { role: 'system', content: 'You are VaultMind AI, the intelligent assistant for Meridian — a modern project management platform. You help engineering teams with issues, PRs, sprints, roadmap, docs, and compute jobs. Be concise, insightful, and proactive. Use markdown formatting.' },
+            ...history,
+            { role: 'user', content: text },
+          ],
+        }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error?.message || `AMD HTTP ${res.status}`);
+      }
+      // Read stream
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let fullText = '';
+      setMessages(prev => prev.map(msg =>
+        msg.id === typingId ? { ...msg, status: null, steps: liveSteps, text: '' } : msg
+      ));
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value);
+        const lines = chunk.split('\n').filter(l => l.startsWith('data: ') && l !== 'data: [DONE]');
+        for (const line of lines) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            const delta = data.choices?.[0]?.delta?.content || '';
+            if (delta) {
+              fullText += delta;
+              setMessages(prev => prev.map(msg =>
+                msg.id === typingId ? { ...msg, text: fullText } : msg
+              ));
+            }
+          } catch (_) {}
+        }
+      }
+      setMessages(prev => prev.map(msg =>
+        msg.id === typingId ? { ...msg, text: fullText, status: null, steps: liveSteps } : msg
+      ));
+    } catch (error) {
+      clearInterval(stepTimer);
+      console.error('Chat Error:', error);
+      const errText = error.message === 'AMD_URL_NOT_SET'
+        ? '⚠ No hay endpoint AMD configurado. Andá a **Settings → AI & Integrations** y pegá la URL de tu instancia AMD.'
+        : `⚠ ${error.message}`;
+      setMessages(prev => prev.map(msg =>
+        msg.id === typingId ? { ...msg, text: errText, status: null } : msg
+      ));
+    } finally {
+      setIsTyping(false);
+    }
+  };
+  const handleSend = (e) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+    const text = input;
+    setInput('');
+    sendMessage(text);
+  };
+  const renderMarkdown = (text) => {
+    if (!window.marked) return { __html: text };
+    return { __html: window.marked.parse(text) };
+  };
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0, height: '100%' }}>
+      <div className="page-header">
+        <div className="page-title">
+          <Icon name="sparkle" size={16} style={{ color: 'var(--accent)' }} />
+          <span>VaultMind AI</span>
+          <span className="chip mono" style={{ fontSize: 10, padding: '2px 7px', color: 'var(--amber)', borderColor: 'var(--amber)', opacity: 0.8 }}>demo</span>
+        </div>
+        <div className="topbar-spacer" />
+        <button className="btn sm ghost" onClick={() => { setMessages([]); setActiveSession(null); }}>
+          <Icon name="plus" size={12} /> New Chat
+        </button>
+      </div>
+      <div className="scroll-y flex col flex-1" ref={scrollRef} style={{ padding: "24px 28px" }}>
+        <div style={{ maxWidth: 800, margin: "0 auto", width: '100%', display: 'flex', flexDirection: 'column', gap: 24 }}>
+          {messages.length === 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 60 }}>
+              <Icon name="sparkle" size={32} style={{ opacity: 0.5, marginBottom: 16, color: 'var(--accent)' }} />
+              <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--fg-0)', marginBottom: 6 }}>How can I help you today?</div>
+              <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 32 }}>Ask me about your projects, issues, PRs, or team.</div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, width: '100%' }}>
+                {[
+                  { icon: 'sprint',   text: "What's the status of Iteration 42?" },
+                  { icon: 'issues',   text: "What's blocking the team right now?" },
+                  { icon: 'pr',       text: "Which PRs need attention?" },
+                  { icon: 'team',     text: "Who has capacity for new work?" },
+                  { icon: 'roadmap',  text: "Which milestones are at risk this quarter?" },
+                  { icon: 'sparkle',  text: "Give me today's standup brief" },
+                ].map((p, i) => (
+                  <button key={i} onClick={() => { if (!isTyping) sendMessage(p.text); }}
+                    style={{ textAlign: 'left', padding: '12px 14px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--bg-1)', cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--fg-1)', transition: 'border-color 0.15s' }}
+                    onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent-dim)'}
+                    onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
+                    <Icon name={p.icon} size={14} style={{ color: 'var(--fg-3)', marginTop: 1, flexShrink: 0 }} />
+                    <span>{p.text}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : (
+            messages.map((msg) => (
+              <div key={msg.id} style={{ display: 'flex', gap: 16, flexDirection: msg.sender === 'user' ? 'row-reverse' : 'row' }}>
+                <div style={{ width: 32, height: 32, borderRadius: 16, background: msg.sender === 'user' ? 'var(--accent)' : 'var(--bg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                  {msg.sender === 'user' ? <Icon name="team" size={16} style={{ color: '#000' }} /> : <Icon name="sparkle" size={16} style={{ color: 'var(--accent)' }} />}
+                </div>
+                <div style={{ maxWidth: '80%', padding: '12px 16px', borderRadius: 12, background: msg.sender === 'user' ? 'var(--accent-dim)' : 'var(--bg-1)', border: msg.sender === 'user' ? 'none' : '1px solid var(--border)', borderTopRightRadius: msg.sender === 'user' ? 2 : 12, borderTopLeftRadius: msg.sender === 'user' ? 12 : 2 }}>
+                  {(msg.steps?.length > 0 || msg.status) && (
+                    <ReasoningSteps steps={msg.steps || []} status={msg.status} />
+                  )}
+                  {!msg.status && msg.text && (
+                    <div
+                      className="markdown-body"
+                      style={{ fontSize: 14, lineHeight: 1.5, color: msg.sender === 'user' ? 'var(--fg-0)' : 'var(--fg-1)' }}
+                      dangerouslySetInnerHTML={renderMarkdown(msg.text)}
+                    />
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+      <div style={{ padding: "16px 28px", borderTop: "1px solid var(--border)", background: "var(--bg-0)" }}>
+        <div style={{ maxWidth: 800, margin: "0 auto", position: 'relative' }}>
+          <form onSubmit={handleSend} style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Ask VaultMind AI..."
+              style={{ flex: 1, padding: "12px 16px", borderRadius: 8, border: "1px solid var(--border)", background: "var(--bg-1)", color: "var(--fg-0)", outline: "none", fontSize: 14 }}
+            />
+            <button
+              type="submit"
+              disabled={!input.trim() || isTyping}
+              className="btn primary"
+              style={{ padding: "0 20px", height: 43, opacity: (!input.trim() || isTyping) ? 0.5 : 1 }}
+            >
+              <Icon name="arrow-up" size={16} />
+            </button>
+          </form>
+          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>
+            VaultMind AI can make mistakes. Consider verifying important information.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+window.ChatView = ChatView;

views-code.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+const CodeEditorView = () => {
+  const iframeRef = React.useRef(null);
+  const sendKey = () => {
+    const url = window.getAmdUrl ? window.getAmdUrl() : '';
+    if (url && iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage({ type: 'AMD_URL', url }, '*');
+    }
+  };
+  return (
+    <iframe
+      ref={iframeRef}
+      src="vscode.html"
+      style={{ width: "100%", height: "100%", border: "none", display: "block" }}
+      title="VS Code — meridian-platform"
+      onLoad={sendKey}
+    />
+  );
+};
+window.CodeEditorView = CodeEditorView;

views-compute.jsx ADDED Viewed

	@@ -0,0 +1,495 @@

+// Meridian GPU Compute view
+const GPUS = [
+  { id: "mi300x", name: "MI300X", vram: "192 GB HBM3", tflops: "10496 FP16", gen: "CDNA 3", tier: "flagship", priceHr: 4.89 },
+  { id: "mi300a", name: "MI300A", vram: "128 GB HBM3", tflops: "3800 FP16", gen: "CDNA 3", tier: "flagship", priceHr: 3.49 },
+  { id: "mi250x-128", name: "MI250X 128 GB", vram: "128 GB HBM2e", tflops: "383 FP16", gen: "CDNA 2", tier: "pro", priceHr: 2.21 },
+  { id: "mi210-64", name: "MI210 64 GB", vram: "64 GB HBM2e", tflops: "181 FP16", gen: "CDNA 2", tier: "pro", priceHr: 1.49 },
+  { id: "v620", name: "Radeon PRO V620", vram: "32 GB GDDR6", tflops: "105 FP16", gen: "RDNA 2", tier: "pro", priceHr: 1.89 },
+  { id: "w7900", name: "Radeon PRO W7900", vram: "48 GB GDDR6", tflops: "123 FP16", gen: "RDNA 3", tier: "standard", priceHr: 0.79 },
+  { id: "w7800", name: "Radeon PRO W7800", vram: "32 GB GDDR6", tflops: "89 FP16", gen: "RDNA 3", tier: "standard", priceHr: 0.59 },
+  { id: "v520", name: "Radeon PRO V520", vram: "8 GB HBM2", tflops: "18 FP16", gen: "RDNA", tier: "entry", priceHr: 0.29 },
+];
+const REGIONS = [
+  { id: "us-east-1", label: "US East (N. Virginia)", ping: 12, cloud: "aws" },
+  { id: "us-west-2", label: "US West (Oregon)", ping: 38, cloud: "aws" },
+  { id: "eu-west-1", label: "EU West (Ireland)", ping: 91, cloud: "aws" },
+  { id: "ap-southeast-1", label: "Asia Pacific (Singapore)", ping: 174, cloud: "aws" },
+  { id: "core-dal", name: "Dallas TX", label: "Dallas TX", ping: 21, cloud: "coreweave" },
+  { id: "core-las", label: "Las Vegas NV", ping: 44, cloud: "coreweave" },
+  { id: "lambda-slc", label: "Salt Lake City UT", ping: 57, cloud: "lambda" },
+  { id: "lambda-atx", label: "Austin TX", ping: 29, cloud: "lambda" },
+];
+const FRAMEWORKS = ["PyTorch 2.3", "JAX 0.4", "TensorFlow 2.16", "Custom image"];
+const INSTANCE_SIZES = [
+  { id: "1x", label: "1× GPU", multiplier: 1 },
+  { id: "4x", label: "4× GPU", multiplier: 4 },
+  { id: "8x", label: "8× GPU", multiplier: 8 },
+  { id: "16x", label: "16× GPU", multiplier: 16 },
+];
+const MOCK_JOBS = [
+  { id: "job-9af2", name: "llama3-finetune-v4", gpu: "MI250X 128 GB", gpuCount: 4, status: "running", started: "2h 14m", cost: 13.19, region: "US East", progress: 62 },
+  { id: "job-3bc1", name: "stable-diffusion-xl-eval", gpu: "Radeon PRO W7900", gpuCount: 1, status: "running", started: "41m", cost: 0.54, region: "Dallas TX", progress: 38 },
+  { id: "job-c77e", name: "embedding-batch-1M", gpu: "Radeon PRO W7800", gpuCount: 2, status: "done", started: "5h ago", cost: 5.90, region: "US West", progress: 100 },
+  { id: "job-12d0", name: "whisper-large-bench", gpu: "Radeon PRO V520", gpuCount: 1, status: "queued", started: "—", cost: 0, region: "EU West", progress: 0 },
+];
+const TIER_COLORS = {
+  flagship: "var(--accent)",
+  pro: "oklch(0.72 0.18 300)",
+  standard: "oklch(0.78 0.13 220)",
+  entry: "var(--fg-3)",
+};
+const CLOUD_BADGE = { aws: "AWS", coreweave: "CoreWeave", lambda: "Lambda" };
+const CLOUD_COLOR = { aws: "oklch(0.80 0.14 75)", coreweave: "oklch(0.78 0.13 220)", lambda: "oklch(0.72 0.18 300)" };
+const COMPUTE_STATUS_META = {
+  queued: { label: "Queued", color: "var(--fg-3)" },
+  running: { label: "Running", color: "var(--accent)" },
+  done: { label: "Completed", color: "var(--status-done)" },
+  failed: { label: "Failed", color: "var(--rose)" },
+  canceled: { label: "Canceled", color: "var(--fg-3)" }
+};
+const ComputeView = () => {
+  const [tab, setTab] = React.useState("launch");
+  const [selectedGpu, setSelectedGpu]         = React.useState("mi250x-128");
+  const [selectedRegion, setSelectedRegion]   = React.useState("us-east-1");
+  const [selectedSize, setSelectedSize]       = React.useState("1x");
+  const [selectedFw, setSelectedFw]           = React.useState(FRAMEWORKS[0]);
+  const [gpuFilter, setGpuFilter]             = React.useState("all");
+  const [jobName, setJobName]                 = React.useState("my-training-run");
+  const [hours, setHours]                     = React.useState(4);
+  const [launching, setLaunching]             = React.useState(false);
+  const [jobs, setJobs]                       = React.useState(MOCK_JOBS);
+  const gpu    = GPUS.find(g => g.id === selectedGpu) || GPUS[2];
+  const size   = INSTANCE_SIZES.find(s => s.id === selectedSize);
+  const region = REGIONS.find(r => r.id === selectedRegion);
+  const totalHr = gpu.priceHr * size.multiplier;
+  const estCost = (totalHr * hours).toFixed(2);
+  const filteredGpus = gpuFilter === "all" ? GPUS : GPUS.filter(g => g.tier === gpuFilter);
+  const launch = () => {
+    if (!jobName.trim()) { window.toast("Give the job a name"); return; }
+    setLaunching(true);
+    setTimeout(() => {
+      const newJob = {
+        id: "job-" + Math.random().toString(36).slice(2, 6),
+        name: jobName,
+        gpu: gpu.name,
+        gpuCount: size.multiplier,
+        status: "running",
+        started: "just now",
+        cost: 0,
+        region: region?.label?.split("(")[0].trim() || "US East",
+        progress: 0,
+      };
+      setJobs(j => [newJob, ...j]);
+      setLaunching(false);
+      setTab("jobs");
+      window.toast(`Instance "${jobName}" launched on ${gpu.name} ×${size.multiplier}`);
+    }, 1800);
+  };
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      {/* Page header */}
+      <div className="page-header">
+        <div className="page-title">
+          <Icon name="code" size={15} style={{ color: "var(--accent)" }} />
+          <span>Compute</span>
+          <span className="chip mono" style={{ color: "var(--accent)" }}>Meridian Compute</span>
+        </div>
+        <div className="topbar-spacer" />
+        <div className="segmented">
+          {[
+            { id: "launch", label: "Launch" },
+            { id: "jobs",   label: `Jobs (${jobs.filter(j => j.status === "running").length} active)` },
+            { id: "quota",  label: "Quota" },
+          ].map(t => (
+            <button key={t.id} className={tab === t.id ? "on" : ""} onClick={() => setTab(t.id)}>{t.label}</button>
+          ))}
+        </div>
+        <button className="btn ghost sm" onClick={() => window.toast("Docs opened")}><Icon name="docs" size={13} /> Docs</button>
+        <button className="btn ghost sm" style={{ color: "var(--accent)" }}
+          onClick={() => window.openAI(
+            `Analyze my compute usage. ${jobs.filter(j=>j.status==='running').length} jobs running.`,
+            "compute",
+            { jobs, quota: QUOTA_DATA }
+          )}>
+          <Icon name="sparkle" size={13} /> AI Summary
+        </button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: 20 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          {/* ===== LAUNCH TAB ===== */}
+          {tab === "launch" && (
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16 }}>
+              {/* Left column */}
+              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+                {/* GPU Picker */}
+                <div className="card" style={{ padding: 16 }}>
+                  <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+                    <strong style={{ fontSize: 13 }}>Select GPU</strong>
+                    <div className="segmented">
+                      {["all", "flagship", "pro", "standard", "entry"].map(f => (
+                        <button key={f} className={gpuFilter === f ? "on" : ""} onClick={() => setGpuFilter(f)} style={{ textTransform: "capitalize" }}>{f}</button>
+                      ))}
+                    </div>
+                  </div>
+                  <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
+                    {filteredGpus.map(g => (
+                      <button
+                        key={g.id}
+                        onClick={() => setSelectedGpu(g.id)}
+                        style={{
+                          padding: "12px 10px",
+                          border: `1.5px solid ${selectedGpu === g.id ? "var(--accent)" : "var(--border)"}`,
+                          borderRadius: 10,
+                          background: selectedGpu === g.id ? "var(--accent-soft)" : "var(--bg-1)",
+                          cursor: "pointer",
+                          textAlign: "left",
+                          transition: "border-color .15s, background .15s",
+                        }}
+                      >
+                        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
+                          <span style={{ fontSize: 12.5, fontWeight: 600 }}>{g.name}</span>
+                          <span style={{
+                            fontSize: 10, padding: "1px 5px", borderRadius: 4,
+                            background: TIER_COLORS[g.tier] + "22",
+                            color: TIER_COLORS[g.tier],
+                            fontFamily: "var(--font-mono)", fontWeight: 500,
+                          }}>{g.tier}</span>
+                        </div>
+                        <div className="muted" style={{ fontSize: 10.5, marginBottom: 2 }}>{g.vram}</div>
+                        <div className="muted-2 mono" style={{ fontSize: 10 }}>{g.tflops}</div>
+                        <div style={{ marginTop: 8, fontSize: 12, fontWeight: 600, color: "var(--accent)" }}>
+                          ${g.priceHr.toFixed(2)}<span className="muted-2 mono" style={{ fontSize: 10, fontWeight: 400 }}>/hr</span>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                {/* GPU count + instance size */}
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 12 }}>Instance size</strong>
+                  <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
+                    {INSTANCE_SIZES.map(s => (
+                      <button
+                        key={s.id}
+                        onClick={() => setSelectedSize(s.id)}
+                        style={{
+                          padding: "10px 12px",
+                          border: `1.5px solid ${selectedSize === s.id ? "var(--accent)" : "var(--border)"}`,
+                          borderRadius: 8,
+                          background: selectedSize === s.id ? "var(--accent-soft)" : "var(--bg-1)",
+                          cursor: "pointer",
+                          textAlign: "center",
+                        }}
+                      >
+                        <div style={{ fontSize: 13, fontWeight: 600 }}>{s.label}</div>
+                        <div className="mono muted-2" style={{ fontSize: 10.5, marginTop: 3 }}>
+                          ${(gpu.priceHr * s.multiplier).toFixed(2)}/hr
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                {/* Region */}
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 12 }}>Region &amp; cloud provider</strong>
+                  <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
+                    {REGIONS.map(r => (
+                      <button
+                        key={r.id}
+                        onClick={() => setSelectedRegion(r.id)}
+                        style={{
+                          padding: "10px 12px",
+                          border: `1.5px solid ${selectedRegion === r.id ? "var(--accent)" : "var(--border)"}`,
+                          borderRadius: 8,
+                          background: selectedRegion === r.id ? "var(--accent-soft)" : "var(--bg-1)",
+                          cursor: "pointer",
+                          textAlign: "left",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                        }}
+                      >
+                        <span style={{
+                          fontSize: 9.5, padding: "1px 5px", borderRadius: 4, flexShrink: 0,
+                          background: CLOUD_COLOR[r.cloud] + "22",
+                          color: CLOUD_COLOR[r.cloud],
+                          fontFamily: "var(--font-mono)", fontWeight: 600, textTransform: "uppercase",
+                        }}>{CLOUD_BADGE[r.cloud]}</span>
+                        <span style={{ flex: 1, fontSize: 12 }} className="truncate">{r.label}</span>
+                        <span className="mono muted-2" style={{ fontSize: 10.5 }}>{r.ping}ms</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                {/* Framework */}
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 12 }}>Runtime environment</strong>
+                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                    {FRAMEWORKS.map(fw => (
+                      <button
+                        key={fw}
+                        onClick={() => setSelectedFw(fw)}
+                        style={{
+                          padding: "7px 14px",
+                          border: `1.5px solid ${selectedFw === fw ? "var(--accent)" : "var(--border)"}`,
+                          borderRadius: 20,
+                          background: selectedFw === fw ? "var(--accent-soft)" : "var(--bg-1)",
+                          cursor: "pointer",
+                          fontSize: 12.5,
+                          color: selectedFw === fw ? "var(--accent)" : "var(--fg-1)",
+                        }}
+                      >{fw}</button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              {/* Right column — cost summary + launch */}
+              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+                {/* Job name */}
+                <div className="card" style={{ padding: 16 }}>
+                  <label style={{ fontSize: 12, color: "var(--fg-2)", display: "block", marginBottom: 6 }}>Job name</label>
+                  <input
+                    value={jobName}
+                    onChange={e => setJobName(e.target.value)}
+                    placeholder="my-training-run"
+                    style={{
+                      width: "100%", padding: "8px 10px", background: "var(--bg-0)",
+                      border: "1px solid var(--border)", borderRadius: 7, outline: "none",
+                      fontSize: 13, boxSizing: "border-box",
+                    }}
+                  />
+                </div>
+                {/* Cost estimate */}
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Estimated cost</strong>
+                  <div className="divider" />
+                  <div className="flex items-center justify-between" style={{ fontSize: 12.5, padding: "6px 0" }}>
+                    <span className="muted">GPU</span>
+                    <span className="mono">{gpu.name} ×{size.multiplier}</span>
+                  </div>
+                  <div className="flex items-center justify-between" style={{ fontSize: 12.5, padding: "6px 0" }}>
+                    <span className="muted">Rate</span>
+                    <span className="mono">${totalHr.toFixed(2)}/hr</span>
+                  </div>
+                  <div className="flex items-center justify-between" style={{ fontSize: 12.5, padding: "6px 0" }}>
+                    <span className="muted">Region</span>
+                    <span className="mono">{region?.label?.split(" (")[0]}</span>
+                  </div>
+                  <div className="divider" />
+                  <label style={{ fontSize: 11.5, color: "var(--fg-2)", display: "block", marginBottom: 6 }}>
+                    Max duration: <strong className="mono">{hours}h</strong>
+                  </label>
+                  <input
+                    type="range" min="1" max="72" value={hours}
+                    onChange={e => setHours(Number(e.target.value))}
+                    style={{ width: "100%", accentColor: "var(--accent)", marginBottom: 12 }}
+                  />
+                  <div className="divider" />
+                  <div className="flex items-center justify-between" style={{ padding: "8px 0" }}>
+                    <span style={{ fontSize: 13 }}>Estimated total</span>
+                    <span style={{ fontSize: 22, fontWeight: 700, color: "var(--accent)", fontFamily: "var(--font-mono)" }}>
+                      ${estCost}
+                    </span>
+                  </div>
+                  <div className="muted-2 mono" style={{ fontSize: 10.5 }}>Billed per second. Stops at ${estCost} unless extended.</div>
+                </div>
+                {/* Launch button */}
+                <button
+                  className="btn primary"
+                  style={{ width: "100%", padding: "12px", fontSize: 14, fontWeight: 600, opacity: launching ? 0.6 : 1 }}
+                  onClick={launch}
+                  disabled={launching}
+                >
+                  {launching
+                    ? <><Icon name="clock" size={14} /> Provisioning…</>
+                    : <><Icon name="sprint" size={14} /> Launch instance</>
+                  }
+                </button>
+                {/* Quick stats */}
+                <div className="card" style={{ padding: 14 }}>
+                  <div className="muted-2 mono" style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 10 }}>Cluster availability</div>
+                  {[
+                    { label: "MI300X", avail: 2 },
+                    { label: "MI250X 128G", avail: 8 },
+                    { label: "W7900", avail: 14 },
+                  ].map(a => (
+                    <div key={a.label} className="flex items-center justify-between" style={{ fontSize: 12, padding: "4px 0" }}>
+                      <span className="mono">{a.label}</span>
+                      <span style={{ color: a.avail > 5 ? "var(--accent)" : a.avail > 0 ? "oklch(0.80 0.14 75)" : "oklch(0.72 0.17 20)" }}>
+                        {a.avail} nodes free
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+          {/* ===== JOBS TAB ===== */}
+          {tab === "jobs" && (
+            <div>
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
+                {[
+                  { label: "Running", value: jobs.filter(j => j.status === "running").length, color: "var(--accent)" },
+                  { label: "Total today", value: jobs.length, color: "var(--fg-1)" },
+                  { label: "Spend today", value: "$" + jobs.reduce((s, j) => s + j.cost, 0).toFixed(2), color: "oklch(0.72 0.18 300)" },
+                ].map(s => (
+                  <div key={s.label} className="card" style={{ padding: 14 }}>
+                    <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>{s.label}</div>
+                    <div style={{ fontSize: 26, fontWeight: 700, color: s.color, fontFamily: "var(--font-mono)" }}>{s.value}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+                <div className="flex items-center" style={{ padding: "10px 16px", borderBottom: "1px solid var(--border)", fontSize: 11, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 500 }}>
+                  <span style={{ width: 130 }}>Job</span>
+                  <span style={{ flex: 1 }}>Name</span>
+                  <span style={{ width: 160 }}>GPU</span>
+                  <span style={{ width: 100 }}>Region</span>
+                  <span style={{ width: 80, textAlign: "right" }}>Runtime</span>
+                  <span style={{ width: 80, textAlign: "right" }}>Cost</span>
+                  <span style={{ width: 110 }}>Progress</span>
+                  <span style={{ width: 70 }}></span>
+                </div>
+                {jobs.map(j => {
+                  const sm = COMPUTE_STATUS_META[j.status] || COMPUTE_STATUS_META.queued;
+                  return (
+                    <div key={j.id} className="row" style={{ display: "flex", alignItems: "center" }}>
+                      <span className="mono muted-2" style={{ fontSize: 11, width: 130, flexShrink: 0 }}>{j.id}</span>
+                      <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }} className="truncate">{j.name}</span>
+                      <span style={{ width: 160, fontSize: 12 }} className="muted">{j.gpu} ×{j.gpuCount}</span>
+                      <span style={{ width: 100, fontSize: 11.5 }} className="muted">{j.region}</span>
+                      <span className="mono" style={{ width: 80, fontSize: 11.5, textAlign: "right", flexShrink: 0 }}>{j.started}</span>
+                      <span className="mono" style={{ width: 80, fontSize: 11.5, textAlign: "right", flexShrink: 0, color: j.cost > 0 ? "var(--fg-0)" : "var(--fg-3)" }}>
+                        {j.cost > 0 ? "$" + j.cost.toFixed(2) : "—"}
+                      </span>
+                      <span style={{ width: 110, flexShrink: 0, padding: "0 8px" }}>
+                        <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                          <div style={{ width: `${j.progress}%`, height: "100%", background: sm.color, transition: "width .3s" }} />
+                        </div>
+                        <span className="mono muted-2" style={{ fontSize: 10 }}>{j.progress}%</span>
+                      </span>
+                      <span style={{ width: 70, flexShrink: 0 }}>
+                        <span className="chip" style={{ color: sm.color, fontSize: 10.5 }}>
+                          <span className="d" style={{ background: sm.color }} />{sm.label}
+                        </span>
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          {/* ===== QUOTA TAB ===== */}
+          {tab === "quota" && (
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+              <div className="card" style={{ padding: 16 }}>
+                <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>GPU quota</strong>
+                {[
+                  { label: "MI300X", used: 0, total: 8 },
+                  { label: "MI300A", used: 0, total: 8 },
+                  { label: "MI250X 128 GB", used: 4, total: 16 },
+                  { label: "MI210 64 GB", used: 0, total: 16 },
+                  { label: "Radeon PRO V620", used: 0, total: 16 },
+                  { label: "Radeon PRO W7900", used: 1, total: 32 },
+                  { label: "Radeon PRO W7800", used: 2, total: 32 },
+                  { label: "Radeon PRO V520", used: 0, total: 64 },
+                ].map(q => (
+                  <div key={q.label} style={{ padding: "8px 0", borderBottom: "1px solid var(--border-subtle)" }}>
+                    <div className="flex items-center justify-between" style={{ marginBottom: 4 }}>
+                      <span style={{ fontSize: 12.5 }}>{q.label}</span>
+                      <span className="mono" style={{ fontSize: 11 }}>{q.used}/{q.total}</span>
+                    </div>
+                    <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                      <div style={{ width: `${(q.used / q.total) * 100}%`, height: "100%", background: q.used / q.total > 0.8 ? "oklch(0.72 0.17 20)" : "var(--accent)" }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Spending limits</strong>
+                  {[
+                    { label: "Daily limit", used: 14.63, total: 200 },
+                    { label: "Monthly limit", used: 89.21, total: 2000 },
+                  ].map(s => (
+                    <div key={s.label} style={{ marginBottom: 14 }}>
+                      <div className="flex items-center justify-between" style={{ marginBottom: 4 }}>
+                        <span style={{ fontSize: 12.5 }}>{s.label}</span>
+                        <span className="mono" style={{ fontSize: 11 }}>${s.used.toFixed(2)} / ${s.total}</span>
+                      </div>
+                      <div style={{ height: 5, background: "var(--bg-3)", borderRadius: 3, overflow: "hidden" }}>
+                        <div style={{ width: `${(s.used / s.total) * 100}%`, height: "100%", background: "var(--accent)" }} />
+                      </div>
+                    </div>
+                  ))}
+                  <button className="btn ghost sm" style={{ marginTop: 4 }} onClick={() => window.toast("Limit editor opened")}><Icon name="settings" size={13} /> Edit limits</button>
+                </div>
+                <div className="card" style={{ padding: 16 }}>
+                  <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Plan</strong>
+                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
+                    <span style={{ fontSize: 20 }}>⚡</span>
+                    <div>
+                      <div style={{ fontSize: 14, fontWeight: 600 }}>Meridian Pro</div>
+                      <div className="muted" style={{ fontSize: 11.5 }}>Renews Jun 1, 2026</div>
+                    </div>
+                    <div style={{ flex: 1 }} />
+                    <span className="chip" style={{ color: "var(--accent)" }}>Active</span>
+                  </div>
+                  <div className="divider" />
+                  {[
+                    "Priority queue access",
+                    "Up to 8× MI300X per job",
+                    "Spot instance discounts",
+                    "24/7 cluster support",
+                  ].map((f, i) => (
+                    <div key={i} className="flex items-center gap-8" style={{ padding: "5px 0", fontSize: 12.5 }}>
+                      <Icon name="check" size={13} style={{ color: "var(--accent)", flexShrink: 0 }} strokeWidth={2.5} />
+                      <span>{f}</span>
+                    </div>
+                  ))}
+                  <button className="btn sm primary" style={{ width: "100%", marginTop: 12 }} onClick={() => window.toast("Upgrade flow opened")}>Upgrade to Enterprise</button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+window.ComputeView = ComputeView;

views-detail.jsx ADDED Viewed

	@@ -0,0 +1,551 @@

+// Issue detail + Docs + Roadmap + Sprints + PRs + Team + Settings
+// ==== ISSUE DETAIL ====
+const IssueDetail = ({ issueId, setView }) => {
+  const [issue, setIssue] = React.useState(ISSUES.find(i => i.id === issueId) || ISSUES[0]);
+  const proj = PROJECTS.find(p => p.id === issue.project);
+  const assignees = issue.assignees.map(id => PEOPLE.find(p => p.id === id));
+  const [activeTab, setActiveTab] = React.useState("comments");
+  React.useEffect(() => {
+    const load = () => window.apiFetch('GET', `/api/issues/${issueId}`).then(setIssue).catch(() => {});
+    load();
+    document.addEventListener('meridian:refresh', load);
+    return () => document.removeEventListener('meridian:refresh', load);
+  }, [issueId]);
+  const activity = [
+    { type: "create", user: "u1", time: "Apr 02", text: "opened this issue" },
+    { type: "status", user: "u1", time: "Apr 02", text: "moved from backlog to todo" },
+    { type: "assign", user: "u5", time: "Apr 07", text: "assigned Rohan Mehta and Kenji Ito" },
+    { type: "comment", user: "u2", time: "Apr 09", text: "Baseline profiling below — main hot path is composite hit-testing on every pointermove. Worth exploring tile-level caches before we touch the renderer.", code: true },
+    { type: "status", user: "u2", time: "Apr 09", text: "moved to in progress" },
+    { type: "branch", user: "u2", time: "Apr 09", text: "linked branch perf/canvas-pipeline" },
+    { type: "comment", user: "u3", time: "Apr 12", text: "Quick question on the tile size — are we going with 256px or adaptive? I worry about memory pressure on large documents.", code: false },
+    { type: "comment", user: "u2", time: "Apr 12", text: "Adaptive: base 256, halves if a tile's point count > 2k. Prototyped in the branch." },
+    { type: "pr", user: "u2", time: "Apr 14", text: "opened pull request #2341" },
+    { type: "comment", user: "u1", time: "12m", text: "@Kenji — can you weigh in on the tile-size heuristic? I want to make sure it plays well with the presence system.", highlight: true },
+  ];
+  const related = ISSUES.filter(i => i.project === issue.project && i.id !== issue.id).slice(0, 4);
+  return (
+    <div className="flex flex-1" style={{ minWidth: 0 }}>
+      <div className="flex col flex-1" style={{ minWidth: 0, borderRight: "1px solid var(--border)" }}>
+        {/* Sub-header */}
+        <div className="page-header">
+          <button className="icon-btn" onClick={() => setView("issues")}><Icon name="chevron-left" size={16} /></button>
+          <span className="mono muted" style={{ fontSize: 12 }}>{issue.id}</span>
+          <div className="status progress flex items-center gap-6" style={{ fontSize: 11.5 }}>
+            <span className="s-dot" />In progress
+          </div>
+          <div className="topbar-spacer" />
+          <button className="btn ghost sm" onClick={() => window.copyLink(issue.id)}><Icon name="link" size={13} /> Copy link</button>
+          <button className="btn ghost sm" onClick={() => window.openAttach()}><Icon name="attach" size={13} /></button>
+          <button className="btn sm" onClick={() => window.openPicker({ title: "Issue actions", options: [
+            { value: "duplicate", label: "Duplicate", icon: "plus" },
+            { value: "subscribe", label: "Subscribe", icon: "bell" },
+            { value: "archive", label: "Archive", icon: "x" },
+            { value: "delete", label: "Delete", icon: "x" },
+          ], onChoose: (o) => window.toast(o.label) })}><Icon name="more" size={13} /></button>
+        </div>
+        <div className="scroll-y issue-spotlight" style={{ flex: 1, padding: "24px 32px 48px", maxWidth: 820, width: "100%", margin: "0 auto" }}>
+          <h1 className="editorial hero-title" style={{ fontSize: 28, fontWeight: 400, letterSpacing: "-0.015em", margin: "0 0 8px", lineHeight: 1.2 }}>
+            {issue.title}
+          </h1>
+          <div className="flex items-center gap-8 muted" style={{ fontSize: 12, marginBottom: 24 }}>
+            <Avatar user={PEOPLE.find(p => p.id === "u1")} size="xs" />
+            <strong style={{ color: "var(--fg-1)" }}>Amara</strong>
+            <span>opened</span>
+            <span className="mono">{issue.id}</span>
+            <span>on {issue.created}</span>
+            <span>·</span>
+            <span>{issue.commentCount} comments</span>
+          </div>
+          {/* Description */}
+          <div style={{ marginBottom: 32, lineHeight: 1.6, fontSize: 13.5, color: "var(--fg-1)" }}>
+            <p>The current canvas-rendering path redraws the entire viewport on every interaction — cursor moves, selection changes, even hover states. For documents above ~2,000 nodes we're seeing 18–24ms paint budgets, which turns into sub-30fps during multi-select drags.</p>
+            <p>This work rebuilds the pipeline around three primitives:</p>
+            <ul>
+              <li><strong>Tile-based composition.</strong> Split the scene into adaptive 256×256 tiles, each backed by an <code style={{ fontFamily: "var(--font-mono)", fontSize: 12, background: "var(--bg-2)", padding: "1px 5px", borderRadius: 4, border: "1px solid var(--border)" }}>OffscreenCanvas</code>. Only dirty tiles repaint.</li>
+              <li><strong>Hit-test indexing.</strong> R-tree keyed by bounding boxes, rebuilt incrementally on edit.</li>
+              <li><strong>Transform isolation.</strong> Pan/zoom become CSS transforms on the tile grid — no repaint needed.</li>
+            </ul>
+            <p><strong>Target:</strong> steady 60fps on documents up to 10k nodes, p95 paint budget under 8ms. Traces attached below.</p>
+          </div>
+          {/* Checklist */}
+          <div style={{ marginBottom: 32, border: "1px solid var(--border)", borderRadius: 10, overflow: "hidden" }}>
+            <div className="flex items-center" style={{ padding: "10px 14px", background: "var(--bg-1)", borderBottom: "1px solid var(--border)", fontSize: 12, gap: 8 }}>
+              <strong>Acceptance criteria</strong>
+              <span className="mono muted-2">3 / 5</span>
+              <div style={{ flex: 1 }} />
+              <div style={{ width: 60, height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                <div style={{ width: "60%", height: "100%", background: "var(--accent)" }} />
+              </div>
+            </div>
+            {[
+              { done: true, text: "Tile-based composition with OffscreenCanvas" },
+              { done: true, text: "Hit-test R-tree with incremental rebuild" },
+              { done: true, text: "Pan/zoom without full repaint" },
+              { done: false, text: "Benchmark harness for 1k/5k/10k scenes" },
+              { done: false, text: "Regression guard in CI (perf budget ≤ 8ms p95)" },
+            ].map((c, i) => (
+              <div key={i} className="flex items-center gap-10" style={{ padding: "8px 14px", borderTop: i > 0 ? "1px solid var(--border-subtle)" : "none", fontSize: 12.5 }}>
+                <span style={{
+                  width: 14, height: 14, border: "1.5px solid var(--border-strong)", borderRadius: 3,
+                  background: c.done ? "var(--accent)" : "transparent",
+                  display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+                  color: "var(--accent-fg)"
+                }}>{c.done && <Icon name="check" size={10} strokeWidth={3} />}</span>
+                <span style={{ textDecoration: c.done ? "line-through" : "none", color: c.done ? "var(--fg-3)" : "var(--fg-0)" }}>{c.text}</span>
+              </div>
+            ))}
+          </div>
+          {/* Tabs */}
+          <div className="flex items-center" style={{ borderBottom: "1px solid var(--border)", marginBottom: 16, gap: 0 }}>
+            {[
+              { id: "comments", label: "Activity", count: 14 },
+              { id: "linked", label: "Linked work", count: 3 },
+              { id: "files", label: "Attachments", count: 4 },
+            ].map(t => (
+              <button key={t.id} className="flex items-center gap-6" onClick={() => setActiveTab(t.id)}
+                style={{ padding: "8px 14px", fontSize: 12.5, color: activeTab === t.id ? "var(--fg-0)" : "var(--fg-2)", fontWeight: 500, borderBottom: `2px solid ${activeTab === t.id ? "var(--accent)" : "transparent"}`, marginBottom: -1 }}>
+                {t.label} <span className="mono muted-2" style={{ fontSize: 10.5 }}>{t.count}</span>
+              </button>
+            ))}
+          </div>
+          {/* Activity */}
+          {activeTab === "comments" && (
+            <div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+                {activity.map((ev, i) => {
+                  const u = PEOPLE.find(p => p.id === ev.user);
+                  if (ev.type === "comment") {
+                    return (
+                      <div key={i} className="flex gap-10" style={{ background: ev.highlight ? "var(--accent-soft)" : "var(--bg-1)", border: `1px solid ${ev.highlight ? "var(--accent-dim)" : "var(--border)"}`, borderRadius: 10, padding: 12 }}>
+                        <Avatar user={u} size="sm" />
+                        <div style={{ flex: 1 }}>
+                          <div className="flex items-center gap-6" style={{ marginBottom: 4, fontSize: 12 }}>
+                            <strong>{u.name}</strong>
+                            <span className="muted-2">{ev.time} ago</span>
+                          </div>
+                          <div style={{ fontSize: 13, lineHeight: 1.5 }}>{ev.text}</div>
+                          {ev.code && (
+                            <pre className="mono" style={{ marginTop: 8, background: "var(--bg-0)", border: "1px solid var(--border)", padding: 10, borderRadius: 6, fontSize: 11, color: "var(--fg-1)", overflow: "auto" }}>
+{`scripting   4.2ms
+rendering   14.8ms
+painting     3.1ms
+compositing  0.8ms  ← budget OK
+--------------------
+  paint (main thread)  18.1ms  ❌ p95 target 8ms`}
+                            </pre>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  }
+                  const iconFor = { create: "plus", status: "arrow-right", assign: "at", branch: "branch", pr: "pr" };
+                  return (
+                    <div key={i} className="flex items-center gap-10 muted" style={{ fontSize: 11.5, paddingLeft: 4 }}>
+                      <span className="avatar xs" style={{ background: "var(--bg-2)", color: "var(--fg-2)" }}><Icon name={iconFor[ev.type]} size={9} /></span>
+                      {u && <strong style={{ color: "var(--fg-1)", fontWeight: 500 }}>{u.name.split(" ")[0]}</strong>}
+                      <span>{ev.text}</span>
+                      <span style={{ marginLeft: "auto" }} className="mono muted-2">{ev.time}</span>
+                    </div>
+                  );
+                })}
+              </div>
+              {/* Composer */}
+              <div style={{ marginTop: 16, border: "1px solid var(--border)", borderRadius: 10, padding: 4, background: "var(--bg-1)" }}>
+                <textarea id="commentbox" placeholder="Leave a comment… /commands and @mentions supported" rows={3} style={{
+                  width: "100%", background: "transparent", border: "none", outline: "none", resize: "vertical",
+                  padding: 10, fontSize: 13, fontFamily: "inherit", color: "var(--fg-0)"
+                }} />
+                <div className="flex items-center gap-6" style={{ padding: 6, borderTop: "1px solid var(--border-subtle)" }}>
+                  <button className="icon-btn" title="Attach" onClick={() => window.openAttach()}><Icon name="attach" size={13} /></button>
+                  <button className="icon-btn" title="Code" onClick={() => window.toast("Insert code block")}><Icon name="hash" size={13} /></button>
+                  <button className="icon-btn" title="Mention" onClick={() => window.toast("Mention teammate")}><Icon name="at" size={13} /></button>
+                  <button className="icon-btn" title="AI" onClick={() => window.openAI(`What's blocking ${proj?.name || 'this project'}?`, "general", { issue })}><Icon name="sparkle" size={13} /></button>
+                  <div style={{ flex: 1 }} />
+                  <span className="mono muted-2" style={{ fontSize: 10.5 }}>⌘↵ to send</span>
+                  <button className="btn sm primary" onClick={() => {
+                    const el = document.getElementById("commentbox");
+                    if (!el || !el.value.trim()) { window.toast("Type a comment first"); return; }
+                    window.toast("Comment posted"); el.value = "";
+                  }}>Comment</button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      {/* Right sidebar */}
+      <aside style={{ width: 300, flexShrink: 0, padding: "20px 16px", overflow: "auto" }}>
+        <Section title="Status">
+          <div className="flex items-center gap-8" onClick={() => window.openPicker({ title: "Status", options: [
+            { value: "backlog", label: "Backlog" },{ value: "todo", label: "Todo" },
+            { value: "progress", label: "In progress" },{ value: "review", label: "In review" },{ value: "done", label: "Done" },
+          ], onChoose: (o) => window.apiFetch('PATCH', `/api/issues/${issue.id}`, { status: o.value }).then(setIssue).catch(() => window.toast("Update failed")) })} style={{ cursor: "pointer", padding: "6px 8px", borderRadius: 6, background: "var(--bg-1)", border: "1px solid var(--border)" }}>
+            <span className={`status ${issue.status === 'backlog' ? 'todo' : issue.status}`}><span className="s-dot" /></span>
+            <span style={{ fontSize: 12.5 }}>{STATUS_META[issue.status]?.label || issue.status}</span>
+            <Icon name="chevron-down" size={12} style={{ marginLeft: "auto", color: "var(--fg-3)" }} />
+          </div>
+        </Section>
+        <Section title="Priority">
+          <div className="flex items-center gap-8" onClick={() => window.openPicker({ title: "Priority", options: [
+            { value: "urgent", label: "Urgent" },{ value: "high", label: "High" },{ value: "med", label: "Medium" },{ value: "low", label: "Low" },{ value: "none", label: "No priority" },
+          ], onChoose: (o) => window.apiFetch('PATCH', `/api/issues/${issue.id}`, { priority: o.value }).then(setIssue).catch(() => window.toast("Update failed")) })} style={{ cursor: "pointer", padding: "6px 8px", borderRadius: 6, background: "var(--bg-1)", border: "1px solid var(--border)" }}>
+            <PriorityGlyph level={issue.priority} />
+            <span style={{ fontSize: 12.5 }}>{issue.priority === 'med' ? 'Medium' : issue.priority?.charAt(0).toUpperCase() + issue.priority?.slice(1)}</span>
+            <Icon name="chevron-down" size={12} style={{ marginLeft: "auto", color: "var(--fg-3)" }} />
+          </div>
+        </Section>
+        <Section title="Assignees">
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            {assignees.map(a => (
+              <div key={a.id} className="flex items-center gap-8" style={{ fontSize: 12.5 }}>
+                <Avatar user={a} size="xs" />
+                <span>{a.name}</span>
+                <span className="mono muted-2" style={{ marginLeft: "auto", fontSize: 10.5 }}>@{a.handle}</span>
+              </div>
+            ))}
+            <button className="btn ghost sm" style={{ justifyContent: "flex-start", marginTop: 2 }} onClick={() => window.openPicker({ title: "Assign teammate", options: PEOPLE.map(u => ({ value: u.id, label: u.name, hint: `@${u.handle}` })), onChoose: (o) => window.apiFetch('PATCH', `/api/issues/${issue.id}`, { assignees: [...issue.assignees, o.value] }).then(setIssue).catch(() => window.toast("Update failed")) })}><Icon name="plus" size={12} /> Add</button>
+          </div>
+        </Section>
+        <Section title="Project">
+          <div className="flex items-center gap-8" style={{ fontSize: 12.5 }}>
+            <span style={{ width: 10, height: 10, borderRadius: 2, background: proj.color }} />
+            <span>{proj.name}</span>
+            <span className="mono muted-2" style={{ marginLeft: "auto", fontSize: 10.5 }}>{proj.code}</span>
+          </div>
+        </Section>
+        <Section title="Sprint">
+          <div className="flex items-center gap-8" style={{ fontSize: 12.5 }}>
+            <Icon name="sprint" size={13} style={{ color: "var(--accent)" }} />
+            <span>Iteration 42</span>
+            <span className="mono muted-2" style={{ marginLeft: "auto", fontSize: 10.5 }}>Apr 14–28</span>
+          </div>
+        </Section>
+        <Section title="Labels">
+          <div className="flex items-center gap-4" style={{ flexWrap: "wrap" }}>
+            {issue.labels.map(lid => {
+              const lab = LABELS.find(l => l.id === lid);
+              return <span key={lid} className="tag" style={{ color: lab.color }}>#{lab.name}</span>;
+            })}
+            <button className="tag muted-2" onClick={() => window.openPicker({ title: "Add label", options: LABELS.map(l => ({ value: l.id, label: `#${l.name}`, swatch: l.color })), onChoose: (o) => window.apiFetch('PATCH', `/api/issues/${issue.id}`, { labels: [...issue.labels, o.value] }).then(setIssue).catch(() => window.toast("Update failed")) })}><Icon name="plus" size={10} /></button>
+          </div>
+        </Section>
+        <Section title="Estimate">
+          <div className="flex items-center gap-6" style={{ fontSize: 12.5 }}>
+            <span className="mono" style={{ fontSize: 14 }}>{issue.estimate}</span>
+            <span className="muted">points</span>
+            <div style={{ flex: 1 }} />
+            <span className="muted-2 mono" style={{ fontSize: 10.5 }}>~3d</span>
+          </div>
+        </Section>
+        <Section title="Dates">
+          <div style={{ fontSize: 12, lineHeight: 1.7 }}>
+            <div className="flex items-center justify-between"><span className="muted">Created</span><span className="mono">{issue.created}</span></div>
+            <div className="flex items-center justify-between"><span className="muted">Due</span><span className="mono" style={{ color: "var(--rose)" }}>{issue.due}</span></div>
+            <div className="flex items-center justify-between"><span className="muted">Updated</span><span className="mono">2h ago</span></div>
+          </div>
+        </Section>
+        {issue.branch && (
+          <Section title="Development">
+            <div className="flex items-center gap-6" style={{ fontSize: 11.5, padding: "6px 8px", borderRadius: 6, background: "var(--bg-1)", border: "1px solid var(--border)" }}>
+              <Icon name="branch" size={12} style={{ color: "var(--accent)" }} />
+              <span className="mono">{issue.branch}</span>
+            </div>
+            <div className="flex items-center gap-6" style={{ fontSize: 11.5, padding: "6px 8px", borderRadius: 6, background: "var(--bg-1)", border: "1px solid var(--border)", marginTop: 6 }}>
+              <Icon name="pr" size={12} style={{ color: "var(--accent)" }} />
+              <span className="mono">#2341</span>
+              <span className="truncate">perf(canvas): tile-based rendering</span>
+            </div>
+          </Section>
+        )}
+        <Section title="Related">
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {related.map(r => (
+              <button key={r.id} className="flex items-center gap-6" style={{ textAlign: "left", padding: "4px 6px", borderRadius: 4, fontSize: 11.5 }}>
+                <PriorityGlyph level={r.priority} />
+                <span className="mono muted-2" style={{ fontSize: 10.5 }}>{r.id}</span>
+                <span className="truncate flex-1">{r.title}</span>
+              </button>
+            ))}
+          </div>
+        </Section>
+      </aside>
+    </div>
+  );
+};
+const Section = ({ title, children }) => (
+  <div style={{ marginBottom: 18 }}>
+    <div className="sb-label" style={{ padding: "0 0 6px 0" }}>{title}</div>
+    {children}
+  </div>
+);
+// ==== DOCS ====
+const DocsView = () => {
+  const [selected, setSelected] = React.useState("d3");
+  const [expanded, setExpanded] = React.useState(new Set(["d1","d2","d6","d10"]));
+  const [docs, setDocs] = React.useState(DOCS);
+  React.useEffect(() => {
+    const load = () => window.apiFetch('GET', '/api/docs').then(setDocs).catch(() => {});
+    load();
+    document.addEventListener('meridian:refresh', load);
+    return () => document.removeEventListener('meridian:refresh', load);
+  }, []);
+  const toggle = (id) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+  const renderTree = (items, depth = 0) => items.map(it => (
+    <div key={it.id}>
+      <button className="flex items-center gap-6" onClick={() => { if (it.children) toggle(it.id); setSelected(it.id); }}
+        style={{
+          width: "100%", textAlign: "left", padding: "4px 10px", fontSize: 12.5, paddingLeft: 10 + depth * 14,
+          color: selected === it.id ? "var(--fg-0)" : "var(--fg-1)",
+          background: selected === it.id ? "var(--bg-2)" : "transparent",
+          borderRadius: 5,
+        }}>
+        {it.children ? (
+          <Icon name={expanded.has(it.id) ? "chevron-down" : "chevron-right"} size={11} style={{ color: "var(--fg-3)" }} />
+        ) : <span style={{ width: 11 }} />}
+        {it.emoji ? <span style={{ fontSize: 11, color: "var(--fg-2)" }}>{it.emoji}</span> : <Icon name="docs" size={12} style={{ color: "var(--fg-2)" }} />}
+        <span className="truncate">{it.title}</span>
+      </button>
+      {it.children && expanded.has(it.id) && renderTree(it.children, depth + 1)}
+    </div>
+  ));
+  return (
+    <div className="flex flex-1" style={{ minWidth: 0 }}>
+      <aside style={{ width: 260, flexShrink: 0, borderRight: "1px solid var(--border)", background: "var(--bg-1)", overflow: "auto" }}>
+        <div style={{ padding: "12px 12px 6px" }}>
+          <div className="search" style={{ minWidth: 0 }}>
+            <Icon name="search" size={12} />
+            <input placeholder="Search docs…" />
+          </div>
+        </div>
+        <div style={{ padding: "6px 4px 24px" }}>
+          {renderTree(docs)}
+        </div>
+      </aside>
+      <div className="flex col flex-1" style={{ minWidth: 0 }}>
+        <div className="page-header">
+          <div className="page-title">
+            <span className="eyebrow">DOCS / ENGINEERING HANDBOOK / ADR</span>
+          </div>
+          <div className="topbar-spacer" />
+          <span className="chip" style={{ color: "var(--fg-2)" }}><Icon name="lock" size={11} /> Private</span>
+          <button className="btn ghost sm" onClick={() => window.toast("Watching this doc") }><Icon name="eye" size={13} /> 8</button>
+          <div className="vdivider" style={{ height: 20 }} />
+          <AvatarStack users={[PEOPLE[1], PEOPLE[2], PEOPLE[4]]} size="xs" />
+          <button className="btn ghost sm" onClick={() => window.openAI("Summarize this doc", "general", { doc: docs.find(d => d.id === selected) || {} })}><Icon name="sparkle" size={13} /> Ask AI</button>
+          <button className="btn sm primary" onClick={() => window.openShare("ADR 041 — Canvas rendering pipeline")}><Icon name="plus" size={13} /> Share</button>
+        </div>
+        <div className="scroll-y" style={{ flex: 1, padding: "40px 64px" }}>
+          <article style={{ maxWidth: 740, margin: "0 auto" }}>
+            <div className="mono muted-2" style={{ fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12 }}>ADR 041 · Engineering · Accepted</div>
+            <h1 className="editorial" style={{ fontSize: 42, lineHeight: 1.1, fontWeight: 400, letterSpacing: "-0.02em", margin: "0 0 12px" }}>
+              Canvas rendering pipeline, rebuilt on tiles
+            </h1>
+            <div className="flex items-center gap-10 muted" style={{ fontSize: 12.5, marginBottom: 36 }}>
+              <Avatar user={PEOPLE[1]} size="xs" />
+              <span><strong style={{ color: "var(--fg-1)" }}>Rohan Mehta</strong> · updated 2 days ago</span>
+              <span>·</span>
+              <span>4 min read</span>
+              <span>·</span>
+              <span className="flex items-center gap-4"><Icon name="link" size={11} /> AUR-412</span>
+            </div>
+            <div style={{ fontSize: 15, lineHeight: 1.7, color: "var(--fg-1)" }}>
+              <p style={{ fontSize: 17, color: "var(--fg-0)", fontStyle: "italic" }}>
+                The canvas hasn't aged well. Between <code style={{ fontFamily: "var(--font-mono)", fontSize: 13, background: "var(--bg-2)", padding: "2px 6px", borderRadius: 4 }}>v1.2</code> and now, the scene graph quietly quintupled in size while the renderer stayed monolithic. This is the plan to pay that down.
+              </p>
+              <h2 style={{ fontSize: 18, fontWeight: 600, marginTop: 36, marginBottom: 10, color: "var(--fg-0)" }}>Context</h2>
+              <p>At the shape of traffic we saw in March, p95 paint budgets crossed 18ms on documents above ~2k nodes. The current pipeline repaints the entire viewport on every pointer event — inexpensive in isolation, expensive when multiplied by modern input rates.</p>
+              <blockquote style={{ margin: "20px 0", paddingLeft: 16, borderLeft: "2px solid var(--accent)", fontStyle: "italic", color: "var(--fg-1)" }}>
+                We don't need a new renderer. We need a renderer that knows when <em>not</em> to run.
+              </blockquote>
+              <h2 style={{ fontSize: 18, fontWeight: 600, marginTop: 36, marginBottom: 10, color: "var(--fg-0)" }}>Decision</h2>
+              <p>Adopt a tile-composited pipeline. Each tile owns its own <code style={{ fontFamily: "var(--font-mono)", fontSize: 13, background: "var(--bg-2)", padding: "2px 6px", borderRadius: 4 }}>OffscreenCanvas</code>; the compositor composes tiles on the main thread using cheap CSS transforms for pan and zoom.</p>
+              {/* Code block */}
+              <div style={{ margin: "20px 0", borderRadius: 8, border: "1px solid var(--border)", overflow: "hidden" }}>
+                <div className="flex items-center gap-8" style={{ padding: "6px 12px", borderBottom: "1px solid var(--border)", background: "var(--bg-1)", fontSize: 11, color: "var(--fg-2)" }}>
+                  <Icon name="hash" size={11} />
+                  <span className="mono">renderer/tile.ts</span>
+                </div>
+                <pre className="mono" style={{ margin: 0, padding: 14, background: "var(--bg-0)", fontSize: 12, lineHeight: 1.65, color: "var(--fg-1)", overflow: "auto" }}>
+{`interface Tile {
+  readonly key: TileKey
+  readonly bounds: Rect
+  readonly canvas: OffscreenCanvas
+  dirty: boolean
+  version: number
+}
+function composite(
+  viewport: Rect,
+  tiles: ReadonlyMap<TileKey, Tile>,
+  ctx: CanvasRenderingContext2D,
+): void {
+  for (const tile of visible(viewport, tiles)) {
+    if (tile.dirty) repaint(tile)
+    ctx.drawImage(tile.canvas, tile.bounds.x, tile.bounds.y)
+  }
+}`}
+                </pre>
+              </div>
+              <h2 style={{ fontSize: 18, fontWeight: 600, marginTop: 36, marginBottom: 10, color: "var(--fg-0)" }}>Consequences</h2>
+              <ul>
+                <li>Peak memory goes up (tile atlases) but flat-lines instead of growing linearly with document size.</li>
+                <li>Multi-select drag is dominated by compositing, not repainting — costs drop by an order of magnitude.</li>
+                <li>Plugin renderers have to target tiles, not the root canvas; we ship a shim for the transition.</li>
+              </ul>
+              {/* Callout */}
+              <div style={{ margin: "24px 0", padding: "14px 16px", background: "var(--amber-soft)", border: "1px solid var(--amber)", borderRadius: 8, fontSize: 13, color: "var(--fg-0)" }}>
+                <div className="flex items-center gap-6" style={{ marginBottom: 4 }}>
+                  <Icon name="flag" size={13} style={{ color: "var(--amber)" }} />
+                  <strong style={{ fontSize: 12.5 }}>Migration risk</strong>
+                </div>
+                Third-party plugin renderers (14 in the registry as of Q1) will need a recompile against <code style={{ fontFamily: "var(--font-mono)", fontSize: 12, background: "var(--bg-1)", padding: "1px 5px", borderRadius: 3 }}>@meridian/canvas@2</code>. The shim buys us one minor version.
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ==== ROADMAP ====
+const RoadmapView = () => {
+  const months = ["Apr","May","Jun","Jul","Aug","Sep"];
+  const cellsPerQ = 9; // cols in timeline
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title">
+          <span>Roadmap</span>
+          <span className="mono muted-2" style={{ fontSize: 12 }}>Q2 — Q3 2026</span>
+        </div>
+        <div className="topbar-spacer" />
+        <div className="segmented">
+          <button className="on">Timeline</button>
+          <button onClick={() => window.openPicker({ title: "Switch view", options: [{ value: "q", label: "Quarters" }, { value: "m", label: "Milestones" }], onChoose: (o) => window.toast(`Switched to ${o.label}`) })}>Quarters</button>
+          <button onClick={() => window.openPicker({ title: "Milestones", options: [{ value: "m1", label: "Aurora launch · Jun 12" }, { value: "m2", label: "SSO audit · Jul 1" }, { value: "m3", label: "Tessera 2.0 · Aug 22" }], onChoose: (o) => window.toast(o.label) })}>Milestones</button>
+        </div>
+        <button className="btn ghost sm" onClick={() => window.openPicker({ title: "Filter projects", options: PROJECTS.map(p => ({ value: p.id, label: p.name, swatch: p.color })), onChoose: (o) => window.toast(`Filtered to ${o.label}`) })}><Icon name="filter" size={13} /> Projects: all</button>
+        <button className="btn ghost sm" onClick={() => window.openAI("What milestones are at risk this quarter?", "general", { roadmap: typeof ROADMAP !== 'undefined' ? ROADMAP : [] })}><Icon name="sparkle" size={13} /> AI Summary</button>
+        <button className="btn sm primary" onClick={() => window.openNewIssue({ kind: "initiative" })}><Icon name="plus" size={13} /> New initiative</button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: "16px 20px 40px" }}>
+        {/* Header row */}
+        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr 1fr", gap: 0, position: "sticky", top: 0, background: "var(--bg-0)", zIndex: 2, paddingBottom: 8, borderBottom: "1px solid var(--border)" }}>
+          <div />
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 12px", borderRight: "1px solid var(--border)" }}>
+            <strong style={{ fontSize: 13 }}>Q2 2026</strong>
+            <span className="mono muted-2" style={{ fontSize: 10.5 }}>APR — JUN</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 12px" }}>
+            <strong style={{ fontSize: 13 }}>Q3 2026</strong>
+            <span className="mono muted-2" style={{ fontSize: 10.5 }}>JUL — SEP</span>
+          </div>
+        </div>
+        {/* Months */}
+        <div style={{ display: "grid", gridTemplateColumns: `220px repeat(${months.length}, 1fr)`, borderBottom: "1px solid var(--border-subtle)" }}>
+          <div />
+          {months.map((m, i) => (
+            <div key={i} className="mono muted-2" style={{ padding: "6px 10px", fontSize: 11, borderLeft: i === 0 ? "none" : "1px solid var(--border-subtle)" }}>{m}</div>
+          ))}
+        </div>
+        {/* Group by project */}
+        {PROJECTS.map(proj => {
+          const items = ROADMAP.filter(r => r.project === proj.id);
+          if (!items.length) return null;
+          return (
+            <div key={proj.id} style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+              <div className="flex items-center gap-8" style={{ padding: "10px 0 6px 6px", position: "sticky", left: 0 }}>
+                <span style={{ width: 10, height: 10, borderRadius: 3, background: proj.color }} />
+                <strong style={{ fontSize: 12 }}>{proj.name}</strong>
+                <span className="mono muted-2" style={{ fontSize: 10.5 }}>{proj.code}</span>
+                <span className="chip">{items.length}</span>
+              </div>
+              {items.map(it => {
+                // Map startCol (0-17) across 2 quarters
+                const totalCells = 18;
+                const startPct = (it.startCol / totalCells) * 100;
+                const widthPct = (it.span / totalCells) * 100;
+                return (
+                  <div key={it.id} style={{ display: "grid", gridTemplateColumns: `220px repeat(${months.length}, 1fr)`, alignItems: "center", padding: "6px 0", position: "relative" }}>
+                    <div className="flex items-center gap-6 truncate" style={{ padding: "0 8px", fontSize: 12.5 }}>
+                      <Icon name="bolt" size={12} style={{ color: proj.color }} />
+                      <span className="truncate">{it.title}</span>
+                    </div>
+                    <div style={{ gridColumn: `2 / span ${months.length}`, position: "relative", height: 30 }}>
+                      {months.map((_, i) => (
+                        <div key={i} style={{ position: "absolute", left: `${(i / months.length) * 100}%`, top: 0, bottom: 0, borderLeft: "1px dashed var(--border-subtle)" }} />
+                      ))}
+                      <div className="roadmap-bar" style={{
+                        position: "absolute", left: `${startPct}%`, width: `${widthPct}%`,
+                        top: 4, bottom: 4, borderRadius: 6,
+                        background: `color-mix(in oklch, ${proj.color} 22%, var(--bg-1))`,
+                        border: `1px solid ${proj.color}`,
+                        boxShadow: `0 0 20px -6px ${proj.color}`,
+                        "--proj": proj.color,
+                        overflow: "hidden",
+                        display: "flex", alignItems: "center", padding: "0 10px",
+                        fontSize: 11.5, color: "var(--fg-0)", gap: 8
+                      }}>
+                        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, ${proj.color} 0%, ${proj.color} ${it.progress}%, transparent ${it.progress}%)`, opacity: 0.25 }} />
+                        <span className="truncate" style={{ position: "relative" }}>{it.title}</span>
+                        <span className="mono muted-2" style={{ position: "relative", marginLeft: "auto", fontSize: 10.5 }}>{it.progress}%</span>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+        {/* Today marker note */}
+        <div className="flex items-center gap-8 mono muted-2" style={{ fontSize: 10.5, marginTop: 12 }}>
+          <span style={{ width: 12, height: 2, background: "var(--accent)" }} />
+          <span>Today · Apr 20</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+Object.assign(window, { IssueDetail, DocsView, RoadmapView });

views-main.jsx ADDED Viewed

	@@ -0,0 +1,547 @@

+// Home (dashboard) + Inbox + Issues (board + list) + Issue detail
+// ==== HOME ====
+const HomeView = ({ setView, setIssueId, cardStyle }) => {
+  if (cardStyle === "minimal") return <HomeMinimal setView={setView} setIssueId={setIssueId} />;
+  return <HomeDetailed setView={setView} setIssueId={setIssueId} />;
+};
+// Minimal home: quiet, scannable, editorial. Just 3 things.
+const HomeMinimal = ({ setView, setIssueId }) => {
+  const myIssues = ISSUES.filter(i => i.assignees.includes("u1") || i.assignees.includes("u2")).slice(0, 4);
+  const activePRs = PRS.filter(p => p.status !== "merged").slice(0, 3);
+  const urgentCount = ISSUES.filter(i => i.priority === "urgent").length;
+  return (
+    <div className="scroll-y" style={{ padding: "48px 28px 32px", flex: 1, minWidth: 0 }}>
+      <div style={{ maxWidth: 760, margin: "0 auto" }}>
+        {/* Quiet greeting */}
+        <div style={{ marginBottom: 48 }}>
+          <div className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10 }}>Monday · 20 April · 07:48</div>
+          <h1 className="editorial" style={{ margin: 0, fontSize: 40, fontWeight: 400, letterSpacing: "-0.025em", lineHeight: 1.15 }}>
+            Good morning, Amara.
+          </h1>
+          <p className="muted" style={{ fontSize: 16, marginTop: 10, lineHeight: 1.5, fontWeight: 300 }}>
+            {urgentCount} urgent · {activePRs.length} reviews waiting · Iteration 42 on track.
+          </p>
+          <div className="flex gap-8" style={{ marginTop: 18 }}>
+            <button className="btn" onClick={() => window.openWeek()}><Icon name="calendar" size={13} /> Week</button>
+            <button className="btn" onClick={() => window.openDigest()}><Icon name="sparkle" size={13} /> Digest</button>
+          </div>
+        </div>
+        {/* Focus — plain list, no chrome */}
+        <div style={{ marginBottom: 40 }}>
+          <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
+            <div className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>Your focus</div>
+            <button className="btn ghost sm" onClick={() => setView("issues")}>All issues <Icon name="arrow-right" size={12} /></button>
+          </div>
+          <div style={{ borderTop: "1px solid var(--border-subtle)" }}>
+            {myIssues.map(is => {
+              const proj = PROJECTS.find(p => p.id === is.project);
+              return (
+                <button key={is.id}
+                  onClick={() => { setIssueId(is.id); setView("issue"); }}
+                  style={{ display: "flex", alignItems: "center", gap: 14, width: "100%", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)", textAlign: "left", background: "transparent", border: "none", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }}>
+                  <PriorityGlyph level={is.priority} />
+                  <span className="mono muted-2" style={{ fontSize: 11, width: 64, flexShrink: 0 }}>{is.id}</span>
+                  <span style={{ flex: 1, fontSize: 14 }} className="truncate">{is.title}</span>
+                  <span className="mono muted-2" style={{ fontSize: 11 }}>{proj.code}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        {/* Reviews — minimal */}
+        <div style={{ marginBottom: 40 }}>
+          <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
+            <div className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>Review queue</div>
+            <button className="btn ghost sm" onClick={() => setView("prs")}>All PRs <Icon name="arrow-right" size={12} /></button>
+          </div>
+          <div style={{ borderTop: "1px solid var(--border-subtle)" }}>
+            {activePRs.map(pr => {
+              const author = PEOPLE.find(p => p.id === pr.author);
+              return (
+                <button key={pr.id} onClick={() => window.openPR(pr)}
+                  style={{ display: "flex", alignItems: "center", gap: 14, width: "100%", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)", textAlign: "left", background: "transparent", border: "none", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }}>
+                  <Avatar user={author} size="xs" />
+                  <span className="mono muted-2" style={{ fontSize: 11, width: 64, flexShrink: 0 }}>{pr.id}</span>
+                  <span style={{ flex: 1, fontSize: 14 }} className="truncate">{pr.title}</span>
+                  <span className="mono muted-2" style={{ fontSize: 11 }}>{pr.updated}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        {/* One-line iteration status */}
+        <div style={{ padding: "18px 0", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "baseline", gap: 16 }}>
+          <span className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>Iteration 42</span>
+          <span style={{ fontSize: 14 }}><strong className="mono">12</strong><span className="muted"> / 34 pts · day 6 of 14 · on track</span></span>
+          <div style={{ flex: 1 }} />
+          <div style={{ width: 120, height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+            <div style={{ width: "35%", height: "100%", background: "var(--accent)" }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+// Detailed home: the current dense dashboard
+const HomeDetailed = ({ setView, setIssueId }) => {
+  const myIssues = ISSUES.filter(i => i.assignees.includes("u1") || i.assignees.includes("u2")).slice(0, 5);
+  const activePRs = PRS.filter(p => p.status !== "merged");
+  const recentDocs = [
+    { title: "Aurora: collaborative canvas PRD", author: "u1", time: "2h ago" },
+    { title: "ADR 041 — Canvas rendering pipeline", author: "u2", time: "2d ago" },
+    { title: "Apr 18 — Platform weekly", author: "u5", time: "2d ago" },
+  ];
+  const weekDays = ["Apr 14","15","16","17","18","19","20"];
+  // Fake velocity sparkline
+  const velocity = [3, 7, 5, 9, 12, 8, 11];
+  return (
+    <div className="scroll-y" style={{ padding: "24px 28px", flex: 1, minWidth: 0 }}>
+      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
+        {/* greeting */}
+        <div className="flex items-center justify-between" style={{ marginBottom: 18 }}>
+          <div>
+            <div className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 4 }}>Monday · 20 April 2026</div>
+            <h1 className="editorial hero-title" style={{ margin: 0, fontSize: 32, fontWeight: 400, letterSpacing: "-0.02em" }}>
+              Good morning, Amara. Four things need your attention today.
+            </h1>
+          </div>
+          <div className="flex gap-8">
+            <button className="btn" onClick={() => window.openWeek()}><Icon name="calendar" size={13} /> This week</button>
+            <button className="btn primary" onClick={() => window.openDigest()}><Icon name="sparkle" size={13} /> Daily digest</button>
+          </div>
+        </div>
+        {/* focus row */}
+        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16, marginBottom: 16 }}>
+          {/* My focus */}
+          <div className="card" style={{ padding: 16 }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+              <div className="flex items-center gap-8">
+                <strong style={{ fontSize: 13 }}>My focus</strong>
+                <span className="chip">{myIssues.length} issues</span>
+              </div>
+              <button className="btn ghost sm" onClick={() => setView("issues")}>View all <Icon name="arrow-right" size={12} /></button>
+            </div>
+            <div className="ruled">
+              {myIssues.map(is => {
+                const proj = PROJECTS.find(p => p.id === is.project);
+                return (
+                  <button key={is.id} className="flex items-center gap-12" style={{ width: "100%", padding: "10px 4px", textAlign: "left" }}
+                    onClick={() => { setIssueId(is.id); setView("issue"); }}>
+                    <PriorityGlyph level={is.priority} />
+                    <span className="mono muted-2" style={{ fontSize: 11, width: 64, flexShrink: 0 }}>{is.id}</span>
+                    <span className="status" >
+                      <span className="s-dot" style={{ borderColor: `var(--status-${is.status === "backlog" ? "todo" : is.status})`, background: is.status === "done" ? `var(--status-${is.status})` : "transparent" }} />
+                    </span>
+                    <span className="flex-1 truncate" style={{ fontSize: 12.5 }}>{is.title}</span>
+                    <span className="chip" style={{ color: proj.color, borderColor: "transparent", background: "transparent", padding: "2px 0" }}>
+                      <span className="d" style={{ background: proj.color }} /> {proj.code}
+                    </span>
+                    <span className="muted-2 mono" style={{ fontSize: 11, width: 60, textAlign: "right" }}>{is.due || "—"}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          {/* Iteration 42 progress */}
+          <div className="card" style={{ padding: 16 }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: 4 }}>
+              <strong style={{ fontSize: 13 }}>Iteration 42</strong>
+              <span className="chip"><span className="d" style={{ background: "var(--accent)" }} /> active</span>
+            </div>
+            <div className="muted mono" style={{ fontSize: 11, marginBottom: 12 }}>Apr 14 — Apr 28 · day 6 of 14</div>
+            <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8 }}>
+              <span className="stat-num" style={{ fontSize: 42 }}>12</span>
+              <span className="muted" style={{ fontSize: 13 }}>/ 34 points done</span>
+            </div>
+            {/* segmented bar */}
+            <div style={{ display: "flex", height: 8, borderRadius: 4, overflow: "hidden", background: "var(--bg-3)", marginBottom: 10 }}>
+              <div style={{ flex: 12, background: "var(--accent)" }} />
+              <div style={{ flex: 8, background: "var(--violet)" }} />
+              <div style={{ flex: 5, background: "var(--amber)" }} />
+              <div style={{ flex: 9, background: "var(--bg-3)" }} />
+            </div>
+            <div className="flex gap-12" style={{ fontSize: 11.5, flexWrap: "wrap" }}>
+              <span className="flex items-center gap-4"><span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--accent)" }} /> Done · 12</span>
+              <span className="flex items-center gap-4"><span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--violet)" }} /> Review · 8</span>
+              <span className="flex items-center gap-4"><span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--amber)" }} /> Doing · 5</span>
+              <span className="flex items-center gap-4"><span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--bg-3)" }} /> Todo · 9</span>
+            </div>
+            <div className="divider" />
+            <div className="flex items-center justify-between" style={{ fontSize: 12 }}>
+              <span className="muted">On track for</span>
+              <span>Apr 26 <span className="muted-2">(2d early)</span></span>
+            </div>
+          </div>
+        </div>
+        {/* second row */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 16 }}>
+          {/* PR queue */}
+          <div className="card" style={{ padding: 16 }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+              <strong style={{ fontSize: 13 }}>Your review queue</strong>
+              <button className="btn ghost sm" onClick={() => setView("prs")}>{activePRs.length}<Icon name="arrow-right" size={12} /></button>
+            </div>
+            <div className="ruled">
+              {activePRs.slice(0, 4).map(pr => {
+                const author = PEOPLE.find(p => p.id === pr.author);
+                return (
+                  <div key={pr.id} style={{ padding: "9px 0" }}>
+                    <div className="flex items-center gap-8" style={{ marginBottom: 4 }}>
+                      <Icon name="pr" size={13} style={{ color: pr.status === "draft" ? "var(--fg-3)" : "var(--accent)" }} />
+                      <span className="mono muted-2" style={{ fontSize: 11 }}>{pr.id}</span>
+                      <span className="flex-1 truncate" style={{ fontSize: 12 }}>{pr.title}</span>
+                    </div>
+                    <div className="flex items-center gap-8 muted" style={{ fontSize: 11 }}>
+                      <Avatar user={author} size="xs" />
+                      <span className="mono">{author.handle}</span>
+                      <span>·</span>
+                      <span style={{ color: "var(--status-done)" }}>+{pr.additions}</span>
+                      <span style={{ color: "var(--rose)" }}>−{pr.deletions}</span>
+                      <span>·</span>
+                      <span>{pr.checks.failed ? <span style={{ color: "var(--rose)" }}>✕ {pr.checks.failed}</span> : <span style={{ color: "var(--status-done)" }}>✓ {pr.checks.passed}</span>}</span>
+                      <span style={{ marginLeft: "auto" }}>{pr.updated}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Activity stream */}
+          <div className="card" style={{ padding: 16 }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+              <strong style={{ fontSize: 13 }}>Activity</strong>
+              <span className="mono muted-2" style={{ fontSize: 11 }}>live</span>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {INBOX.slice(0, 5).map(n => {
+                const u = PEOPLE.find(p => p.id === n.from);
+                return (
+                  <div key={n.id} className="flex gap-8" style={{ fontSize: 12 }}>
+                    {u ? <Avatar user={u} size="xs" /> : <span className="avatar xs" style={{ background: "var(--bg-3)" }} />}
+                    <div style={{ flex: 1, minWidth: 0, lineHeight: 1.4 }}>
+                      <div>
+                        {u && <strong>{u.name.split(" ")[0]}</strong>}{" "}
+                        <span className="muted">{n.text}</span>{" "}
+                        <span className="mono" style={{ color: "var(--accent)" }}>{n.target}</span>
+                      </div>
+                      <div className="muted-2 mono" style={{ fontSize: 10.5 }}>{n.time}</div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Velocity */}
+          <div className="card" style={{ padding: 16 }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+              <strong style={{ fontSize: 13 }}>Team velocity</strong>
+              <span className="chip" style={{ color: "var(--status-done)" }}><Icon name="trend" size={11} /> +8%</span>
+            </div>
+            <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 96, marginBottom: 10 }}>
+              {velocity.map((v, i) => (
+                <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+                  <div className={`velo-bar ${i === velocity.length - 1 ? "" : "dim"}`} style={{ width: "100%", height: `${v * 7}px`, borderRadius: 3 }} />
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-between muted-2 mono" style={{ fontSize: 10 }}>
+              {weekDays.map(d => <span key={d}>{d}</span>)}
+            </div>
+            <div className="divider" />
+            <div className="flex items-center justify-between" style={{ fontSize: 11.5 }}>
+              <span className="muted">Avg points / day</span>
+              <strong className="mono">7.8</strong>
+            </div>
+            <div className="flex items-center justify-between" style={{ fontSize: 11.5, marginTop: 4 }}>
+              <span className="muted">Cycle time p50</span>
+              <strong className="mono">2.4d</strong>
+            </div>
+          </div>
+        </div>
+        {/* Recent docs */}
+        <div className="card" style={{ padding: 16, marginBottom: 32 }}>
+          <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
+            <strong style={{ fontSize: 13 }}>Recently edited docs</strong>
+            <button className="btn ghost sm" onClick={() => setView("docs")}>All docs <Icon name="arrow-right" size={12} /></button>
+          </div>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
+            {recentDocs.map((d, i) => {
+              const u = PEOPLE.find(p => p.id === d.author);
+              return (
+                <button key={i} className="flex col" style={{
+                  padding: 14, border: "1px solid var(--border)", borderRadius: 10,
+                  background: "var(--bg-0)", textAlign: "left", gap: 8
+                }} onClick={() => setView("docs")}>
+                  <Icon name="docs" size={15} style={{ color: "var(--fg-2)" }} />
+                  <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{d.title}</div>
+                  <div className="flex items-center gap-6 muted" style={{ fontSize: 11 }}>
+                    <Avatar user={u} size="xs" />
+                    <span>{u.name.split(" ")[0]}</span>
+                    <span>·</span>
+                    <span>{d.time}</span>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ==== ISSUES ====
+const IssuesView = ({ setView, setIssueId, cardStyle }) => {
+  const [mode, setMode] = React.useState("board");
+  const [grouping, setGrouping] = React.useState("status");
+  const [issues, setIssues] = React.useState(ISSUES);
+  React.useEffect(() => {
+    const load = () => window.apiFetch('GET', '/api/issues').then(setIssues).catch(() => {});
+    load();
+    document.addEventListener('meridian:refresh', load);
+    return () => document.removeEventListener('meridian:refresh', load);
+  }, []);
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title">
+          <span className="eyebrow">PROJECT / AURORA</span>
+          <Icon name="chevron-right" size={12} style={{ color: "var(--fg-3)" }} />
+          <span>Issues</span>
+          <span className="chip mono">{issues.length}</span>
+        </div>
+        <div className="topbar-spacer" />
+        <button className="btn ghost sm" onClick={() => window.openFilter("issues")}><Icon name="filter" size={13} /> Filter</button>
+        <button className="btn ghost sm" onClick={() => window.openPicker({
+          title: "Group by",
+          options: [
+            { value: "status", label: "Status" },
+            { value: "priority", label: "Priority" },
+            { value: "assignee", label: "Assignee" },
+            { value: "project", label: "Project" },
+            { value: "label", label: "Label" },
+          ],
+          onChoose: (o) => setGrouping(o.value),
+        })}>Group: <span className="mono" style={{ color: "var(--fg-0)" }}>{grouping}</span> <Icon name="chevron-down" size={12} /></button>
+        <div className="vdivider" style={{ height: 20 }} />
+        <div className="segmented">
+          <button className={mode === "board" ? "on" : ""} onClick={() => setMode("board")}><Icon name="board" size={13} /> Board</button>
+          <button className={mode === "list" ? "on" : ""} onClick={() => setMode("list")}><Icon name="list" size={13} /> List</button>
+          <button className={mode === "timeline" ? "on" : ""} onClick={() => setMode("timeline")}><Icon name="timeline" size={13} /> Timeline</button>
+        </div>
+        <button className="btn ghost sm" onClick={() => window.openAI("What are the top blocking issues right now?", "general", { issues })}><Icon name="sparkle" size={13} /> AI Summary</button>
+        <button className="btn sm primary" onClick={() => window.openNewIssue()}><Icon name="plus" size={13} /> New issue</button>
+      </div>
+      {mode === "board" && <KanbanBoard setView={setView} setIssueId={setIssueId} cardStyle={cardStyle} issues={issues} />}
+      {mode === "list" && <IssuesList setView={setView} setIssueId={setIssueId} issues={issues} />}
+      {mode === "timeline" && <IssuesTimeline issues={issues} />}
+    </div>
+  );
+};
+const KanbanBoard = ({ setView, setIssueId, cardStyle, issues }) => {
+  const cols = [
+    { key: "backlog", label: "Backlog" },
+    { key: "todo", label: "Todo" },
+    { key: "progress", label: "In progress" },
+    { key: "review", label: "In review" },
+    { key: "done", label: "Done" },
+  ];
+  return (
+    <div className="scroll-y" style={{ flex: 1, padding: "12px 16px" }}>
+      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols.length}, minmax(260px, 1fr))`, gap: 12, minHeight: "100%" }}>
+        {cols.map(col => {
+          const items = issues.filter(i => i.status === col.key);
+          const klass = col.key === "backlog" ? "todo" : col.key;
+          return (
+            <div key={col.key} style={{ minWidth: 0, display: "flex", flexDirection: "column" }}>
+              <div className="flex items-center gap-8" style={{ padding: "6px 8px", marginBottom: 6 }}>
+                <span className={`status ${klass}`}><span className="s-dot" /></span>
+                <strong style={{ fontSize: 12 }}>{col.label}</strong>
+                <span className="mono muted-2" style={{ fontSize: 11 }}>{items.length}</span>
+                <div style={{ flex: 1 }} />
+                <button className="icon-btn" style={{ width: 20, height: 20 }} onClick={() => window.openNewIssue({ status: col.key })}><Icon name="plus" size={12} /></button>
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                {items.map(is => <KanbanCard key={is.id} issue={is} setView={setView} setIssueId={setIssueId} minimal={cardStyle === "minimal"} />)}
+                {items.length === 0 && (
+                  <div style={{ padding: 24, textAlign: "center", color: "var(--fg-3)", border: "1px dashed var(--border)", borderRadius: 8, fontSize: 11.5 }}>
+                    Drop here
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+const KanbanCard = ({ issue, setView, setIssueId, minimal }) => {
+  const proj = PROJECTS.find(p => p.id === issue.project);
+  const assignees = issue.assignees.map(id => PEOPLE.find(p => p.id === id));
+  if (minimal) {
+    return (
+      <button className="card" style={{ padding: "8px 10px", textAlign: "left", background: "var(--bg-1)" }}
+        onClick={() => { setIssueId(issue.id); setView("issue"); }}>
+        <div className="flex items-center gap-6" style={{ marginBottom: 4 }}>
+          <PriorityGlyph level={issue.priority} />
+          <span className="mono muted-2" style={{ fontSize: 10.5 }}>{issue.id}</span>
+          <div style={{ flex: 1 }} />
+          <AvatarStack users={assignees} size="xs" />
+        </div>
+        <div style={{ fontSize: 12.5, lineHeight: 1.3 }}>{issue.title}</div>
+      </button>
+    );
+  }
+  return (
+    <button className="card" style={{ padding: 10, textAlign: "left", background: "var(--bg-1)", display: "flex", flexDirection: "column", gap: 8 }}
+      onClick={() => { setIssueId(issue.id); setView("issue"); }}>
+      <div className="flex items-center gap-6">
+        <PriorityGlyph level={issue.priority} />
+        <span className="mono muted-2" style={{ fontSize: 10.5 }}>{issue.id}</span>
+        <div style={{ flex: 1 }} />
+        <span className="chip" style={{ color: proj.color, borderColor: "var(--border-subtle)", background: "transparent" }}>
+          <span className="d" style={{ background: proj.color }} /> {proj.code}
+        </span>
+      </div>
+      <div style={{ fontSize: 12.5, lineHeight: 1.35 }}>{issue.title}</div>
+      <div className="flex items-center gap-6" style={{ flexWrap: "wrap" }}>
+        {issue.labels.slice(0, 2).map(lid => {
+          const lab = LABELS.find(l => l.id === lid);
+          return <span key={lid} className="tag" style={{ color: lab.color }}>#{lab.name}</span>;
+        })}
+      </div>
+      <div className="flex items-center gap-8" style={{ fontSize: 10.5, color: "var(--fg-3)" }}>
+        <AvatarStack users={assignees} size="xs" />
+        <div style={{ flex: 1 }} />
+        {issue.branch && <span className="flex items-center gap-2"><Icon name="branch" size={10} /></span>}
+        {issue.commentCount > 0 && <span className="flex items-center gap-2 mono"><Icon name="message" size={10} />{issue.commentCount}</span>}
+        {issue.due && <span className="flex items-center gap-2 mono"><Icon name="calendar" size={10} />{issue.due}</span>}
+      </div>
+    </button>
+  );
+};
+const IssuesList = ({ setView, setIssueId, issues }) => {
+  const groups = {};
+  issues.forEach(i => { (groups[i.status] ||= []).push(i); });
+  return (
+    <div className="scroll-y" style={{ flex: 1 }}>
+      {STATUS.map(s => {
+        const items = groups[s] || [];
+        if (!items.length) return null;
+        const klass = s === "backlog" ? "todo" : s;
+        return (
+          <div key={s}>
+            <div className="flex items-center gap-8" style={{ padding: "10px 20px", background: "var(--bg-1)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
+              <span className={`status ${klass}`}><span className="s-dot" /></span>
+              <strong style={{ fontSize: 12 }}>{STATUS_META[s].label}</strong>
+              <span className="mono muted-2" style={{ fontSize: 11 }}>{items.length}</span>
+              <div style={{ flex: 1 }} />
+              <button className="icon-btn" style={{ width: 20, height: 20 }} onClick={() => window.openNewIssue({ status: s })}><Icon name="plus" size={12} /></button>
+            </div>
+            {items.map(is => {
+              const proj = PROJECTS.find(p => p.id === is.project);
+              const assignees = is.assignees.map(id => PEOPLE.find(p => p.id === id));
+              return (
+                <button key={is.id} className="row" style={{ width: "100%", textAlign: "left", paddingLeft: 20, paddingRight: 20 }}
+                  onClick={() => { setIssueId(is.id); setView("issue"); }}>
+                  <PriorityGlyph level={is.priority} />
+                  <span className="mono muted-2" style={{ fontSize: 11, width: 70, flexShrink: 0 }}>{is.id}</span>
+                  <span className="flex-1 truncate">{is.title}</span>
+                  {is.labels.slice(0, 2).map(lid => {
+                    const lab = LABELS.find(l => l.id === lid);
+                    return <span key={lid} className="tag" style={{ color: lab.color, flexShrink: 0 }}>#{lab.name}</span>;
+                  })}
+                  <span className="chip" style={{ color: proj.color, flexShrink: 0 }}>
+                    <span className="d" style={{ background: proj.color }} /> {proj.code}
+                  </span>
+                  {is.sprint && <span className="mono muted-2" style={{ fontSize: 11, flexShrink: 0 }}>{is.sprint}</span>}
+                  <span className="muted-2 mono" style={{ fontSize: 11, width: 50, textAlign: "right", flexShrink: 0 }}>{is.due || "—"}</span>
+                  <AvatarStack users={assignees} size="xs" />
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+const IssuesTimeline = ({ issues }) => {
+  // Weeks Apr 7 – Jun 1 (8 weeks)
+  const weeks = ["Apr 07","Apr 14","Apr 21","Apr 28","May 05","May 12","May 19","May 26"];
+  const items = issues.filter(i => i.due).slice(0, 10).map((is, i) => ({
+    issue: is,
+    startWeek: (i * 3) % 5,
+    span: 1 + (i % 3),
+  }));
+  return (
+    <div className="scroll-y" style={{ flex: 1, padding: 16 }}>
+      <div style={{ display: "grid", gridTemplateColumns: `240px repeat(${weeks.length}, 1fr)`, fontSize: 11, color: "var(--fg-3)", borderBottom: "1px solid var(--border)", paddingBottom: 6 }}>
+        <div />
+        {weeks.map(w => <div key={w} className="mono" style={{ padding: "0 6px" }}>{w}</div>)}
+      </div>
+      <div>
+        {items.map(({ issue, startWeek, span }) => {
+          const proj = PROJECTS.find(p => p.id === issue.project);
+          return (
+            <div key={issue.id} style={{ display: "grid", gridTemplateColumns: `240px repeat(${weeks.length}, 1fr)`, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border-subtle)" }}>
+              <div className="flex items-center gap-6 truncate" style={{ fontSize: 12 }}>
+                <PriorityGlyph level={issue.priority} />
+                <span className="mono muted-2" style={{ fontSize: 10.5 }}>{issue.id}</span>
+                <span className="truncate">{issue.title}</span>
+              </div>
+              {weeks.map((_, i) => (
+                <div key={i} style={{ height: 24, position: "relative", borderLeft: "1px dashed var(--border-subtle)" }}>
+                  {i === startWeek && (
+                    <div style={{
+                      position: "absolute", top: 3, bottom: 3, left: 4, right: 4,
+                      width: `calc(${span * 100}% - 8px)`,
+                      background: `color-mix(in oklch, ${proj.color} 30%, var(--bg-1))`,
+                      borderLeft: `3px solid ${proj.color}`,
+                      borderRadius: 4,
+                      padding: "2px 6px", fontSize: 10.5, fontFamily: "var(--font-mono)",
+                      color: "var(--fg-0)", overflow: "hidden", whiteSpace: "nowrap"
+                    }}>
+                      {issue.id}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+Object.assign(window, { HomeView, IssuesView });

views-more.jsx ADDED Viewed

	@@ -0,0 +1,496 @@

+// Sprints, Pull requests, Team, Settings views
+// ==== SPRINTS ====
+const SprintsView = ({ setView, setIssueId }) => {
+  const active = SPRINTS.find(s => s.active);
+  const sprintIssues = ISSUES.filter(i => i.sprint === "Iter 42");
+  const byStatus = { backlog: [], todo: [], progress: [], review: [], done: [] };
+  sprintIssues.forEach(i => byStatus[i.status]?.push(i));
+  // burndown data (ideal vs actual)
+  const days = 14;
+  const ideal = Array.from({ length: days + 1 }, (_, i) => 34 - (34 / days) * i);
+  const actual = [34, 34, 33, 31, 30, 28, 25, null, null, null, null, null, null, null, null];
+  // build path
+  const W = 100, H = 100;
+  const toPath = (pts, prop = "actual") => pts.map((v, i) => v == null ? null : `${(i / days) * W},${H - (v / 34) * H}`).filter(Boolean).join(" ");
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title">
+          <Icon name="sprint" size={15} style={{ color: "var(--accent)" }} />
+          <span>Iteration 42</span>
+          <span className="chip" style={{ color: "var(--accent)" }}><span className="d" style={{ background: "var(--accent)" }} /> active</span>
+          <span className="mono muted-2" style={{ fontSize: 11 }}>Apr 14 – Apr 28 · day 6/14</span>
+        </div>
+        <div className="topbar-spacer" />
+        <button className="btn ghost sm" onClick={() => window.openSprintReport()}><Icon name="download" size={13} /> Report</button>
+        <button className="btn ghost sm" onClick={() => window.openRetro()}><Icon name="sparkle" size={13} /> Retrospective draft</button>
+        <button className="btn ghost sm" onClick={() => window.openAI("Summarize Iteration 42 progress", "sprint", { issues: sprintIssues })}><Icon name="sparkle" size={13} /> AI Summary</button>
+        <button className="btn sm" onClick={() => { if(confirm("Complete iteration 42? 22pts will move to backlog.")) window.toast("Iteration 42 closed"); }}>Complete iteration</button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: 20 }}>
+        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
+          {/* Top summary */}
+          <div style={{ display: "grid", gridTemplateColumns: "2fr 3fr", gap: 16, marginBottom: 20 }}>
+            {/* Burndown */}
+            <div className="card" style={{ padding: 16 }}>
+              <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
+                <strong style={{ fontSize: 13 }}>Burndown</strong>
+                <span className="chip mono" style={{ color: "var(--status-done)" }}>−22 pts</span>
+              </div>
+              <div style={{ position: "relative", height: 180, marginTop: 8 }}>
+                <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%", overflow: "visible" }}>
+                  {/* gridlines */}
+                  {[0, 25, 50, 75, 100].map(y => (
+                    <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="var(--border-subtle)" strokeWidth="0.2" vectorEffect="non-scaling-stroke" />
+                  ))}
+                  {/* ideal */}
+                  <polyline points={toPath(ideal)} fill="none" stroke="var(--fg-3)" strokeWidth="0.4" strokeDasharray="1 1" vectorEffect="non-scaling-stroke" />
+                  {/* actual */}
+                  <polyline className="burndown-actual" points={toPath(actual)} fill="none" stroke="var(--accent)" strokeWidth="0.8" vectorEffect="non-scaling-stroke" />
+                  {/* today marker */}
+                  <line x1={(6/days)*100} y1="0" x2={(6/days)*100} y2="100" stroke="var(--accent-dim)" strokeWidth="0.3" vectorEffect="non-scaling-stroke" />
+                </svg>
+              </div>
+              <div className="flex justify-between muted-2 mono" style={{ fontSize: 10, marginTop: 6 }}>
+                <span>Apr 14</span>
+                <span>Apr 21</span>
+                <span>Apr 28</span>
+              </div>
+              <div className="divider" />
+              <div className="flex items-center justify-between" style={{ fontSize: 12 }}>
+                <div>
+                  <div className="muted" style={{ fontSize: 11 }}>Remaining</div>
+                  <div className="mono" style={{ fontSize: 15 }}>22<span className="muted-2" style={{ fontSize: 11 }}> pts</span></div>
+                </div>
+                <div>
+                  <div className="muted" style={{ fontSize: 11 }}>Required / day</div>
+                  <div className="mono" style={{ fontSize: 15 }}>2.75</div>
+                </div>
+                <div>
+                  <div className="muted" style={{ fontSize: 11 }}>Confidence</div>
+                  <div className="mono" style={{ fontSize: 15, color: "var(--status-done)" }}>82%</div>
+                </div>
+              </div>
+            </div>
+            {/* Status breakdown + goals */}
+            <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gap: 16 }}>
+              <div className="card" style={{ padding: 16 }}>
+                <strong style={{ fontSize: 13, marginBottom: 10, display: "block" }}>By status</strong>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
+                  {STATUS.map(s => {
+                    const items = byStatus[s] || [];
+                    const klass = s === "backlog" ? "todo" : s;
+                    return (
+                      <div key={s}>
+                        <div className={`status ${klass} flex items-center gap-6`} style={{ fontSize: 11, marginBottom: 4 }}><span className="s-dot" />{STATUS_META[s].label}</div>
+                        <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
+                          <span className="stat-num" style={{ fontSize: 30 }}>{items.length}</span>
+                          <span className="muted-2 mono" style={{ fontSize: 10.5 }}>issues</span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="card" style={{ padding: 16 }}>
+                <div className="flex items-center justify-between" style={{ marginBottom: 10 }}>
+                  <strong style={{ fontSize: 13 }}>Iteration goals</strong>
+                  <span className="mono muted-2" style={{ fontSize: 11 }}>2 of 3 on track</span>
+                </div>
+                {[
+                  { text: "Ship Aurora canvas performance rebuild to canary", progress: 62, status: "progress" },
+                  { text: "Close Tessera token migration for iOS + Android", progress: 85, status: "progress" },
+                  { text: "Freeze SSO infra ahead of security audit", progress: 30, status: "blocked" },
+                ].map((g, i) => (
+                  <div key={i} className="flex items-center gap-10" style={{ padding: "8px 0", borderTop: i > 0 ? "1px solid var(--border-subtle)" : "none" }}>
+                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: g.status === "blocked" ? "var(--rose)" : "var(--accent)", flexShrink: 0 }} />
+                    <span className="flex-1" style={{ fontSize: 12.5 }}>{g.text}</span>
+                    <div style={{ width: 90, height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                      <div style={{ width: `${g.progress}%`, height: "100%", background: g.status === "blocked" ? "var(--rose)" : "var(--accent)" }} />
+                    </div>
+                    <span className="mono muted-2" style={{ fontSize: 11, width: 34, textAlign: "right" }}>{g.progress}%</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          {/* Scope list */}
+          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+            <div className="flex items-center gap-8" style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
+              <strong style={{ fontSize: 13 }}>Scope</strong>
+              <span className="mono muted-2" style={{ fontSize: 11 }}>{sprintIssues.length} issues · 34 pts</span>
+              <div style={{ flex: 1 }} />
+              <button className="btn ghost sm" onClick={() => window.openFilter("iteration")}><Icon name="filter" size={13} /> Filter</button>
+              <button className="btn ghost sm" onClick={() => window.openNewIssue({ sprint: "Iter 42" })}><Icon name="plus" size={13} /> Add from backlog</button>
+            </div>
+            <div>
+              {sprintIssues.map((is) => {
+                const proj = PROJECTS.find(p => p.id === is.project);
+                const assignees = is.assignees.map(id => PEOPLE.find(p => p.id === id));
+                const klass = is.status === "backlog" ? "todo" : is.status;
+                return (
+                  <button key={is.id} className="row" style={{ width: "100%", textAlign: "left" }}
+                    onClick={() => { setIssueId(is.id); setView("issue"); }}>
+                    <PriorityGlyph level={is.priority} />
+                    <span className="mono muted-2" style={{ fontSize: 11, width: 70, flexShrink: 0 }}>{is.id}</span>
+                    <span className={`status ${klass}`}><span className="s-dot" /></span>
+                    <span className="flex-1 truncate">{is.title}</span>
+                    <span className="chip" style={{ color: proj.color }}>
+                      <span className="d" style={{ background: proj.color }} /> {proj.code}
+                    </span>
+                    <span className="mono muted-2" style={{ fontSize: 11, width: 30, textAlign: "right" }}>{is.estimate}</span>
+                    <AvatarStack users={assignees} size="xs" />
+                    <span className="muted-2 mono" style={{ fontSize: 11, width: 50, textAlign: "right" }}>{is.due || "—"}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          {/* Other iterations */}
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 16 }}>
+            {SPRINTS.map(s => (
+              <div key={s.id} className="card" style={{ padding: 12, opacity: s.active ? 1 : 0.85 }}>
+                <div className="flex items-center justify-between" style={{ marginBottom: 6 }}>
+                  <strong style={{ fontSize: 12 }}>{s.name}</strong>
+                  {s.active && <span className="chip" style={{ color: "var(--accent)" }}><span className="d" style={{ background: "var(--accent)" }} /> active</span>}
+                </div>
+                <div className="mono muted-2" style={{ fontSize: 10.5, marginBottom: 10 }}>{s.range}</div>
+                <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden", marginBottom: 8 }}>
+                  <div style={{ width: `${(s.done / s.scope) * 100}%`, height: "100%", background: s.active ? "var(--accent)" : "var(--fg-3)" }} />
+                </div>
+                <div className="flex items-center justify-between" style={{ fontSize: 11 }}>
+                  <span className="mono">{s.done}/{s.scope}</span>
+                  <span className="muted-2 mono">v{s.velocity}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ==== PULL REQUESTS ====
+const PRsView = () => {
+  const [filter, setFilter] = React.useState("all");
+  const [prs, setPrs] = React.useState(PRS);
+  const [aiOpen, setAiOpen] = React.useState(false);
+  const [aiText, setAiText] = React.useState("");
+  const [aiLoading, setAiLoading] = React.useState(false);
+  React.useEffect(() => {
+    const load = () => window.apiFetch('GET', '/api/prs').then(setPrs).catch(() => setPrs([...PRS]));
+    load();
+    document.addEventListener('meridian:refresh', load);
+    return () => document.removeEventListener('meridian:refresh', load);
+  }, []);
+  const list = prs.filter(pr => filter === "all" || pr.status === filter);
+  const runPRAnalysis = async () => {
+    const key = window.getAmdUrl ? window.getAmdUrl() : '';
+    if (!key) { window.openAI("Analyze all open pull requests", "pr", { prs: list }); return; }
+    setAiOpen(true); setAiText(""); setAiLoading(true);
+    const prSummary = list.map(p => ({
+      id: p.id, title: p.title, status: p.status, branch: p.branch,
+      additions: p.additions, deletions: p.deletions,
+      checks: p.checks, updated: p.updated,
+    }));
+    try {
+      const res = await fetch(key, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer dummy-key` },
+        body: JSON.stringify({
+          model: 'llama-3.3-70b-versatile', max_tokens: 800, stream: true,
+          messages: [
+            { role: 'system', content: 'You are the Meridian PR Analyst. Analyze pull requests and give: 1) Overall risk level (High/Medium/Low), 2) Top 3 action items for the team, 3) Any PRs with failing checks or missing reviewers. Be direct and concise. Use markdown.' },
+            { role: 'user', content: `Analyze these ${prSummary.length} PRs:\n${JSON.stringify(prSummary, null, 2)}` },
+          ],
+        }),
+      });
+      const reader = res.body.getReader(); const decoder = new TextDecoder(); let full = '';
+      while (true) {
+        const { done, value } = await reader.read(); if (done) break;
+        for (const line of decoder.decode(value).split('\n').filter(l => l.startsWith('data: ') && l !== 'data: [DONE]')) {
+          try { const delta = JSON.parse(line.slice(6)).choices?.[0]?.delta?.content || ''; full += delta; setAiText(full); } catch(_) {}
+        }
+      }
+    } catch(e) { setAiText(`⚠ API Error: ${e?.message || String(e)}`); }
+    setAiLoading(false);
+  };
+  const renderMd = t => t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+    .replace(/`([^`]+)`/g,"<code style='background:var(--bg-3);padding:1px 4px;border-radius:3px;font-family:var(--font-mono);font-size:0.9em'>$1</code>")
+    .replace(/\n/g,'<br>');
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title">
+          <Icon name="pr" size={15} />
+          <span>Pull requests</span>
+          <span className="chip mono">{prs.length}</span>
+        </div>
+        <div className="topbar-spacer" />
+        <div className="segmented">
+          {[
+            { id: "all", label: "All" },
+            { id: "open", label: "Open" },
+            { id: "review", label: "In review" },
+            { id: "draft", label: "Drafts" },
+            { id: "merged", label: "Merged" },
+          ].map(t => (
+            <button key={t.id} className={filter === t.id ? "on" : ""} onClick={() => setFilter(t.id)}>{t.label}</button>
+          ))}
+        </div>
+        <button className="btn ghost sm" onClick={() => window.openFilter("pull requests")}><Icon name="filter" size={13} /> Filter</button>
+        <button className="btn ghost sm" style={{ color: "var(--accent)" }} onClick={runPRAnalysis}><Icon name="sparkle" size={13} /> AI Analysis</button>
+        <button className="btn sm primary" onClick={() => window.openNewPR()}><Icon name="plus" size={13} /> New PR</button>
+      </div>
+      {/* AI Analysis panel */}
+      {aiOpen && (
+        <div style={{ margin: "12px 16px 0", padding: 16, background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 10, position: "relative" }}>
+          <div className="flex items-center gap-8" style={{ marginBottom: 10 }}>
+            <Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} />
+            <strong style={{ fontSize: 13 }}>PR Analyst</strong>
+            {aiLoading && <span className="chip mono" style={{ color: "var(--amber)" }}>analyzing…</span>}
+            <div style={{ flex: 1 }} />
+            <button className="icon-btn" onClick={() => setAiOpen(false)}><Icon name="x" size={13} /></button>
+          </div>
+          {aiText
+            ? <div style={{ fontSize: 13, lineHeight: 1.6, color: "var(--fg-1)" }} dangerouslySetInnerHTML={{ __html: renderMd(aiText) }} />
+            : <div style={{ display: "flex", gap: 5, alignItems: "center" }}>
+                {[0,1,2].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: `pulse 1s ease-in-out ${i*0.2}s infinite` }} />)}
+              </div>
+          }
+          {!aiLoading && aiText && (
+            <button className="btn ghost sm" style={{ marginTop: 10 }} onClick={() => window.openAI("Dive deeper into these PRs", "pr", { prs: list })}>
+              <Icon name="sparkle" size={12} /> Open in AI panel
+            </button>
+          )}
+        </div>
+      )}
+      <div className="scroll-y" style={{ flex: 1 }}>
+        {list.map((pr, i) => {
+          const author = PEOPLE.find(p => p.id === pr.author);
+          const reviewers = pr.reviewers.map(id => PEOPLE.find(p => p.id === id));
+          const statusColor = { open: "var(--accent)", review: "var(--violet)", draft: "var(--fg-3)", merged: "var(--violet)" }[pr.status];
+          return (
+            <button key={pr.id} onClick={() => window.openPR(pr)} style={{ padding: "14px 24px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "flex-start", gap: 12, width: "100%", textAlign: "left", background: "transparent", border: "none", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }}>
+              <Icon name="pr" size={18} style={{ color: statusColor, marginTop: 1 }} />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div className="flex items-center gap-8" style={{ marginBottom: 4 }}>
+                  <span style={{ fontSize: 13.5, fontWeight: 500 }}>{pr.title}</span>
+                  <span className="chip" style={{ color: statusColor, textTransform: "capitalize" }}>{pr.status}</span>
+                  {pr.issue && <span className="chip mono">{pr.issue}</span>}
+                </div>
+                <div className="flex items-center gap-10 muted" style={{ fontSize: 11.5, flexWrap: "wrap" }}>
+                  <span className="mono">{pr.id}</span>
+                  <span>opened by <strong className="mono" style={{ color: "var(--fg-1)" }}>@{author?.handle || "you"}</strong></span>
+                  <span className="flex items-center gap-4"><Icon name="branch" size={11} /><span className="mono">{pr.branch}</span> → <span className="mono">{pr.base || "main"}</span></span>
+                  <span>· updated {pr.updated}</span>
+                </div>
+              </div>
+              {/* Checks */}
+              <div className="flex items-center gap-6" style={{ fontSize: 11, flexShrink: 0 }}>
+                {pr.checks?.passed > 0 && <span className="flex items-center gap-2 mono" style={{ color: "var(--status-done)" }}><Icon name="check" size={11} strokeWidth={2.5} />{pr.checks.passed}</span>}
+                {pr.checks?.failed > 0 && <span className="flex items-center gap-2 mono" style={{ color: "var(--rose)" }}><Icon name="x" size={11} strokeWidth={2.5} />{pr.checks.failed}</span>}
+                {pr.checks?.running > 0 && <span className="flex items-center gap-2 mono" style={{ color: "var(--amber)" }}><Icon name="clock" size={11} />{pr.checks.running}</span>}
+              </div>
+              <div className="flex items-center gap-2 mono" style={{ fontSize: 11, flexShrink: 0, minWidth: 90, justifyContent: "flex-end" }}>
+                <span style={{ color: "var(--status-done)" }}>+{pr.additions}</span>
+                <span style={{ color: "var(--rose)" }}>−{pr.deletions || 0}</span>
+              </div>
+              <div style={{ flexShrink: 0, width: 60, display: "flex", justifyContent: "flex-end" }}>
+                <AvatarStack users={reviewers} size="xs" />
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+// ==== TEAM ====
+const TeamView = () => {
+  const teams = [
+    { name: "Platform", members: ["u5","u7","u9"], color: "oklch(0.78 0.14 220)" },
+    { name: "Design systems", members: ["u1","u4"], color: "oklch(0.72 0.17 300)" },
+    { name: "Canvas", members: ["u2","u3","u6"], color: "oklch(0.80 0.16 145)" },
+    { name: "Security", members: ["u8","u9"], color: "oklch(0.72 0.17 20)" },
+  ];
+  return (
+    <div className="flex col flex-1" style={{ minWidth: 0 }}>
+      <div className="page-header">
+        <div className="page-title"><span>Team</span><span className="mono muted-2" style={{ fontSize: 12 }}>· Helix workspace</span></div>
+        <div className="topbar-spacer" />
+        <div className="search" style={{ minWidth: 220 }}>
+          <Icon name="search" size={12} />
+          <input placeholder="Find a teammate…" />
+        </div>
+        <button className="btn ghost sm" onClick={() => window.openAI("Who has the highest workload this sprint?", "team", { people: typeof PEOPLE !== 'undefined' ? PEOPLE : [] })}><Icon name="sparkle" size={13} /> AI Summary</button>
+        <button className="btn sm primary" onClick={() => window.openInvite()}><Icon name="plus" size={13} /> Invite</button>
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: 24 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          {/* Teams */}
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 24 }}>
+            {teams.map(t => (
+              <div key={t.name} className="card" style={{ padding: 14 }}>
+                <div className="flex items-center gap-8" style={{ marginBottom: 10 }}>
+                  <span style={{ width: 8, height: 8, borderRadius: 2, background: t.color }} />
+                  <strong style={{ fontSize: 13 }}>{t.name}</strong>
+                </div>
+                <div className="flex items-center gap-8">
+                  <AvatarStack users={t.members.map(id => PEOPLE.find(p => p.id === id))} size="sm" max={4} />
+                  <span className="muted-2 mono" style={{ fontSize: 11 }}>{t.members.length} people</span>
+                </div>
+              </div>
+            ))}
+          </div>
+          {/* Directory */}
+          <div className="card" style={{ overflow: "hidden" }}>
+            <div className="flex items-center" style={{ padding: "10px 16px", borderBottom: "1px solid var(--border)", fontSize: 11, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>
+              <span style={{ width: 240 }}>Name</span>
+              <span style={{ flex: 1 }}>Role</span>
+              <span style={{ width: 140 }}>Team</span>
+              <span style={{ width: 90, textAlign: "right" }}>Open</span>
+              <span style={{ width: 110, textAlign: "right" }}>Reviewing</span>
+              <span style={{ width: 80, textAlign: "right" }}>Load</span>
+            </div>
+            {PEOPLE.map((u, i) => {
+              const load = [62, 81, 45, 73, 58, 34, 90, 66, 51][i];
+              const team = teams.find(t => t.members.includes(u.id))?.name || "—";
+              const roles = ["Staff Engineer", "Sr Engineer", "Engineer", "Design Eng", "PM", "Design Lead", "SRE", "Security Eng", "Engineer"];
+              const open = [5, 8, 3, 6, 4, 2, 9, 7, 4][i];
+              const reviewing = [2, 4, 1, 3, 2, 1, 5, 3, 2][i];
+              return (
+                <button key={u.id} className="row" style={{ padding: "0 16px", width: "100%", textAlign: "left", background: "transparent", border: "none", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }} onClick={() => window.openTeammate(u)}>
+                  <span className="flex items-center gap-10" style={{ width: 240, flexShrink: 0 }}>
+                    <Avatar user={u} size="sm" />
+                    <span style={{ fontSize: 12.5 }}>{u.name}</span>
+                    <span className="mono muted-2" style={{ fontSize: 10.5 }}>@{u.handle}</span>
+                  </span>
+                  <span style={{ flex: 1, fontSize: 12 }} className="muted">{roles[i]}</span>
+                  <span style={{ width: 140, fontSize: 11.5 }}>{team}</span>
+                  <span style={{ width: 90, textAlign: "right" }} className="mono">{open}</span>
+                  <span style={{ width: 110, textAlign: "right" }} className="mono">{reviewing}</span>
+                  <span style={{ width: 80, display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 6 }}>
+                    <div style={{ width: 40, height: 3, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
+                      <div style={{ width: `${load}%`, height: "100%", background: load > 80 ? "var(--rose)" : load > 60 ? "var(--amber)" : "var(--accent)" }} />
+                    </div>
+                    <span className="mono muted-2" style={{ fontSize: 10.5, width: 22 }}>{load}</span>
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ==== INBOX (full page) ====
+const InboxView = () => {
+  const [selected, setSelected] = React.useState(0);
+  const n = INBOX[selected];
+  const user = PEOPLE.find(p => p.id === n.from);
+  return (
+    <div className="flex flex-1" style={{ minWidth: 0 }}>
+      <aside style={{ width: 400, flexShrink: 0, borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column" }}>
+        <div className="flex items-center gap-8" style={{ padding: "10px 14px", borderBottom: "1px solid var(--border)" }}>
+          <strong style={{ fontSize: 13 }}>Inbox</strong>
+          <span className="chip mono">{INBOX.filter(n => n.unread).length}</span>
+          <div style={{ flex: 1 }} />
+          <button className="btn ghost sm" onClick={() => window.openAI("Summarize my inbox notifications", "general", { inbox: INBOX })}><Icon name="sparkle" size={13} /> AI Summary</button>
+          <div className="segmented">
+            <button className="on">All</button>
+            <button onClick={() => window.toast("Mentions only")}>Mentions</button>
+            <button onClick={() => window.toast("Assigned only")}>Assigned</button>
+          </div>
+        </div>
+        <div className="scroll-y" style={{ flex: 1 }}>
+          {INBOX.map((n, i) => {
+            const u = PEOPLE.find(p => p.id === n.from);
+            return (
+              <button key={n.id} onClick={() => setSelected(i)} style={{
+                width: "100%", padding: "12px 14px", borderBottom: "1px solid var(--border-subtle)",
+                textAlign: "left", display: "flex", gap: 10, alignItems: "flex-start",
+                background: selected === i ? "var(--bg-2)" : "transparent",
+                borderLeft: selected === i ? "2px solid var(--accent)" : "2px solid transparent",
+              }}>
+                {n.unread && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", flexShrink: 0, marginTop: 6 }} />}
+                {!n.unread && <span style={{ width: 6, flexShrink: 0 }} />}
+                {u ? <Avatar user={u} size="sm" /> : <span className="avatar sm" style={{ background: "var(--bg-3)" }} />}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontSize: 12.5, lineHeight: 1.35 }}>
+                    {u && <strong>{u.name.split(" ")[0]} </strong>}
+                    <span className="muted">{n.text} </span>
+                    <span className="mono" style={{ color: "var(--accent)" }}>{n.target}</span>
+                  </div>
+                  <div className="truncate muted" style={{ fontSize: 11.5, marginTop: 2 }}>{n.snippet}</div>
+                </div>
+                <span className="mono muted-2" style={{ fontSize: 10.5, flexShrink: 0 }}>{n.time}</span>
+              </button>
+            );
+          })}
+        </div>
+      </aside>
+      <div className="flex col flex-1" style={{ minWidth: 0 }}>
+        <div className="page-header">
+          <div className="page-title">
+            <span className="mono muted-2" style={{ fontSize: 11 }}>{n.target}</span>
+            <span>{n.snippet}</span>
+          </div>
+          <div className="topbar-spacer" />
+          <button className="btn ghost sm" onClick={() => window.toast("Marked done")}><Icon name="check" size={13} /> Mark done</button>
+          <button className="btn ghost sm" onClick={() => window.toast("Snoozed 3h")}>Snooze</button>
+          <button className="btn sm" onClick={() => window.toast(`Opening ${n.target}`)}><Icon name="arrow-right" size={13} /> Open</button>
+        </div>
+        <div className="scroll-y" style={{ flex: 1, padding: "32px 48px" }}>
+          <div style={{ maxWidth: 680, margin: "0 auto" }}>
+            <div className="flex items-center gap-10" style={{ marginBottom: 20 }}>
+              {user ? <Avatar user={user} size="lg" /> : <span className="avatar lg" style={{ background: "var(--bg-3)" }} />}
+              <div>
+                <div style={{ fontSize: 14 }}>{user && <strong>{user.name}</strong>} <span className="muted">{n.text}</span> <span className="mono" style={{ color: "var(--accent)" }}>{n.target}</span></div>
+                <div className="muted-2 mono" style={{ fontSize: 11 }}>{n.time} ago</div>
+              </div>
+            </div>
+            <div style={{ padding: 18, border: "1px solid var(--border)", borderRadius: 10, background: "var(--bg-1)", fontSize: 14, lineHeight: 1.6 }}>
+              {n.snippet}
+            </div>
+            <div className="flex items-center gap-8" style={{ marginTop: 16 }}>
+              <input id="inboxreply" placeholder="Reply…" style={{ flex: 1, padding: "8px 12px", background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 8, outline: "none" }} />
+              <button className="btn primary sm" onClick={() => {
+                const el = document.getElementById("inboxreply");
+                if (!el || !el.value.trim()) { window.toast("Type a reply"); return; }
+                window.toast("Reply sent"); el.value = "";
+              }}>Send</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+Object.assign(window, { SprintsView, PRsView, TeamView, InboxView });

views-nexus.jsx ADDED Viewed

	@@ -0,0 +1,585 @@

+// Nexus — Cloud AI Platform (Meridian identity)
+const NEXUS_MODELS = [
+  { id: "nexacore-72b",   name: "NexaCore-72B",        org: "VaultMind",   orgColor: "#a78bfa", badges: ["LLM","FLAGSHIP"], grad: ["#3b1f6e","#1e0e3a"], input: 8.00,  output: 24.00, ctx: "200k", new: false },
+  { id: "deeprift-v3",    name: "DeepRift V3 Pro",      org: "DeepRift AI", orgColor: "#38bdf8", badges: ["LLM","HOT"],      grad: ["#0c2a3a","#0a1929"], input: 0.55,  output: 2.19,  ctx: "128k", new: false },
+  { id: "luminos-flash",  name: "Luminos Flash 3.1",    org: "LuminosAI",   orgColor: "#4ade80", badges: ["LLM","FAST"],     grad: ["#0f2a1a","#071a10"], input: 0.10,  output: 0.40,  ctx: "1M",   new: false },
+  { id: "opus-47",        name: "Opus 4.7",             org: "Anthropic",   orgColor: "#fb923c", badges: ["LLM"],           grad: ["#2a1500","#180d00"], input: 15.00, output: 75.00, ctx: "200k", new: false },
+  { id: "gemma-4-31b",    name: "Gemma 4 31B",          org: "Google",      orgColor: "#60a5fa", badges: ["LLM","OPEN"],     grad: ["#0e1e3a","#06111f"], input: 0.14,  output: 0.40,  ctx: "128k", new: false },
+  { id: "kimi-k3",        name: "Kimi K3",              org: "Moonshot",    orgColor: "#e879f9", badges: ["LLM","LONG CTX"], grad: ["#2a0a3a","#170620"], input: 2.00,  output: 6.00,  ctx: "1M",   new: true  },
+  { id: "gpt-55",         name: "GPT-5.5",              org: "OpenAI",      orgColor: "#86efac", badges: ["LLM"],           grad: ["#0a1f0a","#061206"], input: 2.50,  output: 10.00, ctx: "256k", new: false },
+  { id: "glm-6",          name: "GLM-6",                org: "Zhipu AI",    orgColor: "#7dd3fc", badges: ["LLM","OPEN"],     grad: ["#0a1a2a","#050e16"], input: 0.05,  output: 0.10,  ctx: "128k", new: true  },
+  { id: "arclight-7b",    name: "ArcLight-7B",          org: "VaultMind",   orgColor: "#a78bfa", badges: ["LLM","FAST"],     grad: ["#1a0f3a","#0e0820"], input: 0.10,  output: 0.20,  ctx: "32k",  new: false },
+  { id: "nova-super-12b", name: "NovaSynth Super 12B",  org: "NovaSynth",   orgColor: "#4ade80", badges: ["LLM"],           grad: ["#0c2a18","#06160c"], input: 0.15,  output: 0.35,  ctx: "128k", new: false },
+  { id: "gemini-4-flash", name: "Gemini 4 Flash Lite",  org: "Google",      orgColor: "#60a5fa", badges: ["LLM","FAST"],     grad: ["#0e1e3a","#06111f"], input: 0.07,  output: 0.15,  ctx: "1M",   new: false },
+  { id: "claude-sn-5",    name: "Claude Sonnet 5",      org: "Anthropic",   orgColor: "#fb923c", badges: ["LLM","NEW"],      grad: ["#2a1500","#180d00"], input: 3.00,  output: 15.00, ctx: "200k", new: true  },
+];
+const NEXUS_GPUS = [
+  { id: "v520",    name: "Radeon PRO V520",  tflops: 14,   mem: 16,  cpus: 8,   price: 0.28,  spot: 0.14,  wait: 2, qty: [1,4],     spotOk: true  },
+  { id: "w7500",   name: "Radeon PRO W7500", tflops: 29,   mem: 16,  cpus: 8,   price: 0.44,  spot: 0.22,  wait: 2, qty: [1,2,4,8], spotOk: true  },
+  { id: "w7900",   name: "Radeon PRO W7900", tflops: 61,   mem: 48,  cpus: 16,  price: 1.49,  spot: 0.75,  wait: 2, qty: [1,2,4,8], spotOk: true  },
+  { id: "mi210",   name: "Instinct MI210",   tflops: 181,  mem: 64,  cpus: 32,  price: 2.20,  spot: 1.10,  wait: 2, qty: [1,2,4,8], spotOk: true  },
+  { id: "mi250",   name: "Instinct MI250",   tflops: 362,  mem: 128, cpus: 32,  price: 3.50,  spot: 1.75,  wait: 2, qty: [1,2,4,8], spotOk: true  },
+  { id: "mi300a",  name: "Instinct MI300A",  tflops: 980,  mem: 128, cpus: 96,  price: 5.20,  spot: 2.60,  wait: 2, qty: [1,2,4,8], spotOk: true  },
+  { id: "mi300x",  name: "Instinct MI300X",  tflops: 1307, mem: 192, cpus: 64,  price: 6.80,  spot: null,  wait: 3, qty: [1,8],     spotOk: false },
+  { id: "mi350x",  name: "Instinct MI350X",  tflops: 2600, mem: 288, cpus: 128, price: 33.50, spot: null,  wait: 4, qty: [8],       spotOk: false },
+];
+const NEXUS_STUDIO_TYPES = [
+  { id: "ai",       label: "AI Dev",         icon: "⬡", desc: "Jupyter + VS Code" },
+  { id: "python",   label: "Python",          icon: "⬢", desc: "Pure compute" },
+  { id: "comfy",    label: "ComfyUI",         icon: "✦", desc: "Image workflows" },
+  { id: "training", label: "Training",        icon: "⬟", desc: "Distributed train" },
+  { id: "infer",    label: "Inference",       icon: "▷", desc: "vLLM / TGI serve" },
+];
+const NEXUS_STUDIOS_MOCK = [
+  { id: "st-01", name: "llama-finetune-v4",   type: "Training",   gpu: "MI250 × 4",  status: "running",  uptime: "2h 14m", cost: 24.43 },
+  { id: "st-02", name: "rag-api-prod",         type: "AI Dev",     gpu: "W7900 × 1", status: "sleeping", uptime: "18m",    cost: 0.50  },
+  { id: "st-03", name: "sdxl-comfyui-bench",   type: "ComfyUI",    gpu: "W7500 × 1", status: "sleeping", uptime: "—",      cost: 0.00  },
+];
+const NEXUS_FILTER_TABS = ["All", "VaultMind", "OpenAI", "Anthropic", "Google", "xAI"];
+const NEXUS_CODE = (m) => `pip install litai\nfrom litai import LLM\nllm = LLM(model="${m.org.toLowerCase()}/${m.id}",\n          api_key="$NEXUS_API_KEY")\nprint(llm.chat("Hello!"))`;
+// ── Org logo initials ──────────────────────────────────────────────────────
+const OrgBadge = ({ org, color, size = 28 }) => (
+  <div style={{
+    width: size, height: size, borderRadius: size * 0.3,
+    background: `color-mix(in oklch, ${color} 25%, #111)`,
+    border: `1px solid color-mix(in oklch, ${color} 40%, transparent)`,
+    display: "flex", alignItems: "center", justifyContent: "center",
+    fontSize: size * 0.38, fontWeight: 700, color,
+    fontFamily: "var(--font-mono)", flexShrink: 0,
+  }}>
+    {org[0]}
+  </div>
+);
+// ── Model Card ─────────────────────────────────────────────────────────────
+const NexusModelCard = ({ m, onSelect }) => {
+  const code = NEXUS_CODE(m);
+  return (
+    <button onClick={() => onSelect(m)}
+      style={{
+        background: `linear-gradient(145deg, ${m.grad[0]} 0%, ${m.grad[1]} 100%)`,
+        border: "1px solid rgba(255,255,255,0.07)",
+        borderRadius: 14, padding: 0, textAlign: "left", cursor: "pointer",
+        overflow: "hidden", display: "flex", flexDirection: "column",
+        transition: "border-color .15s, transform .12s",
+      }}
+      onMouseEnter={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.18)"; e.currentTarget.style.transform = "translateY(-1px)"; }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.07)"; e.currentTarget.style.transform = ""; }}
+    >
+      {/* Card header */}
+      <div style={{ padding: "14px 14px 10px", display: "flex", alignItems: "flex-start", gap: 10 }}>
+        <OrgBadge org={m.org} color={m.orgColor} size={34} />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 5, flexWrap: "wrap", marginBottom: 3 }}>
+            {m.badges.map(b => (
+              <span key={b} style={{
+                fontSize: 9, fontWeight: 700, letterSpacing: ".06em",
+                padding: "1px 5px", borderRadius: 3,
+                background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.6)",
+                fontFamily: "var(--font-mono)",
+              }}>{b}</span>
+            ))}
+            {m.new && <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: ".06em", padding: "1px 5px", borderRadius: 3, background: "oklch(0.55 0.18 145 / 0.35)", color: "oklch(0.85 0.17 145)", fontFamily: "var(--font-mono)" }}>NEW</span>}
+          </div>
+          <div style={{ fontSize: 13, fontWeight: 600, color: "#e8e8e8", lineHeight: 1.2, marginBottom: 1 }}>{m.name}</div>
+          <div style={{ fontSize: 10.5, color: "rgba(255,255,255,0.4)" }}>{m.org}</div>
+        </div>
+      </div>
+      {/* Code snippet */}
+      <div style={{
+        margin: "0 10px 10px", borderRadius: 7,
+        background: "rgba(0,0,0,0.45)", padding: "8px 10px",
+        fontFamily: "var(--font-mono)", fontSize: 9.5, color: "rgba(255,255,255,0.55)",
+        lineHeight: 1.6, whiteSpace: "pre", overflow: "hidden",
+      }}>{code}</div>
+      {/* Footer */}
+      <div style={{ padding: "8px 14px 12px", display: "flex", alignItems: "center", gap: 6, borderTop: "1px solid rgba(255,255,255,0.05)" }}>
+        <span style={{ fontSize: 10.5, color: "rgba(255,255,255,0.35)" }}>in</span>
+        <span style={{ fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-mono)" }}>${m.input.toFixed(2)}</span>
+        <span style={{ fontSize: 10, color: "rgba(255,255,255,0.25)" }}>/M</span>
+        <span style={{ fontSize: 10.5, color: "rgba(255,255,255,0.35)", marginLeft: 4 }}>out</span>
+        <span style={{ fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-mono)" }}>${m.output !== null ? m.output.toFixed(2) : "—"}</span>
+        <span style={{ flex: 1 }} />
+        <span style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", fontFamily: "var(--font-mono)" }}>{m.ctx} ctx</span>
+      </div>
+    </button>
+  );
+};
+// ── Model Detail Modal ─────────────────────────────────────────────────────
+const ModelDetailModal = ({ m, onClose }) => {
+  const [tab, setTab] = React.useState("litai");
+  const tabs = ["LitAI", "OpenAI Python", "Python", "TypeScript", "cURL"];
+  const code = {
+    LitAI: `pip install litai\nfrom litai import LLM\nllm = LLM(model="${m.org.toLowerCase()}/${m.id}",\n          api_key="sk-nexus-...")\nprint(llm.chat("Hello, world!"))`,
+    "OpenAI Python": `from openai import OpenAI\nclient = OpenAI(\n  base_url="https://api.nexus.ai/v1",\n  api_key="sk-nexus-..."\n)\nres = client.chat.completions.create(\n  model="${m.id}",\n  messages=[{"role":"user","content":"Hello"}]\n)\nprint(res.choices[0].message.content)`,
+    Python: `import requests\nres = requests.post("https://api.nexus.ai/v1/messages",\n  headers={"x-api-key": "sk-nexus-..."},\n  json={"model": "${m.id}", "messages": [{"role":"user","content":"Hi"}]}\n)\nprint(res.json()["content"][0]["text"])`,
+    TypeScript: `import Nexus from "@nexusai/sdk";\nconst client = new Nexus({ apiKey: "sk-nexus-..." });\nconst msg = await client.messages.create({\n  model: "${m.id}",\n  messages: [{ role: "user", content: "Hello!" }]\n});\nconsole.log(msg.content);`,
+    cURL: `curl -X POST https://api.nexus.ai/v1/messages \\\n  -H "x-api-key: sk-nexus-..." \\\n  -H "Content-Type: application/json" \\\n  -d '{"model":"${m.id}","messages":[{"role":"user","content":"Hi"}]}'`,
+  };
+  return (
+    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <div onClick={e => e.stopPropagation()} style={{
+        width: 540, maxWidth: "95vw", maxHeight: "80vh", overflow: "auto",
+        background: "var(--bg-1)", border: "1px solid var(--border)",
+        borderRadius: 14, display: "flex", flexDirection: "column",
+      }}>
+        <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 12 }}>
+          <OrgBadge org={m.org} color={m.orgColor} size={36} />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 15, fontWeight: 600 }}>{m.name}</div>
+            <div style={{ fontSize: 11, color: "var(--fg-3)" }}>{m.org} · {m.ctx} context</div>
+          </div>
+          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--fg-3)", cursor: "pointer", fontSize: 18, lineHeight: 1 }}>×</button>
+        </div>
+        <div style={{ padding: "12px 18px 0", display: "flex", gap: 0, borderBottom: "1px solid var(--border)" }}>
+          {tabs.map(t => (
+            <button key={t} onClick={() => setTab(t)} style={{
+              padding: "6px 12px", fontSize: 11.5, fontWeight: 500, background: "none", border: "none",
+              cursor: "pointer", color: tab === t ? "var(--fg-0)" : "var(--fg-3)",
+              borderBottom: `2px solid ${tab === t ? "var(--accent)" : "transparent"}`,
+              transition: "color .15s", whiteSpace: "nowrap",
+            }}>{t}</button>
+          ))}
+        </div>
+        <div style={{ margin: 18, background: "var(--bg-0)", borderRadius: 8, padding: "12px 14px", fontFamily: "var(--font-mono)", fontSize: 11.5, lineHeight: 1.7, color: "var(--fg-2)", whiteSpace: "pre-wrap" }}>
+          {code[tab]}
+        </div>
+        <div style={{ padding: "12px 18px 18px", display: "flex", gap: 24 }}>
+          {[["Input", `$${m.input}/M tok`], ["Output", m.output ? `$${m.output}/M tok` : "—"], ["Context", m.ctx]].map(([k, v]) => (
+            <div key={k}>
+              <div style={{ fontSize: 10, color: "var(--fg-3)", marginBottom: 2, textTransform: "uppercase", letterSpacing: ".07em" }}>{k}</div>
+              <div style={{ fontSize: 13, fontWeight: 600, fontFamily: "var(--font-mono)" }}>{v}</div>
+            </div>
+          ))}
+          <div style={{ flex: 1 }} />
+          <button className="btn primary" onClick={() => { window.toast(`API key copiada para ${m.name}`); onClose(); }}>Get API Key</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ── Inference tab ──────────────────────────────────────────────────────────
+const NexusInferenceTab = () => {
+  const [filter, setFilter] = React.useState("All");
+  const [selected, setSelected] = React.useState(null);
+  const [search, setSearch]   = React.useState("");
+  const visible = NEXUS_MODELS.filter(m => {
+    const byFilter = filter === "All" || m.org.toLowerCase().includes(filter.toLowerCase()) || (filter === "VaultMind" && m.org === "VaultMind");
+    const bySearch = !search || m.name.toLowerCase().includes(search.toLowerCase()) || m.org.toLowerCase().includes(search.toLowerCase());
+    return byFilter && bySearch;
+  });
+  return (
+    <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
+      {/* Hero */}
+      <div style={{ padding: "36px 28px 24px", background: "linear-gradient(180deg, var(--bg-0) 0%, transparent 100%)" }}>
+        <h2 style={{ margin: "0 0 6px", fontSize: 26, fontWeight: 700, letterSpacing: "-.02em" }}>Access any model. One API.</h2>
+        <p style={{ margin: "0 0 18px", fontSize: 13.5, color: "var(--fg-3)", maxWidth: 480 }}>
+          All major open and closed models — single endpoint, per-token billing. 30M free tokens on signup.
+        </p>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn primary" onClick={() => window.toast("API key generada: sk-nexus-demo-xxx")}>Get API Key</button>
+          <button className="btn" onClick={() => window.toast("Redirigiendo a docs...")}>Explore Docs</button>
+        </div>
+      </div>
+      {/* Filter + search bar */}
+      <div style={{ padding: "0 28px 16px", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+        <div style={{ display: "flex", gap: 4 }}>
+          {NEXUS_FILTER_TABS.map(f => (
+            <button key={f} onClick={() => setFilter(f)} style={{
+              padding: "5px 12px", borderRadius: 20, fontSize: 11.5, fontWeight: 500,
+              border: `1px solid ${filter === f ? "var(--accent)" : "var(--border)"}`,
+              background: filter === f ? "var(--accent-soft)" : "transparent",
+              color: filter === f ? "var(--accent)" : "var(--fg-2)",
+              cursor: "pointer", transition: "all .15s",
+            }}>{f}</button>
+          ))}
+        </div>
+        <div style={{ flex: 1 }} />
+        <input
+          value={search} onChange={e => setSearch(e.target.value)}
+          placeholder="Search models…"
+          style={{
+            background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 8,
+            color: "var(--fg-0)", padding: "5px 12px", fontSize: 12, outline: "none", width: 180,
+          }}
+        />
+        <div style={{ display: "flex", gap: 2 }}>
+          <button className="icon-btn" title="Grid"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><rect x="0" y="0" width="6" height="6" rx="1"/><rect x="8" y="0" width="6" height="6" rx="1"/><rect x="0" y="8" width="6" height="6" rx="1"/><rect x="8" y="8" width="6" height="6" rx="1"/></svg></button>
+          <button className="icon-btn" title="List"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><rect x="0" y="1" width="14" height="2" rx="1"/><rect x="0" y="6" width="14" height="2" rx="1"/><rect x="0" y="11" width="14" height="2" rx="1"/></svg></button>
+        </div>
+      </div>
+      {/* Model grid */}
+      <div className="scroll-y" style={{ flex: 1, padding: "0 28px 28px" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 12 }}>
+          {visible.map(m => <NexusModelCard key={m.id} m={m} onSelect={setSelected} />)}
+        </div>
+        {visible.length === 0 && (
+          <div style={{ padding: 60, textAlign: "center", color: "var(--fg-3)", fontSize: 13 }}>No models match "{search}"</div>
+        )}
+      </div>
+      {selected && <ModelDetailModal m={selected} onClose={() => setSelected(null)} />}
+    </div>
+  );
+};
+// ── New Studio Modal ───────────────────────────────────────────────────────
+const NewStudioModal = ({ onClose }) => {
+  const [studioType, setStudioType] = React.useState("ai");
+  const [selectedGpu, setSelectedGpu] = React.useState("l40s");
+  const [qty, setQty] = React.useState(1);
+  const [interruptible, setInterruptible] = React.useState(true);
+  const [launching, setLaunching] = React.useState(false);
+  const gpu = NEXUS_GPUS.find(g => g.id === selectedGpu);
+  const effectivePrice = interruptible && gpu.spot ? gpu.spot : gpu.price;
+  const total = (effectivePrice * qty).toFixed(2);
+  const launch = () => {
+    if (!gpu.spotOk && interruptible) { window.toast("Este GPU no soporta modo interruptible"); return; }
+    setLaunching(true);
+    setTimeout(() => {
+      setLaunching(false);
+      onClose();
+      window.toast(`Studio lanzado — ${qty}× ${gpu.name} · $${total}/hr`);
+    }, 1600);
+  };
+  return (
+    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <div onClick={e => e.stopPropagation()} style={{
+        width: 540, maxWidth: "95vw", maxHeight: "88vh", overflow: "auto",
+        background: "var(--bg-1)", border: "1px solid var(--border)",
+        borderRadius: 16, display: "flex", flexDirection: "column",
+      }}>
+        {/* Header */}
+        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div style={{ fontSize: 15, fontWeight: 600 }}>New Studio</div>
+          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--fg-3)", cursor: "pointer", fontSize: 20, lineHeight: 1 }}>×</button>
+        </div>
+        {/* Studio type */}
+        <div style={{ padding: "16px 20px 0" }}>
+          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 10 }}>Studio type</div>
+          <div style={{ display: "flex", gap: 6, overflowX: "auto", paddingBottom: 2 }}>
+            {NEXUS_STUDIO_TYPES.map(t => (
+              <button key={t.id} onClick={() => setStudioType(t.id)} style={{
+                flexShrink: 0, padding: "10px 14px", borderRadius: 10, minWidth: 96,
+                border: `1.5px solid ${studioType === t.id ? "var(--accent)" : "var(--border)"}`,
+                background: studioType === t.id ? "var(--accent-soft)" : "var(--bg-0)",
+                cursor: "pointer", textAlign: "center", transition: "border-color .15s",
+              }}>
+                <div style={{ fontSize: 18, marginBottom: 5 }}>{t.icon}</div>
+                <div style={{ fontSize: 11.5, fontWeight: 600, color: studioType === t.id ? "var(--accent)" : "var(--fg-1)" }}>{t.label}</div>
+                <div style={{ fontSize: 9.5, color: "var(--fg-3)", marginTop: 2 }}>{t.desc}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+        {/* Teamspace */}
+        <div style={{ padding: "14px 20px 0" }}>
+          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 8 }}>Teamspace</div>
+          <select style={{
+            width: "100%", background: "var(--bg-0)", border: "1px solid var(--border)",
+            borderRadius: 7, color: "var(--fg-1)", padding: "7px 10px", fontSize: 12.5, outline: "none",
+          }}>
+            <option>helix · enterprise</option>
+            <option>personal</option>
+          </select>
+        </div>
+        {/* GPU table */}
+        <div style={{ padding: "14px 20px 0" }}>
+          <div style={{ display: "flex", alignItems: "center", marginBottom: 8, gap: 8 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", flex: 1 }}>Machine</div>
+            <span style={{ fontSize: 11, color: "var(--fg-2)" }}>Interruptible</span>
+            <button onClick={() => setInterruptible(v => !v)} style={{
+              width: 32, height: 18, borderRadius: 9, border: "none", cursor: "pointer",
+              background: interruptible ? "var(--accent)" : "var(--bg-3)", position: "relative", transition: "background .2s",
+            }}>
+              <span style={{ position: "absolute", top: 2, left: interruptible ? 16 : 2, width: 14, height: 14, borderRadius: "50%", background: "#fff", transition: "left .2s", display: "block" }} />
+            </button>
+          </div>
+          {/* Column headers */}
+          <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 80px 80px 60px 110px 80px", padding: "5px 10px", fontSize: 9.5, color: "var(--fg-3)", fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", borderBottom: "1px solid var(--border-subtle)" }}>
+            <div>Quantity</div><div>Model</div><div>TFLOPs</div><div>Mem (GB)</div><div>CPUs</div><div>Cost/hr</div><div>Wait</div>
+          </div>
+          <div style={{ maxHeight: 260, overflowY: "auto" }}>
+            {NEXUS_GPUS.map(g => {
+              const active = selectedGpu === g.id;
+              const effP = interruptible && g.spot ? g.spot : g.price;
+              const availQty = g.qty;
+              return (
+                <div key={g.id} onClick={() => { setSelectedGpu(g.id); setQty(availQty[0]); }} style={{
+                  display: "grid", gridTemplateColumns: "80px 1fr 80px 80px 60px 110px 80px",
+                  padding: "7px 10px", cursor: "pointer", alignItems: "center",
+                  background: active ? "var(--accent-soft)" : "transparent",
+                  borderLeft: `2px solid ${active ? "var(--accent)" : "transparent"}`,
+                  borderBottom: "1px solid var(--border-subtle)", transition: "background .1s",
+                }}>
+                  {/* Qty buttons */}
+                  <div style={{ display: "flex", gap: 3 }}>
+                    {availQty.map(q => (
+                      <button key={q} onClick={e => { e.stopPropagation(); setSelectedGpu(g.id); setQty(q); }} style={{
+                        width: 20, height: 20, borderRadius: 4, border: `1px solid ${active && qty === q ? "var(--accent)" : "var(--border)"}`,
+                        background: active && qty === q ? "var(--accent)" : "var(--bg-2)",
+                        color: active && qty === q ? "var(--accent-fg)" : "var(--fg-2)",
+                        cursor: "pointer", fontSize: 10, fontWeight: 600, padding: 0,
+                      }}>{q}</button>
+                    ))}
+                  </div>
+                  <div style={{ fontSize: 12.5, fontWeight: active ? 600 : 400, color: active ? "var(--fg-0)" : "var(--fg-1)" }}>{g.name}</div>
+                  <div style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--fg-2)" }}>{g.tflops}</div>
+                  <div style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--fg-2)" }}>{g.mem}</div>
+                  <div style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--fg-2)" }}>{g.cpus}</div>
+                  <div style={{ fontSize: 11.5 }}>
+                    {interruptible && g.spot
+                      ? <><span style={{ textDecoration: "line-through", color: "var(--fg-3)", marginRight: 4 }}>${g.price.toFixed(2)}</span><span style={{ color: "oklch(0.78 0.14 145)", fontWeight: 600 }}>${g.spot.toFixed(2)}</span></>
+                      : <span style={{ fontWeight: 600 }}>${g.price.toFixed(2)}</span>
+                    }
+                    {!g.spotOk && interruptible && <span style={{ fontSize: 9.5, color: "var(--amber)", marginLeft: 4 }}>⚠</span>}
+                  </div>
+                  <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                    <span style={{ fontSize: 11, color: "var(--fg-3)" }}>{g.wait} min</span>
+                    <span style={{ fontSize: 10, color: "var(--fg-3)" }}>▾</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {interruptible && <div style={{ fontSize: 10.5, color: "var(--amber)", padding: "8px 0 0", display: "flex", alignItems: "center", gap: 5 }}>⚠ Interruptible machines are 50–80% cheaper but may experience data loss</div>}
+        </div>
+        {/* Footer */}
+        <div style={{ padding: "16px 20px", borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 12, marginTop: 12 }}>
+          <div>
+            <div style={{ fontSize: 10, color: "var(--fg-3)", marginBottom: 2 }}>Estimated cost</div>
+            <div style={{ fontSize: 15, fontWeight: 700, fontFamily: "var(--font-mono)" }}>${total}<span style={{ fontSize: 11, fontWeight: 400, color: "var(--fg-3)" }}>/hr</span></div>
+          </div>
+          <div style={{ flex: 1 }} />
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn primary" onClick={launch} disabled={launching}>
+            {launching ? "Launching…" : "Confirm"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ── Studios tab ────────────────────────────────────────────────────────────
+const NexusStudiosTab = () => {
+  const [showNew, setShowNew] = React.useState(false);
+  const statusColor = { running: "var(--status-progress)", sleeping: "var(--fg-3)", stopped: "var(--rose)" };
+  return (
+    <div style={{ padding: "28px", flex: 1, display: "flex", flexDirection: "column", gap: 20 }}>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div>
+          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Studios</h3>
+          <p style={{ margin: "3px 0 0", fontSize: 12, color: "var(--fg-3)" }}>Cloud development environments with GPU access</p>
+        </div>
+        <div style={{ flex: 1 }} />
+        <button className="btn primary" onClick={() => setShowNew(true)}>+ New Studio</button>
+      </div>
+      {/* Active studios */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {NEXUS_STUDIOS_MOCK.map(s => (
+          <div key={s.id} className="card" style={{ padding: "14px 16px", display: "flex", alignItems: "center", gap: 14 }}>
+            <div style={{ width: 8, height: 8, borderRadius: "50%", background: statusColor[s.status], flexShrink: 0 }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</div>
+              <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 2 }}>{s.type} · {s.gpu}</div>
+            </div>
+            <div style={{ textAlign: "right", fontSize: 11, color: "var(--fg-3)" }}>
+              <div className="mono">{s.uptime}</div>
+              <div style={{ color: s.cost > 0 ? "var(--fg-1)" : "var(--fg-3)" }} className="mono">${s.cost.toFixed(2)}</div>
+            </div>
+            <div style={{ display: "flex", gap: 6 }}>
+              <button className="btn ghost sm" onClick={() => window.toast(`Abriendo ${s.name}…`)}>Open</button>
+              <button className="btn ghost sm" onClick={() => window.toast(`${s.name} detenido`)} style={{ color: "var(--rose)" }}>Stop</button>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* GPU pricing table */}
+      <div className="card" style={{ overflow: "hidden" }}>
+        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 8 }}>
+          <strong style={{ fontSize: 13 }}>Available GPUs</strong>
+          <span className="chip" style={{ color: "oklch(0.78 0.14 145)" }}>Interruptible prices shown</span>
+        </div>
+        <div style={{ overflowX: "auto" }}>
+          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
+            <thead>
+              <tr style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+                {["GPU","TFLOPs","VRAM","CPUs","On-demand","Interruptible","Availability"].map(h => (
+                  <th key={h} style={{ padding: "7px 14px", textAlign: "left", fontSize: 10, color: "var(--fg-3)", fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", whiteSpace: "nowrap" }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {NEXUS_GPUS.map(g => (
+                <tr key={g.id} style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+                  <td style={{ padding: "9px 14px", fontWeight: 600 }}>{g.name}</td>
+                  <td style={{ padding: "9px 14px", fontFamily: "var(--font-mono)" }}>{g.tflops}</td>
+                  <td style={{ padding: "9px 14px", fontFamily: "var(--font-mono)" }}>{g.mem} GB</td>
+                  <td style={{ padding: "9px 14px", fontFamily: "var(--font-mono)" }}>{g.cpus}</td>
+                  <td style={{ padding: "9px 14px", fontFamily: "var(--font-mono)", fontWeight: 600 }}>${g.price.toFixed(2)}/hr</td>
+                  <td style={{ padding: "9px 14px" }}>
+                    {g.spot ? <span style={{ color: "oklch(0.78 0.14 145)", fontFamily: "var(--font-mono)", fontWeight: 600 }}>${g.spot.toFixed(2)}/hr</span>
+                             : <span style={{ color: "var(--fg-3)", fontSize: 11 }}>N/A</span>}
+                  </td>
+                  <td style={{ padding: "9px 14px" }}>
+                    {g.spotOk
+                      ? <span style={{ color: "oklch(0.78 0.14 145)", fontSize: 11 }}>● Available</span>
+                      : <span style={{ color: "var(--amber)", fontSize: 11 }}>⚠ Limited</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {showNew && <NewStudioModal onClose={() => setShowNew(false)} />}
+    </div>
+  );
+};
+// ── Platform tab ───────────────────────────────────────────────────────────
+const NexusPlatformTab = () => {
+  const [keyVisible, setKeyVisible] = React.useState(false);
+  const apiKey = "sk-nexus-4f8a2b...c93e";
+  const usage = [
+    { model: "NexaCore-72B", tokens: "1.24M", cost: 9.92 },
+    { model: "ArcLight-7B",  tokens: "4.80M", cost: 0.48 },
+    { model: "Luminos Flash",tokens: "2.10M", cost: 0.21 },
+  ];
+  return (
+    <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 20 }}>
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+        {/* API Keys */}
+        <div className="card" style={{ padding: 18 }}>
+          <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>API Keys</strong>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", background: "var(--bg-0)", borderRadius: 7, border: "1px solid var(--border)" }}>
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, flex: 1, color: "var(--fg-2)" }}>
+              {keyVisible ? "sk-nexus-4f8a2b-demo-xxxc93e" : apiKey}
+            </span>
+            <button className="btn ghost sm" onClick={() => setKeyVisible(v => !v)}>{keyVisible ? "Hide" : "Show"}</button>
+            <button className="btn ghost sm" onClick={() => window.toast("Key copiada")}>Copy</button>
+          </div>
+          <button className="btn sm" style={{ marginTop: 10, width: "100%" }} onClick={() => window.toast("Nueva API key generada")}>+ Generate new key</button>
+        </div>
+        {/* Billing */}
+        <div className="card" style={{ padding: 18 }}>
+          <strong style={{ fontSize: 13, display: "block", marginBottom: 14 }}>Billing — May 2026</strong>
+          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 10 }}>
+            <span style={{ fontSize: 28, fontWeight: 700, fontFamily: "var(--font-mono)" }}>$10.61</span>
+            <span style={{ fontSize: 12, color: "var(--fg-3)" }}>/ $50.00 limit</span>
+          </div>
+          <div style={{ height: 6, background: "var(--bg-3)", borderRadius: 3, overflow: "hidden", marginBottom: 10 }}>
+            <div style={{ width: "21%", height: "100%", background: "var(--accent)", borderRadius: 3 }} />
+          </div>
+          <div style={{ fontSize: 11, color: "var(--fg-3)" }}>30M free tokens remaining · Renews Jun 1</div>
+        </div>
+      </div>
+      {/* Usage table */}
+      <div className="card" style={{ overflow: "hidden" }}>
+        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
+          <strong style={{ fontSize: 13 }}>Usage this month</strong>
+        </div>
+        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
+          <thead>
+            <tr style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+              {["Model","Tokens","Cost"].map(h => (
+                <th key={h} style={{ padding: "7px 16px", textAlign: "left", fontSize: 10, color: "var(--fg-3)", fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase" }}>{h}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {usage.map(u => (
+              <tr key={u.model} style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+                <td style={{ padding: "9px 16px", fontWeight: 500 }}>{u.model}</td>
+                <td style={{ padding: "9px 16px", fontFamily: "var(--font-mono)" }}>{u.tokens}</td>
+                <td style={{ padding: "9px 16px", fontFamily: "var(--font-mono)", fontWeight: 600 }}>${u.cost.toFixed(2)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+// ── Main Nexus view ────────────────────────────────────────────────────────
+const NexusView = () => {
+  const [tab, setTab] = React.useState("inference");
+  const tabs = [
+    { id: "inference", label: "Inference" },
+    { id: "studios",   label: "Studios"   },
+    { id: "platform",  label: "Platform"  },
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0, overflow: "hidden" }}>
+      {/* Internal top nav */}
+      <div style={{
+        height: 44, display: "flex", alignItems: "center", gap: 2,
+        padding: "0 28px", borderBottom: "1px solid var(--border)",
+        background: "var(--bg-1)", flexShrink: 0,
+      }}>
+        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)", marginRight: 20, letterSpacing: "-.01em" }}>Nexus</div>
+        {tabs.map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)} style={{
+            padding: "6px 14px", fontSize: 13, fontWeight: 500, background: "none", border: "none",
+            cursor: "pointer", borderRadius: 6,
+            color: tab === t.id ? "var(--fg-0)" : "var(--fg-3)",
+            background: tab === t.id ? "var(--bg-2)" : "transparent",
+            transition: "color .15s, background .15s",
+          }}>{t.label}</button>
+        ))}
+        <div style={{ flex: 1 }} />
+        <button className="btn ghost sm" onClick={() => window.openAI("What are the best models available in Nexus for fast inference?", "compute", { models: NEXUS_MODELS })}>
+          <Icon name="sparkle" size={13} /> AI Summary
+        </button>
+      </div>
+      {/* Tab content */}
+      <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
+        {tab === "inference" && <NexusInferenceTab />}
+        {tab === "studios"   && <div className="scroll-y" style={{ flex: 1 }}><NexusStudiosTab /></div>}
+        {tab === "platform"  && <div className="scroll-y" style={{ flex: 1 }}><NexusPlatformTab /></div>}
+      </div>
+    </div>
+  );
+};
+window.NexusView = NexusView;

views-settings.jsx ADDED Viewed

	@@ -0,0 +1,543 @@

+// Settings view — workspace configuration + appearance (tweaks integrated)
+const SettingsView = ({ settings, setSettings }) => {
+  const [section, setSection] = React.useState("appearance");
+  const sections = [
+    { group: "Workspace", items: [
+      { id: "general", label: "General", icon: "settings" },
+      { id: "members", label: "Members & roles", icon: "team" },
+      { id: "billing", label: "Billing", icon: "database" },
+      { id: "security", label: "Security & SSO", icon: "lock" },
+    ]},
+    { group: "Preferences", items: [
+      { id: "appearance", label: "Appearance", icon: "sparkle" },
+      { id: "notifications", label: "Notifications", icon: "bell" },
+      { id: "keyboard", label: "Keyboard shortcuts", icon: "hash" },
+      { id: "account", label: "My account", icon: "at" },
+    ]},
+    { group: "Integrations", items: [
+      { id: "integrations", label: "Connected apps", icon: "link" },
+      { id: "api", label: "API & webhooks", icon: "globe" },
+      { id: "ai", label: "AI & Integrations", icon: "sparkle" },
+      { id: "import", label: "Import / export", icon: "download" },
+    ]},
+  ];
+  return (
+    <div className="flex flex-1" style={{ minWidth: 0 }}>
+      <aside style={{ width: 240, flexShrink: 0, borderRight: "1px solid var(--border)", background: "var(--bg-1)", overflow: "auto", padding: "14px 8px" }}>
+        <div style={{ padding: "4px 10px 10px", fontSize: 12.5, fontWeight: 600 }}>Settings</div>
+        {sections.map(g => (
+          <div key={g.group} className="sb-section" style={{ padding: "4px 0" }}>
+            <div className="sb-label" style={{ padding: "6px 10px" }}>{g.group}</div>
+            {g.items.map(it => (
+              <button key={it.id} className={`sb-item ${section === it.id ? "active" : ""}`} onClick={() => setSection(it.id)}>
+                <span className="sb-ind" />
+                <Icon name={it.icon} className="sb-icon" />
+                <span>{it.label}</span>
+              </button>
+            ))}
+          </div>
+        ))}
+      </aside>
+      <div className="flex col flex-1" style={{ minWidth: 0 }}>
+        <div className="page-header">
+          <div className="page-title">
+            <span className="eyebrow">SETTINGS</span>
+            <Icon name="chevron-right" size={12} style={{ color: "var(--fg-3)" }} />
+            <span style={{ textTransform: "capitalize" }}>{sections.flatMap(g => g.items).find(i => i.id === section)?.label}</span>
+          </div>
+        </div>
+        <div className="scroll-y" style={{ flex: 1, padding: "32px 48px 64px" }}>
+          <div style={{ maxWidth: 760, margin: "0 auto" }}>
+            {section === "appearance" && <AppearanceSection settings={settings} setSettings={setSettings} />}
+            {section === "general" && <GeneralSection />}
+            {section === "notifications" && <NotificationsSection />}
+            {section === "keyboard" && <KeyboardSection />}
+            {section === "members" && <MembersPlaceholder />}
+            {section === "security" && <PlaceholderSection title="Security & SSO" desc="SAML, SCIM, audit logs, IP allowlist." />}
+            {section === "billing" && <PlaceholderSection title="Billing" desc="Plan, seats, invoices, tax information." />}
+            {section === "account" && <PlaceholderSection title="My account" desc="Profile, email, password, two-factor." />}
+            {section === "integrations" && <IntegrationsSection />}
+            {section === "api" && <PlaceholderSection title="API & webhooks" desc="Personal access tokens, OAuth apps, webhook endpoints." />}
+            {section === "ai" && <AISection />}
+            {section === "import" && <PlaceholderSection title="Import / export" desc="Migrate from Jira, Linear, GitHub Issues, Asana. Bulk export as CSV or JSON." />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+const SetRow = ({ title, desc, children }) => (
+  <div className="flex" style={{ padding: "18px 0", borderTop: "1px solid var(--border-subtle)", gap: 24, alignItems: "flex-start" }}>
+    <div style={{ flex: 1, minWidth: 0 }}>
+      <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--fg-0)" }}>{title}</div>
+      {desc && <div className="muted" style={{ fontSize: 12, marginTop: 2, lineHeight: 1.5 }}>{desc}</div>}
+    </div>
+    <div style={{ flexShrink: 0 }}>{children}</div>
+  </div>
+);
+const SetGroup = ({ title, desc, children }) => (
+  <section style={{ marginBottom: 40 }}>
+    <h2 className="editorial" style={{ fontSize: 22, fontWeight: 400, letterSpacing: "-0.02em", margin: "0 0 4px" }}>{title}</h2>
+    {desc && <p className="muted" style={{ fontSize: 13, margin: "0 0 12px", maxWidth: 620 }}>{desc}</p>}
+    <div>{children}</div>
+  </section>
+);
+const AppearanceSection = ({ settings, setSettings }) => {
+  const accents = [
+    { id: "lime", name: "Lime", value: "oklch(0.85 0.17 145)" },
+    { id: "cyan", name: "Cyan", value: "oklch(0.78 0.13 220)" },
+    { id: "violet", name: "Violet", value: "oklch(0.72 0.18 300)" },
+    { id: "amber", name: "Amber", value: "oklch(0.80 0.14 75)" },
+    { id: "rose", name: "Rose", value: "oklch(0.72 0.17 20)" },
+  ];
+  const themes = [
+    { id: "dark",  label: "Dark",  bg: "oklch(0.18 0.008 250)", fg: "oklch(0.97 0.005 250)" },
+    { id: "light", label: "Light", bg: "oklch(0.985 0.003 250)", fg: "oklch(0.18 0.015 250)" },
+  ];
+  return (
+    <div>
+      <SetGroup title="Appearance" desc="Customize how Meridian looks for you. Changes apply across all your devices signed in as @amara.">
+        <SetRow title="Theme" desc="Dark reduces eye strain in long sessions. Light is better in bright environments.">
+          <div style={{ display: "flex", gap: 8 }}>
+            {themes.map(t => (
+              <button key={t.id}
+                onClick={() => setSettings(s => ({ ...s, theme: t.id }))}
+                style={{
+                  width: 88, padding: 6, borderRadius: 8,
+                  border: `2px solid ${settings.theme === t.id ? "var(--accent)" : "var(--border)"}`,
+                  background: "var(--bg-1)", textAlign: "left",
+                  transition: "border-color 140ms"
+                }}>
+                <div style={{ height: 44, borderRadius: 4, background: t.bg, display: "flex", alignItems: "center", padding: "0 6px", gap: 4, marginBottom: 4, border: "1px solid var(--border-subtle)" }}>
+                  <span style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--accent)" }} />
+                  <span style={{ flex: 1, height: 2, background: `color-mix(in oklch, ${t.fg} 50%, transparent)`, borderRadius: 1 }} />
+                </div>
+                <div style={{ fontSize: 11.5, color: "var(--fg-1)" }}>{t.label}</div>
+              </button>
+            ))}
+          </div>
+        </SetRow>
+        <SetRow title="Accent color" desc="Used for active states, primary actions, the aurora backdrop, and data highlights.">
+          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", maxWidth: 280 }}>
+            {accents.map(a => (
+              <button key={a.id}
+                onClick={() => setSettings(s => ({ ...s, accent: a.id }))}
+                title={a.name}
+                style={{
+                  width: 36, height: 36, borderRadius: "50%",
+                  background: a.value,
+                  border: `2px solid ${settings.accent === a.id ? "var(--fg-0)" : "transparent"}`,
+                  boxShadow: `0 0 0 1px var(--border-strong), 0 0 14px -2px ${a.value}`,
+                  cursor: "pointer", transition: "transform 140ms, border-color 140ms",
+                  transform: settings.accent === a.id ? "scale(1.05)" : "scale(1)"
+                }} />
+            ))}
+          </div>
+        </SetRow>
+        <SetRow title="Density" desc="Controls row heights and spacing throughout lists and tables.">
+          <div className="segmented">
+            {["compact","default","relaxed"].map(d => (
+              <button key={d} className={settings.density === d ? "on" : ""} onClick={() => setSettings(s => ({ ...s, density: d }))} style={{ textTransform: "capitalize" }}>{d}</button>
+            ))}
+          </div>
+        </SetRow>
+        <SetRow title="Sidebar" desc="Collapsed shows icons only, maximizing canvas room.">
+          <div className="segmented">
+            {["expanded","collapsed"].map(d => (
+              <button key={d} className={settings.sidebar === d ? "on" : ""} onClick={() => setSettings(s => ({ ...s, sidebar: d }))} style={{ textTransform: "capitalize" }}>{d}</button>
+            ))}
+          </div>
+        </SetRow>
+        <SetRow title="Kanban card" desc="Detailed shows labels, branch, comments, dates. Minimal shows title and priority only.">
+          <div className="segmented">
+            {["detailed","minimal"].map(d => (
+              <button key={d} className={settings.cardStyle === d ? "on" : ""} onClick={() => setSettings(s => ({ ...s, cardStyle: d }))} style={{ textTransform: "capitalize" }}>{d}</button>
+            ))}
+          </div>
+        </SetRow>
+        <SetRow title="Reduce motion" desc="Disables the aurora backdrop animation, gradient shimmer, and page transitions.">
+          <Toggle on={settings.reduceMotion} onChange={v => setSettings(s => ({ ...s, reduceMotion: v }))} />
+        </SetRow>
+      </SetGroup>
+      <SetGroup title="Preview">
+        <div className="card" style={{ padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+          <div>
+            <div className="muted-2 mono" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Primary action</div>
+            <button className="btn primary" onClick={() => window.openNewIssue()}>
+              <Icon name="plus" size={13} /> Create issue
+            </button>
+          </div>
+          <div>
+            <div className="muted-2 mono" style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Status set</div>
+            <div className="flex items-center gap-12" style={{ flexWrap: "wrap" }}>
+              <span className="status todo"><span className="s-dot" /> Todo</span>
+              <span className="status progress"><span className="s-dot" /> Doing</span>
+              <span className="status review"><span className="s-dot" /> Review</span>
+              <span className="status done"><span className="s-dot" /> Done</span>
+            </div>
+          </div>
+        </div>
+      </SetGroup>
+    </div>
+  );
+};
+const Toggle = ({ on, onChange }) => (
+  <button onClick={() => onChange(!on)} style={{
+    width: 36, height: 20, borderRadius: 999,
+    background: on ? "var(--accent)" : "var(--bg-3)",
+    border: "1px solid var(--border)",
+    position: "relative", transition: "background 160ms",
+    cursor: "pointer"
+  }}>
+    <span style={{
+      position: "absolute", top: 1, left: on ? 17 : 1,
+      width: 16, height: 16, borderRadius: "50%",
+      background: on ? "var(--accent-fg)" : "var(--fg-1)",
+      transition: "left 160ms",
+      boxShadow: "0 1px 2px oklch(0 0 0 / 0.25)"
+    }} />
+  </button>
+);
+const GeneralSection = () => (
+  <div>
+    <SetGroup title="Workspace" desc="Shared across everyone in Helix Enterprise.">
+      <SetRow title="Workspace name">
+        <input defaultValue="Helix Enterprise" style={inputStyle} />
+      </SetRow>
+      <SetRow title="URL slug" desc="meridian.app/helix">
+        <input defaultValue="helix" style={inputStyle} />
+      </SetRow>
+      <SetRow title="Default project" desc="New issues are created in this project when none is specified.">
+        <select defaultValue="aurora" style={inputStyle}>
+          {PROJECTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+      </SetRow>
+      <SetRow title="Start of week" desc="Used in roadmap, sprints, and calendars.">
+        <div className="segmented">
+          <button className="on">Monday</button>
+          <button>Sunday</button>
+        </div>
+      </SetRow>
+      <SetRow title="Time zone">
+        <select defaultValue="UTC+0" style={inputStyle}>
+          <option>UTC+0 — London</option>
+          <option>UTC+1 — Madrid</option>
+          <option>UTC-5 — New York</option>
+          <option>UTC-8 — San Francisco</option>
+        </select>
+      </SetRow>
+    </SetGroup>
+    <SetGroup title="Danger zone">
+      <SetRow title="Archive workspace" desc="Prevents writes. Data remains readable for 90 days.">
+        <button className="btn" onClick={() => window.toast("Workspace archived (demo)")}>Archive</button>
+      </SetRow>
+      <SetRow title="Delete workspace" desc="Irreversible. Removes all issues, docs, and integrations.">
+        <button className="btn" style={{ color: "var(--rose)", borderColor: "color-mix(in oklch, var(--rose) 40%, var(--border))" }} onClick={() => window.toast("Type ‘DELETE’ to confirm (demo)")}>Delete…</button>
+      </SetRow>
+    </SetGroup>
+  </div>
+);
+const NotificationsSection = () => {
+  const [prefs, setPrefs] = React.useState({
+    mentions: { inbox: true, email: true, push: true },
+    assigned: { inbox: true, email: true, push: false },
+    reviewRequested: { inbox: true, email: false, push: true },
+    statusChange: { inbox: true, email: false, push: false },
+    newIssue: { inbox: false, email: false, push: false },
+    docUpdate: { inbox: true, email: false, push: false },
+  });
+  const types = [
+    { id: "mentions", label: "@mentions", desc: "Someone mentions you in a comment, doc, or review." },
+    { id: "assigned", label: "Assigned to you", desc: "An issue or review is assigned to you." },
+    { id: "reviewRequested", label: "Review requested", desc: "A pull request needs your review." },
+    { id: "statusChange", label: "Status changed", desc: "Your issues move across the board." },
+    { id: "newIssue", label: "New issues in projects you watch", desc: "Someone opens an issue in a subscribed project." },
+    { id: "docUpdate", label: "Doc updates", desc: "A document you've subscribed to is edited." },
+  ];
+  const channels = [
+    { id: "inbox", label: "Inbox" },
+    { id: "email", label: "Email" },
+    { id: "push", label: "Push" },
+  ];
+  return (
+    <SetGroup title="Notifications" desc="Route each event to the channels where you want to hear about it.">
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 70px 70px 70px", gap: 0, borderTop: "1px solid var(--border-subtle)" }}>
+        <div />
+        {channels.map(c => <div key={c.id} className="mono muted-2" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.08em", padding: "12px 0", textAlign: "center" }}>{c.label}</div>)}
+        {types.map(t => (
+          <React.Fragment key={t.id}>
+            <div style={{ padding: "14px 12px 14px 0", borderTop: "1px solid var(--border-subtle)" }}>
+              <div style={{ fontSize: 13, fontWeight: 500 }}>{t.label}</div>
+              <div className="muted" style={{ fontSize: 11.5 }}>{t.desc}</div>
+            </div>
+            {channels.map(c => (
+              <div key={c.id} style={{ padding: "14px 0", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "center", alignItems: "center" }}>
+                <Toggle on={prefs[t.id][c.id]} onChange={v => setPrefs(p => ({ ...p, [t.id]: { ...p[t.id], [c.id]: v } }))} />
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </div>
+    </SetGroup>
+  );
+};
+const KeyboardSection = () => {
+  const groups = [
+    { title: "Navigation", items: [
+      ["Open command palette", "⌘ K"],
+      ["Go to Home", "G H"],
+      ["Go to Inbox", "G I"],
+      ["Go to Issues", "G S"],
+      ["Go to Docs", "G D"],
+      ["Go to Roadmap", "G R"],
+      ["Go to Pull requests", "G P"],
+    ]},
+    { title: "Actions", items: [
+      ["Create issue", "C"],
+      ["Create document", "⌘ ⇧ D"],
+      ["Assign to me", "I"],
+      ["Change priority", "⇧ P"],
+      ["Change status", "⇧ S"],
+      ["Add label", "L"],
+      ["Add to sprint", "⇧ M"],
+    ]},
+    { title: "Editing", items: [
+      ["Submit comment", "⌘ ↵"],
+      ["Mention user", "@"],
+      ["Insert link", "⌘ K"],
+      ["Toggle bold", "⌘ B"],
+      ["Insert code block", "⌘ ⇧ C"],
+    ]},
+  ];
+  return (
+    <SetGroup title="Keyboard shortcuts" desc="Meridian is keyboard-first. Press ? anywhere for this list.">
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
+        {groups.map(g => (
+          <div key={g.title}>
+            <div className="mono muted-2" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>{g.title}</div>
+            <div>
+              {g.items.map(([label, kbd]) => (
+                <div key={label} className="flex items-center justify-between" style={{ padding: "8px 0", borderTop: "1px solid var(--border-subtle)", fontSize: 12.5 }}>
+                  <span>{label}</span>
+                  <span className="kbd-hint mono">{kbd}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </SetGroup>
+  );
+};
+const MembersPlaceholder = () => (
+  <SetGroup title="Members & roles" desc="9 members in Helix Enterprise. Invite new teammates or adjust permissions.">
+    <div className="card" style={{ overflow: "hidden" }}>
+      {PEOPLE.slice(0, 6).map((u, i) => (
+        <div key={u.id} className="flex items-center" style={{ padding: "10px 14px", borderTop: i > 0 ? "1px solid var(--border-subtle)" : "none", gap: 10 }}>
+          <Avatar user={u} size="sm" />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 12.5 }}>{u.name}</div>
+            <div className="muted mono" style={{ fontSize: 10.5 }}>@{u.handle} · {u.handle}@helix.com</div>
+          </div>
+          <select defaultValue={i === 0 ? "admin" : i < 3 ? "member" : "guest"} style={{ ...inputStyle, minWidth: 110 }}>
+            <option value="admin">Admin</option>
+            <option value="member">Member</option>
+            <option value="guest">Guest</option>
+          </select>
+          <button className="btn ghost sm" onClick={() => window.openPicker({ title: "Member", options: [
+            { value: "change-role", label: "Change role" },
+            { value: "transfer", label: "Transfer admin" },
+            { value: "remove", label: "Remove from workspace" },
+          ], onChoose: (o) => window.toast(o.label) })}><Icon name="more" size={13} /></button>
+        </div>
+      ))}
+    </div>
+  </SetGroup>
+);
+const IntegrationsSection = () => {
+  const apps = [
+    { name: "GitHub", desc: "Link PRs, sync commits, auto-close issues.", connected: true, kind: "git" },
+    { name: "Slack", desc: "Notifications in channels, slash-commands.", connected: true, kind: "message" },
+    { name: "Figma", desc: "Embed frames in issues and docs.", connected: true, kind: "component" },
+    { name: "Jira", desc: "Two-way sync for enterprise migration.", connected: true, kind: "issues" },
+    { name: "Sentry", desc: "Auto-create issues from new errors.", connected: true, kind: "flag" },
+    { name: "GitLab", desc: "Sync merge requests and pipelines.", connected: true, kind: "git" },
+    { name: "Datadog", desc: "Attach monitor alerts to incidents.", connected: true, kind: "chart" },
+    { name: "Zoom", desc: "Create meeting links in issues automatically.", connected: true, kind: "video" },
+    { name: "Linear", desc: "One-way migration of issues.", connected: false, kind: "issues" },
+    { name: "Notion", desc: "Import pages as Meridian docs.", connected: false, kind: "docs" },
+  ];
+  return (
+    <SetGroup title="Connected apps" desc="Meridian plays well with the rest of your stack.">
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+        {apps.map(a => (
+          <div key={a.name} className="card" style={{ padding: 14, display: "flex", gap: 12, alignItems: "flex-start" }}>
+            <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-2)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--fg-1)", flexShrink: 0 }}>
+              <Icon name={a.kind} size={18} />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="flex items-center justify-between" style={{ marginBottom: 2 }}>
+                <strong style={{ fontSize: 13 }}>{a.name}</strong>
+                {a.connected && <span className="chip" style={{ color: "var(--status-done)" }}><span className="d" style={{ background: "var(--status-done)" }} /> connected</span>}
+              </div>
+              <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.4 }}>{a.desc}</div>
+              <div style={{ marginTop: 10 }}>
+                <button className={`btn sm ${a.connected ? "" : "primary"}`}>{a.connected ? "Configure" : "Connect"}</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </SetGroup>
+  );
+};
+const PlaceholderSection = ({ title, desc }) => (
+  <SetGroup title={title} desc={desc}>
+    <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--fg-3)" }}>
+      <Icon name="settings" size={28} style={{ opacity: 0.5, marginBottom: 8 }} />
+      <div style={{ fontSize: 12.5 }}>Section mock — not wired up in this prototype.</div>
+    </div>
+  </SetGroup>
+);
+const AISection = () => {
+  const [url, setUrl] = React.useState(() => (window.getAmdUrl ? window.getAmdUrl() : '') || '');
+  const [saved, setSaved] = React.useState(false);
+  const [testing, setTesting] = React.useState(false);
+  const [testResult, setTestResult] = React.useState(null); // null | 'ok' | string(error)
+  const save = () => {
+    if (window.setAmdUrl) window.setAmdUrl(url.trim());
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+  const test = async () => {
+    const u = url.trim();
+    if (!u) { window.toast('Ingresá la URL del endpoint primero'); return; }
+    // Auto-save before testing
+    if (window.setAmdUrl) window.setAmdUrl(u);
+    setTesting(true); setTestResult(null);
+    try {
+      const res = await fetch(u, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer dummy-key' },
+        body: JSON.stringify({
+          model: 'llama-3.3-70b-versatile', max_tokens: 5,
+          messages: [{ role: 'user', content: 'Reply: ok' }]
+        })
+      });
+      if (res.ok) { setTestResult('ok'); }
+      else { const e = await res.json().catch(() => ({})); setTestResult(e.error?.message || `HTTP ${res.status}`); }
+    } catch (e) { setTestResult(e.message); }
+    setTesting(false);
+  };
+  return (
+    <SetGroup title="AI & Integrations" desc="Configurá el proveedor AI usado en todas las vistas de Meridian — Code Editor, PR Analyst, Sprint Coach, y más.">
+      <SetRow
+        title="AMD Endpoint URL"
+        desc={<>Obtené la URL al correr <strong>deploy_amd_endpoint.sh</strong> en AMD Developer Cloud. Guardada en el navegador, nunca se envía a ningún servidor externo.</>}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 340 }}>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <input
+              id="amd-endpoint-input"
+              type="text"
+              value={url}
+              onChange={e => { setUrl(e.target.value); setTestResult(null); }}
+              onKeyDown={e => e.key === 'Enter' && save()}
+              placeholder="http://<IP>:8000/v1/chat/completions"
+              style={{
+                ...inputStyle, flex: 1,
+                fontFamily: 'var(--font-mono)', fontSize: 11.5,
+                letterSpacing: url ? '0.04em' : 0,
+              }}
+            />
+            <button
+              className="btn sm"
+              onClick={save}
+              style={{ minWidth: 52, background: saved ? 'var(--status-done)' : undefined, color: saved ? '#fff' : undefined }}
+            >
+              {saved ? '✓' : 'Save'}
+            </button>
+          </div>
+          <button
+            onClick={test}
+            disabled={testing}
+            style={{
+              background: 'none', border: 'none', padding: 0,
+              color: testing ? 'var(--fg-3)' : 'var(--accent)',
+              fontSize: 12, cursor: testing ? 'default' : 'pointer',
+              textAlign: 'left', width: 'fit-content',
+              textDecoration: 'underline', textDecorationStyle: 'dotted',
+            }}
+          >
+            {testing ? 'Probando conexión…' : '⚡ Test connection'}
+          </button>
+          {testResult === 'ok' && (
+            <span style={{ fontSize: 11.5, color: 'var(--status-done)', display: 'flex', alignItems: 'center', gap: 4 }}>
+              ✓ Conexión exitosa — endpoint AMD activo
+            </span>
+          )}
+          {testResult && testResult !== 'ok' && (
+            <span style={{ fontSize: 11.5, color: 'var(--rose)' }}>✗ {testResult}</span>
+          )}
+        </div>
+      </SetRow>
+      <SetRow title="AI Model" desc="Modelo usado por todos los asistentes con contexto.">
+        <div style={{ ...inputStyle, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+          <Icon name="sparkle" size={13} style={{ color: 'var(--accent)' }} />
+          llama-3.3-70b-versatile
+        </div>
+      </SetRow>
+      <SetRow title="Code Editor Agent" desc="El AI dentro del Code Editor usa el mismo endpoint y puede crear, editar y correr archivos HTML/CSS/JS.">
+        <span className="chip" style={{ color: 'var(--status-done)' }}><span className="d" style={{ background: 'var(--status-done)' }} /> enabled</span>
+      </SetRow>
+      <SetRow title="Contextual AI Panels" desc="Each view (PRs, Sprints, Issues, Team, Compute) has a role-specific AI that understands what's on screen.">
+        <span className="chip" style={{ color: 'var(--status-done)' }}><span className="d" style={{ background: 'var(--status-done)' }} /> enabled</span>
+      </SetRow>
+    </SetGroup>
+  );
+};
+const inputStyle = {
+  background: "var(--bg-1)",
+  border: "1px solid var(--border)",
+  borderRadius: 6,
+  padding: "6px 10px",
+  color: "var(--fg-0)",
+  fontSize: 12.5,
+  outline: "none",
+  minWidth: 180,
+  fontFamily: "inherit",
+};
+Object.assign(window, { SettingsView });

vscode.html ADDED Viewed

	@@ -0,0 +1,1263 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Editor — Meridian</title>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #1e1e1e; color: #cccccc;
+      height: 100vh; overflow: hidden;
+      display: flex; flex-direction: column; font-size: 13px;
+    }
+    /* Titlebar */
+    .titlebar { height: 30px; background: #3c3c3c; display: flex; align-items: center; padding: 0 12px; flex-shrink: 0; }
+    .titlebar-dots { display: flex; gap: 6px; margin-right: 12px; }
+    .titlebar-dot { width: 12px; height: 12px; border-radius: 50%; }
+    .dot-close { background: #ff5f57; } .dot-min { background: #febc2e; } .dot-max { background: #28c840; }
+    .titlebar-title { flex: 1; text-align: center; font-size: 12px; color: #cccccc; }
+    /* Workbench */
+    .workbench { display: flex; flex: 1; overflow: hidden; }
+    /* Activity bar */
+    .activity-bar {
+      width: 48px; background: #333333;
+      display: flex; flex-direction: column; align-items: center;
+      padding-top: 4px; flex-shrink: 0; border-right: 1px solid #252526;
+    }
+    .act-icon {
+      width: 36px; height: 36px;
+      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; border-radius: 4px; margin: 1px 0;
+      color: #858585;
+    }
+    .act-icon:hover { color: #cccccc; }
+    .act-icon.active { color: #fff; border-left: 2px solid #007acc; }
+    .act-icon svg { width: 22px; height: 22px; }
+    .act-spacer { flex: 1; }
+    /* Sidebar */
+    .sidebar {
+      width: 250px; background: #252526; flex-shrink: 0;
+      display: flex; flex-direction: column; border-right: 1px solid #3c3c3c; overflow: hidden;
+    }
+    #sidebar-explorer { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+    #sidebar-agent    { display: none; flex-direction: column; flex: 1; overflow: hidden; }
+    .sidebar-header {
+      padding: 8px 12px; font-size: 11px; font-weight: 600;
+      color: #bbbbbb; text-transform: uppercase; letter-spacing: 0.8px;
+      flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+      border-bottom: 1px solid #3c3c3c;
+    }
+    .sidebar-btn {
+      background: none; border: none; color: #858585;
+      cursor: pointer; padding: 2px 6px; border-radius: 3px; font-size: 18px; line-height: 1;
+    }
+    .sidebar-btn:hover { color: #cccccc; background: rgba(255,255,255,0.1); }
+    /* File tree */
+    .file-tree { flex: 1; overflow-y: auto; }
+    .file-tree::-webkit-scrollbar { width: 6px; }
+    .file-tree::-webkit-scrollbar-thumb { background: #424242; border-radius: 3px; }
+    .file-item {
+      display: flex; align-items: center; gap: 6px;
+      padding: 4px 12px; cursor: pointer; color: #cccccc;
+    }
+    .file-item:hover { background: #2a2d2e; }
+    .file-item.active { background: #37373d; color: #fff; }
+    .file-icon { font-size: 10px; font-weight: 700; font-family: monospace; width: 22px; text-align: center; flex-shrink: 0; }
+    .icon-html { color: #f16529; } .icon-js { color: #f7df1e; }
+    .icon-css  { color: #569cd6; } .icon-json { color: #fbc02d; }
+    .icon-txt  { color: #858585; }
+    .file-name { flex: 1; font-size: 13px; }
+    .file-del {
+      opacity: 0; background: none; border: none; color: #858585;
+      cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1;
+    }
+    .file-item:hover .file-del { opacity: 0.6; }
+    .file-del:hover { opacity: 1 !important; color: #f48771; }
+    .empty-state { padding: 20px 12px; color: #555; font-size: 12px; text-align: center; line-height: 1.7; }
+    /* Agent sidebar */
+    .agent-chat { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
+    .agent-chat::-webkit-scrollbar { width: 4px; }
+    .agent-chat::-webkit-scrollbar-thumb { background: #424242; border-radius: 3px; }
+    .chat-msg { padding: 7px 9px; border-radius: 6px; font-size: 12px; line-height: 1.5; word-break: break-word; }
+    .chat-msg.user      { background: #0e639c; color: #fff; align-self: flex-end; max-width: 90%; }
+    .chat-msg.assistant { background: #2d2d2d; color: #cccccc; max-width: 100%; }
+    .chat-msg.tool      { background: #1a2633; color: #4fc1ff; font-family: monospace; font-size: 11px; border-left: 2px solid #007acc; }
+    .chat-msg.err       { background: #2d1f1f; color: #f48771; }
+    .chat-msg.thinking  { color: #858585; font-style: italic; }
+    .chat-msg pre { white-space: pre-wrap; margin-top: 4px; font-size: 10px; }
+    .api-row { padding: 6px 8px; border-bottom: 1px solid #3c3c3c; flex-shrink: 0; }
+    .api-label { font-size: 10px; color: #858585; margin-bottom: 3px; }
+    .api-input {
+      width: 100%; background: #3c3c3c; border: 1px solid #555;
+      border-radius: 3px; color: #cccccc; padding: 4px 8px; font-size: 11px; outline: none;
+    }
+    .api-input:focus { border-color: #007acc; }
+    .chat-input-row { padding: 6px 8px; border-top: 1px solid #3c3c3c; display: flex; gap: 4px; flex-shrink: 0; }
+    .chat-input {
+      flex: 1; background: #3c3c3c; border: 1px solid #555; border-radius: 4px;
+      color: #cccccc; padding: 5px 8px; font-size: 12px; resize: none; font-family: inherit; outline: none;
+    }
+    .chat-input:focus { border-color: #007acc; }
+    .chat-send {
+      background: #0e639c; border: none; color: #fff;
+      padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; flex-shrink: 0;
+    }
+    .chat-send:hover { background: #1177bb; }
+    .chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+    /* Editor area */
+    .editor-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+    /* Tab bar */
+    .tab-bar {
+      height: 35px; background: #2d2d2d;
+      display: flex; align-items: flex-end;
+      border-bottom: 1px solid #252526; overflow-x: auto; flex-shrink: 0;
+    }
+    .tab-bar::-webkit-scrollbar { display: none; }
+    .tab {
+      height: 35px; padding: 0 10px;
+      display: flex; align-items: center; gap: 5px;
+      font-size: 12px; color: #969696; cursor: pointer;
+      background: #2d2d2d; border-right: 1px solid #252526;
+      white-space: nowrap; flex-shrink: 0;
+    }
+    .tab.active { background: #1e1e1e; color: #fff; border-top: 1px solid #007acc; }
+    .tab:hover:not(.active) { background: #2a2d2e; }
+    .tab-close {
+      width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
+      border-radius: 3px; opacity: 0; font-size: 14px; color: #ccc;
+    }
+    .tab:hover .tab-close, .tab.active .tab-close { opacity: 0.6; }
+    .tab-close:hover { background: rgba(255,255,255,0.15); opacity: 1 !important; }
+    .run-btn {
+      margin-left: auto; height: 35px; padding: 0 12px;
+      display: flex; align-items: center; gap: 5px;
+      background: none; border: none; color: #4ec9b0; cursor: pointer;
+      font-size: 12px; white-space: nowrap; flex-shrink: 0;
+    }
+    .run-btn:hover:not(:disabled) { color: #fff; background: rgba(78,201,176,0.12); }
+    .run-btn:disabled { color: #454545; cursor: not-allowed; }
+    /* Welcome */
+    .editor-welcome {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      color: #555; text-align: center; padding: 20px;
+    }
+    .editor-welcome h2 { color: #777; font-size: 20px; font-weight: 400; margin-bottom: 10px; }
+    .editor-welcome p  { font-size: 13px; line-height: 1.7; max-width: 300px; }
+    .editor-welcome .ext { margin-top: 14px; font-size: 11px; color: #3a3a3a; }
+    /* Code editor */
+    .editor-wrapper { flex: 1; display: flex; overflow: hidden; }
+    .line-numbers {
+      width: 50px; background: #1e1e1e; padding: 8px 0;
+      text-align: right; padding-right: 14px; color: #858585;
+      font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
+      font-size: 13px; line-height: 21px; user-select: none;
+      overflow: hidden; flex-shrink: 0;
+    }
+    .code-textarea {
+      flex: 1; background: #1e1e1e; color: #d4d4d4;
+      border: none; outline: none;
+      font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
+      font-size: 13px; line-height: 21px;
+      padding: 8px 12px; resize: none; tab-size: 2;
+      white-space: pre; overflow: auto;
+    }
+    .code-textarea::-webkit-scrollbar { width: 10px; height: 10px; }
+    .code-textarea::-webkit-scrollbar-track { background: #1e1e1e; }
+    .code-textarea::-webkit-scrollbar-thumb { background: #424242; border-radius: 2px; }
+    /* Bottom panel */
+    .bottom-panel {
+      height: 190px; background: #1e1e1e;
+      border-top: 1px solid #3c3c3c;
+      display: flex; flex-direction: column; flex-shrink: 0;
+      transition: height 0.15s ease;
+    }
+    .bottom-panel.expanded { height: calc(100% - 35px); }
+    .panel-header {
+      height: 28px; background: #252526;
+      display: flex; align-items: center; padding: 0 8px;
+      border-bottom: 1px solid #3c3c3c; flex-shrink: 0; gap: 0;
+    }
+    .ptab {
+      padding: 0 12px; height: 100%; display: flex; align-items: center;
+      font-size: 11px; color: #969696; cursor: pointer; border-bottom: 1px solid transparent;
+    }
+    .ptab.active { color: #cccccc; border-bottom-color: #007acc; }
+    .ptab:hover:not(.active) { color: #cccccc; }
+    .panel-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
+    .pbtn {
+      background: none; border: none; color: #858585;
+      cursor: pointer; padding: 2px 6px; font-size: 11px; border-radius: 3px;
+    }
+    .pbtn:hover { color: #cccccc; background: rgba(255,255,255,0.08); }
+    .terminal-body {
+      flex: 1; padding: 6px 12px; overflow-y: auto;
+      font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
+      font-size: 12px; line-height: 1.65;
+    }
+    .terminal-body::-webkit-scrollbar { width: 6px; }
+    .terminal-body::-webkit-scrollbar-thumb { background: #424242; border-radius: 3px; }
+    .t-prompt { color: #3fc2fb; } .t-cmd { color: #cccccc; } .t-out { color: #858585; }
+    .t-ok { color: #4ec9b0; } .t-warn { color: #ffcc02; } .t-err { color: #f44747; }
+    .t-cursor { display: inline-block; width: 7px; height: 13px; background: #cccccc; vertical-align: text-bottom; animation: blink 1.2s step-end infinite; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .preview-body { flex: 1; background: #fff; display: none; }
+    .preview-iframe { width: 100%; height: 100%; border: none; display: block; }
+    /* Syntax tokens */
+    .kw  { color: #569cd6; } .ty  { color: #4ec9b0; }
+    .fn  { color: #dcdcaa; } .va  { color: #9cdcfe; }
+    .str { color: #ce9178; } .cmt { color: #6a9955; font-style: italic; }
+    .dec { color: #c586c0; } .cls { color: #4ec9b0; }
+    .num { color: #b5cea8; }
+    /* AI bar */
+    .ai-bar {
+      display: none; flex-shrink: 0;
+      padding: 5px 10px; background: #252526;
+      border-bottom: 1px solid #007acc;
+      align-items: center; gap: 8px;
+    }
+    .ai-bar.visible { display: flex; }
+    .ai-bar-icon { font-size: 14px; flex-shrink: 0; }
+    .ai-bar-input {
+      flex: 1; background: #3c3c3c; border: 1px solid #555;
+      border-radius: 4px; color: #cccccc; padding: 4px 10px;
+      font-size: 12px; outline: none; font-family: inherit;
+    }
+    .ai-bar-input:focus { border-color: #007acc; }
+    .ai-bar-btn {
+      background: #0e639c; border: none; color: #fff;
+      padding: 5px 14px; border-radius: 4px; cursor: pointer;
+      font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
+    }
+    .ai-bar-btn:hover { background: #1177bb; }
+    .ai-bar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    /* Ready bar */
+    .ready-bar {
+      display: none; flex-shrink: 0;
+      padding: 5px 10px; background: #252526;
+      border-bottom: 1px solid #28a745;
+      align-items: center; gap: 10px; font-size: 12px;
+    }
+    .ready-bar.visible { display: flex; }
+    .ready-bar-ok { color: #4ec9b0; flex-shrink: 0; font-size: 14px; }
+    .ready-bar-info { flex: 1; color: #858585; }
+    .ready-bar-info strong { color: #cccccc; }
+    .commit-btn {
+      background: #0e639c; border: none; color: #fff;
+      padding: 5px 14px; border-radius: 4px; cursor: pointer;
+      font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
+    }
+    .commit-btn:hover { background: #1177bb; }
+    /* Code highlighted view */
+    .code-hl-view {
+      display: none; flex: 1; overflow: auto;
+      font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
+      font-size: 13px; line-height: 21px;
+      padding: 8px 12px; color: #d4d4d4; background: #1e1e1e;
+    }
+    .code-hl-view::-webkit-scrollbar { width: 10px; height: 10px; }
+    .code-hl-view::-webkit-scrollbar-track { background: #1e1e1e; }
+    .code-hl-view::-webkit-scrollbar-thumb { background: #424242; border-radius: 2px; }
+    .ai-gen-cursor { display: inline-block; width: 2px; height: 14px; background: #007acc; vertical-align: text-bottom; animation: blink 0.6s step-end infinite; margin-left: 1px; }
+    /* Commit overlay */
+    .commit-overlay {
+      display: none; position: fixed; inset: 0;
+      background: rgba(0,0,0,0.65); z-index: 1000;
+      align-items: center; justify-content: center;
+    }
+    .commit-overlay.open { display: flex; }
+    .commit-dialog {
+      background: #252526; border: 1px solid #454545;
+      border-radius: 8px; width: 420px; max-width: 90%;
+      display: flex; flex-direction: column;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    }
+    .commit-header {
+      padding: 12px 16px; border-bottom: 1px solid #3c3c3c;
+      font-size: 13px; font-weight: 600; color: #cccccc;
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .commit-x { background: none; border: none; color: #858585; cursor: pointer; font-size: 18px; line-height: 1; }
+    .commit-x:hover { color: #cccccc; }
+    .commit-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
+    .commit-lbl { font-size: 11px; color: #858585; margin-bottom: 3px; }
+    .commit-msg-inp {
+      width: 100%; background: #3c3c3c; border: 1px solid #555;
+      border-radius: 4px; color: #cccccc; padding: 7px 10px;
+      font-size: 13px; outline: none; font-family: inherit; resize: none; box-sizing: border-box;
+    }
+    .commit-msg-inp:focus { border-color: #007acc; }
+    .commit-meta { font-size: 11px; color: #858585; display: flex; gap: 14px; align-items: center; }
+    .commit-add { color: #4ec9b0; }
+    .commit-footer {
+      padding: 11px 16px; border-top: 1px solid #3c3c3c;
+      display: flex; gap: 8px; justify-content: flex-end;
+    }
+    .cbtn { padding: 6px 16px; border-radius: 4px; font-size: 13px; cursor: pointer; border: none; }
+    .cbtn-sec { background: #3c3c3c; color: #cccccc; }
+    .cbtn-sec:hover { background: #505050; }
+    .cbtn-pri { background: #0e639c; color: #fff; font-weight: 600; }
+    .cbtn-pri:hover { background: #1177bb; }
+    .cbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    /* Status bar */
+    .status-bar {
+      height: 22px; background: #007acc;
+      display: flex; align-items: center; font-size: 11px; color: #fff; flex-shrink: 0;
+    }
+    .st-item { padding: 0 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; height: 100%; white-space: nowrap; }
+    .st-item:hover { background: rgba(255,255,255,0.12); }
+    .st-right { margin-left: auto; display: flex; }
+  </style>
+</head>
+<body>
+<div class="titlebar">
+  <div class="titlebar-dots">
+    <div class="titlebar-dot dot-close"></div>
+    <div class="titlebar-dot dot-min"></div>
+    <div class="titlebar-dot dot-max"></div>
+  </div>
+  <div class="titlebar-title" id="titlebar-title">Code Editor — Meridian</div>
+</div>
+<div class="workbench">
+  <!-- Activity bar -->
+  <div class="activity-bar">
+    <div class="act-icon active" id="act-explorer" title="Explorador" onclick="setSidebar('explorer')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h6"/>
+      </svg>
+    </div>
+    <div class="act-icon" id="act-agent" title="Agente AI" onclick="setSidebar('agent')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+        <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+        <circle cx="12" cy="16" r="1.5" fill="currentColor"/>
+      </svg>
+    </div>
+    <div class="act-spacer"></div>
+  </div>
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <!-- Explorer -->
+    <div id="sidebar-explorer">
+      <div class="sidebar-header">
+        Explorer
+        <button class="sidebar-btn" title="New file" onclick="newFile()">+</button>
+      </div>
+      <div class="file-tree" id="file-tree">
+        <div class="empty-state">No files.<br>Press <strong>+</strong> to create one.</div>
+      </div>
+    </div>
+    <!-- Agent -->
+    <div id="sidebar-agent">
+      <div class="sidebar-header">Code Agent</div>
+      <div class="api-row">
+        <div class="api-label">AMD Inference Endpoint URL</div>
+        <input type="text" class="api-input" id="api-key" placeholder="http://<IP>:8000/v1/chat/completions" />
+      </div>
+      <div class="agent-chat" id="agent-chat">
+        <div class="chat-msg assistant">Hi! I'm your code agent. I can create, edit and run HTML, CSS and JS files. What would you like to build?</div>
+      </div>
+      <div class="chat-input-row">
+        <textarea class="chat-input" id="chat-input" rows="2" placeholder="Ask me to build something..." onkeydown="chatKey(event)"></textarea>
+        <button class="chat-send" id="chat-send" onclick="sendChat()">▶</button>
+      </div>
+    </div>
+  </div>
+  <!-- Editor area -->
+  <div class="editor-area">
+    <div class="tab-bar" id="tab-bar">
+      <button class="run-btn" id="run-btn" disabled onclick="runActive()">▶ Run</button>
+    </div>
+    <div class="ai-bar" id="ai-bar">
+      <span class="ai-bar-icon">✦</span>
+      <input class="ai-bar-input" id="ai-prompt" value="Generate a TypeScript notification service with retry logic and priority queues" />
+      <button class="ai-bar-btn" id="ai-gen-btn" onclick="generateCode()">Generate</button>
+    </div>
+    <div class="ready-bar" id="ready-bar">
+      <span class="ready-bar-ok">✓</span>
+      <span class="ready-bar-info" id="ready-info">code generated</span>
+      <button class="commit-btn" onclick="openCommit()">↑ Commit &amp; push</button>
+    </div>
+    <div class="editor-welcome" id="editor-welcome">
+      <h2>Meridian Code Editor</h2>
+      <p>Create a file with <strong>+</strong> in the explorer, or ask the <strong>AI Agent</strong> to do it.</p>
+      <div class="ext">HTML · JavaScript · CSS · JSON</div>
+    </div>
+    <div class="editor-wrapper" id="editor-wrapper" style="display:none">
+      <div class="line-numbers" id="line-numbers">1</div>
+      <textarea class="code-textarea" id="code-textarea" spellcheck="false"
+        oninput="onInput()" onscroll="syncScroll()" onkeydown="editorKey(event)"
+        onclick="updateCursor()" onkeyup="updateCursor()"></textarea>
+      <div class="code-hl-view" id="code-hl-view"></div>
+    </div>
+    <div class="bottom-panel" id="bottom-panel">
+      <div class="panel-header">
+        <div class="ptab active" id="ptab-terminal" onclick="setPanel('terminal')">TERMINAL</div>
+        <div class="ptab" id="ptab-preview" onclick="setPanel('preview')">PREVIEW</div>
+        <div class="panel-actions">
+          <button class="pbtn" id="expand-btn" onclick="toggleExpand()" title="Expand preview">⤢</button>
+          <button class="pbtn" onclick="clearTerm()">Clear</button>
+        </div>
+      </div>
+      <div class="terminal-body" id="terminal-body">
+        <div><span class="t-prompt">$</span> <span class="t-cursor"></span></div>
+      </div>
+      <div class="preview-body" id="preview-body">
+        <iframe class="preview-iframe" id="preview-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="status-bar">
+  <div class="st-item" id="st-lang">Plain Text</div>
+  <div class="st-right">
+    <div class="st-item" id="st-cursor">Ln 1, Col 1</div>
+    <div class="st-item">UTF-8</div>
+  </div>
+</div>
+<script>
+// ── Constants ──────────────────────────────────────────────────────────
+const AMD_MODEL  = 'llama-3.3-70b-versatile';
+const LS_FILES   = 'meridian-vscode-files';
+// URL del endpoint AMD (recibida desde el app padre via postMessage o heredada de window)
+let _amdUrlOverride = '';
+// Receive API endpoint URL from parent Meridian app via postMessage
+window.addEventListener('message', (e) => {
+  if (e.data?.type === 'AMD_URL' && e.data?.url) {
+    _amdUrlOverride = e.data.url;
+    const apiInput = document.getElementById('api-key');
+    if (apiInput && !apiInput.value.trim()) apiInput.value = _amdUrlOverride;
+  }
+});
+function getEffectiveAmdUrl() {
+  const fromInput = document.getElementById('api-key')?.value?.trim();
+  return fromInput || _amdUrlOverride || (window.getAmdUrl ? window.getAmdUrl() : '') || '';
+}
+// ── State ──────────────────────────────────────────────────────────────
+const files   = {};      // { name: content }
+let openTabs  = [];      // ordered open file names
+let active    = null;    // current file name
+let panelMode    = 'terminal';
+let expanded     = false;
+let agentBusy    = false;
+let codeGenDone  = false;
+let codeStreaming = false;
+const agentHistory = []; // chat messages array
+// ── File icons / language ──────────────────────────────────────────────
+function fileIcon(name) {
+  const ext = name.split('.').pop().toLowerCase();
+  const m = { html:'<span class="file-icon icon-html">HTML</span>', htm:'<span class="file-icon icon-html">HTML</span>',
+               js:'<span class="file-icon icon-js">JS</span>', mjs:'<span class="file-icon icon-js">JS</span>',
+               css:'<span class="file-icon icon-css">CSS</span>', json:'<span class="file-icon icon-json">JSON</span>' };
+  return m[ext] || '<span class="file-icon icon-txt">TXT</span>';
+}
+function fileLang(name) {
+  const ext = name.split('.').pop().toLowerCase();
+  const m = { html:'HTML', htm:'HTML', js:'JavaScript', mjs:'JavaScript', css:'CSS', json:'JSON', md:'Markdown', ts:'TypeScript' };
+  return m[ext] || 'Plain Text';
+}
+function defaultContent(name) {
+  const ext = name.split('.').pop().toLowerCase();
+  if (ext === 'html') return `<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <title>My page</title>\n  <style>\n    body { font-family: sans-serif; padding: 20px; }\n  </style>\n</head>\n<body>\n  <h1>Hello world</h1>\n  <p>My first page.</p>\n</body>\n</html>`;
+  if (ext === 'js')   return `// ${name}\nconsole.log('Hello from ${name}!');\n`;
+  if (ext === 'css')  return `/* ${name} */\nbody {\n  font-family: sans-serif;\n  margin: 0;\n  padding: 20px;\n}\n`;
+  if (ext === 'json') return `{\n  \n}\n`;
+  return '';
+}
+function esc(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+// ── Persistence ────────────────────────────────────────────────────────
+function persistFiles() {
+  try { localStorage.setItem(LS_FILES, JSON.stringify(files)); } catch(e) {}
+}
+function loadPersistedFiles() {
+  try {
+    const saved = JSON.parse(localStorage.getItem(LS_FILES) || '{}');
+    Object.assign(files, saved);
+    if (Object.keys(files).length) {
+      openTabs = Object.keys(files).slice(0, 5);
+      active = openTabs[0];
+    }
+  } catch(e) {}
+}
+// ── File operations ────────────────────────────────────────────────────
+function createFile(name, content) {
+  saveCurrent();
+  if (content === undefined) content = defaultContent(name);
+  files[name] = content;
+  if (!openTabs.includes(name)) openTabs.push(name);
+  active = name;
+  renderAll();
+  persistFiles();
+}
+function openFile(name) {
+  if (files[name] === undefined) return;
+  saveCurrent();
+  if (!openTabs.includes(name)) openTabs.push(name);
+  active = name;
+  renderAll();
+  document.getElementById('code-textarea').focus();
+}
+function closeTab(name) {
+  const idx = openTabs.indexOf(name);
+  if (idx < 0) return;
+  openTabs.splice(idx, 1);
+  if (active === name) active = openTabs.length ? openTabs[Math.max(0, idx - 1)] : null;
+  renderAll();
+}
+function deleteFile(name) {
+  closeTab(name);
+  delete files[name];
+  renderAll();
+  persistFiles();
+}
+function saveCurrent() {
+  if (!active) return;
+  const ta = document.getElementById('code-textarea');
+  if (ta) { files[active] = ta.value; persistFiles(); }
+}
+// ── New file prompt ────────────────────────────────────────────────────
+function newFile() {
+  const name = prompt('File name (e.g., index.html, app.js):');
+  if (!name || !name.trim()) return;
+  const trimmed = name.trim();
+  if (files[trimmed] !== undefined) { openFile(trimmed); return; }
+  createFile(trimmed);
+}
+// ── Render ─────────────────────────────────────────────────────────────
+function renderAll() {
+  renderTree();
+  renderTabs();
+  renderEditor();
+  renderStatus();
+}
+function renderTree() {
+  const tree = document.getElementById('file-tree');
+  const names = Object.keys(files);
+  if (!names.length) {
+    tree.innerHTML = '<div class="empty-state">No files.<br>Press <strong>+</strong> to create one.</div>';
+    return;
+  }
+  tree.innerHTML = names.map(n => `
+    <div class="file-item ${n === active ? 'active' : ''}" data-file="${esc(n)}">
+      ${fileIcon(n)}
+      <span class="file-name">${esc(n)}</span>
+      <button class="file-del" data-del="${esc(n)}" title="Delete">×</button>
+    </div>`).join('');
+}
+function isRunnable(name) {
+  if (!name) return false;
+  const ext = name.split('.').pop().toLowerCase();
+  return ext === 'html' || ext === 'htm';
+}
+function renderTabs() {
+  const bar = document.getElementById('tab-bar');
+  const canRun = isRunnable(active);
+  const prBtn = `<button class="run-btn" style="background:var(--violet);margin-right:8px" onclick="createPR()">⚑ Create PR</button>`;
+  const runBtn = `<button class="run-btn" id="run-btn" ${canRun ? '' : 'disabled'} onclick="runActive()">▶ Run</button>`;
+  if (!openTabs.length) { bar.innerHTML = prBtn + runBtn; return; }
+  bar.innerHTML = openTabs.map(n => `
+    <div class="tab ${n === active ? 'active' : ''}" data-file="${esc(n)}">
+      ${fileIcon(n)} ${esc(n)}
+      <span class="tab-close" data-close="${esc(n)}">×</span>
+    </div>`).join('') + prBtn + runBtn;
+}
+function renderEditor() {
+  const welcome = document.getElementById('editor-welcome');
+  const wrapper = document.getElementById('editor-wrapper');
+  const ta      = document.getElementById('code-textarea');
+  document.getElementById('titlebar-title').textContent = active ? `${active} — Code Editor` : 'Code Editor — Meridian';
+  if (!active) {
+    welcome.style.display = 'flex';
+    wrapper.style.display = 'none';
+  } else {
+    welcome.style.display = 'none';
+    wrapper.style.display = 'flex';
+    ta.value = files[active] || '';
+    updateLineNums();
+  }
+}
+function renderStatus() {
+  document.getElementById('st-lang').textContent = active ? fileLang(active) : 'Plain Text';
+}
+// ── Editor helpers ─────────────────────────────────────────────────────
+function updateLineNums() {
+  const ta  = document.getElementById('code-textarea');
+  const ln  = document.getElementById('line-numbers');
+  const cnt = ta.value.split('\n').length;
+  ln.innerHTML = Array.from({length: cnt}, (_, i) => i + 1).join('<br>');
+}
+function syncScroll() {
+  const ta = document.getElementById('code-textarea');
+  document.getElementById('line-numbers').scrollTop = ta.scrollTop;
+}
+function onInput() {
+  saveCurrent();
+  updateLineNums();
+  updateCursor();
+}
+function updateCursor() {
+  const ta  = document.getElementById('code-textarea');
+  const val = ta.value.substring(0, ta.selectionStart);
+  const lines = val.split('\n');
+  document.getElementById('st-cursor').textContent = `Ln ${lines.length}, Col ${lines[lines.length - 1].length + 1}`;
+}
+function editorKey(e) {
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    const ta = e.target, s = ta.selectionStart, en = ta.selectionEnd;
+    ta.value = ta.value.substring(0, s) + '  ' + ta.value.substring(en);
+    ta.selectionStart = ta.selectionEnd = s + 2;
+    saveCurrent(); updateLineNums();
+  }
+}
+// ── Sidebar toggle ─────────────────────────────────────────────────────
+function setSidebar(mode) {
+  const isExplorer = mode === 'explorer';
+  document.getElementById('sidebar-explorer').style.display = isExplorer ? 'flex' : 'none';
+  document.getElementById('sidebar-agent').style.display    = isExplorer ? 'none' : 'flex';
+  document.getElementById('act-explorer').classList.toggle('active', isExplorer);
+  document.getElementById('act-agent').classList.toggle('active', !isExplorer);
+  if (!isExplorer) {
+    setTimeout(() => document.getElementById('chat-input').focus(), 50);
+  }
+}
+// ── Panel toggle ────────────────────────────────────────────────────────
+function setPanel(mode) {
+  panelMode = mode;
+  document.getElementById('ptab-terminal').classList.toggle('active', mode === 'terminal');
+  document.getElementById('ptab-preview').classList.toggle('active', mode === 'preview');
+  document.getElementById('terminal-body').style.display = mode === 'terminal' ? 'block' : 'none';
+  document.getElementById('preview-body').style.display  = mode === 'preview'  ? 'block' : 'none';
+  document.getElementById('expand-btn').style.display    = mode === 'preview'  ? 'inline-flex' : 'none';
+}
+function toggleExpand() {
+  expanded = !expanded;
+  const panel = document.getElementById('bottom-panel');
+  const wrap  = document.getElementById('editor-wrapper');
+  const wel   = document.getElementById('editor-welcome');
+  panel.classList.toggle('expanded', expanded);
+  if (expanded) {
+    wrap.style.display = 'none';
+    wel.style.display  = 'none';
+  } else {
+    if (active) wrap.style.display = 'flex';
+    else        wel.style.display  = 'flex';
+  }
+  document.getElementById('expand-btn').textContent = expanded ? '⤡' : '⤢';
+}
+// ── Terminal ────────────────────────────────────────────────────────────
+function termWrite(html) {
+  const body = document.getElementById('terminal-body');
+  const cur  = body.querySelector('.t-cursor');
+  if (cur) cur.closest('div').remove();
+  const el = document.createElement('div');
+  el.innerHTML = html;
+  body.appendChild(el);
+  const curLine = document.createElement('div');
+  curLine.innerHTML = '<span class="t-prompt">$</span> <span class="t-cursor"></span>';
+  body.appendChild(curLine);
+  body.scrollTop = body.scrollHeight;
+}
+function termLine(type, text) {
+  const c = { ok:'t-ok', warn:'t-warn', err:'t-err', out:'t-out', cmd:'t-cmd' }[type] || 't-out';
+  termWrite(`<span class="${c}">${esc(text)}</span>`);
+}
+function termCmd(cmd) {
+  termWrite(`<span class="t-prompt">$</span> <span class="t-cmd">${esc(cmd)}</span>`);
+}
+function clearTerm() {
+  document.getElementById('terminal-body').innerHTML = '<div><span class="t-prompt">$</span> <span class="t-cursor"></span></div>';
+}
+// ── Run ────────────────────────────────────────────────────────────────
+function runActive() {
+  if (!active) return;
+  saveCurrent();
+  runFile(active);
+}
+async function runFile(name) {
+  const content = files[name];
+  if (content === undefined) return 'Error: file not found';
+  const ext = name.split('.').pop().toLowerCase();
+  if (ext === 'html' || ext === 'htm') return runHTML(name, content);
+  if (ext === 'js')  return runJS(name, content);
+  if (ext === 'css') {
+    termLine('warn', `CSS files cannot run standalone. Include ${name} in an HTML file.`);
+    return `Not directly runnable. Tip: create an HTML file that links to ${name}.`;
+  }
+  termLine('warn', `To run this file: open ${name} in a browser or with node ${name}`);
+  return `Not runnable: .${ext}`;
+}
+function runHTML(name, content) {
+  termCmd(`open ${name}`);
+  const lines = content.split('\n').length;
+  termLine('out', `  Loading ${name} (${lines} lines)…`);
+  termLine('ok', `✓ ${name} rendered — Preview active`);
+  document.getElementById('preview-iframe').srcdoc = content;
+  setPanel('preview');
+  return `HTML preview opened. Command to run locally: npx serve .`;
+}
+function runJS(name, content) {
+  termCmd(`node ${name}`);
+  return new Promise(resolve => {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.setAttribute('sandbox', 'allow-scripts');
+    document.body.appendChild(iframe);
+    const tid = setTimeout(() => { cleanup(); termLine('err', 'Timeout (5s)'); resolve('Timeout'); }, 5000);
+    function cleanup() { clearTimeout(tid); window.removeEventListener('message', handler); try { document.body.removeChild(iframe); } catch(e){} }
+    function handler(e) {
+      if (e.source !== iframe.contentWindow) return;
+      if (!e.data || e.data.type !== '_meridian_result') return;
+      cleanup();
+      const { logs, error } = e.data;
+      logs.forEach(([t, msg]) => termLine(t === 'error' ? 'err' : t === 'warn' ? 'warn' : 'out', msg));
+      if (error) { termLine('err', `⚠ ${error}`); resolve(`Error: ${error}`); }
+      else { termLine('ok', `✓ ${name} executed`); resolve(logs.map(([,m]) => m).join('\n') || '(no output)'); }
+    }
+    window.addEventListener('message', handler);
+    const src = content.replace(/<\/script>/gi, '<\\/script>');
+    iframe.srcdoc = `<!DOCTYPE html><html><body><script>
+const _L=[];
+const console={
+  log:(...a)=>_L.push(['log',a.map(x=>typeof x==='object'?JSON.stringify(x):String(x)).join(' ')]),
+  error:(...a)=>_L.push(['error',a.map(x=>String(x)).join(' ')]),
+  warn:(...a)=>_L.push(['warn',a.map(x=>String(x)).join(' ')]),
+  info:(...a)=>_L.push(['log',a.map(x=>String(x)).join(' ')]),
+};
+try{${src};parent.postMessage({type:'_meridian_result',logs:_L,error:null},'*');}
+catch(e){parent.postMessage({type:'_meridian_result',logs:_L,error:e.message},'*');}
+<\/script></body></html>`;
+  });
+}
+// ── AI Agent (AMD vLLM Endpoint / OpenAI-compatible) ───────────────────────────────
+const SYSTEM = `You are a code agent embedded in the Meridian Code Editor. You create, edit and run web files (HTML, CSS, JavaScript) for the user.
+Rules:
+- Always produce complete, functional, beautiful code (no placeholders, no TODO comments).
+- Use modern HTML5/CSS3/JS. For HTML pages, inline styles or a <style> tag is fine (no build step).
+- After creating a file, always call run_file so the user sees the result immediately.
+- Mention the terminal command to run the file (e.g. "npx serve ." or just open index.html in a browser).
+- Be concise in chat — let the code speak.
+- Respond in English.`;
+// OpenAI-compatible function definitions for AMD Endpoint
+const TOOLS = [
+  { type: 'function', function: { name: 'create_file', description: 'Create a new file with the given name and content. Use for HTML, CSS, JS.',
+    parameters: { type:'object', properties: { name:{type:'string',description:'Filename, e.g. index.html'}, content:{type:'string',description:'Full file content'} }, required:['name','content'] } } },
+  { type: 'function', function: { name: 'edit_file', description: 'Replace the entire content of an existing file.',
+    parameters: { type:'object', properties: { name:{type:'string'}, content:{type:'string'} }, required:['name','content'] } } },
+  { type: 'function', function: { name: 'read_file', description: 'Read the current content of a file.',
+    parameters: { type:'object', properties: { name:{type:'string'} }, required:['name'] } } },
+  { type: 'function', function: { name: 'list_files', description: 'List all files in the editor.',
+    parameters: { type:'object', properties: {} } } },
+  { type: 'function', function: { name: 'run_file', description: 'Execute a file — HTML opens live preview, JS runs in sandbox.',
+    parameters: { type:'object', properties: { name:{type:'string'} }, required:['name'] } } },
+  { type: 'function', function: { name: 'run_command', description: 'Run a terminal command (e.g., "node file.js", "npm install").',
+    parameters: { type:'object', properties: { command:{type:'string', description:'The terminal command to run'} }, required:['command'] } } },
+];
+function chatKey(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); }
+}
+function addMsg(role, text) {
+  const box = document.getElementById('agent-chat');
+  const div = document.createElement('div');
+  div.className = `chat-msg ${role}`;
+  div.innerHTML = window.marked ? window.marked.parse(text) : esc(text).replace(/\n/g,'<br>');
+  box.appendChild(div);
+  box.scrollTop = box.scrollHeight;
+  return div;
+}
+function addToolMsg(name, input) {
+  const box = document.getElementById('agent-chat');
+  const div = document.createElement('div');
+  div.className = 'chat-msg tool';
+  const inp = JSON.stringify(input, null, 2);
+  div.innerHTML = `🔧 <strong>${esc(name)}</strong><pre>${esc(inp.length > 300 ? inp.slice(0,300)+'…' : inp)}</pre>`;
+  box.appendChild(div);
+  box.scrollTop = box.scrollHeight;
+}
+async function sendChat() {
+  if (agentBusy) return;
+  // Prefer URL from input field; fall back to app-level AMD_ENDPOINT_URL
+  const amdUrl = getEffectiveAmdUrl();
+  const inputEl = document.getElementById('chat-input');
+  const msg = inputEl.value.trim();
+  if (!msg) return;
+  if (!amdUrl || amdUrl.includes('<IP-PUBLICA>')) { addMsg('err', '⚠ Endpoint AMD no configurado. Actualizá AMD_ENDPOINT_URL en ai-engine.jsx con la IP de tu instancia AMD.'); return; }
+  inputEl.value = '';
+  agentBusy = true;
+  document.getElementById('chat-send').disabled = true;
+  addMsg('user', msg);
+  agentHistory.push({ role: 'user', content: msg });
+  const thinking = addMsg('thinking', '⋯ Thinking…');
+  try {
+    await agentLoop(amdUrl, thinking);
+  } catch(e) {
+    thinking.remove();
+    addMsg('assistant', `⚠ API Error: ${e?.message || String(e)}`);
+  } finally {
+    agentBusy = false;
+    document.getElementById('chat-send').disabled = false;
+  }
+}
+async function agentLoop(amdUrl, thinkingEl) {
+  let first = true;
+  const MAX_ITERS = 8;
+  for (let iter = 0; iter < MAX_ITERS; iter++) {
+    const res = await fetch(amdUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer dummy-key` },
+      body: JSON.stringify({
+        model: AMD_MODEL,
+        max_tokens: 4096,
+        messages: [{ role: 'system', content: SYSTEM }, ...agentHistory],
+        tools: TOOLS,
+        tool_choice: 'auto',
+      })
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error?.message || `AMD API HTTP ${res.status}`);
+    }
+    const data = await res.json();
+    if (first) { thinkingEl.remove(); first = false; }
+    const choice = data.choices?.[0];
+    const msg = choice?.message;
+    if (!msg) break;
+    agentHistory.push(msg);
+    // Text content
+    if (msg.content) addMsg('assistant', msg.content);
+    // Tool calls (OpenAI format)
+    const toolCalls = msg.tool_calls || [];
+    if (!toolCalls.length || choice.finish_reason === 'stop') break;
+    const results = [];
+    for (const tc of toolCalls) {
+      let input;
+      try { input = JSON.parse(tc.function.arguments); } catch { input = {}; }
+      addToolMsg(tc.function.name, input);
+      const out = await execTool(tc.function.name, input);
+      results.push({ role: 'tool', tool_call_id: tc.id, content: String(out) });
+    }
+    agentHistory.push(...results);
+  }
+}
+async function execTool(name, input) {
+  switch (name) {
+    case 'create_file':
+      createFile(input.name, input.content);
+      return `File "${input.name}" created.`;
+    case 'edit_file':
+      if (files[input.name] === undefined) return `Error: "${input.name}" does not exist.`;
+      files[input.name] = input.content;
+      if (active === input.name) { document.getElementById('code-textarea').value = input.content; updateLineNums(); }
+      renderTree(); renderTabs();
+      return `File "${input.name}" edited.`;
+    case 'read_file':
+      if (files[input.name] === undefined) return `Error: "${input.name}" does not exist.`;
+      return files[input.name];
+    case 'list_files': {
+      const ns = Object.keys(files);
+      return ns.length ? ns.join('\n') : 'No files.';
+    }
+    case 'run_file':
+      if (files[input.name] === undefined) return `Error: "${input.name}" does not exist.`;
+      openFile(input.name);
+      return await runFile(input.name);
+    case 'run_command':
+      termCmd(input.command);
+      if (input.command.startsWith('node ')) {
+        const f = input.command.split(' ')[1];
+        if (files[f]) { openFile(f); return await runFile(f); }
+        termLine('err', `Error: file ${f} not found`);
+        return `Error: file ${f} not found`;
+      }
+      termLine('out', `(Simulated) ${input.command}`);
+      return `Simulated command execution success.`;
+    default:
+      return `Unknown tool: ${name}`;
+  }
+}
+// ── Demo: AI Code Streaming ────────────────────────────────────────────
+const notifierLines = [
+  `<span class="cmt">// notifier.ts — generated by Meridian AI</span>`,
+  `<span class="cmt">// Notification service with retry logic and priority queues</span>`,
+  ``,
+  `<span class="kw">export type</span> <span class="ty">Priority</span> = <span class="str">'low'</span> | <span class="str">'medium'</span> | <span class="str">'high'</span> | <span class="str">'critical'</span>;`,
+  ``,
+  `<span class="kw">export interface</span> <span class="cls">Notification</span> {`,
+  `  <span class="va">id</span>: <span class="ty">string</span>;`,
+  `  <span class="va">recipient</span>: <span class="ty">string</span>;`,
+  `  <span class="va">subject</span>: <span class="ty">string</span>;`,
+  `  <span class="va">body</span>: <span class="ty">string</span>;`,
+  `  <span class="va">priority</span>: <span class="ty">Priority</span>;`,
+  `  <span class="va">retries</span>: <span class="ty">number</span>;`,
+  `  <span class="va">maxRetries</span>: <span class="ty">number</span>;`,
+  `  <span class="va">createdAt</span>: <span class="ty">Date</span>;`,
+  `}`,
+  ``,
+  `<span class="kw">interface</span> <span class="cls">QueueItem</span> {`,
+  `  <span class="va">notification</span>: <span class="ty">Notification</span>;`,
+  `  <span class="va">score</span>: <span class="ty">number</span>;`,
+  `}`,
+  ``,
+  `<span class="kw">const</span> <span class="va">PRIORITY_SCORES</span>: <span class="ty">Record</span>&lt;<span class="ty">Priority</span>, <span class="ty">number</span>&gt; = {`,
+  `  <span class="str">low</span>: <span class="num">1</span>,`,
+  `  <span class="str">medium</span>: <span class="num">2</span>,`,
+  `  <span class="str">high</span>: <span class="num">4</span>,`,
+  `  <span class="str">critical</span>: <span class="num">8</span>,`,
+  `};`,
+  ``,
+  `<span class="kw">export class</span> <span class="cls">NotificationService</span> {`,
+  `  <span class="kw">private</span> <span class="va">queue</span>: <span class="ty">QueueItem</span>[] = [];`,
+  `  <span class="kw">private readonly</span> <span class="va">maxConcurrent</span> = <span class="num">3</span>;`,
+  `  <span class="kw">private</span> <span class="va">running</span> = <span class="num">0</span>;`,
+  ``,
+  `  <span class="fn">enqueue</span>(<span class="va">notification</span>: <span class="ty">Notification</span>): <span class="ty">void</span> {`,
+  `    <span class="kw">const</span> <span class="va">score</span> = <span class="va">PRIORITY_SCORES</span>[<span class="va">notification</span>.<span class="va">priority</span>];`,
+  `    <span class="kw">this</span>.<span class="va">queue</span>.<span class="fn">push</span>({ <span class="va">notification</span>, <span class="va">score</span> });`,
+  `    <span class="kw">this</span>.<span class="va">queue</span>.<span class="fn">sort</span>((<span class="va">a</span>, <span class="va">b</span>) =&gt; <span class="va">b</span>.<span class="va">score</span> - <span class="va">a</span>.<span class="va">score</span>);`,
+  `    <span class="kw">this</span>.<span class="fn">flush</span>();`,
+  `  }`,
+  ``,
+  `  <span class="kw">private async</span> <span class="fn">flush</span>(): <span class="ty">Promise</span>&lt;<span class="ty">void</span>&gt; {`,
+  `    <span class="kw">while</span> (<span class="kw">this</span>.<span class="va">queue</span>.<span class="va">length</span> &gt; <span class="num">0</span> &amp;&amp; <span class="kw">this</span>.<span class="va">running</span> &lt; <span class="kw">this</span>.<span class="va">maxConcurrent</span>) {`,
+  `      <span class="kw">const</span> <span class="va">item</span> = <span class="kw">this</span>.<span class="va">queue</span>.<span class="fn">shift</span>()!;`,
+  `      <span class="kw">this</span>.<span class="va">running</span>++;`,
+  `      <span class="kw">this</span>.<span class="fn">dispatch</span>(<span class="va">item</span>.<span class="va">notification</span>)`,
+  `        .<span class="fn">finally</span>(() =&gt; { <span class="kw">this</span>.<span class="va">running</span>--; <span class="kw">this</span>.<span class="fn">flush</span>(); });`,
+  `    }`,
+  `  }`,
+  ``,
+  `  <span class="kw">private async</span> <span class="fn">dispatch</span>(<span class="va">n</span>: <span class="ty">Notification</span>): <span class="ty">Promise</span>&lt;<span class="ty">void</span>&gt; {`,
+  `    <span class="kw">for</span> (<span class="kw">let</span> <span class="va">attempt</span> = <span class="num">0</span>; <span class="va">attempt</span> &lt;= <span class="va">n</span>.<span class="va">maxRetries</span>; <span class="va">attempt</span>++) {`,
+  `      <span class="kw">try</span> {`,
+  `        <span class="kw">await</span> <span class="kw">this</span>.<span class="fn">send</span>(<span class="va">n</span>);`,
+  `        <span class="kw">return</span>;`,
+  `      } <span class="kw">catch</span> (<span class="va">err</span>) {`,
+  `        <span class="kw">if</span> (<span class="va">attempt</span> === <span class="va">n</span>.<span class="va">maxRetries</span>) <span class="kw">throw</span> <span class="va">err</span>;`,
+  `        <span class="kw">await</span> <span class="kw">this</span>.<span class="fn">delay</span>(<span class="ty">Math</span>.<span class="fn">pow</span>(<span class="num">2</span>, <span class="va">attempt</span>) * <span class="num">200</span>);`,
+  `      }`,
+  `    }`,
+  `  }`,
+  ``,
+  `  <span class="kw">private async</span> <span class="fn">send</span>(<span class="va">n</span>: <span class="ty">Notification</span>): <span class="ty">Promise</span>&lt;<span class="ty">void</span>&gt; {`,
+  `    <span class="cmt">// Simulate async transport (replace with real implementation)</span>`,
+  `    <span class="kw">await</span> <span class="kw">this</span>.<span class="fn">delay</span>(<span class="num">50</span> + <span class="ty">Math</span>.<span class="fn">random</span>() * <span class="num">150</span>);`,
+  `    <span class="va">console</span>.<span class="fn">log</span>(<span class="str">'Sent ['</span> + <span class="va">n</span>.<span class="va">priority</span> + <span class="str">'] to '</span> + <span class="va">n</span>.<span class="va">recipient</span>);`,
+  `  }`,
+  ``,
+  `  <span class="kw">private</span> <span class="fn">delay</span>(<span class="va">ms</span>: <span class="ty">number</span>): <span class="ty">Promise</span>&lt;<span class="ty">void</span>&gt; {`,
+  `    <span class="kw">return new</span> <span class="cls">Promise</span>(<span class="va">resolve</span> =&gt; <span class="fn">setTimeout</span>(<span class="va">resolve</span>, <span class="va">ms</span>));`,
+  `  }`,
+  `}`,
+];
+function updateLineNumsForHL() {
+  const ln = document.getElementById('line-numbers');
+  ln.innerHTML = Array.from({length: notifierLines.length}, (_, i) => i + 1).join('<br>');
+}
+function generateCode() {
+  if (codeStreaming || codeGenDone) return;
+  const btn = document.getElementById('ai-gen-btn');
+  btn.disabled = true;
+  btn.textContent = 'Generating…';
+  codeStreaming = true;
+  const hlView  = document.getElementById('code-hl-view');
+  const ta      = document.getElementById('code-textarea');
+  const welcome = document.getElementById('editor-welcome');
+  const wrapper = document.getElementById('editor-wrapper');
+  const aiBar   = document.getElementById('ai-bar');
+  welcome.style.display = 'none';
+  wrapper.style.display = 'flex';
+  ta.style.display      = 'none';
+  hlView.style.display  = 'block';
+  hlView.innerHTML      = '';
+  updateLineNumsForHL();
+  let i = 0;
+  function streamLine() {
+    if (i >= notifierLines.length) {
+      const cur = hlView.querySelector('.ai-gen-cursor');
+      if (cur) cur.remove();
+      codeStreaming = false;
+      codeGenDone   = true;
+      files['notifier.ts'] = notifierLines.map(l => l.replace(/<[^>]*>/g, '')).join('\n');
+      aiBar.classList.remove('visible');
+      const readyBar = document.getElementById('ready-bar');
+      document.getElementById('ready-info').innerHTML =
+        `<strong>notifier.ts</strong> — ${notifierLines.length} lines generated`;
+      readyBar.classList.add('visible');
+      renderStatus();
+      return;
+    }
+    const cur = hlView.querySelector('.ai-gen-cursor');
+    if (cur) cur.remove();
+    const div = document.createElement('div');
+    div.innerHTML = notifierLines[i] + '<span class="ai-gen-cursor"></span>';
+    hlView.appendChild(div);
+    hlView.scrollTop = hlView.scrollHeight;
+    i++;
+    setTimeout(streamLine, 28 + Math.random() * 55);
+  }
+  streamLine();
+}
+function openCommit() {
+  document.getElementById('commit-additions').textContent = '+' + notifierLines.length;
+  document.getElementById('commit-overlay').classList.add('open');
+}
+function closeCommit() {
+  document.getElementById('commit-overlay').classList.remove('open');
+}
+function doCommit() {
+  const msg = document.getElementById('commit-msg').value.trim() || 'feat: add NotificationService';
+  const goBtn = document.getElementById('commit-go');
+  goBtn.disabled    = true;
+  goBtn.textContent = 'Pushing…';
+  const steps = [
+    { type: 'cmd', text: 'git add notifier.ts' },
+    { type: 'cmd', text: `git commit -m "${msg}"` },
+    { type: 'out', text: ` 1 file changed, ${notifierLines.length} insertions(+)` },
+    { type: 'cmd', text: 'git push origin feat/ai-generated' },
+    { type: 'out', text: 'Enumerating objects: 4, done.' },
+    { type: 'out', text: 'Writing objects: 100% (3/3), 1.42 KiB, done.' },
+    { type: 'ok',  text: `✓ feat/ai-generated → origin  [new branch]` },
+  ];
+  closeCommit();
+  let idx = 0;
+  function nextStep() {
+    if (idx >= steps.length) {
+      goBtn.disabled    = false;
+      goBtn.textContent = 'Commit & push';
+      window.parent.postMessage({
+        type: 'meridian:vscode-commit',
+        fileName: 'notifier.ts',
+        commitMessage: msg,
+        branch: 'feat/ai-generated',
+        additions: notifierLines.length,
+      }, '*');
+      return;
+    }
+    const { type, text } = steps[idx++];
+    if (type === 'cmd') termCmd(text); else termLine(type, text);
+    setTimeout(nextStep, 200 + Math.random() * 220);
+  }
+  nextStep();
+}
+// ── Event delegation ───────────────────────────────────────────────────
+document.getElementById('file-tree').addEventListener('click', e => {
+  const del  = e.target.closest('[data-del]');
+  const item = e.target.closest('[data-file]');
+  if (del)  { e.stopPropagation(); if (confirm(`Delete ${del.dataset.del}?`)) deleteFile(del.dataset.del); }
+  else if (item) openFile(item.dataset.file);
+});
+document.getElementById('tab-bar').addEventListener('click', e => {
+  const close = e.target.closest('[data-close]');
+  const tab   = e.target.closest('[data-file]');
+  if (close) { e.stopPropagation(); closeTab(close.dataset.close); }
+  else if (tab) openFile(tab.dataset.file);
+});
+// Ctrl+Enter or F5 to run
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey && e.key === 'Enter') || e.key === 'F5') { e.preventDefault(); runActive(); }
+});
+// ── Init ───────────────────────────────────────────────────────────────
+// Load persisted files from localStorage
+loadPersistedFiles();
+// Pre-fill AMD endpoint URL desde la constante central (si el campo está vacío)
+(function() {
+  const apiInput = document.getElementById('api-key');
+  if (apiInput && !apiInput.value.trim() && window.AMD_ENDPOINT_URL) {
+    apiInput.value = window.AMD_ENDPOINT_URL;
+  }
+})();
+setPanel('terminal');
+renderAll();
+async function createPR() {
+  const prBtn = document.querySelector('.run-btn[onclick="createPR()"]');
+  if (prBtn) { prBtn.disabled = true; prBtn.innerText = '⏳ Creating PR...'; }
+  try {
+    const amdUrl = getEffectiveAmdUrl();
+    if (!amdUrl || amdUrl.includes('<IP-PUBLICA>')) throw new Error("Endpoint AMD no configurado. Actualizá AMD_ENDPOINT_URL en ai-engine.jsx.");
+    // Generate AI Summary based on code
+    const fileContents = Object.entries(files).map(([name, content]) => `// File: ${name}\n${content}`).join('\n\n');
+    const res = await fetch(amdUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer dummy-key` },
+      body: JSON.stringify({
+        model: 'llama-3.3-70b-versatile',
+        max_tokens: 200,
+        messages: [
+          { role: 'system', content: 'You are a senior developer. Based on the file contents provided, generate a brief, one-sentence PR title and a very short description (max 2 sentences) summarizing what this code does. Format strictly as JSON: {"title": "the title", "description": "the description"}' },
+          { role: 'user', content: fileContents || 'Empty project' }
+        ],
+        response_format: { type: "json_object" }
+      })
+    });
+    if (!res.ok) throw new Error("Failed to contact AMD API for PR summary.");
+    const data = await res.json();
+    const summary = JSON.parse(data.choices[0].message.content);
+    // Count rough lines of code for additions
+    let lines = 0;
+    for (const key in files) lines += files[key].split('\\n').length;
+    // Use window.parent to dispatch to the main app state
+    if (window.parent && window.parent.apiFetch) {
+      await window.parent.apiFetch('POST', '/api/prs', {
+        title: summary.title,
+        branch: 'feature/vscode-ai-gen',
+        base: 'main',
+        status: 'open',
+        additions: lines,
+        deletions: 0
+      });
+      window.parent.toast("Pull Request created successfully!");
+      if (window.parent.meridianRefresh) window.parent.meridianRefresh();
+    } else {
+      termLine('err', '✗ Could not connect to parent app window to create PR.');
+    }
+  } catch (err) {
+    termLine('err', `⚠ API Error: ${err?.message || String(err)}`);
+  } finally {
+    if (prBtn) { prBtn.disabled = false; prBtn.innerText = '⚑ Create PR'; }
+  }
+}
+// Greet in terminal
+termLine('out', '  Meridian Code Editor ready. Ask the AI agent or press + to create a file.');
+termLine('ok', '✓ Session storage active — files persist across refreshes.');
+</script>
+<div class="commit-overlay" id="commit-overlay">
+  <div class="commit-dialog">
+    <div class="commit-header">
+      ↑ Commit &amp; push
+      <button class="commit-x" onclick="closeCommit()">×</button>
+    </div>
+    <div class="commit-body">
+      <div>
+        <div class="commit-lbl">Commit message</div>
+        <textarea class="commit-msg-inp" id="commit-msg" rows="2">feat: add NotificationService with retry logic and priority queues</textarea>
+      </div>
+      <div class="commit-meta">
+        <span>1 file changed</span>
+        <span class="commit-add" id="commit-additions">+59</span>
+        <span>→ feat/ai-generated</span>
+      </div>
+    </div>
+    <div class="commit-footer">
+      <button class="cbtn cbtn-sec" onclick="closeCommit()">Cancel</button>
+      <button class="cbtn cbtn-pri" id="commit-go" onclick="doCommit()">Commit &amp; push</button>
+    </div>
+  </div>
+</div>
+</body>
+</html>