@schlenkr/ragents 0.1.4 → 0.1.6

package/apps/web/src/access-session.ts

@@ -16,12 +16,15 @@ export function accessSnapshotFrom(value: unknown): AccessSnapshot {
     ...(user.startEntries !== undefined ? { startEntries: user.startEntries as string[] } : {}) } };
 }
 
+/** Die Pfade, die der Server hinter die Anmeldung stellt; über /rpc und /rpc/stream laufen alle Daten der Oberfläche. */
+const PROTECTED_PATH = /^\/(?:api|rpc|files)(?:\/|$)/;
+
 export function observeAccessExpiry(request: typeof fetch, origin: string, onExpired: () => void): typeof fetch {
   return async (input, init) => {
     const response = await request(input, init);
     const url = new URL(typeof input === "string" || input instanceof URL ? input : input.url, origin);
     if (response.status === 401 && url.origin === origin && !url.pathname.startsWith("/api/access/")
-      && /^\/(api|chat|ragents)(\/|$)/.test(url.pathname)) onExpired();
+      && PROTECTED_PATH.test(url.pathname)) onExpired();
     return response;
   };
 }

package/{plugins/ragents.orchestration/web → apps/web/src}/actor-conversation.ts

@@ -1,5 +1,5 @@
-import type { Message } from "@aicontainer/web/chat/types";
-import { withToolSummaries } from "@aicontainer/web/toolLine";
+import type { Message } from "quassel/events";
+import { withToolSummaries } from "./toolLine";
 import { runTurnOutputs, type RunActor, type RunActorInput, type RunView } from "./run-view";
 
 const ACTOR_HUES = [212, 158, 28, 283, 350, 190, 95, 320, 55, 245];
@@ -20,7 +20,7 @@ export const actorConversation = (view: RunView, actor: RunActor): Message[] =>
       const fromOwner = input.enqueuedBy === view.ownerId;
       const attachments = input.artifactIds.map((id) => {
         const artifact = view.artifacts.find((entry) => entry.id === id);
-        if (!artifact) throw new Error(`Anhang ${id} fehlt in der Laufansicht`);
+        if (!artifact) throw new Error(`Anhang ${id} fehlt in der Run-Ansicht`);
         return {
           name: artifact.title, mediaType: artifact.mediaType, size: artifact.size,
           url: `/chat/${encodeURIComponent(view.id)}/attachments/${encodeURIComponent(id)}`,

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/DataTable.tsx

@@ -1,6 +1,6 @@
 import React, { useId, useRef, useState } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
-import { Button, Checkbox, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../apps/web/src/ui";
+import { Button, Checkbox, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui";
 import type { DataTableProps, TableAction, TableColumn, TableValue } from "./table-contracts";
 
 export type TableSort = { id: string; direction: "asc" | "desc" };
@@ -24,7 +24,7 @@ export function tableRows<Row>(rows: readonly Row[], columns: readonly TableColu
 }
 
 export function DataTable<Row>(props: DataTableProps<Row>) {
-  const { title, rows, columns, rowKey, actions = [], filterable = false, loading = false, emptyText = "Keine Einträge." } = props;
+  const { title, rows, columns, rowKey, actions = [], filterable = false, loading = false, emptyText = "No entries." } = props;
   const filterId = useId();
   const [query, setQuery] = useState("");
   const [sort, setSort] = useState<TableSort>();
@@ -35,9 +35,9 @@ export function DataTable<Row>(props: DataTableProps<Row>) {
   const selected = new Set(props.selectedKeys);
   const selectable = props.onSelectionChange !== undefined;
   const keys = rows.map(rowKey);
-  if (new Set(keys).size !== rows.length || keys.some((key) => !key.trim())) throw new Error("Tabellenzeilen benötigen eindeutige, nicht leere Schlüssel.");
-  if (columns.length === 0 || new Set(columns.map((column) => column.id)).size !== columns.length || columns.some((column) => !column.id.trim())) throw new Error("Eine Tabelle benötigt Spalten mit eindeutigen, nicht leeren IDs.");
-  if (new Set(actions.map((action) => action.id)).size !== actions.length || actions.some((action) => !action.id.trim())) throw new Error("Tabellenaktionen benötigen eindeutige, nicht leere IDs.");
+  if (new Set(keys).size !== rows.length || keys.some((key) => !key.trim())) throw new Error("Table rows require unique, non-empty keys.");
+  if (columns.length === 0 || new Set(columns.map((column) => column.id)).size !== columns.length || columns.some((column) => !column.id.trim())) throw new Error("A table requires columns with unique, non-empty IDs.");
+  if (new Set(actions.map((action) => action.id)).size !== actions.length || actions.some((action) => !action.id.trim())) throw new Error("Table actions require unique, non-empty IDs.");
   const visibleKeys = visible.map(rowKey);
   const allSelected = visibleKeys.length > 0 && visibleKeys.every((key) => selected.has(key));
   const partiallySelected = !allSelected && visibleKeys.some((key) => selected.has(key));
@@ -64,11 +64,11 @@ export function DataTable<Row>(props: DataTableProps<Row>) {
     <section aria-label={title ?? "Datentabelle"} aria-busy={loading} className="flex min-w-0 flex-col gap-3">
       {title && <h2 className="text-base font-semibold">{title}</h2>}
       {filterable && <Input aria-label="Tabelle durchsuchen" id={filterId} onChange={(event) => setQuery(event.target.value)} placeholder="Tabelle durchsuchen" type="search" value={query} />}
-      {loading && <p className="text-sm text-muted-foreground" role="status">Wird geladen ...</p>}
+      {loading && <p className="text-sm text-muted-foreground" role="status">Loading...</p>}
       <div aria-label={title ?? "Tabelleninhalt"} className="max-w-full overflow-auto" role="region" tabIndex={0}>
         <Table>
           <TableHeader><TableRow>
-            {selectable && <TableHead className="w-8"><Checkbox aria-label="Alle sichtbaren Zeilen auswählen" checked={allSelected} disabled={loading || visible.length === 0} indeterminate={partiallySelected} onCheckedChange={toggleVisible} /></TableHead>}
+            {selectable && <TableHead className="w-8"><Checkbox aria-label="Select all visible rows" checked={allSelected} disabled={loading || visible.length === 0} indeterminate={partiallySelected} onCheckedChange={toggleVisible} /></TableHead>}
             {columns.map((column) => <TableHead aria-sort={sort?.id === column.id ? sort.direction === "asc" ? "ascending" : "descending" : undefined} key={column.id}>
               {column.sortable
                 ? <Button className="-ml-2 h-7 gap-1 px-2 font-medium" onClick={() => setSort((current) => current?.id === column.id && current.direction === "asc" ? { id: column.id, direction: "desc" } : { id: column.id, direction: "asc" })} size="sm" variant="ghost">
@@ -82,11 +82,11 @@ export function DataTable<Row>(props: DataTableProps<Row>) {
             {visible.map((row) => {
               const key = rowKey(row);
               return <TableRow aria-selected={selectable ? selected.has(key) : undefined} data-state={selectable && selected.has(key) ? "selected" : undefined} key={key}>
-                {selectable && <TableCell><Checkbox aria-label={`Zeile ${key} auswählen`} checked={selected.has(key)} disabled={loading} onCheckedChange={() => { const next = new Set(selected); if (next.has(key)) next.delete(key); else next.add(key); props.onSelectionChange?.([...next]); }} /></TableCell>}
+                {selectable && <TableCell><Checkbox aria-label={`Select row ${key}`} checked={selected.has(key)} disabled={loading} onCheckedChange={() => { const next = new Set(selected); if (next.has(key)) next.delete(key); else next.add(key); props.onSelectionChange?.([...next]); }} /></TableCell>}
                 {columns.map((column) => <TableCell className="align-top break-words whitespace-normal" key={column.id}>{column.render ? column.render(row) : displayValue(column.value(row))}</TableCell>)}
                 {actions.length > 0 && <TableCell className="align-top">
                   <div aria-busy={pending.has(key)} className="flex flex-wrap gap-1.5">{actions.map((action) => <Button disabled={loading || pending.has(key) || action.disabled?.(row)} key={action.id} onClick={() => void runAction(action, row, key)} size="sm" variant="outline">{action.label}</Button>)}</div>
-                  {pending.has(key) && <span className="text-xs text-muted-foreground" role="status">Wird ausgeführt ...</span>}
+                  {pending.has(key) && <span className="text-xs text-muted-foreground" role="status">Running...</span>}
                   {errors.has(key) && <p className="mt-1.5 text-sm text-destructive" role="alert">{errors.get(key)}</p>}
                 </TableCell>}
               </TableRow>;

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/FilePicker.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId, useRef, useState } from "react";
-import { SourceCode } from "../../../apps/web/src/SourceCode";
-import { Button, cn, Label, useFileInput } from "../../../apps/web/src/ui";
+import { SourceCode } from "../../SourceCode";
+import { Button, cn, Label, useFileInput } from "../../ui";
 import type { FilePickerProps } from "./file-contracts";
 import { fileSelection } from "./file-selection";
 
@@ -15,7 +15,7 @@ function FilePreview({ file }: { file: File }) {
     }
     if (/^(text\/|application\/(json|xml)$)/.test(file.type) || /\.(txt|md|csv|json|xml|log)$/i.test(file.name)) {
       void file.slice(0, 100_000).text().then((text) => {
-        if (active) setPreview({ file, text: text + (file.size > 100_000 ? "\nVorschau auf 100.000 Bytes gekürzt." : "") });
+        if (active) setPreview({ file, text: text + (file.size > 100_000 ? "\nPreview truncated to 100,000 bytes." : "") });
       }).catch((cause: unknown) => {
         if (active) setPreview({ file, error: cause instanceof Error ? cause.message : String(cause) });
       });
@@ -52,7 +52,7 @@ export function FilePicker({ label, files, onChange, disabled, showPreview = tru
     <div className={cn("grid gap-1.5 rounded-lg border border-dashed bg-muted/40 p-3", fileInput.dragging && "border-primary bg-background")} {...fileInput.dropProps}>
       <Label htmlFor={id}>{label}</Label>
       <input accept={options.accept} className="max-w-full min-w-0 text-sm file:mr-2 file:rounded-md file:border file:bg-background file:px-2 file:py-1 file:text-sm" disabled={blocked} id={id} multiple={options.multiple !== false} type="file" {...fileInput.inputProps} />
-      <p className="text-xs text-muted-foreground">Dateien auswählen, hier hineinziehen oder bei fokussierter Dateiauswahl einfügen.</p>
+      <p className="text-xs text-muted-foreground">Select files, drag them here, or paste while the file picker is focused.</p>
       {options.accept && <p className="text-xs text-muted-foreground">Erlaubt: {options.accept}</p>}
     </div>
     {error && <p className="mt-2 text-sm text-destructive" role="alert">{error}</p>}

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/FlowDiagram.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useEffect, useMemo, useState } from "react";
-import { cn } from "../../../apps/web/src/ui";
+import { cn } from "../../ui";
 import type { Edge, Node } from "@xyflow/react";
 import type { ElkNode } from "elkjs/lib/elk-api";
 import type { FlowDiagramProps } from "./flow-diagram-contracts";
@@ -53,7 +53,7 @@ const edgeStatuses = ["pending", "active", "done", "blocked"];
 
 function prepare({ nodes, edges, direction = "right", height = 360, viewport = "interactive", detailLevel = "summary", layout = "layered" }: FlowDiagramProps) {
   if (viewport !== "interactive" && viewport !== "fit-width" && viewport !== "fit") throw new Error("Unbekannter Diagrammansichtsmodus.");
-  if (!Number.isFinite(height) || height <= 0) throw new Error("Die Diagrammhöhe muss positiv sein.");
+  if (!Number.isFinite(height) || height <= 0) throw new Error("The diagram height must be positive.");
   if (direction !== "right" && direction !== "down") throw new Error("Unbekannte Diagrammrichtung.");
   if (detailLevel !== "full" && detailLevel !== "summary") throw new Error("Unbekannte Diagrammdetailstufe.");
   if (layout !== "layered" && layout !== "star") throw new Error("Unbekannte Diagrammanordnung.");
@@ -61,26 +61,26 @@ function prepare({ nodes, edges, direction = "right", height = 360, viewport = "
   const textWidth = textMeasure();
   const ids = new Set<string>();
   const cards = nodes.map((node): CardNode => {
-    if (typeof node.id !== "string" || !node.id.trim() || ids.has(node.id)) throw new Error("Knoten benötigen eindeutige, nicht leere IDs.");
+    if (typeof node.id !== "string" || !node.id.trim() || ids.has(node.id)) throw new Error("Nodes require unique, non-empty IDs.");
     ids.add(node.id);
-    if (typeof node.label !== "string" || (node.detail !== undefined && typeof node.detail !== "string")) throw new Error("Knotenbeschriftungen müssen Text sein.");
+    if (typeof node.label !== "string" || (node.detail !== undefined && typeof node.detail !== "string")) throw new Error("Node labels must be text.");
     if (node.status !== undefined && !["pending", "active", "done", "blocked"].includes(node.status)) throw new Error("Unbekannter Knotenstatus.");
-    if (node.running !== undefined && typeof node.running !== "boolean") throw new Error("Knotenaktivität muss ein Wahrheitswert sein.");
+    if (node.running !== undefined && typeof node.running !== "boolean") throw new Error("Node activity must be a boolean.");
     if (node.kind !== undefined && !["actor", "agent", "service"].includes(node.kind)) throw new Error("Unbekannte Knotenart.");
     const labelLines = summary ? summarize(node.label, 284, 2) : wrap(node.label);
     const detailLines = summary || node.detail === undefined ? undefined : wrap(node.detail);
-    if (node.items !== undefined && !Array.isArray(node.items)) throw new Error("Knotenpunkte müssen eine Liste sein.");
+    if (node.items !== undefined && !Array.isArray(node.items)) throw new Error("Node items must be an array.");
     const itemLines = (node.items ?? []).map((item) => {
-      if (typeof item.label !== "string" || (item.detail !== undefined && typeof item.detail !== "string")) throw new Error("Punktbeschriftungen müssen Text sein.");
+      if (typeof item.label !== "string" || (item.detail !== undefined && typeof item.detail !== "string")) throw new Error("Item labels must be text.");
       if (item.status !== undefined && !["pending", "active", "done", "blocked", "skipped"].includes(item.status)) throw new Error("Unbekannter Punktstatus.");
       return { ...item, labelLines: wrap(item.label, summary ? 256 : 176), detailLines: summary || item.detail === undefined ? undefined : wrap(item.detail) };
     });
-    if (node.actions !== undefined && !Array.isArray(node.actions)) throw new Error("Knotenaktionen müssen eine Liste sein.");
+    if (node.actions !== undefined && !Array.isArray(node.actions)) throw new Error("Node actions must be an array.");
     const actionIds = new Set<string>();
     for (const action of node.actions ?? []) {
-      if (typeof action.id !== "string" || !action.id.trim() || actionIds.has(action.id)) throw new Error("Aktionen benötigen eindeutige, nicht leere IDs.");
+      if (typeof action.id !== "string" || !action.id.trim() || actionIds.has(action.id)) throw new Error("Actions require unique, non-empty IDs.");
       actionIds.add(action.id);
-      if (typeof action.label !== "string") throw new Error("Aktionsbeschriftungen müssen Text sein.");
+      if (typeof action.label !== "string") throw new Error("Action labels must be text.");
     }
     const itemsHeight = summary ? itemLines.reduce((height, item) => height + 12 + item.labelLines.split("\n").length * 24, 0) : itemLines.reduce((height, item) => height + 24 + item.labelLines.split("\n").length * 24 + 24 + (item.detailLines === undefined ? 0 : item.detailLines.split("\n").length * 24), 0);
     const actionsHeight = node.actions?.length ? 49 : 0;
@@ -90,12 +90,12 @@ function prepare({ nodes, edges, direction = "right", height = 360, viewport = "
   const edgeIds = new Set<string>();
   const links = edges.map((edge, index): Link => {
     const id = edge.id ?? `flow-edge-${index}`;
-    if (typeof id !== "string" || !id.trim() || edgeIds.has(id)) throw new Error("Verbindungen benötigen eindeutige, nicht leere IDs.");
+    if (typeof id !== "string" || !id.trim() || edgeIds.has(id)) throw new Error("Edges require unique, non-empty IDs.");
     edgeIds.add(id);
     if (!ids.has(edge.source) || !ids.has(edge.target)) throw new Error("Eine Verbindung verweist auf einen fehlenden Knoten.");
     if (edge.kind !== undefined && edge.kind !== "return") throw new Error("Unbekannte Verbindungsart.");
     if (edge.status !== undefined && !edgeStatuses.includes(edge.status)) throw new Error("Unbekannter Verbindungsstatus.");
-    if (edge.label !== undefined && typeof edge.label !== "string") throw new Error("Verbindungsbeschriftungen müssen Text sein.");
+    if (edge.label !== undefined && typeof edge.label !== "string") throw new Error("Edge labels must be text.");
     return { ...edge, id };
   });
   const key = JSON.stringify([layout, direction, cards.map(({ id, width, height }) => [id, width, height]), links.map(({ id, source, target, label, kind }) => [id, source, target, kind, label === undefined ? 0 : Math.ceil(textWidth(label))])]);
@@ -183,7 +183,7 @@ async function layeredLayout(cards: CardNode[], links: Link[], direction: "right
       return { ...edge, type: "route", data: { path, x, y, rotated: true, labelWidth, status: edge.status } };
     }
     const route = result.edges!.find(route => route.id === edge.id)!;
-    if (!route.sections?.length) throw new Error("Für eine Verbindung fehlt die automatische Linienführung.");
+    if (!route.sections?.length) throw new Error("Automatic routing is missing for an edge.");
     const path = route.sections.map((section) => [section.startPoint, ...(section.bendPoints ?? []), section.endPoint].map((point, index) => `${index ? "L" : "M"} ${point.x} ${point.y}`).join(" ")).join(" ");
     const section = route.sections[0]!;
     const label = route.labels?.[0];
@@ -208,6 +208,7 @@ export function FlowDiagram(props: FlowDiagramProps) {
   const prepared = useMemo(() => {
     try { return { graph: prepare(props) }; }
     catch (error) { return { error: error instanceof Error ? error.message : String(error) }; }
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- inputKey encodes every prop the preparation reads
   }, [inputKey]);
   const graph = prepared.graph;
   const [layout, setLayout] = useState<Layout>();
@@ -220,6 +221,7 @@ export function FlowDiagram(props: FlowDiagramProps) {
       if (current) setLayout({ key: graph.key, ...placement });
     })().catch((error: unknown) => { if (current) setLayout({ key: graph.key, nodes: [], edges: [], error: error instanceof Error ? error.message : String(error) }); });
     return () => { current = false; };
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- the graph key identifies the prepared graph
   }, [key]);
   const active = layout?.key === key ? layout : undefined;
   const error = prepared.error ?? active?.error;
@@ -227,7 +229,7 @@ export function FlowDiagram(props: FlowDiagramProps) {
   const viewport = props.viewport ?? "interactive";
   return <section aria-label={props.label} className={cn(flowSurface, props.className)} data-viewport={viewport} style={{ height: viewport !== "interactive" ? undefined : Number.isFinite(props.height) && props.height! > 0 ? props.height : 360 }}>
     {error ? <p role="alert">Das Diagramm konnte nicht angezeigt werden: {error}</p>
-      : graph?.cards.length === 0 ? <p role="status">Keine Knoten vorhanden.</p>
+      : graph?.cards.length === 0 ? <p role="status">No nodes available.</p>
         : !active ? <p role="status">Diagramm wird geladen ...</p>
           : <Suspense fallback={<p role="status">Diagramm wird geladen ...</p>}><FlowDiagramRenderer key={key} mode={viewport} bounds={active.bounds!} nodes={cards} edges={active.edges.map((edge, index) => ({ ...edge, label: graph!.links[index]!.label, data: { ...edge.data!, status: graph!.links[index]!.status } }))} /></Suspense>}
   </section>;

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/FlowDiagramRenderer.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { BaseEdge, Controls, Handle, MarkerType, Position, ReactFlow, type EdgeProps, type NodeProps } from "@xyflow/react";
-import { Button, cn } from "../../../apps/web/src/ui";
+import { Button, cn } from "../../ui";
 import type { CardNode, GraphBounds, RouteEdge } from "./FlowDiagram";
 
-const statusLabels = { pending: "Ausstehend", active: "Aktiv", done: "Fertig", blocked: "Blockiert", skipped: "Übersprungen" };
+const statusLabels = { pending: "Pending", active: "Active", done: "Done", blocked: "Blocked", skipped: "Skipped" };
 const edgeColors = { pending: "var(--muted-foreground)", active: "var(--info)", done: "var(--success)", blocked: "var(--destructive)" };
 const edgeClasses = {
   pending: "[--xy-edge-stroke:var(--muted-foreground)] [stroke-dasharray:4_6]",
@@ -79,7 +79,7 @@ export default function FlowDiagramRenderer({ nodes, edges, bounds, mode }: { no
     zoomOnScroll={!fitted} zoomOnPinch={!fitted} zoomOnDoubleClick={!fitted} panOnDrag={!fitted} panOnScroll={false}
     preventScrolling={!fitted} disableKeyboardA11y={fitted} autoPanOnNodeFocus={false}
     zoomActivationKeyCode={fitted ? null : "Meta"} panActivationKeyCode={fitted ? null : "Space"}
- ariaLabelConfig={{ "controls.zoomIn.ariaLabel": "Zoom vergrößern", "controls.zoomOut.ariaLabel": "Zoom verkleinern", "controls.fitView.ariaLabel": "Ansicht zentrieren" }} nodes={nodes} edges={edges.map(edge => ({ ...edge, markerEnd: { type: MarkerType.ArrowClosed, color: edgeColors[edge.data?.status ?? "pending"] } }))} nodeTypes={nodeTypes} edgeTypes={edgeTypes} nodesDraggable={false} nodesConnectable={false} elementsSelectable={false} nodesFocusable={false} edgesFocusable={false} fitView={!fitted} fitViewOptions={{ minZoom: diagramScale, maxZoom: diagramScale, padding: 0.15 }} minZoom={fitted ? zoom : 0.3} maxZoom={fitted ? zoom : 2} proOptions={{ hideAttribution: true }}>
+ ariaLabelConfig={{ "controls.zoomIn.ariaLabel": "Zoom in", "controls.zoomOut.ariaLabel": "Zoom out", "controls.fitView.ariaLabel": "Fit view" }} nodes={nodes} edges={edges.map(edge => ({ ...edge, markerEnd: { type: MarkerType.ArrowClosed, color: edgeColors[edge.data?.status ?? "pending"] } }))} nodeTypes={nodeTypes} edgeTypes={edgeTypes} nodesDraggable={false} nodesConnectable={false} elementsSelectable={false} nodesFocusable={false} edgesFocusable={false} fitView={!fitted} fitViewOptions={{ minZoom: diagramScale, maxZoom: diagramScale, padding: 0.15 }} minZoom={fitted ? zoom : 0.3} maxZoom={fitted ? zoom : 2} proOptions={{ hideAttribution: true }}>
     {!fitted && <Controls showInteractive={false} fitViewOptions={{ minZoom: diagramScale, maxZoom: diagramScale }} />}
   </ReactFlow></div>;
 }

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/Form.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useRef, useState, type FormEvent } from "react";
-import { Button, Checkbox, Field, FieldDescription, FieldError, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from "../../../apps/web/src/ui";
+import { Button, Checkbox, Field, FieldDescription, FieldError, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from "../../ui";
 import type { FormErrors, FormField, FormProps, FormValue, FormValues } from "./form-contracts";
 
 export function validateForm(fields: readonly FormField[], values: FormValues, validate?: FormProps["validate"]): FormErrors {
@@ -9,25 +9,25 @@ export function validateForm(fields: readonly FormField[], values: FormValues, v
     const value = values[field.id];
     const empty = value === undefined || value === null || typeof value === "string" && value.trim() === "";
     if (field.required && (empty || field.type === "checkbox" && value !== true)) {
-      errors[field.id] = "Bitte ausfüllen.";
+      errors[field.id] = "This field is required.";
     } else if (!empty) {
       if (field.type === "number") {
-        if (typeof value !== "number" || !Number.isFinite(value)) errors[field.id] = "Bitte eine gültige Zahl eingeben.";
-        else if (field.min !== undefined && value < field.min) errors[field.id] = `Mindestens ${field.min}.`;
-        else if (field.max !== undefined && value > field.max) errors[field.id] = `Höchstens ${field.max}.`;
+        if (typeof value !== "number" || !Number.isFinite(value)) errors[field.id] = "Enter a valid number.";
+        else if (field.min !== undefined && value < field.min) errors[field.id] = `Minimum: ${field.min}.`;
+        else if (field.max !== undefined && value > field.max) errors[field.id] = `Maximum: ${field.max}.`;
       } else if (field.type === "checkbox") {
-        if (typeof value !== "boolean") errors[field.id] = "Bitte eine gültige Auswahl treffen.";
+        if (typeof value !== "boolean") errors[field.id] = "Choose a valid option.";
       } else if (typeof value !== "string") {
-        errors[field.id] = "Bitte Text eingeben.";
+        errors[field.id] = "Enter text.";
       } else if (field.type === "select" && !field.options.some((option) => option.value === value)) {
-        errors[field.id] = "Bitte einen angebotenen Wert auswählen.";
+        errors[field.id] = "Choose one of the available values.";
       }
     }
   }
   return { ...validate?.(values), ...errors };
 }
 
-export function Form({ title, fields, values, onChange, onSubmit, validate, submitLabel = "Speichern", disabled = false, readOnly = false }: FormProps) {
+export function Form({ title, fields, values, onChange, onSubmit, validate, submitLabel = "Save", disabled = false, readOnly = false }: FormProps) {
   const prefix = useId();
   const form = useRef<HTMLFormElement>(null);
   const sending = useRef(false);
@@ -35,7 +35,7 @@ export function Form({ title, fields, values, onChange, onSubmit, validate, subm
   const [errors, setErrors] = useState<FormErrors>({});
   const [error, setError] = useState<string>();
   const ids = new Set(fields.map((field) => field.id));
-  if (ids.size !== fields.length || fields.some((field) => !field.id.trim())) throw new Error("Formularfelder benötigen eindeutige, nicht leere IDs.");
+  if (ids.size !== fields.length || fields.some((field) => !field.id.trim())) throw new Error("Form fields require unique, non-empty IDs.");
 
   const change = (field: FormField, value: FormValue) => {
     if (sending.current || disabled || readOnly || field.disabled || field.readOnly) return;
@@ -66,7 +66,7 @@ export function Form({ title, fields, values, onChange, onSubmit, validate, subm
     }
   };
   return (
-    <form aria-label={title ?? "Formular"} aria-busy={pending} className="flex min-w-0 flex-col gap-4" noValidate onSubmit={(event) => void submit(event)} ref={form}>
+    <form aria-label={title ?? "Form"} aria-busy={pending} className="flex min-w-0 flex-col gap-4" noValidate onSubmit={(event) => void submit(event)} ref={form}>
       {title && <h2 className="text-base font-semibold">{title}</h2>}
       {fields.map((field, index) => {
         const id = `${prefix}-${index}`;
@@ -120,7 +120,7 @@ export function Form({ title, fields, values, onChange, onSubmit, validate, subm
         );
       })}
       {error && <FieldError>{error}</FieldError>}
-      {onSubmit && !readOnly && <Button className="self-start" disabled={disabled || pending} type="submit">{pending ? "Wird gespeichert ..." : submitLabel}</Button>}
+      {onSubmit && !readOnly && <Button className="self-start" disabled={disabled || pending} type="submit">{pending ? "Saving..." : submitLabel}</Button>}
     </form>
   );
 }

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/Layout.tsx

@@ -1,5 +1,5 @@
 import React, { useId } from "react";
-import { cn } from "../../../apps/web/src/ui";
+import { cn } from "../../ui";
 import type { AppLayoutProps, GridProps, LayoutGap, StackProps } from "./layout-contracts";
 
 const gaps: Record<LayoutGap, string> = { small: "gap-1.5", normal: "gap-3", large: "gap-5" };

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/MessageList.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
-import { cn } from "../../../apps/web/src/ui";
-import { ChatMessages } from "../../../apps/web/src/chat/ChatMessages";
-import type { Message } from "../../../apps/server/src/chat-events";
+import { cn } from "../../ui";
+import { ChatMessages, type Message } from "quassel";
+import { QuasselHost } from "../../chat/QuasselHost";
 import type { MessageListProps } from "./message-list-contracts";
 
 const hues = [212, 158, 28, 283, 350, 190, 95, 320, 55, 245];
@@ -11,7 +11,7 @@ const senderColor = (sender: string): string => {
   return `hsl(${hues[hash % hues.length]} 45% 42%)`;
 };
 
-export function MessageList({ messages, label = "Nachrichten", className, ...props }: MessageListProps) {
+export function MessageList({ messages, label = "Messages", className, ...props }: MessageListProps) {
   const rendered = useMemo(() => messages.map((message): Message => ({
     key: message.key,
     role: "assistant",
@@ -24,7 +24,7 @@ export function MessageList({ messages, label = "Nachrichten", className, ...pro
   })), [messages]);
   return (
     <section aria-label={label} className={cn("flex h-full min-h-0 w-full min-w-0 flex-col text-foreground", className)}>
-      <ChatMessages {...props} detailMode="off" messages={rendered} />
+      <QuasselHost><ChatMessages {...props} detailMode="off" messages={rendered} /></QuasselHost>
     </section>
   );
 }

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/Viewers.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { Markdown } from "../../../apps/web/src/chat/Markdown";
-import { DiffCode } from "../../../apps/web/src/DiffCode";
-import { SourceCode } from "../../../apps/web/src/SourceCode";
-import { cn, Progress } from "../../../apps/web/src/ui";
+import { Markdown } from "quassel";
+import { QuasselHost } from "../../chat/QuasselHost";
+import { DiffCode } from "../../DiffCode";
+import { SourceCode } from "../../SourceCode";
+import { cn, Progress } from "../../ui";
 import type { DiffViewerProps, DocumentViewerProps, TaskProgressProps } from "./viewer-contracts";
 
-const taskLabels = { pending: "Offen", running: "In Arbeit", done: "Erledigt", error: "Fehlgeschlagen", skipped: "Übersprungen" };
+const taskLabels = { pending: "Pending", running: "In progress", done: "Done", error: "Failed", skipped: "Skipped" };
 const taskTones = { pending: "text-muted-foreground", running: "text-primary", done: "text-muted-foreground", error: "text-destructive", skipped: "text-muted-foreground" };
 
 export function TaskProgress({ title = "Aufgaben", tasks, showProgress = true }: TaskProgressProps) {
@@ -27,13 +28,13 @@ export function TaskProgress({ title = "Aufgaben", tasks, showProgress = true }:
 export function DocumentViewer({ title, content, format = "text", language, filename }: DocumentViewerProps) {
   return <section aria-label={title ?? filename ?? "Dokument"} className="min-w-0 text-sm">
     {(title || filename) && <h3 className="mb-2 text-[15px] font-semibold">{title ?? filename}</h3>}
-    {format === "markdown" ? <Markdown text={content} />
+    {format === "markdown" ? <QuasselHost><Markdown text={content} /></QuasselHost>
       : format === "code" ? <SourceCode content={content} language={language} path={filename ?? ""} />
         : <pre className="m-0 font-[inherit] break-words whitespace-pre-wrap">{content}</pre>}
   </section>;
 }
 
-export function DiffViewer({ title = "Änderungen", patch, emptyText = "Keine Änderungen.", language, filename }: DiffViewerProps) {
+export function DiffViewer({ title = "Changes", patch, emptyText = "No changes.", language, filename }: DiffViewerProps) {
   return <section aria-label={title} className="min-w-0 text-sm">
     <h3 className="mb-2 text-[15px] font-semibold">{title}</h3>
     {!patch ? <p>{emptyText}</p> : <div className="max-w-full overflow-auto rounded-lg border"><DiffCode content={patch} emptyText={emptyText} language={language} path={filename} /></div>}

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/WorkflowDiagram.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { workflowGraph } from "../workflow/index";
+import { workflowGraph } from "../../../../server/src/plugin-support/actor-programs/workflow/index";
 import { FlowDiagram } from "./FlowDiagram";
 import type { WorkflowDiagramProps } from "./workflow-diagram-contracts";
 

package/apps/web/src/actor-programs/client-ui/chat-contracts.d.ts

@@ -0,0 +1,64 @@
+export type Role = "user" | "assistant" | "thinking" | "tool" | "system" | "action";
+
+export interface ChatAttachmentInput {
+  name: string;
+  mediaType: string;
+  data: string;
+}
+
+export interface ChatAttachment {
+  name: string;
+  mediaType: string;
+  size: number;
+  url: string;
+}
+
+export interface ChatAttachmentCapabilities {
+  input: readonly string[];
+  model: string;
+}
+
+export interface ToolInfo {
+  id: string;
+  name: string;
+  arguments: string;
+  result?: string;
+  isError?: boolean;
+}
+
+export interface ChatTextCursor {
+  conversationId: string;
+  sequence: number;
+  /** Accumulated non-whitespace UTF-16 units in the turn anchored by sequence. */
+  offset: number;
+}
+
+/** An action waiting for input from the user; payload and result belong to the plugin in owner, a set status marks it done. */
+export interface PendingAction {
+  actionId: string;
+  owner: string | null;
+  payload: unknown;
+  status?: "approved" | "dismissed";
+  result?: unknown;
+}
+
+export interface Message {
+  key: string;
+  role: Role;
+  /** Sender identity for the display, independent of role and bubble label. */
+  sender?: string;
+  text: string;
+  textCursor?: ChatTextCursor;
+  closed?: boolean;
+  attachments?: ChatAttachment[];
+  tool?: ToolInfo;
+  action?: PendingAction;
+  /** ISO time of the message, shown with showTimestamps. */
+  at?: string;
+  /** The actor input behind an incoming message; the steering mark belongs to it. */
+  inputId?: string;
+  /** The message went into a turn that was already running instead of starting its own. */
+  steered?: boolean;
+  /** A colored bubble instead of plain text, for example in conversations of several parties. */
+  bubble?: { color: string; side: "start" | "end"; label?: string };
+}

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/contracts.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
-import type { ChatAttachment, ChatAttachmentCapabilities, ChatAttachmentInput, Message } from "../../../apps/server/src/chat-events";
+import type { ChatAttachment, ChatAttachmentCapabilities, ChatAttachmentInput, Message } from "./chat-contracts";
 
-export * from "../../../apps/web/src/ui";
+export * from "../../ui";
 export * from "./file-contracts";
 export * from "./form-contracts";
 export * from "./layout-contracts";

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/file-selection.ts

@@ -3,9 +3,9 @@ import type { FilePickerProps } from "./file-contracts";
 export const fileSelection = (current: readonly File[], incoming: readonly File[], options: Pick<FilePickerProps, "accept" | "multiple" | "maxFiles" | "maxBytes">): File[] => {
   const maximum = options.multiple === false ? 1 : options.maxFiles ?? 10;
   const bytes = options.maxBytes ?? 20 * 1024 * 1024;
-  if (!Number.isInteger(maximum) || maximum < 1 || !Number.isFinite(bytes) || bytes < 1) throw new Error("Dateigrenzen müssen positive Zahlen sein.");
-  if (!incoming.length) throw new Error("Die Auswahl enthält keine lesbaren Dateien.");
-  if (options.multiple === false && incoming.length > 1) throw new Error("Bitte genau eine Datei auswählen.");
+  if (!Number.isInteger(maximum) || maximum < 1 || !Number.isFinite(bytes) || bytes < 1) throw new Error("File limits must be positive numbers.");
+  if (!incoming.length) throw new Error("The selection contains no readable files.");
+  if (options.multiple === false && incoming.length > 1) throw new Error("Select exactly one file.");
   const accepted = options.accept?.toLowerCase().split(",").map((part) => part.trim()).filter(Boolean) ?? [];
   for (const file of incoming) {
     if (accepted.length && !accepted.some((type) => type.startsWith(".")
@@ -18,7 +18,7 @@ export const fileSelection = (current: readonly File[], incoming: readonly File[
   if (options.multiple !== false) for (const file of incoming) {
     if (!result.some((entry) => entry.name === file.name && entry.size === file.size && entry.lastModified === file.lastModified && entry.type === file.type)) result.push(file);
   }
-  if (result.length > maximum) throw new Error(`Höchstens ${maximum} Dateien auswählen.`);
-  if (result.reduce((sum, file) => sum + file.size, 0) > bytes) throw new Error(`Die Auswahl überschreitet ${bytes} Bytes.`);
+  if (result.length > maximum) throw new Error(`Select at most ${maximum} files.`);
+  if (result.reduce((sum, file) => sum + file.size, 0) > bytes) throw new Error(`The selection exceeds ${bytes} bytes.`);
   return result;
 };

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/index.tsx

@@ -1,12 +1,10 @@
-import { useCallback, useSyncExternalStore } from "react";
-import { cn } from "../../../apps/web/src/ui";
-import { ChatPanel } from "../../../apps/web/src/chat/ChatPanel";
-import { ChatMessages } from "../../../apps/web/src/chat/ChatMessages";
-import { ChatInputToolbar } from "../../../apps/web/src/chat/ChatInputToolbar";
-import { Markdown } from "../../../apps/web/src/chat/Markdown";
+import { useCallback, useSyncExternalStore, type ComponentProps } from "react";
+import { cn } from "../../ui";
+import { ChatPanel, ChatMessages as QuasselChatMessages, ChatInputToolbar, Markdown as QuasselMarkdown } from "quassel";
+import { QuasselHost } from "../../chat/QuasselHost";
 import type { ActorChatProps, ChatAttachmentInput, ChatConnection, ChatInputProps, ChatProps, ControlledChatProps } from "./contracts";
 
-export * from "../../../apps/web/src/ui";
+export * from "../../ui";
 export { FilePicker } from "./FilePicker";
 export { Form } from "./Form";
 export { AppLayout, Stack, Grid } from "./Layout";
@@ -18,28 +16,36 @@ export { WorkflowDiagram } from "./WorkflowDiagram";
 
 const appChat = (): ChatConnection => {
   const bridge = (globalThis as typeof globalThis & { __ragentsAppContext?: { chat: ChatConnection } }).__ragentsAppContext;
-  if (!bridge) throw new Error("Die Host-Bridge der Actor-Ansicht fehlt.");
+  if (!bridge) throw new Error("The actor view host bridge is missing.");
   return bridge.chat;
 };
 
 const emptyMessages: never[] = [];
 
-const chatSurface = "flex h-full min-h-0 w-full min-w-0 flex-col text-foreground";
+const chatDisplay = "flex h-full min-h-0 w-full min-w-0 flex-col text-foreground";
+
+function ChatMessages(props: ComponentProps<typeof QuasselChatMessages>) {
+  return <QuasselHost><QuasselChatMessages {...props} /></QuasselHost>;
+}
+
+function Markdown(props: ComponentProps<typeof QuasselMarkdown>) {
+  return <QuasselHost><QuasselMarkdown {...props} /></QuasselHost>;
+}
 
 function ChatInput({ onSend, placeholder, ...props }: ChatInputProps) {
-  return <ChatInputToolbar {...props} onSend={onSend} texts={placeholder === undefined ? undefined : {
+  return <QuasselHost><ChatInputToolbar {...props} onSend={onSend} texts={placeholder === undefined ? undefined : {
     placeholder,
     steeringPlaceholder: placeholder,
-  }} />;
+  }} /></QuasselHost>;
 }
 
 function ChatView({ title, showInput = true, onSend, placeholder, rows = 2, maxRows = 6,
   className, error, disabled, attachmentCapabilities, attachmentCapabilitiesError, ...messages }: ControlledChatProps & { error?: string; disabled?: boolean }) {
   return (
-    <section aria-label={title ?? "Chat"} className={cn(chatSurface, "[&_[data-chat=composer]]:px-3 [&_[data-chat=composer]]:pb-3", className)}>
+    <section aria-label={title ?? "Chat"} className={cn(chatDisplay, "[&_[data-chat=composer]]:px-3 [&_[data-chat=composer]]:pb-3", className)}>
       {title && <h2 className="px-4 pt-3 pb-1 text-[14px] font-semibold">{title}</h2>}
       {error && <p className="px-4 py-3 text-[13px] text-destructive" role="alert">{error}</p>}
-      <ChatPanel className="flex-1" composer={showInput && onSend ? <ChatInput
+      <QuasselHost><ChatPanel className="flex-1" composer={showInput && onSend ? <ChatInput
         attachmentCapabilities={attachmentCapabilities}
         attachmentCapabilitiesError={attachmentCapabilitiesError}
         disabled={disabled}
@@ -49,8 +55,8 @@ function ChatView({ title, showInput = true, onSend, placeholder, rows = 2, maxR
         rows={rows}
         running={messages.running}
       /> : undefined}>
-        <ChatMessages {...messages} />
-      </ChatPanel>
+        <QuasselChatMessages {...messages} />
+      </ChatPanel></QuasselHost>
     </section>
   );
 }
@@ -65,7 +71,7 @@ function ActorChat({ actor, ...props }: ActorChatProps) {
     attachmentCapabilities={snapshot?.attachmentCapabilities}
     attachmentCapabilitiesError={snapshot?.attachmentCapabilitiesError}
     disabled={snapshot === undefined || snapshot.error !== undefined || snapshot.readOnly === true}
-    emptyState={props.emptyState ?? (snapshot === undefined ? <p className="px-4 py-3 text-[13px] text-muted-foreground">Gespräch wird geladen ...</p> : undefined)}
+    emptyState={props.emptyState ?? (snapshot === undefined ? <p className="px-4 py-3 text-[13px] text-muted-foreground">Loading conversation...</p> : undefined)}
     error={snapshot?.error}
     messages={snapshot?.messages ?? emptyMessages}
     owner={props.owner === undefined ? snapshot?.owner : props.owner}

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/layout-contracts.d.ts

@@ -29,5 +29,5 @@ export interface GridProps {
 export declare function AppLayout(props: AppLayoutProps): ReactElement;
 /** Vertical content or a wrapping row with consistent spacing. */
 export declare function Stack(props: StackProps): ReactElement;
-/** Equal responsive columns based on the container width, including inside a canvas frame. */
+/** Equal responsive columns based on the container width, including inside a surface frame. */
 export declare function Grid(props: GridProps): ReactElement;

package/{plugins/ragents.actor-programs → apps/web/src/actor-programs}/client-ui/message-list-contracts.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
-import type { ChatAttachment } from "../../../apps/server/src/chat-events";
+import type { ChatAttachment } from "./chat-contracts";
 
 export interface MessageListItem {
   /** Stable key within this list. */
@@ -25,7 +25,7 @@ export interface MessageListProps {
   showTimestamps?: boolean;
   emptyState?: ReactNode;
   className?: string;
-  /** Accessible name of the display, default Nachrichten. */
+  /** Accessible name of the display, default Messages. */
   label?: string;
 }