fix(ui): redesign updates page as changelog-first layout

- shift /updates from support-matrix-heavy view to compact announcement workflow

- reduce top section footprint and align structure with existing dashboard pages

- enforce internal panel scrolling while keeping outer page frame fixed

ui/src/pages/updates.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { BellRing, ChevronRight, Filter, Megaphone, Search } from 'lucide-react';
+import { CalendarClock, ChevronRight, Filter, Megaphone, Search, Sparkles } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
-import { SupportEntryCard } from '@/components/updates/support-entry-card';
 import { SupportStatusBadge } from '@/components/updates/support-status-badge';
 import {
   CLI_SUPPORT_ENTRIES,
@@ -27,24 +27,6 @@ const SCOPE_FILTERS: { id: ScopeFilter; label: string }[] = [
   { id: 'websearch', label: SUPPORT_SCOPE_LABELS.websearch },
 ];
 
-const CORE_CONTRACT = [
-  {
-    id: 'base-url',
-    title: 'Base URL',
-    detail: 'Source endpoint is explicit per target/provider/profile.',
-  },
-  {
-    id: 'auth',
-    title: 'Auth',
-    detail: 'OAuth or token ownership is visible in one support matrix.',
-  },
-  {
-    id: 'model',
-    title: 'Model',
-    detail: 'Default model behavior stays configurable and documented.',
-  },
-] as const;
-
 function NoticeListItem({
   notice,
   isSelected,
@@ -59,29 +41,20 @@ function NoticeListItem({
       type="button"
       onClick={onSelect}
       className={cn(
-        'w-full rounded-lg border px-3 py-2.5 text-left transition-colors',
+        'w-full rounded-lg border px-3 py-2 text-left transition-colors',
         isSelected
           ? 'border-primary/20 bg-primary/10'
           : 'border-transparent hover:border-border hover:bg-muted/70'
       )}
     >
       <div className="flex items-start gap-2">
-        <div className="min-w-0 flex-1 space-y-1">
+        <div className="min-w-0 flex-1">
           <p className="truncate text-sm font-medium">{notice.title}</p>
-          <p className="text-xs text-muted-foreground">{notice.summary}</p>
+          <p className="mt-0.5 text-[11px] text-muted-foreground">
-          <div className="flex items-center gap-2">
+            {formatCatalogDate(notice.publishedAt)}
-            <SupportStatusBadge status={notice.status} className="h-5 px-1.5 text-[10px]" />
+          </p>
-            <span className="text-[10px] text-muted-foreground">
-              {formatCatalogDate(notice.publishedAt)}
-            </span>
-          </div>
         </div>
-        <ChevronRight
+        <ChevronRight className={cn('mt-0.5 h-4 w-4 shrink-0 text-muted-foreground')} />
-          className={cn(
-            'mt-0.5 h-4 w-4 shrink-0 text-muted-foreground',
-            isSelected && 'text-primary'
-          )}
-        />
       </div>
     </button>
   );
@@ -125,33 +98,23 @@ export function UpdatesPage() {
     });
   }, [scope, query]);
 
-  const scopeStats = useMemo(
-    () =>
-      SCOPE_FILTERS.filter((filter) => filter.id !== 'all').map((filter) => ({
-        id: filter.id,
-        label: filter.label,
-        count: CLI_SUPPORT_ENTRIES.filter((entry) => entry.scope === filter.id).length,
-      })),
-    []
-  );
-
   return (
-    <div className="h-[calc(100vh-100px)] flex">
+    <div className="h-[calc(100vh-100px)] flex overflow-hidden">
-      <div className="w-80 border-r bg-muted/30 flex flex-col">
+      <div className="w-80 border-r bg-muted/30 flex flex-col overflow-hidden">
         <div className="p-4 border-b bg-background">
           <div className="mb-1 flex items-center gap-2">
             <Megaphone className="w-5 h-5 text-primary" />
-            <h1 className="font-semibold">Updates Center</h1>
+            <h1 className="font-semibold">Updates</h1>
           </div>
           <p className="mb-3 text-xs text-muted-foreground">
-            Release visibility for target, provider, and support rollouts.
+            Product announcements and release notes.
           </p>
           <div className="relative">
             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
             <Input
               value={query}
               onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search support matrix"
+              placeholder="Search updates or integrations"
               className="pl-8 h-9"
             />
           </div>
@@ -176,67 +139,39 @@ export function UpdatesPage() {
               {SUPPORT_NOTICES.length} notice{SUPPORT_NOTICES.length !== 1 ? 's' : ''}
             </span>
             <span>
-              {CLI_SUPPORT_ENTRIES.length} support entr
+              {filteredEntries.length} result{filteredEntries.length !== 1 ? 's' : ''}
-              {CLI_SUPPORT_ENTRIES.length !== 1 ? 'ies' : 'y'}
             </span>
           </div>
         </div>
       </div>
 
-      <div className="flex-1 min-w-0 bg-background flex flex-col">
+      <div className="flex-1 min-w-0 bg-background grid grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
         {selectedNotice && (
-          <div className="border-b bg-background p-4 space-y-3">
+          <div className="border-b bg-background px-4 py-3">
             <div className="flex items-start justify-between gap-3">
               <div className="min-w-0">
-                <h2 className="text-lg font-semibold">{selectedNotice.title}</h2>
+                <h2 className="text-base font-semibold leading-tight">{selectedNotice.title}</h2>
-                <p className="text-sm text-muted-foreground">{selectedNotice.summary}</p>
+                <p className="mt-1 text-sm text-muted-foreground">{selectedNotice.summary}</p>
               </div>
               <SupportStatusBadge status={selectedNotice.status} />
             </div>
-
+            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <CalendarClock className="h-3.5 w-3.5" />
-              <BellRing className="h-3.5 w-3.5" />
+              <span>Published {formatCatalogDate(selectedNotice.publishedAt)}</span>
-              Published {formatCatalogDate(selectedNotice.publishedAt)}
-            </div>
-
-            <ul className="grid gap-1 text-sm text-muted-foreground">
-              {selectedNotice.highlights.map((highlight) => (
-                <li key={`${selectedNotice.id}-${highlight}`}>- {highlight}</li>
-              ))}
-            </ul>
-
-            <div className="flex flex-wrap gap-2">
-              {selectedNotice.routes.map((route) => (
-                <Link
-                  key={`${selectedNotice.id}-${route.path}`}
-                  to={route.path}
-                  className="rounded-md border px-2 py-1 text-xs hover:bg-muted"
-                >
-                  {route.label}
-                </Link>
-              ))}
-            </div>
-
-            <div className="grid gap-2 lg:grid-cols-3">
-              {selectedNotice.commands.map((command) => (
-                <code
-                  key={`${selectedNotice.id}-${command}`}
-                  className="rounded bg-muted px-2 py-1.5 text-[11px]"
-                >
-                  {command}
-                </code>
-              ))}
             </div>
           </div>
         )}
 
-        <div className="flex-1 min-h-0 p-4">
+        <div className="min-h-0 p-4">
-          <div className="h-full grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+          <div className="grid h-full gap-4 xl:grid-cols-[minmax(0,1.7fr)_minmax(320px,1fr)] overflow-hidden">
-            <Card className="h-full gap-3">
+            <Card className="h-full gap-3 overflow-hidden">
               <CardHeader className="gap-2">
-                <CardTitle className="text-base">Support Matrix</CardTitle>
+                <div className="flex items-center gap-2">
+                  <Sparkles className="h-4 w-4 text-primary" />
+                  <CardTitle className="text-base">Release Details</CardTitle>
+                </div>
                 <CardDescription>
-                  Filter by support area. Internal scroll keeps the page frame stable.
+                  Changelog-first view with impacted integrations and quick commands.
                 </CardDescription>
               </CardHeader>
 
@@ -245,7 +180,7 @@ export function UpdatesPage() {
                   <div className="flex flex-wrap items-center gap-2">
                     <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                       <Filter className="h-3.5 w-3.5" />
-                      Scope:
+                      Filter:
                     </span>
                     {SCOPE_FILTERS.map((filter) => (
                       <Button
@@ -258,71 +193,141 @@ export function UpdatesPage() {
                       </Button>
                     ))}
                     <span className="ml-auto text-xs text-muted-foreground">
-                      {filteredEntries.length} match
+                      {filteredEntries.length} integration{filteredEntries.length !== 1 ? 's' : ''}
                     </span>
                   </div>
 
-                  <div className="flex-1 min-h-0">
+                  <ScrollArea className="flex-1 min-h-0 pr-2">
-                    <ScrollArea className="h-full pr-2">
+                    <div className="space-y-4 pb-1">
-                      {filteredEntries.length === 0 ? (
+                      <section className="space-y-2">
-                        <div className="h-full grid place-items-center text-sm text-muted-foreground">
+                        <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                          No support entries match this filter.
+                          What Changed
-                        </div>
+                        </h3>
-                      ) : (
+                        <ul className="space-y-1 text-sm text-muted-foreground">
-                        <div className="grid gap-4 pb-1">
+                          {selectedNotice?.highlights.map((highlight) => (
-                          {filteredEntries.map((entry) => (
+                            <li key={`${selectedNotice.id}-${highlight}`}>- {highlight}</li>
-                            <SupportEntryCard key={entry.id} entry={entry} />
+                          ))}
+                        </ul>
+                      </section>
+
+                      <section className="space-y-2">
+                        <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                          Dashboard Entry Points
+                        </h3>
+                        <div className="flex flex-wrap gap-2">
+                          {selectedNotice?.routes.map((route) => (
+                            <Link
+                              key={`${selectedNotice.id}-${route.path}`}
+                              to={route.path}
+                              className="rounded-md border px-2 py-1 text-xs hover:bg-muted"
+                            >
+                              {route.label}
+                            </Link>
                           ))}
                         </div>
-                      )}
+                      </section>
-                    </ScrollArea>
+
-                  </div>
+                      <section className="space-y-2">
+                        <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                          Quick Commands
+                        </h3>
+                        <div className="grid gap-2 lg:grid-cols-2">
+                          {selectedNotice?.commands.map((command) => (
+                            <code
+                              key={`${selectedNotice.id}-${command}`}
+                              className="rounded bg-muted px-2 py-1.5 text-[11px]"
+                            >
+                              {command}
+                            </code>
+                          ))}
+                        </div>
+                      </section>
+
+                      <section className="space-y-2">
+                        <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                          Impacted Integrations
+                        </h3>
+                        {filteredEntries.length === 0 ? (
+                          <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
+                            No integration entries match your current filter.
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {filteredEntries.map((entry) => (
+                              <div key={entry.id} className="rounded-md border bg-muted/20 p-3">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0">
+                                    <p className="text-sm font-medium truncate">{entry.name}</p>
+                                    <p className="text-xs text-muted-foreground">{entry.summary}</p>
+                                  </div>
+                                  <SupportStatusBadge
+                                    status={entry.status}
+                                    className="h-5 px-1.5 text-[10px]"
+                                  />
+                                </div>
+                                <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                                  <Badge variant="outline" className="text-[10px] h-5 px-1.5">
+                                    {SUPPORT_SCOPE_LABELS[entry.scope]}
+                                  </Badge>
+                                  {entry.routes.map((route) => (
+                                    <Link
+                                      key={`${entry.id}-${route.path}`}
+                                      to={route.path}
+                                      className="rounded-md border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-muted"
+                                    >
+                                      {route.label}
+                                    </Link>
+                                  ))}
+                                </div>
+                                <code className="mt-2 block rounded bg-muted px-2 py-1 text-[11px]">
+                                  {entry.commands[0]}
+                                </code>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </section>
+                    </div>
+                  </ScrollArea>
                 </div>
               </CardContent>
             </Card>
 
-            <Card className="h-full gap-3">
+            <Card className="h-full gap-3 overflow-hidden">
               <CardHeader className="gap-2">
-                <CardTitle className="text-base">Config Contract</CardTitle>
+                <CardTitle className="text-base">Announcement Timeline</CardTitle>
-                <CardDescription>
+                <CardDescription>Recent notices in chronological order.</CardDescription>
-                  Every new CLI integration follows the same three configuration pillars.
-                </CardDescription>
               </CardHeader>
-
               <CardContent className="flex-1 min-h-0">
                 <ScrollArea className="h-full pr-2">
-                  <div className="space-y-4 pb-1">
+                  <div className="space-y-2 pb-1">
-                    <div className="grid gap-2">
+                    {SUPPORT_NOTICES.map((notice) => (
-                      {CORE_CONTRACT.map((item) => (
+                      <button
-                        <div key={item.id} className="rounded-md border bg-muted/30 p-3">
+                        key={`timeline-${notice.id}`}
-                          <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                        type="button"
-                            {item.title}
+                        onClick={() => setSelectedNoticeId(notice.id)}
-                          </p>
+                        className={cn(
-                          <p className="text-sm font-medium">{item.detail}</p>
+                          'w-full rounded-md border p-3 text-left transition-colors',
+                          selectedNotice?.id === notice.id
+                            ? 'border-primary/20 bg-primary/10'
+                            : 'hover:bg-muted/70'
+                        )}
+                      >
+                        <div className="flex items-center justify-between gap-2">
+                          <p className="text-sm font-medium">{notice.title}</p>
+                          <SupportStatusBadge
+                            status={notice.status}
+                            className="h-5 px-1.5 text-[10px]"
+                          />
                         </div>
-                      ))}
+                        <p className="mt-1 text-xs text-muted-foreground">{notice.summary}</p>
-                    </div>
+                        <p className="mt-2 text-[11px] text-muted-foreground">
+                          {formatCatalogDate(notice.publishedAt)}
+                        </p>
+                      </button>
+                    ))}
 
-                    <div className="space-y-2">
+                    <div className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
-                      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                        Coverage by Scope
-                      </p>
-                      <div className="grid gap-2">
-                        {scopeStats.map((stat) => (
-                          <div
-                            key={stat.id}
-                            className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
-                          >
-                            <span>{stat.label}</span>
-                            <span className="font-mono text-xs text-muted-foreground">
-                              {stat.count}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
                       Update source of truth:{' '}
                       <code className="rounded bg-muted px-1.5 py-0.5 text-[11px]">
                         ui/src/lib/support-updates-catalog.ts