@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator.css

@@ -1,4 +1,4 @@
-/* 由 scripts/scope-css.mjs 从 operator-oss/app/globals.css 生成，勿手改（改了会被下次同步覆盖）。
+/* 由 scripts/scope-css.mjs 从 packages/cli-ui/src/operator.base.css 生成，勿手改（改了会被下次同步覆盖）。
    组件自己的补充样式在 src/styles.css。 */
 /* ==========================================================================
    Orchestrator — hi-fi app styling
@@ -45,6 +45,8 @@
 
   --grid:rgba(150,170,200,.05);
   --row-sel:rgba(150,170,200,.07);
+  --selection-bg:#15243a;
+  --selection-line:rgba(77,140,255,.28);
   --on-accent:#06070a;       /* ink on a filled accent/blue/green button */
   --topbar:rgba(8,10,14,.82);
 
@@ -112,6 +114,8 @@
 
   --grid:rgba(20,30,50,.045);
   --row-sel:rgba(20,23,28,.045);
+  --selection-bg:#eaf1fd;
+  --selection-line:rgba(31,95,214,.22);
   --on-accent:#ffffff;
   --topbar:rgba(244,241,234,.85);
 
@@ -128,6 +132,9 @@
 }
 
 .cli-ui, .cli-ui *{box-sizing:border-box;}
+/* Theme changes are atomic; hover/focus transitions resume after the new palette
+   has painted. Otherwise dark surfaces briefly swallow the new dark text. */
+.cli-ui html[data-theme-changing] *,.cli-ui html[data-theme-changing] *::before,.cli-ui html[data-theme-changing] *::after{transition:none!important;}
 .cli-ui{
   background:var(--bg);
   color:var(--ink);
@@ -280,7 +287,7 @@
 .cli-ui .proj:hover{background:var(--panel);}
 .cli-ui .proj.dragging{opacity:.4;}
 .cli-ui .proj.drag-over{box-shadow:inset 0 2px 0 var(--accent);}
-.cli-ui .proj.sel{background:var(--surface);box-shadow:var(--sh-1);}
+.cli-ui .proj.sel{background:var(--selection-bg);box-shadow:inset 0 0 0 1px var(--selection-line);}
 .cli-ui .proj.sel::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:3px;background:var(--accent);}
 .cli-ui .proj .pic{
   width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;position:relative;
@@ -321,7 +328,7 @@
 .cli-ui .settings-nav-foot{padding:10px 9px 4px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--ink-3);}
 .cli-ui .settings-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:14px 20px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface) 0%, var(--panel) 100%);}
 .cli-ui .settings-title{font-size:16px;font-weight:700;color:var(--ink);}
-.cli-ui .settings-body{padding:20px;max-width:680px;}
+.cli-ui .settings-body{padding:20px;max-width:680px;border:0;margin:0;min-width:0;width:100%;}
 .cli-ui .settings-body code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px;}
 .cli-ui .user-chip .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#C2603C,#D89A3A);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;}
 .cli-ui .user-chip .un{font-weight:600;font-size:13px;}
@@ -421,7 +428,7 @@
 .cli-ui .view-toggle{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;flex:0 0 auto;}
 .cli-ui .view-toggle button{display:flex;align-items:center;justify-content:center;width:27px;height:24px;background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:13px;transition:color .12s,background .12s;}
 .cli-ui .view-toggle button:hover{color:var(--ink);}
-.cli-ui .view-toggle button.on{background:var(--surface-2);color:var(--ink);}
+.cli-ui .view-toggle button.on{background:var(--selection-bg);color:var(--accent-ink);}
 
 /* full-workspace shell: board mode owns everything right of the sidebar */
 .cli-ui .board-ws{flex:1;min-width:0;background:var(--surface-2);position:relative;overflow:hidden;}
@@ -999,20 +1006,31 @@
 .cli-ui .err-note .btn{flex:0 0 auto;}
 
 /* composer */
-.cli-ui .composer{flex:0 0 auto;padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--surface);}
-.cli-ui .clear-confirm{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--ink-2);}
+.cli-ui .composer{flex:0 0 auto;padding:12px 20px 10px;background:var(--surface);container-type:inline-size;}
+.cli-ui .clear-confirm{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--ink-2);}
 .cli-ui .clear-confirm .spacer{flex:1;}
-@media(max-width:700px){.cli-ui .clear-confirm{flex-wrap:wrap;padding:9px 12px}.cli-ui .clear-confirm .job-cost-hint{width:100%;order:2}.cli-ui .clear-confirm .spacer{display:none}}
-.cli-ui .composer-inner{max-width:760px;margin:0 auto;position:relative;}
-.cli-ui .comp-box{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--raise);box-shadow:var(--sh-1);transition:border-color .12s,box-shadow .12s;overflow:hidden;}
-.cli-ui .comp-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
-.cli-ui .comp-area{display:flex;align-items:flex-end;gap:10px;padding:11px 12px 11px 15px;}
-.cli-ui .comp-area textarea{flex:1;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);max-height:160px;min-height:22px;}
+.cli-ui .composer-inner{max-width:800px;margin:0 auto;position:relative;}
+.cli-ui .comp-box{border:1px solid var(--line-strong);border-radius:24px;background:var(--raise);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;overflow:hidden;}
+.cli-ui .comp-box:focus-within{border-color:var(--ink-4);box-shadow:0 4px 24px rgba(0,0,0,.07);}
+.cli-ui .comp-area{padding:18px 20px 8px;}
+.cli-ui .comp-area textarea{display:block;width:100%;min-width:0;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);max-height:200px;min-height:62px;}
 .cli-ui .comp-area textarea::placeholder{color:var(--ink-4);}
-.cli-ui .send{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--sh-1);transition:filter .12s,opacity .12s;}
+.cli-ui .comp-toolbar{display:flex;align-items:center;gap:7px;padding:4px 12px 12px;min-width:0;}
+.cli-ui .comp-add{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:none;color:var(--ink-2);background:transparent;}
+.cli-ui .comp-add svg{width:22px;height:22px;}
+.cli-ui .comp-add:hover,.cli-ui .comp-setting:hover{background:var(--surface-2);}
+.cli-ui .comp-control{position:relative;min-width:0;}
+.cli-ui .comp-model{margin-left:auto;}
+.cli-ui .comp-setting{display:flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:6px 8px;border-radius:10px;color:var(--ink-2);background:transparent;font-size:12px;white-space:nowrap;}
+.cli-ui .comp-setting svg{width:14px;height:14px;}
+.cli-ui .comp-setting.elevated{color:var(--amber);}
+.cli-ui .comp-model-name{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
+.cli-ui .comp-reasoning{color:var(--ink-3);font-size:11px;}
+.cli-ui .comp-setting:disabled,.cli-ui .comp-add:disabled{opacity:.5;cursor:default;}
+.cli-ui .send{width:36px;height:36px;flex:none;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s;}
 .cli-ui .send:hover{filter:brightness(1.07);}
-.cli-ui .send:disabled{opacity:.4;cursor:default;filter:none;}
-.cli-ui .send.stop{background:var(--red);}
+.cli-ui .send:disabled{opacity:.35;cursor:default;filter:none;}
+.cli-ui .send.stop{background:var(--blue);color:#fff;}
 .cli-ui .send.stop svg{fill:currentColor;width:15px;height:15px;}
 /* mid-turn: queue button + stop button sit side by side */
 .cli-ui .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
@@ -1032,6 +1050,49 @@
 @container (max-width:560px){.cli-ui .comp-foot .comp-hint-extra{display:none;}}
 @container (max-width:420px){.cli-ui .comp-foot .hint .kbd{display:none;}.cli-ui .run-sw{max-width:130px;}}
 
+.cli-ui .send-group{display:flex;align-items:center;gap:6px;flex:none;}
+.cli-ui .send svg{width:19px;height:19px;}
+.cli-ui .comp-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;padding:8px 6px 0;font-size:10px;color:var(--ink-4);}
+.cli-ui .comp-caption button{display:flex;align-items:center;gap:4px;background:transparent;color:var(--ink-3);font-size:10px;}
+.cli-ui .comp-caption button:disabled{opacity:.45;cursor:default;}
+.cli-ui .comp-error,.cli-ui .control-error{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--red);overflow-wrap:anywhere;}
+.cli-ui .comp-upload-status{padding:6px 10px;font-size:11px;color:var(--ink-3);}
+.cli-ui .comp-quote{display:flex;align-items:flex-start;gap:10px;margin:12px 14px 0;padding:10px 12px;border-left:3px solid var(--accent);border-radius:5px 12px 12px 5px;background:var(--surface-2);font-size:12px;}
+.cli-ui .comp-quote>div{flex:1;min-width:0;}
+.cli-ui .comp-quote strong{font-weight:500;color:var(--ink-2);}
+.cli-ui .comp-quote p{margin:4px 0 0;color:var(--ink-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;white-space:pre-wrap;}
+.cli-ui .comp-quote .icon-btn{width:24px;height:24px;flex:none;}
+.cli-ui .hero-controls{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}
+.cli-ui .hero-controls .comp-model{margin-left:0;}
+.cli-ui .compact-chat{flex:1;}
+.cli-ui .compact-chat[hidden]{display:none;}
+.cli-ui .compact-session>.sess-rail{flex:1;}
+.cli-ui .compact-session .sess-head{flex-wrap:wrap;}
+.cli-ui .compact-session .sh-tools{flex-wrap:wrap;}
+.cli-ui .msg-actions{display:flex;margin-top:6px;}
+.cli-ui .msg-actions button{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;background:transparent;font-size:11px;color:var(--ink-4);}
+.cli-ui .msg-actions button:hover,.cli-ui .msg-actions button:focus-visible{background:var(--surface-2);color:var(--ink);}
+.cli-ui .msg-body{overflow-wrap:anywhere;min-width:0;}
+.cli-ui button.pop-item{width:100%;text-align:left;background:transparent;color:var(--ink);font:inherit;}
+.cli-ui button.pop-item:hover{background:var(--surface-2);}
+.cli-ui .pop-item .pi-sub{display:block;}
+.cli-ui .pop-item:disabled{opacity:.5;cursor:default;}
+.cli-ui .popover{max-width:calc(100vw - 16px);overscroll-behavior:contain;}
+.cli-ui .composer button:focus-visible,.cli-ui .msg-actions button:focus-visible,.cli-ui .popover button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
+@container (max-width:420px){
+  .cli-ui .comp-toolbar{flex-wrap:wrap;gap:4px;padding:4px 10px 10px;}
+  .cli-ui .comp-setting{font-size:11px;padding:5px;gap:4px;}
+  .cli-ui .comp-model-name{max-width:145px;}
+  .cli-ui .comp-area{padding:14px 16px 6px;}
+  .cli-ui .comp-caption{font-size:9px;}
+}
+@container (max-width:310px){
+  .cli-ui .comp-control:has(.permission){flex:1;}
+  .cli-ui .comp-model{margin-left:0;flex:1;}
+  .cli-ui .comp-model-name{max-width:120px;}
+  .cli-ui .comp-toolbar>.send-group{margin-left:auto;}
+}
+
 /* image attachments — composer chips + drop state */
 .cli-ui .comp-box.dropping{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
 .cli-ui .attach-row{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 0;}
@@ -1392,7 +1453,7 @@
      the home indicator. The keyboard hints are mouse-era noise on a phone. */
   .cli-ui .app.mobile .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom));}
   .cli-ui .app.mobile .comp-area textarea{font-size:16px;}
-  .cli-ui .app.mobile .comp-foot{display:none;}
+  .cli-ui .app.mobile .comp-caption>span{display:none;}
   .cli-ui .app.mobile .send{width:40px;height:40px;}
 
   /* Ask card options are tap targets — give them room. */
@@ -1626,3 +1687,112 @@
 .cli-ui .bp-logins-name{flex:1;min-width:0;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cli-ui .bp-ok{border:1px solid var(--green);background:var(--green-soft);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;line-height:1.6;}
 .cli-ui .bp-kept{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2);}
+
+/* Keep usable chat width even when persisted sidebar widths exceed the window. */
+.cli-ui .body:not(.mobile)>.col-projects{max-width:24vw;}
+.cli-ui .body:not(.mobile)>.col-tasks{max-width:30vw;}
+.cli-ui .compact-session .sh-main{overflow:hidden;}
+.cli-ui .compact-session .crumb{flex-wrap:wrap;}
+.cli-ui .compact-session .sh-tools{min-width:0;max-width:100%;}
+.cli-ui .compact-session .viewseg{flex-shrink:0;}
+
+.cli-ui .popover .pop-custom-row input{min-width:0;}
+.cli-ui .popover .pop-item>span:first-child{min-width:0;overflow-wrap:anywhere;}
+
+@media(max-width:760px){
+  .cli-ui .app.mobile .sh-main{flex:1 1 0;order:0;}
+  .cli-ui .app.mobile .sess-head{padding:10px 12px;gap:8px;}
+  .cli-ui .app.mobile .tb-right{gap:6px;}
+  .cli-ui .app.mobile .needs-you-pill{white-space:nowrap;flex-shrink:0;font-size:11px;}
+  .cli-ui .app.mobile .tb-avatar{display:none;}
+}
+@media(max-width:420px){.cli-ui .app.mobile .tb-word{display:none;}}
+
+/* Chat navigation: a quiet title row, a separate view switch and contextual actions. */
+.cli-ui .sess-head{padding:14px 22px;gap:12px;flex-wrap:nowrap;}
+.cli-ui .sess-head .sh-main{min-width:0;}
+.cli-ui .sess-head .sh-title{font-size:18px;font-weight:600;}
+.cli-ui .session-project-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .sess-head .sh-tools{gap:8px;flex-wrap:nowrap;flex-shrink:0;}
+.cli-ui .session-more{width:32px;height:32px;}
+.cli-ui .session-viewbar{display:flex;align-items:center;gap:16px;min-height:42px;padding:0 22px;border-bottom:1px solid var(--line-2);}
+.cli-ui .session-agent-label{color:var(--ink-3);font-size:12px;}
+.cli-ui .session-branch{margin-left:auto;min-width:0;display:flex;align-items:center;gap:6px;color:var(--ink-4);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .session-viewbar .viewseg{flex-shrink:0;}
+.cli-ui .compact-session .sh-tools{flex-wrap:nowrap;}
+.cli-ui .composer{padding:16px 24px 12px;}
+.cli-ui .comp-box{border-radius:22px;}
+.cli-ui .comp-area{padding:18px 20px 10px;}
+.cli-ui .comp-toolbar{padding:4px 14px 12px;}
+.cli-ui .comp-setting{font-size:13px;}
+.cli-ui .comp-caption{font-size:11px;padding-top:9px;}
+.cli-ui .comp-caption button{font-size:11px;}
+.cli-ui .transcript .tw{max-width:800px;}
+.cli-ui .task-origin{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
+.cli-ui .fork-sources>span{max-width:100%;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere;}
+.cli-ui .fork-sources button{display:grid;place-items:center;color:var(--ink-3);background:transparent;flex-shrink:0;}
+.cli-ui .mention-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:30;max-height:min(320px,45vh);overflow:auto;border:1px solid var(--line-strong);border-radius:14px;background:var(--raise);box-shadow:var(--sh-3);}
+.cli-ui .mention-heading{position:sticky;top:0;display:flex;justify-content:space-between;padding:12px 14px;font-size:11px;color:var(--ink-3);background:var(--raise);border-bottom:1px solid var(--line);}
+.cli-ui .mention-menu>p{padding:14px;font-size:12px;color:var(--ink-3);line-height:1.6;}
+.cli-ui .mention-menu>button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:left;color:var(--ink);background:transparent;}
+.cli-ui .mention-menu>button:hover,.cli-ui .mention-menu>button[aria-selected=true]{background:var(--accent-soft);}
+.cli-ui .mention-menu>button>span{flex:1;min-width:0;}
+.cli-ui .mention-menu strong,.cli-ui .mention-menu small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .mention-menu strong{font-size:13px;font-weight:500;}
+.cli-ui .mention-menu small{font-size:10px;color:var(--ink-3);margin-top:4px;}
+.cli-ui .branch-nav{margin:28px 0 24px;min-width:0;}
+.cli-ui .branch-ending{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--ink-3);font-size:11px;}
+.cli-ui .branch-ending::before,.cli-ui .branch-ending::after{content:"";height:1px;flex:1;background:var(--line-strong);}
+.cli-ui .branch-nav-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;color:var(--ink-2);}
+.cli-ui .branch-nav-head>span:first-child{display:flex;gap:6px;align-items:center;}
+.cli-ui .branch-nav-hint{margin-left:auto;font-size:10px;color:var(--ink-4);}
+.cli-ui .branch-nav-head .icon-btn{width:28px;height:28px;}
+.cli-ui .branch-cards{display:flex;gap:10px;overflow-x:auto;padding:1px 1px 5px;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain;}
+.cli-ui .branch-card{display:flex;flex-direction:column;gap:7px;flex:0 0 calc((100% - 10px)/2);min-width:148px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);scroll-snap-align:start;}
+.cli-ui .branch-card:only-child{flex-basis:100%;}
+.cli-ui .branch-card:hover{border-color:var(--line-strong);background:var(--row-sel);}
+.cli-ui .branch-card.selected{border-color:var(--accent);background:var(--accent-soft);}
+.cli-ui .branch-card-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--ink-3);}
+.cli-ui .branch-card.selected .branch-card-meta{color:var(--accent);}
+.cli-ui .branch-card strong{font-size:13px;font-weight:500;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
+.cli-ui .branch-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--ink-3);}
+.cli-ui .flow-task-heading{display:flex;flex-direction:column;gap:6px;margin:4px 0 20px;}
+.cli-ui .flow-task-heading>span{font-size:10px;color:var(--ink-3);}
+.cli-ui .flow-task-heading strong,.cli-ui .flow-task-heading button{font-size:14px;font-weight:600;color:var(--ink);text-align:left;overflow-wrap:anywhere;}
+.cli-ui .flow-task-heading button{background:transparent;align-self:flex-start;}
+.cli-ui .flow-task-heading button:hover{color:var(--accent);}
+.cli-ui .flow-task-heading.current{border-left:2px solid var(--accent);padding-left:12px;}
+.cli-ui .flow-history-note{padding:12px;background:var(--surface-2);border-radius:8px;font-size:12px;color:var(--ink-3);line-height:1.6;}
+.cli-ui .flow-history-note pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;max-height:240px;overflow:auto;}
+.cli-ui .flow-history-note summary{cursor:pointer;margin-top:8px;}
+.cli-ui .fork-merge-note{padding:12px 16px;color:var(--ink-3);font-size:11px;line-height:1.6;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere;}
+.cli-ui .sess-responsive{flex:1;min-height:0;display:flex;flex-direction:column;}
+.cli-ui .sess-responsive>.sess-rail{flex:1;}
+@media(max-width:760px){
+
+  .cli-ui .app.mobile .tb-word{display:inline;font-size:12px;}
+  .cli-ui .app.mobile .titlebar{height:calc(44px + env(safe-area-inset-top));}
+  .cli-ui .app.mobile .workspace-menu{width:36px;height:36px;}
+  .cli-ui .app.mobile .sess-head{padding:10px 12px;gap:8px;flex-wrap:nowrap;}
+  .cli-ui .app.mobile .sh-main{flex:1;order:0;min-width:0;}
+  .cli-ui .app.mobile .sh-tools{order:0;flex:0 0 auto;overflow:visible;padding:0;}
+  .cli-ui .app.mobile .sh-title{font-size:16px;}
+  .cli-ui .app.mobile .sh-edit{display:none;}
+  .cli-ui .app.mobile .crumb{font-size:10px;flex-wrap:nowrap;}
+  .cli-ui .app.mobile .mobile-back{width:28px;height:32px;}
+  .cli-ui .app.mobile .status-ctl{padding:0 7px;height:30px;font-size:10px;gap:4px;}
+  .cli-ui .app.mobile .session-more{width:28px;height:32px;}
+  .cli-ui .app.mobile .session-viewbar{padding:0 14px;gap:8px;min-height:40px;}
+  .cli-ui .app.mobile .session-branch{font-size:9px;}
+  .cli-ui .app.mobile .branch-nav{margin:24px 0 20px;}
+  .cli-ui .app.mobile .branch-card{padding:10px;}
+  .cli-ui .app.mobile .branch-nav-hint{display:none;}
+  .cli-ui .app.mobile .comp-setting{font-size:11px;}
+}
+
+/* The responsive shell always owns all remaining vertical space. */
+.cli-ui .sess-responsive>.sess-main{flex:1;min-height:0;display:flex;flex-direction:column;}
+.cli-ui .sess-responsive>.sess-main[hidden]{display:none;}
+
+@media(max-width:760px){.cli-ui .app.mobile .tb-icon:not(.workspace-menu){display:none;}}

package/src/styles.css

@@ -304,3 +304,23 @@ cli-split{display:block;}
 .cli-ui .cli-fv-md pre,.cli-ui .cli-fv-md table{overflow-wrap:normal;}
 .cli-ui .cli-refs.cli-ctxs+.cli-refs{padding-top:4px;}
 .cli-ui .cli-ref.ctx{padding-right:9px;background:var(--surface-2);border-color:var(--line-2);}
+
+/* Shared panel controls never shrink the active content or overflow narrow rails. */
+.cli-ui .cli-panel-controls{position:relative;flex:none;}
+.cli-ui .rail-tabs-scroll{min-width:0;}
+.cli-ui .cli-board-empty{padding:24px 16px;color:var(--ink-3);font-size:13px;line-height:1.6;}
+.cli-ui .operator-file-tabs{display:flex;flex:1;min-width:0;overflow-x:auto;align-items:center;scrollbar-width:thin;}
+
+/* Keep browser controls readable in a narrow desktop rail and on phones. */
+.cli-ui .prev-actions.bp-actions{display:flex;flex-wrap:wrap;gap:8px;}
+.cli-ui .prev-actions.bp-actions>.btn{flex:0 0 auto;white-space:nowrap;min-width:0;}
+.cli-ui .prev-actions.bp-actions>span{min-width:0;}
+
+.cli-ui .cli-board-background{display:flex;align-items:flex-start;gap:10px;margin:0 14px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;min-width:0;}
+.cli-ui .cli-board-background details{flex:1;min-width:0;overflow-wrap:anywhere;}
+.cli-ui .cli-board-background summary{cursor:pointer;}
+.cli-ui .cli-board-background label{display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer;}
+.cli-ui .cli-board-background ul{padding-left:18px;max-height:150px;overflow:auto;}
+
+.cli-ui .cli-auto-background{font-size:12px;color:var(--muted);margin-top:8px;}
+.cli-ui .cli-auto-background pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;}

package/src/ui/Markdown.tsx

@@ -2,7 +2,7 @@ import { memo, useContext, type ComponentProps, type MouseEvent } from "react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
-import { FileLinkContext, FileOpenContext, localFilePath } from "./fileLinks.js";
+import { FileLinkContext, FileOpenContext, inlineFilePath, localFilePath } from "./fileLinks";
 
 // 渲染 Agent 的 markdown 输出：标题、列表、表格、带语言的代码块（高亮）、行内代码、链接。
 // 与 Operator 的 Markdown.tsx 一致：只高亮写明语言的代码块（自动识别在流式输出时很耗），
@@ -24,6 +24,11 @@ function MdLink({ href, children, ...props }: ComponentProps<"a">) {
   return <a {...props} href={href} target="_blank" rel="noreferrer">{children}</a>;
 }
 
+function MdCode({children, ...props}: ComponentProps<"code">) {
+  const path=inlineFilePath(children);
+  return path ? <MdLink href={path}><code {...props}>{children}</code></MdLink> : <code {...props}>{children}</code>;
+}
+
 function MdImg({ src, alt, ...props }: ComponentProps<"img">) {
   const resolve = useContext(FileLinkContext);
   const local = typeof src === "string" ? localFilePath(src) : null;
@@ -45,7 +50,7 @@ export const Markdown = memo(function Markdown({ children }: { children: string
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
-        components={{ a: MdLink, img: MdImg }}
+        components={{ a: MdLink, img: MdImg, code: MdCode }}
         urlTransform={urlTransform}
       >
         {children}

package/src/ui/Popover.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+export function Popover({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+  const markerRef = useRef<HTMLSpanElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const anchor = markerRef.current?.parentElement;
+    const menu = menuRef.current;
+    if (!anchor || !menu) return;
+    const place = () => {
+      const r = anchor.getBoundingClientRect();
+      const vv = window.visualViewport;
+      const topEdge = vv?.offsetTop ?? 0;
+      const vh = vv?.height ?? window.innerHeight;
+      const vw = window.innerWidth;
+      menu.style.maxHeight = `${Math.max(100, vh - 24)}px`;
+      const mw = menu.offsetWidth, mh = menu.offsetHeight;
+      const left = Math.max(8, Math.min(r.right - mw, vw - mw - 8));
+      const below = r.bottom + 6;
+      const top = below + mh <= topEdge + vh - 8 ? below : Math.max(topEdge + 8, r.top - mh - 6);
+      setPos({ top, left });
+    };
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(menu);
+    window.addEventListener("resize", place);
+    window.visualViewport?.addEventListener("resize", place);
+    return () => { observer.disconnect(); window.removeEventListener("resize", place); window.visualViewport?.removeEventListener("resize", place); };
+  }, []);
+
+  const placed = pos !== null;
+  useEffect(() => {
+    if (placed) menuRef.current?.querySelector<HTMLElement>("button:not(:disabled),input:not(:disabled),[tabindex='0']")?.focus({ preventScroll: true });
+  }, [placed]);
+
+  useEffect(() => {
+    const close = (e: PointerEvent) => {
+      if (!menuRef.current?.contains(e.target as Node) && !markerRef.current?.parentElement?.contains(e.target as Node)) onClose();
+    };
+    const onScroll = (e: Event) => { if (!menuRef.current?.contains(e.target as Node)) onClose(); };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault(); e.stopPropagation(); onClose();
+        markerRef.current?.parentElement?.querySelector<HTMLButtonElement>("button")?.focus();
+      }
+      if (e.key === "Tab") {
+        const items = Array.from(menuRef.current?.querySelectorAll<HTMLElement>("button:not(:disabled),input:not(:disabled),a[href],[tabindex='0']") ?? []);
+        if (!items.length) return;
+        if (e.shiftKey && document.activeElement === items[0]) { e.preventDefault(); items.at(-1)?.focus(); }
+        else if (!e.shiftKey && document.activeElement === items.at(-1)) { e.preventDefault(); items[0].focus(); }
+      }
+    };
+    window.addEventListener("pointerdown", close, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("keydown", onKey, true);
+    return () => { window.removeEventListener("pointerdown", close, true); window.removeEventListener("scroll", onScroll, true); window.removeEventListener("keydown", onKey, true); };
+  }, [onClose]);
+
+  return (
+    <>
+      <span ref={markerRef} style={{ display: "none" }} />
+      {createPortal(
+        <div className="cli-ui" data-theme={markerRef.current?.closest("[data-theme]")?.getAttribute("data-theme") ?? "dark"}><div
+          ref={menuRef}
+          className="popover" role="dialog" aria-label="选项"
+          style={{ position: "fixed", top: pos?.top ?? -9999, left: pos?.left ?? -9999, right: "auto", visibility: pos ? "visible" : "hidden" }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div></div>,
+        document.body,
+      )}
+    </>
+  );
+}

package/src/ui/TextBlock.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from "react";
-import { charCount, type TextBlock } from "../core/blocks.js";
-import { fmtCount } from "./format.js";
-import { Icon } from "./icons.js";
+import { charCount, type TextBlock } from "../core/blocks";
+import { fmtCount } from "./format";
+import { Icon } from "./icons";
 
 /** 展开后一次最多渲染这么多字；更长的再点「显示全部」，避免一次塞几十万字进 DOM。 */
 const EXPANDED_STEP = 20_000;

package/src/ui/Transcript.tsx

@@ -1,14 +1,14 @@
 // 转录里的一行。移植自 operator-oss/app/orchestrator/Transcript.tsx，类名、结构、文案保持一致；
 // 去掉了对话任务用不到的部分（/clear、重新登录、浏览器交还……这些动作 center 不提供）。
 import { memo, useState } from "react";
-import type { AskAnswers, AskQuestion, InputRequest, Msg, ToolData, ToolPeek } from "../core/types.js";
-import { splitMessage } from "../core/blocks.js";
-import { Icon } from "./icons.js";
-import { Markdown } from "./Markdown.js";
-import { clockTime, diffCls, splitAttachments, type MsgAttachment } from "./format.js";
-import { Avatar } from "./shared.js";
-import { toolDataOf } from "./transcriptModel.js";
-import { TextBlockCard, isLongMessage } from "./TextBlock.js";
+import type { AskAnswers, AskQuestion, InputRequest, Msg, ToolData, ToolPeek } from "../core/types";
+import { splitMessage } from "../core/blocks";
+import { Icon } from "./icons";
+import { Markdown } from "./Markdown";
+import { clockTime, diffCls, splitAttachments, type MsgAttachment } from "./format";
+import { Avatar } from "./shared";
+import { toolDataOf } from "./transcriptModel";
+import { TextBlockCard, isLongMessage } from "./TextBlock";
 
 // Operator 写进转录的几类系统提示（取开头一段做匹配）：按「上下文超限」那种醒目样式显示。
 const LOUD_NOTICES = [
@@ -319,6 +319,7 @@ export interface MessageViewOptions {
 const DEFAULT_VIEW: MessageViewOptions = { timestamps: true, initialBadge: true, userLabel: "你", agentName: "智能体" };
 
 export interface MessageHandlers {
+  onQuote?: (msg:Msg,selected?:string)=>void;
   /** browser_ask_user 卡片提交（返回错误文案或 null）。后端不支持时不给，卡片只读。 */
   onInput?: (inputId: string, values: string[]) => Promise<string | null>;
   /** 「查看浏览器」：宿主有浏览器面板时给。 */
@@ -395,6 +396,7 @@ export const MessageView = memo(function MessageView({ m, initial: isInitial, hi
         {initial && <div className="initial-tag">{Icon.spark()} 已随项目上下文发送</div>}
         {isUser ? <UserBody content={m.content} attachmentUrl={handlers.attachmentUrl} viewing={view.viewingBlock} /> : m.content && <Markdown>{m.content}</Markdown>}
       </div>
+      {handlers.onQuote && m.content.trim() && <div className="msg-actions"><button aria-label="引用消息" title="引用消息或选中文字" onMouseDown={e=>e.preventDefault()} onClick={e=>{const selection=window.getSelection();const body=e.currentTarget.closest('.msg')?.querySelector('.msg-body');const selected=selection&&body?.contains(selection.anchorNode)&&body.contains(selection.focusNode)?selection.toString().trim():'';handlers.onQuote?.(m,selected||undefined);}}>{Icon.doc()} 引用</button></div>}
     </div>
   );
 });

package/src/ui/fileLinks.ts

@@ -44,3 +44,9 @@ export function localFilePath(href: string | undefined | null): string | null {
   if (h.startsWith("/") || WIN_ABS.test(h)) return WIN_ABS.test(h) ? h : normalize(h);
   return normalize(h);
 }
+
+/** File-shaped inline code is clickable; commands, models and code blocks remain code. */
+export function inlineFilePath(value: unknown): string | null {
+  if (typeof value !== 'string' || /\s/.test(value) || !/\.(?:md|markdown|txt|log|csv|tsv|json|ya?ml|toml|ini|xml|[cm]?[jt]sx?|css|scss|html?|py|sh|go|rs|java|c|cpp|h|pdf|png|jpe?g|gif|webp|svg|docx?|xlsx?|pptx?|zip)(?::\d+(?::\d+)?)?$/i.test(value)) return null;
+  return localFilePath(value);
+}

package/src/ui/format.ts

@@ -1,6 +1,6 @@
 // 格式化 / 推导小工具。规则与 Operator（operator-oss/app/orchestrator/format.ts）一致，
 // 只保留对话任务用得到的部分。
-import type { AskAnswers, AskQuestion, Msg } from "../core/types.js";
+import type { AskAnswers, AskQuestion, Msg } from "../core/types";
 
 // 紧凑 token 数：1234 → "1.2k"，1_200_000 → "1.2M"。
 export function fmtTokens(n: number): string {

package/src/ui/shared.tsx

@@ -1,6 +1,6 @@
 // 小部件：状态点、头像、智能体标签、骨架条。与 Operator 的 shared.tsx 同样的类名和规则。
 import type { CSSProperties } from "react";
-import { AgentMark, Icon } from "./icons.js";
+import { AgentMark, Icon } from "./icons";
 
 /** Operator 的状态色：r 未开始 · a 进行中 · h 搁置 · g 完成 · x 取消 · b 运行中（蓝，闪）· c 等你处理（珊瑚，闪）。 */
 export type DotCls = "r" | "a" | "h" | "g" | "x";

package/src/ui/transcriptModel.ts

@@ -1,7 +1,7 @@
 // 实时转录背后的纯函数（无 React，可单测）。规则与 Operator 的 transcriptModel.ts 一致：
 // 为长对话设计——成千上万条消息、几 MB 的工具输出。
-import type { Msg, ToolData } from "../core/types.js";
-import { buildSessions } from "./format.js";
+import type { Msg, ToolData } from "../core/types";
+import { buildSessions } from "./format";
 
 /** 跟随最新输出时 DOM 里保留的行数。 */
 export const RENDER_WINDOW = 120;