@hanzo/rooms 0.1.43 → 0.1.45

package/dist/App.d.ts

@@ -0,0 +1 @@
+export declare function App(): import("react").JSX.Element;

package/dist/App.js

@@ -0,0 +1,87 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The web app as the whole window, in two modes: Chat, a conversation with the
+// product's AI, and Dev, @hanzo/build's `<Builder>` without a rail of its own.
+// One column serves both (Column.tsx): the wordmark and the switch, New, Dev's
+// places, the reader's Recents in both modes, and the account. The address says
+// the mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are
+// Chat on a new conversation, `/chat/<id>` one of the reader's, and a path under
+// `/dev` is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project.
+// Moving between the modes is a history entry (`go`), never a load, so a host
+// serves this one component for every path under each.
+//
+// Every host draws this: hanzo.ai at `/`, the desktop app as its main window.
+// The host mounts IamProvider and `<Rooms>` with its router and the path, and
+// draws this only for a signed-in reader; what a stranger sees is the host's.
+//
+// DEV'S PANE HAS NO COLUMN BESIDE IT. The column beside a pane is Chat's (its
+// pinned summary, `useOpen().aside`), and that choice outlives a move to Dev,
+// where nothing fills it: drawn there it was an empty pane to the right of the
+// builder. So Dev's pane is cut on its own and the summary is Chat's alone.
+//
+// THE WINDOW IS A FRAME (`data-slot="frame"`): the column, the pane and the
+// column beside it are three panes floating on a lit floor (ground.ts), one
+// gutter round them and between them, `--pane-gap`, each sized by the edge
+// beside it.
+import { useEffect, useState } from 'react';
+import { Menu } from 'lucide-react';
+import { AiProvider } from '@hanzo/ai/react';
+import { Text, XStack, YStack } from '@hanzo/gui';
+import { Builder, HostProvider, route } from '@hanzo/build';
+import { SidebarIconButton } from '@hanzo/ui/chat';
+import { scrim } from '@hanzo/ui/glass';
+import { useAi } from './lib/ai.js';
+import { Chat } from './Chat.js';
+import { Column } from './Column.js';
+import { useDevHost } from './dev.js';
+import { useRooms } from './host.js';
+import { wordmark } from './ModeMark.js';
+import { empty, openThread, useOpen } from './open.js';
+import { Paned } from './Shell.js';
+import { floor, pane } from './ground.js';
+import { app, go, place, talk } from './lib/host.js';
+/** `/` is Chat on a new conversation. */
+const HOME = { mode: 'chat', thread: null };
+/** Where each mode was last, so the switch goes back to it. */
+const last = { chat: '', dev: '' };
+export function App() {
+    const host = useDevHost();
+    const { client } = useAi();
+    const here = useRooms().path ?? '/';
+    const at = place(here) ?? HOME;
+    const mode = at.mode;
+    // A run floats two panes of its own, so the pane it stands in is not cut.
+    const run = at.mode === 'dev' && route(at.at).kind === 'run';
+    const asked = at.mode === 'chat' ? at.thread : null;
+    const { thread } = useOpen();
+    const [drawer, setDrawer] = useState(false);
+    // An address names Chat's conversation, and one just begun writes its id back.
+    useEffect(() => {
+        if (mode !== 'chat')
+            return;
+        if (asked && asked !== thread)
+            openThread(asked);
+        else if (!asked && thread)
+            empty();
+        // The address decides; the selection follows it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, asked]);
+    useEffect(() => {
+        if (mode === 'chat' && thread && thread !== asked)
+            go(talk(thread), true);
+        // The selection writes the address only when it moves.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, thread]);
+    useEffect(() => {
+        last[mode] = `${window.location.pathname}${window.location.search}`;
+        setDrawer(false);
+    }, [mode, here]);
+    const toChat = () => go(last.chat || talk());
+    const toDev = () => go(last.dev || app(''));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...floor, flex: 1, minW: 0, p: "var(--pane-gap)", gap: "var(--pane-gap)", height: "100dvh", overflow: "hidden", "$max-md": {
+                    p: 0,
+                    gap: 0,
+                    bg: 'var(--black)',
+                    backgroundImage: 'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.04), transparent 70%), linear-gradient(180deg, #000000 0%, #030303 50%, #080808 100%)',
+                }, children: [_jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: go }), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, gap: "var(--pane-gap)", "$max-md": { gap: 0 }, children: [_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: _jsx(Builder, { host: host, rail: false }) })) })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), ...scrim, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: "var(--pane-gap)", b: "var(--pane-gap)", l: "var(--pane-gap)", width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: go, drawer: true }) })] })) : null] }) }) }));
+}

package/dist/Settings.js

@@ -104,7 +104,7 @@ const GROUPS = [
             { id: 'base', label: 'Base', href: site('/base') },
             { id: 'functions', label: 'Functions', href: site('/functions') },
             { id: 'realtime', label: 'Realtime', href: site('/realtime') },
-            { id: 'keys', label: 'API keys' },
+            { id: 'keys', label: 'API keys', href: 'https://platform.hanzo.ai/api-keys' },
         ],
     },
 ];
@@ -156,8 +156,6 @@ function Pane({ id, note }) {
         return _jsx(Billing, {});
     if (id === 'usage')
         return _jsx(Usage, {});
-    if (id === 'keys')
-        return _jsx(Keys, {});
     if (id === 'model')
         return _jsx(Model, {});
     if (id === 'models')
@@ -262,10 +260,6 @@ function Usage() {
     // account that had spent nothing.
     return (_jsxs(YStack, { gap: "$6", children: [plan, _jsx(UsagePanel, { baseUrl: api(), token: accessToken, upgrade: payPage(), title: "Spend" })] }));
 }
-/** Keys are minted and revoked through the console, which holds the one issuer. */
-function Keys() {
-    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "A key is shown once, at the moment it is minted. That happens where the issuer lives." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: "https://platform.hanzo.ai/api-keys", target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage API keys" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] }));
-}
 const HISTORICAL_PERSONAS = [
     { id: 'architect', name: 'Software Architect', role: 'Full-stack & systems design' },
     { id: 'satoshi', name: 'Satoshi Nakamoto', role: 'Distributed cryptography & consensus' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "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",