viveworker 0.1.4 → 0.1.6

package/web/app.js

@@ -8,19 +8,25 @@ const TIMELINE_MESSAGE_KINDS = new Set(["user_message", "assistant_commentary",
 const TIMELINE_OPERATIONAL_KINDS = new Set(["approval", "plan", "plan_ready", "choice", "completion"]);
 const THREAD_FILTER_INTERACTION_DEFER_MS = 8000;
 const MAX_COMPLETION_REPLY_IMAGE_COUNT = 4;
+const NOTIFICATION_INTENT_CACHE = "viveworker-notification-intent-v1";
+const NOTIFICATION_INTENT_PATH = "/__viveworker_notification_intent__";
 
 const state = {
   session: null,
   inbox: null,
   timeline: null,
   devices: [],
-  currentTab: "pending",
+  currentTab: "inbox",
   currentItem: null,
   currentDetail: null,
   currentDetailLoading: false,
   detailLoadingItem: null,
   detailOpen: false,
+  inboxSubtab: "pending",
   timelineThreadFilter: "all",
+  timelineKindFilter: "all",
+  timelineKindFilterOpen: false,
+  diffThreadFilter: "all",
   completedThreadFilter: "all",
   settingsSubpage: "",
   settingsScrollState: null,
@@ -32,6 +38,7 @@ const state = {
   listScrollState: null,
   pendingListScrollRestore: false,
   threadFilterInteractionUntilMs: 0,
+  diffThreadExpandedFiles: {},
   choiceLocalDrafts: {},
   completionReplyDrafts: {},
   pairError: "",
@@ -86,6 +93,9 @@ async function boot() {
   await registerServiceWorker();
   navigator.serviceWorker?.addEventListener("message", handleServiceWorkerMessage);
   window.addEventListener("resize", handleViewportChange, { passive: true });
+  window.addEventListener("focus", handlePotentialExternalNavigation, { passive: true });
+  window.addEventListener("pageshow", handlePotentialExternalNavigation, { passive: true });
+  document.addEventListener("visibilitychange", handleDocumentVisibilityChange);
 
   await refreshSession();
 
@@ -107,6 +117,9 @@ async function boot() {
   if (parsedInitialItem) {
     state.currentItem = parsedInitialItem;
     state.currentTab = tabForItemKind(parsedInitialItem.kind, state.currentTab);
+    if (state.currentTab === "inbox") {
+      state.inboxSubtab = inboxSubtabForItemKind(parsedInitialItem.kind);
+    }
     state.detailOpen = true;
     if (isFastPathItemRef(parsedInitialItem)) {
       state.launchItemIntent = {
@@ -121,6 +134,7 @@ async function boot() {
     return;
   }
 
+  await consumePendingNotificationIntent();
   await syncDetectedLocalePreference();
   await refreshAuthenticatedState();
   ensureCurrentSelection();
@@ -130,6 +144,10 @@ async function boot() {
     if (!state.session?.authenticated) {
       return;
     }
+    const consumedNotificationIntent = await consumePendingNotificationIntent();
+    if (consumedNotificationIntent) {
+      return;
+    }
     await refreshAuthenticatedState();
     if (!shouldDeferRenderForActiveInteraction()) {
       await renderShell();
@@ -308,12 +326,15 @@ async function getClientPushState() {
 
 async function refreshInbox() {
   state.inbox = await apiGet("/api/inbox");
+  syncDiffThreadFilter();
   syncCompletedThreadFilter();
+  syncInboxSubtab();
 }
 
 async function refreshTimeline() {
   state.timeline = await apiGet("/api/timeline");
   syncTimelineThreadFilter();
+  syncTimelineKindFilter();
 }
 
 async function refreshDevices() {
@@ -378,6 +399,7 @@ function allInboxEntries() {
   }
   return [
     ...state.inbox.pending.map((item) => ({ item, status: "pending" })),
+    ...(Array.isArray(state.inbox.diff) ? state.inbox.diff.map((item) => ({ item, status: "diff" })) : []),
     ...state.inbox.completed.map((item) => ({ item, status: "completed" })),
   ];
 }
@@ -399,14 +421,14 @@ function listEntriesForTab(tab) {
       return [];
     }
   }
-  if (tab === "pending") {
-    return state.inbox.pending.map((item) => ({ item, status: "pending" }));
+  if (tab === "inbox") {
+    return listInboxEntries();
   }
   if (tab === "timeline") {
     return filteredTimelineEntries().map((item) => ({ item, status: "timeline" }));
   }
-  if (tab === "completed") {
-    return filteredCompletedEntries().map((item) => ({ item, status: "completed" }));
+  if (tab === "diff") {
+    return filteredDiffEntries().map((item) => ({ item, status: "diff" }));
   }
   return [];
 }
@@ -415,15 +437,29 @@ function listEntriesForCurrentTab() {
   return listEntriesForTab(state.currentTab);
 }
 
+function listInboxEntries() {
+  if (!state.inbox) {
+    return [];
+  }
+  if (state.inboxSubtab === "completed") {
+    return filteredCompletedEntries().map((item) => ({ item, status: "completed" }));
+  }
+  return state.inbox.pending.map((item) => ({ item, status: "pending" }));
+}
+
 function filteredTimelineEntries() {
   const entries = Array.isArray(state.timeline?.entries) ? state.timeline.entries : [];
   if (!entries.length) {
     return [];
   }
-  if (!state.timelineThreadFilter || state.timelineThreadFilter === "all") {
-    return entries;
+  let filtered = entries;
+  if (state.timelineThreadFilter && state.timelineThreadFilter !== "all") {
+    filtered = filtered.filter((entry) => entry.threadId === state.timelineThreadFilter);
+  }
+  if (!state.timelineKindFilter || state.timelineKindFilter === "all") {
+    return filtered;
   }
-  return entries.filter((entry) => entry.threadId === state.timelineThreadFilter);
+  return filtered.filter((entry) => timelineEntryMatchesKindFilter(entry, state.timelineKindFilter));
 }
 
 function filteredCompletedEntries() {
@@ -437,6 +473,14 @@ function filteredCompletedEntries() {
   return entries.filter((entry) => entry.threadId === state.completedThreadFilter);
 }
 
+function filteredDiffEntries() {
+  const entries = Array.isArray(state.inbox?.diff) ? state.inbox.diff : [];
+  if (!entries.length) {
+    return [];
+  }
+  return entries.slice();
+}
+
 function syncTimelineThreadFilter() {
   const threads = Array.isArray(state.timeline?.threads) ? state.timeline.threads : [];
   if (!state.timelineThreadFilter || state.timelineThreadFilter === "all") {
@@ -448,6 +492,52 @@ function syncTimelineThreadFilter() {
   }
 }
 
+function syncTimelineKindFilter() {
+  const validIds = new Set(timelineKindFilterOptions().map((option) => option.id));
+  if (!state.timelineKindFilter || !validIds.has(state.timelineKindFilter)) {
+    state.timelineKindFilter = "all";
+  }
+}
+
+function timelineKindFilterOptions() {
+  return [
+    { id: "all", label: L("timeline.kindFilter.all"), icon: "filter" },
+    { id: "messages", label: L("timeline.kindFilter.messages"), icon: "timeline" },
+    { 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" },
+    { id: "choices", label: L("timeline.kindFilter.choices"), icon: "choice" },
+    { id: "completions", label: L("timeline.kindFilter.completions"), icon: "completion-item" },
+  ];
+}
+
+function currentTimelineKindFilterOption() {
+  return (
+    timelineKindFilterOptions().find((option) => option.id === state.timelineKindFilter) ||
+    timelineKindFilterOptions()[0]
+  );
+}
+
+function timelineEntryMatchesKindFilter(entry, filterId) {
+  const kind = normalizeClientText(entry?.kind || entry?.item?.kind || "");
+  switch (filterId) {
+    case "messages":
+      return TIMELINE_MESSAGE_KINDS.has(kind);
+    case "files":
+      return kind === "file_event";
+    case "approvals":
+      return kind === "approval";
+    case "plans":
+      return kind === "plan" || kind === "plan_ready";
+    case "choices":
+      return kind === "choice";
+    case "completions":
+      return kind === "completion";
+    default:
+      return true;
+  }
+}
+
 function completedThreads() {
   const items = Array.isArray(state.inbox?.completed) ? state.inbox.completed : [];
   if (!items.length) {
@@ -473,6 +563,42 @@ function completedThreads() {
   return [...byThread.values()].sort((left, right) => right.latestAtMs - left.latestAtMs);
 }
 
+function diffThreads() {
+  const items = Array.isArray(state.inbox?.diff) ? state.inbox.diff : [];
+  if (!items.length) {
+    return [];
+  }
+  const byThread = new Map();
+  for (const item of items) {
+    const threadId = normalizeClientText(item.threadId || "");
+    if (!threadId) {
+      continue;
+    }
+    const latestAtMs = Number(item.createdAtMs || 0);
+    const label = resolvedThreadLabel(threadId, item.threadLabel || "");
+    const previous = byThread.get(threadId);
+    if (!previous || latestAtMs >= previous.latestAtMs) {
+      byThread.set(threadId, {
+        id: threadId,
+        label,
+        latestAtMs,
+      });
+    }
+  }
+  return [...byThread.values()].sort((left, right) => right.latestAtMs - left.latestAtMs);
+}
+
+function syncDiffThreadFilter() {
+  const threads = diffThreads();
+  if (!state.diffThreadFilter || state.diffThreadFilter === "all") {
+    state.diffThreadFilter = "all";
+    return;
+  }
+  if (!threads.some((thread) => thread.id === state.diffThreadFilter)) {
+    state.diffThreadFilter = "all";
+  }
+}
+
 function syncCompletedThreadFilter() {
   const threads = completedThreads();
   if (!state.completedThreadFilter || state.completedThreadFilter === "all") {
@@ -484,6 +610,14 @@ function syncCompletedThreadFilter() {
   }
 }
 
+function syncInboxSubtab() {
+  if (state.inboxSubtab === "completed") {
+    state.inboxSubtab = "completed";
+    return;
+  }
+  state.inboxSubtab = "pending";
+}
+
 function renderPair() {
   const shouldInstallFromHomeScreen = Boolean(initialPairToken) && !shouldAutoPairFromBootstrapToken();
   app.innerHTML = `
@@ -706,7 +840,7 @@ function shouldDeferRenderForActiveInteraction() {
   }
   if (
     activeElement instanceof HTMLSelectElement &&
-    activeElement.matches("[data-timeline-thread-select], [data-completed-thread-select]")
+    activeElement.matches("[data-timeline-thread-select], [data-diff-thread-select], [data-completed-thread-select]")
   ) {
     return true;
   }
@@ -1269,11 +1403,16 @@ function renderMobileWorkspace(detail) {
 }
 
 function renderListPanel({ tab, entries, desktop }) {
+  if (tab === "inbox") {
+    return renderInboxPanel({ entries, desktop });
+  }
   if (tab === "timeline") {
     return renderTimelinePanel({ entries, desktop });
   }
+  if (tab === "diff") {
+    return renderDiffPanel({ entries, desktop });
+  }
   const meta = tabMeta(tab);
-  const threadFilterHtml = tab === "completed" ? renderCompletedThreadDropdown() : "";
   if (!desktop) {
     return `
       <div class="screen-shell screen-shell--mobile">
@@ -1281,7 +1420,6 @@ function renderListPanel({ tab, entries, desktop }) {
           <p class="screen-copy">${escapeHtml(meta.description)}</p>
           <span class="count-chip">${entries.length}</span>
         </div>
-        ${threadFilterHtml}
         ${
           entries.length
             ? `<div class="card-list">
@@ -1303,7 +1441,6 @@ function renderListPanel({ tab, entries, desktop }) {
         <span class="count-chip">${entries.length}</span>
       </div>
       <p class="screen-copy">${escapeHtml(meta.description)}</p>
-      ${threadFilterHtml}
       ${
         entries.length
           ? `<div class="card-list ${desktop ? "card-list--desktop" : ""}">
@@ -1315,6 +1452,96 @@ function renderListPanel({ tab, entries, desktop }) {
   `;
 }
 
+function renderInboxPanel({ entries, desktop }) {
+  const meta = tabMeta("inbox");
+  const subtabControls = renderInboxSubtabs();
+  const threadFilterHtml = state.inboxSubtab === "completed" ? renderCompletedThreadDropdown() : "";
+  const bodyHtml = entries.length
+    ? `<div class="card-list ${desktop ? "card-list--desktop" : ""}">
+        ${entries.map((entry) => renderItemCard(entry, "inbox", desktop)).join("")}
+      </div>`
+    : renderInboxEmptyState();
+
+  if (!desktop) {
+    return `
+      <div class="screen-shell screen-shell--mobile">
+        <div class="screen-header screen-header--mobile">
+          <p class="screen-copy">${escapeHtml(meta.description)}</p>
+          <span class="count-chip">${entries.length}</span>
+        </div>
+        ${subtabControls}
+        ${threadFilterHtml}
+        ${bodyHtml}
+      </div>
+    `;
+  }
+
+  return `
+    <div class="screen-shell">
+      <div class="screen-header">
+        <div>
+          <p class="screen-eyebrow">${escapeHtml(meta.eyebrow)}</p>
+          <h2 class="screen-title">${escapeHtml(meta.title)}</h2>
+        </div>
+        <span class="count-chip">${entries.length}</span>
+      </div>
+      <p class="screen-copy">${escapeHtml(meta.description)}</p>
+      ${subtabControls}
+      ${threadFilterHtml}
+      ${bodyHtml}
+    </div>
+  `;
+}
+
+function renderInboxSubtabs() {
+  const pendingCount = pendingInboxCount();
+  return `
+    <div class="inbox-subtabs" role="tablist" aria-label="${escapeHtml(tabMeta("inbox").title)}">
+      ${inboxSubtabOptions()
+        .map(
+          (option) => {
+            const showPendingBadge = option.id === "pending" && pendingCount > 0;
+            const badgeHtml = showPendingBadge
+              ? `<span class="inbox-subtabs__badge" aria-hidden="true">${pendingCount}</span>`
+              : "";
+            const ariaLabel = showPendingBadge ? `${option.label} (${pendingCount})` : option.label;
+            return `
+            <button
+              type="button"
+              class="inbox-subtabs__button ${state.inboxSubtab === option.id ? "is-active" : ""}"
+              data-inbox-subtab="${escapeHtml(option.id)}"
+              role="tab"
+              aria-selected="${state.inboxSubtab === option.id ? "true" : "false"}"
+              aria-label="${escapeHtml(ariaLabel)}"
+            >
+              <span class="inbox-subtabs__button-label">${escapeHtml(option.label)}</span>
+              ${badgeHtml}
+            </button>
+          `
+          }
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+function inboxSubtabOptions() {
+  return [
+    { id: "pending", label: L("inbox.subtab.pending") },
+    { id: "completed", label: L("inbox.subtab.completed") },
+  ];
+}
+
+function renderInboxEmptyState() {
+  const isCompletedView = state.inboxSubtab === "completed";
+  return `
+    <div class="empty-state">
+      <p class="empty-state__title">${escapeHtml(L(isCompletedView ? "inbox.subtab.completed" : "inbox.subtab.pending"))}</p>
+      <p class="muted">${escapeHtml(L(isCompletedView ? "empty.completed" : "empty.pending"))}</p>
+    </div>
+  `;
+}
+
 function renderItemCard(entry, sourceTab, desktop) {
   if (entry.status === "completed" && entry.item.kind === "completion") {
     return renderCompletedCompletionCard(entry, sourceTab);
@@ -1398,6 +1625,7 @@ function renderCompletedCompletionCard(entry, sourceTab) {
       data-open-item-kind="${escapeHtml(item.kind)}"
       data-open-item-token="${escapeHtml(item.token)}"
       data-source-tab="${escapeHtml(sourceTab)}"
+      data-source-subtab="completed"
     >
       <div class="item-card__header">
         <div class="item-card__meta">
@@ -1453,12 +1681,47 @@ function renderTimelinePanel({ entries, desktop }) {
   `;
 }
 
+function renderDiffPanel({ entries, desktop }) {
+  const meta = tabMeta("diff");
+  const listClassName = desktop ? "diff-list diff-list--desktop" : "diff-list";
+  const bodyHtml = entries.length
+    ? `<div class="${listClassName}">${entries.map((entry) => renderDiffEntry(entry)).join("")}</div>`
+    : renderEmptyList("diff");
+
+  if (!desktop) {
+    return `
+      <div class="screen-shell screen-shell--mobile diff-shell diff-shell--mobile">
+        <div class="screen-header screen-header--mobile">
+          <p class="screen-copy">${escapeHtml(meta.description)}</p>
+          <span class="count-chip">${entries.length}</span>
+        </div>
+        ${bodyHtml}
+      </div>
+    `;
+  }
+
+  return `
+    <div class="screen-shell diff-shell">
+      <div class="screen-header">
+        <div>
+          <p class="screen-eyebrow">${escapeHtml(meta.eyebrow)}</p>
+          <h2 class="screen-title">${escapeHtml(meta.title)}</h2>
+        </div>
+        <span class="count-chip">${entries.length}</span>
+      </div>
+      <p class="screen-copy">${escapeHtml(meta.description)}</p>
+      ${bodyHtml}
+    </div>
+  `;
+}
+
 function renderTimelineThreadDropdown() {
   const threads = Array.isArray(state.timeline?.threads) ? state.timeline.threads : [];
   return renderThreadDropdown({
     inputId: "timeline-thread-select",
     dataAttribute: "data-timeline-thread-select",
     selectedThreadId: state.timelineThreadFilter,
+    controlsHtml: renderTimelineKindFilterControls(),
     threads: threads.map((thread) => ({
       id: thread.id,
       label: dropdownThreadLabel(thread.id, thread.label || ""),
@@ -1475,7 +1738,16 @@ function renderCompletedThreadDropdown() {
   });
 }
 
-function renderThreadDropdown({ inputId, dataAttribute, selectedThreadId, threads }) {
+function renderDiffThreadDropdown() {
+  return renderThreadDropdown({
+    inputId: "diff-thread-select",
+    dataAttribute: "data-diff-thread-select",
+    selectedThreadId: state.diffThreadFilter,
+    threads: diffThreads(),
+  });
+}
+
+function renderThreadDropdown({ inputId, dataAttribute, selectedThreadId, threads, controlsHtml = "" }) {
   const options = [
     {
       id: "all",
@@ -1490,38 +1762,88 @@ function renderThreadDropdown({ inputId, dataAttribute, selectedThreadId, thread
   return `
     <div class="timeline-thread-filter">
       <label class="timeline-thread-filter__label" for="${escapeHtml(inputId)}">${escapeHtml(L("timeline.filterLabel"))}</label>
-      <div class="timeline-thread-select-wrap">
-        <select id="${escapeHtml(inputId)}" class="timeline-thread-select" ${dataAttribute}>
-          ${options
-            .map(
-              (thread) => `
-                <option value="${escapeHtml(thread.id)}" ${selectedThreadId === thread.id ? "selected" : ""}>
-                  ${escapeHtml(thread.label)}
-                </option>
-              `
-            )
-            .join("")}
-        </select>
-        <span class="timeline-thread-select__chevron" aria-hidden="true">${renderIcon("chevron-down")}</span>
+      <div class="timeline-thread-filter__row">
+        <div class="timeline-thread-select-wrap">
+          <select id="${escapeHtml(inputId)}" class="timeline-thread-select" ${dataAttribute}>
+            ${options
+              .map(
+                (thread) => `
+                  <option value="${escapeHtml(thread.id)}" ${selectedThreadId === thread.id ? "selected" : ""}>
+                    ${escapeHtml(thread.label)}
+                  </option>
+                `
+              )
+              .join("")}
+          </select>
+          <span class="timeline-thread-select__chevron" aria-hidden="true">${renderIcon("chevron-down")}</span>
+        </div>
+        ${controlsHtml}
       </div>
     </div>
   `;
 }
 
+function renderTimelineKindFilterControls() {
+  const current = currentTimelineKindFilterOption();
+  const options = timelineKindFilterOptions();
+  return `
+    <div class="timeline-kind-filter" data-timeline-kind-filter-root>
+      <button
+        type="button"
+        class="timeline-kind-filter__button ${current.id !== "all" ? "is-active" : ""}"
+        data-timeline-kind-filter-toggle
+        aria-expanded="${state.timelineKindFilterOpen ? "true" : "false"}"
+        aria-label="${escapeHtml(L("timeline.kindFilterButtonLabel"))}"
+      >
+        <span class="timeline-kind-filter__button-icon" aria-hidden="true">${renderIcon(current.icon)}</span>
+      </button>
+      ${
+        state.timelineKindFilterOpen
+          ? `
+            <div class="timeline-kind-filter__popover" role="menu" aria-label="${escapeHtml(L("timeline.kindFilterLabel"))}">
+              ${options
+                .map(
+                  (option) => `
+                    <button
+                      type="button"
+                      class="timeline-kind-filter__option ${option.id === current.id ? "is-selected" : ""}"
+                      data-timeline-kind-filter-option="${escapeHtml(option.id)}"
+                      role="menuitemradio"
+                      aria-checked="${option.id === current.id ? "true" : "false"}"
+                    >
+                      <span class="timeline-kind-filter__option-icon" aria-hidden="true">${renderIcon(option.icon)}</span>
+                      <span class="timeline-kind-filter__option-label">${escapeHtml(option.label)}</span>
+                      <span class="timeline-kind-filter__option-check" aria-hidden="true">${
+                        option.id === current.id ? renderIcon("check") : ""
+                      }</span>
+                    </button>
+                  `
+                )
+                .join("")}
+            </div>
+          `
+          : ""
+      }
+    </div>
+  `;
+}
+
 function renderTimelineEntry(entry, { desktop }) {
   const item = entry.item;
   const kindInfo = kindMeta(item.kind);
   const kindClassName = escapeHtml(kindInfo.tone || "neutral");
   const kindNameClass = escapeHtml(String(item.kind || "item").replace(/_/gu, "-"));
   const isMessageLike = TIMELINE_MESSAGE_KINDS.has(item.kind) || item.kind === "completion";
+  const isFileEvent = item.kind === "file_event";
   const imageUrls = Array.isArray(item.imageUrls) ? item.imageUrls.filter(Boolean) : [];
-  const primaryText = isMessageLike
-    ? item.summary || fallbackSummaryForKind(item.kind, entry.status)
-    : item.title || L("common.untitledItem");
-  const secondaryText = isMessageLike ? "" : item.summary || fallbackSummaryForKind(item.kind, entry.status);
+  const fileRefs = normalizeClientFileRefs(item.fileRefs);
+  const primaryText = timelineEntryPrimaryText(item, entry.status, { isMessageLike, isFileEvent });
+  const secondaryText = timelineEntrySecondaryText(item, entry.status, primaryText, { isMessageLike, isFileEvent });
   const threadLabel = timelineEntryThreadLabel(item, isMessageLike);
   const timestampLabel = formatTimelineTimestamp(item.createdAtMs);
-  const statusLabel = isMessageLike ? "" : L("common.actionNeeded");
+  const statusLabel = timelineEntryStatusLabel(item, isMessageLike);
+  const fileEventFileSummary = isFileEvent ? timelineFileEventFileSummary(item) : "";
+  const fileEventDiffStatsHtml = isFileEvent ? renderDiffEntryStatsHtml(item) : "";
 
   return `
     <button
@@ -1544,49 +1866,415 @@ function renderTimelineEntry(entry, { desktop }) {
       <div class="timeline-entry__body">
         <p class="timeline-entry__title">${escapeHtml(primaryText)}</p>
         ${secondaryText ? `<p class="timeline-entry__summary">${escapeHtml(secondaryText)}</p>` : ""}
+        ${
+          isFileEvent && fileEventFileSummary
+            ? `<p class="timeline-entry__file-summary" title="${escapeHtml(
+                normalizeClientFileRefs(item.fileRefs).join("\n")
+              )}">${escapeHtml(fileEventFileSummary)}</p>`
+            : ""
+        }
+        ${isFileEvent && fileEventDiffStatsHtml ? `<div class="timeline-entry__file-diff-stats diff-entry__stats">${fileEventDiffStatsHtml}</div>` : ""}
         ${renderTimelineEntryImageStrip(imageUrls)}
+        ${isFileEvent ? "" : renderTimelineEntryFileStrip(fileRefs)}
       </div>
       ${statusLabel ? `<div class="timeline-entry__footer"><span class="timeline-entry__status">${escapeHtml(statusLabel)}</span></div>` : ""}
     </button>
   `;
 }
 
-function renderTimelineEntryImageStrip(imageUrls) {
-  if (!Array.isArray(imageUrls) || imageUrls.length === 0) {
-    return "";
+function renderDiffEntry(entry) {
+  const item = entry.item;
+  const threadLabel = diffThreadCardTitle(item);
+  const fileChipsHtml = renderDiffEntryFileChips(item);
+  const fallbackSummary = fileChipsHtml ? "" : diffThreadSummaryLabel(item);
+  const statsHtml = renderDiffEntryStatsHtml(item);
+  const latestChangeSummary = diffThreadLatestChangeSummary(item);
+
+  return `
+    <button
+      class="diff-entry diff-entry--thread"
+      data-open-item-kind="${escapeHtml(item.kind)}"
+      data-open-item-token="${escapeHtml(item.token)}"
+      data-source-tab="diff"
+    >
+      <div class="diff-entry__header">
+        <p class="timeline-entry__thread diff-entry__thread">${escapeHtml(threadLabel)}</p>
+        <span class="diff-entry__chevron" aria-hidden="true">${renderIcon("chevron-right")}</span>
+      </div>
+      <div class="diff-entry__body">
+        ${fileChipsHtml ? `<div class="diff-entry__files">${fileChipsHtml}</div>` : ""}
+        ${fallbackSummary ? `<p class="diff-entry__title">${escapeHtml(fallbackSummary)}</p>` : ""}
+        ${statsHtml ? `<div class="diff-entry__stats">${statsHtml}</div>` : ""}
+        ${latestChangeSummary ? `<p class="diff-entry__summary">${escapeHtml(latestChangeSummary)}</p>` : ""}
+      </div>
+    </button>
+  `;
+}
+
+function timelineEntryStatusLabel(item, isMessageLike) {
+  if (isMessageLike || item?.kind === "file_event") {
+    return "";
+  }
+
+  const outcome = normalizeClientText(item?.outcome || "");
+  switch (outcome) {
+    case "pending":
+      return L("common.actionNeeded");
+    case "approved":
+      return L("timeline.status.approved");
+    case "rejected":
+      return L("timeline.status.rejected");
+    case "implemented":
+      return L("timeline.status.implemented");
+    case "dismissed":
+      return L("timeline.status.dismissed");
+    case "submitted":
+      return L("timeline.status.submitted");
+    default:
+      break;
+  }
+
+  if (item?.kind === "approval" || item?.kind === "plan" || item?.kind === "plan_ready" || item?.kind === "choice") {
+    return L("common.actionNeeded");
+  }
+  return "";
+}
+
+function renderTimelineEntryImageStrip(imageUrls) {
+  if (!Array.isArray(imageUrls) || imageUrls.length === 0) {
+    return "";
+  }
+
+  return `
+    <div class="timeline-entry__images" aria-hidden="true">
+      ${imageUrls
+        .slice(0, 4)
+        .map(
+          (imageUrl, index) => `
+            <span class="timeline-entry__image-frame">
+              <img
+                class="timeline-entry__image"
+                src="${escapeHtml(imageUrl)}"
+                alt="${escapeHtml(L("detail.imageAlt", { index: index + 1 }))}"
+                loading="lazy"
+              >
+            </span>
+          `
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+function renderTimelineEntryFileStrip(fileRefs) {
+  if (!Array.isArray(fileRefs) || fileRefs.length === 0) {
+    return "";
+  }
+
+  return `
+    <div class="timeline-entry__files" aria-label="${escapeHtml(L("detail.filesTitle"))}">
+      ${fileRefs
+        .slice(0, 4)
+        .map(
+          (fileRef) => `
+            <span class="file-ref-chip" title="${escapeHtml(fileRef)}">
+              <span class="file-ref-chip__icon" aria-hidden="true">${renderIcon("item")}</span>
+              <span class="file-ref-chip__label">${escapeHtml(fileRefLabel(fileRef))}</span>
+            </span>
+          `
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+function timelineEntryThreadLabel(item, isMessage) {
+  const threadLabel = resolvedThreadLabel(item.threadId || "", item.threadLabel || "");
+  return threadLabel || "";
+}
+
+function timelineEntryPrimaryText(item, status, { isMessageLike = false, isFileEvent = false } = {}) {
+  if (isMessageLike) {
+    return item.summary || fallbackSummaryForKind(item.kind, status);
+  }
+
+  if (isFileEvent) {
+    return fileEventTimelineCountLabel(item) || fallbackSummaryForKind(item.kind, status);
+  }
+
+  return timelineDisplayTitleWithoutThread(item, { allowFallbackSummary: true }) || L("common.untitledItem");
+}
+
+function timelineEntrySecondaryText(item, status, primaryText, { isMessageLike = false, isFileEvent = false } = {}) {
+  if (isMessageLike) {
+    return "";
+  }
+
+  const summaryText = normalizeClientText(item.summary || fallbackSummaryForKind(item.kind, status));
+  if (!summaryText || summaryText === normalizeClientText(primaryText || "")) {
+    return "";
+  }
+
+  if (isFileEvent) {
+    return "";
+  }
+
+  const compactTitle = timelineDisplayTitleWithoutThread(item, { allowFallbackSummary: false });
+  return compactTitle ? summaryText : "";
+}
+
+function timelineDisplayTitleWithoutThread(item, { allowFallbackSummary = false } = {}) {
+  const rawTitle = normalizeClientText(item?.title || "");
+  const threadLabel = resolvedThreadLabel(item?.threadId || "", item?.threadLabel || "");
+  if (!rawTitle) {
+    return allowFallbackSummary ? normalizeClientText(item?.summary || "") : "";
+  }
+
+  let displayTitle = rawTitle;
+  const removablePrefixes = timelineGeneratedTitlePrefixes();
+  const hadGeneratedPrefix = removablePrefixes.some((prefix) => {
+    const normalizedPrefix = normalizeClientText(prefix || "");
+    return normalizedPrefix && rawTitle.startsWith(`${normalizedPrefix} | `);
+  });
+
+  for (const prefix of removablePrefixes) {
+    const normalizedPrefix = normalizeClientText(prefix || "");
+    if (normalizedPrefix && displayTitle.startsWith(`${normalizedPrefix} | `)) {
+      displayTitle = normalizeClientText(displayTitle.slice(normalizedPrefix.length + 3));
+      break;
+    }
+  }
+
+  if (hadGeneratedPrefix) {
+    if (!displayTitle || (threadLabel && displayTitle === threadLabel)) {
+      return allowFallbackSummary ? normalizeClientText(item?.summary || "") : "";
+    }
+  }
+
+  if (threadLabel && displayTitle === threadLabel) {
+    return allowFallbackSummary ? normalizeClientText(item?.summary || "") : "";
+  }
+
+  return displayTitle || (allowFallbackSummary ? normalizeClientText(item?.summary || "") : "");
+}
+
+function timelineGeneratedTitlePrefixes() {
+  return [
+    kindMeta("approval").label,
+    kindMeta("plan").label,
+    kindMeta("choice").label,
+    kindMeta("completion").label,
+    kindMeta("user_message").label,
+    kindMeta("assistant_commentary").label,
+    kindMeta("assistant_final").label,
+    L("common.fileEvent"),
+    "Approval",
+    "Plan",
+    "Choice",
+    "Completed",
+    "User message",
+    "Commentary",
+    "Final answer",
+    "Files",
+    "承認",
+    "プラン",
+    "選択",
+    "完了",
+    "メッセージ",
+    "途中経過",
+    "最終回答",
+    "ファイル",
+  ];
+}
+
+function fileEventDisplayLabel(fileEventType) {
+  switch (normalizeClientText(fileEventType || "")) {
+    case "read":
+      return L("fileEvent.read");
+    case "write":
+      return L("fileEvent.write");
+    case "create":
+      return L("fileEvent.create");
+    default:
+      return "";
+  }
+}
+
+function fileEventTimelineCountLabel(item) {
+  const fileEventType = normalizeClientText(item?.fileEventType || "");
+  const count = normalizeClientFileRefs(item?.fileRefs).length;
+  if (count <= 0) {
+    return fileEventDisplayLabel(fileEventType) || L("common.fileEvent");
+  }
+  switch (fileEventType) {
+    case "read":
+      return L("fileEvent.timeline.read", { count });
+    case "write":
+      return L("fileEvent.timeline.write", { count });
+    case "create":
+      return L("fileEvent.timeline.create", { count });
+    default:
+      return L("common.fileEvent");
+  }
+}
+
+function diffThreadSummaryLabel(item) {
+  const count = Math.max(0, Number(item?.changedFileCount) || 0);
+  if (count <= 0) {
+    return L("common.diff");
+  }
+  return L("diff.threadSummary", { count });
+}
+
+function diffThreadCardTitle(item) {
+  return resolvedThreadLabel(item?.threadId || "", item?.threadLabel || "") || L("timeline.unknownThread");
+}
+
+function diffThreadCardSummary(item) {
+  const parts = [];
+  const filesLabel = diffThreadFilesSummary(item);
+  if (filesLabel) {
+    parts.push(filesLabel);
+  } else {
+    const summaryLabel = diffThreadSummaryLabel(item);
+    if (summaryLabel && summaryLabel !== L("common.diff")) {
+      parts.push(summaryLabel);
+    }
+  }
+  const statsLabel = diffEntryStatsLabel(item);
+  if (statsLabel) {
+    parts.push(statsLabel);
+  }
+  return parts.join(" • ");
+}
+
+function diffThreadFilesSummary(item) {
+  const labels = normalizeClientFileRefs(item?.fileRefs)
+    .map((fileRef) => fileRefLabel(fileRef))
+    .filter(Boolean);
+  if (labels.length === 0) {
+    return "";
+  }
+  const visibleLabels = labels.slice(0, 3);
+  const hiddenCount = labels.length - visibleLabels.length;
+  if (hiddenCount > 0) {
+    visibleLabels.push(`+${hiddenCount}`);
+  }
+  return visibleLabels.join(", ");
+}
+
+function diffThreadLatestChangeSummary(item) {
+  const prefix = L("diff.latestChange");
+  const timestampLabel = formatDiffCardTimestamp(item?.latestChangedAtMs || item?.createdAtMs);
+  if (timestampLabel) {
+    return `${prefix}: ${timestampLabel}`;
+  }
+  if (Number(item?.latestChangedAtMs) > 0 || Number(item?.createdAtMs) > 0) {
+    return L("diff.latestChangeFallback");
+  }
+  return "";
+}
+
+function renderDiffEntryFileChips(item) {
+  const fileRefs = normalizeClientFileRefs(item?.fileRefs);
+  if (fileRefs.length === 0) {
+    return "";
+  }
+  const visibleRefs = fileRefs.slice(0, 4);
+  const hiddenCount = fileRefs.length - visibleRefs.length;
+  const chips = visibleRefs.map(
+    (fileRef) => `
+      <span class="file-ref-chip" title="${escapeHtml(fileRef)}">
+        <span class="file-ref-chip__icon" aria-hidden="true">${renderIcon("item")}</span>
+        <span class="file-ref-chip__label">${escapeHtml(fileRefLabel(fileRef))}</span>
+      </span>
+    `
+  );
+  if (hiddenCount > 0) {
+    chips.push(`
+      <span class="file-ref-chip file-ref-chip--count">
+        <span class="file-ref-chip__label">+${hiddenCount}</span>
+      </span>
+    `);
+  }
+  return chips.join("");
+}
+
+function renderDiffEntryStatsHtml(item) {
+  const addedLines = Math.max(0, Number(item?.diffAddedLines ?? item?.addedLines) || 0);
+  const removedLines = Math.max(0, Number(item?.diffRemovedLines ?? item?.removedLines) || 0);
+  if (!addedLines && !removedLines) {
+    return "";
+  }
+  const parts = [];
+  if (addedLines) {
+    parts.push(`<span class="diff-entry__stat diff-entry__stat--added">+${escapeHtml(String(addedLines))}</span>`);
+  }
+  if (removedLines) {
+    parts.push(`<span class="diff-entry__stat diff-entry__stat--removed">-${escapeHtml(String(removedLines))}</span>`);
+  }
+  return parts.join('<span class="diff-entry__stats-separator">/</span>');
+}
+
+function formatDiffCardTimestamp(value) {
+  const timestamp = Number(value) || 0;
+  if (!timestamp) {
+    return "";
+  }
+  try {
+    return new Intl.DateTimeFormat(state.locale || DEFAULT_LOCALE, {
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(new Date(timestamp));
+  } catch {
+    return new Date(timestamp).toLocaleString();
+  }
+}
+
+function diffThreadFileExpansionKey(token, fileRef) {
+  return `${normalizeClientText(token || "")}:${normalizeClientText(fileRef || "")}`;
+}
+
+function isDiffThreadFileExpanded(token, fileRef) {
+  const key = diffThreadFileExpansionKey(token, fileRef);
+  return state.diffThreadExpandedFiles?.[key] === true;
+}
+
+function toggleDiffThreadFileExpanded(token, fileRef) {
+  const key = diffThreadFileExpansionKey(token, fileRef);
+  if (!key || key === ":") {
+    return;
   }
-
-  return `
-    <div class="timeline-entry__images" aria-hidden="true">
-      ${imageUrls
-        .slice(0, 4)
-        .map(
-          (imageUrl, index) => `
-            <span class="timeline-entry__image-frame">
-              <img
-                class="timeline-entry__image"
-                src="${escapeHtml(imageUrl)}"
-                alt="${escapeHtml(L("detail.imageAlt", { index: index + 1 }))}"
-                loading="lazy"
-              >
-            </span>
-          `
-        )
-        .join("")}
-    </div>
-  `;
+  state.diffThreadExpandedFiles = {
+    ...(state.diffThreadExpandedFiles || {}),
+    [key]: !isDiffThreadFileExpanded(token, fileRef),
+  };
 }
 
-function timelineEntryThreadLabel(item, isMessage) {
-  const threadLabel = resolvedThreadLabel(item.threadId || "", item.threadLabel || "");
-  if (!threadLabel) {
+function timelineFileEventFileSummary(item) {
+  const labels = normalizeClientFileRefs(item?.fileRefs)
+    .map((fileRef) => fileRefLabel(fileRef))
+    .filter(Boolean);
+  if (labels.length === 0) {
     return "";
   }
-  if (isMessage) {
-    return threadLabel;
+  const visibleLabels = labels.slice(0, 3);
+  const hiddenCount = labels.length - visibleLabels.length;
+  if (hiddenCount > 0) {
+    visibleLabels.push(`+${hiddenCount}`);
+  }
+  return visibleLabels.join(", ");
+}
+
+function diffEntryStatsLabel(item) {
+  const addedLines = Math.max(0, Number(item?.diffAddedLines ?? item?.addedLines) || 0);
+  const removedLines = Math.max(0, Number(item?.diffRemovedLines ?? item?.removedLines) || 0);
+  if (!addedLines && !removedLines) {
+    return "";
   }
-  const title = normalizeClientText(item.title || "");
-  return title.includes(threadLabel) ? "" : threadLabel;
+  return `+${addedLines} / -${removedLines}`;
 }
 
 function sanitizeThreadLabelForDisplay(label = "", threadId = "") {
@@ -2296,6 +2984,7 @@ function renderDetailContent(detail, { mobile }) {
 function renderStandardDetailDesktop(detail) {
   const kindInfo = kindMeta(detail.kind);
   const spaciousBodyDetail = TIMELINE_MESSAGE_KINDS.has(detail.kind) || detail.kind === "completion";
+  const plainIntro = renderDetailPlainIntro(detail);
   return `
     <div class="detail-shell">
       ${renderDetailMetaRow(detail, kindInfo)}
@@ -2303,10 +2992,19 @@ function renderStandardDetailDesktop(detail) {
       ${detail.readOnly ? "" : renderDetailLead(detail, kindInfo)}
       ${renderPreviousContextCard(detail)}
       ${renderInterruptedDetailNotice(detail)}
-      <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>
+      ${
+        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>
+          `
+      }
       ${renderDetailImageGallery(detail)}
+      ${renderDetailDiffPanel(detail)}
+      ${renderDetailDiffThreadGroups(detail)}
+      ${renderDetailFileRefs(detail)}
       ${renderCompletionReplyComposer(detail)}
       ${detail.readOnly ? "" : renderActionButtons(detail.actions || [])}
     </div>
@@ -2316,6 +3014,7 @@ function renderStandardDetailDesktop(detail) {
 function renderStandardDetailMobile(detail) {
   const kindInfo = kindMeta(detail.kind);
   const spaciousBodyDetail = TIMELINE_MESSAGE_KINDS.has(detail.kind) || detail.kind === "completion";
+  const plainIntro = renderDetailPlainIntro(detail, { mobile: true });
   return `
     <div class="mobile-detail-screen">
       <div class="detail-shell detail-shell--mobile">
@@ -2323,11 +3022,20 @@ function renderStandardDetailMobile(detail) {
           ${renderDetailMetaRow(detail, kindInfo, { mobile: true })}
           ${renderPreviousContextCard(detail, { mobile: true })}
           ${renderInterruptedDetailNotice(detail, { mobile: true })}
-          <section class="detail-card detail-card--body detail-card--mobile ${spaciousBodyDetail ? "detail-card--message-body" : ""}">
-            ${detail.readOnly ? "" : renderDetailLead(detail, kindInfo, { mobile: true })}
-            <div class="detail-body ${spaciousBodyDetail ? "detail-body--message " : ""}markdown">${detail.messageHtml || ""}</div>
-          </section>
+          ${
+            plainIntro
+              ? plainIntro
+              : `
+                <section class="detail-card detail-card--body detail-card--mobile ${spaciousBodyDetail ? "detail-card--message-body" : ""}">
+                  ${detail.readOnly ? "" : renderDetailLead(detail, kindInfo, { mobile: true })}
+                  <div class="detail-body ${spaciousBodyDetail ? "detail-body--message " : ""}markdown">${detail.messageHtml || ""}</div>
+                </section>
+              `
+          }
           ${renderDetailImageGallery(detail, { mobile: true })}
+          ${renderDetailDiffPanel(detail, { mobile: true })}
+          ${renderDetailDiffThreadGroups(detail, { mobile: true })}
+          ${renderDetailFileRefs(detail, { mobile: true })}
           ${renderCompletionReplyComposer(detail, { mobile: true })}
         </div>
         ${detail.readOnly ? "" : renderActionButtons(detail.actions || [], { mobileSticky: true })}
@@ -2336,6 +3044,20 @@ function renderStandardDetailMobile(detail) {
   `;
 }
 
+function renderDetailPlainIntro(detail, options = {}) {
+  if (!["diff_thread", "file_event"].includes(detail?.kind || "")) {
+    return "";
+  }
+  if (!detail?.messageHtml) {
+    return "";
+  }
+  return `
+    <div class="detail-page-copy ${options.mobile ? "detail-page-copy--mobile" : ""} markdown">
+      ${detail.messageHtml}
+    </div>
+  `;
+}
+
 function renderDetailMetaRow(detail, kindInfo, options = {}) {
   const timestampLabel = detail.createdAtMs ? formatTimelineTimestamp(detail.createdAtMs) : "";
   const progressPill = options.progressLabel
@@ -2435,6 +3157,185 @@ function renderDetailImageGallery(detail, options = {}) {
   `;
 }
 
+function renderDetailFileRefs(detail, options = {}) {
+  const fileRefs = normalizeClientFileRefs(detail?.fileRefs);
+  if (fileRefs.length === 0) {
+    return "";
+  }
+
+  return `
+    <section class="detail-card detail-card--files ${options.mobile ? "detail-card--mobile" : ""}">
+      <div class="detail-files-card__header">
+        <span class="detail-files-card__icon" aria-hidden="true">${renderIcon("item")}</span>
+        <span>${escapeHtml(L("detail.filesTitle"))}</span>
+      </div>
+      <div class="detail-file-grid">
+        ${fileRefs
+          .map(
+            (fileRef) => `
+              <div class="detail-file-chip" title="${escapeHtml(fileRef)}">
+                <span class="detail-file-chip__label">${escapeHtml(fileRefLabel(fileRef))}</span>
+                <span class="detail-file-chip__path">${escapeHtml(fileRef)}</span>
+              </div>
+            `
+          )
+          .join("")}
+      </div>
+    </section>
+  `;
+}
+
+function renderDetailDiffPanel(detail, options = {}) {
+  const detailKind = normalizeClientText(detail?.kind || "");
+  if (!["file_event", "approval"].includes(detailKind)) {
+    return "";
+  }
+
+  const fileEventType = normalizeClientText(detail?.fileEventType || "");
+  if (detailKind === "file_event" && !["write", "create"].includes(fileEventType)) {
+    return "";
+  }
+  if (
+    detailKind === "approval" &&
+    !String(detail?.diffText || "").trim() &&
+    !detail?.diffAvailable &&
+    normalizeClientFileRefs(detail?.fileRefs).length === 0
+  ) {
+    return "";
+  }
+
+  const diffText = String(detail?.diffText || "").replace(/\r\n/g, "\n").trim();
+  const statsHtml = renderDiffEntryStatsHtml(detail);
+
+  return `
+    <section class="detail-card detail-card--diff ${options.mobile ? "detail-card--mobile" : ""}">
+      <div class="detail-diff-card__header">
+        <div class="detail-diff-card__title-wrap">
+          <span class="detail-diff-card__icon" aria-hidden="true">${renderIcon("diff")}</span>
+          <span>${escapeHtml(L("detail.diffTitle"))}</span>
+        </div>
+        ${statsHtml ? `<span class="detail-diff-card__stats diff-entry__stats">${statsHtml}</span>` : ""}
+      </div>
+      ${
+        diffText
+          ? `<div class="detail-diff-viewer">${renderDiffLines(diffText)}</div>`
+          : `<p class="detail-diff-card__notice">${escapeHtml(L("detail.diffUnavailable"))}</p>`
+      }
+    </section>
+  `;
+}
+
+function renderDetailDiffThreadGroups(detail, options = {}) {
+  if (detail?.kind !== "diff_thread") {
+    return "";
+  }
+
+  const files = Array.isArray(detail?.files) ? detail.files.filter(Boolean) : [];
+  if (files.length === 0) {
+    return "";
+  }
+
+  return files
+    .map((fileGroup) => renderDetailDiffThreadFileGroup(detail, fileGroup, options))
+    .join("");
+}
+
+function renderDetailDiffThreadFileGroup(detail, fileGroup, options = {}) {
+  const fileRef = normalizeClientText(fileGroup?.fileRef || "");
+  const fileLabel = normalizeClientText(fileGroup?.fileLabel || "") || fileRefLabel(fileRef) || L("common.unavailable");
+  const statsHtml = renderDiffEntryStatsHtml(fileGroup);
+  const sections = Array.isArray(fileGroup?.sections) ? fileGroup.sections.filter(Boolean) : [];
+  const expanded = isDiffThreadFileExpanded(detail?.token, fileRef);
+
+  return `
+    <section class="detail-card detail-card--diff-thread ${options.mobile ? "detail-card--mobile" : ""}">
+      <button
+        type="button"
+        class="detail-diff-thread__header ${expanded ? "is-open" : ""}"
+        data-diff-thread-file-toggle
+        data-diff-thread-token="${escapeHtml(detail?.token || "")}"
+        data-diff-thread-file="${escapeHtml(fileRef)}"
+      >
+        <div class="detail-diff-thread__title-wrap">
+          <span class="detail-diff-thread__icon" aria-hidden="true">${renderIcon("item")}</span>
+          <div class="detail-diff-thread__title-text">
+            <span class="detail-diff-thread__label">${escapeHtml(fileLabel)}</span>
+            ${fileRef ? `<span class="detail-diff-thread__path">${escapeHtml(fileRef)}</span>` : ""}
+          </div>
+        </div>
+        <div class="detail-diff-thread__header-right">
+          ${statsHtml ? `<span class="detail-diff-thread__stats diff-entry__stats">${statsHtml}</span>` : ""}
+          <span class="detail-diff-thread__chevron" aria-hidden="true">${renderIcon("chevron-right")}</span>
+        </div>
+      </button>
+      ${
+        expanded
+          ? `
+            <div class="detail-diff-thread__sections">
+              ${sections.map((section) => renderDetailDiffThreadSection(section)).join("")}
+            </div>
+          `
+          : ""
+      }
+    </section>
+  `;
+}
+
+function renderDetailDiffThreadSection(section) {
+  const sectionLabel = fileEventDisplayLabel(section?.fileEventType || "") || L("common.diff");
+  const timestampLabel = section?.createdAtMs ? formatTimelineTimestamp(section.createdAtMs) : "";
+  const statsHtml = renderDiffEntryStatsHtml(section);
+  const diffText = String(section?.diffText || "").replace(/\r\n/g, "\n").trim();
+
+  return `
+    <div class="detail-diff-thread__section">
+      <div class="detail-diff-thread__section-meta">
+        <span class="detail-diff-thread__section-label">${escapeHtml(sectionLabel)}</span>
+        <div class="detail-diff-thread__section-right">
+          ${statsHtml ? `<span class="detail-diff-thread__section-stats diff-entry__stats">${statsHtml}</span>` : ""}
+          ${timestampLabel ? `<span class="detail-diff-thread__section-time">${escapeHtml(timestampLabel)}</span>` : ""}
+        </div>
+      </div>
+      ${
+        diffText
+          ? `<div class="detail-diff-viewer">${renderDiffLines(diffText)}</div>`
+          : `<p class="detail-diff-card__notice">${escapeHtml(L("detail.diffUnavailable"))}</p>`
+      }
+    </div>
+  `;
+}
+
+function renderDiffLines(diffText) {
+  return String(diffText || "")
+    .replace(/\r\n/g, "\n")
+    .split("\n")
+    .map((line) => {
+      const className = diffLineClassName(line);
+      return `<div class="detail-diff-line ${className}">${escapeHtml(line || " ")}</div>`;
+    })
+    .join("");
+}
+
+function diffLineClassName(line) {
+  const text = String(line || "");
+  if (text.startsWith("diff --git") || text.startsWith("index ") || text.startsWith("new file mode")) {
+    return "detail-diff-line--meta";
+  }
+  if (text.startsWith("@@")) {
+    return "detail-diff-line--hunk";
+  }
+  if (text.startsWith("+++ ") || text.startsWith("--- ")) {
+    return "detail-diff-line--file";
+  }
+  if (text.startsWith("+")) {
+    return "detail-diff-line--add";
+  }
+  if (text.startsWith("-")) {
+    return "detail-diff-line--remove";
+  }
+  return "detail-diff-line--context";
+}
+
 function renderCompletionReplyComposer(detail, options = {}) {
   if (detail.kind !== "completion" || detail.reply?.enabled !== true) {
     return "";
@@ -2985,14 +3886,19 @@ function renderBottomTabs() {
 }
 
 function renderTabButtons({ buttonClass, withIcons }) {
+  const pendingCount = pendingInboxCount();
   return tabs()
     .map(
-      (tab) => `
-        <button class="${buttonClass} ${state.currentTab === tab.id ? "is-active" : ""}" data-tab="${escapeHtml(tab.id)}">
-          ${withIcons ? `<span class="tab-icon" aria-hidden="true">${renderIcon(tab.icon)}</span>` : ""}
+      (tab) => {
+        const showAttentionDot = withIcons && buttonClass === "bottom-nav__button" && tab.id === "inbox" && pendingCount > 0;
+        const ariaLabel = showAttentionDot ? `${tab.label} (${pendingCount})` : tab.label;
+        return `
+        <button class="${buttonClass} ${state.currentTab === tab.id ? "is-active" : ""}" data-tab="${escapeHtml(tab.id)}" aria-label="${escapeHtml(ariaLabel)}">
+          ${withIcons ? `<span class="tab-icon-wrap"><span class="tab-icon" aria-hidden="true">${renderIcon(tab.icon)}</span>${showAttentionDot ? `<span class="bottom-nav__attention-dot" aria-hidden="true"></span>` : ""}</span>` : ""}
           <span class="tab-label">${escapeHtml(tab.label)}</span>
         </button>
       `
+      }
     )
     .join("");
 }
@@ -3060,6 +3966,27 @@ function bindShellInteractions() {
     select.addEventListener("change", async () => {
       clearThreadFilterInteraction();
       state.timelineThreadFilter = select.value || "all";
+      state.timelineKindFilterOpen = false;
+      alignCurrentItemToVisibleEntries();
+      await renderShell();
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-timeline-kind-filter-toggle]")) {
+    button.addEventListener("click", async (event) => {
+      event.preventDefault();
+      markThreadFilterInteraction();
+      state.timelineKindFilterOpen = !state.timelineKindFilterOpen;
+      await renderShell();
+    });
+  }
+
+  for (const button of document.querySelectorAll("[data-timeline-kind-filter-option]")) {
+    button.addEventListener("click", async (event) => {
+      event.preventDefault();
+      clearThreadFilterInteraction();
+      state.timelineKindFilter = button.dataset.timelineKindFilterOption || "all";
+      state.timelineKindFilterOpen = false;
       alignCurrentItemToVisibleEntries();
       await renderShell();
     });
@@ -3084,12 +4011,28 @@ function bindShellInteractions() {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-inbox-subtab]")) {
+    button.addEventListener("click", async () => {
+      const nextSubtab = button.dataset.inboxSubtab === "completed" ? "completed" : "pending";
+      if (nextSubtab === state.inboxSubtab) {
+        return;
+      }
+      state.inboxSubtab = nextSubtab;
+      if (isDesktopLayout()) {
+        alignCurrentItemToVisibleEntries();
+        syncCurrentItemUrl(state.currentItem);
+      }
+      await renderShell();
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-open-item-kind][data-open-item-token]")) {
     button.addEventListener("click", async () => {
       openItem({
         kind: button.dataset.openItemKind,
         token: button.dataset.openItemToken,
         sourceTab: button.dataset.sourceTab,
+        sourceSubtab: button.dataset.sourceSubtab,
       });
       await renderShell();
     });
@@ -3107,6 +4050,15 @@ function bindShellInteractions() {
     });
   }
 
+  for (const button of document.querySelectorAll("[data-diff-thread-file-toggle]")) {
+    button.addEventListener("click", async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      toggleDiffThreadFileExpanded(button.dataset.diffThreadToken || "", button.dataset.diffThreadFile || "");
+      await renderShell();
+    });
+  }
+
   for (const button of document.querySelectorAll("[data-back-to-list]")) {
     button.addEventListener("click", async () => {
       clearChoiceLocalDraftForItem(state.currentItem);
@@ -3550,6 +4502,7 @@ function closeSettingsSubpage() {
 
 async function switchTab(tab) {
   state.currentTab = tab;
+  state.timelineKindFilterOpen = false;
   state.pushNotice = "";
   state.pushError = "";
   state.settingsSubpage = "";
@@ -3566,10 +4519,14 @@ async function switchTab(tab) {
   await renderShell();
 }
 
-function openItem({ kind, token, sourceTab }) {
+function openItem({ kind, token, sourceTab, sourceSubtab }) {
   const previousItem = state.currentItem ? { ...state.currentItem } : null;
   clearPinnedDetailState();
   const nextTab = sourceTab || tabForItemKind(kind, state.currentTab);
+  if (nextTab === "inbox") {
+    state.inboxSubtab = inboxSubtabForItemKind(kind, sourceSubtab);
+  }
+  state.timelineKindFilterOpen = false;
   if (previousItem && (previousItem.kind !== kind || previousItem.token !== token)) {
     clearChoiceLocalDraftForItem(previousItem);
   }
@@ -3641,14 +4598,14 @@ function isSettingsSubpageOpen() {
 
 function tabMeta(tab) {
   switch (tab) {
-    case "pending":
+    case "inbox":
       return {
-        id: "pending",
-        title: L("tab.pending.title"),
-        label: L("tab.pending.label"),
+        id: "inbox",
+        title: L("tab.inbox.title"),
+        label: L("tab.inbox.label"),
         icon: "pending",
-        eyebrow: L("tab.pending.eyebrow"),
-        description: L("tab.pending.description"),
+        eyebrow: L("tab.inbox.eyebrow"),
+        description: L("tab.inbox.description"),
       };
     case "timeline":
       return {
@@ -3659,14 +4616,14 @@ function tabMeta(tab) {
         eyebrow: L("tab.timeline.eyebrow"),
         description: L("tab.timeline.description"),
       };
-    case "completed":
+    case "diff":
       return {
-        id: "completed",
-        title: L("tab.completed.title"),
-        label: L("tab.completed.label"),
-        icon: "completed",
-        eyebrow: L("tab.completed.eyebrow"),
-        description: L("tab.completed.description"),
+        id: "diff",
+        title: L("tab.code.title"),
+        label: L("tab.code.label"),
+        icon: "file-event",
+        eyebrow: L("tab.code.eyebrow"),
+        description: L("tab.code.description"),
       };
     case "settings":
       return {
@@ -3684,26 +4641,43 @@ function tabMeta(tab) {
 
 function tabs() {
   return [
-    tabMeta("pending"),
+    tabMeta("inbox"),
     tabMeta("timeline"),
-    tabMeta("completed"),
+    tabMeta("diff"),
     tabMeta("settings"),
   ];
 }
 
+function pendingInboxCount() {
+  return Array.isArray(state.inbox?.pending) ? state.inbox.pending.length : 0;
+}
+
 function tabForItemKind(kind, fallback) {
+  if (kind === "diff_thread") {
+    return "diff";
+  }
+  if (kind === "file_event") {
+    return "timeline";
+  }
   if (TIMELINE_MESSAGE_KINDS.has(kind)) {
     return "timeline";
   }
   if (kind === "completion") {
-    return "completed";
+    return "inbox";
   }
   if (fallback === "timeline") {
     return "timeline";
   }
   return kind === "approval" || kind === "plan" || kind === "choice"
-    ? "pending"
-    : fallback || "pending";
+    ? "inbox"
+    : fallback || "inbox";
+}
+
+function inboxSubtabForItemKind(kind, sourceSubtab = "") {
+  if (normalizeClientText(sourceSubtab || "") === "completed") {
+    return "completed";
+  }
+  return kind === "completion" ? "completed" : "pending";
 }
 
 function kindMeta(kind) {
@@ -3723,6 +4697,10 @@ function kindMeta(kind) {
       return { label: L("common.choice"), tone: "choice", icon: "choice" };
     case "completion":
       return { label: L("common.completion"), tone: "completion", icon: "completion-item" };
+    case "diff_thread":
+      return { label: L("common.diff"), tone: "neutral", icon: "diff" };
+    case "file_event":
+      return { label: L("common.fileEvent"), tone: "neutral", icon: "file-event" };
     default:
       return { label: L("common.item"), tone: "neutral", icon: "item" };
   }
@@ -3736,6 +4714,12 @@ function renderTypePillContent(kindInfo) {
 }
 
 function itemIntentText(kind, status = "pending") {
+  if (kind === "diff_thread") {
+    return L("intent.diffThread");
+  }
+  if (kind === "file_event") {
+    return L("intent.fileEvent");
+  }
   if (kind === "user_message") {
     return L("intent.userMessage");
   }
@@ -3763,6 +4747,12 @@ function itemIntentText(kind, status = "pending") {
 }
 
 function detailIntentText(detail) {
+  if (detail.kind === "diff_thread") {
+    return itemIntentText(detail.kind, "diff");
+  }
+  if (detail.kind === "file_event") {
+    return itemIntentText(detail.kind, "timeline");
+  }
   if (TIMELINE_MESSAGE_KINDS.has(detail.kind)) {
     return itemIntentText(detail.kind, "timeline");
   }
@@ -3816,6 +4806,10 @@ function fallbackSummaryForKind(kind, status) {
     return L("summary.completed");
   }
   switch (kind) {
+    case "diff_thread":
+      return L("summary.diffThread");
+    case "file_event":
+      return L("summary.fileEvent");
     case "user_message":
       return L("summary.userMessage");
     case "assistant_commentary":
@@ -4018,6 +5012,10 @@ function renderIcon(name) {
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="m8.7 12.1 2 2.1 4.7-4.9"/></svg>`;
     case "item":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="4.5" width="14" height="15" rx="2.5"/><path d="M8.5 9h7"/><path d="M8.5 12h7"/><path d="M8.5 15h4.5"/></svg>`;
+    case "file-event":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.8h5.9l4.3 4.3v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-12.3a2 2 0 0 1 2-2Z"/><path d="M13.9 3.8v4.3h4.3"/><path d="M9.2 13.1h5.6"/><path d="M9.2 16.2h4"/></svg>`;
+    case "diff":
+      return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 5.5v13"/><path d="M4.8 8.2 7.5 5.5 10.2 8.2"/><path d="M16.5 18.5v-13"/><path d="m13.8 15.8 2.7 2.7 2.7-2.7"/><path d="M11.8 7.5h1.2"/><path d="M11 12h2.8"/><path d="M11.8 16.5h1.2"/></svg>`;
     case "pending":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v5"/><path d="M12 16v5"/><path d="M4.8 6.8l3.5 3.5"/><path d="M15.7 15.7l3.5 3.5"/><path d="M3 12h5"/><path d="M16 12h5"/><path d="M4.8 17.2l3.5-3.5"/><path d="M15.7 8.3l3.5-3.5"/></svg>`;
     case "timeline":
@@ -4044,6 +5042,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="M10.4 13.6 8.3 15.7a3 3 0 0 1-4.2-4.2l2.8-2.8a3 3 0 0 1 4.2 0"/><path d="m13.6 10.4 2.1-2.1a3 3 0 1 1 4.2 4.2l-2.8 2.8a3 3 0 0 1-4.2 0"/><path d="m9.5 14.5 5-5"/></svg>`;
     case "clip":
       return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m9.5 12.5 5.9-5.9a3 3 0 1 1 4.2 4.2l-7.7 7.7a5 5 0 1 1-7.1-7.1l8.1-8.1"/></svg>`;
+    case "filter":
+      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 "back":
@@ -4151,7 +5151,29 @@ function handleServiceWorkerMessage(event) {
   const type = event?.data?.type || "";
   if (type === "pushsubscriptionchange") {
     refreshPushStatus().then(renderCurrentSurface).catch(() => {});
+    return;
+  }
+  if (type === "open-target-url" && event?.data?.url) {
+    applyExternalTargetUrl(event.data.url).catch(() => {});
+  }
+}
+
+function handlePotentialExternalNavigation() {
+  consumePendingNotificationIntent()
+    .then((consumed) => {
+      if (consumed) {
+        return;
+      }
+      return applyExternalTargetUrl(window.location.href, { allowRefresh: false });
+    })
+    .catch(() => {});
+}
+
+function handleDocumentVisibilityChange() {
+  if (document.visibilityState !== "visible") {
+    return;
   }
+  handlePotentialExternalNavigation();
 }
 
 async function apiGet(url) {
@@ -4250,11 +5272,124 @@ function normalizeClientText(value) {
   return String(value ?? "").trim();
 }
 
+function normalizeClientFileRefs(fileRefs) {
+  if (!Array.isArray(fileRefs)) {
+    return [];
+  }
+  const deduped = [];
+  const seen = new Set();
+  for (const fileRef of fileRefs) {
+    const normalized = normalizeClientText(fileRef);
+    if (!normalized || seen.has(normalized)) {
+      continue;
+    }
+    seen.add(normalized);
+    deduped.push(normalized);
+    if (deduped.length >= 8) {
+      break;
+    }
+  }
+  return deduped;
+}
+
+function fileRefLabel(fileRef) {
+  const normalized = normalizeClientText(fileRef);
+  if (!normalized) {
+    return "";
+  }
+  const segments = normalized.split("/").filter(Boolean);
+  return segments[segments.length - 1] || normalized;
+}
+
 function parseItemRef(value) {
   const [kind, token] = String(value || "").split(":");
   return kind && token ? { kind, token } : null;
 }
 
+async function applyExternalTargetUrl(urlString, { allowRefresh = true } = {}) {
+  if (!state.session?.authenticated) {
+    return;
+  }
+
+  let nextUrl;
+  try {
+    nextUrl = new URL(urlString, window.location.origin);
+  } catch {
+    return;
+  }
+
+  const itemRef = parseItemRef(nextUrl.searchParams.get("item"));
+  if (!itemRef) {
+    return;
+  }
+
+  const sameItem =
+    Boolean(state.currentItem) &&
+    isSameItemRef(state.currentItem, itemRef) &&
+    (isDesktopLayout() || state.detailOpen);
+  if (sameItem) {
+    if (allowRefresh) {
+      await refreshAuthenticatedState();
+      ensureCurrentSelection();
+      await renderShell();
+    }
+    return;
+  }
+
+  openItem({
+    kind: itemRef.kind,
+    token: itemRef.token,
+    sourceTab: tabForItemKind(itemRef.kind, state.currentTab),
+  });
+  if (isFastPathItemRef(itemRef)) {
+    state.launchItemIntent = {
+      ...itemRef,
+      status: "pending",
+    };
+  }
+  await renderShell();
+
+  if (!allowRefresh) {
+    return;
+  }
+  await refreshAuthenticatedState();
+  ensureCurrentSelection();
+  await renderShell();
+}
+
+async function consumePendingNotificationIntent() {
+  if (!state.session?.authenticated || typeof caches === "undefined") {
+    return false;
+  }
+  let cache;
+  try {
+    cache = await caches.open(NOTIFICATION_INTENT_CACHE);
+  } catch {
+    return false;
+  }
+
+  const request = new Request(NOTIFICATION_INTENT_PATH);
+  const match = await cache.match(request).catch(() => null);
+  if (!match) {
+    return false;
+  }
+
+  let payload = null;
+  try {
+    payload = await match.json();
+  } catch {
+    payload = null;
+  }
+  await cache.delete(request).catch(() => {});
+
+  const url = normalizeClientText(payload?.url || "");
+  if (!url) {
+    return false;
+  }
+  await applyExternalTargetUrl(url, { allowRefresh: true });
+  return true;
+}
+
 function buildAppUrl(nextParams) {
   const query = nextParams.toString();
   return `/app${query ? `?${query}` : ""}`;