@symerian/symi 3.5.19 → 3.5.21

package/dist/control-ui/css/style.css

@@ -835,20 +835,27 @@ body {
 }
 
 /* ── Symframe (right-column dynamic display) ──────────────────────── */
-/* Phase 1: shell + the 3 existing panels reframed as cards. The aside
-   itself stays positioned by .metrics-right; symframe just adds a
-   header band on top and unified card chrome around each child panel.
-   No JS plumbing yet — Phase 2 introduces the registry + dynamic
-   add/update/remove semantics. */
+/* Stage B (3.5.20): the column is now layered. .symframe-stack holds
+   the substrate (ambient reasoning behind everything) and the cards
+   (foreground artifacts) in a single CSS grid cell via grid-area, so
+   they overlap. Cards have backdrop-filter so the substrate breathes
+   THROUGH them. Header floats on top, unchanged.
+
+   The "reasoning live dot" (id="reasoning-live-dot") moved from inside
+   the now-removed reasoning panel up into the header row, where it
+   still pulses on agent activity (app.js:840-845 untouched, single id
+   continues to bind that semantic). */
 .symframe {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  height: 100%;
 }
 .symframe-header {
   padding: 8px 10px 10px;
   border-bottom: 1px solid rgba(0, 212, 255, 0.12);
   margin-bottom: 4px;
+  flex-shrink: 0;
 }
 .symframe-header-row {
   display: flex;
@@ -880,10 +887,185 @@ body {
   margin-top: 4px;
   line-height: 1.4;
 }
+
+/* The stack — substrate + cards share a single grid cell so they
+   overlap on the z-axis. Cards on top (z:1) with backdrop-filter let
+   the substrate (z:0) show through. */
+.symframe-stack {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 280px;
+  display: grid;
+  grid-template-areas: "overlay";
+}
 .symframe-cards {
+  grid-area: overlay;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 10px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 212, 255, 0.12) transparent;
+  /* Let scroll/click events fall through the empty space between cards
+     down to the substrate, so the user can scroll reasoning even when
+     foreground cards are foregrounded. Cards themselves re-enable
+     pointer-events on their own root. */
+  pointer-events: none;
+}
+.symframe-cards > * {
+  pointer-events: auto;
+}
+.symframe-cards::-webkit-scrollbar {
+  width: 3px;
+}
+.symframe-cards::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.12);
+  border-radius: 2px;
+}
+
+/* ── Substrate (ambient reasoning layer, Stage B) ──────────────────── */
+/* Lives behind the cards in the same grid cell. Independently
+   scrollable. Newest entries prepend at the top; live entry pinned at
+   index 0 with no decay; older entries fade per DECAY_TIERS (see
+   glass-ui/js/symframe-substrate.js). */
+.symframe-substrate {
+  grid-area: overlay;
+  z-index: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 4px 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 212, 255, 0.18) transparent;
+}
+.symframe-substrate::-webkit-scrollbar {
+  width: 3px;
+}
+.symframe-substrate::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.18);
+  border-radius: 2px;
+}
+
+/* Substrate entry — decay-driven visual. Custom properties are written
+   per-entry by the JS tick; CSS just consumes them with a transition
+   so changes ease rather than snap. */
+.substrate-entry {
+  opacity: var(--substrate-opacity, 1);
+  filter: blur(var(--substrate-blur, 0));
+  transform: scale(var(--substrate-scale, 1));
+  transform-origin: top left;
+  transition:
+    opacity 1.2s ease,
+    filter 1.2s ease,
+    transform 1.2s ease,
+    max-height 0.6s ease;
+}
+
+/* Live trace — pinned at top, exempt from decay, with a pulsing dot. */
+.substrate-entry.substrate-live {
+  opacity: 1;
+  filter: none;
+  transform: none;
+  border-color: rgba(0, 212, 255, 0.32);
+  box-shadow: 0 0 12px rgba(0, 212, 255, 0.08);
+}
+.substrate-live-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-cyan);
+  margin-right: 6px;
+  animation: pulse 1.2s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+/* Texture tier — oldest entries collapse to thin horizontal strokes
+   that read as panel texture rather than content. Hover restores
+   readability. */
+.substrate-entry.substrate-texture {
+  max-height: 2px;
+  padding: 0;
+  border-width: 0;
+  border-top: 1px solid rgba(0, 212, 255, 0.06);
+  overflow: hidden;
+}
+.substrate-entry.substrate-texture:hover {
+  max-height: 200px;
+  padding: 6px 8px;
+  border: 1px solid rgba(0, 212, 255, 0.18);
+  opacity: 0.7;
+  filter: none;
+}
+
+/* Run separator — survives decay better than entries (a structural
+   landmark), but still respects the substrate-entry transitions. */
+.substrate-run-sep {
+  border-color: transparent !important;
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+/* Quiet mind — empty state. A slow-pulsing dot with a label, centered
+   in the substrate. CSS-only animation. Visible when no reasoning has
+   happened yet (or has been cleared); foreground cards float over it. */
+.substrate-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 0;
+  margin: auto;
+  opacity: 0.85;
+}
+.substrate-quiet-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at center,
+    rgba(0, 212, 255, 0.45) 0%,
+    rgba(0, 212, 255, 0) 70%
+  );
+  animation: quiet-pulse 3.2s ease-in-out infinite;
+}
+.substrate-quiet-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  opacity: 0.5;
+}
+@keyframes quiet-pulse {
+  0%,
+  100% {
+    transform: scale(0.85);
+    opacity: 0.45;
+  }
+  50% {
+    transform: scale(1.18);
+    opacity: 0.85;
+  }
+}
+
+/* Reduced motion — collapse decay transitions to opacity-only at 200ms
+   and freeze quiet-pulse on the midpoint frame. The substrate stays
+   informative; the panel stays still. */
+@media (prefers-reduced-motion: reduce) {
+  .substrate-entry {
+    transition: opacity 0.2s ease;
+    filter: none !important;
+    transform: none !important;
+  }
+  .substrate-live-dot,
+  .substrate-quiet-dot {
+    animation: none;
+    opacity: 0.85;
+  }
 }
 /* Card chrome — overrides the per-panel transparent treatment from the
    floating-panels arc (3.4.10/11/12/13) for the panels that now live
@@ -891,13 +1073,19 @@ body {
    wins over the panel-specific class selectors. */
 .symframe .symframe-card {
   position: relative;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(0, 212, 255, 0.1);
+  /* Stage B: cards need enough opacity to stay readable WHILE letting
+     the substrate breathe through. The backdrop-filter blurs whatever
+     substrate texture is behind, so even at moderate transparency the
+     card body stays crisp. */
+  background: rgba(10, 16, 26, 0.62);
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  border: 1px solid rgba(0, 212, 255, 0.12);
   border-radius: 10px;
   padding: 10px 12px;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.03),
-    0 2px 8px rgba(0, 0, 0, 0.15);
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
 }
 .symframe .symframe-card::before,
 .symframe .symframe-card::after {
@@ -940,6 +1128,276 @@ body {
   color: var(--accent-cyan);
   background: rgba(0, 212, 255, 0.08);
 }
+
+/* Stage C: pin glyph — replaces dismiss button on pinned cards. Click
+   to unpin. The card's persistence is user-curated, so the affordance
+   sits in the same slot as the dismiss × but with a different glyph
+   and tooltip. */
+.symframe-card-pin {
+  background: transparent;
+  border: none;
+  color: var(--accent-cyan);
+  font-size: 13px;
+  line-height: 1;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    opacity 0.15s ease,
+    background 0.15s ease;
+}
+.symframe-card-pin:hover {
+  opacity: 1;
+  background: rgba(0, 212, 255, 0.08);
+}
+
+/* Stage C: dwell pulse — 600ms cyan border + glow then return. */
+.symframe-card.symframe-dwelling {
+  animation: symframe-dwell 600ms ease-out;
+}
+@keyframes symframe-dwell {
+  0% {
+    border-color: var(--accent-cyan);
+    box-shadow:
+      0 0 0 0 rgba(0, 212, 255, 0.55),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+  60% {
+    border-color: rgba(0, 212, 255, 0.6);
+    box-shadow:
+      0 0 0 6px rgba(0, 212, 255, 0),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    border-color: rgba(0, 212, 255, 0.12);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+}
+
+/* Stage C: release fade-out — animated dismissal that's softer than
+   the instant remove. The JS cleanup (cards.delete + DOM remove) fires
+   on transitionend or after a 900ms fail-safe timeout. */
+.symframe-card.symframe-releasing {
+  transition:
+    opacity 800ms cubic-bezier(0.4, 0, 0.6, 1),
+    transform 800ms cubic-bezier(0.4, 0, 0.6, 1),
+    max-height 800ms cubic-bezier(0.4, 0, 0.6, 1),
+    margin 800ms ease;
+  opacity: 0;
+  transform: scale(0.92);
+  max-height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Reduced-motion: skip elaborate animations. */
+@media (prefers-reduced-motion: reduce) {
+  .symframe-card.symframe-dwelling {
+    animation: none;
+    border-color: var(--accent-cyan);
+  }
+  .symframe-card.symframe-releasing {
+    transition: opacity 200ms ease;
+    transform: none;
+    max-height: none;
+  }
+}
+
+/* ── AWAITING footer (Stage C) ───────────────────────────────────── */
+/* Always-present footer (when there's anything pending) below the
+   substrate+cards stack. Merges in-flight sub-agents and scheduled
+   cron jobs into one list, sorted by in-flight-first then ETA.
+   Click a sub-agent row → no-op (future: open a detail view).
+   Click a schedule row → existing schedule edit modal.
+   Click [+ Add] → menu with "Spawn subagent" / "Add scheduled task". */
+.symframe-awaiting {
+  flex-shrink: 0;
+  position: relative;
+  border-top: 1px solid rgba(0, 212, 255, 0.12);
+  margin-top: 8px;
+  padding: 8px 6px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.awaiting-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 4px 4px;
+}
+.awaiting-title {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  color: var(--accent-cyan);
+}
+.awaiting-count {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+.awaiting-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 212, 255, 0.18) transparent;
+}
+.awaiting-list::-webkit-scrollbar {
+  width: 3px;
+}
+.awaiting-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.18);
+  border-radius: 2px;
+}
+.awaiting-item {
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid transparent;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+.awaiting-item:hover {
+  background: rgba(0, 212, 255, 0.06);
+  border-color: rgba(0, 212, 255, 0.15);
+}
+.awaiting-item-disabled {
+  opacity: 0.45;
+}
+.awaiting-glyph {
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+}
+.awaiting-glyph-subagent {
+  color: var(--accent-purple, #8b5cf6);
+}
+.awaiting-glyph-schedule {
+  color: var(--accent-cyan);
+  cursor: pointer;
+}
+.awaiting-glyph-schedule:hover {
+  color: var(--text);
+}
+.awaiting-label {
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.awaiting-meta {
+  color: var(--text-dim);
+  opacity: 0.75;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  white-space: nowrap;
+}
+
+/* Add button + menu */
+.awaiting-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  align-self: flex-start;
+  padding: 4px 10px;
+  background: transparent;
+  border: 1px dashed rgba(0, 212, 255, 0.25);
+  border-radius: 6px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+.awaiting-add-btn:hover {
+  color: var(--accent-cyan);
+  border-color: var(--accent-cyan);
+  background: rgba(0, 212, 255, 0.04);
+}
+.awaiting-add-btn svg {
+  width: 12px;
+  height: 12px;
+}
+.awaiting-add-menu {
+  position: absolute;
+  left: 10px;
+  bottom: 100%;
+  margin-bottom: 6px;
+  background: rgba(10, 16, 26, 0.95);
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 8px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 180px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 20;
+}
+.awaiting-add-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  text-align: left;
+}
+.awaiting-add-item:hover {
+  background: rgba(0, 212, 255, 0.08);
+  color: var(--accent-cyan);
+}
+.awaiting-add-glyph {
+  display: inline-flex;
+  width: 14px;
+  justify-content: center;
+}
+
 .symframe-card-body {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -5717,31 +6175,11 @@ body {
   border-color: rgba(52, 211, 153, 0.5);
 }
 
-/* ── Reasoning Panel ───────────────────────────────────────────────── */
-.reasoning-panel {
-  display: flex;
-  flex-direction: column;
-  min-height: 120px;
-  max-height: 420px;
-  flex-shrink: 0;
-  /* Override .glass-panel so the reasoning stream floats without a card background. */
-  background: transparent;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  border: none;
-  box-shadow: none;
-}
-
-.reasoning-panel:hover {
-  border: none;
-  box-shadow: none;
-}
-
-.reasoning-panel::before,
-.reasoning-panel::after {
-  display: none;
-}
-
+/* ── Reasoning live-dot (used in symframe header, Stage B+) ────────── */
+/* Stage B (3.5.20): The reasoning panel was removed; reasoning now flows
+   to the substrate. The live-dot id is retained in the symframe header
+   so app.js:840-845 continues to bind a single semantic ("agent is
+   active") to a single element without code change. */
 .reasoning-live-dot {
   display: inline-block;
   width: 6px;
@@ -5752,58 +6190,18 @@ body {
   vertical-align: middle;
   opacity: 0;
   transition: opacity 0.3s ease;
+  flex-shrink: 0;
 }
 .reasoning-live-dot.active {
   opacity: 1;
   animation: pulse 1.2s ease-in-out infinite;
 }
 
-.reasoning-feed {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 212, 255, 0.2) transparent;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-right: 2px;
-}
-.reasoning-feed::-webkit-scrollbar {
-  width: 3px;
-}
-.reasoning-feed::-webkit-scrollbar-track {
-  background: transparent;
-}
-.reasoning-feed::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.2);
-  border-radius: 2px;
-}
-
-/* Empty state */
-.reasoning-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 20px 0 12px;
-  color: var(--text-dim);
-}
-.reasoning-empty-icon {
-  width: 28px;
-  height: 28px;
-  opacity: 0.4;
-}
-.reasoning-empty-icon svg {
-  width: 100%;
-  height: 100%;
-}
-.reasoning-empty-text {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  opacity: 0.5;
-  text-align: center;
-}
+/* The .reasoning-panel / .reasoning-feed / .reasoning-empty* rules were
+   removed in Stage B — their DOM is gone. The .reasoning-entry / badge
+   / body / preview / result-meta rules below ARE still in use: the
+   substrate's buildEntryForBlock writes the same class names so existing
+   entry visuals carry forward unchanged. */
 
 /* Run separator */
 .reasoning-run-sep {