@chrysb/alphaclaw 0.4.6-beta.5 → 0.4.6-beta.7

package/lib/public/js/components/agent-send-modal.js

@@ -0,0 +1,142 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { ModalShell } from "./modal-shell.js";
+import { ActionButton } from "./action-button.js";
+import { PageHeader } from "./page-header.js";
+import { CloseIcon } from "./icons.js";
+import { useAgentSessions } from "../hooks/useAgentSessions.js";
+
+const html = htm.bind(h);
+
+export const AgentSendModal = ({
+  visible = false,
+  title = "Send to agent",
+  messageLabel = "Message",
+  messageRows = 8,
+  initialMessage = "",
+  resetKey = "",
+  submitLabel = "Send message",
+  loadingLabel = "Sending...",
+  cancelLabel = "Cancel",
+  onClose = () => {},
+  onSubmit = async () => true,
+  sessionFilter = undefined,
+}) => {
+  const {
+    sessions,
+    selectedSessionKey,
+    setSelectedSessionKey,
+    selectedSession,
+    loading: loadingSessions,
+    error: loadError,
+  } = useAgentSessions({ enabled: visible, filter: sessionFilter });
+  const [messageText, setMessageText] = useState("");
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    if (!visible) return;
+    setMessageText(String(initialMessage || ""));
+  }, [visible, initialMessage, resetKey]);
+
+  const handleSend = async () => {
+    if (!selectedSession || sending) return;
+    const trimmedMessage = String(messageText || "").trim();
+    if (!trimmedMessage) return;
+    setSending(true);
+    try {
+      const shouldClose = await onSubmit({
+        selectedSession,
+        selectedSessionKey,
+        message: trimmedMessage,
+      });
+      if (shouldClose !== false) {
+        onClose();
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${() => {
+        if (sending) return;
+        onClose();
+      }}
+      panelClassName="bg-modal border border-border rounded-xl p-5 max-w-lg w-full space-y-4"
+    >
+      <${PageHeader}
+        title=${title}
+        actions=${html`
+          <button
+            type="button"
+            onclick=${() => {
+              if (sending) return;
+              onClose();
+            }}
+            class="h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
+            aria-label="Close modal"
+          >
+            <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+          </button>
+        `}
+      />
+      <div class="space-y-2">
+        <label class="text-xs text-gray-500">Send to session</label>
+        <select
+          value=${selectedSessionKey}
+          onChange=${(event) =>
+            setSelectedSessionKey(String(event.currentTarget?.value || ""))}
+          disabled=${loadingSessions || sending}
+          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500"
+        >
+          ${sessions.length === 0
+            ? html`<option value="">No sessions available</option>`
+            : null}
+          ${sessions.map(
+            (sessionRow) => html`
+              <option value=${String(sessionRow?.key || "")}>
+                ${String(sessionRow?.label || sessionRow?.key || "Session")}
+              </option>
+            `,
+          )}
+        </select>
+        ${loadingSessions
+          ? html`<div class="text-xs text-gray-500">Loading sessions...</div>`
+          : null}
+        ${loadError ? html`<div class="text-xs text-red-400">${loadError}</div>` : null}
+      </div>
+      <div class="space-y-2">
+        <label class="text-xs text-gray-500">${messageLabel}</label>
+        <textarea
+          value=${messageText}
+          onInput=${(event) =>
+            setMessageText(String(event.currentTarget?.value || ""))}
+          disabled=${sending}
+          rows=${messageRows}
+          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500 font-mono leading-5"
+        ></textarea>
+      </div>
+      <div class="flex items-center justify-end gap-2">
+        <${ActionButton}
+          onClick=${onClose}
+          disabled=${sending}
+          tone="secondary"
+          size="md"
+          idleLabel=${cancelLabel}
+        />
+        <${ActionButton}
+          onClick=${handleSend}
+          disabled=${!selectedSession || loadingSessions || !!loadError || !String(messageText || "").trim()}
+          loading=${sending}
+          tone="primary"
+          size="md"
+          idleLabel=${submitLabel}
+          loadingLabel=${loadingLabel}
+        />
+      </div>
+    </${ModalShell}>
+  `;
+};

package/lib/public/js/components/doctor/fix-card-modal.js

@@ -1,11 +1,8 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { ModalShell } from "../modal-shell.js";
-import { ActionButton } from "../action-button.js";
 import { sendDoctorCardFix, updateDoctorCardStatus } from "../../lib/api.js";
 import { showToast } from "../toast.js";
-import { useAgentSessions } from "../../hooks/useAgentSessions.js";
+import { AgentSendModal } from "../agent-send-modal.js";
 
 const html = htm.bind(h);
 
@@ -15,33 +12,15 @@ export const DoctorFixCardModal = ({
   onClose = () => {},
   onComplete = () => {},
 }) => {
-  const {
-    sessions,
-    selectedSessionKey,
-    setSelectedSessionKey,
-    selectedSession,
-    loading: loadingSessions,
-    error: loadError,
-  } = useAgentSessions({ enabled: visible });
-
-  const [sending, setSending] = useState(false);
-  const [promptText, setPromptText] = useState("");
-
-  useEffect(() => {
-    if (!visible) return;
-    setPromptText(String(card?.fixPrompt || ""));
-  }, [visible, card?.fixPrompt, card?.id]);
-
-  const handleSend = async () => {
-    if (!card?.id || sending) return;
+  const handleSend = async ({ selectedSession, message }) => {
+    if (!card?.id) return false;
     try {
-      setSending(true);
       await sendDoctorCardFix({
         cardId: card.id,
         sessionId: selectedSession?.sessionId || "",
         replyChannel: selectedSession?.replyChannel || "",
         replyTo: selectedSession?.replyTo || "",
-        prompt: promptText,
+        prompt: message,
       });
       try {
         await updateDoctorCardStatus({ cardId: card.id, status: "fixed" });
@@ -57,77 +36,24 @@ export const DoctorFixCardModal = ({
         );
       }
       await onComplete();
-      onClose();
+      return true;
     } catch (error) {
       showToast(error.message || "Could not send Doctor fix request", "error");
-    } finally {
-      setSending(false);
+      return false;
     }
   };
 
   return html`
-    <${ModalShell}
+    <${AgentSendModal}
       visible=${visible}
+      title="Ask agent to fix"
+      messageLabel="Instructions"
+      initialMessage=${String(card?.fixPrompt || "")}
+      resetKey=${String(card?.id || "")}
+      submitLabel="Send fix request"
+      loadingLabel="Sending..."
       onClose=${onClose}
-      panelClassName="bg-modal border border-border rounded-xl p-5 max-w-lg w-full space-y-4"
-    >
-      <div class="space-y-1">
-        <h2 class="text-base font-semibold">Ask agent to fix</h2>
-        <p class="text-xs text-gray-400">
-          Send this Doctor finding to one of your agent sessions as a focused fix request.
-        </p>
-      </div>
-      <div class="space-y-2">
-        <label class="text-xs text-gray-500">Send to session</label>
-        <select
-          value=${selectedSessionKey}
-          onChange=${(event) => setSelectedSessionKey(String(event.currentTarget?.value || ""))}
-          disabled=${loadingSessions || sending}
-          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500"
-        >
-          ${sessions.map(
-            (sessionRow) => html`
-              <option value=${String(sessionRow?.key || "")}>
-                ${String(sessionRow?.label || sessionRow?.key || "Session")}
-              </option>
-            `,
-          )}
-        </select>
-        ${
-          loadingSessions
-            ? html`<div class="text-xs text-gray-500">Loading sessions...</div>`
-            : null
-        }
-        ${loadError ? html`<div class="text-xs text-red-400">${loadError}</div>` : null}
-      </div>
-      <div class="space-y-2">
-        <label class="text-xs text-gray-500">Instructions</label>
-        <textarea
-          value=${promptText}
-          onInput=${(event) => setPromptText(String(event.currentTarget?.value || ""))}
-          disabled=${sending}
-          rows="8"
-          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500 font-mono leading-5"
-        ></textarea>
-      </div>
-      <div class="flex items-center justify-end gap-2">
-        <${ActionButton}
-          onClick=${onClose}
-          disabled=${sending}
-          tone="secondary"
-          size="md"
-          idleLabel="Cancel"
-        />
-        <${ActionButton}
-          onClick=${handleSend}
-          disabled=${!selectedSession || loadingSessions || !!loadError || !String(promptText || "").trim()}
-          loading=${sending}
-          tone="primary"
-          size="md"
-          idleLabel="Send fix request"
-          loadingLabel="Sending..."
-        />
-      </div>
-    </${ModalShell}>
+      onSubmit=${handleSend}
+    />
   `;
 };

package/lib/public/js/components/envars.js

@@ -6,16 +6,44 @@ import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
 import { ActionButton } from "./action-button.js";
+import {
+  Brain2LineIcon,
+  ChatVoiceLineIcon,
+  ChevronDownIcon,
+  ImageAiLineIcon,
+  TextToSpeechLineIcon,
+} from "./icons.js";
+import { Tooltip } from "./tooltip.js";
 const html = htm.bind(h);
 
 const kGroupLabels = {
+  ai: "AI Provider Keys",
   github: "GitHub",
   channels: "Channels",
   tools: "Tools",
   custom: "Custom",
 };
 
-const kGroupOrder = ["github", "channels", "tools", "custom"];
+const kGroupOrder = ["ai", "github", "channels", "tools", "custom"];
+const kDefaultVisibleAiKeys = new Set(["OPENAI_API_KEY", "GEMINI_API_KEY"]);
+const kFeatureIconByName = {
+  Embeddings: {
+    Icon: Brain2LineIcon,
+    label: "Memory embeddings",
+  },
+  Image: {
+    Icon: ImageAiLineIcon,
+    label: "Image generation",
+  },
+  TTS: {
+    Icon: TextToSpeechLineIcon,
+    label: "Text to speech",
+  },
+  STT: {
+    Icon: ChatVoiceLineIcon,
+    label: "Speech to text",
+  },
+};
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
@@ -57,27 +85,80 @@ const kHintByKey = {
   ANTHROPIC_TOKEN: html`from <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
   OPENAI_API_KEY: html`from <a href="https://platform.openai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">platform.openai.com</a>`,
   GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">aistudio.google.com</a>`,
+  ELEVENLABS_API_KEY: html`from <a href="https://elevenlabs.io" target="_blank" class="hover:underline" style="color: var(--accent-link)">elevenlabs.io</a> · <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also supported`,
   GITHUB_TOKEN: html`classic PAT · <code class="text-xs bg-black/30 px-1 rounded">repo</code> scope · <a href="https://github.com/settings/tokens" target="_blank" class="hover:underline" style="color: var(--accent-link)">github settings</a>`,
   GITHUB_WORKSPACE_REPO: html`use <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or <code class="text-xs bg-black/30 px-1 rounded">https://github.com/owner/repo</code>`,
   TELEGRAM_BOT_TOKEN: html`from <a href="https://t.me/BotFather" target="_blank" class="hover:underline" style="color: var(--accent-link)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
   DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: var(--accent-link)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
+  MISTRAL_API_KEY: html`from <a href="https://console.mistral.ai" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.mistral.ai</a>`,
+  VOYAGE_API_KEY: html`from <a href="https://dash.voyageai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">dash.voyageai.com</a>`,
+  GROQ_API_KEY: html`from <a href="https://console.groq.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.groq.com</a>`,
+  DEEPGRAM_API_KEY: html`from <a href="https://console.deepgram.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.deepgram.com</a>`,
   BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: var(--accent-link)">brave.com/search/api</a> — free tier available`,
 };
 
 const getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || "";
 
+const getVisibleFeatureIcons = (envVar) =>
+  (Array.isArray(envVar?.features) ? envVar.features : []).filter(
+    (feature) => !!kFeatureIconByName[feature],
+  );
+
+const splitAiVars = (items) => {
+  const visible = [];
+  const hidden = [];
+  (items || []).forEach((item) => {
+    const hasValue = !!String(item?.value || "").trim();
+    if (kDefaultVisibleAiKeys.has(item?.key) || hasValue) {
+      visible.push(item);
+      return;
+    }
+    hidden.push(item);
+  });
+  return { visible, hidden };
+};
+
+const FeatureIcon = ({ feature }) => {
+  const entry = kFeatureIconByName[feature];
+  if (!entry) return null;
+  const { Icon, label } = entry;
+  return html`
+    <${Tooltip} text=${label} widthClass="w-auto" tooltipClassName="whitespace-nowrap">
+      <span
+        class="inline-flex items-center justify-center text-gray-500 hover:text-gray-300 focus-within:text-gray-300"
+        tabindex="0"
+        aria-label=${label}
+      >
+        <${Icon} className="w-3.5 h-3.5" />
+      </span>
+    </${Tooltip}>
+  `;
+};
+
 const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
   const hint = getHintContent(envVar);
+  const featureIcons = getVisibleFeatureIcons(envVar);
 
   return html`
     <div class="flex items-start gap-4 px-4 py-3">
-      <div class="shrink-0 flex items-center gap-2 pt-1.5" style="width: 200px">
-        <span
-          class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
-            ? "bg-green-500"
-            : "bg-gray-600"}"
-        />
-        <code class="text-sm truncate">${envVar.key}</code>
+      <div class="shrink-0" style="width: 200px">
+        <div class="flex items-center gap-2 pt-1.5">
+          <span
+            class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
+              ? "bg-green-500"
+              : "bg-gray-600"}"
+          />
+          <code class="text-sm truncate">${envVar.key}</code>
+        </div>
+        ${featureIcons.length > 0
+          ? html`
+              <div class="flex items-center gap-2 mt-1 pl-3.5">
+                ${featureIcons.map(
+                  (feature) => html`<${FeatureIcon} key=${feature} feature=${feature} />`,
+                )}
+              </div>
+            `
+          : null}
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1">
@@ -114,6 +195,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const [secretMaskEpoch, setSecretMaskEpoch] = useState(0);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [showAllAiKeys, setShowAllAiKeys] = useState(false);
   const [newKey, setNewKey] = useState("");
   const baselineSignatureRef = useRef("[]");
 
@@ -310,6 +392,61 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const pendingAtBottom = grouped.custom.filter((item) => pending.has(item.key));
     grouped.custom = [...nonPending, ...pendingAtBottom];
   }
+  const aiSplit = splitAiVars(grouped.ai || []);
+  const renderEnvRows = (items) =>
+    items.map(
+      (v) =>
+        html`<${EnvRow}
+          key=${`${secretMaskEpoch}:${v.key}`}
+          envVar=${v}
+          onChange=${handleChange}
+          onDelete=${handleDelete}
+          disabled=${saving}
+        />`,
+    );
+  const renderGroupCard = (groupKey) => {
+    const items = grouped[groupKey] || [];
+    if (!items.length) return null;
+    if (groupKey === "ai") {
+      const { visible, hidden } = aiSplit;
+      const expanded = showAllAiKeys && hidden.length > 0;
+      return html`
+        <div class="bg-surface border border-border rounded-xl overflow-hidden">
+          <h3 class="card-label text-xs px-4 pt-3 pb-2">
+            ${kGroupLabels[groupKey] || groupKey}
+          </h3>
+          <div class="divide-y divide-border">${renderEnvRows(visible)}</div>
+          ${hidden.length > 0
+            ? html`
+                <div class="border-t border-border px-4 py-2">
+                  <button
+                    type="button"
+                    onclick=${() => setShowAllAiKeys((prev) => !prev)}
+                    class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-300"
+                  >
+                    <${ChevronDownIcon}
+                      className=${`transition-transform ${expanded ? "rotate-180" : ""}`}
+                    />
+                    ${expanded ? "Show fewer" : `Show more (${hidden.length})`}
+                  </button>
+                </div>
+              `
+            : null}
+          ${expanded
+            ? html`<div class="divide-y divide-border border-t border-border">${renderEnvRows(hidden)}</div>`
+            : null}
+        </div>
+      `;
+    }
+    return html`
+      <div class="bg-surface border border-border rounded-xl overflow-hidden">
+        <h3 class="card-label text-xs px-4 pt-3 pb-2">
+          ${kGroupLabels[groupKey] || groupKey}
+        </h3>
+        <div class="divide-y divide-border">${renderEnvRows(items)}</div>
+      </div>
+    `;
+  };
 
   return html`
     <div class="space-y-4">
@@ -331,27 +468,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
-        .map(
-          (g) => html`
-            <div class="bg-surface border border-border rounded-xl overflow-hidden">
-              <h3 class="card-label text-xs px-4 pt-3 pb-2">
-                ${kGroupLabels[g] || g}
-              </h3>
-              <div class="divide-y divide-border">
-                ${grouped[g].map(
-                  (v) =>
-                    html`<${EnvRow}
-                      key=${`${secretMaskEpoch}:${v.key}`}
-                      envVar=${v}
-                      onChange=${handleChange}
-                      onDelete=${handleDelete}
-                      disabled=${saving}
-                    />`,
-                )}
-              </div>
-            </div>
-          `,
-        )}
+        .map((g) => renderGroupCard(g))}
 
       <div class="bg-surface border border-border rounded-xl overflow-hidden">
         <div class="flex items-center justify-between px-4 pt-3 pb-2">

package/lib/public/js/components/features.js

@@ -61,7 +61,7 @@ export const Features = ({ onSwitchTab }) => {
                         href="#"
                         onclick=${(e) => {
                           e.preventDefault();
-                          onSwitchTab?.("providers");
+                          onSwitchTab?.("envars");
                         }}
                         class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
                       >Add provider</a>

package/lib/public/js/components/gateway.js

@@ -326,6 +326,7 @@ export const Gateway = ({
   const showInspectButton = watchdogHealth === "degraded" && !!onOpenWatchdog;
   const showRepairButton =
     isRepairInProgress ||
+    (watchdogStatus?.health === "degraded" && !onOpenWatchdog) ||
     watchdogStatus?.lifecycle === "crash_loop" ||
     watchdogStatus?.health === "unhealthy" ||
     watchdogStatus?.health === "crashed";

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -81,6 +81,7 @@ export const GmailSetupWizard = ({
 }) => {
   const [step, setStep] = useState(0);
   const [projectIdInput, setProjectIdInput] = useState("");
+  const [editingProjectId, setEditingProjectId] = useState(false);
   const [localError, setLocalError] = useState("");
   const [projectIdResolved, setProjectIdResolved] = useState(false);
   const [watchEnabled, setWatchEnabled] = useState(false);
@@ -100,6 +101,7 @@ export const GmailSetupWizard = ({
     setStep(0);
     setLocalError("");
     setProjectIdInput("");
+    setEditingProjectId(false);
     setProjectIdResolved(false);
     setWatchEnabled(false);
     setSendingToAgent(false);
@@ -110,10 +112,11 @@ export const GmailSetupWizard = ({
   const hasProjectIdFromConfig = Boolean(
     String(clientConfig?.projectId || "").trim() || commands,
   );
-  const needsProjectId = !hasProjectIdFromConfig && !projectIdResolved;
+  const needsProjectId =
+    editingProjectId || (!hasProjectIdFromConfig && !projectIdResolved);
   const detectedProjectId =
-    String(clientConfig?.projectId || "").trim() ||
     String(projectIdInput || "").trim() ||
+    String(clientConfig?.projectId || "").trim() ||
     "<project-id>";
   const client =
     String(account?.client || clientConfig?.client || "default").trim() ||
@@ -135,6 +138,13 @@ export const GmailSetupWizard = ({
     showToast("Could not copy text", "error");
   }, []);
 
+  const handleChangeProjectId = useCallback(() => {
+    setLocalError("");
+    setProjectIdInput(String(clientConfig?.projectId || "").trim());
+    setProjectIdResolved(false);
+    setEditingProjectId(true);
+  }, [clientConfig?.projectId]);
+
   const handleFinish = async () => {
     try {
       setLocalError("");
@@ -159,6 +169,7 @@ export const GmailSetupWizard = ({
           client,
           projectId: String(projectIdInput || "").trim(),
         });
+        setEditingProjectId(false);
         setProjectIdResolved(true);
       } catch (err) {
         setLocalError(err.message || "Could not save project id");
@@ -230,7 +241,9 @@ export const GmailSetupWizard = ({
               <div
                 class="rounded-lg border border-border bg-black/20 p-3 space-y-2"
               >
-                <div class="text-sm">Project ID required</div>
+                <div class="text-sm">
+                  ${editingProjectId ? "Change project ID" : "Project ID required"}
+                </div>
                 <div class="text-xs text-gray-500">
                   Find it in the${" "}
                   <a
@@ -257,6 +270,9 @@ export const GmailSetupWizard = ({
         !needsProjectId && step === 0
           ? html`
               <div class="space-y-1">
+                <div class="text-xs text-gray-500">
+                  Using project <code>${detectedProjectId}</code>.
+                </div>
                 <div class="text-xs text-gray-500">
                   If <code>gcloud</code> is not installed on your computer,
                   follow the official install guide:${" "}
@@ -372,7 +388,15 @@ export const GmailSetupWizard = ({
       }
       <div class="grid grid-cols-2 gap-2 pt-2">
         ${step === 0
-          ? html`<div></div>`
+          ? html`${!needsProjectId
+              ? html`<button
+                  type="button"
+                  onclick=${handleChangeProjectId}
+                  class="justify-self-start text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+                >
+                  Change project ID
+                </button>`
+              : html`<div></div>`}`
           : html`<${ActionButton}
               onClick=${() => setStep((prev) => Math.max(prev - 1, 0))}
               disabled=${saving}