Enhance landing page design and improve StoryTimeline component

Frontend/src/RootLayout.tsx

@@ -18,7 +18,7 @@ function MainChrome() {
       {hasNav && <Navbar />}
       <main
         id="main-content"
-        className={`relative ${hasNav ? "min-h-[calc(100dvh-3.5rem)]" : "min-h-dvh"}`}
+        className={`relative bg-gitlore-bg ${hasNav ? "min-h-[calc(100dvh-3.5rem)]" : "min-h-dvh"}`}
         aria-busy={routeChromeActive}
         aria-live="polite"
       >

Frontend/src/components/ChatPanel.tsx

@@ -260,7 +260,7 @@ export function ChatPanel({ onChatComplete }: { onChatComplete?: () => void } =
         }
         const armorNote =
           res.armorAgent && Array.isArray(res.enforcementLog)
-            ? `\n\n---\n_ArmorClaw:_ ${res.enforcementLog.length} policy check(s) — ${res.enforcementLog.filter((e) => e.action === "deny").length} blocked. See **ArmorClaw enforcement** below._`
+            ? `\n\n---\n_ArmorClaw:_ ${res.enforcementLog.length} policy check(s); ${res.enforcementLog.filter((e) => e.action === "deny").length} blocked. See **ArmorClaw enforcement** below._`
             : "";
         setMessages((prev) => [
           ...prev,
@@ -414,7 +414,7 @@ export function ChatPanel({ onChatComplete }: { onChatComplete?: () => void } =
                           <span className="text-amber-400/90">Synthesis: offline (no API key)</span>
                         )}
                         {msg.synthesis === "fallback_error" && (
-                          <span className="text-red-400/90">Synthesis: Gemini error — raw matches shown</span>
+                          <span className="text-red-400/90">Synthesis: Gemini error; raw matches shown</span>
                         )}
                       </span>
                     )}

Frontend/src/components/EnforcementLog.tsx

@@ -76,7 +76,7 @@ export function EnforcementLog({ refreshKey = 0 }: Props) {
         typeof parsed !== "object" ||
         Array.isArray(parsed)
       ) {
-        setTestResult("Params must be a JSON object, e.g. {} or {\"path\":\"README.md\"} — not an array or null.");
+        setTestResult("Params must be a JSON object, e.g. {} or {\"path\":\"README.md\"}; not an array or null.");
         return;
       }
       params = parsed as Record<string, unknown>;
@@ -90,7 +90,7 @@ export function EnforcementLog({ refreshKey = 0 }: Props) {
       const repo = `${target.owner}/${target.name}`;
       const r = await postEnforcementTest({ tool: testTool, params, repo });
       setTestResult(
-        `${r.allowed ? "ALLOWED" : "BLOCKED"} — ${r.policy_rule} (${r.risk_level})\n${r.reason}`
+        `${r.allowed ? "ALLOWED" : "BLOCKED"}: ${r.policy_rule} (${r.risk_level})\n${r.reason}`
       );
     } catch (e) {
       setTestResult(e instanceof Error ? e.message : "Test failed");

Frontend/src/components/IngestButton.tsx

@@ -19,7 +19,7 @@ export function IngestButton({ onComplete }: { onComplete?: () => void }) {
   useEffect(() => {
     if (prevStatus.current === "running" && status === "done") {
       toast({
-        message: `Knowledge Graph built — ${nodeCount} decision${nodeCount === 1 ? "" : "s"} found`,
+        message: `Knowledge Graph built: ${nodeCount} decision${nodeCount === 1 ? "" : "s"} found`,
         type: "success",
       });
     }
@@ -105,7 +105,7 @@ export function IngestButton({ onComplete }: { onComplete?: () => void }) {
       }
     } catch (err) {
       setStatus("error");
-      toast({ message: "Ingest failed — check API key", type: "error" });
+      toast({ message: "Ingest failed. Check API key", type: "error" });
       console.error("Ingest error:", err);
     }
   };

Frontend/src/components/KnowledgeDecisionsGraph.tsx

@@ -161,7 +161,7 @@ function nodeShape(n: KnowledgeLayoutResponse["nodes"][0], key: string, theme: T
   const accent = n.color;
   const label = n.label;
   const sub = n.sublabel ? `${n.sublabel.slice(0, 48)}${n.sublabel.length > 48 ? "…" : ""}` : "";
-  const tooltip = [n.label, n.sublabel].filter(Boolean).join(" — ");
+  const tooltip = [n.label, n.sublabel].filter(Boolean).join(" · ");
   const L = theme === "light";
 
   const textMain = L ? "#0f172a" : "#f8fafc";
@@ -866,7 +866,7 @@ export function KnowledgeDecisionsGraph({ refreshKey = 0 }: { refreshKey?: numbe
           <div>
             <h3 className="text-sm font-medium text-gitlore-text">Knowledge graph</h3>
             <p className="mt-0.5 max-w-[52rem] text-xs leading-relaxed text-gitlore-text-secondary">
-              Ingested PR decisions, themes, issues, authors, and merge history — the same evidence the side chat uses.{" "}
+              Ingested PR decisions, themes, issues, authors, and merge history, the same evidence the side chat uses.{" "}
               <span className="text-gitlore-text">Drag</span> to pan (on nodes: use Ctrl/Cmd+drag or middle-drag on empty
               area). <span className="text-gitlore-text">Scroll</span> zooms toward the pointer. Green links = shared closing
               issue; dotted = merge-time neighbors; violet dashed = PR → theme.
@@ -975,7 +975,7 @@ export function KnowledgeDecisionsGraph({ refreshKey = 0 }: { refreshKey?: numbe
               <span className="text-emerald-600 dark:text-emerald-400">◆</span> issue &nbsp;
               <span className="text-slate-500 dark:text-slate-400">◇</span> merge &nbsp;
               <span className="text-emerald-600 dark:text-emerald-400">━</span> shared issue &nbsp;
-              <span className="text-slate-500 dark:text-slate-400">┅</span> time order — open nodes on GitHub.
+              <span className="text-slate-500 dark:text-slate-400">┅</span> time order: open nodes on GitHub.
             </p>
           </div>
         )}
@@ -995,7 +995,7 @@ export function KnowledgeDecisionsGraph({ refreshKey = 0 }: { refreshKey?: numbe
           >
             <div className="flex shrink-0 items-center justify-between gap-3 border-b border-gitlore-border bg-gitlore-bg/80 px-4 py-3">
               <h2 id="kg-modal-title" className="text-sm font-medium text-gitlore-text">
-                Knowledge graph — full view
+                Knowledge graph: full view
               </h2>
               <div className="flex items-center gap-2">
                 <ZoomToolbar

Frontend/src/components/StoryVoiceModal.tsx

@@ -65,7 +65,7 @@ export function StoryVoiceModal({ open, onClose, narrative, line, repoFull, file
 ## Voice conversation (English and Hindi)
 You are on a live voice call with a developer about the story above.
 - For simple greetings or thanks, reply briefly yourself without tools.
-- For questions about this code line, pull requests, review discussion, decision, impact, timeline, or what the change does: you MUST call the client tool "${VOICE_CLIENT_TOOL}" with parameter user_question set to the user's question (their exact words when possible, whether English or Hindi). When the tool returns text, read it aloud in the same language as the answer text—you may smooth phrasing slightly for speech but must not change facts.
+- For questions about this code line, pull requests, review discussion, decision, impact, timeline, or what the change does: you MUST call the client tool "${VOICE_CLIENT_TOOL}" with parameter user_question set to the user's question (their exact words when possible, whether English or Hindi). When the tool returns text, read it aloud in the same language as the answer text. You may smooth phrasing slightly for speech but must not change facts.
 - Never invent PR numbers, authors, or events that are not supported by the story context.
 - If the tool returns an error, apologize once and ask them to try again.`,
     [narrative, repoFull, filePath, line]
@@ -346,7 +346,7 @@ You are on a live voice call with a developer about the story above.
       agent: {
         prompt: { prompt: agentPromptForVoice },
         firstMessage:
-          "Hi — I have the story for this line of code. You can ask in English or Hindi about the change, the discussion, or the decision. What would you like to know?",
+          "Hi. I have the story for this line of code. You can ask in English or Hindi about the change, the discussion, or the decision. What would you like to know?",
         // Omit language so the agent uses its dashboard default (often multilingual ASR).
       },
     };

Frontend/src/components/landing/BuiltWith.tsx

@@ -32,7 +32,7 @@ const cards: StackCard[] = [
   {
     name: "GitHub GraphQL + REST",
     use: "PR fetching, blame data, file content, OAuth",
-    why: "GraphQL for efficient batch PR fetching — one call for PR + reviews + issues. REST for file content and blame.",
+    why: "GraphQL for efficient batch PR fetching: one call for PR + reviews + issues. REST for file content and blame.",
     iconTone: "slate",
     logos: [{ src: `${LOGO_BASE}/github.svg`, alt: "GitHub" }],
   },
@@ -80,10 +80,10 @@ const cards: StackCard[] = [
 ];
 
 const toneClasses: Record<IconTone, string> = {
-  gold: "bg-[var(--accent)]/14 ring-[var(--accent)]/20",
-  green: "bg-emerald-500/10 ring-emerald-500/20",
-  slate: "bg-[var(--text-secondary)]/10 ring-[var(--border)]",
-  violet: "bg-violet-500/10 ring-violet-500/25 dark:bg-violet-500/12",
+  gold: "bg-[var(--accent)]/14",
+  green: "bg-emerald-500/10",
+  slate: "bg-[var(--text-secondary)]/10",
+  violet: "bg-violet-500/10 dark:bg-violet-500/12",
 };
 
 function BrandLogos({ logos, pair }: { logos: StackCard["logos"]; pair: boolean }) {
@@ -116,18 +116,14 @@ function StackCardItem({ card }: { card: StackCard }) {
   const pair = card.logos.length > 1;
   return (
     <article
-      className="group relative flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-[var(--border)]/90 bg-[var(--surface)]/80 p-6 shadow-[0_4px_24px_-8px_rgba(0,0,0,0.35)] backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-[var(--accent)]/35 hover:shadow-[0_20px_48px_-20px_rgba(0,0,0,0.55),0_0_0_1px_var(--accent)]/12"
-      style={{ WebkitBackdropFilter: "blur(8px)" }}
+      className="bento-card group relative flex h-full min-h-0 flex-col overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--surface)] p-6"
     >
-      <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--accent)]/35 to-transparent opacity-80"
-        aria-hidden
-      />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[var(--accent)]/35 opacity-80" aria-hidden />
       {/* Row 2 uses minmax(_,auto): short “why” copy (e.g. Hono) was shrinking that row and shifting the divider vs neighbors. Floor matches ~3 lines of body + label + padding. */}
       <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(8.25rem,auto)] gap-5">
         <div className="flex min-h-0 min-w-0 flex-col gap-4 sm:flex-row sm:items-stretch">
           <div
-            className={`flex min-h-[3.5rem] min-w-[3.5rem] shrink-0 items-center justify-center rounded-2xl ring-1 ring-inset transition-transform duration-300 group-hover:scale-105 sm:self-start ${toneClasses[card.iconTone]} ${pair ? "min-w-[5.25rem] px-2" : ""}`}
+            className={`flex min-h-[3.5rem] min-w-[3.5rem] shrink-0 items-center justify-center rounded-[6px] border border-[var(--border)] sm:self-start ${toneClasses[card.iconTone]} ${pair ? "min-w-[5.25rem] px-2" : ""}`}
           >
             <BrandLogos logos={card.logos} pair={pair} />
           </div>
@@ -152,15 +148,7 @@ function StackCardItem({ card }: { card: StackCard }) {
 
 const BuiltWith = () => {
   return (
-    <section id="technology" className="relative overflow-hidden border-y border-[var(--border)] bg-[var(--bg)]/90 py-16 backdrop-blur-[1px] md:py-28">
-      <div
-        className="pointer-events-none absolute inset-0 opacity-40"
-        style={{
-          background:
-            "radial-gradient(ellipse 70% 45% at 20% 0%, rgba(201,168,76,0.08), transparent 50%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(99,102,241,0.07), transparent 50%)",
-        }}
-        aria-hidden
-      />
+    <section id="technology" className="relative overflow-hidden border-y border-[var(--border)] bg-[var(--bg)] py-16 md:py-28">
       <div className="landing-container relative z-[1] min-w-0 max-w-[960px] lg:max-w-[1180px]">
         <FadeIn direction="up">
           <div className="section-label">

Frontend/src/components/landing/Comparison.tsx

@@ -2,8 +2,8 @@ import { Check, X } from "lucide-react";
 import { FadeIn } from "../effects/FadeIn";
 
 const rows: { capability: string; blame: boolean; gitlens: boolean; copilot: boolean; gitlore: boolean; emphasize?: boolean }[] = [
-  { capability: "Who changed it?", blame: true, gitlens: true, copilot: false, gitlore: true },
-  { capability: "When was it changed?", blame: true, gitlens: true, copilot: false, gitlore: true },
+  { capability: "Who changed it?", blame: true, gitlens: true, copilot: true, gitlore: true },
+  { capability: "When was it changed?", blame: true, gitlens: true, copilot: true, gitlore: true },
   { capability: "What does this code do?", blame: false, gitlens: false, copilot: true, gitlore: true },
   {
     capability: "Why was it written this way?",
@@ -53,7 +53,7 @@ function MarkCell({
     "mx-auto flex h-9 w-9 items-center justify-center rounded-full border transition-colors md:h-10 md:w-10";
   const yesClasses = supported
     ? isGitlore
-      ? `${baseWrap} border-[var(--accent)]/45 bg-[var(--accent)]/18 text-[var(--accent)] shadow-[0_0_20px_-4px_var(--accent)]`
+      ? `${baseWrap} border-[var(--accent)]/45 bg-[var(--accent)]/18 text-[var(--accent)]`
       : `${baseWrap} border-[color-mix(in_srgb,var(--success)_45%,transparent)] bg-[var(--success-dim)] text-[var(--success)]`
     : `${baseWrap} border-[var(--border-strong)] bg-[var(--surface-hover)]/85 text-[var(--text-secondary)]`;
 
@@ -83,17 +83,9 @@ function MarkCell({
 const Comparison = () => {
   return (
     <section
-      id="differentiator"
-      className="relative overflow-hidden border-y border-[var(--border)] bg-[var(--bg)]/90 py-16 backdrop-blur-[1px] md:py-28"
+      id="copilot-comparison"
+      className="relative overflow-hidden border-y border-[var(--border)] bg-[var(--bg)] py-16 md:py-28"
     >
-      <div
-        className="pointer-events-none absolute inset-0 opacity-[0.35]"
-        style={{
-          background:
-            "radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent), transparent 55%), radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99,102,241,0.06), transparent 45%)",
-        }}
-        aria-hidden
-      />
       <div className="landing-container relative z-[1] min-w-0">
         <FadeIn direction="up">
           <div className="section-label">
@@ -105,8 +97,8 @@ const Comparison = () => {
           <p className="mt-2 font-body text-[15px] text-[var(--text-secondary)] md:text-[16px]">No. Here&apos;s the difference.</p>
 
           <div className="mt-10 -mx-1 min-w-0 overflow-x-auto px-1 pb-1 [-webkit-overflow-scrolling:touch] sm:mx-0 sm:px-0">
-            <div className="comparison-table-wrap rounded-2xl border border-[var(--border)]/90 bg-[var(--surface)]/60 p-1 shadow-[0_24px_64px_-16px_rgba(0,0,0,0.45)] backdrop-blur-sm md:p-1.5">
-              <div className="min-w-0 overflow-hidden rounded-xl ring-1 ring-[var(--border)]/60">
+            <div className="comparison-table-wrap rounded-[10px] border border-[var(--border)] bg-[var(--surface)] p-1 md:p-1.5">
+              <div className="min-w-0 overflow-hidden rounded-[6px] border border-[var(--border)]">
                 <table className="w-full min-w-[560px] border-collapse text-[var(--text)] sm:min-w-[640px]">
                   <thead>
                     <tr className="bg-[var(--elevated)]/95 font-code text-[9px] uppercase tracking-[0.16em] sm:text-[10px] sm:tracking-[0.18em]">
@@ -133,7 +125,7 @@ const Comparison = () => {
                         <span className="sm:hidden">Copilot</span>
                       </th>
                       <th
-                        className="comparison-head gitlore-col-head border-b border-l border-[var(--accent)]/35 bg-gradient-to-b from-[var(--accent)]/18 to-[var(--accent)]/08 px-2 py-4 font-bold text-[var(--accent)] md:px-4"
+                        className="comparison-head gitlore-col-head border-b border-l border-[var(--accent)]/35 bg-[var(--accent)]/12 px-2 py-4 font-bold text-[var(--accent)] md:px-4"
                         scope="col"
                       >
                         GitLore