From cb92a43568854bd0c51e682f87d92307ecccf82f Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 4 Aug 2026 11:59:08 -0700
Subject: [PATCH 1/2] improvement(docs): remove Ask AI, add missing surfaces,
 align sidebar to the app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removes the Ask AI widget, its /api/chat route, and the four deps exclusive
  to it (@ai-sdk/openai, @ai-sdk/react, ai, streamdown). lib/embeddings and
  docsEmbeddings stay — /api/search uses them.
- Adds --surface-7 and --surface-hover, the last two platform surfaces docs
  lacked.
- Aligns the sidebar with the app's canonical nav chrome: px-2.5 -> px-2,
  text-small -> text-sm, hover --surface-3 -> --surface-active, and an active
  hover of --surface-6, matching the Chip the app's sidebar items are built on.
---
 apps/docs/app/[lang]/layout.tsx               |   2 -
 apps/docs/app/api/chat/route.ts               | 363 ------------------
 apps/docs/app/global.css                      |   9 +-
 apps/docs/components/ai/ask-ai-panel.tsx      | 234 -----------
 apps/docs/components/ai/ask-ai.tsx            |  57 ---
 .../docs-layout/sidebar-components.tsx        |  18 +-
 apps/docs/package.json                        |   4 -
 bun.lock                                      |  10 -
 8 files changed, 14 insertions(+), 683 deletions(-)
 delete mode 100644 apps/docs/app/api/chat/route.ts
 delete mode 100644 apps/docs/components/ai/ask-ai-panel.tsx
 delete mode 100644 apps/docs/components/ai/ask-ai.tsx

diff --git a/apps/docs/app/[lang]/layout.tsx b/apps/docs/app/[lang]/layout.tsx
index 4fb73ecee32..f27d3187e69 100644
--- a/apps/docs/app/[lang]/layout.tsx
+++ b/apps/docs/app/[lang]/layout.tsx
@@ -3,7 +3,6 @@ import { defineI18nUI } from 'fumadocs-ui/i18n'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { RootProvider } from 'fumadocs-ui/provider/next'
 import { Geist_Mono, Inter } from 'next/font/google'
-import { AskAI } from '@/components/ai/ask-ai'
 import {
   SidebarFolder,
   SidebarItem,
@@ -124,7 +123,6 @@ export default async function Layout({ children, params }: LayoutProps) {
             {children}
           </DocsLayout>
           <Footer />
-          <AskAI locale={lang} />
         </RootProvider>
       </body>
     </html>
diff --git a/apps/docs/app/api/chat/route.ts b/apps/docs/app/api/chat/route.ts
deleted file mode 100644
index 915fe9a39c4..00000000000
--- a/apps/docs/app/api/chat/route.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-import { openai } from '@ai-sdk/openai'
-import {
-  convertToModelMessages,
-  jsonSchema,
-  stepCountIs,
-  streamText,
-  tool,
-  type UIMessage,
-} from 'ai'
-import { sql } from 'drizzle-orm'
-import { db, docsEmbeddings } from '@/lib/db'
-import { generateSearchEmbedding } from '@/lib/embeddings'
-
-export const runtime = 'nodejs'
-export const maxDuration = 30
-
-/** Model used for the Ask AI chat. Override with OPENAI_CHAT_MODEL in the environment. */
-const CHAT_MODEL = process.env.OPENAI_CHAT_MODEL || 'gpt-5.4-mini'
-
-/** Max documentation chunks returned per search to ground an answer. */
-const SEARCH_LIMIT = 6
-
-/** Candidates pulled before locale filtering, so a locale still yields SEARCH_LIMIT results. */
-const SEARCH_CANDIDATES = SEARCH_LIMIT * 4
-
-/** Minimum cosine similarity for an English vector match (mirrors the site search route). */
-const SIMILARITY_THRESHOLD = 0.6
-
-/** Locales the docs are published in (mirrors the site search route). */
-const KNOWN_LOCALES = ['en', 'es', 'fr', 'de', 'ja', 'zh']
-const DEFAULT_LOCALE = 'en'
-
-/** Postgres full-text config per locale (mirrors the site search route). */
-const TS_CONFIG: Record<string, string> = {
-  en: 'english',
-  es: 'spanish',
-  fr: 'french',
-  de: 'german',
-  ja: 'simple',
-  zh: 'simple',
-}
-
-/**
- * Abuse guards. This endpoint proxies a paid LLM, so an unauthenticated public
- * route is a target for scripted "free inference". These bounds cap the cost of
- * any single request; an in-memory per-IP rate limit (below) caps volume on the
- * hot path. A shared-store rate limit, a provider spend cap, and edge bot
- * protection remain the durable controls (see the PR checklist).
- *
- * The size cap counts only user-authored text — NOT the conversation history,
- * assistant turns, or retrieved doc chunks we add via the searchDocs tool, which
- * legitimately grow large over a multi-turn chat.
- */
-const MAX_MESSAGES = 200
-const MAX_USER_INPUT_CHARS = 400_000
-const MAX_OUTPUT_TOKENS = 4000
-const MAX_STEPS = 6
-/** Backstop on the sanitized model payload — bounds total LLM input (e.g. stuffed assistant text). */
-const MAX_TOTAL_CHARS = 1_000_000
-
-/**
- * Per-IP rate limit. Fixed window, in-memory: this bounds volume from a single
- * source on a warm instance without external infra. It is best-effort on
- * serverless (state is per-instance, not shared across regions/cold starts);
- * a shared store (e.g. Vercel KV) and an edge WAF remain the durable controls,
- * but this closes the "no volume limit at all" gap on the hot path.
- */
-const RATE_LIMIT_MAX = 20
-const RATE_LIMIT_WINDOW_MS = 60_000
-const rateLimitHits = new Map<string, { count: number; resetAt: number }>()
-
-/** Resolve the client IP from forwarding headers, falling back to a shared bucket. */
-function getClientIp(req: Request): string {
-  const forwarded = req.headers.get('x-forwarded-for')
-  if (forwarded) return forwarded.split(',')[0].trim()
-  return req.headers.get('x-real-ip') ?? 'unknown'
-}
-
-/** Fixed-window check. Returns retry-after seconds when the caller is over the limit, else null. */
-function rateLimit(ip: string, now: number): number | null {
-  const entry = rateLimitHits.get(ip)
-  if (!entry || now >= entry.resetAt) {
-    rateLimitHits.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS })
-    return null
-  }
-  if (entry.count >= RATE_LIMIT_MAX) {
-    return Math.ceil((entry.resetAt - now) / 1000)
-  }
-  entry.count += 1
-  return null
-}
-
-/** Drop expired buckets so the Map doesn't grow unbounded on a long-lived instance. */
-function sweepRateLimit(now: number): void {
-  if (rateLimitHits.size < 10_000) return
-  for (const [ip, entry] of rateLimitHits) {
-    if (now >= entry.resetAt) rateLimitHits.delete(ip)
-  }
-}
-
-/** A structurally valid UI message: has a role and a parts array. */
-function isValidMessage(message: unknown): message is UIMessage {
-  return (
-    typeof message === 'object' &&
-    message !== null &&
-    typeof (message as { role?: unknown }).role === 'string' &&
-    Array.isArray((message as { parts?: unknown }).parts)
-  )
-}
-
-/** Total length of user-authored text across the conversation. */
-function userInputChars(messages: UIMessage[]): number {
-  let total = 0
-  for (const message of messages) {
-    if (message.role !== 'user') continue
-    for (const part of message.parts) {
-      if (part.type === 'text' && typeof part.text === 'string') total += part.text.length
-    }
-  }
-  return total
-}
-
-/**
- * Strip everything the model shouldn't trust from client-supplied history:
- * drop `system` messages (client-injected instructions) and every non-text part
- * (e.g. crafted tool results faking searchDocs output). Only user/assistant text
- * survives, so grounding comes from the server-run searchDocs tool — not the
- * client's payload.
- */
-function sanitizeMessages(messages: UIMessage[]): UIMessage[] {
-  return messages
-    .filter((message) => message.role === 'user' || message.role === 'assistant')
-    .map((message) => ({
-      ...message,
-      parts: message.parts.filter((part) => part.type === 'text' && typeof part.text === 'string'),
-    }))
-    .filter((message) => message.parts.length > 0)
-}
-
-/**
- * Reject obvious cross-origin calls. Same-origin browser requests send an
- * `Origin` header matching the host; we allow those, plus any host in
- * DOCS_ALLOWED_ORIGINS (comma-separated). Requests with no Origin (e.g. curl)
- * are allowed through to the cost caps rather than blocked, since Origin is
- * trivially spoofable and is a filter, not a security boundary.
- */
-function isAllowedOrigin(req: Request): boolean {
-  const origin = req.headers.get('origin')
-  if (!origin) return true
-
-  let originHost: string
-  try {
-    originHost = new URL(origin).host.toLowerCase()
-  } catch {
-    return false
-  }
-
-  const forwardedHost = req.headers.get('x-forwarded-host') ?? req.headers.get('host')
-  const requestHost = forwardedHost?.split(',')[0].trim().toLowerCase()
-  if (requestHost && originHost === requestHost) return true
-
-  const allowlist = (process.env.DOCS_ALLOWED_ORIGINS ?? '')
-    .split(',')
-    .map((value) => value.trim().toLowerCase())
-    .filter(Boolean)
-  return allowlist.includes(originHost)
-}
-
-const SYSTEM_PROMPT = `You are the documentation assistant for Sim — the open-source AI workspace where teams build, deploy, and manage AI agents.
-
-Answer questions about Sim using the documentation. Always call the searchDocs tool before answering anything specific about Sim's features, configuration, or usage — do not answer from memory. Base your answer only on the returned documentation; if the docs do not cover the question, say so plainly rather than guessing.
-
-Guidelines:
-- Be direct and concrete. Lead with the answer, then the detail.
-- Reference the relevant pages by their titles so the user knows where to read more.
-- When you show configuration or code, keep it minimal and correct.
-- The agent is called "Sim" and the chat surface is "Chat" — never say "Mothership" or "copilot".
-- If a question is unrelated to Sim, briefly say it's outside the docs' scope.`
-
-const SEARCH_COLUMNS = {
-  chunkId: docsEmbeddings.chunkId,
-  title: docsEmbeddings.headerText,
-  url: docsEmbeddings.sourceLink,
-  content: docsEmbeddings.chunkText,
-  sourceDocument: docsEmbeddings.sourceDocument,
-}
-
-/** Reciprocal-rank-fusion constant, matching the site search route. */
-const RRF_K = 60
-
-/**
- * SQL predicate selecting only the locale's documents, so the row limit applies
- * to matching rows: non-English docs are prefixed with their locale segment;
- * English is everything not prefixed with another locale.
- */
-function localeFilter(locale: string) {
-  const firstSegment = sql`split_part(${docsEmbeddings.sourceDocument}, '/', 1)`
-  if (locale === DEFAULT_LOCALE) {
-    const others = KNOWN_LOCALES.filter((l) => l !== DEFAULT_LOCALE)
-    return sql`${firstSegment} not in (${sql.join(
-      others.map((l) => sql`${l}`),
-      sql`, `
-    )})`
-  }
-  return sql`${firstSegment} = ${locale}`
-}
-
-type SearchRow = {
-  chunkId: string
-  title: string
-  url: string
-  content: string
-  sourceDocument: string
-}
-
-/**
- * Retrieve candidate chunks for grounding, mirroring the site search route's
- * hybrid strategy: Postgres full-text keyword search for every locale, plus
- * vector similarity (thresholded) for English — fused by reciprocal rank so a
- * page found by either signal can ground the answer.
- */
-async function searchDocs(query: string, locale: string) {
-  const tsConfig = TS_CONFIG[locale] ?? 'simple'
-
-  // Each retrieval path is best-effort and independent: a failure in one still
-  // lets the other ground the answer (both empty just yields no grounding).
-  let keywordRows: SearchRow[] = []
-  try {
-    keywordRows = await db
-      .select(SEARCH_COLUMNS)
-      .from(docsEmbeddings)
-      .where(
-        sql`${docsEmbeddings.chunkTextTsv} @@ plainto_tsquery(${tsConfig}, ${query}) and ${localeFilter(locale)}`
-      )
-      .orderBy(
-        sql`ts_rank(${docsEmbeddings.chunkTextTsv}, plainto_tsquery(${tsConfig}, ${query})) DESC`
-      )
-      .limit(SEARCH_CANDIDATES)
-  } catch (error) {
-    console.error('Ask AI keyword search failed:', error)
-  }
-
-  let vectorRows: SearchRow[] = []
-  if (locale === DEFAULT_LOCALE) {
-    // Vector retrieval (embedding call + pgvector query) is best-effort: if it
-    // fails, fall back to the keyword rows already fetched rather than losing all
-    // grounding for the turn.
-    try {
-      const embedding = await generateSearchEmbedding(query)
-      const vectorLiteral = JSON.stringify(embedding)
-      vectorRows = await db
-        .select(SEARCH_COLUMNS)
-        .from(docsEmbeddings)
-        .where(
-          sql`1 - (${docsEmbeddings.embedding} <=> ${vectorLiteral}::vector) >= ${SIMILARITY_THRESHOLD} and ${localeFilter(locale)}`
-        )
-        .orderBy(sql`${docsEmbeddings.embedding} <=> ${vectorLiteral}::vector`)
-        .limit(SEARCH_CANDIDATES)
-    } catch (error) {
-      console.error('Ask AI vector search failed; using keyword results only:', error)
-    }
-  }
-
-  // Reciprocal rank fusion across the two rankings, deduped by chunk.
-  const scores = new Map<string, number>()
-  const rowById = new Map<string, SearchRow>()
-  for (const list of [vectorRows, keywordRows]) {
-    list.forEach((row, index) => {
-      scores.set(row.chunkId, (scores.get(row.chunkId) ?? 0) + 1 / (RRF_K + index + 1))
-      if (!rowById.has(row.chunkId)) rowById.set(row.chunkId, row)
-    })
-  }
-
-  return [...rowById.values()]
-    .sort((a, b) => (scores.get(b.chunkId) ?? 0) - (scores.get(a.chunkId) ?? 0))
-    .slice(0, SEARCH_LIMIT)
-    .map((row) => ({
-      title: row.title,
-      url: row.url,
-      content: row.content,
-    }))
-}
-
-export async function POST(req: Request) {
-  if (!isAllowedOrigin(req)) {
-    return new Response('Forbidden', { status: 403 })
-  }
-
-  const now = Date.now()
-  sweepRateLimit(now)
-  const retryAfter = rateLimit(getClientIp(req), now)
-  if (retryAfter !== null) {
-    return new Response('Too many requests', {
-      status: 429,
-      headers: { 'Retry-After': String(retryAfter) },
-    })
-  }
-
-  let body: { messages: UIMessage[]; locale?: string }
-  try {
-    body = await req.json()
-  } catch {
-    return new Response('Invalid JSON', { status: 400 })
-  }
-  const { messages } = body
-  const locale = KNOWN_LOCALES.includes(body.locale ?? '')
-    ? (body.locale as string)
-    : DEFAULT_LOCALE
-
-  if (!Array.isArray(messages) || messages.length === 0 || messages.length > MAX_MESSAGES) {
-    return new Response('Invalid request', { status: 400 })
-  }
-  if (!messages.every(isValidMessage)) {
-    return new Response('Invalid request', { status: 400 })
-  }
-  if (userInputChars(messages) > MAX_USER_INPUT_CHARS) {
-    return new Response('Request too large', { status: 413 })
-  }
-
-  const modelMessages = sanitizeMessages(messages)
-  if (modelMessages.length === 0) {
-    return new Response('Invalid request', { status: 400 })
-  }
-  // Bound what actually reaches the model. Measured AFTER sanitization, so the
-  // prior searchDocs tool outputs that accumulate in client history (and are
-  // stripped here) don't count — only user/assistant text the model will see.
-  if (JSON.stringify(modelMessages).length > MAX_TOTAL_CHARS) {
-    return new Response('Request too large', { status: 413 })
-  }
-
-  const result = streamText({
-    model: openai(CHAT_MODEL),
-    system: SYSTEM_PROMPT,
-    messages: convertToModelMessages(modelMessages),
-    stopWhen: stepCountIs(MAX_STEPS),
-    maxOutputTokens: MAX_OUTPUT_TOKENS,
-    tools: {
-      searchDocs: tool({
-        description:
-          'Search the Sim documentation for relevant content. Use this before answering any question about Sim.',
-        /**
-         * The SDK's own schema helper instead of a zod schema: the `ai`
-         * package's zod-v4 typings lag the workspace zod version, so a zod
-         * object here fails the tool() overloads whenever the two drift.
-         */
-        inputSchema: jsonSchema<{ query: string }>({
-          type: 'object',
-          properties: {
-            query: {
-              type: 'string',
-              description: 'A focused natural-language search query.',
-            },
-          },
-          required: ['query'],
-          additionalProperties: false,
-        }),
-        execute: async ({ query }) => searchDocs(query, locale),
-      }),
-    },
-  })
-
-  return result.toUIMessageStreamResponse()
-}
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index d7709776139..e608f7d5a4d 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -31,11 +31,6 @@ body {
   --text-md: 16px;
 }
 
-/* Hide the floating Ask Sim widget while a workflow-preview lightbox is open. */
-body.wp-lightbox-open [aria-label="Ask Sim"] {
-  display: none;
-}
-
 /* Pure white light mode background */
 :root:not(.dark) {
   --color-fd-background: hsl(0, 0%, 100%) !important;
@@ -64,7 +59,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-4: #f5f5f5;
   --surface-5: #f3f3f3;
   --surface-6: #e5e5e5;
+  --surface-7: #d9d9d9;
   --surface-active: #ececec;
+  --surface-hover: #f2f2f2;
   --border: #d8d8d8;
   /** Legacy neutral-border aliases. New work should use --border. */
   --border-1: var(--border);
@@ -133,7 +130,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-4: #292929;
   --surface-5: #363636;
   --surface-6: #454545;
+  --surface-7: #505050;
   --surface-active: #2c2c2c;
+  --surface-hover: #262626;
   --border: #444444;
   /** Legacy neutral-border aliases. New work should use --border. */
   --border-1: var(--border);
diff --git a/apps/docs/components/ai/ask-ai-panel.tsx b/apps/docs/components/ai/ask-ai-panel.tsx
deleted file mode 100644
index c55b05dca0c..00000000000
--- a/apps/docs/components/ai/ask-ai-panel.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-'use client'
-
-import { type FormEvent, useEffect, useMemo, useRef, useState } from 'react'
-import { useChat } from '@ai-sdk/react'
-import { ArrowUp, Square, Task, X } from '@sim/emcn/icons'
-import { DefaultChatTransport } from 'ai'
-import { Streamdown } from 'streamdown'
-import { cn } from '@/lib/utils'
-import 'streamdown/styles.css'
-
-interface DocSource {
-  title: string
-  url: string
-}
-
-/** Pull the deduped doc sources surfaced by the searchDocs tool out of a message's parts. */
-function getSources(parts: ReadonlyArray<{ type: string; [key: string]: unknown }>): DocSource[] {
-  const seen = new Set<string>()
-  const sources: DocSource[] = []
-
-  for (const part of parts) {
-    if (part.type !== 'tool-searchDocs') continue
-    const output = (part as { output?: unknown }).output
-    if (!Array.isArray(output)) continue
-    for (const item of output as DocSource[]) {
-      if (!item?.url || seen.has(item.url)) continue
-      seen.add(item.url)
-      sources.push({ title: item.title, url: item.url })
-    }
-  }
-
-  return sources
-}
-
-/** Concatenate the streamed text parts of a message. */
-function getText(parts: ReadonlyArray<{ type: string; [key: string]: unknown }>): string {
-  return parts
-    .filter((part) => part.type === 'text')
-    .map((part) => (part as unknown as { text: string }).text)
-    .join('')
-}
-
-interface AskAIPanelProps {
-  /** Active docs locale, forwarded so retrieval is scoped to the reader's language. */
-  locale: string
-  open: boolean
-  onClose: () => void
-}
-
-export function AskAIPanel({ locale, open, onClose }: AskAIPanelProps) {
-  const [input, setInput] = useState('')
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-
-  const transport = useMemo(() => new DefaultChatTransport({ api: '/api/chat' }), [])
-
-  const { messages, sendMessage, status, stop, error } = useChat({ transport })
-
-  const isBusy = status === 'submitted' || status === 'streaming'
-
-  const handleClose = () => {
-    stop()
-    onClose()
-  }
-
-  useEffect(() => {
-    if (!open) return
-    textareaRef.current?.focus()
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        handleClose()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
-  }, [open])
-
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
-  }, [messages])
-
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault()
-    const text = input.trim()
-    if (!text || isBusy) return
-    sendMessage({ text }, { body: { locale } })
-    setInput('')
-  }
-
-  if (!open) return null
-
-  return (
-    <div
-      role='dialog'
-      aria-label='Ask Sim'
-      className='fixed right-4 bottom-4 z-50 flex h-[600px] max-h-[calc(100vh-2rem)] w-[400px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--surface-5)] shadow-[var(--shadow-medium)] dark:bg-[var(--surface-4)]'
-    >
-      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-4 py-3'>
-        <span className='flex items-center gap-1.5 font-season text-[var(--text-body)] text-sm'>
-          <Task className='size-[16px] text-[var(--text-icon)]' />
-          Ask Sim
-        </span>
-        <button
-          type='button'
-          aria-label='Close'
-          onClick={handleClose}
-          className='flex size-7 items-center justify-center rounded-lg text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)]'
-        >
-          <X className='size-[16px]' />
-        </button>
-      </div>
-
-      <div ref={scrollRef} className='flex-1 space-y-4 overflow-y-auto px-4 py-4'>
-        {messages.length === 0 && (
-          <p className='text-[var(--text-muted)] text-sm'>
-            Ask anything about building, deploying, and managing AI agents in Sim.
-          </p>
-        )}
-
-        {messages.map((message, index) => {
-          const text = getText(message.parts)
-          const isStreaming = isBusy && index === messages.length - 1
-          const sources = message.role === 'assistant' ? getSources(message.parts) : []
-          return (
-            <div
-              key={message.id}
-              className={cn(
-                'flex flex-col gap-1.5',
-                message.role === 'user' ? 'items-end' : 'items-start'
-              )}
-            >
-              {message.role === 'user' ? (
-                <div className='max-w-[85%] whitespace-pre-wrap rounded-[16px] bg-[var(--surface-5)] px-3 py-2 text-[var(--text-primary)] text-base leading-[23px]'>
-                  {text}
-                </div>
-              ) : (
-                <div className='max-w-full text-[var(--text-primary)] text-base'>
-                  {text ? (
-                    <Streamdown
-                      className={cn(
-                        'space-y-3 text-[var(--text-primary)] text-base leading-relaxed',
-                        '[&_a]:text-[var(--text-primary)] [&_a]:underline [&_a]:decoration-dashed [&_a]:underline-offset-4',
-                        '[&_strong]:font-semibold',
-                        '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold',
-                        '[&_li]:my-1 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5',
-                        '[&_code]:font-mono [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--surface-5)] [&_pre]:p-3 [&_pre]:text-small'
-                      )}
-                    >
-                      {text}
-                    </Streamdown>
-                  ) : isStreaming ? (
-                    '…'
-                  ) : sources.length === 0 ? (
-                    <span className='text-[var(--text-muted)]'>No answer returned.</span>
-                  ) : null}
-                </div>
-              )}
-              {sources.length > 0 && (
-                <div className='flex max-w-[90%] flex-wrap gap-1.5'>
-                  {sources.map((source) => (
-                    <a
-                      key={source.url}
-                      href={source.url}
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      className='rounded-lg border border-[var(--border-1)] px-2 py-0.5 text-[var(--text-muted)] text-xs transition-colors hover:bg-[var(--surface-active)]'
-                    >
-                      {source.title || source.url}
-                    </a>
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        })}
-
-        {error && (
-          <p className='text-[var(--text-muted)] text-sm'>
-            Something went wrong. Please try again.
-          </p>
-        )}
-      </div>
-
-      <form onSubmit={handleSubmit} className='px-3 pb-3'>
-        <div className='flex items-end gap-2 rounded-2xl border border-[var(--border-1)] bg-white px-2.5 py-1.5 dark:bg-[var(--surface-5)]'>
-          <textarea
-            ref={textareaRef}
-            aria-label='Ask Sim about the docs'
-            value={input}
-            onChange={(event) => setInput(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault()
-                handleSubmit(event)
-              }
-            }}
-            rows={1}
-            placeholder='Ask Sim about the docs…'
-            className='max-h-32 flex-1 resize-none bg-transparent py-1 font-season text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
-          />
-          {isBusy ? (
-            <button
-              type='button'
-              aria-label='Stop'
-              onClick={() => stop()}
-              className='flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-colors hover:bg-[#575757] dark:bg-[#e0e0e0] dark:hover:bg-[#cfcfcf]'
-            >
-              <Square className='size-[12px] fill-white text-white dark:fill-black dark:text-black' />
-            </button>
-          ) : (
-            <button
-              type='submit'
-              aria-label='Send'
-              disabled={!input.trim()}
-              className={cn(
-                'flex size-[28px] shrink-0 items-center justify-center rounded-full transition-colors',
-                input.trim()
-                  ? 'bg-[#383838] hover:bg-[#575757] dark:bg-[#e0e0e0] dark:hover:bg-[#cfcfcf]'
-                  : 'bg-[#808080]'
-              )}
-            >
-              <ArrowUp className='size-[16px] text-white dark:text-black' />
-            </button>
-          )}
-        </div>
-      </form>
-    </div>
-  )
-}
diff --git a/apps/docs/components/ai/ask-ai.tsx b/apps/docs/components/ai/ask-ai.tsx
deleted file mode 100644
index 894a9d2265d..00000000000
--- a/apps/docs/components/ai/ask-ai.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import { Task } from '@sim/emcn/icons'
-import dynamic from 'next/dynamic'
-
-const AskAIPanel = dynamic(() => import('./ask-ai-panel').then((m) => m.AskAIPanel), {
-  ssr: false,
-  loading: () => (
-    <div
-      aria-hidden
-      className='fixed right-4 bottom-4 z-50 flex size-11 items-center justify-center rounded-full border border-[var(--border-1)] bg-[var(--surface-5)] shadow-[var(--shadow-medium)] dark:bg-[var(--surface-4)]'
-    >
-      <Task className='size-[16px] animate-pulse text-[var(--text-icon)]' />
-    </div>
-  ),
-})
-
-interface AskAIProps {
-  /** Active docs locale, forwarded so retrieval is scoped to the reader's language. */
-  locale: string
-}
-
-export function AskAI({ locale }: AskAIProps) {
-  const [open, setOpen] = useState(false)
-  const [hasOpened, setHasOpened] = useState(false)
-  const openButtonRef = useRef<HTMLButtonElement>(null)
-
-  const handleOpen = () => {
-    setHasOpened(true)
-    setOpen(true)
-  }
-
-  const handleClose = () => {
-    setOpen(false)
-    openButtonRef.current?.focus()
-  }
-
-  return (
-    <>
-      {!open && (
-        <button
-          ref={openButtonRef}
-          type='button'
-          aria-label='Ask Sim'
-          onClick={handleOpen}
-          className='fixed right-4 bottom-4 z-50 flex h-11 items-center gap-1.5 rounded-full border border-[var(--border-1)] bg-[var(--surface-5)] px-4 font-season text-[var(--text-body)] text-sm shadow-[var(--shadow-medium)] transition-colors hover:bg-[var(--surface-active)] dark:bg-[var(--surface-4)]'
-        >
-          <Task className='size-[16px] text-[var(--text-icon)]' />
-          Ask Sim
-        </button>
-      )}
-
-      {hasOpened && <AskAIPanel locale={locale} open={open} onClose={handleClose} />}
-    </>
-  )
-}
diff --git a/apps/docs/components/docs-layout/sidebar-components.tsx b/apps/docs/components/docs-layout/sidebar-components.tsx
index cb7cb3e8dda..b59a3a4f2e9 100644
--- a/apps/docs/components/docs-layout/sidebar-components.tsx
+++ b/apps/docs/components/docs-layout/sidebar-components.tsx
@@ -56,14 +56,16 @@ const ITEM_BASE =
 const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)] font-medium text-[var(--text-primary)]'
 
 const ITEM_DESKTOP =
-  'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-small lg:leading-tight'
+  'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2 lg:py-1.5 lg:font-normal lg:text-sm lg:leading-tight'
 const ITEM_TEXT = 'lg:text-[var(--text-body)]'
-const ITEM_HOVER = 'lg:hover:bg-[var(--surface-3)]'
-const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
+const ITEM_HOVER = 'lg:hover:bg-[var(--surface-active)]'
+const ITEM_ACTIVE =
+  'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
 
 const FOLDER_TEXT = 'lg:text-[var(--text-body)] lg:font-medium'
-const FOLDER_HOVER = 'lg:hover:bg-[var(--surface-3)]'
-const FOLDER_ACTIVE = 'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)]'
+const FOLDER_HOVER = 'lg:hover:bg-[var(--surface-active)]'
+const FOLDER_ACTIVE =
+  'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
 
 export function SidebarItem({ item }: { item: Item }) {
   const pathname = usePathname()
@@ -144,7 +146,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
                 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
                 'text-[var(--text-muted)] hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]',
                 active && ITEM_ACTIVE_MOBILE,
-                'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-small lg:leading-tight',
+                'lg:block lg:flex-1 lg:rounded-lg lg:px-2 lg:py-1.5 lg:text-sm lg:leading-tight',
                 FOLDER_TEXT,
                 !active && FOLDER_HOVER,
                 active && FOLDER_ACTIVE
@@ -157,7 +159,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
                 onClick={toggleOpen}
                 className={cn(
                   'rounded-md p-1 hover:bg-[var(--surface-active)]',
-                  'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors lg:hover:bg-[var(--surface-3)]'
+                  'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors lg:hover:bg-[var(--surface-active)]'
                 )}
                 aria-label={open ? 'Collapse' : 'Expand'}
               >
@@ -171,7 +173,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
             className={cn(
               'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
               'text-[var(--text-muted)] hover:bg-[var(--surface-active)]',
-              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-small lg:leading-tight',
+              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2 lg:py-1.5 lg:text-left lg:text-sm lg:leading-tight',
               FOLDER_TEXT,
               FOLDER_HOVER
             )}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 2bcc1ec4ebe..c97a7a6db54 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -17,12 +17,9 @@
     "format:check": "biome format ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "2.0.107",
-    "@ai-sdk/react": "2.0.205",
     "@sim/db": "workspace:*",
     "@sim/emcn": "workspace:*",
     "@sim/workflow-renderer": "workspace:*",
-    "ai": "5.0.203",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.2",
@@ -36,7 +33,6 @@
     "react-dom": "19.2.4",
     "remark-breaks": "^4.0.0",
     "shiki": "4.3.1",
-    "streamdown": "2.5.0",
     "tailwind-merge": "^3.0.2",
     "reactflow": "^11.11.4",
     "framer-motion": "^12.5.0",
diff --git a/bun.lock b/bun.lock
index a2b0ebf2994..fe7e42de0de 100644
--- a/bun.lock
+++ b/bun.lock
@@ -61,12 +61,9 @@
       "name": "docs",
       "version": "0.0.0",
       "dependencies": {
-        "@ai-sdk/openai": "2.0.107",
-        "@ai-sdk/react": "2.0.205",
         "@sim/db": "workspace:*",
         "@sim/emcn": "workspace:*",
         "@sim/workflow-renderer": "workspace:*",
-        "ai": "5.0.203",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "drizzle-orm": "^0.45.2",
@@ -82,7 +79,6 @@
         "reactflow": "^11.11.4",
         "remark-breaks": "^4.0.0",
         "shiki": "4.3.1",
-        "streamdown": "2.5.0",
         "tailwind-merge": "^3.0.2",
         "zod": "4.3.6",
       },
@@ -742,8 +738,6 @@
 
     "@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@3.0.26", "", { "dependencies": { "@ai-sdk/provider": "2.0.3", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.6" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-dNciNI4knep6z3cqDNng7yORCcBnEDBHZYj8rJLcLn9pLzEtNVkf6WLg9HR6AnVDDRxHsUeGAEqyF8M+FAtRgg=="],
 
-    "@ai-sdk/react": ["@ai-sdk/react@2.0.205", "", { "dependencies": { "@ai-sdk/provider-utils": "3.0.26", "ai": "5.0.203", "swr": "^2.2.5", "throttleit": "2.1.0" }, "peerDependencies": { "react": "^18 || ~19.0.1 || ~19.1.2 || ^19.2.1", "zod": "^3.25.76 || ^4.1.8" }, "optionalPeers": ["zod"] }, "sha512-9EmBl2wa2lqbYoSImdAwmp1Wa9r7suJdEOWdfnRPlDSBLNYo2BfwD0MGSULYLlX9T7nz8Vfo1+EwvwctdN1HNQ=="],
-
     "@ai-sdk/togetherai": ["@ai-sdk/togetherai@1.0.43", "", { "dependencies": { "@ai-sdk/openai-compatible": "1.0.40", "@ai-sdk/provider": "2.0.3", "@ai-sdk/provider-utils": "3.0.26" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-FwcKwNKSjkCc80yD7JFtHOXxroTpFD/FF84jfiGlRGTfv2rQpv3Pto9h/NcKjmDXXr/H01Rzo/TodrsLXq0B8g=="],
 
     "@ai-sdk/xai": ["@ai-sdk/xai@2.0.74", "", { "dependencies": { "@ai-sdk/openai-compatible": "1.0.40", "@ai-sdk/provider": "2.0.3", "@ai-sdk/provider-utils": "3.0.26" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-Ff24f/G13EjKKw411XQh08/owBorFvaLf3LEuDvDnDz4XePpkYN6oXdyHpZCDrvUD0/+7hbwaGwTXfm5nmqPGQ=="],
@@ -4266,8 +4260,6 @@
 
     "svix": ["svix@1.88.0", "", { "dependencies": { "standardwebhooks": "1.0.0", "uuid": "^10.0.0" } }, "sha512-vm/JrrUd3bVyBE+3L33TIyVSs8gS5fYx7lrISvKlDJXTYX1ACH4REX8P1tHxsSKoZi/rvifM1t0XRc5Vc45THw=="],
 
-    "swr": ["swr@2.4.2", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-ej644Y2bvkIajfR32KGeSSdBXQW+ScjGjkybZgSE7kFpk9eGnV44XY9FJylXi+W75pavSX1PVNB57W5EbhGIYw=="],
-
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
 
     "systeminformation": ["systeminformation@5.33.1", "", { "os": "!aix", "bin": { "systeminformation": "lib/cli.js" } }, "sha512-DEN6ICHk3Tk0Uf/hrAHh7xlt7iL5CJFBtPZinA0H62DrGG/KPKqq/Nzj6lCXPS4Ay/sf/14zNnk9LpqKzBIc+w=="],
@@ -4306,8 +4298,6 @@
 
     "three": ["three@0.177.0", "", {}, "sha512-EiXv5/qWAaGI+Vz2A+JfavwYCMdGjxVsrn3oBwllUoqYeaBO75J63ZfyaQKoiLrqNHoTlUc6PFgMXnS0kI45zg=="],
 
-    "throttleit": ["throttleit@2.1.0", "", {}, "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw=="],
-
     "tiny-async-pool": ["tiny-async-pool@1.3.0", "", { "dependencies": { "semver": "^5.5.0" } }, "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA=="],
 
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],

From 0e5d70ab538e561ee2d20174958b721b1163b8a1 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 4 Aug 2026 12:38:07 -0700
Subject: [PATCH 2/2] fix(docs): make the sidebar hover CSS agree with the
 utilities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review caught that the sidebar hover alignment in this PR had no visual
effect. `global.css` carries !important rules for both the link and button
sidebar items — they exist to beat fumadocs' own styles — and they were still
forcing the pre-alignment values: --surface-3 on an inactive hover, and
--surface-active on an active hover.

So the Tailwind utilities were dead on arrival. The global rules now carry the
app's values instead (--surface-active inactive, --surface-6 active), matching
the utilities rather than fighting them, with a comment noting the two must
move together.
---
 apps/docs/app/global.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index e608f7d5a4d..1047524cc3d 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -462,16 +462,18 @@ html #nd-sidebar button[data-active="true"] {
   color: var(--text-body) !important;
 }
 
-/* Hover state — platform --surface-3 */
+/* Hover state — the app's nav Chip hovers to --surface-active. These rules must
+   carry !important to beat fumadocs' own sidebar styles, which also means they
+   override the Tailwind hover utilities on the items; keep the two in step. */
 html #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
 html #nd-sidebar button:hover:not([data-active="true"]) {
-  background-color: var(--surface-3) !important;
+  background-color: var(--surface-active) !important;
 }
 
-/* Active items don't change on hover */
+/* An active item darkens one surface on hover, matching the app's active Chip */
 html #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
 html #nd-sidebar button[data-active="true"]:hover {
-  background-color: var(--surface-active) !important;
+  background-color: var(--surface-6) !important;
   color: var(--text-body) !important;
 }