;
- if (view === "overview") return ;
- if (view === "documents") return ;
- if (view === "query") return ;
- if (view === "chat") return ;
- if (view === "maintenance") return ;
- return null;
- }
-
- return (
-
-
-
-
-
-
{t(view)}
-
- {renderView()}
-
-
-
-
-
- );
-}
-
-export default function App() {
- return (
-
-
-
-
-
- );
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 000000000..ff8dbbbaa
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react"
+import { Routes, Route, useParams } from "react-router"
+import { MotionConfig } from "motion/react"
+import { KeyRound, Loader2 } from "lucide-react"
+import AppSidebar from "@/components/AppSidebar"
+import TitleBar from "@/components/TitleBar"
+import { ThemeToggle } from "@/lib/theme"
+import { LanguageToggle } from "@/lib/language"
+import { useTranslation } from "react-i18next"
+import { cn } from "@/lib/utils"
+import { Toaster } from "@/components/ui/sonner"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { getApiBase, getToken, onUnauthorized, setConnection } from "@/api/client"
+import Home from "@/pages/Home"
+import ChatSession from "@/pages/ChatSession"
+import KbList from "@/pages/KbList"
+import KbDetail from "@/pages/KbDetail"
+import Settings from "@/pages/Settings"
+
+/** Remount KbDetail per KB so its page/tree state resets cleanly on nav. */
+function KbDetailRoute() {
+ const { id = "" } = useParams()
+ return
+}
+
+const inputCls =
+ "mt-1.5 w-full h-9 rounded-md border border-input bg-transparent px-3 text-[13px] font-mono2 outline-none focus-visible:ring-2 focus-visible:ring-ring focus:border-accent-brand"
+
+/**
+ * Reactive connection prompt. Opened only when a request 401s — i.e. the server
+ * has a bearer token configured and this client isn't sending the right one.
+ * Mirrors the opt-in auth model: local-first (no token) works with no prompt;
+ * we ask for a token only when the server actually demands one.
+ */
+function ConnectionDialog({
+ open,
+ onOpenChange,
+}: {
+ open: boolean
+ onOpenChange: (v: boolean) => void
+}) {
+ const { t } = useTranslation("common")
+ const [base, setBase] = useState("")
+ const [token, setToken] = useState("")
+ const [submitting, setSubmitting] = useState(false)
+
+ // Prefill from the stored connection each time the dialog opens.
+ useEffect(() => {
+ if (open) {
+ setBase(getApiBase())
+ setToken(getToken())
+ setSubmitting(false)
+ }
+ }, [open])
+
+ const submit = () => {
+ setSubmitting(true)
+ setConnection(base.trim(), token.trim())
+ // Full reload re-runs every page's fetches with the new credentials. The
+ // HashRouter route lives in the URL fragment, so the current view is kept.
+ window.location.reload()
+ }
+
+ return (
+
+ )
+}
+
+export default function App() {
+ const [authOpen, setAuthOpen] = useState(false)
+
+ const isDesktopShell =
+ typeof (window as { __OPENKB_DESKTOP__?: unknown }).__OPENKB_DESKTOP__ !== "undefined"
+
+ // Register the reactive 401 handler once. Any request that 401s opens the
+ // connection prompt (idempotent — repeated 401s just keep it open).
+ useEffect(() => {
+ onUnauthorized(() => setAuthOpen(true))
+ }, [])
+
+ return (
+
+
+ {isDesktopShell && (
+
+
+
+ )}
+
+
+
+ {/* Global floating chrome cluster: overlays content on every route
+ (not the sidebar). It owns a reserved top-right "chrome lane"
+ (~112px from main's right edge) sized for the theme toggle NOW
+ plus Sub-project H's future i18n switcher + gaps. Page-level
+ right-anchored controls reserve that lane with `pr-28` so they
+ always clear the pill — see KbList's header row and KbDetail's
+ gear row. Clears the desktop TitleBar via a top offset. */}
+
+
+
+
+
+ } />
+ {/* No key={id}: ChatSession must NOT remount when runTurn adopts a
+ real session id mid-turn (the new→/chat/ self-navigate) —
+ a remount there would abort the live stream and drop the
+ just-finished turn's artifact cards. Its restore effect instead
+ re-runs on an `id` change and reloads only when navigating to a
+ DIFFERENT saved session, so switching /chat/A→/chat/B still
+ shows the right one. */}
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/api/artifacts.ts b/frontend/src/api/artifacts.ts
new file mode 100644
index 000000000..d9c669a17
--- /dev/null
+++ b/frontend/src/api/artifacts.ts
@@ -0,0 +1,68 @@
+import { apiStream, fetchAsBlobUrl } from "./client"
+
+/**
+ * Deck/skill generator streams. Both post `{ kb, name, intent, stream: true }`
+ * and emit SSE events `start` / `error` / `final` / `done`, where the `final`
+ * event's data is `{ name, status, path }` (see `_iter_deck`/`_iter_skill` in
+ * `openkb/api_helpers.py`). NOTE: this `final` shape differs from chat/query's
+ * `final` — do not fold these through `mapSseEvent`/`foldSseEvent`.
+ *
+ * Pass an optional `signal` (threaded to the underlying `apiStream` fetch) to
+ * make the stream cancellable: aborting it disconnects the client, which the
+ * backend `_stream_deck`/`_stream_skill` handlers now honor. Backward-compatible
+ * — callers that omit it get an uncancellable stream exactly as before.
+ */
+export function runDeckCommand(kb: string, name: string, intent: string, signal?: AbortSignal) {
+ return apiStream("/api/v1/deck", { kb, name, intent, stream: true }, signal)
+}
+
+export function runSkillCommand(kb: string, name: string, intent: string, signal?: AbortSignal) {
+ return apiStream("/api/v1/skill", { kb, name, intent, stream: true }, signal)
+}
+
+/**
+ * Fetch the rendered deck HTML with the bearer token attached CLIENT-SIDE and
+ * return a `blob:` URL. The returned URL is what a sandboxed `