@schlenkr/ragents 0.1.0 → 0.1.1

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

@@ -308,7 +308,7 @@ export class ActorProgramRuntime implements ActorProgramsService, ActorProgramEx
             const clientFile = `view-${view.id}.mjs`;
             clients.push({ file: clientFile, javaScript: client.javaScript });
             views.push({ id: `${name}--${view.id}`, key: view.id, title: view.title ?? pkg.title, visible: previous?.views.find((item) => item.key === view.id)?.visible ?? true,
-                placements: [{ kind: "canvas", anchorActorId: actorId, width: view.width ?? 440, height: view.height ?? 360 }], html: `<!doctype html><html class="${FRAME_DOCUMENT_CLASS}"><head><meta charset="utf-8"></head><body class="${FRAME_BODY_CLASS}"><div id="root" class="${FRAME_ROOT_CLASS}"></div></body></html>`, styles, clientFile });
+                placements: [{ kind: "canvas", anchorActorId: actorId }], html: `<!doctype html><html class="${FRAME_DOCUMENT_CLASS}"><head><meta charset="utf-8"></head><body class="${FRAME_BODY_CLASS}"><div id="root" class="${FRAME_ROOT_CLASS}"></div></body></html>`, styles, clientFile });
         }
         const viewSources = [...new Set((pkg.views ?? []).map((view) => path.dirname(path.resolve(directory, view.client))))];
         const frameStyles = viewSources.length > 0 ? await buildTailwind(viewSources) : "";

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

@@ -19,7 +19,6 @@ import type {
 } 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 { useCanvasPresentation } from "@aicontainer/plugins/ragents.orchestration/web/tiled-view-settings";
 import { CANVAS_TILE_DRAG_TYPE } from "@aicontainer/plugins/ragents.orchestration/web/tile-docking";
 import {
   type RunApp,
@@ -368,7 +367,6 @@ export function ToolsPanel({ active, navigation, selection, session }: Workspace
 
 export function ActorProgramsHeader({ navigation, session }: SessionHeaderContext) {
   const canArrange = useAccess().can("runs.inspect");
-  const tiled = useCanvasPresentation(session.session.id, runViewFrom(session.runView)).presentation.mode === "tiled";
   const stage = useStageEntities(session.session.id);
   const { closeFullscreen, fullscreenAppId, openFullscreen } = useActorPrograms();
   const apps = actorProgramApps(session).filter((app) => app.app.visible !== false);
@@ -383,16 +381,16 @@ export function ActorProgramsHeader({ navigation, session }: SessionHeaderContex
         <ToolbarItem
           as="button"
           className="max-w-[214px] border-r-0 font-bold hover:not-disabled:bg-transparent"
-          draggable={tiled && canArrange}
+          draggable={canArrange}
           onDragStart={(event) => {
-            if (!tiled || !canArrange) { event.preventDefault(); return; }
+            if (!canArrange) { event.preventDefault(); return; }
             event.dataTransfer.setData(CANVAS_TILE_DRAG_TYPE, `app:${app.id}`);
             event.dataTransfer.effectAllowed = "move";
             closeFullscreen();
           }}
           onClick={() => { closeFullscreen(); navigation.revealEntity({ type: "run-app", id: app.id }); }}
           aria-label={`Mini-App: ${app.title} von @${app.actorHandle}`}
-          title={`Mini-App: ${app.title} von @${app.actorHandle}${tiled && canArrange ? ". Zum Andocken auf eine Kachel ziehen." : ""}`}
+          title={`Mini-App: ${app.title} von @${app.actorHandle}${canArrange ? ". Zum Andocken auf eine Kachel ziehen." : ""}`}
           type="button"
         >
           <span className={cn(quickIconClass, !stage.has(`app:${app.id}`) && "bg-transparent")}><LayoutGridIcon size={20} /></span>

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

@@ -1,7 +1,5 @@
-import { ACTOR_CARD_SIZE_LIMITS, DEFAULT_ACTOR_CARD_SIZE } from "@aicontainer/plugins/ragents.orchestration/web/card-size-settings";
 import { useAccess } from "@aicontainer/web/AccessContext";
-import { ChevronDownIcon, LayoutGridIcon } from "lucide-react";
-import { Button, cn, Spinner } from "@aicontainer/web/ui";
+import { cn, Spinner } from "@aicontainer/web/ui";
 import { isRecord } from "@aicontainer/web/lib/guards";
 import { runActorFrom } from "@aicontainer/plugins/ragents.orchestration/web/contract";
 import type {
@@ -12,13 +10,9 @@ import type {
 } from "@aicontainer/web/PluginRegistry";
 import { HostConfirmation, pendingConfirmationFor, actorProgramApps, useActorPrograms } from "./AppsPanel";
 import { ActorViewFrame } from "./ActorViewFrame";
-import { ExpandIcon } from "./ExpandIcon";
 import { FunctionForm } from "./FunctionForm";
 
-const materialIconClass = "in-data-[surface=material]:grid in-data-[surface=material]:size-8 in-data-[surface=material]:place-items-center in-data-[surface=material]:rounded-[11px] in-data-[surface=material]:border in-data-[surface=material]:border-glass-edge/55 in-data-[surface=material]:bg-white/9 in-data-[surface=material]:text-foreground in-data-[surface=material]:shadow-glass-icon in-data-[surface=material]:[&>svg]:size-5";
 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";
-const headClass = "flex flex-[0_0_32px] items-center gap-[3px] border-b border-glass-edge bg-glass-head pr-1 pl-2.5 in-data-[surface=material]:basis-[49px] in-data-[surface=material]:rounded-t-[15.5px] in-data-[surface=material]:border-glass-edge/22 in-data-[surface=material]:bg-[color-mix(in_srgb,var(--material-face)_96%,black)] in-data-[surface=material]:px-3 in-data-[surface=material]:py-2 [[data-surface=material][data-resizable=true]_&]:mr-0 [[data-surface=material][data-resizable=true]_&]:pr-[34px]";
-const headTitleClass = "min-w-0 flex-1 truncate text-[0.72rem] font-semibold in-data-[surface=material]:p-0 in-data-[surface=material]:text-[17px]/[1.3] in-data-[surface=material]:font-[730] in-data-[surface=material]:tracking-[-0.5px]";
 
 export function ActorProgramToolCardSection({ actor, session }: CardSectionContext) {
   const inspect = useAccess().can("runs.inspect");
@@ -39,16 +33,12 @@ export function ActorProgramToolCardSection({ actor, session }: CardSectionConte
   );
 }
 
-const boundedInteger = (value: unknown, minimum: number, maximum: number): value is number =>
-  Number.isInteger(value) && (value as number) >= minimum && (value as number) <= maximum;
-
 export const actorProgramCanvasElements = (session: SessionContext): readonly CanvasElementDefinition[] =>
   actorProgramApps(session).flatMap((module): CanvasElementDefinition[] => {
     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"
-      || !boundedInteger(canvas.width, 280, 960) || !boundedInteger(canvas.height, 180, 720))) {
+    if (canvas && typeof canvas.anchorActorId !== "string") {
       throw new Error(`Die Canvas-Platzierung 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}.`);
@@ -56,23 +46,14 @@ export const actorProgramCanvasElements = (session: SessionContext): readonly Ca
       id: module.id,
       title: module.title,
       visible: module.app.visible !== false,
-      width: DEFAULT_ACTOR_CARD_SIZE.width,
-      height: DEFAULT_ACTOR_CARD_SIZE.height,
-      collapsedHeight: 52,
       anchorActorId: module.actorId,
       data: { actorId: module.actorId, actorHandle: module.actorHandle },
       entity: { type: "run-app", id: module.id },
-      resizable: {
-        minWidth: 280,
-        maxWidth: ACTOR_CARD_SIZE_LIMITS.maxWidth,
-        minHeight: 180,
-        maxHeight: ACTOR_CARD_SIZE_LIMITS.maxHeight,
-      },
     }];
   });
 
-export function ActorProgramCanvasElement({ collapsed = false, definition, onCollapsedChange, presentation = "canvas", session }: CanvasElementContext) {
-  const { api, invoke, listing, openFullscreen, runId } = useActorPrograms();
+export function ActorProgramCanvasElement({ definition, session }: CanvasElementContext) {
+  const { api, invoke, listing, runId } = useActorPrograms();
   const app = listing?.apps.find((candidate) => candidate.id === definition.id);
   const confirmation = app ? pendingConfirmationFor(session, app) : undefined;
   const title = definition.title ?? definition.id;
@@ -82,7 +63,7 @@ export function ActorProgramCanvasElement({ collapsed = false, definition, onCol
       app={app}
       invoke={invoke}
       pendingConfirmationInvocationId={confirmation?.parameters.invocationId}
-      presentation={presentation === "tiled" ? "tiled" : "embedded"}
+      presentation="tiled"
       runId={runId}
       session={session}
     />
@@ -93,21 +74,8 @@ export function ActorProgramCanvasElement({ collapsed = false, definition, onCol
     </div>
   );
   return (
-    <article aria-label={title} className={cn(cardClass, presentation === "tiled" && "w-full rounded-none border-0 bg-transparent shadow-none backdrop-filter-none")}>
-      {presentation !== "tiled" && <header className={headClass}>
-        <span className={materialIconClass}><LayoutGridIcon size={20} /></span>
-        <strong className={headTitleClass} title={title}>{title}</strong>
-        {isRecord(definition.data) && typeof definition.data.actorHandle === "string" && <small className="mr-1 text-[0.65rem] text-muted-foreground">@{definition.data.actorHandle}</small>}
-        <Button aria-label={`${title} in Vollansicht öffnen`} onClick={() => openFullscreen(definition.id)} size="icon-sm" title={`${title} in Vollansicht öffnen`} variant="ghost">
-          <ExpandIcon />
-        </Button>
-        {onCollapsedChange && (
-          <Button aria-expanded={!collapsed} aria-label={`${title} ${collapsed ? "aufklappen" : "einklappen"}`} onClick={() => onCollapsedChange(!collapsed)} size="icon-sm" title={`${title} ${collapsed ? "aufklappen" : "einklappen"}`} variant="ghost">
-            <ChevronDownIcon className={collapsed ? undefined : "rotate-180"} size={14} />
-          </Button>
-        )}
-      </header>}
-      <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" hidden={presentation !== "tiled" && collapsed}>
+    <article aria-label={title} className={cn(cardClass, "w-full rounded-none border-0 bg-transparent shadow-none backdrop-filter-none")}>
+      <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}
       </div>

package/plugins/ragents.actor-programs/web/api.ts

@@ -17,7 +17,7 @@ export interface RunAppAction {
   confirmation: string | null;
 }
 
-export type RunAppPlacement = { kind: "canvas"; anchorActorId: string; width: number; height: number };
+export type RunAppPlacement = { kind: "canvas"; anchorActorId: string };
 
 export type RunAppInvocation = {
   id: string;
@@ -198,21 +198,12 @@ export const runAppInvocationFrom = (value: unknown): RunAppInvocation => {
   }
 };
 
-const boundedInteger = (value: unknown, field: string, minimum: number, maximum: number): number => {
-  if (!Number.isInteger(value) || (value as number) < minimum || (value as number) > maximum) {
-    throw new Error(`${field} liegt außerhalb des gültigen Bereichs`);
-  }
-  return value as number;
-};
-
 const runAppPlacementFrom = (value: unknown): RunAppPlacement => {
   if (!isRecord(value)) throw new Error("Eine App-Platzierung ist kein Objekt");
   if (value.kind === "canvas") {
     return {
       kind: "canvas",
       anchorActorId: requiredString(value.anchorActorId, "placement.anchorActorId"),
-      width: boundedInteger(value.width, "placement.width", 280, 960),
-      height: boundedInteger(value.height, "placement.height", 180, 720),
     };
   }
   throw new Error("kind einer App-Platzierung muss canvas sein");

package/plugins/ragents.lsp-roslyn/web/language-server-plugin.tsx

@@ -1,8 +1,10 @@
 import { Alert, AlertDescription, Badge, Button, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Spinner } from "@aicontainer/web/ui";
 import { useEffect, useState, type ComponentType } from "react";
 import type {
+  LanguageServerInstanceSnapshot,
   LanguageServerSeverity,
   LanguageServerSnapshot,
+  LanguageServerState,
 } from "@aicontainer/server/plugin-support/language-server/contract";
 import {
   type WebPlugin,
@@ -33,18 +35,30 @@ const textFrom = (config: Readonly<Record<string, unknown>>, key: string, plugin
   return value;
 };
 
-const stateLabel = (snapshot: LanguageServerSnapshot | undefined): string => {
+const stateLabel = (state: LanguageServerState): string => {
+  if (state === "opening") return "wird geladen";
+  if (state === "failed") return "fehlgeschlagen";
+  if (state === "suspended") return "nach Leerlauf beendet";
+  return "bereit";
+};
+
+const headerLabel = (snapshot: LanguageServerSnapshot | undefined): string => {
   if (!snapshot) return "wird geladen";
-  if (snapshot.state === "closed") return "nicht gestartet";
-  if (snapshot.state === "opening") return "wird geladen";
-  if (snapshot.state === "failed") return "fehlgeschlagen";
-  if (snapshot.state === "suspended") return "nach Leerlauf beendet";
-  return snapshot.summary ?? "bereit";
+  const count = snapshot.instances.length;
+  if (count === 0) return "nicht gestartet";
+  return count === 1 ? "1 Instanz" : `${count} Instanzen`;
 };
 
 const countLabel = (count: number, singular: string, plural: string): string =>
   `${count} ${count === 1 ? singular : plural}`;
 
+const errorsOf = (snapshot: LanguageServerSnapshot | undefined): number =>
+  (snapshot?.instances ?? [])
+    .filter((instance) => instance.state === "ready" || instance.state === "suspended")
+    .flatMap((instance) => instance.files)
+    .flatMap((file) => file.diagnostics)
+    .filter((entry) => entry.severity === "error").length;
+
 const compactEmpty = "h-auto min-h-30 flex-none";
 const severityClass = "text-[0.64rem] uppercase tracking-[0.04em]"
   + " in-data-[severity=error]:text-destructive in-data-[severity=warning]:text-warning"
@@ -115,55 +129,33 @@ const panelFor = (settings: TabSettings) => {
   return LanguageServerPanel;
 };
 
-export function LanguageServerPanelView({ settings, snapshot, error, pending, onRefresh }: {
-  settings: Pick<TabSettings, "label" | "openTool">;
-  snapshot?: LanguageServerSnapshot;
-  error?: string;
-  pending: boolean;
-  onRefresh: () => void;
-}) {
-  const diagnosticsAvailable = snapshot?.state === "ready" || snapshot?.state === "suspended";
-  const files = diagnosticsAvailable ? snapshot.files : [];
+function LanguageServerInstanceView({ instance }: { instance: LanguageServerInstanceSnapshot }) {
+  const diagnosticsAvailable = instance.state === "ready" || instance.state === "suspended";
+  const files = diagnosticsAvailable ? instance.files : [];
   const rows = files.flatMap((file) => file.diagnostics.map((entry) => ({ file: file.path, entry })));
   const errors = rows.filter((row) => row.entry.severity === "error").length;
   const warnings = rows.filter((row) => row.entry.severity === "warning").length;
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
-      <header className="flex items-center gap-2 px-2.5 py-2">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <span className="text-[0.8rem] font-medium text-foreground">{settings.label}</span>
-          <span className="text-xs text-muted-foreground">{stateLabel(snapshot)}</span>
-        </div>
-        <Button aria-label="Diagnosen aktualisieren" onClick={onRefresh} size="icon" title="Aktualisieren" variant="ghost">
-          <IconRefresh className={pending ? "animate-spin" : undefined} />
-        </Button>
-      </header>
-      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
-      {snapshot?.root && <div className="overflow-hidden text-ellipsis whitespace-nowrap px-2.5 pb-2 font-mono text-[0.66rem] text-muted-foreground" title={snapshot.root}>{snapshot.root}</div>}
-      {snapshot?.state === "opening" && (
+    <section className="border-b border-border-soft last:border-b-0">
+      <div className="flex items-baseline gap-2 px-2.5 pt-2 pb-1">
+        <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[0.66rem] text-muted-foreground" title={instance.root}>{instance.root}</span>
+        <span className="flex-none text-[0.64rem] uppercase tracking-[0.04em] text-muted-foreground">{stateLabel(instance.state)}</span>
+      </div>
+      {instance.state === "opening" && (
         <Empty className={compactEmpty} role="status">
           <EmptyHeader>
             <EmptyMedia><Spinner aria-label="Wird geladen" /></EmptyMedia>
             <EmptyTitle>Sprachserver wird geladen</EmptyTitle>
-            <EmptyDescription>{snapshot.summary || "Die Initialisierung läuft."}</EmptyDescription>
+            <EmptyDescription>{instance.summary || "Die Initialisierung läuft."}</EmptyDescription>
           </EmptyHeader>
         </Empty>
       )}
-      {snapshot?.state === "failed" && (
+      {instance.state === "failed" && (
         <Empty className={`${compactEmpty} text-destructive`} role="alert">
           <EmptyHeader>
             <EmptyTitle>Sprachserver nicht verfügbar</EmptyTitle>
-            <EmptyDescription className="whitespace-pre-wrap text-destructive [overflow-wrap:anywhere]">{snapshot.summary || "Beim Laden ist ein Fehler aufgetreten."}</EmptyDescription>
-          </EmptyHeader>
-        </Empty>
-      )}
-      {snapshot?.state === "closed" && (
-        <Empty>
-          <EmptyHeader>
-            <EmptyMedia><IconDiagnostics /></EmptyMedia>
-            <EmptyTitle>Kein Sprachserver</EmptyTitle>
-            <EmptyDescription>{`${settings.label}-Sprachserver ist nicht gestartet - ein Agent startet ihn mit ${settings.openTool}.`}</EmptyDescription>
+            <EmptyDescription className="whitespace-pre-wrap text-destructive [overflow-wrap:anywhere]">{instance.summary || "Beim Laden ist ein Fehler aufgetreten."}</EmptyDescription>
           </EmptyHeader>
         </Empty>
       )}
@@ -180,7 +172,7 @@ export function LanguageServerPanelView({ settings, snapshot, error, pending, on
           <div className="border-y border-border-soft px-2.5 py-1.5 text-xs text-muted-foreground">
             {`${countLabel(errors, "Fehler", "Fehler")}, ${countLabel(warnings, "Warnung", "Warnungen")} in ${countLabel(files.length, "Datei", "Dateien")}`}
           </div>
-          <div className="min-h-0 flex-1 overflow-y-auto px-1.5 pt-1 pb-2.5">
+          <div className="px-1.5 pt-1 pb-2.5">
             {rows.map((row, index) => (
               <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-0.5 border-b border-border-soft px-2 py-1.5 text-[0.7rem]"
                 data-severity={row.entry.severity} key={`${row.file}:${row.entry.line}:${row.entry.character}:${index}`}>
@@ -194,6 +186,45 @@ export function LanguageServerPanelView({ settings, snapshot, error, pending, on
           </div>
         </>
       )}
+    </section>
+  );
+}
+
+export function LanguageServerPanelView({ settings, snapshot, error, pending, onRefresh }: {
+  settings: Pick<TabSettings, "label" | "openTool">;
+  snapshot?: LanguageServerSnapshot;
+  error?: string;
+  pending: boolean;
+  onRefresh: () => void;
+}) {
+  const instances = snapshot?.instances ?? [];
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <header className="flex items-center gap-2 px-2.5 py-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="text-[0.8rem] font-medium text-foreground">{settings.label}</span>
+          <span className="text-xs text-muted-foreground">{headerLabel(snapshot)}</span>
+        </div>
+        <Button aria-label="Diagnosen aktualisieren" onClick={onRefresh} size="icon" title="Aktualisieren" variant="ghost">
+          <IconRefresh className={pending ? "animate-spin" : undefined} />
+        </Button>
+      </header>
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+      {snapshot && instances.length === 0 && (
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia><IconDiagnostics /></EmptyMedia>
+            <EmptyTitle>Kein Sprachserver</EmptyTitle>
+            <EmptyDescription>{`${settings.label}-Sprachserver ist nicht gestartet - ein Agent startet ihn mit ${settings.openTool}.`}</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+      {instances.length > 0 && (
+        <div className="min-h-0 flex-1 overflow-y-auto border-t border-border-soft">
+          {instances.map((instance) => <LanguageServerInstanceView instance={instance} key={instance.root} />)}
+        </div>
+      )}
     </div>
   );
 }
@@ -201,9 +232,7 @@ export function LanguageServerPanelView({ settings, snapshot, error, pending, on
 const badgeFor = (settings: TabSettings) => {
   function LanguageServerBadge({ session }: WorkspaceTabContext) {
     const { snapshot } = useSnapshot(settings.pluginId, session.session.id, true, BADGE_POLL_MS);
-    const errors = (snapshot?.state === "ready" || snapshot?.state === "suspended" ? snapshot.files : [])
-      .flatMap((file) => file.diagnostics)
-      .filter((entry) => entry.severity === "error").length;
+    const errors = errorsOf(snapshot);
     return errors > 0 ? <Badge variant="secondary">{errors}</Badge> : null;
   }
 

package/plugins/ragents.orchestration/canvas.hbs

@@ -1,50 +1,34 @@
-## Designing the canvas
+## Arranging the tiled work surface
 
-The canvas shows the personally visible actors and actor views of this run. Use
-`context.functions.canvas_layout_replace` from TypeScript to arrange
-existing participants and explain their relationships. Free canvas is the default; do not switch
-to tiles unless the user requests them or the run setup explicitly specifies them. Read its exact input and result types with
-`typescript_api` before constructing a layout; they define the supported entities,
-groups, shapes, connections and size limits.
+The work surface of a run is a grid of tiles that fills the viewport. Each tile shows one actor or
+one activated mini-app. There is no other arrangement and no pan, zoom or free placement. Use
+`context.functions.canvas_layout_replace` from TypeScript to set the arrangement, and read its exact
+input type with `typescript_api` before the first call.
 
-For a fixed, viewport-filling workspace set mode to "tiled" and supply root. A leaf is
-{entity:"@helper"} or {entity:"app:@workspace/main"}. A split has direction "horizontal"
-(left/right) or "vertical" (top/bottom), two positive weights and exactly two children.
-Children can be split again. For "50:50, app left, chat right", use:
-{mode:"tiled",root:{direction:"horizontal",weights:[1,1],children:[
-  {entity:"app:@workspace/main"},{entity:"@helper"}
-]}}. Use [2,1] for two thirds and one third. Use an outer vertical split and an inner
-horizontal split for one pane above two panes below. Resolve the user's actual actor and app
-names before calling; the example names are not existing participants.
-
-Tiled mode disables canvas pan, zoom and overview. Users with Actors access can remove panes
-and drag actors/apps from the header or pane title onto docking targets. Split dividers remain
-resizable without Actors access.
-Personal user arrangements take precedence over program suggestions until the user resets them.
-Do not repeatedly resend a layout to fight a personal override. Newly created participants stay
-available in the header without changing existing tiles. A mode/root-only call preserves the free
-canvas arrangement; {mode:"free"} restores it. A root-only call implies tiled mode; root:null
-clears the tiles. Free-layout updates supply nodes and replace the explicit nodes, shapes and
-lines together, so include everything that should remain there.
+`root` is the whole arrangement and replaces the stored one; it is the only parameter. A tile is
+{entity:"@helper"} or {entity:"app:@workspace/main"}. A split is {direction, weights, children} with
+direction "horizontal" (left/right) or "vertical" (top/bottom), two positive weights and exactly two
+children, each of which may be a split again. `root:null` clears the surface.
 
-Activate actor programs before placing their views. Reference a view as `app:@handle/view-key`
-or `app:program-name/view-key`, using the handle, program name and view key you chose. The server
-resolves the actual view ID and rejects unknown views before storing the layout. Do not invent
-or copy generated view IDs. The same references work in nodes and connection endpoints.
-`actor_view_set_visibility` uses the same package/view or @handle/view names without the `app:` prefix.
+App left, chat right at 50:50:
+{root:{direction:"horizontal",weights:[1,1],children:[
+  {entity:"app:@workspace/main"},{entity:"@helper"}
+]}}. One tile above two tiles at 2:1:
+{root:{direction:"vertical",weights:[2,1],children:[{entity:"@lead"},
+  {direction:"horizontal",weights:[1,1],children:[{entity:"@first"},{entity:"@second"}]}
+]}}. Resolve the actual actor and app names before calling; the example names are not existing
+participants.
 
-Place the essentials first and update the layout when the participants or flow change. The host
-adds unplaced visible participants and visible actor views automatically in free mode. Actors with their own
-views start hidden; their views remain on the canvas and the Actors list opens their inspector.
-A layout never overrides the user's personal actor visibility or connection choice. The user
-participates through the chat and does not need a separate canvas node.
+An actor tile carries {entity:"@helper",chatInput:false} when its chat composer should stay hidden.
+That changes neither permissions nor the inspector. Mini-app tiles have no chatInput.
 
-Choose arrangements by meaning: peers in a discussion, a sequence of work stages, a hierarchy or
-a collection of independent items. Keep groups small enough to read, preserve a useful order and
-add a frame only where a visible boundary helps. Leave space for expanded content and connection
-labels instead of packing cards tightly together.
+Activate actor programs before placing their views. Reference a view as `app:@handle/view-key` or
+`app:program-name/view-key`, using the handle, program name and view key you chose. The server
+resolves the actual view ID and rejects unknown views before storing the layout. Do not invent or
+copy generated view IDs. `actor_view_set_visibility` uses the same names without the `app:` prefix.
 
-Connections should explain actual relationships. Give them short, meaningful labels and choose
-direction and line style deliberately. The canvas does not infer the connections for you. Every
-connection must join existing entities. Shapes can represent stages, decisions or topics that are
-not actors; use them to explain the work without inventing additional participants.
+Place what the user needs to see side by side and update the arrangement when the work changes.
+Participants you do not place stay reachable through the run header and can be dragged onto a tile
+there. Users can move, resize and remove tiles themselves; their personal arrangement takes
+precedence until they reset it, so do not resend a layout to fight it. The user takes part through
+the chat and needs no tile of their own.