@schlenkr/ragents 0.1.0

package/apps/server/src/title-settings.ts

@@ -0,0 +1,67 @@
+import { readFile, mkdir, writeFile, rename } from "node:fs/promises";
+import path from "node:path";
+import type { ModelRuntime } from "@aicontainer/agent";
+import { getSupportedThinkingLevels } from "@aicontainer/ai";
+import { DomainError } from "@aicontainer/ragents";
+import type { TitleModelSelection, TitleModelSettings } from "./title-settings-contract.js";
+
+const preferred = ["google/gemma-4-26b-a4b-it", "qwen/qwen3.8-flash", "openai/gpt-5.4-nano"];
+const invalid = (message: string) => new DomainError("title-model-invalid", message, 400);
+
+export class TitleSettingsStore {
+  #selection: TitleModelSelection | null;
+  #pending: Promise<unknown> = Promise.resolve();
+
+  private constructor(private readonly file: string, private readonly models: TitleModelSettings["models"], value: unknown) {
+    this.#selection = this.#validate(value);
+  }
+
+  static async create(file: string, runtime: ModelRuntime, defaults: TitleModelSelection | null, provider: string): Promise<TitleSettingsStore> {
+    const models = runtime.getModels(provider).filter((model) => model.input.includes("text") && getSupportedThinkingLevels(model).includes("off"))
+      .map((model) => ({ provider: model.provider, id: model.id, label: model.name.trim() }));
+    models.sort((left, right) => {
+      const rank = (id: string) => preferred.includes(id) ? preferred.indexOf(id) : preferred.length;
+      return rank(left.id) - rank(right.id) || left.label.localeCompare(right.label);
+    });
+    let value: unknown;
+    try { value = JSON.parse(await readFile(file, "utf8")); }
+    catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== "ENOENT") throw error;
+      value = { selection: defaults };
+    }
+    return new TitleSettingsStore(file, models, value);
+  }
+
+  selection = (): TitleModelSelection | null => this.#selection ? { ...this.#selection } : null;
+
+  get(): TitleModelSettings {
+    return { selection: this.selection(), models: this.models.map((model) => ({ ...model })) };
+  }
+
+  async save(value: unknown): Promise<TitleModelSettings> {
+    const selection = this.#validate(value);
+    const operation = this.#pending.then(async () => {
+      await mkdir(path.dirname(this.file), { recursive: true, mode: 0o700 });
+      await writeFile(`${this.file}.tmp`, `${JSON.stringify({ selection })}\n`, { mode: 0o600 });
+      await rename(`${this.file}.tmp`, this.file);
+      this.#selection = selection;
+      return this.get();
+    });
+    this.#pending = operation.catch(() => undefined);
+    return operation;
+  }
+
+  #validate(value: unknown): TitleModelSelection | null {
+    if (!value || typeof value !== "object" || Array.isArray(value)
+      || Object.keys(value).length !== 1 || !("selection" in value)) throw invalid("Erforderlich ist ausschließlich selection mit Modellwahl oder null.");
+    const selected = value.selection;
+    if (selected === null) return null;
+    if (!selected || typeof selected !== "object" || Array.isArray(selected)
+      || Object.keys(selected).some((key) => !["provider", "model"].includes(key))
+      || !("provider" in selected) || typeof selected.provider !== "string"
+      || !("model" in selected) || typeof selected.model !== "string") throw invalid("Die Titelmodellwahl braucht provider und model.");
+    if (!this.models.some((model) => model.provider === selected.provider && model.id === selected.model))
+      throw invalid(`Das Titelmodell ${selected.provider}/${selected.model} steht nicht zur Wahl; erforderlich ist ein Textmodell ohne Reasoning.`);
+    return { provider: selected.provider, model: selected.model };
+  }
+}

package/apps/web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@aicontainer/web",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./ui": "./src/ui/index.ts",
+    "./tests/*": "./tests/*",
+    "./*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "node --import tsx --test tests/*.test.ts",
+    "build:panel": "vite build --config vite.panel.config.ts"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.3.0",
+    "dompurify": "^3.4.13",
+    "highlight.js": "^11.12.0",
+    "lucide-react": "^1.46.0",
+    "react": "^19.2.0",
+    "react-diff-view": "^3.3.3",
+    "react-dom": "^19.2.0",
+    "streamdown": "^2.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "tsx": "^4.20.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.0"
+  }
+}

package/apps/web/src/AccessContext.tsx

@@ -0,0 +1,125 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ComponentType, type PropsWithChildren } from "react";
+import { createAccessContext, unrestrictedAccess, type AccessContext as UserAccess, type AccessSnapshot } from "../../../packages/ragents/src/access";
+import { accessSnapshotFrom, observeAccessExpiry } from "./access-session";
+import { errorFrom } from "./lib/http";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "./Toolbar";
+import { Button, Card, cn, Input } from "./ui";
+
+const screenClasses = "grid min-h-dvh place-items-center p-6";
+const cardWidthClasses = "w-[min(100%,380px)]";
+const cardClasses = "gap-0 p-8 shadow-pop max-sm:p-6";
+const fieldClasses = "mb-5 grid gap-2 text-[0.85rem] font-semibold";
+
+interface AccessValue extends UserAccess {
+  logout: () => Promise<void>;
+}
+
+export const AccessContext = createContext<AccessValue>({ ...unrestrictedAccess, logout: async () => {} });
+export const useAccess = () => useContext(AccessContext);
+
+/** Die ganzseitige Karte für Anmeldung und Startfehler, auch vom Einstieg in main.tsx verwendet. */
+export function AccessScreen({ children }: PropsWithChildren) {
+  return <main className={screenClasses}><Card className={cn(cardWidthClasses, cardClasses)}>{children}</Card></main>;
+}
+
+export interface LoginProps {
+  onLogin: (snapshot: AccessSnapshot) => void;
+}
+
+/** Login ersetzt das Anmeldeformular, wenn ein Host die Anmeldung selbst führt (VS-Code-Erweiterung). */
+export function AccessGate({ children, Login: LoginComponent = Login }: PropsWithChildren<{ Login?: ComponentType<LoginProps> }>) {
+  const [snapshot, setSnapshot] = useState<AccessSnapshot>();
+  const [error, setError] = useState<string>();
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    const controller = new AbortController();
+    const original = window.fetch;
+    window.fetch = observeAccessExpiry(original.bind(window), window.location.origin, () => {
+      setSnapshot((current) => current?.enabled ? { enabled: true, user: null } : current);
+    });
+    setError(undefined);
+    void fetch("/api/access", { cache: "no-store", signal: controller.signal }).then(async (response) => {
+      if (!response.ok) throw await errorFrom(response, "Die Anmeldung konnte nicht geladen werden.");
+      const next = accessSnapshotFrom(await response.json());
+      if (!controller.signal.aborted) setSnapshot(next);
+    }).catch((cause: unknown) => {
+      if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause));
+    });
+    return () => { controller.abort(); window.fetch = original; };
+  }, [retry]);
+  useEffect(() => {
+    if (!snapshot?.enabled) return;
+    const refresh = () => {
+      if (document.visibilityState === "hidden") return;
+      void fetch("/api/access", { cache: "no-store" }).then(async (response) => {
+        if (!response.ok) return;
+        const next = accessSnapshotFrom(await response.json());
+        setSnapshot((current) => current?.user?.id === next.user?.id ? current : next);
+      }).catch(() => undefined);
+    };
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    return () => { window.removeEventListener("focus", refresh); document.removeEventListener("visibilitychange", refresh); };
+  }, [snapshot?.enabled]);
+  const logout = useCallback(async () => {
+    const response = await fetch("/api/access/logout", { method: "POST" });
+    if (!response.ok) throw await errorFrom(response, "Abmelden fehlgeschlagen.");
+    setSnapshot({ enabled: true, user: null });
+  }, []);
+  const access = useMemo(() => ({ ...createAccessContext(snapshot ?? { enabled: true, user: null }), logout }), [snapshot, logout]);
+  if (!snapshot) return <AccessScreen>
+    <h1 className="my-3 text-[1.5rem]">RAgents</h1>
+    {error ? <><p className="mb-6 leading-normal" role="alert">{error}</p><Button variant="outline" onClick={() => setRetry((value) => value + 1)}>Erneut laden</Button></>
+      : <p className="mb-6 leading-normal" role="status">Anmeldung wird geprüft ...</p>}
+  </AccessScreen>;
+  return <AccessContext.Provider value={access}>
+    {snapshot.enabled && !snapshot.user ? <LoginComponent onLogin={setSnapshot} /> : children}
+  </AccessContext.Provider>;
+}
+
+function Login({ onLogin }: LoginProps) {
+  const [id, setId] = useState("");
+  const [password, setPassword] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  return <main className={screenClasses}><form className={cardWidthClasses} onSubmit={(event) => {
+    event.preventDefault();
+    if (pending) return;
+    setPending(true);
+    setError(undefined);
+    void fetch("/api/access/login", {
+      method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: id.trim(), password }),
+    }).then(async (response) => {
+      if (!response.ok) throw await errorFrom(response, "Anmeldung fehlgeschlagen.");
+      const next = accessSnapshotFrom(await response.json());
+      if (next.enabled && !next.user) throw new Error("Der Server hat die Anmeldung nicht bestätigt.");
+      setPassword("");
+      onLogin(next);
+    }).catch((cause: unknown) => {
+      setPassword("");
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }).finally(() => setPending(false));
+  }}><Card className={cardClasses}>
+    <span className="text-sm font-semibold text-muted-foreground">RAgents</span>
+    <h1 className="my-3 text-[1.5rem]">Einloggen</h1>
+    <p className="mb-6 leading-normal text-muted-foreground">Melde dich mit deinem Benutzerkonto für diese Werkstatt an.</p>
+    <label className={fieldClasses}>Benutzer<Input autoComplete="username" autoFocus disabled={pending} name="username" onChange={(event) => setId(event.target.value)} required value={id} /></label>
+    <label className={fieldClasses}>Passwort<Input autoComplete="current-password" disabled={pending} name="password" onChange={(event) => setPassword(event.target.value)} required type="password" value={password} /></label>
+    {error && <p className="mb-6 text-destructive" role="alert">{error}</p>}
+    <Button className="w-full" disabled={pending || !id.trim() || !password} type="submit">{pending ? "Anmeldung läuft ..." : "Einloggen"}</Button>
+  </Card></form></main>;
+}
+
+export function UserMenu() {
+  const access = useAccess();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  if (!access.enabled || !access.user) return null;
+  return <div className="flex flex-none items-stretch text-sm">
+    <ToolbarItem as="button" aria-label={`${access.user.label} abmelden`} className="max-w-[160px] max-sm:max-w-[100px]" disabled={pending} title={access.user.id} type="button" onClick={() => {
+      setPending(true); setError(undefined);
+      void access.logout().catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause))).finally(() => setPending(false));
+    }}><ToolbarCopy><ToolbarLabel className="normal-case [overflow-wrap:anywhere]">{access.user.label}</ToolbarLabel><ToolbarText>Abmelden</ToolbarText></ToolbarCopy></ToolbarItem>
+    {error && <ToolbarItem className="text-destructive" role="alert">{error}</ToolbarItem>}
+  </div>;
+}

package/apps/web/src/App.tsx

@@ -0,0 +1,315 @@
+import { canStartEntry } from "../../../packages/ragents/src/access";
+import { useAccess, UserMenu } from "./AccessContext";
+import { Alert, Button, Spinner } from "./ui";
+import { RunModalContext, WorkspaceModalContext } from "./ui/dialog";
+import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
+import { deleteSession, listSessions, type SessionInfo } from "./api";
+import { CircleHelpIcon, SettingsIcon, SparklesIcon } from "lucide-react";
+import { HelpDialog } from "./HelpDialog";
+import { Overview } from "./Overview";
+import type { OverviewPanelContext } from "./PluginRegistry";
+import { PluginChat } from "./PluginChat";
+import { chatUserLocation, type ChatRunLocation } from "./chat/user-location";
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import { rpc } from "./rpc";
+import { SettingsModal } from "./SettingsModal";
+import { usePluginActivation } from "./PluginActivation";
+import { useRunReadState } from "./run-read-state";
+
+const chatWorkspaceClass = "flex min-h-0 min-w-0 flex-1 flex-col";
+const headerSquareClass = "inline-flex w-header min-h-header items-center justify-center border-r border-border text-primary transition-colors duration-100 not-disabled:cursor-pointer hover:not-disabled:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3 aria-expanded:bg-primary aria-expanded:text-primary-foreground aria-pressed:bg-primary aria-pressed:text-primary-foreground disabled:opacity-45";
+
+export function App() {
+  const access = useAccess();
+  const runReadState = useRunReadState(access.user?.id);
+  const readRuns = access.can("runs.read");
+  const writeRuns = readRuns && access.can("runs.write");
+  const inspectRuns = access.can("runs.inspect");
+  const deleteRuns = readRuns && access.can("runs.delete");
+  const pluginActivation = usePluginActivation();
+  const overviewButtonRef = useRef<HTMLButtonElement>(null);
+  const settingsButtonRef = useRef<HTMLButtonElement>(null);
+  const [runHeaderContainer, setRunHeaderContainer] = useState<HTMLDivElement | null>(null);
+  const [canvasToolbarContainer, setCanvasToolbarContainer] = useState<HTMLDivElement | null>(null);
+  const [workspaceHeaderContainer, setWorkspaceHeaderContainer] = useState<HTMLDivElement | null>(null);
+  const [statusContainer, setStatusContainer] = useState<HTMLElement | null>(null);
+  const [workspaceModalContainer, setWorkspaceModalContainer] = useState<HTMLDivElement | null>(null);
+  const [runModalContainer, setRunModalContainer] = useState<HTMLDivElement | null>(null);
+  const [serverSessions, setServerSessions] = useState<SessionInfo[]>([]);
+  const [draft, setDraft] = useState<(SessionInfo & { startEntryId?: string }) | undefined>();
+  const [activeId, setActiveId] = useState<string | undefined>();
+  const [runLocation, setRunLocation] = useState<ChatRunLocation>();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [overviewOpen, setOverviewOpen] = useState(false);
+  const [toolbarPanel, setToolbarPanel] = useState<string>();
+  const [overviewActivated, setOverviewActivated] = useState(false);
+  const [busyPanels, setBusyPanels] = useState<ReadonlySet<string>>(() => new Set());
+  const [sessionsUnreachable, setSessionsUnreachable] = useState(false);
+  const refreshing = useRef<Promise<void> | undefined>(undefined);
+  const refreshRequested = useRef(false);
+  const refresh = useCallback((): Promise<void> => {
+    if (!readRuns) return Promise.resolve();
+    if (refreshing.current) {
+      refreshRequested.current = true;
+      return refreshing.current;
+    }
+    const update = async () => {
+      do {
+        refreshRequested.current = false;
+        try {
+          setServerSessions(await listSessions());
+          setSessionsUnreachable(false);
+        } catch { setSessionsUnreachable(true); }
+      } while (refreshRequested.current);
+    };
+    refreshing.current = update().finally(() => { refreshing.current = undefined; });
+    return refreshing.current;
+  }, [readRuns]);
+
+  useEffect(() => {
+    if (!readRuns || draft) return;
+    void refresh();
+    const unsubscribe = rpc.subscribe(coreContracts.channels.sessions, {}, () => void refresh());
+    const timer = setInterval(() => void refresh(), 5000);
+    return () => { unsubscribe(); clearInterval(timer); };
+  }, [draft, readRuns, refresh]);
+
+  const closeOverview = useCallback((restoreFocus = false) => {
+    setOverviewOpen(false);
+    if (restoreFocus) overviewButtonRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  useEffect(() => {
+    if (!canvasToolbarContainer) return;
+    const activateCanvas = () => { closeOverview(); setToolbarPanel(undefined); };
+    canvasToolbarContainer.addEventListener("click", activateCanvas);
+    return () => canvasToolbarContainer.removeEventListener("click", activateCanvas);
+  }, [canvasToolbarContainer, closeOverview]);
+
+  // Overview contributions keep their state after the first opening.
+  const openOverview = useCallback(() => {
+    setToolbarPanel(undefined);
+    setOverviewActivated(true);
+    setOverviewOpen(true);
+  }, []);
+
+  const toggleOverview = useCallback(() => {
+    if (overviewOpen) closeOverview(true);
+    else openOverview();
+  }, [closeOverview, openOverview, overviewOpen]);
+
+  useEffect(() => {
+    const handleShortcut = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.repeat || event.altKey || event.shiftKey
+        || event.key.toLowerCase() !== "i" || event.metaKey === event.ctrlKey) return;
+      const button = overviewButtonRef.current;
+      if (!button || button.closest("[inert]")) return;
+      event.preventDefault();
+      toggleOverview();
+    };
+    window.addEventListener("keydown", handleShortcut);
+    return () => window.removeEventListener("keydown", handleShortcut);
+  }, [toggleOverview]);
+
+  const setPanelBusy = useCallback((id: string, busy: boolean) => setBusyPanels((current) => {
+    if (current.has(id) === busy) return current;
+    const next = new Set(current);
+    if (busy) next.add(id);
+    else next.delete(id);
+    return next;
+  }), []);
+
+  const sessions = serverSessions;
+  const activeSession = sessions.find((session) => session.id === activeId);
+  const openSettings = useCallback(() => { setToolbarPanel(undefined); setSettingsOpen(true); }, []);
+  const closeHelp = useCallback(() => setHelpOpen(false), []);
+  const closeSettings = useCallback(() => {
+    setSettingsOpen(false);
+    requestAnimationFrame(() => settingsButtonRef.current?.focus());
+  }, []);
+  const settingsAction = (
+    <Button aria-label="Einstellungen öffnen" onClick={openSettings} ref={settingsButtonRef} size="icon-lg" title="Einstellungen" variant="ghost">
+      <SettingsIcon />
+    </Button>
+  );
+
+  const handleOpen = (id: string) => {
+    setActiveId(id);
+    closeOverview(true);
+  };
+
+  const handleCreate = () => {
+    setToolbarPanel(undefined);
+    closeOverview(true);
+    setDraft({ id: crypto.randomUUID(), title: "Neuer Run", updatedAt: Date.now() });
+  };
+
+  const handleDelete = async (ids: readonly string[]) => {
+    const results = await Promise.allSettled(ids.map((id) => deleteSession(id)));
+    const deleted = ids.filter((_, index) => results[index]!.status === "fulfilled");
+    if (activeId !== undefined && deleted.includes(activeId)) setActiveId(undefined);
+    await refresh();
+    const failure = results.find((result): result is PromiseRejectedResult => result.status === "rejected");
+    if (failure) throw failure.reason;
+  };
+
+  if (pluginActivation.status === "loading") {
+    return <div className="m-auto p-6 text-muted-foreground">Produktprofil wird geladen.</div>;
+  }
+  if (pluginActivation.status === "failed") {
+    return (
+      <div className="flex h-full">
+        <main className="relative z-1 flex min-h-0 min-w-0 flex-1 bg-[image:var(--canvas-backdrop)]">
+          <div className={chatWorkspaceClass}>
+            <header className="flex min-h-[42px] flex-none items-center gap-3 border-b border-border-soft pr-0.5 pb-2 pl-2.5">
+              <div className="flex min-w-0 flex-1 items-center gap-3 text-[0.82rem] font-semibold text-foreground">Produktprofil nicht verfügbar</div>
+            </header>
+            <Alert className="m-auto max-w-[560px] gap-3 p-6" variant="destructive">
+              <p>{pluginActivation.error}</p>
+              <Button variant="outline" onClick={() => window.location.reload()}>Neu laden</Button>
+            </Alert>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  const registry = pluginActivation.registry;
+  const availablePanels = registry.overviewPanels.filter((panel) => panel.readRight === undefined || access.can(panel.readRight));
+  const panels = availablePanels.filter((panel) => panel.placement !== "toolbar");
+  const toolbarPanels = availablePanels.filter((panel) => panel.placement === "toolbar");
+  const overviewAvailable = readRuns || panels.length > 0;
+  const busy = panels.some((panel) => busyPanels.has(panel.id));
+  const userLocation = chatUserLocation(readRuns ? activeId : undefined, overviewOpen, runLocation);
+
+  return (
+    <div className="flex h-full flex-col">
+      <header className="relative z-[80] flex h-header flex-none items-stretch border-b border-border bg-shell shadow-bar">
+        {overviewAvailable && <div className="relative flex flex-none self-stretch">
+          <button
+            aria-controls="app-overview"
+            aria-expanded={overviewOpen}
+            aria-haspopup="dialog"
+            aria-keyshortcuts="Meta+I Control+I"
+            aria-label={overviewOpen ? "Übersicht schließen" : "Übersicht öffnen"}
+            className={headerSquareClass}
+            onClick={toggleOverview}
+            ref={overviewButtonRef}
+            title={`Übersicht (Cmd+I / Ctrl+I)${busy ? ": Bearbeitung läuft" : ""}`}
+            type="button"
+          >
+            {busy ? <Spinner aria-hidden className="size-[18px]" /> : <SparklesIcon size={22} />}
+          </button>
+        </div>}
+        <div className="relative flex flex-none self-stretch empty:hidden" ref={setCanvasToolbarContainer} />
+        {toolbarPanels.map(({ id, Panel }) => <ToolbarPanelHost
+          id={id} key={id} onBusy={setPanelBusy}
+          onClose={() => setToolbarPanel(undefined)}
+          onOpen={() => { if (!settingsOpen && !helpOpen && !draft) { closeOverview(); setToolbarPanel(id); } }}
+          open={toolbarPanel === id} Panel={Panel} registry={registry}
+          userLocation={userLocation}
+        />)}
+        <div aria-label="Run-Titelleiste" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3 max-md:in-[header:has([data-slot=overseer-toolbar][data-open=true])]:flex-[0_1_0]" ref={setRunHeaderContainer} role="region" tabIndex={0} />
+        <UserMenu />
+        <div className="flex min-w-0 flex-[0_1_auto] items-stretch bg-shell has-data-[workspace-state=expanded]:w-[var(--workspace-panel-width,560px)] has-data-[workspace-state=expanded]:border-l has-data-[workspace-state=expanded]:border-border">
+          <div className="flex min-w-0 flex-1 empty:hidden" ref={setWorkspaceHeaderContainer} />
+          <div className="flex flex-none items-center gap-1.5 px-2 max-md:gap-0.5 max-md:px-1">
+            {access.can("settings.read") && settingsAction}
+            {inspectRuns && <Button aria-haspopup="dialog" aria-label="Hilfe öffnen" onClick={() => { setToolbarPanel(undefined); setHelpOpen(true); }} size="icon-lg" title="Hilfe" variant="ghost">
+              <CircleHelpIcon />
+            </Button>}
+          </div>
+        </div>
+      </header>
+    <WorkspaceModalContext.Provider value={workspaceModalContainer}>
+    <div className="relative flex min-h-0 flex-1 flex-col" ref={setWorkspaceModalContainer}>
+    <RunModalContext.Provider value={runModalContainer}>
+    <div className="relative flex h-auto min-h-0 flex-1" ref={setRunModalContainer}>
+      <main className="relative z-1 flex min-h-0 min-w-0 flex-1 bg-[image:var(--canvas-backdrop)] @container/chat-content">
+        {readRuns && activeId
+          ? (
+            <PluginChat
+              canvasToolbarContainer={canvasToolbarContainer}
+              headerContainer={runHeaderContainer}
+              workspaceHeaderContainer={workspaceHeaderContainer}
+              statusContainer={statusContainer}
+              key={activeId}
+              onLocationChange={setRunLocation}
+              onViewed={runReadState.markViewed}
+              viewing={!overviewOpen && !settingsOpen && !helpOpen && !draft && !toolbarPanel}
+              registry={registry}
+              session={activeSession ?? { id: activeId, title: "Neuer Run", updatedAt: Date.now() }}
+            />
+          )
+          : (
+            <div className={chatWorkspaceClass}>
+              <div className="m-auto text-center text-muted-foreground">{readRuns ? writeRuns ? "Öffne oben links die Übersicht, um einen Run zu wählen oder einen neuen zu starten." : "Öffne oben links die Übersicht, um einen Run zu wählen. Du hast Lesezugriff." : "Für dieses Benutzerkonto sind keine Runs freigegeben."}</div>
+            </div>
+          )}
+      </main>
+      {overviewActivated && (
+        <Overview
+          onOpen={openOverview}
+          onBusy={setPanelBusy}
+          onClose={() => closeOverview(true)}
+          open={overviewOpen}
+          panels={panels}
+          registry={registry}
+          runs={readRuns
+            ? {
+              activeId,
+              canCreate: writeRuns && (access.can("runs.create") || registry.scriptEntries.some((entry) => canStartEntry(access, entry.id))),
+              canDelete: deleteRuns,
+              onCreate: handleCreate,
+              onDelete: handleDelete,
+              onOpen: handleOpen,
+              registry,
+              sessions,
+              seenRevisions: runReadState.revisions,
+              unreachable: sessionsUnreachable,
+            }
+            : undefined}
+        />
+      )}
+      {draft && (
+        <PluginChat
+          key={draft.id}
+          onStarted={() => { setActiveId(draft.id); setDraft(undefined); void refresh(); }}
+          registry={registry}
+          session={draft}
+          startDialog={{ onClose: () => setDraft(undefined), initialEntryId: draft.startEntryId }}
+        />
+      )}
+      {settingsOpen && <SettingsModal onClose={closeSettings} registry={registry} />}
+      {inspectRuns && helpOpen && <HelpDialog onClose={closeHelp}
+        sampleEntries={registry.scriptEntries.filter((entry) => canStartEntry(access, entry.id)).map((entry) => entry.id)}
+        onStartSample={(entryId) => {
+          if (!canStartEntry(access, entryId) || !registry.scriptEntries.some((entry) => entry.id === entryId)) return;
+          setHelpOpen(false);
+          setToolbarPanel(undefined);
+          closeOverview();
+          setDraft({ id: crypto.randomUUID(), title: "Neuer Run", updatedAt: Date.now(), startEntryId: entryId });
+        }} />}
+    </div>
+    <footer
+      aria-label="Run-Statusleiste"
+      className="relative flex h-statusbar w-full flex-none items-stretch pl-3 before:pointer-events-none before:absolute before:inset-0 before:z-[2] before:border-t before:border-border before:bg-shell before:shadow-status before:backdrop-blur-[16px] before:content-['']"
+      ref={setStatusContainer}
+    />
+    </RunModalContext.Provider>
+    </div>
+    </WorkspaceModalContext.Provider>
+    </div>
+  );
+}
+
+function ToolbarPanelHost({ id, onBusy, Panel, ...context }: Omit<OverviewPanelContext, "onBusy"> & {
+  id: string;
+  onBusy: (id: string, busy: boolean) => void;
+  Panel: ComponentType<OverviewPanelContext>;
+}) {
+  const reportBusy = useCallback((busy: boolean) => onBusy(id, busy), [id, onBusy]);
+  useEffect(() => () => onBusy(id, false), [id, onBusy]);
+  return <Panel {...context} onBusy={reportBusy} />;
+}

package/apps/web/src/CanvasShortcuts.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { ChevronLeftIcon } from "lucide-react";
+import { ToolbarItem } from "./Toolbar";
+
+export function CanvasShortcuts({ children }: { children: ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+  const [scroll, setScroll] = useState({ overflow: false, left: false, right: false });
+
+  useEffect(() => {
+    const container = containerRef.current!;
+    const viewport = viewportRef.current!;
+    const content = contentRef.current!;
+    const measure = () => {
+      const next = {
+        overflow: content.scrollWidth > container.clientWidth + 1,
+        left: viewport.scrollLeft > 1,
+        right: viewport.scrollLeft + viewport.clientWidth < viewport.scrollWidth - 1,
+      };
+      setScroll((current) => current.overflow === next.overflow && current.left === next.left && current.right === next.right ? current : next);
+    };
+    const wheel = (event: WheelEvent) => {
+      if (event.defaultPrevented || event.ctrlKey || viewport.scrollWidth <= viewport.clientWidth + 1) return;
+      if (event.target instanceof Element && event.target.closest("[data-canvas-scroll]")) return;
+      event.preventDefault();
+      const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+      const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? 16 : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? viewport.clientWidth : 1;
+      viewport.scrollLeft += delta * unit;
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    observer.observe(viewport);
+    observer.observe(content);
+    viewport.addEventListener("scroll", measure);
+    viewport.addEventListener("wheel", wheel, { passive: false });
+    measure();
+    return () => {
+      observer.disconnect();
+      viewport.removeEventListener("scroll", measure);
+      viewport.removeEventListener("wheel", wheel);
+    };
+  }, []);
+
+  const move = (direction: number) => {
+    const viewport = viewportRef.current!;
+    const item = Array.from(contentRef.current!.children).find((child) => child.getBoundingClientRect().width > 0);
+    const step = item ? item.getBoundingClientRect().width : viewport.clientWidth / 3;
+    viewport.scrollBy({ left: direction * step, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
+  };
+
+  return <div className="flex min-w-0 flex-1" ref={containerRef}>
+    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Apps und Actors nach links" className="w-8 justify-center px-0" disabled={!scroll.left} onClick={() => move(-1)} title="Nach links blättern" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
+    <div aria-label="Apps und Actors durchblättern" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3" id={id} ref={viewportRef} role="group" tabIndex={0}>
+      <div className="flex w-max flex-none items-stretch" ref={contentRef}>{children}</div>
+    </div>
+    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Apps und Actors nach rechts" className="w-8 justify-center border-r-0 border-l border-border px-0 [&>svg]:rotate-180" disabled={!scroll.right} onClick={() => move(1)} title="Nach rechts blättern" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
+  </div>;
+}