@schlenkr/ragents 0.1.0 → 0.1.1

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

@@ -1,90 +1,215 @@
-import { BookIcon, CodeIcon, PlusIcon, SettingsIcon } from "lucide-react";
-import { Button, Card } from "../ui";
+import { BookIcon, ChevronRightIcon, CodeIcon, PlusIcon, SearchIcon, ServerIcon, SettingsIcon } from "lucide-react";
+import { useState, type CSSProperties, type ReactNode } from "react";
+import { cn } from "cn";
+import { Button, Input } from "../ui";
 import type { PanelAction, PanelState, TargetEntry, TargetRun, TargetView } from "./contract";
-import { LoginForm } from "./LoginForm";
-import { runStateLabel, runTone, stateDetail, stateLabel, stateTone } from "./target-state";
+import { LoginDialog } from "./PanelDialogs";
+import { busyState, environmentHue, kindLabel, runStateLabel, runTime, 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";
+const NEW_RUN_GROUP = "Ohne Vorlage";
+const NEW_RUN_TEXT = "Leerer Run, der Auftrag entsteht im Chat der Arbeitsspalte.";
 
-function RunRow({ target, run, busy, send }: { target: TargetView; run: TargetRun; busy: boolean; send: PanelPageProps["send"] }) {
+const edgeColor = "[border-left-color:oklch(var(--env-lightness)_var(--env-chroma)_var(--env-hue))]";
+const sectionClass = "flex items-baseline gap-2 text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground";
+const countClass = "font-mono text-[0.62rem] font-normal tracking-normal opacity-80";
+const environmentLine = "truncate text-[0.62rem] leading-tight text-muted-foreground";
+
+const hueStyle = (name: string): CSSProperties => ({ "--env-hue": environmentHue(name) } as CSSProperties);
+
+function Section({ title, count }: { title: string; count: number }) {
+  return <h2 className={sectionClass}>{title}<span className={countClass}>{count}</span></h2>;
+}
+
+function EnvironmentRow({ target, marked, send, onLogin }: {
+  target: TargetView;
+  marked: boolean;
+  send: PanelPageProps["send"];
+  onLogin: (target: TargetView) => void;
+}) {
+  const detail = stateDetail(target) ?? target.problem;
+  const busy = busyState(target);
+  return <li className="flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-border-soft px-1 py-2 last:border-b-0">
+    {marked && <span aria-hidden className="size-[9px] flex-none rounded-[3px] bg-[oklch(var(--env-lightness)_var(--env-chroma)_var(--env-hue))]" style={hueStyle(target.name)} />}
+    <strong className="min-w-0 flex-1 truncate text-[0.8rem] font-semibold">{target.name}</strong>
+    <span className="flex-none text-[0.62rem] uppercase tracking-[0.05em] text-muted-foreground">{kindLabel(target)}</span>
+    <span className={cn("flex flex-none items-center gap-1.5 text-[0.7rem]", stateTone(target))}>
+      <span aria-hidden className="size-[7px] flex-none rounded-full bg-current" />{stateLabel(target)}
+    </span>
+    <EnvironmentAction busy={busy} onLogin={onLogin} send={send} target={target} />
+    {detail && <p className="w-full text-[0.7rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+  </li>;
+}
+
+/** Nur eine Umgebung mit Problem bietet hier eine Handlung an; Trennen und Stoppen stehen in den Einstellungen. */
+function EnvironmentAction({ target, busy, send, onLogin }: {
+  target: TargetView;
+  busy: boolean;
+  send: PanelPageProps["send"];
+  onLogin: (target: TargetView) => void;
+}) {
+  const state = target.state.kind;
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(target)} size="xs" variant="secondary">Anmelden</Button>;
+  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: target.name })} size="xs" variant="secondary">Erneut versuchen</Button>;
+  if (state === "stopped") return target.kind === "profile"
+    ? <Button disabled={busy} onClick={() => send({ action: "startProfile", name: target.name })} size="xs" variant="secondary">Starten</Button>
+    : <Button disabled={busy} onClick={() => send({ action: "connect", name: target.name })} size="xs" variant="secondary">Verbinden</Button>;
+  return null;
+}
+
+function RunRow({ target, run, marked, send }: { target: TargetView; run: TargetRun; marked: 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
+      className={cn("flex w-full min-w-0 items-center gap-2 rounded-[2px_7px_7px_2px] border-l-[3px] border-transparent py-1.5 pr-2 pl-2 text-left hover:bg-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60",
+        marked && cn("pl-[9px]", edgeColor))}
+      onClick={() => send({ action: "openRun", name: target.name, runId: run.id })}
+      style={marked ? hueStyle(target.name) : undefined}
+      title={marked ? `${run.title} (${target.name})` : run.title}
+      type="button">
+      <span aria-hidden className={cn("size-[7px] flex-none rounded-full bg-current", runTone(run))} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        {marked && <span className={environmentLine}>{target.name}</span>}
+        <span className="truncate text-[0.8rem] font-medium">{run.title}</span>
+      </span>
+      <span className="flex flex-none flex-col items-end">
+        <span className={cn("text-[0.68rem]", runTone(run))}>{runStateLabel(run)}</span>
+        <span className="font-mono text-[0.62rem] text-muted-foreground">{runTime(run)}</span>
+      </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>
+const tileClass = "group/tile flex h-full min-w-0 flex-col gap-1.5 border border-border-soft border-l-[3px] bg-card p-2.5 pl-[9px] text-left"
+  + " hover:border-border hover:bg-accent/40 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60";
+const skillTone = "[--tone:var(--primary)] rounded-[3px_12px_12px_3px] border-l-primary/70";
+const scriptTone = "[--tone:var(--success)] rounded-[3px_4px_4px_3px] border-l-success/70";
+
+function Tile({ category, icon, title, description, environment, extra, onClick }: {
+  category: string;
+  icon: ReactNode;
+  title: string;
+  description: string;
+  environment: string | undefined;
+  extra: string;
+  onClick: () => void;
+}) {
+  return <li className="min-w-0">
+    <button className={cn(tileClass, extra)} onClick={onClick} style={environment ? hueStyle(environment) : undefined}
+      title={environment ? `${title} (${environment})` : title} type="button">
+      <span className="flex min-w-0 items-center gap-1.5 text-(--tone)">
+        {icon}
+        <span className="truncate text-[0.58rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground">{category}</span>
+      </span>
+      {environment && <span className={environmentLine}>{environment}</span>}
+      <span className="text-[0.76rem] font-semibold leading-snug [overflow-wrap:anywhere]">{title}</span>
+      <span className="line-clamp-2 text-[0.66rem] leading-[1.45] text-muted-foreground">{description}</span>
+      <span className="mt-auto flex items-center gap-0.5 pt-1.5 text-[0.62rem] font-semibold text-(--tone) opacity-50 group-hover/tile:opacity-100">
+        Starten<ChevronRightIcon aria-hidden className="size-3" />
+      </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;
+interface Offer {
+  readonly target: TargetView;
+  readonly entry: TargetEntry | undefined;
 }
 
-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>;
+const matches = (offer: Offer, query: string): boolean => {
+  const entry = offer.entry;
+  const haystack = entry === undefined
+    ? `${NEW_RUN_GROUP} Neuer Run ${NEW_RUN_TEXT} ${offer.target.name}`
+    : `${entry.title} ${entry.description} ${entry.category} ${offer.target.name}`;
+  return haystack.toLocaleLowerCase("de-DE").includes(query);
+};
+
+/** Die Kacheln stehen nach Kategorie gruppiert; die Gruppe "Ohne Vorlage" mit dem leeren Run bleibt oben. */
+const groupOffers = (offers: readonly Offer[]): Array<readonly [string, readonly Offer[]]> => {
+  const groups = new Map<string, Offer[]>();
+  for (const offer of offers) {
+    const key = offer.entry?.category ?? NEW_RUN_GROUP;
+    const group = groups.get(key) ?? [];
+    group.push(offer);
+    groups.set(key, group);
+  }
+  return [...groups];
+};
+
+function Templates({ targets, marked, send }: { targets: readonly TargetView[]; marked: boolean; send: PanelPageProps["send"] }) {
+  const [query, setQuery] = useState("");
+  const offers: Offer[] = targets.flatMap((target) => [
+    { target, entry: undefined },
+    ...target.entries.map((entry) => ({ target, entry })),
+  ]);
+  const needle = query.trim().toLocaleLowerCase("de-DE");
+  const filtered = needle === "" ? offers : offers.filter((offer) => matches(offer, needle));
+  return <section className="grid gap-2">
+    <Section count={offers.length} title="Startvorlagen" />
+    <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="Vorlagen suchen" className="h-8 pl-8 text-[0.76rem]" onChange={(event) => setQuery(event.target.value)}
+        placeholder="Vorlagen suchen ..." type="search" value={query} />
+    </div>
+    {filtered.length === 0
+      ? <p className="text-[0.75rem] text-muted-foreground" role="status">Keine passende Vorlage.</p>
+      : groupOffers(filtered).map(([group, entries]) => <div className="grid gap-1.5" key={group}>
+        <h3 className={sectionClass}>{group}<span className={countClass}>{entries.length}</span></h3>
+        <ul className="grid grid-cols-[repeat(auto-fill,minmax(182px,1fr))] gap-2">
+          {entries.map(({ target, entry }) => entry === undefined
+            ? <Tile category={NEW_RUN_GROUP} description={NEW_RUN_TEXT} environment={marked ? target.name : undefined}
+              extra="[--tone:var(--primary)] rounded-[3px_10px_10px_3px] border-dashed border-l-primary/50" icon={<PlusIcon aria-hidden className="size-3.5" />}
+              key={target.name} onClick={() => send({ action: "newRun", name: target.name })} title="Neuer Run" />
+            : <Tile category={entry.category} description={entry.description} environment={marked ? target.name : undefined}
+              extra={entry.kind === "skill" ? skillTone : scriptTone}
+              icon={entry.kind === "skill" ? <BookIcon aria-hidden className="size-3.5" /> : <CodeIcon aria-hidden className="size-3.5" />}
+              key={`${target.name}:${entry.id}`}
+              onClick={() => send({ action: "newRun", name: target.name, entryId: entry.id })} title={entry.title} />)}
+        </ul>
+      </div>)}
+  </section>;
 }
 
-/** Die Startseite des Panels: alle Ziele nebeneinander, je Ziel Zustand, Runs und Startvorlagen. */
+/** Die Startseite des Panels: alle Umgebungen, darunter ihre Runs und ihre Startvorlagen als Kacheln. */
 export function OverviewPage({ state, send }: PanelPageProps) {
-  return <div className="grid gap-3">
+  const [login, setLogin] = useState<string>();
+  const targets = state.targets;
+  const marked = targets.length > 1;
+  const runs = targets.flatMap((target) => target.runs.map((run) => ({ target, run })))
+    .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
+  const starters = targets.filter((target) => target.state.kind === "connected" && target.canCreate);
+  const loginTarget = targets.find((target) => target.name === login);
+  return <div className="grid gap-4">
     <div className="flex items-center justify-between gap-2">
-      <h1 className="text-[1.15rem] font-semibold">Übersicht</h1>
+      <h1 className="text-[1.1rem] 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} />)}
+    {targets.length === 0
+      ? <div className="grid gap-3">
+        <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch keine Umgebung. Lege einen Server oder ein lokales Profil an.</p>
+        <Button onClick={() => send({ action: "page", page: "settings" })}><ServerIcon data-icon="inline-start" />Umgebung anlegen</Button>
+      </div>
+      : <>
+        <section className="grid gap-1.5">
+          {marked && <Section count={targets.length} title="Umgebungen" />}
+          <ul className="grid">
+            {targets.map((target) => <EnvironmentRow key={target.name} marked={marked} onLogin={(entry) => setLogin(entry.name)} send={send} target={target} />)}
+          </ul>
+        </section>
+        <section className="grid gap-1.5">
+          <Section count={runs.length} title="Runs" />
+          {runs.length === 0
+            ? <p className="text-[0.75rem] text-muted-foreground">Noch keine Runs.</p>
+            : <ul className="-mx-1 grid gap-0.5">
+              {runs.map(({ target, run }) => <RunRow key={`${target.name}:${run.id}`} marked={marked} run={run} send={send} target={target} />)}
+            </ul>}
+        </section>
+        {starters.length > 0 && <Templates marked={marked} send={send} targets={starters} />}
+      </>}
+    {loginTarget && <LoginDialog onClose={() => setLogin(undefined)} send={send} target={loginTarget} />}
   </div>;
 }

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

@@ -0,0 +1,115 @@
+import { FolderOpenIcon } from "lucide-react";
+import { useEffect, useState, type FormEvent, type ReactNode } from "react";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Toggle } from "../ui";
+import type { PanelAction, PanelState, TargetKind, TargetView } from "./contract";
+import { busyState } from "./target-state";
+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. */
+export const profileNameOf = (profileFile: string): string =>
+  PROFILE_FILE.exec(profileFile.split(/[/\\]/).pop() ?? "")?.[1] ?? "";
+
+const fileNameOf = (profileFile: string): string => profileFile.split(/[/\\]/).pop() ?? profileFile;
+
+function PanelDialog({ title, onClose, children }: { title: string; onClose: () => void; children: ReactNode }) {
+  return <Dialog onOpenChange={(next) => { if (!next) onClose(); }} open>
+    <DialogContent className="gap-3" scope="page" size="small">
+      <DialogHeader><DialogTitle className="text-[0.95rem] font-semibold">{title}</DialogTitle></DialogHeader>
+      {children}
+    </DialogContent>
+  </Dialog>;
+}
+
+/** Die Anmeldung einer Umgebung, aus der Übersicht wie aus den Einstellungen derselbe Dialog. */
+export function LoginDialog({ target, onClose, send }: { target: TargetView; onClose: () => void; send: (action: PanelAction) => void }) {
+  const demanded = target.state.kind === "login-required" ? target.state.mode : "password";
+  const [mode, setMode] = useState<"password" | "token">(demanded);
+  useEffect(() => { if (target.state.kind === "connected") onClose(); }, [onClose, target.state.kind]);
+  return <PanelDialog onClose={onClose} title={`Anmelden an ${target.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>
+    </div>
+    <LoginForm busy={busyState(target)} key={mode} mode={mode} onCancel={onClose} send={send} submitLabel="Anmelden" target={target} />
+  </PanelDialog>;
+}
+
+/** Anlegen und Bearbeiten einer Umgebung; Bearbeiten schickt update und behält damit die gespeicherten Anmeldedaten. */
+export function TargetDialog({ state, target, onClose, send }: {
+  state: PanelState;
+  target: TargetView | undefined;
+  onClose: () => void;
+  send: (action: PanelAction) => void;
+}) {
+  const [kind, setKind] = useState<TargetKind>(target?.kind ?? "server");
+  const [name, setName] = useState(target?.name ?? "");
+  const [url, setUrl] = useState(target?.kind === "server" ? target.address : "");
+  const [profileFile, setProfileFile] = useState(target?.kind === "profile" ? target.address : "");
+  const [sent, setSent] = useState<{ name: string; at: PanelState }>();
+  const picked = state.pickedProfileFile;
+  const settled = sent !== undefined && sent.at !== state;
+  useEffect(() => {
+    if (!picked) return;
+    setKind("profile");
+    setProfileFile(picked);
+    setName((current) => current.trim() === "" ? profileNameOf(picked) : current);
+  }, [picked]);
+  useEffect(() => {
+    if (!settled || sent === undefined) return;
+    if (state.problem !== undefined) setSent(undefined);
+    else if (state.targets.some((entry) => entry.name === sent.name)) onClose();
+  }, [onClose, sent, settled, state]);
+  const takeProfile = (file: string) => {
+    setProfileFile(file);
+    setName((current) => current.trim() === "" ? profileNameOf(file) : current);
+  };
+  const value = kind === "server" ? url : profileFile;
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setSent({ name: name.trim(), at: state });
+    if (target === undefined) send(kind === "server" ? { action: "addServer", name, url } : { action: "addProfile", name, profileFile });
+    else send(kind === "server"
+      ? { action: "updateServer", name: target.name, newName: name, url }
+      : { action: "updateProfile", name: target.name, newName: name, profileFile });
+  };
+  return <PanelDialog onClose={onClose} title={target ? `${target.name} bearbeiten` : "Neue Umgebung"}>
+    <form className="grid gap-3" onSubmit={submit}>
+      <div aria-label="Art der Umgebung" 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>
+      </div>
+      {kind === "server"
+        ? <div className="grid gap-1.5"><Label htmlFor="target-url">Adresse</Label><Input id="target-url" onChange={(event) => setUrl(event.target.value)} placeholder="https://werkstatt.example.com" value={url} /></div>
+        : <div className="grid gap-1.5">
+          <Label htmlFor="target-profile-file">Profildatei</Label>
+          <div className="flex items-center gap-2">
+            <Input aria-label="Profildatei" className="min-w-0 flex-1 font-mono text-[0.72rem]" id="target-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>
+          </div>
+          {state.profileSuggestions.length > 0 && <>
+            <p className="text-[0.7rem] leading-normal text-muted-foreground">Im Host-Ordner gefunden, ein Klick übernimmt sie:</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">
+                  <strong className="truncate text-[0.75rem] font-semibold">{profileNameOf(file)}</strong>
+                  <span className="truncate font-mono text-[0.65rem] text-muted-foreground" title={file}>{fileNameOf(file)}</span>
+                </button>
+              </li>)}
+            </ul>
+          </>}
+        </div>}
+      <div className="grid gap-1.5">
+        <Label htmlFor="target-name">Name</Label>
+        <Input id="target-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>}
+      </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">{target ? "Speichern" : "Anlegen"}</Button>
+      </div>
+    </form>
+  </PanelDialog>;
+}

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

@@ -1,7 +1,7 @@
 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. */
+/** Das Panel der Erweiterung ohne geöffneten Run: die Übersicht aller Umgebungen, dahinter die Einstellungsseite. */
 export function PanelPage(props: PanelPageProps) {
   return <main className="min-h-dvh p-3">
     {props.state.page === "settings" ? <SettingsPage {...props} /> : <OverviewPage {...props} />}

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

@@ -1,102 +1,98 @@
-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 { ArrowLeftIcon, FolderIcon, PencilIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "cn";
+import { Button } from "../ui";
 import type { PanelAction, TargetView } from "./contract";
-import { LoginForm } from "./LoginForm";
 import type { PanelPageProps } from "./OverviewPage";
-import { stateLabel, stateTone } from "./target-state";
+import { LoginDialog, TargetDialog } from "./PanelDialogs";
+import { busyState, kindLabel, stateDetail, stateLabel, stateTone } from "./target-state";
 
-const sectionTitleClass = "text-[0.8rem] font-semibold";
+const fileNameOf = (address: string): string => address.split(/[/\\]/).pop() ?? address;
 
-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>;
+/** Verbinden, Trennen, Starten und Stoppen sitzen hier; die Übersicht bietet nur den Weg aus einem Problem heraus. */
+function RowActions({ target, busy, send, onLogin }: {
+  target: TargetView;
+  busy: boolean;
+  send: (action: PanelAction) => void;
+  onLogin: (name: string) => void;
+}) {
+  const state = target.state.kind;
+  const profile = target.kind === "profile";
+  if (state === "connected") return <Button disabled={busy} onClick={() => send({ action: profile ? "stopProfile" : "disconnect", name: target.name })} size="xs" variant="ghost">{profile ? "Stoppen" : "Trennen"}</Button>;
+  if (state === "login-required" || state === "forbidden") return <Button disabled={busy} onClick={() => onLogin(target.name)} size="xs" variant="secondary">Anmelden</Button>;
+  if (state === "unreachable" || state === "failed") return <Button disabled={busy} onClick={() => send({ action: "retry", name: target.name })} size="xs" variant="secondary">Erneut versuchen</Button>;
+  if (state === "stopped") return <Button disabled={busy} onClick={() => send({ action: profile ? "startProfile" : "connect", name: target.name })} size="xs" variant="secondary">{profile ? "Starten" : "Verbinden"}</Button>;
+  return null;
 }
 
-function TargetRow({ target, send }: { target: TargetView; send: (action: PanelAction) => void }) {
+function TargetRow({ target, send, onEdit, onLogin }: {
+  target: TargetView;
+  send: (action: PanelAction) => void;
+  onEdit: (name: string) => void;
+  onLogin: (name: string) => 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>
+  const busy = busyState(target);
+  const detail = stateDetail(target) ?? target.problem;
+  const profile = target.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">
+      {profile ? <FolderIcon className="size-3.5" /> : <ServerIcon className="size-3.5" />}
+    </span>
+    <span className="min-w-0">
+      <span className="flex min-w-0 items-baseline gap-2">
+        <strong className="min-w-0 truncate text-[0.8rem] font-semibold">{target.name}</strong>
+        <span className="flex-none text-[0.6rem] uppercase tracking-[0.05em] text-muted-foreground">{kindLabel(target)}</span>
       </span>
+      <span className="block truncate font-mono text-[0.68rem] text-muted-foreground" title={target.address}>{profile ? fileNameOf(target.address) : target.address}</span>
+    </span>
+    <span className={cn("col-span-2 flex items-center gap-1.5 text-[0.7rem]", stateTone(target))}>
+      <span aria-hidden className="size-[7px] flex-none rounded-full bg-current" />{stateLabel(target)}
+    </span>
+    {detail && <p className="col-span-2 text-[0.7rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{detail}</p>}
+    <span className="col-span-2 flex flex-wrap items-center gap-1.5">
+      <RowActions busy={busy} onLogin={onLogin} send={send} target={target} />
+      {target.savedLogin && <Button disabled={busy} onClick={() => send({ action: "logout", name: target.name })} size="xs" variant="ghost">Abmelden</Button>}
+      <Button disabled={busy} onClick={() => onEdit(target.name)} size="xs" variant="ghost"><PencilIcon data-icon="inline-start" />Bearbeiten</Button>
       {confirming
-        ? <span className="flex flex-none items-center gap-1">
+        ? <span className="flex items-center gap-1.5">
+          <span className="text-[0.7rem] text-muted-foreground">Wirklich entfernen?</span>
           <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>;
+        : <Button aria-label={`${target.name} entfernen`} className="ml-auto" disabled={busy} onClick={() => setConfirming(true)} size="icon-sm" variant="ghost"><Trash2Icon /></Button>}
+    </span>
+  </li>;
 }
 
-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. */
+/** Alles, was eingerichtet wird: die Umgebungen als Zeilenliste, dahinter die Dialoge zum Anlegen, Bearbeiten und Anmelden. */
 export function SettingsPage({ state, send }: PanelPageProps) {
+  const [dialog, setDialog] = useState<{ kind: "new" } | { kind: "edit"; name: string }>();
+  const [login, setLogin] = useState<string>();
+  const editing = dialog?.kind === "edit" ? state.targets.find((target) => target.name === dialog.name) : undefined;
+  const loginTarget = state.targets.find((target) => target.name === login);
+  const open = dialog?.kind === "new" || editing !== undefined;
   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>
+      <h1 className="min-w-0 flex-1 text-[1.1rem] 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>
+    <section className="grid gap-1.5">
+      <h2 className="flex items-baseline gap-2 text-[0.66rem] font-bold uppercase tracking-[0.06em] text-muted-foreground">
+        Umgebungen<span className="font-mono text-[0.62rem] font-normal tracking-normal opacity-80">{state.targets.length}</span>
+      </h2>
+      {state.targets.length === 0
+        ? <p className="text-[0.85rem] leading-normal text-muted-foreground">Noch keine Umgebung.</p>
+        : <ul className="grid">
+          {state.targets.map((target) => <TargetRow key={target.name} onEdit={(name) => setDialog({ kind: "edit", name })} onLogin={setLogin} send={send} target={target} />)}
+        </ul>}
+    </section>
+    <div className="flex flex-wrap items-center gap-2">
+      <Button onClick={() => setDialog({ kind: "new" })} size="sm"><PlusIcon data-icon="inline-start" />Neue Umgebung</Button>
+    </div>
+    {open && <TargetDialog key={editing?.name ?? "neu"} onClose={() => setDialog(undefined)} send={send} state={state} target={editing} />}
+    {loginTarget && <LoginDialog onClose={() => setLogin(undefined)} send={send} target={loginTarget} />}
   </div>;
 }