@silicaclaw/cli 2026.3.19-6 → 2026.3.19-7

package/apps/local-console/public/app/overview.js

@@ -0,0 +1,325 @@
+export function createOverviewController({
+  ago,
+  api,
+  describeCurrentMode,
+  escapeHtml,
+  shortId,
+  t,
+  writeUiCache,
+}) {
+  function renderOverviewGuide(overview, profile) {
+    const hasDisplayName = Boolean(String(profile?.display_name || overview?.display_name || "").trim());
+    const hasBio = Boolean(String(profile?.bio || "").trim());
+    const hasTags = Array.isArray(profile?.tags) && profile.tags.length > 0;
+    const profileComplete = hasDisplayName || hasBio || hasTags;
+    const publicEnabled = Boolean(profile?.public_enabled ?? overview?.public_enabled);
+    const announcedRecently = Boolean(overview?.last_broadcast_at);
+
+    const guideStatusEl = document.getElementById("overviewGuideStatus");
+    const profileStepEl = document.getElementById("overviewStepProfile");
+    const publicStepEl = document.getElementById("overviewStepPublic");
+    const broadcastStepEl = document.getElementById("overviewStepBroadcast");
+
+    profileStepEl.classList.toggle("is-done", profileComplete);
+    publicStepEl.classList.toggle("is-done", publicEnabled);
+    broadcastStepEl.classList.toggle("is-done", announcedRecently);
+
+    document.getElementById("overviewStepProfileStatus").textContent = profileComplete
+      ? t("overview.stepDone")
+      : t("overview.stepIncomplete");
+    document.getElementById("overviewStepProfileBody").textContent = profileComplete
+      ? t("overview.stepProfileDone")
+      : t("overview.stepProfileBody");
+
+    document.getElementById("overviewStepPublicStatus").textContent = publicEnabled
+      ? t("overview.stepDone")
+      : t("overview.stepIncomplete");
+    document.getElementById("overviewStepPublicBody").textContent = publicEnabled
+      ? t("overview.stepPublicDone")
+      : t("overview.stepPublicBody");
+
+    document.getElementById("overviewStepBroadcastStatus").textContent = announcedRecently
+      ? t("overview.stepDone")
+      : t("overview.stepWaiting");
+    document.getElementById("overviewStepBroadcastBody").textContent = announcedRecently
+      ? t("overview.stepBroadcastDone")
+      : t("overview.stepBroadcastBody");
+
+    if (publicEnabled && announcedRecently) {
+      guideStatusEl.textContent = t("overview.guideLive");
+      guideStatusEl.className = "pill ok";
+    } else if (profileComplete && publicEnabled) {
+      guideStatusEl.textContent = t("overview.guideReadyToAnnounce");
+      guideStatusEl.className = "pill warn";
+    } else {
+      guideStatusEl.textContent = t("overview.guideNeedSetup");
+      guideStatusEl.className = "pill warn";
+    }
+  }
+
+  async function refreshOverview({
+    getAgentsPage,
+    getOnlyShowOnline,
+    onPageChange,
+    setOverviewMode,
+    setVisibleRemotePublicCount,
+  }) {
+    const [overviewRes, discoveredRes, peerRes, profileRes, bridgeRes, networkCfgRes, networkStatsRes] = await Promise.allSettled([
+      api("/api/overview"),
+      api("/api/search?q="),
+      api("/api/peers"),
+      api("/api/profile"),
+      api("/api/openclaw/bridge"),
+      api("/api/network/config"),
+      api("/api/network/stats"),
+    ]);
+    if (overviewRes.status !== "fulfilled") {
+      throw overviewRes.reason;
+    }
+    const o = overviewRes.value.data;
+    const allProfiles = discoveredRes.status === "fulfilled" ? discoveredRes.value.data || [] : [];
+    const peers = peerRes.status === "fulfilled" ? peerRes.value.data || {} : {};
+    const currentProfile = profileRes.status === "fulfilled" ? profileRes.value.data || {} : {};
+    const bridge = bridgeRes.status === "fulfilled" ? bridgeRes.value.data || {} : {};
+    const networkCfg = networkCfgRes.status === "fulfilled" ? networkCfgRes.value.data || {} : {};
+    const networkStats = networkStatsRes.status === "fulfilled" ? networkStatsRes.value.data || {} : {};
+    const peerItems = peers.items || [];
+    const mergedById = new Map();
+
+    for (const agent of allProfiles) mergedById.set(agent.agent_id, agent);
+
+    for (const peer of peerItems) {
+      const existing = mergedById.get(peer.peer_id);
+      if (existing) {
+        if (peer.status && !existing.online) existing.online = peer.status === "online";
+        if (peer.last_seen_at && (!existing.updated_at || peer.last_seen_at > existing.updated_at)) {
+          existing.updated_at = peer.last_seen_at;
+        }
+        continue;
+      }
+      mergedById.set(peer.peer_id, {
+        agent_id: peer.peer_id,
+        display_name: shortId(peer.peer_id),
+        online: peer.status === "online",
+        updated_at: peer.last_seen_at || peer.first_seen_at || 0,
+      });
+    }
+
+    const all = Array.from(mergedById.values());
+    const filtered = getOnlyShowOnline() ? all.filter((agent) => agent.online) : all;
+    setVisibleRemotePublicCount(all.filter((agent) => !agent.is_self && agent.online).length);
+    const totalAgentPages = Math.max(1, Math.ceil(filtered.length / 10));
+    let agentsPage = Math.min(Math.max(1, getAgentsPage()), totalAgentPages);
+    onPageChange(agentsPage);
+    const pagedAgents = filtered.slice((agentsPage - 1) * 10, agentsPage * 10);
+    const discoveredCount = Math.max(Number(o.discovered_count || 0), Number(peers.total || 0), all.length);
+    const onlineCount = Math.max(Number(o.online_count || 0), Number(peers.online || 0), all.filter((agent) => agent.online).length);
+    const offlineCount = Math.max(0, discoveredCount - onlineCount);
+
+    const overviewCardsHtml = [
+      [t("overview.discovered"), discoveredCount],
+      [t("overview.online"), onlineCount],
+      [t("overview.offline"), offlineCount],
+      [t("overview.presenceTtl"), `${Math.floor(o.presence_ttl_ms / 1000)}s`],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value">${v}</div></div>`).join("");
+    document.getElementById("overviewCards").innerHTML = overviewCardsHtml;
+
+    const brandVersionText = o.app_version ? `v${o.app_version}` : "-";
+    document.getElementById("brandVersion").textContent = brandVersionText;
+
+    const snapshotHtml = `
+      <div class="snapshot-card">
+        <div class="snapshot-card__identity">
+          <div class="snapshot-card__label">Current Node</div>
+          <div class="snapshot-card__title">${escapeHtml(o.display_name || t("overview.unnamed"))}</div>
+          <div class="snapshot-card__subtle mono">${escapeHtml(o.agent_id || "-")}</div>
+        </div>
+        <div class="snapshot-card__grid">
+          <div class="snapshot-card__item"><div class="label">Version</div><span class="value-inline">${escapeHtml(o.app_version || "-")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Public</div><span class="value-inline">${o.public_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Broadcast</div><span class="value-inline">${o.broadcast_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Last Broadcast</div><span class="value-inline">${escapeHtml(ago(o.last_broadcast_at))}</span></div>
+        </div>
+      </div>
+    `;
+    document.getElementById("snapshot").innerHTML = snapshotHtml;
+    const heroModeText = o.social?.network_mode || "-";
+    setOverviewMode(heroModeText);
+    document.getElementById("heroMode").textContent = heroModeText;
+    document.getElementById("overviewModeHint").textContent = t("overview.modeCurrentSource", {
+      mode: describeCurrentMode(t, heroModeText),
+      hint: t("overview.modeCacheHint"),
+    });
+
+    const pillBroadcastText = o.broadcast_enabled ? t("overview.pillRunning") : t("overview.pillPaused");
+    const pillBroadcastClassName = `pill ${o.broadcast_enabled ? "ok" : "warn"}`;
+    document.getElementById("pillBroadcast").textContent = pillBroadcastText;
+    document.getElementById("pillBroadcast").className = pillBroadcastClassName;
+
+    const openclawRunning = !!bridge.openclaw_runtime?.running;
+    const openclawDetected = !!bridge.openclaw_installation?.detected || openclawRunning || !!bridge.openclaw_runtime?.gateway_reachable;
+    const skillInstalled = !!bridge.skill_learning?.installed;
+    const globalMode = heroModeText === "global-preview";
+    const networkDiag = networkStats.adapter_diagnostics_summary || {};
+    const lastNetworkError = String(networkDiag.last_error || o.last_broadcast_error || "").trim();
+    const broadcastHealthy = o.broadcast_enabled && !lastNetworkError;
+    const roleKey = openclawRunning
+      ? "overview.homeRoleListener"
+      : openclawDetected
+        ? "overview.homeRoleStandby"
+        : "overview.homeRoleBroadcaster";
+    const titleKey = openclawRunning
+      ? "overview.homeTitleListener"
+      : openclawDetected
+        ? "overview.homeTitleOffline"
+        : "overview.homeTitleBroadcaster";
+    const bodyKey = openclawRunning
+      ? "overview.homeBodyListener"
+      : openclawDetected
+        ? "overview.homeBodyOffline"
+        : "overview.homeBodyBroadcaster";
+
+    document.getElementById("homeMissionTitle").textContent = t(titleKey);
+    document.getElementById("homeMissionBody").textContent = t(bodyKey);
+    document.getElementById("homeMissionStatus").innerHTML = [
+      `<span class="mission-status-pill"><strong>${t("overview.homeRole")}</strong> ${t(roleKey)}</span>`,
+      `<span class="mission-status-pill"><strong>${t("overview.homeOpenClaw")}</strong> ${openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped")}</span>`,
+      `<span class="mission-status-pill"><strong>${t("overview.homeGlobalMode")}</strong> ${globalMode ? t("overview.homeGlobalReady") : t("overview.homeNotGlobal")}</span>`,
+    ].join("");
+    document.getElementById("homePriorityGrid").innerHTML = [
+      [t("overview.homeOpenClaw"), openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped"), openclawRunning ? t("overview.homeMetaRunning") : t("overview.homeMetaNotRunning")],
+      [t("overview.homeGlobalMode"), globalMode ? t("overview.homeGlobalReady") : t("overview.homeNotGlobal"), globalMode ? t("overview.homeMetaGlobal") : t("overview.homeMetaNotGlobal")],
+      [t("overview.homeBroadcastHealth"), broadcastHealthy ? t("overview.homeHealthy") : t("overview.homeDegraded"), lastNetworkError || `Last broadcast ${ago(o.last_broadcast_at)}`],
+      [t("overview.homePeers"), String(all.filter((agent) => !agent.is_self && agent.online).length), t("overview.homeMetaPeers", { online: String(onlineCount), discovered: String(discoveredCount) })],
+    ].map(([label, value, meta]) => `
+      <div class="priority-card">
+        <div class="priority-card__label">${label}</div>
+        <div class="priority-card__value">${escapeHtml(value)}</div>
+        <div class="priority-card__meta">${escapeHtml(meta)}</div>
+      </div>
+    `).join("");
+    document.getElementById("homeBriefList").innerHTML = [
+      [t("overview.homeBriefNetwork"), t("overview.homeBriefNetworkValue", {
+        mode: describeCurrentMode(t, heroModeText),
+        relay: String(networkDiag.signaling_url || networkCfg.adapter_extra?.signaling_url || "-"),
+        room: String(networkDiag.room || networkCfg.adapter_extra?.room || "-"),
+      })],
+      [t("overview.homeBriefBridge"), t("overview.homeBriefBridgeValue", {
+        runtime: openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped"),
+        skill: skillInstalled ? t("common.yes") : t("common.no"),
+      })],
+      [t("overview.homeBriefNextAction"), !broadcastHealthy ? t("overview.homeBriefActionStabilize") : openclawRunning ? t("overview.homeBriefActionBroadcast") : t("overview.homeBriefActionLearn")],
+    ].map(([label, value]) => `
+      <div class="home-brief__item">
+        <div class="home-brief__label">${label}</div>
+        <div class="home-brief__value">${escapeHtml(value)}</div>
+      </div>
+    `).join("");
+
+    const init = o.init_state || {};
+    const onboarding = o.onboarding || {};
+    const notice = document.getElementById("initNotice");
+    const discoveryHint = document.getElementById("publicDiscoveryHint");
+    if (onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created) {
+      notice.classList.add("show");
+      notice.textContent = t("overview.onboardingNotice", {
+        mode: onboarding.mode || "-",
+        discoverable: onboarding.discoverable ? t("common.yes") : t("common.no"),
+      });
+    } else {
+      notice.classList.remove("show");
+    }
+    discoveryHint.style.display = onboarding.can_enable_public_discovery || onboarding.public_enabled ? "block" : "none";
+    renderOverviewGuide(o, currentProfile);
+
+    if (!filtered.length) {
+      const agentsCountHintText = t("overview.agentsZero");
+      const agentsWrapHtml = `<div class="label">${t("overview.noDiscoveredAgents")}</div>`;
+      document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+      document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+      writeUiCache("silicaclaw_ui_overview", {
+        overviewCardsHtml,
+        brandVersionText,
+        snapshotText: snapshotHtml,
+        heroModeText,
+        pillBroadcastText,
+        pillBroadcastClassName,
+        agentsCountHintText,
+        agentsWrapHtml,
+      });
+      return;
+    }
+
+    const agentsCountHintText = getOnlyShowOnline()
+      ? t("overview.agentsOnlineFilter", { shown: String(filtered.length), total: String(all.length) })
+      : t("overview.agentsDiscovered", { count: String(filtered.length) });
+    const renderAvatar = (agent) => {
+      const avatar = String(agent.avatar_url || "").trim();
+      if (avatar) {
+        return `<img class="agent-card__avatar" src="${avatar}" alt="${escapeHtml(agent.display_name || "agent")}" loading="lazy" />`;
+      }
+      const label = String(agent.display_name || agent.agent_id || "?").trim();
+      const initial = escapeHtml((label[0] || "?").toUpperCase());
+      return `<div class="agent-card__avatar-fallback">${initial}</div>`;
+    };
+    const renderTags = (agent) => {
+      const tags = Array.isArray(agent.tags) ? agent.tags.slice(0, 4) : [];
+      if (!tags.length) return "";
+      return `<div class="agent-card__tags">${tags.map((tag) => `<span class="tag-chip">${escapeHtml(String(tag))}</span>`).join("")}</div>`;
+    };
+    const agentsWrapHtml = `
+      <div class="agent-list">
+        ${pagedAgents.map((a) => `
+          <div class="agent-card">
+            ${renderAvatar(a)}
+            <div class="agent-card__main">
+              <div class="agent-card__row">
+                <div class="agent-card__name">${escapeHtml(a.display_name || t("overview.unnamed"))}</div>
+                <div class="agent-card__id mono">${shortId(a.agent_id)}</div>
+              </div>
+              <div class="agent-card__bio">${escapeHtml(a.bio || t("preview.noBioYet"))}</div>
+              ${renderTags(a)}
+            </div>
+            <div class="${a.online ? "online" : "offline"}">${a.online ? t("overview.online") : t("overview.offline")}</div>
+            <div class="agent-card__meta"><div class="agent-card__updated">${ago(a.updated_at)}</div></div>
+          </div>
+        `).join("")}
+        <div class="agent-list__footer">
+          <div class="agent-list__page">${t("overview.pageStatus", { page: String(agentsPage), total: String(totalAgentPages) })}</div>
+          <div class="agent-list__pager">
+            <button class="secondary" type="button" id="agentsPrevPageBtn" ${agentsPage <= 1 ? "disabled" : ""}>${t("overview.prevPage")}</button>
+            <button class="secondary" type="button" id="agentsNextPageBtn" ${agentsPage >= totalAgentPages ? "disabled" : ""}>${t("overview.nextPage")}</button>
+          </div>
+        </div>
+      </div>
+    `;
+    document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+    document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+    document.getElementById("agentsPrevPageBtn")?.addEventListener("click", async () => {
+      if (agentsPage <= 1) return;
+      agentsPage -= 1;
+      onPageChange(agentsPage);
+      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+    });
+    document.getElementById("agentsNextPageBtn")?.addEventListener("click", async () => {
+      if (agentsPage >= totalAgentPages) return;
+      agentsPage += 1;
+      onPageChange(agentsPage);
+      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+    });
+    writeUiCache("silicaclaw_ui_overview", {
+      overviewCardsHtml,
+      brandVersionText,
+      snapshotText: snapshotHtml,
+      heroModeText,
+      pillBroadcastText,
+      pillBroadcastClassName,
+      agentsCountHintText,
+      agentsWrapHtml,
+    });
+  }
+
+  return {
+    refreshOverview,
+  };
+}

package/apps/local-console/public/app/profile.js

@@ -0,0 +1,234 @@
+export function createProfileController({
+  api,
+  field,
+  normalizeTagsInput,
+  parseTags,
+  setFeedback,
+  setProfileNextStepVisible,
+  t,
+  toast,
+  toPrettyJson,
+}) {
+  const state = {
+    baseline: "",
+    dirty: false,
+    saving: false,
+  };
+
+  function profileSnapshot(form) {
+    const displayNameEl = field(form, "display_name");
+    const bioEl = field(form, "bio");
+    const avatarEl = field(form, "avatar_url");
+    const tagsEl = field(form, "tags");
+    const publicEl = field(form, "public_enabled");
+    return JSON.stringify({
+      display_name: String(displayNameEl?.value || "").trim(),
+      bio: String(bioEl?.value || "").trim(),
+      avatar_url: String(avatarEl?.value || "").trim(),
+      tags: parseTags(tagsEl?.value || ""),
+      public_enabled: !!publicEl?.checked,
+    });
+  }
+
+  function updateDirtyState(form, fromUserInput = false) {
+    const now = profileSnapshot(form);
+    state.dirty = now !== state.baseline;
+    if (fromUserInput && !state.saving) {
+      setFeedback(
+        "profileFeedback",
+        state.dirty ? t("feedback.unsavedChanges") : t("feedback.allChangesSaved"),
+        state.dirty ? "warn" : "info",
+      );
+    }
+  }
+
+  function setProfileBaseline(form) {
+    state.baseline = profileSnapshot(form);
+    state.dirty = false;
+  }
+
+  function setInputError(inputEl, errorElId, message) {
+    const errEl = document.getElementById(errorElId);
+    errEl.textContent = message || "";
+    if (inputEl) {
+      inputEl.classList.toggle("input-invalid", Boolean(message));
+    }
+  }
+
+  function validateProfileForm(form) {
+    const displayNameEl = field(form, "display_name");
+    const avatarEl = field(form, "avatar_url");
+    const tagsEl = field(form, "tags");
+    const displayName = String(displayNameEl?.value || "").trim();
+    const avatarUrl = String(avatarEl?.value || "").trim();
+    const tags = parseTags(tagsEl?.value || "");
+
+    let ok = true;
+    let err = "";
+    if (displayName.length > 0 && displayName.length < 2) {
+      err = t("validation.displayNameShort");
+      ok = false;
+    } else if (displayName.length > 48) {
+      err = t("validation.displayNameLong");
+      ok = false;
+    }
+    setInputError(displayNameEl, "errDisplayName", err);
+
+    err = "";
+    if (avatarUrl && !/^https?:\/\//i.test(avatarUrl)) {
+      err = t("validation.avatarProtocol");
+      ok = false;
+    }
+    setInputError(avatarEl, "errAvatarUrl", err);
+
+    err = "";
+    if (tags.length > 8) {
+      err = t("validation.tooManyTags");
+      ok = false;
+    } else if (tags.some((tag) => tag.length > 20)) {
+      err = t("validation.tagTooLong");
+      ok = false;
+    }
+    setInputError(tagsEl, "errTags", err);
+    return { ok, tags };
+  }
+
+  function renderProfilePreview(form) {
+    const displayName = String(field(form, "display_name")?.value || "").trim();
+    const bio = String(field(form, "bio")?.value || "").trim();
+    const tags = parseTags(field(form, "tags")?.value || "");
+    const enabled = !!field(form, "public_enabled")?.checked;
+
+    document.getElementById("previewName").textContent = displayName || t("preview.unnamedAgent");
+    document.getElementById("previewBio").textContent = bio || t("preview.noBioYet");
+    document.getElementById("previewPublish").textContent = enabled ? t("preview.publishPublicState") : t("preview.publishPrivateState");
+    document.getElementById("previewPublishHint").textContent = enabled ? t("hints.previewPublic") : t("hints.previewPrivate");
+    document.getElementById("publishLaunchStatus").textContent = enabled ? t("hints.publishPublic") : t("hints.publishPrivate");
+    document.getElementById("publishLaunchCard").classList.toggle("is-public", enabled);
+    document.getElementById("bioCount").textContent = String(bio.length);
+
+    const tagBox = document.getElementById("previewTags");
+    if (!tags.length) {
+      tagBox.innerHTML = `<span class="tag-chip muted">${t("preview.noTags")}</span>`;
+      return;
+    }
+    tagBox.innerHTML = tags.map((tag) => `<span class="tag-chip">${tag}</span>`).join("");
+  }
+
+  function setSaveBusy(busy) {
+    state.saving = busy;
+    const btn = document.getElementById("saveProfileBtn");
+    btn.disabled = busy;
+    btn.classList.toggle("save-busy", busy);
+    btn.textContent = busy ? t("common.saving") : t("actions.saveProfile");
+  }
+
+  async function refreshPublicProfilePreview() {
+    const summary = (await api("/api/public-profile/preview")).data;
+    document.getElementById("publicProfilePreviewWrap").textContent = toPrettyJson(summary || null);
+    const visibleFields = summary?.public_visibility?.visible_fields || [];
+    const hiddenFields = summary?.public_visibility?.hidden_fields || [];
+    const visible = visibleFields.join(", ") || "-";
+    const hidden = hiddenFields.join(", ") || "-";
+    document.getElementById("publicVisibilityHint").textContent = t("preview.visibleFields", { visible, hidden });
+    const rows = [
+      ...visibleFields.map((item) => t("preview.visible", { field: item })),
+      ...hiddenFields.map((item) => t("preview.hidden", { field: item })),
+    ];
+    document.getElementById("publicVisibilityList").textContent = rows.length ? rows.join("\n") : "-";
+  }
+
+  async function refreshProfile() {
+    const profile = (await api("/api/profile")).data;
+    if (!profile) return;
+    const form = document.getElementById("profileForm");
+    field(form, "display_name").value = profile.display_name || "";
+    field(form, "bio").value = profile.bio || "";
+    field(form, "tags").value = (profile.tags || []).join(", ");
+    field(form, "avatar_url").value = profile.avatar_url || "";
+    field(form, "public_enabled").checked = !!profile.public_enabled;
+    form.dataset.lastSavedPublicEnabled = String(!!profile.public_enabled);
+    renderProfilePreview(form);
+    setProfileBaseline(form);
+    setProfileNextStepVisible(false);
+    await refreshPublicProfilePreview();
+  }
+
+  function bindProfileForm({ refreshAll }) {
+    document.getElementById("profileForm").addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const result = validateProfileForm(form);
+      if (!result.ok) {
+        setFeedback("profileFeedback", t("feedback.fixValidation"), "warn");
+        return;
+      }
+
+      const tags = result.tags;
+      const wasPublicEnabled = String(form.dataset.lastSavedPublicEnabled || "false") === "true";
+      const willBePublicEnabled = !!field(form, "public_enabled").checked;
+      setFeedback("profileFeedback", t("feedback.savingProfile"));
+      setSaveBusy(true);
+      try {
+        const response = await api("/api/profile", {
+          method: "PUT",
+          body: JSON.stringify({
+            display_name: field(form, "display_name").value,
+            bio: field(form, "bio").value,
+            tags,
+            avatar_url: field(form, "avatar_url").value,
+            public_enabled: !!field(form, "public_enabled").checked,
+          }),
+        });
+        setFeedback("profileFeedback", response.meta?.message || t("common.saved"));
+        toast(t("feedback.profileSaved"));
+        field(form, "tags").value = normalizeTagsInput(field(form, "tags").value);
+        form.dataset.lastSavedPublicEnabled = String(willBePublicEnabled);
+        await refreshAll();
+        setProfileNextStepVisible(!wasPublicEnabled && willBePublicEnabled);
+      } catch (error) {
+        setFeedback("profileFeedback", error instanceof Error ? error.message : t("feedback.failed"), "error");
+      } finally {
+        setSaveBusy(false);
+      }
+    });
+
+    document.getElementById("refreshProfileBtn").addEventListener("click", async () => {
+      await refreshProfile();
+      toast(t("feedback.profileReloaded"));
+    });
+
+    const profileFormEl = document.getElementById("profileForm");
+    ["input", "change"].forEach((evt) => {
+      profileFormEl.addEventListener(evt, () => {
+        renderProfilePreview(profileFormEl);
+        validateProfileForm(profileFormEl);
+        updateDirtyState(profileFormEl, true);
+      });
+    });
+
+    const tagsInputEl = field(profileFormEl, "tags");
+    tagsInputEl.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      tagsInputEl.value = normalizeTagsInput(tagsInputEl.value);
+      renderProfilePreview(profileFormEl);
+      validateProfileForm(profileFormEl);
+      updateDirtyState(profileFormEl, true);
+    });
+    tagsInputEl.addEventListener("blur", () => {
+      tagsInputEl.value = normalizeTagsInput(tagsInputEl.value);
+      renderProfilePreview(profileFormEl);
+      validateProfileForm(profileFormEl);
+      updateDirtyState(profileFormEl, true);
+    });
+  }
+
+  return {
+    bindProfileForm,
+    isDirty: () => state.dirty,
+    isSaving: () => state.saving,
+    refreshProfile,
+    refreshPublicProfilePreview,
+  };
+}