@hanzo/rooms 0.1.27 → 0.1.29

package/dist/Contacts.js

@@ -80,7 +80,7 @@ function Note({ children }) {
  * The directory itself.
  *
  * SPLIT OUT because `usePeople` needs an owner and a hook cannot be called
- * conditionally — the same reason Home and Vibe split theirs.
+ * conditionally — the same reason Home splits its own.
  */
 function Roster({ owner }) {
     const ai = useAi();

package/dist/OrgSwitcher.js

@@ -95,7 +95,7 @@ export function OrgSwitcherDropdown({ open, onClose, activeOrgId, onSelect, alig
                         onSelect(o.id);
                         onClose();
                     }, width: "100%", justify: "space-between", px: 10, py: 6, bg: isSelected ? '$hover' : 'transparent', children: [_jsxs(XStack, { items: "center", gap: 10, minW: 0, shrink: 1, children: [_jsx(Text, { width: 24, height: 24, rounded: 6, bg: "$raised", display: "flex", items: "center", justify: "center", fontSize: "$2", fontWeight: "700", color: "$ink", shrink: 0, overflow: "hidden", children: o.logo ? (_jsx(View, { render: _jsx("img", { src: o.logo, alt: "" }), width: "100%", height: "100%", objectFit: "cover" })) : (o.displayName.toLowerCase().includes('hanzo') || o.name.toLowerCase().includes('hanzo')) ? (_jsx(HanzoMark, { size: 14 })) : (o.name.slice(0, 3).toUpperCase()) }), _jsxs(YStack, { minW: 0, shrink: 1, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: isSelected ? '600' : '500', color: "$ink", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: o.displayName }), o.role ? (_jsx(Text, { fontSize: FLOOR, color: "$faint", children: o.role })) : null] })] }), isSelected ? _jsx(Check, { size: 14, color: "currentColor" }) : null] }, o.id));
-            }), _jsx(View, { height: 1, bg: "$borderColor", my: 4 }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: iam(), target: "_blank", rel: "noreferrer", children: [_jsx(Plus, { size: 14 }), "Create Organization"] }) }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: site("/account/organization"), children: [_jsx(Settings, { size: 14 }), "Organization Settings"] }) })] }));
+            }), _jsx(View, { height: 1, bg: "$borderColor", my: 4 }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: iam(), target: "_blank", rel: "noreferrer", children: [_jsx(Plus, { size: 14 }), "Create Organization"] }) }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: site("/settings/organization"), children: [_jsx(Settings, { size: 14 }), "Organization settings"] }) })] }));
 }
 /**
  * THE WORKSPACE YOU ARE STANDING IN, and the way to another one.

package/dist/lib/api.d.ts

@@ -5,7 +5,7 @@
  * else could reach it: seven other modules wrote their own
  * `process.env.NEXT_PUBLIC_HANZO_API_URL || 'https://api.hanzo.ai'` — reach.ts,
  * team.ts, coding.ts, referrals.ts, useTiers.ts, Settings.tsx, Directory.tsx,
- * Beluga.tsx — and every one of them got the local case wrong in the same way.
+ * and every one of them got the local case wrong in the same way.
  *
  * THE LOCAL CASE IS THE WHOLE POINT. api.hanzo.ai admits an origin by allowlist
  * and by an https, portless DNS proof; localhost satisfies neither, so a

package/dist/lib/api.js

@@ -5,7 +5,7 @@
  * else could reach it: seven other modules wrote their own
  * `process.env.NEXT_PUBLIC_HANZO_API_URL || 'https://api.hanzo.ai'` — reach.ts,
  * team.ts, coding.ts, referrals.ts, useTiers.ts, Settings.tsx, Directory.tsx,
- * Beluga.tsx — and every one of them got the local case wrong in the same way.
+ * and every one of them got the local case wrong in the same way.
  *
  * THE LOCAL CASE IS THE WHOLE POINT. api.hanzo.ai admits an origin by allowlist
  * and by an https, portless DNS proof; localhost satisfies neither, so a

package/dist/lib/home.js

@@ -34,7 +34,7 @@ import { site } from '../where.js';
  * other page of this app is, and the three doors that offer it (the empty
  * room's tile, the Create menu, the sidebar's row) all read this one line.
  */
-export const invite = () => site('/account/organization');
+export const invite = () => site('/settings/organization/members');
 /** The org's projects, newest first. */
 export async function projects(client, signal) {
     const rows = await client.http.json({ path: '/v1/projects', signal });

package/dist/lib/host.js

@@ -70,8 +70,8 @@ const SLUG = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/;
  * another address.
  */
 export const dev = (ref) => site(!ref ? DEV : SESSION.test(ref) ? `${DEV}?run=${ref}` : SLUG.test(ref) ? `${DEV}?project=${ref}` : DEV);
-/** The routes under app/(app) the apex keeps: the app — /chat, a chat shared by link, and /dev — and three surfaces that are not the workspace's. */
-const KEPT = new Set(['/chat', '/chat/shared', '/dev', '/vibe', '/beluga', '/dashboard']);
+/** The routes under app/(app) the apex keeps: the app — /chat, a chat shared by link, and /dev. */
+const KEPT = new Set(['/chat', '/chat/shared', '/dev']);
 /** Settings, and every page under it: the person's and the organization's, served wherever the app is. */
 const SETTINGS = '/settings';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",

package/dist/Beluga.d.ts

@@ -1,12 +0,0 @@
-/**
- * Beluga Fullscreen Ocean AI Studio
- *
- * Built with @hanzo/gui native components and responsive CSS Grid:
- * - Desktop (>= 1440px) / Laptop (1024px - 1439px): 3-column grid (Left Prompts, Center Ocean Canvas, Right Telemetry)
- * - Tablet (768px - 1023px): 2-column grid (Center Ocean Canvas + Right Telemetry)
- * - Mobile (< 768px): 1-column grid with touch drawers
- *
- * Uses @hanzo/gui native components exclusively (View, XStack, YStack, Text, Button, etc.).
- */
-import React from 'react';
-export declare function BelugaStudio(): React.JSX.Element;

package/dist/Beluga.js

@@ -1,152 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Beluga Fullscreen Ocean AI Studio
- *
- * Built with @hanzo/gui native components and responsive CSS Grid:
- * - Desktop (>= 1440px) / Laptop (1024px - 1439px): 3-column grid (Left Prompts, Center Ocean Canvas, Right Telemetry)
- * - Tablet (768px - 1023px): 2-column grid (Center Ocean Canvas + Right Telemetry)
- * - Mobile (< 768px): 1-column grid with touch drawers
- *
- * Uses @hanzo/gui native components exclusively (View, XStack, YStack, Text, Button, etc.).
- */
-import { useState, useEffect } from 'react';
-import { useRooms } from './host.js';
-import { Bot, Sparkles, Volume2, VolumeX, ArrowLeft, ArrowUp, Activity, } from 'lucide-react';
-import { View, XStack, YStack, Text, Button } from '@hanzo/gui';
-import { bearer, scope } from './lib/session.js';
-import { api } from './lib/api.js';
-import { Orgs } from './Orgs.js';
-import { mix } from './lib/mix.js';
-const EMOTIONS = {
-    happy: { name: 'Happiness', emoji: '😊', desc: 'Joyful bright clicks and radiant ocean bubbles.' },
-    playful: { name: 'Playful', emoji: '🐬', desc: 'Playful spiraling swim with rhythmic echolocation pulses.' },
-    love: { name: 'Love', emoji: '💙', desc: 'Deep empathetic resonance and social connection.' },
-    curious: { name: 'Curiosity', emoji: '🤔', desc: 'Curious sonar ping focused on analyzing data.' },
-    calm: { name: 'Calmness', emoji: '🌊', desc: 'Tranquil resting glide through deep arctic currents.' },
-    awe: { name: 'Awe', emoji: '🌟', desc: 'Wide acoustic aperture detecting novel patterns.' },
-};
-const QUICK_PROMPTS = [
-    'Origin Eggs 🥚',
-    'Endangered Species 🐅',
-    'ZenLM Neural AI 🧠',
-];
-const IDLE_THOUGHTS = [
-    'Did you know belugas use echolocation to navigate underwater caves? 🐬',
-    'I am ready when you are! Ask me anything about Hanzo Cloud or conservation! ✨',
-    'The ocean is calm today... What shall we build or discover? 🌊',
-    'Echolocation ping sent! Waiting for your signal... 📡',
-    'Hatching an Origin Egg sounds exciting today! 🥚',
-];
-/** The room's dark glass: the canvas shows through blurred, under a lit top
- *  edge and a soft drop. The fill is each surface's own. */
-const LENS = {
-    backdropFilter: 'blur(24px) saturate(190%) contrast(102%)',
-    boxShadow: 'inset 0 1px 0 0 var(--white-14), inset 0 0 0 1px var(--white-03), 0 8px 32px -4px color-mix(in srgb, var(--pure-black) 40%, transparent)',
-};
-/** The ground under the lens: the page's darkest neutral at a share of itself. */
-const glass = (share) => mix('var(--neutral-950)', share, 'srgb');
-function BelugaStudioInner() {
-    const { Link } = useRooms();
-    const [leftOpen, setLeftOpen] = useState(true);
-    const [rightOpen, setRightOpen] = useState(true);
-    const [muted, setMuted] = useState(false);
-    const [currentEmotion, setCurrentEmotion] = useState('playful');
-    const [input, setInput] = useState('');
-    const [busy, setBusy] = useState(false);
-    const [idleThought, setIdleThought] = useState(IDLE_THOUGHTS[0]);
-    const [mobileDrawer, setMobileDrawer] = useState('none');
-    const [messages, setMessages] = useState([
-        {
-            id: '1',
-            role: 'assistant',
-            content: 'Hello! I am Blue the Beluga, powered by ZenLM on the Hanzo Cloud. How can I assist your team with agentic coding, conservation, or ocean acoustics today?',
-            emotion: 'playful',
-        },
-    ]);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const idx = Math.floor(Math.random() * IDLE_THOUGHTS.length);
-            setIdleThought(IDLE_THOUGHTS[idx]);
-        }, 12000);
-        return () => clearInterval(interval);
-    }, []);
-    const handleSend = async (textToSend) => {
-        const text = (textToSend || input).trim();
-        if (!text || busy)
-            return;
-        setInput('');
-        setBusy(true);
-        const userMsg = {
-            id: `u_${Date.now()}`,
-            role: 'user',
-            content: text,
-            emotion: 'curious',
-        };
-        setMessages((prev) => [...prev, userMsg]);
-        const nextEmotion = text.toLowerCase().includes('egg')
-            ? 'curious'
-            : text.toLowerCase().includes('build') || text.toLowerCase().includes('code')
-                ? 'awe'
-                : 'happy';
-        setCurrentEmotion(nextEmotion);
-        try {
-            const tok = bearer();
-            const res = await fetch(`${api()}/v1/chat/completions`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...(tok ? scope() : {}),
-                },
-                body: JSON.stringify({
-                    model: 'zen',
-                    messages: [
-                        {
-                            role: 'system',
-                            content: "You are Blue the Beluga, Hanzo's bioacoustic ocean AI and neural sonar intelligence agent. You provide ocean telemetry and marine analysis. Always start with a brief italicized acoustic sensory description like *high-frequency clicks* or *curious sonar whistle* reflecting the mood.",
-                        },
-                        ...messages.slice(-6).map((m) => ({ role: m.role, content: m.content })),
-                        { role: 'user', content: text },
-                    ],
-                }),
-            });
-            if (!res.ok) {
-                const body = (await res.json().catch(() => ({})));
-                throw new Error(body?.error?.message || body?.msg || `Cluster returned HTTP ${res.status}`);
-            }
-            const data = (await res.json());
-            const reply = data?.choices?.[0]?.message?.content;
-            if (!reply)
-                throw new Error('The model returned an empty reply.');
-            const botMsg = {
-                id: `a_${Date.now()}`,
-                role: 'assistant',
-                content: reply,
-                emotion: nextEmotion,
-            };
-            setMessages((prev) => [...prev, botMsg]);
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            const botMsg = {
-                id: `a_${Date.now()}`,
-                role: 'assistant',
-                content: `*Acoustic cluster refraction*\n\n${message}`,
-                emotion: 'curious',
-            };
-            setMessages((prev) => [...prev, botMsg]);
-        }
-        finally {
-            setBusy(false);
-            setMobileDrawer('none');
-        }
-    };
-    return (_jsxs(YStack, { "data-beluga": true, flex: 1, minH: 0, height: "100vh", width: "100%", maxW: "100%", overflowX: "auto", overflowY: "hidden", bg: "var(--pure-black)", pb: 56, children: [_jsxs(XStack, { height: 50, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "var(--white-08)", bg: "var(--neutral-950)", z: 30, shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(Link, { href: "/vibe", children: _jsx(XStack, { items: "center", justify: "center", width: 28, height: 28, rounded: 8, bg: "var(--neutral-900)", borderWidth: 1, borderColor: "var(--white-10)", hoverStyle: { bg: 'var(--neutral-800)' }, children: _jsx(ArrowLeft, { size: 14, color: "var(--neutral-400)" }) }) }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Bot, { size: 15, color: "$ink" }), _jsx(Text, { render: "h1", fontSize: "$2", fontWeight: "700", color: "var(--pure-white)", children: "Blue the Beluga" }), _jsx(Text, { fontSize: 11, color: "var(--neutral-600)", children: "|" }), _jsx(Text, { fontSize: 11, color: "var(--neutral-400)", children: "ZenLM Neural Studio" })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(XStack, { $md: { display: 'none' }, gap: "$1.5", children: [_jsx(Button, { size: "$2", height: 28, px: "$2", rounded: 6, bg: mobileDrawer === 'prompts' ? 'var(--neutral-800)' : 'var(--neutral-900)', onPress: () => setMobileDrawer(mobileDrawer === 'prompts' ? 'none' : 'prompts'), children: _jsx(Sparkles, { size: 12, color: "$ink" }) }), _jsx(Button, { size: "$2", height: 28, px: "$2", rounded: 6, bg: mobileDrawer === 'telemetry' ? 'var(--neutral-800)' : 'var(--neutral-900)', onPress: () => setMobileDrawer(mobileDrawer === 'telemetry' ? 'none' : 'telemetry'), children: _jsx(Activity, { size: 12, color: "$ink" }) })] }), _jsx(View, { cursor: "pointer", onPress: () => setMuted(!muted), p: 6, rounded: 8, bg: "var(--neutral-900)", borderWidth: 1, borderColor: "var(--white-08)", hoverStyle: { bg: 'var(--neutral-800)' }, children: muted ? _jsx(VolumeX, { size: 14, color: "var(--neutral-400)" }) : _jsx(Volume2, { size: 14, color: "var(--neutral-400)" }) }), _jsx(Button, { display: "none", $md: { display: 'flex' }, size: "$2", height: 28, px: "$3", rounded: 8, bg: "var(--neutral-900)", borderColor: "var(--white-10)", borderWidth: 1, onPress: () => setRightOpen(!rightOpen), children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Activity, { size: 12, color: "$ink" }), _jsx(Text, { fontSize: 11, fontWeight: "600", color: "var(--neutral-200)", children: "Telemetry" })] }) })] })] }), _jsxs(View, { flex: 1, minH: 0, width: "100%", height: "100%", overflow: "hidden", display: "grid", gridTemplateRows: "100%", gridTemplateColumns: "100%", $md: { gridTemplateColumns: 'minmax(0, 1fr) 280px' }, $lg: { gridTemplateColumns: '280px minmax(0, 1fr) 280px' }, children: [_jsxs(YStack, { height: "100%", bg: "var(--neutral-950)", borderRightWidth: 1, borderColor: "var(--white-08)", minW: 0, display: mobileDrawer === 'prompts' ? 'flex' : 'none', "$max-md": { position: 'absolute', t: 0, r: 0, b: 0, l: 0, z: 'var(--z-dock)' }, $md: { display: 'none' }, $lg: { display: 'flex' }, children: [_jsx(XStack, { height: 40, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "var(--white-06)", children: _jsx(Text, { fontSize: 11, fontWeight: "700", color: "var(--neutral-500)", textTransform: "uppercase", children: "Quick Ocean Prompts" }) }), _jsxs(YStack, { flex: 1, overflowY: "auto", overflowX: "hidden", p: "$3.5", gap: "$4", children: [_jsx(YStack, { gap: "$1.5", children: QUICK_PROMPTS.map((p, i) => (_jsx(View, { cursor: "pointer", onPress: () => handleSend(p), p: "$2.5", rounded: 8, bg: "var(--neutral-900)", borderWidth: 1, borderColor: "var(--white-06)", hoverStyle: { bg: 'var(--neutral-800)' }, children: _jsx(Text, { fontSize: 12, color: "var(--neutral-300)", children: p }) }, i))) }), _jsxs(YStack, { p: "$3", rounded: 12, bg: "var(--white-08)", borderWidth: 1, borderColor: "var(--white-20)", gap: "$1.5", children: [_jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Sparkles, { size: 13, color: "$ink" }), _jsx(Text, { fontSize: 11, fontWeight: "700", color: "$ink", children: "Ocean Thought" })] }), _jsx(Text, { fontSize: 11, color: "var(--neutral-300)", lineHeight: 16, children: idleThought })] })] })] }), _jsxs(YStack, { height: "100%", bg: "var(--pure-black)", position: "relative", items: "center", justify: "space-between", p: "$4", minW: 0, children: [_jsxs(YStack, { flex: 1, items: "center", justify: "center", width: "100%", children: [_jsx(YStack, { width: 220, height: 220, rounded: 110, borderWidth: 1, borderColor: "var(--white-30)", items: "center", justify: "center", shadowColor: "var(--white-20)", shadowRadius: 50, children: _jsx(Text, { fontSize: 72, children: "\uD83D\uDC2C" }) }), _jsx(View, { ...LENS, mt: "$4", maxW: 520, width: "100%", px: "$3.5", py: "$2.5", rounded: 14, bg: glass(85), borderWidth: 1, borderColor: "var(--white-10)", children: _jsx(Text, { fontSize: 12, color: "var(--neutral-200)", text: "center", fontFamily: "$mono", lineHeight: 18, children: messages[messages.length - 1]?.content }) })] }), _jsx(YStack, { width: "100%", maxW: 600, z: 20, children: _jsxs(XStack, { ...LENS, items: "center", bg: glass(90), borderWidth: 1, borderColor: "var(--white-14)", rounded: 14, p: "$2", children: [_jsx(Text, { render: _jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSend(), placeholder: "Ask Blue the Beluga anything or send acoustic signal..." }), flex: 1, bg: "transparent", borderWidth: 0, color: "var(--pure-white)", fontSize: "$2", outlineStyle: "none", px: 10, py: 4 }), _jsx(Button, { size: "$2", bg: "var(--neutral-50)", rounded: 10, height: 30, px: "$2.5", onPress: () => handleSend(), disabled: !input.trim() || busy, opacity: !input.trim() || busy ? 0.3 : 1, hoverStyle: { bg: 'var(--neutral-200)' }, children: _jsx(ArrowUp, { size: 14, color: "var(--neutral-950)" }) })] }) })] }), _jsxs(YStack, { height: "100%", bg: "var(--neutral-950)", borderLeftWidth: 1, borderColor: "var(--white-08)", minW: 0, display: mobileDrawer === 'telemetry' ? 'flex' : 'none', "$max-md": { position: 'absolute', t: 0, r: 0, b: 0, l: 0, z: 'var(--z-dock)' }, $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 40, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "var(--white-06)", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Activity, { size: 14, color: "$ink" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "var(--neutral-200)", children: "Bioacoustic Telemetry" })] }), _jsx(View, { px: 6, py: 2, rounded: 4, bg: "var(--white-15)", children: _jsx(Text, { fontSize: 10, color: "$ink", fontFamily: "$mono", fontWeight: "600", children: "120 kHz" }) })] }), _jsxs(YStack, { flex: 1, overflowY: "auto", overflowX: "hidden", p: "$3.5", gap: "$4", children: [_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: 10, fontWeight: "700", color: "var(--neutral-500)", textTransform: "uppercase", children: "Active Emotion State" }), _jsxs(YStack, { p: "$3", rounded: 12, bg: "var(--neutral-900)", borderWidth: 1, borderColor: "var(--white-06)", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: 15, children: EMOTIONS[currentEmotion]?.emoji }), _jsx(Text, { fontSize: 13, fontWeight: "700", color: "var(--pure-white)", children: EMOTIONS[currentEmotion]?.name })] }), _jsx(Text, { fontSize: 11, color: "var(--neutral-400)", lineHeight: 16, children: EMOTIONS[currentEmotion]?.desc })] })] }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: 10, fontWeight: "700", color: "var(--neutral-500)", textTransform: "uppercase", children: "Emotion State Matrix" }), _jsx(YStack, { gap: "$1.5", children: Object.entries(EMOTIONS).map(([key, item]) => (_jsx(View, { cursor: "pointer", onPress: () => setCurrentEmotion(key), px: "$2.5", py: "$2", rounded: 8, borderWidth: 1, borderColor: currentEmotion === key ? 'var(--white-40)' : 'var(--white-06)', bg: currentEmotion === key ? 'var(--white-14)' : 'var(--neutral-900)', children: _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: 13, children: item.emoji }), _jsx(Text, { fontSize: 12, fontWeight: currentEmotion === key ? '700' : '400', color: currentEmotion === key ? 'var(--pure-white)' : 'var(--neutral-300)', children: item.name })] }), currentEmotion === key && (_jsx(View, { width: 6, height: 6, rounded: 3, bg: "var(--pure-white)" }))] }) }, key))) })] })] })] })] })] }));
-}
-// THE GATE IS NOT A ROOM'S TO REMEMBER. This room draws its own shell rather
-// than `Room`, which is where every other room picks the organization gate up —
-// so it was reachable, and usable, by an account that had never paid. Wrapping
-// the export means the route cannot mount the room without it.
-export function BelugaStudio() {
-    return (_jsx(Orgs, { children: _jsx(BelugaStudioInner, {}) }));
-}

package/dist/Vibe.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function VibeWorkspace(): React.JSX.Element;

package/dist/Vibe.js

@@ -1,189 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * /vibe — three columns: the runs started here, a frame pointed at whatever you
- * are building, and the org's people.
- *
- * WHAT IS DRAWN WAS READ, OR IT IS NOT DRAWN. This room shipped as a stage set.
- * It opened holding three members nobody had invited — one of them an
- * individual, named in full at a live domain — all stamped "online" by a
- * literal and counted in the header as "3 online". Under them sat two finished
- * agent runs attributed to those people, priced at $0.0485 and $0.0192 over
- * 146.0s and 32.1s, and three chat messages carrying a poll whose 3-to-1 tally
- * nobody had voted in. The address bar named a host on another org's domain
- * while the frame below it loaded /ocean, a path this site does not serve.
- * Every one of those was typed into the file.
- *
- * The reads that answer are IAM's people, the platform's agents and models, and
- * POST /v1/agents/coding. The chat column went entirely: nothing it displayed
- * came from anywhere, and nothing typed into it ever left the browser — a room
- * that only ever talked to itself. The preview column kept its frame and lost
- * its claims: it now shows the URL in the bar, which is the one thing about it
- * that was ever true.
- */
-import { dev } from './lib/host.js';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useRooms } from './host.js';
-import { ArrowUp, Globe, Monitor, RefreshCw, Smartphone, Sparkles, Tablet, UserPlus, Users, } from 'lucide-react';
-import { View, XStack, YStack, Text } from '@hanzo/gui';
-import { Button } from '@hanzo/ui';
-import { AiProvider, useAgents, useModels, usePeople } from '@hanzo/ai/react';
-import { ModelPicker } from '@hanzo/ui/models';
-import { parseModels } from '@hanzo/ui/models/catalog';
-import { useIam, useOrganizations } from '@hanzo/iam/react';
-import { hasSession } from './lib/session.js';
-import { useHydrated } from './lib/hydrated.js';
-import { ENSO, FREE, served, useAi } from './lib/ai.js';
-import { TopOrgSelector } from './OrgSwitcher.js';
-import { plainly, say } from './failure.js';
-import { invite } from './lib/home.js';
-import { startRun } from './lib/coding.js';
-import { Orgs } from './Orgs.js';
-const clock = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-/** The one grey line, so every empty state in this room is written the same. */
-function Quiet({ children }) {
-    return (_jsx(Text, { fontSize: 11, color: "$soft", lineHeight: 16, children: children }));
-}
-/**
- * The org's people and its agents.
- *
- * SPLIT OUT because `usePeople` needs an owner and a hook cannot be called
- * conditionally — the same reason Home keeps `Mates` apart from `Team`.
- *
- * NOBODY IS MARKED PRESENT. Nothing here subscribes to presence, so "online"
- * was a field set to the same string for everyone the moment the file loaded.
- * A directory can say who belongs to the org; it cannot say who is looking.
- */
-function Members({ owner }) {
-    const { people, loading, error } = usePeople({ owner, service: false });
-    const { agents, loading: counting, error: refused } = useAgents();
-    const wrong = error ?? refused;
-    if (wrong)
-        return _jsx(Quiet, { children: say(wrong, 'your team') });
-    const rows = [
-        ...people.map((p) => ({
-            key: p.id,
-            name: p.displayName || p.name,
-            detail: p.email || '',
-            // A ROLE IS A CLAIM IAM MAKES OR NOBODY DOES.
-            role: p.admin ? 'Admin' : '',
-            mark: (p.displayName || p.name || '?').charAt(0).toUpperCase(),
-        })),
-        ...agents.map((a) => ({
-            key: a.id,
-            name: a.name,
-            detail: a.model || '',
-            role: 'Agent',
-            mark: a.emoji || a.name.charAt(0).toUpperCase(),
-        })),
-    ];
-    if (rows.length === 0)
-        return _jsx(Quiet, { children: loading || counting ? 'Reading.' : 'Nobody in this org yet.' });
-    return (_jsx(YStack, { gap: "$1.5", children: rows.map((r) => (_jsxs(XStack, { items: "center", justify: "space-between", p: "$2", rounded: 8, bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, overflow: "hidden", children: [_jsx(View, { width: 24, height: 24, rounded: 12, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(Text, { fontSize: 10, fontWeight: "700", color: "$ink", children: r.mark }) }), _jsxs(YStack, { flex: 1, overflow: "hidden", children: [_jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", numberOfLines: 1, children: r.name }), r.detail ? (_jsx(Text, { fontSize: 10, color: "$soft", numberOfLines: 1, children: r.detail })) : null] })] }), r.role ? (_jsx(View, { px: 6, py: 2, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", children: r.role }) })) : null] }, r.key))) }));
-}
-/**
- * The session is asked FIRST, because it is the state that never resolves — a
- * reader nobody will answer would sit on "Reading." until they closed the tab.
- *
- * `useHydrated` keeps the server's render and the first client one agreeing:
- * `useOrganizations` resolves synchronously in the browser and never on the
- * server, and React answers a text mismatch by throwing the tree away.
- */
-function Team() {
-    const hydrated = useHydrated();
-    const { isAuthenticated } = useIam();
-    const signedIn = isAuthenticated || hasSession();
-    const { currentOrgId } = useOrganizations() || {};
-    if (!hydrated)
-        return _jsx(Quiet, { children: "\u00A0" });
-    if (!signedIn)
-        return _jsx(Quiet, { children: "Sign in to see who is in this workspace." });
-    if (!currentOrgId)
-        return _jsx(Quiet, { children: "Reading." });
-    return _jsx(Members, { owner: currentOrgId });
-}
-/**
- * THIS ROOM MOUNTS ITS OWN CLIENT.
- *
- * Every other room on this site arrives under `Room` → `Workspace`, which
- * supplies the `AiProvider` for the whole shell. `/vibe` is routed straight to
- * this component, so nothing above it does — and the moment anything here reads
- * the platform, `useAi` raises and the route answers 500. The provider prefers
- * the `client` prop over the one it builds itself, so a session that settles
- * after mount reaches the hooks below; signed out, its own anonymous client
- * stands in and the org-scoped reads simply answer nothing.
- *
- * The reading half is a separate component because a hook cannot run in the
- * component that mounts its provider.
- */
-function VibeWorkspaceInner() {
-    const { client } = useAi();
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(Vibe, {}) }));
-}
-function Vibe() {
-    const { Link } = useRooms();
-    const { user } = useIam();
-    // Every model the gateway lists, through the one picker.
-    const { models: catalog } = useModels();
-    const models = useMemo(() => parseModels(catalog), [catalog]);
-    const [activeTabMobile, setActiveTabMobile] = useState('stream');
-    // The frame shows what the bar says. It starts empty because a run publishes
-    // no URL — the 202 names a session, not an address — so this room has nothing
-    // to point at until somebody points it.
-    const [previewUrl, setPreviewUrl] = useState('');
-    const [previewDevice, setPreviewDevice] = useState('desktop');
-    const [previewKey, setPreviewKey] = useState(0);
-    const [agentInput, setAgentInput] = useState('');
-    // The house name for the lane, resolved against what the gateway serves —
-    // `served` falls to a model that answers rather than sending one nobody has.
-    const [wanted, setWanted] = useState(user ? ENSO : FREE);
-    const model = models.some((m) => m.id === wanted) ? wanted : served(models, wanted);
-    const [busy, setBusy] = useState(false);
-    const [turns, setTurns] = useState([]);
-    const bottom = useRef(null);
-    useEffect(() => {
-        bottom.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [turns]);
-    const who = user?.displayName || user?.name || user?.email || 'You';
-    /**
-     * SEND THE PROMPT, AND SAY WHAT CAME BACK.
-     *
-     * `repo` is no longer sent. It carried the room's name — which defaulted to
-     * `ocean-genesis-room` and was editable free text — into a field the contract
-     * defines as `owner/name` in the caller's own org, so a label typed in a
-     * header reached a real write as a repository. Omitting it is what the
-     * contract means by optional: the server picks the default.
-     */
-    const send = () => {
-        const task = agentInput.trim();
-        if (!task || busy)
-            return;
-        const id = `t${Date.now()}`;
-        setAgentInput('');
-        setBusy(true);
-        setTurns((prev) => [...prev, { id, time: clock(), who, prompt: task, model }]);
-        startRun({ prompt: task, model })
-            .then((run) => setTurns((prev) => prev.map((t) => (t.id === id ? { ...t, run } : t))))
-            .catch((e) => setTurns((prev) => prev.map((t) => (t.id === id ? { ...t, refused: plainly(e, 'this run') } : t))))
-            .finally(() => setBusy(false));
-    };
-    return (_jsxs(YStack, { "data-vibe": true, flex: 1, minH: 0, height: "100vh", width: "100%", maxW: "100%", overflowX: "auto", overflowY: "hidden", bg: "$background", pb: 56, children: [_jsxs(XStack, { height: 52, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", z: 30, shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(TopOrgSelector, {}), _jsxs(XStack, { display: "none", $md: { display: 'flex' }, items: "center", gap: "$2", py: 4, px: 10, rounded: 20, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(View, { width: 7, height: 7, rounded: 4, bg: busy ? 'var(--state-online)' : '$faint' }), _jsx(Text, { fontSize: 11, color: "$quiet", fontWeight: "500", children: busy ? 'Starting a run' : 'Idle' })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { $md: { display: 'none' }, bg: "$panel", rounded: 8, p: 2, gap: 2, borderWidth: 1, borderColor: "$borderColor", children: ['stream', 'preview', 'team'].map((tab) => (_jsx(Button, { size: "sm", px: "$2", variant: activeTabMobile === tab ? 'secondary' : 'ghost', color: activeTabMobile === tab ? '$ink' : '$soft', "aria-pressed": activeTabMobile === tab, onClick: () => setActiveTabMobile(tab), children: tab === 'stream' ? 'Stream' : tab === 'preview' ? 'Preview' : 'Team' }, tab))) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", children: _jsxs(Link, { href: invite(), children: [_jsx(UserPlus, { size: 13 }), "Invite"] }) })] })] }), _jsxs(View, { flex: 1, minH: 0, width: "100%", height: "100%", overflow: "hidden", display: "grid", gridTemplateRows: "100%", gridTemplateColumns: "100%", $md: { gridTemplateColumns: 'minmax(320px, 380px) minmax(0, 1fr)' }, $lg: { gridTemplateColumns: 'minmax(340px, 400px) minmax(360px, 1fr) minmax(300px, 340px)' }, $xl: { gridTemplateColumns: 'minmax(380px, 440px) minmax(480px, 1fr) minmax(340px, 380px)' }, children: [_jsxs(YStack, { height: "100%", borderRightWidth: 1, borderColor: "$borderColor", bg: "$background", minW: 0, display: activeTabMobile === 'stream' ? 'flex' : 'none', $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", gap: "$2", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Sparkles, { size: 14, color: "var(--foreground)" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", children: "Runs" }), turns.length > 0 && (_jsx(View, { px: 6, py: 2, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", children: turns.length }) }))] }), _jsxs(YStack, { flex: 1, overflowY: "auto", overflowX: "hidden", p: "$3.5", gap: "$4", children: [turns.length === 0 ? (_jsx(Quiet, { children: "Nothing has been sent from this room yet. Describe a task below and the run it opens appears here." })) : null, turns.map((turn) => (_jsxs(YStack, { gap: "$2.5", children: [_jsxs(XStack, { gap: "$2.5", children: [_jsx(View, { width: 24, height: 24, rounded: 12, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(Text, { fontSize: 10, fontWeight: "700", color: "$ink", children: turn.who.charAt(0).toUpperCase() }) }), _jsxs(YStack, { flex: 1, gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: 12, fontWeight: "700", color: "$ink", children: turn.who }), _jsx(Text, { fontSize: 11, color: "$soft", children: turn.time }), _jsx(View, { px: 5, py: 1, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", fontFamily: "$mono", children: turn.model }) })] }), _jsx(Text, { fontSize: 12, color: "$quiet", lineHeight: 18, children: turn.prompt })] })] }), _jsx(YStack, { ml: "$4", gap: "$1.5", children: turn.refused ? (_jsx(Text, { fontSize: 11, color: "$ink", lineHeight: 16, children: turn.refused })) : !turn.run ? (_jsx(Quiet, { children: "Starting." })) : (_jsxs(YStack, { p: "$2", rounded: 8, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", gap: "$1", children: [_jsx(Text, { fontSize: 11, color: "$quiet", fontFamily: "$mono", children: turn.run.sessionId }), _jsxs(Text, { fontSize: 11, color: "$soft", children: [turn.run.routed
-                                                                    ? `Running on ${turn.run.targetId}`
-                                                                    : 'Running in a sandbox', turn.run.branch ? ` · ${turn.run.branch}` : ''] }), _jsx(Text, { render: _jsx(Link, { href: dev(turn.run.sessionId) }), color: "$ink", fontSize: "$1", children: "Watch it work" })] })) })] }, turn.id))), _jsx("div", { ref: bottom })] }), _jsxs(YStack, { p: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(ModelPicker, { models: models, scope: "chat", value: model, onChange: setWanted, size: "sm", quiet: true }), _jsx(Text, { fontSize: 10, color: "$faint", children: "Press Enter to send" })] }), _jsxs(YStack, { bg: "$panel", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, overflow: "hidden", children: [_jsx(Text, { render: _jsx("textarea", { value: agentInput, onChange: (e) => setAgentInput(e.target.value), onKeyDown: (e) => {
-                                                        if (e.key === 'Enter' && !e.shiftKey) {
-                                                            e.preventDefault();
-                                                            send();
-                                                        }
-                                                    }, placeholder: "Describe a task and an agent starts on it\u2026", rows: 2, disabled: busy }), "$platform-web": { resize: 'none' }, width: "100%", bg: "transparent", px: 12, py: 10, color: "$ink", fontSize: "$2", outlineStyle: "none", borderWidth: 0 }), _jsx(XStack, { items: "center", justify: "flex-end", px: "$2.5", pb: "$2", children: _jsxs(Button, { variant: "primary", size: "sm", onClick: send, disabled: !agentInput.trim() || busy, children: ["Send", _jsx(ArrowUp, { size: 13 })] }) })] })] })] }), _jsxs(YStack, { height: "100%", borderRightWidth: 1, borderColor: "$borderColor", bg: "$background", minW: 0, display: activeTabMobile === 'preview' ? 'flex' : 'none', $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", justify: "space-between", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, maxW: 420, bg: "$panel", rounded: 6, px: "$2.5", py: 3, borderWidth: 1, borderColor: "var(--border-control)", children: [_jsx(Globe, { size: 13, color: "var(--muted-foreground)" }), _jsx(Text, { render: _jsx("input", { type: "text", value: previewUrl, onChange: (e) => setPreviewUrl(e.target.value), placeholder: "https://\u2026" }), flex: 1, bg: "transparent", borderWidth: 0, color: "$ink", fontSize: "$1", fontFamily: "$mono", outlineStyle: "none" })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { items: "center", gap: 2, bg: "$panel", rounded: 6, p: 2, borderWidth: 1, borderColor: "$borderColor", children: [
-                                                    ['desktop', 'Desktop', Monitor],
-                                                    ['tablet', 'Tablet', Tablet],
-                                                    ['mobile', 'Mobile', Smartphone],
-                                                ].map(([device, label, Glyph]) => (_jsx(Button, { variant: previewDevice === device ? 'secondary' : 'ghost', size: "icon-sm", "aria-label": label, title: label, "aria-pressed": previewDevice === device, onClick: () => setPreviewDevice(device), children: _jsx(Glyph, { size: 12, color: previewDevice === device ? 'var(--foreground)' : 'var(--muted-foreground)' }) }, device))) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Reload preview", title: "Reload preview", onClick: () => setPreviewKey((k) => k + 1), children: _jsx(RefreshCw, { size: 12, color: "var(--muted-foreground)" }) })] })] }), _jsx(YStack, { flex: 1, items: "center", justify: "center", bg: "$background", p: "$2", children: previewUrl.trim() === '' ? (_jsx(Quiet, { children: "Nothing to show. Put the address of what you are building in the bar." })) : (_jsx(View, { width: previewDevice === 'desktop' ? '100%' : previewDevice === 'tablet' ? 768 : 375, maxW: "100%", height: "100%", bg: "$background", rounded: previewDevice === 'desktop' ? 0 : 8, overflow: "hidden", borderWidth: previewDevice === 'desktop' ? 0 : 1, borderColor: "var(--border-control)", boxShadow: "var(--shadow-lg)", children: _jsx(View, { render: _jsx("iframe", { src: previewUrl, sandbox: "allow-scripts allow-forms allow-popups allow-same-origin", title: "Preview" }), width: "100%", height: "100%", borderWidth: 0 }) }, previewKey)) })] }), _jsxs(YStack, { height: "100%", bg: "$background", minW: 0, display: activeTabMobile === 'team' ? 'flex' : 'none', $md: { display: 'none' }, $lg: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Users, { size: 14, color: "var(--foreground)" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", children: "People" })] }), _jsx(YStack, { flex: 1, overflowY: "auto", overflowX: "hidden", p: "$3", gap: "$3", children: _jsx(Team, {}) })] })] })] }));
-}
-// THE GATE IS NOT A ROOM'S TO REMEMBER. This room draws its own shell rather
-// than `Room`, which is where every other room picks the organization gate up —
-// so it was reachable, and usable, by an account that had never paid. Wrapping
-// the export means the route cannot mount the room without it.
-export function VibeWorkspace() {
-    return (_jsx(Orgs, { children: _jsx(VibeWorkspaceInner, {}) }));
-}