@vibes.diy/base 14.2.6 → 14.2.8

package/components/UnifiedVibeCard.js

@@ -4,6 +4,7 @@ import { ovalColors } from "./VibesSwitch.styles.js";
 import { EditorTabStrip } from "./EditorTabStrip.js";
 import { ViewerStandingView } from "./ViewerStandingView.js";
 import { OptionButtons } from "./OptionButtons.js";
+import { ChatMessageRow } from "./ChatMessageRow.js";
 import { ViewerTagView } from "./ViewerTagView.js";
 import { SignedOutSavePrompt } from "./SignedOutSavePrompt.js";
 import { HandlePickerMenu } from "./HandlePickerMenu.js";
@@ -13,7 +14,7 @@ import { CodingIndicator } from "./CodingIndicator.js";
 import { CopyLinkIconButton } from "./LinkLineControls.js";
 import { AttachmentButton, AttachmentChips } from "./AttachmentRow.js";
 import { useAttachments } from "../attachments/use-attachments.js";
-import { PeopleIcon, PersonIcon } from "./icons/index.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 = `
@@ -25,6 +26,10 @@ const UNIFIED_VIBE_CARD_DARK_VARS = `
   --color-dark-background-00: #1a1a1a;
   --color-dark-background-01: #222222;
   --color-dark-background-02: #222222;
+  /* The global field palette follows the OS. Pin the same semantic dark
+     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;
@@ -34,6 +39,7 @@ 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;
@@ -47,10 +53,10 @@ const UNIFIED_VIBE_CARD_DARK_VARS = `
   --color-light-background-02: var(--color-dark-background-02, #222222);`;
 const unifiedVibeCardDarkCss = `
 @media (prefers-color-scheme: dark) {
-  [data-unified-vibe-card], [data-vibe-handle-menu], [data-vibe-version-menu], [data-vibe-credits-menu] {${UNIFIED_VIBE_CARD_DARK_VARS}
+  [data-unified-vibe-card], [data-vibe-handle-menu], [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-credits-menu] {${UNIFIED_VIBE_CARD_DARK_VARS}
+.dark [data-unified-vibe-card], .dark [data-vibe-handle-menu], .dark [data-vibe-version-menu] {${UNIFIED_VIBE_CARD_DARK_VARS}
 }
 /* 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"
@@ -120,12 +126,9 @@ const unifiedVibeCardDarkCss = `
     animation: none;
   }
 }
-/* Bottom-nav circles on narrow phones: five fixed 38px circles + the 120px logo
-   spacer + 6px gaps need 340px of row width, but a 375px viewport only leaves
-   327px after the card insets and row padding — and flex's default shrink would
-   squash the circles into ovals. The circles are shrink-proof (flexShrink 0 in
-   NavIcon) and instead step DOWN via these vars so the row keeps fitting, clear
-   of the floating logo, on common 360–400px phones (Codex P2 on #3037). */
+/* Four shrink-proof nav circles 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; }
 }
@@ -154,7 +157,7 @@ const unifiedVibeCardDarkCss = `
 .vibes-edit-field:focus-within {
   border-color: var(--vibes-blue);
 }
-/* Rhythm (#6085): the well shares the composer's 14px outer gutter. Quiet
+/* The suggestion well shares the transcript’s attributed content column. Quiet
    suggestion borders and an opaque invitation distinguish optional actions
    from the writing field. Gold upgrades retain their semantic color.
    OptionButtons outside this well keep their own presentation. */
@@ -171,8 +174,24 @@ const unifiedVibeCardDarkCss = `
   line-height: 1.5;
 }
 .vibes-chip-well [data-message-role="brainstorm-options"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 6px;
 }
+.vibes-chip-well [data-testid="option-buttons-explainer"] {
+  flex: 0 0 100%;
+  margin: 0;
+}
+/* Decorated chips keep their adjacent owner control in the same wrapping item. */
+.vibes-chip-well [data-message-role="brainstorm-options"] > div {
+  min-width: 0;
+  max-width: 100%;
+}
+.vibes-chip-well [data-message-role="brainstorm-options"] > div [data-chip-role="option"] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 .vibes-chip-well [data-chip-role="option"]:not([data-chip-tone="gold"]) {
   background-color: var(--vibes-field-bg, #ffffff);
   border: 1px solid var(--uvc-suggestion-border, #a6adb7);
@@ -188,9 +207,10 @@ const unifiedVibeCardDarkCss = `
   border-radius: 8px;
   font-size: 13px;
   line-height: 20px;
-  padding: 9px 10px;
+  padding: 3px 6px;
   min-height: 40px;
   text-align: left;
+  overflow-wrap: anywhere;
 }
 /* The card owns this density; other SubTabStrip and BuildCard consumers keep
    their defaults. Tab inline sizes need a scoped override, not a shared edit. */
@@ -273,14 +293,14 @@ export function UnifiedVibeCard(props) {
             cancelHidePress();
         }
     };
-    const pickerInteractive = props.handles !== undefined;
+    const pickerInteractive = props.handles !== undefined || props.onAccountSettings !== undefined;
     const [internalPickerOpen, setInternalPickerOpen] = useState(false);
     const pickerOpen = props.handlePickerOpen ?? internalPickerOpen;
     const setPickerOpen = (next) => {
         if (props.handlePickerOpen === undefined)
             setInternalPickerOpen(next);
         props.onHandlePickerOpenChange?.(next);
-        if (next)
+        if (next === false)
             setCreditsOpen(false);
     };
     const pickerWrapRef = useRef(null);
@@ -293,8 +313,16 @@ export function UnifiedVibeCard(props) {
             if (!pickerWrapRef.current?.contains(target) && !menuRef.current?.contains(target))
                 setPickerOpen(false);
         };
-        document.addEventListener("mousedown", onDown);
-        return () => document.removeEventListener("mousedown", onDown);
+        const onBlur = () => {
+            if (document.activeElement?.tagName === "IFRAME")
+                setPickerOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        window.addEventListener("blur", onBlur);
+        return () => {
+            document.removeEventListener("pointerdown", onDown);
+            window.removeEventListener("blur", onBlur);
+        };
     }, [pickerOpen]);
     useEffect(() => {
         if (open === false && pickerOpen === true)
@@ -307,22 +335,7 @@ export function UnifiedVibeCard(props) {
         if (props.creditsMenuOpen === undefined)
             setInternalCreditsOpen(next);
         props.onCreditsMenuOpenChange?.(next);
-        if (next)
-            setPickerOpen(false);
     };
-    const creditsWrapRef = useRef(null);
-    const creditsMenuRef = useRef(null);
-    useEffect(() => {
-        if (!creditsOpen)
-            return;
-        const onDown = (e) => {
-            const target = e.target;
-            if (!creditsWrapRef.current?.contains(target) && !creditsMenuRef.current?.contains(target))
-                setCreditsOpen(false);
-        };
-        document.addEventListener("mousedown", onDown);
-        return () => document.removeEventListener("mousedown", onDown);
-    }, [creditsOpen]);
     useEffect(() => {
         if (open === false && creditsOpen === true)
             setCreditsOpen(false);
@@ -539,14 +552,13 @@ 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),
-        open && (React.createElement("div", { "aria-hidden": true, "data-testid": "vibe-menu-backdrop", onClick: () => setOpen(false), style: { position: "fixed", inset: 0, zIndex: 1, pointerEvents: "auto" } })),
         !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: {
                 position: "absolute",
-                left: 6,
-                right: 6,
-                bottom: 6,
+                left: 2,
+                right: 2,
+                bottom: 2,
                 zIndex: 2,
-                borderRadius: 16,
+                borderRadius: 14,
                 maxHeight: cardHeight,
                 height: cardHeight,
                 overflow: "hidden",
@@ -573,7 +585,7 @@ export function UnifiedVibeCard(props) {
                         display: "flex",
                         alignItems: "center",
                         gap: 8,
-                        padding: "14px 14px 10px",
+                        padding: "10px 10px 10px",
                         flexShrink: 0,
                         position: "relative",
                         userSelect: "none",
@@ -612,10 +624,18 @@ export function UnifiedVibeCard(props) {
                         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, overflowWrap: "anywhere" } }, appTitle),
+                        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 } }, 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 } }, appSlug)) : (React.createElement("button", { type: "button", "data-testid": "vibe-card-slug-link", onClick: props.onOpenApp, className: "text-light-secondary dark:text-dark-secondary", style: {
+                            (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",
@@ -649,18 +669,20 @@ export function UnifiedVibeCard(props) {
                             alignItems: "center",
                             gap: 10,
                             flexShrink: 0,
-                        } },
-                        creditsEnabled && (React.createElement("div", { ref: creditsWrapRef, style: { position: "relative", flexShrink: 0, display: "flex" } },
-                            React.createElement(CreditsRingView, { remaining: props.credits?.remaining, grantIncluded: props.credits?.grantIncluded, loading: props.credits?.loading, expanded: creditsOpen, onClick: () => setCreditsOpen(!creditsOpen) }))),
-                        props.hideViewerTag ? null : props.handleSlug ? (React.createElement("div", { ref: pickerWrapRef, style: { position: "relative", flexShrink: 0 } },
-                            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, 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",
-                                    flexShrink: 0,
-                                } }))) : props.viewerPending ? (React.createElement(ViewerTagView, { slug: "", pending: true })) : props.viewerNeedsHandle ? (React.createElement(ViewerTagView, { slug: "", needsHandle: true, onChooseHandle: props.onChooseHandle })) : (React.createElement(ViewerTagView, { slug: "?", anonymous: true, onSignIn: props.onSignIn })))),
+                            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") {
@@ -689,13 +711,9 @@ export function UnifiedVibeCard(props) {
                         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 })));
                     }
-                    const isOwnerChrome = props.publishAccess !== undefined || props.publishAccessPending === true;
-                    if (!isOwnerChrome)
-                        return null;
-                    return (React.createElement("div", { style: { padding: "0 14px", flexShrink: 0 } },
-                        React.createElement(AudienceLine, { access: props.publishAccess, pending: props.publishAccessPending, onShare: props.onShare })));
+                    return null;
                 })(),
-                props.editorTab != null && props.selectedNav !== "share" && !agentPanelActive && (React.createElement("div", { "data-vibe-card-editor-tabs": true, style: { padding: "0 14px 6px", flexShrink: 0 } },
+                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,
@@ -719,44 +737,48 @@ export function UnifiedVibeCard(props) {
                         ...((props.bodyFill && props.body) || agentPanelActive || props.body == null
                             ? { display: "flex", flexDirection: "column" }
                             : null),
-                    } }, agentPanelActive ? (React.createElement("div", { style: { flex: "1 1 auto", minHeight: 0 } }, props.agentPanel)) : 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: "vibes-chip-well mt-2 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
-                                        ? "Describe a change to edit this app live:"
-                                        : "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.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.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 12px 4px" } },
+                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: {
                         display: "flex",
                         alignItems: "center",
                         gap: "var(--uvc-nav-gap, 6px)",
-                        padding: "0 12px 4px",
+                        padding: "0 8px",
                         borderTop: "1px solid var(--color-light-decorative-00, #e5e5e5)",
                         flexShrink: 0,
                     } },
@@ -764,52 +786,74 @@ export function UnifiedVibeCard(props) {
                         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: "Account", color: "#7c3aed", selected: props.selectedNav === "recommended", onClick: props.onRecommended },
-                        React.createElement(PersonIcon, null)),
-                    React.createElement(NavIcon, { label: "Edit", color: "var(--uvc-nav-edit, #c2410c)", selected: ["edit", "edit-chat", "standing", "code", "data", "style", "settings"].includes(props.selectedNav ?? "edit"), onClick: props.onEdit },
+                    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("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" }))),
-                    React.createElement(NavIcon, { label: "Share", color: "var(--uvc-nav-share, #15803d)", selected: props.selectedNav === "share", onClick: props.onShare, buttonRef: props.shareButtonRef, badgeCount: (props.shareCommentCount ?? 0) + (props.pendingRequestCount ?? 0) },
+                    React.createElement(NavIcon, { label: "Share", color: "var(--uvc-nav-share, #15803d)", selected: props.selectedNav === "share", onClick: props.onShare, buttonRef: props.shareButtonRef, badgeCount: props.pendingRequestCount ?? 0 },
                         React.createElement(PeopleIcon, null)),
-                    React.createElement(NavIcon, { label: "FAQ", color: "var(--uvc-nav-faq, #4b5563)", selected: props.selectedNav === "faq", onClick: props.onAbout }, "?"),
                     React.createElement("div", { "aria-hidden": true, style: { width: 120, height: 50, flexShrink: 0, marginLeft: "auto" } })))))),
-        open && pickerInteractive && pickerOpen && props.handleSlug && (React.createElement("div", { ref: menuRef, "data-vibe-handle-menu": true, className: "text-light-primary dark:text-dark-primary", style: {
+        open && pickerInteractive && pickerOpen && (React.createElement("div", { ref: menuRef, "data-vibe-handle-menu": true, className: "text-light-primary dark:text-dark-primary", style: {
                 position: "fixed",
                 top: `calc(${SAFE_AREA_TOP} + 16px)`,
                 right: 3,
                 zIndex: 4,
                 pointerEvents: "auto",
-            } },
-            React.createElement(HandlePickerMenu, { handles: props.handles ?? [], activeSlug: props.handleSlug, busy: props.handlePickerBusy, style: { position: "static", right: "auto", top: "auto", bottom: "auto" }, onSelect: (slug) => {
-                    props.onSelectHandle?.(slug);
+            } }, React.createElement(HandlePickerMenu, { handles: props.handles ?? [], activeSlug: props.handleSlug, busy: props.handlePickerBusy, header: creditsEnabled ? (React.createElement("div", { style: { padding: 8 } },
+                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
+                    React.createElement(CreditsRingView, { remaining: props.credits?.remaining, grantIncluded: props.credits?.grantIncluded, loading: props.credits?.loading, expanded: creditsOpen, onClick: () => setCreditsOpen(!creditsOpen) }),
+                    React.createElement("span", null, "Credits")),
+                creditsOpen && (React.createElement(CreditsDetailMenu, { plan: props.credits?.plan, remaining: props.credits?.remaining, grantRemaining: props.credits?.grantRemaining, grantIncluded: props.credits?.grantIncluded, grantResetsAt: props.credits?.grantResetsAt, purchasedRemaining: props.credits?.purchasedRemaining, loading: props.credits?.loading, style: {
+                        position: "static",
+                        right: "auto",
+                        top: "auto",
+                        bottom: "auto",
+                        width: "100%",
+                        minWidth: 0,
+                        boxShadow: "none",
+                        border: "none",
+                        padding: 0,
+                    }, onManage: props.onManageCredits
+                        ? () => {
+                            props.onManageCredits?.();
+                            setCreditsOpen(false);
+                        }
+                        : undefined })))) : undefined, onSignIn: props.onSignIn, onChooseHandle: props.viewerNeedsHandle ? props.onChooseHandle : undefined, onSettings: props.onAccountSettings
+                ? () => {
+                    props.onAccountSettings?.();
+                    setPickerOpen(false);
+                }
+                : undefined, onMyVibes: props.onMyVibes
+                ? () => {
+                    props.onMyVibes?.();
+                    setPickerOpen(false);
+                }
+                : undefined, onMemberships: props.onMemberships
+                ? () => {
+                    props.onMemberships?.();
                     setPickerOpen(false);
-                }, onNewHandle: (handle) => {
+                }
+                : undefined, style: { position: "static", right: "auto", top: "auto", bottom: "auto" }, onSelect: (slug) => {
+                props.onSelectHandle?.(slug);
+                setPickerOpen(false);
+            }, onNewHandle: props.onNewHandle
+                ? (handle) => {
                     props.onNewHandle?.(handle);
                     setPickerOpen(false);
-                }, onLogout: props.onLogout
-                    ? () => {
-                        props.onLogout?.();
-                        setPickerOpen(false);
-                    }
-                    : undefined }))),
-        open && creditsEnabled && creditsOpen && (React.createElement("div", { ref: creditsMenuRef, "data-vibe-credits-menu": true, className: "text-light-primary dark:text-dark-primary", style: {
-                position: "fixed",
-                top: `calc(${SAFE_AREA_TOP} + 16px)`,
-                right: 3,
-                zIndex: 4,
-                pointerEvents: "auto",
-            } },
-            React.createElement(CreditsDetailMenu, { plan: props.credits?.plan, remaining: props.credits?.remaining, grantRemaining: props.credits?.grantRemaining, grantIncluded: props.credits?.grantIncluded, grantResetsAt: props.credits?.grantResetsAt, purchasedRemaining: props.credits?.purchasedRemaining, loading: props.credits?.loading, style: { position: "static", right: "auto", top: "auto", bottom: "auto" }, onManage: props.onManageCredits
-                    ? () => {
-                        props.onManageCredits?.();
-                        setCreditsOpen(false);
-                    }
-                    : undefined }))),
+                }
+                : undefined, onLogout: props.onLogout
+                ? () => {
+                    props.onLogout?.();
+                    setPickerOpen(false);
+                }
+                : undefined }))),
         !hidden && (React.createElement("div", { style: {
                 position: "absolute",
-                right: 16,
-                bottom: 15,
+                right: 2,
+                bottom: 7,
                 zIndex: 3,
                 pointerEvents: "auto",
                 display: "flex",
@@ -1110,31 +1154,6 @@ function PublishBanner({ variant, onPublish, publishing, locked, onUnlock, autoP
                 opacity: publishing ? 0.6 : 1,
             } }, publishing ? "Publishing…" : variant === "draft" ? "Update" : "Publish this version"))));
 }
-function AudienceLine({ access, pending, onShare, }) {
-    return (React.createElement("div", { "data-testid": "vibe-card-audience-line", className: "text-light-secondary dark:text-dark-secondary", style: {
-            display: "flex",
-            alignItems: "baseline",
-            gap: 6,
-            marginBottom: 10,
-            fontSize: 12,
-            lineHeight: 1.4,
-        } },
-        React.createElement("span", null, pending === true
-            ? "Checking who can open it…"
-            : access === "public"
-                ? "Anyone with the link can open it."
-                : "Only people you approve can open it."),
-        pending !== true && onShare && (React.createElement("button", { type: "button", onClick: onShare, "aria-label": "Change who can open this vibe", style: {
-                flexShrink: 0,
-                background: "transparent",
-                border: "none",
-                padding: 0,
-                font: "inherit",
-                color: "currentColor",
-                textDecoration: "underline",
-                cursor: "pointer",
-            } }, "Change"))));
-}
 function decorateChip(option, props) {
     const fp = props.chipFastPaths?.[option];
     if (!fp)