@schlenkr/ragents 0.1.10 → 0.1.11

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

@@ -2,7 +2,7 @@ import { cn } from "@ragents/web/ui";
 
 export type MaterialTone = "agent" | "primary" | "script" | "app";
 
-/** Schichtwerk: matte Front mit geraden Kanten. */
+/** Layered material: matte front with straight edges. */
 const materialBaseClass = "relative isolate rounded-panel border-[1.5px] border-(--material-edge) bg-(--material-face) [--material-edge:#514657] dark:[--material-edge:#b7a8bd]";
 
 const materialToneClass: Readonly<Record<MaterialTone, string>> = {
@@ -15,7 +15,7 @@ const materialToneClass: Readonly<Record<MaterialTone, string>> = {
 export const materialCardClass = (tone: MaterialTone, className?: string) =>
   cn(materialBaseClass, materialToneClass[tone], className);
 
-/** Kopfzeile einer Materialkarte: dieselbe Front, eine Spur dunkler, oben gerundet. */
+/** Header of a material card: the same front, a touch darker, rounded at the top. */
 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";
 
 export const materialTitleClass = "min-w-0 truncate p-0 text-[17px] font-[730] leading-[1.3] tracking-[-.5px]";

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

@@ -5,7 +5,7 @@ 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";
+const STOP_RUN_REASON = "Emergency stop by the operator";
 
 export function StopRunHeader({ session }: SessionHeaderContext) {
   return <ToolbarItem className="max-w-none"><StopRunButton key={session.session.id} runId={session.session.id} /></ToolbarItem>;
@@ -33,18 +33,18 @@ function StopRunButton({ runId }: { runId: string }) {
   if (!writable) return null;
   if (!armed) {
     return (
-      <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 onClick={() => setArmed(true)} size="sm" title="Ends the whole run: turns, agents and flows" variant="destructive">
+        <StopGlyph data-icon="inline-start" />Stop run
       </Button>
     );
   }
 
   return (
     <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
-      <span className="text-[0.72rem] font-semibold text-destructive">Wirklich alles stoppen?</span>
-      <Button disabled={busy} onClick={() => void stop()} size="sm" variant="destructive">Ja</Button>
+      <span className="text-[0.72rem] font-semibold text-destructive">Really stop everything?</span>
+      <Button disabled={busy} onClick={() => void stop()} size="sm" variant="destructive">Yes</Button>
       <Button disabled={busy} onClick={() => setArmed(false)} size="sm" variant="outline">
-        Abbrechen
+        Cancel
       </Button>
       {error && <span className="max-w-[260px] truncate text-[0.7rem] text-destructive" title={error}>{error}</span>}
     </span>

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

@@ -15,7 +15,7 @@ interface TiledSurfaceProps {
 }
 interface DockTarget { entity: string | null; side: TileDockSide }
 const sides: readonly TileDockSide[] = ["left", "right", "top", "bottom"];
-const sideNames = { left: "Links andocken", right: "Rechts andocken", top: "Oben andocken", bottom: "Unten andocken" };
+const sideNames = { left: "Dock left", right: "Dock right", top: "Dock top", bottom: "Dock bottom" };
 const sideIcons = { left: ArrowLeft, right: ArrowRight, top: ArrowUp, bottom: ArrowDown };
 const materialFaceRect = (slot: TileRect): TileRect => ({
   left: slot.left + 2,
@@ -164,11 +164,11 @@ export function TiledSurface({ root, onChange, items, canArrange, selectedEntity
 
   return <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2 data-[dragging]:[&_iframe]:pointer-events-none data-[resizing]:[&_iframe]:pointer-events-none"
     data-dragging={canArrange && dragEntity !== null || undefined} data-resizing={resizing || undefined}>
-    {compact && entities.length > 1 && <label className="flex items-center gap-2 pb-2 text-[0.8rem]">Kachel
-      <select className="max-w-[60%] min-w-0" aria-label="Sichtbare Kachel" value={active} onChange={(event) => select(event.target.value)}>
+    {compact && entities.length > 1 && <label className="flex items-center gap-2 pb-2 text-[0.8rem]">Tile
+      <select className="max-w-[60%] min-w-0" aria-label="Visible tile" value={active} onChange={(event) => select(event.target.value)}>
         {entities.map((entity) => <option key={entity} value={entity}>{itemMap.get(entity)?.title ?? entity}</option>)}
       </select>
-      <span className="truncate text-muted-foreground">Mehr Platz für die geteilte Ansicht benötigt</span>
+      <span className="truncate text-muted-foreground">More space needed for the split view</span>
     </label>}
     <div ref={stageRef} className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
       onDragOver={(event) => {
@@ -202,8 +202,8 @@ export function TiledSurface({ 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-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>}
+      {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="Close message" 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 ? "Drag an actor or a mini-app from the header here." : "No content has been arranged for this tile view yet."}</div>}
       {mountedEntities.map((entity) => {
         const item = itemMap.get(entity);
         const bounds = materialFaceRect(compact ? rect : geometry.leaves.get(entity)!);
@@ -222,16 +222,16 @@ export function TiledSurface({ root, onChange, items, canArrange, selectedEntity
               <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`}
+                type="button" draggable={false} aria-label={`Remove tile ${item?.title ?? entity}`}
                 onClick={() => onChange(removeTile(root, entity))}><X size={16} /></button>}
             </header>
-            <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto [&>*]:min-h-0 [&>*]:min-w-0 [&>*]:flex-1">{item?.content ?? <div className="p-4.5 text-muted-foreground">{canArrange ? "Dieser Inhalt ist nicht mehr verfügbar. Du kannst die Kachel entfernen oder einen anderen Inhalt hier andocken." : "Dieser Inhalt ist nicht mehr verfügbar."}</div>}</div>
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto [&>*]:min-h-0 [&>*]:min-w-0 [&>*]:flex-1">{item?.content ?? <div className="p-4.5 text-muted-foreground">{canArrange ? "This content is no longer available. You can remove the tile or dock other content here." : "This content is no longer available."}</div>}</div>
           </div>
           {canArrange && dragEntity !== null && dragEntity !== entity && <div className="absolute inset-0 z-4"><div className="pointer-events-none absolute top-1/2 left-1/2 size-[116px] -translate-x-1/2 -translate-y-1/2">{targets(entity)}</div></div>}
         </section>;
       })}
       {!compact && geometry.dividers.map((divider) => <div key={divider.path.join(".")} className={dividerClass}
-        role="separator" tabIndex={0} aria-label="Kachelgröße ändern"
+        role="separator" tabIndex={0} aria-label="Resize tile"
         aria-orientation={divider.direction === "horizontal" ? "vertical" : "horizontal"}
         aria-valuemin={Math.round(divider.minimum * 100)} aria-valuemax={Math.round(divider.maximum * 100)} aria-valuenow={Math.round(divider.ratio * 100)}
         data-direction={divider.direction} style={positioned(divider)}

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

@@ -4,10 +4,10 @@ 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];
 export const ACTOR_HEADER_MODE_LABELS: Record<ActorHeaderMode, string> = {
-  all: "Alle",
-  active: "Aktive",
-  visible: "Sichtbare",
-  agent: "LLM-Agenten",
+  all: "All",
+  active: "Active",
+  visible: "Visible",
+  agent: "LLM agents",
   script: "TypeScript",
 };
 
@@ -16,7 +16,7 @@ export const actorHeaderStorageKey = (runId: string) => `ragents.orchestration.a
 export function parseActorHeaderMode(raw: string | null): ActorHeaderMode {
   if (raw === null) return "visible";
   if (ACTOR_HEADER_MODES.some((mode) => mode === raw)) return raw as ActorHeaderMode;
-  throw new Error("Die gespeicherte Actor-Anzeige ist ungültig. Erlaubt sind all, active, visible, agent und script.");
+  throw new Error("The stored actor display is invalid. Allowed are all, active, visible, agent and script.");
 }
 
 export const actorOnStage = (actor: RunActor, primaryActorId: string | null | undefined, stage: ReadonlySet<string>) =>

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

@@ -1,7 +1,7 @@
 export const ORCHESTRATION_PLUGIN_ID = "ragents.orchestration";
 
-/** Knopf in der Statusleiste: volle Leistenhöhe, keine Rundung, ruhige Fläche. */
+/** Button in the status bar: full bar height, no rounding, calm surface. */
 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";
 
-/** Rahmen für die Plugin-Beiträge einer Actor-Karte; ein Beitrag bringt keine eigenen Abstaende mit. */
+/** Frame for the plugin contributions of an actor card; a contribution brings no spacing of its own. */
 export const cardSectionsClass = "grid gap-2.5 border-t border-border-soft px-3 pt-2.5 pb-2.5 empty:hidden";

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

@@ -39,7 +39,7 @@ export const executionEventsFrom = (value: unknown, runId: string): readonly Jou
     if (entry.type === "turn.finished") return typeof payload.turnId !== "string" || !["completed", "failed"].includes(String(payload.outcome));
     if (entry.type === "turn.interrupted") return typeof payload.turnId !== "string" || typeof payload.reason !== "string";
     return false;
-  })) throw new Error("Der Server hat kein gültiges Journal für diesen Run geliefert.");
+  })) throw new Error("The server did not deliver a valid journal for this run.");
   return value as JournalEvent[];
 };
 
@@ -100,24 +100,24 @@ export const projectExecutions = (events: readonly JournalEvent[], view?: Pick<R
       execution.status = "interrupted";
       execution.finishedAt = ended?.at ?? turn?.finishedAt ?? null;
     }
-    if (execution.status === "interrupted") execution.error = ended?.reason ?? turn?.reason ?? "Der Aufruf wurde unterbrochen.";
+    if (execution.status === "interrupted") execution.error = ended?.reason ?? turn?.reason ?? "The call was interrupted.";
   }
   return [...executions.values()].sort((left, right) => right.sequence - left.sequence);
 };
 
-export const executionStatusLabel = (status: ExecutionStatus): string => ({ running: "Läuft", completed: "Fertig", failed: "Fehlgeschlagen", interrupted: "Unterbrochen" })[status];
+export const executionStatusLabel = (status: ExecutionStatus): string => ({ running: "Running", completed: "Completed", failed: "Failed", interrupted: "Interrupted" })[status];
 
 export const filterExecutions = (executions: readonly TypeScriptExecution[], query: string, status: ExecutionStatus | "all"): TypeScriptExecution[] => {
-  const search = query.trim().toLocaleLowerCase("de-DE");
+  const search = query.trim().toLocaleLowerCase("en-US");
   return executions.filter((execution) => (status === "all" || execution.status === status) && (!search || [
     execution.actorId, execution.actorHandle, execution.actorName, execution.code, execution.path,
     JSON.stringify(execution.result), ...execution.logs, execution.error, executionStatusLabel(execution.status),
-  ].join("\n").toLocaleLowerCase("de-DE").includes(search)));
+  ].join("\n").toLocaleLowerCase("en-US").includes(search)));
 };
 
 export const executionDuration = (execution: Pick<TypeScriptExecution, "startedAt" | "finishedAt">, now: number): string => {
   const milliseconds = Math.max(0, (execution.finishedAt ? Date.parse(execution.finishedAt) : now) - Date.parse(execution.startedAt));
-  if (!Number.isFinite(milliseconds)) return "Dauer unbekannt";
+  if (!Number.isFinite(milliseconds)) return "Duration unknown";
   if (milliseconds < 1_000) return `${milliseconds} ms`;
   const seconds = Math.floor(milliseconds / 1_000);
   return seconds < 60 ? `${seconds} s` : `${Math.floor(seconds / 60)} min ${seconds % 60} s`;

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

@@ -1,4 +1,4 @@
 export const formatTime = (iso: string) => {
   const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString("de-DE");
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString("en-US");
 };

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

@@ -18,7 +18,7 @@ import {
 
 export { ORCHESTRATION_PLUGIN_ID } from "./constants";
 
-/** Die Auswahl auf der Fläche: ein Artefakt öffnet die Dokumente, jede andere Entität wird die gewählte Kachel und der gemeldete Standort. */
+/** The selection on the surface: an artifact opens the documents, every other entity becomes the selected tile and the reported location. */
 function OrchestrationSessionProvider({ children, navigation, session }: SessionProviderProps) {
   const runView = runViewFrom(session.runView);
   const [selection, setSelection] = useState<EntityReference>();
@@ -49,7 +49,7 @@ export const webPlugin: WebPlugin = {
     { id: "ragents.orchestration.actors", order: 300, placement: "surface", Header: ActorShortcuts },
   ],
   settings: [
-    { id: "ragents.orchestration.runPanel", category: "appearance", label: "Run-Panel", Settings: RunPanelSettings },
+    { id: "ragents.orchestration.runPanel", category: "appearance", label: "Run panel", Settings: RunPanelSettings },
   ],
   surface: { Center: OrchestrationCenter, RunPanel: OrchestrationRunPanel },
   cardSections: [{

package/plugins/ragents.orchestration/web/run-panel/AddresseeControl.tsx

@@ -11,7 +11,7 @@ import { ActorIcon, AddresseeTree } from "./AddresseeTree";
 const chipClass = "flex h-7 min-w-[70px] max-w-[220px] flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background pr-2 pl-1 text-[0.72rem] font-semibold text-foreground hover:bg-accent aria-expanded:border-primary focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
 const busyClass = "flex h-7 min-w-0 flex-[0_1_auto] cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-[0.7rem] text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-1";
 
-/** Der Adressat des Chats als Chip in der Eingabeleiste; das Pop-out zeigt die Actors als Baum nach Erzeuger, die ausgeblendeten hinter ihrer Zahl. */
+/** The chat's addressee as a chip in the input bar; the pop-out shows the actors as a tree by creator, the hidden ones behind their count. */
 export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, runId, selected, shown, technical, view }: {
   hidden: readonly RunActor[];
   onOpenChange: (open: boolean) => void;
@@ -57,13 +57,13 @@ export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, run
     (reveal ? onReveal : onSelect)(actor);
     close(true);
   };
-  const busyTitle = working.map((actor) => `@${actor.handle} arbeitet`).join(", ");
+  const busyTitle = working.map((actor) => `@${actor.handle} is working`).join(", ");
   const busyPending = working.length > 0 ? pendingInputCount(view, working[0].id) : 0;
   const treeProps = { onToggle: toggle, openByDefault: searching, selectedId: selected.id, summary, technical, toggled, view };
   const listClass = "px-1.5 py-1";
 
   return <>
-    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => change(!open)} ref={buttonRef} title={`Adressat: @${selected.handle}. Klick wählt einen anderen Actor`} type="button">
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={chipClass} onClick={() => change(!open)} ref={buttonRef} title={`Addressee: @${selected.handle}. Click to choose another actor`} type="button">
       <ActorIcon actor={selected} className="size-5" view={view} />
       <span className="truncate">@{selected.handle}</span>
       <ChevronDownIcon aria-hidden className="size-3 flex-none text-muted-foreground" />
@@ -74,16 +74,16 @@ export function AddresseeControl({ hidden, onOpenChange, onReveal, onSelect, run
       {busyPending > 0 && <Badge className="h-4 min-w-4 px-1 text-[0.6rem]" variant="secondary">{busyPending}</Badge>}
       {working.length > 1 && <span className="flex-none">+{working.length - 1}</span>}
     </button>}
-    {open && <ActorPopout buttonRef={buttonRef} closeLabel="Adressat schließen" height={460} id={panelId} label="Adressat" onClose={close} open placement="top" role="dialog" width="available">
+    {open && <ActorPopout buttonRef={buttonRef} closeLabel="Close addressee" height={460} id={panelId} label="Addressee" onClose={close} open placement="top" role="dialog" width="available">
       {shown.length + hidden.length > ADDRESSEE_SEARCH_ABOVE && <div className="flex-none border-b border-border-soft px-2.5 py-1.5">
-        <Input aria-label="Actors durchsuchen" className="h-7" onChange={(event) => setQuery(event.target.value)} placeholder="Handle oder Aufgabe suchen ..." type="search" value={query} />
+        <Input aria-label="Search actors" className="h-7" onChange={(event) => setQuery(event.target.value)} placeholder="Search handle or task ..." type="search" value={query} />
       </div>}
       <div className="min-h-0 flex-1 overflow-auto overscroll-contain" ref={revealSelected}>
         <AddresseeTree className={listClass} nodes={shownTree} onPick={(actor) => pick(actor, false)} {...treeProps} />
-        {searching && shownTree.length === 0 && hiddenMatches.length === 0 && <p className="px-3.5 py-2 text-muted-foreground">Kein Actor passt zur Suche.</p>}
+        {searching && shownTree.length === 0 && hiddenMatches.length === 0 && <p className="px-3.5 py-2 text-muted-foreground">No actor matches the search.</p>}
         {hidden.length > 0 && (!searching || hiddenMatches.length > 0) && <div className="border-t border-border-soft">
           <button aria-expanded={hiddenOpen} className="flex w-full cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-left text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2" onClick={() => setHiddenListed(!hiddenOpen)} type="button">
-            <span>{hidden.length} ausgeblendete Actors</span>
+            <span>{hidden.length} hidden actors</span>
             <ChevronDownIcon aria-hidden className={cn("size-3.5 flex-none transition-transform", hiddenOpen && "rotate-180")} />
           </button>
           {hiddenOpen && <AddresseeTree className={listClass} nodes={hiddenTree} onPick={(actor) => pick(actor, true)} {...treeProps} />}

package/plugins/ragents.orchestration/web/run-panel/AddresseeTree.tsx

@@ -19,7 +19,7 @@ const statusClass: Readonly<Record<AddresseeStatus, string>> = {
   stopped: "text-muted-foreground/70",
 };
 
-const actorType = (actor: RunActor, technical: boolean) => !technical ? "Agent" : actor.kind === "agent" ? "LLM-Agent" : "TypeScript-Actor";
+const actorType = (actor: RunActor, technical: boolean) => !technical ? "Agent" : actor.kind === "agent" ? "LLM agent" : "TypeScript actor";
 
 export function ActorIcon({ actor, className, view }: { actor: RunActor; className?: string; view: RunView }) {
   const tone = actorTone(view, actor);
@@ -33,15 +33,15 @@ export interface AddresseeTreeProps {
   selectedId: string;
   technical: boolean;
   summary: (actor: RunActor) => string | undefined;
-  /** Gruppen, deren Aufklappzustand der Benutzer gegenüber der Vorgabe umgeschaltet hat. */
+  /** Groups whose expanded state the user toggled relative to the default. */
   toggled: ReadonlySet<string>;
-  /** Offen ohne eigene Wahl, etwa während einer Suche. */
+  /** Open without an own choice, e.g. during a search. */
   openByDefault: boolean;
   onToggle: (key: string) => void;
   onPick: (actor: RunActor) => void;
 }
 
-/** Der Adressatenbaum: je Actor Handle, Kurzbeschreibung und Zustand, gleichartige Geschwister als aufklappbare Gruppe. */
+/** The addressee tree: per actor handle, short description and state, similar siblings as an expandable group. */
 export function AddresseeTree({ className, nodes, ...props }: AddresseeTreeProps & { className?: string; nodes: readonly AddresseeNode[] }) {
   return <ul className={cn("list-none", className)}>
     {nodes.map((node) => node.kind === "actor"
@@ -62,10 +62,10 @@ function ActorEntry({ actor, onPick, selectedId, summary, technical, view }: Add
   const status = addresseeStatus(view, actor);
   const description = summary(actor);
   const name = actor.displayName.trim();
-  const showName = name !== "" && name.toLocaleLowerCase("de-DE") !== actor.handle.toLocaleLowerCase("de-DE") && name !== description;
+  const showName = name !== "" && name.toLocaleLowerCase("en-US") !== actor.handle.toLocaleLowerCase("en-US") && name !== description;
   const current = actor.id === selectedId;
   return <button aria-current={current || undefined} className={entryClass} data-actor-handle={actor.handle} onClick={() => onPick(actor)}
-    title={`@${actor.handle}, ${actorType(actor, technical)}, ${addresseeStatusWord(status)}. Nachrichten an @${actor.handle} richten`} type="button">
+    title={`@${actor.handle}, ${actorType(actor, technical)}, ${addresseeStatusWord(status)}. Address messages to @${actor.handle}`} type="button">
     <ActorIcon actor={actor} className="size-5" view={view} />
     <span className="grid min-w-0 flex-1">
       <span className="flex min-w-0 items-baseline gap-1.5">
@@ -88,14 +88,14 @@ function GroupBranch({ node, ...props }: AddresseeTreeProps & { node: AddresseeG
   const pending = actors.reduce((sum, actor) => sum + pendingInputCount(view, actor.id), 0);
   return <li>
     <button aria-expanded={open} className={entryClass} data-addressee-group={node.label} onClick={() => onToggle(node.key)}
-      title={`${node.label}: ${actors.length} gleichartige Actors, ${counts}. Klick ${open ? "klappt die Gruppe zu" : "zeigt alle"}`} type="button">
+      title={`${node.label}: ${actors.length} similar actors, ${counts}. Click ${open ? "collapses the group" : "shows all"}`} type="button">
       <span className="grid size-5 flex-none place-items-center text-muted-foreground">
         <ChevronRightIcon aria-hidden className={cn("size-3.5 transition-transform", open && "rotate-90")} />
       </span>
       <span className="grid min-w-0 flex-1">
         <span className="flex min-w-0 items-baseline gap-1.5">
           <span className="truncate font-semibold">{node.label}</span>
-          <span className="flex-none text-[0.66rem] text-muted-foreground">{actors.length} Actors</span>
+          <span className="flex-none text-[0.66rem] text-muted-foreground">{actors.length} actors</span>
         </span>
         <span className="truncate text-[0.66rem] text-muted-foreground">{counts}</span>
       </span>

package/plugins/ragents.orchestration/web/run-panel/RunPanel.tsx

@@ -35,9 +35,9 @@ const chatLayoutClass: Readonly<Record<ChatLayout, string>> = {
 const chatSurfaceClass = "rounded-none border-0 bg-transparent";
 const chatModeButtonClass = "aria-pressed:bg-accent aria-pressed:text-primary";
 const chatModes: readonly { Icon: typeof MessageSquareIcon; label: string; mode: RunPanelChatMode; title: string }[] = [
-  { Icon: MessageSquareIcon, label: "Nur Chat", mode: "chat", title: "Nur Chat: der Chat füllt das Run-Panel, die Mini-App tritt zurück" },
-  { Icon: PanelBottomIcon, label: "Chat unten", mode: "bottom", title: "Chat unten: das Sheet über der Mini-App" },
-  { Icon: PanelRightIcon, label: "Chat rechts", mode: "side", title: "Chat rechts: neben der Mini-App" },
+  { Icon: MessageSquareIcon, label: "Chat only", mode: "chat", title: "Chat only: the chat fills the run panel, the mini-app steps back" },
+  { Icon: PanelBottomIcon, label: "Chat at bottom", mode: "bottom", title: "Chat at bottom: the sheet over the mini-app" },
+  { Icon: PanelRightIcon, label: "Chat on right", mode: "side", title: "Chat on right: next to the mini-app" },
 ];
 
 interface RunPanelElement {
@@ -153,7 +153,7 @@ function RunPanel({ surfaceElements, cardSections, navigation, renderChat, sessi
 
   return <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-app" data-run-panel="run" ref={rootRef}>
     {chatModeSwitch}
-    {layout !== "full" && elements.length > 1 && <nav aria-label="Mini-Apps des Runs" className={chipRowClass}>
+    {layout !== "full" && elements.length > 1 && <nav aria-label="Mini-apps of the run" className={chipRowClass}>
       {elements.map(({ definition }) => <ElementChip
         centered={centered.has(definition.id)}
         definition={definition}
@@ -194,7 +194,7 @@ function RunPanel({ surfaceElements, cardSections, navigation, renderChat, sessi
       >
         {layout === "floating" && <button
           aria-expanded={sheet.expanded}
-          aria-label="Höhe des ausgeklappten Chats"
+          aria-label="Height of the expanded chat"
           aria-orientation="horizontal"
           aria-valuemin={geometry.minimum}
           aria-valuemax={geometry.maximum}
@@ -210,7 +210,7 @@ function RunPanel({ surfaceElements, cardSections, navigation, renderChat, sessi
           onLostPointerCapture={resize.onPointerCancel}
           ref={grabRef}
           role="separator"
-          title={`Ziehen: ausgeklappte Höhe einstellen. Klicken: ${sheet.expanded ? "Chat absenken" : "Chat hochschieben"}.`}
+          title={`Drag: set the expanded height. Click: ${sheet.expanded ? "lower chat" : "raise chat"}.`}
           type="button"
         ><span aria-hidden className="h-1 w-9 rounded-full bg-border-strong transition-colors" /></button>}
         {status && <button
@@ -229,14 +229,14 @@ function RunPanel({ surfaceElements, cardSections, navigation, renderChat, sessi
   </div>;
 }
 
-/** Die drei Ansichten des Run-Panels in der Kopfzeile; "Chat rechts" bleibt gesperrt, solange das Run-Panel zu schmal ist. */
+/** The three views of the run panel in the header; "Chat on right" stays disabled while the run panel is too narrow. */
 function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
   narrow: boolean;
   onChange: (mode: RunPanelChatMode) => void;
   selected: RunPanelChatMode;
   sideWidth: number;
 }) {
-  return <div aria-label="Ansicht des Run-Panels" className="flex flex-none items-center gap-0.5 self-center rounded-lg border border-border bg-card p-0.5" role="group">
+  return <div aria-label="Run panel view" className="flex flex-none items-center gap-0.5 self-center rounded-lg border border-border bg-card p-0.5" role="group">
     {chatModes.map(({ Icon, label, mode, title }) => {
       const blocked = mode === "side" && narrow;
       return <Button
@@ -247,14 +247,14 @@ function ChatModeSwitch({ narrow, onChange, selected, sideWidth }: {
         key={mode}
         onClick={() => onChange(mode)}
         size="icon-sm"
-        title={blocked ? `Chat bleibt unten, solange das Panel schmaler als ${sideWidth} Pixel ist` : title}
+        title={blocked ? `Chat stays at the bottom while the panel is narrower than ${sideWidth} pixels` : title}
         variant="ghost"
       ><Icon /></Button>;
     })}
   </div>;
 }
 
-/** Das Sheet: Maus, Fokus oder der Griff schieben es hoch; Escape, die Bühne oder der Griff senken es. Ein offenes Pop-out hält es oben. */
+/** The sheet: mouse, focus or the grip raise it; Escape, the stage or the grip lower it. An open pop-out keeps it up. */
 function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, blocked: boolean, openDelay: number) {
   const [expanded, setExpanded] = useState(false);
   const [held, setHeld] = useState(false);
@@ -307,7 +307,7 @@ function useSheet(active: boolean, sheetRef: RefObject<HTMLElement | null>, grab
   return { expanded, held, open, openLater, closeLater, close, toggle, pauseResize, finishResize };
 }
 
-/** Die Höhe des zugeschobenen Sheets: Griff, Statuszeile und Eingabe samt offener Aktionen darüber, gemessen an der Eingabe des Chat-Rahmens. */
+/** The height of the collapsed sheet: grip, status line and input including open actions above it, measured on the input of the chat frame. */
 function useSheetPeek(active: boolean, sheetRef: RefObject<HTMLElement | null>, grabRef: RefObject<HTMLButtonElement | null>, statusRef: RefObject<HTMLButtonElement | null>, actorId: string | undefined) {
   const [geometry, setGeometry] = useState({ minimum: 0, maximum: 0, available: 0, scale: 1 });
   useLayoutEffect(() => {
@@ -317,7 +317,7 @@ function useSheetPeek(active: boolean, sheetRef: RefObject<HTMLElement | null>,
     const status = statusRef.current;
     const composer = sheet?.querySelector<HTMLElement>('[data-chat="composer"]');
     const container = sheet?.parentElement;
-    if (!sheet || !grab || !composer || !container) throw new Error("Das Sheet des Panels findet Griff, Eingabe oder Rahmen nicht.");
+    if (!sheet || !grab || !composer || !container) throw new Error("The panel sheet cannot find the grip, input or frame.");
     const measure = () => {
       const style = getComputedStyle(sheet);
       const width = sheet.getBoundingClientRect().width;
@@ -422,10 +422,10 @@ function ElementChip({ centered, definition, onSelect, selected, session, view }
   const programs = useProgramSlot();
   const title = definition.title ?? definition.id;
   const attention = elementNeedsAttention(view, definition, programs?.needsAnswer(session, definition.id) ?? false);
-  return <button aria-pressed={selected && !centered} className={chipClass} data-tone="app" onClick={onSelect} title={centered ? `${title} liegt in der Mitte. Klick holt das Fenster nach vorn.` : `Mini-App ${title} anzeigen`} type="button">
+  return <button aria-pressed={selected && !centered} className={chipClass} data-tone="app" onClick={onSelect} title={centered ? `${title} is in the center. Click brings the window to the front.` : `Show mini-app ${title}`} type="button">
     <span className="grid size-5 flex-none place-items-center rounded-full bg-glass-app text-foreground [&>svg]:size-3"><LayoutGridIcon /></span>
     <span className="truncate">{title}</span>
-    {attention && <span aria-label="Antwort erwartet" className="grid size-4 flex-none place-items-center rounded-full bg-warning text-[0.62rem] font-bold text-background" role="img">!</span>}
+    {attention && <span aria-label="Answer expected" className="grid size-4 flex-none place-items-center rounded-full bg-warning text-[0.62rem] font-bold text-background" role="img">!</span>}
     {centered && <ArrowUpRightIcon aria-hidden className="size-3 flex-none text-muted-foreground" />}
   </button>;
 }
@@ -442,24 +442,24 @@ function RunPanelStage({ centered, element, navigation, peek, runId, session }:
   const programs = useProgramSlot();
   const { Element, definition } = element;
   const title = definition.title ?? definition.id;
-  return <section aria-label={`Mini-App ${title}`} className="group/stage relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-app" style={peek > 0 ? { paddingBottom: peek } : undefined}>
+  return <section aria-label={`Mini-app ${title}`} className="group/stage relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-app" style={peek > 0 ? { paddingBottom: peek } : undefined}>
     <div className="absolute top-1.5 right-2 z-[5] flex gap-0.5 rounded-lg border border-border bg-card p-0.5 opacity-0 transition-opacity group-hover/stage:opacity-100 group-focus-within/stage:opacity-100 motion-reduce:transition-none">
       {host.kind === "vscode"
-        ? <Button aria-label={`${title} in die Mitte legen`} onClick={() => host.openInCenter(runId, definition.id, title)} size="icon-sm" title="In die Mitte legen" variant="ghost"><ArrowUpRightIcon /></Button>
-        : programs && <Button aria-label={`${title} in Vollansicht öffnen`} onClick={() => programs.openFullscreen(definition.id)} size="icon-sm" title="Vollansicht" variant="ghost"><Maximize2Icon /></Button>}
+        ? <Button aria-label={`Move ${title} to the center`} onClick={() => host.openInCenter(runId, definition.id, title)} size="icon-sm" title="Move to the center" variant="ghost"><ArrowUpRightIcon /></Button>
+        : programs && <Button aria-label={`Open ${title} in full view`} onClick={() => programs.openFullscreen(definition.id)} size="icon-sm" title="Full view" variant="ghost"><Maximize2Icon /></Button>}
     </div>
     <div className="relative flex min-h-0 flex-1 flex-col" data-run-panel="stage">
       {centered
         ? <div className="m-auto grid gap-3 p-4 text-center text-[0.76rem] text-muted-foreground" role="status">
-          <span>{title} liegt in der Mitte.</span>
-          <Button onClick={() => host.returnToRunPanel(runId, definition.id)} size="sm" variant="outline">Zurück ins Panel</Button>
+          <span>{title} is in the center.</span>
+          <Button onClick={() => host.returnToRunPanel(runId, definition.id)} size="sm" variant="outline">Back to panel</Button>
         </div>
         : <Element definition={definition} navigation={navigation} session={session} />}
     </div>
   </section>;
 }
 
-/** Der senkrechte Griff zwischen Bühne und Chat daneben; ziehen nach links macht den Chat breiter. */
+/** The vertical grip between stage and the chat next to it; dragging left makes the chat wider. */
 function Sash({ onChange, onCommit, value }: { onChange: (next: number) => void; onCommit: (next: number) => void; value: number }) {
   const drag = useRef<{ startX: number; startWidth: number }>(undefined);
   const finish = (event: PointerEvent<HTMLDivElement>) => {
@@ -469,7 +469,7 @@ function Sash({ onChange, onCommit, value }: { onChange: (next: number) => void;
     onCommit(value);
   };
   return <div
-    aria-label="Breite des Chats"
+    aria-label="Chat width"
     aria-orientation="vertical"
     aria-valuenow={value}
     className="flex w-2.5 flex-none cursor-col-resize touch-none items-center justify-center border-r border-l border-border bg-shell select-none hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2"
@@ -516,7 +516,7 @@ function ActorRunPanelChat({ actor, cardSections, navigation, notice, onNavigate
   </div>;
 }
 
-/** Der Ladezustand mittig im Chat; er rückt nur hoch, wo er sonst unter die Eingabe geriete. */
+/** The loading state centered in the chat; it only moves up where it would otherwise end up under the input. */
 function RunPanelStartup({ state }: { state: SurfaceStartupState }) {
   return <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto_minmax(var(--qsl-composer-height,0px),1fr)] justify-items-center overflow-hidden p-6">
     <StartupNotice className="row-start-2" state={state} />

package/plugins/ragents.orchestration/web/run-panel/RunPanelSettings.tsx

@@ -8,9 +8,9 @@ type Draft = Record<keyof RunPanelSettingsValue, string>;
 const toDraft = (value: RunPanelSettingsValue): Draft => ({ sideWidth: String(value.sideWidth), openDelay: String(value.openDelay), closeDelay: String(value.closeDelay) });
 
 const fields: readonly { key: keyof RunPanelSettingsValue; label: string; unit: string }[] = [
-  { key: "sideWidth", label: "Chat neben der Mini-App ab", unit: "px" },
-  { key: "openDelay", label: "Hochschieben nach", unit: "ms" },
-  { key: "closeDelay", label: "Zurück nach Verlassen nach", unit: "ms" },
+  { key: "sideWidth", label: "Chat next to the mini-app from", unit: "px" },
+  { key: "openDelay", label: "Slide up after", unit: "ms" },
+  { key: "closeDelay", label: "Slide back after leaving after", unit: "ms" },
 ];
 
 export function RunPanelSettings() {
@@ -27,7 +27,7 @@ export function RunPanelSettings() {
     setMessage(undefined);
     try {
       saveRunPanelSettings(next);
-      setMessage("Einstellungen des Run-Panels gespeichert.");
+      setMessage("Run panel settings saved.");
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     }
@@ -36,14 +36,14 @@ export function RunPanelSettings() {
     event.preventDefault();
     save({ sideWidth: Number(draft.sideWidth), openDelay: Number(draft.openDelay), closeDelay: Number(draft.closeDelay) });
   }}>
-    <p className="text-muted-foreground">Ab dieser Breite des Panels liegt der Chat rechts neben der Mini-App statt als Sheet darunter. Die Verzögerungen bestimmen, wie lange die Maus über dem Sheet liegen muss, bis es hochgleitet, und wie lange es nach dem Verlassen oben bleibt. Gilt sofort für alle Runs in diesem Browser.</p>
+    <p className="text-muted-foreground">From this panel width on, the chat sits to the right of the mini-app instead of as a sheet below it. The delays determine how long the mouse must rest over the sheet until it slides up, and how long it stays up after leaving. Applies immediately to all runs in this browser.</p>
     <div className="flex flex-wrap items-end gap-3">
       {fields.map(({ key, label, unit }) => <label className="grid gap-1.5" key={key}>
         <span>{label} ({unit})</span>
         <Input className="w-[130px]" disabled={!writable} max={RUN_PANEL_SETTINGS_LIMITS[key].max} min={RUN_PANEL_SETTINGS_LIMITS[key].min} onChange={(event) => { setDraft({ ...draft, [key]: event.target.value }); setMessage(undefined); }} required step="1" type="number" value={draft[key]} />
       </label>)}
-      <Button disabled={!writable} type="submit">Speichern</Button>
-      <Button disabled={!writable} onClick={() => save(DEFAULT_RUN_PANEL_SETTINGS)} variant="outline">Zurücksetzen</Button>
+      <Button disabled={!writable} type="submit">Save</Button>
+      <Button disabled={!writable} onClick={() => save(DEFAULT_RUN_PANEL_SETTINGS)} variant="outline">Reset</Button>
     </div>
     {error ? <p className="text-muted-foreground" role="alert">{error}</p> : message && <p className="text-muted-foreground" role="status">{message}</p>}
   </form>;