@anchrd/intel-ui 0.2.1 → 0.4.0

package/components.json

@@ -3,7 +3,13 @@
   "style": "new-york",
   "rsc": false,
   "tsx": true,
-  "tailwind": { "css": "src/styles.css", "baseColor": "neutral", "cssVariables": true },
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -40,9 +40,11 @@
     "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "colorjs.io": "^0.7.1",
     "graphology": "^0.26.0",
     "lucide-react": "^1.25.0",
+    "radix-ui": "^1.6.7",
     "react": "^19.2.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^19.2.0",

package/src/app/app-sidebar/app-sidebar.tsx

@@ -0,0 +1,56 @@
+import { Link } from "@tanstack/react-router";
+import { AppTree } from "@/app/app-tree/app-tree.tsx";
+import { SidebarResizeHandle } from "@/app/sidebar-resize-handle/sidebar-resize-handle.tsx";
+import { UserFooter } from "@/app/user-footer/user-footer.tsx";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// One tree is the whole navigation: documents and flows side by side in the folder they share, with
+// no Knowledge or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
+// they come live from the portal and have no tree.
+export function AppSidebar({
+  width,
+  onWidthChange,
+}: {
+  width: number;
+  onWidthChange(width: number): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+
+  return (
+    <Sidebar collapsible="icon" variant="inset">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link to="/knowledge">
+                <AppLogo className="size-8" />
+                <span className="font-semibold">{i18n.t("app.name")}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent aria-label={i18n.t("nav.primary")}>
+        <AppTree />
+      </SidebarContent>
+      <SidebarFooter>
+        <UserFooter />
+      </SidebarFooter>
+      <SidebarResizeHandle
+        width={width}
+        label={i18n.t("shell.resizeSidebar")}
+        onWidthChange={onWidthChange}
+      />
+    </Sidebar>
+  );
+}

package/src/app/app-tree/app-tree.tsx

@@ -0,0 +1,427 @@
+import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import {
+  ChevronRight,
+  FileText,
+  Folder,
+  FolderOpen,
+  Paperclip,
+  Plus,
+  Upload,
+  Workflow,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+} from "@/components/ui/sidebar";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
+
+type NewKind = "folder" | "document" | "flow";
+type Creating = { parentId: string | null; kind: NewKind };
+
+const icons = {
+  folder: Folder,
+  document: FileText,
+  attachment: Paperclip,
+  flow: Workflow,
+} as const;
+
+// Attachments are inlined as base64, so the browser holds the file twice while it uploads.
+const MaxUploadBytes = 15_000_000;
+
+async function fileBase64(file: File): Promise<string> {
+  if (file.size > MaxUploadBytes) throw new Error("Attachment exceeds the 15 MB upload limit");
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error ?? new Error("Attachment could not be read"));
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result !== "string" || !result.includes(",")) {
+        reject(new Error("Attachment could not be encoded"));
+        return;
+      }
+      resolve(result.slice(result.indexOf(",") + 1));
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+// One key per level of the tree. `null` is the root; every expanded folder adds one of its own, and
+// nothing else is ever asked for.
+function levelKey(parentId: string | null): readonly unknown[] {
+  return ["tree", parentId];
+}
+
+export function AppTree() {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
+  const [creating, setCreating] = useState<Creating | null>(null);
+  const [uploadTo, setUploadTo] = useState<string | null>(null);
+  const uploadInput = useRef<HTMLInputElement>(null);
+
+  const location = useRouterState({
+    select: (state) => ({
+      pathname: state.location.pathname,
+      select: selectedFrom(state.location.search),
+    }),
+  });
+
+  // ⚠️ The whole point of #11: one query per level, and a level only exists while its folder is
+  // open. A recursive load would put an N+1 on every page of the app, because the tree is now on
+  // every page.
+  const parents: Array<string | null> = [null, ...expanded];
+  const levels = useQueries({
+    queries: parents.map((parentId) => ({
+      queryKey: levelKey(parentId),
+      queryFn: () => data.listTreeChildren(parentId),
+    })),
+  });
+  const levelFor = (parentId: string | null) => levels[parents.indexOf(parentId)];
+  const root = levels[0];
+
+  function toggle(id: string, open: boolean) {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (open) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
+  // ⚠️ The level a row appears in is not the only thing that goes stale. The header search reads
+  // the whole flow list, and the graph is what the link picker and the flow editor's Knowledge step
+  // offer — a row created here has to reach those too, or another screen keeps showing yesterday.
+  async function reveal(
+    parentId: string | null,
+    collection: "flows" | "knowledge-graph",
+  ): Promise<void> {
+    if (parentId !== null) toggle(parentId, true);
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: levelKey(parentId) }),
+      queryClient.invalidateQueries({ queryKey: [collection] }),
+    ]);
+  }
+
+  const create = useMutation({
+    mutationFn: async ({ parentId, kind, title }: Creating & { title: string }) => {
+      if (kind === "flow") {
+        const flow = await data.createFlow({
+          parentId,
+          title,
+          description: null,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return { area: "/flows" as const, id: flow.id, parentId, collection: "flows" as const };
+      }
+      const node = await data.createKnowledge({
+        parentId,
+        kind,
+        title,
+        description: null,
+        contextPolicy: "relevant",
+        idempotencyKey: crypto.randomUUID(),
+      });
+      return {
+        area: "/knowledge" as const,
+        id: node.id,
+        parentId,
+        collection: "knowledge-graph" as const,
+      };
+    },
+    onSuccess: async (created) => {
+      setCreating(null);
+      await reveal(created.parentId, created.collection);
+      await navigate({ to: created.area, search: { select: created.id } });
+    },
+  });
+
+  const upload = useMutation({
+    mutationFn: async ({ parentId, file }: { parentId: string | null; file: File }) => {
+      const contentBase64 = await fileBase64(file);
+      const node = await data.createKnowledge({
+        parentId,
+        kind: "attachment",
+        title: file.name,
+        description: null,
+        contextPolicy: "relevant",
+        idempotencyKey: crypto.randomUUID(),
+      });
+      try {
+        await data.saveKnowledgeAttachment({
+          nodeId: node.id,
+          baseVersionId: null,
+          contentBase64,
+          mediaType: file.type || "application/octet-stream",
+          idempotencyKey: crypto.randomUUID(),
+        });
+      } catch (error) {
+        // An attachment node without bytes is a row nobody can open. Take it back rather than
+        // leaving it in the tree, but never let the cleanup hide the real failure.
+        const current = await data.getKnowledge(node.id).catch(() => null);
+        if (current?.version === null && current.node.updatedAt === node.updatedAt) {
+          await data
+            .archiveKnowledge({
+              nodeId: node.id,
+              baseUpdatedAt: current.node.updatedAt,
+              archived: true,
+              idempotencyKey: crypto.randomUUID(),
+            })
+            .catch(() => undefined);
+        }
+        throw error;
+      }
+      return { id: node.id, parentId };
+    },
+    onSuccess: async (created) => {
+      await reveal(created.parentId, "knowledge-graph");
+      await navigate({ to: "/knowledge", search: { select: created.id } });
+    },
+  });
+
+  function startUpload(parentId: string | null) {
+    setUploadTo(parentId);
+    uploadInput.current?.click();
+  }
+
+  function renderLevel(parentId: string | null, ancestors: ReadonlySet<string>, label?: string) {
+    const level = levelFor(parentId);
+    if (!level || level.isPending) {
+      return (
+        <SidebarMenu aria-label={label}>
+          {[0, 1, 2].map((row) => (
+            <SidebarMenuItem key={row}>
+              <SidebarMenuSkeleton showIcon />
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      );
+    }
+    if (level.isError) {
+      return (
+        <div role="alert" className="space-y-2 px-2 py-1.5 text-sm">
+          <p className="text-destructive">{i18n.t("tree.failed")}</p>
+          <button
+            type="button"
+            onClick={() => void level.refetch()}
+            className="rounded-md border px-2 py-1 text-xs outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      );
+    }
+    // ⚠️ The cycle guard, in the form a per-level load needs: a broken `parentId` that points back
+    // up would otherwise open the same folder inside itself for as long as anyone keeps clicking.
+    // The recursion is gone, so the depth limit that used to save us is gone with it; what stops it
+    // now is that a row already on the path from the root is not rendered again.
+    const entries = level.data?.filter((entry) => !ancestors.has(entry.id)) ?? [];
+    if (entries.length === 0) {
+      return (
+        <p className="px-2 py-1.5 text-sm text-muted-foreground">
+          {parentId === null ? i18n.t("tree.empty") : i18n.t("tree.emptyFolder")}
+        </p>
+      );
+    }
+    return (
+      <SidebarMenu aria-label={label}>
+        {entries.map((entry) => renderRow(entry, ancestors))}
+      </SidebarMenu>
+    );
+  }
+
+  function renderRow(entry: TreeEntry, ancestors: ReadonlySet<string>) {
+    const isFolder = entry.kind === "folder";
+    const isOpen = isFolder && expanded.has(entry.id);
+    const Icon = isOpen ? FolderOpen : icons[entry.kind];
+    const area = entry.type === "flow" ? "/flows" : "/knowledge";
+    const isActive = location.select === entry.id && location.pathname === area;
+    // A row's plus files into that row's place: inside a folder, beside anything else.
+    const target = isFolder
+      ? entry.id
+      : entry.type === "knowledge"
+        ? entry.node.parentId
+        : entry.flow.parentId;
+
+    return (
+      <SidebarMenuItem key={entry.id} className="group/row">
+        <div className="flex items-center gap-0.5">
+          {isFolder ? (
+            <button
+              type="button"
+              aria-expanded={isOpen}
+              aria-label={i18n.t(isOpen ? "tree.collapse" : "tree.expand", { title: entry.title })}
+              onClick={() => toggle(entry.id, !isOpen)}
+              className="shrink-0 rounded-md p-1 text-sidebar-foreground/70 outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+            >
+              <ChevronRight
+                aria-hidden="true"
+                className={`size-3.5 transition-transform ${isOpen ? "rotate-90" : ""}`}
+              />
+            </button>
+          ) : (
+            <span aria-hidden="true" className="size-5 shrink-0" />
+          )}
+          <SidebarMenuButton
+            isActive={isActive}
+            className="min-w-0 flex-1"
+            onClick={() => void navigate({ to: area, search: { select: entry.id } })}
+          >
+            <Icon aria-hidden="true" className="size-4 shrink-0" />
+            <span className="truncate">{entry.title}</span>
+            {/* The icon carries the type on screen; this carries it everywhere else, and it is why
+                a flow needs no suffix in its name to be told from a document. */}
+            <span className="sr-only">{i18n.t(`tree.kind.${entry.kind}`)}</span>
+          </SidebarMenuButton>
+          <AddMenu
+            label={i18n.t("tree.add", { title: entry.title })}
+            onSelect={(kind) => {
+              if (kind === "upload") startUpload(target);
+              else setCreating({ parentId: target, kind });
+            }}
+          />
+        </div>
+        {/* The same rows one indent deeper: one row component for every depth, so the plus on the
+            fourth level is the same plus as on the first. */}
+        {isOpen ? (
+          <div className="ml-3.5 border-l border-sidebar-border pl-1.5">
+            {renderLevel(entry.id, new Set([...ancestors, entry.id]))}
+          </div>
+        ) : null}
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarGroup className="min-h-0 flex-1 overflow-y-auto">
+      {/* The tree is the navigation and carries no heading of its own (ADR-0004); the list is
+          named for assistive technology instead. */}
+      {renderLevel(null, new Set(), i18n.t("tree.label"))}
+      {create.isError || upload.isError ? (
+        <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
+          {upload.isError ? i18n.t("tree.uploadFailed") : i18n.t("tree.createFailed")}
+        </p>
+      ) : null}
+      {/* The root has no row of its own, so its plus lives here — otherwise a tree could only ever
+          grow inside the folders it already has. */}
+      {root?.isPending ? null : (
+        <div className="mt-1 flex items-center px-2">
+          <AddMenu
+            label={i18n.t("tree.addRoot")}
+            alwaysVisible
+            onSelect={(kind) => {
+              if (kind === "upload") startUpload(null);
+              else setCreating({ parentId: null, kind });
+            }}
+          />
+        </div>
+      )}
+      <input
+        ref={uploadInput}
+        type="file"
+        className="sr-only"
+        aria-label={i18n.t("tree.upload")}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) upload.mutate({ parentId: uploadTo, file });
+          event.currentTarget.value = "";
+        }}
+      />
+      {creating ? (
+        <Modal title={i18n.t(`tree.new.${creating.kind}`)} close={() => setCreating(null)}>
+          <CreateForm
+            pending={create.isPending}
+            submit={(title) => create.mutate({ ...creating, title })}
+          />
+        </Modal>
+      ) : null}
+    </SidebarGroup>
+  );
+}
+
+// ⚠️ Hover alone would hide this from a keyboard and from touch entirely, which is the same as not
+// having it. It stays in the tab order, focus makes it visible, and below `md` it is always shown.
+function AddMenu({
+  label,
+  alwaysVisible = false,
+  onSelect,
+}: {
+  label: string;
+  alwaysVisible?: boolean;
+  onSelect(kind: NewKind | "upload"): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const items: Array<{ kind: NewKind | "upload"; labelKey: string; Icon: typeof Plus }> = [
+    { kind: "folder", labelKey: "tree.new.folder", Icon: Folder },
+    { kind: "document", labelKey: "tree.new.document", Icon: FileText },
+    { kind: "upload", labelKey: "tree.new.upload", Icon: Upload },
+    { kind: "flow", labelKey: "tree.new.flow", Icon: Workflow },
+  ];
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={label}
+        className={`shrink-0 rounded-md p-1 text-sidebar-foreground outline-none transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:opacity-100 ${
+          alwaysVisible
+            ? ""
+            : "group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
+        }`}
+      >
+        <Plus aria-hidden="true" className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-44">
+        {items.map((item) => (
+          <DropdownMenuItem key={item.kind} onSelect={() => onSelect(item.kind)}>
+            <item.Icon aria-hidden="true" />
+            {i18n.t(item.labelKey)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function CreateForm({ pending, submit }: { pending: boolean; submit(title: string): void }) {
+  const { i18n } = useIntelRouterContext();
+  const [title, setTitle] = useState("");
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!pending) submit(title.trim());
+      }}
+    >
+      <label className="block text-sm font-medium">
+        {i18n.t("common.title")}
+        <input
+          required
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      </label>
+      <button
+        type="submit"
+        disabled={pending || title.trim().length === 0}
+        className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+      >
+        {pending ? i18n.t("common.saving") : i18n.t("common.create")}
+      </button>
+    </form>
+  );
+}

package/src/app/app.tsx

@@ -1,62 +1,92 @@
-import { useMutation } from "@tanstack/react-query";
-import { Link, Outlet } from "@tanstack/react-router";
-import { BookOpen, LogOut, Network, Wrench } from "lucide-react";
-import { AppLogo } from "@/branding/branding.tsx";
-import { loginPath } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { useRef, useState } from "react";
+import { AppSidebar } from "@/app/app-sidebar/app-sidebar.tsx";
+import { HeaderSearch } from "@/app/header-search/header-search.tsx";
+import { createSidebarPreferences } from "@/app/sidebar-preferences/sidebar-preferences.ts";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
+const sections = [
+  { path: "/knowledge", labelKey: "nav.knowledge" },
+  { path: "/flows", labelKey: "nav.flows" },
+  { path: "/tools", labelKey: "nav.tools" },
+] as const;
+
 export function App() {
-  const { data, i18n } = useIntelRouterContext();
-  const logout = useMutation({
-    mutationFn: () => data.logout(),
-    onSuccess: () => window.location.assign(loginPath()),
-  });
-  const navigation = [
-    { to: "/knowledge" as const, label: i18n.t("nav.knowledge"), icon: BookOpen },
-    { to: "/flows" as const, label: i18n.t("nav.flows"), icon: Network },
-    { to: "/tools" as const, label: i18n.t("nav.tools"), icon: Wrench },
-  ];
+  const { i18n } = useIntelRouterContext();
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const current = sections.find(
+    (section) => pathname === section.path || pathname.startsWith(`${section.path}/`),
+  );
+
+  // Read once: the stored preference is the starting point, after which the shell's own state is
+  // the truth. Re-reading on every render would fight the drag.
+  const preferences = useRef(createSidebarPreferences()).current;
+  const stored = useRef(preferences.read()).current;
+  const [open, setOpen] = useState(stored.open);
+  const [width, setWidth] = useState(stored.width);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <aside className="fixed inset-y-0 left-0 z-20 flex w-64 flex-col border-r border-sidebar-border bg-sidebar p-4 text-sidebar-foreground">
-        <Link to="/knowledge" className="mb-8 flex items-center gap-3 px-2 font-semibold">
-          <AppLogo className="size-9" />
-          <span>{i18n.t("app.name")}</span>
-        </Link>
-        <nav aria-label={i18n.t("nav.primary")} className="space-y-1">
-          {navigation.map(({ to, label, icon: Icon }) => (
-            <Link
-              key={to}
-              to={to}
-              activeProps={{ "aria-current": "page" }}
-              className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground"
-            >
-              <Icon aria-hidden="true" className="size-4" />
-              {label}
-            </Link>
-          ))}
-        </nav>
-        <div className="mt-auto space-y-2">
-          {logout.isError ? (
-            <p role="alert" className="px-3 text-sm text-destructive">
-              {i18n.t("auth.signOutFailed")}
-            </p>
-          ) : null}
-          <button
-            type="button"
-            onClick={() => logout.mutate()}
-            disabled={logout.isPending}
-            className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:opacity-60"
-          >
-            <LogOut aria-hidden="true" className="size-4" />
-            {i18n.t("auth.signOut")}
-          </button>
+    <SidebarProvider
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        preferences.write({ open: next, width });
+      }}
+      style={{ "--sidebar-width": `${width}px` } as React.CSSProperties}
+    >
+      <AppSidebar
+        width={width}
+        onWidthChange={(next) => {
+          setWidth(next);
+          preferences.write({ open, width: next });
+        }}
+      />
+      {/* ⚠️ `min-w-0` is not cosmetic: the inset is a flex item beside the sidebar and carries
+          `min-width: auto`, so it never shrinks below its content's min-content width. One wide
+          child (a flow canvas, a table of raw JSON) would widen the page instead of scrolling
+          inside its own container. Learned in gate, GATE-76 D. */}
+      <SidebarInset className="min-w-0 md:border">
+        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" aria-label={i18n.t("shell.toggleSidebar")} />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/knowledge">{i18n.t("app.name")}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              {current ? (
+                <>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{i18n.t(current.labelKey)}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </>
+              ) : null}
+            </BreadcrumbList>
+          </Breadcrumb>
+          {/* The bar for area-owned actions. A screen renders into it through `HeaderActions`;
+              search is the shell's own, because it has to open from every screen alike and belongs
+              to none of them. It stays first, so a screen's actions line up to its right. */}
+          <div data-slot="header-actions" className="ml-auto flex items-center gap-2">
+            <HeaderSearch />
+          </div>
+        </header>
+        <div className="flex min-h-0 flex-1 flex-col overflow-auto">
+          <Outlet />
         </div>
-      </aside>
-      <main className="ml-64 min-h-screen">
-        <Outlet />
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }