@schlenkr/ragents 0.1.10 → 0.1.12

package/apps/web/src/StartOptions.tsx

@@ -28,7 +28,7 @@ const StartOptionsContext = createContext<StartOptionsControl>(inertControl);
 
 const messageOf = (cause: unknown): string => cause instanceof Error ? cause.message : String(cause);
 
-/** Eine Vorbelegung gilt nur für Optionen, die der Run gerade wählen lässt; Unbekanntes bleibt liegen. */
+/** A preset applies only to options the run currently lets you choose; anything unknown is left alone. */
 export const initialStartOptionUpdates = (
   options: readonly StartOptionState[],
   values: Readonly<Record<string, unknown>>,
@@ -36,7 +36,7 @@ export const initialStartOptionUpdates = (
   .filter((option) => option.selectable && !option.locked && Object.hasOwn(values, option.id))
   .map((option) => [option.id, values[option.id]] as const);
 
-/** Was eine Vorlage festlegt, belegt niemand vor; sonst scheitert ihr Start an der abweichenden Wahl. */
+/** Nothing presets what a template fixes; otherwise its start fails on the differing choice. */
 export const withoutFixedStartOptions = (
   values: Readonly<Record<string, unknown>>,
   fixed: Readonly<Record<string, unknown>> | undefined,
@@ -47,7 +47,7 @@ export interface ShownStartOption {
   readonly fixed: boolean;
 }
 
-/** Was eine Stelle zeigt: die wählbaren offenen Optionen und jede, die die Vorlage festlegt, mit deren Wert und nicht wählbar. */
+/** What a place shows: the selectable open options and every option the template fixes, with the template's value and not selectable. */
 export const shownStartOptions = (
   options: readonly StartOptionState[],
   fixed: Readonly<Record<string, unknown>>,
@@ -65,7 +65,7 @@ const sameJson = (left: unknown, right: unknown): boolean => {
     && keys.every((key) => Object.hasOwn(right, key) && sameJson((left as Record<string, unknown>)[key], (right as Record<string, unknown>)[key]));
 };
 
-/** Was vor dem Start anders gewählt ist, als die Vorlage festlegt; so ein Start scheitert am Server. */
+/** What was chosen before the start differently from what the template fixes; such a start fails on the server. */
 export const conflictingStartOptions = (
   options: readonly StartOptionState[],
   fixed: Readonly<Record<string, unknown>>,
@@ -139,7 +139,7 @@ export function StartOptionsProvider({
     const operation = active.current;
     if (!operation || operation.sessionId !== sessionId || operation.controller.signal.aborted) return;
     if (operation.pending || saving.current?.sessionId === sessionId) {
-      setState((current) => ({ ...current, errors: new Map(current.errors).set(optionId, "Die Startoptionen werden noch geladen oder gespeichert. Bitte versuche es danach erneut.") }));
+      setState((current) => ({ ...current, errors: new Map(current.errors).set(optionId, "The start options are still loading or saving. Please try again afterwards.") }));
       return;
     }
     operation.pending = true;
@@ -189,7 +189,7 @@ export function StartOptionsProvider({
     })();
   }, [allowed, sessionId, set, state]);
 
-  // Bis der Server nach der ersten Nachricht geantwortet hat, ist alles gesperrt; danach gilt sein locked.
+  // Until the server has answered after the first message, everything is locked; after that its locked applies.
   const control = useMemo<StartOptionsControl>(() => ({
     options: state.sessionId === sessionId ? state.options.map((option) => ({ ...option, locked: option.locked || (started && !state.loadedStarted) })) : [],
     errors: state.sessionId === sessionId ? state.errors : new Map(),
@@ -207,9 +207,9 @@ const ChoiceControl = ({ disabled, error, option, setValue }: StartOptionControl
     try {
       const presentation = choicePresentationFrom(option.presentation, option.id);
       if (!presentation) {
-        return { message: `Die Startoption ${option.id} hat weder eine Web-Komponente noch eine Auswahl-Darstellung` };
+        return { message: `The start option ${option.id} has neither a web component nor a choice presentation` };
       }
-      if (typeof option.value !== "string") return { message: `Der Wert der Startoption ${option.id} ist keine Kennung` };
+      if (typeof option.value !== "string") return { message: `The value of the start option ${option.id} is not an identifier` };
       return { presentation, value: option.value };
     } catch (cause) {
       return { message: messageOf(cause) };
@@ -233,12 +233,12 @@ const unchangeable = async () => undefined;
 
 function FixedStartOption({ conflict, machines, option, registry }: { conflict: boolean; machines: OfferedMachines; option: StartOptionState; registry: PluginRegistry }) {
   const Control = registry.startOptions.get(option.id)?.Control ?? ChoiceControl;
-  return <span className="contents" data-start-option-fixed={option.id} title="Von der Vorlage festgelegt">
-    <Control disabled error={conflict ? "Gewählt ist ein anderer Wert; die Vorlage legt diesen fest." : undefined} machines={machines} option={option} setValue={unchangeable} />
+  return <span className="contents" data-start-option-fixed={option.id} title="Set by the template">
+    <Control disabled error={conflict ? "A different value is chosen; the template sets this one." : undefined} machines={machines} option={option} setValue={unchangeable} />
   </span>;
 }
 
-/** Die Startoptionen einer Stelle; was die gewählte Vorlage festlegt, steht fest mit ihrem Wert statt zur Wahl. */
+/** The start options of a place; what the chosen template fixes is shown with its value instead of as a choice. */
 export function StartOptionControls({ disabled, registry, placement = "page", fixed = noneFixed }: {
   disabled: boolean;
   registry: PluginRegistry;

package/apps/web/src/StartSelection.tsx

@@ -14,16 +14,16 @@ const tileOf = (entry: StartEntry, guided: boolean, technical: boolean): Connect
   title: entry.title,
   description: entry.description,
   kind: entry.action,
-  category: entry.category ?? (technical ? "Run-Scripts" : "Abläufe"),
+  category: entry.category ?? (technical ? "Run scripts" : "Workflows"),
   ...(guided ? { guided: true } : {}),
 });
 
-/** Die Startauswahl eines Entwurfs: dieselben Kacheln wie Start in VS Code; Neuer Chat öffnet den leeren Run, eine Vorlage startet sofort oder nach ihrem Leitfaden. */
+/** The start selection of a draft: the same tiles as Start in VS Code; New chat opens the empty run, a template starts right away or after its guide. */
 export function StartSelection({ registry, session, initialEntryId, onOpen }: {
   registry: PluginRegistry;
   session: SessionContext;
   initialEntryId?: string;
-  /** Der Entwurf wird zum offenen Run, als leerer Chat oder nach dem Start einer Vorlage. */
+  /** The draft becomes the open run, as an empty chat or after a template starts. */
   onOpen: () => void;
 }) {
   const access = useAccess();
@@ -61,7 +61,7 @@ export function StartSelection({ registry, session, initialEntryId, onOpen }: {
   const open = useCallback((entryId: string) => {
     const entry = registry.startEntries.find((candidate) => candidate.id === entryId);
     if (!entry || !canStartEntry(access, entry.id)) {
-      setError("Diese Vorlage ist im aktuellen Profil nicht verfügbar.");
+      setError("This template is not available in the current profile.");
       return;
     }
     openStartEntry(entry, registry, modal, sessionRef, launch);
@@ -74,17 +74,17 @@ export function StartSelection({ registry, session, initialEntryId, onOpen }: {
   }, [disabled, initialEntryId, open]);
 
   return <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto px-10 pt-6 pb-5 max-md:px-3 max-md:pt-11 max-md:pb-4">
-    <section aria-label="Startauswahl" className="mx-auto grid w-full max-w-composer grid-cols-1 gap-1.5">
-      <StartSection count={startTileCount(tiles, defaultEntry, free)} title="Neu" />
+    <section aria-label="Start selection" className="mx-auto grid w-full max-w-composer grid-cols-1 gap-1.5">
+      <StartSection count={startTileCount(tiles, defaultEntry, free)} title="New" />
       {error && <p className="text-[0.8rem] text-destructive" role="alert">{error}</p>}
       {tiles.length === 0 && !free
-        ? <p className="text-[0.75rem] text-muted-foreground" role="status">Für dieses Benutzerkonto ist keine Vorlage freigegeben.</p>
-        : <StartTiles defaultEntry={defaultEntry} disabled={disabled} entries={tiles} label="Vorlagen" onNewChat={free ? onOpen : undefined} onStart={open} />}
+        ? <p className="text-[0.75rem] text-muted-foreground" role="status">No template is shared with this user account.</p>
+        : <StartTiles defaultEntry={defaultEntry} disabled={disabled} entries={tiles} label="Templates" onNewChat={free ? onOpen : undefined} onStart={open} />}
     </section>
   </div>;
 }
 
-/** Eine Vorlage öffnen: ihr Leitfaden fragt zuerst, ein Skill mit Leitfaden geht danach in den Vorbereitungschat, alles andere startet sofort. */
+/** Opens a template: its guide asks first, a skill with a guide then moves to the preparation chat, everything else starts right away. */
 export function openStartEntry(entry: StartEntry, registry: PluginRegistry, modal: ModalController,
   sessionRef: RefObject<SessionContext>, launch: (entry: StartEntry, value: JsonValue | null) => Promise<void>) {
   const guide = registry.guideFor(entry);
@@ -100,11 +100,11 @@ export function openStartEntry(entry: StartEntry, registry: PluginRegistry, moda
           void launch(entry, value);
           return;
         }
-        if (typeof value !== "string" || !value.trim()) throw new Error(`Der Leitfaden für ${entry.title} muss einen nicht leeren Auftrag liefern.`);
+        if (typeof value !== "string" || !value.trim()) throw new Error(`The guide for ${entry.title} must return a non-empty task.`);
         const prompt = value;
         completed = true;
         controller.back();
-        modal.open({ title: "Auftrag vorbereiten", subtitle: entry.title,
+        modal.open({ title: "Prepare task", subtitle: entry.title,
           render: () => <RunPreparationChat entry={entry} initialPrompt={prompt} registry={registry} sessionRef={sessionRef} /> });
       }} />,
   });

package/apps/web/src/StartTiles.tsx

@@ -2,7 +2,7 @@ import { BookIcon, ChevronRightIcon, CodeIcon, PlusIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import type { ConnectionEntry } from "./panel/contract";
 
-const NEW_CHAT = { category: "Ohne Vorlage", title: "Neuer Chat", description: "Leerer Run, der Auftrag entsteht im Chat." };
+const NEW_CHAT = { category: "No template", title: "New chat", description: "Empty run; the task takes shape in the chat." };
 
 const sectionClass = "flex items-baseline gap-2 text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground";
 const countClass = "font-mono text-[0.62rem] font-normal tracking-normal opacity-80";
@@ -12,7 +12,7 @@ const entryIcon = (entry: ConnectionEntry): ReactNode => entry.kind === "skill"
   ? <BookIcon aria-hidden className="size-3.5" />
   : <CodeIcon aria-hidden className="size-3.5" />;
 
-/** Die Überschrift eines Abschnitts der Startseite, mit Zahl und rechts einer Aktion. */
+/** The heading of a Start page section, with a count and an action on the right. */
 export function StartSection({ title, count, children }: { title: string; count?: number; children?: ReactNode }) {
   return <div className="flex items-baseline justify-between gap-2">
     <h2 className={sectionClass}>{title}{count !== undefined && <span className={countClass}>{count}</span>}</h2>
@@ -25,7 +25,7 @@ function Tile({ category, title, description, icon, standard, guided, disabled,
   title: string;
   description: string;
   icon: ReactNode;
-  /** Die Vorlage ist der Default ihres Servers. */
+  /** The template is its server's default. */
   standard?: boolean;
   guided?: boolean;
   disabled: boolean;
@@ -36,28 +36,28 @@ function Tile({ category, title, description, icon, standard, guided, disabled,
       <span className="flex min-w-0 items-center gap-1.5 text-(--tone)">
         {icon}
         <span className="truncate text-[0.58rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground">{category}</span>
-        {standard && <span className="ml-auto flex-none rounded-sm border border-current px-1 text-[0.52rem] font-semibold uppercase tracking-[0.06em] leading-[1.5] opacity-70">Standard</span>}
+        {standard && <span className="ml-auto flex-none rounded-sm border border-current px-1 text-[0.52rem] font-semibold uppercase tracking-[0.06em] leading-[1.5] opacity-70">Default</span>}
       </span>
       <span className="text-[0.76rem] font-semibold leading-snug [overflow-wrap:anywhere]">{title}</span>
       <span className="line-clamp-2 text-[0.66rem] leading-[1.45] text-muted-foreground">{description}</span>
       <span className="mt-auto flex items-center gap-0.5 pt-1.5 text-[0.62rem] font-semibold text-(--tone) opacity-50 group-enabled/tile:group-hover/tile:opacity-100">
-        {guided ? "Einrichten" : "Starten"}<ChevronRightIcon aria-hidden className="size-3" />
+        {guided ? "Set up" : "Start"}<ChevronRightIcon aria-hidden className="size-3" />
       </span>
     </button>
   </li>;
 }
 
-/** Wie viele Kacheln StartTiles zeigt: die Vorlagen, ohne Standard-Vorlage dazu Neuer Chat. */
+/** How many tiles StartTiles shows: the templates, plus New chat when there is no default template. */
 export const startTileCount = (entries: readonly ConnectionEntry[], defaultEntry: string | undefined, newChat: boolean): number =>
   entries.length + (defaultEntry === undefined && newChat ? 1 : 0);
 
-/** Die Vorlagen eines Servers als Kacheln, die Standard-Vorlage oder Neuer Chat zuerst: Start in VS Code und die Startauswahl im Browser. */
+/** A server's templates as tiles, the default template or New chat first: Start in VS Code and the start selection in the browser. */
 export function StartTiles({ entries, defaultEntry, label, disabled = false, onNewChat, onStart }: {
   entries: readonly ConnectionEntry[];
   defaultEntry?: string;
   label: string;
   disabled?: boolean;
-  /** Ohne sie fehlt die Kachel Neuer Chat. */
+  /** Without it the New chat tile is missing. */
   onNewChat?: () => void;
   onStart: (entryId: string) => void;
 }) {

package/apps/web/src/SurfaceShortcuts.tsx

@@ -51,10 +51,10 @@ export function SurfaceShortcuts({ children }: { children: ReactNode }) {
   };
 
   return <div className="flex min-w-0 flex-1" ref={containerRef}>
-    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Apps und Actors nach links" className="w-8 justify-center px-0" disabled={!scroll.left} onClick={() => move(-1)} title="Nach links blättern" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
-    <div aria-label="Apps und Actors durchblättern" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3" id={id} ref={viewportRef} role="group" tabIndex={0}>
+    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Scroll apps and actors left" className="w-8 justify-center px-0" disabled={!scroll.left} onClick={() => move(-1)} title="Scroll left" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
+    <div aria-label="Browse apps and actors" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3" id={id} ref={viewportRef} role="group" tabIndex={0}>
       <div className="flex w-max flex-none items-stretch" ref={contentRef}>{children}</div>
     </div>
-    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Apps und Actors nach rechts" className="w-8 justify-center border-r-0 border-l border-border px-0 [&>svg]:rotate-180" disabled={!scroll.right} onClick={() => move(1)} title="Nach rechts blättern" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
+    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Scroll apps and actors right" className="w-8 justify-center border-r-0 border-l border-border px-0 [&>svg]:rotate-180" disabled={!scroll.right} onClick={() => move(1)} title="Scroll right" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
   </div>;
 }

package/apps/web/src/ThemeSettings.tsx

@@ -13,8 +13,8 @@ export function ThemeSettings() {
   const writable = access.can("settings.write");
   return <div className="mx-auto flex max-w-[1020px] flex-col gap-6 px-[clamp(20px,4vw,46px)] pt-7 pb-12 max-sm:px-3.5 max-sm:pt-5 max-sm:pb-9">
     <header>
-      <h2 className="text-[1.08rem] text-foreground">Darstellung</h2>
-      <p className="mt-2 max-w-[780px] text-xs leading-[1.55] text-muted-foreground">Farben für die gesamte Oberfläche, die Fläche und die Leiste.</p>
+      <h2 className="text-[1.08rem] text-foreground">Appearance</h2>
+      <p className="mt-2 max-w-[780px] text-xs leading-[1.55] text-muted-foreground">Colors for the whole interface, the surface and the sidebar.</p>
     </header>
     <section aria-labelledby="theme-settings-title">
       <Card className="flex-row flex-wrap items-center gap-5 p-6 max-sm:p-4">
@@ -25,9 +25,9 @@ export function ThemeSettings() {
         </div>
         <div className="flex-[1_1_220px]">
           <h3 className="mb-1.5 text-lg font-semibold" id="theme-settings-title">Schichtwerk</h3>
-          <p className={noteClasses}>Matte Flächen und gezeichnete Konturen.</p>
+          <p className={noteClasses}>Matte surfaces and drawn outlines.</p>
         </div>
-        <ToggleGroup aria-label="Schichtwerk-Farbschema" className="flex-none max-sm:w-full" disabled={!writable} size="sm" spacing={0}
+        <ToggleGroup aria-label="Schichtwerk color scheme" className="flex-none max-sm:w-full" disabled={!writable} size="sm" spacing={0}
           value={[preference]} variant="outline"
           onValueChange={([value]) => { if (value && writable) store.setPreference(parseThemePreference(value)); }}>
           {themeOptions.map((option) => <ToggleGroupItem key={option.value} value={option.value}>{option.label}</ToggleGroupItem>)}
@@ -36,11 +36,11 @@ export function ThemeSettings() {
     </section>
     <p className={noteClasses} role="status">
       {preference === "system"
-        ? `Folgt der Systemeinstellung. Aktuell ist Schichtwerk ${appearance === "dark" ? "Dunkel" : "Hell"} aktiv.`
-        : `Schichtwerk ${appearance === "dark" ? "Dunkel" : "Hell"} ist aktiv.`}
-      {" "}Änderungen gelten sofort und werden in diesem Browser gespeichert.
+        ? `Follows the system setting. Schichtwerk ${appearance === "dark" ? "Dark" : "Light"} is currently active.`
+        : `Schichtwerk ${appearance === "dark" ? "Dark" : "Light"} is active.`}
+      {" "}Changes apply immediately and are saved in this browser.
     </p>
-    {!writable && <p className={noteClasses}>Die Darstellung ist mit deinen Rechten nur lesbar.</p>}
+    {!writable && <p className={noteClasses}>With your permissions, the appearance is read-only.</p>}
     {error && <p className="text-sm leading-[1.6] text-destructive" role="alert">{error}</p>}
   </div>;
 }

package/apps/web/src/TitleModelSettings.tsx

@@ -47,9 +47,9 @@ export function TitleModelSettings() {
   if (!readable) return null;
   if (state.status === "failed") return <Alert className="grid justify-items-start gap-2" variant="destructive">
     <AlertDescription>{state.error}</AlertDescription>
-    <Button variant="outline" onClick={() => { setState({ status: "loading" }); setRetry((value) => value + 1); }}>Erneut laden</Button>
+    <Button variant="outline" onClick={() => { setState({ status: "loading" }); setRetry((value) => value + 1); }}>Reload</Button>
   </Alert>;
-  if (state.status !== "ready" || draft === undefined) return <p className={noteClasses} role="status">Einstellungen für Überschriften werden geladen ...</p>;
+  if (state.status !== "ready" || draft === undefined) return <p className={noteClasses} role="status">Loading title settings ...</p>;
   const { settings } = state;
   const save = async () => {
     if (!writable || saving.current || !dirty) return;
@@ -61,39 +61,39 @@ export function TitleModelSettings() {
       const saved = await requestTitleModelSettings({ selection: draft });
       setState({ status: "ready", settings: saved });
       setDraft(saved.selection);
-      setNotice(saved.selection === null ? "Automatische Überschriften sind deaktiviert." : "Modell für die nächsten automatischen Überschriften gespeichert.");
+      setNotice(saved.selection === null ? "Automatic titles are turned off." : "Model saved for the next automatic titles.");
       window.dispatchEvent(new Event(titleModelSettingsChangedEvent));
     } catch (cause) { setError(messageOf(cause)); }
     finally { saving.current = false; setPending(false); }
   };
 
   const options = titleModelOptions(settings.models, draft, settings.models.length > 20 ? query : "");
-  return <form aria-label="Modell für automatische Überschriften" className="flex min-w-0 flex-col items-start gap-3" onSubmit={(event) => {
+  return <form aria-label="Model for automatic titles" className="flex min-w-0 flex-col items-start gap-3" onSubmit={(event) => {
     event.preventDefault();
     void save();
   }}>
-    <p className={noteClasses}>Verdichtet den ersten Auftrag zu einer kurzen Titelzeile. Gilt für die nächsten automatisch erzeugten Titel.</p>
-    {settings.models.length === 0 && <p className={noteClasses}>Der Anbieter bietet kein Modell für Überschriften an; automatische Überschriften bleiben aus.</p>}
-    {!writable && <p className={noteClasses}>Du hast Lesezugriff auf diese Einstellungen.</p>}
-    {settings.models.length > 20 && <Input aria-label="Modelle für Überschriften durchsuchen" className={controlClasses} disabled={!writable || pending}
-      onChange={(event) => setQuery(event.target.value)} placeholder="Modell suchen ..." type="search" value={query} />}
+    <p className={noteClasses}>Condenses the first task into a short title line. Applies to the next automatically generated titles.</p>
+    {settings.models.length === 0 && <p className={noteClasses}>The provider offers no model for titles; automatic titles stay off.</p>}
+    {!writable && <p className={noteClasses}>You have read access to these settings.</p>}
+    {settings.models.length > 20 && <Input aria-label="Search title models" className={controlClasses} disabled={!writable || pending}
+      onChange={(event) => setQuery(event.target.value)} placeholder="Search models ..." type="search" value={query} />}
     <Select disabled={!writable || pending} items={options} value={titleSelectionKey(draft)} onValueChange={(key) => {
       if (key === null) return;
       setDraft(titleSelectionFromKey(key, settings.models));
       setError(undefined);
       setNotice(undefined);
     }}>
-      <SelectTrigger aria-label="Modell" className={controlClasses}><SelectValue /></SelectTrigger>
+      <SelectTrigger aria-label="Model" className={controlClasses}><SelectValue /></SelectTrigger>
       <SelectContent>
         {options.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
       </SelectContent>
     </Select>
     <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      <Button disabled={!writable || pending || !dirty} type="submit">{pending ? "Wird gespeichert ..." : "Speichern"}</Button>
+      <Button disabled={!writable || pending || !dirty} type="submit">{pending ? "Saving ..." : "Save"}</Button>
       {dirty && <Button variant="outline" disabled={pending} onClick={() => {
         setDraft(settings.selection); setError(undefined); setNotice(undefined);
-      }}>Änderungen verwerfen</Button>}
-      <span className={`${noteClasses} empty:hidden`} role="status">{notice ?? (dirty ? "Ungespeicherte Änderungen" : "")}</span>
+      }}>Discard changes</Button>}
+      <span className={`${noteClasses} empty:hidden`} role="status">{notice ?? (dirty ? "Unsaved changes" : "")}</span>
     </div>
     {error && <p className="text-[0.76rem] text-destructive" role="alert">{error}</p>}
   </form>;

package/apps/web/src/WorkspacePanel.tsx

@@ -48,7 +48,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
   const tabs = props.tabs;
   const activeTab = tabs.find((tab) => tab.id === props.navigation.activeTabId) ?? tabs[0];
   const activeTabId = activeTab?.id;
-  const stateAction = collapsed ? "Leiste aufklappen" : "Leiste einklappen";
+  const stateAction = collapsed ? "Expand sidebar" : "Collapse sidebar";
 
   useLayoutEffect(() => {
     const panel = panelRef.current;
@@ -147,7 +147,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
         frame = undefined;
         applyWidth(currentWidth);
         target.setAttribute("aria-valuenow", String(Math.round(currentWidth)));
-        target.setAttribute("aria-valuetext", `${Math.round(currentWidth)} Pixel`);
+        target.setAttribute("aria-valuetext", `${Math.round(currentWidth)} pixels`);
       });
     }
 
@@ -165,7 +165,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
       applyWidth(normalWidthRef.current);
       const effective = clampWidth(normalWidthRef.current);
       target.setAttribute("aria-valuenow", String(Math.round(effective)));
-      target.setAttribute("aria-valuetext", `${Math.round(effective)} Pixel`);
+      target.setAttribute("aria-valuetext", `${Math.round(effective)} pixels`);
     }
 
     window.addEventListener("pointermove", move);
@@ -196,7 +196,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
 
   return (
     <aside
-      aria-label="Leiste"
+      aria-label="Sidebar"
       className={cn(
         "relative z-20 flex min-h-0 min-w-0 flex-col @max-[960px]/chat-content:absolute @max-[960px]/chat-content:inset-y-0 @max-[960px]/chat-content:right-0 @max-[960px]/chat-content:left-auto",
         collapsed
@@ -211,12 +211,12 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
         <div
           aria-controls="workspace-panel"
           aria-disabled={!resizable}
-          aria-label="Breite der Leiste"
+          aria-label="Sidebar width"
           aria-orientation="vertical"
           aria-valuemax={Math.round(layoutBounds.max)}
           aria-valuemin={Math.round(layoutBounds.min)}
           aria-valuenow={Math.round(effectiveWidth)}
-          aria-valuetext={`${Math.round(effectiveWidth)} Pixel`}
+          aria-valuetext={`${Math.round(effectiveWidth)} pixels`}
           className={cn(
             "absolute inset-y-0 right-auto -left-1 z-30 w-2 touch-none",
             resizable
@@ -227,11 +227,11 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
           onPointerDown={resizable ? startResize : undefined}
           role="separator"
           tabIndex={resizable ? 0 : -1}
-          title="Breite ziehen"
+          title="Drag to resize"
         />
       )}
       {props.headerContainer && createPortal(<TooltipProvider><div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden pr-[7px] pl-[9px]" data-workspace-state={props.state}>
-        <nav aria-label="Leiste" className="flex min-w-0 flex-1 flex-nowrap gap-[3px] overflow-x-auto no-scrollbar" hidden={collapsed} role="tablist">
+        <nav aria-label="Sidebar" className="flex min-w-0 flex-1 flex-nowrap gap-[3px] overflow-x-auto no-scrollbar" hidden={collapsed} role="tablist">
           {tabs.map((tab) => (
             <Tooltip key={tab.id}>
               <TooltipTrigger
@@ -253,7 +253,7 @@ export function WorkspacePanel(props: WorkspacePanelProps) {
                   />
                 )}
               </TooltipTrigger>
-              <TooltipContent side="bottom">{props.pendingTabIds.includes(tab.id) ? `${tab.label} - es gibt Neues` : tab.label}</TooltipContent>
+              <TooltipContent side="bottom">{props.pendingTabIds.includes(tab.id) ? `${tab.label} - new activity` : tab.label}</TooltipContent>
             </Tooltip>
           ))}
         </nav>

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

@@ -1,22 +1,22 @@
 import type { AccessSnapshot } from "../../../packages/ragents/src/access";
 
 export function accessSnapshotFrom(value: unknown): AccessSnapshot {
-  if (!value || typeof value !== "object") throw new Error("Ungültige Benutzerkonfiguration");
+  if (!value || typeof value !== "object") throw new Error("Invalid user configuration");
   const snapshot = value as Record<string, unknown>;
-  if (typeof snapshot.enabled !== "boolean") throw new Error("Ungültiger Anmeldemodus");
+  if (typeof snapshot.enabled !== "boolean") throw new Error("Invalid sign-in mode");
   if (snapshot.user === null) return { enabled: snapshot.enabled, user: null };
   const user = snapshot.user as Record<string, unknown> | undefined;
   if (!user || typeof user.id !== "string" || typeof user.label !== "string"
     || !Array.isArray(user.rights) || !user.rights.every((right) => typeof right === "string")
     || (user.startEntries !== undefined && (!Array.isArray(user.startEntries)
       || !user.startEntries.every((entry) => typeof entry === "string" && entry.length > 0)))) {
-    throw new Error("Ungültiger angemeldeter Benutzer");
+    throw new Error("Invalid signed-in user");
   }
   return { enabled: snapshot.enabled, user: { id: user.id, label: user.label, rights: user.rights,
     ...(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. */
+/** The paths the server puts behind sign-in; all UI data flows through /rpc and /rpc/stream. */
 const PROTECTED_PATH = /^\/(?:api|rpc|files)(?:\/|$)/;
 
 export function observeAccessExpiry(request: typeof fetch, origin: string, onExpired: () => void): typeof fetch {

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

@@ -7,12 +7,12 @@ let installed: string | undefined;
 const sameOrigin = (url: string, browser: Window): boolean => new URL(url, browser.location.href).origin === browser.location.origin;
 
 /**
- * Hält den Zugangstoken einer Seite, die ohne Anmeldecookie läuft (iframe in einem VS-Code-Webview):
- * jeder Abruf an den eigenen Server trägt ihn als Bearer, Adressen ohne Header (Ereignisstrom, Frames) als Abfrageparameter.
+ * Holds the access token of a page that runs without a sign-in cookie (iframe in a VS Code webview):
+ * every fetch to its own server carries it as a bearer, addresses without headers (event stream, frames) as a query parameter.
  */
 export function installAccessToken(token: string, browser: Window = window): void {
-  if (!token) throw new Error("Der Zugangstoken ist leer.");
-  if (installed !== undefined) throw new Error("Der Zugangstoken ist bereits installiert.");
+  if (!token) throw new Error("The access token is empty.");
+  if (installed !== undefined) throw new Error("The access token is already installed.");
   installed = token;
   const original = browser.fetch.bind(browser);
   browser.fetch = (input, init) => {
@@ -24,7 +24,7 @@ export function installAccessToken(token: string, browser: Window = window): voi
 
 export const accessTokenInstalled = (): boolean => installed !== undefined;
 
-/** Hängt den installierten Token an eine Serveradresse an; ohne Token bleibt die Adresse unverändert. */
+/** Appends the installed token to a server address; without a token the address stays unchanged. */
 export function withAccessToken(path: string): string {
   if (installed === undefined) return path;
   return `${path}${path.includes("?") ? "&" : "?"}${ACCESS_TOKEN_QUERY}=${encodeURIComponent(installed)}`;

package/apps/web/src/actor-conversation.ts

@@ -6,8 +6,8 @@ const ACTOR_HUES = [212, 158, 28, 283, 350, 190, 95, 320, 55, 245];
 const shortId = (id: string) => id.length > 12 ? `${id.slice(0, 12)}...` : id;
 
 export const actorInputLabel = (view: RunView, input: RunActorInput): string => input.subscriptionId
-  ? "Über Subscription zugestellt"
-  : `Zugestellt von @${view.actors.find((actor) => actor.id === input.enqueuedBy)?.handle ?? shortId(input.enqueuedBy)}`;
+  ? "Delivered via subscription"
+  : `Delivered by @${view.actors.find((actor) => actor.id === input.enqueuedBy)?.handle ?? shortId(input.enqueuedBy)}`;
 
 export const actorConversation = (view: RunView, actor: RunActor): Message[] => {
   const colorOf = (actorId: string) => {
@@ -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 Run-Ansicht`);
+        if (!artifact) throw new Error(`Attachment ${id} is missing from the run view`);
         return {
           name: artifact.title, mediaType: artifact.mediaType, size: artifact.size,
           url: `/chat/${encodeURIComponent(view.id)}/attachments/${encodeURIComponent(id)}`,

package/apps/web/src/actor-programs/client-ui/DataTable.tsx

@@ -4,11 +4,11 @@ import { Button, Checkbox, Input, Table, TableBody, TableCell, TableHead, TableH
 import type { DataTableProps, TableAction, TableColumn, TableValue } from "./table-contracts";
 
 export type TableSort = { id: string; direction: "asc" | "desc" };
-const displayValue = (value: TableValue) => value === null || value === undefined ? "" : typeof value === "boolean" ? value ? "Ja" : "Nein" : String(value);
+const displayValue = (value: TableValue) => value === null || value === undefined ? "" : typeof value === "boolean" ? value ? "Yes" : "No" : String(value);
 
 export function tableRows<Row>(rows: readonly Row[], columns: readonly TableColumn<Row>[], query: string, sort?: TableSort): Row[] {
-  const needle = query.trim().toLocaleLowerCase("de-DE");
-  const filtered = rows.filter((row) => !needle || columns.some((column) => column.filterable !== false && displayValue(column.value(row)).toLocaleLowerCase("de-DE").includes(needle)));
+  const needle = query.trim().toLocaleLowerCase("en-US");
+  const filtered = rows.filter((row) => !needle || columns.some((column) => column.filterable !== false && displayValue(column.value(row)).toLocaleLowerCase("en-US").includes(needle)));
   const column = sort && columns.find((entry) => entry.id === sort.id && entry.sortable);
   if (!column || !sort) return filtered;
   return filtered.sort((left, right) => {
@@ -18,7 +18,7 @@ export function tableRows<Row>(rows: readonly Row[], columns: readonly TableColu
     if (b === null || b === undefined) return -1;
     const order = typeof a === "number" && typeof b === "number" ? a - b
       : typeof a === "boolean" && typeof b === "boolean" ? Number(a) - Number(b)
-      : String(a).localeCompare(String(b), "de-DE", { numeric: true });
+      : String(a).localeCompare(String(b), "en-US", { numeric: true });
     return sort.direction === "asc" ? order : -order;
   });
 }
@@ -61,11 +61,11 @@ export function DataTable<Row>(props: DataTableProps<Row>) {
     }
   };
   return (
-    <section aria-label={title ?? "Datentabelle"} aria-busy={loading} className="flex min-w-0 flex-col gap-3">
+    <section aria-label={title ?? "Data table"} 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} />}
+      {filterable && <Input aria-label="Search table" id={filterId} onChange={(event) => setQuery(event.target.value)} placeholder="Search table" type="search" value={query} />}
       {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}>
+      <div aria-label={title ?? "Table content"} className="max-w-full overflow-auto" role="region" tabIndex={0}>
         <Table>
           <TableHeader><TableRow>
             {selectable && <TableHead className="w-8"><Checkbox aria-label="Select all visible rows" checked={allSelected} disabled={loading || visible.length === 0} indeterminate={partiallySelected} onCheckedChange={toggleVisible} /></TableHead>}
@@ -76,7 +76,7 @@ export function DataTable<Row>(props: DataTableProps<Row>) {
                 </Button>
                 : column.label}
             </TableHead>)}
-            {actions.length > 0 && <TableHead>Aktionen</TableHead>}
+            {actions.length > 0 && <TableHead>Actions</TableHead>}
           </TableRow></TableHeader>
           <TableBody>
             {visible.map((row) => {

package/apps/web/src/actor-programs/client-ui/FilePicker.tsx

@@ -23,7 +23,7 @@ function FilePreview({ file }: { file: File }) {
     return () => { active = false; };
   }, [file]);
   if (preview?.file !== file) return null;
-  if (preview.error) return <p className="text-sm text-destructive" role="alert">Vorschau fehlgeschlagen: {preview.error}</p>;
+  if (preview.error) return <p className="text-sm text-destructive" role="alert">Preview failed: {preview.error}</p>;
   if (preview.text !== undefined) return <div className="mt-3 max-h-56 overflow-auto rounded-md bg-muted"><SourceCode content={preview.text} path={file.name} /></div>;
   if (!preview.url) return null;
   if (file.type.startsWith("image/")) return <img alt={file.name} className="mt-3 block max-h-56 max-w-full rounded-md" src={preview.url} />;
@@ -53,12 +53,12 @@ export function FilePicker({ label, files, onChange, disabled, showPreview = tru
       <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">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>}
+      {options.accept && <p className="text-xs text-muted-foreground">Allowed: {options.accept}</p>}
     </div>
     {error && <p className="mt-2 text-sm text-destructive" role="alert">{error}</p>}
     {files.length > 0 && <ul className="mt-2 divide-y">{files.map((file, index) => <li className="py-2" key={`${file.name}:${file.size}:${file.lastModified}:${index}`}>
-      <div className="flex items-start justify-between gap-3"><span className="min-w-0 break-words"><strong>{file.name}</strong> <small className="block text-muted-foreground">{new Intl.NumberFormat("de-DE").format(file.size)} Bytes</small></span>
-        <Button aria-label={`${file.name} entfernen`} disabled={blocked} onClick={() => { void change(() => files.filter((_, position) => position !== index)); }} size="sm" variant="outline">Entfernen</Button></div>
+      <div className="flex items-start justify-between gap-3"><span className="min-w-0 break-words"><strong>{file.name}</strong> <small className="block text-muted-foreground">{new Intl.NumberFormat("en-US").format(file.size)} bytes</small></span>
+        <Button aria-label={`Remove ${file.name}`} disabled={blocked} onClick={() => { void change(() => files.filter((_, position) => position !== index)); }} size="sm" variant="outline">Remove</Button></div>
       {showPreview && <FilePreview file={file} />}
     </li>)}</ul>}
   </section>;