@schlenkr/ragents 0.1.5 → 0.1.7

package/apps/web/src/{column.tsx → run-panel.tsx}

@@ -1,4 +1,3 @@
-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";
@@ -6,34 +5,42 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Button } from "./ui";
 import { AccessGate, AccessScreen } from "./AccessContext";
+import { QuasselHost } from "./chat/QuasselHost";
 import { installAccessToken } from "./access-token";
-import { installClipboardBridge } from "./column/clipboard";
-import { ColumnApp, HostLogin } from "./column/ColumnApp";
-import { parseColumnLocation } from "./column/column-location";
-import { ColumnHostProvider, createColumnHost } from "./column/host";
+import { installRunPanelInputBridge } from "./run-panel/input-bridge";
+import { RunPanelApp, HostLogin } from "./run-panel/RunPanelApp";
+import { parseRunPanelLocation } from "./run-panel/run-panel-location";
+import { RunPanelHostProvider, createRunPanelHost } from "./run-panel/host";
 import { PageOpenerProvider } from "./page-opener";
 import { initializeTheme } from "./theme";
+import { installHostModules } from "./host-modules";
 
+installHostModules();
 const root = document.getElementById("root");
 if (!root) throw new Error("Root-Element fehlt");
 
 const reactRoot = createRoot(root);
 try {
-  const location = parseColumnLocation(window.location.search);
+  const location = parseRunPanelLocation(window.location.search);
   if (location.access !== undefined) installAccessToken(location.access);
-  const host = createColumnHost(location.host, window);
-  if (location.host === "vscode") installClipboardBridge(window);
+  const host = createRunPanelHost(location.host, window);
+  if (location.host === "vscode") {
+    const disposeInput = installRunPanelInputBridge(window);
+    import.meta.hot?.dispose(disposeInput);
+  }
   const theme = initializeTheme(window);
   if (location.theme !== undefined) theme.setPreference(location.theme);
   host.onCommand((message) => { if (message.type === "theme") theme.setPreference(message.theme); });
   import.meta.hot?.dispose(() => theme.dispose());
   reactRoot.render(
     <StrictMode>
-      <ColumnHostProvider value={host}>
-        <PageOpenerProvider value={location.host === "vscode" ? { open: host.openPage } : undefined}>
-          <AccessGate Login={location.host === "vscode" ? HostLogin : undefined}><ColumnApp location={location} /></AccessGate>
-        </PageOpenerProvider>
-      </ColumnHostProvider>
+      <QuasselHost>
+        <RunPanelHostProvider value={host}>
+          <PageOpenerProvider value={location.host === "vscode" ? { open: host.openPage } : undefined}>
+            <AccessGate Login={location.host === "vscode" ? HostLogin : undefined}><RunPanelApp location={location} /></AccessGate>
+          </PageOpenerProvider>
+        </RunPanelHostProvider>
+      </QuasselHost>
     </StrictMode>,
   );
 } catch (cause) {

package/apps/web/src/run-preparation.ts

@@ -1,4 +1,4 @@
-import { coreContracts } from "@aicontainer/server/api/contracts";
+import { coreContracts } from "@ragents/host/api/contracts";
 import type { RunPreparationMessage, RunPreparationResponse } from "../../server/src/run-preparation-contract";
 import { rpc } from "./rpc";
 import type { RpcClient } from "./rpc/client";

package/{plugins/ragents.orchestration/web → apps/web/src}/run-view.ts

@@ -1,4 +1,4 @@
-import { artifactContentPath } from "@aicontainer/ragents/src/http/contracts";
+import { artifactContentPath } from "@ragents/engine/src/http/contracts";
 
 export interface RunCapabilityGrant {
   capability: string;
@@ -36,6 +36,7 @@ export interface RunActor {
   grants: RunCapabilityGrant[];
   createdAt: string;
   createdBy?: string;
+  description?: string | null;
   prompt?: string;
   source?: string;
   sourceHash?: string;
@@ -55,7 +56,7 @@ export interface RunActor {
 
 export type RunActorInputLifecycle =
   | { kind: "pending" }
-  | { kind: "claimed"; turnId: string }
+  | { kind: "claimed"; turnId: string; steered: boolean }
   | { kind: "discarded"; at: string; reason: string };
 
 export interface RunActorInput {
@@ -133,17 +134,17 @@ export interface RunPluginState {
 export interface RunAction {
   id: string;
   askedBy: string;
-  kind: "action" | "question";
-  question: { options: string[]; multi: boolean } | null;
+  owner: string | null;
   title: string;
   description: string | null;
   parameters: Record<string, string>;
   input: { label: string; placeholder: string | null; required: boolean } | null;
+  payload: unknown;
   status: "pending" | "approved" | "dismissed";
   proposedAt: string;
   resolvedAt: string | null;
   resolvedBy: string | null;
-  response: string | null;
+  result: unknown;
 }
 
 export interface RunArtifact {
@@ -163,6 +164,7 @@ export interface RunView {
   title: string;
   ownerId: string;
   primaryActorId: string | null;
+  stoppedPrimaryActorId?: string | null;
   createdAt: string;
   forkedFrom: { runId: string; sequence: number } | null;
   actors: RunActor[];
@@ -174,9 +176,12 @@ export interface RunView {
   artifacts: RunArtifact[];
 }
 
-export type ActorSurface = "agent" | "primary" | "script";
+/** Der Gesprächspartner des Run-Chats: der Primary-Actor oder, solange keiner gewählt ist, der als Primary gestoppte Actor. */
+export const chatPrimaryId = (view: RunView): string | null => view.primaryActorId ?? view.stoppedPrimaryActorId ?? null;
 
-export const actorSurface = (view: RunView, actor: RunActor): ActorSurface =>
+export type ActorTone = "agent" | "primary" | "script";
+
+export const actorTone = (view: RunView, actor: RunActor): ActorTone =>
   actor.kind === "script" ? "script" : actor.id === view.primaryActorId ? "primary" : "agent";
 
 export const runViewFrom = (value: unknown): RunView | undefined => {
@@ -197,3 +202,16 @@ export const runViewFrom = (value: unknown): RunView | undefined => {
 };
 
 export const runArtifactContentUrl = (runId: string, artifactId: string) => artifactContentPath(runId, artifactId);
+
+export const runActorFrom = (value: unknown): RunActor => {
+  const actor = value as RunActor | undefined;
+  if (typeof actor?.id !== "string" || typeof actor.handle !== "string") {
+    throw new Error("Der Karten-Kontext enthält keinen Actor der Run-Ansicht");
+  }
+  return actor;
+};
+
+export const actorPluginState = (view: RunView, pluginId: string, actorId: string): unknown =>
+  view.pluginStates
+    .find((entry) => entry.pluginId === pluginId && entry.scope.kind === "actor" && entry.scope.actorId === actorId)
+    ?.state;

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

@@ -1,5 +1,5 @@
 import type {
-  SettingsAgentExtension,
+  SettingsAgentHook,
   SettingsConfigurationDescriptor,
   SettingsPromptContribution,
   SettingsResponse,
@@ -19,7 +19,7 @@ export type ContributionKind =
   | "prompts"
   | "startEntries"
   | "skills"
-  | "extensions"
+  | "hooks"
   | "configuration"
   | "web";
 
@@ -34,9 +34,9 @@ export const contributionFilters: readonly ContributionFilterOption[] = [
   { id: "all", label: "Alle" },
   { id: "tools", label: "Funktionen" },
   { id: "prompts", label: "Prompts" },
-  { id: "startEntries", label: "Einstiege" },
+  { id: "startEntries", label: "Vorlagen" },
   { id: "skills", label: "Skills" },
-  { id: "extensions", label: "Erweiterungen" },
+  { id: "hooks", label: "Hooks" },
   { id: "configuration", label: "Konfiguration" },
   { id: "web", label: "Web" },
 ];
@@ -62,7 +62,7 @@ export interface PluginGroup {
   prompts: readonly SettingsPromptContribution[];
   startEntries: readonly StartEntry[];
   skills: readonly SettingsSkill[];
-  extensions: readonly SettingsAgentExtension[];
+  hooks: readonly SettingsAgentHook[];
   configuration: readonly SettingsConfigurationDescriptor[];
   settings: readonly (SettingsContribution & { owner: string })[];
   clientConfig: Readonly<Record<string, unknown>> | undefined;
@@ -77,8 +77,6 @@ export interface ContributionSource {
 }
 
 export const toolKindLabel = (kind: SettingsTool["kind"]): string => {
-  if (kind === "agent-builtin") return "Agent Builtin";
-  if (kind === "agent-extension") return "Agent-Extension";
   if (kind === "ragents") return "RAgents";
   return "Plugin";
 };
@@ -105,7 +103,7 @@ export const groupContributions = (
   const activeIds = new Set(source.activePlugins.map((plugin) => plugin.id));
   const webPlugins = new Map(source.plugins.map((plugin) => [plugin.id, plugin]));
   const serverPlugins = new Map(settings.plugins.map((plugin) => [plugin.id, plugin]));
-  const extensions = settings.agentExtensions.filter((extension) => extension.kind === "plugin");
+  const hooks = settings.agentHooks.filter((hook) => hook.kind === "plugin");
   const editableSettings = (source.settings ?? []).filter((contribution) => activeIds.has(contribution.owner));
   const owners = [
     ...settings.plugins.map((plugin) => plugin.id),
@@ -113,7 +111,7 @@ export const groupContributions = (
     ...ownersOf(settings.promptContributions),
     ...ownersOf(source.startEntries),
     ...ownersOf(settings.skills),
-    ...ownersOf(extensions),
+    ...ownersOf(hooks),
     ...activeIds,
   ];
   const ordered = [...new Set(owners)];
@@ -129,7 +127,7 @@ export const groupContributions = (
       prompts: settings.promptContributions.filter((contribution) => contribution.owner === id),
       startEntries: source.startEntries.filter((entry) => entry.owner === id),
       skills: settings.skills.filter((skill) => skill.owner === id),
-      extensions: extensions.filter((extension) => extension.owner === id),
+      hooks: hooks.filter((hook) => hook.owner === id),
       configuration: plugin?.configuration ?? [],
       settings: editableSettings.filter((contribution) => contribution.owner === id),
       clientConfig: plugin?.clientConfig,
@@ -168,8 +166,8 @@ export const filterGroup = (
     skills: kept("skills")
       ? group.skills.filter((skill) => matches([skill.id, skill.owner, ...skill.paths]))
       : [],
-    extensions: kept("extensions")
-      ? group.extensions.filter((extension) => matches([extension.id, extension.owner]))
+    hooks: kept("hooks")
+      ? group.hooks.filter((hook) => matches([hook.id, hook.owner]))
       : [],
     configuration,
     settings: kept("configuration")
@@ -185,7 +183,7 @@ export const countContributions = (group: PluginGroup): number =>
   + group.prompts.length
   + group.startEntries.length
   + group.skills.length
-  + group.extensions.length
+  + group.hooks.length
   + group.configuration.length
   + group.settings.length
   + (group.clientConfig === undefined ? 0 : 1)
@@ -231,12 +229,12 @@ const webModuleOf = (plugin: WebPlugin | undefined): PluginWebModule => {
 };
 
 const webContributionsOf = (plugin: WebPlugin): readonly WebContribution[] => [
-  listed("Arbeitsbereichs-Tabs", (plugin.workspaceTabs ?? []).map((tab) => `${tab.id} (${tab.label})`)),
-  flagged("Dynamische Arbeitsbereichs-Tabs", plugin.workspaceTabsFor !== undefined),
+  listed("Reiter der Leiste", (plugin.workspaceTabs ?? []).map((tab) => `${tab.id} (${tab.label})`)),
+  flagged("Dynamische Reiter der Leiste", plugin.workspaceTabsFor !== undefined),
   listed("Leitfäden", (plugin.guides ?? []).map((guide) => guide.id)),
   flagged("Branding", plugin.brand !== undefined),
-  flagged("Canvas", plugin.canvas !== undefined),
-  counted("Canvas-Elemente", (plugin.canvasElements ?? []).length),
+  flagged("Fläche", plugin.surface !== undefined),
+  counted("Flächenelemente", (plugin.surfaceElements ?? []).length),
   counted("Karten-Abschnitte", (plugin.cardSections ?? []).length),
   counted("Werkzeug-Darstellungen", (plugin.toolPresenters ?? []).length),
   counted("Entitäts-Darstellungen", (plugin.entityPresenters ?? []).length),
@@ -247,7 +245,7 @@ const webContributionsOf = (plugin: WebPlugin): readonly WebContribution[] => [
   counted("Attention-Beiträge", (plugin.attention ?? []).length),
   listed("Startoptionen", (plugin.startOptions ?? []).map((option) => option.id)),
   flagged("Chat-Darstellung", plugin.chatDisplayPolicy !== undefined),
-  flagged("Rückfragen-Beantworter", plugin.questionResponder !== undefined),
+  listed("Aktionsdarstellungen", (plugin.actionViews ?? []).map((view) => view.owner)),
   flagged("Session-Provider", plugin.SessionProvider !== undefined),
 ].filter((contribution): contribution is WebContribution => contribution !== undefined);
 

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

@@ -1,4 +1,4 @@
-import { coreContracts } from "@aicontainer/server/api/contracts";
+import { coreContracts } from "@ragents/host/api/contracts";
 import type { TitleModelSelection, TitleModelSettings } from "../../server/src/title-settings-contract";
 import { isRecord } from "./lib/guards";
 import { rpc } from "./rpc";

package/apps/web/src/toolLine.ts

@@ -1,4 +1,4 @@
-import type { Message, ToolInfo } from "./chat/types";
+import type { Message, ToolInfo } from "quassel/events";
 
 const SUMMARY_LIMIT = 140;
 

package/apps/web/src/ui/ListDetail.tsx

@@ -46,7 +46,7 @@ const paneClasses = "min-h-0 min-w-0 flex-auto overflow-auto overscroll-contain
 // Maßgeblich ist die Breite des Bausteins, nicht die des Fensters; CSS und Messung nutzen dieselbe Schwelle.
 const narrowWidth = 900;
 
-/** Controlled grouped selection with a detail surface and a return path on narrow surfaces. */
+/** Controlled grouped selection with a detail page and a return path on narrow screens. */
 export function ListDetail({ label, items, selectedId, onSelect, disabled = false, toolbar,
   detailHeader, children, detailFooter, emptyState, detailLabel = "Details", className }: ListDetailProps) {
   const prefix = useId();

package/apps/web/src/ui/dialog.tsx

@@ -5,20 +5,20 @@ import { XIcon } from "lucide-react"
 
 import { Button } from "./button"
 
-export type ModalScope = "page" | "run" | "workspace" | "canvas"
+export type ModalScope = "page" | "run" | "workspace" | "surface"
 export type DialogSize = "small" | "medium" | "large" | "wide" | "full"
 
 export const RunModalContext = React.createContext<HTMLElement | null>(null)
 export const WorkspaceModalContext = React.createContext<HTMLElement | null>(null)
-export const CanvasModalContext = React.createContext<HTMLElement | null>(null)
+export const SurfaceModalContext = React.createContext<HTMLElement | null>(null)
 
 const inertCounts = new Map<HTMLElement, { count: number; previous: boolean }>()
 
 export function useModalContainer(scope: ModalScope): HTMLElement | null {
   const run = React.useContext(RunModalContext)
   const workspace = React.useContext(WorkspaceModalContext)
-  const canvas = React.useContext(CanvasModalContext)
-  return scope === "canvas" ? canvas : scope === "workspace" ? workspace : scope === "run" ? run : null
+  const surface = React.useContext(SurfaceModalContext)
+  return scope === "surface" ? surface : scope === "workspace" ? workspace : scope === "run" ? run : null
 }
 
 /** Only the siblings inside the scoped container go inert; toolbars outside stay usable. */
@@ -68,7 +68,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-backdrop duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}

package/apps/web/src/ui/frame.css

@@ -2,3 +2,4 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "./theme.css";
+@import "./quassel.css";

package/apps/web/src/ui/index.ts

@@ -38,6 +38,11 @@ export { Toggle, toggleVariants } from "./toggle";
 export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
 export { ListDetail, type ListDetailItem, type ListDetailProps } from "./ListDetail";
+export { longTime, shortTime } from "./relative-time";
 export { SectionLabel } from "./SectionLabel";
+export { StartupNotice, type StartupNoticeState } from "./startup-notice";
+export { ConnectionStateIcon, connectionStateTone, RunStateIcon, runStateTone } from "./state-icon";
+export { StopButton, StopGlyph } from "./stop-button";
+export { connectionStateWord, runStateWord, type ConnectionStateName, type RunStateName } from "./state-vocabulary";
 export { SvgEdge, type SvgEdgeProps } from "./SvgEdge";
 export { useFileInput } from "./useFileInput";

package/apps/web/src/ui/popover.tsx

@@ -15,7 +15,7 @@ function PopoverContent({
   align = "center",
   alignOffset = 0,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 8,
   anchor,
   collisionPadding,
   keepMounted,
@@ -33,7 +33,7 @@ function PopoverContent({
     <PopoverPrimitive.Portal keepMounted={keepMounted}>
       {dim && (
         <PopoverPrimitive.Backdrop
-          className="fixed inset-0 z-[105] bg-black/25 transition-opacity duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 dark:bg-black/45"
+          className="fixed inset-0 z-[105] bg-backdrop transition-opacity duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"
           data-slot="popover-backdrop"
         />
       )}

package/apps/web/src/ui/quassel.css

@@ -0,0 +1,41 @@
+/* The chat building blocks come from quassel; its variables read the host's tokens, so theme.css stays the one source. */
+@import "quassel/chat.css";
+
+:root {
+    --qsl-color-scheme: light;
+    --qsl-font: --theme(--font-sans);
+    --qsl-mono: --theme(--font-mono);
+    --qsl-radius: var(--radius);
+    --qsl-background: var(--background);
+    --qsl-foreground: var(--foreground);
+    --qsl-card: var(--card);
+    --qsl-primary: var(--primary);
+    --qsl-primary-foreground: var(--primary-foreground);
+    --qsl-secondary: var(--secondary);
+    --qsl-muted-foreground: var(--muted-foreground);
+    --qsl-destructive: var(--destructive);
+    --qsl-success: var(--success);
+    --qsl-border: var(--border);
+    --qsl-border-soft: var(--border-soft);
+    --qsl-border-strong: var(--border-strong);
+    --qsl-glass-edge: var(--glass-edge);
+    --qsl-bar-shadow: var(--bar-shadow);
+    --qsl-pop-shadow: var(--pop-shadow);
+    --qsl-card-shadow: var(--card-shadow);
+    --qsl-spacing: --theme(--spacing);
+    --qsl-text-xs: --theme(--text-xs);
+    --qsl-text-xs--line-height: --theme(--text-xs--line-height);
+    --qsl-text-sm: --theme(--text-sm);
+    --qsl-text-sm--line-height: --theme(--text-sm--line-height);
+    --qsl-text-base: --theme(--text-base);
+    --qsl-text-base--line-height: --theme(--text-base--line-height);
+    --qsl-text-lg: --theme(--text-lg);
+    --qsl-text-lg--line-height: --theme(--text-lg--line-height);
+    --qsl-text-xl: --theme(--text-xl);
+    --qsl-text-xl--line-height: --theme(--text-xl--line-height);
+    --qsl-radius-panel: --theme(--radius-panel);
+}
+
+:root[data-theme="dark"] {
+    --qsl-color-scheme: dark;
+}

package/apps/web/src/ui/relative-time.ts

@@ -0,0 +1,36 @@
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+
+const date = (at: number, year: boolean): string =>
+  new Date(at).toLocaleDateString("de-DE", year ? { day: "2-digit", month: "2-digit", year: "numeric" } : { day: "2-digit", month: "2-digit" });
+
+/** Die Zeit in der Liste: jetzt, 5 min, 3 h, 2 d, ab sieben Tagen das Datum. Ohne "vor", ohne Sonderfall für gestern. */
+export const shortTime = (at: number, now: number = Date.now()): string => {
+  const passed = now - at;
+  if (passed < MINUTE) return "jetzt";
+  if (passed < HOUR) return `${Math.floor(passed / MINUTE)} min`;
+  if (passed < DAY) return `${Math.floor(passed / HOUR)} h`;
+  if (passed < WEEK) return `${Math.floor(passed / DAY)} d`;
+  return date(at, false);
+};
+
+/** Dieselbe Zeit ausgeschrieben; sie steht nur im title der kompakten Zeit. */
+export const longTime = (at: number, now: number = Date.now()): string => {
+  const passed = now - at;
+  if (passed < MINUTE) return "gerade eben";
+  if (passed < HOUR) {
+    const minutes = Math.floor(passed / MINUTE);
+    return minutes === 1 ? "vor 1 Minute" : `vor ${minutes} Minuten`;
+  }
+  if (passed < DAY) {
+    const hours = Math.floor(passed / HOUR);
+    return hours === 1 ? "vor 1 Stunde" : `vor ${hours} Stunden`;
+  }
+  if (passed < WEEK) {
+    const days = Math.floor(passed / DAY);
+    return days === 1 ? "vor 1 Tag" : `vor ${days} Tagen`;
+  }
+  return date(at, true);
+};

package/apps/web/src/ui/startup-notice.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { cn } from "cn";
+
+/** Was eine Fläche zeigt, solange sie noch keinen Inhalt hat: laufende Arbeit, einen Fehler oder einen ruhigen Hinweis. */
+export interface StartupNoticeState {
+  kind: "working" | "error" | "waiting" | "stopped";
+  title: string;
+  detail: string;
+}
+
+/** Der eine Ladezustand für Fläche, Run-Panel und dessen Start: Titel, bei laufender Arbeit ein Fortschrittsbalken, darunter was gerade geschieht. */
+export function StartupNotice({ children, className, state }: { children?: ReactNode; className?: string; state: StartupNoticeState }) {
+  return <div aria-live="polite" className={cn("w-[min(360px,100%)] text-center text-foreground", className)} data-startup={state.kind}
+    role={state.kind === "error" ? "alert" : "status"}>
+    <strong className={state.kind === "error" ? "text-lg font-semibold text-destructive" : "text-lg font-semibold"}>{state.title}</strong>
+    {state.kind === "working" && <div aria-label={state.title} className="mx-auto mt-5 h-[5px] overflow-hidden rounded-[5px] bg-border" role="progressbar">
+      <span className="block h-full w-[35%] rounded-[inherit] bg-primary animate-progress-sweep motion-reduce:animate-none motion-reduce:mx-auto" />
+    </div>}
+    <p className="pointer-events-auto mt-3.5 max-h-[30vh] overflow-auto text-[0.82rem] leading-[1.6] text-muted-foreground [overflow-wrap:anywhere]">{state.detail}</p>
+    {children && <div className="pointer-events-auto mt-4 flex flex-wrap justify-center gap-2">{children}</div>}
+  </div>;
+}

package/apps/web/src/ui/state-icon.tsx

@@ -0,0 +1,60 @@
+import {
+  CircleAlertIcon, CircleCheckIcon, CircleEllipsisIcon, CircleIcon, CirclePlayIcon, CircleSlashIcon, CircleXIcon, HourglassIcon, LockIcon,
+} from "lucide-react";
+import type { ComponentType } from "react";
+import { cn } from "cn";
+import { connectionStateWord, runStateWord, type ConnectionStateName, type RunStateName } from "./state-vocabulary";
+
+interface Mark {
+  readonly Icon: ComponentType<{ className?: string; fill?: string }>;
+  readonly tone: string;
+  readonly filled?: boolean;
+}
+
+/** Grün läuft, blau bewegt sich, gelb wartet auf dich, rot ist kaputt, grau ruht, gedämpft ist vorbei; kein Zustand trägt je die Stopp-Glyphe (Quadrat). */
+const RUN_MARKS: Record<RunStateName, Mark> = {
+  running: { Icon: CirclePlayIcon, tone: "text-success" },
+  waiting: { Icon: CircleEllipsisIcon, tone: "text-warning" },
+  idle: { Icon: CircleIcon, tone: "text-muted-foreground" },
+  ended: { Icon: CircleCheckIcon, tone: "text-muted-foreground opacity-70" },
+  failed: { Icon: CircleXIcon, tone: "text-destructive" },
+  cancelled: { Icon: CircleSlashIcon, tone: "text-muted-foreground opacity-70" },
+};
+
+const CONNECTION_MARKS: Record<ConnectionStateName, Mark> = {
+  connected: { Icon: CircleIcon, tone: "text-success", filled: true },
+  ready: { Icon: CircleIcon, tone: "text-success", filled: true },
+  starting: { Icon: HourglassIcon, tone: "text-info" },
+  "login-required": { Icon: LockIcon, tone: "text-warning" },
+  unreachable: { Icon: CircleSlashIcon, tone: "text-destructive" },
+  stopped: { Icon: CircleIcon, tone: "text-muted-foreground" },
+  failed: { Icon: CircleAlertIcon, tone: "text-destructive" },
+  forbidden: { Icon: LockIcon, tone: "text-destructive" },
+};
+
+export const runStateTone = (state: RunStateName): string => RUN_MARKS[state].tone;
+
+export const connectionStateTone = (state: ConnectionStateName): string => CONNECTION_MARKS[state].tone;
+
+const markClass = "inline-flex flex-none items-center gap-1";
+
+export function RunStateIcon({ state, open = 0, className }: { state: RunStateName; open?: number; className?: string }) {
+  const mark = RUN_MARKS[state];
+  const word = runStateWord(state, open);
+  const Icon = mark.Icon;
+  return <span className={cn(markClass, mark.tone, className)} title={word}>
+    <Icon className="size-3.5" />
+    {state === "waiting" && open > 0 && <span aria-hidden className="font-mono text-[0.62rem] font-semibold leading-none">{open}</span>}
+    <span className="sr-only">{word}</span>
+  </span>;
+}
+
+export function ConnectionStateIcon({ state, className }: { state: ConnectionStateName; className?: string }) {
+  const mark = CONNECTION_MARKS[state];
+  const word = connectionStateWord(state);
+  const Icon = mark.Icon;
+  return <span className={cn(markClass, mark.tone, className)} title={word}>
+    <Icon className="size-3.5" {...(mark.filled ? { fill: "currentColor" } : {})} />
+    <span className="sr-only">{word}</span>
+  </span>;
+}

package/apps/web/src/ui/state-vocabulary.ts

@@ -0,0 +1,31 @@
+/** Das Vokabular aller Seiten: je Zustand genau ein Wort, das im Panel nur als title erscheint. */
+export type RunStateName = "running" | "waiting" | "idle" | "ended" | "failed" | "cancelled";
+
+export type ConnectionStateName =
+  | "connected" | "ready" | "starting" | "login-required" | "unreachable" | "stopped" | "failed" | "forbidden";
+
+const RUN_WORDS: Record<RunStateName, string> = {
+  running: "läuft",
+  waiting: "wartet auf Eingabe",
+  idle: "ruht",
+  ended: "beendet",
+  failed: "fehlgeschlagen",
+  cancelled: "abgebrochen",
+};
+
+const CONNECTION_WORDS: Record<ConnectionStateName, string> = {
+  connected: "verbunden",
+  ready: "bereit",
+  starting: "startet",
+  "login-required": "Anmeldung nötig",
+  unreachable: "nicht erreichbar",
+  stopped: "gestoppt",
+  failed: "gescheitert",
+  forbidden: "kein Zugriff",
+};
+
+/** Wartet ein Run, nennt das Wort die Zahl offener Eingaben; ein Werkzeugname steht nie im Zustand. */
+export const runStateWord = (state: RunStateName, open = 0): string =>
+  state === "waiting" && open > 0 ? `${RUN_WORDS.waiting} (${open})` : RUN_WORDS[state];
+
+export const connectionStateWord = (state: ConnectionStateName): string => CONNECTION_WORDS[state];

package/apps/web/src/ui/stop-button.tsx

@@ -0,0 +1,22 @@
+import { SquareIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { cn } from "cn";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+
+/** Die eine Stopp-Glyphe: ein gefülltes rotes Quadrat; ein Zustandssymbol trägt sie nie. */
+export function StopGlyph({ className, ...props }: Omit<ComponentProps<typeof SquareIcon>, "fill">) {
+  return <SquareIcon aria-hidden className={cn("text-destructive", className)} fill="currentColor" {...props} />;
+}
+
+const stopButtonClass = "text-destructive hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20";
+
+/** Jeder Stopp-Knopf sieht gleich aus: die Glyphe als Symbol, das Wort im Tooltip, rot in Ruhe und beim Hover. */
+export function StopButton({ label, busy = false, className, title, ...props }: Omit<ComponentProps<typeof Button>, "children" | "variant"> & {
+  label: string;
+  busy?: boolean;
+}) {
+  return <Button aria-busy={busy || undefined} aria-label={label} className={cn(stopButtonClass, className)} title={title ?? label} variant="ghost" {...props}>
+    {busy ? <Spinner /> : <StopGlyph />}
+  </Button>;
+}

package/apps/web/src/ui/tailwind.css

@@ -1,9 +1,8 @@
-/* Host entry: full Tailwind including preflight; the theme carries all tokens, the components carry their classes. */
+/* Host entry: full Tailwind including preflight; the server compiles it for the host web and its bundles, the extension panel builds it with Vite. */
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "./theme.css";
-@source "../../../../plugins/*/web/**/*";
-@source "../../../../plugins/*/client-ui/**/*";
+@import "./quassel.css";
 
 @layer base {
     html, body, #root {