@treenity/react 3.0.0 → 3.0.2

package/src/App.tsx

@@ -1,10 +1,26 @@
-import { isOfType, type NodeData } from '@treenity/core/core';
-import { applyPatch, type Operation } from 'fast-json-patch';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '#components/ui/alert-dialog';
+import { Button } from '#components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '#components/ui/dropdown-menu';
+import { Input } from '#components/ui/input';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '#components/ui/resizable';
+import { TypePicker } from '#mods/editor-ui/type-picker';
+import type { NodeData } from '@treenity/core';
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { toast } from 'sonner';
 import * as cache from './cache';
 import { tree } from './client';
+import { SSE_CONNECTED, SSE_DISCONNECTED, startEvents, stopEvents } from './events';
 import { NavigateProvider } from './hooks';
 import { Inspector } from './Inspector';
+import { LoginModal, LoginScreen } from './Login';
 import { Tree } from './Tree';
 import { AUTH_EXPIRED_EVENT, clearToken, getToken, setToken, trpc } from './trpc';
 import { ViewPage } from './ViewPage';
@@ -12,201 +28,6 @@ import { ViewPage } from './ViewPage';
 // Hydrate from IDB before first render — fires bump() when done → reactive re-render
 cache.hydrate();
 
-type TypeInfo = { type: string; label: string };
-
-async function loadTypes(): Promise<TypeInfo[]> {
-  const { items } = (await trpc.getChildren.query({ path: '/sys/types', limit: 0, depth: 99 })) as {
-    items: NodeData[];
-    total: number;
-  };
-  return items
-    .filter((n) => isOfType(n, 'type'))
-    .map((n) => {
-      const schema = n.schema as { $type: string; title?: string } | undefined;
-      const typeName = n.$path.slice('/sys/types/'.length).replace(/\//g, '.');
-      return { type: typeName, label: schema?.title ?? typeName };
-    });
-}
-
-function TypePicker({
-  onSelect,
-  onCancel,
-  title = 'Create Node',
-  nameLabel = 'Node name',
-  action = 'Create',
-}: {
-  onSelect: (name: string, type: string) => void;
-  onCancel: () => void;
-  title?: string;
-  nameLabel?: string;
-  action?: string;
-}) {
-  const [types, setTypes] = useState<TypeInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [filter, setFilter] = useState('');
-  const [name, setName] = useState('');
-  const [selectedType, setSelectedType] = useState<string | null>(null);
-  const nameRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    loadTypes()
-      .then(setTypes)
-      .catch((err) => {
-        console.error('Failed to load types:', err);
-        setError('Failed to load types');
-      })
-      .finally(() => setLoading(false));
-  }, []);
-  useEffect(() => {
-    nameRef.current?.focus();
-  }, []);
-
-  const lf = filter.toLowerCase();
-  const filtered = types.filter(
-    (t) => t.type.toLowerCase().includes(lf) || t.label.toLowerCase().includes(lf),
-  );
-
-  return (
-    <div className="type-picker-overlay" onClick={onCancel}>
-      <div className="type-picker" onClick={(e) => e.stopPropagation()}>
-        <div className="type-picker-header">{title}</div>
-        <div className="type-picker-search">
-          <input
-            ref={nameRef}
-            placeholder={nameLabel}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <input
-            placeholder="Filter types..."
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-          />
-        </div>
-        <div className="type-picker-list">
-          {filtered.map((t) => (
-            <div
-              key={t.type}
-              className={`type-picker-item${selectedType === t.type ? ' active' : ''}`}
-              onClick={() => setSelectedType(t.type)}
-            >
-              <span className="type-name">{t.type}</span>
-              {t.label !== t.type && <span className="type-label">{t.label}</span>}
-            </div>
-          ))}
-          {loading && (
-            <div className="p-3 text-[--text-3] text-[13px]">Loading types...</div>
-          )}
-          {error && (
-            <div className="p-3 text-[--danger] text-[13px]">{error}</div>
-          )}
-          {!loading && !error && filtered.length === 0 && (
-            <div className="p-3 text-[--text-3] text-[13px]">No types found</div>
-          )}
-        </div>
-        <div className="type-picker-footer">
-          <button onClick={onCancel}>Cancel</button>
-          <button
-            className="primary"
-            disabled={!name || !selectedType}
-            onClick={() => onSelect(name, selectedType!)}
-          >
-            {action}
-            {name ? ` "${name}"` : ''}
-            {selectedType ? ` as ${selectedType}` : ''}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function LoginForm({ onLogin }: { onLogin: (userId: string) => void }) {
-  const [mode, setMode] = useState<'login' | 'register'>('login');
-  const [userId, setUserId] = useState('');
-  const [password, setPassword] = useState('');
-  const [err, setErr] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!userId.trim() || !password) return;
-    setLoading(true);
-    setErr(null);
-    try {
-      const fn = mode === 'register' ? trpc.register : trpc.login;
-      const res = await fn.mutate({ userId: userId.trim(), password });
-      setToken(res.token);
-      onLogin(res.userId);
-    } catch (e) {
-      setErr(e instanceof Error ? e.message : 'Failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <form className="login-box" onSubmit={handleSubmit}>
-      <div className="login-logo">
-        <img src="/treenity.svg" alt="" width="32" height="32" />
-        Treenity
-      </div>
-      <div className="field">
-        <label>User ID</label>
-        <input
-          autoFocus
-          placeholder="Enter your user ID"
-          value={userId}
-          onChange={(e) => setUserId(e.target.value)}
-        />
-      </div>
-      <div className="field">
-        <label>Password</label>
-        <input
-          type="password"
-          placeholder="Enter password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-      </div>
-      {err && <div className="login-error">{err}</div>}
-      <button className="primary" type="submit" disabled={loading || !userId.trim() || !password}>
-        {loading ? '...' : mode === 'register' ? 'Create account' : 'Sign in'}
-      </button>
-      <button
-        type="button"
-        className="ghost"
-        onClick={() => {
-          setMode((m) => (m === 'login' ? 'register' : 'login'));
-          setErr(null);
-        }}
-      >
-        {mode === 'login' ? 'No account? Register' : 'Have an account? Sign in'}
-      </button>
-    </form>
-  );
-}
-
-function LoginScreen({ onLogin }: { onLogin: (userId: string) => void }) {
-  return (
-    <div className="login-screen">
-      <LoginForm onLogin={onLogin} />
-    </div>
-  );
-}
-
-function LoginModal({ onLogin, onClose }: { onLogin: (userId: string) => void; onClose: () => void }) {
-  return (
-    <div className="login-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
-      <div className="login-modal">
-        <button className="login-modal-close" onClick={onClose}>&times;</button>
-        <LoginForm onLogin={onLogin} />
-      </div>
-    </div>
-  );
-}
-
 // Isolated component — global subscription re-renders only this, not the entire App
 function NodeCount() {
   return <>{useSyncExternalStore(cache.subscribeGlobal, cache.size)}</>;
@@ -215,28 +36,42 @@ function NodeCount() {
 export function App() {
   const [authed, setAuthed] = useState<string | null>(null);
   const [authChecked, setAuthChecked] = useState(false);
+  const retryTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  useEffect(() => {
-    (async () => {
-      const token = getToken();
-      if (!token) {
-        // Auto-create anonymous session
+  const initAuth = useCallback(async () => {
+    const token = getToken();
+    if (!token) {
+      try {
         const { token: anonToken, userId } = await trpc.anonLogin.mutate();
         setToken(anonToken);
         setAuthed(userId);
         setAuthChecked(true);
-        return;
-      }
-      try {
-        const res = await trpc.me.query();
-        setAuthed(res?.userId ?? null);
-        if (!res) clearToken();
       } catch {
+        toast.error('Server unavailable, retrying…');
+        retryTimer.current = setTimeout(initAuth, 3000);
+      }
+      return;
+    }
+    try {
+      const res = await trpc.me.query();
+      setAuthed(res?.userId ?? null);
+      if (!res) clearToken();
+      setAuthChecked(true);
+    } catch (e: any) {
+      const isAuthError = e?.data?.code === 'UNAUTHORIZED' || e?.data?.httpStatus === 401;
+      if (isAuthError) {
         clearToken();
-      } finally {
         setAuthChecked(true);
+      } else {
+        toast.error('Server unavailable, retrying…');
+        retryTimer.current = setTimeout(initAuth, 3000);
       }
-    })();
+    }
+  }, []);
+
+  useEffect(() => {
+    initAuth();
+    return () => clearTimeout(retryTimer.current);
   }, []);
 
   // ── Route detection ──
@@ -274,6 +109,29 @@ export function App() {
   const [filter, setFilter] = useState('');
   const [showHidden, setShowHidden] = useState(false);
   const [toastMsg, setToastMsg] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+  const [sseDown, setSseDown] = useState(false);
+  const sseDownTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // TODO: remove debounce, extract from App code, remove debounce
+  // SSE connection indicator — debounce disconnect by 2s to avoid flicker
+  useEffect(() => {
+    const onConnect = () => {
+      if (sseDownTimer.current) { clearTimeout(sseDownTimer.current); sseDownTimer.current = undefined; }
+      setSseDown(false);
+    };
+    const onDisconnect = () => {
+      if (!sseDownTimer.current) {
+        sseDownTimer.current = setTimeout(() => { sseDownTimer.current = undefined; setSseDown(true); }, 2000);
+      }
+    };
+    window.addEventListener(SSE_CONNECTED, onConnect);
+    window.addEventListener(SSE_DISCONNECTED, onDisconnect);
+    return () => {
+      window.removeEventListener(SSE_CONNECTED, onConnect);
+      window.removeEventListener(SSE_DISCONNECTED, onDisconnect);
+      if (sseDownTimer.current) clearTimeout(sseDownTimer.current);
+    };
+  }, []);
 
   // Granular: only re-render App when root node appears/disappears
   const hasRootNode = useSyncExternalStore(
@@ -322,7 +180,7 @@ export function App() {
     function onKeyDown(e: KeyboardEvent) {
       const meta = e.metaKey || e.ctrlKey;
       if (!meta) return;
-      if (document.querySelector('.type-picker-overlay')) return;
+      if (document.querySelector('[data-slot="dialog-overlay"]')) return;
       if (e.key === '/' && selected) {
         e.preventDefault();
         setAddingComponentAt(selected);
@@ -348,12 +206,8 @@ export function App() {
   }, [showToast]);
 
   const loadChildren = useCallback(async (path: string) => {
-    const { items: children } = (await trpc.getChildren.query({
-      path,
-      watch: true,
-      watchNew: true,
-    })) as { items: NodeData[]; total: number };
-    cache.putMany(children, path); // Use specific parent path so query mounts index them correctly
+    const { items: children } = await tree.getChildren(path);
+    cache.putMany(children, path);
     setLoaded((prev) => new Set(prev).add(path));
   }, []);
 
@@ -400,60 +254,15 @@ export function App() {
     })();
   }, [authed, loadChildren, root, mode]);
 
-  // Live subscription — server push → cache
+  // Server event subscription — module-level, refs provide stable access to current state
   useEffect(() => {
     if (!authed) return;
-    const sub = trpc.events.subscribe(undefined as void, {
-      onData(event) {
-        if (event.type === 'reconnect') {
-          if (!event.preserved) {
-            // Watches lost — force useChildren hooks to re-fetch and re-register
-            cache.signalReconnect();
-            // Re-register tree watches for expanded paths (editor mode)
-            for (const path of expandedRef.current) loadChildren(path);
-            // Re-watch the currently selected node
-            if (selectedRef.current) {
-              trpc.get.query({ path: selectedRef.current, watch: true }).then(n => {
-                if (n) cache.put(n as NodeData);
-              });
-            }
-          }
-          return;
-        }
-        if (event.type === 'set') {
-          cache.put({ $path: event.path, ...event.node } as NodeData);
-          if (event.addVps) event.addVps.forEach((vp: string) => cache.addToParent(event.path, vp));
-          if (event.rmVps) event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
-        } else if (event.type === 'patch') {
-          const existing = cache.get(event.path);
-          if (existing && event.patches) {
-            try {
-              const { newDocument } = applyPatch(structuredClone(existing), event.patches as Operation[]);
-              cache.put(newDocument as NodeData);
-            } catch (e) {
-              console.error('Failed to apply patches, fetching full node:', e);
-              trpc.get.query({ path: event.path }).then((n) => {
-                if (n) cache.put(n as NodeData);
-              });
-            }
-          } else {
-            trpc.get.query({ path: event.path }).then((n) => {
-              if (n) cache.put(n as NodeData);
-            });
-          }
-          if (event.addVps) event.addVps.forEach((vp: string) => cache.addToParent(event.path, vp));
-          if (event.rmVps) event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
-        } else if (event.type === 'remove') {
-          // Try to remove from anywhere
-          if (event.rmVps && event.rmVps.length > 0) {
-            event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
-          } else {
-            cache.remove(event.path);
-          }
-        }
-      },
+    startEvents({
+      loadChildren,
+      getExpanded: () => expandedRef.current,
+      getSelected: () => selectedRef.current,
     });
-    return () => sub.unsubscribe();
+    return stopEvents;
   }, [authed, loadChildren]);
 
   const handleSelect = useCallback(
@@ -562,10 +371,12 @@ export function App() {
     [loadChildren, showToast],
   );
 
-  const roots = hasRootNode ? [root] : [];
+  const roots = hasRootNode ? [root, '/local'] : ['/local'];
+
+  const [rootPromptOpen, setRootPromptOpen] = useState(false);
+  const [rootPromptType, setRootPromptType] = useState('root');
 
-  const handleCreateRoot = useCallback(async () => {
-    const type = prompt('Root node $type:', 'root');
+  const handleCreateRoot = useCallback(async (type: string) => {
     if (!type) return;
     try {
       await tree.set({ $path: '/', $type: type } as NodeData);
@@ -580,37 +391,28 @@ export function App() {
   }, []);
 
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
 
   // Re-auth as anon + show login modal when session expires mid-use
   useEffect(() => {
     const handler = async () => {
       if (showLoginModal) return;
       clearToken();
-      const { token, userId } = await trpc.anonLogin.mutate();
-      setToken(token);
-      setAuthed(userId);
-      setShowLoginModal(true);
+      try {
+        const { token, userId } = await trpc.anonLogin.mutate();
+        setToken(token);
+        setAuthed(userId);
+        setShowLoginModal(true);
+      } catch {
+        toast.error('Server unavailable');
+      }
     };
     window.addEventListener(AUTH_EXPIRED_EVENT, handler);
     return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handler);
   }, [showLoginModal]);
 
-  // Close menu on outside click
-  useEffect(() => {
-    if (!menuOpen) return;
-    const onDown = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as HTMLElement)) setMenuOpen(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [menuOpen]);
-
   const handleLogout = async () => {
     clearToken();
-    setMenuOpen(false);
     const { token, userId } = await trpc.anonLogin.mutate();
     setToken(token);
     setAuthed(userId);
@@ -619,7 +421,6 @@ export function App() {
 
   const handleClearCache = () => {
     cache.clear();
-    setMenuOpen(false);
     showToast('Cache cleared');
     location.reload();
   };
@@ -635,7 +436,10 @@ export function App() {
   }, [mode, handleSelect]);
 
   if (!authChecked) return null;
-  if (!authed || authed.startsWith('anon:')) return <LoginScreen onLogin={(uid) => setAuthed(uid)} />;
+  if (!authed) return <LoginScreen onLogin={(uid) => setAuthed(uid)} />;
+
+  const isAnon = authed.startsWith('anon:');
+  const needsLogin = isAnon || showLoginModal;
   if (mode === 'view') return <NavigateProvider value={navigate}><ViewPage path={viewPath} /></NavigateProvider>;
   if (mode === 'preview') return <NavigateProvider value={navigate}><ViewPage path={viewPath} editorLink /></NavigateProvider>;
 
@@ -645,13 +449,11 @@ export function App() {
 
   if (error) {
     return (
-      <div className="app">
-        <div className="editor">
-          <div className="editor-empty">
-            <div className="icon">&#9888;</div>
-            <p className="text-[--danger]">{error}</p>
-            <button onClick={() => location.reload()}>Retry</button>
-          </div>
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <span className="text-4xl">&#9888;</span>
+          <p className="text-sm text-red-400">{error}</p>
+          <Button variant="outline" size="sm" onClick={() => location.reload()}>Retry</Button>
         </div>
       </div>
     );
@@ -659,95 +461,111 @@ export function App() {
 
   return (
     <NavigateProvider value={navigate}>
-    <div className="app">
-      <div className={`sidebar${sidebarCollapsed ? ' collapsed' : ''}`}>
-        <div className="sidebar-header">
-          <span className="logo">
+    {sseDown && (
+      <div className="fixed top-0 inset-x-0 z-50 bg-yellow-500 text-black text-center text-sm py-1">
+        Reconnecting to server…
+      </div>
+    )}
+    <div className="flex h-screen bg-background text-foreground overflow-hidden">
+      <ResizablePanelGroup orientation="horizontal" className="h-full">
+        <ResizablePanel
+          defaultSize={28}
+          minSize={150}
+          maxSize={450}
+          className="flex flex-col border-r border-border"
+        >
+          {/* Header */}
+          <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border/50 shrink-0">
             <img src="/treenity.svg" alt="" width="20" height="20" />
-            {!sidebarCollapsed && 'Treenity'}
-          </span>
-          {!sidebarCollapsed && root !== '/' && (
-            <button
-              className="sm ghost font-mono text-[11px]"
-              onClick={() => setRoot('/')}
-              title="Back to global root"
-            >
-              &#8962; {root}
-            </button>
-          )}
-          {!sidebarCollapsed && roots.length === 0 && (
-            <button className="sm" onClick={handleCreateRoot}>
-              Create root
-            </button>
-          )}
-          <button
-            className="sm ghost sidebar-collapse-btn"
-            onClick={() => setSidebarCollapsed(v => !v)}
-            title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          >
-            {sidebarCollapsed ? '\u25B6' : '\u25C0'}
-          </button>
-        </div>
-        <div className="sidebar-search">
-          <input
-            ref={searchRef}
-            placeholder="Search nodes..."
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-          />
-          <button
-            className="sidebar-search-toggle"
-            data-active={showHidden || undefined}
-            onClick={() => setShowHidden(v => !v)}
-            title={showHidden ? 'Hide _ prefixed nodes' : 'Show _ prefixed nodes'}
-          >
-            _
-          </button>
-        </div>
-        <div className="sidebar-tree">
-          <Tree
-            roots={roots}
-            expanded={expanded}
-            loaded={loaded}
-            selected={selected}
-            filter={filter}
-            showHidden={showHidden}
-            onSelect={handleSelect}
-            onExpand={handleExpand}
-            onCreateChild={handleCreateChild}
-            onDelete={handleDelete}
-            onMove={handleMove}
-          />
-        </div>
-        <div className="sidebar-footer" ref={menuRef}>
-          <span>
-            {authed?.startsWith('anon:') ? `anon:${authed.slice(5, 13)}` : authed} &middot; <NodeCount /> nodes
-          </span>
-          <button className="sm ghost" onClick={() => setMenuOpen(v => !v)}>
-            &#9776;
-          </button>
-          {menuOpen && (
-            <div className="sidebar-menu">
-              <button onClick={handleLogout}>
-                {authed?.startsWith('anon:') ? 'Login' : 'Logout'}
-              </button>
-              <button onClick={handleClearCache}>
-                Clear cache
-              </button>
+            {!sidebarCollapsed && <span className="text-sm font-semibold tracking-tight">Treenity</span>}
+            {!sidebarCollapsed && root !== '/' && (
+              <Button variant="ghost" size="sm" className="h-5 px-1.5 font-mono text-[10px] text-muted-foreground" onClick={() => setRoot('/')}>
+                &#8962; {root}
+              </Button>
+            )}
+            {!sidebarCollapsed && roots.length === 0 && (
+              <Button variant="ghost" size="sm" className="h-5 text-[10px]" onClick={() => { setRootPromptType('root'); setRootPromptOpen(true); }}>
+                Create root
+              </Button>
+            )}
+          </div>
+
+          {/* Search */}
+          {!sidebarCollapsed && (
+            <div className="flex items-center gap-1 px-2 py-1.5 shrink-0">
+              <Input
+                ref={searchRef}
+                placeholder="Search nodes..."
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                className="h-7 text-xs bg-muted/50 border-border"
+              />
+              <Button
+                variant={showHidden ? 'secondary' : 'ghost'}
+                size="sm"
+                className="h-7 w-7 p-0 text-xs text-muted-foreground shrink-0"
+                onClick={() => setShowHidden(v => !v)}
+                title={showHidden ? 'Hide _ prefixed nodes' : 'Show _ prefixed nodes'}
+              >
+                _
+              </Button>
             </div>
           )}
-        </div>
-      </div>
 
-      <Inspector
-        path={selected}
-        currentUserId={authed ?? undefined}
-        onDelete={handleDelete}
-        onAddComponent={handleAddComponent}
-        onSelect={handleSelect}
-        onSetRoot={handleSetRoot}
-        toast={showToast}
-      />
+          {/* Tree */}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden">
+            <Tree
+              roots={roots}
+              expanded={expanded}
+              loaded={loaded}
+              selected={selected}
+              filter={filter}
+              showHidden={showHidden}
+              onSelect={handleSelect}
+              onExpand={handleExpand}
+              onCreateChild={handleCreateChild}
+              onDelete={handleDelete}
+              onMove={handleMove}
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between px-3 py-1.5 border-t border-border/50 text-[11px] text-muted-foreground shrink-0">
+            <span className="truncate">
+              {authed?.startsWith('anon:') ? `anon:${authed.slice(5, 13)}` : authed} &middot; <NodeCount /> nodes
+            </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-5 w-5 p-0 text-muted-foreground hover:text-foreground">
+                  &#9776;
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" className="w-36">
+                <DropdownMenuItem onClick={handleLogout}>
+                  {authed?.startsWith('anon:') ? 'Login' : 'Logout'}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleClearCache}>
+                  Clear cache
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel defaultSize={72} minSize={40}>
+          <Inspector
+            path={selected}
+            currentUserId={authed ?? undefined}
+            onDelete={handleDelete}
+            onAddComponent={handleAddComponent}
+            onSelect={handleSelect}
+            onSetRoot={handleSetRoot}
+            toast={showToast}
+          />
+        </ResizablePanel>
+      </ResizablePanelGroup>
 
       {creatingAt && <TypePicker onSelect={handlePickType} onCancel={() => setCreatingAt(null)} />}
 
@@ -756,19 +574,48 @@ export function App() {
           title="Add Component"
           nameLabel="Component name"
           action="Add"
+          autoName
           onSelect={handlePickComponent}
           onCancel={() => setAddingComponentAt(null)}
         />
       )}
 
-      {showLoginModal && (
+      <AlertDialog open={rootPromptOpen} onOpenChange={setRootPromptOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Create root node</AlertDialogTitle>
+          </AlertDialogHeader>
+          <Input
+            value={rootPromptType}
+            onChange={(e) => setRootPromptType(e.target.value)}
+            placeholder="$type"
+            className="font-mono"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                setRootPromptOpen(false);
+                handleCreateRoot(rootPromptType);
+              }
+            }}
+          />
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={() => handleCreateRoot(rootPromptType)}>Create</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {needsLogin && (
         <LoginModal
           onLogin={(uid) => { setAuthed(uid); setShowLoginModal(false); }}
-          onClose={() => setShowLoginModal(false)}
+          onClose={isAnon ? undefined : () => setShowLoginModal(false)}
         />
       )}
 
-      {toastMsg && <div className={`toast ${toastMsg.type === 'error' ? 'toast-error' : ''}`}>{toastMsg.text}</div>}
+      {toastMsg && (
+        <div className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg text-sm ${toastMsg.type === 'error' ? 'bg-destructive/20 text-destructive border border-destructive/30' : 'bg-primary/20 text-primary border border-primary/30'}`}>
+          {toastMsg.text}
+        </div>
+      )}
     </div>
     </NavigateProvider>
   );