@schlenkr/ragents 0.1.5 → 0.1.6

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

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import { XIcon } from "lucide-react";
+import { cn } from "cn";
+import type { SessionContext, SessionNavigation, WorkspaceTabContribution } from "../PluginRegistry";
+import { Button } from "../ui";
+import { mountedTabs } from "../WorkspacePanel";
+import { RUN_PANEL_WORKSPACE_ID } from "./workspace-state";
+
+/** Die Leiste als Pop-out über Chat und Bühne des Run-Panels, bei zwei Bereichen nur über dem rechten; abgedunkelter Rest, Klick daneben, Escape und X schließen, besuchte keepMounted-Reiter bleiben montiert. */
+export function RunPanelWorkspace({ navigation, onClose, open, session, tabs }: {
+  navigation: SessionNavigation;
+  onClose: () => void;
+  open: boolean;
+  session: SessionContext;
+  tabs: readonly WorkspaceTabContribution[];
+}) {
+  const sectionRef = useRef<HTMLElement>(null);
+  const [visited, setVisited] = useState<readonly string[]>([]);
+  const activeTabId = open ? navigation.activeTabId : undefined;
+  const activeTab = tabs.find((tab) => tab.id === activeTabId);
+  useEffect(() => {
+    if (activeTabId === undefined) return;
+    setVisited((current) => current.includes(activeTabId) ? current : [...current, activeTabId]);
+    const section = sectionRef.current;
+    if (section && !section.contains(document.activeElement)) section.focus({ preventScroll: true });
+  }, [activeTabId]);
+
+  return <>
+    {open && <div aria-hidden className="absolute inset-0 z-[60] bg-backdrop duration-200 animate-in fade-in-0" onClick={onClose} />}
+    <section
+      aria-label="Leiste"
+      className="absolute inset-2 z-[70] flex flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 animate-in fade-in-0 zoom-in-95 @min-[960px]/chat-content:left-[40%]"
+      hidden={!open}
+      id={RUN_PANEL_WORKSPACE_ID}
+      inert={!open}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape" || event.defaultPrevented) return;
+        event.preventDefault();
+        onClose();
+      }}
+      ref={sectionRef}
+      tabIndex={-1}
+    >
+      <header className="flex h-8 flex-none items-center gap-2 border-b border-border px-2.5">
+        <h2 className="min-w-0 flex-1 truncate text-[0.76rem] font-semibold">{activeTab?.label}</h2>
+        <Button aria-label="Leiste schließen" onClick={onClose} size="icon-xs" title="Leiste schließen" variant="ghost"><XIcon /></Button>
+      </header>
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        {mountedTabs(tabs, activeTabId, visited).map((tab) => <div className={cn("absolute inset-0 flex min-h-0 flex-col", tab.id !== activeTabId && "pointer-events-none invisible")} key={tab.id}>
+          <tab.Panel active={tab.id === activeTabId} navigation={navigation} selection={navigation.selectionFor(tab.id)} session={session} />
+        </div>)}
+      </div>
+    </section>
+  </>;
+}

package/apps/web/src/{column → run-panel}/clipboard.ts

@@ -1,10 +1,10 @@
-import { isClipboardColumnMessage } from "./host-contract";
+import { isClipboardRunPanelMessage } from "./host-contract";
 
 type EditingAction = "paste" | "copy" | "cut";
 
 const actionOf = (event: KeyboardEvent): EditingAction | undefined => {
-  if (!(event.metaKey || event.ctrlKey) || event.altKey) return undefined;
-  switch (event.key) {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey || event.isComposing || event.keyCode === 229 || event.getModifierState?.("AltGraph")) return undefined;
+  switch (event.key.toLowerCase()) {
     case "v": return "paste";
     case "c": return "copy";
     case "x": return "cut";
@@ -17,15 +17,15 @@ const isEditable = (element: Element | null): element is HTMLElement =>
 
 /**
  * macOS liefert Einfügen, Kopieren und Ausschneiden über das Menü der Anwendung, und VS Code reicht
- * den Befehl nur an das Dokument seines Webviews weiter, nicht in ein iframe fremder Herkunft. Die
- * Spalte führt ihn deshalb selbst aus; den Text der Zwischenablage holt sie über die Hülle.
+ * den Befehl nur an das Dokument seines Webviews weiter, nicht in ein iframe fremder Herkunft. Das
+ * Run-Panel führt ihn deshalb selbst aus; den Text der Zwischenablage holt es über die Hülle.
  */
-export function installClipboardBridge(browser: Window): () => void {
+export function createClipboardReader(browser: Window) {
   const parent = browser.parent;
   const pending = new Map<string, (text: string) => void>();
 
   const onMessage = (event: MessageEvent) => {
-    if (event.source !== parent || !isClipboardColumnMessage(event.data)) return;
+    if (event.source !== parent || !isClipboardRunPanelMessage(event.data)) return;
     const settle = pending.get(event.data.id);
     if (!settle) return;
     pending.delete(event.data.id);
@@ -38,6 +38,17 @@ export function installClipboardBridge(browser: Window): () => void {
     parent.postMessage({ type: "clipboardRead", id }, "*");
   });
 
+  browser.addEventListener("message", onMessage);
+  return {
+    read,
+    dispose: () => { browser.removeEventListener("message", onMessage); pending.forEach((settle) => settle("")); pending.clear(); },
+  };
+}
+
+export function installClipboardBridge(browser: Window, readClipboard?: () => Promise<string>): () => void {
+  let active = true;
+  const reader = readClipboard ? undefined : createClipboardReader(browser);
+  const read = readClipboard ?? reader!.read;
   const onKeyDown = (event: KeyboardEvent) => {
     const action = actionOf(event);
     if (action === undefined || event.defaultPrevented) return;
@@ -49,16 +60,16 @@ export function installClipboardBridge(browser: Window): () => void {
       return;
     }
     void read().then((text) => {
-      if (!text || !isEditable(target)) return;
+      if (!active || !text || !isEditable(target) || !target.isConnected) return;
       target.focus();
       browser.document.execCommand("insertText", false, text);
     });
   };
 
-  browser.addEventListener("message", onMessage);
   browser.addEventListener("keydown", onKeyDown, true);
   return () => {
-    browser.removeEventListener("message", onMessage);
+    active = false;
+    reader?.dispose();
     browser.removeEventListener("keydown", onKeyDown, true);
   };
 }

package/apps/web/src/run-panel/host-contract.ts

@@ -0,0 +1,123 @@
+/** Vertrag zwischen dem Run-Panel (run-panel.html) und einem Host, der es in einem iframe zeigt; importfrei, die VS-Code-Erweiterung bündelt ihn mit. */
+
+export const RUN_PANEL_PAGE = "run-panel.html";
+
+export type RunPanelLayout = "panel" | "app";
+export type RunPanelTheme = "light" | "dark";
+
+export interface RunPanelPageQuery {
+  layout?: RunPanelLayout;
+  run?: string;
+  element?: string;
+  host?: "vscode";
+  /** Der Name des Servers, auf dem dieser Run liegt; die Kopfzeile nennt ihn als Pille. */
+  connection?: string;
+  theme?: RunPanelTheme;
+  access?: string;
+}
+
+export const runPanelPageUrl = (serverUrl: string, query: RunPanelPageQuery): string => {
+  const url = new URL(RUN_PANEL_PAGE, serverUrl.endsWith("/") ? serverUrl : `${serverUrl}/`);
+  for (const [key, value] of Object.entries(query)) if (value !== undefined) url.searchParams.set(key, value);
+  return url.toString();
+};
+
+/** Nachrichten des Panels an seinen Host. */
+export type RunPanelHostMessage =
+  | { type: "ready" }
+  | { type: "runChanged"; runId: string | null }
+  | { type: "showStart" }
+  | { type: "openInCenter"; runId: string; elementId: string; title: string }
+  | { type: "returnToRunPanel"; runId: string; elementId: string }
+  | { type: "login" }
+  | { type: "logout" }
+  | { type: "openExternal"; url: string }
+  | { type: "openPage"; url: string; title: string };
+
+/** Der Text der Zwischenablage: ein iframe fremder Herkunft darf sie im Webview nicht lesen, die Hülle darüber schon. */
+export type RunPanelClipboardMessage = { type: "clipboardRead"; id: string };
+export type ClipboardRunPanelMessage = { type: "clipboardText"; id: string; text: string };
+
+export interface RunPanelKeyboardMessage {
+  type: "keyboardEvent";
+  event: {
+    type: "keydown" | "keyup";
+    key: string;
+    code: string;
+    keyCode: number;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    repeat: boolean;
+  };
+}
+
+export function isRunPanelKeyboardMessage(value: unknown): value is RunPanelKeyboardMessage {
+  if (typeof value !== "object" || value === null) return false;
+  const message = value as Record<string, unknown>;
+  if (message.type !== "keyboardEvent" || typeof message.event !== "object" || message.event === null) return false;
+  const event = message.event as Record<string, unknown>;
+  return (event.type === "keydown" || event.type === "keyup") && typeof event.key === "string"
+    && typeof event.code === "string" && typeof event.keyCode === "number" && Number.isInteger(event.keyCode)
+    && event.keyCode >= 0 && event.keyCode <= 255
+    && ["ctrlKey", "metaKey", "shiftKey", "altKey", "repeat"].every((key) => typeof event[key] === "boolean");
+}
+
+/** Nachrichten des Hosts an das Panel. */
+export type HostRunPanelMessage =
+  | { type: "selectRun"; runId: string | null }
+  | { type: "newRun"; startOptions?: Record<string, unknown>; entryId?: string }
+  | { type: "placements"; runId: string; center: string[] }
+  | { type: "theme"; theme: RunPanelTheme };
+
+const isObject = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null;
+const isText = (value: unknown): value is string => typeof value === "string" && value.length > 0;
+
+export const isRunPanelTheme = (value: unknown): value is RunPanelTheme => value === "light" || value === "dark";
+
+export const isRunPanelHostMessage = (value: unknown): value is RunPanelHostMessage => {
+  if (!isObject(value)) return false;
+  switch (value.type) {
+    case "ready":
+    case "showStart":
+    case "login":
+    case "logout":
+      return true;
+    case "runChanged":
+      return value.runId === null || isText(value.runId);
+    case "openInCenter":
+      return isText(value.runId) && isText(value.elementId) && typeof value.title === "string";
+    case "returnToRunPanel":
+      return isText(value.runId) && isText(value.elementId);
+    case "openExternal":
+      return isText(value.url);
+    case "openPage":
+      return isText(value.url) && typeof value.title === "string";
+    default:
+      return false;
+  }
+};
+
+export const isRunPanelClipboardMessage = (value: unknown): value is RunPanelClipboardMessage =>
+  isObject(value) && value.type === "clipboardRead" && isText(value.id);
+
+export const isClipboardRunPanelMessage = (value: unknown): value is ClipboardRunPanelMessage =>
+  isObject(value) && value.type === "clipboardText" && isText(value.id) && typeof value.text === "string";
+
+export const isHostRunPanelMessage = (value: unknown): value is HostRunPanelMessage => {
+  if (!isObject(value)) return false;
+  switch (value.type) {
+    case "selectRun":
+      return value.runId === null || isText(value.runId);
+    case "newRun":
+      return (value.startOptions === undefined || (isObject(value.startOptions) && !Array.isArray(value.startOptions)))
+        && (value.entryId === undefined || isText(value.entryId));
+    case "placements":
+      return isText(value.runId) && Array.isArray(value.center) && value.center.every(isText);
+    case "theme":
+      return isRunPanelTheme(value.theme);
+    default:
+      return false;
+  }
+};

package/apps/web/src/{column → run-panel}/host.ts

@@ -1,23 +1,26 @@
-import { createContext, useContext, useSyncExternalStore } from "react";
-import type { ColumnHostKind } from "./column-location";
-import { isHostColumnMessage, type ColumnHostMessage, type ColumnTheme, type HostColumnMessage } from "./host-contract";
+import { createContext, createElement, useContext, useSyncExternalStore, type PropsWithChildren } from "react";
+import { OfferedMachinesProvider, type OfferedMachines } from "../offered-machines";
+import type { RunPanelHostKind } from "./run-panel-location";
+import { isHostRunPanelMessage, type RunPanelHostMessage, type RunPanelTheme, type HostRunPanelMessage } from "./host-contract";
 
-export interface ColumnHost {
-  readonly kind: ColumnHostKind;
+export interface RunPanelHost {
+  readonly kind: RunPanelHostKind;
+  /** VS Code ist selbst ein Arbeitsplatz und bietet für neue Runs auch Arbeitsplätze an, der Browser nur den Server. */
+  readonly machines: OfferedMachines;
   /** Elemente des Runs, die der Host gerade in der Mitte zeigt; im Browser immer leer. */
   centerElements(runId: string): ReadonlySet<string>;
   subscribe(listener: () => void): () => void;
   openInCenter(runId: string, elementId: string, title: string): void;
-  returnToColumn(runId: string, elementId: string): void;
+  returnToRunPanel(runId: string, elementId: string): void;
   requestLogin(): void;
   /** Der Host hält den Sitzungstoken und beendet die Sitzung selbst. */
   requestLogout(): void;
   openExternal(url: string): void;
   /** Zeigt eine Webseite im Host, etwa als Reiter im Simple Browser von VS Code. */
   openPage(url: string, title: string): void;
-  onCommand(listener: (message: HostColumnMessage) => void): () => void;
-  /** Meldet dem Host, dass das Panel bereit ist oder ihren Run gewechselt hat. */
-  notify(message: Extract<ColumnHostMessage, { type: "ready" | "runChanged" }>): void;
+  onCommand(listener: (message: HostRunPanelMessage) => void): () => void;
+  /** Meldet dem Host, dass das Panel bereit ist, seinen Run gewechselt hat oder zurück auf die Start-Seite will. */
+  notify(message: Extract<RunPanelHostMessage, { type: "ready" | "runChanged" | "showStart" }>): void;
 }
 
 const emptySet: ReadonlySet<string> = new Set();
@@ -26,13 +29,14 @@ const unsupported = (action: string) => (): never => {
   throw new Error(`${action} gibt es nur in VS Code.`);
 };
 
-export function createBrowserHost(browser: Window): ColumnHost {
+export function createBrowserHost(browser: Window): RunPanelHost {
   return {
     kind: "browser",
+    machines: "server",
     centerElements: () => emptySet,
     subscribe: () => () => undefined,
     openInCenter: unsupported("Eine Mini-App in die Mitte legen"),
-    returnToColumn: unsupported("Eine Mini-App zurückholen"),
+    returnToRunPanel: unsupported("Eine Mini-App zurückholen"),
     requestLogin: unsupported("Die Anmeldung über den Host"),
     requestLogout: unsupported("Die Abmeldung über den Host"),
     openExternal: (url) => { browser.open(url, "_blank", "noopener"); },
@@ -43,15 +47,15 @@ export function createBrowserHost(browser: Window): ColumnHost {
 }
 
 /** Das Panel im iframe eines VS-Code-Webviews: Nachrichten laufen über das umgebende Webview zur Erweiterung. */
-export function createVsCodeHost(browser: Window): ColumnHost {
+export function createVsCodeHost(browser: Window): RunPanelHost {
   const parent = browser.parent;
   if (parent === browser) throw new Error("Das Panel läuft mit host=vscode, ist aber in kein Webview eingebettet.");
   const placements = new Map<string, ReadonlySet<string>>();
   const placementListeners = new Set<() => void>();
-  const commandListeners = new Set<(message: HostColumnMessage) => void>();
-  const post = (message: ColumnHostMessage) => parent.postMessage(message, "*");
+  const commandListeners = new Set<(message: HostRunPanelMessage) => void>();
+  const post = (message: RunPanelHostMessage) => parent.postMessage(message, "*");
   browser.addEventListener("message", (event) => {
-    if (event.source !== parent || !isHostColumnMessage(event.data)) return;
+    if (event.source !== parent || !isHostRunPanelMessage(event.data)) return;
     const message = event.data;
     if (message.type === "placements") {
       placements.set(message.runId, new Set(message.center));
@@ -61,13 +65,14 @@ export function createVsCodeHost(browser: Window): ColumnHost {
   });
   return {
     kind: "vscode",
+    machines: "all",
     centerElements: (runId) => placements.get(runId) ?? emptySet,
     subscribe: (listener) => {
       placementListeners.add(listener);
       return () => { placementListeners.delete(listener); };
     },
     openInCenter: (runId, elementId, title) => post({ type: "openInCenter", runId, elementId, title }),
-    returnToColumn: (runId, elementId) => post({ type: "returnToColumn", runId, elementId }),
+    returnToRunPanel: (runId, elementId) => post({ type: "returnToRunPanel", runId, elementId }),
     requestLogin: () => post({ type: "login" }),
     requestLogout: () => post({ type: "logout" }),
     openExternal: (url) => post({ type: "openExternal", url }),
@@ -80,22 +85,25 @@ export function createVsCodeHost(browser: Window): ColumnHost {
   };
 }
 
-export const createColumnHost = (kind: ColumnHostKind, browser: Window): ColumnHost =>
+export const createRunPanelHost = (kind: RunPanelHostKind, browser: Window): RunPanelHost =>
   kind === "vscode" ? createVsCodeHost(browser) : createBrowserHost(browser);
 
-const ColumnHostContext = createContext<ColumnHost | undefined>(undefined);
+const RunPanelHostContext = createContext<RunPanelHost | undefined>(undefined);
 
-export const ColumnHostProvider = ColumnHostContext.Provider;
+/** Stellt den Host bereit und mit ihm, welche Rechner die Startoptionen anbieten. */
+export function RunPanelHostProvider({ value, children }: PropsWithChildren<{ value: RunPanelHost }>) {
+  return createElement(RunPanelHostContext.Provider, { value }, createElement(OfferedMachinesProvider, { value: value.machines }, children));
+}
 
-export function useColumnHost(): ColumnHost {
-  const host = useContext(ColumnHostContext);
+export function useRunPanelHost(): RunPanelHost {
+  const host = useContext(RunPanelHostContext);
   if (!host) throw new Error("Das Panel läuft ohne Host-Provider.");
   return host;
 }
 
 export function useCenterElements(runId: string): ReadonlySet<string> {
-  const host = useColumnHost();
+  const host = useRunPanelHost();
   return useSyncExternalStore(host.subscribe, () => host.centerElements(runId), () => emptySet);
 }
 
-export type { ColumnTheme };
+export type { RunPanelTheme };

package/apps/web/src/run-panel/input-bridge.ts

@@ -0,0 +1,75 @@
+import { createClipboardReader, installClipboardBridge } from "./clipboard";
+import { installKeyboardBridge } from "./keyboard";
+import { isClipboardRunPanelMessage, isRunPanelClipboardMessage, isRunPanelKeyboardMessage, type ClipboardRunPanelMessage, type RunPanelKeyboardMessage } from "./host-contract";
+
+export { keyboardMessage } from "./keyboard";
+export { isRunPanelKeyboardMessage } from "./host-contract";
+
+interface InputTransport {
+  readClipboard: () => Promise<string>;
+  keyboard: (message: RunPanelKeyboardMessage) => void;
+}
+
+const serviceKey = Symbol.for("ragents.host-input");
+const inputType = "ragents.app.input";
+type InputWindow = Window & { [key: symbol]: InputTransport | undefined };
+const transportOf = (browser: Window) => (browser as InputWindow)[serviceKey];
+export const hostInputEnabled = (browser: Window): boolean => transportOf(browser) !== undefined;
+
+function installInputTransport(browser: Window, transport: InputTransport): () => void {
+  if (hostInputEnabled(browser)) throw new Error("Die Eingabebrücke ist bereits installiert.");
+  (browser as InputWindow)[serviceKey] = transport;
+  const clipboard = installClipboardBridge(browser, transport.readClipboard);
+  const keyboard = installKeyboardBridge(browser, transport.keyboard);
+  return () => {
+    clipboard();
+    keyboard();
+    delete (browser as InputWindow)[serviceKey];
+  };
+}
+
+export function installRunPanelInputBridge(browser: Window): () => void {
+  const reader = createClipboardReader(browser);
+  const dispose = installInputTransport(browser, {
+    readClipboard: reader.read,
+    keyboard: (message) => browser.parent.postMessage(message, "*"),
+  });
+  return () => { dispose(); reader.dispose(); };
+}
+
+export function relayFrameInput(browser: Window, value: unknown, reply: (message: ClipboardRunPanelMessage) => void): boolean {
+  if (!value || typeof value !== "object" || !("type" in value) || value.type !== inputType) return false;
+  if (!("version" in value) || value.version !== 1 || !("message" in value)) return true;
+  const transport = transportOf(browser);
+  if (!transport) return true;
+  const message = value.message;
+  if (isRunPanelKeyboardMessage(message)) transport.keyboard(message);
+  else if (isRunPanelClipboardMessage(message)) void transport.readClipboard().then((text) => reply({ type: "clipboardText", id: message.id, text }));
+  return true;
+}
+
+export function installFrameInputBridge(browser: Window, port: MessagePort): () => void {
+  const pending = new Map<string, (text: string) => void>();
+  const onMessage = ({ data }: MessageEvent) => {
+    if (!isClipboardRunPanelMessage(data)) return;
+    const settle = pending.get(data.id);
+    pending.delete(data.id);
+    settle?.(data.text);
+  };
+  port.addEventListener("message", onMessage);
+  const send = (message: unknown) => port.postMessage({ type: inputType, version: 1, message });
+  const dispose = installInputTransport(browser, {
+    readClipboard: () => new Promise<string>((resolve) => {
+      const id = crypto.randomUUID();
+      pending.set(id, resolve);
+      send({ type: "clipboardRead", id });
+    }),
+    keyboard: (message) => { if (message.event.key !== "Escape" || message.event.type === "keyup") send(message); },
+  });
+  return () => {
+    dispose();
+    port.removeEventListener("message", onMessage);
+    pending.forEach((settle) => settle(""));
+    pending.clear();
+  };
+}

package/apps/web/src/run-panel/keyboard.ts

@@ -0,0 +1,53 @@
+import type { RunPanelKeyboardMessage } from "./host-contract";
+
+const isLocalEditingKey = (event: KeyboardEvent, element: Element | null): boolean => {
+  const editable = element !== null && (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || (element as HTMLElement).isContentEditable);
+  const key = event.key.toLowerCase();
+  if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && ["c", "v", "x"].includes(key)) return true;
+  if (!editable) return false;
+  if (!(event.altKey && (event.metaKey || event.ctrlKey))
+    && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Backspace", "Delete"].includes(event.key)) return true;
+  return (event.metaKey || event.ctrlKey) && !event.altKey && (key === "z" || (!event.shiftKey && ["a", "y"].includes(key)));
+};
+
+export const keyboardMessage = (event: KeyboardEvent, type: "keydown" | "keyup"): RunPanelKeyboardMessage => ({
+  type: "keyboardEvent",
+  event: {
+    type,
+    key: event.key,
+    code: event.code,
+    keyCode: event.keyCode,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    repeat: event.repeat,
+  },
+});
+
+export function installKeyboardBridge(browser: Window, send: (message: RunPanelKeyboardMessage) => void = (message) => browser.parent.postMessage(message, "*")): () => void {
+  const forwarded = new Set<string>();
+  const post = (event: KeyboardEvent, type: "keydown" | "keyup") => send(keyboardMessage(event, type));
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.defaultPrevented || event.isComposing || event.keyCode === 229
+      || event.key === "Dead" || event.key === "Process" || event.getModifierState("AltGraph")
+      || isLocalEditingKey(event, browser.document.activeElement)) return;
+    if ((event.metaKey || event.ctrlKey) && !event.altKey && ["p", "f", "s"].includes(event.key.toLowerCase())) event.preventDefault();
+    forwarded.add(event.code || event.key);
+    post(event, "keydown");
+  };
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (!forwarded.delete(event.code || event.key)) return;
+    post(event, "keyup");
+  };
+  const onBlur = () => forwarded.clear();
+  browser.addEventListener("keydown", onKeyDown);
+  browser.addEventListener("keyup", onKeyUp);
+  browser.addEventListener("blur", onBlur);
+  return () => {
+    browser.removeEventListener("keydown", onKeyDown);
+    browser.removeEventListener("keyup", onKeyUp);
+    browser.removeEventListener("blur", onBlur);
+    forwarded.clear();
+  };
+}

package/apps/web/src/run-panel/run-panel-location.ts

@@ -0,0 +1,35 @@
+import { ACCESS_TOKEN_QUERY } from "../../../../packages/ragents/src/access";
+import { isRunPanelTheme, type RunPanelTheme } from "./host-contract";
+
+export type RunPanelLocation =
+  | { layout: "panel"; runId: string | undefined; host: RunPanelHostKind; connection: string | undefined; theme: RunPanelTheme | undefined; access: string | undefined }
+  | { layout: "app"; runId: string; elementId: string; host: RunPanelHostKind; connection: string | undefined; theme: RunPanelTheme | undefined; access: string | undefined };
+
+export type RunPanelHostKind = "browser" | "vscode";
+
+const text = (value: string | null): string | undefined => value?.trim() ? value.trim() : undefined;
+
+const hostKind = (value: string): RunPanelHostKind => {
+  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 parseRunPanelLocation(search: string): RunPanelLocation {
+  const query = new URLSearchParams(search);
+  const layout = text(query.get("layout")) ?? "panel";
+  if (layout !== "panel" && layout !== "app") throw new Error(`Unbekanntes Layout ${JSON.stringify(layout)}. Erlaubt sind panel und app.`);
+  const themeValue = text(query.get("theme"));
+  if (themeValue !== undefined && !isRunPanelTheme(themeValue)) throw new Error(`Unbekannte Darstellung ${JSON.stringify(themeValue)}. Erlaubt sind light und dark.`);
+  const common = {
+    host: hostKind(text(query.get("host")) ?? "browser"),
+    connection: text(query.get("connection")),
+    theme: themeValue,
+    access: text(query.get(ACCESS_TOKEN_QUERY)),
+  };
+  const runId = text(query.get("run"));
+  if (layout === "panel") 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 };
+}

package/apps/web/src/{column → run-panel}/use-session-list.ts

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { listSessions, type SessionInfo } from "../api";
-import { coreContracts } from "@aicontainer/server/api/contracts";
+import { coreContracts } from "@ragents/host/api/contracts";
 import { rpc } from "../rpc";
 
 const POLL_INTERVAL_MS = 5000;
 
-/** Die Run-Liste des Servers, live über den Sitzungskanal und als Sicherheitsnetz alle fünf Sekunden neu geladen. */
+/** Die Run-Liste des Servers, live über den Kanal ragents.runs und als Sicherheitsnetz alle fünf Sekunden neu geladen. */
 export function useSessionList(enabled: boolean): { sessions: SessionInfo[]; unreachable: boolean; refresh: () => Promise<void> } {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [unreachable, setUnreachable] = useState(false);
@@ -33,7 +33,7 @@ export function useSessionList(enabled: boolean): { sessions: SessionInfo[]; unr
   useEffect(() => {
     if (!enabled) return;
     void refresh();
-    const unsubscribe = rpc.subscribe(coreContracts.channels.sessions, {}, () => void refresh());
+    const unsubscribe = rpc.subscribe(coreContracts.channels.runs, {}, () => void refresh());
     const timer = setInterval(() => void refresh(), POLL_INTERVAL_MS);
     return () => { unsubscribe(); clearInterval(timer); };
   }, [enabled, refresh]);

package/apps/web/src/run-panel/workspace-state.ts

@@ -0,0 +1,43 @@
+import { createLocalStorageSetting } from "../lib/local-storage-setting";
+import type { WorkspaceTabContribution } from "../PluginRegistry";
+
+/** Persönlicher Zustand der Leiste im Run-Panel je Run: der offene Reiter, null heißt geschlossen. */
+export interface RunPanelWorkspaceState {
+  tab: string | null;
+}
+
+export const RUN_PANEL_WORKSPACE_ID = "run-panel-workspace";
+
+export const DEFAULT_RUN_PANEL_WORKSPACE_STATE: RunPanelWorkspaceState = Object.freeze({ tab: null });
+
+export const runPanelWorkspaceStorageKey = (runId: string) => `ragents.run-panel.workspace-tab:${runId}`;
+
+export function parseRunPanelWorkspaceState(raw: string | null): RunPanelWorkspaceState {
+  if (raw === null) return DEFAULT_RUN_PANEL_WORKSPACE_STATE;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || Array.isArray(value)
+    || Object.keys(value).some((key) => key !== "tab")
+    || !("tab" in value) || !(value.tab === null || typeof value.tab === "string")) {
+    throw new Error("Der gespeicherte Zustand der Leiste ist ungültig.");
+  }
+  return value as RunPanelWorkspaceState;
+}
+
+/** Der Reiter der offenen Leiste; leer, wenn sie geschlossen ist oder der gemerkte Reiter gerade nicht verfügbar ist. */
+export const activeWorkspaceTab = (state: RunPanelWorkspaceState, tabs: readonly WorkspaceTabContribution[]): string =>
+  state.tab !== null && tabs.some((tab) => tab.id === state.tab) ? state.tab : "";
+
+const setting = createLocalStorageSetting({
+  changeEvent: "ragents-run-panel-workspace-change",
+  matchesKey: (key) => key.startsWith("ragents.run-panel.workspace-tab:"),
+  parse: parseRunPanelWorkspaceState,
+  serialize: JSON.stringify,
+});
+
+export function useRunPanelWorkspaceState(runId: string): RunPanelWorkspaceState {
+  return setting.useValue(runPanelWorkspaceStorageKey(runId));
+}
+
+export function saveRunPanelWorkspaceState(runId: string, state: RunPanelWorkspaceState) {
+  setting.save(runPanelWorkspaceStorageKey(runId), state);
+}