viveworker 0.5.2 → 0.5.5

package/web/app.js

@@ -50,9 +50,12 @@ const state = {
   moltbookScoutStatus: null,
   moltbookRecentTitlesExpanded: 0,
   a2aRelayStatus: null,
+  a2aShareStatus: null,
+  a2aShareRecentExpanded: 0,
   a2aTaskExecutorPick: "codex",
   pushNotice: "",
   pushError: "",
+  ambientSuggestionCopyState: null,
   deviceNotice: "",
   deviceError: "",
   imageViewer: null,
@@ -218,6 +221,7 @@ async function refreshAuthenticatedState() {
   await refreshPushStatus();
   await fetchMoltbookScoutStatus();
   await fetchA2aRelayStatus();
+  await fetchA2aShareStatus();
   ensureCurrentSelection();
 }
 
@@ -347,6 +351,18 @@ async function fetchA2aRelayStatus() {
   }
 }
 
+async function fetchA2aShareStatus() {
+  if (!state.session?.a2aShareEnabled) {
+    state.a2aShareStatus = null;
+    return;
+  }
+  try {
+    state.a2aShareStatus = await apiGet("/api/share/status");
+  } catch {
+    state.a2aShareStatus = null;
+  }
+}
+
 async function getClientPushState() {
   const registration = state.serviceWorkerRegistration || (await navigator.serviceWorker?.ready.catch(() => null));
   if (registration) {
@@ -661,6 +677,7 @@ function timelineKindFilterOptions() {
   const codexClaudeOptions = [
     allOption,
     { id: "messages", label: L("timeline.kindFilter.messages"), icon: "timeline" },
+    { id: "suggestions", label: L("timeline.kindFilter.suggestions"), icon: "suggestions" },
     { id: "files", label: L("timeline.kindFilter.files"), icon: "file-event" },
     { id: "approvals", label: L("timeline.kindFilter.approvals"), icon: "approval" },
     { id: "plans", label: L("timeline.kindFilter.plans"), icon: "plan" },
@@ -695,6 +712,8 @@ function timelineEntryMatchesKindFilter(entry, filterId) {
   switch (filterId) {
     case "messages":
       return TIMELINE_MESSAGE_KINDS.has(kind);
+    case "suggestions":
+      return kind === "ambient_suggestions";
     case "files":
       return kind === "file_event";
     case "approvals":
@@ -2332,6 +2351,10 @@ function timelineEntryThreadLabel(item, isMessage) {
 }
 
 function timelineEntryPrimaryText(item, status, { isMessageLike = false, isFileEvent = false } = {}) {
+  if (item?.kind === "ambient_suggestions") {
+    return item.summary || fallbackSummaryForKind(item.kind, status, item.provider);
+  }
+
   if (isMessageLike) {
     return item.summary || fallbackSummaryForKind(item.kind, status, item.provider);
   }
@@ -2344,6 +2367,10 @@ function timelineEntryPrimaryText(item, status, { isMessageLike = false, isFileE
 }
 
 function timelineEntrySecondaryText(item, status, primaryText, { isMessageLike = false, isFileEvent = false } = {}) {
+  if (item?.kind === "ambient_suggestions") {
+    return "";
+  }
+
   if (isMessageLike) {
     return "";
   }
@@ -2865,6 +2892,7 @@ function buildSettingsContext() {
     }),
     moltbookScout: state.moltbookScoutStatus,
     a2aRelay: state.a2aRelayStatus,
+    a2aShare: state.a2aShareStatus,
   };
 }
 
@@ -3025,6 +3053,13 @@ function settingsPageMeta(page) {
         description: L("settings.a2aRelay.copy"),
         icon: "link",
       };
+    case "a2aShare":
+      return {
+        id: "a2aShare",
+        title: L("settings.a2aShare.title"),
+        description: L("settings.a2aShare.copy"),
+        icon: "link",
+      };
     case "a2aExecutor":
       // Executor settings integrated into a2aRelay page — redirect.
       return settingsPageMeta("a2aRelay");
@@ -3097,13 +3132,13 @@ function renderSettingsRoot(context, { mobile }) {
           `
       }
       ${renderSettingsGroup(L("settings.group.general"), generalRows)}
-      ${(state.session?.moltbookEnabled || state.session?.a2aRelayEnabled) ? renderSettingsGroup(L("settings.group.integrations"), [
+      ${(state.session?.moltbookEnabled || state.session?.a2aRelayEnabled || state.session?.a2aShareEnabled) ? renderSettingsGroup(L("settings.group.integrations"), [
         state.session?.moltbookEnabled ? renderSettingsNavRow({
           page: "moltbook",
           icon: "item",
           title: L("settings.moltbook.title"),
           subtitle: L("settings.moltbook.subtitle"),
-          value: context.moltbookScout?.enabled ? `${context.moltbookScout.sentToday} / ${context.moltbookScout.maxDaily}` : "",
+          value: context.moltbookScout?.enabled ? L("settings.status.enabled") : L("settings.status.disabled"),
         }) : "",
         state.session?.a2aRelayEnabled ? renderSettingsNavRow({
           page: "a2aRelay",
@@ -3112,6 +3147,13 @@ function renderSettingsRoot(context, { mobile }) {
           subtitle: L("settings.a2aRelay.subtitle"),
           value: context.a2aRelay?.connected ? L("settings.status.connected") : L("settings.a2aRelay.status.disconnected"),
         }) : "",
+        state.session?.a2aShareEnabled ? renderSettingsNavRow({
+          page: "a2aShare",
+          icon: "link",
+          title: L("settings.a2aShare.title"),
+          subtitle: L("settings.a2aShare.subtitle"),
+          value: context.a2aShare?.enabled ? L("settings.status.enabled") : L("settings.status.disabled"),
+        }) : "",
       ].filter(Boolean)) : ""}
       ${renderSettingsGroup(L("settings.pairing.title"), deviceRows)}
       ${renderSettingsGroup(L("settings.group.advanced"), advancedRows)}
@@ -3163,6 +3205,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "a2aExecutor":
       content = renderSettingsA2aRelayPage(context);
       break;
+    case "a2aShare":
+      content = renderSettingsA2aSharePage(context);
+      break;
     default:
       content = "";
   }
@@ -3392,8 +3437,16 @@ function renderSettingsMoltbookPage(context) {
     renderSettingsInfoRow(L("settings.row.moltbookBatchTopScore"), String(scout.batch.topScore)),
     renderSettingsInfoRow(L("settings.row.moltbookBatchRemaining"), `${Math.floor(scout.batch.remainingSeconds / 60)}:${String(scout.batch.remainingSeconds % 60).padStart(2, "0")}`),
   ] : [];
+  const accountRow = scout.account?.name && scout.account?.profileUrl
+    ? renderSettingsInfoRow(
+        L("settings.row.moltbookAccount"),
+        `<a href="${escapeHtml(scout.account.profileUrl)}" target="_blank" rel="noopener">${escapeHtml(scout.account.name)}</a>`,
+        { rawValue: true }
+      )
+    : null;
   return `
     <div class="settings-page">
+      ${accountRow ? renderSettingsGroup("", [accountRow]) : ""}
       ${renderSettingsGroup("", [
         renderSettingsInfoRow(L("settings.row.moltbookQuota"), `${scout.sentToday} / ${scout.maxDaily}`),
         renderSettingsInfoRow(L("settings.row.moltbookComposed"), `${scout.composedToday || 0} / 3`),
@@ -3417,7 +3470,19 @@ function renderSettingsMoltbookPage(context) {
           const link = postId
             ? `<a href="https://www.moltbook.com/post/${escapeHtml(postId)}" target="_blank" rel="noopener">${escapeHtml(title)}</a>`
             : escapeHtml(title);
-          return `<div class="settings-compose-entry">${badge}<span class="settings-compose-entry__title">${link}</span></div>`;
+          const iconName = type === "reply" ? "moltbook-reply" : "moltbook-draft";
+          const iconTone = type === "reply" ? "settings-icon-entry__icon--reply" : "settings-icon-entry__icon--post";
+          return `
+            <div class="settings-compose-entry settings-icon-entry">
+              <span class="settings-icon-entry__icon ${iconTone}" aria-hidden="true">${renderIcon(iconName)}</span>
+              <span class="settings-icon-entry__body">
+                <span class="settings-icon-entry__title-row">
+                  <span class="settings-compose-entry__title">${link}</span>
+                  ${badge}
+                </span>
+              </span>
+            </div>
+          `;
         });
         if (hasMore) {
           const remaining = titles.length - visibleCount;
@@ -3445,7 +3510,7 @@ function renderSettingsA2aRelayPage(context) {
     : relay.polling
       ? L("settings.a2aRelay.status.polling")
       : L("settings.a2aRelay.status.disconnected");
-  const profileUrl = `${relay.relayUrl}/${relay.userId}`;
+  const profileUrl = `${relay.relayUrl}/u/${relay.userId}`;
   const userIdLink = `<a href="${escapeHtml(profileUrl)}" target="_blank" rel="noopener">${escapeHtml(relay.userId)}</a>`;
   const relayHost = (() => { try { return new URL(relay.relayUrl).host; } catch { return relay.relayUrl; } })();
   const publicChecked = relay.acceptPublicTasks === true;
@@ -3465,20 +3530,22 @@ function renderSettingsA2aRelayPage(context) {
 
   return `
     <div class="settings-page">
+      ${renderSettingsGroup("", [
+        renderSettingsInfoRow(L("settings.row.a2aStatus"), statusLabel),
+        renderSettingsInfoRow(L("settings.row.a2aUserId"), userIdLink, { rawValue: true }),
+        renderSettingsInfoRow(L("settings.row.a2aRelay"), relayHost),
+        renderSettingsInfoRow(L("settings.row.a2aApiKey"), relay.apiKeyConfigured ? L("settings.a2aRelay.apiKey.configured") : L("settings.a2aRelay.apiKey.notConfigured")),
+        relay.lastPollAtMs
+          ? renderSettingsInfoRow(L("settings.row.a2aLastPoll"), new Date(relay.lastPollAtMs).toLocaleString(state.locale))
+          : "",
+      ].filter(Boolean))}
       ${(() => {
         const stats = relay.taskStats || { received: 0, completed: 0, denied: 0 };
-        return renderSettingsGroup("", [
-          renderSettingsInfoRow(L("settings.row.a2aStatus"), statusLabel),
-          renderSettingsInfoRow(L("settings.row.a2aUserId"), userIdLink, { rawValue: true }),
-          renderSettingsInfoRow(L("settings.row.a2aRelay"), relayHost),
-          renderSettingsInfoRow(L("settings.row.a2aApiKey"), relay.apiKeyConfigured ? L("settings.a2aRelay.apiKey.configured") : L("settings.a2aRelay.apiKey.notConfigured")),
-          relay.lastPollAtMs
-            ? renderSettingsInfoRow(L("settings.row.a2aLastPoll"), new Date(relay.lastPollAtMs).toLocaleString(state.locale))
-            : "",
+        return renderSettingsGroup(L("settings.a2aRelay.taskStats.title"), [
           renderSettingsInfoRow(L("settings.row.a2aTaskReceived"), String(stats.received)),
           renderSettingsInfoRow(L("settings.row.a2aTaskCompleted"), String(stats.completed)),
           renderSettingsInfoRow(L("settings.row.a2aTaskDenied"), String(stats.denied)),
-        ].filter(Boolean));
+        ]);
       })()}
       <section class="settings-group">
         <p class="settings-group__title">${escapeHtml(L("settings.a2aRelay.publicTasks.title"))}</p>
@@ -3506,6 +3573,151 @@ function renderSettingsA2aRelayPage(context) {
   `;
 }
 
+function renderSettingsA2aSharePage(context) {
+  const share = context.a2aShare;
+  if (!share?.enabled) {
+    return `
+      <div class="settings-page">
+        <p class="settings-page-copy muted">${escapeHtml(L("settings.a2aShare.unavailable"))}</p>
+      </div>
+    `;
+  }
+  const quota = share.quota || { bytes: 0, maxBytes: 0, count: 0, maxCount: 0 };
+  const limits = share.limits || {};
+  const items = Array.isArray(share.items) ? share.items : [];
+  const statusLabel = share.error
+    ? L("settings.a2aShare.status.unreachable")
+    : L("settings.status.enabled");
+  const formatBytes = (bytes) => {
+    if (!Number.isFinite(bytes)) return "—";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  };
+  const storageValue = share.quota
+    ? `${formatBytes(quota.bytes)} / ${formatBytes(quota.maxBytes || limits.maxTotalBytes || 0)}`
+    : "—";
+  const filesValue = share.quota
+    ? `${quota.count} / ${quota.maxCount || limits.maxFiles || 0}`
+    : "—";
+  const storageRows = [
+    renderSettingsInfoRow(L("settings.row.a2aShareStorage"), storageValue),
+    renderSettingsInfoRow(L("settings.row.a2aShareFiles"), filesValue),
+    renderSettingsInfoRow(L("settings.row.a2aShareMaxFileSize"), formatBytes(limits.maxFileBytes || 0)),
+    renderSettingsInfoRow(
+      L("settings.row.a2aShareDefaultExpiry"),
+      L("settings.a2aShare.days", { count: limits.defaultExpiresDays || 30 })
+    ),
+    renderSettingsInfoRow(
+      L("settings.row.a2aShareUploadRate"),
+      L("settings.a2aShare.ratePerHour", { count: limits.uploadRatePerHour || 10 })
+    ),
+  ];
+
+  const PAGE_SIZE = 5;
+  const visibleCount = state.a2aShareRecentExpanded || PAGE_SIZE;
+  const visible = items.slice(0, visibleCount);
+  const hasMore = items.length > visibleCount;
+  const filesList = visible.map((item) => {
+    const passwordLabel = L("settings.a2aShare.passwordProtected");
+    const lock = item.hasPassword
+      ? `<span class="settings-compose-badge settings-compose-badge--reply" role="img" title="${escapeHtml(passwordLabel)}" aria-label="${escapeHtml(passwordLabel)}">${renderIcon("lock")}</span>`
+      : "";
+    const label = escapeHtml(item.originalName || item.slug);
+    const link = item.url
+      ? `<a href="${escapeHtml(item.url)}" target="_blank" rel="noopener">${label}</a>`
+      : label;
+    const sizeText = escapeHtml(formatBytes(item.size || 0));
+    const createdText = item.createdAtMs
+      ? escapeHtml(formatRelativeAge(Date.now() - item.createdAtMs))
+      : "";
+    const expiresText = item.expiresAtMs
+      ? escapeHtml(formatExpiresIn(item.expiresAtMs - Date.now()))
+      : "";
+    const meta = [sizeText, createdText, expiresText].filter(Boolean).join(" · ");
+    return `
+      <div class="settings-compose-entry settings-icon-entry">
+        <span class="settings-icon-entry__icon settings-icon-entry__icon--file" aria-hidden="true">${renderIcon("file-event")}</span>
+        <span class="settings-icon-entry__body">
+          <span class="settings-icon-entry__title-row">
+            <span class="settings-compose-entry__title">${link}</span>
+            ${lock}
+          </span>
+          ${meta ? `<span class="settings-compose-entry__meta muted">${meta}</span>` : ""}
+        </span>
+      </div>
+    `;
+  });
+  if (hasMore) {
+    const remaining = items.length - visibleCount;
+    filesList.push(
+      `<button type="button" class="settings-compose-more" data-a2a-share-files-more>${escapeHtml(L("settings.a2aShare.showMore", { count: remaining }))}</button>`
+    );
+  } else if (items.length > PAGE_SIZE) {
+    filesList.push(
+      `<button type="button" class="settings-compose-more" data-a2a-share-files-collapse>${escapeHtml(L("settings.a2aShare.showLess"))}</button>`
+    );
+  }
+
+  return `
+    <div class="settings-page">
+      ${renderSettingsGroup("", [
+        renderSettingsInfoRow(L("settings.row.a2aShareStatus"), statusLabel),
+        renderSettingsInfoRow(L("settings.row.a2aShareEndpoint"), share.shareHost || share.shareUrl || ""),
+        renderSettingsInfoRow(L("settings.row.a2aShareUserId"), share.userId || ""),
+      ])}
+      ${renderSettingsGroup(L("settings.a2aShare.storage.title"), storageRows)}
+      ${items.length
+        ? renderSettingsGroup(L("settings.a2aShare.files.title"), filesList)
+        : renderSettingsGroup(L("settings.a2aShare.files.title"), [
+            `<p class="settings-group__description muted">${escapeHtml(L("settings.a2aShare.files.empty"))}</p>`,
+          ])}
+      ${share.error ? `<p class="settings-page-copy muted">${escapeHtml(L("settings.a2aShare.error", { reason: share.error }))}</p>` : ""}
+    </div>
+  `;
+}
+
+function formatRelativeAge(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "";
+  // Intl.RelativeTimeFormat with numeric:"auto" gives us locale-aware phrasing
+  // ("5 minutes ago" / "5分前") without needing dedicated translation keys.
+  const locale = state.locale || DEFAULT_LOCALE;
+  let rtf;
+  try {
+    rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  } catch {
+    rtf = null;
+  }
+  const sec = Math.floor(ms / 1000);
+  const pick = (value, unit, fallback) => (rtf ? rtf.format(-value, unit) : fallback);
+  if (sec < 60) return pick(sec, "second", `${sec}s ago`);
+  const min = Math.floor(sec / 60);
+  if (min < 60) return pick(min, "minute", `${min}m ago`);
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return pick(hr, "hour", `${hr}h ago`);
+  const day = Math.floor(hr / 24);
+  if (day < 30) return pick(day, "day", `${day}d ago`);
+  const mo = Math.floor(day / 30);
+  if (mo < 12) return pick(mo, "month", `${mo}mo ago`);
+  return pick(Math.floor(mo / 12), "year", `${Math.floor(mo / 12)}y ago`);
+}
+
+function formatExpiresIn(ms) {
+  if (!Number.isFinite(ms)) return "";
+  if (ms <= 0) return L("settings.a2aShare.expired");
+  const locale = state.locale || DEFAULT_LOCALE;
+  let rtf;
+  try {
+    rtf = new Intl.RelativeTimeFormat(locale, { numeric: "always" });
+  } catch {
+    rtf = null;
+  }
+  const day = Math.floor(ms / 86400000);
+  if (day >= 1) return rtf ? rtf.format(day, "day") : `in ${day}d`;
+  const hr = Math.max(1, Math.floor(ms / 3600000));
+  return rtf ? rtf.format(hr, "hour") : `in ${hr}h`;
+}
+
 function renderSettingsInfoRow(label, value, options = {}) {
   const rowClassName = ["settings-info-row", options.rowClassName || ""].filter(Boolean).join(" ");
   const valueClassName = ["settings-info-row__value", options.valueClassName || ""].filter(Boolean).join(" ");
@@ -3626,8 +3838,9 @@ function renderStandardDetailDesktop(detail) {
       ${renderMoltbookDraftComposer(detail)}
       ${renderA2ATaskDetail(detail)}
       ${renderThreadShareDetail(detail)}
+      ${renderAmbientSuggestionsSection(detail)}
       ${
-        detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task" || detail.kind === "a2a_task_result" || detail.kind === "thread_share"
+        detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task" || detail.kind === "a2a_task_result" || detail.kind === "thread_share" || detail.kind === "ambient_suggestions"
           ? ""
           : plainIntro
             ? plainIntro
@@ -3664,8 +3877,9 @@ function renderStandardDetailMobile(detail) {
           ${renderMoltbookDraftComposer(detail, { mobile: true })}
           ${renderA2ATaskDetail(detail, { mobile: true })}
           ${renderThreadShareDetail(detail, { mobile: true })}
+          ${renderAmbientSuggestionsSection(detail, { mobile: true })}
           ${
-            detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task" || detail.kind === "a2a_task_result" || detail.kind === "thread_share"
+            detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task" || detail.kind === "a2a_task_result" || detail.kind === "thread_share" || detail.kind === "ambient_suggestions"
               ? ""
               : plainIntro
                 ? plainIntro
@@ -3690,6 +3904,65 @@ function renderStandardDetailMobile(detail) {
   `;
 }
 
+function renderAmbientSuggestionsSection(detail, options = {}) {
+  if (detail?.kind !== "ambient_suggestions") {
+    return "";
+  }
+
+  const suggestions = normalizeClientAmbientSuggestions(detail?.suggestions);
+  if (suggestions.length === 0) {
+    return `
+      <section class="detail-card detail-card--body ${options.mobile ? "detail-card--mobile" : ""}">
+        <div class="detail-body markdown">${detail.messageHtml || ""}</div>
+      </section>
+    `;
+  }
+
+  return `
+    <section class="detail-card detail-card--body ${options.mobile ? "detail-card--mobile" : ""}">
+      <div class="ambient-suggestions">
+        ${detail.messageHtml ? `<div class="ambient-suggestions__intro markdown">${detail.messageHtml}</div>` : ""}
+        <div class="ambient-suggestions__list">
+          ${suggestions
+            .map((suggestion, index) => renderAmbientSuggestionCard(detail, suggestion, index))
+            .join("")}
+        </div>
+      </div>
+    </section>
+  `;
+}
+
+function renderAmbientSuggestionCard(detail, suggestion, index) {
+  const copyKey = ambientSuggestionCopyKey(detail?.token || "", suggestion?.id || "", index);
+  const copyStatus = state.ambientSuggestionCopyState?.key === copyKey
+    ? state.ambientSuggestionCopyState?.status || ""
+    : "";
+  const copyLabel = copyStatus === "success"
+    ? L("detail.ambientSuggestions.copyPromptDone")
+    : copyStatus === "error"
+      ? L("detail.ambientSuggestions.copyPromptFailed")
+      : L("detail.ambientSuggestions.copyPrompt");
+  return `
+    <article class="ambient-suggestion-card">
+      <div class="ambient-suggestion-card__header">
+        <h3 class="ambient-suggestion-card__title">${escapeHtml(suggestion.title)}</h3>
+        <button
+          type="button"
+          class="secondary ambient-suggestion-card__copy-button"
+          data-copy-ambient-suggestion
+          data-copy-ambient-suggestion-token="${escapeHtml(detail?.token || "")}"
+          data-copy-ambient-suggestion-index="${escapeHtml(String(index))}"
+        >${escapeHtml(copyLabel)}</button>
+      </div>
+      ${suggestion.description ? `<p class="ambient-suggestion-card__description">${escapeHtml(suggestion.description)}</p>` : ""}
+      <div class="ambient-suggestion-card__prompt-wrap">
+        <p class="ambient-suggestion-card__prompt-label">${escapeHtml(L("detail.ambientSuggestions.prompt"))}</p>
+        <pre class="ambient-suggestion-card__prompt">${escapeHtml(suggestion.prompt)}</pre>
+      </div>
+    </article>
+  `;
+}
+
 function renderDetailPlainIntro(detail, options = {}) {
   if (!["approval", "diff_thread", "file_event"].includes(detail?.kind || "")) {
     return "";
@@ -5091,6 +5364,41 @@ function bindShellInteractions() {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-copy-ambient-suggestion]")) {
+    button.addEventListener("click", async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const detail = state.currentDetail;
+      if (!detail || detail.kind !== "ambient_suggestions") {
+        return;
+      }
+      if ((button.dataset.copyAmbientSuggestionToken || "") !== (detail.token || "")) {
+        return;
+      }
+      const index = Math.max(0, Number(button.dataset.copyAmbientSuggestionIndex) || 0);
+      const suggestions = normalizeClientAmbientSuggestions(detail.suggestions);
+      const suggestion = suggestions[index];
+      if (!suggestion?.prompt) {
+        return;
+      }
+      const copyKey = ambientSuggestionCopyKey(detail.token || "", suggestion.id || "", index);
+      try {
+        await copyTextToClipboard(suggestion.prompt);
+        state.ambientSuggestionCopyState = { key: copyKey, status: "success" };
+      } catch {
+        state.ambientSuggestionCopyState = { key: copyKey, status: "error" };
+      }
+      await renderShell();
+      window.setTimeout(async () => {
+        if (state.ambientSuggestionCopyState?.key !== copyKey) {
+          return;
+        }
+        state.ambientSuggestionCopyState = null;
+        await renderShell();
+      }, 1600);
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-diff-thread-file-toggle]")) {
     button.addEventListener("click", async (event) => {
       event.preventDefault();
@@ -5393,6 +5701,19 @@ function bindShellInteractions() {
     });
   }
 
+  for (const btn of document.querySelectorAll("[data-a2a-share-files-more]")) {
+    btn.addEventListener("click", async () => {
+      state.a2aShareRecentExpanded = (state.a2aShareRecentExpanded || 5) + 5;
+      await renderShell();
+    });
+  }
+  for (const btn of document.querySelectorAll("[data-a2a-share-files-collapse]")) {
+    btn.addEventListener("click", async () => {
+      state.a2aShareRecentExpanded = 0;
+      await renderShell();
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-locale-option]")) {
     button.addEventListener("click", async () => {
       state.pushError = "";
@@ -6102,7 +6423,7 @@ function tabForItemKind(kind, fallback) {
   if (kind === "diff_thread") {
     return "diff";
   }
-  if (kind === "file_event") {
+  if (kind === "file_event" || kind === "ambient_suggestions") {
     return "timeline";
   }
   if (TIMELINE_MESSAGE_KINDS.has(kind)) {
@@ -6134,6 +6455,8 @@ function kindMeta(kind, item) {
       return { label: L("common.assistantCommentary"), tone: "plan", icon: "assistant-commentary" };
     case "assistant_final":
       return { label: L("common.assistantFinal"), tone: "completion", icon: "assistant-final" };
+    case "ambient_suggestions":
+      return { label: L("common.ambientSuggestions"), tone: "neutral", icon: "suggestions" };
     case "approval":
       return { label: L("common.approval"), tone: "approval", icon: "approval" };
     case "plan":
@@ -6179,6 +6502,9 @@ function itemIntentText(kind, status = "pending", provider) {
   if (kind === "file_event") {
     return L("intent.fileEvent");
   }
+  if (kind === "ambient_suggestions") {
+    return L("intent.ambientSuggestions");
+  }
   if (kind === "user_message") {
     return L("intent.userMessage");
   }
@@ -6213,6 +6539,9 @@ function detailIntentText(detail) {
   if (detail.kind === "file_event") {
     return itemIntentText(detail.kind, "timeline", provider);
   }
+  if (detail.kind === "ambient_suggestions") {
+    return itemIntentText(detail.kind, "timeline", provider);
+  }
   if (TIMELINE_MESSAGE_KINDS.has(detail.kind)) {
     return itemIntentText(detail.kind, "timeline", provider);
   }
@@ -6231,7 +6560,11 @@ function renderDetailTitle(detail) {
 }
 
 function detailDisplayTitle(detail) {
-  const threadLabel = normalizeClientText(detail?.threadLabel || "");
+  const threadLabel = sanitizeThreadLabelForDisplay(detail?.threadLabel || "", detail?.threadId || "");
+  if (detail?.kind === "ambient_suggestions") {
+    const ambientTitle = sanitizeThreadLabelForDisplay(detail?.title || "", detail?.threadId || "");
+    return ambientTitle || L("common.ambientSuggestions");
+  }
   if (threadLabel) {
     return threadLabel;
   }
@@ -6279,6 +6612,8 @@ function fallbackSummaryForKind(kind, status, provider) {
       return L("summary.diffThread");
     case "file_event":
       return L("summary.fileEvent", vars);
+    case "ambient_suggestions":
+      return L("summary.ambientSuggestions", { count: 0, firstTitle: "", more: 0 });
     case "user_message":
       return L("summary.userMessage");
     case "assistant_commentary":
@@ -6495,6 +6830,8 @@ function renderIcon(name) {
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.2v5.6"/><path d="M9.2 9h5.6"/><path d="M6 14.8a6.7 6.7 0 0 0 12 0"/><path d="M8 4.8a7.6 7.6 0 0 1 8 0"/></svg>`;
     case "assistant-final":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6.5h12a1.8 1.8 0 0 1 1.8 1.8v6.1A1.8 1.8 0 0 1 18 16.2h-5.3L9 19.4v-3.2H6a1.8 1.8 0 0 1-1.8-1.8V8.3A1.8 1.8 0 0 1 6 6.5Z"/><path d="m9.2 11.3 1.7 1.7 3.6-3.8"/></svg>`;
+    case "suggestions":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.8 13 6.7l3 .5-2.2 2.2.5 3-2.3-1.2-2.3 1.2.5-3L8 7.2l3-.5Z"/><path d="M6.2 14.6h11.6"/><path d="M8.4 18.2h7.2"/></svg>`;
     case "completed":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m8.7 12.2 2.1 2.1 4.6-4.8"/></svg>`;
     case "settings":
@@ -6521,6 +6858,8 @@ function renderIcon(name) {
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7h14"/><path d="M8 12h8"/><path d="M10.5 17h3"/></svg>`;
     case "check":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.8 12.5 3.2 3.2 7.2-7.4"/></svg>`;
+    case "lock":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="10.5" width="13" height="9" rx="2"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></svg>`;
     case "back":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>`;
     case "chevron-down":
@@ -6767,6 +7106,58 @@ function normalizeClientFileRefs(fileRefs) {
   return deduped;
 }
 
+function normalizeClientAmbientSuggestions(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((entry) => {
+      const title = normalizeClientText(entry?.title);
+      const prompt = normalizeClientText(entry?.prompt);
+      if (!title || !prompt) {
+        return null;
+      }
+      return {
+        id: normalizeClientText(entry?.id),
+        title,
+        prompt,
+        description: normalizeClientText(entry?.description),
+      };
+    })
+    .filter(Boolean);
+}
+
+function ambientSuggestionCopyKey(token, suggestionId, index) {
+  return [normalizeClientText(token), normalizeClientText(suggestionId), String(Math.max(0, Number(index) || 0))].join(":");
+}
+
+async function copyTextToClipboard(text) {
+  const normalized = String(text ?? "");
+  if (!normalized) {
+    throw new Error("empty");
+  }
+
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(normalized);
+    return;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = normalized;
+  textarea.setAttribute("readonly", "true");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+  document.body.appendChild(textarea);
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+  const copied = document.execCommand("copy");
+  document.body.removeChild(textarea);
+  if (!copied) {
+    throw new Error("copy-failed");
+  }
+}
+
 function fileRefLabel(fileRef) {
   const normalized = normalizeClientText(fileRef);
   if (!normalized) {