@1agh/maude 0.46.0 → 0.47.0

package/apps/studio/client/panels/ChatPanel.jsx

@@ -152,6 +152,17 @@ const SUGGESTIONS = [
   '/design:new Pricing "a 3-tier pricing page"',
 ];
 
+// DDR-185 — shared "did a genuinely new item arrive" check for the
+// permission/elicitation effects below: both need the identical shape (diff
+// the incoming list's ids against the previous snapshot, fire onNew only for
+// a real arrival, never for a resolution/removal), just against a different
+// ref and a different onNew callback.
+function fireOnNewArrival(prevIdsRef, list, onNew) {
+  const hasNew = list.some((item) => !prevIdsRef.current.has(item.id));
+  prevIdsRef.current = new Set(list.map((item) => item.id));
+  if (hasNew) onNew?.();
+}
+
 function safeStorageGet(key, fallback) {
   try {
     return localStorage.getItem(key) ?? fallback;
@@ -1486,6 +1497,8 @@ function ChatThread({
   designRel,
   transcriptView,
   onSetTranscriptView,
+  onPermissionRequest,
+  onElicitationRequest,
 }) {
   // Live session capabilities (feature-acp-panel-dynamic-claude-code-
   // capabilities) — `caps` is THIS chat's own connection's mode roster +
@@ -1619,9 +1632,29 @@ function ChatThread({
   // Post-turn-end continuation (the tail the client used to drop — RCA F2).
   const [bgParts, setBgParts] = useState([]);
   useEffect(() => conn.onBackground(setBgParts), [conn]);
+  // DDR-185 — surface a "Maude needs your input" attention ping to the parent
+  // (app.jsx) whenever a GENUINELY NEW permission/elicitation request arrives,
+  // not on every list churn (a request resolving/timing out also updates the
+  // list — that must NOT re-fire the notification). Read via a ref, not the
+  // effect's own dependency array, so a parent re-render that produces a new
+  // callback identity doesn't force conn.onPermission/onElicitation to
+  // re-subscribe.
+  const attentionCbRef = useRef({ onPermissionRequest, onElicitationRequest });
+  useEffect(() => {
+    attentionCbRef.current = { onPermissionRequest, onElicitationRequest };
+  }, [onPermissionRequest, onElicitationRequest]);
+
   // Pending permission requests (Milestone B) — one card at a time, oldest first.
   const [pendingPermissions, setPendingPermissions] = useState([]);
-  useEffect(() => conn.onPermission(setPendingPermissions), [conn]);
+  const prevPermissionIdsRef = useRef(new Set());
+  useEffect(
+    () =>
+      conn.onPermission((list) => {
+        fireOnNewArrival(prevPermissionIdsRef, list, attentionCbRef.current.onPermissionRequest);
+        setPendingPermissions(list);
+      }),
+    [conn]
+  );
   const activePermission = pendingPermissions[0] || null;
   const respondPermission = useCallback(
     (decision) => activePermission && conn.respondPermission(activePermission.id, decision),
@@ -1630,7 +1663,15 @@ function ChatThread({
   // Pending elicitation requests (feature-acp-ask-user-question) — same
   // one-at-a-time, oldest-first treatment as pendingPermissions above.
   const [pendingElicitations, setPendingElicitations] = useState([]);
-  useEffect(() => conn.onElicitation(setPendingElicitations), [conn]);
+  const prevElicitationIdsRef = useRef(new Set());
+  useEffect(
+    () =>
+      conn.onElicitation((list) => {
+        fireOnNewArrival(prevElicitationIdsRef, list, attentionCbRef.current.onElicitationRequest);
+        setPendingElicitations(list);
+      }),
+    [conn]
+  );
   const activeElicitation = pendingElicitations[0] || null;
   const respondElicitation = useCallback(
     (response) => activeElicitation && conn.respondElicitation(activeElicitation.id, response),
@@ -1731,6 +1772,8 @@ export default function ChatPanel({
   hidden = false,
   onBusyChange,
   onFinished,
+  onPermissionRequest,
+  onElicitationRequest,
 }) {
   // Model/effort/mode picks — persisted across sessions per config id (never a
   // fixed model/effort pair; see loadPersistedPicks). Read live by each open
@@ -2229,6 +2272,8 @@ export default function ChatPanel({
                 designRel={designRel}
                 transcriptView={transcriptView}
                 onSetTranscriptView={setTranscriptView}
+                onPermissionRequest={onPermissionRequest}
+                onElicitationRequest={onElicitationRequest}
               />
             );
           })

package/apps/studio/client/styles/3-shell-maude.css

@@ -404,6 +404,10 @@
 .st-rp-hd { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
 /* Stage H (INV-3) edit-scope strip — local (this element) vs shared (edits N places). */
 .st-scope { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); flex: none; animation: st-pop var(--dur-soft) var(--ease-out); }
+/* feature-4 detach-component — inline action on the Shared badge. */
+.st-scope-detach { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-xs); font-size: var(--type-xs); background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border-subtle); cursor: pointer; }
+.st-scope-detach:hover { background: var(--bg-3); color: var(--fg-0); }
+.st-scope-detach:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .st-scope-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
 .st-scope--local { color: var(--fg-2); }
 .st-scope--local .st-scope-dot { background: var(--fg-3); }
@@ -664,6 +668,30 @@
 .st-layer--row:hover .st-layer-eye, .st-layer--row:focus-within .st-layer-eye { opacity: 1; }
 .st-layer-eye:hover { color: var(--fg-0); background: var(--bg-3); }
 .st-layer-eye:focus-visible { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
+/* feature-4 T7 — synthetic group row (unstamped wrapper): a muted, italic
+   structural stand-in. Not selectable, not draggable, no eye — it exists only
+   to restore real nesting in the tree. The folder icon reads as "container". */
+.st-layer.is-group { cursor: default; color: var(--fg-3); }
+.st-layer.is-group .st-layer-label { font-style: italic; }
+.st-layer.is-group .st-layer-type { opacity: 0.7; }
+.st-layer.is-group:hover { background: var(--bg-2); }
+/* feature-4 T7a — component-instance rows (Figma purple). ◆ = the component's
+   own frame root, ◇ = an inner member. The purple is deliberately Figma-adjacent
+   so the vocabulary transfers. */
+.st-layer.is-instance { color: var(--layer-instance, #a78bfa); }
+.st-layer.is-instance .st-layer-label { color: var(--layer-instance, #a78bfa); }
+.st-layer.is-instance .st-layer-type { color: var(--layer-instance, #a78bfa); opacity: 0.75; }
+.st-layer-inst-glyph { flex: none; width: 14px; text-align: center; font-size: 10px; color: var(--layer-instance, #a78bfa); }
+.st-layer.is-sel.is-instance { box-shadow: inset 2px 0 0 var(--layer-instance, #a78bfa); }
+/* feature-4 T7b — locked rows: padlock stays visible when locked; dimmed label. */
+.st-layer-lock { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 0; border-radius: var(--radius-xs); opacity: 0; }
+.st-layer--row:hover .st-layer-lock, .st-layer--row:focus-within .st-layer-lock { opacity: 1; }
+.st-layer-lock:hover { color: var(--fg-0); background: var(--bg-3); }
+.st-layer-lock:focus-visible { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
+.st-layer.is-locked .st-layer-lock { opacity: 1; color: var(--fg-1); }
+.st-layer.is-locked .st-layer-label { opacity: 0.6; }
+/* feature-4 T7c — inline rename input matches the row's mono type. */
+.st-layer-rename { flex: 1 1 auto; min-width: 40px; font: inherit; color: var(--fg-0); background: var(--bg-1); border: 1px solid var(--accent); border-radius: var(--radius-xs); padding: 0 4px; outline: none; }
 /* a hidden layer stays dim + keeps its eye visible (so it can be re-shown) */
 .st-layer.is-hidden { opacity: 0.45; }
 .st-layer.is-hidden .st-layer-eye { opacity: 1; color: var(--fg-2); }
@@ -1141,6 +1169,17 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-makeflex:hover:not(:disabled) { border-color: var(--accent); color: var(--fg-0); }
 .st-cp-makeflex:disabled { opacity: 0.5; cursor: default; }
 
+/* feature-3-web-artboards T5 — Grid section's track-list editor. */
+.st-cp-gridtracks { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) 0; }
+.st-cp-gridtracks + .st-cp-gridtracks { margin-top: var(--space-2); border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
+.st-cp-gridtracks-hd { display: flex; align-items: center; justify-content: space-between; }
+.st-cp-gridtracks-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); }
+.st-cp-gridtracks-add { min-height: 22px; padding: 0 var(--space-2); font-size: 10px; }
+.st-cp-gridtrack-row { display: flex; align-items: center; gap: var(--space-1); }
+.st-cp-gridtrack-row .st-cp-nsel { flex: 1 1 auto; }
+.st-cp-gridtrack-remove { flex: 0 0 auto; min-height: 22px; min-width: 22px; padding: 0; justify-content: center; color: var(--fg-2); }
+.st-cp-gridtrack-remove:hover:not(:disabled) { color: var(--status-error); }
+
 /* provenance legend */
 .st-cp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
 .st-cp-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }

package/apps/studio/contextual-toolbar.tsx

@@ -170,9 +170,11 @@ interface AlignTarget {
 /**
  * Resolve every selection to its current world-space box, gated on
  * absolute/fixed positioning — align/distribute/tidy-up write `left`/`top`,
- * which is only meaningful for out-of-flow elements (this codebase
- * deliberately never does an implicit convert-to-absolute-on-drag; see the
- * Stage-D dogfood notes). Returns `null` (all-or-nothing) if any selection
+ * which is only meaningful for out-of-flow elements. This lane still never does
+ * an IMPLICIT convert-to-absolute-on-drag (see the Stage-D dogfood notes); the
+ * EXPLICIT context-menu "Convert children to absolute position" (feature-4 T8,
+ * DDR-188) is the opt-in path to flatten a flow layout first. Returns `null`
+ * (all-or-nothing) if any selection
  * doesn't resolve, or isn't out-of-flow, or has a non-numeric `left`/`top`
  * (e.g. positioned via `right`/`bottom` instead — a known v1 limit).
  */