@hanzo/rooms 0.1.0

package/dist/Guide.js

@@ -0,0 +1,272 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The first-run guide: what this place can do, said once, standing next to the
+// thing that does it.
+//
+// WHY COACHMARKS AND NOT A TOUR PAGE. A page of screenshots is read somewhere
+// else and remembered nowhere; a card pinned to the actual control is read
+// while looking at it, and the next time the reader sees that control they have
+// already been introduced. So every step here RESOLVES A LIVE ELEMENT and
+// positions against its measured rectangle. Nothing is drawn at a coordinate
+// somebody typed.
+//
+// A STEP WHOSE ANCHOR IS ABSENT IS SKIPPED, not faked. Destinations come and go
+// with the org's tier and with what the reader has hidden, so the tour is a
+// list of candidates and the ones present at that moment are the tour. That is
+// also why anchors are found by what the elements ALREADY carry — their aria
+// labels, their roles, their text — rather than by `data-tour` attributes
+// sprinkled through six other components: a marker added for a tour is a marker
+// somebody deletes while tidying, and the tour breaks silently three months
+// later. An accessible name is load-bearing for other reasons and survives.
+//
+// IT RUNS ONCE, and "once" belongs to the person rather than to the browser.
+// Completion is written to the caller's own preference document (`/v1/pref`,
+// whose `prefs` is an opaque object each surface keys as it likes), so it
+// follows them to a second machine. localStorage is written FIRST and read
+// first: it settles instantly, it answers for a reader who never signs in, and
+// it keeps the guide from re-opening in the seconds a PATCH is in flight.
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Text, View, XStack, YStack } from '@hanzo/gui';
+import { Button } from '@hanzo/ui';
+import { useIam } from '@hanzo/iam/react';
+import { useAi } from './lib/ai.js';
+import { Next, Scene } from './Scene.js';
+import { TOURS } from './tours.js';
+/** The ring on the spot: design's focus ring and its halo, one above the dim. gui hands a `calc()` to the page
+ *  unchanged; its types only name custom properties. */
+const RING = '0 0 0 1px var(--ring), 0 0 26px var(--ring-halo)';
+const ABOVE = 'calc(var(--z-overlay) + 1)';
+/** design's smallest rung (`--text-floor`, 10px), below gui's `$1`; gui's font size takes a rung or a number. */
+const FLOOR = 10;
+/** The page's own leading (design's `--leading-base`, 1.35rem), which a face's scope would otherwise replace with its
+ *  20px; gui's line height takes a rung or a number. */
+const LEAD = 21.6;
+/** Where the card's pointer sits, and which two edges it draws, for each side the card can take. */
+const POINTER = {
+    bottom: { t: -6.5, l: '50%', ml: -5.5, borderLeftWidth: 1, borderTopWidth: 1 },
+    top: { b: -6.5, l: '50%', ml: -5.5, borderRightWidth: 1, borderBottomWidth: 1 },
+    right: { l: -6.5, t: '50%', mt: -5.5, borderLeftWidth: 1, borderBottomWidth: 1 },
+    left: { r: -6.5, t: '50%', mt: -5.5, borderRightWidth: 1, borderTopWidth: 1 },
+};
+/** Where a room's tour is marked seen, in this browser and in the person's preferences. */
+const keyOf = (room) => (room === 'chat' ? 'hanzo:chat:guide' : `hanzo:${room}:guide`);
+const prefOf = (room) => `${room}Guide`;
+const PAD = 8;
+const GAP = 14;
+const CARD_W = 352;
+export function Guide({ room = 'chat' }) {
+    const KEY = keyOf(room);
+    const PREF = prefOf(room);
+    const STOPS = TOURS[room];
+    const { client } = useAi();
+    // ONLY FOR SOMEONE WHO IS SIGNED IN. `useAi` hands back a client either way —
+    // the anonymous one the free composer runs on — so a client is not proof of a
+    // reader. Opening for a visitor put a dimmed backdrop over the page before
+    // they had an account, and its panels sat on top of the Sign in button: the
+    // guide blocked the one action the page was asking for. It also has nothing
+    // true to say to a stranger, since half of what it points at is theirs only
+    // once they have a workspace.
+    const { isAuthenticated, isLoading } = useIam();
+    const [live, setLive] = useState(false);
+    const [i, setI] = useState(0);
+    const [spot, setSpot] = useState(null);
+    const [side, setSide] = useState('bottom');
+    const [card, setCard] = useState(null);
+    const cardRef = useRef(null);
+    // The stops whose anchors exist right now. A destination the org does not
+    // carry has no element, so it is not a step — the tour describes THIS
+    // workspace rather than a catalogue.
+    const stops = useMemo(() => (live ? STOPS.filter((s) => s.find() !== null) : STOPS), [live, STOPS]);
+    const stop = stops[i];
+    const done = useCallback((how) => {
+        setLive(false);
+        const mark = JSON.stringify({ at: new Date().toISOString(), how });
+        try {
+            localStorage.setItem(KEY, mark);
+        }
+        catch {
+            /* a browser with storage off still gets the guide once per visit */
+        }
+        // Follows the person, not the browser. Failure is silent on purpose: the
+        // local mark already settled it, and a guide is not worth an error.
+        client?.http
+            .json({ method: 'PATCH', path: '/v1/pref', body: { prefs: { [PREF]: { at: new Date().toISOString(), how } } } })
+            .catch(() => { });
+    }, [client, KEY, PREF]);
+    // Should it open at all? Local first — it answers instantly and it answers
+    // for a reader who never signs in.
+    useEffect(() => {
+        if (isLoading || !isAuthenticated)
+            return;
+        let held = false;
+        try {
+            held = Boolean(localStorage.getItem(KEY));
+        }
+        catch {
+            /* treat unreadable storage as "not yet shown" */
+        }
+        if (held)
+            return;
+        let alive = true;
+        const open = () => {
+            if (!alive)
+                return;
+            // Wait for the room to actually render before pointing at it.
+            const t = window.setTimeout(() => alive && setLive(true), 900);
+            return () => window.clearTimeout(t);
+        };
+        if (!client)
+            return open();
+        client.http
+            .json({ path: '/v1/pref' })
+            .then((doc) => {
+            if (!alive)
+                return;
+            if (doc?.prefs && doc.prefs[PREF]) {
+                try {
+                    localStorage.setItem(KEY, JSON.stringify(doc.prefs[PREF]));
+                }
+                catch {
+                    /* nothing to do */
+                }
+                return;
+            }
+            // THE TOUR IS FOR A NEW ACCOUNT. One that has already had a conversation
+            // here is not new: it may never have met this tour, and it does not
+            // need to. It is marked as such, so the question is not asked again.
+            client.threads
+                .list()
+                .then((had) => {
+                if (!alive)
+                    return;
+                if (Array.isArray(had) && had.length > 0)
+                    done('unneeded');
+                else
+                    open();
+            })
+                .catch(() => open());
+        })
+            .catch(() => open());
+        return () => {
+            alive = false;
+        };
+    }, [client, isAuthenticated, isLoading, KEY, PREF, done]);
+    // Measure the anchor, and re-measure when the page moves under it.
+    //
+    // NOT on every frame. A rAF loop that calls setSpot each tick re-renders the
+    // card sixty times a second, which makes it a target nothing can click: the
+    // element under the pointer is replaced between the hit test and the press.
+    // Measure on the events that actually move things, and write state only when
+    // the rectangle really changed.
+    useLayoutEffect(() => {
+        if (!live || !stop)
+            return;
+        let last = '';
+        const measure = () => {
+            const el = stop.find();
+            if (!el) {
+                setSpot(null);
+                return;
+            }
+            const r = el.getBoundingClientRect();
+            const next = { top: r.top - PAD, left: r.left - PAD, width: r.width + PAD * 2, height: r.height + PAD * 2 };
+            const key = `${Math.round(next.top)}:${Math.round(next.left)}:${Math.round(next.width)}:${Math.round(next.height)}`;
+            if (key === last)
+                return;
+            last = key;
+            setSpot(next);
+        };
+        // Bring it into view once per step, then measure after the scroll settles.
+        stop.find()?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        measure();
+        const settle = window.setTimeout(measure, 260);
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.body);
+        const el = stop.find();
+        if (el)
+            ro.observe(el);
+        window.addEventListener('scroll', measure, true);
+        window.addEventListener('resize', measure);
+        return () => {
+            window.clearTimeout(settle);
+            ro.disconnect();
+            window.removeEventListener('scroll', measure, true);
+            window.removeEventListener('resize', measure);
+        };
+    }, [live, stop, i]);
+    // Place the card against the measured spot, flipping rather than overflowing.
+    useLayoutEffect(() => {
+        if (!spot) {
+            setCard(null);
+            return;
+        }
+        const h = cardRef.current?.offsetHeight ?? 168;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let want = stop?.side ?? 'bottom';
+        if (want === 'bottom' && spot.top + spot.height + GAP + h > vh - 12)
+            want = 'top';
+        if (want === 'top' && spot.top - GAP - h < 12)
+            want = 'bottom';
+        if (want === 'right' && spot.left + spot.width + GAP + CARD_W > vw - 12)
+            want = 'left';
+        if (want === 'left' && spot.left - GAP - CARD_W < 12)
+            want = 'right';
+        let top;
+        let left;
+        if (want === 'bottom' || want === 'top') {
+            top = want === 'bottom' ? spot.top + spot.height + GAP : spot.top - GAP - h;
+            left = spot.left + spot.width / 2 - CARD_W / 2;
+        }
+        else {
+            left = want === 'right' ? spot.left + spot.width + GAP : spot.left - GAP - CARD_W;
+            top = spot.top + spot.height / 2 - h / 2;
+        }
+        setSide(want);
+        setCard({ top: Math.max(12, Math.min(top, vh - h - 12)), left: Math.max(12, Math.min(left, vw - CARD_W - 12)) });
+    }, [spot, stop]);
+    const next = useCallback(() => {
+        if (i + 1 >= stops.length)
+            done('finished');
+        else
+            setI(i + 1);
+    }, [i, stops.length, done]);
+    const back = useCallback(() => setI((n) => Math.max(0, n - 1)), []);
+    useEffect(() => {
+        if (!live)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                done('skipped');
+            }
+            else if (e.key === 'ArrowRight' || e.key === 'Enter') {
+                e.preventDefault();
+                next();
+            }
+            else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                back();
+            }
+        };
+        document.addEventListener('keydown', onKey, true);
+        return () => document.removeEventListener('keydown', onKey, true);
+    }, [live, next, back, done]);
+    if (!live || !stop || !spot || !card || typeof document === 'undefined')
+        return null;
+    const last = i + 1 >= stops.length;
+    // The dim is four panels around the spot rather than one box with a hole:
+    // a hole wants a mask, and a mask over a blurred backdrop reads as a seam.
+    const panel = { position: 'fixed', bg: 'var(--surface-scrim)', z: 'var(--z-overlay)', onClick: () => done('skipped') };
+    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Getting started with Hanzo", children: [_jsx(View, { ...panel, t: 0, l: 0, r: 0, height: Math.max(0, spot.top) }), _jsx(View, { ...panel, t: spot.top + spot.height, l: 0, r: 0, b: 0 }), _jsx(View, { ...panel, t: spot.top, l: 0, width: Math.max(0, spot.left), height: spot.height }), _jsx(View, { ...panel, t: spot.top, l: spot.left + spot.width, r: 0, height: spot.height }), _jsx(View, { position: "fixed", t: spot.top, l: spot.left, width: spot.width, height: spot.height, rounded: 10, borderWidth: 1, borderColor: "var(--ring)", boxShadow: RING, pointerEvents: "none", z: ABOVE }), stop.scene ? (_jsx(Scene, { step: `${i + 1} / ${stops.length}`, onNext: next, onSkip: () => done('skipped') })) : (_jsxs(YStack, { ref: cardRef, position: "fixed", t: card.top, l: card.left, width: CARD_W, z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, boxShadow: "var(--shadow-floating)", pt: 18, px: 18, pb: 15, children: [_jsx(View, { "aria-hidden": true, position: "absolute", width: 11, height: 11, bg: "var(--popover)", rotate: "45deg", borderColor: "var(--border-control)", ...POINTER[side] }), _jsxs(XStack, { items: "center", gap: 8, mb: 9, children: [_jsxs(Text, { fontFamily: "$body", lineHeight: LEAD, fontSize: FLOOR, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", fontVariant: ['tabular-nums'], children: [i + 1, " / ", stops.length] }), _jsx(View, { flex: 1, height: 1, bg: "$borderColor" }), _jsx(XStack, { gap: 3, children: stops.map((s, n) => (_jsx(View, { width: n === i ? 14 : 5, height: 5, rounded: 3, bg: n <= i ? '$ink' : '$rim', transition: "200ms" }, s.id))) })] }), _jsx(Text, { render: "h2", fontFamily: "$body", mb: 7, fontSize: "$6", fontWeight: "600", lineHeight: 22.1, letterSpacing: -0.17, color: "$ink", children: stop.title }), _jsx(Text, { render: "p", fontFamily: "$body", mb: 16, fontSize: "$3", lineHeight: 22.4, color: "$quiet", children: stop.body }), _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: () => done('skipped'), children: "Skip" }), _jsx(View, { flex: 1 }), i > 0 ? (_jsx(Button, { size: "sm", onClick: back, children: "Back" })) : null, _jsx(Next, { onPress: next, label: last ? 'Done' : 'Next' })] })] }))] }), document.body);
+}
+/** Let a room's guide be asked for again — a menu row can call this and reload. */
+export function replayGuide(room = 'chat') {
+    try {
+        localStorage.removeItem(keyOf(room));
+    }
+    catch {
+        /* nothing to clear */
+    }
+}

package/dist/Home.d.ts

@@ -0,0 +1,39 @@
+/** What a question can start here. Four, in the order they escalate. */
+declare const MODES: readonly [{
+    readonly id: 'chat';
+    readonly label: 'Chat';
+    readonly asks: 'Ask anything';
+}, {
+    readonly id: 'dev';
+    readonly label: 'Dev';
+    readonly asks: 'Describe what to build';
+}, {
+    readonly id: 'news';
+    readonly label: 'News';
+    readonly asks: 'What happened?';
+}, {
+    readonly id: 'research';
+    readonly label: 'Research';
+    readonly asks: 'What should we dig into?';
+}];
+export type Mode = (typeof MODES)[number]['id'];
+/**
+ * Ask, however the host answers.
+ *
+ * The default sends the question to /chat, which is the one room on this site
+ * that reads a question off the address (`?q=`, the name every Hanzo surface
+ * takes). A host that already HAS the thread — the chat pane, where this home
+ * belongs — passes its own `send` instead and nothing navigates.
+ */
+export interface HomeProps {
+    ask?: (question: string, mode: Mode, sources: string[]) => void;
+}
+/**
+ * A ROOM IS READ HERE. Home is the org's room: the rail's channels and direct
+ * messages open in this pane (`Talk`), keyed `team:<space>/<id>` in the
+ * selection slot and in the address, and the Rooms card below lists them and
+ * opens a new one. What other networks carry in stays in the Inbox, under its
+ * own key.
+ */
+export declare function Home({ ask }: HomeProps): import("react").JSX.Element;
+export {};

package/dist/Home.js

@@ -0,0 +1,306 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Home: one question at the top, and what to do next underneath.
+//
+// THE COMPOSER IS THE PAGE. Everything else is a card, and every card is a real
+// affordance reading real cloud data — no placeholder feed, no invented metric,
+// and no list that renders unknown as zero.
+//
+// The field is `@hanzo/ui/chat`'s `Composer`, the same component the browser
+// extension's home mounts and the same one `Chat.tsx` and `Work.tsx` already
+// use. Its `children` is the documented toolbar slot — "where a surface puts
+// its ModelSelector, attachment control or mode chips" — so the source chips go
+// THERE and the package needs no change to carry them. The four options above
+// it are this surface's, for the same reason: a home decides what it starts.
+import { dev } from './lib/host.js';
+import { useEffect, useMemo, useState } from 'react';
+import { AtSign, Blocks, Bot, Code2, FolderGit2, Hash, MessageSquare, Plus, UserPlus } from 'lucide-react';
+import { useAgents, usePeople, useSessions, useThreads } from '@hanzo/ai/react';
+import { Composer } from '@hanzo/ui/chat';
+import { Crew } from './crew.js';
+import { Box, Text, XStack, YStack } from '@hanzo/ui';
+import { tap } from './lib/tap.js';
+import { Grid } from '@hanzo/ui/grid';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { hasSession } from './lib/session.js';
+import { useAi } from './lib/ai.js';
+import { useHydrated } from './lib/hydrated.js';
+import { useOpen } from './open.js';
+import { plainly, say } from './failure.js';
+import { Directory } from './Directory.js';
+import { Bar } from './progress.js';
+import { Card, Go, INK, Quiet, Row, SOFT, CHOSEN } from './card.js';
+import { Talk } from './Talk.js';
+import { useMe } from './roster.js';
+import { roomKey, teamKey, useTeamRooms } from './rooms.js';
+import { invite, apps, projects } from './lib/home.js';
+import { BAD } from './lib/mix.js';
+/** What a question can start here. Four, in the order they escalate. */
+const MODES = [
+    { id: 'chat', label: 'Chat', asks: 'Ask anything' },
+    { id: 'dev', label: 'Dev', asks: 'Describe what to build' },
+    { id: 'news', label: 'News', asks: 'What happened?' },
+    { id: 'research', label: 'Research', asks: 'What should we dig into?' },
+];
+/**
+ * Where a grounded answer may look, as the `@source` hints the answer engine
+ * already reads (`SearchOptions.sources` in `@hanzo/ai`). Chat and Dev do not
+ * search, so the chips are drawn only for the two modes that do — and they live
+ * in the composer's footer row, whose height the send control already sets, so
+ * switching modes moves nothing.
+ */
+const SOURCES = ['web', 'news', 'academic', 'github', 'reddit', 'x'];
+const GROUNDS = (mode) => mode === 'news' || mode === 'research';
+/**
+ * A ROOM IS READ HERE. Home is the org's room: the rail's channels and direct
+ * messages open in this pane (`Talk`), keyed `team:<space>/<id>` in the
+ * selection slot and in the address, and the Rooms card below lists them and
+ * opens a new one. What other networks carry in stays in the Inbox, under its
+ * own key.
+ */
+export function Home({ ask }) {
+    const [mode, setMode] = useState('chat');
+    const [draft, setDraft] = useState('');
+    const [picked, setPicked] = useState([]);
+    // Connecting an app happens in the Directory, so the home mounts the
+    // Directory rather than linking somewhere that is not it. It is a Dialog —
+    // closed, it draws nothing — so a second instance beside the shell's costs a
+    // component and no pixels, and there is still ONE directory in the codebase.
+    const [directory, setDirectory] = useState(false);
+    const { room, openRoom } = useOpen();
+    const held = useTeamRooms();
+    const here = MODES.find((m) => m.id === mode) ?? MODES[0];
+    const grounded = GROUNDS(mode);
+    const at = roomKey(room);
+    if (at)
+        return _jsx(Open, { at: at, rooms: held, back: () => openRoom(null) });
+    const send = () => {
+        const question = draft.trim();
+        if (!question)
+            return;
+        setDraft('');
+        const hints = grounded ? picked : [];
+        if (ask) {
+            ask(question, mode, hints);
+            return;
+        }
+        // The hints ride IN the question, which is what they are: the engine reads
+        // `@news` in the query. Appending them to a chat turn would be noise, so
+        // only a grounded mode carries them.
+        const q = hints.length ? `${question} ${hints.map((s) => `@${s}`).join(' ')}` : question;
+        window.location.href = `/chat?q=${encodeURIComponent(q)}`;
+    };
+    return (_jsxs(YStack, { "data-home": true, flex: 1, minH: 0, width: "100%", overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: 720, mx: "auto", px: "$4", pt: "$8", gap: "$4", $sm: { pt: '$10' }, children: [_jsx(Text, { render: "h1", fontSize: "$8", fontWeight: "500", color: INK, text: "center", $sm: { fontSize: '$9' }, children: "What are we building?" }), _jsx(XStack, { justify: "center", gap: "$1", flexWrap: "wrap", children: MODES.map((one) => (_jsx(Box, { "data-tab": one.id, render: "button", onClick: () => setMode(one.id), "aria-current": mode === one.id, px: "$3", py: "$2", rounded: "$10", bg: mode === one.id ? CHOSEN : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$3", fontWeight: "500", color: mode === one.id ? INK : SOFT, children: one.label }) }, one.id))) }), _jsx(Composer, { value: draft, onChange: setDraft, onSend: send, placeholder: here.asks, label: here.asks, rows: 2, maxHeight: 240, children: grounded ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", shrink: 1, minW: 0, children: SOURCES.map((s) => {
+                                const on = picked.includes(s);
+                                return (_jsx(Box, { "data-chip": s, render: "button", "aria-pressed": on, onClick: () => setPicked((held) => (on ? held.filter((h) => h !== s) : [...held, s])), px: "$2", py: "$1", rounded: "$10", bg: on ? CHOSEN : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsxs(Text, { fontSize: "$2", color: on ? INK : SOFT, children: ["@", s] }) }, s));
+                            }) })) : null }), _jsx(Crew, { to: "/chat" })] }), _jsx(YStack, { width: "100%", maxW: 880, mx: "auto", px: "$4", py: "$8", children: _jsxs(Grid, { columns: { min: 260, max: 3 }, gap: 12, children: [_jsx(Rooms, { ...held }), _jsx(Projects, {}), _jsx(Chats, {}), _jsx(Next, { onConnect: () => setDirectory(true) }), _jsx(Apps, { onConnect: () => setDirectory(true) }), _jsx(Team, {}), _jsx(Build, {})] }) }), _jsx(Directory, { open: directory, onClose: () => setDirectory(false) })] }));
+}
+/**
+ * The open room, in place of the question and the cards.
+ *
+ * The key names a space and an id; the org's list answers which room that is.
+ * The ladder is the one every card climbs: the session first, because that is
+ * the state that never resolves, then the refusal, then the read, then a key no
+ * room answers to — a shared link to a room this reader cannot see.
+ */
+function Open({ at, rooms, back, }) {
+    const { isAuthenticated, isLoading } = useIam();
+    const found = rooms.rooms?.find((one) => one.space === at.space && one.id === at.id);
+    if (found)
+        return _jsx(Talk, { room: found }, teamKey(found));
+    const reading = isLoading || (isAuthenticated && rooms.rooms === null && !rooms.wrong);
+    const line = reading
+        ? 'Reading the room.'
+        : !isAuthenticated
+            ? 'Sign in to read this room.'
+            : rooms.wrong
+                ? say(rooms.wrong, 'this room')
+                : 'That room is not here.';
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$3", children: [_jsx(Text, { fontSize: "$3", color: SOFT, children: line }), reading ? null : (_jsx(Box, { render: "button", onClick: back, ...tap, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Back to home" }) }))] }));
+}
+/* ─────────────────────────────────────────────────────────────────────────────
+   The cards. Each one owns its own read, so a card that cannot answer says so
+   on its own rather than emptying the grid.
+   ────────────────────────────────────────────────────────────────────────── */
+/**
+ * The org's rooms, and the way to open one.
+ *
+ * The list is the read the rail makes (`useTeamRooms`), so the two cannot
+ * disagree about what the org has. A new room is posted with the reader as its
+ * first member — the platform adds nobody on its own — in the space of the
+ * org's first room, which is the space an org with one has; an org with none
+ * leaves it unsaid. The row the platform answers with is opened at once.
+ */
+function Rooms({ rooms, wrong, open }) {
+    const { openRoom } = useOpen();
+    const me = useMe();
+    const [naming, setNaming] = useState(false);
+    const [name, setName] = useState('');
+    const [opening, setOpening] = useState(false);
+    const [refused, setRefused] = useState(null);
+    const make = async () => {
+        const wanted = name.trim();
+        if (!wanted || opening || !me)
+            return;
+        setOpening(true);
+        setRefused(null);
+        try {
+            const made = await open({ name: wanted, space: rooms?.[0]?.space, members: [me] });
+            setName('');
+            setNaming(false);
+            openRoom(teamKey(made));
+        }
+        catch (e) {
+            setRefused(plainly(e, 'this room'));
+        }
+        finally {
+            setOpening(false);
+        }
+    };
+    return (_jsxs(Card, { kind: "rooms", icon: _jsx(Hash, { size: 14, "aria-hidden": true }), title: "Rooms", children: [rooms === null ? (_jsx(Waiting, { wrong: wrong, subject: "your rooms" })) : rooms.length === 0 ? (_jsx(Quiet, { children: "No rooms yet. Open one and the conversation has somewhere to live." })) : (_jsx(YStack, { gap: "$1", children: rooms.slice(0, 6).map((one) => (_jsx(Row, { icon: one.direct ? _jsx(AtSign, { size: 12, "aria-hidden": true }) : _jsx(Hash, { size: 12, "aria-hidden": true }), onPress: () => openRoom(teamKey(one)), children: one.name || 'Direct message' }, teamKey(one)))) })), !me ? null : naming ? (_jsxs(YStack, { gap: "$1", children: [_jsxs(XStack, { gap: "$1", items: "center", children: [_jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter')
+                                            void make();
+                                        if (e.key === 'Escape')
+                                            setNaming(false);
+                                    }, placeholder: "Name", "aria-label": "Room name", autoFocus: true }), flex: 1, minW: 0, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, color: "inherit", fontSize: "$2" }), _jsx(Box, { render: "button", onClick: () => void make(), "aria-disabled": opening, opacity: opening ? 0.5 : 1, px: "$2", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Open it" }) })] }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] })) : (_jsx(Row, { icon: _jsx(Plus, { size: 12, "aria-hidden": true }), onPress: () => setNaming(true), children: "New room" }))] }));
+}
+/**
+ * A read the SDK has no hook for.
+ *
+ * `null` while the answer is not in — including when the request failed, which
+ * is the case a `[]` would misreport as "the org has none".
+ *
+ * The reader is passed by REFERENCE (`lib/home.ts`'s own functions), not built
+ * in the caller, so the effect's dependency is honest and it runs once per
+ * client rather than once per render.
+ */
+function useRead(read) {
+    const { client } = useAi();
+    const [held, setHeld] = useState(null);
+    // WHY THERE IS NOTHING, kept rather than swallowed. `null` alone says only
+    // that no answer is held, which is equally true of a request still in flight
+    // and one that came back no — and a card cannot choose its sentence without
+    // knowing which.
+    const [wrong, setWrong] = useState(null);
+    useEffect(() => {
+        if (!client)
+            return;
+        const stop = new AbortController();
+        void read(client, stop.signal)
+            .then((got) => {
+            if (!stop.signal.aborted)
+                setHeld(got);
+        })
+            .catch((e) => {
+            if (!stop.signal.aborted)
+                setWrong(e);
+        });
+        return () => stop.abort();
+    }, [client, read]);
+    return { held, wrong };
+}
+/**
+ * WHAT A CARD SAYS BEFORE IT HAS ANYTHING.
+ *
+ * Three states wore one word. "Reading." is true only while an answer is on its
+ * way — a reader with no session will never be sent one, and a store that
+ * refused has already answered. Measured on production: Projects, Apps and Team
+ * all still said "Reading." twelve seconds after load, to a visitor nobody was
+ * ever going to answer.
+ *
+ * The session is asked FIRST, because that is the state that never resolves.
+ */
+function Waiting({ wrong, subject }) {
+    const { isAuthenticated } = useIam();
+    const signedIn = isAuthenticated || hasSession();
+    if (!signedIn)
+        return _jsxs(Quiet, { children: ["Sign in to see ", subject, "."] });
+    if (wrong)
+        return _jsx(Quiet, { children: say(wrong, subject) });
+    return _jsx(Quiet, { children: "Reading." });
+}
+const useProjects = () => useRead(projects);
+const useApps = () => useRead(apps);
+function Projects() {
+    const { held, wrong } = useProjects();
+    return (_jsxs(Card, { kind: "projects", icon: _jsx(FolderGit2, { size: 14, "aria-hidden": true }), title: "Projects", children: [held === null ? (_jsx(Waiting, { wrong: wrong, subject: "your projects" })) : held.length === 0 ? (_jsx(Quiet, { children: "Nothing deployed yet." })) : (_jsx(YStack, { gap: "$1", children: held.slice(0, 3).map((p) => (_jsx(Row, { href: p.liveUrl, children: p.name || p.slug }, p.slug))) })), _jsx(Go, { href: dev(), children: "Ship one" })] }));
+}
+function Chats() {
+    const { threads, loading } = useThreads();
+    const { open } = useOpen();
+    return (_jsx(Card, { kind: "chats", icon: _jsx(MessageSquare, { size: 14, "aria-hidden": true }), title: "Chats", children: loading && threads.length === 0 ? (_jsx(Waiting, { subject: "your chats" })) : threads.length === 0 ? (_jsx(Quiet, { children: "No chats yet." })) : (_jsx(YStack, { gap: "$1", children: threads.slice(0, 3).map((t) => (_jsx(Row, { onPress: () => open(t.id), children: t.title || 'Untitled' }, t.id))) })) }));
+}
+/**
+ * What is going, then what to do next.
+ *
+ * Both halves are DERIVED — every line is a fact this page measured, and it
+ * names the fact rather than a recommendation nobody can check. A running run
+ * carries its own bar; see `progress.tsx` for why that bar is usually invisible
+ * today.
+ */
+function Next({ onConnect }) {
+    const { sessions } = useSessions({ limit: 100 });
+    const { agents } = useAgents();
+    const { held } = useProjects();
+    const { held: connected } = useApps();
+    const safeSessions = Array.isArray(sessions) ? sessions : [];
+    const safeAgents = Array.isArray(agents) ? agents : [];
+    const running = useMemo(() => safeSessions.filter((s) => s && s.status === 'running'), [safeSessions]);
+    const rows = useMemo(() => {
+        const out = [];
+        const failed = safeSessions.filter((s) => s && s.status === 'error').length;
+        if (failed)
+            out.push({ key: 'failed', say: `${failed} failed`, href: '/work' });
+        if (safeAgents.length === 0)
+            out.push({ key: 'agent', say: 'Hire your first agent', href: '/work' });
+        if (held?.length === 0)
+            out.push({ key: 'ship', say: 'Ship your first project', href: dev() });
+        if (connected && Array.isArray(connected) && !connected.some((a) => a?.connected))
+            out.push({ key: 'connect', say: 'Connect an app', press: true });
+        return out;
+    }, [safeSessions, safeAgents, held, connected]);
+    return (_jsxs(Card, { kind: "next", icon: _jsx(Bot, { size: 14, "aria-hidden": true }), title: "Next", children: [running.length ? (_jsx(YStack, { gap: "$2", children: running.slice(0, 2).map((s) => (_jsxs(YStack, { gap: "$1", children: [_jsx(Row, { href: "/work", children: s.title || s.agent || 'Run' }), _jsx(Bar, { run: s, label: false })] }, s.id))) })) : null, rows.length === 0 && running.length === 0 ? (_jsx(Quiet, { children: "Nothing needs you." })) : (_jsx(YStack, { gap: "$1", children: rows.slice(0, 3).map((r) => (_jsx(Row, { href: r.href, onPress: r.press ? onConnect : undefined, children: r.say }, r.key))) }))] }));
+}
+/**
+ * The apps the org has connected.
+ *
+ * A connected provider has no page on this site — `/integrations/<slug>` is the
+ * SDK guide catalogue (openai-sdk, langchain, cursor …) and shares no ids with
+ * the cloud's connectors — so a name here is a name, and the ACTION opens the
+ * Directory, which is where connecting actually happens.
+ */
+function Apps({ onConnect }) {
+    const { held, wrong } = useApps();
+    const on = held?.filter((a) => a.connected) ?? [];
+    return (_jsxs(Card, { kind: "apps", icon: _jsx(Blocks, { size: 14, "aria-hidden": true }), title: "Apps", children: [held === null ? (_jsx(Waiting, { wrong: wrong, subject: "connected apps" })) : on.length === 0 ? (_jsx(Quiet, { children: "Nothing connected." })) : (_jsx(YStack, { gap: "$1", children: on.slice(0, 3).map((a) => (_jsx(Row, { children: a.name }, a.id))) })), _jsx(Go, { onPress: onConnect, children: "Connect" })] }));
+}
+/**
+ * THE ONE CARD A PRERENDER CANNOT DRAW.
+ *
+ * Every other read here starts empty on the server AND on the first client
+ * render, so the two agree and hydration is quiet. `useOrganizations` does not:
+ * it resolves the org from the SDK synchronously, so the client's first render
+ * already knows the reader and the server's never did — a TEXT mismatch, which
+ * React answers by throwing the whole tree away and re-rendering it.
+ *
+ * `useHydrated` is false on the server and false on that first client render,
+ * so both draw the same line and the real answer arrives on the render
+ * hydration was going to perform anyway.
+ */
+function Team() {
+    const hydrated = useHydrated();
+    const { currentOrgId } = useOrganizations();
+    if (!hydrated || !currentOrgId) {
+        return (_jsxs(Card, { kind: "team", icon: _jsx(UserPlus, { size: 14, "aria-hidden": true }), title: "Team", children: [_jsx(Waiting, { subject: "your team" }), _jsx(Go, { href: invite(), children: "Invite" })] }));
+    }
+    return _jsx(Mates, { owner: currentOrgId });
+}
+/** The org's people. Split out because `usePeople` needs an owner and a hook
+ *  cannot be called conditionally. */
+function Mates({ owner }) {
+    const { people, loading } = usePeople({ owner, service: false });
+    return (_jsxs(Card, { kind: "team", icon: _jsx(UserPlus, { size: 14, "aria-hidden": true }), title: "Team", children: [loading && people.length === 0 ? (_jsx(Waiting, { subject: "your team" })) : people.length < 2 ? (_jsx(Quiet, { children: "Just you." })) : (_jsxs(Quiet, { children: [people.length, " people"] })), _jsx(Go, { href: invite(), children: "Invite" })] }));
+}
+function Build() {
+    return (_jsxs(Card, { kind: "build", icon: _jsx(Code2, { size: 14, "aria-hidden": true }), title: "Build", children: [_jsx(Quiet, { children: "Hanzo Dev writes it, runs it, ships it." }), _jsx(Go, { href: dev(), children: "Open Dev" })] }));
+}

package/dist/Inbox.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The pane, and the session its reads need.
+ *
+ * SPLIT so the hooks below never run for a reader with none: every route this
+ * pane reads is org-scoped and answers 403 without one, and a hook cannot be
+ * called conditionally — so the condition is a component boundary rather than
+ * an `if` the rules forbid.
+ */
+export declare function Inbox(): import("react").JSX.Element;