// ────────────────────────────────────────────────────────────── // LIULIAN — app shell · running header · sidebar · routing // New: Today landing · project switcher · Guides · collapsible // ────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#E20613", "density": "comfortable", "showMarginNotes": true, "agentOpenByDefault": false, "monoNumbers": true }/*EDITMODE-END*/; function App() { // The very first thing a visitor sees is the Doorway — no chrome. // After they pick (or "enter workspace"), the full app loads. const [entered, setEntered] = React.useState(false); const [wizard, setWizard] = React.useState(null); // null · "create-project" · "one-shot" const [page, setPage] = React.useState("today"); const [project, setProject] = React.useState("aare-hydro"); const [mode, setMode] = React.useState("C"); const [agentOpen, setAgentOpen] = React.useState(false); const [paletteOpen, setPaletteOpen] = React.useState(false); const [guidesOpen, setGuidesOpen] = React.useState(false); const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false); const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // global keyboard React.useEffect(() => { const onKey = (e) => { if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return; const meta = e.metaKey || e.ctrlKey; if (meta && e.key.toLowerCase() === "k") { e.preventDefault(); setPaletteOpen(o => !o); return; } if (meta && e.key === "\\") { e.preventDefault(); setSidebarCollapsed(c => !c); return; } if (e.key === "Escape") { setPaletteOpen(false); setGuidesOpen(false); return; } if (e.key === "?") { setGuidesOpen(o => !o); return; } if (!entered) return; // shortcuts below only after entering the workspace if (e.key.toLowerCase() === "b" && !meta) { setAgentOpen(o => !o); return; } const KEY_MAP = { "0": "today", "1": "live", "2": "data", "3": "visualize", "4": "train", "5": "predict", "6": "reports", "7": "models", "8": "library", "a": "agent", ",": "settings" }; const target = KEY_MAP[e.key]; if (target) { setPage(target); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [entered]); React.useEffect(() => { document.documentElement.style.setProperty("--bern", t.accent); }, [t.accent]); const ctx = { nav: (p) => { setEntered(true); setPage(p); }, setAgent: setAgentOpen, setGuides: setGuidesOpen }; const onAgent = () => setAgentOpen(true); const active = NAV.find(n => n.id === page) || NAV[0]; function handleDoorwayPick(entryId) { if (entryId === "create-project") { setWizard("create-project"); return; } if (entryId === "one-shot") { setWizard("one-shot"); return; } if (entryId === "open-recent") { setEntered(true); setPage("today"); return; } if (entryId === "try-demo") { setEntered(true); setPage("live"); return; } } function handleChat(text) { // route to a most-likely intent based on keywords. const t = (text || "").toLowerCase(); if (/csv|drop|upload|import/.test(t)) { setEntered(true); setPage("data"); return; } if (/train|sweep|fork/.test(t)) { setEntered(true); setPage("train"); return; } if (/compare|chronos|patchtst/.test(t)) { setEntered(true); setPage("train"); setAgentOpen(true); return; } if (/anomaly|detect/.test(t)) { setEntered(true); setPage("data"); return; } if (/sketch|chart|visual/.test(t)) { setEntered(true); setPage("visualize"); return; } // default: open Today + agent setEntered(true); setPage("today"); setAgentOpen(true); } function handleWizardFinish(cfg) { setWizard(null); setEntered(true); setPage(cfg.kind === "one-shot" ? "live" : "today"); } // —— DOORWAY (no chrome) ———————————————————————————————————————— if (!entered) { return ( <> setEntered(true)} setGuidesOpen={setGuidesOpen} setPaletteOpen={setPaletteOpen} /> setPaletteOpen(false)} ctx={ctx} /> setGuidesOpen(false)} nav={(p) => { setEntered(true); setPage(p); }} mode={mode} /> {wizard && setWizard(null)} onFinish={handleWizardFinish} />} ); } // —— FULL APP —————————————————————————————————————————————————— return ( <> p.id === project)} setProject={setProject} mode={mode} setMode={setMode} setPaletteOpen={setPaletteOpen} setGuidesOpen={setGuidesOpen} onAgent={() => setAgentOpen(o => !o)} sidebarCollapsed={sidebarCollapsed} toggleSidebar={() => setSidebarCollapsed(c => !c)} backToDoorway={() => setEntered(false)} />
{page === "today" && } {page === "live" && } {page === "data" && } {page === "visualize" && } {page === "train" && } {page === "models" && } {page === "library" && } {page === "predict" && } {page === "reports" && } {page === "agent" && } {page === "settings" && }
setAgentOpen(false)} page={active.label} /> setPaletteOpen(false)} ctx={ctx} /> setGuidesOpen(false)} nav={setPage} mode={mode} /> {wizard && setWizard(null)} onFinish={handleWizardFinish} />} setTweak("accent", v)} options={["#E20613", "#0066B3", "#509A39", "#E6863A", "#131313"]} /> setTweak("density", v)} options={["roomy", "comfortable", "tight"]} /> setEntered(false)} /> setWizard("create-project")} /> setTweak("showMarginNotes", v)} /> setTweak("monoNumbers", v)} /> setTweak("agentOpenByDefault", v)} /> ); } // ──────────────────────────── running header ──────────────────────────── function RunningHeader({ page, project, setProject, mode, setMode, setPaletteOpen, setGuidesOpen, onAgent, sidebarCollapsed, toggleSidebar, backToDoorway }) { const [pickerOpen, setPickerOpen] = React.useState(false); const [modeMenuOpen, setModeMenuOpen] = React.useState(false); return (
{/* left: hamburger · brand · project · breadcrumbs */}
LI U LIAN · {/* project switcher */}
{pickerOpen && { setProject(p); setPickerOpen(false); }} onClose={() => setPickerOpen(false)} />}
· {page.group} · {page.label}
{/* center */}
live · main
{/* right */}
{modeMenuOpen && (
e.stopPropagation()} style={{ position: "absolute", top: 32, right: 0, width: 280, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, boxShadow: "0 18px 40px rgba(19,19,19,0.14)", zIndex: 500, overflow: "hidden" }}>
Interaction mode
{MODES.map(m => { const isCurrent = m.id === mode; return (
{ setMode(m.id); setModeMenuOpen(false); }} style={{ padding: "10px 14px", cursor: "pointer", borderBottom: "1px solid var(--hairline)", background: isCurrent ? "var(--surface-shade)" : "transparent" }}>
{m.id} {m.label} {m.id === "C" && default}
{m.sub}
); })}
switch any time · ⌘K · "mode"
)}
lj
); } function ProjectPicker({ current, setProject, onClose }) { React.useEffect(() => { const onClick = (e) => { if (!e.target.closest("[data-pp]")) onClose(); }; setTimeout(() => window.addEventListener("click", onClick), 0); return () => window.removeEventListener("click", onClick); }, [onClose]); return (
Switch project · {PROJECTS.length} total
{PROJECTS.map(p => { const isCurrent = p.id === current; return (
setProject(p.id)} style={{ display: "grid", gridTemplateColumns: "12px 1fr auto", alignItems: "center", gap: 10, padding: "10px 14px", cursor: "pointer", borderBottom: "1px solid var(--hairline)", background: isCurrent ? "var(--surface-shade)" : "transparent" }}>
{p.name}
{p.sub}
{p.datasets} ds · {p.models} mdl · {p.runs} runs · {p.role}
{isCurrent && active}
); })}
); } // ───────────────────────────── sidebar ───────────────────────────── function Sidebar({ page, setPage, collapsed, setCollapsed, setGuidesOpen }) { const groups = ["", "Workspace", "Library", "System"]; return ( ); } // ───────────────────────────── mount ───────────────────────────── const root = ReactDOM.createRoot(document.getElementById("root")); root.render();