@yourrealm/sdk 0.0.0-alpha.1378.ce03c8dc

package/src/ui/install/tabs-form.tsx

@@ -0,0 +1,557 @@
+import type {
+  ConfigContainerNode,
+  ConfigFieldLeaf,
+  ConfigFieldTree,
+  ConfigPermissionRef,
+  SerializablePermission,
+} from "../../sandbox.ts";
+import { SectionLabel } from "../components/permission-section.tsx";
+import { GearIcon } from "../components/icons.tsx";
+import { ConfigField, type ConfigFieldKind } from "../components/config-field.tsx";
+import { PermissionRow } from "../components/permission-row.tsx";
+import { SiloPicker } from "../components/silo-picker.tsx";
+import { DomainEditor } from "../components/domain-editor.tsx";
+import { PERMISSION_META, type PermissionKind, type SiloGrants } from "../../home.ts";
+import type { PublicDomainGrantData } from "../../schema/public-domain.ts";
+import type { SiloOption } from "./adapter.ts";
+import { SectionBlock } from "../components/schema-block.tsx";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../components/tabs.tsx";
+import { Badge } from "../components/badge.tsx";
+
+// The config-field descriptor types are produced once by the sandbox walker
+// (see sandbox.ts); import them rather than mirror them here. A type-only
+// import erases at build, so no QuickJS reaches the client island bundle.
+// Re-exported for the consumers that pull them from this module.
+export type { ConfigContainerNode, ConfigFieldLeaf, ConfigFieldTree };
+export type ConfigField = ConfigFieldLeaf | ConfigContainerNode | ConfigPermissionRef;
+
+interface TabsFormProps {
+  configFields: ConfigFieldTree;
+  permissionsFlat: Record<string, SerializablePermission>;
+  configValues: Record<string, unknown>;
+  /**
+   * Dotted paths of permissions the admin has enabled. Anything not in
+   * this set is treated as denied on install.
+   */
+  enabledPermissions: Set<string>;
+  /**
+   * Per-path admin-override values. Sparse: only entries the admin
+   * actively edited. Renderers fall back to the descriptor's `perm.data`
+   * for the displayed default; `descriptorsToGrants` does the same on
+   * submit. Presence-only kinds (host.gpu, host.egress, host.management)
+   * and peers.* / remote.* never appear here.
+   */
+  grantValues: Record<string, unknown>;
+  /**
+   * Dotted paths whose stored value is redacted on the server. The
+   * corresponding input renders a "leave blank to keep current" hint; the
+   * caller filters those out of the PATCH body when the input is empty.
+   */
+  redactedPaths?: string[];
+  /**
+   * Per-redacted-path display mask (e.g. `pk_live_••••`), shown as the secret
+   * field's placeholder so the operator can tell which key is set. Optional —
+   * the new-app install path has no stored secrets, so it never passes this.
+   */
+  secretHints?: Record<string, string>;
+  onConfigChange: (path: string, value: unknown) => void;
+  onPermissionToggle: (path: string, enabled: boolean) => void;
+  onGrantValueChange?: (path: string, value: unknown) => void;
+  /**
+   * A `home.publicDomain` leaf has a hostname typed into its add field that
+   * hasn't been turned into a row. Reported per path (an app may declare two
+   * leaves) so the panel can gate Install/Save on it.
+   */
+  onDomainPendingChange?: (path: string, pending: boolean) => void;
+  /**
+   * Every Silo the host knows. Only fetched when the app declares a
+   * `host.silo` permission; the picker narrows to `siloWorkerId`.
+   */
+  silos?: SiloOption[];
+  /** The worker this app deploys to. Null until the operator picks one. */
+  siloWorkerId?: string | null;
+  siloKind?: "single" | "system";
+  /** Create a Silo on `siloWorkerId` and resolve with the stored row. */
+  onCreateSilo?: (input: {
+    name: string;
+    containerPath?: string;
+    hostPath?: string;
+  }) => Promise<SiloOption>;
+  /** Confirm an adopted Silo's setup command from the picker. */
+  onAcknowledgeSilo?: (id: string) => Promise<void>;
+  /** Disable every input (e.g. while saving). */
+  disabled?: boolean;
+  /**
+   * Per-tab count of still-unmet required items (config + permissions),
+   * keyed by the tab's object key. Drives the count badge on each tab so
+   * the operator can see at a glance which tabs still need input. Absent /
+   * zero = no badge. Only meaningful when the top level is tabs.
+   */
+  needsByTab?: Record<string, number>;
+}
+
+function isKnownPermissionKind(key: string): key is PermissionKind {
+  return key in PERMISSION_META;
+}
+
+/**
+ * The Silo props, bundled once so the tree drills one prop, not five.
+ * Null when the host has no Silos to offer at all - `realm-sdk dev` has no
+ * Home, so it has no Silo records and no worker model to scope them by. The
+ * picker is left out entirely there rather than shown in a state it can never
+ * leave; the dev compiler already fails the install with an actionable
+ * "no Silo in the fixture" message.
+ */
+interface SiloContext {
+  silos: SiloOption[];
+  workerId: string | null;
+  kind: "single" | "system";
+  onCreate?: (input: {
+    name: string;
+    containerPath?: string;
+    hostPath?: string;
+  }) => Promise<SiloOption>;
+  onAcknowledge?: (id: string) => Promise<void>;
+}
+
+/**
+ * Unified renderer for the config + permissions tree. Walks `configFields`
+ * and inlines permission rows at their dotted paths. Optional sections
+ * render as a fieldset with an on/off toggle; children render disabled
+ * when the section is off.
+ */
+export function TabsForm({
+  configFields,
+  permissionsFlat,
+  configValues,
+  enabledPermissions,
+  grantValues,
+  redactedPaths,
+  secretHints,
+  onConfigChange,
+  onPermissionToggle,
+  onGrantValueChange,
+  onDomainPendingChange,
+  silos,
+  siloWorkerId,
+  siloKind,
+  onCreateSilo,
+  onAcknowledgeSilo,
+  disabled,
+  needsByTab,
+}: TabsFormProps) {
+  const redactedSet = new Set(redactedPaths ?? []);
+  // `silos` absent (not empty) is the host saying it has no Silo model.
+  const silo: SiloContext | null = silos
+    ? {
+        silos,
+        workerId: siloWorkerId ?? null,
+        kind: siloKind ?? "single",
+        onCreate: onCreateSilo,
+        onAcknowledge: onAcknowledgeSilo,
+      }
+    : null;
+  const tabEntries = Object.entries(configFields).filter(
+    (e): e is [string, ConfigContainerNode] => e[1].type === "tab",
+  );
+
+  if (tabEntries.length === 0) {
+    return (
+      <div class="flex flex-col gap-4">
+        <FlatBlock
+          configFields={configFields}
+          permissionsFlat={permissionsFlat}
+          configValues={configValues}
+          enabledPermissions={enabledPermissions}
+          grantValues={grantValues}
+          redactedSet={redactedSet}
+          secretHints={secretHints}
+          onConfigChange={onConfigChange}
+          onPermissionToggle={onPermissionToggle}
+          onGrantValueChange={onGrantValueChange}
+          onDomainPendingChange={onDomainPendingChange}
+          silo={silo}
+          disabled={disabled ?? false}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Tabs defaultValue={tabEntries[0]![0]} data-testid="install-tabs">
+      <TabsList>
+        {tabEntries.map(([name, field]) => {
+          const needs = needsByTab?.[name] ?? 0;
+          return (
+            <TabsTrigger key={name} value={name} data-testid={`tab-${name}`}>
+              <span>{field.title ?? name}</span>
+              {needs > 0 && (
+                // Calm "needs attention" count (amber, not error-red) so the
+                // operator sees which tabs still want input at a glance.
+                <Badge
+                  variant="outline"
+                  className="min-w-5 border-amber-300/60 bg-amber-50 px-1.5 text-amber-700 tabular-nums"
+                  data-testid={`tab-needs-${name}`}
+                >
+                  {needs}
+                </Badge>
+              )}
+            </TabsTrigger>
+          );
+        })}
+      </TabsList>
+      {tabEntries.map(([name, field]) => {
+        const nested = (configValues[name] as Record<string, unknown> | undefined) ?? {};
+        return (
+          <TabsContent key={name} value={name}>
+            {field.description && (
+              <p class="text-xs text-muted-foreground leading-snug">{field.description}</p>
+            )}
+            {Object.entries(field.fields).map(([childName, childField]) => (
+              <FieldNode
+                key={childName}
+                path={`${name}.${childName}`}
+                name={childName}
+                field={childField}
+                values={nested}
+                permissionsFlat={permissionsFlat}
+                enabledPermissions={enabledPermissions}
+                grantValues={grantValues}
+                redactedSet={redactedSet}
+                secretHints={secretHints}
+                onConfigChange={onConfigChange}
+                onPermissionToggle={onPermissionToggle}
+                onGrantValueChange={onGrantValueChange}
+                onDomainPendingChange={onDomainPendingChange}
+                silo={silo}
+                disabled={disabled ?? false}
+                sectionOptionalOff={false}
+              />
+            ))}
+          </TabsContent>
+        );
+      })}
+    </Tabs>
+  );
+}
+
+interface FlatBlockProps {
+  configFields: ConfigFieldTree;
+  permissionsFlat: Record<string, SerializablePermission>;
+  configValues: Record<string, unknown>;
+  enabledPermissions: Set<string>;
+  grantValues: Record<string, unknown>;
+  redactedSet: Set<string>;
+  secretHints?: Record<string, string>;
+  onConfigChange: (path: string, value: unknown) => void;
+  onPermissionToggle: (path: string, enabled: boolean) => void;
+  onGrantValueChange?: (path: string, value: unknown) => void;
+  onDomainPendingChange?: (path: string, pending: boolean) => void;
+  silo: SiloContext | null;
+  disabled: boolean;
+}
+
+/**
+ * Flat-leaves rendering: one card with every leaf (config + permission)
+ * in declared order. The walker stamps permission markers into
+ * `configFields` so iteration order matches the source.
+ */
+function FlatBlock(props: FlatBlockProps) {
+  const {
+    configFields,
+    permissionsFlat,
+    configValues,
+    enabledPermissions,
+    grantValues,
+    redactedSet,
+    secretHints,
+    onConfigChange,
+    onPermissionToggle,
+    onGrantValueChange,
+    onDomainPendingChange,
+    silo,
+    disabled,
+  } = props;
+  const entries = Object.entries(configFields);
+  if (entries.length === 0) return null;
+  return (
+    <div class="bg-trust-bg rounded-3xl shadow-clay-blue p-4 flex flex-col gap-3">
+      <SectionLabel
+        icon={<GearIcon className="w-4 h-4 text-trust" />}
+        className="text-trust pl-0.5"
+      >
+        Configuration
+      </SectionLabel>
+      {entries.map(([name, field]) => (
+        <FieldNode
+          key={name}
+          path={name}
+          name={name}
+          field={field}
+          values={configValues}
+          permissionsFlat={permissionsFlat}
+          enabledPermissions={enabledPermissions}
+          grantValues={grantValues}
+          redactedSet={redactedSet}
+          secretHints={secretHints}
+          onConfigChange={onConfigChange}
+          onPermissionToggle={onPermissionToggle}
+          onGrantValueChange={onGrantValueChange}
+          onDomainPendingChange={onDomainPendingChange}
+          silo={silo}
+          disabled={disabled}
+          sectionOptionalOff={false}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface FieldNodeProps {
+  path: string;
+  name: string;
+  field: ConfigField;
+  values: Record<string, unknown>;
+  permissionsFlat: Record<string, SerializablePermission>;
+  enabledPermissions: Set<string>;
+  grantValues: Record<string, unknown>;
+  redactedSet: Set<string>;
+  secretHints?: Record<string, string>;
+  onConfigChange: (path: string, value: unknown) => void;
+  onPermissionToggle: (path: string, enabled: boolean) => void;
+  onGrantValueChange?: (path: string, value: unknown) => void;
+  onDomainPendingChange?: (path: string, pending: boolean) => void;
+  silo: SiloContext | null;
+  disabled: boolean;
+  /** Inherited from an ancestor optional section whose feature flag is OFF. */
+  sectionOptionalOff: boolean;
+}
+
+function toFieldKind(type: ConfigFieldLeaf["type"]): ConfigFieldKind {
+  return type;
+}
+
+function FieldNode(props: FieldNodeProps) {
+  const {
+    path,
+    name,
+    field,
+    values,
+    permissionsFlat,
+    enabledPermissions,
+    grantValues,
+    redactedSet,
+    secretHints,
+    onConfigChange,
+    onPermissionToggle,
+    onGrantValueChange,
+    onDomainPendingChange,
+    silo,
+    disabled,
+    sectionOptionalOff,
+  } = props;
+
+  if (field.type === "tab") {
+    // Nested tab inside a section would be a design violation; ignore.
+    return null;
+  }
+
+  if (field.type === "permission") {
+    const meta = permissionsFlat[field.path];
+    if (!meta) return null;
+    return (
+      <PermissionLeaf
+        path={field.path}
+        meta={meta}
+        enabled={enabledPermissions.has(field.path)}
+        grantValues={grantValues}
+        onPermissionToggle={onPermissionToggle}
+        onGrantValueChange={onGrantValueChange}
+        onDomainPendingChange={onDomainPendingChange}
+        silo={silo}
+        disabled={disabled}
+        sectionOptionalOff={sectionOptionalOff}
+      />
+    );
+  }
+
+  if (field.type === "section") {
+    const current = values[name];
+    // Toggle reflects whether the section's value is defined.
+    const on = field.optional ? current !== undefined : true;
+    const nested = on ? ((current as Record<string, unknown> | undefined) ?? {}) : {};
+    return (
+      <SectionBlock
+        name={field.title ?? name}
+        optional={field.optional}
+        on={on}
+        // Flipping on initializes an empty object so children can render.
+        // Flipping off resets to undefined so the sandbox sees the section
+        // as absent.
+        onChange={(next) => onConfigChange(path, next ? {} : undefined)}
+        disabled={disabled}
+      >
+        {Object.entries(field.fields).map(([childName, childField]) => (
+          <FieldNode
+            key={childName}
+            path={`${path}.${childName}`}
+            name={childName}
+            field={childField}
+            values={nested}
+            permissionsFlat={permissionsFlat}
+            enabledPermissions={enabledPermissions}
+            grantValues={grantValues}
+            redactedSet={redactedSet}
+            secretHints={secretHints}
+            onConfigChange={onConfigChange}
+            onPermissionToggle={onPermissionToggle}
+            onGrantValueChange={onGrantValueChange}
+            onDomainPendingChange={onDomainPendingChange}
+            silo={silo}
+            disabled={disabled || !on}
+            sectionOptionalOff={sectionOptionalOff || (field.optional === true && !on)}
+          />
+        ))}
+      </SectionBlock>
+    );
+  }
+
+  const leaf = field as ConfigFieldLeaf;
+  const id = `cfg-${path.replace(/\./g, "-")}`;
+  const label = leaf.label ?? name;
+  const current = values[name];
+  const isRedacted = redactedSet.has(path);
+  return (
+    <ConfigField
+      id={id}
+      kind={toFieldKind(leaf.type)}
+      label={label}
+      description={leaf.description}
+      placeholder={leaf.placeholder == null ? undefined : String(leaf.placeholder)}
+      values={leaf.values}
+      min={leaf.min}
+      max={leaf.max}
+      step={leaf.step}
+      required={sectionOptionalOff ? undefined : !leaf.optional}
+      value={current as string | number | boolean | undefined}
+      onChange={(v) => onConfigChange(path, v)}
+      disabled={disabled}
+      redacted={isRedacted}
+      secretMask={isRedacted ? secretHints?.[path] : undefined}
+    />
+  );
+}
+
+interface PermissionLeafProps {
+  path: string;
+  meta: SerializablePermission;
+  enabled: boolean;
+  grantValues: Record<string, unknown>;
+  onPermissionToggle: (path: string, enabled: boolean) => void;
+  onGrantValueChange?: (path: string, value: unknown) => void;
+  onDomainPendingChange?: (path: string, pending: boolean) => void;
+  silo: SiloContext | null;
+  disabled: boolean;
+  /** Inherited from an ancestor optional section whose feature flag is OFF. */
+  sectionOptionalOff: boolean;
+}
+
+function PermissionLeaf(props: PermissionLeafProps) {
+  const {
+    path,
+    meta,
+    enabled,
+    grantValues,
+    onPermissionToggle,
+    onGrantValueChange,
+    onDomainPendingChange,
+    silo,
+    disabled,
+    sectionOptionalOff,
+  } = props;
+  const kindKey = meta.kind;
+  if (!isKnownPermissionKind(kindKey)) return null;
+  // grantValues is sparse — only entries the admin actively edited. Fall
+  // back to the descriptor's perm.data so untouched fields show the
+  // proposed value. `??` on null/undefined only, so an admin-cleared
+  // empty string passes through verbatim; the server's grantSchema
+  // (z.coerce.number()...) does the parse and rejects it as invalid.
+  const portArg =
+    kindKey === "host.port"
+      ? ((grantValues[path] ?? meta.data) as string | number | undefined)
+      : undefined;
+  const urlArg =
+    kindKey === "remote.fetchUrl" || kindKey === "remote.artifact"
+      ? (meta.data as { url: string }).url
+      : undefined;
+  // The descriptor carries the author's affordances; the grant carries the
+  // operator's chosen Silo id. Different shapes, so no descriptor fallback —
+  // an unpicked Silo is genuinely nothing, and the Install gate blocks it.
+  const siloControl =
+    kindKey === "host.silo" && silo ? (
+      <SiloPicker
+        ask={meta.data as SiloGrants}
+        silos={silo.silos}
+        workerId={silo.workerId}
+        kind={silo.kind}
+        value={(grantValues[path] as string | undefined) ?? null}
+        onChange={(id) => onGrantValueChange?.(path, id)}
+        onCreate={async (input) => {
+          if (!silo.onCreate) throw new Error("This host can't create Silos.");
+          const created = await silo.onCreate(input);
+          onGrantValueChange?.(path, created.id);
+        }}
+        onAcknowledge={silo.onAcknowledge}
+        disabled={disabled}
+      />
+    ) : undefined;
+  // Same shape as the Silo picker: the operator supplies the elevated value,
+  // and the descriptor (`true`) has nothing to fall back to. Editing lives
+  // here rather than on the Domains page, which is a read surface in v1 (see
+  // `todo/ideas/naming-layer.md`, slice 3).
+  const domainControl =
+    kindKey === "home.publicDomain" ? (
+      <DomainEditor
+        value={grantValues[path] as PublicDomainGrantData | undefined}
+        onChange={(next) => onGrantValueChange?.(path, next)}
+        // Not locked behind the switch, unlike every other control here:
+        // supplying a hostname IS the operator granting the permission, so
+        // adding one flips the switch. A domain typed under an off switch is
+        // dropped at submit by `descriptorsToGrants`, and blank is a valid
+        // grant, so no save-gate would catch that.
+        onEnable={() => onPermissionToggle(path, true)}
+        onPendingChange={
+          onDomainPendingChange ? (pending) => onDomainPendingChange(path, pending) : undefined
+        }
+        // Greys the rows and the mode checkbox rather than locking the whole
+        // control: adding stays live because adding is what turns the switch
+        // on, but a parked list must not read as a published one.
+        enabled={enabled}
+        disabled={disabled}
+      />
+    ) : undefined;
+  const titleLabel = portArg != null ? String(portArg) : undefined;
+  const reason = (meta.meta as { reason?: string }).reason ?? "";
+  const isOptional = (meta.meta as { isOptional?: boolean }).isOptional;
+  return (
+    <div data-perm-path={path}>
+      <PermissionRow
+        kind={kindKey}
+        reason={reason}
+        required={sectionOptionalOff ? undefined : !isOptional}
+        checked={enabled}
+        onCheckedChange={(v) => onPermissionToggle(path, v)}
+        label={titleLabel}
+        port={portArg}
+        onPortChange={onGrantValueChange ? (v) => onGrantValueChange(path, v) : undefined}
+        control={siloControl ?? domainControl}
+        url={urlArg}
+      />
+      {sectionOptionalOff && enabled && (
+        <p class="text-xs text-muted-foreground leading-snug italic mt-1.5">
+          Part of an inactive feature.
+        </p>
+      )}
+    </div>
+  );
+}