v0.27.04

client/pages/AboutPage.jsx

@@ -1,11 +1,54 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ArrowLeft, ArrowUpCircle, CheckCircle2, Info, Sparkles } from 'lucide-react';
+import { ArrowLeft, ArrowUpCircle, CheckCircle2, Info, Loader2, Sparkles, AlertCircle } from 'lucide-react';
 import { api } from '@/api';
 import { useAuth } from '@/hooks/useAuth';
+import { APP_VERSION } from '@/lib/version';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
+function UpdateBadge({ status, loading }) {
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/60">
+        <Loader2 className="h-3 w-3 animate-spin shrink-0" />
+        Checking…
+      </span>
+    );
+  }
+  if (!status) return null;
+
+  if (status.has_update) {
+    return (
+      <a
+        href={status.latest_release_url || '#'}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1 text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors"
+      >
+        <ArrowUpCircle className="h-3 w-3 shrink-0" />
+        v{status.latest_version} available
+      </a>
+    );
+  }
+
+  if (status.up_to_date) {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-emerald-500/80">
+        <CheckCircle2 className="h-3 w-3 shrink-0" />
+        Up to date
+      </span>
+    );
+  }
+
+  // up_to_date is null — check failed
+  return (
+    <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/50" title={status.error || 'Update check failed'}>
+      <AlertCircle className="h-3 w-3 shrink-0" />
+      Could not check
+    </span>
+  );
+}
 
 export default function AboutPage() {
   const { user } = useAuth();
@@ -13,6 +56,7 @@ export default function AboutPage() {
   const [about,         setAbout]         = useState(null);
   const [loading,       setLoading]       = useState(true);
   const [updateStatus,  setUpdateStatus]  = useState(null);
+  const [updateLoading, setUpdateLoading] = useState(true);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -26,9 +70,17 @@ export default function AboutPage() {
   useEffect(() => { load(); }, [load]);
 
   useEffect(() => {
-    api.updateStatus().then(setUpdateStatus).catch(() => {});
+    setUpdateLoading(true);
+    api.updateStatus()
+      .then(setUpdateStatus)
+      .catch(() => setUpdateStatus(null))
+      .finally(() => setUpdateLoading(false));
   }, []);
 
+  // Use Vite-injected APP_VERSION as the immediate source of truth.
+  // api.about() version is shown once loaded as a cross-check; they should always match.
+  const displayVersion = about?.version ?? APP_VERSION;
+
   return (
     <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.28))] px-4 py-8 text-foreground sm:px-6">
       <main className="mx-auto w-full max-w-3xl space-y-5">
@@ -52,30 +104,13 @@ export default function AboutPage() {
           <CardContent className="space-y-5">
             <div className="grid gap-3 sm:grid-cols-3">
 
-              {/* Version — with update status for admins */}
+              {/* Version card — shows immediately via APP_VERSION, update status alongside */}
               <div className="rounded-xl border border-border/70 bg-background/65 p-4">
                 <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Version</p>
-                <p className="mt-1 font-mono text-lg font-bold">v{about?.version || '...'}</p>
+                <p className="mt-1 font-mono text-lg font-bold">v{displayVersion}</p>
-                {updateStatus && (
                 <div className="mt-2">
-                    {updateStatus.has_update ? (
+                  <UpdateBadge status={updateStatus} loading={updateLoading} />
-                      <a
-                        href={updateStatus.latest_release_url || '#'}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors"
-                      >
-                        <ArrowUpCircle className="h-3 w-3 shrink-0" />
-                        v{updateStatus.latest_version} available
-                      </a>
-                    ) : updateStatus.up_to_date ? (
-                      <span className="inline-flex items-center gap-1 text-xs text-emerald-500/80">
-                        <CheckCircle2 className="h-3 w-3 shrink-0" />
-                        Up to date
-                      </span>
-                    ) : null}
                 </div>
-                )}
               </div>
 
               <div className="rounded-xl border border-border/70 bg-background/65 p-4">
@@ -104,7 +139,6 @@ export default function AboutPage() {
               <Button asChild>
                 <Link to="/release-notes">Release Notes</Link>
               </Button>
-              {/* Only shown when the visitor is not signed in */}
               {user == null && (
                 <Button asChild variant="outline">
                   <Link to="/login">Sign In</Link>

client/pages/RoadmapPage.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -12,73 +12,63 @@ import { ChevronDown, ChevronsUpDown, Map, FileText, Loader2, Users, FileCode, C
 import { api } from '@/api';
 import { APP_VERSION } from '@/lib/version';
 
-/* ─── Priority Configuration ───────────────────────────── */
+/* ─── Priority lanes ────────────────────────────────────────────────────────── */
 
 const PRIORITY_LANES = [
-  { key: 'critical',  emoji: '🔴', label: 'CRITICAL',     borderColor: 'border-t-red-500',     bgColor: 'bg-red-500/10',     textColor: 'text-red-600 dark:text-red-400',    badgeClass: 'bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20' },
+  { key: 'critical',   emoji: '🔴', label: 'CRITICAL',     borderColor: 'border-t-red-500',    bgColor: 'bg-red-500/10',    textColor: 'text-red-500',    badgeClass: 'bg-red-500/15 text-red-500 border-red-500/20' },
-  { key: 'high',      emoji: '🟠', label: 'HIGH',         borderColor: 'border-t-orange-500',  bgColor: 'bg-orange-500/10',  textColor: 'text-orange-600 dark:text-orange-400', badgeClass: 'bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/20' },
+  { key: 'high',       emoji: '🟠', label: 'HIGH',         borderColor: 'border-t-orange-500', bgColor: 'bg-orange-500/10', textColor: 'text-orange-500', badgeClass: 'bg-orange-500/15 text-orange-500 border-orange-500/20' },
-  { key: 'medium',    emoji: '🟡', label: 'MEDIUM',       borderColor: 'border-t-yellow-500',  bgColor: 'bg-yellow-500/10',  textColor: 'text-yellow-600 dark:text-yellow-400', badgeClass: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20' },
+  { key: 'medium',     emoji: '🟡', label: 'MEDIUM',       borderColor: 'border-t-yellow-500', bgColor: 'bg-yellow-500/10', textColor: 'text-yellow-500', badgeClass: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20' },
-  { key: 'low',       emoji: '🔵', label: 'LOW',          borderColor: 'border-t-blue-500',    bgColor: 'bg-blue-500/10',    textColor: 'text-blue-600 dark:text-blue-400',    badgeClass: 'bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20' },
+  { key: 'low',        emoji: '🔵', label: 'LOW',          borderColor: 'border-t-blue-500',   bgColor: 'bg-blue-500/10',   textColor: 'text-blue-500',   badgeClass: 'bg-blue-500/15 text-blue-500 border-blue-500/20' },
-  { key: 'niceToHave', emoji: '💭', label: 'NICE TO HAVE', borderColor: 'border-t-gray-400',    bgColor: 'bg-gray-400/10',   textColor: 'text-gray-600 dark:text-gray-400',   badgeClass: 'bg-gray-500/15 text-gray-600 dark:text-gray-400 border-gray-500/20' },
+  { key: 'niceToHave', emoji: '💭', label: 'NICE TO HAVE', borderColor: 'border-t-border',     bgColor: 'bg-muted/30',      textColor: 'text-muted-foreground', badgeClass: 'bg-muted/50 text-muted-foreground border-border/50' },
 ];
 
+// Normalise any priority string to a lane key.
 function laneForPriority(priority) {
-  const key = typeof priority === 'string'
+  const normalised = String(priority || '').toLowerCase().replace(/[\s_-]+/g, '');
-    ? priority.toLowerCase().replace(/\s+/g, '').replace(/to/ig, 'To')
+  const map = {
-    : '';
-  // Map API priority keys to lane keys
-  const mapping = {
     critical:   'critical',
     high:       'high',
     medium:     'medium',
     low:        'low',
     nicetohave: 'niceToHave',
-    'nice to have': 'niceToHave',
   };
-  return mapping[key] || 'low';
+  return map[normalised] ?? 'low';
 }
 
-/* ─── Roadmap Item Card ────────────────────────────────── */
+/* ─── Roadmap item card ─────────────────────────────────────────────────────── */
 
-function RoadmapItemCard({ item, defaultOpen, onToggle }) {
+function RoadmapItemCard({ item, defaultOpen }) {
-  const lane = PRIORITY_LANES.find(l => l.key === laneForPriority(item.priority)) || PRIORITY_LANES[3];
+  const lane = PRIORITY_LANES.find(l => l.key === laneForPriority(item.priority)) ?? PRIORITY_LANES[3];
   const [open, setOpen] = useState(defaultOpen);
 
-  const handleOpenChange = useCallback((value) => {
+  // Sync when parent toggles all cards via forceKey remount (no extra effect needed)
-    setOpen(value);
-    onToggle?.(value);
-  }, [onToggle]);
-
-  const effortLabel = item.effort || '';
-
   return (
-    <Collapsible open={open} onOpenChange={handleOpenChange} className="group">
+    <Collapsible open={open} onOpenChange={setOpen} className="group">
-      <Card className="border-border/70 bg-card/95 transition-shadow hover:shadow-md">
+      <div className="rounded-xl border border-border/60 bg-card/90 transition-shadow hover:shadow-md overflow-hidden">
+
+        {/* Trigger — always visible header */}
         <CollapsibleTrigger asChild>
-          <button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-2xl">
+          <button className="w-full text-left px-4 pt-3 pb-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
-            <CardHeader className="pb-2">
             <div className="flex items-start justify-between gap-2">
               <div className="flex-1 min-w-0">
                 <Badge
                   variant="outline"
                   className={`${lane.badgeClass} border text-[11px] font-semibold px-1.5 py-0 mb-1.5`}
-                    aria-label={`${lane.label} priority`}
                 >
                   {lane.emoji} {lane.label}
                 </Badge>
-                  <h4 className="font-semibold text-sm leading-snug line-clamp-3">
+                <p className="font-semibold text-sm leading-snug">{item.title}</p>
-                    {item.title}
-                  </h4>
               </div>
-                <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-aria-expanded:rotate-180 mt-0.5" />
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground mt-0.5 transition-transform duration-200 group-data-[state=open]:rotate-180" />
             </div>
-            </CardHeader>
           </button>
         </CollapsibleTrigger>
 
-        <div className="px-6 pb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+        {/* Meta row — always visible */}
+        {(item.added || item.addedBy || item.effort) && (
+          <div className="px-4 pb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
             {item.added && (
-            <span className="flex items-center gap-0.5">
+              <span className="flex items-center gap-1">
                 <Clock className="h-3 w-3" />
                 {item.added}
               </span>
@@ -86,78 +76,73 @@ function RoadmapItemCard({ item, defaultOpen, onToggle }) {
             {item.addedBy && (
               <>
                 <span aria-hidden="true">·</span>
-              <span className="flex items-center gap-0.5">
+                <span className="flex items-center gap-1">
                   <Users className="h-3 w-3" />
                   {item.addedBy}
                 </span>
               </>
             )}
-          {effortLabel && (
+            {item.effort && (
               <>
                 <span aria-hidden="true">·</span>
-              <span className="flex items-center gap-0.5">
+                <span>{item.effort}</span>
-                <Clock className="h-3 w-3" />
-                {effortLabel}
-              </span>
               </>
             )}
           </div>
+        )}
 
+        {/* Expandable detail */}
         <CollapsibleContent>
-          <CardContent className="pt-0 pb-4 space-y-3">
+          <div className="px-4 pb-4 pt-1 space-y-3 border-t border-border/40">
             {item.description && (
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Description</p>
+                <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Description</p>
                 <p className="text-sm leading-relaxed">{item.description}</p>
               </div>
             )}
             {item.rationale && (
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Rationale</p>
+                <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Rationale</p>
                 <p className="text-sm leading-relaxed text-muted-foreground">{item.rationale}</p>
               </div>
             )}
             {item.implementationNotes && (
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Implementation Notes</p>
+                <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Implementation Notes</p>
-                <div className="rounded-xl bg-muted/50 border border-border/50 p-3 text-sm font-mono leading-relaxed whitespace-pre-wrap">
+                <div className="rounded-lg bg-muted/50 border border-border/50 p-3 text-sm font-mono leading-relaxed whitespace-pre-wrap">
                   {item.implementationNotes}
                 </div>
               </div>
             )}
-          </CardContent>
+          </div>
         </CollapsibleContent>
-      </Card>
+      </div>
     </Collapsible>
   );
 }
 
-/* ─── Priority Lane ─────────────────────────────────────── */
+/* ─── Priority lane column ──────────────────────────────────────────────────── */
 
-function PriorityLane({ lane, items, defaultOpenCards }) {
+function PriorityLane({ lane, items, defaultOpenCards, forceKey }) {
   if (items.length === 0) return null;
 
   return (
-    <section
+    <section aria-label={`${lane.label} priority`} className={`rounded-xl border border-border/60 border-t-4 ${lane.borderColor}`}>
-      role="region"
+      <div className="px-4 py-2.5 flex items-center gap-2 border-b border-border/50">
-      aria-label={`${lane.label} priority lane`}
+        <span aria-hidden="true">{lane.emoji}</span>
-      className={`rounded-2xl border ${lane.borderColor} border-t-4 bg-background/50`}
+        <h3 className={`font-bold text-xs uppercase tracking-wider ${lane.textColor}`}>{lane.label}</h3>
-    >
+        <span className="ml-auto text-[11px] font-semibold text-muted-foreground tabular-nums">{items.length}</span>
-      <div className="px-4 py-3 flex items-center gap-2 border-b border-border/50">
-        <span className="text-lg" aria-hidden="true">{lane.emoji}</span>
-        <h3 className={`font-bold text-sm ${lane.textColor}`}>{lane.label}</h3>
-        <Badge variant="secondary" className="ml-auto text-[11px]">{items.length}</Badge>
       </div>
-      <div className="p-3 space-y-3">
+      <div className="p-3 space-y-2">
-        {items.map((item) => (
+        {items.map(item => (
-          <RoadmapItemCard key={item.id} item={item} defaultOpen={defaultOpenCards} />
+          <RoadmapItemCard key={`${item.id}-${forceKey}`} item={item} defaultOpen={defaultOpenCards} />
         ))}
       </div>
     </section>
   );
 }
 
-/* ─── Dev Log Entry ─────────────────────────────────────── */
+/* ─── Dev log entry ─────────────────────────────────────────────────────────── */
 
 function DevLogEntry({ entry }) {
   const [open, setOpen] = useState(false);
@@ -165,69 +150,51 @@ function DevLogEntry({ entry }) {
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="group">
       <div className="relative flex gap-4">
-        {/* Timeline line */}
+        <div className="flex flex-col items-center shrink-0">
-        <div className="flex flex-col items-center">
+          <div className="w-3 h-3 rounded-full bg-primary border-2 border-background mt-1.5" />
-          <div className="w-3 h-3 rounded-full bg-primary border-2 border-background shrink-0 mt-1.5" />
+          <div className="w-px flex-1 bg-border/50" />
-          <div className="w-px flex-1 bg-border/70" />
         </div>
 
         <div className="flex-1 pb-6 min-w-0">
           <CollapsibleTrigger asChild>
-            <button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">
+            <button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg">
               <div className="flex items-center gap-2 flex-wrap">
                 <span className="font-mono font-bold text-sm">{entry.version}</span>
-                {entry.date && (
+                {entry.date && <span className="text-xs text-muted-foreground">{entry.date}</span>}
-                  <span className="text-xs text-muted-foreground">{entry.date}</span>
-                )}
                 {entry.status && (
-                  <Badge
+                  <Badge variant="outline" className={`text-[11px] ${
-                    variant="outline"
-                    className={`text-[11px] ${
                     entry.status.includes('COMPLETED')
-                        ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20'
+                      ? 'bg-emerald-500/15 text-emerald-500 border-emerald-500/20'
-                        : 'bg-muted/50 text-muted-foreground'
+                      : 'bg-muted/50 text-muted-foreground border-border/50'
-                    }`}
+                  }`}>
-                  >
                     {entry.status}
                   </Badge>
                 )}
-                {entry.agents?.length > 0 && (
+                {entry.filesModified?.length > 0 && (
-                  <span className="text-xs text-muted-foreground">
+                  <span className="text-xs text-muted-foreground flex items-center gap-0.5">
-                    {entry.agents.map(a => a.name).join(', ')}
+                    <FileCode className="h-3 w-3" />
+                    {entry.filesModified.length} files
                   </span>
                 )}
-                {(entry.filesModified?.length > 0 || entry.workCompleted?.length > 0) && (
+                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-auto transition-transform duration-200 group-data-[state=open]:rotate-180" />
-                  <span className="text-xs text-muted-foreground">
-                    <FileCode className="inline h-3 w-3 mr-0.5" />
-                    {entry.filesModified?.length || 0} files
-                  </span>
-                )}
-                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 group-aria-expanded:rotate-180 ml-auto" />
               </div>
             </button>
           </CollapsibleTrigger>
 
           <CollapsibleContent>
-            <div className="mt-3 space-y-3">
+            <div className="mt-3 space-y-3 pl-1">
               {entry.agents?.length > 0 && (
                 <div>
-                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Agents</p>
+                  <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-2">Agents</p>
                   <div className="flex flex-wrap gap-2">
                     {entry.agents.map((agent, idx) => (
-                      <Badge
+                      <Badge key={idx} variant="outline" className={`text-[11px] ${
-                        key={idx}
+                        agent.status === 'COMPLETED'   ? 'bg-emerald-500/15 text-emerald-500 border-emerald-500/20' :
-                        variant="outline"
+                        agent.status === 'IN PROGRESS' ? 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20'   :
-                        className={`text-[11px] ${
+                        'bg-muted/50 text-muted-foreground border-border/50'
-                          agent.status === 'COMPLETED'
+                      }`}>
-                            ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20'
-                            : agent.status === 'IN PROGRESS'
-                              ? 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20'
-                              : 'bg-muted/50 text-muted-foreground'
-                        }`}
-                      >
                         {agent.status === 'COMPLETED' ? '✅' : agent.status === 'IN PROGRESS' ? '⏳' : '❓'}{' '}
-                        {agent.name}
+                        {agent.name}{agent.time ? ` · ${agent.time}` : ''}
-                        {agent.time ? ` · ${agent.time}` : ''}
                       </Badge>
                     ))}
                   </div>
@@ -236,7 +203,7 @@ function DevLogEntry({ entry }) {
 
               {entry.filesModified?.length > 0 && (
                 <div>
-                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">Files Modified</p>
+                  <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1.5">Files Modified</p>
                   <div className="flex flex-wrap gap-1">
                     {entry.filesModified.map((file, idx) => (
                       <code key={idx} className="text-[11px] bg-muted/50 px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground">
@@ -249,8 +216,8 @@ function DevLogEntry({ entry }) {
 
               {entry.workCompleted?.length > 0 && (
                 <div>
-                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">Work Completed</p>
+                  <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1.5">Work Completed</p>
-                  <ul className="space-y-0.5">
+                  <ul className="space-y-1">
                     {entry.workCompleted.map((work, idx) => (
                       <li key={idx} className="text-sm text-muted-foreground flex items-start gap-1.5">
                         <span className="text-emerald-500 mt-0.5 shrink-0">✓</span>
@@ -268,7 +235,7 @@ function DevLogEntry({ entry }) {
   );
 }
 
-/* ─── Main Page ─────────────────────────────────────────── */
+/* ─── Main page ─────────────────────────────────────────────────────────────── */
 
 export default function RoadmapPage() {
   const [roadmapData,   setRoadmapData]   = useState(null);
@@ -277,18 +244,23 @@ export default function RoadmapPage() {
   const [devLogLoading,  setDevLogLoading]  = useState(false);
   const [roadmapError,  setRoadmapError]  = useState(null);
   const [devLogError,   setDevLogError]   = useState(null);
-  const [allExpanded, setAllExpanded] = useState(true);
 
-  // Detect desktop for default expand state
+  // Expand/collapse all — forceKey causes cards to remount with the new default
+  const [allExpanded, setAllExpanded] = useState(true);
+  const [forceKey,    setForceKey]    = useState(0);
+
+  const handleExpandToggle = () => {
+    setAllExpanded(prev => !prev);
+    setForceKey(prev => prev + 1);
+  };
+
   const [isDesktop, setIsDesktop] = useState(
     typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)').matches : true
   );
-
   useEffect(() => {
     const mq = window.matchMedia('(min-width: 1024px)');
     const handler = (e) => setIsDesktop(e.matches);
     mq.addEventListener('change', handler);
-    setIsDesktop(mq.matches);
     return () => mq.removeEventListener('change', handler);
   }, []);
 
@@ -297,51 +269,37 @@ export default function RoadmapPage() {
     let cancelled = false;
     setRoadmapLoading(true);
     api.roadmap()
-      .then((data) => {
+      .then(data => { if (!cancelled) setRoadmapData(data); })
-        if (!cancelled) setRoadmapData(data);
+      .catch(err  => { if (!cancelled) setRoadmapError(err.message || 'Failed to load roadmap'); })
-      })
+      .finally(()  => { if (!cancelled) setRoadmapLoading(false); });
-      .catch((err) => {
-        if (!cancelled) setRoadmapError(err.message || 'Failed to load roadmap');
-      })
-      .finally(() => {
-        if (!cancelled) setRoadmapLoading(false);
-      });
     return () => { cancelled = true; };
   }, []);
 
+  // Lazy-load dev log when the Activity tab is first opened
   const fetchDevLog = useCallback(() => {
-    if (devLogData) return; // Already loaded
+    if (devLogData || devLogLoading) return;
     let cancelled = false;
     setDevLogLoading(true);
     api.devLog()
-      .then((data) => {
+      .then(data => { if (!cancelled) setDevLogData(data); })
-        if (!cancelled) setDevLogData(data);
+      .catch(err  => { if (!cancelled) setDevLogError(err.message || 'Failed to load activity log'); })
-      })
+      .finally(()  => { if (!cancelled) setDevLogLoading(false); });
-      .catch((err) => {
+  }, [devLogData, devLogLoading]);
-        if (!cancelled) setDevLogError(err.message || 'Failed to load activity log');
-      })
-      .finally(() => {
-        if (!cancelled) setDevLogLoading(false);
-      });
-    return () => { cancelled = true; };
-  }, [devLogData]);
 
   const version  = roadmapData?.version || APP_VERSION;
   const items    = roadmapData?.items   || [];
-  const counts = roadmapData?.counts || {};
-  const devLogEntries = devLogData?.entries || [];
-
-  // Group items by priority lane
   const grouped  = PRIORITY_LANES.map(lane => ({
     ...lane,
     items: items.filter(item => laneForPriority(item.priority) === lane.key),
   }));
 
   const defaultOpenCards = isDesktop && allExpanded;
+  const laneProps = { defaultOpenCards, forceKey };
 
   return (
     <div className="space-y-6">
-      {/* Page Header */}
+
+      {/* Header */}
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-primary/10 text-primary">
@@ -358,7 +316,7 @@ export default function RoadmapPage() {
       </div>
 
       {/* Tabs */}
-      <Tabs defaultValue="roadmap" onValueChange={(value) => { if (value === 'activity') fetchDevLog(); }}>
+      <Tabs defaultValue="roadmap" onValueChange={v => { if (v === 'activity') fetchDevLog(); }}>
         <TabsList>
           <TabsTrigger value="roadmap" className="gap-1.5">
             <Map className="h-3.5 w-3.5" />
@@ -370,101 +328,81 @@ export default function RoadmapPage() {
           </TabsTrigger>
         </TabsList>
 
-        {/* ─── Roadmap Tab ─── */}
+        {/* ── Roadmap tab ── */}
-        <TabsContent value="roadmap">
+        <TabsContent value="roadmap" className="mt-4">
           {roadmapLoading ? (
-            <div className="flex items-center justify-center py-16">
+            <div className="flex items-center justify-center py-16 gap-3 text-muted-foreground">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <Loader2 className="h-5 w-5 animate-spin" />
-              <span className="ml-3 text-muted-foreground">Loading roadmap…</span>
+              <span className="text-sm">Loading roadmap…</span>
             </div>
           ) : roadmapError ? (
-            <Card className="border-destructive/50 bg-destructive/5">
+            <div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center">
-              <CardContent className="py-8 text-center">
               <p className="text-destructive font-medium">Failed to load roadmap</p>
               <p className="text-sm text-muted-foreground mt-1">{roadmapError}</p>
-              </CardContent>
+            </div>
-            </Card>
           ) : items.length === 0 ? (
-            <Card>
+            <div className="rounded-xl border border-dashed border-border/60 py-12 text-center text-sm text-muted-foreground">
-              <CardContent className="py-12 text-center text-muted-foreground">
               No roadmap items found.
-              </CardContent>
+            </div>
-            </Card>
           ) : (
             <>
-              {/* Expand/Collapse All toggle */}
               <div className="flex justify-end mb-3">
-                <Button
+                <Button variant="outline" size="sm" onClick={handleExpandToggle} className="gap-1.5">
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setAllExpanded(prev => !prev)}
-                  className="gap-1.5"
-                >
                   <ChevronsUpDown className="h-3.5 w-3.5" />
                   {allExpanded ? 'Collapse All' : 'Expand All'}
                 </Button>
               </div>
 
-              {/* Desktop: 5-column grid */}
+              {/* Desktop: 5 columns */}
-              <div className="hidden lg:grid lg:grid-cols-5 gap-4">
+              <div className="hidden lg:grid lg:grid-cols-5 gap-3">
-                {grouped.map(lane => (
+                {grouped.map(lane => <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />)}
-                  <PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
-                ))}
               </div>
 
-              {/* Tablet: 2-column grid */}
+              {/* Tablet: 2 columns */}
-              <div className="hidden sm:grid sm:grid-cols-2 lg:hidden gap-4">
+              <div className="hidden sm:grid sm:grid-cols-2 lg:hidden gap-3">
-                {/* Left column: Critical + High */}
+                <div className="space-y-3">
-                <div className="space-y-4">
+                  {grouped.filter(l => l.key === 'critical' || l.key === 'high').map(lane =>
-                  {grouped.filter(l => l.key === 'critical' || l.key === 'high').map(lane => (
+                    <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />
-                    <PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
+                  )}
-                  ))}
                 </div>
-                {/* Right column: Medium + Low + Nice to Have */}
+                <div className="space-y-3">
-                <div className="space-y-4">
+                  {grouped.filter(l => l.key === 'medium' || l.key === 'low' || l.key === 'niceToHave').map(lane =>
-                  {grouped.filter(l => l.key === 'medium' || l.key === 'low' || l.key === 'niceToHave').map(lane => (
+                    <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />
-                    <PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
+                  )}
-                  ))}
                 </div>
               </div>
 
               {/* Mobile: single column */}
-              <div className="sm:hidden space-y-4">
+              <div className="sm:hidden space-y-3">
-                {grouped.map(lane => (
+                {grouped.map(lane => <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />)}
-                  <PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
-                ))}
               </div>
             </>
           )}
         </TabsContent>
 
-        {/* ─── Activity Log Tab ─── */}
+        {/* ── Activity log tab ── */}
-        <TabsContent value="activity">
+        <TabsContent value="activity" className="mt-4">
           {devLogLoading ? (
-            <div className="flex items-center justify-center py-16">
+            <div className="flex items-center justify-center py-16 gap-3 text-muted-foreground">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <Loader2 className="h-5 w-5 animate-spin" />
-              <span className="ml-3 text-muted-foreground">Loading activity log…</span>
+              <span className="text-sm">Loading activity log…</span>
             </div>
           ) : devLogError ? (
-            <Card className="border-destructive/50 bg-destructive/5">
+            <div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center">
-              <CardContent className="py-8 text-center">
               <p className="text-destructive font-medium">Failed to load activity log</p>
               <p className="text-sm text-muted-foreground mt-1">{devLogError}</p>
-              </CardContent>
+            </div>
-            </Card>
+          ) : devLogData && devLogData.entries?.length === 0 ? (
-          ) : devLogEntries.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border/60 py-12 text-center text-sm text-muted-foreground">
-            <Card>
-              <CardContent className="py-12 text-center text-muted-foreground">
               No activity log entries found.
-              </CardContent>
+            </div>
-            </Card>
+          ) : devLogData ? (
-          ) : (
             <div className="pt-2">
-              {devLogEntries.map((entry, idx) => (
+              {devLogData.entries.map((entry, idx) => (
                 <DevLogEntry key={entry.version || idx} entry={entry} />
               ))}
             </div>
-          )}
+          ) : null}
         </TabsContent>
       </Tabs>
     </div>