@schlenkr/ragents 0.1.0

package/plugins/ragents.workspace/server/runtime.ts

@@ -0,0 +1,170 @@
+import { mkdir, realpath } from "node:fs/promises";
+import path from "node:path";
+import type { JsonValue, RunState, WorkspaceToolNaming } from "@aicontainer/ragents";
+import { DomainError } from "@aicontainer/ragents";
+import type { SandboxHomeEnvironment, WorkspaceExecutor } from "@aicontainer/workspace-executor";
+import type {
+  SessionWorkspace,
+  WorkspaceResolver,
+  WorkspaceRuntime,
+  WorkspaceRuntimeDescription,
+  WorkspaceTransfer,
+} from "@aicontainer/server/ragents/workspace-runtime.js";
+import { storedStartOption } from "@aicontainer/server/ragents/start-option-state.js";
+import { sandboxToolNaming } from "@aicontainer/server/plugin-support/workspace-tool-naming.js";
+import { WorkspaceSandboxHost } from "@aicontainer/server/plugin-support/workspace-sandbox-host.js";
+import type { WorkspaceBinding } from "../contract.js";
+import { bindingOf, boundServerDirectory, serverDirectoryBinding } from "./binding.js";
+import type { WorkspaceClientRegistry } from "./clients.js";
+
+export interface RunWorkspaceRuntimeOptions {
+  globalDirectory: string;
+  sessionDirectory: (runId: string, ...segments: string[]) => string;
+  sessionsDirectoryPattern: string;
+  sessionWorkspaceFor: (runId: string) => Promise<SessionWorkspace>;
+  skillPaths: () => Promise<readonly string[]>;
+  resolver: () => WorkspaceResolver | undefined;
+  runState: (runId: string) => RunState | null;
+  storeBinding: (runId: string, binding: WorkspaceBinding) => void;
+  clients: WorkspaceClientRegistry;
+}
+
+const runNotStarted = (): DomainError => new DomainError(
+  "run-not-started",
+  "Die Unterhaltung ist noch nicht gestartet; das Arbeitsverzeichnis entsteht mit der ersten Nachricht.",
+  409,
+);
+
+export class RunWorkspaceRuntime implements WorkspaceRuntime {
+  readonly sandbox: WorkspaceSandboxHost;
+  readonly toolNaming: WorkspaceToolNaming = sandboxToolNaming;
+  readonly transfer: WorkspaceTransfer;
+  readonly #options: RunWorkspaceRuntimeOptions;
+  readonly #nugetCacheDirectory: string;
+
+  constructor(options: RunWorkspaceRuntimeOptions) {
+    this.#options = options;
+    this.transfer = {
+      boundDirectory: (runId) => boundServerDirectory(options.runState(runId)),
+      assertDirectory: (directory) => void serverDirectoryBinding(directory),
+      rebind: (runId, directory) => options.storeBinding(runId, serverDirectoryBinding(directory)),
+    };
+    this.#nugetCacheDirectory = path.join(options.globalDirectory, "nuget-cache");
+    this.sandbox = new WorkspaceSandboxHost({
+      contributorName: "ragents.workspace.sandbox",
+      workspaceFor: options.sessionWorkspaceFor,
+      identFor: () => Promise.resolve(undefined),
+      skillPaths: options.skillPaths,
+      homeFor: (runId) => this.#homeFor(runId),
+      executorFor: (runId) => Promise.resolve(this.#executorFor(runId)),
+    });
+  }
+
+  async #homeFor(runId: string): Promise<SandboxHomeEnvironment> {
+    const home = this.#options.sessionDirectory(runId, "home");
+    await mkdir(home, { recursive: true });
+    await mkdir(this.#nugetCacheDirectory, { recursive: true });
+    return { home, nugetPackages: this.#nugetCacheDirectory };
+  }
+
+  /** Bei Bindung `client` führt der Executor des Arbeitsplatzes aus, sonst der des Servers. */
+  #executorFor(runId: string): WorkspaceExecutor | undefined {
+    const binding = bindingOf(this.#options.runState(runId));
+    return binding.kind === "client"
+      ? this.#options.clients.executorFor(binding.client, binding.label, binding.path)
+      : undefined;
+  }
+
+  async resolve(runId: string, emitSystem: (text: string) => void): Promise<SessionWorkspace> {
+    const state = this.#options.runState(runId);
+    if (!state) throw runNotStarted();
+    const binding = bindingOf(state);
+    switch (binding.kind) {
+      case "fresh": return this.#fresh(runId, state);
+      case "path": return this.#bound(binding, emitSystem);
+      case "client": return this.#serverSide(runId, binding, emitSystem);
+    }
+  }
+
+  async #fresh(runId: string, state: RunState): Promise<SessionWorkspace> {
+    const directory = await this.#sessionWorkspace(runId);
+    const resolver = this.#options.resolver();
+    const resolution = resolver
+      ? await resolver.resolve({ runId, directory, choice: this.#choiceFor(state, resolver), emitSystem: () => undefined })
+      : { cwd: directory };
+    return this.#directory(path.resolve(resolution.cwd), resolution.extraEnv);
+  }
+
+  #bound(binding: Extract<WorkspaceBinding, { kind: "path" }>, emitSystem: (text: string) => void): SessionWorkspace {
+    const cwd = path.resolve(binding.path);
+    const existing = async (): Promise<string> => {
+      try {
+        return await realpath(cwd);
+      } catch {
+        throw new DomainError("workspace-path-missing", `Der gebundene Ordner ${cwd} existiert auf dem Server nicht mehr.`, 409);
+      }
+    };
+    emitSystem(`Arbeitsbereich: ${cwd} (Projektordner auf dem Server)`);
+    return {
+      cwd,
+      currentRoot: existing,
+      ensureWritable: existing,
+      runOperation: (operation) => operation(),
+    };
+  }
+
+  /** Der Ordner des Servers für einen Run, dessen Werkzeuge auf dem Arbeitsplatz laufen: Ablage für typescript_eval und Actor-Programme. */
+  async #serverSide(
+    runId: string,
+    binding: Extract<WorkspaceBinding, { kind: "client" }>,
+    emitSystem: (text: string) => void,
+  ): Promise<SessionWorkspace> {
+    emitSystem(`Arbeitsbereich: ${binding.path} (Projektordner auf dem Arbeitsplatz ${binding.label})`);
+    return this.#directory(await this.#sessionWorkspace(runId));
+  }
+
+  async #sessionWorkspace(runId: string): Promise<string> {
+    const directory = this.#options.sessionDirectory(runId, "workspace");
+    await mkdir(directory, { recursive: true });
+    return directory;
+  }
+
+  #directory(cwd: string, extraEnv?: NodeJS.ProcessEnv): SessionWorkspace {
+    return {
+      cwd,
+      ...(extraEnv ? { extraEnv } : {}),
+      currentRoot: () => realpath(cwd),
+      ensureWritable: () => realpath(cwd),
+      runOperation: (operation) => operation(),
+    };
+  }
+
+  #choiceFor(state: RunState, resolver: WorkspaceResolver): JsonValue | null {
+    if (resolver.optionId === undefined) return null;
+    const choice = storedStartOption(state, resolver.optionId);
+    if (choice === undefined) {
+      throw new Error(`Die Startoption ${resolver.optionId} des Workspace-Resolvers ist in der Unterhaltung nicht gespeichert`);
+    }
+    return choice;
+  }
+
+  describe(): WorkspaceRuntimeDescription {
+    return {
+      mode: "per-run",
+      directoryPattern: path.join(this.#options.sessionsDirectoryPattern, "workspace"),
+    };
+  }
+
+  deleteSession(runId: string): Promise<void> {
+    return this.stopSession(runId);
+  }
+
+  stopSession(runId: string): Promise<void> {
+    return this.sandbox.shutdown(runId);
+  }
+
+  async shutdown(): Promise<void> {
+    await this.sandbox.shutdownAll();
+    this.#options.clients.shutdown();
+  }
+}

package/plugins/ragents.workspace/web/FileBrowser.tsx

@@ -0,0 +1,271 @@
+import {
+  Alert,
+  Button,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Toggle,
+} from "@aicontainer/web/ui";
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { ChevronRight, Eye, EyeOff, FolderOpen, RefreshCw } from "lucide-react";
+import type { WorkspaceTabContext } from "@aicontainer/web/PluginRegistry";
+import { rpc } from "@aicontainer/web/rpc";
+import { BROWSE_ROOTS, workspaceContracts, type BrowseListing, type BrowsePreview, type BrowseRoot } from "../contract";
+import { fetchBrowseListing, fetchBrowsePreview } from "./api";
+import { fileIconFor, fileToneClass } from "./file-icons";
+import { SourceCode } from "@aicontainer/web/SourceCode";
+
+const rowClass = "h-auto w-full justify-start gap-1.5 rounded-none py-[3px] pr-2.5 pl-(--row-indent) text-[0.7rem] font-normal data-selected:bg-primary/12 data-selected:text-primary";
+const previewSourceClass = "min-w-0 px-2.5 pt-0 pb-2.5 text-xs leading-[1.45] whitespace-pre-wrap break-words";
+const indent = (depth: number) => ({ "--row-indent": `${8 + depth * 12}px` }) as CSSProperties;
+
+const rootLabels: Readonly<Record<BrowseRoot, string>> = {
+  workspace: "Arbeitsverzeichnis",
+  files: "Dateiablage",
+};
+
+const emptyHints: Readonly<Record<BrowseRoot, string>> = {
+  workspace: "Im Arbeitsverzeichnis des Laufs liegt noch nichts.",
+  files: "In der Dateiablage des Laufs liegt noch nichts.",
+};
+
+const messageOf = (cause: unknown): string => cause instanceof Error ? cause.message : String(cause);
+
+const sizeLabel = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const timeLabel = (value: string): string => {
+  const at = new Date(value);
+  return Number.isNaN(at.getTime()) ? value : at.toLocaleString("de-DE");
+};
+
+interface BrowserMemory {
+  expanded: ReadonlySet<string>;
+  selected: string | undefined;
+}
+
+export function FileBrowserPanel({ active, session }: WorkspaceTabContext) {
+  const runId = session.session.id;
+  const treeMemory = useRef(new Map<string, BrowserMemory>());
+  const [root, setRoot] = useState<BrowseRoot>("workspace");
+  const stateKey = `${runId}|${root}`;
+  const [listings, setListings] = useState<ReadonlyMap<string, BrowseListing>>(() => new Map());
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());
+  const [selected, setSelected] = useState<string | undefined>();
+  const [preview, setPreview] = useState<BrowsePreview>();
+  const [error, setError] = useState<string>();
+  const [pending, setPending] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [showHidden, setShowHidden] = useState(false);
+
+  const expandedRef = useRef(expanded);
+  expandedRef.current = expanded;
+
+  const keyRef = useRef(stateKey);
+  useEffect(() => {
+    if (keyRef.current === stateKey) return;
+    keyRef.current = stateKey;
+    const saved = treeMemory.current.get(stateKey);
+    setListings(new Map());
+    setExpanded(saved?.expanded ?? new Set());
+    setSelected(saved?.selected);
+    setPreview(undefined);
+    setError(undefined);
+  }, [stateKey]);
+
+  useEffect(() => {
+    treeMemory.current.set(stateKey, { expanded, selected });
+  }, [expanded, root, runId, selected, stateKey]);
+
+  useEffect(() => {
+    if (!active || selected === undefined || preview !== undefined) return;
+    let alive = true;
+    void fetchBrowsePreview(runId, root, selected)
+      .then((value) => alive && setPreview(value))
+      .catch(() => alive && setSelected(undefined));
+    return () => {
+      alive = false;
+    };
+  }, [active, preview, root, runId, selected]);
+
+  useEffect(() => {
+    if (!active) return;
+    let alive = true;
+    let timer: number | undefined;
+    let busy = false;
+
+    const load = async (visible: boolean) => {
+      if (busy) return;
+      busy = true;
+      if (visible) setPending(true);
+      try {
+        const targets = ["", ...expandedRef.current];
+        const results = await Promise.all(targets.map(async (directory) => ({
+          directory,
+          listing: await fetchBrowseListing(runId, root, directory).catch((cause: unknown) =>
+            directory === "" ? Promise.reject(cause) : null),
+        })));
+        if (!alive) return;
+        const gone = results.filter((result) => result.listing === null).map((result) => result.directory);
+        setListings(new Map(results
+          .filter((result) => result.listing !== null)
+          .map((result) => [result.directory, result.listing as BrowseListing])));
+        if (gone.length > 0) {
+          setExpanded((current) => new Set([...current].filter((directory) =>
+            !gone.some((missing) => directory === missing || directory.startsWith(`${missing}/`)))));
+        }
+        setError(undefined);
+      } catch (cause) {
+        if (alive) setError(messageOf(cause));
+      } finally {
+        busy = false;
+        if (alive) {
+          if (visible) setPending(false);
+          if (timer !== undefined) window.clearTimeout(timer);
+          timer = window.setTimeout(() => void load(false), 30000);
+        }
+      }
+    };
+
+    const unsubscribe = rpc.subscribe(workspaceContracts.channels.browse, { runId, root }, () => void load(false));
+    void load(true);
+    return () => {
+      alive = false;
+      unsubscribe();
+      if (timer !== undefined) window.clearTimeout(timer);
+    };
+  }, [active, reload, root, runId]);
+
+  const toggleDirectory = (directory: string) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(directory)) next.delete(directory);
+      else next.add(directory);
+      return next;
+    });
+    if (listings.has(directory)) return;
+    setPending(true);
+    void fetchBrowseListing(runId, root, directory)
+      .then((listing) => {
+        setListings((current) => new Map(current).set(directory, listing));
+        setError(undefined);
+      })
+      .catch((cause: unknown) => setError(messageOf(cause)))
+      .finally(() => setPending(false));
+  };
+
+  const openFile = (file: string) => {
+    setSelected(file);
+    setPreview(undefined);
+    setPending(true);
+    void fetchBrowsePreview(runId, root, file)
+      .then((value) => {
+        setPreview(value);
+        setError(undefined);
+      })
+      .catch((cause: unknown) => setError(messageOf(cause)))
+      .finally(() => setPending(false));
+  };
+
+  const renderLevel = (directory: string, depth: number): ReactNode => {
+    const listing = listings.get(directory);
+    if (!listing) return null;
+    const visible = showHidden ? listing.entries : listing.entries.filter((entry) => !entry.name.startsWith("."));
+    return (
+      <>
+        {visible.map((entry) => {
+          const full = directory ? `${directory}/${entry.name}` : entry.name;
+          const open = expanded.has(full);
+          const { Icon, tone } = fileIconFor(entry.name, entry.kind, open);
+          return (
+            <div key={full}>
+              <Button
+                className={rowClass}
+                data-selected={selected === full}
+                onClick={() => entry.kind === "directory" ? toggleDirectory(full) : openFile(full)}
+                style={indent(depth)}
+                title={`${entry.name} - ${sizeLabel(entry.size)} - ${timeLabel(entry.modifiedAt)}`}
+                variant="ghost"
+              >
+                <span className={`inline-flex w-3 flex-none items-center justify-center text-muted-foreground${open ? " [&>svg]:rotate-90" : ""}`}>
+                  {entry.kind === "directory" ? <ChevronRight size={11} strokeWidth={2} /> : null}
+                </span>
+                <Icon aria-hidden className={`flex-none ${fileToneClass[tone]}`} size={14} strokeWidth={1.7} />
+                <span className="min-w-0 flex-1 truncate text-left font-mono">{entry.name}</span>
+                {entry.kind === "file" && <span className="flex-none text-[0.64rem] text-muted-foreground tabular-nums">{sizeLabel(entry.size)}</span>}
+              </Button>
+              {entry.kind === "directory" && open && renderLevel(full, depth + 1)}
+            </div>
+          );
+        })}
+        {listing.truncated && (
+          <div className="py-1 pr-2.5 pl-(--row-indent) text-[0.64rem] text-muted-foreground" style={indent(depth)}>
+            Weitere Einträge sind nicht gelistet.
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const rootListing = listings.get("");
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <header className="flex items-center gap-2 px-2.5 py-2">
+        <div className="flex min-w-0 flex-1 gap-1">
+          {BROWSE_ROOTS.map((value) => (
+            <Toggle key={value} onPressedChange={() => setRoot(value)} pressed={value === root} size="sm" variant="outline">
+              {rootLabels[value]}
+            </Toggle>
+          ))}
+        </div>
+        <div className="flex items-center gap-1">
+          <Toggle
+            aria-label={showHidden ? "Versteckte Einträge ausblenden" : "Versteckte Einträge anzeigen"}
+            onPressedChange={setShowHidden}
+            pressed={showHidden}
+            size="sm"
+            title={showHidden ? "Versteckte Einträge ausblenden" : "Versteckte Einträge anzeigen"}
+          >
+            {showHidden ? <Eye size={15} strokeWidth={1.8} /> : <EyeOff size={15} strokeWidth={1.8} />}
+          </Toggle>
+          <Button aria-label="Dateien aktualisieren" onClick={() => setReload((value) => value + 1)} size="icon" title="Aktualisieren" variant="ghost">
+            <RefreshCw className={pending ? "animate-spin" : undefined} size={15} strokeWidth={1.8} />
+          </Button>
+        </div>
+      </header>
+      {error && (
+        <Alert className="shrink-0 rounded-none border-x-0 border-t-0 border-b-border-soft bg-destructive/8 px-2.5 py-2 text-[0.68rem]" variant="destructive">
+          {error}
+        </Alert>
+      )}
+      {rootListing && <div className="truncate px-2.5 pt-0.5 pb-1.5 font-mono text-[0.66rem] text-muted-foreground" title={rootListing.location}>{rootListing.location}</div>}
+      {rootListing && rootListing.entries.length === 0 && (
+        <Empty className="min-h-30 flex-none gap-2 p-7">
+          <EmptyHeader>
+            <EmptyMedia><FolderOpen size={15} strokeWidth={1.7} /></EmptyMedia>
+            <EmptyTitle>Keine Dateien</EmptyTitle>
+            <EmptyDescription>{emptyHints[root]}</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+      <div className="min-h-0 flex-1 overflow-auto pb-2">{renderLevel("", 0)}</div>
+      {selected && (
+        <div className="flex min-h-0 flex-1 flex-col border-t border-border-soft">
+          <div className="truncate px-2.5 py-1.5 font-mono text-[0.66rem] text-muted-foreground" title={selected}>{selected}</div>
+          {preview && !preview.previewable && <div className="px-2.5 pb-2 text-[0.68rem] text-muted-foreground">{preview.reason}</div>}
+          {preview && preview.previewable && (
+            <div className="min-h-0 flex-1 overflow-auto">
+              <SourceCode className={previewSourceClass} content={preview.content} path={selected} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/plugins/ragents.workspace/web/WorkspaceBinding.tsx

@@ -0,0 +1,216 @@
+import { useId, useMemo, useState } from "react";
+import { FolderIcon } from "lucide-react";
+import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@aicontainer/web/ui";
+import { ToolbarCopy, ToolbarItem, ToolbarLabel, ToolbarText } from "@aicontainer/web/Toolbar";
+import type {
+  SessionMetadataContext,
+  StartOptionBadgeContext,
+  StartOptionControlContext,
+} from "@aicontainer/web/PluginRegistry";
+import {
+  isWorkspaceBinding,
+  workspaceBindingSummary,
+  WORKSPACE_METADATA_ID,
+  type WorkspaceBinding,
+  type WorkspaceBindingPresentation,
+  type WorkspaceClientInfo,
+  type WorkspaceSessionMetadata,
+} from "../contract";
+
+export interface BindingChoice {
+  value: string;
+  label: string;
+}
+
+const errorClass = "text-[0.75rem] text-destructive";
+
+const labelClass = "text-[0.66rem] font-medium text-muted-foreground";
+
+const messageOf = (cause: unknown): string => cause instanceof Error ? cause.message : String(cause);
+
+const isClientInfo = (value: unknown): value is WorkspaceClientInfo => {
+  const raw = value as Record<string, unknown> | null;
+  return typeof raw === "object" && raw !== null
+    && typeof raw.id === "string" && typeof raw.label === "string"
+    && typeof raw.hostname === "string" && typeof raw.platform === "string"
+    && Array.isArray(raw.folders) && raw.folders.every((folder) => typeof folder === "string");
+};
+
+const presentationFrom = (presentation: unknown, optionId: string): WorkspaceBindingPresentation => {
+  const raw = presentation as Record<string, unknown> | null;
+  if (typeof raw !== "object" || raw === null || raw.kind !== "workspace-binding"
+    || !Array.isArray(raw.clients) || !raw.clients.every(isClientInfo)) {
+    throw new Error(`Die Startoption ${optionId} liefert keine Arbeitsbereich-Darstellung`);
+  }
+  return { kind: "workspace-binding", clients: raw.clients };
+};
+
+const bindingFrom = (value: unknown, optionId: string): WorkspaceBinding => {
+  if (!isWorkspaceBinding(value)) {
+    throw new Error(`Der Wert der Startoption ${optionId} ist keine Arbeitsbereich-Bindung`);
+  }
+  return value;
+};
+
+const selectionOf = (binding: WorkspaceBinding): string => binding.kind === "client" ? binding.client : binding.kind;
+
+const pathOf = (binding: WorkspaceBinding): string => binding.kind === "fresh" ? "" : binding.path;
+
+const sameBinding = (left: WorkspaceBinding, right: WorkspaceBinding): boolean => {
+  if (left.kind === "fresh") return right.kind === "fresh";
+  if (left.kind === "path") return right.kind === "path" && right.path === left.path;
+  return right.kind === "client" && right.client === left.client
+    && right.label === left.label && right.path === left.path;
+};
+
+export const workspaceBindingChoices = (
+  clients: readonly WorkspaceClientInfo[],
+  binding: WorkspaceBinding,
+): BindingChoice[] => {
+  const lost = binding.kind === "client" && !clients.some((client) => client.id === binding.client)
+    ? [{ value: binding.client, label: `Arbeitsplatz ${binding.label} (nicht verbunden)` }]
+    : [];
+  return [
+    { value: "fresh", label: "Leerer Ordner je Run" },
+    { value: "path", label: "Ordner auf dem Server" },
+    ...clients.map((client) => ({ value: client.id, label: `Arbeitsplatz ${client.label}` })),
+    ...lost,
+  ];
+};
+
+export const workspaceMetadataFrom = (value: unknown): WorkspaceSessionMetadata | undefined => {
+  const raw = value as Record<string, unknown> | null;
+  if (typeof raw !== "object" || raw === null || typeof raw.summary !== "string" || !isWorkspaceBinding(raw.binding)) {
+    return undefined;
+  }
+  return { binding: raw.binding, summary: raw.summary };
+};
+
+const parse = (option: StartOptionControlContext["option"]) => {
+  try {
+    return {
+      presentation: presentationFrom(option.presentation, option.id),
+      binding: bindingFrom(option.value, option.id),
+    };
+  } catch (cause) {
+    return { message: messageOf(cause) };
+  }
+};
+
+export function WorkspaceBindingControl({ disabled, error, option, setValue }: StartOptionControlContext) {
+  const [selection, setSelection] = useState<string | undefined>(undefined);
+  const [draft, setDraft] = useState<string | undefined>(undefined);
+  const pathId = useId();
+  const parsed = useMemo(() => parse(option), [option]);
+  if ("message" in parsed) return <p className={errorClass} role="alert">{parsed.message}</p>;
+  const { presentation, binding } = parsed;
+
+  const choices = workspaceBindingChoices(presentation.clients, binding);
+  const kind = selection ?? selectionOf(binding);
+  const path = draft ?? pathOf(binding);
+  const client = presentation.clients.find((entry) => entry.id === kind);
+  const folders = client?.folders.map((folder) => ({ value: folder, label: folder })) ?? [];
+
+  const bindingOf = (nextKind: string, nextPath: string): WorkspaceBinding | undefined => {
+    if (nextKind === "fresh") return { kind: "fresh" };
+    if (nextPath === "") return undefined;
+    if (nextKind === "path") return { kind: "path", path: nextPath };
+    const label = presentation.clients.find((entry) => entry.id === nextKind)?.label
+      ?? (binding.kind === "client" && binding.client === nextKind ? binding.label : nextKind);
+    return { kind: "client", client: nextKind, label, path: nextPath };
+  };
+
+  const commit = (nextKind: string, nextPath: string) => {
+    const next = bindingOf(nextKind, nextPath);
+    if (next && !sameBinding(next, binding)) void setValue(next);
+  };
+
+  const chooseKind = (next: string) => {
+    const offered = presentation.clients.find((entry) => entry.id === next)?.folders[0] ?? "";
+    const nextPath = path === "" ? offered : path;
+    setSelection(next);
+    setDraft(nextPath);
+    commit(next, nextPath);
+  };
+
+  const chooseFolder = (folder: string) => {
+    setDraft(folder);
+    commit(kind, folder);
+  };
+
+  return (
+    <div className="flex w-full flex-col items-start gap-2">
+      <span className="text-[0.72rem] font-semibold text-muted-foreground">Arbeitsbereich</span>
+      <div className="flex w-full flex-wrap items-end gap-2">
+        <div className="flex flex-col gap-1">
+          <span className={labelClass}>Art</span>
+          <Select disabled={disabled} items={choices} onValueChange={(next) => { if (next !== null) chooseKind(next); }} value={kind}>
+            <SelectTrigger aria-label="Art des Arbeitsbereichs" className="min-w-0 max-w-full" size="sm"><SelectValue /></SelectTrigger>
+            <SelectContent>{choices.map((choice) => <SelectItem key={choice.value} value={choice.value}>{choice.label}</SelectItem>)}</SelectContent>
+          </Select>
+        </div>
+        {kind !== "fresh" && (
+          <div className="flex min-w-[15rem] flex-1 flex-col gap-1">
+            <Label className={labelClass} htmlFor={pathId}>Absoluter Pfad</Label>
+            <Input
+              className="h-7 text-sm"
+              disabled={disabled}
+              id={pathId}
+              onBlur={() => commit(kind, path)}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => { if (event.key === "Enter") commit(kind, path); }}
+              placeholder="/Users/name/projekt"
+              value={path}
+            />
+          </div>
+        )}
+        {folders.length > 0 && (
+          <div className="flex flex-col gap-1">
+            <span className={labelClass}>Angebotener Ordner</span>
+            <Select disabled={disabled} items={folders} onValueChange={(folder) => { if (folder !== null) chooseFolder(folder); }} value={folders.some((folder) => folder.value === path) ? path : null}>
+              <SelectTrigger aria-label="Angebotener Ordner" className="min-w-0 max-w-full" size="sm"><SelectValue placeholder="Übernehmen" /></SelectTrigger>
+              <SelectContent>{folders.map((folder) => <SelectItem key={folder.value} value={folder.value}>{folder.label}</SelectItem>)}</SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+      {error && <p className={errorClass} role="alert">{error}</p>}
+    </div>
+  );
+}
+
+export function WorkspaceBindingBadge({ option }: StartOptionBadgeContext) {
+  if (!option.locked) return null;
+  let binding: WorkspaceBinding;
+  try {
+    binding = bindingFrom(option.value, option.id);
+  } catch (cause) {
+    return <ToolbarItem title={messageOf(cause)}><ToolbarText>Arbeitsbereich unlesbar</ToolbarText></ToolbarItem>;
+  }
+  const summary = workspaceBindingSummary(binding);
+  return (
+    <ToolbarItem title={`Arbeitsbereich: ${summary}`}>
+      <ToolbarCopy><ToolbarLabel>Arbeitsbereich</ToolbarLabel><ToolbarText>{summary}</ToolbarText></ToolbarCopy>
+    </ToolbarItem>
+  );
+}
+
+export function WorkspaceMetadata({ placement, session }: SessionMetadataContext) {
+  const metadata = workspaceMetadataFrom(session.metadata?.[WORKSPACE_METADATA_ID]);
+  if (!metadata) return null;
+  if (placement === "list") {
+    if (metadata.binding.kind === "fresh") return null;
+    return (
+      <span className="flex max-w-full items-center gap-1.5 overflow-hidden pl-px text-xs text-muted-foreground" title={`Arbeitsbereich: ${metadata.summary}`}>
+        <FolderIcon aria-hidden className="size-3 flex-none" />
+        <span className="truncate">{metadata.summary}</span>
+      </span>
+    );
+  }
+  return (
+    <ToolbarItem title={`Arbeitsbereich: ${metadata.summary}`}>
+      <FolderIcon aria-hidden className="size-3.5" />
+      <ToolbarCopy><ToolbarLabel>Arbeitsbereich</ToolbarLabel><ToolbarText>{metadata.summary}</ToolbarText></ToolbarCopy>
+    </ToolbarItem>
+  );
+}

package/plugins/ragents.workspace/web/api.ts

@@ -0,0 +1,8 @@
+import { rpc } from "@aicontainer/web/rpc";
+import { workspaceContracts, type BrowseListing, type BrowsePreview, type BrowseRoot } from "../contract";
+
+export const fetchBrowseListing = (runId: string, root: BrowseRoot, directory: string): Promise<BrowseListing> =>
+  rpc.call(workspaceContracts.browse.list, { runId, root, path: directory });
+
+export const fetchBrowsePreview = (runId: string, root: BrowseRoot, file: string): Promise<BrowsePreview> =>
+  rpc.call(workspaceContracts.browse.preview, { runId, root, path: file });