@gmickel/gno 2.4.0 → 2.6.0

package/src/serve/public/components/sessions/AutomationPanel.tsx

@@ -0,0 +1,800 @@
+import {
+  Loader2Icon,
+  PauseIcon,
+  PlayIcon,
+  Trash2Icon,
+  WorkflowIcon,
+} from "lucide-react";
+import { type FormEvent, useEffect, useId, useRef, useState } from "react";
+
+import type {
+  SessionAutomationRunResult,
+  SessionAutomationStatus,
+  SessionProfileStatus,
+  SessionSourceStatus,
+} from "./api";
+
+import { retryWording } from "../../../../sessions/format";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { sessionsApi } from "./api";
+
+const PROFILE_ID_PATTERN = "[a-z0-9][a-z0-9_-]{0,63}";
+const CADENCE_PATTERN = "[1-9][0-9]{0,5}[smhd]";
+
+/** Local-only preview returned before a trigger is switched on. */
+interface AutomationPreview {
+  archiveRoot: string;
+  sources: Array<{
+    id: string;
+    harness: string | null;
+    path: string | null;
+    collection: string | null;
+  }>;
+  collections: string[];
+  hook: { settings: string; command: string };
+  daemon: { state: string; command: string };
+  notes: string[];
+}
+
+type Trigger = "hook" | "schedule";
+
+const STATE_LABELS: Record<SessionProfileStatus["state"], string> = {
+  off: "off",
+  idle: "idle",
+  pending: "pending",
+  running: "running",
+  retrying: "retrying",
+  partial: "partial",
+  failed: "needs attention",
+};
+
+function stateVariant(
+  state: SessionProfileStatus["state"]
+): "secondary" | "outline" | "destructive" {
+  if (state === "failed") return "destructive";
+  if (state === "off" || state === "idle") return "outline";
+  return "secondary";
+}
+
+/** Poll status this often while a run is in progress. */
+const RUN_POLL_MS = 2000;
+
+type Notify = (text: string) => void;
+
+function scheduleLine(
+  daemonRunning: boolean,
+  nextDueAt: string | null,
+  at: (iso: string | null) => string
+): string {
+  if (!daemonRunning) return "not running: no daemon";
+  return nextDueAt ? `next ${at(nextDueAt)}` : "due time set on the next tick";
+}
+
+/** After Run now: the retry time, the recovery action, or remaining work. */
+function runOutcomeTail(
+  run: SessionAutomationRunResult,
+  profile: SessionProfileStatus,
+  daemonRunning: boolean,
+  at: (iso: string | null) => string
+): string {
+  if (run.outcome === "failed") {
+    const retry =
+      profile.state === "retrying"
+        ? retryWording(profile.retryAt, daemonRunning, new Date(), at)
+        : null;
+    if (retry) return `; ${retry}`;
+    return profile.recovery ? "; see the recovery action above" : "";
+  }
+  return run.pending ? "; work is still pending" : "";
+}
+
+function clockFor(timezone: string): (iso: string | null) => string {
+  return (iso) => {
+    if (!iso) return "never";
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return iso;
+    try {
+      return date.toLocaleString(undefined, { timeZone: timezone });
+    } catch {
+      return date.toLocaleString();
+    }
+  };
+}
+
+function CreateProfileForm({
+  sources,
+  onDone,
+  notify,
+}: {
+  sources: SessionSourceStatus[];
+  onDone: () => Promise<void>;
+  notify: Notify;
+}) {
+  const idField = useId();
+  const [id, setId] = useState("");
+  const [selected, setSelected] = useState<string[]>([]);
+  const [error, setError] = useState<{ text: string; nonce: number } | null>(
+    null
+  );
+  const [saving, setSaving] = useState(false);
+  const errorRef = useRef<HTMLParagraphElement>(null);
+  useEffect(() => {
+    if (error) errorRef.current?.focus();
+  }, [error]);
+  const fail = (text: string) =>
+    setError((current) => ({ text, nonce: (current?.nonce ?? 0) + 1 }));
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (selected.length === 0) {
+      fail("Select at least one registered source.");
+      return;
+    }
+    setSaving(true);
+    const result = await sessionsApi(
+      `/api/sessions/automation/${encodeURIComponent(id.trim())}`,
+      { method: "PUT", body: JSON.stringify({ sources: selected }) }
+    );
+    setSaving(false);
+    if (result.error) {
+      fail(result.error);
+      return;
+    }
+    const created = id.trim();
+    setError(null);
+    setId("");
+    setSelected([]);
+    await onDone();
+    notify(`Profile ${created} created; every trigger is off.`);
+  };
+
+  return (
+    <form
+      aria-label="Create automation profile"
+      className="space-y-3 rounded-lg border border-dashed border-border/70 p-4"
+      onSubmit={(event) => void submit(event)}
+    >
+      <label className="grid max-w-xs gap-1 text-sm" htmlFor={idField}>
+        Profile ID
+        <Input
+          id={idField}
+          onChange={(event) => setId(event.currentTarget.value)}
+          pattern={PROFILE_ID_PATTERN}
+          placeholder="claude"
+          required
+          value={id}
+        />
+      </label>
+      <fieldset className="space-y-1 text-sm">
+        <legend className="mb-1">Sources this profile imports</legend>
+        {sources.map((source) => (
+          <label className="flex items-center gap-2" key={source.id}>
+            <input
+              checked={selected.includes(source.id)}
+              onChange={(event) => {
+                const { checked } = event.currentTarget;
+                setSelected((current) =>
+                  checked
+                    ? [...current, source.id]
+                    : current.filter((item) => item !== source.id)
+                );
+              }}
+              type="checkbox"
+            />
+            <span className="break-all font-mono">{`${source.id} → ${source.collection}`}</span>
+          </label>
+        ))}
+      </fieldset>
+      {error && (
+        <p
+          className="break-words text-destructive text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          ref={errorRef}
+          role="alert"
+          tabIndex={-1}
+        >
+          {error.text}
+        </p>
+      )}
+      <Button disabled={saving} size="sm" type="submit">
+        {saving && <Loader2Icon className="animate-spin" />}
+        Create profile (everything stays off)
+      </Button>
+    </form>
+  );
+}
+
+function PreviewConfirm({
+  trigger,
+  preview,
+  cadence,
+  onCadence,
+  saving,
+  onConfirm,
+  onCancel,
+}: {
+  trigger: Trigger;
+  preview: AutomationPreview;
+  cadence: string;
+  onCadence: (value: string) => void;
+  saving: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const cadenceField = useId();
+  const groupRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    groupRef.current?.focus();
+  }, []);
+  return (
+    <div
+      aria-label={`Confirm ${trigger === "hook" ? "Claude Code hook" : "schedule"}`}
+      className="min-w-0 space-y-2 rounded-md border border-primary/40 bg-primary/5 p-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+      ref={groupRef}
+      role="group"
+      tabIndex={-1}
+    >
+      <p className="font-medium">
+        {trigger === "hook"
+          ? "Install the Claude Code SessionEnd hook?"
+          : "Run this profile on the daemon's schedule?"}
+      </p>
+      <ul className="list-disc space-y-1 pl-5">
+        {preview.sources.map((source) => (
+          <li className="break-all" key={source.id}>
+            <span className="font-mono">{source.id}</span>{" "}
+            {source.path ?? "not registered"} → {source.collection ?? "none"}
+          </li>
+        ))}
+        <li className="break-all">Archive: {preview.archiveRoot}</li>
+        {trigger === "hook" && (
+          <li className="break-all">
+            Adds one owned entry to {preview.hook.settings}; other hooks are
+            kept.
+          </li>
+        )}
+      </ul>
+      {trigger === "schedule" && (
+        <label className="grid max-w-[10rem] gap-1" htmlFor={cadenceField}>
+          Every (elapsed, min 1m)
+          <Input
+            id={cadenceField}
+            onChange={(event) => onCadence(event.currentTarget.value)}
+            pattern={CADENCE_PATTERN}
+            placeholder="1h"
+            required
+            value={cadence}
+          />
+        </label>
+      )}
+      <p className="text-muted-foreground">
+        Daemon:{" "}
+        {preview.daemon.state === "running"
+          ? "running"
+          : "not running: no daemon"}
+        . Runs happen only while{" "}
+        <code className="break-all font-mono text-xs">
+          {preview.daemon.command}
+        </code>{" "}
+        runs; GNO never installs or starts it.
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          disabled={saving || (trigger === "schedule" && !cadence.trim())}
+          onClick={onConfirm}
+          size="sm"
+        >
+          {saving && <Loader2Icon className="animate-spin" />}
+          Enable
+        </Button>
+        <Button onClick={onCancel} size="sm" variant="ghost">
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ProfileCard({
+  profile,
+  timezone,
+  daemonRunning,
+  localClient,
+  onChanged,
+  notify,
+  onRunActive,
+}: {
+  profile: SessionProfileStatus;
+  timezone: string;
+  daemonRunning: boolean;
+  localClient: boolean;
+  onChanged: () => Promise<void>;
+  notify: Notify;
+  onRunActive: (active: boolean) => void;
+}) {
+  const at = clockFor(timezone);
+  const hookSwitch = useId();
+  const scheduleSwitch = useId();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<{ text: string; nonce: number } | null>(
+    null
+  );
+  const [confirming, setConfirming] = useState<{
+    trigger: Trigger;
+    preview: AutomationPreview;
+  } | null>(null);
+  const [cadence, setCadence] = useState(profile.schedule?.cadence ?? "");
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const confirmRemoveRef = useRef<HTMLButtonElement>(null);
+  const removeRef = useRef<HTMLButtonElement>(null);
+  const removeReturnFocus = useRef(false);
+  // The Remove button unmounts when its confirm step opens: move focus to
+  // Confirm, and back to Remove on Cancel.
+  useEffect(() => {
+    if (confirmRemove) confirmRemoveRef.current?.focus();
+    else if (removeReturnFocus.current) {
+      removeReturnFocus.current = false;
+      removeRef.current?.focus();
+    }
+  }, [confirmRemove]);
+  const [lastRun, setLastRun] = useState<SessionAutomationRunResult | null>(
+    null
+  );
+  const base = `/api/sessions/automation/${encodeURIComponent(profile.id)}`;
+  const switches = {
+    hook: useRef<HTMLInputElement>(null),
+    schedule: useRef<HTMLInputElement>(null),
+  };
+  const outcomeRef = useRef<HTMLParagraphElement>(null);
+  const errorRef = useRef<HTMLParagraphElement>(null);
+  // Disabled buttons drop keyboard focus; hand it to the outcome instead.
+  useEffect(() => {
+    if (lastRun) outcomeRef.current?.focus();
+  }, [lastRun]);
+  useEffect(() => {
+    if (error) errorRef.current?.focus();
+  }, [error]);
+
+  const closeConfirm = (trigger: Trigger) => {
+    setConfirming(null);
+    switches[trigger].current?.focus();
+  };
+
+  const call = async <T,>(
+    label: string,
+    endpoint: string,
+    init: RequestInit
+  ): Promise<T | null> => {
+    setBusy(label);
+    const result = await sessionsApi<T>(endpoint, init);
+    setBusy(null);
+    if (result.error) {
+      const text = result.error;
+      setError((current) => ({ text, nonce: (current?.nonce ?? 0) + 1 }));
+      return null;
+    }
+    setError(null);
+    return result.data;
+  };
+
+  const startEnable = async (trigger: Trigger) => {
+    const preview = await call<AutomationPreview>(
+      "preview",
+      `${base}/preview`,
+      {
+        method: "GET",
+      }
+    );
+    if (preview) setConfirming({ trigger, preview });
+  };
+
+  const confirmEnable = async () => {
+    if (!confirming) return;
+    const body =
+      confirming.trigger === "hook"
+        ? { hook: { harness: "claude-code" } }
+        : { schedule: { cadence: cadence.trim() } };
+    const done = await call("enable", `${base}/enable`, {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+    if (done) {
+      closeConfirm(confirming.trigger);
+      await onChanged();
+    }
+  };
+
+  const disable = async (which: Partial<Record<Trigger, boolean>>) => {
+    const done = await call("disable", `${base}/disable`, {
+      method: "POST",
+      body: JSON.stringify(which),
+    });
+    if (!done) return;
+    await onChanged();
+    // The Pause button is gone once nothing is enabled: land on a switch.
+    (which.schedule && !which.hook
+      ? switches.schedule
+      : switches.hook
+    ).current?.focus();
+  };
+
+  const toggle = (trigger: Trigger, on: boolean) => {
+    // Switches stay focusable while a request or confirmation is open.
+    if (busy !== null || confirming !== null) return;
+    if (on) void startEnable(trigger);
+    else void disable({ [trigger]: true });
+  };
+
+  const runNow = async () => {
+    onRunActive(true);
+    const result = await call<SessionAutomationRunResult>(
+      "run",
+      "/api/sessions/automation/run",
+      { method: "POST", body: JSON.stringify({ profileId: profile.id }) }
+    ).finally(() => onRunActive(false));
+    if (result) {
+      setLastRun(result);
+      await onChanged();
+    }
+  };
+
+  const remove = async () => {
+    const done = await call("remove", base, { method: "DELETE" });
+    if (!done) return;
+    // Announce (and focus) before the refresh unmounts this card.
+    notify(`Profile ${profile.id} removed; archived sessions were kept.`);
+    await onChanged();
+  };
+
+  const retryLine = retryWording(
+    profile.retryAt,
+    daemonRunning,
+    new Date(),
+    at
+  );
+  const hookOn = profile.hook?.enabled === true;
+  const scheduleOn = profile.schedule?.enabled === true;
+  const run = profile.lastRun;
+  return (
+    <li className="min-w-0 space-y-3 rounded-lg border border-border/60 p-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="break-all font-mono font-semibold">{profile.id}</h3>
+            <Badge variant={stateVariant(profile.state)}>
+              {STATE_LABELS[profile.state]}
+            </Badge>
+          </div>
+          <p className="break-words text-muted-foreground text-sm">
+            {`Sources ${profile.sources.join(", ")} → ${profile.collections.join(", ") || "no collection"} · ${profile.limit} units per source per run`}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            aria-label={`Run ${profile.id} now`}
+            disabled={busy !== null}
+            onClick={() => void runNow()}
+            size="sm"
+          >
+            {busy === "run" ? (
+              <Loader2Icon className="animate-spin" />
+            ) : (
+              <PlayIcon />
+            )}
+            Run now
+          </Button>
+          {localClient && (hookOn || scheduleOn) && (
+            <Button
+              aria-label={`Pause ${profile.id}`}
+              disabled={busy !== null}
+              onClick={() => void disable({})}
+              size="sm"
+              variant="outline"
+            >
+              <PauseIcon />
+              Pause
+            </Button>
+          )}
+          {localClient &&
+            (confirmRemove ? (
+              <>
+                <Button
+                  aria-disabled={busy !== null}
+                  onClick={() => {
+                    if (busy === null) void remove();
+                  }}
+                  ref={confirmRemoveRef}
+                  size="sm"
+                  variant="destructive"
+                >
+                  Confirm remove
+                </Button>
+                <Button
+                  onClick={() => {
+                    setConfirmRemove(false);
+                    removeReturnFocus.current = true;
+                  }}
+                  size="sm"
+                  variant="ghost"
+                >
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <Button
+                aria-label={`Remove profile ${profile.id}`}
+                disabled={busy !== null}
+                onClick={() => setConfirmRemove(true)}
+                ref={removeRef}
+                size="sm"
+                variant="ghost"
+              >
+                <Trash2Icon />
+                Remove
+              </Button>
+            ))}
+        </div>
+      </div>
+
+      <div className="grid gap-2 text-sm sm:grid-cols-2">
+        <label className="flex items-start gap-2" htmlFor={hookSwitch}>
+          <input
+            aria-disabled={busy !== null || confirming !== null}
+            checked={hookOn}
+            className="mt-1"
+            disabled={!localClient}
+            id={hookSwitch}
+            onChange={(event) => toggle("hook", event.currentTarget.checked)}
+            ref={switches.hook}
+            role="switch"
+            type="checkbox"
+          />
+          <span className="min-w-0">
+            Claude Code SessionEnd hook
+            <span className="block text-muted-foreground text-xs">
+              {hookOn
+                ? profile.hook?.installed === false
+                  ? "on, but the settings entry is missing"
+                  : "on: session ends mark this profile pending"
+                : "off"}
+            </span>
+          </span>
+        </label>
+        <label className="flex items-start gap-2" htmlFor={scheduleSwitch}>
+          <input
+            aria-disabled={busy !== null || confirming !== null}
+            checked={scheduleOn}
+            className="mt-1"
+            disabled={!localClient}
+            id={scheduleSwitch}
+            onChange={(event) =>
+              toggle("schedule", event.currentTarget.checked)
+            }
+            ref={switches.schedule}
+            role="switch"
+            type="checkbox"
+          />
+          <span className="min-w-0">
+            Daemon schedule
+            <span className="block text-muted-foreground text-xs">
+              {scheduleOn
+                ? `every ${profile.schedule?.cadence}; ${scheduleLine(
+                    daemonRunning,
+                    profile.schedule?.nextDueAt ?? null,
+                    at
+                  )}`
+                : "off"}
+            </span>
+          </span>
+        </label>
+      </div>
+
+      {confirming && (
+        <PreviewConfirm
+          cadence={cadence}
+          onCadence={setCadence}
+          onCancel={() => closeConfirm(confirming.trigger)}
+          onConfirm={() => void confirmEnable()}
+          preview={confirming.preview}
+          saving={busy === "enable"}
+          trigger={confirming.trigger}
+        />
+      )}
+
+      <dl className="grid gap-x-4 gap-y-1 text-sm sm:grid-cols-[auto_1fr]">
+        {profile.pending && profile.state !== "failed" && (
+          <>
+            <dt className="text-muted-foreground">Pending</dt>
+            <dd>
+              since {at(profile.pending.since)} (
+              {profile.pending.triggers.join(", ") || "continuation"})
+              {retryLine ? `; ${retryLine}` : ""}
+            </dd>
+          </>
+        )}
+        {profile.running && (
+          <>
+            <dt className="text-muted-foreground">Running</dt>
+            <dd>since {at(profile.running.startedAt)}</dd>
+          </>
+        )}
+        <dt className="text-muted-foreground">Last run</dt>
+        <dd className="break-words">
+          {run
+            ? `${at(run.finishedAt)}: ${run.outcome}${run.reason ? ` (${run.reason})` : ""}; ${run.threads.imported} imported, ${run.threads.updated} updated, ${run.units.failed} failed units`
+            : "never"}
+        </dd>
+        <dt className="text-muted-foreground">Last success</dt>
+        <dd>{at(profile.lastSuccessAt)}</dd>
+      </dl>
+
+      {profile.recovery && (
+        <p
+          className="break-words rounded-md bg-amber-500/10 px-3 py-2 text-amber-900 text-sm dark:text-amber-100"
+          role="status"
+        >
+          {profile.recovery}
+        </p>
+      )}
+      {lastRun && (
+        <p
+          className="break-words text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          ref={outcomeRef}
+          role="status"
+          tabIndex={-1}
+        >
+          Run now:{" "}
+          {lastRun.ran
+            ? `${lastRun.outcome}${lastRun.reason ? ` (${lastRun.reason})` : ""}`
+            : `not started (${lastRun.reason ?? "unknown"})`}
+          {runOutcomeTail(lastRun, profile, daemonRunning, at)}
+        </p>
+      )}
+      {error && (
+        <p
+          className="break-words text-destructive text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          ref={errorRef}
+          role="alert"
+          tabIndex={-1}
+        >
+          {error.text}
+        </p>
+      )}
+    </li>
+  );
+}
+
+export interface AutomationPanelProps {
+  automation: SessionAutomationStatus;
+  sources: SessionSourceStatus[];
+  localClient: boolean;
+  onChanged: () => Promise<void>;
+}
+
+/**
+ * Opt-in automation: every trigger is off until a same-host owner switches
+ * it on after reviewing the preview. Remote browsers can read status and run
+ * a configured profile, never enable machine integrations.
+ */
+export function AutomationPanel({
+  automation,
+  sources,
+  localClient,
+  onChanged,
+}: AutomationPanelProps) {
+  const at = clockFor(automation.timezone);
+  const daemonRunning = automation.daemon.state === "running";
+  const [notice, setNotice] = useState<{ text: string; nonce: number } | null>(
+    null
+  );
+  const noticeRef = useRef<HTMLParagraphElement>(null);
+  useEffect(() => {
+    if (notice) noticeRef.current?.focus();
+  }, [notice]);
+  const notify: Notify = (text) =>
+    setNotice((current) => ({ text, nonce: (current?.nonce ?? 0) + 1 }));
+
+  // Poll while a run is in progress (here, in the daemon, or requested from
+  // this page) so running/pending states appear without a reload.
+  const [runsInFlight, setRunsInFlight] = useState(0);
+  const onRunActive = (active: boolean) =>
+    setRunsInFlight((count) => Math.max(0, count + (active ? 1 : -1)));
+  const active =
+    runsInFlight > 0 ||
+    automation.profiles.some(
+      (profile) =>
+        profile.state === "running" ||
+        (daemonRunning && profile.state === "pending")
+    );
+  const refresh = useRef(onChanged);
+  refresh.current = onChanged;
+  useEffect(() => {
+    if (!active) return;
+    let polling = false;
+    const timer = setInterval(() => {
+      if (polling) return;
+      polling = true;
+      void refresh.current().finally(() => {
+        polling = false;
+      });
+    }, RUN_POLL_MS);
+    return () => clearInterval(timer);
+  }, [active]);
+  let daemonLine = "not running: no daemon";
+  if (daemonRunning) {
+    daemonLine = `running (heartbeat ${at(automation.daemon.heartbeatAt)})`;
+  } else if (automation.daemon.state === "stale") {
+    daemonLine = `stale (last heartbeat ${at(automation.daemon.heartbeatAt)})`;
+  }
+  return (
+    <section
+      aria-labelledby="sessions-automation-heading"
+      className="space-y-4"
+    >
+      <div className="space-y-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <WorkflowIcon aria-hidden="true" className="size-5 text-primary" />
+          <h2
+            className="font-semibold text-xl"
+            id="sessions-automation-heading"
+          >
+            Automation
+          </h2>
+          <Badge variant="outline">
+            {automation.profiles.some(
+              (profile) => profile.hook?.enabled || profile.schedule?.enabled
+            )
+              ? "opt-in enabled"
+              : "manual"}
+          </Badge>
+        </div>
+        <p className="text-muted-foreground text-sm">
+          Off by default. A hook or schedule only marks a profile pending; the
+          import runs in <span className="font-mono">gno daemon</span> on this
+          archive (or with Run now).{" "}
+          <span className="font-mono">gno serve</span> never runs it. Daemon:{" "}
+          {daemonLine}. Times in {automation.timezone}.
+        </p>
+        {!localClient && (
+          <p className="text-muted-foreground text-xs">
+            Only a browser on this machine can change hooks or schedules.
+          </p>
+        )}
+      </div>
+      {automation.profiles.length > 0 && (
+        <ul className="space-y-3">
+          {automation.profiles.map((profile) => (
+            <ProfileCard
+              daemonRunning={daemonRunning}
+              key={profile.id}
+              localClient={localClient}
+              notify={notify}
+              onChanged={onChanged}
+              onRunActive={onRunActive}
+              profile={profile}
+              timezone={automation.timezone}
+            />
+          ))}
+        </ul>
+      )}
+      {localClient && sources.length > 0 && (
+        <CreateProfileForm
+          notify={notify}
+          onDone={onChanged}
+          sources={sources}
+        />
+      )}
+      {notice && (
+        <p
+          className="break-words text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          ref={noticeRef}
+          role="status"
+          tabIndex={-1}
+        >
+          {notice.text}
+        </p>
+      )}
+    </section>
+  );
+}