diff --git a/src/App.scoped.css b/src/App.scoped.css
new file mode 100644
index 000000000..60bcf090b
--- /dev/null
+++ b/src/App.scoped.css
@@ -0,0 +1,1037 @@
+@reference "tailwindcss";
+
+.sidebar-root {
+  @apply h-full flex flex-col select-none;
+}
+
+.sidebar-root input,
+.sidebar-root textarea {
+  @apply select-text;
+}
+
+.sidebar-scrollable {
+  @apply flex-1 min-h-0 overflow-y-auto py-4 px-2 flex flex-col gap-2;
+}
+
+.content-root {
+  @apply h-full min-h-0 min-w-0 w-full flex flex-col overflow-y-hidden overflow-x-hidden bg-white;
+}
+
+.content-root.is-virtual-keyboard-open {
+  height: var(--visual-viewport-height);
+  max-height: var(--visual-viewport-height);
+  transform: translateY(var(--visual-viewport-offset-top));
+}
+
+.sidebar-thread-controls-host {
+  @apply mt-1 -translate-y-px px-2 pb-1;
+}
+
+.sidebar-search-toggle {
+  @apply h-6.75 w-6.75 rounded-md border border-transparent bg-transparent text-zinc-600 flex items-center justify-center transition hover:border-zinc-200 hover:bg-zinc-50;
+}
+
+.sidebar-search-toggle[aria-pressed='true'] {
+  @apply border-zinc-300 bg-zinc-100 text-zinc-700;
+}
+
+.sidebar-search-toggle-icon {
+  @apply w-4 h-4;
+}
+
+.sidebar-search-bar {
+  @apply flex items-center gap-1.5 mx-2 px-2 py-1 rounded-md border border-zinc-200 bg-white transition-colors focus-within:border-zinc-400;
+}
+
+.sidebar-search-bar-icon {
+  @apply w-3.5 h-3.5 text-zinc-400 shrink-0;
+}
+
+.sidebar-search-input {
+  @apply flex-1 min-w-0 bg-transparent text-sm text-zinc-800 placeholder-zinc-400 outline-none border-none p-0;
+}
+
+.sidebar-search-clear {
+  @apply w-4 h-4 rounded text-zinc-400 flex items-center justify-center transition hover:text-zinc-600;
+}
+
+.sidebar-search-clear-icon {
+  @apply w-3.5 h-3.5;
+}
+
+.sidebar-skills-link {
+  @apply mx-2 flex items-center gap-3 rounded-2xl border border-transparent bg-transparent px-3 py-2.5 text-left text-zinc-700 transition hover:bg-zinc-100 hover:text-zinc-950 cursor-pointer;
+}
+
+.sidebar-skills-link.is-active {
+  @apply border-transparent bg-zinc-100 text-zinc-950;
+}
+
+.sidebar-skills-link-icon {
+  @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-emerald-600 text-white;
+}
+
+.sidebar-automations-link-icon {
+  @apply bg-amber-500;
+}
+
+.sidebar-skills-link-icon :deep(svg) {
+  @apply h-5 w-5;
+}
+
+.sidebar-skills-link-copy {
+  @apply flex min-w-0 flex-col;
+}
+
+.sidebar-skills-link-title {
+  @apply truncate text-sm font-semibold leading-5 tracking-[-0.01em];
+}
+
+.sidebar-skills-link-subtitle {
+  @apply truncate text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500;
+}
+
+.sidebar-thread-controls-header-host {
+  @apply ml-1;
+}
+
+.skills-route-header-icon {
+  @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-emerald-600 text-white shadow-[0_16px_32px_-20px_rgba(5,150,105,0.9)];
+}
+
+.automations-route-header-icon {
+  @apply bg-amber-500 shadow-[0_16px_32px_-20px_rgba(245,158,11,0.9)];
+}
+
+.skills-route-header-icon :deep(svg) {
+  @apply h-4.5 w-4.5;
+}
+
+:global(:root.dark) .sidebar-skills-link-title {
+  @apply text-zinc-50;
+}
+
+:global(:root.dark) .sidebar-skills-link-subtitle {
+  @apply text-zinc-400;
+}
+
+.content-body {
+  @apply flex-1 min-h-0 min-w-0 w-full flex flex-col gap-2 sm:gap-3 pt-1 pb-2 sm:pb-4 overflow-x-hidden;
+}
+
+.content-root.is-virtual-keyboard-open .content-body {
+  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+}
+
+.content-root.is-virtual-keyboard-open .content-grid {
+  gap: 0.5rem;
+}
+
+.content-root.is-virtual-keyboard-open .content-thread {
+  min-height: 0;
+}
+
+.content-root.is-virtual-keyboard-open .composer-with-queue {
+  gap: 0.375rem;
+  padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
+}
+
+.content-root.is-virtual-keyboard-open .content-thread-terminal-panel {
+  min-height: 0;
+}
+
+.content-root.is-virtual-keyboard-open .content-keyboard-spacer {
+  display: none;
+}
+
+
+
+.content-error {
+  @apply m-0 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700;
+}
+
+.content-grid {
+  @apply flex-1 min-h-0 flex flex-col gap-3;
+}
+
+.content-grid-home {
+  @apply overflow-y-auto;
+}
+
+.content-thread {
+  @apply flex-1 min-h-0;
+}
+
+.composer-with-queue {
+  @apply w-full shrink-0 px-2 sm:px-6 flex flex-col gap-2;
+}
+
+.content-thread-terminal-panel {
+  @apply w-full;
+}
+
+.content-header-terminal-command {
+  @apply max-w-48;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-trigger) {
+  @apply h-8 rounded-full border border-zinc-200 bg-white px-3 text-xs text-zinc-700 outline-none transition hover:bg-zinc-50 focus:border-zinc-300;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-prefix-icon) {
+  @apply h-4 w-4 text-zinc-500;
+}
+
+.content-header-terminal-command.is-open :deep(.composer-dropdown-trigger) {
+  @apply border-zinc-300 bg-zinc-100 text-zinc-950;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-menu-wrap) {
+  left: auto;
+  right: 0;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-menu) {
+  width: min(18rem, calc(100vw - 1rem));
+  min-width: min(14rem, calc(100vw - 1rem));
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-option) {
+  @apply block truncate;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-trigger) {
+  @apply rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-50;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-prefix-icon),
+.content-header-branch-dropdown :deep(.composer-dropdown-prefix-icon) {
+  @apply h-4 w-4 text-zinc-600;
+}
+
+.content-header-terminal-command :deep(.composer-dropdown-trigger),
+.content-header-branch-dropdown :deep(.composer-dropdown-trigger) {
+  @apply gap-0.5;
+}
+
+.content-header-branch-dropdown :deep(.composer-dropdown-trigger) {
+  @apply rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-50;
+}
+
+.content-header-branch-dropdown :deep(.composer-dropdown-value) {
+  @apply max-w-40 truncate;
+}
+
+.content-header-branch-dropdown :deep(.composer-dropdown-menu-wrap) {
+  left: auto;
+  right: 0;
+}
+
+.content-header-branch-dropdown.is-review-open :deep(.composer-dropdown-trigger) {
+  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
+}
+
+.content-header-branch-dropdown.is-review-open :deep(.composer-dropdown-chevron) {
+  @apply text-white;
+}
+
+.new-thread-empty {
+  @apply flex-1 min-h-0 flex flex-col items-center justify-center gap-0.5 px-3 sm:px-6;
+}
+
+.new-thread-hero {
+  @apply m-0 text-2xl sm:text-[2.5rem] font-normal leading-[1.05] text-zinc-900;
+}
+
+.new-thread-folder-dropdown {
+  @apply text-2xl sm:text-[2.5rem] text-zinc-500;
+}
+
+.new-thread-folder-dropdown :deep(.composer-dropdown-trigger) {
+  @apply h-auto p-0 text-2xl sm:text-[2.5rem] leading-[1.05];
+}
+
+.new-thread-folder-dropdown :deep(.composer-dropdown-value) {
+  @apply leading-[1.05];
+}
+
+.new-thread-folder-dropdown :deep(.composer-dropdown-chevron) {
+  @apply h-4 w-4 sm:h-5 sm:w-5 mt-0;
+}
+
+.new-thread-folder-selected {
+  @apply mt-2 mb-0 max-w-3xl text-center text-xs text-zinc-500 break-all;
+}
+
+.new-thread-folder-actions {
+  @apply mt-3 flex w-full max-w-3xl flex-wrap items-center justify-center gap-2;
+}
+
+.new-thread-launch-card {
+  @apply mt-4 w-full max-w-3xl rounded-[28px] border border-emerald-200 bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.2),_transparent_42%),linear-gradient(135deg,_#f4fff8,_#ffffff_58%)] px-5 py-5 text-left shadow-[0_18px_50px_-28px_rgba(5,150,105,0.45)];
+}
+
+.new-thread-launch-card-copy {
+  @apply flex flex-col gap-2;
+}
+
+.new-thread-launch-card-topline {
+  @apply flex items-center gap-2;
+}
+
+.new-thread-launch-card-badge {
+  @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-2xl bg-emerald-700 text-white shadow-[0_12px_28px_-18px_rgba(5,150,105,0.9)];
+}
+
+.new-thread-launch-card-badge :deep(svg) {
+  @apply h-4 w-4;
+}
+
+.new-thread-launch-card-eyebrow {
+  @apply m-0 text-[11px] font-semibold uppercase tracking-[0.24em] text-emerald-700;
+}
+
+.new-thread-launch-card-title {
+  @apply m-0 text-xl font-semibold leading-tight text-zinc-950 sm:text-2xl;
+}
+
+.new-thread-launch-card-text {
+  @apply m-0 max-w-2xl text-sm leading-6 text-zinc-700 sm:text-[15px];
+}
+
+.new-thread-launch-card-actions {
+  @apply mt-4 flex flex-wrap items-center gap-2;
+}
+
+.new-thread-launch-card-pills {
+  @apply mt-1 flex flex-wrap gap-2;
+}
+
+.new-thread-launch-card-pill {
+  @apply inline-flex items-center rounded-full border border-emerald-100 bg-white/80 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-emerald-700;
+}
+
+.new-thread-launch-card-button {
+  @apply inline-flex h-10 items-center justify-center rounded-full border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50;
+}
+
+.new-thread-launch-card-button-primary {
+  @apply border-emerald-700 bg-emerald-700 text-white hover:bg-emerald-600;
+}
+
+:global(:root.dark) .new-thread-launch-card {
+  @apply border-emerald-900/80 bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.2),_transparent_38%),linear-gradient(135deg,_rgba(6,78,59,0.32),_rgba(24,24,27,0.96)_58%)] shadow-[0_24px_64px_-34px_rgba(16,185,129,0.35)];
+}
+
+:global(:root.dark) .new-thread-launch-card-eyebrow {
+  @apply text-emerald-300;
+}
+
+:global(:root.dark) .new-thread-launch-card-badge {
+  @apply bg-emerald-500 text-white;
+}
+
+:global(:root.dark) .new-thread-launch-card-title {
+  @apply text-zinc-50;
+}
+
+:global(:root.dark) .new-thread-launch-card-text {
+  @apply text-zinc-300;
+}
+
+:global(:root.dark) .new-thread-launch-card-pill {
+  @apply border-emerald-900 bg-zinc-900/70 text-emerald-300;
+}
+
+:global(:root.dark) .new-thread-launch-card-button {
+  @apply border-zinc-700 bg-zinc-900 text-zinc-100 hover:bg-zinc-800;
+}
+
+:global(:root.dark) .new-thread-launch-card-button-primary {
+  @apply border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-500;
+}
+
+.new-thread-folder-action {
+  @apply inline-flex h-9 items-center justify-center rounded-full border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.new-thread-folder-action-primary {
+  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
+}
+
+.new-thread-open-folder-overlay {
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4;
+}
+
+.new-thread-open-folder {
+  @apply flex w-full max-w-3xl max-h-[90vh] flex-col gap-2 overflow-y-auto rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-xl;
+}
+
+.new-thread-project-modal {
+  @apply flex w-full max-w-xl max-h-[90vh] flex-col gap-3 overflow-y-auto rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-xl;
+}
+
+.new-thread-open-folder-header {
+  @apply flex items-center justify-between gap-3;
+}
+
+.new-thread-open-folder-title {
+  @apply m-0 text-sm font-semibold text-zinc-900;
+}
+
+.new-thread-open-folder-close {
+  @apply border-0 bg-transparent p-0 text-sm text-zinc-500 transition hover:text-zinc-800;
+}
+
+.new-thread-open-folder-label {
+  @apply m-0 text-xs font-medium uppercase tracking-wide text-zinc-500;
+}
+
+.new-thread-open-folder-current {
+  @apply flex items-start gap-2;
+}
+
+.new-thread-open-folder-path {
+  @apply min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 font-mono text-xs text-zinc-700 outline-none transition focus:border-zinc-400;
+}
+
+.new-thread-open-folder-actions {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.new-thread-project-mode-tabs {
+  @apply grid grid-cols-2 rounded-xl border border-zinc-200 bg-zinc-50 p-1;
+}
+
+.new-thread-project-mode-tab {
+  @apply inline-flex h-9 items-center justify-center rounded-lg border-0 bg-transparent px-3 text-sm font-medium text-zinc-600 transition hover:bg-white hover:text-zinc-900 disabled:cursor-default disabled:opacity-60;
+}
+
+.new-thread-project-mode-tab.is-active {
+  @apply bg-white text-zinc-950 shadow-sm;
+}
+
+.new-thread-project-field {
+  @apply flex flex-col gap-1.5;
+}
+
+.new-thread-project-modal-actions {
+  @apply mt-1 flex flex-wrap justify-end gap-2;
+}
+
+.new-thread-open-folder-toggle {
+  @apply inline-flex items-center gap-2 text-sm text-zinc-600;
+}
+
+.new-thread-open-folder-toggle-input {
+  @apply relative h-4 w-4 shrink-0 appearance-none rounded-[4px] border border-zinc-300 bg-white outline-none transition;
+}
+
+.new-thread-open-folder-toggle-input:focus-visible {
+  box-shadow: 0 0 0 3px rgb(228 228 231);
+}
+
+.new-thread-open-folder-toggle-input:checked {
+  border-color: rgb(24 24 27);
+  background-color: rgb(255 255 255);
+}
+
+.new-thread-open-folder-toggle-input::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border-right: 2px solid rgb(24 24 27);
+  border-bottom: 2px solid rgb(24 24 27);
+  transform: rotate(45deg);
+  opacity: 0;
+}
+
+.new-thread-open-folder-toggle-input:checked::after {
+  opacity: 1;
+}
+
+.new-thread-open-folder-filter {
+  @apply w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400;
+}
+
+.new-thread-open-folder-create {
+  @apply flex flex-col gap-2;
+}
+
+.new-thread-open-folder-create-composer {
+  @apply flex items-center gap-2;
+}
+
+.new-thread-open-folder-create-input {
+  @apply w-full min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400;
+}
+
+.new-thread-open-folder-create-submit {
+  @apply shrink-0;
+}
+
+.new-thread-folder-action[aria-pressed='true'] {
+  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
+}
+
+.new-thread-open-folder-status {
+  @apply m-0 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600;
+}
+
+.new-thread-open-folder-error {
+  @apply m-0 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700;
+}
+
+.new-thread-open-folder-error-actions {
+  @apply flex flex-wrap items-start gap-2;
+}
+
+.new-thread-open-folder-list {
+  @apply m-0 flex max-h-72 list-none flex-col gap-1 overflow-y-auto p-0 pr-3;
+  scrollbar-gutter: stable;
+  scrollbar-color: rgb(161 161 170) rgb(244 244 245);
+  scrollbar-width: thin;
+}
+
+.new-thread-open-folder-list::-webkit-scrollbar {
+  width: 10px;
+}
+
+.new-thread-open-folder-list::-webkit-scrollbar-track {
+  background: rgb(244 244 245);
+  border-radius: 9999px;
+}
+
+.new-thread-open-folder-list::-webkit-scrollbar-thumb {
+  background: rgb(161 161 170);
+  border-radius: 9999px;
+  border: 2px solid rgb(244 244 245);
+}
+
+.new-thread-open-folder-list::-webkit-scrollbar-thumb:hover {
+  background: rgb(113 113 122);
+}
+
+.new-thread-open-folder-item {
+  @apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1;
+}
+
+.new-thread-open-folder-item-main {
+  @apply min-w-0 truncate rounded-xl border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-left text-sm font-medium leading-5 text-zinc-900 transition hover:border-zinc-300 hover:bg-zinc-100;
+}
+
+.new-thread-open-folder-item-main:disabled,
+.new-thread-open-folder-item-open:disabled {
+  @apply cursor-default opacity-60;
+}
+
+.new-thread-open-folder-item-name {
+  @apply block truncate;
+}
+
+.new-thread-open-folder-item-open {
+  @apply inline-flex h-7 items-center justify-center rounded-xl border border-zinc-200 bg-white px-2.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50;
+}
+
+.new-thread-runtime-dropdown {
+  @apply mt-3;
+}
+
+.new-thread-branch-select {
+  @apply mt-3 w-full max-w-3xl;
+}
+
+.new-thread-branch-select-label {
+  @apply m-0 mb-1 text-xs font-medium uppercase tracking-wide text-zinc-500;
+}
+
+.new-thread-branch-dropdown :deep(.composer-dropdown-trigger) {
+  @apply h-9 rounded-xl border border-zinc-200 bg-white px-3 text-sm text-zinc-700;
+}
+
+.new-thread-branch-select-help {
+  @apply mt-1 mb-0 text-xs text-zinc-500;
+}
+
+.new-thread-runtime-help {
+  @apply mt-2 mb-0 max-w-3xl text-center text-xs text-zinc-500;
+}
+
+.worktree-init-status {
+  @apply mt-3 flex w-full max-w-xl flex-col gap-1 rounded-xl border px-3 py-2 text-sm;
+}
+
+.worktree-init-status.is-running {
+  @apply border-zinc-300 bg-zinc-50 text-zinc-700;
+}
+
+.worktree-init-status.is-error {
+  @apply border-rose-300 bg-rose-50 text-rose-800;
+}
+
+.worktree-init-status-title {
+  @apply font-medium;
+}
+
+.worktree-init-status-message {
+  @apply break-all;
+}
+
+.sidebar-settings-area {
+  @apply shrink-0 bg-slate-100 pt-2 px-2 pb-2 border-t border-zinc-200;
+}
+
+.sidebar-settings-button {
+  @apply flex items-center gap-2 w-full rounded-lg border-0 bg-transparent px-2 py-2 text-sm text-zinc-600 transition hover:bg-zinc-200 hover:text-zinc-900 cursor-pointer;
+}
+
+.sidebar-settings-button-version {
+  @apply ml-auto min-w-0 truncate text-right text-xs;
+}
+
+.sidebar-settings-icon {
+  @apply w-4.5 h-4.5;
+}
+
+.sidebar-settings-panel {
+  @apply mb-1 max-h-[min(70vh,36rem)] overflow-y-auto rounded-lg border border-zinc-200 bg-white;
+}
+
+.sidebar-settings-row {
+  @apply flex items-center justify-between w-full px-3 py-2.5 text-sm text-zinc-700 border-0 bg-transparent transition hover:bg-zinc-50 cursor-pointer;
+}
+
+.sidebar-settings-row--select {
+  @apply cursor-default items-center gap-2;
+}
+
+.sidebar-settings-language-dropdown {
+  @apply min-w-0 max-w-52;
+}
+
+.sidebar-settings-language-dropdown :deep(.composer-dropdown-trigger) {
+  @apply h-auto rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700;
+}
+
+.sidebar-settings-language-dropdown :deep(.composer-dropdown-value) {
+  @apply max-w-32;
+}
+
+.sidebar-settings-row + .sidebar-settings-row {
+  @apply border-t border-zinc-100;
+}
+
+.sidebar-settings-telegram-panel {
+  @apply border-t border-zinc-100 bg-zinc-50/70 px-3 py-3;
+}
+
+.sidebar-settings-field {
+  @apply flex flex-col gap-1.5;
+}
+
+.sidebar-settings-field + .sidebar-settings-field {
+  @apply mt-3;
+}
+
+.sidebar-settings-field-label {
+  @apply text-xs font-medium text-zinc-700;
+}
+
+.sidebar-settings-input,
+.sidebar-settings-textarea {
+  @apply w-full rounded-md border border-zinc-200 bg-white px-2.5 py-2 text-sm text-zinc-800 outline-none transition focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
+}
+
+.sidebar-settings-textarea {
+  @apply min-h-20 resize-y font-mono text-xs;
+}
+
+.sidebar-settings-field-help {
+  @apply mt-2 text-xs leading-5 text-zinc-500;
+}
+
+.sidebar-settings-telegram-error {
+  @apply mt-2 rounded-md bg-rose-50 px-2.5 py-2 text-xs text-rose-700;
+}
+
+.sidebar-settings-telegram-actions {
+  @apply mt-3 flex items-center justify-end;
+}
+
+.sidebar-settings-telegram-save {
+  @apply rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.sidebar-settings-account-section {
+  @apply border-t border-zinc-100 bg-zinc-50/60 px-3 py-3;
+}
+
+.sidebar-settings-account-header {
+  @apply mb-2 flex items-center justify-between gap-2;
+}
+
+.sidebar-settings-account-header-main {
+  @apply flex items-center gap-2;
+}
+
+.sidebar-settings-account-collapse {
+  @apply inline-flex h-5 w-5 items-center justify-center rounded border border-zinc-200 bg-white text-zinc-600 transition hover:bg-zinc-100;
+}
+
+.sidebar-settings-account-collapse-icon {
+  @apply text-[11px] leading-none;
+}
+
+.sidebar-settings-account-title {
+  @apply text-sm font-medium text-zinc-800;
+}
+
+.sidebar-settings-account-count {
+  @apply rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-600;
+}
+
+.sidebar-settings-account-error {
+  @apply mb-2 rounded-md bg-rose-50 px-2 py-1.5 text-xs text-rose-700;
+}
+
+.sidebar-settings-account-refresh {
+  @apply shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.sidebar-settings-account-login {
+  @apply mb-2 flex items-center gap-2;
+}
+
+.sidebar-settings-account-login-button {
+  @apply shrink-0 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.sidebar-settings-account-login-link {
+  @apply min-w-0 truncate text-xs text-blue-600 hover:text-blue-700 hover:underline;
+}
+
+.sidebar-settings-account-empty {
+  @apply text-xs text-zinc-500;
+}
+
+.codex-login-modal-backdrop {
+  @apply fixed inset-0 z-[100] flex items-center justify-center bg-black/35 px-4;
+}
+
+.codex-login-modal {
+  @apply flex w-full max-w-md flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-4 shadow-2xl;
+}
+
+.codex-login-modal-header {
+  @apply flex items-center justify-between gap-3;
+}
+
+.codex-login-modal-title {
+  @apply text-base font-semibold text-zinc-900;
+}
+
+.codex-login-modal-close {
+  @apply inline-flex h-7 w-7 items-center justify-center rounded-full border border-zinc-200 bg-white text-lg leading-none text-zinc-600 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.codex-login-modal-copy {
+  @apply text-sm leading-5 text-zinc-600;
+}
+
+.codex-login-modal-link {
+  @apply min-w-0 truncate text-sm text-blue-600 hover:text-blue-700 hover:underline;
+}
+
+.codex-login-modal-input {
+  @apply w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400 disabled:cursor-default disabled:opacity-60;
+}
+
+.codex-login-modal-error {
+  @apply rounded-md bg-rose-50 px-3 py-2 text-xs text-rose-700;
+}
+
+.codex-login-modal-actions {
+  @apply flex items-center justify-end gap-2;
+}
+
+.codex-login-modal-cancel,
+.codex-login-modal-submit {
+  @apply rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.codex-login-modal-submit {
+  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
+}
+
+:global(:root.dark) .codex-login-modal {
+  @apply border-zinc-700 bg-zinc-900;
+}
+
+:global(:root.dark) .codex-login-modal-title {
+  @apply text-zinc-100;
+}
+
+:global(:root.dark) .codex-login-modal-close,
+:global(:root.dark) .codex-login-modal-cancel {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200 hover:bg-zinc-700;
+}
+
+:global(:root.dark) .codex-login-modal-copy {
+  @apply text-zinc-300;
+}
+
+:global(:root.dark) .codex-login-modal-link {
+  @apply text-sky-300 hover:text-sky-200;
+}
+
+:global(:root.dark) .codex-login-modal-input {
+  @apply border-zinc-600 bg-zinc-950 text-zinc-100 placeholder:text-zinc-500 focus:border-zinc-400;
+}
+
+:global(:root.dark) .codex-login-modal-error {
+  @apply bg-rose-950/40 text-rose-200;
+}
+
+:global(:root.dark) .codex-login-modal-submit {
+  @apply border-zinc-200 bg-zinc-100 text-zinc-900 hover:bg-white;
+}
+
+.sidebar-settings-account-list {
+  @apply flex flex-col gap-2;
+}
+
+.sidebar-settings-account-item {
+  @apply flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-2.5 py-2;
+}
+
+.sidebar-settings-account-item.is-active {
+  @apply border-emerald-200 bg-emerald-50;
+}
+
+.sidebar-settings-account-item.is-unavailable {
+  @apply border-rose-200 bg-rose-50;
+}
+
+.sidebar-settings-account-main {
+  @apply min-w-0 flex-1;
+}
+
+.sidebar-settings-account-actions {
+  @apply flex w-24 shrink-0 flex-col items-end gap-1.5;
+}
+
+.sidebar-settings-account-email {
+  @apply truncate text-sm text-zinc-800;
+}
+
+.sidebar-settings-account-meta {
+  @apply truncate text-[11px] text-zinc-500;
+}
+
+.sidebar-settings-account-quota {
+  @apply truncate text-[11px] text-zinc-600;
+}
+
+.sidebar-settings-account-id {
+  @apply mt-1 inline-flex max-w-full rounded-full bg-zinc-100 px-2 py-0.5 font-mono text-[11px] text-zinc-700;
+}
+
+.sidebar-settings-account-item.is-active .sidebar-settings-account-id {
+  @apply bg-emerald-100 text-emerald-800;
+}
+
+.sidebar-settings-account-item.is-unavailable .sidebar-settings-account-id {
+  @apply bg-rose-100 text-rose-800;
+}
+
+.sidebar-settings-account-switch {
+  @apply min-w-[4.75rem] shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-center text-xs text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.sidebar-settings-account-remove {
+  @apply invisible shrink-0 rounded-full border border-amber-200 bg-white px-2 py-0.5 text-[10px] leading-4 text-zinc-500 opacity-0 pointer-events-none transition-colors hover:bg-amber-50 disabled:cursor-default disabled:opacity-60;
+}
+
+.sidebar-settings-account-remove.is-visible {
+  @apply visible opacity-100 pointer-events-auto;
+}
+
+.sidebar-settings-account-remove.is-confirming {
+  @apply border-amber-300 bg-amber-50 text-amber-700 font-medium;
+}
+
+.sidebar-settings-label {
+  @apply text-left;
+}
+
+.sidebar-settings-value {
+  @apply text-xs text-zinc-500 bg-zinc-100 rounded px-1.5 py-0.5;
+}
+
+
+.sidebar-settings-toggle {
+  @apply relative w-9 h-5 rounded-full bg-zinc-300 transition-colors shrink-0;
+}
+
+.sidebar-settings-toggle::after {
+  content: '';
+  @apply absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm;
+}
+
+.sidebar-settings-toggle.is-on {
+  @apply bg-zinc-800;
+}
+
+.sidebar-settings-toggle.is-on::after {
+  transform: translateX(16px);
+}
+
+.sidebar-settings-row--input {
+  @apply flex flex-col gap-1 py-1.5;
+}
+
+.sidebar-settings-error {
+  @apply text-xs text-red-600 bg-red-50 rounded px-2 py-1.5 break-words;
+}
+
+.sidebar-settings-key-group {
+  @apply flex items-center gap-1.5 w-full;
+}
+
+.sidebar-settings-key-input {
+  @apply flex-1 min-w-0 text-xs rounded border border-zinc-200 bg-white px-2 py-1 outline-none transition-colors placeholder:text-zinc-400;
+}
+
+.sidebar-settings-key-input:focus {
+  @apply border-zinc-400;
+}
+
+.sidebar-settings-key-save {
+  @apply shrink-0 rounded border border-zinc-200 bg-white px-2.5 py-1 text-xs text-zinc-700 transition-colors hover:bg-zinc-50 disabled:opacity-40 disabled:cursor-default;
+}
+
+.sidebar-settings-key-masked {
+  @apply flex-1 min-w-0 text-xs text-zinc-500 font-mono truncate;
+}
+
+.sidebar-settings-key-clear {
+  @apply shrink-0 w-6 h-6 flex items-center justify-center rounded-full border border-zinc-200 text-xs text-zinc-400 transition-colors hover:text-zinc-600 hover:border-zinc-300 disabled:opacity-40;
+}
+
+.sidebar-settings-provider-select {
+  @apply min-w-0 max-w-40 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 outline-none transition-colors cursor-pointer;
+}
+
+.sidebar-settings-provider-select:focus {
+  @apply border-zinc-400 ring-2 ring-zinc-200;
+}
+
+.sidebar-settings-segmented {
+  @apply inline-flex items-center rounded-md border border-zinc-200 bg-white p-0.5;
+}
+
+.sidebar-settings-segmented-option {
+  @apply rounded px-2 py-1 text-xs text-zinc-600 transition-colors;
+}
+
+.sidebar-settings-segmented-option.is-active {
+  @apply bg-zinc-800 text-white;
+}
+
+.sidebar-settings-provider-info {
+  @apply flex items-center justify-between w-full;
+}
+
+.sidebar-settings-provider-link {
+  @apply text-xs text-blue-600 hover:text-blue-700 underline shrink-0;
+}
+
+:root.dark .sidebar-settings-provider-select {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200;
+}
+
+:root.dark .sidebar-settings-provider-select:focus {
+  @apply border-zinc-500 ring-zinc-700;
+}
+
+:root.dark .sidebar-settings-segmented {
+  @apply border-zinc-600 bg-zinc-800;
+}
+
+:root.dark .sidebar-settings-segmented-option {
+  @apply text-zinc-300;
+}
+
+:root.dark .sidebar-settings-segmented-option.is-active {
+  @apply bg-zinc-100 text-zinc-900;
+}
+
+:root.dark .sidebar-settings-provider-link {
+  @apply text-blue-400 hover:text-blue-300;
+}
+
+:root.dark .sidebar-settings-key-input {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200 placeholder:text-zinc-500;
+}
+
+:root.dark .sidebar-settings-key-input:focus {
+  @apply border-zinc-500;
+}
+
+:root.dark .sidebar-settings-key-save {
+  @apply border-zinc-600 bg-zinc-700 text-zinc-200 hover:bg-zinc-600;
+}
+
+:root.dark .sidebar-settings-key-masked {
+  @apply text-zinc-400;
+}
+
+:root.dark .sidebar-settings-key-clear {
+  @apply border-zinc-600 text-zinc-500 hover:text-zinc-300 hover:border-zinc-500;
+}
+
+.settings-panel-enter-active,
+.settings-panel-leave-active {
+  transition: all 150ms ease;
+}
+
+.settings-panel-enter-from,
+.settings-panel-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.sidebar-settings-context-row {
+  @apply cursor-default;
+}
+
+.sidebar-settings-context-value {
+  @apply text-xs font-semibold text-zinc-700 text-right;
+}
+
+.sidebar-settings-context-value[data-state='ok'] {
+  @apply text-emerald-700;
+}
+
+.sidebar-settings-context-value[data-state='warning'] {
+  @apply text-amber-700;
+}
+
+.sidebar-settings-context-value[data-state='danger'] {
+  @apply text-rose-700;
+}
+
+.sidebar-settings-context-meta {
+  @apply block text-[11px] font-normal text-zinc-500;
+}
+
+.sidebar-settings-rate-limits {
+  @apply border-t border-zinc-200 px-2 pt-2;
+}
+
+.sidebar-settings-build-label {
+  @apply border-t border-zinc-100 px-3 py-2 text-[11px] text-zinc-500;
+}
diff --git a/src/App.template.html b/src/App.template.html
new file mode 100644
index 000000000..62c77c86d
--- /dev/null
+++ b/src/App.template.html
@@ -0,0 +1,1065 @@
+  <DesktopLayout :is-sidebar-collapsed="isSidebarCollapsed" @close-sidebar="setSidebarCollapsed(true)">
+    <template #sidebar>
+      <section class="sidebar-root">
+        <div class="sidebar-scrollable">
+          <SidebarThreadControls
+            v-if="!isSidebarCollapsed"
+            class="sidebar-thread-controls-host"
+            :is-sidebar-collapsed="isSidebarCollapsed"
+            :show-new-thread-button="true"
+            @toggle-sidebar="setSidebarCollapsed(!isSidebarCollapsed)"
+            @start-new-thread="onStartNewThreadFromToolbar"
+          >
+            <button
+              class="sidebar-search-toggle"
+              type="button"
+              :aria-pressed="isSidebarSearchVisible"
+              :aria-label="t('Search threads')"
+              :title="t('Search threads')"
+              @click="toggleSidebarSearch"
+            >
+              <IconTablerSearch class="sidebar-search-toggle-icon" />
+            </button>
+          </SidebarThreadControls>
+
+          <div v-if="!isSidebarCollapsed && isSidebarSearchVisible" class="sidebar-search-bar">
+            <IconTablerSearch class="sidebar-search-bar-icon" />
+            <input
+              ref="sidebarSearchInputRef"
+              v-model="sidebarSearchQuery"
+              class="sidebar-search-input"
+              type="text"
+              :placeholder="t('Filter threads...')"
+              @keydown="onSidebarSearchKeydown"
+            />
+            <button
+              v-if="sidebarSearchQuery.length > 0"
+              class="sidebar-search-clear"
+              type="button"
+              :aria-label="t('Clear search')"
+              @click="clearSidebarSearch"
+            >
+              <IconTablerX class="sidebar-search-clear-icon" />
+            </button>
+          </div>
+
+          <button
+            v-if="!isSidebarCollapsed"
+            class="sidebar-skills-link"
+            :class="{ 'is-active': isSkillsRoute }"
+            type="button"
+            @click="router.push({ name: 'skills' }); isMobile && setSidebarCollapsed(true)"
+          >
+            <span class="sidebar-skills-link-icon" aria-hidden="true">
+              <IconTablerBolt />
+            </span>
+            <span class="sidebar-skills-link-copy">
+              <span class="sidebar-skills-link-title">{{ t('Skills') }}</span>
+              <span class="sidebar-skills-link-subtitle">{{ t('Plugins, apps, MCPs') }}</span>
+            </span>
+          </button>
+
+          <button
+            v-if="!isSidebarCollapsed"
+            class="sidebar-skills-link"
+            :class="{ 'is-active': isAutomationsRoute }"
+            type="button"
+            @click="router.push({ name: 'automations' }); isMobile && setSidebarCollapsed(true)"
+          >
+            <span class="sidebar-skills-link-icon sidebar-automations-link-icon" aria-hidden="true">
+              <IconTablerBolt />
+            </span>
+            <span class="sidebar-skills-link-copy">
+              <span class="sidebar-skills-link-title">{{ t('Automations') }}</span>
+              <span class="sidebar-skills-link-subtitle">{{ t('Scheduled work') }}</span>
+            </span>
+          </button>
+
+          <SidebarThreadTree ref="sidebarThreadTreeRef" :groups="projectGroups" :project-display-name-by-id="projectDisplayNameById"
+            :project-git-repo-by-name="projectGitRepoByName"
+            :project-cwd-by-name="projectCwdByName"
+            v-if="!isSidebarCollapsed"
+            :selected-thread-id="selectedThreadId" :is-loading="isLoadingThreads"
+            :is-thread-list-fully-loaded="isThreadListFullyLoaded"
+            :search-query="sidebarSearchQuery"
+            :search-matched-thread-ids="serverMatchedThreadIds"
+            @select="onSelectThread"
+            @archive="onArchiveThread" @start-new-thread="onStartNewThread" @rename-project="onRenameProject"
+            @browse-thread-files="onBrowseThreadFiles"
+            @browse-project-files="onBrowseProjectFiles"
+            @request-project-git-status="onRequestProjectGitStatus"
+            @create-project-worktree="onCreateProjectWorktree"
+            @rename-thread="onRenameThread"
+            @fork-thread="onForkThread"
+            @remove-project="onRemoveProject" @reorder-project="onReorderProject"
+            @export-thread="onExportThread"
+            @automations-changed="onAutomationsChanged"
+            @start-new-chat="onStartNewThreadFromToolbar" />
+        </div>
+
+        <div
+          v-if="!isSidebarCollapsed"
+          ref="settingsAreaRef"
+          class="sidebar-settings-area"
+          @click="onSettingsAreaClick"
+        >
+          <Transition name="settings-panel">
+            <div
+              v-if="isSettingsOpen"
+              ref="settingsPanelRef"
+              class="sidebar-settings-panel"
+              @click.stop
+            >
+              <div class="sidebar-settings-account-section">
+                <div class="sidebar-settings-account-header">
+                  <div class="sidebar-settings-account-header-main">
+                    <button
+                      class="sidebar-settings-account-collapse"
+                      type="button"
+                      :aria-expanded="!isAccountsSectionCollapsed"
+                      :title="isAccountsSectionCollapsed ? t('Expand accounts') : t('Collapse accounts')"
+                      @click="toggleAccountsSectionCollapsed"
+                    >
+                      <span class="sidebar-settings-account-collapse-icon">{{ isAccountsSectionCollapsed ? '▸' : '▾' }}</span>
+                    </button>
+                    <span class="sidebar-settings-account-title">{{ t('Accounts') }}</span>
+                    <span class="sidebar-settings-account-count">{{ accounts.length }}</span>
+                  </div>
+                  <button
+                    class="sidebar-settings-account-refresh"
+                    type="button"
+                    :disabled="isRefreshingAccounts || isSwitchingAccounts || isStartingCodexLogin || isCompletingCodexLogin"
+                    @click="onRefreshAccounts"
+                  >
+                    {{ isRefreshingAccounts ? t('Reloading…') : t('Reload') }}
+                  </button>
+                </div>
+                <template v-if="!isAccountsSectionCollapsed">
+                  <p v-if="accountActionError" class="sidebar-settings-account-error">{{ accountActionError }}</p>
+                  <div class="sidebar-settings-account-login">
+                    <button
+                      class="sidebar-settings-account-login-button"
+                      type="button"
+                      :disabled="isRefreshingAccounts || isSwitchingAccounts || isStartingCodexLogin || isCompletingCodexLogin"
+                      @click="onStartCodexLogin"
+                    >
+                      {{ isStartingCodexLogin ? t('Starting login…') : t('Login') }}
+                    </button>
+                    <a
+                      v-if="codexLoginUrl"
+                      class="sidebar-settings-account-login-link"
+                      :href="codexLoginUrl"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {{ t('Open login URL') }}
+                    </a>
+                  </div>
+                  <p v-if="accounts.length === 0" class="sidebar-settings-account-empty">
+                    {{ t('Click Login, or run `codex login`, then click reload.') }}
+                  </p>
+                  <div v-else class="sidebar-settings-account-list">
+                  <article
+                    v-for="account in accounts"
+                    :key="account.accountId"
+                    class="sidebar-settings-account-item"
+                    :class="{
+                      'is-active': account.isActive,
+                      'is-unavailable': isAccountUnavailable(account),
+                      'is-confirming-remove': isRemoveConfirmationActive(account),
+                      'is-remove-visible': isRemoveVisible(account),
+                    }"
+                    :title="buildAccountTitle(account)"
+                    @mouseenter="onAccountCardPointerEnter(account.accountId)"
+                    @mouseleave="onAccountCardPointerLeave(account.accountId)"
+                  >
+                    <div class="sidebar-settings-account-main">
+                      <p class="sidebar-settings-account-email">{{ account.email || t('Account') }}</p>
+                      <p class="sidebar-settings-account-meta">
+                        {{ formatAccountMeta(account) }}
+                      </p>
+                      <p class="sidebar-settings-account-quota">
+                        {{ formatAccountQuota(account) }}
+                      </p>
+                      <p class="sidebar-settings-account-id">
+                        Workspace {{ shortAccountId(account.accountId) }}
+                      </p>
+                    </div>
+                    <div class="sidebar-settings-account-actions">
+                      <button
+                        class="sidebar-settings-account-switch"
+                        type="button"
+                        :disabled="isAccountActionDisabled(account) || account.isActive || isAccountUnavailable(account)"
+                        @click="onSwitchAccount(account.accountId)"
+                      >
+                        {{ getAccountSwitchLabel(account) }}
+                      </button>
+                      <button
+                        class="sidebar-settings-account-remove"
+                        :class="{
+                          'is-visible': isRemoveVisible(account),
+                          'is-confirming': isRemoveConfirmationActive(account),
+                        }"
+                        type="button"
+                        :disabled="isAccountActionDisabled(account)"
+                        @click="onRemoveAccount(account.accountId)"
+                      >
+                        {{ getAccountRemoveLabel(account) }}
+                      </button>
+                    </div>
+                  </article>
+                  </div>
+                </template>
+              </div>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.sendWithEnter" @click="toggleSendWithEnter">
+                <span class="sidebar-settings-label">{{ t('Require ⌘ + enter to send') }}</span>
+                <span class="sidebar-settings-toggle" :class="{ 'is-on': !sendWithEnter }" />
+              </button>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.inProgressSendMode" @click="cycleInProgressSendMode">
+                <span class="sidebar-settings-label">{{ t('When busy, send as') }}</span>
+                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? t('Steer') : t('Queue') }}</span>
+              </button>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.appearance" @click="cycleDarkMode">
+                <span class="sidebar-settings-label">{{ t('Appearance') }}</span>
+                <span class="sidebar-settings-value">{{ darkMode === 'system' ? t('System') : darkMode === 'dark' ? t('Dark') : t('Light') }}</span>
+              </button>
+              <div class="sidebar-settings-row sidebar-settings-row--select" :title="t('Choose the interface language for the app.')">
+                <span class="sidebar-settings-label">{{ t('UI language') }}</span>
+                <select
+                  class="sidebar-settings-provider-select"
+                  :value="uiLanguage"
+                  @change="onUiLanguageSelectChange"
+                >
+                  <option v-for="option in uiLanguageOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
+                </select>
+              </div>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.chatWidth" @click="cycleChatWidth">
+                <span class="sidebar-settings-label">{{ t('Chat width') }}</span>
+                <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
+              </button>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
+                <span class="sidebar-settings-label">{{ t('Click to toggle dictation') }}</span>
+                <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
+              </button>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationAutoSend" @click="toggleDictationAutoSend">
+                <span class="sidebar-settings-label">{{ t('Auto send dictation') }}</span>
+                <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationAutoSend }" />
+              </button>
+
+              <div class="sidebar-settings-row sidebar-settings-row--select" :title="t('Choose the API provider for the Codex backend')">
+                <span class="sidebar-settings-label">{{ t('Provider') }}</span>
+                <select
+                  class="sidebar-settings-provider-select"
+                  :value="selectedProvider"
+                  :disabled="freeModeLoading"
+                  @change="onProviderSelectChange"
+                >
+                  <option value="codex">Codex</option>
+                  <option value="openrouter">OpenRouter</option>
+                  <option value="opencode-zen">OpenCode Zen</option>
+                  <option value="custom">Custom endpoint</option>
+                </select>
+              </div>
+              <div v-if="providerError" class="sidebar-settings-row sidebar-settings-error">
+                {{ providerError }}
+              </div>
+              <div v-if="selectedProvider === 'openrouter'" class="sidebar-settings-row sidebar-settings-row--input">
+                <div class="sidebar-settings-provider-info">
+                  <span class="sidebar-settings-label">{{ t('OpenRouter API key') }}</span>
+                  <a
+                    class="sidebar-settings-provider-link"
+                    href="https://openrouter.ai/keys"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >{{ t('Get API key') }}</a>
+                </div>
+                <div class="sidebar-settings-key-group">
+                  <template v-if="freeModeHasCustomKey && !freeModeCustomKey">
+                    <span class="sidebar-settings-key-masked">{{ freeModeCustomKeyMasked }}</span>
+                    <button
+                      class="sidebar-settings-key-clear"
+                      type="button"
+                      :disabled="freeModeCustomKeySaving"
+                      :title="t('Remove custom key, use community keys')"
+                      @click="clearFreeModeCustomKey"
+                    >&#x2715;</button>
+                  </template>
+                  <template v-else>
+                    <input
+                      v-model="freeModeCustomKey"
+                      class="sidebar-settings-key-input"
+                      type="password"
+                      :placeholder="t('sk-or-v1-... (optional, uses free keys if empty)')"
+                      @keydown.enter="saveFreeModeCustomKey"
+                    />
+                    <button
+                      class="sidebar-settings-key-save"
+                      type="button"
+                      :disabled="freeModeCustomKeySaving || !freeModeCustomKey.trim()"
+                      @click="saveFreeModeCustomKey"
+                    >{{ freeModeCustomKeySaving ? '...' : t('Set') }}</button>
+                  </template>
+                </div>
+                <div class="sidebar-settings-row sidebar-settings-row--select" style="margin-top: 4px; padding: 0">
+                  <span class="sidebar-settings-label">{{ t('API format') }}</span>
+                  <div class="sidebar-settings-segmented" role="group" :aria-label="t('OpenRouter API format')">
+                    <button
+                      type="button"
+                      class="sidebar-settings-segmented-option"
+                      :class="{ 'is-active': openRouterWireApi === 'responses' }"
+                      :disabled="freeModeCustomKeySaving || freeModeLoading"
+                      @click="setOpenRouterWireApi('responses')"
+                    >
+                      Responses
+                    </button>
+                    <button
+                      type="button"
+                      class="sidebar-settings-segmented-option"
+                      :class="{ 'is-active': openRouterWireApi === 'chat' }"
+                      :disabled="freeModeCustomKeySaving || freeModeLoading"
+                      @click="setOpenRouterWireApi('chat')"
+                    >
+                      Completions
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div v-if="selectedProvider === 'opencode-zen'" class="sidebar-settings-row sidebar-settings-row--input">
+                <div class="sidebar-settings-provider-info">
+                  <span class="sidebar-settings-label">{{ t('OpenCode Zen API key') }}</span>
+                  <a
+                    class="sidebar-settings-provider-link"
+                    href="https://opencode.ai/auth"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >{{ t('Get API key') }}</a>
+                </div>
+                <div class="sidebar-settings-key-group">
+                  <input
+                    v-model="opencodeZenKey"
+                    class="sidebar-settings-key-input"
+                    type="password"
+                    :placeholder="t('sk-...')"
+                    @keydown.enter="saveOpencodeZen"
+                  />
+                  <button
+                    class="sidebar-settings-key-save"
+                    type="button"
+                    :disabled="freeModeCustomKeySaving || !opencodeZenKey.trim()"
+                    @click="saveOpencodeZen"
+                  >{{ freeModeCustomKeySaving ? '...' : t('Save') }}</button>
+                </div>
+              </div>
+              <div v-if="selectedProvider === 'custom'" class="sidebar-settings-row sidebar-settings-row--input">
+                <span class="sidebar-settings-label">{{ t('Custom endpoint URL') }}</span>
+                <div class="sidebar-settings-key-group">
+                  <input
+                    v-model="customEndpointUrl"
+                    class="sidebar-settings-key-input"
+                    type="url"
+                    :placeholder="t('https://api.example.com/v1')"
+                    @keydown.enter="saveCustomEndpoint"
+                  />
+                </div>
+                <span class="sidebar-settings-label" style="margin-top: 4px">{{ t('API key') }}</span>
+                <div class="sidebar-settings-key-group">
+                  <input
+                    v-model="customEndpointKey"
+                    class="sidebar-settings-key-input"
+                    type="password"
+                    :placeholder="t('Bearer token (optional)')"
+                    @keydown.enter="saveCustomEndpoint"
+                  />
+                  <button
+                    class="sidebar-settings-key-save"
+                    type="button"
+                    :disabled="freeModeCustomKeySaving || !customEndpointUrl.trim()"
+                    @click="saveCustomEndpoint"
+                  >{{ freeModeCustomKeySaving ? '...' : t('Save') }}</button>
+                </div>
+                <div class="sidebar-settings-row sidebar-settings-row--select" style="margin-top: 4px; padding: 0">
+                  <span class="sidebar-settings-label">{{ t('API format') }}</span>
+                  <div class="sidebar-settings-segmented" role="group" :aria-label="t('Custom endpoint API format')">
+                    <button
+                      type="button"
+                      class="sidebar-settings-segmented-option"
+                      :class="{ 'is-active': customEndpointWireApi === 'responses' }"
+                      @click="customEndpointWireApi = 'responses'"
+                    >
+                      Responses
+                    </button>
+                    <button
+                      type="button"
+                      class="sidebar-settings-segmented-option"
+                      :class="{ 'is-active': customEndpointWireApi === 'chat' }"
+                      @click="customEndpointWireApi = 'chat'"
+                    >
+                      Completions
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.dictationLanguage">
+                <span class="sidebar-settings-label">{{ t('Dictation language') }}</span>
+                <ComposerDropdown
+                  class="sidebar-settings-language-dropdown"
+                  :model-value="dictationLanguage"
+                  :options="dictationLanguageOptions"
+                  :placeholder="t('Auto-detect')"
+                  open-direction="up"
+                  :enable-search="true"
+                  :search-placeholder="t('Search language...')"
+                  @update:model-value="onDictationLanguageChange"
+                />
+              </div>
+              <button class="sidebar-settings-row" type="button" aria-live="polite" @click="isTelegramConfigOpen = !isTelegramConfigOpen">
+                <span class="sidebar-settings-label">{{ t('Telegram') }}</span>
+                <span class="sidebar-settings-value">{{ telegramStatusText }}</span>
+              </button>
+              <div v-if="isTelegramConfigOpen" class="sidebar-settings-telegram-panel">
+                <label class="sidebar-settings-field">
+                  <span class="sidebar-settings-field-label">{{ t('Bot token') }}</span>
+                  <input
+                    v-model="telegramBotTokenDraft"
+                    class="sidebar-settings-input"
+                    type="password"
+                    placeholder="123456:ABCDEF"
+                    autocomplete="off"
+                    spellcheck="false"
+                  >
+                </label>
+                <label class="sidebar-settings-field">
+                  <span class="sidebar-settings-field-label">{{ t('Allowed Telegram user IDs') }}</span>
+                  <textarea
+                    v-model="telegramAllowedUserIdsDraft"
+                    class="sidebar-settings-textarea"
+                    rows="3"
+                    placeholder="123456789&#10;987654321"
+                    spellcheck="false"
+                  />
+                </label>
+                <div class="sidebar-settings-field-help">
+                  {{ t('Put one Telegram user ID per line or separate them with commas. Use `*` to allow all Telegram users. Unauthorized users will see their own ID in the rejection message so they can copy it here.') }}
+                </div>
+                <div v-if="telegramConfigError" class="sidebar-settings-telegram-error">
+                  {{ telegramConfigError }}
+                </div>
+                <div class="sidebar-settings-telegram-actions">
+                  <button
+                    class="sidebar-settings-telegram-save"
+                    type="button"
+                    :disabled="isTelegramSaving"
+                    @click="saveTelegramConfig"
+                  >
+                    {{ isTelegramSaving ? t('Saving…') : t('Save Telegram config') }}
+                  </button>
+                </div>
+              </div>
+              <div
+                v-if="showThreadContextBadge"
+                class="sidebar-settings-row sidebar-settings-context-row"
+                :data-state="threadContextBadgeState"
+                :title="threadContextTooltip"
+              >
+                <span class="sidebar-settings-label">{{ t('Context') }}</span>
+                <span class="sidebar-settings-context-value" :data-state="threadContextBadgeState">
+                  {{ threadContextPrimaryText }}
+                  <span class="sidebar-settings-context-meta">{{ threadContextSecondaryText }}</span>
+                </span>
+              </div>
+              <div class="sidebar-settings-rate-limits">
+                <RateLimitStatus :snapshots="accountRateLimitSnapshots" />
+              </div>
+              <div class="sidebar-settings-build-label" :aria-label="t('Worktree name and version')">
+                WT {{ worktreeName }} · v{{ appVersion }}
+              </div>
+            </div>
+          </Transition>
+          <button
+            ref="settingsButtonRef"
+            class="sidebar-settings-button"
+            type="button"
+            @click.stop="isSettingsOpen = !isSettingsOpen"
+          >
+            <IconTablerSettings class="sidebar-settings-icon" />
+            <span>{{ t('Settings') }}</span>
+            <span class="sidebar-settings-button-version">
+              {{ worktreeName }} · v{{ appVersion }}
+            </span>
+          </button>
+        </div>
+      </section>
+    </template>
+
+    <template #content>
+      <section
+        class="content-root"
+        :class="{
+          'is-virtual-keyboard-open': isTerminalKeyboardLayoutActive,
+          'is-terminal-open': isComposerTerminalOpen,
+        }"
+        :style="contentStyle"
+      >
+        <span v-if="isVirtualKeyboardOpen" class="content-keyboard-spacer" aria-hidden="true" />
+        <ContentHeader :title="contentTitle" :accent="isSkillsRoute || isAutomationsRoute">
+          <template #leading>
+            <SidebarThreadControls
+              v-if="isSidebarCollapsed || isMobile"
+              class="sidebar-thread-controls-header-host"
+              :is-sidebar-collapsed="isSidebarCollapsed"
+              :show-new-thread-button="true"
+              @toggle-sidebar="setSidebarCollapsed(!isSidebarCollapsed)"
+              @start-new-thread="onStartNewThreadFromToolbar"
+            />
+            <span v-if="isSkillsRoute" class="skills-route-header-icon" aria-hidden="true">
+              <IconTablerBolt />
+            </span>
+            <span v-else-if="isAutomationsRoute" class="skills-route-header-icon automations-route-header-icon" aria-hidden="true">
+              <IconTablerBolt />
+            </span>
+          </template>
+          <template #actions>
+            <ComposerDropdown
+              v-if="canShowTerminalToggle"
+              class="content-header-terminal-command"
+              :class="{ 'is-open': isComposerTerminalOpen }"
+              :model-value="terminalHeaderDropdownValue"
+              :options="terminalHeaderDropdownOptions"
+              :placeholder="terminalCommandPlaceholder"
+              :selected-prefix-icon="IconTablerTerminal"
+              :icon-only="true"
+              :empty-label="t('No commands')"
+              @update:model-value="onSelectHeaderTerminalCommand"
+            />
+            <HeaderGitBranchDropdown
+              v-if="canShowContentHeaderBranchDropdown"
+              class="content-header-branch-dropdown"
+              :current-branch="currentThreadBranch"
+              :head-sha="currentThreadHeadSha"
+              :head-subject="currentThreadHeadSubject"
+              :head-date="currentThreadHeadDate"
+              :detached="isThreadDetachedHead"
+              :dirty="isThreadWorktreeDirty"
+              :branches="threadBranchOptions"
+              :commits-by-branch="threadBranchCommitsByBranch"
+              :commits-loading-for="threadBranchCommitsLoadingFor"
+              :commits-error="threadBranchCommitsError"
+              :loading="isLoadingThreadBranches"
+              :busy="isSwitchingThreadBranch"
+              :error="threadBranchError"
+              :review-open="isReviewPaneOpen"
+              :show-review="route.name === 'thread' && selectedThreadId.length > 0"
+              @toggle-review="isReviewPaneOpen = !isReviewPaneOpen"
+              @checkout-branch="onCheckoutContentHeaderBranch"
+              @reset-branch-to-commit="onResetContentHeaderBranchToCommit"
+              @load-commits="loadThreadBranchCommits"
+            />
+          </template>
+        </ContentHeader>
+
+        <section class="content-body">
+          <template v-if="isSkillsRoute">
+            <DirectoryHub
+              :cwd="directoryCwd"
+              :thread-id="routeThreadId"
+              :try-in-flight-key="directoryTryInFlightKey"
+              @skills-changed="onSkillsChanged"
+              @try-item="onTryDirectoryItem"
+            />
+          </template>
+          <template v-else-if="isAutomationsRoute">
+            <AutomationsPanel
+              ref="automationsPanelRef"
+              :groups="projectGroups"
+              :project-cwd-by-name="projectCwdByName"
+              :project-display-name-by-id="projectDisplayNameById"
+              :selected-automation-id="routeAutomationId"
+              @select-automation="onSelectAutomationInPanel"
+              @edit-automation="onEditAutomationFromPanel"
+              @create-automation="onCreateAutomationFromPanel"
+            />
+          </template>
+          <template v-else-if="isHomeRoute">
+            <div class="content-grid content-grid-home">
+              <div class="new-thread-empty">
+                <p class="new-thread-hero">{{ t("Let's build") }}</p>
+                <ComposerDropdown class="new-thread-folder-dropdown" :model-value="newThreadCwd"
+                  :options="newThreadFolderOptions" :placeholder="t('Choose folder')"
+                  :enable-search="true"
+                  :search-placeholder="t('Quick search project')"
+                  :disabled="false" @update:model-value="onSelectNewThreadFolder" />
+                <p v-if="newThreadCwd" class="new-thread-folder-selected" :title="newThreadCwd">
+                  {{ t('Selected folder') }}: {{ newThreadCwd }}
+                </p>
+                <div class="new-thread-folder-actions">
+                  <button class="new-thread-folder-action new-thread-folder-action-primary" type="button" @click="onOpenExistingFolder">
+                    {{ t('Select folder') }}
+                  </button>
+                  <button class="new-thread-folder-action" type="button" @click="onOpenProjectSetupModal">
+                    {{ t('Create Project') }}
+                  </button>
+                </div>
+                <section v-if="showFirstLaunchPluginsCard" class="new-thread-launch-card" aria-label="Plugins and Apps announcement">
+                  <div class="new-thread-launch-card-copy">
+                    <div class="new-thread-launch-card-topline">
+                      <span class="new-thread-launch-card-badge" aria-hidden="true">
+                        <IconTablerBolt />
+                      </span>
+                      <p class="new-thread-launch-card-eyebrow">{{ t('New in Codex') }}</p>
+                    </div>
+                    <h2 class="new-thread-launch-card-title">{{ t('Plugins are here') }}</h2>
+                    <p class="new-thread-launch-card-text">
+                      {{ t('Hook Codex up to Gmail, Calendar, GitHub, Slack, Browser Use, and more so it can actually help with real work right away.') }}
+                    </p>
+                    <div class="new-thread-launch-card-pills" aria-label="Example integrations">
+                      <span class="new-thread-launch-card-pill">Gmail</span>
+                      <span class="new-thread-launch-card-pill">Calendar</span>
+                      <span class="new-thread-launch-card-pill">GitHub</span>
+                      <span class="new-thread-launch-card-pill">Slack</span>
+                      <span class="new-thread-launch-card-pill">Browser Use</span>
+                    </div>
+                  </div>
+                  <div class="new-thread-launch-card-actions">
+                    <button class="new-thread-launch-card-button new-thread-launch-card-button-primary" type="button" @click="onOpenPluginsHomeCard">
+                      {{ t('Explore Plugins & Apps') }}
+                    </button>
+                    <button class="new-thread-launch-card-button" type="button" @click="dismissFirstLaunchPluginsCard">
+                      {{ t('Dismiss') }}
+                    </button>
+                  </div>
+                </section>
+                <Teleport to="body">
+                  <div v-if="isExistingFolderPickerOpen" class="new-thread-open-folder-overlay" @click.self="onCloseExistingFolderPanel">
+                    <div class="new-thread-open-folder" role="dialog" aria-modal="true" :aria-label="t('Select folder')" @keydown.esc.prevent="onCloseExistingFolderPanel">
+                      <div class="new-thread-open-folder-header">
+                        <p class="new-thread-open-folder-title">{{ t('Select folder') }}</p>
+                        <button class="new-thread-open-folder-close" type="button" @click="onCloseExistingFolderPanel">
+                          {{ t('Cancel') }}
+                        </button>
+                      </div>
+                      <p class="new-thread-open-folder-label">{{ t('Current folder') }}</p>
+                      <div class="new-thread-open-folder-current">
+                        <input
+                          ref="existingFolderPathInputRef"
+                          v-model="existingFolderPathDraft"
+                          class="new-thread-open-folder-path"
+                          type="text"
+                          :placeholder="t('Current folder')"
+                          :title="existingFolderPathDraft || t('Unavailable')"
+                          :disabled="isExistingFolderLoading || isOpeningExistingFolder"
+                          @blur="onExistingFolderPathBlur"
+                          @keydown.enter.prevent="onSubmitExistingFolderPath"
+                          @keydown.esc.prevent="onCloseExistingFolderPanel"
+                        />
+                        <button
+                          class="new-thread-folder-action new-thread-folder-action-primary"
+                          type="button"
+                          :disabled="!resolvedExistingFolderPath || isExistingFolderLoading || isOpeningExistingFolder"
+                          @click="onConfirmExistingFolder()"
+                        >
+                          {{ isOpeningExistingFolder ? t('Opening…') : t('Open') }}
+                        </button>
+                      </div>
+                      <div class="new-thread-open-folder-actions">
+                        <label class="new-thread-open-folder-toggle">
+                          <input
+                            v-model="showHiddenFolders"
+                            class="new-thread-open-folder-toggle-input"
+                            type="checkbox"
+                            @change="onToggleHiddenFolders"
+                          />
+                          <span>{{ t('Show hidden folders') }}</span>
+                        </label>
+                        <button
+                          class="new-thread-folder-action"
+                          :class="{ 'new-thread-folder-action-primary': isCreateFolderOpen }"
+                          type="button"
+                          :aria-pressed="isCreateFolderOpen"
+                          :disabled="!existingFolderBrowsePath || isExistingFolderLoading || isOpeningExistingFolder || isCreatingFolder || (!!existingFolderError && !isCreateFolderOpen)"
+                          @click="onOpenCreateFolderPanel"
+                        >
+                          {{ t('New folder') }}
+                        </button>
+                      </div>
+                      <div v-if="isCreateFolderOpen" class="new-thread-open-folder-create">
+                        <div class="new-thread-open-folder-create-composer">
+                          <input
+                            ref="createFolderInputRef"
+                            v-model="createFolderDraft"
+                            class="new-thread-open-folder-create-input"
+                            type="text"
+                            :placeholder="t('Folder name')"
+                            @keydown.enter.prevent="onCreateFolder"
+                            @keydown.esc.prevent="onCloseCreateFolderPanel"
+                          />
+                          <button
+                            class="new-thread-folder-action new-thread-folder-action-primary new-thread-open-folder-create-submit"
+                            type="button"
+                            :disabled="!canCreateFolder || isCreatingFolder"
+                            @click="onCreateFolder"
+                          >
+                            {{ createFolderSubmitLabel }}
+                          </button>
+                        </div>
+                        <p v-if="createFolderError" class="new-thread-open-folder-error">{{ createFolderError }}</p>
+                      </div>
+                      <input
+                        ref="existingFolderFilterInputRef"
+                        v-model="existingFolderFilter"
+                        class="new-thread-open-folder-filter"
+                        type="text"
+                        :placeholder="t('Filter folders...')"
+                        @keydown.esc.prevent="onCloseExistingFolderPanel"
+                      />
+                      <div v-if="existingFolderError" class="new-thread-open-folder-error-actions">
+                        <p class="new-thread-open-folder-error">{{ existingFolderError }}</p>
+                        <button
+                          class="new-thread-folder-action"
+                          type="button"
+                          :disabled="isExistingFolderLoading || isOpeningExistingFolder"
+                          @click="onRetryExistingFolderBrowse"
+                        >
+                          {{ t('Retry') }}
+                        </button>
+                      </div>
+                      <p v-if="isExistingFolderLoading" class="new-thread-open-folder-status">{{ t('Loading folders…') }}</p>
+                      <p v-else-if="!existingFolderError && existingFolderFilteredEntries.length === 0" class="new-thread-open-folder-status">
+                        {{ existingFolderFilter.trim() ? t('No folders match this filter.') : t('No subfolders found here.') }}
+                      </p>
+                      <ul v-else-if="existingFolderFilteredEntries.length > 0" class="new-thread-open-folder-list">
+                        <li v-for="entry in existingFolderFilteredEntries" :key="entry.key" class="new-thread-open-folder-item">
+                          <button
+                            class="new-thread-open-folder-item-main"
+                            type="button"
+                            :title="entry.path"
+                            :disabled="isExistingFolderLoading || isOpeningExistingFolder"
+                            @click="onBrowseExistingFolder(entry.path)"
+                          >
+                            <span class="new-thread-open-folder-item-name">{{ entry.name }}</span>
+                          </button>
+                          <button
+                            v-if="entry.kind === 'directory'"
+                            class="new-thread-open-folder-item-open"
+                            type="button"
+                            :disabled="isExistingFolderLoading || isOpeningExistingFolder"
+                            @click="onConfirmExistingFolder(entry.path)"
+                          >
+                            {{ t('Open') }}
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </Teleport>
+                <Teleport to="body">
+                  <div v-if="isProjectSetupModalOpen" class="new-thread-open-folder-overlay" @click.self="onCloseProjectSetupModal">
+                    <div class="new-thread-project-modal" role="dialog" aria-modal="true" :aria-label="t('Create or clone project')" @keydown.esc.prevent="onCloseProjectSetupModal">
+                      <div class="new-thread-open-folder-header">
+                        <p class="new-thread-open-folder-title">{{ t('Create or clone project') }}</p>
+                        <button class="new-thread-open-folder-close" type="button" :disabled="isProjectSetupSubmitting" @click="onCloseProjectSetupModal">
+                          {{ t('Cancel') }}
+                        </button>
+                      </div>
+                      <div class="new-thread-project-mode-tabs" role="tablist" :aria-label="t('Project source')">
+                        <button
+                          class="new-thread-project-mode-tab"
+                          :class="{ 'is-active': projectSetupMode === 'create' }"
+                          type="button"
+                          role="tab"
+                          :aria-selected="projectSetupMode === 'create'"
+                          :disabled="isProjectSetupSubmitting"
+                          @click="projectSetupMode = 'create'"
+                        >
+                          {{ t('New project') }}
+                        </button>
+                        <button
+                          class="new-thread-project-mode-tab"
+                          :class="{ 'is-active': projectSetupMode === 'clone' }"
+                          type="button"
+                          role="tab"
+                          :aria-selected="projectSetupMode === 'clone'"
+                          :disabled="isProjectSetupSubmitting"
+                          @click="projectSetupMode = 'clone'"
+                        >
+                          {{ t('Clone from GitHub') }}
+                        </button>
+                      </div>
+                      <label class="new-thread-project-field">
+                        <span class="new-thread-open-folder-label">{{ t('Destination folder') }}</span>
+                        <input
+                          v-model="projectSetupBaseDir"
+                          class="new-thread-open-folder-path"
+                          type="text"
+                          :disabled="isProjectSetupSubmitting"
+                          :placeholder="t('Destination folder')"
+                        />
+                      </label>
+                      <label v-if="projectSetupMode === 'create'" class="new-thread-project-field">
+                        <span class="new-thread-open-folder-label">{{ t('Project name') }}</span>
+                        <input
+                          ref="projectSetupPrimaryInputRef"
+                          v-model="projectNameDraft"
+                          class="new-thread-open-folder-create-input"
+                          type="text"
+                          :disabled="isProjectSetupSubmitting"
+                          :placeholder="t('Project name')"
+                          @keydown.enter.prevent="onSubmitProjectSetup"
+                        />
+                      </label>
+                      <label v-else class="new-thread-project-field">
+                        <span class="new-thread-open-folder-label">{{ t('GitHub repository URL') }}</span>
+                        <input
+                          ref="projectSetupPrimaryInputRef"
+                          v-model="githubCloneUrlDraft"
+                          class="new-thread-open-folder-create-input"
+                          type="url"
+                          :disabled="isProjectSetupSubmitting"
+                          placeholder="https://github.com/owner/repo"
+                          @keydown.enter.prevent="onSubmitProjectSetup"
+                        />
+                      </label>
+                      <p v-if="projectSetupError" class="new-thread-open-folder-error">{{ projectSetupError }}</p>
+                      <div class="new-thread-project-modal-actions">
+                        <button class="new-thread-folder-action" type="button" :disabled="isProjectSetupSubmitting" @click="onCloseProjectSetupModal">
+                          {{ t('Cancel') }}
+                        </button>
+                        <button
+                          class="new-thread-folder-action new-thread-folder-action-primary"
+                          type="button"
+                          :disabled="!canSubmitProjectSetup || isProjectSetupSubmitting"
+                          @click="onSubmitProjectSetup"
+                        >
+                          {{ projectSetupSubmitLabel }}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </Teleport>
+                <ComposerRuntimeDropdown
+                  v-if="isNewThreadCwdGitRepo"
+                  class="new-thread-runtime-dropdown"
+                  v-model="newThreadRuntime"
+                />
+                <div v-if="newThreadRuntime === 'worktree'" class="new-thread-branch-select">
+                  <p class="new-thread-branch-select-label">{{ t('Base branch') }}</p>
+                  <ComposerDropdown
+                    class="new-thread-branch-dropdown"
+                    :model-value="newWorktreeBaseBranch"
+                    :options="newWorktreeBranchDropdownOptions"
+                    :placeholder="t('Select branch')"
+                    :enable-search="true"
+                    :search-placeholder="t('Search branches...')"
+                    :disabled="isLoadingWorktreeBranches || newWorktreeBranchDropdownOptions.length === 0"
+                    @update:model-value="onSelectNewWorktreeBranch"
+                  />
+                  <p class="new-thread-branch-select-help">
+                    {{
+                      isLoadingWorktreeBranches
+                        ? t('Loading branches…')
+                        : selectedWorktreeBranchLabel
+                          ? t('New worktree branch will start from {branch}.', { branch: selectedWorktreeBranchLabel })
+                          : t('No Git branches found for this folder.')
+                    }}
+                  </p>
+                </div>
+                <p v-if="isNewThreadCwdGitRepo" class="new-thread-runtime-help">
+                  {{ t('Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.') }}
+                </p>
+                <div
+                  v-if="worktreeInitStatus.phase !== 'idle'"
+                  class="worktree-init-status"
+                  :class="{
+                    'is-running': worktreeInitStatus.phase === 'running',
+                    'is-error': worktreeInitStatus.phase === 'error',
+                  }"
+                >
+                  <strong class="worktree-init-status-title">{{ worktreeInitStatus.title }}</strong>
+                  <span class="worktree-init-status-message">{{ worktreeInitStatus.message }}</span>
+                </div>
+              </div>
+
+              <div class="composer-with-queue">
+                <ThreadTerminalPanel
+                  v-if="homeTerminalOpen && composerCwd"
+                  ref="homeTerminalPanelRef"
+                  class="content-thread-terminal-panel"
+                  :thread-id="composerThreadContextId"
+                  :cwd="composerCwd"
+                  @hide="onHideHomeTerminal"
+                  @terminal-focus-change="onTerminalFocusChange"
+                />
+                <ThreadComposer ref="homeThreadComposerRef" :active-thread-id="composerThreadContextId"
+                  :cwd="composerCwd"
+                  :collaboration-modes="availableCollaborationModes"
+                  :selected-collaboration-mode="selectedCollaborationMode"
+                  :models="availableModelIds" :selected-model="composerSelectedModelId"
+                  :selected-reasoning-effort="selectedReasoningEffort"
+                  :selected-speed-mode="selectedSpeedMode"
+                  :is-updating-speed-mode="isUpdatingSpeedMode"
+                  :skills="installedSkills"
+                  :thread-token-usage="selectedThreadTokenUsage"
+                  :codex-quota="codexQuota"
+                  :is-turn-in-progress="false"
+                  :is-stop-pending="false"
+                  :is-interrupting-turn="false" :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
+                  :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
+                  :dictation-language="dictationLanguage"
+                  @submit="onSubmitThreadMessage"
+                  @update:selected-collaboration-mode="onSelectCollaborationMode"
+                  @update:selected-model="onSelectModel"
+                  @update:selected-reasoning-effort="onSelectReasoningEffort"
+                  @update:selected-speed-mode="onSelectSpeedMode" />
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="content-grid">
+              <ReviewPane
+                v-if="isReviewPaneOpen && selectedThreadId && composerCwd"
+                :thread-id="selectedThreadId"
+                :cwd="composerCwd"
+                :is-thread-in-progress="isSelectedThreadInProgress"
+                @close="isReviewPaneOpen = false"
+              />
+
+              <template v-else>
+                <div class="content-thread">
+                  <ThreadConversation ref="threadConversationRef" :messages="filteredMessages" :is-loading="isLoadingMessages"
+                    :active-thread-id="composerThreadContextId" :cwd="composerCwd"
+                    :live-overlay="liveOverlay"
+                    :pending-requests="selectedThreadServerRequests"
+                    :has-more-persisted-above="hasMoreOlderMessages"
+                    :is-loading-persisted-above="isLoadingOlderMessages"
+                    :load-earlier-messages="loadOlderMessages"
+                    @fork-thread="onForkThreadFromMessage"
+                    @rollback="onRollback"
+                    @implement-plan="onImplementPlan"
+                    @respond-server-request="onRespondServerRequest" />
+                </div>
+
+                <div class="composer-with-queue">
+                  <QueuedMessages
+                    :messages="selectedThreadQueuedMessages"
+                    @edit="onEditQueuedMessage"
+                    @steer="steerQueuedMessage"
+                    @delete="removeQueuedMessage"
+                    @reorder="onReorderQueuedMessage"
+                  />
+                  <ThreadTerminalPanel
+                    v-if="selectedThreadTerminalOpen && selectedThreadId && composerCwd"
+                    ref="threadTerminalPanelRef"
+                    class="content-thread-terminal-panel"
+                    :thread-id="selectedThreadId"
+                    :cwd="composerCwd"
+                    @hide="onHideSelectedThreadTerminal"
+                    @terminal-focus-change="onTerminalFocusChange"
+                  />
+                  <ThreadPendingRequestPanel
+                    v-if="selectedThreadPendingRequest"
+                    :request="selectedThreadPendingRequest"
+                    :request-count="selectedThreadServerRequests.length"
+                    :has-queue-above="selectedThreadQueuedMessages.length > 0"
+                    @respond-server-request="onRespondServerRequest"
+                  />
+                  <ThreadComposer
+                    v-else
+                    ref="threadComposerRef"
+                    :active-thread-id="composerThreadContextId"
+                    :cwd="composerCwd"
+                    :collaboration-modes="availableCollaborationModes"
+                    :selected-collaboration-mode="selectedCollaborationMode"
+                    :models="availableModelIds"
+                    :selected-model="composerSelectedModelId"
+                    :selected-reasoning-effort="selectedReasoningEffort"
+                    :selected-speed-mode="selectedSpeedMode"
+                    :is-updating-speed-mode="isUpdatingSpeedMode"
+                    :skills="installedSkills"
+                    :thread-token-usage="selectedThreadTokenUsage"
+                    :codex-quota="codexQuota"
+                    :is-turn-in-progress="isSelectedThreadInProgress"
+                    :is-stop-pending="isSelectedThreadInterruptPending"
+                    :is-interrupting-turn="isInterruptingTurn"
+                    :has-queue-above="selectedThreadQueuedMessages.length > 0"
+                    :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
+                    :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
+                    :dictation-language="dictationLanguage"
+                    @update:selected-collaboration-mode="onSelectCollaborationMode"
+                    @submit="onSubmitThreadMessage" @update:selected-model="onSelectModel"
+                    @update:selected-reasoning-effort="onSelectReasoningEffort"
+                    @update:selected-speed-mode="onSelectSpeedMode"
+                    @interrupt="onInterruptTurn" />
+                </div>
+              </template>
+            </div>
+          </template>
+        </section>
+      </section>
+    </template>
+  </DesktopLayout>
+  <div
+    v-if="isCodexLoginModalOpen"
+    class="codex-login-modal-backdrop"
+    role="presentation"
+    @click="onCancelCodexLoginModal"
+  >
+    <form
+      class="codex-login-modal"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="t('Complete Codex login')"
+      @submit.prevent="onSubmitCodexLoginCallback"
+      @click.stop
+    >
+      <div class="codex-login-modal-header">
+        <h2 class="codex-login-modal-title">{{ t('Complete Codex login') }}</h2>
+        <button
+          class="codex-login-modal-close"
+          type="button"
+          :aria-label="t('Close')"
+          :disabled="isCompletingCodexLogin"
+          @click="onCancelCodexLoginModal"
+        >
+          ×
+        </button>
+      </div>
+      <p class="codex-login-modal-copy">
+        {{ t('Finish login in the browser, then paste the localhost callback URL here.') }}
+      </p>
+      <a
+        v-if="codexLoginUrl"
+        class="codex-login-modal-link"
+        :href="codexLoginUrl"
+        target="_blank"
+        rel="noreferrer"
+      >
+        {{ t('Open login URL') }}
+      </a>
+      <input
+        ref="codexLoginCallbackInputRef"
+        v-model="codexLoginCallbackUrl"
+        class="codex-login-modal-input"
+        type="url"
+        inputmode="url"
+        :placeholder="t('Paste localhost callback URL')"
+        :disabled="isCompletingCodexLogin"
+      >
+      <p v-if="accountActionError" class="codex-login-modal-error">{{ accountActionError }}</p>
+      <div class="codex-login-modal-actions">
+        <button
+          class="codex-login-modal-cancel"
+          type="button"
+          :disabled="isCompletingCodexLogin"
+          @click="onCancelCodexLoginModal"
+        >
+          {{ t('Cancel') }}
+        </button>
+        <button
+          class="codex-login-modal-submit"
+          type="submit"
+          :disabled="isCompletingCodexLogin || codexLoginCallbackUrl.trim().length === 0"
+        >
+          {{ isCompletingCodexLogin ? t('Completing…') : t('Complete') }}
+        </button>
+      </div>
+    </form>
+  </div>
diff --git a/src/App.vue b/src/App.vue
index 77a0b2638..f5063b4fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,1070 +1,4 @@
-<template>
-  <DesktopLayout :is-sidebar-collapsed="isSidebarCollapsed" @close-sidebar="setSidebarCollapsed(true)">
-    <template #sidebar>
-      <section class="sidebar-root">
-        <div class="sidebar-scrollable">
-          <SidebarThreadControls
-            v-if="!isSidebarCollapsed"
-            class="sidebar-thread-controls-host"
-            :is-sidebar-collapsed="isSidebarCollapsed"
-            :show-new-thread-button="true"
-            @toggle-sidebar="setSidebarCollapsed(!isSidebarCollapsed)"
-            @start-new-thread="onStartNewThreadFromToolbar"
-          >
-            <button
-              class="sidebar-search-toggle"
-              type="button"
-              :aria-pressed="isSidebarSearchVisible"
-              :aria-label="t('Search threads')"
-              :title="t('Search threads')"
-              @click="toggleSidebarSearch"
-            >
-              <IconTablerSearch class="sidebar-search-toggle-icon" />
-            </button>
-          </SidebarThreadControls>
-
-          <div v-if="!isSidebarCollapsed && isSidebarSearchVisible" class="sidebar-search-bar">
-            <IconTablerSearch class="sidebar-search-bar-icon" />
-            <input
-              ref="sidebarSearchInputRef"
-              v-model="sidebarSearchQuery"
-              class="sidebar-search-input"
-              type="text"
-              :placeholder="t('Filter threads...')"
-              @keydown="onSidebarSearchKeydown"
-            />
-            <button
-              v-if="sidebarSearchQuery.length > 0"
-              class="sidebar-search-clear"
-              type="button"
-              :aria-label="t('Clear search')"
-              @click="clearSidebarSearch"
-            >
-              <IconTablerX class="sidebar-search-clear-icon" />
-            </button>
-          </div>
-
-          <button
-            v-if="!isSidebarCollapsed"
-            class="sidebar-skills-link"
-            :class="{ 'is-active': isSkillsRoute }"
-            type="button"
-            @click="router.push({ name: 'skills' }); isMobile && setSidebarCollapsed(true)"
-          >
-            <span class="sidebar-skills-link-icon" aria-hidden="true">
-              <IconTablerBolt />
-            </span>
-            <span class="sidebar-skills-link-copy">
-              <span class="sidebar-skills-link-title">{{ t('Skills') }}</span>
-              <span class="sidebar-skills-link-subtitle">{{ t('Plugins, apps, MCPs') }}</span>
-            </span>
-          </button>
-
-          <button
-            v-if="!isSidebarCollapsed"
-            class="sidebar-skills-link"
-            :class="{ 'is-active': isAutomationsRoute }"
-            type="button"
-            @click="router.push({ name: 'automations' }); isMobile && setSidebarCollapsed(true)"
-          >
-            <span class="sidebar-skills-link-icon sidebar-automations-link-icon" aria-hidden="true">
-              <IconTablerBolt />
-            </span>
-            <span class="sidebar-skills-link-copy">
-              <span class="sidebar-skills-link-title">{{ t('Automations') }}</span>
-              <span class="sidebar-skills-link-subtitle">{{ t('Scheduled work') }}</span>
-            </span>
-          </button>
-
-          <SidebarThreadTree ref="sidebarThreadTreeRef" :groups="projectGroups" :project-display-name-by-id="projectDisplayNameById"
-            :project-git-repo-by-name="projectGitRepoByName"
-            :project-cwd-by-name="projectCwdByName"
-            v-if="!isSidebarCollapsed"
-            :selected-thread-id="selectedThreadId" :is-loading="isLoadingThreads"
-            :is-thread-list-fully-loaded="isThreadListFullyLoaded"
-            :search-query="sidebarSearchQuery"
-            :search-matched-thread-ids="serverMatchedThreadIds"
-            @select="onSelectThread"
-            @archive="onArchiveThread" @start-new-thread="onStartNewThread" @rename-project="onRenameProject"
-            @browse-thread-files="onBrowseThreadFiles"
-            @browse-project-files="onBrowseProjectFiles"
-            @request-project-git-status="onRequestProjectGitStatus"
-            @create-project-worktree="onCreateProjectWorktree"
-            @rename-thread="onRenameThread"
-            @fork-thread="onForkThread"
-            @remove-project="onRemoveProject" @reorder-project="onReorderProject"
-            @export-thread="onExportThread"
-            @automations-changed="onAutomationsChanged"
-            @start-new-chat="onStartNewThreadFromToolbar" />
-        </div>
-
-        <div
-          v-if="!isSidebarCollapsed"
-          ref="settingsAreaRef"
-          class="sidebar-settings-area"
-          @click="onSettingsAreaClick"
-        >
-          <Transition name="settings-panel">
-            <div
-              v-if="isSettingsOpen"
-              ref="settingsPanelRef"
-              class="sidebar-settings-panel"
-              @click.stop
-            >
-              <div class="sidebar-settings-account-section">
-                <div class="sidebar-settings-account-header">
-                  <div class="sidebar-settings-account-header-main">
-                    <button
-                      class="sidebar-settings-account-collapse"
-                      type="button"
-                      :aria-expanded="!isAccountsSectionCollapsed"
-                      :title="isAccountsSectionCollapsed ? t('Expand accounts') : t('Collapse accounts')"
-                      @click="toggleAccountsSectionCollapsed"
-                    >
-                      <span class="sidebar-settings-account-collapse-icon">{{ isAccountsSectionCollapsed ? '▸' : '▾' }}</span>
-                    </button>
-                    <span class="sidebar-settings-account-title">{{ t('Accounts') }}</span>
-                    <span class="sidebar-settings-account-count">{{ accounts.length }}</span>
-                  </div>
-                  <button
-                    class="sidebar-settings-account-refresh"
-                    type="button"
-                    :disabled="isRefreshingAccounts || isSwitchingAccounts || isStartingCodexLogin || isCompletingCodexLogin"
-                    @click="onRefreshAccounts"
-                  >
-                    {{ isRefreshingAccounts ? t('Reloading…') : t('Reload') }}
-                  </button>
-                </div>
-                <template v-if="!isAccountsSectionCollapsed">
-                  <p v-if="accountActionError" class="sidebar-settings-account-error">{{ accountActionError }}</p>
-                  <div class="sidebar-settings-account-login">
-                    <button
-                      class="sidebar-settings-account-login-button"
-                      type="button"
-                      :disabled="isRefreshingAccounts || isSwitchingAccounts || isStartingCodexLogin || isCompletingCodexLogin"
-                      @click="onStartCodexLogin"
-                    >
-                      {{ isStartingCodexLogin ? t('Starting login…') : t('Login') }}
-                    </button>
-                    <a
-                      v-if="codexLoginUrl"
-                      class="sidebar-settings-account-login-link"
-                      :href="codexLoginUrl"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {{ t('Open login URL') }}
-                    </a>
-                  </div>
-                  <p v-if="accounts.length === 0" class="sidebar-settings-account-empty">
-                    {{ t('Click Login, or run `codex login`, then click reload.') }}
-                  </p>
-                  <div v-else class="sidebar-settings-account-list">
-                  <article
-                    v-for="account in accounts"
-                    :key="account.accountId"
-                    class="sidebar-settings-account-item"
-                    :class="{
-                      'is-active': account.isActive,
-                      'is-unavailable': isAccountUnavailable(account),
-                      'is-confirming-remove': isRemoveConfirmationActive(account),
-                      'is-remove-visible': isRemoveVisible(account),
-                    }"
-                    :title="buildAccountTitle(account)"
-                    @mouseenter="onAccountCardPointerEnter(account.accountId)"
-                    @mouseleave="onAccountCardPointerLeave(account.accountId)"
-                  >
-                    <div class="sidebar-settings-account-main">
-                      <p class="sidebar-settings-account-email">{{ account.email || t('Account') }}</p>
-                      <p class="sidebar-settings-account-meta">
-                        {{ formatAccountMeta(account) }}
-                      </p>
-                      <p class="sidebar-settings-account-quota">
-                        {{ formatAccountQuota(account) }}
-                      </p>
-                      <p class="sidebar-settings-account-id">
-                        Workspace {{ shortAccountId(account.accountId) }}
-                      </p>
-                    </div>
-                    <div class="sidebar-settings-account-actions">
-                      <button
-                        class="sidebar-settings-account-switch"
-                        type="button"
-                        :disabled="isAccountActionDisabled(account) || account.isActive || isAccountUnavailable(account)"
-                        @click="onSwitchAccount(account.accountId)"
-                      >
-                        {{ getAccountSwitchLabel(account) }}
-                      </button>
-                      <button
-                        class="sidebar-settings-account-remove"
-                        :class="{
-                          'is-visible': isRemoveVisible(account),
-                          'is-confirming': isRemoveConfirmationActive(account),
-                        }"
-                        type="button"
-                        :disabled="isAccountActionDisabled(account)"
-                        @click="onRemoveAccount(account.accountId)"
-                      >
-                        {{ getAccountRemoveLabel(account) }}
-                      </button>
-                    </div>
-                  </article>
-                  </div>
-                </template>
-              </div>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.sendWithEnter" @click="toggleSendWithEnter">
-                <span class="sidebar-settings-label">{{ t('Require ⌘ + enter to send') }}</span>
-                <span class="sidebar-settings-toggle" :class="{ 'is-on': !sendWithEnter }" />
-              </button>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.inProgressSendMode" @click="cycleInProgressSendMode">
-                <span class="sidebar-settings-label">{{ t('When busy, send as') }}</span>
-                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? t('Steer') : t('Queue') }}</span>
-              </button>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.appearance" @click="cycleDarkMode">
-                <span class="sidebar-settings-label">{{ t('Appearance') }}</span>
-                <span class="sidebar-settings-value">{{ darkMode === 'system' ? t('System') : darkMode === 'dark' ? t('Dark') : t('Light') }}</span>
-              </button>
-              <div class="sidebar-settings-row sidebar-settings-row--select" :title="t('Choose the interface language for the app.')">
-                <span class="sidebar-settings-label">{{ t('UI language') }}</span>
-                <select
-                  class="sidebar-settings-provider-select"
-                  :value="uiLanguage"
-                  @change="setUiLanguage(($event.target as HTMLSelectElement).value as 'en' | 'zh-CN')"
-                >
-                  <option v-for="option in uiLanguageOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
-                </select>
-              </div>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.chatWidth" @click="cycleChatWidth">
-                <span class="sidebar-settings-label">{{ t('Chat width') }}</span>
-                <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
-              </button>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
-                <span class="sidebar-settings-label">{{ t('Click to toggle dictation') }}</span>
-                <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
-              </button>
-              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationAutoSend" @click="toggleDictationAutoSend">
-                <span class="sidebar-settings-label">{{ t('Auto send dictation') }}</span>
-                <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationAutoSend }" />
-              </button>
-
-              <div class="sidebar-settings-row sidebar-settings-row--select" :title="t('Choose the API provider for the Codex backend')">
-                <span class="sidebar-settings-label">{{ t('Provider') }}</span>
-                <select
-                  class="sidebar-settings-provider-select"
-                  :value="selectedProvider"
-                  :disabled="freeModeLoading"
-                  @change="onProviderChange(($event.target as HTMLSelectElement).value)"
-                >
-                  <option value="codex">Codex</option>
-                  <option value="openrouter">OpenRouter</option>
-                  <option value="opencode-zen">OpenCode Zen</option>
-                  <option value="custom">Custom endpoint</option>
-                </select>
-              </div>
-              <div v-if="providerError" class="sidebar-settings-row sidebar-settings-error">
-                {{ providerError }}
-              </div>
-              <div v-if="selectedProvider === 'openrouter'" class="sidebar-settings-row sidebar-settings-row--input">
-                <div class="sidebar-settings-provider-info">
-                  <span class="sidebar-settings-label">{{ t('OpenRouter API key') }}</span>
-                  <a
-                    class="sidebar-settings-provider-link"
-                    href="https://openrouter.ai/keys"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >{{ t('Get API key') }}</a>
-                </div>
-                <div class="sidebar-settings-key-group">
-                  <template v-if="freeModeHasCustomKey && !freeModeCustomKey">
-                    <span class="sidebar-settings-key-masked">{{ freeModeCustomKeyMasked }}</span>
-                    <button
-                      class="sidebar-settings-key-clear"
-                      type="button"
-                      :disabled="freeModeCustomKeySaving"
-                      :title="t('Remove custom key, use community keys')"
-                      @click="clearFreeModeCustomKey"
-                    >&#x2715;</button>
-                  </template>
-                  <template v-else>
-                    <input
-                      v-model="freeModeCustomKey"
-                      class="sidebar-settings-key-input"
-                      type="password"
-                      :placeholder="t('sk-or-v1-... (optional, uses free keys if empty)')"
-                      @keydown.enter="saveFreeModeCustomKey"
-                    />
-                    <button
-                      class="sidebar-settings-key-save"
-                      type="button"
-                      :disabled="freeModeCustomKeySaving || !freeModeCustomKey.trim()"
-                      @click="saveFreeModeCustomKey"
-                    >{{ freeModeCustomKeySaving ? '...' : t('Set') }}</button>
-                  </template>
-                </div>
-                <div class="sidebar-settings-row sidebar-settings-row--select" style="margin-top: 4px; padding: 0">
-                  <span class="sidebar-settings-label">{{ t('API format') }}</span>
-                  <div class="sidebar-settings-segmented" role="group" :aria-label="t('OpenRouter API format')">
-                    <button
-                      type="button"
-                      class="sidebar-settings-segmented-option"
-                      :class="{ 'is-active': openRouterWireApi === 'responses' }"
-                      :disabled="freeModeCustomKeySaving || freeModeLoading"
-                      @click="setOpenRouterWireApi('responses')"
-                    >
-                      Responses
-                    </button>
-                    <button
-                      type="button"
-                      class="sidebar-settings-segmented-option"
-                      :class="{ 'is-active': openRouterWireApi === 'chat' }"
-                      :disabled="freeModeCustomKeySaving || freeModeLoading"
-                      @click="setOpenRouterWireApi('chat')"
-                    >
-                      Completions
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div v-if="selectedProvider === 'opencode-zen'" class="sidebar-settings-row sidebar-settings-row--input">
-                <div class="sidebar-settings-provider-info">
-                  <span class="sidebar-settings-label">{{ t('OpenCode Zen API key') }}</span>
-                  <a
-                    class="sidebar-settings-provider-link"
-                    href="https://opencode.ai/auth"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >{{ t('Get API key') }}</a>
-                </div>
-                <div class="sidebar-settings-key-group">
-                  <input
-                    v-model="opencodeZenKey"
-                    class="sidebar-settings-key-input"
-                    type="password"
-                    :placeholder="t('sk-...')"
-                    @keydown.enter="saveOpencodeZen"
-                  />
-                  <button
-                    class="sidebar-settings-key-save"
-                    type="button"
-                    :disabled="freeModeCustomKeySaving || !opencodeZenKey.trim()"
-                    @click="saveOpencodeZen"
-                  >{{ freeModeCustomKeySaving ? '...' : t('Save') }}</button>
-                </div>
-              </div>
-              <div v-if="selectedProvider === 'custom'" class="sidebar-settings-row sidebar-settings-row--input">
-                <span class="sidebar-settings-label">{{ t('Custom endpoint URL') }}</span>
-                <div class="sidebar-settings-key-group">
-                  <input
-                    v-model="customEndpointUrl"
-                    class="sidebar-settings-key-input"
-                    type="url"
-                    :placeholder="t('https://api.example.com/v1')"
-                    @keydown.enter="saveCustomEndpoint"
-                  />
-                </div>
-                <span class="sidebar-settings-label" style="margin-top: 4px">{{ t('API key') }}</span>
-                <div class="sidebar-settings-key-group">
-                  <input
-                    v-model="customEndpointKey"
-                    class="sidebar-settings-key-input"
-                    type="password"
-                    :placeholder="t('Bearer token (optional)')"
-                    @keydown.enter="saveCustomEndpoint"
-                  />
-                  <button
-                    class="sidebar-settings-key-save"
-                    type="button"
-                    :disabled="freeModeCustomKeySaving || !customEndpointUrl.trim()"
-                    @click="saveCustomEndpoint"
-                  >{{ freeModeCustomKeySaving ? '...' : t('Save') }}</button>
-                </div>
-                <div class="sidebar-settings-row sidebar-settings-row--select" style="margin-top: 4px; padding: 0">
-                  <span class="sidebar-settings-label">{{ t('API format') }}</span>
-                  <div class="sidebar-settings-segmented" role="group" :aria-label="t('Custom endpoint API format')">
-                    <button
-                      type="button"
-                      class="sidebar-settings-segmented-option"
-                      :class="{ 'is-active': customEndpointWireApi === 'responses' }"
-                      @click="customEndpointWireApi = 'responses'"
-                    >
-                      Responses
-                    </button>
-                    <button
-                      type="button"
-                      class="sidebar-settings-segmented-option"
-                      :class="{ 'is-active': customEndpointWireApi === 'chat' }"
-                      @click="customEndpointWireApi = 'chat'"
-                    >
-                      Completions
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.dictationLanguage">
-                <span class="sidebar-settings-label">{{ t('Dictation language') }}</span>
-                <ComposerDropdown
-                  class="sidebar-settings-language-dropdown"
-                  :model-value="dictationLanguage"
-                  :options="dictationLanguageOptions"
-                  :placeholder="t('Auto-detect')"
-                  open-direction="up"
-                  :enable-search="true"
-                  :search-placeholder="t('Search language...')"
-                  @update:model-value="onDictationLanguageChange"
-                />
-              </div>
-              <button class="sidebar-settings-row" type="button" aria-live="polite" @click="isTelegramConfigOpen = !isTelegramConfigOpen">
-                <span class="sidebar-settings-label">{{ t('Telegram') }}</span>
-                <span class="sidebar-settings-value">{{ telegramStatusText }}</span>
-              </button>
-              <div v-if="isTelegramConfigOpen" class="sidebar-settings-telegram-panel">
-                <label class="sidebar-settings-field">
-                  <span class="sidebar-settings-field-label">{{ t('Bot token') }}</span>
-                  <input
-                    v-model="telegramBotTokenDraft"
-                    class="sidebar-settings-input"
-                    type="password"
-                    placeholder="123456:ABCDEF"
-                    autocomplete="off"
-                    spellcheck="false"
-                  >
-                </label>
-                <label class="sidebar-settings-field">
-                  <span class="sidebar-settings-field-label">{{ t('Allowed Telegram user IDs') }}</span>
-                  <textarea
-                    v-model="telegramAllowedUserIdsDraft"
-                    class="sidebar-settings-textarea"
-                    rows="3"
-                    placeholder="123456789&#10;987654321"
-                    spellcheck="false"
-                  />
-                </label>
-                <div class="sidebar-settings-field-help">
-                  {{ t('Put one Telegram user ID per line or separate them with commas. Use `*` to allow all Telegram users. Unauthorized users will see their own ID in the rejection message so they can copy it here.') }}
-                </div>
-                <div v-if="telegramConfigError" class="sidebar-settings-telegram-error">
-                  {{ telegramConfigError }}
-                </div>
-                <div class="sidebar-settings-telegram-actions">
-                  <button
-                    class="sidebar-settings-telegram-save"
-                    type="button"
-                    :disabled="isTelegramSaving"
-                    @click="saveTelegramConfig"
-                  >
-                    {{ isTelegramSaving ? t('Saving…') : t('Save Telegram config') }}
-                  </button>
-                </div>
-              </div>
-              <div
-                v-if="showThreadContextBadge"
-                class="sidebar-settings-row sidebar-settings-context-row"
-                :data-state="threadContextBadgeState"
-                :title="threadContextTooltip"
-              >
-                <span class="sidebar-settings-label">{{ t('Context') }}</span>
-                <span class="sidebar-settings-context-value" :data-state="threadContextBadgeState">
-                  {{ threadContextPrimaryText }}
-                  <span class="sidebar-settings-context-meta">{{ threadContextSecondaryText }}</span>
-                </span>
-              </div>
-              <div class="sidebar-settings-rate-limits">
-                <RateLimitStatus :snapshots="accountRateLimitSnapshots" />
-              </div>
-              <div class="sidebar-settings-build-label" :aria-label="t('Worktree name and version')">
-                WT {{ worktreeName }} · v{{ appVersion }}
-              </div>
-            </div>
-          </Transition>
-          <button
-            ref="settingsButtonRef"
-            class="sidebar-settings-button"
-            type="button"
-            @click.stop="isSettingsOpen = !isSettingsOpen"
-          >
-            <IconTablerSettings class="sidebar-settings-icon" />
-            <span>{{ t('Settings') }}</span>
-            <span class="sidebar-settings-button-version">
-              {{ worktreeName }} · v{{ appVersion }}
-            </span>
-          </button>
-        </div>
-      </section>
-    </template>
-
-    <template #content>
-      <section
-        class="content-root"
-        :class="{
-          'is-virtual-keyboard-open': isTerminalKeyboardLayoutActive,
-          'is-terminal-open': isComposerTerminalOpen,
-        }"
-        :style="contentStyle"
-      >
-        <span v-if="isVirtualKeyboardOpen" class="content-keyboard-spacer" aria-hidden="true" />
-        <ContentHeader :title="contentTitle" :accent="isSkillsRoute || isAutomationsRoute">
-          <template #leading>
-            <SidebarThreadControls
-              v-if="isSidebarCollapsed || isMobile"
-              class="sidebar-thread-controls-header-host"
-              :is-sidebar-collapsed="isSidebarCollapsed"
-              :show-new-thread-button="true"
-              @toggle-sidebar="setSidebarCollapsed(!isSidebarCollapsed)"
-              @start-new-thread="onStartNewThreadFromToolbar"
-            />
-            <span v-if="isSkillsRoute" class="skills-route-header-icon" aria-hidden="true">
-              <IconTablerBolt />
-            </span>
-            <span v-else-if="isAutomationsRoute" class="skills-route-header-icon automations-route-header-icon" aria-hidden="true">
-              <IconTablerBolt />
-            </span>
-          </template>
-          <template #actions>
-            <ComposerDropdown
-              v-if="canShowTerminalToggle"
-              class="content-header-terminal-command"
-              :class="{ 'is-open': isComposerTerminalOpen }"
-              :model-value="terminalHeaderDropdownValue"
-              :options="terminalHeaderDropdownOptions"
-              :placeholder="terminalCommandPlaceholder"
-              :selected-prefix-icon="IconTablerTerminal"
-              :icon-only="true"
-              :empty-label="t('No commands')"
-              @update:model-value="onSelectHeaderTerminalCommand"
-            />
-            <HeaderGitBranchDropdown
-              v-if="canShowContentHeaderBranchDropdown"
-              class="content-header-branch-dropdown"
-              :current-branch="currentThreadBranch"
-              :head-sha="currentThreadHeadSha"
-              :head-subject="currentThreadHeadSubject"
-              :head-date="currentThreadHeadDate"
-              :detached="isThreadDetachedHead"
-              :dirty="isThreadWorktreeDirty"
-              :branches="threadBranchOptions"
-              :commits-by-branch="threadBranchCommitsByBranch"
-              :commits-loading-for="threadBranchCommitsLoadingFor"
-              :commits-error="threadBranchCommitsError"
-              :loading="isLoadingThreadBranches"
-              :busy="isSwitchingThreadBranch"
-              :error="threadBranchError"
-              :review-open="isReviewPaneOpen"
-              :show-review="route.name === 'thread' && selectedThreadId.length > 0"
-              @toggle-review="isReviewPaneOpen = !isReviewPaneOpen"
-              @checkout-branch="onCheckoutContentHeaderBranch"
-              @reset-branch-to-commit="onResetContentHeaderBranchToCommit"
-              @load-commits="loadThreadBranchCommits"
-            />
-          </template>
-        </ContentHeader>
-
-        <section class="content-body">
-          <template v-if="isSkillsRoute">
-            <DirectoryHub
-              :cwd="directoryCwd"
-              :thread-id="routeThreadId"
-              :try-in-flight-key="directoryTryInFlightKey"
-              @skills-changed="onSkillsChanged"
-              @try-item="onTryDirectoryItem"
-            />
-          </template>
-          <template v-else-if="isAutomationsRoute">
-            <AutomationsPanel
-              ref="automationsPanelRef"
-              :groups="projectGroups"
-              :project-cwd-by-name="projectCwdByName"
-              :project-display-name-by-id="projectDisplayNameById"
-              :selected-automation-id="routeAutomationId"
-              @select-automation="onSelectAutomationInPanel"
-              @edit-automation="onEditAutomationFromPanel"
-              @create-automation="onCreateAutomationFromPanel"
-            />
-          </template>
-          <template v-else-if="isHomeRoute">
-            <div class="content-grid content-grid-home">
-              <div class="new-thread-empty">
-                <p class="new-thread-hero">{{ t("Let's build") }}</p>
-                <ComposerDropdown class="new-thread-folder-dropdown" :model-value="newThreadCwd"
-                  :options="newThreadFolderOptions" :placeholder="t('Choose folder')"
-                  :enable-search="true"
-                  :search-placeholder="t('Quick search project')"
-                  :disabled="false" @update:model-value="onSelectNewThreadFolder" />
-                <p v-if="newThreadCwd" class="new-thread-folder-selected" :title="newThreadCwd">
-                  {{ t('Selected folder') }}: {{ newThreadCwd }}
-                </p>
-                <div class="new-thread-folder-actions">
-                  <button class="new-thread-folder-action new-thread-folder-action-primary" type="button" @click="onOpenExistingFolder">
-                    {{ t('Select folder') }}
-                  </button>
-                  <button class="new-thread-folder-action" type="button" @click="onOpenProjectSetupModal">
-                    {{ t('Create Project') }}
-                  </button>
-                </div>
-                <section v-if="showFirstLaunchPluginsCard" class="new-thread-launch-card" aria-label="Plugins and Apps announcement">
-                  <div class="new-thread-launch-card-copy">
-                    <div class="new-thread-launch-card-topline">
-                      <span class="new-thread-launch-card-badge" aria-hidden="true">
-                        <IconTablerBolt />
-                      </span>
-                      <p class="new-thread-launch-card-eyebrow">{{ t('New in Codex') }}</p>
-                    </div>
-                    <h2 class="new-thread-launch-card-title">{{ t('Plugins are here') }}</h2>
-                    <p class="new-thread-launch-card-text">
-                      {{ t('Hook Codex up to Gmail, Calendar, GitHub, Slack, Browser Use, and more so it can actually help with real work right away.') }}
-                    </p>
-                    <div class="new-thread-launch-card-pills" aria-label="Example integrations">
-                      <span class="new-thread-launch-card-pill">Gmail</span>
-                      <span class="new-thread-launch-card-pill">Calendar</span>
-                      <span class="new-thread-launch-card-pill">GitHub</span>
-                      <span class="new-thread-launch-card-pill">Slack</span>
-                      <span class="new-thread-launch-card-pill">Browser Use</span>
-                    </div>
-                  </div>
-                  <div class="new-thread-launch-card-actions">
-                    <button class="new-thread-launch-card-button new-thread-launch-card-button-primary" type="button" @click="onOpenPluginsHomeCard">
-                      {{ t('Explore Plugins & Apps') }}
-                    </button>
-                    <button class="new-thread-launch-card-button" type="button" @click="dismissFirstLaunchPluginsCard">
-                      {{ t('Dismiss') }}
-                    </button>
-                  </div>
-                </section>
-                <Teleport to="body">
-                  <div v-if="isExistingFolderPickerOpen" class="new-thread-open-folder-overlay" @click.self="onCloseExistingFolderPanel">
-                    <div class="new-thread-open-folder" role="dialog" aria-modal="true" :aria-label="t('Select folder')" @keydown.esc.prevent="onCloseExistingFolderPanel">
-                      <div class="new-thread-open-folder-header">
-                        <p class="new-thread-open-folder-title">{{ t('Select folder') }}</p>
-                        <button class="new-thread-open-folder-close" type="button" @click="onCloseExistingFolderPanel">
-                          {{ t('Cancel') }}
-                        </button>
-                      </div>
-                      <p class="new-thread-open-folder-label">{{ t('Current folder') }}</p>
-                      <div class="new-thread-open-folder-current">
-                        <input
-                          ref="existingFolderPathInputRef"
-                          v-model="existingFolderPathDraft"
-                          class="new-thread-open-folder-path"
-                          type="text"
-                          :placeholder="t('Current folder')"
-                          :title="existingFolderPathDraft || t('Unavailable')"
-                          :disabled="isExistingFolderLoading || isOpeningExistingFolder"
-                          @blur="onExistingFolderPathBlur"
-                          @keydown.enter.prevent="onSubmitExistingFolderPath"
-                          @keydown.esc.prevent="onCloseExistingFolderPanel"
-                        />
-                        <button
-                          class="new-thread-folder-action new-thread-folder-action-primary"
-                          type="button"
-                          :disabled="!resolvedExistingFolderPath || isExistingFolderLoading || isOpeningExistingFolder"
-                          @click="onConfirmExistingFolder()"
-                        >
-                          {{ isOpeningExistingFolder ? t('Opening…') : t('Open') }}
-                        </button>
-                      </div>
-                      <div class="new-thread-open-folder-actions">
-                        <label class="new-thread-open-folder-toggle">
-                          <input
-                            v-model="showHiddenFolders"
-                            class="new-thread-open-folder-toggle-input"
-                            type="checkbox"
-                            @change="onToggleHiddenFolders"
-                          />
-                          <span>{{ t('Show hidden folders') }}</span>
-                        </label>
-                        <button
-                          class="new-thread-folder-action"
-                          :class="{ 'new-thread-folder-action-primary': isCreateFolderOpen }"
-                          type="button"
-                          :aria-pressed="isCreateFolderOpen"
-                          :disabled="!existingFolderBrowsePath || isExistingFolderLoading || isOpeningExistingFolder || isCreatingFolder || (!!existingFolderError && !isCreateFolderOpen)"
-                          @click="onOpenCreateFolderPanel"
-                        >
-                          {{ t('New folder') }}
-                        </button>
-                      </div>
-                      <div v-if="isCreateFolderOpen" class="new-thread-open-folder-create">
-                        <div class="new-thread-open-folder-create-composer">
-                          <input
-                            ref="createFolderInputRef"
-                            v-model="createFolderDraft"
-                            class="new-thread-open-folder-create-input"
-                            type="text"
-                            :placeholder="t('Folder name')"
-                            @keydown.enter.prevent="onCreateFolder"
-                            @keydown.esc.prevent="onCloseCreateFolderPanel"
-                          />
-                          <button
-                            class="new-thread-folder-action new-thread-folder-action-primary new-thread-open-folder-create-submit"
-                            type="button"
-                            :disabled="!canCreateFolder || isCreatingFolder"
-                            @click="onCreateFolder"
-                          >
-                            {{ createFolderSubmitLabel }}
-                          </button>
-                        </div>
-                        <p v-if="createFolderError" class="new-thread-open-folder-error">{{ createFolderError }}</p>
-                      </div>
-                      <input
-                        ref="existingFolderFilterInputRef"
-                        v-model="existingFolderFilter"
-                        class="new-thread-open-folder-filter"
-                        type="text"
-                        :placeholder="t('Filter folders...')"
-                        @keydown.esc.prevent="onCloseExistingFolderPanel"
-                      />
-                      <div v-if="existingFolderError" class="new-thread-open-folder-error-actions">
-                        <p class="new-thread-open-folder-error">{{ existingFolderError }}</p>
-                        <button
-                          class="new-thread-folder-action"
-                          type="button"
-                          :disabled="isExistingFolderLoading || isOpeningExistingFolder"
-                          @click="onRetryExistingFolderBrowse"
-                        >
-                          {{ t('Retry') }}
-                        </button>
-                      </div>
-                      <p v-if="isExistingFolderLoading" class="new-thread-open-folder-status">{{ t('Loading folders…') }}</p>
-                      <p v-else-if="!existingFolderError && existingFolderFilteredEntries.length === 0" class="new-thread-open-folder-status">
-                        {{ existingFolderFilter.trim() ? t('No folders match this filter.') : t('No subfolders found here.') }}
-                      </p>
-                      <ul v-else-if="existingFolderFilteredEntries.length > 0" class="new-thread-open-folder-list">
-                        <li v-for="entry in existingFolderFilteredEntries" :key="entry.key" class="new-thread-open-folder-item">
-                          <button
-                            class="new-thread-open-folder-item-main"
-                            type="button"
-                            :title="entry.path"
-                            :disabled="isExistingFolderLoading || isOpeningExistingFolder"
-                            @click="onBrowseExistingFolder(entry.path)"
-                          >
-                            <span class="new-thread-open-folder-item-name">{{ entry.name }}</span>
-                          </button>
-                          <button
-                            v-if="entry.kind === 'directory'"
-                            class="new-thread-open-folder-item-open"
-                            type="button"
-                            :disabled="isExistingFolderLoading || isOpeningExistingFolder"
-                            @click="onConfirmExistingFolder(entry.path)"
-                          >
-                            {{ t('Open') }}
-                          </button>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </Teleport>
-                <Teleport to="body">
-                  <div v-if="isProjectSetupModalOpen" class="new-thread-open-folder-overlay" @click.self="onCloseProjectSetupModal">
-                    <div class="new-thread-project-modal" role="dialog" aria-modal="true" :aria-label="t('Create or clone project')" @keydown.esc.prevent="onCloseProjectSetupModal">
-                      <div class="new-thread-open-folder-header">
-                        <p class="new-thread-open-folder-title">{{ t('Create or clone project') }}</p>
-                        <button class="new-thread-open-folder-close" type="button" :disabled="isProjectSetupSubmitting" @click="onCloseProjectSetupModal">
-                          {{ t('Cancel') }}
-                        </button>
-                      </div>
-                      <div class="new-thread-project-mode-tabs" role="tablist" :aria-label="t('Project source')">
-                        <button
-                          class="new-thread-project-mode-tab"
-                          :class="{ 'is-active': projectSetupMode === 'create' }"
-                          type="button"
-                          role="tab"
-                          :aria-selected="projectSetupMode === 'create'"
-                          :disabled="isProjectSetupSubmitting"
-                          @click="projectSetupMode = 'create'"
-                        >
-                          {{ t('New project') }}
-                        </button>
-                        <button
-                          class="new-thread-project-mode-tab"
-                          :class="{ 'is-active': projectSetupMode === 'clone' }"
-                          type="button"
-                          role="tab"
-                          :aria-selected="projectSetupMode === 'clone'"
-                          :disabled="isProjectSetupSubmitting"
-                          @click="projectSetupMode = 'clone'"
-                        >
-                          {{ t('Clone from GitHub') }}
-                        </button>
-                      </div>
-                      <label class="new-thread-project-field">
-                        <span class="new-thread-open-folder-label">{{ t('Destination folder') }}</span>
-                        <input
-                          v-model="projectSetupBaseDir"
-                          class="new-thread-open-folder-path"
-                          type="text"
-                          :disabled="isProjectSetupSubmitting"
-                          :placeholder="t('Destination folder')"
-                        />
-                      </label>
-                      <label v-if="projectSetupMode === 'create'" class="new-thread-project-field">
-                        <span class="new-thread-open-folder-label">{{ t('Project name') }}</span>
-                        <input
-                          ref="projectSetupPrimaryInputRef"
-                          v-model="projectNameDraft"
-                          class="new-thread-open-folder-create-input"
-                          type="text"
-                          :disabled="isProjectSetupSubmitting"
-                          :placeholder="t('Project name')"
-                          @keydown.enter.prevent="onSubmitProjectSetup"
-                        />
-                      </label>
-                      <label v-else class="new-thread-project-field">
-                        <span class="new-thread-open-folder-label">{{ t('GitHub repository URL') }}</span>
-                        <input
-                          ref="projectSetupPrimaryInputRef"
-                          v-model="githubCloneUrlDraft"
-                          class="new-thread-open-folder-create-input"
-                          type="url"
-                          :disabled="isProjectSetupSubmitting"
-                          placeholder="https://github.com/owner/repo"
-                          @keydown.enter.prevent="onSubmitProjectSetup"
-                        />
-                      </label>
-                      <p v-if="projectSetupError" class="new-thread-open-folder-error">{{ projectSetupError }}</p>
-                      <div class="new-thread-project-modal-actions">
-                        <button class="new-thread-folder-action" type="button" :disabled="isProjectSetupSubmitting" @click="onCloseProjectSetupModal">
-                          {{ t('Cancel') }}
-                        </button>
-                        <button
-                          class="new-thread-folder-action new-thread-folder-action-primary"
-                          type="button"
-                          :disabled="!canSubmitProjectSetup || isProjectSetupSubmitting"
-                          @click="onSubmitProjectSetup"
-                        >
-                          {{ projectSetupSubmitLabel }}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </Teleport>
-                <ComposerRuntimeDropdown
-                  v-if="isNewThreadCwdGitRepo"
-                  class="new-thread-runtime-dropdown"
-                  v-model="newThreadRuntime"
-                />
-                <div v-if="newThreadRuntime === 'worktree'" class="new-thread-branch-select">
-                  <p class="new-thread-branch-select-label">{{ t('Base branch') }}</p>
-                  <ComposerDropdown
-                    class="new-thread-branch-dropdown"
-                    :model-value="newWorktreeBaseBranch"
-                    :options="newWorktreeBranchDropdownOptions"
-                    :placeholder="t('Select branch')"
-                    :enable-search="true"
-                    :search-placeholder="t('Search branches...')"
-                    :disabled="isLoadingWorktreeBranches || newWorktreeBranchDropdownOptions.length === 0"
-                    @update:model-value="onSelectNewWorktreeBranch"
-                  />
-                  <p class="new-thread-branch-select-help">
-                    {{
-                      isLoadingWorktreeBranches
-                        ? t('Loading branches…')
-                        : selectedWorktreeBranchLabel
-                          ? t('New worktree branch will start from {branch}.', { branch: selectedWorktreeBranchLabel })
-                          : t('No Git branches found for this folder.')
-                    }}
-                  </p>
-                </div>
-                <p v-if="isNewThreadCwdGitRepo" class="new-thread-runtime-help">
-                  {{ t('Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.') }}
-                </p>
-                <div
-                  v-if="worktreeInitStatus.phase !== 'idle'"
-                  class="worktree-init-status"
-                  :class="{
-                    'is-running': worktreeInitStatus.phase === 'running',
-                    'is-error': worktreeInitStatus.phase === 'error',
-                  }"
-                >
-                  <strong class="worktree-init-status-title">{{ worktreeInitStatus.title }}</strong>
-                  <span class="worktree-init-status-message">{{ worktreeInitStatus.message }}</span>
-                </div>
-              </div>
-
-              <div class="composer-with-queue">
-                <ThreadTerminalPanel
-                  v-if="homeTerminalOpen && composerCwd"
-                  ref="homeTerminalPanelRef"
-                  class="content-thread-terminal-panel"
-                  :thread-id="composerThreadContextId"
-                  :cwd="composerCwd"
-                  @hide="onHideHomeTerminal"
-                  @terminal-focus-change="onTerminalFocusChange"
-                />
-                <ThreadComposer ref="homeThreadComposerRef" :active-thread-id="composerThreadContextId"
-                  :cwd="composerCwd"
-                  :collaboration-modes="availableCollaborationModes"
-                  :selected-collaboration-mode="selectedCollaborationMode"
-                  :models="availableModelIds" :selected-model="composerSelectedModelId"
-                  :selected-reasoning-effort="selectedReasoningEffort"
-                  :selected-speed-mode="selectedSpeedMode"
-                  :is-updating-speed-mode="isUpdatingSpeedMode"
-                  :skills="installedSkills"
-                  :thread-token-usage="selectedThreadTokenUsage"
-                  :codex-quota="codexQuota"
-                  :is-turn-in-progress="false"
-                  :is-stop-pending="false"
-                  :is-interrupting-turn="false" :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
-                  :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
-                  :dictation-language="dictationLanguage"
-                  @submit="onSubmitThreadMessage"
-                  @update:selected-collaboration-mode="onSelectCollaborationMode"
-                  @update:selected-model="onSelectModel"
-                  @update:selected-reasoning-effort="onSelectReasoningEffort"
-                  @update:selected-speed-mode="onSelectSpeedMode" />
-              </div>
-            </div>
-          </template>
-          <template v-else>
-            <div class="content-grid">
-              <ReviewPane
-                v-if="isReviewPaneOpen && selectedThreadId && composerCwd"
-                :thread-id="selectedThreadId"
-                :cwd="composerCwd"
-                :is-thread-in-progress="isSelectedThreadInProgress"
-                @close="isReviewPaneOpen = false"
-              />
-
-              <template v-else>
-                <div class="content-thread">
-                  <ThreadConversation ref="threadConversationRef" :messages="filteredMessages" :is-loading="isLoadingMessages"
-                    :active-thread-id="composerThreadContextId" :cwd="composerCwd"
-                    :live-overlay="liveOverlay"
-                    :pending-requests="selectedThreadServerRequests"
-                    :has-more-persisted-above="hasMoreOlderMessages"
-                    :is-loading-persisted-above="isLoadingOlderMessages"
-                    :load-earlier-messages="loadOlderMessages"
-                    @fork-thread="onForkThreadFromMessage"
-                    @rollback="onRollback"
-                    @implement-plan="onImplementPlan"
-                    @respond-server-request="onRespondServerRequest" />
-                </div>
-
-                <div class="composer-with-queue">
-                  <QueuedMessages
-                    :messages="selectedThreadQueuedMessages"
-                    @edit="onEditQueuedMessage"
-                    @steer="steerQueuedMessage"
-                    @delete="removeQueuedMessage"
-                    @reorder="onReorderQueuedMessage"
-                  />
-                  <ThreadTerminalPanel
-                    v-if="selectedThreadTerminalOpen && selectedThreadId && composerCwd"
-                    ref="threadTerminalPanelRef"
-                    class="content-thread-terminal-panel"
-                    :thread-id="selectedThreadId"
-                    :cwd="composerCwd"
-                    @hide="onHideSelectedThreadTerminal"
-                    @terminal-focus-change="onTerminalFocusChange"
-                  />
-                  <ThreadPendingRequestPanel
-                    v-if="selectedThreadPendingRequest"
-                    :request="selectedThreadPendingRequest"
-                    :request-count="selectedThreadServerRequests.length"
-                    :has-queue-above="selectedThreadQueuedMessages.length > 0"
-                    @respond-server-request="onRespondServerRequest"
-                  />
-                  <ThreadComposer
-                    v-else
-                    ref="threadComposerRef"
-                    :active-thread-id="composerThreadContextId"
-                    :cwd="composerCwd"
-                    :collaboration-modes="availableCollaborationModes"
-                    :selected-collaboration-mode="selectedCollaborationMode"
-                    :models="availableModelIds"
-                    :selected-model="composerSelectedModelId"
-                    :selected-reasoning-effort="selectedReasoningEffort"
-                    :selected-speed-mode="selectedSpeedMode"
-                    :is-updating-speed-mode="isUpdatingSpeedMode"
-                    :skills="installedSkills"
-                    :thread-token-usage="selectedThreadTokenUsage"
-                    :codex-quota="codexQuota"
-                    :is-turn-in-progress="isSelectedThreadInProgress"
-                    :is-stop-pending="isSelectedThreadInterruptPending"
-                    :is-interrupting-turn="isInterruptingTurn"
-                    :has-queue-above="selectedThreadQueuedMessages.length > 0"
-                    :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
-                    :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
-                    :dictation-language="dictationLanguage"
-                    @update:selected-collaboration-mode="onSelectCollaborationMode"
-                    @submit="onSubmitThreadMessage" @update:selected-model="onSelectModel"
-                    @update:selected-reasoning-effort="onSelectReasoningEffort"
-                    @update:selected-speed-mode="onSelectSpeedMode"
-                    @interrupt="onInterruptTurn" />
-                </div>
-              </template>
-            </div>
-          </template>
-        </section>
-      </section>
-    </template>
-  </DesktopLayout>
-  <div
-    v-if="isCodexLoginModalOpen"
-    class="codex-login-modal-backdrop"
-    role="presentation"
-    @click="onCancelCodexLoginModal"
-  >
-    <form
-      class="codex-login-modal"
-      role="dialog"
-      aria-modal="true"
-      :aria-label="t('Complete Codex login')"
-      @submit.prevent="onSubmitCodexLoginCallback"
-      @click.stop
-    >
-      <div class="codex-login-modal-header">
-        <h2 class="codex-login-modal-title">{{ t('Complete Codex login') }}</h2>
-        <button
-          class="codex-login-modal-close"
-          type="button"
-          :aria-label="t('Close')"
-          :disabled="isCompletingCodexLogin"
-          @click="onCancelCodexLoginModal"
-        >
-          ×
-        </button>
-      </div>
-      <p class="codex-login-modal-copy">
-        {{ t('Finish login in the browser, then paste the localhost callback URL here.') }}
-      </p>
-      <a
-        v-if="codexLoginUrl"
-        class="codex-login-modal-link"
-        :href="codexLoginUrl"
-        target="_blank"
-        rel="noreferrer"
-      >
-        {{ t('Open login URL') }}
-      </a>
-      <input
-        ref="codexLoginCallbackInputRef"
-        v-model="codexLoginCallbackUrl"
-        class="codex-login-modal-input"
-        type="url"
-        inputmode="url"
-        :placeholder="t('Paste localhost callback URL')"
-        :disabled="isCompletingCodexLogin"
-      >
-      <p v-if="accountActionError" class="codex-login-modal-error">{{ accountActionError }}</p>
-      <div class="codex-login-modal-actions">
-        <button
-          class="codex-login-modal-cancel"
-          type="button"
-          :disabled="isCompletingCodexLogin"
-          @click="onCancelCodexLoginModal"
-        >
-          {{ t('Cancel') }}
-        </button>
-        <button
-          class="codex-login-modal-submit"
-          type="submit"
-          :disabled="isCompletingCodexLogin || codexLoginCallbackUrl.trim().length === 0"
-        >
-          {{ isCompletingCodexLogin ? t('Completing…') : t('Complete') }}
-        </button>
-      </div>
-    </form>
-  </div>
-</template>
+<template src="./App.template.html"></template>
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -1124,6 +58,8 @@ import type { ReasoningEffort, SpeedMode, UiAccountEntry, UiRateLimitWindow, UiS
 import type { ComposerDraftPayload, ThreadComposerExposed } from './components/content/ThreadComposer.vue'
 import type { GitCommitOption, LocalDirectoryEntry, TelegramStatus, ThreadTerminalQuickCommand, WorktreeBranchOption } from './api/codexGateway'
 import { getFreeModeStatus, setFreeMode, setFreeModeCustomKey, setCustomProvider } from './api/codexGateway'
+import { buildExportFileName, buildThreadMarkdown } from './appExportMarkdown'
+import { applyDarkMode, buildDictationLanguageOptions, buildTerminalHeaderQuickCommands, CHAT_WIDTH_PRESETS, loadBoolPref, loadChatWidthPref, loadDarkModePref, loadDictationLanguagePref, loadInProgressSendModePref, loadTerminalStoredQuickCommands, normalizeTerminalQuickCommandValue, normalizeToWhisperLanguage, saveTerminalStoredQuickCommands, type ChatWidthMode, type DirectoryTryItemPayload, type TerminalHeaderQuickCommand, type ThreadTerminalPanelExposed } from './appSettingsSupport'
 import { getPathLeafName, getPathParent, isProjectlessChatPath, normalizePathForUi } from './pathUtils.js'
 
 const ThreadConversation = defineAsyncComponent(() => import('./components/content/ThreadConversation.vue'))
@@ -1133,9 +69,21 @@ const DirectoryHub = defineAsyncComponent(() => import('./components/content/Dir
 const AutomationsPanel = defineAsyncComponent(() => import('./components/content/AutomationsPanel.vue'))
 const { t, uiLanguage, uiLanguageOptions, setUiLanguage } = useUiLanguage()
 
+function readSelectValue(event: Event): string {
+  return event.target instanceof HTMLSelectElement ? event.target.value : ''
+}
+
+function onUiLanguageSelectChange(event: Event): void {
+  const value = readSelectValue(event)
+  if (value === 'en' || value === 'zh-CN') setUiLanguage(value)
+}
+
+function onProviderSelectChange(event: Event): void {
+  void onProviderChange(readSelectValue(event))
+}
+
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'codex-web-local.sidebar-collapsed.v1'
 const ACCOUNTS_SECTION_COLLAPSED_STORAGE_KEY = 'codex-web-local.accounts-section-collapsed.v1'
-const TERMINAL_QUICK_COMMAND_STORAGE_KEY = 'codex-web-local.terminal-quick-commands.v1'
 const TOGGLE_TERMINAL_COMMAND_VALUE = '__toggle_terminal__'
 const worktreeName = import.meta.env.VITE_WORKTREE_NAME ?? 'unknown'
 const appVersion = import.meta.env.VITE_APP_VERSION ?? 'unknown'
@@ -1149,156 +97,6 @@ const SETTINGS_HELP = {
   dictationLanguage: t('Choose transcription language or keep auto-detect.'),
 } as const
 
-type ChatWidthMode = 'standard' | 'wide' | 'extra-wide'
-
-type TerminalHeaderQuickCommand = {
-  label: string
-  value: string
-  custom?: boolean
-  usageCount: number
-  lastUsedAt: number
-  sourceIndex?: number
-}
-
-type ThreadTerminalPanelExposed = {
-  runQuickCommand: (command: string, custom?: boolean) => Promise<void>
-}
-
-type DirectoryTryItemPayload = {
-  kind: 'app' | 'plugin' | 'skill' | 'composio'
-  name: string
-  displayName: string
-  skillPath?: string
-  prompt?: string
-  attachedSkills?: Array<{ name: string; path: string }>
-}
-
-type ChatWidthPreset = {
-  label: string
-  columnMax: string
-  cardMax: string
-}
-
-const CHAT_WIDTH_PRESETS: Record<ChatWidthMode, ChatWidthPreset> = {
-  standard: {
-    label: 'Standard',
-    columnMax: '45rem',
-    cardMax: '76ch',
-  },
-  wide: {
-    label: 'Wide',
-    columnMax: '72rem',
-    cardMax: '88ch',
-  },
-  'extra-wide': {
-    label: 'Extra wide',
-    columnMax: '96rem',
-    cardMax: '96ch',
-  },
-}
-
-const WHISPER_LANGUAGES: Record<string, string> = {
-  en: 'english',
-  zh: 'chinese',
-  de: 'german',
-  es: 'spanish',
-  ru: 'russian',
-  ko: 'korean',
-  fr: 'french',
-  ja: 'japanese',
-  pt: 'portuguese',
-  tr: 'turkish',
-  pl: 'polish',
-  ca: 'catalan',
-  nl: 'dutch',
-  ar: 'arabic',
-  sv: 'swedish',
-  it: 'italian',
-  id: 'indonesian',
-  hi: 'hindi',
-  fi: 'finnish',
-  vi: 'vietnamese',
-  he: 'hebrew',
-  uk: 'ukrainian',
-  el: 'greek',
-  ms: 'malay',
-  cs: 'czech',
-  ro: 'romanian',
-  da: 'danish',
-  hu: 'hungarian',
-  ta: 'tamil',
-  no: 'norwegian',
-  th: 'thai',
-  ur: 'urdu',
-  hr: 'croatian',
-  bg: 'bulgarian',
-  lt: 'lithuanian',
-  la: 'latin',
-  mi: 'maori',
-  ml: 'malayalam',
-  cy: 'welsh',
-  sk: 'slovak',
-  te: 'telugu',
-  fa: 'persian',
-  lv: 'latvian',
-  bn: 'bengali',
-  sr: 'serbian',
-  az: 'azerbaijani',
-  sl: 'slovenian',
-  kn: 'kannada',
-  et: 'estonian',
-  mk: 'macedonian',
-  br: 'breton',
-  eu: 'basque',
-  is: 'icelandic',
-  hy: 'armenian',
-  ne: 'nepali',
-  mn: 'mongolian',
-  bs: 'bosnian',
-  kk: 'kazakh',
-  sq: 'albanian',
-  sw: 'swahili',
-  gl: 'galician',
-  mr: 'marathi',
-  pa: 'punjabi',
-  si: 'sinhala',
-  km: 'khmer',
-  sn: 'shona',
-  yo: 'yoruba',
-  so: 'somali',
-  af: 'afrikaans',
-  oc: 'occitan',
-  ka: 'georgian',
-  be: 'belarusian',
-  tg: 'tajik',
-  sd: 'sindhi',
-  gu: 'gujarati',
-  am: 'amharic',
-  yi: 'yiddish',
-  lo: 'lao',
-  uz: 'uzbek',
-  fo: 'faroese',
-  ht: 'haitian creole',
-  ps: 'pashto',
-  tk: 'turkmen',
-  nn: 'nynorsk',
-  mt: 'maltese',
-  sa: 'sanskrit',
-  lb: 'luxembourgish',
-  my: 'myanmar',
-  bo: 'tibetan',
-  tl: 'tagalog',
-  mg: 'malagasy',
-  as: 'assamese',
-  tt: 'tatar',
-  haw: 'hawaiian',
-  ln: 'lingala',
-  ha: 'hausa',
-  ba: 'bashkir',
-  jw: 'javanese',
-  su: 'sundanese',
-  yue: 'cantonese',
-}
 
 const {
   projectGroups,
@@ -1474,7 +272,7 @@ const chatWidth = ref<ChatWidthMode>(loadChatWidthPref())
 const dictationClickToToggle = ref(loadBoolPref(DICTATION_CLICK_TO_TOGGLE_KEY, false))
 const dictationAutoSend = ref(loadBoolPref(DICTATION_AUTO_SEND_KEY, true))
 const dictationLanguage = ref(loadDictationLanguagePref())
-const dictationLanguageOptions = computed(() => buildDictationLanguageOptions())
+const dictationLanguageOptions = computed(() => buildDictationLanguageOptions(t, dictationLanguage.value, typeof navigator !== 'undefined' ? (navigator.languages ?? []) : []))
 const showFirstLaunchPluginsCard = ref(false)
 const freeModeEnabled = ref(false)
 const freeModeLoading = ref(false)
@@ -1879,6 +677,7 @@ const existingFolderFilteredEntries = computed(() => {
   )
 })
 const darkModeMediaQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null
+const handleDarkModeMediaChange = (): void => applyDarkMode(darkMode.value)
 const chatWidthLabel = computed(() => t(CHAT_WIDTH_PRESETS[chatWidth.value].label))
 const terminalShortcutLabel = computed(() => {
   if (typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test(navigator.platform)) {
@@ -1889,22 +688,7 @@ const terminalShortcutLabel = computed(() => {
 const terminalCommandPlaceholder = computed(() => (
   isComposerTerminalOpen.value ? t('Terminal') : t('Open terminal')
 ))
-const terminalHeaderQuickCommands = computed<TerminalHeaderQuickCommand[]>(() => {
-  const storedByValue = new Map(terminalStoredQuickCommands.value.map((command) => [command.value, command]))
-  const combined: TerminalHeaderQuickCommand[] = [
-    ...terminalProjectQuickCommands.value.map((command, index) => ({
-      label: command.label,
-      value: command.value,
-      usageCount: 0,
-      lastUsedAt: 0,
-      ...(storedByValue.get(command.value) ?? {}),
-      custom: false,
-      sourceIndex: index,
-    })),
-  ]
-  return combined
-    .sort(compareTerminalQuickCommands)
-})
+const terminalHeaderQuickCommands = computed<TerminalHeaderQuickCommand[]>(() => buildTerminalHeaderQuickCommands(terminalProjectQuickCommands.value, terminalStoredQuickCommands.value))
 const terminalHeaderDropdownOptions = computed(() => [
   { label: isComposerTerminalOpen.value ? t('Hide terminal') : t('Open terminal'), value: TOGGLE_TERMINAL_COMMAND_VALUE },
   ...terminalHeaderQuickCommands.value.map((command) => ({ label: command.label, value: command.value })),
@@ -1944,8 +728,8 @@ onMounted(() => {
   window.visualViewport?.addEventListener('resize', updateVisualViewportState)
   window.visualViewport?.addEventListener('scroll', updateVisualViewportState)
   updateVisualViewportState()
-  applyDarkMode()
-  darkModeMediaQuery?.addEventListener('change', applyDarkMode)
+  applyDarkMode(darkMode.value)
+  darkModeMediaQuery?.addEventListener('change', handleDarkModeMediaChange)
   void initialize()
   void loadHomeDirectory()
   void loadFirstLaunchPluginsCardPreference()
@@ -1967,7 +751,7 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateVisualViewportState)
   window.visualViewport?.removeEventListener('resize', updateVisualViewportState)
   window.visualViewport?.removeEventListener('scroll', updateVisualViewportState)
-  darkModeMediaQuery?.removeEventListener('change', applyDarkMode)
+  darkModeMediaQuery?.removeEventListener('change', handleDarkModeMediaChange)
   if (accountStatePollTimer !== null) {
     window.clearInterval(accountStatePollTimer)
     accountStatePollTimer = null
@@ -2800,74 +1584,6 @@ function recordHeaderTerminalCommandUse(command: string): void {
   saveTerminalStoredQuickCommands(next)
 }
 
-function normalizeTerminalQuickCommandValue(value: string): string {
-  return value.trim().replace(/\s+/g, ' ')
-}
-
-function compareTerminalQuickCommands(first: TerminalHeaderQuickCommand, second: TerminalHeaderQuickCommand): number {
-  if (second.usageCount !== first.usageCount) return second.usageCount - first.usageCount
-  if (second.lastUsedAt !== first.lastUsedAt) return second.lastUsedAt - first.lastUsedAt
-  const firstSource = typeof first.sourceIndex === 'number' ? first.sourceIndex : Number.MAX_SAFE_INTEGER
-  const secondSource = typeof second.sourceIndex === 'number' ? second.sourceIndex : Number.MAX_SAFE_INTEGER
-  return firstSource - secondSource
-}
-
-function loadTerminalStoredQuickCommands(): TerminalHeaderQuickCommand[] {
-  if (typeof window === 'undefined') return []
-  try {
-    const raw = window.localStorage.getItem(TERMINAL_QUICK_COMMAND_STORAGE_KEY)
-    if (!raw) return []
-    const parsed = JSON.parse(raw) as unknown
-    if (!Array.isArray(parsed)) return []
-    const seen = new Set<string>()
-    const commands: TerminalHeaderQuickCommand[] = []
-    for (const row of parsed) {
-      const record = row !== null && typeof row === 'object' && !Array.isArray(row)
-        ? row as Record<string, unknown>
-        : null
-      const value = normalizeTerminalQuickCommandValue(readTerminalString(record?.value))
-      if (!value || seen.has(value)) continue
-      seen.add(value)
-      commands.push({
-        label: readTerminalString(record?.label) || value,
-        value,
-        custom: record?.custom !== false,
-        usageCount: readTerminalPositiveInteger(record?.usageCount),
-        lastUsedAt: readTerminalPositiveInteger(record?.lastUsedAt),
-      })
-    }
-    return commands
-  } catch {
-    return []
-  }
-}
-
-function saveTerminalStoredQuickCommands(commands: TerminalHeaderQuickCommand[]): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(
-    TERMINAL_QUICK_COMMAND_STORAGE_KEY,
-    JSON.stringify(commands.map((command) => ({
-      label: command.label,
-      value: command.value,
-      custom: command.custom === true,
-      usageCount: command.usageCount,
-      lastUsedAt: command.lastUsedAt,
-    }))),
-  )
-}
-
-function readTerminalString(value: unknown): string {
-  return typeof value === 'string' ? value : ''
-}
-
-function readTerminalPositiveInteger(value: unknown): number {
-  if (typeof value === 'number' && Number.isFinite(value)) return Math.max(0, Math.trunc(value))
-  if (typeof value === 'string') {
-    const parsed = Number(value)
-    if (Number.isFinite(parsed)) return Math.max(0, Math.trunc(parsed))
-  }
-  return 0
-}
 
 function onTerminalFocusChange(focused: boolean): void {
   isTerminalInputFocused.value = focused
@@ -3048,7 +1764,6 @@ function onEditQueuedMessage(messageId: string): void {
   removeQueuedMessage(messageId)
 }
 
-
 function scheduleMobileConversationJumpToLatest(): void {
   if (!isMobile.value || isHomeRoute.value) return
 
@@ -3665,12 +2380,11 @@ function onImplementPlan(payload: { turnId: string }): void {
   void sendMessageToSelectedThread('Implement', [], [], 'steer', [], undefined, 'default')
 }
 
-
 function onExportChat(): void {
   if (isHomeRoute.value || isSkillsRoute.value || isAutomationsRoute.value || typeof document === 'undefined') return
   if (!selectedThread.value || filteredMessages.value.length === 0) return
-  const markdown = buildThreadMarkdown()
-  const fileName = buildExportFileName()
+  const markdown = buildThreadMarkdown(selectedThread.value, filteredMessages.value)
+  const fileName = buildExportFileName(selectedThread.value)
   const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' })
   const objectUrl = URL.createObjectURL(blob)
   const link = document.createElement('a')
@@ -3682,104 +2396,6 @@ function onExportChat(): void {
   window.setTimeout(() => URL.revokeObjectURL(objectUrl), 0)
 }
 
-function buildThreadMarkdown(): string {
-  const lines: string[] = []
-  const threadTitle = selectedThread.value?.title?.trim() || 'Untitled thread'
-  lines.push(`# ${escapeMarkdownText(threadTitle)}`)
-  lines.push('')
-  lines.push(`- Exported: ${new Date().toISOString()}`)
-  lines.push(`- Thread ID: ${selectedThread.value?.id ?? ''}`)
-  lines.push('')
-  lines.push('---')
-  lines.push('')
-
-  for (const message of filteredMessages.value) {
-    const roleLabel = message.role ? message.role.toUpperCase() : 'MESSAGE'
-    lines.push(`## ${roleLabel}`)
-    lines.push('')
-
-    const normalizedText = message.text.trim()
-    if (normalizedText) {
-      lines.push(normalizedText)
-      lines.push('')
-    }
-
-    if (message.commandExecution) {
-      lines.push('```text')
-      lines.push(`command: ${message.commandExecution.command}`)
-      lines.push(`status: ${message.commandExecution.status}`)
-      if (message.commandExecution.cwd) {
-        lines.push(`cwd: ${message.commandExecution.cwd}`)
-      }
-      if (message.commandExecution.exitCode !== null) {
-        lines.push(`exitCode: ${message.commandExecution.exitCode}`)
-      }
-      lines.push(message.commandExecution.aggregatedOutput || '(no output)')
-      lines.push('```')
-      lines.push('')
-    }
-
-    if (message.fileAttachments && message.fileAttachments.length > 0) {
-      lines.push('Attachments:')
-      for (const attachment of message.fileAttachments) {
-        lines.push(`- ${attachment.path}`)
-      }
-      lines.push('')
-    }
-
-    if (message.images && message.images.length > 0) {
-      lines.push('Images:')
-      for (const imageUrl of message.images) {
-        lines.push(`- ${imageUrl}`)
-      }
-      lines.push('')
-    }
-  }
-
-  return `${lines.join('\n').trimEnd()}\n`
-}
-
-function buildExportFileName(): string {
-  const threadTitle = selectedThread.value?.title?.trim() || 'chat'
-  const sanitized = threadTitle
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-  const base = sanitized || 'chat'
-  const stamp = new Date().toISOString().replace(/[:.]/g, '-')
-  return `${base}-${stamp}.md`
-}
-
-function escapeMarkdownText(value: string): string {
-  return value.replace(/([\\`*_{}\[\]()#+\-.!])/g, '\\$1')
-}
-
-function loadBoolPref(key: string, fallback: boolean): boolean {
-  if (typeof window === 'undefined') return fallback
-  const v = window.localStorage.getItem(key)
-  if (v === null) return fallback
-  return v === '1'
-}
-
-function loadDarkModePref(): 'system' | 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'system'
-  const v = window.localStorage.getItem(DARK_MODE_KEY)
-  if (v === 'light' || v === 'dark') return v
-  return 'system'
-}
-
-function loadInProgressSendModePref(): 'steer' | 'queue' {
-  if (typeof window === 'undefined') return 'steer'
-  const v = window.localStorage.getItem(IN_PROGRESS_SEND_MODE_KEY)
-  if (v === 'steer' || v === 'queue') return v
-  return 'queue'
-}
-
-function loadChatWidthPref(): ChatWidthMode {
-  if (typeof window === 'undefined') return 'standard'
-  const value = window.localStorage.getItem(CHAT_WIDTH_KEY)
-  return value === 'standard' || value === 'wide' || value === 'extra-wide' ? value : 'standard'
-}
 
 function toggleSendWithEnter(): void {
   sendWithEnter.value = !sendWithEnter.value
@@ -3796,7 +2412,7 @@ function cycleDarkMode(): void {
   const idx = order.indexOf(darkMode.value)
   darkMode.value = order[(idx + 1) % order.length]
   window.localStorage.setItem(DARK_MODE_KEY, darkMode.value)
-  applyDarkMode()
+  applyDarkMode(darkMode.value)
 }
 
 function cycleChatWidth(): void {
@@ -3816,7 +2432,6 @@ function toggleDictationAutoSend(): void {
   window.localStorage.setItem(DICTATION_AUTO_SEND_KEY, dictationAutoSend.value ? '1' : '0')
 }
 
-
 async function onProviderChange(provider: string): Promise<void> {
   if (freeModeLoading.value) return
   freeModeLoading.value = true
@@ -3985,72 +2600,7 @@ function onDictationLanguageChange(nextValue: string): void {
   window.localStorage.setItem(DICTATION_LANGUAGE_KEY, value)
 }
 
-function loadDictationLanguagePref(): string {
-  if (typeof window === 'undefined') return 'auto'
-  const value = window.localStorage.getItem(DICTATION_LANGUAGE_KEY)?.trim() || 'auto'
-  const normalized = normalizeToWhisperLanguage(value)
-  return normalized || 'auto'
-}
-
-function buildDictationLanguageOptions(): Array<{ value: string; label: string }> {
-  const options: Array<{ value: string; label: string }> = [{ value: 'auto', label: t('Auto-detect') }]
-  const seen = new Set<string>(['auto'])
-  function formatLanguageLabel(value: string): string {
-    const languageName = WHISPER_LANGUAGES[value] || value
-    const title = languageName.charAt(0).toUpperCase() + languageName.slice(1)
-    return `${title} (${value})`
-  }
-
-  for (const raw of typeof navigator !== 'undefined' ? (navigator.languages ?? []) : []) {
-    const value = normalizeToWhisperLanguage(raw)
-    if (!value || seen.has(value)) continue
-    seen.add(value)
-    options.push({
-      value,
-      label: `Preferred: ${formatLanguageLabel(value)}`,
-    })
-  }
-
-  for (const value of Object.keys(WHISPER_LANGUAGES)) {
-    if (seen.has(value)) continue
-    seen.add(value)
-    options.push({
-      value,
-      label: formatLanguageLabel(value),
-    })
-  }
-
-  const current = dictationLanguage.value.trim()
-  if (current && !seen.has(current)) {
-    options.push({
-      value: current,
-      label: formatLanguageLabel(current),
-    })
-  }
-
-  return options
-}
-
-function normalizeToWhisperLanguage(raw: string): string {
-  const value = raw.trim().toLowerCase()
-  if (!value || value === 'auto') return ''
-  if (value in WHISPER_LANGUAGES) return value
-  const base = value.split('-')[0] ?? value
-  if (base in WHISPER_LANGUAGES) return base
-  return ''
-}
 
-function applyDarkMode(): void {
-  const root = document.documentElement
-  if (darkMode.value === 'dark') {
-    root.classList.add('dark')
-  } else if (darkMode.value === 'light') {
-    root.classList.remove('dark')
-  } else {
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    root.classList.toggle('dark', prefersDark)
-  }
-}
 
 function loadSidebarCollapsed(): boolean {
   if (typeof window === 'undefined') return false
@@ -4326,7 +2876,6 @@ watch(
   { immediate: true },
 )
 
-
 watch(isMobile, (mobile) => {
   if (mobile && !isSidebarCollapsed.value) {
     setSidebarCollapsed(true)
@@ -4441,1043 +2990,4 @@ async function loadWorktreeBranches(sourceCwd: string): Promise<void> {
 }
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.sidebar-root {
-  @apply h-full flex flex-col select-none;
-}
-
-.sidebar-root input,
-.sidebar-root textarea {
-  @apply select-text;
-}
-
-.sidebar-scrollable {
-  @apply flex-1 min-h-0 overflow-y-auto py-4 px-2 flex flex-col gap-2;
-}
-
-.content-root {
-  @apply h-full min-h-0 min-w-0 w-full flex flex-col overflow-y-hidden overflow-x-hidden bg-white;
-}
-
-.content-root.is-virtual-keyboard-open {
-  height: var(--visual-viewport-height);
-  max-height: var(--visual-viewport-height);
-  transform: translateY(var(--visual-viewport-offset-top));
-}
-
-.sidebar-thread-controls-host {
-  @apply mt-1 -translate-y-px px-2 pb-1;
-}
-
-.sidebar-search-toggle {
-  @apply h-6.75 w-6.75 rounded-md border border-transparent bg-transparent text-zinc-600 flex items-center justify-center transition hover:border-zinc-200 hover:bg-zinc-50;
-}
-
-.sidebar-search-toggle[aria-pressed='true'] {
-  @apply border-zinc-300 bg-zinc-100 text-zinc-700;
-}
-
-.sidebar-search-toggle-icon {
-  @apply w-4 h-4;
-}
-
-.sidebar-search-bar {
-  @apply flex items-center gap-1.5 mx-2 px-2 py-1 rounded-md border border-zinc-200 bg-white transition-colors focus-within:border-zinc-400;
-}
-
-.sidebar-search-bar-icon {
-  @apply w-3.5 h-3.5 text-zinc-400 shrink-0;
-}
-
-.sidebar-search-input {
-  @apply flex-1 min-w-0 bg-transparent text-sm text-zinc-800 placeholder-zinc-400 outline-none border-none p-0;
-}
-
-.sidebar-search-clear {
-  @apply w-4 h-4 rounded text-zinc-400 flex items-center justify-center transition hover:text-zinc-600;
-}
-
-.sidebar-search-clear-icon {
-  @apply w-3.5 h-3.5;
-}
-
-.sidebar-skills-link {
-  @apply mx-2 flex items-center gap-3 rounded-2xl border border-transparent bg-transparent px-3 py-2.5 text-left text-zinc-700 transition hover:bg-zinc-100 hover:text-zinc-950 cursor-pointer;
-}
-
-.sidebar-skills-link.is-active {
-  @apply border-transparent bg-zinc-100 text-zinc-950;
-}
-
-.sidebar-skills-link-icon {
-  @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-emerald-600 text-white;
-}
-
-.sidebar-automations-link-icon {
-  @apply bg-amber-500;
-}
-
-.sidebar-skills-link-icon :deep(svg) {
-  @apply h-5 w-5;
-}
-
-.sidebar-skills-link-copy {
-  @apply flex min-w-0 flex-col;
-}
-
-.sidebar-skills-link-title {
-  @apply truncate text-sm font-semibold leading-5 tracking-[-0.01em];
-}
-
-.sidebar-skills-link-subtitle {
-  @apply truncate text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500;
-}
-
-.sidebar-thread-controls-header-host {
-  @apply ml-1;
-}
-
-.skills-route-header-icon {
-  @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-emerald-600 text-white shadow-[0_16px_32px_-20px_rgba(5,150,105,0.9)];
-}
-
-.automations-route-header-icon {
-  @apply bg-amber-500 shadow-[0_16px_32px_-20px_rgba(245,158,11,0.9)];
-}
-
-.skills-route-header-icon :deep(svg) {
-  @apply h-4.5 w-4.5;
-}
-
-:global(:root.dark) .sidebar-skills-link-title {
-  @apply text-zinc-50;
-}
-
-:global(:root.dark) .sidebar-skills-link-subtitle {
-  @apply text-zinc-400;
-}
-
-.content-body {
-  @apply flex-1 min-h-0 min-w-0 w-full flex flex-col gap-2 sm:gap-3 pt-1 pb-2 sm:pb-4 overflow-x-hidden;
-}
-
-.content-root.is-virtual-keyboard-open .content-body {
-  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
-}
-
-.content-root.is-virtual-keyboard-open .content-grid {
-  gap: 0.5rem;
-}
-
-.content-root.is-virtual-keyboard-open .content-thread {
-  min-height: 0;
-}
-
-.content-root.is-virtual-keyboard-open .composer-with-queue {
-  gap: 0.375rem;
-  padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
-}
-
-.content-root.is-virtual-keyboard-open .content-thread-terminal-panel {
-  min-height: 0;
-}
-
-.content-root.is-virtual-keyboard-open .content-keyboard-spacer {
-  display: none;
-}
-
-
-
-.content-error {
-  @apply m-0 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700;
-}
-
-.content-grid {
-  @apply flex-1 min-h-0 flex flex-col gap-3;
-}
-
-.content-grid-home {
-  @apply overflow-y-auto;
-}
-
-.content-thread {
-  @apply flex-1 min-h-0;
-}
-
-.composer-with-queue {
-  @apply w-full shrink-0 px-2 sm:px-6 flex flex-col gap-2;
-}
-
-.content-thread-terminal-panel {
-  @apply w-full;
-}
-
-.content-header-terminal-command {
-  @apply max-w-48;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-trigger) {
-  @apply h-8 rounded-full border border-zinc-200 bg-white px-3 text-xs text-zinc-700 outline-none transition hover:bg-zinc-50 focus:border-zinc-300;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-prefix-icon) {
-  @apply h-4 w-4 text-zinc-500;
-}
-
-.content-header-terminal-command.is-open :deep(.composer-dropdown-trigger) {
-  @apply border-zinc-300 bg-zinc-100 text-zinc-950;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-menu-wrap) {
-  left: auto;
-  right: 0;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-menu) {
-  width: min(18rem, calc(100vw - 1rem));
-  min-width: min(14rem, calc(100vw - 1rem));
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-option) {
-  @apply block truncate;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-trigger) {
-  @apply rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-50;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-prefix-icon),
-.content-header-branch-dropdown :deep(.composer-dropdown-prefix-icon) {
-  @apply h-4 w-4 text-zinc-600;
-}
-
-.content-header-terminal-command :deep(.composer-dropdown-trigger),
-.content-header-branch-dropdown :deep(.composer-dropdown-trigger) {
-  @apply gap-0.5;
-}
-
-.content-header-branch-dropdown :deep(.composer-dropdown-trigger) {
-  @apply rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-50;
-}
-
-.content-header-branch-dropdown :deep(.composer-dropdown-value) {
-  @apply max-w-40 truncate;
-}
-
-.content-header-branch-dropdown :deep(.composer-dropdown-menu-wrap) {
-  left: auto;
-  right: 0;
-}
-
-.content-header-branch-dropdown.is-review-open :deep(.composer-dropdown-trigger) {
-  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
-}
-
-.content-header-branch-dropdown.is-review-open :deep(.composer-dropdown-chevron) {
-  @apply text-white;
-}
-
-.new-thread-empty {
-  @apply flex-1 min-h-0 flex flex-col items-center justify-center gap-0.5 px-3 sm:px-6;
-}
-
-.new-thread-hero {
-  @apply m-0 text-2xl sm:text-[2.5rem] font-normal leading-[1.05] text-zinc-900;
-}
-
-.new-thread-folder-dropdown {
-  @apply text-2xl sm:text-[2.5rem] text-zinc-500;
-}
-
-.new-thread-folder-dropdown :deep(.composer-dropdown-trigger) {
-  @apply h-auto p-0 text-2xl sm:text-[2.5rem] leading-[1.05];
-}
-
-.new-thread-folder-dropdown :deep(.composer-dropdown-value) {
-  @apply leading-[1.05];
-}
-
-.new-thread-folder-dropdown :deep(.composer-dropdown-chevron) {
-  @apply h-4 w-4 sm:h-5 sm:w-5 mt-0;
-}
-
-.new-thread-folder-selected {
-  @apply mt-2 mb-0 max-w-3xl text-center text-xs text-zinc-500 break-all;
-}
-
-.new-thread-folder-actions {
-  @apply mt-3 flex w-full max-w-3xl flex-wrap items-center justify-center gap-2;
-}
-
-.new-thread-launch-card {
-  @apply mt-4 w-full max-w-3xl rounded-[28px] border border-emerald-200 bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.2),_transparent_42%),linear-gradient(135deg,_#f4fff8,_#ffffff_58%)] px-5 py-5 text-left shadow-[0_18px_50px_-28px_rgba(5,150,105,0.45)];
-}
-
-.new-thread-launch-card-copy {
-  @apply flex flex-col gap-2;
-}
-
-.new-thread-launch-card-topline {
-  @apply flex items-center gap-2;
-}
-
-.new-thread-launch-card-badge {
-  @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-2xl bg-emerald-700 text-white shadow-[0_12px_28px_-18px_rgba(5,150,105,0.9)];
-}
-
-.new-thread-launch-card-badge :deep(svg) {
-  @apply h-4 w-4;
-}
-
-.new-thread-launch-card-eyebrow {
-  @apply m-0 text-[11px] font-semibold uppercase tracking-[0.24em] text-emerald-700;
-}
-
-.new-thread-launch-card-title {
-  @apply m-0 text-xl font-semibold leading-tight text-zinc-950 sm:text-2xl;
-}
-
-.new-thread-launch-card-text {
-  @apply m-0 max-w-2xl text-sm leading-6 text-zinc-700 sm:text-[15px];
-}
-
-.new-thread-launch-card-actions {
-  @apply mt-4 flex flex-wrap items-center gap-2;
-}
-
-.new-thread-launch-card-pills {
-  @apply mt-1 flex flex-wrap gap-2;
-}
-
-.new-thread-launch-card-pill {
-  @apply inline-flex items-center rounded-full border border-emerald-100 bg-white/80 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-emerald-700;
-}
-
-.new-thread-launch-card-button {
-  @apply inline-flex h-10 items-center justify-center rounded-full border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50;
-}
-
-.new-thread-launch-card-button-primary {
-  @apply border-emerald-700 bg-emerald-700 text-white hover:bg-emerald-600;
-}
-
-:global(:root.dark) .new-thread-launch-card {
-  @apply border-emerald-900/80 bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.2),_transparent_38%),linear-gradient(135deg,_rgba(6,78,59,0.32),_rgba(24,24,27,0.96)_58%)] shadow-[0_24px_64px_-34px_rgba(16,185,129,0.35)];
-}
-
-:global(:root.dark) .new-thread-launch-card-eyebrow {
-  @apply text-emerald-300;
-}
-
-:global(:root.dark) .new-thread-launch-card-badge {
-  @apply bg-emerald-500 text-white;
-}
-
-:global(:root.dark) .new-thread-launch-card-title {
-  @apply text-zinc-50;
-}
-
-:global(:root.dark) .new-thread-launch-card-text {
-  @apply text-zinc-300;
-}
-
-:global(:root.dark) .new-thread-launch-card-pill {
-  @apply border-emerald-900 bg-zinc-900/70 text-emerald-300;
-}
-
-:global(:root.dark) .new-thread-launch-card-button {
-  @apply border-zinc-700 bg-zinc-900 text-zinc-100 hover:bg-zinc-800;
-}
-
-:global(:root.dark) .new-thread-launch-card-button-primary {
-  @apply border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-500;
-}
-
-.new-thread-folder-action {
-  @apply inline-flex h-9 items-center justify-center rounded-full border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.new-thread-folder-action-primary {
-  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
-}
-
-.new-thread-open-folder-overlay {
-  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4;
-}
-
-.new-thread-open-folder {
-  @apply flex w-full max-w-3xl max-h-[90vh] flex-col gap-2 overflow-y-auto rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-xl;
-}
-
-.new-thread-project-modal {
-  @apply flex w-full max-w-xl max-h-[90vh] flex-col gap-3 overflow-y-auto rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-xl;
-}
-
-.new-thread-open-folder-header {
-  @apply flex items-center justify-between gap-3;
-}
-
-.new-thread-open-folder-title {
-  @apply m-0 text-sm font-semibold text-zinc-900;
-}
-
-.new-thread-open-folder-close {
-  @apply border-0 bg-transparent p-0 text-sm text-zinc-500 transition hover:text-zinc-800;
-}
-
-.new-thread-open-folder-label {
-  @apply m-0 text-xs font-medium uppercase tracking-wide text-zinc-500;
-}
-
-.new-thread-open-folder-current {
-  @apply flex items-start gap-2;
-}
-
-.new-thread-open-folder-path {
-  @apply min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 font-mono text-xs text-zinc-700 outline-none transition focus:border-zinc-400;
-}
-
-.new-thread-open-folder-actions {
-  @apply flex flex-wrap items-center gap-2;
-}
-
-.new-thread-project-mode-tabs {
-  @apply grid grid-cols-2 rounded-xl border border-zinc-200 bg-zinc-50 p-1;
-}
-
-.new-thread-project-mode-tab {
-  @apply inline-flex h-9 items-center justify-center rounded-lg border-0 bg-transparent px-3 text-sm font-medium text-zinc-600 transition hover:bg-white hover:text-zinc-900 disabled:cursor-default disabled:opacity-60;
-}
-
-.new-thread-project-mode-tab.is-active {
-  @apply bg-white text-zinc-950 shadow-sm;
-}
-
-.new-thread-project-field {
-  @apply flex flex-col gap-1.5;
-}
-
-.new-thread-project-modal-actions {
-  @apply mt-1 flex flex-wrap justify-end gap-2;
-}
-
-.new-thread-open-folder-toggle {
-  @apply inline-flex items-center gap-2 text-sm text-zinc-600;
-}
-
-.new-thread-open-folder-toggle-input {
-  @apply relative h-4 w-4 shrink-0 appearance-none rounded-[4px] border border-zinc-300 bg-white outline-none transition;
-}
-
-.new-thread-open-folder-toggle-input:focus-visible {
-  box-shadow: 0 0 0 3px rgb(228 228 231);
-}
-
-.new-thread-open-folder-toggle-input:checked {
-  border-color: rgb(24 24 27);
-  background-color: rgb(255 255 255);
-}
-
-.new-thread-open-folder-toggle-input::after {
-  content: '';
-  position: absolute;
-  left: 4px;
-  top: 1px;
-  width: 4px;
-  height: 8px;
-  border-right: 2px solid rgb(24 24 27);
-  border-bottom: 2px solid rgb(24 24 27);
-  transform: rotate(45deg);
-  opacity: 0;
-}
-
-.new-thread-open-folder-toggle-input:checked::after {
-  opacity: 1;
-}
-
-.new-thread-open-folder-filter {
-  @apply w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400;
-}
-
-.new-thread-open-folder-create {
-  @apply flex flex-col gap-2;
-}
-
-.new-thread-open-folder-create-composer {
-  @apply flex items-center gap-2;
-}
-
-.new-thread-open-folder-create-input {
-  @apply w-full min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400;
-}
-
-.new-thread-open-folder-create-submit {
-  @apply shrink-0;
-}
-
-.new-thread-folder-action[aria-pressed='true'] {
-  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
-}
-
-.new-thread-open-folder-status {
-  @apply m-0 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600;
-}
-
-.new-thread-open-folder-error {
-  @apply m-0 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700;
-}
-
-.new-thread-open-folder-error-actions {
-  @apply flex flex-wrap items-start gap-2;
-}
-
-.new-thread-open-folder-list {
-  @apply m-0 flex max-h-72 list-none flex-col gap-1 overflow-y-auto p-0 pr-3;
-  scrollbar-gutter: stable;
-  scrollbar-color: rgb(161 161 170) rgb(244 244 245);
-  scrollbar-width: thin;
-}
-
-.new-thread-open-folder-list::-webkit-scrollbar {
-  width: 10px;
-}
-
-.new-thread-open-folder-list::-webkit-scrollbar-track {
-  background: rgb(244 244 245);
-  border-radius: 9999px;
-}
-
-.new-thread-open-folder-list::-webkit-scrollbar-thumb {
-  background: rgb(161 161 170);
-  border-radius: 9999px;
-  border: 2px solid rgb(244 244 245);
-}
-
-.new-thread-open-folder-list::-webkit-scrollbar-thumb:hover {
-  background: rgb(113 113 122);
-}
-
-.new-thread-open-folder-item {
-  @apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1;
-}
-
-.new-thread-open-folder-item-main {
-  @apply min-w-0 truncate rounded-xl border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-left text-sm font-medium leading-5 text-zinc-900 transition hover:border-zinc-300 hover:bg-zinc-100;
-}
-
-.new-thread-open-folder-item-main:disabled,
-.new-thread-open-folder-item-open:disabled {
-  @apply cursor-default opacity-60;
-}
-
-.new-thread-open-folder-item-name {
-  @apply block truncate;
-}
-
-.new-thread-open-folder-item-open {
-  @apply inline-flex h-7 items-center justify-center rounded-xl border border-zinc-200 bg-white px-2.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50;
-}
-
-.new-thread-runtime-dropdown {
-  @apply mt-3;
-}
-
-.new-thread-branch-select {
-  @apply mt-3 w-full max-w-3xl;
-}
-
-.new-thread-branch-select-label {
-  @apply m-0 mb-1 text-xs font-medium uppercase tracking-wide text-zinc-500;
-}
-
-.new-thread-branch-dropdown :deep(.composer-dropdown-trigger) {
-  @apply h-9 rounded-xl border border-zinc-200 bg-white px-3 text-sm text-zinc-700;
-}
-
-.new-thread-branch-select-help {
-  @apply mt-1 mb-0 text-xs text-zinc-500;
-}
-
-.new-thread-runtime-help {
-  @apply mt-2 mb-0 max-w-3xl text-center text-xs text-zinc-500;
-}
-
-.worktree-init-status {
-  @apply mt-3 flex w-full max-w-xl flex-col gap-1 rounded-xl border px-3 py-2 text-sm;
-}
-
-.worktree-init-status.is-running {
-  @apply border-zinc-300 bg-zinc-50 text-zinc-700;
-}
-
-.worktree-init-status.is-error {
-  @apply border-rose-300 bg-rose-50 text-rose-800;
-}
-
-.worktree-init-status-title {
-  @apply font-medium;
-}
-
-.worktree-init-status-message {
-  @apply break-all;
-}
-
-.sidebar-settings-area {
-  @apply shrink-0 bg-slate-100 pt-2 px-2 pb-2 border-t border-zinc-200;
-}
-
-.sidebar-settings-button {
-  @apply flex items-center gap-2 w-full rounded-lg border-0 bg-transparent px-2 py-2 text-sm text-zinc-600 transition hover:bg-zinc-200 hover:text-zinc-900 cursor-pointer;
-}
-
-.sidebar-settings-button-version {
-  @apply ml-auto min-w-0 truncate text-right text-xs;
-}
-
-.sidebar-settings-icon {
-  @apply w-4.5 h-4.5;
-}
-
-.sidebar-settings-panel {
-  @apply mb-1 max-h-[min(70vh,36rem)] overflow-y-auto rounded-lg border border-zinc-200 bg-white;
-}
-
-.sidebar-settings-row {
-  @apply flex items-center justify-between w-full px-3 py-2.5 text-sm text-zinc-700 border-0 bg-transparent transition hover:bg-zinc-50 cursor-pointer;
-}
-
-.sidebar-settings-row--select {
-  @apply cursor-default items-center gap-2;
-}
-
-.sidebar-settings-language-dropdown {
-  @apply min-w-0 max-w-52;
-}
-
-.sidebar-settings-language-dropdown :deep(.composer-dropdown-trigger) {
-  @apply h-auto rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700;
-}
-
-.sidebar-settings-language-dropdown :deep(.composer-dropdown-value) {
-  @apply max-w-32;
-}
-
-.sidebar-settings-row + .sidebar-settings-row {
-  @apply border-t border-zinc-100;
-}
-
-.sidebar-settings-telegram-panel {
-  @apply border-t border-zinc-100 bg-zinc-50/70 px-3 py-3;
-}
-
-.sidebar-settings-field {
-  @apply flex flex-col gap-1.5;
-}
-
-.sidebar-settings-field + .sidebar-settings-field {
-  @apply mt-3;
-}
-
-.sidebar-settings-field-label {
-  @apply text-xs font-medium text-zinc-700;
-}
-
-.sidebar-settings-input,
-.sidebar-settings-textarea {
-  @apply w-full rounded-md border border-zinc-200 bg-white px-2.5 py-2 text-sm text-zinc-800 outline-none transition focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
-}
-
-.sidebar-settings-textarea {
-  @apply min-h-20 resize-y font-mono text-xs;
-}
-
-.sidebar-settings-field-help {
-  @apply mt-2 text-xs leading-5 text-zinc-500;
-}
-
-.sidebar-settings-telegram-error {
-  @apply mt-2 rounded-md bg-rose-50 px-2.5 py-2 text-xs text-rose-700;
-}
-
-.sidebar-settings-telegram-actions {
-  @apply mt-3 flex items-center justify-end;
-}
-
-.sidebar-settings-telegram-save {
-  @apply rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.sidebar-settings-account-section {
-  @apply border-t border-zinc-100 bg-zinc-50/60 px-3 py-3;
-}
-
-.sidebar-settings-account-header {
-  @apply mb-2 flex items-center justify-between gap-2;
-}
-
-.sidebar-settings-account-header-main {
-  @apply flex items-center gap-2;
-}
-
-.sidebar-settings-account-collapse {
-  @apply inline-flex h-5 w-5 items-center justify-center rounded border border-zinc-200 bg-white text-zinc-600 transition hover:bg-zinc-100;
-}
-
-.sidebar-settings-account-collapse-icon {
-  @apply text-[11px] leading-none;
-}
-
-.sidebar-settings-account-title {
-  @apply text-sm font-medium text-zinc-800;
-}
-
-.sidebar-settings-account-count {
-  @apply rounded bg-zinc-200 px-1.5 py-0.5 text-[11px] text-zinc-600;
-}
-
-.sidebar-settings-account-error {
-  @apply mb-2 rounded-md bg-rose-50 px-2 py-1.5 text-xs text-rose-700;
-}
-
-.sidebar-settings-account-refresh {
-  @apply shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.sidebar-settings-account-login {
-  @apply mb-2 flex items-center gap-2;
-}
-
-.sidebar-settings-account-login-button {
-  @apply shrink-0 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.sidebar-settings-account-login-link {
-  @apply min-w-0 truncate text-xs text-blue-600 hover:text-blue-700 hover:underline;
-}
-
-.sidebar-settings-account-empty {
-  @apply text-xs text-zinc-500;
-}
-
-.codex-login-modal-backdrop {
-  @apply fixed inset-0 z-[100] flex items-center justify-center bg-black/35 px-4;
-}
-
-.codex-login-modal {
-  @apply flex w-full max-w-md flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-4 shadow-2xl;
-}
-
-.codex-login-modal-header {
-  @apply flex items-center justify-between gap-3;
-}
-
-.codex-login-modal-title {
-  @apply text-base font-semibold text-zinc-900;
-}
-
-.codex-login-modal-close {
-  @apply inline-flex h-7 w-7 items-center justify-center rounded-full border border-zinc-200 bg-white text-lg leading-none text-zinc-600 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.codex-login-modal-copy {
-  @apply text-sm leading-5 text-zinc-600;
-}
-
-.codex-login-modal-link {
-  @apply min-w-0 truncate text-sm text-blue-600 hover:text-blue-700 hover:underline;
-}
-
-.codex-login-modal-input {
-  @apply w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-400 disabled:cursor-default disabled:opacity-60;
-}
-
-.codex-login-modal-error {
-  @apply rounded-md bg-rose-50 px-3 py-2 text-xs text-rose-700;
-}
-
-.codex-login-modal-actions {
-  @apply flex items-center justify-end gap-2;
-}
-
-.codex-login-modal-cancel,
-.codex-login-modal-submit {
-  @apply rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.codex-login-modal-submit {
-  @apply border-zinc-900 bg-zinc-900 text-white hover:bg-zinc-800;
-}
-
-:global(:root.dark) .codex-login-modal {
-  @apply border-zinc-700 bg-zinc-900;
-}
-
-:global(:root.dark) .codex-login-modal-title {
-  @apply text-zinc-100;
-}
-
-:global(:root.dark) .codex-login-modal-close,
-:global(:root.dark) .codex-login-modal-cancel {
-  @apply border-zinc-600 bg-zinc-800 text-zinc-200 hover:bg-zinc-700;
-}
-
-:global(:root.dark) .codex-login-modal-copy {
-  @apply text-zinc-300;
-}
-
-:global(:root.dark) .codex-login-modal-link {
-  @apply text-sky-300 hover:text-sky-200;
-}
-
-:global(:root.dark) .codex-login-modal-input {
-  @apply border-zinc-600 bg-zinc-950 text-zinc-100 placeholder:text-zinc-500 focus:border-zinc-400;
-}
-
-:global(:root.dark) .codex-login-modal-error {
-  @apply bg-rose-950/40 text-rose-200;
-}
-
-:global(:root.dark) .codex-login-modal-submit {
-  @apply border-zinc-200 bg-zinc-100 text-zinc-900 hover:bg-white;
-}
-
-.sidebar-settings-account-list {
-  @apply flex flex-col gap-2;
-}
-
-.sidebar-settings-account-item {
-  @apply flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-2.5 py-2;
-}
-
-.sidebar-settings-account-item.is-active {
-  @apply border-emerald-200 bg-emerald-50;
-}
-
-.sidebar-settings-account-item.is-unavailable {
-  @apply border-rose-200 bg-rose-50;
-}
-
-.sidebar-settings-account-main {
-  @apply min-w-0 flex-1;
-}
-
-.sidebar-settings-account-actions {
-  @apply flex w-24 shrink-0 flex-col items-end gap-1.5;
-}
-
-.sidebar-settings-account-email {
-  @apply truncate text-sm text-zinc-800;
-}
-
-.sidebar-settings-account-meta {
-  @apply truncate text-[11px] text-zinc-500;
-}
-
-.sidebar-settings-account-quota {
-  @apply truncate text-[11px] text-zinc-600;
-}
-
-.sidebar-settings-account-id {
-  @apply mt-1 inline-flex max-w-full rounded-full bg-zinc-100 px-2 py-0.5 font-mono text-[11px] text-zinc-700;
-}
-
-.sidebar-settings-account-item.is-active .sidebar-settings-account-id {
-  @apply bg-emerald-100 text-emerald-800;
-}
-
-.sidebar-settings-account-item.is-unavailable .sidebar-settings-account-id {
-  @apply bg-rose-100 text-rose-800;
-}
-
-.sidebar-settings-account-switch {
-  @apply min-w-[4.75rem] shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-center text-xs text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.sidebar-settings-account-remove {
-  @apply invisible shrink-0 rounded-full border border-amber-200 bg-white px-2 py-0.5 text-[10px] leading-4 text-zinc-500 opacity-0 pointer-events-none transition-colors hover:bg-amber-50 disabled:cursor-default disabled:opacity-60;
-}
-
-.sidebar-settings-account-remove.is-visible {
-  @apply visible opacity-100 pointer-events-auto;
-}
-
-.sidebar-settings-account-remove.is-confirming {
-  @apply border-amber-300 bg-amber-50 text-amber-700 font-medium;
-}
-
-.sidebar-settings-label {
-  @apply text-left;
-}
-
-.sidebar-settings-value {
-  @apply text-xs text-zinc-500 bg-zinc-100 rounded px-1.5 py-0.5;
-}
-
-
-.sidebar-settings-toggle {
-  @apply relative w-9 h-5 rounded-full bg-zinc-300 transition-colors shrink-0;
-}
-
-.sidebar-settings-toggle::after {
-  content: '';
-  @apply absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm;
-}
-
-.sidebar-settings-toggle.is-on {
-  @apply bg-zinc-800;
-}
-
-.sidebar-settings-toggle.is-on::after {
-  transform: translateX(16px);
-}
-
-.sidebar-settings-row--input {
-  @apply flex flex-col gap-1 py-1.5;
-}
-
-.sidebar-settings-error {
-  @apply text-xs text-red-600 bg-red-50 rounded px-2 py-1.5 break-words;
-}
-
-.sidebar-settings-key-group {
-  @apply flex items-center gap-1.5 w-full;
-}
-
-.sidebar-settings-key-input {
-  @apply flex-1 min-w-0 text-xs rounded border border-zinc-200 bg-white px-2 py-1 outline-none transition-colors placeholder:text-zinc-400;
-}
-
-.sidebar-settings-key-input:focus {
-  @apply border-zinc-400;
-}
-
-.sidebar-settings-key-save {
-  @apply shrink-0 rounded border border-zinc-200 bg-white px-2.5 py-1 text-xs text-zinc-700 transition-colors hover:bg-zinc-50 disabled:opacity-40 disabled:cursor-default;
-}
-
-.sidebar-settings-key-masked {
-  @apply flex-1 min-w-0 text-xs text-zinc-500 font-mono truncate;
-}
-
-.sidebar-settings-key-clear {
-  @apply shrink-0 w-6 h-6 flex items-center justify-center rounded-full border border-zinc-200 text-xs text-zinc-400 transition-colors hover:text-zinc-600 hover:border-zinc-300 disabled:opacity-40;
-}
-
-.sidebar-settings-provider-select {
-  @apply min-w-0 max-w-40 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 outline-none transition-colors cursor-pointer;
-}
-
-.sidebar-settings-provider-select:focus {
-  @apply border-zinc-400 ring-2 ring-zinc-200;
-}
-
-.sidebar-settings-segmented {
-  @apply inline-flex items-center rounded-md border border-zinc-200 bg-white p-0.5;
-}
-
-.sidebar-settings-segmented-option {
-  @apply rounded px-2 py-1 text-xs text-zinc-600 transition-colors;
-}
-
-.sidebar-settings-segmented-option.is-active {
-  @apply bg-zinc-800 text-white;
-}
-
-.sidebar-settings-provider-info {
-  @apply flex items-center justify-between w-full;
-}
-
-.sidebar-settings-provider-link {
-  @apply text-xs text-blue-600 hover:text-blue-700 underline shrink-0;
-}
-
-:root.dark .sidebar-settings-provider-select {
-  @apply border-zinc-600 bg-zinc-800 text-zinc-200;
-}
-
-:root.dark .sidebar-settings-provider-select:focus {
-  @apply border-zinc-500 ring-zinc-700;
-}
-
-:root.dark .sidebar-settings-segmented {
-  @apply border-zinc-600 bg-zinc-800;
-}
-
-:root.dark .sidebar-settings-segmented-option {
-  @apply text-zinc-300;
-}
-
-:root.dark .sidebar-settings-segmented-option.is-active {
-  @apply bg-zinc-100 text-zinc-900;
-}
-
-:root.dark .sidebar-settings-provider-link {
-  @apply text-blue-400 hover:text-blue-300;
-}
-
-:root.dark .sidebar-settings-key-input {
-  @apply border-zinc-600 bg-zinc-800 text-zinc-200 placeholder:text-zinc-500;
-}
-
-:root.dark .sidebar-settings-key-input:focus {
-  @apply border-zinc-500;
-}
-
-:root.dark .sidebar-settings-key-save {
-  @apply border-zinc-600 bg-zinc-700 text-zinc-200 hover:bg-zinc-600;
-}
-
-:root.dark .sidebar-settings-key-masked {
-  @apply text-zinc-400;
-}
-
-:root.dark .sidebar-settings-key-clear {
-  @apply border-zinc-600 text-zinc-500 hover:text-zinc-300 hover:border-zinc-500;
-}
-
-.settings-panel-enter-active,
-.settings-panel-leave-active {
-  transition: all 150ms ease;
-}
-
-.settings-panel-enter-from,
-.settings-panel-leave-to {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.sidebar-settings-context-row {
-  @apply cursor-default;
-}
-
-.sidebar-settings-context-value {
-  @apply text-xs font-semibold text-zinc-700 text-right;
-}
-
-.sidebar-settings-context-value[data-state='ok'] {
-  @apply text-emerald-700;
-}
-
-.sidebar-settings-context-value[data-state='warning'] {
-  @apply text-amber-700;
-}
-
-.sidebar-settings-context-value[data-state='danger'] {
-  @apply text-rose-700;
-}
-
-.sidebar-settings-context-meta {
-  @apply block text-[11px] font-normal text-zinc-500;
-}
-
-.sidebar-settings-rate-limits {
-  @apply border-t border-zinc-200 px-2 pt-2;
-}
-
-.sidebar-settings-build-label {
-  @apply border-t border-zinc-100 px-3 py-2 text-[11px] text-zinc-500;
-}
-
-</style>
+<style scoped src="./App.scoped.css"></style>
diff --git a/src/api/codexGateway.ts b/src/api/codexGateway.ts
index 25a762d10..76c697c14 100644
--- a/src/api/codexGateway.ts
+++ b/src/api/codexGateway.ts
@@ -42,10 +42,6 @@ import type {
   UiThread,
   UiReviewAction,
   UiReviewActionLevel,
-  UiReviewFile,
-  UiReviewFinding,
-  UiReviewHunk,
-  UiReviewLine,
   UiReviewResult,
   UiReviewScope,
   UiReviewSnapshot,
@@ -56,6 +52,9 @@ import type {
   UiThreadAutomationStatus,
 } from '../types/codex'
 import { normalizePathForUi } from '../pathUtils.js'
+import { normalizeReviewSnapshot, parseReviewText, readLatestReviewItem } from './codexGatewayReview'
+import { normalizeDirectoryApp, normalizeDirectoryMcpServer, normalizeDirectoryPluginApp, normalizeDirectoryPluginSkill, normalizeDirectoryPluginSummary } from './codexGatewayDirectory'
+export { attachThreadTerminal, closeThreadTerminal, getThreadTerminalQuickCommands, getThreadTerminalSnapshot, getThreadTerminalStatus, resizeThreadTerminal, sendThreadTerminalInput } from './codexGatewayTerminal'
 
 type CurrentModelConfig = {
   model: string
@@ -854,205 +853,6 @@ export async function getOlderThreadMessages(threadId: string, beforeTurnId: str
   }
 }
 
-function normalizeReviewLine(value: unknown): UiReviewLine | null {
-  const record = asRecord(value)
-  if (!record) return null
-
-  const key = readString(record.key)
-  const text = typeof record.text === 'string' ? record.text : ''
-  const kind = readString(record.kind)
-  if (!key || !kind) return null
-  if (kind !== 'meta' && kind !== 'hunk' && kind !== 'add' && kind !== 'remove' && kind !== 'context') {
-    return null
-  }
-
-  return {
-    key,
-    kind,
-    text,
-    oldLine: readNumber(record.oldLine),
-    newLine: readNumber(record.newLine),
-  }
-}
-
-function normalizeReviewHunk(value: unknown): UiReviewHunk | null {
-  const record = asRecord(value)
-  if (!record) return null
-
-  const id = readString(record.id)
-  const header = typeof record.header === 'string' ? record.header : ''
-  const patch = typeof record.patch === 'string' ? record.patch : ''
-  if (!id) return null
-
-  return {
-    id,
-    header,
-    patch,
-    addedLineCount: readNumber(record.addedLineCount) ?? 0,
-    removedLineCount: readNumber(record.removedLineCount) ?? 0,
-    oldStart: readNumber(record.oldStart),
-    oldLineCount: readNumber(record.oldLineCount) ?? 0,
-    newStart: readNumber(record.newStart),
-    newLineCount: readNumber(record.newLineCount) ?? 0,
-    lines: Array.isArray(record.lines)
-      ? record.lines
-        .map((entry) => normalizeReviewLine(entry))
-        .filter((entry): entry is UiReviewLine => entry !== null)
-      : [],
-  }
-}
-
-function normalizeReviewFile(value: unknown): UiReviewFile | null {
-  const record = asRecord(value)
-  if (!record) return null
-
-  const id = readString(record.id)
-  const path = readString(record.path)
-  const absolutePath = readString(record.absolutePath)
-  const operation = readString(record.operation)
-  if (!id || !path || !absolutePath || !operation) return null
-  if (operation !== 'add' && operation !== 'delete' && operation !== 'update' && operation !== 'rename') {
-    return null
-  }
-
-  return {
-    id,
-    path,
-    absolutePath,
-    previousPath: readString(record.previousPath),
-    previousAbsolutePath: readString(record.previousAbsolutePath),
-    operation,
-    addedLineCount: readNumber(record.addedLineCount) ?? 0,
-    removedLineCount: readNumber(record.removedLineCount) ?? 0,
-    diff: typeof record.diff === 'string' ? record.diff : '',
-    hunks: Array.isArray(record.hunks)
-      ? record.hunks
-        .map((entry) => normalizeReviewHunk(entry))
-        .filter((entry): entry is UiReviewHunk => entry !== null)
-      : [],
-  }
-}
-
-function normalizeReviewSnapshot(payload: unknown): UiReviewSnapshot {
-  const envelope = asRecord(payload)
-  const data = asRecord(envelope?.data)
-  const summaryRecord = asRecord(data?.summary)
-  const scope = readString(data?.scope) === 'baseBranch' ? 'baseBranch' : 'workspace'
-  const workspaceView = readString(data?.workspaceView) === 'staged' ? 'staged' : 'unstaged'
-
-  return {
-    cwd: readString(data?.cwd) ?? '',
-    gitRoot: readString(data?.gitRoot),
-    isGitRepo: readBoolean(data?.isGitRepo) ?? false,
-    scope,
-    workspaceView,
-    baseBranch: readString(data?.baseBranch),
-    baseBranchOptions: Array.isArray(data?.baseBranchOptions)
-      ? data.baseBranchOptions
-        .map((entry) => readString(entry))
-        .filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)
-      : [],
-    headBranch: readString(data?.headBranch),
-    mergeBaseSha: readString(data?.mergeBaseSha),
-    generatedAtIso: readString(data?.generatedAtIso) ?? '',
-    summary: {
-      fileCount: readNumber(summaryRecord?.fileCount) ?? 0,
-      addedLineCount: readNumber(summaryRecord?.addedLineCount) ?? 0,
-      removedLineCount: readNumber(summaryRecord?.removedLineCount) ?? 0,
-    },
-    files: Array.isArray(data?.files)
-      ? data.files
-        .map((entry) => normalizeReviewFile(entry))
-        .filter((entry): entry is UiReviewFile => entry !== null)
-      : [],
-  }
-}
-
-function parseReviewLocation(value: string): {
-  absolutePath: string | null
-  startLine: number | null
-  endLine: number | null
-} {
-  const trimmed = value.trim()
-  if (!trimmed) {
-    return { absolutePath: null, startLine: null, endLine: null }
-  }
-
-  const match = trimmed.match(/^(.*?):(\d+)-(\d+)$/u)
-  if (!match) {
-    return { absolutePath: trimmed || null, startLine: null, endLine: null }
-  }
-
-  return {
-    absolutePath: match[1]?.trim() || null,
-    startLine: Number(match[2]),
-    endLine: Number(match[3]),
-  }
-}
-
-function parseReviewText(reviewText: string): UiReviewResult {
-  const normalized = reviewText.replace(/\r\n/g, '\n').trim()
-  if (!normalized) {
-    return { reviewText: '', summary: '', findings: [] }
-  }
-
-  const markerIndex = normalized.search(/\n(?:Full review comments|Review comment):\n/iu)
-  const summary = markerIndex >= 0 ? normalized.slice(0, markerIndex).trim() : normalized
-  const findingsSection = markerIndex >= 0 ? normalized.slice(markerIndex).trim() : ''
-  const findings: UiReviewFinding[] = []
-
-  if (findingsSection) {
-    const body = findingsSection
-      .replace(/^(?:Full review comments|Review comment):\n*/iu, '')
-      .trim()
-    const matches = body.matchAll(/^- (.+?) — (.+)\n?((?:  .*(?:\n|$))*)/gmu)
-    let index = 0
-    for (const match of matches) {
-      const title = match[1]?.trim() ?? ''
-      const location = parseReviewLocation(match[2] ?? '')
-      const block = (match[0] ?? '').trim()
-      const findingBody = (match[3] ?? '')
-        .split('\n')
-        .map((line) => line.replace(/^  /u, ''))
-        .join('\n')
-        .trim()
-
-      findings.push({
-        id: `finding:${index}`,
-        title: title || `Finding ${index + 1}`,
-        body: findingBody,
-        path: location.absolutePath ? location.absolutePath.split('/').filter(Boolean).slice(-1)[0] ?? location.absolutePath : null,
-        absolutePath: location.absolutePath,
-        startLine: location.startLine,
-        endLine: location.endLine,
-        rawText: block,
-      })
-      index += 1
-    }
-  }
-
-  return {
-    reviewText: normalized,
-    summary,
-    findings,
-  }
-}
-
-function readLatestReviewItem(payload: ThreadReadResponse, type: 'enteredReviewMode' | 'exitedReviewMode'): string | null {
-  const turns = Array.isArray(payload.thread.turns) ? payload.thread.turns : []
-  for (let turnIndex = turns.length - 1; turnIndex >= 0; turnIndex -= 1) {
-    const turn = turns[turnIndex]
-    const items = Array.isArray(turn?.items) ? turn.items : []
-    for (let itemIndex = items.length - 1; itemIndex >= 0; itemIndex -= 1) {
-      const item = items[itemIndex]
-      if (item?.type !== type) continue
-      const review = typeof item.review === 'string' ? item.review.trim() : ''
-      if (review) return review
-    }
-  }
-  return null
-}
-
 export async function getThreadReviewResult(threadId: string): Promise<{
   enteredReviewLabel: string | null
   result: UiReviewResult | null
@@ -1244,96 +1044,6 @@ export function subscribeCodexNotifications(onNotification: (value: RpcNotificat
 
 export type { RpcNotification }
 
-function normalizeThreadTerminalSession(value: unknown): ThreadTerminalSession | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const id = readString(record.id)
-  const threadId = readString(record.threadId)
-  const cwd = readString(record.cwd)
-  const shell = readString(record.shell)
-  if (!id || !threadId || !cwd || !shell) return null
-  return {
-    id,
-    threadId,
-    cwd,
-    shell,
-    buffer: typeof record.buffer === 'string' ? record.buffer : '',
-    truncated: readBoolean(record.truncated) ?? false,
-  }
-}
-
-async function fetchTerminalJson(path: string, init?: RequestInit): Promise<unknown> {
-  const response = await fetch(path, init)
-  const payload = await response.json().catch(() => null)
-  if (!response.ok) {
-    throw new Error(extractErrorMessage(payload, `Terminal request failed with HTTP ${response.status}`))
-  }
-  return payload
-}
-
-export async function attachThreadTerminal(input: ThreadTerminalAttachInput): Promise<ThreadTerminalSession> {
-  const payload = await fetchTerminalJson('/codex-api/thread-terminal/attach', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(input),
-  })
-  const session = normalizeThreadTerminalSession(asRecord(payload)?.session)
-  if (!session) throw new Error('Terminal attach response was malformed')
-  return session
-}
-
-export async function getThreadTerminalStatus(): Promise<{ available: boolean, reason: string | null }> {
-  const payload = await fetchTerminalJson('/codex-api/thread-terminal/status')
-  const record = asRecord(payload)
-  return {
-    available: readBoolean(record?.available) ?? false,
-    reason: readString(record?.reason) || null,
-  }
-}
-
-export async function getThreadTerminalQuickCommands(cwd: string): Promise<ThreadTerminalQuickCommand[]> {
-  const payload = await fetchTerminalJson(`/codex-api/thread-terminal/quick-commands?cwd=${encodeURIComponent(cwd)}`)
-  const payloadRecord = asRecord(payload)
-  const rows: unknown[] = Array.isArray(payloadRecord?.commands) ? payloadRecord.commands : []
-  return rows.flatMap((row: unknown) => {
-    const record = asRecord(row)
-    const label = readString(record?.label)
-    const value = readString(record?.value)
-    const source = readString(record?.source)
-    if (!label || !value || (source !== 'package' && source !== 'script' && source !== 'make')) return []
-    return [{ label, value, source }]
-  })
-}
-
-export async function sendThreadTerminalInput(sessionId: string, data: string): Promise<void> {
-  await fetchTerminalJson('/codex-api/thread-terminal/input', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ sessionId, data }),
-  })
-}
-
-export async function resizeThreadTerminal(sessionId: string, cols: number, rows: number): Promise<void> {
-  await fetchTerminalJson('/codex-api/thread-terminal/resize', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ sessionId, cols, rows }),
-  })
-}
-
-export async function closeThreadTerminal(sessionId: string): Promise<void> {
-  await fetchTerminalJson('/codex-api/thread-terminal/close', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ sessionId }),
-  })
-}
-
-export async function getThreadTerminalSnapshot(threadId: string): Promise<ThreadTerminalSession | null> {
-  const payload = await fetchTerminalJson(`/codex-api/thread-terminal-snapshot?threadId=${encodeURIComponent(threadId)}`)
-  return normalizeThreadTerminalSession(asRecord(payload)?.session)
-}
-
 export async function replyToServerRequest(
   id: number,
   payload: { result?: unknown; error?: { code?: number; message: string } },
@@ -1937,166 +1647,6 @@ export async function getCurrentModelConfig(): Promise<CurrentModelConfig> {
   return { model, providerId, reasoningEffort, speedMode }
 }
 
-function normalizeDirectoryPluginApp(value: unknown): DirectoryPluginAppSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const id = readString(record.id)
-  const name = readString(record.name)
-  if (!id || !name) return null
-  return {
-    id,
-    name,
-    description: readString(record.description) ?? '',
-    installUrl: readString(record.installUrl ?? record.install_url) ?? '',
-    needsAuth: readBoolean(record.needsAuth ?? record.needs_auth) ?? false,
-  }
-}
-
-function normalizeDirectoryPluginSkill(value: unknown): DirectoryPluginSkillSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const name = readString(record.name)
-  const path = readString(record.path)
-  if (!name || !path) return null
-  const iface = asRecord(record.interface)
-  return {
-    name,
-    path,
-    description: readString(record.description) ?? '',
-    enabled: readBoolean(record.enabled) ?? true,
-    displayName: readString(iface?.displayName ?? iface?.display_name) ?? name,
-    shortDescription: readString(record.shortDescription ?? record.short_description) ?? '',
-  }
-}
-
-function normalizeDirectoryPluginSummary(
-  value: unknown,
-  marketplace: { name?: string; displayName?: string; path?: string | null } = {},
-): DirectoryPluginSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const id = readString(record.id)
-  const name = readString(record.name)
-  if (!id || !name) return null
-  const iface = asRecord(record.interface)
-  const source = asRecord(record.source)
-  const sourceType = readString(source?.type) ?? ''
-  const sourcePath = readString(source?.path)
-  const sourceUrl = readString(source?.url) ?? ''
-  const remoteMarketplaceName = sourceType === 'remote' ? marketplace.name ?? null : null
-  const marketplacePath = marketplace.path ?? (sourceType === 'local' ? sourcePath : null)
-  const displayName = readString(iface?.displayName ?? iface?.display_name) ?? name
-  const shortDescription = readString(iface?.shortDescription ?? iface?.short_description)
-  const longDescription = readString(iface?.longDescription ?? iface?.long_description) ?? ''
-
-  return {
-    id,
-    name,
-    displayName,
-    description: shortDescription ?? longDescription,
-    longDescription,
-    developerName: readString(iface?.developerName ?? iface?.developer_name) ?? '',
-    category: readString(iface?.category) ?? '',
-    marketplaceName: marketplace.name ?? '',
-    marketplaceDisplayName: marketplace.displayName ?? marketplace.name ?? '',
-    marketplacePath,
-    remoteMarketplaceName,
-    sourceType,
-    sourceUrl,
-    installed: readBoolean(record.installed) ?? false,
-    enabled: readBoolean(record.enabled) ?? true,
-    installPolicy: readString(record.installPolicy ?? record.install_policy) ?? '',
-    authPolicy: readString(record.authPolicy ?? record.auth_policy) ?? '',
-    logoUrl: readString(iface?.logoUrl ?? iface?.logo_url) ?? '',
-    logoPath: readString(iface?.logo) ?? '',
-    composerIconUrl: readString(iface?.composerIconUrl ?? iface?.composer_icon_url) ?? '',
-    composerIconPath: readString(iface?.composerIcon ?? iface?.composer_icon) ?? '',
-    brandColor: readString(iface?.brandColor ?? iface?.brand_color) ?? '',
-    capabilities: readStringArray(iface?.capabilities),
-    defaultPrompt: readStringArray(iface?.defaultPrompt ?? iface?.default_prompt),
-    screenshotUrls: readStringArray(iface?.screenshotUrls ?? iface?.screenshot_urls),
-    screenshots: readStringArray(iface?.screenshots),
-    websiteUrl: readString(iface?.websiteUrl ?? iface?.website_url) ?? '',
-    privacyPolicyUrl: readString(iface?.privacyPolicyUrl ?? iface?.privacy_policy_url) ?? '',
-    termsOfServiceUrl: readString(iface?.termsOfServiceUrl ?? iface?.terms_of_service_url) ?? '',
-  }
-}
-
-function normalizeDirectoryApp(value: unknown, catalogRank = 0): DirectoryAppInfo | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const id = readString(record.id)
-  const name = readString(record.name)
-  if (!id || !name) return null
-  const branding = asRecord(record.branding)
-  const metadata = asRecord(record.appMetadata ?? record.app_metadata)
-  return {
-    id,
-    name,
-    description: readString(record.description) ?? readString(metadata?.seoDescription ?? metadata?.seo_description) ?? '',
-    logoUrl: readString(record.logoUrl ?? record.logo_url) ?? '',
-    logoUrlDark: readString(record.logoUrlDark ?? record.logo_url_dark) ?? '',
-    distributionChannel: readString(record.distributionChannel ?? record.distribution_channel) ?? '',
-    installUrl: readString(record.installUrl ?? record.install_url) ?? '',
-    isAccessible: readBoolean(record.isAccessible ?? record.is_accessible) ?? false,
-    isEnabled: readBoolean(record.isEnabled ?? record.is_enabled) ?? true,
-    pluginDisplayNames: readStringArray(record.pluginDisplayNames ?? record.plugin_display_names),
-    category: readString(branding?.category) ?? '',
-    developer: readString(branding?.developer) ?? readString(metadata?.developer) ?? '',
-    website: readString(branding?.website) ?? '',
-    privacyPolicy: readString(branding?.privacyPolicy ?? branding?.privacy_policy) ?? '',
-    termsOfService: readString(branding?.termsOfService ?? branding?.terms_of_service) ?? '',
-    catalogRank,
-  }
-}
-
-function normalizeDirectoryMcpServer(value: unknown): DirectoryMcpServerStatus | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const name = readString(record.name)
-  if (!name) return null
-  const toolsRecord = asRecord(record.tools) ?? {}
-  const tools = Object.entries(toolsRecord).map(([fallbackName, raw]) => {
-    const tool = asRecord(raw)
-    return {
-      name: readString(tool?.name) ?? fallbackName,
-      title: readString(tool?.title) ?? '',
-      description: readString(tool?.description) ?? '',
-    }
-  })
-  const resources = Array.isArray(record.resources)
-    ? record.resources.map((raw) => {
-      const resource = asRecord(raw)
-      return {
-        name: readString(resource?.name) ?? '',
-        title: readString(resource?.title) ?? '',
-        uri: readString(resource?.uri) ?? '',
-        description: readString(resource?.description) ?? '',
-      }
-    }).filter((resource) => resource.name || resource.uri)
-    : []
-  const rawResourceTemplates = record.resourceTemplates ?? record.resource_templates
-  const resourceTemplates = Array.isArray(rawResourceTemplates)
-    ? rawResourceTemplates.map((raw: unknown) => {
-      const template = asRecord(raw)
-      return {
-        name: readString(template?.name) ?? '',
-        title: readString(template?.title) ?? '',
-        uriTemplate: readString(template?.uriTemplate ?? template?.uri_template) ?? '',
-        description: readString(template?.description) ?? '',
-      }
-    }).filter((template) => template.name || template.uriTemplate)
-    : []
-
-  return {
-    name,
-    authStatus: readString(record.authStatus ?? record.auth_status) ?? 'unsupported',
-    tools,
-    resources,
-    resourceTemplates,
-  }
-}
-
 export async function listDirectoryPlugins(cwds?: string[]): Promise<DirectoryPluginSummary[]> {
   const params: Record<string, unknown> = {}
   if (cwds && cwds.length > 0) params.cwds = cwds
diff --git a/src/api/codexGatewayDirectory.ts b/src/api/codexGatewayDirectory.ts
new file mode 100644
index 000000000..3bc47e683
--- /dev/null
+++ b/src/api/codexGatewayDirectory.ts
@@ -0,0 +1,185 @@
+import type {
+  DirectoryAppInfo,
+  DirectoryMcpServerStatus,
+  DirectoryPluginAppSummary,
+  DirectoryPluginSkillSummary,
+  DirectoryPluginSummary,
+} from './codexGateway'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+function readBoolean(value: unknown): boolean | null {
+  return typeof value === 'boolean' ? value : null
+}
+
+function readStringArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string' && item.length > 0) : []
+}
+
+export function normalizeDirectoryPluginApp(value: unknown): DirectoryPluginAppSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const id = readString(record.id)
+  const name = readString(record.name)
+  if (!id || !name) return null
+  return {
+    id,
+    name,
+    description: readString(record.description) ?? '',
+    installUrl: readString(record.installUrl ?? record.install_url) ?? '',
+    needsAuth: readBoolean(record.needsAuth ?? record.needs_auth) ?? false,
+  }
+}
+
+export function normalizeDirectoryPluginSkill(value: unknown): DirectoryPluginSkillSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const name = readString(record.name)
+  const path = readString(record.path)
+  if (!name || !path) return null
+  const iface = asRecord(record.interface)
+  return {
+    name,
+    path,
+    description: readString(record.description) ?? '',
+    enabled: readBoolean(record.enabled) ?? true,
+    displayName: readString(iface?.displayName ?? iface?.display_name) ?? name,
+    shortDescription: readString(record.shortDescription ?? record.short_description) ?? '',
+  }
+}
+
+export function normalizeDirectoryPluginSummary(
+  value: unknown,
+  marketplace: { name?: string; displayName?: string; path?: string | null } = {},
+): DirectoryPluginSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const id = readString(record.id)
+  const name = readString(record.name)
+  if (!id || !name) return null
+  const iface = asRecord(record.interface)
+  const source = asRecord(record.source)
+  const sourceType = readString(source?.type) ?? ''
+  const sourcePath = readString(source?.path)
+  const sourceUrl = readString(source?.url) ?? ''
+  const remoteMarketplaceName = sourceType === 'remote' ? marketplace.name ?? null : null
+  const marketplacePath = marketplace.path ?? (sourceType === 'local' ? sourcePath : null)
+  const displayName = readString(iface?.displayName ?? iface?.display_name) ?? name
+  const shortDescription = readString(iface?.shortDescription ?? iface?.short_description)
+  const longDescription = readString(iface?.longDescription ?? iface?.long_description) ?? ''
+
+  return {
+    id,
+    name,
+    displayName,
+    description: shortDescription ?? longDescription,
+    longDescription,
+    developerName: readString(iface?.developerName ?? iface?.developer_name) ?? '',
+    category: readString(iface?.category) ?? '',
+    marketplaceName: marketplace.name ?? '',
+    marketplaceDisplayName: marketplace.displayName ?? marketplace.name ?? '',
+    marketplacePath,
+    remoteMarketplaceName,
+    sourceType,
+    sourceUrl,
+    installed: readBoolean(record.installed) ?? false,
+    enabled: readBoolean(record.enabled) ?? true,
+    installPolicy: readString(record.installPolicy ?? record.install_policy) ?? '',
+    authPolicy: readString(record.authPolicy ?? record.auth_policy) ?? '',
+    logoUrl: readString(iface?.logoUrl ?? iface?.logo_url) ?? '',
+    logoPath: readString(iface?.logo) ?? '',
+    composerIconUrl: readString(iface?.composerIconUrl ?? iface?.composer_icon_url) ?? '',
+    composerIconPath: readString(iface?.composerIcon ?? iface?.composer_icon) ?? '',
+    brandColor: readString(iface?.brandColor ?? iface?.brand_color) ?? '',
+    capabilities: readStringArray(iface?.capabilities),
+    defaultPrompt: readStringArray(iface?.defaultPrompt ?? iface?.default_prompt),
+    screenshotUrls: readStringArray(iface?.screenshotUrls ?? iface?.screenshot_urls),
+    screenshots: readStringArray(iface?.screenshots),
+    websiteUrl: readString(iface?.websiteUrl ?? iface?.website_url) ?? '',
+    privacyPolicyUrl: readString(iface?.privacyPolicyUrl ?? iface?.privacy_policy_url) ?? '',
+    termsOfServiceUrl: readString(iface?.termsOfServiceUrl ?? iface?.terms_of_service_url) ?? '',
+  }
+}
+
+export function normalizeDirectoryApp(value: unknown, catalogRank = 0): DirectoryAppInfo | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const id = readString(record.id)
+  const name = readString(record.name)
+  if (!id || !name) return null
+  const branding = asRecord(record.branding)
+  const metadata = asRecord(record.appMetadata ?? record.app_metadata)
+  return {
+    id,
+    name,
+    description: readString(record.description) ?? readString(metadata?.seoDescription ?? metadata?.seo_description) ?? '',
+    logoUrl: readString(record.logoUrl ?? record.logo_url) ?? '',
+    logoUrlDark: readString(record.logoUrlDark ?? record.logo_url_dark) ?? '',
+    distributionChannel: readString(record.distributionChannel ?? record.distribution_channel) ?? '',
+    installUrl: readString(record.installUrl ?? record.install_url) ?? '',
+    isAccessible: readBoolean(record.isAccessible ?? record.is_accessible) ?? false,
+    isEnabled: readBoolean(record.isEnabled ?? record.is_enabled) ?? true,
+    pluginDisplayNames: readStringArray(record.pluginDisplayNames ?? record.plugin_display_names),
+    category: readString(branding?.category) ?? '',
+    developer: readString(branding?.developer) ?? readString(metadata?.developer) ?? '',
+    website: readString(branding?.website) ?? '',
+    privacyPolicy: readString(branding?.privacyPolicy ?? branding?.privacy_policy) ?? '',
+    termsOfService: readString(branding?.termsOfService ?? branding?.terms_of_service) ?? '',
+    catalogRank,
+  }
+}
+
+export function normalizeDirectoryMcpServer(value: unknown): DirectoryMcpServerStatus | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const name = readString(record.name)
+  if (!name) return null
+  const toolsRecord = asRecord(record.tools) ?? {}
+  const tools = Object.entries(toolsRecord).map(([fallbackName, raw]) => {
+    const tool = asRecord(raw)
+    return {
+      name: readString(tool?.name) ?? fallbackName,
+      title: readString(tool?.title) ?? '',
+      description: readString(tool?.description) ?? '',
+    }
+  })
+  const resources = Array.isArray(record.resources)
+    ? record.resources.map((raw) => {
+      const resource = asRecord(raw)
+      return {
+        name: readString(resource?.name) ?? '',
+        title: readString(resource?.title) ?? '',
+        uri: readString(resource?.uri) ?? '',
+        description: readString(resource?.description) ?? '',
+      }
+    }).filter((resource) => resource.name || resource.uri)
+    : []
+  const rawResourceTemplates = record.resourceTemplates ?? record.resource_templates
+  const resourceTemplates = Array.isArray(rawResourceTemplates)
+    ? rawResourceTemplates.map((raw: unknown) => {
+      const template = asRecord(raw)
+      return {
+        name: readString(template?.name) ?? '',
+        title: readString(template?.title) ?? '',
+        uriTemplate: readString(template?.uriTemplate ?? template?.uri_template) ?? '',
+        description: readString(template?.description) ?? '',
+      }
+    }).filter((template) => template.name || template.uriTemplate)
+    : []
+
+  return {
+    name,
+    authStatus: readString(record.authStatus ?? record.auth_status) ?? 'unsupported',
+    tools,
+    resources,
+    resourceTemplates,
+  }
+}
diff --git a/src/api/codexGatewayReview.ts b/src/api/codexGatewayReview.ts
new file mode 100644
index 000000000..553dca99e
--- /dev/null
+++ b/src/api/codexGatewayReview.ts
@@ -0,0 +1,226 @@
+import type { ThreadReadResponse } from './appServerDtos'
+import type {
+  UiReviewFile,
+  UiReviewFinding,
+  UiReviewHunk,
+  UiReviewLine,
+  UiReviewResult,
+  UiReviewSnapshot,
+} from '../types/codex'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+function readNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function readBoolean(value: unknown): boolean | null {
+  return typeof value === 'boolean' ? value : null
+}
+
+function normalizeReviewLine(value: unknown): UiReviewLine | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const key = readString(record.key)
+  const text = typeof record.text === 'string' ? record.text : ''
+  const kind = readString(record.kind)
+  if (!key || !kind) return null
+  if (kind !== 'meta' && kind !== 'hunk' && kind !== 'add' && kind !== 'remove' && kind !== 'context') {
+    return null
+  }
+
+  return {
+    key,
+    kind,
+    text,
+    oldLine: readNumber(record.oldLine),
+    newLine: readNumber(record.newLine),
+  }
+}
+
+function normalizeReviewHunk(value: unknown): UiReviewHunk | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const id = readString(record.id)
+  const header = typeof record.header === 'string' ? record.header : ''
+  const patch = typeof record.patch === 'string' ? record.patch : ''
+  if (!id) return null
+
+  return {
+    id,
+    header,
+    patch,
+    addedLineCount: readNumber(record.addedLineCount) ?? 0,
+    removedLineCount: readNumber(record.removedLineCount) ?? 0,
+    oldStart: readNumber(record.oldStart),
+    oldLineCount: readNumber(record.oldLineCount) ?? 0,
+    newStart: readNumber(record.newStart),
+    newLineCount: readNumber(record.newLineCount) ?? 0,
+    lines: Array.isArray(record.lines)
+      ? record.lines
+        .map((entry) => normalizeReviewLine(entry))
+        .filter((entry): entry is UiReviewLine => entry !== null)
+      : [],
+  }
+}
+
+function normalizeReviewFile(value: unknown): UiReviewFile | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const id = readString(record.id)
+  const path = readString(record.path)
+  const absolutePath = readString(record.absolutePath)
+  const operation = readString(record.operation)
+  if (!id || !path || !absolutePath || !operation) return null
+  if (operation !== 'add' && operation !== 'delete' && operation !== 'update' && operation !== 'rename') {
+    return null
+  }
+
+  return {
+    id,
+    path,
+    absolutePath,
+    previousPath: readString(record.previousPath),
+    previousAbsolutePath: readString(record.previousAbsolutePath),
+    operation,
+    addedLineCount: readNumber(record.addedLineCount) ?? 0,
+    removedLineCount: readNumber(record.removedLineCount) ?? 0,
+    diff: typeof record.diff === 'string' ? record.diff : '',
+    hunks: Array.isArray(record.hunks)
+      ? record.hunks
+        .map((entry) => normalizeReviewHunk(entry))
+        .filter((entry): entry is UiReviewHunk => entry !== null)
+      : [],
+  }
+}
+
+export function normalizeReviewSnapshot(payload: unknown): UiReviewSnapshot {
+  const envelope = asRecord(payload)
+  const data = asRecord(envelope?.data)
+  const summaryRecord = asRecord(data?.summary)
+  const scope = readString(data?.scope) === 'baseBranch' ? 'baseBranch' : 'workspace'
+  const workspaceView = readString(data?.workspaceView) === 'staged' ? 'staged' : 'unstaged'
+
+  return {
+    cwd: readString(data?.cwd) ?? '',
+    gitRoot: readString(data?.gitRoot),
+    isGitRepo: readBoolean(data?.isGitRepo) ?? false,
+    scope,
+    workspaceView,
+    baseBranch: readString(data?.baseBranch),
+    baseBranchOptions: Array.isArray(data?.baseBranchOptions)
+      ? data.baseBranchOptions
+        .map((entry) => readString(entry))
+        .filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)
+      : [],
+    headBranch: readString(data?.headBranch),
+    mergeBaseSha: readString(data?.mergeBaseSha),
+    generatedAtIso: readString(data?.generatedAtIso) ?? '',
+    summary: {
+      fileCount: readNumber(summaryRecord?.fileCount) ?? 0,
+      addedLineCount: readNumber(summaryRecord?.addedLineCount) ?? 0,
+      removedLineCount: readNumber(summaryRecord?.removedLineCount) ?? 0,
+    },
+    files: Array.isArray(data?.files)
+      ? data.files
+        .map((entry) => normalizeReviewFile(entry))
+        .filter((entry): entry is UiReviewFile => entry !== null)
+      : [],
+  }
+}
+
+function parseReviewLocation(value: string): {
+  absolutePath: string | null
+  startLine: number | null
+  endLine: number | null
+} {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return { absolutePath: null, startLine: null, endLine: null }
+  }
+
+  const match = trimmed.match(/^(.*?):(\d+)-(\d+)$/u)
+  if (!match) {
+    return { absolutePath: trimmed || null, startLine: null, endLine: null }
+  }
+
+  return {
+    absolutePath: match[1]?.trim() || null,
+    startLine: Number(match[2]),
+    endLine: Number(match[3]),
+  }
+}
+
+export function parseReviewText(reviewText: string): UiReviewResult {
+  const normalized = reviewText.replace(/\r\n/g, '\n').trim()
+  if (!normalized) {
+    return { reviewText: '', summary: '', findings: [] }
+  }
+
+  const markerIndex = normalized.search(/\n(?:Full review comments|Review comment):\n/iu)
+  const summary = markerIndex >= 0 ? normalized.slice(0, markerIndex).trim() : normalized
+  const findingsSection = markerIndex >= 0 ? normalized.slice(markerIndex).trim() : ''
+  const findings: UiReviewFinding[] = []
+
+  if (findingsSection) {
+    const body = findingsSection
+      .replace(/^(?:Full review comments|Review comment):\n*/iu, '')
+      .trim()
+    const matches = body.matchAll(/^- (.+?) — (.+)\n?((?:  .*(?:\n|$))*)/gmu)
+    let index = 0
+    for (const match of matches) {
+      const title = match[1]?.trim() ?? ''
+      const location = parseReviewLocation(match[2] ?? '')
+      const block = (match[0] ?? '').trim()
+      const findingBody = (match[3] ?? '')
+        .split('\n')
+        .map((line) => line.replace(/^  /u, ''))
+        .join('\n')
+        .trim()
+
+      findings.push({
+        id: `finding:${index}`,
+        title: title || `Finding ${index + 1}`,
+        body: findingBody,
+        path: location.absolutePath ? location.absolutePath.split('/').filter(Boolean).slice(-1)[0] ?? location.absolutePath : null,
+        absolutePath: location.absolutePath,
+        startLine: location.startLine,
+        endLine: location.endLine,
+        rawText: block,
+      })
+      index += 1
+    }
+  }
+
+  return {
+    reviewText: normalized,
+    summary,
+    findings,
+  }
+}
+
+export function readLatestReviewItem(payload: ThreadReadResponse, type: 'enteredReviewMode' | 'exitedReviewMode'): string | null {
+  const turns = Array.isArray(payload.thread.turns) ? payload.thread.turns : []
+  for (let turnIndex = turns.length - 1; turnIndex >= 0; turnIndex -= 1) {
+    const turn = turns[turnIndex]
+    const items = Array.isArray(turn?.items) ? turn.items : []
+    for (let itemIndex = items.length - 1; itemIndex >= 0; itemIndex -= 1) {
+      const item = items[itemIndex]
+      if (item?.type !== type) continue
+      const review = typeof item.review === 'string' ? item.review.trim() : ''
+      if (review) return review
+    }
+  }
+  return null
+}
diff --git a/src/api/codexGatewayTerminal.ts b/src/api/codexGatewayTerminal.ts
new file mode 100644
index 000000000..183a8dd16
--- /dev/null
+++ b/src/api/codexGatewayTerminal.ts
@@ -0,0 +1,106 @@
+import { extractErrorMessage } from './codexErrors'
+import type { ThreadTerminalAttachInput, ThreadTerminalQuickCommand, ThreadTerminalSession } from './codexGateway'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+function readBoolean(value: unknown): boolean | null {
+  return typeof value === 'boolean' ? value : null
+}
+
+function normalizeThreadTerminalSession(value: unknown): ThreadTerminalSession | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const id = readString(record.id)
+  const threadId = readString(record.threadId)
+  const cwd = readString(record.cwd)
+  const shell = readString(record.shell)
+  if (!id || !threadId || !cwd || !shell) return null
+  return {
+    id,
+    threadId,
+    cwd,
+    shell,
+    buffer: typeof record.buffer === 'string' ? record.buffer : '',
+    truncated: readBoolean(record.truncated) ?? false,
+  }
+}
+
+async function fetchTerminalJson(path: string, init?: RequestInit): Promise<unknown> {
+  const response = await fetch(path, init)
+  const payload = await response.json().catch(() => null)
+  if (!response.ok) {
+    throw new Error(extractErrorMessage(payload, `Terminal request failed with HTTP ${response.status}`))
+  }
+  return payload
+}
+
+export async function attachThreadTerminal(input: ThreadTerminalAttachInput): Promise<ThreadTerminalSession> {
+  const payload = await fetchTerminalJson('/codex-api/thread-terminal/attach', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  })
+  const session = normalizeThreadTerminalSession(asRecord(payload)?.session)
+  if (!session) throw new Error('Terminal attach response was malformed')
+  return session
+}
+
+export async function getThreadTerminalStatus(): Promise<{ available: boolean, reason: string | null }> {
+  const payload = await fetchTerminalJson('/codex-api/thread-terminal/status')
+  const record = asRecord(payload)
+  return {
+    available: readBoolean(record?.available) ?? false,
+    reason: readString(record?.reason) || null,
+  }
+}
+
+export async function getThreadTerminalQuickCommands(cwd: string): Promise<ThreadTerminalQuickCommand[]> {
+  const payload = await fetchTerminalJson(`/codex-api/thread-terminal/quick-commands?cwd=${encodeURIComponent(cwd)}`)
+  const payloadRecord = asRecord(payload)
+  const rows: unknown[] = Array.isArray(payloadRecord?.commands) ? payloadRecord.commands : []
+  return rows.flatMap((row: unknown) => {
+    const record = asRecord(row)
+    const label = readString(record?.label)
+    const value = readString(record?.value)
+    const source = readString(record?.source)
+    if (!label || !value || (source !== 'package' && source !== 'script' && source !== 'make')) return []
+    return [{ label, value, source }]
+  })
+}
+
+export async function sendThreadTerminalInput(sessionId: string, data: string): Promise<void> {
+  await fetchTerminalJson('/codex-api/thread-terminal/input', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sessionId, data }),
+  })
+}
+
+export async function resizeThreadTerminal(sessionId: string, cols: number, rows: number): Promise<void> {
+  await fetchTerminalJson('/codex-api/thread-terminal/resize', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sessionId, cols, rows }),
+  })
+}
+
+export async function closeThreadTerminal(sessionId: string): Promise<void> {
+  await fetchTerminalJson('/codex-api/thread-terminal/close', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sessionId }),
+  })
+}
+
+export async function getThreadTerminalSnapshot(threadId: string): Promise<ThreadTerminalSession | null> {
+  const payload = await fetchTerminalJson(`/codex-api/thread-terminal-snapshot?threadId=${encodeURIComponent(threadId)}`)
+  return normalizeThreadTerminalSession(asRecord(payload)?.session)
+}
diff --git a/src/appExportMarkdown.ts b/src/appExportMarkdown.ts
new file mode 100644
index 000000000..6dff78385
--- /dev/null
+++ b/src/appExportMarkdown.ts
@@ -0,0 +1,73 @@
+import type { UiMessage, UiThread } from './types/codex'
+
+export function buildThreadMarkdown(thread: UiThread | null, messages: UiMessage[]): string {
+  const lines: string[] = []
+  const threadTitle = thread?.title?.trim() || 'Untitled thread'
+  lines.push(`# ${escapeMarkdownText(threadTitle)}`)
+  lines.push('')
+  lines.push(`- Exported: ${new Date().toISOString()}`)
+  lines.push(`- Thread ID: ${thread?.id ?? ''}`)
+  lines.push('')
+  lines.push('---')
+  lines.push('')
+
+  for (const message of messages) {
+    const roleLabel = message.role ? message.role.toUpperCase() : 'MESSAGE'
+    lines.push(`## ${roleLabel}`)
+    lines.push('')
+
+    const normalizedText = message.text.trim()
+    if (normalizedText) {
+      lines.push(normalizedText)
+      lines.push('')
+    }
+
+    if (message.commandExecution) {
+      lines.push('```text')
+      lines.push(`command: ${message.commandExecution.command}`)
+      lines.push(`status: ${message.commandExecution.status}`)
+      if (message.commandExecution.cwd) {
+        lines.push(`cwd: ${message.commandExecution.cwd}`)
+      }
+      if (message.commandExecution.exitCode !== null) {
+        lines.push(`exitCode: ${message.commandExecution.exitCode}`)
+      }
+      lines.push(message.commandExecution.aggregatedOutput || '(no output)')
+      lines.push('```')
+      lines.push('')
+    }
+
+    if (message.fileAttachments && message.fileAttachments.length > 0) {
+      lines.push('Attachments:')
+      for (const attachment of message.fileAttachments) {
+        lines.push(`- ${attachment.path}`)
+      }
+      lines.push('')
+    }
+
+    if (message.images && message.images.length > 0) {
+      lines.push('Images:')
+      for (const imageUrl of message.images) {
+        lines.push(`- ${imageUrl}`)
+      }
+      lines.push('')
+    }
+  }
+
+  return `${lines.join('\n').trimEnd()}\n`
+}
+
+export function buildExportFileName(thread: UiThread | null): string {
+  const threadTitle = thread?.title?.trim() || 'chat'
+  const sanitized = threadTitle
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+  const base = sanitized || 'chat'
+  const stamp = new Date().toISOString().replace(/[:.]/g, '-')
+  return `${base}-${stamp}.md`
+}
+
+export function escapeMarkdownText(value: string): string {
+  return value.replace(/([\\`*_{}\[\]()#+\-.!])/g, '\\$1')
+}
diff --git a/src/appSettingsSupport.ts b/src/appSettingsSupport.ts
new file mode 100644
index 000000000..0f073631a
--- /dev/null
+++ b/src/appSettingsSupport.ts
@@ -0,0 +1,336 @@
+export type ChatWidthMode = 'standard' | 'wide' | 'extra-wide'
+
+const IN_PROGRESS_SEND_MODE_KEY = 'codex-web-local.in-progress-send-mode.v1'
+const DARK_MODE_KEY = 'codex-web-local.dark-mode.v1'
+const CHAT_WIDTH_KEY = 'codex-web-local.chat-width.v1'
+
+export type TerminalHeaderQuickCommand = {
+  label: string
+  value: string
+  custom?: boolean
+  usageCount: number
+  lastUsedAt: number
+  sourceIndex?: number
+}
+
+export type ThreadTerminalPanelExposed = {
+  runQuickCommand: (command: string, custom?: boolean) => Promise<void>
+}
+
+export type DirectoryTryItemPayload = {
+  kind: 'app' | 'plugin' | 'skill' | 'composio'
+  name: string
+  displayName: string
+  skillPath?: string
+  prompt?: string
+  attachedSkills?: Array<{ name: string; path: string }>
+}
+
+type ChatWidthPreset = {
+  label: string
+  columnMax: string
+  cardMax: string
+}
+
+export const CHAT_WIDTH_PRESETS: Record<ChatWidthMode, ChatWidthPreset> = {
+  standard: {
+    label: 'Standard',
+    columnMax: '45rem',
+    cardMax: '76ch',
+  },
+  wide: {
+    label: 'Wide',
+    columnMax: '72rem',
+    cardMax: '88ch',
+  },
+  'extra-wide': {
+    label: 'Extra wide',
+    columnMax: '96rem',
+    cardMax: '96ch',
+  },
+}
+
+const WHISPER_LANGUAGES: Record<string, string> = {
+  en: 'english',
+  zh: 'chinese',
+  de: 'german',
+  es: 'spanish',
+  ru: 'russian',
+  ko: 'korean',
+  fr: 'french',
+  ja: 'japanese',
+  pt: 'portuguese',
+  tr: 'turkish',
+  pl: 'polish',
+  ca: 'catalan',
+  nl: 'dutch',
+  ar: 'arabic',
+  sv: 'swedish',
+  it: 'italian',
+  id: 'indonesian',
+  hi: 'hindi',
+  fi: 'finnish',
+  vi: 'vietnamese',
+  he: 'hebrew',
+  uk: 'ukrainian',
+  el: 'greek',
+  ms: 'malay',
+  cs: 'czech',
+  ro: 'romanian',
+  da: 'danish',
+  hu: 'hungarian',
+  ta: 'tamil',
+  no: 'norwegian',
+  th: 'thai',
+  ur: 'urdu',
+  hr: 'croatian',
+  bg: 'bulgarian',
+  lt: 'lithuanian',
+  la: 'latin',
+  mi: 'maori',
+  ml: 'malayalam',
+  cy: 'welsh',
+  sk: 'slovak',
+  te: 'telugu',
+  fa: 'persian',
+  lv: 'latvian',
+  bn: 'bengali',
+  sr: 'serbian',
+  az: 'azerbaijani',
+  sl: 'slovenian',
+  kn: 'kannada',
+  et: 'estonian',
+  mk: 'macedonian',
+  br: 'breton',
+  eu: 'basque',
+  is: 'icelandic',
+  hy: 'armenian',
+  ne: 'nepali',
+  mn: 'mongolian',
+  bs: 'bosnian',
+  kk: 'kazakh',
+  sq: 'albanian',
+  sw: 'swahili',
+  gl: 'galician',
+  mr: 'marathi',
+  pa: 'punjabi',
+  si: 'sinhala',
+  km: 'khmer',
+  sn: 'shona',
+  yo: 'yoruba',
+  so: 'somali',
+  af: 'afrikaans',
+  oc: 'occitan',
+  ka: 'georgian',
+  be: 'belarusian',
+  tg: 'tajik',
+  sd: 'sindhi',
+  gu: 'gujarati',
+  am: 'amharic',
+  yi: 'yiddish',
+  lo: 'lao',
+  uz: 'uzbek',
+  fo: 'faroese',
+  ht: 'haitian creole',
+  ps: 'pashto',
+  tk: 'turkmen',
+  nn: 'nynorsk',
+  mt: 'maltese',
+  sa: 'sanskrit',
+  lb: 'luxembourgish',
+  my: 'myanmar',
+  bo: 'tibetan',
+  tl: 'tagalog',
+  mg: 'malagasy',
+  as: 'assamese',
+  tt: 'tatar',
+  haw: 'hawaiian',
+  ln: 'lingala',
+  ha: 'hausa',
+  ba: 'bashkir',
+  jw: 'javanese',
+  su: 'sundanese',
+  yue: 'cantonese',
+}
+
+export function loadBoolPref(key: string, fallback: boolean): boolean {
+  if (typeof window === 'undefined') return fallback
+  const v = window.localStorage.getItem(key)
+  if (v === null) return fallback
+  return v === '1'
+}
+
+export function loadDarkModePref(): 'system' | 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'system'
+  const v = window.localStorage.getItem(DARK_MODE_KEY)
+  if (v === 'light' || v === 'dark') return v
+  return 'system'
+}
+
+export function loadInProgressSendModePref(): 'steer' | 'queue' {
+  if (typeof window === 'undefined') return 'steer'
+  const v = window.localStorage.getItem(IN_PROGRESS_SEND_MODE_KEY)
+  if (v === 'steer' || v === 'queue') return v
+  return 'queue'
+}
+
+export function loadChatWidthPref(): ChatWidthMode {
+  if (typeof window === 'undefined') return 'standard'
+  const value = window.localStorage.getItem(CHAT_WIDTH_KEY)
+  return value === 'standard' || value === 'wide' || value === 'extra-wide' ? value : 'standard'
+}
+
+export function loadDictationLanguagePref(): string {
+  if (typeof window === 'undefined') return 'auto'
+  const value = window.localStorage.getItem('codex-web-local.dictation-language.v1')?.trim() || 'auto'
+  const normalized = normalizeToWhisperLanguage(value)
+  return normalized || 'auto'
+}
+
+export function buildDictationLanguageOptions(translate: (value: string) => string, currentLanguage: string, preferredLanguages: readonly string[] = []): Array<{ value: string; label: string }> {
+  const options: Array<{ value: string; label: string }> = [{ value: 'auto', label: translate('Auto-detect') }]
+  const seen = new Set<string>(['auto'])
+  function formatLanguageLabel(value: string): string {
+    const languageName = WHISPER_LANGUAGES[value] || value
+    const title = languageName.charAt(0).toUpperCase() + languageName.slice(1)
+    return `${title} (${value})`
+  }
+
+  for (const raw of preferredLanguages) {
+    const value = normalizeToWhisperLanguage(raw)
+    if (!value || seen.has(value)) continue
+    seen.add(value)
+    options.push({
+      value,
+      label: `Preferred: ${formatLanguageLabel(value)}`,
+    })
+  }
+
+  for (const value of Object.keys(WHISPER_LANGUAGES)) {
+    if (seen.has(value)) continue
+    seen.add(value)
+    options.push({
+      value,
+      label: formatLanguageLabel(value),
+    })
+  }
+
+  const current = currentLanguage.trim()
+  if (current && !seen.has(current)) {
+    options.push({
+      value: current,
+      label: formatLanguageLabel(current),
+    })
+  }
+
+  return options
+}
+
+export function normalizeToWhisperLanguage(raw: string): string {
+  const value = raw.trim().toLowerCase()
+  if (!value || value === 'auto') return ''
+  if (value in WHISPER_LANGUAGES) return value
+  const base = value.split('-')[0] ?? value
+  if (base in WHISPER_LANGUAGES) return base
+  return ''
+}
+
+export function applyDarkMode(mode: 'system' | 'light' | 'dark'): void {
+  const root = document.documentElement
+  if (mode === 'dark') {
+    root.classList.add('dark')
+  } else if (mode === 'light') {
+    root.classList.remove('dark')
+  } else {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    root.classList.toggle('dark', prefersDark)
+  }
+}
+
+
+const TERMINAL_QUICK_COMMAND_STORAGE_KEY = 'codex-web-local.terminal-quick-commands.v1'
+
+export function buildTerminalHeaderQuickCommands(projectCommands: Array<{ label: string; value: string }>, storedCommands: TerminalHeaderQuickCommand[]): TerminalHeaderQuickCommand[] {
+  const storedByValue = new Map(storedCommands.map((command) => [command.value, command]))
+  const combined: TerminalHeaderQuickCommand[] = [
+    ...projectCommands.map((command, index) => ({
+      label: command.label,
+      value: command.value,
+      usageCount: 0,
+      lastUsedAt: 0,
+      ...(storedByValue.get(command.value) ?? {}),
+      custom: false,
+      sourceIndex: index,
+    })),
+  ]
+  return combined.sort(compareTerminalQuickCommands)
+}
+
+export function normalizeTerminalQuickCommandValue(value: string): string {
+  return value.trim().replace(/\s+/g, ' ')
+}
+
+export function compareTerminalQuickCommands(first: TerminalHeaderQuickCommand, second: TerminalHeaderQuickCommand): number {
+  if (second.usageCount !== first.usageCount) return second.usageCount - first.usageCount
+  if (second.lastUsedAt !== first.lastUsedAt) return second.lastUsedAt - first.lastUsedAt
+  const firstSource = typeof first.sourceIndex === 'number' ? first.sourceIndex : Number.MAX_SAFE_INTEGER
+  const secondSource = typeof second.sourceIndex === 'number' ? second.sourceIndex : Number.MAX_SAFE_INTEGER
+  return firstSource - secondSource
+}
+
+export function loadTerminalStoredQuickCommands(): TerminalHeaderQuickCommand[] {
+  if (typeof window === 'undefined') return []
+  try {
+    const raw = window.localStorage.getItem(TERMINAL_QUICK_COMMAND_STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    const seen = new Set<string>()
+    const commands: TerminalHeaderQuickCommand[] = []
+    for (const row of parsed) {
+      const record = row !== null && typeof row === 'object' && !Array.isArray(row)
+        ? row as Record<string, unknown>
+        : null
+      const value = normalizeTerminalQuickCommandValue(readTerminalString(record?.value))
+      if (!value || seen.has(value)) continue
+      seen.add(value)
+      commands.push({
+        label: readTerminalString(record?.label) || value,
+        value,
+        custom: record?.custom !== false,
+        usageCount: readTerminalPositiveInteger(record?.usageCount),
+        lastUsedAt: readTerminalPositiveInteger(record?.lastUsedAt),
+      })
+    }
+    return commands
+  } catch {
+    return []
+  }
+}
+
+export function saveTerminalStoredQuickCommands(commands: TerminalHeaderQuickCommand[]): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(
+    TERMINAL_QUICK_COMMAND_STORAGE_KEY,
+    JSON.stringify(commands.map((command) => ({
+      label: command.label,
+      value: command.value,
+      custom: command.custom === true,
+      usageCount: command.usageCount,
+      lastUsedAt: command.lastUsedAt,
+    }))),
+  )
+}
+
+function readTerminalString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+function readTerminalPositiveInteger(value: unknown): number {
+  if (typeof value === 'number' && Number.isFinite(value)) return Math.max(0, Math.trunc(value))
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return Math.max(0, Math.trunc(parsed))
+  }
+  return 0
+}
diff --git a/src/components/content/ThreadConversation.scoped.css b/src/components/content/ThreadConversation.scoped.css
new file mode 100644
index 000000000..a2ecf874c
--- /dev/null
+++ b/src/components/content/ThreadConversation.scoped.css
@@ -0,0 +1,1149 @@
+@reference "tailwindcss";
+
+.conversation-root {
+  @apply relative h-full min-h-0 min-w-0 p-0 flex flex-col overflow-y-hidden overflow-x-hidden bg-transparent border-none rounded-none;
+}
+
+.conversation-loading {
+  @apply m-0 px-6 text-sm text-slate-500;
+}
+
+.conversation-empty {
+  @apply m-0 px-6 text-sm text-slate-500;
+}
+
+.conversation-list {
+  @apply h-full min-h-0 list-none m-0 px-2 sm:px-6 py-0 overflow-y-auto overflow-x-visible flex flex-col gap-2 sm:gap-3;
+}
+
+.conversation-load-more {
+  @apply flex justify-center py-3 m-0;
+}
+
+.load-more-button {
+  @apply px-4 py-1.5 text-xs rounded-full border border-slate-300 dark:border-slate-600
+         text-slate-500 dark:text-slate-400 bg-transparent
+         hover:bg-slate-100 dark:hover:bg-slate-800
+         disabled:opacity-40 disabled:cursor-not-allowed
+         transition-colors cursor-pointer;
+}
+
+.conversation-item {
+  @apply m-0 w-full min-w-0 flex;
+}
+
+.conversation-item-request {
+  @apply justify-center;
+}
+
+.conversation-item-overlay {
+  @apply justify-center;
+}
+
+.message-row {
+  @apply relative w-full min-w-0 max-w-[min(var(--chat-column-max,45rem),100%)] mx-auto flex;
+}
+
+.message-row[data-role='user'] {
+  @apply justify-end;
+}
+
+.message-row[data-role='assistant'],
+.message-row[data-role='system'] {
+  @apply justify-start;
+}
+
+.conversation-bottom-anchor {
+  @apply h-px;
+}
+
+.jump-to-latest-button {
+  @apply absolute left-1/2 bottom-4 z-20 inline-flex h-11 w-11 -translate-x-1/2 items-center justify-center rounded-full border border-slate-300 bg-white/96 text-slate-700 shadow-lg shadow-slate-900/10 transition hover:-translate-x-1/2 hover:-translate-y-0.5 hover:bg-white hover:text-slate-900;
+}
+
+.jump-to-latest-icon {
+  transform: rotate(180deg);
+}
+
+.message-stack {
+  @apply flex flex-col w-full min-w-0;
+}
+
+.request-card {
+  @apply w-full max-w-[min(var(--chat-column-max,45rem),100%)] rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 flex flex-col gap-2;
+}
+
+.request-title {
+  @apply m-0 text-sm leading-5 font-semibold text-amber-900;
+}
+
+.request-meta {
+  @apply m-0 text-xs leading-4 text-amber-700;
+}
+
+.request-reason {
+  @apply m-0 text-sm leading-5 text-amber-900 whitespace-pre-wrap break-words;
+  overflow-wrap: anywhere;
+}
+
+.request-actions {
+  @apply flex flex-wrap gap-2;
+}
+
+.request-button {
+  @apply rounded-md border border-amber-300 bg-white px-3 py-1.5 text-xs text-amber-900 hover:bg-amber-100 transition;
+}
+
+.request-button-primary {
+  @apply border-amber-500 bg-amber-500 text-white hover:bg-amber-600;
+}
+
+.request-user-input {
+  @apply flex flex-col gap-3;
+}
+
+.request-question {
+  @apply flex flex-col gap-1;
+}
+
+.request-question-title {
+  @apply m-0 text-sm leading-5 font-medium text-amber-900;
+}
+
+.request-question-text {
+  @apply m-0 text-xs leading-4 text-amber-800;
+}
+
+.request-question-option-description {
+  @apply m-0 text-xs leading-4 text-amber-700;
+}
+
+.request-link {
+  @apply inline-flex w-fit rounded-md border border-amber-300 bg-white px-3 py-1.5 text-xs text-amber-900 hover:bg-amber-100 transition;
+}
+
+.request-select {
+  @apply h-8 rounded-md border border-amber-300 bg-white px-2 text-sm text-amber-900;
+}
+
+.request-input {
+  @apply h-8 rounded-md border border-amber-300 bg-white px-2 text-sm text-amber-900 placeholder:text-amber-500;
+}
+
+.request-checkbox-list {
+  @apply flex flex-col gap-1.5;
+}
+
+.request-checkbox-row {
+  @apply flex items-center gap-2 text-sm text-amber-900;
+}
+
+.live-overlay-inline {
+  @apply w-full max-w-[min(var(--chat-column-max,45rem),100%)] px-0 py-1 flex flex-col gap-1;
+}
+
+.live-overlay-label {
+  @apply m-0 text-sm leading-5 font-medium text-zinc-600;
+}
+
+.live-overlay-reasoning {
+  @apply m-0 text-sm leading-5 text-zinc-500 whitespace-pre-wrap break-words;
+  display: block;
+  max-height: calc(1.25rem * 5);
+  overflow: auto;
+  overflow-wrap: anywhere;
+  scrollbar-width: none;
+  mask-image: linear-gradient(to top, black 75%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to top, black 75%, transparent 100%);
+}
+
+.live-overlay-reasoning::-webkit-scrollbar {
+  display: none;
+}
+
+.live-overlay-error {
+  @apply m-0 text-sm leading-5 text-rose-600 whitespace-pre-wrap;
+}
+
+.message-body {
+  @apply flex flex-col min-w-0 max-w-full;
+  width: fit-content;
+}
+
+.message-body[data-role='user'] {
+  @apply ml-auto items-end;
+  align-self: flex-end;
+}
+
+.message-toolbar {
+  @apply mt-1 self-start flex items-center gap-1 opacity-[0.01] transition-opacity duration-200;
+}
+
+.message-row:hover .message-toolbar {
+  @apply opacity-100;
+}
+
+.message-copy-button {
+  @apply inline-flex items-center gap-0.5 rounded-full border border-slate-200 bg-white/90 px-1.25 py-0.5 text-[9px] font-medium leading-none text-slate-500 transition hover:border-slate-300 hover:bg-white hover:text-slate-900;
+}
+
+.message-fork-button {
+  @apply inline-flex items-center gap-0.5 px-0.5 py-0 text-[9px] font-medium leading-none text-slate-500 transition hover:text-slate-900;
+}
+
+
+.message-copy-button[data-copied='true'] {
+  @apply border-emerald-200 bg-emerald-50 text-emerald-700;
+}
+
+.message-edit-button {
+  @apply inline-flex items-center gap-0.5 px-0.5 py-0 text-[9px] font-medium leading-none text-amber-600/70 transition hover:text-amber-700;
+}
+
+.message-fork-icon,
+.message-copy-icon,
+.message-edit-icon {
+  @apply text-[10px];
+}
+
+.message-fork-label,
+.message-copy-label,
+.message-edit-label {
+  @apply leading-none;
+}
+
+.message-image-list {
+  @apply list-none m-0 mb-2 p-0 flex flex-wrap gap-2;
+}
+
+.message-image-list[data-role='user'] {
+  @apply ml-auto justify-end;
+}
+
+.message-generated-image-list {
+  @apply gap-3;
+}
+
+.message-image-item {
+  @apply m-0;
+}
+
+.message-image-button {
+  @apply block rounded-xl overflow-hidden border border-slate-300 bg-white p-0 transition hover:border-slate-400;
+}
+
+.message-image-preview {
+  @apply block w-16 h-16 object-cover;
+}
+
+.message-generated-image-preview {
+  @apply w-auto h-auto max-w-[min(560px,85vw)] max-h-[min(460px,62vh)] object-contain bg-white;
+}
+
+.message-file-attachments {
+  @apply mb-2 flex flex-wrap gap-1.5;
+}
+
+.message-skill-attachments {
+  @apply mb-2 flex flex-wrap justify-end gap-1.5;
+}
+
+.message-file-chip {
+  @apply inline-flex items-center gap-1 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-0.5 text-xs text-zinc-700;
+}
+
+.message-skill-chip {
+  @apply inline-flex max-w-full items-center gap-1.5 rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs text-emerald-800 no-underline transition hover:border-emerald-300 hover:bg-emerald-100 hover:text-emerald-900;
+}
+
+.message-skill-chip-prefix {
+  @apply shrink-0 font-medium text-emerald-700;
+}
+
+.message-skill-chip-name {
+  @apply min-w-0 max-w-48 truncate font-mono;
+}
+
+.message-file-chip-icon {
+  @apply text-[10px] leading-none;
+}
+
+.message-file-chip-name {
+  @apply truncate max-w-48 font-mono;
+}
+
+.message-card {
+  @apply max-w-[min(var(--chat-card-max,76ch),100%)] px-0 py-0 bg-transparent border-none rounded-none;
+}
+
+.message-text-flow {
+  @apply flex flex-col gap-2;
+}
+
+.plan-card {
+  @apply flex max-w-[min(var(--chat-card-max,76ch),100%)] flex-col gap-3 rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-slate-900;
+}
+
+.plan-card-header {
+  @apply flex items-center justify-between gap-3;
+}
+
+.plan-card-title {
+  @apply m-0 text-sm font-semibold leading-5 text-sky-900;
+}
+
+.plan-card-badge {
+  @apply inline-flex items-center rounded-full bg-sky-200 px-2 py-0.5 text-[11px] font-medium leading-4 text-sky-900;
+}
+
+.plan-card-explanation {
+  @apply text-slate-700;
+}
+
+.plan-card-markdown {
+  @apply flex flex-col gap-2;
+}
+
+.plan-card-markdown :deep(.message-text),
+.plan-card-markdown :deep(.message-heading),
+.plan-card-markdown :deep(.message-blockquote),
+.plan-card-markdown :deep(.message-list),
+.plan-card-markdown :deep(.message-table-wrap),
+.plan-card-markdown :deep(.message-code-block),
+.plan-card-markdown :deep(.message-divider) {
+  @apply m-0;
+}
+
+.plan-card-markdown :deep(.message-text) {
+  @apply text-sm leading-relaxed whitespace-pre-wrap text-slate-800;
+}
+
+.plan-card-markdown :deep(.message-heading) {
+  @apply text-slate-900 tracking-tight;
+}
+
+.plan-card-markdown :deep(.message-heading-h1) {
+  @apply text-2xl font-semibold leading-tight;
+}
+
+.plan-card-markdown :deep(.message-heading-h2) {
+  @apply text-xl font-semibold leading-tight;
+}
+
+.plan-card-markdown :deep(.message-heading-h3) {
+  @apply text-lg font-semibold leading-snug;
+}
+
+.plan-card-markdown :deep(.message-heading-h4) {
+  @apply text-base font-semibold leading-snug;
+}
+
+.plan-card-markdown :deep(.message-heading-h5) {
+  @apply text-sm font-semibold leading-snug uppercase tracking-[0.02em];
+}
+
+.plan-card-markdown :deep(.message-heading-h6) {
+  @apply text-xs font-semibold leading-snug uppercase tracking-[0.04em] text-slate-600;
+}
+
+.plan-card-markdown :deep(.message-blockquote) {
+  @apply border-l-4 border-slate-300 pl-4 py-1 text-sm leading-relaxed whitespace-pre-wrap text-slate-700 bg-slate-50/70 rounded-r-lg;
+}
+
+.plan-card-markdown :deep(.message-list) {
+  @apply pl-5 text-sm leading-relaxed text-slate-800 flex flex-col gap-1.5;
+}
+
+.plan-card-markdown :deep(.message-list-unordered) {
+  @apply list-disc;
+}
+
+.plan-card-markdown :deep(.message-list-ordered) {
+  @apply list-decimal;
+}
+
+.plan-card-markdown :deep(.message-list-item) {
+  @apply pl-1;
+}
+
+.plan-card-markdown :deep(.message-list-item-text) {
+  @apply whitespace-pre-wrap;
+}
+
+.plan-card-markdown :deep(.message-list-item-paragraph + .message-list-item-paragraph) {
+  @apply mt-2;
+}
+
+.plan-card-markdown :deep(.message-task-list) {
+  @apply list-none pl-0;
+}
+
+.plan-card-markdown :deep(.message-task-item) {
+  @apply flex items-start gap-2;
+}
+
+.plan-card-markdown :deep(.message-task-checkbox) {
+  @apply mt-0.5 text-sm leading-none text-slate-500 select-none;
+}
+
+.plan-card-markdown :deep(.message-code-block) {
+  @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-950/95 text-slate-100;
+}
+
+.plan-card-markdown :deep(.message-code-language) {
+  @apply border-b border-slate-800 bg-slate-900/90 px-3 py-2 text-[11px] font-medium uppercase tracking-[0.08em] text-slate-400;
+}
+
+.plan-card-markdown :deep(.message-code-pre) {
+  @apply m-0 overflow-x-auto px-3 py-3 text-[13px] leading-6;
+}
+
+.plan-card-markdown :deep(.message-inline-code) {
+  @apply rounded-md bg-slate-200/80 px-1.5 py-0.5 font-mono text-[0.9em] text-slate-900;
+}
+
+.plan-card-markdown :deep(.message-file-link) {
+  @apply text-sky-700 underline decoration-sky-300 underline-offset-2;
+}
+
+.plan-card-markdown :deep(.message-table) {
+  @apply bg-white/90;
+}
+
+.plan-step-list {
+  @apply m-0 flex list-none flex-col gap-2 p-0;
+}
+
+.plan-step-item {
+  @apply flex items-start gap-2 rounded-xl border border-white/70 bg-white/80 px-3 py-2 text-sm leading-relaxed text-slate-800;
+}
+
+.plan-step-item[data-status='completed'] {
+  @apply border-emerald-200 bg-emerald-50/80;
+}
+
+.plan-step-item[data-status='inProgress'] {
+  @apply border-amber-200 bg-amber-50/80;
+}
+
+.plan-step-status {
+  @apply mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold text-slate-700;
+}
+
+.plan-step-status[data-status='completed'] {
+  @apply bg-emerald-200 text-emerald-900;
+}
+
+.plan-step-status[data-status='inProgress'] {
+  @apply bg-amber-200 text-amber-900;
+}
+
+.plan-step-text {
+  @apply min-w-0 flex-1;
+}
+
+.plan-card-actions {
+  @apply mt-3 flex justify-end;
+}
+
+.plan-card-implement-button {
+  @apply inline-flex items-center rounded-full border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-800 transition hover:border-slate-400 hover:bg-slate-50;
+}
+
+.message-text {
+  @apply m-0 text-sm leading-relaxed whitespace-pre-wrap break-words text-slate-800;
+  overflow-wrap: anywhere;
+}
+
+.message-heading {
+  @apply m-0 text-slate-900 tracking-tight;
+}
+
+.message-heading-h1 {
+  @apply text-2xl font-semibold leading-tight;
+}
+
+.message-heading-h2 {
+  @apply text-xl font-semibold leading-tight;
+}
+
+.message-heading-h3 {
+  @apply text-lg font-semibold leading-snug;
+}
+
+.message-heading-h4 {
+  @apply text-base font-semibold leading-snug;
+}
+
+.message-heading-h5 {
+  @apply text-sm font-semibold leading-snug uppercase tracking-[0.02em];
+}
+
+.message-heading-h6 {
+  @apply text-xs font-semibold leading-snug uppercase tracking-[0.04em] text-slate-600;
+}
+
+.message-blockquote {
+  @apply m-0 border-l-4 border-slate-300 pl-4 py-1 text-sm leading-relaxed whitespace-pre-wrap break-words text-slate-700 bg-slate-50/70 rounded-r-lg;
+  overflow-wrap: anywhere;
+}
+
+.message-list {
+  @apply m-0 pl-5 text-sm leading-relaxed text-slate-800 flex flex-col gap-1.5;
+}
+
+.message-list-unordered {
+  @apply list-disc;
+}
+
+.message-list-ordered {
+  @apply list-decimal;
+}
+
+.message-list-item {
+  @apply pl-1;
+}
+
+.message-list-item-content {
+  @apply flex flex-col gap-1.5;
+}
+
+.message-list-item-text {
+  @apply whitespace-pre-wrap break-words;
+  overflow-wrap: anywhere;
+}
+
+.message-list-item-paragraph + .message-list-item-paragraph {
+  @apply mt-2;
+}
+
+.message-task-list {
+  @apply list-none pl-0;
+}
+
+.message-task-item {
+  @apply flex items-start gap-2;
+}
+
+.message-task-checkbox {
+  @apply mt-0.5 text-sm leading-none text-slate-500 select-none;
+}
+
+.message-table-wrap {
+  @apply w-full overflow-x-auto;
+}
+
+.message-table {
+  @apply min-w-full border-separate border-spacing-0 overflow-hidden rounded-xl border border-slate-200 bg-white text-sm text-slate-800;
+}
+
+.message-table-head-cell,
+.message-table-cell {
+  @apply border-b border-l border-slate-200 px-3 py-2 align-top whitespace-pre-wrap break-words;
+  overflow-wrap: anywhere;
+}
+
+.message-table-head-cell:first-child,
+.message-table-cell:first-child {
+  @apply border-l-0;
+}
+
+.message-table-head-cell {
+  @apply bg-slate-100 font-semibold text-slate-900;
+}
+
+.message-table-body-row:last-child .message-table-cell {
+  @apply border-b-0;
+}
+
+.message-bold-text {
+  @apply font-semibold text-slate-900;
+}
+
+.message-italic-text {
+  @apply italic;
+}
+
+.message-strikethrough-text {
+  @apply line-through text-slate-500;
+}
+
+.message-markdown-image {
+  @apply w-auto h-auto max-w-[min(560px,85vw)] max-h-[min(460px,62vh)] object-contain bg-white;
+}
+
+.message-inline-code {
+  @apply rounded-md border border-slate-200 bg-slate-100/60 px-1.5 py-0.5 text-[0.875em] leading-[1.4] text-slate-900 font-mono;
+}
+
+.message-code-block {
+  @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-950 text-slate-100;
+}
+
+.message-code-language {
+  @apply border-b border-slate-800 px-3 py-2 text-[11px] font-mono uppercase tracking-[0.08em] text-slate-400;
+}
+
+.message-code-pre {
+  @apply m-0 overflow-x-auto px-3 py-3 text-[13px] leading-relaxed font-mono whitespace-pre;
+}
+
+.message-code-pre :deep(.hljs) {
+  @apply block bg-transparent p-0 text-inherit;
+}
+
+.message-file-link {
+  @apply text-sm leading-relaxed text-[#0969da] no-underline hover:text-[#1f6feb] hover:underline underline-offset-2;
+}
+
+.file-link-context-menu {
+  @apply fixed z-50 min-w-36 rounded-lg border border-zinc-200 bg-white p-1 shadow-xl;
+}
+
+.file-link-context-menu-item {
+  @apply block w-full rounded-md px-2 py-1.5 text-left text-xs text-zinc-700 hover:bg-zinc-100;
+}
+
+.message-divider {
+  @apply m-0 border-0 h-px bg-slate-300/80;
+}
+
+.message-stack[data-role='user'] {
+  @apply items-end;
+}
+
+.message-stack[data-role='assistant'],
+.message-stack[data-role='system'] {
+  @apply items-start;
+}
+
+.message-card[data-role='user'] {
+  @apply rounded-2xl bg-slate-200 px-4 py-3 max-w-[min(560px,100%)];
+  width: fit-content;
+  margin-left: auto;
+  align-self: flex-end;
+}
+
+.automation-message-label {
+  @apply mb-2 flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500;
+}
+
+.automation-message-label code {
+  @apply rounded-full bg-white/70 px-2 py-0.5 text-[10px] normal-case tracking-normal text-slate-600;
+}
+
+.message-card[data-role='assistant'],
+.message-card[data-role='system'] {
+  @apply px-0 py-0 bg-transparent border-none rounded-none;
+}
+
+:global(.dark) .message-file-chip {
+  @apply border-zinc-700 bg-zinc-900 text-zinc-200;
+}
+
+:global(.dark) .message-skill-chip {
+  @apply border-emerald-800/70 bg-emerald-950/50 text-emerald-100;
+}
+
+:global(.dark) .message-skill-chip-prefix {
+  @apply text-emerald-300;
+}
+
+.conversation-item[data-message-type='worked'] .message-stack,
+.conversation-item[data-message-type='worked'] .message-body,
+.conversation-item[data-message-type='worked'] .message-card {
+  @apply w-full max-w-full;
+}
+
+.worked-separator-wrap {
+  @apply w-full flex flex-col gap-0;
+}
+
+.worked-separator {
+  @apply w-full flex items-center gap-3 bg-transparent border-none cursor-pointer p-0;
+}
+
+.worked-chevron {
+  @apply text-[9px] text-zinc-400 transition-transform duration-200 flex-shrink-0;
+}
+
+.worked-chevron-open {
+  transform: rotate(90deg);
+}
+
+.worked-separator-line {
+  @apply h-px bg-zinc-300/80 flex-1;
+}
+
+.worked-separator-text {
+  @apply m-0 text-sm leading-relaxed font-normal text-slate-800;
+}
+
+.worked-details {
+  @apply flex flex-col gap-1.5 pt-2;
+}
+
+.worked-cmd-item {
+  @apply flex flex-col;
+}
+
+.image-modal-backdrop {
+  @apply fixed inset-0 z-50 bg-black/40 p-6 flex items-center justify-center;
+}
+
+.image-modal-content {
+  @apply relative max-w-[min(92vw,1100px)] max-h-[92vh];
+}
+
+.image-modal-close {
+  @apply absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-white/90 text-slate-900 border border-slate-300 flex items-center justify-center;
+}
+
+.image-modal-image {
+  @apply block max-w-full max-h-[90vh] rounded-2xl shadow-2xl bg-white;
+}
+
+.icon-svg {
+  @apply w-5 h-5;
+}
+
+.cmd-row {
+  @apply w-full flex items-center gap-2 px-3 py-1.5 rounded-lg border border-zinc-200 bg-zinc-50 cursor-pointer transition text-left hover:bg-zinc-100;
+}
+
+.cmd-row.cmd-row-group {
+  @apply border-dashed border-zinc-300 bg-zinc-100/90 text-zinc-600;
+}
+
+.cmd-row.cmd-compact {
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.625rem;
+}
+
+.cmd-row.cmd-compact .cmd-chevron {
+  font-size: 9px;
+}
+
+.cmd-row.cmd-compact .cmd-label {
+  font-size: 0.75rem;
+}
+
+.cmd-row.cmd-compact .cmd-status {
+  max-width: 4.5rem;
+  font-size: 0.75rem;
+}
+
+.cmd-row.cmd-expanded {
+  @apply rounded-b-none;
+}
+
+.cmd-chevron {
+  @apply text-[10px] text-zinc-400 transition-transform duration-150 flex-shrink-0;
+}
+
+.cmd-chevron-open {
+  transform: rotate(90deg);
+}
+
+.cmd-label {
+  @apply flex-1 min-w-0 truncate text-xs font-mono text-zinc-700;
+}
+
+.cmd-group-label {
+  @apply flex-1 min-w-0 truncate text-xs font-medium text-zinc-600;
+}
+
+.cmd-status {
+  @apply max-w-24 truncate text-right text-[11px] font-medium flex-shrink-0;
+}
+
+.cmd-status-running .cmd-status {
+  @apply text-amber-600;
+}
+
+.cmd-status-ok .cmd-status {
+  @apply text-emerald-600;
+}
+
+.cmd-status-error .cmd-status {
+  @apply text-rose-600;
+}
+
+.cmd-output-wrap {
+  @apply rounded-b-lg bg-zinc-900;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms ease-out, border-color 300ms ease-out;
+  border: 1px solid transparent;
+  border-top: none;
+}
+
+.cmd-output-wrap.cmd-output-visible {
+  grid-template-rows: 1fr;
+  border-color: #e4e4e7;
+}
+
+.cmd-group-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 220ms ease-out;
+}
+
+.cmd-group-wrap.cmd-group-visible {
+  grid-template-rows: 1fr;
+}
+
+.cmd-group-inner {
+  @apply mb-1 flex min-h-0 flex-col gap-1 overflow-hidden pl-2;
+}
+
+.cmd-output-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.cmd-output {
+  @apply m-0 px-3 py-2 text-xs font-mono text-zinc-200 whitespace-pre-wrap break-words max-h-60 overflow-y-auto;
+}
+
+.cmd-output.cmd-output-condensed {
+  max-height: 9rem;
+}
+
+.file-change-summary-block {
+  @apply mt-3 flex flex-col gap-0;
+}
+
+.file-change-summary-block-inline {
+  @apply mt-4;
+}
+
+.file-change-summary-row {
+  @apply border-dashed;
+}
+
+.file-change-summary-label {
+  @apply flex-1 min-w-0 truncate text-xs font-medium text-zinc-700;
+}
+
+.file-change-summary-status {
+  @apply inline-flex max-w-28 items-center justify-end gap-1.5 text-right text-[11px] font-semibold text-zinc-500 flex-shrink-0;
+}
+
+.file-change-panel-inner {
+  @apply mb-1 min-h-0 overflow-hidden pl-2;
+}
+
+.file-change-list {
+  @apply m-0 flex list-none flex-col gap-0.5 rounded-xl border border-zinc-200 bg-white/80 p-1.5;
+}
+
+.file-change-item {
+  @apply flex flex-wrap items-center gap-1.5 rounded-lg px-2 py-1 text-sm text-zinc-700;
+}
+
+.file-change-badge {
+  @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.08em];
+}
+
+.file-change-badge[data-operation='add'] {
+  @apply bg-emerald-50 text-emerald-700;
+}
+
+.file-change-badge[data-operation='update'] {
+  @apply bg-sky-50 text-sky-700;
+}
+
+.file-change-badge[data-operation='delete'] {
+  @apply bg-rose-50 text-rose-700;
+}
+
+.file-change-badge[data-operation='move'] {
+  @apply bg-amber-50 text-amber-700;
+}
+
+.file-change-path {
+  @apply min-w-0 break-all font-mono text-[13px];
+}
+
+.file-change-path-button {
+  @apply min-w-0 border-0 bg-transparent p-0 text-left font-mono text-[13px] text-[#0969da] hover:text-[#1f6feb] hover:underline underline-offset-2;
+}
+
+.file-change-arrow {
+  @apply text-zinc-400;
+}
+
+.file-change-delta {
+  @apply ml-auto inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-2 py-1 text-[11px] font-semibold text-zinc-600;
+}
+
+.file-change-signed-count {
+  @apply inline-flex items-center whitespace-nowrap;
+}
+
+.file-change-signed-count[data-tone='add'] {
+  @apply text-emerald-600;
+}
+
+.file-change-signed-count[data-tone='remove'] {
+  @apply text-rose-600;
+}
+
+.diff-viewer-backdrop {
+  @apply fixed inset-0 z-50 bg-black/45 p-3 sm:p-6 flex items-center justify-center;
+}
+
+.diff-viewer-shell {
+  @apply relative grid h-[min(88vh,920px)] w-[min(96vw,1320px)] grid-cols-1 overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-2xl lg:grid-cols-[320px_minmax(0,1fr)];
+}
+
+.diff-viewer-sidebar {
+  @apply flex min-h-0 flex-col border-b border-zinc-200 bg-zinc-50 lg:border-b-0 lg:border-r;
+}
+
+.diff-viewer-sidebar-header {
+  @apply flex items-center justify-between gap-3 border-b border-zinc-200 px-4 py-4;
+}
+
+.diff-viewer-sidebar-title {
+  @apply m-0 text-sm font-semibold text-zinc-900;
+}
+
+.diff-viewer-sidebar-count {
+  @apply m-0 text-xs font-medium text-zinc-500;
+}
+
+.diff-viewer-sidebar-list {
+  @apply flex min-h-0 flex-col gap-2 overflow-y-auto p-3;
+}
+
+.diff-viewer-file-button {
+  @apply flex w-full flex-col items-start gap-2 rounded-2xl border border-transparent bg-transparent px-3 py-3 text-left transition hover:border-zinc-200 hover:bg-white;
+}
+
+.diff-viewer-file-button[data-active='true'] {
+  @apply border-sky-200 bg-white shadow-sm;
+}
+
+.diff-viewer-file-label {
+  @apply break-all font-mono text-[13px] text-zinc-700;
+}
+
+.diff-viewer-file-delta {
+  @apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-1 text-[11px] font-medium text-zinc-600;
+}
+
+.diff-viewer-main {
+  @apply flex min-h-0 flex-col bg-white;
+}
+
+.diff-viewer-toolbar {
+  @apply flex items-start justify-between gap-4 border-b border-zinc-200 px-5 py-4;
+}
+
+.diff-viewer-toolbar-actions {
+  @apply flex items-center gap-2 shrink-0;
+}
+
+.diff-viewer-title-wrap {
+  @apply min-w-0;
+}
+
+.diff-viewer-title {
+  @apply m-0 break-all text-base font-semibold text-zinc-900;
+}
+
+.diff-viewer-subtitle {
+  @apply mt-1 mb-0 text-sm text-zinc-500;
+}
+
+.diff-viewer-close {
+  @apply static shrink-0 border-zinc-200 bg-zinc-100 text-zinc-700;
+}
+
+.diff-viewer-mobile-files-button {
+  @apply inline-flex items-center rounded-full border border-zinc-200 bg-zinc-100 px-3 py-1.5 text-xs font-medium text-zinc-700;
+}
+
+.diff-viewer-empty {
+  @apply flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center;
+}
+
+.diff-viewer-empty-title {
+  @apply m-0 text-base font-semibold text-zinc-900;
+}
+
+.diff-viewer-empty-text {
+  @apply mt-2 max-w-2xl text-sm leading-relaxed text-zinc-500;
+}
+
+.diff-viewer-panel {
+  @apply flex min-h-0 flex-1 flex-col;
+}
+
+.diff-viewer-meta {
+  @apply border-b border-zinc-200 bg-zinc-50 px-5 py-2;
+}
+
+.diff-viewer-language {
+  @apply inline-flex items-center rounded-full bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-zinc-700;
+}
+
+.diff-viewer-lines {
+  @apply min-h-0 flex-1 overflow-auto bg-zinc-950;
+}
+
+.diff-viewer-line {
+  display: grid;
+  grid-template-columns: 4rem 4rem 2rem minmax(0, 1fr);
+  align-items: stretch;
+  min-width: fit-content;
+}
+
+.diff-viewer-line-number {
+  @apply border-r border-zinc-800 px-3 py-1.5 text-right font-mono text-xs text-zinc-500 select-none;
+}
+
+.diff-viewer-line-marker {
+  @apply border-r border-zinc-800 px-2 py-1.5 text-center font-mono text-xs text-zinc-500 select-none;
+}
+
+.diff-viewer-line-code {
+  @apply block whitespace-pre px-3 py-1.5 font-mono text-[12px] leading-5 text-zinc-100;
+}
+
+.diff-viewer-line[data-kind='meta'] {
+  @apply bg-zinc-900;
+}
+
+.diff-viewer-line[data-kind='meta'] .diff-viewer-line-code,
+.diff-viewer-line[data-kind='meta'] .diff-viewer-line-marker {
+  @apply text-sky-300;
+}
+
+.diff-viewer-line[data-kind='hunk'] {
+  @apply bg-sky-950/40;
+}
+
+.diff-viewer-line[data-kind='hunk'] .diff-viewer-line-code,
+.diff-viewer-line[data-kind='hunk'] .diff-viewer-line-marker {
+  @apply text-sky-300;
+}
+
+.diff-viewer-line[data-kind='add'] {
+  background: rgba(20, 83, 45, 0.38);
+}
+
+.diff-viewer-line[data-kind='add'] .diff-viewer-line-marker,
+.diff-viewer-line[data-kind='add'] .diff-viewer-line-code {
+  @apply text-emerald-200;
+}
+
+.diff-viewer-line[data-kind='remove'] {
+  background: rgba(127, 29, 29, 0.32);
+}
+
+.diff-viewer-line[data-kind='remove'] .diff-viewer-line-marker,
+.diff-viewer-line[data-kind='remove'] .diff-viewer-line-code {
+  @apply text-rose-200;
+}
+
+.diff-viewer-line[data-kind='context'] {
+  @apply bg-zinc-950;
+}
+
+.diff-viewer-line[data-kind='context'] .diff-viewer-line-code {
+  @apply text-zinc-100;
+}
+
+.diff-viewer-mobile-sheet-backdrop {
+  @apply absolute inset-0 z-20 bg-black/35 flex items-end;
+}
+
+.diff-viewer-mobile-sheet {
+  @apply w-full max-h-[70vh] rounded-t-3xl bg-white shadow-2xl border-t border-zinc-200 flex flex-col overflow-hidden;
+}
+
+.diff-viewer-mobile-sheet-handle {
+  @apply mx-auto mt-3 h-1.5 w-12 rounded-full bg-zinc-300;
+}
+
+.diff-viewer-mobile-sheet-header {
+  @apply flex items-center justify-between gap-3 px-4 pt-3 pb-2 border-b border-zinc-200;
+}
+
+.diff-viewer-mobile-sheet-list {
+  @apply flex min-h-0 flex-col gap-2 overflow-y-auto px-3 py-3;
+}
+
+.diff-viewer-sheet-enter-active,
+.diff-viewer-sheet-leave-active {
+  @apply transition-opacity duration-200;
+}
+
+.diff-viewer-sheet-enter-active .diff-viewer-mobile-sheet,
+.diff-viewer-sheet-leave-active .diff-viewer-mobile-sheet {
+  transition: transform 200ms ease;
+}
+
+.diff-viewer-sheet-enter-from,
+.diff-viewer-sheet-leave-to {
+  @apply opacity-0;
+}
+
+.diff-viewer-sheet-enter-from .diff-viewer-mobile-sheet,
+.diff-viewer-sheet-leave-to .diff-viewer-mobile-sheet {
+  transform: translateY(100%);
+}
+
+@media (max-width: 767px) {
+  .diff-viewer-backdrop {
+    @apply p-0 items-stretch;
+  }
+
+  .diff-viewer-shell {
+    @apply h-[100dvh] w-screen rounded-none border-0 shadow-none;
+  }
+
+  .diff-viewer-main {
+    @apply min-w-0;
+  }
+
+  .diff-viewer-toolbar {
+    @apply sticky top-0 z-10 bg-white px-3 py-3;
+  }
+
+  .diff-viewer-title {
+    @apply text-sm leading-5;
+  }
+
+  .diff-viewer-subtitle {
+    @apply text-xs;
+  }
+
+  .diff-viewer-meta {
+    @apply px-3 py-2;
+  }
+
+  .diff-viewer-language {
+    @apply text-[10px];
+  }
+
+  .diff-viewer-line {
+    grid-template-columns: 2.75rem 2.75rem 1.5rem minmax(0, 1fr);
+  }
+
+  .diff-viewer-line-number {
+    @apply px-1.5 py-1 text-[10px];
+  }
+
+  .diff-viewer-line-marker {
+    @apply px-1 py-1 text-[10px];
+  }
+
+  .diff-viewer-line-code {
+    @apply px-2 py-1 text-[11px] leading-5;
+  }
+}
diff --git a/src/components/content/ThreadConversation.template.html b/src/components/content/ThreadConversation.template.html
new file mode 100644
index 000000000..1bf0405df
--- /dev/null
+++ b/src/components/content/ThreadConversation.template.html
@@ -0,0 +1,866 @@
+  <section class="conversation-root" @contextmenu.capture="onConversationContextMenu">
+    <p v-if="isLoading" class="conversation-loading">Loading messages...</p>
+
+    <p
+      v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
+      class="conversation-empty"
+    >
+      No messages in this thread yet.
+    </p>
+
+    <ul v-else ref="conversationListRef" class="conversation-list" @scroll="onConversationScroll">
+      <li v-if="hasMoreAbove" class="conversation-load-more">
+        <button
+          type="button"
+          class="load-more-button"
+          :disabled="isLoadingMore || isLoadingPersistedAbove"
+          @click="loadMoreAbove"
+        >
+          {{ isLoadingMore || isLoadingPersistedAbove ? 'Loading…' : 'Load earlier messages' }}
+        </button>
+      </li>
+      <template v-for="message in visibleMessages" :key="message.id">
+      <li
+        v-if="!hiddenGroupedCommandIds.has(message.id) && !hiddenFileChangeMessageIds.has(message.id)"
+        class="conversation-item"
+        :data-role="message.role"
+        :data-message-type="message.messageType || ''"
+      >
+        <div v-if="isCommandMessage(message)" class="message-row" data-role="system">
+          <div class="message-stack" data-role="system">
+            <button
+              v-if="getGroupedCommandsForLatest(message).length > 0"
+              type="button"
+              class="cmd-row cmd-row-group cmd-compact"
+              :class="[commandStatusClass(message), { 'cmd-expanded': isCommandGroupExpanded(message) }]"
+              @click="toggleCommandGroup(message)"
+            >
+              <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandGroupExpanded(message) }">▶</span>
+              <span class="cmd-group-label">{{ commandGroupSummaryLabel(message) }}</span>
+              <span class="cmd-status">{{ commandGroupSummaryStatus(message) }}</span>
+            </button>
+            <div
+              v-if="getGroupedCommandsForLatest(message).length > 0"
+              class="cmd-group-wrap"
+              :class="{ 'cmd-group-visible': isCommandGroupExpanded(message) }"
+            >
+              <div class="cmd-group-inner">
+                <div
+                  v-for="cmd in getCommandBlockForLatest(message)"
+                  :key="`grouped-cmd-${cmd.id}`"
+                  class="worked-cmd-item"
+                >
+                  <button
+                    type="button"
+                    class="cmd-row"
+                    :class="[
+                      commandStatusClass(cmd),
+                      {
+                        'cmd-expanded': isCommandExpanded(cmd),
+                        'cmd-compact': true,
+                      },
+                    ]"
+                    @click="toggleCommandExpand(cmd)"
+                  >
+                    <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
+                    <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
+                    <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
+                  </button>
+                  <div
+                    class="cmd-output-wrap"
+                    :class="{ 'cmd-output-visible': isCommandExpanded(cmd) }"
+                  >
+                    <div class="cmd-output-inner">
+                      <pre
+                        class="cmd-output"
+                        :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
+                        v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
+                      ></pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <template v-else>
+              <button
+                type="button"
+                class="cmd-row"
+                :class="[
+                  commandStatusClass(message),
+                  {
+                    'cmd-expanded': isCommandExpanded(message),
+                    'cmd-compact': isCommandCompact(message),
+                  },
+                ]"
+                @click="toggleCommandExpand(message)"
+              >
+                <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(message) }">▶</span>
+                <code class="cmd-label">{{ message.commandExecution?.command || '(command)' }}</code>
+                <span class="cmd-status">{{ commandStatusLabel(message) }}</span>
+              </button>
+              <div
+                class="cmd-output-wrap"
+                :class="{ 'cmd-output-visible': isCommandExpanded(message) }"
+              >
+                <div class="cmd-output-inner">
+                  <pre
+                    class="cmd-output"
+                    :class="{ 'cmd-output-condensed': isCommandOutputCondensed(message) }"
+                    v-text="message.commandExecution?.aggregatedOutput || '(no output)'"
+                  ></pre>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <div
+          v-else-if="isFileChangeMessage(message)"
+          class="message-row"
+          :data-role="message.role"
+          :data-message-type="message.messageType || ''"
+        >
+          <div class="message-stack" :data-role="message.role">
+            <article class="message-body" :data-role="message.role">
+              <section v-if="readStandaloneFileChangeSummary(message)" class="file-change-summary-block">
+                <button
+                  type="button"
+                  class="cmd-row cmd-row-group cmd-compact file-change-summary-row"
+                  :class="{ 'cmd-expanded': isFileChangeSummaryExpanded(message) }"
+                  @click="toggleFileChangeSummary(message)"
+                >
+                  <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isFileChangeSummaryExpanded(message) }">▶</span>
+                  <span class="file-change-summary-label">
+                    {{ fileChangeSummaryLabel(readStandaloneFileChangeSummary(message)) }}
+                  </span>
+                  <span class="file-change-summary-status">
+                    <span
+                      v-for="part in fileChangeSummaryStatusParts(readStandaloneFileChangeSummary(message))"
+                      :key="`summary-status:${message.id}:${part.tone}:${part.label}`"
+                      class="file-change-signed-count"
+                      :data-tone="part.tone"
+                    >
+                      {{ part.label }}
+                    </span>
+                  </span>
+                </button>
+                <div class="cmd-group-wrap" :class="{ 'cmd-group-visible': isFileChangeSummaryExpanded(message) }">
+                  <div class="file-change-panel-inner">
+                    <ul class="file-change-list">
+                      <li
+                        v-for="change in readStandaloneFileChangeSummary(message)?.changes ?? []"
+                        :key="`file-change:${message.id}:${change.path}:${change.movedToPath || ''}`"
+                        class="file-change-item"
+                      >
+                        <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
+                          {{ fileChangeOperationLabel(change) }}
+                        </span>
+                        <button
+                          type="button"
+                          class="file-change-path-button"
+                          :title="change.path"
+                          @click="openDiffViewer(readStandaloneFileChangeSummary(message), change)"
+                        >
+                          {{ displayFileChangePath(change.path) }}
+                        </button>
+                        <span v-if="change.movedToPath" class="file-change-arrow">→</span>
+                        <button
+                          v-if="change.movedToPath"
+                          type="button"
+                          class="file-change-path-button"
+                          :title="change.movedToPath"
+                          @click="openDiffViewer(readStandaloneFileChangeSummary(message), change)"
+                        >
+                          {{ displayFileChangePath(change.movedToPath) }}
+                        </button>
+                        <span v-if="change.addedLineCount > 0 || change.removedLineCount > 0" class="file-change-delta">
+                          <span
+                            v-for="part in fileChangeDeltaParts(change)"
+                            :key="`change-delta:${message.id}:${change.path}:${part.tone}:${part.label}`"
+                            class="file-change-signed-count"
+                            :data-tone="part.tone"
+                          >
+                            {{ part.label }}
+                          </span>
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+            </article>
+          </div>
+        </div>
+
+        <div v-else class="message-row" :data-role="message.role" :data-message-type="message.messageType || ''">
+          <div class="message-stack" :data-role="message.role">
+            <article class="message-body" :data-role="message.role">
+              <ul
+                v-if="message.images && message.images.length > 0"
+                class="message-image-list"
+                :class="{ 'message-generated-image-list': message.messageType === 'imageView' }"
+                :data-role="message.role"
+              >
+                <li v-for="imageUrl in message.images" :key="imageUrl" class="message-image-item">
+                  <button class="message-image-button" type="button" @click="openImageModal(imageUrl)">
+                    <img
+                      class="message-image-preview"
+                      :class="{ 'message-generated-image-preview': message.messageType === 'imageView' }"
+                      :src="imageUrl"
+                      :alt="message.messageType === 'imageView' ? 'Generated image' : 'Message image preview'"
+                      loading="lazy"
+                    />
+                  </button>
+                </li>
+              </ul>
+
+              <div v-if="message.fileAttachments && message.fileAttachments.length > 0" class="message-file-attachments">
+                <span v-for="att in message.fileAttachments" :key="`${message.id}:${att.path}`" class="message-file-chip">
+                  <span class="message-file-chip-icon">📄</span>
+                  <a
+                    class="message-file-link message-file-chip-name"
+                    :href="toBrowseUrl(att.path)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :title="att.path"
+                  >
+                    {{ att.label }}
+                  </a>
+                </span>
+              </div>
+
+              <div v-if="message.skills && message.skills.length > 0" class="message-skill-attachments">
+                <a
+                  v-for="skill in message.skills"
+                  :key="`${message.id}:${skill.path}`"
+                  class="message-skill-chip"
+                  :href="toBrowseUrl(skill.path)"
+                  :title="skill.path"
+                >
+                  <span class="message-skill-chip-prefix">Skill</span>
+                  <span class="message-skill-chip-name">{{ skill.name }}</span>
+                </a>
+              </div>
+
+              <article v-if="message.text.length > 0" class="message-card" :data-role="message.role">
+                <div v-if="message.isAutomationRun" class="automation-message-label">
+                  <span>Sent via automation</span>
+                  <code v-if="message.automationDisplayName">{{ message.automationDisplayName }}</code>
+                </div>
+                <div v-if="message.messageType === 'worked'" class="worked-separator-wrap" aria-live="polite">
+                  <button type="button" class="worked-separator" @click="toggleWorkedExpand(message)">
+                    <span class="worked-separator-line" aria-hidden="true" />
+                    <span class="worked-chevron" :class="{ 'worked-chevron-open': isWorkedExpanded(message) }">▶</span>
+                    <p class="worked-separator-text">{{ message.text }}</p>
+                    <span class="worked-separator-line" aria-hidden="true" />
+                  </button>
+                  <div v-if="isWorkedExpanded(message)" class="worked-details">
+                    <div
+                      v-for="cmd in getCommandsForWorked(messages, messages.indexOf(message))"
+                      :key="`worked-cmd-${cmd.id}`"
+                      class="worked-cmd-item"
+                    >
+                      <button
+                        type="button"
+                        class="cmd-row"
+                        :class="[
+                          commandStatusClass(cmd),
+                          {
+                            'cmd-expanded': isCommandExpanded(cmd),
+                            'cmd-compact': isCommandCompact(cmd),
+                          },
+                        ]"
+                        @click="toggleCommandExpand(cmd)"
+                      >
+                        <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
+                        <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
+                        <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
+                      </button>
+                      <div
+                        class="cmd-output-wrap"
+                        :class="{ 'cmd-output-visible': isCommandExpanded(cmd) }"
+                      >
+                        <div class="cmd-output-inner">
+                          <pre
+                            class="cmd-output"
+                            :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
+                            v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
+                          ></pre>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else-if="isPlanMessage(message)" class="plan-card" :data-streaming="message.messageType === 'plan.live'">
+                  <div class="plan-card-header">
+                    <p class="plan-card-title">Plan</p>
+                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">Updating</span>
+                  </div>
+                  <div
+                    v-if="readPlanExplanation(message)"
+                    class="plan-card-explanation plan-card-markdown"
+                    v-html="renderMarkdownBlocksAsHtml(readPlanExplanation(message))"
+                  />
+                  <ol v-if="readPlanSteps(message).length > 0" class="plan-step-list">
+                    <li
+                      v-for="(step, stepIndex) in readPlanSteps(message)"
+                      :key="`${message.id}:plan-step:${stepIndex}`"
+                      class="plan-step-item"
+                      :data-status="step.status"
+                    >
+                      <span class="plan-step-status" :data-status="step.status">{{ planStepStatusIcon(step.status) }}</span>
+                      <div class="plan-step-text plan-card-markdown" v-html="renderMarkdownBlocksAsHtml(step.step)" />
+                    </li>
+                  </ol>
+                  <div v-else class="plan-card-markdown" v-html="renderMarkdownBlocksAsHtml(message.text)" />
+                  <div v-if="showImplementPlanButton(message)" class="plan-card-actions">
+                    <button
+                      type="button"
+                      class="plan-card-implement-button"
+                      @click="implementPlan(message)"
+                    >
+                      Implement plan
+                    </button>
+                  </div>
+                </div>
+                <div
+                  v-else
+                  class="message-text-flow"
+                  v-memo="[message.id, message.text, props.cwd, highlightCacheVersion, markdownImageFailureVersion]"
+                >
+                  <template v-for="(block, blockIndex) in getMessageBlocks(message)" :key="`block-${blockIndex}`">
+                    <p v-if="block.kind === 'paragraph'" class="message-text">
+                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`seg-${blockIndex}-${segmentIndex}`">
+                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                        <a
+                          v-else-if="segment.kind === 'file'"
+                          class="message-file-link"
+                          :href="toBrowseUrl(segment.path)"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.path"
+                        >
+                          {{ segment.displayPath }}
+                        </a>
+                        <a
+                          v-else-if="segment.kind === 'url'"
+                          class="message-file-link"
+                          :href="segment.href"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.href"
+                        >
+                          {{ segment.value }}
+                        </a>
+                        <code v-else class="message-inline-code">{{ segment.value }}</code>
+                      </template>
+                    </p>
+                    <component
+                      :is="headingTag(block.level)"
+                      v-else-if="block.kind === 'heading'"
+                      class="message-heading"
+                      :class="headingClass(block.level)"
+                    >
+                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`heading-seg-${blockIndex}-${segmentIndex}`">
+                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                        <a
+                          v-else-if="segment.kind === 'file'"
+                          class="message-file-link"
+                          :href="toBrowseUrl(segment.path)"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.path"
+                        >
+                          {{ segment.displayPath }}
+                        </a>
+                        <a
+                          v-else-if="segment.kind === 'url'"
+                          class="message-file-link"
+                          :href="segment.href"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.href"
+                        >
+                          {{ segment.value }}
+                        </a>
+                        <code v-else class="message-inline-code">{{ segment.value }}</code>
+                      </template>
+                    </component>
+                    <blockquote v-else-if="block.kind === 'blockquote'" class="message-blockquote">
+                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`quote-seg-${blockIndex}-${segmentIndex}`">
+                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                        <a
+                          v-else-if="segment.kind === 'file'"
+                          class="message-file-link"
+                          :href="toBrowseUrl(segment.path)"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.path"
+                        >
+                          {{ segment.displayPath }}
+                        </a>
+                        <a
+                          v-else-if="segment.kind === 'url'"
+                          class="message-file-link"
+                          :href="segment.href"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          :title="segment.href"
+                        >
+                          {{ segment.value }}
+                        </a>
+                        <code v-else class="message-inline-code">{{ segment.value }}</code>
+                      </template>
+                    </blockquote>
+                    <ul v-else-if="block.kind === 'unorderedList'" class="message-list message-list-unordered">
+                      <li v-for="(item, itemIndex) in block.items" :key="`ul-${blockIndex}-${itemIndex}`" class="message-list-item">
+                        <div class="message-list-item-content" v-html="renderListItemContentAsHtml(item)" />
+                      </li>
+                    </ul>
+                    <ul v-else-if="block.kind === 'taskList'" class="message-list message-task-list">
+                      <li v-for="(item, itemIndex) in block.items" :key="`task-${blockIndex}-${itemIndex}`" class="message-task-item">
+                        <span class="message-task-checkbox" :data-checked="item.checked">{{ item.checked ? '☑' : '☐' }}</span>
+                        <div class="message-list-item-text">
+                          <template v-for="(segment, segmentIndex) in getInlineSegments(item.text)" :key="`task-seg-${blockIndex}-${itemIndex}-${segmentIndex}`">
+                            <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                            <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                            <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                            <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                            <a
+                              v-else-if="segment.kind === 'file'"
+                              class="message-file-link"
+                              :href="toBrowseUrl(segment.path)"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              :title="segment.path"
+                            >
+                              {{ segment.displayPath }}
+                            </a>
+                            <a
+                              v-else-if="segment.kind === 'url'"
+                              class="message-file-link"
+                              :href="segment.href"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              :title="segment.href"
+                            >
+                              {{ segment.value }}
+                            </a>
+                            <code v-else class="message-inline-code">{{ segment.value }}</code>
+                          </template>
+                        </div>
+                      </li>
+                    </ul>
+                    <ol
+                      v-else-if="block.kind === 'orderedList'"
+                      class="message-list message-list-ordered"
+                      :start="block.start"
+                    >
+                      <li v-for="(item, itemIndex) in block.items" :key="`ol-${blockIndex}-${itemIndex}`" class="message-list-item">
+                        <div class="message-list-item-content" v-html="renderListItemContentAsHtml(item)" />
+                      </li>
+                    </ol>
+                    <div v-else-if="block.kind === 'table'" class="message-table-wrap">
+                      <table class="message-table">
+                        <thead>
+                          <tr>
+                            <th
+                              v-for="(cell, cellIndex) in block.headers"
+                              :key="`th-${blockIndex}-${cellIndex}`"
+                              class="message-table-head-cell"
+                              :style="{ textAlign: block.alignments[cellIndex] ?? 'left' }"
+                            >
+                              <template v-for="(segment, segmentIndex) in getInlineSegments(cell)" :key="`th-seg-${blockIndex}-${cellIndex}-${segmentIndex}`">
+                                <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                                <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                                <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                                <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                                <a
+                                  v-else-if="segment.kind === 'file'"
+                                  class="message-file-link"
+                                  :href="toBrowseUrl(segment.path)"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  :title="segment.path"
+                                >
+                                  {{ segment.displayPath }}
+                                </a>
+                                <a
+                                  v-else-if="segment.kind === 'url'"
+                                  class="message-file-link"
+                                  :href="segment.href"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  :title="segment.href"
+                                >
+                                  {{ segment.value }}
+                                </a>
+                                <code v-else class="message-inline-code">{{ segment.value }}</code>
+                              </template>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody v-if="block.rows.length > 0">
+                          <tr v-for="(row, rowIndex) in block.rows" :key="`tr-${blockIndex}-${rowIndex}`" class="message-table-body-row">
+                            <td
+                              v-for="(cell, cellIndex) in row"
+                              :key="`td-${blockIndex}-${rowIndex}-${cellIndex}`"
+                              class="message-table-cell"
+                              :style="{ textAlign: block.alignments[cellIndex] ?? 'left' }"
+                            >
+                              <template v-for="(segment, segmentIndex) in getInlineSegments(cell)" :key="`td-seg-${blockIndex}-${rowIndex}-${cellIndex}-${segmentIndex}`">
+                                <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
+                                <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
+                                <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
+                                <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
+                                <a
+                                  v-else-if="segment.kind === 'file'"
+                                  class="message-file-link"
+                                  :href="toBrowseUrl(segment.path)"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  :title="segment.path"
+                                >
+                                  {{ segment.displayPath }}
+                                </a>
+                                <a
+                                  v-else-if="segment.kind === 'url'"
+                                  class="message-file-link"
+                                  :href="segment.href"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  :title="segment.href"
+                                >
+                                  {{ segment.value }}
+                                </a>
+                                <code v-else class="message-inline-code">{{ segment.value }}</code>
+                              </template>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div v-else-if="block.kind === 'codeBlock'" class="message-code-block">
+                      <div v-if="block.language" class="message-code-language">{{ block.language }}</div>
+                      <pre class="message-code-pre"><code class="hljs" v-html="renderCachedHighlightedCodeAsHtml(block.language, block.value)"></code></pre>
+                    </div>
+                    <hr v-else-if="block.kind === 'thematicBreak'" class="message-divider" />
+                    <p v-else-if="isMarkdownImageFailed(message.id, blockIndex)" class="message-text">{{ block.markdown }}</p>
+                    <button
+                      v-else
+                      class="message-image-button"
+                      type="button"
+                      @click="openImageModal(block.url)"
+                    >
+                      <img
+                        class="message-image-preview message-markdown-image"
+                        :src="block.url"
+                        :alt="block.alt || 'Embedded message image'"
+                        loading="lazy"
+                        @error="onMarkdownImageError(message.id, blockIndex)"
+                      />
+                    </button>
+                  </template>
+                </div>
+              </article>
+
+              <section v-if="readAnchoredFileChangeSummary(message)" class="file-change-summary-block file-change-summary-block-inline">
+                <button
+                  type="button"
+                  class="cmd-row cmd-row-group cmd-compact file-change-summary-row"
+                  :class="{ 'cmd-expanded': isFileChangeSummaryExpanded(message) }"
+                  @click="toggleFileChangeSummary(message)"
+                >
+                  <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isFileChangeSummaryExpanded(message) }">▶</span>
+                  <span class="file-change-summary-label">
+                    {{ fileChangeSummaryLabel(readAnchoredFileChangeSummary(message)) }}
+                  </span>
+                  <span class="file-change-summary-status">
+                    <span
+                      v-for="part in fileChangeSummaryStatusParts(readAnchoredFileChangeSummary(message))"
+                      :key="`summary-status:${message.id}:${part.tone}:${part.label}`"
+                      class="file-change-signed-count"
+                      :data-tone="part.tone"
+                    >
+                      {{ part.label }}
+                    </span>
+                  </span>
+                </button>
+                <div class="cmd-group-wrap" :class="{ 'cmd-group-visible': isFileChangeSummaryExpanded(message) }">
+                  <div class="file-change-panel-inner">
+                    <ul class="file-change-list">
+                      <li
+                        v-for="change in readAnchoredFileChangeSummary(message)?.changes ?? []"
+                        :key="`file-change:inline:${message.id}:${change.path}:${change.movedToPath || ''}`"
+                        class="file-change-item"
+                      >
+                        <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
+                          {{ fileChangeOperationLabel(change) }}
+                        </span>
+                        <button
+                          type="button"
+                          class="file-change-path-button"
+                          :title="change.path"
+                          @click="openDiffViewer(readAnchoredFileChangeSummary(message), change)"
+                        >
+                          {{ displayFileChangePath(change.path) }}
+                        </button>
+                        <span v-if="change.movedToPath" class="file-change-arrow">→</span>
+                        <button
+                          v-if="change.movedToPath"
+                          type="button"
+                          class="file-change-path-button"
+                          :title="change.movedToPath"
+                          @click="openDiffViewer(readAnchoredFileChangeSummary(message), change)"
+                        >
+                          {{ displayFileChangePath(change.movedToPath) }}
+                        </button>
+                        <span v-if="change.addedLineCount > 0 || change.removedLineCount > 0" class="file-change-delta">
+                          <span
+                            v-for="part in fileChangeDeltaParts(change)"
+                            :key="`change-delta:inline:${message.id}:${change.path}:${part.tone}:${part.label}`"
+                            class="file-change-signed-count"
+                            :data-tone="part.tone"
+                          >
+                            {{ part.label }}
+                          </span>
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              <div
+                v-if="showCopyResponseButton(message) || showEditMessageButton(message)"
+                class="message-toolbar"
+                :data-role="message.role"
+              >
+                <button
+                  v-if="showEditMessageButton(message)"
+                  type="button"
+                  class="message-edit-button"
+                  aria-label="Edit this message"
+                  title="Edit this message"
+                  @click="editMessage(message.id)"
+                >
+                  <IconTablerFilePencil class="icon-svg message-edit-icon" />
+                  <span class="message-edit-label">Edit message</span>
+                </button>
+                <button
+                  v-if="showForkResponseButton(message)"
+                  type="button"
+                  class="message-fork-button"
+                  aria-label="Fork thread from this response"
+                  title="Fork thread from this response"
+                  @click="forkResponse(message.id)"
+                >
+                  <IconTablerGitFork class="icon-svg message-fork-icon" />
+                  <span class="message-fork-label">Fork</span>
+                </button>
+                <button
+                  v-if="showCopyResponseButton(message)"
+                  type="button"
+                  class="message-copy-button"
+                  :data-copied="copiedResponseAnchorId === message.id"
+                  :aria-label="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
+                  :title="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
+                  @click="copyResponse(message.id)"
+                >
+                  <IconTablerCopy class="icon-svg message-copy-icon" />
+                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? 'Copied' : 'Copy' }}</span>
+                </button>
+              </div>
+            </article>
+          </div>
+        </div>
+      </li>
+      </template>
+      <li v-if="liveOverlay" class="conversation-item conversation-item-overlay">
+        <div class="message-row">
+          <div class="message-stack">
+            <article class="live-overlay-inline" aria-live="polite">
+              <p class="live-overlay-label">{{ liveOverlay.activityLabel }}</p>
+              <p
+                v-if="liveOverlay.reasoningText"
+                class="live-overlay-reasoning"
+              >
+                {{ liveOverlay.reasoningText }}
+              </p>
+              <p v-if="liveOverlay.errorText" class="live-overlay-error">{{ liveOverlay.errorText }}</p>
+            </article>
+          </div>
+        </div>
+      </li>
+      <li ref="bottomAnchorRef" class="conversation-bottom-anchor" />
+    </ul>
+
+    <button
+      v-if="showJumpToLatestButton"
+      type="button"
+      class="jump-to-latest-button"
+      title="Jump to latest"
+      aria-label="Jump to latest output"
+      @click="jumpToLatest"
+    >
+      <IconTablerArrowUp class="icon-svg jump-to-latest-icon" />
+    </button>
+
+    <div v-if="modalImageUrl.length > 0" class="image-modal-backdrop" @click="closeImageModal">
+      <div class="image-modal-content" @click.stop>
+        <button class="image-modal-close" type="button" aria-label="Close image preview" @click="closeImageModal">
+          <IconTablerX class="icon-svg" />
+        </button>
+        <img class="image-modal-image" :src="modalImageUrl" alt="Expanded message image" />
+      </div>
+    </div>
+
+    <div
+      v-if="isFileLinkContextMenuVisible"
+      ref="fileLinkContextMenuRef"
+      class="file-link-context-menu"
+      :style="fileLinkContextMenuStyle"
+      @click.stop
+    >
+      <button type="button" class="file-link-context-menu-item" @click="openFileLinkContextBrowse">
+        Open link
+      </button>
+      <button type="button" class="file-link-context-menu-item" @click="copyFileLinkContextLink">
+        Copy link
+      </button>
+      <button
+        v-if="fileLinkContextEditUrl"
+        type="button"
+        class="file-link-context-menu-item"
+        @click="openFileLinkContextEdit"
+      >
+        Edit file
+      </button>
+    </div>
+
+    <div v-if="activeDiffViewerChange" class="diff-viewer-backdrop" @click="closeDiffViewer">
+      <div class="diff-viewer-shell" @click.stop>
+        <aside v-if="!isMobile" class="diff-viewer-sidebar">
+          <div class="diff-viewer-sidebar-header">
+            <p class="diff-viewer-sidebar-title">Changed files</p>
+            <p class="diff-viewer-sidebar-count">{{ formatFileChangeCountLabel(diffViewerChanges.length) }}</p>
+          </div>
+          <div class="diff-viewer-sidebar-list">
+            <button
+              v-for="change in diffViewerChanges"
+              :key="`diff-viewer:${fileChangeKey(change)}`"
+              type="button"
+              class="diff-viewer-file-button"
+              :data-active="fileChangeKey(change) === fileChangeKey(activeDiffViewerChange)"
+              @click="selectDiffViewerChange(change)"
+            >
+              <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
+                {{ fileChangeOperationLabel(change) }}
+              </span>
+              <span class="diff-viewer-file-label">
+                {{ displayFileChangePath(change.path) }}
+                <template v-if="change.movedToPath"> → {{ displayFileChangePath(change.movedToPath) }}</template>
+              </span>
+              <span v-if="formatFileChangeDelta(change)" class="diff-viewer-file-delta">{{ formatFileChangeDelta(change) }}</span>
+            </button>
+          </div>
+        </aside>
+
+        <section class="diff-viewer-main">
+          <div class="diff-viewer-toolbar">
+            <div class="diff-viewer-title-wrap">
+              <p class="diff-viewer-title">
+                {{ displayFileChangePath(activeDiffViewerChange.path) }}
+                <template v-if="activeDiffViewerChange.movedToPath"> → {{ displayFileChangePath(activeDiffViewerChange.movedToPath) }}</template>
+              </p>
+              <p class="diff-viewer-subtitle">
+                {{ fileChangeOperationLabel(activeDiffViewerChange) }}
+                <span v-if="formatFileChangeDelta(activeDiffViewerChange)"> · {{ formatFileChangeDelta(activeDiffViewerChange) }}</span>
+              </p>
+            </div>
+            <div class="diff-viewer-toolbar-actions">
+              <button
+                v-if="isMobile"
+                type="button"
+                class="diff-viewer-mobile-files-button"
+                @click="toggleDiffViewerFileList"
+              >
+                {{ formatFileChangeCountLabel(diffViewerChanges.length) }}
+              </button>
+              <button class="image-modal-close diff-viewer-close" type="button" aria-label="Close diff viewer" @click="closeDiffViewer">
+                <IconTablerX class="icon-svg" />
+              </button>
+            </div>
+          </div>
+
+          <div v-if="!hasDiffViewerContent(activeDiffViewerChange)" class="diff-viewer-empty">
+            <p class="diff-viewer-empty-title">No diff available</p>
+            <p class="diff-viewer-empty-text">This summary was restored from the final answer text, but the thread history does not include patch diff content for this file.</p>
+          </div>
+
+          <div v-else class="diff-viewer-panel">
+            <div class="diff-viewer-meta">
+              <span class="diff-viewer-language">{{ inferDiffViewerLanguage(activeDiffViewerChange) || 'diff' }}</span>
+            </div>
+            <div class="diff-viewer-lines">
+              <div
+                v-for="line in activeDiffViewerLines"
+                :key="line.key"
+                class="diff-viewer-line"
+                :data-kind="line.kind"
+              >
+                <span class="diff-viewer-line-number">{{ line.oldLine ?? '' }}</span>
+                <span class="diff-viewer-line-number">{{ line.newLine ?? '' }}</span>
+                <span class="diff-viewer-line-marker">{{ diffViewerMarker(line) }}</span>
+                <code class="diff-viewer-line-code" v-html="escapeHtml(line.text) || '&nbsp;'"></code>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <Transition name="diff-viewer-sheet">
+          <div
+            v-if="isMobile && isDiffViewerFileListOpen"
+            class="diff-viewer-mobile-sheet-backdrop"
+            @click="closeDiffViewerFileList"
+          >
+            <div class="diff-viewer-mobile-sheet" @click.stop>
+              <div class="diff-viewer-mobile-sheet-handle" aria-hidden="true"></div>
+              <div class="diff-viewer-mobile-sheet-header">
+                <p class="diff-viewer-sidebar-title">Changed files</p>
+                <p class="diff-viewer-sidebar-count">{{ formatFileChangeCountLabel(diffViewerChanges.length) }}</p>
+              </div>
+              <div class="diff-viewer-mobile-sheet-list">
+                <button
+                  v-for="change in diffViewerChanges"
+                  :key="`diff-viewer-sheet:${fileChangeKey(change)}`"
+                  type="button"
+                  class="diff-viewer-file-button"
+                  :data-active="fileChangeKey(change) === fileChangeKey(activeDiffViewerChange)"
+                  @click="selectDiffViewerChange(change)"
+                >
+                  <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
+                    {{ fileChangeOperationLabel(change) }}
+                  </span>
+                  <span class="diff-viewer-file-label">
+                    {{ displayFileChangePath(change.path) }}
+                    <template v-if="change.movedToPath"> → {{ displayFileChangePath(change.movedToPath) }}</template>
+                  </span>
+                  <span v-if="formatFileChangeDelta(change)" class="diff-viewer-file-delta">{{ formatFileChangeDelta(change) }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </section>
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index ca265d246..8d1d07887 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -1,876 +1,24 @@
-<template>
-  <section class="conversation-root" @contextmenu.capture="onConversationContextMenu">
-    <p v-if="isLoading" class="conversation-loading">Loading messages...</p>
-
-    <p
-      v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
-      class="conversation-empty"
-    >
-      No messages in this thread yet.
-    </p>
-
-    <ul v-else ref="conversationListRef" class="conversation-list" @scroll="onConversationScroll">
-      <li v-if="hasMoreAbove" class="conversation-load-more">
-        <button
-          type="button"
-          class="load-more-button"
-          :disabled="isLoadingMore || isLoadingPersistedAbove"
-          @click="loadMoreAbove"
-        >
-          {{ isLoadingMore || isLoadingPersistedAbove ? 'Loading…' : 'Load earlier messages' }}
-        </button>
-      </li>
-      <template v-for="message in visibleMessages" :key="message.id">
-      <li
-        v-if="!hiddenGroupedCommandIds.has(message.id) && !hiddenFileChangeMessageIds.has(message.id)"
-        class="conversation-item"
-        :data-role="message.role"
-        :data-message-type="message.messageType || ''"
-      >
-        <div v-if="isCommandMessage(message)" class="message-row" data-role="system">
-          <div class="message-stack" data-role="system">
-            <button
-              v-if="getGroupedCommandsForLatest(message).length > 0"
-              type="button"
-              class="cmd-row cmd-row-group cmd-compact"
-              :class="[commandStatusClass(message), { 'cmd-expanded': isCommandGroupExpanded(message) }]"
-              @click="toggleCommandGroup(message)"
-            >
-              <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandGroupExpanded(message) }">▶</span>
-              <span class="cmd-group-label">{{ commandGroupSummaryLabel(message) }}</span>
-              <span class="cmd-status">{{ commandGroupSummaryStatus(message) }}</span>
-            </button>
-            <div
-              v-if="getGroupedCommandsForLatest(message).length > 0"
-              class="cmd-group-wrap"
-              :class="{ 'cmd-group-visible': isCommandGroupExpanded(message) }"
-            >
-              <div class="cmd-group-inner">
-                <div
-                  v-for="cmd in getCommandBlockForLatest(message)"
-                  :key="`grouped-cmd-${cmd.id}`"
-                  class="worked-cmd-item"
-                >
-                  <button
-                    type="button"
-                    class="cmd-row"
-                    :class="[
-                      commandStatusClass(cmd),
-                      {
-                        'cmd-expanded': isCommandExpanded(cmd),
-                        'cmd-compact': true,
-                      },
-                    ]"
-                    @click="toggleCommandExpand(cmd)"
-                  >
-                    <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                    <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
-                    <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
-                  </button>
-                  <div
-                    class="cmd-output-wrap"
-                    :class="{ 'cmd-output-visible': isCommandExpanded(cmd) }"
-                  >
-                    <div class="cmd-output-inner">
-                      <pre
-                        class="cmd-output"
-                        :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                        v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
-                      ></pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <template v-else>
-              <button
-                type="button"
-                class="cmd-row"
-                :class="[
-                  commandStatusClass(message),
-                  {
-                    'cmd-expanded': isCommandExpanded(message),
-                    'cmd-compact': isCommandCompact(message),
-                  },
-                ]"
-                @click="toggleCommandExpand(message)"
-              >
-                <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(message) }">▶</span>
-                <code class="cmd-label">{{ message.commandExecution?.command || '(command)' }}</code>
-                <span class="cmd-status">{{ commandStatusLabel(message) }}</span>
-              </button>
-              <div
-                class="cmd-output-wrap"
-                :class="{ 'cmd-output-visible': isCommandExpanded(message) }"
-              >
-                <div class="cmd-output-inner">
-                  <pre
-                    class="cmd-output"
-                    :class="{ 'cmd-output-condensed': isCommandOutputCondensed(message) }"
-                    v-text="message.commandExecution?.aggregatedOutput || '(no output)'"
-                  ></pre>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <div
-          v-else-if="isFileChangeMessage(message)"
-          class="message-row"
-          :data-role="message.role"
-          :data-message-type="message.messageType || ''"
-        >
-          <div class="message-stack" :data-role="message.role">
-            <article class="message-body" :data-role="message.role">
-              <section v-if="readStandaloneFileChangeSummary(message)" class="file-change-summary-block">
-                <button
-                  type="button"
-                  class="cmd-row cmd-row-group cmd-compact file-change-summary-row"
-                  :class="{ 'cmd-expanded': isFileChangeSummaryExpanded(message) }"
-                  @click="toggleFileChangeSummary(message)"
-                >
-                  <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isFileChangeSummaryExpanded(message) }">▶</span>
-                  <span class="file-change-summary-label">
-                    {{ fileChangeSummaryLabel(readStandaloneFileChangeSummary(message)) }}
-                  </span>
-                  <span class="file-change-summary-status">
-                    <span
-                      v-for="part in fileChangeSummaryStatusParts(readStandaloneFileChangeSummary(message))"
-                      :key="`summary-status:${message.id}:${part.tone}:${part.label}`"
-                      class="file-change-signed-count"
-                      :data-tone="part.tone"
-                    >
-                      {{ part.label }}
-                    </span>
-                  </span>
-                </button>
-                <div class="cmd-group-wrap" :class="{ 'cmd-group-visible': isFileChangeSummaryExpanded(message) }">
-                  <div class="file-change-panel-inner">
-                    <ul class="file-change-list">
-                      <li
-                        v-for="change in readStandaloneFileChangeSummary(message)?.changes ?? []"
-                        :key="`file-change:${message.id}:${change.path}:${change.movedToPath || ''}`"
-                        class="file-change-item"
-                      >
-                        <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
-                          {{ fileChangeOperationLabel(change) }}
-                        </span>
-                        <button
-                          type="button"
-                          class="file-change-path-button"
-                          :title="change.path"
-                          @click="openDiffViewer(readStandaloneFileChangeSummary(message), change)"
-                        >
-                          {{ displayFileChangePath(change.path) }}
-                        </button>
-                        <span v-if="change.movedToPath" class="file-change-arrow">→</span>
-                        <button
-                          v-if="change.movedToPath"
-                          type="button"
-                          class="file-change-path-button"
-                          :title="change.movedToPath"
-                          @click="openDiffViewer(readStandaloneFileChangeSummary(message), change)"
-                        >
-                          {{ displayFileChangePath(change.movedToPath) }}
-                        </button>
-                        <span v-if="change.addedLineCount > 0 || change.removedLineCount > 0" class="file-change-delta">
-                          <span
-                            v-for="part in fileChangeDeltaParts(change)"
-                            :key="`change-delta:${message.id}:${change.path}:${part.tone}:${part.label}`"
-                            class="file-change-signed-count"
-                            :data-tone="part.tone"
-                          >
-                            {{ part.label }}
-                          </span>
-                        </span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </section>
-            </article>
-          </div>
-        </div>
-
-        <div v-else class="message-row" :data-role="message.role" :data-message-type="message.messageType || ''">
-          <div class="message-stack" :data-role="message.role">
-            <article class="message-body" :data-role="message.role">
-              <ul
-                v-if="message.images && message.images.length > 0"
-                class="message-image-list"
-                :class="{ 'message-generated-image-list': message.messageType === 'imageView' }"
-                :data-role="message.role"
-              >
-                <li v-for="imageUrl in message.images" :key="imageUrl" class="message-image-item">
-                  <button class="message-image-button" type="button" @click="openImageModal(imageUrl)">
-                    <img
-                      class="message-image-preview"
-                      :class="{ 'message-generated-image-preview': message.messageType === 'imageView' }"
-                      :src="imageUrl"
-                      :alt="message.messageType === 'imageView' ? 'Generated image' : 'Message image preview'"
-                      loading="lazy"
-                    />
-                  </button>
-                </li>
-              </ul>
-
-              <div v-if="message.fileAttachments && message.fileAttachments.length > 0" class="message-file-attachments">
-                <span v-for="att in message.fileAttachments" :key="`${message.id}:${att.path}`" class="message-file-chip">
-                  <span class="message-file-chip-icon">📄</span>
-                  <a
-                    class="message-file-link message-file-chip-name"
-                    :href="toBrowseUrl(att.path)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    :title="att.path"
-                  >
-                    {{ att.label }}
-                  </a>
-                </span>
-              </div>
-
-              <div v-if="message.skills && message.skills.length > 0" class="message-skill-attachments">
-                <a
-                  v-for="skill in message.skills"
-                  :key="`${message.id}:${skill.path}`"
-                  class="message-skill-chip"
-                  :href="toBrowseUrl(skill.path)"
-                  :title="skill.path"
-                >
-                  <span class="message-skill-chip-prefix">Skill</span>
-                  <span class="message-skill-chip-name">{{ skill.name }}</span>
-                </a>
-              </div>
-
-              <article v-if="message.text.length > 0" class="message-card" :data-role="message.role">
-                <div v-if="message.isAutomationRun" class="automation-message-label">
-                  <span>Sent via automation</span>
-                  <code v-if="message.automationDisplayName">{{ message.automationDisplayName }}</code>
-                </div>
-                <div v-if="message.messageType === 'worked'" class="worked-separator-wrap" aria-live="polite">
-                  <button type="button" class="worked-separator" @click="toggleWorkedExpand(message)">
-                    <span class="worked-separator-line" aria-hidden="true" />
-                    <span class="worked-chevron" :class="{ 'worked-chevron-open': isWorkedExpanded(message) }">▶</span>
-                    <p class="worked-separator-text">{{ message.text }}</p>
-                    <span class="worked-separator-line" aria-hidden="true" />
-                  </button>
-                  <div v-if="isWorkedExpanded(message)" class="worked-details">
-                    <div
-                      v-for="cmd in getCommandsForWorked(messages, messages.indexOf(message))"
-                      :key="`worked-cmd-${cmd.id}`"
-                      class="worked-cmd-item"
-                    >
-                      <button
-                        type="button"
-                        class="cmd-row"
-                        :class="[
-                          commandStatusClass(cmd),
-                          {
-                            'cmd-expanded': isCommandExpanded(cmd),
-                            'cmd-compact': isCommandCompact(cmd),
-                          },
-                        ]"
-                        @click="toggleCommandExpand(cmd)"
-                      >
-                        <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                        <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
-                        <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
-                      </button>
-                      <div
-                        class="cmd-output-wrap"
-                        :class="{ 'cmd-output-visible': isCommandExpanded(cmd) }"
-                      >
-                        <div class="cmd-output-inner">
-                          <pre
-                            class="cmd-output"
-                            :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                            v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
-                          ></pre>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-else-if="isPlanMessage(message)" class="plan-card" :data-streaming="message.messageType === 'plan.live'">
-                  <div class="plan-card-header">
-                    <p class="plan-card-title">Plan</p>
-                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">Updating</span>
-                  </div>
-                  <div
-                    v-if="readPlanExplanation(message)"
-                    class="plan-card-explanation plan-card-markdown"
-                    v-html="renderMarkdownBlocksAsHtml(readPlanExplanation(message))"
-                  />
-                  <ol v-if="readPlanSteps(message).length > 0" class="plan-step-list">
-                    <li
-                      v-for="(step, stepIndex) in readPlanSteps(message)"
-                      :key="`${message.id}:plan-step:${stepIndex}`"
-                      class="plan-step-item"
-                      :data-status="step.status"
-                    >
-                      <span class="plan-step-status" :data-status="step.status">{{ planStepStatusIcon(step.status) }}</span>
-                      <div class="plan-step-text plan-card-markdown" v-html="renderMarkdownBlocksAsHtml(step.step)" />
-                    </li>
-                  </ol>
-                  <div v-else class="plan-card-markdown" v-html="renderMarkdownBlocksAsHtml(message.text)" />
-                  <div v-if="showImplementPlanButton(message)" class="plan-card-actions">
-                    <button
-                      type="button"
-                      class="plan-card-implement-button"
-                      @click="implementPlan(message)"
-                    >
-                      Implement plan
-                    </button>
-                  </div>
-                </div>
-                <div
-                  v-else
-                  class="message-text-flow"
-                  v-memo="[message.id, message.text, props.cwd, highlightCacheVersion, markdownImageFailureVersion]"
-                >
-                  <template v-for="(block, blockIndex) in getMessageBlocks(message)" :key="`block-${blockIndex}`">
-                    <p v-if="block.kind === 'paragraph'" class="message-text">
-                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`seg-${blockIndex}-${segmentIndex}`">
-                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                        <a
-                          v-else-if="segment.kind === 'file'"
-                          class="message-file-link"
-                          :href="toBrowseUrl(segment.path)"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.path"
-                        >
-                          {{ segment.displayPath }}
-                        </a>
-                        <a
-                          v-else-if="segment.kind === 'url'"
-                          class="message-file-link"
-                          :href="segment.href"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.href"
-                        >
-                          {{ segment.value }}
-                        </a>
-                        <code v-else class="message-inline-code">{{ segment.value }}</code>
-                      </template>
-                    </p>
-                    <component
-                      :is="headingTag(block.level)"
-                      v-else-if="block.kind === 'heading'"
-                      class="message-heading"
-                      :class="headingClass(block.level)"
-                    >
-                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`heading-seg-${blockIndex}-${segmentIndex}`">
-                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                        <a
-                          v-else-if="segment.kind === 'file'"
-                          class="message-file-link"
-                          :href="toBrowseUrl(segment.path)"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.path"
-                        >
-                          {{ segment.displayPath }}
-                        </a>
-                        <a
-                          v-else-if="segment.kind === 'url'"
-                          class="message-file-link"
-                          :href="segment.href"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.href"
-                        >
-                          {{ segment.value }}
-                        </a>
-                        <code v-else class="message-inline-code">{{ segment.value }}</code>
-                      </template>
-                    </component>
-                    <blockquote v-else-if="block.kind === 'blockquote'" class="message-blockquote">
-                      <template v-for="(segment, segmentIndex) in getInlineSegments(block.value)" :key="`quote-seg-${blockIndex}-${segmentIndex}`">
-                        <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                        <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                        <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                        <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                        <a
-                          v-else-if="segment.kind === 'file'"
-                          class="message-file-link"
-                          :href="toBrowseUrl(segment.path)"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.path"
-                        >
-                          {{ segment.displayPath }}
-                        </a>
-                        <a
-                          v-else-if="segment.kind === 'url'"
-                          class="message-file-link"
-                          :href="segment.href"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          :title="segment.href"
-                        >
-                          {{ segment.value }}
-                        </a>
-                        <code v-else class="message-inline-code">{{ segment.value }}</code>
-                      </template>
-                    </blockquote>
-                    <ul v-else-if="block.kind === 'unorderedList'" class="message-list message-list-unordered">
-                      <li v-for="(item, itemIndex) in block.items" :key="`ul-${blockIndex}-${itemIndex}`" class="message-list-item">
-                        <div class="message-list-item-content" v-html="renderListItemContentAsHtml(item)" />
-                      </li>
-                    </ul>
-                    <ul v-else-if="block.kind === 'taskList'" class="message-list message-task-list">
-                      <li v-for="(item, itemIndex) in block.items" :key="`task-${blockIndex}-${itemIndex}`" class="message-task-item">
-                        <span class="message-task-checkbox" :data-checked="item.checked">{{ item.checked ? '☑' : '☐' }}</span>
-                        <div class="message-list-item-text">
-                          <template v-for="(segment, segmentIndex) in getInlineSegments(item.text)" :key="`task-seg-${blockIndex}-${itemIndex}-${segmentIndex}`">
-                            <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                            <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                            <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                            <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                            <a
-                              v-else-if="segment.kind === 'file'"
-                              class="message-file-link"
-                              :href="toBrowseUrl(segment.path)"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              :title="segment.path"
-                            >
-                              {{ segment.displayPath }}
-                            </a>
-                            <a
-                              v-else-if="segment.kind === 'url'"
-                              class="message-file-link"
-                              :href="segment.href"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              :title="segment.href"
-                            >
-                              {{ segment.value }}
-                            </a>
-                            <code v-else class="message-inline-code">{{ segment.value }}</code>
-                          </template>
-                        </div>
-                      </li>
-                    </ul>
-                    <ol
-                      v-else-if="block.kind === 'orderedList'"
-                      class="message-list message-list-ordered"
-                      :start="block.start"
-                    >
-                      <li v-for="(item, itemIndex) in block.items" :key="`ol-${blockIndex}-${itemIndex}`" class="message-list-item">
-                        <div class="message-list-item-content" v-html="renderListItemContentAsHtml(item)" />
-                      </li>
-                    </ol>
-                    <div v-else-if="block.kind === 'table'" class="message-table-wrap">
-                      <table class="message-table">
-                        <thead>
-                          <tr>
-                            <th
-                              v-for="(cell, cellIndex) in block.headers"
-                              :key="`th-${blockIndex}-${cellIndex}`"
-                              class="message-table-head-cell"
-                              :style="{ textAlign: block.alignments[cellIndex] ?? 'left' }"
-                            >
-                              <template v-for="(segment, segmentIndex) in getInlineSegments(cell)" :key="`th-seg-${blockIndex}-${cellIndex}-${segmentIndex}`">
-                                <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                                <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                                <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                                <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                                <a
-                                  v-else-if="segment.kind === 'file'"
-                                  class="message-file-link"
-                                  :href="toBrowseUrl(segment.path)"
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  :title="segment.path"
-                                >
-                                  {{ segment.displayPath }}
-                                </a>
-                                <a
-                                  v-else-if="segment.kind === 'url'"
-                                  class="message-file-link"
-                                  :href="segment.href"
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  :title="segment.href"
-                                >
-                                  {{ segment.value }}
-                                </a>
-                                <code v-else class="message-inline-code">{{ segment.value }}</code>
-                              </template>
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody v-if="block.rows.length > 0">
-                          <tr v-for="(row, rowIndex) in block.rows" :key="`tr-${blockIndex}-${rowIndex}`" class="message-table-body-row">
-                            <td
-                              v-for="(cell, cellIndex) in row"
-                              :key="`td-${blockIndex}-${rowIndex}-${cellIndex}`"
-                              class="message-table-cell"
-                              :style="{ textAlign: block.alignments[cellIndex] ?? 'left' }"
-                            >
-                              <template v-for="(segment, segmentIndex) in getInlineSegments(cell)" :key="`td-seg-${blockIndex}-${rowIndex}-${cellIndex}-${segmentIndex}`">
-                                <span v-if="segment.kind === 'text'">{{ segment.value }}</span>
-                                <strong v-else-if="segment.kind === 'bold'" class="message-bold-text">{{ segment.value }}</strong>
-                                <em v-else-if="segment.kind === 'italic'" class="message-italic-text">{{ segment.value }}</em>
-                                <s v-else-if="segment.kind === 'strikethrough'" class="message-strikethrough-text">{{ segment.value }}</s>
-                                <a
-                                  v-else-if="segment.kind === 'file'"
-                                  class="message-file-link"
-                                  :href="toBrowseUrl(segment.path)"
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  :title="segment.path"
-                                >
-                                  {{ segment.displayPath }}
-                                </a>
-                                <a
-                                  v-else-if="segment.kind === 'url'"
-                                  class="message-file-link"
-                                  :href="segment.href"
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  :title="segment.href"
-                                >
-                                  {{ segment.value }}
-                                </a>
-                                <code v-else class="message-inline-code">{{ segment.value }}</code>
-                              </template>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div v-else-if="block.kind === 'codeBlock'" class="message-code-block">
-                      <div v-if="block.language" class="message-code-language">{{ block.language }}</div>
-                      <pre class="message-code-pre"><code class="hljs" v-html="renderCachedHighlightedCodeAsHtml(block.language, block.value)"></code></pre>
-                    </div>
-                    <hr v-else-if="block.kind === 'thematicBreak'" class="message-divider" />
-                    <p v-else-if="isMarkdownImageFailed(message.id, blockIndex)" class="message-text">{{ block.markdown }}</p>
-                    <button
-                      v-else
-                      class="message-image-button"
-                      type="button"
-                      @click="openImageModal(block.url)"
-                    >
-                      <img
-                        class="message-image-preview message-markdown-image"
-                        :src="block.url"
-                        :alt="block.alt || 'Embedded message image'"
-                        loading="lazy"
-                        @error="onMarkdownImageError(message.id, blockIndex)"
-                      />
-                    </button>
-                  </template>
-                </div>
-              </article>
-
-              <section v-if="readAnchoredFileChangeSummary(message)" class="file-change-summary-block file-change-summary-block-inline">
-                <button
-                  type="button"
-                  class="cmd-row cmd-row-group cmd-compact file-change-summary-row"
-                  :class="{ 'cmd-expanded': isFileChangeSummaryExpanded(message) }"
-                  @click="toggleFileChangeSummary(message)"
-                >
-                  <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isFileChangeSummaryExpanded(message) }">▶</span>
-                  <span class="file-change-summary-label">
-                    {{ fileChangeSummaryLabel(readAnchoredFileChangeSummary(message)) }}
-                  </span>
-                  <span class="file-change-summary-status">
-                    <span
-                      v-for="part in fileChangeSummaryStatusParts(readAnchoredFileChangeSummary(message))"
-                      :key="`summary-status:${message.id}:${part.tone}:${part.label}`"
-                      class="file-change-signed-count"
-                      :data-tone="part.tone"
-                    >
-                      {{ part.label }}
-                    </span>
-                  </span>
-                </button>
-                <div class="cmd-group-wrap" :class="{ 'cmd-group-visible': isFileChangeSummaryExpanded(message) }">
-                  <div class="file-change-panel-inner">
-                    <ul class="file-change-list">
-                      <li
-                        v-for="change in readAnchoredFileChangeSummary(message)?.changes ?? []"
-                        :key="`file-change:inline:${message.id}:${change.path}:${change.movedToPath || ''}`"
-                        class="file-change-item"
-                      >
-                        <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
-                          {{ fileChangeOperationLabel(change) }}
-                        </span>
-                        <button
-                          type="button"
-                          class="file-change-path-button"
-                          :title="change.path"
-                          @click="openDiffViewer(readAnchoredFileChangeSummary(message), change)"
-                        >
-                          {{ displayFileChangePath(change.path) }}
-                        </button>
-                        <span v-if="change.movedToPath" class="file-change-arrow">→</span>
-                        <button
-                          v-if="change.movedToPath"
-                          type="button"
-                          class="file-change-path-button"
-                          :title="change.movedToPath"
-                          @click="openDiffViewer(readAnchoredFileChangeSummary(message), change)"
-                        >
-                          {{ displayFileChangePath(change.movedToPath) }}
-                        </button>
-                        <span v-if="change.addedLineCount > 0 || change.removedLineCount > 0" class="file-change-delta">
-                          <span
-                            v-for="part in fileChangeDeltaParts(change)"
-                            :key="`change-delta:inline:${message.id}:${change.path}:${part.tone}:${part.label}`"
-                            class="file-change-signed-count"
-                            :data-tone="part.tone"
-                          >
-                            {{ part.label }}
-                          </span>
-                        </span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </section>
-
-              <div
-                v-if="showCopyResponseButton(message) || showEditMessageButton(message)"
-                class="message-toolbar"
-                :data-role="message.role"
-              >
-                <button
-                  v-if="showEditMessageButton(message)"
-                  type="button"
-                  class="message-edit-button"
-                  aria-label="Edit this message"
-                  title="Edit this message"
-                  @click="editMessage(message.id)"
-                >
-                  <IconTablerFilePencil class="icon-svg message-edit-icon" />
-                  <span class="message-edit-label">Edit message</span>
-                </button>
-                <button
-                  v-if="showForkResponseButton(message)"
-                  type="button"
-                  class="message-fork-button"
-                  aria-label="Fork thread from this response"
-                  title="Fork thread from this response"
-                  @click="forkResponse(message.id)"
-                >
-                  <IconTablerGitFork class="icon-svg message-fork-icon" />
-                  <span class="message-fork-label">Fork</span>
-                </button>
-                <button
-                  v-if="showCopyResponseButton(message)"
-                  type="button"
-                  class="message-copy-button"
-                  :data-copied="copiedResponseAnchorId === message.id"
-                  :aria-label="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
-                  :title="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
-                  @click="copyResponse(message.id)"
-                >
-                  <IconTablerCopy class="icon-svg message-copy-icon" />
-                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? 'Copied' : 'Copy' }}</span>
-                </button>
-              </div>
-            </article>
-          </div>
-        </div>
-      </li>
-      </template>
-      <li v-if="liveOverlay" class="conversation-item conversation-item-overlay">
-        <div class="message-row">
-          <div class="message-stack">
-            <article class="live-overlay-inline" aria-live="polite">
-              <p class="live-overlay-label">{{ liveOverlay.activityLabel }}</p>
-              <p
-                v-if="liveOverlay.reasoningText"
-                class="live-overlay-reasoning"
-              >
-                {{ liveOverlay.reasoningText }}
-              </p>
-              <p v-if="liveOverlay.errorText" class="live-overlay-error">{{ liveOverlay.errorText }}</p>
-            </article>
-          </div>
-        </div>
-      </li>
-      <li ref="bottomAnchorRef" class="conversation-bottom-anchor" />
-    </ul>
-
-    <button
-      v-if="showJumpToLatestButton"
-      type="button"
-      class="jump-to-latest-button"
-      title="Jump to latest"
-      aria-label="Jump to latest output"
-      @click="jumpToLatest"
-    >
-      <IconTablerArrowUp class="icon-svg jump-to-latest-icon" />
-    </button>
-
-    <div v-if="modalImageUrl.length > 0" class="image-modal-backdrop" @click="closeImageModal">
-      <div class="image-modal-content" @click.stop>
-        <button class="image-modal-close" type="button" aria-label="Close image preview" @click="closeImageModal">
-          <IconTablerX class="icon-svg" />
-        </button>
-        <img class="image-modal-image" :src="modalImageUrl" alt="Expanded message image" />
-      </div>
-    </div>
-
-    <div
-      v-if="isFileLinkContextMenuVisible"
-      ref="fileLinkContextMenuRef"
-      class="file-link-context-menu"
-      :style="fileLinkContextMenuStyle"
-      @click.stop
-    >
-      <button type="button" class="file-link-context-menu-item" @click="openFileLinkContextBrowse">
-        Open link
-      </button>
-      <button type="button" class="file-link-context-menu-item" @click="copyFileLinkContextLink">
-        Copy link
-      </button>
-      <button
-        v-if="fileLinkContextEditUrl"
-        type="button"
-        class="file-link-context-menu-item"
-        @click="openFileLinkContextEdit"
-      >
-        Edit file
-      </button>
-    </div>
-
-    <div v-if="activeDiffViewerChange" class="diff-viewer-backdrop" @click="closeDiffViewer">
-      <div class="diff-viewer-shell" @click.stop>
-        <aside v-if="!isMobile" class="diff-viewer-sidebar">
-          <div class="diff-viewer-sidebar-header">
-            <p class="diff-viewer-sidebar-title">Changed files</p>
-            <p class="diff-viewer-sidebar-count">{{ formatFileChangeCountLabel(diffViewerChanges.length) }}</p>
-          </div>
-          <div class="diff-viewer-sidebar-list">
-            <button
-              v-for="change in diffViewerChanges"
-              :key="`diff-viewer:${fileChangeKey(change)}`"
-              type="button"
-              class="diff-viewer-file-button"
-              :data-active="fileChangeKey(change) === fileChangeKey(activeDiffViewerChange)"
-              @click="selectDiffViewerChange(change)"
-            >
-              <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
-                {{ fileChangeOperationLabel(change) }}
-              </span>
-              <span class="diff-viewer-file-label">
-                {{ displayFileChangePath(change.path) }}
-                <template v-if="change.movedToPath"> → {{ displayFileChangePath(change.movedToPath) }}</template>
-              </span>
-              <span v-if="formatFileChangeDelta(change)" class="diff-viewer-file-delta">{{ formatFileChangeDelta(change) }}</span>
-            </button>
-          </div>
-        </aside>
-
-        <section class="diff-viewer-main">
-          <div class="diff-viewer-toolbar">
-            <div class="diff-viewer-title-wrap">
-              <p class="diff-viewer-title">
-                {{ displayFileChangePath(activeDiffViewerChange.path) }}
-                <template v-if="activeDiffViewerChange.movedToPath"> → {{ displayFileChangePath(activeDiffViewerChange.movedToPath) }}</template>
-              </p>
-              <p class="diff-viewer-subtitle">
-                {{ fileChangeOperationLabel(activeDiffViewerChange) }}
-                <span v-if="formatFileChangeDelta(activeDiffViewerChange)"> · {{ formatFileChangeDelta(activeDiffViewerChange) }}</span>
-              </p>
-            </div>
-            <div class="diff-viewer-toolbar-actions">
-              <button
-                v-if="isMobile"
-                type="button"
-                class="diff-viewer-mobile-files-button"
-                @click="toggleDiffViewerFileList"
-              >
-                {{ formatFileChangeCountLabel(diffViewerChanges.length) }}
-              </button>
-              <button class="image-modal-close diff-viewer-close" type="button" aria-label="Close diff viewer" @click="closeDiffViewer">
-                <IconTablerX class="icon-svg" />
-              </button>
-            </div>
-          </div>
-
-          <div v-if="!hasDiffViewerContent(activeDiffViewerChange)" class="diff-viewer-empty">
-            <p class="diff-viewer-empty-title">No diff available</p>
-            <p class="diff-viewer-empty-text">This summary was restored from the final answer text, but the thread history does not include patch diff content for this file.</p>
-          </div>
-
-          <div v-else class="diff-viewer-panel">
-            <div class="diff-viewer-meta">
-              <span class="diff-viewer-language">{{ inferDiffViewerLanguage(activeDiffViewerChange) || 'diff' }}</span>
-            </div>
-            <div class="diff-viewer-lines">
-              <div
-                v-for="line in activeDiffViewerLines"
-                :key="line.key"
-                class="diff-viewer-line"
-                :data-kind="line.kind"
-              >
-                <span class="diff-viewer-line-number">{{ line.oldLine ?? '' }}</span>
-                <span class="diff-viewer-line-number">{{ line.newLine ?? '' }}</span>
-                <span class="diff-viewer-line-marker">{{ diffViewerMarker(line) }}</span>
-                <code class="diff-viewer-line-code" v-html="escapeHtml(line.text) || '&nbsp;'"></code>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <Transition name="diff-viewer-sheet">
-          <div
-            v-if="isMobile && isDiffViewerFileListOpen"
-            class="diff-viewer-mobile-sheet-backdrop"
-            @click="closeDiffViewerFileList"
-          >
-            <div class="diff-viewer-mobile-sheet" @click.stop>
-              <div class="diff-viewer-mobile-sheet-handle" aria-hidden="true"></div>
-              <div class="diff-viewer-mobile-sheet-header">
-                <p class="diff-viewer-sidebar-title">Changed files</p>
-                <p class="diff-viewer-sidebar-count">{{ formatFileChangeCountLabel(diffViewerChanges.length) }}</p>
-              </div>
-              <div class="diff-viewer-mobile-sheet-list">
-                <button
-                  v-for="change in diffViewerChanges"
-                  :key="`diff-viewer-sheet:${fileChangeKey(change)}`"
-                  type="button"
-                  class="diff-viewer-file-button"
-                  :data-active="fileChangeKey(change) === fileChangeKey(activeDiffViewerChange)"
-                  @click="selectDiffViewerChange(change)"
-                >
-                  <span class="file-change-badge" :data-operation="fileChangeOperationTone(change)">
-                    {{ fileChangeOperationLabel(change) }}
-                  </span>
-                  <span class="diff-viewer-file-label">
-                    {{ displayFileChangePath(change.path) }}
-                    <template v-if="change.movedToPath"> → {{ displayFileChangePath(change.movedToPath) }}</template>
-                  </span>
-                  <span v-if="formatFileChangeDelta(change)" class="diff-viewer-file-delta">{{ formatFileChangeDelta(change) }}</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-  </section>
-</template>
+<template src="./ThreadConversation.template.html"></template>
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { UiFileChange, UiLiveOverlay, UiMessage, UiPlanStep, UiServerRequest } from '../../types/codex'
 import { useMobile } from '../../composables/useMobile'
+import { getBasename, headingClass, headingTag, inferHomeFromCwd, isFilePath, normalizeFileUrlToPath, normalizePathDots, normalizePathSeparators, parseFileReference, parseMarkdownLinkToken, resolveRelativePath, trimLinkWrappers } from './threadConversationPathHelpers'
+import {
+  aggregateFileChanges,
+  buildDiffViewerLines,
+  fileChangeDeltaParts,
+  fileChangeKey,
+  fileChangeOperationLabel,
+  fileChangeOperationTone,
+  fileChangeSummaryLabel,
+  fileChangeSummaryStatusParts,
+  formatFileChangeDelta,
+  formatFileChangeCountLabel,
+  type DiffViewerLine,
+  type TurnFileChangeSummary,
+} from './threadConversationFileChanges'
 
 import IconTablerArrowUp from '../icons/IconTablerArrowUp.vue'
 import IconTablerCopy from '../icons/IconTablerCopy.vue'
@@ -1159,10 +307,6 @@ function isFileChangeSummaryExpanded(message: UiMessage): boolean {
   return expandedFileChangeSummaryIds.value.has(message.id)
 }
 
-function fileChangeKey(change: UiFileChange): string {
-  return `${change.path}\u0000${change.movedToPath ?? ''}`
-}
-
 function openDiffViewer(summary: TurnFileChangeSummary | null, change: UiFileChange): void {
   if (!summary) return
   activeDiffViewerSummary.value = summary
@@ -1401,211 +545,6 @@ type McpElicitationField = {
   options: McpElicitationFieldOption[]
   defaultValue: string | number | boolean | string[]
 }
-type TurnFileChangeSummary = {
-  changes: UiFileChange[]
-  sourceMessageIds: string[]
-  source: 'assistant' | 'metadata'
-}
-type DiffViewerLineKind = 'meta' | 'hunk' | 'add' | 'remove' | 'context'
-type DiffViewerLine = {
-  key: string
-  kind: DiffViewerLineKind
-  oldLine: number | null
-  newLine: number | null
-  text: string
-}
-
-function isFilePath(value: string): boolean {
-  if (!value || /[\r\n]/u.test(value)) return false
-  if (value.endsWith('/') || value.endsWith('\\')) return false
-  if (/^[A-Za-z][A-Za-z0-9+.-]*:\/\//u.test(value)) return false
-
-  const looksLikeUnixAbsolute = value.startsWith('/')
-  const looksLikeWindowsAbsolute = /^[A-Za-z]:[\\/]/u.test(value)
-  const looksLikeRelative = value.startsWith('./') || value.startsWith('../') || value.startsWith('~/')
-  if (looksLikeUnixAbsolute || looksLikeWindowsAbsolute || looksLikeRelative) return true
-
-  const looksLikeBareFilename = /^[A-Za-z0-9._@() -]+\.[A-Za-z0-9]{1,12}$/u.test(value)
-  if (looksLikeBareFilename) return true
-
-  // Bare relative paths should look like actual path segments, not arbitrary prose containing "/".
-  return /^[A-Za-z0-9._@() -]+(?:[\\/][A-Za-z0-9._@() -]+)+$/u.test(value)
-}
-
-function getBasename(pathValue: string): string {
-  const normalized = pathValue.replace(/\\/gu, '/')
-  const name = normalized.split('/').filter(Boolean).pop()
-  return name || pathValue
-}
-
-function normalizePathSeparators(pathValue: string): string {
-  return pathValue.replace(/\\/gu, '/')
-}
-
-function normalizeFileUrlToPath(pathValue: string): string {
-  if (!pathValue.startsWith('file://')) return pathValue
-  let stripped = pathValue.replace(/^file:\/\//u, '')
-  try {
-    stripped = decodeURIComponent(stripped)
-  } catch {
-    // Keep best-effort path if decoding fails.
-  }
-  if (/^\/[A-Za-z]:\//u.test(stripped)) {
-    stripped = stripped.slice(1)
-  }
-  return stripped
-}
-
-function inferHomeFromCwd(cwd: string): string {
-  const normalized = normalizePathSeparators(cwd)
-  const userMatch = normalized.match(/^\/Users\/([^/]+)/u)
-  if (userMatch) return `/Users/${userMatch[1]}`
-  const homeMatch = normalized.match(/^\/home\/([^/]+)/u)
-  if (homeMatch) return `/home/${homeMatch[1]}`
-  return ''
-}
-
-function normalizePathDots(pathValue: string): string {
-  const normalized = normalizePathSeparators(pathValue)
-  if (!normalized) return normalized
-
-  let root = ''
-  let rest = normalized
-  const driveMatch = rest.match(/^([A-Za-z]:)(\/.*)?$/u)
-  if (driveMatch) {
-    root = `${driveMatch[1]}/`
-    rest = (driveMatch[2] ?? '').replace(/^\/+/u, '')
-  } else if (rest.startsWith('/')) {
-    root = '/'
-    rest = rest.slice(1)
-  }
-
-  const parts = rest.split('/').filter(Boolean)
-  const stack: string[] = []
-  for (const part of parts) {
-    if (part === '.') continue
-    if (part === '..') {
-      if (stack.length > 0) stack.pop()
-      continue
-    }
-    stack.push(part)
-  }
-
-  const joined = stack.join('/')
-  if (root) return `${root}${joined}`.replace(/\/+$/u, '') || root
-  return joined || normalized
-}
-
-function resolveRelativePath(pathValue: string, cwd: string): string {
-  const normalizedPath = normalizePathSeparators(normalizeFileUrlToPath(pathValue.trim()))
-  if (!normalizedPath) return ''
-
-  const looksLikeAbsolute = normalizedPath.startsWith('/') || /^[A-Za-z]:\//u.test(normalizedPath)
-  if (looksLikeAbsolute) return normalizePathDots(normalizedPath)
-
-  if (normalizedPath.startsWith('~/')) {
-    const homeBase = inferHomeFromCwd(cwd)
-    if (homeBase) {
-      return normalizePathDots(`${homeBase}/${normalizedPath.slice(2)}`)
-    }
-  }
-
-  const base = normalizePathSeparators(cwd.trim())
-  if (!base) return normalizePathDots(normalizedPath)
-  return normalizePathDots(`${base.replace(/\/+$/u, '')}/${normalizedPath}`)
-}
-
-function parseFileReference(value: string): { path: string; line: number | null } | null {
-  if (!value) return null
-
-  let pathValue = value.trim()
-  const wrapped = trimLinkWrappers(pathValue)
-  pathValue = wrapped.core.trim()
-  let line: number | null = null
-
-  const hashLineMatch = pathValue.match(/^(.*)#L(\d+)(?:C\d+)?$/u)
-  if (hashLineMatch) {
-    pathValue = hashLineMatch[1]
-    line = Number(hashLineMatch[2])
-  } else {
-    const colonLineMatch = pathValue.match(/^(.*):(\d+)(?::\d+)?$/u)
-    if (colonLineMatch) {
-      pathValue = colonLineMatch[1]
-      line = Number(colonLineMatch[2])
-    }
-  }
-
-  pathValue = normalizeFileUrlToPath(pathValue)
-  if (!isFilePath(pathValue)) return null
-  return { path: pathValue, line }
-}
-
-function trimLinkWrappers(value: string): { core: string; leading: string; trailing: string } {
-  let core = value
-  let leading = ''
-  let trailing = ''
-
-  const wrapperPairs: Record<string, string> = {
-    '(': ')',
-    '[': ']',
-    '{': '}',
-    '<': '>',
-    '"': '"',
-    '\'': '\'',
-    '`': '`',
-    '“': '”',
-    '‘': '’',
-  }
-
-  while (core.length > 0) {
-    const opening = core[0]
-    const closing = Object.prototype.hasOwnProperty.call(wrapperPairs, opening) ? wrapperPairs[opening] : ''
-    if (!closing || !core.endsWith(closing)) break
-    leading += opening
-    trailing += closing
-    core = core.slice(1, -1)
-  }
-
-  return { core, leading, trailing }
-}
-
-function parseMarkdownLinkToken(value: string): { label: string; target: string } | null {
-  const trimmed = value.trim()
-  if (!trimmed.startsWith('[') || !trimmed.endsWith(')')) return null
-  const labelCloseIndex = trimmed.indexOf(']')
-  if (labelCloseIndex <= 1) return null
-  if (trimmed[labelCloseIndex + 1] !== '(') return null
-  const labelRaw = trimmed.slice(1, labelCloseIndex).trim()
-  const targetRaw = trimmed.slice(labelCloseIndex + 2, -1).trim()
-  if (labelRaw.includes('\n') || targetRaw.includes('\n')) return null
-  const label = trimLinkWrappers(labelRaw).core.trim() || labelRaw
-  const target = trimLinkWrappers(targetRaw).core.trim()
-  if (!target) return null
-  return { label, target }
-}
-
-function headingTag(level: number): string {
-  const normalizedLevel = Math.min(6, Math.max(1, Math.trunc(level)))
-  return `h${String(normalizedLevel)}`
-}
-
-function headingClass(level: number): string {
-  switch (Math.min(6, Math.max(1, Math.trunc(level)))) {
-    case 1:
-      return 'message-heading-h1'
-    case 2:
-      return 'message-heading-h2'
-    case 3:
-      return 'message-heading-h3'
-    case 4:
-      return 'message-heading-h4'
-    case 5:
-      return 'message-heading-h5'
-    default:
-      return 'message-heading-h6'
-  }
-}
-
 function planStepCopyMarker(status: UiPlanStep['status']): string {
   switch (status) {
     case 'completed':
@@ -1737,47 +676,6 @@ function showForkResponseButton(message: UiMessage): boolean {
   return typeof forkableTurnIndexByAnchorId.value[message.id] === 'number'
 }
 
-function mergeFileChangeDiff(first: string, second: string): string {
-  if (!first) return second
-  if (!second || first === second) return first
-  return `${first}\n${second}`.trim()
-}
-
-function mergeFileChangeEntry(first: UiFileChange, second: UiFileChange): UiFileChange {
-  const operation = first.operation === 'add' || second.operation === 'add'
-    ? 'add'
-    : first.operation === 'delete' || second.operation === 'delete'
-      ? 'delete'
-      : 'update'
-  return {
-    path: second.path || first.path,
-    operation,
-    movedToPath: second.movedToPath ?? first.movedToPath ?? null,
-    diff: mergeFileChangeDiff(first.diff, second.diff),
-    addedLineCount: first.addedLineCount + second.addedLineCount,
-    removedLineCount: first.removedLineCount + second.removedLineCount,
-  }
-}
-
-function compareFileChanges(first: UiFileChange, second: UiFileChange): number {
-  const firstRank = first.operation === 'add' ? 0 : first.operation === 'update' ? 1 : 2
-  const secondRank = second.operation === 'add' ? 0 : second.operation === 'update' ? 1 : 2
-  if (firstRank !== secondRank) return firstRank - secondRank
-  const firstPath = `${first.path}\u0000${first.movedToPath ?? ''}`
-  const secondPath = `${second.path}\u0000${second.movedToPath ?? ''}`
-  return firstPath.localeCompare(secondPath)
-}
-
-function aggregateFileChanges(changes: UiFileChange[]): UiFileChange[] {
-  const byPath = new Map<string, UiFileChange>()
-  for (const change of changes) {
-    const key = `${change.path}\u0000${change.movedToPath ?? ''}`
-    const previous = byPath.get(key)
-    byPath.set(key, previous ? mergeFileChangeEntry(previous, change) : { ...change })
-  }
-  return Array.from(byPath.values()).sort(compareFileChanges)
-}
-
 const anchoredFileChangeSummaryByAnchorId = computed<Record<string, TurnFileChangeSummary>>(() => {
   const assistantAnchorIdByTurnKey = new Map<string, string>()
   const assistantSummaryByAnchorId = new Map<string, TurnFileChangeSummary>()
@@ -1878,96 +776,6 @@ function readStandaloneFileChangeSummary(message: UiMessage): TurnFileChangeSumm
   return standaloneFileChangeSummaryByMessageId.value[message.id] ?? null
 }
 
-function fileChangeOperationLabel(change: UiFileChange): string {
-  if (change.operation === 'update' && change.movedToPath) {
-    return change.addedLineCount > 0 || change.removedLineCount > 0 ? 'Moved + edited' : 'Moved'
-  }
-  if (change.operation === 'add') return 'Added'
-  if (change.operation === 'delete') return 'Deleted'
-  return 'Edited'
-}
-
-function fileChangeOperationTone(change: UiFileChange): 'add' | 'delete' | 'update' | 'move' {
-  if (change.operation === 'update' && change.movedToPath) return 'move'
-  return change.operation
-}
-
-function formatFileChangeDelta(change: UiFileChange): string {
-  const parts: string[] = []
-  if (change.addedLineCount > 0) parts.push(`+${change.addedLineCount}`)
-  if (change.removedLineCount > 0) parts.push(`-${change.removedLineCount}`)
-  return parts.join(' ')
-}
-
-type FileChangeDeltaTone = 'add' | 'remove' | 'neutral'
-
-type FileChangeDeltaPart = {
-  tone: FileChangeDeltaTone
-  label: string
-}
-
-function buildFileChangeDeltaParts(addedCount: number, removedCount: number, fallbackLabel = ''): FileChangeDeltaPart[] {
-  const parts: FileChangeDeltaPart[] = []
-  if (addedCount > 0) parts.push({ tone: 'add', label: `+${addedCount}` })
-  if (removedCount > 0) parts.push({ tone: 'remove', label: `-${removedCount}` })
-  if (parts.length > 0) return parts
-  return fallbackLabel ? [{ tone: 'neutral', label: fallbackLabel }] : []
-}
-
-function fileChangeDeltaParts(change: UiFileChange): FileChangeDeltaPart[] {
-  return buildFileChangeDeltaParts(change.addedLineCount, change.removedLineCount)
-}
-
-function formatFileChangeCountLabel(count: number): string {
-  return count === 1 ? '1 file changed' : `${count} files changed`
-}
-
-function summarizeFileChangeKinds(summary: TurnFileChangeSummary | null): string {
-  if (!summary || summary.changes.length === 0) return ''
-  let added = 0
-  let deleted = 0
-  let edited = 0
-  let moved = 0
-
-  for (const change of summary.changes) {
-    if (change.operation === 'add') {
-      added += 1
-      continue
-    }
-    if (change.operation === 'delete') {
-      deleted += 1
-      continue
-    }
-    if (change.movedToPath) {
-      moved += 1
-      continue
-    }
-    edited += 1
-  }
-
-  const parts: string[] = []
-  if (edited > 0) parts.push(`${edited} edited`)
-  if (added > 0) parts.push(`${added} added`)
-  if (deleted > 0) parts.push(`${deleted} deleted`)
-  if (moved > 0) parts.push(`${moved} moved`)
-  return parts.join(', ')
-}
-
-function fileChangeSummaryLabel(summary: TurnFileChangeSummary | null): string {
-  if (!summary || summary.changes.length === 0) return 'Modified files'
-  const countLabel = formatFileChangeCountLabel(summary.changes.length)
-  const kindSummary = summarizeFileChangeKinds(summary)
-  return kindSummary ? `${countLabel} · ${kindSummary}` : countLabel
-}
-
-function fileChangeSummaryStatusParts(summary: TurnFileChangeSummary | null): FileChangeDeltaPart[] {
-  if (!summary || summary.changes.length === 0) return []
-  const totalAdded = summary.changes.reduce((sum, change) => sum + change.addedLineCount, 0)
-  const totalRemoved = summary.changes.reduce((sum, change) => sum + change.removedLineCount, 0)
-  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? 'Moved' : 'Ready'
-  return buildFileChangeDeltaParts(totalAdded, totalRemoved, fallbackLabel)
-}
-
 function displayFileChangePath(pathValue: string): string {
   const resolved = resolveRelativePath(pathValue, props.cwd)
   const normalizedCwd = normalizePathDots(normalizePathSeparators(props.cwd.trim()))
@@ -2003,108 +811,6 @@ function inferDiffViewerLanguage(change: UiFileChange): string {
   return CODE_LANGUAGE_ALIASES[extension] ?? extension ?? ''
 }
 
-function hasStructuredUnifiedDiff(change: UiFileChange): boolean {
-  return change.operation === 'update' && /^diff --git |^@@ |^--- |^\+\+\+ |^[ +-]|^\*\*\* (Move to:|End of File)/mu.test(change.diff)
-}
-
-function buildSyntheticDiffLines(change: UiFileChange): DiffViewerLine[] {
-  const normalized = change.diff.replace(/\r\n/g, '\n')
-  const lines = normalized.length > 0 ? normalized.split('\n') : []
-  if (lines.length > 0 && lines[lines.length - 1] === '') {
-    lines.pop()
-  }
-  return lines.map((line, index) => ({
-    key: `${fileChangeKey(change)}:synthetic:${index}`,
-    kind: change.operation === 'delete' ? 'remove' : 'add',
-    oldLine: change.operation === 'delete' ? index + 1 : null,
-    newLine: change.operation === 'delete' ? null : index + 1,
-    text: line,
-  }))
-}
-
-function buildUnifiedDiffLines(change: UiFileChange): DiffViewerLine[] {
-  const normalized = change.diff.replace(/\r\n/g, '\n')
-  const lines = normalized.length > 0 ? normalized.split('\n') : []
-  if (lines.length > 0 && lines[lines.length - 1] === '') {
-    lines.pop()
-  }
-
-  const output: DiffViewerLine[] = []
-  let oldLine = 0
-  let newLine = 0
-
-  for (const [index, line] of lines.entries()) {
-    const hunkMatch = line.match(/^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/u)
-    if (hunkMatch) {
-      oldLine = Number(hunkMatch[1])
-      newLine = Number(hunkMatch[2])
-      output.push({
-        key: `${fileChangeKey(change)}:hunk:${index}`,
-        kind: 'hunk',
-        oldLine: null,
-        newLine: null,
-        text: line,
-      })
-      continue
-    }
-
-    if (line.startsWith('+') && !line.startsWith('+++')) {
-      output.push({
-        key: `${fileChangeKey(change)}:add:${index}`,
-        kind: 'add',
-        oldLine: null,
-        newLine,
-        text: line.slice(1),
-      })
-      newLine += 1
-      continue
-    }
-
-    if (line.startsWith('-') && !line.startsWith('---')) {
-      output.push({
-        key: `${fileChangeKey(change)}:remove:${index}`,
-        kind: 'remove',
-        oldLine,
-        newLine: null,
-        text: line.slice(1),
-      })
-      oldLine += 1
-      continue
-    }
-
-    if (line.startsWith(' ')) {
-      output.push({
-        key: `${fileChangeKey(change)}:context:${index}`,
-        kind: 'context',
-        oldLine,
-        newLine,
-        text: line.slice(1),
-      })
-      oldLine += 1
-      newLine += 1
-      continue
-    }
-
-    output.push({
-      key: `${fileChangeKey(change)}:meta:${index}`,
-      kind: 'meta',
-      oldLine: null,
-      newLine: null,
-      text: line,
-    })
-  }
-
-  return output
-}
-
-function buildDiffViewerLines(change: UiFileChange | null): DiffViewerLine[] {
-  if (!change || !change.diff.trim()) return []
-  if (hasStructuredUnifiedDiff(change)) {
-    return buildUnifiedDiffLines(change)
-  }
-  return buildSyntheticDiffLines(change)
-}
-
 const activeDiffViewerLines = computed<DiffViewerLine[]>(() => buildDiffViewerLines(activeDiffViewerChange.value))
 
 function hasDiffViewerContent(change: UiFileChange | null): boolean {
@@ -4247,1154 +2953,4 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.conversation-root {
-  @apply relative h-full min-h-0 min-w-0 p-0 flex flex-col overflow-y-hidden overflow-x-hidden bg-transparent border-none rounded-none;
-}
-
-.conversation-loading {
-  @apply m-0 px-6 text-sm text-slate-500;
-}
-
-.conversation-empty {
-  @apply m-0 px-6 text-sm text-slate-500;
-}
-
-.conversation-list {
-  @apply h-full min-h-0 list-none m-0 px-2 sm:px-6 py-0 overflow-y-auto overflow-x-visible flex flex-col gap-2 sm:gap-3;
-}
-
-.conversation-load-more {
-  @apply flex justify-center py-3 m-0;
-}
-
-.load-more-button {
-  @apply px-4 py-1.5 text-xs rounded-full border border-slate-300 dark:border-slate-600
-         text-slate-500 dark:text-slate-400 bg-transparent
-         hover:bg-slate-100 dark:hover:bg-slate-800
-         disabled:opacity-40 disabled:cursor-not-allowed
-         transition-colors cursor-pointer;
-}
-
-.conversation-item {
-  @apply m-0 w-full min-w-0 flex;
-}
-
-.conversation-item-request {
-  @apply justify-center;
-}
-
-.conversation-item-overlay {
-  @apply justify-center;
-}
-
-.message-row {
-  @apply relative w-full min-w-0 max-w-[min(var(--chat-column-max,45rem),100%)] mx-auto flex;
-}
-
-.message-row[data-role='user'] {
-  @apply justify-end;
-}
-
-.message-row[data-role='assistant'],
-.message-row[data-role='system'] {
-  @apply justify-start;
-}
-
-.conversation-bottom-anchor {
-  @apply h-px;
-}
-
-.jump-to-latest-button {
-  @apply absolute left-1/2 bottom-4 z-20 inline-flex h-11 w-11 -translate-x-1/2 items-center justify-center rounded-full border border-slate-300 bg-white/96 text-slate-700 shadow-lg shadow-slate-900/10 transition hover:-translate-x-1/2 hover:-translate-y-0.5 hover:bg-white hover:text-slate-900;
-}
-
-.jump-to-latest-icon {
-  transform: rotate(180deg);
-}
-
-.message-stack {
-  @apply flex flex-col w-full min-w-0;
-}
-
-.request-card {
-  @apply w-full max-w-[min(var(--chat-column-max,45rem),100%)] rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 flex flex-col gap-2;
-}
-
-.request-title {
-  @apply m-0 text-sm leading-5 font-semibold text-amber-900;
-}
-
-.request-meta {
-  @apply m-0 text-xs leading-4 text-amber-700;
-}
-
-.request-reason {
-  @apply m-0 text-sm leading-5 text-amber-900 whitespace-pre-wrap break-words;
-  overflow-wrap: anywhere;
-}
-
-.request-actions {
-  @apply flex flex-wrap gap-2;
-}
-
-.request-button {
-  @apply rounded-md border border-amber-300 bg-white px-3 py-1.5 text-xs text-amber-900 hover:bg-amber-100 transition;
-}
-
-.request-button-primary {
-  @apply border-amber-500 bg-amber-500 text-white hover:bg-amber-600;
-}
-
-.request-user-input {
-  @apply flex flex-col gap-3;
-}
-
-.request-question {
-  @apply flex flex-col gap-1;
-}
-
-.request-question-title {
-  @apply m-0 text-sm leading-5 font-medium text-amber-900;
-}
-
-.request-question-text {
-  @apply m-0 text-xs leading-4 text-amber-800;
-}
-
-.request-question-option-description {
-  @apply m-0 text-xs leading-4 text-amber-700;
-}
-
-.request-link {
-  @apply inline-flex w-fit rounded-md border border-amber-300 bg-white px-3 py-1.5 text-xs text-amber-900 hover:bg-amber-100 transition;
-}
-
-.request-select {
-  @apply h-8 rounded-md border border-amber-300 bg-white px-2 text-sm text-amber-900;
-}
-
-.request-input {
-  @apply h-8 rounded-md border border-amber-300 bg-white px-2 text-sm text-amber-900 placeholder:text-amber-500;
-}
-
-.request-checkbox-list {
-  @apply flex flex-col gap-1.5;
-}
-
-.request-checkbox-row {
-  @apply flex items-center gap-2 text-sm text-amber-900;
-}
-
-.live-overlay-inline {
-  @apply w-full max-w-[min(var(--chat-column-max,45rem),100%)] px-0 py-1 flex flex-col gap-1;
-}
-
-.live-overlay-label {
-  @apply m-0 text-sm leading-5 font-medium text-zinc-600;
-}
-
-.live-overlay-reasoning {
-  @apply m-0 text-sm leading-5 text-zinc-500 whitespace-pre-wrap break-words;
-  display: block;
-  max-height: calc(1.25rem * 5);
-  overflow: auto;
-  overflow-wrap: anywhere;
-  scrollbar-width: none;
-  mask-image: linear-gradient(to top, black 75%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to top, black 75%, transparent 100%);
-}
-
-.live-overlay-reasoning::-webkit-scrollbar {
-  display: none;
-}
-
-.live-overlay-error {
-  @apply m-0 text-sm leading-5 text-rose-600 whitespace-pre-wrap;
-}
-
-.message-body {
-  @apply flex flex-col min-w-0 max-w-full;
-  width: fit-content;
-}
-
-.message-body[data-role='user'] {
-  @apply ml-auto items-end;
-  align-self: flex-end;
-}
-
-.message-toolbar {
-  @apply mt-1 self-start flex items-center gap-1 opacity-[0.01] transition-opacity duration-200;
-}
-
-.message-row:hover .message-toolbar {
-  @apply opacity-100;
-}
-
-.message-copy-button {
-  @apply inline-flex items-center gap-0.5 rounded-full border border-slate-200 bg-white/90 px-1.25 py-0.5 text-[9px] font-medium leading-none text-slate-500 transition hover:border-slate-300 hover:bg-white hover:text-slate-900;
-}
-
-.message-fork-button {
-  @apply inline-flex items-center gap-0.5 px-0.5 py-0 text-[9px] font-medium leading-none text-slate-500 transition hover:text-slate-900;
-}
-
-
-.message-copy-button[data-copied='true'] {
-  @apply border-emerald-200 bg-emerald-50 text-emerald-700;
-}
-
-.message-edit-button {
-  @apply inline-flex items-center gap-0.5 px-0.5 py-0 text-[9px] font-medium leading-none text-amber-600/70 transition hover:text-amber-700;
-}
-
-.message-fork-icon,
-.message-copy-icon,
-.message-edit-icon {
-  @apply text-[10px];
-}
-
-.message-fork-label,
-.message-copy-label,
-.message-edit-label {
-  @apply leading-none;
-}
-
-.message-image-list {
-  @apply list-none m-0 mb-2 p-0 flex flex-wrap gap-2;
-}
-
-.message-image-list[data-role='user'] {
-  @apply ml-auto justify-end;
-}
-
-.message-generated-image-list {
-  @apply gap-3;
-}
-
-.message-image-item {
-  @apply m-0;
-}
-
-.message-image-button {
-  @apply block rounded-xl overflow-hidden border border-slate-300 bg-white p-0 transition hover:border-slate-400;
-}
-
-.message-image-preview {
-  @apply block w-16 h-16 object-cover;
-}
-
-.message-generated-image-preview {
-  @apply w-auto h-auto max-w-[min(560px,85vw)] max-h-[min(460px,62vh)] object-contain bg-white;
-}
-
-.message-file-attachments {
-  @apply mb-2 flex flex-wrap gap-1.5;
-}
-
-.message-skill-attachments {
-  @apply mb-2 flex flex-wrap justify-end gap-1.5;
-}
-
-.message-file-chip {
-  @apply inline-flex items-center gap-1 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-0.5 text-xs text-zinc-700;
-}
-
-.message-skill-chip {
-  @apply inline-flex max-w-full items-center gap-1.5 rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs text-emerald-800 no-underline transition hover:border-emerald-300 hover:bg-emerald-100 hover:text-emerald-900;
-}
-
-.message-skill-chip-prefix {
-  @apply shrink-0 font-medium text-emerald-700;
-}
-
-.message-skill-chip-name {
-  @apply min-w-0 max-w-48 truncate font-mono;
-}
-
-.message-file-chip-icon {
-  @apply text-[10px] leading-none;
-}
-
-.message-file-chip-name {
-  @apply truncate max-w-48 font-mono;
-}
-
-.message-card {
-  @apply max-w-[min(var(--chat-card-max,76ch),100%)] px-0 py-0 bg-transparent border-none rounded-none;
-}
-
-.message-text-flow {
-  @apply flex flex-col gap-2;
-}
-
-.plan-card {
-  @apply flex max-w-[min(var(--chat-card-max,76ch),100%)] flex-col gap-3 rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-slate-900;
-}
-
-.plan-card-header {
-  @apply flex items-center justify-between gap-3;
-}
-
-.plan-card-title {
-  @apply m-0 text-sm font-semibold leading-5 text-sky-900;
-}
-
-.plan-card-badge {
-  @apply inline-flex items-center rounded-full bg-sky-200 px-2 py-0.5 text-[11px] font-medium leading-4 text-sky-900;
-}
-
-.plan-card-explanation {
-  @apply text-slate-700;
-}
-
-.plan-card-markdown {
-  @apply flex flex-col gap-2;
-}
-
-.plan-card-markdown :deep(.message-text),
-.plan-card-markdown :deep(.message-heading),
-.plan-card-markdown :deep(.message-blockquote),
-.plan-card-markdown :deep(.message-list),
-.plan-card-markdown :deep(.message-table-wrap),
-.plan-card-markdown :deep(.message-code-block),
-.plan-card-markdown :deep(.message-divider) {
-  @apply m-0;
-}
-
-.plan-card-markdown :deep(.message-text) {
-  @apply text-sm leading-relaxed whitespace-pre-wrap text-slate-800;
-}
-
-.plan-card-markdown :deep(.message-heading) {
-  @apply text-slate-900 tracking-tight;
-}
-
-.plan-card-markdown :deep(.message-heading-h1) {
-  @apply text-2xl font-semibold leading-tight;
-}
-
-.plan-card-markdown :deep(.message-heading-h2) {
-  @apply text-xl font-semibold leading-tight;
-}
-
-.plan-card-markdown :deep(.message-heading-h3) {
-  @apply text-lg font-semibold leading-snug;
-}
-
-.plan-card-markdown :deep(.message-heading-h4) {
-  @apply text-base font-semibold leading-snug;
-}
-
-.plan-card-markdown :deep(.message-heading-h5) {
-  @apply text-sm font-semibold leading-snug uppercase tracking-[0.02em];
-}
-
-.plan-card-markdown :deep(.message-heading-h6) {
-  @apply text-xs font-semibold leading-snug uppercase tracking-[0.04em] text-slate-600;
-}
-
-.plan-card-markdown :deep(.message-blockquote) {
-  @apply border-l-4 border-slate-300 pl-4 py-1 text-sm leading-relaxed whitespace-pre-wrap text-slate-700 bg-slate-50/70 rounded-r-lg;
-}
-
-.plan-card-markdown :deep(.message-list) {
-  @apply pl-5 text-sm leading-relaxed text-slate-800 flex flex-col gap-1.5;
-}
-
-.plan-card-markdown :deep(.message-list-unordered) {
-  @apply list-disc;
-}
-
-.plan-card-markdown :deep(.message-list-ordered) {
-  @apply list-decimal;
-}
-
-.plan-card-markdown :deep(.message-list-item) {
-  @apply pl-1;
-}
-
-.plan-card-markdown :deep(.message-list-item-text) {
-  @apply whitespace-pre-wrap;
-}
-
-.plan-card-markdown :deep(.message-list-item-paragraph + .message-list-item-paragraph) {
-  @apply mt-2;
-}
-
-.plan-card-markdown :deep(.message-task-list) {
-  @apply list-none pl-0;
-}
-
-.plan-card-markdown :deep(.message-task-item) {
-  @apply flex items-start gap-2;
-}
-
-.plan-card-markdown :deep(.message-task-checkbox) {
-  @apply mt-0.5 text-sm leading-none text-slate-500 select-none;
-}
-
-.plan-card-markdown :deep(.message-code-block) {
-  @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-950/95 text-slate-100;
-}
-
-.plan-card-markdown :deep(.message-code-language) {
-  @apply border-b border-slate-800 bg-slate-900/90 px-3 py-2 text-[11px] font-medium uppercase tracking-[0.08em] text-slate-400;
-}
-
-.plan-card-markdown :deep(.message-code-pre) {
-  @apply m-0 overflow-x-auto px-3 py-3 text-[13px] leading-6;
-}
-
-.plan-card-markdown :deep(.message-inline-code) {
-  @apply rounded-md bg-slate-200/80 px-1.5 py-0.5 font-mono text-[0.9em] text-slate-900;
-}
-
-.plan-card-markdown :deep(.message-file-link) {
-  @apply text-sky-700 underline decoration-sky-300 underline-offset-2;
-}
-
-.plan-card-markdown :deep(.message-table) {
-  @apply bg-white/90;
-}
-
-.plan-step-list {
-  @apply m-0 flex list-none flex-col gap-2 p-0;
-}
-
-.plan-step-item {
-  @apply flex items-start gap-2 rounded-xl border border-white/70 bg-white/80 px-3 py-2 text-sm leading-relaxed text-slate-800;
-}
-
-.plan-step-item[data-status='completed'] {
-  @apply border-emerald-200 bg-emerald-50/80;
-}
-
-.plan-step-item[data-status='inProgress'] {
-  @apply border-amber-200 bg-amber-50/80;
-}
-
-.plan-step-status {
-  @apply mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold text-slate-700;
-}
-
-.plan-step-status[data-status='completed'] {
-  @apply bg-emerald-200 text-emerald-900;
-}
-
-.plan-step-status[data-status='inProgress'] {
-  @apply bg-amber-200 text-amber-900;
-}
-
-.plan-step-text {
-  @apply min-w-0 flex-1;
-}
-
-.plan-card-actions {
-  @apply mt-3 flex justify-end;
-}
-
-.plan-card-implement-button {
-  @apply inline-flex items-center rounded-full border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-800 transition hover:border-slate-400 hover:bg-slate-50;
-}
-
-.message-text {
-  @apply m-0 text-sm leading-relaxed whitespace-pre-wrap break-words text-slate-800;
-  overflow-wrap: anywhere;
-}
-
-.message-heading {
-  @apply m-0 text-slate-900 tracking-tight;
-}
-
-.message-heading-h1 {
-  @apply text-2xl font-semibold leading-tight;
-}
-
-.message-heading-h2 {
-  @apply text-xl font-semibold leading-tight;
-}
-
-.message-heading-h3 {
-  @apply text-lg font-semibold leading-snug;
-}
-
-.message-heading-h4 {
-  @apply text-base font-semibold leading-snug;
-}
-
-.message-heading-h5 {
-  @apply text-sm font-semibold leading-snug uppercase tracking-[0.02em];
-}
-
-.message-heading-h6 {
-  @apply text-xs font-semibold leading-snug uppercase tracking-[0.04em] text-slate-600;
-}
-
-.message-blockquote {
-  @apply m-0 border-l-4 border-slate-300 pl-4 py-1 text-sm leading-relaxed whitespace-pre-wrap break-words text-slate-700 bg-slate-50/70 rounded-r-lg;
-  overflow-wrap: anywhere;
-}
-
-.message-list {
-  @apply m-0 pl-5 text-sm leading-relaxed text-slate-800 flex flex-col gap-1.5;
-}
-
-.message-list-unordered {
-  @apply list-disc;
-}
-
-.message-list-ordered {
-  @apply list-decimal;
-}
-
-.message-list-item {
-  @apply pl-1;
-}
-
-.message-list-item-content {
-  @apply flex flex-col gap-1.5;
-}
-
-.message-list-item-text {
-  @apply whitespace-pre-wrap break-words;
-  overflow-wrap: anywhere;
-}
-
-.message-list-item-paragraph + .message-list-item-paragraph {
-  @apply mt-2;
-}
-
-.message-task-list {
-  @apply list-none pl-0;
-}
-
-.message-task-item {
-  @apply flex items-start gap-2;
-}
-
-.message-task-checkbox {
-  @apply mt-0.5 text-sm leading-none text-slate-500 select-none;
-}
-
-.message-table-wrap {
-  @apply w-full overflow-x-auto;
-}
-
-.message-table {
-  @apply min-w-full border-separate border-spacing-0 overflow-hidden rounded-xl border border-slate-200 bg-white text-sm text-slate-800;
-}
-
-.message-table-head-cell,
-.message-table-cell {
-  @apply border-b border-l border-slate-200 px-3 py-2 align-top whitespace-pre-wrap break-words;
-  overflow-wrap: anywhere;
-}
-
-.message-table-head-cell:first-child,
-.message-table-cell:first-child {
-  @apply border-l-0;
-}
-
-.message-table-head-cell {
-  @apply bg-slate-100 font-semibold text-slate-900;
-}
-
-.message-table-body-row:last-child .message-table-cell {
-  @apply border-b-0;
-}
-
-.message-bold-text {
-  @apply font-semibold text-slate-900;
-}
-
-.message-italic-text {
-  @apply italic;
-}
-
-.message-strikethrough-text {
-  @apply line-through text-slate-500;
-}
-
-.message-markdown-image {
-  @apply w-auto h-auto max-w-[min(560px,85vw)] max-h-[min(460px,62vh)] object-contain bg-white;
-}
-
-.message-inline-code {
-  @apply rounded-md border border-slate-200 bg-slate-100/60 px-1.5 py-0.5 text-[0.875em] leading-[1.4] text-slate-900 font-mono;
-}
-
-.message-code-block {
-  @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-950 text-slate-100;
-}
-
-.message-code-language {
-  @apply border-b border-slate-800 px-3 py-2 text-[11px] font-mono uppercase tracking-[0.08em] text-slate-400;
-}
-
-.message-code-pre {
-  @apply m-0 overflow-x-auto px-3 py-3 text-[13px] leading-relaxed font-mono whitespace-pre;
-}
-
-.message-code-pre :deep(.hljs) {
-  @apply block bg-transparent p-0 text-inherit;
-}
-
-.message-file-link {
-  @apply text-sm leading-relaxed text-[#0969da] no-underline hover:text-[#1f6feb] hover:underline underline-offset-2;
-}
-
-.file-link-context-menu {
-  @apply fixed z-50 min-w-36 rounded-lg border border-zinc-200 bg-white p-1 shadow-xl;
-}
-
-.file-link-context-menu-item {
-  @apply block w-full rounded-md px-2 py-1.5 text-left text-xs text-zinc-700 hover:bg-zinc-100;
-}
-
-.message-divider {
-  @apply m-0 border-0 h-px bg-slate-300/80;
-}
-
-.message-stack[data-role='user'] {
-  @apply items-end;
-}
-
-.message-stack[data-role='assistant'],
-.message-stack[data-role='system'] {
-  @apply items-start;
-}
-
-.message-card[data-role='user'] {
-  @apply rounded-2xl bg-slate-200 px-4 py-3 max-w-[min(560px,100%)];
-  width: fit-content;
-  margin-left: auto;
-  align-self: flex-end;
-}
-
-.automation-message-label {
-  @apply mb-2 flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500;
-}
-
-.automation-message-label code {
-  @apply rounded-full bg-white/70 px-2 py-0.5 text-[10px] normal-case tracking-normal text-slate-600;
-}
-
-.message-card[data-role='assistant'],
-.message-card[data-role='system'] {
-  @apply px-0 py-0 bg-transparent border-none rounded-none;
-}
-
-:global(.dark) .message-file-chip {
-  @apply border-zinc-700 bg-zinc-900 text-zinc-200;
-}
-
-:global(.dark) .message-skill-chip {
-  @apply border-emerald-800/70 bg-emerald-950/50 text-emerald-100;
-}
-
-:global(.dark) .message-skill-chip-prefix {
-  @apply text-emerald-300;
-}
-
-.conversation-item[data-message-type='worked'] .message-stack,
-.conversation-item[data-message-type='worked'] .message-body,
-.conversation-item[data-message-type='worked'] .message-card {
-  @apply w-full max-w-full;
-}
-
-.worked-separator-wrap {
-  @apply w-full flex flex-col gap-0;
-}
-
-.worked-separator {
-  @apply w-full flex items-center gap-3 bg-transparent border-none cursor-pointer p-0;
-}
-
-.worked-chevron {
-  @apply text-[9px] text-zinc-400 transition-transform duration-200 flex-shrink-0;
-}
-
-.worked-chevron-open {
-  transform: rotate(90deg);
-}
-
-.worked-separator-line {
-  @apply h-px bg-zinc-300/80 flex-1;
-}
-
-.worked-separator-text {
-  @apply m-0 text-sm leading-relaxed font-normal text-slate-800;
-}
-
-.worked-details {
-  @apply flex flex-col gap-1.5 pt-2;
-}
-
-.worked-cmd-item {
-  @apply flex flex-col;
-}
-
-.image-modal-backdrop {
-  @apply fixed inset-0 z-50 bg-black/40 p-6 flex items-center justify-center;
-}
-
-.image-modal-content {
-  @apply relative max-w-[min(92vw,1100px)] max-h-[92vh];
-}
-
-.image-modal-close {
-  @apply absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-white/90 text-slate-900 border border-slate-300 flex items-center justify-center;
-}
-
-.image-modal-image {
-  @apply block max-w-full max-h-[90vh] rounded-2xl shadow-2xl bg-white;
-}
-
-.icon-svg {
-  @apply w-5 h-5;
-}
-
-.cmd-row {
-  @apply w-full flex items-center gap-2 px-3 py-1.5 rounded-lg border border-zinc-200 bg-zinc-50 cursor-pointer transition text-left hover:bg-zinc-100;
-}
-
-.cmd-row.cmd-row-group {
-  @apply border-dashed border-zinc-300 bg-zinc-100/90 text-zinc-600;
-}
-
-.cmd-row.cmd-compact {
-  gap: 0.375rem;
-  padding: 0.375rem 0.625rem;
-  border-radius: 0.625rem;
-}
-
-.cmd-row.cmd-compact .cmd-chevron {
-  font-size: 9px;
-}
-
-.cmd-row.cmd-compact .cmd-label {
-  font-size: 0.75rem;
-}
-
-.cmd-row.cmd-compact .cmd-status {
-  max-width: 4.5rem;
-  font-size: 0.75rem;
-}
-
-.cmd-row.cmd-expanded {
-  @apply rounded-b-none;
-}
-
-.cmd-chevron {
-  @apply text-[10px] text-zinc-400 transition-transform duration-150 flex-shrink-0;
-}
-
-.cmd-chevron-open {
-  transform: rotate(90deg);
-}
-
-.cmd-label {
-  @apply flex-1 min-w-0 truncate text-xs font-mono text-zinc-700;
-}
-
-.cmd-group-label {
-  @apply flex-1 min-w-0 truncate text-xs font-medium text-zinc-600;
-}
-
-.cmd-status {
-  @apply max-w-24 truncate text-right text-[11px] font-medium flex-shrink-0;
-}
-
-.cmd-status-running .cmd-status {
-  @apply text-amber-600;
-}
-
-.cmd-status-ok .cmd-status {
-  @apply text-emerald-600;
-}
-
-.cmd-status-error .cmd-status {
-  @apply text-rose-600;
-}
-
-.cmd-output-wrap {
-  @apply rounded-b-lg bg-zinc-900;
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 300ms ease-out, border-color 300ms ease-out;
-  border: 1px solid transparent;
-  border-top: none;
-}
-
-.cmd-output-wrap.cmd-output-visible {
-  grid-template-rows: 1fr;
-  border-color: #e4e4e7;
-}
-
-.cmd-group-wrap {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 220ms ease-out;
-}
-
-.cmd-group-wrap.cmd-group-visible {
-  grid-template-rows: 1fr;
-}
-
-.cmd-group-inner {
-  @apply mb-1 flex min-h-0 flex-col gap-1 overflow-hidden pl-2;
-}
-
-.cmd-output-inner {
-  overflow: hidden;
-  min-height: 0;
-}
-
-.cmd-output {
-  @apply m-0 px-3 py-2 text-xs font-mono text-zinc-200 whitespace-pre-wrap break-words max-h-60 overflow-y-auto;
-}
-
-.cmd-output.cmd-output-condensed {
-  max-height: 9rem;
-}
-
-.file-change-summary-block {
-  @apply mt-3 flex flex-col gap-0;
-}
-
-.file-change-summary-block-inline {
-  @apply mt-4;
-}
-
-.file-change-summary-row {
-  @apply border-dashed;
-}
-
-.file-change-summary-label {
-  @apply flex-1 min-w-0 truncate text-xs font-medium text-zinc-700;
-}
-
-.file-change-summary-status {
-  @apply inline-flex max-w-28 items-center justify-end gap-1.5 text-right text-[11px] font-semibold text-zinc-500 flex-shrink-0;
-}
-
-.file-change-panel-inner {
-  @apply mb-1 min-h-0 overflow-hidden pl-2;
-}
-
-.file-change-list {
-  @apply m-0 flex list-none flex-col gap-0.5 rounded-xl border border-zinc-200 bg-white/80 p-1.5;
-}
-
-.file-change-item {
-  @apply flex flex-wrap items-center gap-1.5 rounded-lg px-2 py-1 text-sm text-zinc-700;
-}
-
-.file-change-badge {
-  @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.08em];
-}
-
-.file-change-badge[data-operation='add'] {
-  @apply bg-emerald-50 text-emerald-700;
-}
-
-.file-change-badge[data-operation='update'] {
-  @apply bg-sky-50 text-sky-700;
-}
-
-.file-change-badge[data-operation='delete'] {
-  @apply bg-rose-50 text-rose-700;
-}
-
-.file-change-badge[data-operation='move'] {
-  @apply bg-amber-50 text-amber-700;
-}
-
-.file-change-path {
-  @apply min-w-0 break-all font-mono text-[13px];
-}
-
-.file-change-path-button {
-  @apply min-w-0 border-0 bg-transparent p-0 text-left font-mono text-[13px] text-[#0969da] hover:text-[#1f6feb] hover:underline underline-offset-2;
-}
-
-.file-change-arrow {
-  @apply text-zinc-400;
-}
-
-.file-change-delta {
-  @apply ml-auto inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-2 py-1 text-[11px] font-semibold text-zinc-600;
-}
-
-.file-change-signed-count {
-  @apply inline-flex items-center whitespace-nowrap;
-}
-
-.file-change-signed-count[data-tone='add'] {
-  @apply text-emerald-600;
-}
-
-.file-change-signed-count[data-tone='remove'] {
-  @apply text-rose-600;
-}
-
-.diff-viewer-backdrop {
-  @apply fixed inset-0 z-50 bg-black/45 p-3 sm:p-6 flex items-center justify-center;
-}
-
-.diff-viewer-shell {
-  @apply relative grid h-[min(88vh,920px)] w-[min(96vw,1320px)] grid-cols-1 overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-2xl lg:grid-cols-[320px_minmax(0,1fr)];
-}
-
-.diff-viewer-sidebar {
-  @apply flex min-h-0 flex-col border-b border-zinc-200 bg-zinc-50 lg:border-b-0 lg:border-r;
-}
-
-.diff-viewer-sidebar-header {
-  @apply flex items-center justify-between gap-3 border-b border-zinc-200 px-4 py-4;
-}
-
-.diff-viewer-sidebar-title {
-  @apply m-0 text-sm font-semibold text-zinc-900;
-}
-
-.diff-viewer-sidebar-count {
-  @apply m-0 text-xs font-medium text-zinc-500;
-}
-
-.diff-viewer-sidebar-list {
-  @apply flex min-h-0 flex-col gap-2 overflow-y-auto p-3;
-}
-
-.diff-viewer-file-button {
-  @apply flex w-full flex-col items-start gap-2 rounded-2xl border border-transparent bg-transparent px-3 py-3 text-left transition hover:border-zinc-200 hover:bg-white;
-}
-
-.diff-viewer-file-button[data-active='true'] {
-  @apply border-sky-200 bg-white shadow-sm;
-}
-
-.diff-viewer-file-label {
-  @apply break-all font-mono text-[13px] text-zinc-700;
-}
-
-.diff-viewer-file-delta {
-  @apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-1 text-[11px] font-medium text-zinc-600;
-}
-
-.diff-viewer-main {
-  @apply flex min-h-0 flex-col bg-white;
-}
-
-.diff-viewer-toolbar {
-  @apply flex items-start justify-between gap-4 border-b border-zinc-200 px-5 py-4;
-}
-
-.diff-viewer-toolbar-actions {
-  @apply flex items-center gap-2 shrink-0;
-}
-
-.diff-viewer-title-wrap {
-  @apply min-w-0;
-}
-
-.diff-viewer-title {
-  @apply m-0 break-all text-base font-semibold text-zinc-900;
-}
-
-.diff-viewer-subtitle {
-  @apply mt-1 mb-0 text-sm text-zinc-500;
-}
-
-.diff-viewer-close {
-  @apply static shrink-0 border-zinc-200 bg-zinc-100 text-zinc-700;
-}
-
-.diff-viewer-mobile-files-button {
-  @apply inline-flex items-center rounded-full border border-zinc-200 bg-zinc-100 px-3 py-1.5 text-xs font-medium text-zinc-700;
-}
-
-.diff-viewer-empty {
-  @apply flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center;
-}
-
-.diff-viewer-empty-title {
-  @apply m-0 text-base font-semibold text-zinc-900;
-}
-
-.diff-viewer-empty-text {
-  @apply mt-2 max-w-2xl text-sm leading-relaxed text-zinc-500;
-}
-
-.diff-viewer-panel {
-  @apply flex min-h-0 flex-1 flex-col;
-}
-
-.diff-viewer-meta {
-  @apply border-b border-zinc-200 bg-zinc-50 px-5 py-2;
-}
-
-.diff-viewer-language {
-  @apply inline-flex items-center rounded-full bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-zinc-700;
-}
-
-.diff-viewer-lines {
-  @apply min-h-0 flex-1 overflow-auto bg-zinc-950;
-}
-
-.diff-viewer-line {
-  display: grid;
-  grid-template-columns: 4rem 4rem 2rem minmax(0, 1fr);
-  align-items: stretch;
-  min-width: fit-content;
-}
-
-.diff-viewer-line-number {
-  @apply border-r border-zinc-800 px-3 py-1.5 text-right font-mono text-xs text-zinc-500 select-none;
-}
-
-.diff-viewer-line-marker {
-  @apply border-r border-zinc-800 px-2 py-1.5 text-center font-mono text-xs text-zinc-500 select-none;
-}
-
-.diff-viewer-line-code {
-  @apply block whitespace-pre px-3 py-1.5 font-mono text-[12px] leading-5 text-zinc-100;
-}
-
-.diff-viewer-line[data-kind='meta'] {
-  @apply bg-zinc-900;
-}
-
-.diff-viewer-line[data-kind='meta'] .diff-viewer-line-code,
-.diff-viewer-line[data-kind='meta'] .diff-viewer-line-marker {
-  @apply text-sky-300;
-}
-
-.diff-viewer-line[data-kind='hunk'] {
-  @apply bg-sky-950/40;
-}
-
-.diff-viewer-line[data-kind='hunk'] .diff-viewer-line-code,
-.diff-viewer-line[data-kind='hunk'] .diff-viewer-line-marker {
-  @apply text-sky-300;
-}
-
-.diff-viewer-line[data-kind='add'] {
-  background: rgba(20, 83, 45, 0.38);
-}
-
-.diff-viewer-line[data-kind='add'] .diff-viewer-line-marker,
-.diff-viewer-line[data-kind='add'] .diff-viewer-line-code {
-  @apply text-emerald-200;
-}
-
-.diff-viewer-line[data-kind='remove'] {
-  background: rgba(127, 29, 29, 0.32);
-}
-
-.diff-viewer-line[data-kind='remove'] .diff-viewer-line-marker,
-.diff-viewer-line[data-kind='remove'] .diff-viewer-line-code {
-  @apply text-rose-200;
-}
-
-.diff-viewer-line[data-kind='context'] {
-  @apply bg-zinc-950;
-}
-
-.diff-viewer-line[data-kind='context'] .diff-viewer-line-code {
-  @apply text-zinc-100;
-}
-
-.diff-viewer-mobile-sheet-backdrop {
-  @apply absolute inset-0 z-20 bg-black/35 flex items-end;
-}
-
-.diff-viewer-mobile-sheet {
-  @apply w-full max-h-[70vh] rounded-t-3xl bg-white shadow-2xl border-t border-zinc-200 flex flex-col overflow-hidden;
-}
-
-.diff-viewer-mobile-sheet-handle {
-  @apply mx-auto mt-3 h-1.5 w-12 rounded-full bg-zinc-300;
-}
-
-.diff-viewer-mobile-sheet-header {
-  @apply flex items-center justify-between gap-3 px-4 pt-3 pb-2 border-b border-zinc-200;
-}
-
-.diff-viewer-mobile-sheet-list {
-  @apply flex min-h-0 flex-col gap-2 overflow-y-auto px-3 py-3;
-}
-
-.diff-viewer-sheet-enter-active,
-.diff-viewer-sheet-leave-active {
-  @apply transition-opacity duration-200;
-}
-
-.diff-viewer-sheet-enter-active .diff-viewer-mobile-sheet,
-.diff-viewer-sheet-leave-active .diff-viewer-mobile-sheet {
-  transition: transform 200ms ease;
-}
-
-.diff-viewer-sheet-enter-from,
-.diff-viewer-sheet-leave-to {
-  @apply opacity-0;
-}
-
-.diff-viewer-sheet-enter-from .diff-viewer-mobile-sheet,
-.diff-viewer-sheet-leave-to .diff-viewer-mobile-sheet {
-  transform: translateY(100%);
-}
-
-@media (max-width: 767px) {
-  .diff-viewer-backdrop {
-    @apply p-0 items-stretch;
-  }
-
-  .diff-viewer-shell {
-    @apply h-[100dvh] w-screen rounded-none border-0 shadow-none;
-  }
-
-  .diff-viewer-main {
-    @apply min-w-0;
-  }
-
-  .diff-viewer-toolbar {
-    @apply sticky top-0 z-10 bg-white px-3 py-3;
-  }
-
-  .diff-viewer-title {
-    @apply text-sm leading-5;
-  }
-
-  .diff-viewer-subtitle {
-    @apply text-xs;
-  }
-
-  .diff-viewer-meta {
-    @apply px-3 py-2;
-  }
-
-  .diff-viewer-language {
-    @apply text-[10px];
-  }
-
-  .diff-viewer-line {
-    grid-template-columns: 2.75rem 2.75rem 1.5rem minmax(0, 1fr);
-  }
-
-  .diff-viewer-line-number {
-    @apply px-1.5 py-1 text-[10px];
-  }
-
-  .diff-viewer-line-marker {
-    @apply px-1 py-1 text-[10px];
-  }
-
-  .diff-viewer-line-code {
-    @apply px-2 py-1 text-[11px] leading-5;
-  }
-}
-</style>
+<style scoped src="./ThreadConversation.scoped.css"></style>
diff --git a/src/components/content/threadConversationFileChanges.ts b/src/components/content/threadConversationFileChanges.ts
new file mode 100644
index 000000000..f0041d345
--- /dev/null
+++ b/src/components/content/threadConversationFileChanges.ts
@@ -0,0 +1,252 @@
+import type { UiFileChange } from '../../types/codex'
+
+export type TurnFileChangeSummary = {
+  changes: UiFileChange[]
+  sourceMessageIds: string[]
+  source: 'assistant' | 'metadata'
+}
+export type DiffViewerLineKind = 'meta' | 'hunk' | 'add' | 'remove' | 'context'
+export type DiffViewerLine = {
+  key: string
+  kind: DiffViewerLineKind
+  oldLine: number | null
+  newLine: number | null
+  text: string
+}
+
+export function fileChangeKey(change: UiFileChange): string {
+  return `${change.path}\u0000${change.movedToPath ?? ''}`
+}
+
+export function mergeFileChangeDiff(first: string, second: string): string {
+  if (!first) return second
+  if (!second || first === second) return first
+  return `${first}\n${second}`.trim()
+}
+
+export function mergeFileChangeEntry(first: UiFileChange, second: UiFileChange): UiFileChange {
+  const operation = first.operation === 'add' || second.operation === 'add'
+    ? 'add'
+    : first.operation === 'delete' || second.operation === 'delete'
+      ? 'delete'
+      : 'update'
+  return {
+    path: second.path || first.path,
+    operation,
+    movedToPath: second.movedToPath ?? first.movedToPath ?? null,
+    diff: mergeFileChangeDiff(first.diff, second.diff),
+    addedLineCount: first.addedLineCount + second.addedLineCount,
+    removedLineCount: first.removedLineCount + second.removedLineCount,
+  }
+}
+
+export function compareFileChanges(first: UiFileChange, second: UiFileChange): number {
+  const firstRank = first.operation === 'add' ? 0 : first.operation === 'update' ? 1 : 2
+  const secondRank = second.operation === 'add' ? 0 : second.operation === 'update' ? 1 : 2
+  if (firstRank !== secondRank) return firstRank - secondRank
+  const firstPath = `${first.path}\u0000${first.movedToPath ?? ''}`
+  const secondPath = `${second.path}\u0000${second.movedToPath ?? ''}`
+  return firstPath.localeCompare(secondPath)
+}
+
+export function aggregateFileChanges(changes: UiFileChange[]): UiFileChange[] {
+  const byPath = new Map<string, UiFileChange>()
+  for (const change of changes) {
+    const key = `${change.path}\u0000${change.movedToPath ?? ''}`
+    const previous = byPath.get(key)
+    byPath.set(key, previous ? mergeFileChangeEntry(previous, change) : { ...change })
+  }
+  return Array.from(byPath.values()).sort(compareFileChanges)
+}
+
+export function fileChangeOperationLabel(change: UiFileChange): string {
+  if (change.operation === 'update' && change.movedToPath) {
+    return change.addedLineCount > 0 || change.removedLineCount > 0 ? 'Moved + edited' : 'Moved'
+  }
+  if (change.operation === 'add') return 'Added'
+  if (change.operation === 'delete') return 'Deleted'
+  return 'Edited'
+}
+
+export function fileChangeOperationTone(change: UiFileChange): 'add' | 'delete' | 'update' | 'move' {
+  if (change.operation === 'update' && change.movedToPath) return 'move'
+  return change.operation
+}
+
+export function formatFileChangeDelta(change: UiFileChange): string {
+  const parts: string[] = []
+  if (change.addedLineCount > 0) parts.push(`+${change.addedLineCount}`)
+  if (change.removedLineCount > 0) parts.push(`-${change.removedLineCount}`)
+  return parts.join(' ')
+}
+
+export type FileChangeDeltaTone = 'add' | 'remove' | 'neutral'
+
+export type FileChangeDeltaPart = {
+  tone: FileChangeDeltaTone
+  label: string
+}
+
+export function buildFileChangeDeltaParts(addedCount: number, removedCount: number, fallbackLabel = ''): FileChangeDeltaPart[] {
+  const parts: FileChangeDeltaPart[] = []
+  if (addedCount > 0) parts.push({ tone: 'add', label: `+${addedCount}` })
+  if (removedCount > 0) parts.push({ tone: 'remove', label: `-${removedCount}` })
+  if (parts.length > 0) return parts
+  return fallbackLabel ? [{ tone: 'neutral', label: fallbackLabel }] : []
+}
+
+export function fileChangeDeltaParts(change: UiFileChange): FileChangeDeltaPart[] {
+  return buildFileChangeDeltaParts(change.addedLineCount, change.removedLineCount)
+}
+
+export function formatFileChangeCountLabel(count: number): string {
+  return count === 1 ? '1 file changed' : `${count} files changed`
+}
+
+export function summarizeFileChangeKinds(summary: TurnFileChangeSummary | null): string {
+  if (!summary || summary.changes.length === 0) return ''
+  let added = 0
+  let deleted = 0
+  let edited = 0
+  let moved = 0
+
+  for (const change of summary.changes) {
+    if (change.operation === 'add') {
+      added += 1
+      continue
+    }
+    if (change.operation === 'delete') {
+      deleted += 1
+      continue
+    }
+    if (change.movedToPath) {
+      moved += 1
+      continue
+    }
+    edited += 1
+  }
+
+  const parts: string[] = []
+  if (edited > 0) parts.push(`${edited} edited`)
+  if (added > 0) parts.push(`${added} added`)
+  if (deleted > 0) parts.push(`${deleted} deleted`)
+  if (moved > 0) parts.push(`${moved} moved`)
+  return parts.join(', ')
+}
+
+export function fileChangeSummaryLabel(summary: TurnFileChangeSummary | null): string {
+  if (!summary || summary.changes.length === 0) return 'Modified files'
+  const countLabel = formatFileChangeCountLabel(summary.changes.length)
+  const kindSummary = summarizeFileChangeKinds(summary)
+  return kindSummary ? `${countLabel} · ${kindSummary}` : countLabel
+}
+
+export function fileChangeSummaryStatusParts(summary: TurnFileChangeSummary | null): FileChangeDeltaPart[] {
+  if (!summary || summary.changes.length === 0) return []
+  const totalAdded = summary.changes.reduce((sum, change) => sum + change.addedLineCount, 0)
+  const totalRemoved = summary.changes.reduce((sum, change) => sum + change.removedLineCount, 0)
+  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? 'Moved' : 'Ready'
+  return buildFileChangeDeltaParts(totalAdded, totalRemoved, fallbackLabel)
+}
+
+export function hasStructuredUnifiedDiff(change: UiFileChange): boolean {
+  return change.operation === 'update' && /^diff --git |^@@ |^--- |^\+\+\+ |^[ +-]|^\*\*\* (Move to:|End of File)/mu.test(change.diff)
+}
+
+export function buildSyntheticDiffLines(change: UiFileChange): DiffViewerLine[] {
+  const normalized = change.diff.replace(/\r\n/g, '\n')
+  const lines = normalized.length > 0 ? normalized.split('\n') : []
+  if (lines.length > 0 && lines[lines.length - 1] === '') {
+    lines.pop()
+  }
+  return lines.map((line, index) => ({
+    key: `${fileChangeKey(change)}:synthetic:${index}`,
+    kind: change.operation === 'delete' ? 'remove' : 'add',
+    oldLine: change.operation === 'delete' ? index + 1 : null,
+    newLine: change.operation === 'delete' ? null : index + 1,
+    text: line,
+  }))
+}
+
+export function buildUnifiedDiffLines(change: UiFileChange): DiffViewerLine[] {
+  const normalized = change.diff.replace(/\r\n/g, '\n')
+  const lines = normalized.length > 0 ? normalized.split('\n') : []
+  if (lines.length > 0 && lines[lines.length - 1] === '') {
+    lines.pop()
+  }
+
+  const output: DiffViewerLine[] = []
+  let oldLine = 0
+  let newLine = 0
+
+  for (const [index, line] of lines.entries()) {
+    const hunkMatch = line.match(/^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/u)
+    if (hunkMatch) {
+      oldLine = Number(hunkMatch[1])
+      newLine = Number(hunkMatch[2])
+      output.push({
+        key: `${fileChangeKey(change)}:hunk:${index}`,
+        kind: 'hunk',
+        oldLine: null,
+        newLine: null,
+        text: line,
+      })
+      continue
+    }
+
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      output.push({
+        key: `${fileChangeKey(change)}:add:${index}`,
+        kind: 'add',
+        oldLine: null,
+        newLine,
+        text: line.slice(1),
+      })
+      newLine += 1
+      continue
+    }
+
+    if (line.startsWith('-') && !line.startsWith('---')) {
+      output.push({
+        key: `${fileChangeKey(change)}:remove:${index}`,
+        kind: 'remove',
+        oldLine,
+        newLine: null,
+        text: line.slice(1),
+      })
+      oldLine += 1
+      continue
+    }
+
+    if (line.startsWith(' ')) {
+      output.push({
+        key: `${fileChangeKey(change)}:context:${index}`,
+        kind: 'context',
+        oldLine,
+        newLine,
+        text: line.slice(1),
+      })
+      oldLine += 1
+      newLine += 1
+      continue
+    }
+
+    output.push({
+      key: `${fileChangeKey(change)}:meta:${index}`,
+      kind: 'meta',
+      oldLine: null,
+      newLine: null,
+      text: line,
+    })
+  }
+
+  return output
+}
+
+export function buildDiffViewerLines(change: UiFileChange | null): DiffViewerLine[] {
+  if (!change || !change.diff.trim()) return []
+  if (hasStructuredUnifiedDiff(change)) {
+    return buildUnifiedDiffLines(change)
+  }
+  return buildSyntheticDiffLines(change)
+}
diff --git a/src/components/content/threadConversationPathHelpers.ts b/src/components/content/threadConversationPathHelpers.ts
new file mode 100644
index 000000000..8518cdbda
--- /dev/null
+++ b/src/components/content/threadConversationPathHelpers.ts
@@ -0,0 +1,202 @@
+export function isFilePath(value: string): boolean {
+  if (!value || /[\r\n]/u.test(value)) return false
+  if (value.endsWith('/') || value.endsWith('\\')) return false
+  if (/^[A-Za-z][A-Za-z0-9+.-]*:\/\//u.test(value)) return false
+
+  const looksLikeUnixAbsolute = value.startsWith('/')
+  const looksLikeWindowsAbsolute = /^[A-Za-z]:[\\/]/u.test(value)
+  const looksLikeRelative = value.startsWith('./') || value.startsWith('../') || value.startsWith('~/')
+  if (looksLikeUnixAbsolute || looksLikeWindowsAbsolute || looksLikeRelative) return true
+
+  const looksLikeBareFilename = /^[A-Za-z0-9._@() -]+\.[A-Za-z0-9]{1,12}$/u.test(value)
+  if (looksLikeBareFilename) return true
+
+  // Bare relative paths should look like actual path segments, not arbitrary prose containing "/".
+  return /^[A-Za-z0-9._@() -]+(?:[\\/][A-Za-z0-9._@() -]+)+$/u.test(value)
+}
+
+
+export function getBasename(pathValue: string): string {
+  const normalized = pathValue.replace(/\\/gu, '/')
+  const name = normalized.split('/').filter(Boolean).pop()
+  return name || pathValue
+}
+
+
+export function normalizePathSeparators(pathValue: string): string {
+  return pathValue.replace(/\\/gu, '/')
+}
+
+
+export function normalizeFileUrlToPath(pathValue: string): string {
+  if (!pathValue.startsWith('file://')) return pathValue
+  let stripped = pathValue.replace(/^file:\/\//u, '')
+  try {
+    stripped = decodeURIComponent(stripped)
+  } catch {
+    // Keep best-effort path if decoding fails.
+  }
+  if (/^\/[A-Za-z]:\//u.test(stripped)) {
+    stripped = stripped.slice(1)
+  }
+  return stripped
+}
+
+
+export function inferHomeFromCwd(cwd: string): string {
+  const normalized = normalizePathSeparators(cwd)
+  const userMatch = normalized.match(/^\/Users\/([^/]+)/u)
+  if (userMatch) return `/Users/${userMatch[1]}`
+  const homeMatch = normalized.match(/^\/home\/([^/]+)/u)
+  if (homeMatch) return `/home/${homeMatch[1]}`
+  return ''
+}
+
+
+export function normalizePathDots(pathValue: string): string {
+  const normalized = normalizePathSeparators(pathValue)
+  if (!normalized) return normalized
+
+  let root = ''
+  let rest = normalized
+  const driveMatch = rest.match(/^([A-Za-z]:)(\/.*)?$/u)
+  if (driveMatch) {
+    root = `${driveMatch[1]}/`
+    rest = (driveMatch[2] ?? '').replace(/^\/+/u, '')
+  } else if (rest.startsWith('/')) {
+    root = '/'
+    rest = rest.slice(1)
+  }
+
+  const parts = rest.split('/').filter(Boolean)
+  const stack: string[] = []
+  for (const part of parts) {
+    if (part === '.') continue
+    if (part === '..') {
+      if (stack.length > 0) stack.pop()
+      continue
+    }
+    stack.push(part)
+  }
+
+  const joined = stack.join('/')
+  if (root) return `${root}${joined}`.replace(/\/+$/u, '') || root
+  return joined || normalized
+}
+
+
+export function resolveRelativePath(pathValue: string, cwd: string): string {
+  const normalizedPath = normalizePathSeparators(normalizeFileUrlToPath(pathValue.trim()))
+  if (!normalizedPath) return ''
+
+  const looksLikeAbsolute = normalizedPath.startsWith('/') || /^[A-Za-z]:\//u.test(normalizedPath)
+  if (looksLikeAbsolute) return normalizePathDots(normalizedPath)
+
+  if (normalizedPath.startsWith('~/')) {
+    const homeBase = inferHomeFromCwd(cwd)
+    if (homeBase) {
+      return normalizePathDots(`${homeBase}/${normalizedPath.slice(2)}`)
+    }
+  }
+
+  const base = normalizePathSeparators(cwd.trim())
+  if (!base) return normalizePathDots(normalizedPath)
+  return normalizePathDots(`${base.replace(/\/+$/u, '')}/${normalizedPath}`)
+}
+
+
+export function parseFileReference(value: string): { path: string; line: number | null } | null {
+  if (!value) return null
+
+  let pathValue = value.trim()
+  const wrapped = trimLinkWrappers(pathValue)
+  pathValue = wrapped.core.trim()
+  let line: number | null = null
+
+  const hashLineMatch = pathValue.match(/^(.*)#L(\d+)(?:C\d+)?$/u)
+  if (hashLineMatch) {
+    pathValue = hashLineMatch[1]
+    line = Number(hashLineMatch[2])
+  } else {
+    const colonLineMatch = pathValue.match(/^(.*):(\d+)(?::\d+)?$/u)
+    if (colonLineMatch) {
+      pathValue = colonLineMatch[1]
+      line = Number(colonLineMatch[2])
+    }
+  }
+
+  pathValue = normalizeFileUrlToPath(pathValue)
+  if (!isFilePath(pathValue)) return null
+  return { path: pathValue, line }
+}
+
+
+export function trimLinkWrappers(value: string): { core: string; leading: string; trailing: string } {
+  let core = value
+  let leading = ''
+  let trailing = ''
+
+  const wrapperPairs: Record<string, string> = {
+    '(': ')',
+    '[': ']',
+    '{': '}',
+    '<': '>',
+    '"': '"',
+    '\'': '\'',
+    '`': '`',
+    '“': '”',
+    '‘': '’',
+  }
+
+  while (core.length > 0) {
+    const opening = core[0]
+    const closing = Object.prototype.hasOwnProperty.call(wrapperPairs, opening) ? wrapperPairs[opening] : ''
+    if (!closing || !core.endsWith(closing)) break
+    leading += opening
+    trailing += closing
+    core = core.slice(1, -1)
+  }
+
+  return { core, leading, trailing }
+}
+
+
+export function parseMarkdownLinkToken(value: string): { label: string; target: string } | null {
+  const trimmed = value.trim()
+  if (!trimmed.startsWith('[') || !trimmed.endsWith(')')) return null
+  const labelCloseIndex = trimmed.indexOf(']')
+  if (labelCloseIndex <= 1) return null
+  if (trimmed[labelCloseIndex + 1] !== '(') return null
+  const labelRaw = trimmed.slice(1, labelCloseIndex).trim()
+  const targetRaw = trimmed.slice(labelCloseIndex + 2, -1).trim()
+  if (labelRaw.includes('\n') || targetRaw.includes('\n')) return null
+  const label = trimLinkWrappers(labelRaw).core.trim() || labelRaw
+  const target = trimLinkWrappers(targetRaw).core.trim()
+  if (!target) return null
+  return { label, target }
+}
+
+
+export function headingTag(level: number): string {
+  const normalizedLevel = Math.min(6, Math.max(1, Math.trunc(level)))
+  return `h${String(normalizedLevel)}`
+}
+
+
+export function headingClass(level: number): string {
+  switch (Math.min(6, Math.max(1, Math.trunc(level)))) {
+    case 1:
+      return 'message-heading-h1'
+    case 2:
+      return 'message-heading-h2'
+    case 3:
+      return 'message-heading-h3'
+    case 4:
+      return 'message-heading-h4'
+    case 5:
+      return 'message-heading-h5'
+    default:
+      return 'message-heading-h6'
+  }
+}
+
diff --git a/src/components/sidebar/SidebarThreadTree.scoped.css b/src/components/sidebar/SidebarThreadTree.scoped.css
new file mode 100644
index 000000000..68ebb1346
--- /dev/null
+++ b/src/components/sidebar/SidebarThreadTree.scoped.css
@@ -0,0 +1,504 @@
+@reference "tailwindcss";
+
+.thread-tree-root {
+  @apply flex flex-col;
+}
+
+.pinned-section {
+  @apply order-1 mb-1;
+}
+
+.projects-section {
+  @apply order-2;
+}
+
+.chats-section {
+  @apply order-3 mt-1;
+}
+
+.thread-tree-root.chats-first .chats-section {
+  @apply order-2;
+}
+
+.thread-tree-root.chats-first .projects-section {
+  @apply order-3;
+}
+
+.thread-tree-header-row {
+  @apply cursor-pointer;
+}
+
+.section-toggle-row {
+  @apply hover:bg-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400;
+}
+
+.thread-tree-header {
+  @apply text-sm font-normal text-zinc-500 select-none;
+}
+
+.chats-section-actions {
+  @apply flex items-center gap-1;
+}
+
+.chats-section-action {
+  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
+}
+
+.chats-section-action[aria-pressed='true'] {
+  @apply bg-zinc-200 text-zinc-800;
+}
+
+.organize-menu-wrap {
+  @apply relative;
+}
+
+.organize-menu-trigger {
+  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
+}
+
+.organize-menu-panel {
+  @apply absolute right-0 top-full mt-1 z-30 min-w-44 rounded-xl border border-zinc-200 bg-white/95 p-1.5 shadow-lg backdrop-blur-sm;
+}
+
+.organize-menu-title {
+  @apply px-2 py-1 text-xs text-zinc-500;
+}
+
+.organize-menu-separator {
+  @apply my-1 h-px bg-zinc-200;
+}
+
+.organize-menu-item {
+  @apply w-full rounded-lg px-2 py-1.5 text-sm text-zinc-700 flex items-center justify-between hover:bg-zinc-100;
+}
+
+.organize-menu-item[data-active='true'] {
+  @apply bg-zinc-100 text-zinc-900;
+}
+
+.thread-start-button {
+  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
+}
+
+.thread-tree-loading {
+  @apply px-3 py-2 text-sm text-zinc-500;
+}
+
+.thread-tree-no-results {
+  @apply px-3 py-2 text-sm text-zinc-400;
+}
+
+.thread-tree-groups {
+  @apply pr-0.5 relative;
+}
+
+.project-group {
+  @apply m-0 transition-shadow;
+}
+
+.project-group[data-dragging='true'] {
+  @apply shadow-lg;
+}
+
+.project-header-row {
+  @apply hover:bg-zinc-200 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400;
+}
+
+.project-main-button {
+  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center gap-1.5 min-h-5 cursor-grab;
+}
+
+.project-main-button[data-dragging-handle='true'] {
+  @apply cursor-grabbing;
+}
+
+.project-icon-stack {
+  @apply relative w-4 h-4 flex items-center justify-center text-zinc-500;
+}
+
+.project-icon-folder {
+  @apply absolute inset-0 flex items-center justify-center opacity-100;
+}
+
+.project-icon-chevron {
+  @apply absolute inset-0 items-center justify-center opacity-0 hidden;
+}
+
+.project-title {
+  @apply min-w-0 flex-1 text-sm font-normal text-zinc-700 truncate select-none;
+}
+
+.project-menu-wrap {
+  @apply relative;
+}
+
+.project-hover-controls {
+  @apply flex items-center gap-1;
+}
+
+.project-menu-trigger {
+  @apply h-4 w-4 rounded p-0 text-zinc-600 flex items-center justify-center;
+}
+
+.project-menu-panel {
+  @apply absolute right-0 top-full mt-1 z-20 min-w-36 rounded-md border border-zinc-200 bg-white p-1 shadow-md flex flex-col gap-0.5;
+}
+
+.project-menu-panel[data-open-direction='up'] {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+  margin-top: 0;
+}
+
+.project-menu-item {
+  @apply rounded px-2 py-1 text-left text-sm text-zinc-700 hover:bg-zinc-100;
+}
+
+.project-menu-item-danger {
+  @apply text-rose-700 hover:bg-rose-50;
+}
+
+.project-menu-label {
+  @apply px-2 pt-1 text-xs text-zinc-500;
+}
+
+.project-menu-input {
+  @apply px-2 py-1 text-sm text-zinc-800 bg-transparent border-none outline-none;
+}
+
+.project-empty-row {
+  @apply cursor-default;
+}
+
+.project-empty-spacer {
+  @apply block w-4 h-4;
+}
+
+.project-empty {
+  @apply text-sm text-zinc-400;
+}
+
+.thread-list {
+  @apply list-none m-0 p-0 flex flex-col gap-0.5;
+}
+
+.thread-list-global {
+  @apply pr-0.5;
+}
+
+.project-group > .thread-list {
+  @apply mt-0.5;
+}
+
+.thread-row-item {
+  @apply m-0;
+}
+
+.thread-row-item[data-menu-open='true'] {
+  @apply relative z-40;
+}
+
+.thread-row {
+  @apply hover:bg-zinc-200;
+}
+
+.thread-row[data-menu-open='true'] {
+  @apply relative z-30;
+}
+
+.thread-left-stack {
+  @apply relative w-4 h-4 flex items-center justify-center;
+}
+
+.thread-delete-button {
+  @apply absolute left-0 top-1/2 -translate-y-1/2 h-4 min-w-4 rounded text-zinc-500 opacity-0 pointer-events-none transition flex items-center justify-center;
+}
+
+.thread-delete-button[data-confirming='true'] {
+  @apply z-10 h-5 min-w-16 px-1.5 bg-rose-600 text-white opacity-100 pointer-events-auto shadow-sm;
+}
+
+.thread-delete-confirm-label {
+  @apply text-[11px] font-medium leading-none;
+}
+
+.thread-main-button {
+  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center min-h-5;
+}
+
+.thread-row-title-wrap {
+  @apply min-w-0 inline-flex w-full items-center;
+}
+
+.thread-row-title-line {
+  @apply min-w-0 inline-flex w-full items-center gap-1.5;
+}
+
+.thread-row-title {
+  @apply min-w-0 block flex-1 text-sm leading-5 font-normal text-zinc-800 truncate whitespace-nowrap;
+}
+
+.thread-row-worktree-icon {
+  @apply w-3 h-3 text-zinc-500 shrink-0;
+}
+
+.thread-row-request-chip {
+  @apply inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-medium leading-none;
+}
+
+.thread-row-request-chip[data-state='approval'] {
+  @apply border-emerald-500/20 bg-emerald-500/15 text-emerald-700;
+}
+
+.thread-row-request-chip[data-state='response'] {
+  @apply border-sky-200 bg-sky-50 text-sky-700;
+}
+
+.thread-status-indicator {
+  @apply w-2.5 h-2.5 rounded-full;
+}
+
+.thread-row-time {
+  @apply block text-sm font-normal text-zinc-500;
+}
+
+.thread-menu-wrap {
+  @apply relative;
+}
+
+.thread-menu-trigger {
+  @apply h-4 w-4 rounded p-0 text-xs text-zinc-600 flex items-center justify-center;
+}
+
+.thread-menu-panel {
+  @apply absolute right-0 top-full mt-1 z-20 min-w-36 rounded-md border border-zinc-200 bg-white p-1 shadow-md flex flex-col gap-0.5;
+}
+
+.thread-menu-panel-fixed {
+  @apply fixed top-0 right-auto bottom-auto left-0 mt-0 z-50;
+}
+
+.thread-menu-panel:not(.thread-menu-panel-fixed)[data-open-direction='up'] {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+  margin-top: 0;
+}
+
+.thread-menu-item {
+  @apply rounded px-2 py-1 text-left text-sm text-zinc-700 hover:bg-zinc-100;
+}
+
+.thread-menu-item-danger {
+  @apply text-rose-700 hover:bg-rose-50;
+}
+
+.thread-icon {
+  @apply w-4 h-4;
+}
+
+.thread-show-more-row {
+  @apply mt-1;
+}
+
+.thread-show-more-spacer {
+  @apply block w-4 h-4;
+}
+
+.thread-show-more-button {
+  @apply block mx-auto rounded-lg px-2 py-0.5 text-sm font-normal text-zinc-600 transition hover:text-zinc-800 hover:bg-zinc-200;
+}
+
+.thread-row-automation-chip {
+  @apply inline-flex h-4 min-w-4 shrink-0 items-center justify-center gap-0.5 rounded-full bg-amber-100 px-1 text-amber-800;
+}
+
+.thread-row-automation-icon {
+  @apply h-3 w-3 shrink-0;
+}
+
+.thread-row-automation-count {
+  @apply text-[10px] font-semibold leading-none tabular-nums;
+}
+
+.project-header-row:hover .project-icon-folder {
+  @apply opacity-0;
+}
+
+.project-header-row:hover .project-icon-chevron {
+  @apply flex opacity-100;
+}
+
+.thread-row[data-active='true'] {
+  @apply bg-zinc-200;
+}
+
+.thread-row:hover .thread-delete-button,
+.thread-row:focus-within .thread-delete-button,
+.thread-delete-button[data-confirming='true'] {
+  @apply opacity-100 pointer-events-auto;
+}
+
+.thread-status-indicator[data-state='unread'] {
+  width: 6.6667px;
+  height: 6.6667px;
+  @apply bg-blue-600;
+}
+
+.thread-status-indicator[data-state='working'] {
+  @apply border-2 border-zinc-500 border-t-transparent bg-transparent animate-spin;
+}
+
+.thread-status-indicator[data-state='awaiting-approval'] {
+  @apply bg-emerald-500;
+}
+
+.thread-status-indicator[data-state='awaiting-response'] {
+  @apply bg-sky-500;
+}
+
+.thread-row:hover .thread-status-indicator[data-state='unread'],
+.thread-row:hover .thread-status-indicator[data-state='working'],
+.thread-row:hover .thread-status-indicator[data-state='awaiting-approval'],
+.thread-row:hover .thread-status-indicator[data-state='awaiting-response'],
+.thread-row:focus-within .thread-status-indicator[data-state='unread'],
+.thread-row:focus-within .thread-status-indicator[data-state='working'],
+.thread-row:focus-within .thread-status-indicator[data-state='awaiting-approval'],
+.thread-row:focus-within .thread-status-indicator[data-state='awaiting-response'] {
+  @apply opacity-0;
+}
+
+.rename-thread-overlay {
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4;
+}
+
+.rename-thread-panel {
+  @apply w-full max-w-sm rounded-xl bg-white p-4 shadow-xl
+         max-h-[90vh] flex flex-col overflow-hidden;
+}
+
+.rename-thread-title {
+  @apply m-0 text-base font-semibold text-zinc-900 shrink-0;
+}
+
+.rename-thread-subtitle {
+  @apply mt-1 mb-3 text-sm text-zinc-500 overflow-y-auto flex-1 min-h-0 min-w-0 break-words;
+}
+
+.rename-thread-input {
+  @apply w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none focus:border-zinc-500 shrink-0;
+}
+
+.rename-thread-actions {
+  @apply mt-3 flex items-center justify-end gap-2 shrink-0;
+}
+
+.rename-thread-button {
+  @apply rounded-md px-3 py-1.5 text-sm text-zinc-700 hover:bg-zinc-100;
+}
+
+.rename-thread-button-primary {
+  @apply bg-zinc-900 text-white hover:bg-black;
+}
+
+.rename-thread-button-danger {
+  @apply bg-rose-600 text-white hover:bg-rose-700;
+}
+
+.automation-thread-panel {
+  @apply max-w-lg;
+}
+
+.automation-thread-field {
+  @apply mb-3 flex flex-col gap-1;
+}
+
+.automation-target-picker {
+  @apply mb-3 flex flex-col gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-2;
+}
+
+.automation-target-mode-group {
+  @apply grid grid-cols-2 gap-1 rounded-lg border border-zinc-200 bg-white p-1;
+}
+
+.automation-target-mode {
+  @apply rounded-md px-2 py-1.5 text-xs font-medium text-zinc-600 hover:bg-zinc-100;
+}
+
+.automation-target-mode.is-active {
+  @apply bg-zinc-900 text-white shadow-sm hover:bg-zinc-900;
+}
+
+.automation-target-dropdown {
+  @apply flex flex-col gap-2;
+}
+
+.automation-thread-list {
+  @apply mb-3 flex max-h-40 flex-col gap-1 overflow-y-auto rounded-lg border border-zinc-200 bg-zinc-50 p-1;
+}
+
+.automation-thread-list-item {
+  @apply flex items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm text-zinc-700 hover:bg-white;
+}
+
+.automation-thread-list-item.is-active {
+  @apply bg-white font-medium text-zinc-950 shadow-sm;
+}
+
+.automation-thread-list-item small {
+  @apply text-xs font-normal text-zinc-500;
+}
+
+.automation-thread-list-add {
+  @apply justify-center border border-dashed border-zinc-300 text-zinc-500;
+}
+
+.automation-thread-label {
+  @apply text-xs font-medium uppercase tracking-wide text-zinc-500;
+}
+
+.automation-thread-textarea,
+.automation-thread-select {
+  @apply w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none focus:border-zinc-500;
+}
+
+.automation-schedule-mode-group {
+  @apply grid grid-cols-3 gap-1 rounded-lg border border-zinc-200 bg-zinc-100 p-1;
+}
+
+.automation-schedule-mode {
+  @apply rounded-md px-2 py-1.5 text-xs font-medium text-zinc-600 hover:bg-white;
+}
+
+.automation-schedule-mode.is-active {
+  @apply bg-white text-zinc-950 shadow-sm;
+}
+
+.automation-schedule-row {
+  @apply mt-2 flex flex-wrap items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2;
+}
+
+.automation-schedule-copy {
+  @apply text-sm text-zinc-600;
+}
+
+.automation-schedule-time,
+.automation-schedule-number,
+.automation-schedule-unit {
+  @apply rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-900 outline-none focus:border-zinc-500;
+}
+
+.automation-schedule-number {
+  @apply w-20;
+}
+
+.automation-schedule-preview {
+  @apply mt-1 text-xs text-zinc-500;
+}
+
+.automation-thread-error {
+  @apply mb-0 text-rose-600;
+}
+
+.automation-thread-notice {
+  @apply mb-0 text-emerald-600;
+}
diff --git a/src/components/sidebar/SidebarThreadTree.vue b/src/components/sidebar/SidebarThreadTree.vue
index d37a09dc3..a49e4a360 100644
--- a/src/components/sidebar/SidebarThreadTree.vue
+++ b/src/components/sidebar/SidebarThreadTree.vue
@@ -2942,509 +2942,4 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.thread-tree-root {
-  @apply flex flex-col;
-}
-
-.pinned-section {
-  @apply order-1 mb-1;
-}
-
-.projects-section {
-  @apply order-2;
-}
-
-.chats-section {
-  @apply order-3 mt-1;
-}
-
-.thread-tree-root.chats-first .chats-section {
-  @apply order-2;
-}
-
-.thread-tree-root.chats-first .projects-section {
-  @apply order-3;
-}
-
-.thread-tree-header-row {
-  @apply cursor-pointer;
-}
-
-.section-toggle-row {
-  @apply hover:bg-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400;
-}
-
-.thread-tree-header {
-  @apply text-sm font-normal text-zinc-500 select-none;
-}
-
-.chats-section-actions {
-  @apply flex items-center gap-1;
-}
-
-.chats-section-action {
-  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
-}
-
-.chats-section-action[aria-pressed='true'] {
-  @apply bg-zinc-200 text-zinc-800;
-}
-
-.organize-menu-wrap {
-  @apply relative;
-}
-
-.organize-menu-trigger {
-  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
-}
-
-.organize-menu-panel {
-  @apply absolute right-0 top-full mt-1 z-30 min-w-44 rounded-xl border border-zinc-200 bg-white/95 p-1.5 shadow-lg backdrop-blur-sm;
-}
-
-.organize-menu-title {
-  @apply px-2 py-1 text-xs text-zinc-500;
-}
-
-.organize-menu-separator {
-  @apply my-1 h-px bg-zinc-200;
-}
-
-.organize-menu-item {
-  @apply w-full rounded-lg px-2 py-1.5 text-sm text-zinc-700 flex items-center justify-between hover:bg-zinc-100;
-}
-
-.organize-menu-item[data-active='true'] {
-  @apply bg-zinc-100 text-zinc-900;
-}
-
-.thread-start-button {
-  @apply h-5 w-5 rounded text-zinc-500 flex items-center justify-center transition hover:bg-zinc-200 hover:text-zinc-700;
-}
-
-.thread-tree-loading {
-  @apply px-3 py-2 text-sm text-zinc-500;
-}
-
-.thread-tree-no-results {
-  @apply px-3 py-2 text-sm text-zinc-400;
-}
-
-.thread-tree-groups {
-  @apply pr-0.5 relative;
-}
-
-.project-group {
-  @apply m-0 transition-shadow;
-}
-
-.project-group[data-dragging='true'] {
-  @apply shadow-lg;
-}
-
-.project-header-row {
-  @apply hover:bg-zinc-200 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-400;
-}
-
-.project-main-button {
-  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center gap-1.5 min-h-5 cursor-grab;
-}
-
-.project-main-button[data-dragging-handle='true'] {
-  @apply cursor-grabbing;
-}
-
-.project-icon-stack {
-  @apply relative w-4 h-4 flex items-center justify-center text-zinc-500;
-}
-
-.project-icon-folder {
-  @apply absolute inset-0 flex items-center justify-center opacity-100;
-}
-
-.project-icon-chevron {
-  @apply absolute inset-0 items-center justify-center opacity-0 hidden;
-}
-
-.project-title {
-  @apply min-w-0 flex-1 text-sm font-normal text-zinc-700 truncate select-none;
-}
-
-.project-menu-wrap {
-  @apply relative;
-}
-
-.project-hover-controls {
-  @apply flex items-center gap-1;
-}
-
-.project-menu-trigger {
-  @apply h-4 w-4 rounded p-0 text-zinc-600 flex items-center justify-center;
-}
-
-.project-menu-panel {
-  @apply absolute right-0 top-full mt-1 z-20 min-w-36 rounded-md border border-zinc-200 bg-white p-1 shadow-md flex flex-col gap-0.5;
-}
-
-.project-menu-panel[data-open-direction='up'] {
-  top: auto;
-  bottom: calc(100% + 0.25rem);
-  margin-top: 0;
-}
-
-.project-menu-item {
-  @apply rounded px-2 py-1 text-left text-sm text-zinc-700 hover:bg-zinc-100;
-}
-
-.project-menu-item-danger {
-  @apply text-rose-700 hover:bg-rose-50;
-}
-
-.project-menu-label {
-  @apply px-2 pt-1 text-xs text-zinc-500;
-}
-
-.project-menu-input {
-  @apply px-2 py-1 text-sm text-zinc-800 bg-transparent border-none outline-none;
-}
-
-.project-empty-row {
-  @apply cursor-default;
-}
-
-.project-empty-spacer {
-  @apply block w-4 h-4;
-}
-
-.project-empty {
-  @apply text-sm text-zinc-400;
-}
-
-.thread-list {
-  @apply list-none m-0 p-0 flex flex-col gap-0.5;
-}
-
-.thread-list-global {
-  @apply pr-0.5;
-}
-
-.project-group > .thread-list {
-  @apply mt-0.5;
-}
-
-.thread-row-item {
-  @apply m-0;
-}
-
-.thread-row-item[data-menu-open='true'] {
-  @apply relative z-40;
-}
-
-.thread-row {
-  @apply hover:bg-zinc-200;
-}
-
-.thread-row[data-menu-open='true'] {
-  @apply relative z-30;
-}
-
-.thread-left-stack {
-  @apply relative w-4 h-4 flex items-center justify-center;
-}
-
-.thread-delete-button {
-  @apply absolute left-0 top-1/2 -translate-y-1/2 h-4 min-w-4 rounded text-zinc-500 opacity-0 pointer-events-none transition flex items-center justify-center;
-}
-
-.thread-delete-button[data-confirming='true'] {
-  @apply z-10 h-5 min-w-16 px-1.5 bg-rose-600 text-white opacity-100 pointer-events-auto shadow-sm;
-}
-
-.thread-delete-confirm-label {
-  @apply text-[11px] font-medium leading-none;
-}
-
-.thread-main-button {
-  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center min-h-5;
-}
-
-.thread-row-title-wrap {
-  @apply min-w-0 inline-flex w-full items-center;
-}
-
-.thread-row-title-line {
-  @apply min-w-0 inline-flex w-full items-center gap-1.5;
-}
-
-.thread-row-title {
-  @apply min-w-0 block flex-1 text-sm leading-5 font-normal text-zinc-800 truncate whitespace-nowrap;
-}
-
-.thread-row-worktree-icon {
-  @apply w-3 h-3 text-zinc-500 shrink-0;
-}
-
-.thread-row-request-chip {
-  @apply inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-medium leading-none;
-}
-
-.thread-row-request-chip[data-state='approval'] {
-  @apply border-emerald-500/20 bg-emerald-500/15 text-emerald-700;
-}
-
-.thread-row-request-chip[data-state='response'] {
-  @apply border-sky-200 bg-sky-50 text-sky-700;
-}
-
-.thread-status-indicator {
-  @apply w-2.5 h-2.5 rounded-full;
-}
-
-.thread-row-time {
-  @apply block text-sm font-normal text-zinc-500;
-}
-
-.thread-menu-wrap {
-  @apply relative;
-}
-
-.thread-menu-trigger {
-  @apply h-4 w-4 rounded p-0 text-xs text-zinc-600 flex items-center justify-center;
-}
-
-.thread-menu-panel {
-  @apply absolute right-0 top-full mt-1 z-20 min-w-36 rounded-md border border-zinc-200 bg-white p-1 shadow-md flex flex-col gap-0.5;
-}
-
-.thread-menu-panel-fixed {
-  @apply fixed top-0 right-auto bottom-auto left-0 mt-0 z-50;
-}
-
-.thread-menu-panel:not(.thread-menu-panel-fixed)[data-open-direction='up'] {
-  top: auto;
-  bottom: calc(100% + 0.25rem);
-  margin-top: 0;
-}
-
-.thread-menu-item {
-  @apply rounded px-2 py-1 text-left text-sm text-zinc-700 hover:bg-zinc-100;
-}
-
-.thread-menu-item-danger {
-  @apply text-rose-700 hover:bg-rose-50;
-}
-
-.thread-icon {
-  @apply w-4 h-4;
-}
-
-.thread-show-more-row {
-  @apply mt-1;
-}
-
-.thread-show-more-spacer {
-  @apply block w-4 h-4;
-}
-
-.thread-show-more-button {
-  @apply block mx-auto rounded-lg px-2 py-0.5 text-sm font-normal text-zinc-600 transition hover:text-zinc-800 hover:bg-zinc-200;
-}
-
-.thread-row-automation-chip {
-  @apply inline-flex h-4 min-w-4 shrink-0 items-center justify-center gap-0.5 rounded-full bg-amber-100 px-1 text-amber-800;
-}
-
-.thread-row-automation-icon {
-  @apply h-3 w-3 shrink-0;
-}
-
-.thread-row-automation-count {
-  @apply text-[10px] font-semibold leading-none tabular-nums;
-}
-
-.project-header-row:hover .project-icon-folder {
-  @apply opacity-0;
-}
-
-.project-header-row:hover .project-icon-chevron {
-  @apply flex opacity-100;
-}
-
-.thread-row[data-active='true'] {
-  @apply bg-zinc-200;
-}
-
-.thread-row:hover .thread-delete-button,
-.thread-row:focus-within .thread-delete-button,
-.thread-delete-button[data-confirming='true'] {
-  @apply opacity-100 pointer-events-auto;
-}
-
-.thread-status-indicator[data-state='unread'] {
-  width: 6.6667px;
-  height: 6.6667px;
-  @apply bg-blue-600;
-}
-
-.thread-status-indicator[data-state='working'] {
-  @apply border-2 border-zinc-500 border-t-transparent bg-transparent animate-spin;
-}
-
-.thread-status-indicator[data-state='awaiting-approval'] {
-  @apply bg-emerald-500;
-}
-
-.thread-status-indicator[data-state='awaiting-response'] {
-  @apply bg-sky-500;
-}
-
-.thread-row:hover .thread-status-indicator[data-state='unread'],
-.thread-row:hover .thread-status-indicator[data-state='working'],
-.thread-row:hover .thread-status-indicator[data-state='awaiting-approval'],
-.thread-row:hover .thread-status-indicator[data-state='awaiting-response'],
-.thread-row:focus-within .thread-status-indicator[data-state='unread'],
-.thread-row:focus-within .thread-status-indicator[data-state='working'],
-.thread-row:focus-within .thread-status-indicator[data-state='awaiting-approval'],
-.thread-row:focus-within .thread-status-indicator[data-state='awaiting-response'] {
-  @apply opacity-0;
-}
-
-.rename-thread-overlay {
-  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4;
-}
-
-.rename-thread-panel {
-  @apply w-full max-w-sm rounded-xl bg-white p-4 shadow-xl
-         max-h-[90vh] flex flex-col overflow-hidden;
-}
-
-.rename-thread-title {
-  @apply m-0 text-base font-semibold text-zinc-900 shrink-0;
-}
-
-.rename-thread-subtitle {
-  @apply mt-1 mb-3 text-sm text-zinc-500 overflow-y-auto flex-1 min-h-0 min-w-0 break-words;
-}
-
-.rename-thread-input {
-  @apply w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none focus:border-zinc-500 shrink-0;
-}
-
-.rename-thread-actions {
-  @apply mt-3 flex items-center justify-end gap-2 shrink-0;
-}
-
-.rename-thread-button {
-  @apply rounded-md px-3 py-1.5 text-sm text-zinc-700 hover:bg-zinc-100;
-}
-
-.rename-thread-button-primary {
-  @apply bg-zinc-900 text-white hover:bg-black;
-}
-
-.rename-thread-button-danger {
-  @apply bg-rose-600 text-white hover:bg-rose-700;
-}
-
-.automation-thread-panel {
-  @apply max-w-lg;
-}
-
-.automation-thread-field {
-  @apply mb-3 flex flex-col gap-1;
-}
-
-.automation-target-picker {
-  @apply mb-3 flex flex-col gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-2;
-}
-
-.automation-target-mode-group {
-  @apply grid grid-cols-2 gap-1 rounded-lg border border-zinc-200 bg-white p-1;
-}
-
-.automation-target-mode {
-  @apply rounded-md px-2 py-1.5 text-xs font-medium text-zinc-600 hover:bg-zinc-100;
-}
-
-.automation-target-mode.is-active {
-  @apply bg-zinc-900 text-white shadow-sm hover:bg-zinc-900;
-}
-
-.automation-target-dropdown {
-  @apply flex flex-col gap-2;
-}
-
-.automation-thread-list {
-  @apply mb-3 flex max-h-40 flex-col gap-1 overflow-y-auto rounded-lg border border-zinc-200 bg-zinc-50 p-1;
-}
-
-.automation-thread-list-item {
-  @apply flex items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm text-zinc-700 hover:bg-white;
-}
-
-.automation-thread-list-item.is-active {
-  @apply bg-white font-medium text-zinc-950 shadow-sm;
-}
-
-.automation-thread-list-item small {
-  @apply text-xs font-normal text-zinc-500;
-}
-
-.automation-thread-list-add {
-  @apply justify-center border border-dashed border-zinc-300 text-zinc-500;
-}
-
-.automation-thread-label {
-  @apply text-xs font-medium uppercase tracking-wide text-zinc-500;
-}
-
-.automation-thread-textarea,
-.automation-thread-select {
-  @apply w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none focus:border-zinc-500;
-}
-
-.automation-schedule-mode-group {
-  @apply grid grid-cols-3 gap-1 rounded-lg border border-zinc-200 bg-zinc-100 p-1;
-}
-
-.automation-schedule-mode {
-  @apply rounded-md px-2 py-1.5 text-xs font-medium text-zinc-600 hover:bg-white;
-}
-
-.automation-schedule-mode.is-active {
-  @apply bg-white text-zinc-950 shadow-sm;
-}
-
-.automation-schedule-row {
-  @apply mt-2 flex flex-wrap items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2;
-}
-
-.automation-schedule-copy {
-  @apply text-sm text-zinc-600;
-}
-
-.automation-schedule-time,
-.automation-schedule-number,
-.automation-schedule-unit {
-  @apply rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-900 outline-none focus:border-zinc-500;
-}
-
-.automation-schedule-number {
-  @apply w-20;
-}
-
-.automation-schedule-preview {
-  @apply mt-1 text-xs text-zinc-500;
-}
-
-.automation-thread-error {
-  @apply mb-0 text-rose-600;
-}
-
-.automation-thread-notice {
-  @apply mb-0 text-emerald-600;
-}
-</style>
+<style scoped src="./SidebarThreadTree.scoped.css"></style>
diff --git a/src/composables/desktopStateNotificationReaders.ts b/src/composables/desktopStateNotificationReaders.ts
new file mode 100644
index 000000000..41a157e8a
--- /dev/null
+++ b/src/composables/desktopStateNotificationReaders.ts
@@ -0,0 +1,798 @@
+import type { RpcNotification } from '../api/codexGateway'
+import type {
+  CommandExecutionData,
+  UiMessage,
+  UiPlanData,
+  UiPlanStep,
+  UiRateLimitSnapshot,
+  UiServerRequest,
+  UiThreadTokenUsage,
+  UiTokenUsageBreakdown,
+} from '../types/codex'
+import { clamp } from './desktopStateStorage'
+import { parseIsoTimestamp, type TurnActivityState, type TurnCompletedInfo, type TurnStartedInfo } from './desktopStateThreadHelpers'
+
+const GLOBAL_SERVER_REQUEST_SCOPE = '__global__'
+
+export function normalizePlanStepStatus(value: unknown): UiPlanStep['status'] {
+  if (value === 'completed') return 'completed'
+  if (value === 'inProgress' || value === 'in_progress') return 'inProgress'
+  return 'pending'
+}
+
+
+export function buildPlanMessageText(plan: UiPlanData): string {
+  const lines: string[] = []
+  if (plan.explanation?.trim()) {
+    lines.push(plan.explanation.trim())
+  }
+  for (const step of plan.steps) {
+    const marker = step.status === 'completed' ? 'x' : step.status === 'inProgress' ? '~' : ' '
+    lines.push(`- [${marker}] ${step.step}`)
+  }
+  return lines.join('\n').trim()
+}
+
+
+export function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+
+export function readString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+
+export function readNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+
+export function getRateLimitSnapshotKey(snapshot: UiRateLimitSnapshot): string {
+  return snapshot.limitId?.trim() || snapshot.limitName?.trim() || '__default__'
+}
+
+
+export function normalizeRateLimitWindow(value: unknown): UiRateLimitSnapshot['primary'] {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const windowValue = readNumber(record.windowDurationMins)
+  return {
+    usedPercent: clamp(readNumber(record.usedPercent) ?? 0, 0, 100),
+    windowDurationMins: windowValue,
+    windowMinutes: windowValue,
+    resetsAt: readNumber(record.resetsAt),
+  }
+}
+
+
+export function normalizeRateLimitSnapshot(value: unknown): UiRateLimitSnapshot | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const credits = asRecord(record.credits)
+  return {
+    limitId: readString(record.limitId) || null,
+    limitName: readString(record.limitName) || null,
+    primary: normalizeRateLimitWindow(record.primary),
+    secondary: normalizeRateLimitWindow(record.secondary),
+    credits: credits
+      ? {
+          hasCredits: credits.hasCredits === true,
+          unlimited: credits.unlimited === true,
+          balance: readString(credits.balance) || null,
+        }
+      : null,
+    planType: readString(record.planType) || null,
+  }
+}
+
+
+export function normalizeRateLimitSnapshotsPayload(value: unknown): UiRateLimitSnapshot[] {
+  const record = asRecord(value)
+  if (!record) return []
+
+  const next: UiRateLimitSnapshot[] = []
+  const seen = new Set<string>()
+  const pushSnapshot = (snapshot: UiRateLimitSnapshot | null): void => {
+    if (!snapshot) return
+    const key = getRateLimitSnapshotKey(snapshot)
+    if (seen.has(key)) return
+    seen.add(key)
+    next.push(snapshot)
+  }
+
+  pushSnapshot(normalizeRateLimitSnapshot(record.rateLimits))
+
+  const byLimitId = asRecord(record.rateLimitsByLimitId)
+  if (byLimitId) {
+    for (const snapshot of Object.values(byLimitId)) {
+      pushSnapshot(normalizeRateLimitSnapshot(snapshot))
+    }
+  }
+
+  return next
+}
+
+
+export function normalizeTokenUsageBreakdown(value: unknown): UiTokenUsageBreakdown | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const totalTokens = readNumber(record.totalTokens ?? record.total_tokens)
+  const inputTokens = readNumber(record.inputTokens ?? record.input_tokens)
+  const cachedInputTokens = readNumber(record.cachedInputTokens ?? record.cached_input_tokens)
+  const outputTokens = readNumber(record.outputTokens ?? record.output_tokens)
+  const reasoningOutputTokens = readNumber(record.reasoningOutputTokens ?? record.reasoning_output_tokens)
+  if (
+    totalTokens === null ||
+    inputTokens === null ||
+    cachedInputTokens === null ||
+    outputTokens === null ||
+    reasoningOutputTokens === null
+  ) {
+    return null
+  }
+
+  return {
+    totalTokens,
+    inputTokens,
+    cachedInputTokens,
+    outputTokens,
+    reasoningOutputTokens,
+  }
+}
+
+
+export function normalizeThreadTokenUsage(value: unknown): UiThreadTokenUsage | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const total = normalizeTokenUsageBreakdown(record.total)
+  const last = normalizeTokenUsageBreakdown(record.last)
+  if (!total || !last) return null
+
+  const modelContextWindow = readNumber(record.modelContextWindow ?? record.model_context_window)
+  const currentContextTokens = last.totalTokens
+  const remainingContextTokens = typeof modelContextWindow === 'number'
+    ? Math.max(modelContextWindow - currentContextTokens, 0)
+    : null
+  const remainingContextPercent = typeof modelContextWindow === 'number' && modelContextWindow > 0
+    ? clamp(Math.round((remainingContextTokens ?? 0) / modelContextWindow * 100), 0, 100)
+    : null
+
+  return {
+    total,
+    last,
+    modelContextWindow,
+    currentContextTokens,
+    remainingContextTokens,
+    remainingContextPercent,
+  }
+}
+
+
+export function readThreadTokenUsageUpdate(notification: RpcNotification): { threadId: string; usage: UiThreadTokenUsage } | null {
+  if (notification.method !== 'thread/tokenUsage/updated') return null
+  const params = asRecord(notification.params)
+  const threadId = extractThreadIdFromNotification(notification)
+  const usage = normalizeThreadTokenUsage(params?.tokenUsage ?? params?.token_usage)
+  if (!threadId || !usage) return null
+  return { threadId, usage }
+}
+
+
+export function extractThreadIdFromNotification(notification: RpcNotification): string {
+  const params = asRecord(notification.params)
+  if (!params) return ''
+
+  const directThreadId = readString(params.threadId)
+  if (directThreadId) return directThreadId
+  const snakeThreadId = readString(params.thread_id)
+  if (snakeThreadId) return snakeThreadId
+
+  const conversationId = readString(params.conversationId)
+  if (conversationId) return conversationId
+  const snakeConversationId = readString(params.conversation_id)
+  if (snakeConversationId) return snakeConversationId
+
+  const thread = asRecord(params.thread)
+  const nestedThreadId = readString(thread?.id)
+  if (nestedThreadId) return nestedThreadId
+
+  const turn = asRecord(params.turn)
+  const turnThreadId = readString(turn?.threadId)
+  if (turnThreadId) return turnThreadId
+  const turnSnakeThreadId = readString(turn?.thread_id)
+  if (turnSnakeThreadId) return turnSnakeThreadId
+
+  return ''
+}
+
+
+export function readTurnErrorMessage(notification: RpcNotification): string {
+  if (notification.method !== 'turn/completed') return ''
+  const params = asRecord(notification.params)
+  const turn = asRecord(params?.turn)
+  if (!turn || turn.status !== 'failed') return ''
+  const errorPayload = asRecord(turn.error)
+  return readString(errorPayload?.message)
+}
+
+
+export function readNotificationErrorState(notification: RpcNotification): { message: string; transient: boolean } | null {
+  if (notification.method !== 'error') return null
+  const params = asRecord(notification.params)
+  const message = (
+    readString(params?.message) ||
+    readString(asRecord(params?.error)?.message)
+  )
+  if (!message) return null
+
+  return {
+    message,
+    transient: params?.willRetry === true,
+  }
+}
+
+
+export function normalizeServerRequest(params: unknown): UiServerRequest | null {
+  const row = asRecord(params)
+  if (!row) return null
+
+  const id = row.id
+  const rawMethod = readString(row.method)
+  const requestParams = row.params
+  if (typeof id !== 'number' || !Number.isInteger(id) || !rawMethod) {
+    return null
+  }
+
+  const requestParamRecord = asRecord(requestParams)
+  const method = normalizePendingServerRequestMethod(rawMethod, requestParamRecord)
+  const threadId = (
+    readString(requestParamRecord?.threadId) ||
+    readString(requestParamRecord?.thread_id) ||
+    readString(requestParamRecord?.conversationId) ||
+    readString(requestParamRecord?.conversation_id) ||
+    GLOBAL_SERVER_REQUEST_SCOPE
+  )
+  const turnId = readString(requestParamRecord?.turnId) || readString(requestParamRecord?.turn_id)
+  const itemId = (
+    readString(requestParamRecord?.itemId) ||
+    readString(requestParamRecord?.item_id) ||
+    readString(requestParamRecord?.callId) ||
+    readString(requestParamRecord?.call_id)
+  )
+  const receivedAtIso = readString(row.receivedAtIso) || new Date().toISOString()
+
+  return {
+    id,
+    method,
+    threadId,
+    turnId,
+    itemId,
+    receivedAtIso,
+    params: requestParams ?? null,
+  }
+}
+
+
+export function normalizePendingServerRequestMethod(
+  method: string,
+  params: Record<string, unknown> | null,
+): string {
+  const normalized = method.trim()
+  if (!normalized) return normalized
+
+  if (
+    normalized === 'item/commandExecution/requestApproval' ||
+    normalized === 'execCommandApproval' ||
+    normalized === 'exec_approval_request' ||
+    looksLikeExecApprovalRequest(params)
+  ) {
+    return 'item/commandExecution/requestApproval'
+  }
+
+  if (
+    normalized === 'item/fileChange/requestApproval' ||
+    normalized === 'applyPatchApproval' ||
+    normalized === 'apply_patch_approval_request' ||
+    looksLikePatchApprovalRequest(params)
+  ) {
+    return 'item/fileChange/requestApproval'
+  }
+
+  if (
+    normalized === 'item/tool/requestUserInput' ||
+    normalized === 'request_user_input' ||
+    looksLikeToolUserInputRequest(params)
+  ) {
+    return 'item/tool/requestUserInput'
+  }
+
+  if (
+    normalized === 'mcpServer/elicitation/request' ||
+    normalized === 'elicitation_request' ||
+    looksLikeMcpServerElicitationRequest(params)
+  ) {
+    return 'mcpServer/elicitation/request'
+  }
+
+  if (normalized === 'item/permissions/requestApproval' || looksLikePermissionsApprovalRequest(params)) {
+    return 'item/permissions/requestApproval'
+  }
+
+  if (
+    normalized === 'item/tool/call' ||
+    normalized === 'dynamic_tool_call_request' ||
+    looksLikeToolCallRequest(params)
+  ) {
+    return 'item/tool/call'
+  }
+
+  return normalized
+}
+
+
+export function looksLikeExecApprovalRequest(params: Record<string, unknown> | null): boolean {
+  if (!params) return false
+  const command = params.command
+  if (Array.isArray(command) && command.some((part) => typeof part === 'string' && part.trim().length > 0)) {
+    return true
+  }
+  if (typeof command === 'string' && command.trim().length > 0) {
+    return true
+  }
+  return Array.isArray(params.commandActions)
+}
+
+
+export function looksLikePatchApprovalRequest(params: Record<string, unknown> | null): boolean {
+  if (!params) return false
+  if (typeof params.grantRoot === 'string' && params.grantRoot.trim().length > 0) return true
+  if (typeof params.grant_root === 'string' && params.grant_root.trim().length > 0) return true
+  if (asRecord(params.fileChanges)) return true
+  return asRecord(params.changes) !== null
+}
+
+
+export function looksLikeToolUserInputRequest(params: Record<string, unknown> | null): boolean {
+  return Boolean(params && Array.isArray(params.questions))
+}
+
+
+export function looksLikeToolCallRequest(params: Record<string, unknown> | null): boolean {
+  if (!params) return false
+  return (
+    typeof params.toolName === 'string' ||
+    typeof params.tool_name === 'string' ||
+    typeof params.name === 'string' ||
+    Array.isArray(params.arguments)
+  )
+}
+
+
+export function looksLikeMcpServerElicitationRequest(params: Record<string, unknown> | null): boolean {
+  if (!params) return false
+  const mode = readString(params.mode)
+  return (
+    typeof params.serverName === 'string' &&
+    typeof params.threadId === 'string' &&
+    typeof params.message === 'string' &&
+    (mode === 'form' || mode === 'url')
+  )
+}
+
+
+export function looksLikePermissionsApprovalRequest(params: Record<string, unknown> | null): boolean {
+  if (!params) return false
+  return (
+    typeof params.threadId === 'string' &&
+    typeof params.turnId === 'string' &&
+    typeof params.itemId === 'string' &&
+    asRecord(params.permissions) !== null
+  )
+}
+
+
+export function readToolRequestUserInputQuestionIds(request: UiServerRequest): string[] {
+  if (request.method !== 'item/tool/requestUserInput') return []
+  const params = asRecord(request.params)
+  const questions = Array.isArray(params?.questions) ? params.questions : []
+  const questionIds: string[] = []
+
+  for (const row of questions) {
+    const question = asRecord(row)
+    const id = readString(question?.id).trim()
+    if (id) {
+      questionIds.push(id)
+    }
+  }
+
+  return questionIds
+}
+
+
+export function sanitizeDisplayText(value: string): string {
+  return value.replace(/\s+/gu, ' ').trim()
+}
+
+
+export function readTurnActivity(notification: RpcNotification): { threadId: string; activity: TurnActivityState } | null {
+  const threadId = extractThreadIdFromNotification(notification)
+  if (!threadId) return null
+
+  if (notification.method === 'turn/started') {
+    return {
+      threadId,
+      activity: {
+        label: 'Thinking',
+        details: [],
+      },
+    }
+  }
+
+  if (notification.method === 'item/started') {
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    const itemType = readString(item?.type).toLowerCase()
+    if (itemType === 'reasoning') {
+      return {
+        threadId,
+        activity: {
+          label: 'Thinking',
+          details: [],
+        },
+      }
+    }
+    if (itemType === 'agentmessage') {
+      return {
+        threadId,
+        activity: {
+          label: 'Writing response',
+          details: [],
+        },
+      }
+    }
+    if (itemType === 'commandexecution') {
+      const cmd = readString(item?.command)
+      return {
+        threadId,
+        activity: {
+          label: 'Running command',
+          details: cmd ? [cmd] : [],
+        },
+      }
+    }
+    if (itemType === 'filechange') {
+      const changes = Array.isArray(item?.changes) ? item.changes : []
+      const firstChange = changes[0] as Record<string, unknown> | undefined
+      const path = readString(firstChange?.path)
+      return {
+        threadId,
+        activity: {
+          label: 'Applying changes',
+          details: path ? [path] : [],
+        },
+      }
+    }
+  }
+
+  if (notification.method === 'item/commandExecution/outputDelta') {
+    return {
+      threadId,
+      activity: {
+        label: 'Running command',
+        details: [],
+      },
+    }
+  }
+
+  if (notification.method === 'item/fileChange/outputDelta') {
+    return {
+      threadId,
+      activity: {
+        label: 'Applying changes',
+        details: [],
+      },
+    }
+  }
+
+  if (
+    notification.method === 'item/reasoning/summaryTextDelta' ||
+    notification.method === 'item/reasoning/summaryPartAdded'
+  ) {
+    return {
+      threadId,
+      activity: {
+        label: 'Thinking',
+        details: [],
+      },
+    }
+  }
+
+  if (notification.method === 'item/agentMessage/delta') {
+    return {
+      threadId,
+      activity: {
+        label: 'Writing response',
+        details: [],
+      },
+    }
+  }
+
+  return null
+}
+
+
+export function readTurnStartedInfo(notification: RpcNotification): TurnStartedInfo | null {
+  if (notification.method !== 'turn/started') {
+    return null
+  }
+
+  const params = asRecord(notification.params)
+  if (!params) return null
+  const threadId = extractThreadIdFromNotification(notification)
+  if (!threadId) return null
+
+  const turnPayload = asRecord(params.turn)
+  const turnId =
+    readString(turnPayload?.id) ||
+    readString(params.turnId) ||
+    `${threadId}:unknown`
+  if (!turnId) return null
+
+  const startedAtMs =
+    parseIsoTimestamp(readString(turnPayload?.startedAt)) ??
+    parseIsoTimestamp(readString(params.startedAt)) ??
+    parseIsoTimestamp(notification.atIso) ??
+    Date.now()
+
+  return {
+    threadId,
+    turnId,
+    startedAtMs,
+  }
+}
+
+
+export function readTurnCompletedInfo(notification: RpcNotification): TurnCompletedInfo | null {
+  if (notification.method !== 'turn/completed') {
+    return null
+  }
+
+  const params = asRecord(notification.params)
+  if (!params) return null
+  const threadId = extractThreadIdFromNotification(notification)
+  if (!threadId) return null
+
+  const turnPayload = asRecord(params.turn)
+  const turnId =
+    readString(turnPayload?.id) ||
+    readString(params.turnId) ||
+    `${threadId}:unknown`
+  if (!turnId) return null
+
+  const completedAtMs =
+    parseIsoTimestamp(readString(turnPayload?.completedAt)) ??
+    parseIsoTimestamp(readString(params.completedAt)) ??
+    parseIsoTimestamp(notification.atIso) ??
+    Date.now()
+
+  const startedAtMs =
+    parseIsoTimestamp(readString(turnPayload?.startedAt)) ??
+    parseIsoTimestamp(readString(params.startedAt)) ??
+    undefined
+
+  return {
+    threadId,
+    turnId,
+    completedAtMs,
+    startedAtMs,
+  }
+}
+
+
+export function liveReasoningMessageId(reasoningItemId: string): string {
+  return `${reasoningItemId}:live-reasoning`
+}
+
+
+export function readReasoningStartedItemId(notification: RpcNotification): string {
+  const params = asRecord(notification.params)
+  if (!params) return ''
+
+  if (notification.method === 'item/started') {
+    const item = asRecord(params.item)
+    if (!item || item.type !== 'reasoning') return ''
+    return readString(item.id)
+  }
+
+  return ''
+}
+
+
+export function readReasoningDelta(notification: RpcNotification): { messageId: string; delta: string } | null {
+  const params = asRecord(notification.params)
+  if (!params) return null
+
+  // Канонический источник дельт для UI — уже нормализованный item/*.
+  if (notification.method === 'item/reasoning/summaryTextDelta') {
+    const itemId = readString(params.itemId)
+    const delta = readString(params.delta)
+    if (!itemId || !delta) return null
+    return { messageId: liveReasoningMessageId(itemId), delta }
+  }
+
+  return null
+}
+
+
+export function readReasoningSectionBreakMessageId(notification: RpcNotification): string {
+  const params = asRecord(notification.params)
+  if (!params) return ''
+
+  // Канонический source для section break — item/*
+  if (notification.method === 'item/reasoning/summaryPartAdded') {
+    const itemId = readString(params.itemId)
+    if (!itemId) return ''
+    return liveReasoningMessageId(itemId)
+  }
+
+  return ''
+}
+
+
+export function readReasoningCompletedId(notification: RpcNotification): string {
+  const params = asRecord(notification.params)
+  if (!params) return ''
+
+  if (notification.method === 'item/completed') {
+    const item = asRecord(params.item)
+    if (!item || item.type !== 'reasoning') return ''
+    return liveReasoningMessageId(readString(item.id))
+  }
+
+  return ''
+}
+
+
+export function readAgentMessageStartedId(notification: RpcNotification): string {
+  const params = asRecord(notification.params)
+  if (!params) return ''
+
+  if (notification.method === 'item/started') {
+    const item = asRecord(params.item)
+    if (!item || item.type !== 'agentMessage') return ''
+    return readString(item.id)
+  }
+
+  return ''
+}
+
+
+export function readAgentMessageDelta(notification: RpcNotification): { messageId: string; delta: string } | null {
+  const params = asRecord(notification.params)
+  if (!params) return null
+
+  // Канонический live-канал агентского текста.
+  if (notification.method === 'item/agentMessage/delta') {
+    const messageId = readString(params.itemId)
+    const delta = readString(params.delta)
+    if (!messageId || !delta) return null
+    return { messageId, delta }
+  }
+
+  return null
+}
+
+
+export function readAgentMessageCompleted(notification: RpcNotification): UiMessage | null {
+  const params = asRecord(notification.params)
+  if (!params) return null
+
+  if (notification.method === 'item/completed') {
+    const item = asRecord(params.item)
+    if (!item || item.type !== 'agentMessage') return null
+    const id = readString(item.id)
+    const text = readString(item.text)
+    if (!id || !text) return null
+    return {
+      id,
+      role: 'assistant',
+      text,
+      messageType: 'agentMessage.live',
+    }
+  }
+
+  return null
+}
+
+
+export function toLocalImageUrl(path: string): string {
+  return `/codex-local-image?path=${encodeURIComponent(path)}`
+}
+
+
+export function toImageGenerationUrl(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+  if (
+    trimmed.startsWith('data:') ||
+    trimmed.startsWith('http://') ||
+    trimmed.startsWith('https://') ||
+    trimmed.startsWith('/codex-local-image?')
+  ) {
+    return trimmed
+  }
+  const compact = trimmed.replace(/\s+/gu, '')
+  if (!/^[A-Za-z0-9+/]+={0,2}$/u.test(compact)) return ''
+  return `data:image/png;base64,${compact}`
+}
+
+
+export function readCompletedImageView(notification: RpcNotification): UiMessage | null {
+  if (notification.method !== 'item/completed') return null
+  const params = asRecord(notification.params)
+  const item = asRecord(params?.item)
+  if (!item) return null
+  const id = readString(item.id)
+  if (!id) return null
+  if (item.type === 'imageView') {
+    const path = readString(item.path)
+    if (!path) return null
+    return {
+      id,
+      role: 'assistant',
+      text: '',
+      images: [toLocalImageUrl(path)],
+      messageType: 'imageView',
+    }
+  }
+  if (item.type !== 'imageGeneration' && item.type !== 'image_generation') return null
+  const result = readString(item.result)
+  const imageUrl = result ? toImageGenerationUrl(result) : ''
+  if (!imageUrl) return null
+  return {
+    id,
+    role: 'assistant',
+    text: '',
+    images: [imageUrl],
+    messageType: 'imageView',
+
+  }
+}
+
+
+export function readCommandOutputDelta(notification: RpcNotification): { itemId: string; delta: string } | null {
+  if (notification.method !== 'item/commandExecution/outputDelta') return null
+  const params = asRecord(notification.params)
+  if (!params) return null
+  const itemId = readString(params.itemId)
+  const delta = readString(params.delta)
+  if (!itemId || !delta) return null
+  return { itemId, delta }
+}
+
+
+export function isAgentContentEvent(notification: RpcNotification): boolean {
+  if (notification.method === 'item/agentMessage/delta') {
+    return true
+  }
+
+  const params = asRecord(notification.params)
+  if (!params) return false
+
+  if (notification.method === 'item/completed') {
+    const item = asRecord(params.item)
+    return item?.type === 'agentMessage'
+  }
+
+  return false
+}
+
+
diff --git a/src/composables/desktopStateStorage.ts b/src/composables/desktopStateStorage.ts
new file mode 100644
index 000000000..c52e2e30c
--- /dev/null
+++ b/src/composables/desktopStateStorage.ts
@@ -0,0 +1,448 @@
+import type { CollaborationModeKind, UiThreadTokenUsage } from '../types/codex'
+import { toProjectName } from '../pathUtils.js'
+
+const READ_STATE_STORAGE_KEY = 'codex-web-local.thread-read-state.v1'
+const UNREAD_CUTOFF_STORAGE_KEY = 'codex-web-local.thread-unread-cutoff.v1'
+const THREAD_TOKEN_USAGE_STORAGE_KEY = 'codex-web-local.thread-token-usage.v1'
+const THREAD_TERMINAL_OPEN_STORAGE_KEY = 'codex-web-local.thread-terminal-open.v1'
+const SELECTED_THREAD_STORAGE_KEY = 'codex-web-local.selected-thread-id.v1'
+const SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY = 'codex-web-local.selected-model-by-context.v1'
+const LEGACY_SELECTED_MODEL_STORAGE_KEY = 'codex-web-local.selected-model-id.v1'
+const PROJECT_ORDER_STORAGE_KEY = 'codex-web-local.project-order.v1'
+const PROJECT_DISPLAY_NAME_STORAGE_KEY = 'codex-web-local.project-display-name.v1'
+const COLLABORATION_MODE_STORAGE_KEY = 'codex-web-local.collaboration-mode-by-context.v1'
+const LEGACY_COLLABORATION_MODE_STORAGE_KEY = 'codex-web-local.collaboration-mode.v1'
+export const NEW_THREAD_COLLABORATION_MODE_CONTEXT = '__new-thread__'
+const NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX = '__new-thread-provider__::'
+
+export function loadReadStateMap(): Record<string, string> {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(READ_STATE_STORAGE_KEY)
+    if (!raw) return {}
+
+    const parsed = JSON.parse(raw) as unknown
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+    return parsed as Record<string, string>
+  } catch {
+    return {}
+  }
+}
+
+export function saveReadStateMap(state: Record<string, string>): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(READ_STATE_STORAGE_KEY, JSON.stringify(state))
+}
+
+export function loadUnreadCutoffIso(): string {
+  if (typeof window === 'undefined') return ''
+
+  const existing = window.localStorage.getItem(UNREAD_CUTOFF_STORAGE_KEY)
+  if (existing) return existing
+
+  const initialCutoff = new Date().toISOString()
+  window.localStorage.setItem(UNREAD_CUTOFF_STORAGE_KEY, initialCutoff)
+  return initialCutoff
+}
+
+export function saveUnreadCutoffIso(cutoffIso: string): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(UNREAD_CUTOFF_STORAGE_KEY, cutoffIso)
+}
+
+export function isThreadUpdatedAfterCutoff(updatedAtIso: string, cutoffIso: string): boolean {
+  if (!updatedAtIso || !cutoffIso) return false
+  const updatedAtMs = new Date(updatedAtIso).getTime()
+  const cutoffMs = new Date(cutoffIso).getTime()
+  if (!Number.isFinite(updatedAtMs) || !Number.isFinite(cutoffMs)) return false
+  return updatedAtMs > cutoffMs
+}
+
+export function isThreadUnreadByLastRead(
+  updatedAtIso: string,
+  threadReadStateIso: string | undefined,
+  unreadCutoffIso: string,
+): boolean {
+  const effectiveLastReadIso = threadReadStateIso ?? unreadCutoffIso
+  return isThreadUpdatedAfterCutoff(updatedAtIso, effectiveLastReadIso)
+}
+
+export function normalizeCollaborationMode(value: unknown): CollaborationModeKind {
+  return value === 'plan' ? 'plan' : 'default'
+}
+
+export function normalizeStoredModelId(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+export function createStringKeyedRecord<T>(): Record<string, T> {
+  return Object.create(null) as Record<string, T>
+}
+
+export function cloneStringKeyedRecord<T>(record: Record<string, T>): Record<string, T> {
+  const next = createStringKeyedRecord<T>()
+  for (const [key, value] of Object.entries(record)) {
+    next[key] = value
+  }
+  return next
+}
+
+export function omitStringKeyedRecordKey<T>(record: Record<string, T>, key: string): Record<string, T> {
+  if (!(key in record)) return record
+  const next = createStringKeyedRecord<T>()
+  for (const [entryKey, value] of Object.entries(record)) {
+    if (entryKey !== key) {
+      next[entryKey] = value
+    }
+  }
+  return next
+}
+
+export function pruneThreadContextStateMap<T>(
+  stateMap: Record<string, T>,
+  threadIds: Set<string>,
+): Record<string, T> {
+  let changed = false
+  const next = createStringKeyedRecord<T>()
+  for (const [contextId, value] of Object.entries(stateMap)) {
+    if (
+      contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT
+      || contextId.startsWith(NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX)
+      || threadIds.has(contextId)
+    ) {
+      next[contextId] = value
+      continue
+    }
+    changed = true
+  }
+  return changed ? next : stateMap
+}
+
+export function normalizeProviderContextId(providerId: string): string {
+  const normalized = providerId.trim().toLowerCase()
+  return normalized || 'codex'
+}
+
+export function isNewThreadContextId(contextId: string): boolean {
+  return contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT
+}
+
+export function toProviderModelContextId(providerId: string): string {
+  const normalizedProviderId = normalizeProviderContextId(providerId)
+  if (!normalizedProviderId) return ''
+  return `${NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX}${normalizedProviderId}`
+}
+
+export function toThreadContextId(threadId: string): string {
+  const normalizedThreadId = threadId.trim()
+  return normalizedThreadId || NEW_THREAD_COLLABORATION_MODE_CONTEXT
+}
+
+export function loadSelectedModelMap(): Record<string, string> {
+  if (typeof window === 'undefined') return createStringKeyedRecord<string>()
+
+  try {
+    const raw = window.localStorage.getItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as unknown
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return createStringKeyedRecord<string>()
+
+      const next = createStringKeyedRecord<string>()
+      for (const [contextId, value] of Object.entries(parsed as Record<string, unknown>)) {
+        if (typeof contextId !== 'string' || contextId.length === 0) continue
+        const normalizedModelId = normalizeStoredModelId(value)
+        if (normalizedModelId) {
+          next[contextId] = normalizedModelId
+        }
+      }
+      return next
+    }
+  } catch {
+    // Fall back to the legacy global preference below.
+  }
+
+  const legacyModelId = normalizeStoredModelId(window.localStorage.getItem(LEGACY_SELECTED_MODEL_STORAGE_KEY))
+  const next = createStringKeyedRecord<string>()
+  if (legacyModelId) {
+    next[NEW_THREAD_COLLABORATION_MODE_CONTEXT] = legacyModelId
+  }
+  return next
+}
+
+export function readSelectedModel(
+  state: Record<string, string>,
+  threadId: string,
+): string {
+  const contextId = toThreadContextId(threadId)
+  const contextModelId = normalizeStoredModelId(state[contextId])
+  if (contextModelId) return contextModelId
+  return normalizeStoredModelId(state[NEW_THREAD_COLLABORATION_MODE_CONTEXT])
+}
+
+export function saveSelectedModelMap(state: Record<string, string>): void {
+  if (typeof window === 'undefined') return
+  try {
+    if (Object.keys(state).length === 0) {
+      window.localStorage.removeItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY)
+    } else {
+      window.localStorage.setItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY, JSON.stringify(state))
+    }
+    window.localStorage.removeItem(LEGACY_SELECTED_MODEL_STORAGE_KEY)
+  } catch {
+    // Keep in-memory selection working even if localStorage writes fail.
+  }
+}
+
+export function loadSelectedCollaborationModeMap(): Record<string, CollaborationModeKind> {
+  if (typeof window === 'undefined') return createStringKeyedRecord<CollaborationModeKind>()
+
+  try {
+    const raw = window.localStorage.getItem(COLLABORATION_MODE_STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as unknown
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        return createStringKeyedRecord<CollaborationModeKind>()
+      }
+
+      const next = createStringKeyedRecord<CollaborationModeKind>()
+      for (const [contextId, value] of Object.entries(parsed as Record<string, unknown>)) {
+        if (typeof contextId !== 'string' || contextId.length === 0) continue
+        const normalizedMode = normalizeCollaborationMode(value)
+        if (normalizedMode === 'plan') {
+          next[contextId] = normalizedMode
+        }
+      }
+      return next
+    }
+  } catch {
+    // Fall back to the legacy global preference below.
+  }
+
+  return createStringKeyedRecord<CollaborationModeKind>()
+}
+
+export function readSelectedCollaborationMode(
+  state: Record<string, CollaborationModeKind>,
+  threadId: string,
+): CollaborationModeKind {
+  const contextId = toThreadContextId(threadId)
+  return normalizeCollaborationMode(state[contextId])
+}
+
+export function writeSelectedCollaborationModeForContext(
+  state: Record<string, CollaborationModeKind>,
+  threadId: string,
+  mode: CollaborationModeKind,
+): Record<string, CollaborationModeKind> {
+  const contextId = toThreadContextId(threadId)
+  if (isNewThreadContextId(contextId)) {
+    return omitStringKeyedRecordKey(state, contextId)
+  }
+  if (mode === 'plan') {
+    const next = cloneStringKeyedRecord(state)
+    next[contextId] = 'plan'
+    return next
+  }
+  return omitStringKeyedRecordKey(state, contextId)
+}
+
+export function saveSelectedCollaborationModeMap(state: Record<string, CollaborationModeKind>): void {
+  if (typeof window === 'undefined') return
+  try {
+    if (Object.keys(state).length === 0) {
+      window.localStorage.removeItem(COLLABORATION_MODE_STORAGE_KEY)
+    } else {
+      window.localStorage.setItem(COLLABORATION_MODE_STORAGE_KEY, JSON.stringify(state))
+    }
+    window.localStorage.removeItem(LEGACY_COLLABORATION_MODE_STORAGE_KEY)
+  } catch {
+    // Keep in-memory mode selection working even if localStorage writes fail.
+  }
+}
+
+export function clamp(value: number, minValue: number, maxValue: number): number {
+  return Math.min(Math.max(value, minValue), maxValue)
+}
+
+export function normalizeStoredTokenCount(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Math.max(0, Math.trunc(value))
+  }
+
+  if (typeof value === 'string' && value.trim().length > 0) {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) {
+      return Math.max(0, Math.trunc(parsed))
+    }
+  }
+
+  return null
+}
+
+export function normalizeTokenUsageBreakdown(value: unknown): UiThreadTokenUsage['last'] | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+
+  const record = value as Record<string, unknown>
+  return {
+    totalTokens: normalizeStoredTokenCount(record.totalTokens) ?? 0,
+    inputTokens: normalizeStoredTokenCount(record.inputTokens) ?? 0,
+    cachedInputTokens: normalizeStoredTokenCount(record.cachedInputTokens) ?? 0,
+    outputTokens: normalizeStoredTokenCount(record.outputTokens) ?? 0,
+    reasoningOutputTokens: normalizeStoredTokenCount(record.reasoningOutputTokens) ?? 0,
+  }
+}
+
+export function normalizeThreadTokenUsage(value: unknown): UiThreadTokenUsage | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+
+  const record = value as Record<string, unknown>
+  const total = normalizeTokenUsageBreakdown(record.total)
+  const last = normalizeTokenUsageBreakdown(record.last)
+  if (!total || !last) return null
+
+  const modelContextWindow = normalizeStoredTokenCount(record.modelContextWindow)
+  const currentContextTokens = last.totalTokens
+  const remainingContextTokens = typeof modelContextWindow === 'number'
+    ? Math.max(modelContextWindow - currentContextTokens, 0)
+    : null
+  const remainingContextPercent = typeof modelContextWindow === 'number' && modelContextWindow > 0
+    ? clamp(Math.round((remainingContextTokens ?? 0) / modelContextWindow * 100), 0, 100)
+    : null
+
+  return {
+    total,
+    last,
+    modelContextWindow,
+    currentContextTokens,
+    remainingContextTokens,
+    remainingContextPercent,
+  }
+}
+
+export function loadThreadTokenUsageMap(): Record<string, UiThreadTokenUsage> {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(THREAD_TOKEN_USAGE_STORAGE_KEY)
+    if (!raw) return {}
+
+    const parsed = JSON.parse(raw) as unknown
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+
+    const normalizedMap: Record<string, UiThreadTokenUsage> = {}
+    for (const [threadId, usage] of Object.entries(parsed as Record<string, unknown>)) {
+      if (!threadId) continue
+      const normalizedUsage = normalizeThreadTokenUsage(usage)
+      if (normalizedUsage) {
+        normalizedMap[threadId] = normalizedUsage
+      }
+    }
+    return normalizedMap
+  } catch {
+    return {}
+  }
+}
+
+export function saveThreadTokenUsageMap(state: Record<string, UiThreadTokenUsage>): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(THREAD_TOKEN_USAGE_STORAGE_KEY, JSON.stringify(state))
+}
+
+export function loadThreadTerminalOpenMap(): Record<string, boolean> {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(THREAD_TERMINAL_OPEN_STORAGE_KEY)
+    if (!raw) return {}
+
+    const parsed = JSON.parse(raw) as unknown
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+
+    const normalizedMap: Record<string, boolean> = {}
+    for (const [threadId, isOpen] of Object.entries(parsed as Record<string, unknown>)) {
+      if (threadId && typeof isOpen === 'boolean') {
+        normalizedMap[threadId] = isOpen
+      }
+    }
+    return normalizedMap
+  } catch {
+    return {}
+  }
+}
+
+export function saveThreadTerminalOpenMap(state: Record<string, boolean>): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(THREAD_TERMINAL_OPEN_STORAGE_KEY, JSON.stringify(state))
+}
+
+export function loadSelectedThreadId(): string {
+  if (typeof window === 'undefined') return ''
+  const raw = window.localStorage.getItem(SELECTED_THREAD_STORAGE_KEY)
+  return raw ?? ''
+}
+
+export function saveSelectedThreadId(threadId: string): void {
+  if (typeof window === 'undefined') return
+  if (!threadId) {
+    window.localStorage.removeItem(SELECTED_THREAD_STORAGE_KEY)
+    return
+  }
+  window.localStorage.setItem(SELECTED_THREAD_STORAGE_KEY, threadId)
+}
+
+export function loadProjectOrder(): string[] {
+  if (typeof window === 'undefined') return []
+
+  try {
+    const raw = window.localStorage.getItem(PROJECT_ORDER_STORAGE_KEY)
+    if (!raw) return []
+
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    const order: string[] = []
+    for (const item of parsed) {
+      if (typeof item !== 'string' || item.length === 0) continue
+      const normalizedItem = toProjectName(item)
+      if (normalizedItem.length > 0 && !order.includes(normalizedItem)) {
+        order.push(normalizedItem)
+      }
+    }
+    return order
+  } catch {
+    return []
+  }
+}
+
+export function saveProjectOrder(order: string[]): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(PROJECT_ORDER_STORAGE_KEY, JSON.stringify(order))
+}
+
+export function loadProjectDisplayNames(): Record<string, string> {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(PROJECT_DISPLAY_NAME_STORAGE_KEY)
+    if (!raw) return {}
+
+    const parsed = JSON.parse(raw) as unknown
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+
+    const displayNames: Record<string, string> = {}
+    for (const [projectName, displayName] of Object.entries(parsed as Record<string, unknown>)) {
+      const normalizedProjectName = typeof projectName === 'string' ? toProjectName(projectName) : ''
+      if (normalizedProjectName.length > 0 && typeof displayName === 'string') {
+        displayNames[normalizedProjectName] = displayName
+      }
+    }
+    return displayNames
+  } catch {
+    return {}
+  }
+}
+
+export function saveProjectDisplayNames(displayNames: Record<string, string>): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.setItem(PROJECT_DISPLAY_NAME_STORAGE_KEY, JSON.stringify(displayNames))
+}
diff --git a/src/composables/desktopStateThreadHelpers.ts b/src/composables/desktopStateThreadHelpers.ts
new file mode 100644
index 000000000..958981312
--- /dev/null
+++ b/src/composables/desktopStateThreadHelpers.ts
@@ -0,0 +1,846 @@
+import type {
+  CommandExecutionData,
+  UiFileChange,
+  UiMessage,
+  UiPlanData,
+  UiPlanStep,
+  UiProjectGroup,
+  UiThread,
+  ReasoningEffort,
+} from '../types/codex'
+import type { WorkspaceRootsState } from '../api/codexGateway'
+import { getPathParent, isProjectlessChatPath, normalizePathForUi, toProjectName } from '../pathUtils.js'
+
+export function flattenThreads(groups: UiProjectGroup[]): UiThread[] {
+  return groups.flatMap((group) => group.threads)
+}
+
+export function findAdjacentThreadId(threads: UiThread[], threadId: string): string {
+  const targetIndex = threads.findIndex((thread) => thread.id === threadId)
+  if (targetIndex < 0) return ''
+  return threads[targetIndex + 1]?.id ?? threads[targetIndex - 1]?.id ?? ''
+}
+
+export const EVENT_SYNC_DEBOUNCE_MS = 220
+export const BACKGROUND_THREAD_PAGINATION_DELAY_MS = 10_000
+export const RATE_LIMIT_REFRESH_DEBOUNCE_MS = 500
+export const TURN_START_FOLLOW_UP_SYNC_DELAY_MS = 3000
+export const RECENT_THREAD_MESSAGE_LOAD_REUSE_MS = 2000
+export const REASONING_EFFORT_OPTIONS: ReasoningEffort[] = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh']
+export const GLOBAL_SERVER_REQUEST_SCOPE = '__global__'
+export const MODEL_FALLBACK_ID = 'gpt-5.4-mini'
+
+export function mergeProjectOrder(previousOrder: string[], incomingGroups: UiProjectGroup[]): string[] {
+  const nextOrder: string[] = []
+
+  for (const projectName of previousOrder) {
+    if (!nextOrder.includes(projectName)) {
+      nextOrder.push(projectName)
+    }
+  }
+
+  for (const group of incomingGroups) {
+    if (!nextOrder.includes(group.projectName)) {
+      nextOrder.push(group.projectName)
+    }
+  }
+
+  return areStringArraysEqual(previousOrder, nextOrder) ? previousOrder : nextOrder
+}
+
+export function orderGroupsByProjectOrder(incoming: UiProjectGroup[], projectOrder: string[]): UiProjectGroup[] {
+  const incomingByName = new Map(incoming.map((group) => [group.projectName, group]))
+  const ordered: UiProjectGroup[] = projectOrder
+    .map((projectName) => incomingByName.get(projectName) ?? null)
+    .filter((group): group is UiProjectGroup => group !== null)
+
+  for (const group of incoming) {
+    if (!projectOrder.includes(group.projectName)) {
+      ordered.push(group)
+    }
+  }
+
+  return ordered
+}
+
+export function areStringArraysEqual(first?: string[], second?: string[]): boolean {
+  const left = Array.isArray(first) ? first : []
+  const right = Array.isArray(second) ? second : []
+  if (left.length !== right.length) return false
+  for (let index = 0; index < left.length; index += 1) {
+    if (left[index] !== right[index]) return false
+  }
+  return true
+}
+
+export function reorderStringArray(items: string[], fromIndex: number, toIndex: number): string[] {
+  if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex >= items.length) {
+    return items
+  }
+
+  if (fromIndex === toIndex) {
+    return items
+  }
+
+  const next = [...items]
+  const [moved] = next.splice(fromIndex, 1)
+  next.splice(toIndex, 0, moved)
+  return next
+}
+
+export function areCommandExecutionsEqual(first?: CommandExecutionData, second?: CommandExecutionData): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  return first.status === second.status && first.aggregatedOutput === second.aggregatedOutput && first.exitCode === second.exitCode
+}
+
+export function arePlanStepsEqual(first: UiPlanStep[] = [], second: UiPlanStep[] = []): boolean {
+  if (first.length !== second.length) return false
+  for (let index = 0; index < first.length; index += 1) {
+    if (first[index]?.step !== second[index]?.step || first[index]?.status !== second[index]?.status) {
+      return false
+    }
+  }
+  return true
+}
+
+export function arePlanDataEqual(first?: UiPlanData, second?: UiPlanData): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  return (
+    first.explanation === second.explanation &&
+    first.isStreaming === second.isStreaming &&
+    arePlanStepsEqual(first.steps, second.steps)
+  )
+}
+
+export function isUnsupportedChatGptModelError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+  const message = error.message.toLowerCase()
+  return (
+    message.includes('not supported when using codex with a chatgpt account') ||
+    message.includes('model is not supported') ||
+    message.includes('requires a newer version of codex')
+  )
+}
+
+export function areMessageFieldsEqual(first: UiMessage, second: UiMessage): boolean {
+  return (
+    first.id === second.id &&
+    first.role === second.role &&
+    first.text === second.text &&
+    areStringArraysEqual(first.images, second.images) &&
+    areUiFileChangesEqual(first.fileChanges, second.fileChanges) &&
+    first.fileChangeStatus === second.fileChangeStatus &&
+    first.messageType === second.messageType &&
+    first.rawPayload === second.rawPayload &&
+    first.isUnhandled === second.isUnhandled &&
+    areCommandExecutionsEqual(first.commandExecution, second.commandExecution) &&
+    arePlanDataEqual(first.plan, second.plan) &&
+    first.turnId === second.turnId &&
+    first.turnIndex === second.turnIndex &&
+    first.isAutomationRun === second.isAutomationRun &&
+    first.automationDisplayName === second.automationDisplayName
+  )
+}
+
+export function areMessageArraysEqual(first: UiMessage[], second: UiMessage[]): boolean {
+  if (first.length !== second.length) return false
+  for (let index = 0; index < first.length; index += 1) {
+    if (first[index] !== second[index]) return false
+  }
+  return true
+}
+
+export function mergeMessages(
+  previous: UiMessage[],
+  incoming: UiMessage[],
+  options: { preserveMissing?: boolean } = {},
+): UiMessage[] {
+  const previousById = new Map(previous.map((message) => [message.id, message]))
+  const incomingById = new Map(incoming.map((message) => [message.id, message]))
+
+  const mergedIncoming = incoming.map((incomingMessage) => {
+    const previousMessage = previousById.get(incomingMessage.id)
+    if (previousMessage && areMessageFieldsEqual(previousMessage, incomingMessage)) {
+      return previousMessage
+    }
+    return incomingMessage
+  })
+
+  if (options.preserveMissing !== true) {
+    return areMessageArraysEqual(previous, mergedIncoming) ? previous : mergedIncoming
+  }
+
+  const mergedFromPrevious = previous.map((previousMessage) => {
+    const nextMessage = incomingById.get(previousMessage.id)
+    if (!nextMessage) {
+      return previousMessage
+    }
+    if (areMessageFieldsEqual(previousMessage, nextMessage)) {
+      return previousMessage
+    }
+    return nextMessage
+  })
+
+  const previousIdSet = new Set(previous.map((message) => message.id))
+  const appended = mergedIncoming.filter((message) => !previousIdSet.has(message.id))
+  const merged = [...mergedFromPrevious, ...appended]
+
+  return areMessageArraysEqual(previous, merged) ? previous : merged
+}
+
+export function areUiFileChangesEqual(first?: UiFileChange[], second?: UiFileChange[]): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  if (first.length !== second.length) return false
+  for (let index = 0; index < first.length; index += 1) {
+    const firstChange = first[index]
+    const secondChange = second[index]
+    if (
+      firstChange.path !== secondChange.path ||
+      firstChange.operation !== secondChange.operation ||
+      firstChange.movedToPath !== secondChange.movedToPath ||
+      firstChange.diff !== secondChange.diff ||
+      firstChange.addedLineCount !== secondChange.addedLineCount ||
+      firstChange.removedLineCount !== secondChange.removedLineCount
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+export function normalizeMessageText(value: string): string {
+  return value.replace(/\s+/gu, ' ').trim()
+}
+
+export function removeRedundantLiveAgentMessages(previous: UiMessage[], incoming: UiMessage[]): UiMessage[] {
+  const incomingMessageIds = new Set(incoming.map((message) => message.id))
+  const incomingAssistantTexts = new Set(
+    incoming
+      .filter((message) => message.role === 'assistant')
+      .map((message) => normalizeMessageText(message.text))
+      .filter((text) => text.length > 0),
+  )
+
+  if (incomingAssistantTexts.size === 0) {
+    return previous
+  }
+
+  const next = previous.filter((message) => {
+    if (message.messageType !== 'agentMessage.live') return true
+    if (incomingMessageIds.has(message.id)) return false
+    const normalized = normalizeMessageText(message.text)
+    if (normalized.length === 0) return false
+    return !incomingAssistantTexts.has(normalized)
+  })
+
+  return next.length === previous.length ? previous : next
+}
+
+export function removePersistedLiveMessages(previous: UiMessage[], incoming: UiMessage[]): UiMessage[] {
+  const incomingIds = new Set(incoming.map((message) => message.id))
+  const next = previous.filter((message) => !incomingIds.has(message.id))
+  return next.length === previous.length ? previous : next
+}
+
+export function upsertMessage(previous: UiMessage[], nextMessage: UiMessage): UiMessage[] {
+  const existingIndex = previous.findIndex((message) => message.id === nextMessage.id)
+  if (existingIndex < 0) {
+    return [...previous, nextMessage]
+  }
+
+  const existing = previous[existingIndex]
+  if (areMessageFieldsEqual(existing, nextMessage)) {
+    return previous
+  }
+
+  const next = [...previous]
+  next.splice(existingIndex, 1, nextMessage)
+  return next
+}
+
+export type TurnSummaryState = {
+  turnId: string
+  durationMs: number
+}
+
+export type TurnActivityState = {
+  label: string
+  details: string[]
+}
+
+export type TurnErrorState = {
+  message: string
+  transient: boolean
+}
+
+export type TurnStartedInfo = {
+  threadId: string
+  turnId: string
+  startedAtMs: number
+}
+
+export type TurnCompletedInfo = {
+  threadId: string
+  turnId: string
+  completedAtMs: number
+  startedAtMs?: number
+}
+
+export const WORKED_MESSAGE_TYPE = 'worked'
+
+export function parseIsoTimestamp(value: string): number | null {
+  if (!value) return null
+  const ms = new Date(value).getTime()
+  return Number.isNaN(ms) ? null : ms
+}
+
+export function formatTurnDuration(durationMs: number): string {
+  if (!Number.isFinite(durationMs) || durationMs <= 0) {
+    return '<1s'
+  }
+
+  const totalSeconds = Math.max(1, Math.round(durationMs / 1000))
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  const parts: string[] = []
+
+  if (hours > 0) {
+    parts.push(`${hours}h`)
+  }
+
+  if (minutes > 0 || hours > 0) {
+    parts.push(`${minutes}m`)
+  }
+
+  const displaySeconds = seconds > 0 || parts.length === 0 ? seconds : 0
+  parts.push(`${displaySeconds}s`)
+  return parts.join(' ')
+}
+
+export function areTurnSummariesEqual(first?: TurnSummaryState, second?: TurnSummaryState): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  return first.turnId === second.turnId && first.durationMs === second.durationMs
+}
+
+export function areTurnActivitiesEqual(first?: TurnActivityState, second?: TurnActivityState): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  if (first.label !== second.label) return false
+  if (first.details.length !== second.details.length) return false
+  for (let index = 0; index < first.details.length; index += 1) {
+    if (first.details[index] !== second.details[index]) return false
+  }
+  return true
+}
+
+export function buildTurnSummaryMessage(summary: TurnSummaryState): UiMessage {
+  return {
+    id: `turn-summary:${summary.turnId}`,
+    role: 'system',
+    text: `Worked for ${formatTurnDuration(summary.durationMs)}`,
+    messageType: WORKED_MESSAGE_TYPE,
+    turnId: summary.turnId,
+  }
+}
+
+export function findLastAssistantMessageIndex(messages: UiMessage[]): number {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === 'assistant') {
+      return index
+    }
+  }
+  return -1
+}
+
+export function insertTurnSummaryMessage(messages: UiMessage[], summary: TurnSummaryState): UiMessage[] {
+  const summaryMessage = buildTurnSummaryMessage(summary)
+  const sanitizedMessages = messages.filter((message) => message.messageType !== WORKED_MESSAGE_TYPE)
+  const insertIndex = findLastAssistantMessageIndex(sanitizedMessages)
+  if (insertIndex < 0) {
+    return [...sanitizedMessages, summaryMessage]
+  }
+  const next = [...sanitizedMessages]
+  next.splice(insertIndex, 0, summaryMessage)
+  return next
+}
+
+export function omitKey<TValue>(record: Record<string, TValue>, key: string): Record<string, TValue> {
+  if (!(key in record)) return record
+  const next = { ...record }
+  delete next[key]
+  return next
+}
+
+export function omitKeys<TValue>(record: Record<string, TValue>, keys: Set<string>): Record<string, TValue> {
+  if (keys.size === 0) return record
+  let changed = false
+  const next: Record<string, TValue> = {}
+  for (const [key, value] of Object.entries(record)) {
+    if (keys.has(key)) {
+      changed = true
+      continue
+    }
+    next[key] = value
+  }
+  return changed ? next : record
+}
+
+export function areThreadFieldsEqual(first: UiThread, second: UiThread): boolean {
+  return (
+    first.id === second.id &&
+    first.title === second.title &&
+    first.projectName === second.projectName &&
+    first.cwd === second.cwd &&
+    first.createdAtIso === second.createdAtIso &&
+    first.updatedAtIso === second.updatedAtIso &&
+    first.preview === second.preview &&
+    first.unread === second.unread &&
+    first.inProgress === second.inProgress &&
+    first.pendingRequestState === second.pendingRequestState
+  )
+}
+
+export function areThreadArraysEqual(first: UiThread[], second: UiThread[]): boolean {
+  if (first.length !== second.length) return false
+  for (let index = 0; index < first.length; index += 1) {
+    if (first[index] !== second[index]) return false
+  }
+  return true
+}
+
+export function areGroupArraysEqual(first: UiProjectGroup[], second: UiProjectGroup[]): boolean {
+  if (first.length !== second.length) return false
+  for (let index = 0; index < first.length; index += 1) {
+    if (first[index] !== second[index]) return false
+  }
+  return true
+}
+
+export function pruneThreadStateMap<T>(stateMap: Record<string, T>, threadIds: Set<string>): Record<string, T> {
+  const nextEntries = Object.entries(stateMap).filter(([threadId]) => threadIds.has(threadId))
+  if (nextEntries.length === Object.keys(stateMap).length) {
+    return stateMap
+  }
+  return Object.fromEntries(nextEntries) as Record<string, T>
+}
+
+export function removeThreadFromGroups(groups: UiProjectGroup[], threadId: string): UiProjectGroup[] {
+  const normalizedThreadId = threadId.trim()
+  if (!normalizedThreadId) return groups
+
+  let changed = false
+  const nextGroups: UiProjectGroup[] = []
+
+  for (const group of groups) {
+    const nextThreads = group.threads.filter((thread) => thread.id !== normalizedThreadId)
+    const removedFromGroup = nextThreads.length !== group.threads.length
+    if (removedFromGroup) {
+      changed = true
+    }
+    if (nextThreads.length > 0) {
+      nextGroups.push(removedFromGroup ? { ...group, threads: nextThreads } : group)
+    } else if (group.threads.length === 0) {
+      nextGroups.push(group)
+    }
+  }
+
+  return changed ? nextGroups : groups
+}
+
+export function mergeThreadGroups(
+  previous: UiProjectGroup[],
+  incoming: UiProjectGroup[],
+): UiProjectGroup[] {
+  const previousGroupsByName = new Map(previous.map((group) => [group.projectName, group]))
+  const mergedGroups: UiProjectGroup[] = incoming.map((incomingGroup) => {
+    const previousGroup = previousGroupsByName.get(incomingGroup.projectName)
+    const previousThreadsById = new Map(previousGroup?.threads.map((thread) => [thread.id, thread]) ?? [])
+
+    const mergedThreads = incomingGroup.threads.map((incomingThread) => {
+      const previousThread = previousThreadsById.get(incomingThread.id)
+      if (previousThread && areThreadFieldsEqual(previousThread, incomingThread)) {
+        return previousThread
+      }
+      return incomingThread
+    })
+
+    if (
+      previousGroup &&
+      previousGroup.projectName === incomingGroup.projectName &&
+      areThreadArraysEqual(previousGroup.threads, mergedThreads)
+    ) {
+      return previousGroup
+    }
+
+    return {
+      projectName: incomingGroup.projectName,
+      threads: mergedThreads,
+    }
+  })
+
+  return areGroupArraysEqual(previous, mergedGroups) ? previous : mergedGroups
+}
+
+export function mergeIncomingWithLocalInProgressThreads(
+  previous: UiProjectGroup[],
+  incoming: UiProjectGroup[],
+  inProgressById: Record<string, boolean>,
+): UiProjectGroup[] {
+  const incomingThreadIds = new Set(flattenThreads(incoming).map((thread) => thread.id))
+  const localInProgressThreads = flattenThreads(previous).filter(
+    (thread) => inProgressById[thread.id] === true && !incomingThreadIds.has(thread.id),
+  )
+
+  if (localInProgressThreads.length === 0) {
+    return incoming
+  }
+
+  const incomingByProjectName = new Map(incoming.map((group) => [group.projectName, group]))
+  const merged: UiProjectGroup[] = incoming.map((group) => ({
+    projectName: group.projectName,
+    threads: [...group.threads],
+  }))
+
+  for (const thread of localInProgressThreads) {
+    const existingGroup = incomingByProjectName.get(thread.projectName)
+    if (existingGroup) {
+      const mergedGroupIndex = merged.findIndex((group) => group.projectName === thread.projectName)
+      if (mergedGroupIndex >= 0) {
+        merged[mergedGroupIndex] = {
+          projectName: merged[mergedGroupIndex].projectName,
+          threads: [thread, ...merged[mergedGroupIndex].threads],
+        }
+      }
+      continue
+    }
+
+    merged.push({
+      projectName: thread.projectName,
+      threads: [thread],
+    })
+  }
+
+  return merged
+}
+
+export function toProjectNameFromWorkspaceRoot(value: string): string {
+  return toProjectName(value)
+}
+
+export function getRemoteProjectHostLabel(hostId: string): string {
+  const normalized = hostId.trim()
+  if (!normalized) return ''
+  const separatorIndex = normalized.lastIndexOf(':')
+  return separatorIndex >= 0 ? normalized.slice(separatorIndex + 1) : normalized
+}
+
+export function getRemoteProjectDisplayName(remoteProject: NonNullable<WorkspaceRootsState['remoteProjects']>[number]): string {
+  const label = remoteProject.label || toProjectName(remoteProject.remotePath) || remoteProject.id
+  const hostLabel = getRemoteProjectHostLabel(remoteProject.hostId)
+  return hostLabel ? `${label} ${hostLabel}` : label
+}
+
+export function getRemoteProjectById(rootsState: WorkspaceRootsState | null): Map<string, NonNullable<WorkspaceRootsState['remoteProjects']>[number]> {
+  const remoteProjects = rootsState?.remoteProjects ?? []
+  return new Map(remoteProjects.map((project) => [project.id, project]))
+}
+
+export function getWorkspaceProjectOrderPaths(rootsState: WorkspaceRootsState | null): string[] {
+  if (!rootsState) return []
+  const savedRoots = new Set(rootsState.order)
+  const remoteProjectIds = new Set((rootsState.remoteProjects ?? []).map((project) => project.id))
+  const orderedRoots = rootsState.projectOrder.filter((item) => savedRoots.has(item) || remoteProjectIds.has(item))
+  for (const rootPath of rootsState.order) {
+    if (!orderedRoots.includes(rootPath)) orderedRoots.push(rootPath)
+  }
+  for (const remoteProjectId of remoteProjectIds) {
+    if (!orderedRoots.includes(remoteProjectId)) orderedRoots.push(remoteProjectId)
+  }
+  return orderedRoots
+}
+
+export function getWorkspaceProjectOrderNames(
+  rootsState: WorkspaceRootsState | null,
+  duplicateLeafNames: Set<string>,
+): string[] {
+  const remoteProjectsById = getRemoteProjectById(rootsState)
+  return getWorkspaceProjectOrderPaths(rootsState).map((rootPath) => {
+    if (remoteProjectsById.has(rootPath)) return rootPath
+    const normalizedRootPath = normalizePathForUi(rootPath).trim()
+    const leafName = toProjectNameFromWorkspaceRoot(normalizedRootPath)
+    return duplicateLeafNames.has(leafName) ? normalizedRootPath : leafName
+  })
+}
+
+export function matchesWorkspaceRootProject(rootPath: string, projectName: string): boolean {
+  const normalizedRootPath = normalizePathForUi(rootPath).trim()
+  return normalizedRootPath === projectName || toProjectNameFromWorkspaceRoot(rootPath) === projectName
+}
+
+export function collectWorkspaceRootPathsForProjectRemoval(
+  rootsState: WorkspaceRootsState,
+  projectName: string,
+): Set<string> {
+  const removedRootPaths = new Set<string>()
+  for (const rootPath of rootsState.order) {
+    if (matchesWorkspaceRootProject(rootPath, projectName)) {
+      removedRootPaths.add(rootPath)
+    }
+  }
+  for (const rootPath of rootsState.active) {
+    if (matchesWorkspaceRootProject(rootPath, projectName)) {
+      removedRootPaths.add(rootPath)
+    }
+  }
+  for (const rootPath of Object.keys(rootsState.labels)) {
+    if (matchesWorkspaceRootProject(rootPath, projectName)) {
+      removedRootPaths.add(rootPath)
+    }
+  }
+  return removedRootPaths
+}
+
+export function buildWorkspaceRootsProjectOrderState(
+  rootsState: WorkspaceRootsState,
+  orderedProjectNames: string[],
+  groups: UiProjectGroup[],
+): Pick<WorkspaceRootsState, 'order' | 'active' | 'projectOrder'> {
+  const remoteProjectIds = new Set((rootsState.remoteProjects ?? []).map((project) => project.id))
+  const rootByProjectName = new Map<string, string>()
+  for (const rootPath of rootsState.order) {
+    const projectName = toProjectNameFromWorkspaceRoot(rootPath)
+    if (!rootByProjectName.has(projectName)) {
+      rootByProjectName.set(projectName, rootPath)
+    }
+  }
+  for (const group of groups) {
+    const cwd = group.threads[0]?.cwd?.trim() ?? ''
+    if (!cwd) continue
+    rootByProjectName.set(group.projectName, cwd)
+  }
+
+  const nextProjectOrder: string[] = []
+  const pushProjectOrderItem = (item: string): void => {
+    if (item && !nextProjectOrder.includes(item)) {
+      nextProjectOrder.push(item)
+    }
+  }
+
+  for (const projectName of orderedProjectNames) {
+    if (remoteProjectIds.has(projectName)) {
+      pushProjectOrderItem(projectName)
+      continue
+    }
+    const rootPath = rootByProjectName.get(projectName)
+    if (rootPath) {
+      pushProjectOrderItem(rootPath)
+    }
+  }
+  for (const item of getWorkspaceProjectOrderPaths(rootsState)) {
+    pushProjectOrderItem(item)
+  }
+
+  const nextOrder = nextProjectOrder.filter((item) => rootsState.order.includes(item))
+  for (const rootPath of rootsState.order) {
+    if (!nextOrder.includes(rootPath)) {
+      nextOrder.push(rootPath)
+    }
+  }
+
+  const nextActive = rootsState.active.filter((rootPath) => nextOrder.includes(rootPath))
+  if (nextActive.length === 0 && nextOrder.length > 0) {
+    nextActive.push(nextOrder[0])
+  }
+
+  return {
+    order: nextOrder,
+    active: nextActive,
+    projectOrder: nextProjectOrder,
+  }
+}
+
+export function orderGroupsByWorkspaceProjectOrder(
+  groups: UiProjectGroup[],
+  rootsState: WorkspaceRootsState | null,
+  duplicateLeafNames: Set<string>,
+): UiProjectGroup[] {
+  const order = getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)
+  if (order.length === 0) return groups
+  const orderIndexByName = new Map(order.map((name, index) => [name, index]))
+  return [...groups].sort((first, second) => {
+    if (isProjectlessGroup(first) || isProjectlessGroup(second)) return 0
+    const firstIndex = orderIndexByName.get(first.projectName) ?? Number.POSITIVE_INFINITY
+    const secondIndex = orderIndexByName.get(second.projectName) ?? Number.POSITIVE_INFINITY
+    if (firstIndex === secondIndex) return 0
+    return firstIndex - secondIndex
+  })
+}
+
+export function collectDuplicateProjectLeafNames(groups: UiProjectGroup[], rootsState: WorkspaceRootsState | null): Set<string> {
+  const rootByLeafName = new Map<string, Set<string>>()
+  const canonicalWorkspaceRootCountsByLeafName = new Map<string, number>()
+  const addPath = (value: string): void => {
+    const normalizedPath = normalizePathForUi(value).trim()
+    if (!normalizedPath) return
+    const leafName = toProjectName(normalizedPath)
+    const existing = rootByLeafName.get(leafName) ?? new Set<string>()
+    existing.add(normalizedPath)
+    rootByLeafName.set(leafName, existing)
+  }
+
+  for (const rootPath of rootsState?.order ?? []) {
+    const normalizedRootPath = normalizePathForUi(rootPath).trim()
+    if (!normalizedRootPath) continue
+    const leafName = toProjectName(normalizedRootPath)
+    if (!isManagedCodexWorktreePath(normalizedRootPath)) {
+      canonicalWorkspaceRootCountsByLeafName.set(leafName, (canonicalWorkspaceRootCountsByLeafName.get(leafName) ?? 0) + 1)
+    }
+    addPath(rootPath)
+  }
+  for (const group of groups) {
+    for (const thread of group.threads) {
+      const normalizedCwd = normalizePathForUi(thread.cwd).trim()
+      const leafName = toProjectName(normalizedCwd)
+      const isRegisteredRoot = rootsState?.order.some((rootPath) => normalizePathForUi(rootPath).trim() === normalizedCwd) === true
+      if (isManagedCodexWorktreePath(normalizedCwd) && !isRegisteredRoot && canonicalWorkspaceRootCountsByLeafName.get(leafName) === 1) continue
+      addPath(thread.cwd)
+    }
+  }
+
+  const duplicateLeafNames = new Set<string>()
+  for (const [leafName, paths] of rootByLeafName.entries()) {
+    if (paths.size > 1) duplicateLeafNames.add(leafName)
+  }
+  return duplicateLeafNames
+}
+
+export function isManagedCodexWorktreePath(value: string): boolean {
+  return value.includes('/.codex/worktrees/')
+}
+
+export function disambiguateProjectGroupsByCwd(
+  groups: UiProjectGroup[],
+  rootsState: WorkspaceRootsState | null,
+): UiProjectGroup[] {
+  const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
+  if (duplicateLeafNames.size === 0) return groups
+
+  const uniqueCanonicalWorkspaceRootLeafNames = new Set<string>()
+  const duplicateCanonicalWorkspaceRootLeafNames = new Set<string>()
+  const canonicalWorkspaceRootByLeafName = new Map<string, string>()
+  const registeredWorkspaceRoots = new Set<string>()
+  for (const rootPath of rootsState?.order ?? []) {
+    const normalizedRootPath = normalizePathForUi(rootPath).trim()
+    if (!normalizedRootPath) continue
+    registeredWorkspaceRoots.add(normalizedRootPath)
+    if (isManagedCodexWorktreePath(normalizedRootPath)) continue
+    const leafName = toProjectName(normalizedRootPath)
+    if (uniqueCanonicalWorkspaceRootLeafNames.has(leafName)) {
+      uniqueCanonicalWorkspaceRootLeafNames.delete(leafName)
+      duplicateCanonicalWorkspaceRootLeafNames.add(leafName)
+      canonicalWorkspaceRootByLeafName.delete(leafName)
+    } else if (!duplicateCanonicalWorkspaceRootLeafNames.has(leafName)) {
+      uniqueCanonicalWorkspaceRootLeafNames.add(leafName)
+      canonicalWorkspaceRootByLeafName.set(leafName, normalizedRootPath)
+    }
+  }
+
+  const disambiguatedGroups: UiProjectGroup[] = []
+  const groupsByProjectName = new Map<string, UiProjectGroup>()
+  for (const group of groups) {
+    for (const thread of group.threads) {
+      const normalizedCwd = normalizePathForUi(thread.cwd).trim()
+      const leafName = toProjectName(normalizedCwd)
+      const isRegisteredRoot = registeredWorkspaceRoots.has(normalizedCwd)
+      const isCanonicalWorktreeThread = isManagedCodexWorktreePath(normalizedCwd)
+        && !isRegisteredRoot
+        && uniqueCanonicalWorkspaceRootLeafNames.has(leafName)
+      let projectName = group.projectName
+      if (isCanonicalWorktreeThread && duplicateLeafNames.has(leafName)) {
+        projectName = canonicalWorkspaceRootByLeafName.get(leafName) ?? group.projectName
+      } else if (normalizedCwd && duplicateLeafNames.has(leafName)) {
+        projectName = normalizedCwd
+      }
+      const nextThread = thread.projectName === projectName ? thread : { ...thread, projectName }
+      const existingGroup = groupsByProjectName.get(projectName)
+      if (existingGroup) {
+        existingGroup.threads.push(nextThread)
+      } else {
+        const nextGroup = { projectName, threads: [nextThread] }
+        groupsByProjectName.set(projectName, nextGroup)
+        disambiguatedGroups.push(nextGroup)
+      }
+    }
+  }
+
+  return disambiguatedGroups
+}
+
+export function addWorkspaceRootPlaceholderGroups(
+  groups: UiProjectGroup[],
+  rootsState: WorkspaceRootsState | null,
+  duplicateLeafNames: Set<string>,
+): UiProjectGroup[] {
+  if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groups
+  const existingProjectNames = new Set(groups.map((group) => group.projectName))
+  const nextGroups = [...groups]
+  const remoteProjectsById = getRemoteProjectById(rootsState)
+
+  for (const rootPath of getWorkspaceProjectOrderPaths(rootsState)) {
+    if (remoteProjectsById.has(rootPath)) {
+      if (existingProjectNames.has(rootPath)) continue
+      nextGroups.push({ projectName: rootPath, threads: [] })
+      existingProjectNames.add(rootPath)
+      continue
+    }
+    const normalizedRootPath = normalizePathForUi(rootPath).trim()
+    if (!normalizedRootPath) continue
+    const leafName = toProjectNameFromWorkspaceRoot(normalizedRootPath)
+    const projectName = duplicateLeafNames.has(leafName) ? normalizedRootPath : leafName
+    if (existingProjectNames.has(projectName)) continue
+    nextGroups.push({ projectName, threads: [] })
+    existingProjectNames.add(projectName)
+  }
+
+  return nextGroups
+}
+
+export function toOptimisticThreadTitle(message: string): string {
+  const firstLine = message
+    .split('\n')
+    .map((line) => line.trim())
+    .find((line) => line.length > 0)
+
+  if (!firstLine) return 'Untitled thread'
+  return firstLine.slice(0, 80)
+}
+
+export function toForkedThreadTitle(title: string): string {
+  const normalizedTitle = title.trim() || 'Untitled thread'
+  return /^fork:\s+/iu.test(normalizedTitle) ? normalizedTitle : `Fork: ${normalizedTitle}`
+}
+
+export function isProjectlessGroup(group: UiProjectGroup): boolean {
+  return group.threads.some((thread) => thread.cwd.trim().length === 0 || isProjectlessChatPath(thread.cwd))
+}
+
+export function filterGroupsByWorkspaceRoots(
+  groups: UiProjectGroup[],
+  rootsState: WorkspaceRootsState | null,
+): UiProjectGroup[] {
+  const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
+  const disambiguatedGroups = disambiguateProjectGroupsByCwd(groups, rootsState)
+  const groupsWithWorkspaceRoots = addWorkspaceRootPlaceholderGroups(disambiguatedGroups, rootsState, duplicateLeafNames)
+  if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groupsWithWorkspaceRoots
+  const allowedProjectNames = new Set<string>()
+  for (const projectName of getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)) {
+    allowedProjectNames.add(projectName)
+  }
+  const filteredGroups = groupsWithWorkspaceRoots.filter((group) => allowedProjectNames.has(group.projectName) || isProjectlessGroup(group))
+  return orderGroupsByWorkspaceProjectOrder(filteredGroups, rootsState, duplicateLeafNames)
+}
diff --git a/src/composables/useDesktopState.ts b/src/composables/useDesktopState.ts
index 0ac873d3d..4f8862c5e 100644
--- a/src/composables/useDesktopState.ts
+++ b/src/composables/useDesktopState.ts
@@ -1,5485 +1 @@
-import { computed, ref } from 'vue'
-import {
-
-  archiveThread,
-  forkThread,
-  getAvailableCollaborationModes,
-  getAccountRateLimits,
-  renameThread,
-  getAvailableModelIds,
-  getCurrentModelConfig,
-  getPendingServerRequests,
-  getSkillsList,
-  getThreadDetail,
-  getOlderThreadMessages,
-  getBackgroundThreadListLimit,
-  interruptThreadTurn,
-  pickCodexRateLimitSnapshot,
-  replyToServerRequest,
-  revertThreadFileChanges,
-  rollbackThread,
-  getThreadGroupsPage,
-  getThreadQueueState,
-  getWorkspaceRootsState,
-  setCodexSpeedMode,
-  setThreadQueueState,
-  setWorkspaceRootsState,
-  getThreadTitleCache,
-  persistThreadTitle,
-  generateThreadTitle,
-  resumeThread,
-
-  startThread,
-  subscribeCodexNotifications,
-  startThreadTurn,
-  type RpcNotification,
-  type SkillInfo,
-  type ThreadQueueState,
-  type WorkspaceRootsState,
-} from '../api/codexGateway'
-import { normalizeFileChangeStatus, toUiFileChanges } from '../api/normalizers/v2'
-import type {
-  CollaborationModeKind,
-  CollaborationModeOption,
-  CommandExecutionData,
-  UiPendingRequestState,
-  ReasoningEffort,
-  SpeedMode,
-  UiFileChange,
-  UiLiveOverlay,
-  UiMessage,
-  UiPlanData,
-  UiPlanStep,
-  UiProjectGroup,
-  UiRateLimitSnapshot,
-  UiServerRequest,
-  UiServerRequestReply,
-  UiThreadTokenUsage,
-  UiTokenUsageBreakdown,
-  UiThread,
-} from '../types/codex'
-import { getPathParent, isProjectlessChatPath, normalizePathForUi, toProjectName } from '../pathUtils.js'
-
-function flattenThreads(groups: UiProjectGroup[]): UiThread[] {
-  return groups.flatMap((group) => group.threads)
-}
-
-export function findAdjacentThreadId(threads: UiThread[], threadId: string): string {
-  const targetIndex = threads.findIndex((thread) => thread.id === threadId)
-  if (targetIndex < 0) return ''
-  return threads[targetIndex + 1]?.id ?? threads[targetIndex - 1]?.id ?? ''
-}
-
-const READ_STATE_STORAGE_KEY = 'codex-web-local.thread-read-state.v1'
-const UNREAD_CUTOFF_STORAGE_KEY = 'codex-web-local.thread-unread-cutoff.v1'
-const THREAD_TOKEN_USAGE_STORAGE_KEY = 'codex-web-local.thread-token-usage.v1'
-const THREAD_TERMINAL_OPEN_STORAGE_KEY = 'codex-web-local.thread-terminal-open.v1'
-const SELECTED_THREAD_STORAGE_KEY = 'codex-web-local.selected-thread-id.v1'
-const SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY = 'codex-web-local.selected-model-by-context.v1'
-const LEGACY_SELECTED_MODEL_STORAGE_KEY = 'codex-web-local.selected-model-id.v1'
-const PROJECT_ORDER_STORAGE_KEY = 'codex-web-local.project-order.v1'
-const PROJECT_DISPLAY_NAME_STORAGE_KEY = 'codex-web-local.project-display-name.v1'
-const COLLABORATION_MODE_STORAGE_KEY = 'codex-web-local.collaboration-mode-by-context.v1'
-const LEGACY_COLLABORATION_MODE_STORAGE_KEY = 'codex-web-local.collaboration-mode.v1'
-const NEW_THREAD_COLLABORATION_MODE_CONTEXT = '__new-thread__'
-const NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX = '__new-thread-provider__::'
-const EVENT_SYNC_DEBOUNCE_MS = 220
-const BACKGROUND_THREAD_PAGINATION_DELAY_MS = 10_000
-const RATE_LIMIT_REFRESH_DEBOUNCE_MS = 500
-const TURN_START_FOLLOW_UP_SYNC_DELAY_MS = 3000
-const RECENT_THREAD_MESSAGE_LOAD_REUSE_MS = 2000
-const REASONING_EFFORT_OPTIONS: ReasoningEffort[] = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh']
-const GLOBAL_SERVER_REQUEST_SCOPE = '__global__'
-const MODEL_FALLBACK_ID = 'gpt-5.4-mini'
-
-function loadReadStateMap(): Record<string, string> {
-  if (typeof window === 'undefined') return {}
-
-  try {
-    const raw = window.localStorage.getItem(READ_STATE_STORAGE_KEY)
-    if (!raw) return {}
-
-    const parsed = JSON.parse(raw) as unknown
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
-    return parsed as Record<string, string>
-  } catch {
-    return {}
-  }
-}
-
-function saveReadStateMap(state: Record<string, string>): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(READ_STATE_STORAGE_KEY, JSON.stringify(state))
-}
-
-function loadUnreadCutoffIso(): string {
-  if (typeof window === 'undefined') return ''
-
-  const existing = window.localStorage.getItem(UNREAD_CUTOFF_STORAGE_KEY)
-  if (existing) return existing
-
-  const initialCutoff = new Date().toISOString()
-  window.localStorage.setItem(UNREAD_CUTOFF_STORAGE_KEY, initialCutoff)
-  return initialCutoff
-}
-
-function saveUnreadCutoffIso(cutoffIso: string): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(UNREAD_CUTOFF_STORAGE_KEY, cutoffIso)
-}
-
-function isThreadUpdatedAfterCutoff(updatedAtIso: string, cutoffIso: string): boolean {
-  if (!updatedAtIso || !cutoffIso) return false
-  const updatedAtMs = new Date(updatedAtIso).getTime()
-  const cutoffMs = new Date(cutoffIso).getTime()
-  if (!Number.isFinite(updatedAtMs) || !Number.isFinite(cutoffMs)) return false
-  return updatedAtMs > cutoffMs
-}
-
-export function isThreadUnreadByLastRead(
-  updatedAtIso: string,
-  threadReadStateIso: string | undefined,
-  unreadCutoffIso: string,
-): boolean {
-  const effectiveLastReadIso = threadReadStateIso ?? unreadCutoffIso
-  return isThreadUpdatedAfterCutoff(updatedAtIso, effectiveLastReadIso)
-}
-
-function normalizeCollaborationMode(value: unknown): CollaborationModeKind {
-  return value === 'plan' ? 'plan' : 'default'
-}
-
-function normalizeStoredModelId(value: unknown): string {
-  return typeof value === 'string' ? value.trim() : ''
-}
-
-function createStringKeyedRecord<T>(): Record<string, T> {
-  return Object.create(null) as Record<string, T>
-}
-
-function cloneStringKeyedRecord<T>(record: Record<string, T>): Record<string, T> {
-  const next = createStringKeyedRecord<T>()
-  for (const [key, value] of Object.entries(record)) {
-    next[key] = value
-  }
-  return next
-}
-
-function omitStringKeyedRecordKey<T>(record: Record<string, T>, key: string): Record<string, T> {
-  if (!(key in record)) return record
-  const next = createStringKeyedRecord<T>()
-  for (const [entryKey, value] of Object.entries(record)) {
-    if (entryKey !== key) {
-      next[entryKey] = value
-    }
-  }
-  return next
-}
-
-function pruneThreadContextStateMap<T>(
-  stateMap: Record<string, T>,
-  threadIds: Set<string>,
-): Record<string, T> {
-  let changed = false
-  const next = createStringKeyedRecord<T>()
-  for (const [contextId, value] of Object.entries(stateMap)) {
-    if (
-      contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT
-      || contextId.startsWith(NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX)
-      || threadIds.has(contextId)
-    ) {
-      next[contextId] = value
-      continue
-    }
-    changed = true
-  }
-  return changed ? next : stateMap
-}
-
-function normalizeProviderContextId(providerId: string): string {
-  const normalized = providerId.trim().toLowerCase()
-  return normalized || 'codex'
-}
-
-function isNewThreadContextId(contextId: string): boolean {
-  return contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT
-}
-
-function toProviderModelContextId(providerId: string): string {
-  const normalizedProviderId = normalizeProviderContextId(providerId)
-  if (!normalizedProviderId) return ''
-  return `${NEW_THREAD_PROVIDER_MODEL_CONTEXT_PREFIX}${normalizedProviderId}`
-}
-
-function toThreadContextId(threadId: string): string {
-  const normalizedThreadId = threadId.trim()
-  return normalizedThreadId || NEW_THREAD_COLLABORATION_MODE_CONTEXT
-}
-
-function loadSelectedModelMap(): Record<string, string> {
-  if (typeof window === 'undefined') return createStringKeyedRecord<string>()
-
-  try {
-    const raw = window.localStorage.getItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY)
-    if (raw) {
-      const parsed = JSON.parse(raw) as unknown
-      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return createStringKeyedRecord<string>()
-
-      const next = createStringKeyedRecord<string>()
-      for (const [contextId, value] of Object.entries(parsed as Record<string, unknown>)) {
-        if (typeof contextId !== 'string' || contextId.length === 0) continue
-        const normalizedModelId = normalizeStoredModelId(value)
-        if (normalizedModelId) {
-          next[contextId] = normalizedModelId
-        }
-      }
-      return next
-    }
-  } catch {
-    // Fall back to the legacy global preference below.
-  }
-
-  const legacyModelId = normalizeStoredModelId(window.localStorage.getItem(LEGACY_SELECTED_MODEL_STORAGE_KEY))
-  const next = createStringKeyedRecord<string>()
-  if (legacyModelId) {
-    next[NEW_THREAD_COLLABORATION_MODE_CONTEXT] = legacyModelId
-  }
-  return next
-}
-
-function readSelectedModel(
-  state: Record<string, string>,
-  threadId: string,
-): string {
-  const contextId = toThreadContextId(threadId)
-  const contextModelId = normalizeStoredModelId(state[contextId])
-  if (contextModelId) return contextModelId
-  return normalizeStoredModelId(state[NEW_THREAD_COLLABORATION_MODE_CONTEXT])
-}
-
-function saveSelectedModelMap(state: Record<string, string>): void {
-  if (typeof window === 'undefined') return
-  try {
-    if (Object.keys(state).length === 0) {
-      window.localStorage.removeItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY)
-    } else {
-      window.localStorage.setItem(SELECTED_MODEL_BY_CONTEXT_STORAGE_KEY, JSON.stringify(state))
-    }
-    window.localStorage.removeItem(LEGACY_SELECTED_MODEL_STORAGE_KEY)
-  } catch {
-    // Keep in-memory selection working even if localStorage writes fail.
-  }
-}
-
-function loadSelectedCollaborationModeMap(): Record<string, CollaborationModeKind> {
-  if (typeof window === 'undefined') return createStringKeyedRecord<CollaborationModeKind>()
-
-  try {
-    const raw = window.localStorage.getItem(COLLABORATION_MODE_STORAGE_KEY)
-    if (raw) {
-      const parsed = JSON.parse(raw) as unknown
-      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-        return createStringKeyedRecord<CollaborationModeKind>()
-      }
-
-      const next = createStringKeyedRecord<CollaborationModeKind>()
-      for (const [contextId, value] of Object.entries(parsed as Record<string, unknown>)) {
-        if (typeof contextId !== 'string' || contextId.length === 0) continue
-        const normalizedMode = normalizeCollaborationMode(value)
-        if (normalizedMode === 'plan') {
-          next[contextId] = normalizedMode
-        }
-      }
-      return next
-    }
-  } catch {
-    // Fall back to the legacy global preference below.
-  }
-
-  return createStringKeyedRecord<CollaborationModeKind>()
-}
-
-function readSelectedCollaborationMode(
-  state: Record<string, CollaborationModeKind>,
-  threadId: string,
-): CollaborationModeKind {
-  const contextId = toThreadContextId(threadId)
-  return normalizeCollaborationMode(state[contextId])
-}
-
-function writeSelectedCollaborationModeForContext(
-  state: Record<string, CollaborationModeKind>,
-  threadId: string,
-  mode: CollaborationModeKind,
-): Record<string, CollaborationModeKind> {
-  const contextId = toThreadContextId(threadId)
-  if (isNewThreadContextId(contextId)) {
-    return omitStringKeyedRecordKey(state, contextId)
-  }
-  if (mode === 'plan') {
-    const next = cloneStringKeyedRecord(state)
-    next[contextId] = 'plan'
-    return next
-  }
-  return omitStringKeyedRecordKey(state, contextId)
-}
-
-function saveSelectedCollaborationModeMap(state: Record<string, CollaborationModeKind>): void {
-  if (typeof window === 'undefined') return
-  try {
-    if (Object.keys(state).length === 0) {
-      window.localStorage.removeItem(COLLABORATION_MODE_STORAGE_KEY)
-    } else {
-      window.localStorage.setItem(COLLABORATION_MODE_STORAGE_KEY, JSON.stringify(state))
-    }
-    window.localStorage.removeItem(LEGACY_COLLABORATION_MODE_STORAGE_KEY)
-  } catch {
-    // Keep in-memory mode selection working even if localStorage writes fail.
-  }
-}
-
-function clamp(value: number, minValue: number, maxValue: number): number {
-  return Math.min(Math.max(value, minValue), maxValue)
-}
-
-function normalizeStoredTokenCount(value: unknown): number | null {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return Math.max(0, Math.trunc(value))
-  }
-
-  if (typeof value === 'string' && value.trim().length > 0) {
-    const parsed = Number(value)
-    if (Number.isFinite(parsed)) {
-      return Math.max(0, Math.trunc(parsed))
-    }
-  }
-
-  return null
-}
-
-function normalizeTokenUsageBreakdown(value: unknown): UiThreadTokenUsage['last'] | null {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
-
-  const record = value as Record<string, unknown>
-  return {
-    totalTokens: normalizeStoredTokenCount(record.totalTokens) ?? 0,
-    inputTokens: normalizeStoredTokenCount(record.inputTokens) ?? 0,
-    cachedInputTokens: normalizeStoredTokenCount(record.cachedInputTokens) ?? 0,
-    outputTokens: normalizeStoredTokenCount(record.outputTokens) ?? 0,
-    reasoningOutputTokens: normalizeStoredTokenCount(record.reasoningOutputTokens) ?? 0,
-  }
-}
-
-function normalizeThreadTokenUsage(value: unknown): UiThreadTokenUsage | null {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
-
-  const record = value as Record<string, unknown>
-  const total = normalizeTokenUsageBreakdown(record.total)
-  const last = normalizeTokenUsageBreakdown(record.last)
-  if (!total || !last) return null
-
-  const modelContextWindow = normalizeStoredTokenCount(record.modelContextWindow)
-  const currentContextTokens = last.totalTokens
-  const remainingContextTokens = typeof modelContextWindow === 'number'
-    ? Math.max(modelContextWindow - currentContextTokens, 0)
-    : null
-  const remainingContextPercent = typeof modelContextWindow === 'number' && modelContextWindow > 0
-    ? clamp(Math.round((remainingContextTokens ?? 0) / modelContextWindow * 100), 0, 100)
-    : null
-
-  return {
-    total,
-    last,
-    modelContextWindow,
-    currentContextTokens,
-    remainingContextTokens,
-    remainingContextPercent,
-  }
-}
-
-function loadThreadTokenUsageMap(): Record<string, UiThreadTokenUsage> {
-  if (typeof window === 'undefined') return {}
-
-  try {
-    const raw = window.localStorage.getItem(THREAD_TOKEN_USAGE_STORAGE_KEY)
-    if (!raw) return {}
-
-    const parsed = JSON.parse(raw) as unknown
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
-
-    const normalizedMap: Record<string, UiThreadTokenUsage> = {}
-    for (const [threadId, usage] of Object.entries(parsed as Record<string, unknown>)) {
-      if (!threadId) continue
-      const normalizedUsage = normalizeThreadTokenUsage(usage)
-      if (normalizedUsage) {
-        normalizedMap[threadId] = normalizedUsage
-      }
-    }
-    return normalizedMap
-  } catch {
-    return {}
-  }
-}
-
-function saveThreadTokenUsageMap(state: Record<string, UiThreadTokenUsage>): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(THREAD_TOKEN_USAGE_STORAGE_KEY, JSON.stringify(state))
-}
-
-function loadThreadTerminalOpenMap(): Record<string, boolean> {
-  if (typeof window === 'undefined') return {}
-
-  try {
-    const raw = window.localStorage.getItem(THREAD_TERMINAL_OPEN_STORAGE_KEY)
-    if (!raw) return {}
-
-    const parsed = JSON.parse(raw) as unknown
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
-
-    const normalizedMap: Record<string, boolean> = {}
-    for (const [threadId, isOpen] of Object.entries(parsed as Record<string, unknown>)) {
-      if (threadId && typeof isOpen === 'boolean') {
-        normalizedMap[threadId] = isOpen
-      }
-    }
-    return normalizedMap
-  } catch {
-    return {}
-  }
-}
-
-function saveThreadTerminalOpenMap(state: Record<string, boolean>): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(THREAD_TERMINAL_OPEN_STORAGE_KEY, JSON.stringify(state))
-}
-
-function loadSelectedThreadId(): string {
-  if (typeof window === 'undefined') return ''
-  const raw = window.localStorage.getItem(SELECTED_THREAD_STORAGE_KEY)
-  return raw ?? ''
-}
-
-function saveSelectedThreadId(threadId: string): void {
-  if (typeof window === 'undefined') return
-  if (!threadId) {
-    window.localStorage.removeItem(SELECTED_THREAD_STORAGE_KEY)
-    return
-  }
-  window.localStorage.setItem(SELECTED_THREAD_STORAGE_KEY, threadId)
-}
-
-function loadProjectOrder(): string[] {
-  if (typeof window === 'undefined') return []
-
-  try {
-    const raw = window.localStorage.getItem(PROJECT_ORDER_STORAGE_KEY)
-    if (!raw) return []
-
-    const parsed = JSON.parse(raw) as unknown
-    if (!Array.isArray(parsed)) return []
-    const order: string[] = []
-    for (const item of parsed) {
-      if (typeof item !== 'string' || item.length === 0) continue
-      const normalizedItem = toProjectName(item)
-      if (normalizedItem.length > 0 && !order.includes(normalizedItem)) {
-        order.push(normalizedItem)
-      }
-    }
-    return order
-  } catch {
-    return []
-  }
-}
-
-function saveProjectOrder(order: string[]): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(PROJECT_ORDER_STORAGE_KEY, JSON.stringify(order))
-}
-
-function loadProjectDisplayNames(): Record<string, string> {
-  if (typeof window === 'undefined') return {}
-
-  try {
-    const raw = window.localStorage.getItem(PROJECT_DISPLAY_NAME_STORAGE_KEY)
-    if (!raw) return {}
-
-    const parsed = JSON.parse(raw) as unknown
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
-
-    const displayNames: Record<string, string> = {}
-    for (const [projectName, displayName] of Object.entries(parsed as Record<string, unknown>)) {
-      const normalizedProjectName = typeof projectName === 'string' ? toProjectName(projectName) : ''
-      if (normalizedProjectName.length > 0 && typeof displayName === 'string') {
-        displayNames[normalizedProjectName] = displayName
-      }
-    }
-    return displayNames
-  } catch {
-    return {}
-  }
-}
-
-function saveProjectDisplayNames(displayNames: Record<string, string>): void {
-  if (typeof window === 'undefined') return
-  window.localStorage.setItem(PROJECT_DISPLAY_NAME_STORAGE_KEY, JSON.stringify(displayNames))
-}
-
-function mergeProjectOrder(previousOrder: string[], incomingGroups: UiProjectGroup[]): string[] {
-  const nextOrder: string[] = []
-
-  for (const projectName of previousOrder) {
-    if (!nextOrder.includes(projectName)) {
-      nextOrder.push(projectName)
-    }
-  }
-
-  for (const group of incomingGroups) {
-    if (!nextOrder.includes(group.projectName)) {
-      nextOrder.push(group.projectName)
-    }
-  }
-
-  return areStringArraysEqual(previousOrder, nextOrder) ? previousOrder : nextOrder
-}
-
-function orderGroupsByProjectOrder(incoming: UiProjectGroup[], projectOrder: string[]): UiProjectGroup[] {
-  const incomingByName = new Map(incoming.map((group) => [group.projectName, group]))
-  const ordered: UiProjectGroup[] = projectOrder
-    .map((projectName) => incomingByName.get(projectName) ?? null)
-    .filter((group): group is UiProjectGroup => group !== null)
-
-  for (const group of incoming) {
-    if (!projectOrder.includes(group.projectName)) {
-      ordered.push(group)
-    }
-  }
-
-  return ordered
-}
-
-function areStringArraysEqual(first?: string[], second?: string[]): boolean {
-  const left = Array.isArray(first) ? first : []
-  const right = Array.isArray(second) ? second : []
-  if (left.length !== right.length) return false
-  for (let index = 0; index < left.length; index += 1) {
-    if (left[index] !== right[index]) return false
-  }
-  return true
-}
-
-function reorderStringArray(items: string[], fromIndex: number, toIndex: number): string[] {
-  if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex >= items.length) {
-    return items
-  }
-
-  if (fromIndex === toIndex) {
-    return items
-  }
-
-  const next = [...items]
-  const [moved] = next.splice(fromIndex, 1)
-  next.splice(toIndex, 0, moved)
-  return next
-}
-
-function areCommandExecutionsEqual(first?: CommandExecutionData, second?: CommandExecutionData): boolean {
-  if (!first && !second) return true
-  if (!first || !second) return false
-  return first.status === second.status && first.aggregatedOutput === second.aggregatedOutput && first.exitCode === second.exitCode
-}
-
-function arePlanStepsEqual(first: UiPlanStep[] = [], second: UiPlanStep[] = []): boolean {
-  if (first.length !== second.length) return false
-  for (let index = 0; index < first.length; index += 1) {
-    if (first[index]?.step !== second[index]?.step || first[index]?.status !== second[index]?.status) {
-      return false
-    }
-  }
-  return true
-}
-
-function arePlanDataEqual(first?: UiPlanData, second?: UiPlanData): boolean {
-  if (!first && !second) return true
-  if (!first || !second) return false
-  return (
-    first.explanation === second.explanation &&
-    first.isStreaming === second.isStreaming &&
-    arePlanStepsEqual(first.steps, second.steps)
-  )
-}
-
-function isUnsupportedChatGptModelError(error: unknown): boolean {
-  if (!(error instanceof Error)) return false
-  const message = error.message.toLowerCase()
-  return (
-    message.includes('not supported when using codex with a chatgpt account') ||
-    message.includes('model is not supported') ||
-    message.includes('requires a newer version of codex')
-  )
-}
-
-function areMessageFieldsEqual(first: UiMessage, second: UiMessage): boolean {
-  return (
-    first.id === second.id &&
-    first.role === second.role &&
-    first.text === second.text &&
-    areStringArraysEqual(first.images, second.images) &&
-    areUiFileChangesEqual(first.fileChanges, second.fileChanges) &&
-    first.fileChangeStatus === second.fileChangeStatus &&
-    first.messageType === second.messageType &&
-    first.rawPayload === second.rawPayload &&
-    first.isUnhandled === second.isUnhandled &&
-    areCommandExecutionsEqual(first.commandExecution, second.commandExecution) &&
-    arePlanDataEqual(first.plan, second.plan) &&
-    first.turnId === second.turnId &&
-    first.turnIndex === second.turnIndex &&
-    first.isAutomationRun === second.isAutomationRun &&
-    first.automationDisplayName === second.automationDisplayName
-  )
-}
-
-function areMessageArraysEqual(first: UiMessage[], second: UiMessage[]): boolean {
-  if (first.length !== second.length) return false
-  for (let index = 0; index < first.length; index += 1) {
-    if (first[index] !== second[index]) return false
-  }
-  return true
-}
-
-function mergeMessages(
-  previous: UiMessage[],
-  incoming: UiMessage[],
-  options: { preserveMissing?: boolean } = {},
-): UiMessage[] {
-  const previousById = new Map(previous.map((message) => [message.id, message]))
-  const incomingById = new Map(incoming.map((message) => [message.id, message]))
-
-  const mergedIncoming = incoming.map((incomingMessage) => {
-    const previousMessage = previousById.get(incomingMessage.id)
-    if (previousMessage && areMessageFieldsEqual(previousMessage, incomingMessage)) {
-      return previousMessage
-    }
-    return incomingMessage
-  })
-
-  if (options.preserveMissing !== true) {
-    return areMessageArraysEqual(previous, mergedIncoming) ? previous : mergedIncoming
-  }
-
-  const mergedFromPrevious = previous.map((previousMessage) => {
-    const nextMessage = incomingById.get(previousMessage.id)
-    if (!nextMessage) {
-      return previousMessage
-    }
-    if (areMessageFieldsEqual(previousMessage, nextMessage)) {
-      return previousMessage
-    }
-    return nextMessage
-  })
-
-  const previousIdSet = new Set(previous.map((message) => message.id))
-  const appended = mergedIncoming.filter((message) => !previousIdSet.has(message.id))
-  const merged = [...mergedFromPrevious, ...appended]
-
-  return areMessageArraysEqual(previous, merged) ? previous : merged
-}
-
-function areUiFileChangesEqual(first?: UiFileChange[], second?: UiFileChange[]): boolean {
-  if (!first && !second) return true
-  if (!first || !second) return false
-  if (first.length !== second.length) return false
-  for (let index = 0; index < first.length; index += 1) {
-    const firstChange = first[index]
-    const secondChange = second[index]
-    if (
-      firstChange.path !== secondChange.path ||
-      firstChange.operation !== secondChange.operation ||
-      firstChange.movedToPath !== secondChange.movedToPath ||
-      firstChange.diff !== secondChange.diff ||
-      firstChange.addedLineCount !== secondChange.addedLineCount ||
-      firstChange.removedLineCount !== secondChange.removedLineCount
-    ) {
-      return false
-    }
-  }
-  return true
-}
-
-function normalizeMessageText(value: string): string {
-  return value.replace(/\s+/gu, ' ').trim()
-}
-
-function removeRedundantLiveAgentMessages(previous: UiMessage[], incoming: UiMessage[]): UiMessage[] {
-  const incomingMessageIds = new Set(incoming.map((message) => message.id))
-  const incomingAssistantTexts = new Set(
-    incoming
-      .filter((message) => message.role === 'assistant')
-      .map((message) => normalizeMessageText(message.text))
-      .filter((text) => text.length > 0),
-  )
-
-  if (incomingAssistantTexts.size === 0) {
-    return previous
-  }
-
-  const next = previous.filter((message) => {
-    if (message.messageType !== 'agentMessage.live') return true
-    if (incomingMessageIds.has(message.id)) return false
-    const normalized = normalizeMessageText(message.text)
-    if (normalized.length === 0) return false
-    return !incomingAssistantTexts.has(normalized)
-  })
-
-  return next.length === previous.length ? previous : next
-}
-
-function removePersistedLiveMessages(previous: UiMessage[], incoming: UiMessage[]): UiMessage[] {
-  const incomingIds = new Set(incoming.map((message) => message.id))
-  const next = previous.filter((message) => !incomingIds.has(message.id))
-  return next.length === previous.length ? previous : next
-}
-
-function upsertMessage(previous: UiMessage[], nextMessage: UiMessage): UiMessage[] {
-  const existingIndex = previous.findIndex((message) => message.id === nextMessage.id)
-  if (existingIndex < 0) {
-    return [...previous, nextMessage]
-  }
-
-  const existing = previous[existingIndex]
-  if (areMessageFieldsEqual(existing, nextMessage)) {
-    return previous
-  }
-
-  const next = [...previous]
-  next.splice(existingIndex, 1, nextMessage)
-  return next
-}
-
-type TurnSummaryState = {
-  turnId: string
-  durationMs: number
-}
-
-type TurnActivityState = {
-  label: string
-  details: string[]
-}
-
-type TurnErrorState = {
-  message: string
-  transient: boolean
-}
-
-type TurnStartedInfo = {
-  threadId: string
-  turnId: string
-  startedAtMs: number
-}
-
-type TurnCompletedInfo = {
-  threadId: string
-  turnId: string
-  completedAtMs: number
-  startedAtMs?: number
-}
-
-const WORKED_MESSAGE_TYPE = 'worked'
-
-function parseIsoTimestamp(value: string): number | null {
-  if (!value) return null
-  const ms = new Date(value).getTime()
-  return Number.isNaN(ms) ? null : ms
-}
-
-function formatTurnDuration(durationMs: number): string {
-  if (!Number.isFinite(durationMs) || durationMs <= 0) {
-    return '<1s'
-  }
-
-  const totalSeconds = Math.max(1, Math.round(durationMs / 1000))
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-  const parts: string[] = []
-
-  if (hours > 0) {
-    parts.push(`${hours}h`)
-  }
-
-  if (minutes > 0 || hours > 0) {
-    parts.push(`${minutes}m`)
-  }
-
-  const displaySeconds = seconds > 0 || parts.length === 0 ? seconds : 0
-  parts.push(`${displaySeconds}s`)
-  return parts.join(' ')
-}
-
-function areTurnSummariesEqual(first?: TurnSummaryState, second?: TurnSummaryState): boolean {
-  if (!first && !second) return true
-  if (!first || !second) return false
-  return first.turnId === second.turnId && first.durationMs === second.durationMs
-}
-
-function areTurnActivitiesEqual(first?: TurnActivityState, second?: TurnActivityState): boolean {
-  if (!first && !second) return true
-  if (!first || !second) return false
-  if (first.label !== second.label) return false
-  if (first.details.length !== second.details.length) return false
-  for (let index = 0; index < first.details.length; index += 1) {
-    if (first.details[index] !== second.details[index]) return false
-  }
-  return true
-}
-
-function buildTurnSummaryMessage(summary: TurnSummaryState): UiMessage {
-  return {
-    id: `turn-summary:${summary.turnId}`,
-    role: 'system',
-    text: `Worked for ${formatTurnDuration(summary.durationMs)}`,
-    messageType: WORKED_MESSAGE_TYPE,
-    turnId: summary.turnId,
-  }
-}
-
-function findLastAssistantMessageIndex(messages: UiMessage[]): number {
-  for (let index = messages.length - 1; index >= 0; index -= 1) {
-    if (messages[index].role === 'assistant') {
-      return index
-    }
-  }
-  return -1
-}
-
-function insertTurnSummaryMessage(messages: UiMessage[], summary: TurnSummaryState): UiMessage[] {
-  const summaryMessage = buildTurnSummaryMessage(summary)
-  const sanitizedMessages = messages.filter((message) => message.messageType !== WORKED_MESSAGE_TYPE)
-  const insertIndex = findLastAssistantMessageIndex(sanitizedMessages)
-  if (insertIndex < 0) {
-    return [...sanitizedMessages, summaryMessage]
-  }
-  const next = [...sanitizedMessages]
-  next.splice(insertIndex, 0, summaryMessage)
-  return next
-}
-
-function omitKey<TValue>(record: Record<string, TValue>, key: string): Record<string, TValue> {
-  if (!(key in record)) return record
-  const next = { ...record }
-  delete next[key]
-  return next
-}
-
-function omitKeys<TValue>(record: Record<string, TValue>, keys: Set<string>): Record<string, TValue> {
-  if (keys.size === 0) return record
-  let changed = false
-  const next: Record<string, TValue> = {}
-  for (const [key, value] of Object.entries(record)) {
-    if (keys.has(key)) {
-      changed = true
-      continue
-    }
-    next[key] = value
-  }
-  return changed ? next : record
-}
-
-function areThreadFieldsEqual(first: UiThread, second: UiThread): boolean {
-  return (
-    first.id === second.id &&
-    first.title === second.title &&
-    first.projectName === second.projectName &&
-    first.cwd === second.cwd &&
-    first.createdAtIso === second.createdAtIso &&
-    first.updatedAtIso === second.updatedAtIso &&
-    first.preview === second.preview &&
-    first.unread === second.unread &&
-    first.inProgress === second.inProgress &&
-    first.pendingRequestState === second.pendingRequestState
-  )
-}
-
-function areThreadArraysEqual(first: UiThread[], second: UiThread[]): boolean {
-  if (first.length !== second.length) return false
-  for (let index = 0; index < first.length; index += 1) {
-    if (first[index] !== second[index]) return false
-  }
-  return true
-}
-
-function areGroupArraysEqual(first: UiProjectGroup[], second: UiProjectGroup[]): boolean {
-  if (first.length !== second.length) return false
-  for (let index = 0; index < first.length; index += 1) {
-    if (first[index] !== second[index]) return false
-  }
-  return true
-}
-
-function pruneThreadStateMap<T>(stateMap: Record<string, T>, threadIds: Set<string>): Record<string, T> {
-  const nextEntries = Object.entries(stateMap).filter(([threadId]) => threadIds.has(threadId))
-  if (nextEntries.length === Object.keys(stateMap).length) {
-    return stateMap
-  }
-  return Object.fromEntries(nextEntries) as Record<string, T>
-}
-
-export function removeThreadFromGroups(groups: UiProjectGroup[], threadId: string): UiProjectGroup[] {
-  const normalizedThreadId = threadId.trim()
-  if (!normalizedThreadId) return groups
-
-  let changed = false
-  const nextGroups: UiProjectGroup[] = []
-
-  for (const group of groups) {
-    const nextThreads = group.threads.filter((thread) => thread.id !== normalizedThreadId)
-    const removedFromGroup = nextThreads.length !== group.threads.length
-    if (removedFromGroup) {
-      changed = true
-    }
-    if (nextThreads.length > 0) {
-      nextGroups.push(removedFromGroup ? { ...group, threads: nextThreads } : group)
-    } else if (group.threads.length === 0) {
-      nextGroups.push(group)
-    }
-  }
-
-  return changed ? nextGroups : groups
-}
-
-function mergeThreadGroups(
-  previous: UiProjectGroup[],
-  incoming: UiProjectGroup[],
-): UiProjectGroup[] {
-  const previousGroupsByName = new Map(previous.map((group) => [group.projectName, group]))
-  const mergedGroups: UiProjectGroup[] = incoming.map((incomingGroup) => {
-    const previousGroup = previousGroupsByName.get(incomingGroup.projectName)
-    const previousThreadsById = new Map(previousGroup?.threads.map((thread) => [thread.id, thread]) ?? [])
-
-    const mergedThreads = incomingGroup.threads.map((incomingThread) => {
-      const previousThread = previousThreadsById.get(incomingThread.id)
-      if (previousThread && areThreadFieldsEqual(previousThread, incomingThread)) {
-        return previousThread
-      }
-      return incomingThread
-    })
-
-    if (
-      previousGroup &&
-      previousGroup.projectName === incomingGroup.projectName &&
-      areThreadArraysEqual(previousGroup.threads, mergedThreads)
-    ) {
-      return previousGroup
-    }
-
-    return {
-      projectName: incomingGroup.projectName,
-      threads: mergedThreads,
-    }
-  })
-
-  return areGroupArraysEqual(previous, mergedGroups) ? previous : mergedGroups
-}
-
-function mergeIncomingWithLocalInProgressThreads(
-  previous: UiProjectGroup[],
-  incoming: UiProjectGroup[],
-  inProgressById: Record<string, boolean>,
-): UiProjectGroup[] {
-  const incomingThreadIds = new Set(flattenThreads(incoming).map((thread) => thread.id))
-  const localInProgressThreads = flattenThreads(previous).filter(
-    (thread) => inProgressById[thread.id] === true && !incomingThreadIds.has(thread.id),
-  )
-
-  if (localInProgressThreads.length === 0) {
-    return incoming
-  }
-
-  const incomingByProjectName = new Map(incoming.map((group) => [group.projectName, group]))
-  const merged: UiProjectGroup[] = incoming.map((group) => ({
-    projectName: group.projectName,
-    threads: [...group.threads],
-  }))
-
-  for (const thread of localInProgressThreads) {
-    const existingGroup = incomingByProjectName.get(thread.projectName)
-    if (existingGroup) {
-      const mergedGroupIndex = merged.findIndex((group) => group.projectName === thread.projectName)
-      if (mergedGroupIndex >= 0) {
-        merged[mergedGroupIndex] = {
-          projectName: merged[mergedGroupIndex].projectName,
-          threads: [thread, ...merged[mergedGroupIndex].threads],
-        }
-      }
-      continue
-    }
-
-    merged.push({
-      projectName: thread.projectName,
-      threads: [thread],
-    })
-  }
-
-  return merged
-}
-
-function toProjectNameFromWorkspaceRoot(value: string): string {
-  return toProjectName(value)
-}
-
-function getRemoteProjectHostLabel(hostId: string): string {
-  const normalized = hostId.trim()
-  if (!normalized) return ''
-  const separatorIndex = normalized.lastIndexOf(':')
-  return separatorIndex >= 0 ? normalized.slice(separatorIndex + 1) : normalized
-}
-
-function getRemoteProjectDisplayName(remoteProject: NonNullable<WorkspaceRootsState['remoteProjects']>[number]): string {
-  const label = remoteProject.label || toProjectName(remoteProject.remotePath) || remoteProject.id
-  const hostLabel = getRemoteProjectHostLabel(remoteProject.hostId)
-  return hostLabel ? `${label} ${hostLabel}` : label
-}
-
-function getRemoteProjectById(rootsState: WorkspaceRootsState | null): Map<string, NonNullable<WorkspaceRootsState['remoteProjects']>[number]> {
-  const remoteProjects = rootsState?.remoteProjects ?? []
-  return new Map(remoteProjects.map((project) => [project.id, project]))
-}
-
-function getWorkspaceProjectOrderPaths(rootsState: WorkspaceRootsState | null): string[] {
-  if (!rootsState) return []
-  const savedRoots = new Set(rootsState.order)
-  const remoteProjectIds = new Set((rootsState.remoteProjects ?? []).map((project) => project.id))
-  const orderedRoots = rootsState.projectOrder.filter((item) => savedRoots.has(item) || remoteProjectIds.has(item))
-  for (const rootPath of rootsState.order) {
-    if (!orderedRoots.includes(rootPath)) orderedRoots.push(rootPath)
-  }
-  for (const remoteProjectId of remoteProjectIds) {
-    if (!orderedRoots.includes(remoteProjectId)) orderedRoots.push(remoteProjectId)
-  }
-  return orderedRoots
-}
-
-function getWorkspaceProjectOrderNames(
-  rootsState: WorkspaceRootsState | null,
-  duplicateLeafNames: Set<string>,
-): string[] {
-  const remoteProjectsById = getRemoteProjectById(rootsState)
-  return getWorkspaceProjectOrderPaths(rootsState).map((rootPath) => {
-    if (remoteProjectsById.has(rootPath)) return rootPath
-    const normalizedRootPath = normalizePathForUi(rootPath).trim()
-    const leafName = toProjectNameFromWorkspaceRoot(normalizedRootPath)
-    return duplicateLeafNames.has(leafName) ? normalizedRootPath : leafName
-  })
-}
-
-function matchesWorkspaceRootProject(rootPath: string, projectName: string): boolean {
-  const normalizedRootPath = normalizePathForUi(rootPath).trim()
-  return normalizedRootPath === projectName || toProjectNameFromWorkspaceRoot(rootPath) === projectName
-}
-
-export function collectWorkspaceRootPathsForProjectRemoval(
-  rootsState: WorkspaceRootsState,
-  projectName: string,
-): Set<string> {
-  const removedRootPaths = new Set<string>()
-  for (const rootPath of rootsState.order) {
-    if (matchesWorkspaceRootProject(rootPath, projectName)) {
-      removedRootPaths.add(rootPath)
-    }
-  }
-  for (const rootPath of rootsState.active) {
-    if (matchesWorkspaceRootProject(rootPath, projectName)) {
-      removedRootPaths.add(rootPath)
-    }
-  }
-  for (const rootPath of Object.keys(rootsState.labels)) {
-    if (matchesWorkspaceRootProject(rootPath, projectName)) {
-      removedRootPaths.add(rootPath)
-    }
-  }
-  return removedRootPaths
-}
-
-export function buildWorkspaceRootsProjectOrderState(
-  rootsState: WorkspaceRootsState,
-  orderedProjectNames: string[],
-  groups: UiProjectGroup[],
-): Pick<WorkspaceRootsState, 'order' | 'active' | 'projectOrder'> {
-  const remoteProjectIds = new Set((rootsState.remoteProjects ?? []).map((project) => project.id))
-  const rootByProjectName = new Map<string, string>()
-  for (const rootPath of rootsState.order) {
-    const projectName = toProjectNameFromWorkspaceRoot(rootPath)
-    if (!rootByProjectName.has(projectName)) {
-      rootByProjectName.set(projectName, rootPath)
-    }
-  }
-  for (const group of groups) {
-    const cwd = group.threads[0]?.cwd?.trim() ?? ''
-    if (!cwd) continue
-    rootByProjectName.set(group.projectName, cwd)
-  }
-
-  const nextProjectOrder: string[] = []
-  const pushProjectOrderItem = (item: string): void => {
-    if (item && !nextProjectOrder.includes(item)) {
-      nextProjectOrder.push(item)
-    }
-  }
-
-  for (const projectName of orderedProjectNames) {
-    if (remoteProjectIds.has(projectName)) {
-      pushProjectOrderItem(projectName)
-      continue
-    }
-    const rootPath = rootByProjectName.get(projectName)
-    if (rootPath) {
-      pushProjectOrderItem(rootPath)
-    }
-  }
-  for (const item of getWorkspaceProjectOrderPaths(rootsState)) {
-    pushProjectOrderItem(item)
-  }
-
-  const nextOrder = nextProjectOrder.filter((item) => rootsState.order.includes(item))
-  for (const rootPath of rootsState.order) {
-    if (!nextOrder.includes(rootPath)) {
-      nextOrder.push(rootPath)
-    }
-  }
-
-  const nextActive = rootsState.active.filter((rootPath) => nextOrder.includes(rootPath))
-  if (nextActive.length === 0 && nextOrder.length > 0) {
-    nextActive.push(nextOrder[0])
-  }
-
-  return {
-    order: nextOrder,
-    active: nextActive,
-    projectOrder: nextProjectOrder,
-  }
-}
-
-function orderGroupsByWorkspaceProjectOrder(
-  groups: UiProjectGroup[],
-  rootsState: WorkspaceRootsState | null,
-  duplicateLeafNames: Set<string>,
-): UiProjectGroup[] {
-  const order = getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)
-  if (order.length === 0) return groups
-  const orderIndexByName = new Map(order.map((name, index) => [name, index]))
-  return [...groups].sort((first, second) => {
-    if (isProjectlessGroup(first) || isProjectlessGroup(second)) return 0
-    const firstIndex = orderIndexByName.get(first.projectName) ?? Number.POSITIVE_INFINITY
-    const secondIndex = orderIndexByName.get(second.projectName) ?? Number.POSITIVE_INFINITY
-    if (firstIndex === secondIndex) return 0
-    return firstIndex - secondIndex
-  })
-}
-
-function collectDuplicateProjectLeafNames(groups: UiProjectGroup[], rootsState: WorkspaceRootsState | null): Set<string> {
-  const rootByLeafName = new Map<string, Set<string>>()
-  const canonicalWorkspaceRootCountsByLeafName = new Map<string, number>()
-  const addPath = (value: string): void => {
-    const normalizedPath = normalizePathForUi(value).trim()
-    if (!normalizedPath) return
-    const leafName = toProjectName(normalizedPath)
-    const existing = rootByLeafName.get(leafName) ?? new Set<string>()
-    existing.add(normalizedPath)
-    rootByLeafName.set(leafName, existing)
-  }
-
-  for (const rootPath of rootsState?.order ?? []) {
-    const normalizedRootPath = normalizePathForUi(rootPath).trim()
-    if (!normalizedRootPath) continue
-    const leafName = toProjectName(normalizedRootPath)
-    if (!isManagedCodexWorktreePath(normalizedRootPath)) {
-      canonicalWorkspaceRootCountsByLeafName.set(leafName, (canonicalWorkspaceRootCountsByLeafName.get(leafName) ?? 0) + 1)
-    }
-    addPath(rootPath)
-  }
-  for (const group of groups) {
-    for (const thread of group.threads) {
-      const normalizedCwd = normalizePathForUi(thread.cwd).trim()
-      const leafName = toProjectName(normalizedCwd)
-      const isRegisteredRoot = rootsState?.order.some((rootPath) => normalizePathForUi(rootPath).trim() === normalizedCwd) === true
-      if (isManagedCodexWorktreePath(normalizedCwd) && !isRegisteredRoot && canonicalWorkspaceRootCountsByLeafName.get(leafName) === 1) continue
-      addPath(thread.cwd)
-    }
-  }
-
-  const duplicateLeafNames = new Set<string>()
-  for (const [leafName, paths] of rootByLeafName.entries()) {
-    if (paths.size > 1) duplicateLeafNames.add(leafName)
-  }
-  return duplicateLeafNames
-}
-
-function isManagedCodexWorktreePath(value: string): boolean {
-  return value.includes('/.codex/worktrees/')
-}
-
-function disambiguateProjectGroupsByCwd(
-  groups: UiProjectGroup[],
-  rootsState: WorkspaceRootsState | null,
-): UiProjectGroup[] {
-  const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
-  if (duplicateLeafNames.size === 0) return groups
-
-  const uniqueCanonicalWorkspaceRootLeafNames = new Set<string>()
-  const duplicateCanonicalWorkspaceRootLeafNames = new Set<string>()
-  const canonicalWorkspaceRootByLeafName = new Map<string, string>()
-  const registeredWorkspaceRoots = new Set<string>()
-  for (const rootPath of rootsState?.order ?? []) {
-    const normalizedRootPath = normalizePathForUi(rootPath).trim()
-    if (!normalizedRootPath) continue
-    registeredWorkspaceRoots.add(normalizedRootPath)
-    if (isManagedCodexWorktreePath(normalizedRootPath)) continue
-    const leafName = toProjectName(normalizedRootPath)
-    if (uniqueCanonicalWorkspaceRootLeafNames.has(leafName)) {
-      uniqueCanonicalWorkspaceRootLeafNames.delete(leafName)
-      duplicateCanonicalWorkspaceRootLeafNames.add(leafName)
-      canonicalWorkspaceRootByLeafName.delete(leafName)
-    } else if (!duplicateCanonicalWorkspaceRootLeafNames.has(leafName)) {
-      uniqueCanonicalWorkspaceRootLeafNames.add(leafName)
-      canonicalWorkspaceRootByLeafName.set(leafName, normalizedRootPath)
-    }
-  }
-
-  const disambiguatedGroups: UiProjectGroup[] = []
-  const groupsByProjectName = new Map<string, UiProjectGroup>()
-  for (const group of groups) {
-    for (const thread of group.threads) {
-      const normalizedCwd = normalizePathForUi(thread.cwd).trim()
-      const leafName = toProjectName(normalizedCwd)
-      const isRegisteredRoot = registeredWorkspaceRoots.has(normalizedCwd)
-      const isCanonicalWorktreeThread = isManagedCodexWorktreePath(normalizedCwd)
-        && !isRegisteredRoot
-        && uniqueCanonicalWorkspaceRootLeafNames.has(leafName)
-      let projectName = group.projectName
-      if (isCanonicalWorktreeThread && duplicateLeafNames.has(leafName)) {
-        projectName = canonicalWorkspaceRootByLeafName.get(leafName) ?? group.projectName
-      } else if (normalizedCwd && duplicateLeafNames.has(leafName)) {
-        projectName = normalizedCwd
-      }
-      const nextThread = thread.projectName === projectName ? thread : { ...thread, projectName }
-      const existingGroup = groupsByProjectName.get(projectName)
-      if (existingGroup) {
-        existingGroup.threads.push(nextThread)
-      } else {
-        const nextGroup = { projectName, threads: [nextThread] }
-        groupsByProjectName.set(projectName, nextGroup)
-        disambiguatedGroups.push(nextGroup)
-      }
-    }
-  }
-
-  return disambiguatedGroups
-}
-
-function addWorkspaceRootPlaceholderGroups(
-  groups: UiProjectGroup[],
-  rootsState: WorkspaceRootsState | null,
-  duplicateLeafNames: Set<string>,
-): UiProjectGroup[] {
-  if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groups
-  const existingProjectNames = new Set(groups.map((group) => group.projectName))
-  const nextGroups = [...groups]
-  const remoteProjectsById = getRemoteProjectById(rootsState)
-
-  for (const rootPath of getWorkspaceProjectOrderPaths(rootsState)) {
-    if (remoteProjectsById.has(rootPath)) {
-      if (existingProjectNames.has(rootPath)) continue
-      nextGroups.push({ projectName: rootPath, threads: [] })
-      existingProjectNames.add(rootPath)
-      continue
-    }
-    const normalizedRootPath = normalizePathForUi(rootPath).trim()
-    if (!normalizedRootPath) continue
-    const leafName = toProjectNameFromWorkspaceRoot(normalizedRootPath)
-    const projectName = duplicateLeafNames.has(leafName) ? normalizedRootPath : leafName
-    if (existingProjectNames.has(projectName)) continue
-    nextGroups.push({ projectName, threads: [] })
-    existingProjectNames.add(projectName)
-  }
-
-  return nextGroups
-}
-
-function toOptimisticThreadTitle(message: string): string {
-  const firstLine = message
-    .split('\n')
-    .map((line) => line.trim())
-    .find((line) => line.length > 0)
-
-  if (!firstLine) return 'Untitled thread'
-  return firstLine.slice(0, 80)
-}
-
-function toForkedThreadTitle(title: string): string {
-  const normalizedTitle = title.trim() || 'Untitled thread'
-  return /^fork:\s+/iu.test(normalizedTitle) ? normalizedTitle : `Fork: ${normalizedTitle}`
-}
-
-function isProjectlessGroup(group: UiProjectGroup): boolean {
-  return group.threads.some((thread) => thread.cwd.trim().length === 0 || isProjectlessChatPath(thread.cwd))
-}
-
-export function filterGroupsByWorkspaceRoots(
-  groups: UiProjectGroup[],
-  rootsState: WorkspaceRootsState | null,
-): UiProjectGroup[] {
-  const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
-  const disambiguatedGroups = disambiguateProjectGroupsByCwd(groups, rootsState)
-  const groupsWithWorkspaceRoots = addWorkspaceRootPlaceholderGroups(disambiguatedGroups, rootsState, duplicateLeafNames)
-  if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groupsWithWorkspaceRoots
-  const allowedProjectNames = new Set<string>()
-  for (const projectName of getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)) {
-    allowedProjectNames.add(projectName)
-  }
-  const filteredGroups = groupsWithWorkspaceRoots.filter((group) => allowedProjectNames.has(group.projectName) || isProjectlessGroup(group))
-  return orderGroupsByWorkspaceProjectOrder(filteredGroups, rootsState, duplicateLeafNames)
-}
-
-export function useDesktopState() {
-  const projectGroups = ref<UiProjectGroup[]>([])
-  const sourceGroups = ref<UiProjectGroup[]>([])
-  const selectedThreadId = ref(loadSelectedThreadId())
-  const persistedMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
-  const livePlanMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
-  const liveAgentMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
-  const liveReasoningTextByThreadId = ref<Record<string, string>>({})
-  const liveCommandsByThreadId = ref<Record<string, UiMessage[]>>({})
-  const liveFileChangeMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
-  const inProgressById = ref<Record<string, boolean>>({})
-  type FileAttachment = { label: string; path: string; fsPath: string }
-  type QueuedMessage = {
-    id: string
-    text: string
-    imageUrls: string[]
-    skills: Array<{ name: string; path: string }>
-    fileAttachments: FileAttachment[]
-    collaborationMode: CollaborationModeKind
-  }
-  type PendingTurnRequest = {
-    text: string
-    imageUrls: string[]
-    skills: Array<{ name: string; path: string }>
-    fileAttachments: FileAttachment[]
-    effort: ReasoningEffort | ''
-    collaborationMode: CollaborationModeKind
-    fallbackRetried: boolean
-  }
-  const queuedMessagesByThreadId = ref<Record<string, QueuedMessage[]>>({})
-  const queueProcessingByThreadId = ref<Record<string, boolean>>({})
-  let hasLoadedPersistedQueueState = false
-  const eventUnreadByThreadId = ref<Record<string, boolean>>({})
-  const availableModelIds = ref<string[]>([])
-  const availableCollaborationModes = ref<CollaborationModeOption[]>([
-    { value: 'default', label: 'Default' },
-    { value: 'plan', label: 'Plan' },
-  ])
-  const selectedCollaborationModeByContext = ref<Record<string, CollaborationModeKind>>(
-    loadSelectedCollaborationModeMap(),
-  )
-  const selectedModelIdByContext = ref<Record<string, string>>(loadSelectedModelMap())
-  const selectedCollaborationMode = ref<CollaborationModeKind>(
-    readSelectedCollaborationMode(selectedCollaborationModeByContext.value, selectedThreadId.value),
-  )
-  const selectedModelId = ref(readSelectedModel(selectedModelIdByContext.value, selectedThreadId.value))
-  const selectedReasoningEffort = ref<ReasoningEffort | ''>('medium')
-  const selectedSpeedMode = ref<SpeedMode>('standard')
-  const activeProviderId = ref('')
-  const readStateByThreadId = ref<Record<string, string>>(loadReadStateMap())
-  const unreadCutoffIso = ref(loadUnreadCutoffIso())
-  const projectOrder = ref<string[]>(loadProjectOrder())
-  const projectDisplayNameById = ref<Record<string, string>>(loadProjectDisplayNames())
-  const loadedVersionByThreadId = ref<Record<string, string>>({})
-  const loadedMessagesByThreadId = ref<Record<string, boolean>>({})
-  const hasMoreOlderMessagesByThreadId = ref<Record<string, boolean>>({})
-  const loadingOlderMessagesByThreadId = ref<Record<string, boolean>>({})
-  const resumedThreadById = ref<Record<string, boolean>>({})
-  const turnIndexByTurnIdByThreadId = ref<Record<string, Record<string, number>>>({})
-  const turnSummaryByThreadId = ref<Record<string, TurnSummaryState>>({})
-  const turnActivityByThreadId = ref<Record<string, TurnActivityState>>({})
-  const turnErrorByThreadId = ref<Record<string, TurnErrorState>>({})
-  const activeTurnIdByThreadId = ref<Record<string, string>>({})
-  const interruptBlockedUntilPersistedByThreadId = ref<Record<string, boolean>>({})
-  const threadListedByServerById = ref<Record<string, boolean>>({})
-  const persistedUserMessageByThreadId = ref<Record<string, boolean>>({})
-  const pendingServerRequestsByThreadId = ref<Record<string, UiServerRequest[]>>({})
-  const pendingTurnRequestByThreadId = ref<Record<string, PendingTurnRequest>>({})
-  const codexRateLimit = ref<UiRateLimitSnapshot | null>(null)
-  const threadTokenUsageByThreadId = ref<Record<string, UiThreadTokenUsage>>(loadThreadTokenUsageMap())
-  const terminalOpenByThreadId = ref<Record<string, boolean>>(loadThreadTerminalOpenMap())
-
-  const threadTitleById = ref<Record<string, string>>({})
-
-  const installedSkills = ref<SkillInfo[]>([])
-  const accountRateLimitSnapshots = ref<UiRateLimitSnapshot[]>([])
-
-  const isLoadingThreads = ref(false)
-  const isLoadingMessages = ref(false)
-  const isThreadListFullyLoaded = ref(false)
-  const isSendingMessage = ref(false)
-  const isInterruptingTurn = ref(false)
-  const isUpdatingSpeedMode = ref(false)
-  const isRollingBack = ref(false)
-
-  const error = ref('')
-  const isPolling = ref(false)
-  const hasLoadedThreads = ref(false)
-
-  function extractLocalImagePathFromUrl(value: string): string {
-    try {
-      const parsed = new URL(value, 'http://localhost')
-      if (parsed.pathname !== '/codex-local-image') return ''
-      return parsed.searchParams.get('path')?.trim() ?? ''
-    } catch {
-      return ''
-    }
-  }
-
-  function shouldReuseAttachedImageFromPrompt(promptText: string): boolean {
-    const normalized = promptText.trim().toLowerCase()
-    if (!normalized) return false
-    return /\b(attached image|attached screenshot|save the attached|copy (the )?screenshot|save screenshot)\b/i.test(normalized)
-  }
-
-  function findLatestUserLocalImageUrl(threadId: string): string {
-    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    for (let index = persisted.length - 1; index >= 0; index -= 1) {
-      const message = persisted[index]
-      if (message.role !== 'user' || !Array.isArray(message.images) || message.images.length === 0) continue
-      for (let imageIndex = message.images.length - 1; imageIndex >= 0; imageIndex -= 1) {
-        const imageUrl = message.images[imageIndex]?.trim() ?? ''
-        if (!imageUrl) continue
-        if (extractLocalImagePathFromUrl(imageUrl)) return imageUrl
-      }
-    }
-    return ''
-  }
-  let stopNotificationStream: (() => void) | null = null
-  let eventSyncTimer: number | null = null
-  let rateLimitRefreshTimer: number | null = null
-  const delayedTurnSyncTimerByThreadId = new Map<string, number>()
-  let loadThreadsPromise: Promise<void> | null = null
-  const loadMessagePromiseByThreadId = new Map<string, Promise<void>>()
-  let refreshSkillsPromise: Promise<void> | null = null
-  let rateLimitRefreshPromise: Promise<void> | null = null
-  let pendingThreadsRefresh = false
-  const pendingThreadMessageRefresh = new Set<string>()
-  const lastMessageLoadAtByThreadId = new Map<string, number>()
-  let threadListNextCursor: string | null = null
-  let threadListBackgroundTimer: number | null = null
-  let isLoadingRemainingThreadPages = false
-  let hasLoadedAllThreadPages = false
-  let loadedThreadListGroups: UiProjectGroup[] = []
-  let loadedThreadListRootsState: WorkspaceRootsState | null = null
-  let hasHydratedWorkspaceRootsState = false
-  let activeReasoningItemId = ''
-  let shouldAutoScrollOnNextAgentEvent = false
-  const pendingTurnStartsById = new Map<string, TurnStartedInfo>()
-  const fallbackRetryInFlightThreadIds = new Set<string>()
-
-
-  const allThreads = computed(() => flattenThreads(projectGroups.value))
-  const selectedThread = computed(() =>
-    allThreads.value.find((thread) => thread.id === selectedThreadId.value) ?? null,
-  )
-  const selectedThreadTerminalOpen = computed(() => {
-    const threadId = selectedThreadId.value
-    return Boolean(threadId && terminalOpenByThreadId.value[threadId] === true)
-  })
-  const isSelectedThreadInterruptPending = computed(() => {
-    const threadId = selectedThreadId.value
-    if (!threadId) return false
-    return interruptBlockedUntilPersistedByThreadId.value[threadId] === true
-  })
-  const selectedThreadServerRequests = computed<UiServerRequest[]>(() => {
-    const rows: UiServerRequest[] = []
-    const selected = selectedThreadId.value
-    if (selected && Array.isArray(pendingServerRequestsByThreadId.value[selected])) {
-      rows.push(...pendingServerRequestsByThreadId.value[selected])
-    }
-    if (Array.isArray(pendingServerRequestsByThreadId.value[GLOBAL_SERVER_REQUEST_SCOPE])) {
-      rows.push(...pendingServerRequestsByThreadId.value[GLOBAL_SERVER_REQUEST_SCOPE])
-    }
-    return rows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso))
-  })
-  const selectedLiveOverlay = computed<UiLiveOverlay | null>(() => {
-    const threadId = selectedThreadId.value
-    if (!threadId) return null
-
-    const isInProgress = inProgressById.value[threadId] === true
-    const activity = isInProgress ? turnActivityByThreadId.value[threadId] : undefined
-    const reasoningText = isInProgress
-      ? (liveReasoningTextByThreadId.value[threadId] ?? '').trim()
-      : ''
-    const errorText = (turnErrorByThreadId.value[threadId]?.message ?? '').trim()
-
-    if (!activity && !reasoningText && !errorText) return null
-    return {
-      activityLabel: activity?.label || 'Thinking',
-      activityDetails: activity?.details ?? [],
-      reasoningText,
-      errorText,
-    }
-  })
-  const codexQuota = computed<UiRateLimitSnapshot | null>(() => codexRateLimit.value)
-  const selectedThreadTokenUsage = computed<UiThreadTokenUsage | null>(() => {
-    const threadId = selectedThreadId.value
-    if (!threadId) return null
-    return threadTokenUsageByThreadId.value[threadId] ?? null
-  })
-  const messages = computed<UiMessage[]>(() => {
-    const threadId = selectedThreadId.value
-    if (!threadId) return []
-
-    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    const livePlan = livePlanMessagesByThreadId.value[threadId] ?? []
-    const liveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
-    const liveCommands = liveCommandsByThreadId.value[threadId] ?? []
-    const liveFileChanges = liveFileChangeMessagesByThreadId.value[threadId] ?? []
-    const combined = [...persisted, ...livePlan, ...liveCommands, ...liveFileChanges, ...liveAgent]
-
-    const summary = turnSummaryByThreadId.value[threadId]
-    if (!summary) return combined
-    return insertTurnSummaryMessage(combined, summary)
-  })
-  const hasMoreOlderMessages = computed(() => {
-    const threadId = selectedThreadId.value
-    return threadId ? hasMoreOlderMessagesByThreadId.value[threadId] === true : false
-  })
-  const isLoadingOlderMessages = computed(() => {
-    const threadId = selectedThreadId.value
-    return threadId ? loadingOlderMessagesByThreadId.value[threadId] === true : false
-  })
-
-  function getFirstPersistedTurnId(threadId: string): string {
-    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    for (const message of persisted) {
-      const turnId = message.turnId?.trim() ?? ''
-      if (turnId) return turnId
-    }
-    return ''
-  }
-
-  function readModelIdForThread(threadId: string): string {
-    const contextId = toThreadContextId(threadId)
-    if (contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT) {
-      const providerContextId = toProviderModelContextId(activeProviderId.value)
-      const providerModelId = providerContextId
-        ? normalizeStoredModelId(selectedModelIdByContext.value[providerContextId])
-        : ''
-      if (providerModelId) return providerModelId
-    }
-    return readSelectedModel(selectedModelIdByContext.value, threadId).trim()
-  }
-
-  function ensureAvailableModelIds(...modelIds: string[]): void {
-    const nextModelIds = [...availableModelIds.value]
-    for (const modelId of modelIds) {
-      const normalizedModelId = modelId.trim()
-      if (normalizedModelId && !nextModelIds.includes(normalizedModelId)) {
-        nextModelIds.push(normalizedModelId)
-      }
-    }
-    if (!areStringArraysEqual(availableModelIds.value, nextModelIds)) {
-      availableModelIds.value = nextModelIds
-    }
-  }
-
-  function setSelectedThreadId(nextThreadId: string): void {
-    if (selectedThreadId.value === nextThreadId) return
-    selectedThreadId.value = nextThreadId
-    saveSelectedThreadId(nextThreadId)
-    selectedModelId.value = readModelIdForThread(nextThreadId)
-    ensureAvailableModelIds(selectedModelId.value)
-    selectedCollaborationMode.value = readSelectedCollaborationMode(
-      selectedCollaborationModeByContext.value,
-      nextThreadId,
-    )
-    activeReasoningItemId = ''
-    shouldAutoScrollOnNextAgentEvent = false
-  }
-
-  function setSelectedModelIdForThread(threadId: string, modelId: string): void {
-    const normalizedModelId = modelId.trim()
-    const contextId = toThreadContextId(threadId)
-    if (normalizedModelId) {
-      const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
-      nextModelMap[contextId] = normalizedModelId
-      selectedModelIdByContext.value = nextModelMap
-    } else {
-      selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, contextId)
-    }
-    if (threadId.trim() === selectedThreadId.value) {
-      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
-      ensureAvailableModelIds(selectedModelId.value)
-    } else {
-      ensureAvailableModelIds(normalizedModelId)
-    }
-    if (contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT) {
-      const providerContextId = toProviderModelContextId(activeProviderId.value)
-      if (providerContextId) {
-        if (normalizedModelId) {
-          const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
-          nextModelMap[providerContextId] = normalizedModelId
-          selectedModelIdByContext.value = nextModelMap
-        } else {
-          selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, providerContextId)
-        }
-      }
-    }
-    saveSelectedModelMap(selectedModelIdByContext.value)
-  }
-
-  function setSelectedModelId(modelId: string): void {
-    setSelectedModelIdForThread(selectedThreadId.value, modelId)
-  }
-
-  function setThreadModelId(threadId: string, modelId: string): void {
-    const normalizedThreadId = threadId.trim()
-    if (!normalizedThreadId) return
-
-    const normalizedModelId = modelId.trim()
-    if (normalizedModelId) {
-      const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
-      nextModelMap[normalizedThreadId] = normalizedModelId
-      selectedModelIdByContext.value = nextModelMap
-    } else {
-      selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, normalizedThreadId)
-    }
-    ensureAvailableModelIds(normalizedModelId)
-    if (selectedThreadId.value === normalizedThreadId) {
-      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
-    }
-    saveSelectedModelMap(selectedModelIdByContext.value)
-  }
-
-  function setThreadTokenUsage(threadId: string, usage: UiThreadTokenUsage | null): void {
-    const normalizedThreadId = threadId.trim()
-    if (!normalizedThreadId) return
-
-    if (!usage) {
-      if (!(normalizedThreadId in threadTokenUsageByThreadId.value)) return
-      threadTokenUsageByThreadId.value = omitKey(threadTokenUsageByThreadId.value, normalizedThreadId)
-      saveThreadTokenUsageMap(threadTokenUsageByThreadId.value)
-      return
-    }
-
-    const current = threadTokenUsageByThreadId.value[normalizedThreadId]
-    if (current && JSON.stringify(current) === JSON.stringify(usage)) return
-
-    threadTokenUsageByThreadId.value = {
-      ...threadTokenUsageByThreadId.value,
-      [normalizedThreadId]: usage,
-    }
-    saveThreadTokenUsageMap(threadTokenUsageByThreadId.value)
-  }
-
-  function setSelectedCollaborationMode(mode: CollaborationModeKind): void {
-    const nextMode: CollaborationModeKind = mode === 'plan' ? 'plan' : 'default'
-    const contextId = toThreadContextId(selectedThreadId.value)
-    const currentMode = readSelectedCollaborationMode(selectedCollaborationModeByContext.value, selectedThreadId.value)
-    if (currentMode === nextMode && selectedCollaborationMode.value === nextMode) return
-    selectedCollaborationMode.value = nextMode
-    selectedCollaborationModeByContext.value = writeSelectedCollaborationModeForContext(
-      selectedCollaborationModeByContext.value,
-      contextId,
-      nextMode,
-    )
-    saveSelectedCollaborationModeMap(selectedCollaborationModeByContext.value)
-  }
-
-  function setSelectedCollaborationModeForThread(threadId: string, mode: CollaborationModeKind): void {
-    const nextMode = mode === 'plan' ? 'plan' : 'default'
-    selectedCollaborationModeByContext.value = writeSelectedCollaborationModeForContext(
-      selectedCollaborationModeByContext.value,
-      threadId,
-      nextMode,
-    )
-    if (threadId.trim() === selectedThreadId.value) {
-      selectedCollaborationMode.value = nextMode
-    }
-    saveSelectedCollaborationModeMap(selectedCollaborationModeByContext.value)
-  }
-
-  function setCodexRateLimit(nextSnapshot: UiRateLimitSnapshot | null): void {
-    codexRateLimit.value = nextSnapshot
-  }
-
-  async function applyFallbackModelSelection(threadId: string = selectedThreadId.value): Promise<void> {
-    if (threadId.trim()) {
-      setThreadModelId(threadId, MODEL_FALLBACK_ID)
-    } else {
-      setSelectedModelId(MODEL_FALLBACK_ID)
-    }
-    ensureAvailableModelIds(MODEL_FALLBACK_ID)
-  }
-
-  function setPendingTurnRequest(threadId: string, request: PendingTurnRequest): void {
-    pendingTurnRequestByThreadId.value = {
-      ...pendingTurnRequestByThreadId.value,
-      [threadId]: request,
-    }
-  }
-
-  function clearPendingTurnRequest(threadId: string): void {
-    if (!pendingTurnRequestByThreadId.value[threadId]) return
-    pendingTurnRequestByThreadId.value = omitKey(pendingTurnRequestByThreadId.value, threadId)
-  }
-
-
-
-  async function retryPendingTurnWithFallback(threadId: string): Promise<void> {
-    if (fallbackRetryInFlightThreadIds.has(threadId)) return
-    const pending = pendingTurnRequestByThreadId.value[threadId]
-    if (!pending || pending.fallbackRetried) return
-
-    fallbackRetryInFlightThreadIds.add(threadId)
-    setPendingTurnRequest(threadId, {
-      ...pending,
-      fallbackRetried: true,
-    })
-
-    try {
-      await applyFallbackModelSelection(threadId)
-      // Remove the failed user turn before replaying on fallback model to avoid duplicated user messages.
-      try {
-        const rolledBackMessages = await rollbackThread(threadId, 1)
-        setPersistedMessagesForThread(threadId, rolledBackMessages)
-        clearLivePlansForThread(threadId)
-        setLiveAgentMessagesForThread(threadId, [])
-        clearLiveReasoningForThread(threadId)
-        if (liveCommandsByThreadId.value[threadId]) {
-          liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
-        }
-      } catch {
-        // If rollback fails, continue with retry rather than dropping the turn.
-      }
-      setTurnErrorForThread(threadId, null)
-      error.value = ''
-      setTurnSummaryForThread(threadId, null)
-      setTurnActivityForThread(threadId, {
-        label: 'Thinking',
-        details: buildPendingTurnDetails(MODEL_FALLBACK_ID, pending.effort, pending.collaborationMode),
-      })
-      setThreadInProgress(threadId, true)
-
-      if (resumedThreadById.value[threadId] !== true) {
-        await resumeThread(threadId)
-      }
-
-      await startThreadTurn(
-        threadId,
-        pending.text,
-        pending.imageUrls,
-        MODEL_FALLBACK_ID,
-        pending.effort || undefined,
-        pending.skills.length > 0 ? pending.skills : undefined,
-        pending.fileAttachments,
-        pending.collaborationMode,
-      )
-
-      resumedThreadById.value = {
-        ...resumedThreadById.value,
-        [threadId]: true,
-      }
-
-      scheduleRateLimitRefresh()
-      pendingThreadMessageRefresh.add(threadId)
-      await syncFromNotifications()
-    } catch (unknownError) {
-      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-      setTurnErrorForThread(threadId, errorMessage)
-      error.value = errorMessage
-      setThreadInProgress(threadId, false)
-      setTurnActivityForThread(threadId, null)
-    } finally {
-      fallbackRetryInFlightThreadIds.delete(threadId)
-    }
-  }
-
-  function setSelectedReasoningEffort(effort: ReasoningEffort | ''): void {
-    if (effort && !REASONING_EFFORT_OPTIONS.includes(effort)) {
-      return
-    }
-    selectedReasoningEffort.value = effort
-  }
-
-  async function updateSelectedSpeedMode(mode: SpeedMode): Promise<void> {
-    const nextMode: SpeedMode = mode === 'fast' ? 'fast' : 'standard'
-    if (isUpdatingSpeedMode.value || selectedSpeedMode.value === nextMode) {
-      return
-    }
-
-    const previousMode = selectedSpeedMode.value
-    selectedSpeedMode.value = nextMode
-    isUpdatingSpeedMode.value = true
-    error.value = ''
-
-    try {
-      await setCodexSpeedMode(nextMode)
-    } catch (unknownError) {
-      selectedSpeedMode.value = previousMode
-      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to update Fast mode'
-    } finally {
-      isUpdatingSpeedMode.value = false
-    }
-  }
-
-  async function refreshCollaborationModes(): Promise<void> {
-    try {
-      const modes = await getAvailableCollaborationModes()
-      availableCollaborationModes.value = modes
-      if (!modes.some((mode) => mode.value === selectedCollaborationMode.value)) {
-        setSelectedCollaborationMode('default')
-      }
-    } catch {
-      // Keep the last known collaboration mode choices on transient failures.
-    }
-  }
-
-  function buildPendingTurnDetails(
-    modelId: string,
-    effort: ReasoningEffort | '',
-    collaborationMode: CollaborationModeKind = selectedCollaborationMode.value,
-  ): string[] {
-    const modelLabel = modelId.trim() || 'default'
-    const effortLabel = effort || 'default'
-    const modeLabel = collaborationMode === 'plan' ? 'Plan' : 'Default'
-    const speedLabel = selectedSpeedMode.value === 'fast' ? 'Fast' : 'Standard'
-    return [`Mode: ${modeLabel}`, `Model: ${modelLabel}`, `Thinking: ${effortLabel}`, `Speed: ${speedLabel}`]
-  }
-
-  async function refreshModelPreferences(options?: { providerChanged?: boolean; includeProviderModels?: boolean }): Promise<void> {
-    try {
-      const [modelIds, currentConfig] = await Promise.all([
-        getAvailableModelIds({ includeProviderModels: options?.includeProviderModels !== false }),
-        getCurrentModelConfig(),
-      ])
-
-      const normalizedSelectedModelId = readModelIdForThread(selectedThreadId.value)
-      const normalizedConfiguredModelId = currentConfig.model.trim()
-      const normalizedProviderId = normalizeProviderContextId(currentConfig.providerId)
-      activeProviderId.value = normalizedProviderId
-      const providerModelContextId = toProviderModelContextId(normalizedProviderId)
-      const providerScopedModelId = providerModelContextId
-        ? normalizeStoredModelId(selectedModelIdByContext.value[providerModelContextId])
-        : ''
-      const nextModelIds = [...modelIds]
-      if (!options?.providerChanged) {
-        for (const modelId of [normalizedSelectedModelId, normalizedConfiguredModelId]) {
-          if (modelId && !nextModelIds.includes(modelId)) {
-            nextModelIds.push(modelId)
-          }
-        }
-      }
-      availableModelIds.value = nextModelIds
-
-      const currentModelInNewList = normalizedSelectedModelId && modelIds.includes(normalizedSelectedModelId)
-      if (!normalizedSelectedModelId || !currentModelInNewList || options?.providerChanged) {
-        if (options?.providerChanged && nextModelIds.length > 0) {
-          if (providerScopedModelId && nextModelIds.includes(providerScopedModelId)) {
-            setSelectedModelId(providerScopedModelId)
-          } else if (normalizedConfiguredModelId && nextModelIds.includes(normalizedConfiguredModelId)) {
-            setSelectedModelId(normalizedConfiguredModelId)
-          } else {
-            setSelectedModelId(nextModelIds[0])
-          }
-        } else if (normalizedConfiguredModelId && nextModelIds.includes(normalizedConfiguredModelId)) {
-          setSelectedModelId(currentConfig.model)
-        } else if (nextModelIds.length > 0) {
-          setSelectedModelId(nextModelIds[0])
-        } else {
-          setSelectedModelId('')
-        }
-      }
-      if (providerModelContextId && selectedModelId.value.trim().length > 0) {
-        const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
-        nextModelMap[providerModelContextId] = selectedModelId.value.trim()
-        selectedModelIdByContext.value = nextModelMap
-        saveSelectedModelMap(selectedModelIdByContext.value)
-      }
-
-      if (
-        currentConfig.reasoningEffort &&
-        REASONING_EFFORT_OPTIONS.includes(currentConfig.reasoningEffort)
-      ) {
-        selectedReasoningEffort.value = currentConfig.reasoningEffort
-      }
-      selectedSpeedMode.value = currentConfig.speedMode
-    } catch {
-      // Keep chat UI usable even if model metadata is temporarily unavailable.
-    }
-  }
-
-  async function refreshRateLimits(): Promise<void> {
-    if (rateLimitRefreshPromise) {
-      await rateLimitRefreshPromise
-      return
-    }
-
-    rateLimitRefreshPromise = (async () => {
-      try {
-        const snapshot = await getAccountRateLimits()
-        setCodexRateLimit(snapshot)
-        accountRateLimitSnapshots.value = snapshot ? [snapshot] : []
-      } catch {
-        // Keep the last known rate-limit state if the endpoint is temporarily unavailable.
-      } finally {
-        rateLimitRefreshPromise = null
-      }
-    })()
-
-    await rateLimitRefreshPromise
-  }
-
-  function scheduleRateLimitRefresh(): void {
-    if (typeof window === 'undefined') {
-      void refreshRateLimits()
-      return
-    }
-
-    if (rateLimitRefreshTimer !== null) {
-      window.clearTimeout(rateLimitRefreshTimer)
-    }
-
-    rateLimitRefreshTimer = window.setTimeout(() => {
-      rateLimitRefreshTimer = null
-      void refreshRateLimits()
-    }, RATE_LIMIT_REFRESH_DEBOUNCE_MS)
-  }
-
-  function clearDelayedTurnSync(threadId: string): void {
-    if (!threadId || typeof window === 'undefined') return
-    const timerId = delayedTurnSyncTimerByThreadId.get(threadId)
-    if (timerId === undefined) return
-    window.clearTimeout(timerId)
-    delayedTurnSyncTimerByThreadId.delete(threadId)
-  }
-
-  function scheduleDelayedTurnSync(threadId: string): void {
-    if (!threadId || typeof window === 'undefined') return
-    clearDelayedTurnSync(threadId)
-    const timerId = window.setTimeout(() => {
-      delayedTurnSyncTimerByThreadId.delete(threadId)
-      pendingThreadMessageRefresh.add(threadId)
-      void syncFromNotifications()
-    }, TURN_START_FOLLOW_UP_SYNC_DELAY_MS)
-    delayedTurnSyncTimerByThreadId.set(threadId, timerId)
-  }
-
-  function applyCachedTitlesToGroups(groups: UiProjectGroup[]): UiProjectGroup[] {
-    const titles = threadTitleById.value
-    if (Object.keys(titles).length === 0) return groups
-    return groups.map((group) => ({
-      projectName: group.projectName,
-      threads: group.threads.map((thread) => {
-        const cached = titles[thread.id]
-        return cached ? { ...thread, title: cached } : thread
-      }),
-    }))
-  }
-
-  function getThreadPendingRequests(threadId: string): UiServerRequest[] {
-    if (!threadId) return []
-    return Array.isArray(pendingServerRequestsByThreadId.value[threadId])
-      ? pendingServerRequestsByThreadId.value[threadId]
-      : []
-  }
-
-  function isApprovalRequestMethod(method: string): boolean {
-    return (
-      method === 'item/commandExecution/requestApproval' ||
-      method === 'item/fileChange/requestApproval' ||
-      method === 'item/permissions/requestApproval' ||
-      method === 'execCommandApproval' ||
-      method === 'applyPatchApproval'
-    )
-  }
-
-  function readPendingRequestState(requests: UiServerRequest[]): UiPendingRequestState | null {
-    if (requests.some((request) => isApprovalRequestMethod(request.method))) {
-      return 'approval'
-    }
-    return requests.length > 0 ? 'response' : null
-  }
-
-  function applyThreadFlags(): void {
-    const withTitles = applyCachedTitlesToGroups(sourceGroups.value)
-    const flaggedGroups: UiProjectGroup[] = withTitles.map((group) => ({
-      projectName: group.projectName,
-      threads: group.threads.map((thread) => {
-        const inProgress = inProgressById.value[thread.id] === true
-        const pendingRequestState = readPendingRequestState(getThreadPendingRequests(thread.id))
-        const isSelected = selectedThreadId.value === thread.id
-        const unreadByEvent = eventUnreadByThreadId.value[thread.id] === true
-        const unreadByTime = isThreadUnreadByLastRead(
-          thread.updatedAtIso,
-          readStateByThreadId.value[thread.id],
-          unreadCutoffIso.value,
-        )
-        const unread = !isSelected && !inProgress && (unreadByEvent || unreadByTime)
-
-        return {
-          ...thread,
-          inProgress,
-          unread,
-          pendingRequestState,
-        }
-      }),
-    }))
-    projectGroups.value = mergeThreadGroups(projectGroups.value, flaggedGroups)
-  }
-
-  function insertOptimisticThread(threadId: string, cwd: string, firstMessageText: string): void {
-    const nowIso = new Date().toISOString()
-    const normalizedCwd = normalizePathForUi(cwd)
-    const projectName = toProjectName(normalizedCwd)
-    const nextThread: UiThread = {
-      id: threadId,
-      title: toOptimisticThreadTitle(firstMessageText),
-      projectName,
-      cwd: normalizedCwd,
-      hasWorktree: normalizedCwd.includes('/.codex/worktrees/') || normalizedCwd.includes('/.git/worktrees/'),
-      createdAtIso: nowIso,
-      updatedAtIso: nowIso,
-      preview: firstMessageText,
-      unread: false,
-      inProgress: false,
-    }
-
-    const existingGroupIndex = sourceGroups.value.findIndex((group) => group.projectName === projectName)
-    if (existingGroupIndex >= 0) {
-      const existingGroup = sourceGroups.value[existingGroupIndex]
-      const remainingThreads = existingGroup.threads.filter((thread) => thread.id !== threadId)
-      const nextGroup: UiProjectGroup = {
-        projectName,
-        threads: [nextThread, ...remainingThreads],
-      }
-      const nextGroups = [...sourceGroups.value]
-      nextGroups.splice(existingGroupIndex, 1, nextGroup)
-      sourceGroups.value = nextGroups
-    } else {
-      sourceGroups.value = [{ projectName, threads: [nextThread] }, ...sourceGroups.value]
-    }
-
-    const nextProjectOrder = mergeProjectOrder(projectOrder.value, sourceGroups.value)
-    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
-      projectOrder.value = nextProjectOrder
-      saveProjectOrder(projectOrder.value)
-    }
-    applyThreadFlags()
-  }
-
-  function pruneThreadScopedState(flatThreads: UiThread[]): void {
-    const activeThreadIds = new Set(flatThreads.map((thread) => thread.id))
-    const currentThreadId = selectedThreadId.value.trim()
-    if (currentThreadId) {
-      activeThreadIds.add(currentThreadId)
-    }
-    const nextSelectedModelMap = pruneThreadContextStateMap(selectedModelIdByContext.value, activeThreadIds)
-    if (nextSelectedModelMap !== selectedModelIdByContext.value) {
-      selectedModelIdByContext.value = nextSelectedModelMap
-      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
-      ensureAvailableModelIds(selectedModelId.value)
-      saveSelectedModelMap(nextSelectedModelMap)
-    }
-    const nextSelectedCollaborationModeMap = pruneThreadContextStateMap(
-      selectedCollaborationModeByContext.value,
-      activeThreadIds,
-    )
-    if (nextSelectedCollaborationModeMap !== selectedCollaborationModeByContext.value) {
-      selectedCollaborationModeByContext.value = nextSelectedCollaborationModeMap
-      selectedCollaborationMode.value = readSelectedCollaborationMode(
-        nextSelectedCollaborationModeMap,
-        selectedThreadId.value,
-      )
-      saveSelectedCollaborationModeMap(nextSelectedCollaborationModeMap)
-    }
-    const nextReadState = pruneThreadStateMap(readStateByThreadId.value, activeThreadIds)
-    if (nextReadState !== readStateByThreadId.value) {
-      readStateByThreadId.value = nextReadState
-      saveReadStateMap(nextReadState)
-    }
-    loadedMessagesByThreadId.value = pruneThreadStateMap(loadedMessagesByThreadId.value, activeThreadIds)
-    loadedVersionByThreadId.value = pruneThreadStateMap(loadedVersionByThreadId.value, activeThreadIds)
-    resumedThreadById.value = pruneThreadStateMap(resumedThreadById.value, activeThreadIds)
-    turnIndexByTurnIdByThreadId.value = pruneThreadStateMap(turnIndexByTurnIdByThreadId.value, activeThreadIds)
-    persistedMessagesByThreadId.value = pruneThreadStateMap(persistedMessagesByThreadId.value, activeThreadIds)
-    liveAgentMessagesByThreadId.value = pruneThreadStateMap(liveAgentMessagesByThreadId.value, activeThreadIds)
-    liveReasoningTextByThreadId.value = pruneThreadStateMap(liveReasoningTextByThreadId.value, activeThreadIds)
-    liveCommandsByThreadId.value = pruneThreadStateMap(liveCommandsByThreadId.value, activeThreadIds)
-    liveFileChangeMessagesByThreadId.value = pruneThreadStateMap(liveFileChangeMessagesByThreadId.value, activeThreadIds)
-    turnSummaryByThreadId.value = pruneThreadStateMap(turnSummaryByThreadId.value, activeThreadIds)
-    turnActivityByThreadId.value = pruneThreadStateMap(turnActivityByThreadId.value, activeThreadIds)
-    turnErrorByThreadId.value = pruneThreadStateMap(turnErrorByThreadId.value, activeThreadIds)
-    activeTurnIdByThreadId.value = pruneThreadStateMap(activeTurnIdByThreadId.value, activeThreadIds)
-    interruptBlockedUntilPersistedByThreadId.value = pruneThreadStateMap(
-      interruptBlockedUntilPersistedByThreadId.value,
-      activeThreadIds,
-    )
-    threadListedByServerById.value = pruneThreadStateMap(threadListedByServerById.value, activeThreadIds)
-    persistedUserMessageByThreadId.value = pruneThreadStateMap(persistedUserMessageByThreadId.value, activeThreadIds)
-    const nextQueuedMessages = pruneThreadStateMap(queuedMessagesByThreadId.value, activeThreadIds)
-    if (nextQueuedMessages !== queuedMessagesByThreadId.value) {
-      queuedMessagesByThreadId.value = nextQueuedMessages
-      persistQueueState()
-    }
-    threadTokenUsageByThreadId.value = pruneThreadStateMap(threadTokenUsageByThreadId.value, activeThreadIds)
-    eventUnreadByThreadId.value = pruneThreadStateMap(eventUnreadByThreadId.value, activeThreadIds)
-    inProgressById.value = pruneThreadStateMap(inProgressById.value, activeThreadIds)
-    const nextPending: Record<string, UiServerRequest[]> = {}
-    for (const [threadId, requests] of Object.entries(pendingServerRequestsByThreadId.value)) {
-      if (threadId === GLOBAL_SERVER_REQUEST_SCOPE || activeThreadIds.has(threadId)) {
-        nextPending[threadId] = requests
-      }
-    }
-    pendingServerRequestsByThreadId.value = nextPending
-  }
-
-  function markThreadAsRead(threadId: string): void {
-    const thread = flattenThreads(sourceGroups.value).find((row) => row.id === threadId)
-    if (!thread) return
-
-    readStateByThreadId.value = {
-      ...readStateByThreadId.value,
-      [threadId]: thread.updatedAtIso,
-    }
-    saveReadStateMap(readStateByThreadId.value)
-    if (eventUnreadByThreadId.value[threadId]) {
-      eventUnreadByThreadId.value = omitKey(eventUnreadByThreadId.value, threadId)
-    }
-    applyThreadFlags()
-  }
-
-  function setTurnSummaryForThread(threadId: string, summary: TurnSummaryState | null): void {
-    if (!threadId) return
-
-    const previous = turnSummaryByThreadId.value[threadId]
-    if (summary) {
-      if (areTurnSummariesEqual(previous, summary)) return
-      turnSummaryByThreadId.value = {
-        ...turnSummaryByThreadId.value,
-        [threadId]: summary,
-      }
-    } else {
-      if (previous) {
-        turnSummaryByThreadId.value = omitKey(turnSummaryByThreadId.value, threadId)
-      }
-    }
-  }
-
-  function setThreadInProgress(threadId: string, nextInProgress: boolean): void {
-    if (!threadId) return
-    const currentValue = inProgressById.value[threadId] === true
-    if (currentValue === nextInProgress) return
-    if (nextInProgress) {
-      inProgressById.value = {
-        ...inProgressById.value,
-        [threadId]: true,
-      }
-    } else {
-      inProgressById.value = omitKey(inProgressById.value, threadId)
-      clearCompletedTurnLiveState(threadId)
-      clearInterruptPersistenceGate(threadId)
-    }
-    applyThreadFlags()
-    if (!nextInProgress && !hasActiveInProgressThreads() && threadListNextCursor) {
-      scheduleRemainingThreadPages()
-    }
-  }
-
-  function clearInterruptPersistenceGate(threadId: string): void {
-    if (!threadId) return
-    if (interruptBlockedUntilPersistedByThreadId.value[threadId]) {
-      interruptBlockedUntilPersistedByThreadId.value = omitKey(interruptBlockedUntilPersistedByThreadId.value, threadId)
-    }
-    if (threadListedByServerById.value[threadId]) {
-      threadListedByServerById.value = omitKey(threadListedByServerById.value, threadId)
-    }
-    if (persistedUserMessageByThreadId.value[threadId]) {
-      persistedUserMessageByThreadId.value = omitKey(persistedUserMessageByThreadId.value, threadId)
-    }
-  }
-
-  function blockInterruptUntilThreadIsPersisted(threadId: string): void {
-    if (!threadId) return
-    interruptBlockedUntilPersistedByThreadId.value = {
-      ...interruptBlockedUntilPersistedByThreadId.value,
-      [threadId]: true,
-    }
-    if (threadListedByServerById.value[threadId]) {
-      threadListedByServerById.value = omitKey(threadListedByServerById.value, threadId)
-    }
-    if (persistedUserMessageByThreadId.value[threadId]) {
-      persistedUserMessageByThreadId.value = omitKey(persistedUserMessageByThreadId.value, threadId)
-    }
-  }
-
-  function maybeUnblockInterruptForPersistedThread(threadId: string): void {
-    if (!threadId) return
-    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
-    if (threadListedByServerById.value[threadId] !== true) return
-    if (persistedUserMessageByThreadId.value[threadId] !== true) return
-    clearInterruptPersistenceGate(threadId)
-  }
-
-  function maybeUnblockInterruptForActiveTurn(threadId: string, turnId: string): void {
-    if (!threadId || !turnId) return
-    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
-    clearInterruptPersistenceGate(threadId)
-  }
-
-  function markServerListedThreads(serverThreadIds: Set<string>): void {
-    const pendingThreadIds = Object.keys(interruptBlockedUntilPersistedByThreadId.value)
-    if (pendingThreadIds.length === 0) return
-
-    let nextListedState = threadListedByServerById.value
-    let changed = false
-    for (const threadId of pendingThreadIds) {
-      if (!serverThreadIds.has(threadId) || nextListedState[threadId] === true) continue
-      nextListedState = {
-        ...nextListedState,
-        [threadId]: true,
-      }
-      changed = true
-    }
-
-    if (!changed) return
-    threadListedByServerById.value = nextListedState
-    for (const threadId of pendingThreadIds) {
-      maybeUnblockInterruptForPersistedThread(threadId)
-    }
-  }
-
-  function markThreadMessagesPersisted(threadId: string, messages: UiMessage[]): void {
-    if (!threadId) return
-    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
-    if (!messages.some((message) => message.role === 'user')) return
-    if (persistedUserMessageByThreadId.value[threadId] !== true) {
-      persistedUserMessageByThreadId.value = {
-        ...persistedUserMessageByThreadId.value,
-        [threadId]: true,
-      }
-    }
-    maybeUnblockInterruptForPersistedThread(threadId)
-  }
-
-  function markThreadUnreadByEvent(threadId: string): void {
-    if (!threadId) return
-    if (threadId === selectedThreadId.value) return
-    if (eventUnreadByThreadId.value[threadId] === true) return
-    eventUnreadByThreadId.value = {
-      ...eventUnreadByThreadId.value,
-      [threadId]: true,
-    }
-    applyThreadFlags()
-  }
-
-  function setTurnActivityForThread(threadId: string, activity: TurnActivityState | null): void {
-    if (!threadId) return
-
-    const previous = turnActivityByThreadId.value[threadId]
-    if (!activity) {
-      if (previous) {
-        turnActivityByThreadId.value = omitKey(turnActivityByThreadId.value, threadId)
-      }
-      return
-    }
-
-    const normalizedLabel = sanitizeDisplayText(activity.label) || 'Thinking'
-    const incomingDetails = activity.details
-      .map((line) => sanitizeDisplayText(line))
-      .filter((line) => line.length > 0 && line !== normalizedLabel)
-    const mergedDetails = Array.from(new Set([...(previous?.details ?? []), ...incomingDetails])).slice(-3)
-    const nextActivity: TurnActivityState = {
-      label: normalizedLabel,
-      details: mergedDetails,
-    }
-
-    if (areTurnActivitiesEqual(previous, nextActivity)) return
-    turnActivityByThreadId.value = {
-      ...turnActivityByThreadId.value,
-      [threadId]: nextActivity,
-    }
-  }
-
-  function setTurnErrorForThread(
-    threadId: string,
-    message: string | null,
-    options: { transient?: boolean } = {},
-  ): void {
-    if (!threadId) return
-
-    const previous = turnErrorByThreadId.value[threadId]
-    const normalizedMessage = message ? normalizeMessageText(message) : ''
-    if (!normalizedMessage) {
-      if (previous) {
-        turnErrorByThreadId.value = omitKey(turnErrorByThreadId.value, threadId)
-      }
-      return
-    }
-
-    const transient = options.transient === true
-    if (previous?.message === normalizedMessage && previous.transient === transient) return
-
-    turnErrorByThreadId.value = {
-      ...turnErrorByThreadId.value,
-      [threadId]: { message: normalizedMessage, transient },
-    }
-  }
-
-  function clearTransientTurnErrorForThread(threadId: string): void {
-    if (!threadId) return
-    if (!turnErrorByThreadId.value[threadId]?.transient) return
-    setTurnErrorForThread(threadId, null)
-  }
-
-  function clearAllTransientTurnErrors(): void {
-    const transientThreadIds = Object.entries(turnErrorByThreadId.value)
-      .filter(([, state]) => state?.transient)
-      .map(([threadId]) => threadId)
-    if (transientThreadIds.length === 0) return
-
-    let nextState = turnErrorByThreadId.value
-    for (const threadId of transientThreadIds) {
-      nextState = omitKey(nextState, threadId)
-    }
-    turnErrorByThreadId.value = nextState
-  }
-
-  function currentThreadVersion(threadId: string): string {
-    const thread = flattenThreads(sourceGroups.value).find((row) => row.id === threadId)
-    return thread?.updatedAtIso ?? ''
-  }
-
-  function setThreadTerminalOpen(threadId: string, isOpen: boolean): void {
-    if (!threadId) return
-    const next = { ...terminalOpenByThreadId.value }
-    if (isOpen) {
-      next[threadId] = true
-    } else {
-      delete next[threadId]
-    }
-    terminalOpenByThreadId.value = next
-    saveThreadTerminalOpenMap(next)
-  }
-
-  function toggleSelectedThreadTerminal(): void {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    setThreadTerminalOpen(threadId, !selectedThreadTerminalOpen.value)
-  }
-
-  function setPersistedMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
-    const previous = persistedMessagesByThreadId.value[threadId] ?? []
-    if (areMessageArraysEqual(previous, nextMessages)) return
-    persistedMessagesByThreadId.value = {
-      ...persistedMessagesByThreadId.value,
-      [threadId]: nextMessages,
-    }
-  }
-
-  function setLiveAgentMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
-    const previous = liveAgentMessagesByThreadId.value[threadId] ?? []
-    if (areMessageArraysEqual(previous, nextMessages)) return
-    liveAgentMessagesByThreadId.value = {
-      ...liveAgentMessagesByThreadId.value,
-      [threadId]: nextMessages,
-    }
-  }
-
-  function clearLiveAgentMessagesForThread(threadId: string): void {
-    if (!threadId) return
-    if (!(threadId in liveAgentMessagesByThreadId.value)) return
-    liveAgentMessagesByThreadId.value = omitKey(liveAgentMessagesByThreadId.value, threadId)
-  }
-
-  function setLiveFileChangeMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
-    const previous = liveFileChangeMessagesByThreadId.value[threadId] ?? []
-    if (areMessageArraysEqual(previous, nextMessages)) return
-    liveFileChangeMessagesByThreadId.value = {
-      ...liveFileChangeMessagesByThreadId.value,
-      [threadId]: nextMessages,
-    }
-  }
-
-  function setLivePlanMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
-    const previous = livePlanMessagesByThreadId.value[threadId] ?? []
-    if (areMessageArraysEqual(previous, nextMessages)) return
-    livePlanMessagesByThreadId.value = {
-      ...livePlanMessagesByThreadId.value,
-      [threadId]: nextMessages,
-    }
-  }
-
-  function upsertLivePlanMessage(threadId: string, nextMessage: UiMessage): void {
-    const previous = livePlanMessagesByThreadId.value[threadId] ?? []
-    const next = upsertMessage(previous, nextMessage)
-    setLivePlanMessagesForThread(threadId, next)
-  }
-
-  function upsertLiveAgentMessage(threadId: string, nextMessage: UiMessage): void {
-    const previous = liveAgentMessagesByThreadId.value[threadId] ?? []
-    const next = upsertMessage(previous, nextMessage)
-    setLiveAgentMessagesForThread(threadId, next)
-  }
-
-  function upsertLiveFileChangeMessage(threadId: string, nextMessage: UiMessage): void {
-    const previous = liveFileChangeMessagesByThreadId.value[threadId] ?? []
-    const next = upsertMessage(previous, nextMessage)
-    setLiveFileChangeMessagesForThread(threadId, next)
-  }
-
-  function setLiveReasoningText(threadId: string, text: string): void {
-    if (!threadId) return
-    const normalized = text.trim()
-    const previous = liveReasoningTextByThreadId.value[threadId] ?? ''
-    if (normalized.length === 0) {
-      if (!previous) return
-      liveReasoningTextByThreadId.value = omitKey(liveReasoningTextByThreadId.value, threadId)
-      return
-    }
-    if (previous === normalized) return
-    liveReasoningTextByThreadId.value = {
-      ...liveReasoningTextByThreadId.value,
-      [threadId]: normalized,
-    }
-  }
-
-  function appendLiveReasoningText(threadId: string, delta: string): void {
-    if (!threadId) return
-    const previous = liveReasoningTextByThreadId.value[threadId] ?? ''
-    setLiveReasoningText(threadId, `${previous}${delta}`)
-  }
-
-  function clearLiveReasoningForThread(threadId: string): void {
-    if (!threadId) return
-    if (!(threadId in liveReasoningTextByThreadId.value)) return
-    liveReasoningTextByThreadId.value = omitKey(liveReasoningTextByThreadId.value, threadId)
-  }
-
-  function clearLivePlansForThread(threadId: string): void {
-    if (!threadId) return
-    if (!(threadId in livePlanMessagesByThreadId.value)) return
-    livePlanMessagesByThreadId.value = omitKey(livePlanMessagesByThreadId.value, threadId)
-  }
-
-  function clearLiveFileChangesForThread(threadId: string): void {
-    if (!threadId) return
-    if (!(threadId in liveFileChangeMessagesByThreadId.value)) return
-    liveFileChangeMessagesByThreadId.value = omitKey(liveFileChangeMessagesByThreadId.value, threadId)
-  }
-
-  function clearCompletedTurnLiveState(threadId: string): void {
-    if (!threadId) return
-    clearLivePlansForThread(threadId)
-    clearLiveReasoningForThread(threadId)
-    setTurnActivityForThread(threadId, null)
-    if (threadId === selectedThreadId.value) {
-      activeReasoningItemId = ''
-    }
-    if (liveCommandsByThreadId.value[threadId]) {
-      liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
-    }
-    if (activeTurnIdByThreadId.value[threadId]) {
-      activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
-    }
-    clearPendingTurnRequest(threadId)
-  }
-
-  function normalizePlanStepStatus(value: unknown): UiPlanStep['status'] {
-    if (value === 'completed') return 'completed'
-    if (value === 'inProgress' || value === 'in_progress') return 'inProgress'
-    return 'pending'
-  }
-
-  function buildPlanMessageText(plan: UiPlanData): string {
-    const lines: string[] = []
-    if (plan.explanation?.trim()) {
-      lines.push(plan.explanation.trim())
-    }
-    for (const step of plan.steps) {
-      const marker = step.status === 'completed' ? 'x' : step.status === 'inProgress' ? '~' : ' '
-      lines.push(`- [${marker}] ${step.step}`)
-    }
-    return lines.join('\n').trim()
-  }
-
-  function readPlanUpdate(notification: RpcNotification): { threadId: string; message: UiMessage } | null {
-    if (notification.method !== 'turn/plan/updated') return null
-    const params = asRecord(notification.params)
-    const threadId = extractThreadIdFromNotification(notification)
-    const turnId = readString(params?.turnId) || readString(params?.turn_id)
-    const rawSteps = Array.isArray(params?.plan) ? params?.plan : []
-    const steps: UiPlanStep[] = rawSteps
-      .map((row) => asRecord(row))
-      .map((row) => ({
-        step: readString(row?.step),
-        status: normalizePlanStepStatus(row?.status),
-      }))
-      .filter((row) => row.step.length > 0)
-
-    if (!threadId || !turnId) return null
-
-    const explanation = readString(params?.explanation).trim()
-    const plan: UiPlanData = {
-      explanation: explanation || undefined,
-      steps,
-      isStreaming: true,
-    }
-
-    return {
-      threadId,
-      message: {
-        id: `${turnId}:plan`,
-        role: 'assistant',
-        text: buildPlanMessageText(plan),
-        messageType: 'plan.live',
-        plan,
-      },
-    }
-  }
-
-  function readPlanDelta(notification: RpcNotification): { threadId: string; message: UiMessage } | null {
-    if (notification.method !== 'item/plan/delta') return null
-    const params = asRecord(notification.params)
-    const threadId = extractThreadIdFromNotification(notification)
-    const turnId = readString(params?.turnId) || readString(params?.turn_id)
-    const delta = readString(params?.delta)
-    if (!threadId || !turnId || !delta) return null
-
-    const messageId = `${turnId}:plan`
-    const existing = (livePlanMessagesByThreadId.value[threadId] ?? []).find((message) => message.id === messageId)
-    const nextText = `${existing?.text ?? ''}${delta}`
-    const nextPlan: UiPlanData | undefined = existing?.plan
-      ? { ...existing.plan, isStreaming: true }
-      : undefined
-
-    return {
-      threadId,
-      message: {
-        id: messageId,
-        role: 'assistant',
-        text: nextText,
-        messageType: 'plan.live',
-        plan: nextPlan,
-      },
-    }
-  }
-
-  function asRecord(value: unknown): Record<string, unknown> | null {
-    return value !== null && typeof value === 'object' && !Array.isArray(value)
-      ? (value as Record<string, unknown>)
-      : null
-  }
-
-  function readString(value: unknown): string {
-    return typeof value === 'string' ? value : ''
-  }
-
-  function readNumber(value: unknown): number | null {
-    return typeof value === 'number' && Number.isFinite(value) ? value : null
-  }
-
-  function getRateLimitSnapshotKey(snapshot: UiRateLimitSnapshot): string {
-    return snapshot.limitId?.trim() || snapshot.limitName?.trim() || '__default__'
-  }
-
-  function normalizeRateLimitWindow(value: unknown): UiRateLimitSnapshot['primary'] {
-    const record = asRecord(value)
-    if (!record) return null
-
-    const windowValue = readNumber(record.windowDurationMins)
-    return {
-      usedPercent: clamp(readNumber(record.usedPercent) ?? 0, 0, 100),
-      windowDurationMins: windowValue,
-      windowMinutes: windowValue,
-      resetsAt: readNumber(record.resetsAt),
-    }
-  }
-
-  function normalizeRateLimitSnapshot(value: unknown): UiRateLimitSnapshot | null {
-    const record = asRecord(value)
-    if (!record) return null
-
-    const credits = asRecord(record.credits)
-    return {
-      limitId: readString(record.limitId) || null,
-      limitName: readString(record.limitName) || null,
-      primary: normalizeRateLimitWindow(record.primary),
-      secondary: normalizeRateLimitWindow(record.secondary),
-      credits: credits
-        ? {
-            hasCredits: credits.hasCredits === true,
-            unlimited: credits.unlimited === true,
-            balance: readString(credits.balance) || null,
-          }
-        : null,
-      planType: readString(record.planType) || null,
-    }
-  }
-
-  function normalizeRateLimitSnapshotsPayload(value: unknown): UiRateLimitSnapshot[] {
-    const record = asRecord(value)
-    if (!record) return []
-
-    const next: UiRateLimitSnapshot[] = []
-    const seen = new Set<string>()
-    const pushSnapshot = (snapshot: UiRateLimitSnapshot | null): void => {
-      if (!snapshot) return
-      const key = getRateLimitSnapshotKey(snapshot)
-      if (seen.has(key)) return
-      seen.add(key)
-      next.push(snapshot)
-    }
-
-    pushSnapshot(normalizeRateLimitSnapshot(record.rateLimits))
-
-    const byLimitId = asRecord(record.rateLimitsByLimitId)
-    if (byLimitId) {
-      for (const snapshot of Object.values(byLimitId)) {
-        pushSnapshot(normalizeRateLimitSnapshot(snapshot))
-      }
-    }
-
-    return next
-  }
-
-  function normalizeTokenUsageBreakdown(value: unknown): UiTokenUsageBreakdown | null {
-    const record = asRecord(value)
-    if (!record) return null
-
-    const totalTokens = readNumber(record.totalTokens ?? record.total_tokens)
-    const inputTokens = readNumber(record.inputTokens ?? record.input_tokens)
-    const cachedInputTokens = readNumber(record.cachedInputTokens ?? record.cached_input_tokens)
-    const outputTokens = readNumber(record.outputTokens ?? record.output_tokens)
-    const reasoningOutputTokens = readNumber(record.reasoningOutputTokens ?? record.reasoning_output_tokens)
-    if (
-      totalTokens === null ||
-      inputTokens === null ||
-      cachedInputTokens === null ||
-      outputTokens === null ||
-      reasoningOutputTokens === null
-    ) {
-      return null
-    }
-
-    return {
-      totalTokens,
-      inputTokens,
-      cachedInputTokens,
-      outputTokens,
-      reasoningOutputTokens,
-    }
-  }
-
-  function normalizeThreadTokenUsage(value: unknown): UiThreadTokenUsage | null {
-    const record = asRecord(value)
-    if (!record) return null
-
-    const total = normalizeTokenUsageBreakdown(record.total)
-    const last = normalizeTokenUsageBreakdown(record.last)
-    if (!total || !last) return null
-
-    const modelContextWindow = readNumber(record.modelContextWindow ?? record.model_context_window)
-    const currentContextTokens = last.totalTokens
-    const remainingContextTokens = typeof modelContextWindow === 'number'
-      ? Math.max(modelContextWindow - currentContextTokens, 0)
-      : null
-    const remainingContextPercent = typeof modelContextWindow === 'number' && modelContextWindow > 0
-      ? clamp(Math.round((remainingContextTokens ?? 0) / modelContextWindow * 100), 0, 100)
-      : null
-
-    return {
-      total,
-      last,
-      modelContextWindow,
-      currentContextTokens,
-      remainingContextTokens,
-      remainingContextPercent,
-    }
-  }
-
-  function readThreadTokenUsageUpdate(notification: RpcNotification): { threadId: string; usage: UiThreadTokenUsage } | null {
-    if (notification.method !== 'thread/tokenUsage/updated') return null
-    const params = asRecord(notification.params)
-    const threadId = extractThreadIdFromNotification(notification)
-    const usage = normalizeThreadTokenUsage(params?.tokenUsage ?? params?.token_usage)
-    if (!threadId || !usage) return null
-    return { threadId, usage }
-  }
-
-  function extractThreadIdFromNotification(notification: RpcNotification): string {
-    const params = asRecord(notification.params)
-    if (!params) return ''
-
-    const directThreadId = readString(params.threadId)
-    if (directThreadId) return directThreadId
-    const snakeThreadId = readString(params.thread_id)
-    if (snakeThreadId) return snakeThreadId
-
-    const conversationId = readString(params.conversationId)
-    if (conversationId) return conversationId
-    const snakeConversationId = readString(params.conversation_id)
-    if (snakeConversationId) return snakeConversationId
-
-    const thread = asRecord(params.thread)
-    const nestedThreadId = readString(thread?.id)
-    if (nestedThreadId) return nestedThreadId
-
-    const turn = asRecord(params.turn)
-    const turnThreadId = readString(turn?.threadId)
-    if (turnThreadId) return turnThreadId
-    const turnSnakeThreadId = readString(turn?.thread_id)
-    if (turnSnakeThreadId) return turnSnakeThreadId
-
-    return ''
-  }
-
-  function readTurnErrorMessage(notification: RpcNotification): string {
-    if (notification.method !== 'turn/completed') return ''
-    const params = asRecord(notification.params)
-    const turn = asRecord(params?.turn)
-    if (!turn || turn.status !== 'failed') return ''
-    const errorPayload = asRecord(turn.error)
-    return readString(errorPayload?.message)
-  }
-
-  function readNotificationErrorState(notification: RpcNotification): { message: string; transient: boolean } | null {
-    if (notification.method !== 'error') return null
-    const params = asRecord(notification.params)
-    const message = (
-      readString(params?.message) ||
-      readString(asRecord(params?.error)?.message)
-    )
-    if (!message) return null
-
-    return {
-      message,
-      transient: params?.willRetry === true,
-    }
-  }
-
-  function normalizeServerRequest(params: unknown): UiServerRequest | null {
-    const row = asRecord(params)
-    if (!row) return null
-
-    const id = row.id
-    const rawMethod = readString(row.method)
-    const requestParams = row.params
-    if (typeof id !== 'number' || !Number.isInteger(id) || !rawMethod) {
-      return null
-    }
-
-    const requestParamRecord = asRecord(requestParams)
-    const method = normalizePendingServerRequestMethod(rawMethod, requestParamRecord)
-    const threadId = (
-      readString(requestParamRecord?.threadId) ||
-      readString(requestParamRecord?.thread_id) ||
-      readString(requestParamRecord?.conversationId) ||
-      readString(requestParamRecord?.conversation_id) ||
-      GLOBAL_SERVER_REQUEST_SCOPE
-    )
-    const turnId = readString(requestParamRecord?.turnId) || readString(requestParamRecord?.turn_id)
-    const itemId = (
-      readString(requestParamRecord?.itemId) ||
-      readString(requestParamRecord?.item_id) ||
-      readString(requestParamRecord?.callId) ||
-      readString(requestParamRecord?.call_id)
-    )
-    const receivedAtIso = readString(row.receivedAtIso) || new Date().toISOString()
-
-    return {
-      id,
-      method,
-      threadId,
-      turnId,
-      itemId,
-      receivedAtIso,
-      params: requestParams ?? null,
-    }
-  }
-
-  function normalizePendingServerRequestMethod(
-    method: string,
-    params: Record<string, unknown> | null,
-  ): string {
-    const normalized = method.trim()
-    if (!normalized) return normalized
-
-    if (
-      normalized === 'item/commandExecution/requestApproval' ||
-      normalized === 'execCommandApproval' ||
-      normalized === 'exec_approval_request' ||
-      looksLikeExecApprovalRequest(params)
-    ) {
-      return 'item/commandExecution/requestApproval'
-    }
-
-    if (
-      normalized === 'item/fileChange/requestApproval' ||
-      normalized === 'applyPatchApproval' ||
-      normalized === 'apply_patch_approval_request' ||
-      looksLikePatchApprovalRequest(params)
-    ) {
-      return 'item/fileChange/requestApproval'
-    }
-
-    if (
-      normalized === 'item/tool/requestUserInput' ||
-      normalized === 'request_user_input' ||
-      looksLikeToolUserInputRequest(params)
-    ) {
-      return 'item/tool/requestUserInput'
-    }
-
-    if (
-      normalized === 'mcpServer/elicitation/request' ||
-      normalized === 'elicitation_request' ||
-      looksLikeMcpServerElicitationRequest(params)
-    ) {
-      return 'mcpServer/elicitation/request'
-    }
-
-    if (normalized === 'item/permissions/requestApproval' || looksLikePermissionsApprovalRequest(params)) {
-      return 'item/permissions/requestApproval'
-    }
-
-    if (
-      normalized === 'item/tool/call' ||
-      normalized === 'dynamic_tool_call_request' ||
-      looksLikeToolCallRequest(params)
-    ) {
-      return 'item/tool/call'
-    }
-
-    return normalized
-  }
-
-  function looksLikeExecApprovalRequest(params: Record<string, unknown> | null): boolean {
-    if (!params) return false
-    const command = params.command
-    if (Array.isArray(command) && command.some((part) => typeof part === 'string' && part.trim().length > 0)) {
-      return true
-    }
-    if (typeof command === 'string' && command.trim().length > 0) {
-      return true
-    }
-    return Array.isArray(params.commandActions)
-  }
-
-  function looksLikePatchApprovalRequest(params: Record<string, unknown> | null): boolean {
-    if (!params) return false
-    if (typeof params.grantRoot === 'string' && params.grantRoot.trim().length > 0) return true
-    if (typeof params.grant_root === 'string' && params.grant_root.trim().length > 0) return true
-    if (asRecord(params.fileChanges)) return true
-    return asRecord(params.changes) !== null
-  }
-
-  function looksLikeToolUserInputRequest(params: Record<string, unknown> | null): boolean {
-    return Boolean(params && Array.isArray(params.questions))
-  }
-
-  function looksLikeToolCallRequest(params: Record<string, unknown> | null): boolean {
-    if (!params) return false
-    return (
-      typeof params.toolName === 'string' ||
-      typeof params.tool_name === 'string' ||
-      typeof params.name === 'string' ||
-      Array.isArray(params.arguments)
-    )
-  }
-
-  function looksLikeMcpServerElicitationRequest(params: Record<string, unknown> | null): boolean {
-    if (!params) return false
-    const mode = readString(params.mode)
-    return (
-      typeof params.serverName === 'string' &&
-      typeof params.threadId === 'string' &&
-      typeof params.message === 'string' &&
-      (mode === 'form' || mode === 'url')
-    )
-  }
-
-  function looksLikePermissionsApprovalRequest(params: Record<string, unknown> | null): boolean {
-    if (!params) return false
-    return (
-      typeof params.threadId === 'string' &&
-      typeof params.turnId === 'string' &&
-      typeof params.itemId === 'string' &&
-      asRecord(params.permissions) !== null
-    )
-  }
-
-  function readToolRequestUserInputQuestionIds(request: UiServerRequest): string[] {
-    if (request.method !== 'item/tool/requestUserInput') return []
-    const params = asRecord(request.params)
-    const questions = Array.isArray(params?.questions) ? params.questions : []
-    const questionIds: string[] = []
-
-    for (const row of questions) {
-      const question = asRecord(row)
-      const id = readString(question?.id).trim()
-      if (id) {
-        questionIds.push(id)
-      }
-    }
-
-    return questionIds
-  }
-
-  function upsertPendingServerRequest(request: UiServerRequest): void {
-    const threadId = request.threadId || GLOBAL_SERVER_REQUEST_SCOPE
-    const current = pendingServerRequestsByThreadId.value[threadId] ?? []
-    const index = current.findIndex((row) => row.id === request.id)
-    const nextRows = [...current]
-    if (index >= 0) {
-      nextRows.splice(index, 1, request)
-    } else {
-      nextRows.push(request)
-    }
-
-    pendingServerRequestsByThreadId.value = {
-      ...pendingServerRequestsByThreadId.value,
-      [threadId]: nextRows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso)),
-    }
-    applyThreadFlags()
-  }
-
-  function removePendingServerRequestById(requestId: number): void {
-    const next: Record<string, UiServerRequest[]> = {}
-    for (const [threadId, requests] of Object.entries(pendingServerRequestsByThreadId.value)) {
-      const filtered = requests.filter((request) => request.id !== requestId)
-      if (filtered.length > 0) {
-        next[threadId] = filtered
-      }
-    }
-    pendingServerRequestsByThreadId.value = next
-    applyThreadFlags()
-  }
-
-  function replacePendingServerRequests(requests: UiServerRequest[]): void {
-    const next: Record<string, UiServerRequest[]> = {}
-    for (const request of requests) {
-      const threadId = request.threadId || GLOBAL_SERVER_REQUEST_SCOPE
-      const current = next[threadId] ?? []
-      current.push(request)
-      next[threadId] = current
-    }
-
-    for (const rows of Object.values(next)) {
-      rows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso))
-    }
-
-    pendingServerRequestsByThreadId.value = next
-  }
-
-  function handleServerRequestNotification(notification: RpcNotification): boolean {
-    if (notification.method === 'server/request') {
-      const request = normalizeServerRequest(notification.params)
-      if (!request) return true
-      upsertPendingServerRequest(request)
-      return true
-    }
-
-    if (notification.method === 'server/request/resolved') {
-      const row = asRecord(notification.params)
-      const id = row?.id
-      if (typeof id === 'number' && Number.isInteger(id)) {
-        removePendingServerRequestById(id)
-      }
-      return true
-    }
-
-    return false
-  }
-
-  function sanitizeDisplayText(value: string): string {
-    return value.replace(/\s+/gu, ' ').trim()
-  }
-
-  function readTurnActivity(notification: RpcNotification): { threadId: string; activity: TurnActivityState } | null {
-    const threadId = extractThreadIdFromNotification(notification)
-    if (!threadId) return null
-
-    if (notification.method === 'turn/started') {
-      return {
-        threadId,
-        activity: {
-          label: 'Thinking',
-          details: [],
-        },
-      }
-    }
-
-    if (notification.method === 'item/started') {
-      const params = asRecord(notification.params)
-      const item = asRecord(params?.item)
-      const itemType = readString(item?.type).toLowerCase()
-      if (itemType === 'reasoning') {
-        return {
-          threadId,
-          activity: {
-            label: 'Thinking',
-            details: [],
-          },
-        }
-      }
-      if (itemType === 'agentmessage') {
-        return {
-          threadId,
-          activity: {
-            label: 'Writing response',
-            details: [],
-          },
-        }
-      }
-      if (itemType === 'commandexecution') {
-        const cmd = readString(item?.command)
-        return {
-          threadId,
-          activity: {
-            label: 'Running command',
-            details: cmd ? [cmd] : [],
-          },
-        }
-      }
-      if (itemType === 'filechange') {
-        const changes = Array.isArray(item?.changes) ? item.changes : []
-        const firstChange = changes[0] as Record<string, unknown> | undefined
-        const path = readString(firstChange?.path)
-        return {
-          threadId,
-          activity: {
-            label: 'Applying changes',
-            details: path ? [path] : [],
-          },
-        }
-      }
-    }
-
-    if (notification.method === 'item/commandExecution/outputDelta') {
-      return {
-        threadId,
-        activity: {
-          label: 'Running command',
-          details: [],
-        },
-      }
-    }
-
-    if (notification.method === 'item/fileChange/outputDelta') {
-      return {
-        threadId,
-        activity: {
-          label: 'Applying changes',
-          details: [],
-        },
-      }
-    }
-
-    if (
-      notification.method === 'item/reasoning/summaryTextDelta' ||
-      notification.method === 'item/reasoning/summaryPartAdded'
-    ) {
-      return {
-        threadId,
-        activity: {
-          label: 'Thinking',
-          details: [],
-        },
-      }
-    }
-
-    if (notification.method === 'item/agentMessage/delta') {
-      return {
-        threadId,
-        activity: {
-          label: 'Writing response',
-          details: [],
-        },
-      }
-    }
-
-    return null
-  }
-
-  function readTurnStartedInfo(notification: RpcNotification): TurnStartedInfo | null {
-    if (notification.method !== 'turn/started') {
-      return null
-    }
-
-    const params = asRecord(notification.params)
-    if (!params) return null
-    const threadId = extractThreadIdFromNotification(notification)
-    if (!threadId) return null
-
-    const turnPayload = asRecord(params.turn)
-    const turnId =
-      readString(turnPayload?.id) ||
-      readString(params.turnId) ||
-      `${threadId}:unknown`
-    if (!turnId) return null
-
-    const startedAtMs =
-      parseIsoTimestamp(readString(turnPayload?.startedAt)) ??
-      parseIsoTimestamp(readString(params.startedAt)) ??
-      parseIsoTimestamp(notification.atIso) ??
-      Date.now()
-
-    return {
-      threadId,
-      turnId,
-      startedAtMs,
-    }
-  }
-
-  function readTurnCompletedInfo(notification: RpcNotification): TurnCompletedInfo | null {
-    if (notification.method !== 'turn/completed') {
-      return null
-    }
-
-    const params = asRecord(notification.params)
-    if (!params) return null
-    const threadId = extractThreadIdFromNotification(notification)
-    if (!threadId) return null
-
-    const turnPayload = asRecord(params.turn)
-    const turnId =
-      readString(turnPayload?.id) ||
-      readString(params.turnId) ||
-      `${threadId}:unknown`
-    if (!turnId) return null
-
-    const completedAtMs =
-      parseIsoTimestamp(readString(turnPayload?.completedAt)) ??
-      parseIsoTimestamp(readString(params.completedAt)) ??
-      parseIsoTimestamp(notification.atIso) ??
-      Date.now()
-
-    const startedAtMs =
-      parseIsoTimestamp(readString(turnPayload?.startedAt)) ??
-      parseIsoTimestamp(readString(params.startedAt)) ??
-      undefined
-
-    return {
-      threadId,
-      turnId,
-      completedAtMs,
-      startedAtMs,
-    }
-  }
-
-  function liveReasoningMessageId(reasoningItemId: string): string {
-    return `${reasoningItemId}:live-reasoning`
-  }
-
-  function inferNextTurnIndex(threadId: string): number {
-    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    let maxTurnIndex = -1
-    for (const message of persisted) {
-      if (typeof message.turnIndex === 'number' && Number.isFinite(message.turnIndex)) {
-        maxTurnIndex = Math.max(maxTurnIndex, message.turnIndex)
-      }
-    }
-    return maxTurnIndex + 1
-  }
-
-  function setTurnIndexForThread(threadId: string, turnId: string, turnIndex: number): void {
-    if (!threadId || !turnId || !Number.isInteger(turnIndex) || turnIndex < 0) return
-    const previous = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
-    if (previous[turnId] === turnIndex) return
-    turnIndexByTurnIdByThreadId.value = {
-      ...turnIndexByTurnIdByThreadId.value,
-      [threadId]: {
-        ...previous,
-        [turnId]: turnIndex,
-      },
-    }
-  }
-
-  function replaceTurnIndexLookupForThread(threadId: string, nextLookup: Record<string, number>): void {
-    const previous = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
-    const previousEntries = Object.entries(previous)
-    const nextEntries = Object.entries(nextLookup)
-    if (
-      previousEntries.length === nextEntries.length
-      && previousEntries.every(([turnId, turnIndex]) => nextLookup[turnId] === turnIndex)
-    ) {
-      return
-    }
-
-    turnIndexByTurnIdByThreadId.value = {
-      ...turnIndexByTurnIdByThreadId.value,
-      [threadId]: { ...nextLookup },
-    }
-  }
-
-  function rebindLiveFileChangeTurnIndices(threadId: string): void {
-    const current = liveFileChangeMessagesByThreadId.value[threadId]
-    if (!current || current.length === 0) return
-
-    const turnIndexByTurnId = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
-    let changed = false
-    const next = current.map((message) => {
-      if (typeof message.turnIndex === 'number' || !message.turnId) {
-        return message
-      }
-      const turnIndex = turnIndexByTurnId[message.turnId]
-      if (typeof turnIndex !== 'number') return message
-      changed = true
-      return { ...message, turnIndex }
-    })
-
-    if (!changed) return
-    liveFileChangeMessagesByThreadId.value = {
-      ...liveFileChangeMessagesByThreadId.value,
-      [threadId]: next,
-    }
-  }
-
-  function readReasoningStartedItemId(notification: RpcNotification): string {
-    const params = asRecord(notification.params)
-    if (!params) return ''
-
-    if (notification.method === 'item/started') {
-      const item = asRecord(params.item)
-      if (!item || item.type !== 'reasoning') return ''
-      return readString(item.id)
-    }
-
-    return ''
-  }
-
-  function readReasoningDelta(notification: RpcNotification): { messageId: string; delta: string } | null {
-    const params = asRecord(notification.params)
-    if (!params) return null
-
-    // Канонический источник дельт для UI — уже нормализованный item/*.
-    if (notification.method === 'item/reasoning/summaryTextDelta') {
-      const itemId = readString(params.itemId)
-      const delta = readString(params.delta)
-      if (!itemId || !delta) return null
-      return { messageId: liveReasoningMessageId(itemId), delta }
-    }
-
-    return null
-  }
-
-  function readReasoningSectionBreakMessageId(notification: RpcNotification): string {
-    const params = asRecord(notification.params)
-    if (!params) return ''
-
-    // Канонический source для section break — item/*
-    if (notification.method === 'item/reasoning/summaryPartAdded') {
-      const itemId = readString(params.itemId)
-      if (!itemId) return ''
-      return liveReasoningMessageId(itemId)
-    }
-
-    return ''
-  }
-
-  function readReasoningCompletedId(notification: RpcNotification): string {
-    const params = asRecord(notification.params)
-    if (!params) return ''
-
-    if (notification.method === 'item/completed') {
-      const item = asRecord(params.item)
-      if (!item || item.type !== 'reasoning') return ''
-      return liveReasoningMessageId(readString(item.id))
-    }
-
-    return ''
-  }
-
-  function readAgentMessageStartedId(notification: RpcNotification): string {
-    const params = asRecord(notification.params)
-    if (!params) return ''
-
-    if (notification.method === 'item/started') {
-      const item = asRecord(params.item)
-      if (!item || item.type !== 'agentMessage') return ''
-      return readString(item.id)
-    }
-
-    return ''
-  }
-
-  function readAgentMessageDelta(notification: RpcNotification): { messageId: string; delta: string } | null {
-    const params = asRecord(notification.params)
-    if (!params) return null
-
-    // Канонический live-канал агентского текста.
-    if (notification.method === 'item/agentMessage/delta') {
-      const messageId = readString(params.itemId)
-      const delta = readString(params.delta)
-      if (!messageId || !delta) return null
-      return { messageId, delta }
-    }
-
-    return null
-  }
-
-  function readAgentMessageCompleted(notification: RpcNotification): UiMessage | null {
-    const params = asRecord(notification.params)
-    if (!params) return null
-
-    if (notification.method === 'item/completed') {
-      const item = asRecord(params.item)
-      if (!item || item.type !== 'agentMessage') return null
-      const id = readString(item.id)
-      const text = readString(item.text)
-      if (!id || !text) return null
-      return {
-        id,
-        role: 'assistant',
-        text,
-        messageType: 'agentMessage.live',
-      }
-    }
-
-    return null
-  }
-
-  function toLocalImageUrl(path: string): string {
-    return `/codex-local-image?path=${encodeURIComponent(path)}`
-  }
-
-  function toImageGenerationUrl(value: string): string {
-    const trimmed = value.trim()
-    if (!trimmed) return ''
-    if (
-      trimmed.startsWith('data:') ||
-      trimmed.startsWith('http://') ||
-      trimmed.startsWith('https://') ||
-      trimmed.startsWith('/codex-local-image?')
-    ) {
-      return trimmed
-    }
-    const compact = trimmed.replace(/\s+/gu, '')
-    if (!/^[A-Za-z0-9+/]+={0,2}$/u.test(compact)) return ''
-    return `data:image/png;base64,${compact}`
-  }
-
-  function readCompletedImageView(notification: RpcNotification): UiMessage | null {
-    if (notification.method !== 'item/completed') return null
-    const params = asRecord(notification.params)
-    const item = asRecord(params?.item)
-    if (!item) return null
-    const id = readString(item.id)
-    if (!id) return null
-    if (item.type === 'imageView') {
-      const path = readString(item.path)
-      if (!path) return null
-      return {
-        id,
-        role: 'assistant',
-        text: '',
-        images: [toLocalImageUrl(path)],
-        messageType: 'imageView',
-      }
-    }
-    if (item.type !== 'imageGeneration' && item.type !== 'image_generation') return null
-    const result = readString(item.result)
-    const imageUrl = result ? toImageGenerationUrl(result) : ''
-    if (!imageUrl) return null
-    return {
-      id,
-      role: 'assistant',
-      text: '',
-      images: [imageUrl],
-      messageType: 'imageView',
-
-    }
-  }
-
-  function readCommandExecutionStarted(notification: RpcNotification): UiMessage | null {
-    if (notification.method !== 'item/started') return null
-    const params = asRecord(notification.params)
-    const item = asRecord(params?.item)
-    if (!item || item.type !== 'commandExecution') return null
-    const id = readString(item.id)
-    const command = readString(item.command)
-    if (!id) return null
-    const cwd = typeof item.cwd === 'string' ? item.cwd : null
-    const threadId = extractThreadIdFromNotification(notification)
-    const turnId = readString(params?.turnId) || readString(params?.turn_id)
-    const turnIndex = threadId && turnId
-      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
-      : undefined
-    return {
-      id,
-      role: 'system',
-      text: command,
-      messageType: 'commandExecution',
-      commandExecution: { command, cwd, status: 'inProgress', aggregatedOutput: '', exitCode: null },
-      turnId: turnId || undefined,
-      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
-    }
-  }
-
-  function readCommandOutputDelta(notification: RpcNotification): { itemId: string; delta: string } | null {
-    if (notification.method !== 'item/commandExecution/outputDelta') return null
-    const params = asRecord(notification.params)
-    if (!params) return null
-    const itemId = readString(params.itemId)
-    const delta = readString(params.delta)
-    if (!itemId || !delta) return null
-    return { itemId, delta }
-  }
-
-  function readCommandExecutionCompleted(notification: RpcNotification): UiMessage | null {
-    if (notification.method !== 'item/completed') return null
-    const params = asRecord(notification.params)
-    const item = asRecord(params?.item)
-    if (!item || item.type !== 'commandExecution') return null
-    const id = readString(item.id)
-    const command = readString(item.command)
-    if (!id) return null
-    const cwd = typeof item.cwd === 'string' ? item.cwd : null
-    const statusRaw = readString(item.status)
-    const status: CommandExecutionData['status'] =
-      statusRaw === 'failed' ? 'failed' : statusRaw === 'declined' ? 'declined' : statusRaw === 'interrupted' ? 'interrupted' : 'completed'
-    const aggregatedOutput = typeof item.aggregatedOutput === 'string' ? item.aggregatedOutput : ''
-    const exitCode = typeof item.exitCode === 'number' ? item.exitCode : null
-    const threadId = extractThreadIdFromNotification(notification)
-    const turnId = readString(params?.turnId) || readString(params?.turn_id)
-    const turnIndex = threadId && turnId
-      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
-      : undefined
-    return {
-      id,
-      role: 'system',
-      text: command,
-      messageType: 'commandExecution',
-      commandExecution: { command, cwd, status, aggregatedOutput, exitCode },
-      turnId: turnId || undefined,
-      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
-    }
-  }
-
-  function readCompletedFileChange(notification: RpcNotification): UiMessage | null {
-    if (notification.method !== 'item/completed') return null
-    const params = asRecord(notification.params)
-    const item = asRecord(params?.item)
-    if (!item || item.type !== 'fileChange') return null
-    const id = readString(item.id)
-    if (!id) return null
-    const threadId = readString(params?.threadId)
-    const turnId = readString(params?.turnId)
-    const turnIndex = threadId && turnId
-      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
-      : undefined
-
-    const fileChanges = toUiFileChanges(item.changes)
-    const fileChangeStatus = normalizeFileChangeStatus(item.status)
-    if (fileChanges.length === 0 || fileChangeStatus !== 'completed') return null
-
-    return {
-      id,
-      role: 'system',
-      text: '',
-      messageType: 'fileChange',
-      fileChangeStatus,
-      fileChanges,
-      turnId: turnId || undefined,
-      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
-    }
-  }
-
-  function upsertLiveCommand(threadId: string, msg: UiMessage): void {
-    const previous = liveCommandsByThreadId.value[threadId] ?? []
-    const next = upsertMessage(previous, msg)
-    if (next === previous) return
-    liveCommandsByThreadId.value = { ...liveCommandsByThreadId.value, [threadId]: next }
-  }
-
-  function removeLiveCommandsPersistedIn(threadId: string, persistedMessages: UiMessage[]): void {
-    const current = liveCommandsByThreadId.value[threadId]
-    if (!current || current.length === 0) return
-    const persistedIds = new Set(persistedMessages.map((m) => m.id))
-    const next = current.filter((m) => !persistedIds.has(m.id))
-    if (next.length === current.length) return
-    if (next.length === 0) {
-      liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
-    } else {
-      liveCommandsByThreadId.value = { ...liveCommandsByThreadId.value, [threadId]: next }
-    }
-  }
-
-  function removeLiveFileChangesPersistedIn(threadId: string, persistedMessages: UiMessage[]): void {
-    const current = liveFileChangeMessagesByThreadId.value[threadId]
-    if (!current || current.length === 0) return
-    const persistedIds = new Set(persistedMessages.map((message) => message.id))
-    const persistedTurnIds = new Set(
-      persistedMessages
-        .filter((message) => message.messageType === 'fileChange' && typeof message.turnId === 'string' && message.turnId.length > 0)
-        .map((message) => message.turnId as string),
-    )
-    const persistedTurnIndices = new Set(
-      persistedMessages
-        .filter((message) => message.messageType === 'fileChange' && typeof message.turnIndex === 'number')
-        .map((message) => message.turnIndex as number),
-    )
-    const next = current.filter((message) => (
-      !persistedIds.has(message.id)
-      && !(message.turnId && persistedTurnIds.has(message.turnId))
-      && !(typeof message.turnIndex === 'number' && persistedTurnIndices.has(message.turnIndex))
-    ))
-    if (next.length === current.length) return
-    if (next.length === 0) {
-      liveFileChangeMessagesByThreadId.value = omitKey(liveFileChangeMessagesByThreadId.value, threadId)
-    } else {
-      liveFileChangeMessagesByThreadId.value = { ...liveFileChangeMessagesByThreadId.value, [threadId]: next }
-    }
-  }
-
-  function isAgentContentEvent(notification: RpcNotification): boolean {
-    if (notification.method === 'item/agentMessage/delta') {
-      return true
-    }
-
-    const params = asRecord(notification.params)
-    if (!params) return false
-
-    if (notification.method === 'item/completed') {
-      const item = asRecord(params.item)
-      return item?.type === 'agentMessage'
-    }
-
-    return false
-  }
-
-  function applyRealtimeUpdates(notification: RpcNotification): void {
-    if (handleServerRequestNotification(notification)) {
-      return
-    }
-
-    if (notification.method === 'account/rateLimits/updated') {
-      scheduleRateLimitRefresh()
-    }
-
-    if (notification.method === 'thread/name/updated') {
-      const params = asRecord(notification.params)
-      const threadId = readString(params?.threadId)
-      const threadName = readString(params?.threadName)
-      if (threadId && threadName) {
-        threadTitleById.value = { ...threadTitleById.value, [threadId]: threadName }
-        applyThreadFlags()
-        void persistThreadTitle(threadId, threadName)
-      }
-    }
-
-    if (notification.method === 'account/rateLimits/updated') {
-      setCodexRateLimit(pickCodexRateLimitSnapshot(notification.params))
-      return
-    }
-
-    const tokenUsageUpdate = readThreadTokenUsageUpdate(notification)
-    if (tokenUsageUpdate) {
-      setThreadTokenUsage(tokenUsageUpdate.threadId, tokenUsageUpdate.usage)
-      return
-    }
-
-    const turnActivity = readTurnActivity(notification)
-    if (turnActivity) {
-      setTurnActivityForThread(turnActivity.threadId, turnActivity.activity)
-    }
-
-    const notificationThreadId = extractThreadIdFromNotification(notification)
-    const notificationErrorState = readNotificationErrorState(notification)
-    if (!notificationErrorState && notificationThreadId) {
-      clearTransientTurnErrorForThread(notificationThreadId)
-    }
-
-    const startedTurn = readTurnStartedInfo(notification)
-    if (startedTurn) {
-      pendingTurnStartsById.set(startedTurn.turnId, startedTurn)
-      setTurnIndexForThread(startedTurn.threadId, startedTurn.turnId, inferNextTurnIndex(startedTurn.threadId))
-      activeTurnIdByThreadId.value = {
-        ...activeTurnIdByThreadId.value,
-        [startedTurn.threadId]: startedTurn.turnId,
-      }
-      maybeUnblockInterruptForActiveTurn(startedTurn.threadId, startedTurn.turnId)
-      clearLivePlansForThread(startedTurn.threadId)
-      clearLiveFileChangesForThread(startedTurn.threadId)
-      setTurnSummaryForThread(startedTurn.threadId, null)
-      setTurnErrorForThread(startedTurn.threadId, null)
-      setThreadInProgress(startedTurn.threadId, true)
-      scheduleQueueStateRefresh(startedTurn.threadId)
-      if (eventUnreadByThreadId.value[startedTurn.threadId]) {
-        eventUnreadByThreadId.value = omitKey(eventUnreadByThreadId.value, startedTurn.threadId)
-      }
-    }
-
-    const completedTurn = readTurnCompletedInfo(notification)
-    const turnErrorMessage = readTurnErrorMessage(notification)
-    const completedThreadId = completedTurn?.threadId ?? extractThreadIdFromNotification(notification)
-    const completedThreadModelId = completedThreadId ? readModelIdForThread(completedThreadId) : ''
-    const shouldRetryWithFallback =
-      Boolean(completedThreadId) &&
-      Boolean(turnErrorMessage) &&
-      completedThreadModelId !== MODEL_FALLBACK_ID &&
-      isUnsupportedChatGptModelError(new Error(turnErrorMessage))
-    if (completedTurn) {
-      const pendingTurnRequest = pendingTurnRequestByThreadId.value[completedTurn.threadId]
-      const startedTurnState = pendingTurnStartsById.get(completedTurn.turnId)
-      if (startedTurnState) {
-        pendingTurnStartsById.delete(completedTurn.turnId)
-      }
-
-      const rawDurationMs =
-        readNumber(asRecord(notification.params)?.durationMs) ??
-        readNumber(asRecord(asRecord(notification.params)?.turn)?.durationMs) ??
-        (typeof completedTurn.startedAtMs === 'number'
-          ? completedTurn.completedAtMs - completedTurn.startedAtMs
-          : null) ??
-        (startedTurnState ? completedTurn.completedAtMs - startedTurnState.startedAtMs : null)
-
-      const durationMs = typeof rawDurationMs === 'number' ? Math.max(0, rawDurationMs) : 0
-      setTurnSummaryForThread(completedTurn.threadId, {
-        turnId: completedTurn.turnId,
-        durationMs,
-      })
-      if (activeTurnIdByThreadId.value[completedTurn.threadId]) {
-        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, completedTurn.threadId)
-      }
-      setThreadInProgress(completedTurn.threadId, false)
-      setTurnActivityForThread(completedTurn.threadId, null)
-      markThreadUnreadByEvent(completedTurn.threadId)
-      if (!shouldRetryWithFallback) {
-        clearPendingTurnRequest(completedTurn.threadId)
-        scheduleQueueStateRefresh(completedTurn.threadId)
-      }
-    }
-
-    if (turnErrorMessage) {
-      const failedThreadId = completedTurn?.threadId || extractThreadIdFromNotification(notification)
-      if (failedThreadId) {
-        setTurnErrorForThread(failedThreadId, turnErrorMessage)
-      }
-      error.value = turnErrorMessage
-      if (failedThreadId && shouldRetryWithFallback) {
-        void retryPendingTurnWithFallback(failedThreadId)
-      }
-    } else if (completedTurn) {
-      setTurnErrorForThread(completedTurn.threadId, null)
-    }
-
-    if (notificationErrorState) {
-      const errorThreadId = notificationThreadId
-      const errorThreadModelId = errorThreadId ? readModelIdForThread(errorThreadId) : selectedModelId.value.trim()
-      if (errorThreadId) {
-        setTurnErrorForThread(errorThreadId, notificationErrorState.message, {
-          transient: notificationErrorState.transient,
-        })
-      }
-      error.value = notificationErrorState.message
-      if (errorThreadModelId !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(new Error(notificationErrorState.message))) {
-        if (errorThreadId) {
-          void retryPendingTurnWithFallback(errorThreadId)
-        } else {
-          void applyFallbackModelSelection()
-        }
-      }
-    }
-
-    const planUpdate = readPlanUpdate(notification)
-    if (planUpdate) {
-      upsertLivePlanMessage(planUpdate.threadId, planUpdate.message)
-      setTurnActivityForThread(planUpdate.threadId, {
-        label: 'Planning',
-        details: planUpdate.message.plan?.steps.map((step) => step.step).slice(0, 2) ?? [],
-      })
-    }
-
-    const planDelta = readPlanDelta(notification)
-    if (planDelta) {
-      upsertLivePlanMessage(planDelta.threadId, planDelta.message)
-      setTurnActivityForThread(planDelta.threadId, {
-        label: 'Planning',
-        details: [],
-      })
-    }
-
-    if (!notificationThreadId || notificationThreadId !== selectedThreadId.value) return
-
-    const startedAgentMessageId = readAgentMessageStartedId(notification)
-    if (startedAgentMessageId) {
-      activeReasoningItemId = ''
-    }
-
-    const liveAgentMessageDelta = readAgentMessageDelta(notification)
-    if (liveAgentMessageDelta) {
-      const existing = (liveAgentMessagesByThreadId.value[notificationThreadId] ?? [])
-        .find((message) => message.id === liveAgentMessageDelta.messageId)
-      const nextText = `${existing?.text ?? ''}${liveAgentMessageDelta.delta}`
-      upsertLiveAgentMessage(notificationThreadId, {
-        id: liveAgentMessageDelta.messageId,
-        role: 'assistant',
-        text: nextText,
-        messageType: 'agentMessage.live',
-      })
-    }
-
-    const completedAgentMessage = readAgentMessageCompleted(notification)
-    if (completedAgentMessage) {
-      upsertLiveAgentMessage(notificationThreadId, completedAgentMessage)
-    }
-
-    const completedImageView = readCompletedImageView(notification)
-    if (completedImageView) {
-      upsertLiveAgentMessage(notificationThreadId, completedImageView)
-
-    }
-
-    const startedReasoningItemId = readReasoningStartedItemId(notification)
-    if (startedReasoningItemId) {
-      activeReasoningItemId = startedReasoningItemId
-    }
-
-    const liveReasoningDelta = readReasoningDelta(notification)
-    if (liveReasoningDelta) {
-      appendLiveReasoningText(notificationThreadId, liveReasoningDelta.delta)
-    }
-
-    const sectionBreakMessageId = readReasoningSectionBreakMessageId(notification)
-    if (sectionBreakMessageId) {
-      const current = liveReasoningTextByThreadId.value[notificationThreadId] ?? ''
-      if (current.trim().length > 0 && !current.endsWith('\n\n')) {
-        setLiveReasoningText(notificationThreadId, `${current}\n\n`)
-      }
-    }
-
-    const completedReasoningMessageId = readReasoningCompletedId(notification)
-    if (completedReasoningMessageId) {
-      if (completedReasoningMessageId === liveReasoningMessageId(activeReasoningItemId)) {
-        activeReasoningItemId = ''
-      }
-    }
-
-    const commandStarted = readCommandExecutionStarted(notification)
-    if (commandStarted) {
-      upsertLiveCommand(notificationThreadId, commandStarted)
-      setTurnActivityForThread(notificationThreadId, { label: 'Running command', details: [commandStarted.commandExecution?.command ?? ''] })
-    }
-
-    const commandDelta = readCommandOutputDelta(notification)
-    if (commandDelta) {
-      const current = (liveCommandsByThreadId.value[notificationThreadId] ?? []).find((m) => m.id === commandDelta.itemId)
-      if (current?.commandExecution) {
-        upsertLiveCommand(notificationThreadId, {
-          ...current,
-          commandExecution: { ...current.commandExecution, aggregatedOutput: `${current.commandExecution.aggregatedOutput}${commandDelta.delta}` },
-        })
-      }
-    }
-
-    const commandCompleted = readCommandExecutionCompleted(notification)
-    if (commandCompleted) {
-      upsertLiveCommand(notificationThreadId, commandCompleted)
-    }
-
-    const completedFileChange = readCompletedFileChange(notification)
-    if (completedFileChange) {
-      upsertLiveFileChangeMessage(notificationThreadId, completedFileChange)
-    }
-
-    if (isAgentContentEvent(notification)) {
-      activeReasoningItemId = ''
-      clearLiveReasoningForThread(notificationThreadId)
-    }
-
-    if (notification.method === 'turn/completed') {
-      activeReasoningItemId = ''
-      shouldAutoScrollOnNextAgentEvent = false
-      clearLiveReasoningForThread(notificationThreadId)
-      if (liveCommandsByThreadId.value[notificationThreadId]) {
-        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, notificationThreadId)
-      }
-      const completedThreadId = extractThreadIdFromNotification(notification)
-      if (completedThreadId) {
-        setThreadInProgress(completedThreadId, false)
-        setTurnActivityForThread(completedThreadId, null)
-        markThreadUnreadByEvent(completedThreadId)
-        if (!shouldRetryWithFallback) {
-          clearPendingTurnRequest(completedThreadId)
-          scheduleQueueStateRefresh(completedThreadId)
-        }
-      }
-    }
-
-  }
-
-  function queueEventDrivenSync(notification: RpcNotification): void {
-    if (notification.method === 'thread/tokenUsage/updated') return
-
-    const method = notification.method
-    const shouldRefreshMessages =
-      method === 'turn/started' ||
-      method === 'turn/completed' ||
-      method === 'error'
-    const shouldRefreshThreads =
-      method.startsWith('thread/') ||
-      method === 'turn/completed'
-
-    if (!shouldRefreshMessages && !shouldRefreshThreads) return
-
-    const threadId = extractThreadIdFromNotification(notification)
-    if (threadId && shouldRefreshMessages) {
-      pendingThreadMessageRefresh.add(threadId)
-    }
-
-    if (shouldRefreshThreads) {
-      pendingThreadsRefresh = true
-    }
-
-    if (eventSyncTimer !== null || typeof window === 'undefined') return
-    eventSyncTimer = window.setTimeout(() => {
-      eventSyncTimer = null
-      void syncFromNotifications()
-    }, EVENT_SYNC_DEBOUNCE_MS)
-  }
-
-  async function hydrateWorkspaceRootsStateIfNeeded(
-    groups: UiProjectGroup[],
-    rootsState: WorkspaceRootsState | null,
-  ): Promise<void> {
-    if (hasHydratedWorkspaceRootsState) return
-    hasHydratedWorkspaceRootsState = true
-
-    try {
-      if (!rootsState) return
-      const hydratedOrder: string[] = []
-      for (const rootPath of getWorkspaceProjectOrderPaths(rootsState)) {
-        const projectName = toProjectNameFromWorkspaceRoot(rootPath)
-        if (hydratedOrder.includes(projectName)) continue
-        hydratedOrder.push(projectName)
-      }
-
-      if (hydratedOrder.length > 0) {
-        const mergedOrder = rootsState.projectOrder.length > 0
-          ? mergeProjectOrder(hydratedOrder, groups)
-          : mergeProjectOrder(projectOrder.value, groups)
-        if (!areStringArraysEqual(projectOrder.value, mergedOrder)) {
-          projectOrder.value = mergedOrder
-        }
-      }
-
-      if (Object.keys(rootsState.labels).length > 0 || (rootsState.remoteProjects ?? []).length > 0) {
-        const nextLabels = { ...projectDisplayNameById.value }
-        let changed = false
-        for (const [rootPath, label] of Object.entries(rootsState.labels)) {
-          const normalizedRootPath = normalizePathForUi(rootPath).trim()
-          const projectNames = [toProjectNameFromWorkspaceRoot(rootPath)]
-          if (normalizedRootPath) projectNames.push(normalizedRootPath)
-          for (const projectName of projectNames) {
-            if (nextLabels[projectName] === label) continue
-            nextLabels[projectName] = label
-            changed = true
-          }
-        }
-        for (const rootPath of rootsState.order) {
-          const leafName = toProjectNameFromWorkspaceRoot(rootPath)
-          const parentLeafName = toProjectName(getPathParent(rootPath))
-          if (!parentLeafName.startsWith('.') || parentLeafName === leafName) continue
-          const displayName = `${leafName} ${parentLeafName}`
-          if (nextLabels[leafName] !== undefined || nextLabels[leafName] === displayName) continue
-          nextLabels[leafName] = displayName
-          changed = true
-        }
-        for (const remoteProject of rootsState.remoteProjects ?? []) {
-          const label = getRemoteProjectDisplayName(remoteProject)
-          if (nextLabels[remoteProject.id] === label) continue
-          nextLabels[remoteProject.id] = label
-          changed = true
-        }
-        if (changed) {
-          projectDisplayNameById.value = nextLabels
-        }
-      }
-    } catch {
-      // Keep local storage fallback when global state is unavailable.
-    }
-  }
-
-  async function loadThreadTitleCacheIfNeeded(): Promise<void> {
-    if (Object.keys(threadTitleById.value).length > 0) return
-    try {
-      const cache = await getThreadTitleCache()
-      if (Object.keys(cache.titles).length > 0) {
-        threadTitleById.value = cache.titles
-      }
-    } catch {
-      // Title cache is optional; keep UI functional.
-    }
-  }
-
-  async function loadWorkspaceRootsStateForThreadList(): Promise<WorkspaceRootsState | null> {
-    try {
-      return await getWorkspaceRootsState()
-    } catch {
-      return null
-    }
-  }
-
-  async function requestThreadTitleGeneration(threadId: string, prompt: string, cwd: string | null): Promise<void> {
-    if (threadTitleById.value[threadId]) return
-    const trimmed = prompt.trim()
-    if (!trimmed) return
-    const truncated = trimmed.length > 300 ? trimmed.slice(0, 300) : trimmed
-    try {
-      const title = await generateThreadTitle(truncated, cwd)
-      if (!title || threadTitleById.value[threadId]) return
-      threadTitleById.value = { ...threadTitleById.value, [threadId]: title }
-      applyThreadFlags()
-      void persistThreadTitle(threadId, title)
-    } catch {
-      // Title generation is best-effort.
-    }
-  }
-
-  function filterGroupsByWorkspaceRoots(
-    groups: UiProjectGroup[],
-    rootsState: WorkspaceRootsState | null,
-  ): UiProjectGroup[] {
-    const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
-    const disambiguatedGroups = disambiguateProjectGroupsByCwd(groups, rootsState)
-    const groupsWithWorkspaceRoots = addWorkspaceRootPlaceholderGroups(disambiguatedGroups, rootsState, duplicateLeafNames)
-    if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groupsWithWorkspaceRoots
-    const allowedProjectNames = new Set<string>()
-    for (const projectName of getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)) {
-      allowedProjectNames.add(projectName)
-    }
-    const filteredGroups = groupsWithWorkspaceRoots.filter((group) => {
-      if (allowedProjectNames.has(group.projectName)) return true
-      return isProjectlessGroup(group)
-    })
-    return orderGroupsByWorkspaceProjectOrder(filteredGroups, rootsState, duplicateLeafNames)
-  }
-
-  function applyThreadGroups(groups: UiProjectGroup[], rootsState: WorkspaceRootsState | null): void {
-    const visibleGroups = filterGroupsByWorkspaceRoots(groups, rootsState)
-    const hasWorkspaceRootsState = Boolean(
-      rootsState && (rootsState.order.length > 0 || rootsState.projectOrder.length > 0 || (rootsState.remoteProjects ?? []).length > 0),
-    )
-
-    const nextProjectOrder = rootsState?.projectOrder.length
-      ? mergeProjectOrder(
-        getWorkspaceProjectOrderNames(rootsState, collectDuplicateProjectLeafNames(groups, rootsState)),
-        visibleGroups,
-      )
-      : mergeProjectOrder(projectOrder.value, visibleGroups)
-    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
-      projectOrder.value = nextProjectOrder
-      if (!hasWorkspaceRootsState) {
-        saveProjectOrder(projectOrder.value)
-      }
-    }
-
-    const orderedGroups = orderGroupsByProjectOrder(visibleGroups, projectOrder.value)
-    markServerListedThreads(new Set(flattenThreads(orderedGroups).map((thread) => thread.id)))
-    const mergedWithInProgress = mergeIncomingWithLocalInProgressThreads(
-      sourceGroups.value,
-      orderedGroups,
-      inProgressById.value,
-    )
-    sourceGroups.value = mergeThreadGroups(sourceGroups.value, mergedWithInProgress)
-    inProgressById.value = pruneThreadStateMap(
-      inProgressById.value,
-      new Set(flattenThreads(sourceGroups.value).map((thread) => thread.id)),
-    )
-    applyThreadFlags()
-  }
-
-  function normalizeQueueStateForPersistence(state: Record<string, QueuedMessage[]>): ThreadQueueState {
-    const next: ThreadQueueState = {}
-    for (const [threadId, queue] of Object.entries(state)) {
-      const normalizedThreadId = threadId.trim()
-      if (!normalizedThreadId || queue.length === 0) continue
-      next[normalizedThreadId] = queue.map((message) => ({
-        id: message.id,
-        text: message.text,
-        imageUrls: [...message.imageUrls],
-        skills: message.skills.map((skill) => ({ name: skill.name, path: skill.path })),
-        fileAttachments: message.fileAttachments.map((attachment) => ({
-          label: attachment.label,
-          path: attachment.path,
-          fsPath: attachment.fsPath,
-        })),
-        collaborationMode: message.collaborationMode,
-      }))
-    }
-    return next
-  }
-
-  function persistQueueState(): void {
-    void setThreadQueueState(normalizeQueueStateForPersistence(queuedMessagesByThreadId.value)).catch(() => {
-      // Queue persistence is best-effort; keep the current in-memory queue usable.
-    })
-  }
-
-  async function loadPersistedQueueStateIfNeeded(): Promise<void> {
-    if (hasLoadedPersistedQueueState) return
-    hasLoadedPersistedQueueState = true
-    try {
-      queuedMessagesByThreadId.value = await getThreadQueueState()
-    } catch {
-      // Backend queue state is optional during startup.
-    }
-  }
-
-  function removeArchivedThreadFromLoadedLists(threadId: string): void {
-    loadedThreadListGroups = removeThreadFromGroups(loadedThreadListGroups, threadId)
-    sourceGroups.value = removeThreadFromGroups(sourceGroups.value, threadId)
-    inProgressById.value = omitKey(inProgressById.value, threadId)
-    applyThreadFlags()
-  }
-
-  function mergeThreadGroupPages(previous: UiProjectGroup[], incoming: UiProjectGroup[]): UiProjectGroup[] {
-    if (previous.length === 0) return incoming
-    if (incoming.length === 0) return previous
-
-    const threadById = new Map<string, UiThread>()
-    for (const thread of flattenThreads(previous)) {
-      threadById.set(thread.id, thread)
-    }
-    for (const thread of flattenThreads(incoming)) {
-      threadById.set(thread.id, thread)
-    }
-    const groupsByProject = new Map<string, UiThread[]>()
-    for (const thread of threadById.values()) {
-      const existing = groupsByProject.get(thread.projectName)
-      if (existing) existing.push(thread)
-      else groupsByProject.set(thread.projectName, [thread])
-    }
-
-    return Array.from(groupsByProject.entries())
-      .map(([projectName, threads]) => ({
-        projectName,
-        threads: threads.sort(
-          (first, second) => new Date(second.updatedAtIso).getTime() - new Date(first.updatedAtIso).getTime(),
-        ),
-      }))
-      .sort((first, second) => {
-        const firstUpdated = new Date(first.threads[0]?.updatedAtIso ?? 0).getTime()
-        const secondUpdated = new Date(second.threads[0]?.updatedAtIso ?? 0).getTime()
-        return secondUpdated - firstUpdated
-      })
-  }
-
-  function hasActiveInProgressThreads(): boolean {
-    return Object.values(inProgressById.value).some((value) => value === true)
-  }
-
-  function scheduleRemainingThreadPages(rootsState: WorkspaceRootsState | null = loadedThreadListRootsState): void {
-    if (!threadListNextCursor || isLoadingRemainingThreadPages || hasActiveInProgressThreads()) return
-
-    loadedThreadListRootsState = rootsState
-
-    if (typeof window === 'undefined') {
-      void loadRemainingThreadPages(rootsState)
-      return
-    }
-
-    if (threadListBackgroundTimer !== null) {
-      window.clearTimeout(threadListBackgroundTimer)
-    }
-
-    threadListBackgroundTimer = window.setTimeout(() => {
-      threadListBackgroundTimer = null
-      if (!threadListNextCursor || hasActiveInProgressThreads()) return
-      void loadRemainingThreadPages(loadedThreadListRootsState)
-    }, BACKGROUND_THREAD_PAGINATION_DELAY_MS)
-  }
-
-  async function loadRemainingThreadPages(rootsState: WorkspaceRootsState | null): Promise<void> {
-    if (isLoadingRemainingThreadPages || !threadListNextCursor || hasActiveInProgressThreads()) return
-    isLoadingRemainingThreadPages = true
-
-    try {
-      const page = await getThreadGroupsPage(threadListNextCursor, getBackgroundThreadListLimit())
-      threadListNextCursor = page.nextCursor
-      hasLoadedAllThreadPages = page.nextCursor === null
-      isThreadListFullyLoaded.value = hasLoadedAllThreadPages
-      loadedThreadListGroups = mergeThreadGroupPages(loadedThreadListGroups, page.groups)
-      applyThreadGroups(loadedThreadListGroups, rootsState)
-    } catch {
-      // Keep the first page usable; a later refresh can retry remaining pages.
-    } finally {
-      isLoadingRemainingThreadPages = false
-      if (threadListNextCursor && !hasActiveInProgressThreads()) {
-        scheduleRemainingThreadPages(rootsState)
-      }
-    }
-  }
-
-  async function loadThreads() {
-    if (loadThreadsPromise) {
-      await loadThreadsPromise
-      return
-    }
-
-    loadThreadsPromise = (async () => {
-    if (!hasLoadedThreads.value) {
-      isLoadingThreads.value = true
-    }
-
-    try {
-      const [page, rootsState] = await Promise.all([
-        getThreadGroupsPage(),
-        loadWorkspaceRootsStateForThreadList(),
-        loadThreadTitleCacheIfNeeded(),
-      ])
-      loadedThreadListRootsState = rootsState
-      const groups = page.groups
-      loadedThreadListGroups = hasLoadedThreads.value
-        ? mergeThreadGroupPages(loadedThreadListGroups, groups)
-        : groups
-      threadListNextCursor = hasLoadedThreads.value && !hasLoadedAllThreadPages
-        ? threadListNextCursor
-        : page.nextCursor
-      hasLoadedAllThreadPages = page.nextCursor === null
-      isThreadListFullyLoaded.value = hasLoadedAllThreadPages
-      await hydrateWorkspaceRootsStateIfNeeded(groups, rootsState)
-
-      applyThreadGroups(loadedThreadListGroups, rootsState)
-      hasLoadedThreads.value = true
-      if (!hasLoadedAllThreadPages) {
-        scheduleRemainingThreadPages(rootsState)
-      }
-
-      const flatThreads = flattenThreads(projectGroups.value)
-      pruneThreadScopedState(flatThreads)
-
-      const currentExists = flatThreads.some((thread) => thread.id === selectedThreadId.value)
-
-      if (!currentExists && !selectedThreadId.value) {
-        setSelectedThreadId(flatThreads[0]?.id ?? '')
-      }
-    } finally {
-      isLoadingThreads.value = false
-    }
-    })().finally(() => {
-      loadThreadsPromise = null
-    })
-
-    await loadThreadsPromise
-  }
-
-  async function loadMessages(threadId: string, options: { silent?: boolean } = {}) {
-    if (!threadId) {
-      return
-    }
-
-    const existingLoad = loadMessagePromiseByThreadId.get(threadId)
-    if (existingLoad) {
-      await existingLoad
-      return
-    }
-
-    const alreadyLoaded = loadedMessagesByThreadId.value[threadId] === true
-    const shouldShowLoading = options.silent !== true && !alreadyLoaded
-    if (shouldShowLoading) {
-      isLoadingMessages.value = true
-    }
-
-    const loadPromise = (async () => {
-      try {
-      const version = currentThreadVersion(threadId)
-      const loadedVersion = loadedVersionByThreadId.value[threadId] ?? ''
-      const loadedRecently =
-        Date.now() - (lastMessageLoadAtByThreadId.get(threadId) ?? 0) < RECENT_THREAD_MESSAGE_LOAD_REUSE_MS
-      const canReuseLoadedMessages =
-        alreadyLoaded &&
-        (
-          loadedRecently ||
-          (
-            (version.length === 0 || loadedVersion === version) &&
-            inProgressById.value[threadId] !== true
-          )
-        )
-
-      if (canReuseLoadedMessages) {
-        markThreadAsRead(threadId)
-        return
-      }
-
-      const needsResume = resumedThreadById.value[threadId] !== true
-      const resumedThread = needsResume ? await resumeThread(threadId) : null
-      const detail = resumedThread ?? await getThreadDetail(threadId)
-
-      if (resumedThread) {
-        setThreadModelId(threadId, resumedThread.model)
-        resumedThreadById.value = {
-          ...resumedThreadById.value,
-          [threadId]: true,
-        }
-      }
-
-      const { messages: nextMessages, inProgress, activeTurnId, turnIndexByTurnId } = detail
-      hasMoreOlderMessagesByThreadId.value = {
-        ...hasMoreOlderMessagesByThreadId.value,
-        [threadId]: detail.hasMoreOlder === true,
-      }
-      markThreadMessagesPersisted(threadId, nextMessages)
-      replaceTurnIndexLookupForThread(threadId, turnIndexByTurnId)
-      rebindLiveFileChangeTurnIndices(threadId)
-      const previousPersisted = persistedMessagesByThreadId.value[threadId] ?? []
-      const mergedMessages = mergeMessages(previousPersisted, nextMessages, {
-        preserveMissing: options.silent === true,
-      })
-      setPersistedMessagesForThread(threadId, mergedMessages)
-
-      const previousLiveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
-      if (inProgress) {
-        const nextLiveAgent = removeRedundantLiveAgentMessages(previousLiveAgent, nextMessages)
-        setLiveAgentMessagesForThread(threadId, nextLiveAgent)
-      } else {
-        clearLiveAgentMessagesForThread(threadId)
-      }
-      removeLiveCommandsPersistedIn(threadId, nextMessages)
-      removeLiveFileChangesPersistedIn(threadId, nextMessages)
-
-      loadedMessagesByThreadId.value = {
-        ...loadedMessagesByThreadId.value,
-        [threadId]: true,
-      }
-      lastMessageLoadAtByThreadId.set(threadId, Date.now())
-
-      if (version) {
-        loadedVersionByThreadId.value = {
-          ...loadedVersionByThreadId.value,
-          [threadId]: version,
-        }
-      }
-      setThreadInProgress(threadId, inProgress)
-      if (activeTurnId) {
-        activeTurnIdByThreadId.value = {
-          ...activeTurnIdByThreadId.value,
-          [threadId]: activeTurnId,
-        }
-      } else if (activeTurnIdByThreadId.value[threadId]) {
-        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
-      }
-      if (!inProgress) {
-        clearCompletedTurnLiveState(threadId)
-      }
-      markThreadAsRead(threadId)
-      } finally {
-      if (shouldShowLoading) {
-        isLoadingMessages.value = false
-      }
-      }
-    })().finally(() => {
-      loadMessagePromiseByThreadId.delete(threadId)
-    })
-
-    loadMessagePromiseByThreadId.set(threadId, loadPromise)
-    await loadPromise
-  }
-
-  async function loadOlderMessages(threadId: string = selectedThreadId.value): Promise<void> {
-    if (!threadId) return
-    if (loadingOlderMessagesByThreadId.value[threadId] === true) return
-    if (hasMoreOlderMessagesByThreadId.value[threadId] !== true) return
-
-    const beforeTurnId = getFirstPersistedTurnId(threadId)
-    if (!beforeTurnId) {
-      hasMoreOlderMessagesByThreadId.value = {
-        ...hasMoreOlderMessagesByThreadId.value,
-        [threadId]: false,
-      }
-      return
-    }
-
-    loadingOlderMessagesByThreadId.value = {
-      ...loadingOlderMessagesByThreadId.value,
-      [threadId]: true,
-    }
-
-    try {
-      const page = await getOlderThreadMessages(threadId, beforeTurnId)
-      const previousPersisted = persistedMessagesByThreadId.value[threadId] ?? []
-      const mergedMessages = mergeMessages(page.messages, previousPersisted, { preserveMissing: true })
-      setPersistedMessagesForThread(threadId, mergedMessages)
-      replaceTurnIndexLookupForThread(threadId, {
-        ...(turnIndexByTurnIdByThreadId.value[threadId] ?? {}),
-        ...page.turnIndexByTurnId,
-      })
-      rebindLiveFileChangeTurnIndices(threadId)
-      hasMoreOlderMessagesByThreadId.value = {
-        ...hasMoreOlderMessagesByThreadId.value,
-        [threadId]: page.hasMoreOlder,
-      }
-    } catch (loadError) {
-      error.value = loadError instanceof Error ? loadError.message : 'Failed to load earlier messages'
-      throw loadError
-    } finally {
-      loadingOlderMessagesByThreadId.value = {
-        ...loadingOlderMessagesByThreadId.value,
-        [threadId]: false,
-      }
-    }
-  }
-
-  async function ensureThreadMessagesLoaded(threadId: string, options: { silent?: boolean } = {}): Promise<void> {
-    if (!threadId) return
-    if (loadedMessagesByThreadId.value[threadId] === true) return
-    await loadMessages(threadId, options)
-  }
-
-  async function refreshSkills(): Promise<void> {
-    if (refreshSkillsPromise) {
-      await refreshSkillsPromise
-      return
-    }
-
-    refreshSkillsPromise = (async () => {
-      try {
-        const selectedCwd = selectedThread.value?.cwd?.trim() ?? ''
-        installedSkills.value = await getSkillsList(selectedCwd ? [selectedCwd] : undefined)
-      } catch {
-        // keep previous skills on failure
-      } finally {
-        refreshSkillsPromise = null
-      }
-    })()
-
-    await refreshSkillsPromise
-  }
-
-  async function refreshAncillaryState(
-    options: { providerChanged?: boolean; includeProviderModels?: boolean } = {},
-  ): Promise<void> {
-    await Promise.allSettled([
-      refreshModelPreferences({
-        providerChanged: options.providerChanged,
-        includeProviderModels: options.includeProviderModels,
-      }),
-      refreshRateLimits(),
-      refreshCollaborationModes(),
-      refreshSkills(),
-    ])
-  }
-
-  function scheduleAncillaryStateRefresh(
-    options: { providerChanged?: boolean; includeProviderModels?: boolean } = {},
-  ): void {
-    const run = () => {
-      void refreshAncillaryState(options)
-    }
-
-    if (typeof window === 'undefined') {
-      run()
-      return
-    }
-
-    window.setTimeout(run, 0)
-  }
-
-  async function refreshAll(
-    options: { includeSelectedThreadMessages?: boolean; awaitAncillaryRefreshes?: boolean; providerChanged?: boolean } = {},
-  ) {
-    error.value = ''
-    const includeSelectedThreadMessages = options.includeSelectedThreadMessages !== false
-    const awaitAncillaryRefreshes = options.awaitAncillaryRefreshes === true
-
-    try {
-      await loadPersistedQueueStateIfNeeded()
-      await loadThreads()
-      if (includeSelectedThreadMessages) {
-        await loadMessages(selectedThreadId.value)
-      }
-      if (awaitAncillaryRefreshes) {
-        await refreshAncillaryState({
-          providerChanged: options.providerChanged,
-          includeProviderModels: options.providerChanged === true || awaitAncillaryRefreshes,
-        })
-      } else {
-        scheduleAncillaryStateRefresh({
-          providerChanged: options.providerChanged,
-          includeProviderModels: false,
-        })
-      }
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-    }
-  }
-
-  async function selectThread(threadId: string) {
-    setSelectedThreadId(threadId)
-
-    try {
-      await loadMessages(threadId)
-      void refreshSkills()
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-    }
-  }
-
-  async function archiveThreadById(threadId: string) {
-    const wasSelectedThread = selectedThreadId.value === threadId
-    const nextSelectedThreadId = wasSelectedThread
-      ? findAdjacentThreadId(flattenThreads(projectGroups.value), threadId)
-      : ''
-
-    if (wasSelectedThread) {
-      setSelectedThreadId(nextSelectedThreadId)
-      if (nextSelectedThreadId) {
-        void loadMessages(nextSelectedThreadId, { silent: true })
-      }
-    }
-
-    try {
-      await archiveThread(threadId)
-      removeArchivedThreadFromLoadedLists(threadId)
-      await loadThreads()
-
-      if (wasSelectedThread && nextSelectedThreadId && selectedThreadId.value === nextSelectedThreadId) {
-        await ensureThreadMessagesLoaded(nextSelectedThreadId, { silent: true })
-      }
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-    }
-  }
-
-  async function renameThreadById(threadId: string, threadName: string) {
-    const normalizedName = threadName.trim()
-    if (!threadId || !normalizedName) return
-
-    try {
-      await renameThread(threadId, normalizedName)
-      threadTitleById.value = { ...threadTitleById.value, [threadId]: normalizedName }
-      applyThreadFlags()
-      void persistThreadTitle(threadId, normalizedName)
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-    }
-  }
-
-  async function forkThreadById(threadId: string): Promise<string> {
-    const sourceThreadId = threadId.trim()
-    if (!sourceThreadId) return ''
-
-    const sourceThread = flattenThreads(sourceGroups.value).find((row) => row.id === sourceThreadId)
-    const sourceCwd = sourceThread?.cwd?.trim() ?? ''
-    const sourceTitle = sourceThread?.title?.trim() ?? 'Forked chat'
-    const selectedModel = readModelIdForThread(sourceThreadId)
-    error.value = ''
-
-    try {
-      const forkedThread = await forkThread(sourceThreadId, sourceCwd || undefined, selectedModel || undefined)
-      const nextThreadId = forkedThread.threadId.trim()
-      if (!nextThreadId) return ''
-
-      insertOptimisticThread(nextThreadId, sourceCwd, sourceTitle)
-      setThreadModelId(nextThreadId, forkedThread.model)
-      resumedThreadById.value = {
-        ...resumedThreadById.value,
-        [nextThreadId]: true,
-      }
-      setSelectedThreadId(nextThreadId)
-      await loadThreads()
-      await loadMessages(nextThreadId)
-      return nextThreadId
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-      return ''
-    }
-  }
-
-  async function forkThreadFromTurn(threadId: string, turnIndex: number): Promise<string> {
-    const normalizedThreadId = threadId.trim()
-    if (!normalizedThreadId || !Number.isInteger(turnIndex) || turnIndex < 0) return ''
-
-    if (inProgressById.value[normalizedThreadId] === true) {
-      error.value = 'Finish the current turn before forking from a response.'
-      return ''
-    }
-
-    if (loadedMessagesByThreadId.value[normalizedThreadId] !== true) {
-      try {
-        await loadMessages(normalizedThreadId)
-      } catch (unknownError) {
-        error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-        return ''
-      }
-    }
-
-    const sourceMessages = persistedMessagesByThreadId.value[normalizedThreadId] ?? []
-    let lastTurnIndex = -1
-    for (const message of sourceMessages) {
-      if (typeof message.turnIndex === 'number' && Number.isFinite(message.turnIndex)) {
-        lastTurnIndex = Math.max(lastTurnIndex, message.turnIndex)
-      }
-    }
-
-    if (lastTurnIndex >= 0 && turnIndex > lastTurnIndex) return ''
-
-    const sourceThread = flattenThreads(sourceGroups.value).find((row) => row.id === normalizedThreadId) ?? null
-
-    try {
-      error.value = ''
-      const forked = await forkThread(normalizedThreadId)
-      const forkedThreadId = forked.threadId.trim()
-      if (!forkedThreadId) return ''
-
-      const forkedCwd = forked.cwd.trim() || sourceThread?.cwd?.trim() || ''
-      const forkedThreadTitle = toForkedThreadTitle(sourceThread?.title || sourceThread?.preview || 'Untitled thread')
-      insertOptimisticThread(forkedThreadId, forkedCwd, forkedThreadTitle)
-      setThreadModelId(forkedThreadId, forked.model)
-      setPersistedMessagesForThread(forkedThreadId, forked.messages)
-      loadedMessagesByThreadId.value = {
-        ...loadedMessagesByThreadId.value,
-        [forkedThreadId]: true,
-      }
-      resumedThreadById.value = {
-        ...resumedThreadById.value,
-        [forkedThreadId]: true,
-      }
-      clearLivePlansForThread(forkedThreadId)
-      setLiveAgentMessagesForThread(forkedThreadId, [])
-      clearLiveReasoningForThread(forkedThreadId)
-      if (liveCommandsByThreadId.value[forkedThreadId]) {
-        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, forkedThreadId)
-      }
-      setTurnSummaryForThread(forkedThreadId, null)
-      setTurnActivityForThread(forkedThreadId, null)
-      setTurnErrorForThread(forkedThreadId, null)
-      setThreadInProgress(forkedThreadId, false)
-
-      const turnsToRollback = lastTurnIndex - turnIndex
-      if (turnsToRollback > 0) {
-        const rolledBackMessages = await rollbackThread(forkedThreadId, turnsToRollback)
-        setPersistedMessagesForThread(forkedThreadId, rolledBackMessages)
-      }
-
-      await renameThreadById(forkedThreadId, forkedThreadTitle)
-      setSelectedThreadId(forkedThreadId)
-      void loadThreads().catch(() => {})
-      return forkedThreadId
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-      return ''
-    }
-  }
-
-  async function maybeReplyToPendingUserInputRequest(
-    threadId: string,
-    text: string,
-    imageUrls: string[] = [],
-    skills: Array<{ name: string; path: string }> = [],
-    fileAttachments: FileAttachment[] = [],
-  ): Promise<boolean> {
-    if (!threadId || !text.trim()) return false
-    if (imageUrls.length > 0 || skills.length > 0 || fileAttachments.length > 0) return false
-
-    const requests = pendingServerRequestsByThreadId.value[threadId] ?? []
-    const userInputRequests = requests.filter((request) => request.method === 'item/tool/requestUserInput')
-    if (userInputRequests.length !== 1) return false
-
-    const [request] = userInputRequests
-    const questionIds = readToolRequestUserInputQuestionIds(request)
-    if (questionIds.length !== 1) return false
-
-    return respondToPendingServerRequest({
-      id: request.id,
-      result: {
-        answers: {
-          [questionIds[0]]: {
-            answers: [text.trim()],
-          },
-        },
-      },
-    })
-  }
-
-  async function sendMessageToSelectedThread(
-    text: string,
-    imageUrls: string[] = [],
-    skills: Array<{ name: string; path: string }> = [],
-    mode: 'steer' | 'queue' = 'steer',
-    fileAttachments: FileAttachment[] = [],
-    queueInsertIndex?: number,
-    collaborationModeOverride?: CollaborationModeKind,
-  ): Promise<void> {
-    if (isUpdatingSpeedMode.value) return
-
-    const threadId = selectedThreadId.value
-    const nextText = text.trim()
-    if (!threadId || (!nextText && imageUrls.length === 0 && fileAttachments.length === 0)) return
-
-    if (await maybeReplyToPendingUserInputRequest(threadId, nextText, imageUrls, skills, fileAttachments)) {
-      return
-    }
-
-    const isInProgress = inProgressById.value[threadId] === true
-
-    if (isInProgress && mode === 'queue') {
-      const queue = queuedMessagesByThreadId.value[threadId] ?? []
-      const id = `q-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-      const nextQueue = [...queue]
-      const insertIndex = typeof queueInsertIndex === 'number'
-        ? Math.max(0, Math.min(queueInsertIndex, nextQueue.length))
-        : nextQueue.length
-      nextQueue.splice(insertIndex, 0, {
-        id,
-        text: nextText,
-        imageUrls,
-        skills,
-        fileAttachments,
-        collaborationMode: collaborationModeOverride === 'plan'
-          ? 'plan'
-          : collaborationModeOverride === 'default'
-            ? 'default'
-            : selectedCollaborationMode.value,
-      })
-      queuedMessagesByThreadId.value = {
-        ...queuedMessagesByThreadId.value,
-        [threadId]: nextQueue,
-      }
-      persistQueueState()
-      return
-    }
-
-    if (isInProgress) {
-      shouldAutoScrollOnNextAgentEvent = true
-      void startTurnForThread(
-        threadId,
-        nextText,
-        imageUrls,
-        skills,
-        fileAttachments,
-        collaborationModeOverride,
-      ).catch((unknownError) => {
-        const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-        setTurnErrorForThread(threadId, errorMessage)
-        error.value = errorMessage
-      })
-      return
-    }
-
-    error.value = ''
-    shouldAutoScrollOnNextAgentEvent = true
-    setTurnSummaryForThread(threadId, null)
-    setTurnActivityForThread(
-      threadId,
-      {
-        label: 'Thinking',
-        details: buildPendingTurnDetails(
-          readModelIdForThread(threadId),
-          selectedReasoningEffort.value,
-          collaborationModeOverride === 'plan'
-            ? 'plan'
-            : collaborationModeOverride === 'default'
-              ? 'default'
-              : selectedCollaborationMode.value,
-        ),
-      },
-    )
-    setTurnErrorForThread(threadId, null)
-    setThreadInProgress(threadId, true)
-
-    try {
-      await startTurnForThread(
-        threadId,
-        nextText,
-        imageUrls,
-        skills,
-        fileAttachments,
-        collaborationModeOverride,
-      )
-    } catch (unknownError) {
-      shouldAutoScrollOnNextAgentEvent = false
-      setThreadInProgress(threadId, false)
-      setTurnActivityForThread(threadId, null)
-      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-      setTurnErrorForThread(threadId, errorMessage)
-      error.value = errorMessage
-      throw unknownError
-    }
-  }
-
-  async function sendMessageToNewThread(
-    text: string,
-    cwd: string,
-    imageUrls: string[] = [],
-    skills: Array<{ name: string; path: string }> = [],
-    fileAttachments: FileAttachment[] = [],
-  ): Promise<string> {
-    if (isUpdatingSpeedMode.value) return ''
-
-    const nextText = text.trim()
-    const targetCwd = cwd.trim()
-    const selectedModel = readModelIdForThread(NEW_THREAD_COLLABORATION_MODE_CONTEXT).trim()
-    const selectedMode = selectedCollaborationMode.value
-    if (!nextText && imageUrls.length === 0 && fileAttachments.length === 0) return ''
-
-    isSendingMessage.value = true
-    error.value = ''
-    let threadId = ''
-
-    try {
-      try {
-        const startedThread = await startThread(targetCwd || undefined, selectedModel || undefined)
-        threadId = startedThread.threadId
-        setThreadModelId(threadId, startedThread.model)
-        setSelectedCollaborationModeForThread(threadId, selectedMode)
-      } catch (unknownError) {
-        if (selectedModel && selectedModel !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(unknownError)) {
-          await applyFallbackModelSelection()
-          const fallbackThread = await startThread(targetCwd || undefined, MODEL_FALLBACK_ID)
-          threadId = fallbackThread.threadId
-          setThreadModelId(threadId, fallbackThread.model)
-          setSelectedCollaborationModeForThread(threadId, selectedMode)
-        } else {
-          throw unknownError
-        }
-      }
-      if (!threadId) return ''
-
-      insertOptimisticThread(threadId, targetCwd, nextText || '[Image]')
-      blockInterruptUntilThreadIsPersisted(threadId)
-      resumedThreadById.value = {
-        ...resumedThreadById.value,
-        [threadId]: true,
-      }
-      setSelectedThreadId(threadId)
-      shouldAutoScrollOnNextAgentEvent = true
-      setTurnSummaryForThread(threadId, null)
-      setTurnActivityForThread(
-        threadId,
-        {
-          label: 'Thinking',
-          details: buildPendingTurnDetails(
-            readModelIdForThread(threadId),
-            selectedReasoningEffort.value,
-            selectedMode,
-          ),
-        },
-      )
-      setTurnErrorForThread(threadId, null)
-      setThreadInProgress(threadId, true)
-      const capturedThreadId = threadId
-      const capturedCwd = targetCwd || null
-      const capturedPrompt = nextText
-      void startTurnForThread(threadId, nextText, imageUrls, skills, fileAttachments, selectedMode)
-        .catch((unknownError) => {
-          shouldAutoScrollOnNextAgentEvent = false
-          setThreadInProgress(threadId, false)
-          setTurnActivityForThread(threadId, null)
-          const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-          setTurnErrorForThread(threadId, errorMessage)
-          error.value = errorMessage
-        })
-        .finally(() => {
-          isSendingMessage.value = false
-        })
-      void requestThreadTitleGeneration(capturedThreadId, capturedPrompt, capturedCwd)
-      return threadId
-    } catch (unknownError) {
-      shouldAutoScrollOnNextAgentEvent = false
-      if (threadId) {
-        setThreadInProgress(threadId, false)
-        setTurnActivityForThread(threadId, null)
-      }
-      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
-      if (threadId) {
-        setTurnErrorForThread(threadId, errorMessage)
-      }
-      error.value = errorMessage
-      isSendingMessage.value = false
-      throw unknownError
-    }
-  }
-
-  async function startTurnForThread(
-    threadId: string,
-    nextText: string,
-    imageUrls: string[] = [],
-    skills: Array<{ name: string; path: string }> = [],
-    fileAttachments: FileAttachment[] = [],
-    collaborationModeOverride?: CollaborationModeKind,
-  ): Promise<void> {
-    const reasoningEffort = selectedReasoningEffort.value
-    const collaborationMode = collaborationModeOverride === 'plan' ? 'plan' : collaborationModeOverride === 'default'
-      ? 'default'
-      : selectedCollaborationMode.value
-    const normalizedText = nextText.trim()
-    const normalizedImageUrls = [...imageUrls]
-    if (
-      normalizedImageUrls.length === 0
-      && shouldReuseAttachedImageFromPrompt(normalizedText)
-    ) {
-      const latestAttachedImageUrl = findLatestUserLocalImageUrl(threadId)
-      if (latestAttachedImageUrl) {
-        normalizedImageUrls.push(latestAttachedImageUrl)
-      }
-    }
-    const normalizedSkills = skills.map((skill) => ({ name: skill.name, path: skill.path }))
-    const normalizedFileAttachments = fileAttachments.map((file) => ({ ...file }))
-
-    setPendingTurnRequest(threadId, {
-      text: normalizedText,
-      imageUrls: [...normalizedImageUrls],
-      skills: normalizedSkills,
-      fileAttachments: normalizedFileAttachments,
-      effort: reasoningEffort,
-      collaborationMode,
-      fallbackRetried: false,
-    })
-
-    try {
-      if (resumedThreadById.value[threadId] !== true) {
-        const resumedThread = await resumeThread(threadId)
-        setThreadModelId(threadId, resumedThread.model)
-      }
-      const modelId = readModelIdForThread(threadId)
-
-      let startedTurnId = ''
-      try {
-        startedTurnId = await startThreadTurn(
-          threadId,
-          nextText,
-          normalizedImageUrls,
-          modelId || undefined,
-          reasoningEffort || undefined,
-          skills.length > 0 ? skills : undefined,
-          fileAttachments,
-          collaborationMode,
-        )
-      } catch (unknownError) {
-        if (modelId && modelId !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(unknownError)) {
-          await applyFallbackModelSelection(threadId)
-          setPendingTurnRequest(threadId, {
-            text: normalizedText,
-            imageUrls: [...normalizedImageUrls],
-            skills: normalizedSkills,
-            fileAttachments: normalizedFileAttachments,
-            effort: reasoningEffort,
-            collaborationMode,
-            fallbackRetried: true,
-          })
-          startedTurnId = await startThreadTurn(
-            threadId,
-            nextText,
-            normalizedImageUrls,
-            MODEL_FALLBACK_ID,
-            reasoningEffort || undefined,
-            skills.length > 0 ? skills : undefined,
-            fileAttachments,
-            collaborationMode,
-          )
-        } else {
-          throw unknownError
-        }
-      }
-
-      if (startedTurnId) {
-        activeTurnIdByThreadId.value = {
-          ...activeTurnIdByThreadId.value,
-          [threadId]: startedTurnId,
-        }
-        maybeUnblockInterruptForActiveTurn(threadId, startedTurnId)
-      }
-
-      resumedThreadById.value = {
-        ...resumedThreadById.value,
-        [threadId]: true,
-      }
-
-      pendingThreadMessageRefresh.add(threadId)
-      await syncFromNotifications()
-      scheduleDelayedTurnSync(threadId)
-    } catch (unknownError) {
-      throw unknownError
-    }
-  }
-
-  async function processQueuedMessages(threadId: string): Promise<void> {
-    if (queueProcessingByThreadId.value[threadId] === true) return
-    queueProcessingByThreadId.value = {
-      ...queueProcessingByThreadId.value,
-      [threadId]: true,
-    }
-    try {
-      queuedMessagesByThreadId.value = await getThreadQueueState()
-    } catch {
-      // Backend queue state is optional during transient bridge failures.
-    } finally {
-      queueProcessingByThreadId.value = omitKey(queueProcessingByThreadId.value, threadId)
-    }
-  }
-
-  function scheduleQueueStateRefresh(threadId: string): void {
-    void processQueuedMessages(threadId)
-    if (typeof window === 'undefined') return
-    window.setTimeout(() => {
-      void processQueuedMessages(threadId)
-    }, 650)
-  }
-
-  async function interruptSelectedThreadTurn(): Promise<void> {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    if (inProgressById.value[threadId] !== true) return
-    if (interruptBlockedUntilPersistedByThreadId.value[threadId] === true) return
-    let turnId = activeTurnIdByThreadId.value[threadId]
-    if (!turnId) {
-      const { activeTurnId } = await getThreadDetail(threadId)
-      turnId = activeTurnId
-      if (turnId) {
-        activeTurnIdByThreadId.value = {
-          ...activeTurnIdByThreadId.value,
-          [threadId]: turnId,
-        }
-      }
-    }
-    if (!turnId) {
-      throw new Error('Could not determine active turn id for interrupt')
-    }
-
-    isInterruptingTurn.value = true
-    error.value = ''
-    try {
-      await interruptThreadTurn(threadId, turnId)
-      setThreadInProgress(threadId, false)
-      setTurnActivityForThread(threadId, null)
-      setTurnErrorForThread(threadId, null)
-      if (activeTurnIdByThreadId.value[threadId]) {
-        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
-      }
-      pendingThreadMessageRefresh.add(threadId)
-      pendingThreadsRefresh = true
-      await syncFromNotifications()
-    } catch (unknownError) {
-      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Failed to interrupt active turn'
-      setTurnErrorForThread(threadId, errorMessage)
-      error.value = errorMessage
-    } finally {
-      isInterruptingTurn.value = false
-    }
-  }
-
-  async function rollbackSelectedThread(turnId: string): Promise<void> {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    if (isRollingBack.value) return
-    if (!turnId.trim()) return
-
-    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    const matchedMessage = persisted.find((message) => message.turnId === turnId)
-    const turnIndex = typeof matchedMessage?.turnIndex === 'number' ? matchedMessage.turnIndex : -1
-    if (turnIndex < 0) return
-    const maxTurnIndex = persisted.reduce((max, m) => (typeof m.turnIndex === 'number' && m.turnIndex > max ? m.turnIndex : max), -1)
-    if (maxTurnIndex < 0 || turnIndex > maxTurnIndex) return
-    const numTurns = maxTurnIndex - turnIndex + 1
-    if (numTurns < 1) return
-
-    isRollingBack.value = true
-    error.value = ''
-    try {
-      const threadCwd = selectedThread.value?.cwd?.trim() ?? ''
-      if (threadCwd) {
-        await revertThreadFileChanges(threadId, turnId, threadCwd)
-      }
-      const nextMessages = await rollbackThread(threadId, numTurns)
-      setPersistedMessagesForThread(threadId, nextMessages)
-      setLiveAgentMessagesForThread(threadId, [])
-      clearLiveReasoningForThread(threadId)
-      if (liveCommandsByThreadId.value[threadId]) {
-        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
-      }
-      setTurnSummaryForThread(threadId, null)
-      setTurnActivityForThread(threadId, null)
-      setTurnErrorForThread(threadId, null)
-      pendingThreadsRefresh = true
-      await syncFromNotifications()
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to rollback thread'
-    } finally {
-      isRollingBack.value = false
-    }
-  }
-
-  let renameProjectTimer: ReturnType<typeof setTimeout> | null = null
-
-  async function persistProjectLabelToGlobalState(projectName: string, displayName: string): Promise<void> {
-    try {
-      const rootsState = await getWorkspaceRootsState()
-      const nextLabels = { ...rootsState.labels }
-      let changed = false
-      for (const rootPath of rootsState.order) {
-        if (!matchesWorkspaceRootProject(rootPath, projectName)) continue
-        const trimmed = displayName.trim()
-        if (trimmed.length === 0) {
-          if (nextLabels[rootPath] !== undefined) {
-            delete nextLabels[rootPath]
-            changed = true
-          }
-        } else if (nextLabels[rootPath] !== trimmed) {
-          nextLabels[rootPath] = trimmed
-          changed = true
-        }
-      }
-      if (changed) {
-        await setWorkspaceRootsState({
-          order: rootsState.order,
-          labels: nextLabels,
-          active: rootsState.active,
-          projectOrder: rootsState.projectOrder,
-        })
-      }
-    } catch {
-      // Keep localStorage-only rename when global state is unavailable.
-    }
-  }
-
-  function renameProject(projectName: string, displayName: string): void {
-    if (projectName.length === 0) return
-
-    const currentValue = projectDisplayNameById.value[projectName] ?? ''
-    if (currentValue === displayName) return
-
-    projectDisplayNameById.value = {
-      ...projectDisplayNameById.value,
-      [projectName]: displayName,
-    }
-    saveProjectDisplayNames(projectDisplayNameById.value)
-
-    if (renameProjectTimer !== null) clearTimeout(renameProjectTimer)
-    renameProjectTimer = setTimeout(() => {
-      renameProjectTimer = null
-      void persistProjectLabelToGlobalState(projectName, displayName)
-    }, 500)
-  }
-
-  async function removeProject(projectName: string): Promise<void> {
-    if (projectName.length === 0) return
-
-    const nextProjectOrder = projectOrder.value.filter((name) => name !== projectName)
-    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
-      projectOrder.value = nextProjectOrder
-      saveProjectOrder(projectOrder.value)
-    }
-
-    sourceGroups.value = sourceGroups.value.filter((group) => group.projectName !== projectName)
-
-    if (projectDisplayNameById.value[projectName] !== undefined) {
-      const nextDisplayNames = { ...projectDisplayNameById.value }
-      delete nextDisplayNames[projectName]
-      projectDisplayNameById.value = nextDisplayNames
-      saveProjectDisplayNames(nextDisplayNames)
-    }
-
-    applyThreadFlags()
-
-    const flatThreads = flattenThreads(projectGroups.value)
-    pruneThreadScopedState(flatThreads)
-
-    const currentExists = flatThreads.some((thread) => thread.id === selectedThreadId.value)
-    if (!currentExists) {
-      setSelectedThreadId(flatThreads[0]?.id ?? '')
-    }
-
-    const removedRootPaths = new Set<string>()
-    try {
-      const rootsState = await getWorkspaceRootsState()
-      collectWorkspaceRootPathsForProjectRemoval(rootsState, projectName).forEach((rootPath) => {
-        removedRootPaths.add(rootPath)
-      })
-    } catch {
-      // Keep local-only removal when global state is unavailable.
-    }
-
-    if (removedRootPaths.size > 0) {
-      try {
-        const rootsState = await getWorkspaceRootsState()
-        const nextOrder = rootsState.order.filter((rootPath) => !removedRootPaths.has(rootPath))
-        const nextActive = rootsState.active.filter((rootPath) => !removedRootPaths.has(rootPath))
-        const fallbackActive = nextActive.length === 0 && nextOrder.length > 0
-          ? [nextOrder[0]]
-          : nextActive
-        await setWorkspaceRootsState({
-          order: nextOrder,
-          labels: omitKeys(rootsState.labels, removedRootPaths),
-          active: fallbackActive,
-          projectOrder: rootsState.projectOrder.filter((item) => item !== projectName && !removedRootPaths.has(item)),
-        })
-        return
-      } catch {
-        // Fall back to order-only persistence if direct removal fails.
-      }
-    }
-
-    await persistProjectOrderToWorkspaceRoots()
-  }
-
-  function reorderProject(projectName: string, toIndex: number): void {
-    if (projectName.length === 0) return
-    if (sourceGroups.value.length === 0) return
-
-    const visibleOrder = sourceGroups.value.map((group) => group.projectName)
-    const fromIndex = visibleOrder.indexOf(projectName)
-    if (fromIndex === -1) return
-
-    const clampedToIndex = Math.max(0, Math.min(toIndex, visibleOrder.length - 1))
-    const reorderedVisibleOrder = reorderStringArray(visibleOrder, fromIndex, clampedToIndex)
-    if (reorderedVisibleOrder === visibleOrder) return
-
-    const normalizedProjectOrder = mergeProjectOrder(reorderedVisibleOrder, sourceGroups.value)
-    projectOrder.value = normalizedProjectOrder
-    saveProjectOrder(projectOrder.value)
-
-    const orderedGroups = orderGroupsByProjectOrder(sourceGroups.value, projectOrder.value)
-    sourceGroups.value = mergeThreadGroups(sourceGroups.value, orderedGroups)
-    applyThreadFlags()
-    void persistProjectOrderToWorkspaceRoots()
-  }
-
-  function pinProjectToTop(projectName: string): void {
-    const normalizedName = projectName.trim()
-    if (!normalizedName) return
-    const nextOrder = [normalizedName, ...projectOrder.value.filter((name) => name !== normalizedName)]
-    if (areStringArraysEqual(projectOrder.value, nextOrder)) return
-    projectOrder.value = nextOrder
-    saveProjectOrder(projectOrder.value)
-
-    const orderedGroups = orderGroupsByProjectOrder(sourceGroups.value, projectOrder.value)
-    sourceGroups.value = mergeThreadGroups(sourceGroups.value, orderedGroups)
-    applyThreadFlags()
-    void persistProjectOrderToWorkspaceRoots()
-  }
-
-  async function persistProjectOrderToWorkspaceRoots(): Promise<void> {
-    try {
-      const rootsState = await getWorkspaceRootsState()
-      const nextState = buildWorkspaceRootsProjectOrderState(rootsState, projectOrder.value, sourceGroups.value)
-
-      await setWorkspaceRootsState({
-        order: nextState.order,
-        labels: rootsState.labels,
-        active: nextState.active,
-        projectOrder: nextState.projectOrder,
-      })
-    } catch {
-      // Keep local project order when global state persistence is unavailable.
-    }
-  }
-
-  async function syncThreadStatus(): Promise<void> {
-    if (isPolling.value) return
-    isPolling.value = true
-
-    try {
-      await loadThreads()
-
-      if (!selectedThreadId.value) return
-
-      const threadId = selectedThreadId.value
-      const currentVersion = currentThreadVersion(threadId)
-      const loadedVersion = loadedVersionByThreadId.value[threadId] ?? ''
-      const hasVersionChange = currentVersion.length > 0 && currentVersion !== loadedVersion
-      const isInProgress = inProgressById.value[threadId] === true
-
-      if (isInProgress || hasVersionChange) {
-        await loadMessages(threadId, { silent: true })
-      }
-    } catch {
-      // ignore poll failures and keep last known state
-    } finally {
-      isPolling.value = false
-    }
-  }
-
-  async function syncFromNotifications(): Promise<void> {
-    if (isPolling.value) {
-      if (typeof window !== 'undefined' && eventSyncTimer === null) {
-        eventSyncTimer = window.setTimeout(() => {
-          eventSyncTimer = null
-          void syncFromNotifications()
-        }, EVENT_SYNC_DEBOUNCE_MS)
-      }
-      return
-    }
-
-    isPolling.value = true
-
-    const shouldRefreshThreads = pendingThreadsRefresh
-    const threadIdsToRefresh = new Set(pendingThreadMessageRefresh)
-    pendingThreadsRefresh = false
-    pendingThreadMessageRefresh.clear()
-
-    try {
-      if (shouldRefreshThreads) {
-        await loadThreads()
-      }
-
-      const activeThreadId = selectedThreadId.value
-      if (!activeThreadId) return
-
-      const isActiveDirty = threadIdsToRefresh.has(activeThreadId)
-      const isInProgress = inProgressById.value[activeThreadId] === true
-      const currentVersion = currentThreadVersion(activeThreadId)
-      const loadedVersion = loadedVersionByThreadId.value[activeThreadId] ?? ''
-      const hasVersionChange = currentVersion.length > 0 && currentVersion !== loadedVersion
-
-      const shouldRefreshActiveThread =
-        hasVersionChange ||
-        (isInProgress && loadedMessagesByThreadId.value[activeThreadId] !== true) ||
-        (isActiveDirty && loadedMessagesByThreadId.value[activeThreadId] !== true) ||
-        (shouldRefreshThreads && loadedMessagesByThreadId.value[activeThreadId] !== true)
-
-      if (shouldRefreshActiveThread) {
-        await loadMessages(activeThreadId, { silent: true })
-      }
-    } catch {
-      // Keep UI stable on transient event sync failures.
-    } finally {
-      isPolling.value = false
-
-      if (
-        (pendingThreadsRefresh || pendingThreadMessageRefresh.size > 0) &&
-        typeof window !== 'undefined' &&
-        eventSyncTimer === null
-      ) {
-        eventSyncTimer = window.setTimeout(() => {
-          eventSyncTimer = null
-          void syncFromNotifications()
-        }, EVENT_SYNC_DEBOUNCE_MS)
-      }
-    }
-  }
-
-  async function recoverBridgeState(): Promise<void> {
-    await loadPendingServerRequestsFromBridge()
-    pendingThreadsRefresh = !hasLoadedThreads.value
-    if (
-      selectedThreadId.value &&
-      loadedMessagesByThreadId.value[selectedThreadId.value] !== true
-    ) {
-      pendingThreadMessageRefresh.add(selectedThreadId.value)
-    }
-    await syncFromNotifications()
-  }
-
-  function startPolling(): void {
-    if (typeof window === 'undefined') return
-
-    if (stopNotificationStream) return
-    void loadPendingServerRequestsFromBridge()
-    stopNotificationStream = subscribeCodexNotifications((notification) => {
-      if (notification.method === 'ready') {
-        clearAllTransientTurnErrors()
-        void recoverBridgeState()
-        return
-      }
-      applyRealtimeUpdates(notification)
-      queueEventDrivenSync(notification)
-    })
-  }
-
-  async function loadPendingServerRequestsFromBridge(): Promise<void> {
-    try {
-      const rows = await getPendingServerRequests()
-      const normalizedRequests = rows
-        .map((row) => normalizeServerRequest(row))
-        .filter((request): request is UiServerRequest => request !== null)
-      replacePendingServerRequests(normalizedRequests)
-    } catch {
-      // Keep UI usable when pending request endpoint is temporarily unavailable.
-    }
-  }
-
-  async function respondToPendingServerRequest(reply: UiServerRequestReply): Promise<boolean> {
-    try {
-      await replyToServerRequest(reply.id, {
-        result: reply.result,
-        error: reply.error,
-      })
-      removePendingServerRequestById(reply.id)
-      return true
-    } catch (unknownError) {
-      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to reply to server request'
-      return false
-    }
-  }
-
-  function stopPolling(): void {
-    if (stopNotificationStream) {
-      stopNotificationStream()
-      stopNotificationStream = null
-    }
-
-    pendingThreadsRefresh = false
-    pendingThreadMessageRefresh.clear()
-    pendingTurnStartsById.clear()
-    if (eventSyncTimer !== null && typeof window !== 'undefined') {
-      window.clearTimeout(eventSyncTimer)
-      eventSyncTimer = null
-    }
-    if (rateLimitRefreshTimer !== null && typeof window !== 'undefined') {
-      window.clearTimeout(rateLimitRefreshTimer)
-      rateLimitRefreshTimer = null
-    }
-    if (threadListBackgroundTimer !== null && typeof window !== 'undefined') {
-      window.clearTimeout(threadListBackgroundTimer)
-      threadListBackgroundTimer = null
-    }
-    if (typeof window !== 'undefined') {
-      for (const timerId of delayedTurnSyncTimerByThreadId.values()) {
-        window.clearTimeout(timerId)
-      }
-    }
-    delayedTurnSyncTimerByThreadId.clear()
-    activeReasoningItemId = ''
-    shouldAutoScrollOnNextAgentEvent = false
-    persistedMessagesByThreadId.value = {}
-    livePlanMessagesByThreadId.value = {}
-    liveAgentMessagesByThreadId.value = {}
-    liveReasoningTextByThreadId.value = {}
-    liveCommandsByThreadId.value = {}
-    liveFileChangeMessagesByThreadId.value = {}
-    turnIndexByTurnIdByThreadId.value = {}
-    turnActivityByThreadId.value = {}
-    turnSummaryByThreadId.value = {}
-    turnErrorByThreadId.value = {}
-    activeTurnIdByThreadId.value = {}
-    interruptBlockedUntilPersistedByThreadId.value = {}
-    threadListedByServerById.value = {}
-    persistedUserMessageByThreadId.value = {}
-    queuedMessagesByThreadId.value = {}
-    queueProcessingByThreadId.value = {}
-    persistQueueState()
-    codexRateLimit.value = null
-    threadTokenUsageByThreadId.value = {}
-  }
-
-  const selectedThreadQueuedMessages = computed<QueuedMessage[]>(() => {
-    const threadId = selectedThreadId.value
-    if (!threadId) return []
-    return queuedMessagesByThreadId.value[threadId] ?? []
-  })
-
-  function removeQueuedMessage(messageId: string): void {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    const queue = queuedMessagesByThreadId.value[threadId]
-    if (!queue) return
-    const next = queue.filter((m) => m.id !== messageId)
-    queuedMessagesByThreadId.value = next.length > 0
-      ? { ...queuedMessagesByThreadId.value, [threadId]: next }
-      : omitKey(queuedMessagesByThreadId.value, threadId)
-    persistQueueState()
-  }
-
-  function reorderQueuedMessage(draggedId: string, targetId: string): void {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    const queue = queuedMessagesByThreadId.value[threadId]
-    if (!queue) return
-
-    const fromIndex = queue.findIndex((m) => m.id === draggedId)
-    const toIndex = queue.findIndex((m) => m.id === targetId)
-    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
-
-    const next = [...queue]
-    const [moved] = next.splice(fromIndex, 1)
-    next.splice(toIndex, 0, moved)
-    queuedMessagesByThreadId.value = {
-      ...queuedMessagesByThreadId.value,
-      [threadId]: next,
-    }
-    persistQueueState()
-  }
-
-  function steerQueuedMessage(messageId: string): void {
-    const threadId = selectedThreadId.value
-    if (!threadId) return
-    const queue = queuedMessagesByThreadId.value[threadId]
-    if (!queue) return
-    const msg = queue.find((m) => m.id === messageId)
-    if (!msg) return
-    removeQueuedMessage(messageId)
-    setSelectedCollaborationMode(msg.collaborationMode)
-    void sendMessageToSelectedThread(msg.text, msg.imageUrls, msg.skills, 'steer', msg.fileAttachments)
-  }
-
-  function primeSelectedThread(threadId: string): void {
-    setSelectedThreadId(threadId)
-  }
-
-  return {
-    projectGroups,
-    projectDisplayNameById,
-    selectedThread,
-    selectedThreadTokenUsage,
-    selectedThreadTerminalOpen,
-    isSelectedThreadInterruptPending,
-    selectedThreadServerRequests,
-    selectedLiveOverlay,
-    codexQuota,
-    selectedThreadId,
-    availableCollaborationModes,
-    availableModelIds,
-    selectedCollaborationMode,
-    selectedModelId,
-    selectedReasoningEffort,
-    selectedSpeedMode,
-    installedSkills,
-    accountRateLimitSnapshots,
-    messages,
-    hasMoreOlderMessages,
-    isLoadingThreads,
-    isThreadListFullyLoaded,
-    isLoadingMessages,
-    isLoadingOlderMessages,
-    isSendingMessage,
-    isInterruptingTurn,
-    isUpdatingSpeedMode,
-    isRollingBack,
-
-    error,
-    refreshAll,
-    refreshSkills,
-    selectThread,
-    loadMessages,
-    loadOlderMessages,
-    ensureThreadMessagesLoaded,
-    setThreadTerminalOpen,
-    toggleSelectedThreadTerminal,
-    archiveThreadById,
-    renameThreadById,
-    forkThreadById,
-    forkThreadFromTurn,
-    rollbackSelectedThread,
-
-    sendMessageToSelectedThread,
-    sendMessageToNewThread,
-    interruptSelectedThreadTurn,
-    selectedThreadQueuedMessages,
-    removeQueuedMessage,
-    reorderQueuedMessage,
-    steerQueuedMessage,
-    setSelectedCollaborationMode,
-    readModelIdForThread,
-    setSelectedModelIdForThread,
-    setSelectedModelId,
-
-    setSelectedReasoningEffort,
-    updateSelectedSpeedMode,
-    respondToPendingServerRequest,
-    renameProject,
-    removeProject,
-    reorderProject,
-    pinProjectToTop,
-    startPolling,
-    stopPolling,
-    primeSelectedThread,
-  }
-}
+export * from './useDesktopStateCore.mjs'
diff --git a/src/composables/useDesktopStateCore.mts b/src/composables/useDesktopStateCore.mts
new file mode 100644
index 000000000..f01ce66cd
--- /dev/null
+++ b/src/composables/useDesktopStateCore.mts
@@ -0,0 +1,2985 @@
+import { computed, ref } from 'vue'
+import { archiveThread, forkThread, getAvailableCollaborationModes, getAccountRateLimits, renameThread, getAvailableModelIds, getCurrentModelConfig, getPendingServerRequests, getSkillsList, getThreadDetail, getOlderThreadMessages, getBackgroundThreadListLimit, interruptThreadTurn, pickCodexRateLimitSnapshot, replyToServerRequest, revertThreadFileChanges, rollbackThread, getThreadGroupsPage, getThreadQueueState, getWorkspaceRootsState, setCodexSpeedMode, setThreadQueueState, setWorkspaceRootsState, getThreadTitleCache, persistThreadTitle, generateThreadTitle, resumeThread, startThread, subscribeCodexNotifications, startThreadTurn, type RpcNotification, type SkillInfo, type ThreadQueueState, type WorkspaceRootsState, } from '../api/codexGateway'
+import { normalizeFileChangeStatus, toUiFileChanges } from '../api/normalizers/v2'
+import type { CollaborationModeKind, CollaborationModeOption, CommandExecutionData, UiPendingRequestState, ReasoningEffort, SpeedMode, UiFileChange, UiLiveOverlay, UiMessage, UiPlanData, UiPlanStep, UiProjectGroup, UiRateLimitSnapshot, UiServerRequest, UiServerRequestReply, UiThreadTokenUsage, UiTokenUsageBreakdown, UiThread, } from '../types/codex'
+import { getPathParent, isProjectlessChatPath, normalizePathForUi, toProjectName } from '../pathUtils.js'
+import { cloneStringKeyedRecord, clamp, createStringKeyedRecord, isThreadUnreadByLastRead, loadProjectDisplayNames, loadProjectOrder, loadReadStateMap, loadSelectedCollaborationModeMap, loadSelectedModelMap, loadSelectedThreadId, loadThreadTerminalOpenMap, loadThreadTokenUsageMap, loadUnreadCutoffIso, NEW_THREAD_COLLABORATION_MODE_CONTEXT, normalizeProviderContextId, normalizeStoredModelId, omitStringKeyedRecordKey, pruneThreadContextStateMap, readSelectedCollaborationMode, readSelectedModel, saveProjectDisplayNames, saveProjectOrder, saveReadStateMap, saveSelectedCollaborationModeMap, saveSelectedModelMap, saveSelectedThreadId, saveThreadTerminalOpenMap, saveThreadTokenUsageMap, saveUnreadCutoffIso, toProviderModelContextId, toThreadContextId, writeSelectedCollaborationModeForContext, } from './desktopStateStorage'
+export { isThreadUnreadByLastRead } from './desktopStateStorage'
+import { WORKED_MESSAGE_TYPE, BACKGROUND_THREAD_PAGINATION_DELAY_MS, EVENT_SYNC_DEBOUNCE_MS, GLOBAL_SERVER_REQUEST_SCOPE, MODEL_FALLBACK_ID, RATE_LIMIT_REFRESH_DEBOUNCE_MS, REASONING_EFFORT_OPTIONS, RECENT_THREAD_MESSAGE_LOAD_REUSE_MS, TURN_START_FOLLOW_UP_SYNC_DELAY_MS, addWorkspaceRootPlaceholderGroups, areGroupArraysEqual, areMessageArraysEqual, areStringArraysEqual, areThreadArraysEqual, areThreadFieldsEqual, areTurnActivitiesEqual, areTurnSummariesEqual, buildWorkspaceRootsProjectOrderState, collectWorkspaceRootPathsForProjectRemoval, collectDuplicateProjectLeafNames, disambiguateProjectGroupsByCwd, filterGroupsByWorkspaceRoots, findAdjacentThreadId, flattenThreads, formatTurnDuration, getRemoteProjectDisplayName, getWorkspaceProjectOrderNames, getWorkspaceProjectOrderPaths, insertTurnSummaryMessage, isProjectlessGroup, isUnsupportedChatGptModelError, matchesWorkspaceRootProject, mergeIncomingWithLocalInProgressThreads, mergeMessages, mergeProjectOrder, normalizeMessageText, mergeThreadGroups, omitKey, omitKeys, orderGroupsByProjectOrder, orderGroupsByWorkspaceProjectOrder, parseIsoTimestamp, pruneThreadStateMap, removePersistedLiveMessages, removeRedundantLiveAgentMessages, removeThreadFromGroups, reorderStringArray, toForkedThreadTitle, toOptimisticThreadTitle, toProjectNameFromWorkspaceRoot, upsertMessage, type TurnActivityState, type TurnCompletedInfo, type TurnErrorState, type TurnStartedInfo, type TurnSummaryState, } from './desktopStateThreadHelpers'
+import { asRecord, buildPlanMessageText, extractThreadIdFromNotification, isAgentContentEvent, liveReasoningMessageId, normalizePlanStepStatus, normalizeRateLimitSnapshotsPayload, normalizeServerRequest, readAgentMessageCompleted, readAgentMessageDelta, readAgentMessageStartedId, readCommandOutputDelta, readCompletedImageView, readNotificationErrorState, readNumber, readReasoningCompletedId, readReasoningDelta, readReasoningSectionBreakMessageId, readReasoningStartedItemId, readString, readThreadTokenUsageUpdate, readToolRequestUserInputQuestionIds, readTurnActivity, readTurnCompletedInfo, readTurnErrorMessage, readTurnStartedInfo, sanitizeDisplayText, } from './desktopStateNotificationReaders'
+export { buildWorkspaceRootsProjectOrderState, collectWorkspaceRootPathsForProjectRemoval, filterGroupsByWorkspaceRoots, findAdjacentThreadId, removeThreadFromGroups, } from './desktopStateThreadHelpers'
+export function useDesktopState() {
+  const projectGroups = ref<UiProjectGroup[]>([])
+  const sourceGroups = ref<UiProjectGroup[]>([])
+  const selectedThreadId = ref(loadSelectedThreadId())
+  const persistedMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
+  const livePlanMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
+  const liveAgentMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
+  const liveReasoningTextByThreadId = ref<Record<string, string>>({})
+  const liveCommandsByThreadId = ref<Record<string, UiMessage[]>>({})
+  const liveFileChangeMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
+  const inProgressById = ref<Record<string, boolean>>({})
+  type FileAttachment = { label: string; path: string; fsPath: string }
+  type QueuedMessage = { id: string; text: string; imageUrls: string[]; skills: Array<{ name: string; path: string }>; fileAttachments: FileAttachment[]; collaborationMode: CollaborationModeKind }
+  type PendingTurnRequest = { text: string; imageUrls: string[]; skills: Array<{ name: string; path: string }>; fileAttachments: FileAttachment[]; effort: ReasoningEffort | ''; collaborationMode: CollaborationModeKind; fallbackRetried: boolean }
+  const queuedMessagesByThreadId = ref<Record<string, QueuedMessage[]>>({})
+  const queueProcessingByThreadId = ref<Record<string, boolean>>({})
+  let hasLoadedPersistedQueueState = false
+  const eventUnreadByThreadId = ref<Record<string, boolean>>({})
+  const availableModelIds = ref<string[]>([])
+  const availableCollaborationModes = ref<CollaborationModeOption[]>([
+    { value: 'default', label: 'Default' },
+    { value: 'plan', label: 'Plan' },
+  ])
+  const selectedCollaborationModeByContext = ref<Record<string, CollaborationModeKind>>(
+    loadSelectedCollaborationModeMap(),
+  )
+  const selectedModelIdByContext = ref<Record<string, string>>(loadSelectedModelMap())
+  const selectedCollaborationMode = ref<CollaborationModeKind>(
+    readSelectedCollaborationMode(selectedCollaborationModeByContext.value, selectedThreadId.value),
+  )
+  const selectedModelId = ref(readSelectedModel(selectedModelIdByContext.value, selectedThreadId.value))
+  const selectedReasoningEffort = ref<ReasoningEffort | ''>('medium')
+  const selectedSpeedMode = ref<SpeedMode>('standard')
+  const activeProviderId = ref('')
+  const readStateByThreadId = ref<Record<string, string>>(loadReadStateMap())
+  const unreadCutoffIso = ref(loadUnreadCutoffIso())
+  const projectOrder = ref<string[]>(loadProjectOrder())
+  const projectDisplayNameById = ref<Record<string, string>>(loadProjectDisplayNames())
+  const loadedVersionByThreadId = ref<Record<string, string>>({})
+  const loadedMessagesByThreadId = ref<Record<string, boolean>>({})
+  const hasMoreOlderMessagesByThreadId = ref<Record<string, boolean>>({})
+  const loadingOlderMessagesByThreadId = ref<Record<string, boolean>>({})
+  const resumedThreadById = ref<Record<string, boolean>>({})
+  const turnIndexByTurnIdByThreadId = ref<Record<string, Record<string, number>>>({})
+  const turnSummaryByThreadId = ref<Record<string, TurnSummaryState>>({})
+  const turnActivityByThreadId = ref<Record<string, TurnActivityState>>({})
+  const turnErrorByThreadId = ref<Record<string, TurnErrorState>>({})
+  const activeTurnIdByThreadId = ref<Record<string, string>>({})
+  const interruptBlockedUntilPersistedByThreadId = ref<Record<string, boolean>>({})
+  const threadListedByServerById = ref<Record<string, boolean>>({})
+  const persistedUserMessageByThreadId = ref<Record<string, boolean>>({})
+  const pendingServerRequestsByThreadId = ref<Record<string, UiServerRequest[]>>({})
+  const pendingTurnRequestByThreadId = ref<Record<string, PendingTurnRequest>>({})
+  const codexRateLimit = ref<UiRateLimitSnapshot | null>(null)
+  const threadTokenUsageByThreadId = ref<Record<string, UiThreadTokenUsage>>(loadThreadTokenUsageMap())
+  const terminalOpenByThreadId = ref<Record<string, boolean>>(loadThreadTerminalOpenMap())
+  const threadTitleById = ref<Record<string, string>>({})
+  const installedSkills = ref<SkillInfo[]>([])
+  const accountRateLimitSnapshots = ref<UiRateLimitSnapshot[]>([])
+  const isLoadingThreads = ref(false)
+  const isLoadingMessages = ref(false)
+  const isThreadListFullyLoaded = ref(false)
+  const isSendingMessage = ref(false)
+  const isInterruptingTurn = ref(false)
+  const isUpdatingSpeedMode = ref(false)
+  const isRollingBack = ref(false)
+  const error = ref('')
+  const isPolling = ref(false)
+  const hasLoadedThreads = ref(false)
+  function extractLocalImagePathFromUrl(value: string): string {
+    try {
+      const parsed = new URL(value, 'http://localhost')
+      if (parsed.pathname !== '/codex-local-image') return ''
+      return parsed.searchParams.get('path')?.trim() ?? ''
+    } catch {
+      return ''
+    }
+  }
+  function shouldReuseAttachedImageFromPrompt(promptText: string): boolean {
+    const normalized = promptText.trim().toLowerCase()
+    if (!normalized) return false
+    return /\b(attached image|attached screenshot|save the attached|copy (the )?screenshot|save screenshot)\b/i.test(normalized)
+  }
+  function findLatestUserLocalImageUrl(threadId: string): string {
+    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
+    for (let index = persisted.length - 1; index >= 0; index -= 1) {
+      const message = persisted[index]
+      if (message.role !== 'user' || !Array.isArray(message.images) || message.images.length === 0) continue
+      for (let imageIndex = message.images.length - 1; imageIndex >= 0; imageIndex -= 1) {
+        const imageUrl = message.images[imageIndex]?.trim() ?? ''
+        if (!imageUrl) continue
+        if (extractLocalImagePathFromUrl(imageUrl)) return imageUrl
+      }
+    }
+    return ''
+  }
+  let stopNotificationStream: (() => void) | null = null
+  let eventSyncTimer: number | null = null
+  let rateLimitRefreshTimer: number | null = null
+  const delayedTurnSyncTimerByThreadId = new Map<string, number>()
+  let loadThreadsPromise: Promise<void> | null = null
+  const loadMessagePromiseByThreadId = new Map<string, Promise<void>>()
+  let refreshSkillsPromise: Promise<void> | null = null
+  let rateLimitRefreshPromise: Promise<void> | null = null
+  let pendingThreadsRefresh = false
+  const pendingThreadMessageRefresh = new Set<string>()
+  const lastMessageLoadAtByThreadId = new Map<string, number>()
+  let threadListNextCursor: string | null = null
+  let threadListBackgroundTimer: number | null = null
+  let isLoadingRemainingThreadPages = false
+  let hasLoadedAllThreadPages = false
+  let loadedThreadListGroups: UiProjectGroup[] = []
+  let loadedThreadListRootsState: WorkspaceRootsState | null = null
+  let hasHydratedWorkspaceRootsState = false
+  let activeReasoningItemId = ''
+  let shouldAutoScrollOnNextAgentEvent = false
+  const pendingTurnStartsById = new Map<string, TurnStartedInfo>()
+  const fallbackRetryInFlightThreadIds = new Set<string>()
+  const allThreads = computed(() => flattenThreads(projectGroups.value))
+  const selectedThread = computed(() =>
+    allThreads.value.find((thread) => thread.id === selectedThreadId.value) ?? null,
+  )
+  const selectedThreadTerminalOpen = computed(() => {
+    const threadId = selectedThreadId.value
+    return Boolean(threadId && terminalOpenByThreadId.value[threadId] === true)
+  })
+  const isSelectedThreadInterruptPending = computed(() => {
+    const threadId = selectedThreadId.value
+    if (!threadId) return false
+    return interruptBlockedUntilPersistedByThreadId.value[threadId] === true
+  })
+  const selectedThreadServerRequests = computed<UiServerRequest[]>(() => {
+    const rows: UiServerRequest[] = []
+    const selected = selectedThreadId.value
+    if (selected && Array.isArray(pendingServerRequestsByThreadId.value[selected])) {
+      rows.push(...pendingServerRequestsByThreadId.value[selected])
+    }
+    if (Array.isArray(pendingServerRequestsByThreadId.value[GLOBAL_SERVER_REQUEST_SCOPE])) {
+      rows.push(...pendingServerRequestsByThreadId.value[GLOBAL_SERVER_REQUEST_SCOPE])
+    }
+    return rows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso))
+  })
+  const selectedLiveOverlay = computed<UiLiveOverlay | null>(() => {
+    const threadId = selectedThreadId.value
+    if (!threadId) return null
+    const isInProgress = inProgressById.value[threadId] === true
+    const activity = isInProgress ? turnActivityByThreadId.value[threadId] : undefined
+    const reasoningText = isInProgress
+      ? (liveReasoningTextByThreadId.value[threadId] ?? '').trim()
+      : ''
+    const errorText = (turnErrorByThreadId.value[threadId]?.message ?? '').trim()
+    if (!activity && !reasoningText && !errorText) return null
+    return {
+      activityLabel: activity?.label || 'Thinking',
+      activityDetails: activity?.details ?? [],
+      reasoningText,
+      errorText,
+    }
+  })
+  const codexQuota = computed<UiRateLimitSnapshot | null>(() => codexRateLimit.value)
+  const selectedThreadTokenUsage = computed<UiThreadTokenUsage | null>(() => {
+    const threadId = selectedThreadId.value
+    if (!threadId) return null
+    return threadTokenUsageByThreadId.value[threadId] ?? null
+  })
+  const messages = computed<UiMessage[]>(() => {
+    const threadId = selectedThreadId.value
+    if (!threadId) return []
+    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
+    const livePlan = livePlanMessagesByThreadId.value[threadId] ?? []
+    const liveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
+    const liveCommands = liveCommandsByThreadId.value[threadId] ?? []
+    const liveFileChanges = liveFileChangeMessagesByThreadId.value[threadId] ?? []
+    const combined = [...persisted, ...livePlan, ...liveCommands, ...liveFileChanges, ...liveAgent]
+    const summary = turnSummaryByThreadId.value[threadId]
+    if (!summary) return combined
+    return insertTurnSummaryMessage(combined, summary)
+  })
+  const hasMoreOlderMessages = computed(() => {
+    const threadId = selectedThreadId.value
+    return threadId ? hasMoreOlderMessagesByThreadId.value[threadId] === true : false
+  })
+  const isLoadingOlderMessages = computed(() => {
+    const threadId = selectedThreadId.value
+    return threadId ? loadingOlderMessagesByThreadId.value[threadId] === true : false
+  })
+  function getFirstPersistedTurnId(threadId: string): string {
+    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
+    for (const message of persisted) {
+      const turnId = message.turnId?.trim() ?? ''
+      if (turnId) return turnId
+    }
+    return ''
+  }
+  function readModelIdForThread(threadId: string): string {
+    const contextId = toThreadContextId(threadId)
+    if (contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT) {
+      const providerContextId = toProviderModelContextId(activeProviderId.value)
+      const providerModelId = providerContextId
+        ? normalizeStoredModelId(selectedModelIdByContext.value[providerContextId])
+        : ''
+      if (providerModelId) return providerModelId
+    }
+    return readSelectedModel(selectedModelIdByContext.value, threadId).trim()
+  }
+  function ensureAvailableModelIds(...modelIds: string[]): void {
+    const nextModelIds = [...availableModelIds.value]
+    for (const modelId of modelIds) {
+      const normalizedModelId = modelId.trim()
+      if (normalizedModelId && !nextModelIds.includes(normalizedModelId)) {
+        nextModelIds.push(normalizedModelId)
+      }
+    }
+    if (!areStringArraysEqual(availableModelIds.value, nextModelIds)) {
+      availableModelIds.value = nextModelIds
+    }
+  }
+  function setSelectedThreadId(nextThreadId: string): void {
+    if (selectedThreadId.value === nextThreadId) return
+    selectedThreadId.value = nextThreadId
+    saveSelectedThreadId(nextThreadId)
+    selectedModelId.value = readModelIdForThread(nextThreadId)
+    ensureAvailableModelIds(selectedModelId.value)
+    selectedCollaborationMode.value = readSelectedCollaborationMode(
+      selectedCollaborationModeByContext.value,
+      nextThreadId,
+    )
+    activeReasoningItemId = ''
+    shouldAutoScrollOnNextAgentEvent = false
+  }
+  function setSelectedModelIdForThread(threadId: string, modelId: string): void {
+    const normalizedModelId = modelId.trim()
+    const contextId = toThreadContextId(threadId)
+    if (normalizedModelId) {
+      const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
+      nextModelMap[contextId] = normalizedModelId
+      selectedModelIdByContext.value = nextModelMap
+    } else {
+      selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, contextId)
+    }
+    if (threadId.trim() === selectedThreadId.value) {
+      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
+      ensureAvailableModelIds(selectedModelId.value)
+    } else {
+      ensureAvailableModelIds(normalizedModelId)
+    }
+    if (contextId === NEW_THREAD_COLLABORATION_MODE_CONTEXT) {
+      const providerContextId = toProviderModelContextId(activeProviderId.value)
+      if (providerContextId) {
+        if (normalizedModelId) {
+          const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
+          nextModelMap[providerContextId] = normalizedModelId
+          selectedModelIdByContext.value = nextModelMap
+        } else {
+          selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, providerContextId)
+        }
+      }
+    }
+    saveSelectedModelMap(selectedModelIdByContext.value)
+  }
+  function setSelectedModelId(modelId: string): void {
+    setSelectedModelIdForThread(selectedThreadId.value, modelId)
+  }
+  function setThreadModelId(threadId: string, modelId: string): void {
+    const normalizedThreadId = threadId.trim()
+    if (!normalizedThreadId) return
+    const normalizedModelId = modelId.trim()
+    if (normalizedModelId) {
+      const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
+      nextModelMap[normalizedThreadId] = normalizedModelId
+      selectedModelIdByContext.value = nextModelMap
+    } else {
+      selectedModelIdByContext.value = omitStringKeyedRecordKey(selectedModelIdByContext.value, normalizedThreadId)
+    }
+    ensureAvailableModelIds(normalizedModelId)
+    if (selectedThreadId.value === normalizedThreadId) {
+      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
+    }
+    saveSelectedModelMap(selectedModelIdByContext.value)
+  }
+  function setThreadTokenUsage(threadId: string, usage: UiThreadTokenUsage | null): void {
+    const normalizedThreadId = threadId.trim()
+    if (!normalizedThreadId) return
+    if (!usage) {
+      if (!(normalizedThreadId in threadTokenUsageByThreadId.value)) return
+      threadTokenUsageByThreadId.value = omitKey(threadTokenUsageByThreadId.value, normalizedThreadId)
+      saveThreadTokenUsageMap(threadTokenUsageByThreadId.value)
+      return
+    }
+    const current = threadTokenUsageByThreadId.value[normalizedThreadId]
+    if (current && JSON.stringify(current) === JSON.stringify(usage)) return
+    threadTokenUsageByThreadId.value = {
+      ...threadTokenUsageByThreadId.value,
+      [normalizedThreadId]: usage,
+    }
+    saveThreadTokenUsageMap(threadTokenUsageByThreadId.value)
+  }
+  function setSelectedCollaborationMode(mode: CollaborationModeKind): void {
+    const nextMode: CollaborationModeKind = mode === 'plan' ? 'plan' : 'default'
+    const contextId = toThreadContextId(selectedThreadId.value)
+    const currentMode = readSelectedCollaborationMode(selectedCollaborationModeByContext.value, selectedThreadId.value)
+    if (currentMode === nextMode && selectedCollaborationMode.value === nextMode) return
+    selectedCollaborationMode.value = nextMode
+    selectedCollaborationModeByContext.value = writeSelectedCollaborationModeForContext(
+      selectedCollaborationModeByContext.value,
+      contextId,
+      nextMode,
+    )
+    saveSelectedCollaborationModeMap(selectedCollaborationModeByContext.value)
+  }
+  function setSelectedCollaborationModeForThread(threadId: string, mode: CollaborationModeKind): void {
+    const nextMode = mode === 'plan' ? 'plan' : 'default'
+    selectedCollaborationModeByContext.value = writeSelectedCollaborationModeForContext(
+      selectedCollaborationModeByContext.value,
+      threadId,
+      nextMode,
+    )
+    if (threadId.trim() === selectedThreadId.value) {
+      selectedCollaborationMode.value = nextMode
+    }
+    saveSelectedCollaborationModeMap(selectedCollaborationModeByContext.value)
+  }
+  function setCodexRateLimit(nextSnapshot: UiRateLimitSnapshot | null): void {
+    codexRateLimit.value = nextSnapshot
+  }
+  async function applyFallbackModelSelection(threadId: string = selectedThreadId.value): Promise<void> {
+    if (threadId.trim()) {
+      setThreadModelId(threadId, MODEL_FALLBACK_ID)
+    } else {
+      setSelectedModelId(MODEL_FALLBACK_ID)
+    }
+    ensureAvailableModelIds(MODEL_FALLBACK_ID)
+  }
+  function setPendingTurnRequest(threadId: string, request: PendingTurnRequest): void {
+    pendingTurnRequestByThreadId.value = {
+      ...pendingTurnRequestByThreadId.value,
+      [threadId]: request,
+    }
+  }
+  function clearPendingTurnRequest(threadId: string): void {
+    if (!pendingTurnRequestByThreadId.value[threadId]) return
+    pendingTurnRequestByThreadId.value = omitKey(pendingTurnRequestByThreadId.value, threadId)
+  }
+  async function retryPendingTurnWithFallback(threadId: string): Promise<void> {
+    if (fallbackRetryInFlightThreadIds.has(threadId)) return
+    const pending = pendingTurnRequestByThreadId.value[threadId]
+    if (!pending || pending.fallbackRetried) return
+    fallbackRetryInFlightThreadIds.add(threadId)
+    setPendingTurnRequest(threadId, {
+      ...pending,
+      fallbackRetried: true,
+    })
+    try {
+      await applyFallbackModelSelection(threadId)
+      // Remove the failed user turn before replaying on fallback model to avoid duplicated user messages.
+      try {
+        const rolledBackMessages = await rollbackThread(threadId, 1)
+        setPersistedMessagesForThread(threadId, rolledBackMessages)
+        clearLivePlansForThread(threadId)
+        setLiveAgentMessagesForThread(threadId, [])
+        clearLiveReasoningForThread(threadId)
+        if (liveCommandsByThreadId.value[threadId]) {
+          liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
+        }
+      } catch {
+        // If rollback fails, continue with retry rather than dropping the turn.
+      }
+      setTurnErrorForThread(threadId, null)
+      error.value = ''
+      setTurnSummaryForThread(threadId, null)
+      setTurnActivityForThread(threadId, {
+        label: 'Thinking',
+        details: buildPendingTurnDetails(MODEL_FALLBACK_ID, pending.effort, pending.collaborationMode),
+      })
+      setThreadInProgress(threadId, true)
+      if (resumedThreadById.value[threadId] !== true) {
+        await resumeThread(threadId)
+      }
+      await startThreadTurn(
+        threadId,
+        pending.text,
+        pending.imageUrls,
+        MODEL_FALLBACK_ID,
+        pending.effort || undefined,
+        pending.skills.length > 0 ? pending.skills : undefined,
+        pending.fileAttachments,
+        pending.collaborationMode,
+      )
+      resumedThreadById.value = {
+        ...resumedThreadById.value,
+        [threadId]: true,
+      }
+      scheduleRateLimitRefresh()
+      pendingThreadMessageRefresh.add(threadId)
+      await syncFromNotifications()
+    } catch (unknownError) {
+      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+      setTurnErrorForThread(threadId, errorMessage)
+      error.value = errorMessage
+      setThreadInProgress(threadId, false)
+      setTurnActivityForThread(threadId, null)
+    } finally {
+      fallbackRetryInFlightThreadIds.delete(threadId)
+    }
+  }
+  function setSelectedReasoningEffort(effort: ReasoningEffort | ''): void {
+    if (effort && !REASONING_EFFORT_OPTIONS.includes(effort)) {
+      return
+    }
+    selectedReasoningEffort.value = effort
+  }
+  async function updateSelectedSpeedMode(mode: SpeedMode): Promise<void> {
+    const nextMode: SpeedMode = mode === 'fast' ? 'fast' : 'standard'
+    if (isUpdatingSpeedMode.value || selectedSpeedMode.value === nextMode) {
+      return
+    }
+    const previousMode = selectedSpeedMode.value
+    selectedSpeedMode.value = nextMode
+    isUpdatingSpeedMode.value = true
+    error.value = ''
+    try {
+      await setCodexSpeedMode(nextMode)
+    } catch (unknownError) {
+      selectedSpeedMode.value = previousMode
+      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to update Fast mode'
+    } finally {
+      isUpdatingSpeedMode.value = false
+    }
+  }
+  async function refreshCollaborationModes(): Promise<void> {
+    try {
+      const modes = await getAvailableCollaborationModes()
+      availableCollaborationModes.value = modes
+      if (!modes.some((mode) => mode.value === selectedCollaborationMode.value)) {
+        setSelectedCollaborationMode('default')
+      }
+    } catch {
+      // Keep the last known collaboration mode choices on transient failures.
+    }
+  }
+  function buildPendingTurnDetails(
+    modelId: string,
+    effort: ReasoningEffort | '',
+    collaborationMode: CollaborationModeKind = selectedCollaborationMode.value,
+  ): string[] {
+    const modelLabel = modelId.trim() || 'default'
+    const effortLabel = effort || 'default'
+    const modeLabel = collaborationMode === 'plan' ? 'Plan' : 'Default'
+    const speedLabel = selectedSpeedMode.value === 'fast' ? 'Fast' : 'Standard'
+    return [`Mode: ${modeLabel}`, `Model: ${modelLabel}`, `Thinking: ${effortLabel}`, `Speed: ${speedLabel}`]
+  }
+  async function refreshModelPreferences(options?: { providerChanged?: boolean; includeProviderModels?: boolean }): Promise<void> {
+    try {
+      const [modelIds, currentConfig] = await Promise.all([
+        getAvailableModelIds({ includeProviderModels: options?.includeProviderModels !== false }),
+        getCurrentModelConfig(),
+      ])
+      const normalizedSelectedModelId = readModelIdForThread(selectedThreadId.value)
+      const normalizedConfiguredModelId = currentConfig.model.trim()
+      const normalizedProviderId = normalizeProviderContextId(currentConfig.providerId)
+      activeProviderId.value = normalizedProviderId
+      const providerModelContextId = toProviderModelContextId(normalizedProviderId)
+      const providerScopedModelId = providerModelContextId
+        ? normalizeStoredModelId(selectedModelIdByContext.value[providerModelContextId])
+        : ''
+      const nextModelIds = [...modelIds]
+      if (!options?.providerChanged) {
+        for (const modelId of [normalizedSelectedModelId, normalizedConfiguredModelId]) {
+          if (modelId && !nextModelIds.includes(modelId)) {
+            nextModelIds.push(modelId)
+          }
+        }
+      }
+      availableModelIds.value = nextModelIds
+      const currentModelInNewList = normalizedSelectedModelId && modelIds.includes(normalizedSelectedModelId)
+      if (!normalizedSelectedModelId || !currentModelInNewList || options?.providerChanged) {
+        if (options?.providerChanged && nextModelIds.length > 0) {
+          if (providerScopedModelId && nextModelIds.includes(providerScopedModelId)) {
+            setSelectedModelId(providerScopedModelId)
+          } else if (normalizedConfiguredModelId && nextModelIds.includes(normalizedConfiguredModelId)) {
+            setSelectedModelId(normalizedConfiguredModelId)
+          } else {
+            setSelectedModelId(nextModelIds[0])
+          }
+        } else if (normalizedConfiguredModelId && nextModelIds.includes(normalizedConfiguredModelId)) {
+          setSelectedModelId(currentConfig.model)
+        } else if (nextModelIds.length > 0) {
+          setSelectedModelId(nextModelIds[0])
+        } else {
+          setSelectedModelId('')
+        }
+      }
+      if (providerModelContextId && selectedModelId.value.trim().length > 0) {
+        const nextModelMap = cloneStringKeyedRecord(selectedModelIdByContext.value)
+        nextModelMap[providerModelContextId] = selectedModelId.value.trim()
+        selectedModelIdByContext.value = nextModelMap
+        saveSelectedModelMap(selectedModelIdByContext.value)
+      }
+      if (
+        currentConfig.reasoningEffort &&
+        REASONING_EFFORT_OPTIONS.includes(currentConfig.reasoningEffort)
+      ) {
+        selectedReasoningEffort.value = currentConfig.reasoningEffort
+      }
+      selectedSpeedMode.value = currentConfig.speedMode
+    } catch {
+      // Keep chat UI usable even if model metadata is temporarily unavailable.
+    }
+  }
+  async function refreshRateLimits(): Promise<void> {
+    if (rateLimitRefreshPromise) {
+      await rateLimitRefreshPromise
+      return
+    }
+    rateLimitRefreshPromise = (async () => {
+      try {
+        const snapshot = await getAccountRateLimits()
+        setCodexRateLimit(snapshot)
+        accountRateLimitSnapshots.value = snapshot ? [snapshot] : []
+      } catch {
+        // Keep the last known rate-limit state if the endpoint is temporarily unavailable.
+      } finally {
+        rateLimitRefreshPromise = null
+      }
+    })()
+    await rateLimitRefreshPromise
+  }
+  function scheduleRateLimitRefresh(): void {
+    if (typeof window === 'undefined') {
+      void refreshRateLimits()
+      return
+    }
+    if (rateLimitRefreshTimer !== null) {
+      window.clearTimeout(rateLimitRefreshTimer)
+    }
+    rateLimitRefreshTimer = window.setTimeout(() => {
+      rateLimitRefreshTimer = null
+      void refreshRateLimits()
+    }, RATE_LIMIT_REFRESH_DEBOUNCE_MS)
+  }
+  function clearDelayedTurnSync(threadId: string): void {
+    if (!threadId || typeof window === 'undefined') return
+    const timerId = delayedTurnSyncTimerByThreadId.get(threadId)
+    if (timerId === undefined) return
+    window.clearTimeout(timerId)
+    delayedTurnSyncTimerByThreadId.delete(threadId)
+  }
+  function scheduleDelayedTurnSync(threadId: string): void {
+    if (!threadId || typeof window === 'undefined') return
+    clearDelayedTurnSync(threadId)
+    const timerId = window.setTimeout(() => {
+      delayedTurnSyncTimerByThreadId.delete(threadId)
+      pendingThreadMessageRefresh.add(threadId)
+      void syncFromNotifications()
+    }, TURN_START_FOLLOW_UP_SYNC_DELAY_MS)
+    delayedTurnSyncTimerByThreadId.set(threadId, timerId)
+  }
+  function applyCachedTitlesToGroups(groups: UiProjectGroup[]): UiProjectGroup[] {
+    const titles = threadTitleById.value
+    if (Object.keys(titles).length === 0) return groups
+    return groups.map((group) => ({
+      projectName: group.projectName,
+      threads: group.threads.map((thread) => {
+        const cached = titles[thread.id]
+        return cached ? { ...thread, title: cached } : thread
+      }),
+    }))
+  }
+  function getThreadPendingRequests(threadId: string): UiServerRequest[] {
+    if (!threadId) return []
+    return Array.isArray(pendingServerRequestsByThreadId.value[threadId])
+      ? pendingServerRequestsByThreadId.value[threadId]
+      : []
+  }
+  function isApprovalRequestMethod(method: string): boolean {
+    return (
+      method === 'item/commandExecution/requestApproval' ||
+      method === 'item/fileChange/requestApproval' ||
+      method === 'item/permissions/requestApproval' ||
+      method === 'execCommandApproval' ||
+      method === 'applyPatchApproval'
+    )
+  }
+  function readPendingRequestState(requests: UiServerRequest[]): UiPendingRequestState | null {
+    if (requests.some((request) => isApprovalRequestMethod(request.method))) {
+      return 'approval'
+    }
+    return requests.length > 0 ? 'response' : null
+  }
+  function applyThreadFlags(): void {
+    const withTitles = applyCachedTitlesToGroups(sourceGroups.value)
+    const flaggedGroups: UiProjectGroup[] = withTitles.map((group) => ({
+      projectName: group.projectName,
+      threads: group.threads.map((thread) => {
+        const inProgress = inProgressById.value[thread.id] === true
+        const pendingRequestState = readPendingRequestState(getThreadPendingRequests(thread.id))
+        const isSelected = selectedThreadId.value === thread.id
+        const unreadByEvent = eventUnreadByThreadId.value[thread.id] === true
+        const unreadByTime = isThreadUnreadByLastRead(
+          thread.updatedAtIso,
+          readStateByThreadId.value[thread.id],
+          unreadCutoffIso.value,
+        )
+        const unread = !isSelected && !inProgress && (unreadByEvent || unreadByTime)
+        return {
+          ...thread,
+          inProgress,
+          unread,
+          pendingRequestState,
+        }
+      }),
+    }))
+    projectGroups.value = mergeThreadGroups(projectGroups.value, flaggedGroups)
+  }
+  function insertOptimisticThread(threadId: string, cwd: string, firstMessageText: string): void {
+    const nowIso = new Date().toISOString()
+    const normalizedCwd = normalizePathForUi(cwd)
+    const projectName = toProjectName(normalizedCwd)
+    const nextThread: UiThread = {
+      id: threadId,
+      title: toOptimisticThreadTitle(firstMessageText),
+      projectName,
+      cwd: normalizedCwd,
+      hasWorktree: normalizedCwd.includes('/.codex/worktrees/') || normalizedCwd.includes('/.git/worktrees/'),
+      createdAtIso: nowIso,
+      updatedAtIso: nowIso,
+      preview: firstMessageText,
+      unread: false,
+      inProgress: false,
+    }
+    const existingGroupIndex = sourceGroups.value.findIndex((group) => group.projectName === projectName)
+    if (existingGroupIndex >= 0) {
+      const existingGroup = sourceGroups.value[existingGroupIndex]
+      const remainingThreads = existingGroup.threads.filter((thread) => thread.id !== threadId)
+      const nextGroup: UiProjectGroup = {
+        projectName,
+        threads: [nextThread, ...remainingThreads],
+      }
+      const nextGroups = [...sourceGroups.value]
+      nextGroups.splice(existingGroupIndex, 1, nextGroup)
+      sourceGroups.value = nextGroups
+    } else {
+      sourceGroups.value = [{ projectName, threads: [nextThread] }, ...sourceGroups.value]
+    }
+    const nextProjectOrder = mergeProjectOrder(projectOrder.value, sourceGroups.value)
+    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
+      projectOrder.value = nextProjectOrder
+      saveProjectOrder(projectOrder.value)
+    }
+    applyThreadFlags()
+  }
+  function pruneThreadScopedState(flatThreads: UiThread[]): void {
+    const activeThreadIds = new Set(flatThreads.map((thread) => thread.id))
+    const currentThreadId = selectedThreadId.value.trim()
+    if (currentThreadId) {
+      activeThreadIds.add(currentThreadId)
+    }
+    const nextSelectedModelMap = pruneThreadContextStateMap(selectedModelIdByContext.value, activeThreadIds)
+    if (nextSelectedModelMap !== selectedModelIdByContext.value) {
+      selectedModelIdByContext.value = nextSelectedModelMap
+      selectedModelId.value = readModelIdForThread(selectedThreadId.value)
+      ensureAvailableModelIds(selectedModelId.value)
+      saveSelectedModelMap(nextSelectedModelMap)
+    }
+    const nextSelectedCollaborationModeMap = pruneThreadContextStateMap(
+      selectedCollaborationModeByContext.value,
+      activeThreadIds,
+    )
+    if (nextSelectedCollaborationModeMap !== selectedCollaborationModeByContext.value) {
+      selectedCollaborationModeByContext.value = nextSelectedCollaborationModeMap
+      selectedCollaborationMode.value = readSelectedCollaborationMode(
+        nextSelectedCollaborationModeMap,
+        selectedThreadId.value,
+      )
+      saveSelectedCollaborationModeMap(nextSelectedCollaborationModeMap)
+    }
+    const nextReadState = pruneThreadStateMap(readStateByThreadId.value, activeThreadIds)
+    if (nextReadState !== readStateByThreadId.value) {
+      readStateByThreadId.value = nextReadState
+      saveReadStateMap(nextReadState)
+    }
+    loadedMessagesByThreadId.value = pruneThreadStateMap(loadedMessagesByThreadId.value, activeThreadIds)
+    loadedVersionByThreadId.value = pruneThreadStateMap(loadedVersionByThreadId.value, activeThreadIds)
+    resumedThreadById.value = pruneThreadStateMap(resumedThreadById.value, activeThreadIds)
+    turnIndexByTurnIdByThreadId.value = pruneThreadStateMap(turnIndexByTurnIdByThreadId.value, activeThreadIds)
+    persistedMessagesByThreadId.value = pruneThreadStateMap(persistedMessagesByThreadId.value, activeThreadIds)
+    liveAgentMessagesByThreadId.value = pruneThreadStateMap(liveAgentMessagesByThreadId.value, activeThreadIds)
+    liveReasoningTextByThreadId.value = pruneThreadStateMap(liveReasoningTextByThreadId.value, activeThreadIds)
+    liveCommandsByThreadId.value = pruneThreadStateMap(liveCommandsByThreadId.value, activeThreadIds)
+    liveFileChangeMessagesByThreadId.value = pruneThreadStateMap(liveFileChangeMessagesByThreadId.value, activeThreadIds)
+    turnSummaryByThreadId.value = pruneThreadStateMap(turnSummaryByThreadId.value, activeThreadIds)
+    turnActivityByThreadId.value = pruneThreadStateMap(turnActivityByThreadId.value, activeThreadIds)
+    turnErrorByThreadId.value = pruneThreadStateMap(turnErrorByThreadId.value, activeThreadIds)
+    activeTurnIdByThreadId.value = pruneThreadStateMap(activeTurnIdByThreadId.value, activeThreadIds)
+    interruptBlockedUntilPersistedByThreadId.value = pruneThreadStateMap(
+      interruptBlockedUntilPersistedByThreadId.value,
+      activeThreadIds,
+    )
+    threadListedByServerById.value = pruneThreadStateMap(threadListedByServerById.value, activeThreadIds)
+    persistedUserMessageByThreadId.value = pruneThreadStateMap(persistedUserMessageByThreadId.value, activeThreadIds)
+    const nextQueuedMessages = pruneThreadStateMap(queuedMessagesByThreadId.value, activeThreadIds)
+    if (nextQueuedMessages !== queuedMessagesByThreadId.value) {
+      queuedMessagesByThreadId.value = nextQueuedMessages
+      persistQueueState()
+    }
+    threadTokenUsageByThreadId.value = pruneThreadStateMap(threadTokenUsageByThreadId.value, activeThreadIds)
+    eventUnreadByThreadId.value = pruneThreadStateMap(eventUnreadByThreadId.value, activeThreadIds)
+    inProgressById.value = pruneThreadStateMap(inProgressById.value, activeThreadIds)
+    const nextPending: Record<string, UiServerRequest[]> = {}
+    for (const [threadId, requests] of Object.entries(pendingServerRequestsByThreadId.value)) {
+      if (threadId === GLOBAL_SERVER_REQUEST_SCOPE || activeThreadIds.has(threadId)) {
+        nextPending[threadId] = requests
+      }
+    }
+    pendingServerRequestsByThreadId.value = nextPending
+  }
+  function markThreadAsRead(threadId: string): void {
+    const thread = flattenThreads(sourceGroups.value).find((row) => row.id === threadId)
+    if (!thread) return
+    readStateByThreadId.value = {
+      ...readStateByThreadId.value,
+      [threadId]: thread.updatedAtIso,
+    }
+    saveReadStateMap(readStateByThreadId.value)
+    if (eventUnreadByThreadId.value[threadId]) {
+      eventUnreadByThreadId.value = omitKey(eventUnreadByThreadId.value, threadId)
+    }
+    applyThreadFlags()
+  }
+  function setTurnSummaryForThread(threadId: string, summary: TurnSummaryState | null): void {
+    if (!threadId) return
+    const previous = turnSummaryByThreadId.value[threadId]
+    if (summary) {
+      if (areTurnSummariesEqual(previous, summary)) return
+      turnSummaryByThreadId.value = {
+        ...turnSummaryByThreadId.value,
+        [threadId]: summary,
+      }
+    } else {
+      if (previous) {
+        turnSummaryByThreadId.value = omitKey(turnSummaryByThreadId.value, threadId)
+      }
+    }
+  }
+  function setThreadInProgress(threadId: string, nextInProgress: boolean): void {
+    if (!threadId) return
+    const currentValue = inProgressById.value[threadId] === true
+    if (currentValue === nextInProgress) return
+    if (nextInProgress) {
+      inProgressById.value = {
+        ...inProgressById.value,
+        [threadId]: true,
+      }
+    } else {
+      inProgressById.value = omitKey(inProgressById.value, threadId)
+      clearCompletedTurnLiveState(threadId)
+      clearInterruptPersistenceGate(threadId)
+    }
+    applyThreadFlags()
+    if (!nextInProgress && !hasActiveInProgressThreads() && threadListNextCursor) {
+      scheduleRemainingThreadPages()
+    }
+  }
+  function clearInterruptPersistenceGate(threadId: string): void {
+    if (!threadId) return
+    if (interruptBlockedUntilPersistedByThreadId.value[threadId]) {
+      interruptBlockedUntilPersistedByThreadId.value = omitKey(interruptBlockedUntilPersistedByThreadId.value, threadId)
+    }
+    if (threadListedByServerById.value[threadId]) {
+      threadListedByServerById.value = omitKey(threadListedByServerById.value, threadId)
+    }
+    if (persistedUserMessageByThreadId.value[threadId]) {
+      persistedUserMessageByThreadId.value = omitKey(persistedUserMessageByThreadId.value, threadId)
+    }
+  }
+  function blockInterruptUntilThreadIsPersisted(threadId: string): void {
+    if (!threadId) return
+    interruptBlockedUntilPersistedByThreadId.value = {
+      ...interruptBlockedUntilPersistedByThreadId.value,
+      [threadId]: true,
+    }
+    if (threadListedByServerById.value[threadId]) {
+      threadListedByServerById.value = omitKey(threadListedByServerById.value, threadId)
+    }
+    if (persistedUserMessageByThreadId.value[threadId]) {
+      persistedUserMessageByThreadId.value = omitKey(persistedUserMessageByThreadId.value, threadId)
+    }
+  }
+  function maybeUnblockInterruptForPersistedThread(threadId: string): void {
+    if (!threadId) return
+    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
+    if (threadListedByServerById.value[threadId] !== true) return
+    if (persistedUserMessageByThreadId.value[threadId] !== true) return
+    clearInterruptPersistenceGate(threadId)
+  }
+  function maybeUnblockInterruptForActiveTurn(threadId: string, turnId: string): void {
+    if (!threadId || !turnId) return
+    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
+    clearInterruptPersistenceGate(threadId)
+  }
+  function markServerListedThreads(serverThreadIds: Set<string>): void {
+    const pendingThreadIds = Object.keys(interruptBlockedUntilPersistedByThreadId.value)
+    if (pendingThreadIds.length === 0) return
+    let nextListedState = threadListedByServerById.value
+    let changed = false
+    for (const threadId of pendingThreadIds) {
+      if (!serverThreadIds.has(threadId) || nextListedState[threadId] === true) continue
+      nextListedState = {
+        ...nextListedState,
+        [threadId]: true,
+      }
+      changed = true
+    }
+    if (!changed) return
+    threadListedByServerById.value = nextListedState
+    for (const threadId of pendingThreadIds) {
+      maybeUnblockInterruptForPersistedThread(threadId)
+    }
+  }
+  function markThreadMessagesPersisted(threadId: string, messages: UiMessage[]): void {
+    if (!threadId) return
+    if (interruptBlockedUntilPersistedByThreadId.value[threadId] !== true) return
+    if (!messages.some((message) => message.role === 'user')) return
+    if (persistedUserMessageByThreadId.value[threadId] !== true) {
+      persistedUserMessageByThreadId.value = {
+        ...persistedUserMessageByThreadId.value,
+        [threadId]: true,
+      }
+    }
+    maybeUnblockInterruptForPersistedThread(threadId)
+  }
+  function markThreadUnreadByEvent(threadId: string): void {
+    if (!threadId) return
+    if (threadId === selectedThreadId.value) return
+    if (eventUnreadByThreadId.value[threadId] === true) return
+    eventUnreadByThreadId.value = {
+      ...eventUnreadByThreadId.value,
+      [threadId]: true,
+    }
+    applyThreadFlags()
+  }
+  function setTurnActivityForThread(threadId: string, activity: TurnActivityState | null): void {
+    if (!threadId) return
+    const previous = turnActivityByThreadId.value[threadId]
+    if (!activity) {
+      if (previous) {
+        turnActivityByThreadId.value = omitKey(turnActivityByThreadId.value, threadId)
+      }
+      return
+    }
+    const normalizedLabel = sanitizeDisplayText(activity.label) || 'Thinking'
+    const incomingDetails = activity.details
+      .map((line) => sanitizeDisplayText(line))
+      .filter((line) => line.length > 0 && line !== normalizedLabel)
+    const mergedDetails = Array.from(new Set([...(previous?.details ?? []), ...incomingDetails])).slice(-3)
+    const nextActivity: TurnActivityState = {
+      label: normalizedLabel,
+      details: mergedDetails,
+    }
+    if (areTurnActivitiesEqual(previous, nextActivity)) return
+    turnActivityByThreadId.value = {
+      ...turnActivityByThreadId.value,
+      [threadId]: nextActivity,
+    }
+  }
+  function setTurnErrorForThread(
+    threadId: string,
+    message: string | null,
+    options: { transient?: boolean } = {},
+  ): void {
+    if (!threadId) return
+    const previous = turnErrorByThreadId.value[threadId]
+    const normalizedMessage = message ? normalizeMessageText(message) : ''
+    if (!normalizedMessage) {
+      if (previous) {
+        turnErrorByThreadId.value = omitKey(turnErrorByThreadId.value, threadId)
+      }
+      return
+    }
+    const transient = options.transient === true
+    if (previous?.message === normalizedMessage && previous.transient === transient) return
+    turnErrorByThreadId.value = {
+      ...turnErrorByThreadId.value,
+      [threadId]: { message: normalizedMessage, transient },
+    }
+  }
+  function clearTransientTurnErrorForThread(threadId: string): void {
+    if (!threadId) return
+    if (!turnErrorByThreadId.value[threadId]?.transient) return
+    setTurnErrorForThread(threadId, null)
+  }
+  function clearAllTransientTurnErrors(): void {
+    const transientThreadIds = Object.entries(turnErrorByThreadId.value)
+      .filter(([, state]) => state?.transient)
+      .map(([threadId]) => threadId)
+    if (transientThreadIds.length === 0) return
+    let nextState = turnErrorByThreadId.value
+    for (const threadId of transientThreadIds) {
+      nextState = omitKey(nextState, threadId)
+    }
+    turnErrorByThreadId.value = nextState
+  }
+  function currentThreadVersion(threadId: string): string {
+    const thread = flattenThreads(sourceGroups.value).find((row) => row.id === threadId)
+    return thread?.updatedAtIso ?? ''
+  }
+  function setThreadTerminalOpen(threadId: string, isOpen: boolean): void {
+    if (!threadId) return
+    const next = { ...terminalOpenByThreadId.value }
+    if (isOpen) {
+      next[threadId] = true
+    } else {
+      delete next[threadId]
+    }
+    terminalOpenByThreadId.value = next
+    saveThreadTerminalOpenMap(next)
+  }
+  function toggleSelectedThreadTerminal(): void {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    setThreadTerminalOpen(threadId, !selectedThreadTerminalOpen.value)
+  }
+  function setPersistedMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
+    const previous = persistedMessagesByThreadId.value[threadId] ?? []
+    if (areMessageArraysEqual(previous, nextMessages)) return
+    persistedMessagesByThreadId.value = {
+      ...persistedMessagesByThreadId.value,
+      [threadId]: nextMessages,
+    }
+  }
+  function setLiveAgentMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
+    const previous = liveAgentMessagesByThreadId.value[threadId] ?? []
+    if (areMessageArraysEqual(previous, nextMessages)) return
+    liveAgentMessagesByThreadId.value = {
+      ...liveAgentMessagesByThreadId.value,
+      [threadId]: nextMessages,
+    }
+  }
+  function clearLiveAgentMessagesForThread(threadId: string): void {
+    if (!threadId) return
+    if (!(threadId in liveAgentMessagesByThreadId.value)) return
+    liveAgentMessagesByThreadId.value = omitKey(liveAgentMessagesByThreadId.value, threadId)
+  }
+  function setLiveFileChangeMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
+    const previous = liveFileChangeMessagesByThreadId.value[threadId] ?? []
+    if (areMessageArraysEqual(previous, nextMessages)) return
+    liveFileChangeMessagesByThreadId.value = {
+      ...liveFileChangeMessagesByThreadId.value,
+      [threadId]: nextMessages,
+    }
+  }
+  function setLivePlanMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
+    const previous = livePlanMessagesByThreadId.value[threadId] ?? []
+    if (areMessageArraysEqual(previous, nextMessages)) return
+    livePlanMessagesByThreadId.value = {
+      ...livePlanMessagesByThreadId.value,
+      [threadId]: nextMessages,
+    }
+  }
+  function upsertLivePlanMessage(threadId: string, nextMessage: UiMessage): void {
+    const previous = livePlanMessagesByThreadId.value[threadId] ?? []
+    const next = upsertMessage(previous, nextMessage)
+    setLivePlanMessagesForThread(threadId, next)
+  }
+  function upsertLiveAgentMessage(threadId: string, nextMessage: UiMessage): void {
+    const previous = liveAgentMessagesByThreadId.value[threadId] ?? []
+    const next = upsertMessage(previous, nextMessage)
+    setLiveAgentMessagesForThread(threadId, next)
+  }
+  function upsertLiveFileChangeMessage(threadId: string, nextMessage: UiMessage): void {
+    const previous = liveFileChangeMessagesByThreadId.value[threadId] ?? []
+    const next = upsertMessage(previous, nextMessage)
+    setLiveFileChangeMessagesForThread(threadId, next)
+  }
+  function setLiveReasoningText(threadId: string, text: string): void {
+    if (!threadId) return
+    const normalized = text.trim()
+    const previous = liveReasoningTextByThreadId.value[threadId] ?? ''
+    if (normalized.length === 0) {
+      if (!previous) return
+      liveReasoningTextByThreadId.value = omitKey(liveReasoningTextByThreadId.value, threadId)
+      return
+    }
+    if (previous === normalized) return
+    liveReasoningTextByThreadId.value = {
+      ...liveReasoningTextByThreadId.value,
+      [threadId]: normalized,
+    }
+  }
+  function appendLiveReasoningText(threadId: string, delta: string): void {
+    if (!threadId) return
+    const previous = liveReasoningTextByThreadId.value[threadId] ?? ''
+    setLiveReasoningText(threadId, `${previous}${delta}`)
+  }
+  function clearLiveReasoningForThread(threadId: string): void {
+    if (!threadId) return
+    if (!(threadId in liveReasoningTextByThreadId.value)) return
+    liveReasoningTextByThreadId.value = omitKey(liveReasoningTextByThreadId.value, threadId)
+  }
+  function clearLivePlansForThread(threadId: string): void {
+    if (!threadId) return
+    if (!(threadId in livePlanMessagesByThreadId.value)) return
+    livePlanMessagesByThreadId.value = omitKey(livePlanMessagesByThreadId.value, threadId)
+  }
+  function clearLiveFileChangesForThread(threadId: string): void {
+    if (!threadId) return
+    if (!(threadId in liveFileChangeMessagesByThreadId.value)) return
+    liveFileChangeMessagesByThreadId.value = omitKey(liveFileChangeMessagesByThreadId.value, threadId)
+  }
+  function clearCompletedTurnLiveState(threadId: string): void {
+    if (!threadId) return
+    clearLivePlansForThread(threadId)
+    clearLiveReasoningForThread(threadId)
+    setTurnActivityForThread(threadId, null)
+    if (threadId === selectedThreadId.value) {
+      activeReasoningItemId = ''
+    }
+    if (liveCommandsByThreadId.value[threadId]) {
+      liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
+    }
+    if (activeTurnIdByThreadId.value[threadId]) {
+      activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
+    }
+    clearPendingTurnRequest(threadId)
+  }
+  function readPlanUpdate(notification: RpcNotification): { threadId: string; message: UiMessage } | null {
+    if (notification.method !== 'turn/plan/updated') return null
+    const params = asRecord(notification.params)
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const rawSteps = Array.isArray(params?.plan) ? params?.plan : []
+    const steps: UiPlanStep[] = rawSteps
+      .map((row) => asRecord(row))
+      .map((row) => ({
+        step: readString(row?.step),
+        status: normalizePlanStepStatus(row?.status),
+      }))
+      .filter((row) => row.step.length > 0)
+    if (!threadId || !turnId) return null
+    const explanation = readString(params?.explanation).trim()
+    const plan: UiPlanData = {
+      explanation: explanation || undefined,
+      steps,
+      isStreaming: true,
+    }
+    return {
+      threadId,
+      message: {
+        id: `${turnId}:plan`,
+        role: 'assistant',
+        text: buildPlanMessageText(plan),
+        messageType: 'plan.live',
+        plan,
+      },
+    }
+  }
+  function readPlanDelta(notification: RpcNotification): { threadId: string; message: UiMessage } | null {
+    if (notification.method !== 'item/plan/delta') return null
+    const params = asRecord(notification.params)
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const delta = readString(params?.delta)
+    if (!threadId || !turnId || !delta) return null
+    const messageId = `${turnId}:plan`
+    const existing = (livePlanMessagesByThreadId.value[threadId] ?? []).find((message) => message.id === messageId)
+    const nextText = `${existing?.text ?? ''}${delta}`
+    const nextPlan: UiPlanData | undefined = existing?.plan
+      ? { ...existing.plan, isStreaming: true }
+      : undefined
+    return {
+      threadId,
+      message: {
+        id: messageId,
+        role: 'assistant',
+        text: nextText,
+        messageType: 'plan.live',
+        plan: nextPlan,
+      },
+    }
+  }
+  function upsertPendingServerRequest(request: UiServerRequest): void {
+    const threadId = request.threadId || GLOBAL_SERVER_REQUEST_SCOPE
+    const current = pendingServerRequestsByThreadId.value[threadId] ?? []
+    const index = current.findIndex((row) => row.id === request.id)
+    const nextRows = [...current]
+    if (index >= 0) {
+      nextRows.splice(index, 1, request)
+    } else {
+      nextRows.push(request)
+    }
+    pendingServerRequestsByThreadId.value = {
+      ...pendingServerRequestsByThreadId.value,
+      [threadId]: nextRows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso)),
+    }
+    applyThreadFlags()
+  }
+  function removePendingServerRequestById(requestId: number): void {
+    const next: Record<string, UiServerRequest[]> = {}
+    for (const [threadId, requests] of Object.entries(pendingServerRequestsByThreadId.value)) {
+      const filtered = requests.filter((request) => request.id !== requestId)
+      if (filtered.length > 0) {
+        next[threadId] = filtered
+      }
+    }
+    pendingServerRequestsByThreadId.value = next
+    applyThreadFlags()
+  }
+  function replacePendingServerRequests(requests: UiServerRequest[]): void {
+    const next: Record<string, UiServerRequest[]> = {}
+    for (const request of requests) {
+      const threadId = request.threadId || GLOBAL_SERVER_REQUEST_SCOPE
+      const current = next[threadId] ?? []
+      current.push(request)
+      next[threadId] = current
+    }
+    for (const rows of Object.values(next)) {
+      rows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso))
+    }
+    pendingServerRequestsByThreadId.value = next
+  }
+  function handleServerRequestNotification(notification: RpcNotification): boolean {
+    if (notification.method === 'server/request') {
+      const request = normalizeServerRequest(notification.params)
+      if (!request) return true
+      upsertPendingServerRequest(request)
+      return true
+    }
+    if (notification.method === 'server/request/resolved') {
+      const row = asRecord(notification.params)
+      const id = row?.id
+      if (typeof id === 'number' && Number.isInteger(id)) {
+        removePendingServerRequestById(id)
+      }
+      return true
+    }
+    return false
+  }
+  function inferNextTurnIndex(threadId: string): number {
+    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
+    let maxTurnIndex = -1
+    for (const message of persisted) {
+      if (typeof message.turnIndex === 'number' && Number.isFinite(message.turnIndex)) {
+        maxTurnIndex = Math.max(maxTurnIndex, message.turnIndex)
+      }
+    }
+    return maxTurnIndex + 1
+  }
+  function setTurnIndexForThread(threadId: string, turnId: string, turnIndex: number): void {
+    if (!threadId || !turnId || !Number.isInteger(turnIndex) || turnIndex < 0) return
+    const previous = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
+    if (previous[turnId] === turnIndex) return
+    turnIndexByTurnIdByThreadId.value = {
+      ...turnIndexByTurnIdByThreadId.value,
+      [threadId]: {
+        ...previous,
+        [turnId]: turnIndex,
+      },
+    }
+  }
+  function replaceTurnIndexLookupForThread(threadId: string, nextLookup: Record<string, number>): void {
+    const previous = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
+    const previousEntries = Object.entries(previous)
+    const nextEntries = Object.entries(nextLookup)
+    if (
+      previousEntries.length === nextEntries.length
+      && previousEntries.every(([turnId, turnIndex]) => nextLookup[turnId] === turnIndex)
+    ) {
+      return
+    }
+    turnIndexByTurnIdByThreadId.value = {
+      ...turnIndexByTurnIdByThreadId.value,
+      [threadId]: { ...nextLookup },
+    }
+  }
+  function rebindLiveFileChangeTurnIndices(threadId: string): void {
+    const current = liveFileChangeMessagesByThreadId.value[threadId]
+    if (!current || current.length === 0) return
+    const turnIndexByTurnId = turnIndexByTurnIdByThreadId.value[threadId] ?? {}
+    let changed = false
+    const next = current.map((message) => {
+      if (typeof message.turnIndex === 'number' || !message.turnId) {
+        return message
+      }
+      const turnIndex = turnIndexByTurnId[message.turnId]
+      if (typeof turnIndex !== 'number') return message
+      changed = true
+      return { ...message, turnIndex }
+    })
+    if (!changed) return
+    liveFileChangeMessagesByThreadId.value = {
+      ...liveFileChangeMessagesByThreadId.value,
+      [threadId]: next,
+    }
+  }
+  function readCommandExecutionStarted(notification: RpcNotification): UiMessage | null {
+    if (notification.method !== 'item/started') return null
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    if (!item || item.type !== 'commandExecution') return null
+    const id = readString(item.id)
+    const command = readString(item.command)
+    if (!id) return null
+    const cwd = typeof item.cwd === 'string' ? item.cwd : null
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
+    return {
+      id,
+      role: 'system',
+      text: command,
+      messageType: 'commandExecution',
+      commandExecution: { command, cwd, status: 'inProgress', aggregatedOutput: '', exitCode: null },
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+    }
+  }
+  function readCommandExecutionCompleted(notification: RpcNotification): UiMessage | null {
+    if (notification.method !== 'item/completed') return null
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    if (!item || item.type !== 'commandExecution') return null
+    const id = readString(item.id)
+    const command = readString(item.command)
+    if (!id) return null
+    const cwd = typeof item.cwd === 'string' ? item.cwd : null
+    const statusRaw = readString(item.status)
+    const status: CommandExecutionData['status'] =
+      statusRaw === 'failed' ? 'failed' : statusRaw === 'declined' ? 'declined' : statusRaw === 'interrupted' ? 'interrupted' : 'completed'
+    const aggregatedOutput = typeof item.aggregatedOutput === 'string' ? item.aggregatedOutput : ''
+    const exitCode = typeof item.exitCode === 'number' ? item.exitCode : null
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
+    return {
+      id,
+      role: 'system',
+      text: command,
+      messageType: 'commandExecution',
+      commandExecution: { command, cwd, status, aggregatedOutput, exitCode },
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+    }
+  }
+  function readCompletedFileChange(notification: RpcNotification): UiMessage | null {
+    if (notification.method !== 'item/completed') return null
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    if (!item || item.type !== 'fileChange') return null
+    const id = readString(item.id)
+    if (!id) return null
+    const threadId = readString(params?.threadId)
+    const turnId = readString(params?.turnId)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
+    const fileChanges = toUiFileChanges(item.changes)
+    const fileChangeStatus = normalizeFileChangeStatus(item.status)
+    if (fileChanges.length === 0 || fileChangeStatus !== 'completed') return null
+    return {
+      id,
+      role: 'system',
+      text: '',
+      messageType: 'fileChange',
+      fileChangeStatus,
+      fileChanges,
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+    }
+  }
+  function upsertLiveCommand(threadId: string, msg: UiMessage): void {
+    const previous = liveCommandsByThreadId.value[threadId] ?? []
+    const next = upsertMessage(previous, msg)
+    if (next === previous) return
+    liveCommandsByThreadId.value = { ...liveCommandsByThreadId.value, [threadId]: next }
+  }
+  function removeLiveCommandsPersistedIn(threadId: string, persistedMessages: UiMessage[]): void {
+    const current = liveCommandsByThreadId.value[threadId]
+    if (!current || current.length === 0) return
+    const persistedIds = new Set(persistedMessages.map((m) => m.id))
+    const next = current.filter((m) => !persistedIds.has(m.id))
+    if (next.length === current.length) return
+    if (next.length === 0) {
+      liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
+    } else {
+      liveCommandsByThreadId.value = { ...liveCommandsByThreadId.value, [threadId]: next }
+    }
+  }
+  function removeLiveFileChangesPersistedIn(threadId: string, persistedMessages: UiMessage[]): void {
+    const current = liveFileChangeMessagesByThreadId.value[threadId]
+    if (!current || current.length === 0) return
+    const persistedIds = new Set(persistedMessages.map((message) => message.id))
+    const persistedTurnIds = new Set(
+      persistedMessages
+        .filter((message) => message.messageType === 'fileChange' && typeof message.turnId === 'string' && message.turnId.length > 0)
+        .map((message) => message.turnId as string),
+    )
+    const persistedTurnIndices = new Set(
+      persistedMessages
+        .filter((message) => message.messageType === 'fileChange' && typeof message.turnIndex === 'number')
+        .map((message) => message.turnIndex as number),
+    )
+    const next = current.filter((message) => (
+      !persistedIds.has(message.id)
+      && !(message.turnId && persistedTurnIds.has(message.turnId))
+      && !(typeof message.turnIndex === 'number' && persistedTurnIndices.has(message.turnIndex))
+    ))
+    if (next.length === current.length) return
+    if (next.length === 0) {
+      liveFileChangeMessagesByThreadId.value = omitKey(liveFileChangeMessagesByThreadId.value, threadId)
+    } else {
+      liveFileChangeMessagesByThreadId.value = { ...liveFileChangeMessagesByThreadId.value, [threadId]: next }
+    }
+  }
+  function applyRealtimeUpdates(notification: RpcNotification): void {
+    if (handleServerRequestNotification(notification)) {
+      return
+    }
+    if (notification.method === 'account/rateLimits/updated') {
+      scheduleRateLimitRefresh()
+    }
+    if (notification.method === 'thread/name/updated') {
+      const params = asRecord(notification.params)
+      const threadId = readString(params?.threadId)
+      const threadName = readString(params?.threadName)
+      if (threadId && threadName) {
+        threadTitleById.value = { ...threadTitleById.value, [threadId]: threadName }
+        applyThreadFlags()
+        void persistThreadTitle(threadId, threadName)
+      }
+    }
+    if (notification.method === 'account/rateLimits/updated') {
+      setCodexRateLimit(pickCodexRateLimitSnapshot(notification.params))
+      return
+    }
+    const tokenUsageUpdate = readThreadTokenUsageUpdate(notification)
+    if (tokenUsageUpdate) {
+      setThreadTokenUsage(tokenUsageUpdate.threadId, tokenUsageUpdate.usage)
+      return
+    }
+    const turnActivity = readTurnActivity(notification)
+    if (turnActivity) {
+      setTurnActivityForThread(turnActivity.threadId, turnActivity.activity)
+    }
+    const notificationThreadId = extractThreadIdFromNotification(notification)
+    const notificationErrorState = readNotificationErrorState(notification)
+    if (!notificationErrorState && notificationThreadId) {
+      clearTransientTurnErrorForThread(notificationThreadId)
+    }
+    const startedTurn = readTurnStartedInfo(notification)
+    if (startedTurn) {
+      pendingTurnStartsById.set(startedTurn.turnId, startedTurn)
+      setTurnIndexForThread(startedTurn.threadId, startedTurn.turnId, inferNextTurnIndex(startedTurn.threadId))
+      activeTurnIdByThreadId.value = {
+        ...activeTurnIdByThreadId.value,
+        [startedTurn.threadId]: startedTurn.turnId,
+      }
+      maybeUnblockInterruptForActiveTurn(startedTurn.threadId, startedTurn.turnId)
+      clearLivePlansForThread(startedTurn.threadId)
+      clearLiveFileChangesForThread(startedTurn.threadId)
+      setTurnSummaryForThread(startedTurn.threadId, null)
+      setTurnErrorForThread(startedTurn.threadId, null)
+      setThreadInProgress(startedTurn.threadId, true)
+      scheduleQueueStateRefresh(startedTurn.threadId)
+      if (eventUnreadByThreadId.value[startedTurn.threadId]) {
+        eventUnreadByThreadId.value = omitKey(eventUnreadByThreadId.value, startedTurn.threadId)
+      }
+    }
+    const completedTurn = readTurnCompletedInfo(notification)
+    const turnErrorMessage = readTurnErrorMessage(notification)
+    const completedThreadId = completedTurn?.threadId ?? extractThreadIdFromNotification(notification)
+    const completedThreadModelId = completedThreadId ? readModelIdForThread(completedThreadId) : ''
+    const shouldRetryWithFallback =
+      Boolean(completedThreadId) &&
+      Boolean(turnErrorMessage) &&
+      completedThreadModelId !== MODEL_FALLBACK_ID &&
+      isUnsupportedChatGptModelError(new Error(turnErrorMessage))
+    if (completedTurn) {
+      const pendingTurnRequest = pendingTurnRequestByThreadId.value[completedTurn.threadId]
+      const startedTurnState = pendingTurnStartsById.get(completedTurn.turnId)
+      if (startedTurnState) {
+        pendingTurnStartsById.delete(completedTurn.turnId)
+      }
+      const rawDurationMs =
+        readNumber(asRecord(notification.params)?.durationMs) ??
+        readNumber(asRecord(asRecord(notification.params)?.turn)?.durationMs) ??
+        (typeof completedTurn.startedAtMs === 'number'
+          ? completedTurn.completedAtMs - completedTurn.startedAtMs
+          : null) ??
+        (startedTurnState ? completedTurn.completedAtMs - startedTurnState.startedAtMs : null)
+      const durationMs = typeof rawDurationMs === 'number' ? Math.max(0, rawDurationMs) : 0
+      setTurnSummaryForThread(completedTurn.threadId, {
+        turnId: completedTurn.turnId,
+        durationMs,
+      })
+      if (activeTurnIdByThreadId.value[completedTurn.threadId]) {
+        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, completedTurn.threadId)
+      }
+      setThreadInProgress(completedTurn.threadId, false)
+      setTurnActivityForThread(completedTurn.threadId, null)
+      markThreadUnreadByEvent(completedTurn.threadId)
+      if (!shouldRetryWithFallback) {
+        clearPendingTurnRequest(completedTurn.threadId)
+        scheduleQueueStateRefresh(completedTurn.threadId)
+      }
+    }
+    if (turnErrorMessage) {
+      const failedThreadId = completedTurn?.threadId || extractThreadIdFromNotification(notification)
+      if (failedThreadId) {
+        setTurnErrorForThread(failedThreadId, turnErrorMessage)
+      }
+      error.value = turnErrorMessage
+      if (failedThreadId && shouldRetryWithFallback) {
+        void retryPendingTurnWithFallback(failedThreadId)
+      }
+    } else if (completedTurn) {
+      setTurnErrorForThread(completedTurn.threadId, null)
+    }
+    if (notificationErrorState) {
+      const errorThreadId = notificationThreadId
+      const errorThreadModelId = errorThreadId ? readModelIdForThread(errorThreadId) : selectedModelId.value.trim()
+      if (errorThreadId) {
+        setTurnErrorForThread(errorThreadId, notificationErrorState.message, {
+          transient: notificationErrorState.transient,
+        })
+      }
+      error.value = notificationErrorState.message
+      if (errorThreadModelId !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(new Error(notificationErrorState.message))) {
+        if (errorThreadId) {
+          void retryPendingTurnWithFallback(errorThreadId)
+        } else {
+          void applyFallbackModelSelection()
+        }
+      }
+    }
+    const planUpdate = readPlanUpdate(notification)
+    if (planUpdate) {
+      upsertLivePlanMessage(planUpdate.threadId, planUpdate.message)
+      setTurnActivityForThread(planUpdate.threadId, {
+        label: 'Planning',
+        details: planUpdate.message.plan?.steps.map((step) => step.step).slice(0, 2) ?? [],
+      })
+    }
+    const planDelta = readPlanDelta(notification)
+    if (planDelta) {
+      upsertLivePlanMessage(planDelta.threadId, planDelta.message)
+      setTurnActivityForThread(planDelta.threadId, {
+        label: 'Planning',
+        details: [],
+      })
+    }
+    if (!notificationThreadId || notificationThreadId !== selectedThreadId.value) return
+    const startedAgentMessageId = readAgentMessageStartedId(notification)
+    if (startedAgentMessageId) {
+      activeReasoningItemId = ''
+    }
+    const liveAgentMessageDelta = readAgentMessageDelta(notification)
+    if (liveAgentMessageDelta) {
+      const existing = (liveAgentMessagesByThreadId.value[notificationThreadId] ?? [])
+        .find((message) => message.id === liveAgentMessageDelta.messageId)
+      const nextText = `${existing?.text ?? ''}${liveAgentMessageDelta.delta}`
+      upsertLiveAgentMessage(notificationThreadId, {
+        id: liveAgentMessageDelta.messageId,
+        role: 'assistant',
+        text: nextText,
+        messageType: 'agentMessage.live',
+      })
+    }
+    const completedAgentMessage = readAgentMessageCompleted(notification)
+    if (completedAgentMessage) {
+      upsertLiveAgentMessage(notificationThreadId, completedAgentMessage)
+    }
+    const completedImageView = readCompletedImageView(notification)
+    if (completedImageView) {
+      upsertLiveAgentMessage(notificationThreadId, completedImageView)
+    }
+    const startedReasoningItemId = readReasoningStartedItemId(notification)
+    if (startedReasoningItemId) {
+      activeReasoningItemId = startedReasoningItemId
+    }
+    const liveReasoningDelta = readReasoningDelta(notification)
+    if (liveReasoningDelta) {
+      appendLiveReasoningText(notificationThreadId, liveReasoningDelta.delta)
+    }
+    const sectionBreakMessageId = readReasoningSectionBreakMessageId(notification)
+    if (sectionBreakMessageId) {
+      const current = liveReasoningTextByThreadId.value[notificationThreadId] ?? ''
+      if (current.trim().length > 0 && !current.endsWith('\n\n')) {
+        setLiveReasoningText(notificationThreadId, `${current}\n\n`)
+      }
+    }
+    const completedReasoningMessageId = readReasoningCompletedId(notification)
+    if (completedReasoningMessageId) {
+      if (completedReasoningMessageId === liveReasoningMessageId(activeReasoningItemId)) {
+        activeReasoningItemId = ''
+      }
+    }
+    const commandStarted = readCommandExecutionStarted(notification)
+    if (commandStarted) {
+      upsertLiveCommand(notificationThreadId, commandStarted)
+      setTurnActivityForThread(notificationThreadId, { label: 'Running command', details: [commandStarted.commandExecution?.command ?? ''] })
+    }
+    const commandDelta = readCommandOutputDelta(notification)
+    if (commandDelta) {
+      const current = (liveCommandsByThreadId.value[notificationThreadId] ?? []).find((m) => m.id === commandDelta.itemId)
+      if (current?.commandExecution) {
+        upsertLiveCommand(notificationThreadId, {
+          ...current,
+          commandExecution: { ...current.commandExecution, aggregatedOutput: `${current.commandExecution.aggregatedOutput}${commandDelta.delta}` },
+        })
+      }
+    }
+    const commandCompleted = readCommandExecutionCompleted(notification)
+    if (commandCompleted) {
+      upsertLiveCommand(notificationThreadId, commandCompleted)
+    }
+    const completedFileChange = readCompletedFileChange(notification)
+    if (completedFileChange) {
+      upsertLiveFileChangeMessage(notificationThreadId, completedFileChange)
+    }
+    if (isAgentContentEvent(notification)) {
+      activeReasoningItemId = ''
+      clearLiveReasoningForThread(notificationThreadId)
+    }
+    if (notification.method === 'turn/completed') {
+      activeReasoningItemId = ''
+      shouldAutoScrollOnNextAgentEvent = false
+      clearLiveReasoningForThread(notificationThreadId)
+      if (liveCommandsByThreadId.value[notificationThreadId]) {
+        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, notificationThreadId)
+      }
+      const completedThreadId = extractThreadIdFromNotification(notification)
+      if (completedThreadId) {
+        setThreadInProgress(completedThreadId, false)
+        setTurnActivityForThread(completedThreadId, null)
+        markThreadUnreadByEvent(completedThreadId)
+        if (!shouldRetryWithFallback) {
+          clearPendingTurnRequest(completedThreadId)
+          scheduleQueueStateRefresh(completedThreadId)
+        }
+      }
+    }
+  }
+  function queueEventDrivenSync(notification: RpcNotification): void {
+    if (notification.method === 'thread/tokenUsage/updated') return
+    const method = notification.method
+    const shouldRefreshMessages =
+      method === 'turn/started' ||
+      method === 'turn/completed' ||
+      method === 'error'
+    const shouldRefreshThreads =
+      method.startsWith('thread/') ||
+      method === 'turn/completed'
+    if (!shouldRefreshMessages && !shouldRefreshThreads) return
+    const threadId = extractThreadIdFromNotification(notification)
+    if (threadId && shouldRefreshMessages) {
+      pendingThreadMessageRefresh.add(threadId)
+    }
+    if (shouldRefreshThreads) {
+      pendingThreadsRefresh = true
+    }
+    if (eventSyncTimer !== null || typeof window === 'undefined') return
+    eventSyncTimer = window.setTimeout(() => {
+      eventSyncTimer = null
+      void syncFromNotifications()
+    }, EVENT_SYNC_DEBOUNCE_MS)
+  }
+  async function hydrateWorkspaceRootsStateIfNeeded(
+    groups: UiProjectGroup[],
+    rootsState: WorkspaceRootsState | null,
+  ): Promise<void> {
+    if (hasHydratedWorkspaceRootsState) return
+    hasHydratedWorkspaceRootsState = true
+    try {
+      if (!rootsState) return
+      const hydratedOrder: string[] = []
+      for (const rootPath of getWorkspaceProjectOrderPaths(rootsState)) {
+        const projectName = toProjectNameFromWorkspaceRoot(rootPath)
+        if (hydratedOrder.includes(projectName)) continue
+        hydratedOrder.push(projectName)
+      }
+      if (hydratedOrder.length > 0) {
+        const mergedOrder = rootsState.projectOrder.length > 0
+          ? mergeProjectOrder(hydratedOrder, groups)
+          : mergeProjectOrder(projectOrder.value, groups)
+        if (!areStringArraysEqual(projectOrder.value, mergedOrder)) {
+          projectOrder.value = mergedOrder
+        }
+      }
+      if (Object.keys(rootsState.labels).length > 0 || (rootsState.remoteProjects ?? []).length > 0) {
+        const nextLabels = { ...projectDisplayNameById.value }
+        let changed = false
+        for (const [rootPath, label] of Object.entries(rootsState.labels)) {
+          const normalizedRootPath = normalizePathForUi(rootPath).trim()
+          const projectNames = [toProjectNameFromWorkspaceRoot(rootPath)]
+          if (normalizedRootPath) projectNames.push(normalizedRootPath)
+          for (const projectName of projectNames) {
+            if (nextLabels[projectName] === label) continue
+            nextLabels[projectName] = label
+            changed = true
+          }
+        }
+        for (const rootPath of rootsState.order) {
+          const leafName = toProjectNameFromWorkspaceRoot(rootPath)
+          const parentLeafName = toProjectName(getPathParent(rootPath))
+          if (!parentLeafName.startsWith('.') || parentLeafName === leafName) continue
+          const displayName = `${leafName} ${parentLeafName}`
+          if (nextLabels[leafName] !== undefined || nextLabels[leafName] === displayName) continue
+          nextLabels[leafName] = displayName
+          changed = true
+        }
+        for (const remoteProject of rootsState.remoteProjects ?? []) {
+          const label = getRemoteProjectDisplayName(remoteProject)
+          if (nextLabels[remoteProject.id] === label) continue
+          nextLabels[remoteProject.id] = label
+          changed = true
+        }
+        if (changed) {
+          projectDisplayNameById.value = nextLabels
+        }
+      }
+    } catch {
+      // Keep local storage fallback when global state is unavailable.
+    }
+  }
+  async function loadThreadTitleCacheIfNeeded(): Promise<void> {
+    if (Object.keys(threadTitleById.value).length > 0) return
+    try {
+      const cache = await getThreadTitleCache()
+      if (Object.keys(cache.titles).length > 0) {
+        threadTitleById.value = cache.titles
+      }
+    } catch {
+      // Title cache is optional; keep UI functional.
+    }
+  }
+  async function loadWorkspaceRootsStateForThreadList(): Promise<WorkspaceRootsState | null> {
+    try {
+      return await getWorkspaceRootsState()
+    } catch {
+      return null
+    }
+  }
+  async function requestThreadTitleGeneration(threadId: string, prompt: string, cwd: string | null): Promise<void> {
+    if (threadTitleById.value[threadId]) return
+    const trimmed = prompt.trim()
+    if (!trimmed) return
+    const truncated = trimmed.length > 300 ? trimmed.slice(0, 300) : trimmed
+    try {
+      const title = await generateThreadTitle(truncated, cwd)
+      if (!title || threadTitleById.value[threadId]) return
+      threadTitleById.value = { ...threadTitleById.value, [threadId]: title }
+      applyThreadFlags()
+      void persistThreadTitle(threadId, title)
+    } catch {
+      // Title generation is best-effort.
+    }
+  }
+  function filterGroupsByWorkspaceRoots(
+    groups: UiProjectGroup[],
+    rootsState: WorkspaceRootsState | null,
+  ): UiProjectGroup[] {
+    const duplicateLeafNames = collectDuplicateProjectLeafNames(groups, rootsState)
+    const disambiguatedGroups = disambiguateProjectGroupsByCwd(groups, rootsState)
+    const groupsWithWorkspaceRoots = addWorkspaceRootPlaceholderGroups(disambiguatedGroups, rootsState, duplicateLeafNames)
+    if (!rootsState || (rootsState.order.length === 0 && (rootsState.remoteProjects ?? []).length === 0)) return groupsWithWorkspaceRoots
+    const allowedProjectNames = new Set<string>()
+    for (const projectName of getWorkspaceProjectOrderNames(rootsState, duplicateLeafNames)) {
+      allowedProjectNames.add(projectName)
+    }
+    const filteredGroups = groupsWithWorkspaceRoots.filter((group) => {
+      if (allowedProjectNames.has(group.projectName)) return true
+      return isProjectlessGroup(group)
+    })
+    return orderGroupsByWorkspaceProjectOrder(filteredGroups, rootsState, duplicateLeafNames)
+  }
+  function applyThreadGroups(groups: UiProjectGroup[], rootsState: WorkspaceRootsState | null): void {
+    const visibleGroups = filterGroupsByWorkspaceRoots(groups, rootsState)
+    const hasWorkspaceRootsState = Boolean(
+      rootsState && (rootsState.order.length > 0 || rootsState.projectOrder.length > 0 || (rootsState.remoteProjects ?? []).length > 0),
+    )
+    const nextProjectOrder = rootsState?.projectOrder.length
+      ? mergeProjectOrder(
+        getWorkspaceProjectOrderNames(rootsState, collectDuplicateProjectLeafNames(groups, rootsState)),
+        visibleGroups,
+      )
+      : mergeProjectOrder(projectOrder.value, visibleGroups)
+    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
+      projectOrder.value = nextProjectOrder
+      if (!hasWorkspaceRootsState) {
+        saveProjectOrder(projectOrder.value)
+      }
+    }
+    const orderedGroups = orderGroupsByProjectOrder(visibleGroups, projectOrder.value)
+    markServerListedThreads(new Set(flattenThreads(orderedGroups).map((thread) => thread.id)))
+    const mergedWithInProgress = mergeIncomingWithLocalInProgressThreads(
+      sourceGroups.value,
+      orderedGroups,
+      inProgressById.value,
+    )
+    sourceGroups.value = mergeThreadGroups(sourceGroups.value, mergedWithInProgress)
+    inProgressById.value = pruneThreadStateMap(
+      inProgressById.value,
+      new Set(flattenThreads(sourceGroups.value).map((thread) => thread.id)),
+    )
+    applyThreadFlags()
+  }
+  function normalizeQueueStateForPersistence(state: Record<string, QueuedMessage[]>): ThreadQueueState {
+    const next: ThreadQueueState = {}
+    for (const [threadId, queue] of Object.entries(state)) {
+      const normalizedThreadId = threadId.trim()
+      if (!normalizedThreadId || queue.length === 0) continue
+      next[normalizedThreadId] = queue.map((message) => ({
+        id: message.id,
+        text: message.text,
+        imageUrls: [...message.imageUrls],
+        skills: message.skills.map((skill) => ({ name: skill.name, path: skill.path })),
+        fileAttachments: message.fileAttachments.map((attachment) => ({
+          label: attachment.label,
+          path: attachment.path,
+          fsPath: attachment.fsPath,
+        })),
+        collaborationMode: message.collaborationMode,
+      }))
+    }
+    return next
+  }
+  function persistQueueState(): void {
+    void setThreadQueueState(normalizeQueueStateForPersistence(queuedMessagesByThreadId.value)).catch(() => {
+      // Queue persistence is best-effort; keep the current in-memory queue usable.
+    })
+  }
+  async function loadPersistedQueueStateIfNeeded(): Promise<void> {
+    if (hasLoadedPersistedQueueState) return
+    hasLoadedPersistedQueueState = true
+    try {
+      queuedMessagesByThreadId.value = await getThreadQueueState()
+    } catch {
+      // Backend queue state is optional during startup.
+    }
+  }
+  function removeArchivedThreadFromLoadedLists(threadId: string): void {
+    loadedThreadListGroups = removeThreadFromGroups(loadedThreadListGroups, threadId)
+    sourceGroups.value = removeThreadFromGroups(sourceGroups.value, threadId)
+    inProgressById.value = omitKey(inProgressById.value, threadId)
+    applyThreadFlags()
+  }
+  function mergeThreadGroupPages(previous: UiProjectGroup[], incoming: UiProjectGroup[]): UiProjectGroup[] {
+    if (previous.length === 0) return incoming
+    if (incoming.length === 0) return previous
+    const threadById = new Map<string, UiThread>()
+    for (const thread of flattenThreads(previous)) {
+      threadById.set(thread.id, thread)
+    }
+    for (const thread of flattenThreads(incoming)) {
+      threadById.set(thread.id, thread)
+    }
+    const groupsByProject = new Map<string, UiThread[]>()
+    for (const thread of threadById.values()) {
+      const existing = groupsByProject.get(thread.projectName)
+      if (existing) existing.push(thread)
+      else groupsByProject.set(thread.projectName, [thread])
+    }
+    return Array.from(groupsByProject.entries())
+      .map(([projectName, threads]) => ({
+        projectName,
+        threads: threads.sort(
+          (first, second) => new Date(second.updatedAtIso).getTime() - new Date(first.updatedAtIso).getTime(),
+        ),
+      }))
+      .sort((first, second) => {
+        const firstUpdated = new Date(first.threads[0]?.updatedAtIso ?? 0).getTime()
+        const secondUpdated = new Date(second.threads[0]?.updatedAtIso ?? 0).getTime()
+        return secondUpdated - firstUpdated
+      })
+  }
+  function hasActiveInProgressThreads(): boolean {
+    return Object.values(inProgressById.value).some((value) => value === true)
+  }
+  function scheduleRemainingThreadPages(rootsState: WorkspaceRootsState | null = loadedThreadListRootsState): void {
+    if (!threadListNextCursor || isLoadingRemainingThreadPages || hasActiveInProgressThreads()) return
+    loadedThreadListRootsState = rootsState
+    if (typeof window === 'undefined') {
+      void loadRemainingThreadPages(rootsState)
+      return
+    }
+    if (threadListBackgroundTimer !== null) {
+      window.clearTimeout(threadListBackgroundTimer)
+    }
+    threadListBackgroundTimer = window.setTimeout(() => {
+      threadListBackgroundTimer = null
+      if (!threadListNextCursor || hasActiveInProgressThreads()) return
+      void loadRemainingThreadPages(loadedThreadListRootsState)
+    }, BACKGROUND_THREAD_PAGINATION_DELAY_MS)
+  }
+  async function loadRemainingThreadPages(rootsState: WorkspaceRootsState | null): Promise<void> {
+    if (isLoadingRemainingThreadPages || !threadListNextCursor || hasActiveInProgressThreads()) return
+    isLoadingRemainingThreadPages = true
+    try {
+      const page = await getThreadGroupsPage(threadListNextCursor, getBackgroundThreadListLimit())
+      threadListNextCursor = page.nextCursor
+      hasLoadedAllThreadPages = page.nextCursor === null
+      isThreadListFullyLoaded.value = hasLoadedAllThreadPages
+      loadedThreadListGroups = mergeThreadGroupPages(loadedThreadListGroups, page.groups)
+      applyThreadGroups(loadedThreadListGroups, rootsState)
+    } catch {
+      // Keep the first page usable; a later refresh can retry remaining pages.
+    } finally {
+      isLoadingRemainingThreadPages = false
+      if (threadListNextCursor && !hasActiveInProgressThreads()) {
+        scheduleRemainingThreadPages(rootsState)
+      }
+    }
+  }
+  async function loadThreads() {
+    if (loadThreadsPromise) {
+      await loadThreadsPromise
+      return
+    }
+    loadThreadsPromise = (async () => {
+    if (!hasLoadedThreads.value) {
+      isLoadingThreads.value = true
+    }
+    try {
+      const [page, rootsState] = await Promise.all([
+        getThreadGroupsPage(),
+        loadWorkspaceRootsStateForThreadList(),
+        loadThreadTitleCacheIfNeeded(),
+      ])
+      loadedThreadListRootsState = rootsState
+      const groups = page.groups
+      loadedThreadListGroups = hasLoadedThreads.value
+        ? mergeThreadGroupPages(loadedThreadListGroups, groups)
+        : groups
+      threadListNextCursor = hasLoadedThreads.value && !hasLoadedAllThreadPages
+        ? threadListNextCursor
+        : page.nextCursor
+      hasLoadedAllThreadPages = page.nextCursor === null
+      isThreadListFullyLoaded.value = hasLoadedAllThreadPages
+      await hydrateWorkspaceRootsStateIfNeeded(groups, rootsState)
+      applyThreadGroups(loadedThreadListGroups, rootsState)
+      hasLoadedThreads.value = true
+      if (!hasLoadedAllThreadPages) {
+        scheduleRemainingThreadPages(rootsState)
+      }
+      const flatThreads = flattenThreads(projectGroups.value)
+      pruneThreadScopedState(flatThreads)
+      const currentExists = flatThreads.some((thread) => thread.id === selectedThreadId.value)
+      if (!currentExists && !selectedThreadId.value) {
+        setSelectedThreadId(flatThreads[0]?.id ?? '')
+      }
+    } finally {
+      isLoadingThreads.value = false
+    }
+    })().finally(() => {
+      loadThreadsPromise = null
+    })
+    await loadThreadsPromise
+  }
+  async function loadMessages(threadId: string, options: { silent?: boolean } = {}) {
+    if (!threadId) {
+      return
+    }
+    const existingLoad = loadMessagePromiseByThreadId.get(threadId)
+    if (existingLoad) {
+      await existingLoad
+      return
+    }
+    const alreadyLoaded = loadedMessagesByThreadId.value[threadId] === true
+    const shouldShowLoading = options.silent !== true && !alreadyLoaded
+    if (shouldShowLoading) {
+      isLoadingMessages.value = true
+    }
+    const loadPromise = (async () => {
+      try {
+      const version = currentThreadVersion(threadId)
+      const loadedVersion = loadedVersionByThreadId.value[threadId] ?? ''
+      const loadedRecently =
+        Date.now() - (lastMessageLoadAtByThreadId.get(threadId) ?? 0) < RECENT_THREAD_MESSAGE_LOAD_REUSE_MS
+      const canReuseLoadedMessages =
+        alreadyLoaded &&
+        (
+          loadedRecently ||
+          (
+            (version.length === 0 || loadedVersion === version) &&
+            inProgressById.value[threadId] !== true
+          )
+        )
+      if (canReuseLoadedMessages) {
+        markThreadAsRead(threadId)
+        return
+      }
+      const needsResume = resumedThreadById.value[threadId] !== true
+      const resumedThread = needsResume ? await resumeThread(threadId) : null
+      const detail = resumedThread ?? await getThreadDetail(threadId)
+      if (resumedThread) {
+        setThreadModelId(threadId, resumedThread.model)
+        resumedThreadById.value = {
+          ...resumedThreadById.value,
+          [threadId]: true,
+        }
+      }
+      const { messages: nextMessages, inProgress, activeTurnId, turnIndexByTurnId } = detail
+      hasMoreOlderMessagesByThreadId.value = {
+        ...hasMoreOlderMessagesByThreadId.value,
+        [threadId]: detail.hasMoreOlder === true,
+      }
+      markThreadMessagesPersisted(threadId, nextMessages)
+      replaceTurnIndexLookupForThread(threadId, turnIndexByTurnId)
+      rebindLiveFileChangeTurnIndices(threadId)
+      const previousPersisted = persistedMessagesByThreadId.value[threadId] ?? []
+      const mergedMessages = mergeMessages(previousPersisted, nextMessages, {
+        preserveMissing: options.silent === true,
+      })
+      setPersistedMessagesForThread(threadId, mergedMessages)
+      const previousLiveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
+      if (inProgress) {
+        const nextLiveAgent = removeRedundantLiveAgentMessages(previousLiveAgent, nextMessages)
+        setLiveAgentMessagesForThread(threadId, nextLiveAgent)
+      } else {
+        clearLiveAgentMessagesForThread(threadId)
+      }
+      removeLiveCommandsPersistedIn(threadId, nextMessages)
+      removeLiveFileChangesPersistedIn(threadId, nextMessages)
+      loadedMessagesByThreadId.value = {
+        ...loadedMessagesByThreadId.value,
+        [threadId]: true,
+      }
+      lastMessageLoadAtByThreadId.set(threadId, Date.now())
+      if (version) {
+        loadedVersionByThreadId.value = {
+          ...loadedVersionByThreadId.value,
+          [threadId]: version,
+        }
+      }
+      setThreadInProgress(threadId, inProgress)
+      if (activeTurnId) {
+        activeTurnIdByThreadId.value = {
+          ...activeTurnIdByThreadId.value,
+          [threadId]: activeTurnId,
+        }
+      } else if (activeTurnIdByThreadId.value[threadId]) {
+        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
+      }
+      if (!inProgress) {
+        clearCompletedTurnLiveState(threadId)
+      }
+      markThreadAsRead(threadId)
+      } finally {
+      if (shouldShowLoading) {
+        isLoadingMessages.value = false
+      }
+      }
+    })().finally(() => {
+      loadMessagePromiseByThreadId.delete(threadId)
+    })
+    loadMessagePromiseByThreadId.set(threadId, loadPromise)
+    await loadPromise
+  }
+  async function loadOlderMessages(threadId: string = selectedThreadId.value): Promise<void> {
+    if (!threadId) return
+    if (loadingOlderMessagesByThreadId.value[threadId] === true) return
+    if (hasMoreOlderMessagesByThreadId.value[threadId] !== true) return
+    const beforeTurnId = getFirstPersistedTurnId(threadId)
+    if (!beforeTurnId) {
+      hasMoreOlderMessagesByThreadId.value = {
+        ...hasMoreOlderMessagesByThreadId.value,
+        [threadId]: false,
+      }
+      return
+    }
+    loadingOlderMessagesByThreadId.value = {
+      ...loadingOlderMessagesByThreadId.value,
+      [threadId]: true,
+    }
+    try {
+      const page = await getOlderThreadMessages(threadId, beforeTurnId)
+      const previousPersisted = persistedMessagesByThreadId.value[threadId] ?? []
+      const mergedMessages = mergeMessages(page.messages, previousPersisted, { preserveMissing: true })
+      setPersistedMessagesForThread(threadId, mergedMessages)
+      replaceTurnIndexLookupForThread(threadId, {
+        ...(turnIndexByTurnIdByThreadId.value[threadId] ?? {}),
+        ...page.turnIndexByTurnId,
+      })
+      rebindLiveFileChangeTurnIndices(threadId)
+      hasMoreOlderMessagesByThreadId.value = {
+        ...hasMoreOlderMessagesByThreadId.value,
+        [threadId]: page.hasMoreOlder,
+      }
+    } catch (loadError) {
+      error.value = loadError instanceof Error ? loadError.message : 'Failed to load earlier messages'
+      throw loadError
+    } finally {
+      loadingOlderMessagesByThreadId.value = {
+        ...loadingOlderMessagesByThreadId.value,
+        [threadId]: false,
+      }
+    }
+  }
+  async function ensureThreadMessagesLoaded(threadId: string, options: { silent?: boolean } = {}): Promise<void> {
+    if (!threadId) return
+    if (loadedMessagesByThreadId.value[threadId] === true) return
+    await loadMessages(threadId, options)
+  }
+  async function refreshSkills(): Promise<void> {
+    if (refreshSkillsPromise) {
+      await refreshSkillsPromise
+      return
+    }
+    refreshSkillsPromise = (async () => {
+      try {
+        const selectedCwd = selectedThread.value?.cwd?.trim() ?? ''
+        installedSkills.value = await getSkillsList(selectedCwd ? [selectedCwd] : undefined)
+      } catch {
+        // keep previous skills on failure
+      } finally {
+        refreshSkillsPromise = null
+      }
+    })()
+    await refreshSkillsPromise
+  }
+  async function refreshAncillaryState(
+    options: { providerChanged?: boolean; includeProviderModels?: boolean } = {},
+  ): Promise<void> {
+    await Promise.allSettled([
+      refreshModelPreferences({
+        providerChanged: options.providerChanged,
+        includeProviderModels: options.includeProviderModels,
+      }),
+      refreshRateLimits(),
+      refreshCollaborationModes(),
+      refreshSkills(),
+    ])
+  }
+  function scheduleAncillaryStateRefresh(
+    options: { providerChanged?: boolean; includeProviderModels?: boolean } = {},
+  ): void {
+    const run = () => {
+      void refreshAncillaryState(options)
+    }
+    if (typeof window === 'undefined') {
+      run()
+      return
+    }
+    window.setTimeout(run, 0)
+  }
+  async function refreshAll(
+    options: { includeSelectedThreadMessages?: boolean; awaitAncillaryRefreshes?: boolean; providerChanged?: boolean } = {},
+  ) {
+    error.value = ''
+    const includeSelectedThreadMessages = options.includeSelectedThreadMessages !== false
+    const awaitAncillaryRefreshes = options.awaitAncillaryRefreshes === true
+    try {
+      await loadPersistedQueueStateIfNeeded()
+      await loadThreads()
+      if (includeSelectedThreadMessages) {
+        await loadMessages(selectedThreadId.value)
+      }
+      if (awaitAncillaryRefreshes) {
+        await refreshAncillaryState({
+          providerChanged: options.providerChanged,
+          includeProviderModels: options.providerChanged === true || awaitAncillaryRefreshes,
+        })
+      } else {
+        scheduleAncillaryStateRefresh({
+          providerChanged: options.providerChanged,
+          includeProviderModels: false,
+        })
+      }
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+    }
+  }
+  async function selectThread(threadId: string) {
+    setSelectedThreadId(threadId)
+    try {
+      await loadMessages(threadId)
+      void refreshSkills()
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+    }
+  }
+  async function archiveThreadById(threadId: string) {
+    const wasSelectedThread = selectedThreadId.value === threadId
+    const nextSelectedThreadId = wasSelectedThread
+      ? findAdjacentThreadId(flattenThreads(projectGroups.value), threadId)
+      : ''
+    if (wasSelectedThread) {
+      setSelectedThreadId(nextSelectedThreadId)
+      if (nextSelectedThreadId) {
+        void loadMessages(nextSelectedThreadId, { silent: true })
+      }
+    }
+    try {
+      await archiveThread(threadId)
+      removeArchivedThreadFromLoadedLists(threadId)
+      await loadThreads()
+      if (wasSelectedThread && nextSelectedThreadId && selectedThreadId.value === nextSelectedThreadId) {
+        await ensureThreadMessagesLoaded(nextSelectedThreadId, { silent: true })
+      }
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+    }
+  }
+  async function renameThreadById(threadId: string, threadName: string) {
+    const normalizedName = threadName.trim()
+    if (!threadId || !normalizedName) return
+    try {
+      await renameThread(threadId, normalizedName)
+      threadTitleById.value = { ...threadTitleById.value, [threadId]: normalizedName }
+      applyThreadFlags()
+      void persistThreadTitle(threadId, normalizedName)
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+    }
+  }
+  async function forkThreadById(threadId: string): Promise<string> {
+    const sourceThreadId = threadId.trim()
+    if (!sourceThreadId) return ''
+    const sourceThread = flattenThreads(sourceGroups.value).find((row) => row.id === sourceThreadId)
+    const sourceCwd = sourceThread?.cwd?.trim() ?? ''
+    const sourceTitle = sourceThread?.title?.trim() ?? 'Forked chat'
+    const selectedModel = readModelIdForThread(sourceThreadId)
+    error.value = ''
+    try {
+      const forkedThread = await forkThread(sourceThreadId, sourceCwd || undefined, selectedModel || undefined)
+      const nextThreadId = forkedThread.threadId.trim()
+      if (!nextThreadId) return ''
+      insertOptimisticThread(nextThreadId, sourceCwd, sourceTitle)
+      setThreadModelId(nextThreadId, forkedThread.model)
+      resumedThreadById.value = {
+        ...resumedThreadById.value,
+        [nextThreadId]: true,
+      }
+      setSelectedThreadId(nextThreadId)
+      await loadThreads()
+      await loadMessages(nextThreadId)
+      return nextThreadId
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+      return ''
+    }
+  }
+  async function forkThreadFromTurn(threadId: string, turnIndex: number): Promise<string> {
+    const normalizedThreadId = threadId.trim()
+    if (!normalizedThreadId || !Number.isInteger(turnIndex) || turnIndex < 0) return ''
+    if (inProgressById.value[normalizedThreadId] === true) {
+      error.value = 'Finish the current turn before forking from a response.'
+      return ''
+    }
+    if (loadedMessagesByThreadId.value[normalizedThreadId] !== true) {
+      try {
+        await loadMessages(normalizedThreadId)
+      } catch (unknownError) {
+        error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+        return ''
+      }
+    }
+    const sourceMessages = persistedMessagesByThreadId.value[normalizedThreadId] ?? []
+    let lastTurnIndex = -1
+    for (const message of sourceMessages) {
+      if (typeof message.turnIndex === 'number' && Number.isFinite(message.turnIndex)) {
+        lastTurnIndex = Math.max(lastTurnIndex, message.turnIndex)
+      }
+    }
+    if (lastTurnIndex >= 0 && turnIndex > lastTurnIndex) return ''
+    const sourceThread = flattenThreads(sourceGroups.value).find((row) => row.id === normalizedThreadId) ?? null
+    try {
+      error.value = ''
+      const forked = await forkThread(normalizedThreadId)
+      const forkedThreadId = forked.threadId.trim()
+      if (!forkedThreadId) return ''
+      const forkedCwd = forked.cwd.trim() || sourceThread?.cwd?.trim() || ''
+      const forkedThreadTitle = toForkedThreadTitle(sourceThread?.title || sourceThread?.preview || 'Untitled thread')
+      insertOptimisticThread(forkedThreadId, forkedCwd, forkedThreadTitle)
+      setThreadModelId(forkedThreadId, forked.model)
+      setPersistedMessagesForThread(forkedThreadId, forked.messages)
+      loadedMessagesByThreadId.value = {
+        ...loadedMessagesByThreadId.value,
+        [forkedThreadId]: true,
+      }
+      resumedThreadById.value = {
+        ...resumedThreadById.value,
+        [forkedThreadId]: true,
+      }
+      clearLivePlansForThread(forkedThreadId)
+      setLiveAgentMessagesForThread(forkedThreadId, [])
+      clearLiveReasoningForThread(forkedThreadId)
+      if (liveCommandsByThreadId.value[forkedThreadId]) {
+        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, forkedThreadId)
+      }
+      setTurnSummaryForThread(forkedThreadId, null)
+      setTurnActivityForThread(forkedThreadId, null)
+      setTurnErrorForThread(forkedThreadId, null)
+      setThreadInProgress(forkedThreadId, false)
+      const turnsToRollback = lastTurnIndex - turnIndex
+      if (turnsToRollback > 0) {
+        const rolledBackMessages = await rollbackThread(forkedThreadId, turnsToRollback)
+        setPersistedMessagesForThread(forkedThreadId, rolledBackMessages)
+      }
+      await renameThreadById(forkedThreadId, forkedThreadTitle)
+      setSelectedThreadId(forkedThreadId)
+      void loadThreads().catch(() => {})
+      return forkedThreadId
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+      return ''
+    }
+  }
+  async function maybeReplyToPendingUserInputRequest(
+    threadId: string,
+    text: string,
+    imageUrls: string[] = [],
+    skills: Array<{ name: string; path: string }> = [],
+    fileAttachments: FileAttachment[] = [],
+  ): Promise<boolean> {
+    if (!threadId || !text.trim()) return false
+    if (imageUrls.length > 0 || skills.length > 0 || fileAttachments.length > 0) return false
+    const requests = pendingServerRequestsByThreadId.value[threadId] ?? []
+    const userInputRequests = requests.filter((request) => request.method === 'item/tool/requestUserInput')
+    if (userInputRequests.length !== 1) return false
+    const [request] = userInputRequests
+    const questionIds = readToolRequestUserInputQuestionIds(request)
+    if (questionIds.length !== 1) return false
+    return respondToPendingServerRequest({
+      id: request.id,
+      result: {
+        answers: {
+          [questionIds[0]]: {
+            answers: [text.trim()],
+          },
+        },
+      },
+    })
+  }
+  async function sendMessageToSelectedThread(
+    text: string,
+    imageUrls: string[] = [],
+    skills: Array<{ name: string; path: string }> = [],
+    mode: 'steer' | 'queue' = 'steer',
+    fileAttachments: FileAttachment[] = [],
+    queueInsertIndex?: number,
+    collaborationModeOverride?: CollaborationModeKind,
+  ): Promise<void> {
+    if (isUpdatingSpeedMode.value) return
+    const threadId = selectedThreadId.value
+    const nextText = text.trim()
+    if (!threadId || (!nextText && imageUrls.length === 0 && fileAttachments.length === 0)) return
+    if (await maybeReplyToPendingUserInputRequest(threadId, nextText, imageUrls, skills, fileAttachments)) {
+      return
+    }
+    const isInProgress = inProgressById.value[threadId] === true
+    if (isInProgress && mode === 'queue') {
+      const queue = queuedMessagesByThreadId.value[threadId] ?? []
+      const id = `q-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+      const nextQueue = [...queue]
+      const insertIndex = typeof queueInsertIndex === 'number'
+        ? Math.max(0, Math.min(queueInsertIndex, nextQueue.length))
+        : nextQueue.length
+      nextQueue.splice(insertIndex, 0, {
+        id,
+        text: nextText,
+        imageUrls,
+        skills,
+        fileAttachments,
+        collaborationMode: collaborationModeOverride === 'plan'
+          ? 'plan'
+          : collaborationModeOverride === 'default'
+            ? 'default'
+            : selectedCollaborationMode.value,
+      })
+      queuedMessagesByThreadId.value = {
+        ...queuedMessagesByThreadId.value,
+        [threadId]: nextQueue,
+      }
+      persistQueueState()
+      return
+    }
+    if (isInProgress) {
+      shouldAutoScrollOnNextAgentEvent = true
+      void startTurnForThread(
+        threadId,
+        nextText,
+        imageUrls,
+        skills,
+        fileAttachments,
+        collaborationModeOverride,
+      ).catch((unknownError) => {
+        const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+        setTurnErrorForThread(threadId, errorMessage)
+        error.value = errorMessage
+      })
+      return
+    }
+    error.value = ''
+    shouldAutoScrollOnNextAgentEvent = true
+    setTurnSummaryForThread(threadId, null)
+    setTurnActivityForThread(
+      threadId,
+      {
+        label: 'Thinking',
+        details: buildPendingTurnDetails(
+          readModelIdForThread(threadId),
+          selectedReasoningEffort.value,
+          collaborationModeOverride === 'plan'
+            ? 'plan'
+            : collaborationModeOverride === 'default'
+              ? 'default'
+              : selectedCollaborationMode.value,
+        ),
+      },
+    )
+    setTurnErrorForThread(threadId, null)
+    setThreadInProgress(threadId, true)
+    try {
+      await startTurnForThread(
+        threadId,
+        nextText,
+        imageUrls,
+        skills,
+        fileAttachments,
+        collaborationModeOverride,
+      )
+    } catch (unknownError) {
+      shouldAutoScrollOnNextAgentEvent = false
+      setThreadInProgress(threadId, false)
+      setTurnActivityForThread(threadId, null)
+      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+      setTurnErrorForThread(threadId, errorMessage)
+      error.value = errorMessage
+      throw unknownError
+    }
+  }
+  async function sendMessageToNewThread(
+    text: string,
+    cwd: string,
+    imageUrls: string[] = [],
+    skills: Array<{ name: string; path: string }> = [],
+    fileAttachments: FileAttachment[] = [],
+  ): Promise<string> {
+    if (isUpdatingSpeedMode.value) return ''
+    const nextText = text.trim()
+    const targetCwd = cwd.trim()
+    const selectedModel = readModelIdForThread(NEW_THREAD_COLLABORATION_MODE_CONTEXT).trim()
+    const selectedMode = selectedCollaborationMode.value
+    if (!nextText && imageUrls.length === 0 && fileAttachments.length === 0) return ''
+    isSendingMessage.value = true
+    error.value = ''
+    let threadId = ''
+    try {
+      try {
+        const startedThread = await startThread(targetCwd || undefined, selectedModel || undefined)
+        threadId = startedThread.threadId
+        setThreadModelId(threadId, startedThread.model)
+        setSelectedCollaborationModeForThread(threadId, selectedMode)
+      } catch (unknownError) {
+        if (selectedModel && selectedModel !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(unknownError)) {
+          await applyFallbackModelSelection()
+          const fallbackThread = await startThread(targetCwd || undefined, MODEL_FALLBACK_ID)
+          threadId = fallbackThread.threadId
+          setThreadModelId(threadId, fallbackThread.model)
+          setSelectedCollaborationModeForThread(threadId, selectedMode)
+        } else {
+          throw unknownError
+        }
+      }
+      if (!threadId) return ''
+      insertOptimisticThread(threadId, targetCwd, nextText || '[Image]')
+      blockInterruptUntilThreadIsPersisted(threadId)
+      resumedThreadById.value = {
+        ...resumedThreadById.value,
+        [threadId]: true,
+      }
+      setSelectedThreadId(threadId)
+      shouldAutoScrollOnNextAgentEvent = true
+      setTurnSummaryForThread(threadId, null)
+      setTurnActivityForThread(
+        threadId,
+        {
+          label: 'Thinking',
+          details: buildPendingTurnDetails(
+            readModelIdForThread(threadId),
+            selectedReasoningEffort.value,
+            selectedMode,
+          ),
+        },
+      )
+      setTurnErrorForThread(threadId, null)
+      setThreadInProgress(threadId, true)
+      const capturedThreadId = threadId
+      const capturedCwd = targetCwd || null
+      const capturedPrompt = nextText
+      void startTurnForThread(threadId, nextText, imageUrls, skills, fileAttachments, selectedMode)
+        .catch((unknownError) => {
+          shouldAutoScrollOnNextAgentEvent = false
+          setThreadInProgress(threadId, false)
+          setTurnActivityForThread(threadId, null)
+          const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+          setTurnErrorForThread(threadId, errorMessage)
+          error.value = errorMessage
+        })
+        .finally(() => {
+          isSendingMessage.value = false
+        })
+      void requestThreadTitleGeneration(capturedThreadId, capturedPrompt, capturedCwd)
+      return threadId
+    } catch (unknownError) {
+      shouldAutoScrollOnNextAgentEvent = false
+      if (threadId) {
+        setThreadInProgress(threadId, false)
+        setTurnActivityForThread(threadId, null)
+      }
+      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Unknown application error'
+      if (threadId) {
+        setTurnErrorForThread(threadId, errorMessage)
+      }
+      error.value = errorMessage
+      isSendingMessage.value = false
+      throw unknownError
+    }
+  }
+  async function startTurnForThread(
+    threadId: string,
+    nextText: string,
+    imageUrls: string[] = [],
+    skills: Array<{ name: string; path: string }> = [],
+    fileAttachments: FileAttachment[] = [],
+    collaborationModeOverride?: CollaborationModeKind,
+  ): Promise<void> {
+    const reasoningEffort = selectedReasoningEffort.value
+    const collaborationMode = collaborationModeOverride === 'plan' ? 'plan' : collaborationModeOverride === 'default'
+      ? 'default'
+      : selectedCollaborationMode.value
+    const normalizedText = nextText.trim()
+    const normalizedImageUrls = [...imageUrls]
+    if (
+      normalizedImageUrls.length === 0
+      && shouldReuseAttachedImageFromPrompt(normalizedText)
+    ) {
+      const latestAttachedImageUrl = findLatestUserLocalImageUrl(threadId)
+      if (latestAttachedImageUrl) {
+        normalizedImageUrls.push(latestAttachedImageUrl)
+      }
+    }
+    const normalizedSkills = skills.map((skill) => ({ name: skill.name, path: skill.path }))
+    const normalizedFileAttachments = fileAttachments.map((file) => ({ ...file }))
+    setPendingTurnRequest(threadId, {
+      text: normalizedText,
+      imageUrls: [...normalizedImageUrls],
+      skills: normalizedSkills,
+      fileAttachments: normalizedFileAttachments,
+      effort: reasoningEffort,
+      collaborationMode,
+      fallbackRetried: false,
+    })
+    try {
+      if (resumedThreadById.value[threadId] !== true) {
+        const resumedThread = await resumeThread(threadId)
+        setThreadModelId(threadId, resumedThread.model)
+      }
+      const modelId = readModelIdForThread(threadId)
+      let startedTurnId = ''
+      try {
+        startedTurnId = await startThreadTurn(
+          threadId,
+          nextText,
+          normalizedImageUrls,
+          modelId || undefined,
+          reasoningEffort || undefined,
+          skills.length > 0 ? skills : undefined,
+          fileAttachments,
+          collaborationMode,
+        )
+      } catch (unknownError) {
+        if (modelId && modelId !== MODEL_FALLBACK_ID && isUnsupportedChatGptModelError(unknownError)) {
+          await applyFallbackModelSelection(threadId)
+          setPendingTurnRequest(threadId, {
+            text: normalizedText,
+            imageUrls: [...normalizedImageUrls],
+            skills: normalizedSkills,
+            fileAttachments: normalizedFileAttachments,
+            effort: reasoningEffort,
+            collaborationMode,
+            fallbackRetried: true,
+          })
+          startedTurnId = await startThreadTurn(
+            threadId,
+            nextText,
+            normalizedImageUrls,
+            MODEL_FALLBACK_ID,
+            reasoningEffort || undefined,
+            skills.length > 0 ? skills : undefined,
+            fileAttachments,
+            collaborationMode,
+          )
+        } else {
+          throw unknownError
+        }
+      }
+      if (startedTurnId) {
+        activeTurnIdByThreadId.value = {
+          ...activeTurnIdByThreadId.value,
+          [threadId]: startedTurnId,
+        }
+        maybeUnblockInterruptForActiveTurn(threadId, startedTurnId)
+      }
+      resumedThreadById.value = {
+        ...resumedThreadById.value,
+        [threadId]: true,
+      }
+      pendingThreadMessageRefresh.add(threadId)
+      await syncFromNotifications()
+      scheduleDelayedTurnSync(threadId)
+    } catch (unknownError) {
+      throw unknownError
+    }
+  }
+  async function processQueuedMessages(threadId: string): Promise<void> {
+    if (queueProcessingByThreadId.value[threadId] === true) return
+    queueProcessingByThreadId.value = {
+      ...queueProcessingByThreadId.value,
+      [threadId]: true,
+    }
+    try {
+      queuedMessagesByThreadId.value = await getThreadQueueState()
+    } catch {
+      // Backend queue state is optional during transient bridge failures.
+    } finally {
+      queueProcessingByThreadId.value = omitKey(queueProcessingByThreadId.value, threadId)
+    }
+  }
+  function scheduleQueueStateRefresh(threadId: string): void {
+    void processQueuedMessages(threadId)
+    if (typeof window === 'undefined') return
+    window.setTimeout(() => {
+      void processQueuedMessages(threadId)
+    }, 650)
+  }
+  async function interruptSelectedThreadTurn(): Promise<void> {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    if (inProgressById.value[threadId] !== true) return
+    if (interruptBlockedUntilPersistedByThreadId.value[threadId] === true) return
+    let turnId = activeTurnIdByThreadId.value[threadId]
+    if (!turnId) {
+      const { activeTurnId } = await getThreadDetail(threadId)
+      turnId = activeTurnId
+      if (turnId) {
+        activeTurnIdByThreadId.value = {
+          ...activeTurnIdByThreadId.value,
+          [threadId]: turnId,
+        }
+      }
+    }
+    if (!turnId) {
+      throw new Error('Could not determine active turn id for interrupt')
+    }
+    isInterruptingTurn.value = true
+    error.value = ''
+    try {
+      await interruptThreadTurn(threadId, turnId)
+      setThreadInProgress(threadId, false)
+      setTurnActivityForThread(threadId, null)
+      setTurnErrorForThread(threadId, null)
+      if (activeTurnIdByThreadId.value[threadId]) {
+        activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
+      }
+      pendingThreadMessageRefresh.add(threadId)
+      pendingThreadsRefresh = true
+      await syncFromNotifications()
+    } catch (unknownError) {
+      const errorMessage = unknownError instanceof Error ? unknownError.message : 'Failed to interrupt active turn'
+      setTurnErrorForThread(threadId, errorMessage)
+      error.value = errorMessage
+    } finally {
+      isInterruptingTurn.value = false
+    }
+  }
+  async function rollbackSelectedThread(turnId: string): Promise<void> {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    if (isRollingBack.value) return
+    if (!turnId.trim()) return
+    const persisted = persistedMessagesByThreadId.value[threadId] ?? []
+    const matchedMessage = persisted.find((message) => message.turnId === turnId)
+    const turnIndex = typeof matchedMessage?.turnIndex === 'number' ? matchedMessage.turnIndex : -1
+    if (turnIndex < 0) return
+    const maxTurnIndex = persisted.reduce((max, m) => (typeof m.turnIndex === 'number' && m.turnIndex > max ? m.turnIndex : max), -1)
+    if (maxTurnIndex < 0 || turnIndex > maxTurnIndex) return
+    const numTurns = maxTurnIndex - turnIndex + 1
+    if (numTurns < 1) return
+    isRollingBack.value = true
+    error.value = ''
+    try {
+      const threadCwd = selectedThread.value?.cwd?.trim() ?? ''
+      if (threadCwd) {
+        await revertThreadFileChanges(threadId, turnId, threadCwd)
+      }
+      const nextMessages = await rollbackThread(threadId, numTurns)
+      setPersistedMessagesForThread(threadId, nextMessages)
+      setLiveAgentMessagesForThread(threadId, [])
+      clearLiveReasoningForThread(threadId)
+      if (liveCommandsByThreadId.value[threadId]) {
+        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
+      }
+      setTurnSummaryForThread(threadId, null)
+      setTurnActivityForThread(threadId, null)
+      setTurnErrorForThread(threadId, null)
+      pendingThreadsRefresh = true
+      await syncFromNotifications()
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to rollback thread'
+    } finally {
+      isRollingBack.value = false
+    }
+  }
+  let renameProjectTimer: ReturnType<typeof setTimeout> | null = null
+  async function persistProjectLabelToGlobalState(projectName: string, displayName: string): Promise<void> {
+    try {
+      const rootsState = await getWorkspaceRootsState()
+      const nextLabels = { ...rootsState.labels }
+      let changed = false
+      for (const rootPath of rootsState.order) {
+        if (!matchesWorkspaceRootProject(rootPath, projectName)) continue
+        const trimmed = displayName.trim()
+        if (trimmed.length === 0) {
+          if (nextLabels[rootPath] !== undefined) {
+            delete nextLabels[rootPath]
+            changed = true
+          }
+        } else if (nextLabels[rootPath] !== trimmed) {
+          nextLabels[rootPath] = trimmed
+          changed = true
+        }
+      }
+      if (changed) {
+        await setWorkspaceRootsState({
+          order: rootsState.order,
+          labels: nextLabels,
+          active: rootsState.active,
+          projectOrder: rootsState.projectOrder,
+        })
+      }
+    } catch {
+      // Keep localStorage-only rename when global state is unavailable.
+    }
+  }
+  function renameProject(projectName: string, displayName: string): void {
+    if (projectName.length === 0) return
+    const currentValue = projectDisplayNameById.value[projectName] ?? ''
+    if (currentValue === displayName) return
+    projectDisplayNameById.value = {
+      ...projectDisplayNameById.value,
+      [projectName]: displayName,
+    }
+    saveProjectDisplayNames(projectDisplayNameById.value)
+    if (renameProjectTimer !== null) clearTimeout(renameProjectTimer)
+    renameProjectTimer = setTimeout(() => {
+      renameProjectTimer = null
+      void persistProjectLabelToGlobalState(projectName, displayName)
+    }, 500)
+  }
+  async function removeProject(projectName: string): Promise<void> {
+    if (projectName.length === 0) return
+    const nextProjectOrder = projectOrder.value.filter((name) => name !== projectName)
+    if (!areStringArraysEqual(projectOrder.value, nextProjectOrder)) {
+      projectOrder.value = nextProjectOrder
+      saveProjectOrder(projectOrder.value)
+    }
+    sourceGroups.value = sourceGroups.value.filter((group) => group.projectName !== projectName)
+    if (projectDisplayNameById.value[projectName] !== undefined) {
+      const nextDisplayNames = { ...projectDisplayNameById.value }
+      delete nextDisplayNames[projectName]
+      projectDisplayNameById.value = nextDisplayNames
+      saveProjectDisplayNames(nextDisplayNames)
+    }
+    applyThreadFlags()
+    const flatThreads = flattenThreads(projectGroups.value)
+    pruneThreadScopedState(flatThreads)
+    const currentExists = flatThreads.some((thread) => thread.id === selectedThreadId.value)
+    if (!currentExists) {
+      setSelectedThreadId(flatThreads[0]?.id ?? '')
+    }
+    const removedRootPaths = new Set<string>()
+    try {
+      const rootsState = await getWorkspaceRootsState()
+      collectWorkspaceRootPathsForProjectRemoval(rootsState, projectName).forEach((rootPath) => {
+        removedRootPaths.add(rootPath)
+      })
+    } catch {
+      // Keep local-only removal when global state is unavailable.
+    }
+    if (removedRootPaths.size > 0) {
+      try {
+        const rootsState = await getWorkspaceRootsState()
+        const nextOrder = rootsState.order.filter((rootPath) => !removedRootPaths.has(rootPath))
+        const nextActive = rootsState.active.filter((rootPath) => !removedRootPaths.has(rootPath))
+        const fallbackActive = nextActive.length === 0 && nextOrder.length > 0
+          ? [nextOrder[0]]
+          : nextActive
+        await setWorkspaceRootsState({
+          order: nextOrder,
+          labels: omitKeys(rootsState.labels, removedRootPaths),
+          active: fallbackActive,
+          projectOrder: rootsState.projectOrder.filter((item) => item !== projectName && !removedRootPaths.has(item)),
+        })
+        return
+      } catch {
+        // Fall back to order-only persistence if direct removal fails.
+      }
+    }
+    await persistProjectOrderToWorkspaceRoots()
+  }
+  function reorderProject(projectName: string, toIndex: number): void {
+    if (projectName.length === 0) return
+    if (sourceGroups.value.length === 0) return
+    const visibleOrder = sourceGroups.value.map((group) => group.projectName)
+    const fromIndex = visibleOrder.indexOf(projectName)
+    if (fromIndex === -1) return
+    const clampedToIndex = Math.max(0, Math.min(toIndex, visibleOrder.length - 1))
+    const reorderedVisibleOrder = reorderStringArray(visibleOrder, fromIndex, clampedToIndex)
+    if (reorderedVisibleOrder === visibleOrder) return
+    const normalizedProjectOrder = mergeProjectOrder(reorderedVisibleOrder, sourceGroups.value)
+    projectOrder.value = normalizedProjectOrder
+    saveProjectOrder(projectOrder.value)
+    const orderedGroups = orderGroupsByProjectOrder(sourceGroups.value, projectOrder.value)
+    sourceGroups.value = mergeThreadGroups(sourceGroups.value, orderedGroups)
+    applyThreadFlags()
+    void persistProjectOrderToWorkspaceRoots()
+  }
+  function pinProjectToTop(projectName: string): void {
+    const normalizedName = projectName.trim()
+    if (!normalizedName) return
+    const nextOrder = [normalizedName, ...projectOrder.value.filter((name) => name !== normalizedName)]
+    if (areStringArraysEqual(projectOrder.value, nextOrder)) return
+    projectOrder.value = nextOrder
+    saveProjectOrder(projectOrder.value)
+    const orderedGroups = orderGroupsByProjectOrder(sourceGroups.value, projectOrder.value)
+    sourceGroups.value = mergeThreadGroups(sourceGroups.value, orderedGroups)
+    applyThreadFlags()
+    void persistProjectOrderToWorkspaceRoots()
+  }
+  async function persistProjectOrderToWorkspaceRoots(): Promise<void> {
+    try {
+      const rootsState = await getWorkspaceRootsState()
+      const nextState = buildWorkspaceRootsProjectOrderState(rootsState, projectOrder.value, sourceGroups.value)
+      await setWorkspaceRootsState({
+        order: nextState.order,
+        labels: rootsState.labels,
+        active: nextState.active,
+        projectOrder: nextState.projectOrder,
+      })
+    } catch {
+      // Keep local project order when global state persistence is unavailable.
+    }
+  }
+  async function syncThreadStatus(): Promise<void> {
+    if (isPolling.value) return
+    isPolling.value = true
+    try {
+      await loadThreads()
+      if (!selectedThreadId.value) return
+      const threadId = selectedThreadId.value
+      const currentVersion = currentThreadVersion(threadId)
+      const loadedVersion = loadedVersionByThreadId.value[threadId] ?? ''
+      const hasVersionChange = currentVersion.length > 0 && currentVersion !== loadedVersion
+      const isInProgress = inProgressById.value[threadId] === true
+      if (isInProgress || hasVersionChange) {
+        await loadMessages(threadId, { silent: true })
+      }
+    } catch {
+      // ignore poll failures and keep last known state
+    } finally {
+      isPolling.value = false
+    }
+  }
+  async function syncFromNotifications(): Promise<void> {
+    if (isPolling.value) {
+      if (typeof window !== 'undefined' && eventSyncTimer === null) {
+        eventSyncTimer = window.setTimeout(() => {
+          eventSyncTimer = null
+          void syncFromNotifications()
+        }, EVENT_SYNC_DEBOUNCE_MS)
+      }
+      return
+    }
+    isPolling.value = true
+    const shouldRefreshThreads = pendingThreadsRefresh
+    const threadIdsToRefresh = new Set(pendingThreadMessageRefresh)
+    pendingThreadsRefresh = false
+    pendingThreadMessageRefresh.clear()
+    try {
+      if (shouldRefreshThreads) {
+        await loadThreads()
+      }
+      const activeThreadId = selectedThreadId.value
+      if (!activeThreadId) return
+      const isActiveDirty = threadIdsToRefresh.has(activeThreadId)
+      const isInProgress = inProgressById.value[activeThreadId] === true
+      const currentVersion = currentThreadVersion(activeThreadId)
+      const loadedVersion = loadedVersionByThreadId.value[activeThreadId] ?? ''
+      const hasVersionChange = currentVersion.length > 0 && currentVersion !== loadedVersion
+      const shouldRefreshActiveThread =
+        hasVersionChange ||
+        (isInProgress && loadedMessagesByThreadId.value[activeThreadId] !== true) ||
+        (isActiveDirty && loadedMessagesByThreadId.value[activeThreadId] !== true) ||
+        (shouldRefreshThreads && loadedMessagesByThreadId.value[activeThreadId] !== true)
+      if (shouldRefreshActiveThread) {
+        await loadMessages(activeThreadId, { silent: true })
+      }
+    } catch {
+      // Keep UI stable on transient event sync failures.
+    } finally {
+      isPolling.value = false
+      if (
+        (pendingThreadsRefresh || pendingThreadMessageRefresh.size > 0) &&
+        typeof window !== 'undefined' &&
+        eventSyncTimer === null
+      ) {
+        eventSyncTimer = window.setTimeout(() => {
+          eventSyncTimer = null
+          void syncFromNotifications()
+        }, EVENT_SYNC_DEBOUNCE_MS)
+      }
+    }
+  }
+  async function recoverBridgeState(): Promise<void> {
+    await loadPendingServerRequestsFromBridge()
+    pendingThreadsRefresh = !hasLoadedThreads.value
+    if (
+      selectedThreadId.value &&
+      loadedMessagesByThreadId.value[selectedThreadId.value] !== true
+    ) {
+      pendingThreadMessageRefresh.add(selectedThreadId.value)
+    }
+    await syncFromNotifications()
+  }
+  function startPolling(): void {
+    if (typeof window === 'undefined') return
+    if (stopNotificationStream) return
+    void loadPendingServerRequestsFromBridge()
+    stopNotificationStream = subscribeCodexNotifications((notification) => {
+      if (notification.method === 'ready') {
+        clearAllTransientTurnErrors()
+        void recoverBridgeState()
+        return
+      }
+      applyRealtimeUpdates(notification)
+      queueEventDrivenSync(notification)
+    })
+  }
+  async function loadPendingServerRequestsFromBridge(): Promise<void> {
+    try {
+      const rows = await getPendingServerRequests()
+      const normalizedRequests = rows
+        .map((row) => normalizeServerRequest(row))
+        .filter((request): request is UiServerRequest => request !== null)
+      replacePendingServerRequests(normalizedRequests)
+    } catch {
+      // Keep UI usable when pending request endpoint is temporarily unavailable.
+    }
+  }
+  async function respondToPendingServerRequest(reply: UiServerRequestReply): Promise<boolean> {
+    try {
+      await replyToServerRequest(reply.id, {
+        result: reply.result,
+        error: reply.error,
+      })
+      removePendingServerRequestById(reply.id)
+      return true
+    } catch (unknownError) {
+      error.value = unknownError instanceof Error ? unknownError.message : 'Failed to reply to server request'
+      return false
+    }
+  }
+  function stopPolling(): void {
+    if (stopNotificationStream) {
+      stopNotificationStream()
+      stopNotificationStream = null
+    }
+    pendingThreadsRefresh = false
+    pendingThreadMessageRefresh.clear()
+    pendingTurnStartsById.clear()
+    if (eventSyncTimer !== null && typeof window !== 'undefined') {
+      window.clearTimeout(eventSyncTimer)
+      eventSyncTimer = null
+    }
+    if (rateLimitRefreshTimer !== null && typeof window !== 'undefined') {
+      window.clearTimeout(rateLimitRefreshTimer)
+      rateLimitRefreshTimer = null
+    }
+    if (threadListBackgroundTimer !== null && typeof window !== 'undefined') {
+      window.clearTimeout(threadListBackgroundTimer)
+      threadListBackgroundTimer = null
+    }
+    if (typeof window !== 'undefined') {
+      for (const timerId of delayedTurnSyncTimerByThreadId.values()) {
+        window.clearTimeout(timerId)
+      }
+    }
+    delayedTurnSyncTimerByThreadId.clear()
+    activeReasoningItemId = ''
+    shouldAutoScrollOnNextAgentEvent = false
+    persistedMessagesByThreadId.value = {}
+    livePlanMessagesByThreadId.value = {}
+    liveAgentMessagesByThreadId.value = {}
+    liveReasoningTextByThreadId.value = {}
+    liveCommandsByThreadId.value = {}
+    liveFileChangeMessagesByThreadId.value = {}
+    turnIndexByTurnIdByThreadId.value = {}
+    turnActivityByThreadId.value = {}
+    turnSummaryByThreadId.value = {}
+    turnErrorByThreadId.value = {}
+    activeTurnIdByThreadId.value = {}
+    interruptBlockedUntilPersistedByThreadId.value = {}
+    threadListedByServerById.value = {}
+    persistedUserMessageByThreadId.value = {}
+    queuedMessagesByThreadId.value = {}
+    queueProcessingByThreadId.value = {}
+    persistQueueState()
+    codexRateLimit.value = null
+    threadTokenUsageByThreadId.value = {}
+  }
+  const selectedThreadQueuedMessages = computed<QueuedMessage[]>(() => {
+    const threadId = selectedThreadId.value
+    if (!threadId) return []
+    return queuedMessagesByThreadId.value[threadId] ?? []
+  })
+  function removeQueuedMessage(messageId: string): void {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    const queue = queuedMessagesByThreadId.value[threadId]
+    if (!queue) return
+    const next = queue.filter((m) => m.id !== messageId)
+    queuedMessagesByThreadId.value = next.length > 0
+      ? { ...queuedMessagesByThreadId.value, [threadId]: next }
+      : omitKey(queuedMessagesByThreadId.value, threadId)
+    persistQueueState()
+  }
+  function reorderQueuedMessage(draggedId: string, targetId: string): void {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    const queue = queuedMessagesByThreadId.value[threadId]
+    if (!queue) return
+    const fromIndex = queue.findIndex((m) => m.id === draggedId)
+    const toIndex = queue.findIndex((m) => m.id === targetId)
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+    const next = [...queue]
+    const [moved] = next.splice(fromIndex, 1)
+    next.splice(toIndex, 0, moved)
+    queuedMessagesByThreadId.value = {
+      ...queuedMessagesByThreadId.value,
+      [threadId]: next,
+    }
+    persistQueueState()
+  }
+  function steerQueuedMessage(messageId: string): void {
+    const threadId = selectedThreadId.value
+    if (!threadId) return
+    const queue = queuedMessagesByThreadId.value[threadId]
+    if (!queue) return
+    const msg = queue.find((m) => m.id === messageId)
+    if (!msg) return
+    removeQueuedMessage(messageId)
+    setSelectedCollaborationMode(msg.collaborationMode)
+    void sendMessageToSelectedThread(msg.text, msg.imageUrls, msg.skills, 'steer', msg.fileAttachments)
+  }
+  function primeSelectedThread(threadId: string): void {
+    setSelectedThreadId(threadId)
+  }
+  return { projectGroups, projectDisplayNameById, selectedThread, selectedThreadTokenUsage, selectedThreadTerminalOpen, isSelectedThreadInterruptPending, selectedThreadServerRequests, selectedLiveOverlay, codexQuota, selectedThreadId, availableCollaborationModes, availableModelIds, selectedCollaborationMode, selectedModelId, selectedReasoningEffort, selectedSpeedMode, installedSkills, accountRateLimitSnapshots, messages, hasMoreOlderMessages, isLoadingThreads, isThreadListFullyLoaded, isLoadingMessages, isLoadingOlderMessages, isSendingMessage, isInterruptingTurn, isUpdatingSpeedMode, isRollingBack, error, refreshAll, refreshSkills, selectThread, loadMessages, loadOlderMessages, ensureThreadMessagesLoaded, setThreadTerminalOpen, toggleSelectedThreadTerminal, archiveThreadById, renameThreadById, forkThreadById, forkThreadFromTurn, rollbackSelectedThread, sendMessageToSelectedThread, sendMessageToNewThread, interruptSelectedThreadTurn, selectedThreadQueuedMessages, removeQueuedMessage, reorderQueuedMessage, steerQueuedMessage, setSelectedCollaborationMode, readModelIdForThread, setSelectedModelIdForThread, setSelectedModelId, setSelectedReasoningEffort, updateSelectedSpeedMode, respondToPendingServerRequest, renameProject, removeProject, reorderProject, pinProjectToTop, startPolling, stopPolling, primeSelectedThread, }
+}
diff --git a/src/server/apiPerfConfig.ts b/src/server/apiPerfConfig.ts
new file mode 100644
index 000000000..36c201484
--- /dev/null
+++ b/src/server/apiPerfConfig.ts
@@ -0,0 +1,86 @@
+import { readFileSync } from 'node:fs'
+
+const API_PERF_LOGGING_ENV_KEY = 'CODEXUI_API_PERF_LOGGING'
+export const API_PERF_MS_THRESHOLD_ENV_KEY = 'CODEXUI_API_PERF_MS_THRESHOLD'
+export const API_PERF_BODY_MB_THRESHOLD_ENV_KEY = 'CODEXUI_API_PERF_BODY_MB_THRESHOLD'
+const DEFAULT_API_PERF_MS_THRESHOLD = 300
+const DEFAULT_API_PERF_BODY_MB_THRESHOLD = 1
+export const MB_DIVISOR = 1024 * 1024
+function readEnvValueFromFile(filePath: string, key: string): string | null {
+  try {
+    const content = readFileSync(filePath, 'utf8')
+    const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const match = content.match(new RegExp(`^\\s*${escapedKey}\\s*=\\s*(.+)\\s*$`, 'm'))
+    if (!match) return null
+    const rawValue = match[1]?.trim() ?? ''
+    if (!rawValue) return null
+    if ((rawValue.startsWith('"') && rawValue.endsWith('"')) || (rawValue.startsWith('\'') && rawValue.endsWith('\''))) {
+      return rawValue.slice(1, -1).trim()
+    }
+    return rawValue
+  } catch {
+    return null
+  }
+}
+
+function parseBooleanEnvFlag(value: string | null | undefined): boolean | null {
+  if (!value) return null
+  const normalized = value.trim().toLowerCase()
+  if (['1', 'true', 'yes', 'on'].includes(normalized)) return true
+  if (['0', 'false', 'no', 'off'].includes(normalized)) return false
+  return null
+}
+
+function resolveApiPerfLoggingEnabled(): boolean {
+  const explicitValue = parseBooleanEnvFlag(process.env[API_PERF_LOGGING_ENV_KEY])
+  if (explicitValue !== null) return explicitValue
+
+  const fromEnvLocal = parseBooleanEnvFlag(readEnvValueFromFile('.env.local', API_PERF_LOGGING_ENV_KEY))
+  if (fromEnvLocal !== null) return fromEnvLocal
+
+  const fromEnv = parseBooleanEnvFlag(readEnvValueFromFile('.env', API_PERF_LOGGING_ENV_KEY))
+  if (fromEnv !== null) return fromEnv
+
+  return false
+}
+
+export const API_PERF_LOGGING_ENABLED = resolveApiPerfLoggingEnabled()
+
+function parseNumberEnvFlag(value: string | null | undefined): number | null {
+  if (!value) return null
+  const parsed = Number.parseFloat(value.trim())
+  if (!Number.isFinite(parsed)) return null
+  return parsed
+}
+
+function resolveNumericEnvConfig(envKey: string, fallback: number): number {
+  const fromProcess = parseNumberEnvFlag(process.env[envKey])
+  if (fromProcess !== null) return fromProcess
+
+  const fromEnvLocal = parseNumberEnvFlag(readEnvValueFromFile('.env.local', envKey))
+  if (fromEnvLocal !== null) return fromEnvLocal
+
+  const fromEnv = parseNumberEnvFlag(readEnvValueFromFile('.env', envKey))
+  if (fromEnv !== null) return fromEnv
+
+  return fallback
+}
+
+export const API_PERF_MS_THRESHOLD = resolveNumericEnvConfig(API_PERF_MS_THRESHOLD_ENV_KEY, DEFAULT_API_PERF_MS_THRESHOLD)
+export const API_PERF_BODY_MB_THRESHOLD = resolveNumericEnvConfig(API_PERF_BODY_MB_THRESHOLD_ENV_KEY, DEFAULT_API_PERF_BODY_MB_THRESHOLD)
+
+export function getChunkByteLength(chunk: unknown, encoding?: BufferEncoding): number {
+  if (typeof chunk === 'string') {
+    return Buffer.byteLength(chunk, encoding)
+  }
+  if (chunk instanceof Uint8Array) {
+    return chunk.byteLength
+  }
+  if (ArrayBuffer.isView(chunk)) {
+    return chunk.byteLength
+  }
+  if (chunk instanceof ArrayBuffer) {
+    return chunk.byteLength
+  }
+  return 0
+}
diff --git a/src/server/appServerProcess.ts b/src/server/appServerProcess.ts
new file mode 100644
index 000000000..cdf878d80
--- /dev/null
+++ b/src/server/appServerProcess.ts
@@ -0,0 +1,704 @@
+import { spawn, type ChildProcessWithoutNullStreams } from 'node:child_process'
+import { readFileSync, writeFileSync } from 'node:fs'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import { buildAppServerArgs } from './appServerRuntimeConfig.js'
+import {
+  FREE_MODE_STATE_FILE,
+  createDefaultOpenCodeZenFreeModeState,
+  getFreeModeConfigArgs,
+  getFreeModeEnvVars,
+  shouldCreateDefaultFreeModeStateForMissingAuth,
+  type FreeModeState,
+} from './freeMode.js'
+import { refreshChatgptAuthTokensForExternalAuth } from './authRefresh.js'
+import { resolveCodexCommand } from '../commandResolution.js'
+import { getSpawnInvocation } from '../utils/commandInvocation.js'
+
+const THREAD_TURN_PAGE_READ_CACHE_TTL_MS = 30_000
+
+type JsonRpcCall = {
+  jsonrpc: '2.0'
+  id: number
+  method: string
+  params?: unknown
+}
+
+type JsonRpcResponse = {
+  id?: number
+  result?: unknown
+  error?: { code: number; message: string }
+  method?: string
+  params?: unknown
+}
+
+type ServerRequestReply = {
+  result?: unknown
+  error?: { code?: number; message: string }
+}
+
+type PendingServerRequest = {
+  id: number
+  method: string
+  params: unknown
+  receivedAtIso: string
+}
+
+type ChatgptAuthTokensRefreshParams = {
+  reason?: string
+  previousAccountId?: string
+}
+
+type ChatgptAuthTokensRefreshResponse = {
+  accessToken: string
+  chatgptAccountId: string
+  chatgptPlanType: string | null
+}
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getCodexAuthPath(): string {
+  return join(getCodexHomeDir(), 'auth.json')
+}
+
+function readFreeModeStateSync(statePath: string): FreeModeState | null {
+  try {
+    const raw = readFileSync(statePath, 'utf8')
+    return JSON.parse(raw) as FreeModeState
+  } catch {
+    return null
+  }
+}
+
+function hasUsableCodexAuthSync(): boolean {
+  try {
+    const raw = readFileSync(getCodexAuthPath(), 'utf8')
+    const auth = JSON.parse(raw) as { tokens?: { access_token?: string } }
+    return Boolean(auth.tokens?.access_token?.trim())
+  } catch {
+    return false
+  }
+}
+
+function ensureDefaultFreeModeStateForMissingAuthSync(statePath: string): FreeModeState | null {
+  const current = readFreeModeStateSync(statePath)
+  if (!shouldCreateDefaultFreeModeStateForMissingAuth(current, hasUsableCodexAuthSync())) {
+    return current
+  }
+  const next = createDefaultOpenCodeZenFreeModeState()
+  writeFileSync(statePath, JSON.stringify(next, null, 2), 'utf8')
+  return next
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+function getErrorMessage(payload: unknown, fallback: string): string {
+  if (payload instanceof Error && payload.message.trim().length > 0) return payload.message
+  const record = asRecord(payload)
+  if (!record) return fallback
+  const error = record.error
+  if (typeof error === 'string' && error.length > 0) return error
+  const nestedError = asRecord(error)
+  if (nestedError && typeof nestedError.message === 'string' && nestedError.message.length > 0) return nestedError.message
+  return fallback
+}
+
+const STREAM_EVENT_BUFFER_LIMIT = 400
+
+export type StreamEventFrame = {
+  method: string
+  params: unknown
+  atIso: string
+}
+
+type CapturedItem = {
+  id: string
+  type: string
+  turnId: string
+  data: Record<string, unknown>
+  completed: boolean
+}
+
+const MERGEABLE_ITEM_TYPES = new Set([
+  'commandExecution',
+  'fileChange',
+])
+
+export class AppServerProcess {
+  private process: ChildProcessWithoutNullStreams | null = null
+  private initialized = false
+  private initializePromise: Promise<void> | null = null
+  private readBuffer = ''
+  private nextId = 1
+  private stopping = false
+  private readonly pending = new Map<number, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>()
+  private readonly notificationListeners = new Set<(value: { method: string; params: unknown }) => void>()
+  private readonly pendingServerRequests = new Map<number, PendingServerRequest>()
+  private readonly appServerArgs = buildAppServerArgs()
+  private readonly streamEventsByThreadId = new Map<string, StreamEventFrame[]>()
+  private readonly lastThreadReadSnapshotByThreadId = new Map<string, unknown>()
+  private readonly threadTurnPageReadCacheByThreadId = new Map<string, { result: unknown; expiresAt: number }>()
+  private readonly threadTurnPageReadPromiseByThreadId = new Map<string, Promise<unknown>>()
+  private readonly capturedItemsByThreadId = new Map<string, Map<string, CapturedItem>>()
+  private readonly liveStateCache = new Map<string, { data: unknown; turnCount: number; sessionSize: number }>()
+  private chatgptAuthRefreshPromise: Promise<ChatgptAuthTokensRefreshResponse> | null = null
+
+
+  private getCodexCommand(): string {
+    const codexCommand = resolveCodexCommand()
+    if (!codexCommand) {
+      throw new Error('Codex CLI is not available. Install @openai/codex or set CODEXUI_CODEX_COMMAND.')
+    }
+    return codexCommand
+  }
+
+  private buildAppServerConfig(): { args: string[]; env: Record<string, string> } {
+    const args = [
+      'app-server',
+      '-c', 'approval_policy="never"',
+      '-c', 'sandbox_mode="danger-full-access"',
+    ]
+    let extraEnv: Record<string, string> = {}
+    const serverPort = parseInt(process.env.CODEXUI_SERVER_PORT ?? '', 10) || undefined
+    const statePath = join(getCodexHomeDir(), FREE_MODE_STATE_FILE)
+    try {
+      const state = ensureDefaultFreeModeStateForMissingAuthSync(statePath)
+      if (state) {
+        args.push(...getFreeModeConfigArgs(state, serverPort))
+        extraEnv = getFreeModeEnvVars(state)
+      }
+    } catch {
+      // No free-mode state or invalid — use defaults
+    }
+    return { args, env: extraEnv }
+  }
+
+  private start(): void {
+    if (this.process) return
+
+    this.stopping = false
+    const config = this.buildAppServerConfig()
+    const invocation = getSpawnInvocation(this.getCodexCommand(), config.args)
+    const spawnEnv = Object.keys(config.env).length > 0
+      ? { ...process.env, ...config.env }
+      : undefined
+    const proc = spawn(invocation.command, invocation.args, { stdio: ['pipe', 'pipe', 'pipe'], ...(spawnEnv ? { env: spawnEnv } : {}) })
+    this.process = proc
+
+    proc.stdout.setEncoding('utf8')
+    proc.stdout.on('data', (chunk: string) => {
+      this.readBuffer += chunk
+
+      let lineEnd = this.readBuffer.indexOf('\n')
+      while (lineEnd !== -1) {
+        const line = this.readBuffer.slice(0, lineEnd).trim()
+        this.readBuffer = this.readBuffer.slice(lineEnd + 1)
+
+        if (line.length > 0) {
+          this.handleLine(line)
+        }
+
+        lineEnd = this.readBuffer.indexOf('\n')
+      }
+    })
+
+    proc.stderr.setEncoding('utf8')
+    proc.stderr.on('data', () => {
+      // Keep stderr silent in dev middleware; JSON-RPC errors are forwarded via responses.
+    })
+
+    proc.on('exit', () => {
+      if (this.process !== proc) {
+        return
+      }
+
+      const failure = new Error(this.stopping ? 'codex app-server stopped' : 'codex app-server exited unexpectedly')
+      for (const request of this.pending.values()) {
+        request.reject(failure)
+      }
+
+      this.pending.clear()
+      this.pendingServerRequests.clear()
+      this.process = null
+      this.initialized = false
+      this.initializePromise = null
+      this.readBuffer = ''
+    })
+  }
+
+  private sendLine(payload: Record<string, unknown>): void {
+    if (!this.process) {
+      throw new Error('codex app-server is not running')
+    }
+
+    this.process.stdin.write(`${JSON.stringify(payload)}\n`)
+  }
+
+  private handleLine(line: string): void {
+    let message: JsonRpcResponse
+    try {
+      message = JSON.parse(line) as JsonRpcResponse
+    } catch {
+      return
+    }
+
+    if (typeof message.id === 'number' && this.pending.has(message.id)) {
+      const pendingRequest = this.pending.get(message.id)
+      this.pending.delete(message.id)
+
+      if (!pendingRequest) return
+
+      if (message.error) {
+        pendingRequest.reject(new Error(message.error.message))
+      } else {
+        pendingRequest.resolve(message.result)
+      }
+      return
+    }
+
+    if (typeof message.method === 'string' && typeof message.id !== 'number') {
+      this.emitNotification({
+        method: message.method,
+        params: message.params ?? null,
+      })
+      return
+    }
+
+    // Handle server-initiated JSON-RPC requests (approvals, dynamic tool calls, etc.).
+    if (typeof message.id === 'number' && typeof message.method === 'string') {
+      this.handleServerRequest(message.id, message.method, message.params ?? null)
+    }
+  }
+
+  private emitNotification(notification: { method: string; params: unknown }): void {
+    this.recordStreamEvent(notification)
+    this.captureItemFromNotification(notification)
+    const nThreadId = this.extractThreadIdFromParams(notification.params)
+    if (nThreadId) {
+      this.invalidateLiveStateCache(nThreadId)
+      this.threadTurnPageReadCacheByThreadId.delete(nThreadId)
+    }
+    for (const listener of this.notificationListeners) {
+      listener(notification)
+    }
+  }
+
+  private extractThreadIdFromParams(params: unknown): string {
+    const record = asRecord(params)
+    if (!record) return ''
+    const threadId =
+      (typeof record.threadId === 'string' ? record.threadId : '') ||
+      (typeof record.thread_id === 'string' ? record.thread_id : '') ||
+      (typeof record.conversationId === 'string' ? record.conversationId : '') ||
+      (typeof record.conversation_id === 'string' ? record.conversation_id : '')
+    if (threadId) return threadId
+    const thread = asRecord(record.thread)
+    if (thread && typeof thread.id === 'string') return thread.id
+    const turn = asRecord(record.turn)
+    if (turn) {
+      const turnThreadId =
+        (typeof turn.threadId === 'string' ? turn.threadId : '') ||
+        (typeof turn.thread_id === 'string' ? turn.thread_id : '')
+      if (turnThreadId) return turnThreadId
+    }
+    return ''
+  }
+
+  private recordStreamEvent(notification: { method: string; params: unknown }): void {
+    const threadId = this.extractThreadIdFromParams(notification.params)
+    if (!threadId) return
+    const frame: StreamEventFrame = {
+      method: notification.method,
+      params: notification.params,
+      atIso: new Date().toISOString(),
+    }
+    let buffer = this.streamEventsByThreadId.get(threadId)
+    if (!buffer) {
+      buffer = []
+      this.streamEventsByThreadId.set(threadId, buffer)
+    }
+    buffer.push(frame)
+    if (buffer.length > STREAM_EVENT_BUFFER_LIMIT) {
+      buffer.splice(0, buffer.length - STREAM_EVENT_BUFFER_LIMIT)
+    }
+  }
+
+  getStreamEvents(threadId: string, limit: number): StreamEventFrame[] {
+    const buffer = this.streamEventsByThreadId.get(threadId)
+    if (!buffer || buffer.length === 0) return []
+    return buffer.slice(-limit)
+  }
+
+  storeThreadReadSnapshot(threadId: string, snapshot: unknown): void {
+    this.lastThreadReadSnapshotByThreadId.set(threadId, snapshot)
+    this.threadTurnPageReadCacheByThreadId.delete(threadId)
+  }
+
+  getLastThreadReadSnapshot(threadId: string): unknown | null {
+    return this.lastThreadReadSnapshotByThreadId.get(threadId) ?? null
+  }
+
+  async readThreadForTurnPage(threadId: string): Promise<unknown> {
+    const now = Date.now()
+    const cached = this.threadTurnPageReadCacheByThreadId.get(threadId)
+    if (cached && cached.expiresAt > now) return cached.result
+    if (cached) this.threadTurnPageReadCacheByThreadId.delete(threadId)
+
+    const pending = this.threadTurnPageReadPromiseByThreadId.get(threadId)
+    if (pending) return pending
+
+    const promise = this.rpc('thread/read', {
+      threadId,
+      includeTurns: true,
+    }).then((result) => {
+      this.threadTurnPageReadCacheByThreadId.set(threadId, {
+        result,
+        expiresAt: Date.now() + THREAD_TURN_PAGE_READ_CACHE_TTL_MS,
+      })
+      return result
+    }).finally(() => {
+      this.threadTurnPageReadPromiseByThreadId.delete(threadId)
+    })
+
+    this.threadTurnPageReadPromiseByThreadId.set(threadId, promise)
+    return promise
+  }
+
+  cacheLiveState(threadId: string, data: unknown, turnCount: number, sessionSize: number): void {
+    this.liveStateCache.set(threadId, { data, turnCount, sessionSize })
+  }
+
+  getCachedLiveState(threadId: string, turnCount: number, sessionSize: number): unknown | null {
+    const cached = this.liveStateCache.get(threadId)
+    if (!cached) return null
+    if (cached.turnCount !== turnCount || cached.sessionSize !== sessionSize) return null
+    return cached.data
+  }
+
+  invalidateLiveStateCache(threadId: string): void {
+    this.liveStateCache.delete(threadId)
+  }
+
+  private captureItemFromNotification(notification: { method: string; params: unknown }): void {
+    if (notification.method !== 'item/started' && notification.method !== 'item/completed') return
+
+    const params = asRecord(notification.params)
+    if (!params) return
+    const item = asRecord(params.item)
+    if (!item) return
+    const itemType = typeof item.type === 'string' ? item.type : ''
+    if (!MERGEABLE_ITEM_TYPES.has(itemType)) return
+
+    const itemId = typeof item.id === 'string' ? item.id : ''
+    if (!itemId) return
+
+    const threadId = this.extractThreadIdFromParams(params)
+    if (!threadId) return
+
+    const turnId =
+      (typeof params.turnId === 'string' ? params.turnId : '') ||
+      (typeof params.turn_id === 'string' ? params.turn_id : '')
+    if (!turnId) return
+
+    let threadItems = this.capturedItemsByThreadId.get(threadId)
+    if (!threadItems) {
+      threadItems = new Map()
+      this.capturedItemsByThreadId.set(threadId, threadItems)
+    }
+
+    const isCompleted = notification.method === 'item/completed'
+    const existing = threadItems.get(itemId)
+
+    if (existing && existing.completed && !isCompleted) return
+
+    threadItems.set(itemId, {
+      id: itemId,
+      type: itemType,
+      turnId,
+      data: item as Record<string, unknown>,
+      completed: isCompleted,
+    })
+  }
+
+  mergeItemsIntoTurns(threadId: string, turns: unknown[]): unknown[] {
+    const capturedMap = this.capturedItemsByThreadId.get(threadId)
+    if (!capturedMap || capturedMap.size === 0) return turns
+
+    const itemsByTurnId = new Map<string, CapturedItem[]>()
+    for (const captured of capturedMap.values()) {
+      let group = itemsByTurnId.get(captured.turnId)
+      if (!group) {
+        group = []
+        itemsByTurnId.set(captured.turnId, group)
+      }
+      group.push(captured)
+    }
+
+    return turns.map((turn) => {
+      const turnRecord = asRecord(turn)
+      if (!turnRecord) return turn
+      const turnId = typeof turnRecord.id === 'string' ? turnRecord.id : ''
+      if (!turnId) return turn
+
+      const captured = itemsByTurnId.get(turnId)
+      if (!captured || captured.length === 0) return turn
+
+      const existingItems = Array.isArray(turnRecord.items) ? (turnRecord.items as Record<string, unknown>[]) : []
+      const existingIds = new Set(existingItems.map((it) => (typeof it.id === 'string' ? it.id : '')).filter(Boolean))
+
+      const newItems = captured
+        .filter((c) => !existingIds.has(c.id))
+        .map((c) => c.data)
+
+      if (newItems.length === 0) return turn
+
+      return {
+        ...turnRecord,
+        items: [...existingItems, ...newItems],
+      }
+    })
+  }
+
+  private sendServerRequestReply(requestId: number, reply: ServerRequestReply): void {
+    if (reply.error) {
+      this.sendLine({
+        jsonrpc: '2.0',
+        id: requestId,
+        error: reply.error,
+      })
+      return
+    }
+
+    this.sendLine({
+      jsonrpc: '2.0',
+      id: requestId,
+      result: reply.result ?? {},
+    })
+  }
+
+  private resolvePendingServerRequest(requestId: number, reply: ServerRequestReply): void {
+    const pendingRequest = this.pendingServerRequests.get(requestId)
+    if (!pendingRequest) {
+      throw new Error(`No pending server request found for id ${String(requestId)}`)
+    }
+    this.pendingServerRequests.delete(requestId)
+
+    this.sendServerRequestReply(requestId, reply)
+    const requestParams = asRecord(pendingRequest.params)
+    const threadId =
+      typeof requestParams?.threadId === 'string' && requestParams.threadId.length > 0
+        ? requestParams.threadId
+        : ''
+    this.emitNotification({
+      method: 'server/request/resolved',
+      params: {
+        id: requestId,
+        method: pendingRequest.method,
+        threadId,
+        mode: 'manual',
+        resolvedAtIso: new Date().toISOString(),
+      },
+    })
+  }
+
+  private async refreshChatgptAuthTokens(params: ChatgptAuthTokensRefreshParams): Promise<ChatgptAuthTokensRefreshResponse> {
+    if (!this.chatgptAuthRefreshPromise) {
+      this.chatgptAuthRefreshPromise = refreshChatgptAuthTokensForExternalAuth(params).finally(() => {
+        this.chatgptAuthRefreshPromise = null
+      })
+    }
+    return await this.chatgptAuthRefreshPromise
+  }
+
+  private async handleChatgptAuthTokensRefreshRequest(requestId: number, params: unknown): Promise<void> {
+    const requestParams = asRecord(params)
+    const previousAccountId = readNonEmptyString(requestParams?.previousAccountId ?? requestParams?.previous_account_id)
+    try {
+      const result = await this.refreshChatgptAuthTokens({
+        reason: readNonEmptyString(requestParams?.reason) || undefined,
+        previousAccountId: previousAccountId || undefined,
+      })
+      this.sendServerRequestReply(requestId, { result })
+      this.emitNotification({
+        method: 'server/request/resolved',
+        params: {
+          id: requestId,
+          method: 'account/chatgptAuthTokens/refresh',
+          mode: 'automatic',
+          resolvedAtIso: new Date().toISOString(),
+        },
+      })
+    } catch (error) {
+      this.sendServerRequestReply(requestId, {
+        error: {
+          code: -32001,
+          message: getErrorMessage(error, 'Failed to refresh ChatGPT auth tokens'),
+        },
+      })
+    }
+  }
+
+  private handleServerRequest(requestId: number, method: string, params: unknown): void {
+    if (method === 'account/chatgptAuthTokens/refresh') {
+      void this.handleChatgptAuthTokensRefreshRequest(requestId, params)
+      return
+    }
+
+    const pendingRequest: PendingServerRequest = {
+      id: requestId,
+      method,
+      params,
+      receivedAtIso: new Date().toISOString(),
+    }
+    this.pendingServerRequests.set(requestId, pendingRequest)
+
+    this.emitNotification({
+      method: 'server/request',
+      params: pendingRequest,
+    })
+  }
+
+  private async call(method: string, params: unknown): Promise<unknown> {
+    this.start()
+    const id = this.nextId++
+
+    return new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject })
+
+      this.sendLine({
+        jsonrpc: '2.0',
+        id,
+        method,
+        params,
+      } satisfies JsonRpcCall)
+    })
+  }
+
+  private async ensureInitialized(): Promise<void> {
+    if (this.initialized) return
+    if (this.initializePromise) {
+      await this.initializePromise
+      return
+    }
+
+    this.initializePromise = this.call('initialize', {
+      clientInfo: {
+        name: 'codex-web-local',
+        version: '0.1.0',
+      },
+      capabilities: {
+        experimentalApi: true,
+      },
+    }).then(() => {
+      this.sendLine({
+        jsonrpc: '2.0',
+        method: 'initialized',
+      })
+      this.initialized = true
+    }).finally(() => {
+      this.initializePromise = null
+    })
+
+    await this.initializePromise
+  }
+
+  async rpc(method: string, params: unknown): Promise<unknown> {
+    await this.ensureInitialized()
+    return this.call(method, params)
+  }
+
+  onNotification(listener: (value: { method: string; params: unknown }) => void): () => void {
+    this.notificationListeners.add(listener)
+    return () => {
+      this.notificationListeners.delete(listener)
+    }
+  }
+
+  async respondToServerRequest(payload: unknown): Promise<void> {
+    await this.ensureInitialized()
+
+    const body = asRecord(payload)
+    if (!body) {
+      throw new Error('Invalid response payload: expected object')
+    }
+
+    const id = body.id
+    if (typeof id !== 'number' || !Number.isInteger(id)) {
+      throw new Error('Invalid response payload: "id" must be an integer')
+    }
+
+    const rawError = asRecord(body.error)
+    if (rawError) {
+      const message = typeof rawError.message === 'string' && rawError.message.trim().length > 0
+        ? rawError.message.trim()
+        : 'Server request rejected by client'
+      const code = typeof rawError.code === 'number' && Number.isFinite(rawError.code)
+        ? Math.trunc(rawError.code)
+        : -32000
+      this.resolvePendingServerRequest(id, { error: { code, message } })
+      return
+    }
+
+    if (!('result' in body)) {
+      throw new Error('Invalid response payload: expected "result" or "error"')
+    }
+
+    this.resolvePendingServerRequest(id, { result: body.result })
+  }
+
+  listPendingServerRequests(): PendingServerRequest[] {
+    return Array.from(this.pendingServerRequests.values())
+  }
+
+  dispose(): void {
+    if (!this.process) return
+
+    const proc = this.process
+    this.stopping = true
+    this.process = null
+    this.initialized = false
+    this.initializePromise = null
+    this.readBuffer = ''
+
+    const failure = new Error('codex app-server stopped')
+    for (const request of this.pending.values()) {
+      request.reject(failure)
+    }
+    this.pending.clear()
+    this.pendingServerRequests.clear()
+
+    try {
+      proc.stdin.end()
+    } catch {
+      // ignore close errors on shutdown
+    }
+
+    try {
+      proc.kill('SIGTERM')
+    } catch {
+      // ignore kill errors on shutdown
+    }
+
+    const forceKillTimer = setTimeout(() => {
+      if (!proc.killed) {
+        try {
+          proc.kill('SIGKILL')
+        } catch {
+          // ignore kill errors on shutdown
+        }
+      }
+    }, 1500)
+    forceKillTimer.unref()
+  }
+}
diff --git a/src/server/authRefresh.ts b/src/server/authRefresh.ts
new file mode 100644
index 000000000..7fe739de5
--- /dev/null
+++ b/src/server/authRefresh.ts
@@ -0,0 +1,176 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+function getCodexAuthPath(): string {
+  return join(getCodexHomeDir(), 'auth.json')
+}
+
+type CodexAuth = {
+  auth_mode?: string
+  last_refresh?: number
+  tokens?: {
+    access_token?: string
+    refresh_token?: string
+    id_token?: string
+    account_id?: string
+  }
+}
+
+export type ChatgptAuthTokensRefreshParams = {
+  reason?: string
+  previousAccountId?: string
+}
+
+export type ChatgptAuthTokensRefreshResponse = {
+  accessToken: string
+  chatgptAccountId: string
+  chatgptPlanType: string | null
+}
+
+const CODEX_CHATGPT_CLIENT_ID = 'app_EMoamEEZ73f0CkXaXp7hrann'
+const DEFAULT_CODEX_REFRESH_TOKEN_URL = 'https://auth.openai.com/oauth/token'
+
+function decodeBase64UrlJson(value: string): Record<string, unknown> | null {
+  try {
+    const padded = `${value}${'='.repeat((4 - (value.length % 4)) % 4)}`
+    const decoded = Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString('utf8')
+    const parsed = JSON.parse(decoded) as unknown
+    return asRecord(parsed)
+  } catch {
+    return null
+  }
+}
+
+function decodeJwtPayload(token: string | undefined): Record<string, unknown> | null {
+  if (!token) return null
+  const parts = token.split('.')
+  if (parts.length < 2) return null
+  return decodeBase64UrlJson(parts[1] ?? '')
+}
+
+function extractChatgptTokenMetadata(accessToken: string | undefined): {
+  chatgptAccountId: string | null
+  chatgptPlanType: string | null
+} {
+  const payload = decodeJwtPayload(accessToken)
+  const auth = asRecord(payload?.['https://api.openai.com/auth'])
+  return {
+    chatgptAccountId: readNonEmptyString(auth?.chatgpt_account_id) || null,
+    chatgptPlanType: readNonEmptyString(auth?.chatgpt_plan_type) || null,
+  }
+}
+
+function readTokenErrorMessage(payload: unknown, fallback: string): string {
+  const record = asRecord(payload)
+  const message = readNonEmptyString(record?.message)
+  if (message) return message
+  const error = record?.error
+  if (typeof error === 'string' && error.trim().length > 0) return error.trim()
+  const nestedError = asRecord(error)
+  return readNonEmptyString(nestedError?.message)
+    || readNonEmptyString(nestedError?.error_description)
+    || readNonEmptyString(record?.error_description)
+    || fallback
+}
+
+function readTokenResponseString(payload: Record<string, unknown> | null, ...keys: string[]): string | null {
+  if (!payload) return null
+  for (const key of keys) {
+    const value = readNonEmptyString(payload[key])
+    if (value) return value
+  }
+  return null
+}
+
+export async function refreshChatgptAuthTokensForExternalAuth(
+  params: ChatgptAuthTokensRefreshParams = {},
+): Promise<ChatgptAuthTokensRefreshResponse> {
+  const authPath = getCodexAuthPath()
+  const raw = await readFile(authPath, 'utf8')
+  const auth = JSON.parse(raw) as CodexAuth
+  const currentRefreshToken = auth.tokens?.refresh_token?.trim() ?? ''
+  if (!currentRefreshToken) {
+    throw new Error('No ChatGPT refresh token is available. Please sign in again.')
+  }
+
+  const refreshUrl = process.env.CODEX_REFRESH_TOKEN_URL_OVERRIDE?.trim() || DEFAULT_CODEX_REFRESH_TOKEN_URL
+  const body = new URLSearchParams({
+    grant_type: 'refresh_token',
+    refresh_token: currentRefreshToken,
+    client_id: CODEX_CHATGPT_CLIENT_ID,
+  })
+
+  const response = await fetch(refreshUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: body.toString(),
+    signal: AbortSignal.timeout(25_000),
+  })
+
+  const text = await response.text()
+  let payload: Record<string, unknown> | null = null
+  try {
+    payload = asRecord(JSON.parse(text))
+  } catch {
+    payload = null
+  }
+
+  if (!response.ok) {
+    throw new Error(readTokenErrorMessage(payload, `ChatGPT token refresh failed with HTTP ${String(response.status)}`))
+  }
+
+  const accessToken = readTokenResponseString(payload, 'access_token', 'accessToken')
+  if (!accessToken) {
+    throw new Error('ChatGPT token refresh response did not include an access token.')
+  }
+
+  const nextRefreshToken = readTokenResponseString(payload, 'refresh_token', 'refreshToken') ?? currentRefreshToken
+  const nextIdToken = readTokenResponseString(payload, 'id_token', 'idToken') ?? auth.tokens?.id_token
+  const metadata = extractChatgptTokenMetadata(accessToken)
+  const chatgptAccountId =
+    metadata.chatgptAccountId
+    || readTokenResponseString(payload, 'chatgpt_account_id', 'chatgptAccountId')
+    || readNonEmptyString(params.previousAccountId)
+    || readNonEmptyString(auth.tokens?.account_id)
+  if (!chatgptAccountId) {
+    throw new Error('ChatGPT token refresh response did not include account metadata.')
+  }
+
+  const nextAuth: CodexAuth = {
+    ...auth,
+    auth_mode: auth.auth_mode || 'chatgpt',
+    last_refresh: Date.now(),
+    tokens: {
+      ...auth.tokens,
+      access_token: accessToken,
+      refresh_token: nextRefreshToken,
+      account_id: chatgptAccountId,
+      ...(nextIdToken ? { id_token: nextIdToken } : {}),
+    },
+  }
+  await writeFile(authPath, JSON.stringify(nextAuth, null, 2), { encoding: 'utf8', mode: 0o600 })
+
+  return {
+    accessToken,
+    chatgptAccountId,
+    chatgptPlanType: metadata.chatgptPlanType,
+  }
+}
diff --git a/src/server/backendQueueProcessor.ts b/src/server/backendQueueProcessor.ts
new file mode 100644
index 000000000..687e7b68e
--- /dev/null
+++ b/src/server/backendQueueProcessor.ts
@@ -0,0 +1,507 @@
+import { randomBytes } from 'node:crypto'
+import { readFile, writeFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import type { CollaborationModeKind, ReasoningEffort } from '../types/codex.js'
+import { normalizeStringArray } from './globalStateStore.js'
+import { AppServerProcess } from './appServerProcess.js'
+import type { ThreadAutomationRecord } from './threadAutomations.js'
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getCodexGlobalStatePath(): string {
+  return join(getCodexHomeDir(), '.codex-global-state.json')
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+const THREAD_QUEUE_STATE_KEY = 'thread-queue-state'
+
+export type StoredQueuedMessage = {
+  id: string
+  text: string
+  imageUrls: string[]
+  skills: Array<{ name: string; path: string }>
+  fileAttachments: Array<{ label: string; path: string; fsPath: string }>
+  collaborationMode: 'default' | 'plan'
+}
+
+export type ThreadQueueState = Record<string, StoredQueuedMessage[]>
+
+type BackendQueuedTurn = {
+  threadId: string
+  message: StoredQueuedMessage
+}
+
+export type ThreadQueueStateUpdate<T> = {
+  nextState: ThreadQueueState
+  result: T
+}
+
+type ResolvedCollaborationModeSettings = {
+  model: string
+  reasoningEffort: ReasoningEffort | null
+}
+
+function normalizeStoredQueuedMessage(value: unknown): StoredQueuedMessage | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const id = typeof record.id === 'string' ? record.id.trim() : ''
+  if (!id) return null
+
+  const normalizeNamedPathItems = (items: unknown): Array<{ name: string; path: string }> => {
+    if (!Array.isArray(items)) return []
+    return items.flatMap((item) => {
+      const itemRecord = asRecord(item)
+      if (!itemRecord) return []
+      const name = typeof itemRecord.name === 'string' ? itemRecord.name.trim() : ''
+      const path = typeof itemRecord.path === 'string' ? itemRecord.path.trim() : ''
+      return name && path ? [{ name, path }] : []
+    })
+  }
+
+  const normalizeFileAttachments = (items: unknown): Array<{ label: string; path: string; fsPath: string }> => {
+    if (!Array.isArray(items)) return []
+    return items.flatMap((item) => {
+      const itemRecord = asRecord(item)
+      if (!itemRecord) return []
+      const label = typeof itemRecord.label === 'string' ? itemRecord.label.trim() : ''
+      const path = typeof itemRecord.path === 'string' ? itemRecord.path.trim() : ''
+      const fsPath = typeof itemRecord.fsPath === 'string' ? itemRecord.fsPath.trim() : ''
+      return label && path && fsPath ? [{ label, path, fsPath }] : []
+    })
+  }
+
+  return {
+    id,
+    text: typeof record.text === 'string' ? record.text : '',
+    imageUrls: normalizeStringArray(record.imageUrls),
+    skills: normalizeNamedPathItems(record.skills),
+    fileAttachments: normalizeFileAttachments(record.fileAttachments),
+    collaborationMode: record.collaborationMode === 'plan' ? 'plan' : 'default',
+  }
+}
+
+export function normalizeThreadQueueState(value: unknown): ThreadQueueState {
+  const record = asRecord(value)
+  if (!record) return {}
+
+  const state: ThreadQueueState = {}
+  for (const [threadId, rawMessages] of Object.entries(record)) {
+    const normalizedThreadId = threadId.trim()
+    if (!normalizedThreadId || !Array.isArray(rawMessages)) continue
+    const messages = rawMessages.flatMap((item) => {
+      const message = normalizeStoredQueuedMessage(item)
+      return message ? [message] : []
+    })
+    if (messages.length > 0) {
+      state[normalizedThreadId] = messages
+    }
+  }
+  return state
+}
+
+let threadQueueMutationChain: Promise<unknown> = Promise.resolve()
+
+export async function readThreadQueueState(): Promise<ThreadQueueState> {
+  const statePath = getCodexGlobalStatePath()
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    const payload = asRecord(JSON.parse(raw)) ?? {}
+    return normalizeThreadQueueState(payload[THREAD_QUEUE_STATE_KEY])
+  } catch {
+    return {}
+  }
+}
+
+export async function writeThreadQueueStateUnlocked(nextState: ThreadQueueState): Promise<void> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    payload = asRecord(JSON.parse(raw)) ?? {}
+  } catch {
+    payload = {}
+  }
+  const normalized = normalizeThreadQueueState(nextState)
+  if (Object.keys(normalized).length > 0) {
+    payload[THREAD_QUEUE_STATE_KEY] = normalized
+  } else {
+    delete payload[THREAD_QUEUE_STATE_KEY]
+  }
+  await writeFile(statePath, JSON.stringify(payload), 'utf8')
+}
+
+async function withThreadQueueStateUpdate<T>(
+  update: (state: ThreadQueueState) => ThreadQueueStateUpdate<T> | Promise<ThreadQueueStateUpdate<T>>,
+): Promise<T> {
+  const run = threadQueueMutationChain.then(async () => {
+    const currentState = await readThreadQueueState()
+    const { nextState, result } = await update(currentState)
+    await writeThreadQueueStateUnlocked(nextState)
+    return result
+  })
+  threadQueueMutationChain = run.catch(() => {})
+  return run
+}
+
+export async function writeThreadQueueState(nextState: ThreadQueueState): Promise<void> {
+  await withThreadQueueStateUpdate(() => ({
+    nextState: normalizeThreadQueueState(nextState),
+    result: undefined,
+  }))
+}
+
+export async function appendThreadQueuedMessage(threadId: string, message: StoredQueuedMessage): Promise<void> {
+  const normalizedThreadId = threadId.trim()
+  if (!normalizedThreadId) throw new Error('threadId is required')
+  await withThreadQueueStateUpdate((state) => ({
+    nextState: {
+      ...state,
+      [normalizedThreadId]: [...(state[normalizedThreadId] ?? []), message],
+    },
+    result: undefined,
+  }))
+}
+
+function normalizeReasoningEffort(value: unknown): ReasoningEffort | '' {
+  const allowed: ReasoningEffort[] = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh']
+  return typeof value === 'string' && allowed.includes(value as ReasoningEffort)
+    ? (value as ReasoningEffort)
+    : ''
+}
+
+function normalizeCollaborationModeReasoningEffort(value: ReasoningEffort | '' | null | undefined): ReasoningEffort | null {
+  return value && value.length > 0 ? value : null
+}
+
+function extractLocalImagePathFromUrl(value: string): string | null {
+  if (!value) return null
+  try {
+    const parsed = new URL(value, 'http://localhost')
+    if (parsed.pathname !== '/codex-local-image') return null
+    const path = parsed.searchParams.get('path')?.trim() ?? ''
+    return path.length > 0 ? path : null
+  } catch {
+    return null
+  }
+}
+
+function buildTextWithAttachments(prompt: string, files: StoredQueuedMessage['fileAttachments']): string {
+  if (files.length === 0) return prompt
+  let prefix = '# Files mentioned by the user:\n'
+  for (const f of files) {
+    prefix += `\n## ${f.label}: ${f.path}\n`
+  }
+  return `${prefix}\n## My request for Codex:\n\n${prompt}\n`
+}
+
+function escapeHeartbeatXmlText(value: string): string {
+  return value
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+}
+
+export function buildHeartbeatQueuedMessage(automation: ThreadAutomationRecord): StoredQueuedMessage {
+  return {
+    id: `automation-${automation.id}-${Date.now()}-${randomBytes(3).toString('hex')}`,
+    text: `<heartbeat>
+<automation_id>${escapeHeartbeatXmlText(automation.id)}</automation_id>
+<current_time_iso>${new Date().toISOString()}</current_time_iso>
+<instructions>
+${escapeHeartbeatXmlText(automation.prompt)}
+</instructions>
+</heartbeat>`,
+    imageUrls: [],
+    skills: [],
+    fileAttachments: [],
+    collaborationMode: 'default',
+  }
+}
+
+function fileNameFromPath(pathValue: string): string {
+  const normalized = pathValue.replace(/\\/g, '/')
+  const segments = normalized.split('/').filter(Boolean)
+  return segments.at(-1) ?? normalized
+}
+
+function extractThreadIdFromNotificationParams(params: unknown): string {
+  const record = asRecord(params)
+  if (!record) return ''
+  const threadId =
+    (typeof record.threadId === 'string' ? record.threadId : '') ||
+    (typeof record.thread_id === 'string' ? record.thread_id : '') ||
+    (typeof record.conversationId === 'string' ? record.conversationId : '') ||
+    (typeof record.conversation_id === 'string' ? record.conversation_id : '')
+  if (threadId) return threadId
+  const thread = asRecord(record.thread)
+  if (thread && typeof thread.id === 'string') return thread.id
+  const turn = asRecord(record.turn)
+  if (turn) {
+    const turnThreadId =
+      (typeof turn.threadId === 'string' ? turn.threadId : '') ||
+      (typeof turn.thread_id === 'string' ? turn.thread_id : '')
+    if (turnThreadId) return turnThreadId
+  }
+  return ''
+}
+
+function isTurnCompletedNotification(notification: { method: string; params: unknown }): boolean {
+  return notification.method === 'turn/completed'
+}
+
+export class BackendQueueProcessor {
+  private readonly processingThreadIds = new Set<string>()
+  private readonly queueDrainTimersByThreadId = new Map<string, ReturnType<typeof setTimeout>>()
+  private readonly queueDrainDueAtByThreadId = new Map<string, number>()
+  private readonly unsubscribe: () => void
+
+  constructor(private readonly appServer: AppServerProcess) {
+    this.unsubscribe = appServer.onNotification((notification) => {
+      if (!isTurnCompletedNotification(notification)) return
+      const threadId = extractThreadIdFromNotificationParams(notification.params)
+      if (!threadId) return
+      void this.processThreadQueue(threadId)
+    })
+    void this.scheduleAllQueuedThreads(1000)
+  }
+
+  dispose(): void {
+    this.unsubscribe()
+    for (const timer of this.queueDrainTimersByThreadId.values()) {
+      clearTimeout(timer)
+    }
+    this.queueDrainTimersByThreadId.clear()
+    this.queueDrainDueAtByThreadId.clear()
+    this.processingThreadIds.clear()
+  }
+
+  async scheduleAllQueuedThreads(delayMs = 0): Promise<void> {
+    try {
+      const state = await readThreadQueueState()
+      for (const threadId of Object.keys(state)) {
+        this.scheduleThreadQueueDrain(threadId, delayMs)
+      }
+    } catch {
+      // Queue recovery is best-effort; normal turn-completed events can still drain later.
+    }
+  }
+
+  scheduleThreadQueueDrain(threadId: string, delayMs = 5000): void {
+    if (!threadId) return
+    const normalizedDelayMs = Math.max(0, delayMs)
+    const nextDueAt = Date.now() + normalizedDelayMs
+    const existingDueAt = this.queueDrainDueAtByThreadId.get(threadId)
+    const existingTimer = this.queueDrainTimersByThreadId.get(threadId)
+    if (existingTimer) {
+      if (existingDueAt !== undefined && existingDueAt <= nextDueAt) return
+      clearTimeout(existingTimer)
+      this.queueDrainTimersByThreadId.delete(threadId)
+      this.queueDrainDueAtByThreadId.delete(threadId)
+    }
+    const timer = setTimeout(() => {
+      this.queueDrainTimersByThreadId.delete(threadId)
+      this.queueDrainDueAtByThreadId.delete(threadId)
+      void this.processThreadQueue(threadId)
+    }, normalizedDelayMs)
+    timer.unref?.()
+    this.queueDrainTimersByThreadId.set(threadId, timer)
+    this.queueDrainDueAtByThreadId.set(threadId, nextDueAt)
+  }
+
+  async processThreadQueue(threadId: string): Promise<void> {
+    if (this.processingThreadIds.has(threadId)) return
+    this.processingThreadIds.add(threadId)
+    try {
+      const canStart = await this.canStartQueuedTurn(threadId)
+      if (!canStart) {
+        if (await this.hasQueuedTurns(threadId)) {
+          this.scheduleThreadQueueDrain(threadId)
+        }
+        return
+      }
+      const next = await this.popNextQueuedTurn(threadId)
+      if (!next) return
+      try {
+        await this.startQueuedTurn(next)
+        if (await this.hasQueuedTurns(threadId)) {
+          this.scheduleThreadQueueDrain(threadId)
+        }
+      } catch {
+        await this.restoreQueuedTurn(next)
+        this.scheduleThreadQueueDrain(threadId)
+      }
+    } catch {
+      // Queue processing is best-effort. Keep the bridge alive if app-server is unavailable.
+      this.scheduleThreadQueueDrain(threadId)
+    } finally {
+      this.processingThreadIds.delete(threadId)
+    }
+  }
+
+  private async hasQueuedTurns(threadId: string): Promise<boolean> {
+    const state = await readThreadQueueState()
+    const queue = state[threadId]
+    return Array.isArray(queue) && queue.length > 0
+  }
+
+  private async canStartQueuedTurn(threadId: string): Promise<boolean> {
+    const response = asRecord(await this.appServer.rpc('thread/read', { threadId, includeTurns: true }))
+    const thread = asRecord(response?.thread)
+    if (!thread) return false
+
+    const status = asRecord(thread.status)
+    const statusType = readNonEmptyString(status?.type)
+    if (statusType === 'inProgress' || statusType === 'running' || statusType === 'active') return false
+
+    const turns = Array.isArray(thread.turns) ? thread.turns : []
+    return !turns.some((turn) => readNonEmptyString(asRecord(turn)?.status) === 'inProgress')
+  }
+
+  private async popNextQueuedTurn(threadId: string): Promise<BackendQueuedTurn | null> {
+    return withThreadQueueStateUpdate((state) => {
+      const queue = state[threadId]
+      if (!queue || queue.length === 0) {
+        return { nextState: state, result: null }
+      }
+
+      const [message, ...rest] = queue
+      const nextState = { ...state }
+      if (rest.length > 0) {
+        nextState[threadId] = rest
+      } else {
+        delete nextState[threadId]
+      }
+      return { nextState, result: { threadId, message } }
+    })
+  }
+
+  private async restoreQueuedTurn(turn: BackendQueuedTurn): Promise<void> {
+    await withThreadQueueStateUpdate((state) => {
+      const queue = state[turn.threadId] ?? []
+      return {
+        nextState: {
+          ...state,
+          [turn.threadId]: [turn.message, ...queue],
+        },
+        result: undefined,
+      }
+    })
+  }
+
+  private async resolveCollaborationModeSettings(mode: CollaborationModeKind): Promise<ResolvedCollaborationModeSettings> {
+    let currentConfig: Record<string, unknown> | null = null
+    try {
+      const configPayload = asRecord(await this.appServer.rpc('config/read', {}))
+      currentConfig = asRecord(configPayload?.config)
+    } catch {
+      currentConfig = null
+    }
+
+    const configuredModel = readNonEmptyString(currentConfig?.model)
+    if (configuredModel) {
+      return {
+        model: configuredModel,
+        reasoningEffort: normalizeCollaborationModeReasoningEffort(normalizeReasoningEffort(currentConfig?.model_reasoning_effort)),
+      }
+    }
+
+    try {
+      const modelsPayload = asRecord(await this.appServer.rpc('model/list', {}))
+      const models = Array.isArray(modelsPayload?.data) ? modelsPayload.data : []
+      for (const row of models) {
+        const record = asRecord(row)
+        const candidate = readNonEmptyString(record?.id) || readNonEmptyString(record?.model)
+        if (candidate) {
+          return {
+            model: candidate,
+            reasoningEffort: normalizeCollaborationModeReasoningEffort(normalizeReasoningEffort(currentConfig?.model_reasoning_effort)),
+          }
+        }
+      }
+    } catch {
+      // Fall through to no collaboration-mode payload.
+    }
+
+    throw new Error(`${mode === 'plan' ? 'Plan' : 'Default'} mode requires an available model.`)
+  }
+
+  private async buildQueuedTurnParams(turn: BackendQueuedTurn): Promise<Record<string, unknown>> {
+    const localImageAttachments: StoredQueuedMessage['fileAttachments'] = []
+    for (const imageUrl of turn.message.imageUrls) {
+      const localImagePath = extractLocalImagePathFromUrl(imageUrl.trim())
+      if (!localImagePath) continue
+      localImageAttachments.push({
+        label: fileNameFromPath(localImagePath),
+        path: localImagePath,
+        fsPath: localImagePath,
+      })
+    }
+
+    const allFileAttachments = [...turn.message.fileAttachments, ...localImageAttachments]
+    const dedupedFileAttachments = allFileAttachments.filter((entry, index) =>
+      allFileAttachments.findIndex((candidate) => candidate.fsPath === entry.fsPath) === index)
+
+    const input: Array<Record<string, unknown>> = [{
+      type: 'text',
+      text: buildTextWithAttachments(turn.message.text, dedupedFileAttachments),
+    }]
+
+    for (const imageUrl of turn.message.imageUrls) {
+      const normalizedUrl = imageUrl.trim()
+      if (!normalizedUrl) continue
+      const localImagePath = extractLocalImagePathFromUrl(normalizedUrl)
+      if (localImagePath) {
+        input.push({ type: 'localImage', path: localImagePath })
+      } else {
+        input.push({ type: 'image', url: normalizedUrl, image_url: normalizedUrl })
+      }
+    }
+
+    for (const skill of turn.message.skills) {
+      input.push({ type: 'skill', name: skill.name, path: skill.path })
+    }
+
+    const params: Record<string, unknown> = {
+      threadId: turn.threadId,
+      input,
+    }
+    if (dedupedFileAttachments.length > 0) {
+      params.attachments = dedupedFileAttachments.map((f) => ({ label: f.label, path: f.path, fsPath: f.fsPath }))
+    }
+
+    try {
+      const settings = await this.resolveCollaborationModeSettings(turn.message.collaborationMode)
+      params.collaborationMode = {
+        mode: turn.message.collaborationMode,
+        settings: {
+          model: settings.model,
+          reasoning_effort: settings.reasoningEffort,
+          developer_instructions: null,
+        },
+      }
+    } catch {
+      // Older app-server versions still accept a plain turn/start without collaborationMode.
+    }
+
+    return params
+  }
+
+  private async startQueuedTurn(turn: BackendQueuedTurn): Promise<void> {
+    await this.appServer.rpc('thread/resume', { threadId: turn.threadId })
+    await this.appServer.rpc('turn/start', await this.buildQueuedTurnParams(turn))
+  }
+}
diff --git a/src/server/codexAppServerBridge.ts b/src/server/codexAppServerBridge.ts
index 0dde66bba..5daa864a7 100644
--- a/src/server/codexAppServerBridge.ts
+++ b/src/server/codexAppServerBridge.ts
@@ -41,6 +41,70 @@ import {
 } from '../commandResolution.js'
 import type { CollaborationModeKind, ReasoningEffort } from '../types/codex.js'
 import { isAbsoluteLikePath } from '../pathUtils.js'
+import {
+  installComposioCli,
+  listComposioConnectors,
+  parseComposioLimit,
+  readComposioConnectorDetail,
+  readComposioStatus,
+  startComposioLink,
+  startComposioLogin,
+} from './composioRoutesSupport.js'
+import { listTerminalQuickCommands } from './terminalQuickCommands.js'
+import {
+  buildSessionFileChangeFallback,
+  collectFileChangesForTurns,
+  mergeSessionCommandsIntoTurns,
+  revertTurnFileChanges,
+} from './sessionRecovery.js'
+import {
+  deleteProjectCronAutomation,
+  deleteThreadHeartbeatAutomation,
+  listProjectCronAutomations,
+  listThreadHeartbeatAutomations,
+  readProjectCronAutomation,
+  readProjectCronAutomations,
+  readThreadHeartbeatAutomation,
+  readThreadHeartbeatAutomations,
+  writeProjectCronAutomation,
+  writeThreadHeartbeatAutomation,
+  type ThreadAutomationRecord,
+} from './threadAutomations.js'
+import {
+  normalizePinnedThreadIds,
+  normalizeStringArray,
+  normalizeStringRecord,
+  persistWorkspaceRoot,
+  readFirstLaunchPluginsCardDismissed,
+  readMergedThreadTitleCache,
+  readPinnedThreadIds,
+  readThreadTitleCache,
+  readWorkspaceRootsState,
+  removeFromThreadTitleCache,
+  updateThreadTitleCache,
+  updateWorkspaceRootsState,
+  writeFirstLaunchPluginsCardDismissed,
+  writePinnedThreadIds,
+  writeThreadTitleCache,
+} from './globalStateStore.js'
+import { AppServerProcess, type StreamEventFrame } from './appServerProcess.js'
+import {
+  BackendQueueProcessor,
+  appendThreadQueuedMessage,
+  buildHeartbeatQueuedMessage,
+  normalizeThreadQueueState,
+  readThreadQueueState,
+  writeThreadQueueState,
+} from './backendQueueProcessor.js'
+export { BackendQueueProcessor } from './backendQueueProcessor.js'
+import { MethodCatalog } from './methodCatalog.js'
+import { fetchConnectorLogo, handleFileUpload, proxyTranscribe } from './mediaProxyRoutes.js'
+import { fetchCustomEndpointDefaultModel, normalizeProviderModelsData, readProviderBackedModelIds } from './providerModelDiscovery.js'
+import { cloneGithubRepositoryIntoBase, createProjectlessThreadDirectory } from './projectCreation.js'
+import { API_PERF_BODY_MB_THRESHOLD, API_PERF_LOGGING_ENABLED, API_PERF_MS_THRESHOLD, MB_DIVISOR, getChunkByteLength } from './apiPerfConfig.js'
+import { buildThreadSearchIndex, isExactPhraseMatch, listFilesWithRipgrep, scoreFileCandidate, type ThreadSearchIndex } from './threadSearchIndex.js'
+import { mergeSessionSkillInputsIntoThreadResult, sanitizeThreadTurnsInlinePayloads } from './threadInlinePayloads.js'
+export { mergeSessionSkillInputsIntoTurns, sanitizeThreadTurnsInlinePayloads } from './threadInlinePayloads.js'
 
 type JsonRpcCall = {
   jsonrpc: '2.0'
@@ -69,6 +133,12 @@ type RpcExecutor = {
   rpc: (method: string, params: unknown) => Promise<unknown>
 }
 
+type TelegramBridgeConfigState = {
+  botToken: string
+  chatIds: number[]
+  allowedUserIds: Array<number | '*'>
+}
+
 type ServerRequestReply = {
   result?: unknown
   error?: {
@@ -108,779 +178,18 @@ type ChatgptAuthTokensRefreshResponse = {
   chatgptPlanType: string | null
 }
 
-type ThreadSearchDocument = {
-  id: string
-  title: string
-  preview: string
-  messageText: string
-  searchableText: string
-}
-
-type ThreadSearchIndex = {
-  docsById: Map<string, ThreadSearchDocument>
-}
-
-type ProviderModelsResponse = {
-  data: string[]
-  providerId: string
-  source: 'provider'
-}
-
-type ComposioUserData = {
-  apiKey: string
-  baseUrl: string
-  webUrl: string
-  orgId: string
-  testUserId: string
-}
-
-type ComposioStatusResponse = {
-  available: boolean
-  authenticated: boolean
-  cliVersion: string
-  email: string
-  defaultOrgName: string
-  defaultOrgId: string
-  webUrl: string
-  baseUrl: string
-  testUserId: string
-}
-
-type ComposioConnectionSummary = {
-  id: string
-  wordId: string
-  alias: string
-  status: string
-  authScheme: string
-  createdAt: string
-  updatedAt: string
-  isComposioManaged: boolean
-  isDisabled: boolean
-}
-
-type ComposioConnectorSummary = {
-  slug: string
-  name: string
-  description: string
-  logoUrl: string
-  latestVersion: string
-  toolsCount: number
-  triggersCount: number
-  isNoAuth: boolean
-  enabled: boolean
-  authModes: string[]
-  activeCount: number
-  totalConnections: number
-  connectionStatuses: string[]
-}
-
-type ComposioToolSummary = {
-  slug: string
-  name: string
-  description: string
-}
-
-type ComposioConnectorDetail = {
-  connector: ComposioConnectorSummary
-  connections: ComposioConnectionSummary[]
-  tools: ComposioToolSummary[]
-  dashboardUrl: string
-}
-
-type ComposioLinkResult = {
-  status: string
-  message: string
-  connectedAccountId: string
-  redirectUrl: string
-  toolkit: string
-  projectType: string
-}
-
-type ComposioLoginResult = {
-  status: string
-  message: string
-  loginUrl: string
-  cliKey: string
-  expiresAt: string
-}
-
-type ComposioInstallResult = {
-  ok: boolean
-  command: string
-  output: string
-}
-
-type ComposioConnectorPage = {
-  data: ComposioConnectorSummary[]
-  nextCursor: string | null
-  total: number
-}
-
-const COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX = 1000
-
-const PROVIDER_MODELS_FETCH_TIMEOUT_MS = 5_000
-
 const THREAD_RESPONSE_TURN_LIMIT = 10
 const THREAD_TURN_PAGE_READ_CACHE_TTL_MS = 30_000
 const THREAD_METHODS_WITH_TURNS = new Set(['thread/read', 'thread/resume', 'thread/fork', 'thread/rollback'])
 const THREAD_SEARCH_FULL_TEXT_THREAD_LIMIT = 100
 const PROJECTLESS_THREAD_DIRECTORY_MAX_ATTEMPTS = 100
 const PROJECTLESS_THREAD_SLUG_MAX_LENGTH = 80
-const API_PERF_LOGGING_ENV_KEY = 'CODEXUI_API_PERF_LOGGING'
-const API_PERF_MS_THRESHOLD_ENV_KEY = 'CODEXUI_API_PERF_MS_THRESHOLD'
-const API_PERF_BODY_MB_THRESHOLD_ENV_KEY = 'CODEXUI_API_PERF_BODY_MB_THRESHOLD'
-const DEFAULT_API_PERF_MS_THRESHOLD = 300
-const DEFAULT_API_PERF_BODY_MB_THRESHOLD = 1
-const MB_DIVISOR = 1024 * 1024
-const COMPOSIO_USER_DATA_PATH = join(homedir(), '.composio', 'user_data.json')
-
-type SessionRecoveredFileChange = {
-  path: string
-  operation: 'add' | 'delete' | 'update'
-  movedToPath: string | null
-  diff: string
-  addedLineCount: number
-  removedLineCount: number
-}
-
-type SessionRecoveredTurnFileChanges = {
-  turnId: string
-  turnIndex: number
-  fileChanges: SessionRecoveredFileChange[]
-}
-
-type SessionRecoveredSkillInput = {
-  name: string
-  path: string
-}
-
-type SessionSkillInputCacheEntry = {
-  size: number
-  mtimeMs: number
-  skillsByTurnId: Map<string, SessionRecoveredSkillInput[]>
-}
-
-const SESSION_SKILL_INPUT_CACHE_LIMIT = 64
-const sessionSkillInputCache = new Map<string, SessionSkillInputCacheEntry>()
-
-function parseSessionSkillText(value: string): SessionRecoveredSkillInput | null {
-  const trimmed = value.trim()
-  if (!trimmed.startsWith('<skill>')) return null
-  const name = trimmed.match(/<name>\s*([\s\S]*?)\s*<\/name>/u)?.[1]?.trim() ?? ''
-  const path = trimmed.match(/<path>\s*([\s\S]*?)\s*<\/path>/u)?.[1]?.trim() ?? ''
-  if (!name || !path) return null
-  return { name, path }
-}
-
-function buildSessionSkillInputsByTurn(sessionLogRaw: string): Map<string, SessionRecoveredSkillInput[]> {
-  let currentTurnId = ''
-  const skillsByTurnId = new Map<string, SessionRecoveredSkillInput[]>()
-
-  for (const line of sessionLogRaw.split('\n')) {
-    if (!line.trim()) continue
-    let row: Record<string, unknown> | null = null
-    try {
-      row = JSON.parse(line) as Record<string, unknown>
-    } catch {
-      continue
-    }
-
-    if (row.type === 'turn_context') {
-      const payloadRecord = asRecord(row.payload)
-      currentTurnId = readNonEmptyString(payloadRecord?.turn_id) || currentTurnId
-      continue
-    }
-    if (row.type === 'event_msg') {
-      const payloadRecord = asRecord(row.payload)
-      if (payloadRecord?.type === 'task_started') {
-        currentTurnId = readNonEmptyString(payloadRecord.turn_id) || currentTurnId
-      }
-      continue
-    }
-
-    if (row.type !== 'response_item' || !currentTurnId) continue
-    const payloadRecord = asRecord(row.payload)
-    if (payloadRecord?.type !== 'message' || payloadRecord.role !== 'user') continue
-    const content = Array.isArray(payloadRecord.content) ? payloadRecord.content : []
-
-    for (const contentItem of content) {
-      const contentRecord = asRecord(contentItem)
-      if (contentRecord?.type !== 'input_text' || typeof contentRecord.text !== 'string') continue
-      const skill = parseSessionSkillText(contentRecord.text)
-      if (!skill) continue
-      const existing = skillsByTurnId.get(currentTurnId) ?? []
-      if (!existing.some((item) => item.path === skill.path)) {
-        existing.push(skill)
-        skillsByTurnId.set(currentTurnId, existing)
-      }
-    }
-  }
-
-  return skillsByTurnId
-}
-
-async function readCachedSessionSkillInputsByTurn(sessionPath: string): Promise<Map<string, SessionRecoveredSkillInput[]>> {
-  const sessionStat = await stat(sessionPath)
-  const cached = sessionSkillInputCache.get(sessionPath)
-  if (cached && cached.size === sessionStat.size && cached.mtimeMs === sessionStat.mtimeMs) {
-    return cached.skillsByTurnId
-  }
-
-  const sessionLogRaw = await readFile(sessionPath, 'utf8')
-  const skillsByTurnId = buildSessionSkillInputsByTurn(sessionLogRaw)
-  sessionSkillInputCache.set(sessionPath, {
-    size: sessionStat.size,
-    mtimeMs: sessionStat.mtimeMs,
-    skillsByTurnId,
-  })
-  if (sessionSkillInputCache.size > SESSION_SKILL_INPUT_CACHE_LIMIT) {
-    const oldestKey = sessionSkillInputCache.keys().next().value
-    if (oldestKey) sessionSkillInputCache.delete(oldestKey)
-  }
-  return skillsByTurnId
-}
-
-function mergeSessionSkillInputsIntoTurnsFromMap(
-  turns: unknown[],
-  skillsByTurnId: Map<string, SessionRecoveredSkillInput[]>,
-): unknown[] {
-  const turnIds = new Set<string>()
-  for (const turn of turns) {
-    const turnRecord = asRecord(turn)
-    const turnId = readNonEmptyString(turnRecord?.id)
-    if (turnId) turnIds.add(turnId)
-  }
-  if (turnIds.size === 0) return turns
-
-  if (skillsByTurnId.size === 0) return turns
-
-  let changed = false
-  const nextTurns = turns.map((turn) => {
-    const turnRecord = asRecord(turn)
-    const turnId = readNonEmptyString(turnRecord?.id)
-    const skills = turnId ? skillsByTurnId.get(turnId) : undefined
-    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : null
-    if (!turnRecord || !skills || skills.length === 0 || !items) return turn
-
-    let targetUserMessageIndex = -1
-    for (let index = items.length - 1; index >= 0; index -= 1) {
-      const itemRecord = asRecord(items[index])
-      if (itemRecord?.type === 'userMessage' && Array.isArray(itemRecord.content)) {
-        targetUserMessageIndex = index
-        break
-      }
-    }
-    if (targetUserMessageIndex < 0) return turn
-
-    let addedToMessage = false
-    const nextItems = items.map((item, index) => {
-      const itemRecord = asRecord(item)
-      const content = Array.isArray(itemRecord?.content) ? itemRecord.content : null
-      if (index !== targetUserMessageIndex || itemRecord?.type !== 'userMessage' || !content) return item
-
-      const existingSkillPaths = new Set(
-        content.flatMap((contentItem) => {
-          const contentRecord = asRecord(contentItem)
-          const path = typeof contentRecord?.path === 'string' ? contentRecord.path.trim() : ''
-          return contentRecord?.type === 'skill' && path ? [path] : []
-        }),
-      )
-      const missingSkills = skills.filter((skill) => !existingSkillPaths.has(skill.path))
-      if (missingSkills.length === 0) return item
-
-      addedToMessage = true
-      changed = true
-      return {
-        ...itemRecord,
-        content: [
-          ...content,
-          ...missingSkills.map((skill) => ({ type: 'skill', name: skill.name, path: skill.path })),
-        ],
-      }
-    })
-
-    return addedToMessage ? { ...turnRecord, items: nextItems } : turn
-  })
-
-  return changed ? nextTurns : turns
-}
-
-export function mergeSessionSkillInputsIntoTurns(turns: unknown[], sessionLogRaw: string): unknown[] {
-  return mergeSessionSkillInputsIntoTurnsFromMap(turns, buildSessionSkillInputsByTurn(sessionLogRaw))
-}
-
-async function mergeSessionSkillInputsIntoThreadResult(result: unknown): Promise<unknown> {
-  const record = asRecord(result)
-  const thread = asRecord(record?.thread)
-  const turns = Array.isArray(thread?.turns) ? thread.turns : null
-  const sessionPath = readNonEmptyString(thread?.path)
-  if (!record || !thread || !turns || turns.length === 0 || !sessionPath || !isAbsolute(sessionPath)) {
-    return result
-  }
-
-  try {
-    const skillsByTurnId = await readCachedSessionSkillInputsByTurn(sessionPath)
-    const mergedTurns = mergeSessionSkillInputsIntoTurnsFromMap(turns, skillsByTurnId)
-    if (mergedTurns === turns) return result
-    return {
-      ...record,
-      thread: {
-        ...thread,
-        turns: mergedTurns,
-      },
-    }
-  } catch {
-    return result
-  }
-}
-
-function readEnvValueFromFile(filePath: string, key: string): string | null {
-  try {
-    const content = readFileSync(filePath, 'utf8')
-    const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    const match = content.match(new RegExp(`^\\s*${escapedKey}\\s*=\\s*(.+)\\s*$`, 'm'))
-    if (!match) return null
-    const rawValue = match[1]?.trim() ?? ''
-    if (!rawValue) return null
-    if ((rawValue.startsWith('"') && rawValue.endsWith('"')) || (rawValue.startsWith('\'') && rawValue.endsWith('\''))) {
-      return rawValue.slice(1, -1).trim()
-    }
-    return rawValue
-  } catch {
-    return null
-  }
-}
-
-function parseBooleanEnvFlag(value: string | null | undefined): boolean | null {
-  if (!value) return null
-  const normalized = value.trim().toLowerCase()
-  if (['1', 'true', 'yes', 'on'].includes(normalized)) return true
-  if (['0', 'false', 'no', 'off'].includes(normalized)) return false
-  return null
-}
-
-function resolveApiPerfLoggingEnabled(): boolean {
-  const explicitValue = parseBooleanEnvFlag(process.env[API_PERF_LOGGING_ENV_KEY])
-  if (explicitValue !== null) return explicitValue
-
-  const fromEnvLocal = parseBooleanEnvFlag(readEnvValueFromFile('.env.local', API_PERF_LOGGING_ENV_KEY))
-  if (fromEnvLocal !== null) return fromEnvLocal
-
-  const fromEnv = parseBooleanEnvFlag(readEnvValueFromFile('.env', API_PERF_LOGGING_ENV_KEY))
-  if (fromEnv !== null) return fromEnv
-
-  return false
-}
-
-const API_PERF_LOGGING_ENABLED = resolveApiPerfLoggingEnabled()
-
-function parseNumberEnvFlag(value: string | null | undefined): number | null {
-  if (!value) return null
-  const parsed = Number.parseFloat(value.trim())
-  if (!Number.isFinite(parsed)) return null
-  return parsed
-}
-
-function resolveNumericEnvConfig(envKey: string, fallback: number): number {
-  const fromProcess = parseNumberEnvFlag(process.env[envKey])
-  if (fromProcess !== null) return fromProcess
-
-  const fromEnvLocal = parseNumberEnvFlag(readEnvValueFromFile('.env.local', envKey))
-  if (fromEnvLocal !== null) return fromEnvLocal
-
-  const fromEnv = parseNumberEnvFlag(readEnvValueFromFile('.env', envKey))
-  if (fromEnv !== null) return fromEnv
-
-  return fallback
-}
-
-const API_PERF_MS_THRESHOLD = resolveNumericEnvConfig(API_PERF_MS_THRESHOLD_ENV_KEY, DEFAULT_API_PERF_MS_THRESHOLD)
-const API_PERF_BODY_MB_THRESHOLD = resolveNumericEnvConfig(API_PERF_BODY_MB_THRESHOLD_ENV_KEY, DEFAULT_API_PERF_BODY_MB_THRESHOLD)
-
-function getChunkByteLength(chunk: unknown, encoding?: BufferEncoding): number {
-  if (typeof chunk === 'string') {
-    return Buffer.byteLength(chunk, encoding)
-  }
-  if (chunk instanceof Uint8Array) {
-    return chunk.byteLength
-  }
-  if (ArrayBuffer.isView(chunk)) {
-    return chunk.byteLength
-  }
-  if (chunk instanceof ArrayBuffer) {
-    return chunk.byteLength
-  }
-  return 0
-}
-
 function asRecord(value: unknown): Record<string, unknown> | null {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
     ? (value as Record<string, unknown>)
     : null
 }
 
-function isInlineDataUrl(value: string): boolean {
-  return /^data:/iu.test(value.trim())
-}
-
-function inferImageMimeTypeFromBytes(bytes: Uint8Array): string | null {
-  if (
-    bytes.length >= 8 &&
-    bytes[0] === 0x89 &&
-    bytes[1] === 0x50 &&
-    bytes[2] === 0x4e &&
-    bytes[3] === 0x47 &&
-    bytes[4] === 0x0d &&
-    bytes[5] === 0x0a &&
-    bytes[6] === 0x1a &&
-    bytes[7] === 0x0a
-  ) {
-    return 'image/png'
-  }
-  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
-    return 'image/jpeg'
-  }
-  if (
-    bytes.length >= 12 &&
-    bytes[0] === 0x52 &&
-    bytes[1] === 0x49 &&
-    bytes[2] === 0x46 &&
-    bytes[3] === 0x46 &&
-    bytes[8] === 0x57 &&
-    bytes[9] === 0x45 &&
-    bytes[10] === 0x42 &&
-    bytes[11] === 0x50
-  ) {
-    return 'image/webp'
-  }
-  if (
-    bytes.length >= 6 &&
-    bytes[0] === 0x47 &&
-    bytes[1] === 0x49 &&
-    bytes[2] === 0x46 &&
-    bytes[3] === 0x38 &&
-    (bytes[4] === 0x37 || bytes[4] === 0x39) &&
-    bytes[5] === 0x61
-  ) {
-    return 'image/gif'
-  }
-  return null
-}
-
-function inferImageMimeTypeFromBase64(value: string): string | null {
-  const compact = value.trim().replace(/\s+/gu, '')
-  if (compact.length < 32 || !/^[A-Za-z0-9+/]+={0,2}$/u.test(compact)) return null
-  try {
-    return inferImageMimeTypeFromBytes(Buffer.from(compact.slice(0, 64), 'base64'))
-  } catch {
-    return null
-  }
-}
-
-function normalizeBase64ImageDataUrl(value: string, mimeType: string): string | null {
-  const trimmed = value.trim()
-  if (!trimmed) return null
-  if (isInlineDataUrl(trimmed)) {
-    return /^data:image\//iu.test(trimmed) ? trimmed : null
-  }
-  const compact = trimmed.replace(/\s+/gu, '')
-  const inferredMimeType = inferImageMimeTypeFromBase64(compact)
-  if (!inferredMimeType) return null
-  const normalizedMimeType = mimeType.trim().toLowerCase()
-  const finalMimeType = normalizedMimeType.startsWith('image/') && normalizedMimeType !== 'image/*'
-    ? normalizedMimeType
-    : inferredMimeType
-  return `data:${finalMimeType};base64,${compact}`
-}
-
-function extensionFromMimeType(mimeType: string): string {
-  const normalized = mimeType.trim().toLowerCase()
-  if (normalized === 'image/png') return '.png'
-  if (normalized === 'image/jpeg') return '.jpg'
-  if (normalized === 'image/webp') return '.webp'
-  if (normalized === 'image/gif') return '.gif'
-  if (normalized === 'image/svg+xml') return '.svg'
-  if (normalized === 'application/pdf') return '.pdf'
-  return ''
-}
-
-function asNonEmptyString(value: unknown): string | null {
-  if (typeof value !== 'string') return null
-  const trimmed = value.trim()
-  return trimmed.length > 0 ? trimmed : null
-}
-
-function toAttachmentLinkTarget(block: Record<string, unknown>, fallback: string): string {
-  const candidate = asNonEmptyString(block.path)
-    ?? asNonEmptyString(block.file_path)
-    ?? asNonEmptyString(block.filename)
-    ?? asNonEmptyString(block.file_id)
-    ?? fallback
-  if (candidate.startsWith('file://')) return candidate
-  if (candidate.startsWith('/')) return `file://${candidate}`
-  return `attachment://${candidate}`
-}
-
-async function persistInlineDataUrlToLocalFile(dataUrl: string, baseName: string): Promise<string | null> {
-  const trimmed = dataUrl.trim()
-  const match = /^data:([^;,]*)(;base64)?,(.*)$/isu.exec(trimmed)
-  if (!match) return null
-  const mimeType = (match[1] ?? '').trim().toLowerCase()
-  const encodedPayload = match[3] ?? ''
-  let bytes: Buffer
-  try {
-    bytes = match[2]
-      ? Buffer.from(encodedPayload, 'base64')
-      : Buffer.from(decodeURIComponent(encodedPayload), 'utf8')
-  } catch {
-    return null
-  }
-  if (bytes.length === 0) return null
-
-  const hash = createHash('sha1').update(bytes).digest('hex')
-  const ext = extensionFromMimeType(mimeType)
-  const mediaDir = join(tmpdir(), 'codex-web-inline-media')
-  await mkdir(mediaDir, { recursive: true })
-  const fileName = `${baseName}-${hash}${ext}`
-  const filePath = join(mediaDir, fileName)
-  try {
-    await stat(filePath)
-  } catch {
-    await writeFile(filePath, bytes)
-  }
-  return filePath
-}
-
-function toLocalImageProxyUrl(path: string): string {
-  return `/codex-local-image?path=${encodeURIComponent(path)}`
-}
-
-const INLINE_IMAGE_FIELD_NAMES = new Set([
-  'b64_json',
-  'image',
-  'image_url',
-  'images',
-  'result',
-  'url',
-])
-
-type InlinePayloadSanitizeContext = {
-  turnId: string
-  itemId: string
-  blockIndex: number
-  fieldName?: string
-}
-
-function isPotentialInlineImageField(fieldName: string | undefined): boolean {
-  return typeof fieldName === 'string' && INLINE_IMAGE_FIELD_NAMES.has(fieldName)
-}
-
-async function sanitizeInlineImageString(
-  value: string,
-  context: InlinePayloadSanitizeContext,
-): Promise<{ value: string; changed: boolean }> {
-  if (!isPotentialInlineImageField(context.fieldName)) {
-    return { value, changed: false }
-  }
-
-  const dataUrl = normalizeBase64ImageDataUrl(value, 'image/*')
-  if (!dataUrl) return { value, changed: false }
-
-  const localUrl = await persistInlineDataUrlToLocalFile(
-    dataUrl,
-    `inline-image-${context.turnId}-${context.itemId}-${context.fieldName}-${String(context.blockIndex)}`,
-  )
-  if (!localUrl) return { value, changed: false }
-
-  return { value: toLocalImageProxyUrl(localUrl), changed: true }
-}
-
-async function sanitizeInlineUserContentBlock(
-  block: unknown,
-  context: InlinePayloadSanitizeContext,
-): Promise<unknown> {
-  const record = asRecord(block)
-  if (!record) return block
-
-  const type = asNonEmptyString(record.type) ?? ''
-  const imageUrl = asNonEmptyString(record.url) ?? asNonEmptyString(record.image_url)
-  if (imageUrl && isInlineDataUrl(imageUrl)) {
-    const localUrl = await persistInlineDataUrlToLocalFile(imageUrl, `inline-image-${context.turnId}-${context.itemId}-${String(context.blockIndex)}`)
-    if (localUrl) {
-      const nextRecord = { ...record }
-      if (typeof record.url === 'string') {
-        nextRecord.url = toLocalImageProxyUrl(localUrl)
-      }
-      if (typeof record.image_url === 'string') {
-        nextRecord.image_url = toLocalImageProxyUrl(localUrl)
-      }
-      return {
-        ...nextRecord,
-        type: 'image',
-      }
-    }
-    const target = toAttachmentLinkTarget(record, `inline-image/${context.turnId}/${context.itemId}/${String(context.blockIndex)}`)
-    return {
-      type: 'text',
-      text: `Image attachment: ${target}`,
-    }
-  }
-
-  if (type === 'imageGeneration' || type === 'image_generation') {
-    const rawResult = asNonEmptyString(record.result)
-      ?? asNonEmptyString(record.b64_json)
-      ?? asNonEmptyString(record.image)
-    const mimeType = asNonEmptyString(record.mime_type)
-      ?? asNonEmptyString(record.mimeType)
-      ?? 'image/png'
-    const dataUrl = rawResult ? normalizeBase64ImageDataUrl(rawResult, mimeType) : null
-    if (dataUrl) {
-      const localUrl = await persistInlineDataUrlToLocalFile(dataUrl, `generated-image-${context.turnId}-${context.itemId}`)
-      if (localUrl) {
-        return {
-          ...record,
-          type: 'imageView',
-          path: localUrl,
-        }
-      }
-    }
-  }
-
-  const inlineFileData = asNonEmptyString(record.file_data)
-    ?? asNonEmptyString(record.data)
-    ?? asNonEmptyString(record.base64)
-  if ((type.includes('file') || type === 'input_file' || type === 'file') && inlineFileData) {
-    const mimeType = asNonEmptyString(record.mime_type) ?? 'application/octet-stream'
-    const fileDataUrl = `data:${mimeType};base64,${inlineFileData}`
-    const localUrl = await persistInlineDataUrlToLocalFile(fileDataUrl, `inline-file-${context.turnId}-${context.itemId}-${String(context.blockIndex)}`)
-    if (localUrl) {
-      return {
-        type: 'text',
-        text: `File attachment: ${localUrl}`,
-      }
-    }
-    const target = toAttachmentLinkTarget(record, `inline-file/${context.turnId}/${context.itemId}/${String(context.blockIndex)}`)
-    return {
-      type: 'text',
-      text: `File attachment: ${target}`,
-    }
-  }
-
-  return block
-}
-
-async function sanitizeInlinePayloadDeep(
-  value: unknown,
-  context: InlinePayloadSanitizeContext,
-): Promise<{ value: unknown; changed: boolean }> {
-  const maybeBlock = await sanitizeInlineUserContentBlock(value, context)
-  if (maybeBlock !== value) {
-    return { value: maybeBlock, changed: true }
-  }
-
-  if (typeof value === 'string') {
-    return sanitizeInlineImageString(value, context)
-  }
-
-  if (Array.isArray(value)) {
-    let changed = false
-    const nextArray: unknown[] = []
-    for (let index = 0; index < value.length; index += 1) {
-      const nested = await sanitizeInlinePayloadDeep(value[index], {
-        turnId: context.turnId,
-        itemId: context.itemId,
-        blockIndex: index,
-        fieldName: context.fieldName,
-      })
-      if (nested.changed) changed = true
-      nextArray.push(nested.value)
-    }
-    return changed ? { value: nextArray, changed: true } : { value, changed: false }
-  }
-
-  const record = asRecord(value)
-  if (!record) return { value, changed: false }
-
-  let changed = false
-  const nextRecord: Record<string, unknown> = {}
-  for (const [key, nestedValue] of Object.entries(record)) {
-    const nested = await sanitizeInlinePayloadDeep(nestedValue, {
-      turnId: context.turnId,
-      itemId: context.itemId,
-      blockIndex: context.blockIndex,
-      fieldName: key,
-    })
-    if (nested.changed) changed = true
-    nextRecord[key] = nested.value
-  }
-
-  return changed ? { value: nextRecord, changed: true } : { value, changed: false }
-}
-
-export async function sanitizeThreadTurnsInlinePayloads(method: string, result: unknown): Promise<unknown> {
-  if (!THREAD_METHODS_WITH_TURNS.has(method)) return result
-
-  const record = asRecord(result)
-  const thread = asRecord(record?.thread)
-  const turns = Array.isArray(thread?.turns) ? thread.turns : null
-  if (!record || !thread || !turns || turns.length === 0) return result
-
-  let changed = false
-  const nextTurns: unknown[] = []
-  for (let turnIndex = 0; turnIndex < turns.length; turnIndex += 1) {
-    const turn = turns[turnIndex]
-    const turnRecord = asRecord(turn)
-    const turnId = asNonEmptyString(turnRecord?.id) ?? 'turn'
-    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : null
-    if (!turnRecord || !items) {
-      nextTurns.push(turn)
-      continue
-    }
-
-    let itemChanged = false
-    const nextItems: unknown[] = []
-    for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
-      const item = items[itemIndex]
-      const itemRecord = asRecord(item)
-      const itemId = asNonEmptyString(itemRecord?.id) ?? 'item'
-      if (!itemRecord) {
-        nextItems.push(item)
-        continue
-      }
-      const sanitizedItem = await sanitizeInlinePayloadDeep(item, {
-        turnId,
-        itemId,
-        blockIndex: itemIndex + turnIndex,
-      })
-      if (!sanitizedItem.changed) {
-        nextItems.push(item)
-        continue
-      }
-      itemChanged = true
-      nextItems.push(sanitizedItem.value)
-    }
-
-    if (!itemChanged) {
-      nextTurns.push(turn)
-      continue
-    }
-    changed = true
-    nextTurns.push({
-      ...turnRecord,
-      items: nextItems,
-    })
-  }
-
-  if (!changed) return result
-  return {
-    ...record,
-    thread: {
-      ...thread,
-      turns: nextTurns,
-    },
-  }
-}
-
 function trimThreadTurnsInRpcResult(method: string, result: unknown): unknown {
   if (!THREAD_METHODS_WITH_TURNS.has(method)) return result
 
@@ -933,346 +242,19 @@ function isTimeoutError(payload: unknown): boolean {
   return payload instanceof Error && (payload.name === 'AbortError' || payload.name === 'TimeoutError')
 }
 
-function formatProjectlessDateSegment(date = new Date()): string {
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${date.getFullYear()}-${month}-${day}`
-}
-
-function buildProjectlessPromptSlug(prompt: string | null): string {
-  const slug = prompt
-    ?.toLowerCase()
-    .match(/[a-z0-9]+/g)
-    ?.slice(0, 6)
-    .join('-')
-    .slice(0, PROJECTLESS_THREAD_SLUG_MAX_LENGTH)
-  return slug && slug.length > 0 ? slug : 'new-chat'
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
 }
 
-async function ensureRealDirectory(path: string, label: string): Promise<void> {
-  const info = await lstat(path)
-  if (info.isSymbolicLink() || !info.isDirectory()) {
-    throw new Error(`${label} must be a real directory`)
-  }
-}
-
-async function createProjectlessThreadDirectory(prompt: string | null): Promise<{ cwd: string; outputDirectory: string; workspaceRoot: string }> {
-  const workspaceRoot = join(homedir(), 'Documents', 'Codex')
-  await mkdir(workspaceRoot, { recursive: true })
-  await ensureRealDirectory(workspaceRoot, 'Projectless workspace root')
-
-  const dateDir = join(workspaceRoot, formatProjectlessDateSegment())
-  await mkdir(dateDir, { recursive: true })
-  await ensureRealDirectory(dateDir, 'Projectless thread date directory')
-
-  const slug = buildProjectlessPromptSlug(prompt)
-  for (let index = 0; index < PROJECTLESS_THREAD_DIRECTORY_MAX_ATTEMPTS; index += 1) {
-    const folderName = index === 0 ? slug : `${slug}-${index + 1}`
-    const cwd = join(dateDir, folderName)
-    try {
-      await mkdir(cwd, { recursive: false })
-      return { cwd, outputDirectory: cwd, workspaceRoot }
-    } catch {
-      try {
-        await stat(cwd)
-      } catch {
-        throw new Error('Failed to create new chat folder')
-      }
-    }
-  }
-
-  throw new Error('Unable to create a unique new chat folder')
-}
-
-function normalizeGithubCloneUrl(rawUrl: string): { url: string; repoName: string } {
-  const trimmedUrl = rawUrl.trim()
-  if (!trimmedUrl) throw new Error('Missing GitHub repository URL')
-
-  const sshMatch = trimmedUrl.match(/^git@github\.com:([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+?)(?:\.git)?$/u)
-  if (sshMatch) {
-    const repoName = sshMatch[2]
-    return { url: `git@github.com:${sshMatch[1]}/${repoName}.git`, repoName }
-  }
-
-  let parsed: URL
-  try {
-    parsed = new URL(trimmedUrl)
-  } catch {
-    throw new Error('Enter a valid GitHub repository URL')
-  }
-  if (parsed.hostname.toLowerCase() !== 'github.com') {
-    throw new Error('Only github.com repository URLs are supported')
-  }
-  const segments = parsed.pathname.split('/').filter(Boolean)
-  if (segments.length < 2) {
-    throw new Error('Enter a GitHub repository URL with owner and repository name')
-  }
-  const owner = segments[0]
-  const repoName = segments[1].replace(/\.git$/iu, '')
-  if (!/^[A-Za-z0-9_.-]+$/u.test(owner) || !/^[A-Za-z0-9_.-]+$/u.test(repoName)) {
-    throw new Error('GitHub repository owner or name contains unsupported characters')
-  }
-  return { url: `https://github.com/${owner}/${repoName}.git`, repoName }
-}
-
-async function cloneGithubRepositoryIntoBase(rawUrl: string, rawBasePath: string): Promise<string> {
-  const basePath = rawBasePath.trim()
-  if (!basePath) throw new Error('Missing clone destination folder')
-  const normalizedBasePath = isAbsolute(basePath) ? basePath : resolve(basePath)
-  await ensureRealDirectory(normalizedBasePath, 'Clone destination folder')
-
-  const { url, repoName } = normalizeGithubCloneUrl(rawUrl)
-  const targetPath = join(normalizedBasePath, repoName)
-  try {
-    await stat(targetPath)
-    throw new Error(`Destination already exists: ${targetPath}`)
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException)?.code !== 'ENOENT') throw error
-  }
-
-  try {
-    await runCommand('git', ['clone', url, targetPath], { cwd: normalizedBasePath, timeoutMs: 5 * 60_000 })
-  } catch (error) {
-    await rm(targetPath, { recursive: true, force: true }).catch(() => undefined)
-    throw error
-  }
-  await persistWorkspaceRoot(targetPath, '')
-  return targetPath
-}
-
-function normalizeHeaderValue(value: unknown): string | null {
-  if (typeof value === 'string') {
-    const trimmed = value.trim()
-    return trimmed.length > 0 ? trimmed : null
-  }
-  if (typeof value === 'number' || typeof value === 'boolean') {
-    return String(value)
-  }
-  return null
-}
-
-function normalizeQueryParams(value: unknown): URLSearchParams {
-  const params = new URLSearchParams()
-  const record = asRecord(value)
-  if (!record) return params
-
-  for (const [key, rawValue] of Object.entries(record)) {
-    const normalized = normalizeHeaderValue(rawValue)
-    if (!normalized) continue
-    params.set(key, normalized)
-  }
-
-  return params
-}
-
-function buildProviderModelsUrl(baseUrl: string, queryParams: unknown): URL {
-  const url = new URL(baseUrl)
-  url.pathname = url.pathname.endsWith('/') ? `${url.pathname}models` : `${url.pathname}/models`
-  const extraParams = normalizeQueryParams(queryParams)
-  for (const [key, value] of extraParams.entries()) {
-    url.searchParams.set(key, value)
-  }
-  return url
-}
-
-function normalizeProviderModelsData(payload: unknown): string[] {
-  const record = asRecord(payload)
-  const rows = Array.isArray(record?.data) ? record.data : null
-  if (!rows) {
-    throw new Error('provider /models payload is missing a data array')
-  }
-
-  const ids: string[] = []
-  for (const row of rows) {
-    const entry = asRecord(row)
-    const candidate = readNonEmptyString(entry?.id)
-    if (!candidate || ids.includes(candidate)) continue
-    ids.push(candidate)
-  }
-  return ids
-}
-
-async function fetchCustomEndpointDefaultModel(baseUrl: string, apiKey: string): Promise<string> {
-  const normalizedBaseUrl = baseUrl.trim()
-  if (!normalizedBaseUrl) return ''
-
-  try {
-    const modelsUrl = buildProviderModelsUrl(normalizedBaseUrl, null)
-    const headers: Record<string, string> = apiKey ? { Authorization: `Bearer ${apiKey}` } : {}
-    const response = await fetch(modelsUrl, { headers, signal: AbortSignal.timeout(PROVIDER_MODELS_FETCH_TIMEOUT_MS) })
-    if (!response.ok) return ''
-    const payload = await response.json() as unknown
-    const modelIds = normalizeProviderModelsData(payload)
-    return modelIds[0] ?? ''
-  } catch {
-    return ''
-  }
-}
-
-async function readProviderBackedModelIds(appServer: AppServerProcess): Promise<ProviderModelsResponse> {
-  const configPayload = asRecord(await appServer.rpc('config/read', {}))
-  const config = asRecord(configPayload?.config)
-  const providerId = readNonEmptyString(config?.model_provider)
-  if (!providerId) {
-    return { data: [], providerId: '', source: 'provider' }
-  }
-
-  const providers = asRecord(config?.model_providers)
-  const provider = asRecord(providers?.[providerId])
-  if (!provider) {
-    logProviderModelDiscoveryWarning('configured provider is missing from model_providers', { providerId })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  const wireApi = readNonEmptyString(provider.wire_api)
-  if (wireApi !== 'responses') {
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  const baseUrl = readNonEmptyString(provider.base_url)
-  if (!baseUrl) {
-    logProviderModelDiscoveryWarning('responses provider is missing base_url', { providerId })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  const headers = new Headers()
-  const configuredHeaders = asRecord(provider.http_headers)
-  if (configuredHeaders) {
-    for (const [key, rawValue] of Object.entries(configuredHeaders)) {
-      const normalized = normalizeHeaderValue(rawValue)
-      if (!normalized) continue
-      headers.set(key, normalized)
-    }
-  }
-
-  const bearerToken = readNonEmptyString(provider.experimental_bearer_token)
-  if (bearerToken && !headers.has('Authorization')) {
-    headers.set('Authorization', `Bearer ${bearerToken}`)
-  }
-
-  const envKey = readNonEmptyString(provider.env_key)
-  const envHttpHeaders = asRecord(provider.env_http_headers)
-  if (envKey || envHttpHeaders) {
-    logProviderModelDiscoveryWarning('provider discovery skipped env-backed auth/header expansion', {
-      providerId,
-      hasEnvKey: Boolean(envKey),
-      hasEnvHttpHeaders: Boolean(envHttpHeaders),
-    })
-  }
-
-  let requestUrl: URL
-  try {
-    requestUrl = buildProviderModelsUrl(baseUrl, provider.query_params)
-  } catch (error) {
-    logProviderModelDiscoveryWarning('provider /models URL was invalid', {
-      providerId,
-      error: getErrorMessage(error, 'invalid url'),
-    })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  let response: Response
-  try {
-    response = await fetch(requestUrl, {
-      method: 'GET',
-      headers,
-      signal: AbortSignal.timeout(PROVIDER_MODELS_FETCH_TIMEOUT_MS),
-    })
-  } catch (error) {
-    logProviderModelDiscoveryWarning('provider /models request failed', {
-      providerId,
-      error: isTimeoutError(error) ? `request timed out after ${PROVIDER_MODELS_FETCH_TIMEOUT_MS}ms` : getErrorMessage(error, 'network error'),
-    })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  let payload: unknown = null
-  try {
-    payload = await response.json()
-  } catch (error) {
-    logProviderModelDiscoveryWarning('provider /models response was not valid JSON', {
-      providerId,
-      status: response.status,
-      error: getErrorMessage(error, 'invalid json'),
-    })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  if (!response.ok) {
-    logProviderModelDiscoveryWarning('provider /models request returned non-2xx', {
-      providerId,
-      status: response.status,
-      statusText: response.statusText,
-    })
-    return { data: [], providerId, source: 'provider' }
-  }
-
-  try {
-    return {
-      data: normalizeProviderModelsData(payload),
-      providerId,
-      source: 'provider',
-    }
-  } catch (error) {
-    logProviderModelDiscoveryWarning('provider /models payload was invalid', {
-      providerId,
-      error: getErrorMessage(error, 'invalid payload'),
-    })
-    return { data: [], providerId, source: 'provider' }
-  }
-}
-
-function extractThreadMessageText(threadReadPayload: unknown): string {
-  const payload = asRecord(threadReadPayload)
-  const thread = asRecord(payload?.thread)
-  const turns = Array.isArray(thread?.turns) ? thread.turns : []
-  const parts: string[] = []
-
-  for (const turn of turns) {
-    const turnRecord = asRecord(turn)
-    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : []
-    for (const item of items) {
-      const itemRecord = asRecord(item)
-      const type = typeof itemRecord?.type === 'string' ? itemRecord.type : ''
-      if (type === 'agentMessage' && typeof itemRecord?.text === 'string' && itemRecord.text.trim().length > 0) {
-        parts.push(itemRecord.text.trim())
-        continue
-      }
-      if (type === 'userMessage') {
-        const content = Array.isArray(itemRecord?.content) ? itemRecord.content : []
-        for (const block of content) {
-          const blockRecord = asRecord(block)
-          if (blockRecord?.type === 'text' && typeof blockRecord.text === 'string' && blockRecord.text.trim().length > 0) {
-            parts.push(blockRecord.text.trim())
-          }
-        }
-        continue
-      }
-      if (type === 'commandExecution') {
-        const command = typeof itemRecord?.command === 'string' ? itemRecord.command.trim() : ''
-        const output = typeof itemRecord?.aggregatedOutput === 'string' ? itemRecord.aggregatedOutput.trim() : ''
-        if (command) parts.push(command)
-        if (output) parts.push(output)
-      }
-    }
-  }
-
-  return parts.join('\n').trim()
-}
-
-function readNonEmptyString(value: unknown): string {
-  return typeof value === 'string' && value.trim().length > 0 ? value : ''
-}
-
-function readThreadArchiveFallbackName(threadReadResult: unknown): string {
-  const record = asRecord(threadReadResult)
-  const thread = asRecord(record?.thread)
-  return (
-    readNonEmptyString(thread?.name)
-    || readNonEmptyString(thread?.title)
-    || readNonEmptyString(thread?.preview)
-    || 'Untitled thread'
-  )
+function readThreadArchiveFallbackName(threadReadResult: unknown): string {
+  const record = asRecord(threadReadResult)
+  const thread = asRecord(record?.thread)
+  return (
+    readNonEmptyString(thread?.name)
+    || readNonEmptyString(thread?.title)
+    || readNonEmptyString(thread?.preview)
+    || 'Untitled thread'
+  )
 }
 
 function isArchivedThreadReadResult(threadReadResult: unknown): boolean {
@@ -1322,1281 +304,346 @@ export async function callRpcWithArchiveRecovery(
   }
 }
 
-type TerminalQuickCommand = {
-  label: string
-  value: string
-  source: 'package' | 'script' | 'make'
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
 }
 
-async function listTerminalQuickCommands(cwd: string): Promise<TerminalQuickCommand[]> {
-  const normalizedCwd = isAbsolute(cwd) ? cwd : resolve(cwd)
-  const info = await stat(normalizedCwd)
-  if (!info.isDirectory()) {
-    throw new Error('Terminal cwd is not a directory')
-  }
-
-  const commands: TerminalQuickCommand[] = []
-  const seen = new Set<string>()
-  const addCommand = (command: TerminalQuickCommand) => {
-    if (!command.value || seen.has(command.value)) return
-    seen.add(command.value)
-    commands.push(command)
-  }
-
-  await addPackageJsonCommands(normalizedCwd, addCommand)
-  await addMakefileCommands(normalizedCwd, addCommand)
-  await addRootScriptCommands(normalizedCwd, addCommand)
-  await addScriptsDirectoryCommands(normalizedCwd, addCommand)
-  return commands
+function getSkillsInstallDir(): string {
+  return join(getCodexHomeDir(), 'skills')
 }
 
-async function addPackageJsonCommands(
-  cwd: string,
-  addCommand: (command: TerminalQuickCommand) => void,
-): Promise<void> {
-  try {
-    const raw = await readFile(join(cwd, 'package.json'), 'utf8')
-    const parsed = JSON.parse(raw) as unknown
-    const record = asRecord(parsed)
-    const scripts = asRecord(record?.scripts)
-    if (!scripts) return
-    const packageManager = resolvePackageManager(cwd)
-    for (const scriptName of Object.keys(scripts)) {
-      if (typeof scripts[scriptName] !== 'string') continue
-      const value = formatPackageScriptCommand(packageManager, scriptName)
-      addCommand({
-        label: value,
-        value,
-        source: 'package',
-      })
-    }
-  } catch {
-    // A project without package.json simply has no package quick commands.
-  }
+function getPromptsDir(): string {
+  return join(getCodexHomeDir(), 'prompts')
 }
 
-async function addMakefileCommands(
-  cwd: string,
-  addCommand: (command: TerminalQuickCommand) => void,
-): Promise<void> {
-  const makefilePath = existsSync(join(cwd, 'Makefile'))
-    ? join(cwd, 'Makefile')
-    : existsSync(join(cwd, 'makefile'))
-      ? join(cwd, 'makefile')
-      : ''
-  if (!makefilePath) return
-
-  try {
-    const raw = await readFile(makefilePath, 'utf8')
-    for (const line of raw.split(/\r?\n/)) {
-      const match = /^([A-Za-z0-9_.@%/+~-][A-Za-z0-9_.@%/+~-]*)\s*:(?![=])/.exec(line)
-      if (!match) continue
-      const target = match[1]
-      if (!target || target.startsWith('.')) continue
-      const value = `make ${quoteShellTokenIfNeeded(target)}`
-      addCommand({
-        label: value,
-        value,
-        source: 'make',
-      })
-    }
-  } catch {
-    // Ignore unreadable Makefiles for quick-command discovery.
-  }
+type ComposerPromptRecord = {
+  name: string
+  path: string
+  content: string
+  description: string
 }
 
-async function addRootScriptCommands(
-  cwd: string,
-  addCommand: (command: TerminalQuickCommand) => void,
-): Promise<void> {
-  await addScriptFileCommands(cwd, '.', addCommand)
+function promptNameToFileName(name: string): string {
+  const trimmed = name.trim()
+  const withoutExtension = trimmed.replace(/\.md$/i, '')
+  const sanitized = withoutExtension
+    .replace(/[\/\\:*?"<>|]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  return `${sanitized || 'prompt'}.md`
 }
 
-async function addScriptsDirectoryCommands(
-  cwd: string,
-  addCommand: (command: TerminalQuickCommand) => void,
-): Promise<void> {
-  await addScriptFileCommands(join(cwd, 'scripts'), './scripts', addCommand)
+function buildPromptDescription(content: string): string {
+  const firstNonEmptyLine = content
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .find(Boolean) ?? ''
+  return firstNonEmptyLine.slice(0, 120)
 }
 
-async function addScriptFileCommands(
-  directory: string,
-  commandPrefix: string,
-  addCommand: (command: TerminalQuickCommand) => void,
-): Promise<void> {
+async function listComposerPrompts(): Promise<ComposerPromptRecord[]> {
+  const promptsDir = getPromptsDir()
   try {
-    const entries = await readdir(directory, { withFileTypes: true })
-    for (const entry of entries) {
-      if (!entry.isFile()) continue
-      if (!entry.name.endsWith('.sh') && !entry.name.endsWith('.cmd')) continue
-      const value = `${commandPrefix}/${quoteShellTokenIfNeeded(entry.name)}`
-      addCommand({
-        label: value,
-        value,
-        source: 'script',
-      })
-    }
-  } catch {
-    // A project without script files simply has no script-file quick commands.
+    const entries = await readdir(promptsDir, { withFileTypes: true })
+    const prompts = await Promise.all(entries
+      .filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith('.md'))
+      .map(async (entry) => {
+        const promptPath = join(promptsDir, entry.name)
+        const content = await readFile(promptPath, 'utf8')
+        return {
+          name: entry.name.replace(/\.md$/i, ''),
+          path: promptPath,
+          content,
+          description: buildPromptDescription(content),
+        } satisfies ComposerPromptRecord
+      }))
+    return prompts.sort((a, b) => a.name.localeCompare(b.name))
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException)?.code === 'ENOENT') return []
+    throw error
   }
 }
 
-function resolvePackageManager(cwd: string): 'npm' | 'pnpm' | 'yarn' | 'bun' {
-  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return 'pnpm'
-  if (existsSync(join(cwd, 'yarn.lock'))) return 'yarn'
-  if (existsSync(join(cwd, 'bun.lock')) || existsSync(join(cwd, 'bun.lockb'))) return 'bun'
-  return 'npm'
-}
-
-function formatPackageScriptCommand(packageManager: 'npm' | 'pnpm' | 'yarn' | 'bun', scriptName: string): string {
-  const quoted = quoteShellTokenIfNeeded(scriptName)
-  if (packageManager === 'npm') return `npm run ${quoted}`
-  if (packageManager === 'pnpm') return `pnpm run ${quoted}`
-  if (packageManager === 'bun') return `bun run ${quoted}`
-  return `yarn ${quoted}`
-}
-
-function quoteShellTokenIfNeeded(value: string): string {
-  return /^[A-Za-z0-9_./:@-]+$/.test(value) ? value : `'${value.replace(/'/g, `'\\''`)}'`
-}
-
-function readBoolean(value: unknown): boolean {
-  return value === true
-}
-
-function readNumber(value: unknown): number {
-  return typeof value === 'number' && Number.isFinite(value) ? value : 0
-}
-
-type ComposioCliInvocation = { command: string; args: string[]; displayCommand: string }
-
-function buildComposioInvocation(args: string[]): ComposioCliInvocation | null {
-  const overrideCommand = process.env.CODEXUI_COMPOSIO_COMMAND?.trim()
-  if (overrideCommand) {
-    const invocation = getSpawnInvocation(overrideCommand, args)
-    return {
-      command: invocation.command,
-      args: invocation.args,
-      displayCommand: `${overrideCommand} ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
-    }
-  }
-  return buildInstalledComposioInvocation(args)
-}
+async function createComposerPromptFile(name: string, content: string): Promise<ComposerPromptRecord> {
+  const trimmedName = name.trim()
+  if (!trimmedName) throw new Error('Prompt name is required')
+  const trimmedContent = content.trim()
+  if (!trimmedContent) throw new Error('Prompt content is required')
+  const promptsDir = getPromptsDir()
+  await mkdir(promptsDir, { recursive: true })
 
-function buildInstalledComposioInvocation(args: string[]): ComposioCliInvocation | null {
-  const candidates = [
-    join(homedir(), '.composio', 'composio'),
-    'composio',
-  ]
-  for (const candidate of candidates) {
-    if ((candidate.includes('/') || candidate.includes('\\')) && !existsSync(candidate)) continue
-    const invocation = getSpawnInvocation(candidate, args)
-    return {
-      command: invocation.command,
-      args: invocation.args,
-      displayCommand: `${candidate} ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
-    }
+  const baseFileName = promptNameToFileName(trimmedName)
+  let targetPath = join(promptsDir, baseFileName)
+  let suffix = 2
+  while (existsSync(targetPath)) {
+    const nextFileName = `${baseFileName.replace(/\.md$/i, '')}-${suffix}.md`
+    targetPath = join(promptsDir, nextFileName)
+    suffix += 1
   }
-  return null
-}
 
-function probeComposioInvocation(invocation: ComposioCliInvocation): { available: boolean; cliVersion: string; output: string } {
-  const probe = spawnSync(invocation.command, invocation.args, {
-    encoding: 'utf8',
-    env: process.env,
-    windowsHide: true,
-  })
-  const output = `${probe.stdout ?? ''}${probe.stderr ?? ''}`.trim()
+  await writeFile(targetPath, `${trimmedContent}\n`, 'utf8')
   return {
-    available: !probe.error && probe.status === 0,
-    cliVersion: probe.status === 0 ? (probe.stdout ?? '').trim() : '',
-    output,
-  }
-}
-
-function resolveComposioInvocation(args: string[]): ComposioCliInvocation | null {
-  const invocation = buildComposioInvocation(args)
-  const versionInvocation = buildComposioInvocation(['--version'])
-  if (invocation && versionInvocation && probeComposioInvocation(versionInvocation).available) return invocation
-  return null
-}
-
-function parseComposioJson<T>(stdout: string, fallback: string): T {
-  const trimmed = stdout.trim()
-  if (!trimmed) {
-    throw new Error(fallback)
+    name: basename(targetPath).replace(/\.md$/i, ''),
+    path: targetPath,
+    content: `${trimmedContent}\n`,
+    description: buildPromptDescription(trimmedContent),
   }
-  return JSON.parse(trimmed) as T
 }
 
-async function runComposioJson<T>(args: string[], fallback: string): Promise<T> {
-  const invocation = resolveComposioInvocation(args)
-  if (!invocation) {
-    throw new Error('Composio CLI is not installed')
-  }
-  const child = spawn(invocation.command, invocation.args, {
-    env: process.env,
-    stdio: ['ignore', 'pipe', 'pipe'],
-    windowsHide: true,
-  })
-
-  let stdout = ''
-  let stderr = ''
-
-  child.stdout.setEncoding('utf8')
-  child.stderr.setEncoding('utf8')
-  child.stdout.on('data', (chunk) => { stdout += chunk })
-  child.stderr.on('data', (chunk) => { stderr += chunk })
-
-  const exitCode = await new Promise<number>((resolveExit, reject) => {
-    child.once('error', reject)
-    child.once('close', (code) => resolveExit(code ?? 0))
-  })
-
-  if (exitCode !== 0) {
-    throw new Error(stderr.trim() || stdout.trim() || fallback)
+async function removeComposerPromptFile(promptPath: string): Promise<boolean> {
+  const resolvedPath = resolve(promptPath)
+  const promptsDir = resolve(getPromptsDir())
+  const relative = resolvedPath.startsWith(`${promptsDir}/`) ? resolvedPath.slice(promptsDir.length + 1) : ''
+  if (!relative || relative.includes('..') || !resolvedPath.toLowerCase().endsWith('.md')) {
+    throw new Error('Invalid prompt path')
   }
-
   try {
-    return parseComposioJson<T>(stdout, fallback)
+    await rm(resolvedPath, { force: false })
+    return true
   } catch (error) {
-    const details = stderr.trim() || stdout.trim()
-    throw new Error(details || getErrorMessage(error, fallback))
+    if ((error as NodeJS.ErrnoException)?.code === 'ENOENT') return false
+    throw error
   }
 }
 
-async function readComposioUserData(): Promise<ComposioUserData | null> {
-  try {
-    const raw = await readFile(COMPOSIO_USER_DATA_PATH, 'utf8')
-    const payload = asRecord(JSON.parse(raw))
-    if (!payload) return null
-    return {
-      apiKey: readNonEmptyString(payload.api_key),
-      baseUrl: readNonEmptyString(payload.base_url),
-      webUrl: readNonEmptyString(payload.web_url),
-      orgId: readNonEmptyString(payload.org_id),
-      testUserId: readNonEmptyString(payload.test_user_id),
-    }
-  } catch {
-    return null
-  }
-}
-
-function normalizeComposioConnection(value: unknown): ComposioConnectionSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const authConfig = asRecord(record.auth_config)
-  return {
-    id: readNonEmptyString(record.id),
-    wordId: readNonEmptyString(record.word_id),
-    alias: readNonEmptyString(record.alias),
-    status: readNonEmptyString(record.status),
-    authScheme: readNonEmptyString(record.authScheme || authConfig?.auth_scheme),
-    createdAt: readNonEmptyString(record.created_at),
-    updatedAt: readNonEmptyString(record.updated_at),
-    isComposioManaged: readBoolean(authConfig?.is_composio_managed),
-    isDisabled: readBoolean(record.is_disabled),
-  }
-}
-
-function normalizeComposioToolkit(value: unknown, connectionsBySlug: Map<string, ComposioConnectionSummary[]>): ComposioConnectorSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const slug = readNonEmptyString(record.slug)
-  if (!slug) return null
-  const connectionRows = connectionsBySlug.get(slug) ?? []
-  return {
-    slug,
-    name: readNonEmptyString(record.name),
-    description: readNonEmptyString(record.description),
-    logoUrl: readNonEmptyString(record.logo || record.meta && asRecord(record.meta)?.logo),
-    latestVersion: readNonEmptyString(record.latest_version || record.latestVersion),
-    toolsCount: readNumber(record.tools_count),
-    triggersCount: readNumber(record.triggers_count),
-    isNoAuth: readBoolean(record.is_no_auth),
-    enabled: record.enabled !== false,
-    authModes: Array.isArray(record.auth_modes) ? record.auth_modes.map(readNonEmptyString).filter(Boolean) : [],
-    activeCount: connectionRows.filter((row) => row.status === 'ACTIVE' && !row.isDisabled).length,
-    totalConnections: connectionRows.length,
-    connectionStatuses: [...new Set(connectionRows.map((row) => row.status).filter(Boolean))],
-  }
+async function runCommand(command: string, args: string[], options: { cwd?: string; timeoutMs?: number } = {}): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const proc = spawn(command, args, {
+      cwd: options.cwd,
+      env: process.env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    })
+    let stdout = ''
+    let stderr = ''
+    let timedOut = false
+    let closed = false
+    const timeout =
+      typeof options.timeoutMs === 'number' && Number.isFinite(options.timeoutMs) && options.timeoutMs > 0
+        ? setTimeout(() => {
+          timedOut = true
+          proc.kill('SIGTERM')
+          setTimeout(() => {
+            if (!closed) proc.kill('SIGKILL')
+          }, 5_000).unref()
+        }, options.timeoutMs)
+        : null
+    timeout?.unref()
+    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
+    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
+    proc.on('error', (error) => {
+      if (timeout) clearTimeout(timeout)
+      reject(error)
+    })
+    proc.on('close', (code) => {
+      closed = true
+      if (timeout) clearTimeout(timeout)
+      if (timedOut) {
+        reject(new Error(`Command timed out after ${options.timeoutMs}ms (${command} ${args.join(' ')})`))
+        return
+      }
+      if (code === 0) {
+        resolve()
+        return
+      }
+      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
+      const suffix = details.length > 0 ? `: ${details}` : ''
+      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
+    })
+  })
 }
 
-function normalizeComposioTool(value: unknown): ComposioToolSummary | null {
-  const record = asRecord(value)
-  if (!record) return null
-  const slug = readNonEmptyString(record.slug)
-  if (!slug) return null
-  return {
-    slug,
-    name: readNonEmptyString(record.name),
-    description: readNonEmptyString(record.description),
-  }
+function isMissingHeadError(error: unknown): boolean {
+  const message = getErrorMessage(error, '').toLowerCase()
+  return (
+    message.includes("not a valid object name: 'head'") ||
+    message.includes('not a valid object name: head') ||
+    message.includes('invalid reference: head')
+  )
 }
 
-async function readComposioConnectionsBySlug(): Promise<Map<string, ComposioConnectionSummary[]>> {
-  const payload = asRecord(await runComposioJson<Record<string, unknown>>(['connections', 'list'], 'Failed to list Composio connections'))
-  const bySlug = new Map<string, ComposioConnectionSummary[]>()
-  for (const [slug, rawRows] of Object.entries(payload ?? {})) {
-    if (!Array.isArray(rawRows)) continue
-    const rows = rawRows.map(normalizeComposioConnection).filter((row): row is ComposioConnectionSummary => row !== null)
-    bySlug.set(slug, rows)
-  }
-  return bySlug
+function isNotGitRepositoryError(error: unknown): boolean {
+  const message = getErrorMessage(error, '').toLowerCase()
+  return message.includes('not a git repository') || message.includes('fatal: not a git repository')
 }
 
-async function readComposioStatus(): Promise<ComposioStatusResponse> {
-  const versionInvocation = buildComposioInvocation(['--version'])
-  const probe = versionInvocation
-    ? probeComposioInvocation(versionInvocation)
-    : { available: false, cliVersion: '', output: '' }
-  const available = probe.available
-  const cliVersion = probe.cliVersion
-  const userData = await readComposioUserData()
-  if (!available) {
-    return {
-      available: false,
-      authenticated: false,
-      cliVersion,
-      email: '',
-      defaultOrgName: '',
-      defaultOrgId: userData?.orgId ?? '',
-      webUrl: userData?.webUrl ?? '',
-      baseUrl: userData?.baseUrl ?? '',
-      testUserId: userData?.testUserId ?? '',
-    }
-  }
-
+async function ensureRepoHasInitialCommit(repoRoot: string): Promise<void> {
+  const agentsPath = join(repoRoot, 'AGENTS.md')
   try {
-    const payload = asRecord(await runComposioJson<Record<string, unknown>>(['whoami'], 'Failed to read Composio account status'))
-    return {
-      available: true,
-      authenticated: true,
-      cliVersion,
-      email: readNonEmptyString(payload?.email),
-      defaultOrgName: readNonEmptyString(payload?.default_org_name),
-      defaultOrgId: readNonEmptyString(payload?.default_org_id) || userData?.orgId || '',
-      webUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
-      baseUrl: userData?.baseUrl || 'https://backend.composio.dev',
-      testUserId: readNonEmptyString(payload?.test_user_id) || userData?.testUserId || '',
-    }
+    await stat(agentsPath)
   } catch {
-    return {
-      available: true,
-      authenticated: false,
-      cliVersion,
-      email: '',
-      defaultOrgName: '',
-      defaultOrgId: userData?.orgId ?? '',
-      webUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
-      baseUrl: userData?.baseUrl || 'https://backend.composio.dev',
-      testUserId: userData?.testUserId ?? '',
-    }
+    await writeFile(agentsPath, '', 'utf8')
   }
-}
 
-async function listComposioConnectors(query: string, cursor: string | null = null, limit = 50): Promise<ComposioConnectorPage> {
-  const args = ['dev', 'toolkits', 'list', '--limit', String(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX)]
-  const trimmedQuery = query.trim()
-  if (trimmedQuery) {
-    args.push('--query', trimmedQuery)
-  }
-  const [payload, connectionsBySlug] = await Promise.all([
-    runComposioJson<unknown[]>(args, 'Failed to list Composio toolkits'),
-    readComposioConnectionsBySlug(),
-  ])
-  const allRows = payload
-    .map((item) => normalizeComposioToolkit(item, connectionsBySlug))
-    .filter((row): row is ComposioConnectorSummary => row !== null)
-  const safeLimit = Number.isFinite(limit) ? Math.max(1, Math.min(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX, Math.floor(limit))) : 50
-  const safeCursor = parseComposioCursor(cursor, allRows.length)
-  return {
-    data: allRows.slice(safeCursor, safeCursor + safeLimit),
-    nextCursor: safeCursor + safeLimit < allRows.length ? String(safeCursor + safeLimit) : null,
-    total: allRows.length,
-  }
+  await runCommand('git', ['add', 'AGENTS.md'], { cwd: repoRoot })
+  await runCommand(
+    'git',
+    ['-c', 'user.name=Codex', '-c', 'user.email=codex@local', 'commit', '-m', 'Initialize repository for worktree support'],
+    { cwd: repoRoot },
+  )
 }
 
-function parseComposioCursor(cursor: string | null | undefined, maxLength: number): number {
-  const trimmed = cursor?.trim() ?? ''
-  const parsed = Number.parseInt(trimmed, 10)
-  if (!Number.isFinite(parsed) || Number.isNaN(parsed) || parsed <= 0) return 0
-  if (parsed >= maxLength) return maxLength
-  return parsed
+async function runCommandCapture(command: string, args: string[], options: { cwd?: string } = {}): Promise<string> {
+  return await new Promise<string>((resolve, reject) => {
+    const proc = spawn(command, args, {
+      cwd: options.cwd,
+      env: process.env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    })
+    let stdout = ''
+    let stderr = ''
+    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
+    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
+    proc.on('error', reject)
+    proc.on('close', (code) => {
+      if (code === 0) {
+        resolve(stdout.trim())
+        return
+      }
+      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
+      const suffix = details.length > 0 ? `: ${details}` : ''
+      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
+    })
+  })
 }
 
-function parseComposioLimit(rawLimit: string | null): number {
-  const parsed = Number.parseInt((rawLimit ?? '').trim(), 10)
-  if (!Number.isFinite(parsed) || Number.isNaN(parsed) || parsed <= 0) return 50
-  return Math.max(1, Math.min(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX, parsed))
+function normalizeBranchRefName(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+  if (trimmed.startsWith('refs/heads/')) return trimmed.slice('refs/heads/'.length)
+  if (trimmed.startsWith('refs/remotes/')) return trimmed.slice('refs/remotes/'.length)
+  return trimmed
 }
 
-async function readComposioConnectorDetail(slug: string): Promise<ComposioConnectorDetail> {
-  const normalizedSlug = slug.trim()
-  if (!normalizedSlug) {
-    throw new Error('Missing Composio connector slug')
-  }
+function toHeaderGitResetHistoryRef(branchName: string, commitSha: string): string {
+  return `refs/codex/header-git-reset-history/${branchName}/${commitSha}`
+}
 
-  const [infoPayload, toolsPayload, connectionsPayload, userData] = await Promise.all([
-    runComposioJson<Record<string, unknown>>(['dev', 'toolkits', 'info', normalizedSlug], `Failed to load Composio toolkit ${normalizedSlug}`),
-    runComposioJson<unknown[]>(['tools', 'list', normalizedSlug, '--limit', '10'], `Failed to list tools for ${normalizedSlug}`),
-    runComposioJson<{ toolkit?: string; items?: unknown[] }>(['link', normalizedSlug, '--list'], `Failed to list connections for ${normalizedSlug}`),
-    readComposioUserData(),
-  ])
-
-  const connections = Array.isArray(connectionsPayload.items)
-    ? connectionsPayload.items.map(normalizeComposioConnection).filter((row): row is ComposioConnectionSummary => row !== null)
-    : []
-  const connector = normalizeComposioToolkit(infoPayload, new Map([[normalizedSlug, connections]]))
-  if (!connector) {
-    throw new Error(`Unknown Composio connector: ${normalizedSlug}`)
-  }
+const HEADER_GIT_RESET_HISTORY_REF_LIMIT = 25
 
-  return {
-    connector,
-    connections,
-    tools: Array.isArray(toolsPayload)
-      ? toolsPayload.map(normalizeComposioTool).filter((row): row is ComposioToolSummary => row !== null)
-      : [],
-    dashboardUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
-  }
+async function assertLocalGitBranch(repoRoot: string, branchName: string): Promise<void> {
+  await runCommandCapture('git', ['show-ref', '--verify', `refs/heads/${branchName}`], { cwd: repoRoot })
 }
 
-async function startComposioLink(slug: string): Promise<ComposioLinkResult> {
-  const normalizedSlug = slug.trim()
-  if (!normalizedSlug) {
-    throw new Error('Missing Composio connector slug')
-  }
-  const payload = asRecord(await runComposioJson<Record<string, unknown>>(['link', normalizedSlug, '--no-wait'], `Failed to start Composio link for ${normalizedSlug}`))
-  return {
-    status: readNonEmptyString(payload?.status),
-    message: readNonEmptyString(payload?.message),
-    connectedAccountId: readNonEmptyString(payload?.connected_account_id),
-    redirectUrl: readNonEmptyString(payload?.redirect_url),
-    toolkit: readNonEmptyString(payload?.toolkit),
-    projectType: readNonEmptyString(payload?.project_type),
+async function checkoutGitBranchWithWorktreeRecovery(repoRoot: string, branchName: string): Promise<void> {
+  try {
+    await runCommand('git', ['checkout', branchName], { cwd: repoRoot })
+  } catch (checkoutError) {
+    const blockingWorktreePath = extractBranchLockedWorktreePath(checkoutError, branchName)
+    if (!blockingWorktreePath) {
+      throw checkoutError
+    }
+    await runCommand('git', ['checkout', '--detach'], { cwd: blockingWorktreePath })
+    await runCommand('git', ['checkout', branchName], { cwd: repoRoot })
   }
 }
 
-async function startComposioLogin(): Promise<ComposioLoginResult> {
-  const invocation = resolveComposioInvocation(['login', '--no-browser', '-y'])
-  if (!invocation) {
-    throw new Error('Composio CLI is not installed')
+async function pruneHeaderGitResetHistoryRefs(repoRoot: string, branchName: string): Promise<void> {
+  const resetHistoryRefPrefix = `refs/codex/header-git-reset-history/${branchName}/`
+  const refsRaw = await runCommandCapture(
+    'git',
+    ['for-each-ref', '--sort=-creatordate', '--format=%(refname)', resetHistoryRefPrefix],
+    { cwd: repoRoot },
+  ).catch(() => '')
+  const refs = refsRaw
+    .split('\n')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+  const staleRefs = refs.slice(HEADER_GIT_RESET_HISTORY_REF_LIMIT)
+  for (const refName of staleRefs) {
+    await runCommand('git', ['update-ref', '-d', refName], { cwd: repoRoot })
   }
-  const proc = spawn(invocation.command, invocation.args, {
-    cwd: process.cwd(),
-    env: process.env,
-    detached: true,
-    stdio: ['ignore', 'pipe', 'pipe'],
-    windowsHide: true,
-  })
-  proc.unref()
-
-  let stdout = ''
-  let stderr = ''
-  proc.stdout.setEncoding('utf8')
-  proc.stderr.setEncoding('utf8')
-  proc.stderr.on('data', (chunk) => { stderr += chunk })
-
-  const loginUrl = await new Promise<string>((resolveLoginUrl, reject) => {
-    const timeout = setTimeout(() => {
-      proc.kill('SIGTERM')
-      reject(new Error(stderr.trim() || stdout.trim() || 'Timed out waiting for Composio CLI login URL'))
-    }, 10_000)
-    const finish = (url: string) => {
-      clearTimeout(timeout)
-      proc.stdout.destroy()
-      proc.stderr.destroy()
-      resolveLoginUrl(url)
-    }
-    proc.once('error', (error) => {
-      clearTimeout(timeout)
-      reject(error)
-    })
-    proc.once('close', (code) => {
-      clearTimeout(timeout)
-      reject(new Error(stderr.trim() || stdout.trim() || `Composio CLI login exited with code ${code ?? 0}`))
-    })
-    proc.stdout.on('data', (chunk) => {
-      stdout += chunk
-      const url = stdout.match(/https?:\/\/\S+/)?.[0] ?? ''
-      if (url) finish(url)
-    })
-  })
+}
 
-  const cliKey = loginUrl ? (new URL(loginUrl).searchParams.get('cliKey') ?? '') : ''
+async function readGitHeaderState(cwd: string): Promise<{
+  currentBranch: string | null
+  headSha: string | null
+  headSubject: string | null
+  headDate: string | null
+  detached: boolean
+  dirty: boolean
+  gitRoot: string
+}> {
+  const gitRoot = await runCommandCapture('git', ['rev-parse', '--show-toplevel'], { cwd })
+  const currentBranchRaw = await runCommandCapture('git', ['branch', '--show-current'], { cwd: gitRoot })
+  const currentBranch = currentBranchRaw.trim() || null
+  const headShaRaw = await runCommandCapture('git', ['rev-parse', '--short=12', 'HEAD'], { cwd: gitRoot })
+  const headCommitRaw = await runCommandCapture('git', ['show', '-s', '--date=short', '--format=%cd%x09%s', 'HEAD'], { cwd: gitRoot })
+  const [headDate = '', ...headSubjectParts] = headCommitRaw.split('\t')
+  const statusRaw = await runCommandCapture('git', ['status', '--porcelain'], { cwd: gitRoot })
   return {
-    status: 'started',
-    message: 'Composio CLI login URL created',
-    loginUrl,
-    cliKey,
-    expiresAt: '',
+    currentBranch,
+    headSha: headShaRaw.trim() || null,
+    headSubject: headSubjectParts.join('\t').trim() || null,
+    headDate: headDate.trim() || null,
+    detached: !currentBranch,
+    dirty: statusRaw.trim().length > 0,
+    gitRoot,
   }
 }
 
-async function installComposioCli(): Promise<ComposioInstallResult> {
-  const command = 'bash'
-  const installScriptUrl = 'https://composio.dev/install'
-  const args = ['-lc', `curl -fsSL ${installScriptUrl} | bash`]
-  const invocation = getSpawnInvocation(command, args)
-  const env = {
-    ...process.env,
-    COMPOSIO_INSTALL_DIR: process.env.COMPOSIO_INSTALL_DIR?.trim() || join(homedir(), '.composio'),
-  }
-  const result = spawnSync(invocation.command, invocation.args, {
-    encoding: 'utf8',
-    env,
-    windowsHide: true,
-  })
-  const output = `${result.stdout ?? ''}${result.stderr ?? ''}`.trim()
-  if (result.error || result.status !== 0) {
-    throw new Error(output || result.error?.message || 'Failed to install Composio CLI')
-  }
-  return {
-    ok: true,
-    command: `curl -fsSL ${installScriptUrl} | bash`,
-    output,
+async function assertNoTrackedGitChanges(repoRoot: string): Promise<void> {
+  const statusRaw = await runCommandCapture('git', ['status', '--porcelain'], { cwd: repoRoot })
+  const trackedChanges = statusRaw
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter((line) => line && !line.startsWith('?? '))
+  if (trackedChanges.length > 0) {
+    throw new Error('Cannot switch branches or reset with tracked uncommitted changes. Commit, stash, or discard tracked changes first. Untracked files are allowed unless Git would overwrite them.')
   }
 }
 
-function countRecoveredContentLines(value: string): number {
-  if (!value) return 0
-  const normalized = value.replace(/\r\n/g, '\n')
-  const trimmed = normalized.endsWith('\n') ? normalized.slice(0, -1) : normalized
-  if (!trimmed) return 0
-  return trimmed.split('\n').length
+function extractBranchLockedWorktreePath(error: unknown, branchName: string): string {
+  const message = getErrorMessage(error, '')
+  if (!message || !branchName) return ''
+  const escapedBranch = branchName.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&')
+  const pattern = new RegExp(`'${escapedBranch}' is already checked out at '([^']+)'`, 'u')
+  const match = pattern.exec(message)
+  return match?.[1]?.trim() ?? ''
 }
 
-function countRecoveredPatchLines(value: string): { addedLineCount: number; removedLineCount: number } {
-  let addedLineCount = 0
-  let removedLineCount = 0
-
-  for (const line of value.replace(/\r\n/g, '\n').split('\n')) {
-    if (!line) continue
-    if (line.startsWith('+++') || line.startsWith('---') || line.startsWith('@@')) continue
-    if (line.startsWith('+')) {
-      addedLineCount += 1
-      continue
-    }
-    if (line.startsWith('-')) {
-      removedLineCount += 1
-    }
-  }
-
-  return { addedLineCount, removedLineCount }
+function toPermanentWorktreeBranchNameDraft(worktreeName: string): string {
+  const sanitized = worktreeName
+    .trim()
+    .replace(/[^A-Za-z0-9._-]+/gu, '-')
+    .replace(/\.+/gu, '.')
+    .replace(/-+/gu, '-')
+    .replace(/^[.-]+|[.-]+$/gu, '')
+  return sanitized || 'worktree'
 }
 
-function mergeRecoveredDiff(first: string, second: string): string {
-  if (!first) return second
-  if (!second || first === second) return first
-  return `${first}\n${second}`.trim()
+async function isValidGitBranchName(gitRoot: string, branchName: string): Promise<boolean> {
+  try {
+    await runCommand('git', ['check-ref-format', '--branch', branchName], { cwd: gitRoot })
+    return true
+  } catch {
+    return false
+  }
 }
 
-function mergeRecoveredFileChange(first: SessionRecoveredFileChange, second: SessionRecoveredFileChange): SessionRecoveredFileChange {
-  const operation = first.operation === 'add' || second.operation === 'add'
-    ? 'add'
-    : first.operation === 'delete' || second.operation === 'delete'
-      ? 'delete'
-      : 'update'
-
-  return {
-    path: second.path || first.path,
-    operation,
-    movedToPath: second.movedToPath ?? first.movedToPath ?? null,
-    diff: mergeRecoveredDiff(first.diff, second.diff),
-    addedLineCount: first.addedLineCount + second.addedLineCount,
-    removedLineCount: first.removedLineCount + second.removedLineCount,
+async function doesLocalGitBranchExist(gitRoot: string, branchName: string): Promise<boolean> {
+  try {
+    await runCommand('git', ['show-ref', '--verify', '--quiet', `refs/heads/${branchName}`], { cwd: gitRoot })
+    return true
+  } catch {
+    return false
   }
 }
 
-function isApplyPatchSectionBoundary(value: string): boolean {
-  return value.startsWith('*** Update File: ')
-    || value.startsWith('*** Add File: ')
-    || value.startsWith('*** Delete File: ')
-    || value === '*** End Patch'
+async function allocatePermanentWorktreeBranchName(gitRoot: string, worktreeName: string): Promise<string> {
+  const base = toPermanentWorktreeBranchNameDraft(worktreeName)
+  for (let attempt = 0; attempt < 50; attempt += 1) {
+    const candidate = attempt === 0 ? base : `${base}-${attempt + 1}`
+    if (!await isValidGitBranchName(gitRoot, candidate)) continue
+    if (!await doesLocalGitBranchExist(gitRoot, candidate)) return candidate
+  }
+  throw new Error('Failed to allocate a unique branch name for worktree')
 }
 
-function parseApplyPatchInput(input: string): SessionRecoveredFileChange[] {
-  const normalized = input.replace(/\r\n/g, '\n')
-  const lines = normalized.split('\n')
-  const changes: SessionRecoveredFileChange[] = []
-
-  for (let index = 0; index < lines.length; index += 1) {
-    const line = lines[index] ?? ''
-
-    if (line.startsWith('*** Add File: ')) {
-      const path = line.slice('*** Add File: '.length).trim()
-      const contentLines: string[] = []
-      for (index += 1; index < lines.length; index += 1) {
-        const nextLine = lines[index] ?? ''
-        if (isApplyPatchSectionBoundary(nextLine)) {
-          index -= 1
-          break
-        }
-        contentLines.push(nextLine.startsWith('+') ? nextLine.slice(1) : nextLine)
-      }
-      const diff = contentLines.join('\n').trimEnd()
-      if (path) {
-        changes.push({
-          path,
-          operation: 'add',
-          movedToPath: null,
-          diff,
-          addedLineCount: countRecoveredContentLines(diff),
-          removedLineCount: 0,
-        })
-      }
-      continue
-    }
-
-    if (line.startsWith('*** Delete File: ')) {
-      const path = line.slice('*** Delete File: '.length).trim()
-      if (path) {
-        changes.push({
-          path,
-          operation: 'delete',
-          movedToPath: null,
-          diff: '',
-          addedLineCount: 0,
-          removedLineCount: 0,
-        })
-      }
-      continue
-    }
-
-    if (line.startsWith('*** Update File: ')) {
-      const path = line.slice('*** Update File: '.length).trim()
-      let movedToPath: string | null = null
-      const diffLines: string[] = []
-
-      for (index += 1; index < lines.length; index += 1) {
-        const nextLine = lines[index] ?? ''
-        if (nextLine.startsWith('*** Move to: ')) {
-          const moved = nextLine.slice('*** Move to: '.length).trim()
-          movedToPath = moved || null
-          continue
-        }
-        if (isApplyPatchSectionBoundary(nextLine)) {
-          index -= 1
-          break
-        }
-        diffLines.push(nextLine)
-      }
-
-      const diff = diffLines.join('\n').trimEnd()
-      const counts = countRecoveredPatchLines(diff)
-      if (path) {
-        changes.push({
-          path,
-          operation: 'update',
-          movedToPath,
-          diff,
-          ...counts,
-        })
-      }
-    }
-  }
-
-  return changes
-}
-
-function buildSessionFileChangeFallback(threadReadPayload: unknown, sessionLogRaw: string): SessionRecoveredTurnFileChanges[] {
-  const payload = asRecord(threadReadPayload)
-  const thread = asRecord(payload?.thread)
-  const turns = Array.isArray(thread?.turns) ? thread.turns : []
-  const turnIndexById = new Map<string, number>()
-
-  for (let turnIndex = 0; turnIndex < turns.length; turnIndex += 1) {
-    const turnRecord = asRecord(turns[turnIndex])
-    const turnId = readNonEmptyString(turnRecord?.id)
-    if (turnId) {
-      turnIndexById.set(turnId, turnIndex)
-    }
-  }
-
-  const collectedByTurnId = new Map<string, SessionRecoveredFileChange[]>()
-  let currentTurnId = ''
-
-  for (const line of sessionLogRaw.split('\n')) {
-    if (!line.trim()) continue
-    let row: Record<string, unknown> | null = null
-    try {
-      row = JSON.parse(line) as Record<string, unknown>
-    } catch {
-      continue
-    }
-
-    if (row.type === 'turn_context') {
-      const payloadRecord = asRecord(row.payload)
-      currentTurnId = readNonEmptyString(payloadRecord?.turn_id) || currentTurnId
-      continue
-    }
-
-    if (row.type !== 'response_item' || !currentTurnId || !turnIndexById.has(currentTurnId)) {
-      continue
-    }
-
-    const payloadRecord = asRecord(row.payload)
-    if (
-      payloadRecord?.type !== 'custom_tool_call'
-      || payloadRecord.name !== 'apply_patch'
-      || payloadRecord.status !== 'completed'
-    ) {
-      continue
-    }
-
-    const input = readNonEmptyString(payloadRecord.input)
-    if (!input) continue
-
-    const parsedChanges = parseApplyPatchInput(input)
-    if (parsedChanges.length === 0) continue
-
-    const previous = collectedByTurnId.get(currentTurnId) ?? []
-    previous.push(...parsedChanges)
-    collectedByTurnId.set(currentTurnId, previous)
-  }
-
-  const recovered: SessionRecoveredTurnFileChanges[] = []
-  for (const [turnId, fileChanges] of collectedByTurnId.entries()) {
-    const turnIndex = turnIndexById.get(turnId)
-    if (typeof turnIndex !== 'number' || fileChanges.length === 0) continue
-
-    const mergedByPath = new Map<string, SessionRecoveredFileChange>()
-    for (const fileChange of fileChanges) {
-      const key = `${fileChange.path}\u0000${fileChange.movedToPath ?? ''}`
-      const previous = mergedByPath.get(key)
-      mergedByPath.set(key, previous ? mergeRecoveredFileChange(previous, fileChange) : { ...fileChange })
-    }
-
-    recovered.push({
-      turnId,
-      turnIndex,
-      fileChanges: Array.from(mergedByPath.values()),
-    })
-  }
-
-  return recovered.sort((first, second) => first.turnIndex - second.turnIndex)
-}
-
-type SessionRecoveredCommand = {
-  id: string
-  type: 'commandExecution'
-  command: string
-  cwd: string | null
-  status: 'completed' | 'failed'
-  aggregatedOutput: string
-  exitCode: number | null
-  durationMs: number | null
-}
-
-function parseExecCommandOutput(output: string): { exitCode: number | null; wallTime: number | null; cleanOutput: string } {
-  let exitCode: number | null = null
-  let wallTime: number | null = null
-  const outputLines: string[] = []
-  let pastHeader = false
-
-  for (const line of output.split('\n')) {
-    if (!pastHeader) {
-      const exitMatch = line.match(/^Process exited with code (\d+)/)
-      if (exitMatch) {
-        exitCode = Number.parseInt(exitMatch[1]!, 10)
-        continue
-      }
-      const wallMatch = line.match(/^Wall time:\s+([\d.]+)\s+seconds/)
-      if (wallMatch) {
-        wallTime = Math.round(Number.parseFloat(wallMatch[1]!) * 1000)
-        continue
-      }
-      if (line.startsWith('Command:') || line.startsWith('Chunk ID:') || line.startsWith('Original token count:')) {
-        continue
-      }
-      if (line === 'Output:') {
-        pastHeader = true
-        continue
-      }
-    }
-    outputLines.push(line)
-  }
-
-  return { exitCode, wallTime, cleanOutput: outputLines.join('\n').trimEnd() }
-}
-
-type SessionRecoveredFileChangeItem = {
-  id: string
-  type: 'fileChange'
-  status: 'completed'
-  changes: Record<string, unknown>[]
-}
-
-type SessionItemSlot = {
-  type: 'agentMessage' | 'commandExecution' | 'fileChange'
-  command?: SessionRecoveredCommand
-  fileChange?: SessionRecoveredFileChangeItem
-}
-
-function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map<string, SessionItemSlot[]> {
-  let currentTurnId = ''
-  const orderByTurnId = new Map<string, SessionItemSlot[]>()
-  const callIdToCommand = new Map<string, SessionRecoveredCommand>()
-
-  for (const line of sessionLogRaw.split('\n')) {
-    if (!line.trim()) continue
-    let row: Record<string, unknown> | null = null
-    try {
-      row = JSON.parse(line) as Record<string, unknown>
-    } catch {
-      continue
-    }
-
-    if (row.type === 'turn_context') {
-      const p = asRecord(row.payload)
-      currentTurnId = readNonEmptyString(p?.turn_id) || currentTurnId
-      continue
-    }
-    if (row.type === 'event_msg') {
-      const p = asRecord(row.payload)
-      if (p?.type === 'task_started') {
-        currentTurnId = readNonEmptyString(p.turn_id) || currentTurnId
-      }
-      continue
-    }
-
-    if (row.type !== 'response_item' || !currentTurnId || !turnIds.has(currentTurnId)) continue
-    const payload = asRecord(row.payload)
-    if (!payload) continue
-
-    let slots = orderByTurnId.get(currentTurnId)
-    if (!slots) {
-      slots = []
-      orderByTurnId.set(currentTurnId, slots)
-    }
-
-    if (payload.type === 'message' && payload.role === 'assistant') {
-      slots.push({ type: 'agentMessage' })
-      continue
-    }
-
-    if (payload.type === 'function_call' && payload.name === 'exec_command') {
-      const callId = readNonEmptyString(payload.call_id)
-      if (!callId) continue
-      let cmd = ''
-      try {
-        const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
-        cmd = typeof args.cmd === 'string' ? args.cmd : ''
-      } catch { /* empty */ }
-      const command: SessionRecoveredCommand = {
-        id: `session-cmd-${callId}`,
-        type: 'commandExecution',
-        command: cmd,
-        cwd: null,
-        status: 'completed',
-        aggregatedOutput: '',
-        exitCode: null,
-        durationMs: null,
-      }
-      callIdToCommand.set(callId, command)
-      slots.push({ type: 'commandExecution', command })
-      continue
-    }
-
-    if (payload.type === 'function_call_output') {
-      const callId = readNonEmptyString(payload.call_id)
-      if (!callId) continue
-      const existing = callIdToCommand.get(callId)
-      if (!existing) continue
-      const rawOutput = typeof payload.output === 'string' ? payload.output : ''
-      const parsed = parseExecCommandOutput(rawOutput)
-      existing.aggregatedOutput = parsed.cleanOutput
-      existing.exitCode = parsed.exitCode
-      existing.durationMs = parsed.wallTime
-      existing.status = parsed.exitCode === 0 || parsed.exitCode === null ? 'completed' : 'failed'
-    }
-
-    if (payload.type === 'custom_tool_call' && payload.name === 'apply_patch' && payload.status === 'completed') {
-      const input = typeof payload.input === 'string' ? payload.input : ''
-      const callId = readNonEmptyString(payload.call_id)
-      if (!input || !callId) continue
-      const parsedChanges = parseApplyPatchInput(input)
-      if (parsedChanges.length === 0) continue
-      const fcItem: SessionRecoveredFileChangeItem = {
-        id: `session-fc-${callId}`,
-        type: 'fileChange',
-        status: 'completed',
-        changes: parsedChanges.map((fc) => ({
-          ...fc,
-          kind: { type: fc.operation, ...(fc.movedToPath ? { move_path: fc.movedToPath } : {}) },
-        })),
-      }
-      slots.push({ type: 'fileChange', fileChange: fcItem })
-    }
-  }
-
-  return orderByTurnId
-}
-
-function extractFilePathsFromCommand(cmd: string, cwd: string): string[] {
-  const paths: string[] = []
-  const absPathPattern = /(?:^|\s|>>|>|<)(\/?(?:Users|home|tmp|var|etc|root)\/[^\s;|&><"']+)/g
-  let match: RegExpExecArray | null
-  while ((match = absPathPattern.exec(cmd)) !== null) {
-    const p = match[1]?.trim()
-    if (p && !p.endsWith('/') && !p.startsWith('-')) paths.push(p)
-  }
-
-  const redirectPattern = /(?:>>?|cat\s*>\s*)([^\s;|&><"']+)/g
-  while ((match = redirectPattern.exec(cmd)) !== null) {
-    const p = match[1]?.trim()
-    if (p && !p.startsWith('-') && !p.startsWith('/dev/')) {
-      paths.push(isAbsolute(p) ? p : join(cwd, p))
-    }
-  }
-
-  return [...new Set(paths)]
-}
-
-type CollectedTurnFileInfo = {
-  patchInputs: { callId: string; input: string }[]
-  commandFilePaths: string[]
-}
-
-function collectFileChangesForTurns(
-  sessionLogRaw: string,
-  turnIdsToRevert: Set<string>,
-  cwd: string,
-): Map<string, CollectedTurnFileInfo> {
-  let currentTurnId = ''
-  const infoByTurnId = new Map<string, CollectedTurnFileInfo>()
-
-  for (const line of sessionLogRaw.split('\n')) {
-    if (!line.trim()) continue
-    let row: Record<string, unknown> | null = null
-    try {
-      row = JSON.parse(line) as Record<string, unknown>
-    } catch {
-      continue
-    }
-
-    if (row.type === 'turn_context') {
-      const p = asRecord(row.payload)
-      currentTurnId = readNonEmptyString(p?.turn_id) || currentTurnId
-      continue
-    }
-    if (row.type === 'event_msg') {
-      const p = asRecord(row.payload)
-      if (p?.type === 'task_started') {
-        currentTurnId = readNonEmptyString(p.turn_id) || currentTurnId
-      }
-      continue
-    }
-
-    if (row.type !== 'response_item' || !currentTurnId || !turnIdsToRevert.has(currentTurnId)) continue
-    const payload = asRecord(row.payload)
-    if (!payload) continue
-
-    let info = infoByTurnId.get(currentTurnId)
-    if (!info) {
-      info = { patchInputs: [], commandFilePaths: [] }
-      infoByTurnId.set(currentTurnId, info)
-    }
-
-    if (payload.type === 'custom_tool_call' && payload.name === 'apply_patch' && payload.status === 'completed') {
-      const input = typeof payload.input === 'string' ? payload.input : ''
-      const callId = readNonEmptyString(payload.call_id)
-      if (input && callId) {
-        info.patchInputs.push({ callId, input })
-      }
-    }
-
-    if (payload.type === 'function_call' && payload.name === 'exec_command') {
-      let cmd = ''
-      try {
-        const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
-        cmd = typeof args.cmd === 'string' ? args.cmd : ''
-      } catch { /* empty */ }
-      if (cmd) {
-        const extracted = extractFilePathsFromCommand(cmd, cwd)
-        for (const p of extracted) {
-          if (!info.commandFilePaths.includes(p)) info.commandFilePaths.push(p)
-        }
-      }
-    }
-  }
-
-  return infoByTurnId
-}
-
-function reverseV4aDiff(fileContent: string, diffText: string): string | null {
-  const fileLines = fileContent.split('\n')
-  const rawDiffLines = diffText.split('\n')
-  while (rawDiffLines.length > 0 && rawDiffLines[rawDiffLines.length - 1]?.trim() === '') rawDiffLines.pop()
-  const diffLines = rawDiffLines
-  const result = [...fileLines]
-
-  type DiffEntry = { type: 'context' | 'add' | 'remove'; text: string }
-  const hunks: DiffEntry[][] = []
-  let currentHunk: DiffEntry[] | null = null
-
-  for (const dl of diffLines) {
-    if (dl.startsWith('@@')) {
-      if (currentHunk) hunks.push(currentHunk)
-      currentHunk = []
-      continue
-    }
-    if (!currentHunk) continue
-    if (dl.startsWith('+')) {
-      currentHunk.push({ type: 'add', text: dl.slice(1) })
-    } else if (dl.startsWith('-')) {
-      currentHunk.push({ type: 'remove', text: dl.slice(1) })
-    } else if (dl.startsWith(' ')) {
-      currentHunk.push({ type: 'context', text: dl.slice(1) })
-    } else {
-      currentHunk.push({ type: 'context', text: dl })
-    }
-  }
-  if (currentHunk) hunks.push(currentHunk)
-
-  for (let hi = hunks.length - 1; hi >= 0; hi--) {
-    const hunk = hunks[hi]!
-    const expectedSequence = hunk
-      .filter((e) => e.type === 'context' || e.type === 'add')
-      .map((e) => e.text)
-
-    if (expectedSequence.length === 0) continue
-
-    let seqStart = -1
-    outer: for (let ri = result.length - expectedSequence.length; ri >= 0; ri--) {
-      for (let si = 0; si < expectedSequence.length; si++) {
-        if (result[ri + si] !== expectedSequence[si]) continue outer
-      }
-      seqStart = ri
-      break
-    }
-
-    if (seqStart < 0) return null
-
-    const newLines: string[] = []
-    let seqIdx = 0
-    for (const entry of hunk) {
-      if (entry.type === 'context') {
-        newLines.push(result[seqStart + seqIdx]!)
-        seqIdx++
-      } else if (entry.type === 'add') {
-        seqIdx++
-      } else if (entry.type === 'remove') {
-        newLines.push(entry.text)
-      }
-    }
-
-    result.splice(seqStart, expectedSequence.length, ...newLines)
-  }
-
-  return result.join('\n')
-}
-
-async function revertTurnFileChanges(
-  cwd: string,
-  turnInfos: Map<string, CollectedTurnFileInfo>,
-): Promise<{ reverted: number; errors: string[] }> {
-  if (turnInfos.size === 0) return { reverted: 0, errors: [] }
-
-  let reverted = 0
-  const errors: string[] = []
-
-  const allEntries = [...turnInfos.values()]
-  const allPatchInputs = allEntries.flatMap((info) => info.patchInputs).reverse()
-  const allCommandPaths = new Set(allEntries.flatMap((info) => info.commandFilePaths))
-
-  let isGitRepo = false
-  let gitRoot = ''
-  try {
-    gitRoot = await runCommandCapture('git', ['rev-parse', '--show-toplevel'], { cwd })
-    isGitRepo = !!gitRoot
-  } catch { /* not a git repo */ }
-
-  const trackedFiles = new Set<string>()
-  if (isGitRepo) {
-    try {
-      const tracked = await runCommandCapture('git', ['ls-files', '--full-name'], { cwd: gitRoot })
-      for (const f of tracked.split('\n')) {
-        if (f.trim()) trackedFiles.add(join(gitRoot, f.trim()))
-      }
-    } catch { /* empty */ }
-  }
-
-  const patchRevertedPaths = new Set<string>()
-
-  for (const patch of allPatchInputs) {
-    const changes = parseApplyPatchInput(patch.input)
-    for (let ci = changes.length - 1; ci >= 0; ci--) {
-      const change = changes[ci]!
-      const filePath = isAbsolute(change.path) ? change.path : join(cwd, change.path)
-
-      try {
-        if (change.operation === 'add') {
-          const fileStat = await stat(filePath).catch(() => null)
-          if (fileStat) {
-            await rm(filePath, { force: true })
-            reverted++
-            patchRevertedPaths.add(filePath)
-          }
-        } else if (change.operation === 'update' && change.diff) {
-          let reversed = false
-          try {
-            const currentContent = await readFile(filePath, 'utf8')
-            const newContent = reverseV4aDiff(currentContent, change.diff)
-            if (newContent !== null && newContent !== currentContent) {
-              const { writeFile } = await import('node:fs/promises')
-              await writeFile(filePath, newContent)
-              reverted++
-              patchRevertedPaths.add(filePath)
-              reversed = true
-            }
-          } catch { /* file read/write failed */ }
-
-          if (!reversed) {
-            const isTracked = trackedFiles.has(filePath)
-            if (isTracked && isGitRepo) {
-              const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
-              try {
-                await runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
-                reverted++
-                patchRevertedPaths.add(filePath)
-              } catch {
-                errors.push(`Could not revert: ${filePath}`)
-              }
-            } else {
-              errors.push(`Could not reverse patch for untracked file: ${filePath}`)
-            }
-          }
-        } else if (change.operation === 'delete') {
-          const isTracked = trackedFiles.has(filePath)
-          if (isTracked && isGitRepo) {
-            const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
-            try {
-              await runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
-              reverted++
-              patchRevertedPaths.add(filePath)
-            } catch {
-              errors.push(`Could not restore deleted file: ${filePath}`)
-            }
-          }
-        }
-      } catch (err) {
-        errors.push(`Failed to revert patch for ${filePath}: ${err instanceof Error ? err.message : String(err)}`)
-      }
-    }
-  }
-
-  for (const filePath of allCommandPaths) {
-    if (patchRevertedPaths.has(filePath)) continue
-    const isTracked = trackedFiles.has(filePath)
-    if (isTracked && isGitRepo) {
-      const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
-      try {
-        await runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
-        reverted++
-      } catch {
-        errors.push(`Could not restore command-modified file: ${filePath}`)
-      }
-    }
-  }
-
-  return { reverted, errors }
-}
-
-function mergeSessionCommandsIntoTurns(turns: unknown[], sessionLogRaw: string): unknown[] {
-  const turnIds = new Set<string>()
-  for (const turn of turns) {
-    const turnRecord = asRecord(turn)
-    const turnId = readNonEmptyString(turnRecord?.id)
-    if (turnId) turnIds.add(turnId)
-  }
-
-  if (turnIds.size === 0) return turns
-
-  const orderByTurnId = buildSessionItemOrder(sessionLogRaw, turnIds)
-  if (orderByTurnId.size === 0) return turns
-
-  return turns.map((turn) => {
-    const turnRecord = asRecord(turn)
-    if (!turnRecord) return turn
-    const turnId = readNonEmptyString(turnRecord.id)
-    if (!turnId) return turn
-
-    const slots = orderByTurnId.get(turnId)
-    if (!slots || slots.length === 0) return turn
-
-    const existingItems = Array.isArray(turnRecord.items) ? (turnRecord.items as Record<string, unknown>[]) : []
-    const alreadyHasRecoveredItems = existingItems.some((it) => it.type === 'commandExecution' || it.type === 'fileChange')
-    if (alreadyHasRecoveredItems) return turn
-
-    const agentMessages = existingItems.filter((it) => it.type === 'agentMessage')
-    const nonAgentNonUserItems = existingItems.filter((it) => it.type !== 'agentMessage' && it.type !== 'userMessage')
-    const userMessages = existingItems.filter((it) => it.type === 'userMessage')
-
-    let agentIdx = 0
-    const interleaved: Record<string, unknown>[] = [...userMessages]
-
-    for (const slot of slots) {
-      if (slot.type === 'agentMessage') {
-        if (agentIdx < agentMessages.length) {
-          interleaved.push(agentMessages[agentIdx]!)
-          agentIdx++
-        }
-      } else if (slot.type === 'commandExecution' && slot.command) {
-        interleaved.push(slot.command as unknown as Record<string, unknown>)
-      } else if (slot.type === 'fileChange' && slot.fileChange) {
-        interleaved.push(slot.fileChange as unknown as Record<string, unknown>)
-      }
-    }
-
-    while (agentIdx < agentMessages.length) {
-      interleaved.push(agentMessages[agentIdx]!)
-      agentIdx++
-    }
-
-    interleaved.push(...nonAgentNonUserItems)
-
-    return {
-      ...turnRecord,
-      items: interleaved,
-    }
-  })
-}
-
-function isExactPhraseMatch(query: string, doc: ThreadSearchDocument): boolean {
-  const q = query.trim().toLowerCase()
-  if (!q) return false
-  return (
-    doc.title.toLowerCase().includes(q) ||
-    doc.preview.toLowerCase().includes(q) ||
-    doc.messageText.toLowerCase().includes(q)
-  )
-}
-
-function scoreFileCandidate(path: string, query: string): number {
-  if (!query) return 0
-  const lowerPath = path.toLowerCase()
-  const lowerQuery = query.toLowerCase()
-  const baseName = lowerPath.slice(lowerPath.lastIndexOf('/') + 1)
-  if (baseName === lowerQuery) return 0
-  if (baseName.startsWith(lowerQuery)) return 1
-  if (baseName.includes(lowerQuery)) return 2
-  if (lowerPath.includes(`/${lowerQuery}`)) return 3
-  if (lowerPath.includes(lowerQuery)) return 4
-  return 10
-}
-
-async function listFilesWithRipgrep(cwd: string): Promise<string[]> {
-  return await new Promise<string[]>((resolve, reject) => {
-    const ripgrepCommand = resolveRipgrepCommand()
-    if (!ripgrepCommand) {
-      reject(new Error('ripgrep (rg) is not available'))
-      return
-    }
-
-    const proc = spawn(ripgrepCommand, ['--files', '--hidden', '-g', '!.git', '-g', '!node_modules'], {
-      cwd,
+async function runCommandWithOutput(command: string, args: string[], options: { cwd?: string } = {}): Promise<string> {
+  return await new Promise<string>((resolve, reject) => {
+    const proc = spawn(command, args, {
+      cwd: options.cwd,
       env: process.env,
       stdio: ['ignore', 'pipe', 'pipe'],
     })
@@ -2607,2871 +654,333 @@ async function listFilesWithRipgrep(cwd: string): Promise<string[]> {
     proc.on('error', reject)
     proc.on('close', (code) => {
       if (code === 0) {
-        const rows = stdout
-          .split(/\r?\n/)
-          .map((line) => line.trim())
-          .filter(Boolean)
-        resolve(rows)
+        resolve(stdout.trim())
         return
       }
       const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
-      reject(new Error(details || 'rg --files failed'))
+      const suffix = details.length > 0 ? `: ${details}` : ''
+      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
     })
   })
 }
 
-function getCodexHomeDir(): string {
-  const codexHome = process.env.CODEX_HOME?.trim()
-  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
-}
 
-function getSkillsInstallDir(): string {
-  return join(getCodexHomeDir(), 'skills')
+function getCodexAuthPath(): string {
+  return join(getCodexHomeDir(), 'auth.json')
 }
 
-function getPromptsDir(): string {
-  return join(getCodexHomeDir(), 'prompts')
+type CodexAuth = {
+  auth_mode?: string
+  last_refresh?: number
+  tokens?: {
+    access_token?: string
+    refresh_token?: string
+    id_token?: string
+    account_id?: string
+  }
 }
 
-type ComposerPromptRecord = {
-  name: string
-  path: string
-  content: string
-  description: string
+const CODEX_CHATGPT_CLIENT_ID = 'app_EMoamEEZ73f0CkXaXp7hrann'
+const DEFAULT_CODEX_REFRESH_TOKEN_URL = 'https://auth.openai.com/oauth/token'
+
+function decodeBase64UrlJson(value: string): Record<string, unknown> | null {
+  try {
+    const padded = `${value}${'='.repeat((4 - (value.length % 4)) % 4)}`
+    const decoded = Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString('utf8')
+    const parsed = JSON.parse(decoded) as unknown
+    return asRecord(parsed)
+  } catch {
+    return null
+  }
 }
 
-function promptNameToFileName(name: string): string {
-  const trimmed = name.trim()
-  const withoutExtension = trimmed.replace(/\.md$/i, '')
-  const sanitized = withoutExtension
-    .replace(/[\/\\:*?"<>|]/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim()
-  return `${sanitized || 'prompt'}.md`
+function decodeJwtPayload(token: string | undefined): Record<string, unknown> | null {
+  if (!token) return null
+  const parts = token.split('.')
+  if (parts.length < 2) return null
+  return decodeBase64UrlJson(parts[1] ?? '')
 }
 
-function buildPromptDescription(content: string): string {
-  const firstNonEmptyLine = content
-    .split(/\r?\n/)
-    .map((line) => line.trim())
-    .find(Boolean) ?? ''
-  return firstNonEmptyLine.slice(0, 120)
+function extractChatgptTokenMetadata(accessToken: string | undefined): {
+  chatgptAccountId: string | null
+  chatgptPlanType: string | null
+} {
+  const payload = decodeJwtPayload(accessToken)
+  const auth = asRecord(payload?.['https://api.openai.com/auth'])
+  return {
+    chatgptAccountId: readNonEmptyString(auth?.chatgpt_account_id) || null,
+    chatgptPlanType: readNonEmptyString(auth?.chatgpt_plan_type) || null,
+  }
 }
 
-async function listComposerPrompts(): Promise<ComposerPromptRecord[]> {
-  const promptsDir = getPromptsDir()
-  try {
-    const entries = await readdir(promptsDir, { withFileTypes: true })
-    const prompts = await Promise.all(entries
-      .filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith('.md'))
-      .map(async (entry) => {
-        const promptPath = join(promptsDir, entry.name)
-        const content = await readFile(promptPath, 'utf8')
-        return {
-          name: entry.name.replace(/\.md$/i, ''),
-          path: promptPath,
-          content,
-          description: buildPromptDescription(content),
-        } satisfies ComposerPromptRecord
-      }))
-    return prompts.sort((a, b) => a.name.localeCompare(b.name))
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException)?.code === 'ENOENT') return []
-    throw error
-  }
-}
-
-async function createComposerPromptFile(name: string, content: string): Promise<ComposerPromptRecord> {
-  const trimmedName = name.trim()
-  if (!trimmedName) throw new Error('Prompt name is required')
-  const trimmedContent = content.trim()
-  if (!trimmedContent) throw new Error('Prompt content is required')
-  const promptsDir = getPromptsDir()
-  await mkdir(promptsDir, { recursive: true })
-
-  const baseFileName = promptNameToFileName(trimmedName)
-  let targetPath = join(promptsDir, baseFileName)
-  let suffix = 2
-  while (existsSync(targetPath)) {
-    const nextFileName = `${baseFileName.replace(/\.md$/i, '')}-${suffix}.md`
-    targetPath = join(promptsDir, nextFileName)
-    suffix += 1
-  }
-
-  await writeFile(targetPath, `${trimmedContent}\n`, 'utf8')
-  return {
-    name: basename(targetPath).replace(/\.md$/i, ''),
-    path: targetPath,
-    content: `${trimmedContent}\n`,
-    description: buildPromptDescription(trimmedContent),
-  }
-}
-
-async function removeComposerPromptFile(promptPath: string): Promise<boolean> {
-  const resolvedPath = resolve(promptPath)
-  const promptsDir = resolve(getPromptsDir())
-  const relative = resolvedPath.startsWith(`${promptsDir}/`) ? resolvedPath.slice(promptsDir.length + 1) : ''
-  if (!relative || relative.includes('..') || !resolvedPath.toLowerCase().endsWith('.md')) {
-    throw new Error('Invalid prompt path')
-  }
-  try {
-    await rm(resolvedPath, { force: false })
-    return true
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException)?.code === 'ENOENT') return false
-    throw error
-  }
-}
-
-async function runCommand(command: string, args: string[], options: { cwd?: string; timeoutMs?: number } = {}): Promise<void> {
-  await new Promise<void>((resolve, reject) => {
-    const proc = spawn(command, args, {
-      cwd: options.cwd,
-      env: process.env,
-      stdio: ['ignore', 'pipe', 'pipe'],
-    })
-    let stdout = ''
-    let stderr = ''
-    let timedOut = false
-    let closed = false
-    const timeout =
-      typeof options.timeoutMs === 'number' && Number.isFinite(options.timeoutMs) && options.timeoutMs > 0
-        ? setTimeout(() => {
-          timedOut = true
-          proc.kill('SIGTERM')
-          setTimeout(() => {
-            if (!closed) proc.kill('SIGKILL')
-          }, 5_000).unref()
-        }, options.timeoutMs)
-        : null
-    timeout?.unref()
-    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
-    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
-    proc.on('error', (error) => {
-      if (timeout) clearTimeout(timeout)
-      reject(error)
-    })
-    proc.on('close', (code) => {
-      closed = true
-      if (timeout) clearTimeout(timeout)
-      if (timedOut) {
-        reject(new Error(`Command timed out after ${options.timeoutMs}ms (${command} ${args.join(' ')})`))
-        return
-      }
-      if (code === 0) {
-        resolve()
-        return
-      }
-      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
-      const suffix = details.length > 0 ? `: ${details}` : ''
-      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
-    })
-  })
-}
-
-function isMissingHeadError(error: unknown): boolean {
-  const message = getErrorMessage(error, '').toLowerCase()
-  return (
-    message.includes("not a valid object name: 'head'") ||
-    message.includes('not a valid object name: head') ||
-    message.includes('invalid reference: head')
-  )
-}
-
-function isNotGitRepositoryError(error: unknown): boolean {
-  const message = getErrorMessage(error, '').toLowerCase()
-  return message.includes('not a git repository') || message.includes('fatal: not a git repository')
-}
-
-async function ensureRepoHasInitialCommit(repoRoot: string): Promise<void> {
-  const agentsPath = join(repoRoot, 'AGENTS.md')
-  try {
-    await stat(agentsPath)
-  } catch {
-    await writeFile(agentsPath, '', 'utf8')
-  }
-
-  await runCommand('git', ['add', 'AGENTS.md'], { cwd: repoRoot })
-  await runCommand(
-    'git',
-    ['-c', 'user.name=Codex', '-c', 'user.email=codex@local', 'commit', '-m', 'Initialize repository for worktree support'],
-    { cwd: repoRoot },
-  )
-}
-
-async function runCommandCapture(command: string, args: string[], options: { cwd?: string } = {}): Promise<string> {
-  return await new Promise<string>((resolve, reject) => {
-    const proc = spawn(command, args, {
-      cwd: options.cwd,
-      env: process.env,
-      stdio: ['ignore', 'pipe', 'pipe'],
-    })
-    let stdout = ''
-    let stderr = ''
-    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
-    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
-    proc.on('error', reject)
-    proc.on('close', (code) => {
-      if (code === 0) {
-        resolve(stdout.trim())
-        return
-      }
-      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
-      const suffix = details.length > 0 ? `: ${details}` : ''
-      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
-    })
-  })
-}
-
-function normalizeBranchRefName(value: string): string {
-  const trimmed = value.trim()
-  if (!trimmed) return ''
-  if (trimmed.startsWith('refs/heads/')) return trimmed.slice('refs/heads/'.length)
-  if (trimmed.startsWith('refs/remotes/')) return trimmed.slice('refs/remotes/'.length)
-  return trimmed
-}
-
-function toHeaderGitResetHistoryRef(branchName: string, commitSha: string): string {
-  return `refs/codex/header-git-reset-history/${branchName}/${commitSha}`
-}
-
-const HEADER_GIT_RESET_HISTORY_REF_LIMIT = 25
-
-async function assertLocalGitBranch(repoRoot: string, branchName: string): Promise<void> {
-  await runCommandCapture('git', ['show-ref', '--verify', `refs/heads/${branchName}`], { cwd: repoRoot })
-}
-
-async function checkoutGitBranchWithWorktreeRecovery(repoRoot: string, branchName: string): Promise<void> {
-  try {
-    await runCommand('git', ['checkout', branchName], { cwd: repoRoot })
-  } catch (checkoutError) {
-    const blockingWorktreePath = extractBranchLockedWorktreePath(checkoutError, branchName)
-    if (!blockingWorktreePath) {
-      throw checkoutError
-    }
-    await runCommand('git', ['checkout', '--detach'], { cwd: blockingWorktreePath })
-    await runCommand('git', ['checkout', branchName], { cwd: repoRoot })
-  }
-}
-
-async function pruneHeaderGitResetHistoryRefs(repoRoot: string, branchName: string): Promise<void> {
-  const resetHistoryRefPrefix = `refs/codex/header-git-reset-history/${branchName}/`
-  const refsRaw = await runCommandCapture(
-    'git',
-    ['for-each-ref', '--sort=-creatordate', '--format=%(refname)', resetHistoryRefPrefix],
-    { cwd: repoRoot },
-  ).catch(() => '')
-  const refs = refsRaw
-    .split('\n')
-    .map((entry) => entry.trim())
-    .filter(Boolean)
-  const staleRefs = refs.slice(HEADER_GIT_RESET_HISTORY_REF_LIMIT)
-  for (const refName of staleRefs) {
-    await runCommand('git', ['update-ref', '-d', refName], { cwd: repoRoot })
-  }
-}
-
-async function readGitHeaderState(cwd: string): Promise<{
-  currentBranch: string | null
-  headSha: string | null
-  headSubject: string | null
-  headDate: string | null
-  detached: boolean
-  dirty: boolean
-  gitRoot: string
-}> {
-  const gitRoot = await runCommandCapture('git', ['rev-parse', '--show-toplevel'], { cwd })
-  const currentBranchRaw = await runCommandCapture('git', ['branch', '--show-current'], { cwd: gitRoot })
-  const currentBranch = currentBranchRaw.trim() || null
-  const headShaRaw = await runCommandCapture('git', ['rev-parse', '--short=12', 'HEAD'], { cwd: gitRoot })
-  const headCommitRaw = await runCommandCapture('git', ['show', '-s', '--date=short', '--format=%cd%x09%s', 'HEAD'], { cwd: gitRoot })
-  const [headDate = '', ...headSubjectParts] = headCommitRaw.split('\t')
-  const statusRaw = await runCommandCapture('git', ['status', '--porcelain'], { cwd: gitRoot })
-  return {
-    currentBranch,
-    headSha: headShaRaw.trim() || null,
-    headSubject: headSubjectParts.join('\t').trim() || null,
-    headDate: headDate.trim() || null,
-    detached: !currentBranch,
-    dirty: statusRaw.trim().length > 0,
-    gitRoot,
-  }
-}
-
-async function assertNoTrackedGitChanges(repoRoot: string): Promise<void> {
-  const statusRaw = await runCommandCapture('git', ['status', '--porcelain'], { cwd: repoRoot })
-  const trackedChanges = statusRaw
-    .split('\n')
-    .map((line) => line.trimEnd())
-    .filter((line) => line && !line.startsWith('?? '))
-  if (trackedChanges.length > 0) {
-    throw new Error('Cannot switch branches or reset with tracked uncommitted changes. Commit, stash, or discard tracked changes first. Untracked files are allowed unless Git would overwrite them.')
-  }
-}
-
-function extractBranchLockedWorktreePath(error: unknown, branchName: string): string {
-  const message = getErrorMessage(error, '')
-  if (!message || !branchName) return ''
-  const escapedBranch = branchName.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&')
-  const pattern = new RegExp(`'${escapedBranch}' is already checked out at '([^']+)'`, 'u')
-  const match = pattern.exec(message)
-  return match?.[1]?.trim() ?? ''
-}
-
-function toPermanentWorktreeBranchNameDraft(worktreeName: string): string {
-  const sanitized = worktreeName
-    .trim()
-    .replace(/[^A-Za-z0-9._-]+/gu, '-')
-    .replace(/\.+/gu, '.')
-    .replace(/-+/gu, '-')
-    .replace(/^[.-]+|[.-]+$/gu, '')
-  return sanitized || 'worktree'
-}
-
-async function isValidGitBranchName(gitRoot: string, branchName: string): Promise<boolean> {
-  try {
-    await runCommand('git', ['check-ref-format', '--branch', branchName], { cwd: gitRoot })
-    return true
-  } catch {
-    return false
-  }
-}
-
-async function doesLocalGitBranchExist(gitRoot: string, branchName: string): Promise<boolean> {
-  try {
-    await runCommand('git', ['show-ref', '--verify', '--quiet', `refs/heads/${branchName}`], { cwd: gitRoot })
-    return true
-  } catch {
-    return false
-  }
-}
-
-async function allocatePermanentWorktreeBranchName(gitRoot: string, worktreeName: string): Promise<string> {
-  const base = toPermanentWorktreeBranchNameDraft(worktreeName)
-  for (let attempt = 0; attempt < 50; attempt += 1) {
-    const candidate = attempt === 0 ? base : `${base}-${attempt + 1}`
-    if (!await isValidGitBranchName(gitRoot, candidate)) continue
-    if (!await doesLocalGitBranchExist(gitRoot, candidate)) return candidate
-  }
-  throw new Error('Failed to allocate a unique branch name for worktree')
-}
-
-async function runCommandWithOutput(command: string, args: string[], options: { cwd?: string } = {}): Promise<string> {
-  return await new Promise<string>((resolve, reject) => {
-    const proc = spawn(command, args, {
-      cwd: options.cwd,
-      env: process.env,
-      stdio: ['ignore', 'pipe', 'pipe'],
-    })
-    let stdout = ''
-    let stderr = ''
-    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
-    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
-    proc.on('error', reject)
-    proc.on('close', (code) => {
-      if (code === 0) {
-        resolve(stdout.trim())
-        return
-      }
-      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
-      const suffix = details.length > 0 ? `: ${details}` : ''
-      reject(new Error(`Command failed (${command} ${args.join(' ')})${suffix}`))
-    })
-  })
-}
-
-
-function normalizeStringArray(value: unknown): string[] {
-  if (!Array.isArray(value)) return []
-  const normalized: string[] = []
-  for (const item of value) {
-    if (typeof item === 'string' && item.length > 0 && !normalized.includes(item)) {
-      normalized.push(item)
-    }
-  }
-  return normalized
-}
-
-function normalizeStringRecord(value: unknown): Record<string, string> {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
-  const next: Record<string, string> = {}
-  for (const [key, item] of Object.entries(value as Record<string, unknown>)) {
-    if (typeof key === 'string' && key.length > 0 && typeof item === 'string') {
-      next[key] = item
-    }
-  }
-  return next
-}
-
-function normalizeRemoteProjects(value: unknown): WorkspaceRootsState['remoteProjects'] {
-  if (!Array.isArray(value)) return []
-  const next: WorkspaceRootsState['remoteProjects'] = []
-  const seen = new Set<string>()
-  for (const item of value) {
-    const record = asRecord(item)
-    if (!record) continue
-    const id = typeof record.id === 'string' ? record.id.trim() : ''
-    if (!id || seen.has(id)) continue
-    seen.add(id)
-    next.push({
-      id,
-      hostId: typeof record.hostId === 'string' ? record.hostId.trim() : '',
-      remotePath: typeof record.remotePath === 'string' ? record.remotePath.trim() : '',
-      label: typeof record.label === 'string' ? record.label.trim() : '',
-    })
-  }
-  return next
-}
-
-
-
-function getCodexAuthPath(): string {
-  return join(getCodexHomeDir(), 'auth.json')
-}
-
-type CodexAuth = {
-  auth_mode?: string
-  last_refresh?: number
-  tokens?: {
-    access_token?: string
-    refresh_token?: string
-    id_token?: string
-    account_id?: string
-  }
-}
-
-const CODEX_CHATGPT_CLIENT_ID = 'app_EMoamEEZ73f0CkXaXp7hrann'
-const DEFAULT_CODEX_REFRESH_TOKEN_URL = 'https://auth.openai.com/oauth/token'
-
-function decodeBase64UrlJson(value: string): Record<string, unknown> | null {
-  try {
-    const padded = `${value}${'='.repeat((4 - (value.length % 4)) % 4)}`
-    const decoded = Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString('utf8')
-    const parsed = JSON.parse(decoded) as unknown
-    return asRecord(parsed)
-  } catch {
-    return null
-  }
-}
-
-function decodeJwtPayload(token: string | undefined): Record<string, unknown> | null {
-  if (!token) return null
-  const parts = token.split('.')
-  if (parts.length < 2) return null
-  return decodeBase64UrlJson(parts[1] ?? '')
-}
-
-function extractChatgptTokenMetadata(accessToken: string | undefined): {
-  chatgptAccountId: string | null
-  chatgptPlanType: string | null
-} {
-  const payload = decodeJwtPayload(accessToken)
-  const auth = asRecord(payload?.['https://api.openai.com/auth'])
-  return {
-    chatgptAccountId: readNonEmptyString(auth?.chatgpt_account_id) || null,
-    chatgptPlanType: readNonEmptyString(auth?.chatgpt_plan_type) || null,
-  }
-}
-
-function readTokenErrorMessage(payload: unknown, fallback: string): string {
-  const record = asRecord(payload)
-  const message = readNonEmptyString(record?.message)
-  if (message) return message
-  const error = record?.error
-  if (typeof error === 'string' && error.trim().length > 0) return error.trim()
-  const nestedError = asRecord(error)
-  return readNonEmptyString(nestedError?.message)
-    || readNonEmptyString(nestedError?.error_description)
-    || readNonEmptyString(record?.error_description)
-    || fallback
-}
-
-function readTokenResponseString(payload: Record<string, unknown> | null, ...keys: string[]): string | null {
-  if (!payload) return null
-  for (const key of keys) {
-    const value = readNonEmptyString(payload[key])
-    if (value) return value
-  }
-  return null
-}
-
-export async function refreshChatgptAuthTokensForExternalAuth(
-  params: ChatgptAuthTokensRefreshParams = {},
-): Promise<ChatgptAuthTokensRefreshResponse> {
-  const authPath = getCodexAuthPath()
-  const raw = await readFile(authPath, 'utf8')
-  const auth = JSON.parse(raw) as CodexAuth
-  const currentRefreshToken = auth.tokens?.refresh_token?.trim() ?? ''
-  if (!currentRefreshToken) {
-    throw new Error('No ChatGPT refresh token is available. Please sign in again.')
-  }
-
-  const refreshUrl = process.env.CODEX_REFRESH_TOKEN_URL_OVERRIDE?.trim() || DEFAULT_CODEX_REFRESH_TOKEN_URL
-  const body = new URLSearchParams({
-    grant_type: 'refresh_token',
-    refresh_token: currentRefreshToken,
-    client_id: CODEX_CHATGPT_CLIENT_ID,
-  })
-
-  const response = await fetch(refreshUrl, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    body: body.toString(),
-    signal: AbortSignal.timeout(25_000),
-  })
-
-  const text = await response.text()
-  let payload: Record<string, unknown> | null = null
-  try {
-    payload = asRecord(JSON.parse(text))
-  } catch {
-    payload = null
-  }
-
-  if (!response.ok) {
-    throw new Error(readTokenErrorMessage(payload, `ChatGPT token refresh failed with HTTP ${String(response.status)}`))
-  }
-
-  const accessToken = readTokenResponseString(payload, 'access_token', 'accessToken')
-  if (!accessToken) {
-    throw new Error('ChatGPT token refresh response did not include an access token.')
-  }
-
-  const nextRefreshToken = readTokenResponseString(payload, 'refresh_token', 'refreshToken') ?? currentRefreshToken
-  const nextIdToken = readTokenResponseString(payload, 'id_token', 'idToken') ?? auth.tokens?.id_token
-  const metadata = extractChatgptTokenMetadata(accessToken)
-  const chatgptAccountId =
-    metadata.chatgptAccountId
-    || readTokenResponseString(payload, 'chatgpt_account_id', 'chatgptAccountId')
-    || readNonEmptyString(params.previousAccountId)
-    || readNonEmptyString(auth.tokens?.account_id)
-  if (!chatgptAccountId) {
-    throw new Error('ChatGPT token refresh response did not include account metadata.')
-  }
-
-  const nextAuth: CodexAuth = {
-    ...auth,
-    auth_mode: auth.auth_mode || 'chatgpt',
-    last_refresh: Date.now(),
-    tokens: {
-      ...auth.tokens,
-      access_token: accessToken,
-      refresh_token: nextRefreshToken,
-      account_id: chatgptAccountId,
-      ...(nextIdToken ? { id_token: nextIdToken } : {}),
-    },
-  }
-  await writeFile(authPath, JSON.stringify(nextAuth, null, 2), { encoding: 'utf8', mode: 0o600 })
-
-  return {
-    accessToken,
-    chatgptAccountId,
-    chatgptPlanType: metadata.chatgptPlanType,
-  }
-}
-
-async function readCodexAuth(): Promise<{ accessToken: string; accountId?: string } | null> {
-  try {
-    const raw = await readFile(getCodexAuthPath(), 'utf8')
-    const auth = JSON.parse(raw) as CodexAuth
-    const token = auth.tokens?.access_token
-    if (!token) return null
-    return { accessToken: token, accountId: auth.tokens?.account_id ?? undefined }
-  } catch {
-    return null
-  }
-}
-
-function hasUsableCodexAuthSync(): boolean {
-  try {
-    const raw = readFileSync(getCodexAuthPath(), 'utf8')
-    const auth = JSON.parse(raw) as CodexAuth
-    return Boolean(auth.tokens?.access_token?.trim())
-  } catch {
-    return false
-  }
-}
-
-function readFreeModeStateSync(statePath: string): FreeModeState | null {
-  try {
-    return JSON.parse(readFileSync(statePath, 'utf8')) as FreeModeState
-  } catch {
-    return null
-  }
-}
-
-function ensureDefaultFreeModeStateForMissingAuthSync(statePath: string): FreeModeState | null {
-  const current = readFreeModeStateSync(statePath)
-  if (!shouldCreateDefaultFreeModeStateForMissingAuth(current, hasUsableCodexAuthSync())) {
-    return current
-  }
-
-  const fallback = createDefaultOpenCodeZenFreeModeState()
-
-  mkdirSync(dirname(statePath), { recursive: true })
-  writeFileSync(statePath, JSON.stringify(fallback), { encoding: 'utf8', mode: 0o600 })
-  return fallback
-}
-
-function isLoopbackRemoteAddress(remoteAddress: string | undefined): boolean {
-  if (!remoteAddress) return false
-  const normalized = remoteAddress.startsWith('::ffff:')
-    ? remoteAddress.slice('::ffff:'.length)
-    : remoteAddress
-  return normalized === '127.0.0.1' || normalized === '::1'
-}
-
-function getCodexGlobalStatePath(): string {
-  return join(getCodexHomeDir(), '.codex-global-state.json')
-}
-
-function getTelegramBridgeConfigPath(): string {
-  return join(getCodexHomeDir(), 'telegram-bridge.json')
-}
-
-function getCodexSessionIndexPath(): string {
-  return join(getCodexHomeDir(), 'session_index.jsonl')
-}
-
-function getCodexAutomationsDir(): string {
-  return join(getCodexHomeDir(), 'automations')
-}
-
-type ThreadAutomationStatus = 'ACTIVE' | 'PAUSED'
-
-type ThreadAutomationRecord = {
-  id: string
-  kind: 'heartbeat' | 'cron'
-  name: string
-  prompt: string
-  rrule: string
-  status: ThreadAutomationStatus
-  targetThreadId: string | null
-  cwds: string[]
-  extraTomlLines: string[]
-  createdAtMs: number | null
-  updatedAtMs: number | null
-  nextRunAtMs: number | null
-}
-
-function readTomlString(value: string): string {
-  const trimmed = value.trim()
-  if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith('\'') && trimmed.endsWith('\''))) {
-    try {
-      return JSON.parse(trimmed)
-    } catch {
-      return trimmed.slice(1, -1)
-    }
-  }
-  return trimmed
-}
-
-function serializeTomlString(value: string): string {
-  return JSON.stringify(value)
-}
-
-function parseTomlStringArray(value: string): string[] {
-  const trimmed = value.trim()
-  if (!trimmed.startsWith('[') || !trimmed.endsWith(']')) return []
-  try {
-    const parsed = JSON.parse(trimmed)
-    return Array.isArray(parsed)
-      ? parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
-      : []
-  } catch {
-    return []
-  }
-}
-
-function serializeTomlStringArray(values: string[]): string {
-  return `[${values.map((value) => serializeTomlString(value)).join(', ')}]`
-}
-
-function parseAutomationToml(raw: string): ThreadAutomationRecord | null {
-  const values: Record<string, string> = {}
-  const extraTomlLines: string[] = []
-  const knownKeys = new Set([
-    'version',
-    'id',
-    'kind',
-    'name',
-    'prompt',
-    'status',
-    'rrule',
-    'target_thread_id',
-    'cwds',
-    'created_at',
-    'updated_at',
-  ])
-  let isInsideExtraTable = false
-  for (const line of raw.split(/\r?\n/u)) {
-    const trimmed = line.trim()
-    if (!trimmed || trimmed.startsWith('#')) continue
-    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
-      isInsideExtraTable = true
-      extraTomlLines.push(trimmed)
-      continue
-    }
-    if (isInsideExtraTable) {
-      extraTomlLines.push(trimmed)
-      continue
-    }
-    if (!trimmed.includes('=')) {
-      extraTomlLines.push(trimmed)
-      continue
-    }
-    const separatorIndex = trimmed.indexOf('=')
-    const key = trimmed.slice(0, separatorIndex).trim()
-    const value = trimmed.slice(separatorIndex + 1).trim()
-    if (!key) continue
-    if (knownKeys.has(key)) {
-      values[key] = value
-    } else {
-      extraTomlLines.push(trimmed)
-    }
-  }
-
-  const id = readTomlString(values.id ?? '')
-  const kindValue = readTomlString(values.kind ?? (values.cwds ? 'cron' : 'heartbeat'))
-  const name = readTomlString(values.name ?? '')
-  const prompt = readTomlString(values.prompt ?? '')
-  const rrule = readTomlString(values.rrule ?? '')
-  const statusValue = readTomlString(values.status ?? 'ACTIVE')
-  const targetThreadId = readTomlString(values.target_thread_id ?? '') || null
-  const cwds = parseTomlStringArray(values.cwds ?? '')
-  const createdAtMs = Number.parseInt(values.created_at ?? '', 10)
-  const updatedAtMs = Number.parseInt(values.updated_at ?? '', 10)
-
-  if (!id || !name || !prompt || !rrule) return null
-  if (kindValue !== 'heartbeat' && kindValue !== 'cron') return null
-  if (statusValue !== 'ACTIVE' && statusValue !== 'PAUSED') return null
-
-  return {
-    id,
-    kind: kindValue,
-    name,
-    prompt,
-    rrule,
-    status: statusValue,
-    targetThreadId,
-    cwds,
-    extraTomlLines,
-    createdAtMs: Number.isFinite(createdAtMs) ? createdAtMs : null,
-    updatedAtMs: Number.isFinite(updatedAtMs) ? updatedAtMs : null,
-    nextRunAtMs: null,
-  }
-}
-
-function serializeAutomationToml(record: ThreadAutomationRecord): string {
-  const lines = [
-    'version = 1',
-    `id = ${serializeTomlString(record.id)}`,
-    `kind = ${serializeTomlString(record.kind)}`,
-    `name = ${serializeTomlString(record.name)}`,
-    `prompt = ${serializeTomlString(record.prompt)}`,
-    `status = ${serializeTomlString(record.status)}`,
-    `rrule = ${serializeTomlString(record.rrule)}`,
-  ]
-  if (record.targetThreadId) {
-    lines.push(`target_thread_id = ${serializeTomlString(record.targetThreadId)}`)
-  }
-  if (record.cwds.length > 0) {
-    lines.push(`cwds = ${serializeTomlStringArray(record.cwds)}`)
-  }
-  lines.push(
-    `created_at = ${String(record.createdAtMs ?? Date.now())}`,
-    `updated_at = ${String(record.updatedAtMs ?? Date.now())}`,
-  )
-  lines.push(...record.extraTomlLines)
-  return `${lines.join('\n')}\n`
-}
-
-function slugifyAutomationId(threadId: string, name: string): string {
-  const preferred = name.trim().toLowerCase().replace(/[^a-z0-9]+/gu, '-').replace(/^-+|-+$/gu, '')
-  if (preferred) return preferred.slice(0, 48)
-  const fallback = threadId.trim().toLowerCase().replace(/[^a-z0-9]+/gu, '-').replace(/^-+|-+$/gu, '')
-  return `heartbeat-${fallback.slice(0, 24) || randomBytes(4).toString('hex')}`
-}
-
-async function readAutomationRecordFromFile(filePath: string): Promise<ThreadAutomationRecord | null> {
-  try {
-    return parseAutomationToml(await readFile(filePath, 'utf8'))
-  } catch {
-    return null
-  }
-}
-
-async function listThreadHeartbeatAutomations(): Promise<Record<string, ThreadAutomationRecord[]>> {
-  const automationRoot = getCodexAutomationsDir()
-  const next: Record<string, ThreadAutomationRecord[]> = {}
-  let entries
-  try {
-    entries = await readdir(automationRoot, { withFileTypes: true })
-  } catch {
-    return next
-  }
-
-  for (const entry of entries) {
-    if (!entry.isDirectory()) continue
-    const automation = await readAutomationRecordFromFile(join(automationRoot, entry.name, 'automation.toml'))
-    if (!automation || automation.kind !== 'heartbeat' || !automation.targetThreadId) continue
-    next[automation.targetThreadId] = [...(next[automation.targetThreadId] ?? []), automation]
-  }
-
-  for (const automations of Object.values(next)) {
-    automations.sort((first, second) => {
-      const firstCreatedAt = first.createdAtMs ?? 0
-      const secondCreatedAt = second.createdAtMs ?? 0
-      if (firstCreatedAt !== secondCreatedAt) return firstCreatedAt - secondCreatedAt
-      return first.id.localeCompare(second.id)
-    })
-  }
-
-  return next
-}
-
-async function readThreadHeartbeatAutomations(threadId: string): Promise<ThreadAutomationRecord[]> {
-  const all = await listThreadHeartbeatAutomations()
-  return all[threadId] ?? []
-}
-
-async function readThreadHeartbeatAutomation(threadId: string, automationId = ''): Promise<ThreadAutomationRecord | null> {
-  const automations = await readThreadHeartbeatAutomations(threadId)
-  if (automationId) return automations.find((automation) => automation.id === automationId) ?? null
-  return automations[0] ?? null
-}
-
-function resolveUniqueAutomationId(existingIds: Set<string>, threadId: string, name: string): string {
-  const baseId = slugifyAutomationId(threadId, name)
-  if (!existingIds.has(baseId)) return baseId
-  for (let index = 2; index < 1000; index += 1) {
-    const candidate = `${baseId}-${index}`
-    if (!existingIds.has(candidate)) return candidate
-  }
-  return `${baseId}-${randomBytes(4).toString('hex')}`
-}
-
-async function writeThreadHeartbeatAutomation(input: {
-  threadId: string
-  id?: string
-  name: string
-  prompt: string
-  rrule: string
-  status: ThreadAutomationStatus
-}): Promise<ThreadAutomationRecord> {
-  const threadId = input.threadId.trim()
-  const name = input.name.trim()
-  const prompt = input.prompt.trim()
-  const rrule = input.rrule.trim()
-  if (!threadId || !name || !prompt || !rrule) {
-    throw new Error('threadId, name, prompt, and rrule are required')
-  }
-
-  const automationRoot = getCodexAutomationsDir()
-  await mkdir(automationRoot, { recursive: true })
-  const existing = input.id ? await readThreadHeartbeatAutomation(threadId, input.id.trim()) : null
-  const entries = await readdir(automationRoot, { withFileTypes: true }).catch(() => [])
-  const existingIds = new Set(entries.filter((entry) => entry.isDirectory()).map((entry) => entry.name))
-  const id = existing?.id ?? resolveUniqueAutomationId(existingIds, threadId, name)
-  const automationDir = join(automationRoot, id)
-  const now = Date.now()
-  const record: ThreadAutomationRecord = {
-    id,
-    kind: 'heartbeat',
-    name,
-    prompt,
-    rrule,
-    status: input.status,
-    targetThreadId: threadId,
-    cwds: [],
-    extraTomlLines: existing?.extraTomlLines ?? [],
-    createdAtMs: existing?.createdAtMs ?? now,
-    updatedAtMs: now,
-    nextRunAtMs: null,
-  }
-
-  await mkdir(automationDir, { recursive: true })
-  await writeFile(join(automationDir, 'automation.toml'), serializeAutomationToml(record), 'utf8')
-  const memoryPath = join(automationDir, 'memory.md')
-  try {
-    await stat(memoryPath)
-  } catch {
-    await writeFile(memoryPath, '', 'utf8')
-  }
-  return record
-}
-
-async function deleteThreadHeartbeatAutomation(threadId: string, automationId = ''): Promise<boolean> {
-  const normalizedThreadId = threadId.trim()
-  const normalizedAutomationId = automationId.trim()
-  if (normalizedAutomationId) {
-    const automation = await readThreadHeartbeatAutomation(normalizedThreadId, normalizedAutomationId)
-    if (!automation) return false
-    await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
-    return true
-  }
-
-  const automations = await readThreadHeartbeatAutomations(normalizedThreadId)
-  if (automations.length === 0) return false
-  await Promise.all(automations.map((automation) => rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })))
-  return true
-}
-
-async function listProjectCronAutomations(): Promise<Record<string, ThreadAutomationRecord[]>> {
-  const automationRoot = getCodexAutomationsDir()
-  const next: Record<string, ThreadAutomationRecord[]> = {}
-  let entries
-  try {
-    entries = await readdir(automationRoot, { withFileTypes: true })
-  } catch {
-    return next
-  }
-
-  for (const entry of entries) {
-    if (!entry.isDirectory()) continue
-    const automation = await readAutomationRecordFromFile(join(automationRoot, entry.name, 'automation.toml'))
-    if (!automation || automation.kind !== 'cron' || automation.cwds.length === 0) continue
-    for (const cwd of automation.cwds) {
-      next[cwd] = [...(next[cwd] ?? []), automation]
-    }
-  }
-
-  for (const automations of Object.values(next)) {
-    automations.sort((first, second) => {
-      const firstCreatedAt = first.createdAtMs ?? 0
-      const secondCreatedAt = second.createdAtMs ?? 0
-      if (firstCreatedAt !== secondCreatedAt) return firstCreatedAt - secondCreatedAt
-      return first.id.localeCompare(second.id)
-    })
-  }
-
-  return next
-}
-
-async function readProjectCronAutomations(projectName: string): Promise<ThreadAutomationRecord[]> {
-  const all = await listProjectCronAutomations()
-  return all[projectName] ?? []
-}
-
-async function readProjectCronAutomation(projectName: string, automationId = ''): Promise<ThreadAutomationRecord | null> {
-  const automations = await readProjectCronAutomations(projectName)
-  if (automationId) return automations.find((automation) => automation.id === automationId) ?? null
-  return automations[0] ?? null
-}
-
-async function writeProjectCronAutomation(input: {
-  projectName: string
-  id?: string
-  name: string
-  prompt: string
-  rrule: string
-  status: ThreadAutomationStatus
-}): Promise<ThreadAutomationRecord> {
-  const projectName = input.projectName.trim()
-  const name = input.name.trim()
-  const prompt = input.prompt.trim()
-  const rrule = input.rrule.trim()
-  if (!projectName || !name || !prompt || !rrule) {
-    throw new Error('projectName, name, prompt, and rrule are required')
-  }
-  if (!isAbsoluteLikePath(projectName)) {
-    throw new Error('Project automation cwd must be an absolute path')
-  }
-
-  const automationRoot = getCodexAutomationsDir()
-  await mkdir(automationRoot, { recursive: true })
-  const existing = input.id ? await readProjectCronAutomation(projectName, input.id.trim()) : null
-  const entries = await readdir(automationRoot, { withFileTypes: true }).catch(() => [])
-  const existingIds = new Set(entries.filter((entry) => entry.isDirectory()).map((entry) => entry.name))
-  const id = existing?.id ?? resolveUniqueAutomationId(existingIds, projectName, name)
-  const automationDir = join(automationRoot, id)
-  const now = Date.now()
-  const record: ThreadAutomationRecord = {
-    id,
-    kind: 'cron',
-    name,
-    prompt,
-    rrule,
-    status: input.status,
-    targetThreadId: null,
-    cwds: Array.from(new Set([...(existing?.cwds ?? []), projectName])),
-    extraTomlLines: existing?.extraTomlLines ?? [],
-    createdAtMs: existing?.createdAtMs ?? now,
-    updatedAtMs: now,
-    nextRunAtMs: null,
-  }
-
-  await mkdir(automationDir, { recursive: true })
-  await writeFile(join(automationDir, 'automation.toml'), serializeAutomationToml(record), 'utf8')
-  const memoryPath = join(automationDir, 'memory.md')
-  try {
-    await stat(memoryPath)
-  } catch {
-    await writeFile(memoryPath, '', 'utf8')
-  }
-  return record
-}
-
-async function deleteProjectCronAutomation(projectName: string, automationId = ''): Promise<boolean> {
-  const normalizedProjectName = projectName.trim()
-  const normalizedAutomationId = automationId.trim()
-  if (!normalizedProjectName || !isAbsoluteLikePath(normalizedProjectName)) return false
-  if (normalizedAutomationId) {
-    const automation = await readProjectCronAutomation(normalizedProjectName, normalizedAutomationId)
-    if (!automation) return false
-    const remainingCwds = automation.cwds.filter((cwd) => cwd !== normalizedProjectName)
-    if (remainingCwds.length > 0) {
-      const record = { ...automation, cwds: remainingCwds, updatedAtMs: Date.now() }
-      await writeFile(join(getCodexAutomationsDir(), automation.id, 'automation.toml'), serializeAutomationToml(record), 'utf8')
-    } else {
-      await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
-    }
-    return true
-  }
-
-  const automations = await readProjectCronAutomations(normalizedProjectName)
-  if (automations.length === 0) return false
-  await Promise.all(automations.map(async (automation) => {
-    const remainingCwds = automation.cwds.filter((cwd) => cwd !== normalizedProjectName)
-    if (remainingCwds.length > 0) {
-      const record = { ...automation, cwds: remainingCwds, updatedAtMs: Date.now() }
-      await writeFile(join(getCodexAutomationsDir(), automation.id, 'automation.toml'), serializeAutomationToml(record), 'utf8')
-      return
-    }
-    await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
-  }))
-  return true
-}
-
-type ThreadTitleCache = { titles: Record<string, string>; order: string[] }
-const MAX_THREAD_TITLES = 500
-const EMPTY_THREAD_TITLE_CACHE: ThreadTitleCache = { titles: {}, order: [] }
-const PINNED_THREAD_IDS_KEY = 'pinned-thread-ids'
-
-type SessionIndexThreadTitleCacheState = {
-  fileSignature: string | null
-  cache: ThreadTitleCache
-}
-
-let sessionIndexThreadTitleCacheState: SessionIndexThreadTitleCacheState = {
-  fileSignature: null,
-  cache: EMPTY_THREAD_TITLE_CACHE,
-}
-
-type TelegramBridgeConfigState = {
-  botToken: string
-  chatIds: number[]
-  allowedUserIds: Array<number | '*'>
-}
-
-function normalizeThreadTitleCache(value: unknown): ThreadTitleCache {
-  const record = asRecord(value)
-  if (!record) return EMPTY_THREAD_TITLE_CACHE
-  const rawTitles = asRecord(record.titles)
-  const titles: Record<string, string> = {}
-  if (rawTitles) {
-    for (const [k, v] of Object.entries(rawTitles)) {
-      if (typeof v === 'string' && v.length > 0) titles[k] = v
-    }
-  }
-  const order = normalizeStringArray(record.order)
-  return { titles, order }
-}
-
-function normalizePinnedThreadIds(value: unknown): string[] {
-  return normalizeStringArray(value)
-}
-
-function updateThreadTitleCache(cache: ThreadTitleCache, id: string, title: string): ThreadTitleCache {
-  const titles = { ...cache.titles, [id]: title }
-  const order = [id, ...cache.order.filter((o) => o !== id)]
-  while (order.length > MAX_THREAD_TITLES) {
-    const removed = order.pop()
-    if (removed) delete titles[removed]
-  }
-  return { titles, order }
-}
-
-function removeFromThreadTitleCache(cache: ThreadTitleCache, id: string): ThreadTitleCache {
-  const { [id]: _, ...titles } = cache.titles
-  return { titles, order: cache.order.filter((o) => o !== id) }
-}
-
-type SessionIndexThreadTitle = {
-  id: string
-  title: string
-  updatedAtMs: number
-}
-
-function normalizeSessionIndexThreadTitle(value: unknown): SessionIndexThreadTitle | null {
-  const record = asRecord(value)
-  if (!record) return null
-
-  const id = typeof record.id === 'string' ? record.id.trim() : ''
-  const title = typeof record.thread_name === 'string' ? record.thread_name.trim() : ''
-  const updatedAtIso = typeof record.updated_at === 'string' ? record.updated_at.trim() : ''
-  const updatedAtMs = updatedAtIso ? Date.parse(updatedAtIso) : Number.NaN
-
-  if (!id || !title) return null
-  return {
-    id,
-    title,
-    updatedAtMs: Number.isFinite(updatedAtMs) ? updatedAtMs : 0,
-  }
-}
-
-function trimThreadTitleCache(cache: ThreadTitleCache): ThreadTitleCache {
-  const titles = { ...cache.titles }
-  const order = cache.order.filter((id) => {
-    if (!titles[id]) return false
-    return true
-  }).slice(0, MAX_THREAD_TITLES)
-
-  for (const id of Object.keys(titles)) {
-    if (!order.includes(id)) {
-      delete titles[id]
-    }
-  }
-
-  return { titles, order }
-}
-
-function mergeThreadTitleCaches(base: ThreadTitleCache, overlay: ThreadTitleCache): ThreadTitleCache {
-  const titles = { ...base.titles, ...overlay.titles }
-  const order: string[] = []
-
-  for (const id of [...overlay.order, ...base.order]) {
-    if (!titles[id] || order.includes(id)) continue
-    order.push(id)
-  }
-
-  for (const id of Object.keys(titles)) {
-    if (!order.includes(id)) {
-      order.push(id)
-    }
-  }
-
-  return trimThreadTitleCache({ titles, order })
-}
-
-async function readThreadTitleCache(): Promise<ThreadTitleCache> {
-  const statePath = getCodexGlobalStatePath()
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    const payload = asRecord(JSON.parse(raw)) ?? {}
-    return normalizeThreadTitleCache(payload['thread-titles'])
-  } catch {
-    return EMPTY_THREAD_TITLE_CACHE
-  }
-}
-
-async function writeThreadTitleCache(cache: ThreadTitleCache): Promise<void> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    payload = asRecord(JSON.parse(raw)) ?? {}
-  } catch {
-    payload = {}
-  }
-  payload['thread-titles'] = cache
-  await writeFile(statePath, JSON.stringify(payload), 'utf8')
-}
-
-async function readPinnedThreadIds(): Promise<string[]> {
-  const statePath = getCodexGlobalStatePath()
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    const payload = asRecord(JSON.parse(raw)) ?? {}
-    return normalizePinnedThreadIds(payload[PINNED_THREAD_IDS_KEY])
-  } catch {
-    return []
-  }
-}
-
-async function writePinnedThreadIds(threadIds: string[]): Promise<void> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    payload = asRecord(JSON.parse(raw)) ?? {}
-  } catch {
-    payload = {}
-  }
-
-  payload[PINNED_THREAD_IDS_KEY] = normalizePinnedThreadIds(threadIds)
-  await writeFile(statePath, JSON.stringify(payload), 'utf8')
-}
-
-const FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY = 'first-launch-plugins-card-dismissed'
-const THREAD_QUEUE_STATE_KEY = 'thread-queue-state'
-
-type StoredQueuedMessage = {
-  id: string
-  text: string
-  imageUrls: string[]
-  skills: Array<{ name: string; path: string }>
-  fileAttachments: Array<{ label: string; path: string; fsPath: string }>
-  collaborationMode: 'default' | 'plan'
-}
-
-type ThreadQueueState = Record<string, StoredQueuedMessage[]>
-
-type BackendQueuedTurn = {
-  threadId: string
-  message: StoredQueuedMessage
-}
-
-type ThreadQueueStateUpdate<T> = {
-  nextState: ThreadQueueState
-  result: T
-}
-
-type ResolvedCollaborationModeSettings = {
-  model: string
-  reasoningEffort: ReasoningEffort | null
-}
-
-function normalizeStoredQueuedMessage(value: unknown): StoredQueuedMessage | null {
-  const record = asRecord(value)
-  if (!record) return null
-
-  const id = typeof record.id === 'string' ? record.id.trim() : ''
-  if (!id) return null
-
-  const normalizeNamedPathItems = (items: unknown): Array<{ name: string; path: string }> => {
-    if (!Array.isArray(items)) return []
-    return items.flatMap((item) => {
-      const itemRecord = asRecord(item)
-      if (!itemRecord) return []
-      const name = typeof itemRecord.name === 'string' ? itemRecord.name.trim() : ''
-      const path = typeof itemRecord.path === 'string' ? itemRecord.path.trim() : ''
-      return name && path ? [{ name, path }] : []
-    })
-  }
-
-  const normalizeFileAttachments = (items: unknown): Array<{ label: string; path: string; fsPath: string }> => {
-    if (!Array.isArray(items)) return []
-    return items.flatMap((item) => {
-      const itemRecord = asRecord(item)
-      if (!itemRecord) return []
-      const label = typeof itemRecord.label === 'string' ? itemRecord.label.trim() : ''
-      const path = typeof itemRecord.path === 'string' ? itemRecord.path.trim() : ''
-      const fsPath = typeof itemRecord.fsPath === 'string' ? itemRecord.fsPath.trim() : ''
-      return label && path && fsPath ? [{ label, path, fsPath }] : []
-    })
-  }
-
-  return {
-    id,
-    text: typeof record.text === 'string' ? record.text : '',
-    imageUrls: normalizeStringArray(record.imageUrls),
-    skills: normalizeNamedPathItems(record.skills),
-    fileAttachments: normalizeFileAttachments(record.fileAttachments),
-    collaborationMode: record.collaborationMode === 'plan' ? 'plan' : 'default',
-  }
-}
-
-function normalizeThreadQueueState(value: unknown): ThreadQueueState {
-  const record = asRecord(value)
-  if (!record) return {}
-
-  const state: ThreadQueueState = {}
-  for (const [threadId, rawMessages] of Object.entries(record)) {
-    const normalizedThreadId = threadId.trim()
-    if (!normalizedThreadId || !Array.isArray(rawMessages)) continue
-    const messages = rawMessages.flatMap((item) => {
-      const message = normalizeStoredQueuedMessage(item)
-      return message ? [message] : []
-    })
-    if (messages.length > 0) {
-      state[normalizedThreadId] = messages
-    }
-  }
-  return state
-}
-
-let threadQueueMutationChain: Promise<unknown> = Promise.resolve()
-
-async function readThreadQueueState(): Promise<ThreadQueueState> {
-  const statePath = getCodexGlobalStatePath()
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    const payload = asRecord(JSON.parse(raw)) ?? {}
-    return normalizeThreadQueueState(payload[THREAD_QUEUE_STATE_KEY])
-  } catch {
-    return {}
-  }
-}
-
-async function writeThreadQueueStateUnlocked(nextState: ThreadQueueState): Promise<void> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    payload = asRecord(JSON.parse(raw)) ?? {}
-  } catch {
-    payload = {}
-  }
-  const normalized = normalizeThreadQueueState(nextState)
-  if (Object.keys(normalized).length > 0) {
-    payload[THREAD_QUEUE_STATE_KEY] = normalized
-  } else {
-    delete payload[THREAD_QUEUE_STATE_KEY]
-  }
-  await writeFile(statePath, JSON.stringify(payload), 'utf8')
-}
-
-async function withThreadQueueStateUpdate<T>(
-  update: (state: ThreadQueueState) => ThreadQueueStateUpdate<T> | Promise<ThreadQueueStateUpdate<T>>,
-): Promise<T> {
-  const run = threadQueueMutationChain.then(async () => {
-    const currentState = await readThreadQueueState()
-    const { nextState, result } = await update(currentState)
-    await writeThreadQueueStateUnlocked(nextState)
-    return result
-  })
-  threadQueueMutationChain = run.catch(() => {})
-  return run
-}
-
-async function writeThreadQueueState(nextState: ThreadQueueState): Promise<void> {
-  await withThreadQueueStateUpdate(() => ({
-    nextState: normalizeThreadQueueState(nextState),
-    result: undefined,
-  }))
-}
-
-async function appendThreadQueuedMessage(threadId: string, message: StoredQueuedMessage): Promise<void> {
-  const normalizedThreadId = threadId.trim()
-  if (!normalizedThreadId) throw new Error('threadId is required')
-  await withThreadQueueStateUpdate((state) => ({
-    nextState: {
-      ...state,
-      [normalizedThreadId]: [...(state[normalizedThreadId] ?? []), message],
-    },
-    result: undefined,
-  }))
-}
-
-function normalizeReasoningEffort(value: unknown): ReasoningEffort | '' {
-  const allowed: ReasoningEffort[] = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh']
-  return typeof value === 'string' && allowed.includes(value as ReasoningEffort)
-    ? (value as ReasoningEffort)
-    : ''
-}
-
-function normalizeCollaborationModeReasoningEffort(value: ReasoningEffort | '' | null | undefined): ReasoningEffort | null {
-  return value && value.length > 0 ? value : null
-}
-
-function extractLocalImagePathFromUrl(value: string): string | null {
-  if (!value) return null
-  try {
-    const parsed = new URL(value, 'http://localhost')
-    if (parsed.pathname !== '/codex-local-image') return null
-    const path = parsed.searchParams.get('path')?.trim() ?? ''
-    return path.length > 0 ? path : null
-  } catch {
-    return null
-  }
-}
-
-function buildTextWithAttachments(prompt: string, files: StoredQueuedMessage['fileAttachments']): string {
-  if (files.length === 0) return prompt
-  let prefix = '# Files mentioned by the user:\n'
-  for (const f of files) {
-    prefix += `\n## ${f.label}: ${f.path}\n`
-  }
-  return `${prefix}\n## My request for Codex:\n\n${prompt}\n`
-}
-
-function escapeHeartbeatXmlText(value: string): string {
-  return value
-    .replace(/&/gu, '&amp;')
-    .replace(/</gu, '&lt;')
-    .replace(/>/gu, '&gt;')
-}
-
-function buildHeartbeatQueuedMessage(automation: ThreadAutomationRecord): StoredQueuedMessage {
-  return {
-    id: `automation-${automation.id}-${Date.now()}-${randomBytes(3).toString('hex')}`,
-    text: `<heartbeat>
-<automation_id>${escapeHeartbeatXmlText(automation.id)}</automation_id>
-<current_time_iso>${new Date().toISOString()}</current_time_iso>
-<instructions>
-${escapeHeartbeatXmlText(automation.prompt)}
-</instructions>
-</heartbeat>`,
-    imageUrls: [],
-    skills: [],
-    fileAttachments: [],
-    collaborationMode: 'default',
-  }
-}
-
-function fileNameFromPath(pathValue: string): string {
-  const normalized = pathValue.replace(/\\/g, '/')
-  const segments = normalized.split('/').filter(Boolean)
-  return segments.at(-1) ?? normalized
-}
-
-function extractThreadIdFromNotificationParams(params: unknown): string {
-  const record = asRecord(params)
-  if (!record) return ''
-  const threadId =
-    (typeof record.threadId === 'string' ? record.threadId : '') ||
-    (typeof record.thread_id === 'string' ? record.thread_id : '') ||
-    (typeof record.conversationId === 'string' ? record.conversationId : '') ||
-    (typeof record.conversation_id === 'string' ? record.conversation_id : '')
-  if (threadId) return threadId
-  const thread = asRecord(record.thread)
-  if (thread && typeof thread.id === 'string') return thread.id
-  const turn = asRecord(record.turn)
-  if (turn) {
-    const turnThreadId =
-      (typeof turn.threadId === 'string' ? turn.threadId : '') ||
-      (typeof turn.thread_id === 'string' ? turn.thread_id : '')
-    if (turnThreadId) return turnThreadId
-  }
-  return ''
-}
-
-function isTurnCompletedNotification(notification: { method: string; params: unknown }): boolean {
-  return notification.method === 'turn/completed'
-}
-
-async function readFirstLaunchPluginsCardDismissed(): Promise<boolean> {
-  const statePath = getCodexGlobalStatePath()
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    const payload = asRecord(JSON.parse(raw)) ?? {}
-    return payload[FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY] === true
-  } catch {
-    return false
-  }
-}
-
-async function writeFirstLaunchPluginsCardDismissed(dismissed: boolean): Promise<void> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    payload = asRecord(JSON.parse(raw)) ?? {}
-  } catch {
-    payload = {}
-  }
-  payload[FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY] = dismissed === true
-  await writeFile(statePath, JSON.stringify(payload), 'utf8')
-}
-
-function getSessionIndexFileSignature(stats: { mtimeMs: number; size: number }): string {
-  return `${String(stats.mtimeMs)}:${String(stats.size)}`
-}
-
-async function parseThreadTitlesFromSessionIndex(sessionIndexPath: string): Promise<ThreadTitleCache> {
-  const latestById = new Map<string, SessionIndexThreadTitle>()
-  const input = createReadStream(sessionIndexPath, { encoding: 'utf8' })
-  const lines = createInterface({
-    input,
-    crlfDelay: Infinity,
-  })
-
-  try {
-    for await (const line of lines) {
-      const trimmed = line.trim()
-      if (!trimmed) continue
-
-      try {
-        const entry = normalizeSessionIndexThreadTitle(JSON.parse(trimmed) as unknown)
-        if (!entry) continue
-
-        const previous = latestById.get(entry.id)
-        if (!previous || entry.updatedAtMs >= previous.updatedAtMs) {
-          latestById.set(entry.id, entry)
-        }
-      } catch {
-        // Skip malformed lines and keep scanning the rest of the index.
-      }
-    }
-  } finally {
-    lines.close()
-    input.close()
-  }
-
-  const entries = Array.from(latestById.values()).sort((first, second) => second.updatedAtMs - first.updatedAtMs)
-  const titles: Record<string, string> = {}
-  const order: string[] = []
-  for (const entry of entries) {
-    titles[entry.id] = entry.title
-    order.push(entry.id)
-  }
-
-  return trimThreadTitleCache({ titles, order })
-}
-
-async function readThreadTitlesFromSessionIndex(): Promise<ThreadTitleCache> {
-  const sessionIndexPath = getCodexSessionIndexPath()
-
-  try {
-    const stats = await stat(sessionIndexPath)
-    const fileSignature = getSessionIndexFileSignature(stats)
-    if (sessionIndexThreadTitleCacheState.fileSignature === fileSignature) {
-      return sessionIndexThreadTitleCacheState.cache
-    }
-
-    const cache = await parseThreadTitlesFromSessionIndex(sessionIndexPath)
-    sessionIndexThreadTitleCacheState = { fileSignature, cache }
-    return cache
-  } catch {
-    sessionIndexThreadTitleCacheState = {
-      fileSignature: 'missing',
-      cache: EMPTY_THREAD_TITLE_CACHE,
-    }
-    return sessionIndexThreadTitleCacheState.cache
-  }
-}
-
-async function readMergedThreadTitleCache(): Promise<ThreadTitleCache> {
-  const [sessionIndexCache, persistedCache] = await Promise.all([
-    readThreadTitlesFromSessionIndex(),
-    readThreadTitleCache(),
-  ])
-  return mergeThreadTitleCaches(persistedCache, sessionIndexCache)
-}
-
-async function readWorkspaceRootsState(): Promise<WorkspaceRootsState> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    const parsed = JSON.parse(raw) as unknown
-    payload = asRecord(parsed) ?? {}
-  } catch {
-    payload = {}
-  }
-
-  return {
-    order: normalizeStringArray(payload['electron-saved-workspace-roots']),
-    labels: normalizeStringRecord(payload['electron-workspace-root-labels']),
-    active: normalizeStringArray(payload['active-workspace-roots']),
-    projectOrder: normalizeStringArray(payload['project-order']),
-    remoteProjects: normalizeRemoteProjects(payload['remote-projects']),
-  }
-}
-
-async function writeWorkspaceRootsState(nextState: WorkspaceRootsState): Promise<void> {
-  const statePath = getCodexGlobalStatePath()
-  let payload: Record<string, unknown> = {}
-  try {
-    const raw = await readFile(statePath, 'utf8')
-    payload = asRecord(JSON.parse(raw)) ?? {}
-  } catch {
-    payload = {}
-  }
-
-  payload['electron-saved-workspace-roots'] = normalizeStringArray(nextState.order)
-  payload['electron-workspace-root-labels'] = normalizeStringRecord(nextState.labels)
-  payload['active-workspace-roots'] = normalizeStringArray(nextState.active)
-  payload['project-order'] = normalizeStringArray(nextState.projectOrder)
-
-  await writeFile(statePath, JSON.stringify(payload), 'utf8')
-}
-
-let workspaceRootsMutation: Promise<void> = Promise.resolve()
-
-function queueWorkspaceRootsMutation<T>(mutation: () => Promise<T>): Promise<T> {
-  const run = workspaceRootsMutation.catch(() => undefined).then(mutation)
-  workspaceRootsMutation = run.then(
-    () => undefined,
-    () => undefined,
-  )
-  return run
-}
-
-function prependUniqueString(value: string, items: string[]): string[] {
-  return [value, ...items.filter((item) => item !== value)]
-}
-
-async function updateWorkspaceRootsState(
-  updater: (existingState: WorkspaceRootsState) => WorkspaceRootsState,
-): Promise<void> {
-  await queueWorkspaceRootsMutation(async () => {
-    const existingState = await readWorkspaceRootsState()
-    await writeWorkspaceRootsState(updater(existingState))
-  })
-}
-
-async function persistWorkspaceRoot(workspaceRoot: string, label = ''): Promise<void> {
-  const normalizedRoot = workspaceRoot.trim()
-  if (!normalizedRoot) return
-
-  await updateWorkspaceRootsState((existingState) => {
-    const nextLabels = { ...existingState.labels }
-    const trimmedLabel = label.trim()
-    if (trimmedLabel.length > 0) {
-      nextLabels[normalizedRoot] = trimmedLabel
-    }
-    return {
-      order: prependUniqueString(normalizedRoot, existingState.order),
-      labels: nextLabels,
-      active: prependUniqueString(normalizedRoot, existingState.active),
-      projectOrder: prependUniqueString(normalizedRoot, existingState.projectOrder),
-      remoteProjects: existingState.remoteProjects,
-    }
-  })
-}
-
-async function rollbackCreatedWorktree(
-  gitRoot: string,
-  worktreeCwd: string,
-  cleanupDirectory?: string,
-  branchName?: string,
-): Promise<void> {
-  try {
-    await runCommand('git', ['worktree', 'remove', '--force', worktreeCwd], { cwd: gitRoot })
-  } catch {
-    await rm(worktreeCwd, { recursive: true, force: true }).catch(() => undefined)
-  }
-
-  if (cleanupDirectory && cleanupDirectory !== worktreeCwd) {
-    await rm(cleanupDirectory, { recursive: true, force: true }).catch(() => undefined)
-  }
-
-  if (branchName) {
-    await runCommand('git', ['branch', '-D', branchName], { cwd: gitRoot }).catch(() => undefined)
-  }
-}
-
-function normalizeTelegramBridgeConfig(value: unknown): TelegramBridgeConfigState {
-  const record = asRecord(value)
-  if (!record) return { botToken: '', chatIds: [], allowedUserIds: [] }
-  const botToken = typeof record.botToken === 'string' ? record.botToken.trim() : ''
-  const rawChatIds = Array.isArray(record.chatIds) ? record.chatIds : []
-  const chatIds = Array.from(new Set(rawChatIds
-    .filter((value): value is number => typeof value === 'number' && Number.isFinite(value))
-    .map((value) => Math.trunc(value)))).slice(0, 50)
-  const rawAllowedUserIds = Array.isArray(record.allowedUserIds) ? record.allowedUserIds : []
-  const allowAllUsers = rawAllowedUserIds.some((value) => typeof value === 'string' && value.trim() === '*')
-  const normalizedAllowedUserIds = Array.from(new Set(rawAllowedUserIds
-    .map((value) => {
-      if (typeof value === 'number' && Number.isFinite(value)) return Math.trunc(value)
-      if (typeof value === 'string') {
-        const normalized = value.trim().replace(/^(telegram|tg):/i, '').trim()
-        if (/^-?\d+$/.test(normalized)) {
-          return Number.parseInt(normalized, 10)
-        }
-      }
-      return Number.NaN
-    })
-    .filter((value) => Number.isFinite(value)))).slice(0, 100)
-  const allowedUserIds: Array<number | '*'> = allowAllUsers
-    ? ['*' as const, ...normalizedAllowedUserIds]
-    : normalizedAllowedUserIds
-  return { botToken, chatIds, allowedUserIds }
-}
-
-async function readTelegramBridgeConfig(): Promise<TelegramBridgeConfigState> {
-  const telegramConfigPath = getTelegramBridgeConfigPath()
-  try {
-    const raw = await readFile(telegramConfigPath, 'utf8')
-    const payload = asRecord(JSON.parse(raw)) ?? {}
-    return normalizeTelegramBridgeConfig(payload)
-  } catch {
-    return { botToken: '', chatIds: [], allowedUserIds: [] }
-  }
-}
-
-async function writeTelegramBridgeConfig(nextState: TelegramBridgeConfigState): Promise<void> {
-  const normalized = normalizeTelegramBridgeConfig(nextState)
-  const telegramConfigPath = getTelegramBridgeConfigPath()
-  await writeFile(telegramConfigPath, JSON.stringify({
-    botToken: normalized.botToken,
-    chatIds: normalized.chatIds,
-    allowedUserIds: normalized.allowedUserIds,
-  }), 'utf8')
-}
-
-let telegramBridgeConfigMutation: Promise<void> = Promise.resolve()
-
-function rememberTelegramChatId(chatId: number): Promise<void> {
-  const normalizedChatId = Math.trunc(chatId)
-  if (!Number.isFinite(normalizedChatId)) return Promise.resolve()
-
-  telegramBridgeConfigMutation = telegramBridgeConfigMutation.then(async () => {
-    const current = await readTelegramBridgeConfig()
-    if (current.chatIds.includes(normalizedChatId)) return
-    const next = {
-      ...current,
-      chatIds: [normalizedChatId, ...current.chatIds].slice(0, 50),
-    }
-    await writeTelegramBridgeConfig(next)
-  })
-  return telegramBridgeConfigMutation
-}
-
-async function readJsonBody(req: IncomingMessage): Promise<unknown> {
-  const raw = await readRawBody(req)
-  if (raw.length === 0) return null
-  const text = raw.toString('utf8').trim()
-  if (text.length === 0) return null
-  return JSON.parse(text) as unknown
-}
-
-async function readRawBody(req: IncomingMessage): Promise<Buffer> {
-  const chunks: Uint8Array[] = []
-  for await (const chunk of req) {
-    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)
-  }
-  return Buffer.concat(chunks)
-}
-
-function bufferIndexOf(buf: Buffer, needle: Buffer, start = 0): number {
-  for (let i = start; i <= buf.length - needle.length; i++) {
-    let match = true
-    for (let j = 0; j < needle.length; j++) {
-      if (buf[i + j] !== needle[j]) { match = false; break }
-    }
-    if (match) return i
-  }
-  return -1
-}
-
-function handleFileUpload(req: IncomingMessage, res: ServerResponse): void {
-  const chunks: Buffer[] = []
-  req.on('data', (chunk: Buffer) => chunks.push(chunk))
-  req.on('end', async () => {
-    try {
-      const body = Buffer.concat(chunks)
-      const contentType = req.headers['content-type'] ?? ''
-      const boundaryMatch = contentType.match(/boundary=(.+)/i)
-      if (!boundaryMatch) { setJson(res, 400, { error: 'Missing multipart boundary' }); return }
-      const boundary = boundaryMatch[1]
-      const boundaryBuf = Buffer.from(`--${boundary}`)
-      const parts: Buffer[] = []
-      let searchStart = 0
-      while (searchStart < body.length) {
-        const idx = body.indexOf(boundaryBuf, searchStart)
-        if (idx < 0) break
-        if (searchStart > 0) parts.push(body.subarray(searchStart, idx))
-        searchStart = idx + boundaryBuf.length
-        if (body[searchStart] === 0x0d && body[searchStart + 1] === 0x0a) searchStart += 2
-      }
-      let fileName = 'uploaded-file'
-      let fileData: Buffer | null = null
-      const headerSep = Buffer.from('\r\n\r\n')
-      for (const part of parts) {
-        const headerEnd = bufferIndexOf(part, headerSep)
-        if (headerEnd < 0) continue
-        const headers = part.subarray(0, headerEnd).toString('utf8')
-        const fnMatch = headers.match(/filename="([^"]+)"/i)
-        if (!fnMatch) continue
-        fileName = fnMatch[1].replace(/[/\\]/g, '_')
-        let end = part.length
-        if (end >= 2 && part[end - 2] === 0x0d && part[end - 1] === 0x0a) end -= 2
-        fileData = part.subarray(headerEnd + 4, end)
-        break
-      }
-      if (!fileData) { setJson(res, 400, { error: 'No file in request' }); return }
-      const uploadDir = join(tmpdir(), 'codex-web-uploads')
-      await mkdir(uploadDir, { recursive: true })
-      const destDir = await mkdtemp(join(uploadDir, 'f-'))
-      const destPath = join(destDir, fileName)
-      await writeFile(destPath, fileData)
-      setJson(res, 200, { path: destPath })
-    } catch (err) {
-      setJson(res, 500, { error: getErrorMessage(err, 'Upload failed') })
-    }
-  })
-  req.on('error', (err: Error) => {
-    setJson(res, 500, { error: getErrorMessage(err, 'Upload stream error') })
-  })
-}
-
-function httpPost(
-  url: string,
-  headers: Record<string, string | number>,
-  body: Buffer,
-): Promise<{ status: number; body: string }> {
-  const doRequest = url.startsWith('http://') ? httpRequest : httpsRequest
-  return new Promise((resolve, reject) => {
-    const req = doRequest(url, { method: 'POST', headers }, (res) => {
-      const chunks: Buffer[] = []
-      res.on('data', (c: Buffer) => chunks.push(c))
-      res.on('end', () => resolve({ status: res.statusCode ?? 500, body: Buffer.concat(chunks).toString('utf8') }))
-      res.on('error', reject)
-    })
-    req.on('error', reject)
-    req.write(body)
-    req.end()
-  })
-}
-
-let curlImpersonateAvailable: boolean | null = null
-
-function curlImpersonatePost(
-  url: string,
-  headers: Record<string, string | number>,
-  body: Buffer,
-): Promise<{ status: number; body: string }> {
-  return new Promise((resolve, reject) => {
-    const args = ['-s', '-w', '\n%{http_code}', '-X', 'POST', url]
-    for (const [k, v] of Object.entries(headers)) {
-      if (k.toLowerCase() === 'content-length') continue
-      args.push('-H', `${k}: ${String(v)}`)
-    }
-    args.push('--data-binary', '@-')
-    const proc = spawn('curl-impersonate-chrome', args, {
-      env: { ...process.env, CURL_IMPERSONATE: 'chrome116' },
-      stdio: ['pipe', 'pipe', 'pipe'],
-    })
-    const chunks: Buffer[] = []
-    proc.stdout.on('data', (c: Buffer) => chunks.push(c))
-    proc.on('error', (e) => {
-      curlImpersonateAvailable = false
-      reject(e)
-    })
-    proc.on('close', (code) => {
-      const raw = Buffer.concat(chunks).toString('utf8')
-      const lastNewline = raw.lastIndexOf('\n')
-      const statusStr = lastNewline >= 0 ? raw.slice(lastNewline + 1).trim() : ''
-      const responseBody = lastNewline >= 0 ? raw.slice(0, lastNewline) : raw
-      const status = parseInt(statusStr, 10) || (code === 0 ? 200 : 500)
-      curlImpersonateAvailable = true
-      resolve({ status, body: responseBody })
-    })
-    proc.stdin.write(body)
-    proc.stdin.end()
-  })
+function readTokenErrorMessage(payload: unknown, fallback: string): string {
+  const record = asRecord(payload)
+  const message = readNonEmptyString(record?.message)
+  if (message) return message
+  const error = record?.error
+  if (typeof error === 'string' && error.trim().length > 0) return error.trim()
+  const nestedError = asRecord(error)
+  return readNonEmptyString(nestedError?.message)
+    || readNonEmptyString(nestedError?.error_description)
+    || readNonEmptyString(record?.error_description)
+    || fallback
 }
 
-async function proxyTranscribe(
-  body: Buffer,
-  contentType: string,
-  authToken: string,
-  accountId?: string,
-): Promise<{ status: number; body: string }> {
-  const chatgptHeaders: Record<string, string | number> = {
-    'Content-Type': contentType,
-    'Content-Length': body.length,
-    Authorization: `Bearer ${authToken}`,
-    originator: 'Codex Desktop',
-    'User-Agent': `Codex Desktop/0.1.0 (${process.platform}; ${process.arch})`,
-  }
-  if (accountId) chatgptHeaders['ChatGPT-Account-Id'] = accountId
-
-  const postFn = curlImpersonateAvailable !== false ? curlImpersonatePost : httpPost
-  let result: { status: number; body: string }
-  try {
-    result = await postFn('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
-  } catch {
-    result = await httpPost('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
-  }
-
-  if (result.status === 403 && result.body.includes('cf_chl')) {
-    if (curlImpersonateAvailable !== false && postFn !== curlImpersonatePost) {
-      try {
-        const ciResult = await curlImpersonatePost('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
-        if (ciResult.status !== 403) return ciResult
-      } catch {}
-    }
-    return { status: 503, body: JSON.stringify({ error: 'Transcription blocked by Cloudflare. Install curl-impersonate-chrome.' }) }
+function readTokenResponseString(payload: Record<string, unknown> | null, ...keys: string[]): string | null {
+  if (!payload) return null
+  for (const key of keys) {
+    const value = readNonEmptyString(payload[key])
+    if (value) return value
   }
-
-  return result
+  return null
 }
 
-function parseConnectorLogoUrl(rawUrl: string): { connectorId: string; theme: 'light' | 'dark' } | null {
-  const trimmed = rawUrl.trim()
-  if (!trimmed.startsWith('connectors://')) return null
-  const rest = trimmed.slice('connectors://'.length)
-  const connectorId = (rest.split(/[/?#]/u)[0] ?? '').trim()
-  if (!connectorId) return null
-  const query = rest.includes('?') ? rest.slice(rest.indexOf('?') + 1).split('#')[0] ?? '' : ''
-  const theme = new URLSearchParams(query).get('theme')?.toLowerCase() === 'dark' ? 'dark' : 'light'
-  return { connectorId, theme }
-}
+export async function refreshChatgptAuthTokensForExternalAuth(
+  params: ChatgptAuthTokensRefreshParams = {},
+): Promise<ChatgptAuthTokensRefreshResponse> {
+  const authPath = getCodexAuthPath()
+  const raw = await readFile(authPath, 'utf8')
+  const auth = JSON.parse(raw) as CodexAuth
+  const currentRefreshToken = auth.tokens?.refresh_token?.trim() ?? ''
+  if (!currentRefreshToken) {
+    throw new Error('No ChatGPT refresh token is available. Please sign in again.')
+  }
 
-async function fetchConnectorLogo(rawUrl: string): Promise<{ contentType: string; body: Buffer }> {
-  const parsed = parseConnectorLogoUrl(rawUrl)
-  if (!parsed) throw new Error('Unsupported connector logo URL')
-  const auth = await readCodexAuth()
-  if (!auth) throw new Error('No auth token available for connector logo')
+  const refreshUrl = process.env.CODEX_REFRESH_TOKEN_URL_OVERRIDE?.trim() || DEFAULT_CODEX_REFRESH_TOKEN_URL
+  const body = new URLSearchParams({
+    grant_type: 'refresh_token',
+    refresh_token: currentRefreshToken,
+    client_id: CODEX_CHATGPT_CLIENT_ID,
+  })
 
-  const endpoint = `https://chatgpt.com/backend-api/aip/connectors/${encodeURIComponent(parsed.connectorId)}/logo?theme=${parsed.theme}`
-  const response = await fetch(endpoint, {
+  const response = await fetch(refreshUrl, {
+    method: 'POST',
     headers: {
-      Authorization: `Bearer ${auth.accessToken}`,
-      originator: 'Codex Desktop',
-      'User-Agent': `Codex Desktop/0.1.0 (${process.platform}; ${process.arch})`,
-      ...(auth.accountId ? { 'ChatGPT-Account-Id': auth.accountId } : {}),
+      'Content-Type': 'application/x-www-form-urlencoded',
     },
-    signal: AbortSignal.timeout(10_000),
+    body: body.toString(),
+    signal: AbortSignal.timeout(25_000),
   })
-  if (!response.ok) throw new Error(`Connector logo fetch failed (${response.status})`)
-
-  const contentType = response.headers.get('content-type') ?? ''
-  if (contentType.includes('application/json')) {
-    const payload = asRecord(await response.json())
-    const body = asRecord(payload?.body)
-    const base64 = readNonEmptyString(body?.base64)
-    const nestedContentType = readNonEmptyString(body?.contentType) ?? readNonEmptyString(body?.content_type)
-    if (!base64 || !nestedContentType) throw new Error('Connector logo response was missing image data')
-    return { contentType: nestedContentType, body: Buffer.from(base64, 'base64') }
-  }
-
-  return {
-    contentType: contentType || 'image/png',
-    body: Buffer.from(await response.arrayBuffer()),
-  }
-}
-
-const STREAM_EVENT_BUFFER_LIMIT = 400
-
-type StreamEventFrame = {
-  method: string
-  params: unknown
-  atIso: string
-}
-
-type CapturedItem = {
-  id: string
-  type: string
-  turnId: string
-  data: Record<string, unknown>
-  completed: boolean
-}
-
-const MERGEABLE_ITEM_TYPES = new Set([
-  'commandExecution',
-  'fileChange',
-])
-
-class AppServerProcess {
-  private process: ChildProcessWithoutNullStreams | null = null
-  private initialized = false
-  private initializePromise: Promise<void> | null = null
-  private readBuffer = ''
-  private nextId = 1
-  private stopping = false
-  private readonly pending = new Map<number, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>()
-  private readonly notificationListeners = new Set<(value: { method: string; params: unknown }) => void>()
-  private readonly pendingServerRequests = new Map<number, PendingServerRequest>()
-  private readonly appServerArgs = buildAppServerArgs()
-  private readonly streamEventsByThreadId = new Map<string, StreamEventFrame[]>()
-  private readonly lastThreadReadSnapshotByThreadId = new Map<string, unknown>()
-  private readonly threadTurnPageReadCacheByThreadId = new Map<string, { result: unknown; expiresAt: number }>()
-  private readonly threadTurnPageReadPromiseByThreadId = new Map<string, Promise<unknown>>()
-  private readonly capturedItemsByThreadId = new Map<string, Map<string, CapturedItem>>()
-  private readonly liveStateCache = new Map<string, { data: unknown; turnCount: number; sessionSize: number }>()
-  private chatgptAuthRefreshPromise: Promise<ChatgptAuthTokensRefreshResponse> | null = null
-
-
-  private getCodexCommand(): string {
-    const codexCommand = resolveCodexCommand()
-    if (!codexCommand) {
-      throw new Error('Codex CLI is not available. Install @openai/codex or set CODEXUI_CODEX_COMMAND.')
-    }
-    return codexCommand
-  }
-
-  private buildAppServerConfig(): { args: string[]; env: Record<string, string> } {
-    const args = [
-      'app-server',
-      '-c', 'approval_policy="never"',
-      '-c', 'sandbox_mode="danger-full-access"',
-    ]
-    let extraEnv: Record<string, string> = {}
-    const serverPort = parseInt(process.env.CODEXUI_SERVER_PORT ?? '', 10) || undefined
-    const statePath = join(getCodexHomeDir(), FREE_MODE_STATE_FILE)
-    try {
-      const state = ensureDefaultFreeModeStateForMissingAuthSync(statePath)
-      if (state) {
-        args.push(...getFreeModeConfigArgs(state, serverPort))
-        extraEnv = getFreeModeEnvVars(state)
-      }
-    } catch {
-      // No free-mode state or invalid — use defaults
-    }
-    return { args, env: extraEnv }
-  }
-
-  private start(): void {
-    if (this.process) return
-
-    this.stopping = false
-    const config = this.buildAppServerConfig()
-    const invocation = getSpawnInvocation(this.getCodexCommand(), config.args)
-    const spawnEnv = Object.keys(config.env).length > 0
-      ? { ...process.env, ...config.env }
-      : undefined
-    const proc = spawn(invocation.command, invocation.args, { stdio: ['pipe', 'pipe', 'pipe'], ...(spawnEnv ? { env: spawnEnv } : {}) })
-    this.process = proc
-
-    proc.stdout.setEncoding('utf8')
-    proc.stdout.on('data', (chunk: string) => {
-      this.readBuffer += chunk
-
-      let lineEnd = this.readBuffer.indexOf('\n')
-      while (lineEnd !== -1) {
-        const line = this.readBuffer.slice(0, lineEnd).trim()
-        this.readBuffer = this.readBuffer.slice(lineEnd + 1)
-
-        if (line.length > 0) {
-          this.handleLine(line)
-        }
-
-        lineEnd = this.readBuffer.indexOf('\n')
-      }
-    })
-
-    proc.stderr.setEncoding('utf8')
-    proc.stderr.on('data', () => {
-      // Keep stderr silent in dev middleware; JSON-RPC errors are forwarded via responses.
-    })
-
-    proc.on('exit', () => {
-      if (this.process !== proc) {
-        return
-      }
-
-      const failure = new Error(this.stopping ? 'codex app-server stopped' : 'codex app-server exited unexpectedly')
-      for (const request of this.pending.values()) {
-        request.reject(failure)
-      }
-
-      this.pending.clear()
-      this.pendingServerRequests.clear()
-      this.process = null
-      this.initialized = false
-      this.initializePromise = null
-      this.readBuffer = ''
-    })
-  }
-
-  private sendLine(payload: Record<string, unknown>): void {
-    if (!this.process) {
-      throw new Error('codex app-server is not running')
-    }
-
-    this.process.stdin.write(`${JSON.stringify(payload)}\n`)
-  }
-
-  private handleLine(line: string): void {
-    let message: JsonRpcResponse
-    try {
-      message = JSON.parse(line) as JsonRpcResponse
-    } catch {
-      return
-    }
-
-    if (typeof message.id === 'number' && this.pending.has(message.id)) {
-      const pendingRequest = this.pending.get(message.id)
-      this.pending.delete(message.id)
-
-      if (!pendingRequest) return
-
-      if (message.error) {
-        pendingRequest.reject(new Error(message.error.message))
-      } else {
-        pendingRequest.resolve(message.result)
-      }
-      return
-    }
-
-    if (typeof message.method === 'string' && typeof message.id !== 'number') {
-      this.emitNotification({
-        method: message.method,
-        params: message.params ?? null,
-      })
-      return
-    }
-
-    // Handle server-initiated JSON-RPC requests (approvals, dynamic tool calls, etc.).
-    if (typeof message.id === 'number' && typeof message.method === 'string') {
-      this.handleServerRequest(message.id, message.method, message.params ?? null)
-    }
-  }
-
-  private emitNotification(notification: { method: string; params: unknown }): void {
-    this.recordStreamEvent(notification)
-    this.captureItemFromNotification(notification)
-    const nThreadId = this.extractThreadIdFromParams(notification.params)
-    if (nThreadId) {
-      this.invalidateLiveStateCache(nThreadId)
-      this.threadTurnPageReadCacheByThreadId.delete(nThreadId)
-    }
-    for (const listener of this.notificationListeners) {
-      listener(notification)
-    }
-  }
-
-  private extractThreadIdFromParams(params: unknown): string {
-    const record = asRecord(params)
-    if (!record) return ''
-    const threadId =
-      (typeof record.threadId === 'string' ? record.threadId : '') ||
-      (typeof record.thread_id === 'string' ? record.thread_id : '') ||
-      (typeof record.conversationId === 'string' ? record.conversationId : '') ||
-      (typeof record.conversation_id === 'string' ? record.conversation_id : '')
-    if (threadId) return threadId
-    const thread = asRecord(record.thread)
-    if (thread && typeof thread.id === 'string') return thread.id
-    const turn = asRecord(record.turn)
-    if (turn) {
-      const turnThreadId =
-        (typeof turn.threadId === 'string' ? turn.threadId : '') ||
-        (typeof turn.thread_id === 'string' ? turn.thread_id : '')
-      if (turnThreadId) return turnThreadId
-    }
-    return ''
-  }
-
-  private recordStreamEvent(notification: { method: string; params: unknown }): void {
-    const threadId = this.extractThreadIdFromParams(notification.params)
-    if (!threadId) return
-    const frame: StreamEventFrame = {
-      method: notification.method,
-      params: notification.params,
-      atIso: new Date().toISOString(),
-    }
-    let buffer = this.streamEventsByThreadId.get(threadId)
-    if (!buffer) {
-      buffer = []
-      this.streamEventsByThreadId.set(threadId, buffer)
-    }
-    buffer.push(frame)
-    if (buffer.length > STREAM_EVENT_BUFFER_LIMIT) {
-      buffer.splice(0, buffer.length - STREAM_EVENT_BUFFER_LIMIT)
-    }
-  }
-
-  getStreamEvents(threadId: string, limit: number): StreamEventFrame[] {
-    const buffer = this.streamEventsByThreadId.get(threadId)
-    if (!buffer || buffer.length === 0) return []
-    return buffer.slice(-limit)
-  }
-
-  storeThreadReadSnapshot(threadId: string, snapshot: unknown): void {
-    this.lastThreadReadSnapshotByThreadId.set(threadId, snapshot)
-    this.threadTurnPageReadCacheByThreadId.delete(threadId)
-  }
-
-  getLastThreadReadSnapshot(threadId: string): unknown | null {
-    return this.lastThreadReadSnapshotByThreadId.get(threadId) ?? null
-  }
-
-  async readThreadForTurnPage(threadId: string): Promise<unknown> {
-    const now = Date.now()
-    const cached = this.threadTurnPageReadCacheByThreadId.get(threadId)
-    if (cached && cached.expiresAt > now) return cached.result
-    if (cached) this.threadTurnPageReadCacheByThreadId.delete(threadId)
-
-    const pending = this.threadTurnPageReadPromiseByThreadId.get(threadId)
-    if (pending) return pending
-
-    const promise = this.rpc('thread/read', {
-      threadId,
-      includeTurns: true,
-    }).then((result) => {
-      this.threadTurnPageReadCacheByThreadId.set(threadId, {
-        result,
-        expiresAt: Date.now() + THREAD_TURN_PAGE_READ_CACHE_TTL_MS,
-      })
-      return result
-    }).finally(() => {
-      this.threadTurnPageReadPromiseByThreadId.delete(threadId)
-    })
-
-    this.threadTurnPageReadPromiseByThreadId.set(threadId, promise)
-    return promise
-  }
-
-  cacheLiveState(threadId: string, data: unknown, turnCount: number, sessionSize: number): void {
-    this.liveStateCache.set(threadId, { data, turnCount, sessionSize })
-  }
-
-  getCachedLiveState(threadId: string, turnCount: number, sessionSize: number): unknown | null {
-    const cached = this.liveStateCache.get(threadId)
-    if (!cached) return null
-    if (cached.turnCount !== turnCount || cached.sessionSize !== sessionSize) return null
-    return cached.data
-  }
-
-  invalidateLiveStateCache(threadId: string): void {
-    this.liveStateCache.delete(threadId)
-  }
-
-  private captureItemFromNotification(notification: { method: string; params: unknown }): void {
-    if (notification.method !== 'item/started' && notification.method !== 'item/completed') return
-
-    const params = asRecord(notification.params)
-    if (!params) return
-    const item = asRecord(params.item)
-    if (!item) return
-    const itemType = typeof item.type === 'string' ? item.type : ''
-    if (!MERGEABLE_ITEM_TYPES.has(itemType)) return
-
-    const itemId = typeof item.id === 'string' ? item.id : ''
-    if (!itemId) return
-
-    const threadId = this.extractThreadIdFromParams(params)
-    if (!threadId) return
-
-    const turnId =
-      (typeof params.turnId === 'string' ? params.turnId : '') ||
-      (typeof params.turn_id === 'string' ? params.turn_id : '')
-    if (!turnId) return
-
-    let threadItems = this.capturedItemsByThreadId.get(threadId)
-    if (!threadItems) {
-      threadItems = new Map()
-      this.capturedItemsByThreadId.set(threadId, threadItems)
-    }
-
-    const isCompleted = notification.method === 'item/completed'
-    const existing = threadItems.get(itemId)
-
-    if (existing && existing.completed && !isCompleted) return
-
-    threadItems.set(itemId, {
-      id: itemId,
-      type: itemType,
-      turnId,
-      data: item as Record<string, unknown>,
-      completed: isCompleted,
-    })
-  }
-
-  mergeItemsIntoTurns(threadId: string, turns: unknown[]): unknown[] {
-    const capturedMap = this.capturedItemsByThreadId.get(threadId)
-    if (!capturedMap || capturedMap.size === 0) return turns
-
-    const itemsByTurnId = new Map<string, CapturedItem[]>()
-    for (const captured of capturedMap.values()) {
-      let group = itemsByTurnId.get(captured.turnId)
-      if (!group) {
-        group = []
-        itemsByTurnId.set(captured.turnId, group)
-      }
-      group.push(captured)
-    }
-
-    return turns.map((turn) => {
-      const turnRecord = asRecord(turn)
-      if (!turnRecord) return turn
-      const turnId = typeof turnRecord.id === 'string' ? turnRecord.id : ''
-      if (!turnId) return turn
-
-      const captured = itemsByTurnId.get(turnId)
-      if (!captured || captured.length === 0) return turn
-
-      const existingItems = Array.isArray(turnRecord.items) ? (turnRecord.items as Record<string, unknown>[]) : []
-      const existingIds = new Set(existingItems.map((it) => (typeof it.id === 'string' ? it.id : '')).filter(Boolean))
-
-      const newItems = captured
-        .filter((c) => !existingIds.has(c.id))
-        .map((c) => c.data)
-
-      if (newItems.length === 0) return turn
-
-      return {
-        ...turnRecord,
-        items: [...existingItems, ...newItems],
-      }
-    })
-  }
-
-  private sendServerRequestReply(requestId: number, reply: ServerRequestReply): void {
-    if (reply.error) {
-      this.sendLine({
-        jsonrpc: '2.0',
-        id: requestId,
-        error: reply.error,
-      })
-      return
-    }
-
-    this.sendLine({
-      jsonrpc: '2.0',
-      id: requestId,
-      result: reply.result ?? {},
-    })
-  }
-
-  private resolvePendingServerRequest(requestId: number, reply: ServerRequestReply): void {
-    const pendingRequest = this.pendingServerRequests.get(requestId)
-    if (!pendingRequest) {
-      throw new Error(`No pending server request found for id ${String(requestId)}`)
-    }
-    this.pendingServerRequests.delete(requestId)
-
-    this.sendServerRequestReply(requestId, reply)
-    const requestParams = asRecord(pendingRequest.params)
-    const threadId =
-      typeof requestParams?.threadId === 'string' && requestParams.threadId.length > 0
-        ? requestParams.threadId
-        : ''
-    this.emitNotification({
-      method: 'server/request/resolved',
-      params: {
-        id: requestId,
-        method: pendingRequest.method,
-        threadId,
-        mode: 'manual',
-        resolvedAtIso: new Date().toISOString(),
-      },
-    })
-  }
-
-  private async refreshChatgptAuthTokens(params: ChatgptAuthTokensRefreshParams): Promise<ChatgptAuthTokensRefreshResponse> {
-    if (!this.chatgptAuthRefreshPromise) {
-      this.chatgptAuthRefreshPromise = refreshChatgptAuthTokensForExternalAuth(params).finally(() => {
-        this.chatgptAuthRefreshPromise = null
-      })
-    }
-    return await this.chatgptAuthRefreshPromise
-  }
-
-  private async handleChatgptAuthTokensRefreshRequest(requestId: number, params: unknown): Promise<void> {
-    const requestParams = asRecord(params)
-    const previousAccountId = readNonEmptyString(requestParams?.previousAccountId ?? requestParams?.previous_account_id)
-    try {
-      const result = await this.refreshChatgptAuthTokens({
-        reason: readNonEmptyString(requestParams?.reason) || undefined,
-        previousAccountId: previousAccountId || undefined,
-      })
-      this.sendServerRequestReply(requestId, { result })
-      this.emitNotification({
-        method: 'server/request/resolved',
-        params: {
-          id: requestId,
-          method: 'account/chatgptAuthTokens/refresh',
-          mode: 'automatic',
-          resolvedAtIso: new Date().toISOString(),
-        },
-      })
-    } catch (error) {
-      this.sendServerRequestReply(requestId, {
-        error: {
-          code: -32001,
-          message: getErrorMessage(error, 'Failed to refresh ChatGPT auth tokens'),
-        },
-      })
-    }
-  }
-
-  private handleServerRequest(requestId: number, method: string, params: unknown): void {
-    if (method === 'account/chatgptAuthTokens/refresh') {
-      void this.handleChatgptAuthTokensRefreshRequest(requestId, params)
-      return
-    }
-
-    const pendingRequest: PendingServerRequest = {
-      id: requestId,
-      method,
-      params,
-      receivedAtIso: new Date().toISOString(),
-    }
-    this.pendingServerRequests.set(requestId, pendingRequest)
-
-    this.emitNotification({
-      method: 'server/request',
-      params: pendingRequest,
-    })
-  }
-
-  private async call(method: string, params: unknown): Promise<unknown> {
-    this.start()
-    const id = this.nextId++
-
-    return new Promise((resolve, reject) => {
-      this.pending.set(id, { resolve, reject })
-
-      this.sendLine({
-        jsonrpc: '2.0',
-        id,
-        method,
-        params,
-      } satisfies JsonRpcCall)
-    })
-  }
-
-  private async ensureInitialized(): Promise<void> {
-    if (this.initialized) return
-    if (this.initializePromise) {
-      await this.initializePromise
-      return
-    }
-
-    this.initializePromise = this.call('initialize', {
-      clientInfo: {
-        name: 'codex-web-local',
-        version: '0.1.0',
-      },
-      capabilities: {
-        experimentalApi: true,
-      },
-    }).then(() => {
-      this.sendLine({
-        jsonrpc: '2.0',
-        method: 'initialized',
-      })
-      this.initialized = true
-    }).finally(() => {
-      this.initializePromise = null
-    })
-
-    await this.initializePromise
-  }
-
-  async rpc(method: string, params: unknown): Promise<unknown> {
-    await this.ensureInitialized()
-    return this.call(method, params)
-  }
-
-  onNotification(listener: (value: { method: string; params: unknown }) => void): () => void {
-    this.notificationListeners.add(listener)
-    return () => {
-      this.notificationListeners.delete(listener)
-    }
-  }
-
-  async respondToServerRequest(payload: unknown): Promise<void> {
-    await this.ensureInitialized()
-
-    const body = asRecord(payload)
-    if (!body) {
-      throw new Error('Invalid response payload: expected object')
-    }
-
-    const id = body.id
-    if (typeof id !== 'number' || !Number.isInteger(id)) {
-      throw new Error('Invalid response payload: "id" must be an integer')
-    }
-
-    const rawError = asRecord(body.error)
-    if (rawError) {
-      const message = typeof rawError.message === 'string' && rawError.message.trim().length > 0
-        ? rawError.message.trim()
-        : 'Server request rejected by client'
-      const code = typeof rawError.code === 'number' && Number.isFinite(rawError.code)
-        ? Math.trunc(rawError.code)
-        : -32000
-      this.resolvePendingServerRequest(id, { error: { code, message } })
-      return
-    }
-
-    if (!('result' in body)) {
-      throw new Error('Invalid response payload: expected "result" or "error"')
-    }
-
-    this.resolvePendingServerRequest(id, { result: body.result })
-  }
-
-  listPendingServerRequests(): PendingServerRequest[] {
-    return Array.from(this.pendingServerRequests.values())
-  }
-
-  dispose(): void {
-    if (!this.process) return
-
-    const proc = this.process
-    this.stopping = true
-    this.process = null
-    this.initialized = false
-    this.initializePromise = null
-    this.readBuffer = ''
-
-    const failure = new Error('codex app-server stopped')
-    for (const request of this.pending.values()) {
-      request.reject(failure)
-    }
-    this.pending.clear()
-    this.pendingServerRequests.clear()
-
-    try {
-      proc.stdin.end()
-    } catch {
-      // ignore close errors on shutdown
-    }
-
-    try {
-      proc.kill('SIGTERM')
-    } catch {
-      // ignore kill errors on shutdown
-    }
-
-    const forceKillTimer = setTimeout(() => {
-      if (!proc.killed) {
-        try {
-          proc.kill('SIGKILL')
-        } catch {
-          // ignore kill errors on shutdown
-        }
-      }
-    }, 1500)
-    forceKillTimer.unref()
-  }
-}
-
-export class BackendQueueProcessor {
-  private readonly processingThreadIds = new Set<string>()
-  private readonly queueDrainTimersByThreadId = new Map<string, ReturnType<typeof setTimeout>>()
-  private readonly queueDrainDueAtByThreadId = new Map<string, number>()
-  private readonly unsubscribe: () => void
-
-  constructor(private readonly appServer: AppServerProcess) {
-    this.unsubscribe = appServer.onNotification((notification) => {
-      if (!isTurnCompletedNotification(notification)) return
-      const threadId = extractThreadIdFromNotificationParams(notification.params)
-      if (!threadId) return
-      void this.processThreadQueue(threadId)
-    })
-    void this.scheduleAllQueuedThreads(1000)
-  }
-
-  dispose(): void {
-    this.unsubscribe()
-    for (const timer of this.queueDrainTimersByThreadId.values()) {
-      clearTimeout(timer)
-    }
-    this.queueDrainTimersByThreadId.clear()
-    this.queueDrainDueAtByThreadId.clear()
-    this.processingThreadIds.clear()
-  }
-
-  async scheduleAllQueuedThreads(delayMs = 0): Promise<void> {
-    try {
-      const state = await readThreadQueueState()
-      for (const threadId of Object.keys(state)) {
-        this.scheduleThreadQueueDrain(threadId, delayMs)
-      }
-    } catch {
-      // Queue recovery is best-effort; normal turn-completed events can still drain later.
-    }
-  }
 
-  scheduleThreadQueueDrain(threadId: string, delayMs = 5000): void {
-    if (!threadId) return
-    const normalizedDelayMs = Math.max(0, delayMs)
-    const nextDueAt = Date.now() + normalizedDelayMs
-    const existingDueAt = this.queueDrainDueAtByThreadId.get(threadId)
-    const existingTimer = this.queueDrainTimersByThreadId.get(threadId)
-    if (existingTimer) {
-      if (existingDueAt !== undefined && existingDueAt <= nextDueAt) return
-      clearTimeout(existingTimer)
-      this.queueDrainTimersByThreadId.delete(threadId)
-      this.queueDrainDueAtByThreadId.delete(threadId)
-    }
-    const timer = setTimeout(() => {
-      this.queueDrainTimersByThreadId.delete(threadId)
-      this.queueDrainDueAtByThreadId.delete(threadId)
-      void this.processThreadQueue(threadId)
-    }, normalizedDelayMs)
-    timer.unref?.()
-    this.queueDrainTimersByThreadId.set(threadId, timer)
-    this.queueDrainDueAtByThreadId.set(threadId, nextDueAt)
+  const text = await response.text()
+  let payload: Record<string, unknown> | null = null
+  try {
+    payload = asRecord(JSON.parse(text))
+  } catch {
+    payload = null
   }
 
-  async processThreadQueue(threadId: string): Promise<void> {
-    if (this.processingThreadIds.has(threadId)) return
-    this.processingThreadIds.add(threadId)
-    try {
-      const canStart = await this.canStartQueuedTurn(threadId)
-      if (!canStart) {
-        if (await this.hasQueuedTurns(threadId)) {
-          this.scheduleThreadQueueDrain(threadId)
-        }
-        return
-      }
-      const next = await this.popNextQueuedTurn(threadId)
-      if (!next) return
-      try {
-        await this.startQueuedTurn(next)
-        if (await this.hasQueuedTurns(threadId)) {
-          this.scheduleThreadQueueDrain(threadId)
-        }
-      } catch {
-        await this.restoreQueuedTurn(next)
-        this.scheduleThreadQueueDrain(threadId)
-      }
-    } catch {
-      // Queue processing is best-effort. Keep the bridge alive if app-server is unavailable.
-      this.scheduleThreadQueueDrain(threadId)
-    } finally {
-      this.processingThreadIds.delete(threadId)
-    }
+  if (!response.ok) {
+    throw new Error(readTokenErrorMessage(payload, `ChatGPT token refresh failed with HTTP ${String(response.status)}`))
   }
 
-  private async hasQueuedTurns(threadId: string): Promise<boolean> {
-    const state = await readThreadQueueState()
-    const queue = state[threadId]
-    return Array.isArray(queue) && queue.length > 0
+  const accessToken = readTokenResponseString(payload, 'access_token', 'accessToken')
+  if (!accessToken) {
+    throw new Error('ChatGPT token refresh response did not include an access token.')
   }
 
-  private async canStartQueuedTurn(threadId: string): Promise<boolean> {
-    const response = asRecord(await this.appServer.rpc('thread/read', { threadId, includeTurns: true }))
-    const thread = asRecord(response?.thread)
-    if (!thread) return false
-
-    const status = asRecord(thread.status)
-    const statusType = readNonEmptyString(status?.type)
-    if (statusType === 'inProgress' || statusType === 'running' || statusType === 'active') return false
-
-    const turns = Array.isArray(thread.turns) ? thread.turns : []
-    return !turns.some((turn) => readNonEmptyString(asRecord(turn)?.status) === 'inProgress')
+  const nextRefreshToken = readTokenResponseString(payload, 'refresh_token', 'refreshToken') ?? currentRefreshToken
+  const nextIdToken = readTokenResponseString(payload, 'id_token', 'idToken') ?? auth.tokens?.id_token
+  const metadata = extractChatgptTokenMetadata(accessToken)
+  const chatgptAccountId =
+    metadata.chatgptAccountId
+    || readTokenResponseString(payload, 'chatgpt_account_id', 'chatgptAccountId')
+    || readNonEmptyString(params.previousAccountId)
+    || readNonEmptyString(auth.tokens?.account_id)
+  if (!chatgptAccountId) {
+    throw new Error('ChatGPT token refresh response did not include account metadata.')
   }
 
-  private async popNextQueuedTurn(threadId: string): Promise<BackendQueuedTurn | null> {
-    return withThreadQueueStateUpdate((state) => {
-      const queue = state[threadId]
-      if (!queue || queue.length === 0) {
-        return { nextState: state, result: null }
-      }
-
-      const [message, ...rest] = queue
-      const nextState = { ...state }
-      if (rest.length > 0) {
-        nextState[threadId] = rest
-      } else {
-        delete nextState[threadId]
-      }
-      return { nextState, result: { threadId, message } }
-    })
+  const nextAuth: CodexAuth = {
+    ...auth,
+    auth_mode: auth.auth_mode || 'chatgpt',
+    last_refresh: Date.now(),
+    tokens: {
+      ...auth.tokens,
+      access_token: accessToken,
+      refresh_token: nextRefreshToken,
+      account_id: chatgptAccountId,
+      ...(nextIdToken ? { id_token: nextIdToken } : {}),
+    },
   }
+  await writeFile(authPath, JSON.stringify(nextAuth, null, 2), { encoding: 'utf8', mode: 0o600 })
 
-  private async restoreQueuedTurn(turn: BackendQueuedTurn): Promise<void> {
-    await withThreadQueueStateUpdate((state) => {
-      const queue = state[turn.threadId] ?? []
-      return {
-        nextState: {
-          ...state,
-          [turn.threadId]: [turn.message, ...queue],
-        },
-        result: undefined,
-      }
-    })
+  return {
+    accessToken,
+    chatgptAccountId,
+    chatgptPlanType: metadata.chatgptPlanType,
   }
+}
 
-  private async resolveCollaborationModeSettings(mode: CollaborationModeKind): Promise<ResolvedCollaborationModeSettings> {
-    let currentConfig: Record<string, unknown> | null = null
-    try {
-      const configPayload = asRecord(await this.appServer.rpc('config/read', {}))
-      currentConfig = asRecord(configPayload?.config)
-    } catch {
-      currentConfig = null
-    }
-
-    const configuredModel = readNonEmptyString(currentConfig?.model)
-    if (configuredModel) {
-      return {
-        model: configuredModel,
-        reasoningEffort: normalizeCollaborationModeReasoningEffort(normalizeReasoningEffort(currentConfig?.model_reasoning_effort)),
-      }
-    }
-
-    try {
-      const modelsPayload = asRecord(await this.appServer.rpc('model/list', {}))
-      const models = Array.isArray(modelsPayload?.data) ? modelsPayload.data : []
-      for (const row of models) {
-        const record = asRecord(row)
-        const candidate = readNonEmptyString(record?.id) || readNonEmptyString(record?.model)
-        if (candidate) {
-          return {
-            model: candidate,
-            reasoningEffort: normalizeCollaborationModeReasoningEffort(normalizeReasoningEffort(currentConfig?.model_reasoning_effort)),
-          }
-        }
-      }
-    } catch {
-      // Fall through to no collaboration-mode payload.
-    }
-
-    throw new Error(`${mode === 'plan' ? 'Plan' : 'Default'} mode requires an available model.`)
+async function readCodexAuth(): Promise<{ accessToken: string; accountId?: string } | null> {
+  try {
+    const raw = await readFile(getCodexAuthPath(), 'utf8')
+    const auth = JSON.parse(raw) as CodexAuth
+    const token = auth.tokens?.access_token
+    if (!token) return null
+    return { accessToken: token, accountId: auth.tokens?.account_id ?? undefined }
+  } catch {
+    return null
   }
+}
 
-  private async buildQueuedTurnParams(turn: BackendQueuedTurn): Promise<Record<string, unknown>> {
-    const localImageAttachments: StoredQueuedMessage['fileAttachments'] = []
-    for (const imageUrl of turn.message.imageUrls) {
-      const localImagePath = extractLocalImagePathFromUrl(imageUrl.trim())
-      if (!localImagePath) continue
-      localImageAttachments.push({
-        label: fileNameFromPath(localImagePath),
-        path: localImagePath,
-        fsPath: localImagePath,
-      })
-    }
-
-    const allFileAttachments = [...turn.message.fileAttachments, ...localImageAttachments]
-    const dedupedFileAttachments = allFileAttachments.filter((entry, index) =>
-      allFileAttachments.findIndex((candidate) => candidate.fsPath === entry.fsPath) === index)
-
-    const input: Array<Record<string, unknown>> = [{
-      type: 'text',
-      text: buildTextWithAttachments(turn.message.text, dedupedFileAttachments),
-    }]
-
-    for (const imageUrl of turn.message.imageUrls) {
-      const normalizedUrl = imageUrl.trim()
-      if (!normalizedUrl) continue
-      const localImagePath = extractLocalImagePathFromUrl(normalizedUrl)
-      if (localImagePath) {
-        input.push({ type: 'localImage', path: localImagePath })
-      } else {
-        input.push({ type: 'image', url: normalizedUrl, image_url: normalizedUrl })
-      }
-    }
-
-    for (const skill of turn.message.skills) {
-      input.push({ type: 'skill', name: skill.name, path: skill.path })
-    }
-
-    const params: Record<string, unknown> = {
-      threadId: turn.threadId,
-      input,
-    }
-    if (dedupedFileAttachments.length > 0) {
-      params.attachments = dedupedFileAttachments.map((f) => ({ label: f.label, path: f.path, fsPath: f.fsPath }))
-    }
-
-    try {
-      const settings = await this.resolveCollaborationModeSettings(turn.message.collaborationMode)
-      params.collaborationMode = {
-        mode: turn.message.collaborationMode,
-        settings: {
-          model: settings.model,
-          reasoning_effort: settings.reasoningEffort,
-          developer_instructions: null,
-        },
-      }
-    } catch {
-      // Older app-server versions still accept a plain turn/start without collaborationMode.
-    }
-
-    return params
+function hasUsableCodexAuthSync(): boolean {
+  try {
+    const raw = readFileSync(getCodexAuthPath(), 'utf8')
+    const auth = JSON.parse(raw) as CodexAuth
+    return Boolean(auth.tokens?.access_token?.trim())
+  } catch {
+    return false
   }
+}
 
-  private async startQueuedTurn(turn: BackendQueuedTurn): Promise<void> {
-    await this.appServer.rpc('thread/resume', { threadId: turn.threadId })
-    await this.appServer.rpc('turn/start', await this.buildQueuedTurnParams(turn))
+function readFreeModeStateSync(statePath: string): FreeModeState | null {
+  try {
+    return JSON.parse(readFileSync(statePath, 'utf8')) as FreeModeState
+  } catch {
+    return null
   }
 }
 
-class MethodCatalog {
-  private methodCache: string[] | null = null
-  private notificationCache: string[] | null = null
-
-  private async runGenerateSchemaCommand(outDir: string): Promise<void> {
-    await new Promise<void>((resolve, reject) => {
-      const codexCommand = resolveCodexCommand()
-      if (!codexCommand) {
-        reject(new Error('Codex CLI is not available. Install @openai/codex or set CODEXUI_CODEX_COMMAND.'))
-        return
-      }
-
-      const invocation = getSpawnInvocation(codexCommand, ['app-server', 'generate-json-schema', '--out', outDir])
-      const process = spawn(invocation.command, invocation.args, {
-        stdio: ['ignore', 'ignore', 'pipe'],
-      })
+function ensureDefaultFreeModeStateForMissingAuthSync(statePath: string): FreeModeState | null {
+  const current = readFreeModeStateSync(statePath)
+  if (!shouldCreateDefaultFreeModeStateForMissingAuth(current, hasUsableCodexAuthSync())) {
+    return current
+  }
 
-      let stderr = ''
+  const fallback = createDefaultOpenCodeZenFreeModeState()
 
-      process.stderr.setEncoding('utf8')
-      process.stderr.on('data', (chunk: string) => {
-        stderr += chunk
-      })
+  mkdirSync(dirname(statePath), { recursive: true })
+  writeFileSync(statePath, JSON.stringify(fallback), { encoding: 'utf8', mode: 0o600 })
+  return fallback
+}
 
-      process.on('error', reject)
-      process.on('exit', (code) => {
-        if (code === 0) {
-          resolve()
-          return
-        }
+function isLoopbackRemoteAddress(remoteAddress: string | undefined): boolean {
+  if (!remoteAddress) return false
+  const normalized = remoteAddress.startsWith('::ffff:')
+    ? remoteAddress.slice('::ffff:'.length)
+    : remoteAddress
+  return normalized === '127.0.0.1' || normalized === '::1'
+}
 
-        reject(new Error(stderr.trim() || `generate-json-schema exited with code ${String(code)}`))
-      })
-    })
-  }
+function getCodexGlobalStatePath(): string {
+  return join(getCodexHomeDir(), '.codex-global-state.json')
+}
 
-  private extractMethodsFromClientRequest(payload: unknown): string[] {
-    const root = asRecord(payload)
-    const oneOf = Array.isArray(root?.oneOf) ? root.oneOf : []
-    const methods = new Set<string>()
+function getTelegramBridgeConfigPath(): string {
+  return join(getCodexHomeDir(), 'telegram-bridge.json')
+}
 
-    for (const entry of oneOf) {
-      const row = asRecord(entry)
-      const properties = asRecord(row?.properties)
-      const methodDef = asRecord(properties?.method)
-      const methodEnum = Array.isArray(methodDef?.enum) ? methodDef.enum : []
+function getCodexSessionIndexPath(): string {
+  return join(getCodexHomeDir(), 'session_index.jsonl')
+}
 
-      for (const item of methodEnum) {
-        if (typeof item === 'string' && item.length > 0) {
-          methods.add(item)
-        }
-      }
-    }
+function getCodexAutomationsDir(): string {
+  return join(getCodexHomeDir(), 'automations')
+}
 
-    return Array.from(methods).sort((a, b) => a.localeCompare(b))
+async function rollbackCreatedWorktree(
+  gitRoot: string,
+  worktreeCwd: string,
+  cleanupDirectory?: string,
+  branchName?: string,
+): Promise<void> {
+  try {
+    await runCommand('git', ['worktree', 'remove', '--force', worktreeCwd], { cwd: gitRoot })
+  } catch {
+    await rm(worktreeCwd, { recursive: true, force: true }).catch(() => undefined)
   }
 
-  private extractMethodsFromServerNotification(payload: unknown): string[] {
-    const root = asRecord(payload)
-    const oneOf = Array.isArray(root?.oneOf) ? root.oneOf : []
-    const methods = new Set<string>()
+  if (cleanupDirectory && cleanupDirectory !== worktreeCwd) {
+    await rm(cleanupDirectory, { recursive: true, force: true }).catch(() => undefined)
+  }
 
-    for (const entry of oneOf) {
-      const row = asRecord(entry)
-      const properties = asRecord(row?.properties)
-      const methodDef = asRecord(properties?.method)
-      const methodEnum = Array.isArray(methodDef?.enum) ? methodDef.enum : []
+  if (branchName) {
+    await runCommand('git', ['branch', '-D', branchName], { cwd: gitRoot }).catch(() => undefined)
+  }
+}
 
-      for (const item of methodEnum) {
-        if (typeof item === 'string' && item.length > 0) {
-          methods.add(item)
+function normalizeTelegramBridgeConfig(value: unknown): TelegramBridgeConfigState {
+  const record = asRecord(value)
+  if (!record) return { botToken: '', chatIds: [], allowedUserIds: [] }
+  const botToken = typeof record.botToken === 'string' ? record.botToken.trim() : ''
+  const rawChatIds = Array.isArray(record.chatIds) ? record.chatIds : []
+  const chatIds = Array.from(new Set(rawChatIds
+    .filter((value): value is number => typeof value === 'number' && Number.isFinite(value))
+    .map((value) => Math.trunc(value)))).slice(0, 50)
+  const rawAllowedUserIds = Array.isArray(record.allowedUserIds) ? record.allowedUserIds : []
+  const allowAllUsers = rawAllowedUserIds.some((value) => typeof value === 'string' && value.trim() === '*')
+  const normalizedAllowedUserIds = Array.from(new Set(rawAllowedUserIds
+    .map((value) => {
+      if (typeof value === 'number' && Number.isFinite(value)) return Math.trunc(value)
+      if (typeof value === 'string') {
+        const normalized = value.trim().replace(/^(telegram|tg):/i, '').trim()
+        if (/^-?\d+$/.test(normalized)) {
+          return Number.parseInt(normalized, 10)
         }
       }
-    }
+      return Number.NaN
+    })
+    .filter((value) => Number.isFinite(value)))).slice(0, 100)
+  const allowedUserIds: Array<number | '*'> = allowAllUsers
+    ? ['*' as const, ...normalizedAllowedUserIds]
+    : normalizedAllowedUserIds
+  return { botToken, chatIds, allowedUserIds }
+}
 
-    return Array.from(methods).sort((a, b) => a.localeCompare(b))
+async function readTelegramBridgeConfig(): Promise<TelegramBridgeConfigState> {
+  const telegramConfigPath = getTelegramBridgeConfigPath()
+  try {
+    const raw = await readFile(telegramConfigPath, 'utf8')
+    const payload = asRecord(JSON.parse(raw)) ?? {}
+    return normalizeTelegramBridgeConfig(payload)
+  } catch {
+    return { botToken: '', chatIds: [], allowedUserIds: [] }
   }
+}
 
-  async listMethods(): Promise<string[]> {
-    if (this.methodCache) {
-      return this.methodCache
-    }
-
-    const outDir = await mkdtemp(join(tmpdir(), 'codex-web-local-schema-'))
-    await this.runGenerateSchemaCommand(outDir)
+async function writeTelegramBridgeConfig(nextState: TelegramBridgeConfigState): Promise<void> {
+  const normalized = normalizeTelegramBridgeConfig(nextState)
+  const telegramConfigPath = getTelegramBridgeConfigPath()
+  await writeFile(telegramConfigPath, JSON.stringify({
+    botToken: normalized.botToken,
+    chatIds: normalized.chatIds,
+    allowedUserIds: normalized.allowedUserIds,
+  }), 'utf8')
+}
 
-    const clientRequestPath = join(outDir, 'ClientRequest.json')
-    const raw = await readFile(clientRequestPath, 'utf8')
-    const parsed = JSON.parse(raw) as unknown
-    const methods = this.extractMethodsFromClientRequest(parsed)
+let telegramBridgeConfigMutation: Promise<void> = Promise.resolve()
 
-    this.methodCache = methods
-    return methods
-  }
+function rememberTelegramChatId(chatId: number): Promise<void> {
+  const normalizedChatId = Math.trunc(chatId)
+  if (!Number.isFinite(normalizedChatId)) return Promise.resolve()
 
-  async listNotificationMethods(): Promise<string[]> {
-    if (this.notificationCache) {
-      return this.notificationCache
+  telegramBridgeConfigMutation = telegramBridgeConfigMutation.then(async () => {
+    const current = await readTelegramBridgeConfig()
+    if (current.chatIds.includes(normalizedChatId)) return
+    const next = {
+      ...current,
+      chatIds: [normalizedChatId, ...current.chatIds].slice(0, 50),
     }
+    await writeTelegramBridgeConfig(next)
+  })
+  return telegramBridgeConfigMutation
+}
 
-    const outDir = await mkdtemp(join(tmpdir(), 'codex-web-local-schema-'))
-    await this.runGenerateSchemaCommand(outDir)
-
-    const serverNotificationPath = join(outDir, 'ServerNotification.json')
-    const raw = await readFile(serverNotificationPath, 'utf8')
-    const parsed = JSON.parse(raw) as unknown
-    const methods = this.extractMethodsFromServerNotification(parsed)
+async function readJsonBody(req: IncomingMessage): Promise<unknown> {
+  const raw = await readRawBody(req)
+  if (raw.length === 0) return null
+  const text = raw.toString('utf8').trim()
+  if (text.length === 0) return null
+  return JSON.parse(text) as unknown
+}
 
-    this.notificationCache = methods
-    return methods
+async function readRawBody(req: IncomingMessage): Promise<Buffer> {
+  const chunks: Uint8Array[] = []
+  for await (const chunk of req) {
+    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)
   }
+  return Buffer.concat(chunks)
 }
 
 type CodexBridgeMiddleware = ((req: IncomingMessage, res: ServerResponse, next: () => void) => Promise<void>) & {
@@ -5525,82 +1034,6 @@ function getSharedBridgeState(): SharedBridgeState {
   return created
 }
 
-async function loadAllThreadsForSearch(appServer: AppServerProcess): Promise<ThreadSearchDocument[]> {
-  const threads: Array<{ id: string; title: string; preview: string }> = []
-  let cursor: string | null = null
-
-  do {
-    const response = asRecord(await appServer.rpc('thread/list', {
-      archived: false,
-      limit: 100,
-      sortKey: 'updated_at',
-      modelProviders: [],
-      cursor,
-    }))
-    const data = Array.isArray(response?.data) ? response.data : []
-    for (const row of data) {
-      const record = asRecord(row)
-      const id = typeof record?.id === 'string' ? record.id : ''
-      if (!id) continue
-      const title = typeof record?.name === 'string' && record.name.trim().length > 0
-        ? record.name.trim()
-        : (typeof record?.preview === 'string' && record.preview.trim().length > 0 ? record.preview.trim() : 'Untitled thread')
-      const preview = typeof record?.preview === 'string' ? record.preview : ''
-      threads.push({ id, title, preview })
-    }
-    cursor = typeof response?.nextCursor === 'string' && response.nextCursor.length > 0 ? response.nextCursor : null
-  } while (cursor)
-
-  const docs: ThreadSearchDocument[] = threads.map((thread) => {
-    const searchableText = [thread.title, thread.preview].filter(Boolean).join('\n')
-    return {
-      id: thread.id,
-      title: thread.title,
-      preview: thread.preview,
-      messageText: '',
-      searchableText,
-    } satisfies ThreadSearchDocument
-  })
-
-  const docsById = new Map<string, ThreadSearchDocument>(docs.map((doc) => [doc.id, doc]))
-  const fullTextThreads = threads.slice(0, THREAD_SEARCH_FULL_TEXT_THREAD_LIMIT)
-  const concurrency = 4
-  for (let offset = 0; offset < fullTextThreads.length; offset += concurrency) {
-    const batch = fullTextThreads.slice(offset, offset + concurrency)
-    const loaded = await Promise.all(batch.map(async (thread) => {
-      try {
-        const readResponse = await appServer.rpc('thread/read', {
-          threadId: thread.id,
-          includeTurns: true,
-        })
-        const messageText = extractThreadMessageText(readResponse)
-        const searchableText = [thread.title, thread.preview, messageText].filter(Boolean).join('\n')
-        return [thread.id, {
-          id: thread.id,
-          title: thread.title,
-          preview: thread.preview,
-          messageText,
-          searchableText,
-        } satisfies ThreadSearchDocument] as const
-      } catch {
-        return null
-      }
-    }))
-    for (const row of loaded) {
-      if (!row) continue
-      docsById.set(row[0], row[1])
-    }
-  }
-
-  return Array.from(docsById.values())
-}
-
-async function buildThreadSearchIndex(appServer: AppServerProcess): Promise<ThreadSearchIndex> {
-  const docs = await loadAllThreadsForSearch(appServer)
-  const docsById = new Map<string, ThreadSearchDocument>(docs.map((doc) => [doc.id, doc]))
-  return { docsById }
-}
-
 export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
   const { appServer, terminalManager, methodCatalog, telegramBridge, backendQueueProcessor } = getSharedBridgeState()
   let threadSearchIndex: ThreadSearchIndex | null = null
@@ -6331,7 +1764,7 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
             return
           }
 
-          const result = await revertTurnFileChanges(cwd, turnInfos)
+          const result = await revertTurnFileChanges(cwd, turnInfos, { runCommand, runCommandCapture })
           setJson(res, 200, { ...result, message: `Reverted ${result.reverted} file change(s)` })
         } catch (error) {
           setJson(res, 500, { error: getErrorMessage(error, 'Failed to revert file changes') })
@@ -7105,7 +2538,7 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
         const repoUrl = typeof payload?.url === 'string' ? payload.url.trim() : ''
         const basePath = typeof payload?.basePath === 'string' ? payload.basePath.trim() : ''
         try {
-          const clonedPath = await cloneGithubRepositoryIntoBase(repoUrl, basePath)
+          const clonedPath = await cloneGithubRepositoryIntoBase(repoUrl, basePath, { runCommand, persistWorkspaceRoot })
           setJson(res, 200, { data: { path: clonedPath } })
         } catch (error) {
           setJson(res, 400, { error: error instanceof Error ? error.message : 'Failed to clone GitHub repository' })
diff --git a/src/server/composioRoutesSupport.ts b/src/server/composioRoutesSupport.ts
new file mode 100644
index 000000000..28a538cd8
--- /dev/null
+++ b/src/server/composioRoutesSupport.ts
@@ -0,0 +1,524 @@
+import { spawn, spawnSync } from 'node:child_process'
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import { getSpawnInvocation } from '../utils/commandInvocation.js'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+function getErrorMessage(payload: unknown, fallback: string): string {
+  if (payload instanceof Error && payload.message.trim().length > 0) return payload.message
+  const record = asRecord(payload)
+  if (!record) return fallback
+  const error = record.error
+  if (typeof error === 'string' && error.length > 0) return error
+  const nestedError = asRecord(error)
+  if (nestedError && typeof nestedError.message === 'string' && nestedError.message.length > 0) return nestedError.message
+  return fallback
+}
+
+function quoteShellTokenIfNeeded(value: string): string {
+  return /^[A-Za-z0-9_./:=@+-]+$/u.test(value) ? value : JSON.stringify(value)
+}
+
+export type ComposioUserData = {
+  apiKey: string
+  baseUrl: string
+  webUrl: string
+  orgId: string
+  testUserId: string
+}
+
+const COMPOSIO_USER_DATA_PATH = join(homedir(), '.composio', 'user_data.json')
+
+export type ComposioStatusResponse = {
+  available: boolean
+  authenticated: boolean
+  cliVersion: string
+  email: string
+  defaultOrgName: string
+  defaultOrgId: string
+  webUrl: string
+  baseUrl: string
+  testUserId: string
+}
+
+export type ComposioConnectionSummary = {
+  id: string
+  wordId: string
+  alias: string
+  status: string
+  authScheme: string
+  createdAt: string
+  updatedAt: string
+  isComposioManaged: boolean
+  isDisabled: boolean
+}
+
+export type ComposioConnectorSummary = {
+  slug: string
+  name: string
+  description: string
+  logoUrl: string
+  latestVersion: string
+  toolsCount: number
+  triggersCount: number
+  isNoAuth: boolean
+  enabled: boolean
+  authModes: string[]
+  activeCount: number
+  totalConnections: number
+  connectionStatuses: string[]
+}
+
+export type ComposioToolSummary = {
+  slug: string
+  name: string
+  description: string
+}
+
+export type ComposioConnectorDetail = {
+  connector: ComposioConnectorSummary
+  connections: ComposioConnectionSummary[]
+  tools: ComposioToolSummary[]
+  dashboardUrl: string
+}
+
+export type ComposioLinkResult = {
+  status: string
+  message: string
+  connectedAccountId: string
+  redirectUrl: string
+  toolkit: string
+  projectType: string
+}
+
+export type ComposioLoginResult = {
+  status: string
+  message: string
+  loginUrl: string
+  cliKey: string
+  expiresAt: string
+}
+
+export type ComposioInstallResult = {
+  ok: boolean
+  command: string
+  output: string
+}
+
+export type ComposioConnectorPage = {
+  data: ComposioConnectorSummary[]
+  nextCursor: string | null
+  total: number
+}
+
+const COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX = 1000
+
+function readBoolean(value: unknown): boolean {
+  return value === true
+}
+
+function readNumber(value: unknown): number {
+  return typeof value === 'number' && Number.isFinite(value) ? value : 0
+}
+
+export type ComposioCliInvocation = { command: string; args: string[]; displayCommand: string }
+
+function buildComposioInvocation(args: string[]): ComposioCliInvocation | null {
+  const overrideCommand = process.env.CODEXUI_COMPOSIO_COMMAND?.trim()
+  if (overrideCommand) {
+    const invocation = getSpawnInvocation(overrideCommand, args)
+    return {
+      command: invocation.command,
+      args: invocation.args,
+      displayCommand: `${overrideCommand} ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
+    }
+  }
+  return buildInstalledComposioInvocation(args)
+}
+
+function buildInstalledComposioInvocation(args: string[]): ComposioCliInvocation | null {
+  const candidates = [
+    join(homedir(), '.composio', 'composio'),
+    'composio',
+  ]
+  for (const candidate of candidates) {
+    if ((candidate.includes('/') || candidate.includes('\\')) && !existsSync(candidate)) continue
+    const invocation = getSpawnInvocation(candidate, args)
+    return {
+      command: invocation.command,
+      args: invocation.args,
+      displayCommand: `${candidate} ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
+    }
+  }
+  return null
+}
+
+function probeComposioInvocation(invocation: ComposioCliInvocation): { available: boolean; cliVersion: string; output: string } {
+  const probe = spawnSync(invocation.command, invocation.args, {
+    encoding: 'utf8',
+    env: process.env,
+    windowsHide: true,
+  })
+  const output = `${probe.stdout ?? ''}${probe.stderr ?? ''}`.trim()
+  return {
+    available: !probe.error && probe.status === 0,
+    cliVersion: probe.status === 0 ? (probe.stdout ?? '').trim() : '',
+    output,
+  }
+}
+
+function resolveComposioInvocation(args: string[]): ComposioCliInvocation | null {
+  const invocation = buildComposioInvocation(args)
+  const versionInvocation = buildComposioInvocation(['--version'])
+  if (invocation && versionInvocation && probeComposioInvocation(versionInvocation).available) return invocation
+  return null
+}
+
+function parseComposioJson<T>(stdout: string, fallback: string): T {
+  const trimmed = stdout.trim()
+  if (!trimmed) {
+    throw new Error(fallback)
+  }
+  return JSON.parse(trimmed) as T
+}
+
+async function runComposioJson<T>(args: string[], fallback: string): Promise<T> {
+  const invocation = resolveComposioInvocation(args)
+  if (!invocation) {
+    throw new Error('Composio CLI is not installed')
+  }
+  const child = spawn(invocation.command, invocation.args, {
+    env: process.env,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    windowsHide: true,
+  })
+
+  let stdout = ''
+  let stderr = ''
+
+  child.stdout.setEncoding('utf8')
+  child.stderr.setEncoding('utf8')
+  child.stdout.on('data', (chunk) => { stdout += chunk })
+  child.stderr.on('data', (chunk) => { stderr += chunk })
+
+  const exitCode = await new Promise<number>((resolveExit, reject) => {
+    child.once('error', reject)
+    child.once('close', (code) => resolveExit(code ?? 0))
+  })
+
+  if (exitCode !== 0) {
+    throw new Error(stderr.trim() || stdout.trim() || fallback)
+  }
+
+  try {
+    return parseComposioJson<T>(stdout, fallback)
+  } catch (error) {
+    const details = stderr.trim() || stdout.trim()
+    throw new Error(details || getErrorMessage(error, fallback))
+  }
+}
+
+async function readComposioUserData(): Promise<ComposioUserData | null> {
+  try {
+    const raw = await readFile(COMPOSIO_USER_DATA_PATH, 'utf8')
+    const payload = asRecord(JSON.parse(raw))
+    if (!payload) return null
+    return {
+      apiKey: readNonEmptyString(payload.api_key),
+      baseUrl: readNonEmptyString(payload.base_url),
+      webUrl: readNonEmptyString(payload.web_url),
+      orgId: readNonEmptyString(payload.org_id),
+      testUserId: readNonEmptyString(payload.test_user_id),
+    }
+  } catch {
+    return null
+  }
+}
+
+function normalizeComposioConnection(value: unknown): ComposioConnectionSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const authConfig = asRecord(record.auth_config)
+  return {
+    id: readNonEmptyString(record.id),
+    wordId: readNonEmptyString(record.word_id),
+    alias: readNonEmptyString(record.alias),
+    status: readNonEmptyString(record.status),
+    authScheme: readNonEmptyString(record.authScheme || authConfig?.auth_scheme),
+    createdAt: readNonEmptyString(record.created_at),
+    updatedAt: readNonEmptyString(record.updated_at),
+    isComposioManaged: readBoolean(authConfig?.is_composio_managed),
+    isDisabled: readBoolean(record.is_disabled),
+  }
+}
+
+function normalizeComposioToolkit(value: unknown, connectionsBySlug: Map<string, ComposioConnectionSummary[]>): ComposioConnectorSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const slug = readNonEmptyString(record.slug)
+  if (!slug) return null
+  const connectionRows = connectionsBySlug.get(slug) ?? []
+  return {
+    slug,
+    name: readNonEmptyString(record.name),
+    description: readNonEmptyString(record.description),
+    logoUrl: readNonEmptyString(record.logo || record.meta && asRecord(record.meta)?.logo),
+    latestVersion: readNonEmptyString(record.latest_version || record.latestVersion),
+    toolsCount: readNumber(record.tools_count),
+    triggersCount: readNumber(record.triggers_count),
+    isNoAuth: readBoolean(record.is_no_auth),
+    enabled: record.enabled !== false,
+    authModes: Array.isArray(record.auth_modes) ? record.auth_modes.map(readNonEmptyString).filter(Boolean) : [],
+    activeCount: connectionRows.filter((row) => row.status === 'ACTIVE' && !row.isDisabled).length,
+    totalConnections: connectionRows.length,
+    connectionStatuses: [...new Set(connectionRows.map((row) => row.status).filter(Boolean))],
+  }
+}
+
+function normalizeComposioTool(value: unknown): ComposioToolSummary | null {
+  const record = asRecord(value)
+  if (!record) return null
+  const slug = readNonEmptyString(record.slug)
+  if (!slug) return null
+  return {
+    slug,
+    name: readNonEmptyString(record.name),
+    description: readNonEmptyString(record.description),
+  }
+}
+
+async function readComposioConnectionsBySlug(): Promise<Map<string, ComposioConnectionSummary[]>> {
+  const payload = asRecord(await runComposioJson<Record<string, unknown>>(['connections', 'list'], 'Failed to list Composio connections'))
+  const bySlug = new Map<string, ComposioConnectionSummary[]>()
+  for (const [slug, rawRows] of Object.entries(payload ?? {})) {
+    if (!Array.isArray(rawRows)) continue
+    const rows = rawRows.map(normalizeComposioConnection).filter((row): row is ComposioConnectionSummary => row !== null)
+    bySlug.set(slug, rows)
+  }
+  return bySlug
+}
+
+export async function readComposioStatus(): Promise<ComposioStatusResponse> {
+  const versionInvocation = buildComposioInvocation(['--version'])
+  const probe = versionInvocation
+    ? probeComposioInvocation(versionInvocation)
+    : { available: false, cliVersion: '', output: '' }
+  const available = probe.available
+  const cliVersion = probe.cliVersion
+  const userData = await readComposioUserData()
+  if (!available) {
+    return {
+      available: false,
+      authenticated: false,
+      cliVersion,
+      email: '',
+      defaultOrgName: '',
+      defaultOrgId: userData?.orgId ?? '',
+      webUrl: userData?.webUrl ?? '',
+      baseUrl: userData?.baseUrl ?? '',
+      testUserId: userData?.testUserId ?? '',
+    }
+  }
+
+  try {
+    const payload = asRecord(await runComposioJson<Record<string, unknown>>(['whoami'], 'Failed to read Composio account status'))
+    return {
+      available: true,
+      authenticated: true,
+      cliVersion,
+      email: readNonEmptyString(payload?.email),
+      defaultOrgName: readNonEmptyString(payload?.default_org_name),
+      defaultOrgId: readNonEmptyString(payload?.default_org_id) || userData?.orgId || '',
+      webUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
+      baseUrl: userData?.baseUrl || 'https://backend.composio.dev',
+      testUserId: readNonEmptyString(payload?.test_user_id) || userData?.testUserId || '',
+    }
+  } catch {
+    return {
+      available: true,
+      authenticated: false,
+      cliVersion,
+      email: '',
+      defaultOrgName: '',
+      defaultOrgId: userData?.orgId ?? '',
+      webUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
+      baseUrl: userData?.baseUrl || 'https://backend.composio.dev',
+      testUserId: userData?.testUserId ?? '',
+    }
+  }
+}
+
+export async function listComposioConnectors(query: string, cursor: string | null = null, limit = 50): Promise<ComposioConnectorPage> {
+  const args = ['dev', 'toolkits', 'list', '--limit', String(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX)]
+  const trimmedQuery = query.trim()
+  if (trimmedQuery) {
+    args.push('--query', trimmedQuery)
+  }
+  const [payload, connectionsBySlug] = await Promise.all([
+    runComposioJson<unknown[]>(args, 'Failed to list Composio toolkits'),
+    readComposioConnectionsBySlug(),
+  ])
+  const allRows = payload
+    .map((item) => normalizeComposioToolkit(item, connectionsBySlug))
+    .filter((row): row is ComposioConnectorSummary => row !== null)
+  const safeLimit = Number.isFinite(limit) ? Math.max(1, Math.min(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX, Math.floor(limit))) : 50
+  const safeCursor = parseComposioCursor(cursor, allRows.length)
+  return {
+    data: allRows.slice(safeCursor, safeCursor + safeLimit),
+    nextCursor: safeCursor + safeLimit < allRows.length ? String(safeCursor + safeLimit) : null,
+    total: allRows.length,
+  }
+}
+
+function parseComposioCursor(cursor: string | null | undefined, maxLength: number): number {
+  const trimmed = cursor?.trim() ?? ''
+  const parsed = Number.parseInt(trimmed, 10)
+  if (!Number.isFinite(parsed) || Number.isNaN(parsed) || parsed <= 0) return 0
+  if (parsed >= maxLength) return maxLength
+  return parsed
+}
+
+export function parseComposioLimit(rawLimit: string | null): number {
+  const parsed = Number.parseInt((rawLimit ?? '').trim(), 10)
+  if (!Number.isFinite(parsed) || Number.isNaN(parsed) || parsed <= 0) return 50
+  return Math.max(1, Math.min(COMPOSIO_CONNECTORS_PAGE_LIMIT_MAX, parsed))
+}
+
+export async function readComposioConnectorDetail(slug: string): Promise<ComposioConnectorDetail> {
+  const normalizedSlug = slug.trim()
+  if (!normalizedSlug) {
+    throw new Error('Missing Composio connector slug')
+  }
+
+  const [infoPayload, toolsPayload, connectionsPayload, userData] = await Promise.all([
+    runComposioJson<Record<string, unknown>>(['dev', 'toolkits', 'info', normalizedSlug], `Failed to load Composio toolkit ${normalizedSlug}`),
+    runComposioJson<unknown[]>(['tools', 'list', normalizedSlug, '--limit', '10'], `Failed to list tools for ${normalizedSlug}`),
+    runComposioJson<{ toolkit?: string; items?: unknown[] }>(['link', normalizedSlug, '--list'], `Failed to list connections for ${normalizedSlug}`),
+    readComposioUserData(),
+  ])
+
+  const connections = Array.isArray(connectionsPayload.items)
+    ? connectionsPayload.items.map(normalizeComposioConnection).filter((row): row is ComposioConnectionSummary => row !== null)
+    : []
+  const connector = normalizeComposioToolkit(infoPayload, new Map([[normalizedSlug, connections]]))
+  if (!connector) {
+    throw new Error(`Unknown Composio connector: ${normalizedSlug}`)
+  }
+
+  return {
+    connector,
+    connections,
+    tools: Array.isArray(toolsPayload)
+      ? toolsPayload.map(normalizeComposioTool).filter((row): row is ComposioToolSummary => row !== null)
+      : [],
+    dashboardUrl: userData?.webUrl || 'https://dashboard.composio.dev/',
+  }
+}
+
+export async function startComposioLink(slug: string): Promise<ComposioLinkResult> {
+  const normalizedSlug = slug.trim()
+  if (!normalizedSlug) {
+    throw new Error('Missing Composio connector slug')
+  }
+  const payload = asRecord(await runComposioJson<Record<string, unknown>>(['link', normalizedSlug, '--no-wait'], `Failed to start Composio link for ${normalizedSlug}`))
+  return {
+    status: readNonEmptyString(payload?.status),
+    message: readNonEmptyString(payload?.message),
+    connectedAccountId: readNonEmptyString(payload?.connected_account_id),
+    redirectUrl: readNonEmptyString(payload?.redirect_url),
+    toolkit: readNonEmptyString(payload?.toolkit),
+    projectType: readNonEmptyString(payload?.project_type),
+  }
+}
+
+export async function startComposioLogin(): Promise<ComposioLoginResult> {
+  const invocation = resolveComposioInvocation(['login', '--no-browser', '-y'])
+  if (!invocation) {
+    throw new Error('Composio CLI is not installed')
+  }
+  const proc = spawn(invocation.command, invocation.args, {
+    cwd: process.cwd(),
+    env: process.env,
+    detached: true,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    windowsHide: true,
+  })
+  proc.unref()
+
+  let stdout = ''
+  let stderr = ''
+  proc.stdout.setEncoding('utf8')
+  proc.stderr.setEncoding('utf8')
+  proc.stderr.on('data', (chunk) => { stderr += chunk })
+
+  const loginUrl = await new Promise<string>((resolveLoginUrl, reject) => {
+    const timeout = setTimeout(() => {
+      proc.kill('SIGTERM')
+      reject(new Error(stderr.trim() || stdout.trim() || 'Timed out waiting for Composio CLI login URL'))
+    }, 10_000)
+    const finish = (url: string) => {
+      clearTimeout(timeout)
+      proc.stdout.destroy()
+      proc.stderr.destroy()
+      resolveLoginUrl(url)
+    }
+    proc.once('error', (error) => {
+      clearTimeout(timeout)
+      reject(error)
+    })
+    proc.once('close', (code) => {
+      clearTimeout(timeout)
+      reject(new Error(stderr.trim() || stdout.trim() || `Composio CLI login exited with code ${code ?? 0}`))
+    })
+    proc.stdout.on('data', (chunk) => {
+      stdout += chunk
+      const url = stdout.match(/https?:\/\/\S+/)?.[0] ?? ''
+      if (url) finish(url)
+    })
+  })
+
+  const cliKey = loginUrl ? (new URL(loginUrl).searchParams.get('cliKey') ?? '') : ''
+  return {
+    status: 'started',
+    message: 'Composio CLI login URL created',
+    loginUrl,
+    cliKey,
+    expiresAt: '',
+  }
+}
+
+export async function installComposioCli(): Promise<ComposioInstallResult> {
+  const command = 'bash'
+  const installScriptUrl = 'https://composio.dev/install'
+  const args = ['-lc', `curl -fsSL ${installScriptUrl} | bash`]
+  const invocation = getSpawnInvocation(command, args)
+  const env = {
+    ...process.env,
+    COMPOSIO_INSTALL_DIR: process.env.COMPOSIO_INSTALL_DIR?.trim() || join(homedir(), '.composio'),
+  }
+  const result = spawnSync(invocation.command, invocation.args, {
+    encoding: 'utf8',
+    env,
+    windowsHide: true,
+  })
+  const output = `${result.stdout ?? ''}${result.stderr ?? ''}`.trim()
+  if (result.error || result.status !== 0) {
+    throw new Error(output || result.error?.message || 'Failed to install Composio CLI')
+  }
+  return {
+    ok: true,
+    command: `curl -fsSL ${installScriptUrl} | bash`,
+    output,
+  }
+}
diff --git a/src/server/globalStateStore.ts b/src/server/globalStateStore.ts
new file mode 100644
index 000000000..ecb489554
--- /dev/null
+++ b/src/server/globalStateStore.ts
@@ -0,0 +1,418 @@
+import { createReadStream } from 'node:fs'
+import { readFile, stat, writeFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import { createInterface } from 'node:readline'
+
+type WorkspaceRootsState = {
+  order: string[]
+  labels: Record<string, string>
+  active: string[]
+  projectOrder: string[]
+  remoteProjects?: Array<{ id: string; hostId: string; remotePath: string; label?: string }>
+}
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getCodexGlobalStatePath(): string {
+  return join(getCodexHomeDir(), '.codex-global-state.json')
+}
+
+function getCodexSessionIndexPath(): string {
+  return join(getCodexHomeDir(), 'session_index.jsonl')
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+export function normalizeStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  const normalized: string[] = []
+  for (const item of value) {
+    if (typeof item === 'string' && item.length > 0 && !normalized.includes(item)) {
+      normalized.push(item)
+    }
+  }
+  return normalized
+}
+
+export function normalizeStringRecord(value: unknown): Record<string, string> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
+  const next: Record<string, string> = {}
+  for (const [key, item] of Object.entries(value as Record<string, unknown>)) {
+    if (typeof key === 'string' && key.length > 0 && typeof item === 'string') {
+      next[key] = item
+    }
+  }
+  return next
+}
+
+export function normalizeRemoteProjects(value: unknown): WorkspaceRootsState['remoteProjects'] {
+  if (!Array.isArray(value)) return []
+  const next: WorkspaceRootsState['remoteProjects'] = []
+  const seen = new Set<string>()
+  for (const item of value) {
+    const record = asRecord(item)
+    if (!record) continue
+    const id = typeof record.id === 'string' ? record.id.trim() : ''
+    if (!id || seen.has(id)) continue
+    seen.add(id)
+    next.push({
+      id,
+      hostId: typeof record.hostId === 'string' ? record.hostId.trim() : '',
+      remotePath: typeof record.remotePath === 'string' ? record.remotePath.trim() : '',
+      label: typeof record.label === 'string' ? record.label.trim() : '',
+    })
+  }
+  return next
+}
+
+export type ThreadTitleCache = { titles: Record<string, string>; order: string[] }
+const MAX_THREAD_TITLES = 500
+const EMPTY_THREAD_TITLE_CACHE: ThreadTitleCache = { titles: {}, order: [] }
+const PINNED_THREAD_IDS_KEY = 'pinned-thread-ids'
+
+type SessionIndexThreadTitleCacheState = {
+  fileSignature: string | null
+  cache: ThreadTitleCache
+}
+
+let sessionIndexThreadTitleCacheState: SessionIndexThreadTitleCacheState = {
+  fileSignature: null,
+  cache: EMPTY_THREAD_TITLE_CACHE,
+}
+
+type TelegramBridgeConfigState = {
+  botToken: string
+  chatIds: number[]
+  allowedUserIds: Array<number | '*'>
+}
+
+function normalizeThreadTitleCache(value: unknown): ThreadTitleCache {
+  const record = asRecord(value)
+  if (!record) return EMPTY_THREAD_TITLE_CACHE
+  const rawTitles = asRecord(record.titles)
+  const titles: Record<string, string> = {}
+  if (rawTitles) {
+    for (const [k, v] of Object.entries(rawTitles)) {
+      if (typeof v === 'string' && v.length > 0) titles[k] = v
+    }
+  }
+  const order = normalizeStringArray(record.order)
+  return { titles, order }
+}
+
+export function normalizePinnedThreadIds(value: unknown): string[] {
+  return normalizeStringArray(value)
+}
+
+export function updateThreadTitleCache(cache: ThreadTitleCache, id: string, title: string): ThreadTitleCache {
+  const titles = { ...cache.titles, [id]: title }
+  const order = [id, ...cache.order.filter((o) => o !== id)]
+  while (order.length > MAX_THREAD_TITLES) {
+    const removed = order.pop()
+    if (removed) delete titles[removed]
+  }
+  return { titles, order }
+}
+
+export function removeFromThreadTitleCache(cache: ThreadTitleCache, id: string): ThreadTitleCache {
+  const { [id]: _, ...titles } = cache.titles
+  return { titles, order: cache.order.filter((o) => o !== id) }
+}
+
+type SessionIndexThreadTitle = {
+  id: string
+  title: string
+  updatedAtMs: number
+}
+
+function normalizeSessionIndexThreadTitle(value: unknown): SessionIndexThreadTitle | null {
+  const record = asRecord(value)
+  if (!record) return null
+
+  const id = typeof record.id === 'string' ? record.id.trim() : ''
+  const title = typeof record.thread_name === 'string' ? record.thread_name.trim() : ''
+  const updatedAtIso = typeof record.updated_at === 'string' ? record.updated_at.trim() : ''
+  const updatedAtMs = updatedAtIso ? Date.parse(updatedAtIso) : Number.NaN
+
+  if (!id || !title) return null
+  return {
+    id,
+    title,
+    updatedAtMs: Number.isFinite(updatedAtMs) ? updatedAtMs : 0,
+  }
+}
+
+function trimThreadTitleCache(cache: ThreadTitleCache): ThreadTitleCache {
+  const titles = { ...cache.titles }
+  const order = cache.order.filter((id) => {
+    if (!titles[id]) return false
+    return true
+  }).slice(0, MAX_THREAD_TITLES)
+
+  for (const id of Object.keys(titles)) {
+    if (!order.includes(id)) {
+      delete titles[id]
+    }
+  }
+
+  return { titles, order }
+}
+
+function mergeThreadTitleCaches(base: ThreadTitleCache, overlay: ThreadTitleCache): ThreadTitleCache {
+  const titles = { ...base.titles, ...overlay.titles }
+  const order: string[] = []
+
+  for (const id of [...overlay.order, ...base.order]) {
+    if (!titles[id] || order.includes(id)) continue
+    order.push(id)
+  }
+
+  for (const id of Object.keys(titles)) {
+    if (!order.includes(id)) {
+      order.push(id)
+    }
+  }
+
+  return trimThreadTitleCache({ titles, order })
+}
+
+export async function readThreadTitleCache(): Promise<ThreadTitleCache> {
+  const statePath = getCodexGlobalStatePath()
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    const payload = asRecord(JSON.parse(raw)) ?? {}
+    return normalizeThreadTitleCache(payload['thread-titles'])
+  } catch {
+    return EMPTY_THREAD_TITLE_CACHE
+  }
+}
+
+export async function writeThreadTitleCache(cache: ThreadTitleCache): Promise<void> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    payload = asRecord(JSON.parse(raw)) ?? {}
+  } catch {
+    payload = {}
+  }
+  payload['thread-titles'] = cache
+  await writeFile(statePath, JSON.stringify(payload), 'utf8')
+}
+
+export async function readPinnedThreadIds(): Promise<string[]> {
+  const statePath = getCodexGlobalStatePath()
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    const payload = asRecord(JSON.parse(raw)) ?? {}
+    return normalizePinnedThreadIds(payload[PINNED_THREAD_IDS_KEY])
+  } catch {
+    return []
+  }
+}
+
+export async function writePinnedThreadIds(threadIds: string[]): Promise<void> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    payload = asRecord(JSON.parse(raw)) ?? {}
+  } catch {
+    payload = {}
+  }
+
+  payload[PINNED_THREAD_IDS_KEY] = normalizePinnedThreadIds(threadIds)
+  await writeFile(statePath, JSON.stringify(payload), 'utf8')
+}
+
+const FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY = 'first-launch-plugins-card-dismissed'
+
+export async function readFirstLaunchPluginsCardDismissed(): Promise<boolean> {
+  const statePath = getCodexGlobalStatePath()
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    const payload = asRecord(JSON.parse(raw)) ?? {}
+    return payload[FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY] === true
+  } catch {
+    return false
+  }
+}
+
+export async function writeFirstLaunchPluginsCardDismissed(dismissed: boolean): Promise<void> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    payload = asRecord(JSON.parse(raw)) ?? {}
+  } catch {
+    payload = {}
+  }
+  payload[FIRST_LAUNCH_PLUGINS_CARD_DISMISSED_KEY] = dismissed === true
+  await writeFile(statePath, JSON.stringify(payload), 'utf8')
+}
+
+function getSessionIndexFileSignature(stats: { mtimeMs: number; size: number }): string {
+  return `${String(stats.mtimeMs)}:${String(stats.size)}`
+}
+
+async function parseThreadTitlesFromSessionIndex(sessionIndexPath: string): Promise<ThreadTitleCache> {
+  const latestById = new Map<string, SessionIndexThreadTitle>()
+  const input = createReadStream(sessionIndexPath, { encoding: 'utf8' })
+  const lines = createInterface({
+    input,
+    crlfDelay: Infinity,
+  })
+
+  try {
+    for await (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed) continue
+
+      try {
+        const entry = normalizeSessionIndexThreadTitle(JSON.parse(trimmed) as unknown)
+        if (!entry) continue
+
+        const previous = latestById.get(entry.id)
+        if (!previous || entry.updatedAtMs >= previous.updatedAtMs) {
+          latestById.set(entry.id, entry)
+        }
+      } catch {
+        // Skip malformed lines and keep scanning the rest of the index.
+      }
+    }
+  } finally {
+    lines.close()
+    input.close()
+  }
+
+  const entries = Array.from(latestById.values()).sort((first, second) => second.updatedAtMs - first.updatedAtMs)
+  const titles: Record<string, string> = {}
+  const order: string[] = []
+  for (const entry of entries) {
+    titles[entry.id] = entry.title
+    order.push(entry.id)
+  }
+
+  return trimThreadTitleCache({ titles, order })
+}
+
+async function readThreadTitlesFromSessionIndex(): Promise<ThreadTitleCache> {
+  const sessionIndexPath = getCodexSessionIndexPath()
+
+  try {
+    const stats = await stat(sessionIndexPath)
+    const fileSignature = getSessionIndexFileSignature(stats)
+    if (sessionIndexThreadTitleCacheState.fileSignature === fileSignature) {
+      return sessionIndexThreadTitleCacheState.cache
+    }
+
+    const cache = await parseThreadTitlesFromSessionIndex(sessionIndexPath)
+    sessionIndexThreadTitleCacheState = { fileSignature, cache }
+    return cache
+  } catch {
+    sessionIndexThreadTitleCacheState = {
+      fileSignature: 'missing',
+      cache: EMPTY_THREAD_TITLE_CACHE,
+    }
+    return sessionIndexThreadTitleCacheState.cache
+  }
+}
+
+export async function readMergedThreadTitleCache(): Promise<ThreadTitleCache> {
+  const [sessionIndexCache, persistedCache] = await Promise.all([
+    readThreadTitlesFromSessionIndex(),
+    readThreadTitleCache(),
+  ])
+  return mergeThreadTitleCaches(persistedCache, sessionIndexCache)
+}
+
+export async function readWorkspaceRootsState(): Promise<WorkspaceRootsState> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    const parsed = JSON.parse(raw) as unknown
+    payload = asRecord(parsed) ?? {}
+  } catch {
+    payload = {}
+  }
+
+  return {
+    order: normalizeStringArray(payload['electron-saved-workspace-roots']),
+    labels: normalizeStringRecord(payload['electron-workspace-root-labels']),
+    active: normalizeStringArray(payload['active-workspace-roots']),
+    projectOrder: normalizeStringArray(payload['project-order']),
+    remoteProjects: normalizeRemoteProjects(payload['remote-projects']),
+  }
+}
+
+export async function writeWorkspaceRootsState(nextState: WorkspaceRootsState): Promise<void> {
+  const statePath = getCodexGlobalStatePath()
+  let payload: Record<string, unknown> = {}
+  try {
+    const raw = await readFile(statePath, 'utf8')
+    payload = asRecord(JSON.parse(raw)) ?? {}
+  } catch {
+    payload = {}
+  }
+
+  payload['electron-saved-workspace-roots'] = normalizeStringArray(nextState.order)
+  payload['electron-workspace-root-labels'] = normalizeStringRecord(nextState.labels)
+  payload['active-workspace-roots'] = normalizeStringArray(nextState.active)
+  payload['project-order'] = normalizeStringArray(nextState.projectOrder)
+
+  await writeFile(statePath, JSON.stringify(payload), 'utf8')
+}
+
+let workspaceRootsMutation: Promise<void> = Promise.resolve()
+
+function queueWorkspaceRootsMutation<T>(mutation: () => Promise<T>): Promise<T> {
+  const run = workspaceRootsMutation.catch(() => undefined).then(mutation)
+  workspaceRootsMutation = run.then(
+    () => undefined,
+    () => undefined,
+  )
+  return run
+}
+
+function prependUniqueString(value: string, items: string[]): string[] {
+  return [value, ...items.filter((item) => item !== value)]
+}
+
+export async function updateWorkspaceRootsState(
+  updater: (existingState: WorkspaceRootsState) => WorkspaceRootsState,
+): Promise<void> {
+  await queueWorkspaceRootsMutation(async () => {
+    const existingState = await readWorkspaceRootsState()
+    await writeWorkspaceRootsState(updater(existingState))
+  })
+}
+
+export async function persistWorkspaceRoot(workspaceRoot: string, label = ''): Promise<void> {
+  const normalizedRoot = workspaceRoot.trim()
+  if (!normalizedRoot) return
+
+  await updateWorkspaceRootsState((existingState) => {
+    const nextLabels = { ...existingState.labels }
+    const trimmedLabel = label.trim()
+    if (trimmedLabel.length > 0) {
+      nextLabels[normalizedRoot] = trimmedLabel
+    }
+    return {
+      order: prependUniqueString(normalizedRoot, existingState.order),
+      labels: nextLabels,
+      active: prependUniqueString(normalizedRoot, existingState.active),
+      projectOrder: prependUniqueString(normalizedRoot, existingState.projectOrder),
+      remoteProjects: existingState.remoteProjects,
+    }
+  })
+}
diff --git a/src/server/mediaProxyRoutes.ts b/src/server/mediaProxyRoutes.ts
new file mode 100644
index 000000000..546327066
--- /dev/null
+++ b/src/server/mediaProxyRoutes.ts
@@ -0,0 +1,255 @@
+import { spawn } from 'node:child_process'
+import { request as httpRequest } from 'node:http'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { request as httpsRequest } from 'node:https'
+import { readFile, mkdir, mkdtemp, writeFile } from 'node:fs/promises'
+import { homedir, tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getCodexAuthPath(): string {
+  return join(getCodexHomeDir(), 'auth.json')
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+function getErrorMessage(payload: unknown, fallback: string): string {
+  if (payload instanceof Error && payload.message.trim().length > 0) return payload.message
+  const record = asRecord(payload)
+  if (!record) return fallback
+  const error = record.error
+  if (typeof error === 'string' && error.length > 0) return error
+  const nestedError = asRecord(error)
+  if (nestedError && typeof nestedError.message === 'string' && nestedError.message.length > 0) return nestedError.message
+  return fallback
+}
+
+function setJson(res: ServerResponse, statusCode: number, payload: unknown): void {
+  res.statusCode = statusCode
+  res.setHeader('Content-Type', 'application/json; charset=utf-8')
+  res.end(JSON.stringify(payload))
+}
+
+async function readCodexAuth(): Promise<{ accessToken: string; accountId?: string } | null> {
+  try {
+    const raw = await readFile(getCodexAuthPath(), 'utf8')
+    const auth = JSON.parse(raw) as { tokens?: { access_token?: string; account_id?: string } }
+    const token = auth.tokens?.access_token
+    if (!token) return null
+    return { accessToken: token, accountId: auth.tokens?.account_id ?? undefined }
+  } catch {
+    return null
+  }
+}
+
+function bufferIndexOf(buf: Buffer, needle: Buffer, start = 0): number {
+  for (let i = start; i <= buf.length - needle.length; i++) {
+    let match = true
+    for (let j = 0; j < needle.length; j++) {
+      if (buf[i + j] !== needle[j]) { match = false; break }
+    }
+    if (match) return i
+  }
+  return -1
+}
+
+export function handleFileUpload(req: IncomingMessage, res: ServerResponse): void {
+  const chunks: Buffer[] = []
+  req.on('data', (chunk: Buffer) => chunks.push(chunk))
+  req.on('end', async () => {
+    try {
+      const body = Buffer.concat(chunks)
+      const contentType = req.headers['content-type'] ?? ''
+      const boundaryMatch = contentType.match(/boundary=(.+)/i)
+      if (!boundaryMatch) { setJson(res, 400, { error: 'Missing multipart boundary' }); return }
+      const boundary = boundaryMatch[1]
+      const boundaryBuf = Buffer.from(`--${boundary}`)
+      const parts: Buffer[] = []
+      let searchStart = 0
+      while (searchStart < body.length) {
+        const idx = body.indexOf(boundaryBuf, searchStart)
+        if (idx < 0) break
+        if (searchStart > 0) parts.push(body.subarray(searchStart, idx))
+        searchStart = idx + boundaryBuf.length
+        if (body[searchStart] === 0x0d && body[searchStart + 1] === 0x0a) searchStart += 2
+      }
+      let fileName = 'uploaded-file'
+      let fileData: Buffer | null = null
+      const headerSep = Buffer.from('\r\n\r\n')
+      for (const part of parts) {
+        const headerEnd = bufferIndexOf(part, headerSep)
+        if (headerEnd < 0) continue
+        const headers = part.subarray(0, headerEnd).toString('utf8')
+        const fnMatch = headers.match(/filename="([^"]+)"/i)
+        if (!fnMatch) continue
+        fileName = fnMatch[1].replace(/[/\\]/g, '_')
+        let end = part.length
+        if (end >= 2 && part[end - 2] === 0x0d && part[end - 1] === 0x0a) end -= 2
+        fileData = part.subarray(headerEnd + 4, end)
+        break
+      }
+      if (!fileData) { setJson(res, 400, { error: 'No file in request' }); return }
+      const uploadDir = join(tmpdir(), 'codex-web-uploads')
+      await mkdir(uploadDir, { recursive: true })
+      const destDir = await mkdtemp(join(uploadDir, 'f-'))
+      const destPath = join(destDir, fileName)
+      await writeFile(destPath, fileData)
+      setJson(res, 200, { path: destPath })
+    } catch (err) {
+      setJson(res, 500, { error: getErrorMessage(err, 'Upload failed') })
+    }
+  })
+  req.on('error', (err: Error) => {
+    setJson(res, 500, { error: getErrorMessage(err, 'Upload stream error') })
+  })
+}
+
+function httpPost(
+  url: string,
+  headers: Record<string, string | number>,
+  body: Buffer,
+): Promise<{ status: number; body: string }> {
+  const doRequest = url.startsWith('http://') ? httpRequest : httpsRequest
+  return new Promise((resolve, reject) => {
+    const req = doRequest(url, { method: 'POST', headers }, (res) => {
+      const chunks: Buffer[] = []
+      res.on('data', (c: Buffer) => chunks.push(c))
+      res.on('end', () => resolve({ status: res.statusCode ?? 500, body: Buffer.concat(chunks).toString('utf8') }))
+      res.on('error', reject)
+    })
+    req.on('error', reject)
+    req.write(body)
+    req.end()
+  })
+}
+
+let curlImpersonateAvailable: boolean | null = null
+
+function curlImpersonatePost(
+  url: string,
+  headers: Record<string, string | number>,
+  body: Buffer,
+): Promise<{ status: number; body: string }> {
+  return new Promise((resolve, reject) => {
+    const args = ['-s', '-w', '\n%{http_code}', '-X', 'POST', url]
+    for (const [k, v] of Object.entries(headers)) {
+      if (k.toLowerCase() === 'content-length') continue
+      args.push('-H', `${k}: ${String(v)}`)
+    }
+    args.push('--data-binary', '@-')
+    const proc = spawn('curl-impersonate-chrome', args, {
+      env: { ...process.env, CURL_IMPERSONATE: 'chrome116' },
+      stdio: ['pipe', 'pipe', 'pipe'],
+    })
+    const chunks: Buffer[] = []
+    proc.stdout.on('data', (c: Buffer) => chunks.push(c))
+    proc.on('error', (e) => {
+      curlImpersonateAvailable = false
+      reject(e)
+    })
+    proc.on('close', (code) => {
+      const raw = Buffer.concat(chunks).toString('utf8')
+      const lastNewline = raw.lastIndexOf('\n')
+      const statusStr = lastNewline >= 0 ? raw.slice(lastNewline + 1).trim() : ''
+      const responseBody = lastNewline >= 0 ? raw.slice(0, lastNewline) : raw
+      const status = parseInt(statusStr, 10) || (code === 0 ? 200 : 500)
+      curlImpersonateAvailable = true
+      resolve({ status, body: responseBody })
+    })
+    proc.stdin.write(body)
+    proc.stdin.end()
+  })
+}
+
+export async function proxyTranscribe(
+  body: Buffer,
+  contentType: string,
+  authToken: string,
+  accountId?: string,
+): Promise<{ status: number; body: string }> {
+  const chatgptHeaders: Record<string, string | number> = {
+    'Content-Type': contentType,
+    'Content-Length': body.length,
+    Authorization: `Bearer ${authToken}`,
+    originator: 'Codex Desktop',
+    'User-Agent': `Codex Desktop/0.1.0 (${process.platform}; ${process.arch})`,
+  }
+  if (accountId) chatgptHeaders['ChatGPT-Account-Id'] = accountId
+
+  const postFn = curlImpersonateAvailable !== false ? curlImpersonatePost : httpPost
+  let result: { status: number; body: string }
+  try {
+    result = await postFn('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
+  } catch {
+    result = await httpPost('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
+  }
+
+  if (result.status === 403 && result.body.includes('cf_chl')) {
+    if (curlImpersonateAvailable !== false && postFn !== curlImpersonatePost) {
+      try {
+        const ciResult = await curlImpersonatePost('https://chatgpt.com/backend-api/transcribe', chatgptHeaders, body)
+        if (ciResult.status !== 403) return ciResult
+      } catch {}
+    }
+    return { status: 503, body: JSON.stringify({ error: 'Transcription blocked by Cloudflare. Install curl-impersonate-chrome.' }) }
+  }
+
+  return result
+}
+
+function parseConnectorLogoUrl(rawUrl: string): { connectorId: string; theme: 'light' | 'dark' } | null {
+  const trimmed = rawUrl.trim()
+  if (!trimmed.startsWith('connectors://')) return null
+  const rest = trimmed.slice('connectors://'.length)
+  const connectorId = (rest.split(/[/?#]/u)[0] ?? '').trim()
+  if (!connectorId) return null
+  const query = rest.includes('?') ? rest.slice(rest.indexOf('?') + 1).split('#')[0] ?? '' : ''
+  const theme = new URLSearchParams(query).get('theme')?.toLowerCase() === 'dark' ? 'dark' : 'light'
+  return { connectorId, theme }
+}
+
+export async function fetchConnectorLogo(rawUrl: string): Promise<{ contentType: string; body: Buffer }> {
+  const parsed = parseConnectorLogoUrl(rawUrl)
+  if (!parsed) throw new Error('Unsupported connector logo URL')
+  const auth = await readCodexAuth()
+  if (!auth) throw new Error('No auth token available for connector logo')
+
+  const endpoint = `https://chatgpt.com/backend-api/aip/connectors/${encodeURIComponent(parsed.connectorId)}/logo?theme=${parsed.theme}`
+  const response = await fetch(endpoint, {
+    headers: {
+      Authorization: `Bearer ${auth.accessToken}`,
+      originator: 'Codex Desktop',
+      'User-Agent': `Codex Desktop/0.1.0 (${process.platform}; ${process.arch})`,
+      ...(auth.accountId ? { 'ChatGPT-Account-Id': auth.accountId } : {}),
+    },
+    signal: AbortSignal.timeout(10_000),
+  })
+  if (!response.ok) throw new Error(`Connector logo fetch failed (${response.status})`)
+
+  const contentType = response.headers.get('content-type') ?? ''
+  if (contentType.includes('application/json')) {
+    const payload = asRecord(await response.json())
+    const body = asRecord(payload?.body)
+    const base64 = readNonEmptyString(body?.base64)
+    const nestedContentType = readNonEmptyString(body?.contentType) ?? readNonEmptyString(body?.content_type)
+    if (!base64 || !nestedContentType) throw new Error('Connector logo response was missing image data')
+    return { contentType: nestedContentType, body: Buffer.from(base64, 'base64') }
+  }
+
+  return {
+    contentType: contentType || 'image/png',
+    body: Buffer.from(await response.arrayBuffer()),
+  }
+}
diff --git a/src/server/methodCatalog.ts b/src/server/methodCatalog.ts
new file mode 100644
index 000000000..5dcc79ecc
--- /dev/null
+++ b/src/server/methodCatalog.ts
@@ -0,0 +1,125 @@
+import { spawn } from 'node:child_process'
+import { mkdtemp, readFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { resolveCodexCommand } from '../commandResolution.js'
+import { getSpawnInvocation } from '../utils/commandInvocation.js'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+export class MethodCatalog {
+  private methodCache: string[] | null = null
+  private notificationCache: string[] | null = null
+
+  private async runGenerateSchemaCommand(outDir: string): Promise<void> {
+    await new Promise<void>((resolve, reject) => {
+      const codexCommand = resolveCodexCommand()
+      if (!codexCommand) {
+        reject(new Error('Codex CLI is not available. Install @openai/codex or set CODEXUI_CODEX_COMMAND.'))
+        return
+      }
+
+      const invocation = getSpawnInvocation(codexCommand, ['app-server', 'generate-json-schema', '--out', outDir])
+      const process = spawn(invocation.command, invocation.args, {
+        stdio: ['ignore', 'ignore', 'pipe'],
+      })
+
+      let stderr = ''
+
+      process.stderr.setEncoding('utf8')
+      process.stderr.on('data', (chunk: string) => {
+        stderr += chunk
+      })
+
+      process.on('error', reject)
+      process.on('exit', (code) => {
+        if (code === 0) {
+          resolve()
+          return
+        }
+
+        reject(new Error(stderr.trim() || `generate-json-schema exited with code ${String(code)}`))
+      })
+    })
+  }
+
+  private extractMethodsFromClientRequest(payload: unknown): string[] {
+    const root = asRecord(payload)
+    const oneOf = Array.isArray(root?.oneOf) ? root.oneOf : []
+    const methods = new Set<string>()
+
+    for (const entry of oneOf) {
+      const row = asRecord(entry)
+      const properties = asRecord(row?.properties)
+      const methodDef = asRecord(properties?.method)
+      const methodEnum = Array.isArray(methodDef?.enum) ? methodDef.enum : []
+
+      for (const item of methodEnum) {
+        if (typeof item === 'string' && item.length > 0) {
+          methods.add(item)
+        }
+      }
+    }
+
+    return Array.from(methods).sort((a, b) => a.localeCompare(b))
+  }
+
+  private extractMethodsFromServerNotification(payload: unknown): string[] {
+    const root = asRecord(payload)
+    const oneOf = Array.isArray(root?.oneOf) ? root.oneOf : []
+    const methods = new Set<string>()
+
+    for (const entry of oneOf) {
+      const row = asRecord(entry)
+      const properties = asRecord(row?.properties)
+      const methodDef = asRecord(properties?.method)
+      const methodEnum = Array.isArray(methodDef?.enum) ? methodDef.enum : []
+
+      for (const item of methodEnum) {
+        if (typeof item === 'string' && item.length > 0) {
+          methods.add(item)
+        }
+      }
+    }
+
+    return Array.from(methods).sort((a, b) => a.localeCompare(b))
+  }
+
+  async listMethods(): Promise<string[]> {
+    if (this.methodCache) {
+      return this.methodCache
+    }
+
+    const outDir = await mkdtemp(join(tmpdir(), 'codex-web-local-schema-'))
+    await this.runGenerateSchemaCommand(outDir)
+
+    const clientRequestPath = join(outDir, 'ClientRequest.json')
+    const raw = await readFile(clientRequestPath, 'utf8')
+    const parsed = JSON.parse(raw) as unknown
+    const methods = this.extractMethodsFromClientRequest(parsed)
+
+    this.methodCache = methods
+    return methods
+  }
+
+  async listNotificationMethods(): Promise<string[]> {
+    if (this.notificationCache) {
+      return this.notificationCache
+    }
+
+    const outDir = await mkdtemp(join(tmpdir(), 'codex-web-local-schema-'))
+    await this.runGenerateSchemaCommand(outDir)
+
+    const serverNotificationPath = join(outDir, 'ServerNotification.json')
+    const raw = await readFile(serverNotificationPath, 'utf8')
+    const parsed = JSON.parse(raw) as unknown
+    const methods = this.extractMethodsFromServerNotification(parsed)
+
+    this.notificationCache = methods
+    return methods
+  }
+}
diff --git a/src/server/projectCreation.ts b/src/server/projectCreation.ts
new file mode 100644
index 000000000..785dfd129
--- /dev/null
+++ b/src/server/projectCreation.ts
@@ -0,0 +1,117 @@
+import { lstat, mkdir, rm, stat } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { isAbsolute, join, resolve } from 'node:path'
+
+const PROJECTLESS_THREAD_DIRECTORY_MAX_ATTEMPTS = 100
+const PROJECTLESS_THREAD_SLUG_MAX_LENGTH = 80
+
+function formatProjectlessDateSegment(date = new Date()): string {
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+function buildProjectlessPromptSlug(prompt: string | null): string {
+  const slug = prompt
+    ?.toLowerCase()
+    .match(/[a-z0-9]+/g)
+    ?.slice(0, 6)
+    .join('-')
+    .slice(0, PROJECTLESS_THREAD_SLUG_MAX_LENGTH)
+  return slug && slug.length > 0 ? slug : 'new-chat'
+}
+
+async function ensureRealDirectory(path: string, label: string): Promise<void> {
+  const info = await lstat(path)
+  if (info.isSymbolicLink() || !info.isDirectory()) {
+    throw new Error(`${label} must be a real directory`)
+  }
+}
+
+export async function createProjectlessThreadDirectory(prompt: string | null): Promise<{ cwd: string; outputDirectory: string; workspaceRoot: string }> {
+  const workspaceRoot = join(homedir(), 'Documents', 'Codex')
+  await mkdir(workspaceRoot, { recursive: true })
+  await ensureRealDirectory(workspaceRoot, 'Projectless workspace root')
+
+  const dateDir = join(workspaceRoot, formatProjectlessDateSegment())
+  await mkdir(dateDir, { recursive: true })
+  await ensureRealDirectory(dateDir, 'Projectless thread date directory')
+
+  const slug = buildProjectlessPromptSlug(prompt)
+  for (let index = 0; index < PROJECTLESS_THREAD_DIRECTORY_MAX_ATTEMPTS; index += 1) {
+    const folderName = index === 0 ? slug : `${slug}-${index + 1}`
+    const cwd = join(dateDir, folderName)
+    try {
+      await mkdir(cwd, { recursive: false })
+      return { cwd, outputDirectory: cwd, workspaceRoot }
+    } catch {
+      try {
+        await stat(cwd)
+      } catch {
+        throw new Error('Failed to create new chat folder')
+      }
+    }
+  }
+
+  throw new Error('Unable to create a unique new chat folder')
+}
+
+function normalizeGithubCloneUrl(rawUrl: string): { url: string; repoName: string } {
+  const trimmedUrl = rawUrl.trim()
+  if (!trimmedUrl) throw new Error('Missing GitHub repository URL')
+
+  const sshMatch = trimmedUrl.match(/^git@github\.com:([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+?)(?:\.git)?$/u)
+  if (sshMatch) {
+    const repoName = sshMatch[2]
+    return { url: `git@github.com:${sshMatch[1]}/${repoName}.git`, repoName }
+  }
+
+  let parsed: URL
+  try {
+    parsed = new URL(trimmedUrl)
+  } catch {
+    throw new Error('Enter a valid GitHub repository URL')
+  }
+  if (parsed.hostname.toLowerCase() !== 'github.com') {
+    throw new Error('Only github.com repository URLs are supported')
+  }
+  const segments = parsed.pathname.split('/').filter(Boolean)
+  if (segments.length < 2) {
+    throw new Error('Enter a GitHub repository URL with owner and repository name')
+  }
+  const owner = segments[0]
+  const repoName = segments[1].replace(/\.git$/iu, '')
+  if (!/^[A-Za-z0-9_.-]+$/u.test(owner) || !/^[A-Za-z0-9_.-]+$/u.test(repoName)) {
+    throw new Error('GitHub repository owner or name contains unsupported characters')
+  }
+  return { url: `https://github.com/${owner}/${repoName}.git`, repoName }
+}
+
+export async function cloneGithubRepositoryIntoBase(
+  rawUrl: string,
+  rawBasePath: string,
+  deps: { runCommand: (command: string, args: string[], options?: { cwd?: string; timeoutMs?: number }) => Promise<void>; persistWorkspaceRoot: (workspaceRoot: string, label?: string) => Promise<void> },
+): Promise<string> {
+  const basePath = rawBasePath.trim()
+  if (!basePath) throw new Error('Missing clone destination folder')
+  const normalizedBasePath = isAbsolute(basePath) ? basePath : resolve(basePath)
+  await ensureRealDirectory(normalizedBasePath, 'Clone destination folder')
+
+  const { url, repoName } = normalizeGithubCloneUrl(rawUrl)
+  const targetPath = join(normalizedBasePath, repoName)
+  try {
+    await stat(targetPath)
+    throw new Error(`Destination already exists: ${targetPath}`)
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException)?.code !== 'ENOENT') throw error
+  }
+
+  try {
+    await deps.runCommand('git', ['clone', url, targetPath], { cwd: normalizedBasePath, timeoutMs: 5 * 60_000 })
+  } catch (error) {
+    await rm(targetPath, { recursive: true, force: true }).catch(() => undefined)
+    throw error
+  }
+  await deps.persistWorkspaceRoot(targetPath, '')
+  return targetPath
+}
diff --git a/src/server/providerModelDiscovery.ts b/src/server/providerModelDiscovery.ts
new file mode 100644
index 000000000..169de8bd8
--- /dev/null
+++ b/src/server/providerModelDiscovery.ts
@@ -0,0 +1,220 @@
+import type { AppServerProcess } from './appServerProcess.js'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+function getErrorMessage(payload: unknown, fallback: string): string {
+  if (payload instanceof Error && payload.message.trim().length > 0) return payload.message
+  const record = asRecord(payload)
+  if (!record) return fallback
+  const error = record.error
+  if (typeof error === 'string' && error.length > 0) return error
+  const nestedError = asRecord(error)
+  if (nestedError && typeof nestedError.message === 'string' && nestedError.message.length > 0) return nestedError.message
+  return fallback
+}
+
+export type ProviderModelsResponse = {
+  data: string[]
+  providerId: string
+  source: 'provider'
+}
+
+const PROVIDER_MODELS_FETCH_TIMEOUT_MS = 5_000
+
+function normalizeHeaderValue(value: unknown): string | null {
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed.length > 0 ? trimmed : null
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  return null
+}
+
+function normalizeQueryParams(value: unknown): URLSearchParams {
+  const params = new URLSearchParams()
+  const record = asRecord(value)
+  if (!record) return params
+
+  for (const [key, rawValue] of Object.entries(record)) {
+    const normalized = normalizeHeaderValue(rawValue)
+    if (!normalized) continue
+    params.set(key, normalized)
+  }
+
+  return params
+}
+
+function buildProviderModelsUrl(baseUrl: string, queryParams: unknown): URL {
+  const url = new URL(baseUrl)
+  url.pathname = url.pathname.endsWith('/') ? `${url.pathname}models` : `${url.pathname}/models`
+  const extraParams = normalizeQueryParams(queryParams)
+  for (const [key, value] of extraParams.entries()) {
+    url.searchParams.set(key, value)
+  }
+  return url
+}
+
+export function normalizeProviderModelsData(payload: unknown): string[] {
+  const record = asRecord(payload)
+  const rows = Array.isArray(record?.data) ? record.data : null
+  if (!rows) {
+    throw new Error('provider /models payload is missing a data array')
+  }
+
+  const ids: string[] = []
+  for (const row of rows) {
+    const entry = asRecord(row)
+    const candidate = readNonEmptyString(entry?.id)
+    if (!candidate || ids.includes(candidate)) continue
+    ids.push(candidate)
+  }
+  return ids
+}
+
+function logProviderModelDiscoveryWarning(message: string, details: Record<string, unknown>): void {
+  console.warn('[codex-provider-models]', message, details)
+}
+
+function isTimeoutError(payload: unknown): boolean {
+  return payload instanceof Error && (payload.name === 'AbortError' || payload.name === 'TimeoutError')
+}
+
+export async function fetchCustomEndpointDefaultModel(baseUrl: string, apiKey: string): Promise<string> {
+  const normalizedBaseUrl = baseUrl.trim()
+  if (!normalizedBaseUrl) return ''
+
+  try {
+    const modelsUrl = buildProviderModelsUrl(normalizedBaseUrl, null)
+    const headers: Record<string, string> = apiKey ? { Authorization: `Bearer ${apiKey}` } : {}
+    const response = await fetch(modelsUrl, { headers, signal: AbortSignal.timeout(PROVIDER_MODELS_FETCH_TIMEOUT_MS) })
+    if (!response.ok) return ''
+    const payload = await response.json() as unknown
+    const modelIds = normalizeProviderModelsData(payload)
+    return modelIds[0] ?? ''
+  } catch {
+    return ''
+  }
+}
+
+export async function readProviderBackedModelIds(appServer: AppServerProcess): Promise<ProviderModelsResponse> {
+  const configPayload = asRecord(await appServer.rpc('config/read', {}))
+  const config = asRecord(configPayload?.config)
+  const providerId = readNonEmptyString(config?.model_provider)
+  if (!providerId) {
+    return { data: [], providerId: '', source: 'provider' }
+  }
+
+  const providers = asRecord(config?.model_providers)
+  const provider = asRecord(providers?.[providerId])
+  if (!provider) {
+    logProviderModelDiscoveryWarning('configured provider is missing from model_providers', { providerId })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  const wireApi = readNonEmptyString(provider.wire_api)
+  if (wireApi !== 'responses') {
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  const baseUrl = readNonEmptyString(provider.base_url)
+  if (!baseUrl) {
+    logProviderModelDiscoveryWarning('responses provider is missing base_url', { providerId })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  const headers = new Headers()
+  const configuredHeaders = asRecord(provider.http_headers)
+  if (configuredHeaders) {
+    for (const [key, rawValue] of Object.entries(configuredHeaders)) {
+      const normalized = normalizeHeaderValue(rawValue)
+      if (!normalized) continue
+      headers.set(key, normalized)
+    }
+  }
+
+  const bearerToken = readNonEmptyString(provider.experimental_bearer_token)
+  if (bearerToken && !headers.has('Authorization')) {
+    headers.set('Authorization', `Bearer ${bearerToken}`)
+  }
+
+  const envKey = readNonEmptyString(provider.env_key)
+  const envHttpHeaders = asRecord(provider.env_http_headers)
+  if (envKey || envHttpHeaders) {
+    logProviderModelDiscoveryWarning('provider discovery skipped env-backed auth/header expansion', {
+      providerId,
+      hasEnvKey: Boolean(envKey),
+      hasEnvHttpHeaders: Boolean(envHttpHeaders),
+    })
+  }
+
+  let requestUrl: URL
+  try {
+    requestUrl = buildProviderModelsUrl(baseUrl, provider.query_params)
+  } catch (error) {
+    logProviderModelDiscoveryWarning('provider /models URL was invalid', {
+      providerId,
+      error: getErrorMessage(error, 'invalid url'),
+    })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  let response: Response
+  try {
+    response = await fetch(requestUrl, {
+      method: 'GET',
+      headers,
+      signal: AbortSignal.timeout(PROVIDER_MODELS_FETCH_TIMEOUT_MS),
+    })
+  } catch (error) {
+    logProviderModelDiscoveryWarning('provider /models request failed', {
+      providerId,
+      error: isTimeoutError(error) ? `request timed out after ${PROVIDER_MODELS_FETCH_TIMEOUT_MS}ms` : getErrorMessage(error, 'network error'),
+    })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  let payload: unknown = null
+  try {
+    payload = await response.json()
+  } catch (error) {
+    logProviderModelDiscoveryWarning('provider /models response was not valid JSON', {
+      providerId,
+      status: response.status,
+      error: getErrorMessage(error, 'invalid json'),
+    })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  if (!response.ok) {
+    logProviderModelDiscoveryWarning('provider /models request returned non-2xx', {
+      providerId,
+      status: response.status,
+      statusText: response.statusText,
+    })
+    return { data: [], providerId, source: 'provider' }
+  }
+
+  try {
+    return {
+      data: normalizeProviderModelsData(payload),
+      providerId,
+      source: 'provider',
+    }
+  } catch (error) {
+    logProviderModelDiscoveryWarning('provider /models payload was invalid', {
+      providerId,
+      error: getErrorMessage(error, 'invalid payload'),
+    })
+    return { data: [], providerId, source: 'provider' }
+  }
+}
diff --git a/src/server/sessionRecovery.ts b/src/server/sessionRecovery.ts
new file mode 100644
index 000000000..d1256265a
--- /dev/null
+++ b/src/server/sessionRecovery.ts
@@ -0,0 +1,738 @@
+import { readFile, rm, stat, writeFile } from 'node:fs/promises'
+import { isAbsolute, join } from 'node:path'
+
+type SessionRecoveryCommandDeps = {
+  runCommand: (command: string, args: string[], options?: { cwd?: string; timeoutMs?: number }) => Promise<void>
+  runCommandCapture: (command: string, args: string[], options?: { cwd?: string }) => Promise<string>
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+export type SessionRecoveredFileChange = {
+  path: string
+  operation: 'add' | 'delete' | 'update'
+  movedToPath: string | null
+  diff: string
+  addedLineCount: number
+  removedLineCount: number
+}
+
+export type SessionRecoveredTurnFileChanges = {
+  turnId: string
+  turnIndex: number
+  fileChanges: SessionRecoveredFileChange[]
+}
+
+function countRecoveredContentLines(value: string): number {
+  if (!value) return 0
+  const normalized = value.replace(/\r\n/g, '\n')
+  const trimmed = normalized.endsWith('\n') ? normalized.slice(0, -1) : normalized
+  if (!trimmed) return 0
+  return trimmed.split('\n').length
+}
+
+function countRecoveredPatchLines(value: string): { addedLineCount: number; removedLineCount: number } {
+  let addedLineCount = 0
+  let removedLineCount = 0
+
+  for (const line of value.replace(/\r\n/g, '\n').split('\n')) {
+    if (!line) continue
+    if (line.startsWith('+++') || line.startsWith('---') || line.startsWith('@@')) continue
+    if (line.startsWith('+')) {
+      addedLineCount += 1
+      continue
+    }
+    if (line.startsWith('-')) {
+      removedLineCount += 1
+    }
+  }
+
+  return { addedLineCount, removedLineCount }
+}
+
+function mergeRecoveredDiff(first: string, second: string): string {
+  if (!first) return second
+  if (!second || first === second) return first
+  return `${first}\n${second}`.trim()
+}
+
+function mergeRecoveredFileChange(first: SessionRecoveredFileChange, second: SessionRecoveredFileChange): SessionRecoveredFileChange {
+  const operation = first.operation === 'add' || second.operation === 'add'
+    ? 'add'
+    : first.operation === 'delete' || second.operation === 'delete'
+      ? 'delete'
+      : 'update'
+
+  return {
+    path: second.path || first.path,
+    operation,
+    movedToPath: second.movedToPath ?? first.movedToPath ?? null,
+    diff: mergeRecoveredDiff(first.diff, second.diff),
+    addedLineCount: first.addedLineCount + second.addedLineCount,
+    removedLineCount: first.removedLineCount + second.removedLineCount,
+  }
+}
+
+function isApplyPatchSectionBoundary(value: string): boolean {
+  return value.startsWith('*** Update File: ')
+    || value.startsWith('*** Add File: ')
+    || value.startsWith('*** Delete File: ')
+    || value === '*** End Patch'
+}
+
+function parseApplyPatchInput(input: string): SessionRecoveredFileChange[] {
+  const normalized = input.replace(/\r\n/g, '\n')
+  const lines = normalized.split('\n')
+  const changes: SessionRecoveredFileChange[] = []
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index] ?? ''
+
+    if (line.startsWith('*** Add File: ')) {
+      const path = line.slice('*** Add File: '.length).trim()
+      const contentLines: string[] = []
+      for (index += 1; index < lines.length; index += 1) {
+        const nextLine = lines[index] ?? ''
+        if (isApplyPatchSectionBoundary(nextLine)) {
+          index -= 1
+          break
+        }
+        contentLines.push(nextLine.startsWith('+') ? nextLine.slice(1) : nextLine)
+      }
+      const diff = contentLines.join('\n').trimEnd()
+      if (path) {
+        changes.push({
+          path,
+          operation: 'add',
+          movedToPath: null,
+          diff,
+          addedLineCount: countRecoveredContentLines(diff),
+          removedLineCount: 0,
+        })
+      }
+      continue
+    }
+
+    if (line.startsWith('*** Delete File: ')) {
+      const path = line.slice('*** Delete File: '.length).trim()
+      if (path) {
+        changes.push({
+          path,
+          operation: 'delete',
+          movedToPath: null,
+          diff: '',
+          addedLineCount: 0,
+          removedLineCount: 0,
+        })
+      }
+      continue
+    }
+
+    if (line.startsWith('*** Update File: ')) {
+      const path = line.slice('*** Update File: '.length).trim()
+      let movedToPath: string | null = null
+      const diffLines: string[] = []
+
+      for (index += 1; index < lines.length; index += 1) {
+        const nextLine = lines[index] ?? ''
+        if (nextLine.startsWith('*** Move to: ')) {
+          const moved = nextLine.slice('*** Move to: '.length).trim()
+          movedToPath = moved || null
+          continue
+        }
+        if (isApplyPatchSectionBoundary(nextLine)) {
+          index -= 1
+          break
+        }
+        diffLines.push(nextLine)
+      }
+
+      const diff = diffLines.join('\n').trimEnd()
+      const counts = countRecoveredPatchLines(diff)
+      if (path) {
+        changes.push({
+          path,
+          operation: 'update',
+          movedToPath,
+          diff,
+          ...counts,
+        })
+      }
+    }
+  }
+
+  return changes
+}
+
+export function buildSessionFileChangeFallback(threadReadPayload: unknown, sessionLogRaw: string): SessionRecoveredTurnFileChanges[] {
+  const payload = asRecord(threadReadPayload)
+  const thread = asRecord(payload?.thread)
+  const turns = Array.isArray(thread?.turns) ? thread.turns : []
+  const turnIndexById = new Map<string, number>()
+
+  for (let turnIndex = 0; turnIndex < turns.length; turnIndex += 1) {
+    const turnRecord = asRecord(turns[turnIndex])
+    const turnId = readNonEmptyString(turnRecord?.id)
+    if (turnId) {
+      turnIndexById.set(turnId, turnIndex)
+    }
+  }
+
+  const collectedByTurnId = new Map<string, SessionRecoveredFileChange[]>()
+  let currentTurnId = ''
+
+  for (const line of sessionLogRaw.split('\n')) {
+    if (!line.trim()) continue
+    let row: Record<string, unknown> | null = null
+    try {
+      row = JSON.parse(line) as Record<string, unknown>
+    } catch {
+      continue
+    }
+
+    if (row.type === 'turn_context') {
+      const payloadRecord = asRecord(row.payload)
+      currentTurnId = readNonEmptyString(payloadRecord?.turn_id) || currentTurnId
+      continue
+    }
+
+    if (row.type !== 'response_item' || !currentTurnId || !turnIndexById.has(currentTurnId)) {
+      continue
+    }
+
+    const payloadRecord = asRecord(row.payload)
+    if (
+      payloadRecord?.type !== 'custom_tool_call'
+      || payloadRecord.name !== 'apply_patch'
+      || payloadRecord.status !== 'completed'
+    ) {
+      continue
+    }
+
+    const input = readNonEmptyString(payloadRecord.input)
+    if (!input) continue
+
+    const parsedChanges = parseApplyPatchInput(input)
+    if (parsedChanges.length === 0) continue
+
+    const previous = collectedByTurnId.get(currentTurnId) ?? []
+    previous.push(...parsedChanges)
+    collectedByTurnId.set(currentTurnId, previous)
+  }
+
+  const recovered: SessionRecoveredTurnFileChanges[] = []
+  for (const [turnId, fileChanges] of collectedByTurnId.entries()) {
+    const turnIndex = turnIndexById.get(turnId)
+    if (typeof turnIndex !== 'number' || fileChanges.length === 0) continue
+
+    const mergedByPath = new Map<string, SessionRecoveredFileChange>()
+    for (const fileChange of fileChanges) {
+      const key = `${fileChange.path}\u0000${fileChange.movedToPath ?? ''}`
+      const previous = mergedByPath.get(key)
+      mergedByPath.set(key, previous ? mergeRecoveredFileChange(previous, fileChange) : { ...fileChange })
+    }
+
+    recovered.push({
+      turnId,
+      turnIndex,
+      fileChanges: Array.from(mergedByPath.values()),
+    })
+  }
+
+  return recovered.sort((first, second) => first.turnIndex - second.turnIndex)
+}
+
+type SessionRecoveredCommand = {
+  id: string
+  type: 'commandExecution'
+  command: string
+  cwd: string | null
+  status: 'completed' | 'failed'
+  aggregatedOutput: string
+  exitCode: number | null
+  durationMs: number | null
+}
+
+function parseExecCommandOutput(output: string): { exitCode: number | null; wallTime: number | null; cleanOutput: string } {
+  let exitCode: number | null = null
+  let wallTime: number | null = null
+  const outputLines: string[] = []
+  let pastHeader = false
+
+  for (const line of output.split('\n')) {
+    if (!pastHeader) {
+      const exitMatch = line.match(/^Process exited with code (\d+)/)
+      if (exitMatch) {
+        exitCode = Number.parseInt(exitMatch[1]!, 10)
+        continue
+      }
+      const wallMatch = line.match(/^Wall time:\s+([\d.]+)\s+seconds/)
+      if (wallMatch) {
+        wallTime = Math.round(Number.parseFloat(wallMatch[1]!) * 1000)
+        continue
+      }
+      if (line.startsWith('Command:') || line.startsWith('Chunk ID:') || line.startsWith('Original token count:')) {
+        continue
+      }
+      if (line === 'Output:') {
+        pastHeader = true
+        continue
+      }
+    }
+    outputLines.push(line)
+  }
+
+  return { exitCode, wallTime, cleanOutput: outputLines.join('\n').trimEnd() }
+}
+
+export type SessionRecoveredFileChangeItem = {
+  id: string
+  type: 'fileChange'
+  status: 'completed'
+  changes: Record<string, unknown>[]
+}
+
+type SessionItemSlot = {
+  type: 'agentMessage' | 'commandExecution' | 'fileChange'
+  command?: SessionRecoveredCommand
+  fileChange?: SessionRecoveredFileChangeItem
+}
+
+function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map<string, SessionItemSlot[]> {
+  let currentTurnId = ''
+  const orderByTurnId = new Map<string, SessionItemSlot[]>()
+  const callIdToCommand = new Map<string, SessionRecoveredCommand>()
+
+  for (const line of sessionLogRaw.split('\n')) {
+    if (!line.trim()) continue
+    let row: Record<string, unknown> | null = null
+    try {
+      row = JSON.parse(line) as Record<string, unknown>
+    } catch {
+      continue
+    }
+
+    if (row.type === 'turn_context') {
+      const p = asRecord(row.payload)
+      currentTurnId = readNonEmptyString(p?.turn_id) || currentTurnId
+      continue
+    }
+    if (row.type === 'event_msg') {
+      const p = asRecord(row.payload)
+      if (p?.type === 'task_started') {
+        currentTurnId = readNonEmptyString(p.turn_id) || currentTurnId
+      }
+      continue
+    }
+
+    if (row.type !== 'response_item' || !currentTurnId || !turnIds.has(currentTurnId)) continue
+    const payload = asRecord(row.payload)
+    if (!payload) continue
+
+    let slots = orderByTurnId.get(currentTurnId)
+    if (!slots) {
+      slots = []
+      orderByTurnId.set(currentTurnId, slots)
+    }
+
+    if (payload.type === 'message' && payload.role === 'assistant') {
+      slots.push({ type: 'agentMessage' })
+      continue
+    }
+
+    if (payload.type === 'function_call' && payload.name === 'exec_command') {
+      const callId = readNonEmptyString(payload.call_id)
+      if (!callId) continue
+      let cmd = ''
+      try {
+        const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
+        cmd = typeof args.cmd === 'string' ? args.cmd : ''
+      } catch { /* empty */ }
+      const command: SessionRecoveredCommand = {
+        id: `session-cmd-${callId}`,
+        type: 'commandExecution',
+        command: cmd,
+        cwd: null,
+        status: 'completed',
+        aggregatedOutput: '',
+        exitCode: null,
+        durationMs: null,
+      }
+      callIdToCommand.set(callId, command)
+      slots.push({ type: 'commandExecution', command })
+      continue
+    }
+
+    if (payload.type === 'function_call_output') {
+      const callId = readNonEmptyString(payload.call_id)
+      if (!callId) continue
+      const existing = callIdToCommand.get(callId)
+      if (!existing) continue
+      const rawOutput = typeof payload.output === 'string' ? payload.output : ''
+      const parsed = parseExecCommandOutput(rawOutput)
+      existing.aggregatedOutput = parsed.cleanOutput
+      existing.exitCode = parsed.exitCode
+      existing.durationMs = parsed.wallTime
+      existing.status = parsed.exitCode === 0 || parsed.exitCode === null ? 'completed' : 'failed'
+    }
+
+    if (payload.type === 'custom_tool_call' && payload.name === 'apply_patch' && payload.status === 'completed') {
+      const input = typeof payload.input === 'string' ? payload.input : ''
+      const callId = readNonEmptyString(payload.call_id)
+      if (!input || !callId) continue
+      const parsedChanges = parseApplyPatchInput(input)
+      if (parsedChanges.length === 0) continue
+      const fcItem: SessionRecoveredFileChangeItem = {
+        id: `session-fc-${callId}`,
+        type: 'fileChange',
+        status: 'completed',
+        changes: parsedChanges.map((fc) => ({
+          ...fc,
+          kind: { type: fc.operation, ...(fc.movedToPath ? { move_path: fc.movedToPath } : {}) },
+        })),
+      }
+      slots.push({ type: 'fileChange', fileChange: fcItem })
+    }
+  }
+
+  return orderByTurnId
+}
+
+function extractFilePathsFromCommand(cmd: string, cwd: string): string[] {
+  const paths: string[] = []
+  const absPathPattern = /(?:^|\s|>>|>|<)(\/?(?:Users|home|tmp|var|etc|root)\/[^\s;|&><"']+)/g
+  let match: RegExpExecArray | null
+  while ((match = absPathPattern.exec(cmd)) !== null) {
+    const p = match[1]?.trim()
+    if (p && !p.endsWith('/') && !p.startsWith('-')) paths.push(p)
+  }
+
+  const redirectPattern = /(?:>>?|cat\s*>\s*)([^\s;|&><"']+)/g
+  while ((match = redirectPattern.exec(cmd)) !== null) {
+    const p = match[1]?.trim()
+    if (p && !p.startsWith('-') && !p.startsWith('/dev/')) {
+      paths.push(isAbsolute(p) ? p : join(cwd, p))
+    }
+  }
+
+  return [...new Set(paths)]
+}
+
+export type CollectedTurnFileInfo = {
+  patchInputs: { callId: string; input: string }[]
+  commandFilePaths: string[]
+}
+
+export function collectFileChangesForTurns(
+  sessionLogRaw: string,
+  turnIdsToRevert: Set<string>,
+  cwd: string,
+): Map<string, CollectedTurnFileInfo> {
+  let currentTurnId = ''
+  const infoByTurnId = new Map<string, CollectedTurnFileInfo>()
+
+  for (const line of sessionLogRaw.split('\n')) {
+    if (!line.trim()) continue
+    let row: Record<string, unknown> | null = null
+    try {
+      row = JSON.parse(line) as Record<string, unknown>
+    } catch {
+      continue
+    }
+
+    if (row.type === 'turn_context') {
+      const p = asRecord(row.payload)
+      currentTurnId = readNonEmptyString(p?.turn_id) || currentTurnId
+      continue
+    }
+    if (row.type === 'event_msg') {
+      const p = asRecord(row.payload)
+      if (p?.type === 'task_started') {
+        currentTurnId = readNonEmptyString(p.turn_id) || currentTurnId
+      }
+      continue
+    }
+
+    if (row.type !== 'response_item' || !currentTurnId || !turnIdsToRevert.has(currentTurnId)) continue
+    const payload = asRecord(row.payload)
+    if (!payload) continue
+
+    let info = infoByTurnId.get(currentTurnId)
+    if (!info) {
+      info = { patchInputs: [], commandFilePaths: [] }
+      infoByTurnId.set(currentTurnId, info)
+    }
+
+    if (payload.type === 'custom_tool_call' && payload.name === 'apply_patch' && payload.status === 'completed') {
+      const input = typeof payload.input === 'string' ? payload.input : ''
+      const callId = readNonEmptyString(payload.call_id)
+      if (input && callId) {
+        info.patchInputs.push({ callId, input })
+      }
+    }
+
+    if (payload.type === 'function_call' && payload.name === 'exec_command') {
+      let cmd = ''
+      try {
+        const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
+        cmd = typeof args.cmd === 'string' ? args.cmd : ''
+      } catch { /* empty */ }
+      if (cmd) {
+        const extracted = extractFilePathsFromCommand(cmd, cwd)
+        for (const p of extracted) {
+          if (!info.commandFilePaths.includes(p)) info.commandFilePaths.push(p)
+        }
+      }
+    }
+  }
+
+  return infoByTurnId
+}
+
+function reverseV4aDiff(fileContent: string, diffText: string): string | null {
+  const fileLines = fileContent.split('\n')
+  const rawDiffLines = diffText.split('\n')
+  while (rawDiffLines.length > 0 && rawDiffLines[rawDiffLines.length - 1]?.trim() === '') rawDiffLines.pop()
+  const diffLines = rawDiffLines
+  const result = [...fileLines]
+
+  type DiffEntry = { type: 'context' | 'add' | 'remove'; text: string }
+  const hunks: DiffEntry[][] = []
+  let currentHunk: DiffEntry[] | null = null
+
+  for (const dl of diffLines) {
+    if (dl.startsWith('@@')) {
+      if (currentHunk) hunks.push(currentHunk)
+      currentHunk = []
+      continue
+    }
+    if (!currentHunk) continue
+    if (dl.startsWith('+')) {
+      currentHunk.push({ type: 'add', text: dl.slice(1) })
+    } else if (dl.startsWith('-')) {
+      currentHunk.push({ type: 'remove', text: dl.slice(1) })
+    } else if (dl.startsWith(' ')) {
+      currentHunk.push({ type: 'context', text: dl.slice(1) })
+    } else {
+      currentHunk.push({ type: 'context', text: dl })
+    }
+  }
+  if (currentHunk) hunks.push(currentHunk)
+
+  for (let hi = hunks.length - 1; hi >= 0; hi--) {
+    const hunk = hunks[hi]!
+    const expectedSequence = hunk
+      .filter((e) => e.type === 'context' || e.type === 'add')
+      .map((e) => e.text)
+
+    if (expectedSequence.length === 0) continue
+
+    let seqStart = -1
+    outer: for (let ri = result.length - expectedSequence.length; ri >= 0; ri--) {
+      for (let si = 0; si < expectedSequence.length; si++) {
+        if (result[ri + si] !== expectedSequence[si]) continue outer
+      }
+      seqStart = ri
+      break
+    }
+
+    if (seqStart < 0) return null
+
+    const newLines: string[] = []
+    let seqIdx = 0
+    for (const entry of hunk) {
+      if (entry.type === 'context') {
+        newLines.push(result[seqStart + seqIdx]!)
+        seqIdx++
+      } else if (entry.type === 'add') {
+        seqIdx++
+      } else if (entry.type === 'remove') {
+        newLines.push(entry.text)
+      }
+    }
+
+    result.splice(seqStart, expectedSequence.length, ...newLines)
+  }
+
+  return result.join('\n')
+}
+
+export async function revertTurnFileChanges(
+  cwd: string,
+  turnInfos: Map<string, CollectedTurnFileInfo>,
+  deps: SessionRecoveryCommandDeps,
+): Promise<{ reverted: number; errors: string[] }> {
+  if (turnInfos.size === 0) return { reverted: 0, errors: [] }
+
+  let reverted = 0
+  const errors: string[] = []
+
+  const allEntries = [...turnInfos.values()]
+  const allPatchInputs = allEntries.flatMap((info) => info.patchInputs).reverse()
+  const allCommandPaths = new Set(allEntries.flatMap((info) => info.commandFilePaths))
+
+  let isGitRepo = false
+  let gitRoot = ''
+  try {
+    gitRoot = await deps.runCommandCapture('git', ['rev-parse', '--show-toplevel'], { cwd })
+    isGitRepo = !!gitRoot
+  } catch { /* not a git repo */ }
+
+  const trackedFiles = new Set<string>()
+  if (isGitRepo) {
+    try {
+      const tracked = await deps.runCommandCapture('git', ['ls-files', '--full-name'], { cwd: gitRoot })
+      for (const f of tracked.split('\n')) {
+        if (f.trim()) trackedFiles.add(join(gitRoot, f.trim()))
+      }
+    } catch { /* empty */ }
+  }
+
+  const patchRevertedPaths = new Set<string>()
+
+  for (const patch of allPatchInputs) {
+    const changes = parseApplyPatchInput(patch.input)
+    for (let ci = changes.length - 1; ci >= 0; ci--) {
+      const change = changes[ci]!
+      const filePath = isAbsolute(change.path) ? change.path : join(cwd, change.path)
+
+      try {
+        if (change.operation === 'add') {
+          const fileStat = await stat(filePath).catch(() => null)
+          if (fileStat) {
+            await rm(filePath, { force: true })
+            reverted++
+            patchRevertedPaths.add(filePath)
+          }
+        } else if (change.operation === 'update' && change.diff) {
+          let reversed = false
+          try {
+            const currentContent = await readFile(filePath, 'utf8')
+            const newContent = reverseV4aDiff(currentContent, change.diff)
+            if (newContent !== null && newContent !== currentContent) {
+              const { writeFile } = await import('node:fs/promises')
+              await writeFile(filePath, newContent)
+              reverted++
+              patchRevertedPaths.add(filePath)
+              reversed = true
+            }
+          } catch { /* file read/write failed */ }
+
+          if (!reversed) {
+            const isTracked = trackedFiles.has(filePath)
+            if (isTracked && isGitRepo) {
+              const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
+              try {
+                await deps.runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
+                reverted++
+                patchRevertedPaths.add(filePath)
+              } catch {
+                errors.push(`Could not revert: ${filePath}`)
+              }
+            } else {
+              errors.push(`Could not reverse patch for untracked file: ${filePath}`)
+            }
+          }
+        } else if (change.operation === 'delete') {
+          const isTracked = trackedFiles.has(filePath)
+          if (isTracked && isGitRepo) {
+            const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
+            try {
+              await deps.runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
+              reverted++
+              patchRevertedPaths.add(filePath)
+            } catch {
+              errors.push(`Could not restore deleted file: ${filePath}`)
+            }
+          }
+        }
+      } catch (err) {
+        errors.push(`Failed to revert patch for ${filePath}: ${err instanceof Error ? err.message : String(err)}`)
+      }
+    }
+  }
+
+  for (const filePath of allCommandPaths) {
+    if (patchRevertedPaths.has(filePath)) continue
+    const isTracked = trackedFiles.has(filePath)
+    if (isTracked && isGitRepo) {
+      const relativePath = filePath.startsWith(gitRoot + '/') ? filePath.slice(gitRoot.length + 1) : filePath
+      try {
+        await deps.runCommand('git', ['checkout', 'HEAD', '--', relativePath], { cwd: gitRoot })
+        reverted++
+      } catch {
+        errors.push(`Could not restore command-modified file: ${filePath}`)
+      }
+    }
+  }
+
+  return { reverted, errors }
+}
+
+export function mergeSessionCommandsIntoTurns(turns: unknown[], sessionLogRaw: string): unknown[] {
+  const turnIds = new Set<string>()
+  for (const turn of turns) {
+    const turnRecord = asRecord(turn)
+    const turnId = readNonEmptyString(turnRecord?.id)
+    if (turnId) turnIds.add(turnId)
+  }
+
+  if (turnIds.size === 0) return turns
+
+  const orderByTurnId = buildSessionItemOrder(sessionLogRaw, turnIds)
+  if (orderByTurnId.size === 0) return turns
+
+  return turns.map((turn) => {
+    const turnRecord = asRecord(turn)
+    if (!turnRecord) return turn
+    const turnId = readNonEmptyString(turnRecord.id)
+    if (!turnId) return turn
+
+    const slots = orderByTurnId.get(turnId)
+    if (!slots || slots.length === 0) return turn
+
+    const existingItems = Array.isArray(turnRecord.items) ? (turnRecord.items as Record<string, unknown>[]) : []
+    const alreadyHasRecoveredItems = existingItems.some((it) => it.type === 'commandExecution' || it.type === 'fileChange')
+    if (alreadyHasRecoveredItems) return turn
+
+    const agentMessages = existingItems.filter((it) => it.type === 'agentMessage')
+    const nonAgentNonUserItems = existingItems.filter((it) => it.type !== 'agentMessage' && it.type !== 'userMessage')
+    const userMessages = existingItems.filter((it) => it.type === 'userMessage')
+
+    let agentIdx = 0
+    const interleaved: Record<string, unknown>[] = [...userMessages]
+
+    for (const slot of slots) {
+      if (slot.type === 'agentMessage') {
+        if (agentIdx < agentMessages.length) {
+          interleaved.push(agentMessages[agentIdx]!)
+          agentIdx++
+        }
+      } else if (slot.type === 'commandExecution' && slot.command) {
+        interleaved.push(slot.command as unknown as Record<string, unknown>)
+      } else if (slot.type === 'fileChange' && slot.fileChange) {
+        interleaved.push(slot.fileChange as unknown as Record<string, unknown>)
+      }
+    }
+
+    while (agentIdx < agentMessages.length) {
+      interleaved.push(agentMessages[agentIdx]!)
+      agentIdx++
+    }
+
+    interleaved.push(...nonAgentNonUserItems)
+
+    return {
+      ...turnRecord,
+      items: interleaved,
+    }
+  })
+}
diff --git a/src/server/terminalQuickCommands.ts b/src/server/terminalQuickCommands.ts
new file mode 100644
index 000000000..547428bf1
--- /dev/null
+++ b/src/server/terminalQuickCommands.ts
@@ -0,0 +1,147 @@
+import { existsSync } from 'node:fs'
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { isAbsolute, join, resolve } from 'node:path'
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+export type TerminalQuickCommand = {
+  label: string
+  value: string
+  source: 'package' | 'script' | 'make'
+}
+
+export async function listTerminalQuickCommands(cwd: string): Promise<TerminalQuickCommand[]> {
+  const normalizedCwd = isAbsolute(cwd) ? cwd : resolve(cwd)
+  const info = await stat(normalizedCwd)
+  if (!info.isDirectory()) {
+    throw new Error('Terminal cwd is not a directory')
+  }
+
+  const commands: TerminalQuickCommand[] = []
+  const seen = new Set<string>()
+  const addCommand = (command: TerminalQuickCommand) => {
+    if (!command.value || seen.has(command.value)) return
+    seen.add(command.value)
+    commands.push(command)
+  }
+
+  await addPackageJsonCommands(normalizedCwd, addCommand)
+  await addMakefileCommands(normalizedCwd, addCommand)
+  await addRootScriptCommands(normalizedCwd, addCommand)
+  await addScriptsDirectoryCommands(normalizedCwd, addCommand)
+  return commands
+}
+
+async function addPackageJsonCommands(
+  cwd: string,
+  addCommand: (command: TerminalQuickCommand) => void,
+): Promise<void> {
+  try {
+    const raw = await readFile(join(cwd, 'package.json'), 'utf8')
+    const parsed = JSON.parse(raw) as unknown
+    const record = asRecord(parsed)
+    const scripts = asRecord(record?.scripts)
+    if (!scripts) return
+    const packageManager = resolvePackageManager(cwd)
+    for (const scriptName of Object.keys(scripts)) {
+      if (typeof scripts[scriptName] !== 'string') continue
+      const value = formatPackageScriptCommand(packageManager, scriptName)
+      addCommand({
+        label: value,
+        value,
+        source: 'package',
+      })
+    }
+  } catch {
+    // A project without package.json simply has no package quick commands.
+  }
+}
+
+async function addMakefileCommands(
+  cwd: string,
+  addCommand: (command: TerminalQuickCommand) => void,
+): Promise<void> {
+  const makefilePath = existsSync(join(cwd, 'Makefile'))
+    ? join(cwd, 'Makefile')
+    : existsSync(join(cwd, 'makefile'))
+      ? join(cwd, 'makefile')
+      : ''
+  if (!makefilePath) return
+
+  try {
+    const raw = await readFile(makefilePath, 'utf8')
+    for (const line of raw.split(/\r?\n/)) {
+      const match = /^([A-Za-z0-9_.@%/+~-][A-Za-z0-9_.@%/+~-]*)\s*:(?![=])/.exec(line)
+      if (!match) continue
+      const target = match[1]
+      if (!target || target.startsWith('.')) continue
+      const value = `make ${quoteShellTokenIfNeeded(target)}`
+      addCommand({
+        label: value,
+        value,
+        source: 'make',
+      })
+    }
+  } catch {
+    // Ignore unreadable Makefiles for quick-command discovery.
+  }
+}
+
+async function addRootScriptCommands(
+  cwd: string,
+  addCommand: (command: TerminalQuickCommand) => void,
+): Promise<void> {
+  await addScriptFileCommands(cwd, '.', addCommand)
+}
+
+async function addScriptsDirectoryCommands(
+  cwd: string,
+  addCommand: (command: TerminalQuickCommand) => void,
+): Promise<void> {
+  await addScriptFileCommands(join(cwd, 'scripts'), './scripts', addCommand)
+}
+
+async function addScriptFileCommands(
+  directory: string,
+  commandPrefix: string,
+  addCommand: (command: TerminalQuickCommand) => void,
+): Promise<void> {
+  try {
+    const entries = await readdir(directory, { withFileTypes: true })
+    for (const entry of entries) {
+      if (!entry.isFile()) continue
+      if (!entry.name.endsWith('.sh') && !entry.name.endsWith('.cmd')) continue
+      const value = `${commandPrefix}/${quoteShellTokenIfNeeded(entry.name)}`
+      addCommand({
+        label: value,
+        value,
+        source: 'script',
+      })
+    }
+  } catch {
+    // A project without script files simply has no script-file quick commands.
+  }
+}
+
+function resolvePackageManager(cwd: string): 'npm' | 'pnpm' | 'yarn' | 'bun' {
+  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return 'pnpm'
+  if (existsSync(join(cwd, 'yarn.lock'))) return 'yarn'
+  if (existsSync(join(cwd, 'bun.lock')) || existsSync(join(cwd, 'bun.lockb'))) return 'bun'
+  return 'npm'
+}
+
+function formatPackageScriptCommand(packageManager: 'npm' | 'pnpm' | 'yarn' | 'bun', scriptName: string): string {
+  const quoted = quoteShellTokenIfNeeded(scriptName)
+  if (packageManager === 'npm') return `npm run ${quoted}`
+  if (packageManager === 'pnpm') return `pnpm run ${quoted}`
+  if (packageManager === 'bun') return `bun run ${quoted}`
+  return `yarn ${quoted}`
+}
+
+function quoteShellTokenIfNeeded(value: string): string {
+  return /^[A-Za-z0-9_./:@-]+$/.test(value) ? value : `'${value.replace(/'/g, `'\\''`)}'`
+}
diff --git a/src/server/threadAutomations.ts b/src/server/threadAutomations.ts
new file mode 100644
index 000000000..a19f7680e
--- /dev/null
+++ b/src/server/threadAutomations.ts
@@ -0,0 +1,420 @@
+import { randomBytes } from 'node:crypto'
+import { mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import { isAbsoluteLikePath } from '../pathUtils.js'
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getCodexAutomationsDir(): string {
+  return join(getCodexHomeDir(), 'automations')
+}
+
+export type ThreadAutomationStatus = 'ACTIVE' | 'PAUSED'
+
+export type ThreadAutomationRecord = {
+  id: string
+  kind: 'heartbeat' | 'cron'
+  name: string
+  prompt: string
+  rrule: string
+  status: ThreadAutomationStatus
+  targetThreadId: string | null
+  cwds: string[]
+  extraTomlLines: string[]
+  createdAtMs: number | null
+  updatedAtMs: number | null
+  nextRunAtMs: number | null
+}
+
+function readTomlString(value: string): string {
+  const trimmed = value.trim()
+  if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith('\'') && trimmed.endsWith('\''))) {
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return trimmed.slice(1, -1)
+    }
+  }
+  return trimmed
+}
+
+function serializeTomlString(value: string): string {
+  return JSON.stringify(value)
+}
+
+function parseTomlStringArray(value: string): string[] {
+  const trimmed = value.trim()
+  if (!trimmed.startsWith('[') || !trimmed.endsWith(']')) return []
+  try {
+    const parsed = JSON.parse(trimmed)
+    return Array.isArray(parsed)
+      ? parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+      : []
+  } catch {
+    return []
+  }
+}
+
+function serializeTomlStringArray(values: string[]): string {
+  return `[${values.map((value) => serializeTomlString(value)).join(', ')}]`
+}
+
+function parseAutomationToml(raw: string): ThreadAutomationRecord | null {
+  const values: Record<string, string> = {}
+  const extraTomlLines: string[] = []
+  const knownKeys = new Set([
+    'version',
+    'id',
+    'kind',
+    'name',
+    'prompt',
+    'status',
+    'rrule',
+    'target_thread_id',
+    'cwds',
+    'created_at',
+    'updated_at',
+  ])
+  let isInsideExtraTable = false
+  for (const line of raw.split(/\r?\n/u)) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) continue
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+      isInsideExtraTable = true
+      extraTomlLines.push(trimmed)
+      continue
+    }
+    if (isInsideExtraTable) {
+      extraTomlLines.push(trimmed)
+      continue
+    }
+    if (!trimmed.includes('=')) {
+      extraTomlLines.push(trimmed)
+      continue
+    }
+    const separatorIndex = trimmed.indexOf('=')
+    const key = trimmed.slice(0, separatorIndex).trim()
+    const value = trimmed.slice(separatorIndex + 1).trim()
+    if (!key) continue
+    if (knownKeys.has(key)) {
+      values[key] = value
+    } else {
+      extraTomlLines.push(trimmed)
+    }
+  }
+
+  const id = readTomlString(values.id ?? '')
+  const kindValue = readTomlString(values.kind ?? (values.cwds ? 'cron' : 'heartbeat'))
+  const name = readTomlString(values.name ?? '')
+  const prompt = readTomlString(values.prompt ?? '')
+  const rrule = readTomlString(values.rrule ?? '')
+  const statusValue = readTomlString(values.status ?? 'ACTIVE')
+  const targetThreadId = readTomlString(values.target_thread_id ?? '') || null
+  const cwds = parseTomlStringArray(values.cwds ?? '')
+  const createdAtMs = Number.parseInt(values.created_at ?? '', 10)
+  const updatedAtMs = Number.parseInt(values.updated_at ?? '', 10)
+
+  if (!id || !name || !prompt || !rrule) return null
+  if (kindValue !== 'heartbeat' && kindValue !== 'cron') return null
+  if (statusValue !== 'ACTIVE' && statusValue !== 'PAUSED') return null
+
+  return {
+    id,
+    kind: kindValue,
+    name,
+    prompt,
+    rrule,
+    status: statusValue,
+    targetThreadId,
+    cwds,
+    extraTomlLines,
+    createdAtMs: Number.isFinite(createdAtMs) ? createdAtMs : null,
+    updatedAtMs: Number.isFinite(updatedAtMs) ? updatedAtMs : null,
+    nextRunAtMs: null,
+  }
+}
+
+function serializeAutomationToml(record: ThreadAutomationRecord): string {
+  const lines = [
+    'version = 1',
+    `id = ${serializeTomlString(record.id)}`,
+    `kind = ${serializeTomlString(record.kind)}`,
+    `name = ${serializeTomlString(record.name)}`,
+    `prompt = ${serializeTomlString(record.prompt)}`,
+    `status = ${serializeTomlString(record.status)}`,
+    `rrule = ${serializeTomlString(record.rrule)}`,
+  ]
+  if (record.targetThreadId) {
+    lines.push(`target_thread_id = ${serializeTomlString(record.targetThreadId)}`)
+  }
+  if (record.cwds.length > 0) {
+    lines.push(`cwds = ${serializeTomlStringArray(record.cwds)}`)
+  }
+  lines.push(
+    `created_at = ${String(record.createdAtMs ?? Date.now())}`,
+    `updated_at = ${String(record.updatedAtMs ?? Date.now())}`,
+  )
+  lines.push(...record.extraTomlLines)
+  return `${lines.join('\n')}\n`
+}
+
+function slugifyAutomationId(threadId: string, name: string): string {
+  const preferred = name.trim().toLowerCase().replace(/[^a-z0-9]+/gu, '-').replace(/^-+|-+$/gu, '')
+  if (preferred) return preferred.slice(0, 48)
+  const fallback = threadId.trim().toLowerCase().replace(/[^a-z0-9]+/gu, '-').replace(/^-+|-+$/gu, '')
+  return `heartbeat-${fallback.slice(0, 24) || randomBytes(4).toString('hex')}`
+}
+
+async function readAutomationRecordFromFile(filePath: string): Promise<ThreadAutomationRecord | null> {
+  try {
+    return parseAutomationToml(await readFile(filePath, 'utf8'))
+  } catch {
+    return null
+  }
+}
+
+export async function listThreadHeartbeatAutomations(): Promise<Record<string, ThreadAutomationRecord[]>> {
+  const automationRoot = getCodexAutomationsDir()
+  const next: Record<string, ThreadAutomationRecord[]> = {}
+  let entries
+  try {
+    entries = await readdir(automationRoot, { withFileTypes: true })
+  } catch {
+    return next
+  }
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    const automation = await readAutomationRecordFromFile(join(automationRoot, entry.name, 'automation.toml'))
+    if (!automation || automation.kind !== 'heartbeat' || !automation.targetThreadId) continue
+    next[automation.targetThreadId] = [...(next[automation.targetThreadId] ?? []), automation]
+  }
+
+  for (const automations of Object.values(next)) {
+    automations.sort((first, second) => {
+      const firstCreatedAt = first.createdAtMs ?? 0
+      const secondCreatedAt = second.createdAtMs ?? 0
+      if (firstCreatedAt !== secondCreatedAt) return firstCreatedAt - secondCreatedAt
+      return first.id.localeCompare(second.id)
+    })
+  }
+
+  return next
+}
+
+export async function readThreadHeartbeatAutomations(threadId: string): Promise<ThreadAutomationRecord[]> {
+  const all = await listThreadHeartbeatAutomations()
+  return all[threadId] ?? []
+}
+
+export async function readThreadHeartbeatAutomation(threadId: string, automationId = ''): Promise<ThreadAutomationRecord | null> {
+  const automations = await readThreadHeartbeatAutomations(threadId)
+  if (automationId) return automations.find((automation) => automation.id === automationId) ?? null
+  return automations[0] ?? null
+}
+
+function resolveUniqueAutomationId(existingIds: Set<string>, threadId: string, name: string): string {
+  const baseId = slugifyAutomationId(threadId, name)
+  if (!existingIds.has(baseId)) return baseId
+  for (let index = 2; index < 1000; index += 1) {
+    const candidate = `${baseId}-${index}`
+    if (!existingIds.has(candidate)) return candidate
+  }
+  return `${baseId}-${randomBytes(4).toString('hex')}`
+}
+
+export async function writeThreadHeartbeatAutomation(input: {
+  threadId: string
+  id?: string
+  name: string
+  prompt: string
+  rrule: string
+  status: ThreadAutomationStatus
+}): Promise<ThreadAutomationRecord> {
+  const threadId = input.threadId.trim()
+  const name = input.name.trim()
+  const prompt = input.prompt.trim()
+  const rrule = input.rrule.trim()
+  if (!threadId || !name || !prompt || !rrule) {
+    throw new Error('threadId, name, prompt, and rrule are required')
+  }
+
+  const automationRoot = getCodexAutomationsDir()
+  await mkdir(automationRoot, { recursive: true })
+  const existing = input.id ? await readThreadHeartbeatAutomation(threadId, input.id.trim()) : null
+  const entries = await readdir(automationRoot, { withFileTypes: true }).catch(() => [])
+  const existingIds = new Set(entries.filter((entry) => entry.isDirectory()).map((entry) => entry.name))
+  const id = existing?.id ?? resolveUniqueAutomationId(existingIds, threadId, name)
+  const automationDir = join(automationRoot, id)
+  const now = Date.now()
+  const record: ThreadAutomationRecord = {
+    id,
+    kind: 'heartbeat',
+    name,
+    prompt,
+    rrule,
+    status: input.status,
+    targetThreadId: threadId,
+    cwds: [],
+    extraTomlLines: existing?.extraTomlLines ?? [],
+    createdAtMs: existing?.createdAtMs ?? now,
+    updatedAtMs: now,
+    nextRunAtMs: null,
+  }
+
+  await mkdir(automationDir, { recursive: true })
+  await writeFile(join(automationDir, 'automation.toml'), serializeAutomationToml(record), 'utf8')
+  const memoryPath = join(automationDir, 'memory.md')
+  try {
+    await stat(memoryPath)
+  } catch {
+    await writeFile(memoryPath, '', 'utf8')
+  }
+  return record
+}
+
+export async function deleteThreadHeartbeatAutomation(threadId: string, automationId = ''): Promise<boolean> {
+  const normalizedThreadId = threadId.trim()
+  const normalizedAutomationId = automationId.trim()
+  if (normalizedAutomationId) {
+    const automation = await readThreadHeartbeatAutomation(normalizedThreadId, normalizedAutomationId)
+    if (!automation) return false
+    await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
+    return true
+  }
+
+  const automations = await readThreadHeartbeatAutomations(normalizedThreadId)
+  if (automations.length === 0) return false
+  await Promise.all(automations.map((automation) => rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })))
+  return true
+}
+
+export async function listProjectCronAutomations(): Promise<Record<string, ThreadAutomationRecord[]>> {
+  const automationRoot = getCodexAutomationsDir()
+  const next: Record<string, ThreadAutomationRecord[]> = {}
+  let entries
+  try {
+    entries = await readdir(automationRoot, { withFileTypes: true })
+  } catch {
+    return next
+  }
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    const automation = await readAutomationRecordFromFile(join(automationRoot, entry.name, 'automation.toml'))
+    if (!automation || automation.kind !== 'cron' || automation.cwds.length === 0) continue
+    for (const cwd of automation.cwds) {
+      next[cwd] = [...(next[cwd] ?? []), automation]
+    }
+  }
+
+  for (const automations of Object.values(next)) {
+    automations.sort((first, second) => {
+      const firstCreatedAt = first.createdAtMs ?? 0
+      const secondCreatedAt = second.createdAtMs ?? 0
+      if (firstCreatedAt !== secondCreatedAt) return firstCreatedAt - secondCreatedAt
+      return first.id.localeCompare(second.id)
+    })
+  }
+
+  return next
+}
+
+export async function readProjectCronAutomations(projectName: string): Promise<ThreadAutomationRecord[]> {
+  const all = await listProjectCronAutomations()
+  return all[projectName] ?? []
+}
+
+export async function readProjectCronAutomation(projectName: string, automationId = ''): Promise<ThreadAutomationRecord | null> {
+  const automations = await readProjectCronAutomations(projectName)
+  if (automationId) return automations.find((automation) => automation.id === automationId) ?? null
+  return automations[0] ?? null
+}
+
+export async function writeProjectCronAutomation(input: {
+  projectName: string
+  id?: string
+  name: string
+  prompt: string
+  rrule: string
+  status: ThreadAutomationStatus
+}): Promise<ThreadAutomationRecord> {
+  const projectName = input.projectName.trim()
+  const name = input.name.trim()
+  const prompt = input.prompt.trim()
+  const rrule = input.rrule.trim()
+  if (!projectName || !name || !prompt || !rrule) {
+    throw new Error('projectName, name, prompt, and rrule are required')
+  }
+  if (!isAbsoluteLikePath(projectName)) {
+    throw new Error('Project automation cwd must be an absolute path')
+  }
+
+  const automationRoot = getCodexAutomationsDir()
+  await mkdir(automationRoot, { recursive: true })
+  const existing = input.id ? await readProjectCronAutomation(projectName, input.id.trim()) : null
+  const entries = await readdir(automationRoot, { withFileTypes: true }).catch(() => [])
+  const existingIds = new Set(entries.filter((entry) => entry.isDirectory()).map((entry) => entry.name))
+  const id = existing?.id ?? resolveUniqueAutomationId(existingIds, projectName, name)
+  const automationDir = join(automationRoot, id)
+  const now = Date.now()
+  const record: ThreadAutomationRecord = {
+    id,
+    kind: 'cron',
+    name,
+    prompt,
+    rrule,
+    status: input.status,
+    targetThreadId: null,
+    cwds: Array.from(new Set([...(existing?.cwds ?? []), projectName])),
+    extraTomlLines: existing?.extraTomlLines ?? [],
+    createdAtMs: existing?.createdAtMs ?? now,
+    updatedAtMs: now,
+    nextRunAtMs: null,
+  }
+
+  await mkdir(automationDir, { recursive: true })
+  await writeFile(join(automationDir, 'automation.toml'), serializeAutomationToml(record), 'utf8')
+  const memoryPath = join(automationDir, 'memory.md')
+  try {
+    await stat(memoryPath)
+  } catch {
+    await writeFile(memoryPath, '', 'utf8')
+  }
+  return record
+}
+
+export async function deleteProjectCronAutomation(projectName: string, automationId = ''): Promise<boolean> {
+  const normalizedProjectName = projectName.trim()
+  const normalizedAutomationId = automationId.trim()
+  if (!normalizedProjectName || !isAbsoluteLikePath(normalizedProjectName)) return false
+  if (normalizedAutomationId) {
+    const automation = await readProjectCronAutomation(normalizedProjectName, normalizedAutomationId)
+    if (!automation) return false
+    const remainingCwds = automation.cwds.filter((cwd) => cwd !== normalizedProjectName)
+    if (remainingCwds.length > 0) {
+      const record = { ...automation, cwds: remainingCwds, updatedAtMs: Date.now() }
+      await writeFile(join(getCodexAutomationsDir(), automation.id, 'automation.toml'), serializeAutomationToml(record), 'utf8')
+    } else {
+      await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
+    }
+    return true
+  }
+
+  const automations = await readProjectCronAutomations(normalizedProjectName)
+  if (automations.length === 0) return false
+  await Promise.all(automations.map(async (automation) => {
+    const remainingCwds = automation.cwds.filter((cwd) => cwd !== normalizedProjectName)
+    if (remainingCwds.length > 0) {
+      const record = { ...automation, cwds: remainingCwds, updatedAtMs: Date.now() }
+      await writeFile(join(getCodexAutomationsDir(), automation.id, 'automation.toml'), serializeAutomationToml(record), 'utf8')
+      return
+    }
+    await rm(join(getCodexAutomationsDir(), automation.id), { recursive: true, force: true })
+  }))
+  return true
+}
diff --git a/src/server/threadInlinePayloads.ts b/src/server/threadInlinePayloads.ts
new file mode 100644
index 000000000..adc168918
--- /dev/null
+++ b/src/server/threadInlinePayloads.ts
@@ -0,0 +1,578 @@
+import { createHash } from 'node:crypto'
+import { mkdir, readFile, stat, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { isAbsolute, join } from 'node:path'
+
+const THREAD_METHODS_WITH_TURNS = new Set(['thread/read', 'thread/resume', 'thread/fork', 'thread/rollback'])
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+type SessionRecoveredFileChange = {
+  path: string
+  operation: 'add' | 'delete' | 'update'
+  movedToPath: string | null
+  diff: string
+  addedLineCount: number
+  removedLineCount: number
+}
+
+type SessionRecoveredTurnFileChanges = {
+  turnId: string
+  turnIndex: number
+  fileChanges: SessionRecoveredFileChange[]
+}
+
+type SessionRecoveredSkillInput = {
+  name: string
+  path: string
+}
+
+type SessionSkillInputCacheEntry = {
+  size: number
+  mtimeMs: number
+  skillsByTurnId: Map<string, SessionRecoveredSkillInput[]>
+}
+
+const SESSION_SKILL_INPUT_CACHE_LIMIT = 64
+const sessionSkillInputCache = new Map<string, SessionSkillInputCacheEntry>()
+
+function parseSessionSkillText(value: string): SessionRecoveredSkillInput | null {
+  const trimmed = value.trim()
+  if (!trimmed.startsWith('<skill>')) return null
+  const name = trimmed.match(/<name>\s*([\s\S]*?)\s*<\/name>/u)?.[1]?.trim() ?? ''
+  const path = trimmed.match(/<path>\s*([\s\S]*?)\s*<\/path>/u)?.[1]?.trim() ?? ''
+  if (!name || !path) return null
+  return { name, path }
+}
+
+function buildSessionSkillInputsByTurn(sessionLogRaw: string): Map<string, SessionRecoveredSkillInput[]> {
+  let currentTurnId = ''
+  const skillsByTurnId = new Map<string, SessionRecoveredSkillInput[]>()
+
+  for (const line of sessionLogRaw.split('\n')) {
+    if (!line.trim()) continue
+    let row: Record<string, unknown> | null = null
+    try {
+      row = JSON.parse(line) as Record<string, unknown>
+    } catch {
+      continue
+    }
+
+    if (row.type === 'turn_context') {
+      const payloadRecord = asRecord(row.payload)
+      currentTurnId = readNonEmptyString(payloadRecord?.turn_id) || currentTurnId
+      continue
+    }
+    if (row.type === 'event_msg') {
+      const payloadRecord = asRecord(row.payload)
+      if (payloadRecord?.type === 'task_started') {
+        currentTurnId = readNonEmptyString(payloadRecord.turn_id) || currentTurnId
+      }
+      continue
+    }
+
+    if (row.type !== 'response_item' || !currentTurnId) continue
+    const payloadRecord = asRecord(row.payload)
+    if (payloadRecord?.type !== 'message' || payloadRecord.role !== 'user') continue
+    const content = Array.isArray(payloadRecord.content) ? payloadRecord.content : []
+
+    for (const contentItem of content) {
+      const contentRecord = asRecord(contentItem)
+      if (contentRecord?.type !== 'input_text' || typeof contentRecord.text !== 'string') continue
+      const skill = parseSessionSkillText(contentRecord.text)
+      if (!skill) continue
+      const existing = skillsByTurnId.get(currentTurnId) ?? []
+      if (!existing.some((item) => item.path === skill.path)) {
+        existing.push(skill)
+        skillsByTurnId.set(currentTurnId, existing)
+      }
+    }
+  }
+
+  return skillsByTurnId
+}
+
+async function readCachedSessionSkillInputsByTurn(sessionPath: string): Promise<Map<string, SessionRecoveredSkillInput[]>> {
+  const sessionStat = await stat(sessionPath)
+  const cached = sessionSkillInputCache.get(sessionPath)
+  if (cached && cached.size === sessionStat.size && cached.mtimeMs === sessionStat.mtimeMs) {
+    return cached.skillsByTurnId
+  }
+
+  const sessionLogRaw = await readFile(sessionPath, 'utf8')
+  const skillsByTurnId = buildSessionSkillInputsByTurn(sessionLogRaw)
+  sessionSkillInputCache.set(sessionPath, {
+    size: sessionStat.size,
+    mtimeMs: sessionStat.mtimeMs,
+    skillsByTurnId,
+  })
+  if (sessionSkillInputCache.size > SESSION_SKILL_INPUT_CACHE_LIMIT) {
+    const oldestKey = sessionSkillInputCache.keys().next().value
+    if (oldestKey) sessionSkillInputCache.delete(oldestKey)
+  }
+  return skillsByTurnId
+}
+
+function mergeSessionSkillInputsIntoTurnsFromMap(
+  turns: unknown[],
+  skillsByTurnId: Map<string, SessionRecoveredSkillInput[]>,
+): unknown[] {
+  const turnIds = new Set<string>()
+  for (const turn of turns) {
+    const turnRecord = asRecord(turn)
+    const turnId = readNonEmptyString(turnRecord?.id)
+    if (turnId) turnIds.add(turnId)
+  }
+  if (turnIds.size === 0) return turns
+
+  if (skillsByTurnId.size === 0) return turns
+
+  let changed = false
+  const nextTurns = turns.map((turn) => {
+    const turnRecord = asRecord(turn)
+    const turnId = readNonEmptyString(turnRecord?.id)
+    const skills = turnId ? skillsByTurnId.get(turnId) : undefined
+    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : null
+    if (!turnRecord || !skills || skills.length === 0 || !items) return turn
+
+    let targetUserMessageIndex = -1
+    for (let index = items.length - 1; index >= 0; index -= 1) {
+      const itemRecord = asRecord(items[index])
+      if (itemRecord?.type === 'userMessage' && Array.isArray(itemRecord.content)) {
+        targetUserMessageIndex = index
+        break
+      }
+    }
+    if (targetUserMessageIndex < 0) return turn
+
+    let addedToMessage = false
+    const nextItems = items.map((item, index) => {
+      const itemRecord = asRecord(item)
+      const content = Array.isArray(itemRecord?.content) ? itemRecord.content : null
+      if (index !== targetUserMessageIndex || itemRecord?.type !== 'userMessage' || !content) return item
+
+      const existingSkillPaths = new Set(
+        content.flatMap((contentItem) => {
+          const contentRecord = asRecord(contentItem)
+          const path = typeof contentRecord?.path === 'string' ? contentRecord.path.trim() : ''
+          return contentRecord?.type === 'skill' && path ? [path] : []
+        }),
+      )
+      const missingSkills = skills.filter((skill) => !existingSkillPaths.has(skill.path))
+      if (missingSkills.length === 0) return item
+
+      addedToMessage = true
+      changed = true
+      return {
+        ...itemRecord,
+        content: [
+          ...content,
+          ...missingSkills.map((skill) => ({ type: 'skill', name: skill.name, path: skill.path })),
+        ],
+      }
+    })
+
+    return addedToMessage ? { ...turnRecord, items: nextItems } : turn
+  })
+
+  return changed ? nextTurns : turns
+}
+
+export function mergeSessionSkillInputsIntoTurns(turns: unknown[], sessionLogRaw: string): unknown[] {
+  return mergeSessionSkillInputsIntoTurnsFromMap(turns, buildSessionSkillInputsByTurn(sessionLogRaw))
+}
+
+export async function mergeSessionSkillInputsIntoThreadResult(result: unknown): Promise<unknown> {
+  const record = asRecord(result)
+  const thread = asRecord(record?.thread)
+  const turns = Array.isArray(thread?.turns) ? thread.turns : null
+  const sessionPath = readNonEmptyString(thread?.path)
+  if (!record || !thread || !turns || turns.length === 0 || !sessionPath || !isAbsolute(sessionPath)) {
+    return result
+  }
+
+  try {
+    const skillsByTurnId = await readCachedSessionSkillInputsByTurn(sessionPath)
+    const mergedTurns = mergeSessionSkillInputsIntoTurnsFromMap(turns, skillsByTurnId)
+    if (mergedTurns === turns) return result
+    return {
+      ...record,
+      thread: {
+        ...thread,
+        turns: mergedTurns,
+      },
+    }
+  } catch {
+    return result
+  }
+}
+
+function isInlineDataUrl(value: string): boolean {
+  return /^data:/iu.test(value.trim())
+}
+
+function inferImageMimeTypeFromBytes(bytes: Uint8Array): string | null {
+  if (
+    bytes.length >= 8 &&
+    bytes[0] === 0x89 &&
+    bytes[1] === 0x50 &&
+    bytes[2] === 0x4e &&
+    bytes[3] === 0x47 &&
+    bytes[4] === 0x0d &&
+    bytes[5] === 0x0a &&
+    bytes[6] === 0x1a &&
+    bytes[7] === 0x0a
+  ) {
+    return 'image/png'
+  }
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
+    return 'image/jpeg'
+  }
+  if (
+    bytes.length >= 12 &&
+    bytes[0] === 0x52 &&
+    bytes[1] === 0x49 &&
+    bytes[2] === 0x46 &&
+    bytes[3] === 0x46 &&
+    bytes[8] === 0x57 &&
+    bytes[9] === 0x45 &&
+    bytes[10] === 0x42 &&
+    bytes[11] === 0x50
+  ) {
+    return 'image/webp'
+  }
+  if (
+    bytes.length >= 6 &&
+    bytes[0] === 0x47 &&
+    bytes[1] === 0x49 &&
+    bytes[2] === 0x46 &&
+    bytes[3] === 0x38 &&
+    (bytes[4] === 0x37 || bytes[4] === 0x39) &&
+    bytes[5] === 0x61
+  ) {
+    return 'image/gif'
+  }
+  return null
+}
+
+function inferImageMimeTypeFromBase64(value: string): string | null {
+  const compact = value.trim().replace(/\s+/gu, '')
+  if (compact.length < 32 || !/^[A-Za-z0-9+/]+={0,2}$/u.test(compact)) return null
+  try {
+    return inferImageMimeTypeFromBytes(Buffer.from(compact.slice(0, 64), 'base64'))
+  } catch {
+    return null
+  }
+}
+
+function normalizeBase64ImageDataUrl(value: string, mimeType: string): string | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  if (isInlineDataUrl(trimmed)) {
+    return /^data:image\//iu.test(trimmed) ? trimmed : null
+  }
+  const compact = trimmed.replace(/\s+/gu, '')
+  const inferredMimeType = inferImageMimeTypeFromBase64(compact)
+  if (!inferredMimeType) return null
+  const normalizedMimeType = mimeType.trim().toLowerCase()
+  const finalMimeType = normalizedMimeType.startsWith('image/') && normalizedMimeType !== 'image/*'
+    ? normalizedMimeType
+    : inferredMimeType
+  return `data:${finalMimeType};base64,${compact}`
+}
+
+function extensionFromMimeType(mimeType: string): string {
+  const normalized = mimeType.trim().toLowerCase()
+  if (normalized === 'image/png') return '.png'
+  if (normalized === 'image/jpeg') return '.jpg'
+  if (normalized === 'image/webp') return '.webp'
+  if (normalized === 'image/gif') return '.gif'
+  if (normalized === 'image/svg+xml') return '.svg'
+  if (normalized === 'application/pdf') return '.pdf'
+  return ''
+}
+
+function asNonEmptyString(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+function toAttachmentLinkTarget(block: Record<string, unknown>, fallback: string): string {
+  const candidate = asNonEmptyString(block.path)
+    ?? asNonEmptyString(block.file_path)
+    ?? asNonEmptyString(block.filename)
+    ?? asNonEmptyString(block.file_id)
+    ?? fallback
+  if (candidate.startsWith('file://')) return candidate
+  if (candidate.startsWith('/')) return `file://${candidate}`
+  return `attachment://${candidate}`
+}
+
+async function persistInlineDataUrlToLocalFile(dataUrl: string, baseName: string): Promise<string | null> {
+  const trimmed = dataUrl.trim()
+  const match = /^data:([^;,]*)(;base64)?,(.*)$/isu.exec(trimmed)
+  if (!match) return null
+  const mimeType = (match[1] ?? '').trim().toLowerCase()
+  const encodedPayload = match[3] ?? ''
+  let bytes: Buffer
+  try {
+    bytes = match[2]
+      ? Buffer.from(encodedPayload, 'base64')
+      : Buffer.from(decodeURIComponent(encodedPayload), 'utf8')
+  } catch {
+    return null
+  }
+  if (bytes.length === 0) return null
+
+  const hash = createHash('sha1').update(bytes).digest('hex')
+  const ext = extensionFromMimeType(mimeType)
+  const mediaDir = join(tmpdir(), 'codex-web-inline-media')
+  await mkdir(mediaDir, { recursive: true })
+  const fileName = `${baseName}-${hash}${ext}`
+  const filePath = join(mediaDir, fileName)
+  try {
+    await stat(filePath)
+  } catch {
+    await writeFile(filePath, bytes)
+  }
+  return filePath
+}
+
+function toLocalImageProxyUrl(path: string): string {
+  return `/codex-local-image?path=${encodeURIComponent(path)}`
+}
+
+const INLINE_IMAGE_FIELD_NAMES = new Set([
+  'b64_json',
+  'image',
+  'image_url',
+  'images',
+  'result',
+  'url',
+])
+
+type InlinePayloadSanitizeContext = {
+  turnId: string
+  itemId: string
+  blockIndex: number
+  fieldName?: string
+}
+
+function isPotentialInlineImageField(fieldName: string | undefined): boolean {
+  return typeof fieldName === 'string' && INLINE_IMAGE_FIELD_NAMES.has(fieldName)
+}
+
+async function sanitizeInlineImageString(
+  value: string,
+  context: InlinePayloadSanitizeContext,
+): Promise<{ value: string; changed: boolean }> {
+  if (!isPotentialInlineImageField(context.fieldName)) {
+    return { value, changed: false }
+  }
+
+  const dataUrl = normalizeBase64ImageDataUrl(value, 'image/*')
+  if (!dataUrl) return { value, changed: false }
+
+  const localUrl = await persistInlineDataUrlToLocalFile(
+    dataUrl,
+    `inline-image-${context.turnId}-${context.itemId}-${context.fieldName}-${String(context.blockIndex)}`,
+  )
+  if (!localUrl) return { value, changed: false }
+
+  return { value: toLocalImageProxyUrl(localUrl), changed: true }
+}
+
+async function sanitizeInlineUserContentBlock(
+  block: unknown,
+  context: InlinePayloadSanitizeContext,
+): Promise<unknown> {
+  const record = asRecord(block)
+  if (!record) return block
+
+  const type = asNonEmptyString(record.type) ?? ''
+  const imageUrl = asNonEmptyString(record.url) ?? asNonEmptyString(record.image_url)
+  if (imageUrl && isInlineDataUrl(imageUrl)) {
+    const localUrl = await persistInlineDataUrlToLocalFile(imageUrl, `inline-image-${context.turnId}-${context.itemId}-${String(context.blockIndex)}`)
+    if (localUrl) {
+      const nextRecord = { ...record }
+      if (typeof record.url === 'string') {
+        nextRecord.url = toLocalImageProxyUrl(localUrl)
+      }
+      if (typeof record.image_url === 'string') {
+        nextRecord.image_url = toLocalImageProxyUrl(localUrl)
+      }
+      return {
+        ...nextRecord,
+        type: 'image',
+      }
+    }
+    const target = toAttachmentLinkTarget(record, `inline-image/${context.turnId}/${context.itemId}/${String(context.blockIndex)}`)
+    return {
+      type: 'text',
+      text: `Image attachment: ${target}`,
+    }
+  }
+
+  if (type === 'imageGeneration' || type === 'image_generation') {
+    const rawResult = asNonEmptyString(record.result)
+      ?? asNonEmptyString(record.b64_json)
+      ?? asNonEmptyString(record.image)
+    const mimeType = asNonEmptyString(record.mime_type)
+      ?? asNonEmptyString(record.mimeType)
+      ?? 'image/png'
+    const dataUrl = rawResult ? normalizeBase64ImageDataUrl(rawResult, mimeType) : null
+    if (dataUrl) {
+      const localUrl = await persistInlineDataUrlToLocalFile(dataUrl, `generated-image-${context.turnId}-${context.itemId}`)
+      if (localUrl) {
+        return {
+          ...record,
+          type: 'imageView',
+          path: localUrl,
+        }
+      }
+    }
+  }
+
+  const inlineFileData = asNonEmptyString(record.file_data)
+    ?? asNonEmptyString(record.data)
+    ?? asNonEmptyString(record.base64)
+  if ((type.includes('file') || type === 'input_file' || type === 'file') && inlineFileData) {
+    const mimeType = asNonEmptyString(record.mime_type) ?? 'application/octet-stream'
+    const fileDataUrl = `data:${mimeType};base64,${inlineFileData}`
+    const localUrl = await persistInlineDataUrlToLocalFile(fileDataUrl, `inline-file-${context.turnId}-${context.itemId}-${String(context.blockIndex)}`)
+    if (localUrl) {
+      return {
+        type: 'text',
+        text: `File attachment: ${localUrl}`,
+      }
+    }
+    const target = toAttachmentLinkTarget(record, `inline-file/${context.turnId}/${context.itemId}/${String(context.blockIndex)}`)
+    return {
+      type: 'text',
+      text: `File attachment: ${target}`,
+    }
+  }
+
+  return block
+}
+
+async function sanitizeInlinePayloadDeep(
+  value: unknown,
+  context: InlinePayloadSanitizeContext,
+): Promise<{ value: unknown; changed: boolean }> {
+  const maybeBlock = await sanitizeInlineUserContentBlock(value, context)
+  if (maybeBlock !== value) {
+    return { value: maybeBlock, changed: true }
+  }
+
+  if (typeof value === 'string') {
+    return sanitizeInlineImageString(value, context)
+  }
+
+  if (Array.isArray(value)) {
+    let changed = false
+    const nextArray: unknown[] = []
+    for (let index = 0; index < value.length; index += 1) {
+      const nested = await sanitizeInlinePayloadDeep(value[index], {
+        turnId: context.turnId,
+        itemId: context.itemId,
+        blockIndex: index,
+        fieldName: context.fieldName,
+      })
+      if (nested.changed) changed = true
+      nextArray.push(nested.value)
+    }
+    return changed ? { value: nextArray, changed: true } : { value, changed: false }
+  }
+
+  const record = asRecord(value)
+  if (!record) return { value, changed: false }
+
+  let changed = false
+  const nextRecord: Record<string, unknown> = {}
+  for (const [key, nestedValue] of Object.entries(record)) {
+    const nested = await sanitizeInlinePayloadDeep(nestedValue, {
+      turnId: context.turnId,
+      itemId: context.itemId,
+      blockIndex: context.blockIndex,
+      fieldName: key,
+    })
+    if (nested.changed) changed = true
+    nextRecord[key] = nested.value
+  }
+
+  return changed ? { value: nextRecord, changed: true } : { value, changed: false }
+}
+
+export async function sanitizeThreadTurnsInlinePayloads(method: string, result: unknown): Promise<unknown> {
+  if (!THREAD_METHODS_WITH_TURNS.has(method)) return result
+
+  const record = asRecord(result)
+  const thread = asRecord(record?.thread)
+  const turns = Array.isArray(thread?.turns) ? thread.turns : null
+  if (!record || !thread || !turns || turns.length === 0) return result
+
+  let changed = false
+  const nextTurns: unknown[] = []
+  for (let turnIndex = 0; turnIndex < turns.length; turnIndex += 1) {
+    const turn = turns[turnIndex]
+    const turnRecord = asRecord(turn)
+    const turnId = asNonEmptyString(turnRecord?.id) ?? 'turn'
+    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : null
+    if (!turnRecord || !items) {
+      nextTurns.push(turn)
+      continue
+    }
+
+    let itemChanged = false
+    const nextItems: unknown[] = []
+    for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+      const item = items[itemIndex]
+      const itemRecord = asRecord(item)
+      const itemId = asNonEmptyString(itemRecord?.id) ?? 'item'
+      if (!itemRecord) {
+        nextItems.push(item)
+        continue
+      }
+      const sanitizedItem = await sanitizeInlinePayloadDeep(item, {
+        turnId,
+        itemId,
+        blockIndex: itemIndex + turnIndex,
+      })
+      if (!sanitizedItem.changed) {
+        nextItems.push(item)
+        continue
+      }
+      itemChanged = true
+      nextItems.push(sanitizedItem.value)
+    }
+
+    if (!itemChanged) {
+      nextTurns.push(turn)
+      continue
+    }
+    changed = true
+    nextTurns.push({
+      ...turnRecord,
+      items: nextItems,
+    })
+  }
+
+  if (!changed) return result
+  return {
+    ...record,
+    thread: {
+      ...thread,
+      turns: nextTurns,
+    },
+  }
+}
diff --git a/src/server/threadSearchIndex.ts b/src/server/threadSearchIndex.ts
new file mode 100644
index 000000000..09d80d52e
--- /dev/null
+++ b/src/server/threadSearchIndex.ts
@@ -0,0 +1,197 @@
+import { spawn } from 'node:child_process'
+import type { AppServerProcess } from './appServerProcess.js'
+import { resolveRipgrepCommand } from '../commandResolution.js'
+
+const THREAD_SEARCH_FULL_TEXT_THREAD_LIMIT = 100
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readNonEmptyString(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0 ? value : ''
+}
+
+export type ThreadSearchDocument = {
+  id: string
+  title: string
+  preview: string
+  messageText: string
+  searchableText: string
+}
+
+export type ThreadSearchIndex = {
+  docsById: Map<string, ThreadSearchDocument>
+}
+
+function extractThreadMessageText(threadReadPayload: unknown): string {
+  const payload = asRecord(threadReadPayload)
+  const thread = asRecord(payload?.thread)
+  const turns = Array.isArray(thread?.turns) ? thread.turns : []
+  const parts: string[] = []
+
+  for (const turn of turns) {
+    const turnRecord = asRecord(turn)
+    const items = Array.isArray(turnRecord?.items) ? turnRecord.items : []
+    for (const item of items) {
+      const itemRecord = asRecord(item)
+      const type = typeof itemRecord?.type === 'string' ? itemRecord.type : ''
+      if (type === 'agentMessage' && typeof itemRecord?.text === 'string' && itemRecord.text.trim().length > 0) {
+        parts.push(itemRecord.text.trim())
+        continue
+      }
+      if (type === 'userMessage') {
+        const content = Array.isArray(itemRecord?.content) ? itemRecord.content : []
+        for (const block of content) {
+          const blockRecord = asRecord(block)
+          if (blockRecord?.type === 'text' && typeof blockRecord.text === 'string' && blockRecord.text.trim().length > 0) {
+            parts.push(blockRecord.text.trim())
+          }
+        }
+        continue
+      }
+      if (type === 'commandExecution') {
+        const command = typeof itemRecord?.command === 'string' ? itemRecord.command.trim() : ''
+        const output = typeof itemRecord?.aggregatedOutput === 'string' ? itemRecord.aggregatedOutput.trim() : ''
+        if (command) parts.push(command)
+        if (output) parts.push(output)
+      }
+    }
+  }
+
+  return parts.join('\n').trim()
+}
+
+export function isExactPhraseMatch(query: string, doc: ThreadSearchDocument): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return false
+  return (
+    doc.title.toLowerCase().includes(q) ||
+    doc.preview.toLowerCase().includes(q) ||
+    doc.messageText.toLowerCase().includes(q)
+  )
+}
+
+export function scoreFileCandidate(path: string, query: string): number {
+  if (!query) return 0
+  const lowerPath = path.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const baseName = lowerPath.slice(lowerPath.lastIndexOf('/') + 1)
+  if (baseName === lowerQuery) return 0
+  if (baseName.startsWith(lowerQuery)) return 1
+  if (baseName.includes(lowerQuery)) return 2
+  if (lowerPath.includes(`/${lowerQuery}`)) return 3
+  if (lowerPath.includes(lowerQuery)) return 4
+  return 10
+}
+
+export async function listFilesWithRipgrep(cwd: string): Promise<string[]> {
+  return await new Promise<string[]>((resolve, reject) => {
+    const ripgrepCommand = resolveRipgrepCommand()
+    if (!ripgrepCommand) {
+      reject(new Error('ripgrep (rg) is not available'))
+      return
+    }
+
+    const proc = spawn(ripgrepCommand, ['--files', '--hidden', '-g', '!.git', '-g', '!node_modules'], {
+      cwd,
+      env: process.env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    })
+    let stdout = ''
+    let stderr = ''
+    proc.stdout.on('data', (chunk: Buffer) => { stdout += chunk.toString() })
+    proc.stderr.on('data', (chunk: Buffer) => { stderr += chunk.toString() })
+    proc.on('error', reject)
+    proc.on('close', (code) => {
+      if (code === 0) {
+        const rows = stdout
+          .split(/\r?\n/)
+          .map((line) => line.trim())
+          .filter(Boolean)
+        resolve(rows)
+        return
+      }
+      const details = [stderr.trim(), stdout.trim()].filter(Boolean).join('\n')
+      reject(new Error(details || 'rg --files failed'))
+    })
+  })
+}
+
+async function loadAllThreadsForSearch(appServer: AppServerProcess): Promise<ThreadSearchDocument[]> {
+  const threads: Array<{ id: string; title: string; preview: string }> = []
+  let cursor: string | null = null
+
+  do {
+    const response = asRecord(await appServer.rpc('thread/list', {
+      archived: false,
+      limit: 100,
+      sortKey: 'updated_at',
+      modelProviders: [],
+      cursor,
+    }))
+    const data = Array.isArray(response?.data) ? response.data : []
+    for (const row of data) {
+      const record = asRecord(row)
+      const id = typeof record?.id === 'string' ? record.id : ''
+      if (!id) continue
+      const title = typeof record?.name === 'string' && record.name.trim().length > 0
+        ? record.name.trim()
+        : (typeof record?.preview === 'string' && record.preview.trim().length > 0 ? record.preview.trim() : 'Untitled thread')
+      const preview = typeof record?.preview === 'string' ? record.preview : ''
+      threads.push({ id, title, preview })
+    }
+    cursor = typeof response?.nextCursor === 'string' && response.nextCursor.length > 0 ? response.nextCursor : null
+  } while (cursor)
+
+  const docs: ThreadSearchDocument[] = threads.map((thread) => {
+    const searchableText = [thread.title, thread.preview].filter(Boolean).join('\n')
+    return {
+      id: thread.id,
+      title: thread.title,
+      preview: thread.preview,
+      messageText: '',
+      searchableText,
+    } satisfies ThreadSearchDocument
+  })
+
+  const docsById = new Map<string, ThreadSearchDocument>(docs.map((doc) => [doc.id, doc]))
+  const fullTextThreads = threads.slice(0, THREAD_SEARCH_FULL_TEXT_THREAD_LIMIT)
+  const concurrency = 4
+  for (let offset = 0; offset < fullTextThreads.length; offset += concurrency) {
+    const batch = fullTextThreads.slice(offset, offset + concurrency)
+    const loaded = await Promise.all(batch.map(async (thread) => {
+      try {
+        const readResponse = await appServer.rpc('thread/read', {
+          threadId: thread.id,
+          includeTurns: true,
+        })
+        const messageText = extractThreadMessageText(readResponse)
+        const searchableText = [thread.title, thread.preview, messageText].filter(Boolean).join('\n')
+        return [thread.id, {
+          id: thread.id,
+          title: thread.title,
+          preview: thread.preview,
+          messageText,
+          searchableText,
+        } satisfies ThreadSearchDocument] as const
+      } catch {
+        return null
+      }
+    }))
+    for (const row of loaded) {
+      if (!row) continue
+      docsById.set(row[0], row[1])
+    }
+  }
+
+  return Array.from(docsById.values())
+}
+
+export async function buildThreadSearchIndex(appServer: AppServerProcess): Promise<ThreadSearchIndex> {
+  const docs = await loadAllThreadsForSearch(appServer)
+  const docsById = new Map<string, ThreadSearchDocument>(docs.map((doc) => [doc.id, doc]))
+  return { docsById }
+}
diff --git a/tests.md b/tests.md
index 7c59f5356..4154e6e3b 100644
--- a/tests.md
+++ b/tests.md
@@ -303,6 +303,116 @@ Rollback/cleanup:
 
 ---
 
+### App chat export formatter split
+
+#### Feature/Change Name
+Root app markdown export formatter extraction.
+
+#### Prerequisites/Setup
+1. Dependencies installed with `pnpm install`
+2. Dev server available if doing a manual browser pass (`pnpm run dev --host 127.0.0.1 --port 4173`)
+3. A thread with user/assistant messages, command output, attachments, or images
+4. Light theme and dark theme both available from the appearance switcher
+
+#### Steps
+1. Run `pnpm run build:frontend`.
+2. In light theme, open a populated thread and trigger chat export.
+3. Open the downloaded markdown file and confirm the title, exported timestamp, thread ID, message roles, text, command output, attachments, and images are present.
+4. Switch to dark theme and repeat steps 2-3.
+
+#### Expected Results
+- Frontend typecheck/build passes.
+- Exported markdown content and filename format match the pre-extraction behavior.
+- Export behavior is unchanged in light theme and dark theme.
+
+#### Rollback/Cleanup
+- Delete downloaded markdown export files if they are no longer needed.
+
+---
+
+### Thread conversation file-change helper split
+
+#### Feature/Change Name
+Thread conversation file-change summary and diff-line helper extraction.
+
+#### Prerequisites/Setup
+1. Dependencies installed with `pnpm install`
+2. Dev server available if doing a manual browser pass (`pnpm run dev --host 127.0.0.1 --port 4173`)
+3. A thread with modified-file summaries or recovered apply-patch file changes
+4. Light theme and dark theme both available from the appearance switcher
+
+#### Steps
+1. Run `pnpm run build:frontend`.
+2. In light theme, open a thread with a modified-files summary.
+3. Open the file-change summary and confirm file labels, operation badges, and line deltas are correct.
+4. Open the diff viewer and confirm added, removed, hunk, and context lines render with stable line numbers.
+5. Switch to dark theme and repeat steps 2-4.
+
+#### Expected Results
+- Frontend typecheck/build passes.
+- File-change summaries are still grouped by assistant turn and standalone metadata message as before.
+- Diff viewer selection, labels, deltas, and line rendering remain stable in light theme and dark theme.
+
+#### Rollback/Cleanup
+- None.
+
+---
+
+### Server inline payload helper split
+
+#### Feature/Change Name
+Codex bridge inline payload and session-skill recovery extraction.
+
+#### Prerequisites/Setup
+1. Dependencies installed with `pnpm install`
+2. Existing Codex session fixtures covered by the server bridge unit tests
+
+#### Steps
+1. Run `pnpm run test:unit -- src/server/codexAppServerBridge.inlinePayload.test.ts src/server/codexAppServerBridge.archive.test.ts`.
+2. Run `pnpm run build:cli`.
+3. Manually open a thread that contains generated/inline image or file payload content.
+4. Confirm inline media still renders through local proxy URLs instead of huge inline payloads.
+5. Open a thread whose user message used skills and confirm skill chips remain associated with the correct turn.
+
+#### Expected Results
+- Inline payload sanitization tests pass.
+- Archive recovery tests continue to pass through the bridge re-export.
+- CLI build succeeds with the extracted server module.
+- Session skill inputs and local inline-media proxying behave the same after extraction.
+
+#### Rollback/Cleanup
+- Remove any temporary files created under the system temp `codex-web-inline-media` directory if manual media testing creates unwanted artifacts.
+
+---
+
+### Desktop state storage helper split
+
+#### Feature/Change Name
+Desktop state localStorage and context-key helper extraction.
+
+#### Prerequisites/Setup
+1. Dependencies installed with `pnpm install`
+2. Dev server available if doing a manual browser pass (`pnpm run dev --host 127.0.0.1 --port 4173`)
+3. Light theme and dark theme both available from the appearance switcher
+
+#### Steps
+1. Run `pnpm run test:unit -- src/composables/useDesktopState.test.ts`.
+2. Run `pnpm run build:frontend`.
+3. In light theme, open the app and switch between at least two existing threads.
+4. Change the selected model or collaboration mode for a thread, refresh the page, and confirm the selection persists.
+5. Switch to dark theme and repeat steps 3-4.
+
+#### Expected Results
+- Desktop-state unit tests pass.
+- Frontend typecheck/build passes.
+- Selected thread, per-thread model, collaboration mode, unread state, project order, token usage, and terminal-open persistence continue to work through the extracted helper module.
+- The behavior is theme-independent and works in light theme and dark theme.
+
+#### Rollback/Cleanup
+- None.
+
+---
+
 ### Composio logged-out connector preview
 
 #### Feature/Change Name