@gemboss/ui 0.1.0

package/src/assistant.css

@@ -0,0 +1,407 @@
+/* The assistant's popup / status bar / full-screen host — @gemboss/ui (28/09/2026).
+ *
+ * Moved from gemboss apps/admin/src/components/assistant/AssistantDockHost.module.css, where it was
+ * written for the admin's assistant; gemwatcher's and content-radar's assistants now wear the same
+ * host. Class names took a `gb-dock` prefix instead of CSS-module hashes (a consumer without CSS
+ * modules must be able to load it); every value is unchanged. The geometry assumes the GemBoss shell
+ * (@gemboss/ui AppShell): 56px topbar, 240px rail, drawer below 760px.
+ *
+ * Rendered by AssistantHost (assistant/host.tsx). State and the rules for when it shows are
+ * assistant/dock.ts + assistant/provider.tsx.
+ */
+
+
+.gb-dock {
+  position: fixed;
+  z-index: 320;              /* above the mobile tab bar (300), below the page editor (400) */
+  right: 24px;
+  bottom: 0;
+  /* MEASURED 2026-09-12, not assumed: the rail is 240px at every width above 760 (the shell's own
+     `margin-left: 240px`), and there is NO bottom tab bar — `.gemboss-mobile-nav` is not in the DOM
+     at 320 or 390. An earlier pass here wrote 72px and 56px from a stale comment in AppShell and
+     the popup covered a third of the rail, swallowing the menu clicks this feature exists to free.
+     240 (rail) + 24 (right gutter) + 24 (left gap) = 288. */
+  /* 460 is the app's own modal width (`.ui-modal`), so the assistant reads as part of the same
+     family instead of a wider one-off. 600 was a guess; this one already exists. */
+  width: min(460px, calc(100vw - 288px));
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  /* Frosted, the way the settings dialog reads — translucent surface over a small blur, so the page
+     underneath shows through as texture rather than detail.
+     NOT a full-screen scrim, though that is what settings uses. A scrim would block the page, and a
+     popup you cannot work behind is just the assistant page in a smaller box: the whole point of
+     this surface is that the screen under it stays usable. */
+  /* 93%, AND THE 5 POINTS THIS GAINED ON 25/09/2026 ARE A CONTRAST MEASUREMENT.
+     A translucent surface is `a·white + (1−a)·backdrop`, so the darkest it can ever go is `a·white`.
+     At 88% that floor was #E0E0E0, and `--gemboss-text-muted` (#686b71) measures 4.05:1 there —
+     UNDER AA. That is not a hypothetical corner of this component: `.header` and `.miniBar` both
+     declare `background: transparent` on purpose (see the note beside them), so `.headerStatus`
+     12px, `.miniStatus` 12px and `.booting` 14px all sit DIRECTLY on this surface in that colour.
+     93% puts the floor at #EDEDED and muted at 4.56:1. Chosen with, and kept equal to,
+     `.gemboss-popover-surface` in app/gemboss-shell.css — `one-popover-surface-four-wearers.test.ts`
+     fails if the two numbers ever stop agreeing. Change them THERE too.
+
+     TWO BACKGROUNDS, and the first is not decoration. `color-mix` and `backdrop-filter` ship on
+     DIFFERENT schedules — Firefox 103–112 and Safari 15.4–16.1 have the blur and not the mix — and
+     a declaration the parser rejects is DROPPED, not defaulted. Without the plain line, the dock had
+     NO background at all in those browsers: the page running straight through the chat. It shipped
+     that way on 12/09/2026 and nobody could see it from here. NOT a custom property: `background:
+     var(--some-mix-token)` would fail at computed-value time instead, which falls back to `unset`
+     rather than to the line above — worse than the bug it would be trying to share. */
+  background: var(--gemboss-surface);
+  background: color-mix(in srgb, var(--gemboss-surface) 93%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid var(--gemboss-divider);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.05), 0 24px 64px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
+
+  /* ── Arriving ────────────────────────────────────────────────────────────────────────────────
+     Short and plain: 140ms, ease-out, a small rise and a fade. Long enough to read as "it came
+     from somewhere", short enough that nobody waits for it — a popup a seller opens twenty times
+     a day must not perform.
+
+     TRANSFORM AND OPACITY ONLY. Height and horizontal offset are set from a pointer, and a
+     transition on those means the box trails the finger instead of following it. Those two stay
+     instant by construction, not by luck. */
+  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 140ms ease-out;
+}
+/* The entry itself. `@starting-style` is what lets an element animate the frame it appears in
+   (Chrome 117+/Safari 17.5+; the desktop app is Chromium 132). Anywhere older simply appears —
+   degrading to instant is the right failure for chrome nobody asked to watch. */
+@starting-style {
+  .gb-dock-dock, .gb-dock-mini { transform: translateY(10px); opacity: 0; }
+}
+/* Nothing animates while a pointer is setting the numbers — see `dragging` in the host. */
+.gb-dock-dragging, .gb-dock-dragging * { transition: none !important; }
+/* Where `backdrop-filter` is missing there is no blur to smear the page, and 93% opaque over sharp
+   body text is a chat you read through. Back to a solid surface — what this dock wore before it was
+   frosted. Same reasoning, same shape, as `.gemboss-popover-surface`. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .gb-dock { background: var(--gemboss-surface); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gb-dock { transition: none; }
+}
+
+/* The floating popup IS the base geometry above; this class exists so the DOM names the state —
+   `styles[mode]` was `undefined` for it, which is invisible in a screenshot and unnameable in a test. */
+.gb-dock-dock { }
+
+/* Still mounted — that is what keeps a run alive — just not on screen. */
+.gb-dock-hidden { display: none; }
+
+/* ── Full: exactly the area `main` occupies, so the dedicated page looks untouched ── */
+.gb-dock-full {
+  /* BELOW `.gemboss-route-shell` (z-index 5), which covers this exact rectangle while the next route
+     loads. At the popup's 320 the assistant stayed painted over the holding screen, so leaving this
+     page looked like nothing happened — and the screen's click-catcher was defeated, so clicks
+     during the wait landed on chat controls. Fixed position still puts it over `main`'s content. */
+  z-index: 4;
+  top: 56px;
+  left: 240px;             /* the rail, measured — see the note on .host */
+  right: 0;
+  bottom: 0;
+  width: auto;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--gemboss-app-bg);
+}
+
+/* ── Full: the one control full screen needs — the way back to the popup ──────────────────────
+   Floated over the chat's own header, whose right half is empty, rather than given a bar of its
+   own: a whole strip of chrome for one button would push the conversation down on every screen. */
+.gb-dock-fullchrome {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  z-index: 1;
+  display: flex;
+  gap: 8px;
+}
+.gb-dock-shrink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 44px;          /* §9.1 control tier */
+  padding: 0 12px;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-surface);
+  color: var(--gemboss-text-muted);
+  font: inherit;
+  font-size: var(--gemboss-fs-caption);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.gb-dock-shrink:hover { background: var(--gemboss-hover); color: var(--gemboss-text); }
+.gb-dock-shrink:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+.gb-dock-shrink svg { width: 16px; height: 16px; flex: 0 0 auto; }
+/* On a phone the label would crowd the chat header; the icon carries it there. */
+@media (max-width: 560px) {
+  .gb-dock-shrink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .gb-dock-shrink { padding: 0; width: 44px; justify-content: center; }
+  /* Except the way to a person: a head-and-shoulders icon alone does not say "a human answers". */
+  .gb-dock-shrink-keep span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
+  .gb-dock-shrink-keep { padding: 0 12px; width: auto; }
+  /* Two controls do not fit in the empty half of the chat header at phone width — floated, they sat
+     on the title ("Ask th…", measured at 320 and 390). In the flow they cost one short strip here,
+     and only here. */
+  .gb-dock-fullchrome { position: static; justify-content: flex-end; padding: 8px 12px 0; }
+}
+
+/* ── Mini: a status bar, not a window ── */
+.gb-dock-mini {
+  height: auto;
+  width: min(320px, calc(100vw - 288px));
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);   /* Safari; the host above carries the rest */
+  backdrop-filter: blur(14px) saturate(1.4);
+  border-radius: 12px 12px 0 0;
+}
+.gb-dock-mini .gb-dock-body { display: none; }
+.gb-dock-minirow { display: flex; align-items: center; padding-right: 4px; }
+.gb-dock-minirow .gb-dock-minibar { flex: 1 1 auto; min-width: 0; }
+/* `width: 44px` is a BASIS, not a floor: the default `flex-shrink: 1` let this button give ground to
+   the row beside it, so the × measured under 44 at all six widths while the rule above read as done.
+   MEASURED 2026-09-12 — the same trap as every other "the declaration is there" bug today. */
+.gb-dock-minirow .gb-dock-icon { flex: 0 0 auto; }
+
+.gb-dock-minibar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 12px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--gemboss-text-strong);
+  cursor: pointer;
+  text-align: left;
+}
+.gb-dock-minibar:hover { background: var(--gemboss-hover); }
+.gb-dock-minibar strong { font-size: 13px; font-weight: 600; flex: 0 0 auto; }
+.gb-dock-ministatus {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--gemboss-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gb-dock-minichevron { font-size: 10px; color: var(--gemboss-text-muted); }
+
+/* ── Resize grip (dock only) ── */
+.gb-dock-grip {
+  /* OVERLAID on the header's top edge, not stacked above it. As its own 14px row it pushed the
+     title down and the header read as top-heavy — Chris: "header hơi lệch do padding top hơi nhiều".
+     The drag area is unchanged; it simply no longer costs vertical space. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 14px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  cursor: ns-resize;
+  touch-action: none;
+  background: transparent;
+}
+.gb-dock-grip > span {
+  display: block;
+  width: 44px;          /* a mouse target wide enough to find without aiming */
+  height: 4px;
+  border-radius: 2px;
+  background: var(--gemboss-divider);
+}
+.gb-dock-grip:hover > span, .gb-dock-grip:focus-visible > span { background: var(--gemboss-text-muted); }
+.gb-dock-grip:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+
+/* ── Dock header ── */
+.gb-dock-header {
+  flex: 0 0 auto;
+  cursor: grab;              /* the strip itself drags the popup sideways */
+  touch-action: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px 0 16px;
+  min-height: 48px;
+  border-bottom: 1px solid var(--gemboss-divider);
+  background: transparent;   /* the frosted host shows through; a second fill would double it */
+}
+.gb-dock-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gemboss-text-strong);
+  white-space: nowrap;
+  /* Let the NAME absorb a squeeze. Adding the ＋ button pushed the header to 290px inside a 277px
+     popup at 320 — a nowrap title with no min-width cannot give ground, so the row overflowed
+     instead. Measured 2026-09-12. */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gb-dock-status {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--gemboss-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gb-dock-header:active { cursor: grabbing; }
+.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; }
+/* One ACTION, then the three WINDOW controls — ordered by how much each changes the window: bigger,
+   smaller, gone. The gap is what says they are two different kinds of button; without it four icons
+   in a row read as one undifferentiated strip, which is what "các icon đang không đồng đều" was
+   describing. The 📌 that used to sit in the middle of them is gone entirely — see lib/assistant-dock. */
+.gb-dock-action { margin-right: 8px; }
+
+.gb-dock-icon {
+  /* 44px control target — Apple HIG / WCAG 2.5.5. The icon inside stays 18px. */
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+.gb-dock-icon:hover { background: var(--gemboss-hover); color: var(--gemboss-text-strong); }
+.gb-dock-icon:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+.gb-dock-icon svg { width: 18px; height: 18px; }
+.gb-dock-icon-on { color: var(--gemboss-active-fg); background: var(--gemboss-active-bg); }
+
+.gb-dock-dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gemboss-divider);
+}
+.gb-dock-dot-busy { background: var(--gemboss-primary); animation: gb-dock-pulse 1.4s ease-in-out infinite; }
+.gb-dock-dot-unread { background: var(--gemboss-success-strong); }
+@keyframes gb-dock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .gb-dock-dot-busy { animation: none; } }
+
+/* ── Tabs: the assistant, or a person on the Gem team (dock only) ──────────────────────────────
+   Their own row under the header rather than inside it: at 320px the header already spends 176px
+   on four 44px controls, and two text tabs do not fit in what is left. */
+.gb-dock-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 4px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--gemboss-divider);
+}
+.gb-dock-tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 44px;          /* §9.1 control tier */
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.gb-dock-tab:hover { color: var(--gemboss-text-strong); }
+.gb-dock-tab[aria-selected="true"] { color: var(--gemboss-text-strong); font-weight: 600; border-bottom-color: var(--gemboss-primary); }
+.gb-dock-tab:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+.gb-dock-badge {
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-primary);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+/* ── Body: the assistant itself ── */
+.gb-dock-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  min-width: 0;
+}
+.gb-dock-body > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+/* Each tab's pane. A hidden pane stays MOUNTED — `display:none`, never unmount (see the host). */
+.gb-dock-pane { display: flex; min-width: 0; min-height: 0; }
+.gb-dock-pane > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+/* The package's own workspace (AssistantWorkspaceLayout) sizes itself to the viewport on its own page;
+   inside the host it fills the host instead. Moved here from the admin's assistant-dock-admin.css
+   (28/09/2026): every surface that puts the layout in the host needs it, or the layout keeps
+   `height: calc(100dvh - 56px)` inside a popup a few hundred pixels tall. */
+.gb-dock-body .gemboss-assistant-layout,
+.gb-dock-body .gemboss-assistant-page { height: auto; min-height: 0; }
+.gb-dock-pane[hidden] { display: none; }
+
+.gb-dock-booting {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: var(--gemboss-text-muted);
+  font-size: 14px;
+}
+
+.gb-dock-sr {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Phone: the popup spans the screen above the bottom tab bar; full mode loses the rail gutter ── */
+/* ── Narrow: five 44px controls + a title do not fit ────────────────────────────────────────
+   MEASURED 2026-09-12 at 320px: the header row wanted 342px inside a 291px popup. 5 × 44 = 220
+   leaves 71px for a title and a status line. So the two controls that are about BROWSING WHILE IT
+   RUNS — the pin, and the word for what the dot already says — stand down; new chat, full screen,
+   minimize and close stay. Dropping a control beats letting the row overflow off the edge. */
+@media (max-width: 420px) {
+  .gb-dock-status { display: none; }
+}
+
+/* ── Phone: the rail is an off-canvas drawer, so both geometries reclaim the full width ── */
+@media (max-width: 760px) {
+  .gb-dock {
+    right: 8px;
+    left: 8px;
+    width: auto;
+    padding-bottom: env(safe-area-inset-bottom);
+    border-radius: 12px 12px 0 0;
+  }
+  .gb-dock-mini { width: auto; }
+  .gb-dock-full {
+    left: 0;
+    right: 0;
+    top: 56px;
+    bottom: 0;
+    border-radius: 0;
+  }
+}