@schlenkr/ragents 0.1.5 → 0.1.7

package/plugins/ragents.orchestration/web/ExecutionsPanel.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { WorkspaceTabContext } from "@aicontainer/web/PluginRegistry";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { Alert, AlertDescription, Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@aicontainer/web/ui";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import { rpc } from "@aicontainer/web/rpc";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { WorkspaceTabContext } from "@ragents/web/PluginRegistry";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { Alert, AlertDescription, Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ragents/web/ui";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
 import { executionDuration, executionEventsFrom, executionStatusLabel, filterExecutions, projectExecutions, type ExecutionStatus, type TypeScriptExecution } from "./executions";
-import { runViewFrom, type RunView } from "./run-view";
+import { runViewFrom, type RunView } from "@ragents/web/run-view";
 
 export const EXECUTIONS_TAB_ID = "ragents.orchestration.executions";
 

package/plugins/ragents.orchestration/web/FlowInspector.tsx

@@ -1,11 +1,10 @@
 import { ArrowLeftIcon, WrenchIcon } from "lucide-react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import { Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyTitle, Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@aicontainer/web/ui";
+import { useAccess } from "@ragents/web/AccessContext";
+import { Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyTitle, Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@ragents/web/ui";
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { ActorChat } from "./ActorChat";
 import { ActorChatControls } from "./ActorChatControls";
-import { QuestionCard } from "@aicontainer/web/chat/QuestionCard";
-import type { Message } from "@aicontainer/web/chat/types";
+import type { Message } from "quassel/events";
 import {
   isPendingRunActorInput,
   runArtifactContentUrl,
@@ -18,16 +17,14 @@ import {
   type RunTurn,
   type RunUsage,
   type RunView,
-} from "./run-view";
-import { actorInputLabel } from "./actor-conversation";
+} from "@ragents/web/run-view";
+import { actorInputLabel } from "@ragents/web/actor-conversation";
 import { resolveAction, restartActor, stopActor } from "./api";
-import { formatBytes } from "@aicontainer/web/lib/format";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { thinkingLabel } from "@aicontainer/web/lib/labels";
+import { formatBytes } from "@ragents/web/lib/format";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { thinkingLabel } from "@ragents/web/lib/labels";
 import { formatTime } from "./format";
-import { useOptionalActorPrograms } from "@aicontainer/plugins/ragents.actor-programs/web/context";
-import { actorProgramSourceReference } from "@aicontainer/plugins/ragents.actor-programs/web/program-state";
-import { ProgramSource } from "@aicontainer/plugins/ragents.actor-programs/web/ProgramSource";
+import { useProgramSlot } from "./program-slot";
 
 export interface FlowSelection {
   type: "actor" | "input" | "turn" | "subscription" | "action" | "artifact";
@@ -46,7 +43,7 @@ interface FlowInspectorProps {
   conversationError?: string;
   primaryRunning: boolean;
   /** Anzeigefläche für den gemerkten Detailgrad; das Popout meldet sich getrennt vom Seiteninspector. */
-  chatSurface?: string;
+  chatDisplay?: string;
 }
 
 const inspectorClass = "flex h-full min-h-0 flex-col bg-card";
@@ -306,28 +303,11 @@ function ActionCard({ action, runId, onError }: { action: RunAction; runId: stri
     }
   };
 
-  if (action.kind === "question" && action.question) {
-    return (
-      <div className={actionClass}>
-        {action.description && <p>{action.description}</p>}
-        <QuestionCard
-          onAnswer={writable ? (text) => void resolve("approved", text) : undefined}
-          question={{ callId: action.id, options: action.question.options, multi: action.question.multi }}
-          text={action.title}
-        />
-        <div className="mt-1 flex justify-end gap-1.5">
-          <Button disabled={!writable || busy} onClick={() => void resolve("dismissed", undefined)} size="sm" variant="outline">
-            Verwerfen
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className={actionClass}>
       <strong>{action.title}</strong>
       {action.description && <p>{action.description}</p>}
+      {action.owner && <p>wartet auf Eingabe - {action.owner}</p>}
       {action.input && (
         <Input
           className="my-1.5 text-[0.76rem]"
@@ -364,11 +344,11 @@ function SourceListing({ handle, source }: { handle: string; source: string }) {
 
 function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: RunActor; index: RunIndex }) {
   const access = useAccess();
-  const programs = useOptionalActorPrograms();
+  const programs = useProgramSlot();
   const writable = access.can("runs.write");
   const inspect = access.can("runs.inspect");
   const view = index.view;
-  const program = inspect && programs?.runId === view.id ? actorProgramSourceReference(view, actor.id) : undefined;
+  const programSource = inspect && programs?.runId === view.id ? programs.source(view, actor.id) : undefined;
   const [error, setError] = useState<string>();
   const inputs = view.inputs.filter((entry) => entry.actorId === actor.id).sort((left, right) => left.sequence - right.sequence);
   const turns = view.turns.filter((entry) => entry.actorId === actor.id).sort((left, right) => left.startedAt.localeCompare(right.startedAt));
@@ -390,7 +370,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
 
   const config = driver && driver.kind !== "manual" ? driver.config : undefined;
   const sections: SectionTab[] = [
-    { id: "info", label: "Info: Modell und Laufdetails", icon: <SectionIcon kind="info" />, content: (
+    { id: "info", label: "Info: Modell und Run-Details", icon: <SectionIcon kind="info" />, content: (
       <div className={statusClass}>
         {lifecycle && <StatusPill status={lifecycle} />}
         <span>{primary ? "Primärer Actor" : ACTOR_KIND_LABELS[actor.kind]}</span>
@@ -400,7 +380,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
         <span>{pendingInputCount} offen</span>
         <span>{turns.length} Turns</span>
         {primary && runCost !== undefined && (
-          <span title="Gesamtkosten des Laufs über alle Turns">{formatCostUsd(runCost)}</span>
+          <span title="Gesamtkosten des Runs über alle Turns">{formatCostUsd(runCost)}</span>
         )}
       </div>
     ) },
@@ -410,12 +390,11 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
       icon: <SectionIcon kind="prompt" />,
       content: <pre className={textBlockClass}>{actor.prompt}</pre>,
     }] : []),
-    ...(program && programs ? [{
+    ...(programSource ? [{
       id: "source",
       label: "Quelltext",
       icon: <SectionIcon kind="source" />,
-      content: <ProgramSource api={programs.api} moduleId={program.name} runId={view.id} revision={program.revision}
-        key={`${view.id}:${actor.id}:${program.revision}`} expandedByDefault />,
+      content: programSource,
     }] : actor.source ? [{
       id: "source",
       label: "Quelltext",
@@ -548,6 +527,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
             className="flex-shrink-0"
             onClick={() => void stopActor(view.id, actor.id, STOP_REASON).catch((caught: Error) => setError(caught.message))}
             size="sm"
+            title={`@${actor.handle} samt beauftragten Kindern dauerhaft stoppen; die Chat-Eingabe unterbricht dagegen nur den laufenden Turn`}
             variant="destructive"
           >
             Stop
@@ -569,7 +549,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           actor={actor}
           view={view}
           presentation="inspector"
-          surface={props.chatSurface}
+          display={props.chatDisplay}
           className="min-h-0 flex-1"
           primaryMessages={props.primaryMessages}
           conversation={props.actorConversations?.[actor.id]}
@@ -577,7 +557,7 @@ function ActorView({ actor, index, ...props }: FlowInspectorProps & { actor: Run
           onNavigate={props.onNavigate}
           running={primary ? props.primaryRunning : lifecycle === "running"}
         />
-        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} surface={props.chatSurface}
+        <ActorChatControls actor={actor} view={view} composerVisible={props.composerVisible} display={props.chatDisplay}
           running={primary ? props.primaryRunning : lifecycle === "running"} />
       </SectionTabs>
     </div>
@@ -691,7 +671,7 @@ function ActionView({ action, index, ...props }: FlowInspectorProps & { action:
   const [error, setError] = useState<string>();
   return (
     <div className={inspectorClass}>
-      <DetailHeader canGoBack={props.canGoBack} eyebrow={action.kind === "question" ? "Frage" : "Aktion"} onBack={props.onBack} subtitle={actorLabel(index, action.askedBy)} title={action.title} />
+      <DetailHeader canGoBack={props.canGoBack} eyebrow="Aktion" onBack={props.onBack} subtitle={actorLabel(index, action.askedBy)} title={action.title} />
       <div className={statusClass}><StatusPill status={action.status} /></div>
       <div className={scrollClass}>
         {action.status === "pending" && <ActionCard action={action} onError={setError} runId={index.view.id} />}
@@ -702,10 +682,12 @@ function ActionView({ action, index, ...props }: FlowInspectorProps & { action:
             <dt>Gefragt von</dt><dd><EntityLink id={action.askedBy} index={index} onNavigate={props.onNavigate} /></dd>
             <dt>Vorgeschlagen</dt><dd>{formatTime(action.proposedAt)}</dd>
             {action.resolvedAt && <><dt>Aufgelöst</dt><dd>{formatTime(action.resolvedAt)}</dd></>}
-            {action.response && <><dt>Antwort</dt><dd>{action.response}</dd></>}
+            {action.owner && <><dt>Eigentümer</dt><dd>{action.owner}</dd></>}
+            {action.result !== null && action.result !== undefined && <><dt>Ergebnis</dt><dd>{typeof action.result === "string" ? action.result : JSON.stringify(action.result)}</dd></>}
           </dl>
         </section>
         {Object.keys(action.parameters).length > 0 && <section className={sectionClass}><h3>Parameter</h3><pre className={textBlockClass}>{JSON.stringify(action.parameters, null, 2)}</pre></section>}
+        {action.payload !== null && action.payload !== undefined && <section className={sectionClass}><h3>Nutzdaten</h3><pre className={textBlockClass}>{JSON.stringify(action.payload, null, 2)}</pre></section>}
         {error && <p className={errorClass}>{error}</p>}
       </div>
     </div>

package/plugins/ragents.orchestration/web/JournalStatus.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { XIcon } from "lucide-react";
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
-import { SourceCode } from "@aicontainer/web/SourceCode";
-import { Button, Input, Popover, PopoverContent } from "@aicontainer/web/ui";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import { rpc } from "@aicontainer/web/rpc";
-import { runViewFrom } from "./run-view";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { SessionHeaderContext } from "@ragents/web/PluginRegistry";
+import { SourceCode } from "@ragents/web/SourceCode";
+import { Button, Input, Popover, PopoverContent } from "@ragents/web/ui";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
+import { runViewFrom } from "@ragents/web/run-view";
 import { statusControlClass } from "./constants";
 
 export function JournalStatus({ session }: SessionHeaderContext) {
@@ -52,7 +52,7 @@ export function JournalStatus({ session }: SessionHeaderContext) {
     </button>
     <Popover open={open} onOpenChange={(next) => { if (!next) close(); }}>
     <PopoverContent align="start" anchor={buttonRef} aria-label="Journal des Runs" className="flex min-h-0 min-w-0 flex-col gap-0 overflow-hidden rounded-t-sm rounded-b-none p-0 text-[0.76rem]" collisionPadding={8} id={panelId}
-      initialFocus={searchRef} role="region" side="top" sideOffset={0} style={{ width: "min(900px, var(--available-width))", height: "min(480px, var(--available-height))" }}>
+      initialFocus={searchRef} role="region" side="top" style={{ width: "min(900px, var(--available-width))", height: "min(480px, var(--available-height))" }}>
       <header className="flex flex-none items-center gap-2 border-b border-border-soft px-2.5 py-2">
         <div className="flex min-w-0 flex-1 items-baseline gap-2.5 [&>span]:truncate"><strong>Journal</strong><span className="text-muted-foreground">{session.session.title || "Run"}</span></div>
         <Button onClick={() => setReload((value) => value + 1)} size="sm" variant="ghost">Aktualisieren</Button>

package/plugins/ragents.orchestration/web/MaterialBody.tsx

@@ -1,19 +1,19 @@
-import { cn } from "@aicontainer/web/ui";
+import { cn } from "@ragents/web/ui";
 
-export type MaterialSurface = "agent" | "primary" | "script" | "app";
+export type MaterialTone = "agent" | "primary" | "script" | "app";
 
 /** Schichtwerk: matte Front mit geraden Kanten. */
 const materialBaseClass = "relative isolate rounded-panel border-[1.5px] border-(--material-edge) bg-(--material-face) [--material-edge:#514657] dark:[--material-edge:#b7a8bd]";
 
-const materialSurfaceClass: Readonly<Record<MaterialSurface, string>> = {
+const materialToneClass: Readonly<Record<MaterialTone, string>> = {
   agent: "[--material-face:var(--color-glass-agent)]",
   primary: "[--material-face:var(--color-glass-primary)]",
   script: "[--material-face:var(--color-glass-script)]",
   app: "[--material-face:var(--color-glass-app)]",
 };
 
-export const materialCardClass = (surface: MaterialSurface, className?: string) =>
-  cn(materialBaseClass, materialSurfaceClass[surface], className);
+export const materialCardClass = (tone: MaterialTone, className?: string) =>
+  cn(materialBaseClass, materialToneClass[tone], className);
 
 /** Kopfzeile einer Materialkarte: dieselbe Front, eine Spur dunkler, oben gerundet. */
 export const materialHeadClass = "relative flex items-center gap-2 rounded-t-[15.5px] bg-[color-mix(in_srgb,var(--material-face)_96%,black)] px-3 py-2";

package/plugins/ragents.orchestration/web/StopRunButton.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { useAccess } from "@aicontainer/web/AccessContext";
-import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
-import { Button } from "@aicontainer/web/ui";
-import { ToolbarItem } from "@aicontainer/web/Toolbar";
+import { useAccess } from "@ragents/web/AccessContext";
+import type { SessionHeaderContext } from "@ragents/web/PluginRegistry";
+import { Button, StopGlyph } from "@ragents/web/ui";
+import { ToolbarItem } from "@ragents/web/Toolbar";
 import { stopRun } from "./api";
 
 const STOP_RUN_REASON = "Not-Aus durch den Bediener";
@@ -33,8 +33,8 @@ function StopRunButton({ runId }: { runId: string }) {
   if (!writable) return null;
   if (!armed) {
     return (
-      <Button onClick={() => setArmed(true)} size="sm" title="Beendet den ganzen Lauf: Turns, Agenten und Abläufe" variant="destructive">
-        Lauf stoppen
+      <Button onClick={() => setArmed(true)} size="sm" title="Beendet den ganzen Run: Turns, Agenten und Abläufe" variant="destructive">
+        <StopGlyph data-icon="inline-start" />Run stoppen
       </Button>
     );
   }

package/plugins/ragents.orchestration/web/SurfaceStartup.tsx

@@ -0,0 +1,8 @@
+import { StartupNotice } from "@ragents/web/ui";
+import type { SurfaceStartupState } from "./surface-startup";
+
+export function SurfaceStartup({ state }: { state: SurfaceStartupState }) {
+  return <div className="pointer-events-none absolute inset-y-0 left-0 grid w-[var(--surface-visible-width,100%)] place-items-center p-6">
+    <StartupNotice state={state} />
+  </div>;
+}

package/plugins/ragents.orchestration/web/{CanvasTiles.tsx → SurfaceTiles.tsx}

@@ -1,15 +1,15 @@
-import { useAccess } from "@aicontainer/web/AccessContext";
-import type { CanvasElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@aicontainer/web/PluginRegistry";
-import { canvasTileChatInput, type CanvasTileNode } from "../tiled-layout";
+import { useAccess } from "@ragents/web/AccessContext";
+import type { SurfaceElementContribution, CardSectionContribution, EntityReference, SessionContext, SessionNavigation } from "@ragents/web/PluginRegistry";
+import { surfaceTileChatInput, type SurfaceTileNode } from "../tiled-layout";
 import { ActorTile } from "./ActorTile";
 import { FlowInspector } from "./FlowInspector";
-import { TiledCanvas, type CanvasTileItem } from "./TiledCanvas";
-import { actorSurface, type RunView } from "./run-view";
+import { TiledSurface, type SurfaceTileItem } from "./TiledSurface";
+import { actorTone, type RunView } from "@ragents/web/run-view";
 
-export function CanvasTiles({ root, onChange, canvasElements, cardSections, session, view, navigation, onSelect, selected }: {
-  root: CanvasTileNode | null;
-  onChange: (root: CanvasTileNode | null) => void;
-  canvasElements: readonly CanvasElementContribution[];
+export function SurfaceTiles({ root, onChange, surfaceElements, cardSections, session, view, navigation, onSelect, selected }: {
+  root: SurfaceTileNode | null;
+  onChange: (root: SurfaceTileNode | null) => void;
+  surfaceElements: readonly SurfaceElementContribution[];
   cardSections: readonly CardSectionContribution[];
   session: SessionContext;
   view: RunView;
@@ -20,28 +20,28 @@ export function CanvasTiles({ root, onChange, canvasElements, cardSections, sess
   const inspect = useAccess().can("runs.inspect");
   const actors = view.actors.filter((actor) => actor.kind !== "human" && actor.lifecycle?.kind !== "stopped"
     && (inspect || actor.kind === "agent"));
-  const items: CanvasTileItem[] = [
-    ...actors.map((actor): CanvasTileItem => ({
+  const items: SurfaceTileItem[] = [
+    ...actors.map((actor): SurfaceTileItem => ({
       entity: `@${actor.handle}`,
       title: `${actor.displayName || actor.handle} (@${actor.handle})`,
-      surface: actorSurface(view, actor),
+      tone: actorTone(view, actor),
       content: actor.kind === "agent"
-        ? <ActorTile actor={actor} view={view} cardSections={cardSections} chatInput={canvasTileChatInput(root, `@${actor.handle}`)} session={session} navigation={navigation} onSelect={onSelect} />
-        : <FlowInspector view={view} selection={{ type: "actor", id: actor.id }} canGoBack={false} chatSurface="canvas"
+        ? <ActorTile actor={actor} view={view} cardSections={cardSections} chatInput={surfaceTileChatInput(root, `@${actor.handle}`)} session={session} navigation={navigation} onSelect={onSelect} />
+        : <FlowInspector view={view} selection={{ type: "actor", id: actor.id }} canGoBack={false} chatDisplay="surface"
           composerVisible={false} onNavigate={onSelect} onBack={() => {}} primaryMessages={session.messages}
           actorConversations={session.actorConversations} conversationError={session.conversationError} primaryRunning={session.running} />,
     })),
-    ...canvasElements.flatMap(({ Element, select }) => select(session)
+    ...surfaceElements.flatMap(({ Element, select }) => select(session)
       .filter((definition) => definition.visible !== false)
-      .map((definition): CanvasTileItem => ({
+      .map((definition): SurfaceTileItem => ({
         entity: `app:${definition.id}`,
         title: definition.title ?? definition.id,
-        surface: "app",
+        tone: "app",
         content: <Element definition={definition} navigation={navigation} session={session} />,
       }))),
   ];
   const selectedEntity = selected?.type === "run-app" ? `app:${selected.id}`
     : selected?.type === "actor" ? actors.find((actor) => actor.id === selected.id)?.handle : undefined;
-  return <TiledCanvas root={root} onChange={onChange} items={items} canArrange={inspect}
+  return <TiledSurface root={root} onChange={onChange} items={items} canArrange={inspect}
     selectedEntity={selected?.type === "actor" && selectedEntity ? `@${selectedEntity}` : selectedEntity} />;
 }

package/plugins/ragents.orchestration/web/{TiledCanvas.tsx → TiledSurface.tsx}

@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CodeXml, LayoutGrid, Sparkles, GripVertical, X } from "lucide-react";
-import { canvasTileNodeOf, type CanvasTileNode } from "../tiled-layout";
-import { CANVAS_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
+import { surfaceTileNodeOf, type SurfaceTileNode } from "../tiled-layout";
+import { SURFACE_TILE_DRAG_TYPE, dockTile, removeTile, resizeTile, tileEntities, tileGeometry, tileMinimum, type TileDivider, type TileDockSide, type TileRect } from "./tile-docking";
 import { materialCardClass, materialHeadClass, materialIconClass, materialTitleClass } from "./MaterialBody";
 
-export interface CanvasTileItem { entity: string; title: string; content: ReactNode; surface?: "agent" | "primary" | "script" | "app" }
-interface TiledCanvasProps {
-  root: CanvasTileNode | null;
-  onChange: (root: CanvasTileNode | null) => void;
-  items: readonly CanvasTileItem[];
+export interface SurfaceTileItem { entity: string; title: string; content: ReactNode; tone?: "agent" | "primary" | "script" | "app" }
+interface TiledSurfaceProps {
+  root: SurfaceTileNode | null;
+  onChange: (root: SurfaceTileNode | null) => void;
+  items: readonly SurfaceTileItem[];
   canArrange: boolean;
   selectedEntity?: string;
   onSelect?: (entity: string) => void;
@@ -30,10 +30,10 @@ const sidePlacement = {
   top: { inner: "top-0 left-[40px]", outer: "top-0 left-[calc(50%_-_18px)]" },
   bottom: { inner: "bottom-0 left-[40px]", outer: "bottom-0 left-[calc(50%_-_18px)]" },
 };
-const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-canvas text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-canvas [&>svg]:pointer-events-none";
+const dockTargetClass = "absolute grid size-[36px] place-items-center rounded-[5px] border border-primary bg-surface text-primary shadow-[0_2px_8px_#0002] pointer-events-auto data-[active]:bg-primary data-[active]:text-surface [&>svg]:pointer-events-none";
 const dividerClass = "absolute z-3 grid touch-none place-items-center rounded-[4px] focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 data-[direction=horizontal]:cursor-col-resize data-[direction=vertical]:cursor-row-resize [&>span]:pointer-events-none [&>span]:rounded-[4px] [&>span]:bg-border-strong data-[direction=horizontal]:[&>span]:h-8 data-[direction=horizontal]:[&>span]:w-[3px] data-[direction=vertical]:[&>span]:h-[3px] data-[direction=vertical]:[&>span]:w-8 hover:[&>span]:bg-primary focus-visible:[&>span]:bg-primary";
 
-export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledCanvasProps) {
+export function TiledSurface({ root, onChange, items, canArrange, selectedEntity, onSelect }: TiledSurfaceProps) {
   const stageRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [available, setAvailable] = useState({ width: 0, height: 0 });
@@ -42,9 +42,9 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
   const [resizing, setResizing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selected, setSelected] = useState<string>();
-  const [resizePreview, setResizePreview] = useState<CanvasTileNode | null>(null);
+  const [resizePreview, setResizePreview] = useState<SurfaceTileNode | null>(null);
   const resizeFrame = useRef<number | null>(null);
-  const resizeRef = useRef<{ divider: TileDivider; start: number; root: CanvasTileNode; next: CanvasTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
+  const resizeRef = useRef<{ divider: TileDivider; start: number; root: SurfaceTileNode; next: SurfaceTileNode; pointerId: number; handle: HTMLDivElement } | null>(null);
   const visibleRoot = resizePreview ?? root;
   const entities = useMemo(() => tileEntities(root), [root]);
   const mountedEntities = useMemo(() => [...entities].sort(), [entities]);
@@ -85,8 +85,8 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
       pendingFrame = null;
     };
     const start = (event: DragEvent) => {
-      if (!event.dataTransfer?.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
-      const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+      if (!event.dataTransfer?.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
+      const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
       if (!entity) return;
       cancelActivation();
       pendingFrame = requestAnimationFrame(() => {
@@ -172,7 +172,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
     </label>}
     <div ref={stageRef} className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
       onDragOver={(event) => {
-        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(CANVAS_TILE_DRAG_TYPE)) return;
+        if (!canArrange || dragEntity === null || !event.dataTransfer.types.includes(SURFACE_TILE_DRAG_TYPE)) return;
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
         const element = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-dock-side]") : null;
@@ -183,7 +183,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
       onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setTarget(null); }}
       onDrop={(event) => {
         if (!canArrange || dragEntity === null) return;
-        const entity = event.dataTransfer.getData(CANVAS_TILE_DRAG_TYPE);
+        const entity = event.dataTransfer.getData(SURFACE_TILE_DRAG_TYPE);
         if (!entity || entity !== dragEntity) return;
         event.preventDefault();
         if (!itemMap.has(entity) && !entities.includes(entity)) return;
@@ -191,7 +191,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
         try {
           if (!root || element) {
             const next = dockTile(root, entity, element?.dataset.dockEntity || null, (element?.dataset.dockSide ?? "right") as TileDockSide);
-            if (next !== root) onChange(next === null ? null : canvasTileNodeOf(next));
+            if (next !== root) onChange(next === null ? null : surfaceTileNodeOf(next));
             select(entity);
             setError(null);
           }
@@ -202,24 +202,24 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
           setTarget(null);
         }
       }}>
-      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-canvas p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Meldung schließen" onClick={() => setError(null)}><X size={16} /></button></div>}
+      {error && <div className="absolute inset-x-2 bottom-2 z-7 flex items-center gap-2 rounded-lg border border-primary bg-surface p-3 text-foreground shadow-[0_2px_8px_#0002]" role="alert"><span className="flex-1">{error}</span><button className="grid cursor-pointer place-items-center bg-transparent p-1" type="button" aria-label="Meldung schließen" onClick={() => setError(null)}><X size={16} /></button></div>}
       {!root && <div className="grid h-full place-items-center rounded-lg border border-dashed border-border-strong p-6 text-center text-muted-foreground">{canArrange ? "Ziehe einen Actor oder eine Mini-App aus der Kopfzeile hierher." : "Für diese Kachelansicht sind noch keine Inhalte angeordnet."}</div>}
       {mountedEntities.map((entity) => {
         const item = itemMap.get(entity);
         const bounds = materialFaceRect(compact ? rect : geometry.leaves.get(entity)!);
-        return <section key={entity} className={materialCardClass(item?.surface ?? (entity.startsWith("app:") ? "app" : "agent"),
-          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-surface="material"
+        return <section key={entity} className={materialCardClass(item?.tone ?? (entity.startsWith("app:") ? "app" : "agent"),
+          "absolute z-0 flex min-h-0 min-w-0 flex-col overflow-visible")} data-tile-entity={entity} data-tone="material"
           style={{ ...positioned(bounds), display: compact && entity !== active ? "none" : undefined }}
           onFocusCapture={() => { if (active !== entity) setSelected(entity); }}>
           <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[15.5px]">
             <header className={`${materialHeadClass} flex-[0_0_49px] min-w-0 select-none border-b border-[#51465738] text-foreground [&[draggable=true]]:cursor-grab`}
               draggable={canArrange} onDragStart={(event) => {
               if (!canArrange) { event.preventDefault(); return; }
-              event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, entity);
+              event.dataTransfer.setData(SURFACE_TILE_DRAG_TYPE, entity);
               event.dataTransfer.effectAllowed = "move";
             }}>
               {canArrange && <GripVertical size={16} aria-hidden="true" />}
-              <span className={materialIconClass}>{item?.surface === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.surface === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
+              <span className={materialIconClass}>{item?.tone === "app" || entity.startsWith("app:") ? <LayoutGrid size={20} aria-hidden="true" /> : item?.tone === "script" ? <CodeXml size={20} aria-hidden="true" /> : <Sparkles size={20} aria-hidden="true" />}</span>
               <span className={`${materialTitleClass} flex-1`} title={item?.title ?? entity}>{item?.title ?? entity}</span>
               {canArrange && <button className="grid size-[26px] cursor-pointer place-items-center rounded-[4px] bg-transparent p-0 text-muted-foreground hover:bg-glass-group hover:text-foreground"
                 type="button" draggable={false} aria-label={`Kachel ${item?.title ?? entity} entfernen`}
@@ -272,7 +272,7 @@ export function TiledCanvas({ root, onChange, items, canArrange, selectedEntity,
         }}><span /></div>)}
       {resizing && <div className="absolute inset-0 z-2" />}
       {canArrange && dragEntity !== null && root && <div className="pointer-events-none absolute inset-2 z-6">{targets(null)}</div>}
-      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.surface ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
+      {canArrange && dragEntity !== null && preview && <div className={materialCardClass(itemMap.get(dragEntity)?.tone ?? (dragEntity.startsWith("app:") ? "app" : "agent"),
         "pointer-events-none absolute z-5 opacity-80")}
         style={positioned(materialFaceRect(preview))}><div className="absolute inset-0 rounded-[15.5px] border-2 border-primary bg-primary/22" /></div>}
     </div>

package/plugins/ragents.orchestration/web/actor-header-settings.ts

@@ -1,5 +1,5 @@
-import { createLocalStorageSetting } from "@aicontainer/web/lib/local-storage-setting";
-import type { RunActor } from "./run-view";
+import { createLocalStorageSetting } from "@ragents/web/lib/local-storage-setting";
+import type { RunActor } from "@ragents/web/run-view";
 
 export const ACTOR_HEADER_MODES = ["all", "active", "visible", "agent", "script"] as const;
 export type ActorHeaderMode = typeof ACTOR_HEADER_MODES[number];

package/plugins/ragents.orchestration/web/api.ts

@@ -1,23 +1,17 @@
-import { coreContracts } from "@aicontainer/server/api/contracts";
-import { runContracts } from "@aicontainer/ragents/src/http/contracts";
-import type { ChatAttachmentInput } from "@aicontainer/web/chat/types";
-import { rpc } from "@aicontainer/web/rpc";
+import { runContracts } from "@ragents/engine/src/http/contracts";
+import { rpc } from "@ragents/web/rpc";
 
 export const enqueueActorInput = async (runId: string, actorId: string, content: string, artifactIds: string[] = []) => {
   await rpc.call(runContracts.enqueueInput, { runId, commandId: crypto.randomUUID(), actorId, content, artifactIds });
 };
 
-export const sendActorMessage = async (runId: string, actorId: string, text: string, attachments?: ChatAttachmentInput[]) => {
-  await rpc.call(coreContracts.chat.sendToActor, { runId, actorId, text, attachments });
-};
-
 export const resolveAction = async (
   runId: string,
   actionId: string,
   decision: "approved" | "dismissed",
-  response?: string,
+  result?: string,
 ) => {
-  await rpc.call(runContracts.resolveAction, { runId, commandId: crypto.randomUUID(), actionId, decision, response });
+  await rpc.call(runContracts.resolveAction, { runId, commandId: crypto.randomUUID(), actionId, decision, result });
 };
 
 export const stopActor = async (runId: string, actorId: string, reason: string) => {

package/plugins/ragents.orchestration/web/constants.ts

@@ -1,5 +1,4 @@
 export const ORCHESTRATION_PLUGIN_ID = "ragents.orchestration";
-export const ORCHESTRATION_TAB_ID = "ragents.orchestration.inspector";
 
 /** Knopf in der Statusleiste: volle Leistenhöhe, keine Rundung, ruhige Fläche. */
 export const statusControlClass = "flex h-full min-w-statusbar items-center justify-center self-stretch whitespace-nowrap px-2.5 text-[0.7rem] text-foreground hover:bg-primary/12 aria-expanded:bg-primary/12 focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";

package/plugins/ragents.orchestration/web/executions.ts

@@ -1,6 +1,6 @@
-import type { JournalEvent } from "../../../packages/ragents/src/domain/events";
-import type { JsonValue } from "../../../packages/ragents/src/domain/json";
-import type { RunView } from "./run-view";
+import type { JournalEvent } from "@ragents/engine/src/domain/events";
+import type { JsonValue } from "@ragents/engine/src/domain/json";
+import type { RunView } from "@ragents/web/run-view";
 
 export type ExecutionStatus = "running" | "completed" | "failed" | "interrupted";