@walkhi/code-relax 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/web/chat.css

@@ -66,6 +66,7 @@
     .task-title { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
     .running-status { width: 13px; height: 13px; flex: none; border: 1.5px solid #5e6962; border-top-color: #c2cbc5; border-radius: 50%; animation: status-spin .9s linear infinite; }
     .approval-status { display: inline-flex; align-items: center; flex: none; color: #f2b65a; font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
+    .archive-status { display:inline-flex; align-items:center; flex:none; color:#d9a45f; font-size:12px; font-weight:600; line-height:1.2; white-space:nowrap; }
     .unread-status { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #4285e8; }
     .project-header > :is(.approval-status, .running-status, .unread-status) { margin: 0 7px 0 auto; }
     .project-actions { display: flex; flex: none; align-items: center; gap: 1px; opacity: 0; pointer-events: none; }
@@ -103,7 +104,7 @@
     .turn-error-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 750; line-height: 1; }
     .turn-error-message { min-width: 0; word-break: break-word; }
     .message { max-width: 88%; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.55; word-break: break-word; }
-    .message.user { align-self: flex-end; background: #244a35; border: 1px solid #397655; }
+    .message.user { align-self: flex-end; padding: 5px 12px; background: #244a35; border: 1px solid #397655; }
     .pending-message { display: flex; flex-direction: column; align-self: stretch; min-width: 0; gap: 6px; }
     .pending-message-status { align-self:flex-end; color:#94a79a; font-size:12px; }
     .pending-message-actions { align-self:flex-end; display:flex; gap:8px; }
@@ -133,7 +134,8 @@
     .message-body .code-block-copy:hover { color: #e8eee9; background: #ffffff0d; }
     .message-body .code-block-copy[data-copy-state="copied"] { color: #e8eee9; }
     .message-body .code-block-copy-icon { display: block; width: 16px; height: 16px; }
-    .message-body .code-block pre { margin: 0; padding: 0 16px 12px; border: 0; border-radius: 0; background: transparent; }
+    .message-body .code-block pre { margin: 0; padding: 0 16px 12px; border: 0; border-radius: 0; background: transparent; scrollbar-width: none; }
+    .message-body .code-block pre::-webkit-scrollbar { display: none; }
     .message-body .code-block code.hljs { color: #d9e3dc; }
     .message-body .hljs-comment, .message-body .hljs-quote { color: #789083; font-style: italic; }
     .message-body .hljs-keyword, .message-body .hljs-selector-tag, .message-body .hljs-literal,
@@ -152,13 +154,21 @@
     .message-body .hljs-strong { font-weight: 700; }
     .message-body a { color: #73d99a; text-decoration: none; }
     .message-body a:hover { text-decoration: underline; }
-    .message-body table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
+    .message-body table { display: block; max-width: 100%; overflow: auto; scrollbar-width: none; border-collapse: collapse; }
+    .message-body table::-webkit-scrollbar { display: none; }
     .message-body th, .message-body td { border: 1px solid #35433a; padding: 6px 8px; }
     .message-body hr { border: 0; border-top: 1px solid #35433a; }
     .user-attachments { display: flex; align-self: flex-end; max-width: 88%; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
     .image-thumb { width: 72px; height: 72px; overflow: hidden; padding: 0; border: 1px solid #45564b; border-radius: 8px; background: #0b0e0c; }
-    .image-thumb:hover { border-color: #6e8a78; background: #0b0e0c; }
-    .image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+    .image-thumb:hover { border-color: #6e8a78; background: #0b0e0c; }
+    .image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+    .image-thumb.image-placeholder { position: relative; display: grid; place-items: center; color: #66746b; }
+    .image-placeholder-art { display: grid; place-items: center; width: 38px; height: 38px; }
+    .image-placeholder-art svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
+    .image-placeholder-refresh { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #4b5d52; border-radius: 50%; color: #b4c1b8; background: #151b17; }
+    .image-placeholder-refresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    .image-thumb.image-placeholder.loading .image-placeholder-refresh svg { animation: image-refresh-spin .8s linear infinite; }
+    @keyframes image-refresh-spin { to { transform: rotate(360deg); } }
     #draftImages .image-thumb { position: relative; margin-bottom: 8px; }
     .remove-image { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #101311dd; color: white; line-height: 18px; }
     .message.agent .message-image { display: block; max-width: min(100%, 640px); max-height: 380px; margin-top: 9px; border-radius: 8px; object-fit: contain; }
@@ -180,7 +190,8 @@
     .command-shell-command code { min-width: 0; padding: 3px 0; overflow-wrap: anywhere; white-space: pre-wrap; color: inherit; background: transparent; }
     .command-shell-prompt { padding-top: 3px; color: #76d395; user-select: none; }
     .command-shell-output { position: relative; overflow: hidden; padding: 9px 36px 9px 10px; }
-    .command-shell-output pre { min-width: 0; min-height: 16px; max-height: 182px; padding: 0; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: #c2ccc5; font-size: 10.5px; }
+    .command-shell-output pre { min-width: 0; min-height: 16px; max-height: 182px; padding: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: #c2ccc5; font-size: 10.5px; }
+    .command-shell-output pre::-webkit-scrollbar { display: none; }
     .command-shell-output pre.empty { color: #758279; font-style: italic; white-space: pre-wrap; }
     .command-shell-output .activity-copy { position: absolute; top: 5px; right: 5px; }
     .command-shell-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 5px 9px 5px 10px; border-top: 1px solid #2a352e; color: #7f8d84; font-size: 10.5px; }
@@ -193,7 +204,8 @@
     .tool-detail-fields dt { color: #7f8d84; }
     .tool-detail-fields dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
     .tool-detail-fields dd > .tool-detail-fields { margin-top: 4px; }
-    .tool-detail .tool-detail-text { max-height: 200px; margin: 0; padding: 7px 8px; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: 5px; background: #0b100d; color: #c2ccc5; font: 10.5px/1.5 "Cascadia Mono", Consolas, monospace; }
+    .tool-detail .tool-detail-text { max-height: 200px; margin: 0; padding: 7px 8px; overflow: auto; scrollbar-width: none; white-space: pre-wrap; word-break: break-word; border-radius: 5px; background: #0b100d; color: #c2ccc5; font: 10.5px/1.5 "Cascadia Mono", Consolas, monospace; }
+    .tool-detail .tool-detail-text::-webkit-scrollbar { display: none; }
     .tool-detail-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; }
     .tool-detail-section.error { color: #ec8b83; }
     .tool-detail-footer { padding-top: 3px; border-top: 1px solid #2a352e; color: #7f8d84; text-align: right; font-size: 10px; }
@@ -224,7 +236,7 @@
     .process > summary[aria-disabled="true"] { cursor:default; pointer-events:none; }
     .disclosure-chevron { display: grid; place-items: center; width: 14px; height: 14px; flex: none; color: #758078; opacity: 0; transform: rotate(0deg); transition: transform .12s ease, opacity .12s ease; }
     .disclosure-chevron svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-    :is(.process, .activity, .reasoning-history)[open] > summary > .disclosure-chevron { opacity: 1; }
+    :is(.process, .activity)[open] > summary > .disclosure-chevron { opacity: 1; }
     .process[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
     .activity[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
     .process.running > summary { color: #71d695; }
@@ -242,12 +254,6 @@
     .process-body .message.commentary .role { display: none; }
     .process-count { display: none; }
     .turn-duration { align-self: stretch; padding: 9px 2px 8px; border-bottom: 1px solid #252e28; color: #969f99; font-size: 12px; font-weight: 650; }
-    .reasoning-history { color: #818c84; font-size: 12px; }
-    .reasoning-history > summary { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 2px; list-style: none; }
-    .reasoning-history > summary::-webkit-details-marker { display: none; }
-    .reasoning-history[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
-    .reasoning-history ol { margin: 3px 0 6px; padding-left: 23px; }
-    .reasoning-history li { margin: 5px 0; line-height: 1.45; }
     .live-step { display: flex; align-items: center; gap: 8px; padding: 7px 2px 2px; color: #8f9a92; font-size: 12px; }
     .pulse { width: 7px; height: 7px; border-radius: 50%; background: #52cc7c; animation: pulse 1.2s ease-in-out infinite; }
     @keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@@ -268,8 +274,9 @@
     .clear-pending-settings { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 0; border-radius: 5px; padding: 0; color: #829087; background: transparent; font-size: 16px; line-height: 1; }
     .clear-pending-settings:hover { color: #e8eee9; background: #303632; }
     textarea { width: 100%; min-height: 62px; resize: none; border: 0; outline: 0; padding: 3px 1px; color: #eef4ef; background: transparent; font-size: 13px; }
-    #prompt { width:calc(100% - 40px); height:48px; min-height:48px; overflow-y:auto; font-size:12px; line-height:1.5; }
-    .voice-stop-popover { position:absolute; bottom:calc(100% + 6px); left:12px; z-index:20; padding:4px; border:1px solid #465149; border-radius:12px; background:#252d28; box-shadow:0 4px 16px #0003; }
+    #prompt { width:calc(100% - 40px); height:48px; min-height:48px; overflow-y:auto; scrollbar-width:none; font-size:12px; line-height:1.5; }
+    #prompt::-webkit-scrollbar { display:none; }
+    .voice-stop-popover { position:absolute; top:-48px; left:12px; z-index:20; padding:4px; border:1px solid #465149; border-radius:12px; background:#252d28; box-shadow:0 4px 16px #0003; }
     .voice-stop-popover[hidden] { display:none; }
     #stopVoiceToEdit { min-width:112px; min-height:36px; padding:6px 16px; border:0; border-radius:8px; background:transparent; color:#dce3de; font-size:13px; }
     #stopVoiceToEdit:disabled { opacity:.6; }
@@ -396,7 +403,6 @@
     .effort-panel.ultra .effort-option:not(:disabled)::before, .effort-panel.fast .effort-option.reached::before { opacity:0; }
     .setting-select { display: none; }
     .composer-icon-button { flex-shrink: 0; }
-    #turnActions[hidden] { display: none; }
     .send-control { position:relative; display:grid; place-items:center; width:26px; height:26px; flex:none; }
     .queue-send-icon { position:absolute; right:0; bottom:calc(100% + 16px); color:#243029; background:#d4ded7; }
     .queue-send-icon[hidden] { display:none; }
@@ -423,8 +429,15 @@
     .image-viewer { max-width: min(94vw, 1200px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
     .image-viewer::backdrop { background: #000c; backdrop-filter: blur(3px); }
     .image-viewer-shell { position: relative; display: grid; place-items: center; max-width: 94vw; max-height: 92vh; }
-    .image-viewer img { display: block; max-width: 94vw; max-height: 92vh; border-radius: 8px; object-fit: contain; box-shadow: 0 18px 60px #000a; }
-    .image-viewer-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border-color: #ffffff55; background: #101311cc; font-size: 20px; line-height: 1; }
+    .image-viewer img { display: block; max-width: 94vw; max-height: 92vh; border-radius: 8px; object-fit: contain; box-shadow: 0 18px 60px #000a; }
+    .image-viewer-original, .image-viewer-download { position: absolute; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 19px; border-color: #ffffff55; background: #101311cc; color: #fff; }
+    .image-viewer-original { left: 12px; gap: 7px; min-width: 112px; padding: 0 14px; }
+    .image-viewer-download { right: 12px; width: 38px; min-width: 38px; padding: 0; }
+    .image-viewer-original .codex-icon, .image-viewer-download .codex-icon { width: 18px; height: 18px; }
+    .image-viewer-download.loading .codex-icon { display: none; }
+    .image-viewer-download.loading::before { content: ""; width: 15px; height: 15px; border: 2px solid #ffffff55; border-top-color: currentColor; border-radius: 50%; animation: image-viewer-spin .8s linear infinite; }
+    @keyframes image-viewer-spin { to { transform: rotate(360deg); } }
+    .image-viewer-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border-color: #ffffff55; background: #101311cc; font-size: 20px; line-height: 1; }
     .new-chat-entry { display:flex; flex:none; align-items:center; gap:10px; margin:8px 0; padding:10px 8px; border:0; background:transparent; color:inherit; text-align:left; }
     #newThreadWelcome[hidden], #newThreadProjectBar[hidden], #timeline[hidden], .selected-heading[hidden] { display:none; }
     .new-thread-welcome { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; padding:24px 12px; }
@@ -445,18 +458,18 @@
       section { padding: 14px; }
       .scroll-to-bottom { right: 24px; bottom: 114px; }
     }
-    body.embedded-client { min-height:0; height:100%; background:#101311; }
-    .embedded-client header { display:none; }
-    .embedded-client.native-title .selected-heading { display:none; }
+    body.embedded-terminal { --terminal-sidebar-width:280px; min-height:0; height:100%; background:#101311; }
+    .embedded-terminal header { display:none; }
+    .terminal-chat-header { display:none; }
     #connectionStatus { flex:none; font-size:12px; color:#42d17b; }
     #connectionStatus.failed { color:#e06c64; }
     .sidebar-brand { display:none; }
-    .embedded-client .sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:1px 8px 3px; font-size:18px; font-weight:600; }
-    .embedded-client .new-chat-entry { margin:0; padding:5px 8px; font-size:12px; }
-    .embedded-client .toolbar { min-height:20px; margin:0 4px 1px; }
-    .embedded-client .project { margin-bottom:1px; }
-    .embedded-client .task { margin:0; padding:4px 9px; }
-    @media (max-width:760px) {
+    .embedded-terminal .sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:1px 8px 3px; font-size:18px; font-weight:600; }
+    .embedded-terminal .new-chat-entry { margin:0; padding:5px 8px; font-size:12px; }
+    .embedded-terminal .toolbar { min-height:20px; margin:0 4px 1px; }
+    .embedded-terminal .project { margin-bottom:1px; }
+    .embedded-terminal .task { margin:0; padding:4px 9px; }
+    @media (max-width:760px) {
       .composer-row { min-width:0; }
       .composer-controls { flex:0 1 auto; min-width:0; }
       .model-control { flex:0 1 auto; }
@@ -469,39 +482,41 @@
       #permissionLabel { display:none; }
       .permission-trigger { width:26px; padding:0; justify-content:center; }
     }
-    .embedded-client .status { margin-left:0; overflow:hidden; }
-    .embedded-client #status { overflow:hidden; text-overflow:ellipsis; }
-    .embedded-client .project-actions { opacity:1; pointer-events:auto; }
-    #connectionSettings, #usageButton, #returnToComputer, #debugMenu, .app-actions { display:none; }
-    .embedded-client .app-actions { position:relative; display:flex; align-items:stretch; gap:4px; flex-shrink:0; min-width:0; }
-    .embedded-client .app-actions > :is(#returnToComputer:not([hidden]), #debugMenu:not([hidden])) { flex:1 1 0; min-width:0; width:auto; }
-    .embedded-client #debugMenu:not([hidden]) { position:static; display:block; }
+    .embedded-terminal .status { margin-left:0; overflow:hidden; }
+    .embedded-terminal #status { overflow:hidden; text-overflow:ellipsis; }
+    .embedded-terminal .project-actions { opacity:1; pointer-events:auto; }
+    #connectionSettings, #usageButton, #announcementButton, #returnToComputer, #installedAppVersion, #debugMenu, .app-actions { display:none; }
+    .embedded-terminal .app-actions { position:relative; display:flex; align-items:stretch; gap:4px; flex-shrink:0; min-width:0; }
+    .embedded-terminal .app-actions > :is(#returnToComputer:not([hidden]), #debugMenu:not([hidden])) { flex:0 0 auto; min-width:0; width:auto; }
+    .embedded-terminal #installedAppVersion:not([hidden]) { display:block; flex:1 1 auto; align-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .embedded-terminal #debugMenu:not([hidden]) { position:static; display:block; }
     #debugMenu > summary { display:flex; align-items:center; gap:9px; height:100%; box-sizing:border-box; padding:5px 8px; color:var(--muted, #94a79a); font-size:12px; cursor:pointer; list-style:none; }
     #debugMenu > summary::-webkit-details-marker { display:none; }
     #debugMenu > summary > span { flex:1; text-align:right; }
     #debugMenu[open] .debug-chevron { transform:rotate(90deg); }
     .debug-menu-items { position:absolute; z-index:30; right:0; bottom:calc(100% + 4px); box-sizing:border-box; width:260px; display:grid; gap:4px; padding:8px; border:1px solid #414a44; border-radius:10px; background:#202522; box-shadow:0 12px 32px #0008; }
-    .debug-menu-items > button { width:100%; padding:8px; border:0; background:transparent; text-align:left; }
+    .debug-menu-items > button { width:100%; padding:8px; border:0; background:transparent; text-align:left; }
+    .installed-app-version { margin:0 2px; color:var(--muted, #94a79a); font-size:9px; line-height:1.4; text-align:center; }
     #sharedRecoveryConfirm, #sharedRecoveryResult { font-size:12px; line-height:1.5; overflow-wrap:anywhere; color:var(--muted, #94a79a); }
     #sharedRecoveryConfirm button { width:100%; margin-top:6px; text-align:left; }
-    .embedded-client aside { display:flex; flex-direction:column; overflow:hidden; padding:2px 8px 6px; font-size:12px; }
-    .embedded-client #tasks { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; }
-    .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads:not([hidden]), #returnToComputer:not([hidden])) { display:flex; align-items:center; gap:9px; flex-shrink:0; width:100%; padding:5px 8px; border:0; border-radius:0; background:transparent; color:#9eaca3; text-align:left; font-size:12px; }
-    .embedded-client #archivedThreads { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
-    .embedded-client #usageButton { margin-top:0; }
-    .embedded-client #archivedThreads[hidden] + #usageButton { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
+    .embedded-terminal aside { display:flex; flex-direction:column; overflow:hidden; padding:2px 8px 6px; font-size:12px; }
+    .embedded-terminal #tasks { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; }
+    .embedded-terminal :is(#connectionSettings, #usageButton, #announcementButton, #archivedThreads:not([hidden]), #returnToComputer:not([hidden])) { display:flex; align-items:center; gap:9px; flex-shrink:0; width:100%; padding:5px 8px; border:0; border-radius:0; background:transparent; color:#9eaca3; text-align:left; font-size:12px; }
+    .embedded-terminal #archivedThreads { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
+    .embedded-terminal #usageButton { margin-top:0; }
+    .embedded-terminal #archivedThreads[hidden] + #usageButton { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
     .shared-service-notice { display:none; }
-    .embedded-client .shared-service-notice:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr) 15px; align-items:center; flex:none; gap:7px; min-width:0; margin:3px 0 2px; padding:8px; border:1px solid #d899494f; border-radius:9px; color:#e5b779; background:#d8994914; cursor:pointer; }
-    .embedded-client .shared-service-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
-    .embedded-client .shared-service-notice strong { font-size:12px; line-height:1.35; font-weight:650; white-space:normal; overflow-wrap:anywhere; }
-    .embedded-client .shared-service-notice .shared-service-copy > span { color:#c8a77c; font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
-    .embedded-client .shared-service-notice > .codex-icon { width:15px; height:15px; color:#c8a77c; }
+    .embedded-terminal .shared-service-notice:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr) 15px; align-items:center; flex:none; gap:7px; min-width:0; margin:3px 0 2px; padding:8px; border:1px solid #d899494f; border-radius:9px; color:#e5b779; background:#d8994914; cursor:pointer; }
+    .embedded-terminal .shared-service-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
+    .embedded-terminal .shared-service-notice strong { font-size:12px; line-height:1.35; font-weight:650; white-space:normal; overflow-wrap:anywhere; }
+    .embedded-terminal .shared-service-notice .shared-service-copy > span { color:#c8a77c; font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
+    .embedded-terminal .shared-service-notice > .codex-icon { width:15px; height:15px; color:#c8a77c; }
     #connectionAddress { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .connection-control-mode { font-weight:600; }
     .connection-control-mode.complete { color:#42d17b; }
     .connection-control-mode.basic { color:#dc9b57; }
-    .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer):hover { color:#e8eee9; }
     #usageButton > span { flex:1; }
+    #announcementTitle { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     #usageSummary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
     #returnToComputer { margin-top:0; }
     .usage-heading { display:flex; align-items:center; justify-content:space-between; }
@@ -544,13 +559,12 @@
     .usage-dialog-close { width:32px; height:32px; padding:0; border:0; background:transparent; font-size:20px; }
     #usageRows { display:grid; gap:9px; min-height:18px; color:#aeb9b2; font-size:12px; }
     @media (prefers-color-scheme:light) {
-      .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer) { color:#596c60; }
-      .embedded-client #archivedThreads { border-top-color:#17212b18; }
-      .embedded-client #archivedThreads[hidden] + #usageButton { border-top-color:#17212b18; }
-      .embedded-client .shared-service-notice:not([hidden]) { color:#8b5318; background:#d8994914; border-color:#b66b2c45; }
-      .embedded-client .shared-service-notice .shared-service-copy > span,
-      .embedded-client .shared-service-notice > .codex-icon { color:#76512c; }
-      .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer):hover { color:#17212b; }
+      .embedded-terminal :is(#connectionSettings, #usageButton, #announcementButton, #archivedThreads, #returnToComputer) { color:#596c60; }
+      .embedded-terminal #archivedThreads { border-top-color:#17212b18; }
+      .embedded-terminal #archivedThreads[hidden] + #usageButton { border-top-color:#17212b18; }
+      .embedded-terminal .shared-service-notice:not([hidden]) { color:#8b5318; background:#d8994914; border-color:#b66b2c45; }
+      .embedded-terminal .shared-service-notice .shared-service-copy > span,
+      .embedded-terminal .shared-service-notice > .codex-icon { color:#76512c; }
       .composer-add-menu { color:#34443a; background:#f5f7f5; border-color:#d5ddd8; box-shadow:0 10px 28px #17212b24; }
       .file-action-menu { color:#17212b; background:#fff; border-color:#cfd8d2; box-shadow:0 10px 28px #17212b24; }
       .file-action-name { color:#65736a; border-color:#dce3df; }
@@ -568,34 +582,42 @@
     #wideSidebarToggle, #wideSidebarExpand { display:none; }
     #wideSidebarToggle .codex-icon, #wideSidebarExpand .codex-icon { width:24px; height:24px; stroke-width:1.8; }
     #wideSidebarToggle:hover, #wideSidebarExpand:hover { background:color-mix(in srgb, currentColor 8%, transparent); }
-    .embedded-client #voice[aria-pressed="true"] { width:26px; height:26px; margin-inline:3px; color:#ef6868; background:#ef686814; box-shadow:inset 0 0 0 1px #ef686899; }
-    .embedded-client #voice[aria-pressed="true"] .codex-icon { width:16px; height:16px; }
+    .embedded-terminal #voice[aria-pressed="true"] { width:26px; height:26px; margin-inline:3px; color:#ef6868; background:#ef686814; box-shadow:inset 0 0 0 1px #ef686899; }
+    .embedded-terminal #voice[aria-pressed="true"] .codex-icon { width:16px; height:16px; }
     @media (max-width:760px) {
-      .embedded-client main { position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
-      .embedded-client aside { display:none; position:absolute; inset:0 auto 0 0; width:min(90%,320px); z-index:20; box-shadow:12px 0 30px #0008; }
-      .embedded-client.sidebar-open aside { display:flex; }
-      .embedded-client.sidebar-open #sidebarBackdrop { display:block; position:absolute; inset:0; z-index:19; background:#0008; border:0; border-radius:0; }
-      .embedded-client section { padding:8px 12px; }
-      .embedded-client .selected-heading { min-width:0; }
-      .embedded-client textarea { font-size:16px; }
-      .embedded-client #prompt { font-size:13px; }
-    }
-    @media (min-width:600px) {
-      .embedded-client #wideSidebarToggle { display:grid; place-items:center; flex:none; align-self:center; width:40px; height:40px; padding:8px; border:0; background:transparent; color:inherit; }
-      .embedded-client.sidebar-collapsed main { grid-template-columns:minmax(0,1fr); }
-      .embedded-client.sidebar-collapsed aside { display:none; }
-      .embedded-client.sidebar-collapsed #wideSidebarExpand { display:grid; place-items:center; position:absolute; top:2px; left:8px; width:32px; height:28px; padding:2px; border:0; background:transparent; color:inherit; z-index:9; }
-      .embedded-client.sidebar-collapsed .selected-heading { padding-left:36px; }
-      .embedded-client section { padding-top:2px; }
-      .embedded-client.native-layout .selected-heading { display:flex; }
-      .embedded-client.native-layout #selectedTitle { flex:1; }
-      .embedded-client main { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows:minmax(0,1fr); }
-      .embedded-client aside { display:flex; position:static; width:auto; box-shadow:none; border-right:1px solid #2c3830; border-bottom:0; }
-      .embedded-client.sidebar-open #sidebarBackdrop { display:none; }
+      .embedded-terminal main { position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
+      .embedded-terminal aside { display:none; position:absolute; inset:0 auto 0 0; width:min(90%,var(--terminal-sidebar-width)); z-index:20; box-shadow:12px 0 30px #0008; }
+      .embedded-terminal.sidebar-open aside { display:flex; }
+      .embedded-terminal.sidebar-open #sidebarBackdrop { display:block; position:absolute; inset:0; z-index:19; background:#0008; border:0; border-radius:0; }
+      .embedded-terminal section { padding:8px 12px; }
+      .embedded-terminal .selected-heading { min-width:0; }
+      .embedded-terminal textarea { font-size:16px; }
+      .embedded-terminal #prompt { font-size:13px; }
+    }
+    @media (max-width:599px) {
+      .embedded-terminal .terminal-chat-header { display:flex; position:absolute; z-index:9; inset:0 0 auto; height:40px; align-items:center; background:#101311; }
+      .embedded-terminal #terminalSidebarToggle { display:grid; place-items:center; width:48px; height:40px; flex:none; border:0; padding:8px 12px; color:inherit; background:transparent; }
+      .embedded-terminal #terminalSidebarToggle .codex-icon { width:28px; height:28px; stroke-width:2; }
+      .embedded-terminal #terminalChatTitle { position:absolute; left:56px; right:56px; overflow:hidden; font-size:15px; font-weight:700; text-align:center; text-overflow:ellipsis; white-space:nowrap; touch-action:manipulation; user-select:none; }
+      .embedded-terminal .selected-heading { display:none; }
+      .embedded-terminal section { padding-top:48px; }
+      .embedded-terminal.sidebar-open #wideSidebarToggle { display:grid; place-items:center; flex:none; align-self:center; width:40px; height:40px; padding:8px; border:0; background:transparent; color:inherit; }
+    }
+    @media (min-width:600px) {
+      .embedded-terminal #wideSidebarToggle { display:grid; place-items:center; flex:none; align-self:center; width:40px; height:40px; padding:8px; border:0; background:transparent; color:inherit; }
+      .embedded-terminal.sidebar-collapsed main { grid-template-columns:minmax(0,1fr); }
+      .embedded-terminal.sidebar-collapsed aside { display:none; }
+      .embedded-terminal.sidebar-collapsed #wideSidebarExpand { display:grid; place-items:center; position:absolute; top:2px; left:8px; width:32px; height:28px; padding:2px; border:0; background:transparent; color:inherit; z-index:9; }
+      .embedded-terminal.sidebar-collapsed .selected-heading { padding-left:36px; }
+      .embedded-terminal section { padding-top:2px; }
+      .embedded-terminal main { grid-template-columns:var(--terminal-sidebar-width) minmax(0, 1fr); grid-template-rows:minmax(0,1fr); }
+      .embedded-terminal aside { display:flex; position:static; width:auto; box-shadow:none; border-right:1px solid #2c3830; border-bottom:0; }
+      .embedded-terminal.sidebar-open #sidebarBackdrop { display:none; }
     }
     @media (prefers-color-scheme: light) {
-      :root { color-scheme:light; background:#f5f7fa; color:#17212b; }
-      body, body.embedded-client { background:#f5f7fa; }
+      :root { color-scheme:light; background:#f5f7fa; color:#17212b; }
+      body, body.embedded-terminal { background:#f5f7fa; }
+      .embedded-terminal .terminal-chat-header { background:#f5f7fa; }
       aside, .composer, .model-menu, .new-thread-project { background:#fff; border-color:#d5ddd8; color:#17212b; }
       button, select, textarea { color:#17212b; }
       button { background:#eef2ef; border-color:#ccd6ce; }
@@ -625,7 +647,7 @@
       .message-body .hljs-addition { color:#2f7444; background:#78b98a24; }
       .message-body .hljs-deletion { color:#a23d3d; background:#d77a7a24; }
       .message-body a, .process.running > summary { color:#167343; }
-      .activity, .activity-icon, .live-step, .reasoning-history, .turn-label, .turn-duration,
+      .activity, .activity-icon, .live-step, .turn-label, .turn-duration,
       .process > summary, .active-process > summary, .settled-process > summary,
       .toolbar, .refresh-icon, .project-folder, .project-action, .disclosure-chevron,
       .sub, .status, #empty, .pending-settings, .menu-title, .menu-hint, .model-option small, .chevron { color:#596c60; }
@@ -663,18 +685,26 @@
       .permission-option:hover, .permission-trigger:hover, .permission-trigger[aria-expanded="true"] { background:#00000008; }
       .permission-trigger.full-access, .permission-option[data-permission="full"], .permission-option[data-permission="full"] small { color:#bd5b16; }
       .attachment { color:#44564b; border-color:#b7c9be; }
-      .image-viewer-close { color:#fff; background:#101311cc; }
+      .image-viewer-close, .image-viewer-original, .image-viewer-download { color:#fff; background:#101311cc; }
     }
   
 
-    #connectionEntry { display:none; }
-    body.connection-entry > header, body.connection-entry > main { display:none; }
-    body.connection-entry #connectionEntry { display:flex; flex:1; align-items:center; justify-content:center; padding:24px; overflow:auto; }
-    .connection-entry-card { width:100%; max-width:420px; }
-    .connection-entry-card h1 { font-size:24px; }
-    #entryMode { opacity:.65; }
-    #entryStatus { white-space:pre-wrap; overflow-wrap:anywhere; }
-    .connection-entry-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
+    #connectionEntry { display:none; }
+    body.connection-entry > header, body.connection-entry > main { display:none; }
+    body.connection-entry #connectionEntry { display:flex; flex:1; min-height:0; overflow:hidden; }
+    .connection-entry-page { display:flex; flex-direction:column; width:100%; min-height:100%; }
+    .connection-entry-header { display:flex; flex:none; align-items:center; width:100%; height:52px; padding:0 8px; }
+    .connection-entry-header h1 { flex:1; margin:0; text-align:center; font-size:18px; font-weight:600; }
+    .connection-entry-back, .connection-entry-header-spacer { width:40px; height:40px; flex:none; }
+    .connection-entry-back { display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:transparent; color:inherit; }
+    .connection-entry-back:active { background:#ffffff12; }
+    .connection-entry-back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
+    .connection-entry-content { display:flex; flex:1; min-height:0; align-items:center; justify-content:center; padding:24px; overflow:auto; }
+    .connection-entry-card { width:100%; max-width:420px; }
+    .entry-connection-mode { display:flex; align-items:baseline; gap:10px; margin:0 0 20px; }
+    .entry-connection-mode span { font-size:12px; opacity:.58; }
+    .entry-connection-mode strong { font-size:16px; font-weight:600; }
+    .connection-entry-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
 
     #externalUiOption { align-items:center; justify-content:flex-start; gap:8px; flex-shrink:0; padding:8px; font-size:12px; color:var(--muted, #94a79a); }
     #externalUiOption:not([hidden]) { display:flex; }
@@ -689,26 +719,38 @@
     .model-menu[data-loading="true"] .menu-view { visibility:hidden; }
     .model-menu[data-loading="true"]::before { content:"正在读取模型设置…"; position:absolute; inset:0; display:grid; place-items:center; font-size:13px; color:inherit; }
 
-    .entry-brand { font-size:12px; letter-spacing:.08em; opacity:.65; }
-    .connection-entry-card { padding:24px; border:1px solid #ffffff18; border-radius:20px; background:#ffffff05; }
-    .connection-entry-card h1 { margin:10px 0; }
-    .entry-steps { display:flex; gap:8px; padding:0; margin:24px 0; list-style:none; }
-    .entry-steps[hidden] { display:none; }
-    .entry-steps li { flex:1; padding-top:10px; border-top:3px solid #7e898544; font-size:11px; opacity:.5; }
-    .entry-steps li[data-state="current"] { border-color:#55bf8b; opacity:1; }
-    .entry-steps li[data-state="done"] { border-color:#55bf8b; opacity:.7; }
-    .entry-progress { display:flex; align-items:flex-start; gap:12px; margin-top:24px; min-height:94px; }
-    .entry-indicator { flex:none; width:18px; height:18px; margin-top:3px; border:2px solid #7e898544; border-top-color:#55bf8b; border-radius:50%; animation:entry-spin 1s linear infinite; }
-    #entryStatus { margin:0 0 8px; font-size:16px; font-weight:600; }
-    #entryDetail { margin:0; font-size:13px; line-height:1.7; opacity:.7; overflow-wrap:anywhere; }
-    .entry-progress[data-state="error"] .entry-indicator { animation:none; border-color:#e58a78; }
-    .connection-entry-actions button { min-height:42px; }
+    .connection-entry-card { padding:8px 18px 24px; }
+    .entry-diagram { display:flex; width:100%; align-items:flex-start; margin:8px 0 28px; color:#3f5349; }
+    .entry-diagram-node { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:4px; }
+    .entry-diagram-node > svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+    .entry-diagram-node > span { min-height:24px; max-width:92px; font-size:10px; line-height:12px; text-align:center; opacity:.72; }
+    .entry-diagram-link { flex:none; width:26px; height:10px; margin-top:8px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+    .entry-diagram-middle > svg { display:none; }
+    .entry-diagram[data-mode="lan"] [data-route="lan"],
+    .entry-diagram[data-mode="private"] [data-route="private"],
+    .entry-diagram[data-mode="official"] [data-route="official"] { display:block; }
+    .entry-steps { display:flex; flex-direction:column; gap:0; padding:0; margin:0; list-style:none; }
+    .entry-steps li { position:relative; min-height:44px; padding:0 0 16px 34px; font-size:13px; line-height:20px; opacity:.46; }
+    .entry-steps li::before { content:attr(data-number); position:absolute; left:0; top:0; display:grid; width:22px; height:22px; place-items:center; border:1px solid #7e898566; border-radius:50%; font-size:10px; }
+    .entry-steps li:not(:last-child)::after { content:""; position:absolute; left:11px; top:23px; bottom:1px; width:1px; background:#7e898544; }
+    .entry-steps li[data-state="current"] { color:inherit; opacity:1; font-weight:600; }
+    .entry-steps li[data-state="current"]::before { content:""; box-sizing:border-box; border:2px solid #7e898544; border-top-color:#55bf8b; animation:entry-spin 1s linear infinite; }
+    .entry-steps li[data-state="done"] { opacity:.72; }
+    .entry-steps li[data-state="done"]::before { content:"✓"; border-color:#55bf8b; background:#55bf8b22; color:#55bf8b; }
+    .entry-steps li[data-state="done"]::after { background:#55bf8b88; }
+    .entry-steps li[data-state="error"] { color:#e58a78; opacity:1; font-weight:600; }
+    .entry-steps li[data-state="error"]::before { content:"!"; border-color:#e58a78; color:#e58a78; }
+    .entry-step-detail { display:block; margin-top:4px; color:inherit; font-size:12px; font-weight:400; line-height:1.55; opacity:.78; overflow-wrap:anywhere; }
+    .connection-entry-actions button { min-height:42px; flex:1 1 160px; }
     .diagnostic-overview { font-size:17px; font-weight:600; margin-bottom:0; }
     .diagnostic-hint { opacity:.7; line-height:1.6; }
     .usage-dialog details summary { cursor:pointer; padding:10px 0; }
     @keyframes entry-spin { to { transform:rotate(360deg); } }
-    @media(prefers-reduced-motion:reduce) { .entry-indicator { animation:none; } }
-    @media(prefers-color-scheme:light) { .connection-entry-card { background:#fff; border-color:#d5ddd8; } }
+    @media(prefers-reduced-motion:reduce) { .entry-steps li[data-state="current"]::before { animation:none; } }
+    @media(prefers-color-scheme:light) {
+      .connection-entry-back:active { background:#1f2c240d; }
+      .entry-diagram { color:#3f5349; }
+    }
 
     .approval-panel { flex: 0 1 auto; min-height: 0; max-height: 42vh; overflow-y: auto; padding: 8px 12px; border-top: 1px solid #45564b; }
     .approval-panel[hidden] { display: none; }