@schlenkr/ragents 0.1.10 → 0.1.11

package/apps/web/src/run-panel/RunPanelApp.tsx

@@ -22,29 +22,29 @@ import { useSessionList } from "./use-session-list";
 const headerClass = "relative z-[80] flex h-header flex-none items-stretch border-b border-border bg-shell shadow-bar";
 const connectionClass = "max-w-[120px] self-center truncate rounded-full bg-secondary px-2 py-0.5 text-[0.66rem] font-semibold text-muted-foreground";
 const pendingTitleClass = "min-w-0 flex-1 self-center truncate px-1.5 text-[0.82rem] font-semibold";
-const STOP_REASON = "Gestoppt im Run-Panel";
-/** So lange wartet das Panel in VS Code ohne Run auf die Startanforderung seines Hosts. */
+const STOP_REASON = "Stopped in the run panel";
+/** How long the panel in VS Code without a run waits for its host's start request. */
 const HOST_COMMAND_TIMEOUT_MS = 5000;
-const NEW_RUN_TITLE = "Neuer Run";
+const NEW_RUN_TITLE = "New run";
 const listHeaderClass = "relative z-[80] flex h-header flex-none items-center gap-2 border-b border-border bg-shell px-3 shadow-bar";
 const noticeClass = "m-auto max-w-[420px] p-6 text-center text-muted-foreground";
 const noSelection: ReadonlySet<string> = new Set();
 const newDraft = (): SessionInfo => ({ id: crypto.randomUUID(), title: NEW_RUN_TITLE, updatedAt: Date.now() });
 const placeholderSession = (id: string, title = "Run"): SessionInfo => ({ id, title, updatedAt: Date.now() });
-const profileLoading: StartupNoticeState = { kind: "working", title: "Profil wird geladen", detail: "Die Oberfläche des Servers wird geladen." };
-const hostStarting: StartupNoticeState = { kind: "working", title: "Run wird gestartet", detail: "Der neue Run wird angelegt." };
-const launchStarting: StartupNoticeState = { kind: "working", title: "Run wird gestartet", detail: "Die Vorlage wird gestartet." };
-const noRunSelected: StartupNoticeState = { kind: "waiting", title: "Kein Run gewählt", detail: "Auf der Start-Seite startest Du einen neuen Run oder öffnest einen vorhandenen." };
-const noRunsReadable: StartupNoticeState = { kind: "error", title: "Keine Runs freigegeben", detail: "Für dieses Benutzerkonto sind keine Runs freigegeben." };
+const profileLoading: StartupNoticeState = { kind: "working", title: "Loading profile", detail: "Loading the server's interface." };
+const hostStarting: StartupNoticeState = { kind: "working", title: "Starting run", detail: "Creating the new run." };
+const launchStarting: StartupNoticeState = { kind: "working", title: "Starting run", detail: "Starting the template." };
+const noRunSelected: StartupNoticeState = { kind: "waiting", title: "No run selected", detail: "On the Start page you start a new run or open an existing one." };
+const noRunsReadable: StartupNoticeState = { kind: "error", title: "No runs enabled", detail: "No runs are enabled for this user account." };
 
-/** Das Run-Panel: ein Run mit Chat und Mini-Apps, ohne Run im Browser die Run-Liste; layout=app zeigt genau ein Flächenelement. */
+/** The run panel: a run with chat and mini-apps, without a run in the browser the run list; layout=app shows exactly one surface element. */
 export function RunPanelApp({ location }: { location: RunPanelLocation }) {
   const activation = usePluginActivation();
   const headless = location.layout === "app";
   if (activation.status === "loading") return <PendingPanel headless={headless} state={profileLoading} />;
   if (activation.status === "failed") return (
-    <PendingPanel headless={headless} state={{ kind: "error", title: "Das Profil konnte nicht geladen werden", detail: activation.error }}>
-      <Button onClick={() => window.location.reload()} size="sm" variant="outline">Neu laden</Button>
+    <PendingPanel headless={headless} state={{ kind: "error", title: "The profile could not be loaded", detail: activation.error }}>
+      <Button onClick={() => window.location.reload()} size="sm" variant="outline">Reload</Button>
     </PendingPanel>
   );
   const page = location.layout === "app"
@@ -74,7 +74,7 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
   const [runStartOptions, setRunStartOptions] = useState<Readonly<Record<string, unknown>>>();
   const [draft, setDraft] = useState<{ session: SessionInfo; startOptions?: Readonly<Record<string, unknown>>; entryId?: string }>();
   const [launch, setLaunch] = useState<Launch>();
-  /** Der Run, dessen Start noch zählt; ein späterer Klick, ein anderer Run oder der Weg zurück lösen ihn ab. */
+  /** The run whose start still counts; a later click, another run, or going back replaces it. */
   const launching = useRef<string>(undefined);
   const replaceLaunch = useCallback((next: Launch | undefined) => {
     launching.current = next?.runId;
@@ -99,7 +99,7 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
     setRunId(id);
     setFocusRunId(host.kind === "vscode" ? id : undefined);
   }, [host.kind, replaceLaunch]);
-  /** Eine Vorlage ohne Leitfaden startet sofort; ihr Ergebnis zählt nur, solange sie der laufende Start ist. */
+  /** A template without a guide starts right away; its result counts only as long as it is the current start. */
   const startLaunch = useCallback((next: Launch) => {
     setDraft(undefined);
     replaceLaunch(next);
@@ -113,7 +113,7 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
     setRunTitle(undefined);
     setRunId(id);
   }, []);
-  /** Der Zurück-Pfeil führt immer auf die Start-Seite; im Browser ist das die Run-Liste dieses Servers. */
+  /** The back arrow always leads to the Start page; in the browser that is the run list of this server. */
   const showStart = useCallback(() => {
     setFocusRunId(undefined);
     setDraft(undefined);
@@ -154,9 +154,9 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
       if (canCreate) startDraft(message.startOptions, message.entryId);
       return;
     }
-    // Im Panel ist ein Klick ein Klick: nur ein Leitfaden fragt wie in der Web-App vorher nach, der freie Auftrag entsteht im Chat.
-    const refused = !canCreate ? "Neue Runs sind für dieses Benutzerkonto nicht freigegeben."
-      : message.entryId === undefined && !canCreateFree ? "Freie Runs sind für dieses Benutzerkonto nicht freigegeben." : undefined;
+    // In the panel a click is a click: only a guide asks questions first as in the web app, the free task is formed in the chat.
+    const refused = !canCreate ? "New runs are not enabled for this user account."
+      : message.entryId === undefined && !canCreateFree ? "Free runs are not enabled for this user account." : undefined;
     setRefusal(refused);
     if (refused !== undefined) return;
     const entry = registry.startEntries.find((candidate) => candidate.id === message.entryId);
@@ -177,12 +177,12 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
 
   const settings = settingsOpen && <SettingsModal onClose={() => setSettingsOpen(false)} registry={registry} />;
   const pendingHeader = (title: string) => <>
-    <Button aria-label="Zur Start-Seite" className="self-center" onClick={showStart} size="icon-lg" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
+    <Button aria-label="Back to Start" className="self-center" onClick={showStart} size="icon-lg" title="Back to Start" variant="ghost"><ArrowLeftIcon /></Button>
     <strong className={pendingTitleClass}>{title}</strong>
     {connection && <span className={connectionClass} title={`Server ${connection}`}>{connection}</span>}
     <RunPanelMenu onOpenSettings={openSettings} />
   </>;
-  const toStart = <Button onClick={showStart} size="sm" variant="outline">Zur Start-Seite</Button>;
+  const toStart = <Button onClick={showStart} size="sm" variant="outline">Back to Start</Button>;
   const draftChat = draft && <PluginChat
     initialStartOptions={draft.startOptions}
     key={draft.session.id}
@@ -194,7 +194,7 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
   if (launch) return <>
     {launch.error === undefined
       ? <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={launchStarting} />
-      : <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={{ kind: "error", title: "Der Run konnte nicht gestartet werden", detail: launch.error }}>{toStart}</PendingPanel>}
+      : <PendingPanel header={pendingHeader(runTitle ?? NEW_RUN_TITLE)} state={{ kind: "error", title: "The run could not be started", detail: launch.error }}>{toStart}</PendingPanel>}
     {settings}
   </>;
   if (host.kind === "vscode" && draft) return <>
@@ -202,10 +202,10 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
     {draftChat}
     {settings}
   </>;
-  // In VS Code wählt die Start-Seite der Erweiterung den Run; ohne ihn wartet das Panel auf deren Anforderung statt eine Liste zu zeigen.
+  // In VS Code the extension's Start page chooses the run; without one the panel waits for its request instead of showing a list.
   if (host.kind === "vscode" && !(readRuns && runId)) return <>
     {!readRuns ? <PendingPanel header={pendingHeader(NEW_RUN_TITLE)} state={noRunsReadable}>{toStart}</PendingPanel>
-      : refusal !== undefined ? <PendingPanel header={pendingHeader(NEW_RUN_TITLE)} state={{ kind: "error", title: "Kein neuer Run möglich", detail: refusal }}>{toStart}</PendingPanel>
+      : refusal !== undefined ? <PendingPanel header={pendingHeader(NEW_RUN_TITLE)} state={{ kind: "error", title: "No new run possible", detail: refusal }}>{toStart}</PendingPanel>
         : <HostWaiting header={pendingHeader(NEW_RUN_TITLE)}>{toStart}</HostWaiting>}
     {settings}
   </>;
@@ -214,23 +214,23 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
   const stop = () => {
     if (runId === undefined) return;
     setStopError(undefined);
-    void stopRun(runId, STOP_REASON).catch((cause: unknown) => setStopError(`Stoppen fehlgeschlagen: ${cause instanceof Error ? cause.message : String(cause)}`));
+    void stopRun(runId, STOP_REASON).catch((cause: unknown) => setStopError(`Stop failed: ${cause instanceof Error ? cause.message : String(cause)}`));
   };
   const list = readRuns
     ? <SessionList activeId={runId} onCreate={canCreate ? createRun : undefined} onSelect={selectRun} onToggleSelected={() => undefined} registry={registry} seenRevisions={runReadState.revisions} selectMode={false} selectedIds={noSelection} sessions={sessions} />
-    : <p className={noticeClass}>Für dieses Benutzerkonto sind keine Runs freigegeben.</p>;
+    : <p className={noticeClass}>No runs are enabled for this user account.</p>;
   return (
     <div className="flex h-full flex-col bg-[image:var(--surface-backdrop)]">
       {readRuns && runId
         ? (
           <>
             <header className={headerClass}>
-              <Button aria-label="Zur Start-Seite" className="self-center" onClick={showStart} size="icon-lg" title="Zur Start-Seite" variant="ghost"><ArrowLeftIcon /></Button>
-              <div aria-label="Run-Titelleiste" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar" ref={setHeaderContainer} role="region" />
+              <Button aria-label="Back to Start" className="self-center" onClick={showStart} size="icon-lg" title="Back to Start" variant="ghost"><ArrowLeftIcon /></Button>
+              <div aria-label="Run title bar" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar" ref={setHeaderContainer} role="region" />
               {connection && <span className={connectionClass} title={`Server ${connection}`}>{connection}</span>}
               <RunStateIcon className="self-center px-1.5" state={session?.running ? "running" : "idle"} />
-              <StopButton className="self-center" disabled={!writeRuns} label="Run stoppen" onClick={stop} size="icon-lg" title="Run mit allen Agenten und Abläufen stoppen" />
-              <div aria-label="Werkzeuge des Panels" className="flex flex-none items-center empty:hidden" ref={setToolsContainer} role="toolbar" />
+              <StopButton className="self-center" disabled={!writeRuns} label="Stop run" onClick={stop} size="icon-lg" title="Stop the run with all agents and flows" />
+              <div aria-label="Panel tools" className="flex flex-none items-center empty:hidden" ref={setToolsContainer} role="toolbar" />
               <RunPanelMenu onOpenSettings={openSettings} />
             </header>
             {stopError && <Alert variant="destructive">{stopError}</Alert>}
@@ -259,7 +259,7 @@ function RunPanelPage({ connection, initialRunId, registry }: { connection: stri
               <RunPanelMenu onOpenSettings={openSettings} />
             </header>
             <div className="min-h-0 flex-1 overflow-auto p-3">
-              {unreachable && <Alert className="mb-3" variant="destructive">Der Server ist nicht erreichbar.</Alert>}
+              {unreachable && <Alert className="mb-3" variant="destructive">The server is unreachable.</Alert>}
               {list}
             </div>
           </>
@@ -277,11 +277,11 @@ interface Launch {
   readonly error?: string;
 }
 
-/** Ein Klick auf eine Vorlage der Startseite: Startoptionen setzen, die Vorlage starten, fertig. */
+/** A click on a template of the start page: set start options, start the template, done. */
 async function launchRun(launch: Launch, registry: PluginRegistry, access: AccessContext): Promise<void> {
   const entry = registry.startEntries.find((candidate) => candidate.id === launch.entryId);
-  if (!entry) throw new Error("Diese Vorlage gibt es in diesem Profil nicht.");
-  if (!canStartEntry(access, entry.id)) throw new Error(`${entry.title} ist für dieses Benutzerkonto nicht freigegeben.`);
+  if (!entry) throw new Error("This template does not exist in this profile.");
+  if (!canStartEntry(access, entry.id)) throw new Error(`${entry.title} is not enabled for this user account.`);
   if (launch.startOptions) {
     const options = await getStartOptions(launch.runId);
     const preselected = withoutFixedStartOptions(launch.startOptions, entry.fixedStartOptions);
@@ -290,7 +290,7 @@ async function launchRun(launch: Launch, registry: PluginRegistry, access: Acces
   await startEntryDirectly(launch.runId, entry, null);
 }
 
-/** Ohne Run wartet das Panel in VS Code auf die Startanforderung seines Hosts; bleibt sie aus, zeigt es den Weg zurück statt eines endlosen Ladezustands. */
+/** Without a run the panel in VS Code waits for its host's start request; if none comes, it shows the way back instead of an endless loading state. */
 function HostWaiting({ children, header }: { children: ReactNode; header: ReactNode }) {
   const [waited, setWaited] = useState(false);
   useEffect(() => {
@@ -302,7 +302,7 @@ function HostWaiting({ children, header }: { children: ReactNode; header: ReactN
     : <PendingPanel header={header} state={hostStarting} />;
 }
 
-/** Kopfzeile und darunter der Ladezustand, so wie das Run-Panel ihn später mittig im Chat zeigt; eine einzelne Mini-App hat keine Kopfzeile. */
+/** Header and below it the loading state, as the run panel later shows it centered in the chat; a single mini-app has no header. */
 function PendingPanel({ children, header, headless = false, state }: { children?: ReactNode; header?: ReactNode; headless?: boolean; state: StartupNoticeState }) {
   return <div className="flex h-full flex-col bg-[image:var(--surface-backdrop)]">
     {!headless && <header className={headerClass}>{header}</header>}
@@ -315,7 +315,7 @@ function ElementPage({ elementId, registry, runId }: { elementId: string; regist
   const readRuns = useAccess().can("runs.read");
   const { sessions } = useSessionList(readRuns);
   useEffect(() => { host.notify({ type: "ready" }); }, [host]);
-  if (!readRuns) return <p className={noticeClass}>Für dieses Benutzerkonto sind keine Runs freigegeben.</p>;
+  if (!readRuns) return <p className={noticeClass}>No runs are enabled for this user account.</p>;
   return (
     <main className="relative flex h-full min-h-0 min-w-0 flex-1 bg-background @container/chat-content">
       <PluginChat key={runId} layout={{ element: elementId }} registry={registry} session={sessions.find((entry) => entry.id === runId) ?? placeholderSession(runId)} />
@@ -323,12 +323,12 @@ function ElementPage({ elementId, registry, runId }: { elementId: string; regist
   );
 }
 
-/** Im VS-Code-Webview führt die Erweiterung die Anmeldung; das Panel bittet nur darum. */
+/** In the VS Code webview the extension handles sign-in; the panel only asks for it. */
 export function HostLogin() {
   const host = useRunPanelHost();
   return <AccessScreen>
-    <h1 className="my-3 text-[1.5rem]">Anmeldung erforderlich</h1>
-    <p className="mb-6 leading-normal text-muted-foreground">Die Anmeldung läuft über VS Code. Danach lädt das Panel neu.</p>
-    <Button className="w-full" onClick={() => host.requestLogin()}>In VS Code anmelden</Button>
+    <h1 className="my-3 text-[1.5rem]">Sign-in required</h1>
+    <p className="mb-6 leading-normal text-muted-foreground">Sign-in goes through VS Code. The panel then reloads.</p>
+    <Button className="w-full" onClick={() => host.requestLogin()}>Sign in with VS Code</Button>
   </AccessScreen>;
 }

package/apps/web/src/run-panel/RunPanelHeader.tsx

@@ -6,7 +6,7 @@ import { Popover, PopoverContent } from "../ui";
 
 const titleClass = "flex h-[30px] min-w-0 flex-1 cursor-pointer items-center gap-2 self-center rounded-md px-1.5 text-left hover:bg-accent aria-expanded:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2";
 
-/** Die Kopfzeile des Panels: eine Zeile mit Titel und Zustand, die Kopfzeilenbeiträge der Plugins hinter dem Titel als Popover. */
+/** The panel header: one line with title and state, the plugins' header contributions behind the title as a popover. */
 export function RunPanelHeader({ attention, contributions, navigation, registry, runError, session, working }: {
   attention: AttentionState | undefined;
   contributions: PluginRegistry["sessionHeaders"];
@@ -19,19 +19,19 @@ export function RunPanelHeader({ attention, contributions, navigation, registry,
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelId = useId();
-  const title = session.session.title || "Neuer Run";
+  const title = session.session.title || "New run";
   const pressedAnchor = (details: { reason: string; event: Event }) =>
     details.reason === "outside-press" && details.event.target instanceof Node && buttonRef.current?.contains(details.event.target) === true;
   return <div className="flex min-w-0 flex-1 items-stretch">
-    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={titleClass} onClick={() => setOpen((value) => !value)} ref={buttonRef} title={`${title}. Klick zeigt die Run-Details`} type="button">
+    <button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" className={titleClass} onClick={() => setOpen((value) => !value)} ref={buttonRef} title={`${title}. Click to show the run details`} type="button">
       <strong className="min-w-0 truncate text-[0.82rem] font-semibold">{title}</strong>
-      {working && <span aria-label="Bearbeitung läuft" className="size-1.5 flex-none rounded-full bg-primary animate-fade-pulse motion-reduce:animate-none" role="status" />}
-      {runError && <span className="flex-none text-[0.68rem] font-medium text-destructive" title={runError}>Run nicht erreichbar</span>}
+      {working && <span aria-label="Processing" className="size-1.5 flex-none rounded-full bg-primary animate-fade-pulse motion-reduce:animate-none" role="status" />}
+      {runError && <span className="flex-none text-[0.68rem] font-medium text-destructive" title={runError}>Run unreachable</span>}
       {attention && <span className="flex-none truncate rounded-full bg-primary/10 px-2 py-0.5 text-[0.66rem] font-semibold text-primary" role="status">{attention.label}</span>}
       <ChevronDownIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />
     </button>
     <Popover onOpenChange={(next, details) => { if (!next && pressedAnchor(details)) return; setOpen(next); }} open={open}>
-      <PopoverContent align="start" anchor={buttonRef} aria-label="Run-Details" className="max-h-[70vh] w-[calc(100vw-16px)] gap-0 overflow-auto rounded-md p-0 text-[0.76rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom">
+      <PopoverContent align="start" anchor={buttonRef} aria-label="Run details" className="max-h-[70vh] w-[calc(100vw-16px)] gap-0 overflow-auto rounded-md p-0 text-[0.76rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom">
         <div className="flex flex-wrap items-stretch [&>*]:border-b [&>*]:border-border-soft">
           {registry.sessionMetadata.map(({ id, Metadata }) => <Metadata key={id} placement="header" session={session.session} />)}
           <StartOptionBadges registry={registry} session={session} />

package/apps/web/src/run-panel/RunPanelMenu.tsx

@@ -6,7 +6,7 @@ import { useRunPanelHost } from "./host";
 
 const itemClass = "flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2 disabled:cursor-default disabled:opacity-50 [&>svg]:size-4 [&>svg]:flex-none [&>svg]:text-muted-foreground";
 
-/** Das Menü rechts oben im Panel: Einstellungen, Server im Browser und Abmelden hinter einem Knopf. */
+/** The menu at the top right of the panel: settings, server in the browser, and sign-out behind one button. */
 export function RunPanelMenu({ onOpenSettings }: { onOpenSettings: () => void }) {
   const host = useRunPanelHost();
   const access = useAccess();
@@ -24,12 +24,12 @@ export function RunPanelMenu({ onOpenSettings }: { onOpenSettings: () => void })
     void access.logout().then(() => setOpen(false)).catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause))).finally(() => setPending(false));
   };
   return <>
-    <Button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" aria-label="Menü des Panels" className="self-center" onClick={() => setOpen((value) => !value)} ref={buttonRef} size="icon-lg" title="Menü" variant="ghost"><MoreVerticalIcon /></Button>
+    <Button aria-controls={open ? panelId : undefined} aria-expanded={open} aria-haspopup="dialog" aria-label="Panel menu" className="self-center" onClick={() => setOpen((value) => !value)} ref={buttonRef} size="icon-lg" title="Menu" variant="ghost"><MoreVerticalIcon /></Button>
     <Popover onOpenChange={(next, details) => { if (!next && pressedAnchor(details)) return; setOpen(next); }} open={open}>
-      <PopoverContent align="end" anchor={buttonRef} aria-label="Menü des Panels" className="w-[220px] gap-0 p-1 text-[0.8rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom">
-        <button className={itemClass} onClick={() => { setOpen(false); onOpenSettings(); }} type="button"><SettingsIcon />Einstellungen</button>
-        {host.kind === "vscode" && <button className={itemClass} onClick={() => { setOpen(false); host.openExternal(new URL("/", window.location.href).toString()); }} type="button"><ExternalLinkIcon />Im Browser öffnen</button>}
-        {access.enabled && access.user && <button className={itemClass} disabled={pending} onClick={logout} title={access.user.id} type="button"><LogOutIcon /><span className="grid min-w-0"><span>Abmelden</span><span className="truncate text-[0.68rem] text-muted-foreground">{access.user.label}</span></span></button>}
+      <PopoverContent align="end" anchor={buttonRef} aria-label="Panel menu" className="w-[220px] gap-0 p-1 text-[0.8rem]" collisionPadding={8} dim id={panelId} role="dialog" side="bottom">
+        <button className={itemClass} onClick={() => { setOpen(false); onOpenSettings(); }} type="button"><SettingsIcon />Settings</button>
+        {host.kind === "vscode" && <button className={itemClass} onClick={() => { setOpen(false); host.openExternal(new URL("/", window.location.href).toString()); }} type="button"><ExternalLinkIcon />Open in browser</button>}
+        {access.enabled && access.user && <button className={itemClass} disabled={pending} onClick={logout} title={access.user.id} type="button"><LogOutIcon /><span className="grid min-w-0"><span>Sign out</span><span className="truncate text-[0.68rem] text-muted-foreground">{access.user.label}</span></span></button>}
         {error && <p className="px-2 py-1.5 text-[0.72rem] text-destructive" role="alert">{error}</p>}
       </PopoverContent>
     </Popover>

package/apps/web/src/run-panel/RunPanelRail.tsx

@@ -2,10 +2,10 @@ import type { SessionContext, SessionNavigation, WorkspaceTabContribution } from
 import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui";
 import { RUN_PANEL_WORKSPACE_ID } from "./workspace-state";
 
-/** Ein Zähler-Badge des Beitrags sitzt klein oben rechts am Knopf, der Punkt für Neues unten rechts. */
+/** A contribution's counter badge sits small at the top right of the button, the dot for news at the bottom right. */
 const railButtonClass = "relative aria-pressed:bg-accent aria-pressed:text-primary [&_[data-slot=badge]]:absolute [&_[data-slot=badge]]:-top-0.5 [&_[data-slot=badge]]:-right-0.5 [&_[data-slot=badge]]:h-3.5 [&_[data-slot=badge]]:min-w-3.5 [&_[data-slot=badge]]:px-1 [&_[data-slot=badge]]:py-0 [&_[data-slot=badge]]:text-[0.58rem] [&_[data-slot=badge]]:leading-none";
 
-/** Die Symbolleiste am rechten Rand des Run-Panels: je Reiter der Leiste ein Knopf, der die Leiste mit diesem Reiter öffnet oder wieder schließt. */
+/** The toolbar at the right edge of the run panel: one button per sidebar tab that opens the sidebar with this tab or closes it again. */
 export function RunPanelRail({ navigation, onClose, open, pendingTabIds, session, tabs }: {
   navigation: SessionNavigation;
   onClose: () => void;
@@ -14,7 +14,7 @@ export function RunPanelRail({ navigation, onClose, open, pendingTabIds, session
   session: SessionContext;
   tabs: readonly WorkspaceTabContribution[];
 }) {
-  return <TooltipProvider><nav aria-label="Reiter der Leiste" className="flex w-9 flex-none flex-col items-center gap-1 border-l border-border bg-shell py-1.5">
+  return <TooltipProvider><nav aria-label="Sidebar tabs" className="flex w-9 flex-none flex-col items-center gap-1 border-l border-border bg-shell py-1.5">
     {tabs.map((tab) => {
       const active = open && tab.id === navigation.activeTabId;
       const pending = pendingTabIds.includes(tab.id);
@@ -31,7 +31,7 @@ export function RunPanelRail({ navigation, onClose, open, pendingTabIds, session
           {tab.Badge && <tab.Badge active={active} navigation={navigation} selection={navigation.selectionFor(tab.id)} session={session} />}
           {pending && <span aria-hidden className="absolute right-1 bottom-1 size-1.5 rounded-full bg-primary" />}
         </TooltipTrigger>
-        <TooltipContent side="left" sideOffset={8}>{pending ? `${tab.label} - es gibt Neues` : tab.label}</TooltipContent>
+        <TooltipContent side="left" sideOffset={8}>{pending ? `${tab.label} - new activity` : tab.label}</TooltipContent>
       </Tooltip>;
     })}
   </nav></TooltipProvider>;

package/apps/web/src/run-panel/RunPanelWorkspace.tsx

@@ -6,7 +6,7 @@ import { Button } from "../ui";
 import { mountedTabs } from "../WorkspacePanel";
 import { RUN_PANEL_WORKSPACE_ID } from "./workspace-state";
 
-/** Die Leiste als Pop-out über Chat und Bühne des Run-Panels, bei zwei Bereichen nur über dem rechten; abgedunkelter Rest, Klick daneben, Escape und X schließen, besuchte keepMounted-Reiter bleiben montiert. */
+/** The sidebar as a pop-out over the run panel's chat and stage, with two areas only over the right one; the rest is dimmed, a click outside, Escape, and X close it, visited keepMounted tabs stay mounted. */
 export function RunPanelWorkspace({ navigation, onClose, open, session, tabs }: {
   navigation: SessionNavigation;
   onClose: () => void;
@@ -28,7 +28,7 @@ export function RunPanelWorkspace({ navigation, onClose, open, session, tabs }:
   return <>
     {open && <div aria-hidden className="absolute inset-0 z-[60] bg-backdrop duration-200 animate-in fade-in-0" onClick={onClose} />}
     <section
-      aria-label="Leiste"
+      aria-label="Sidebar"
       className="absolute inset-2 z-[70] flex flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 animate-in fade-in-0 zoom-in-95 @min-[960px]/chat-content:left-[40%]"
       hidden={!open}
       id={RUN_PANEL_WORKSPACE_ID}
@@ -43,7 +43,7 @@ export function RunPanelWorkspace({ navigation, onClose, open, session, tabs }:
     >
       <header className="flex h-8 flex-none items-center gap-2 border-b border-border px-2.5">
         <h2 className="min-w-0 flex-1 truncate text-[0.76rem] font-semibold">{activeTab?.label}</h2>
-        <Button aria-label="Leiste schließen" onClick={onClose} size="icon-xs" title="Leiste schließen" variant="ghost"><XIcon /></Button>
+        <Button aria-label="Close sidebar" onClick={onClose} size="icon-xs" title="Close sidebar" variant="ghost"><XIcon /></Button>
       </header>
       <div className="relative min-h-0 flex-1 overflow-hidden">
         {mountedTabs(tabs, activeTabId, visited).map((tab) => <div className={cn("absolute inset-0 flex min-h-0 flex-col", tab.id !== activeTabId && "pointer-events-none invisible")} key={tab.id}>

package/apps/web/src/run-panel/clipboard.ts

@@ -16,9 +16,9 @@ const isEditable = (element: Element | null): element is HTMLElement =>
   element !== null && (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || (element as HTMLElement).isContentEditable === true);
 
 /**
- * macOS liefert Einfügen, Kopieren und Ausschneiden über das Menü der Anwendung, und VS Code reicht
- * den Befehl nur an das Dokument seines Webviews weiter, nicht in ein iframe fremder Herkunft. Das
- * Run-Panel führt ihn deshalb selbst aus; den Text der Zwischenablage holt es über die Hülle.
+ * macOS delivers paste, copy, and cut through the application menu, and VS Code passes the
+ * command only to the document of its webview, not into a cross-origin iframe. The run panel
+ * therefore executes it itself; it fetches the clipboard text through the shell.
  */
 export function createClipboardReader(browser: Window) {
   const parent = browser.parent;

package/apps/web/src/run-panel/host-contract.ts

@@ -1,4 +1,4 @@
-/** Vertrag zwischen dem Run-Panel (run-panel.html) und einem Host, der es in einem iframe zeigt; importfrei, die VS-Code-Erweiterung bündelt ihn mit. */
+/** Contract between the run panel (run-panel.html) and a host that shows it in an iframe; import-free, the VS Code extension bundles it. */
 
 export const RUN_PANEL_PAGE = "run-panel.html";
 
@@ -10,7 +10,7 @@ export interface RunPanelPageQuery {
   run?: string;
   element?: string;
   host?: "vscode";
-  /** Der Name des Servers, auf dem dieser Run liegt; die Kopfzeile nennt ihn als Pille. */
+  /** The name of the server this run lives on; the header shows it as a pill. */
   connection?: string;
   theme?: RunPanelTheme;
   access?: string;
@@ -22,7 +22,7 @@ export const runPanelPageUrl = (serverUrl: string, query: RunPanelPageQuery): st
   return url.toString();
 };
 
-/** Nachrichten des Panels an seinen Host. */
+/** Messages from the panel to its host. */
 export type RunPanelHostMessage =
   | { type: "ready" }
   | { type: "runChanged"; runId: string | null }
@@ -34,7 +34,7 @@ export type RunPanelHostMessage =
   | { type: "openExternal"; url: string }
   | { type: "openPage"; url: string; title: string };
 
-/** Der Text der Zwischenablage: ein iframe fremder Herkunft darf sie im Webview nicht lesen, die Hülle darüber schon. */
+/** The clipboard text: a cross-origin iframe may not read it in the webview, the shell above it may. */
 export type RunPanelClipboardMessage = { type: "clipboardRead"; id: string };
 export type ClipboardRunPanelMessage = { type: "clipboardText"; id: string; text: string };
 
@@ -64,7 +64,7 @@ export function isRunPanelKeyboardMessage(value: unknown): value is RunPanelKeyb
     && ["ctrlKey", "metaKey", "shiftKey", "altKey", "repeat"].every((key) => typeof event[key] === "boolean");
 }
 
-/** Nachrichten des Hosts an das Panel. */
+/** Messages from the host to the panel. */
 export type HostRunPanelMessage =
   | { type: "selectRun"; runId: string | null }
   | { type: "newRun"; startOptions?: Record<string, unknown>; entryId?: string }

package/apps/web/src/run-panel/host.ts

@@ -5,28 +5,28 @@ import { isHostRunPanelMessage, type RunPanelHostMessage, type RunPanelTheme, ty
 
 export interface RunPanelHost {
   readonly kind: RunPanelHostKind;
-  /** VS Code ist selbst ein Arbeitsplatz und bietet für neue Runs auch Arbeitsplätze an, der Browser nur den Server. */
+  /** VS Code is a workstation itself and also offers workstations for new runs, the browser only the server. */
   readonly machines: OfferedMachines;
-  /** Elemente des Runs, die der Host gerade in der Mitte zeigt; im Browser immer leer. */
+  /** Elements of the run that the host currently shows in the center; always empty in the browser. */
   centerElements(runId: string): ReadonlySet<string>;
   subscribe(listener: () => void): () => void;
   openInCenter(runId: string, elementId: string, title: string): void;
   returnToRunPanel(runId: string, elementId: string): void;
   requestLogin(): void;
-  /** Der Host hält den Sitzungstoken und beendet die Sitzung selbst. */
+  /** The host holds the session token and ends the session itself. */
   requestLogout(): void;
   openExternal(url: string): void;
-  /** Zeigt eine Webseite im Host, etwa als Reiter im Simple Browser von VS Code. */
+  /** Shows a web page in the host, for example as a tab in the VS Code Simple Browser. */
   openPage(url: string, title: string): void;
   onCommand(listener: (message: HostRunPanelMessage) => void): () => void;
-  /** Meldet dem Host, dass das Panel bereit ist, seinen Run gewechselt hat oder zurück auf die Start-Seite will. */
+  /** Tells the host that the panel is ready, has switched its run, or wants to go back to the Start page. */
   notify(message: Extract<RunPanelHostMessage, { type: "ready" | "runChanged" | "showStart" }>): void;
 }
 
 const emptySet: ReadonlySet<string> = new Set();
 
 const unsupported = (action: string) => (): never => {
-  throw new Error(`${action} gibt es nur in VS Code.`);
+  throw new Error(`${action} is only available in VS Code.`);
 };
 
 export function createBrowserHost(browser: Window): RunPanelHost {
@@ -35,21 +35,21 @@ export function createBrowserHost(browser: Window): RunPanelHost {
     machines: "server",
     centerElements: () => emptySet,
     subscribe: () => () => undefined,
-    openInCenter: unsupported("Eine Mini-App in die Mitte legen"),
-    returnToRunPanel: unsupported("Eine Mini-App zurückholen"),
-    requestLogin: unsupported("Die Anmeldung über den Host"),
-    requestLogout: unsupported("Die Abmeldung über den Host"),
+    openInCenter: unsupported("Placing a mini-app in the center"),
+    returnToRunPanel: unsupported("Bringing a mini-app back"),
+    requestLogin: unsupported("Signing in through the host"),
+    requestLogout: unsupported("Signing out through the host"),
     openExternal: (url) => { browser.open(url, "_blank", "noopener"); },
-    openPage: unsupported("Eine Webseite im Host zeigen"),
+    openPage: unsupported("Showing a web page in the host"),
     onCommand: () => () => undefined,
     notify: () => undefined,
   };
 }
 
-/** Das Panel im iframe eines VS-Code-Webviews: Nachrichten laufen über das umgebende Webview zur Erweiterung. */
+/** The panel in the iframe of a VS Code webview: messages go through the surrounding webview to the extension. */
 export function createVsCodeHost(browser: Window): RunPanelHost {
   const parent = browser.parent;
-  if (parent === browser) throw new Error("Das Panel läuft mit host=vscode, ist aber in kein Webview eingebettet.");
+  if (parent === browser) throw new Error("The panel runs with host=vscode but is not embedded in a webview.");
   const placements = new Map<string, ReadonlySet<string>>();
   const placementListeners = new Set<() => void>();
   const commandListeners = new Set<(message: HostRunPanelMessage) => void>();
@@ -90,14 +90,14 @@ export const createRunPanelHost = (kind: RunPanelHostKind, browser: Window): Run
 
 const RunPanelHostContext = createContext<RunPanelHost | undefined>(undefined);
 
-/** Stellt den Host bereit und mit ihm, welche Rechner die Startoptionen anbieten. */
+/** Provides the host and with it which machines the start options offer. */
 export function RunPanelHostProvider({ value, children }: PropsWithChildren<{ value: RunPanelHost }>) {
   return createElement(RunPanelHostContext.Provider, { value }, createElement(OfferedMachinesProvider, { value: value.machines }, children));
 }
 
 export function useRunPanelHost(): RunPanelHost {
   const host = useContext(RunPanelHostContext);
-  if (!host) throw new Error("Das Panel läuft ohne Host-Provider.");
+  if (!host) throw new Error("The panel runs without a host provider.");
   return host;
 }
 

package/apps/web/src/run-panel/input-bridge.ts

@@ -17,7 +17,7 @@ const transportOf = (browser: Window) => (browser as InputWindow)[serviceKey];
 export const hostInputEnabled = (browser: Window): boolean => transportOf(browser) !== undefined;
 
 function installInputTransport(browser: Window, transport: InputTransport): () => void {
-  if (hostInputEnabled(browser)) throw new Error("Die Eingabebrücke ist bereits installiert.");
+  if (hostInputEnabled(browser)) throw new Error("The input bridge is already installed.");
   (browser as InputWindow)[serviceKey] = transport;
   const clipboard = installClipboardBridge(browser, transport.readClipboard);
   const keyboard = installKeyboardBridge(browser, transport.keyboard);

package/apps/web/src/run-panel/run-panel-location.ts

@@ -11,16 +11,16 @@ const text = (value: string | null): string | undefined => value?.trim() ? value
 
 const hostKind = (value: string): RunPanelHostKind => {
   if (value === "browser" || value === "vscode") return value;
-  throw new Error(`Unbekannter Host ${JSON.stringify(value)}. Erlaubt sind browser und vscode.`);
+  throw new Error(`Unknown host ${JSON.stringify(value)}. Allowed are browser and vscode.`);
 };
 
-/** Liest die Adresse des Panels; unbekannte Werte sind ein harter Fehler statt einer stillen Standardansicht. */
+/** Reads the panel's address; unknown values are a hard error instead of a silent default view. */
 export function parseRunPanelLocation(search: string): RunPanelLocation {
   const query = new URLSearchParams(search);
   const layout = text(query.get("layout")) ?? "panel";
-  if (layout !== "panel" && layout !== "app") throw new Error(`Unbekanntes Layout ${JSON.stringify(layout)}. Erlaubt sind panel und app.`);
+  if (layout !== "panel" && layout !== "app") throw new Error(`Unknown layout ${JSON.stringify(layout)}. Allowed are panel and app.`);
   const themeValue = text(query.get("theme"));
-  if (themeValue !== undefined && !isRunPanelTheme(themeValue)) throw new Error(`Unbekannte Darstellung ${JSON.stringify(themeValue)}. Erlaubt sind light und dark.`);
+  if (themeValue !== undefined && !isRunPanelTheme(themeValue)) throw new Error(`Unknown theme ${JSON.stringify(themeValue)}. Allowed are light and dark.`);
   const common = {
     host: hostKind(text(query.get("host")) ?? "browser"),
     connection: text(query.get("connection")),
@@ -30,6 +30,6 @@ export function parseRunPanelLocation(search: string): RunPanelLocation {
   const runId = text(query.get("run"));
   if (layout === "panel") return { layout, runId, ...common };
   const elementId = text(query.get("element"));
-  if (!runId || !elementId) throw new Error("Das Layout app braucht run und element.");
+  if (!runId || !elementId) throw new Error("The app layout needs run and element.");
   return { layout, runId, elementId, ...common };
 }

package/apps/web/src/run-panel/use-session-list.ts

@@ -5,7 +5,7 @@ import { rpc } from "../rpc";
 
 const POLL_INTERVAL_MS = 5000;
 
-/** Die Run-Liste des Servers, live über den Kanal ragents.runs und als Sicherheitsnetz alle fünf Sekunden neu geladen. */
+/** The server's run list, live over the ragents.runs channel and reloaded every five seconds as a safety net. */
 export function useSessionList(enabled: boolean): { sessions: SessionInfo[]; unreachable: boolean; refresh: () => Promise<void> } {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [unreachable, setUnreachable] = useState(false);

package/apps/web/src/run-panel/workspace-state.ts

@@ -1,7 +1,7 @@
 import { createLocalStorageSetting } from "../lib/local-storage-setting";
 import type { WorkspaceTabContribution } from "../PluginRegistry";
 
-/** Persönlicher Zustand der Leiste im Run-Panel je Run: der offene Reiter, null heißt geschlossen. */
+/** Personal state of the sidebar in the run panel per run: the open tab, null means closed. */
 export interface RunPanelWorkspaceState {
   tab: string | null;
 }
@@ -18,12 +18,12 @@ export function parseRunPanelWorkspaceState(raw: string | null): RunPanelWorkspa
   if (!value || typeof value !== "object" || Array.isArray(value)
     || Object.keys(value).some((key) => key !== "tab")
     || !("tab" in value) || !(value.tab === null || typeof value.tab === "string")) {
-    throw new Error("Der gespeicherte Zustand der Leiste ist ungültig.");
+    throw new Error("The saved sidebar state is invalid.");
   }
   return value as RunPanelWorkspaceState;
 }
 
-/** Der Reiter der offenen Leiste; leer, wenn sie geschlossen ist oder der gemerkte Reiter gerade nicht verfügbar ist. */
+/** The tab of the open sidebar; empty when it is closed or the remembered tab is currently not available. */
 export const activeWorkspaceTab = (state: RunPanelWorkspaceState, tabs: readonly WorkspaceTabContribution[]): string =>
   state.tab !== null && tabs.some((tab) => tab.id === state.tab) ? state.tab : "";