agentgui 1.0.1041 → 1.0.1043

package/site/app/vendor/anentrypoint-design/247420.css

@@ -1524,6 +1524,15 @@
 }
 .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
 
+/* Table() striped/compact opt-in density modifiers (webgeist g-table parity).
+   Scoped under .ds-table-wrap so they never leak onto an unrelated bare
+   <table> a consumer hand-rolls outside this component. */
+.ds-247420 .ds-table-wrap.is-striped table tr:nth-child(even) td { background: var(--bg-2); }
+.ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):hover td,
+.ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):focus-visible td { background: var(--bg-3, var(--bg-2)); }
+.ds-247420 .ds-table-wrap.is-compact table th { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
+.ds-247420 .ds-table-wrap.is-compact table td { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
+
 /* ============================================================
    Changelog
    ============================================================ */
@@ -1974,7 +1983,8 @@
   background: var(--bg); color: var(--fg);
   border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
 }
-.ds-247420 .ds-file-controls .ds-file-filter-input { flex: 0 1 220px; }
+.ds-247420 .ds-file-controls .ds-file-filter-wrap { flex: 0 1 220px; display: contents; }
+.ds-247420 .ds-file-controls .ds-file-filter-wrap .ds-file-filter-input { flex: 0 1 220px; }
 .ds-247420 .ds-file-filter-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
 .ds-247420 .ds-file-sort { display: flex; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); }
 .ds-247420 .ds-file-sort-btn {
@@ -3142,10 +3152,13 @@
      re-declare it; the sizing block now states the truth). */
   line-height: 1.5; resize: none;
   min-height: 28px; max-height: 200px;
-  box-sizing: border-box; overflow-y: hidden;
+  box-sizing: border-box;
+  /* Always auto, not focus-only: a capped-height composer that loses focus
+     while scrolled must still show its scrollbar - otherwise once the field
+     blurs there is zero cue that content exists below the fold. */
+  overflow-y: auto;
   scrollbar-width: thin;
 }
-.ds-247420 .chat-composer textarea:focus { overflow-y: auto; }
 .ds-247420 .chat-composer textarea::placeholder { color: var(--fg-3); }
 .ds-247420 .chat-composer textarea:focus { background: none; border: none; box-shadow: none; outline: none; }
 .ds-247420 .chat-composer .send {
@@ -3652,6 +3665,9 @@
 }
 .ds-247420 .ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
 .ds-247420 .ds-search-input::placeholder { color: var(--fg-3); }
+/* Only present when SearchInput is passed resultCount - transparent to any
+   flex/grid layout the bare input previously sat in directly. */
+.ds-247420 .ds-search-input-wrap { display: contents; }
 
 .ds-247420 .ds-field input:focus-visible,
 .ds-247420 .ds-field textarea:focus-visible,
@@ -4612,6 +4628,10 @@
 .ds-247420 .ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
 .ds-247420 .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
 
+/* Inline row — flex row with centered items and a small gap, for demo/kit
+   markup that needs to lay siblings out horizontally without an inline style. */
+.ds-247420 .ds-inline-row { display: flex; align-items: center; gap: var(--space-2, 8px); }
+
 /* SubGrid */
 .ds-247420 .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
 .ds-247420 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
@@ -4909,10 +4929,10 @@
   font-weight: 600;
 }
 .ds-247420 .ds-quickstart {
-  padding: var(--space-3, 16px) var(--space-4, 22px);
+  padding: var(--space-3, 16px) var(--space-4, 24px);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-1-75, 6px);
 }
 /* Table() scroll containment — wide tables scroll inside their own box,
    never the page body. */
@@ -4926,21 +4946,21 @@
 
 /* == appended: settings kit cleanup == */
 /* == appended: settings kit == */
-.ds-247420 .ds-settings-main { padding: 8px; }
+.ds-247420 .ds-settings-main { padding: var(--space-2, 8px); }
 .ds-247420 .ds-settings-body { padding: 14px 18px; }
-.ds-247420 .ds-settings-body-stack { display: flex; flex-direction: column; gap: 10px; }
-.ds-247420 .ds-field-block { margin: 10px 0; }
+.ds-247420 .ds-settings-body-stack { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); }
+.ds-247420 .ds-field-block { margin: var(--space-2-5, 10px) 0; }
 .ds-247420 .ds-field-eyebrow {
   font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--panel-text-3);
 }
 .ds-247420 .ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
 .ds-247420 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
-.ds-247420 .ds-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
-.ds-247420 .ds-btn-row-tight { gap: 6px; }
+.ds-247420 .ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
+.ds-247420 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
 .ds-247420 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-247420 .ds-toggle-btn { min-width: 78px; }
-.ds-247420 .ds-toggle-label { margin-left: 8px; color: inherit; opacity: 0.7; }
+.ds-247420 .ds-toggle-label { margin-left: var(--space-2, 8px); color: inherit; opacity: 0.7; }
 .ds-247420 .ds-btn-warn { color: var(--warn); }
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
    the text-safe tone, same accent/accent-ink split used everywhere else. */
@@ -4977,8 +4997,6 @@
 .ds-247420 .ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
 .ds-247420 .ds-auth-forgot { font-size: 13px; }
 .ds-247420 .ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
-.ds-247420 .ds-auth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--panel-text-3); font-size: 12px; }
-.ds-247420 .ds-auth-divider-line { flex: 1; height: 1px; background: var(--panel-2); }
 .ds-247420 .ds-auth-providers { display: flex; gap: 8px; flex-wrap: wrap; }
 .ds-247420 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
 .ds-247420 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
@@ -7082,6 +7100,15 @@
   .ds-247420 .ds-session-head .ds-search-input { min-height: 44px; }
 }
 .ds-247420 .ds-session-list, .ds-247420 .ds-session-groups { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2); }
+.ds-247420 .ds-session-loadmore {
+  width: 100%; margin-top: var(--space-1); padding: 8px 12px;
+  font-size: var(--fs-sm); font-family: inherit; color: var(--fg-3);
+  background: none; border: var(--bw-hair) dashed var(--rule); border-radius: var(--r-1);
+  cursor: pointer; text-align: center;
+}
+.ds-247420 .ds-session-loadmore:hover { color: var(--fg); border-color: var(--fg-3); }
+.ds-247420 .ds-session-loadmore:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+@media (pointer: coarse) { .ds-247420 .ds-session-loadmore { min-height: 44px; } }
 /* Grouped rows (Today/Yesterday/...) lay out like the flat list; the section
    label sticks to the top of the scroll area for Claude-Desktop-style headers. */
 .ds-247420 .ds-session-group { display: flex; flex-direction: column; }
@@ -8130,6 +8157,76 @@
 .ds-247420 .ds-ep-pager-btn:disabled { opacity: 0.4; cursor: default; }
 .ds-247420 .ds-ep-pager-label { white-space: nowrap; }
 
+.ds-247420 .ds-ep-pager-numbered { flex-wrap: wrap; }
+.ds-247420 .ds-ep-pager-num {
+    appearance: none; cursor: pointer;
+    background: var(--panel-2, var(--bg-2));
+    border: 1px solid var(--rule);
+    color: var(--panel-text, var(--fg));
+    min-width: 1.75em;
+    padding: var(--space-half, 3px) var(--space-1, 5px);
+    border-radius: var(--r-1, 4px);
+    font: inherit;
+    text-align: center;
+}
+.ds-247420 .ds-ep-pager-num:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); }
+.ds-247420 .ds-ep-pager-num.is-current {
+    background: var(--accent);
+    color: var(--accent-ink);
+    border-color: var(--accent);
+}
+.ds-247420 .ds-ep-pager-ellipsis { padding: 0 var(--space-hair, 2px); opacity: 0.6; }
+.ds-247420 .ds-ep-pager-total { white-space: nowrap; margin-left: auto; }
+
+/* Grid / GridItem — 24-column responsive layout. GridItem's flex-basis is
+   set per-tier via --xs-basis/--sm-basis/--md-basis/--lg-basis/--xl-basis
+   custom properties (computed in JS from a 1-24 span); each @media tier
+   below picks up whichever property is set for that breakpoint, cascading
+   down from xs as the mobile-first default. Mirrors BP_SM/MD/LG/XL. */
+.ds-247420 .ds-ep-grid {
+    display: flex; flex-wrap: wrap;
+    gap: var(--space-2, 8px);
+}
+.ds-247420 .ds-ep-grid-item {
+    box-sizing: border-box;
+    flex-grow: var(--xs-grow, 1);
+    flex-basis: var(--xs-basis, 100%);
+    max-width: var(--xs-basis, 100%);
+    display: var(--xs-display, inherit);
+}
+@media (min-width: 480px) {
+    .ds-247420 .ds-ep-grid-item[style*="--sm-basis"] {
+        flex-grow: var(--sm-grow, 1);
+        flex-basis: var(--sm-basis, 100%);
+        max-width: var(--sm-basis, 100%);
+        display: var(--sm-display, inherit);
+    }
+}
+@media (min-width: 768px) {
+    .ds-247420 .ds-ep-grid-item[style*="--md-basis"] {
+        flex-grow: var(--md-grow, 1);
+        flex-basis: var(--md-basis, 100%);
+        max-width: var(--md-basis, 100%);
+        display: var(--md-display, inherit);
+    }
+}
+@media (min-width: 1024px) {
+    .ds-247420 .ds-ep-grid-item[style*="--lg-basis"] {
+        flex-grow: var(--lg-grow, 1);
+        flex-basis: var(--lg-basis, 100%);
+        max-width: var(--lg-basis, 100%);
+        display: var(--lg-display, inherit);
+    }
+}
+@media (min-width: 1440px) {
+    .ds-247420 .ds-ep-grid-item[style*="--xl-basis"] {
+        flex-grow: var(--xl-grow, 1);
+        flex-basis: var(--xl-basis, 100%);
+        max-width: var(--xl-basis, 100%);
+        display: var(--xl-display, inherit);
+    }
+}
+
 /* JsonViewer */
 .ds-247420 .ds-ep-json {
     font-size: var(--fs-tiny, 12px);
@@ -9141,6 +9238,62 @@
     .ds-247420 .ds-ep-dock-left.collapsed { top: 6px; bottom: auto; }
 }
 
+/* Collapse / CollapseGroup — progressive-disclosure toggle panel. */
+.ds-247420 .ds-ep-collapse {
+    border: 1px solid var(--rule);
+    border-radius: var(--r-1, 4px);
+    background: var(--panel-2, var(--bg-2));
+}
+.ds-247420 .ds-ep-collapse + .ds-ep-collapse { margin-top: var(--space-1, 5px); }
+.ds-247420 .ds-ep-collapse-head {
+    appearance: none; cursor: pointer; width: 100%;
+    display: flex; align-items: center; gap: var(--space-1-5, 5px);
+    background: transparent; border: none;
+    padding: var(--space-1-5, 5px) var(--space-2, 8px);
+    font: inherit; color: var(--panel-text, var(--fg));
+    text-align: left;
+}
+.ds-247420 .ds-ep-collapse-head:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
+.ds-247420 .ds-ep-collapse-chevron {
+    font-family: var(--ff-mono, monospace);
+    width: 1em; flex-shrink: 0;
+    color: var(--panel-text-3, var(--fg-3));
+}
+.ds-247420 .ds-ep-collapse-title { flex: 1; font-weight: 600; }
+.ds-247420 .ds-ep-collapse-body {
+    padding: var(--space-2, 8px);
+    border-top: 1px solid var(--rule);
+}
+.ds-247420 .ds-ep-collapse-group { display: flex; flex-direction: column; }
+
+/* Divider — plain rule / labeled rule / vertical separator. */
+.ds-247420 .ds-ep-divider {
+    border: none; border-top: 1px solid var(--rule);
+    margin: var(--space-2, 8px) 0;
+}
+.ds-247420 .ds-ep-divider-labeled {
+    display: flex; align-items: center; gap: var(--space-1-5, 5px);
+    margin: var(--space-2, 8px) 0;
+}
+.ds-247420 .ds-ep-divider-labeled::before,
+.ds-247420 .ds-ep-divider-labeled::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--rule);
+}
+.ds-247420 .ds-ep-divider-label {
+    font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
+    color: var(--panel-text-3, var(--fg-3));
+    white-space: nowrap;
+}
+.ds-247420 .ds-ep-divider-vertical {
+    display: inline-block;
+    align-self: stretch;
+    width: 0;
+    border-left: 1px solid var(--rule);
+    margin: 0 var(--space-1-5, 5px);
+}
+
 /* community-app.css */
 /* community-app.css — layout glue for mountCommunityApp (the full chat/community
    app GUI). Reuses the canonical app/body/main classes from app-shell.css and