cli-jaw 2.17.41 → 2.17.42

package/public/manager/src/code/ProviderGlyph.tsx

@@ -0,0 +1,58 @@
+/**
+ * Runtime glyphs for the composer's icon-only runtime trigger.
+ *
+ * These are the same brand marks the Classic UI already ships in
+ * public/assets/providers (lobehub/icons-static-svg, plus Cursor's own brand
+ * kit); the path data is inlined here because the Manager bundle has no
+ * ?raw import convention and a test-time JSDOM render must not depend on one.
+ * Keep them in sync with that directory rather than redrawing them.
+ *
+ * The marks are decorative: the accessible name lives on the button that wraps
+ * them, never in the SVG.
+ */
+import type { CodeProviderId } from '../../../../src/code-mode/wire';
+
+type Glyph = { viewBox: string; d: string; rule?: 'evenodd' };
+const GLYPHS: Record<CodeProviderId, Glyph> = {
+    'codex-app': { viewBox: '0 0 24 24', rule: 'evenodd', d: 'M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z' },
+    claude: { viewBox: '0 0 24 24', rule: 'evenodd', d: 'M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z' },
+    cursor: { viewBox: '675 357 250 286', d: 'M920.015 424.958L805.919 359.086C802.256 356.97 797.735 356.97 794.071 359.086L679.981 424.958C676.901 426.736 675 430.025 675 433.587V566.419C675 569.981 676.901 573.269 679.981 575.048L794.077 640.92C797.74 643.036 802.261 643.036 805.925 640.92L920.02 575.048C923.1 573.269 925.001 569.981 925.001 566.419V433.587C925.001 430.025 923.1 426.736 920.02 424.958H920.015ZM912.848 438.911L802.706 629.682C801.961 630.968 799.995 630.443 799.995 628.954V504.039C799.995 501.543 798.662 499.234 796.498 497.981L688.321 435.526C687.036 434.781 687.561 432.816 689.05 432.816H909.334C912.462 432.816 914.417 436.206 912.853 438.917H912.848V438.911Z' },
+    grok: { viewBox: '0 0 24 24', rule: 'evenodd', d: 'M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815' },
+};
+
+export function ProviderGlyph({ provider }: { provider: CodeProviderId }) {
+    const glyph = GLYPHS[provider];
+    return <svg className="code-provider-glyph" viewBox={glyph.viewBox} width="16" height="16"
+        aria-hidden="true" focusable="false" fill="currentColor"
+        {...(glyph.rule ? { fillRule: 'evenodd' as const, clipRule: 'evenodd' as const } : {})}>
+        <path d={glyph.d} />
+    </svg>;
+}
+
+export function SendGlyph() {
+    return <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false">
+        <path d="M10 16V4.6M5.2 9.4 10 4.4l4.8 5" fill="none" stroke="currentColor"
+            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>;
+}
+
+export function StopGlyph() {
+    return <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false">
+        <rect x="6" y="6" width="8" height="8" rx="1.6" fill="currentColor" />
+    </svg>;
+}
+
+export function MicGlyph({ muted }: { muted?: boolean }) {
+    return <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false">
+        <path d="M10 3.6a2 2 0 0 1 2 2v4.2a2 2 0 0 1-4 0V5.6a2 2 0 0 1 2-2ZM5.4 9.6a4.6 4.6 0 0 0 9.2 0M10 14.4V16.4"
+            fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+        {muted && <path d="M4.6 4.6 15.4 15.4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />}
+    </svg>;
+}
+
+export function CheckGlyph() {
+    return <svg className="code-footer-check" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false">
+        <path d="m4.8 10.4 3.3 3.3 7.1-7.4" fill="none" stroke="currentColor" strokeWidth="1.8"
+            strokeLinecap="round" strokeLinejoin="round" />
+    </svg>;
+}

package/public/manager/src/code/code-composer.css

@@ -1,4 +1,10 @@
-/* Code composer dock and native session controls. */
+/* Code composer dock and native session controls.
+ *
+ * Geometry follows the composer grammar Codex-family desktop shells use, taken
+ * from the ZCode 3.3.4 bundle rather than guessed: a single 16px-radius shell
+ * with 12px padding and no shadow, 28px pill controls at radius 8px, a 28px
+ * icon submit, and 12px-radius dropups capped at 288px.
+ */
 
 .code-composer-dock {
     flex: 0 0 auto;
@@ -10,15 +16,15 @@
 }
 .code-composer-surface {
     display: grid;
-    gap: 7px;
+    gap: 12px;
     width: min(100%, 980px);
     margin: 0 auto;
-    padding: 8px;
-    border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, var(--accent));
-    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 16px;
     background: var(--bg-base);
-    box-shadow: 0 12px 34px color-mix(in srgb, var(--bg-base) 68%, transparent);
 }
+.code-composer-surface:focus-within { border-color: var(--border-strong); }
 .code-composer {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -31,20 +37,12 @@
     flex-direction: column;
     gap: 5px;
     min-width: 0;
-    padding: 4px 6px 3px;
-    border: 1px solid transparent;
-    border-radius: 9px;
-    background: transparent;
-}
-.code-composer-input-shell:focus-within {
-    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
-    background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
 }
 .code-composer-input {
     resize: none;
     width: 100%;
-    min-height: 44px;
-    max-height: 144px;
+    min-height: 40px;
+    max-height: 160px;
     padding: 0;
     border: 0;
     background: transparent;
@@ -60,233 +58,219 @@
     font-size: 10px;
     line-height: 1.2;
 }
+
+/* Trailing action cluster: dictation, then submit/stop. */
+.code-composer-actions { display: flex; align-items: center; gap: 4px; }
+.code-composer-icon-button,
 .code-composer-send {
-    min-width: 46px;
-    height: 38px;
-    min-height: 38px;
-    padding: 0 11px;
-    border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--border-subtle));
-    border-radius: 10px;
-    background: var(--accent);
-    color: var(--ink-on-accent);
-    font-size: 12px;
-    font-weight: 700;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 8px;
+    border: 1px solid transparent;
     cursor: pointer;
 }
-.code-composer-send:not(.code-composer-stop):hover:not(:disabled) {
-    background: var(--accent);
+.code-composer-icon-button {
+    background: transparent;
+    color: var(--text-secondary);
+}
+.code-composer-icon-button:hover:not(:disabled) {
+    background: var(--bg-raised);
+    color: var(--text-primary);
+}
+/* Recording is a live state, so it is visible without hovering. */
+.code-composer-icon-button.is-recording {
+    border-color: var(--status-error);
+    color: var(--status-error);
+}
+.code-composer-send {
     border-color: var(--accent);
+    background: var(--accent);
     color: var(--ink-on-accent);
 }
+.code-composer-send:disabled,
+.code-composer-icon-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
 .code-composer-send:disabled {
     border-color: var(--border-subtle);
     background: var(--bg-raised);
     color: var(--text-dim);
-    cursor: not-allowed;
 }
+.code-composer-stop {
+    border-color: var(--status-warn);
+    background: var(--bg-raised);
+    color: var(--text-primary);
+}
+.code-composer-icon-button:focus-visible,
+.code-composer-stop:focus-visible,
+.code-composer-send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+
+/* Footer: [runtime icon] [permission] ····· [model] [effort] */
 .code-composer-footer {
     display: flex;
-    gap: 6px;
+    gap: 4px;
     align-items: center;
     flex-wrap: wrap;
     min-width: 0;
-    padding-top: 7px;
+    padding-top: 12px;
     border-top: 1px solid var(--border-subtle);
     overflow: visible;
 }
-.code-footer-menu {
-    position: relative;
-    flex: 0 1 auto;
-    min-width: 0;
-}
-.code-footer-menu:first-child {
-    flex: 0 0 auto;
-}
-.code-footer-field-model {
-    flex: 1 1 320px;
-    max-width: min(42vw, 420px);
-}
+.code-composer-footer-spacer { flex: 1 1 auto; min-width: 0; }
+.code-footer-menu { position: relative; flex: 0 1 auto; min-width: 0; }
 .code-footer-menu-trigger {
-    display: grid;
-    grid-template-columns: auto minmax(0, auto) auto;
+    display: inline-flex;
     align-items: center;
-    gap: 7px;
+    gap: 4px;
     max-width: 100%;
-    height: 32px;
-    padding: 0 10px;
+    height: 28px;
+    padding: 0 8px;
     border: 1px solid var(--border-subtle);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--bg-panel) 62%, var(--bg-base));
+    border-radius: 8px;
+    background: transparent;
     color: var(--text-primary);
     font: inherit;
+    font-size: 13px;
     cursor: pointer;
 }
-.code-footer-menu-trigger:hover,
+.code-footer-menu-trigger.is-icon {
+    width: 28px;
+    padding: 0;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+.code-footer-menu-trigger:hover:not(:disabled),
 .code-footer-menu-trigger[aria-expanded="true"] {
-    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-subtle));
+    border-color: var(--border-strong);
     background: var(--bg-raised);
 }
-.code-footer-menu-trigger:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-}
-.code-footer-menu-trigger:disabled {
-    cursor: not-allowed;
-    opacity: 0.62;
-}
+.code-footer-menu-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.code-footer-menu-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
 .code-footer-menu-trigger strong {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 12px;
-    font-weight: 650;
+    font-size: 13px;
+    font-weight: 400;
     color: var(--text-primary);
 }
+/*
+ * The value carries the meaning on every one of these pills and the accessible
+ * name already says which control it is, so a visible caption is redundant
+ * chrome. It stays in the DOM but not on screen.
+ */
 .code-footer-label {
-    color: var(--text-dim);
-    font-size: 10px;
-    font-weight: 750;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
     white-space: nowrap;
 }
-.code-footer-chevron {
-    color: var(--text-dim);
-    font-size: 13px;
-    line-height: 1;
-}
+.code-footer-model { flex: 0 1 auto; min-width: 0; max-width: min(46vw, 340px); }
+.code-footer-model .code-footer-menu-trigger strong { font-weight: 500; }
+.code-footer-effort .code-footer-menu-trigger { color: var(--text-secondary); }
+.code-provider-glyph { flex: 0 0 auto; }
+
 .code-footer-dropup {
     position: absolute;
     left: 0;
     bottom: calc(100% + 8px);
     z-index: 35;
-    width: max(260px, 100%);
-    max-width: min(520px, calc(100vw - 28px));
-    max-height: min(280px, 46vh);
-    overflow-y: auto;
-    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: max(192px, 100%);
+    max-width: min(340px, calc(100vw - 28px));
+    max-height: 288px;
+    padding: 4px;
     border: 1px solid var(--border-subtle);
     border-radius: 12px;
     background: var(--bg-panel);
-    box-shadow: 0 -18px 42px rgba(0,0,0,0.28);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.18), 0 2px 4px -2px rgb(0 0 0 / 0.18);
+}
+.code-footer-dropup-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
-.code-footer-field-model .code-footer-dropup {
-    width: min(520px, calc(100vw - 28px));
+.code-footer-filter {
+    flex: 0 0 auto;
+    width: 100%;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--bg-base);
+    color: var(--text-primary);
+    font: inherit;
+    font-size: 13px;
 }
+.code-footer-filter:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }
 .code-footer-dropup-option {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr) 16px;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     width: 100%;
-    min-height: 44px;
-    padding: 8px 10px;
-    border: 1px solid transparent;
-    border-radius: 9px;
+    min-height: 32px;
+    padding: 4px 8px;
+    border: 0;
+    border-radius: 8px;
     background: transparent;
     color: var(--text-primary);
     font: inherit;
     text-align: left;
     cursor: pointer;
 }
-.code-footer-dropup-option:hover,
-.code-footer-dropup-option.is-selected {
-    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-subtle));
-    background: var(--bg-raised);
-}
-.code-footer-dropup-option:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 1px;
-}
-.code-footer-dropup-option span,
-.code-footer-dropup-option strong,
-.code-footer-dropup-option small {
-    min-width: 0;
+.code-footer-dropup-option:not(:has(.code-footer-option-icon)) { grid-template-columns: minmax(0, 1fr) 16px; }
+.code-footer-dropup-option:hover:not(:disabled) { background: var(--bg-raised); }
+.code-footer-dropup-option:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
+.code-footer-dropup-option:disabled { cursor: not-allowed; opacity: 0.5; }
+.code-footer-option-icon { display: inline-flex; color: var(--text-secondary); }
+.code-footer-option-text { display: grid; gap: 2px; min-width: 0; }
+.code-footer-option-text strong {
+    font-size: 13px;
+    font-weight: 400;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.code-footer-dropup-option span {
-    display: grid;
-    gap: 2px;
-}
-.code-footer-dropup-option strong {
-    font-size: 13px;
-    font-weight: 650;
-}
-.code-footer-dropup-option small {
+.code-footer-option-text small {
     color: var(--text-dim);
-    font-size: 12px;
-}
-.code-footer-dropup-option em {
-    color: var(--accent);
-    font-style: normal;
-    font-size: 15px;
-    font-weight: 800;
-}
-@media (max-width: 900px) {
-    .code-footer-label {
-        display: none;
-    }
-    .code-footer-field-model {
-        flex-basis: 220px;
-        max-width: 100%;
-    }
-}
-@media (max-width: 720px) {
-    .code-footer-menu-trigger {
-        padding: 0 8px;
-        gap: 5px;
-    }
-    .code-footer-menu-trigger strong {
-        max-width: 120px;
-    }
-    .code-footer-field-model .code-footer-menu-trigger strong {
-        max-width: 180px;
-    }
-    .code-footer-dropup {
-        width: min(340px, calc(100vw - 28px));
-    }
-}
-@media (max-width: 560px) {
-    .code-composer-footer {
-        overflow: visible;
-        flex-wrap: wrap;
-    }
-    .code-composer-footer::-webkit-scrollbar {
-        display: none;
-    }
-    .code-footer-menu {
-        flex: 0 0 auto;
-    }
-    .code-footer-menu-trigger strong {
-        max-width: 112px;
-    }
-    .code-footer-field-model .code-footer-menu-trigger strong {
-        max-width: 150px;
-    }
-}
-.code-footer-menu-trigger:focus {
-    outline-color: var(--ring);
-    color: var(--accent);
+    font-size: 11px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+.code-footer-check { color: var(--text-primary); }
+.code-footer-dropup-empty { margin: 0; padding: 8px; color: var(--text-dim); font-size: 12px; }
+
+.code-footer-floating { position: fixed; z-index: 1000; box-sizing: border-box; }
+.code-footer-floating .code-footer-option-text small { white-space: normal; overflow-wrap: anywhere; }
 
-.code-footer-floating { position: fixed; z-index: 1000; box-sizing: border-box; max-height: min(280px, 46dvh); }
-.code-footer-floating .code-footer-dropup-option small { white-space: normal; overflow-wrap: anywhere; }
-.code-footer-model-form { display: flex; flex: 1 1 220px; min-width: 0; gap: 6px; align-items: center; }
-.code-footer-model-form input { width: 100%; min-width: 0; padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: var(--control-radius); background: var(--bg-panel); color: var(--text-primary); font: inherit; font-size: 12px; }
-.code-footer-model-form input:focus-visible { outline: 2px solid var(--ring); }
-.code-footer-model-form button { font: inherit; font-size: 11px; }
-.code-footer-runtime { color: var(--text-secondary); font-size: 12px; }
-.code-composer-input-shell { border-color: var(--border-subtle); }
-.code-composer-stop { background: var(--bg-raised); color: var(--text-primary); border-color: var(--status-warn); }
-.code-composer-stop:focus-visible, .code-composer-send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
-.code-policy-note, .code-selection-notice { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.code-selection-notice { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.code-composer-status { grid-column: 1 / -1; color: var(--text-dim); font-size: 11px; }
 .code-input-recovery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 980px; margin: 0 auto 6px; color: var(--text-secondary); font-size: 11px; }
 .code-action-error { color: var(--status-error); font-size: 12px; overflow-wrap: anywhere; grid-column: 1 / -1; }
-@media (max-width: 720px) { .code-composer-dock { padding: 8px; } }
+
+@media (max-width: 720px) {
+    .code-composer-dock { padding: 8px; }
+    .code-composer-surface { border-radius: 14px; padding: 10px; }
+}
 @media (max-width: 560px) {
-    .code-footer-model-form { flex-basis: 100%; }
-    .code-composer-footer { gap: 8px; }
+    /* The model pill keeps its own row so it never collapses to a few glyphs. */
+    .code-composer-footer-spacer { flex-basis: 100%; height: 0; }
+    .code-footer-model { max-width: 100%; }
 }

package/public/manager/src/code/code-controller-runtime.ts

@@ -9,6 +9,7 @@ import {
     acknowledgeCodeSend, catalogSelection, codeDraftBook, createCodeDraft, persistCodeDraftBook, sessionSelection,
     type CodeDraft, type CodeDraftBook,
 } from './code-controller-drafts';
+import { withPendingUserItem } from './pending-user-item';
 
 const MAX_DETAILS = 6;
 const MAX_INDEX = 1000;
@@ -198,7 +199,8 @@ export class CodeController {
                 const row = this.info(id), detail = this.details.get(id);
                 return row && detail?.synced ? { ...row, pendingPermissionCount: detail.permissions.length } : row;
             }).filter((row): row is CodeSessionInfo => !!row),
-            selectedId: id, session, items: detail?.items ?? [], permissions: detail?.permissions ?? [],
+            selectedId: id, session, items: withPendingUserItem(draft, detail?.items ?? []),
+            permissions: detail?.permissions ?? [],
             input: draft.input, selection: session ? sessionSelection(session) : draft.selection,
             gitInfo: this.gitInfo, loading: this.indexLoading || !!detail?.hydrating || (!!id && !detail?.hydrated && !detail?.error),
             pending, busy: codeSessionBusy(session), synced, transport: this.transport,

package/public/manager/src/code/code-session-state.ts

@@ -61,7 +61,13 @@ function apply(state: CodeSessionState, event: CodeWireEvent): CodeSessionState
     let { items, session, permissions } = state;
     if (event.event === 'code_session') {
         if (!event.session || event.session.sessionId !== state.sessionId) return { ...state, needsSnapshot: true, synced: false };
-        session = event.session;
+        // Usage is attached at read time, so a stored session event does not
+        // carry it. Replacing the record wholesale would blank the meter on
+        // every unrelated session change; the last figure stands until a
+        // snapshot or a listing supplies a newer one.
+        session = event.session.contextUsage === undefined && session?.contextUsage !== undefined
+            ? { ...event.session, contextUsage: session.contextUsage }
+            : event.session;
         permissions = permissions.filter(p => p.epoch === session!.epoch && p.turnId === session!.turnId);
     } else {
         const id = event.item?.itemId ?? event.update?.itemId;

package/public/manager/src/code/code-toasts.ts

@@ -0,0 +1,73 @@
+/**
+ * A transient notice that appears over the transcript and leaves on its own.
+ *
+ * The composer footer used to carry these inline, which pushed the input down
+ * and left a policy line sitting there long after it had been read. What
+ * belongs here is news -- a setting saved, a policy changed, an action failed.
+ * What does not belong here is anything the reader still has to act on: an
+ * unconfirmed send or an archived session has to stay on screen until it is
+ * resolved, and a notice that dismisses itself would strand them.
+ */
+/**
+ * Only `warning` exists today, because the one notice this surface raises is a
+ * permission warning; an error the reader must act on stays inline instead. The
+ * union is kept because the shape of a second variant is already decided, but
+ * nothing in the app produces one, so there is no assertive region to route to.
+ */
+export type CodeToastVariant = 'warning';
+
+export type CodeToast = {
+    /** Stable per source, so a repeated notice replaces rather than stacks. */
+    id: string;
+    message: string;
+    variant: CodeToastVariant;
+    /** Non-finite or <= 0 stays until dismissed. */
+    durationMs: number;
+    /** Distinguishes two pushes of the same id, so the timer restarts. */
+    revision: number;
+};
+
+export const CODE_TOAST_DEFAULT_MS = 4000;
+/** Three is enough to see a burst; more would cover the transcript. */
+export const CODE_TOAST_MAX = 3;
+
+export function codeToastAutoDismisses(toast: CodeToast): boolean {
+    return Number.isFinite(toast.durationMs) && toast.durationMs > 0;
+}
+
+/**
+ * Newest last, one entry per id. Re-pushing an id refreshes its content and
+ * restarts its timer through a bumped revision, and moves it to the end so a
+ * notice the reader just triggered is never the one dropped by the cap.
+ */
+export function pushCodeToast(
+    list: readonly CodeToast[],
+    next: Omit<CodeToast, 'revision'>,
+): CodeToast[] {
+    const previous = list.find(toast => toast.id === next.id);
+    const kept = list.filter(toast => toast.id !== next.id);
+    kept.push({ ...next, revision: (previous?.revision ?? 0) + 1 });
+    return kept.slice(Math.max(0, kept.length - CODE_TOAST_MAX));
+}
+
+export function dismissCodeToast(list: readonly CodeToast[], id: string): CodeToast[] {
+    const next = list.filter(toast => toast.id !== id);
+    return next.length === list.length ? list as CodeToast[] : next;
+}
+
+/**
+ * What a producer says: either raise this notice, or retire it.
+ *
+ * Retiring matters for anything derived from current state. A warning about a
+ * permission policy has to leave when the policy does, or it goes on asserting
+ * something about the session that is no longer true.
+ */
+export type CodeNotice =
+    | { id: string; message: string; variant: CodeToastVariant; durationMs?: number }
+    | { id: string; clear: true };
+
+export function applyCodeNotice(list: readonly CodeToast[], notice: CodeNotice): CodeToast[] {
+    if ('clear' in notice) return dismissCodeToast(list, notice.id);
+    return pushCodeToast(list, { id: notice.id, message: notice.message, variant: notice.variant,
+        durationMs: notice.durationMs ?? CODE_TOAST_DEFAULT_MS });
+}

package/public/manager/src/code/code-workbench.css

@@ -135,8 +135,49 @@
 }
 .code-tool-summary::-webkit-details-marker { display: none; }
 .code-tool-summary:hover { background: var(--accent-soft); }
-.code-tool-chevron { flex-shrink: 0; font-weight: 800; line-height: 1; color: var(--text-dim); }
+.code-tool-chevron {
+    flex-shrink: 0; font-weight: 800; line-height: 1; color: var(--text-dim);
+    /* Dimmed rather than hidden: a chevron that only appears on hover is
+       undiscoverable by touch and gives a keyboard user nothing to aim at. */
+    opacity: 0.35;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.code-tool-summary:hover .code-tool-chevron,
+.code-tool-summary:focus-visible .code-tool-chevron { opacity: 1; }
+.code-tool-card[open] > .code-tool-summary .code-tool-chevron { transform: rotate(90deg); opacity: 1; }
 .code-tool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; line-height: 1.15; }
+/* A call in flight reads as in-flight. The verb already says so; this keeps the
+   row alive while it streams, and stopping is what marks completion -- no chip
+   that says "Done" on every successful row. */
+/* The label is clipped with an ellipsis, and transparent text over a clipped
+   background is invisible rather than dim wherever the clip does not apply, so
+   the gradient is opted into only where it is supported. */
+.code-tool-name-running { color: var(--text-dim); }
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+    .code-tool-name-running {
+        background: linear-gradient(90deg,
+            var(--text-dim) 0%, var(--text-dim) 34%,
+            var(--text-primary) 50%,
+            var(--text-dim) 66%, var(--text-dim) 100%);
+        background-size: 300% 100%;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        animation: code-tool-shimmer 4s linear infinite;
+    }
+}
+@keyframes code-tool-shimmer {
+    from { background-position: 150% 0; }
+    to { background-position: -150% 0; }
+}
+/* Transparent text has no fallback under a forced palette, and a reader who
+   asked for less motion should not get a looping gradient either. */
+@media (prefers-reduced-motion: reduce) {
+    .code-tool-name-running { animation: none; background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor; }
+}
+@media (forced-colors: active) {
+    .code-tool-name-running { animation: none; background: none; color: CanvasText; -webkit-text-fill-color: currentColor; forced-color-adjust: none; }
+}
 .code-tool-status {
     margin-left: auto;
     flex-shrink: 0;