@1agh/maude 0.45.0 → 0.45.2

package/apps/studio/client/styles/6-acp-chat.css

@@ -136,6 +136,7 @@
     padding: var(--space-1);
   }
   .chat-menu-row {
+    position: relative;
     display: flex;
     align-items: center;
     border-radius: var(--radius-xs);
@@ -167,18 +168,78 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .chat-menu-del {
+  /* Inline rename input (Task C5) — same box model as .chat-menu-open so the
+     row doesn't jump when switching between the button and the input. */
+  .chat-menu-rename-input {
+    flex: 1;
+    min-width: 0;
+    appearance: none;
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-xs);
+    background: var(--bg-1);
+    color: var(--fg-0);
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    padding: var(--space-2);
+    margin: 2px;
+    outline: none;
+  }
+
+  /* Per-chat overflow (⋯ → Rename / Archive / Copy transcript / Delete). */
+  .chat-menu-overflow-wrap {
+    position: relative;
+    flex-shrink: 0;
+  }
+  .chat-menu-more {
     appearance: none;
     border: 0;
     background: transparent;
     cursor: pointer;
     color: var(--fg-3);
     display: inline-flex;
-    padding: var(--space-2);
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
     border-radius: var(--radius-xs);
     flex-shrink: 0;
+    font-size: var(--type-sm);
+  }
+  .chat-menu-more:hover {
+    background: var(--bg-4, var(--bg-3));
+    color: var(--fg-0);
+  }
+  .chat-menu-overflow {
+    position: absolute;
+    top: calc(100% + 2px);
+    right: 0;
+    z-index: 52;
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+    padding: var(--space-1);
+    background: var(--bg-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-lg);
+  }
+  .chat-menu-overflow button {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    color: var(--fg-1);
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    padding: var(--space-2);
+    border-radius: var(--radius-xs);
   }
-  .chat-menu-del:hover {
+  .chat-menu-overflow button:hover {
+    background: var(--bg-3);
+  }
+  .chat-menu-overflow-danger {
     color: var(--status-error);
   }
   .chat-dot {
@@ -197,6 +258,20 @@
   .chat-dot--off {
     background: var(--border-strong);
   }
+  /* Transcript view label (Task C4/C5) — a bare unlabeled select read as
+     unexplained UI in dogfooding; this small caption fixes that. */
+  .chat-view-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+  .chat-view-label-tx {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+    white-space: nowrap;
+  }
   .chat-newbtn {
     appearance: none;
     border: 1px solid var(--border-default);
@@ -239,6 +314,9 @@
   .chat-statusrow-cc {
     color: var(--fg-1);
   }
+  .chat-statusrow-spacer {
+    flex: 1;
+  }
   .chat-status-dot {
     width: 7px;
     height: 7px;
@@ -398,6 +476,7 @@
 
   /* Messages */
   .chat-msg {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
@@ -457,6 +536,58 @@
     padding-top: var(--space-3);
   }
 
+  /* Per-message hover actions (Task C2 — Copy / Retry). Absolutely positioned
+     so it never reflows the bubble; hover- AND focus-revealed (keyboard users
+     tab to the buttons, which triggers :focus-within even without a pointer). */
+  .chat-msg-actions {
+    position: absolute;
+    top: calc(-1 * var(--space-2));
+    right: 0;
+    display: flex;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-fast, 120ms) ease;
+  }
+  .chat-msg:hover .chat-msg-actions,
+  .chat-msg:focus-within .chat-msg-actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .chat-msg-action {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--fg-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .chat-msg-action:hover {
+    background: var(--bg-3);
+    color: var(--fg-0);
+  }
+  .chat-msg-action:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  .chat-msg-action[data-copied='true'] {
+    color: var(--status-success);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chat-msg-actions {
+      transition: none;
+    }
+  }
+
   /* Rendered markdown inside the assistant bubble (chat-markdown.jsx) */
   .chat-msg--assistant .chat-bubble > * + * {
     margin-top: var(--space-2);
@@ -553,7 +684,79 @@
     white-space: pre-wrap;
   }
 
-  /* Tool-call card */
+  /* Collapsed consecutive-tool-call group (Task C1) — mirrors .chat-think's
+     <details>/<summary> disclosure pattern exactly. */
+  .chat-toolgroup {
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    overflow: hidden;
+  }
+  .chat-toolgroup-sum {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+  }
+  .chat-toolgroup-sum::-webkit-details-marker {
+    display: none;
+  }
+  .chat-toolgroup-sum::after {
+    content: '▸';
+    margin-left: auto;
+    color: var(--fg-3);
+    transition: transform var(--dur-soft) var(--ease-out);
+  }
+  .chat-toolgroup[open] .chat-toolgroup-sum::after {
+    transform: rotate(90deg);
+  }
+  .chat-toolgroup[open] .chat-toolgroup-sum {
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .chat-toolgroup-body {
+    display: flex;
+    flex-direction: column;
+  }
+  /* Flat accordion row (Task C1 revision) — a bordered card-in-a-card per
+     tool read as "divné" (weird) in dogfooding; a group's individual tool
+     calls are now plain rows separated by a hairline, not their own
+     `.chat-tool` card, so the whole group stays one lightweight shape. */
+  .chat-tool-row {
+    padding: var(--space-2) var(--space-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-tool-row + .chat-tool-row {
+    border-top: 1px solid var(--border-subtle);
+  }
+  .chat-tool-row-main {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+  }
+  .chat-tool-row-main b {
+    color: var(--accent);
+    font-weight: 600;
+  }
+  .chat-tool-row-status {
+    margin-left: auto;
+    color: var(--fg-3);
+  }
+  .chat-tool-row-status.del {
+    color: var(--status-error);
+  }
+
+  /* Tool-call card (standalone — a lone tool call outside a group). */
   .chat-tool {
     border: 1px solid var(--border-default);
     border-radius: var(--radius-sm);
@@ -608,6 +811,340 @@
   .chat-tool-line.del {
     color: var(--status-error);
   }
+  /* Raw args/result preview — Verbose transcript view only (Task C4). */
+  .chat-tool-detail {
+    margin: 0;
+    padding: var(--space-2);
+    background: var(--bg-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xs);
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* Permission approve/deny card (Milestone B — retires DDR-125 F2's blanket
+     auto-approve). Sits between the feed and the composer, one at a time. */
+  .chat-perm {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0 var(--space-4);
+    padding: var(--space-3);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+  }
+  .chat-perm:focus-visible {
+    outline: none;
+  }
+  .chat-perm-hd {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+  }
+  /* SECURITY (ethical-hacker finding) — the title is adapter/model-controlled
+     (for Bash, it's the raw shell command) with no length bound; without a
+     clamp a crafted/long command could push its dangerous tail off-screen in
+     a card whose entire point is "you can see what you're approving". Clamps
+     to one legible line; the full string is still reachable via the native
+     title-attribute tooltip (see PermissionPrompt.jsx). */
+  .chat-perm-hd b {
+    display: block;
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--accent);
+    font-weight: 600;
+  }
+  .chat-perm-queue {
+    flex-shrink: 0;
+    color: var(--fg-3);
+    font-weight: 400;
+  }
+  .chat-perm-body {
+    margin: 0;
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+  }
+  .chat-perm-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  /* Form-elicitation card (feature-acp-ask-user-question — AskUserQuestion +
+     generic MCP form input). Same slot + shape as .chat-perm, mutually
+     exclusive with it — see the mount site in ChatPanel.jsx. */
+  .chat-elicit {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    margin: 0 var(--space-4);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--border-default);
+    border-left: 2px solid var(--accent);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+  }
+  .chat-elicit:focus-visible {
+    outline: none;
+  }
+  .chat-elicit-hd {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-elicit-hd b {
+    color: var(--fg-0);
+    font-size: var(--type-sm);
+    font-weight: 600;
+    line-height: var(--lh-sm);
+  }
+  .chat-elicit-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+  }
+  .chat-elicit-meta > span + span::before {
+    content: '·';
+    margin-right: var(--space-2);
+  }
+  .chat-elicit-question {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+  .chat-elicit-question-hd {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: 0;
+    font-size: var(--type-sm);
+    color: var(--fg-0);
+    line-height: var(--lh-sm);
+  }
+  .chat-elicit-question-chip {
+    align-self: flex-start;
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-pill);
+    background: var(--bg-3);
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .chat-elicit-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-elicit-option {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+    cursor: pointer;
+    accent-color: var(--accent);
+  }
+  /* "Other" rides in the radio group itself (single-select only — see
+     ElicitationPrompt.jsx) rather than a separate link below it, so the
+     either/or truth (one field, one answer) is visible for free through
+     native radio-group exclusivity. Styled as a peer option, not a
+     secondary action — no visual demotion, it's a real 4th choice. */
+  .chat-elicit-option--other {
+    color: var(--fg-2);
+  }
+  .chat-elicit-custom--inline {
+    margin-left: calc(16px + var(--space-2)); /* aligns under the "Other" label, not the radio dot */
+  }
+  .chat-elicit-option-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-elicit-option-desc {
+    color: var(--fg-2);
+  }
+  .chat-elicit-option-preview {
+    margin: 0;
+    padding: var(--space-1) var(--space-2);
+    background: var(--bg-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xs);
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .chat-elicit-text {
+    width: 100%;
+    padding: var(--space-1) var(--space-2);
+    background: var(--bg-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xs);
+    color: var(--fg-0);
+    font-size: var(--type-xs);
+    font-family: inherit;
+  }
+  .chat-elicit-custom-toggle {
+    align-self: flex-start;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--accent);
+    font-size: var(--type-xs);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .chat-elicit-custom-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-elicit-custom-note {
+    margin: 0;
+    color: var(--fg-2);
+    font-size: var(--type-xs);
+  }
+  /* Credential-shaped question warning (ethical-hacker finding — see
+     acp-elicitation.js's looksLikeSecretRequest). Border/left-accent carries
+     the warning color; TEXT stays on --fg-1 rather than --status-warn
+     directly — that token fails AA contrast at this size (bit the a11y
+     review once already, per DDR-097's file-tree badge fix). */
+  .chat-elicit-secret-warning {
+    margin: 0;
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--status-warn);
+    border-radius: var(--radius-xs);
+    background: color-mix(in oklab, var(--status-warn) 12%, transparent);
+    color: var(--fg-1);
+    font-size: var(--type-xs);
+  }
+  /* SECURITY (ethical-hacker finding) — shown when a question reads as a
+     credential ask; pairs with the masked input in ElicitationPrompt.jsx. */
+  .chat-elicit-secret-warning {
+    margin: 0;
+    color: var(--warn, hsl(38 92% 50%));
+    font-size: var(--type-xs);
+  }
+  .chat-elicit-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .chat-elicit-actions-spacer {
+    flex: 1 1 auto;
+  }
+
+  /* Connection-problem error card (Task C3) — transient bridge/socket failure,
+     recoverable with a retry. Same slot as .chat-perm (mutually exclusive). */
+  .chat-error-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0 var(--space-4);
+    padding: var(--space-3);
+    border: 1px solid var(--status-error);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+  }
+  .chat-error-hd {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--status-error);
+  }
+  .chat-error-detail {
+    margin: 0;
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+  }
+  .chat-error-detail--muted {
+    color: var(--fg-3);
+  }
+  .chat-error-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  /* Usage (Milestone D) — context-window bar, rendered inside .chat-foot-popover. */
+  .chat-usage-bar {
+    display: inline-block;
+    width: 32px;
+    height: 4px;
+    border-radius: var(--radius-pill);
+    background: var(--bg-4, var(--bg-3));
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .chat-usage-bar-fill {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+    border-radius: var(--radius-pill);
+  }
+  /* Full-width variant for the .chat-foot-popover context section (the
+     32px pill above is sized for an inline ambient indicator, not a form
+     bar). */
+  .chat-usage-bar--wide {
+    display: block;
+    width: 100%;
+    height: 5px;
+  }
+
+  /* Event-driven single-window rate-limit banner — rendered INSIDE
+     .chat-composer's own padding (unlike .chat-perm/.chat-error-card, which
+     are siblings of the composer at the thread-root level), so no extra
+     horizontal margin here. */
+  .chat-usage-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0 0 var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    color: var(--fg-1);
+    font-size: var(--type-xs);
+  }
+  .chat-usage-banner-x {
+    margin-left: auto;
+    flex-shrink: 0;
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--fg-3);
+    cursor: pointer;
+    font-size: var(--type-sm);
+    line-height: 1;
+    padding: 0 var(--space-1);
+  }
+  .chat-usage-banner-x:hover {
+    color: var(--fg-0);
+  }
 
   /* Quick-action row */
   .chat-quick {
@@ -712,7 +1249,30 @@
   .chat-toolbar-spacer {
     flex: 1;
   }
-  /* Compact toolbar dropdowns — borderless, hover-revealed (Zed-style). */
+  /* Model/effort/mode picker row (feature-acp-panel-dynamic-claude-code-
+     capabilities) — a flex row of .chat-select dropdowns inside .chat-toolbar. */
+  .chat-caps {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex-wrap: wrap;
+  }
+  .chat-caps--connecting {
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+    padding: 2px var(--space-2);
+  }
+  /* Compact toolbar dropdowns — borderless, hover-revealed (Zed-style).
+     Without `field-sizing`, a closed <select> sizes itself to its WIDEST
+     option (not the one it's currently showing) — Model ends up as wide as
+     its longest model name even while displaying "Sonnet". That's what made
+     2-3 short picks unable to share a row in a narrow panel — each one was
+     wider than it looked and forced onto its own wrapped line. `field-sizing:
+     content` sizes it to what's actually shown instead; it degrades
+     harmlessly where unsupported (the max-width + ellipsis below is that
+     fallback net), and `flex-shrink: 0` keeps the (now much smaller) content
+     width from being squeezed further by the toolbar row. */
   .chat-select {
     appearance: none;
     font-family: var(--font-body);
@@ -723,6 +1283,13 @@
     border-radius: var(--radius-xs);
     padding: 2px var(--space-2);
     cursor: pointer;
+    flex-shrink: 0;
+    field-sizing: content;
+    min-width: 44px;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition:
       border-color var(--dur-soft) var(--ease-out),
       background var(--dur-soft) var(--ease-out),
@@ -795,16 +1362,86 @@
     color: var(--fg-2);
     font-family: var(--font-mono);
   }
-  .chat-foot {
+  .chat-foot-spacer {
+    flex: 1;
+  }
+  /* Composer footer info (Milestone D, revised twice after dogfooding — the
+     keyboard hint + context gauge + mode footnote + subscription note first
+     collapsed behind an icon on its own row, then that icon moved INTO
+     .chat-toolbar next to Send so it costs no extra vertical space). The
+     popover is grouped into labeled sections (context / cost / mode /
+     meta) with dividers, rather than a flat stack of unrelated lines. */
+  .chat-foot-info {
+    position: relative;
+    display: inline-flex;
+  }
+  .chat-foot-info-btn {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--fg-3);
+    font-size: var(--type-sm);
+    line-height: 1;
+    padding: 2px var(--space-1);
+    border-radius: var(--radius-xs);
+  }
+  .chat-foot-info-btn:hover,
+  .chat-foot-info-btn[aria-expanded='true'] {
+    color: var(--fg-1);
+    background: var(--bg-3);
+  }
+  .chat-foot-info-btn:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+  }
+  /* `position: fixed` (not absolute) — `.chat-foot-info` sits inside
+     `.chat-box`, which clips its content with `overflow: hidden` for the
+     composer's rounded-corner focus ring. An absolutely-positioned popover
+     anchored there got clipped to that box instead of floating above the
+     whole composer. `bottom`/`right` are computed from the button's own
+     rect and set inline (see ChatFootInfo in ChatPanel.jsx). */
+  .chat-foot-popover {
+    position: fixed;
+    z-index: 52;
     display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    margin-top: var(--space-2);
+    flex-direction: column;
+    min-width: 240px;
+    padding: var(--space-3);
+    background: var(--bg-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-lg);
+    font-family: var(--font-mono);
     font-size: var(--type-xs);
     color: var(--fg-2);
   }
-  .chat-foot-spacer {
-    flex: 1;
+  .chat-foot-popover-section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .chat-foot-popover-sep {
+    height: 1px;
+    background: var(--border-subtle);
+    margin: var(--space-2) calc(var(--space-3) * -1);
+  }
+  .chat-foot-popover-label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    color: var(--fg-0);
+    font-weight: 600;
+  }
+  .chat-foot-popover-row--muted {
+    color: var(--fg-3);
+  }
+  .chat-foot-popover-foot {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
   /* ── Slash-command autocomplete + inline highlight ────────────────────────