@schlenkr/ragents 0.1.0

package/apps/web/src/lib/labels.ts

@@ -0,0 +1,11 @@
+export const THINKING_LABELS: Record<string, string> = {
+  off: "aus",
+  minimal: "minimal",
+  low: "niedrig",
+  medium: "mittel",
+  high: "hoch",
+  xhigh: "sehr hoch",
+  max: "maximal",
+};
+
+export const thinkingLabel = (level: string) => THINKING_LABELS[level] ?? level;

package/apps/web/src/lib/local-storage-setting.ts

@@ -0,0 +1,39 @@
+import { useMemo, useSyncExternalStore } from "react";
+
+export function subscribeStorageChanges(browser: Window, matchesKey: (key: string) => boolean, listener: (event: StorageEvent) => void) {
+  const onStorage = (event: StorageEvent) => {
+    if (event.key === null || matchesKey(event.key)) listener(event);
+  };
+  browser.addEventListener("storage", onStorage);
+  return () => browser.removeEventListener("storage", onStorage);
+}
+
+export function createLocalStorageSetting<T>({ changeEvent, matchesKey, parse, serialize }: {
+  changeEvent: string;
+  matchesKey: (key: string) => boolean;
+  parse: (raw: string | null) => T;
+  serialize: (value: T) => string;
+}) {
+  const subscribe = (listener: () => void) => {
+    const unsubscribeStorage = subscribeStorageChanges(window, matchesKey, (event) => {
+      if (event.storageArea === window.localStorage) listener();
+    });
+    window.addEventListener(changeEvent, listener);
+    return () => {
+      window.removeEventListener(changeEvent, listener);
+      unsubscribeStorage();
+    };
+  };
+  return {
+    useValue(key: string): T {
+      const raw = useSyncExternalStore(subscribe, () => window.localStorage.getItem(key), () => null);
+      return useMemo(() => parse(raw), [raw]);
+    },
+    save(key: string, value: T) {
+      const raw = serialize(value);
+      parse(raw);
+      window.localStorage.setItem(key, raw);
+      window.dispatchEvent(new Event(changeEvent));
+    },
+  };
+}

package/apps/web/src/main.tsx

@@ -0,0 +1,30 @@
+import "./ui/tailwind.css";
+// Fremde Klassen von highlight.js und react-diff-view; hier statt in den Komponenten, die auch Mini-Apps bündeln.
+import "./highlighting.css";
+import "./diff-view.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Button } from "./ui";
+import { App } from "./App";
+import { AccessGate, AccessScreen } from "./AccessContext";
+import { initializeTheme } from "./theme";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root-Element fehlt");
+
+const reactRoot = createRoot(root);
+try {
+  const theme = initializeTheme(window);
+  import.meta.hot?.dispose(() => theme.dispose());
+  reactRoot.render(
+    <StrictMode>
+      <AccessGate><App /></AccessGate>
+    </StrictMode>,
+  );
+} catch (cause) {
+  reactRoot.render(<AccessScreen>
+    <h1 className="my-3 text-[1.5rem]">Darstellung konnte nicht geladen werden</h1>
+    <p className="mb-6 leading-normal" role="alert">{cause instanceof Error ? cause.message : String(cause)}</p>
+    <Button onClick={() => window.location.reload()} variant="outline">Erneut laden</Button>
+  </AccessScreen>);
+}

package/apps/web/src/material-settings.ts

@@ -0,0 +1,104 @@
+import { useSyncExternalStore } from "react";
+import { subscribeStorageChanges } from "./lib/local-storage-setting";
+
+export interface MaterialSettings {
+  steps: number;
+}
+
+export const DEFAULT_MATERIAL_SETTINGS: MaterialSettings = Object.freeze({ steps: 1 });
+export const MATERIAL_SETTINGS_LIMITS = { minSteps: 0, maxSteps: 5 };
+export const MATERIAL_DEPTH_PER_STEP = 12;
+export const MATERIAL_SETTINGS_STORAGE_KEY = "ragents.material-settings";
+
+interface MaterialSettingsSnapshot {
+  settings: MaterialSettings;
+  error?: string;
+}
+
+export function parseMaterialSettings(raw: string | null): MaterialSettings {
+  if (raw === null) return DEFAULT_MATERIAL_SETTINGS;
+  const value: unknown = JSON.parse(raw);
+  if (!value || typeof value !== "object" || !("steps" in value)
+    || typeof value.steps !== "number" || !Number.isInteger(value.steps) || value.steps < MATERIAL_SETTINGS_LIMITS.minSteps || value.steps > MATERIAL_SETTINGS_LIMITS.maxSteps) {
+    throw new Error("Ungültiges Material: Tiefenstufen müssen eine ganze Zahl von 0 bis 5 sein. Bitte die Materialeinstellungen zurücksetzen.");
+  }
+  return Object.freeze({ steps: value.steps });
+}
+
+const errorMessage = (cause: unknown) => cause instanceof Error ? cause.message : String(cause);
+const serverSnapshot: MaterialSettingsSnapshot = { settings: DEFAULT_MATERIAL_SETTINGS };
+const getServerSnapshot = () => serverSnapshot;
+const subscribeServer = () => () => {};
+
+export function createMaterialSettingsStore(browser: Window) {
+  let snapshot: MaterialSettingsSnapshot;
+  try {
+    snapshot = { settings: parseMaterialSettings(browser.localStorage.getItem(MATERIAL_SETTINGS_STORAGE_KEY)) };
+  } catch (cause) {
+    snapshot = { settings: DEFAULT_MATERIAL_SETTINGS, error: `Das gespeicherte Material konnte nicht geladen werden. Die Standardwerte werden angezeigt. ${errorMessage(cause)}` };
+  }
+  const listeners = new Set<() => void>();
+  let disposed = false;
+  const publish = (next: MaterialSettingsSnapshot) => {
+    if (snapshot.settings.steps === next.settings.steps && snapshot.error === next.error) return;
+    snapshot = next;
+    for (const listener of listeners) listener();
+  };
+  const report = (message: string) => publish({ ...snapshot, error: message });
+  const storageChanged = (event: StorageEvent) => {
+    try {
+      const storage = browser.localStorage;
+      if (event.storageArea !== storage) return;
+      publish({ settings: parseMaterialSettings(storage.getItem(MATERIAL_SETTINGS_STORAGE_KEY)) });
+    } catch (cause) {
+      report(`Das Material aus einem anderen Browser-Tab konnte nicht übernommen werden. ${errorMessage(cause)}`);
+    }
+  };
+  const unsubscribeStorage = subscribeStorageChanges(browser, (key) => key === MATERIAL_SETTINGS_STORAGE_KEY, storageChanged);
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      if (disposed) throw new Error("Die Materialeinstellungen wurden bereits beendet.");
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    save(settings: MaterialSettings) {
+      if (disposed) throw new Error("Die Materialeinstellungen wurden bereits beendet.");
+      try {
+        const next = parseMaterialSettings(JSON.stringify(settings));
+        browser.localStorage.setItem(MATERIAL_SETTINGS_STORAGE_KEY, JSON.stringify(next));
+        publish({ settings: next });
+      } catch (cause) {
+        report(`Das Material konnte nicht gespeichert werden. ${errorMessage(cause)}`);
+      }
+    },
+    reset() {
+      if (disposed) throw new Error("Die Materialeinstellungen wurden bereits beendet.");
+      try {
+        browser.localStorage.removeItem(MATERIAL_SETTINGS_STORAGE_KEY);
+        publish({ settings: DEFAULT_MATERIAL_SETTINGS });
+        return true;
+      } catch (cause) {
+        report(`Das Material konnte nicht zurückgesetzt werden. ${errorMessage(cause)}`);
+        return false;
+      }
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      unsubscribeStorage();
+      listeners.clear();
+    },
+  };
+}
+
+let activeStore: ReturnType<typeof createMaterialSettingsStore> | undefined;
+const materialSettingsStore = () => activeStore ??= createMaterialSettingsStore(window);
+
+export function useMaterialSettings(): MaterialSettingsSnapshot {
+  const store = typeof window === "undefined" ? undefined : materialSettingsStore();
+  return useSyncExternalStore(store?.subscribe ?? subscribeServer, store?.getSnapshot ?? getServerSnapshot, getServerSnapshot);
+}
+
+export const saveMaterialSettings = (settings: MaterialSettings): void => materialSettingsStore().save(settings);
+export const resetMaterialSettings = (): boolean => materialSettingsStore().reset();

package/apps/web/src/model-settings-events.ts

@@ -0,0 +1 @@
+export const modelDefaultsChangedEvent = "ragents-model-defaults-changed";

package/apps/web/src/page-opener.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+/** Ein Host, der Webseiten außerhalb der Oberfläche zeigen kann, etwa VS Code im Simple Browser; ohne Host bleibt es beim eigenen Dialog mit iframe. */
+export interface PageOpener {
+  open(url: string, title: string): void;
+}
+
+const PageOpenerContext = createContext<PageOpener | undefined>(undefined);
+
+export const PageOpenerProvider = PageOpenerContext.Provider;
+
+export function useOptionalPageOpener(): PageOpener | undefined {
+  return useContext(PageOpenerContext);
+}

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

@@ -0,0 +1,31 @@
+import { useState, type FormEvent } from "react";
+import { Button, Input, Label } from "../ui";
+import type { PanelAction, TargetView } from "./contract";
+
+/** Die Anmeldung eines Ziels, direkt in seiner Karte: Benutzer und Passwort oder ein Zugangstoken. */
+export function LoginForm({ target, mode, busy, send, submitLabel }: {
+  target: TargetView;
+  mode: "password" | "token";
+  busy: boolean;
+  send: (action: PanelAction) => void;
+  submitLabel: string;
+}) {
+  const [user, setUser] = useState(target.loginUser ?? "");
+  const [password, setPassword] = useState("");
+  const [token, setToken] = useState("");
+  const complete = mode === "token" ? token.trim() !== "" : user.trim() !== "" && password !== "";
+  const field = `${target.name}-${mode}`;
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    send(mode === "token" ? { action: "login", name: target.name, token } : { action: "login", name: target.name, user, password });
+  };
+  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={`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>
+      </>}
+    <Button className="w-full" disabled={busy || !complete} size="sm" type="submit">{submitLabel}</Button>
+  </form>;
+}

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

@@ -0,0 +1,90 @@
+import { BookIcon, CodeIcon, PlusIcon, SettingsIcon } from "lucide-react";
+import { Button, Card } from "../ui";
+import type { PanelAction, PanelState, TargetEntry, TargetRun, TargetView } from "./contract";
+import { LoginForm } from "./LoginForm";
+import { runStateLabel, runTone, stateDetail, stateLabel, stateTone } from "./target-state";
+
+export interface PanelPageProps {
+  readonly state: PanelState;
+  readonly send: (action: PanelAction) => void;
+}
+
+const rowClass = "flex w-full min-w-0 items-center gap-2 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:opacity-50";
+
+function RunRow({ target, run, busy, send }: { target: TargetView; run: TargetRun; busy: boolean; send: PanelPageProps["send"] }) {
+  return <li>
+    <button className={rowClass} disabled={busy} onClick={() => send({ action: "openRun", name: target.name, runId: run.id })} type="button">
+      <span aria-hidden className={`size-[7px] flex-none rounded-full bg-current ${runTone(run)}`} />
+      <span className="min-w-0 flex-1 truncate text-[0.82rem] font-medium">{run.title}</span>
+      <span className={`flex-none text-[0.7rem] ${runTone(run)}`}>{runStateLabel(run)}</span>
+    </button>
+  </li>;
+}
+
+function EntryRow({ target, entry, busy, send }: { target: TargetView; entry: TargetEntry; busy: boolean; send: PanelPageProps["send"] }) {
+  return <li>
+    <button className={rowClass} disabled={busy} onClick={() => send({ action: "newRun", name: target.name, entryId: entry.id })} title={entry.description} type="button">
+      {entry.action === "skill" ? <BookIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" /> : <CodeIcon aria-hidden className="size-3.5 flex-none text-muted-foreground" />}
+      <span className="min-w-0 flex-1 truncate text-[0.82rem]">{entry.title}</span>
+    </button>
+  </li>;
+}
+
+function TargetActions({ target, busy, send }: { target: TargetView; busy: boolean; send: PanelPageProps["send"] }) {
+  const state = target.state;
+  if (state.kind === "stopped") return <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="sm" variant="secondary">{target.kind === "profile" ? "Starten" : "Verbinden"}</Button>;
+  if (state.kind === "unreachable" || state.kind === "failed") return <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="sm" variant="secondary">Erneut versuchen</Button>;
+  if (state.kind === "connected") return <Button disabled={busy} onClick={() => send({ action: "disconnect", name: target.name })} size="sm" variant="ghost">{target.kind === "profile" ? "Stoppen" : "Trennen"}</Button>;
+  return null;
+}
+
+function TargetCard({ target, send }: { target: TargetView; send: PanelPageProps["send"] }) {
+  const detail = stateDetail(target);
+  const connected = target.state.kind === "connected";
+  const busy = target.state.kind === "starting" || target.state.kind === "connecting";
+  return <Card className="gap-3 p-4">
+    <header className="grid gap-1">
+      <div className="flex min-w-0 items-center gap-2">
+        <strong className="min-w-0 flex-1 truncate text-[0.95rem] font-semibold">{target.name}</strong>
+        <span className={`flex-none text-[0.72rem] font-medium ${stateTone(target)}`}>{stateLabel(target)}</span>
+      </div>
+      <p className="truncate text-[0.72rem] text-muted-foreground" title={target.description}>{target.description}</p>
+    </header>
+    {detail && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
+    {target.state.kind === "login-required" && <LoginForm busy={busy} mode={target.state.mode} send={send} submitLabel="Anmelden" target={target} />}
+    {connected && <>
+      {target.runs.length > 0
+        ? <ul className="-mx-2 grid gap-0.5">{target.runs.map((run) => <RunRow busy={busy} key={run.id} run={run} send={send} target={target} />)}</ul>
+        : <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>}
+      {target.canCreate && <>
+        <Button disabled={busy} onClick={() => send({ action: "newRun", name: target.name })} size="sm" variant="secondary"><PlusIcon data-icon="inline-start" />Neuer Run</Button>
+        {target.entries.length > 0 && <details className="-mx-2">
+          <summary className="cursor-pointer rounded-md px-2 py-1 text-[0.72rem] font-semibold text-muted-foreground hover:bg-accent">Startvorlagen <span className="font-mono opacity-80">{target.entries.length}</span></summary>
+          <ul className="mt-1 grid gap-0.5">{target.entries.map((entry) => <EntryRow busy={busy} entry={entry} key={entry.id} send={send} target={target} />)}</ul>
+        </details>}
+      </>}
+    </>}
+    <footer className="flex flex-wrap items-center gap-2 empty:hidden">
+      <TargetActions busy={busy} send={send} target={target} />
+      {connected && target.user && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="sm" variant="ghost">Abmelden</Button>}
+    </footer>
+  </Card>;
+}
+
+/** Die Startseite des Panels: alle Ziele nebeneinander, je Ziel Zustand, Runs und Startvorlagen. */
+export function OverviewPage({ state, send }: PanelPageProps) {
+  return <div className="grid gap-3">
+    <div className="flex items-center justify-between gap-2">
+      <h1 className="text-[1.15rem] font-semibold">Übersicht</h1>
+      <Button aria-label="Einstellungen" onClick={() => send({ action: "page", page: "settings" })} size="icon-sm" title="Einstellungen" variant="ghost"><SettingsIcon /></Button>
+    </div>
+    {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
+    {state.targets.length === 0
+      ? <Card className="gap-3 p-4">
+        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Ziel. Lege einen Server oder ein lokales Profil an.</p>
+        <Button onClick={() => send({ action: "page", page: "settings" })}><PlusIcon data-icon="inline-start" />Ziel anlegen</Button>
+      </Card>
+      : state.targets.map((target) => <TargetCard key={target.name} send={send} target={target} />)}
+  </div>;
+}

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

@@ -0,0 +1,9 @@
+import { OverviewPage, type PanelPageProps } from "./OverviewPage";
+import { SettingsPage } from "./SettingsPage";
+
+/** Das Panel der Erweiterung ohne geöffneten Run: die Übersicht aller Ziele, dahinter die Einstellungsseite. */
+export function PanelPage(props: PanelPageProps) {
+  return <main className="min-h-dvh p-3">
+    {props.state.page === "settings" ? <SettingsPage {...props} /> : <OverviewPage {...props} />}
+  </main>;
+}

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

@@ -0,0 +1,102 @@
+import { ArrowLeftIcon, FolderOpenIcon, PlusIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useEffect, useState, type FormEvent } from "react";
+import { Button, Card, Input, Label, Toggle } from "../ui";
+import type { PanelAction, TargetView } from "./contract";
+import { LoginForm } from "./LoginForm";
+import type { PanelPageProps } from "./OverviewPage";
+import { stateLabel, stateTone } from "./target-state";
+
+const sectionTitleClass = "text-[0.8rem] font-semibold";
+
+function Credentials({ target, busy, send }: { target: TargetView; busy: boolean; send: (action: PanelAction) => void }) {
+  const demanded = target.state.kind === "login-required" ? target.state.mode : "password";
+  const [mode, setMode] = useState<"password" | "token">(demanded);
+  return <details className="rounded-md border border-border-soft px-2.5 py-2">
+    <summary className="cursor-pointer text-[0.75rem] font-semibold text-muted-foreground">Anmeldedaten {target.savedLogin ? "(gespeichert)" : ""}</summary>
+    <div className="mt-2.5 grid gap-2.5">
+      <div className="flex gap-1.5">
+        <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>
+      </div>
+      <LoginForm busy={busy} mode={mode} send={send} submitLabel="Speichern und anmelden" target={target} />
+      {target.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="sm" variant="ghost">Anmeldedaten löschen</Button>}
+    </div>
+  </details>;
+}
+
+function TargetRow({ target, send }: { target: TargetView; send: (action: PanelAction) => void }) {
+  const [confirming, setConfirming] = useState(false);
+  const busy = target.state.kind === "starting" || target.state.kind === "connecting";
+  return <Card className="gap-2.5 p-3.5">
+    <div className="flex min-w-0 items-start gap-2">
+      <span className="min-w-0 flex-1">
+        <strong className="block truncate text-[0.9rem] font-semibold">{target.name}</strong>
+        <span className="block truncate text-[0.72rem] text-muted-foreground" title={target.description}>{target.description}</span>
+        <span className={`block text-[0.7rem] ${stateTone(target)}`}>{stateLabel(target)}</span>
+      </span>
+      {confirming
+        ? <span className="flex flex-none items-center gap-1">
+          <Button disabled={busy} onClick={() => send({ action: "remove", name: target.name })} size="xs" variant="destructive">Entfernen</Button>
+          <Button onClick={() => setConfirming(false)} size="xs" variant="ghost">Nein</Button>
+        </span>
+        : <Button aria-label={`${target.name} entfernen`} disabled={busy} onClick={() => setConfirming(true)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>}
+    </div>
+    {target.problem && <p className="text-[0.75rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{target.problem}</p>}
+    {target.kind === "server" && <Credentials busy={busy} send={send} target={target} />}
+  </Card>;
+}
+
+function AddServer({ send }: { send: (action: PanelAction) => void }) {
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    send({ action: "addServer", name, url });
+    setName("");
+    setUrl("");
+  };
+  return <form className="grid gap-2.5" onSubmit={submit}>
+    <h2 className={sectionTitleClass}>Server hinzufügen</h2>
+    <div className="grid gap-1.5"><Label htmlFor="server-name">Name</Label><Input id="server-name" onChange={(event) => setName(event.target.value)} placeholder="Werkstatt" value={name} /></div>
+    <div className="grid gap-1.5"><Label htmlFor="server-url">Adresse</Label><Input id="server-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
+    <Button disabled={!name.trim() || !url.trim()} size="sm" type="submit"><PlusIcon data-icon="inline-start" />Server anlegen</Button>
+  </form>;
+}
+
+function AddProfile({ picked, send }: { picked: string | undefined; send: (action: PanelAction) => void }) {
+  const [name, setName] = useState("");
+  const [profileFile, setProfileFile] = useState("");
+  useEffect(() => { if (picked) setProfileFile(picked); }, [picked]);
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    send({ action: "addProfile", name, profileFile });
+    setName("");
+    setProfileFile("");
+  };
+  return <form className="grid gap-2.5" onSubmit={submit}>
+    <h2 className={sectionTitleClass}>Lokales Profil hinzufügen</h2>
+    <div className="grid gap-1.5"><Label htmlFor="profile-name">Name</Label><Input id="profile-name" onChange={(event) => setName(event.target.value)} placeholder="core" value={name} /></div>
+    <div className="grid gap-1.5"><Label htmlFor="profile-file">Profildatei</Label><Input id="profile-file" onChange={(event) => setProfileFile(event.target.value)} placeholder="~/repos/RAgents/ragents.config.core.ts" value={profileFile} /></div>
+    <div className="flex flex-wrap gap-2">
+      <Button onClick={() => send({ action: "pickProfile" })} size="sm" type="button" variant="ghost"><FolderOpenIcon data-icon="inline-start" />Datei wählen ...</Button>
+      <Button className="flex-1" disabled={!name.trim() || !profileFile.trim()} size="sm" type="submit"><PlusIcon data-icon="inline-start" />Profil anlegen</Button>
+    </div>
+  </form>;
+}
+
+/** Eine Seite für alles, was eingerichtet wird: Ziele anlegen und entfernen, Anmeldedaten je Server. */
+export function SettingsPage({ state, send }: PanelPageProps) {
+  return <div className="grid gap-3">
+    <div className="flex items-center gap-2">
+      <Button aria-label="Zur Übersicht" onClick={() => send({ action: "page", page: "overview" })} size="icon-sm" title="Zur Übersicht" variant="ghost"><ArrowLeftIcon /></Button>
+      <h1 className="min-w-0 flex-1 text-[1.15rem] font-semibold">Einstellungen</h1>
+      <Button aria-label="Einstellung öffnen" onClick={() => send({ action: "settingsFile" })} size="icon-sm" title="Einstellung öffnen (settings.json)" variant="ghost"><SettingsIcon /></Button>
+    </div>
+    {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
+    {state.targets.length === 0
+      ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch kein Ziel.</p>
+      : state.targets.map((target) => <TargetRow key={target.name} send={send} target={target} />)}
+    <Card className="gap-4 p-4"><AddServer send={send} /></Card>
+    <Card className="gap-4 p-4"><AddProfile picked={state.pickedProfileFile} send={send} /></Card>
+  </div>;
+}

package/apps/web/src/panel/contract.ts

@@ -0,0 +1,101 @@
+import type { ColumnTheme } from "../column/host-contract";
+
+/** Ein Ziel der Erweiterung: ein RAgents-Server oder ein lokales Profil, das sie selbst startet. */
+export type TargetKind = "server" | "profile";
+
+export type TargetState =
+  | { readonly kind: "stopped" }
+  | { readonly kind: "starting"; readonly detail?: string }
+  | { readonly kind: "connecting" }
+  | { readonly kind: "connected" }
+  | { readonly kind: "unreachable"; readonly message: string }
+  | { readonly kind: "login-required"; readonly mode: "password" | "token" }
+  | { readonly kind: "forbidden"; readonly message: string }
+  | { readonly kind: "failed"; readonly message: string };
+
+export interface TargetRun {
+  readonly id: string;
+  readonly title: string;
+  readonly state: "running" | "waiting" | "idle" | "ended";
+  readonly questions: number;
+  readonly updatedAt: number;
+}
+
+export interface TargetEntry {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly action: "skill" | "script";
+}
+
+export interface TargetView {
+  readonly name: string;
+  readonly kind: TargetKind;
+  /** Adresse des Servers oder Profil samt Pfad. */
+  readonly description: string;
+  readonly state: TargetState;
+  readonly runs: readonly TargetRun[];
+  readonly entries: readonly TargetEntry[];
+  /** Neue Runs sind erlaubt; ohne das Recht bleibt nur die Liste. */
+  readonly canCreate: boolean;
+  /** Der angemeldete Benutzer, sofern der Server Benutzer führt. */
+  readonly user?: string;
+  /** Die zuletzt versuchte Kennung; das Anmeldeformular übernimmt sie. */
+  readonly loginUser?: string;
+  /** Anmeldedaten liegen in der SecretStorage, damit sich das Ziel still anmeldet. */
+  readonly savedLogin?: boolean;
+  /** Fehler der letzten Aktion an diesem Ziel, direkt in seiner Karte. */
+  readonly problem?: string;
+}
+
+export interface PanelState {
+  readonly theme: ColumnTheme;
+  readonly page: "overview" | "settings";
+  readonly targets: readonly TargetView[];
+  /** Die Einstellung ragents.connections ist fehlerhaft; die Seite nennt den Grund. */
+  readonly problem?: string;
+  /** Der zuletzt über den Dateidialog gewählte Profilpfad; das Formular übernimmt ihn. */
+  readonly pickedProfileFile?: string;
+}
+
+/** Der Zustand kommt von der Erweiterung, zuerst eingebettet in die Seite, danach als Nachricht. */
+export interface PanelStateMessage {
+  readonly type: "ragents.panel.state";
+  readonly state: PanelState;
+}
+
+/** Was die Panelseite an die Erweiterung schickt. */
+export type PanelAction =
+  | { readonly action: "page"; readonly page: "overview" | "settings" }
+  | { readonly action: "settingsFile" }
+  | { readonly action: "pickProfile" }
+  | { readonly action: "addServer"; readonly name: string; readonly url: string }
+  | { readonly action: "addProfile"; readonly name: string; readonly profileFile: string }
+  | { readonly action: "remove" | "connect" | "disconnect" | "logout"; readonly name: string }
+  | { readonly action: "login"; readonly name: string; readonly user: string; readonly password: string }
+  | { readonly action: "login"; readonly name: string; readonly token: string }
+  | { readonly action: "openRun"; readonly name: string; readonly runId: string }
+  | { readonly action: "newRun"; readonly name: string; readonly entryId?: string };
+
+export type PanelActionMessage = PanelAction & { readonly type: "ragents.panel" };
+
+const text = (value: unknown, key: string): boolean => typeof (value as Record<string, unknown>)[key] === "string";
+
+export const isPanelActionMessage = (value: unknown): value is PanelActionMessage => {
+  if (typeof value !== "object" || value === null || (value as { type?: unknown }).type !== "ragents.panel") return false;
+  switch ((value as { action?: unknown }).action) {
+    case "page": return (value as { page?: unknown }).page === "overview" || (value as { page?: unknown }).page === "settings";
+    case "settingsFile": case "pickProfile": return true;
+    case "addServer": return text(value, "name") && text(value, "url");
+    case "addProfile": return text(value, "name") && text(value, "profileFile");
+    case "remove": case "connect": case "disconnect": case "logout": return text(value, "name");
+    case "login": return text(value, "name") && (text(value, "token") || (text(value, "user") && text(value, "password")));
+    case "openRun": return text(value, "name") && text(value, "runId");
+    case "newRun": return text(value, "name") && ((value as { entryId?: unknown }).entryId === undefined || text(value, "entryId"));
+    default: return false;
+  }
+};
+
+export const isPanelStateMessage = (value: unknown): value is PanelStateMessage =>
+  typeof value === "object" && value !== null && (value as { type?: unknown }).type === "ragents.panel.state"
+  && typeof (value as { state?: unknown }).state === "object";

package/apps/web/src/panel/target-state.ts

@@ -0,0 +1,53 @@
+import type { TargetRun, TargetView } from "./contract";
+
+/** Wie der Zustand eines Ziels in seiner Karte steht; ein lokales Profil ist nicht getrennt, sondern nicht gestartet. */
+export const stateLabel = (target: TargetView): string => {
+  switch (target.state.kind) {
+    case "stopped": return target.kind === "profile" ? "nicht gestartet" : "getrennt";
+    case "starting": return target.state.detail ?? (target.kind === "profile" ? "startet ..." : "verbindet ...");
+    case "connecting": return "verbindet ...";
+    case "connected": return target.user ? `verbunden als ${target.user}` : "verbunden";
+    case "unreachable": return "nicht erreichbar";
+    case "login-required": return target.state.mode === "token" ? "Zugangstoken nötig" : "Anmeldung nötig";
+    case "forbidden": return "kein Zugriff";
+    case "failed": return "Start fehlgeschlagen";
+  }
+};
+
+export const stateTone = (target: TargetView): string => {
+  switch (target.state.kind) {
+    case "connected": return "text-success";
+    case "starting":
+    case "connecting": return "text-info";
+    case "login-required": return "text-warning";
+    case "unreachable":
+    case "forbidden":
+    case "failed": return "text-destructive";
+    case "stopped": return "text-muted-foreground";
+  }
+};
+
+/** Der Grund, der zum Zustand gehört; er steht unter der Kopfzeile der Karte. */
+export const stateDetail = (target: TargetView): string | undefined => {
+  const state = target.state;
+  if (state.kind === "unreachable" || state.kind === "forbidden" || state.kind === "failed") return state.message;
+  return undefined;
+};
+
+export const runStateLabel = (run: TargetRun): string => {
+  switch (run.state) {
+    case "running": return "läuft";
+    case "waiting": return run.questions === 1 ? "1 Rückfrage" : `${run.questions} Rückfragen`;
+    case "ended": return "beendet";
+    case "idle": return "ruht";
+  }
+};
+
+export const runTone = (run: TargetRun): string => {
+  switch (run.state) {
+    case "running": return "text-info";
+    case "waiting": return "text-warning";
+    case "ended": return "text-muted-foreground";
+    case "idle": return "text-muted-foreground";
+  }
+};

package/apps/web/src/panel.tsx

@@ -0,0 +1,30 @@
+import "./ui/tailwind.css";
+import { StrictMode, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { PanelPage } from "./panel/PanelPage";
+import { isPanelStateMessage, type PanelAction, type PanelState } from "./panel/contract";
+import { initializeTheme } from "./theme";
+
+declare function acquireVsCodeApi(): { postMessage(message: unknown): void };
+
+const root = document.getElementById("root");
+const embedded = document.getElementById("state");
+if (!root || !embedded?.textContent) throw new Error("Root-Element oder eingebetteter Zustand fehlt");
+
+const vscode = acquireVsCodeApi();
+const initial = JSON.parse(embedded.textContent) as PanelState;
+const theme = initializeTheme(window);
+
+function App() {
+  const [state, setState] = useState(initial);
+  useEffect(() => {
+    const listener = (event: MessageEvent) => { if (isPanelStateMessage(event.data)) setState(event.data.state); };
+    window.addEventListener("message", listener);
+    return () => window.removeEventListener("message", listener);
+  }, []);
+  useEffect(() => theme.setPreference(state.theme), [state.theme]);
+  const send = (action: PanelAction) => vscode.postMessage({ type: "ragents.panel", ...action });
+  return <PanelPage send={send} state={state} />;
+}
+
+createRoot(root).render(<StrictMode><App /></StrictMode>);