@atmem/architect 0.2.1 → 0.2.3

package/src/main.jsx

@@ -1,3 +1,6 @@
+import {HOSTED,connectHostedWorkspace,hostedInitial,hostedCall,hostedRevision,noteHostedChange} from './hosted-workspace.mjs';
+import {readyExample,isReadyExample} from './ready-example.mjs';
+import {ReadyExampleDownload} from './ReadyExample.jsx';
 import {StarPrompt,STAR_URL} from './StarPrompt.jsx';
 import {prefillAcceptedSettings} from './engineering-defaults.mjs';
 import {LocationChoices} from './LocationChoices.jsx';
@@ -101,6 +104,7 @@ import {
   Rocket,
   BrainCircuit,
   Waypoints,
+  Volume2,
   Mic,
   Square,
   Eraser,
@@ -167,6 +171,8 @@ import { zipSync, strToU8 } from "fflate";
 // Each browser starts fresh; earlier projects are opened deliberately (⋯ → Open project file).
 const STORAGE = "atforma-workspace-v3";
 // A new project starts empty: the user describes what they want first.
+import './onboarding.css';
+import './chat-composer.css';
 const emptyProject = () => ({ id: crypto.randomUUID(), version: 1, revision: 1, name: "New project", provider: "tools", requirements: "", nodes: [], edges: [] });
 const ALL_CATALOG = [...CATALOG, ...UPSTREAM_CATALOG];
 const KIND_ICON = {
@@ -253,6 +259,7 @@ function Mark({ size = 20 }) {
 // Which architect the user chose; absent on first visit, so we ask before anything else.
 const CONNECTION = "atforma-connection-v1";
 function readConnection() {
+  if(HOSTED)return hostedInitial().connection;
   try {
     const c = JSON.parse(localStorage.getItem(CONNECTION) || "null");
     // Older builds stored "offline"; the architect now always needs a real model.
@@ -269,6 +276,7 @@ function saveConnection(c) {
   } catch {}
 }
 function readSaved() {
+  if(HOSTED)return withDerived(fromProjectFile(hostedInitial().file).project);
   try {
     const raw = localStorage.getItem(STORAGE);
     const p = validateImport(raw ? JSON.parse(raw) : emptyProject());
@@ -646,6 +654,7 @@ function harnessSignals(was, now) {
 }
 const welcome = (project) => ({
   role: "assistant",
+  introduction: true,
   text: project.nodes.length || project.brief?.application?.trim()
     ? `Good to see you again — let's keep going.\n\n${opening(project)}`
     : `What would you like to build?`,
@@ -660,13 +669,14 @@ function savedTheme() {
     return "light";
   }
 }
-document.documentElement.dataset.theme = savedTheme();
+
 
 function readChatView(id){try{const value=JSON.parse(localStorage.getItem('atmem-chat-view:'+id)||'null');return value&&Number.isSafeInteger(value.start)&&value.start>=0&&Array.isArray(value.turnIds)?value:{start:0,turnIds:[]};}catch{return {start:0,turnIds:[]};}}
 const pricingSignature=p=>JSON.stringify([p.id,p.estimate?.projectSize||'small',p.estimate?.usage,p.facts,p.decisions?.filter(d=>d.status==='Accepted'&&['cloud.region','data.country'].includes(d.subject)),[...storageNodes(p),...lambdaNodes(p),...googleNodes(p)].map(n=>[n.id,n.data.provider,n.data.service,n.data.config])]);
 function App() {
   const [starOffer,setStarOffer]=useState(0);
-  const [project, setProject] = useState(readSaved);
+  const [introOpen,setIntroOpen]=useState(false),[voiceOpenRequest,setVoiceOpenRequest]=useState(0);
+  const [project, setProject] = useState(()=>!HOSTED&&new URL(location.href).searchParams.get('example')==='1'&&!projectIdFromUrl(location.href)?readyExample():readSaved());
   const projectRef = useRef(project);
   projectRef.current = project;
   const [initialCanvasView] = useState(()=>readCanvasView(project));
@@ -698,7 +708,7 @@ function App() {
     [history, setHistory] = useState([]),
     [future, setFuture] = useState([]),
     [toast, setToast] = useState(""),
-    [modal, setModal] = useState(() => (readConnection() ? null : "welcome")),
+    [modal, setModal] = useState(null),
     [menu, setMenu] = useState(false),
     [palette, setPalette] = useState(false),
     [issuesOpen, setIssuesOpen] = useState(false),
@@ -782,6 +792,12 @@ function App() {
   const consultationAttempts = useRef(new Set());
   const agentAbort = useRef(null);
   const messageInput = useRef(null);
+  const hasIntroduction=messages[0]?.role==='assistant'&&(messages[0].introduction===true||messages[0].text==='What would you like to build?'||messages[0].text.startsWith('Good to see you again'));
+  const idleChat=hasIntroduction&&!introOpen&&architectureChatEntries(project,messages).length===1;
+  useEffect(()=>{
+    const resize=()=>{const field=messageInput.current;if(field){field.style.height='32px';field.style.height=Math.min(120,Math.max(32,field.scrollHeight))+'px';}};
+    resize();window.addEventListener('resize',resize);return()=>window.removeEventListener('resize',resize);
+  },[input,chatWidth,chatOpen]);
   const intakeRef=useRef(restoreQueuedMessages(messages,project.id));
   const [intake,setIntake]=useState(intakeRef.current),[intakePaused,setIntakePausedState]=useState(()=>restoreIntakePaused(messages)||intakeRef.current.length>0);
   const [intakeIssue,setIntakeIssue]=useState(null);
@@ -905,16 +921,19 @@ function App() {
     return () => { clearTimeout(zoom); clearTimeout(clear); };
   }, [attention, fitView]);
 
+  function showConnections(){if(HOSTED){void hostedCall('account').catch(error=>notify(error.message));return;}setModal('connections');}
   const refreshSession = useCallback(async () => {
     try {
       const next = await discoverLocalAgent();
       setSession(next);
+      if(HOSTED&&next.defaultConnection)setConnection(current=>current?.model===next.defaultConnection.model&&current?.effort===next.defaultConnection.effort?current:next.defaultConnection);
       return next;
     } catch {
       setSession(null);
       return null;
     }
   }, []);
+  useEffect(()=>{if(HOSTED&&session?.token)void hostedCall('ready').catch(()=>{});},[session?.token]);
   useEffect(() => {
     refreshSession();
     const timer=setInterval(refreshSession,30000);
@@ -1204,7 +1223,11 @@ function App() {
       const raw = JSON.parse(content);
       if (raw.format || raw.version === 1) {
         const { project: opened, migrated, from } = parseProjectFile(content);
-        loadDesign(fileImportAsCopy.current?copyProject(opened,crypto.randomUUID()):opened, { own: true });
+        if(HOSTED){
+          await saveEngineeringProject(projectRef.current.id);
+          const imported=await hostedCall('import-project',{file:toProjectFile(opened)});
+          loadDesign(fromProjectFile(imported.file).project,{own:true});
+        }else loadDesign(fileImportAsCopy.current?copyProject(opened,crypto.randomUUID()):opened, { own: true });
         notify(fileImportAsCopy.current?"New project created from the saved design. The original is preserved.":migrated ? `Project opened and upgraded from ${from}.` : "Project opened.");
       } else {
         loadDesign(importUpstreamProject(raw));
@@ -1637,13 +1660,15 @@ function App() {
     updateEngagement({ ...skipped, lastAsked: next });
     setMessages((m) => [...m, { role: "assistant", text: next ? `No problem, we'll come back to it.\n\n${next.question}\n${next.beginner}` : "That's everything I need for now." }]);
   }
-  // Autosave to the helper (your account on this computer), a moment after each change.
+  useEffect(()=>{if(HOSTED)void noteHostedChange(project.id).catch(()=>{});},[project,messages]);
+  // Autosave through the selected local or hosted session service.
   const binned = useRef(new Set());
   useEffect(() => {
-    if (!session || binned.current.has(project.id) || (!project.nodes.length && !project.brief?.application?.trim() && messages.length < 2)) return;
+    if (!session || binned.current.has(project.id) || (!HOSTED && !project.nodes.length && !project.brief?.application?.trim() && messages.length < 2)) return;
+    const bridgeVersion=HOSTED?hostedRevision(project.id):undefined;
     const t = setTimeout(async () => {
       try {
-        const saved=await projectStore(session, "save", { id: project.id, file: toProjectFile(withConversation(project, messages)) });
+        const saved=await projectStore(session, "save", { id: project.id, file: toProjectFile(withConversation(project, messages)),...(HOSTED?{bridgeVersion}:{}) });
         if(saved.memory)setMemorySync({projectId:project.id,...saved.memory});
       } catch (error) { setMemorySync(current=>({...((current?.projectId===project.id)?current:{}),projectId:project.id,status:'sync_failed'}));notify(`Project conversation could not be saved: ${error.message}`); }
     }, 800);
@@ -1667,6 +1692,8 @@ function App() {
     }
   }
   function switchTo(next) {
+    setIntroOpen(false);setVoiceOpenRequest(0);
+    const address=new URL(window.location.href);if(address.searchParams.get('project')!==next.id){address.searchParams.delete('project');address.searchParams.delete('example');window.history.replaceState(null,'',address);}
     chooseWorkspace('canvas');setBuildRequest(null);
     next = withDerived(next);
     const leaving = projectRef.current;
@@ -1697,6 +1724,7 @@ function App() {
   }
   async function openSaved(id) {
     try {
+      if(HOSTED)await saveEngineeringProject(projectRef.current.id);
       const { project: opened } = fromProjectFile(await projectStore(session, "get", { id }));
       switchTo(opened);
       setModal(null);
@@ -1725,14 +1753,30 @@ function App() {
     })();
     return () => { active = false; };
   }, [session?.token]);
-  function newProject() {
-    setModal("start-over");
+  async function newProject() {
+    if(HOSTED){
+      if(agentBusy||busy||intake.length)return;
+      try{await saveEngineeringProject(projectRef.current.id);const {file}=await hostedCall('new-project');switchTo(fromProjectFile(file).project);setModal(null);}catch(error){notify(error.message);}
+      return;
+    }
+    if(!busy&&!agentBusy&&!intake.length)setModal("start-over");
+  }
+  function createOwnProject(){
+    if(HOSTED){void newProject();return;}
+    switchTo(validateImport(emptyProject()));setModal(connection?null:'connections');
+    requestAnimationFrame(()=>document.querySelector('input[aria-label="Project name"]')?.focus());
+  }
+  async function openReadyExample(){
+    if(busy||agentBusy||intake.length)return;
+    const example=readyExample();example.id=crypto.randomUUID();
+    if(HOSTED){try{await saveEngineeringProject(projectRef.current.id);const {file}=await hostedCall('import-project',{file:toProjectFile(example)});switchTo(fromProjectFile(file).project);setModal(null);}catch(error){notify(error.message);}return;}
+    switchTo(example);setModal(null);
   }
   async function binProject(id) {
     try {
       binned.current.add(id);
       await projectStore(session, "trash", { id });
-      if (id === projectRef.current.id) switchTo(validateImport(emptyProject()));
+      if(id===projectRef.current.id){if(HOSTED){const {file}=await hostedCall('new-project');switchTo(fromProjectFile(file).project);}else switchTo(validateImport(emptyProject()));}
       await refreshProjects();
       notify("Moved to the bin. Restore it from Projects any time.");
     } catch (e) {
@@ -1840,7 +1884,7 @@ function App() {
           />
   );
   return (
-    <div style={{"--chat-panel-width":`${chatWidth}px`}} className={`app ${chatOpen&&!buildView ? "" : "chat-closed"} ${buildView?"build-workspace":""}`}>
+    <div style={{"--chat-panel-width":`${chatWidth}px`}} className={`app ${idleChat?"idle-chat":""} ${chatOpen&&!buildView ? "" : "chat-closed"} ${buildView?"build-workspace":""}`}>
       <header className="bar">
         <button aria-label="About AtMem AI Architect" className="brand" onClick={() => setModal("about")} title="About AtMem AI Architect">
           <Mark />
@@ -1848,7 +1892,7 @@ function App() {
         </button>
         <nav className="crumbs" aria-label="Level"><span className="workspace-label">PROJECT</span>
           <button className="projects-btn" aria-label="Projects" title="Your projects" onClick={() => (refreshProjects(), setModal("projects"))}>
-            <FolderOpen size={22} /> Projects
+            <FolderOpen size={22} /><span>Projects</span>
           </button>
           <label className="project-rename"><input
             className="project-name"
@@ -1859,6 +1903,8 @@ function App() {
           /><PencilRuler size={14} aria-hidden="true"/></label>
         </nav>
         <div className="bar-actions">
+          {HOSTED&&<><button className="btn" onClick={newProject} disabled={busy||agentBusy}><Plus size={16}/>New project</button><button className="btn" onClick={()=>hostedCall('account')}>Account</button></>}
+          {isReadyExample(project)&&<><ReadyExampleDownload compact/>{!HOSTED&&<button className="btn" onClick={newProject} disabled={busy||agentBusy}>Create new project</button>}</>}
           {storageError && <span className="warn-text">Not saved</span>}
           <button
             className="icon"
@@ -1883,6 +1929,9 @@ function App() {
         {menu && (
           <div className="menu" role="menu" onClick={() => setMenu(false)}>
             <button role="menuitem" onClick={() => (refreshProjects(), setModal("projects"))} disabled={busy}><FolderOpen size={16}/>Projects</button>
+            <a role="menuitem" href="https://atmem.ai" target="_blank" rel="noopener noreferrer">atmem.ai ↗</a>
+            <a role="menuitem" href="mailto:hello@atmem.ai">Contact us: hello@atmem.ai</a>
+            <button role="menuitem" onClick={openReadyExample} disabled={busy||agentBusy}><LayoutGrid size={16}/>Open complete AI example</button>
             <button role="menuitem" onClick={newProject} disabled={busy}><Plus size={16}/>New project</button>
             <hr/><button role="menuitem" onClick={() => setPalette(true)} disabled={busy}><Plus size={16}/>Add a block</button>
             <button role="menuitem" onClick={() => setModal("templates")} disabled={busy}><LayoutTemplate size={16}/>Templates</button>
@@ -1891,7 +1940,7 @@ function App() {
             <hr/><button role="menuitem" onClick={() => setModal("memory")} disabled={!session}><BrainActivity size={18} active={false}/>AtMem memory</button>
             <button role="menuitem" onClick={() => setModal("start-over")} disabled={busy || agentBusy}><RotateCcw size={16}/>Start over</button>
             <hr />
-            <button role="menuitem" onClick={() => setModal("connections")}><Waypoints size={16}/>AI providers</button>
+            {!HOSTED&&<button role="menuitem" onClick={() => showConnections()}><Waypoints size={16}/>AI providers</button>}
             <button role="menuitem" onClick={() => setModal("licenses")}><ShieldCheck size={16}/>Licences</button>
             <a role="menuitem" href={STAR_URL} target="_blank" rel="noopener noreferrer">Star on GitHub ↗</a>
           </div>
@@ -1920,7 +1969,7 @@ function App() {
           {level!=="block"&&<aside className="board-components component-navigator" data-expanded={treeOpen} aria-label="Board components"><button className="btn" aria-label="Toggle components and layers" aria-expanded={treeOpen} onClick={()=>setTreeOpen(!treeOpen)}><LayoutGrid size={16}/> Components &amp; layers</button>
 {treeOpen&&<nav className="board-component-tree" aria-label="Component tree"><strong>{project.name}</strong><div className="tree-views"><button disabled={!blockReviews.length} onClick={()=>{reviewBlock((blockReviews.find(r=>r.status!=='reviewed')||blockReviews[0]).id);}}><CheckCheck size={16}/> Review blocks · {blockReviews.filter(r=>r.status==='reviewed').length}/{blockReviews.length}</button></div>{[...new Map(project.nodes.filter(n=>n.data.kind!=='note').map(n=>[layerOf(n).id,layerOf(n)])).values()].map(layer=><details open key={layer.id}><summary>{layer.label}</summary>{project.nodes.filter(n=>n.data.kind!=='note'&&layerOf(n).id===layer.id).map(n=><button key={n.id} aria-current={selected===n.id?'true':undefined} onClick={()=>{setMode('design');setDesignView('board');setFocus(null);setLevel('flow');setSelected(n.id);setTimeout(()=>fitView({nodes:[{id:n.id}],padding:1,maxZoom:1.2,duration:350}),100);}}><Database size={14}/><span>{n.data.label}<small>{n.data.service||n.data.provider}</small><small className={`tree-review-state ${blockReviews.find(r=>r.id===n.id)?.status}`}>{blockReviews.find(r=>r.id===n.id)?.statusLabel}</small></span></button>)}</details>)}</nav>}
           {treeOpen&&<button className="btn" disabled={busy} onClick={()=>setPalette(true)}><Plus size={16}/> Add component</button>}</aside>}
-          {!hasDesign&&!palette&&!dismissedStarts.includes(project.id)&&<section className="board-start" aria-label="Start your project"><button type="button" className="icon board-start-close" aria-label="Dismiss welcome card" title="Dismiss welcome card" onClick={dismissStart}><X size={16}/></button><h2>What would you like to create?</h2><div className="row"><button className="btn primary" onClick={()=>{dismissStart();setChatOpen(true);document.querySelector('.composer textarea, .chat textarea')?.focus();}}>Start chatting</button><button className="btn" onClick={()=>{setChatOpen(true);requirementsInput.current.click();}}>Upload requirements or diagram</button><button className="btn" onClick={()=>setModal("project-file")}>Open project</button></div><InlineNote label="Supported starting files">Word, PDF, text, Markdown, draw.io, images and Architect project JSON.</InlineNote></section>}
+          {!hasDesign&&!palette&&!dismissedStarts.includes(project.id)&&<section className="board-start" aria-label="Start your project"><button type="button" className="icon board-start-close" aria-label="Dismiss welcome card" title="Dismiss welcome card" onClick={dismissStart}><X size={16}/></button><h2>What would you like to create?</h2><div className="row"><button className="btn primary" onClick={openReadyExample}>Explore complete AI example</button><button className="btn primary" onClick={()=>{dismissStart();setChatOpen(true);document.querySelector('.composer textarea, .chat textarea')?.focus();}}>Start chatting</button><button className="btn" onClick={()=>{setChatOpen(true);requirementsInput.current.click();}}>Upload requirements or diagram</button><button className="btn" onClick={()=>setModal("project-file")}>Open project</button></div><InlineNote label="Supported starting files">Word, PDF, text, Markdown, draw.io, images and Architect project JSON.</InlineNote></section>}
         <ReactFlow
           nodes={canvasNodes}
           edges={canvasEdges}
@@ -1986,8 +2035,8 @@ function App() {
           >
             <LayoutGrid size={17} />
           </button>
-          <button className="icon" title="Clear board" aria-label="Clear board" disabled={!project.nodes.length || busy} onClick={clearBoard}>
-            <Eraser size={17} />
+          <button className="btn reset-board" title="Reset board and context" aria-label="Reset board and context" disabled={busy||agentBusy||intake.length>0} onClick={newProject}>
+            <Trash2 size={17} /> Reset board
           </button>
           <button className="icon" title="Undo board change" aria-label="Undo" disabled={!history.length || busy || agentBusy} onClick={undo}>
             <Undo2 size={17} />
@@ -2033,8 +2082,8 @@ function App() {
                   <Scan size={16}/> Select all
                 </button>
                 <div className="ctx-divider" role="separator"/>
-                <button role="menuitem" className="danger" disabled={!project.nodes.length} onClick={() => (clearBoard(), setCtx(null))}>
-                  <Eraser size={16}/> Clear board
+                <button role="menuitem" className="danger" disabled={!project.nodes.length} onClick={() => (newProject(), setCtx(null))}>
+                  <Trash2 size={16}/> Reset board and context
                 </button>
               </>
             )}
@@ -2173,7 +2222,7 @@ function App() {
         <section className="review-costs" aria-label="Project costs">
         {["review","estimate"].includes(mode) && <EstimateView project={project} result={costs} onChange={updateEngagement} busy={busy||agentBusy||!!pending} onEstimate={refreshEstimate} onChooseRegion={()=>{visitJourney('cloud');requestAnimationFrame(()=>{const input=document.querySelector('.location-region-form input');input?.focus();input?.scrollIntoView({block:'center',behavior:'instant'});});}} pricing={pricingState} onNext={()=>{const section=document.querySelector('.review-generation');const target=section?.querySelector('button')||section;if(target){target.setAttribute('tabindex','-1');target.focus({preventScroll:true});target.scrollIntoView({block:'center'});}}} />}
         </section>
-        {mode==='review'&&session?.engineeringEnabled&&<section className="review-generation" aria-label="Generation and verification"><EngineeringPanel key={project.id} project={project} onBusyChange={setGenerationPending} onWorkModelChange={changeArchitectureWork} onIntentContext={syncEngineeringIntent} projectId={project.id} session={session} connection={connection} contextBusy={busy||agentBusy||!!pending} saveProject={()=>saveEngineeringProject(project.id)} buildRequest={buildRequest} onBuildRequestHandled={id=>setBuildRequest(current=>current?.id===id?null:current)} onConnections={()=>setModal('connections')}/></section>}
+        {mode==='review'&&session?.engineeringEnabled&&<section className="review-generation" aria-label="Generation and verification"><EngineeringPanel key={project.id} project={project} onBusyChange={setGenerationPending} onWorkModelChange={changeArchitectureWork} onIntentContext={syncEngineeringIntent} projectId={project.id} session={session} connection={connection} contextBusy={busy||agentBusy||!!pending} saveProject={()=>saveEngineeringProject(project.id)} buildRequest={buildRequest} onBuildRequestHandled={id=>setBuildRequest(current=>current?.id===id?null:current)} onConnections={()=>showConnections()}/></section>}
         {mode==='review'&&!session?.engineeringEnabled&&<p>Generation and local checks require the engineering service. Your design is retained; Delivery can package the design and remaining tasks.</p>}
         {mode==='review'&&<ProjectChecks generationPending={generationPending} receipt={checkReceipt} project={project} environment={environment} session={session} onReceipt={setCheckReceipt} onBusy={setChecking}/>}
         {mode==='review'&&<footer className="review-finish"><div><strong>3. Package and download</strong><p>Explore all files and download one project ZIP in Delivery.</p></div><button className="btn primary" onClick={()=>{const next=acknowledgeStage(projectRef.current,'review');updateEngagement(costs.expected!==null&&!costs.mixedCurrencies?{...next,extensions:{...next.extensions,journey:{...next.extensions.journey,estimate:journey(next).keys.estimate}}}:next);visitJourney('delivery');}}>Complete →</button></footer>}
@@ -2184,7 +2233,7 @@ function App() {
 
         {onBoard&&emulationOpen&&<div className="emulation-dock"><EmulationPanel project={project} session={session} emulation={emulation} onDiscuss={discussEmulation} onOpenComponent={id=>{reviewBlock(id);setEmulationOpen(false);}} discussionBusy={busy||agentBusy||!!pending} onClose={()=>setEmulationOpen(false)} onBuild={session?.engineeringEnabled?()=>{setEmulationOpen(false);buildCurrentDesign('test');}:undefined}/></div>}
 
-        {mode === "design" && designView === "outputs" && <OutputsView onNavigate={async target=>{const [stage,selector]={requirements:['scope','.requirements-document'],location:['cloud','section[aria-label="Country and region"]'],cost:['review','.review-costs'],implementation:['review','.review-generation'],checks:['review','.project-checks']}[target];visitJourney(stage);await new Promise((resolve,reject)=>{const started=performance.now();function focus(){const element=document.querySelector(selector);if(element&&element.getClientRects().length){element.setAttribute('tabindex','-1');element.focus({preventScroll:true});element.scrollIntoView({block:'start',behavior:'instant'});resolve();}else if(performance.now()-started<5000)requestAnimationFrame(focus);else reject(Error('Section is unavailable. Use the stage tabs to continue.'));}requestAnimationFrame(focus);});}} checkReceipt={checkReceipt} onDownloaded={()=>{updateEngagement(acknowledgeStage(projectRef.current,'delivery'));setStarOffer(value=>value+1);}} onReview={()=>visitJourney('review')} onSave={expected=>saveEngineeringProject(project.id,expected)} project={project} run={run} environment={environment} session={session} emulation={emulation} onDiscuss={discussEmulation} discussionBusy={busy||agentBusy||!!pending} onDownload={downloadBundle} onBuild={session?.engineeringEnabled?()=>visitJourney('review'):undefined} onBack={()=>setDesignView("board")} />}
+        {mode === "design" && designView === "outputs" && <OutputsView workStatus={engineeringStatus} onNavigate={async target=>{const [stage,selector]={requirements:['scope','.requirements-document'],location:['cloud','section[aria-label="Country and region"]'],cost:['review','.review-costs'],implementation:['review','.review-generation'],checks:['review','.project-checks']}[target];visitJourney(stage);await new Promise((resolve,reject)=>{const started=performance.now();function focus(){const element=document.querySelector(selector);if(element&&element.getClientRects().length){element.setAttribute('tabindex','-1');element.focus({preventScroll:true});element.scrollIntoView({block:'start',behavior:'instant'});resolve();}else if(performance.now()-started<5000)requestAnimationFrame(focus);else reject(Error('Section is unavailable. Use the stage tabs to continue.'));}requestAnimationFrame(focus);});}} checkReceipt={checkReceipt} onDownloaded={()=>{updateEngagement(acknowledgeStage(projectRef.current,'delivery'));setStarOffer(value=>value+1);}} onReview={()=>visitJourney('review')} onSave={expected=>saveEngineeringProject(project.id,expected)} project={project} run={run} environment={environment} session={session} emulation={emulation} onDiscuss={discussEmulation} discussionBusy={busy||agentBusy||!!pending} onDownload={downloadBundle} onBuild={session?.engineeringEnabled?()=>visitJourney('review'):undefined} onBack={()=>setDesignView("board")} />}
         {mode === "design" && designView === "terraform" && <TerraformView project={project} environment={environment} session={session} emulation={emulation} onDiscuss={discussEmulation} discussionBusy={busy||agentBusy||!!pending} onDelivery={()=>visitJourney("delivery")} onBuild={session?.engineeringEnabled?()=>visitJourney('review'):undefined} onBack={()=>setDesignView("board")} />}
         <div className="choices-workspace" hidden={!(mode==="design"&&["options","decisions","location"].includes(designView))}>
         {mode === "design" && ["options","decisions"].includes(designView) && (
@@ -2199,7 +2248,7 @@ function App() {
 
       {!chatOpen&&!buildView && <button className="icon chat-reopen" title="Show chat" aria-label="Show chat" onClick={()=>setChatOpen(true)}><PanelRightOpen size={18}/></button>}
       {chatOpen&&!buildView && (
-        <aside className="chat" aria-label="Chat"><ChatResizeHandle width={chatWidth} onChange={resizeChat}/>
+        <aside className={`chat ${idleChat?"idle":""}`} aria-label="Chat"><ChatResizeHandle width={chatWidth} onChange={resizeChat}/>
           <div className="chat-head">
             <div className="chat-heading-row"><strong className="chat-title" aria-label="AI Architect">
               <Mark size={24} />
@@ -2217,10 +2266,15 @@ function App() {
               />
               Draw as we talk
             </label>
-            <button className="model" onClick={() => setModal("connections")} title="AI providers">
+            {HOSTED?<span className="model"><span className={`led ${connection&&session?'on':''}`}/>{connection?.model?.split('/').at(-1)} · Medium</span>:<>
+            <button className="model" onClick={() => showConnections()} title="AI providers">
               <span className={`led ${connection && session ? "on" : ""}`} />
               {connection ? `${connection.model}${connection.effort ? ` · ${EFFORT_LABEL[connection.effort] || connection.effort}` : ""}` : "Connect a model"}
-            </button>
+            </button></>}
+            <span className="chat-top-utilities">
+              {hasIntroduction&&<button type="button" aria-expanded={introOpen} onClick={()=>setIntroOpen(value=>!value)}>{introOpen?'▾':'▸'} Introduction</button>}
+              {session&&<button type="button" className="icon" aria-label="Voice settings" title="Voice settings" onClick={()=>setVoiceOpenRequest(value=>value+1)}><Volume2 size={15}/></button>}
+            </span>
           </div>
           <div className="skills" aria-label="Active skills">
             <button className="known-bar" disabled={!session} aria-label="AtMem memory" title="Open AtMem memory, confirmed decisions and sync activity" onClick={()=>setModal("memory")}><BrainActivity size={18} active={false}/>{memoryLabel}<ChevronRight size={14}/></button>
@@ -2264,12 +2318,15 @@ function App() {
               ))}
             </ul>
           )}
+          <div className="chat-body">
+          <section className="chat-history" aria-label="Chat history"><h2 className="chat-history-label">Chat history</h2>
           <div className="messages" ref={chatScroll.viewport}>
             <div className="message-list" ref={chatScroll.content}>
             {architectureChatEntries(project,messages).filter(entry=>entry.kind==='message'?entry.index>=chatView.start:entry.kind==='activity'?!chatView.turnIds.includes(entry.turn.id):entry.kind==='legacy-activity'?entry.entries.some(item=>!chatView.turnIds.includes(item.turn.id)):true).map(entry=>{
               if(entry.kind==='activity-error')return <p key="activity-error" role="alert">{entry.error}</p>;
               if(entry.kind==='legacy-activity')return <EarlierArchitectureActivity key={entry.id} entries={entry.entries} projectId={project.id} session={session}/>;
               if(entry.kind==='activity')return <ArchitectureTurn key={project.id+':'+entry.turn.id} turn={entry.turn} number={entry.number} projectId={project.id} session={session} active={agentBusy&&entry.turn.clientStatus==='submitted'&&entry.turn.id===latestArchitectureTurn?.id} working={agentBusy&&entry.turn.clientStatus==='submitted'} onStop={()=>agentAbort.current?.abort()}/>;
+              if(entry.index===0&&hasIntroduction&&!introOpen)return null;
               const m=entry.message,i=entry.index,turn=project.extensions?.architectureActivity?.turns?.find(t=>t.id===m.activityId),messageTime=m.createdAt||(m.role==='assistant'?turn?.completedAt:null)||turn?.startedAt;
               return (
               <div key={i} className={`msg ${m.role}`}>
@@ -2277,7 +2334,7 @@ function App() {
                 {(m.workState==='queued'||m.workState==='processing'&&intake.some(q=>q.id===m.requestId))&&<small className="message-work-state">Queued for the next update <button className="link" onClick={()=>{updateIntake(intakeRef.current.filter(q=>q.id!==m.requestId));setRequestState([m.requestId],'cancelled');}}>Remove from queue</button><button className="link" onClick={()=>{if(input||attachments.length){notify('Your current draft is preserved. Send or clear it before editing a queued update.');return;}const queued=intakeRef.current.find(q=>q.id===m.requestId);if(!queued)return;setInput(queued.text);setAttachments(queued.attachments);updateIntake(intakeRef.current.filter(q=>q.id!==m.requestId));setRequestState([m.requestId],'cancelled');}}>Edit update</button>{m.attachments?.some(a=>!a.data)&&<button className="link" onClick={()=>{updateIntake(intakeRef.current.map(q=>q.id===m.requestId?{...q,attachments:[]}:q));setIntakePaused(false);}}>Continue with text only</button>}</small>}
                 {!!m.attachments?.length&&<div className="sent-attachments">{m.attachments.map(a=><figure key={a.id}>{a.data&&a.mime.startsWith('image/')&&<img src={`data:${a.mime};base64,${a.data}`} alt={a.name}/>}<figcaption><Paperclip size={12}/>{a.name}{a.originalNotSaved && <small>Original file not saved; attach it again to review its contents.</small>}</figcaption></figure>)}</div>}
                 {m.fix && (
-                  <button className="btn fix" onClick={() => setModal("connections")}>
+                  <button className="btn fix" onClick={() => showConnections()}>
                     Fix connection
                   </button>
                 )}
@@ -2320,6 +2377,8 @@ function App() {
             </div>
           </div>
           {chatScroll.away&&<button className="chat-jump-latest" aria-label="Jump to latest message" onClick={chatScroll.followLatest}>↓</button>}
+          </section>
+          <div className="chat-compose-pane">
           {!!intake.filter(q=>q.projectId===project.id).length&&<div className="intake-status" role="status">{intake.filter(q=>q.projectId===project.id).length} update(s) {intakePaused?'saved · paused':'queued · combining next'}{intakeIssue&&<span> {intakeIssue}</span>}{intakePaused&&<button className="link" onClick={()=>setIntakePaused(false)}>Resume</button>}</div>}
           <div className="prompts">
             {mode === "design" && project.workflow && !project.nodes.length && !pending && (
@@ -2342,11 +2401,12 @@ function App() {
               void postMessage();
             }}
           >
-            <textarea
+            <label className="composer-label" htmlFor="architect-message">Your message</label>
+            <textarea id="architect-message"
               onPaste={e=>{const files=[...e.clipboardData.files];if(files.length){e.preventDefault();void attachFiles(files);}}}
               ref={messageInput}
               aria-label="Your message"
-              placeholder={brief(project) ? "Reply in your own words…" : "Describe what you want to build…"}
+              placeholder="Type here…"
               rows={2}
               value={input}
               onChange={(e) => { stopVoice(); setInput(e.target.value); }}
@@ -2372,11 +2432,11 @@ function App() {
               {voiceActive ? <Square size={13} /> : <Mic size={15} />}
             </button>
             <button type="submit" className="send" aria-label="Send message" disabled={(!input.trim() && !voiceActive && !attachments.length) || busy || readingAttachments || voiceState === "transcribing"}>
-              <ArrowUp size={15} />
+              <ArrowUp size={15} /><span>Send</span>
             </button>
             </div>
           </form>
-          {session&&<OpenAIVoicePanel key={project.id} session={session} connection={connection} transportRef={openaiVoice} onConnections={()=>setModal('connections')} onStart={()=>{voice.current?.cancel();setVoiceError('');}} onTranscript={(text,automatic)=>{
+          {session&&<OpenAIVoicePanel hideTrigger openRequest={voiceOpenRequest} key={project.id} session={session} connection={connection} transportRef={openaiVoice} onConnections={()=>showConnections()} onStart={()=>{voice.current?.cancel();setVoiceError('');}} onTranscript={(text,automatic)=>{
             if(automatic&&!input.trim()&&!attachments.length){setInput(text);void send(text);}
             else setInput(current=>current+(current.trim()?' ':'')+text);
           }}/>}
@@ -2384,10 +2444,12 @@ function App() {
             {!voiceError&&["starting","transcribing"].includes(voiceState)&&<BrainActivity size={22}/>}
             {voiceError || ({ starting: "Opening microphone…", listening: "Dictating locally — review your words, then press Send.", transcribing: "Finishing your transcript…" }[voiceState] || "")}
           </div>
+          </div>
+          </div>
         </aside>
       )}
 
-      <input type="file" id="requirements-file-input" ref={requirementsInput} accept={ATTACHMENT_ACCEPT} multiple hidden onChange={async e=>{const files=[...e.target.files];e.target.value='';if(!files.length||readingAttachments)return;const uploadOwner=projectRef.current.id;setReadingAttachments(true);setAttachmentError('');try{const added=await readAttachments(files,attachments);if(projectRef.current.id!==uploadOwner)return;const all=[...attachments,...added];setAttachments(all);setChatOpen(true);setInput('Read these requirements and diagrams. Summarise what you understand, propose requirements and a connected design, and ask one focused question about anything important that is unclear. Preserve existing systems and distinguish source facts from assumptions.');if(connection&&session){setReadingAttachments(false);void send('Read these requirements and diagrams. Summarise what you understand, propose requirements and a connected design, and ask one focused question about anything important that is unclear. Preserve existing systems and distinguish source facts from assumptions.','chat',null,null,{attachments:all});}else{setModal('connections');}}catch(error){setAttachmentError(error.message);}finally{setReadingAttachments(false);}}}/>
+      <input type="file" id="requirements-file-input" ref={requirementsInput} accept={ATTACHMENT_ACCEPT} multiple hidden onChange={async e=>{const files=[...e.target.files];e.target.value='';if(!files.length||readingAttachments)return;const uploadOwner=projectRef.current.id;setReadingAttachments(true);setAttachmentError('');try{const added=await readAttachments(files,attachments);if(projectRef.current.id!==uploadOwner)return;const all=[...attachments,...added];setAttachments(all);setChatOpen(true);setInput('Read these requirements and diagrams. Summarise what you understand, propose requirements and a connected design, and ask one focused question about anything important that is unclear. Preserve existing systems and distinguish source facts from assumptions.');if(connection&&session){setReadingAttachments(false);void send('Read these requirements and diagrams. Summarise what you understand, propose requirements and a connected design, and ask one focused question about anything important that is unclear. Preserve existing systems and distinguish source facts from assumptions.','chat',null,null,{attachments:all});}else{showConnections();}}catch(error){setAttachmentError(error.message);}finally{setReadingAttachments(false);}}}/>
       <input id="project-file-input" type="file" ref={fileRef} accept="application/json,.json" hidden onChange={importProject} />
       {toast && (
         <div className="toast" role="status">
@@ -2429,22 +2491,20 @@ function App() {
               /></div>
             ) : modal === "start-over" ? (
               <>
-                <h2>Start over?</h2>
-                <p>Start a new idea with an empty board and chat. Requirements, decisions and estimates start fresh too. Your model connection stays.</p>
+                <h2>Reset board and context?</h2>
+                <p>Start fresh with an empty board, chat, requirements and decisions. Your saved projects and model connection stay.</p>
                 <div className="reset-actions">
                   <button className="btn primary" title="Download your project, then start a new one" aria-label="Save project and start over" onClick={() => {
                     if (!saveProjectFile()) return;
-                    switchTo(validateImport(emptyProject()));
-                    setModal(null);
+                    createOwnProject();
                   }}><Package size={18}/> Save & start new</button>
                   <button
-                    className="btn" title="Start a new project without downloading this one" aria-label="Start over without download"
+                    className="btn" title="Start a new project without downloading this one" aria-label="Confirm reset board and context"
                     onClick={() => {
-                      switchTo(validateImport(emptyProject()));
-                      setModal(null);
+                      createOwnProject();
                     }}
                   >
-                    <Plus size={18}/> Start without saving
+                    <Trash2 size={18}/> Reset board and context
                   </button>
                   <button className="btn ghost" onClick={() => setModal(null)}>
                     <ArrowLeft size={18}/> Keep working
@@ -2467,7 +2527,7 @@ function App() {
               />
             ) : modal === "licenses" ? (
               <>
-                <h2>AtMem</h2><a href="/licenses/atmem-APACHE-2.0.txt" target="_blank" rel="noreferrer">Apache 2.0</a>
+                <h2>AtMem</h2><a href={(HOSTED?'/architect/workspace/':'/')+'licenses/atmem-APACHE-2.0.txt'} target="_blank" rel="noreferrer">Apache 2.0</a>
               </>
             ) : (
               <>
@@ -2482,8 +2542,17 @@ function App() {
   );
 }
 
-createRoot(document.getElementById("root")).render(
+async function mountArchitect(){
+ await connectHostedWorkspace();
+ document.documentElement.dataset.theme=savedTheme();
+ createRoot(document.getElementById("root")).render(
   <ReactFlowProvider>
     <App />
   </ReactFlowProvider>,
 );
+}
+void mountArchitect().catch(error=>{
+ const root=document.getElementById('root');root.replaceChildren();
+ const message=document.createElement('p');message.textContent=error.message||'The workspace could not open.';
+ const link=document.createElement('a');link.href='/architect';link.textContent='Return to Architect';root.append(message,link);
+});

package/src/onboarding.css

@@ -0,0 +1,24 @@
+@media(max-width:900px){html,body,#root{height:100%;overflow:hidden}.app{height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(100px,1fr) minmax(300px,50dvh);overflow:hidden}.app.chat-closed,.app.build-workspace{grid-template-rows:auto auto minmax(0,1fr)}.app>.canvas{min-height:0;height:auto;overflow:hidden}.app>.chat{height:auto;min-height:0;overflow:hidden}.chat>.messages{min-height:0;flex:1;overflow:auto}.chat>.composer{position:relative;flex-shrink:0;background:var(--paper)}}
+.chat>.composer{padding:6px 8px;border-radius:14px}.chat>.composer textarea{min-height:32px;height:32px;max-height:120px;padding:4px 6px;font-size:14px;line-height:20px;resize:none;overflow-y:auto}.chat>.composer .composer-actions{padding-top:2px}.chat>.composer .composer-actions button{width:32px;height:32px;min-height:32px;padding:6px}
+.chat>.chat-head{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 6px;padding:4px 8px;min-height:0}.chat-head>.chat-heading-row{display:contents}.chat-head .chat-title{display:none}.chat-head>.model{order:0;max-width:100%;font-size:12px;line-height:18px;min-height:26px;padding:3px 7px;margin:0}.chat-head>.live-toggle{order:1;flex:0 0 auto;width:auto;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;line-height:18px;padding:0;margin:0}.chat-head .live-toggle input{width:13px;height:13px;margin:0}.chat-head .icon{order:2;width:26px;height:26px;min-height:26px;padding:4px;margin:0}.chat-head .icon svg{width:15px;height:15px}.chat>.skills{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;gap:3px;padding:2px 8px 4px;margin:0;min-height:0;background:transparent;border-radius:0}.chat>.skills .known-bar,.chat>.skills .skill{flex:0 0 auto;width:auto;font-size:11px;line-height:16px;min-height:24px;padding:3px 6px;margin:0;gap:4px;border-radius:7px}.chat>.skills svg{width:13px;height:13px}
+.chat-head .chat-top-utilities{display:inline-flex;align-items:center;gap:4px;order:3;margin-left:auto}
+.chat-head .chat-top-utilities button{font-size:11px;line-height:18px;min-height:26px;padding:3px 6px;border:0;background:transparent;color:var(--ink-2)}
+.chat>.voice-status:empty{display:none}
+.chat.idle>.messages{display:none}
+@media(max-width:900px){.app.idle-chat{grid-template-rows:auto auto minmax(100px,1fr) auto}.app>.chat.idle{height:auto;min-height:0}}
+.ready-reference{margin:20px 0}.ready-reference>p{margin:8px 0}.ready-reference li{display:flex;align-items:center;gap:10px;padding:8px 0}.ready-reference li>span:nth-child(2){flex:1}.ready-reference details{margin-top:10px}.ready-reference details p{margin:8px 0}
+.bar-actions .ready-download{font-size:12px;padding:6px 10px}.toolbar .reset-board{font-size:12px;padding:6px 9px;gap:5px}
+
+/* Keep project tools in one slim row; the diagram owns the remaining height. */
+.app>.bar{flex-wrap:nowrap;gap:6px;padding:4px 8px;min-height:40px}
+.app>.bar>.brand{padding:2px;flex-shrink:0}
+.app>.bar>.crumbs{order:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:4px!important}
+.app>.bar .workspace-label{display:none}
+.app>.bar .project-rename{flex:1;min-width:0}
+.app>.bar .project-name{font-size:13px;padding:4px 6px;height:30px;min-width:0}
+.app>.bar .projects-btn{padding:4px 6px;min-width:0;min-height:30px;font-size:12px}
+.app>.bar>.bar-actions{margin-left:auto;padding:0;border:0;gap:4px;flex-shrink:0}
+.app>.bar .bar-actions>.btn{padding:5px 8px;font-size:12px;min-height:30px;gap:4px}
+.app>.bar .bar-actions>.icon{width:30px;height:30px;min-height:30px;padding:5px}
+@media(max-width:900px){.app>.bar .bar-actions>.ready-download{display:none}}
+@media(max-width:650px){.app>.bar .projects-btn>span{display:none}.app>.bar>.bar-actions{gap:2px}.app>.bar .bar-actions>.btn{font-size:11px;padding:5px 6px}.app>.bar .bar-actions>.icon{width:26px}.app>.bar .project-name{font-size:12px;padding:3px;}.app>.bar .project-rename>svg{display:none}}

package/src/ready-example.mjs

@@ -0,0 +1,5 @@
+import file from './reference-example/project.json' with {type:'json'};
+import {fromProjectFile} from './project-file.mjs';
+export const READY_EXAMPLE_ID='atmem-ai-ready-example-v1';
+export function readyExample(){const {project}=fromProjectFile(structuredClone(file));return project;}
+export function isReadyExample(project){return project?.extensions?.preparedExample?.version===1&&project?.extensions?.preparedExample?.owner==='AtMem example author';}