frontend: reduce route-switch flicker with cached chat chrome

Author: owenisas

frontend/src/app/(dashboard)/app/page.tsx

@@ -2,11 +2,21 @@
 
 import { Suspense } from "react"
 import { AppContentRouter } from "@/components/app/AppContentRouter"
+import ChatInput from "@/components/app/ChatInput"
 import { useThemeColors } from "@/context/ThemeContext"
 
 function SuspenseFallback() {
   const COLORS = useThemeColors()
-  return <div style={{ flex: 1, minHeight: 0, background: COLORS.bg }} />
+  return (
+    <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", background: COLORS.bg, position: "relative", overflow: "hidden" }}>
+      <div style={{ flex: 1, minHeight: 0, background: COLORS.bg }} />
+      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", justifyContent: "center", paddingBottom: "6px", pointerEvents: "none", zIndex: 10 }}>
+        <div style={{ pointerEvents: "auto" }}>
+          <ChatInput />
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default function AppPage() {

frontend/src/app/(dashboard)/session/SessionRouteFallback.tsx

@@ -1,7 +1,19 @@
 "use client"
 
+import { useMemo } from "react"
 import { useThemeColors, useIsDark } from "@/context/ThemeContext"
 import { FONTS } from "@/lib/constants"
+import { readSessionCache } from "@/lib/sessionCache"
+import { readLatestSessionUiCache, readSessionUiCache } from "@/lib/sessionUiCache"
+
+function readRouteSessionId(): string {
+  if (typeof window === "undefined") return ""
+  try {
+    return new URLSearchParams(window.location.search).get("id")?.trim() || ""
+  } catch {
+    return ""
+  }
+}
 
 /**
  * Shown while the session page is loading (Suspense). Keeps TopBar + content area
@@ -10,12 +22,32 @@ import { FONTS } from "@/lib/constants"
 export function SessionRouteFallback() {
   const COLORS = useThemeColors()
   const isDark = useIsDark()
+  const sessionId = useMemo(() => readRouteSessionId(), [])
+  const cachedUi = useMemo(
+    () => (sessionId ? readSessionUiCache(sessionId) : null),
+    [sessionId],
+  )
+  const cachedSession = useMemo(
+    () => (sessionId ? readSessionCache(sessionId) : null),
+    [sessionId],
+  )
+  const latestUi = useMemo(
+    () => (!cachedUi ? readLatestSessionUiCache() : null),
+    [cachedUi],
+  )
+  const fallbackTitle = (
+    cachedUi?.title
+    || cachedSession?.question
+    || latestUi?.entry.title
+    || "Session"
+  ).trim() || "Session"
+  const fallbackDraft = cachedUi?.draft ?? latestUi?.entry.draft ?? ""
   const topBarGradient = isDark
     ? "linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.08) 100%)"
     : "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.06) 100%)"
 
   return (
-    <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden", background: COLORS.bg }}>
+    <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden", background: COLORS.bg, position: "relative" }}>
       <header
         style={{
           height: "60px",
@@ -27,10 +59,39 @@ export function SessionRouteFallback() {
         }}
       >
         <span style={{ fontFamily: FONTS.sans, fontSize: "16px", fontWeight: 600, color: COLORS.textPrimary }}>
-          Untitled
+          {fallbackTitle}
         </span>
       </header>
       <div style={{ flex: 1, minHeight: 0, background: COLORS.bg }} />
+      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", justifyContent: "center", paddingBottom: "6px", pointerEvents: "none", zIndex: 10 }}>
+        <div
+          style={{
+            width: "720px",
+            maxWidth: "85vw",
+            borderRadius: "24px",
+            border: `1px solid ${COLORS.border}`,
+            background: isDark ? "#0A0A0A" : COLORS.modalBg,
+            padding: "18px 24px",
+            minHeight: "64px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <span
+            style={{
+              fontFamily: FONTS.sans,
+              fontSize: "16px",
+              color: fallbackDraft.trim() ? COLORS.textPrimary : COLORS.textDimmed,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              width: "100%",
+            }}
+          >
+            {fallbackDraft.trim() ? fallbackDraft : "Add to thread..."}
+          </span>
+        </div>
+      </div>
     </div>
   )
 }

frontend/src/components/blocks/SessionView.tsx

@@ -27,6 +27,7 @@ import { useScrollbarOnScroll } from "@/hooks/useScrollbarOnScroll"
 import { useStreamingDisplay } from "@/hooks/useStreamingDisplay"
 import { logHiddenError, toUserFacingError } from "@/lib/userFacingErrors"
 import { trackFrontendEvent } from "@/lib/frontendAnalytics"
+import { readSessionUiCache, writeSessionUiCache } from "@/lib/sessionUiCache"
 import { AgentThinkingStatus, useAgentThinkingPhase } from "@/components/app/AgentThinkingStatus"
 import {
   MODEL_OPTIONS,
@@ -76,6 +77,13 @@ function normalizeUserText(value: string | undefined): string {
   return (value || "").replace(/\s+/g, " ").trim().toLowerCase()
 }
 
+function normalizeCachedModelId(value: string): ModelOptionId {
+  if (MODEL_OPTIONS.some((option) => option.id === value)) {
+    return value as ModelOptionId
+  }
+  return DEFAULT_MODEL_ID
+}
+
 /** Format originQuestion for display: strip [Focus: "..."] and show as input: "highlighted" */
 function formatOriginQuestionForDisplay(originQuestion: string): string {
   const focusMatch = originQuestion.match(/^(.*?)\s*\[Focus:\s*"([^"]*)"\]\s*$/i)
@@ -359,6 +367,7 @@ export function SessionView({ initialSession, backendSessionId, readOnly = false
   const programmaticScrollRef = useRef(false)
   const shouldScrollToBlockRef = useRef(false)
   const printContentRef = useRef<HTMLDivElement>(null)
+  const sessionCacheId = (backendId || initialSession.id || session.id || "").trim()
   const handlePrint = useReactToPrint({
     contentRef: printContentRef,
     documentTitle: session.question,
@@ -392,6 +401,31 @@ export function SessionView({ initialSession, backendSessionId, readOnly = false
   /* ── Section in view for TOC magnifier (which entry to emphasize) ── */
   const [activeTocEntryId, setActiveTocEntryId] = useState<string | null>(null)
 
+  useEffect(() => {
+    if (!sessionCacheId) return
+    const cachedUi = readSessionUiCache(sessionCacheId)
+    if (!cachedUi) return
+    setChatInput(cachedUi.draft || "")
+    setInputModel(normalizeCachedModelId(cachedUi.model))
+    setInputLength(cachedUi.lengthPreset)
+    if (!sidebarTitle && cachedUi.title.trim()) {
+      setSession((prev) => {
+        if (prev.question === cachedUi.title) return prev
+        return { ...prev, question: cachedUi.title }
+      })
+    }
+  }, [sessionCacheId, sidebarTitle])
+
+  useEffect(() => {
+    if (!sessionCacheId) return
+    writeSessionUiCache(sessionCacheId, {
+      title: sidebarTitle ?? session.question,
+      draft: chatInput,
+      model: inputModel,
+      lengthPreset: inputLength,
+    })
+  }, [sessionCacheId, sidebarTitle, session.question, chatInput, inputModel, inputLength])
+
   /* ════════════ Derived data ════════════ */
 
   const activeBlock = useMemo(