anentrypoint-design 0.0.256 → 0.0.258

package/app-shell.css

@@ -972,6 +972,41 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   font-weight: 600; margin-top: 8px;
   letter-spacing: var(--tr-caps); text-transform: uppercase;
 }
+.kpi-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: var(--space-2);
+}
+.kpi-delta {
+  display: inline-flex; align-items: center; gap: var(--space-hair);
+  font-size: var(--fs-xs); font-weight: 600;
+}
+.kpi-delta-up { color: var(--success); }
+.kpi-delta-down { color: var(--danger); }
+.ds-sparkline path { stroke: currentColor; }
+.ds-sparkline-up { color: var(--success); }
+.ds-sparkline-down { color: var(--danger); }
+
+/* ============================================================
+   BarChart
+   ============================================================ */
+.ds-barchart { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-barchart-row {
+  display: grid; grid-template-columns: minmax(90px, 25%) 1fr auto;
+  align-items: center; gap: var(--space-2);
+}
+.ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-barchart-track {
+  height: var(--space-2); border-radius: var(--r-pill);
+  background: var(--bg-3); overflow: hidden;
+}
+.ds-barchart-fill {
+  height: 100%; width: var(--bar-pct, 0%);
+  background: var(--accent); border-radius: var(--r-pill);
+}
+.ds-barchart-value {
+  font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
+  font-variant-numeric: tabular-nums;
+}
 
 /* ============================================================
    Empty state
@@ -1649,6 +1684,15 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   font-size: var(--fs-sm); color: var(--fg-3);
 }
 .ds-page-header-dense .ds-page-header-right { flex: 0 0 auto; margin-left: auto; }
+/* Below ~480px the single-line ellipsis truncates the majority of the lede
+   text with no way to recover it (no title attr, no expand) - let the row
+   wrap and the lede break onto its own line instead of clipping. */
+@media (max-width: 480px) {
+  .ds-page-header-dense-row { flex-wrap: wrap; }
+  .ds-page-header-dense-lede {
+    flex-basis: 100%; overflow: visible; text-overflow: clip; white-space: normal;
+  }
+}
 .ds-file-toolbar-left,
 .ds-file-toolbar-right {
   display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;

package/chat.css

@@ -534,6 +534,12 @@
   font-family: var(--ff-mono); font-size: var(--fs-tiny);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* Below ~480px a single nowrap line silently truncates most of the agent /
+   model / cwd context (no way to recover it - no title attr on the container,
+   only on individual bits). Let it wrap instead of clipping. */
+@media (max-width: 480px) {
+  .chat-composer-context { white-space: normal; overflow: visible; text-overflow: clip; }
+}
 button.chat-composer-context { cursor: pointer; }
 button.chat-composer-context:hover { color: var(--fg-2); }
 button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }

package/dist/247420.css

@@ -1478,6 +1478,41 @@
   font-weight: 600; margin-top: 8px;
   letter-spacing: var(--tr-caps); text-transform: uppercase;
 }
+.ds-247420 .kpi-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: var(--space-2);
+}
+.ds-247420 .kpi-delta {
+  display: inline-flex; align-items: center; gap: var(--space-hair);
+  font-size: var(--fs-xs); font-weight: 600;
+}
+.ds-247420 .kpi-delta-up { color: var(--success); }
+.ds-247420 .kpi-delta-down { color: var(--danger); }
+.ds-247420 .ds-sparkline path { stroke: currentColor; }
+.ds-247420 .ds-sparkline-up { color: var(--success); }
+.ds-247420 .ds-sparkline-down { color: var(--danger); }
+
+/* ============================================================
+   BarChart
+   ============================================================ */
+.ds-247420 .ds-barchart { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-barchart-row {
+  display: grid; grid-template-columns: minmax(90px, 25%) 1fr auto;
+  align-items: center; gap: var(--space-2);
+}
+.ds-247420 .ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-247420 .ds-barchart-track {
+  height: var(--space-2); border-radius: var(--r-pill);
+  background: var(--bg-3); overflow: hidden;
+}
+.ds-247420 .ds-barchart-fill {
+  height: 100%; width: var(--bar-pct, 0%);
+  background: var(--accent); border-radius: var(--r-pill);
+}
+.ds-247420 .ds-barchart-value {
+  font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
+  font-variant-numeric: tabular-nums;
+}
 
 /* ============================================================
    Empty state
@@ -2155,6 +2190,15 @@
   font-size: var(--fs-sm); color: var(--fg-3);
 }
 .ds-247420 .ds-page-header-dense .ds-page-header-right { flex: 0 0 auto; margin-left: auto; }
+/* Below ~480px the single-line ellipsis truncates the majority of the lede
+   text with no way to recover it (no title attr, no expand) - let the row
+   wrap and the lede break onto its own line instead of clipping. */
+@media (max-width: 480px) {
+  .ds-247420 .ds-page-header-dense-row { flex-wrap: wrap; }
+  .ds-247420 .ds-page-header-dense-lede {
+    flex-basis: 100%; overflow: visible; text-overflow: clip; white-space: normal;
+  }
+}
 .ds-247420 .ds-file-toolbar-left,
 .ds-247420 .ds-file-toolbar-right {
   display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
@@ -6939,6 +6983,12 @@
   font-family: var(--ff-mono); font-size: var(--fs-tiny);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* Below ~480px a single nowrap line silently truncates most of the agent /
+   model / cwd context (no way to recover it - no title attr on the container,
+   only on individual bits). Let it wrap instead of clipping. */
+@media (max-width: 480px) {
+  .ds-247420 .chat-composer-context { white-space: normal; overflow: visible; text-overflow: clip; }
+}
 .ds-247420 button.chat-composer-context { cursor: pointer; }
 .ds-247420 button.chat-composer-context:hover { color: var(--fg-2); }
 .ds-247420 button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }