@schlenkr/ragents 0.1.0 → 0.1.1

package/apps/server/src/plugin-support/language-server/contract.ts

@@ -3,7 +3,12 @@ import { defineOperation } from "@aicontainer/ragents/src/rpc/contract";
 import { openJson } from "@aicontainer/ragents/src/http/contracts";
 import type { LanguageServerSnapshot } from "@aicontainer/workspace-executor";
 
-export type { LanguageServerSeverity, LanguageServerSnapshot } from "@aicontainer/workspace-executor";
+export type {
+  LanguageServerInstanceSnapshot,
+  LanguageServerSeverity,
+  LanguageServerSnapshot,
+  LanguageServerState,
+} from "@aicontainer/workspace-executor";
 
 /** Je Sprachserver-Plugin eine Methode; die Rechte tragen seine Kennung. */
 export const languageServerSnapshotContract = (pluginId: string) =>

package/apps/server/src/plugin-support/language-server/tools.ts

@@ -1,6 +1,7 @@
 import { Type } from "typebox";
 import { defineRunFunction, type ToolContributor } from "@aicontainer/ragents";
 import {
+  languageServerCloseTool,
   languageServerDiagnosticsTool,
   languageServerOpenTool,
   type LanguageServerAdapter,
@@ -19,15 +20,22 @@ export const createLanguageServerToolContributor = (
   const openMetadata = {
     name: languageServerOpenTool(id),
     nativeTool: true,
-    description: `Start the ${label} language server for this conversation's workspace and load ${rootDescription}. `
+    description: `Start a ${label} language server instance for this conversation's workspace and load ${rootDescription}. `
       + `Afterwards every edit or write of a ${extensions} file gets its diagnostics appended automatically, `
-      + `and ${languageServerDiagnosticsTool(id)} is available. Idempotent for the same root; a different root replaces the server.`,
+      + `and ${languageServerDiagnosticsTool(id)} is available. Idempotent for the same root; other roots stay open.`,
   } as const;
   const diagnosticsMetadata = {
     name: languageServerDiagnosticsTool(id),
     nativeTool: true,
     description: `Current ${label} diagnostics (errors, warnings on request) for ${extensions} files from the running `
-      + `language server, without building. Without paths: all changed files of the workspace according to git.`,
+      + `language server, without building. Without paths: all changed files of every open root according to git. `
+      + `With paths every file is answered by the instance whose root contains it; root asks one instance.`,
+  } as const;
+  const closeMetadata = {
+    name: languageServerCloseTool(id),
+    nativeTool: true,
+    description: `Stop the ${label} language server instance of one root; without root every ${label} instance of `
+      + "this conversation. Other languages and other conversations stay untouched.",
   } as const;
   const openTool = defineRunFunction({
     ...openMetadata,
@@ -51,6 +59,7 @@ export const createLanguageServerToolContributor = (
       paths: Type.Optional(Type.Array(Type.String(), {
         description: "Files relative to the workspace root; omit for all changed files",
       })),
+      root: Type.Optional(Type.String({ description: "Ask only the instance of this open root" })),
       warnings: Type.Optional(Type.Boolean({ description: "Also list warnings (default: only counted)" })),
     }),
     resultSchema: Type.String(),
@@ -62,12 +71,28 @@ export const createLanguageServerToolContributor = (
         ...(scope.signal ? { signal: scope.signal } : {}),
       }) as string,
   });
+  const closeTool = defineRunFunction({
+    ...closeMetadata,
+    label: `${label} schließen`,
+    schema: Type.Object({
+      root: Type.Optional(Type.String({ description: "The open root to stop; omit for every instance of this conversation" })),
+    }),
+    resultSchema: Type.String(),
+    available: alwaysAvailable,
+    executionMode: "sequential",
+    run: async (scope, toolCallId, input) =>
+      await sandbox.execute(scope.caller.runId, closeMetadata.name, input, {
+        toolCallId,
+        ...(scope.signal ? { signal: scope.signal } : {}),
+      }) as string,
+  });
   return {
     name: `ragents.lsp-${id}`,
     descriptors: [
       toolDescriptorFrom(openMetadata, alwaysAvailable),
       toolDescriptorFrom(diagnosticsMetadata, alwaysAvailable),
+      toolDescriptorFrom(closeMetadata, alwaysAvailable),
     ],
-    tools: () => [openTool, diagnosticsTool],
+    tools: () => [openTool, diagnosticsTool, closeTool],
   };
 };

package/apps/server/src/plugin-support/run-scripts.ts

@@ -6,7 +6,7 @@ import { flag, frontMatterOf, numberOf, tagsOf } from "./front-matter.js";
 export type ScriptStartEntry = Extract<StartEntryContribution, { action: "script" }>;
 
 const PACKAGE_NAME = /^[a-z0-9][a-z0-9-]*$/;
-const RUN_FIELDS = ["title", "description", "order", "guide", "tags", "coordinator"];
+const RUN_FIELDS = ["title", "description", "order", "guide", "tags", "coordinator", "category"];
 
 const requiredFile = (directory: string, name: string): string => {
   const file = path.join(directory, name);
@@ -45,6 +45,8 @@ const runScriptFrom = (directory: string, name: string, id: string): ScriptStart
   const order = numberOf(runFile, "order", fields.get("order"));
   const guide = fields.get("guide");
   const tags = tagsOf(runFile, fields.get("tags"));
+  const category = fields.get("category");
+  if (category !== undefined && !category.trim()) throw new Error(`${runFile}: category ist leer`);
   const programsDirectory = path.join(directory, "actors");
   const programsStats = statSync(programsDirectory, {throwIfNoEntry: false});
   if (programsStats && !programsStats.isDirectory()) throw new Error(`${programsDirectory} muss ein Verzeichnis sein`);
@@ -60,6 +62,7 @@ const runScriptFrom = (directory: string, name: string, id: string): ScriptStart
     ...(order !== undefined ? {order} : {}),
     ...(guide ? {guide} : {}),
     ...(tags !== undefined ? {tags} : {}),
+    ...(category ? {category} : {}),
     script: {
       handle: name,
       coordinator: flag(runFile, "coordinator", fields.get("coordinator"), true),

package/apps/server/src/plugin-support/start-entries-contract.ts

@@ -13,7 +13,7 @@ export interface StartEntryBase {
 /** One entry of the start surface as GET /api/plugins publishes it; a script entry never carries its source. */
 export type StartEntry = StartEntryBase & (
   | { action: "skill"; skill: string; category: string; prompt: string }
-  | { action: "script"; coordinator: boolean }
+  | { action: "script"; coordinator: boolean; category?: string }
 );
 
 export type SkillStartEntry = Extract<StartEntry, { action: "skill" }>;
@@ -62,9 +62,10 @@ export const startEntryFrom = (value: unknown): StartEntry => {
       return { ...base, action: "skill", skill: value.skill, category: value.category, prompt: value.prompt };
     }
     case "script":
-      allowed(["coordinator"]);
+      allowed(["coordinator", "category"]);
       if (typeof value.coordinator !== "boolean") throw invalid(`${id}: coordinator muss true oder false sein`);
-      return { ...base, action: "script", coordinator: value.coordinator };
+      if (value.category !== undefined && (!text(value.category) || value.category !== value.category.trim())) throw invalid(`${id}: category muss ein einzelner nicht leerer Text sein`);
+      return { ...base, action: "script", coordinator: value.coordinator, ...(value.category !== undefined ? { category: value.category } : {}) };
     default:
       throw invalid(`${id}: unbekannte Aktion ${String(value.action)}; gültig sind skill und script`);
   }

package/apps/server/src/plugin-support/workspace-sandbox-host.ts

@@ -25,6 +25,7 @@ import {
   type WorkspaceExecutor,
   type WorkspaceProcessContext,
 } from "@aicontainer/workspace-executor";
+import { hostRoot } from "../host-version.js";
 import type { SessionWorkspace } from "../ragents/workspace-runtime.js";
 import { agentToolFrom, toolDescriptorFrom, type AgentToolDefinition } from "./agent-tool.js";
 import { alwaysAvailable } from "./tool-availability.js";
@@ -137,6 +138,7 @@ export class WorkspaceSandboxHost implements SandboxServices {
       root: await workspace.currentRoot(),
       home,
       logDirectory: home.home,
+      hostRoot: hostRoot(),
       ...(ident ? { ident } : {}),
       additionalRoots: await this.#additionalRoots(runId, ident),
       readOnlyRoots,

package/apps/web/src/App.tsx

@@ -30,7 +30,6 @@ export function App() {
   const overviewButtonRef = useRef<HTMLButtonElement>(null);
   const settingsButtonRef = useRef<HTMLButtonElement>(null);
   const [runHeaderContainer, setRunHeaderContainer] = useState<HTMLDivElement | null>(null);
-  const [canvasToolbarContainer, setCanvasToolbarContainer] = useState<HTMLDivElement | null>(null);
   const [workspaceHeaderContainer, setWorkspaceHeaderContainer] = useState<HTMLDivElement | null>(null);
   const [statusContainer, setStatusContainer] = useState<HTMLElement | null>(null);
   const [workspaceModalContainer, setWorkspaceModalContainer] = useState<HTMLDivElement | null>(null);
@@ -80,13 +79,6 @@ export function App() {
     if (restoreFocus) overviewButtonRef.current?.focus({ preventScroll: true });
   }, []);
 
-  useEffect(() => {
-    if (!canvasToolbarContainer) return;
-    const activateCanvas = () => { closeOverview(); setToolbarPanel(undefined); };
-    canvasToolbarContainer.addEventListener("click", activateCanvas);
-    return () => canvasToolbarContainer.removeEventListener("click", activateCanvas);
-  }, [canvasToolbarContainer, closeOverview]);
-
   // Overview contributions keep their state after the first opening.
   const openOverview = useCallback(() => {
     setToolbarPanel(undefined);
@@ -202,7 +194,6 @@ export function App() {
             {busy ? <Spinner aria-hidden className="size-[18px]" /> : <SparklesIcon size={22} />}
           </button>
         </div>}
-        <div className="relative flex flex-none self-stretch empty:hidden" ref={setCanvasToolbarContainer} />
         {toolbarPanels.map(({ id, Panel }) => <ToolbarPanelHost
           id={id} key={id} onBusy={setPanelBusy}
           onClose={() => setToolbarPanel(undefined)}
@@ -230,7 +221,6 @@ export function App() {
         {readRuns && activeId
           ? (
             <PluginChat
-              canvasToolbarContainer={canvasToolbarContainer}
               headerContainer={runHeaderContainer}
               workspaceHeaderContainer={workspaceHeaderContainer}
               statusContainer={statusContainer}

package/apps/web/src/PluginChat.tsx

@@ -55,7 +55,7 @@ export type ChatLayout = "workspace" | "column" | { element: string };
 
 interface PluginChatProps {
   layout?: ChatLayout;
-  canvasToolbarContainer?: HTMLElement | null;
+  toolbarContainer?: HTMLElement | null;
   statusContainer?: HTMLElement | null;
   headerContainer?: HTMLElement | null;
   workspaceHeaderContainer?: HTMLElement | null;
@@ -71,7 +71,7 @@ interface PluginChatProps {
 
 interface ChatWorkspaceProps {
   layout: ChatLayout;
-  canvasToolbarContainer?: HTMLElement | null;
+  toolbarContainer?: HTMLElement | null;
   statusContainer?: HTMLElement | null;
   panelState: WorkspacePanelState;
   onTogglePanel: () => void;
@@ -90,7 +90,7 @@ interface ChatWorkspaceProps {
   tabs: readonly WorkspaceTabContribution[];
 }
 
-export function PluginChat({ layout = "workspace", headerContainer, canvasToolbarContainer, workspaceHeaderContainer, statusContainer, initialStartOptions, onStarted, onLocationChange, onViewed, viewing = false, registry, session, startDialog }: PluginChatProps) {
+export function PluginChat({ layout = "workspace", headerContainer, toolbarContainer, workspaceHeaderContainer, statusContainer, initialStartOptions, onStarted, onLocationChange, onViewed, viewing = false, registry, session, startDialog }: PluginChatProps) {
   const access = useAccess();
   const startOnly = startDialog !== undefined;
   const [modalContainer, setModalContainer] = useState<HTMLDivElement | null>(null);
@@ -235,7 +235,7 @@ export function PluginChat({ layout = "workspace", headerContainer, canvasToolba
             panelVisible={panelState === "expanded"} runId={session.id} tabs={availableTabs} />}
           <ChatWorkspace
             layout={layout}
-            canvasToolbarContainer={canvasToolbarContainer}
+            toolbarContainer={toolbarContainer}
             panelState={panelState}
             onTogglePanel={() => updatePanelState(panelState === "expanded" ? "collapsed" : "expanded")}
             headerContainer={headerContainer}
@@ -281,7 +281,7 @@ function UserLocationReporter({ activeTabId, onChange, panelVisible, runId, tabs
 
 function ChatWorkspace({
   layout,
-  canvasToolbarContainer = null,
+  toolbarContainer = null,
   panelState,
   onTogglePanel,
   headerContainer,
@@ -385,7 +385,7 @@ function ChatWorkspace({
           ? <CanvasElementView elementId={layout.element} navigation={navigation} registry={registry} session={session} />
           : CanvasColumn
             ? <CanvasColumn
-              toolbarContainer={canvasToolbarContainer}
+              toolbarContainer={toolbarContainer}
               runToolbarContainer={null}
               statusContainer={statusContainer}
               cardSections={registry.cardSections}
@@ -420,7 +420,7 @@ function ChatWorkspace({
         {CanvasCenter
             ? (
               <CanvasCenter
-                toolbarContainer={canvasToolbarContainer}
+                toolbarContainer={toolbarContainer}
                 runToolbarContainer={runToolbarContainer}
                 statusContainer={statusContainer}
                 cardSections={registry.cardSections}
@@ -477,7 +477,7 @@ function CanvasElementView({ elementId, navigation, registry, session }: {
     {session.runView === undefined ? "Der Run wird geladen ..." : "Diese Mini-App gibt es in dem Run nicht mehr."}
   </div>;
   return <div className="flex min-h-0 min-w-0 flex-1 flex-col" data-view="element">
-    <match.Element definition={match.definition} navigation={navigation} presentation="tiled" session={session} />
+    <match.Element definition={match.definition} navigation={navigation} session={session} />
   </div>;
 }
 

package/apps/web/src/PluginRegistry.tsx

@@ -152,25 +152,13 @@ export interface CanvasElementDefinition {
   id: string;
   visible?: boolean;
   title?: string;
-  width: number;
-  height: number;
-  collapsedHeight?: number;
   anchorActorId?: string;
   entity?: EntityReference;
-  resizable?: {
-    minWidth: number;
-    maxWidth: number;
-    minHeight: number;
-    maxHeight: number;
-  };
   data?: unknown;
 }
 
 export interface CanvasElementContext {
   definition: CanvasElementDefinition;
-  presentation?: "canvas" | "tiled";
-  collapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
   navigation: SessionNavigation;
   session: SessionContext;
 }

package/apps/web/src/StartSurface.tsx

@@ -120,13 +120,13 @@ export function StartEntryLibrary({ skills, scripts, launchDisabled, onOpen, has
   const sorted = useMemo(() => [...[...skills].sort(byOrder), ...[...scripts].sort(byOrder)], [skills, scripts]);
   const tags = [...new Set(sorted.flatMap((entry) => entry.tags ?? []))].sort((a, b) => a.localeCompare(b, "de-DE"));
   const filtered = sorted.filter((entry) => (!tag || entry.tags?.includes(tag))
-    && `${entry.title} ${entry.description} ${entry.action === "skill" ? entry.category : kindLabel(entry)} ${entry.owner} ${(entry.tags ?? []).join(" ")}`
+    && `${entry.title} ${entry.description} ${entry.category ?? kindLabel(entry)} ${entry.owner} ${(entry.tags ?? []).join(" ")}`
       .toLocaleLowerCase("de-DE").includes(query.trim().toLocaleLowerCase("de-DE")));
   const selected = filtered.find((entry) => entry.id === selectedId) ?? filtered[0];
   const guided = selected && hasGuide(selected);
   const tagOptions = [{ value: "", label: "Alle Schlagworte" }, ...tags.map((value) => ({ value, label: value }))];
   const items: ListDetailItem[] = filtered.map((entry) => ({ id: entry.id, title: entry.title,
-    description: entry.description, group: entry.action === "skill" ? entry.category : technical ? "Run-Scripts" : "Abläufe",
+    description: entry.description, group: entry.category ?? (technical ? "Run-Scripts" : "Abläufe"),
     icon: entryIcon(entry), meta: technical ? kindLabel(entry) : undefined, tone: entry.action === "skill" ? "purple" : "success" }));
 
   return <ListDetail className="min-h-0 flex-1" label="Skills und Abläufe" detailLabel="Vorschau" items={items}

package/apps/web/src/ThemeSettings.tsx

@@ -25,7 +25,7 @@ export function ThemeSettings() {
         </div>
         <div className="flex-[1_1_220px]">
           <h3 className="mb-1.5 text-lg font-semibold" id="theme-settings-title">Schichtwerk</h3>
-          <p className={noteClasses}>Matte Flächen, gestapelte Tiefe und gezeichnete Konturen.</p>
+          <p className={noteClasses}>Matte Flächen und gezeichnete Konturen.</p>
         </div>
         <ToggleGroup aria-label="Schichtwerk-Farbschema" className="flex-none max-sm:w-full" disabled={!writable} size="sm" spacing={0}
           value={[preference]} variant="outline"

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

@@ -1,6 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ChevronDownIcon, ChevronUpIcon, LayoutGridIcon } from "lucide-react";
-import { canStartEntry } from "../../../../packages/ragents/src/access";
+import { canStartEntry, type AccessContext } from "../../../../packages/ragents/src/access";
+import { getStartOptions, setStartOption } from "../api";
+import { sendChatMessage, startChatEntry } from "../chat/requests";
+import { preparedRunInput } from "../run-preparation";
+import { initialStartOptionUpdates } from "../StartOptions";
 import { AccessScreen, useAccess } from "../AccessContext";
 import type { SessionInfo } from "../api";
 import { PluginChat } from "../PluginChat";
@@ -9,7 +13,7 @@ import { usePluginActivation } from "../PluginActivation";
 import { useRunReadState } from "../run-read-state";
 import { SessionList } from "../SessionList";
 import { SettingsModal } from "../SettingsModal";
-import { Alert, Button } from "../ui";
+import { Alert, Button, Spinner } from "../ui";
 import type { ColumnLocation } from "./column-location";
 import { ColumnMenu } from "./ColumnMenu";
 import { useColumnHost } from "./host";
@@ -45,25 +49,40 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
   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 [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>();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [listOpen, setListOpen] = useState(false);
   const openSettings = useCallback(() => setSettingsOpen(true), []);
-  const { sessions, unreachable, refresh } = useSessionList(readRuns && !draft);
+  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) => { setListOpen(false); setDraft({ session: newDraft(), startOptions, entryId }); }, []);
   const createRun = useCallback(() => startDraft(), [startDraft]);
+  const openRun = useCallback((id: string, startOptions?: Readonly<Record<string, unknown>>) => {
+    setListOpen(false);
+    setDraft(undefined);
+    setLaunch(undefined);
+    setRunStartOptions(startOptions);
+    setRunId(id);
+  }, []);
   const selectRun = useCallback((id: string) => { setListOpen(false); setRunId(id); }, []);
 
   useEffect(() => host.onCommand((message) => {
     if (message.type === "selectRun") {
       setDraft(undefined);
+      setLaunch(undefined);
       setListOpen(false);
+      setRunStartOptions(undefined);
       setRunId(message.runId ?? undefined);
     }
-    if (message.type === "newRun" && canCreate) startDraft(message.startOptions, message.entryId);
-  }), [canCreate, host, startDraft]);
+    if (message.type !== "newRun" || !canCreate) return;
+    // Im Panel ist ein Klick ein Klick: die Vorlage startet sofort, der freie Auftrag entsteht im Chat des neuen Runs.
+    if (host.kind !== "vscode") startDraft(message.startOptions, message.entryId);
+    else if (message.entryId === undefined) openRun(crypto.randomUUID(), message.startOptions);
+    else setLaunch({ runId: crypto.randomUUID(), entryId: message.entryId, startOptions: message.startOptions });
+  }), [canCreate, host, openRun, startDraft]);
   useEffect(() => { host.notify({ type: "ready" }); }, [host]);
   useEffect(() => { host.notify({ type: "runChanged", runId: runId ?? null }); }, [host, runId]);
   useEffect(() => {
@@ -73,6 +92,9 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [listOpen]);
 
+  if (launch) return <RunLaunch access={access} launch={launch} onCancel={() => setLaunch(undefined)} onOpenSettings={openSettings}
+    onStarted={openRun} registry={registry} />;
+
   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} />
@@ -90,8 +112,9 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
             </header>
             <main className="relative z-1 flex min-h-0 min-w-0 flex-1 @container/chat-content">
               <PluginChat
-                canvasToolbarContainer={toolsContainer}
+                toolbarContainer={toolsContainer}
                 headerContainer={headerContainer}
+                initialStartOptions={runStartOptions}
                 key={runId}
                 layout="column"
                 onViewed={runReadState.markViewed}
@@ -134,6 +157,59 @@ function ColumnPage({ initialRunId, registry }: { initialRunId: string | undefin
   );
 }
 
+interface Launch {
+  readonly runId: string;
+  readonly entryId: string;
+  readonly startOptions?: Readonly<Record<string, unknown>>;
+}
+
+/** Ein Klick auf eine Kachel der Übersicht: Startoptionen setzen, den Einstieg 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 Startvorlage 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);
+    for (const [id, value] of initialStartOptionUpdates(options, launch.startOptions)) await setStartOption(launch.runId, id, value);
+  }
+  if (entry.action === "script") await startChatEntry(launch.runId, entry.id, null);
+  else await sendChatMessage(launch.runId, preparedRunInput([], entry.prompt, undefined, entry.skill).text);
+}
+
+function RunLaunch({ launch, registry, access, onStarted, onCancel, onOpenSettings }: {
+  launch: Launch;
+  registry: PluginRegistry;
+  access: AccessContext;
+  onStarted: (runId: string) => void;
+  onCancel: () => void;
+  onOpenSettings: () => void;
+}) {
+  const [error, setError] = useState<string>();
+  const running = useRef(false);
+  useEffect(() => {
+    if (running.current) return;
+    running.current = true;
+    void launchRun(launch, registry, access).then(
+      () => onStarted(launch.runId),
+      (cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause)),
+    );
+  }, [access, launch, onStarted, registry]);
+  return (
+    <div className="flex h-full flex-col bg-[image:var(--canvas-backdrop)]">
+      <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={onOpenSettings} />
+      </header>
+      <div className="flex min-h-0 flex-1 items-center justify-center p-6">
+        {error
+          ? <Alert className="max-w-[420px] gap-3" variant="destructive"><p>{error}</p><Button onClick={onCancel} variant="outline">Zurück</Button></Alert>
+          : <p className="flex items-center gap-2 text-muted-foreground" role="status"><Spinner />Run wird gestartet ...</p>}
+      </div>
+    </div>
+  );
+}
+
 function ElementPage({ elementId, registry, runId }: { elementId: string; registry: PluginRegistry; runId: string }) {
   const host = useColumnHost();
   const readRuns = useAccess().can("runs.read");

package/apps/web/src/column/clipboard.ts

@@ -0,0 +1,64 @@
+import { isClipboardColumnMessage } 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) {
+    case "v": return "paste";
+    case "c": return "copy";
+    case "x": return "cut";
+    default: return undefined;
+  }
+};
+
+const isEditable = (element: Element | null): element is HTMLElement =>
+  element !== null && (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || (element as HTMLElement).isContentEditable === true);
+
+/**
+ * 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.
+ */
+export function installClipboardBridge(browser: Window): () => void {
+  const parent = browser.parent;
+  const pending = new Map<string, (text: string) => void>();
+
+  const onMessage = (event: MessageEvent) => {
+    if (event.source !== parent || !isClipboardColumnMessage(event.data)) return;
+    const settle = pending.get(event.data.id);
+    if (!settle) return;
+    pending.delete(event.data.id);
+    settle(event.data.text);
+  };
+
+  const read = () => new Promise<string>((resolve) => {
+    const id = crypto.randomUUID();
+    pending.set(id, resolve);
+    parent.postMessage({ type: "clipboardRead", id }, "*");
+  });
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const action = actionOf(event);
+    if (action === undefined || event.defaultPrevented) return;
+    const target = browser.document.activeElement;
+    if (action !== "copy" && !isEditable(target)) return;
+    event.preventDefault();
+    if (action !== "paste") {
+      browser.document.execCommand(action);
+      return;
+    }
+    void read().then((text) => {
+      if (!text || !isEditable(target)) return;
+      target.focus();
+      browser.document.execCommand("insertText", false, text);
+    });
+  };
+
+  browser.addEventListener("message", onMessage);
+  browser.addEventListener("keydown", onKeyDown, true);
+  return () => {
+    browser.removeEventListener("message", onMessage);
+    browser.removeEventListener("keydown", onKeyDown, true);
+  };
+}

package/apps/web/src/column/host-contract.ts

@@ -31,6 +31,10 @@ export type ColumnHostMessage =
   | { 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 ColumnClipboardMessage = { type: "clipboardRead"; id: string };
+export type ClipboardColumnMessage = { type: "clipboardText"; id: string; text: string };
+
 /** Nachrichten des Hosts an das Panel. */
 export type HostColumnMessage =
   | { type: "selectRun"; runId: string | null }
@@ -65,6 +69,12 @@ export const isColumnHostMessage = (value: unknown): value is ColumnHostMessage
   }
 };
 
+export const isColumnClipboardMessage = (value: unknown): value is ColumnClipboardMessage =>
+  isObject(value) && value.type === "clipboardRead" && isText(value.id);
+
+export const isClipboardColumnMessage = (value: unknown): value is ClipboardColumnMessage =>
+  isObject(value) && value.type === "clipboardText" && isText(value.id) && typeof value.text === "string";
+
 export const isHostColumnMessage = (value: unknown): value is HostColumnMessage => {
   if (!isObject(value)) return false;
   switch (value.type) {

package/apps/web/src/column.tsx

@@ -7,6 +7,7 @@ import { createRoot } from "react-dom/client";
 import { Button } from "./ui";
 import { AccessGate, AccessScreen } from "./AccessContext";
 import { installAccessToken } from "./access-token";
+import { installClipboardBridge } from "./column/clipboard";
 import { ColumnApp, HostLogin } from "./column/ColumnApp";
 import { parseColumnLocation } from "./column/column-location";
 import { ColumnHostProvider, createColumnHost } from "./column/host";
@@ -21,6 +22,7 @@ try {
   const location = parseColumnLocation(window.location.search);
   if (location.access !== undefined) installAccessToken(location.access);
   const host = createColumnHost(location.host, window);
+  if (location.host === "vscode") installClipboardBridge(window);
   const theme = initializeTheme(window);
   if (location.theme !== undefined) theme.setPreference(location.theme);
   host.onCommand((message) => { if (message.type === "theme") theme.setPreference(message.theme); });

package/apps/web/src/panel/LoginForm.tsx

@@ -2,13 +2,14 @@ import { useState, type FormEvent } from "react";
 import { Button, Input, Label } from "../ui";
 import type { PanelAction, TargetView } from "./contract";
 
-/** Die Anmeldung eines Ziels, direkt in seiner Karte: Benutzer und Passwort oder ein Zugangstoken. */
-export function LoginForm({ target, mode, busy, send, submitLabel }: {
+/** Die Anmeldung einer Umgebung im Dialogkörper: Benutzer und Passwort oder ein Zugangstoken. */
+export function LoginForm({ target, mode, busy, send, submitLabel, onCancel }: {
   target: TargetView;
   mode: "password" | "token";
   busy: boolean;
   send: (action: PanelAction) => void;
   submitLabel: string;
+  onCancel?: () => void;
 }) {
   const [user, setUser] = useState(target.loginUser ?? "");
   const [password, setPassword] = useState("");
@@ -26,6 +27,11 @@ export function LoginForm({ target, mode, busy, send, submitLabel }: {
         <div className="grid gap-1.5"><Label htmlFor={`user-${field}`}>Benutzer</Label><Input autoComplete="username" disabled={busy} id={`user-${field}`} onChange={(event) => setUser(event.target.value)} value={user} /></div>
         <div className="grid gap-1.5"><Label htmlFor={`password-${field}`}>Passwort</Label><Input autoComplete="current-password" disabled={busy} id={`password-${field}`} onChange={(event) => setPassword(event.target.value)} type="password" value={password} /></div>
       </>}
-    <Button className="w-full" disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>
+    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
+    <p className="text-[0.72rem] leading-normal text-muted-foreground">Die Anmeldedaten liegen im Schlüsselspeicher von VS Code; die Umgebung meldet sich danach still an.</p>
+    <div className="mt-1 flex flex-wrap justify-end gap-2">
+      {onCancel && <Button onClick={onCancel} size="sm" type="button" variant="ghost">Abbrechen</Button>}
+      <Button disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>
+    </div>
   </form>;
 }