@schlenkr/ragents 0.1.9 → 0.1.11

package/apps/web/src/panel/ConnectionsPage.tsx

@@ -1,5 +1,6 @@
 import { FolderIcon, KeyIcon, PencilIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
+import { cn } from "cn";
 import { Button, ConnectionStateIcon } from "../ui";
 import { busyState, connectionState, kindLabel, stateDetail } from "./connection-state";
 import type { ConnectionView, PanelAction } from "./contract";
@@ -9,7 +10,7 @@ import { PanelHeader } from "./PanelHeader";
 
 const fileNameOf = (address: string): string => address.split(/[/\\]/).pop() ?? address;
 
-/** Ein lokales Profil startet die Erweiterung selbst; nur ein Server per Adresse kennt Verbinden, Trennen und Anmelden. */
+/** The extension starts a local profile itself; only a server by address knows connect, disconnect, and sign-in. */
 function RowActions({ connection, busy, send, onLogin }: {
   connection: ConnectionView;
   busy: boolean;
@@ -21,16 +22,16 @@ function RowActions({ connection, busy, send, onLogin }: {
   const missing = connection.missingEnvironment;
   if (missing) {
     return <>
-      <Button aria-label={`Wert für ${missing.variable} setzen und ${connection.name} erneut starten`} disabled={busy}
-        onClick={() => send({ action: "setSecret", name: missing.variable, connection: connection.name })} size="xs"><KeyIcon data-icon="inline-start" />Wert setzen</Button>
-      <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Erneut versuchen</Button>
+      <Button aria-label={`Set value for ${missing.variable} and restart ${connection.name}`} disabled={busy}
+        onClick={() => send({ action: "setSecret", name: missing.variable, connection: connection.name })} size="xs"><KeyIcon data-icon="inline-start" />Set value</Button>
+      <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Retry</Button>
     </>;
   }
-  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(connection.name)} size="xs" variant="secondary">Anmelden</Button>;
-  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Erneut versuchen</Button>;
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(connection.name)} size="xs" variant="secondary">Sign in</Button>;
+  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: connection.name })} size="xs" variant="secondary">Retry</Button>;
   if (profile) return null;
-  if (state === "connected") return <Button disabled={busy} onClick={() => send({ action: "disconnect", name: connection.name })} size="xs" variant="ghost">Trennen</Button>;
-  if (state === "stopped") return <Button disabled={busy} onClick={() => send({ action: "connect", name: connection.name })} size="xs" variant="secondary">Verbinden</Button>;
+  if (state === "connected") return <Button disabled={busy} onClick={() => send({ action: "disconnect", name: connection.name })} size="xs" variant="ghost">Disconnect</Button>;
+  if (state === "stopped") return <Button disabled={busy} onClick={() => send({ action: "connect", name: connection.name })} size="xs" variant="secondary">Connect</Button>;
   return null;
 }
 
@@ -43,6 +44,7 @@ function ConnectionRow({ connection, send, onEdit, onLogin, onRemove }: {
 }) {
   const busy = busyState(connection);
   const detail = stateDetail(connection) ?? connection.problem;
+  const notice = connection.versionNotice;
   const profile = connection.kind === "profile";
   return <li className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2.5 gap-y-1.5 border-b border-border-soft px-1 py-2.5 last:border-b-0">
     <span aria-hidden className="grid size-[26px] flex-none place-items-center rounded-md bg-secondary text-muted-foreground">
@@ -57,33 +59,34 @@ function ConnectionRow({ connection, send, onEdit, onLogin, onRemove }: {
       <span className="block truncate font-mono text-[0.68rem] text-muted-foreground" title={connection.address}>{profile ? fileNameOf(connection.address) : connection.address}</span>
     </span>
     {detail && <p className="col-span-2 text-[0.7rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+    {notice && <p className={cn("col-span-2 text-[0.7rem] leading-normal [overflow-wrap:anywhere]", notice.level === "error" ? "text-destructive" : "text-warning")} data-notice={notice.level} role={notice.level === "error" ? "alert" : "status"}>{notice.text}</p>}
     <span className="col-span-2 flex flex-wrap items-center gap-1.5">
       <RowActions busy={busy} connection={connection} onLogin={onLogin} send={send} />
-      {connection.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: connection.name })} size="xs" variant="ghost">Abmelden</Button>}
-      <Button onClick={() => onEdit(connection.name)} size="xs" variant="ghost"><PencilIcon data-icon="inline-start" />Bearbeiten</Button>
-      <Button aria-label={`${connection.name} entfernen`} className="ml-auto" onClick={() => onRemove(connection.name)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>
+      {connection.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: connection.name })} size="xs" variant="ghost">Sign out</Button>}
+      <Button onClick={() => onEdit(connection.name)} size="xs" variant="ghost"><PencilIcon data-icon="inline-start" />Edit</Button>
+      <Button aria-label={`Remove ${connection.name}`} className="ml-auto" onClick={() => onRemove(connection.name)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>
     </span>
   </li>;
 }
 
-/** Namen aus ragents.hostEnvironment, zu denen kein Wert gespeichert ist; ohne ihn startet der lokale Host ohne diese Umgebungsvariable. */
+/** Names from ragents.hostEnvironment with no saved value; without it the local host starts without this environment variable. */
 function MissingSecrets({ names, send }: { names: readonly string[]; send: (action: PanelAction) => void }) {
   return <section className="grid grid-cols-1 gap-1.5">
-    <h2 className="text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground">Fehlende Werte</h2>
+    <h2 className="text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground">Missing values</h2>
     <p className="text-[0.7rem] leading-normal text-muted-foreground">
-      Zu diesen Namen aus ragents.hostEnvironment liegt kein Wert in der SecretStorage; ein lokal gestarteter Host bekommt die Umgebungsvariable nicht.
+      These names from ragents.hostEnvironment have no value in the SecretStorage; a locally started host does not get the environment variable.
     </p>
     <ul className="grid grid-cols-1">
       {names.map((name) => <li className="flex items-center gap-2 border-b border-border-soft px-1 py-2.5 last:border-b-0" key={name}>
         <KeyIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />
         <span className="min-w-0 flex-1 truncate font-mono text-[0.72rem]" title={name}>{name}</span>
-        <Button aria-label={`Wert für ${name} setzen`} onClick={() => send({ action: "setSecret", name })} size="xs" variant="secondary">Wert setzen</Button>
+        <Button aria-label={`Set value for ${name}`} onClick={() => send({ action: "setSecret", name })} size="xs" variant="secondary">Set value</Button>
       </li>)}
     </ul>
   </section>;
 }
 
-/** Die Einrichtung: die Server als Zeilen, dahinter die Dialoge zum Anlegen, Bearbeiten, Anmelden und Entfernen. */
+/** The setup: the servers as rows, behind them the dialogs to create, edit, sign in, and remove. */
 export function ConnectionsPage({ state, send }: PanelPageProps) {
   const [dialog, setDialog] = useState<{ kind: "new" } | { kind: "edit"; name: string }>();
   const [login, setLogin] = useState<string>();
@@ -97,21 +100,21 @@ export function ConnectionsPage({ state, send }: PanelPageProps) {
     {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
     <section className="grid grid-cols-1 gap-1.5">
       {state.connections.length === 0
-        ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Server.</p>
+        ? <p className="text-[0.85rem] leading-normal text-muted-foreground">No server yet.</p>
         : <ul className="grid grid-cols-1">
           {state.connections.map((connection) => <ConnectionRow connection={connection} key={connection.name} onEdit={(name) => setDialog({ kind: "edit", name })} onLogin={setLogin} onRemove={setRemoving} send={send} />)}
         </ul>}
     </section>
     {missingSecrets.length > 0 && <MissingSecrets names={missingSecrets} send={send} />}
     <div className="flex flex-wrap items-center gap-2">
-      <Button onClick={() => setDialog({ kind: "new" })} size="sm"><PlusIcon data-icon="inline-start" />Neuer Server</Button>
-      <Button aria-label="Einstellung öffnen" onClick={() => send({ action: "settingsFile" })} size="sm" title="Einstellung öffnen (settings.json)" variant="ghost"><SettingsIcon data-icon="inline-start" />settings.json</Button>
+      <Button onClick={() => setDialog({ kind: "new" })} size="sm"><PlusIcon data-icon="inline-start" />New server</Button>
+      <Button aria-label="Open setting" onClick={() => send({ action: "settingsFile" })} size="sm" title="Open setting (settings.json)" variant="ghost"><SettingsIcon data-icon="inline-start" />settings.json</Button>
     </div>
-    {open && <ConnectionDialog connection={editing} key={editing?.name ?? "neu"} onClose={() => setDialog(undefined)} send={send} state={state} />}
+    {open && <ConnectionDialog connection={editing} key={editing?.name ?? "new"} onClose={() => setDialog(undefined)} send={send} state={state} />}
     {loginConnection && <LoginDialog connection={loginConnection} onClose={() => setLogin(undefined)} send={send} />}
-    {removing !== undefined && <ConfirmDialog confirmLabel="Entfernen" onClose={() => setRemoving(undefined)}
-      onConfirm={() => { send({ action: "remove", name: removing }); setRemoving(undefined); }} title={`${removing} entfernen?`}>
-      Der Server verschwindet aus ragents.connections. Gespeicherte Anmeldedaten gehen dabei verloren. Runs auf dem Server bleiben, wo sie sind.
+    {removing !== undefined && <ConfirmDialog confirmLabel="Remove" onClose={() => setRemoving(undefined)}
+      onConfirm={() => { send({ action: "remove", name: removing }); setRemoving(undefined); }} title={`Remove ${removing}?`}>
+      The server is removed from ragents.connections. Saved credentials are lost. Runs on the server stay where they are.
     </ConfirmDialog>}
   </div>;
 }

package/apps/web/src/panel/LoginForm.tsx

@@ -2,7 +2,7 @@ import { useState, type FormEvent } from "react";
 import { Button, Input, Label } from "../ui";
 import type { ConnectionView, PanelAction } from "./contract";
 
-/** Die Anmeldung an einem Server im Dialogkörper: Benutzer und Passwort oder ein Zugangstoken. */
+/** Signing in to a server in the dialog body: user and password or an access token. */
 export function LoginForm({ connection, mode, busy, send, submitLabel, onCancel }: {
   connection: ConnectionView;
   mode: "password" | "token";
@@ -22,15 +22,15 @@ export function LoginForm({ connection, mode, busy, send, submitLabel, onCancel
   };
   return <form className="grid gap-2.5" onSubmit={submit}>
     {mode === "token"
-      ? <div className="grid gap-1.5"><Label htmlFor={`token-${field}`}>Zugangstoken</Label><Input autoComplete="off" disabled={busy} id={`token-${field}`} onChange={(event) => setToken(event.target.value)} type="password" value={token} /></div>
+      ? <div className="grid gap-1.5"><Label htmlFor={`token-${field}`}>Access token</Label><Input autoComplete="off" disabled={busy} id={`token-${field}`} onChange={(event) => setToken(event.target.value)} type="password" value={token} /></div>
       : <>
-        <div className="grid gap-1.5"><Label htmlFor={`user-${field}`}>Benutzer</Label><Input autoComplete="username" disabled={busy} id={`user-${field}`} onChange={(event) => setUser(event.target.value)} value={user} /></div>
-        <div className="grid gap-1.5"><Label htmlFor={`password-${field}`}>Passwort</Label><Input autoComplete="current-password" disabled={busy} id={`password-${field}`} onChange={(event) => setPassword(event.target.value)} type="password" value={password} /></div>
+        <div className="grid gap-1.5"><Label htmlFor={`user-${field}`}>User</Label><Input autoComplete="username" disabled={busy} id={`user-${field}`} onChange={(event) => setUser(event.target.value)} value={user} /></div>
+        <div className="grid gap-1.5"><Label htmlFor={`password-${field}`}>Password</Label><Input autoComplete="current-password" disabled={busy} id={`password-${field}`} onChange={(event) => setPassword(event.target.value)} type="password" value={password} /></div>
       </>}
     {connection.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{connection.problem}</p>}
-    <p className="text-[0.72rem] leading-normal text-muted-foreground">Die Anmeldedaten liegen im Schlüsselspeicher von VS Code; die Erweiterung meldet sich danach still am Server an.</p>
+    <p className="text-[0.72rem] leading-normal text-muted-foreground">The credentials are stored in the VS Code secret storage; the extension then signs in to the server silently.</p>
     <div className="mt-1 flex flex-wrap justify-end gap-2">
-      {onCancel && <Button onClick={onCancel} size="sm" type="button" variant="ghost">Abbrechen</Button>}
+      {onCancel && <Button onClick={onCancel} size="sm" type="button" variant="ghost">Cancel</Button>}
       <Button disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>
     </div>
   </form>;

package/apps/web/src/panel/PanelDialogs.tsx

@@ -7,7 +7,7 @@ import { LoginForm } from "./LoginForm";
 
 const PROFILE_FILE = /^ragents\.config\.([a-z0-9]+(?:-[a-z0-9]+)*)\.ts$/;
 
-/** Eine Profildatei heißt ragents.config.<profil>.ts; ihr Profil ist der Name, den der Dialog vorschlägt. */
+/** A profile file is named ragents.config.<profile>.ts; its profile is the name the dialog suggests. */
 export const profileNameOf = (profileFile: string): string =>
   PROFILE_FILE.exec(profileFile.split(/[/\\]/).pop() ?? "")?.[1] ?? "";
 
@@ -22,7 +22,7 @@ function PanelDialog({ title, onClose, children }: { title: string; onClose: ()
   </Dialog>;
 }
 
-/** Die Sicherheitsfrage vor einer Handlung, die nichts zurücknimmt: Entfernen eines Servers, Löschen von Runs. */
+/** The confirmation before an action that cannot be undone: removing a server, deleting runs. */
 export function ConfirmDialog({ title, confirmLabel, onConfirm, onClose, children }: {
   title: string;
   confirmLabel: string;
@@ -33,27 +33,27 @@ export function ConfirmDialog({ title, confirmLabel, onConfirm, onClose, childre
   return <PanelDialog onClose={onClose} title={title}>
     <p className="text-[0.78rem] leading-normal text-muted-foreground [overflow-wrap:anywhere]">{children}</p>
     <div className="mt-1 flex flex-wrap justify-end gap-2">
-      <Button onClick={onClose} size="sm" type="button" variant="ghost">Abbrechen</Button>
+      <Button onClick={onClose} size="sm" type="button" variant="ghost">Cancel</Button>
       <Button onClick={onConfirm} size="sm" type="button" variant="destructive">{confirmLabel}</Button>
     </div>
   </PanelDialog>;
 }
 
-/** Die Anmeldung an einem Server, von der Start-Seite wie von der Seite Server derselbe Dialog. */
+/** Signing in to a server, the same dialog from the Start page and from the Server page. */
 export function LoginDialog({ connection, onClose, send }: { connection: ConnectionView; onClose: () => void; send: (action: PanelAction) => void }) {
   const demanded = connection.state.kind === "login-required" ? connection.state.mode : "password";
   const [mode, setMode] = useState<"password" | "token">(demanded);
   useEffect(() => { if (connection.state.kind === "connected") onClose(); }, [onClose, connection.state.kind]);
-  return <PanelDialog onClose={onClose} title={`Anmelden an ${connection.name}`}>
-    <div aria-label="Art der Anmeldung" className="flex gap-1.5" role="group">
-      <Toggle onPressedChange={() => setMode("password")} pressed={mode === "password"} size="sm" variant="outline">Benutzer</Toggle>
-      <Toggle onPressedChange={() => setMode("token")} pressed={mode === "token"} size="sm" variant="outline">Zugangstoken</Toggle>
+  return <PanelDialog onClose={onClose} title={`Sign in to ${connection.name}`}>
+    <div aria-label="Sign-in method" className="flex gap-1.5" role="group">
+      <Toggle onPressedChange={() => setMode("password")} pressed={mode === "password"} size="sm" variant="outline">User</Toggle>
+      <Toggle onPressedChange={() => setMode("token")} pressed={mode === "token"} size="sm" variant="outline">Access token</Toggle>
     </div>
-    <LoginForm busy={busyState(connection)} connection={connection} key={mode} mode={mode} onCancel={onClose} send={send} submitLabel="Anmelden" />
+    <LoginForm busy={busyState(connection)} connection={connection} key={mode} mode={mode} onCancel={onClose} send={send} submitLabel="Sign in" />
   </PanelDialog>;
 }
 
-/** Anlegen und Bearbeiten eines Servers; Bearbeiten schickt update und behält damit die gespeicherten Anmeldedaten. */
+/** Creating and editing a server; editing sends update and so keeps the saved credentials. */
 export function ConnectionDialog({ state, connection, onClose, send }: {
   state: PanelState;
   connection: ConnectionView | undefined;
@@ -91,22 +91,22 @@ export function ConnectionDialog({ state, connection, onClose, send }: {
       ? { action: "updateServer", name: connection.name, newName: name, url }
       : { action: "updateProfile", name: connection.name, newName: name, profileFile });
   };
-  return <PanelDialog onClose={onClose} title={connection ? `${connection.name} bearbeiten` : "Neuer Server"}>
+  return <PanelDialog onClose={onClose} title={connection ? `Edit ${connection.name}` : "New server"}>
     <form className="grid gap-3" onSubmit={submit}>
-      <div aria-label="Art des Servers" className="flex gap-1.5" role="group">
+      <div aria-label="Server type" className="flex gap-1.5" role="group">
         <Toggle onPressedChange={() => setKind("server")} pressed={kind === "server"} size="sm" variant="outline">Server</Toggle>
-        <Toggle onPressedChange={() => setKind("profile")} pressed={kind === "profile"} size="sm" variant="outline">Lokales Profil</Toggle>
+        <Toggle onPressedChange={() => setKind("profile")} pressed={kind === "profile"} size="sm" variant="outline">Local profile</Toggle>
       </div>
       {kind === "server"
-        ? <div className="grid gap-1.5"><Label htmlFor="connection-url">Adresse</Label><Input id="connection-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
+        ? <div className="grid gap-1.5"><Label htmlFor="connection-url">Address</Label><Input id="connection-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://workshop.example.com" value={url} /></div>
         : <div className="grid gap-1.5">
-          <Label htmlFor="connection-profile-file">Profildatei</Label>
+          <Label htmlFor="connection-profile-file">Profile file</Label>
           <div className="flex items-center gap-2">
-            <Input aria-label="Profildatei" className="min-w-0 flex-1 font-mono text-[0.72rem]" id="connection-profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" title={profileFile} value={profileFile} />
-            <Button className="flex-none" onClick={() => send({ action: "pickProfile" })} size="sm" type="button" variant="secondary"><FolderOpenIcon data-icon="inline-start" />Datei wählen ...</Button>
+            <Input aria-label="Profile file" className="min-w-0 flex-1 font-mono text-[0.72rem]" id="connection-profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" title={profileFile} value={profileFile} />
+            <Button className="flex-none" onClick={() => send({ action: "pickProfile" })} size="sm" type="button" variant="secondary"><FolderOpenIcon data-icon="inline-start" />Choose file ...</Button>
           </div>
           {state.profileSuggestions.length > 0 && <>
-            <p className="text-[0.7rem] leading-normal text-muted-foreground">Im Host-Ordner gefunden, ein Klick übernimmt sie:</p>
+            <p className="text-[0.7rem] leading-normal text-muted-foreground">Found in the host folder, click one to use it:</p>
             <ul className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-1.5">
               {state.profileSuggestions.map((file) => <li key={file}>
                 <button aria-pressed={profileFile === file} className="flex w-full min-w-0 flex-col gap-0.5 rounded-md border border-border-soft px-2.5 py-1.5 text-left hover:border-border aria-pressed:border-primary aria-pressed:bg-accent" onClick={() => takeProfile(file)} type="button">
@@ -119,13 +119,13 @@ export function ConnectionDialog({ state, connection, onClose, send }: {
         </div>}
       <div className="grid gap-1.5">
         <Label htmlFor="connection-name">Name</Label>
-        <Input id="connection-name" onChange={(event) => setName(event.target.value)} placeholder={kind === "server" ? "Werkstatt" : "core"} value={name} />
-        {kind === "profile" && <span className="text-[0.68rem] text-muted-foreground">aus dem Dateinamen übernommen, überschreibbar</span>}
+        <Input id="connection-name" onChange={(event) => setName(event.target.value)} placeholder={kind === "server" ? "Workshop" : "core"} value={name} />
+        {kind === "profile" && <span className="text-[0.68rem] text-muted-foreground">taken from the file name, can be changed</span>}
       </div>
       {state.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
       <div className="mt-1 flex flex-wrap justify-end gap-2">
-        <Button onClick={onClose} size="sm" type="button" variant="ghost">Abbrechen</Button>
-        <Button disabled={!name.trim() || !value.trim()} size="sm" type="submit">{connection ? "Speichern" : "Anlegen"}</Button>
+        <Button onClick={onClose} size="sm" type="button" variant="ghost">Cancel</Button>
+        <Button disabled={!name.trim() || !value.trim()} size="sm" type="submit">{connection ? "Save" : "Create"}</Button>
       </div>
     </form>
   </PanelDialog>;

package/apps/web/src/panel/PanelHeader.tsx

@@ -2,10 +2,10 @@ import { ArrowLeftIcon } from "lucide-react";
 import { Button } from "../ui";
 import type { PanelAction } from "./contract";
 
-/** Die Kopfzeile der Seiten Runs und Server: der Weg zurück auf Start und der Seitentitel; die Aktionen stehen in der Titelzeile von VS Code. */
+/** The header of the Runs and Server pages: the way back to Start and the page title; the actions are in the VS Code title bar. */
 export function PanelHeader({ title, send }: { title: string; send: (action: PanelAction) => void }) {
   return <div className="flex items-center gap-1.5">
-    <Button aria-label="Zur Start-Seite" onClick={() => send({ action: "page", page: "start" })} size="icon-sm" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
+    <Button aria-label="Back to Start" onClick={() => send({ action: "page", page: "start" })} size="icon-sm" title="Back to Start" variant="ghost"><ArrowLeftIcon /></Button>
     <h1 className="min-w-0 flex-1 text-[1.1rem] font-semibold">{title}</h1>
   </div>;
 }

package/apps/web/src/panel/PanelPage.tsx

@@ -3,7 +3,7 @@ import type { PanelPageProps } from "./page-props";
 import { RunsPage } from "./RunsPage";
 import { StartPage } from "./StartPage";
 
-/** Das Panel ohne geöffneten Run: Start, Runs oder Server; der Run selbst liegt im Run-Panel. */
+/** The panel without an open run: Start, Runs, or Server; the run itself lives in the run panel. */
 export function PanelPage(props: PanelPageProps) {
   const page = props.state.page;
   return <main className="h-full overflow-y-auto p-3">

package/apps/web/src/panel/RunLine.tsx

@@ -7,12 +7,12 @@ import type { ConnectionRun, ConnectionView } from "./contract";
 const lineClass = "grid grid-cols-subgrid items-center rounded-md px-2 py-1.5 text-left hover:bg-accent"
   + " focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60";
 
-/** Die Spalten der Liste: Kontrollkästchen (nur im Auswahlmodus), Zustand, Titel, Zeit und Server (nur ab zwei Servern). */
+/** The list columns: checkbox (only in selection mode), state, title, time, and server (only with two or more servers). */
 const columnsOf = (showConnection: boolean, selecting: boolean): string => selecting
   ? (showConnection ? "grid-cols-[auto_auto_minmax(0,1fr)_auto_auto]" : "grid-cols-[auto_auto_minmax(0,1fr)_auto]")
   : (showConnection ? "grid-cols-[auto_minmax(0,1fr)_auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto]");
 
-/** Die Liste der Run-Zeilen: ein Raster, dessen Spalten die Zeilen per Subgrid teilen, damit alles untereinander steht. */
+/** The list of run lines: a grid whose columns the rows share via subgrid so everything lines up. */
 export function RunList({ label, showConnection, selecting = false, children }: {
   label: string;
   showConnection: boolean;
@@ -22,7 +22,7 @@ export function RunList({ label, showConnection, selecting = false, children }:
   return <ul aria-label={label} className={cn("-mx-2 grid gap-x-2 gap-y-0.5", columnsOf(showConnection, selecting))}>{children}</ul>;
 }
 
-/** Eine Zeile je Run, auf Start wie auf Runs dieselbe: Zustand und Titel links, rechts Zeit und Server in den Spalten der Liste. */
+/** One line per run, the same on Start and on Runs: state and title on the left, time and server on the right in the list columns. */
 export function RunLine({ connection, run, showConnection, selecting, selected, onOpen, onToggle }: {
   connection: ConnectionView;
   run: ConnectionRun;
@@ -35,7 +35,7 @@ export function RunLine({ connection, run, showConnection, selecting, selected,
   const time = shortTime(run.updatedAt);
   const problem = run.locked !== undefined ? `Locked: ${run.locked}` : run.problem;
   return <li className="col-span-full grid grid-cols-subgrid items-center">
-    {selecting && <Checkbox aria-label={`${run.title} auswählen`} checked={selected === true} className="ml-1" onCheckedChange={() => onToggle?.()} />}
+    {selecting && <Checkbox aria-label={`Select ${run.title}`} checked={selected === true} className="ml-1" onCheckedChange={() => onToggle?.()} />}
     <button aria-disabled={run.locked !== undefined && !selecting} className={cn(lineClass, selecting ? "col-[2/-1]" : "col-span-full", "aria-disabled:cursor-default aria-disabled:hover:bg-transparent")}
       onClick={() => (selecting ? onToggle?.() : run.locked === undefined && onOpen())} title={showConnection ? `${run.title} (${connection.name})` : run.title} type="button">
       <RunStateIcon open={run.pendingActions} state={run.state} />

package/apps/web/src/panel/RunsPage.tsx

@@ -10,9 +10,9 @@ import { RunLine, RunList } from "./RunLine";
 const keyOf = (connection: string, runId: string): string => `${connection}\u0000${runId}`;
 
 const matches = (connection: ConnectionView, run: ConnectionRun, query: string): boolean =>
-  `${run.title} ${connection.name}`.toLocaleLowerCase("de-DE").includes(query);
+  `${run.title} ${connection.name}`.toLocaleLowerCase("en-US").includes(query);
 
-/** Alle Runs aller Server als eine Liste: Suche, beendete ausblenden, der Serverfilter vom Chip auf Start und eine Mehrfachauswahl zum Löschen. */
+/** All runs of all servers as one list: search, hide ended, the server filter from the chip on Start, and a multi-selection for deleting. */
 export function RunsPage({ state, send }: PanelPageProps) {
   const [query, setQuery] = useState("");
   const [onlyConnection, setOnlyConnection] = useState(state.runsConnection);
@@ -23,7 +23,7 @@ export function RunsPage({ state, send }: PanelPageProps) {
   const marked = state.connections.length > 1;
   const all = state.connections.flatMap((connection) => connection.runs.map((run) => ({ connection, run })))
     .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
-  const needle = query.trim().toLocaleLowerCase("de-DE");
+  const needle = query.trim().toLocaleLowerCase("en-US");
   const shown = all
     .filter(({ connection }) => onlyConnection === undefined || connection.name === onlyConnection)
     .filter(({ run }) => !hideEnded || run.state !== "ended")
@@ -49,36 +49,36 @@ export function RunsPage({ state, send }: PanelPageProps) {
     <PanelHeader send={send} title="Runs" />
     <div className="relative">
       <SearchIcon aria-hidden className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
-      <Input aria-label="Runs suchen" className="h-8 pl-8 text-[0.76rem]" onChange={(event) => setQuery(event.target.value)}
-        placeholder="Runs suchen ..." type="search" value={query} />
+      <Input aria-label="Search runs" className="h-8 pl-8 text-[0.76rem]" onChange={(event) => setQuery(event.target.value)}
+        placeholder="Search runs ..." type="search" value={query} />
     </div>
     <div className="flex flex-wrap items-center gap-1.5">
-      {onlyConnection !== undefined && <Toggle aria-label={`Nur ${onlyConnection}`} onPressedChange={() => setOnlyConnection(undefined)} pressed size="sm" title={`Nur Runs auf ${onlyConnection}; Klick zeigt alle`} variant="outline">
+      {onlyConnection !== undefined && <Toggle aria-label={`Only ${onlyConnection}`} onPressedChange={() => setOnlyConnection(undefined)} pressed size="sm" title={`Only runs on ${onlyConnection}; click to show all`} variant="outline">
         {onlyConnection}<XIcon data-icon="inline-end" />
       </Toggle>}
-      <Toggle onPressedChange={setHideEnded} pressed={hideEnded} size="sm" variant="outline">Beendete ausblenden</Toggle>
+      <Toggle onPressedChange={setHideEnded} pressed={hideEnded} size="sm" variant="outline">Hide ended</Toggle>
       <Toggle onPressedChange={(next) => (next ? setSelecting(true) : leaveSelection())} pressed={selecting} size="sm" variant="outline">
-        <CheckSquareIcon data-icon="inline-start" />Auswählen
+        <CheckSquareIcon data-icon="inline-start" />Select
       </Toggle>
     </div>
     {shown.length === 0
-      ? <p className="text-[0.75rem] text-muted-foreground" role="status">{all.length === 0 ? "Noch keine Runs." : "Kein passender Run."}</p>
+      ? <p className="text-[0.75rem] text-muted-foreground" role="status">{all.length === 0 ? "No runs yet." : "No matching run."}</p>
       : <RunList label="Runs" selecting={selecting} showConnection={marked}>
         {shown.map(({ connection, run }) => <RunLine connection={connection} key={keyOf(connection.name, run.id)}
           onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })}
           onToggle={() => toggle(keyOf(connection.name, run.id))} run={run} selected={selected.has(keyOf(connection.name, run.id))} selecting={selecting} showConnection={marked} />)}
       </RunList>}
     {selecting && <div className="sticky bottom-0 flex flex-wrap items-center gap-2 border-t border-border-soft bg-background py-2">
-      <span className="flex-1 text-[0.72rem] text-muted-foreground" role="status">{selected.size} ausgewählt</span>
-      <Button disabled={selected.size === 0} onClick={() => setConfirming(true)} size="xs" variant="destructive"><Trash2Icon data-icon="inline-start" />Löschen</Button>
-      <Button onClick={leaveSelection} size="xs" variant="ghost">Abbrechen</Button>
+      <span className="flex-1 text-[0.72rem] text-muted-foreground" role="status">{selected.size} selected</span>
+      <Button disabled={selected.size === 0} onClick={() => setConfirming(true)} size="xs" variant="destructive"><Trash2Icon data-icon="inline-start" />Delete</Button>
+      <Button onClick={leaveSelection} size="xs" variant="ghost">Cancel</Button>
     </div>}
     {confirming && <ConfirmDialog
-      confirmLabel="Löschen"
+      confirmLabel="Delete"
       onClose={() => setConfirming(false)}
       onConfirm={remove}
-      title={selected.size === 1 ? "Einen Run löschen?" : `${selected.size} Runs löschen?`}>
-      Die gewählten Runs verschwinden mit ihren Journalen von ihrem Server. Das lässt sich nicht rückgängig machen.
+      title={selected.size === 1 ? "Delete one run?" : `Delete ${selected.size} runs?`}>
+      The selected runs are removed from their server along with their journals. This cannot be undone.
     </ConfirmDialog>}
   </div>;
 }

package/apps/web/src/panel/StartPage.tsx

@@ -11,25 +11,25 @@ import { RunLine, RunList } from "./RunLine";
 
 const RECENT_RUNS = 5;
 
-/** Die Vorlage hinter defaultEntry; die Erweiterung nennt nur eine Kennung aus entries. */
+/** The template behind defaultEntry; the extension names only an id from entries. */
 const defaultEntryOf = (connection: ConnectionView): ConnectionEntry | undefined => connection.entries.find((entry) => entry.id === connection.defaultEntry);
 
 const chipPartClass = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60 enabled:hover:bg-accent";
 const iconPartClass = "flex w-8 flex-none items-center justify-center";
 
-/** Was der linke Teil des Chips tut: das Wort steht neben dem Namen, das Label im Tooltip; ohne run ist er gesperrt. */
+/** What the left part of the chip does: the word stands next to the name, the label in the tooltip; without run it is disabled. */
 const chipAction = (connection: ConnectionView, send: PanelPageProps["send"], onLogin: (name: string) => void): { word: string; label: string; run?: () => void } => {
   switch (connectionState(connection)) {
     case "login-required":
-    case "forbidden": return { word: "Anmelden", label: `An ${connection.name} anmelden`, run: () => onLogin(connection.name) };
+    case "forbidden": return { word: "Sign in", label: `Sign in to ${connection.name}`, run: () => onLogin(connection.name) };
     case "unreachable":
-    case "failed": return { word: "Erneut versuchen", label: `${connection.name} erneut versuchen`, run: () => send({ action: "retry", name: connection.name }) };
+    case "failed": return { word: "Retry", label: `Retry ${connection.name}`, run: () => send({ action: "retry", name: connection.name }) };
     case "stopped": return connection.kind === "profile"
-      ? { word: "Starten", label: `${connection.name} starten`, run: () => send({ action: "startProfile", name: connection.name }) }
-      : { word: "Verbinden", label: `Mit ${connection.name} verbinden`, run: () => send({ action: "connect", name: connection.name }) };
-    case "starting": return { word: "startet ...", label: `${connection.name} startet` };
+      ? { word: "Start", label: `Start ${connection.name}`, run: () => send({ action: "startProfile", name: connection.name }) }
+      : { word: "Connect", label: `Connect to ${connection.name}`, run: () => send({ action: "connect", name: connection.name }) };
+    case "starting": return { word: "starting ...", label: `${connection.name} is starting` };
     case "connected":
-    case "ready": return { word: "", label: `Runs auf ${connection.name}`, run: () => send({ action: "page", page: "runs", connection: connection.name }) };
+    case "ready": return { word: "", label: `Runs on ${connection.name}`, run: () => send({ action: "page", page: "runs", connection: connection.name }) };
   }
 };
 
@@ -38,7 +38,7 @@ interface Failure {
   readonly message: string;
 }
 
-/** Das Zustandssymbol als eigener Knopf: bei einem Fehler öffnet es das Popover mit der Meldung, das Schloss den Anmeldedialog. */
+/** The state icon as a button of its own: on an error it opens the popover with the message, the lock opens the sign-in dialog. */
 function StateButton({ connection, action, failure, onFailure, send, onLogin }: {
   connection: ConnectionView;
   action: ReturnType<typeof chipAction>;
@@ -51,29 +51,29 @@ function StateButton({ connection, action, failure, onFailure, send, onLogin }:
   const detail = stateDetail(connection);
   const missing = connection.missingEnvironment;
   if (state === "login-required") {
-    return <button aria-label={`Anmeldung an ${connection.name}`} className={cn(iconPartClass, chipPartClass)} onClick={() => onLogin(connection.name)} type="button">
+    return <button aria-label={`Sign-in for ${connection.name}`} className={cn(iconPartClass, chipPartClass)} onClick={() => onLogin(connection.name)} type="button">
       <ConnectionStateIcon state={state} />
     </button>;
   }
   const shown = detail !== undefined ? { title: connectionStateWord(state), message: detail } : failure;
   return <Popover onOpenChange={(next) => onFailure(next ? shown : undefined)} open={failure !== undefined}>
-    <PopoverTrigger aria-label={`Fehler von ${connection.name} anzeigen`} className={cn(iconPartClass, chipPartClass)}>
+    <PopoverTrigger aria-label={`Show error of ${connection.name}`} className={cn(iconPartClass, chipPartClass)}>
       <ConnectionStateIcon state={state} />
     </PopoverTrigger>
     {shown && <PopoverContent align="start" className="w-[min(360px,calc(100vw-16px))] gap-2 p-3" collisionPadding={8} dim side="bottom">
       <PopoverHeader><PopoverTitle className="text-[0.8rem] font-semibold text-destructive">{shown.title}</PopoverTitle></PopoverHeader>
       <p className={cn("max-h-[50vh] overflow-auto select-text whitespace-pre-wrap text-[0.72rem] leading-normal [overflow-wrap:anywhere]", shown.message.includes("\n") && "font-mono")}>{shown.message}</p>
       <div className="flex flex-wrap justify-end gap-2">
-        <Button onClick={() => send({ action: "showOutput" })} size="xs" variant="ghost">Ausgabe öffnen</Button>
-        {missing && <Button aria-label={`Wert für ${missing.variable} setzen und ${connection.name} erneut starten`}
-          onClick={() => { onFailure(undefined); send({ action: "setSecret", name: missing.variable, connection: connection.name }); }} size="xs">Wert setzen</Button>}
+        <Button onClick={() => send({ action: "showOutput" })} size="xs" variant="ghost">Open output</Button>
+        {missing && <Button aria-label={`Set value for ${missing.variable} and restart ${connection.name}`}
+          onClick={() => { onFailure(undefined); send({ action: "setSecret", name: missing.variable, connection: connection.name }); }} size="xs">Set value</Button>}
         {action.run && action.word && <Button onClick={() => { onFailure(undefined); action.run?.(); }} size="xs" variant="secondary">{action.word}</Button>}
       </div>
     </PopoverContent>}
   </Popover>;
 }
 
-/** Ein Server als geteilter Knopf: links Zustand, Name, Aktionswort und Zielzeile, rechts das Plus für den Default oder einen neuen Chat. */
+/** A server as a split button: state, name, action word, and route line on the left, the plus for the default or a new chat on the right. */
 function ConnectionChip({ connection, send, onLogin }: {
   connection: ConnectionView;
   send: PanelPageProps["send"];
@@ -88,7 +88,7 @@ function ConnectionChip({ connection, send, onLogin }: {
   const canCreate = connection.state.kind === "connected" && connection.canCreate;
   const route = routeLabel(connection);
   const starter = defaultEntryOf(connection);
-  const plusLabel = starter ? `Neuer Run aus ${starter.title} auf ${connection.name}` : `Neuer Chat auf ${connection.name}`;
+  const plusLabel = starter ? `New run from ${starter.title} on ${connection.name}` : `New chat on ${connection.name}`;
   const ownIcon = state === "login-required" || detail !== undefined || failure !== undefined;
   return <li className="flex min-w-0 items-stretch overflow-hidden rounded-md bg-secondary">
     {ownIcon && <StateButton action={action} connection={connection} failure={failure} onFailure={setFailure} onLogin={onLogin} send={send} />}
@@ -110,16 +110,16 @@ function ConnectionChip({ connection, send, onLogin }: {
   </li>;
 }
 
-/** Die Vorlagen eines Servers: die Standard-Vorlage oder Neuer Chat zuerst, dann die übrigen; ab zwei Servern mit Überschrift. */
+/** The templates of a server: the default template or New chat first, then the rest; with a heading when there are two or more servers. */
 function ConnectionOffers({ connection, marked, send }: { connection: ConnectionView; marked: boolean; send: PanelPageProps["send"] }) {
   return <div className="grid grid-cols-1 gap-1.5">
     {marked && <h3 className="flex items-center gap-1.5 pt-1 text-[0.78rem] font-semibold"><ConnectionStateIcon state={connectionState(connection)} />{connection.name}</h3>}
-    <StartTiles defaultEntry={connection.defaultEntry} entries={connection.entries} label={marked ? `Vorlagen auf ${connection.name}` : "Vorlagen"}
+    <StartTiles defaultEntry={connection.defaultEntry} entries={connection.entries} label={marked ? `Templates on ${connection.name}` : "Templates"}
       onNewChat={() => send({ action: "newRun", name: connection.name })} onStart={(entryId) => send({ action: "newRun", name: connection.name, entryId })} />
   </div>;
 }
 
-/** Die Startseite: die Server als Block, darunter die letzten Runs und je erreichbarem Server seine Vorlagen, die Standard-Vorlage oder Neuer Chat zuerst. */
+/** The start page: the servers as a block, below them the latest runs and, per reachable server, its templates, the default template or New chat first. */
 export function StartPage({ state, send }: PanelPageProps) {
   const [login, setLogin] = useState<string>();
   const connections = state.connections;
@@ -131,10 +131,13 @@ export function StartPage({ state, send }: PanelPageProps) {
   const loginConnection = connections.find((connection) => connection.name === login);
   return <div className="@container/panel grid grid-cols-1 gap-4">
     {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
+    {connections.flatMap((connection) => connection.versionNotice ? [{ name: connection.name, notice: connection.versionNotice }] : []).map(({ name, notice }) =>
+      <p className={cn("text-[0.8rem] leading-normal [overflow-wrap:anywhere]", notice.level === "error" ? "text-destructive" : "text-warning")} data-notice={notice.level} key={name}
+        role={notice.level === "error" ? "alert" : "status"}>{marked ? `${name}: ${notice.text}` : notice.text}</p>)}
     {connections.length === 0
       ? <div className="grid gap-3">
-        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Server. Lege einen Server per Adresse oder ein lokales Profil an.</p>
-        <Button onClick={() => send({ action: "page", page: "connections" })}><ServerIcon data-icon="inline-start" />Server anlegen</Button>
+        <p className="text-[0.85rem] leading-normal text-muted-foreground">No server yet. Add a server by address or a local profile.</p>
+        <Button onClick={() => send({ action: "page", page: "connections" })}><ServerIcon data-icon="inline-start" />Add server</Button>
       </div>
       : <>
         <section className="grid grid-cols-1 gap-1.5">
@@ -144,17 +147,17 @@ export function StartPage({ state, send }: PanelPageProps) {
           </ul>
         </section>
         <section className="grid grid-cols-1 gap-1.5">
-          <StartSection title="Weiter">
-            {runs.length > 0 && <Button className="text-[0.66rem]" onClick={() => send({ action: "page", page: "runs" })} size="xs" variant="ghost">Alle {runs.length} Runs<ChevronRightIcon data-icon="inline-end" /></Button>}
+          <StartSection title="Continue">
+            {runs.length > 0 && <Button className="text-[0.66rem]" onClick={() => send({ action: "page", page: "runs" })} size="xs" variant="ghost">All {runs.length} runs<ChevronRightIcon data-icon="inline-end" /></Button>}
           </StartSection>
           {runs.length === 0
-            ? <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>
-            : <RunList label="Zuletzt" showConnection={marked}>
+            ? <p className="text-[0.75rem] text-muted-foreground">No runs yet.</p>
+            : <RunList label="Recent" showConnection={marked}>
               {runs.slice(0, RECENT_RUNS).map(({ connection, run }) => <RunLine connection={connection} key={`${connection.name}:${run.id}`} onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })} run={run} showConnection={marked} />)}
             </RunList>}
         </section>
         {reachable.length > 0 && <section className="grid grid-cols-1 gap-1.5">
-          <StartSection count={tiles} title="Neu" />
+          <StartSection count={tiles} title="New" />
           {reachable.map((connection) => <ConnectionOffers connection={connection} key={connection.name} marked={marked} send={send} />)}
         </section>}
       </>}