glad-web 1.0.28 → 1.0.30

package/lib/web/index.html

@@ -8,347 +8,8 @@
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/svg+xml" href="logo.svg">
     <link rel="apple-touch-icon" href="logo.svg">
-    <link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css" />
-    <style>
-        :root { --primary: #007aff; --bg: #000; --card-bg: #1c1c1e; --text: #fff; --text-dim: #8e8e93; --terminal-controls-rest-height: 108px; --chat-content-max: 900px; --control-content-max: 1100px; }
-        body, html { margin: 0; padding: 0; height: 100dvh; width: 100vw; background: var(--bg); color: var(--text); overflow: hidden; overflow-anchor: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
-        .view { display: none; height: 100%; width: 100%; flex-direction: column; }
-        .view.active { display: flex; }
-        #lobby { overflow-y: auto; padding: 20px; padding-top: env(safe-area-inset-top); box-sizing: border-box; }
-        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
-        .header h1 { font-size: 28px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
-        .header-logo { width: 32px; height: 32px; flex-shrink: 0; }
-        .btn-new { background: var(--primary); color: #fff; border: none; padding: 8px 11px; border-radius: 16px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; white-space: nowrap; }
-        .btn-retry { background: #333; color: #fff; border: none; padding: 8px 16px; border-radius: 20px; margin-top: 10px; cursor: pointer; }
-        .session-card { background: var(--card-bg); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.1s; position: relative; }
-        .session-card:active { transform: scale(0.98); }
-        .completion-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; }
-        .session-info { flex: 1; min-width: 0; }
-        .session-info h3 { margin: 0 0 4px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
-        .session-info p { margin: 0; font-size: 13px; color: var(--text-dim); }
-        .timer-count-badge { display: inline-flex; align-items: center; gap: 3px; color: #fff; background: rgba(0,122,255,0.22); border: 1px solid rgba(0,122,255,0.34); border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 800; flex-shrink: 0; }
-        .session-dir-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
-        .session-dir-row p { flex: 1; min-width: 0; font-family: monospace; overflow-wrap: anywhere; }
-        .copy-dir-btn { color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
-        .copy-dir-btn:active { color: #fff; background: rgba(255,255,255,0.12); }
-        .session-actions { display: flex; gap: 12px; align-items: center; margin-left: 10px; }
-        .btn-join { background: rgba(255,255,255,0.1); border: none; color: var(--primary); padding: 8px 14px; border-radius: 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
-        .icon-btn { color: var(--text-dim); background: none; border: none; padding: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
-        .icon-btn:active { color: var(--text); }
-        .btn-delete { color: #ff3b30; }
-        #modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
-        #tool-modal { background: var(--card-bg); width: 100%; max-width: 400px; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
-        .tool-item { padding: 12px; border-bottom: 1px solid #333; cursor: pointer; display: flex; align-items: center; border-radius: 8px; margin-top: 4px; }
-        .tool-item:hover { background: rgba(255,255,255,0.05); }
-        .tool-icon { width: 32px; height: 32px; background: #333; border-radius: 8px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
-        #terminal-view { background: #000; overflow-anchor: none; position: relative; }
-        #top-ui { flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; z-index: 2000; padding-top: env(safe-area-inset-top); position: relative; }
-        #nav-bar { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid #222; }
-        #back-btn { color: var(--primary); font-size: 16px; font-weight: 500; display: flex; align-items: center; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; }
-        #session-title { flex: 1; text-align: center; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; min-width: 0; }
-        #terminal-controls { position: absolute; top: 100%; left: 0; right: 0; z-index: 2200; background: linear-gradient(180deg, rgba(18,18,18,0.98) 0%, rgba(18,18,18,0.92) 78%, rgba(18,18,18,0) 100%); border-bottom: 1px solid rgba(255,255,255,0.06); }
-        #terminal-controls-spacer { flex: 0 0 var(--terminal-controls-rest-height); height: var(--terminal-controls-rest-height); background: #000; }
-        #input-row { display: flex; align-items: flex-end; width: min(100%, var(--control-content-max)); margin: 0 auto; padding: 10px 14px 8px 14px; box-sizing: border-box; }
-        #cmd-input { flex: 1; min-height: 38px; max-height: 150px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #fff; padding: 9px 16px; font-size: 16px; outline: none; resize: none; overflow-y: auto; line-height: 20px; box-sizing: border-box; transition: background 0.18s ease, border-color 0.18s ease; }
-        #cmd-input::placeholder { color: rgba(255,255,255,0.45); }
-        #cmd-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(0,122,255,0.42); color: #fff; }
-        #timer-btn { width: 38px; height: 38px; margin-left: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 24px; line-height: 1; }
-        #timer-btn.active { color: #fff; border-color: rgba(0,122,255,0.45); background: rgba(0,122,255,0.22); }
-        #send-btn { width: 44px; height: 38px; margin-left: 10px; background: #007aff; border: none; border-radius: 19px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
-        #composer-menu { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -2px auto 8px auto; padding: 6px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(38,38,42,0.98); box-shadow: 0 12px 28px rgba(0,0,0,0.28); box-sizing: border-box; }
-        #composer-menu.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
-        .composer-menu-btn { min-height: 42px; border: 0; border-radius: 9px; background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }
-        .composer-menu-btn:hover { background: rgba(255,255,255,0.14); }
-        #attachment-strip { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -3px auto 2px auto; gap: 7px; overflow-x: auto; padding: 0 0 4px 0; box-sizing: border-box; scrollbar-width: none; }
-        #attachment-strip.active { display: flex; }
-        #attachment-strip::-webkit-scrollbar { display: none; }
-        .attachment-chip { min-width: 0; max-width: 210px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(0,122,255,0.45); border-radius: 10px; background: rgba(0,122,255,0.14); color: #e9f2ff; font-size: 12px; }
-        .attachment-chip.uploading { border-color: rgba(255,159,10,0.55); background: rgba(255,159,10,0.12); }
-        .attachment-chip-content { min-width: 0; flex: 1; }
-        .attachment-chip-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .attachment-progress { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.16); }
-        .attachment-progress > span { display: block; height: 100%; border-radius: inherit; background: #ff9f0a; transition: width .15s ease; }
-        .attachment-progress.estimated > span { background: repeating-linear-gradient(90deg, #ff9f0a 0 12px, #ffd37b 12px 24px); background-size: 48px 100%; animation: attachment-upload-pulse .75s linear infinite; }
-        .attachment-status { display: block; margin-top: 3px; color: #ffd59a; font-size: 10px; }
-        @keyframes attachment-upload-pulse { from { background-position: 0 0; } to { background-position: 48px 0; } }
-        .attachment-remove { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; font-size: 15px; line-height: 18px; cursor: pointer; flex: 0 0 auto; }
-        #timed-send-panel { display: none; margin: 0 14px 10px 14px; padding: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(28,28,30,0.98); box-sizing: border-box; }
-        #timed-send-panel.active { display: block; }
-        .timed-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
-        .timed-row select { min-width: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 8px; padding: 8px 9px; font-size: 13px; outline: none; box-sizing: border-box; }
-        .timed-preview { margin-top: 8px; color: #d1d5db; font-size: 12px; line-height: 1.4; }
-        .timed-editor-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
-        #timed-tag-rail { position: absolute; left: 4px; top: 58px; display: flex; flex-direction: column; gap: 6px; z-index: 2400; pointer-events: none; }
-        .timed-tag { width: 54px; min-height: 34px; border: 1px solid rgba(255,255,255,0.14); border-left: 0; border-radius: 0 11px 11px 0; background: rgba(0,122,255,0.24); color: #fff; backdrop-filter: blur(12px); font-size: 12px; font-weight: 800; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.08; white-space: pre-line; box-shadow: 0 8px 20px rgba(0,0,0,0.25); pointer-events: auto; }
-        .timed-tag.active { background: rgba(0,122,255,0.42); border-color: rgba(255,255,255,0.28); }
-        .timed-tag:active { transform: scale(0.96); }
-        #shortcut-rail { display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 0 14px 12px 14px; box-sizing: border-box; scroll-padding-left: 14px; scroll-padding-right: 14px; }
-        #shortcut-rail::-webkit-scrollbar { display: none; }
-        .shortcut-group { flex: 0 0 calc(100vw - 28px); display: grid; gap: 8px; scroll-snap-align: start; }
-        .simple-shortcuts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-        .complex-shortcuts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-        .key-btn, .command-key { flex: 0 0 auto; min-width: 0; height: 40px; border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; background: rgba(255,255,255,0.08); color: #d1d5db; font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; }
-        .key-btn { font-size: 11px; }
-        .shortcut-group .key-btn, .shortcut-group .command-key { width: 100%; }
-        .key-btn:active, .command-key:active { background: rgba(255,255,255,0.14); color: #fff; }
-        .key-btn.active { background: rgba(0, 122, 255, 0.25); border-color: #007aff; color: #00a2ff; }
-        #terminal-container { flex: 1; min-height: 0; width: 100%; background: #000; position: relative; overflow: hidden; overflow-anchor: none; }
-        #terminal { height: 100%; width: 100%; }
-        #claude-chat-container { display: none; flex: 1; min-height: 0; overflow-y: auto; background: #050505; padding: 12px 12px 24px 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
-        #codex-chat-container { display: none; flex: 1; min-height: 0; overflow-y: auto; background: #050505; padding: 12px 12px 24px 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
-        .codex-conversation { width: min(100%, var(--chat-content-max)); margin: 0 auto; }
-        .codex-working-indicator { position: sticky; top: 0; z-index: 4; width: 28px; height: 28px; margin: 0 0 -28px auto; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(28,28,30,.68); box-shadow: 0 5px 16px rgba(0,0,0,.24); backdrop-filter: blur(8px); pointer-events: none; }
-        .codex-working-indicator::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid rgba(255,255,255,.7); border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; }
-        .codex-message-block { max-width: 100%; margin: 0 0 12px; }
-        .codex-message-block.user { max-width: 92%; margin-left: auto; }
-        .codex-message { max-width: 100%; margin: 0; color: #f5f5f7; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
-        .codex-message.user { padding: 8px 12px; border: 1px solid rgba(0,122,255,.32); border-radius: 12px; background: rgba(0,122,255,.24); }
-        .codex-message.event { color: var(--text-dim); text-align: center; font-size: 12px; }
-        .codex-message-time { display: block; width: max-content; margin-top: 4px; padding: 0 2px; color: #8e8e93; font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
-        .codex-message-block.user .codex-message-time { margin-left: auto; }
-        .codex-status-card { margin: 10px 0 14px; border: 1px solid rgba(100,210,255,.2); border-radius: 10px; background: rgba(28,28,30,.72); padding: 11px; color: #f5f5f7; }
-        .codex-status-title { margin-bottom: 9px; color: #64d2ff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
-        .codex-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
-        .codex-status-item { min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.035); padding: 8px; }
-        .codex-status-label { color: #8e8e93; font-size: 10px; font-weight: 800; text-transform: uppercase; }
-        .codex-status-value { margin-top: 3px; color: #f5f5f7; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
-        .codex-tool { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); overflow: hidden; margin: 8px 0; color: #d1d5db; }
-        .codex-tool summary { list-style: none; cursor: pointer; }
-        .codex-tool summary::-webkit-details-marker { display: none; }
-        .codex-tool-header { display: flex; align-items: center; min-width: 0; gap: 8px; min-height: 34px; padding: 6px 9px; }
-        .codex-tool-icon { width: 19px; flex: 0 0 19px; color: #c7c7cc; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
-        .codex-tool-title { flex: 0 1 auto; min-width: 0; color: #f5f5f7; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .codex-tool-command { flex: 1; min-width: 0; color: #a9a9b0; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .codex-tool-state { flex: 0 0 auto; color: #8e8e93; font-size: 11px; }
-        .codex-tool-duration { flex: 0 0 auto; color: #6f6f76; font-size: 10px; font-variant-numeric: tabular-nums; }
-        .codex-tool-state.running::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1.5px solid #8e8e93; border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; vertical-align: -1px; }
-        .codex-tool.error { border-color: rgba(255,59,48,.38); background: rgba(255,59,48,.07); }
-        .codex-tool-body { border-top: 1px solid rgba(255,255,255,.08); padding: 9px 10px; }
-        .codex-tool-code { margin: 0; max-height: 320px; overflow: auto; color: #c7c7cc; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.42 ui-monospace, SFMono-Regular, Menlo, monospace; }
-        .codex-work-group { margin: 8px 0; border-left: 1px solid rgba(255,255,255,.12); padding-left: 8px; }
-        .codex-work-group > summary { list-style: none; display: flex; align-items: center; gap: 7px; min-height: 30px; color: #a9a9b0; cursor: pointer; font-size: 12px; }
-        .codex-work-group > summary::-webkit-details-marker { display: none; }
-        .codex-work-group > summary::before { content: '›'; width: 12px; color: #8e8e93; font-size: 17px; transform-origin: center; }
-        .codex-work-group[open] > summary::before { transform: rotate(90deg); }
-        .codex-work-group-body { padding-left: 2px; }
-        .codex-patch-file { border-top: 1px solid rgba(255,255,255,.08); }
-        .codex-patch-file:first-child { border-top: 0; }
-        .codex-patch-file > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #d1d5db; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
-        .codex-patch-file .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .codex-patch-kind { color: #8e8e93; font-family: system-ui, sans-serif; }
-        .codex-diff { overflow-x: auto; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.24); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
-        .codex-diff-line { min-width: max-content; padding: 0 10px; white-space: pre; color: #c7c7cc; }
-        .codex-diff-line.add { color: #b7e4c7; background: rgba(52,199,89,.1); }
-        .codex-diff-line.del { color: #ffb3ad; background: rgba(255,59,48,.1); }
-        .codex-diff-line.hunk { color: #64b5f6; background: rgba(0,122,255,.08); }
-        .codex-permission-result { color: #a9a9b0; font-size: 12px; margin-top: 7px; }
-        .codex-inline-permission { border-top: 1px solid rgba(255,204,0,.28); padding: 9px 10px 10px; background: rgba(255,204,0,.055); }
-        .codex-inline-permission-title { color: #f5f5f7; font-size: 12px; font-weight: 700; }
-        .codex-inline-permission .claude-permission-actions { margin-top: 8px; }
-        @keyframes codex-spin { to { transform: rotate(360deg); } }
-        #codex-control-panel { display: none; width: min(100%, var(--control-content-max)); margin: 0 auto; padding: 8px 14px 10px; border-bottom: 1px solid #222; background: #121212; box-sizing: border-box; }
-        .codex-control-rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
-        .codex-control-rail::-webkit-scrollbar { display: none; }
-        .codex-control-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 116px)); grid-template-rows: auto; justify-content: center; gap: clamp(2px, .8vw, 7px); align-items: center; white-space: nowrap; scroll-snap-align: start; box-sizing: border-box; }
-        .codex-control-page > * { width: 100%; min-width: 0; overflow: hidden; }
-        .codex-control-page .claude-ctrl-btn, .codex-control-page .codex-select-label { padding-left: clamp(2px, 1vw, 10px); padding-right: clamp(2px, 1vw, 10px); font-size: clamp(8px, 2.2vw, 11px); text-overflow: ellipsis; overflow: hidden; }
-        .codex-select-control { position: relative; display: block; min-width: 0; height: 32px; }
-        .codex-select-label { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.08); color: #f5f5f7; font-size: 11px; font-weight: 800; white-space: nowrap; }
-        .codex-select-control:focus-within .codex-select-label { background: rgba(255,255,255,.14); border-color: rgba(0,122,255,.45); }
-        .codex-select { appearance: none; position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; opacity: 0; cursor: pointer; }
-        .codex-select option { background: #1c1c1e; color: #fff; }
-        #codex-model-panel, #codex-resume-panel, #codex-fork-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(28,28,30,.99); border-radius: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.34); overflow: hidden; }
-        #codex-model-panel.active, #codex-resume-panel.active, #codex-fork-panel.active { display: block; }
-        #codex-model-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height: min(300px, 42dvh); }
-        #codex-model-panel.active { display: grid; }
-        .codex-picker-column { min-width: 0; overflow-y: auto; }
-        .codex-picker-column + .codex-picker-column { border-left: 1px solid rgba(255,255,255,.08); }
-        .codex-picker-option { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; color: #f5f5f7; text-align: left; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
-        .codex-picker-option.selected { background: rgba(0,122,255,.18); color: #fff; }
-        #codex-state-bar { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-top: 8px; color: var(--text-dim); font-size: 11px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
-        #codex-state-bar::-webkit-scrollbar { display: none; }
-        #codex-resume-panel, #codex-fork-panel { max-height: min(280px, 38dvh); overflow-y: auto; }
-        .claude-context-size-badge { position: sticky; top: 0; z-index: 2; width: max-content; max-width: 100%; margin: 0 0 8px auto; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.94); border-radius: 999px; padding: 4px 9px; color: #d1d5db; font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,0.24); }
-        .claude-message { max-width: 92%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; line-height: 1.45; font-size: 14px; }
-        .claude-message.user { margin-left: auto; background: rgba(0,122,255,0.24); border: 1px solid rgba(0,122,255,0.32); color: #fff; border-radius: 12px; padding-top: 7px; padding-bottom: 7px; }
-        .claude-message.assistant { max-width: 100%; background: transparent; border: 0; color: #f5f5f7; padding: 0 4px; margin: 0 0 12px 0; }
-        .claude-message.event { max-width: 100%; background: transparent; border: 0; color: var(--text-dim); font-size: 12px; padding: 3px 2px; text-align: center; }
-        .claude-message.error { color: #ff6b61; }
-        .claude-md { white-space: normal; }
-        .claude-md > :first-child { margin-top: 0; }
-        .claude-md > :last-child { margin-bottom: 0; }
-        .claude-md p { margin: 0 0 8px 0; }
-        .claude-md h1, .claude-md h2, .claude-md h3, .claude-md h4 { margin: 12px 0 7px 0; line-height: 1.22; font-weight: 800; letter-spacing: 0; }
-        .claude-md h1 { font-size: 20px; }
-        .claude-md h2 { font-size: 18px; }
-        .claude-md h3 { font-size: 16px; }
-        .claude-md h4 { font-size: 15px; }
-        .claude-md ul, .claude-md ol { margin: 0 0 9px 0; padding-left: 20px; }
-        .claude-md li { margin: 4px 0; }
-        .claude-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 4px; }
-        .claude-md pre { margin: 8px 0 10px 0; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.34); border-radius: 8px; overflow: auto; }
-        .claude-md pre code { display: block; padding: 11px 12px; background: transparent; border: 0; border-radius: 0; white-space: pre; line-height: 1.45; }
-        .claude-md blockquote { margin: 8px 0; padding: 2px 0 2px 10px; border-left: 3px solid rgba(255,255,255,0.22); color: #c7c7cc; }
-        .claude-md table { width: 100%; border-collapse: collapse; margin: 8px 0 10px 0; font-size: 13px; display: block; overflow-x: auto; }
-        .claude-md th, .claude-md td { border: 1px solid rgba(255,255,255,0.12); padding: 6px 8px; text-align: left; vertical-align: top; }
-        .claude-md th { background: rgba(255,255,255,0.07); color: #fff; }
-        .claude-md a { color: #64b5ff; text-decoration: none; }
-        .claude-md img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
-        .claude-md hr { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 12px 0; }
-        .claude-command-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: #f5f5f7; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 800; }
-        .claude-tool { max-width: 100%; margin: 0 0 10px 0; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.045); border-radius: 8px; color: #d1d5db; font-size: 13px; overflow: hidden; overflow-wrap: anywhere; }
-        .claude-tool strong { color: #fff; }
-        .claude-tool-card { display: block; }
-        .claude-tool-card summary { list-style: none; cursor: pointer; }
-        .claude-tool-card summary::-webkit-details-marker { display: none; }
-        .claude-tool-header { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 7px 9px; color: #f5f5f7; }
-        .claude-tool-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); flex: 0 0 auto; }
-        .claude-tool-icon::before { content: attr(data-icon); font-size: 11px; font-weight: 800; line-height: 1; }
-        .claude-tool-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
-        .claude-tool-status { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
-        .claude-tool-command { flex: 1; min-width: 0; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .claude-tool-body { padding: 0 10px 10px 10px; }
-        .claude-tool-section { margin-top: 8px; }
-        .claude-tool-section-title { color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
-        .claude-tool-code { margin: 0; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.32); border-radius: 7px; padding: 9px 10px; color: #d1d5db; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.42; overflow-x: auto; }
-        .claude-tool.error { border-color: rgba(255,107,97,0.38); background: rgba(255,59,48,0.07); }
-        .claude-work-group { max-width: 100%; margin: 0 0 10px 0; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.035); border-radius: 8px; overflow: hidden; }
-        .claude-work-group summary { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 7px 10px; cursor: pointer; color: #d1d5db; list-style: none; }
-        .claude-work-group summary::-webkit-details-marker { display: none; }
-        .claude-work-group-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .claude-work-group-body { padding: 2px 8px 8px 8px; }
-        .claude-permission { border-color: rgba(255,204,0,0.4); background: rgba(255,204,0,0.08); }
-        .claude-permission-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
-        .claude-permission-actions .small-btn { min-height: 30px; max-width: 100%; white-space: normal; line-height: 1.2; }
-        .claude-status { color: var(--text-dim); font-size: 12px; text-align: center; padding: 6px 0 0 0; }
-        #claude-control-panel { display: none; padding: 0 14px 10px 14px; box-sizing: border-box; }
-        .claude-control-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
-        .claude-select, .claude-ctrl-btn { min-width: 0; height: 32px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(255,255,255,0.08); color: #f5f5f7; font-size: 11px; font-weight: 800; letter-spacing: 0; padding: 0 10px; outline: none; box-sizing: border-box; }
-        .claude-select { appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; }
-        .claude-picker-wrap { min-width: 0; position: relative; }
-        .claude-picker-wrap select { display: none; }
-        .claude-picker-btn { width: 100%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .claude-picker-btn.active { background: rgba(0,122,255,0.22); border-color: rgba(0,122,255,0.5); }
-        #claude-picker-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.99); border-radius: 12px; max-height: min(280px, 42dvh); overflow-y: auto; box-shadow: 0 16px 36px rgba(0,0,0,0.34); }
-        #claude-picker-panel.active { display: block; }
-        #claude-usage-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.99); border-radius: 12px; padding: 10px 11px; box-shadow: 0 16px 36px rgba(0,0,0,0.34); color: #f5f5f7; }
-        #claude-usage-panel.active { display: block; }
-        .claude-usage-title { color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; }
-        .claude-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
-        .claude-usage-item { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); border-radius: 8px; padding: 8px; min-width: 0; }
-        .claude-usage-label { color: var(--text-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .claude-usage-value { margin-top: 4px; color: #f5f5f7; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .claude-picker-title { padding: 9px 11px 7px 11px; color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.06); }
-        .claude-picker-option { width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; color: #f5f5f7; padding: 10px 11px; text-align: left; cursor: pointer; box-sizing: border-box; }
-        .claude-picker-option:last-child { border-bottom: 0; }
-        .claude-picker-option:active, .claude-picker-option.selected { background: rgba(0,122,255,0.18); }
-        .claude-picker-option-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; }
-        .claude-picker-option-main .selected-label { color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; flex: 0 0 auto; }
-        .claude-picker-option-value { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d1d5db; font-size: 12px; margin-top: 3px; line-height: 1.35; }
-        .claude-ctrl-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
-        .claude-ctrl-btn:active, .claude-select:focus { background: rgba(255,255,255,0.14); border-color: rgba(0,122,255,0.45); }
-        .claude-ctrl-btn.danger { color: #ff6b61; background: rgba(255,59,48,0.12); }
-        .claude-ctrl-btn.primary { color: #fff; background: rgba(0,122,255,0.32); border-color: rgba(0,122,255,0.45); }
-        .claude-ctrl-btn:disabled { opacity: 0.45; cursor: default; }
-        #claude-state-bar { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-top: 8px; color: var(--text-dim); font-size: 11px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
-        #claude-state-bar::-webkit-scrollbar { display: none; }
-        .claude-state-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); border-radius: 999px; padding: 3px 8px; flex: 0 0 auto; }
-        .claude-state-pill.warn { color: #ffcc00; border-color: rgba(255,204,0,0.24); background: rgba(255,204,0,0.08); }
-        .claude-state-pill.perm { margin-left: auto; }
-        .claude-state-pill.perm.acceptEdits { color: #34c759; border-color: rgba(52,199,89,0.26); background: rgba(52,199,89,0.08); }
-        .claude-state-pill.perm.bypassPermissions { color: #ff9f0a; border-color: rgba(255,159,10,0.26); background: rgba(255,159,10,0.08); }
-        .claude-state-pill.perm.plan { color: #64d2ff; border-color: rgba(100,210,255,0.26); background: rgba(100,210,255,0.08); }
-        #claude-resume-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.98); border-radius: 12px; max-height: 180px; overflow-y: auto; }
-        #claude-resume-panel.active { display: block; }
-        .claude-resume-item { width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; color: #fff; padding: 10px 11px; cursor: pointer; box-sizing: border-box; }
-        .claude-resume-item:last-child { border-bottom: 0; }
-        .claude-resume-item:active { background: rgba(255,255,255,0.08); }
-        .claude-resume-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; }
-        .codex-resume-question-secondary { min-height: 1.35em; color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
-        .claude-resume-meta { color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
-        #terminal .xterm, #terminal .xterm-viewport, #terminal .xterm-screen, #terminal .xterm-rows, #terminal .xterm-rows span { user-select: text !important; -webkit-user-select: text !important; -webkit-touch-callout: default; touch-action: pan-y; }
-        #terminal .xterm-viewport { overflow-anchor: none; }
-        #terminal .xterm-helper-textarea { user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none; }
-        #scroll-controls { position: fixed; right: 14px; top: 60%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; z-index: 3000; }
-        .scroll-btn { --charge: 0deg; width: 56px; height: 56px; background: rgba(30, 30, 30, 0.5); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); cursor: pointer; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
-        .scroll-btn::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(var(--primary) var(--charge), transparent 0deg); opacity: 0; transition: opacity 0.12s ease; }
-        .scroll-btn::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(30, 30, 30, 0.72); border: 1px solid rgba(255,255,255,0.08); }
-        .scroll-btn.charging::before { opacity: 1; }
-        .scroll-btn span { position: relative; z-index: 1; }
-        #debug-log { position: fixed; bottom: 0; left: 0; right: 0; max-height: 100px; background: rgba(0,0,0,0.8); color: #0f0; font-size: 10px; overflow-y: auto; padding: 5px; z-index: 9999; display: none; pointer-events: none; }
-        
-        #history-content { flex: 1; background: #000; color: #d1d5db; padding: 14px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text !important; -webkit-user-select: text !important; box-sizing: border-box; }
-        #history-content.nowrap { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
-        .history-meta { color: var(--text-dim); font-size: 11px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); background: #0d0d0d; }
-
-        .tab-bar { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); background: var(--bg); }
-        .tab-btn { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text-dim); background: none; border: none; cursor: pointer; position: relative; }
-        .tab-btn.active { color: var(--text); }
-        .tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 2px; width: 40px; background: var(--primary); border-radius: 2px; }
-        .list-item { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.2s; }
-        .list-item:hover { background: rgba(255,255,255,0.05); }
-        .dir-icon { color: var(--primary); margin-right: 12px; }
-        .file-icon { color: var(--text-dim); margin-right: 12px; }
-        .btn-toggle { background: var(--card-bg); border-radius: 6px; padding: 4px; display: flex; gap: 4px; margin: 10px; }
-        .btn-toggle button { flex: 1; padding: 6px 0; border-radius: 4px; border: none; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; }
-        .btn-toggle button.active { background: var(--primary); color: #fff; }
-        .lobby-tabs { display: flex; background: var(--card-bg); border-radius: 8px; padding: 4px; margin-bottom: 16px; gap: 4px; }
-        .lobby-tab { flex: 1; border: none; border-radius: 6px; background: transparent; color: var(--text-dim); padding: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
-        .lobby-tab.active { background: var(--primary); color: #fff; }
-        .schedule-card { background: var(--card-bg); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
-        .schedule-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
-        .schedule-meta { margin-top: 6px; color: var(--text-dim); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
-        .schedule-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-        .small-btn { border: none; border-radius: 16px; padding: 7px 10px; font-weight: 700; font-size: 12px; color: #fff; background: rgba(255,255,255,0.1); cursor: pointer; }
-        .small-btn.primary { background: var(--primary); }
-        .small-btn.danger { background: rgba(255,59,48,0.18); color: #ff6b61; }
-        .form-field { margin-bottom: 12px; }
-        .form-field label { display:block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
-        .form-field input, .form-field select, .form-field textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 8px; padding: 9px 10px; font-size: 14px; outline: none; }
-        .weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
-        .weekday-btn { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text-dim); border-radius: 8px; padding: 8px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
-        .weekday-btn.active { border-color: var(--primary); background: rgba(0,122,255,0.25); color: #fff; }
-        #schedule-modal { background: var(--card-bg); width: 100%; max-width: 720px; max-height: 92dvh; overflow-y: auto; border-radius: 16px; padding: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); box-sizing: border-box; }
-        .step-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.04); }
-        .step-grid { display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto; gap: 8px; align-items: center; }
-        @media (max-width: 640px) {
-            .schedule-row { flex-direction: column; }
-            .schedule-actions { justify-content: flex-start; }
-            .step-grid { grid-template-columns: 1fr; }
-            .timed-row { grid-template-columns: 1fr; }
-        }
-        @media (max-width: 480px) {
-            :root { --chat-content-max: 100%; --control-content-max: 100%; }
-            #nav-bar { padding: 8px 10px; }
-            #back-btn { font-size: 15px; }
-            #back-btn svg { width: 22px; height: 22px; }
-            #session-title { font-size: 15px; padding: 0 7px; }
-            #nav-bar > div:last-child { gap: 5px !important; }
-            #nav-bar > div:last-child .icon-btn { min-width: 34px; min-height: 30px; padding: 5px 7px !important; }
-            #input-row { padding-left: 10px; padding-right: 10px; }
-            #codex-control-panel { padding-left: 8px; padding-right: 8px; }
-            .codex-control-page { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-            .codex-control-page .claude-ctrl-btn { height: 36px; padding-left: 4px; padding-right: 4px; }
-            .codex-select-control { height: 36px; }
-            #codex-chat-container { padding: 10px 10px calc(22px + env(safe-area-inset-bottom)); }
-            .codex-message-block.user { max-width: 94%; }
-            .claude-permission-actions { justify-content: flex-start; }
-        }
-        @media (max-width: 430px) {
-            #nav-bar > div:last-child .icon-btn:not(#codex-terminal-switch) { width: 34px; font-size: 0 !important; gap: 0 !important; }
-            #nav-bar > div:last-child .icon-btn:not(#codex-terminal-switch) svg { width: 16px; height: 16px; }
-            #codex-terminal-switch { padding-left: 8px !important; padding-right: 8px !important; }
-        }
-        @media (min-width: 768px) and (max-width: 1199px) {
-            :root { --chat-content-max: 780px; --control-content-max: 920px; }
-            #codex-chat-container { padding: 16px 18px 30px; }
-            #input-row, #codex-control-panel { padding-left: 18px; padding-right: 18px; }
-        }
-        @media (min-width: 1200px) {
-            :root { --chat-content-max: 960px; --control-content-max: 1100px; }
-            #codex-chat-container { padding: 18px 22px 34px; }
-        }
-    </style>
+    <link rel="stylesheet" href="vendor/xterm.css" />
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div id="debug-log"></div>
@@ -413,40 +74,43 @@
                 </div>
                 <input id="image-file-input" type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
                 <div id="claude-control-panel">
-                    <div class="claude-control-row">
-                        <div class="claude-picker-wrap">
-                            <select id="claude-permission-select" class="claude-select" title="Permission mode" onchange="updateClaudeSettingsFromControls()">
-                                <option value="default">Default</option>
-                                <option value="acceptEdits">Accept edits</option>
-                                <option value="plan">Plan mode</option>
-                                <option value="bypassPermissions">Bypass</option>
-                            </select>
-                            <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode">P</button>
-                        </div>
-                        <div class="claude-picker-wrap">
-                            <select id="claude-model-select" class="claude-select" title="Model" onchange="updateClaudeSettingsFromControls()">
-                                <option value="default">M:Def</option>
-                            </select>
-                            <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model">M</button>
+                    <div class="claude-control-rail">
+                        <div class="claude-control-page primary">
+                            <div class="claude-picker-wrap">
+                                <select id="claude-model-select" class="claude-select" title="Model" onchange="updateClaudeSettingsFromControls()">
+                                    <option value="default">M:Def</option>
+                                </select>
+                                <select id="claude-effort-select" class="claude-select" title="Effort" onchange="updateClaudeSettingsFromControls()">
+                                    <option value="low">Low</option>
+                                    <option value="medium">Medium</option>
+                                    <option value="high">High</option>
+                                    <option value="xhigh">Extra high</option>
+                                    <option value="max">Max</option>
+                                </select>
+                                <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model and effort">Model</button>
+                            </div>
+                            <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="requestClaudeUsage()" title="Show Claude usage">Usage</button>
+                            <button id="claude-context-btn" class="claude-ctrl-btn" onclick="requestClaudeContext()" title="Show Claude context">Context</button>
+                            <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn">Abort</button>
+                            <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume">Resume</button>
+                            <button id="claude-fork-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeForkPanel()" title="Fork a Claude session">Fork</button>
                         </div>
-                        <div class="claude-picker-wrap">
-                            <select id="claude-effort-select" class="claude-select" title="Effort" onchange="updateClaudeSettingsFromControls()">
-                                <option value="low">E:Low</option>
-                                <option value="medium">E:Med</option>
-                                <option value="high">E:High</option>
-                                <option value="xhigh">E:XHi</option>
-                                <option value="max">E:Max</option>
-                            </select>
-                            <button id="claude-effort-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('effort')" title="Effort">E</button>
+                        <div class="claude-control-page secondary">
+                            <div class="claude-picker-wrap">
+                                <select id="claude-permission-select" class="claude-select" title="Permission mode" onchange="updateClaudeSettingsFromControls()">
+                                    <option value="default">Default</option>
+                                    <option value="acceptEdits">Accept edits</option>
+                                    <option value="plan">Plan mode</option>
+                                    <option value="bypassPermissions">Bypass</option>
+                                </select>
+                                <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode">Permission</button>
+                            </div>
                         </div>
-                        <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="toggleClaudeUsagePanel()" title="Usage">Usage</button>
-                        <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn">Abort</button>
-                        <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume">Resume</button>
                     </div>
                     <div id="claude-state-bar"></div>
                     <div id="claude-picker-panel"></div>
-                    <div id="claude-usage-panel"></div>
                     <div id="claude-resume-panel"></div>
+                    <div id="claude-fork-panel"></div>
                 </div>
                 <div id="codex-control-panel">
                     <div id="codex-control-rail" class="codex-control-rail">
@@ -631,3247 +295,18 @@
         </div>
     </div>
 
-    <script defer src="https://unpkg.com/xterm@5.3.0/lib/xterm.js"></script>
-    <script defer src="https://unpkg.com/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
+    <script defer src="vendor/xterm.js"></script>
+    <script defer src="vendor/xterm-addon-fit.js"></script>
     <script src="gitgraph.js"></script>
-    <script>
-        let currentSocket = null, term = null, fitAddon = null, activeSessionId = null, activeToolKey = null;
-        let appConfig = null;
-        let sessionPollTimer = null;
-        let lobbyTab = 'sessions';
-        let scheduleTools = [];
-        let editingScheduleId = null;
-        let editingSteps = [];
-        let selectedWeekdays = [1, 2, 3, 4, 5];
-        let timedSendRefreshTimer = null;
-        let timedTagTimer = null;
-        let editingTimedInputId = null;
-        let claudeMessages = [];
-        let claudePendingPermissions = [];
-        let claudeStatus = 'idle';
-        let claudeRuntimeConfig = null;
-        let claudePickerOpen = null;
-        let claudeUsagePanelOpen = false;
-        const CLAUDE_CONTEXT_SIZE = 190000;
-        let claudeState = {
-            permissionMode: 'default',
-            model: 'default',
-            effort: 'medium',
-            contextRemaining: null,
-            latestUsage: null,
-            claudeSessionId: null,
-            resumeSessionId: null,
-            canAbort: false,
-            pendingPermissionCount: 0
-        };
-        let claudeResumePanelOpen = false;
-        let claudeResumeItemsLoaded = false;
-        let codexMessages = [];
-        let codexPendingPermissions = [];
-        let codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canSwitchToTerminal: false, canSwitchToStructured: false };
-        let codexModelPanelOpen = false;
-        let codexModelCandidate = null;
-        let codexResumePanelOpen = false;
-        let codexForkPanelOpen = false;
-        let codexRenderFrame = null;
-        const modifiers = { ctrl: false };
-
-        function log(msg) {
-            const el = document.getElementById('debug-log');
-            const entry = document.createElement('div');
-            entry.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
-            el.appendChild(entry);
-            console.log(msg);
-        }
-
-        async function fetchWithTimeout(url, options = {}, timeout = 5000) {
-            const controller = new AbortController();
-            const id = setTimeout(() => controller.abort(), timeout);
-            try {
-                const response = await fetch(url, { ...options, signal: controller.signal });
-                clearTimeout(id);
-                return response;
-            } catch (e) {
-                clearTimeout(id);
-                if (e && e.name === 'AbortError') {
-                    throw new Error(`Request timed out after ${Math.round(timeout / 1000)}s`);
-                }
-                throw e;
-            }
-        }
-
-        function escapeHtml(value = '') {
-            return String(value)
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
-        }
-
-        function encodePathValue(path = '') {
-            return encodeURIComponent(path).replace(/'/g, '%27');
-        }
-
-        function decodePathValue(path = '') {
-            return decodeURIComponent(path);
-        }
-
-        async function copyTextToClipboard(text) {
-            if (navigator.clipboard && window.isSecureContext) {
-                await navigator.clipboard.writeText(text);
-                return;
-            }
-            const el = document.createElement('textarea');
-            el.value = text;
-            el.setAttribute('readonly', '');
-            el.style.position = 'fixed';
-            el.style.opacity = '0';
-            document.body.appendChild(el);
-            el.select();
-            document.execCommand('copy');
-            document.body.removeChild(el);
-        }
-
-        async function copySessionDirectory(directory, event) {
-            event.stopPropagation();
-            const btn = event.currentTarget;
-            try {
-                await copyTextToClipboard(directory);
-                const oldTitle = btn.title;
-                btn.title = 'Copied';
-                btn.style.color = '#fff';
-                setTimeout(() => {
-                    btn.title = oldTitle || 'Copy directory';
-                    btn.style.color = '';
-                }, 1200);
-            } catch (e) {
-                alert('Copy failed');
-            }
-        }
-
-        function formatWeekdays(days = []) {
-            const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-            return days.map(day => labels[day]).filter(Boolean).join(', ') || 'No days';
-        }
-
-        function formatDateTime(value) {
-            return value ? new Date(value).toLocaleString() : 'Not scheduled';
-        }
-
-        function switchLobbyTab(tab) {
-            lobbyTab = tab;
-            document.getElementById('lobby-tab-sessions').classList.toggle('active', tab === 'sessions');
-            document.getElementById('lobby-tab-schedules').classList.toggle('active', tab === 'schedules');
-            document.getElementById('sessions-list').style.display = tab === 'sessions' ? '' : 'none';
-            document.getElementById('schedules-list').style.display = tab === 'schedules' ? '' : 'none';
-            if (tab === 'sessions') refreshSessionsNow();
-            if (tab === 'schedules') loadSchedules();
-        }
-
-        async function loadSchedules() {
-            const list = document.getElementById('schedules-list');
-            list.innerHTML = '<p style="color:#888; text-align:center; margin-top:50px;">Loading schedules...</p>';
-            try {
-                await ensureScheduleTools().catch(() => {});
-                const res = await fetchWithTimeout('/api/schedules');
-                if (!res.ok) throw new Error('HTTP ' + res.status);
-                const schedules = await res.json();
-                if (!schedules.length) {
-                    list.innerHTML = '<p style="color:#888; text-align:center; margin-top:50px;">No scheduled tasks</p>';
-                    return;
-                }
-
-                let html = '';
-                schedules.forEach(job => {
-                    const encodedId = encodePathValue(job.id);
-                    const tool = scheduleTools.find(t => t.key === job.target.toolKey);
-                    const statusColor = job.lastRunStatus === 'failed' ? '#ff6b61' : job.running ? '#5ac8fa' : 'var(--text-dim)';
-                    html += `<div class="schedule-card">
-                        <div class="schedule-row">
-                            <div style="flex:1; min-width:0;">
-                                <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
-                                    <strong>${escapeHtml(job.name)}</strong>
-                                    <span style="font-size:11px; color:${job.enabled ? '#34c759' : '#8e8e93'}; border:1px solid currentColor; border-radius:10px; padding:1px 7px;">${job.enabled ? 'ON' : 'OFF'}</span>
-                                </div>
-                                <div class="schedule-meta">
-                                    ${escapeHtml(job.schedule.time)} | ${escapeHtml(formatWeekdays(job.schedule.weekdays))}<br>
-                                    ${escapeHtml(tool ? tool.displayName : job.target.toolKey)} | ${escapeHtml(job.target.workingDirectory || 'Default directory')}<br>
-                                    Next: ${escapeHtml(formatDateTime(job.nextRunAt))}<br>
-                                    <span style="color:${statusColor};">Last: ${escapeHtml(job.lastRunStatus || 'idle')}${job.lastRunMessage ? ' - ' + escapeHtml(job.lastRunMessage) : ''}</span>
-                                </div>
-                            </div>
-                            <div class="schedule-actions">
-                                <button class="small-btn primary" onclick="simulateSchedule(decodePathValue('${encodedId}'))">Test</button>
-                                <button class="small-btn" onclick="editSchedule(decodePathValue('${encodedId}'))">Edit</button>
-                                <button class="small-btn" onclick="duplicateSchedule(decodePathValue('${encodedId}'))">Copy</button>
-                                <button class="small-btn" onclick="toggleSchedule(decodePathValue('${encodedId}'), ${job.enabled ? 'false' : 'true'})">${job.enabled ? 'Disable' : 'Enable'}</button>
-                                <button class="small-btn danger" onclick="deleteSchedule(decodePathValue('${encodedId}'))">Delete</button>
-                            </div>
-                        </div>
-                    </div>`;
-                });
-                list.innerHTML = html;
-            } catch (e) {
-                list.innerHTML = `<div style="color:#ff3b30; text-align:center; margin-top:50px;"><p>Failed to load: ${escapeHtml(e.message)}</p><button class="btn-retry" onclick="loadSchedules()">Retry</button></div>`;
-            }
-        }
-
-        async function loadSessions() {
-            log('Loading sessions...');
-            const list = document.getElementById('sessions-list');
-            try {
-                const res = await fetchWithTimeout('/api/sessions');
-                if (!res.ok) throw new Error('HTTP ' + res.status);
-                const sessions = await res.json();
-                if (!sessions || sessions.length === 0) { 
-                    list.innerHTML = '<p style="color:#888; text-align:center; margin-top:50px;">No active sessions</p>'; 
-                    return; 
-                }
-                
-                let html = '';
-                sessions.forEach(s => {
-                    const workingDirectory = s.workingDirectory || 'Unknown directory';
-                    const encodedName = encodePathValue(s.name);
-                    const encodedDir = encodePathValue(workingDirectory);
-                    const timedInputCount = Number(s.timedInputCount) || 0;
-                    const timerBadge = timedInputCount > 0
-                        ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
-                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
-                            ${timedInputCount}
-                        </span>`
-                        : '';
-                    html += `<div class="session-card">
-                        <div class="session-info">
-                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button class="icon-btn" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
-                            <p>${escapeHtml(s.tool)}</p>
-                            <p>${new Date(s.startTime).toLocaleTimeString()}</p>
-                            <div class="session-dir-row">
-                                <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
-                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-                                </button>
-                                <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
-                            </div>
-                        </div>
-                        <div class="session-actions">
-                            <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
-                            <button class="icon-btn btn-delete" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
-                        </div>
-                    </div>`;
-                });
-                list.innerHTML = html;
-            } catch (e) { 
-                list.innerHTML = `<div style="color:#ff3b30; text-align:center; margin-top:50px;"><p>Failed to load: ${e.message}</p><button class="btn-retry" onclick="loadSessions()">Retry</button></div>`;
-            }
-        }
-
-        async function renameSession(id, oldName, e) {
-            e.stopPropagation();
-            const newName = prompt('Rename session', oldName);
-            if (newName && newName !== oldName) {
-                try {
-                    await fetchWithTimeout('/api/sessions/' + id, { 
-                        method: 'PATCH', 
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ name: newName }) 
-                    });
-                    refreshSessionsNow();
-                } catch (e) { alert('Rename failed'); }
-            }
-        }
-
-        async function showToolModal() {
-            document.getElementById('modal-overlay').style.display = 'flex';
-            const list = document.getElementById('tools-list');
-            loadAppConfig();
-            try {
-                const res = await fetchWithTimeout('/api/tools');
-                const tools = await res.json();
-                
-                let html = '';
-                tools.forEach(t => {
-                    const versionLabel = t.version && t.version !== 'unknown' ? `v${t.version}` : 'version unknown';
-                    html += `<div class="tool-item" onclick='createSession(${JSON.stringify(t.key)}, ${JSON.stringify(t.displayName)})'>
-                        <div class="tool-icon">${t.displayName[0]}</div>
-                        <div>
-                            <div style="font-weight:600">${t.displayName}</div>
-                            <div style="font-size:12px; color:#888">${versionLabel}</div>
-                        </div>
-                    </div>`;
-                });
-                list.innerHTML = html;
-            } catch (e) { 
-                list.innerHTML = `<p style="color:#ff3b30">Detection failed: ${e.message}</p>`;
-            }
-        }
-
-        async function loadAppConfig() {
-            if (appConfig) {
-                document.getElementById('default-cwd').textContent = appConfig.defaultWorkingDirectory || 'Current folder';
-                return;
-            }
-            try {
-                const res = await fetchWithTimeout('/api/config');
-                if (!res.ok) throw new Error('HTTP ' + res.status);
-                appConfig = await res.json();
-                document.getElementById('default-cwd').textContent = appConfig.defaultWorkingDirectory || 'Current folder';
-            } catch (e) {
-                document.getElementById('default-cwd').textContent = 'Current folder';
-            }
-        }
-
-        function closeToolModal(e) { 
-            if (e.target.id === 'modal-overlay') document.getElementById('modal-overlay').style.display = 'none'; 
-        }
-
-        function isLobbyVisible() {
-            return document.getElementById('lobby-view').classList.contains('active');
-        }
-
-        function scheduleSessionPolling() {
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            if (!isLobbyVisible()) return;
-
-            const delay = document.hidden ? 30000 : 10000;
-            sessionPollTimer = setTimeout(async () => {
-                await loadSessions();
-                scheduleSessionPolling();
-            }, delay);
-        }
-
-        async function refreshSessionsNow() {
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            if (!isLobbyVisible()) return;
-            if (lobbyTab === 'schedules') {
-                await loadSchedules();
-                scheduleSessionPolling();
-                return;
-            }
-            await loadSessions();
-            scheduleSessionPolling();
-        }
-
-        async function markCompletionRead(id) {
-            try {
-                await fetchWithTimeout('/api/sessions/' + id + '/completion/read', { method: 'POST' });
-            } catch (e) {
-                log('Failed to mark completion read: ' + e.message);
-            }
-        }
-
-        function isClaudeSession() {
-            return activeToolKey === 'claude-code';
-        }
-
-        function isCodexSession() {
-            return activeToolKey === 'codex';
-        }
-
-        function setClaudeModeEnabled(enabled) {
-            const codexChat = isCodexSession() && codexState.presentation === 'structured';
-            const structured = enabled || codexChat;
-            document.getElementById('terminal-container').style.display = structured ? 'none' : '';
-            document.getElementById('claude-chat-container').style.display = enabled ? 'block' : 'none';
-            document.getElementById('codex-chat-container').style.display = codexChat ? 'block' : 'none';
-            document.getElementById('claude-control-panel').style.display = enabled ? 'block' : 'none';
-            document.getElementById('codex-control-panel').style.display = codexChat ? 'block' : 'none';
-            document.getElementById('codex-terminal-switch').style.display = isCodexSession() ? '' : 'none';
-            document.getElementById('timer-btn').style.display = '';
-            document.getElementById('attach-image-btn').style.display = codexChat ? '' : 'none';
-            document.getElementById('shortcut-rail').style.display = structured ? 'none' : '';
-            document.getElementById('scroll-controls').style.display = structured ? 'none' : '';
-            document.getElementById('cmd-input').placeholder = enabled ? 'Message Claude...' : codexChat ? 'Message Codex...' : 'Type a message...';
-            updateTerminalControlsHeight();
-        }
-
-        function updateTerminalControlsHeight() {
-            const controls = document.getElementById('terminal-controls');
-            const measuredHeight = controls ? Math.ceil(controls.getBoundingClientRect().height) : 0;
-            document.documentElement.style.setProperty('--terminal-controls-rest-height', `${Math.max(0, measuredHeight)}px`);
-        }
-
-        function shortModelLabel(value, resolved) {
-            const source = String(value || 'default');
-            const target = String(resolved || source);
-            const compact = target
-                .replace(/^claude-/, '')
-                .replace(/-20\d{6,}.*$/, '')
-                .slice(0, 9);
-            if (source === 'default') return 'M:Def';
-            if (source === 'env') return `M:${compact || 'Env'}`;
-            if (source === 'sonnet') return `M:${compact || 'Son'}`;
-            if (source === 'opus') return `M:${compact || 'Opus'}`;
-            if (source === 'haiku') return `M:${compact || 'Hai'}`;
-            return `M:${compact || source.slice(0, 9)}`;
-        }
-
-        function fullModelLabel(value, resolved, label) {
-            const source = String(value || 'default');
-            if (source === 'default') return 'Default';
-            if (source === 'env') return resolved ? `Environment (${resolved})` : 'Environment';
-            if (label && label !== value) return label;
-            return String(resolved || value || 'Model');
-        }
-
-        function permissionModeLabel(value) {
-            const labels = {
-                default: 'Default',
-                acceptEdits: 'Accept edits',
-                plan: 'Plan mode',
-                bypassPermissions: 'Bypass'
-            };
-            return labels[value] || String(value || 'Default');
-        }
-
-        function effortLabel(value) {
-            const labels = {
-                low: 'Low',
-                medium: 'Medium',
-                high: 'High',
-                xhigh: 'Extra high',
-                max: 'Max'
-            };
-            return labels[value] || String(value || 'Medium');
-        }
-
-        function pickerLabelFromOption(option) {
-            return option ? (option.textContent || option.value || '') : '';
-        }
-
-        function pickerFullValue(option) {
-            if (!option) return '';
-            return option.dataset.resolved || '';
-        }
-
-        function syncClaudePickerButtons() {
-            const mappings = [
-                ['permission', 'claude-permission-select', 'claude-permission-picker-btn', 'Perm'],
-                ['model', 'claude-model-select', 'claude-model-picker-btn', 'Model'],
-                ['effort', 'claude-effort-select', 'claude-effort-picker-btn', 'Effort']
-            ];
-            mappings.forEach(([type, selectId, buttonId, prefix]) => {
-                const select = document.getElementById(selectId);
-                const button = document.getElementById(buttonId);
-                if (!select || !button) return;
-                const option = select.selectedOptions && select.selectedOptions[0];
-                const label = pickerLabelFromOption(option);
-                const fullValue = pickerFullValue(option);
-                button.textContent = prefix;
-                button.title = fullValue || label || prefix;
-                button.classList.toggle('active', claudePickerOpen === type);
-            });
-        }
-
-        function closeClaudePicker() {
-            claudePickerOpen = null;
-            const panel = document.getElementById('claude-picker-panel');
-            if (panel) {
-                panel.classList.remove('active');
-                panel.innerHTML = '';
-            }
-            syncClaudePickerButtons();
-            updateTerminalControlsHeight();
-        }
-
-        function closeClaudeUsagePanel() {
-            claudeUsagePanelOpen = false;
-            const panel = document.getElementById('claude-usage-panel');
-            if (panel) panel.classList.remove('active');
-            updateTerminalControlsHeight();
-        }
-
-        function pickerTitle(type) {
-            if (type === 'permission') return 'Permission mode';
-            if (type === 'model') return 'Model';
-            if (type === 'effort') return 'Effort';
-            return 'Options';
-        }
-
-        function selectIdForPicker(type) {
-            if (type === 'permission') return 'claude-permission-select';
-            if (type === 'model') return 'claude-model-select';
-            if (type === 'effort') return 'claude-effort-select';
-            return '';
-        }
-
-        function renderClaudePicker(type) {
-            const panel = document.getElementById('claude-picker-panel');
-            const select = document.getElementById(selectIdForPicker(type));
-            if (!panel || !select) return;
-            const options = Array.from(select.options);
-            panel.innerHTML = `<div class="claude-picker-title">${escapeHtml(pickerTitle(type))}</div>${options.map(option => {
-                const selected = option.value === select.value;
-                const full = pickerFullValue(option);
-                return `<button class="claude-picker-option${selected ? ' selected' : ''}" onclick="chooseClaudePickerOption('${type}', decodePathValue('${encodePathValue(option.value)}'))">
-                    <div class="claude-picker-option-main">
-                        <span>${escapeHtml(option.textContent || option.value)}</span>
-                        ${selected ? '<span class="selected-label">Selected</span>' : ''}
-                    </div>
-                    ${full ? `<div class="claude-picker-option-value">${escapeHtml(full)}</div>` : ''}
-                </button>`;
-            }).join('')}`;
-            panel.classList.add('active');
-            syncClaudePickerButtons();
-            updateTerminalControlsHeight();
-        }
-
-        async function toggleClaudePicker(type) {
-            if (claudePickerOpen === type) {
-                closeClaudePicker();
-                return;
-            }
-            if (type === 'model') await refreshClaudeRuntimeConfig();
-            closeClaudeUsagePanel();
-            claudeResumePanelOpen = false;
-            const resumePanel = document.getElementById('claude-resume-panel');
-            if (resumePanel) resumePanel.classList.remove('active');
-            claudePickerOpen = type;
-            renderClaudePicker(type);
-        }
-
-        function chooseClaudePickerOption(type, value) {
-            const select = document.getElementById(selectIdForPicker(type));
-            if (!select) return;
-            select.value = value;
-            closeClaudePicker();
-            updateClaudeSettingsFromControls();
-        }
-
-        function applyClaudeRuntimeConfig(config) {
-            if (!config || !Array.isArray(config.models)) return;
-            claudeRuntimeConfig = config;
-            const modelEl = document.getElementById('claude-model-select');
-            if (modelEl) {
-                const current = modelEl.value || claudeState.model || config.defaultModel || 'default';
-                modelEl.innerHTML = '';
-                config.models.forEach(item => {
-                    const option = new Option(fullModelLabel(item.value, item.resolved, item.label), item.value);
-                    option.title = item.resolved ? `${item.label}: ${item.resolved}` : item.label;
-                    option.dataset.resolved = item.resolved || '';
-                    option.dataset.shortLabel = shortModelLabel(item.value, item.resolved);
-                    modelEl.add(option);
-                });
-                const next = Array.from(modelEl.options).some(option => option.value === current)
-                    ? current
-                    : (config.defaultModel || 'default');
-                modelEl.value = next;
-                claudeState.model = next;
-            }
-            if (config.defaultEffort && claudeState.effort === 'medium') {
-                claudeState.effort = config.defaultEffort;
-            }
-            syncClaudePickerButtons();
-            renderClaudeStateBar();
-        }
-
-        async function refreshClaudeRuntimeConfig() {
-            try {
-                const res = await fetchWithTimeout('/api/claude-config', {}, 10000);
-                const data = await res.json();
-                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load Claude config');
-                applyClaudeRuntimeConfig(data.config);
-                return data.config;
-            } catch (e) {
-                log('Failed to load Claude config: ' + e.message);
-                return null;
-            }
-        }
-
-        function ensureSelectOption(selectEl, value, labelPrefix) {
-            const normalized = String(value || '').trim();
-            if (!normalized) return;
-            const exists = Array.from(selectEl.options).some(option => option.value === normalized);
-            if (!exists) {
-                const label = `${labelPrefix}:${normalized.replace(/^claude-/, '').replace(/-20\d{6,}.*$/, '').slice(0, 10)}`;
-                selectEl.add(new Option(label, normalized));
-            }
-        }
-
-        function applyClaudeState(state = {}) {
-            claudeState = { ...claudeState, ...state };
-            claudeStatus = claudeState.status || claudeStatus;
-            const permissionEl = document.getElementById('claude-permission-select');
-            const modelEl = document.getElementById('claude-model-select');
-            const effortEl = document.getElementById('claude-effort-select');
-            if (permissionEl) permissionEl.value = claudeState.permissionMode || 'default';
-            if (modelEl) {
-                ensureSelectOption(modelEl, claudeState.model || 'default', 'M');
-                modelEl.value = claudeState.model || 'default';
-            }
-            if (effortEl) effortEl.value = claudeState.effort || 'medium';
-            syncClaudePickerButtons();
-            const abortBtn = document.getElementById('claude-abort-btn');
-            if (abortBtn) abortBtn.disabled = !(claudeState.canAbort || claudeStatus === 'thinking');
-            renderClaudeStateBar();
-            renderClaudeUsagePanel();
-            renderClaudeChat();
-        }
-
-        function shortValue(value, fallback = 'N/A') {
-            const text = String(value || fallback);
-            return text.length > 16 ? text.slice(0, 13) + '...' : text;
-        }
-
-        function formatTokenCount(value) {
-            const number = Number(value || 0);
-            if (number >= 1000000) return `${(number / 1000000).toFixed(2)}M`;
-            if (number >= 1000) return `${(number / 1000).toFixed(1)}K`;
-            return String(Math.round(number));
-        }
-
-        function formatContextK(value) {
-            return `${(Number(value || 0) / 1000).toFixed(1)}K`;
-        }
-
-        function contextRemainingPercent(usage) {
-            if (!usage || typeof usage.contextSize !== 'number') return null;
-            const used = Math.max(0, usage.contextSize);
-            return Math.max(0, Math.min(100, 100 - (used / CLAUDE_CONTEXT_SIZE) * 100));
-        }
-
-        function renderClaudeContextSizeBadge() {
-            const usage = claudeState.latestUsage;
-            if (!usage || typeof usage.contextSize !== 'number') return '';
-            return `<div class="claude-context-size-badge">Context ${escapeHtml(formatContextK(usage.contextSize))}</div>`;
-        }
-
-        function renderClaudeStateBar() {
-            const el = document.getElementById('claude-state-bar');
-            if (!el) return;
-            const pending = Number(claudeState.pendingPermissionCount || claudePendingPermissions.filter(item => item.status === 'pending').length) || 0;
-            const mode = claudeState.permissionMode || 'default';
-            const parts = [];
-            if (pending) {
-                parts.push(`<span class="claude-state-pill warn">${pending} approval${pending > 1 ? 's' : ''}</span>`);
-            } else if (claudeStatus === 'thinking') {
-                parts.push('<span class="claude-state-pill">Working</span>');
-            } else if (claudeStatus && !['idle', 'stopped'].includes(claudeStatus)) {
-                parts.push(`<span class="claude-state-pill warn">${escapeHtml(shortValue(claudeStatus))}</span>`);
-            }
-            const remainingPercent = contextRemainingPercent(claudeState.latestUsage);
-            if (remainingPercent !== null && remainingPercent <= 10) {
-                parts.push(`<span class="claude-state-pill warn">${Math.round(remainingPercent)}% left</span>`);
-            }
-            if (mode !== 'default') {
-                parts.push(`<span class="claude-state-pill perm ${escapeHtml(mode)}">${escapeHtml(permissionModeLabel(mode))}</span>`);
-            }
-            el.innerHTML = parts.join('');
-            el.style.display = parts.length ? 'flex' : 'none';
-        }
-
-        function usageItem(label, value) {
-            return `<div class="claude-usage-item">
-                <div class="claude-usage-label">${escapeHtml(label)}</div>
-                <div class="claude-usage-value">${escapeHtml(value)}</div>
-            </div>`;
-        }
-
-        function renderClaudeUsagePanel() {
-            const panel = document.getElementById('claude-usage-panel');
-            if (!panel) return;
-            const usage = claudeState.latestUsage;
-            if (!usage) {
-                panel.innerHTML = '<div class="claude-usage-title">Usage</div><div class="claude-resume-meta">No usage yet.</div>';
-            } else {
-                panel.innerHTML = `<div class="claude-usage-title">Usage</div>
-                    <div class="claude-usage-grid">
-                        ${usageItem('Total', formatTokenCount(usage.totalTokens))}
-                        ${usageItem('Context', formatContextK(usage.contextSize))}
-                        ${usageItem('Input', formatTokenCount(usage.inputTokens))}
-                        ${usageItem('Output', formatTokenCount(usage.outputTokens))}
-                        ${usageItem('Cache write', formatTokenCount(usage.cacheCreation))}
-                        ${usageItem('Cache read', formatTokenCount(usage.cacheRead))}
-                    </div>`;
-            }
-            panel.classList.toggle('active', claudeUsagePanelOpen);
-        }
-
-        function toggleClaudeUsagePanel() {
-            claudeUsagePanelOpen = !claudeUsagePanelOpen;
-            if (claudeUsagePanelOpen) {
-                closeClaudePicker();
-                claudeResumePanelOpen = false;
-                const resumePanel = document.getElementById('claude-resume-panel');
-                if (resumePanel) resumePanel.classList.remove('active');
-            }
-            renderClaudeUsagePanel();
-            updateTerminalControlsHeight();
-        }
-
-        async function updateClaudeSettingsFromControls() {
-            await refreshClaudeRuntimeConfig();
-            const settings = {
-                permissionMode: document.getElementById('claude-permission-select').value,
-                model: document.getElementById('claude-model-select').value,
-                effort: document.getElementById('claude-effort-select').value
-            };
-            applyClaudeState(settings);
-            if (currentSocket && currentSocket.readyState === 1) {
-                currentSocket.send(JSON.stringify({ type: 'claude-settings', settings }));
-            }
-        }
-
-        function abortClaudeSession() {
-            if (!currentSocket || currentSocket.readyState !== 1) return;
-            currentSocket.send(JSON.stringify({ type: 'claude-abort' }));
-        }
-
-        async function toggleClaudeResumePanel() {
-            claudeResumePanelOpen = !claudeResumePanelOpen;
-            if (claudeResumePanelOpen) closeClaudePicker();
-            if (claudeResumePanelOpen) closeClaudeUsagePanel();
-            const panel = document.getElementById('claude-resume-panel');
-            panel.classList.toggle('active', claudeResumePanelOpen);
-            updateTerminalControlsHeight();
-            if (claudeResumePanelOpen && !claudeResumeItemsLoaded) {
-                await loadClaudeResumeSessions();
-            }
-        }
-
-        async function loadClaudeResumeSessions() {
-            const panel = document.getElementById('claude-resume-panel');
-            if (!activeSessionId) return;
-            panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Loading sessions...</div>';
-            try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/claude-resume-sessions`, {}, 15000);
-                const data = await res.json();
-                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load resume sessions');
-                const items = data.items || [];
-                claudeResumeItemsLoaded = true;
-                if (!items.length) {
-                    panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">No local Claude sessions found for this folder.</div>';
-                    return;
-                }
-                panel.innerHTML = items.map(item => {
-                    const encodedId = encodePathValue(item.id);
-                    const updated = item.updatedAt ? new Date(item.updatedAt).toLocaleString() : 'Unknown';
-                    const active = item.id === claudeState.resumeSessionId || item.id === claudeState.claudeSessionId;
-                    return `<button class="claude-resume-item" onclick="selectClaudeResumeSession(decodePathValue('${encodedId}'))">
-                        <div class="claude-resume-title"><span>${escapeHtml(item.id.slice(0, 8))}${active ? ' · current' : ''}</span><span>${escapeHtml(updated)}</span></div>
-                        <div class="claude-resume-meta">${escapeHtml(item.lastText || item.firstText || item.cwd || 'No preview')}</div>
-                    </button>`;
-                }).join('');
-            } catch (e) {
-                panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px; color:#ff6b61;">${escapeHtml(e.message)}</div>`;
-            }
-        }
-
-        function selectClaudeResumeSession(id) {
-            if (!id || !currentSocket || currentSocket.readyState !== 1) return;
-            currentSocket.send(JSON.stringify({ type: 'claude-resume', resumeSessionId: id }));
-            applyClaudeState({ resumeSessionId: id, claudeSessionId: id });
-            claudeResumePanelOpen = false;
-            document.getElementById('claude-resume-panel').classList.remove('active');
-            updateTerminalControlsHeight();
-        }
-
-        function textFromClaudeMessage(message) {
-            if (!message) return '';
-            if (message.text) return String(message.text);
-            if (message.summary) return String(message.summary);
-            return '';
-        }
-
-        function escapeRegExp(text) {
-            return String(text).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        }
-
-        function inlineMarkdown(text) {
-            let html = escapeHtml(text || '');
-            html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-            html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-            html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
-            html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
-            html = html.replace(/_([^_\n]+)_/g, '<em>$1</em>');
-            html = html.replace(/!\[([^\]]*)\]\((https?:\/\/[^)\s]+)\)/g, '<img src="$2" alt="$1">');
-            html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-            return html;
-        }
-
-        function splitMarkdownBlocks(markdown) {
-            const lines = String(markdown || '').replace(/\r\n/g, '\n').split('\n');
-            const blocks = [];
-            let i = 0;
-            while (i < lines.length) {
-                if (!lines[i].trim()) {
-                    i++;
-                    continue;
-                }
-                const fence = lines[i].match(/^```(\w+)?\s*$/);
-                if (fence) {
-                    const language = fence[1] || '';
-                    const content = [];
-                    i++;
-                    while (i < lines.length && !/^```\s*$/.test(lines[i])) {
-                        content.push(lines[i]);
-                        i++;
-                    }
-                    if (i < lines.length) i++;
-                    blocks.push({ type: 'code', language, content: content.join('\n') });
-                    continue;
-                }
-                if (/^\s*[-*_]{3,}\s*$/.test(lines[i])) {
-                    blocks.push({ type: 'hr' });
-                    i++;
-                    continue;
-                }
-                if (/^\s{0,3}#{1,4}\s+/.test(lines[i])) {
-                    const match = lines[i].match(/^(\s{0,3})(#{1,4})\s+(.+)$/);
-                    blocks.push({ type: 'header', level: match[2].length, text: match[3] });
-                    i++;
-                    continue;
-                }
-                if (lines[i].includes('|') && i + 1 < lines.length && /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(lines[i + 1])) {
-                    const rows = [lines[i]];
-                    i += 2;
-                    while (i < lines.length && lines[i].includes('|') && lines[i].trim()) {
-                        rows.push(lines[i]);
-                        i++;
-                    }
-                    blocks.push({ type: 'table', rows });
-                    continue;
-                }
-                if (/^\s*([-*+])\s+/.test(lines[i]) || /^\s*\d+\.\s+/.test(lines[i])) {
-                    const ordered = /^\s*\d+\.\s+/.test(lines[i]);
-                    const items = [];
-                    while (i < lines.length && (ordered ? /^\s*\d+\.\s+/.test(lines[i]) : /^\s*[-*+]\s+/.test(lines[i]))) {
-                        items.push(lines[i].replace(ordered ? /^\s*\d+\.\s+/ : /^\s*[-*+]\s+/, ''));
-                        i++;
-                    }
-                    blocks.push({ type: ordered ? 'ol' : 'ul', items });
-                    continue;
-                }
-                if (/^\s*>\s?/.test(lines[i])) {
-                    const quote = [];
-                    while (i < lines.length && /^\s*>\s?/.test(lines[i])) {
-                        quote.push(lines[i].replace(/^\s*>\s?/, ''));
-                        i++;
-                    }
-                    blocks.push({ type: 'quote', text: quote.join('\n') });
-                    continue;
-                }
-                const paragraph = [];
-                while (i < lines.length && lines[i].trim()) {
-                    if (/^```/.test(lines[i]) || /^\s{0,3}#{1,4}\s+/.test(lines[i]) || /^\s*([-*+])\s+/.test(lines[i]) || /^\s*\d+\.\s+/.test(lines[i])) break;
-                    paragraph.push(lines[i]);
-                    i++;
-                }
-                blocks.push({ type: 'paragraph', text: paragraph.join('\n') });
-            }
-            return blocks;
-        }
-
-        function renderMarkdown(markdown) {
-            const blocks = splitMarkdownBlocks(markdown);
-            return `<div class="claude-md">${blocks.map(block => {
-                if (block.type === 'code') {
-                    const language = block.language ? `<div class="claude-tool-section-title">${escapeHtml(block.language)}</div>` : '';
-                    return `<pre>${language}<code>${escapeHtml(block.content)}</code></pre>`;
-                }
-                if (block.type === 'hr') return '<hr>';
-                if (block.type === 'header') return `<h${block.level}>${inlineMarkdown(block.text)}</h${block.level}>`;
-                if (block.type === 'ul') return `<ul>${block.items.map(item => `<li>${inlineMarkdown(item)}</li>`).join('')}</ul>`;
-                if (block.type === 'ol') return `<ol>${block.items.map(item => `<li>${inlineMarkdown(item)}</li>`).join('')}</ol>`;
-                if (block.type === 'quote') return `<blockquote>${renderMarkdown(block.text)}</blockquote>`;
-                if (block.type === 'table') return renderMarkdownTable(block.rows);
-                return `<p>${inlineMarkdown(block.text).replace(/\n/g, '<br>')}</p>`;
-            }).join('')}</div>`;
-        }
-
-        function renderMarkdownTable(rows) {
-            const parsed = rows.map(row => row.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map(cell => cell.trim()));
-            if (!parsed.length) return '';
-            const [head, ...body] = parsed;
-            return `<table><thead><tr>${head.map(cell => `<th>${inlineMarkdown(cell)}</th>`).join('')}</tr></thead><tbody>${body.map(row => `<tr>${row.map(cell => `<td>${inlineMarkdown(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
-        }
-
-        function parseLocalCommandMessage(text) {
-            const value = String(text || '');
-            if (/^\s*<local-command-caveat>[\s\S]*?<\/local-command-caveat>\s*$/.test(value)) return { kind: 'hidden' };
-            const stdoutMatch = value.match(/^\s*<local-command-stdout>\s*([\s\S]*?)\s*<\/local-command-stdout>\s*$/);
-            if (stdoutMatch) {
-                const stdout = stdoutMatch[1].trim();
-                if (/^Goal set:/i.test(stdout)) return { kind: 'hidden' };
-                return { kind: 'text', text: stdout };
-            }
-            const raw = value.trim().match(/^\/([a-zA-Z][\w:-]*)(?:\s+([\s\S]*?))?$/);
-            if (raw) {
-                return { kind: 'command', commandName: raw[1], args: raw[2] && raw[2].trim() };
-            }
-            const nameMatch = value.match(/<command-name>\s*\/?([^<]+?)\s*<\/command-name>/);
-            if (nameMatch) {
-                const argsMatch = value.match(/<command-args>\s*([\s\S]*?)\s*<\/command-args>/);
-                const stripped = value
-                    .replace(/<command-message>[\s\S]*?<\/command-message>/g, '')
-                    .replace(/<command-name>[\s\S]*?<\/command-name>/g, '')
-                    .replace(/<command-args>[\s\S]*?<\/command-args>/g, '')
-                    .trim();
-                if (!stripped) return { kind: 'command', commandName: nameMatch[1].trim(), args: argsMatch && argsMatch[1].trim() };
-                return { kind: 'text', text: stripped };
-            }
-            return { kind: 'text', text: value };
-        }
-
-        function toolCategory(name) {
-            if (['Bash', 'CodexBash', 'execute'].includes(name)) return 'terminal';
-            if (['Edit', 'MultiEdit', 'Write', 'NotebookEdit'].includes(name)) return 'edit';
-            if (['Read', 'LS'].includes(name)) return 'read';
-            if (['Grep', 'Glob'].includes(name)) return 'search';
-            if (['WebFetch', 'WebSearch'].includes(name)) return 'web';
-            if (['Task', 'Agent'].includes(name)) return 'task';
-            return 'other';
-        }
-
-        function toolIcon(category) {
-            const labels = { terminal: '$', edit: '+/-', read: 'R', search: '?', web: 'W', task: 'A', other: '*' };
-            return labels[category] || '*';
-        }
-
-        function toolCommand(tool) {
-            const input = tool && tool.input;
-            if (!input || typeof input !== 'object') return '';
-            if (typeof input.command === 'string') return input.command;
-            if (Array.isArray(input.command)) return input.command.join(' ');
-            if (typeof input.file_path === 'string') return input.file_path;
-            if (typeof input.path === 'string') return input.path;
-            if (typeof input.pattern === 'string') return input.pattern;
-            if (typeof input.prompt === 'string') return input.prompt;
-            return tool.summary || '';
-        }
-
-        function toolTitle(tool) {
-            const name = tool.name || 'Tool';
-            const input = tool.input || {};
-            if (name === 'Bash') return (tool.description || 'Terminal');
-            if (name === 'Read' && input.file_path) return input.file_path;
-            if (name === 'Edit' || name === 'MultiEdit' || name === 'Write') return input.file_path || name;
-            if (name === 'Grep') return input.pattern ? `grep(pattern: ${input.pattern})` : 'Search Content';
-            if (name === 'Glob') return input.pattern || 'Search Files';
-            if ((name === 'Task' || name === 'Agent') && input.description) return input.description;
-            if (name.startsWith('mcp__')) return name.replace(/^mcp__/, '').replace(/__/g, ': ');
-            return name;
-        }
-
-        function renderToolSection(title, value) {
-            if (value === undefined || value === null || value === '') return '';
-            const code = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
-            return `<div class="claude-tool-section"><div class="claude-tool-section-title">${escapeHtml(title)}</div><pre class="claude-tool-code">${escapeHtml(code)}</pre></div>`;
-        }
-
-        function renderClaudeTool(tool) {
-            const category = toolCategory(tool.name || '');
-            const command = toolCommand(tool);
-            const hasResult = tool.resultText || tool.isError;
-            const running = claudeStatus === 'thinking' && !hasResult;
-            const status = tool.isError ? 'error' : (hasResult ? 'completed' : (running ? 'running' : 'running'));
-            const open = tool.isError || (!hasResult && !running) ? ' open' : '';
-            const compact = category === 'terminal' || category === 'search' || category === 'read';
-            return `<details class="claude-tool claude-tool-card${tool.isError ? ' error' : ''}"${open}>
-                <summary class="claude-tool-header">
-                    <span class="claude-tool-icon" data-icon="${escapeHtml(toolIcon(category))}"></span>
-                    <span class="claude-tool-title">${escapeHtml(toolTitle(tool))}</span>
-                    <span class="claude-tool-status">${escapeHtml(status)}</span>
-                    <span class="claude-tool-command">${escapeHtml(command)}</span>
-                </summary>
-                ${compact && !tool.isError ? '' : `<div class="claude-tool-body">
-                    ${renderToolSection('Input', tool.input)}
-                    ${renderToolSection(tool.isError ? 'Error' : 'Output', tool.resultText)}
-                </div>`}
-            </details>`;
-        }
-
-        function renderWorkGroup(items) {
-            const running = items.some(item => item.kind === 'tool' && !item.resultText);
-            const label = `${items.length} tool call${items.length > 1 ? 's' : ''}`;
-            return `<details class="claude-work-group"${running ? ' open' : ''}>
-                <summary><span class="claude-tool-icon" data-icon="*"></span><span class="claude-work-group-title">Worked on ${escapeHtml(label)}</span>${running ? '<span class="claude-tool-status">running</span>' : ''}</summary>
-                <div class="claude-work-group-body">${items.map(renderDisplayItem).join('')}</div>
-            </details>`;
-        }
-
-        function buildClaudeDisplayItems(messages) {
-            const items = [];
-            const byToolUseId = new Map();
-            for (const message of messages) {
-                if (!message) continue;
-                if (message.kind === 'tool') {
-                    const item = { ...message, kind: 'tool', resultText: '', isError: false };
-                    items.push(item);
-                    if (item.toolUseId) byToolUseId.set(item.toolUseId, item);
-                    continue;
-                }
-                if (message.kind === 'tool-result') {
-                    const parent = message.toolUseId && byToolUseId.get(message.toolUseId);
-                    if (parent) {
-                        parent.resultText = message.text || '';
-                        parent.isError = Boolean(message.isError);
-                    } else {
-                        items.push(message);
-                    }
-                    continue;
-                }
-                items.push(message);
-            }
-
-            const grouped = [];
-            let run = [];
-            const flush = () => {
-                if (run.length > 1) grouped.push({ kind: 'work-group', items: run });
-                else if (run.length === 1) grouped.push(run[0]);
-                run = [];
-            };
-            for (const item of items) {
-                if (item.kind === 'tool') {
-                    run.push(item);
-                    continue;
-                }
-                flush();
-                grouped.push(item);
-            }
-            flush();
-            return grouped;
-        }
-
-        function renderUserMessage(message) {
-            const parsed = parseLocalCommandMessage(textFromClaudeMessage(message));
-            if (parsed.kind === 'hidden') return '';
-            if (parsed.kind === 'command') {
-                const args = parsed.args ? `<div class="claude-message user">${renderMarkdown(parsed.args)}</div>` : '';
-                return `${args}<div class="claude-message user"><span class="claude-command-chip">/${escapeHtml(parsed.commandName)}</span></div>`;
-            }
-            return `<div class="claude-message user">${renderMarkdown(parsed.text)}</div>`;
-        }
-
-        function renderDisplayItem(message) {
-            if (!message) return '';
-            if (message.kind === 'user') return renderUserMessage(message);
-            if (message.kind === 'assistant') return `<div class="claude-message assistant">${renderMarkdown(textFromClaudeMessage(message))}</div>`;
-            if (message.kind === 'tool') return renderClaudeTool(message);
-            if (message.kind === 'tool-result') return `<div class="claude-tool${message.isError ? ' error' : ''}">${renderToolSection(message.isError ? 'Error' : 'Output', message.text || '')}</div>`;
-            if (message.kind === 'work-group') return renderWorkGroup(message.items);
-            if (message.kind === 'event') return `<div class="claude-message event${message.level === 'error' ? ' error' : ''}">${escapeHtml(message.text || '')}</div>`;
-            return '';
-        }
-
-        function isClaudeEditTool(name) {
-            return ['Edit', 'MultiEdit', 'Write', 'NotebookEdit'].includes(name || '');
-        }
-
-        function isClaudeExitPlanTool(name) {
-            return name === 'exit_plan_mode' || name === 'ExitPlanMode';
-        }
-
-        function claudeAllowToolLabel(req) {
-            if (req.toolName === 'Bash' && req.input && typeof req.input.command === 'string') return 'Allow command';
-            return 'Allow tool';
-        }
-
-        function renderClaudePermissionActions(req) {
-            const id = escapeHtml(req.id);
-            const toolName = req.toolName || '';
-            const parts = [
-                `<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-once')">Yes</button>`
-            ];
-            if (isClaudeEditTool(toolName) || isClaudeExitPlanTool(toolName) || req.canAllowEdits) {
-                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-edits')">Allow edits</button>`);
-            }
-            if (isClaudeExitPlanTool(toolName) || req.canBypass) {
-                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'bypass')">Allow all</button>`);
-            }
-            if (toolName && !isClaudeEditTool(toolName) && !isClaudeExitPlanTool(toolName) && req.canAllowTool !== false) {
-                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-tool')">${escapeHtml(claudeAllowToolLabel(req))}</button>`);
-            }
-            parts.push(`<button class="small-btn danger" onclick="respondClaudePermission('${id}', 'deny')">Deny</button>`);
-            return parts.join('');
-        }
-
-        function renderClaudeChat() {
-            const container = document.getElementById('claude-chat-container');
-            const parts = [renderClaudeContextSizeBadge(), ...buildClaudeDisplayItems(claudeMessages).map(renderDisplayItem)].filter(Boolean);
-            for (const req of claudePendingPermissions.filter(item => item.status === 'pending')) {
-                parts.push(`<div class="claude-tool claude-permission">
-                    <div class="claude-tool-header">
-                        <span class="claude-tool-icon" data-icon="!"></span>
-                        <strong>${escapeHtml(req.title || req.toolName || 'Permission required')}</strong>
-                    </div>
-                    <div class="claude-tool-body">
-                        ${req.reason ? `<div>${escapeHtml(req.reason)}</div>` : ''}
-                        ${req.blockedPath ? `<div class="claude-resume-meta">${escapeHtml(req.blockedPath)}</div>` : ''}
-                        ${renderToolSection('Input', req.input || {})}
-                        <div class="claude-permission-actions">
-                            ${renderClaudePermissionActions(req)}
-                        </div>
-                    </div>
-                </div>`);
-            }
-            if (claudeStatus === 'thinking') {
-                parts.push('<div class="claude-status">Claude is working...</div>');
-            }
-            container.innerHTML = parts.join('') || '<div class="claude-message event">Send a message to start Claude.</div>';
-            renderClaudeStateBar();
-            requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
-        }
-
-        function applyClaudeEvent(event) {
-            if (!event) return;
-            if (event.type === 'message' && event.message) {
-                claudeMessages.push(event.message);
-            } else if (event.type === 'status') {
-                claudeStatus = event.status || 'idle';
-            } else if (event.type === 'permission-request' && event.request) {
-                claudePendingPermissions = claudePendingPermissions.filter(item => item.id !== event.request.id);
-                claudePendingPermissions.push(event.request);
-            } else if (event.type === 'permission-updated' && event.request) {
-                claudePendingPermissions = claudePendingPermissions.map(item => item.id === event.request.id ? event.request : item);
-            } else if (event.type === 'history-reset' && Array.isArray(event.messages)) {
-                claudeMessages = event.messages;
-            } else if (event.type === 'state' && event.state) {
-                applyClaudeState(event.state);
-            }
-            if (event.type !== 'state') applyClaudeState({
-                status: claudeStatus,
-                pendingPermissionCount: claudePendingPermissions.filter(item => item.status === 'pending').length,
-                canAbort: claudeStatus === 'thinking'
-            });
-            renderClaudeChat();
-        }
-
-        function respondClaudePermission(id, actionOrApproved) {
-            if (!currentSocket || currentSocket.readyState !== 1) return;
-            const action = typeof actionOrApproved === 'string'
-                ? actionOrApproved
-                : (actionOrApproved ? 'allow-once' : 'deny');
-            currentSocket.send(JSON.stringify({
-                type: 'claude-permission',
-                id,
-                action,
-                approved: action !== 'deny'
-            }));
-        }
-
-        async function createSession(toolKey, sessionName) {
-            try {
-                const workingDirectory = document.getElementById('cwd-field').value;
-                const runtimeConfig = toolKey === 'claude-code' ? await refreshClaudeRuntimeConfig() : null;
-                const claudeOptions = runtimeConfig ? {
-                    model: runtimeConfig.defaultModel || 'default',
-                    effort: runtimeConfig.defaultEffort || 'medium'
-                } : undefined;
-                const res = await fetchWithTimeout('/api/sessions', { 
-                    method: 'POST', 
-                    headers: { 'Content-Type': 'application/json' }, 
-                    body: JSON.stringify({ toolKey, workingDirectory, claudeOptions }) 
-                });
-                const data = await res.json();
-                if (!res.ok || !data.id) throw new Error(data.error || 'Failed to create session');
-                document.getElementById('modal-overlay').style.display = 'none';
-                refreshSessionsNow();
-            } catch (e) { alert('Failed to create session: ' + e.message); }
-        }
-
-        async function ensureScheduleTools() {
-            if (scheduleTools.length) return;
-            const res = await fetchWithTimeout('/api/tools');
-            scheduleTools = await res.json();
-        }
-
-        function defaultSchedule() {
-            return {
-                id: null,
-                name: 'Scheduled Task',
-                enabled: true,
-                schedule: { time: '09:00', weekdays: [1, 2, 3, 4, 5] },
-                target: { toolKey: (scheduleTools[0] && scheduleTools[0].key) || 'demo', workingDirectory: '' },
-                steps: [
-                    { type: 'sleep', seconds: 60 },
-                    { type: 'sendText', text: 'hello' },
-                    { type: 'sleep', seconds: 1 },
-                    { type: 'sendKey', key: 'enter' },
-                    { type: 'sleep', seconds: 60 },
-                    { type: 'closeSession' }
-                ]
-            };
-        }
-
-        async function showScheduleModal(job = null) {
-            try {
-                await ensureScheduleTools();
-                loadAppConfig();
-            } catch (e) {
-                alert('Failed to load tools');
-                return;
-            }
-
-            const data = job || defaultSchedule();
-            editingScheduleId = data.id || null;
-            editingSteps = (data.steps || []).map(step => ({ ...step }));
-            selectedWeekdays = [...(data.schedule.weekdays || [1, 2, 3, 4, 5])];
-            document.getElementById('schedule-modal-title').textContent = editingScheduleId ? 'Edit Schedule' : 'New Schedule';
-            document.getElementById('schedule-name').value = data.name || 'Scheduled Task';
-            document.getElementById('schedule-cwd').value = data.target.workingDirectory || '';
-            document.getElementById('schedule-time').value = data.schedule.time || '09:00';
-
-            const toolSelect = document.getElementById('schedule-tool');
-            toolSelect.innerHTML = scheduleTools.map(t => `<option value="${escapeHtml(t.key)}">${escapeHtml(t.displayName)}</option>`).join('');
-            const requestedTool = data.target.toolKey || '';
-            toolSelect.value = scheduleTools.some(t => t.key === requestedTool) ? requestedTool : ((scheduleTools[0] && scheduleTools[0].key) || 'demo');
-            renderWeekdays();
-            renderScheduleSteps();
-            document.getElementById('schedule-modal-overlay').style.display = 'flex';
-        }
-
-        function closeScheduleModal(e) {
-            if (!e || e.target.id === 'schedule-modal-overlay') {
-                document.getElementById('schedule-modal-overlay').style.display = 'none';
-            }
-        }
-
-        function renderWeekdays() {
-            const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-            document.getElementById('schedule-weekdays').innerHTML = labels.map((label, day) => {
-                const active = selectedWeekdays.includes(day);
-                return `<button type="button" class="weekday-btn ${active ? 'active' : ''}" onclick="toggleWeekday(${day})">${label}</button>`;
-            }).join('');
-        }
-
-        function toggleWeekday(day) {
-            if (selectedWeekdays.includes(day)) {
-                selectedWeekdays = selectedWeekdays.filter(value => value !== day);
-            } else {
-                selectedWeekdays.push(day);
-                selectedWeekdays.sort((a, b) => a - b);
-            }
-            renderWeekdays();
-        }
-
-        function addScheduleStep(type) {
-            if (!type) return;
-            const defaults = {
-                sleep: { type: 'sleep', seconds: 1 },
-                sendText: { type: 'sendText', text: '' },
-                sendKey: { type: 'sendKey', key: 'enter' },
-                keyDown: { type: 'keyDown', key: 'ctrl' },
-                keyUp: { type: 'keyUp', key: 'ctrl' },
-                stop: { type: 'stop' },
-                closeSession: { type: 'closeSession' }
-            };
-            editingSteps.push(defaults[type] || { type });
-            renderScheduleSteps();
-        }
-
-        function updateStep(index, field, value) {
-            if (!editingSteps[index]) return;
-            if (field === 'seconds') editingSteps[index][field] = Math.max(0, Number(value) || 0);
-            else editingSteps[index][field] = value;
-        }
-
-        function moveStep(index, delta) {
-            const nextIndex = index + delta;
-            if (nextIndex < 0 || nextIndex >= editingSteps.length) return;
-            const [step] = editingSteps.splice(index, 1);
-            editingSteps.splice(nextIndex, 0, step);
-            renderScheduleSteps();
-        }
-
-        function copyStep(index) {
-            editingSteps.splice(index + 1, 0, { ...editingSteps[index] });
-            renderScheduleSteps();
-        }
-
-        function removeStep(index) {
-            editingSteps.splice(index, 1);
-            renderScheduleSteps();
-        }
-
-        function stepInputHtml(step, index) {
-            if (step.type === 'sleep') {
-                return `<input type="number" min="0" step="0.1" value="${escapeHtml(step.seconds || 0)}" onchange="updateStep(${index}, 'seconds', this.value)">`;
-            }
-            if (step.type === 'sendText') {
-                return `<textarea rows="2" placeholder="Text to send" onchange="updateStep(${index}, 'text', this.value)" oninput="updateStep(${index}, 'text', this.value)">${escapeHtml(step.text || '')}</textarea>`;
-            }
-            if (step.type === 'sendKey') {
-                return `<select onchange="updateStep(${index}, 'key', this.value)">
-                    ${['enter','tab','esc','up','down','left','right','backspace','delete','home','end','ctrl+c','ctrl+d','ctrl+l'].map(key => `<option value="${key}" ${step.key === key ? 'selected' : ''}>${key}</option>`).join('')}
-                </select>`;
-            }
-            if (step.type === 'keyDown' || step.type === 'keyUp') {
-                return `<select onchange="updateStep(${index}, 'key', this.value)">
-                    ${['ctrl','alt'].map(key => `<option value="${key}" ${step.key === key ? 'selected' : ''}>${key}</option>`).join('')}
-                </select>`;
-            }
-            if (step.type === 'closeSession') {
-                return '<span style="color:var(--text-dim); font-size:13px;">Close the session and end this run</span>';
-            }
-            return '<span style="color:var(--text-dim); font-size:13px;">End this run</span>';
-        }
-
-        function renderScheduleSteps() {
-            const container = document.getElementById('schedule-steps');
-            if (!editingSteps.length) {
-                container.innerHTML = '<p style="color:var(--text-dim);">No steps yet.</p>';
-                return;
-            }
-            container.innerHTML = editingSteps.map((step, index) => `
-                <div class="step-card">
-                    <div class="step-grid">
-                        <select onchange="editingSteps[${index}] = { type: this.value }; addDefaultStepFields(${index}); renderScheduleSteps();">
-                            ${['sleep','sendText','sendKey','keyDown','keyUp','stop','closeSession'].map(type => `<option value="${type}" ${step.type === type ? 'selected' : ''}>${type}</option>`).join('')}
-                        </select>
-                        <div>${stepInputHtml(step, index)}</div>
-                        <div style="display:flex; gap:6px; justify-content:flex-end;">
-                            <button class="small-btn" onclick="moveStep(${index}, -1)">↑</button>
-                            <button class="small-btn" onclick="moveStep(${index}, 1)">↓</button>
-                            <button class="small-btn" onclick="copyStep(${index})">Copy</button>
-                            <button class="small-btn danger" onclick="removeStep(${index})">Del</button>
-                        </div>
-                    </div>
-                </div>
-            `).join('');
-        }
-
-        function addDefaultStepFields(index) {
-            const type = editingSteps[index].type;
-            if (type === 'sleep') editingSteps[index].seconds = 1;
-            if (type === 'sendText') editingSteps[index].text = '';
-            if (type === 'sendKey') editingSteps[index].key = 'enter';
-            if (type === 'keyDown' || type === 'keyUp') editingSteps[index].key = 'ctrl';
-        }
-
-        function collectSchedulePayload() {
-            if (!selectedWeekdays.length) throw new Error('Select at least one weekday');
-            return {
-                name: document.getElementById('schedule-name').value.trim() || 'Scheduled Task',
-                enabled: true,
-                schedule: {
-                    time: document.getElementById('schedule-time').value || '09:00',
-                    weekdays: selectedWeekdays
-                },
-                target: {
-                    toolKey: document.getElementById('schedule-tool').value,
-                    workingDirectory: document.getElementById('schedule-cwd').value.trim()
-                },
-                steps: editingSteps
-            };
-        }
-
-        async function saveSchedule() {
-            try {
-                const payload = collectSchedulePayload();
-                const url = editingScheduleId ? `/api/schedules/${editingScheduleId}` : '/api/schedules';
-                const method = editingScheduleId ? 'PATCH' : 'POST';
-                const res = await fetchWithTimeout(url, {
-                    method,
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                });
-                if (!res.ok) throw new Error((await res.json()).error || 'Save failed');
-                closeScheduleModal();
-                switchLobbyTab('schedules');
-            } catch (e) {
-                alert(e.message);
-            }
-        }
-
-        async function editSchedule(id) {
-            const res = await fetchWithTimeout(`/api/schedules/${id}`);
-            if (!res.ok) return alert('Failed to load schedule');
-            showScheduleModal(await res.json());
-        }
-
-        async function simulateSchedule(id) {
-            try {
-                const res = await fetchWithTimeout(`/api/schedules/${id}/simulate`, { method: 'POST' }, 30000);
-                const data = await res.json();
-                if (!res.ok) throw new Error(data.error || 'Test failed');
-                await loadSchedules();
-                if (data.sessionId) {
-                    const jobRes = await fetchWithTimeout(`/api/schedules/${id}`).catch(() => null);
-                    const job = jobRes && jobRes.ok ? await jobRes.json() : null;
-                    joinSession(data.sessionId, 'Schedule Test', job?.target?.toolKey || null);
-                }
-            } catch (e) {
-                alert(e.message);
-            }
-        }
-
-        async function duplicateSchedule(id) {
-            await fetchWithTimeout(`/api/schedules/${id}/duplicate`, { method: 'POST' });
-            loadSchedules();
-        }
-
-        async function toggleSchedule(id, enabled) {
-            await fetchWithTimeout(`/api/schedules/${id}/enabled`, {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ enabled })
-            });
-            loadSchedules();
-        }
-
-        async function deleteSchedule(id) {
-            if (!confirm('Delete scheduled task?')) return;
-            await fetchWithTimeout(`/api/schedules/${id}`, { method: 'DELETE' });
-            loadSchedules();
-        }
-
-        async function deleteSession(id, e) {
-            e.stopPropagation(); if (!confirm('Terminate session?')) return;
-            try { await fetchWithTimeout('/api/sessions/' + id, { method: 'DELETE' }); refreshSessionsNow(); } catch (e) { alert('Failed to delete'); }
-        }
-
-        function showLobby() {
-            if (currentSocket) { currentSocket.close(); currentSocket = null; }
-            closeTimedSendPanel();
-            stopTimedInputTimers();
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById('lobby-view').classList.add('active');
-            refreshSessionsNow();
-        }
-
-        function updateToolShortcuts(toolKey) {
-            const usesUsageCommand = ['antigravity', 'claude-code'].includes(toolKey);
-            const usageCommand = usesUsageCommand ? '/usage' : '/stat';
-            const defaultShortcuts = [
-                { key: 'left', label: '←', special: true },
-                { key: 'right', label: '→', special: true },
-                { key: 'ctrl-c', label: 'Ctrl+C' },
-                { command: '/model' },
-                { command: '/resume' },
-                { command: usageCommand }
-            ];
-            const toolShortcuts = {
-                codex: [
-                    { key: 'ctrl-c', label: 'Ctrl+C' },
-                    { key: 'codex-perm', label: '/perm', title: 'Send /perm' },
-                    { command: '/model' },
-                    { command: '/resume' },
-                    { command: '/stat' }
-                ]
-            };
-            const shortcuts = toolShortcuts[toolKey] || defaultShortcuts;
-            const shortcutGroup = document.querySelector('[data-role="tool-shortcuts"]');
-            if (!shortcutGroup) return;
-
-            shortcutGroup.style.gridTemplateColumns = `repeat(${shortcuts.length}, minmax(0, 1fr))`;
-            shortcutGroup.replaceChildren(...shortcuts.map(shortcut => {
-                const button = document.createElement(shortcut.command ? 'button' : 'div');
-                button.className = shortcut.command
-                    ? 'command-key'
-                    : `key-btn${shortcut.special ? ' special-key' : ''}`;
-                if (shortcut.command) {
-                    button.dataset.command = shortcut.command;
-                    button.textContent = shortcut.command;
-                    button.title = `Send ${shortcut.command}`;
-                } else {
-                    button.dataset.key = shortcut.key;
-                    button.textContent = shortcut.label;
-                    button.title = shortcut.title || '';
-                }
-                return button;
-            }));
-        }
-
-        function codexText(text) { return escapeHtml(text || '').replace(/\n/g, '<br>'); }
-        function codexJson(value) {
-            if (typeof value === 'string') return value;
-            try { return JSON.stringify(value || {}, null, 2); } catch (_) { return String(value || ''); }
-        }
-        function codexToolStatus(item) {
-            const status = item.toolStatus || 'running';
-            if (status === 'inProgress') return 'running';
-            if (status === 'failed' || status === 'declined') return status;
-            if (status === 'completed') return item.exitCode && item.exitCode !== 0 ? 'failed' : 'completed';
-            return status;
-        }
-        function formatCodexDuration(durationMs) {
-            const value = Number(durationMs || 0);
-            if (!(value > 0)) return '';
-            if (value < 1000) return `${Math.round(value)}ms`;
-            const seconds = value / 1000;
-            if (seconds < 10) return `${seconds.toFixed(1).replace(/\.0$/, '')}s`;
-            if (seconds < 60) return `${Math.round(seconds)}s`;
-            const minutes = Math.floor(seconds / 60);
-            return `${minutes}m ${Math.round(seconds % 60)}s`;
-        }
-        function renderCodexDiff(diff) {
-            return `<div class="codex-diff">${String(diff || '').split('\n').map(line => {
-                const type = line.startsWith('+++') || line.startsWith('---') ? 'hunk' : line.startsWith('+') ? 'add' : line.startsWith('-') ? 'del' : line.startsWith('@@') ? 'hunk' : '';
-                return `<div class="codex-diff-line ${type}">${escapeHtml(line || ' ')}</div>`;
-            }).join('')}</div>`;
-        }
-        function normalizeCodexChanges(changes) {
-            if (Array.isArray(changes)) return changes.filter(Boolean).map(change => [change.path || 'File', change]);
-            if (changes && typeof changes === 'object') return Object.entries(changes);
-            return [];
-        }
-        function codexChangeDiff(change = {}) {
-            if (typeof change.diff === 'string') return change.diff;
-            if (typeof change.unified_diff === 'string') return change.unified_diff;
-            const kind = change.kind && typeof change.kind === 'object' ? change.kind : {};
-            const type = change.type || kind.type || '';
-            const oldText = change.modify?.old_content ?? change.old_content ?? change.oldContent ?? (type === 'delete' ? change.content : change.delete?.content) ?? '';
-            const newText = change.modify?.new_content ?? change.new_content ?? change.newContent ?? (type === 'add' ? change.content : change.add?.content) ?? '';
-            if (!oldText && !newText) return '';
-            return `${String(oldText).split('\n').map(line => `-${line}`).join('\n')}\n${String(newText).split('\n').map(line => `+${line}`).join('\n')}`;
-        }
-        function renderCodexPatch(item) {
-            const entries = normalizeCodexChanges(item.changes || item.input?.changes);
-            if (!entries.length) return `<div class="codex-tool-body"><pre class="codex-tool-code">${escapeHtml(codexJson(item.input))}</pre></div>`;
-            return entries.map(([path, change]) => {
-                const kind = change?.type || change?.kind?.type || 'edit';
-                const move = change?.move_path || change?.kind?.move_path;
-                const diff = codexChangeDiff(change);
-                return `<details class="codex-patch-file"><summary><span class="path">${escapeHtml(path)}${move ? ` → ${escapeHtml(move)}` : ''}</span><span class="codex-patch-kind">${escapeHtml(kind)}</span></summary>${diff ? renderCodexDiff(diff) : ''}</details>`;
-            }).join('');
-        }
-        function renderCodexPermission(request, inline = false) {
-            if (!request) return '';
-            const pending = request.status === 'pending';
-            const labels = { approved: 'Allowed once', approved_for_session: 'Allowed for session', denied: 'Denied', abort: 'Stopped' };
-            const detail = request.reason || (request.input && Object.keys(request.input).length ? codexJson(request.input) : '');
-            const content = `${inline ? `<div class="codex-inline-permission-title">${escapeHtml(request.title || 'Permission required')}</div>` : ''}${detail ? `<div>${codexText(detail)}</div>` : ''}${pending ? `<div class="claude-permission-actions"><button class="small-btn primary" onclick="respondCodexPermission('${escapeHtml(request.id)}', 'approved')">Yes</button><button class="small-btn" onclick="respondCodexPermission('${escapeHtml(request.id)}', 'approved_for_session')">Yes, for session</button><button class="small-btn danger" onclick="respondCodexPermission('${escapeHtml(request.id)}', 'abort')">Stop and explain</button></div>` : `<div class="codex-permission-result">${escapeHtml(labels[request.decision] || request.status)}</div>`}`;
-            if (inline) return `<div class="codex-inline-permission">${content}</div>`;
-            return `<div class="claude-tool claude-permission"><div class="claude-tool-header"><strong>${escapeHtml(request.title || 'Permission required')}</strong></div><div class="claude-tool-body">${content}</div></div>`;
-        }
-        function formatCodexReset(timestamp) {
-            const value = Number(timestamp || 0);
-            return value ? new Date(value * 1000).toLocaleString() : '';
-        }
-        function formatCodexTokens(value) {
-            const count = Number(value || 0);
-            return count >= 1000000 ? `${(count / 1000000).toFixed(1)}M`
-                : count >= 1000 ? `${Math.round(count / 1000)}K` : String(count);
-        }
-        function codexStatusItem(label, value) {
-            if (value == null || value === '') return '';
-            return `<div class="codex-status-item"><div class="codex-status-label">${escapeHtml(label)}</div><div class="codex-status-value">${escapeHtml(value)}</div></div>`;
-        }
-        function renderCodexStatus(item) {
-            const account = item.account || {};
-            const limit = item.rateLimits || {};
-            const primary = limit.primary;
-            const secondary = limit.secondary;
-            const context = item.context;
-            const accountLabel = account.type === 'chatgpt'
-                ? [account.email, account.planType].filter(Boolean).join(' · ')
-                : account.type === 'apiKey' ? 'API key' : account.type || 'Not signed in';
-            const fiveHour = primary ? `${Math.max(0, 100 - Number(primary.usedPercent || 0))}% left${primary.resetsAt ? ` · resets ${formatCodexReset(primary.resetsAt)}` : ''}` : '';
-            const weekly = secondary ? `${Math.max(0, 100 - Number(secondary.usedPercent || 0))}% left${secondary.resetsAt ? ` · resets ${formatCodexReset(secondary.resetsAt)}` : ''}` : '';
-            const contextLabel = context ? `${context.remainingPercent}% left${context.contextWindow ? ` · ${formatCodexTokens(context.remainingTokens)} / ${formatCodexTokens(context.contextWindow)}` : ''}` : 'Available after the first usage update';
-            return `<div class="codex-status-card"><div class="codex-status-title">${escapeHtml(item.title || 'Codex status')}</div><div class="codex-status-grid">
-                ${codexStatusItem('Account', accountLabel)}
-                ${codexStatusItem('Model', [item.model, item.effort].filter(Boolean).join(' · '))}
-                ${codexStatusItem('5h limit', fiveHour)}
-                ${codexStatusItem('Weekly limit', weekly)}
-                ${codexStatusItem('Context', contextLabel)}
-            </div></div>`;
-        }
-        function renderCodexTool(item, permission = null) {
-            const status = codexToolStatus(item);
-            const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
-            const runningClass = status === 'running' ? ' running' : '';
-            if (item.name === 'CodexPatch') {
-                return `<div class="codex-tool${isError ? ' error' : ''}">${renderCodexPatch(item)}${permission ? renderCodexPermission(permission, true) : ''}</div>`;
-            }
-            const command = item.name === 'CodexBash' ? item.command : item.title || item.tool || '';
-            const icon = item.name === 'CodexBash' ? '>_' : item.name === 'McpTool' ? 'MCP' : item.name === 'Agent' ? 'A' : '•';
-            const title = item.name === 'CodexBash' ? 'Command' : item.title || item.name || 'Tool';
-            const hasInput = item.input && typeof item.input === 'object' && Object.keys(item.input).length > 0;
-            const result = item.result || ((item.name === 'McpTool' || item.name === 'Agent') && hasInput ? codexJson(item.input) : '');
-            const duration = status === 'running' ? '' : formatCodexDuration(item.durationMs);
-            return `<details class="codex-tool${isError ? ' error' : ''}" data-codex-key="tool-${escapeHtml(item.id || item.providerId || '')}"><summary class="codex-tool-header"><span class="codex-tool-icon">${escapeHtml(icon)}</span><span class="codex-tool-title">${escapeHtml(title)}</span>${command && command !== title ? `<span class="codex-tool-command">${escapeHtml(command)}</span>` : '<span class="codex-tool-command"></span>'}${duration ? `<span class="codex-tool-duration">${escapeHtml(duration)}</span>` : ''}<span class="codex-tool-state${runningClass}">${escapeHtml(status === 'completed' ? '' : status)}</span></summary>${result ? `<div class="codex-tool-body"><pre class="codex-tool-code">${escapeHtml(result)}</pre></div>` : ''}${permission ? renderCodexPermission(permission, true) : ''}</details>`;
-        }
-        function renderCodexToolGroup(items, permissionById, usedPermissions, turnEnd = null) {
-            const running = items.some(item => codexToolStatus(item) === 'running');
-            const failed = items.some(item => codexToolStatus(item) === 'failed' || item.error);
-            const startedAt = Math.min(...items.map(item => Number(item.startedAtMs || item.createdAt || Date.now())));
-            const itemCompletedAt = Math.max(...items.map(item => Number(item.completedAtMs || 0)));
-            const storedDuration = Number(turnEnd?.durationMs || 0);
-            const completedAt = Number(turnEnd?.createdAt || 0);
-            const durationMs = itemCompletedAt >= startedAt ? itemCompletedAt - startedAt : storedDuration > 0 ? storedDuration
-                : (!running && completedAt >= startedAt ? completedAt - startedAt : 0);
-            const duration = formatCodexDuration(durationMs);
-            const tools = items.map(item => {
-                const permission = permissionById.get(String(item.providerId || ''));
-                if (permission) usedPermissions.add(permission.id);
-                return renderCodexTool(item, permission);
-            }).join('');
-            const label = running ? 'Working' : failed ? 'Work finished with errors' : duration ? `Worked for ${duration}` : 'Worked';
-            const key = items.map(item => item.id || item.providerId || '').join('-');
-            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"><summary>${label} · ${items.length} ${items.length === 1 ? 'tool' : 'tools'}</summary><div class="codex-work-group-body">${tools}</div></details>`;
-        }
-        function renderCodexMessageTime(item, finalOnly = false) {
-            if (!item || (finalOnly && item.streaming)) return '';
-            const timestamp = Number(finalOnly ? (item.completedAtMs || item.updatedAt || item.createdAt) : item.createdAt);
-            if (!Number.isFinite(timestamp) || timestamp <= 0) return '';
-            const date = new Date(timestamp);
-            if (Number.isNaN(date.getTime())) return '';
-            const label = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-            return `<time class="codex-message-time" datetime="${escapeHtml(date.toISOString())}" title="${escapeHtml(date.toLocaleString())}">${escapeHtml(label)}</time>`;
-        }
-        function syncCodexDom(current, next) {
-            if (!current || !next) return;
-            if (current.nodeType !== next.nodeType || current.nodeName !== next.nodeName) {
-                current.replaceWith(next.cloneNode(true));
-                return;
-            }
-            if (current.nodeType === Node.TEXT_NODE) {
-                if (current.nodeValue !== next.nodeValue) current.nodeValue = next.nodeValue;
-                return;
-            }
-            const currentKey = current.getAttribute?.('data-codex-key');
-            const nextKey = next.getAttribute?.('data-codex-key');
-            if (currentKey && nextKey && currentKey !== nextKey) {
-                current.replaceWith(next.cloneNode(true));
-                return;
-            }
-            const preserveOpen = current.tagName === 'DETAILS' && currentKey === nextKey;
-            const wasOpen = preserveOpen ? current.open : false;
-            for (const attribute of Array.from(current.attributes || [])) {
-                if (!next.hasAttribute(attribute.name) && !(preserveOpen && attribute.name === 'open')) current.removeAttribute(attribute.name);
-            }
-            for (const attribute of Array.from(next.attributes || [])) {
-                if (!(preserveOpen && attribute.name === 'open') && current.getAttribute(attribute.name) !== attribute.value) {
-                    current.setAttribute(attribute.name, attribute.value);
-                }
-            }
-            if (preserveOpen) current.open = wasOpen;
-            const currentChildren = Array.from(current.childNodes);
-            const nextChildren = Array.from(next.childNodes);
-            const shared = Math.min(currentChildren.length, nextChildren.length);
-            for (let i = 0; i < shared; i++) syncCodexDom(currentChildren[i], nextChildren[i]);
-            for (let i = current.childNodes.length - 1; i >= nextChildren.length; i--) current.childNodes[i].remove();
-            for (let i = shared; i < nextChildren.length; i++) current.appendChild(nextChildren[i].cloneNode(true));
-        }
-        function renderCodexChat() {
-            if (codexRenderFrame != null) return;
-            codexRenderFrame = requestAnimationFrame(() => {
-                codexRenderFrame = null;
-                commitCodexChatRender();
-            });
-        }
-        function commitCodexChatRender() {
-            const container = document.getElementById('codex-chat-container');
-            if (!container) return;
-            const wasEmpty = !container.firstElementChild;
-            const previousScrollTop = container.scrollTop;
-            const distanceFromBottom = container.scrollHeight - container.clientHeight - previousScrollTop;
-            const shouldStickToBottom = wasEmpty || distanceFromBottom <= 64;
-            const parts = [];
-            const permissionById = new Map(codexPendingPermissions.map(item => [String(item.id), item]));
-            const usedPermissions = new Set();
-            const turnEndById = new Map(codexMessages.filter(item => item.kind === 'turn-end' && item.turnId)
-                .map(item => [String(item.turnId), item]));
-            const visible = codexMessages.filter(item => !['reasoning', 'turn-start', 'turn-end'].includes(item.kind));
-            for (let i = 0; i < visible.length;) {
-                const item = visible[i];
-                if (item.kind === 'tool') {
-                    const tools = [];
-                    const turnId = item.turnId;
-                    while (i < visible.length && visible[i].kind === 'tool' && visible[i].turnId === turnId) tools.push(visible[i++]);
-                    parts.push(renderCodexToolGroup(tools, permissionById, usedPermissions,
-                        turnEndById.get(String(turnId || ''))));
-                    continue;
-                }
-                if (item.kind === 'assistant') parts.push(`<div class="codex-message-block assistant" data-codex-key="message-${escapeHtml(item.id || '')}"><div class="codex-message assistant claude-md">${renderMarkdown(item.text || '')}</div>${renderCodexMessageTime(item, true)}</div>`);
-                else if (item.kind === 'user') parts.push(`<div class="codex-message-block user" data-codex-key="message-${escapeHtml(item.id || '')}"><div class="codex-message user claude-md">${renderMarkdown(item.text || '')}</div>${renderCodexMessageTime(item)}</div>`);
-                else if (item.kind === 'status') parts.push(renderCodexStatus(item));
-                else parts.push(`<div class="codex-message ${escapeHtml(item.level === 'error' ? 'event error' : item.kind || 'event')}">${codexText(item.text)}</div>`);
-                i += 1;
-            }
-            for (const request of codexPendingPermissions) if (!usedPermissions.has(request.id)) parts.push(renderCodexPermission(request));
-            const working = `<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"${codexState.status === 'running' ? '' : ' style="display:none"'}></div>`;
-            const template = document.createElement('template');
-            template.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
-            const next = template.content.firstElementChild;
-            const current = container.firstElementChild;
-            if (!current) container.appendChild(next);
-            else syncCodexDom(current, next);
-            container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
-        }
-
-        function applyCodexState(state = {}) {
-            const presentationChanged = state.presentation !== undefined && state.presentation !== codexState.presentation;
-            codexState = { ...codexState, ...state };
-            const permission = document.getElementById('codex-permission-select');
-            if (permission) {
-                const defaultOption = permission.querySelector('option[value="default"]');
-                const labels = { untrusted: 'Untrusted', 'on-request': 'On request', never: 'Never ask' };
-                if (defaultOption) defaultOption.textContent = codexState.effectivePermissionMode
-                    ? `Default (${labels[codexState.effectivePermissionMode] || codexState.effectivePermissionMode})`
-                    : 'Default';
-                permission.value = codexState.permissionMode || 'default';
-            }
-            const sandbox = document.getElementById('codex-sandbox-select');
-            if (sandbox) {
-                const defaultOption = sandbox.querySelector('option[value="default"]');
-                const labels = { 'read-only': 'Read only', 'workspace-write': 'Workspace write', 'danger-full-access': 'Full access' };
-                if (defaultOption) defaultOption.textContent = codexState.effectiveSandboxMode
-                    ? `Default (${labels[codexState.effectiveSandboxMode] || codexState.effectiveSandboxMode})`
-                    : 'Default';
-                sandbox.value = codexState.sandboxMode || 'default';
-            }
-            const modelButton = document.getElementById('codex-model-btn');
-            if (modelButton) modelButton.textContent = 'Model';
-            const abort = document.getElementById('codex-abort-btn');
-            if (abort) abort.disabled = !codexState.canAbort;
-            const fork = document.getElementById('codex-fork-btn');
-            if (fork) fork.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle');
-            const terminal = document.getElementById('codex-terminal-switch');
-            if (terminal) { terminal.textContent = codexState.presentation === 'terminal' ? 'CHAT' : 'TERM'; terminal.disabled = codexState.presentation === 'structured' && !codexState.canSwitchToTerminal; terminal.title = codexState.presentation === 'terminal' ? 'Return to Codex chat' : 'Switch to Codex terminal'; }
-            renderCodexStateBar();
-            renderCodexModelPanel();
-            if (presentationChanged) setClaudeModeEnabled(isClaudeSession());
-            renderCodexChat();
-        }
-
-        function renderCodexStateBar() {
-            const el = document.getElementById('codex-state-bar');
-            if (!el) return;
-            const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
-            const subagents = Number(codexState.activeSubagentCount || 0) || 0;
-            const parts = [];
-            if (pending || codexState.status === 'waiting_approval') parts.push(`<span class="claude-state-pill warn">${pending || 1} approval${pending === 1 ? '' : 's'}</span>`);
-            if (subagents) parts.push(`<span class="claude-state-pill">${subagents} subagent${subagents === 1 ? '' : 's'} running</span>`);
-            el.innerHTML = parts.join('');
-            el.style.display = parts.length ? 'flex' : 'none';
-        }
-
-        function toggleCodexModelPanel() {
-            codexModelPanelOpen = !codexModelPanelOpen;
-            codexResumePanelOpen = false;
-            codexForkPanelOpen = false;
-            codexModelCandidate = codexState.model || codexState.models?.[0]?.id || null;
-            document.getElementById('codex-resume-panel').classList.remove('active');
-            document.getElementById('codex-fork-panel').classList.remove('active');
-            renderCodexModelPanel();
-            updateTerminalControlsHeight();
-        }
-
-        function renderCodexModelPanel() {
-            const panel = document.getElementById('codex-model-panel');
-            if (!panel) return;
-            panel.classList.toggle('active', codexModelPanelOpen);
-            if (!codexModelPanelOpen) { panel.innerHTML = ''; return; }
-            const models = codexState.models || [];
-            const candidate = models.find(item => item.id === codexModelCandidate) || models.find(item => item.id === codexState.model) || models[0];
-            if (!candidate) { panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Loading models...</div>'; return; }
-            codexModelCandidate = candidate.id;
-            const efforts = candidate.efforts?.length ? candidate.efforts : [candidate.defaultEffort || 'medium'];
-            panel.innerHTML = `<div class="codex-picker-column">${models.map(item => `<button class="codex-picker-option${item.id === candidate.id ? ' selected' : ''}" onclick="selectCodexModelCandidate(decodePathValue('${encodePathValue(item.id)}'))">${escapeHtml(item.label || item.id)}</button>`).join('')}</div><div class="codex-picker-column">${efforts.map(effort => `<button class="codex-picker-option${candidate.id === codexState.model && effort === codexState.effort ? ' selected' : ''}" onclick="chooseCodexModelEffort(decodePathValue('${encodePathValue(candidate.id)}'), decodePathValue('${encodePathValue(effort)}'))">${escapeHtml(effort)}</button>`).join('')}</div>`;
-        }
-
-        function selectCodexModelCandidate(model) { codexModelCandidate = model; renderCodexModelPanel(); }
-        function chooseCodexModelEffort(model, effort) {
-            codexModelPanelOpen = false;
-            applyCodexState({ model, effort });
-            sendCodexSettings({ model, effort });
-            updateTerminalControlsHeight();
-        }
-
-        function applyCodexEvent(event) {
-            if (!event) return;
-            if (event.type === 'message' && event.message) codexMessages.push(event.message);
-            else if (event.type === 'message-updated' && event.message) { const i = codexMessages.findIndex(item => item.id === event.message.id); if (i >= 0) codexMessages[i] = event.message; else codexMessages.push(event.message); }
-            else if (event.type === 'history-reset') codexMessages = event.messages || [];
-            else if (event.type === 'permission-request' && event.request) { codexPendingPermissions = [...codexPendingPermissions.filter(item => item.id !== event.request.id), event.request]; }
-            else if (event.type === 'permission-updated' && event.request) codexPendingPermissions = codexPendingPermissions.map(item => item.id === event.request.id ? event.request : item);
-            if (event.state) applyCodexState(event.state); else renderCodexChat();
-        }
-
-        function sendCodexSettings(settings) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-settings', settings })); }
-        function updateCodexSettingsFromControls() {
-            const permissionMode = document.getElementById('codex-permission-select').value;
-            const sandboxMode = document.getElementById('codex-sandbox-select').value;
-            applyCodexState({ permissionMode, sandboxMode });
-            sendCodexSettings({ permissionMode, sandboxMode });
-        }
-        function abortCodexSession() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-abort' })); }
-        function requestCodexStatus() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-status' })); }
-        function respondCodexPermission(id, decision) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-permission', id, decision })); }
-        async function toggleCodexResumePanel() {
-            codexResumePanelOpen = !codexResumePanelOpen;
-            codexModelPanelOpen = false;
-            codexForkPanelOpen = false;
-            document.getElementById('codex-model-panel').classList.remove('active');
-            document.getElementById('codex-fork-panel').classList.remove('active');
-            const panel = document.getElementById('codex-resume-panel');
-            panel.classList.toggle('active', codexResumePanelOpen);
-            updateTerminalControlsHeight();
-            if (!codexResumePanelOpen) return;
-            await loadCodexThreadPanel(panel, 'resume');
-        }
-        async function toggleCodexForkPanel() {
-            if (!(codexState.presentation === 'structured' && codexState.status === 'idle')) return;
-            codexForkPanelOpen = !codexForkPanelOpen;
-            codexModelPanelOpen = false;
-            codexResumePanelOpen = false;
-            document.getElementById('codex-model-panel').classList.remove('active');
-            document.getElementById('codex-resume-panel').classList.remove('active');
-            const panel = document.getElementById('codex-fork-panel');
-            panel.classList.toggle('active', codexForkPanelOpen);
-            updateTerminalControlsHeight();
-            if (!codexForkPanelOpen) return;
-            await loadCodexThreadPanel(panel, 'fork');
-        }
-        async function loadCodexThreadPanel(panel, action) {
-            panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Loading sessions...</div>';
-            try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-resume-threads`, {}, 30000);
-                const data = await res.json();
-                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load Codex sessions');
-                const items = data.items || [];
-                panel.innerHTML = items.length ? items.map(item => {
-                    const questions = Array.isArray(item.questions) ? item.questions : [];
-                    const handler = action === 'fork' ? 'selectCodexForkThread' : 'selectCodexResumeThread';
-                    return `<button class="claude-resume-item" onclick="${handler}(decodePathValue('${encodePathValue(item.id)}'))"><div class="claude-resume-title"><span>${escapeHtml((questions[0] || 'Codex session').slice(0, 120))}${item.current ? ' · current' : ''}</span><span>${escapeHtml(item.updatedAt ? new Date(item.updatedAt).toLocaleString() : '')}</span></div><div class="codex-resume-question-secondary">${escapeHtml((questions[1] || '').slice(0, 120))}</div></button>`;
-                }).join('') : '<div class="claude-resume-meta" style="padding:12px;">No Codex sessions found for this folder.</div>';
-            } catch (e) { panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(e.message)}</div>`; }
-            updateTerminalControlsHeight();
-        }
-        async function selectCodexResumeThread(threadId) {
-            const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-resume`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ threadId }) }, 30000);
-            if (!res.ok) { alert((await res.json()).error || 'Unable to resume Codex thread'); return; }
-            codexResumePanelOpen = false;
-            document.getElementById('codex-resume-panel').classList.remove('active');
-            updateTerminalControlsHeight();
-        }
-        async function selectCodexForkThread(threadId) {
-            const panel = document.getElementById('codex-fork-panel');
-            panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Forking and switching this conversation...</div>';
-            updateTerminalControlsHeight();
-            const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-fork`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ threadId }) }, 60000);
-            const data = await res.json();
-            if (!res.ok || !data.success) {
-                panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(data.error || 'Unable to fork Codex thread')}</div>`;
-                updateTerminalControlsHeight();
-                return;
-            }
-            codexForkPanelOpen = false;
-            panel.classList.remove('active');
-            panel.innerHTML = '';
-            updateTerminalControlsHeight();
-        }
-        async function toggleCodexPresentation() {
-            const presentation = codexState.presentation === 'terminal' ? 'structured' : 'terminal';
-            const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-presentation`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ presentation }) }, 30000);
-            if (!res.ok) alert((await res.json()).error || 'Unable to switch Codex interface');
-        }
-
-        function joinSession(id, sessionName, toolKey = null) {
-            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
-                void clearImageAttachments();
-            }
-            stopTimedInputTimers();
-            activeSessionId = id;
-            window.activeSessionId = id;
-            activeToolKey = toolKey;
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            markCompletionRead(id);
-            loadTimedInputs();
-            document.getElementById('session-title').innerText = sessionName;
-            updateToolShortcuts(activeToolKey);
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById('terminal-view').classList.add('active');
-            setClaudeModeEnabled(isClaudeSession());
-            if (currentSocket) { currentSocket.close(); currentSocket = null; }
-            initTerminal(id);
-        }
-
-        function initTerminal(sessionId) {
-            if (isClaudeSession()) {
-                initClaudeSession(sessionId);
-                return;
-            }
-            if (isCodexSession() && codexState.presentation === 'structured') {
-                initCodexSession(sessionId);
-                return;
-            }
-            if (typeof Terminal === 'undefined') {
-                alert('Terminal library not loaded yet.');
-                showLobby();
-                return;
-            }
-            function isTerminalAutoResponse(data) {
-                return /^\x1b\[\?[\d;]*c$/.test(data) || /^\x1b\[>[\d;]*c$/.test(data);
-            }
-            if (!term) {
-                term = new Terminal({ theme: { background: '#000', foreground: '#fff', cursor: '#0f0' }, cursorBlink: true, fontSize: 14, cursorStyle: 'bar', scrollback: 10000 });
-                fitAddon = new FitAddon.FitAddon();
-                term.loadAddon(fitAddon);
-                term.open(document.getElementById('terminal'));
-                term.onData(data => {
-                    if (isTerminalAutoResponse(data)) return;
-                    let finalData = data;
-                    if (modifiers.ctrl && data.length === 1) {
-                        const code = data.toLowerCase().charCodeAt(0);
-                        if (code >= 97 && code <= 122) finalData = String.fromCharCode(code - 96);
-                    }
-                    sendWS(finalData);
-                });
-            } else { term.clear(); }
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
-            currentSocket.onopen = () => {
-                syncLayout();
-                setTimeout(() => logViewSnapshot('ws-open'), 300);
-            };
-            currentSocket.onmessage = (e) => {
-                const msg = JSON.parse(e.data);
-                if (msg.type === 'output') term.write(msg.data);
-                if (msg.type === 'reset') term.reset();
-                if (msg.type === 'codex-event' && isCodexSession()) {
-                    applyCodexEvent(msg.event);
-                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'structured') {
-                        currentSocket.close();
-                        currentSocket = null;
-                        initCodexSession(sessionId);
-                    }
-                }
-                if (msg.type === 'exit') showLobby();
-            };
-        }
-
-        async function initClaudeSession(sessionId) {
-            claudeMessages = [];
-            claudePendingPermissions = [];
-            claudeStatus = 'idle';
-            const runtimeConfig = await refreshClaudeRuntimeConfig();
-            claudeState = {
-                permissionMode: 'default',
-                model: (runtimeConfig && runtimeConfig.defaultModel) || 'default',
-                effort: (runtimeConfig && runtimeConfig.defaultEffort) || 'medium',
-                contextRemaining: null,
-                latestUsage: null,
-                claudeSessionId: null,
-                resumeSessionId: null,
-                canAbort: false,
-                pendingPermissionCount: 0
-            };
-            claudeResumePanelOpen = false;
-            claudePickerOpen = null;
-            claudeResumeItemsLoaded = false;
-            document.getElementById('claude-resume-panel').classList.remove('active');
-            document.getElementById('claude-resume-panel').innerHTML = '';
-            closeClaudePicker();
-            updateTerminalControlsHeight();
-            applyClaudeRuntimeConfig(runtimeConfig);
-            applyClaudeState(claudeState);
-            renderClaudeChat();
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
-            currentSocket.onopen = () => logViewSnapshot('claude-ws-open');
-            currentSocket.onmessage = (e) => {
-                const msg = JSON.parse(e.data);
-                if (msg.type === 'claude-snapshot' && msg.snapshot) {
-                    claudeMessages = msg.snapshot.messages || [];
-                    claudePendingPermissions = msg.snapshot.pendingPermissions || [];
-                    claudeStatus = msg.snapshot.status || 'idle';
-                    applyClaudeState(msg.snapshot.state || {
-                        status: claudeStatus,
-                        pendingPermissionCount: claudePendingPermissions.filter(item => item.status === 'pending').length,
-                        canAbort: claudeStatus === 'thinking'
-                    });
-                    renderClaudeChat();
-                }
-                if (msg.type === 'claude-event') applyClaudeEvent(msg.event);
-                if (msg.type === 'exit') showLobby();
-            };
-        }
-
-        function initCodexSession(sessionId) {
-            codexMessages = [];
-            codexPendingPermissions = [];
-            codexModelPanelOpen = false;
-            codexModelCandidate = null;
-            codexResumePanelOpen = false;
-            codexForkPanelOpen = false;
-            document.getElementById('codex-model-panel').classList.remove('active');
-            document.getElementById('codex-resume-panel').classList.remove('active');
-            document.getElementById('codex-fork-panel').classList.remove('active');
-            document.getElementById('codex-control-rail').scrollLeft = 0;
-            codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canSwitchToTerminal: false, canSwitchToStructured: false };
-            setClaudeModeEnabled(false);
-            applyCodexState(codexState);
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
-            currentSocket.onmessage = (e) => {
-                const msg = JSON.parse(e.data);
-                if (msg.type === 'codex-snapshot' && msg.snapshot) {
-                    codexMessages = msg.snapshot.messages || [];
-                    codexPendingPermissions = msg.snapshot.pendingPermissions || [];
-                    applyCodexState(msg.snapshot.state || {});
-                }
-                if (msg.type === 'codex-event') {
-                    applyCodexEvent(msg.event);
-                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'terminal') {
-                        currentSocket.close();
-                        currentSocket = null;
-                        initTerminal(sessionId);
-                    }
-                }
-                if (msg.type === 'exit') showLobby();
-            };
-        }
-
-        function sendWS(data) { 
-            if (currentSocket && currentSocket.readyState === 1) currentSocket.send(JSON.stringify({ type: 'input', data })); 
-        }
-        
-        let layoutTimer = null;
-        let layoutKeepAtBottom = false;
-
-        function isTerminalAtBottom() {
-            if (!term || !term.buffer || !term.buffer.active) return true;
-            const active = term.buffer.active;
-            return active.viewportY >= active.baseY - 1;
-        }
-
-        function scrollTerminalViewportToBottom() {
-            if (!term) return;
-            term.scrollToBottom();
-            const viewport = document.querySelector('#terminal .xterm-viewport');
-            if (viewport) viewport.scrollTop = viewport.scrollHeight;
-        }
-
-        function restoreTerminalBottomSoon() {
-            scrollTerminalViewportToBottom();
-            requestAnimationFrame(() => {
-                scrollTerminalViewportToBottom();
-                requestAnimationFrame(scrollTerminalViewportToBottom);
-            });
-            setTimeout(scrollTerminalViewportToBottom, 120);
-        }
-
-        function syncLayout(options = {}) {
-            if (!fitAddon || !currentSocket) return;
-            const keepAtBottom = typeof options.keepAtBottom === 'boolean' ? options.keepAtBottom : isTerminalAtBottom();
-            layoutKeepAtBottom = layoutKeepAtBottom || keepAtBottom;
-            clearTimeout(layoutTimer);
-            layoutTimer = setTimeout(() => {
-                const shouldRestoreBottom = layoutKeepAtBottom;
-                layoutKeepAtBottom = false;
-                fitAddon.fit();
-                if (shouldRestoreBottom) restoreTerminalBottomSoon();
-                if (currentSocket.readyState === 1) currentSocket.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows })); 
-            }, 50); 
-        }
-
-        function previewText(text, maxChars = 320) {
-            if (!text) return '';
-            const normalized = String(text)
-                .replace(/\r/g, '\\r')
-                .replace(/\n/g, '\\n')
-                .replace(/\t/g, '\\t')
-                .replace(/\x1b/g, '\\x1b');
-            return normalized.length > maxChars ? normalized.slice(-maxChars) : normalized;
-        }
-
-        async function logClientDebug(event, payload) {
-            try {
-                await fetch('/api/debug/client-log', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ sessionId: activeSessionId, event, payload })
-                });
-            } catch (_) {}
-        }
-
-        function snapshotTerminalBuffer(maxLines = 12) {
-            if (!term || !term.buffer || !term.buffer.active) return null;
-            const active = term.buffer.active;
-            const totalLines = active.length || 0;
-            const start = Math.max(0, totalLines - maxLines);
-            const tailLines = [];
-            for (let i = start; i < totalLines; i++) {
-                const line = active.getLine(i);
-                if (!line) continue;
-                tailLines.push(line.translateToString(true));
-            }
-            return {
-                cols: term.cols,
-                rows: term.rows,
-                baseY: active.baseY,
-                viewportY: active.viewportY,
-                cursorX: active.cursorX,
-                cursorY: active.cursorY,
-                totalLines,
-                tailPreview: previewText(tailLines.join('\n'))
-            };
-        }
-
-        function logViewSnapshot(event) {
-            logClientDebug(event, {
-                sessionId: activeSessionId,
-                terminalSnapshot: snapshotTerminalBuffer()
-            });
-        }
-
-        // Navigation
-        function showTerminal() {
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById('terminal-view').classList.add('active');
-            logViewSnapshot('show-terminal');
-            syncLayout();
-        }
-
-        function showGitPreview() {
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById('git-view').classList.add('active');
-            switchGitTab('changes');
-        }
-
-        let historyWrapEnabled = true;
-
-        function showHistory() {
-            clearTimeout(sessionPollTimer);
-            sessionPollTimer = null;
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById('history-view').classList.add('active');
-            logViewSnapshot('show-history-before-load');
-            loadHistory();
-        }
-
-        function toggleHistoryWrap() {
-            historyWrapEnabled = !historyWrapEnabled;
-            const contentEl = document.getElementById('history-content');
-            contentEl.classList.toggle('nowrap', !historyWrapEnabled);
-            document.getElementById('history-wrap-btn').style.color = historyWrapEnabled ? 'var(--primary)' : 'var(--text-dim)';
-        }
-
-        async function loadHistory() {
-            const contentEl = document.getElementById('history-content');
-            const metaEl = document.getElementById('history-meta');
-            if (!activeSessionId) {
-                metaEl.textContent = 'No active session.';
-                contentEl.textContent = '';
-                return;
-            }
-
-            metaEl.textContent = 'Loading...';
-            try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/history`, {}, 30000);
-                const data = await res.json();
-                if (!data.success) throw new Error(data.error || 'Failed to load history');
-
-                const updatedAt = data.updatedAt ? new Date(data.updatedAt).toLocaleTimeString() : 'unknown';
-                const size = typeof data.bytes === 'number' ? `${Math.round(data.bytes / 1024)} KB` : 'unknown size';
-                const truncated = data.truncated ? ' | truncated' : '';
-                metaEl.textContent = `${data.tool || 'Session'} | ${data.lines || 0} lines | ${size} | updated ${updatedAt}${truncated}`;
-                contentEl.textContent = data.text || 'No readable history yet.';
-                contentEl.classList.toggle('nowrap', !historyWrapEnabled);
-                document.getElementById('history-wrap-btn').style.color = historyWrapEnabled ? 'var(--primary)' : 'var(--text-dim)';
-                logClientDebug('history-loaded', {
-                    meta: metaEl.textContent,
-                    historyLines: data.lines || 0,
-                    historyBytes: data.bytes || 0,
-                    historyTail: previewText(data.text || '')
-                });
-                requestAnimationFrame(() => {
-                    contentEl.scrollTop = contentEl.scrollHeight;
-                });
-            } catch (e) {
-                metaEl.textContent = 'Failed to load history.';
-                contentEl.textContent = e.message;
-                logClientDebug('history-load-failed', { message: e.message });
-            }
-        }
-
-        async function copyHistoryContent() {
-            const contentEl = document.getElementById('history-content');
-            const text = contentEl.textContent || '';
-            if (!text || text === 'Loading...' || text === 'No readable history yet.') {
-                alert('No history to copy.');
-                return;
-            }
-
-            try {
-                if (navigator.clipboard && window.isSecureContext) {
-                    await navigator.clipboard.writeText(text);
-                } else {
-                    const range = document.createRange();
-                    range.selectNode(contentEl);
-                    window.getSelection().removeAllRanges();
-                    window.getSelection().addRange(range);
-                    document.execCommand('copy');
-                    window.getSelection().removeAllRanges();
-                }
-                alert('History copied.');
-            } catch (e) {
-                alert('Copy failed. You can select the history text manually.');
-            }
-        }
-
-        const inputEl = document.getElementById('cmd-input');
-        const imageFileInput = document.getElementById('image-file-input');
-        const attachmentStrip = document.getElementById('attachment-strip');
-        let selectedImageAttachments = [];
-        let keepTerminalBottomForNextInput = false;
-
-        function isCodexImageAttachmentAvailable() {
-            return isCodexSession() && codexState.presentation === 'structured';
-        }
-
-        function syncComposerButtonState() {
-            const menuOpen = document.getElementById('composer-menu').classList.contains('active');
-            const timerOpen = document.getElementById('timed-send-panel').classList.contains('active');
-            document.getElementById('timer-btn').classList.toggle('active', menuOpen || timerOpen);
-        }
-
-        function renderImageAttachments() {
-            attachmentStrip.innerHTML = selectedImageAttachments.map(item => (
-                `<div class="attachment-chip${item.uploading ? ' uploading' : ''}"><span aria-hidden="true">▧</span><span class="attachment-chip-content"><span class="attachment-chip-name" title="${escapeHtml(item.name)}">${escapeHtml(item.name)}</span>${item.uploading ? `<span class="attachment-progress${item.progressKnown ? '' : ' estimated'}"><span style="width:${Math.max(0, Math.min(100, item.progress || 0))}%"></span></span><span class="attachment-status">${escapeHtml(item.status || (item.progressKnown ? `Uploading ${Math.round(item.progress || 0)}%` : 'Uploading original image…'))}</span>` : ''}</span><button class="attachment-remove" type="button" title="Remove image" aria-label="Remove ${escapeHtml(item.name)}" onclick="removeImageAttachment('${item.id}')">×</button></div>`
-            )).join('');
-            attachmentStrip.classList.toggle('active', selectedImageAttachments.length > 0);
-            updateTerminalControlsHeight();
-        }
-
-        window.removeImageAttachment = async function(attachmentId) {
-            const attachment = selectedImageAttachments.find(item => item.id === attachmentId);
-            selectedImageAttachments = selectedImageAttachments.filter(item => item.id !== attachmentId);
-            renderImageAttachments();
-            if (!attachment) return;
-            clearInterval(attachment.indicatorTimer);
-            attachment.abortUpload?.();
-            if (attachment.uploading) return;
-            try {
-                await fetchWithTimeout(`/api/sessions/${attachment.sessionId}/attachments/images/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
-            } catch (_) {
-                // The server also removes all attachments when the session ends.
-            }
-        };
-
-        async function clearImageAttachments() {
-            const pending = selectedImageAttachments;
-            selectedImageAttachments = [];
-            renderImageAttachments();
-            for (const item of pending) item.abortUpload?.();
-            await Promise.all(pending.filter(item => !item.uploading).map(item => fetchWithTimeout(
-                `/api/sessions/${item.sessionId}/attachments/images/${encodeURIComponent(item.id)}`,
-                { method: 'DELETE' }
-            ).catch(() => null)));
-        }
-
-        const IMAGE_UPLOAD_CHUNK_BYTES = 512 * 1024;
-
-        function uploadImageInChunks(sessionId, file, onProgress) {
-            let xhr = null;
-            let cancelled = false;
-            const uploadId = crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-            const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
-            return {
-                abort: () => {
-                    cancelled = true;
-                    xhr?.abort();
-                    void fetch(`/api/sessions/${sessionId}/attachments/images/uploads/${encodeURIComponent(uploadId)}`, { method: 'DELETE' }).catch(() => null);
-                },
-                promise: (async () => {
-                    for (let chunkIndex = 0; chunkIndex < chunkTotal; chunkIndex++) {
-                        if (cancelled) throw new Error('Image upload cancelled');
-                        const start = chunkIndex * IMAGE_UPLOAD_CHUNK_BYTES;
-                        const chunk = file.slice(start, Math.min(file.size, start + IMAGE_UPLOAD_CHUNK_BYTES));
-                        const result = await new Promise((resolve, reject) => {
-                            xhr = new XMLHttpRequest();
-                            xhr.open('POST', `/api/sessions/${sessionId}/attachments/images/chunks`);
-                            xhr.timeout = 60_000;
-                            xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
-                            xhr.setRequestHeader('X-Glad-Upload-Id', uploadId);
-                            xhr.setRequestHeader('X-Glad-Chunk-Index', String(chunkIndex));
-                            xhr.setRequestHeader('X-Glad-Chunk-Total', String(chunkTotal));
-                            xhr.onerror = () => reject(new Error('Network error while uploading image'));
-                            xhr.ontimeout = () => reject(new Error(`Image upload timed out on chunk ${chunkIndex + 1}/${chunkTotal}`));
-                            xhr.onabort = () => reject(new Error('Image upload cancelled'));
-                            xhr.onload = () => {
-                                let data = {};
-                                try { data = JSON.parse(xhr.responseText || '{}'); } catch (_) {}
-                                if (xhr.status < 200 || xhr.status >= 300 || !data.success) {
-                                    reject(new Error(data.error || `Upload failed (HTTP ${xhr.status})`));
-                                    return;
-                                }
-                                resolve(data);
-                            };
-                            xhr.send(chunk);
-                        });
-                        const confirmedBytes = Math.min(file.size, start + chunk.size);
-                        onProgress(Math.round((confirmedBytes / file.size) * 100), chunkIndex + 1, chunkTotal);
-                        if (result.complete) return result.attachment;
-                    }
-                    throw new Error('Image upload did not complete');
-                })()
-            };
-        }
-
-        async function uploadImageFiles(files) {
-            if (!isCodexImageAttachmentAvailable()) {
-                alert('Image attachments are available only in Codex chat mode.');
-                return;
-            }
-            const remaining = 5 - selectedImageAttachments.length;
-            const batch = Array.from(files).slice(0, remaining);
-            if (files.length > remaining) alert('You can attach up to 5 images at a time.');
-            for (const file of batch) {
-                if (file.size > 50 * 1024 * 1024) {
-                    alert(`${file.name} is larger than 50 MB.`);
-                    continue;
-                }
-                const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
-                const pending = {
-                    id: `uploading-${crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`}`,
-                    name: file.name || 'image',
-                    sessionId: activeSessionId,
-                    uploading: true,
-                    progress: 0,
-                    progressKnown: true,
-                    status: '0%',
-                    abortUpload: null
-                };
-                selectedImageAttachments.push(pending);
-                renderImageAttachments();
-                try {
-                    const upload = uploadImageInChunks(activeSessionId, file, progress => {
-                        pending.progress = progress;
-                        pending.status = `${progress}%`;
-                        renderImageAttachments();
-                    });
-                    pending.abortUpload = upload.abort;
-                    const attachment = await upload.promise;
-                    const index = selectedImageAttachments.indexOf(pending);
-                    if (index < 0) {
-                        await fetchWithTimeout(`/api/sessions/${activeSessionId}/attachments/images/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
-                        continue;
-                    }
-                    selectedImageAttachments[index] = { ...attachment, name: file.name || attachment.name, sessionId: activeSessionId };
-                    renderImageAttachments();
-                } catch (e) {
-                    selectedImageAttachments = selectedImageAttachments.filter(item => item !== pending);
-                    renderImageAttachments();
-                    if (e.message === 'Image upload cancelled') continue;
-                    alert(`Could not add ${file.name}: ${e.message}`);
-                }
-            }
-        }
-
-        function closeComposerMenu() {
-            document.getElementById('composer-menu').classList.remove('active');
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        }
-
-        function openTimedSendPanel() {
-            closeComposerMenu();
-            if (isClaudeSession()) {
-                closeClaudePicker();
-                closeClaudeUsagePanel();
-                claudeResumePanelOpen = false;
-                document.getElementById('claude-resume-panel').classList.remove('active');
-            }
-            initTimedDelaySelectors();
-            resetTimedEditor({ keepInput: true });
-            document.getElementById('timed-send-panel').classList.add('active');
-            updateTimedSendPreview();
-            loadTimedInputs();
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        }
-
-        function markInputEditStart() {
-            keepTerminalBottomForNextInput = keepTerminalBottomForNextInput || isTerminalAtBottom();
-        }
-
-        inputEl.addEventListener('beforeinput', markInputEditStart);
-        inputEl.addEventListener('input', function() {
-            const keepAtBottom = keepTerminalBottomForNextInput || isTerminalAtBottom();
-            keepTerminalBottomForNextInput = false;
-            this.style.height = 'auto';
-            this.style.height = Math.min(this.scrollHeight, 150) + 'px';
-            if (keepAtBottom) restoreTerminalBottomSoon();
-        });
-        
-        function performSend() {
-            const val = inputEl.value;
-            const readyImageAttachments = selectedImageAttachments.filter(item => !item.uploading);
-            if (selectedImageAttachments.some(item => item.uploading)) {
-                alert('Wait for image uploads to finish before sending.');
-                return;
-            }
-            if (val && isClaudeSession()) {
-                if (currentSocket && currentSocket.readyState === 1) {
-                    currentSocket.send(JSON.stringify({ type: 'claude-input', text: val }));
-                }
-                inputEl.value = '';
-                inputEl.style.height = '38px';
-                return;
-            }
-            if ((val || readyImageAttachments.length) && isCodexSession() && codexState.presentation === 'structured') {
-                if (currentSocket && currentSocket.readyState === 1) {
-                    currentSocket.send(JSON.stringify({
-                        type: 'codex-input',
-                        text: val,
-                        attachmentIds: readyImageAttachments.map(item => item.id)
-                    }));
-                }
-                inputEl.value = '';
-                inputEl.style.height = '38px';
-                selectedImageAttachments = [];
-                renderImageAttachments();
-                return;
-            }
-            if (val) {
-                const formattedVal = val.replace(/\n/g, '\r');
-                sendWS(formattedVal);
-                inputEl.value = ''; 
-                inputEl.style.height = '38px'; 
-                restoreTerminalBottomSoon();
-                setTimeout(() => { sendWS('\r'); }, 1000);
-            }
-        }
-
-        let timedInputs = [];
-
-        function initTimedDelaySelectors() {
-            const hours = document.getElementById('timed-hours');
-            const minutes = document.getElementById('timed-minutes');
-            if (hours.options.length) return;
-            for (let i = 0; i <= 23; i++) {
-                hours.add(new Option(`${i} hr`, String(i)));
-            }
-            for (let i = 0; i <= 59; i++) {
-                minutes.add(new Option(`${i} min`, String(i)));
-            }
-            hours.value = '0';
-            minutes.value = '5';
-        }
-
-        function getTimedDelayMs() {
-            const hours = Number(document.getElementById('timed-hours').value);
-            const minutes = Number(document.getElementById('timed-minutes').value);
-            const delayMs = ((hours * 60) + minutes) * 60 * 1000;
-            return Number.isFinite(delayMs) && delayMs > 0 ? delayMs : 0;
-        }
-
-        function parseSendAt() {
-            const delayMs = getTimedDelayMs();
-            return delayMs > 0 ? Date.now() + delayMs : null;
-        }
-
-        function setTimedDelayFromMs(ms) {
-            const totalMinutes = Math.max(1, Math.ceil(ms / 60000));
-            const hours = Math.min(23, Math.floor(totalMinutes / 60));
-            const minutes = Math.min(59, totalMinutes - hours * 60);
-            document.getElementById('timed-hours').value = String(hours);
-            document.getElementById('timed-minutes').value = String(minutes);
-        }
-
-        function updateTimedSendPreview() {
-            const preview = document.getElementById('timed-preview');
-            const sendAt = parseSendAt();
-            preview.textContent = sendAt
-                ? `Will run at ${new Date(sendAt).toLocaleString()}`
-                : 'Choose at least 1 minute.';
-        }
-
-        function formatCountdown(sendAt) {
-            const remaining = Math.max(0, sendAt - Date.now());
-            const totalSeconds = Math.ceil(remaining / 1000);
-            const hours = Math.floor(totalSeconds / 3600);
-            const minutes = Math.floor((totalSeconds % 3600) / 60);
-            const seconds = totalSeconds % 60;
-            if (hours > 0) return `${hours}h\n${String(minutes).padStart(2, '0')}m`;
-            return `${minutes}:${String(seconds).padStart(2, '0')}`;
-        }
-
-        function renderTimedTags() {
-            const rail = document.getElementById('timed-tag-rail');
-            const now = Date.now();
-            const activeItems = timedInputs.filter(item => item.sendAt > now);
-            rail.innerHTML = activeItems.map(item => {
-                const encodedId = encodePathValue(item.id);
-                return `<button class="timed-tag${item.id === editingTimedInputId ? ' active' : ''}" title="${escapeHtml(item.text)}" onclick="editTimedInput(decodePathValue('${encodedId}'))">${escapeHtml(formatCountdown(item.sendAt))}</button>`;
-            }).join('');
-        }
-
-        function closeTimedSendPanel() {
-            document.getElementById('timed-send-panel').classList.remove('active');
-            editingTimedInputId = null;
-            renderTimedTags();
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        }
-
-        function stopTimedInputTimers() {
-            clearTimeout(timedSendRefreshTimer);
-            timedSendRefreshTimer = null;
-            if (timedTagTimer) clearInterval(timedTagTimer);
-            timedTagTimer = null;
-            timedInputs = [];
-            renderTimedTags();
-        }
-
-        function resetTimedEditor(options = {}) {
-            editingTimedInputId = null;
-            document.getElementById('timed-save-btn').textContent = 'Add Timer';
-            document.getElementById('timed-cancel-edit-btn').style.display = 'none';
-            document.getElementById('timed-delete-btn').style.display = 'none';
-            if (!options.keepInput) {
-                inputEl.value = '';
-                inputEl.style.height = '38px';
-            }
-            setTimedDelayFromMs(5 * 60 * 1000);
-            updateTimedSendPreview();
-            renderTimedTags();
-        }
-
-        async function loadTimedInputs() {
-            clearTimeout(timedSendRefreshTimer);
-            timedSendRefreshTimer = null;
-            if (!activeSessionId) return;
-
-            try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/timed-inputs`);
-                if (!res.ok) throw new Error('HTTP ' + res.status);
-                const data = await res.json();
-                timedInputs = data.items || [];
-                renderTimedTags();
-                if (!timedTagTimer) timedTagTimer = setInterval(renderTimedTags, 1000);
-                timedSendRefreshTimer = setTimeout(loadTimedInputs, 15000);
-            } catch (e) {
-                timedInputs = [];
-                renderTimedTags();
-            }
-        }
-
-        function editTimedInput(id) {
-            const item = timedInputs.find(value => value.id === id);
-            if (!item) return;
-            closeComposerMenu();
-            initTimedDelaySelectors();
-            editingTimedInputId = id;
-            inputEl.value = item.text || '';
-            inputEl.style.height = 'auto';
-            inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + 'px';
-            setTimedDelayFromMs(item.sendAt - Date.now());
-            document.getElementById('timed-save-btn').textContent = 'Update Timer';
-            document.getElementById('timed-cancel-edit-btn').style.display = '';
-            document.getElementById('timed-delete-btn').style.display = '';
-            document.getElementById('timed-send-panel').classList.add('active');
-            updateTimedSendPreview();
-            renderTimedTags();
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        }
-
-        async function saveTimedSend() {
-            if (!activeSessionId) return alert('No active session');
-            const text = inputEl.value;
-            if (!text.trim()) return alert('Type a message first');
-            const sendAt = parseSendAt();
-            if (!sendAt) return alert('Choose at least 1 minute');
-
-            try {
-                const url = editingTimedInputId
-                    ? `/api/sessions/${activeSessionId}/timed-inputs/${editingTimedInputId}`
-                    : `/api/sessions/${activeSessionId}/timed-inputs`;
-                const res = await fetchWithTimeout(url, {
-                    method: editingTimedInputId ? 'PATCH' : 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, sendAt })
-                });
-                const data = await res.json();
-                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to save timer');
-                resetTimedEditor();
-                await loadTimedInputs();
-            } catch (e) {
-                alert('Save failed: ' + e.message);
-            }
-        }
-
-        async function cancelTimedInput(id) {
-            if (!activeSessionId) return;
-            try {
-                await fetchWithTimeout(`/api/sessions/${activeSessionId}/timed-inputs/${id}`, { method: 'DELETE' });
-                if (editingTimedInputId === id) resetTimedEditor();
-                loadTimedInputs();
-            } catch (e) {
-                alert('Delete failed');
-            }
-        }
-
-        function deleteEditingTimedInput() {
-            if (editingTimedInputId) cancelTimedInput(editingTimedInputId);
-        }
-        
-        document.getElementById('send-btn').addEventListener('click', performSend);
-        document.getElementById('timer-btn').addEventListener('click', () => {
-            const menu = document.getElementById('composer-menu');
-            const willOpen = !menu.classList.contains('active');
-            document.getElementById('timed-send-panel').classList.remove('active');
-            menu.classList.toggle('active', willOpen);
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        });
-        document.getElementById('attach-image-btn').addEventListener('click', () => {
-            closeComposerMenu();
-            imageFileInput.click();
-        });
-        document.getElementById('schedule-send-btn').addEventListener('click', openTimedSendPanel);
-        imageFileInput.addEventListener('change', () => {
-            const files = imageFileInput.files;
-            if (files?.length) void uploadImageFiles(files);
-            imageFileInput.value = '';
-        });
-        inputEl.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); performSend(); }
-            else if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {
-                markInputEditStart();
-                if (keepTerminalBottomForNextInput) requestAnimationFrame(restoreTerminalBottomSoon);
-            }
-        });
-
-        document.getElementById('shortcut-rail').addEventListener('click', (e) => {
-            const commandBtn = e.target.closest('.command-key');
-            if (commandBtn) {
-                const command = commandBtn.dataset.command;
-                if (command) {
-                    sendWS(command);
-                    setTimeout(() => { sendWS('\r'); }, 1000);
-                }
-                return;
-            }
-
-            const keyBtn = e.target.closest('.key-btn'); if (!keyBtn) return;
-            const key = keyBtn.dataset.key;
-            if (key === 'ctrl') { modifiers[key] = !modifiers[key]; keyBtn.classList.toggle('active', modifiers[key]); return; }
-            if (key === 'codex-perm') {
-                sendWS('/perm');
-                setTimeout(() => { sendWS('\r'); }, 1000);
-                return;
-            }
-            const sequences = { up: '\x1b[A', down: '\x1b[B', left: '\x1b[D', right: '\x1b[C', enter: '\r', esc: '\x1b', tab: '\t', 'ctrl-c': '\x03', 'ctrl-y': '\x19' };
-            if (sequences[key]) sendWS(sequences[key]);
-        });
-
-        const scrollChargeDurationMs = 6000;
-        let isScrolling = false, scrollDir = 0, scrollSpeed = 0, rafId = null;
-        let chargeBtn = null, chargeStartTime = 0, chargeRafId = null, chargePointerId = null, chargeCompleted = false;
-
-        function getTerminalViewport() {
-            return document.querySelector('.xterm-viewport');
-        }
-
-        function smoothScrollLoop() {
-            if (!isScrolling) return;
-            const viewport = getTerminalViewport();
-            if (viewport) { viewport.scrollTop += (scrollDir * scrollSpeed); scrollSpeed = Math.min(30, scrollSpeed + 0.2); }
-            rafId = requestAnimationFrame(smoothScrollLoop);
-        }
-        function startScroll(dir) { if (isScrolling) return; isScrolling = true; scrollDir = dir; scrollSpeed = 4; smoothScrollLoop(); }
-        function stopScroll() { isScrolling = false; if (rafId) cancelAnimationFrame(rafId); }
-
-        function jumpTerminalScroll(dir) {
-            const viewport = getTerminalViewport();
-            if (!viewport) return;
-            viewport.scrollTop = dir < 0 ? 0 : viewport.scrollHeight;
-            if (term) {
-                if (dir < 0) term.scrollToTop();
-                else term.scrollToBottom();
-            }
-        }
-
-        function resetChargeButton(btn) {
-            if (!btn) return;
-            btn.classList.remove('charging');
-            btn.style.setProperty('--charge', '0deg');
-        }
-
-        function stopScrollCharge() {
-            stopScroll();
-            if (chargeRafId) cancelAnimationFrame(chargeRafId);
-            if (chargeBtn && chargePointerId !== null) {
-                try { chargeBtn.releasePointerCapture(chargePointerId); } catch (_) {}
-            }
-            resetChargeButton(chargeBtn);
-            chargeBtn = null;
-            chargeStartTime = 0;
-            chargeRafId = null;
-            chargePointerId = null;
-            chargeCompleted = false;
-        }
-
-        function updateScrollCharge() {
-            if (!chargeBtn) return;
-            const elapsed = performance.now() - chargeStartTime;
-            const progress = Math.min(1, elapsed / scrollChargeDurationMs);
-            chargeBtn.style.setProperty('--charge', (progress * 360) + 'deg');
-            if (progress >= 1) {
-                chargeCompleted = true;
-                jumpTerminalScroll(scrollDir);
-                stopScrollCharge();
-                return;
-            }
-            chargeRafId = requestAnimationFrame(updateScrollCharge);
-        }
-
-        function startScrollCharge(e, dir) {
-            e.preventDefault();
-            stopScrollCharge();
-            chargeBtn = e.currentTarget;
-            chargePointerId = e.pointerId;
-            chargeStartTime = performance.now();
-            chargeCompleted = false;
-            chargeBtn.classList.add('charging');
-            chargeBtn.setPointerCapture(chargePointerId);
-            startScroll(dir);
-            updateScrollCharge();
-        }
-
-        document.getElementById('scroll-up').addEventListener('pointerdown', (e) => startScrollCharge(e, -1));
-        document.getElementById('scroll-down').addEventListener('pointerdown', (e) => startScrollCharge(e, 1));
-        window.addEventListener('pointerup', stopScrollCharge);
-        window.addEventListener('pointercancel', stopScrollCharge);
-        window.addEventListener('resize', syncLayout);
-        
-        // Git Logic
-        let currentGitTab = 'changes';
-        let currentDirPath = '';
-
-        function switchGitTab(tab) {
-            currentGitTab = tab;
-            document.getElementById('tab-changes').classList.toggle('active', tab === 'changes');
-            document.getElementById('tab-directories').classList.toggle('active', tab === 'directories');
-            document.getElementById('tab-graph').classList.toggle('active', tab === 'graph');
-            if (tab === 'changes') {
-                loadGitStatus();
-            } else if (tab === 'directories') {
-                loadDirectories(currentDirPath);
-            } else if (tab === 'graph') {
-                loadGitGraph();
-            }
-        }
-
-        
-        let currentCommitDiffHTML = '';
-        let currentCommitHash = '';
-
-        window.loadCommitDiff = async function(hash) {
-            if (!activeSessionId) return;
-            const content = document.getElementById('git-content');
-            content.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-dim);">Loading diff...</div>';
-            currentCommitHash = hash;
-            
-            try {
-                const res = await fetch(`/api/sessions/${activeSessionId}/git-show/${hash}`);
-                const data = await res.json();
-                if (data.success) {
-                    let fileBlocks = [];
-                    let currentBlock = { name: 'Commit Details', lines: [] };
-                    fileBlocks.push(currentBlock);
-                    
-                    const lines = data.stdout.split('\n');
-                    for (const line of lines) {
-                        const diffMatch = line.match(/^diff --git a\/(.+?) b\//);
-                        if (diffMatch) {
-                            currentBlock = { name: diffMatch[1], lines: [] };
-                            fileBlocks.push(currentBlock);
-                        }
-                        currentBlock.lines.push(line);
-                    }
-                    
-                    let diffHTML = '';
-                    for (const block of fileBlocks) {
-                        if (block.lines.length === 0 || (block.lines.length === 1 && !block.lines[0])) continue;
-                        
-                        let blockContent = '';
-                        let addCount = 0;
-                        let subCount = 0;
-                        for (const line of block.lines) {
-                            let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                            if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; addCount++; }
-                            else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; subCount++; }
-                            else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
-                            else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = '#fff';
-                            
-                            blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${line.replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' '}</div>`;
-                        }
-                        
-                        const isOpen = block.name === 'Commit Details';
-                        const statHTML = block.name !== 'Commit Details' ? `<span style="margin-left: 12px; font-family: monospace; font-size: 12px;"><span style="color:#4ade80;">+${addCount}</span> <span style="color:#f87171; margin-left:6px;">-${subCount}</span></span>` : '';
-                        diffHTML += `
-                            <details ${isOpen ? 'open' : ''} style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; overflow: hidden;">
-                                <summary style="background: #1e1e1e; padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none;">
-                                    ${block.name === 'Commit Details' ? '📝 ' : '📄 '}${block.name.replace(/</g, '&lt;').replace(/>/g, '&gt;')}${statHTML}
-                                </summary>
-                                <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0;">
-                                    ${blockContent}
-                                </div>
-                            </details>
-                        `;
-                    }
-                    currentCommitDiffHTML = diffHTML;
-                    renderCommitDiffFullView();
-                } else {
-                    content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Error loading diff</p>`;
-                }
-            } catch (e) {
-                content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Network error</p>`;
-            }
-        };
-
-        function renderCommitDiffFullView() {
-            const content = document.getElementById('git-content');
-            let html = `
-            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
-                <button class="icon-btn" onclick="switchGitTab('graph')" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center;">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
-                </button>
-                <div style="flex:1; min-width:0;">
-                    <div style="font-weight:600; font-size:15px; font-family: monospace;">Commit: ${currentCommitHash}</div>
-                </div>
-            </div>
-            <div style="padding: 10px;">
-                ${currentCommitDiffHTML}
-            </div>`;
-            content.innerHTML = html;
-        }
-
-        async function loadGitGraph() {
-
-            if (!activeSessionId) return;
-            const container = document.getElementById('git-content');
-            container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-dim);">Loading graph...</div>';
-            try {
-                const res = await fetch(`/api/sessions/${activeSessionId}/git-log`);
-                const data = await res.json();
-                if (data.success) {
-                    const renderer = new GitGraphRenderer(container);
-                    renderer.render(data.commits);
-                } else {
-                    container.innerHTML = `<div style="padding: 20px; color: #ff3b30;">Error: ${data.error}</div>`;
-                }
-            } catch (e) {
-                container.innerHTML = `<div style="padding: 20px; color: #ff3b30;">Failed to load graph</div>`;
-            }
-        }
-
-        async function loadDirectories(path = '') {
-            currentDirPath = path;
-            const content = document.getElementById('git-content');
-            content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">Loading...</p>';
-            if (!activeSessionId) return;
-            try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/fs/dir?path=${encodeURIComponent(path)}`);
-                const data = await res.json();
-                if (!data.success) throw new Error(data.error);
-                
-                let html = '<div>';
-                if (path !== '') {
-                    const parts = path.split('/');
-                    parts.pop();
-                    const parentPath = parts.join('/');
-                    html += `<div class="list-item" onclick="loadDirectories(decodePathValue('${encodePathValue(parentPath)}'))">
-                        <svg class="dir-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
-                        <div style="font-size:14px; font-weight:500;">..</div>
-                    </div>`;
-                }
-
-                if (data.files.length === 0) {
-                     html += '<p style="color:var(--text-dim); text-align:center; padding: 20px;">Empty directory</p>';
-                } else {
-                    data.files.forEach(f => {
-                        const fullPath = path ? `${path}/${f.name}` : f.name;
-                        const encodedPath = encodePathValue(fullPath);
-                        const escapedName = escapeHtml(f.name);
-                        let colorStyle = '';
-                        let badgeHtml = '';
-                        if (f.gitStatus) {
-                             let color = '#fff';
-                             let label = f.gitStatus.trim();
-                             if (label.includes('U') || label.includes('?')) { colorStyle = 'color: #4ade80;'; color = '#4ade80'; if(label === '??') label = 'U'; }
-                             else if (label.includes('M')) { colorStyle = 'color: #f59e0b;'; color = '#f59e0b'; }
-                             else if (label.includes('D')) { colorStyle = 'color: #f87171;'; color = '#f87171'; }
-                             badgeHtml = `<span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.7; margin-left: auto;">${label}</span>`;
-                        }
-                        
-                        if (f.isDirectory) {
-                            html += `<div class="list-item" onclick="loadDirectories(decodePathValue('${encodedPath}'))">
-                                <svg class="dir-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
-                                <div style="font-size:14px; font-weight:500; ${colorStyle}">${escapedName}</div>
-                                ${badgeHtml}
-                            </div>`;
-                        } else {
-                            html += `<div class="list-item" onclick="showFileDetails(decodePathValue('${encodedPath}'), false)">
-                                <svg class="file-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-                                <div style="font-size:14px; font-weight:500; ${colorStyle}">${escapedName}</div>
-                                ${badgeHtml}
-                            </div>`;
-                        }
-                    });
-                }
-                html += '</div>';
-                content.innerHTML = html;
-            } catch (e) {
-                content.innerHTML = `<p style="color:#ff3b30; padding:10px;">${e.message}</p>`;
-            }
-        }
-
-        async function loadGitStatus() {
-            const content = document.getElementById('git-content');
-            content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">Loading...</p>';
-            if (!activeSessionId) return;
-            try {
-                const [resStatus, resUnstaged, resStaged] = await Promise.all([
-                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-status`),
-                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-diff-numstat?staged=false`).catch(() => ({ok:false})),
-                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-diff-numstat?staged=true`).catch(() => ({ok:false}))
-                ]);
-                
-                const data = await resStatus.json();
-                if (!data.success) {
-                    content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Git error: ${data.error}</p>`;
-                    return;
-                }
-                const files = Array.isArray(data.files) ? data.files : [];
-
-                if (files.length === 0) {
-                    content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">No changes detected.</p>';
-                    return;
-                }
-
-                let statsMap = {};
-                const parseNumstat = (output) => {
-                    if (!output) return;
-                    output.split('\n').forEach(line => {
-                        const parts = line.split('\t');
-                        if (parts.length >= 3) {
-                            const added = parseInt(parts[0]) || 0;
-                            const removed = parseInt(parts[1]) || 0;
-                            const file = parts.slice(2).join('\t');
-                            if (!statsMap[file]) statsMap[file] = { added: 0, removed: 0 };
-                            statsMap[file].added += added;
-                            statsMap[file].removed += removed;
-                        }
-                    });
-                };
-
-                if (resUnstaged.ok) {
-                    const unstagedData = await resUnstaged.json();
-                    if (unstagedData.success) parseNumstat(unstagedData.stdout);
-                }
-                if (resStaged.ok) {
-                    const stagedData = await resStaged.json();
-                    if (stagedData.success) parseNumstat(stagedData.stdout);
-                }
-
-                let html = '<div style="padding:10px;">';
-                files.forEach((f, idx) => {
-                    const encodedPath = encodePathValue(f.path);
-                    const escapedPath = escapeHtml(f.path);
-                    let color = '#fff';
-                    let label = f.status;
-                    if (label.includes('M')) { color = '#f59e0b'; }
-                    else if (label.includes('A') || label === '??') { color = '#4ade80'; if(label === '??') label = 'U'; }
-                    else if (label.includes('D')) { color = '#f87171'; }
-                    const isUntracked = f.status === '??';
-                    const hasStaged = !isUntracked && f.status[0] && f.status[0] !== ' ';
-                    const hasUnstaged = !isUntracked && f.status[1] && f.status[1] !== ' ';
-
-                    let statHTML = '';
-                    if (statsMap[f.path]) {
-                        const { added, removed } = statsMap[f.path];
-                        if (added > 0 || removed > 0) {
-                            statHTML = `<span style="margin-left: 12px; font-family: monospace; font-size: 12px; white-space: nowrap;"><span style="color:#4ade80;">+${added}</span> <span style="color:#f87171; margin-left:6px;">-${removed}</span></span>`;
-                        }
-                    }
-
-                    html += `<div style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; background: #1e1e1e; overflow: hidden;">
-                        <div onclick="toggleInlineDiff('${encodedPath}', 'inline-diff-${idx}', ${!!hasStaged}, ${!!hasUnstaged}, ${isUntracked})" style="padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none; display: flex; align-items: center;">
-                            <div style="flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">📄 ${escapedPath}${statHTML}</div>
-                            <span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.8; flex-shrink: 0; margin-left: 8px;">${label}</span>
-                        </div>
-                        <div id="inline-diff-${idx}" style="display: none;" data-loaded="false"></div>
-                    </div>`;
-                });
-                html += '</div>';
-                content.innerHTML = html;
-            } catch (e) {
-                content.innerHTML = `<p style="color:#ff3b30; padding:10px;">${e.message}</p>`;
-            }
-        }
-
-        function buildFileDiffUrl(path, staged) {
-            return `/api/sessions/${activeSessionId}/git-diff-file?path=${encodeURIComponent(path)}&staged=${staged ? 'true' : 'false'}`;
-        }
-
-        async function loadFileChangeData(path, options = {}) {
-            const hasStaged = !!options.hasStaged;
-            const hasUnstaged = !!options.hasUnstaged;
-            const isUntracked = !!options.isUntracked;
-            const diffRequests = [];
-
-            if (hasStaged) {
-                diffRequests.push({
-                    label: 'Staged changes',
-                    promise: fetchWithTimeout(buildFileDiffUrl(path, true)).catch(() => ({ok:false}))
-                });
-            }
-            if (hasUnstaged || (!hasStaged && !isUntracked)) {
-                diffRequests.push({
-                    label: 'Unstaged changes',
-                    promise: fetchWithTimeout(buildFileDiffUrl(path, false)).catch(() => ({ok:false}))
-                });
-            }
-
-            const [diffResponses, fileRes] = await Promise.all([
-                Promise.all(diffRequests.map(item => item.promise)),
-                fetchWithTimeout(`/api/sessions/${activeSessionId}/file?path=${encodeURIComponent(path)}`).catch(() => ({ok:false}))
-            ]);
-
-            const diffParts = [];
-            for (let i = 0; i < diffResponses.length; i++) {
-                const res = diffResponses[i];
-                const data = res.ok ? await res.json() : { success: false };
-                if (data.success && data.stdout) {
-                    diffParts.push({ label: diffRequests[i].label, stdout: data.stdout });
-                }
-            }
-
-            const fileData = fileRes.ok ? await fileRes.json() : { success: false };
-            const content = fileData.success ? fileData.content : '';
-            let diff = diffParts.map(part => (
-                diffParts.length > 1 ? `# ${part.label}\n${part.stdout}` : part.stdout
-            )).join('\n');
-            if (!diff && isUntracked && content) diff = 'Untracked file:\n\n' + content;
-
-            return {
-                diff,
-                content,
-                renderRawDiff: diffParts.length > 1
-            };
-        }
-
-        window.toggleInlineDiff = async function(encodedPath, containerId, hasStaged = false, hasUnstaged = true, isUntracked = false) {
-            const container = document.getElementById(containerId);
-            if (container.style.display === 'block') {
-                container.style.display = 'none';
-                return;
-            }
-            container.style.display = 'block';
-            if (container.dataset.loaded === 'true') return;
-
-            const path = decodePathValue(encodedPath);
-            container.innerHTML = '<div style="padding: 10px; color: var(--text-dim); text-align: center; font-size: 12px;">Loading...</div>';
-
-            try {
-                const { diff: currentFileDiff, content: currentFileContent } = await loadFileChangeData(path, {
-                    hasStaged,
-                    hasUnstaged,
-                    isUntracked
-                });
-
-                if (!currentFileDiff && !currentFileContent) {
-                    container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">No diff available</div>`;
-                    return;
-                }
-
-                let blockContent = '';
-                currentFileDiff.split('\n').forEach(line => {
-                    let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                    if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
-                    else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
-                    else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
-
-                    blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${escapeHtml(line) || ' '}</div>`;
-                });
-
-                container.dataset.loaded = 'true';
-                container.innerHTML = `
-                    <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0; border-top: 1px solid #333; max-height: 400px;">
-                        ${blockContent}
-                    </div>
-                    <div style="padding: 8px; background: #1a1a1a; border-top: 1px solid #333; text-align: center;">
-                        <button onclick="showFileDetails(decodePathValue('${encodedPath}'), true, ${!!hasStaged}, ${!!hasUnstaged}, ${!!isUntracked})" style="background: var(--primary); border: none; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-                            View Full File
-                        </button>
-                    </div>
-                `;
-            } catch (e) {
-                container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
-            }
-        };
-
-        let currentFilePath = '', currentFileDiff = '', currentFileContent = '', currentFileMode = 'diff', currentFileWrap = false, currentFontSize = 12, currentFileRenderRawDiff = false;
-
-        function changeFontSize(delta) {
-            if (delta === 0) currentFontSize = 12;
-            else currentFontSize = Math.max(8, Math.min(32, currentFontSize + delta));
-            renderFileDetails();
-        }
-
-        async function showFileDetails(path, isFromChanges = true, hasStaged = false, hasUnstaged = true, isUntracked = false) {
-            currentFilePath = path;
-            currentFileMode = isFromChanges ? 'diff' : 'file';
-            currentFileRenderRawDiff = false;
-            const content = document.getElementById('git-content');
-            content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">Loading details...</p>';
-            try {
-                const detailData = await loadFileChangeData(path, {
-                    hasStaged: isFromChanges ? hasStaged : false,
-                    hasUnstaged: isFromChanges ? hasUnstaged : true,
-                    isUntracked: isFromChanges ? isUntracked : false
-                });
-                currentFileDiff = detailData.diff;
-                currentFileContent = detailData.content;
-                currentFileRenderRawDiff = detailData.renderRawDiff;
-                if (!currentFileDiff && !currentFileContent) {
-                     content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Failed to load details.</p>`;
-                     return;
-                }
-                if (!currentFileDiff && !isFromChanges) currentFileMode = 'file';
-                renderFileDetails();
-            } catch (e) { content.innerHTML = `<p style="color:#ff3b30; padding:10px;">${e.message}</p>`; }
-        }
-
-        function toggleFileMode() { currentFileMode = currentFileMode === 'diff' ? 'file' : 'diff'; renderFileDetails(); }
-        function toggleFileWrap() { currentFileWrap = !currentFileWrap; renderFileDetails(); }
-
-        function renderFileDetails() {
-            const content = document.getElementById('git-content');
-            let html = `
-            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
-                <button class="icon-btn" onclick="switchGitTab(currentGitTab)" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center; flex-shrink: 0;">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
-                </button>
-                <div style="flex:1; min-width:0; margin-right: 12px;">
-                    <div style="font-weight:600; font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${escapeHtml(currentFilePath)}">${escapeHtml(currentFilePath.split('/').pop() || currentFilePath)}</div>
-                </div>`;
-
-            if (currentFileDiff && currentFileContent) {
-                html += `
-                <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
-                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
-                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
-                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
-                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
-                    </div>
-                    <button onclick="toggleFileMode()" style="background: ${currentFileMode === 'diff' ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
-                        Diff
-                    </button>
-                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
-                        Wrap
-                    </button>
-                </div>`;
-            } else {
-                 html += `
-                <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
-                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
-                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
-                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
-                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
-                    </div>
-                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
-                        Wrap
-                    </button>
-                </div>`;
-            }
-
-            html += `</div>`;
-
-            const wrapStyle = currentFileWrap ? 'white-space: pre-wrap; word-break: break-all;' : 'white-space: pre;';
-            const innerWrapStyle = currentFileWrap ? '' : 'min-width: max-content;';
-            html += `<div style="padding: 10px;">`;
-            html += `<div style="background:#0d0d0d; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:${currentFontSize}px; line-height:1.5; padding: 12px 0; margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;">`;
-            html += `<div style="${innerWrapStyle}">`;
-
-            let mergedLines = [];
-            const lines = currentFileContent ? currentFileContent.replace(/\r\n/g, '\n').split('\n') : [];
-
-            if (currentFileMode === 'diff' && currentFileDiff && !currentFileDiff.startsWith('Untracked file:')) {
-                let diffHunks = [];
-                let currentHunk = null;
-                const diffLines = currentFileDiff.replace(/\r\n/g, '\n').split('\n');
-                for (const dl of diffLines) {
-                    if (dl.startsWith('---') || dl.startsWith('+++')) continue;
-                    let match = dl.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
-                    if (match) {
-                        currentHunk = {
-                            newStart: parseInt(match[2], 10),
-                            lines: []
-                        };
-                        diffHunks.push(currentHunk);
-                    } else if (currentHunk) {
-                        currentHunk.lines.push(dl);
-                    }
-                }
-
-                if (currentFileRenderRawDiff || diffHunks.length === 0) {
-                    currentFileDiff.replace(/\r\n/g, '\n').split('\n').forEach(line => {
-                        mergedLines.push({ type: 'raw', text: line });
-                    });
-                } else {
-                    let contentLineIdx = 1;
-                    for (let hunk of diffHunks) {
-                        while (contentLineIdx < hunk.newStart && contentLineIdx <= lines.length) {
-                            mergedLines.push({ type: 'normal', text: lines[contentLineIdx - 1], lineNum: contentLineIdx });
-                            contentLineIdx++;
-                        }
-                        for (let dl of hunk.lines) {
-                            if (dl.startsWith('-')) {
-                                mergedLines.push({ type: 'deleted', text: dl.substring(1) });
-                            } else if (dl.startsWith('+')) {
-                                mergedLines.push({ type: 'added', text: dl.substring(1), lineNum: contentLineIdx });
-                                contentLineIdx++;
-                            } else if (dl.startsWith(' ')) {
-                                mergedLines.push({ type: 'normal', text: dl.substring(1), lineNum: contentLineIdx });
-                                contentLineIdx++;
-                            }
-                        }
-                    }
-                    while (contentLineIdx <= lines.length) {
-                        mergedLines.push({ type: 'normal', text: lines[contentLineIdx - 1], lineNum: contentLineIdx });
-                        contentLineIdx++;
-                    }
-                }
-            } else {
-                lines.forEach((line, idx) => {
-                    mergedLines.push({ type: 'normal', text: line, lineNum: idx + 1 });
-                });
-            }
-
-            mergedLines.forEach(item => {
-                let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                let prefix = ' ';
-                if (item.type === 'added') { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; prefix = '+'; }
-                else if (item.type === 'deleted') { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; prefix = '-'; }
-                else if (item.type === 'raw') {
-                    if (item.text.startsWith('+') && !item.text.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
-                    else if (item.text.startsWith('-') && !item.text.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
-                    else if (item.text.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
-                    prefix = '';
-                }
-
-                const renderedText = item.type === 'raw' ? item.text : `${prefix} ${item.text}`;
-                html += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding: 0 12px 0 8px; display:flex;">`;
-                html += `<div style="color:#555; margin-right:16px; user-select:none; flex-shrink:0; width: 36px; text-align:right;">${item.lineNum || ''}</div>`;
-                html += `<div style="flex:1; min-width:0; ${wrapStyle}">${escapeHtml(renderedText) || ' '}</div>`;
-                html += `</div>`;
-            });
-
-            html += `</div></div></div>`;
-            content.innerHTML = html;
-        }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            refreshSessionsNow();
-            document.addEventListener('visibilitychange', refreshSessionsNow);
-        });
-    </script>
+    <script src="core.js"></script>
+    <script src="claude.js"></script>
+    <script src="schedules.js"></script>
+    <script src="shell.js"></script>
+    <script src="codex.js"></script>
+    <script src="session.js"></script>
+    <script src="composer.js"></script>
+    <script src="timed-inputs.js"></script>
+    <script src="terminal-scroll.js"></script>
+    <script src="git.js"></script>
 </body>
 </html>