@schlenkr/ragents 0.1.0

package/apps/web/src/chat/attachments.ts

@@ -0,0 +1,53 @@
+import type { ChatAttachmentInput } from "../../../server/src/chat-events";
+
+import { chatAttachmentMediaType, MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES } from "../../../server/src/chat-attachments";
+
+export { MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES };
+
+export function attachmentMediaType(file: { name: string; type: string }): string {
+  return chatAttachmentMediaType(file.name, file.type);
+}
+
+export function attachmentCapabilityError(
+  files: readonly { name: string; mediaType: string }[],
+  capabilities: { input: readonly string[]; model: string },
+): string | undefined {
+  for (const file of files) {
+    const required = file.mediaType.startsWith("image/") ? "image"
+      : file.mediaType.startsWith("video/") ? "video" : file.mediaType === "application/pdf" ? "file" : undefined;
+    if (required && !capabilities.input.includes(required)) {
+      if (!capabilities.model) return `Dieser Chat unterstützt ${file.name} nicht als ${required === "image" ? "Bild" : required === "video" ? "Video" : "PDF"}. Entferne den Anhang.`;
+      return `Das Modell ${capabilities.model} unterstützt ${file.name} nicht als ${required === "image" ? "Bild" : required === "video" ? "Video" : "PDF"}. Wähle ein passendes Modell oder entferne den Anhang.`;
+    }
+  }
+}
+
+export function validateAttachmentSelection(existing: readonly { size: number }[], incoming: readonly { size: number }[]): void {
+  if (existing.length + incoming.length > MAX_CHAT_ATTACHMENTS) {
+    throw new Error(`Höchstens ${MAX_CHAT_ATTACHMENTS} Anhänge pro Nachricht. Entferne zuerst einen Anhang.`);
+  }
+  if ([...existing, ...incoming].reduce((total, file) => total + file.size, 0) > MAX_CHAT_ATTACHMENT_BYTES) {
+    throw new Error("Anhänge dürfen zusammen höchstens 20 MiB groß sein. Wähle kleinere Dateien.");
+  }
+}
+
+export async function encodeAttachment(file: File): Promise<ChatAttachmentInput> {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  const chunks: string[] = [];
+  for (let offset = 0; offset < bytes.length; offset += 8192) {
+    chunks.push(String.fromCharCode(...bytes.subarray(offset, offset + 8192)));
+  }
+  return { name: file.name, mediaType: attachmentMediaType(file), data: btoa(chunks.join("")) };
+}
+
+export function formatAttachmentSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+}
+
+export function attachmentDownloadUrl(url: string): string {
+  if (/^(data|blob):/i.test(url)) return url;
+  const [resource, fragment] = url.split(/#(.*)/s);
+  return `${resource}${resource.includes("?") ? "&" : "?"}download=1${fragment === undefined ? "" : `#${fragment}`}`;
+}

package/apps/web/src/chat/chat-scroll.ts

@@ -0,0 +1,41 @@
+interface ScrollViewport {
+  scrollTop: number;
+  readonly scrollHeight: number;
+  readonly clientHeight: number;
+}
+
+const atEnd = (viewport: ScrollViewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
+
+export function createChatScroll(onFollowChange: (following: boolean) => void) {
+  let following = true;
+  let lastTop = 0;
+
+  const follow = (value: boolean) => {
+    if (following === value) return;
+    following = value;
+    onFollowChange(value);
+  };
+  const layout = (viewport: ScrollViewport, dragging = false) => {
+    if (viewport.clientHeight <= 0) return;
+    if (dragging && viewport.scrollTop < lastTop && !atEnd(viewport)) follow(false);
+    if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+    else if (viewport.scrollHeight <= viewport.clientHeight) follow(true);
+    lastTop = viewport.scrollTop;
+  };
+  return {
+    layout,
+    pause(viewport: ScrollViewport) {
+      if (viewport.scrollTop > 0) follow(false);
+    },
+    scroll(viewport: ScrollViewport, dragging = false) {
+      if (viewport.clientHeight <= 0) return;
+      if (atEnd(viewport)) follow(true);
+      else if (dragging && viewport.scrollTop < lastTop) follow(false);
+      lastTop = viewport.scrollTop;
+    },
+    jump(viewport: ScrollViewport) {
+      follow(true);
+      layout(viewport);
+    },
+  };
+}

package/apps/web/src/chat/chat-target.ts

@@ -0,0 +1,21 @@
+import { isRecord } from "../lib/guards";
+import { stopChatActor } from "../api";
+
+export function stopChatWork(runId: string, view: unknown, stopStartup: () => Promise<void>): Promise<void> {
+  return isRecord(view) && view.id === runId && typeof view.primaryActorId === "string"
+    ? stopChatActor(runId, view.primaryActorId)
+    : stopStartup();
+}
+
+export const programChatNotice = "Dieser TypeScript-Actor verarbeitet Programmeingaben und führt kein Gespräch. Verwende seine Mini-App oder seine dokumentierten Funktionen.";
+
+export function primaryIsProgram(view: unknown, runId: string): boolean {
+  return isRecord(view) && view.id === runId && Array.isArray(view.actors)
+    && view.actors.some((actor: unknown) => isRecord(actor) && actor.id === view.primaryActorId && actor.kind === "script");
+}
+
+/** Laufender Turn irgendeines Agenten oder Programms; die Run-Liste verwendet dieselbe Lesart. */
+export function runIsWorking(view: unknown, runId: string): boolean {
+  return isRecord(view) && view.id === runId && Array.isArray(view.actors)
+    && view.actors.some((actor: unknown) => isRecord(actor) && actor.kind !== "human" && isRecord(actor.lifecycle) && actor.lifecycle.kind === "running");
+}

package/apps/web/src/chat/requests.ts

@@ -0,0 +1,23 @@
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import type { ChatAttachmentInput } from "../../../server/src/chat-events";
+import type { ChatUserLocation } from "../../../server/src/chat-context";
+import { rpc } from "../rpc";
+import type { RpcClient } from "../rpc/client";
+
+export async function sendChatMessage(
+  runId: string,
+  text: string,
+  attachments?: ChatAttachmentInput[],
+  userLocation?: ChatUserLocation,
+  client: RpcClient = rpc,
+): Promise<void> {
+  await client.call(coreContracts.chat.send, { runId, text, attachments, userLocation });
+}
+
+export async function startChatEntry(runId: string, entry: string, input: unknown, client: RpcClient = rpc): Promise<void> {
+  await client.call(coreContracts.chat.start, { runId, entry, input });
+}
+
+export async function stopChat(runId: string, client: RpcClient = rpc): Promise<void> {
+  await client.call(coreContracts.chat.stop, { runId });
+}

package/apps/web/src/chat/texts.ts

@@ -0,0 +1,61 @@
+export interface ChatTexts {
+  working: string;
+  toolRunning: string;
+  toolStillRunning: string;
+  currentTool: string;
+  thinkingChip: string;
+  toolChip: string;
+  stepGroupOne: string;
+  stepGroupMany: string;
+  thinkingTitle: string;
+  toolTitle: string;
+  argumentsLabel: string;
+  resultLabel: string;
+  close: string;
+  jumpToEnd: string;
+  send: string;
+  sendIntoRun: string;
+  stop: string;
+  placeholder: string;
+  steeringPlaceholder: string;
+  inputHint: string;
+  detailModeTitle: string;
+  detailModeOff: string;
+  detailModeCurrent: string;
+  detailModeIcons: string;
+  detailModeChips: string;
+  detailModeGrouped: string;
+  detailModeCompact: string;
+  detailModeFull: string;
+}
+
+export const defaultTexts: ChatTexts = {
+  working: "Arbeitet ...",
+  toolRunning: "läuft ...",
+  toolStillRunning: "Werkzeug läuft ...",
+  currentTool: "Werkzeug läuft",
+  thinkingChip: "Denken",
+  toolChip: "Werkzeug",
+  stepGroupOne: "1 Schritt",
+  stepGroupMany: "{count} Schritte",
+  thinkingTitle: "Thinking-Trace",
+  toolTitle: "Tool-Call",
+  argumentsLabel: "Argumente",
+  resultLabel: "Ergebnis",
+  close: "Schließen",
+  jumpToEnd: "Zum Ende springen",
+  send: "Senden",
+  sendIntoRun: "In den laufenden Lauf schicken",
+  stop: "Arbeit stoppen",
+  placeholder: "Nachricht schreiben ...",
+  steeringPlaceholder: "Dazwischenfunken ...",
+  inputHint: "Enter zum Senden - Shift + Enter für eine neue Zeile",
+  detailModeTitle: "Detailgrad der Schritte",
+  detailModeOff: "nur Antworten",
+  detailModeCurrent: "aktuell",
+  detailModeIcons: "Symbole",
+  detailModeChips: "kompakt",
+  detailModeGrouped: "gruppiert",
+  detailModeCompact: "einzeilig",
+  detailModeFull: "alles",
+};

package/apps/web/src/chat/types.ts

@@ -0,0 +1,26 @@
+import type { Message } from "../../../server/src/chat-events";
+
+export type { Role, ToolInfo, Question, Message, ChatEvent, ChatTextCursor, ChatJournalCursor, ChatAttachment, ChatAttachmentInput } from "../../../server/src/chat-events";
+export { applyEvent, prettyJson, compactToolLine } from "../../../server/src/chat-events";
+
+/**
+ * current = nur der laufende Schritt, off = nur Antworten, icons = Schritte als reine Symbole nebeneinander,
+ * chips = Schritte als Symbol + Kurztext nebeneinander (mit Umbruch),
+ * grouped = aufeinanderfolgende Schritte als eine aufklappbare Zeile, dahinter einzeilig,
+ * compact = Denken und Werkzeuge einzeilig, full = alles ausgeklappt.
+ */
+export type DetailMode = "off" | "current" | "icons" | "chips" | "grouped" | "compact" | "full";
+
+/** running = call still open, thinking = thought block still open, done = finished, error = failed. */
+export type StepState = "running" | "thinking" | "done" | "error";
+
+/** The single derivation of a step state, so chips, hosts and tests read the same signal. */
+export function stepState(message: Message): StepState {
+  if (message.tool?.isError) {
+    return "error";
+  }
+  if (message.role === "thinking") {
+    return message.closed ? "done" : "thinking";
+  }
+  return message.tool !== undefined && message.tool.result === undefined ? "running" : "done";
+}

package/apps/web/src/chat/useAttachmentCapabilities.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import type { ChatAttachmentCapabilities } from "../../../server/src/chat-events";
+import { rpc } from "../rpc";
+import type { RpcClient } from "../rpc/client";
+
+export async function getAttachmentCapabilities(runId: string, actor = "primary", signal?: AbortSignal, client: RpcClient = rpc): Promise<ChatAttachmentCapabilities> {
+  const result = await client.call(coreContracts.chat.capabilities, { runId, actor }, { signal });
+  if (typeof result.model !== "string" || !Array.isArray(result.input) || !result.input.every((entry) => typeof entry === "string")) {
+    throw new Error("Ungültige Angaben zur Unterstützung für Anhänge");
+  }
+  return { model: result.model, input: result.input };
+}
+
+export function useAttachmentCapabilities(runId: string, actor = "primary", revision = "") {
+  const [active, setActive] = useState(false);
+  const key = JSON.stringify([runId, actor, revision]);
+  const [result, setResult] = useState<{ key: string; capabilities?: ChatAttachmentCapabilities; error?: string }>();
+  useEffect(() => {
+    if (!active) return;
+    const controller = new AbortController();
+    void getAttachmentCapabilities(runId, actor, controller.signal).then(
+      (capabilities) => setResult({ key, capabilities }),
+      (cause: unknown) => {
+        if (!controller.signal.aborted) setResult({ key, error: cause instanceof Error ? cause.message : String(cause) });
+      },
+    );
+    return () => controller.abort();
+  }, [active, actor, key, runId]);
+  return {
+    attachmentCapabilities: result?.key === key ? result.capabilities : undefined,
+    attachmentCapabilitiesError: result?.key === key ? result.error : active ? "Anhänge werden geprüft ..." : undefined,
+    onAttachmentsChange: setActive,
+  };
+}

package/apps/web/src/chat/useChat.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import { applyEvent, type ChatEvent, type Message, type ChatAttachmentInput, type ChatStartupStatus } from "../../../server/src/chat-events";
+import type { ChatUserLocation } from "../../../server/src/chat-context";
+import { rpc } from "../rpc";
+import { sendChatMessage, startChatEntry, stopChat } from "./requests";
+
+export function useChat(sessionId: string, onEvent?: (event: ChatEvent) => void, enabled = true): {
+  messages: Message[];
+  running: boolean;
+  connected: boolean;
+  startup: ChatStartupStatus | undefined;
+  send: (text: string, attachments?: ChatAttachmentInput[], userLocation?: ChatUserLocation) => Promise<void>;
+  start: (entryId: string, input: unknown) => Promise<void>;
+  stop: () => Promise<void>;
+} {
+  const [messages, dispatch] = useReducer(applyEvent, [] as Message[]);
+  const [running, setRunning] = useState(false);
+  const [connected, setConnected] = useState(false);
+  const [startup, setStartup] = useState<ChatStartupStatus>();
+  const observer = useRef(onEvent);
+  observer.current = onEvent;
+
+  useEffect(() => {
+    setConnected(false);
+    if (!enabled) return;
+    return rpc.subscribe(coreContracts.channels.chat, { runId: sessionId }, (event) => {
+      if (event.kind === "replay-end") setConnected(true);
+      if (event.kind === "status") {
+        setRunning(event.running);
+        setStartup(event.startup);
+      }
+      observer.current?.(event);
+      dispatch(event);
+    }, () => setConnected(false));
+  }, [sessionId, enabled]);
+
+  const send = useCallback((text: string, attachments?: ChatAttachmentInput[], userLocation?: ChatUserLocation) =>
+    sendChatMessage(sessionId, text, attachments, userLocation), [sessionId]);
+
+  const start = useCallback((entryId: string, input: unknown) => startChatEntry(sessionId, entryId, input), [sessionId]);
+
+  const stop = useCallback(() => stopChat(sessionId), [sessionId]);
+
+  return { messages, running, connected, startup, send, start, stop };
+}

package/apps/web/src/chat/user-location.ts

@@ -0,0 +1,22 @@
+import type { ChatUserLocation } from "../../../server/src/chat-context";
+import type { EntityReference } from "../PluginRegistry";
+
+export type ChatRunLocation = Pick<ChatUserLocation, "tab" | "selection"> & { runId: string };
+
+export function runUserLocation(runId: string, activeTabId: string, tabs: readonly { id: string; label: string }[], panelVisible: boolean, selection: EntityReference | undefined): ChatRunLocation {
+  return {
+    runId,
+    tab: panelVisible ? tabs.find((tab) => tab.id === activeTabId)?.label ?? null : null,
+    selection: selection ? { type: selection.type, id: selection.id } : null,
+  };
+}
+
+export function chatUserLocation(activeRunId: string | undefined, overviewOpen: boolean, details: ChatRunLocation | undefined): ChatUserLocation {
+  const current = activeRunId !== undefined && details?.runId === activeRunId ? details : undefined;
+  return {
+    surface: overviewOpen ? "overview" : activeRunId === undefined ? "home" : "run",
+    runId: activeRunId ?? null,
+    tab: !overviewOpen && current ? current.tab : null,
+    selection: !overviewOpen && current?.selection ? { type: current.selection.type, id: current.selection.id } : null,
+  };
+}

package/apps/web/src/column/ColumnApp.tsx

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useState } from "react";
+import { ChevronDownIcon, ChevronUpIcon, LayoutGridIcon } from "lucide-react";
+import { canStartEntry } from "../../../../packages/ragents/src/access";
+import { AccessScreen, useAccess } from "../AccessContext";
+import type { SessionInfo } from "../api";
+import { PluginChat } from "../PluginChat";
+import type { PluginRegistry } from "../PluginRegistry";
+import { usePluginActivation } from "../PluginActivation";
+import { useRunReadState } from "../run-read-state";
+import { SessionList } from "../SessionList";
+import { SettingsModal } from "../SettingsModal";
+import { Alert, Button } from "../ui";
+import type { ColumnLocation } from "./column-location";
+import { ColumnMenu } from "./ColumnMenu";
+import { useColumnHost } from "./host";
+import { useSessionList } from "./use-session-list";
+
+const headerClass = "relative z-[80] flex h-header flex-none items-stretch border-b border-border bg-shell shadow-bar";
+const listHeaderClass = "relative z-[80] flex h-header flex-none items-center gap-2 border-b border-border bg-shell px-3 shadow-bar";
+const noticeClass = "m-auto max-w-[420px] p-6 text-center text-muted-foreground";
+const noSelection: ReadonlySet<string> = new Set();
+const newDraft = (): SessionInfo => ({ id: crypto.randomUUID(), title: "Neuer Run", updatedAt: Date.now() });
+const placeholderSession = (id: string): SessionInfo => ({ id, title: "Run", updatedAt: Date.now() });
+
+/** Die Arbeitsspalte: ein Run mit Chat und Mini-Apps, ohne Run die Run-Liste; layout=app zeigt genau ein Canvas-Element. */
+export function ColumnApp({ location }: { location: ColumnLocation }) {
+  const activation = usePluginActivation();
+  if (activation.status === "loading") return <div className={noticeClass}>Produktprofil wird geladen.</div>;
+  if (activation.status === "failed") return (
+    <Alert className="m-auto max-w-[420px] gap-3 p-6" variant="destructive">
+      <p>{activation.error}</p>
+      <Button onClick={() => window.location.reload()} variant="outline">Neu laden</Button>
+    </Alert>
+  );
+  return location.layout === "app"
+    ? <ElementPage elementId={location.elementId} registry={activation.registry} runId={location.runId} />
+    : <ColumnPage initialRunId={location.runId} registry={activation.registry} />;
+}
+
+function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefined; registry: PluginRegistry }) {
+  const host = useColumnHost();
+  const access = useAccess();
+  const readRuns = access.can("runs.read");
+  const writeRuns = readRuns && access.can("runs.write");
+  const canCreate = writeRuns && (access.can("runs.create") || registry.scriptEntries.some((entry) => canStartEntry(access, entry.id)));
+  const runReadState = useRunReadState(access.user?.id);
+  const [runId, setRunId] = useState(initialRunId);
+  const [draft, setDraft] = useState<{ session: SessionInfo; startOptions?: Readonly<Record<string, unknown>>; entryId?: string }>();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [listOpen, setListOpen] = useState(false);
+  const openSettings = useCallback(() => setSettingsOpen(true), []);
+  const { sessions, unreachable, refresh } = useSessionList(readRuns && !draft);
+  const [headerContainer, setHeaderContainer] = useState<HTMLDivElement | null>(null);
+  const [toolsContainer, setToolsContainer] = useState<HTMLDivElement | null>(null);
+  const startDraft = useCallback((startOptions?: Readonly<Record<string, unknown>>, entryId?: string) => { setListOpen(false); setDraft({ session: newDraft(), startOptions, entryId }); }, []);
+  const createRun = useCallback(() => startDraft(), [startDraft]);
+  const selectRun = useCallback((id: string) => { setListOpen(false); setRunId(id); }, []);
+
+  useEffect(() => host.onCommand((message) => {
+    if (message.type === "selectRun") {
+      setDraft(undefined);
+      setListOpen(false);
+      setRunId(message.runId ?? undefined);
+    }
+    if (message.type === "newRun" && canCreate) startDraft(message.startOptions, message.entryId);
+  }), [canCreate, host, startDraft]);
+  useEffect(() => { host.notify({ type: "ready" }); }, [host]);
+  useEffect(() => { host.notify({ type: "runChanged", runId: runId ?? null }); }, [host, runId]);
+  useEffect(() => {
+    if (!listOpen) return;
+    const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setListOpen(false); };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [listOpen]);
+
+  const session = sessions.find((entry) => entry.id === runId);
+  const list = readRuns
+    ? <SessionList activeId={runId} onCreate={canCreate ? createRun : undefined} onSelect={selectRun} onToggleSelected={() => undefined} registry={registry} seenRevisions={runReadState.revisions} selectMode={false} selectedIds={noSelection} sessions={sessions} />
+    : <p className={noticeClass}>Für dieses Benutzerkonto sind keine Runs freigegeben.</p>;
+  return (
+    <div className="flex h-full flex-col bg-[image:var(--canvas-backdrop)]">
+      {readRuns && runId
+        ? (
+          <>
+            <header className={headerClass}>
+              <Button aria-expanded={listOpen} aria-label={listOpen ? "Run-Liste schließen" : "Run-Liste aufklappen"} className="self-center" onClick={() => setListOpen((value) => !value)} size="icon-lg" title={listOpen ? "Run-Liste schließen (Escape)" : "Run-Liste aufklappen"} variant="ghost">{listOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}</Button>
+              <div aria-label="Run-Titelleiste" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar" ref={setHeaderContainer} role="region" />
+              <div aria-label="Werkzeuge des Panels" className="flex flex-none items-center empty:hidden" ref={setToolsContainer} role="toolbar" />
+              <ColumnMenu onOpenSettings={openSettings} />
+            </header>
+            <main className="relative z-1 flex min-h-0 min-w-0 flex-1 @container/chat-content">
+              <PluginChat
+                canvasToolbarContainer={toolsContainer}
+                headerContainer={headerContainer}
+                key={runId}
+                layout="column"
+                onViewed={runReadState.markViewed}
+                registry={registry}
+                session={session ?? placeholderSession(runId)}
+                viewing={!draft && !settingsOpen && !listOpen}
+              />
+              {listOpen && <div aria-label="Run-Liste" className="absolute inset-0 z-[70] overflow-auto bg-background p-3" role="dialog">
+                {unreachable && <Alert className="mb-3" variant="destructive">Der Server ist nicht erreichbar.</Alert>}
+                {list}
+              </div>}
+            </main>
+          </>
+        )
+        : (
+          <>
+            <header className={listHeaderClass}>
+              <LayoutGridIcon aria-hidden className="size-4 flex-none text-muted-foreground" />
+              <strong className="min-w-0 flex-1 truncate text-[0.82rem] font-semibold">{registry.brand.title}</strong>
+              <ColumnMenu onOpenSettings={openSettings} />
+            </header>
+            <div className="min-h-0 flex-1 overflow-auto p-3">
+              {unreachable && <Alert className="mb-3" variant="destructive">Der Server ist nicht erreichbar.</Alert>}
+              {list}
+            </div>
+          </>
+        )}
+      {settingsOpen && <SettingsModal onClose={() => setSettingsOpen(false)} registry={registry} />}
+      {draft && (
+        <PluginChat
+          initialStartOptions={draft.startOptions}
+          key={draft.session.id}
+          onStarted={() => { setRunId(draft.session.id); setDraft(undefined); void refresh(); }}
+          registry={registry}
+          session={draft.session}
+          startDialog={{ onClose: () => setDraft(undefined), initialEntryId: draft.entryId }}
+        />
+      )}
+    </div>
+  );
+}
+
+function ElementPage({ elementId, registry, runId }: { elementId: string; registry: PluginRegistry; runId: string }) {
+  const host = useColumnHost();
+  const readRuns = useAccess().can("runs.read");
+  const { sessions } = useSessionList(readRuns);
+  useEffect(() => { host.notify({ type: "ready" }); }, [host]);
+  if (!readRuns) return <p className={noticeClass}>Für dieses Benutzerkonto sind keine Runs freigegeben.</p>;
+  return (
+    <main className="relative flex h-full min-h-0 min-w-0 flex-1 bg-background @container/chat-content">
+      <PluginChat key={runId} layout={{ element: elementId }} registry={registry} session={sessions.find((entry) => entry.id === runId) ?? placeholderSession(runId)} />
+    </main>
+  );
+}
+
+/** Im VS-Code-Webview führt die Erweiterung die Anmeldung; das Panel bittet nur darum. */
+export function HostLogin() {
+  const host = useColumnHost();
+  return <AccessScreen>
+    <h1 className="my-3 text-[1.5rem]">Anmeldung erforderlich</h1>
+    <p className="mb-6 leading-normal text-muted-foreground">Die Anmeldung läuft über VS Code. Danach lädt das Panel neu.</p>
+    <Button className="w-full" onClick={() => host.requestLogin()}>In VS Code anmelden</Button>
+  </AccessScreen>;
+}

package/apps/web/src/column/ColumnMenu.tsx

@@ -0,0 +1,37 @@
+import { useId, useRef, useState } from "react";
+import { ExternalLinkIcon, LogOutIcon, MoreVerticalIcon, SettingsIcon } from "lucide-react";
+import { useAccess } from "../AccessContext";
+import { Button, Popover, PopoverContent } from "../ui";
+import { useColumnHost } from "./host";
+
+const itemClass = "flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2 disabled:cursor-default disabled:opacity-50 [&>svg]:size-4 [&>svg]:flex-none [&>svg]:text-muted-foreground";
+
+/** Das Menü rechts oben im Panel: Einstellungen, Server im Browser und Abmelden hinter einem Knopf. */
+export function ColumnMenu({ onOpenSettings }: { onOpenSettings: () => void }) {
+  const host = useColumnHost();
+  const access = useAccess();
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+  const pressedAnchor = (details: { reason: string; event: Event }) =>
+    details.reason === "outside-press" && details.event.target instanceof Node && buttonRef.current?.contains(details.event.target) === true;
+  const logout = () => {
+    if (host.kind === "vscode") { host.requestLogout(); setOpen(false); return; }
+    setPending(true);
+    setError(undefined);
+    void access.logout().then(() => setOpen(false)).catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause))).finally(() => setPending(false));
+  };
+  return <>
+    <Button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" aria-label="Menü des Panels" className="self-center" onClick={() => setOpen((value) => !value)} ref={buttonRef} size="icon-lg" title="Menü" variant="ghost"><MoreVerticalIcon /></Button>
+    <Popover onOpenChange={(next, details) => { if (!next && pressedAnchor(details)) return; setOpen(next); }} open={open}>
+      <PopoverContent align="end" anchor={buttonRef} aria-label="Menü des Panels" className="w-[220px] gap-0 p-1 text-[0.8rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom" sideOffset={4}>
+        <button className={itemClass} onClick={() => { setOpen(false); onOpenSettings(); }} type="button"><SettingsIcon />Einstellungen</button>
+        {host.kind === "vscode" && <button className={itemClass} onClick={() => { setOpen(false); host.openExternal(new URL("/", window.location.href).toString()); }} type="button"><ExternalLinkIcon />Im Browser öffnen</button>}
+        {access.enabled && access.user && <button className={itemClass} disabled={pending} onClick={logout} title={access.user.id} type="button"><LogOutIcon /><span className="grid min-w-0"><span>Abmelden</span><span className="truncate text-[0.68rem] text-muted-foreground">{access.user.label}</span></span></button>}
+        {error && <p className="px-2 py-1.5 text-[0.72rem] text-destructive" role="alert">{error}</p>}
+      </PopoverContent>
+    </Popover>
+  </>;
+}

package/apps/web/src/column/ColumnRunHeader.tsx

@@ -0,0 +1,43 @@
+import { useId, useRef, useState } from "react";
+import { ChevronDownIcon } from "lucide-react";
+import type { AttentionState, PluginRegistry, SessionContext, SessionNavigation } from "../PluginRegistry";
+import { StartOptionBadges } from "../StartOptions";
+import { Popover, PopoverContent } from "../ui";
+
+const titleClass = "flex h-[30px] min-w-0 flex-1 cursor-pointer items-center gap-2 self-center rounded-md px-1.5 text-left hover:bg-accent aria-expanded:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2";
+
+/** Die Kopfzeile des Panels: eine Zeile mit Titel und Zustand, die Kopfzeilenbeiträge der Plugins hinter dem Titel als Popover. */
+export function ColumnRunHeader({ attention, contributions, navigation, registry, runError, session, working }: {
+  attention: AttentionState | undefined;
+  contributions: PluginRegistry["sessionHeaders"];
+  navigation: SessionNavigation;
+  registry: PluginRegistry;
+  runError: string | undefined;
+  session: SessionContext;
+  working: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+  const title = session.session.title || "Neuer Run";
+  const pressedAnchor = (details: { reason: string; event: Event }) =>
+    details.reason === "outside-press" && details.event.target instanceof Node && buttonRef.current?.contains(details.event.target) === true;
+  return <div className="flex min-w-0 flex-1 items-stretch">
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={titleClass} onClick={() => setOpen((value) => !value)} ref={buttonRef} title={`${title}. Klick zeigt die Run-Details`} type="button">
+      <strong className="min-w-0 truncate text-[0.82rem] font-semibold">{title}</strong>
+      {working && <span aria-label="Bearbeitung läuft" className="size-1.5 flex-none rounded-full bg-primary animate-fade-pulse motion-reduce:animate-none" role="status" />}
+      {runError && <span className="flex-none text-[0.68rem] font-medium text-destructive" title={runError}>Run nicht erreichbar</span>}
+      {attention && <span className="flex-none truncate rounded-full bg-primary/10 px-2 py-0.5 text-[0.66rem] font-semibold text-primary" role="status">{attention.label}</span>}
+      <ChevronDownIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />
+    </button>
+    <Popover onOpenChange={(next, details) => { if (!next && pressedAnchor(details)) return; setOpen(next); }} open={open}>
+      <PopoverContent align="start" anchor={buttonRef} aria-label="Run-Details" className="max-h-[70vh] w-[calc(100vw-16px)] gap-0 overflow-auto rounded-md p-0 text-[0.76rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom" sideOffset={4}>
+        <div className="flex flex-wrap items-stretch [&>*]:border-b [&>*]:border-border-soft">
+          {registry.sessionMetadata.map(({ id, Metadata }) => <Metadata key={id} placement="header" session={session.session} />)}
+          <StartOptionBadges registry={registry} session={session} />
+          {contributions.map(({ id, Header }) => <Header key={id} navigation={navigation} session={session} />)}
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>;
+}

package/apps/web/src/column/column-location.ts

@@ -0,0 +1,30 @@
+import { ACCESS_TOKEN_QUERY } from "../../../../packages/ragents/src/access";
+import { isColumnTheme, type ColumnTheme } from "./host-contract";
+
+export type ColumnLocation =
+  | { layout: "column"; runId: string | undefined; host: ColumnHostKind; theme: ColumnTheme | undefined; access: string | undefined }
+  | { layout: "app"; runId: string; elementId: string; host: ColumnHostKind; theme: ColumnTheme | undefined; access: string | undefined };
+
+export type ColumnHostKind = "browser" | "vscode";
+
+const text = (value: string | null): string | undefined => value?.trim() ? value.trim() : undefined;
+
+const hostKind = (value: string): ColumnHostKind => {
+  if (value === "browser" || value === "vscode") return value;
+  throw new Error(`Unbekannter Host ${JSON.stringify(value)}. Erlaubt sind browser und vscode.`);
+};
+
+/** Liest die Adresse des Panels; unbekannte Werte sind ein harter Fehler statt einer stillen Standardansicht. */
+export function parseColumnLocation(search: string): ColumnLocation {
+  const query = new URLSearchParams(search);
+  const layout = text(query.get("layout")) ?? "column";
+  if (layout !== "column" && layout !== "app") throw new Error(`Unbekanntes Layout ${JSON.stringify(layout)}. Erlaubt sind column und app.`);
+  const themeValue = text(query.get("theme"));
+  if (themeValue !== undefined && !isColumnTheme(themeValue)) throw new Error(`Unbekannte Darstellung ${JSON.stringify(themeValue)}. Erlaubt sind light und dark.`);
+  const common = { host: hostKind(text(query.get("host")) ?? "browser"), theme: themeValue, access: text(query.get(ACCESS_TOKEN_QUERY)) };
+  const runId = text(query.get("run"));
+  if (layout === "column") return { layout, runId, ...common };
+  const elementId = text(query.get("element"));
+  if (!runId || !elementId) throw new Error("Das Layout app braucht run und element.");
+  return { layout, runId, elementId, ...common };
+}