@schlenkr/ragents 0.1.4 → 0.1.6

package/plugins/ragents.actor-programs/server/templates.ts

@@ -1,33 +1,24 @@
+import type { AppPackage } from "@ragents/host/plugin-support/actor-programs/app-project.js";
 import { controlsTemplate } from "./controls-template";
 
 export interface ActorProgramTemplate {
   id: string;
   title: string;
   description: string;
-  files: Readonly<Record<string, string>>;
+  ragents: AppPackage;
+  files: Readonly<Record<string, string>> & { readonly "package.json"?: never };
 }
 
 const blank: ActorProgramTemplate = {
   id: "blank",
   title: "Leere Mini-App",
   description: "Eine reine React-View am vorhandenen Actor ohne zusätzliche Serverfunktion.",
+  ragents: {
+    title: "Meine View",
+    description: "Eine kleine Bedienoberfläche des vorhandenen Actors.",
+    views: [{ id: "main", client: "src/client.tsx" }],
+  },
   files: {
-    "package.json": `{
-  "name": "actor-view",
-  "private": true,
-  "type": "module",
-  "ragents": {
-    "title": "Meine View",
-    "description": "Eine kleine Bedienoberfläche des vorhandenen Actors.",
-    "views": [
-      {
-        "id": "main",
-        "client": "src/client.tsx"
-      }
-    ]
-  }
-}
-`,
     "src/client.tsx": `import { createRoot } from "react-dom/client";
 import * as UI from "@ragents/client/ui";
 
@@ -48,25 +39,12 @@ const chat: ActorProgramTemplate = {
   id: "chat",
   title: "Actor-Chat",
   description: "Wiederverwendbarer Chat mit Verlauf und optionaler Eingabe an den Actor dieser View.",
+  ragents: {
+    title: "Actor-Chat",
+    description: "Zeigt das Gespräch mit einem Actor und sendet ihm Benutzereingaben.",
+    views: [{ id: "main", client: "src/client.tsx" }],
+  },
   files: {
-    "package.json": `{
-  "name": "actor-chat",
-  "private": true,
-  "type": "module",
-  "ragents": {
-    "title": "Actor-Chat",
-    "description": "Zeigt das Gespräch mit einem Actor und sendet ihm Benutzereingaben.",
-    "views": [
-      {
-        "id": "main",
-        "client": "src/client.tsx",
-        "width": 480,
-        "height": 420
-      }
-    ]
-  }
-}
-`,
     "src/client.tsx": `import { createRoot } from "react-dom/client";
 import * as UI from "@ragents/client/ui";
 import { context } from "@ragents/client";
@@ -86,24 +64,13 @@ const textAnalysis: ActorProgramTemplate = {
   id: "text-analysis",
   title: "Textanalyse",
   description: "Ein TypeScript-Actor analysiert Texte mit eigener Funktion, Zustand und React-View.",
+  ragents: {
+    title: "Textanalyse",
+    description: "Zählt Zeichen, Wörter und Zeilen und merkt sich die Zahl der Analysen.",
+    backend: "src/server.ts",
+    views: [{ id: "main", client: "src/client.tsx" }],
+  },
   files: {
-    "package.json": `{
-  "name": "text-analysis",
-  "private": true,
-  "type": "module",
-  "ragents": {
-    "title": "Textanalyse",
-    "description": "Zählt Zeichen, Wörter und Zeilen und merkt sich die Zahl der Analysen.",
-    "backend": "src/server.ts",
-    "views": [
-      {
-        "id": "main",
-        "client": "src/client.tsx"
-      }
-    ]
-  }
-}
-`,
     "src/client.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import { context, useAppState } from "@ragents/client";
@@ -200,18 +167,12 @@ const headlessCounter: ActorProgramTemplate = {
   id: "headless-counter",
   title: "Zähler ohne Oberfläche",
   description: "Ein TypeScript-Actor zählt Eingaben in seinem Zustand und bietet dieselbe Arbeit als Funktion an.",
+  ragents: {
+    title: "Zähler",
+    description: "Sammelt eingehende Texte ohne Modellaufrufe oder Oberfläche.",
+    backend: "src/server.ts",
+  },
   files: {
-    "package.json": `{
-  "name": "headless-counter",
-  "private": true,
-  "type": "module",
-  "ragents": {
-    "title": "Zähler",
-    "description": "Sammelt eingehende Texte ohne Modellaufrufe oder Oberfläche.",
-    "backend": "src/server.ts"
-  }
-}
-`,
     "src/contract.ts": `import { Type } from "typebox";
 
 const state = Type.Object({
@@ -285,24 +246,13 @@ const sharedList: ActorProgramTemplate = {
   id: "shared-list",
   title: "Gemeinsame Liste eines Actors",
   description: "Ein Actor besitzt eine Funktion und eine React-View für denselben Listenstand.",
+  ragents: {
+    title: "Gemeinsame Liste",
+    description: "Sammelt Texte aus der App und aus einem Agenten-Werkzeug in einer gemeinsamen Liste.",
+    backend: "src/server.ts",
+    views: [{ id: "main", client: "src/client.tsx" }],
+  },
   files: {
-    "package.json": `{
-  "name": "shared-list",
-  "private": true,
-  "type": "module",
-  "ragents": {
-    "title": "Gemeinsame Liste",
-    "description": "Sammelt Texte aus der App und aus einem Agenten-Werkzeug in einer gemeinsamen Liste.",
-    "backend": "src/server.ts",
-    "views": [
-      {
-        "id": "main",
-        "client": "src/client.tsx"
-      }
-    ]
-  }
-}
-`,
     "src/client.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import { context, useAppState } from "@ragents/client";
@@ -393,6 +343,11 @@ test("ergänzt Einträge ohne vorhandene Einträge zu verlieren", async () => {
 
 export const runModuleTemplates = [blank, chat, controlsTemplate, textAnalysis, headlessCounter, sharedList] as const;
 
+export const templateFiles = (template: ActorProgramTemplate, name: string): Readonly<Record<string, string>> => ({
+  "package.json": `${JSON.stringify({ name, private: true, type: "module", ragents: template.ragents }, null, 2)}\n`,
+  ...template.files,
+});
+
 export const templateById = (id: string): ActorProgramTemplate => {
   const template = runModuleTemplates.find((candidate) => candidate.id === id);
   if (!template) throw new Error(`Unbekannte Actor-Programm-Vorlage ${id}. Gültig: ${runModuleTemplates.map((entry) => entry.id).join(", ")}.`);

package/plugins/ragents.actor-programs/server/test-report.ts

@@ -0,0 +1,106 @@
+import { realpath } from "node:fs/promises";
+
+/** A node:test reporter that writes one JSON line per passed test, failed test and stderr line of a test file. */
+const reporterSource = `
+import { inspect } from "node:util";
+const shown = (value) => inspect(value, { depth: 4, breakLength: Infinity, maxArrayLength: 20, maxStringLength: 200 }).slice(0, 300);
+export default async function* (source) {
+  for await (const { type, data } of source) {
+    if (type === "test:pass" && data.details?.type !== "suite") yield JSON.stringify({ kind: "pass" }) + "\\n";
+    if (type === "test:fail" && data.details?.type !== "suite" && data.details?.error?.failureType !== "subtestsFailed") {
+      const error = data.details.error;
+      const cause = error.cause instanceof Error ? error.cause : error;
+      const assertion = cause.code === "ERR_ASSERTION";
+      yield JSON.stringify({ kind: "fail", name: data.name, file: data.file ?? null, line: data.line ?? null, column: data.column ?? null,
+        message: String(cause.message), generated: cause.generatedMessage === true, stack: String(cause.stack ?? ""),
+        ...(assertion ? { expected: shown(cause.expected), actual: shown(cause.actual) } : {}) }) + "\\n";
+    }
+    if (type === "test:stderr") yield JSON.stringify({ kind: "stderr", file: data.file ?? null, message: String(data.message) }) + "\\n";
+  }
+}
+`;
+
+export const testReporterArgument = `--test-reporter=data:text/javascript,${encodeURIComponent(reporterSource)}`;
+
+type TestRecord =
+    | { kind: "pass" }
+    | { kind: "fail"; name: string; file: string | null; line: number | null; column: number | null; message: string; generated: boolean; stack: string; expected?: string; actual?: string }
+    | { kind: "stderr"; file: string | null; message: string };
+
+const maxDetailed = 10;
+const frameLine = /^\s+at /;
+
+/** The lines of an error output that name the error, without stack frames, code excerpts and the Node version. */
+const errorLines = (lines: readonly string[]): string[] => {
+    const meaningful = lines.map((line) => line.trimEnd()).filter((line) => line.trim() !== "" && !frameLine.test(line) && !/^Node\.js v\d/.test(line) && !/^\s*\^+$/.test(line));
+    const named = meaningful.filter((line) => /^[A-Za-z]*Error\b/.test(line));
+    return (named.length > 0 ? named : meaningful.slice(-5)).slice(0, 5);
+};
+
+/** Collects the reporter lines of a test run and turns them into a short failure report: counts, and per failed test its name, message, expected and actual values and its place in the program. */
+export const createTestReport = async (directory: string) => {
+    const roots = [...new Set([directory, await realpath(directory)])].sort((left, right) => right.length - left.length);
+    const relative = (text: string): string => roots.reduce((result, root) => result.replaceAll(`file://${root}/`, "").replaceAll(`${root}/`, ""), text);
+    const failures: Extract<TestRecord, { kind: "fail" }>[] = [];
+    const stderrByFile = new Map<string, string[]>();
+    const unparsed: string[] = [];
+    let passed = 0;
+    let failed = 0;
+    let pending = "";
+
+    const record = (line: string): void => {
+        if (line.trim() === "") return;
+        let parsed: TestRecord;
+        try {
+            parsed = JSON.parse(line) as TestRecord;
+        } catch {
+            unparsed.push(line);
+            return;
+        }
+        if (parsed.kind === "pass") passed += 1;
+        if (parsed.kind === "fail") {
+            failed += 1;
+            if (failures.length < maxDetailed) failures.push(parsed);
+        }
+        if (parsed.kind === "stderr") {
+            const lines = stderrByFile.get(parsed.file ?? "") ?? [];
+            stderrByFile.set(parsed.file ?? "", [...lines, ...parsed.message.split("\n")].slice(-50));
+        }
+    };
+
+    const placeOf = (failure: Extract<TestRecord, { kind: "fail" }>): string => {
+        const frame = failure.stack.split("\n").filter((line) => frameLine.test(line)).map(relative)
+            .map((line) => /\(?([^\s()]+:\d+:\d+)\)?\s*$/.exec(line)?.[1])
+            .find((place) => place !== undefined && !place.startsWith("/") && !place.startsWith("node:") && !place.includes("node_modules/"));
+        const declared = failure.file === null ? failure.name : `${relative(failure.file)}${failure.line === null ? "" : `:${failure.line}:${failure.column ?? 1}`}`;
+        return frame ?? declared;
+    };
+
+    const describe = (failure: Extract<TestRecord, { kind: "fail" }>): string => {
+        const fileOutput = failure.message === "test failed" && failure.file !== null ? stderrByFile.get(failure.file) ?? stderrByFile.get(relative(failure.file)) : undefined;
+        const message = fileOutput ? errorLines(fileOutput).join("; ") : failure.generated ? failure.message.split("\n")[0]!.replace(/:$/, "") : failure.message.trim().slice(0, 500);
+        const values = failure.expected === undefined || failure.expected === failure.actual ? "" : ` - erwartet ${failure.expected}, tatsächlich ${failure.actual}`;
+        return `- ${failure.name} (${placeOf(failure)}): ${relative(message)}${relative(values)}`;
+    };
+
+    return {
+        stdout: (chunk: string): void => {
+            const lines = (pending + chunk).split("\n");
+            pending = lines.pop() ?? "";
+            lines.forEach(record);
+        },
+        report: (name: string, outcome: { code: number | null; timedOut: boolean; stderr: string }): string => {
+            record(pending);
+            pending = "";
+            const summary = outcome.timedOut
+                ? `Tests für ${name} nach Zeitüberschreitung abgebrochen: ${passed} bestanden, ${failed} fehlgeschlagen.`
+                : `Tests für ${name} fehlgeschlagen: ${passed} bestanden, ${failed} fehlgeschlagen.`;
+            const details = failures.map(describe);
+            const more = failed > failures.length ? [`... und ${failed - failures.length} weitere`] : [];
+            const withoutResult = failed === 0
+                ? [`Der Testlauf endete${outcome.code === null ? "" : ` mit Code ${outcome.code}`} ohne fehlgeschlagenen Test:`, ...errorLines([...unparsed, ...outcome.stderr.split("\n")]).map(relative)]
+                : [];
+            return [summary, ...details, ...more, ...withoutResult].join("\n");
+        },
+    };
+};

package/plugins/ragents.actor-programs/server/tool-contributor.ts

@@ -1,6 +1,6 @@
 import { Type } from "typebox";
-import { defineRunFunction, defineToolAvailability, holdsUsable, type RunFunction, type ToolContributor } from "@aicontainer/ragents";
-import { toolDescriptorFrom } from "@aicontainer/server/plugin-support/agent-tool.js";
+import { defineRunFunction, defineToolAvailability, holdsUsable, type RunFunction, type ToolContributor } from "@ragents/engine";
+import { toolDescriptorFrom } from "@ragents/host/plugin-support/agent-tool.js";
 import type { ActorProgramRuntime } from "./runtime.js";
 import type { createProjectDiagnostics } from "./project-diagnostics.js";
 const metadata = [
@@ -8,7 +8,7 @@ const metadata = [
     { name: "actor_program_activate", label: "Activate Actor Program", description: "Typecheck, build and test a package, then activate its functions and optional views.", longDescription: "actor self or @handle attaches to an existing actor; omitted creates a TypeScript actor for a backend, or attaches static views to self." },
     { name: "actor_program_list", label: "List Actor Programs", description: "List active actor packages, functions and views." },
     { name: "actor_program_remove", label: "Remove Actor Program", description: "Detach functions and views and stop the backend.", longDescription: "A TypeScript actor is stopped; an LLM actor retains its agent behavior." },
-    { name: "actor_view_set_visibility", label: "Show or hide Actor View", description: "Set Canvas visibility by package-name/view-key or @handle/view-key.", longDescription: "Use names you chose; the server resolves the view ID. A unique view title also works." },
+    { name: "actor_view_set_visibility", label: "Show or hide Actor View", description: "Set surface visibility by package-name/view-key or @handle/view-key.", longDescription: "Use names you chose; the server resolves the view ID. A unique view title also works." },
     { name: "actor_program_diagnostics", label: "Actor Program Diagnostics", description: "Read the last project diagnostics.", longDescription: "Changed errors are automatically supplied before the next model request." },
 ] as const;
 export const actorProgramManagementToolNames = metadata.map((entry) => entry.name);
@@ -20,7 +20,7 @@ const managementTools = (runtime: ActorProgramRuntime, diagnostics: Diagnostics)
     defineRunFunction({ ...metadata[1], schema: Type.Object({ name, actor: Type.Optional(Type.String()) }, { additionalProperties: false }), resultSchema: Type.Object({ name: Type.String(), actor: Type.String(), views: Type.Number(), active: Type.Literal(true) }, { additionalProperties: false }), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope, id, input) => runtime.activate(scope.context(id), scope.caller.runId, input.name, scope.signal, input.actor) }),
     defineRunFunction({ ...metadata[2], schema: Type.Object({}, { additionalProperties: false }), resultSchema: Type.Array(Type.Object({ name: Type.String(), actor: Type.String(), functions: Type.Array(Type.String()), views: Type.Array(Type.Object({ name: Type.String(), title: Type.String(), visible: Type.Boolean() })) })), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope) => runtime.list(scope.caller.runId) }),
     defineRunFunction({ ...metadata[3], schema: Type.Object({ name }, { additionalProperties: false }), resultSchema: Type.Object({ removed: Type.String() }, { additionalProperties: false }), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope, id, input) => runtime.remove(scope.context(id), scope.caller.runId, input.name) }),
-    defineRunFunction({ ...metadata[4], schema: Type.Object({ view: Type.String({ minLength: 1, description: "package-name/view-key or @handle/view-key of an activated view, without the Canvas entity prefix app:. No generated IDs needed." }), visible: Type.Boolean() }, { additionalProperties: false }), resultSchema: Type.Object({ view: Type.String(), visible: Type.Boolean() }, { additionalProperties: false }), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope, id, input) => runtime.setVisibility(scope.context(id), scope.caller.runId, input.view, input.visible) }),
+    defineRunFunction({ ...metadata[4], schema: Type.Object({ view: Type.String({ minLength: 1, description: "package-name/view-key or @handle/view-key of an activated view, without the surface entity prefix app:. No generated IDs needed." }), visible: Type.Boolean() }, { additionalProperties: false }), resultSchema: Type.Object({ view: Type.String(), visible: Type.Boolean() }, { additionalProperties: false }), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope, id, input) => runtime.setVisibility(scope.context(id), scope.caller.runId, input.view, input.visible) }),
     defineRunFunction({ ...metadata[5], schema: Type.Object({ name: Type.Optional(name) }, { additionalProperties: false }), resultSchema: Type.String(), available: actorProgramToolsAvailable, executionMode: "sequential", run: (scope, _id, input) => diagnostics.latest(scope.caller.runId, scope.caller.actorId, input.name) }),
 ];
 export const createActorProgramToolContributors = (runtime: ActorProgramRuntime, diagnostics: Diagnostics): readonly ToolContributor[] => [

package/plugins/ragents.actor-programs/summary.hbs

@@ -2,7 +2,7 @@
 
 Use TypeScript snippets for one-time work. Actors can own functions, shared state and React views. Create the closest template with
 `actor_program_create`, read its existing files in `@actors/<name>/`, adapt what is needed,
-then `actor_program_activate`. Reuse its code and tests; Bash uses `$RAGENTS_ACTORS_DIR`.
+then `actor_program_activate`. Reuse its code and tests; `bash` runs there with `cwd: "@actors/<name>"`.
 Call these functions through `context.functions` in `typescript_eval`; `typescript_api` gives
 the current contracts. Published actor functions join that same API during the current turn.
 Bind existing actors with `self` or `@handle`. A backend without a binding creates a TypeScript

package/plugins/ragents.actor-programs/web/ActorViewFrame.tsx

@@ -1,14 +1,15 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { cn } from "@aicontainer/web/ui";
-import { useResolvedTheme } from "@aicontainer/web/theme";
+import { hostInputEnabled, isRunPanelKeyboardMessage, relayFrameInput } from "@ragents/web/run-panel/input-bridge";
+import { useAccess } from "@ragents/web/AccessContext";
+import { cn } from "@ragents/web/ui";
+import { useResolvedTheme } from "@ragents/web/theme";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { RunApp, RunAppInvocation, ActorProgramsApi } from "./api";
 import { latestInvocation } from "./invocations";
-import type { SessionContext } from "@aicontainer/web/PluginRegistry";
-import { sendActorMessage } from "@aicontainer/plugins/ragents.orchestration/web/api";
+import type { SessionContext } from "@ragents/web/PluginRegistry";
+import { sendActorMessage } from "@ragents/web/api";
 import { chatSnapshotOf, resolveChatActor } from "./chat-state";
-import { getAttachmentCapabilities } from "@aicontainer/web/chat/useAttachmentCapabilities";
-import type { ChatSnapshot } from "../client-ui/contracts";
+import { getAttachmentCapabilities } from "@ragents/web/chat/useAttachmentCapabilities";
+import type { ChatSnapshot } from "@ragents/web/actor-programs/client-ui/contracts";
 import {
   RUN_APP_BRIDGE_VERSION,
   RUN_APP_CHAT_ACK,
@@ -201,6 +202,9 @@ export function ActorViewFrame({
     installedApp: RunApp,
   ) => {
     if (generation !== bridgeGenerationRef.current || port !== portRef.current) return;
+    if (relayFrameInput(window, value, (message) => {
+      if (generation === bridgeGenerationRef.current && port === portRef.current) port.postMessage(message);
+    })) return;
     const message = value as { type?: unknown; version?: unknown } | null;
     if (message?.type === RUN_APP_CONNECTED && message.version === RUN_APP_BRIDGE_VERSION) {
       bridgeConnectedRef.current = true;
@@ -290,6 +294,7 @@ export function ActorViewFrame({
       type: RUN_APP_READY,
       version: RUN_APP_BRIDGE_VERSION,
       theme: themeRef.current,
+      hostInput: hostInputEnabled(window),
       app: {
         id: installedApp.id,
         actorId: installedApp.actorId,
@@ -319,11 +324,11 @@ export function ActorViewFrame({
       else pendingPort = port;
     };
     const receiveReady = (event: MessageEvent<unknown>) => {
-      const data = event.data as { type?: unknown; version?: unknown; token?: unknown } | null;
+      const data = event.data as { type?: unknown; version?: unknown; token?: unknown; keyboard?: unknown } | null;
       if (event.source === frame.contentWindow && event.origin === "null"
         && data?.type === "ragents.app.escape" && data.version === RUN_APP_BRIDGE_VERSION
         && data.token === bridgeToken) {
-        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
+        window.dispatchEvent(new KeyboardEvent("keydown", { ...(isRunPanelKeyboardMessage(data.keyboard) ? data.keyboard.event : { key: "Escape" }), bubbles: true, cancelable: true }));
         return;
       }
       if (event.source !== frame.contentWindow
@@ -453,7 +458,7 @@ export function ActorViewFrame({
           className={cn("absolute inset-0 h-full w-full min-h-0 min-w-0 border-0", compact ? "bg-transparent" : "bg-background")}
           ref={iframeRef}
           referrerPolicy="no-referrer"
-          sandbox="allow-scripts allow-downloads"
+          sandbox="allow-scripts allow-forms allow-downloads"
           aria-label={app.title}
           title=""
         />

package/plugins/ragents.actor-programs/web/AppsPanel.tsx

@@ -1,7 +1,7 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
+import { useAccess } from "@ragents/web/AccessContext";
 import { ArrowLeftIcon, LayoutGridIcon } from "lucide-react";
-import { Alert, Badge, Button, cn, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Spinner } from "@aicontainer/web/ui";
-import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import { Alert, Badge, Button, cn, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Spinner } from "@ragents/web/ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@ragents/web/Toolbar";
 import {
   useCallback,
   useEffect,
@@ -10,16 +10,20 @@ import {
   useState,
   type PropsWithChildren,
 } from "react";
-import { QuestionCard } from "@aicontainer/web/chat/QuestionCard";
-import { ACTOR_PROGRAMS_STATE_ID } from "../contract";
-import type {
-  SessionContext,
-  SessionHeaderContext,
-  WorkspaceTabContext,
-} from "@aicontainer/web/PluginRegistry";
-import { runViewFrom, type RunAction } from "@aicontainer/plugins/ragents.orchestration/web/contract";
-import { useStageEntities } from "@aicontainer/plugins/ragents.orchestration/web/canvas-stage";
-import { CANVAS_TILE_DRAG_TYPE } from "@aicontainer/plugins/ragents.orchestration/web/tile-docking";
+import { askPayloadOf, ASK_PLUGIN_ID } from "@ragents/plugins/ragents.ask/ask-payload";
+import { answerQuestion } from "@ragents/plugins/ragents.ask/web/api";
+import { QuestionCard } from "@ragents/plugins/ragents.ask/web/QuestionCard";
+import { ACTOR_PROGRAMS_STATE_ID } from "@ragents/host/plugin-support/actor-programs/contract";
+import {
+  useSurfaceController,
+  type SessionContext,
+  type SessionHeaderContext,
+  type WorkspaceTabContext,
+} from "@ragents/web/PluginRegistry";
+import { runViewFrom, type RunAction } from "@ragents/web/run-view";
+import { useSurfaceEntities } from "@ragents/plugins/ragents.orchestration/web/surface-entities";
+import { SURFACE_TILE_DRAG_TYPE } from "@ragents/plugins/ragents.orchestration/web/tile-docking";
+import { ProgramSlotContext, type ProgramSlot } from "@ragents/plugins/ragents.orchestration/web/program-slot";
 import {
   type RunApp,
   type RunAppInvocation,
@@ -28,7 +32,7 @@ import {
   type RunScriptTool,
 } from "./api";
 import type { JsonValue } from "./bridge";
-import { ProgramSource } from "./ProgramSource";
+import { actorProgramSourceView, ProgramSource } from "./ProgramSource";
 import { FunctionForm } from "./FunctionForm";
 import { ExpandIcon } from "./ExpandIcon";
 import { actorProgramsRevision } from "./state-revision";
@@ -82,7 +86,7 @@ export function ActorProgramsProvider({
   const closeFullscreen = useCallback(() => setFullscreen(undefined), []);
   const openFullscreen = useCallback((appId: string) => {
     if (!actorProgramApps(session).some((app) => app.id === appId && app.app.visible !== false)) {
-      throw new Error("Die Actor-Ansicht ist nicht auf dem Canvas verfügbar.");
+      throw new Error("Die Actor-Ansicht ist nicht auf der Fläche verfügbar.");
     }
     setFullscreen({ runId, appId });
   }, [runId, session]);
@@ -176,7 +180,18 @@ export function ActorProgramsProvider({
     refresh,
     runId,
   }), [api, error, fullscreenAppId, invoke, listing, openFullscreen, closeFullscreen, refresh, runId]);
-  return <ActorProgramsContext.Provider value={value}>{children}</ActorProgramsContext.Provider>;
+  const slot = useMemo<ProgramSlot>(() => ({
+    runId,
+    needsAnswer: (session, appId) => {
+      const app = listing?.apps.find((candidate) => candidate.id === appId);
+      return app !== undefined && pendingConfirmationFor(session, app) !== undefined;
+    },
+    openFullscreen,
+    source: (view, actorId) => actorProgramSourceView(api, view, actorId),
+  }), [api, listing, openFullscreen, runId]);
+  return <ActorProgramsContext.Provider value={value}>
+    <ProgramSlotContext.Provider value={slot}>{children}</ProgramSlotContext.Provider>
+  </ActorProgramsContext.Provider>;
 }
 
 export const actorProgramApps = (session: SessionContext) => actorProgramViews(session.runView);
@@ -190,7 +205,7 @@ export const pendingConfirmationFor = (
   const invocationIds = new Set(app.invocations
     .filter((invocation) => ACTIVE_STATUSES.has(invocation.status))
     .map((invocation) => invocation.id));
-  return view.actions.find((action) => action.kind === "question"
+  return view.actions.find((action) => action.owner === ASK_PLUGIN_ID
     && action.status === "pending"
     && action.askedBy === view.ownerId
     && action.parameters.source === ACTOR_PROGRAMS_STATE_ID
@@ -207,7 +222,7 @@ export function HostConfirmation({ action, session }: { action: RunAction; sessi
     setBusy(true);
     setError(undefined);
     try {
-      await session.respond(action.id, text);
+      await answerQuestion(session.session.id, action.id, text);
     } catch (caught) {
       setError(caught instanceof Error ? caught.message : String(caught));
       setBusy(false);
@@ -224,12 +239,8 @@ export function HostConfirmation({ action, session }: { action: RunAction; sessi
         ? <p className="text-xs text-muted-foreground">Antwort wird verarbeitet</p>
         : (
           <QuestionCard
-            onAnswer={access.can("runs.write") ? (text) => void answer(text) : undefined}
-            question={{
-              callId: action.id,
-              options: action.question?.options ?? [],
-              multi: action.question?.multi ?? false,
-            }}
+            onAnswer={access.can("runs.write") ? (text: string) => void answer(text) : undefined}
+            question={askPayloadOf(action.payload) ?? { question: action.title, options: [], multi: false }}
             text={action.title}
           />
         )}
@@ -274,7 +285,7 @@ export function ToolsPanel({ active, navigation, selection, session }: Workspace
         <EmptyHeader>
           <EmptyMedia><IconTools /></EmptyMedia>
           <EmptyTitle>Funktion nicht mehr verfügbar</EmptyTitle>
-          <EmptyDescription>Das ausgewählte Actor-Funktion ist in diesem Lauf nicht mehr installiert.</EmptyDescription>
+          <EmptyDescription>Das ausgewählte Actor-Funktion ist in diesem Run nicht mehr installiert.</EmptyDescription>
         </EmptyHeader>
         <EmptyContent>
           <Button onClick={() => navigation.openTab(RUN_TOOLS_TAB_ID, null)} variant="outline">
@@ -334,7 +345,7 @@ export function ToolsPanel({ active, navigation, selection, session }: Workspace
         <EmptyHeader>
           <EmptyMedia><IconTools /></EmptyMedia>
           <EmptyTitle>Noch keine Funktionen</EmptyTitle>
-          <EmptyDescription>Von Agenten erstellte Actor-Funktionen dieses Laufs erscheinen hier.</EmptyDescription>
+          <EmptyDescription>Von Agenten erstellte Actor-Funktionen dieses Runs erscheinen hier.</EmptyDescription>
         </EmptyHeader>
       </Empty>
     );
@@ -365,9 +376,11 @@ export function ToolsPanel({ active, navigation, selection, session }: Workspace
   );
 }
 
-export function ActorProgramsHeader({ navigation, session }: SessionHeaderContext) {
+/** Ein Klick auf eine Mini-App wählt ihre Kachel auf der Fläche; die Fläche ist der Flächen-Controller des Orchestrierungs-Plugins. */
+export function ActorProgramsHeader({ session }: SessionHeaderContext) {
   const canArrange = useAccess().can("runs.inspect");
-  const stage = useStageEntities(session.session.id);
+  const surface = useSurfaceController();
+  const stage = useSurfaceEntities(session.session.id);
   const { closeFullscreen, fullscreenAppId, openFullscreen } = useActorPrograms();
   const apps = actorProgramApps(session).filter((app) => app.app.visible !== false);
   if (apps.length === 0) return null;
@@ -384,11 +397,15 @@ export function ActorProgramsHeader({ navigation, session }: SessionHeaderContex
           draggable={canArrange}
           onDragStart={(event) => {
             if (!canArrange) { event.preventDefault(); return; }
-            event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, `app:${app.id}`);
+            event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, `app:${app.id}`);
             event.dataTransfer.effectAllowed = "move";
             closeFullscreen();
           }}
-          onClick={() => { closeFullscreen(); navigation.revealEntity({ type: "run-app", id: app.id }); }}
+          onClick={() => {
+            if (!surface) throw new Error("Die App-Zugänge brauchen den Flächen-Controller des Orchestrierungs-Plugins.");
+            closeFullscreen();
+            surface.acceptSelection({ type: "run-app", id: app.id });
+          }}
           aria-label={`Mini-App: ${app.title} von @${app.actorHandle}`}
           title={`Mini-App: ${app.title} von @${app.actorHandle}${canArrange ? ". Zum Andocken auf eine Kachel ziehen." : ""}`}
           type="button"

package/plugins/ragents.actor-programs/web/EmbeddedApps.tsx

@@ -1,19 +1,17 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { cn, Spinner } from "@aicontainer/web/ui";
-import { isRecord } from "@aicontainer/web/lib/guards";
-import { runActorFrom } from "@aicontainer/plugins/ragents.orchestration/web/contract";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Spinner } from "@ragents/web/ui";
+import { isRecord } from "@ragents/web/lib/guards";
+import { runActorFrom } from "@ragents/web/run-view";
 import type {
-  CanvasElementContext,
-  CanvasElementDefinition,
+  SurfaceElementContext,
+  SurfaceElementDefinition,
   CardSectionContext,
   SessionContext,
-} from "@aicontainer/web/PluginRegistry";
+} from "@ragents/web/PluginRegistry";
 import { HostConfirmation, pendingConfirmationFor, actorProgramApps, useActorPrograms } from "./AppsPanel";
 import { ActorViewFrame } from "./ActorViewFrame";
 import { FunctionForm } from "./FunctionForm";
 
-const cardClass = "flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-panel border border-glass-edge bg-glass-app shadow-card backdrop-blur-[8px] in-data-[surface=material]:rounded-[inherit] in-data-[surface=material]:border-0 in-data-[surface=material]:bg-transparent in-data-[surface=material]:shadow-none in-data-[surface=material]:backdrop-filter-none";
-
 export function ActorProgramToolCardSection({ actor, session }: CardSectionContext) {
   const inspect = useAccess().can("runs.inspect");
   const { listing } = useActorPrograms();
@@ -33,15 +31,15 @@ export function ActorProgramToolCardSection({ actor, session }: CardSectionConte
   );
 }
 
-export const actorProgramCanvasElements = (session: SessionContext): readonly CanvasElementDefinition[] =>
-  actorProgramApps(session).flatMap((module): CanvasElementDefinition[] => {
+export const actorProgramSurfaceElements = (session: SessionContext): readonly SurfaceElementDefinition[] =>
+  actorProgramApps(session).flatMap((module): SurfaceElementDefinition[] => {
     const rawPlacements = module.app.placements;
     const placement = Array.isArray(rawPlacements) ? rawPlacements.find((entry) => isRecord(entry) && entry.kind === "canvas") : undefined;
-    const canvas = isRecord(placement) ? placement : undefined;
-    if (canvas && typeof canvas.anchorActorId !== "string") {
-      throw new Error(`Die Canvas-Platzierung der Actor-Ansicht ${module.title} ist ungültig`);
+    const surface = isRecord(placement) ? placement : undefined;
+    if (surface && typeof surface.anchorActorId !== "string") {
+      throw new Error(`Die Flächenplatzierung der Actor-Ansicht ${module.title} ist ungültig`);
     }
-    if (canvas && canvas.anchorActorId !== module.actorId) throw new Error(`Die Ansicht ${module.title} gehört zu @${module.actorHandle}.`);
+    if (surface && surface.anchorActorId !== module.actorId) throw new Error(`Die Ansicht ${module.title} gehört zu @${module.actorHandle}.`);
     return [{
       id: module.id,
       title: module.title,
@@ -52,7 +50,7 @@ export const actorProgramCanvasElements = (session: SessionContext): readonly Ca
     }];
   });
 
-export function ActorProgramCanvasElement({ definition, session }: CanvasElementContext) {
+export function ActorProgramSurfaceElement({ definition, session }: SurfaceElementContext) {
   const { api, invoke, listing, runId } = useActorPrograms();
   const app = listing?.apps.find((candidate) => candidate.id === definition.id);
   const confirmation = app ? pendingConfirmationFor(session, app) : undefined;
@@ -74,7 +72,7 @@ export function ActorProgramCanvasElement({ definition, session }: CanvasElement
     </div>
   );
   return (
-    <article aria-label={title} className={cn(cardClass, "w-full rounded-none border-0 bg-transparent shadow-none backdrop-filter-none")}>
+    <article aria-label={title} className="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden [&>[data-slot=host-confirmation]]:max-h-[65%] [&>[data-slot=host-confirmation]]:flex-[0_1_auto] [&>[data-slot=host-confirmation]]:overflow-auto">
         {confirmation && <HostConfirmation action={confirmation} key={confirmation.id} session={session} />}
         {frame}

package/plugins/ragents.actor-programs/web/FullscreenHost.tsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { XIcon } from "lucide-react";
-import type { SessionContext } from "@aicontainer/web/PluginRegistry";
-import { Button, Dialog, DialogContent, DialogTitle } from "@aicontainer/web/ui";
+import type { SessionContext } from "@ragents/web/PluginRegistry";
+import { Button, Dialog, DialogContent, DialogTitle } from "@ragents/web/ui";
 import { HostConfirmation, pendingConfirmationFor, actorProgramApps, useActorPrograms } from "./AppsPanel";
 import { ActorViewFrame } from "./ActorViewFrame";
 
@@ -15,7 +15,7 @@ export function FullscreenHost({ session }: { session: SessionContext }) {
   const title = entry.title;
   const confirmation = app ? pendingConfirmationFor(session, app) : undefined;
   return <Dialog key={`${runId}:${fullscreenAppId}`} open onOpenChange={(open) => { if (!open) closeFullscreen(); }}>
-    <DialogContent className="h-[calc(100%-2*clamp(16px,2vw,24px))] w-[calc(100%-2*clamp(16px,2vw,24px))] gap-0 bg-background p-0" initialFocus={closeRef} scope="canvas" showCloseButton={false} size="full">
+    <DialogContent className="h-[calc(100%-2*clamp(16px,2vw,24px))] w-[calc(100%-2*clamp(16px,2vw,24px))] gap-0 bg-background p-0" initialFocus={closeRef} scope="surface" showCloseButton={false} size="full">
     <header className="flex flex-none items-center gap-3 border-b border-border bg-card py-2 pr-3 pl-4">
       <DialogTitle className="min-w-0 flex-1 truncate text-[0.9rem]" render={<h2 />}>{title}</DialogTitle>
       <Button aria-label={`${title} Vollansicht schließen`} className="rounded-full" onClick={closeFullscreen} ref={closeRef} size="icon" title={`${title} Vollansicht schließen`} variant="outline"><XIcon /></Button>

package/plugins/ragents.actor-programs/web/FunctionForm.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, type FormEvent } from "react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Button, cn, Input, Textarea } from "@aicontainer/web/ui";
-import type { SessionContext } from "@aicontainer/web/PluginRegistry";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Button, cn, Input, Textarea } from "@ragents/web/ui";
+import type { SessionContext } from "@ragents/web/PluginRegistry";
 import type { RunAppInvocation, RunScriptTool } from "./api";
 import { HostConfirmation, pendingConfirmationFor, useActorPrograms } from "./AppsPanel";
 import { invokeActorFunction } from "./function-call";