diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 671404c..f73e80c 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -325,118 +325,6 @@
   }
 }
 
-/* --- Stats ---------------------------------------------------------------- */
-
-.stats {
-  display: flex;
-  width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background-color: var(--color-muted);
-}
-
-.stat {
-  display: inline-flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem;
-  border-inline-start: 1px solid var(--color-border);
-}
-
-.stat:first-child {
-  border-inline-start-width: 0;
-}
-
-.stat-title {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-brand-offwhite-muted);
-  line-height: 1.3;
-}
-
-.stat-value {
-  font-size: 1.375rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.1;
-  color: var(--color-brand-offwhite);
-}
-
-.stat-desc {
-  font-size: 0.75rem;
-  color: var(--color-brand-offwhite-muted);
-}
-
-.stat-figure {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@media (max-width: 640px) {
-  .stats {
-    flex-direction: column;
-  }
-  .stat {
-    border-inline-start-width: 0;
-    border-top: 1px solid var(--color-border);
-  }
-  .stat:first-child {
-    border-top-width: 0;
-  }
-}
-
-/* --- Radial progress ------------------------------------------------------ */
-
-.radial-progress {
-  position: relative;
-  display: inline-grid;
-  place-content: center;
-  width: var(--size, 5rem);
-  height: var(--size, 5rem);
-  border-radius: 9999px;
-  background:
-    radial-gradient(
-      farthest-side,
-      var(--color-brand-charcoal-panel) calc(100% - var(--thickness, 0.5rem) - 1px),
-      transparent calc(100% - var(--thickness, 0.5rem))
-    ),
-    conic-gradient(
-      currentColor calc(var(--value, 0) * 1%),
-      rgba(255, 255, 255, 0.08) 0
-    );
-  color: var(--color-brand-offwhite);
-}
-
-/* --- Divider --------------------------------------------------------------- */
-
-.divider {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin: 0.75rem 0;
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-brand-offwhite-muted);
-}
-
-.divider::before,
-.divider::after {
-  content: "";
-  flex: 1 1 0;
-  height: 1px;
-  background-color: var(--color-border);
-}
-
-.divider-start::before { display: none; }
-.divider-end::after { display: none; }
-
 /* --- Window mockup --------------------------------------------------------- */
 
 .mockup-window {
diff --git a/frontend/components/best-practices/AnalysisApproach.tsx b/frontend/components/best-practices/AnalysisApproach.tsx
index 1a22a46..ee97082 100644
--- a/frontend/components/best-practices/AnalysisApproach.tsx
+++ b/frontend/components/best-practices/AnalysisApproach.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import { renderMarkdown } from "@/lib/markdown";
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisApproach({ approach }: { approach: string }) {
   return (
-    <AnalysisSection label="Approach">
+    <div>
+      <AnalysisLabel>Approach</AnalysisLabel>
       <div
         className="text-sm leading-relaxed text-brand-offwhite/90"
         dangerouslySetInnerHTML={{ __html: renderMarkdown(approach) }}
       />
-    </AnalysisSection>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisComplexity.tsx b/frontend/components/best-practices/AnalysisComplexity.tsx
index 144bc9e..8e8fabb 100644
--- a/frontend/components/best-practices/AnalysisComplexity.tsx
+++ b/frontend/components/best-practices/AnalysisComplexity.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ComplexityBadge } from "./ComplexityBadge";
-import { ComplexityScale } from "./ComplexityScale";
 
 export function AnalysisComplexity({
   time,
@@ -11,12 +10,9 @@ export function AnalysisComplexity({
   space: string;
 }) {
   return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <ComplexityBadge label="Time" value={time} />
-        <ComplexityBadge label="Space" value={space} />
-      </div>
-      <ComplexityScale />
+    <div className="flex flex-wrap gap-2">
+      <ComplexityBadge label="Time" value={time} />
+      <ComplexityBadge label="Space" value={space} />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisFooter.tsx b/frontend/components/best-practices/AnalysisFooter.tsx
deleted file mode 100644
index b2c4f28..0000000
--- a/frontend/components/best-practices/AnalysisFooter.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-import { MessageSquare } from "lucide-react";
-
-export function AnalysisFooter({ onOpenChat }: { onOpenChat: () => void }) {
-  return (
-    <div className="space-y-3 pt-1">
-      <div className="divider">Have a question?</div>
-      <button
-        type="button"
-        onClick={onOpenChat}
-        className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-primary/40 bg-primary/10 px-3 py-2 text-xs font-semibold text-primary transition-colors hover:bg-primary/20"
-      >
-        <MessageSquare size={13} />
-        Ask a follow-up in chat
-      </button>
-    </div>
-  );
-}
diff --git a/frontend/components/best-practices/AnalysisHydration.tsx b/frontend/components/best-practices/AnalysisHydration.tsx
index e64f406..84b961e 100644
--- a/frontend/components/best-practices/AnalysisHydration.tsx
+++ b/frontend/components/best-practices/AnalysisHydration.tsx
@@ -5,6 +5,7 @@ import type { SolutionExplanation } from "@/lib/types";
 import { AnalysisSummary } from "./AnalysisSummary";
 import { AnalysisApproach } from "./AnalysisApproach";
 import { AnalysisScorecard } from "./AnalysisScorecard";
+import { AnalysisComplexity } from "./AnalysisComplexity";
 
 function Shimmer({ className }: { className?: string }) {
   return <div className={`animate-pulse rounded-md bg-muted/40 ${className ?? ""}`} />;
@@ -16,7 +17,7 @@ export function AnalysisHydration({
   partial: Partial<SolutionExplanation> | null;
 }) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
         <Loader2 size={15} className="animate-spin text-purple-300" />
         Generating analysis
@@ -32,7 +33,7 @@ export function AnalysisHydration({
         <AnalysisSummary summary={partial.summary} />
       ) : (
         <div className="space-y-2">
-          <Shimmer className="h-3 w-20" />
+          <Shimmer className="h-3 w-16" />
           <Shimmer className="h-3 w-full" />
           <Shimmer className="h-3 w-5/6" />
         </div>
@@ -41,27 +42,27 @@ export function AnalysisHydration({
       {partial?.quality_score != null ? (
         <AnalysisScorecard explanation={partial as SolutionExplanation} />
       ) : (
-        <div className="grid gap-3 sm:grid-cols-[220px_1fr]">
-          <div className="flex flex-col items-center gap-3 rounded-lg border border-border/60 bg-muted/40 p-3">
-            <Shimmer className="h-28 w-28 rounded-full" />
-            <Shimmer className="h-3 w-24" />
-          </div>
-          <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-border/60 bg-muted/40 p-3">
-            <Shimmer className="h-28 w-44" />
-            <Shimmer className="h-3 w-20" />
-          </div>
-        </div>
+        <Shimmer className="h-16 w-full" />
       )}
 
       {partial?.approach ? (
         <AnalysisApproach approach={partial.approach} />
       ) : (
         <div className="space-y-2">
-          <Shimmer className="h-3 w-24" />
+          <Shimmer className="h-3 w-14" />
           <Shimmer className="h-3 w-full" />
           <Shimmer className="h-3 w-2/3" />
         </div>
       )}
+
+      {partial?.time_complexity && partial?.space_complexity ? (
+        <AnalysisComplexity
+          time={partial.time_complexity}
+          space={partial.space_complexity}
+        />
+      ) : (
+        <Shimmer className="h-7 w-52" />
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisLabel.tsx b/frontend/components/best-practices/AnalysisLabel.tsx
new file mode 100644
index 0000000..e0a0258
--- /dev/null
+++ b/frontend/components/best-practices/AnalysisLabel.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export function AnalysisLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mb-1.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisPoints.tsx b/frontend/components/best-practices/AnalysisPoints.tsx
index 8146a95..0229137 100644
--- a/frontend/components/best-practices/AnalysisPoints.tsx
+++ b/frontend/components/best-practices/AnalysisPoints.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisPoints({
   strengths,
@@ -11,37 +11,33 @@ export function AnalysisPoints({
 }) {
   if (!strengths.length && !improvements.length) return null;
   return (
-    <div className="grid gap-4 sm:grid-cols-2">
+    <div className="space-y-1.5">
       {strengths.length > 0 && (
-        <AnalysisSection label="Strengths">
-          <ul className="space-y-1.5">
+        <div>
+          <AnalysisLabel>Strengths</AnalysisLabel>
+          <p className="text-[13px] leading-relaxed text-brand-offwhite/80">
             {strengths.map((s, i) => (
-              <li
-                key={i}
-                className="flex gap-2 text-[13px] leading-relaxed text-brand-offwhite/80"
-              >
-                <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-emerald-400" />
-                {s}
-              </li>
+              <span key={i} className="me-2 inline-flex items-start gap-1.5">
+                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-400" />
+                <span>{s}</span>
+              </span>
             ))}
-          </ul>
-        </AnalysisSection>
+          </p>
+        </div>
       )}
       {improvements.length > 0 && (
-        <AnalysisSection label="Improvements">
-          <ul className="space-y-1.5">
+        <div>
+          <AnalysisLabel>Improvements</AnalysisLabel>
+          <p className="text-[13px] leading-relaxed text-brand-offwhite/80">
             {improvements.map((s, i) => (
-              <li
-                key={i}
-                className="flex gap-2 text-[13px] leading-relaxed text-brand-offwhite/80"
-              >
-                <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-purple-300" />
-                {s}
-              </li>
+              <span key={i} className="me-2 inline-flex items-start gap-1.5">
+                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-purple-300" />
+                <span>{s}</span>
+              </span>
             ))}
-          </ul>
-        </AnalysisSection>
+          </p>
+        </div>
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisScorecard.tsx b/frontend/components/best-practices/AnalysisScorecard.tsx
index ee79779..cfcefa1 100644
--- a/frontend/components/best-practices/AnalysisScorecard.tsx
+++ b/frontend/components/best-practices/AnalysisScorecard.tsx
@@ -1,64 +1,71 @@
 "use client";
 
-import { Eye, ShieldCheck, ThumbsUp, Zap } from "lucide-react";
+import type { CSSProperties } from "react";
+import { Progress } from "@/components/ui/progress";
 import type { SolutionExplanation } from "@/lib/types";
-import { gradeScore, QualityGauge } from "./QualityGauge";
-import { ScoreRadar } from "./ScoreRadar";
-import { MetricTile } from "./MetricTile";
+
+export function gradeScore(score: number): { label: string; color: string } {
+  if (score >= 85) return { label: "Excellent", color: "#10b981" };
+  if (score >= 70) return { label: "Good", color: "#14b8a6" };
+  if (score >= 50) return { label: "Fair", color: "#f59e0b" };
+  return { label: "Needs work", color: "#f43f5e" };
+}
+
+const DIMENSIONS: Array<{
+  label: string;
+  score: (e: SolutionExplanation) => number;
+}> = [
+  { label: "Efficiency", score: (e) => e.efficiency_score },
+  { label: "Readability", score: (e) => e.readability_score },
+  { label: "Correctness", score: (e) => e.correctness_score },
+  { label: "Best practices", score: (e) => e.best_practices_score },
+];
 
 export function AnalysisScorecard({
   explanation,
 }: {
   explanation: SolutionExplanation;
 }) {
-  const hasSubScores =
-    (explanation.efficiency_score ?? 0) +
-      (explanation.readability_score ?? 0) +
-      (explanation.correctness_score ?? 0) +
-      (explanation.best_practices_score ?? 0) >
-    0;
+  const overall = gradeScore(explanation.quality_score);
 
   return (
-    <div className="space-y-3">
-      <div className="grid gap-3 sm:grid-cols-[220px_1fr]">
-        <QualityGauge score={explanation.quality_score} label="Overall quality" />
-        <ScoreRadar
-          efficiency={explanation.efficiency_score}
-          readability={explanation.readability_score}
-          correctness={explanation.correctness_score}
-          bestPractices={explanation.best_practices_score}
+    <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5">
+      <div className="flex items-center gap-3">
+        <span className="text-xl font-bold leading-none tabular-nums text-foreground">
+          {explanation.quality_score}
+        </span>
+        <span
+          className="text-[10px] font-bold uppercase tracking-wider"
+          style={{ color: overall.color }}
+        >
+          {overall.label}
+        </span>
+        <Progress
+          value={explanation.quality_score}
+          className="h-1.5 flex-1 [&>div]:bg-[var(--quality-color)]"
+          style={{ "--quality-color": overall.color } as CSSProperties}
         />
       </div>
-
-      {hasSubScores && (
-        <div className="stats">
-          <MetricTile
-            icon={Zap}
-            label="Efficiency"
-            value={`${explanation.efficiency_score}/100`}
-            sublabel={gradeScore(explanation.efficiency_score).label}
-            tone="emerald"
-          />
-          <MetricTile
-            icon={Eye}
-            label="Readability"
-            value={`${explanation.readability_score}/100`}
-            sublabel={gradeScore(explanation.readability_score).label}
-          />
-          <MetricTile
-            icon={ShieldCheck}
-            label="Correctness"
-            value={`${explanation.correctness_score}/100`}
-            sublabel={gradeScore(explanation.correctness_score).label}
-          />
-          <MetricTile
-            icon={ThumbsUp}
-            label="Best practices"
-            value={`${explanation.best_practices_score}/100`}
-            sublabel={gradeScore(explanation.best_practices_score).label}
-          />
-        </div>
-      )}
+      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1">
+        {DIMENSIONS.map((d) => {
+          const g = gradeScore(d.score(explanation));
+          return (
+            <span
+              key={d.label}
+              className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground"
+            >
+              <span
+                className="h-1.5 w-1.5 shrink-0 rounded-full"
+                style={{ backgroundColor: g.color }}
+              />
+              <span>{d.label}</span>
+              <span className="font-semibold tabular-nums text-foreground">
+                {d.score(explanation)}
+              </span>
+            </span>
+          );
+        })}
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisSection.tsx b/frontend/components/best-practices/AnalysisSection.tsx
deleted file mode 100644
index 0a21ef7..0000000
--- a/frontend/components/best-practices/AnalysisSection.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-export function AnalysisSection({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div>
-      <h4 className="mb-2 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
-        {label}
-      </h4>
-      {children}
-    </div>
-  );
-}
diff --git a/frontend/components/best-practices/AnalysisSummary.tsx b/frontend/components/best-practices/AnalysisSummary.tsx
index 1986f2b..5909d5c 100644
--- a/frontend/components/best-practices/AnalysisSummary.tsx
+++ b/frontend/components/best-practices/AnalysisSummary.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisSummary({ summary }: { summary: string }) {
   return (
-    <AnalysisSection label="Summary">
+    <div>
+      <AnalysisLabel>Summary</AnalysisLabel>
       <p className="text-sm leading-relaxed text-brand-offwhite/90">{summary}</p>
-    </AnalysisSection>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/AnalysisTechniques.tsx b/frontend/components/best-practices/AnalysisTechniques.tsx
index 5892d42..0fc32c1 100644
--- a/frontend/components/best-practices/AnalysisTechniques.tsx
+++ b/frontend/components/best-practices/AnalysisTechniques.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisTechniques({ techniques }: { techniques: string[] }) {
   if (!techniques.length) return null;
   return (
-    <AnalysisSection label="Key Techniques">
+    <div>
+      <AnalysisLabel>Key techniques</AnalysisLabel>
       <div className="flex flex-wrap gap-1.5">
         {techniques.map((t, i) => (
           <span
@@ -16,6 +17,6 @@ export function AnalysisTechniques({ techniques }: { techniques: string[] }) {
           </span>
         ))}
       </div>
-    </AnalysisSection>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/ComplexityScale.tsx b/frontend/components/best-practices/ComplexityScale.tsx
deleted file mode 100644
index 2b2d130..0000000
--- a/frontend/components/best-practices/ComplexityScale.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ChevronDown } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-const TIERS: Array<{ label: string; desc: string; width: string; barCls: string }> = [
-  { label: "O(1)", desc: "Constant — one operation, regardless of input", width: "8%", barCls: "bg-emerald-500" },
-  { label: "O(log n)", desc: "Logarithmic — halves the input each step (binary search)", width: "20%", barCls: "bg-teal-500" },
-  { label: "O(n)", desc: "Linear — one pass over the input", width: "45%", barCls: "bg-amber-500" },
-  { label: "O(n log n)", desc: "Linearithmic — efficient sorts (merge sort)", width: "62%", barCls: "bg-orange-500" },
-  { label: "O(n²)", desc: "Quadratic — nested loops over the input", width: "78%", barCls: "bg-orange-500" },
-  { label: "O(2ⁿ)", desc: "Exponential — doubles per extra element", width: "90%", barCls: "bg-rose-500" },
-  { label: "O(n!)", desc: "Factorial — permutations of the input", width: "100%", barCls: "bg-rose-500" },
-];
-
-export function ComplexityScale() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="rounded-lg border border-border/60 bg-muted/40">
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        aria-expanded={open}
-        className="flex w-full items-center gap-2 px-3 py-2 text-[11px] font-semibold text-muted-foreground transition-colors hover:text-foreground"
-      >
-        <span className="uppercase tracking-wider">How complexity grows</span>
-        <ChevronDown size={13} className={cn("ml-auto transition-transform duration-200", open && "rotate-180")} />
-      </button>
-
-      {open && (
-        <div className="space-y-2.5 border-t border-border/60 px-3 py-3">
-          {TIERS.map((t) => (
-            <div key={t.label} className="flex items-center gap-3">
-              <code className="w-16 shrink-0 text-right font-mono text-[11px] font-bold text-foreground">
-                {t.label}
-              </code>
-              <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-white/5">
-                <div className={cn("h-full rounded-full", t.barCls)} style={{ width: t.width }} />
-              </div>
-              <span className="hidden w-56 shrink-0 text-[10px] leading-tight text-muted-foreground sm:block">
-                {t.desc}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/components/best-practices/ExplainPanel.tsx b/frontend/components/best-practices/ExplainPanel.tsx
index 8f5d8e2..5bee05b 100644
--- a/frontend/components/best-practices/ExplainPanel.tsx
+++ b/frontend/components/best-practices/ExplainPanel.tsx
@@ -1,14 +1,20 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Bot, Sparkles } from "lucide-react";
+import {
+  Bot,
+  Check,
+  CheckCircle2,
+  Copy,
+  MessageSquare,
+  Sparkles,
+} from "lucide-react";
 import type { CommunitySolution, SolutionExplanation } from "@/lib/types";
 import {
   explainSolutionStream,
   explainSolutionChatStream,
 } from "@/lib/api";
 import { toast } from "@/lib/toast";
-import { AnalysisHeader } from "./AnalysisHeader";
 import { AnalysisHydration } from "./AnalysisHydration";
 import { AnalysisError, type ExplainErrorInfo } from "./AnalysisError";
 import { AnalysisSummary } from "./AnalysisSummary";
@@ -17,7 +23,6 @@ import { AnalysisApproach } from "./AnalysisApproach";
 import { AnalysisComplexity } from "./AnalysisComplexity";
 import { AnalysisTechniques } from "./AnalysisTechniques";
 import { AnalysisPoints } from "./AnalysisPoints";
-import { AnalysisFooter } from "./AnalysisFooter";
 import { FollowUpDrawer } from "./FollowUpDrawer";
 import type { ChatMessage } from "./chat/types";
 
@@ -108,6 +113,8 @@ export function ExplainPanel({
   const [error, setError] = useState<ExplainErrorInfo | null>(null);
   const [partial, setPartial] = useState<Partial<SolutionExplanation> | null>(null);
   const rawRef = useRef("");
+  const [copied, setCopied] = useState(false);
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const [chatOpen, setChatOpen] = useState(false);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -116,6 +123,13 @@ export function ExplainPanel({
   const [streamingAnswer, setStreamingAnswer] = useState<string | null>(null);
   const pendingAnswerRef = useRef("");
 
+  useEffect(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    [],
+  );
+
   const loadExplanation = useCallback(async () => {
     if (explanation || loading) return;
     setLoading(true);
@@ -176,15 +190,17 @@ export function ExplainPanel({
       },
     });
 
-    if (pendingAnswerRef.current) {
-      setMessages((prev) => [
-        ...prev,
-        { role: "ai", content: pendingAnswerRef.current },
-      ]);
-    }
+    // Snapshot the accumulated text before clearing the ref. Reading the ref
+    // inside the setMessages updater would see "" instead: React batches these
+    // state updates and runs the updater after this synchronous block, by which
+    // point pendingAnswerRef has already been reset.
+    const finalAnswer = pendingAnswerRef.current;
     pendingAnswerRef.current = "";
     setStreamingAnswer(null);
     setChatLoading(false);
+    if (finalAnswer) {
+      setMessages((prev) => [...prev, { role: "ai", content: finalAnswer }]);
+    }
   };
 
   const copyAnalysis = async () => {
@@ -212,6 +228,9 @@ export function ExplainPanel({
     }
     try {
       await navigator.clipboard.writeText(sections.join("\n"));
+      setCopied(true);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), 1500);
     } catch {
       toast.error("Could not copy analysis");
     }
@@ -251,11 +270,49 @@ export function ExplainPanel({
       )}
 
       {explanation && (
-        <div className="space-y-4 px-4 py-4">
-          <AnalysisHeader cached={cached} onCopy={copyAnalysis} />
+        <div className="space-y-3 px-4 py-3.5">
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex items-center gap-2 text-sm font-bold text-foreground">
+              <Sparkles size={15} className="text-purple-300" />
+              AI Analysis
+              <span className="rounded-md border border-purple-700/40 bg-purple-900/50 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-purple-200">
+                NIM
+              </span>
+            </div>
+            {cached && (
+              <span className="inline-flex items-center gap-1 rounded-md border border-emerald-500/20 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-400">
+                <CheckCircle2 size={11} />
+                cached
+              </span>
+            )}
+            <div className="ml-auto flex items-center gap-1.5">
+              <button
+                type="button"
+                onClick={() => setChatOpen(true)}
+                className="inline-flex items-center gap-1.5 rounded-md border border-purple-500/30 bg-purple-500/10 px-2 py-1 text-[11px] font-semibold text-purple-300 transition-colors hover:bg-purple-500/20"
+              >
+                <MessageSquare size={12} />
+                Ask AI
+              </button>
+              <button
+                type="button"
+                onClick={copyAnalysis}
+                className="inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/40 px-2 py-1 text-[11px] font-semibold text-muted-foreground transition-colors hover:text-foreground"
+                aria-label="Copy analysis"
+              >
+                {copied ? (
+                  <Check size={12} className="text-emerald-400" />
+                ) : (
+                  <Copy size={12} />
+                )}
+                {copied ? "Copied" : "Copy"}
+              </button>
+            </div>
+          </div>
+
           <AnalysisSummary summary={explanation.summary} />
-          <AnalysisScorecard explanation={explanation} />
           <AnalysisApproach approach={explanation.approach} />
+          <AnalysisScorecard explanation={explanation} />
           <AnalysisComplexity
             time={explanation.time_complexity}
             space={explanation.space_complexity}
@@ -265,7 +322,6 @@ export function ExplainPanel({
             strengths={explanation.strengths}
             improvements={explanation.improvements}
           />
-          <AnalysisFooter onOpenChat={() => setChatOpen(true)} />
         </div>
       )}
 
@@ -282,4 +338,4 @@ export function ExplainPanel({
       />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/best-practices/MetricTile.tsx b/frontend/components/best-practices/MetricTile.tsx
deleted file mode 100644
index a25c247..0000000
--- a/frontend/components/best-practices/MetricTile.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { LucideIcon } from "lucide-react";
-
-export function MetricTile({
-  icon: Icon,
-  label,
-  value,
-  sublabel,
-  tone = "default",
-}: {
-  icon: LucideIcon;
-  label: string;
-  value: string;
-  sublabel?: string;
-  tone?: "default" | "gold" | "emerald";
-}) {
-  const toneClasses =
-    tone === "gold"
-      ? "text-amber-400"
-      : tone === "emerald"
-        ? "text-emerald-400"
-        : "text-purple-300";
-
-  return (
-    <div className="stat">
-      <div className="flex items-center gap-1.5">
-        <Icon size={13} className={toneClasses} />
-        <span className="stat-title">{label}</span>
-      </div>
-      <div className="stat-value">{value}</div>
-      {sublabel && <div className="stat-desc">{sublabel}</div>}
-    </div>
-  );
-}
diff --git a/frontend/components/best-practices/QualityGauge.tsx b/frontend/components/best-practices/QualityGauge.tsx
deleted file mode 100644
index 89e7830..0000000
--- a/frontend/components/best-practices/QualityGauge.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import type { CSSProperties } from "react";
-import { RatingBadge } from "@/components/ui/rating-badge";
-
-export function gradeScore(score: number): { label: string; color: string } {
-  if (score >= 85) return { label: "Excellent", color: "#10b981" };
-  if (score >= 70) return { label: "Good", color: "#14b8a6" };
-  if (score >= 50) return { label: "Fair", color: "#f59e0b" };
-  return { label: "Needs work", color: "#f43f5e" };
-}
-
-export function QualityGauge({ score, label }: { score: number; label: string }) {
-  const g = gradeScore(score);
-  const stars = Math.round((score / 100) * 5 * 2) / 2;
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-border/60 bg-muted/40 p-3">
-      <div
-        className="radial-progress"
-        role="img"
-        aria-label={`${label}: ${score} out of 100 — ${g.label}`}
-        style={
-          {
-            "--value": score,
-            "--size": "6.5rem",
-            "--thickness": "0.5rem",
-            color: g.color,
-          } as CSSProperties
-        }
-      >
-        <div className="flex flex-col items-center leading-none">
-          <span className="text-2xl font-bold tabular-nums text-foreground">
-            {score}
-          </span>
-          <span
-            className="mt-1 text-[9px] font-semibold uppercase tracking-wider"
-            style={{ color: g.color }}
-          >
-            {g.label}
-          </span>
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-1">
-        <RatingBadge rating={stars} maxRating={5} size="sm" />
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          {label}
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/components/best-practices/ScoreRadar.tsx b/frontend/components/best-practices/ScoreRadar.tsx
deleted file mode 100644
index 2cee8bb..0000000
--- a/frontend/components/best-practices/ScoreRadar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import {
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  Radar,
-  ResponsiveContainer,
-} from "recharts";
-
-export function ScoreRadar({
-  efficiency,
-  readability,
-  correctness,
-  bestPractices,
-}: {
-  efficiency: number;
-  readability: number;
-  correctness: number;
-  bestPractices: number;
-}) {
-  const data = [
-    { subject: "Efficiency", score: efficiency },
-    { subject: "Readability", score: readability },
-    { subject: "Correctness", score: correctness },
-    { subject: "Best practices", score: bestPractices },
-  ];
-
-  return (
-    <div className="flex h-[190px] w-full flex-col rounded-lg border border-border/60 bg-muted/40 p-2">
-      <div className="px-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-        Skill breakdown
-      </div>
-      <ResponsiveContainer width="100%" height="100%">
-        <RadarChart data={data} outerRadius="72%">
-          <PolarGrid stroke="rgba(255,255,255,0.08)" />
-          <PolarAngleAxis
-            dataKey="subject"
-            tick={{ fill: "#88889A", fontSize: 10 }}
-          />
-          <Radar
-            dataKey="score"
-            stroke="#9E77ED"
-            fill="#7F56D9"
-            fillOpacity={0.35}
-            isAnimationActive
-            animationDuration={1100}
-          />
-        </RadarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}