@vibes.diy/base 14.3.0 → 14.3.1

package/components/UnifiedVibeCard.js

@@ -14,10 +14,13 @@ import { CodingIndicator } from "./CodingIndicator.js";
 import { CopyLinkIconButton } from "./LinkLineControls.js";
 import { AttachmentButton, AttachmentChips } from "./AttachmentRow.js";
 import { useAttachments } from "../attachments/use-attachments.js";
+import { composerFileDrop } from "../attachments/composer-file-drop.js";
 import { PeopleIcon } from "./icons/index.js";
 import { HOME_BRAND_FONT } from "./homeBrandFont.js";
 import { SAFE_AREA_TOP } from "../theme/safe-area.js";
 const UNIFIED_VIBE_CARD_DARK_VARS = `
+  --uvc-closed-build-bg: #28262f;
+  --uvc-closed-build-text: #b5afc2;
   --color-dark-primary: #e0e0e0;
   --color-dark-secondary: #aaaaaa;
   --color-dark-decorative-00: #333333;
@@ -30,7 +33,6 @@ const UNIFIED_VIBE_CARD_DARK_VARS = `
      values here so an explicit .dark host also darkens fields and borders. */
   --vibes-field-bg: var(--vibes-ink-deep, #141414);
   --vibes-card-border: var(--vibes-gray-mid, #555555);
-  --uvc-card-shadow: rgba(255,255,255,0.75);
   --uvc-amber-text: #fbbf24;
   --uvc-blue-text: #93c5fd;
   --uvc-purple-text: #c4b5fd;
@@ -39,7 +41,6 @@ const UNIFIED_VIBE_CARD_DARK_VARS = `
   --uvc-suggestion-text: #e5e7eb;
   --uvc-helper-text: #c2cbd8;
   --uvc-build-text: #bac4d2;
-  --uvc-nav-chat: #c4b5fd;
   --uvc-nav-edit: #fb923c;
   --uvc-nav-share: #4ade80;
   --uvc-nav-faq: #cbd5e1;
@@ -51,12 +52,200 @@ const UNIFIED_VIBE_CARD_DARK_VARS = `
   --color-light-background-00: var(--color-dark-background-00, #1a1a1a);
   --color-light-background-01: var(--color-dark-background-01, #222222);
   --color-light-background-02: var(--color-dark-background-02, #222222);`;
+const UNIFIED_VIBE_CARD_GLASS_LIGHT_VARS = `
+  --uvc-submit-arrow:var(--vibes-cream, #fffff0);
+  --uvc-submit-fill:rgba(64,89,114,.2);
+  --uvc-notch-width: 52px;
+  --uvc-notch-opacity: .5;
+  --uvc-notch-fill: repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 .4px,transparent .4px 1px),linear-gradient(180deg,rgba(16,26,24,.65),rgba(16,26,24,.4) 30%,rgba(16,26,24,.9) 72%,rgba(16,26,24,.55));
+  --uvc-notch-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.2),0 1px 2px rgba(16,26,24,.18);
+  --uvc-composer-border: rgba(16,26,24,.28);
+  --uvc-glass-fill: rgba(255,255,255,.15);
+  --uvc-glass-edge: rgba(255,255,255,.3);
+  --uvc-glass-highlight: rgba(255,255,255,.8);
+  --uvc-glass-shadow: 0 8px 32px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 20px 10px rgba(255,255,255,1);
+  --color-light-background-00: rgba(255,255,255,.24);
+  --color-light-background-01: rgba(255,255,255,.2);
+  --uvc-suggestion-bg: rgba(255,255,255,.28);
+  --vibes-field-bg: rgba(255,255,255,.2);
+  --uvc-nav-home: #2563eb;`;
+const UNIFIED_VIBE_CARD_GLASS_DARK_VARS = `
+  --uvc-submit-arrow:#aaa;
+  --uvc-submit-fill:#000;
+  --uvc-notch-opacity: .25;
+  --uvc-notch-width: 52px;
+  --uvc-notch-fill: repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 .6px,transparent .6px 2px),linear-gradient(180deg,rgba(230,255,245,.6),rgba(230,255,245,.3) 40%,rgba(210,239,228,.12) 58%,rgba(210,239,228,.2));
+  --uvc-notch-shadow: inset 0 0 0 1px rgba(230,255,245,.2),0 1px 2px rgba(0,0,0,.3);
+  --uvc-composer-border: rgba(210,239,228,.28);
+  --uvc-glass-fill: rgba(16,26,24,.72);
+  --uvc-glass-edge: rgba(210,239,228,.28);
+  --uvc-glass-highlight: rgba(230,255,245,.32);
+  --uvc-glass-shadow: 0 8px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 20px 4px rgba(210,239,228,.07);
+  --color-light-background-00: rgba(16,26,24,.28);
+  --color-light-background-01: rgba(16,26,24,.24);
+  --uvc-suggestion-bg: rgba(16,26,24,.32);
+  --vibes-field-bg: rgba(16,26,24,.28);
+  --uvc-nav-home: #93b4ff;`;
+const UNIFIED_VIBE_CARD_OBSIDIAN_VARS = `
+  --uvc-glass-fill: rgba(6,9,10,.94);
+  --uvc-glass-edge: rgba(255,255,255,.12);
+  --uvc-glass-highlight: rgba(255,255,255,.25);
+  --uvc-glass-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.035), inset 0 0 12px rgba(255,255,255,.02);
+  --uvc-nav-home: #93b4ff;`;
 const unifiedVibeCardDarkCss = `
+[data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_LIGHT_VARS}
+}
 @media (prefers-color-scheme: dark) {
-  [data-unified-vibe-card], [data-vibe-handle-menu], [data-vibe-version-menu] {${UNIFIED_VIBE_CARD_DARK_VARS}
+  [data-unified-vibe-card], [data-vibe-handle-menu], [data-vibe-version-menu], [data-vibe-closed-build-status] {${UNIFIED_VIBE_CARD_DARK_VARS}
+  }
+  [data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_DARK_VARS}
   }
 }
-.dark [data-unified-vibe-card], .dark [data-vibe-handle-menu], .dark [data-vibe-version-menu] {${UNIFIED_VIBE_CARD_DARK_VARS}
+.dark [data-unified-vibe-card], .dark [data-vibe-handle-menu], .dark [data-vibe-version-menu], .dark [data-vibe-closed-build-status] {${UNIFIED_VIBE_CARD_DARK_VARS}
+}
+.dark [data-unified-vibe-card] {${UNIFIED_VIBE_CARD_GLASS_DARK_VARS}
+}
+/* Navigation uses clear glass in light mode and Obsidian in dark mode.
+   Give the navigation light strokes without retheming the card. */
+[data-vibe-card-nav] {${UNIFIED_VIBE_CARD_DARK_VARS}
+}
+[data-vibe-switch-glass] {${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}
+}
+[data-vibe-card-nav] {
+ --uvc-glass-fill:rgba(255,255,255,.08);
+ --uvc-glass-edge:rgba(255,255,255,.3);
+ --uvc-glass-highlight:rgba(255,255,255,.8);
+ --uvc-glass-shadow:0 4px 16px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08);
+ --uvc-nav-home:#93b4ff;
+}
+/* The card's layout still includes its footer. Only its glass surface ends
+   at the former divider: retain the outer 1px border and footer's 1px top
+   border as transparent spacing so the circles and switch never move. */
+[data-unified-vibe-card]::before {
+  content: ""; position: absolute; inset: -1px -1px 50px; border-radius: 14px;
+}
+/* The agent panel retains its existing 50px switch reservation, without the
+   ordinary nav row's extra divider pixel. Its body ends one pixel lower. */
+[data-unified-vibe-card][data-vibe-agent-panel="true"]::before { bottom: 49px; }
+[data-vibe-card-nav] { position: relative; isolation: isolate; }
+[data-vibe-card-nav]::before {
+  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); z-index: -1;
+  width: calc(3 * var(--uvc-nav-size, 38px) + 2 * var(--uvc-nav-gap, 6px) + 12px);
+  height: calc(var(--uvc-nav-size, 38px) + 10px); border-radius: 999px;
+}
+[data-unified-vibe-card]::before, [data-vibe-card-nav]::before, [data-vibe-switch-glass]::before {
+  box-sizing: border-box; border: 1px solid transparent; pointer-events: none;
+}
+[data-unified-vibe-card]::before, [data-vibe-card-nav]::before, [data-vibe-switch-glass]::before {
+  background: linear-gradient(to right, transparent, var(--uvc-glass-highlight), transparent) top / 100% 1px no-repeat,
+    linear-gradient(to bottom, var(--uvc-glass-highlight), transparent, var(--uvc-glass-edge)) left / 1px 100% no-repeat,
+    var(--uvc-glass-fill);
+  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
+  box-shadow: var(--uvc-glass-shadow);
+}
+[data-vibe-card-nav]::before { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
+@media (prefers-color-scheme: dark) {
+ [data-vibe-card-nav] {${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}}
+ [data-vibe-card-nav]::before { backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
+}
+.dark [data-vibe-card-nav] {${UNIFIED_VIBE_CARD_OBSIDIAN_VARS}}
+.dark [data-vibe-card-nav]::before { backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
+[data-vibe-card-nav] [data-vibe-nav-selected="true"] svg { stroke-width:3; }
+/* The arrival uses the fitted glass surface, leaving the brand artwork untouched.
+   Keying the layer by status replays same-color arrivals without a JS timer. */
+[data-vibe-switch-glass]:has([data-vibe-switch-highlight])::before { visibility:hidden; }
+[data-vibe-switch-rest] {
+ background:linear-gradient(to right,transparent,var(--uvc-glass-highlight),transparent) top/100% 1px no-repeat,
+ linear-gradient(to bottom,var(--uvc-glass-highlight),transparent,var(--uvc-glass-edge)) left/1px 100% no-repeat,var(--uvc-glass-fill);
+ box-shadow:var(--uvc-glass-shadow);
+ animation:uvc-notification-rest 7s forwards;
+}
+[data-vibe-switch-highlight] {
+ --uvc-arrival-fill:color-mix(in srgb,currentColor 80%,transparent);
+ --uvc-arrival-edge:color-mix(in srgb,color-mix(in srgb,currentColor 50%,white) 60%,transparent);
+ --uvc-arrival-highlight:color-mix(in srgb,color-mix(in srgb,currentColor 20%,white) 90%,transparent);
+ background:linear-gradient(to right,transparent,var(--uvc-arrival-highlight),transparent) top/100% 1px no-repeat,
+ linear-gradient(to bottom,var(--uvc-arrival-highlight),transparent,var(--uvc-arrival-edge)) left/1px 100% no-repeat,var(--uvc-arrival-fill);
+ box-shadow:0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 var(--uvc-arrival-highlight),inset 0 -1px 0 var(--uvc-arrival-edge),inset 0 0 12px rgba(255,255,255,.06);
+ animation:uvc-notification-glass 7s forwards;
+}
+/* Preserve the original Amber material for the yellow/pending status. */
+[data-vibe-switch-highlight][data-arrival-amber="true"] {
+ --uvc-arrival-fill:rgba(191,142,66,.8);
+ --uvc-arrival-edge:rgba(255,229,167,.6);
+ --uvc-arrival-highlight:rgba(255,246,218,.9);
+}
+[data-vibe-switch-highlight], [data-vibe-switch-rest] {
+ box-sizing:border-box; border:1px solid transparent; pointer-events:none;
+ backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
+}
+@keyframes uvc-notification-rest {
+ 0%,100% { opacity:1; }
+ 14.3%,71.4% { opacity:0; }
+}
+@keyframes uvc-notification-glass {
+ 0% { opacity:0; }
+ 14.3%,71.4% { opacity:1; }
+ 100% { opacity:0; }
+}
+@media (prefers-reduced-motion:reduce) {
+ [data-vibe-switch-highlight] { animation-name:uvc-notification-glass-reduced; }
+ [data-vibe-switch-rest] { animation-name:uvc-notification-rest-reduced; }
+}
+@keyframes uvc-notification-rest-reduced {
+ 0%,71.4% { opacity:0; }
+ 100% { opacity:1; }
+}
+@keyframes uvc-notification-glass-reduced {
+ 0%,71.4% { opacity:1; }
+ 100% { opacity:0; }
+}
+/* Fit the painted 102px logo, excluding the SVG's transparent side margins.
+   Match the nav oval's height without moving the existing 120×44 hit target. */
+[data-vibe-switch-glass] { isolation: isolate; }
+[data-vibe-switch-glass]::before, [data-vibe-switch-highlight], [data-vibe-switch-rest] {
+  content: ""; position: absolute; left: 6px; right: 6px; top: calc(50% + 1px);
+  height: calc(var(--uvc-nav-size, 38px) + 10px); transform: translateY(-50%);
+  border-radius: 999px; z-index: -1;
+}
+[data-unified-vibe-card] form.vibes-edit-field {
+  --vibes-card-border: var(--uvc-composer-border);
+}
+/* The selected Frost header rule fades at both ends at half opacity,
+   without consuming any of the card's content height. */
+[data-vibe-card-header]::after {
+  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--uvc-glass-edge) 22%, var(--uvc-glass-edge) 78%, transparent);
+  opacity: .5; pointer-events: none;
+}
+/* A · Line: the clip edge sits under the painted switch, inside the 120px
+   hit box (whose SVG has transparent air at its left). 22px padding leaves
+   the resting strip at right:132px without changing the switch geometry. */
+[data-vibe-closed-build-status] {
+  position: absolute; left: 12px; right: 110px; bottom: 17px;
+  z-index: 2; display: flex; justify-content: flex-end; padding-right: 22px;
+  overflow: hidden; pointer-events: none; box-sizing: border-box;
+}
+[data-vibe-closed-build-line] {
+  min-width: 0; max-width: 100%; box-sizing: border-box;
+  padding: 3px 5px; border-radius: 3px;
+  background: var(--uvc-closed-build-bg, #fff);
+  color: var(--uvc-closed-build-text, #6d6973);
+  font: 12px/18px Inter, system-ui, sans-serif;
+  transform: translateX(calc(100% + 22px));
+  transition: transform 240ms cubic-bezier(.22,.68,0,1);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+[data-vibe-closed-build-line][data-revealed="true"] { transform: translateX(0); }
+[data-vibe-closed-build-line] [data-testid="thinking-line"] {
+  display: flex; align-items: baseline; gap: 6px; min-width: 0;
+}
+[data-vibe-closed-build-line] [data-testid="thinking-line-glyph"] { flex-shrink: 0; }
+[data-vibe-closed-build-line] [data-testid="thinking-line-verb"] {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-vibe-closed-build-line] { transition: none; }
 }
 /* Composer submit button: a blue pulsating glow while the field holds unsent
    content, nudging the user to send it — the same "something's live, act on it"
@@ -126,14 +315,14 @@ const unifiedVibeCardDarkCss = `
     animation: none;
   }
 }
-/* Four shrink-proof nav circles share the footer with the 120px logo spacer.
+/* Three shrink-proof nav circles (Home / Edit / Share) share the footer with the 120px logo spacer.
    Compact size/gap steps keep them clear of the logo on narrow phones without
    flex shrinking circles into ovals. */
 @media (max-width: 400px) {
-  [data-unified-vibe-card] { --uvc-nav-size: 34px; --uvc-nav-gap: 4px; }
+  [data-unified-vibe-card], [data-vibe-switch-glass] { --uvc-nav-size: 34px; --uvc-nav-gap: 4px; }
 }
 @media (max-width: 360px) {
-  [data-unified-vibe-card] { --uvc-nav-size: 30px; }
+  [data-unified-vibe-card], [data-vibe-switch-glass] { --uvc-nav-size: 30px; }
 }
 /* Composer input row — a FIELD, not a button (Storybook audition C2, #4578).
    It used to wear a hard 2px/3px offset shadow over the card's own grey, which
@@ -220,7 +409,7 @@ const unifiedVibeCardDarkCss = `
 }
 [data-vibe-card-editor-tabs] [role="tab"] {
   min-height: 36px;
-  padding-inline: 4px !important;
+  padding-inline: 3px !important;
   font-size: 14px !important;
 }
 [data-unified-vibe-card] [data-testid="build-card"] {
@@ -253,8 +442,63 @@ const unifiedVibeCardDarkCss = `
 }`;
 const CARD_VIEWPORT_HEIGHT = "80%";
 const CARD_FULL_VIEWPORT_HEIGHT = "94%";
+function ClosedBuildStatus({ visible, content }) {
+    const [retainedContent, setRetainedContent] = useState(visible ? content : undefined);
+    const [revealed, setRevealed] = useState(false);
+    const [reducedMotion, setReducedMotion] = useState(false);
+    useEffect(() => {
+        if (typeof window.matchMedia !== "function")
+            return;
+        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+        function updateMotion() {
+            setReducedMotion(media.matches);
+        }
+        updateMotion();
+        media.addEventListener("change", updateMotion);
+        return () => media.removeEventListener("change", updateMotion);
+    }, []);
+    useEffect(() => {
+        if (visible)
+            setRetainedContent(content);
+    }, [visible, content]);
+    useEffect(() => {
+        let firstFrame;
+        let secondFrame;
+        let exitTimer;
+        if (visible) {
+            if (reducedMotion)
+                setRevealed(true);
+            else
+                firstFrame = requestAnimationFrame(() => {
+                    secondFrame = requestAnimationFrame(() => setRevealed(true));
+                });
+        }
+        else {
+            setRevealed(false);
+            if (reducedMotion)
+                setRetainedContent(undefined);
+            else
+                exitTimer = setTimeout(() => setRetainedContent(undefined), 240);
+        }
+        return () => {
+            if (firstFrame !== undefined)
+                cancelAnimationFrame(firstFrame);
+            if (secondFrame !== undefined)
+                cancelAnimationFrame(secondFrame);
+            clearTimeout(exitTimer);
+        };
+    }, [visible, reducedMotion]);
+    if (retainedContent === undefined || retainedContent === null)
+        return undefined;
+    return (React.createElement("div", { "data-vibe-closed-build-status": true, "data-testid": "closed-build-status", "aria-hidden": visible ? undefined : true, inert: !visible },
+        React.createElement("div", { "data-vibe-closed-build-line": true, "data-revealed": revealed }, retainedContent)));
+}
 export function UnifiedVibeCard(props) {
     const { appTitle, appSlug, isTwinkling, isTeasing, open: controlledOpen, onOpenChange } = props;
+    const switchGlassColor = props.switchOvalColor ??
+        (props.versionLocked || props.publishState === "draft" || props.onViewDraft !== undefined
+            ? ovalColors.yellow
+            : ovalColors.neutral);
     const [internalOpen, setInternalOpen] = useState(false);
     const open = controlledOpen ?? internalOpen;
     const setOpen = (next) => {
@@ -413,10 +657,11 @@ export function UnifiedVibeCard(props) {
             setEverOpened(true);
     }, [open]);
     const retained = Boolean(props.keepMounted) && everOpened;
-    const scrollRegionRef = useRef(null);
+    const internalScrollRegionRef = useRef(null);
+    const scrollRegionRef = props.scrollContainerRef ?? internalScrollRegionRef;
     const chipsRegionRef = useRef(null);
     const stickToBottomRef = useRef(true);
-    const hasHistory = props.historyBody != null && props.body == null;
+    const hasHistory = (props.historyBody != null || props.streamBody != null) && props.body == null;
     const streamLive = props.streamBody != null && props.streamSettled !== true;
     const chipBuildLive = streamLive && props.activeChip !== undefined;
     const visibleChips = props.activeChip === undefined || props.chips?.slice(0, 3).includes(props.activeChip) === true
@@ -571,7 +816,8 @@ export function UnifiedVibeCard(props) {
     const resizeValueNow = Math.round(Math.min(Math.max(userHeight ?? cardRef.current?.offsetHeight ?? 0, RESIZE_MIN), resizeValueMax));
     return (React.createElement(React.Fragment, null,
         React.createElement("style", null, unifiedVibeCardDarkCss),
-        !hidden && (mounted || retained) && (React.createElement("div", { ref: cardRef, role: "dialog", "aria-label": "Vibe menu", "data-unified-vibe-card": true, className: props.className, "aria-hidden": mounted ? undefined : true, inert: mounted ? undefined : true, style: {
+        React.createElement(ClosedBuildStatus, { visible: open === false && hidden === false && props.closedBuildStatus !== undefined && props.closedBuildStatus !== null, content: props.closedBuildStatus }),
+        !hidden && (mounted || retained) && (React.createElement("div", { ref: cardRef, role: "dialog", "aria-label": "Vibe menu", "data-unified-vibe-card": true, "data-vibe-agent-panel": agentPanelActive, className: props.className, "aria-hidden": mounted ? undefined : true, inert: mounted ? undefined : true, style: {
                 position: "absolute",
                 left: 2,
                 right: 2,
@@ -580,12 +826,11 @@ export function UnifiedVibeCard(props) {
                 borderRadius: 14,
                 maxHeight: cardHeight,
                 height: cardHeight,
-                overflow: "hidden",
+                overflow: "visible",
                 display: "flex",
                 flexDirection: "column",
-                background: "var(--color-light-background-00, #fff)",
-                border: "1px solid var(--vibes-near-black, #1a1a1a)",
-                boxShadow: "0 8px 40px var(--uvc-card-shadow, rgba(0,0,0,0.75))",
+                background: "transparent",
+                border: "1px solid transparent",
                 transformOrigin: "bottom right",
                 transform: grown ? "scale(1)" : "scale(0)",
                 transition: dragging ? scaleTransition : `${scaleTransition}, max-height 0.24s ease, height 0.24s ease`,
@@ -593,6 +838,7 @@ export function UnifiedVibeCard(props) {
                 ...(mounted ? null : { visibility: "hidden" }),
             } },
             React.createElement("div", { "data-vibe-card-content": true, style: {
+                    position: "relative",
                     display: "flex",
                     flexDirection: "column",
                     minHeight: 0,
@@ -600,216 +846,229 @@ export function UnifiedVibeCard(props) {
                     opacity: grown ? 1 : 0,
                     transition: grown ? "opacity 0.18s ease 0.14s" : "opacity 0.1s ease",
                 }, className: "text-light-primary dark:text-dark-primary" },
-                React.createElement("div", { style: {
+                React.createElement("div", { "data-vibe-card-body": true, style: {
                         display: "flex",
-                        alignItems: "center",
-                        gap: 8,
-                        padding: "10px 10px 10px",
-                        flexShrink: 0,
-                        position: "relative",
-                        userSelect: "none",
+                        flexDirection: "column",
+                        flex: "1 1 auto",
+                        minHeight: 0,
+                        overflow: "hidden",
+                        borderRadius: 13,
                     } },
-                    React.createElement("div", { "data-testid": "vibe-card-resize-handle", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize chat height", "aria-valuemin": RESIZE_MIN, "aria-valuemax": resizeValueMax, "aria-valuenow": resizeValueNow, tabIndex: 0, onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: endHandleDrag, onPointerCancel: cancelHandleDrag, onKeyDown: onHandleKeyDown, onDoubleClick: () => clearForcedHeight(), style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            zIndex: 0,
-                            cursor: "ns-resize",
-                            touchAction: "none",
-                        } },
-                        React.createElement("span", { "aria-hidden": true, style: {
-                                position: "absolute",
-                                top: 4,
-                                left: "50%",
-                                transform: "translateX(-50%)",
-                                width: 44,
-                                height: 4,
-                                borderRadius: 999,
-                                background: "var(--color-light-decorative-01, #ddd)",
-                            } })),
-                    React.createElement("div", { style: {
-                            position: "relative",
-                            width: 30,
-                            height: 30,
-                            borderRadius: 8,
+                    React.createElement("div", { "data-vibe-card-header": true, style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "10px 10px 10px",
                             flexShrink: 0,
-                            overflow: "hidden",
-                            background: "linear-gradient(160deg,#312e81,#4c1d95)",
-                            border: "1px solid rgba(0,0,0,0.15)",
-                            pointerEvents: "none",
+                            position: "relative",
+                            userSelect: "none",
                         } },
-                        props.appIconUrl && (React.createElement("img", { src: props.appIconUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", transform: "scale(2)" } })),
-                        React.createElement(CodingIndicator, { active: props.coding === true })),
-                    React.createElement("div", { style: { lineHeight: 1.2, minWidth: 0, flex: "1 1 auto" } },
-                        React.createElement("strong", { style: {
-                                fontFamily: HOME_BRAND_FONT,
-                                display: "block",
-                                fontSize: 13,
-                                lineHeight: 1.3,
+                        React.createElement("div", { "data-testid": "vibe-card-resize-handle", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize chat height", "aria-valuemin": RESIZE_MIN, "aria-valuemax": resizeValueMax, "aria-valuenow": resizeValueNow, tabIndex: 0, onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: endHandleDrag, onPointerCancel: cancelHandleDrag, onKeyDown: onHandleKeyDown, onDoubleClick: () => clearForcedHeight(), style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                zIndex: 0,
+                                cursor: "ns-resize",
+                                touchAction: "none",
+                            } },
+                            React.createElement("span", { "aria-hidden": true, style: {
+                                    position: "absolute",
+                                    top: 4,
+                                    left: "50%",
+                                    transform: "translateX(-50%)",
+                                    width: "var(--uvc-notch-width, 44px)",
+                                    height: 4,
+                                    borderRadius: 999,
+                                    background: "var(--uvc-notch-fill)",
+                                    boxShadow: "var(--uvc-notch-shadow)",
+                                    opacity: "var(--uvc-notch-opacity)",
+                                } })),
+                        React.createElement("div", { style: {
+                                position: "relative",
+                                width: 30,
+                                height: 30,
+                                borderRadius: 8,
+                                flexShrink: 0,
                                 overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap",
-                            } }, appTitle),
-                        appSlug &&
-                            (props.onOpenApp === undefined && props.onCopyAppUrl === undefined ? (React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, appSlug)) : (React.createElement("div", { "data-vibe-card-header-controls": "true", "data-testid": "vibe-card-slug-line", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 4, minWidth: 0 } },
-                                props.onOpenApp === undefined ? (React.createElement("span", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, appSlug)) : (React.createElement("button", { type: "button", "data-testid": "vibe-card-slug-link", onClick: props.onOpenApp, className: "text-light-secondary dark:text-dark-secondary", style: {
-                                        font: "inherit",
-                                        fontSize: 12,
-                                        lineHeight: "20px",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                        minWidth: 0,
-                                        textDecoration: "underline",
-                                        textUnderlineOffset: 2,
-                                        background: "none",
-                                        border: "none",
-                                        padding: 0,
-                                        cursor: "pointer",
-                                        textAlign: "left",
-                                    } }, appSlug)),
-                                props.onCopyAppUrl !== undefined && React.createElement(CopyLinkIconButton, { onCopy: props.onCopyAppUrl, color: "currentColor" }))))),
+                                background: "var(--vibes-cream, #fffff0)",
+                                border: "1px solid rgba(0,0,0,0.15)",
+                                pointerEvents: "none",
+                            } },
+                            props.appIconUrl && (React.createElement("img", { src: props.appIconUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", transform: "scale(2)" } })),
+                            React.createElement(CodingIndicator, { active: props.coding === true })),
+                        React.createElement("div", { style: { lineHeight: 1.2, minWidth: 0, flex: "1 1 auto" } },
+                            React.createElement("strong", { style: {
+                                    fontFamily: HOME_BRAND_FONT,
+                                    display: "block",
+                                    fontSize: 13,
+                                    lineHeight: 1.3,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                } }, appTitle),
+                            appSlug &&
+                                (props.onOpenApp === undefined && props.onCopyAppUrl === undefined ? (React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, appSlug)) : (React.createElement("div", { "data-vibe-card-header-controls": "true", "data-testid": "vibe-card-slug-line", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 4, minWidth: 0 } },
+                                    props.onOpenApp === undefined ? (React.createElement("span", { className: "text-light-secondary dark:text-dark-secondary", style: {
+                                            fontSize: 12,
+                                            minWidth: 0,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                        } }, appSlug)) : (React.createElement("button", { type: "button", "data-testid": "vibe-card-slug-link", onClick: props.onOpenApp, className: "text-light-secondary dark:text-dark-secondary", style: {
+                                            font: "inherit",
+                                            fontSize: 12,
+                                            lineHeight: "20px",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                            minWidth: 0,
+                                            textDecoration: "underline",
+                                            textUnderlineOffset: 2,
+                                            background: "none",
+                                            border: "none",
+                                            padding: 0,
+                                            cursor: "pointer",
+                                            textAlign: "left",
+                                        } }, appSlug)),
+                                    props.onCopyAppUrl !== undefined && (React.createElement(CopyLinkIconButton, { onCopy: props.onCopyAppUrl, color: "currentColor" })))))),
+                        (() => {
+                            const badges = [
+                                props.publishState === "old" ? React.createElement(DraftBadge, { key: "old", variant: "old" }) : null,
+                                props.publishState === "draft" && !props.versionLocked ? React.createElement(DraftBadge, { key: "draft", variant: "draft" }) : null,
+                                props.versionLocked ? React.createElement(LockedBadge, { key: "locked" }) : null,
+                                !props.publishState && props.onViewDraft && !props.versionLocked ? (React.createElement(ViewDraftBadge, { key: "view-draft", onClick: props.onViewDraft })) : null,
+                            ].filter(Boolean);
+                            return badges.length === 0 ? null : (React.createElement("div", { "data-vibe-card-header-controls": "true", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10, flexShrink: 0 } }, badges));
+                        })(),
+                        React.createElement("div", { "data-vibe-card-header-controls": "true", style: {
+                                position: "relative",
+                                zIndex: 1,
+                                marginLeft: "auto",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 10,
+                                flexShrink: 0,
+                                maxWidth: "38%",
+                                minWidth: 0,
+                            } }, props.hideViewerTag ? null : props.handleSlug ? (React.createElement("div", { ref: pickerWrapRef, style: { position: "relative", minWidth: 0, maxWidth: "100%" } },
+                            React.createElement(ViewerTagView, { slug: props.handleSlug, displayName: `@${props.handleSlug}`, avatarUrl: props.handleAvatarUrl, editable: Boolean(props.onPickAvatar), onPickFile: props.onPickAvatar, onTagClick: pickerInteractive ? () => setPickerOpen(!pickerOpen) : undefined, tagExpanded: pickerOpen, tagLabel: "Account and handles", style: {
+                                    background: "var(--color-light-background-01, #eee)",
+                                    border: "1px solid var(--color-light-decorative-01, #ddd)",
+                                    color: "var(--color-light-primary, #333)",
+                                    fontSize: 13,
+                                    padding: "3px 8px 3px 4px",
+                                    minWidth: 0,
+                                    maxWidth: "100%",
+                                } }))) : props.viewerPending ? (React.createElement(ViewerTagView, { slug: "", pending: true })) : props.viewerNeedsHandle && !pickerInteractive ? (React.createElement(ViewerTagView, { slug: "", needsHandle: true, onChooseHandle: props.onChooseHandle })) : props.viewerNeedsHandle ? (React.createElement("div", { ref: pickerWrapRef },
+                            React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : pickerInteractive ? (React.createElement("div", { ref: pickerWrapRef },
+                            React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : (React.createElement(ViewerTagView, { slug: "?", anonymous: true, onSignIn: props.onSignIn })))),
                     (() => {
-                        const badges = [
-                            props.publishState === "old" ? React.createElement(DraftBadge, { key: "old", variant: "old" }) : null,
-                            props.publishState === "draft" && !props.versionLocked ? React.createElement(DraftBadge, { key: "draft", variant: "draft" }) : null,
-                            props.versionLocked ? React.createElement(LockedBadge, { key: "locked" }) : null,
-                            !props.publishState && props.onViewDraft && !props.versionLocked ? (React.createElement(ViewDraftBadge, { key: "view-draft", onClick: props.onViewDraft })) : null,
-                        ].filter(Boolean);
-                        return badges.length === 0 ? null : (React.createElement("div", { "data-vibe-card-header-controls": "true", style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10, flexShrink: 0 } }, badges));
+                        const wizardBanner = (props.publishWizardActive === true || props.publishWizardError === true) && props.onPublish;
+                        if (wizardBanner && props.selectedNav !== "share") {
+                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
+                                React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing, wizardActive: props.publishWizardActive, wizardError: props.publishWizardError, escapeRevealed: props.publishEscapeRevealed, onPublishWithoutAccess: props.onPublishWithoutAccess, onRetryWizard: props.onRetryWizard })));
+                        }
+                        if (props.autoPublishError === true && props.selectedNav !== "share") {
+                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
+                                React.createElement(PublishBanner, { variant: undefined, autoPublishError: true, onRetryAutoPublish: props.onRetryAutoPublish })));
+                        }
+                        if (props.statusBanner && props.selectedNav !== "share") {
+                            return React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } }, props.statusBanner);
+                        }
+                        if (props.versionLocked === true && props.selectedNav !== "share") {
+                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
+                                React.createElement(PublishBanner, { variant: undefined, locked: true, onUnlock: props.onUnlock })));
+                        }
+                        if (props.signedOutSavePrompt && props.selectedNav !== "share") {
+                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
+                                React.createElement(SignedOutSavePrompt, { onSignIn: props.onSignIn })));
+                        }
+                        if (props.selectedNav === "share")
+                            return null;
+                        const hasPendingVersion = props.publishState === "draft" || props.publishState === "old";
+                        if (hasPendingVersion && Boolean(props.onPublish)) {
+                            return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
+                                React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing })));
+                        }
+                        return null;
                     })(),
-                    React.createElement("div", { "data-vibe-card-header-controls": "true", style: {
-                            position: "relative",
-                            zIndex: 1,
-                            marginLeft: "auto",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 10,
+                    props.editorTab != null && props.selectedNav !== "share" && !agentPanelActive && (React.createElement("div", { "data-vibe-card-editor-tabs": true, style: { padding: "0 14px 6px", flexShrink: 0 } },
+                        React.createElement(EditorTabStrip, { tab: props.editorTab, onTab: (t) => props.onEditorTab?.(t), standing: {
+                                viewerMode: props.viewerMode,
+                                memberReadOnly: props.memberReadOnly,
+                                adminMode: props.adminMode,
+                                versionLocked: props.versionLocked,
+                                publishState: props.publishState,
+                                publishAccess: props.publishAccess,
+                            } }))),
+                    props.body == null && props.composerControls && !agentPanelActive && (React.createElement("div", { "data-testid": "vibe-card-composer-controls", "aria-hidden": streamLive ? true : undefined, inert: streamLive ? true : undefined, style: {
+                            padding: "0 14px",
+                            marginBottom: 6,
                             flexShrink: 0,
-                            maxWidth: "38%",
-                            minWidth: 0,
-                        } }, props.hideViewerTag ? null : props.handleSlug ? (React.createElement("div", { ref: pickerWrapRef, style: { position: "relative", minWidth: 0, maxWidth: "100%" } },
-                        React.createElement(ViewerTagView, { slug: props.handleSlug, displayName: `@${props.handleSlug}`, avatarUrl: props.handleAvatarUrl, editable: Boolean(props.onPickAvatar), onPickFile: props.onPickAvatar, onTagClick: pickerInteractive ? () => setPickerOpen(!pickerOpen) : undefined, tagExpanded: pickerOpen, tagLabel: "Account and handles", style: {
-                                background: "var(--color-light-background-01, #eee)",
-                                border: "1px solid var(--color-light-decorative-01, #ddd)",
-                                color: "var(--color-light-primary, #333)",
-                                fontSize: 13,
-                                padding: "3px 8px 3px 4px",
-                                minWidth: 0,
-                                maxWidth: "100%",
-                            } }))) : props.viewerPending ? (React.createElement(ViewerTagView, { slug: "", pending: true })) : props.viewerNeedsHandle && !pickerInteractive ? (React.createElement(ViewerTagView, { slug: "", needsHandle: true, onChooseHandle: props.onChooseHandle })) : props.viewerNeedsHandle ? (React.createElement("div", { ref: pickerWrapRef },
-                        React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : pickerInteractive ? (React.createElement("div", { ref: pickerWrapRef },
-                        React.createElement(ViewerTagView, { slug: "?", displayName: "Account", onTagClick: () => setPickerOpen(!pickerOpen), tagExpanded: pickerOpen, tagLabel: "Account and handles" }))) : (React.createElement(ViewerTagView, { slug: "?", anonymous: true, onSignIn: props.onSignIn })))),
-                (() => {
-                    const wizardBanner = (props.publishWizardActive === true || props.publishWizardError === true) && props.onPublish;
-                    if (wizardBanner && props.selectedNav !== "share") {
-                        return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                            React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing, wizardActive: props.publishWizardActive, wizardError: props.publishWizardError, escapeRevealed: props.publishEscapeRevealed, onPublishWithoutAccess: props.onPublishWithoutAccess, onRetryWizard: props.onRetryWizard })));
-                    }
-                    if (props.autoPublishError === true && props.selectedNav !== "share") {
-                        return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                            React.createElement(PublishBanner, { variant: undefined, autoPublishError: true, onRetryAutoPublish: props.onRetryAutoPublish })));
-                    }
-                    if (props.statusBanner && props.selectedNav !== "share") {
-                        return React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } }, props.statusBanner);
-                    }
-                    if (props.versionLocked === true && props.selectedNav !== "share") {
-                        return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                            React.createElement(PublishBanner, { variant: undefined, locked: true, onUnlock: props.onUnlock })));
-                    }
-                    if (props.signedOutSavePrompt && props.selectedNav !== "share") {
-                        return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                            React.createElement(SignedOutSavePrompt, { onSignIn: props.onSignIn })));
-                    }
-                    if (props.selectedNav === "share")
-                        return null;
-                    const hasPendingVersion = props.publishState === "draft" || props.publishState === "old";
-                    if (hasPendingVersion && Boolean(props.onPublish)) {
-                        return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                            React.createElement(PublishBanner, { variant: props.publishState === "draft" || props.publishState === "old" ? props.publishState : undefined, onPublish: props.onPublish, publishing: props.publishing })));
-                    }
-                    return null;
-                })(),
-                props.editorTab != null && props.editorTab !== "edit-chat" && props.selectedNav !== "share" && !agentPanelActive && (React.createElement("div", { "data-vibe-card-editor-tabs": true, style: { padding: "0 14px 6px", flexShrink: 0 } },
-                    React.createElement(EditorTabStrip, { tab: props.editorTab, onTab: (t) => props.onEditorTab?.(t), standing: {
-                            viewerMode: props.viewerMode,
-                            memberReadOnly: props.memberReadOnly,
-                            adminMode: props.adminMode,
-                            versionLocked: props.versionLocked,
-                            publishState: props.publishState,
-                            publishAccess: props.publishAccess,
-                        } }))),
-                props.body == null && props.composerControls && !agentPanelActive && (React.createElement("div", { "data-testid": "vibe-card-composer-controls", "aria-hidden": streamLive ? true : undefined, inert: streamLive ? true : undefined, style: {
-                        padding: "0 14px",
-                        marginBottom: 6,
-                        flexShrink: 0,
-                        ...(streamLive ? { visibility: "hidden" } : null),
-                    } }, props.composerControls)),
-                React.createElement("div", { ref: scrollRegionRef, "data-testid": "vibe-card-scroll", style: {
-                        padding: "0 14px 4px",
-                        overflowY: "auto",
-                        overflowX: "hidden",
-                        flex: "1 1 auto",
-                        minHeight: 0,
-                        ...((props.bodyFill && props.body) || agentPanelActive || props.body == null
-                            ? { display: "flex", flexDirection: "column" }
-                            : null),
-                    } },
-                    props.retainedEditor != null && (React.createElement("div", { hidden: !props.editorVisible || agentPanelActive, inert: !props.editorVisible || agentPanelActive ? true : undefined, style: props.editorVisible && !agentPanelActive ? { flex: "1 1 auto", minHeight: 0 } : { display: "none" } }, props.retainedEditor)),
-                    agentPanelActive ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.agentPanel)) : props.editorVisible && props.retainedEditor != null ? null : props.editorTab === "standing" ? (React.createElement(ViewerStandingView, { viewerMode: props.viewerMode, memberReadOnly: props.memberReadOnly, adminMode: props.adminMode, versionLocked: props.versionLocked, publishState: props.publishState, publishAccess: props.publishAccess, myGrant: props.myGrant, onToggleAdmin: props.onToggleAdmin, onUnlock: props.onUnlock })) : props.body != null ? (props.bodyFill ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.body)) : (props.body)) : (React.createElement(React.Fragment, null,
-                        React.createElement("div", { ref: chipsRegionRef, style: streamFillActive
-                                ? { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" }
-                                : { flex: "1 0 auto", minHeight: 0 } },
-                            props.historyBody && (React.createElement("div", { "data-testid": "vibe-card-history", "aria-hidden": props.streamBody ? true : undefined, inert: props.streamBody ? true : undefined, style: { marginBottom: 8, ...(props.streamBody ? { display: "none" } : null) } }, props.historyBody)),
-                            React.createElement("div", { "data-testid": "vibe-card-stream-region", style: {
-                                    position: "relative",
-                                    ...(chipBuildLive ? { display: "flex", flexDirection: "column" } : {}),
-                                    ...(streamFillActive ? { flex: "1 1 auto", minHeight: 0 } : null),
-                                } },
-                                props.streamBody && (React.createElement("div", { "data-testid": streamLive ? undefined : "vibe-card-stream-settled", style: streamLive
-                                        ? {
-                                            ...(chipBuildLive ? { flex: "1 1 auto" } : { position: "absolute", inset: 0 }),
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            minHeight: 0,
-                                        }
-                                        : { marginBottom: 8 } },
-                                    React.createElement("div", { style: streamLive ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : undefined }, props.streamBody),
-                                    props.liveDuringBuild === true && React.createElement(PendingMessages, { messages: queued }))),
-                                React.createElement("div", { "aria-hidden": streamLive && !chipBuildLive ? true : undefined, inert: streamLive && !chipBuildLive ? true : undefined, style: streamLive && !chipBuildLive ? { visibility: "hidden" } : { flexShrink: 0 } }, (props.seedOffer || props.upgradeChips || (visibleChips && visibleChips.length > 0)) && (React.createElement("div", { className: "mx-auto mt-2 w-full max-w-5xl" },
-                                    React.createElement(ChatMessageRow, { role: "ai", rowAttrs: { "data-message-role": "suggestions" } },
-                                        React.createElement("div", { className: "vibes-chip-well flex flex-col", "data-testid": "vibe-chip-set" },
-                                            (props.seedOffer || props.upgradeChips) && (React.createElement("div", { className: "flex flex-col gap-[6px]", inert: props.activeChip !== undefined },
-                                                props.seedOffer,
-                                                props.upgradeChips)),
-                                            visibleChips && visibleChips.length > 0 && (React.createElement(OptionButtons, { options: visibleChips, activeOption: props.activeChip, inSet: true, isFirst: props.activeChip === undefined, firstMessage: props.isOwner
-                                                    ? "Suggested requests:"
-                                                    : "Describe a change to remix your own copy of this app:", onSelect: (o) => {
-                                                    const r = props.onSelectChip?.(o);
-                                                    return r && typeof r === "object" && "then" in r ? r.then((ok) => ok ?? false) : false;
-                                                }, decorate: (option) => decorateChip(option, props) }))))))),
-                                props.streamFooter !== undefined && React.createElement("div", { className: "mx-auto w-full max-w-5xl" }, props.streamFooter)))))),
-                props.body == null && !agentPanelActive && (React.createElement("div", { style: { flexShrink: 0, padding: "0 14px 10px" } },
-                    React.createElement(OtherRow, { value: draft, onValueChange: setDraft, queued: queued, onQueuedChange: setQueued, onSubmitOther: props.onSubmitOther, generating: props.generating, liveDuringBuild: props.liveDuringBuild, canSendNow: props.canSendNow, onStop: props.onStop, stopDisabled: props.stopDisabled, attachmentsCtl: attachmentsCtl }))),
+                            ...(streamLive ? { visibility: "hidden" } : null),
+                        } }, props.composerControls)),
+                    React.createElement("div", { ref: scrollRegionRef, "data-testid": "vibe-card-scroll", style: {
+                            padding: "0 14px 4px",
+                            overflowY: "auto",
+                            overflowX: "hidden",
+                            flex: "1 1 auto",
+                            minHeight: 0,
+                            ...((props.bodyFill && props.body) || agentPanelActive || props.body == null
+                                ? { display: "flex", flexDirection: "column" }
+                                : null),
+                        } },
+                        props.retainedEditor != null && (React.createElement("div", { hidden: !props.editorVisible || agentPanelActive, inert: !props.editorVisible || agentPanelActive ? true : undefined, style: props.editorVisible && !agentPanelActive ? { flex: "1 1 auto", minHeight: 0 } : { display: "none" } }, props.retainedEditor)),
+                        agentPanelActive ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.agentPanel)) : props.editorVisible && props.retainedEditor != null ? null : props.editorTab === "standing" ? (React.createElement(ViewerStandingView, { viewerMode: props.viewerMode, memberReadOnly: props.memberReadOnly, adminMode: props.adminMode, versionLocked: props.versionLocked, publishState: props.publishState, publishAccess: props.publishAccess, myGrant: props.myGrant, onToggleAdmin: props.onToggleAdmin, onUnlock: props.onUnlock })) : props.body != null ? (props.bodyFill ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.body)) : (props.body)) : (React.createElement(React.Fragment, null,
+                            React.createElement("div", { ref: chipsRegionRef, style: streamFillActive
+                                    ? { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" }
+                                    : { flex: "1 0 auto", minHeight: 0 } },
+                                props.historyBody && (React.createElement("div", { "data-testid": "vibe-card-history", "aria-hidden": props.streamBody ? true : undefined, inert: props.streamBody ? true : undefined, style: { marginBottom: 8, ...(props.streamBody ? { display: "none" } : null) } }, props.historyBody)),
+                                React.createElement("div", { "data-testid": "vibe-card-stream-region", style: {
+                                        position: "relative",
+                                        ...(chipBuildLive ? { display: "flex", flexDirection: "column" } : {}),
+                                        ...(streamFillActive ? { flex: "1 1 auto", minHeight: 0 } : null),
+                                    } },
+                                    props.streamBody && (React.createElement("div", { "data-testid": streamLive ? undefined : "vibe-card-stream-settled", style: streamLive
+                                            ? {
+                                                ...(chipBuildLive ? { flex: "1 1 auto" } : { position: "absolute", inset: 0 }),
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                minHeight: 0,
+                                            }
+                                            : { marginBottom: 8 } },
+                                        React.createElement("div", { style: streamLive ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : undefined }, props.streamBody),
+                                        props.liveDuringBuild === true && React.createElement(PendingMessages, { messages: queued }))),
+                                    React.createElement("div", { "aria-hidden": streamLive && !chipBuildLive ? true : undefined, inert: streamLive && !chipBuildLive ? true : undefined, style: streamLive && !chipBuildLive ? { visibility: "hidden" } : { flexShrink: 0 } }, (props.seedOffer || props.upgradeChips || (visibleChips && visibleChips.length > 0)) && (React.createElement("div", { className: "mx-auto mt-2 w-full max-w-5xl" },
+                                        React.createElement(ChatMessageRow, { role: "ai", rowAttrs: { "data-message-role": "suggestions" } },
+                                            React.createElement("div", { className: "vibes-chip-well flex flex-col", "data-testid": "vibe-chip-set" },
+                                                (props.seedOffer || props.upgradeChips) && (React.createElement("div", { className: "flex flex-col gap-[6px]", inert: props.activeChip !== undefined },
+                                                    props.seedOffer,
+                                                    props.upgradeChips)),
+                                                visibleChips && visibleChips.length > 0 && (React.createElement(OptionButtons, { options: visibleChips, activeOption: props.activeChip, inSet: true, isFirst: props.activeChip === undefined, firstMessage: props.isOwner
+                                                        ? "Suggested requests:"
+                                                        : "Describe a change to remix your own copy of this app:", onSelect: (o) => {
+                                                        const r = props.onSelectChip?.(o);
+                                                        return r && typeof r === "object" && "then" in r ? r.then((ok) => ok ?? false) : false;
+                                                    }, decorate: (option) => decorateChip(option, props) }))))))),
+                                    props.streamFooter !== undefined && React.createElement("div", { className: "mx-auto w-full max-w-5xl" }, props.streamFooter)))))),
+                    props.body == null && !agentPanelActive && (React.createElement("div", { style: { flexShrink: 0, padding: "0 14px 10px" } },
+                        React.createElement(OtherRow, { value: draft, onValueChange: setDraft, queued: queued, onQueuedChange: setQueued, onSubmitOther: props.onSubmitOther, generating: props.generating, liveDuringBuild: props.liveDuringBuild, canSendNow: props.canSendNow, onStop: props.onStop, stopDisabled: props.stopDisabled, attachmentsCtl: attachmentsCtl })))),
                 agentPanelActive ? (React.createElement("div", { "aria-hidden": true, style: { display: "flex", flexShrink: 0, padding: "0 8px" } },
-                    React.createElement("div", { style: { width: 120, height: 50, marginLeft: "auto" } }))) : (React.createElement("div", { style: {
+                    React.createElement("div", { style: { width: 120, height: 50, marginLeft: "auto" } }))) : (React.createElement("div", { "data-vibe-card-nav": true, style: {
                         display: "flex",
                         alignItems: "center",
                         gap: "var(--uvc-nav-gap, 6px)",
                         padding: "0 8px",
-                        borderTop: "1px solid var(--color-light-decorative-00, #e5e5e5)",
+                        borderTop: "1px solid transparent",
                         flexShrink: 0,
                     } },
-                    React.createElement(NavIcon, { label: "Home", color: "#2563eb", onClick: props.onHome },
+                    React.createElement(NavIcon, { label: "Home", color: "var(--uvc-nav-home, #2563eb)", onClick: props.onHome },
                         React.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
                             React.createElement("path", { d: "M3 12l9-9 9 9" }),
                             React.createElement("path", { d: "M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10" }))),
-                    React.createElement(NavIcon, { label: "Chat", color: "var(--uvc-nav-chat, #7c3aed)", selected: props.selectedNav === "edit-chat", onClick: props.onChat },
-                        React.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" },
-                            React.createElement("path", { d: "M21 11a8 8 0 01-8 8H7l-4 3V11a9 9 0 0118 0Z" }))),
-                    React.createElement(NavIcon, { label: "Edit", color: "var(--uvc-nav-edit, #c2410c)", selected: ["edit", "standing", "code", "files", "data", "style", "settings", "faq"].includes(props.selectedNav ?? "edit"), onClick: props.onEdit },
+                    React.createElement(NavIcon, { label: "Edit", color: "var(--uvc-nav-edit, #c2410c)", selected: ["edit", "edit-chat", "standing", "code", "files", "data", "style", "settings", "faq"].includes(props.selectedNav ?? "edit"), onClick: props.onEdit ?? props.onChat },
                         React.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
                             React.createElement("path", { d: "M12 20h9" }),
                             React.createElement("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" }))),
@@ -917,7 +1176,7 @@ export function UnifiedVibeCard(props) {
                 } },
                 React.createElement("span", { "aria-hidden": true, style: { width: 6, height: 6, borderRadius: "50%", background: "#f59e0b" } }),
                 "draft")),
-            React.createElement("button", { type: "button", "aria-label": open
+            React.createElement("button", { type: "button", "data-vibe-switch-glass": true, "aria-label": open
                     ? "Close vibe menu"
                     : (props.pendingRequestCount ?? 0) > 0
                         ?
@@ -933,10 +1192,10 @@ export function UnifiedVibeCard(props) {
                     position: "relative",
                     overflow: "visible",
                 } },
-                React.createElement(VibesSwitch, { size: 60, style: { position: "absolute", right: 0, bottom: 0, pointerEvents: "none" }, isActive: !open, isTwinkling: !open && isTwinkling, isTeasing: !open && isTeasing, ovalColor: props.switchOvalColor ??
-                        (props.versionLocked || props.publishState === "draft" || props.onViewDraft !== undefined
-                            ? ovalColors.yellow
-                            : undefined), ovalStatusKey: props.switchOvalStatusKey }),
+                switchGlassColor !== ovalColors.neutral && (React.createElement(React.Fragment, { key: `${switchGlassColor}|${props.switchOvalStatusKey ?? ""}` },
+                    React.createElement("span", { "data-vibe-switch-rest": true, "aria-hidden": "true" }),
+                    React.createElement("span", { "data-vibe-switch-highlight": true, "data-testid": "vibe-switch-highlight", "data-arrival-amber": switchGlassColor === ovalColors.yellow, "aria-hidden": "true", style: { color: switchGlassColor } }))),
+                React.createElement(VibesSwitch, { size: 60, style: { position: "absolute", right: 0, bottom: 0, pointerEvents: "none" }, isActive: !open, isTwinkling: !open && isTwinkling, isTeasing: !open && isTeasing }),
                 !open && (props.pendingRequestCount ?? 0) > 0 && (React.createElement("span", { "data-testid": "vibe-switch-pending-badge", "aria-hidden": "true", style: {
                         position: "absolute",
                         top: -4,
@@ -1218,22 +1477,24 @@ function FastPathToggle({ blessed, onClick }) {
 function NavIcon({ label, color, selected, onClick, buttonRef, badgeCount, children, }) {
     const showBadge = typeof badgeCount === "number" && badgeCount > 0;
     const badgeText = showBadge ? (badgeCount > 99 ? "99+" : String(badgeCount)) : "";
-    return (React.createElement("button", { ref: buttonRef, type: "button", "aria-label": showBadge ? `${label} (${badgeCount})` : label, title: label, onClick: onClick, style: {
+    return (React.createElement("button", { ref: buttonRef, type: "button", "aria-label": showBadge ? `${label} (${badgeCount})` : label, title: label, "data-vibe-nav-selected": selected === true, onClick: onClick, style: {
             position: "relative",
             width: "var(--uvc-nav-size, 38px)",
             height: "var(--uvc-nav-size, 38px)",
             flexShrink: 0,
             boxSizing: "border-box",
             borderRadius: "50%",
-            background: "transparent",
+            background: "rgba(0,0,0,.5)",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             color,
             fontSize: 16,
             cursor: "pointer",
-            border: `1px solid ${color}`,
-            boxShadow: selected ? `0 0 0 3px ${color}` : "none",
+            border: `${selected ? 3 : 1}px solid ${color}`,
+            boxShadow: selected
+                ? "inset 0 4px 8px 1px rgba(0,0,0,.85), inset 0 1px 3px rgba(0,0,0,.65), inset 0 -1px 0 color-mix(in srgb,currentColor 45%,transparent)"
+                : "none",
         } },
         children,
         showBadge ? (React.createElement("span", { "aria-hidden": "true", style: {
@@ -1334,9 +1595,10 @@ function OtherRow({ value, onValueChange, queued, onQueuedChange, onSubmitOther,
     const submitDisabled = attachmentsCtl.busy || (Boolean(generating) && attachmentsCtl.readyAttachments.length > 0);
     const sendNow = liveDuringBuild === true && canSendNow === true && queued.length === 0 && attachmentsCtl.readyAttachments.length === 0;
     const hasUnsentContent = value.trim() !== "" || attachmentsCtl.readyAttachments.length > 0;
+    const composerDrop = composerFileDrop({ onFiles: attachmentsCtl.add });
     return (React.createElement(React.Fragment, null,
         React.createElement(AttachmentChips, { chips: attachmentsCtl.attachments, onRemove: attachmentsCtl.remove }),
-        React.createElement("form", { onSubmit: (e) => {
+        React.createElement("form", { onDragOver: composerDrop.onDragOver, onDrop: composerDrop.onDrop, onSubmit: (e) => {
                 e.preventDefault();
                 const text = value.trim();
                 const files = attachmentsCtl.readyAttachments;
@@ -1391,7 +1653,9 @@ function OtherRow({ value, onValueChange, queued, onQueuedChange, onSubmitOther,
                             ? "Sends when the current change finishes"
                             : undefined, style: {
                         ...OTHER_ROW_BUTTON_STYLE,
-                        background: "var(--vibes-blue, #3b82f6)",
+                        background: "var(--uvc-submit-fill, rgba(64,89,114,.2))",
+                        color: "var(--uvc-submit-arrow, var(--vibes-cream, #fffff0))",
+                        boxShadow: "none",
                         opacity: submitDisabled ? 0.5 : 1,
                         cursor: submitDisabled ? "default" : "pointer",
                     } },