design: premium UI polish + agent reliability fixes

UI:
- Atmospheric radial glow behind diagram canvas (centered, works fullscreen)
- Directional gradient arrows in diagrams (bright at source, fades to target)
- Diagram now centers in viewport on initial render
- Legend readability bumped (12px, text-2 color, larger dots)
- Repo list: GitHub mark icon + owner/repo split (owner dimmed, repo bold)
- Landing headline 70px, logo 72px, subtitle 15px restored closer to original
- Source card hover color fixed (warm amber → cool dark blue)
- Avatar: compass for RAG, ✦ for agent (keyed on msg.mode, not msg.iterations)
- Suggestion cards now generate proper natural language questions
- focusFiles clears on new chat / repo switch (no stale breadcrumb bar)
- Try-these chips now show GitHub mark icon
- onboarding steps use vertical suggestion-btn style

Backend:
- agent read_file sources now store actual file text (was always empty string)
- Retry once on transient MCP TaskGroup connection errors (300ms backoff)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/services/agent.py

@@ -734,10 +734,16 @@ class AgentService:
 
                 # Execute all new calls concurrently — MCP calls are async HTTP round trips
                 async def _run_tool(tc: dict) -> str:
-                    try:
-                        return await self.mcp.call_tool(tc["name"], tc["input"])
-                    except Exception as e:
-                        return f"Tool error: {e}"
+                    # Retry once on transient MCP connection failures (TaskGroup /
+                    # HTTP errors from the SDK's internal connection management).
+                    for attempt in range(2):
+                        try:
+                            return await self.mcp.call_tool(tc["name"], tc["input"])
+                        except Exception as e:
+                            if attempt == 0 and "TaskGroup" in str(e):
+                                await asyncio.sleep(0.3)
+                                continue
+                            return f"Tool error: {e}"
 
                 parallel_results = await asyncio.gather(*[_run_tool(tc) for tc in new_calls])
 
@@ -768,7 +774,7 @@ class AgentService:
                                 "repo": repo, "filepath": filepath, "language": lang,
                                 "chunk_type": "file", "name": filepath.rsplit("/", 1)[-1],
                                 "start_line": 1, "end_line": result.count("\n"),
-                                "score": 1.0, "text": "",
+                                "score": 1.0, "text": result,
                             }
 
                     display = result[:500] + "…" if len(result) > 500 else result

ui/src/App.jsx

@@ -158,6 +158,7 @@ export default function App() {
     setCurrentSessionId(null);
     setMessages([]);
     setLastSources([]);
+    setFocusFiles(null);
     setSessions(readSessions(activeRepo));
     // Auto-navigate to Explore view when a specific repo is selected.
     // Reset to chat for "All repos" or landing page — diagram needs a single repo.
@@ -203,6 +204,7 @@ export default function App() {
       sessionIdRef.current = null;
       setCurrentSessionId(null);
       setMessages([]);
+      setFocusFiles(null);
     }
   }
 
@@ -618,6 +620,7 @@ export default function App() {
     sessionIdRef.current = null;
     setCurrentSessionId(null);
     setMessages([]);
+    setFocusFiles(null);
     setStreaming(false);
   }
 
@@ -767,7 +770,7 @@ export default function App() {
                   // No repo selected yet (landing), or All repos selected but nothing indexed
                   <div className="onboarding-steps">
                     <div className="onboarding-header">
-                      <svg width="60" height="60" viewBox="0 0 24 24" fill="none"
+                      <svg width="72" height="72" viewBox="0 0 24 24" fill="none"
                         style={{ marginBottom: 12, filter: "drop-shadow(0 0 8px rgba(91,143,249,0.70))" }}>
                         {/* N — pulses bright */}
                         <path className="compass-north" d="M12 2 L14.5 7 L12 12 L9.5 7 Z" fill="var(--accent)"/>
@@ -783,19 +786,20 @@ export default function App() {
                       <div className="onboarding-headline">Map <em>any</em> codebase</div>
                       <div className="onboarding-sub">Index any public repo and ask questions about the code — architecture, data flow, classes, functions, and more.</div>
                     </div>
-                    <div className="onboarding-grid">
+                    <div className="suggestions" style={{ marginBottom: 0 }}>
                       {[
-                        { icon: "github",  num: 1, title: "Paste a GitHub URL", body: "Index any public repo — every function and class." },
-                        { icon: "chat",    num: 2, title: "Ask about the code",  body: "\"How does the main loop work?\" — cited answers." },
-                        { icon: "explore", num: 3, title: "Explore the structure", body: "Concept map of key components and how they connect." },
-                      ].map(({ icon, num, title, body }, i) => (
-                        <div key={num} className="onboarding-step active"
-                          style={{ animationDelay: `${80 + i * 90}ms` }}>
-                          <span className="suggestion-icon" style={{ marginBottom: 4 }}>{ICONS[icon]}</span>
-                          <div>
-                            <strong>{title}</strong>
-                            <p>{body}</p>
-                          </div>
+                        { icon: "github",  title: "Paste a GitHub URL",    body: "Index any public repo — every function and class." },
+                        { icon: "chat",    title: "Ask about the code",    body: "\"How does the main loop work?\" — finds and explains it." },
+                        { icon: "explore", title: "Explore the structure", body: "Concept map of key components and how they connect." },
+                      ].map(({ icon, title, body }, i) => (
+                        <div key={title} className="suggestion-btn"
+                          style={{ animationDelay: `${80 + i * 90}ms`, cursor: "default" }}>
+                          <span className="suggestion-icon">{ICONS[icon]}</span>
+                          <span className="suggestion-content">
+                            <span className="suggestion-title">{title}</span>
+                            <span className="suggestion-body">{body}</span>
+                          </span>
+                          <svg className="suggestion-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.2 }}><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                         </div>
                       ))}
                     </div>
@@ -813,13 +817,12 @@ export default function App() {
                         </div>
                         <div className="suggestions">
                           {[
-                            { icon: "architecture", title: "Map the architecture",    body: `Walk ${activeRepo.split("/")[1]} from entry point to output` },
-                            { icon: "functions",    title: "Key functions",           body: "Most important functions and how they connect" },
-                            { icon: "diagram",      title: "Generate a diagram",      body: "Visual map of the main components" },
-                            { icon: "shield",       title: "Error handling",          body: "How edge cases are managed across the codebase" },
-                            { icon: "flow",         title: "Data flow",               body: "How data moves from input to final result" },
-                          ].map(({ icon, title, body }, i) => {
-                            const q = `${title}: ${body}`;
+                            { icon: "architecture", title: "Map the architecture",    body: `Walk ${activeRepo.split("/")[1]} from entry point to output`,  q: `How is ${activeRepo.split("/")[1]} structured? Trace the main execution path from the entry point all the way to the output.` },
+                            { icon: "functions",    title: "Key functions",           body: "Most important functions and how they connect",                  q: `What are the most important functions in ${activeRepo.split("/")[1]} and how do they call each other?` },
+                            { icon: "diagram",      title: "Generate a diagram",      body: "Visual map of the main components",                             q: `Generate a diagram of the main components in ${activeRepo.split("/")[1]} and how they relate to each other.` },
+                            { icon: "shield",       title: "Error handling",          body: "How edge cases are managed across the codebase",                q: `How does ${activeRepo.split("/")[1]} handle errors and edge cases?` },
+                            { icon: "flow",         title: "Data flow",               body: "How data moves from input to final result",                     q: `How does data flow through ${activeRepo.split("/")[1]} from input to final result?` },
+                          ].map(({ icon, title, body, q }, i) => {
                             return (
                               <button key={title} className="suggestion-btn"
                                 style={{ animationDelay: `${80 + i * 80}ms` }}
@@ -842,13 +845,12 @@ export default function App() {
                       <>
                         <div className="suggestions">
                           {[
-                            { icon: "architecture", title: "Overall architecture",  body: `How is ${activeRepo.split("/")[1]} structured?` },
-                            { icon: "entry",        title: "Entry points",          body: "Main entry points and how the code flows" },
-                            { icon: "classes",      title: "Key classes",           body: "What each major class does" },
-                            { icon: "flow",         title: "Data processing",       body: "How data is transformed through the system" },
-                            { icon: "package",      title: "Dependencies",          body: "External libraries and how they're used" },
-                          ].map(({ icon, title, body }, i) => {
-                            const q = `${title}: ${body}`;
+                            { icon: "architecture", title: "Overall architecture",  body: `How is ${activeRepo.split("/")[1]} structured?`,    q: `How is ${activeRepo.split("/")[1]} structured overall? What are the main components and how do they fit together?` },
+                            { icon: "entry",        title: "Entry points",          body: "Main entry points and how the code flows",           q: `What are the main entry points of ${activeRepo.split("/")[1]} and how does execution flow through them?` },
+                            { icon: "classes",      title: "Key classes",           body: "What each major class does",                         q: `What are the key classes in ${activeRepo.split("/")[1]} and what is each one responsible for?` },
+                            { icon: "flow",         title: "Data processing",       body: "How data is transformed through the system",         q: `How is data transformed and processed as it flows through ${activeRepo.split("/")[1]}?` },
+                            { icon: "package",      title: "Dependencies",          body: "External libraries and how they're used",            q: `What external libraries does ${activeRepo.split("/")[1]} depend on and how does it use them?` },
+                          ].map(({ icon, title, body, q }, i) => {
                             return (
                               <button key={title} className="suggestion-btn"
                                 style={{ animationDelay: `${80 + i * 80}ms` }}

ui/src/components/GraphDiagram.jsx

@@ -263,11 +263,22 @@ export default function GraphDiagram({ data, onNodeSelect, onEdgeSelect, onAskAb
 
   const wrapRef  = useRef(null);
 
-  // Reset view and any manual node positions when the diagram data changes
+  // Center the diagram in the viewport whenever layout changes.
+  // We read the wrapper's actual rendered dimensions (not CSS values) via
+  // getBoundingClientRect so the offset is always pixel-perfect.
   useEffect(() => {
-    setXform({ x: 0, y: 0, scale: 0.85 });
     setNodePos({});
-  }, [data]);
+    if (!wrapRef.current || !layoutNodes.length) {
+      setXform({ x: 0, y: 0, scale: 0.85 });
+      return;
+    }
+    const { width, height } = wrapRef.current.getBoundingClientRect();
+    const scale = 0.85;
+    // Offset so the scaled canvas sits in the centre of the wrapper
+    const cx = (width  - canvasW * scale) / 2;
+    const cy = (height - canvasH * scale) / 2;
+    setXform({ x: cx, y: Math.max(cy, 24), scale });
+  }, [layoutNodes]); // layoutNodes recomputes whenever data changes
 
   // Non-passive wheel zoom — passive: false required to call preventDefault()
   useEffect(() => {
@@ -439,6 +450,23 @@ export default function GraphDiagram({ data, onNodeSelect, onEdgeSelect, onAskAb
               <marker id="gd-arrow-hi" markerWidth="7" markerHeight="5" refX="7" refY="2.5" orient="auto">
                 <polygon points="0 0, 7 2.5, 0 5" fill="#7DABFF" />
               </marker>
+              {/* Per-edge directional gradients — bright at source, fades toward target.
+                  gradientUnits="userSpaceOnUse" maps x1/y1/x2/y2 to canvas coordinates
+                  so the gradient always aligns with the actual arrow path. */}
+              {layoutEdges.map((edge, i) => {
+                const from = getPosFor(edge.source);
+                const to   = getPosFor(edge.target);
+                if (!from || !to) return null;
+                return (
+                  <linearGradient key={`grad-${i}`} id={`edge-grad-${i}`}
+                    gradientUnits="userSpaceOnUse"
+                    x1={from.x + CARD_W} y1={from.y + CARD_H / 2}
+                    x2={to.x}            y2={to.y   + CARD_H / 2}>
+                    <stop offset="0%"   stopColor="#7DABFF" stopOpacity="0.55" />
+                    <stop offset="100%" stopColor="#5B8FF9" stopOpacity="0.08" />
+                  </linearGradient>
+                );
+              })}
             </defs>
 
             {layoutEdges.map((edge, i) => {
@@ -477,7 +505,7 @@ export default function GraphDiagram({ data, onNodeSelect, onEdgeSelect, onAskAb
                   <path
                     d={d}
                     fill="none"
-                    stroke={isHi ? "#7DABFF" : "rgba(91,143,249,0.22)"}
+                    stroke={isHi ? "#7DABFF" : `url(#edge-grad-${i})`}
                     strokeWidth={isHi ? 2 : 1.5}
                     strokeDasharray={edge.label === "uses" ? "5 3" : undefined}
                     markerEnd={isHi ? "url(#gd-arrow-hi)" : "url(#gd-arrow)"}

ui/src/components/Message.jsx

@@ -11,6 +11,7 @@ import SourceCard from "./SourceCard";
 // Lazy-load MermaidBlock — deferred so mermaid.js doesn't bloat the initial bundle.
 const MermaidBlock = lazy(() => import("./MermaidBlock"));
 
+
 // ReactMarkdown renders fenced code blocks as <pre><code>...</code></pre>.
 // If we override only `code`, ReactMarkdown wraps the whole thing in a <p>,
 // giving <p><pre>...</pre></p> — invalid HTML (pre can't be inside p).
@@ -386,12 +387,16 @@ const Message = forwardRef(function Message({ msg, onDiagramThis, onRetry, showR
               This matches the ✦ badge on agent sessions in the sidebar,
               making the visual language consistent: ✦ = agent mode. */}
           <div className="message-avatar assistant" aria-hidden="true">
-            {msg.iterations
-              ? <span style={{ fontSize: 13, lineHeight: 1, color: "white", opacity: 0.9 }}>✦</span>
-              : <svg width="14" height="14" viewBox="0 0 18 18" fill="none">
-                  <path d="M5.5 5L2 9l3.5 4" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" strokeOpacity="0.95"/>
-                  <path d="M12.5 5L16 9l-3.5 4" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" strokeOpacity="0.95"/>
-                  <circle cx="9" cy="9" r="1.2" fill="white" fillOpacity="0.7"/>
+            {msg.mode === "agent"
+              ? /* Agent mode — ✦ sparkle signals autonomous reasoning / ReAct loop */
+                <span style={{ fontSize: 14, lineHeight: 1, color: "white", opacity: 0.9 }}>✦</span>
+              : /* RAG mode — compass brand mark, signals "Cartographer navigating the code" */
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                  <path d="M12 2 L14.5 7 L12 12 L9.5 7 Z" fill="white" opacity="0.95"/>
+                  <path d="M12 22 L13.5 17 L12 12 L10.5 17 Z" fill="white" opacity="0.45"/>
+                  <path d="M22 12 L17 10.5 L12 12 L17 13.5 Z" fill="white" opacity="0.45"/>
+                  <path d="M2 12 L7 10.5 L12 12 L7 13.5 Z" fill="white" opacity="0.45"/>
+                  <circle cx="12" cy="12" r="1.5" fill="white"/>
                 </svg>
             }
           </div>

ui/src/components/Sidebar.jsx

@@ -334,7 +334,7 @@ export default function Sidebar({ repos, reposLoading, activeRepo, onSelectRepo,
                 title={label}
               >
                 <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.6, flexShrink: 0 }}>
-                  <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Z"/>
+                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                 </svg>
                 {slug.split("/")[1]}
               </button>
@@ -461,7 +461,14 @@ export default function Sidebar({ repos, reposLoading, activeRepo, onSelectRepo,
                   onClick={() => onSelectRepo(activeRepo === r.slug ? null : r.slug)}
                 >
                   <div className="repo-item-main">
-                    <span className="repo-slug">{r.slug}</span>
+                    {/* GitHub mark — reinforces these are GitHub repos without taking space */}
+                    <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.3, flexShrink: 0 }}>
+                      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+                    </svg>
+                    {/* Split slug: owner dimmed + repo name prominent — scanability trick from Linear */}
+                    <span className="repo-slug">
+                      <span className="repo-owner">{r.slug.split("/")[0]}/</span>{r.slug.split("/")[1]}
+                    </span>
                     <div className="repo-item-meta">
                       {/* Staleness indicator — shown when index is > 3 days old */}
                       {staleness && !justDone && (

ui/src/components/SourceCard.jsx

@@ -131,16 +131,27 @@ export default function SourceCard({ source, index, showRepo = false }) {
 
       {open && (
         <div className="source-code">
-          <SyntaxHighlighter
-            language={lang}
-            style={oneDark}
-            customStyle={{ fontSize: 12, margin: 0, background: '#06060F', borderRadius: 0 }}
-            lineNumberStyle={{ color: 'rgba(255,255,255,0.18)', fontSize: 11, minWidth: 36, paddingRight: 12 }}
-            showLineNumbers
-            startingLineNumber={source.start_line}  /* start_line = class range when expanded */
-          >
-            {source.text}
-          </SyntaxHighlighter>
+          {source.text ? (
+            <SyntaxHighlighter
+              language={lang}
+              style={oneDark}
+              customStyle={{ fontSize: 12, margin: 0, background: '#06060F', borderRadius: 0 }}
+              lineNumberStyle={{ color: 'rgba(255,255,255,0.18)', fontSize: 11, minWidth: 36, paddingRight: 12 }}
+              showLineNumbers
+              startingLineNumber={source.start_line}
+            >
+              {source.text}
+            </SyntaxHighlighter>
+          ) : (
+            <div style={{ padding: "10px 14px", fontSize: 12, color: "var(--muted)", fontFamily: "var(--mono)" }}>
+              Code preview not stored —{" "}
+              <a href={githubUrl} target="_blank" rel="noopener noreferrer"
+                style={{ color: "var(--accent-soft)", textDecoration: "none" }}
+                onClick={e => e.stopPropagation()}>
+                open on GitHub ↗
+              </a>
+            </div>
+          )}
         </div>
       )}
     </div>

ui/src/index.css

@@ -265,21 +265,14 @@ textarea:focus-visible {
   align-items: center;
   justify-content: center;
   box-shadow:
-    0 0 0 1px rgba(91, 143, 249, 0.30),
-    0 4px 16px rgba(91, 143, 249, 0.18),
-    inset 0 1px 0 rgba(91, 143, 249, 0.12);
+    0 0 0 1px rgba(91, 143, 249, 0.22),
+    0 2px 8px rgba(91, 143, 249, 0.10);
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
 }
 
-.sidebar-brand-icon::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
-  border-radius: inherit;
-}
+/* sidebar-brand-icon::after removed — was causing white glare on compass edges */
 
 /* Superscript label — "GITHUB RAG" small caps above the serif title */
 .sidebar-brand-tag {
@@ -477,7 +470,7 @@ textarea:focus-visible {
 .repo-item {
   display: flex;
   align-items: center;
-  padding: 7px 10px;
+  padding: 6px 10px;
   border-radius: var(--radius);
   cursor: pointer;
   /* 2px left accent — cleaner, less dominant */
@@ -546,6 +539,12 @@ textarea:focus-visible {
   letter-spacing: -0.01em;
 }
 
+/* owner/ prefix — dimmed so the eye jumps straight to the repo name */
+.repo-owner {
+  color: var(--muted);
+  font-weight: 400;
+}
+
 .repo-count {
   font-size: 10px;
   color: rgba(200, 210, 240, 0.55);
@@ -579,18 +578,19 @@ textarea:focus-visible {
 .mode-pills {
   display: inline-flex;
   gap: 2px;
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 9px;
-  padding: 2px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--radius-md);
+  padding: 3px;
   width: fit-content;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.30);
 }
 
 .pill {
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: rgba(200, 210, 240, 0.50);
+  background: none;
+  border: none;
+  border-radius: calc(var(--radius-md) - 3px);
+  color: var(--text-2);
   cursor: pointer;
   font-family: var(--sans);
   font-size: 11.5px;
@@ -607,13 +607,11 @@ textarea:focus-visible {
 }
 
 .pill.active {
-  background: linear-gradient(160deg, #4A7FE8 0%, #5B8FF9 60%, #7DABFF 100%);
-  border-color: rgba(200, 220, 255, 0.18);
-  color: #fff;
+  background: rgba(255,255,255,0.10);
+  border: none;
+  color: var(--text);
   font-weight: 600;
-  box-shadow:
-    0 2px 10px rgba(91, 143, 249, 0.40),
-    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -975,7 +973,7 @@ textarea:focus-visible {
 
 .source-item:hover {
   border-color: var(--accent-border);
-  background: rgba(40, 35, 29, 0.98);
+  background: rgba(15, 18, 35, 0.98);
   box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(91, 143, 249,0.08);
 }
 
@@ -1394,7 +1392,7 @@ textarea:focus-visible {
 }
 
 .onboarding-headline {
-  font-size: 50px;
+  font-size: 70px;
   font-weight: 300;
   font-family: "Anthropic Serif", Georgia, serif;
   letter-spacing: -0.040em;
@@ -1415,7 +1413,7 @@ textarea:focus-visible {
 }
 
 .onboarding-sub {
-  font-size: 14px;
+  font-size: 15px;
   color: var(--text-2);
   line-height: 1.55;
   letter-spacing: -0.012em;
@@ -3736,9 +3734,13 @@ textarea:focus-visible {
   overflow: hidden;
   cursor: grab;
   position: relative;
+  /* Atmospheric glow — spotlight from top-center bleeds behind the graph,
+     making nodes pop against the dark canvas. Inspired by Raycast/Arc splash screens.
+     Two layers: a warm blue core + a cooler wide bloom that fills the canvas. */
   background:
-    radial-gradient(ellipse at 20% 50%, rgba(91, 143, 249, 0.05) 0%, transparent 60%),
-    radial-gradient(ellipse at 80% 30%, rgba(91, 143, 249, 0.02) 0%, transparent 50%);
+    radial-gradient(ellipse 70% 55% at 50% 50%,  rgba(91, 143, 249, 0.13) 0%, transparent 70%),
+    radial-gradient(ellipse 110% 90% at 50% 50%, rgba(91, 143, 249, 0.05) 0%, transparent 80%),
+    var(--bg);
 }
 
 .ec-canvas-wrapper:active {
@@ -3913,9 +3915,9 @@ textarea:focus-visible {
 .ec-legend {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 7px 16px;
-  border-top: 1px solid rgba(255, 255, 255,0.05);
+  gap: 16px;
+  padding: 9px 16px;
+  border-top: 1px solid rgba(255, 255, 255,0.06);
   flex-shrink: 0;
   flex-wrap: wrap;
 }
@@ -3923,21 +3925,21 @@ textarea:focus-visible {
 .ec-legend-item {
   display: flex;
   align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  color: var(--muted);
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-2);
 }
 
 .ec-legend-dot {
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 
 .ec-legend-hint {
   font-size: 11px;
-  color: var(--faint);
+  color: var(--muted);
   margin-left: auto;
 }