jamdesk 1.1.29 → 1.1.30

package/vendored/components/navigation/Header.tsx

@@ -17,6 +17,8 @@ import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useChatOpenHandler } from '@/hooks/useChatPanel';
+import { extractLanguageFromPath } from '@/lib/language-utils';
+import { getUiStrings } from '@/lib/ui-strings';
 
 interface HeaderProps {
   config: DocsConfig;
@@ -44,6 +46,10 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
   const tabsDropdownRef = useRef<HTMLDivElement>(null);
   const pathname = usePathname();
   const linkPrefix = useLinkPrefix();
+  const currentLang = extractLanguageFromPath(pathname || '/');
+  const ui = getUiStrings(currentLang);
+  const resolveLabel = (label: string | undefined, labels?: Record<string, string>, fallback?: string) =>
+    (currentLang && labels?.[currentLang]) || label || fallback || '';
 
   // In sidebar-logo layout, logo is in sidebar, not header
   const showLogoInHeader = layout === 'header-logo';
@@ -274,7 +280,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
             <button
               onClick={onToggleSidebar}
               className="lg:hidden p-1.5 -ml-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors cursor-pointer"
-              aria-label="Toggle menu"
+              aria-label={ui.toggleMenu}
             >
               {isSidebarOpen ? (
                 <i className="fa-solid fa-xmark text-[18px]" aria-hidden="true" />
@@ -302,10 +308,10 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                 <button
                   onClick={() => setIsSearchOpen(true)}
                   className="flex items-center gap-3 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
-                  aria-label="Search documentation"
+                  aria-label={ui.search}
                 >
                   <i className="fa-solid fa-magnifying-glass text-[14px] flex-shrink-0" aria-hidden="true" />
-                  <span>Search</span>
+                  <span>{ui.search}</span>
                   <kbd className="hidden sm:inline-flex items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded">
                     <span className="text-sm leading-none">⌘</span>
                     <span>K</span>
@@ -315,11 +321,11 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                   <button
                     onClick={onChatOpen}
                     className="flex items-center gap-3 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-hover)] cursor-pointer transition-colors text-sm text-[var(--color-text-muted)]"
-                    aria-label="Ask AI"
-                    title="Ask AI (⌘I)"
+                    aria-label={ui.askAi}
+                    title={`${ui.askAi} (⌘I)`}
                   >
                     <i className="fa-solid fa-sparkles text-[14px] text-[var(--color-accent)]" aria-hidden="true" />
-                    <span>Ask AI</span>
+                    <span>{ui.askAi}</span>
                     <kbd className="hidden sm:inline-flex items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded">
                       <span className="text-sm leading-none">⌘</span>
                       <span>I</span>
@@ -359,7 +365,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                     <Link
                       key={tab.name}
                       href={tab.path}
-                      prefetch={false}
+                      prefetch={true}
                       className={`relative flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors
                         ${tab.isActive
                           ? 'text-[var(--color-text-primary)]'
@@ -386,7 +392,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                           : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
                         }`}
                     >
-                      <span>More</span>
+                      <span>{ui.more}</span>
                       <i className={`fa-solid fa-chevron-down text-[14px] transition-transform ${isTabsDropdownOpen ? 'rotate-180' : ''}`} aria-hidden="true" />
                       {isOverflowActive && (
                         <span className="absolute bottom-0 left-3 right-3 h-0.5 bg-[var(--color-accent)] rounded-full" />
@@ -418,7 +424,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                             <Link
                               key={tab.name}
                               href={tab.path}
-                              prefetch={false}
+                              prefetch={true}
                               onClick={() => setIsTabsDropdownOpen(false)}
                               className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors
                                 ${tab.isActive
@@ -442,7 +448,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
             <button
               onClick={() => setIsSearchOpen(true)}
               className={MOBILE_ICON_BUTTON}
-              aria-label="Search"
+              aria-label={ui.search}
             >
               <i className="fa-solid fa-magnifying-glass text-[16px]" aria-hidden="true" />
             </button>
@@ -450,7 +456,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
               <button
                 onClick={onChatOpen}
                 className={MOBILE_ICON_BUTTON}
-                aria-label="Ask AI"
+                aria-label={ui.askAi}
               >
                 <i className="fa-solid fa-sparkles text-[16px] text-[var(--color-accent)]" aria-hidden="true" />
               </button>
@@ -470,7 +476,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                       className="flex items-center gap-1.5 px-2.5 py-1.5 text-sm text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
                     >
                       {link.icon && <i className={`${getIconClass(getIconName(link.icon))} text-[14px]`} aria-hidden="true" />}
-                      <span>{link.label}</span>
+                      <span>{resolveLabel(link.label, link.labels)}</span>
                       {isExternal && <i className="fa-solid fa-arrow-up-right-from-square text-[10px] opacity-50" aria-hidden="true" />}
                     </a>
                   );
@@ -489,7 +495,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                 {config.navbar.primary.type === 'github' && (
                   <i className="fa-brands fa-github text-[14px]" aria-hidden="true" />
                 )}
-                <span>{config.navbar.primary.label || (config.navbar.primary.type === 'github' ? 'GitHub' : 'Get Started')}</span>
+                <span>{resolveLabel(config.navbar.primary.label, config.navbar.primary.labels, config.navbar.primary.type === 'github' ? 'GitHub' : 'Get Started')}</span>
               </a>
             )}
 
@@ -509,8 +515,8 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                 <button
                   onClick={() => setIsSearchOpen(true)}
                   className={`${COMPACT_ICON_BUTTON} text-[var(--color-text-secondary)]`}
-                  aria-label="Search"
-                  title="Search (⌘K)"
+                  aria-label={ui.search}
+                  title={`${ui.search} (⌘K)`}
                 >
                   <i className="fa-solid fa-magnifying-glass text-[16px]" aria-hidden="true" />
                 </button>
@@ -518,8 +524,8 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                   <button
                     onClick={onChatOpen}
                     className={`${COMPACT_ICON_BUTTON} text-[var(--color-accent)]`}
-                    aria-label="Ask AI"
-                    title="Ask AI (⌘I)"
+                    aria-label={ui.askAi}
+                    title={`${ui.askAi} (⌘I)`}
                   >
                     <i className="fa-solid fa-sparkles text-[16px]" aria-hidden="true" />
                   </button>

package/vendored/components/navigation/LanguageSelector.tsx

@@ -9,8 +9,10 @@ import {
   transformLanguagePath,
   saveLanguagePreference,
   getLanguagePreference,
+  extractLanguageFromPath,
 } from '@/lib/language-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
+import { getUiStrings } from '@/lib/ui-strings';
 
 interface LanguageSelectorProps {
   /** Available languages from resolved navigation */
@@ -32,6 +34,7 @@ export function LanguageSelector({
   const router = useRouter();
   const linkPrefix = useLinkPrefix();
   const pathname = usePathname();
+  const ui = getUiStrings(extractLanguageFromPath(pathname || '/'));
   const [isOpen, setIsOpen] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -153,9 +156,9 @@ export function LanguageSelector({
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
-        aria-label={`Select language, current: ${currentLanguage?.displayName}`}
+        aria-label={`${ui.selectLanguage}: ${currentLanguage?.displayName ?? ''}`}
         className={`
-          flex items-center gap-2 rounded-lg transition-colors
+          flex items-center gap-2 rounded-lg transition-colors cursor-pointer
           text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]
           hover:bg-[var(--color-bg-tertiary)]
           ${compact ? 'px-2 py-1.5' : 'px-3 py-2 w-full'}
@@ -190,7 +193,7 @@ export function LanguageSelector({
         <ul
           ref={listRef}
           role="listbox"
-          aria-label="Select language"
+          aria-label={ui.selectLanguage}
           className={`
             absolute z-50 min-w-[180px] py-1
             bg-[var(--color-bg-primary)] border border-[var(--color-border)]
@@ -210,7 +213,7 @@ export function LanguageSelector({
                 onClick={() => handleSelectLanguage(lang)}
                 onMouseEnter={() => setFocusedIndex(index)}
                 className={`
-                  w-full flex items-center gap-3 px-3 py-2 text-sm
+                  w-full flex items-center gap-3 px-3 py-2 text-sm cursor-pointer
                   transition-colors outline-none
                   ${
                     lang.isActive

package/vendored/components/navigation/Sidebar.tsx

@@ -6,21 +6,8 @@ import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
 import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 // Icons use Font Awesome CSS classes for lightweight rendering
-import type { 
-  DocsConfig, 
-  NavigationPage, 
-  NavigationConfig,
-  AnchorConfig,
-  TabConfig,
-  GroupConfig,
-} from '@/lib/docs-types';
-import {
-  normalizeNavPage,
-  normalizeLogo,
-  getIconName,
-} from '@/lib/docs-types';
-import type { TabsPosition } from '@/lib/docs-types';
-import { resolveNavigation, type ResolvedGroup, type ResolvedPage, type ResolvedAnchor, type ResolvedTab, type ResolvedExternalAnchor, type ResolvedNavItem } from '@/lib/navigation-resolver';
+import { normalizeLogo, type DocsConfig, type TabsPosition } from '@/lib/docs-types';
+import { resolveNavigation, type ResolvedGroup, type ResolvedPage, type ResolvedTab } from '@/lib/navigation-resolver';
 import type { LayoutVariant } from '@/themes';
 import { getTheme } from '@/themes';
 import { DefaultLogo, DefaultLogoCompact } from './DefaultLogo';
@@ -31,6 +18,7 @@ import { getIconClass } from '@/lib/icon-utils';
 import { getTabsFromConfig } from '@/lib/navigation-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useChatOpenHandler } from '@/hooks/useChatPanel';
+import { useDelayedNavigationSpinner } from '@/hooks/useDelayedNavigationSpinner';
 
 interface SidebarProps {
   config: DocsConfig;
@@ -54,12 +42,13 @@ interface NavPageProps {
   page: ResolvedPage;
   pathname: string | null;
   layout: LayoutVariant;
-  onPrefetch: (path: string) => void;
   onNavigate: (href: string) => void;
   linkPrefix?: string; // e.g., '/docs' when hostAtDocs is true
+  prefetch?: boolean;
+  showSpinner?: boolean;
 }
 
-export const NavPage = React.memo(function NavPage({ page, pathname, layout, onPrefetch, onNavigate, linkPrefix = '' }: NavPageProps) {
+export const NavPage = React.memo(function NavPage({ page, pathname, layout, onNavigate, linkPrefix = '', prefetch = true, showSpinner = false }: NavPageProps) {
   const href = `${linkPrefix}/${page.path}`;
   const isActive = pathname === href;
   const colors = page.method ? methodColors[page.method] : null;
@@ -68,8 +57,7 @@ export const NavPage = React.memo(function NavPage({ page, pathname, layout, onP
     <li>
       <Link
         href={href}
-        prefetch={false}
-        onMouseEnter={() => onPrefetch(page.path)}
+        prefetch={prefetch}
         onClick={() => onNavigate(href)}
         className={`flex items-center gap-2 ${layout === 'header-logo' ? 'pr-3' : 'px-3'} py-1.5 rounded-lg text-sm transition-colors ${
           isActive
@@ -86,11 +74,18 @@ export const NavPage = React.memo(function NavPage({ page, pathname, layout, onP
           <i className={`${getIconClass(page.icon)} text-[14px] flex-shrink-0 opacity-60`} aria-hidden="true" />
         )}
         <span className="flex-1 min-w-0">{page.title}</span>
-        {page.tag && (
+        {page.tag && !showSpinner && (
           <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded bg-[var(--color-accent)]/15 text-[var(--color-accent)]">
             {page.tag}
           </span>
         )}
+        {showSpinner && (
+          <span
+            data-nav-spinner
+            aria-hidden="true"
+            className="inline-block h-3 w-3 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin motion-reduce:animate-pulse motion-reduce:[animation-duration:1.5s] flex-shrink-0"
+          />
+        )}
       </Link>
     </li>
   );
@@ -145,30 +140,20 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   const [logoError, setLogoError] = useState(false);
   const [isDark, setIsDark] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const [pendingPathname, setPendingPathname] = useState<string | null>(null);
   const sidebarRef = useRef<HTMLElement>(null);
   const linkPrefix = useLinkPrefix();
 
   // Chat panel state — used for Pulsar sidebar AI button
   const { onChatOpen, devNotice } = useChatOpenHandler();
 
-  // Optimistic navigation: immediately highlight clicked link while page loads.
-  // Strips hash fragments so anchor links (e.g. /page#section) match pathname.
-  const handleNavigate = useCallback((url: string) => {
-    setPendingPathname(url.split('#')[0]);
-  }, []);
-
-  useEffect(() => {
-    setPendingPathname(null);
-  }, [pathname]);
+  // Two-stage feedback for nav clicks:
+  //   pendingPathname → optimistic active highlight (instant)
+  //   spinnerPathname → small spinner on the row (after 500ms, only if nav is slow)
+  const { pendingPathname, spinnerPathname, onNavigate: handleNavigate } =
+    useDelayedNavigationSpinner(pathname);
 
   const effectivePathname = pendingPathname || pathname;
 
-  // Stable callback for prefetching pages on hover
-  const handlePrefetch = useCallback((path: string) => {
-    router.prefetch(`${linkPrefix}/${path}`);
-  }, [router, linkPrefix]);
-
   // Determine effective tabsPosition:
   // 1. Use config.tabsPosition if specified
   // 2. Otherwise use prop if specified
@@ -311,6 +296,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   // Render a navigation group (supports nesting)
   function renderGroup(group: ResolvedGroup, level: number = 0) {
     const isExpanded = expandedGroups.has(group.name);
+    // expandedGroups starts empty and is populated in a useEffect, so the very
+    // first render has shouldPrefetch=false for every L0 section; Next.js
+    // re-schedules the prefetch when the prop flips to true on the next commit.
+    const shouldPrefetch = level !== 0 || isExpanded || !group.name;
 
     // Skip rendering if group has no name and no content
     if (!group.name && group.pages.length === 0 && !group.nested?.length && !group.items?.length) {
@@ -376,9 +365,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
                               page={p.page}
                               pathname={activePathname}
                               layout={layout}
-                              onPrefetch={handlePrefetch}
                               onNavigate={handleNavigate}
                               linkPrefix={linkPrefix}
+                              prefetch={shouldPrefetch}
+                              showSpinner={spinnerPathname === `${linkPrefix}/${p.page.path}`}
                             />
                           ))}
                         </ul>
@@ -415,9 +405,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
                         page={page}
                         pathname={activePathname}
                         layout={layout}
-                        onPrefetch={handlePrefetch}
                         onNavigate={handleNavigate}
                         linkPrefix={linkPrefix}
+                        prefetch={shouldPrefetch}
+                        showSpinner={spinnerPathname === `${linkPrefix}/${page.path}`}
                       />
                     ))}
                   </ul>

package/vendored/components/navigation/TabsNav.tsx

@@ -163,7 +163,7 @@ export function TabsNav({ config, className = '' }: TabsNavProps) {
             <Link
               key={tab.name}
               href={tab.path}
-              prefetch={false}
+              prefetch={true}
               className={`nav-tab-link flex items-center gap-2 px-3 py-1.5 text-sm transition-colors
                 ${tab.isActive
                   ? 'text-[var(--color-primary)] font-semibold bg-[var(--color-bg-tertiary)]'

package/vendored/hooks/useChat.ts

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState, useRef, useCallback, useEffect } from 'react';
+import { createTextStreamPacer, type TextStreamPacer } from './useTextStreamPacer';
+import { useMediaQuery } from './useMediaQuery';
 
 export interface Citation {
   title: string;
@@ -80,6 +82,18 @@ export function useChat(endpoint = '/_chat'): {
     messagesRef.current = messages;
   }, [messages]);
 
+  /** Currently-revealing pacer, if any. Used to abort on unmount so we never
+   *  call setMessages after the component has torn down. */
+  const activePacerRef = useRef<TextStreamPacer | null>(null);
+  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+
+  useEffect(() => {
+    return () => {
+      activePacerRef.current?.abort();
+      activePacerRef.current = null;
+    };
+  }, []);
+
   // Persist messages to sessionStorage — debounced to avoid thrashing during streaming
   useEffect(() => {
     const timer = setTimeout(() => saveMessages(messages), 500);
@@ -93,45 +107,77 @@ export function useChat(endpoint = '/_chat'): {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /** Mark an assistant message as done streaming and reset loading state.
-   *  If the assistant message has no content, remove it to avoid an empty bubble. */
-  const finishLoading = useCallback((assistantId: string): void => {
-    setMessages((prev) => {
-      const msg = prev.find((m) => m.id === assistantId);
-      if (msg && !msg.content) {
-        return prev.filter((m) => m.id !== assistantId);
-      }
-      return prev.map((m) => (m.id === assistantId ? { ...m, isStreaming: false } : m));
-    });
+  /** Unlock the input: the request is done (or errored out). The assistant
+   *  message may still be revealing — that's handled by `markRevealComplete`. */
+  const unlockInput = useCallback((): void => {
     setIsLoading(false);
     isLoadingRef.current = false;
     abortControllerRef.current = null;
   }, []);
 
+  /** Reveal finished — remove empty bubbles, clear the streaming indicator,
+   *  and apply any citations/clarifications that were buffered during pacing. */
+  const markRevealComplete = useCallback(
+    (
+      assistantId: string,
+      pending: { citations?: Citation[]; clarificationOptions?: string[] },
+    ): void => {
+      setMessages((prev) => {
+        const idx = prev.findIndex((m) => m.id === assistantId);
+        if (idx === -1) return prev;
+        const msg = prev[idx];
+        if (!msg.content) {
+          // Empty bubble — drop it entirely.
+          return prev.filter((m) => m.id !== assistantId);
+        }
+        const next = prev.slice();
+        next[idx] = {
+          ...msg,
+          isStreaming: false,
+          ...(pending.citations ? { citations: pending.citations } : {}),
+          ...(pending.clarificationOptions
+            ? { clarificationOptions: pending.clarificationOptions }
+            : {}),
+        };
+        return next;
+      });
+    },
+    [],
+  );
+
   const processStream = useCallback(
     async (response: Response, assistantId: string) => {
       const reader = response.body!.getReader();
       const decoder = new TextDecoder();
       let buffer = '';
 
-      // Batch text chunks — accumulate in ref, flush to state once per animation frame.
-      // This reduces React re-renders from ~100/sec (per SSE chunk) to ~60/sec (per frame).
-      let pendingText = '';
-      let rafId: ReturnType<typeof requestAnimationFrame> | null = null;
-
-      const flushText = () => {
-        if (!pendingText) return;
-        const text = pendingText;
-        pendingText = '';
-        rafId = null;
-        setMessages((prev) =>
-          prev.map((msg) =>
-            msg.id === assistantId
-              ? { ...msg, content: msg.content + text }
-              : msg,
-          ),
-        );
-      };
+      // Citations + clarifications arrive instantly from the server but we
+      // want them to appear only after the prose is finished revealing —
+      // otherwise the badges/buttons render above text that hasn't been typed.
+      const pending: { citations?: Citation[]; clarificationOptions?: string[] } = {};
+
+      const pacer = createTextStreamPacer({
+        reducedMotion,
+        // Haiku delivers the whole answer in ~50ms so the full buffer lands
+        // before the first RAF. The default 800-char flush would dump typical
+        // responses in one frame. Cap at 4000 instead — pace under that, dump
+        // above so very long answers don't take 10s+ to reveal.
+        instantFlushThreshold: 4000,
+        onReveal: (chunk) => {
+          setMessages((prev) => {
+            const idx = prev.findIndex((m) => m.id === assistantId);
+            if (idx === -1) return prev;
+            const next = prev.slice();
+            next[idx] = { ...next[idx], content: next[idx].content + chunk };
+            return next;
+          });
+        },
+        onDrain: () => {
+          markRevealComplete(assistantId, pending);
+          if (activePacerRef.current === pacer) activePacerRef.current = null;
+        },
+      });
+      activePacerRef.current = pacer;
 
       try {
         while (true) {
@@ -146,7 +192,13 @@ export function useChat(endpoint = '/_chat'): {
             const trimmed = line.trim();
             if (!trimmed.startsWith('data: ')) continue;
 
-            let event: { type: string; content?: string; message?: string; sources?: Citation[]; options?: string[] };
+            let event: {
+              type: string;
+              content?: string;
+              message?: string;
+              sources?: Citation[];
+              options?: string[];
+            };
             try {
               event = JSON.parse(trimmed.slice(6));
             } catch {
@@ -155,53 +207,49 @@ export function useChat(endpoint = '/_chat'): {
 
             switch (event.type) {
               case 'text':
-                pendingText += event.content || '';
-                if (rafId === null) {
-                  rafId = requestAnimationFrame(flushText);
-                }
+                pacer.enqueue(event.content || '');
                 break;
 
               case 'citations':
-                setMessages((prev) =>
-                  prev.map((msg) =>
-                    msg.id === assistantId ? { ...msg, citations: event.sources } : msg,
-                  ),
-                );
+                pending.citations = event.sources;
                 break;
 
               case 'clarification':
-                setMessages((prev) =>
-                  prev.map((msg) =>
-                    msg.id === assistantId
-                      ? { ...msg, clarificationOptions: event.options as string[] }
-                      : msg,
-                  ),
-                );
+                pending.clarificationOptions = event.options as string[];
                 break;
 
               case 'done':
-                // finishLoading in `finally` handles cleanup
+                // Server is done — unlock the input NOW so the user isn't
+                // blocked while text finishes revealing.
+                unlockInput();
                 break;
 
               case 'error':
                 setError(event.message || 'An error occurred');
+                // SSE error means the server is done — unlock the input so
+                // the user can retry. (No 'done' event follows on error paths.)
+                unlockInput();
                 break;
             }
           }
         }
+        pacer.finish();
+        // NOTE: We do NOT await drain here. `unlockInput()` already ran on
+        // SSE 'done'; `markRevealComplete` runs from the pacer's onDrain.
+        // sendMessage resolves as soon as this function returns.
       } catch (err) {
+        pacer.abort();
+        if (activePacerRef.current === pacer) activePacerRef.current = null;
+        // Error path: input is unlocked here (may not have hit 'done' SSE event).
+        unlockInput();
+        // Drop the empty assistant bubble and clear the streaming flag.
+        markRevealComplete(assistantId, pending);
         if (!(err instanceof DOMException && err.name === 'AbortError')) {
           setError('The response was interrupted. Please try again.');
         }
-      } finally {
-        // Flush any remaining batched text before finishing
-        if (rafId !== null) cancelAnimationFrame(rafId);
-        flushText();
-        // Unified cleanup: removes empty bubbles, marks streaming done, resets loading
-        finishLoading(assistantId);
       }
     },
-    [finishLoading],
+    [unlockInput, markRevealComplete, reducedMotion],
   );
 
   const sendMessage = useCallback(
@@ -238,9 +286,10 @@ export function useChat(endpoint = '/_chat'): {
         assistantMessage,
       ]);
 
-      // Use messagesRef to avoid stale closure — ref always has current state
-      const currentMessages = [...messagesRef.current, userMessage];
-      const history = currentMessages.slice(-10).map((msg) => ({
+      // Prior turns only — the server appends the current `message` itself.
+      // Including userMessage here caused Claude to see the same user turn
+      // twice and hedge with "I don't have information…".
+      const history = messagesRef.current.slice(-10).map((msg) => ({
         role: msg.role,
         content: msg.content,
       }));
@@ -271,7 +320,8 @@ export function useChat(endpoint = '/_chat'): {
             errorMessage = 'AI chat is temporarily unavailable. Please try again later.';
           }
           setError(errorMessage);
-          finishLoading(assistantMessage.id);
+          unlockInput();
+          markRevealComplete(assistantMessage.id, {});
           return;
         }
 
@@ -280,15 +330,18 @@ export function useChat(endpoint = '/_chat'): {
         if (!(err instanceof DOMException && err.name === 'AbortError')) {
           setError('Unable to connect. Check your internet connection and try again.');
         }
-        finishLoading(assistantMessage.id);
+        unlockInput();
+        markRevealComplete(assistantMessage.id, {});
       }
     },
-    [endpoint, processStream, finishLoading],
+    [endpoint, processStream, unlockInput, markRevealComplete],
   );
 
   const abort = useCallback(() => {
-    if (!isLoadingRef.current) return;
+    if (!isLoadingRef.current && !activePacerRef.current) return;
     abortControllerRef.current?.abort();
+    activePacerRef.current?.abort();
+    activePacerRef.current = null;
   }, []);
 
   const retry = useCallback(() => {