feat(bar): add Get CCS Bar dashboard banner and ccs bar docs page

Add a 'Get CCS Bar' promo banner + card to the dashboard (mirroring the
OpenRouter promo pattern + design system) so users discover the macOS menu-bar
app, with a macOS-aware install CTA. Add a user-facing docs/ccs-bar.md covering
what it is, install via 'ccs bar install', launch, what it shows, uninstall,
and the loopback requirement -- closing the docs-sync gap for the new ccs bar
command.

ui/src/components/profiles/ccs-bar-banner.tsx

@@ -0,0 +1,101 @@
+/**
+ * CCS Bar Feature Banner
+ * Dismissible announcement banner promoting the native macOS menu-bar app.
+ *
+ * Rendered only on macOS: the CTA is an install action (`ccs bar install`) that
+ * has no effect on other platforms, so showing it elsewhere would be misleading.
+ */
+
+/* eslint-disable react-hooks/set-state-in-effect */
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { X, MonitorDot, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const BANNER_DISMISSED_KEY = 'ccs:ccs-bar-banner-dismissed';
+
+// User-facing docs page for CCS Bar (flat Markdown in the ccs/cli docs tree).
+const CCS_BAR_DOCS_URL = 'https://github.com/kaitranntt/ccs/blob/main/docs/ccs-bar.md';
+
+// Lightweight, dependency-free macOS detection. Kept inline because no other
+// component needs platform detection; a shared hook would be premature.
+const isMacOS =
+  typeof navigator !== 'undefined' &&
+  /Mac|iPhone|iPad/i.test(navigator.userAgent || navigator.platform || '');
+
+interface CcsBarBannerProps {
+  onInstallClick?: () => void;
+}
+
+export function CcsBarBanner({ onInstallClick }: CcsBarBannerProps) {
+  const { t } = useTranslation();
+  const [dismissed, setDismissed] = useState(true); // Start hidden to avoid flash
+
+  // Check localStorage on mount
+  useEffect(() => {
+    const isDismissed = localStorage.getItem(BANNER_DISMISSED_KEY) === 'true';
+    setDismissed(isDismissed);
+  }, []);
+
+  const handleDismiss = () => {
+    localStorage.setItem(BANNER_DISMISSED_KEY, 'true');
+    setDismissed(true);
+  };
+
+  if (!isMacOS) return null;
+  if (dismissed) return null;
+
+  return (
+    <div className="bg-gradient-to-r from-accent to-accent/90 text-white px-4 py-3 relative shrink-0">
+      <div className="flex items-center justify-between gap-4 max-w-screen-xl mx-auto">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <div className="p-1.5 bg-white/20 rounded-md shrink-0">
+            <MonitorDot className="w-4 h-4" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="font-medium text-sm">
+              {t('ccsBarBanner.new')}: {t('ccsBarBanner.title')}
+            </p>
+            <p className="text-xs text-white/80 truncate">
+              {t('ccsBarBanner.description')}{' '}
+              <code className="bg-white/15 rounded px-1 py-0.5 font-mono text-[11px]">
+                ccs bar install
+              </code>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {onInstallClick && (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={onInstallClick}
+              className="bg-white text-accent hover:bg-white/90 h-8"
+            >
+              {t('ccsBarBanner.install')}
+            </Button>
+          )}
+          <a
+            href={CCS_BAR_DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-white/80 hover:text-white hidden sm:flex items-center gap-1"
+          >
+            Learn more
+            <ExternalLink className="w-3 h-3" />
+          </a>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={handleDismiss}
+            className="h-7 w-7 text-white/70 hover:text-white hover:bg-white/20"
+          >
+            <X className="w-4 h-4" />
+            <span className="sr-only">Dismiss</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/src/components/profiles/ccs-bar-promo-card.tsx

@@ -0,0 +1,53 @@
+/**
+ * CCS Bar Promo Card
+ * Permanent promotional card for the native macOS menu-bar app, shown in the
+ * providers sidebar footer.
+ *
+ * Rendered only on macOS: the install CTA has no effect elsewhere.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { MonitorDot } from 'lucide-react';
+
+// Lightweight, dependency-free macOS detection (see ccs-bar-banner.tsx).
+const isMacOS =
+  typeof navigator !== 'undefined' &&
+  /Mac|iPhone|iPad/i.test(navigator.userAgent || navigator.platform || '');
+
+interface CcsBarPromoCardProps {
+  onInstallClick: () => void;
+}
+
+export function CcsBarPromoCard({ onInstallClick }: CcsBarPromoCardProps) {
+  const { t } = useTranslation();
+
+  if (!isMacOS) return null;
+
+  return (
+    <div className="p-3 border-t bg-gradient-to-r from-accent/5 to-accent/10 dark:from-accent/10 dark:to-accent/15">
+      <div className="flex items-center gap-2">
+        <div className="p-1.5 bg-accent/10 dark:bg-accent/20 rounded shrink-0">
+          <MonitorDot className="w-4 h-4 text-accent" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-accent dark:text-accent-foreground">
+            {t('ccsBarPromo.title')}
+          </p>
+          <p className="text-[10px] text-muted-foreground truncate">
+            {t('ccsBarPromo.description')}
+          </p>
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onInstallClick}
+          className="h-7 px-2 text-accent hover:text-accent hover:bg-accent/10 dark:hover:bg-accent/20"
+        >
+          <MonitorDot className="w-3 h-3 mr-1" />
+          <span className="text-xs">{t('ccsBarPromo.install')}</span>
+        </Button>
+      </div>
+    </div>
+  );
+}

ui/src/components/profiles/index.ts

@@ -20,5 +20,10 @@ export { OpenRouterModelPicker } from './openrouter-model-picker';
 export { OpenRouterPromoCard } from './openrouter-promo-card';
 export { OpenRouterQuickStart } from './openrouter-quick-start';
 export { AlibabaCodingPlanPromoCard } from './alibaba-coding-plan-promo-card';
+
+// CCS Bar (native macOS menu-bar app) promo components
+export { CcsBarBanner } from './ccs-bar-banner';
+export { CcsBarPromoCard } from './ccs-bar-promo-card';
+
 export { ModelTierMapping } from './model-tier-mapping';
 export type { TierMapping } from './model-tier-mapping';