@schlenkr/ragents 0.1.0

package/packages/workspace-executor/src/session-ident.ts

@@ -0,0 +1,37 @@
+import { readdir, readFile } from "node:fs/promises";
+
+export interface SessionIdent {
+  uid: number;
+  gid: number;
+  name: string;
+}
+
+const processes = async (uid: number): Promise<number[]> => {
+  const entries = await readdir("/proc", { withFileTypes: true });
+  const pids: number[] = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory() || !/^\d+$/.test(entry.name)) continue;
+    const status = await readFile(`/proc/${entry.name}/status`, "utf8").catch(() => "");
+    if (/^State:\s+Z/m.test(status)) continue;
+    const processUid = Number(/^Uid:\s+(\d+)/m.exec(status)?.[1]);
+    if (processUid === uid) pids.push(Number(entry.name));
+  }
+  return pids;
+};
+
+export const stopUidProcesses = async (uid: number): Promise<void> => {
+  for (let versuch = 0; versuch < 20; versuch++) {
+    const pids = await processes(uid);
+    if (pids.length === 0) return;
+    for (const pid of pids) {
+      try {
+        process.kill(pid, "SIGKILL");
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== "ESRCH") throw error;
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  const pids = await processes(uid);
+  if (pids.length > 0) throw new Error(`Prozesse mit UID ${uid} konnten nicht beendet werden: ${pids.join(", ")}`);
+};

package/packages/workspace-executor/src/shell-platform.ts

@@ -0,0 +1,11 @@
+const platformTexts: Partial<Record<NodeJS.Platform, string>> = {
+  darwin: "`bash` runs on macOS with the BSD userland: `grep` has no `-P` (use `grep -E` or `rg`), in-place `sed` needs an explicit backup suffix (`sed -i '' ...`), `date` uses `-v` instead of `-d`, `xargs` uses `-I{}` instead of `-i`, and other GNU-only flags are unavailable.",
+  linux: "`bash` runs on Linux with the GNU userland: `grep -P`, `sed -i` without suffix and the usual GNU flags work.",
+  win32: "`bash` runs on Windows through Git Bash, an MSYS userland with the GNU tools: `grep -P`, `sed -i` without suffix and the usual GNU flags work. The file system is the Windows one: absolute paths are `C:/project/...` or `/c/project/...`, both spellings reach the same file, and a path from another tool may use backslashes. Files often carry CRLF line endings, so anchor patterns with `\\r\\?$` and keep the line ending a file already has. Windows programs (`dotnet`, `git`, `node`) are on the `PATH` and take Windows paths, not `/c/...`.",
+};
+
+export const shellPlatformText = (platform: NodeJS.Platform = process.platform): string => {
+  const text = platformTexts[platform];
+  if (!text) throw new Error(`Für die Plattform ${platform} gibt es keine Shell-Beschreibung.`);
+  return `${text} A nonzero exit code, for example \`grep\` without a match, comes back as an ordinary result with the code at the end, not as a tool error; only start, timeout and abort problems are tool errors.`;
+};

package/packages/workspace-executor/src/tools.ts

@@ -0,0 +1,28 @@
+import { homedir } from "node:os";
+import path from "node:path";
+
+/** Unter Windows liegen die Daten in `%LOCALAPPDATA%\ragents`, sonst unter `~/.local/share/ragents`. */
+export const ragentsDataRoot = (
+  home = homedir(),
+  platform: NodeJS.Platform = process.platform,
+  environment: NodeJS.ProcessEnv = process.env,
+): string => {
+  if (platform !== "win32") return path.resolve(home, ".local/share/ragents");
+  const local = environment.LOCALAPPDATA;
+  if (!local) throw new Error("LOCALAPPDATA ist nicht gesetzt; unter Windows liegt der Datenordner in %LOCALAPPDATA%\\ragents.");
+  return path.join(local, "ragents");
+};
+
+/** Der Werkzeugordner eines Plugins: was seine Provisionierung auf diese Maschine legt. */
+export const pluginToolsDirectory = (dataDirectory: string, pluginId: string): string =>
+  path.join(dataDirectory, "tools", pluginId);
+
+/** Ein Arbeitsplatz hat kein Profil; seine Werkzeuge liegen in einem eigenen Datenordner neben denen der Profile. */
+export const workspaceDataDirectory = (home = homedir()): string => path.join(ragentsDataRoot(home), "workspace");
+
+/** Der Datenordner dieses Prozesses: DATA_DIR wie beim Server, sonst der des Arbeitsplatzes ohne Profil. */
+export const hostDataDirectory = (environment: NodeJS.ProcessEnv = process.env): string =>
+  path.resolve(environment.DATA_DIR ?? workspaceDataDirectory());
+
+export const hostToolFile = (pluginId: string, relative: string): string =>
+  path.join(pluginToolsDirectory(hostDataDirectory(), pluginId), ...relative.split("/"));

package/plugins/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@aicontainer/plugins",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./*": "./*"
+  }
+}

package/plugins/ragents.activity/server/index.ts

@@ -0,0 +1,9 @@
+import type { RAgentsPlugin } from "@aicontainer/ragents";
+import type { PluginModule } from "@aicontainer/server/plugin-support/plugin-module.js";
+
+const activityPlugin: RAgentsPlugin = {
+  manifest: { id: "ragents.activity" },
+  register: () => {},
+};
+
+export const plugin: PluginModule = { create: () => activityPlugin };

package/plugins/ragents.activity/web/ActivityHeader.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  activeActivity,
+  activitySourceFrom,
+  elapsedLabel,
+  type ActivityEntry,
+} from "./activity";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import type { SessionHeaderContext } from "@aicontainer/web/PluginRegistry";
+
+const kindLabels: Readonly<Record<ActivityEntry["kind"], string>> = {
+  tool: "Tool",
+  turn: "Turn",
+};
+
+const titleOf = (entry: ActivityEntry) =>
+  entry.kind === "tool" ? `Werkzeug läuft: ${entry.label}` : `Turn läuft: ${entry.label}`;
+
+export function ActivityHeader({ session }: SessionHeaderContext) {
+  const state = useMemo(
+    () => activeActivity(activitySourceFrom(session.runView)),
+    [session.runView],
+  );
+  const active = state.entries.length > 0;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!active) return;
+    setNow(Date.now());
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [active]);
+
+  if (!active) return null;
+
+  return (
+    <div aria-label="Was gerade läuft" className="flex min-w-0 flex-none items-stretch self-stretch" role="status">
+      {state.entries.map((entry) => {
+        const elapsed = elapsedLabel(entry.startedAt, now);
+        return (
+          <ToolbarItem className="w-45" data-kind={entry.kind} key={entry.id} title={titleOf(entry)}>
+            <i aria-hidden className="size-1.5 shrink-0 rounded-full bg-muted-foreground animate-fade-pulse motion-reduce:animate-none in-data-[kind=tool]:bg-primary" />
+            <ToolbarCopy className="flex-1">
+              <ToolbarLabel className="flex items-baseline gap-2">
+                <span>{kindLabels[entry.kind]}</span>
+                {elapsed && <small className="ml-auto whitespace-nowrap text-[inherit] tabular-nums">{elapsed}</small>}
+              </ToolbarLabel>
+              <ToolbarText>{entry.label}</ToolbarText>
+            </ToolbarCopy>
+          </ToolbarItem>
+        );
+      })}
+      {state.hidden > 0 && (
+        <ToolbarItem className="text-muted-foreground">+{state.hidden} weitere</ToolbarItem>
+      )}
+    </div>
+  );
+}

package/plugins/ragents.activity/web/activity.ts

@@ -0,0 +1,144 @@
+export const VISIBLE_ENTRIES = 3;
+
+export interface ActivityActor {
+  id: string;
+  displayName?: string;
+  handle?: string;
+}
+
+export interface ActivityTool {
+  id: string;
+  name: string;
+  status: string;
+  startedAt?: string;
+  finishedAt?: string | null;
+}
+
+export interface ActivityTurn {
+  id: string;
+  actorId: string;
+  status: string;
+  startedAt?: string;
+  finishedAt?: string | null;
+  toolCalls: readonly ActivityTool[];
+}
+
+export interface ActivitySource {
+  primaryActorId?: string;
+  actors: readonly ActivityActor[];
+  turns: readonly ActivityTurn[];
+}
+
+export interface ActivityEntry {
+  id: string;
+  kind: "tool" | "turn";
+  label: string;
+  startedAt: string | undefined;
+}
+
+export interface ActivityState {
+  entries: readonly ActivityEntry[];
+  hidden: number;
+}
+
+const emptySource: ActivitySource = { actors: [], turns: [] };
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const optionalText = (value: unknown): string | undefined =>
+  typeof value === "string" ? value : undefined;
+
+const actorFrom = (value: unknown): ActivityActor[] => {
+  if (!isRecord(value) || typeof value.id !== "string") return [];
+  return [{ id: value.id, displayName: optionalText(value.displayName), handle: optionalText(value.handle) }];
+};
+
+const toolFrom = (value: unknown): ActivityTool[] => {
+  if (!isRecord(value) || typeof value.id !== "string" || typeof value.name !== "string" || typeof value.status !== "string") return [];
+  return [{ id: value.id, name: value.name, status: value.status, startedAt: optionalText(value.startedAt), finishedAt: optionalText(value.finishedAt) ?? null }];
+};
+
+const turnFrom = (value: unknown): ActivityTurn[] => {
+  if (!isRecord(value) || typeof value.id !== "string" || typeof value.actorId !== "string") return [];
+  if (typeof value.status !== "string") return [];
+  return [{
+    id: value.id,
+    actorId: value.actorId,
+    status: value.status,
+    toolCalls: Array.isArray(value.toolCalls) ? value.toolCalls.flatMap(toolFrom) : [],
+    startedAt: optionalText(value.startedAt),
+    finishedAt: optionalText(value.finishedAt) ?? null,
+  }];
+};
+
+/** Liest Actors und Turns aus der Laufansicht; eine noch nicht geladene oder fremde Struktur ergibt nichts. */
+export const activitySourceFrom = (
+  runView: unknown,
+): ActivitySource => {
+  if (!isRecord(runView)) return emptySource;
+  const actors = Array.isArray(runView.actors) ? runView.actors.flatMap(actorFrom) : [];
+  const turns = Array.isArray(runView.turns) ? runView.turns.flatMap(turnFrom) : [];
+  return { actors, turns, primaryActorId: optionalText(runView.primaryActorId) };
+};
+
+const labelOf = (actors: readonly ActivityActor[], actorId: string): string => {
+  const actor = actors.find((candidate) => candidate.id === actorId);
+  return actor?.displayName || actor?.handle || actorId;
+};
+
+const startedMillis = (startedAt: string | undefined): number => {
+  if (startedAt === undefined) return Number.MAX_SAFE_INTEGER;
+  const parsed = Date.parse(startedAt);
+  return Number.isNaN(parsed) ? Number.MAX_SAFE_INTEGER : parsed;
+};
+
+const byStart = (left: ActivityEntry, right: ActivityEntry) =>
+  startedMillis(left.startedAt) - startedMillis(right.startedAt) || left.id.localeCompare(right.id);
+
+const runningToolCalls = (turn: ActivityTurn): readonly ActivityTool[] =>
+  turn.status === "running" && !turn.finishedAt
+    ? turn.toolCalls.filter((tool) => tool.status === "running" && !tool.finishedAt)
+    : [];
+
+const runningTools = (source: ActivitySource): ActivityEntry[] =>
+  source.turns.flatMap((turn) => runningToolCalls(turn).map((tool) => ({
+    id: `tool:${JSON.stringify([turn.id, tool.id])}`,
+    kind: "tool" as const,
+    label: turn.actorId === source.primaryActorId ? tool.name : `${labelOf(source.actors, turn.actorId)}: ${tool.name}`,
+    startedAt: tool.startedAt,
+  })));
+
+const runningTurns = (source: ActivitySource): ActivityEntry[] =>
+  source.turns.flatMap((turn) => {
+    if (turn.actorId === source.primaryActorId || turn.status !== "running" || turn.finishedAt || runningToolCalls(turn).length > 0) return [];
+    return [{
+      id: `turn:${turn.id}`,
+      kind: "turn" as const,
+      label: labelOf(source.actors, turn.actorId),
+      startedAt: turn.startedAt,
+    }];
+  });
+
+/** Der Ist-Zustand: offene Werkzeugaufrufe zuerst, dann laufende Turns, jeweils das Älteste voran. */
+export const activeActivity = (source: ActivitySource): ActivityState => {
+  const entries = [
+    ...runningTools(source).sort(byStart),
+    ...runningTurns(source).sort(byStart),
+  ];
+  return {
+    entries: entries.slice(0, VISIBLE_ENTRIES),
+    hidden: Math.max(0, entries.length - VISIBLE_ENTRIES),
+  };
+};
+
+export const elapsedLabel = (startedAt: string | undefined, now: number): string | undefined => {
+  if (startedAt === undefined) return undefined;
+  const started = Date.parse(startedAt);
+  if (Number.isNaN(started)) return undefined;
+  const seconds = Math.max(0, Math.floor((now - started) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}:${String(seconds % 60).padStart(2, "0")}`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+};

package/plugins/ragents.activity/web/index.tsx

@@ -0,0 +1,13 @@
+import { ActivityHeader } from "./ActivityHeader";
+import type { WebPlugin } from "@aicontainer/web/PluginRegistry";
+
+export const webPlugin: WebPlugin = {
+  id: "ragents.activity",
+  needsRunView: true,
+  sessionHeaders: [{
+    readRight: "runs.inspect",
+    id: "ragents.activity.live",
+    order: 100,
+    Header: ActivityHeader,
+  }],
+};

package/plugins/ragents.actor-programs/client-ui/DataTable.tsx

@@ -0,0 +1,100 @@
+import React, { useId, useRef, useState } from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { Button, Checkbox, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../apps/web/src/ui";
+import type { DataTableProps, TableAction, TableColumn, TableValue } from "./table-contracts";
+
+export type TableSort = { id: string; direction: "asc" | "desc" };
+const displayValue = (value: TableValue) => value === null || value === undefined ? "" : typeof value === "boolean" ? value ? "Ja" : "Nein" : String(value);
+
+export function tableRows<Row>(rows: readonly Row[], columns: readonly TableColumn<Row>[], query: string, sort?: TableSort): Row[] {
+  const needle = query.trim().toLocaleLowerCase("de-DE");
+  const filtered = rows.filter((row) => !needle || columns.some((column) => column.filterable !== false && displayValue(column.value(row)).toLocaleLowerCase("de-DE").includes(needle)));
+  const column = sort && columns.find((entry) => entry.id === sort.id && entry.sortable);
+  if (!column || !sort) return filtered;
+  return filtered.sort((left, right) => {
+    const a = column.value(left);
+    const b = column.value(right);
+    if (a === null || a === undefined) return b === null || b === undefined ? 0 : 1;
+    if (b === null || b === undefined) return -1;
+    const order = typeof a === "number" && typeof b === "number" ? a - b
+      : typeof a === "boolean" && typeof b === "boolean" ? Number(a) - Number(b)
+      : String(a).localeCompare(String(b), "de-DE", { numeric: true });
+    return sort.direction === "asc" ? order : -order;
+  });
+}
+
+export function DataTable<Row>(props: DataTableProps<Row>) {
+  const { title, rows, columns, rowKey, actions = [], filterable = false, loading = false, emptyText = "Keine Einträge." } = props;
+  const filterId = useId();
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<TableSort>();
+  const [pending, setPending] = useState<ReadonlySet<string>>(new Set());
+  const active = useRef(new Set<string>());
+  const [errors, setErrors] = useState<ReadonlyMap<string, string>>(new Map());
+  const visible = tableRows(rows, columns, filterable ? query : "", sort);
+  const selected = new Set(props.selectedKeys);
+  const selectable = props.onSelectionChange !== undefined;
+  const keys = rows.map(rowKey);
+  if (new Set(keys).size !== rows.length || keys.some((key) => !key.trim())) throw new Error("Tabellenzeilen benötigen eindeutige, nicht leere Schlüssel.");
+  if (columns.length === 0 || new Set(columns.map((column) => column.id)).size !== columns.length || columns.some((column) => !column.id.trim())) throw new Error("Eine Tabelle benötigt Spalten mit eindeutigen, nicht leeren IDs.");
+  if (new Set(actions.map((action) => action.id)).size !== actions.length || actions.some((action) => !action.id.trim())) throw new Error("Tabellenaktionen benötigen eindeutige, nicht leere IDs.");
+  const visibleKeys = visible.map(rowKey);
+  const allSelected = visibleKeys.length > 0 && visibleKeys.every((key) => selected.has(key));
+  const partiallySelected = !allSelected && visibleKeys.some((key) => selected.has(key));
+  const toggleVisible = () => {
+    const next = new Set(selected);
+    for (const key of visibleKeys) { if (allSelected) next.delete(key); else next.add(key); }
+    props.onSelectionChange?.([...next]);
+  };
+  const runAction = async (action: TableAction<Row>, row: Row, key: string) => {
+    if (loading || active.current.has(key) || action.disabled?.(row)) return;
+    active.current.add(key);
+    setPending(new Set(active.current));
+    setErrors((current) => { const next = new Map(current); next.delete(key); return next; });
+    try {
+      await action.onClick(row);
+    } catch (cause) {
+      setErrors((current) => new Map(current).set(key, cause instanceof Error ? cause.message : String(cause)));
+    } finally {
+      active.current.delete(key);
+      setPending(new Set(active.current));
+    }
+  };
+  return (
+    <section aria-label={title ?? "Datentabelle"} aria-busy={loading} className="flex min-w-0 flex-col gap-3">
+      {title && <h2 className="text-base font-semibold">{title}</h2>}
+      {filterable && <Input aria-label="Tabelle durchsuchen" id={filterId} onChange={(event) => setQuery(event.target.value)} placeholder="Tabelle durchsuchen" type="search" value={query} />}
+      {loading && <p className="text-sm text-muted-foreground" role="status">Wird geladen ...</p>}
+      <div aria-label={title ?? "Tabelleninhalt"} className="max-w-full overflow-auto" role="region" tabIndex={0}>
+        <Table>
+          <TableHeader><TableRow>
+            {selectable && <TableHead className="w-8"><Checkbox aria-label="Alle sichtbaren Zeilen auswählen" checked={allSelected} disabled={loading || visible.length === 0} indeterminate={partiallySelected} onCheckedChange={toggleVisible} /></TableHead>}
+            {columns.map((column) => <TableHead aria-sort={sort?.id === column.id ? sort.direction === "asc" ? "ascending" : "descending" : undefined} key={column.id}>
+              {column.sortable
+                ? <Button className="-ml-2 h-7 gap-1 px-2 font-medium" onClick={() => setSort((current) => current?.id === column.id && current.direction === "asc" ? { id: column.id, direction: "desc" } : { id: column.id, direction: "asc" })} size="sm" variant="ghost">
+                  {column.label}{sort?.id === column.id && (sort.direction === "asc" ? <ArrowUpIcon aria-hidden="true" /> : <ArrowDownIcon aria-hidden="true" />)}
+                </Button>
+                : column.label}
+            </TableHead>)}
+            {actions.length > 0 && <TableHead>Aktionen</TableHead>}
+          </TableRow></TableHeader>
+          <TableBody>
+            {visible.map((row) => {
+              const key = rowKey(row);
+              return <TableRow aria-selected={selectable ? selected.has(key) : undefined} data-state={selectable && selected.has(key) ? "selected" : undefined} key={key}>
+                {selectable && <TableCell><Checkbox aria-label={`Zeile ${key} auswählen`} checked={selected.has(key)} disabled={loading} onCheckedChange={() => { const next = new Set(selected); if (next.has(key)) next.delete(key); else next.add(key); props.onSelectionChange?.([...next]); }} /></TableCell>}
+                {columns.map((column) => <TableCell className="align-top break-words whitespace-normal" key={column.id}>{column.render ? column.render(row) : displayValue(column.value(row))}</TableCell>)}
+                {actions.length > 0 && <TableCell className="align-top">
+                  <div aria-busy={pending.has(key)} className="flex flex-wrap gap-1.5">{actions.map((action) => <Button disabled={loading || pending.has(key) || action.disabled?.(row)} key={action.id} onClick={() => void runAction(action, row, key)} size="sm" variant="outline">{action.label}</Button>)}</div>
+                  {pending.has(key) && <span className="text-xs text-muted-foreground" role="status">Wird ausgeführt ...</span>}
+                  {errors.has(key) && <p className="mt-1.5 text-sm text-destructive" role="alert">{errors.get(key)}</p>}
+                </TableCell>}
+              </TableRow>;
+            })}
+            {!loading && visible.length === 0 && <TableRow><TableCell className="text-muted-foreground" colSpan={columns.length + Number(selectable) + Number(actions.length > 0)}>{emptyText}</TableCell></TableRow>}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+}

package/plugins/ragents.actor-programs/client-ui/FilePicker.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { SourceCode } from "../../../apps/web/src/SourceCode";
+import { Button, cn, Label, useFileInput } from "../../../apps/web/src/ui";
+import type { FilePickerProps } from "./file-contracts";
+import { fileSelection } from "./file-selection";
+
+function FilePreview({ file }: { file: File }) {
+  const [preview, setPreview] = useState<{ file: File; url?: string; text?: string; error?: string }>();
+  useEffect(() => {
+    let active = true;
+    if (/^(image|video|audio)\//.test(file.type)) {
+      const url = URL.createObjectURL(file);
+      setPreview({ file, url });
+      return () => { URL.revokeObjectURL(url); };
+    }
+    if (/^(text\/|application\/(json|xml)$)/.test(file.type) || /\.(txt|md|csv|json|xml|log)$/i.test(file.name)) {
+      void file.slice(0, 100_000).text().then((text) => {
+        if (active) setPreview({ file, text: text + (file.size > 100_000 ? "\nVorschau auf 100.000 Bytes gekürzt." : "") });
+      }).catch((cause: unknown) => {
+        if (active) setPreview({ file, error: cause instanceof Error ? cause.message : String(cause) });
+      });
+    }
+    return () => { active = false; };
+  }, [file]);
+  if (preview?.file !== file) return null;
+  if (preview.error) return <p className="text-sm text-destructive" role="alert">Vorschau fehlgeschlagen: {preview.error}</p>;
+  if (preview.text !== undefined) return <div className="mt-3 max-h-56 overflow-auto rounded-md bg-muted"><SourceCode content={preview.text} path={file.name} /></div>;
+  if (!preview.url) return null;
+  if (file.type.startsWith("image/")) return <img alt={file.name} className="mt-3 block max-h-56 max-w-full rounded-md" src={preview.url} />;
+  if (file.type.startsWith("video/")) return <video aria-label={file.name} className="mt-3 block max-h-56 max-w-full rounded-md" controls preload="metadata" src={preview.url} />;
+  return <audio aria-label={file.name} className="mt-3 max-w-full" controls preload="metadata" src={preview.url} />;
+}
+
+export function FilePicker({ label, files, onChange, disabled, showPreview = true, ...options }: FilePickerProps) {
+  const id = useId();
+  const busy = useRef(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  const blocked = disabled || pending;
+  const change = async (next: () => File[]) => {
+    if (disabled || busy.current) return;
+    busy.current = true;
+    setPending(true);
+    setError(undefined);
+    try { await onChange(next()); }
+    catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); }
+    finally { busy.current = false; setPending(false); }
+  };
+  const add = (incoming: File[]) => change(() => fileSelection(files, incoming, options));
+  const fileInput = useFileInput({ disabled: blocked, onFiles: add });
+  return <section aria-busy={pending} aria-label={label} className="min-w-0 text-sm">
+    <div className={cn("grid gap-1.5 rounded-lg border border-dashed bg-muted/40 p-3", fileInput.dragging && "border-primary bg-background")} {...fileInput.dropProps}>
+      <Label htmlFor={id}>{label}</Label>
+      <input accept={options.accept} className="max-w-full min-w-0 text-sm file:mr-2 file:rounded-md file:border file:bg-background file:px-2 file:py-1 file:text-sm" disabled={blocked} id={id} multiple={options.multiple !== false} type="file" {...fileInput.inputProps} />
+      <p className="text-xs text-muted-foreground">Dateien auswählen, hier hineinziehen oder bei fokussierter Dateiauswahl einfügen.</p>
+      {options.accept && <p className="text-xs text-muted-foreground">Erlaubt: {options.accept}</p>}
+    </div>
+    {error && <p className="mt-2 text-sm text-destructive" role="alert">{error}</p>}
+    {files.length > 0 && <ul className="mt-2 divide-y">{files.map((file, index) => <li className="py-2" key={`${file.name}:${file.size}:${file.lastModified}:${index}`}>
+      <div className="flex items-start justify-between gap-3"><span className="min-w-0 break-words"><strong>{file.name}</strong> <small className="block text-muted-foreground">{new Intl.NumberFormat("de-DE").format(file.size)} Bytes</small></span>
+        <Button aria-label={`${file.name} entfernen`} disabled={blocked} onClick={() => { void change(() => files.filter((_, position) => position !== index)); }} size="sm" variant="outline">Entfernen</Button></div>
+      {showPreview && <FilePreview file={file} />}
+    </li>)}</ul>}
+  </section>;
+}