feat(web): dashboard, wizard, server detail, WS build stream, install snippets

apps/web/components/install-snippets.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useState } from 'react';
+import { buildSnippet, type SnippetInput } from '@/lib/install-snippets';
+import { CodeBlock } from './code-block';
+import { cn } from '@/lib/cn';
+import type { InstallTarget } from '@bmm/types';
+
+const TABS: { id: InstallTarget; label: string }[] = [
+  { id: 'claude-desktop', label: 'Claude Desktop' },
+  { id: 'cursor', label: 'Cursor' },
+  { id: 'chatgpt', label: 'ChatGPT' },
+];
+
+export function InstallSnippets({ input }: { input: SnippetInput }) {
+  const [tab, setTab] = useState<InstallTarget>('claude-desktop');
+  const snippet = buildSnippet(tab, input);
+  return (
+    <div>
+      <div className="flex gap-1 border-b border-[--color-border]">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => setTab(t.id)}
+            className={cn(
+              'relative px-3 py-2 text-[12.5px] transition-colors duration-200 ease-out',
+              tab === t.id
+                ? 'text-[--color-fg]'
+                : 'text-[--color-fg-muted] hover:text-[--color-fg]',
+            )}
+          >
+            {t.label}
+            {tab === t.id && (
+              <span className="absolute inset-x-0 -bottom-px h-px bg-[--color-fg]" />
+            )}
+          </button>
+        ))}
+      </div>
+      <div className="pt-4">
+        <CodeBlock label={snippet.label} code={snippet.code} />
+        {snippet.note && (
+          <p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">{snippet.note}</p>
+        )}
+      </div>
+    </div>
+  );
+}