feat(ui): add updates center with support matrix

- add data-driven catalog for support notices and CLI compatibility

- introduce Updates Center page with announcements, filtering, and search

- render reusable support cards and status badges for future expansions

ui/src/components/updates/support-entry-card.tsx

@@ -0,0 +1,96 @@
+import { Link } from 'react-router-dom';
+import { ArrowUpRight } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  SUPPORT_SCOPE_LABELS,
+  type CliSupportEntry,
+  type SupportScope,
+} from '@/lib/support-updates-catalog';
+import { SupportStatusBadge } from './support-status-badge';
+
+const PILLAR_LABELS: { key: keyof CliSupportEntry['pillars']; label: string }[] = [
+  { key: 'baseUrl', label: 'Base URL' },
+  { key: 'auth', label: 'Auth' },
+  { key: 'model', label: 'Model' },
+];
+
+const SCOPE_STYLES: Record<SupportScope, string> = {
+  target:
+    'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900/50 dark:bg-violet-900/20 dark:text-violet-300',
+  cliproxy:
+    'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/50 dark:bg-sky-900/20 dark:text-sky-300',
+  'api-profiles':
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-900/20 dark:text-emerald-300',
+  websearch:
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/50 dark:bg-amber-900/20 dark:text-amber-300',
+};
+
+export function SupportEntryCard({ entry }: { entry: CliSupportEntry }) {
+  return (
+    <Card className="h-full gap-4">
+      <CardHeader className="gap-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-2">
+            <CardTitle className="text-base leading-tight">{entry.name}</CardTitle>
+            <CardDescription>{entry.summary}</CardDescription>
+          </div>
+          <SupportStatusBadge status={entry.status} />
+        </div>
+
+        <Badge variant="outline" className={SCOPE_STYLES[entry.scope]}>
+          {SUPPORT_SCOPE_LABELS[entry.scope]}
+        </Badge>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="grid gap-2 sm:grid-cols-3">
+          {PILLAR_LABELS.map((pillar) => (
+            <div key={pillar.key} className="rounded-md border bg-muted/30 p-2">
+              <p className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                {pillar.label}
+              </p>
+              <p className="text-xs font-medium leading-relaxed">{entry.pillars[pillar.key]}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="space-y-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Dashboard
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {entry.routes.map((route) => (
+              <Link
+                key={`${entry.id}-${route.path}`}
+                to={route.path}
+                className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs hover:bg-muted"
+              >
+                {route.label}
+                <ArrowUpRight className="h-3 w-3" />
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            CLI Usage
+          </p>
+          <div className="space-y-1">
+            {entry.commands.slice(0, 2).map((command) => (
+              <code
+                key={`${entry.id}-${command}`}
+                className="block rounded bg-muted px-2 py-1 text-[11px] leading-relaxed"
+              >
+                {command}
+              </code>
+            ))}
+          </div>
+        </div>
+
+        {entry.notes && <p className="text-xs text-muted-foreground">{entry.notes}</p>}
+      </CardContent>
+    </Card>
+  );
+}

ui/src/components/updates/support-status-badge.tsx

@@ -0,0 +1,31 @@
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import type { SupportStatus } from '@/lib/support-updates-catalog';
+
+const STATUS_LABELS: Record<SupportStatus, string> = {
+  new: 'New',
+  stable: 'Stable',
+  planned: 'Planned',
+};
+
+const STATUS_STYLES: Record<SupportStatus, string> = {
+  new: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/50 dark:bg-blue-900/20 dark:text-blue-300',
+  stable:
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-900/50 dark:bg-green-900/20 dark:text-green-300',
+  planned:
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/50 dark:bg-amber-900/20 dark:text-amber-300',
+};
+
+export function SupportStatusBadge({
+  status,
+  className,
+}: {
+  status: SupportStatus;
+  className?: string;
+}) {
+  return (
+    <Badge variant="outline" className={cn('font-medium', STATUS_STYLES[status], className)}>
+      {STATUS_LABELS[status]}
+    </Badge>
+  );
+}

ui/src/lib/support-updates-catalog.ts

@@ -0,0 +1,222 @@
+export type SupportStatus = 'new' | 'stable' | 'planned';
+
+export type SupportScope = 'target' | 'cliproxy' | 'api-profiles' | 'websearch';
+
+export interface SupportRouteHint {
+  label: string;
+  path: string;
+}
+
+export interface SupportNotice {
+  id: string;
+  title: string;
+  summary: string;
+  publishedAt: string;
+  status: SupportStatus;
+  highlights: string[];
+  routes: SupportRouteHint[];
+  commands: string[];
+}
+
+export interface CliSupportEntry {
+  id: string;
+  name: string;
+  scope: SupportScope;
+  status: SupportStatus;
+  summary: string;
+  pillars: {
+    baseUrl: string;
+    auth: string;
+    model: string;
+  };
+  routes: SupportRouteHint[];
+  commands: string[];
+  notes?: string;
+}
+
+export const SUPPORT_SCOPE_LABELS: Record<SupportScope, string> = {
+  target: 'Target CLI',
+  cliproxy: 'CLIProxy Provider',
+  'api-profiles': 'API Profile',
+  websearch: 'WebSearch',
+};
+
+export const SUPPORT_NOTICES: SupportNotice[] = [
+  {
+    id: 'droid-target-support',
+    title: 'Factory Droid support is live',
+    summary:
+      'API Profiles and CLIProxy variants now support Droid as a first-class execution target.',
+    publishedAt: '2026-02-25',
+    status: 'new',
+    highlights: [
+      'Set default target to Droid when creating or editing API Profiles.',
+      'Set default target to Droid for CLIProxy variants, including Codex and Antigravity flows.',
+      'Use ccsd alias or --target droid for one-off target overrides.',
+    ],
+    routes: [
+      { label: 'API Profiles', path: '/providers' },
+      { label: 'CLIProxy', path: '/cliproxy' },
+    ],
+    commands: [
+      'ccsd glm',
+      'ccs codex --target droid "your prompt"',
+      'ccs cliproxy create mycodex --provider codex --target droid',
+    ],
+  },
+  {
+    id: 'updates-center-launch',
+    title: 'Updates Center added to dashboard navigation',
+    summary:
+      'CCS now has a dedicated updates route so support announcements are visible and reusable.',
+    publishedAt: '2026-02-25',
+    status: 'new',
+    highlights: [
+      'Single data source powers Home spotlight and Updates Center page.',
+      'New support entries can be added without touching multiple pages.',
+      'Catalog includes targets, CLIProxy providers, and WebSearch integrations.',
+    ],
+    routes: [{ label: 'Updates Center', path: '/updates' }],
+    commands: ['ccs config'],
+  },
+];
+
+export const CLI_SUPPORT_ENTRIES: CliSupportEntry[] = [
+  {
+    id: 'claude-target',
+    name: 'Claude Code',
+    scope: 'target',
+    status: 'stable',
+    summary: 'Default runtime target for all CCS profile types.',
+    pillars: {
+      baseUrl: 'From profile settings (ANTHROPIC_BASE_URL)',
+      auth: 'From profile settings (ANTHROPIC_AUTH_TOKEN)',
+      model: 'From profile settings (ANTHROPIC_MODEL)',
+    },
+    routes: [
+      { label: 'API Profiles', path: '/providers' },
+      { label: 'CLIProxy', path: '/cliproxy' },
+    ],
+    commands: ['ccs', 'ccs glm "your prompt"'],
+  },
+  {
+    id: 'droid-target',
+    name: 'Factory Droid',
+    scope: 'target',
+    status: 'new',
+    summary: 'First-class target for API Profiles and CLIProxy variants.',
+    pillars: {
+      baseUrl: 'From profile or variant settings',
+      auth: 'From profile or variant settings',
+      model: 'From profile or variant settings',
+    },
+    routes: [
+      { label: 'API Profiles', path: '/providers' },
+      { label: 'CLIProxy', path: '/cliproxy' },
+    ],
+    commands: ['ccsd glm', 'ccs km --target droid', 'ccs codex --target droid'],
+    notes: 'Use ccsd alias for automatic Droid target selection.',
+  },
+  {
+    id: 'codex-cliproxy',
+    name: 'Codex via CLIProxy',
+    scope: 'cliproxy',
+    status: 'stable',
+    summary: 'OAuth-backed provider with configurable variant model and target.',
+    pillars: {
+      baseUrl: 'Managed by CLIProxy backend',
+      auth: 'OAuth account via CLIProxy auth flow',
+      model: 'Selectable per provider or variant',
+    },
+    routes: [
+      { label: 'CLIProxy', path: '/cliproxy' },
+      { label: 'Control Panel', path: '/cliproxy/control-panel' },
+    ],
+    commands: ['ccs codex', 'ccs cliproxy create mycodex --provider codex'],
+  },
+  {
+    id: 'gemini-cliproxy',
+    name: 'Gemini via CLIProxy',
+    scope: 'cliproxy',
+    status: 'stable',
+    summary: 'OAuth-backed Gemini provider with multi-account management.',
+    pillars: {
+      baseUrl: 'Managed by CLIProxy backend',
+      auth: 'OAuth account via CLIProxy auth flow',
+      model: 'Selectable per provider or variant',
+    },
+    routes: [
+      { label: 'CLIProxy', path: '/cliproxy' },
+      { label: 'Control Panel', path: '/cliproxy/control-panel' },
+    ],
+    commands: ['ccs gemini', 'ccs cliproxy create mygem --provider gemini'],
+  },
+  {
+    id: 'agy-cliproxy',
+    name: 'Antigravity via CLIProxy',
+    scope: 'cliproxy',
+    status: 'stable',
+    summary: 'OAuth-backed Antigravity provider with variant target controls.',
+    pillars: {
+      baseUrl: 'Managed by CLIProxy backend',
+      auth: 'OAuth account via CLIProxy auth flow',
+      model: 'Selectable per provider or variant',
+    },
+    routes: [
+      { label: 'CLIProxy', path: '/cliproxy' },
+      { label: 'Control Panel', path: '/cliproxy/control-panel' },
+    ],
+    commands: ['ccs agy', 'ccs cliproxy create myagy --provider agy --target droid'],
+  },
+  {
+    id: 'custom-api-profiles',
+    name: 'Custom API Profiles',
+    scope: 'api-profiles',
+    status: 'stable',
+    summary: 'Any Anthropic-compatible endpoint with per-profile target and model mapping.',
+    pillars: {
+      baseUrl: 'User-defined endpoint',
+      auth: 'User-defined token/key',
+      model: 'User-defined model identifier',
+    },
+    routes: [{ label: 'API Profiles', path: '/providers' }],
+    commands: ['ccs api create myprofile', 'ccs myprofile "your prompt"'],
+  },
+  {
+    id: 'opencode-websearch',
+    name: 'OpenCode WebSearch',
+    scope: 'websearch',
+    status: 'stable',
+    summary: 'WebSearch provider surfaced in Settings for third-party profile workflows.',
+    pillars: {
+      baseUrl: 'Managed by OpenCode CLI integration',
+      auth: 'Provider-specific (managed externally)',
+      model: 'Configurable in WebSearch settings',
+    },
+    routes: [{ label: 'Settings', path: '/settings' }],
+    commands: ['ccs config', 'ccs codex "your prompt"'],
+    notes: 'Enable OpenCode in Settings > WebSearch to activate fallback search.',
+  },
+];
+
+export function getLatestSupportNotice(): SupportNotice | null {
+  if (SUPPORT_NOTICES.length === 0) {
+    return null;
+  }
+
+  return [...SUPPORT_NOTICES].sort((a, b) => b.publishedAt.localeCompare(a.publishedAt))[0];
+}
+
+export function formatCatalogDate(value: string): string {
+  const parsed = new Date(`${value}T00:00:00Z`);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  }).format(parsed);
+}

ui/src/pages/updates.tsx

@@ -0,0 +1,214 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { BellRing, Filter, Megaphone, Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { SupportEntryCard } from '@/components/updates/support-entry-card';
+import { SupportStatusBadge } from '@/components/updates/support-status-badge';
+import {
+  CLI_SUPPORT_ENTRIES,
+  SUPPORT_NOTICES,
+  SUPPORT_SCOPE_LABELS,
+  formatCatalogDate,
+  type SupportScope,
+} from '@/lib/support-updates-catalog';
+
+type ScopeFilter = 'all' | SupportScope;
+
+const SCOPE_FILTERS: { id: ScopeFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'target', label: SUPPORT_SCOPE_LABELS.target },
+  { id: 'cliproxy', label: SUPPORT_SCOPE_LABELS.cliproxy },
+  { id: 'api-profiles', label: SUPPORT_SCOPE_LABELS['api-profiles'] },
+  { id: 'websearch', label: SUPPORT_SCOPE_LABELS.websearch },
+];
+
+export function UpdatesPage() {
+  const [scope, setScope] = useState<ScopeFilter>('all');
+  const [query, setQuery] = useState('');
+
+  const filteredEntries = useMemo(() => {
+    const queryValue = query.trim().toLowerCase();
+
+    return CLI_SUPPORT_ENTRIES.filter((entry) => {
+      if (scope !== 'all' && entry.scope !== scope) {
+        return false;
+      }
+
+      if (!queryValue) {
+        return true;
+      }
+
+      const haystack = [
+        entry.name,
+        entry.summary,
+        entry.notes || '',
+        ...entry.commands,
+        ...entry.routes.map((route) => route.label),
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return haystack.includes(queryValue);
+    });
+  }, [scope, query]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto space-y-6">
+      <Card className="gap-4 border-blue-200/70 bg-gradient-to-br from-blue-50/80 via-background to-cyan-50/70 dark:border-blue-900/40 dark:from-blue-950/20 dark:to-cyan-950/10">
+        <CardHeader className="gap-2">
+          <CardTitle className="flex items-center gap-2 text-xl">
+            <Megaphone className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+            CCS Updates Center
+          </CardTitle>
+          <CardDescription>
+            Release visibility for runtime support, CLIProxy providers, and integration readiness.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Alert variant="info">
+            <BellRing className="h-4 w-4" />
+            <AlertDescription>
+              This page is data-driven. Update one catalog file to publish new support notices
+              across dashboard surfaces.
+            </AlertDescription>
+          </Alert>
+
+          <div className="grid gap-2 md:grid-cols-3">
+            <code className="rounded bg-blue-100/70 px-2 py-1.5 text-xs dark:bg-blue-900/30">
+              ccsd glm
+            </code>
+            <code className="rounded bg-blue-100/70 px-2 py-1.5 text-xs dark:bg-blue-900/30">
+              ccs codex --target droid "your prompt"
+            </code>
+            <code className="rounded bg-blue-100/70 px-2 py-1.5 text-xs dark:bg-blue-900/30">
+              ccs cliproxy create mycodex --provider codex --target droid
+            </code>
+          </div>
+        </CardContent>
+      </Card>
+
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">Announcements</h2>
+          <span className="text-xs text-muted-foreground">{SUPPORT_NOTICES.length} published</span>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          {SUPPORT_NOTICES.map((notice) => (
+            <Card key={notice.id} className="gap-4">
+              <CardHeader className="gap-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="space-y-1">
+                    <CardTitle className="text-base">{notice.title}</CardTitle>
+                    <CardDescription>{notice.summary}</CardDescription>
+                  </div>
+                  <SupportStatusBadge status={notice.status} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {formatCatalogDate(notice.publishedAt)}
+                </p>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <ul className="list-disc space-y-1 pl-4 text-sm text-muted-foreground">
+                  {notice.highlights.map((highlight) => (
+                    <li key={`${notice.id}-${highlight}`}>{highlight}</li>
+                  ))}
+                </ul>
+
+                <div className="flex flex-wrap gap-2">
+                  {notice.routes.map((route) => (
+                    <Link
+                      key={`${notice.id}-${route.path}`}
+                      to={route.path}
+                      className="rounded-md border px-2 py-1 text-xs hover:bg-muted"
+                    >
+                      {route.label}
+                    </Link>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-3">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h2 className="text-lg font-semibold">Support Matrix</h2>
+            <p className="text-sm text-muted-foreground">
+              Search by CLI/provider and filter by support surface.
+            </p>
+          </div>
+
+          <div className="relative w-full lg:w-80">
+            <Search className="pointer-events-none 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 by command, provider, or note"
+              className="pl-8"
+            />
+          </div>
+        </div>
+
+        <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:
+          </span>
+          {SCOPE_FILTERS.map((filter) => (
+            <Button
+              key={filter.id}
+              size="sm"
+              variant={scope === filter.id ? 'default' : 'outline'}
+              onClick={() => setScope(filter.id)}
+            >
+              {filter.label}
+            </Button>
+          ))}
+          <span className="text-xs text-muted-foreground">{filteredEntries.length} entries</span>
+        </div>
+
+        {filteredEntries.length === 0 ? (
+          <Card>
+            <CardContent className="py-10 text-center text-sm text-muted-foreground">
+              No support entries match this filter.
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid gap-4 lg:grid-cols-2">
+            {filteredEntries.map((entry) => (
+              <SupportEntryCard key={entry.id} entry={entry} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <Card>
+        <CardHeader className="gap-2">
+          <CardTitle className="text-base">Maintainer Notes</CardTitle>
+          <CardDescription>
+            Keep update messaging in one place for future CLI expansions.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>
+            Edit{' '}
+            <code className="rounded bg-muted px-1.5 py-0.5">
+              ui/src/lib/support-updates-catalog.ts
+            </code>{' '}
+            to add new notices or support entries.
+          </p>
+          <p>
+            Home spotlight and this page consume the same catalog, so announcements stay consistent
+            without repeated UI edits.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}