@anchrd/intel 0.59.0

package/ui/src/app/app.tsx

@@ -0,0 +1,87 @@
+import { Outlet } 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 { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+// ⚠️ The breadcrumb is gone (#337). It was two levels deep and the first of them was constant —
+// `Intel > Knowledge`, `Intel > Flows`, `Intel > Tools`. The product name stands in the sidebar
+// anyway, the area is marked there as the active row, and what was left was a path that never grew
+// past two links and carried no navigation that did not already exist. The `Separator` beside the
+// sidebar trigger went with it: it separated the trigger from the breadcrumb, and there is nothing
+// left on that side to separate it from.
+export function App() {
+  const i18n = useI18n();
+
+  // 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 (
+    // ⚠️ `h-svh` is what keeps the box inside the screen. The registry's wrapper only carries
+    // `min-h-svh`, so its height follows its content — and the inset, an `inset` variant with a
+    // margin all round, then stands 16px taller than the viewport at best and grows with a long
+    // document at worst. Both times the lower border and its two rounded corners end up under the
+    // fold and the whole page scrolls. With a definite height the inset stretches to
+    // `100svh - 16px`, and the overflow below belongs to the container around the outlet, which
+    // already carries `min-h-0 overflow-auto` for exactly that. Set here rather than in
+    // `components/ui/sidebar.tsx`: that is registry code and an edit in it is silently gone at the
+    // next sync.
+    <SidebarProvider
+      className="h-svh"
+      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. */}
+      {/* `overflow-hidden` is the second half of the rounding: the box is rounded but nothing
+          clipped its children, so an opaque panel inside it — the flow editor's inspector carries
+          `bg-card` — painted its own square corner over the rounded one. Invisible in the light
+          theme, where card and background are the same white, and plain to see in the dark one.
+          Scrolling is unaffected: the container around the outlet below owns it. */}
+      <SidebarInset className="min-w-0 overflow-hidden 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")} />
+          {/* The bar for area-owned actions. A screen renders into the inner box through
+              `ActionSlot`; search is the shell's own, because it has to open from every screen
+              alike and belongs to none of them. It stays last, against the right edge, and a
+              screen's actions line up to its left: the search is the one thing in this bar that is
+              on every screen, so it is the one whose place must not depend on what a screen happens
+              to bring. Pinned the other way round it was the constant that moved (#56).
+
+              ⚠️ Two boxes rather than one list, and that is the whole of the mechanism: a portal
+              only ever appends to its container, so with the search a sibling of the portalled
+              actions a screen that mounts them later — Flows does, once a flow is selected — would
+              land to its right. Giving the screens a container of their own takes mount order out
+              of the question entirely. `data-slot="header-actions"` therefore names the inner box:
+              it is the name every `ActionSlot` looks up. */}
+          <div data-slot="header-bar" className="ml-auto flex items-center gap-2">
+            <div data-slot="header-actions" className="flex items-center gap-2" />
+            <HeaderSearch />
+          </div>
+        </header>
+        <div className="flex min-h-0 flex-1 flex-col overflow-auto">
+          <Outlet />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/ui/src/app/header-search/header-search.tsx

@@ -0,0 +1,294 @@
+import type { Flow } from "@contract/flow.ts";
+import type { ToolCapability } from "@contract/tool.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { FileText, Search, Workflow, Wrench } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const Kinds = ["node", "flow", "tool"] as const;
+type Kind = (typeof Kinds)[number];
+
+// Enough to answer "where was that again" without turning the dialog into a result page.
+const ResultLimit = 8;
+
+const areaFor = { node: "/nodes", flow: "/flows", tool: "/tools" } as const;
+
+function isMac(): boolean {
+  return typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
+}
+
+// ⚠️ The deliberate boundary of this ticket, named rather than hidden: Intel has a search endpoint
+// for nodes only, so node hits come from `searchNodes()` and the server decides both
+// what matches and what may be seen. Flows and Tools have no such endpoint — they are the same
+// authorized lists the screens render, narrowed here in the client.
+//
+// That is safe in the one direction that matters: `listFlows()` returns what the caller may see
+// (the flow repository's `listVisible`), and `listTools()` is one live `tools/list` with the user's
+// own portal token. The client narrows a permitted set; it can never widen one, and no permission
+// decision is taken here.
+//
+// When either list outgrows what a browser should hold, that is a new ticket for a search endpoint
+// — not a silent regression of this one.
+function matches(query: string, ...fields: (string | null)[]): boolean {
+  const needle = query.toLocaleLowerCase();
+  return fields.some((field) => field?.toLocaleLowerCase().includes(needle));
+}
+
+export function HeaderSearch() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [kind, setKind] = useState<Kind | null>(null);
+  const query = text.trim();
+  const restoreTo = useRef<HTMLElement | null>(null);
+
+  function change(next: boolean) {
+    if (next) restoreTo.current = document.activeElement as HTMLElement | null;
+    setOpen(next);
+  }
+
+  // The same combination opens and closes the dialog. Radix does not swallow the key while it is
+  // open, so one toggling listener on the window covers both directions from every screen.
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey) || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      if (!open) restoreTo.current = document.activeElement as HTMLElement | null;
+      setOpen(!open);
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  const shows = (candidate: Kind) => kind === null || kind === candidate;
+  // A filter that excludes a kind does not ask for it either: no request, and therefore no group
+  // that could show up empty.
+  const nodes = useQuery({
+    queryKey: ["node-search", query],
+    queryFn: () => data.searchNodes({ query, limit: ResultLimit }),
+    enabled: open && shows("node") && query.length > 0,
+  });
+  // ⚠️ Deliberately the whole list, not one folder of the tree: a search that only saw the level
+  // someone happened to have open would miss the flow they are looking for. The sidebar tree asks
+  // per folder and keeps its own keys; only the Tools key is shared with the screen that fills it.
+  const flows = useQuery({
+    queryKey: ["flows"],
+    queryFn: () => data.listFlows(),
+    enabled: open && shows("flow") && query.length > 0,
+  });
+  const tools = useQuery({
+    queryKey: ["tools"],
+    queryFn: () => data.listTools(),
+    enabled: open && shows("tool") && query.length > 0,
+  });
+
+  const active = [
+    ...(shows("node") ? [nodes] : []),
+    ...(shows("flow") ? [flows] : []),
+    ...(shows("tool") ? [tools] : []),
+  ];
+  const searching = query.length > 0 && active.some((source) => source.isPending);
+  const failed = query.length > 0 && active.some((source) => source.isError);
+
+  const nodeHits = shows("node") ? (nodes.data?.items ?? []) : [];
+  const flowHits: Flow[] = shows("flow")
+    ? (flows.data?.items ?? [])
+        .filter((flow) => matches(query, flow.title, flow.description))
+        .slice(0, ResultLimit)
+    : [];
+  const toolHits: ToolCapability[] = shows("tool")
+    ? (tools.data?.items ?? [])
+        .filter((tool) => matches(query, tool.name, tool.title, tool.description))
+        .slice(0, ResultLimit)
+    : [];
+  const total = nodeHits.length + flowHits.length + toolHits.length;
+
+  function reach(hit: Kind, select: string) {
+    setOpen(false);
+    void navigate({ to: areaFor[hit], search: { select } });
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => change(true)}
+        aria-label={i18n.t("search.open")}
+        aria-keyshortcuts="Meta+K Control+K"
+        className="flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring sm:w-56"
+      >
+        <Search aria-hidden="true" className="size-4 shrink-0" />
+        <span className="truncate">{i18n.t("search.open")}</span>
+        {/* The hint repeats what `aria-keyshortcuts` already announces, so the accessible name
+            stays the label above rather than "Search ⌘K". */}
+        <kbd className="ml-auto hidden rounded border bg-muted px-1.5 font-sans text-[10px] sm:inline">
+          {isMac() ? "⌘K" : "Ctrl K"}
+        </kbd>
+      </button>
+
+      {/* ⚠️ Composed from `Dialog` and `Command` rather than from the registry's `CommandDialog`
+          for two reasons that both matter here: `CommandDialog` forwards its extra props to the
+          dialog root, so `shouldFilter` would never reach cmdk, and it renders its title outside
+          `DialogContent`, where it does not name the dialog for a screen reader. */}
+      <Dialog open={open} onOpenChange={change}>
+        <DialogContent
+          className="overflow-hidden p-0"
+          // ⚠️ Radix hands focus back to the dialog's trigger. This dialog is usually opened by a
+          // shortcut and has no trigger at all, so without this the caret would land on the body
+          // and a keyboard user would start over at the top of the page.
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreTo.current?.focus();
+          }}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>{i18n.t("search.title")}</DialogTitle>
+            <DialogDescription>{i18n.t("search.description")}</DialogDescription>
+          </DialogHeader>
+          {/* Every source has already decided what matches — the server for nodes, the client
+              filter above for the two lists. Letting cmdk filter again would hide rows the server
+              returned, because a row's value is its identity rather than its text. */}
+          <Command shouldFilter={false}>
+            <CommandInput
+              value={text}
+              onValueChange={setText}
+              placeholder={i18n.t("search.placeholder")}
+            />
+            <fieldset className="flex flex-wrap gap-1 border-b px-3 py-2">
+              <legend className="sr-only">{i18n.t("search.filter")}</legend>
+              {[null, ...Kinds].map((candidate) => (
+                <button
+                  key={candidate ?? "all"}
+                  type="button"
+                  aria-pressed={kind === candidate}
+                  onClick={() => setKind(candidate)}
+                  // ⚠️ cmdk turns Enter into "open the highlighted result" on the command root,
+                  // without looking at where the key came from. Unstopped, Enter on a filter would
+                  // leave the dialog for a hit instead of narrowing the list.
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+                  }}
+                  className="rounded-full border px-2.5 py-1 text-xs outline-none aria-pressed:bg-primary aria-pressed:text-primary-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {i18n.t(candidate === null ? "search.all" : `search.kind.${candidate}`)}
+                </button>
+              ))}
+            </fieldset>
+            <CommandList>
+              {query.length === 0 ? (
+                <p className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.hint")}
+                </p>
+              ) : null}
+              {/* Three states that never read as one another: still asking, could not ask, and asked
+              with nothing to show. A failing source is an alert even when another one answered. */}
+              {failed ? (
+                <div role="alert" className="space-y-3 px-3 py-6 text-center text-sm">
+                  <p className="text-destructive">{i18n.t("search.failed")}</p>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      for (const source of active) if (source.isError) void source.refetch();
+                    }}
+                    className="rounded-md border px-2.5 py-1 text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {i18n.t("common.retry")}
+                  </button>
+                </div>
+              ) : null}
+              {searching ? (
+                <p role="status" className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.searching")}
+                </p>
+              ) : null}
+              {!searching && !failed && query.length > 0 && total === 0 ? (
+                <CommandEmpty>{i18n.t("search.empty", { query })}</CommandEmpty>
+              ) : null}
+
+              {nodeHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.node")}>
+                  {nodeHits.map((citation) => (
+                    <CommandItem
+                      key={`${citation.nodeId}:${citation.versionId}`}
+                      value={`node:${citation.nodeId}:${citation.versionId}`}
+                      onSelect={() => reach("node", citation.nodeId)}
+                    >
+                      <FileText aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{citation.title}</span>
+                        <span className="block truncate text-xs text-muted-foreground">
+                          {citation.passage}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {flowHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.flow")}>
+                  {flowHits.map((flow) => (
+                    <CommandItem
+                      key={flow.id}
+                      value={`flow:${flow.id}`}
+                      onSelect={() => reach("flow", flow.id)}
+                    >
+                      <Workflow aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{flow.title}</span>
+                        {flow.description ? (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {flow.description}
+                          </span>
+                        ) : null}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {toolHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.tool")}>
+                  {toolHits.map((tool) => (
+                    <CommandItem
+                      key={tool.name}
+                      value={`tool:${tool.name}`}
+                      onSelect={() => reach("tool", tool.name)}
+                    >
+                      <Wrench aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{tool.title ?? tool.name}</span>
+                        <span className="block truncate font-mono text-xs text-muted-foreground">
+                          {tool.name}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/ui/src/app/reindex-dialog/reindex-dialog.tsx

@@ -0,0 +1,79 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * Rebuilding the search index, asked for before it happens (#416).
+ *
+ * ⚠️ Two clicks, not one, and the reason is not that it is dangerous — nothing is lost, the index is
+ * derived from D1 and R2 and can always be built again. It is that it is EXPENSIVE and invisible:
+ * every node is read and embedded again, which costs money and minutes, and the screen looks exactly
+ * the same afterwards. A one-click button next to "Preferences" invites a second press when the
+ * first one seems to have done nothing.
+ *
+ * ⚠️ It reports what was QUEUED, never "done". The answer comes back the moment the work is handed
+ * to the queue, and the index catches up behind it — writing "finished" here would be a sentence
+ * about something this screen cannot see. The number is the honest part: it says how much was
+ * accepted, so a repeat press can be compared against it.
+ *
+ * The dialog is opened from outside, like the settings one: its trigger is a `DropdownMenuItem`, and
+ * Radix unmounts the menu content in the same frame the item is chosen.
+ */
+interface ReindexDialogProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+}
+
+export function ReindexDialog({ open, onOpenChange }: ReindexDialogProps) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  const reindex = useMutation({ mutationFn: () => data.reindexNodes() });
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        // Closing forgets the last answer, so re-opening never shows a count from an earlier run as
+        // if it were this one's.
+        if (!next) reindex.reset();
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{i18n.t("reindex.title")}</DialogTitle>
+          <DialogDescription>{i18n.t("reindex.description")}</DialogDescription>
+        </DialogHeader>
+        {reindex.isSuccess ? (
+          <p role="status" className="text-sm">
+            {i18n.t("reindex.queued", { count: reindex.data.queued })}
+          </p>
+        ) : null}
+        {reindex.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("reindex.failed")}
+          </p>
+        ) : null}
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {i18n.t(reindex.isSuccess ? "reindex.close" : "reindex.cancel")}
+          </Button>
+          {reindex.isSuccess ? null : (
+            <Button disabled={reindex.isPending} onClick={() => reindex.mutate()}>
+              {i18n.t(reindex.isPending ? "reindex.running" : "reindex.confirm")}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/ui/src/app/settings-dialog/settings-dialog.tsx

@@ -0,0 +1,135 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useI18n, useLanguage } from "@/i18n/i18n-context.tsx";
+import { languageName } from "@/i18n/i18n-languages/i18n-languages.ts";
+import { type ThemeChoice, ThemeChoices } from "@/theme/theme.ts";
+import { useTheme } from "@/theme/theme-context.tsx";
+import { DeviceZone, deviceZone, ZoneOptions } from "@/time/time.ts";
+import { useTimeZone } from "@/time/time-context.tsx";
+
+// The settings that belong to the person rather than to the installation: language and appearance.
+// Both are client state — they live in localStorage, not in the Intel HTTP surface — so they do not
+// belong on a screen with a save button. A choice applies at once; a dialog that previews and only
+// commits on "Save" would carry two states too many for two dropdowns.
+//
+// ⚠️ The third one, the reader's timezone, is BACK — and the sentence that sent it away is the
+// reason it could come back (#467). It left with the Agents (#388) because it was a suggestion for
+// a schedule and the lens its calendar was read through (#228); with both gone nothing read the
+// value, "and a preference that changes nothing on screen is worse than none — it invites the
+// reader to set it and then contradicts them. Reading times in a chosen zone is a feature, and it
+// would come back as one."
+//
+// It came back as one, and in that order: FIRST every time on screen reads `useDateTime()`, THEN
+// this dropdown exists. Whoever adds a surface that shows a time reads that hook — a second
+// `toLocaleString` would be the old state again, only harder to find.
+//
+// The dialog is opened from outside (the user footer holds the state), because its trigger is a
+// DropdownMenuItem: Radix unmounts the menu content when an item is chosen and would take a dialog
+// nested inside it along in the same frame.
+interface SettingsDialogProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+}
+
+export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+  const i18n = useI18n();
+  const language = useLanguage();
+  const theme = useTheme();
+  const zone = useTimeZone();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{i18n.t("settings.title")}</DialogTitle>
+          <DialogDescription>{i18n.t("settings.description")}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6">
+          {/* Without a provider there is nothing to choose — then the block is absent rather than a
+              dead dropdown. The number of languages is deliberately NOT checked: there are always
+              at least the three built-in ones, so a condition on it would be dead code. */}
+          {language ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-language">
+                {i18n.t("settings.language")}
+              </label>
+              <Select value={language.current} onValueChange={language.select}>
+                <SelectTrigger id="settings-language" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {language.codes.map((code) => (
+                    <SelectItem key={code} value={code}>
+                      {languageName(code)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+          {theme ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-appearance">
+                {i18n.t("settings.appearance")}
+              </label>
+              {/* Radix hands out a raw string; the values come from the same list that fills the
+                  menu, so the assertion here is the whole check. */}
+              <Select
+                value={theme.current}
+                onValueChange={(value) => theme.select(value as ThemeChoice)}
+              >
+                <SelectTrigger id="settings-appearance" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {ThemeChoices.map((choice) => (
+                    <SelectItem key={choice} value={choice}>
+                      {i18n.t(`settings.appearance.${choice}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+          {zone ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-timezone">
+                {i18n.t("settings.timezone")}
+              </label>
+              <Select value={zone.current} onValueChange={zone.select}>
+                <SelectTrigger id="settings-timezone" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {/* The default is the device's zone and is NAMED as such — not an empty field
+                      that would look as if nothing were set. */}
+                  <SelectItem value={DeviceZone}>
+                    {i18n.t("settings.timezone.device", { zone: deviceZone() })}
+                  </SelectItem>
+                  {ZoneOptions.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">{i18n.t("settings.timezone.hint")}</p>
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/ui/src/app/sidebar-preferences/sidebar-preferences.ts

@@ -0,0 +1,68 @@
+import type {
+  SidebarPreferenceDeps,
+  SidebarPreferenceStore,
+  SidebarPreferences,
+} from "./sidebar-preferences.types.ts";
+
+// Below the minimum the tree is unreadable and the sidebar cannot be dragged back open by eye;
+// above the maximum the content box stops being the larger half. Both are the reason the drag
+// exists at all, so neither is configurable.
+export const MinSidebarWidth = 180;
+export const MaxSidebarWidth = 520;
+export const DefaultSidebarWidth = 256;
+
+const storageKey = "intel.sidebar";
+const defaults: SidebarPreferences = { open: true, width: DefaultSidebarWidth };
+
+export function clampSidebarWidth(width: number): number {
+  if (!Number.isFinite(width)) return DefaultSidebarWidth;
+  return Math.min(MaxSidebarWidth, Math.max(MinSidebarWidth, Math.round(width)));
+}
+
+function browserStorage(): Pick<Storage, "getItem" | "setItem"> | null {
+  // Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+  // typeof check. Losing the preference is acceptable; losing the shell is not.
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+// The shell's own client state: not server data, so it stays out of TanStack Query, but it has to
+// survive a page change — which in a SPA includes a full reload — so it is written through.
+export function createSidebarPreferences(deps: SidebarPreferenceDeps = {}): SidebarPreferenceStore {
+  const storage = deps.storage === undefined ? browserStorage() : deps.storage;
+
+  return {
+    read() {
+      let raw: string | null = null;
+      try {
+        raw = storage?.getItem(storageKey) ?? null;
+      } catch {
+        return defaults;
+      }
+      if (raw === null) return defaults;
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return defaults;
+      }
+      if (typeof parsed !== "object" || parsed === null) return defaults;
+      const value = parsed as Partial<SidebarPreferences>;
+      return {
+        open: typeof value.open === "boolean" ? value.open : defaults.open,
+        width: clampSidebarWidth(typeof value.width === "number" ? value.width : defaults.width),
+      };
+    },
+    write(preferences) {
+      try {
+        storage?.setItem(
+          storageKey,
+          JSON.stringify({ open: preferences.open, width: clampSidebarWidth(preferences.width) }),
+        );
+      } catch {}
+    },
+  };
+}