@hanzo/rooms 0.1.40 → 0.1.41

package/dist/Column.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's one column, the same in both modes: the Chat / Dev switch, a filter,
 // New, Dev's places, the Recents of the mode it is in, and at the foot the
 // account (components/workspace/Me.tsx).
@@ -7,17 +7,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
 // row of its own under a quiet group label: nothing waits behind a More.
 //
+// Terminals sits under New in both modes. The machines and their sessions live
+// on platform.hanzo.ai, so the row is a link there, in a tab of its own.
+//
 // It is a pane on the frame's ground (app/_web.tsx), sized by the edge in the
 // gutter to its right: dragged, keyed or double-clicked back (@hanzo/build's
 // `Grip`), kept per browser. Pulled in past its floor it collapses to a rail of
 // marks, kept under the key the builder's rail kept it under, so a reader's
 // choice outlives the move.
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { PanelLeft, Plus, Search } from 'lucide-react';
+import { PanelLeft, Plus, Search, SquareTerminal } from 'lucide-react';
 import { Grip, nav, NEW } from '@hanzo/build';
 import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzogui/shell';
-import { useId, useState } from 'react';
+import { Fragment, useId, useState } from 'react';
 import { ModeMark } from './ModeMark.js';
 import { useKept } from './kept.js';
 import { Made, Me } from './Me.js';
@@ -27,7 +30,7 @@ import { empty } from './open.js';
 import { useSpan } from './span.js';
 import { pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, talk } from './lib/host.js';
+import { app, talk, TERMINALS } from './lib/host.js';
 import { brand } from './where.js';
 /** The grip stands in the gutter between the column and the pane. gui carries a `calc()` to the page unchanged; its
  *  types only name custom properties. */
@@ -54,6 +57,12 @@ const keys = (press) => ({
 });
 /** A row of the column: a pill, lit where the reader is. Compact, so every place fits a laptop's height with Recents under them. */
 const ROW = { rounded: '$4', minH: 30, py: 0 };
+/** Terminals, a row drawn as a link out: another origin, its own tab, no handle back to this page. */
+const OUT = { 'data-slot': 'app-terminals', role: 'link', render: _jsx("a", { href: TERMINALS, target: "_blank", rel: "noopener noreferrer" }) };
+/** Terminals in the rail, as its mark. */
+const Mark = () => (_jsx(SidebarIconButton, { label: "Terminals", width: 36, height: 32, rounded: 999, ...OUT, children: _jsx(SquareTerminal, { size: 16 }) }));
+/** Terminals in the column, as a row. */
+const Row = () => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), ...OUT, children: "Terminals" }) }));
 export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
     const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
     const collapsed = kept && !drawer;
@@ -75,15 +84,15 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
         window.location.assign(mode === 'dev' ? app('') : talk());
     };
     if (collapsed)
-        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), mode === 'chat' ? (_jsx(SidebarIconButton, { label: "New chat", onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) })) : (
+        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), mode === 'chat' ? (_jsxs(_Fragment, { children: [_jsx(SidebarIconButton, { label: "New chat", onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(Mark, {})] })) : (
                     // Every place, as its mark: collapsed is narrower, never shorter of a destination.
-                    groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+                    groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }), link.id === NEW ? _jsx(Mark, {}) : null] }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
         style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             setWords('');
-                                    }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_jsx(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }) })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })] }, g.id))) })), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
+                                    }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }), _jsx(Row, {})] })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }), link.id === NEW ? _jsx(Row, {}) : null] }, link.id))) })] }, g.id))) })), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
                 // In the gutter between the column and the pane, not over the column's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/lib/host.d.ts

@@ -30,6 +30,8 @@ export declare const ENTRY = "https://hanzo.team/?signin";
  * team's session has to live.
  */
 export declare const START = "https://hanzo.team/start";
+/** Terminals: the machines and their sessions, kept by the platform, opened from the column in a tab of their own. */
+export declare const TERMINALS = "https://platform.hanzo.ai/terminals";
 /**
  * THE APP'S ADDRESSES ARE PATHS, in two modes at two roots. Chat is /chat, a
  * new conversation, and /chat/<id> one of the reader's. Dev is /dev, Dev's New,

package/dist/lib/host.js

@@ -33,6 +33,8 @@ export const ENTRY = `${WORKSPACE}/?signin`;
  * team's session has to live.
  */
 export const START = `${WORKSPACE}/start`;
+/** Terminals: the machines and their sessions, kept by the platform, opened from the column in a tab of their own. */
+export const TERMINALS = 'https://platform.hanzo.ai/terminals';
 /**
  * THE APP'S ADDRESSES ARE PATHS, in two modes at two roots. Chat is /chat, a
  * new conversation, and /chat/<id> one of the reader's. Dev is /dev, Dev's New,

package/package.json

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