viveworker 0.2.1 → 0.4.0

package/web/app.js

@@ -47,6 +47,7 @@ const state = {
   pairError: "",
   pairNotice: "",
   pushStatus: null,
+  moltbookScoutStatus: null,
   pushNotice: "",
   pushError: "",
   deviceNotice: "",
@@ -212,6 +213,7 @@ async function refreshAuthenticatedState() {
   await refreshTimeline();
   await refreshDevices();
   await refreshPushStatus();
+  await fetchMoltbookScoutStatus();
   ensureCurrentSelection();
 }
 
@@ -317,6 +319,18 @@ async function refreshPushStatus() {
   }
 }
 
+async function fetchMoltbookScoutStatus() {
+  if (!state.session?.moltbookEnabled) {
+    state.moltbookScoutStatus = null;
+    return;
+  }
+  try {
+    state.moltbookScoutStatus = await apiGet("/api/moltbook/scout-status");
+  } catch {
+    state.moltbookScoutStatus = null;
+  }
+}
+
 async function getClientPushState() {
   const registration = state.serviceWorkerRegistration || (await navigator.serviceWorker?.ready.catch(() => null));
   if (registration) {
@@ -526,11 +540,18 @@ function listInboxEntries() {
 
 function normalizeProviderClient(value) {
   const normalized = String(value || "").toLowerCase();
-  return normalized === "claude" ? "claude" : "codex";
+  if (normalized === "claude") return "claude";
+  if (normalized === "moltbook") return "moltbook";
+  if (normalized === "a2a") return "a2a";
+  return "codex";
 }
 
 function providerDisplayName(provider) {
-  return L(normalizeProviderClient(provider) === "claude" ? "common.claude" : "common.codex");
+  const p = normalizeProviderClient(provider);
+  if (p === "claude") return L("common.claude");
+  if (p === "moltbook") return "Moltbook";
+  if (p === "a2a") return "A2A";
+  return L("common.codex");
 }
 
 function entryMatchesProviderFilter(item) {
@@ -633,6 +654,16 @@ function timelineEntryMatchesKindFilter(entry, filterId) {
   }
 }
 
+function isMoltbookThreadId(threadId, item) {
+  if (threadId === "moltbook") return true;
+  if (typeof threadId === "string" && threadId.startsWith("draft:")) return true;
+  const kind = normalizeClientText(item?.kind || "");
+  if (kind === "moltbook_draft" || kind === "moltbook_reply") return true;
+  const label = normalizeClientText(item?.threadLabel || "").toLowerCase();
+  if (label === "moltbook") return true;
+  return false;
+}
+
 function completedThreads() {
   const items = Array.isArray(state.inbox?.completed) ? state.inbox.completed : [];
   if (!items.length) {
@@ -641,7 +672,7 @@ function completedThreads() {
   const byThread = new Map();
   for (const item of items) {
     const threadId = normalizeClientText(item.threadId || "");
-    if (!threadId) {
+    if (!threadId || isMoltbookThreadId(threadId, item)) {
       continue;
     }
     const latestAtMs = Number(item.createdAtMs || 0);
@@ -666,7 +697,7 @@ function diffThreads() {
   const byThread = new Map();
   for (const item of items) {
     const threadId = normalizeClientText(item.threadId || "");
-    if (!threadId) {
+    if (!threadId || isMoltbookThreadId(threadId, item)) {
       continue;
     }
     const latestAtMs = Number(item.createdAtMs || 0);
@@ -933,6 +964,27 @@ function shouldDeferRenderForActiveInteraction() {
   ) {
     return true;
   }
+  if (
+    activeElement instanceof HTMLTextAreaElement &&
+    activeElement.matches("[data-moltbook-draft-textarea]")
+  ) {
+    return true;
+  }
+  if (state.currentDetail?.kind === "moltbook_draft") {
+    return true;
+  }
+  if (
+    activeElement instanceof HTMLTextAreaElement &&
+    activeElement.matches("[data-claude-question-note]")
+  ) {
+    return true;
+  }
+  if (
+    activeElement instanceof HTMLInputElement &&
+    activeElement.matches("[data-moltbook-draft-title]")
+  ) {
+    return true;
+  }
   if (
     activeElement instanceof HTMLSelectElement &&
     activeElement.matches("[data-timeline-thread-select], [data-diff-thread-select], [data-completed-thread-select]")
@@ -1650,6 +1702,12 @@ function providerBadgeMeta(provider) {
   if (normalized === "claude") {
     return { id: "claude", label: L("common.claude"), glyph: "C" };
   }
+  if (normalized === "moltbook") {
+    return { id: "moltbook", label: "Moltbook", glyph: "M" };
+  }
+  if (normalized === "a2a") {
+    return { id: "a2a", label: "A2A", glyph: "A" };
+  }
   return { id: "codex", label: L("common.codex"), glyph: "X" };
 }
 
@@ -1659,11 +1717,18 @@ function renderProviderBadge(provider) {
 }
 
 function providerFilterOptions() {
-  return [
+  const options = [
     { id: "all", label: L("timeline.allThreads") },
     { id: "codex", label: L("common.codex") },
     { id: "claude", label: L("common.claude") },
   ];
+  if (state.session?.moltbookEnabled === true) {
+    options.push({ id: "moltbook", label: "Moltbook" });
+  }
+  if (state.session?.a2aEnabled === true) {
+    options.push({ id: "a2a", label: "A2A" });
+  }
+  return options;
 }
 
 function renderProviderFilter() {
@@ -2679,6 +2744,7 @@ function buildSettingsContext() {
       supportsPushValue,
       serverEnabled,
     }),
+    moltbookScout: state.moltbookScoutStatus,
   };
 }
 
@@ -2825,6 +2891,13 @@ function settingsPageMeta(page) {
         description: L("settings.awayMode.copy"),
         icon: "settings",
       };
+    case "moltbook":
+      return {
+        id: "moltbook",
+        title: L("settings.moltbook.title"),
+        description: L("settings.moltbook.copy"),
+        icon: "item",
+      };
     default:
       return settingsPageMeta("notifications");
   }
@@ -2894,6 +2967,15 @@ function renderSettingsRoot(context, { mobile }) {
           `
       }
       ${renderSettingsGroup(L("settings.group.general"), generalRows)}
+      ${state.session?.moltbookEnabled ? renderSettingsGroup(L("common.sns"), [
+        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}` : "",
+        }),
+      ]) : ""}
       ${renderSettingsGroup(L("settings.pairing.title"), deviceRows)}
       ${renderSettingsGroup(L("settings.group.advanced"), advancedRows)}
     </div>
@@ -2937,6 +3019,9 @@ function renderSettingsSubpage(context, { mobile }) {
     case "awayMode":
       content = renderSettingsAwayModePage();
       break;
+    case "moltbook":
+      content = renderSettingsMoltbookPage(context);
+      break;
     default:
       content = "";
   }
@@ -2954,8 +3039,8 @@ function renderSettingsNotificationsPage(context) {
   const { push, permission, secureContext, standalone, supportsPushValue, serverEnabled } = context;
   const statusRows = [
     renderSettingsInfoRow(L("settings.row.status"), L(context.setupState.notifications.labelKey)),
-    renderSettingsInfoRow(L("settings.row.notificationPermission"), permission),
-    renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), push.serverSubscribed ? L("common.yes") : L("common.no")),
+    renderSettingsInfoRow(L("settings.row.notificationPermission"), L(`settings.permission.${permission}`) || permission),
+    renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), push.serverSubscribed ? L("common.enabled") : L("common.disabled")),
     push.lastSuccessfulDeliveryAtMs
       ? renderSettingsInfoRow(
           L("settings.row.lastSuccessfulDelivery"),
@@ -2967,10 +3052,10 @@ function renderSettingsNotificationsPage(context) {
     <div class="settings-page">
       ${renderSettingsGroup("", statusRows)}
       ${renderSettingsGroup(L("settings.group.advanced"), [
-        renderSettingsInfoRow(L("settings.row.serverWebPush"), serverEnabled ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.secureContext"), secureContext ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.homeScreenApp"), standalone ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.browserSupport"), supportsPushValue ? L("common.yes") : L("common.no")),
+        renderSettingsInfoRow(L("settings.row.serverWebPush"), serverEnabled ? L("common.enabled") : L("common.disabled")),
+        renderSettingsInfoRow(L("settings.row.secureContext"), secureContext ? L("common.supported") : L("common.notSupported")),
+        renderSettingsInfoRow(L("settings.row.homeScreenApp"), standalone ? L("common.supported") : L("common.notSupported")),
+        renderSettingsInfoRow(L("settings.row.browserSupport"), supportsPushValue ? L("common.supported") : L("common.notSupported")),
       ])}
       ${state.pushNotice ? `<p class="inline-alert inline-alert--success">${escapeHtml(state.pushNotice)}</p>` : ""}
       ${state.pushError ? `<p class="inline-alert inline-alert--danger">${escapeHtml(state.pushError)}</p>` : ""}
@@ -3062,12 +3147,12 @@ function renderSettingsAdvancedPage(context) {
     <div class="settings-page">
       ${context.diagnostics.map((message) => `<p class="inline-alert">${escapeHtml(message)}</p>`).join("")}
       ${renderSettingsGroup("", [
-        renderSettingsInfoRow(L("settings.row.serverWebPush"), context.serverEnabled ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.secureContext"), context.secureContext ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.homeScreenApp"), context.standalone ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.notificationPermission"), context.permission),
-        renderSettingsInfoRow(L("settings.row.browserSupport"), context.supportsPushValue ? L("common.yes") : L("common.no")),
-        renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), context.push.serverSubscribed ? L("common.yes") : L("common.no")),
+        renderSettingsInfoRow(L("settings.row.serverWebPush"), context.serverEnabled ? L("common.enabled") : L("common.disabled")),
+        renderSettingsInfoRow(L("settings.row.secureContext"), context.secureContext ? L("common.supported") : L("common.notSupported")),
+        renderSettingsInfoRow(L("settings.row.homeScreenApp"), context.standalone ? L("common.supported") : L("common.notSupported")),
+        renderSettingsInfoRow(L("settings.row.notificationPermission"), L(`settings.permission.${context.permission}`) || context.permission),
+        renderSettingsInfoRow(L("settings.row.browserSupport"), context.supportsPushValue ? L("common.supported") : L("common.notSupported")),
+        renderSettingsInfoRow(L("settings.row.currentDeviceSubscribed"), context.push.serverSubscribed ? L("common.enabled") : L("common.disabled")),
         context.push.lastSuccessfulDeliveryAtMs
           ? renderSettingsInfoRow(
               L("settings.row.lastSuccessfulDelivery"),
@@ -3152,13 +3237,50 @@ function renderSettingsAwayModePage() {
   `;
 }
 
+function renderSettingsMoltbookPage(context) {
+  const scout = context.moltbookScout;
+  if (!scout?.enabled) {
+    return `
+      <div class="settings-page">
+        <p class="settings-page-copy muted">${escapeHtml(L("settings.moltbook.unavailable"))}</p>
+      </div>
+    `;
+  }
+  const batchRows = scout.batch ? [
+    renderSettingsInfoRow(L("settings.row.moltbookBatchCandidates"), String(scout.batch.candidateCount)),
+    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")}`),
+  ] : [];
+  return `
+    <div class="settings-page">
+      ${renderSettingsGroup("", [
+        renderSettingsInfoRow(L("settings.row.moltbookQuota"), `${scout.sentToday} / ${scout.maxDaily}`),
+        renderSettingsInfoRow(L("settings.row.moltbookComposed"), `${scout.composedToday || 0} / 3`),
+        renderSettingsInfoRow(L("settings.row.moltbookSeenPosts"), String(scout.seenPostCount)),
+      ])}
+      ${batchRows.length ? renderSettingsGroup(L("settings.moltbook.batchTitle"), batchRows) : ""}
+      ${Array.isArray(scout.recentComposeTitles) && scout.recentComposeTitles.length
+        ? renderSettingsGroup(L("settings.row.moltbookRecentTitles"), scout.recentComposeTitles.map((t) => {
+            const title = typeof t === "string" ? t : (t.title || "");
+            const postId = typeof t === "object" ? t.postId : "";
+            const display = postId
+              ? `<a href="https://www.moltbook.com/post/${escapeHtml(postId)}" target="_blank" rel="noopener">${escapeHtml(title)}</a>`
+              : escapeHtml(title);
+            return renderSettingsInfoRow("", display, { rawValue: true, rowClassName: "settings-info-row--stacked" });
+          }))
+        : ""}
+    </div>
+  `;
+}
+
 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(" ");
+  const displayValue = options.rawValue ? value : escapeHtml(value);
   return `
     <div class="${rowClassName}">
       <span class="settings-info-row__label">${escapeHtml(label)}</span>
-      <span class="${valueClassName}">${escapeHtml(value)}</span>
+      <span class="${valueClassName}">${displayValue}</span>
     </div>
   `;
 }
@@ -3193,7 +3315,7 @@ function renderDeviceSection(title, devices, emptyMessage) {
 
 function renderTrustedDeviceCard(device) {
   const localeLabel = localeDisplayName(device.locale, state.locale) || device.locale || L("common.unavailable");
-  const pushLabel = device.pushSubscribed ? L("common.yes") : L("common.no");
+  const pushLabel = device.pushSubscribed ? L("common.enabled") : L("common.disabled");
   const badge = device.currentDevice
     ? `<span class="device-card__badge">${escapeHtml(L("settings.device.thisDevice"))}</span>`
     : "";
@@ -3264,13 +3386,18 @@ function renderStandardDetailDesktop(detail) {
     <div class="detail-shell">
       ${renderDetailMetaRow(detail, kindInfo)}
       <h2 class="detail-title detail-title--desktop">${escapeHtml(detailDisplayTitle(detail))}</h2>
-      ${detail.readOnly || detail.kind === "approval" ? "" : renderDetailLead(detail, kindInfo)}
+      ${detail.readOnly || detail.kind === "approval" || detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" ? "" : renderDetailLead(detail, kindInfo)}
       ${renderPreviousContextCard(detail)}
       ${renderInterruptedDetailNotice(detail)}
+      ${renderMoltbookReplyComposer(detail)}
+      ${renderMoltbookDraftComposer(detail)}
+      ${renderA2ATaskDetail(detail)}
       ${
-        plainIntro
-          ? plainIntro
-          : `
+        detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task"
+          ? ""
+          : plainIntro
+            ? plainIntro
+            : `
             <section class="detail-card detail-card--body ${spaciousBodyDetail ? "detail-card--message-body" : ""}">
               <div class="detail-body ${spaciousBodyDetail ? "detail-body--message " : ""}markdown">${detail.messageHtml || ""}</div>
             </section>
@@ -3299,10 +3426,15 @@ function renderStandardDetailMobile(detail) {
           ${renderDetailMetaRow(detail, kindInfo, { mobile: true })}
           ${renderPreviousContextCard(detail, { mobile: true })}
           ${renderInterruptedDetailNotice(detail, { mobile: true })}
+          ${renderMoltbookReplyComposer(detail, { mobile: true })}
+          ${renderMoltbookDraftComposer(detail, { mobile: true })}
+          ${renderA2ATaskDetail(detail, { mobile: true })}
           ${
-            plainIntro
-              ? plainIntro
-              : `
+            detail.kind === "moltbook_draft" || detail.kind === "moltbook_reply" || detail.kind === "a2a_task"
+              ? ""
+              : plainIntro
+                ? plainIntro
+                : `
                 <section class="detail-card detail-card--body detail-card--mobile ${spaciousBodyDetail ? "detail-card--message-body" : ""}">
                   ${detail.readOnly || detail.kind === "approval" ? "" : renderDetailLead(detail, kindInfo, { mobile: true })}
                   <div class="detail-body ${spaciousBodyDetail ? "detail-body--message " : ""}markdown">${detail.messageHtml || ""}</div>
@@ -3327,7 +3459,8 @@ function renderDetailPlainIntro(detail, options = {}) {
   if (!["approval", "diff_thread", "file_event"].includes(detail?.kind || "")) {
     return "";
   }
-  if (detail?.kind === "approval" && normalizeClientText(detail?.approvalKind || "") !== "file") {
+  const ak = normalizeClientText(detail?.approvalKind || "");
+  if (detail?.kind === "approval" && ak !== "file" && ak !== "plan" && ak !== "question") {
     return "";
   }
   if (!detail?.messageHtml) {
@@ -3732,7 +3865,7 @@ function renderClaudeQuestionSection(detail, options = {}) {
         ${noticeHtml}
         ${isReadOnly ? "" : `
           <div class="claude-question-actions">
-            <button type="submit" class="action-button action-button--primary" ${isSent || draft.sending ? "disabled" : ""}>
+            <button type="submit" class="primary primary--wide" ${isSent || draft.sending ? "disabled" : ""}>
               ${escapeHtml(draft.sending ? L("claudeQuestion.send", { provider }) + "…" : sendLabel)}
             </button>
           </div>
@@ -3755,6 +3888,150 @@ function setClaudeQuestionDraft(token, partial) {
   return next;
 }
 
+function renderMoltbookReplyComposer(detail, options = {}) {
+  if (detail.kind !== "moltbook_reply") return "";
+  const rawTitle = normalizeClientText(detail.title || "");
+  const match = rawTitle.match(/^@([^\s]+)/u);
+  const authorHandle = match ? match[1] : detail.commentAuthor || "";
+  const postUrl = detail.postUrl || "";
+  const postLink = postUrl
+    ? `<p class="reply-composer__author"><a href="${escapeHtml(postUrl)}" target="_blank" rel="noopener">${escapeHtml(postUrl)}</a></p>`
+    : "";
+  const bodyHtml = detail.messageHtml
+    ? `<div class="reply-composer__context-body markdown">${detail.messageHtml}</div>`
+    : "";
+  return `
+    <section class="detail-card detail-card--reply ${options.mobile ? "detail-card--mobile" : ""}">
+      <div class="reply-composer reply-composer--readonly">
+        <div class="reply-composer__copy">
+          <span class="eyebrow-pill eyebrow-pill--quiet">Moltbook</span>
+          ${authorHandle ? `<p class="reply-composer__author">from <strong>@${escapeHtml(authorHandle)}</strong></p>` : ""}
+          ${postLink}
+        </div>
+        ${bodyHtml}
+      </div>
+    </section>
+  `;
+}
+
+function renderMoltbookDraftComposer(detail, options = {}) {
+  if (detail.kind !== "moltbook_draft") return "";
+  const enabled = detail.moltbookDraftEnabled !== false && detail.readOnly !== true;
+  const draftText = detail.draftText || "";
+  const isOriginalPost = detail.draftType === "original_post";
+  const postAuthorLine = !isOriginalPost && detail.postAuthor
+    ? `<p class="reply-composer__author-meta muted">@${escapeHtml(detail.postAuthor)}</p>`
+    : "";
+  const postLink = !isOriginalPost && detail.postUrl
+    ? `<p class="reply-composer__author"><a href="${escapeHtml(detail.postUrl)}" target="_blank" rel="noopener">${escapeHtml(detail.postTitle || detail.postUrl)}</a></p>`
+    : "";
+  const postBodyBlock = !isOriginalPost && detail.postBody
+    ? `<details class="reply-composer__context"><summary>元の投稿</summary><div class="reply-composer__context-body">${escapeHtml(detail.postBody).replace(/\n/g, "<br>")}</div></details>`
+    : "";
+  const intentBlock = detail.intent
+    ? `<div class="reply-composer__intent"><span class="eyebrow-pill eyebrow-pill--quiet">${escapeHtml(L("moltbook.draft.intent"))}</span><p>${escapeHtml(detail.intent).replace(/\n/g, "<br>")}</p></div>`
+    : "";
+  const titleInput = isOriginalPost && enabled
+    ? `<label class="field reply-field reply-field--title"><span class="field-label">${escapeHtml(L("moltbook.draft.titleLabel"))}</span><input type="text" name="title" class="reply-field__input" value="${escapeHtml(detail.postTitle || "")}" data-moltbook-draft-title /></label>`
+    : isOriginalPost
+      ? `<p class="reply-composer__title-display"><strong>${escapeHtml(detail.postTitle || "")}</strong></p>`
+      : "";
+  const submoltBadge = isOriginalPost && detail.submoltName
+    ? `<span class="eyebrow-pill eyebrow-pill--subtle">${escapeHtml(detail.submoltName)}</span>`
+    : "";
+  const eyebrowLabel = isOriginalPost ? L("moltbook.draft.eyebrowPost") : L("moltbook.draft.eyebrowReply");
+  const approveLabel = isOriginalPost ? L("moltbook.draft.approvePost") : L("moltbook.draft.approveReply");
+  const greetingBlock = (() => {
+    if (!isOriginalPost) return "";
+    const slot = detail.slot || "";
+    const icons = { morning: "\u2600\ufe0f", noon: "\u26c5", evening: "\ud83c\udf19" };
+    const keys = { morning: "moltbook.draft.greetMorning", noon: "moltbook.draft.greetNoon", evening: "moltbook.draft.greetEvening" };
+    const icon = icons[slot] || "\u270d\ufe0f";
+    const msg = keys[slot] ? L(keys[slot]) : L("moltbook.draft.greetFallback");
+    return `<div class="compose-greeting"><span class="compose-greeting__icon">${icon}</span><span class="compose-greeting__text">${escapeHtml(msg)}</span></div>`;
+  })();
+  const buttons = enabled
+    ? `
+      <div class="actions actions--stack${options.mobile ? " actions--sticky" : ""}">
+        <button type="submit" data-action="approve" class="primary primary--wide">${escapeHtml(approveLabel)}</button>
+        <button type="submit" data-action="deny" class="danger danger--wide">Deny</button>
+      </div>
+    `
+    : `<p class="muted reply-composer__description">${escapeHtml(L("moltbook.draft.resolved"))}</p>`;
+  const buttonsWrapped = enabled && options.mobile ? `<div class="detail-action-bar">${buttons}</div>` : buttons;
+  return `
+    <section class="detail-card detail-card--reply ${options.mobile ? "detail-card--mobile" : ""}">
+      <form class="reply-composer" data-moltbook-draft-form data-token="${escapeHtml(detail.token || "")}" ${isOriginalPost ? 'data-draft-type="original_post"' : ""}>
+        <div class="reply-composer__copy">
+          <span class="eyebrow-pill eyebrow-pill--quiet">${escapeHtml(eyebrowLabel)}</span>
+          ${submoltBadge}
+          ${greetingBlock}
+          ${postLink}
+          ${postAuthorLine}
+          ${titleInput}
+          ${postBodyBlock}
+          ${intentBlock}
+          <p class="muted reply-composer__description">${escapeHtml(L("moltbook.draft.editHint"))}</p>
+        </div>
+        <textarea name="text" class="reply-composer__textarea" data-moltbook-draft-textarea rows="8" ${enabled ? "" : "readonly"}>${escapeHtml(draftText)}</textarea>
+        ${buttonsWrapped}
+      </form>
+    </section>
+  `;
+}
+
+function renderA2ATaskDetail(detail, options = {}) {
+  if (detail.kind !== "a2a_task") return "";
+  const enabled = detail.a2aTaskEnabled !== false && detail.readOnly !== true;
+  const instruction = detail.instruction || "";
+  const callerIp = detail.callerInfo?.ip || "";
+  const callerAgent = detail.callerInfo?.userAgent || "";
+  const callerLine = callerIp
+    ? `<p class="reply-composer__author-meta muted">${escapeHtml(L("a2a.task.from"))}: ${escapeHtml(callerIp)}${callerAgent ? ` (${escapeHtml(callerAgent.slice(0, 60))})` : ""}</p>`
+    : "";
+
+  const statusKey = {
+    submitted: "a2a.task.statusSubmitted",
+    working: "a2a.task.statusWorking",
+    completed: "a2a.task.statusCompleted",
+    failed: "a2a.task.statusFailed",
+    canceled: "a2a.task.statusCanceled",
+    rejected: "a2a.task.statusRejected",
+  }[detail.taskStatus] || "a2a.task.statusSubmitted";
+
+  const statusBadge = !enabled
+    ? `<span class="eyebrow-pill eyebrow-pill--subtle">${escapeHtml(L(statusKey))}</span>`
+    : "";
+
+  const buttons = enabled
+    ? `
+      <div class="actions actions--stack${options.mobile ? " actions--sticky" : ""}">
+        <button type="submit" data-action="approve" class="primary primary--wide">${escapeHtml(L("a2a.task.approve"))}</button>
+        <button type="submit" data-action="deny" class="danger danger--wide">${escapeHtml(L("a2a.task.deny"))}</button>
+      </div>
+    `
+    : `<p class="muted reply-composer__description">${escapeHtml(L("a2a.task.resolved"))}</p>`;
+  const buttonsWrapped = enabled && options.mobile ? `<div class="detail-action-bar">${buttons}</div>` : buttons;
+
+  return `
+    <section class="detail-card detail-card--reply ${options.mobile ? "detail-card--mobile" : ""}">
+      <form class="reply-composer" data-a2a-task-form data-token="${escapeHtml(detail.token || "")}">
+        <div class="reply-composer__copy">
+          <span class="eyebrow-pill eyebrow-pill--quiet">${escapeHtml(L("a2a.task.eyebrow"))}</span>
+          ${statusBadge}
+          ${callerLine}
+          <p class="muted reply-composer__description">${enabled ? escapeHtml(L("a2a.task.editHint")) : ""}</p>
+        </div>
+        <div class="reply-composer__instruction">
+          <label class="field-label">${escapeHtml(L("a2a.task.instruction"))}</label>
+          <textarea name="instruction" class="reply-composer__textarea" rows="6" ${enabled ? "" : "readonly"}>${escapeHtml(instruction)}</textarea>
+        </div>
+        ${buttonsWrapped}
+      </form>
+    </section>
+  `;
+}
+
 function renderCompletionReplyComposer(detail, options = {}) {
   if (detail.kind !== "completion" || detail.reply?.enabled !== true) {
     return "";
@@ -4811,6 +5088,143 @@ function bindShellInteractions() {
     });
   }
 
+  const moltbookDraftForm = document.querySelector("[data-moltbook-draft-form]");
+  if (moltbookDraftForm) {
+    const token = moltbookDraftForm.dataset.token || "";
+    let submittedAction = "approve";
+    moltbookDraftForm.querySelectorAll("button[type='submit']").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        submittedAction = btn.dataset.action || "approve";
+      });
+    });
+    moltbookDraftForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      if (moltbookDraftForm.dataset.submitting === "1") return;
+      moltbookDraftForm.dataset.submitting = "1";
+      const buttons = moltbookDraftForm.querySelectorAll("button[type='submit']");
+      const textarea = moltbookDraftForm.querySelector("textarea");
+      const labelCache = new Map();
+      buttons.forEach((btn) => {
+        labelCache.set(btn, btn.innerHTML);
+        btn.disabled = true;
+        if (btn.dataset.action === submittedAction) {
+          btn.innerHTML = submittedAction === "approve" ? "送信中…" : "処理中…";
+          btn.classList.add("is-loading");
+        } else {
+          btn.classList.add("is-dimmed");
+        }
+      });
+      if (textarea) textarea.readOnly = true;
+      const editedText = normalizeClientText(new FormData(moltbookDraftForm).get("text"));
+      const titleInput = moltbookDraftForm.querySelector("[data-moltbook-draft-title]");
+      const editedTitle = titleInput ? normalizeClientText(titleInput.value) : "";
+      try {
+        const decisionBody = { action: submittedAction, editedText };
+        if (editedTitle) decisionBody.editedTitle = editedTitle;
+        const res = await fetch(`/api/items/moltbook-draft/${encodeURIComponent(token)}/decision`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify(decisionBody),
+        });
+        if (!res.ok) {
+          const errBody = await res.json().catch(() => ({}));
+          alert(`Moltbook draft ${submittedAction} failed: ${errBody.error || res.status}`);
+          buttons.forEach((btn) => {
+            btn.disabled = false;
+            btn.classList.remove("is-loading", "is-dimmed");
+            btn.innerHTML = labelCache.get(btn);
+          });
+          if (textarea) textarea.readOnly = false;
+          moltbookDraftForm.dataset.submitting = "";
+          return;
+        }
+        // Mark local detail as resolved so re-render shows "already resolved" immediately.
+        if (state.currentDetail?.kind === "moltbook_draft") {
+          state.currentDetail.moltbookDraftEnabled = false;
+          state.currentDetail.readOnly = true;
+        }
+        await refreshAuthenticatedState();
+        await renderShell();
+      } catch (error) {
+        alert(`Moltbook draft error: ${error.message}`);
+        buttons.forEach((btn) => {
+          btn.disabled = false;
+          btn.classList.remove("is-loading", "is-dimmed");
+          btn.innerHTML = labelCache.get(btn);
+        });
+        if (textarea) textarea.readOnly = false;
+        moltbookDraftForm.dataset.submitting = "";
+      }
+    });
+  }
+
+  const a2aTaskForm = document.querySelector("[data-a2a-task-form]");
+  if (a2aTaskForm) {
+    const token = a2aTaskForm.dataset.token || "";
+    let submittedAction = "approve";
+    a2aTaskForm.querySelectorAll("button[type='submit']").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        submittedAction = btn.dataset.action || "approve";
+      });
+    });
+    a2aTaskForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      if (a2aTaskForm.dataset.submitting === "1") return;
+      a2aTaskForm.dataset.submitting = "1";
+      const buttons = a2aTaskForm.querySelectorAll("button[type='submit']");
+      const textarea = a2aTaskForm.querySelector("textarea");
+      const labelCache = new Map();
+      buttons.forEach((btn) => {
+        labelCache.set(btn, btn.innerHTML);
+        btn.disabled = true;
+        if (btn.dataset.action === submittedAction) {
+          btn.innerHTML = submittedAction === "approve" ? "Executing…" : "Denying…";
+          btn.classList.add("is-loading");
+        } else {
+          btn.classList.add("is-dimmed");
+        }
+      });
+      if (textarea) textarea.readOnly = true;
+      const instruction = normalizeClientText(new FormData(a2aTaskForm).get("instruction"));
+      try {
+        const res = await fetch(`/api/items/a2a-task/${encodeURIComponent(token)}/decision`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({ action: submittedAction, instruction }),
+        });
+        if (!res.ok) {
+          const errBody = await res.json().catch(() => ({}));
+          alert(`A2A task ${submittedAction} failed: ${errBody.error || res.status}`);
+          buttons.forEach((btn) => {
+            btn.disabled = false;
+            btn.classList.remove("is-loading", "is-dimmed");
+            btn.innerHTML = labelCache.get(btn);
+          });
+          if (textarea) textarea.readOnly = false;
+          a2aTaskForm.dataset.submitting = "";
+          return;
+        }
+        if (state.currentDetail?.kind === "a2a_task") {
+          state.currentDetail.a2aTaskEnabled = false;
+          state.currentDetail.readOnly = true;
+        }
+        await refreshAuthenticatedState();
+        await renderShell();
+      } catch (error) {
+        alert(`A2A task error: ${error.message}`);
+        buttons.forEach((btn) => {
+          btn.disabled = false;
+          btn.classList.remove("is-loading", "is-dimmed");
+          btn.innerHTML = labelCache.get(btn);
+        });
+        if (textarea) textarea.readOnly = false;
+        a2aTaskForm.dataset.submitting = "";
+      }
+    });
+  }
+
   const replyForm = document.querySelector("[data-completion-reply-form]");
   if (replyForm) {
     const token = replyForm.dataset.token || "";
@@ -5289,6 +5703,9 @@ function kindMeta(kind) {
       return { label: L("common.diff"), tone: "neutral", icon: "diff" };
     case "file_event":
       return { label: L("common.fileEvent"), tone: "neutral", icon: "file-event" };
+    case "moltbook_reply":
+    case "moltbook_draft":
+      return { label: L("common.sns"), tone: "neutral", icon: "item" };
     default:
       return { label: L("common.item"), tone: "neutral", icon: "item" };
   }