@symerian/symi 3.5.20 → 3.5.22

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

@@ -1128,6 +1128,287 @@ 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;
+}
+
+/* Empty-state placeholder when no subagents and no schedules exist. */
+.awaiting-empty {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-dim);
+  opacity: 0.55;
+  padding: 8px 10px;
+  text-align: center;
+  font-style: italic;
+}
+
+/* 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;

package/dist/control-ui/index.html

@@ -200,131 +200,59 @@
         <div class="symframe-header-row">
           <span class="symframe-title">SYMFRAME</span>
           <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
-          <span class="symframe-count" id="symframe-count">2 cards</span>
+          <span class="symframe-count" id="symframe-count"></span>
         </div>
         <div class="symframe-sub">window into the agent's mind</div>
       </div>
       <div class="symframe-stack">
         <div class="symframe-substrate" id="symframe-substrate"></div>
         <div class="symframe-cards" id="symframe-cards">
-          <!-- Subagents Panel -->
-          <div class="glass-panel symframe-card subagents-panel" id="subagents-panel">
-            <div class="panel-label">
-              SUBAGENTS
-              <span class="subagents-count" id="subagents-count"></span>
-            </div>
-
-            <!-- Quick Deploy Section -->
-            <div class="quick-deploy-section">
-              <div class="quick-deploy-label">QUICK DEPLOY</div>
-              <div class="quick-deploy-grid">
-                <button class="quick-deploy-btn" data-agent="research" title="Research Agent">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="11" cy="11" r="8" />
-                    <path d="M21 21l-4.35-4.35" />
-                  </svg>
-                  <span>Research</span>
-                </button>
-                <button class="quick-deploy-btn" data-agent="review" title="Code Review Agent">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="16 18 22 12 16 6" />
-                    <polyline points="8 6 2 12 8 18" />
-                  </svg>
-                  <span>Review</span>
-                </button>
-                <button class="quick-deploy-btn" data-agent="writer" title="Writer Agent">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 19l7-7 3 3-7 7-3-3z" />
-                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
-                  </svg>
-                  <span>Writer</span>
-                </button>
-                <button class="quick-deploy-btn" data-agent="analyst" title="Analyst Agent">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <line x1="18" y1="20" x2="18" y2="10" />
-                    <line x1="12" y1="20" x2="12" y2="4" />
-                    <line x1="6" y1="20" x2="6" y2="14" />
-                  </svg>
-                  <span>Analyst</span>
-                </button>
-              </div>
-            </div>
-
-            <!-- Staging Prompt Box -->
-            <div class="staging-box" id="staging-box">
-              <div class="staging-chips" id="staging-chips">
-                <span class="staging-empty">Select agents above</span>
-              </div>
-              <button class="staging-deploy-btn" id="staging-deploy-btn" disabled>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-                </svg>
-                Deploy
-              </button>
-            </div>
-
-            <!-- Active Subagents list -->
-            <div class="subagents-active-label">ACTIVE</div>
-            <div class="subagents-list" id="subagents-list">
-              <div class="subagents-empty" id="subagents-empty">
-                <div class="subagents-empty-icon">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <circle cx="12" cy="12" r="3" />
-                    <path
-                      d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
-                    />
-                  </svg>
-                </div>
-                <div class="subagents-empty-text">No active subagents</div>
-              </div>
-            </div>
-
-            <!-- Custom Spawn button -->
-            <button
-              class="subagent-spawn-btn"
-              id="subagent-spawn-btn"
-              title="Spawn a custom subagent"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10" />
-                <path d="M12 8v8M8 12h8" />
-              </svg>
-              <span>Custom Subagent</span>
-            </button>
-          </div>
-
-          <!-- Reasoning panel removed in Stage B (3.5.20). Reasoning now flows -->
-          <!-- to #symframe-substrate (the ambient layer behind these cards). -->
-
-          <!-- Scheduling Panel -->
-          <div class="glass-panel symframe-card scheduling-panel" id="scheduling-panel">
-            <div class="panel-label">
-              SCHEDULING
-              <span class="schedule-count" id="schedule-count"></span>
-            </div>
-            <div class="schedule-list" id="schedule-list">
-              <div class="schedule-empty" id="schedule-empty">
-                <div class="schedule-empty-icon">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <circle cx="12" cy="12" r="10" />
-                    <polyline points="12 6 12 12 16 14" />
-                  </svg>
-                </div>
-                <div class="schedule-empty-text">No scheduled tasks</div>
-              </div>
-            </div>
-            <button class="schedule-add-btn" id="schedule-add-btn" title="Add a scheduled task">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10" />
-                <path d="M12 8v8M8 12h8" />
-              </svg>
-              <span>Add Schedule</span>
-            </button>
-          </div>
+          <!-- Stage C (3.5.21): SUBAGENTS + SCHEDULING panel blocks removed. -->
+          <!-- Their content is now rendered in the AWAITING footer below; -->
+          <!-- modals (subagent-modal-overlay, schedule-modal-overlay) remain -->
+          <!-- in their original positions further down in this file. -->
+          <!-- The cards container is now exclusively for foreground -->
+          <!-- intent-typed artifact cards pushed via display_artifact / RPC. -->
         </div>
         <!-- /.symframe-cards -->
       </div>
       <!-- /.symframe-stack -->
+
+      <!-- AWAITING surface (Stage C): always-present footer that merges -->
+      <!-- in-flight sub-agents + scheduled cron jobs into a single -->
+      <!-- "things that aren't done yet" list, sorted by in-flight-first -->
+      <!-- then ETA. Click a sub-agent → existing subagent modal; click -->
+      <!-- a schedule → existing schedule modal; [+ Add] opens an add menu. -->
+      <div class="symframe-awaiting" id="symframe-awaiting">
+        <div class="awaiting-header">
+          <span class="awaiting-title">AWAITING</span>
+          <span class="awaiting-count" id="awaiting-count"></span>
+        </div>
+        <div class="awaiting-list" id="awaiting-list"></div>
+        <button
+          class="awaiting-add-btn"
+          id="awaiting-add-btn"
+          title="Spawn subagent or add scheduled task"
+          aria-haspopup="menu"
+          aria-expanded="false"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v8M8 12h8" />
+          </svg>
+          <span>Add</span>
+        </button>
+        <div class="awaiting-add-menu" id="awaiting-add-menu" hidden role="menu">
+          <button type="button" class="awaiting-add-item" data-add="subagent" role="menuitem">
+            <span class="awaiting-add-glyph">◆</span>
+            <span>Spawn subagent</span>
+          </button>
+          <button type="button" class="awaiting-add-item" data-add="schedule" role="menuitem">
+            <span class="awaiting-add-glyph">⏱</span>
+            <span>Add scheduled task</span>
+          </button>
+        </div>
+      </div>
     </aside>
 
     <!-- Response waterfall area -->
@@ -1055,7 +983,9 @@
     <script src="js/scheduling.js"></script>
     <script src="js/models.js"></script>
     <script src="js/slash-autocomplete.js"></script>
+    <script src="js/symframe-pin-store.js"></script>
     <script src="js/symframe.js"></script>
     <script src="js/symframe-substrate.js"></script>
+    <script src="js/symframe-awaiting.js"></script>
   </body>
 </html>