feat(ui): show session changes list in Status tab

packages/ui/src/components/instance/instance-shell2.tsx

@@ -1147,6 +1147,92 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       )
     }
 
+    const renderStatusSessionChanges = () => {
+      const sessionId = activeSessionIdForInstance()
+      if (!sessionId || sessionId === "info") {
+        return (
+          <div class="right-panel-empty right-panel-empty--left">
+            <span class="text-xs">{t("instanceShell.sessionChanges.noSessionSelected")}</span>
+          </div>
+        )
+      }
+
+      const diffs = activeSessionDiffs()
+      if (diffs === undefined) {
+        return (
+          <div class="right-panel-empty right-panel-empty--left">
+            <span class="text-xs">{t("instanceShell.sessionChanges.loading")}</span>
+          </div>
+        )
+      }
+
+      if (!Array.isArray(diffs) || diffs.length === 0) {
+        return (
+          <div class="right-panel-empty right-panel-empty--left">
+            <span class="text-xs">{t("instanceShell.sessionChanges.empty")}</span>
+          </div>
+        )
+      }
+
+      const sorted = [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || "")))
+      const totals = sorted.reduce(
+        (acc, item) => {
+          acc.additions += typeof item.additions === "number" ? item.additions : 0
+          acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
+          return acc
+        },
+        { additions: 0, deletions: 0 },
+      )
+
+      const openChangesTab = (file?: string) => {
+        if (file) {
+          setSelectedFile(file)
+        }
+        setRightPanelTab("files")
+      }
+
+      return (
+        <div class="flex flex-col gap-3 min-h-0">
+          <div class="flex items-center justify-between gap-2 text-[11px] text-secondary">
+            <span>{t("instanceShell.sessionChanges.filesChanged", { count: sorted.length })}</span>
+            <span class="flex items-center gap-2">
+              <span style={{ color: "var(--session-status-idle-fg)" }}>{`+${totals.additions}`}</span>
+              <span style={{ color: "var(--session-status-working-fg)" }}>{`-${totals.deletions}`}</span>
+            </span>
+          </div>
+
+          <div class="rounded-md border border-base bg-surface-secondary p-2 max-h-[40vh] overflow-y-auto">
+            <div class="flex flex-col">
+              <For each={sorted}>
+                {(item) => (
+                  <button
+                    type="button"
+                    class="py-2 border-b border-base last:border-b-0 text-left hover:bg-surface-muted rounded-sm"
+                    onClick={() => openChangesTab(item.file)}
+                    title={t("instanceShell.sessionChanges.actions.show")}
+                  >
+                    <div class="flex items-center justify-between gap-3">
+                      <div
+                        class="text-xs font-mono text-primary min-w-0 flex-1 overflow-hidden whitespace-nowrap"
+                        title={item.file}
+                        style="text-overflow: ellipsis; direction: rtl; text-align: left; unicode-bidi: plaintext;"
+                      >
+                        {item.file}
+                      </div>
+                      <div class="flex items-center gap-2 text-[11px] flex-shrink-0">
+                        <span style={{ color: "var(--session-status-idle-fg)" }}>{`+${item.additions}`}</span>
+                        <span style={{ color: "var(--session-status-working-fg)" }}>{`-${item.deletions}`}</span>
+                      </div>
+                    </div>
+                  </button>
+                )}
+              </For>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
     const renderPlanSectionContent = () => {
       const sessionId = activeSessionIdForInstance()
       if (!sessionId || sessionId === "info") {
@@ -1233,6 +1319,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     }
 
     const statusSections = [
+      {
+        id: "session-changes",
+        labelKey: "instanceShell.rightPanel.sections.sessionChanges",
+        render: renderStatusSessionChanges,
+      },
       {
         id: "plan",
         labelKey: "instanceShell.rightPanel.sections.plan",

packages/ui/src/styles/messaging/message-base.css

@@ -303,6 +303,16 @@
   align-items: stretch;
   justify-content: space-between;
   gap: 0.5rem;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.message-reasoning-header:hover {
+  background-color: var(--surface-hover);
+}
+
+.message-reasoning-header:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--accent-primary);
 }
 
 .message-reasoning-toggle {
@@ -331,12 +341,12 @@
 }
 
 .message-reasoning-toggle:hover {
-  background-color: var(--surface-hover);
+  background-color: transparent;
 }
 
 .message-reasoning-toggle:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--accent-primary);
+  box-shadow: none;
 }
 
 .message-reasoning-label {