@diegonogueiradev_/mcp-graph 1.0.0 → 2.0.1

package/dist/web/dashboard/dist/assets/insights-tab-D7sHV2xV.js

@@ -0,0 +1 @@
+import{r as c,j as e,c as o}from"./index-DrHbgcp5.js";import{S as r}from"./constants-CLJl-f3f.js";function b(){const[a,n]=c.useState(null),[t,m]=c.useState(null),[d,h]=c.useState([]),[x,u]=c.useState(null);return c.useEffect(()=>{async function s(){try{const[l,p,v]=await Promise.all([o.getMetrics().catch(()=>null),o.getBottlenecks().catch(()=>null),o.getRecommendations().catch(()=>({recommendations:[]}))]);n(l),m(p),h(v.recommendations)}catch(l){u(l instanceof Error?l.message:"Failed to load")}}s()},[]),x?e.jsxs("div",{className:"flex items-center justify-center h-full text-[var(--color-danger)]",children:["Failed to load: ",x]}):e.jsxs("div",{className:"p-6 max-w-5xl mx-auto space-y-6 overflow-y-auto h-full",children:[a&&e.jsxs("section",{children:[e.jsx("h3",{className:"text-sm font-semibold mb-3",children:"Metrics"}),e.jsxs("div",{className:"grid grid-cols-4 gap-3 mb-4",children:[e.jsx(i,{value:a.totalTasks,label:"Total Tasks"}),e.jsx(i,{value:`${a.completionRate}%`,label:"Completion"}),e.jsx(i,{value:a.velocity.tasksCompleted,label:"Completed"}),e.jsx(i,{value:a.velocity.avgPointsPerTask??"-",label:"Avg Points"})]}),a.statusDistribution.length>0&&e.jsxs("div",{className:"mb-4",children:[e.jsx("div",{className:"h-3 rounded-full overflow-hidden flex bg-[var(--color-bg-tertiary)]",children:a.statusDistribution.filter(s=>s.count>0).map(s=>e.jsx("div",{className:"h-full",style:{width:`${s.percentage}%`,background:r[s.status]},title:`${s.status}: ${s.count} (${s.percentage}%)`},s.status))}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-1.5",children:a.statusDistribution.filter(s=>s.count>0).map(s=>e.jsxs("span",{className:"flex items-center gap-1 text-xs",children:[e.jsx("span",{className:"w-2 h-2 rounded-full inline-block",style:{background:r[s.status]}}),s.status.replace("_"," ")," (",s.count,")"]},s.status))})]}),a.sprintProgress.length>0&&e.jsxs("div",{children:[e.jsx("h4",{className:"text-xs font-medium text-[var(--color-text-muted)] mb-2",children:"Sprint Progress"}),e.jsx("div",{className:"space-y-1.5",children:a.sprintProgress.map(s=>e.jsxs("div",{className:"flex items-center gap-2 text-xs",children:[e.jsx("span",{className:"w-20 truncate",children:s.sprint}),e.jsx("div",{className:"flex-1 h-2 bg-[var(--color-bg-tertiary)] rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${s.percentage}%`,background:r.done}})}),e.jsxs("span",{className:"text-[var(--color-text-muted)] w-10 text-right",children:[s.done,"/",s.total]})]},s.sprint))})]})]}),t&&e.jsxs("section",{children:[e.jsx("h3",{className:"text-sm font-semibold mb-3",children:"Bottlenecks"}),t.blockedTasks.length===0&&t.missingAcceptanceCriteria.length===0&&t.oversizedTasks.length===0?e.jsx("p",{className:"text-sm text-[var(--color-text-muted)]",children:"No bottlenecks detected."}):e.jsxs("div",{className:"space-y-3",children:[t.blockedTasks.length>0&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-xs font-medium text-[var(--color-text-muted)] mb-1",children:["Blocked Tasks (",t.blockedTasks.length,")"]}),e.jsx("div",{className:"space-y-1",children:t.blockedTasks.slice(0,10).map((s,l)=>e.jsxs("div",{className:"flex items-center gap-2 text-xs px-2 py-1 rounded bg-[var(--color-bg-secondary)]",children:[e.jsx("span",{className:"px-1 py-0.5 rounded text-[9px] font-medium",style:{background:`${r.blocked}20`,color:r.blocked},children:"blocked"}),e.jsx("span",{className:"truncate",children:s.title}),e.jsxs("span",{className:"text-[var(--color-text-muted)] truncate",children:["by: ",s.blockerTitles.join(", ")]})]},l))})]}),t.missingAcceptanceCriteria.length>0&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-xs font-medium text-[var(--color-text-muted)] mb-1",children:["Missing AC (",t.missingAcceptanceCriteria.length,")"]}),e.jsx("ul",{className:"text-xs space-y-0.5 list-disc pl-4 text-[var(--color-text-muted)]",children:t.missingAcceptanceCriteria.slice(0,10).map((s,l)=>e.jsx("li",{children:s.title},l))})]}),t.oversizedTasks.length>0&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-xs font-medium text-[var(--color-text-muted)] mb-1",children:["Oversized Tasks (",t.oversizedTasks.length,")"]}),e.jsx("ul",{className:"text-xs space-y-0.5 list-disc pl-4 text-[var(--color-text-muted)]",children:t.oversizedTasks.map((s,l)=>e.jsxs("li",{children:[s.title," — ",s.estimateMinutes,"min"]},l))})]}),t.criticalPath&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-xs font-medium text-[var(--color-text-muted)] mb-1",children:["Critical Path (",t.criticalPath.length," nodes)"]}),e.jsx("div",{className:"text-xs px-2 py-1 rounded bg-[var(--color-bg-secondary)]",children:t.criticalPath.titles.join(" → ")})]})]})]}),d.length>0&&e.jsxs("section",{children:[e.jsx("h3",{className:"text-sm font-semibold mb-3",children:"Recommendations"}),e.jsx("div",{className:"space-y-2",children:d.map((s,l)=>e.jsxs("div",{className:"px-3 py-2 rounded-lg bg-[var(--color-bg-secondary)] border border-[var(--color-border)]",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-accent)]20 text-[var(--color-accent)] font-medium",children:s.phase}),e.jsx("span",{className:"text-xs font-medium",children:s.skill})]}),e.jsx("p",{className:"text-xs text-[var(--color-text-muted)]",children:s.reason})]},l))})]})]})}function i({value:a,label:n}){return e.jsxs("div",{className:"p-3 rounded-lg bg-[var(--color-bg-secondary)] border border-[var(--color-border)] text-center",children:[e.jsx("div",{className:"text-xl font-bold",children:a}),e.jsx("div",{className:"text-[10px] text-[var(--color-text-muted)] uppercase",children:n})]})}export{b as InsightsTab};

package/dist/web/dashboard/dist/assets/prd-backlog-tab-C_Uq1Qte.js

@@ -0,0 +1 @@
+import{r as u,j as e}from"./index-DrHbgcp5.js";import{u as y,a as w,t as k,b as _,c as C,i as S,W as E,d as M,B as T,C as P,N as B}from"./graph-utils-uGOH4eMw.js";import{S as N}from"./constants-CLJl-f3f.js";const D=u.memo(function({graph:a,onNodeClick:g}){const{groups:v,nextTask:x,nodeMap:f}=u.useMemo(()=>{const l=a.nodes.filter(s=>s.type==="task"||s.type==="subtask"),c=new Map(a.nodes.map(s=>[s.id,s])),i=new Set(a.nodes.filter(s=>s.status==="done").map(s=>s.id)),m=l.filter(s=>s.status!=="backlog"&&s.status!=="ready"||s.blocked?!1:a.edges.filter(o=>o.from===s.id&&o.relationType==="depends_on").every(o=>i.has(o.to)));m.sort((s,t)=>s.priority-t.priority);const r=new Map;for(const s of l){const t=s.parentId||"__root__";r.has(t)||r.set(t,[]),r.get(t).push(s)}for(const s of r.values())s.sort((t,o)=>t.priority-o.priority);return{groups:r,nextTask:m[0]||null,nodeMap:c}},[a]);return a.nodes.filter(l=>l.type==="task"||l.type==="subtask").length===0?e.jsx("div",{className:"p-4 text-center text-[var(--color-text-muted)]",children:"No tasks in backlog."}):e.jsxs("div",{className:"p-2",children:[x&&e.jsxs("div",{className:"mb-3 px-3 py-2 bg-[var(--color-accent)]10 border border-[var(--color-accent)] rounded-lg",children:[e.jsx("span",{className:"text-xs font-medium text-[var(--color-accent)]",children:"Next:"})," ",e.jsx("span",{className:"text-sm font-semibold",children:x.title})]}),Array.from(v.entries()).map(([l,c])=>{const i=l!=="__root__"?f.get(l):null,m=i?i.title:"Ungrouped Tasks",r=c.filter(t=>t.status==="done").length,s=Math.round(r/c.length*100);return e.jsxs("div",{className:"mb-3",children:[e.jsxs("div",{className:"flex items-center justify-between px-2 py-1",children:[e.jsx("h4",{className:"text-xs font-semibold truncate",children:m}),e.jsxs("span",{className:"text-[10px] text-[var(--color-text-muted)]",children:[r,"/",c.length]})]}),e.jsx("div",{className:"h-1 mx-2 mb-1 bg-[var(--color-bg-tertiary)] rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${s}%`,background:N.done}})}),c.map(t=>{const o=(x==null?void 0:x.id)===t.id,p=N[t.status]||"#9e9e9e",d=a.edges.filter(b=>b.from===t.id&&b.relationType==="depends_on").map(b=>{var j;return((j=f.get(b.to))==null?void 0:j.title)||b.to});return e.jsxs("div",{onClick:()=>g(t),className:`mx-1 mb-1 px-2 py-1.5 rounded cursor-pointer hover:bg-[var(--color-bg-tertiary)] transition-colors ${o?"ring-1 ring-[var(--color-accent)]":""}`,children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"text-[9px] px-1 py-0.5 rounded font-medium shrink-0",style:{background:`${p}20`,color:p},children:t.status.replace("_"," ")}),e.jsx("span",{className:"text-xs truncate flex-1",children:t.title}),e.jsxs("span",{className:"text-[10px] text-[var(--color-text-muted)]",children:["P",t.priority]}),t.xpSize&&e.jsx("span",{className:"text-[10px] text-[var(--color-text-muted)]",children:t.xpSize})]}),d.length>0&&e.jsxs("div",{className:"text-[10px] text-[var(--color-text-muted)] mt-0.5 truncate pl-1",children:["Depends on: ",d.join(", ")]})]},t.id)})]},l)})]})}),$={workflowNode:M},L={workflowEdge:E};function O({graph:n}){const[a,g,v]=y([]),[x,f,l]=w([]),[c,i]=u.useState(null);u.useEffect(()=>{const t=k(n.nodes),o=new Set(t.map(d=>d.id)),p=_(n.edges,o),h=C(t,p,"TB");g(h.nodes),f(h.edges)},[n,g,f]);const m=u.useCallback((t,o)=>{i(o.data.sourceNode)},[]),r=u.useCallback(t=>{i(t)},[]),s=u.useMemo(()=>{const t=n.nodes.length,o=n.nodes.filter(d=>d.status==="done").length,p=n.nodes.filter(d=>d.status==="in_progress").length,h=n.nodes.filter(d=>d.status==="blocked").length;return{total:t,done:o,inProgress:p,blocked:h,pctDone:t?Math.round(o/t*100):0}},[n.nodes]);return e.jsxs("div",{className:"flex h-full",children:[e.jsx("div",{className:"flex-1 min-w-0 flex flex-col",children:n.nodes.length>0?e.jsxs(S,{nodes:a,edges:x,onNodesChange:v,onEdgesChange:l,onNodeClick:m,nodeTypes:$,edgeTypes:L,fitView:!0,minZoom:.1,maxZoom:2,proOptions:{hideAttribution:!0},children:[e.jsx(T,{gap:16,size:1}),e.jsx(P,{showInteractive:!1})]}):e.jsx("div",{className:"flex items-center justify-center h-full text-[var(--color-text-muted)]",children:"Import a PRD to see the workflow"})}),e.jsxs("div",{className:"w-96 border-l border-[var(--color-border)] flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)]",children:[e.jsxs("div",{className:"flex justify-between text-sm mb-1",children:[e.jsxs("span",{children:[s.done,"/",s.total," done (",s.pctDone,"%)"]}),e.jsxs("span",{className:"text-[var(--color-text-muted)]",children:[s.inProgress," in progress, ",s.blocked," blocked"]})]}),e.jsxs("div",{className:"h-2 bg-[var(--color-bg-tertiary)] rounded-full overflow-hidden flex",children:[e.jsx("div",{className:"h-full transition-all",style:{width:`${s.pctDone}%`,background:N.done}}),e.jsx("div",{className:"h-full transition-all",style:{width:`${s.total?Math.round(s.inProgress/s.total*100):0}%`,background:N.in_progress}})]})]}),e.jsx("div",{className:"flex-1 overflow-y-auto",children:e.jsx(D,{graph:n,onNodeClick:r})})]}),c&&e.jsx(B,{node:c,onClose:()=>i(null)})]})}export{O as PrdBacklogTab};

package/dist/web/dashboard/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mcp-graph Workstation</title>
+    <script type="module" crossorigin src="/assets/index-DrHbgcp5.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DM_LGeRr.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/web/public/css/styles.css

@@ -0,0 +1,646 @@
+/* ── Reset & Variables ──────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #f8f9fa;
+  --bg-card: #ffffff;
+  --bg-sidebar: #f1f3f5;
+  --text: #212529;
+  --text-muted: #6c757d;
+  --border: #dee2e6;
+  --accent: #4263eb;
+  --accent-hover: #3b5bdb;
+  --success: #4caf50;
+  --warning: #ff9800;
+  --danger: #f44336;
+  --info: #2196f3;
+  --radius: 6px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+
+body.dark {
+  --bg: #1a1b1e;
+  --bg-card: #25262b;
+  --bg-sidebar: #2c2e33;
+  --text: #c1c2c5;
+  --text-muted: #909296;
+  --border: #373a40;
+  --shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Header ────────────────────────────────── */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.logo {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--accent);
+}
+.logo-sub {
+  font-weight: 400;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.stats-bar {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-family: var(--mono);
+}
+
+/* ── Buttons ───────────────────────────────── */
+.btn {
+  padding: 0.4rem 0.85rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all 0.15s;
+}
+.btn:hover { border-color: var(--accent); color: var(--accent); }
+.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
+.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-ghost { border: none; background: none; }
+.btn-ghost:hover { color: var(--accent); }
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: var(--text-muted);
+  padding: 0.2rem;
+}
+.btn-icon:hover { color: var(--text); }
+
+/* ── Tabs ──────────────────────────────────── */
+.tabs {
+  display: flex;
+  gap: 0;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  padding: 0 1.5rem;
+}
+
+.tab {
+  padding: 0.65rem 1.25rem;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+}
+.tab:hover:not([disabled]) { color: var(--text); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab[disabled] { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Main ──────────────────────────────────── */
+.main { flex: 1; padding: 1rem 1.5rem; }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* ── Graph Layout ──────────────────────────── */
+.graph-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 1rem;
+  min-height: 400px;
+}
+
+.graph-layout:has(.detail-panel:not(.hidden)) {
+  grid-template-columns: 200px 1fr 300px;
+}
+
+/* ── Filters Panel ─────────────────────────── */
+.filters-panel {
+  background: var(--bg-sidebar);
+  border-radius: var(--radius);
+  padding: 1rem;
+  border: 1px solid var(--border);
+}
+.filters-panel h3 { font-size: 0.85rem; margin-bottom: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+
+.filter-group { margin-bottom: 0.75rem; }
+.filter-group > label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-muted); }
+
+.filter-check {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  padding: 0.15rem 0;
+  cursor: pointer;
+}
+.filter-check input { width: 14px; height: 14px; }
+
+.filters-panel select {
+  width: 100%;
+  padding: 0.3rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 0.78rem;
+}
+
+.filters-panel hr { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }
+.filters-panel .btn { width: 100%; margin-bottom: 0.4rem; }
+
+/* ── View Toggle ──────────────────────────── */
+.view-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.5rem;
+}
+.view-btn {
+  padding: 0.25rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--bg-card);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+.view-btn:hover { border-color: var(--accent); color: var(--accent); }
+.view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.zoom-controls { margin-left: auto; display: flex; gap: 2px; }
+.zoom-controls .btn-icon { font-size: 1rem; padding: 0.15rem 0.4rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); }
+.zoom-controls .btn-icon:hover { border-color: var(--accent); color: var(--accent); }
+
+/* ── Graph Container ───────────────────────── */
+.graph-main { overflow: hidden; display: flex; flex-direction: column; }
+.force-graph-container {
+  width: 100%;
+  height: 500px;
+  position: relative;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.force-graph-container canvas { border-radius: var(--radius); }
+.force-graph-container.hidden { display: none; }
+.mermaid-container {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+  min-height: 350px;
+  overflow: auto;
+}
+.mermaid-container.hidden { display: none; }
+.mermaid-container svg { max-width: 100%; height: auto; }
+
+/* ── Graph Tooltip ────────────────────────── */
+.graph-tooltip {
+  position: fixed;
+  z-index: 9999;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.6rem 0.8rem;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+  pointer-events: none;
+  max-width: 280px;
+  font-size: 0.78rem;
+}
+.tooltip-title { font-weight: 600; margin-bottom: 0.3rem; font-size: 0.82rem; }
+.tooltip-row { margin-bottom: 0.2rem; display: flex; gap: 0.3rem; align-items: center; }
+.tooltip-desc { color: var(--text-muted); font-size: 0.72rem; margin-top: 0.3rem; line-height: 1.4; }
+
+/* ── Force-specific filters ──────────────── */
+.mermaid-filter.hidden { display: none; }
+.force-filter.hidden { display: none; }
+.depth-slider {
+  width: 100%;
+  margin: 0.3rem 0;
+  accent-color: var(--accent);
+}
+.depth-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.65rem;
+  color: var(--text-muted);
+}
+
+/* ── Selected table row ──────────────────── */
+.node-row.selected-row { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); }
+
+/* ── Detail Panel ──────────────────────────── */
+.detail-panel {
+  background: var(--bg-sidebar);
+  border-radius: var(--radius);
+  padding: 1rem;
+  border: 1px solid var(--border);
+  overflow-y: auto;
+  max-height: 70vh;
+}
+.detail-panel.hidden { display: none; }
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 0.75rem;
+}
+.detail-header h3 { font-size: 0.95rem; line-height: 1.3; }
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.8rem;
+}
+.detail-label { color: var(--text-muted); font-weight: 500; }
+.detail-value { font-family: var(--mono); font-size: 0.75rem; }
+.detail-section { padding: 0.5rem 0; }
+.detail-section h4 { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
+.detail-section p { font-size: 0.8rem; line-height: 1.5; }
+.detail-section ul { padding-left: 1.2rem; font-size: 0.8rem; }
+.detail-section li { margin-bottom: 0.2rem; }
+
+/* ── Badges ────────────────────────────────── */
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.badge-type { background: var(--bg); border: 1px solid var(--border); }
+.tag {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 3px;
+  font-size: 0.65rem;
+}
+
+/* Status badges */
+.status-backlog { background: #9e9e9e; color: #fff; }
+.status-ready { background: #ff9800; color: #fff; }
+.status-in_progress { background: #2196f3; color: #fff; }
+.status-blocked { background: #f44336; color: #fff; }
+.status-done { background: #4caf50; color: #fff; }
+
+/* Status dots */
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #9e9e9e;
+}
+.status-dot.status-ready { background: #ff9800; }
+.status-dot.status-in_progress { background: #2196f3; }
+.status-dot.status-blocked { background: #f44336; }
+.status-dot.status-done { background: #4caf50; }
+
+/* ── Node Table ────────────────────────────── */
+.node-table-section { margin-top: 1.5rem; }
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.input-search {
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 0.8rem;
+  width: 280px;
+}
+.table-wrapper { overflow-x: auto; }
+.node-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+}
+.node-table th {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid var(--border);
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  user-select: none;
+}
+.node-table td {
+  padding: 0.45rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.node-row { cursor: pointer; transition: background 0.1s; }
+.node-row:hover { background: var(--bg-sidebar); }
+.cell-center { text-align: center; }
+.cell-title { font-weight: 500; }
+.empty-cell { text-align: center; color: var(--text-muted); padding: 2rem !important; }
+
+/* ── PRD & Backlog Layout ──────────────────── */
+.prd-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  min-height: 400px;
+}
+
+.prd-source, .backlog-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}
+.prd-source h3, .backlog-header h3 {
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-muted);
+}
+.prd-text {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.backlog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+/* ── Next Task Badge ───────────────────────── */
+.next-task-badge {
+  font-size: 0.78rem;
+  padding: 0.3rem 0.6rem;
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--radius);
+  display: none;
+}
+.next-task-badge.visible { display: inline-block; }
+.next-label { opacity: 0.8; }
+
+/* ── Progress Bar ──────────────────────────── */
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  margin-bottom: 0.3rem;
+  color: var(--text-muted);
+}
+.progress-bar {
+  display: flex;
+  height: 8px;
+  background: var(--bg);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+.progress-fill { height: 100%; transition: width 0.3s; }
+.progress-done { background: var(--success); }
+.progress-wip { background: var(--info); }
+
+/* ── Backlog Items ─────────────────────────── */
+.backlog-group { margin-bottom: 1rem; }
+.backlog-group-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.4rem;
+}
+.backlog-item {
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 0.35rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  background: var(--bg-card);
+}
+.backlog-item:hover { border-color: var(--accent); }
+.backlog-item.next-task { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
+.backlog-item-header { display: flex; align-items: center; gap: 0.5rem; }
+.backlog-title { flex: 1; font-size: 0.82rem; font-weight: 500; }
+.backlog-priority { font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono); }
+.backlog-size { font-size: 0.7rem; padding: 0.1rem 0.35rem; background: var(--bg-sidebar); border-radius: 3px; font-family: var(--mono); }
+.backlog-deps { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; padding-left: 0.5rem; }
+.backlog-ac { font-size: 0.72rem; color: var(--info); margin-top: 0.15rem; padding-left: 0.5rem; }
+
+/* ── Empty & Error States ──────────────────── */
+.empty-state, .error-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+.empty-state.hidden { display: none; }
+.error-state { color: var(--danger); }
+.error-state pre { font-size: 0.7rem; max-width: 100%; overflow: auto; margin-top: 0.5rem; }
+
+/* ── Modal ─────────────────────────────────── */
+.modal {
+  border: none;
+  border-radius: var(--radius);
+  padding: 0;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  background: var(--bg-card);
+  color: var(--text);
+}
+.modal::backdrop { background: rgba(0,0,0,0.5); }
+.modal-content { padding: 1.5rem; }
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.modal-header h3 { font-size: 1rem; }
+.modal-body { margin-bottom: 1rem; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
+
+/* ── Drop Zone ─────────────────────────────── */
+.drop-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-bottom: 0.75rem;
+}
+.drop-zone:hover, .drop-zone.drag-over {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
+}
+.drop-zone p { font-size: 0.85rem; line-height: 1.6; }
+
+.import-options { margin-bottom: 0.5rem; font-size: 0.82rem; }
+.import-options label { cursor: pointer; }
+.import-status { font-size: 0.82rem; }
+.import-status .success { color: var(--success); }
+.import-status .error { color: var(--danger); }
+.import-status .info { color: var(--info); }
+
+/* ── Code Graph Tab ─────────────────────────── */
+.iframe-container { display: flex; flex-direction: column; height: 70vh; }
+.iframe-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
+.gitnexus-iframe { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); width: 100%; }
+.fallback-panel { max-width: 800px; }
+.fallback-notice { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
+.fallback-notice pre { background: var(--bg-sidebar); padding: 0.5rem 0.75rem; border-radius: var(--radius); margin-top: 0.5rem; font-size: 0.8rem; }
+.section-title { font-size: 0.9rem; color: var(--text-muted); margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
+.subsection-title { font-size: 0.82rem; color: var(--text-muted); margin: 0.75rem 0 0.35rem; }
+.memory-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; }
+.memory-card h4 { font-size: 0.85rem; margin-bottom: 0.5rem; }
+.memory-content { font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; white-space: pre-wrap; max-height: 300px; overflow-y: auto; background: var(--bg-sidebar); padding: 0.75rem; border-radius: var(--radius); }
+
+/* ── Knowledge Tab ─────────────────────────── */
+.knowledge-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; }
+.knowledge-section { margin-bottom: 1.5rem; }
+.memory-accordion { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; }
+.memory-accordion summary { padding: 0.6rem 0.75rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; font-weight: 500; }
+.memory-accordion summary:hover { background: var(--bg-sidebar); }
+.memory-name { flex: 1; }
+.memory-size { font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono); }
+.memory-accordion .memory-content { margin: 0; border-radius: 0 0 var(--radius) var(--radius); }
+.status-grid { display: flex; flex-direction: column; gap: 0.5rem; }
+.status-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
+.status-card-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
+.status-card-url { font-size: 0.72rem; margin-top: 0.25rem; }
+.status-card-detail { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
+
+/* ── Insights Tab ──────────────────────────── */
+.insights-layout { max-width: 900px; }
+.insights-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
+.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
+.metric-card { text-align: center; padding: 0.75rem; background: var(--bg-sidebar); border-radius: var(--radius); }
+.metric-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-family: var(--mono); }
+.metric-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; text-transform: uppercase; }
+.status-chart { margin-bottom: 1rem; }
+.chart-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bg); }
+.chart-segment { transition: width 0.3s; }
+.chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--text-muted); }
+.legend-item { display: flex; align-items: center; gap: 0.25rem; }
+.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
+.sprint-list { margin-top: 0.75rem; }
+.sprint-list h4 { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
+.sprint-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.78rem; }
+.sprint-name { width: 100px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sprint-bar-container { flex: 1; }
+.sprint-stat { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); width: 45px; text-align: right; }
+.bottleneck-list { display: flex; flex-direction: column; gap: 0.35rem; }
+.bottleneck-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
+.bottleneck-simple-list { padding-left: 1.2rem; font-size: 0.8rem; }
+.bottleneck-simple-list li { margin-bottom: 0.2rem; }
+.critical-path { font-family: var(--mono); font-size: 0.75rem; padding: 0.5rem; background: var(--bg-sidebar); border-radius: var(--radius); overflow-x: auto; white-space: nowrap; }
+.recommendation-card { padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.4rem; }
+.rec-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
+.rec-reason { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
+.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
+.skill-card { background: var(--bg-sidebar); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
+.skill-card strong { font-size: 0.82rem; display: block; margin-bottom: 0.2rem; }
+.skill-card p { font-size: 0.72rem; margin: 0.2rem 0 0; }
+.text-muted { color: var(--text-muted); }
+
+/* ── Capture Form ─────────────────────────── */
+.capture-status { padding: 0.5rem; border-radius: var(--radius); margin: 0.5rem 0; font-size: 0.85rem; }
+.capture-status-info { background: rgba(33,150,243,0.1); color: var(--info); }
+.capture-status-success { background: rgba(76,175,80,0.1); color: var(--success); }
+.capture-status-error { background: rgba(244,67,54,0.1); color: var(--danger); }
+.capture-preview { margin-top: 1rem; }
+.capture-preview h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
+.capture-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+.capture-meta p { margin: 0.15rem 0; }
+.capture-text { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; font-size: 0.75rem; max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
+.capture-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
+
+/* ── Docs Cache ───────────────────────────── */
+.docs-cache-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; margin-bottom: 0.4rem; }
+.docs-cache-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
+.docs-cache-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; margin-top: 0.25rem; }
+.freshness-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 10px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
+.freshness-fresh { background: var(--success); color: #fff; }
+.freshness-aging { background: var(--warning); color: #fff; }
+.freshness-stale { background: var(--danger); color: #fff; }
+.docs-add-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+.docs-add-form .input-search { flex: 1; }
+
+/* ── Context Preview ─────────────────────── */
+.context-preview-form { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
+.context-preview-form .input-search { flex: 1; }
+.context-result-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; margin-top: 0.5rem; }
+.context-metrics { display: flex; gap: 1rem; font-size: 0.78rem; margin-bottom: 0.5rem; color: var(--text-muted); }
+.context-metrics strong { color: var(--accent); }
+
+/* ── Critical Path & Backlog Enhancements ── */
+.critical-path-item { border-left: 3px solid var(--danger); }
+.badge-critical { background: var(--danger); color: #fff; font-size: 0.6rem; }
+.group-progress { font-weight: 400; font-size: 0.72rem; color: var(--text-muted); font-family: var(--mono); margin-left: 0.5rem; }
+.progress-bar-mini { height: 4px; margin-bottom: 0.5rem; }
+.backlog-source { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; padding-left: 0.5rem; cursor: pointer; }
+.backlog-source summary { font-size: 0.72rem; }
+.source-meta { font-family: var(--mono); font-size: 0.68rem; padding: 0.25rem 0; }
+
+/* ── Ecosystem Diagram ───────────────────── */
+.ecosystem-diagram { min-height: 200px; }
+.ecosystem-diagram pre { font-size: 0.75rem; white-space: pre-wrap; }
+
+/* ── Responsive ────────────────────────────── */
+@media (max-width: 768px) {
+  .graph-layout { grid-template-columns: 1fr; }
+  .filters-panel { order: -1; }
+  .prd-layout { grid-template-columns: 1fr; }
+  .header { padding: 0.5rem 1rem; }
+  .main { padding: 0.75rem; }
+  .tabs { padding: 0 0.75rem; overflow-x: auto; }
+}