@schlenkr/ragents 0.1.5 → 0.1.6

package/{plugins/ragents.product/web → apps/web/src/product}/ProductModelSettings.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from "react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Alert, AlertAction, AlertDescription, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@aicontainer/web/ui";
-import { thinkingLabel } from "@aicontainer/web/lib/labels";
-import type { ProductModelDraft, ProductModelSettings as Settings } from "../model-settings-contract";
+import { useAccess } from "../AccessContext";
+import { Alert, AlertAction, AlertDescription, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui";
+import { thinkingLabel } from "../lib/labels";
+import type { ProductModelDraft, ProductModelSettings as Settings } from "@ragents/host/plugin-support/product-model-settings-contract";
 import { modelDraftOf, requestProductModelSettings } from "./model-settings";
-import { modelDefaultsChangedEvent } from "@aicontainer/web/model-settings-events";
+import { modelDefaultsChangedEvent } from "../model-settings-events";
 
 const profileLabels: Record<string, { title: string; description: string }> = {
-  coordinator: { title: "Run-Koordinator", description: "Die Vorgabe beim Start einer neuen Unterhaltung." },
+  coordinator: { title: "Run-Koordinator", description: "Die Vorgabe beim Start eines neuen Runs." },
   relay: { title: "Vermittler", description: "Agenten, die Nachrichten und Ergebnisse weitergeben." },
   standard: { title: "Agenten", description: "Die Vorgabe für weitere Agenten im Run." },
   reviewer: { title: "Prüfung", description: "Die Vorgabe für Agenten mit Prüfauftrag." },
@@ -82,7 +82,7 @@ export function ProductModelSettings({ pluginId }: { pluginId: string }) {
     event.preventDefault();
     void save();
   }}>
-    <p className={noteClass}>Für dieses Produktprofil gespeichert. Bereits angelegte Actors behalten ihr Modell.
+    <p className={noteClass}>Für dieses Profil gespeichert. Bereits angelegte Actors behalten ihr Modell.
       Eine ausdrücklich gewählte Modellauswahl im Run hat Vorrang.</p>
     {!writable && <p className={noteClass}>Du hast Lesezugriff auf diese Einstellungen.</p>}
     <div className="grid gap-4">

package/{plugins/ragents.product/web → apps/web/src/product}/SystemPromptControl.tsx

@@ -1,7 +1,7 @@
-import { Checkbox, Toggle } from "@aicontainer/web/ui";
-import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import { Checkbox, Toggle } from "../ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "../Toolbar";
 import { useMemo, useState } from "react";
-import type { StartOptionBadgeContext, StartOptionControlContext } from "@aicontainer/web/PluginRegistry";
+import type { StartOptionBadgeContext, StartOptionControlContext } from "../PluginRegistry";
 
 interface SystemPromptOption {
   id: string;

package/{plugins/ragents.product/web → apps/web/src/product}/model-settings.ts

@@ -1,6 +1,6 @@
-import { rpc } from "@aicontainer/web/rpc";
-import { productModelSettingsContracts } from "@aicontainer/server/plugin-support/product-model-settings-contract";
-import type { ProductModelDraft, ProductModelSettings } from "../model-settings-contract";
+import { rpc } from "../rpc";
+import { productModelSettingsContracts } from "@ragents/host/plugin-support/product-model-settings-contract";
+import type { ProductModelDraft, ProductModelSettings } from "@ragents/host/plugin-support/product-model-settings-contract";
 
 const record = (value: unknown): value is Record<string, unknown> =>
   value !== null && typeof value === "object" && !Array.isArray(value);

package/{plugins/ragents.product/web → apps/web/src/product}/start-options.tsx

@@ -1,8 +1,8 @@
-import type { StartOptionContribution } from "@aicontainer/web/PluginRegistry";
+import type { StartOptionContribution } from "../PluginRegistry";
 import {
   modelStartOptionId,
   systemPromptStartOptionId,
-} from "@aicontainer/server/plugin-support/start-options-contract";
+} from "@ragents/host/plugin-support/start-options-contract";
 import { ModelControl } from "./ModelControl";
 import { SystemPromptBadge, SystemPromptControl } from "./SystemPromptControl";
 

package/apps/web/src/rpc/client.ts

@@ -1,5 +1,5 @@
-import type { ChannelContract, ChannelMessage, ChannelParams, OperationContract, OperationInput, OperationResult } from "@aicontainer/ragents/src/rpc/contract";
-import { RpcPeer, type RpcCallOptions, type RpcHandlerContext } from "@aicontainer/ragents/src/rpc/peer";
+import type { ChannelContract, ChannelMessage, ChannelParams, OperationContract, OperationInput, OperationResult } from "@ragents/engine/src/rpc/contract";
+import { RpcPeer, type RpcCallOptions, type RpcHandlerContext } from "@ragents/engine/src/rpc/peer";
 import {
   isRpcMessage,
   isRpcNotification,
@@ -12,7 +12,7 @@ import {
   type RpcEventParams,
   type RpcMessage,
   type RpcSubscribeResult,
-} from "@aicontainer/ragents/src/rpc/protocol";
+} from "@ragents/engine/src/rpc/protocol";
 
 export const RPC_PATH = "/rpc";
 export const RPC_STREAM_PATH = "/rpc/stream";
@@ -29,6 +29,8 @@ export interface RpcClientOptions {
   baseUrl?: string;
   fetch?: typeof fetch;
   retryDelayMs?: number;
+  /** So lange darf der Strom schweigen, bevor er als verloren gilt; der Server pingt alle 15 Sekunden. */
+  idleTimeoutMs?: number;
 }
 
 interface Subscription {
@@ -40,18 +42,20 @@ interface Subscription {
 }
 
 const RETRY_DELAY_MS = 5_000;
+const IDLE_TIMEOUT_MS = 45_000;
 const EARLY_EVENT_TTL_MS = 10_000;
 
 const messageOf = (cause: unknown): string => cause instanceof Error ? cause.message : String(cause);
 
 /** Liest einen SSE-Strom Block für Block; ein Block ist bis zur Leerzeile. */
-async function* sseBlocks(body: ReadableStream<Uint8Array>): AsyncGenerator<{ event: string | undefined; data: string | undefined }> {
+async function* sseBlocks(body: ReadableStream<Uint8Array>, onChunk: () => void): AsyncGenerator<{ event: string | undefined; data: string | undefined }> {
   const reader = body.getReader();
   const decoder = new TextDecoder();
   let buffered = "";
   for (;;) {
     const { done, value } = await reader.read();
     if (done) return;
+    onChunk();
     buffered += decoder.decode(value, { stream: true });
     for (;;) {
       const end = buffered.indexOf("\n\n");
@@ -72,6 +76,7 @@ export class RpcClient {
   readonly #baseUrl: string;
   readonly #fetch: typeof fetch;
   readonly #retryDelayMs: number;
+  readonly #idleTimeoutMs: number;
   readonly #peer: RpcPeer;
   readonly #subscriptions = new Set<Subscription>();
   readonly #inFlight = new Map<string, AbortController>();
@@ -83,12 +88,14 @@ export class RpcClient {
   #connection: string | undefined;
   #stream: AbortController | undefined;
   #retry: ReturnType<typeof setTimeout> | undefined;
+  #idle: ReturnType<typeof setTimeout> | undefined;
   #handlers = 0;
 
   constructor(options: RpcClientOptions = {}) {
     this.#baseUrl = (options.baseUrl ?? "").replace(/\/$/, "");
     this.#fetch = options.fetch ?? ((input, init) => fetch(input, init));
     this.#retryDelayMs = options.retryDelayMs ?? RETRY_DELAY_MS;
+    this.#idleTimeoutMs = options.idleTimeoutMs ?? IDLE_TIMEOUT_MS;
     this.#peer = new RpcPeer({ send: (message) => this.#send(message) });
     this.#peer.onNotification(RPC_METHODS.event, (params) => this.#event(params as RpcEventParams));
   }
@@ -155,7 +162,7 @@ export class RpcClient {
     this.#open();
   }
 
-  /** Beendet den Strom; offene Anfragen des Servers scheitern, eigene Anfragen bleiben möglich. */
+  /** Beendet den Strom; offene Anfragen des Servers werden abgebrochen, eigene Anfragen bleiben möglich. */
   close(): void {
     this.#stop();
     this.#set({ kind: "idle" });
@@ -170,15 +177,28 @@ export class RpcClient {
     for (const listener of [...this.#statusListeners]) listener(status);
   }
 
+  /** Ohne Strom erreicht keine Antwort mehr den Server; laufende Handler enden deshalb mit ihm. */
   #stop(): void {
     if (this.#retry !== undefined) clearTimeout(this.#retry);
     this.#retry = undefined;
+    if (this.#idle !== undefined) clearTimeout(this.#idle);
+    this.#idle = undefined;
     this.#stream?.abort();
     this.#stream = undefined;
     this.#connection = undefined;
+    this.#peer.cancelIncoming();
     for (const subscription of this.#subscriptions) subscription.serverId = undefined;
   }
 
+  /** Ein halb offener Strom liefert nichts mehr, auch keinen Ping; nach der Ruhezeit gilt er als verloren. */
+  #watchIdle(controller: AbortController): void {
+    if (this.#idle !== undefined) clearTimeout(this.#idle);
+    this.#idle = setTimeout(() => {
+      this.#idle = undefined;
+      if (this.#stream === controller) this.#scheduleRetry(`Der Ereignisstrom schweigt seit ${Math.round(this.#idleTimeoutMs / 1000)} s.`);
+    }, this.#idleTimeoutMs);
+  }
+
   #open(): void {
     const controller = new AbortController();
     this.#stream = controller;
@@ -193,11 +213,13 @@ export class RpcClient {
     const response = await this.#fetch(`${this.#baseUrl}${RPC_STREAM_PATH}`, { headers: { accept: "text/event-stream" }, signal: controller.signal, cache: "no-store" });
     if (response.status === 401) {
       this.#stream = undefined;
+      this.#peer.cancelIncoming();
       this.#set({ kind: "unauthorized" });
       return;
     }
     if (!response.ok || !response.body) throw new Error(`Der Ereignisstrom antwortete mit ${response.status}.`);
-    for await (const block of sseBlocks(response.body)) {
+    this.#watchIdle(controller);
+    for await (const block of sseBlocks(response.body, () => this.#watchIdle(controller))) {
       if (controller.signal.aborted) return;
       if (block.event === "hello") {
         this.#connection = (JSON.parse(block.data ?? "{}") as { connection: string }).connection;

package/apps/web/src/run-panel/RunPanelApp.tsx

@@ -0,0 +1,334 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { ArrowLeftIcon, LayoutGridIcon } from "lucide-react";
+import { canStartEntry, type AccessContext } from "../../../../packages/ragents/src/access";
+import { getStartOptions, setStartOption, stopRun } from "../api";
+import { startEntryDirectly } from "../chat/requests";
+import { initialStartOptionUpdates, withoutFixedStartOptions } from "../StartOptions";
+import { AccessScreen, useAccess } from "../AccessContext";
+import type { SessionInfo } from "../api";
+import { PluginChat } from "../PluginChat";
+import type { PluginRegistry } from "../PluginRegistry";
+import { usePluginActivation } from "../PluginActivation";
+import { PluginFailureNotice } from "../PluginFailureNotice";
+import { useRunReadState } from "../run-read-state";
+import { SessionList } from "../SessionList";
+import { SettingsModal } from "../SettingsModal";
+import { Alert, Button, RunStateIcon, StartupNotice, StopButton, type StartupNoticeState } from "../ui";
+import type { RunPanelLocation } from "./run-panel-location";
+import { RunPanelMenu } from "./RunPanelMenu";
+import { useRunPanelHost } 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 connectionClass = "max-w-[120px] self-center truncate rounded-full bg-secondary px-2 py-0.5 text-[0.66rem] font-semibold text-muted-foreground";
+const pendingTitleClass = "min-w-0 flex-1 self-center truncate px-1.5 text-[0.82rem] font-semibold";
+const STOP_REASON = "Gestoppt im Run-Panel";
+/** So lange wartet das Panel in VS Code ohne Run auf die Startanforderung seines Hosts. */
+const HOST_COMMAND_TIMEOUT_MS = 5000;
+const NEW_RUN_TITLE = "Neuer Run";
+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: NEW_RUN_TITLE, updatedAt: Date.now() });
+const placeholderSession = (id: string, title = "Run"): SessionInfo => ({ id, title, updatedAt: Date.now() });
+const profileLoading: StartupNoticeState = { kind: "working", title: "Profil wird geladen", detail: "Die Oberfläche des Servers wird geladen." };
+const hostStarting: StartupNoticeState = { kind: "working", title: "Run wird gestartet", detail: "Der neue Run wird angelegt." };
+const launchStarting: StartupNoticeState = { kind: "working", title: "Run wird gestartet", detail: "Die Vorlage wird gestartet." };
+const noRunSelected: StartupNoticeState = { kind: "waiting", title: "Kein Run gewählt", detail: "Auf der Start-Seite startest Du einen neuen Run oder öffnest einen vorhandenen." };
+const noRunsReadable: StartupNoticeState = { kind: "error", title: "Keine Runs freigegeben", detail: "Für dieses Benutzerkonto sind keine Runs freigegeben." };
+
+/** Das Run-Panel: ein Run mit Chat und Mini-Apps, ohne Run im Browser die Run-Liste; layout=app zeigt genau ein Flächenelement. */
+export function RunPanelApp({ location }: { location: RunPanelLocation }) {
+  const activation = usePluginActivation();
+  const headless = location.layout === "app";
+  if (activation.status === "loading") return <PendingPanel headless={headless} state={profileLoading} />;
+  if (activation.status === "failed") return (
+    <PendingPanel headless={headless} state={{ kind: "error", title: "Das Profil konnte nicht geladen werden", detail: activation.error }}>
+      <Button onClick={() => window.location.reload()} size="sm" variant="outline">Neu laden</Button>
+    </PendingPanel>
+  );
+  const page = location.layout === "app"
+    ? <ElementPage elementId={location.elementId} registry={activation.registry} runId={location.runId} />
+    : <RunPanelPage connection={location.connection} initialRunId={location.runId} registry={activation.registry} />;
+  if (activation.failures.length === 0) return page;
+  return (
+    <div className="flex h-full flex-col">
+      <PluginFailureNotice failures={activation.failures} />
+      <div className="flex min-h-0 flex-1 flex-col">{page}</div>
+    </div>
+  );
+}
+
+function RunPanelPage({ connection, initialRunId, registry }: { connection: string | undefined; initialRunId: string | undefined; registry: PluginRegistry }) {
+  const host = useRunPanelHost();
+  const access = useAccess();
+  const readRuns = access.can("runs.read");
+  const writeRuns = readRuns && access.can("runs.write");
+  const canCreateFree = writeRuns && access.can("runs.create");
+  const canCreate = canCreateFree || (writeRuns && registry.scriptEntries.some((entry) => canStartEntry(access, entry.id)));
+  const runReadState = useRunReadState(access.user?.id);
+  const [runId, setRunId] = useState(initialRunId);
+  const [runTitle, setRunTitle] = useState<string>();
+  const [focusRunId, setFocusRunId] = useState<string>();
+  const settleAutoFocus = useCallback(() => setFocusRunId((pending) => pending === runId ? undefined : pending), [runId]);
+  const [runStartOptions, setRunStartOptions] = useState<Readonly<Record<string, unknown>>>();
+  const [draft, setDraft] = useState<{ session: SessionInfo; startOptions?: Readonly<Record<string, unknown>>; entryId?: string }>();
+  const [launch, setLaunch] = useState<Launch>();
+  /** Der Run, dessen Start noch zählt; ein späterer Klick, ein anderer Run oder der Weg zurück lösen ihn ab. */
+  const launching = useRef<string>(undefined);
+  const replaceLaunch = useCallback((next: Launch | undefined) => {
+    launching.current = next?.runId;
+    setLaunch(next);
+  }, []);
+  const [refusal, setRefusal] = useState<string>();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [stopError, setStopError] = useState<string>();
+  const openSettings = useCallback(() => setSettingsOpen(true), []);
+  const { sessions, unreachable, refresh } = useSessionList(readRuns && !draft && !launch);
+  const [headerContainer, setHeaderContainer] = useState<HTMLDivElement | null>(null);
+  const [toolsContainer, setToolsContainer] = useState<HTMLDivElement | null>(null);
+  const startDraft = useCallback((startOptions?: Readonly<Record<string, unknown>>, entryId?: string) => {
+    const fixed = registry.startEntries.find((entry) => entry.id === entryId)?.fixedStartOptions;
+    setDraft({ session: newDraft(), startOptions: startOptions && withoutFixedStartOptions(startOptions, fixed), entryId });
+  }, [registry]);
+  const createRun = useCallback(() => startDraft(), [startDraft]);
+  const openRun = useCallback((id: string, startOptions?: Readonly<Record<string, unknown>>) => {
+    setDraft(undefined);
+    replaceLaunch(undefined);
+    setRunStartOptions(startOptions);
+    setRunId(id);
+    setFocusRunId(host.kind === "vscode" ? id : undefined);
+  }, [host.kind, replaceLaunch]);
+  /** Eine Vorlage ohne Leitfaden startet sofort; ihr Ergebnis zählt nur, solange sie der laufende Start ist. */
+  const startLaunch = useCallback((next: Launch) => {
+    setDraft(undefined);
+    replaceLaunch(next);
+    void launchRun(next, registry, access).then(
+      () => { if (launching.current === next.runId) openRun(next.runId); },
+      (cause: unknown) => { if (launching.current === next.runId) setLaunch({ ...next, error: cause instanceof Error ? cause.message : String(cause) }); },
+    );
+  }, [access, openRun, registry, replaceLaunch]);
+  const selectRun = useCallback((id: string) => {
+    setFocusRunId(undefined);
+    setRunTitle(undefined);
+    setRunId(id);
+  }, []);
+  /** Der Zurück-Pfeil führt immer auf die Start-Seite; im Browser ist das die Run-Liste dieses Servers. */
+  const showStart = useCallback(() => {
+    setFocusRunId(undefined);
+    setDraft(undefined);
+    replaceLaunch(undefined);
+    setRefusal(undefined);
+    if (host.kind === "vscode") host.notify({ type: "showStart" });
+    else setRunId(undefined);
+  }, [host, replaceLaunch]);
+
+  useLayoutEffect(() => {
+    if (!focusRunId) return;
+    if (settingsOpen || draft) {
+      settleAutoFocus();
+      return;
+    }
+    window.addEventListener("pointerdown", settleAutoFocus, true);
+    window.addEventListener("keydown", settleAutoFocus, true);
+    window.addEventListener("blur", settleAutoFocus);
+    return () => {
+      window.removeEventListener("pointerdown", settleAutoFocus, true);
+      window.removeEventListener("keydown", settleAutoFocus, true);
+      window.removeEventListener("blur", settleAutoFocus);
+    };
+  }, [draft, focusRunId, settingsOpen, settleAutoFocus]);
+
+  useEffect(() => host.onCommand((message) => {
+    if (message.type === "selectRun") {
+      setFocusRunId(undefined);
+      setDraft(undefined);
+      replaceLaunch(undefined);
+      setRefusal(undefined);
+      setRunStartOptions(undefined);
+      setRunTitle(undefined);
+      setRunId(message.runId ?? undefined);
+    }
+    if (message.type !== "newRun") return;
+    if (host.kind !== "vscode") {
+      if (canCreate) startDraft(message.startOptions, message.entryId);
+      return;
+    }
+    // Im Panel ist ein Klick ein Klick: nur ein Leitfaden fragt wie in der Web-App vorher nach, der freie Auftrag entsteht im Chat.
+    const refused = !canCreate ? "Neue Runs sind für dieses Benutzerkonto nicht freigegeben."
+      : message.entryId === undefined && !canCreateFree ? "Freie Runs sind für dieses Benutzerkonto nicht freigegeben." : undefined;
+    setRefusal(refused);
+    if (refused !== undefined) return;
+    const entry = registry.startEntries.find((candidate) => candidate.id === message.entryId);
+    setRunTitle(entry?.title ?? NEW_RUN_TITLE);
+    if (message.entryId === undefined) {
+      openRun(crypto.randomUUID(), message.startOptions);
+      return;
+    }
+    if (entry !== undefined && registry.guideFor(entry) !== undefined) {
+      replaceLaunch(undefined);
+      startDraft(message.startOptions, entry.id);
+      return;
+    }
+    startLaunch({ runId: crypto.randomUUID(), entryId: message.entryId, startOptions: message.startOptions });
+  }), [canCreate, canCreateFree, host, openRun, registry, replaceLaunch, startDraft, startLaunch]);
+  useEffect(() => { host.notify({ type: "ready" }); }, [host]);
+  useEffect(() => { host.notify({ type: "runChanged", runId: runId ?? null }); }, [host, runId]);
+
+  const settings = settingsOpen && <SettingsModal onClose={() => setSettingsOpen(false)} registry={registry} />;
+  const pendingHeader = (title: string) => <>
+    <Button aria-label="Zur Start-Seite" className="self-center" onClick={showStart} size="icon-lg" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
+    <strong className={pendingTitleClass}>{title}</strong>
+    {connection && <span className={connectionClass} title={`Server ${connection}`}>{connection}</span>}
+    <RunPanelMenu onOpenSettings={openSettings} />
+  </>;
+  const toStart = <Button onClick={showStart} size="sm" variant="outline">Zur Start-Seite</Button>;
+  const draftChat = draft && <PluginChat
+    initialStartOptions={draft.startOptions}
+    key={draft.session.id}
+    onStarted={() => { openRun(draft.session.id); setRunTitle((title) => title ?? NEW_RUN_TITLE); void refresh(); }}
+    registry={registry}
+    session={draft.session}
+    startDialog={{ onClose: host.kind === "vscode" ? showStart : () => setDraft(undefined), initialEntryId: draft.entryId }}
+  />;
+  if (launch) return <>
+    {launch.error === undefined
+      ? <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={launchStarting} />
+      : <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={{ kind: "error", title: "Der Run konnte nicht gestartet werden", detail: launch.error }}>{toStart}</PendingPanel>}
+    {settings}
+  </>;
+  if (host.kind === "vscode" && draft) return <>
+    <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={launchStarting} />
+    {draftChat}
+    {settings}
+  </>;
+  // In VS Code wählt die Start-Seite der Erweiterung den Run; ohne ihn wartet das Panel auf deren Anforderung statt eine Liste zu zeigen.
+  if (host.kind === "vscode" && !(readRuns && runId)) return <>
+    {!readRuns ? <PendingPanel header={pendingHeader(NEW_RUN_TITLE)} state={noRunsReadable}>{toStart}</PendingPanel>
+      : refusal !== undefined ? <PendingPanel header={pendingHeader(NEW_RUN_TITLE)} state={{ kind: "error", title: "Kein neuer Run möglich", detail: refusal }}>{toStart}</PendingPanel>
+        : <HostWaiting header={pendingHeader(NEW_RUN_TITLE)}>{toStart}</HostWaiting>}
+    {settings}
+  </>;
+
+  const session = sessions.find((entry) => entry.id === runId);
+  const stop = () => {
+    if (runId === undefined) return;
+    setStopError(undefined);
+    void stopRun(runId, STOP_REASON).catch((cause: unknown) => setStopError(`Stoppen fehlgeschlagen: ${cause instanceof Error ? cause.message : String(cause)}`));
+  };
+  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(--surface-backdrop)]">
+      {readRuns && runId
+        ? (
+          <>
+            <header className={headerClass}>
+              <Button aria-label="Zur Start-Seite" className="self-center" onClick={showStart} size="icon-lg" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
+              <div aria-label="Run-Titelleiste" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar" ref={setHeaderContainer} role="region" />
+              {connection && <span className={connectionClass} title={`Server ${connection}`}>{connection}</span>}
+              <RunStateIcon className="self-center px-1.5" state={session?.running ? "running" : "idle"} />
+              <StopButton className="self-center" disabled={!writeRuns} label="Run stoppen" onClick={stop} size="icon-lg" title="Run mit allen Agenten und Abläufen stoppen" />
+              <div aria-label="Werkzeuge des Panels" className="flex flex-none items-center empty:hidden" ref={setToolsContainer} role="toolbar" />
+              <RunPanelMenu onOpenSettings={openSettings} />
+            </header>
+            {stopError && <Alert variant="destructive">{stopError}</Alert>}
+            <main className="relative z-1 flex min-h-0 min-w-0 flex-1 @container/chat-content">
+              <PluginChat
+                autoFocusChat={focusRunId === runId && !settingsOpen && !draft}
+                onAutoFocusChatSettled={settleAutoFocus}
+                toolbarContainer={toolsContainer}
+                headerContainer={headerContainer}
+                initialStartOptions={runStartOptions}
+                key={runId}
+                layout="panel"
+                onViewed={runReadState.markViewed}
+                registry={registry}
+                session={session ?? placeholderSession(runId, runTitle)}
+                viewing={!draft && !settingsOpen}
+              />
+            </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>
+              <RunPanelMenu 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>
+          </>
+        )}
+      {settings}
+      {draftChat}
+    </div>
+  );
+}
+
+interface Launch {
+  readonly runId: string;
+  readonly entryId: string;
+  readonly startOptions?: Readonly<Record<string, unknown>>;
+  readonly error?: string;
+}
+
+/** Ein Klick auf eine Vorlage der Startseite: Startoptionen setzen, die Vorlage starten, fertig. */
+async function launchRun(launch: Launch, registry: PluginRegistry, access: AccessContext): Promise<void> {
+  const entry = registry.startEntries.find((candidate) => candidate.id === launch.entryId);
+  if (!entry) throw new Error("Diese Vorlage gibt es in diesem Profil nicht.");
+  if (!canStartEntry(access, entry.id)) throw new Error(`${entry.title} ist für dieses Benutzerkonto nicht freigegeben.`);
+  if (launch.startOptions) {
+    const options = await getStartOptions(launch.runId);
+    const preselected = withoutFixedStartOptions(launch.startOptions, entry.fixedStartOptions);
+    for (const [id, value] of initialStartOptionUpdates(options, preselected)) await setStartOption(launch.runId, id, value);
+  }
+  await startEntryDirectly(launch.runId, entry, null);
+}
+
+/** Ohne Run wartet das Panel in VS Code auf die Startanforderung seines Hosts; bleibt sie aus, zeigt es den Weg zurück statt eines endlosen Ladezustands. */
+function HostWaiting({ children, header }: { children: ReactNode; header: ReactNode }) {
+  const [waited, setWaited] = useState(false);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setWaited(true), HOST_COMMAND_TIMEOUT_MS);
+    return () => window.clearTimeout(timer);
+  }, []);
+  return waited
+    ? <PendingPanel header={header} state={noRunSelected}>{children}</PendingPanel>
+    : <PendingPanel header={header} state={hostStarting} />;
+}
+
+/** Kopfzeile und darunter der Ladezustand, so wie das Run-Panel ihn später mittig im Chat zeigt; eine einzelne Mini-App hat keine Kopfzeile. */
+function PendingPanel({ children, header, headless = false, state }: { children?: ReactNode; header?: ReactNode; headless?: boolean; state: StartupNoticeState }) {
+  return <div className="flex h-full flex-col bg-[image:var(--surface-backdrop)]">
+    {!headless && <header className={headerClass}>{header}</header>}
+    <main className="grid min-h-0 flex-1 place-items-center overflow-hidden p-6"><StartupNotice state={state}>{children}</StartupNotice></main>
+  </div>;
+}
+
+function ElementPage({ elementId, registry, runId }: { elementId: string; registry: PluginRegistry; runId: string }) {
+  const host = useRunPanelHost();
+  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 = useRunPanelHost();
+  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/ColumnRunHeader.tsx → run-panel/RunPanelHeader.tsx}

@@ -7,7 +7,7 @@ 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 }: {
+export function RunPanelHeader({ attention, contributions, navigation, registry, runError, session, working }: {
   attention: AttentionState | undefined;
   contributions: PluginRegistry["sessionHeaders"];
   navigation: SessionNavigation;
@@ -31,7 +31,7 @@ export function ColumnRunHeader({ attention, contributions, navigation, registry
       <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}>
+      <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">
         <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} />

package/apps/web/src/{column/ColumnMenu.tsx → run-panel/RunPanelMenu.tsx}

@@ -2,13 +2,13 @@ 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";
+import { useRunPanelHost } 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();
+export function RunPanelMenu({ onOpenSettings }: { onOpenSettings: () => void }) {
+  const host = useRunPanelHost();
   const access = useAccess();
   const [open, setOpen] = useState(false);
   const [pending, setPending] = useState(false);
@@ -26,7 +26,7 @@ export function ColumnMenu({ onOpenSettings }: { onOpenSettings: () => void }) {
   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}>
+      <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">
         <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>}

package/apps/web/src/run-panel/RunPanelRail.tsx

@@ -0,0 +1,38 @@
+import type { SessionContext, SessionNavigation, WorkspaceTabContribution } from "../PluginRegistry";
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui";
+import { RUN_PANEL_WORKSPACE_ID } from "./workspace-state";
+
+/** Ein Zähler-Badge des Beitrags sitzt klein oben rechts am Knopf, der Punkt für Neues unten rechts. */
+const railButtonClass = "relative aria-pressed:bg-accent aria-pressed:text-primary [&_[data-slot=badge]]:absolute [&_[data-slot=badge]]:-top-0.5 [&_[data-slot=badge]]:-right-0.5 [&_[data-slot=badge]]:h-3.5 [&_[data-slot=badge]]:min-w-3.5 [&_[data-slot=badge]]:px-1 [&_[data-slot=badge]]:py-0 [&_[data-slot=badge]]:text-[0.58rem] [&_[data-slot=badge]]:leading-none";
+
+/** Die Symbolleiste am rechten Rand des Run-Panels: je Reiter der Leiste ein Knopf, der die Leiste mit diesem Reiter öffnet oder wieder schließt. */
+export function RunPanelRail({ navigation, onClose, open, pendingTabIds, session, tabs }: {
+  navigation: SessionNavigation;
+  onClose: () => void;
+  open: boolean;
+  pendingTabIds: readonly string[];
+  session: SessionContext;
+  tabs: readonly WorkspaceTabContribution[];
+}) {
+  return <TooltipProvider><nav aria-label="Reiter der Leiste" className="flex w-9 flex-none flex-col items-center gap-1 border-l border-border bg-shell py-1.5">
+    {tabs.map((tab) => {
+      const active = open && tab.id === navigation.activeTabId;
+      const pending = pendingTabIds.includes(tab.id);
+      return <Tooltip key={tab.id}>
+        <TooltipTrigger
+          aria-controls={RUN_PANEL_WORKSPACE_ID}
+          aria-label={tab.label}
+          aria-pressed={active}
+          className={railButtonClass}
+          onClick={() => active ? onClose() : navigation.openTab(tab.id)}
+          render={<Button size="icon" variant="ghost" />}
+        >
+          <tab.Icon />
+          {tab.Badge && <tab.Badge active={active} navigation={navigation} selection={navigation.selectionFor(tab.id)} session={session} />}
+          {pending && <span aria-hidden className="absolute right-1 bottom-1 size-1.5 rounded-full bg-primary" />}
+        </TooltipTrigger>
+        <TooltipContent side="left" sideOffset={8}>{pending ? `${tab.label} - es gibt Neues` : tab.label}</TooltipContent>
+      </Tooltip>;
+    })}
+  </nav></TooltipProvider>;
+}