@hanzo/rooms 0.1.57 → 0.1.59

package/dist/Rail.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The app's rail: its products as marks down the window's left edge, in one
+// order — Chat, Dev, Library, Scheduled tasks, Customize — then More, a menu of
+// the rest, and the account at the foot. It is how the app moves between Chat
+// and Dev; there is no switch anywhere else.
+//
+// Library, Scheduled tasks and Customize are Dev's own places (@hanzo/build's
+// Artifacts, Automations and Customize), raised to the rail; each is lit while
+// the reader stands on it, and Dev is lit for the rest of Dev.
+//
+// It stands on the frame's floor, never cut as a pane (ground.ts): the rail and
+// the sidebar beside it are the window, and the content is the panel inset in
+// it.
+//
+// The sidebar's toggle leads it (`toggle`) where the host has no bar of its own:
+// a browser tab. A host that is a window draws the toggle in its bar beside Back
+// and Forward (App.tsx `bar`), and its rail starts with Chat. On a phone the
+// rail lies along the foot of the drawer (`flat`), the account at its end.
+import { Boxes, Clock, Code2, Ellipsis, FolderGit2, LayoutTemplate, Library, ListTodo, MessageSquare, PanelLeft, Puzzle, Server, SquareTerminal, Users } from 'lucide-react';
+import { XStack, YStack } from '@hanzo/gui';
+import { route } from '@hanzo/build';
+import { DropdownMenu } from '@hanzo/ui';
+import { Me } from './Me.js';
+import { app, TABS, WORKSPACE } from './lib/host.js';
+/** The rail's width, px. */
+export const RAIL = 48;
+/** A mark, px: a 36px square on a 44px pitch. */
+const MARK = 36;
+/**
+ * Opens an address of another product in a tab of its own, through an anchor,
+ * so a host that sends links out of its window (the desktop's system browser)
+ * hears it as the link it is.
+ */
+function out(href) {
+    const a = document.createElement('a');
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+}
+/** The places the rail raises out of Dev, by the builder address each opens. */
+const RAISED = { library: '-/artifacts', scheduled: '-/automations', customize: '-/customize' };
+/** Which raised place a builder address stands on, if any. */
+function raised(at) {
+    if (at === null)
+        return null;
+    const r = route(at);
+    if (r.kind === 'screen' && r.screen === 'artifacts')
+        return 'library';
+    if ((r.kind === 'screen' && r.screen === 'automations') || r.kind === 'automation')
+        return 'scheduled';
+    if (r.kind === 'customize')
+        return 'customize';
+    return null;
+}
+/** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
+export function Mark({ label, on = false, onPress, children, ...rest }) {
+    return (_jsx(XStack, { render: "button", "aria-label": label, ...{ title: label }, "aria-current": on ? 'page' : undefined, onPress: onPress, width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: on ? 1 : 0.62, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
+        // A thumb's 44px on a touch screen.
+        $touchable: { width: 44, height: 44 }, ...rest, children: children }));
+}
+/** The sidebar's toggle: the same mark wherever a host draws it. */
+export function Toggle({ open, onPress, label }) {
+    return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
+}
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, go, onOrg, }) {
+    const here = mode === 'dev' ? raised(at) : null;
+    const to = (p) => () => go(app(p));
+    // Everything else the app reaches, behind More: Dev's other places, then the products on hosts of their own.
+    const rest = [
+        { key: 'projects', label: 'Projects', icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), onSelect: to('-/projects') },
+        { key: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), onSelect: to('-/templates') },
+        { key: 'issues', label: 'Issues', icon: _jsx(ListTodo, { size: 16, "aria-hidden": true }), onSelect: to('-/issues') },
+        { key: 'machines', label: 'Machines', icon: _jsx(Server, { size: 16, "aria-hidden": true }), onSelect: to('-/settings/machines') },
+        { key: 'environments', label: 'Environments', icon: _jsx(Boxes, { size: 16, "aria-hidden": true }), onSelect: to('-/settings/environments') },
+        { type: 'separator', key: 'away' },
+        { key: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), onSelect: () => out(TABS) },
+        { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
+    ];
+    const Stack = flat ? XStack : YStack;
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) }), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+}

package/dist/Recents.js

@@ -9,12 +9,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // and Chat's Status shows the archived ones apart.
 import { useEffect, useId, useMemo, useRef } from 'react';
 import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
-import { ListFilter, MessageSquare } from 'lucide-react';
+import { ListFilter } from 'lucide-react';
 import { DOTS, route, useSessions } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useKept } from './kept.js';
-import { ago, arrange, chats, MENUS, PLAIN, runs, SINCE, viewOf } from './recent.js';
+import { arrange, chats, MENUS, PINNED, PLAIN, runs, SINCE, viewOf } from './recent.js';
 import { ConversationMenu, ThreadRow, useThreadList } from './thread.js';
 /** The menu's items: each section a heading and its options, the one in force checked. */
 function items(mode, view, set) {
@@ -68,23 +68,35 @@ function List({ mode, rows, words, view, keep, open, reading, error, onOpen, thr
     const label = useId();
     const groups = arrange(rows, view, words);
     const narrowed = view.status !== PLAIN.status || view.since !== PLAIN.since;
-    const now = new Date();
     const running = mode === 'dev' ? rows.filter((r) => r.status === 'running').length : 0;
+    // A row is its title alone, as the reference draws it: a conversation's ⋯
+    // shows on hover and focus, a run's state is a dot at its end.
     const row = (r) => {
-        const when = ago(r.at, now);
         const t = threads?.get(r.id);
-        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when || t ? '$8' : '$2', ...(t ? { $touchable: { pr: 52 } } : null), onKeyDown: (e) => {
+        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 31, px: "$2", pr: t || r.kind === 'dev' ? '$7' : '$2', ...(t ? { $touchable: { pr: 52 } } : null), onKeyDown: (e) => {
                 if (e.key !== 'Enter' && e.key !== ' ')
                     return;
                 e.preventDefault?.();
                 onOpen(r);
-            }, icon: r.kind === 'chat' ? (_jsx(MessageSquare, { size: 14, "aria-hidden": true })) : (_jsx(XStack, { width: 14, justify: "center", children: _jsx(StatusDot, { status: DOTS[r.status] ?? 'idle' }) })), onPress: () => onOpen(r), children: r.title }));
-        // How long ago, at the row's end; the full time is its title.
-        const age = when ? (_jsx(SizableText, { size: "$1", color: "$soft", pointerEvents: "none", display: "flex", items: "center", fontVariant: ['tabular-nums'], children: _jsx("time", { dateTime: r.at, title: new Date(r.at).toLocaleString(), children: when }) })) : null;
+            }, onPress: () => onOpen(r), children: _jsx(SizableText, { size: "$3", color: open(r) ? '$ink' : '$quiet', numberOfLines: 1, display: "block", children: r.title }) }));
         if (t)
-            return (_jsx(ThreadRow, { t: t, active: open(r), aside: age, children: item }, r.id));
-        return (_jsxs(YStack, { role: "listitem", position: "relative", children: [item, age ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", children: age })) : null] }, r.id));
+            return (_jsx(ThreadRow, { t: t, active: open(r), children: item }, r.id));
+        return (_jsxs(YStack, { role: "listitem", position: "relative", children: [item, r.kind === 'dev' ? (_jsx(XStack, { position: "absolute", r: "$2.5", t: 0, b: 0, items: "center", pointerEvents: "none", children: _jsx(StatusDot, { status: DOTS[r.status] ?? 'idle' }) })) : null] }, r.id));
     };
-    const body = groups.length ? (_jsx(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: groups.map((g) => g.title ? (_jsxs(YStack, { role: "listitem", gap: 1, pt: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (g.rows.map(row))) })) : reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : view.status === 'archived' ? (_jsx(Note, { children: "No archived chats." })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet. Say something and it lands here.' : 'No runs yet.' }));
-    return (_jsxs(YStack, { "data-slot": "recents", flex: 1, minH: 0, mt: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", height: 30, pl: "$2", pr: "$1", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: label, size: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: "Recents" }), running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), _jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) })] }), _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, threads ? (_jsx(ConversationMenu, { threads: threads, active: held, onGone: onNew, children: _jsx(YStack, { children: body }) })) : (body)] })] }));
+    // The view menu stands at the end of the Recents heading: the target's own, quiet until the pointer is near.
+    const menu = (_jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", opacity: narrowed ? 1 : 0, "$group-hover": { opacity: 1 }, focusStyle: { opacity: 1 }, $touchable: { opacity: 1 }, hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) }));
+    /** A section's heading: the reference's quiet 14px label, the Recents one carrying the count and the menu. */
+    const heading = (title, id, lead = false) => (_jsxs(XStack, { group: true, items: "center", justify: "space-between", height: 31, pl: "$2", pr: "$1", mt: "$3", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: id, size: "$3", color: "$soft", children: title }), lead && running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), lead ? menu : null] }));
+    const loose = groups.filter((g) => g.title !== PINNED);
+    const pinned = groups.find((g) => g.title === PINNED);
+    const note = reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : view.status === 'archived' ? (_jsx(Note, { children: "No archived chats." })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet.' : 'No runs yet.' }));
+    // Each list of conversations holds its own menu (thread.tsx): the view menu
+    // in the Recents heading between them is a menu of its own, never inside one.
+    const menus = (rows) => threads ? (_jsx(ConversationMenu, { threads: threads, active: held, onGone: onNew, children: _jsx(YStack, { children: rows }) })) : (rows);
+    const rest = loose.length
+        ? loose.map((g) => g.title ? (_jsxs(YStack, { gap: 1, pt: "$1", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (_jsx(YStack, { role: "list", "aria-label": "All", gap: 1, children: g.rows.map(row) }, "all")))
+        : pinned
+            ? null
+            : note;
+    return (_jsx(YStack, { "data-slot": "recents", flex: 1, minH: 0, children: _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, _jsxs(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: [pinned ? (_jsxs(YStack, { role: "listitem", gap: 1, children: [heading(PINNED), menus(_jsx(YStack, { role: "list", "aria-label": PINNED, gap: 1, children: pinned.rows.map(row) }))] })) : null, _jsxs(YStack, { role: "listitem", gap: 1, children: [heading('Recents', label, true), loose.length ? menus(rest) : rest] })] })] }) }));
 }

package/dist/RightPane.d.ts

@@ -38,3 +38,26 @@ export declare function useKinds({ at, said, held, deck }: {
     held: Held[];
     deck: Deck;
 }): Kind[];
+/**
+ * The conversation's summary, from the outline mark in its header: what it
+ * produced (Outputs, led by Create file or site, which starts a Dev run) and
+ * what went into it (Sources, with the `+` that brings more). Each row opens in
+ * a tab beside the conversation. A section with nothing in it keeps its heading
+ * and one quiet line.
+ */
+export declare function Summary({ at, said, held, deck, onOpen, onCreate }: {
+    at: string;
+    said: ChatMessage[];
+    held: Held[];
+    deck: Deck;
+    onOpen: () => void;
+    onCreate: () => void;
+}): import("react").JSX.Element;
+/**
+ * The organization's sites, as an empty tab suggests them: `GET /v1/projects`,
+ * every row with a live address. Read once a conversation; nothing on a refusal.
+ */
+export declare function useSites(): {
+    title: string;
+    url: string;
+}[];

package/dist/RightPane.js

@@ -16,26 +16,22 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // The panel's tabs, their order and the open one are kept per conversation by
 // @hanzo/build (`useDeck`, scope `chat:<channel>`); the frame owns the column
 // it stands in (`Beside` in `Shell.tsx`).
-import { useMemo, useState } from 'react';
-import { FileCode, Image as ImageMark, Paperclip, Plus, Search } from 'lucide-react';
-import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Text, YStack, } from '@hanzo/ui';
+import { useEffect, useMemo, useState } from 'react';
+import { FileCode, Globe, Image as ImageMark, ListTodo, Paperclip, Plus, Search } from 'lucide-react';
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger, Text, XStack, YStack, } from '@hanzo/ui';
 import { useAi } from '@hanzo/ai/react';
 import { artifacts, name as titleOf, PAGE } from '@hanzo/build';
 import { Card, Quiet, Row } from './card.js';
 import { said as told } from './lib/attach.js';
 import { download, fileOf } from './lib/files.js';
-import { org } from './lib/session.js';
+import { org, scope } from './lib/session.js';
+import { api } from './lib/api.js';
+import { list } from './lib/list.js';
 import { localOf, take } from './pane.js';
 import { useProviders, useSkills } from './tools.js';
 import { activate, startDevice } from './connect.js';
 /** A conversation's panel before anyone has arranged it. */
-export const SEED = {
-    tabs: [
-        { id: 'artifacts', kind: 'artifacts', title: 'Artifacts' },
-        { id: 'sources', kind: 'sources', title: 'Sources' },
-    ],
-    at: 'artifacts',
-};
+export const SEED = { tabs: [], at: null };
 /** The text of a turn, whichever shape the wire used. */
 const words = (m) => typeof m.content === 'string'
     ? m.content
@@ -222,3 +218,59 @@ function Services() {
                         .catch((e) => setStep(String(e?.message ?? 'Could not start')));
                 }, children: _jsx(Word, { children: p.name }) }, p.id)))] }));
 }
+/** A row of the summary: its mark and its name, one press from a tab. */
+function Line({ icon, children, onPress, quiet = false }) {
+    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsx(Text, { flex: 1, minW: 0, fontSize: "$2", color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children })] }));
+}
+/** A heading of the summary, with what it adds at its end. */
+const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: children }), action] }));
+/**
+ * The conversation's summary, from the outline mark in its header: what it
+ * produced (Outputs, led by Create file or site, which starts a Dev run) and
+ * what went into it (Sources, with the `+` that brings more). Each row opens in
+ * a tab beside the conversation. A section with nothing in it keeps its heading
+ * and one quiet line.
+ */
+export function Summary({ at, said, held, deck, onOpen, onCreate }) {
+    const ai = useAi();
+    const [open, setOpen] = useState(false);
+    const made = useMemo(() => outputs(said), [said]);
+    const took = useMemo(() => sources(said, held), [said, held]);
+    const done = useMemo(() => lookups(said), [said]);
+    const show = (m) => {
+        setOpen(false);
+        void look(deck, m, ai);
+        onOpen();
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": "Summary", "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: 'Summary' }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsxs(YStack, { "data-slot": "summary", role: "dialog", "aria-label": "Summary", gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: [_jsx(Head, { children: "Outputs" }), _jsx(Line, { quiet: true, onPress: () => {
+                                setOpen(false);
+                                onCreate();
+                            }, children: "Create file or site" }), made.map((m) => {
+                            const Glyph = GLYPH[m.kind];
+                            return (_jsx(Line, { icon: _jsx(Glyph, { size: 15, "aria-hidden": true }), onPress: () => show(m), children: m.name }, m.id));
+                        }), _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }), _jsx(Head, { action: _jsx(Add, { at: at }), children: "Sources" }), done.map((call) => (_jsx(Line, { icon: _jsx(Globe, { size: 15, "aria-hidden": true }), onPress: () => show({ id: call.id, name: call.name, kind: 'file', body: [call.asked, call.got ?? ''].filter(Boolean).join('\n\n'), mime: 'text/plain' }), children: call.name === 'web_search' || call.name === 'search' ? 'Web search' : call.name }, call.id))), took.map((m) => {
+                            const Glyph = GLYPH[m.kind];
+                            return (_jsx(Line, { icon: _jsx(Glyph, { size: 15, "aria-hidden": true }), onPress: () => show(m), children: m.name }, m.id));
+                        }), !done.length && !took.length ? _jsx(Line, { quiet: true, children: "Nothing yet" }) : null] }) })] }));
+}
+/**
+ * The organization's sites, as an empty tab suggests them: `GET /v1/projects`,
+ * every row with a live address. Read once a conversation; nothing on a refusal.
+ */
+export function useSites() {
+    const [rows, setRows] = useState([]);
+    useEffect(() => {
+        const stop = new AbortController();
+        fetch(`${api()}/v1/projects`, { headers: scope(), signal: stop.signal })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => {
+            if (stop.signal.aborted)
+                return;
+            const all = list(Array.isArray(body) ? body : body?.data);
+            setRows(all.filter((p) => typeof p.liveUrl === 'string' && /^https:\/\//.test(p.liveUrl)).map((p) => ({ title: p.name || p.slug || 'Site', url: p.liveUrl })));
+        })
+            .catch(() => { });
+        return () => stop.abort();
+    }, []);
+    return rows;
+}

package/dist/Share.js

@@ -10,7 +10,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // them, and revokes a link, which ends it for all of them. Recipients read and
 // do not reply: a conversation belongs to the member who started it.
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { Check, Link2, Share2 } from 'lucide-react';
+import { Check, Link2, Upload } from 'lucide-react';
 import { Box, Button, Dialog, DialogContent, DialogTitle, Text, XStack, YStack } from '@hanzo/ui';
 import { hold, heldToken, link, Refused, shares } from './lib/share.js';
 import { BAD } from './lib/mix.js';
@@ -29,7 +29,7 @@ export function Share({ thread }) {
         setOpen(false);
         button.current?.focus();
     }, []);
-    return (_jsxs(Box, { position: "relative", children: [_jsx(Box, { ref: button, render: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": "Share this conversation", borderWidth: 0, bg: "transparent", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Share2, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: "Share" })] }) }), open ? _jsx(Panel, { thread: thread, onClose: close }) : null] }));
+    return (_jsxs(Box, { position: "relative", children: [_jsxs(Box, { ref: button, render: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": "Share this conversation", "data-slot": "share", display: "flex", flexDirection: "row", gap: "$1.5", height: 32, px: "$2.5", items: "center", justify: "center", borderWidth: 0, bg: open ? '$hover' : 'transparent', rounded: "$3", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Upload, { size: 16, "aria-hidden": true }), _jsx(Text, { fontSize: "$3", color: "$ink", children: "Share" })] }), open ? _jsx(Panel, { thread: thread, onClose: close }) : null] }));
 }
 /** The header's panel: hung under its button, shut by Escape or a press outside, focus starting inside. */
 function Panel({ thread, onClose }) {

package/dist/Shell.js

@@ -75,7 +75,6 @@ import { Profile } from "./Profile.js";
 import { SupportPicker } from "./Support.js";
 import { Find } from "./Find.js";
 import { Account } from "./Account.js";
-import { ModeMark } from "./ModeMark.js";
 import { called } from "./team.js";
 import { checkoutUrl } from './lib/pay.js';
 /** Tabs: the terminals, at their own host. */
@@ -116,7 +115,7 @@ const CONTROL = 28;
 import { getStoredPeople, getStoredAgents, getCustomThreads, createDirectChat, } from "./contacts-store.js";
 import { bare } from './lib/bare.js';
 import { BAD } from './lib/mix.js';
-import { brand, site, where } from './where.js';
+import { brand, site, where, wordmark } from './where.js';
 /**
  * The destinations, in rail order.
  *
@@ -570,13 +569,13 @@ function Team({ filter = "", onPick, navigate, }) {
     // this app climbs (see Home's `Waiting`). "Reading." never resolves for a
     // reader nobody is going to answer, so the session is asked first.
     if (!signedIn)
-        return _jsx(Note, { children: "Sign in to see your org's rooms." });
+        return _jsx(Note, { children: "Sign in to see your org's channels." });
     if (wrong)
-        return _jsx(Note, { children: say(wrong, "your rooms") });
+        return _jsx(Note, { children: say(wrong, "your channels") });
     if (rooms === null)
-        return _jsx(Note, { children: "Reading your rooms." });
+        return _jsx(Note, { children: "Reading your channels." });
     if (rooms.length === 0)
-        return _jsx(Note, { children: "No rooms yet. Open one and the conversation has somewhere to live." });
+        return _jsx(Note, { children: "No channels yet." });
     if (shown.length === 0)
         return _jsxs(Note, { children: ["No room matches \u201C", filter, "\u201D."] });
     return (_jsxs(_Fragment, { children: [favourites.length > 0 ? (_jsx(SidebarFolder, { name: "Favorites", defaultOpen: true, children: favourites.map((one) => (_jsx(SidebarItem, { active: teamKey(one) === room, icon: _jsx(Star, { size: 13, "aria-hidden": true }), onPress: () => {
@@ -1181,7 +1180,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
             // Drive names the company rather than the room.
             id: place.id,
             title: place.label,
-            category: "Rooms",
+            category: "Apps",
             icon: _jsx(place.icon, { size: 15, "aria-hidden": true }),
             href: place.route,
         })),
@@ -1210,7 +1209,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     const list = (_jsxs(Sidebar, { ref: side.ref, 
         // A phone's sheet is never wider than 280, whatever the laptop kept.
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Grip, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-switch", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(ModeMark, { mode: mode === "dev" ? "dev" : "chat", onChat: () => navigate?.("/chat"), onDev: () => navigate?.(dev()) }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
+        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Grip, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-name", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode === "dev" ? "dev" : "chat") }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
                                 if (!navigate || e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
                                     return;
                                 e.preventDefault();

package/dist/Talk.js

@@ -43,7 +43,7 @@ function when(ms) {
  * an empty header. The sigil is how a client DRAWS a room and is not stored, so
  * it is added here and only where there is a name to put it on.
  */
-const titleOf = (room) => room.name ? `#${room.name}` : room.direct ? 'Direct message' : 'Room';
+const titleOf = (room) => room.name ? `#${room.name}` : room.direct ? 'Direct message' : 'Channel';
 /** Adds `@name ` to a draft, after a space where the draft needs one. */
 const mention = (draft, name) => `${draft && !/\s$/.test(draft) ? `${draft} ` : draft}@${name} `;
 export function Talk({ room }) {
@@ -70,14 +70,14 @@ export function Talk({ room }) {
         }
         catch (e) {
             setDraft(text);
-            setRefused(say(e, 'this room', 'save'));
+            setRefused(say(e, 'this channel', 'save'));
         }
         finally {
             setPending((held) => held.filter((one) => one.key !== key));
         }
     };
     const name = (of) => setDraft((held) => mention(held, of));
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(ChannelHeader, { name: titleOf(room), children: [room.topic ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: room.topic })) : null, _jsx(Box, { render: "button", "aria-label": aside === 'roster' ? 'Hide directory & roster' : 'Show directory & roster', "aria-pressed": aside === 'roster', onClick: () => showAside(aside === 'roster' ? null : 'roster'), ml: "auto", p: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Users, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", p: "$4", gap: "$3", children: [failed ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: say(failed, 'this room') })) : messages === null ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the room." })) : messages.length === 0 && pending.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing has been said here yet." })) : (messages.map((one) => (_jsx(Line, { member: memberOf(members, one.author), fallback: one.author, stamp: when(one.createdOn), text: one.text }, one.id)))), pending
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(ChannelHeader, { name: titleOf(room), children: [room.topic ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: room.topic })) : null, _jsx(Box, { render: "button", "aria-label": aside === 'roster' ? 'Hide directory & roster' : 'Show directory & roster', "aria-pressed": aside === 'roster', onClick: () => showAside(aside === 'roster' ? null : 'roster'), ml: "auto", p: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Users, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", p: "$4", gap: "$3", children: [failed ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: say(failed, 'this channel') })) : messages === null ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the room." })) : messages.length === 0 && pending.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing has been said here yet." })) : (messages.map((one) => (_jsx(Line, { member: memberOf(members, one.author), fallback: one.author, stamp: when(one.createdOn), text: one.text }, one.id)))), pending
                         .filter((one) => !messages?.some((said) => said.author === me && said.text === one.text))
                         .map((one) => (_jsx(Line, { member: mine, fallback: "You", text: one.text, soft: true }, `pending-${one.key}`)))] }), _jsxs(YStack, { p: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Composer, { value: draft, onChange: setDraft, onSend: () => void speak(), placeholder: `Message ${titleOf(room)}`, label: `Message ${titleOf(room)}`, hint: agents.length ? 'Mention an agent with @name and it answers.' : undefined, children: agents.length ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", shrink: 1, minW: 0, children: agents.map((one) => (_jsx(Box, { render: "button", "aria-label": `Mention ${one.name}`, onClick: () => name(one.name), px: "$2", py: "$1", rounded: "$10", hoverStyle: { bg: '$hover' }, children: _jsxs(Text, { fontSize: "$2", color: "$soft", children: ["@", one.name] }) }, one.id))) })) : null }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] }), _jsx(Beside, { children: aside === 'roster' ? _jsx(Roster, { members: members, wrong: wrong, onMention: name }) : null })] }));
 }

package/dist/recent.js

@@ -1,6 +1,6 @@
 // The Recents list as data: each mode's rows, the views a menu offers, and the
 // list a view makes of them. No React, so a spec reads it as it is.
-export const PLAIN = { status: 'all', since: 'any', group: 'date', sort: 'activity' };
+export const PLAIN = { status: 'all', since: 'any', group: 'none', sort: 'activity' };
 const STATUSES = [
     { id: 'all', label: 'All' },
     { id: 'running', label: 'Running' },

package/dist/rooms.js

@@ -87,7 +87,7 @@ export function useTeamRooms() {
     }, [client, user, now]);
     const open = useCallback(async (room) => {
         if (!client)
-            throw Object.assign(new Error('Sign in to open a room'), { status: 401 });
+            throw Object.assign(new Error('Sign in to open a channel'), { status: 401 });
         const made = await client.http.json({
             method: 'POST',
             path: '/v1/team/rooms',
@@ -180,7 +180,7 @@ export function useRoomMessages(room, space) {
     /** Says it and answers the stored row, or throws with the platform's status. */
     const send = useCallback(async (text) => {
         if (!client || !room || !space) {
-            throw Object.assign(new Error('This room has no address to send to'), { status: 503 });
+            throw Object.assign(new Error('This channel has no address to send to'), { status: 503 });
         }
         const row = await client.http.json({
             method: 'POST',

package/dist/thread.d.ts

@@ -55,3 +55,11 @@ export declare function ThreadRow({ t, active, aside, listed, children, }: {
     listed?: boolean;
     children: ReactElement;
 }): import("react").JSX.Element;
+/**
+ * The ⋯ of the conversation a pane holds, in its header: the trigger of the
+ * menu its row opens, drawn inside a `ConversationMenu` of that one
+ * conversation, so the header and the row offer one menu.
+ */
+export declare function ThreadMore({ t }: {
+    t: Thread;
+}): import("react").JSX.Element;

package/dist/thread.js

@@ -373,6 +373,21 @@ export function ThreadRow({ t, active = false, aside, listed = true, children, }
                         // Before gui's own press handler, which opens the menu and stops there.
                         onPointerDownCapture: aim, onKeyDownCapture: aim, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }));
 }
+/**
+ * The ⋯ of the conversation a pane holds, in its header: the trigger of the
+ * menu its row opens, drawn inside a `ConversationMenu` of that one
+ * conversation, so the header and the row offer one menu.
+ */
+export function ThreadMore({ t }) {
+    const menus = useContext(Rows);
+    if (!menus)
+        throw new Error('ThreadMore is drawn inside a ConversationMenu, which holds its menu.');
+    // gui types these handlers by React Native's event; on the web they carry the DOM's.
+    const aim = (e) => menus.aim(t, e.currentTarget);
+    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": "Conversation options", ...{ title: 'More' }, "data-slot": "conversation-options", width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: menus.open === t.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
+            // Before gui's own press handler, which opens the menu and stops there.
+            onPointerDownCapture: aim, onKeyDownCapture: aim, children: _jsx(MoreHorizontal, { size: 16, "aria-hidden": true }) }) }));
+}
 /** A conversation's title, written again: one line, never empty. */
 function Rename({ t, open, onOpenChange, onCloseAutoFocus, save, }) {
     const [words, setWords] = useState('');

package/dist/where.d.ts

@@ -67,5 +67,7 @@ export declare function configure(given: Partial<Addresses>): void;
 export declare const where: () => Addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export declare const brand: () => string;
+/** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
+export declare const wordmark: (mode: 'chat' | 'dev') => string;
 /** A page of the app's own, from wherever the rooms are mounted. */
 export declare const site: (path: string) => string;

package/dist/where.js

@@ -11,5 +11,7 @@ export function configure(given) {
 export const where = () => addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export const brand = () => addresses.brand ?? 'Hanzo AI';
+/** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
 /** A page of the app's own, from wherever the rooms are mounted. */
 export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "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",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.53",
+    "@hanzo/build": "0.2.55",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",

package/dist/ModeMark.d.ts

@@ -1,8 +0,0 @@
-/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export declare const wordmark: (mode: 'chat' | 'dev') => string;
-export declare function ModeMark({ mode, onChat, onDev, stacked, }: {
-    mode: 'chat' | 'dev';
-    onChat: () => void;
-    onDev: () => void;
-    stacked?: boolean;
-}): import("react").JSX.Element;

package/dist/ModeMark.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageSquare, Code2 } from 'lucide-react';
-import { XStack, YStack, Text, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
-import { brand } from './where.js';
-/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
-/** One side of the switch: an icon button named for its mode, with the name as its tooltip. */
-function Side({ name, on, onPress, children }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(XStack, { render: "button", "aria-label": name, "aria-pressed": on, onPress: onPress, width: 28, height: 24, rounded: 999, items: "center", justify: "center", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: children }) }), _jsx(TooltipContent, { children: _jsx(Text, { fontSize: "$2", children: name }) })] }));
-}
-export function ModeMark({ mode, onChat, onDev, stacked = false, }) {
-    const dev = mode === 'dev';
-    const Group = stacked ? YStack : XStack;
-    const toggle = (_jsxs(Group, { role: "group", "aria-label": "Switch Hanzo", items: "center", gap: 2, p: 2, rounded: 999, bg: "$edge", shrink: 0, children: [_jsx(Side, { name: "Chat", on: !dev, onPress: onChat, children: _jsx(MessageSquare, { size: 14, "aria-hidden": true }) }), _jsx(Side, { name: "Dev", on: dev, onPress: onDev, children: _jsx(Code2, { size: 14, "aria-hidden": true }) })] }));
-    if (stacked)
-        return toggle;
-    return (_jsxs(XStack, { flex: 1, items: "center", justify: "space-between", gap: "$2", minW: 0, children: [_jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), toggle] }));
-}