@schlenkr/ragents 0.1.0

package/apps/web/src/SourceCode.tsx

@@ -0,0 +1,49 @@
+import { cn } from "cn";
+import { useMemo } from "react";
+import { highlightLines, highlightSource } from "./highlighting";
+
+const sourceClasses = "m-0 min-h-full min-w-max bg-transparent px-3 py-2.5 font-mono text-[11px] leading-[1.5] text-foreground [tab-size:4]";
+
+interface SourceCodeProps {
+  className?: string;
+  content: string;
+  language?: string;
+  lineNumbers?: boolean;
+  path: string;
+}
+
+export function SourceCode({ className, content, language, lineNumbers = false, path }: SourceCodeProps) {
+  return lineNumbers
+    ? <NumberedSource className={className} content={content} language={language} path={path} />
+    : <PlainSource className={className} content={content} language={language} path={path} />;
+}
+
+function PlainSource({ className, content, language, path }: Omit<SourceCodeProps, "lineNumbers">) {
+  const highlighted = useMemo(() => {
+    const result = highlightSource(content, path, language);
+    return { language: result.language, content: { __html: result.html } };
+  }, [content, language, path]);
+
+  return (
+    <pre className={cn(sourceClasses, className)} data-slot="source-code">
+      <code className={`hljs block language-${highlighted.language}`} dangerouslySetInnerHTML={highlighted.content} />
+    </pre>
+  );
+}
+
+function NumberedSource({ className, content, language, path }: Omit<SourceCodeProps, "lineNumbers">) {
+  const highlighted = useMemo(() => highlightLines(content.replace(/\n$/, ""), path, language), [content, language, path]);
+
+  return (
+    <pre className={cn(sourceClasses, className)} data-slot="source-code">
+      <code className={`hljs block language-${highlighted.language}`}>
+        {highlighted.lines.map((line, index) => (
+          <span className="block" key={index}>
+            <span className="mr-[0.9em] inline-block w-[2.4em] select-none text-right text-muted-foreground">{index + 1}</span>
+            <span dangerouslySetInnerHTML={{ __html: line || "&nbsp;" }} />
+          </span>
+        ))}
+      </code>
+    </pre>
+  );
+}

package/apps/web/src/StartOptions.tsx

@@ -0,0 +1,231 @@
+import { useAccess } from "./AccessContext";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type PropsWithChildren } from "react";
+import { getStartOptions, setStartOption } from "./api";
+import {
+  choicePresentationFrom,
+  type StartOptionState,
+} from "../../server/src/plugin-support/start-options-contract";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui";
+import type { PluginRegistry, SessionContext, StartOptionControlContext } from "./PluginRegistry";
+import { modelDefaultsChangedEvent } from "./model-settings-events";
+
+export interface StartOptionsControl {
+  readonly options: readonly StartOptionState[];
+  readonly errors: ReadonlyMap<string, string>;
+  readonly pending: boolean;
+  set: (optionId: string, value: unknown) => Promise<void>;
+}
+
+const inertControl: StartOptionsControl = Object.freeze({
+  options: [],
+  errors: new Map(),
+  pending: false,
+  set: async () => undefined,
+});
+
+const StartOptionsContext = createContext<StartOptionsControl>(inertControl);
+
+const messageOf = (cause: unknown): string => cause instanceof Error ? cause.message : String(cause);
+
+/** Eine Vorbelegung gilt nur für Optionen, die der Run gerade wählen lässt; Unbekanntes bleibt liegen. */
+export const initialStartOptionUpdates = (
+  options: readonly StartOptionState[],
+  values: Readonly<Record<string, unknown>>,
+): readonly (readonly [string, unknown])[] => options
+  .filter((option) => option.selectable && !option.locked && Object.hasOwn(values, option.id))
+  .map((option) => [option.id, values[option.id]] as const);
+
+export function StartOptionsProvider({
+  children,
+  connected,
+  initialValues,
+  messageCount,
+  sessionId,
+}: PropsWithChildren<{
+  connected: boolean;
+  initialValues?: Readonly<Record<string, unknown>>;
+  messageCount: number;
+  sessionId: string;
+}>) {
+  const access = useAccess();
+  const allowed = access.can("runs.create") && access.can("runs.inspect");
+  const started = messageCount > 0;
+  const [state, setState] = useState<{ sessionId: string; options: readonly StartOptionState[]; errors: ReadonlyMap<string, string>; pending: boolean }>(
+    () => ({ sessionId, options: [], errors: new Map(), pending: true }),
+  );
+  const active = useRef<{ sessionId: string; pending: boolean; controller: AbortController } | null>(null);
+  const outstanding = useRef<{ sessionId: string; values: Readonly<Record<string, unknown>> } | null>(
+    initialValues ? { sessionId, values: initialValues } : null);
+  const [applying, setApplying] = useState(outstanding.current !== null);
+  const saving = useRef<{ sessionId: string; done: Promise<void> } | null>(null);
+  const [defaultsRevision, setDefaultsRevision] = useState(0);
+
+  useEffect(() => {
+    const refresh = () => setDefaultsRevision((value) => value + 1);
+    window.addEventListener(modelDefaultsChangedEvent, refresh);
+    return () => window.removeEventListener(modelDefaultsChangedEvent, refresh);
+  }, []);
+
+  useEffect(() => {
+    if (!allowed) return;
+    const controller = new AbortController();
+    const operation = { sessionId, pending: true, controller };
+    active.current = operation;
+    setState((current) => current.sessionId === sessionId ? { ...current, pending: true }
+      : { sessionId, options: [], errors: new Map(), pending: true });
+    void (async () => {
+      try {
+        if (saving.current?.sessionId === sessionId) await saving.current.done;
+        if (controller.signal.aborted) return;
+        const options = await getStartOptions(sessionId, controller.signal);
+        if (controller.signal.aborted) return;
+        setState((current) => {
+          const errors = new Map(current.errors);
+          errors.delete("");
+          return { sessionId, options, errors, pending: false };
+        });
+      } catch (cause) {
+        if (!controller.signal.aborted) setState((current) => ({ ...current, errors: new Map(current.errors).set("", messageOf(cause)), pending: false }));
+      } finally {
+        operation.pending = false;
+      }
+    })();
+    return () => {
+      controller.abort();
+      if (active.current === operation) active.current = null;
+    };
+  }, [allowed, connected, sessionId, started, defaultsRevision]);
+
+  const set = useCallback(async (optionId: string, value: unknown) => {
+    const operation = active.current;
+    if (!operation || operation.sessionId !== sessionId || operation.controller.signal.aborted) return;
+    if (operation.pending || saving.current?.sessionId === sessionId) {
+      setState((current) => ({ ...current, errors: new Map(current.errors).set(optionId, "Die Startoptionen werden noch geladen oder gespeichert. Bitte versuche es danach erneut.") }));
+      return;
+    }
+    operation.pending = true;
+    setState((current) => {
+      const errors = new Map(current.errors);
+      errors.delete(optionId);
+      return { ...current, errors, pending: true };
+    });
+    const done = (async () => {
+      let saved = false;
+      try {
+        await setStartOption(sessionId, optionId, value);
+        saved = true;
+        if (active.current !== operation) return;
+        const options = await getStartOptions(sessionId, operation.controller.signal);
+        if (active.current === operation) setState((current) => ({ ...current, options }));
+      } catch (cause) {
+        if (active.current?.sessionId === sessionId && (!saved || active.current === operation)) {
+          setState((current) => ({ ...current, errors: new Map(current.errors).set(optionId, messageOf(cause)) }));
+        }
+      } finally {
+        if (active.current === operation) {
+          operation.pending = false;
+          setState((current) => ({ ...current, pending: false }));
+        }
+      }
+    })();
+    const save = { sessionId, done };
+    saving.current = save;
+    try { await done; }
+    finally { if (saving.current === save) saving.current = null; }
+  }, [sessionId]);
+
+  useEffect(() => {
+    const initial = outstanding.current;
+    if (!initial) return;
+    if (!allowed || initial.sessionId !== sessionId) {
+      outstanding.current = null;
+      setApplying(false);
+      return;
+    }
+    if (state.sessionId !== sessionId || state.pending) return;
+    outstanding.current = null;
+    void (async () => {
+      for (const [optionId, value] of initialStartOptionUpdates(state.options, initial.values)) await set(optionId, value);
+      setApplying(false);
+    })();
+  }, [allowed, sessionId, set, state]);
+
+  const control = useMemo<StartOptionsControl>(() => ({
+    options: state.sessionId === sessionId ? state.options.map((option) => ({ ...option, locked: option.locked || started })) : [],
+    errors: state.sessionId === sessionId ? state.errors : new Map(),
+    pending: state.sessionId !== sessionId || state.pending || applying,
+    set,
+  }), [applying, state, sessionId, started, set]);
+
+  return <StartOptionsContext.Provider value={allowed ? control : inertControl}>{children}</StartOptionsContext.Provider>;
+}
+
+export const useStartOptions = () => useContext(StartOptionsContext);
+
+const ChoiceControl = ({ disabled, error, option, setValue }: StartOptionControlContext) => {
+  const parsed = useMemo(() => {
+    try {
+      const presentation = choicePresentationFrom(option.presentation, option.id);
+      if (!presentation) {
+        return { message: `Die Startoption ${option.id} hat weder eine Web-Komponente noch eine Auswahl-Darstellung` };
+      }
+      if (typeof option.value !== "string") return { message: `Der Wert der Startoption ${option.id} ist keine Kennung` };
+      return { presentation, value: option.value };
+    } catch (cause) {
+      return { message: messageOf(cause) };
+    }
+  }, [option]);
+  if ("message" in parsed) return <p className="text-[0.75rem] text-destructive" role="alert">{parsed.message}</p>;
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <Select disabled={disabled} items={parsed.presentation.options} value={parsed.value} onValueChange={(value) => { if (value !== null) void setValue(value); }}>
+        <SelectTrigger aria-label={parsed.presentation.label} size="sm"><SelectValue /></SelectTrigger>
+        <SelectContent>
+          {parsed.presentation.options.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
+        </SelectContent>
+      </Select>
+      {error && <p className="text-[0.75rem] text-destructive" role="alert">{error}</p>}
+    </div>
+  );
+};
+
+export function StartOptionControls({ disabled, registry, placement = "surface" }: { disabled: boolean; registry: PluginRegistry; placement?: "surface" | "composer" }) {
+  const access = useAccess();
+  const control = useStartOptions();
+  const loadError = control.errors.get("");
+  if (!access.can("runs.create") || !access.can("runs.inspect")) return null;
+  return (
+    <>
+      {placement === "surface" && loadError && <p className="text-[0.75rem] text-destructive" role="alert">{loadError}</p>}
+      {control.options
+        .filter((option) => option.selectable && !option.locked
+          && (registry.startOptions.get(option.id)?.placement ?? "surface") === placement)
+        .map((option) => {
+          const Control = registry.startOptions.get(option.id)?.Control ?? ChoiceControl;
+          return (
+            <Control
+              disabled={disabled || control.pending || !access.can("runs.write")}
+              error={control.errors.get(option.id)}
+              key={option.id}
+              option={option}
+              setValue={(value) => control.set(option.id, value)}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+export function StartOptionBadges({ registry, session }: { registry: PluginRegistry; session: SessionContext }) {
+  const access = useAccess();
+  const control = useStartOptions();
+  if (!access.can("runs.inspect")) return null;
+  return (
+    <>
+      {control.options.map((option) => {
+        const Badge = registry.startOptions.get(option.id)?.Badge;
+        return Badge ? <Badge key={option.id} option={option} session={session} /> : null;
+      })}
+    </>
+  );
+}

package/apps/web/src/StartSurface.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { BookIcon, CodeIcon } from "lucide-react";
+import { Button, Input, ListDetail, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Toggle, type ListDetailItem } from "./ui";
+import { useModalController, type ModalController } from "./ui/modal-controller";
+import { ChatInputToolbar } from "./chat/ChatInputToolbar";
+import { DetailModeSwitch } from "./chat/DetailModeSwitch";
+import { StartOptionControls, useStartOptions } from "./StartOptions";
+import { useAttachmentCapabilities } from "./chat/useAttachmentCapabilities";
+import { useAccess } from "./AccessContext";
+import { canStartEntry } from "../../../packages/ragents/src/access";
+import { RunPreparationChat } from "./RunPreparationChat";
+import { useChatSteps, type JsonValue, type ScriptStartEntry, type PluginRegistry,
+  type SkillStartEntry, type StartEntry, type SessionContext } from "./PluginRegistry";
+
+const byOrder = (left: StartEntry, right: StartEntry) => (left.order ?? Number.MAX_SAFE_INTEGER)
+  - (right.order ?? Number.MAX_SAFE_INTEGER) || left.title.localeCompare(right.title, "de-DE");
+const kindLabel = (entry: StartEntry) => entry.action === "skill" ? "Skill" : "Run-Script";
+const entryIcon = (entry: StartEntry) => entry.action === "skill" ? <BookIcon size={18} /> : <CodeIcon size={18} />;
+
+export function StartSurface({ registry, session, initialEntryId }: {
+  registry: PluginRegistry;
+  session: SessionContext;
+  initialEntryId?: string;
+}) {
+  const access = useAccess();
+  const canCreate = access.can("runs.create");
+  const modal = useModalController();
+  const [error, setError] = useState<string>();
+  const [pending, setPending] = useState(false);
+  const launching = useRef(false);
+  const openedInitialEntry = useRef(false);
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
+  const steps = useChatSteps(session.session.id, "preparation");
+  const startOptions = useStartOptions();
+  const attachments = useAttachmentCapabilities(session.session.id, "primary", JSON.stringify(startOptions.options.map(({ id, value }) => [id, value])));
+  const disabled = pending || startOptions.pending;
+
+  const run = useCallback(async (entry: ScriptStartEntry, value: JsonValue | null) => {
+    if (launching.current || !canStartEntry(access, entry.id)) return;
+    launching.current = true;
+    setPending(true);
+    setError(undefined);
+    try {
+      await sessionRef.current.start(entry.id, value);
+    } catch (cause) {
+      setError(`${entry.title}: ${cause instanceof Error ? cause.message : String(cause)}`);
+    } finally {
+      launching.current = false;
+      setPending(false);
+    }
+  }, [access]);
+
+  useEffect(() => {
+    if (!initialEntryId || disabled || openedInitialEntry.current) return;
+    openedInitialEntry.current = true;
+    const entry = registry.startEntries.find((candidate) => candidate.id === initialEntryId);
+    if (!entry || !canStartEntry(access, entry.id)) {
+      setError("Dieser Einstieg ist im aktuellen Profil nicht verfügbar.");
+      return;
+    }
+    openStartEntry(entry, registry, modal, sessionRef, run);
+  }, [access, disabled, initialEntryId, modal, registry, run]);
+
+  return <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-6 overflow-hidden px-10 pt-6 pb-5 max-md:gap-4.5 max-md:px-3 max-md:pt-11 max-md:pb-4">
+    {canCreate && <section aria-label="Auftrag" className="mx-auto flex w-full max-w-composer min-w-0 flex-none flex-col gap-2">
+      <ChatInputToolbar {...attachments} disabled={pending} sendDisabled={disabled} maxRows={8} onSend={session.send} rows={3}
+        texts={{ placeholder: "Dein Auftrag ...", send: "Run erstellen" }}
+        toolbarLeft={steps.selectable ? <DetailModeSwitch mode={steps.mode("coordinator")} onChange={(mode) => steps.setMode("coordinator", mode)} /> : undefined}
+        toolbarRight={<StartOptionControls disabled={disabled} placement="composer" registry={registry} />} />
+      <div aria-label="Startoptionen" className="flex flex-wrap items-center gap-x-3 gap-y-2 empty:hidden"><StartOptionControls disabled={disabled} registry={registry} /></div>
+    </section>}
+    {error && <p className="text-[0.8rem] text-destructive" role="alert">{error}</p>}
+    <StartEntryLibrary skills={canCreate ? registry.skillEntries.filter((entry) => canStartEntry(access, entry.id)) : []}
+      scripts={registry.scriptEntries.filter((entry) => canStartEntry(access, entry.id))} launchDisabled={disabled} technical={access.can("runs.inspect")}
+      hasGuide={(entry) => registry.guideFor(entry) !== undefined}
+      onOpen={(entry) => openStartEntry(entry, registry, modal, sessionRef, run)} />
+  </div>;
+}
+
+export function openStartEntry(entry: StartEntry, registry: PluginRegistry, modal: ModalController,
+  sessionRef: RefObject<SessionContext>, run: (entry: ScriptStartEntry, value: JsonValue | null) => Promise<void>) {
+  const proceed = (value: JsonValue | null) => {
+    if (entry.action === "script") { void run(entry, value); return; }
+    if (value !== null && (typeof value !== "string" || !value.trim())) {
+      throw new Error(`Der Leitfaden für ${entry.title} muss einen nicht leeren Auftrag liefern.`);
+    }
+    modal.open({ title: "Auftrag vorbereiten", subtitle: entry.title,
+      render: () => <RunPreparationChat initialPrompt={value ?? entry.prompt} skillName={entry.skill}
+        registry={registry} sessionRef={sessionRef} /> });
+  };
+  const guide = registry.guideFor(entry);
+  if (!guide) { proceed(null); return; }
+  let completed = false;
+  modal.open({ title: entry.title, subtitle: entry.description,
+    render: (controller) => <guide.Guide entry={entry} session={sessionRef.current}
+      onCancel={controller.back} onComplete={(value) => {
+        if (completed) return;
+        if (entry.action === "skill" && (typeof value !== "string" || !value.trim())) {
+          throw new Error(`Der Leitfaden für ${entry.title} muss einen nicht leeren Auftrag liefern.`);
+        }
+        completed = true;
+        controller.back();
+        proceed(value);
+      }} />,
+  });
+}
+
+export function StartEntryLibrary({ skills, scripts, launchDisabled, onOpen, hasGuide, technical = true }: {
+  skills: readonly SkillStartEntry[];
+  scripts: readonly ScriptStartEntry[];
+  launchDisabled: boolean;
+  onOpen: (entry: StartEntry) => void;
+  hasGuide: (entry: StartEntry) => boolean;
+  technical?: boolean;
+}) {
+  const [query, setQuery] = useState("");
+  const [tag, setTag] = useState("");
+  const [selectedId, setSelectedId] = useState<string>();
+  const sorted = useMemo(() => [...[...skills].sort(byOrder), ...[...scripts].sort(byOrder)], [skills, scripts]);
+  const tags = [...new Set(sorted.flatMap((entry) => entry.tags ?? []))].sort((a, b) => a.localeCompare(b, "de-DE"));
+  const filtered = sorted.filter((entry) => (!tag || entry.tags?.includes(tag))
+    && `${entry.title} ${entry.description} ${entry.action === "skill" ? entry.category : kindLabel(entry)} ${entry.owner} ${(entry.tags ?? []).join(" ")}`
+      .toLocaleLowerCase("de-DE").includes(query.trim().toLocaleLowerCase("de-DE")));
+  const selected = filtered.find((entry) => entry.id === selectedId) ?? filtered[0];
+  const guided = selected && hasGuide(selected);
+  const tagOptions = [{ value: "", label: "Alle Schlagworte" }, ...tags.map((value) => ({ value, label: value }))];
+  const items: ListDetailItem[] = filtered.map((entry) => ({ id: entry.id, title: entry.title,
+    description: entry.description, group: entry.action === "skill" ? entry.category : technical ? "Run-Scripts" : "Abläufe",
+    icon: entryIcon(entry), meta: technical ? kindLabel(entry) : undefined, tone: entry.action === "skill" ? "purple" : "success" }));
+
+  return <ListDetail className="min-h-0 flex-1" label="Skills und Abläufe" detailLabel="Vorschau" items={items}
+    selectedId={selected?.id} onSelect={setSelectedId}
+    emptyState={<p role="status">Kein passender Skill oder Ablauf.</p>}
+    toolbar={<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+      <Input aria-label="Skills und Abläufe durchsuchen" className="w-auto max-w-[560px] flex-[1_1_220px]" onChange={(event) => setQuery(event.target.value)}
+        placeholder="Skills und Abläufe suchen ..." type="search" value={query} />
+      <Select items={tagOptions} value={tag} onValueChange={(value) => setTag(value ?? "")}>
+        <SelectTrigger aria-label="Schlagwort" size="sm"><SelectValue /></SelectTrigger>
+        <SelectContent>{tagOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
+      </Select>
+      <span className="ml-auto text-[0.75rem] text-muted-foreground" role="status">{filtered.length} Einträge</span>
+    </div>}
+    detailHeader={selected && <>{technical && <p className="flex items-center gap-2 text-[0.75rem] font-semibold">{entryIcon(selected)}{kindLabel(selected)}</p>}<h2 className="mt-2 text-lg font-semibold">{selected.title}</h2><p className="mt-1.5 text-muted-foreground">{selected.description}</p></>}
+    detailFooter={selected && <><Button disabled={selected.action === "script" && launchDisabled} onClick={() => onOpen(selected)}>
+      {guided ? "Einrichten" : selected.action === "skill" ? "In Auftrag übernehmen" : technical ? "Aufbauen" : "Starten"}
+    </Button><span className="text-[0.75rem] text-muted-foreground">{!technical ? guided ? "Wähle die Angaben für diesen Ablauf." : "Startet den ausgewählten Ablauf." : selected.action === "skill" ? guided
+      ? "Angaben klären und danach den Auftrag vorbereiten." : "Auftrag im nächsten Schritt besprechen oder direkt starten."
+      : guided ? "Öffnet zuerst einen Leitfaden." : !selected.coordinator ? "Startet ohne Koordinator." : "Startet einen neuen Run."}</span></>}
+  >
+    {selected && <>
+      <h3 className="mb-2 text-base font-semibold">{selected.action === "skill" ? "Der Auftrag" : "Was beim Start passiert"}</h3>
+      <p className="leading-[1.7] whitespace-pre-wrap [overflow-wrap:anywhere]">{selected.action === "skill" ? selected.prompt
+        : guided ? "Der Leitfaden klärt die Angaben für diesen Ablauf. Danach wird der Run aufgebaut."
+        : "Der vorbereitete Ablauf wird gestartet."}</p>
+      <div aria-label="Schlagworte" className="mt-6 flex flex-wrap gap-1.5">{selected.tags?.map((value) => <Toggle key={value} pressed={tag === value}
+        onPressedChange={() => setTag(tag === value ? "" : value)} size="sm" variant="outline">{value}</Toggle>)}</div>
+      {technical && <p className="mt-4 text-[0.75rem] text-muted-foreground">{selected.owner}</p>}
+    </>}
+  </ListDetail>;
+}

package/apps/web/src/StatusGroup.tsx

@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from "react";
+import { createPortal } from "react-dom";
+
+export function StatusGroup({ children, container, label, order }: PropsWithChildren<{
+  container: HTMLElement | null;
+  label: string;
+  order: number;
+}>) {
+  return container ? createPortal(
+    <div
+      aria-label={label}
+      className="relative z-[70] flex h-full min-w-0 flex-none items-stretch after:pointer-events-none after:absolute after:top-1.5 after:right-0 after:bottom-1.5 after:w-px after:bg-muted-foreground after:opacity-45 after:content-['']"
+      role="group"
+      style={{ order }}
+    >{children}</div>,
+    container,
+  ) : null;
+}

package/apps/web/src/ThemeSettings.tsx

@@ -0,0 +1,46 @@
+import { useSyncExternalStore } from "react";
+import { useAccess } from "./AccessContext";
+import { getThemeStore, parseThemePreference, themeOptions } from "./theme";
+import { Card, ToggleGroup, ToggleGroupItem } from "./ui";
+
+const noteClasses = "text-sm leading-[1.6] text-muted-foreground";
+const swatchClasses = "h-9 w-[14px] rounded-sm border border-border";
+
+export function ThemeSettings() {
+  const access = useAccess();
+  const store = getThemeStore();
+  const { preference, appearance, error } = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const writable = access.can("settings.write");
+  return <div className="mx-auto flex max-w-[1020px] flex-col gap-6 px-[clamp(20px,4vw,46px)] pt-7 pb-12 max-sm:px-3.5 max-sm:pt-5 max-sm:pb-9">
+    <header>
+      <h2 className="text-[1.08rem] text-foreground">Darstellung</h2>
+      <p className="mt-2 max-w-[780px] text-xs leading-[1.55] text-muted-foreground">Farben für die gesamte Oberfläche, den Canvas und das Seitenpanel.</p>
+    </header>
+    <section aria-labelledby="theme-settings-title">
+      <Card className="flex-row flex-wrap items-center gap-5 p-6 max-sm:p-4">
+        <div className="flex gap-1 rounded-lg border border-border bg-app p-2" aria-hidden="true">
+          <span className={`${swatchClasses} bg-card`} />
+          <span className={`${swatchClasses} bg-accent`} />
+          <span className={`${swatchClasses} bg-primary`} />
+        </div>
+        <div className="flex-[1_1_220px]">
+          <h3 className="mb-1.5 text-lg font-semibold" id="theme-settings-title">Schichtwerk</h3>
+          <p className={noteClasses}>Matte Flächen, gestapelte Tiefe und gezeichnete Konturen.</p>
+        </div>
+        <ToggleGroup aria-label="Schichtwerk-Farbschema" className="flex-none max-sm:w-full" disabled={!writable} size="sm" spacing={0}
+          value={[preference]} variant="outline"
+          onValueChange={([value]) => { if (value && writable) store.setPreference(parseThemePreference(value)); }}>
+          {themeOptions.map((option) => <ToggleGroupItem key={option.value} value={option.value}>{option.label}</ToggleGroupItem>)}
+        </ToggleGroup>
+      </Card>
+    </section>
+    <p className={noteClasses} role="status">
+      {preference === "system"
+        ? `Folgt der Systemeinstellung. Aktuell ist Schichtwerk ${appearance === "dark" ? "Dunkel" : "Hell"} aktiv.`
+        : `Schichtwerk ${appearance === "dark" ? "Dunkel" : "Hell"} ist aktiv.`}
+      {" "}Änderungen gelten sofort und werden in diesem Browser gespeichert.
+    </p>
+    {!writable && <p className={noteClasses}>Die Darstellung ist mit deinen Rechten nur lesbar.</p>}
+    {error && <p className="text-sm leading-[1.6] text-destructive" role="alert">{error}</p>}
+  </div>;
+}

package/apps/web/src/TitleModelSettings.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react";
+import type { TitleModelSelection, TitleModelSettings as Settings } from "../../server/src/title-settings-contract";
+import { useAccess } from "./AccessContext";
+import { Alert, AlertDescription, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui";
+import { requestTitleModelSettings, titleModelOptions, titleModelSettingsChangedEvent, titleSelectionFromKey, titleSelectionKey } from "./title-model-settings";
+
+type LoadState = { status: "loading" } | { status: "failed"; error: string } | { status: "ready"; settings: Settings };
+const messageOf = (cause: unknown) => cause instanceof Error ? cause.message : String(cause);
+const noteClasses = "text-[0.76rem] leading-[1.5] text-muted-foreground";
+const controlClasses = "w-[min(100%,420px)] min-w-0";
+
+export function TitleModelSettings() {
+  const access = useAccess();
+  const readable = access.can("settings.read");
+  const writable = access.can("settings.write");
+  const [state, setState] = useState<LoadState>({ status: "loading" });
+  const [draft, setDraft] = useState<TitleModelSelection | null>();
+  const [pending, setPending] = useState(false);
+  const saving = useRef(false);
+  const [error, setError] = useState<string>();
+  const [notice, setNotice] = useState<string>();
+  const [retry, setRetry] = useState(0);
+  const [query, setQuery] = useState("");
+  const dirty = state.status === "ready" && draft !== undefined && titleSelectionKey(draft) !== titleSelectionKey(state.settings.selection);
+
+  useEffect(() => {
+    const refresh = () => {
+      if (!dirty && !saving.current) { setState({ status: "loading" }); setRetry((value) => value + 1); }
+    };
+    window.addEventListener(titleModelSettingsChangedEvent, refresh);
+    return () => window.removeEventListener(titleModelSettingsChangedEvent, refresh);
+  }, [dirty]);
+
+  useEffect(() => {
+    if (!readable) return;
+    const controller = new AbortController();
+    void requestTitleModelSettings({ signal: controller.signal }).then((settings) => {
+      if (controller.signal.aborted) return;
+      setState({ status: "ready", settings });
+      setDraft(settings.selection);
+    }).catch((cause: unknown) => {
+      if (!controller.signal.aborted) setState({ status: "failed", error: messageOf(cause) });
+    });
+    return () => controller.abort();
+  }, [readable, retry]);
+
+  if (!readable) return null;
+  if (state.status === "failed") return <Alert className="grid justify-items-start gap-2" variant="destructive">
+    <AlertDescription>{state.error}</AlertDescription>
+    <Button variant="outline" onClick={() => { setState({ status: "loading" }); setRetry((value) => value + 1); }}>Erneut laden</Button>
+  </Alert>;
+  if (state.status !== "ready" || draft === undefined) return <p className={noteClasses} role="status">Einstellungen für Überschriften werden geladen ...</p>;
+  const { settings } = state;
+  const save = async () => {
+    if (!writable || saving.current || !dirty) return;
+    saving.current = true;
+    setPending(true);
+    setError(undefined);
+    setNotice(undefined);
+    try {
+      const saved = await requestTitleModelSettings({ selection: draft });
+      setState({ status: "ready", settings: saved });
+      setDraft(saved.selection);
+      setNotice(saved.selection === null ? "Automatische Überschriften sind deaktiviert." : "Modell für die nächsten automatischen Überschriften gespeichert.");
+      window.dispatchEvent(new Event(titleModelSettingsChangedEvent));
+    } catch (cause) { setError(messageOf(cause)); }
+    finally { saving.current = false; setPending(false); }
+  };
+
+  const options = titleModelOptions(settings.models, draft, settings.models.length > 20 ? query : "");
+  return <form aria-label="Modell für automatische Überschriften" className="flex min-w-0 flex-col items-start gap-3" onSubmit={(event) => {
+    event.preventDefault();
+    void save();
+  }}>
+    <p className={noteClasses}>Verdichtet den ersten Auftrag zu einer kurzen Titelzeile. Gilt für die nächsten automatisch erzeugten Titel.</p>
+    {settings.models.length === 0 && <p className={noteClasses}>Der Anbieter bietet kein Modell für Überschriften an; automatische Überschriften bleiben aus.</p>}
+    {!writable && <p className={noteClasses}>Du hast Lesezugriff auf diese Einstellungen.</p>}
+    {settings.models.length > 20 && <Input aria-label="Modelle für Überschriften durchsuchen" className={controlClasses} disabled={!writable || pending}
+      onChange={(event) => setQuery(event.target.value)} placeholder="Modell suchen ..." type="search" value={query} />}
+    <Select disabled={!writable || pending} items={options} value={titleSelectionKey(draft)} onValueChange={(key) => {
+      if (key === null) return;
+      setDraft(titleSelectionFromKey(key, settings.models));
+      setError(undefined);
+      setNotice(undefined);
+    }}>
+      <SelectTrigger aria-label="Modell" className={controlClasses}><SelectValue /></SelectTrigger>
+      <SelectContent>
+        {options.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+      <Button disabled={!writable || pending || !dirty} type="submit">{pending ? "Wird gespeichert ..." : "Speichern"}</Button>
+      {dirty && <Button variant="outline" disabled={pending} onClick={() => {
+        setDraft(settings.selection); setError(undefined); setNotice(undefined);
+      }}>Änderungen verwerfen</Button>}
+      <span className={`${noteClasses} empty:hidden`} role="status">{notice ?? (dirty ? "Ungespeicherte Änderungen" : "")}</span>
+    </div>
+    {error && <p className="text-[0.76rem] text-destructive" role="alert">{error}</p>}
+  </form>;
+}

package/apps/web/src/Toolbar.tsx

@@ -0,0 +1,28 @@
+import { cn } from "cn";
+import { createElement, type ComponentProps } from "react";
+
+const toolbarItemClass = "flex flex-none items-center gap-2 self-stretch min-h-header max-w-[220px] px-3 py-1.5 border-r border-border text-left text-[0.72rem] leading-tight text-foreground no-underline [&>svg]:flex-none";
+const toolbarButtonClass = "cursor-pointer hover:not-disabled:bg-accent aria-expanded:bg-accent aria-pressed:bg-accent aria-expanded:text-primary aria-pressed:text-primary active:not-disabled:bg-accent active:not-disabled:text-primary aria-expanded:shadow-[inset_0_2px_5px_color-mix(in_srgb,var(--foreground)_25%,transparent),inset_0_-2px_0_var(--primary)] aria-pressed:shadow-[inset_0_2px_5px_color-mix(in_srgb,var(--foreground)_25%,transparent),inset_0_-2px_0_var(--primary)] focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3 disabled:opacity-50 disabled:cursor-not-allowed";
+
+interface ToolbarItemProps extends ComponentProps<"button"> {
+  as?: "button" | "a" | "span" | "div";
+  href?: string;
+}
+
+/** One cell of the header toolbar: full bar height, right separator, hover and pressed states for buttons and links. */
+export function ToolbarItem({ as = "span", className, ...props }: ToolbarItemProps) {
+  const interactive = as === "button" || as === "a";
+  return createElement(as, { className: cn(toolbarItemClass, interactive && toolbarButtonClass, className), ...props });
+}
+
+export function ToolbarCopy({ className, ...props }: ComponentProps<"span">) {
+  return <span className={cn("flex min-w-0 flex-col gap-0.5", className)} {...props} />;
+}
+
+export function ToolbarLabel({ className, ...props }: ComponentProps<"span">) {
+  return <span className={cn("font-mono text-[0.58rem] font-medium uppercase tracking-[0.05em] text-muted-foreground", className)} {...props} />;
+}
+
+export function ToolbarText({ className, ...props }: ComponentProps<"span">) {
+  return <span className={cn("line-clamp-2 whitespace-normal [overflow-wrap:anywhere]", className)} {...props} />;
+}