@schlenkr/ragents 0.1.0

package/apps/web/src/DiffCode.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from "react";
+import { Diff, markEdits, parseDiff, tokenize, type FileData, type HunkTokens } from "react-diff-view";
+import { highlightTokens, resolveLanguage } from "./highlighting";
+import { Empty } from "./ui";
+
+const diffVariables = [
+  "[--diff-font-family:var(--font-mono)]",
+  "[--diff-background-color:transparent]",
+  "[--diff-text-color:var(--foreground)]",
+  "[--diff-gutter-insert-background-color:color-mix(in_srgb,var(--success)_34%,transparent)]",
+  "[--diff-gutter-insert-text-color:var(--success)]",
+  "[--diff-gutter-delete-background-color:color-mix(in_srgb,var(--destructive)_30%,transparent)]",
+  "[--diff-gutter-delete-text-color:var(--destructive)]",
+  "[--diff-code-insert-background-color:color-mix(in_srgb,var(--success)_18%,transparent)]",
+  "[--diff-code-delete-background-color:color-mix(in_srgb,var(--destructive)_16%,transparent)]",
+  "[--diff-code-insert-edit-background-color:color-mix(in_srgb,var(--success)_46%,transparent)]",
+  "[--diff-code-delete-edit-background-color:color-mix(in_srgb,var(--destructive)_42%,transparent)]",
+  "[--diff-selection-background-color:color-mix(in_srgb,var(--primary)_25%,transparent)]",
+].join(" ");
+
+interface DiffCodeProps {
+  content: string;
+  emptyText?: string;
+  language?: string;
+  path?: string;
+}
+
+export function DiffCode({ content, emptyText = "Keine textuelle Differenz verfügbar.", language, path }: DiffCodeProps) {
+  const files = useMemo(() => {
+    try {
+      return parseDiff(withHeader(content, path), { nearbySequences: "zip" });
+    } catch {
+      return [];
+    }
+  }, [content, path]);
+
+  if (files.length === 0 || files.every((file) => file.hunks.length === 0)) {
+    return content
+      ? <pre className="m-0 min-h-full min-w-max bg-transparent px-3 py-2.5 font-mono text-[11px] leading-[1.5] text-foreground [tab-size:4]">{content}</pre>
+      : <Empty className="min-h-[100px] p-5 text-xs text-muted-foreground">{emptyText}</Empty>;
+  }
+
+  return (
+    <div className={diffVariables}>
+      {files.map((file, index) => (
+        <DiffFile file={file} key={`${file.oldPath}-${file.newPath}-${index}`} language={language} path={path} showName={files.length > 1} />
+      ))}
+    </div>
+  );
+}
+
+interface DiffFileProps {
+  file: FileData;
+  language: string | undefined;
+  path: string | undefined;
+  showName: boolean;
+}
+
+function DiffFile({ file, language, path, showName }: DiffFileProps) {
+  const filePath = path ?? file.newPath ?? file.oldPath ?? "";
+  const tokens = useMemo(() => tokensFor(file, filePath, language), [file, filePath, language]);
+  return (
+    <section>
+      {showName && <div className="sticky top-0 z-[1] border-b border-border-soft bg-secondary px-2 py-1 font-mono text-[0.65rem] text-muted-foreground">
+        {file.newPath || file.oldPath}
+      </div>}
+      <Diff diffType={file.type} hunks={file.hunks} tokens={tokens} viewType="unified" />
+    </section>
+  );
+}
+
+const withHeader = (content: string, path: string | undefined) =>
+  /^(diff --git|--- )/m.test(content) || !content.startsWith("@@")
+    ? content
+    : `--- a/${path ?? "datei"}\n+++ b/${path ?? "datei"}\n${content}`;
+
+const tokensFor = (file: FileData, path: string, language: string | undefined): HunkTokens | undefined => {
+  const resolved = resolveLanguage(path, language);
+  try {
+    return tokenize(file.hunks, {
+      enhancers: [markEdits(file.hunks, { type: "block" })],
+      highlight: true,
+      language: resolved ?? "plaintext",
+      refractor: { highlight: (text: string) => highlightTokens(text, path, resolved ?? "plaintext") },
+    });
+  } catch {
+    return undefined;
+  }
+};

package/apps/web/src/HelpDialog.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from "react";
+import { XIcon } from "lucide-react";
+import { Button, Dialog, DialogContent, DialogTitle } from "./ui";
+import { helpSampleRequest } from "./help-samples";
+
+export function HelpDialog({ onClose, sampleEntries, onStartSample }: {
+  onClose: () => void;
+  sampleEntries: readonly string[];
+  onStartSample: (entry: string) => void;
+}) {
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const cleanupRef = useRef<(() => void) | undefined>(undefined);
+  const launching = useRef(false);
+  useEffect(() => () => cleanupRef.current?.(), []);
+  useEffect(() => {
+    const frame = frameRef.current?.contentWindow;
+    if (!frame) return;
+    const announce = () => frame.postMessage({ type: "ragents:help-context", canStartSamples: sampleEntries.length > 0,
+      entries: sampleEntries }, window.location.origin);
+    const receive = (event: MessageEvent) => {
+      const request = helpSampleRequest(event, frame, window.location.origin, sampleEntries);
+      if (request?.type === "ready") announce();
+      if (request?.type === "start" && !launching.current) {
+        launching.current = true;
+        onStartSample(request.entry);
+      }
+    };
+    window.addEventListener("message", receive);
+    announce();
+    return () => window.removeEventListener("message", receive);
+  }, [onStartSample, sampleEntries]);
+
+  const connectFrame = () => {
+    cleanupRef.current?.();
+    const frame = frameRef.current;
+    const document = frame?.contentDocument;
+    const view = document?.defaultView;
+    if (!frame || !document || !view) return;
+    document.documentElement.dataset.helpEmbedded = "true";
+
+    for (const link of document.querySelectorAll<HTMLAnchorElement>("a[href]")) {
+      if (new URL(link.href).origin !== window.location.origin) {
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+      }
+    }
+    const handleKey = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      } else if (event.key === "Tab") {
+        const elements = [...document.querySelectorAll<HTMLElement>(
+          "a[href], button, input, select, textarea, summary, [tabindex]",
+        )].filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
+        const boundary = event.shiftKey ? elements[0] : elements.at(-1);
+        if (!elements.length || document.activeElement === boundary || document.activeElement === document.body) {
+          if (!event.shiftKey && document.activeElement === document.body && elements.length) return;
+          event.preventDefault();
+          closeRef.current?.focus();
+        }
+      }
+    };
+    view.addEventListener("keydown", handleKey);
+    cleanupRef.current = () => view.removeEventListener("keydown", handleKey);
+  };
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
+    <DialogContent className="gap-0 p-0" initialFocus={closeRef} scope="page" showCloseButton={false} size="full">
+      <DialogTitle className="sr-only">Hilfe</DialogTitle>
+      <Button aria-label="Hilfe schließen" className="absolute top-3 right-4.5 z-1 rounded-full" onClick={onClose} ref={closeRef} size="icon" variant="outline">
+        <XIcon />
+      </Button>
+      <iframe
+        className="min-h-0 w-full min-w-0 flex-[1_1_0] bg-background"
+        onLoad={connectFrame}
+        ref={frameRef}
+        src={`${import.meta.env.BASE_URL}help/index.html`}
+        tabIndex={0}
+        title="RAgents: Homepage und Dokumentation"
+      />
+    </DialogContent>
+    </Dialog>
+  );
+}

package/apps/web/src/MaterialSettings.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useId, useState } from "react";
+import { useAccess } from "./AccessContext";
+import { DEFAULT_MATERIAL_SETTINGS, MATERIAL_SETTINGS_LIMITS, resetMaterialSettings, saveMaterialSettings, useMaterialSettings } from "./material-settings";
+import { Button, Input } from "./ui";
+
+const noteClasses = "text-sm leading-[1.6] text-muted-foreground";
+
+export function MaterialSettings() {
+  const { settings, error } = useMaterialSettings();
+  const writable = useAccess().can("settings.write");
+  const prefix = useId();
+  const [steps, setSteps] = useState(String(settings.steps));
+  useEffect(() => { setSteps(String(settings.steps)); }, [settings]);
+  const valid = (text: string, min: number, max: number) => text.trim() !== "" && Number.isInteger(Number(text)) && Number(text) >= min && Number(text) <= max;
+  const stepsValid = valid(steps, MATERIAL_SETTINGS_LIMITS.minSteps, MATERIAL_SETTINGS_LIMITS.maxSteps);
+  const changeSteps = (value: string) => {
+    if (!writable) return;
+    setSteps(value);
+    if (valid(value, MATERIAL_SETTINGS_LIMITS.minSteps, MATERIAL_SETTINGS_LIMITS.maxSteps)) saveMaterialSettings({ ...settings, steps: Number(value) });
+  };
+  return <div className="flex min-w-0 max-w-[680px] flex-col gap-5">
+    <p className={noteClasses}>Schichtwerk mit matten Flächen und gestapelter Tiefe. Änderungen gelten sofort für alle Runs und werden in diesem Browser gespeichert.</p>
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-semibold text-foreground" id={`${prefix}-steps-label`} htmlFor={`${prefix}-steps`}>Tiefenstufen</label>
+      <div className="flex min-w-0 items-center gap-5">
+        <input className="w-0 min-w-0 flex-1 accent-primary" aria-labelledby={`${prefix}-steps-label`} disabled={!writable} type="range" min={MATERIAL_SETTINGS_LIMITS.minSteps} max={MATERIAL_SETTINGS_LIMITS.maxSteps} step="1" value={settings.steps} onChange={(event) => changeSteps(event.target.value)} />
+        <Input className="w-[84px] flex-none" id={`${prefix}-steps`} aria-invalid={!stepsValid} aria-describedby={`${prefix}-steps-note`} disabled={!writable} type="number" min={MATERIAL_SETTINGS_LIMITS.minSteps} max={MATERIAL_SETTINGS_LIMITS.maxSteps} step="1" value={steps} onChange={(event) => changeSteps(event.target.value)} />
+      </div>
+      <p id={`${prefix}-steps-note`} className={stepsValid ? noteClasses : "text-sm leading-[1.6] text-destructive"}>{stepsValid ? `0 ist flach, bis zu 5 gleich tiefe Stufen. Standard: ${DEFAULT_MATERIAL_SETTINGS.steps}.` : "Bitte eine ganze Zahl von 0 bis 5 eingeben."}</p>
+    </div>
+    <div><Button variant="outline" disabled={!writable} onClick={() => {
+      if (!writable) return;
+      if (resetMaterialSettings()) {
+        setSteps(String(DEFAULT_MATERIAL_SETTINGS.steps));
+      }
+    }}>Auf Standard zurücksetzen</Button></div>
+    {!writable && <p className={noteClasses}>Die Materialeinstellungen sind mit deinen Rechten nur lesbar.</p>}
+    {error && <p className="text-sm leading-[1.6] text-destructive" role="alert">{error}</p>}
+  </div>;
+}

package/apps/web/src/Overview.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
+import { Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui";
+import { Modal } from "./ui/modal";
+import type { SessionInfo } from "./api";
+import type { OverviewPanelContext, OverviewPanelContribution, PluginRegistry } from "./PluginRegistry";
+import type { RunReadRevisions } from "./run-read-state";
+import { SessionList } from "./SessionList";
+
+/** The run list inside the overview; deletion is the host's job, the section only shows its outcome. */
+export interface RunsSectionProps {
+  sessions: SessionInfo[];
+  seenRevisions?: RunReadRevisions;
+  activeId: string | undefined;
+  registry: PluginRegistry;
+  unreachable: boolean;
+  canCreate: boolean;
+  canDelete: boolean;
+  onOpen: (id: string) => void;
+  onCreate: () => void;
+  onDelete: (ids: readonly string[]) => Promise<void>;
+}
+
+interface OverviewProps {
+  open: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  registry: PluginRegistry;
+  panels: readonly OverviewPanelContribution[];
+  onBusy: (id: string, busy: boolean) => void;
+  runs?: RunsSectionProps;
+}
+
+const FOCUSABLE_SELECTOR =
+  "button:not([disabled]), a[href], input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
+
+const overviewSurfaceClass = "pointer-events-auto shadow-pop";
+
+/** The corner button opens the run list and contributions placed in the overview. */
+export function Overview({ onBusy, onClose, onOpen, open, panels, registry, runs }: OverviewProps) {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => {
+      const surface = surfaceRef.current;
+      if (!surface || surface.contains(document.activeElement)) return;
+      surface.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  return (
+    <Modal className="pointer-events-none flex h-[min(900px,100%)] w-[min(1440px,100%)] flex-col rounded-none bg-transparent p-0 ring-0" keepMounted onClose={onClose} open={open} scope="workspace" size="full">
+      <DialogTitle className="sr-only">Übersicht</DialogTitle>
+      <div className="flex min-h-0 min-w-0 flex-1 gap-4 max-[900px]:flex-col" id="app-overview" ref={surfaceRef}>
+      {panels.map(({ id, Panel }) => (
+        <OverviewPanelHost id={id} key={id} onBusy={onBusy} onClose={onClose} onOpen={onOpen} open={open} Panel={Panel} registry={registry} />
+      ))}
+      {runs && <RunsSection {...runs} />}
+      </div>
+    </Modal>
+  );
+}
+
+function OverviewPanelHost({ id, onBusy, onClose, onOpen, open, Panel, registry }: {
+  id: string;
+  onBusy: (id: string, busy: boolean) => void;
+  open: boolean;
+  Panel: ComponentType<OverviewPanelContext>;
+  onOpen: () => void;
+  onClose: () => void;
+  registry: PluginRegistry;
+}) {
+  const reportBusy = useCallback((busy: boolean) => onBusy(id, busy), [id, onBusy]);
+  useEffect(() => () => onBusy(id, false), [id, onBusy]);
+  return (
+    <Card className={`${overviewSurfaceClass} min-h-0 min-w-0 flex-1 gap-0 p-0`}>
+      <Panel onBusy={reportBusy} onClose={onClose} onOpen={onOpen} open={open} registry={registry} />
+    </Card>
+  );
+}
+
+function RunsSection({ activeId, canCreate, canDelete, onCreate, onDelete, onOpen, registry, sessions, seenRevisions, unreachable }: RunsSectionProps) {
+  const [error, setError] = useState<string>();
+  const [selectMode, setSelectMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(() => new Set());
+  const [confirmBulkDelete, setConfirmBulkDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const exitSelectMode = () => {
+    setSelectMode(false);
+    setSelectedIds(new Set());
+  };
+
+  const toggleSelected = (id: string) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (!next.delete(id)) next.add(id);
+      return next;
+    });
+  };
+
+  const remove = async (ids: readonly string[]) => {
+    setDeleting(true);
+    setError(undefined);
+    try {
+      await onDelete(ids);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const removeSelected = async () => {
+    await remove(sessions.filter((session) => selectedIds.has(session.id)).map((session) => session.id));
+    setConfirmBulkDelete(false);
+    exitSelectMode();
+  };
+
+  return (
+    <section aria-labelledby="overview-runs-title" className="flex min-h-0 min-w-0 flex-1 flex-col max-[900px]:flex-[1_1_50%]">
+      <Card className={`${overviewSurfaceClass} min-h-0 flex-1 gap-workspace-inset overflow-y-auto overscroll-contain pt-workspace-inset pr-6 pb-6 pl-6 max-[900px]:px-3 max-[900px]:pt-3.5 max-[900px]:pb-4`}>
+        <header className="flex flex-wrap items-center gap-x-3.5 gap-y-2.5">
+          <h2 className="text-[0.95rem] font-semibold" id="overview-runs-title">
+            Runs <span className="ml-1 text-[0.8rem] font-medium tabular-nums text-muted-foreground">{sessions.length}</span>
+          </h2>
+          {unreachable && <span className="text-[0.72rem] font-medium text-destructive" role="alert">Server nicht erreichbar</span>}
+          {canDelete && sessions.length > 0 && (
+            <div className="ml-auto flex flex-wrap items-center gap-1">
+              {selectMode
+                ? (
+                  <>
+                    <Button onClick={() => setSelectedIds(new Set(sessions.map((session) => session.id)))} size="sm" variant="ghost">
+                      Alle
+                    </Button>
+                    <Button onClick={() => setSelectedIds(new Set())} size="sm" variant="ghost">
+                      Keine
+                    </Button>
+                    <Button
+                      className="ml-auto"
+                      disabled={selectedIds.size === 0 || deleting}
+                      onClick={() => setConfirmBulkDelete(true)}
+                      size="sm"
+                      variant="destructive"
+                    >
+                      Löschen ({selectedIds.size})
+                    </Button>
+                    <Button onClick={exitSelectMode} size="sm" variant="ghost">
+                      Fertig
+                    </Button>
+                  </>
+                )
+                : (
+                  <Button onClick={() => setSelectMode(true)} size="sm" variant="ghost">
+                    Auswählen
+                  </Button>
+                )}
+            </div>
+          )}
+        </header>
+        {error && <p className="text-[0.72rem] font-medium text-destructive" role="alert">{error}</p>}
+        <p className="mb-5.5 text-[0.75rem] text-muted-foreground">Nach letzter Aktivität im Run. Neue Aktivität ist seit Deinem letzten Ansehen hinzugekommen.</p>
+        <SessionList
+          seenRevisions={seenRevisions}
+          activeId={activeId}
+          onCreate={canCreate ? onCreate : undefined}
+          onDelete={canDelete ? (id) => void remove([id]) : undefined}
+          onSelect={onOpen}
+          onToggleSelected={toggleSelected}
+          registry={registry}
+          selectMode={selectMode}
+          selectedIds={selectedIds}
+          sessions={sessions}
+        />
+        {confirmBulkDelete && (
+          <Dialog open onOpenChange={(open) => { if (!open && !deleting) setConfirmBulkDelete(false); }}>
+            <DialogContent scope="page" showCloseButton={false} size="small">
+              <DialogHeader>
+                <DialogTitle>Runs löschen</DialogTitle>
+                <DialogDescription>
+                  {selectedIds.size === 1
+                    ? "Ein Run wird endgültig gelöscht."
+                    : `${selectedIds.size} Runs werden endgültig gelöscht.`}
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button disabled={deleting} onClick={() => setConfirmBulkDelete(false)} variant="outline">
+                  Abbrechen
+                </Button>
+                <Button disabled={deleting} onClick={() => void removeSelected()}>
+                  {deleting ? "Löscht ..." : `Löschen (${selectedIds.size})`}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        )}
+      </Card>
+    </section>
+  );
+}

package/apps/web/src/PluginActivation.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { coreContracts } from "@aicontainer/server/api/contracts";
+import { rpc } from "./rpc";
+import { activatePlugins, pluginBootstrapFrom, type PluginBootstrap } from "./plugin-bootstrap";
+import { webPluginLoaders } from "./plugin-discovery";
+import type { PluginRegistry } from "./PluginRegistry";
+
+export type { PluginBootstrap } from "./plugin-bootstrap";
+
+export type PluginActivationState =
+  | { status: "loading" }
+  | { status: "ready"; bootstrap: PluginBootstrap; registry: PluginRegistry }
+  | { status: "failed"; error: string };
+
+export function usePluginActivation(): PluginActivationState {
+  const [state, setState] = useState<PluginActivationState>({ status: "loading" });
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void activate(controller.signal)
+      .then((ready) => {
+        if (controller.signal.aborted) return;
+        setState(ready);
+      })
+      .catch((caught: unknown) => {
+        if (controller.signal.aborted) return;
+        setState({ status: "failed", error: caught instanceof Error ? caught.message : String(caught) });
+      });
+    return () => controller.abort();
+  }, []);
+
+  return state;
+}
+
+const activate = async (signal: AbortSignal): Promise<PluginActivationState> => {
+  const bootstrap = await loadPluginBootstrap(signal);
+  return { status: "ready", ...(await activatePlugins(bootstrap, webPluginLoaders)) };
+};
+
+const loadPluginBootstrap = async (signal: AbortSignal): Promise<PluginBootstrap> =>
+  pluginBootstrapFrom(await rpc.call(coreContracts.plugins.bootstrap, {}, { signal }));