@atmem/architect 0.2.2 → 0.2.3

package/server/engineering_sessions.py

@@ -64,6 +64,8 @@ class RecoveredStart:
 
 class EngineeringBackend(Protocol):
     name: str
+    @property
+    def session_count(self) -> int: ...
     async def create(self,scope: ProjectScope,workspace: str,selection: ModelSelection) -> str: ...
     async def resume(self,scope: ProjectScope,handle: str,workspace: str,selection: ModelSelection) -> None: ...
     async def observe(self,scope: ProjectScope,handle: str,turn: str) -> BackendEvent | None: ...

package/server/local_validation.py

@@ -133,10 +133,13 @@ class DockerValidationWorker:
                                    env=env,capture_output=True,text=True,timeout=15)
             if inspect.returncode!=0 or inspect.stdout.strip()!=spec.image:
                 raise RuntimeError('The reviewed local image/platform is unavailable; no image was pulled')
-            platform=subprocess.run([*prefix,'image','inspect','--platform',spec.platform,spec.image,'--format','{{.Os}}/{{.Architecture}} {{.Id}}'],
+            # A registered config image ID identifies one architecture, not a
+            # multi-platform tag/index. Inspect that exact cached config directly;
+            # --platform inspection requires a newer daemon API unnecessarily.
+            platform=subprocess.run([*prefix,'image','inspect',spec.image,'--format','{{.Os}}/{{.Architecture}} {{.Id}}'],
                                     env=env,capture_output=True,text=True,timeout=15)
             selection=platform.stdout.strip().split()
-            if platform.returncode!=0 or len(selection)!=2 or selection[0]!=spec.platform or not re.fullmatch(r'sha256:[a-f0-9]{64}',selection[1]):
+            if platform.returncode!=0 or len(selection)!=2 or selection[0]!=spec.platform or selection[1]!=spec.image:
                 raise RuntimeError('The reviewed cached platform is unavailable; no fallback or image pull was used')
             browser=spec.isolation_profile=='chromium-userns-v1'
             postgres=spec.isolation_profile=='postgresql-local-v1'

package/server/terraform_routes.py

@@ -71,7 +71,8 @@ def validate(payload):
         env = {'PATH': os.getenv('PATH', ''), 'HOME': folder, 'TMPDIR': folder, 'TF_IN_AUTOMATION': '1', 'CHECKPOINT_DISABLE': '1', 'AWS_EC2_METADATA_DISABLED': 'true'}
         cache=Path(setting('PROVIDER_CACHE') or ROOT/'.local/provider-cache')
         if cache.is_dir():
-            env['TF_PLUGIN_CACHE_DIR']=str(cache)
+            writable_cache=Path(folder)/'.provider-cache';writable_cache.mkdir()
+            env['TF_PLUGIN_CACHE_DIR']=str(writable_cache)
             mirror=Path(folder)/'.atmem-provider-mirror.tfrc'
             mirror.write_text('provider_installation { filesystem_mirror { path = '+json.dumps(str(cache.resolve()))+' } }\n')
             env['TF_CLI_CONFIG_FILE']=str(mirror)

package/src/EngineeringPanel.jsx

@@ -1,6 +1,6 @@
 import {BrainActivity} from './BrainActivity.jsx';
 import React,{useEffect,useRef,useState} from 'react';
-import {engineeringCall,engineeringConversation,mergeEngineeringEvents} from './engineering-client.mjs';
+import {engineeringCall,engineeringConversation,mergeEngineeringEvents,engineeringSelectionSupported} from './engineering-client.mjs';
 import './engineering.css';
 import {ArtifactChecks} from './ArtifactChecks.jsx';
 import {verifyArtifactWork} from './artifact-work.mjs';
@@ -60,7 +60,7 @@ export function EngineeringPanel({projectId,session,connection,saveProject,onCon
     try{await operation();}catch(e){if(live.current)setError(e.message);}finally{actionLock.current=false;if(live.current)setBusy(false);}
   }
   useEffect(()=>{onBusyChange?.(busy||loading||['running','starting'].includes(job?.state));return()=>onBusyChange?.(false);},[busy,loading,job?.state,onBusyChange]);
-  const exactSelection=connection?.provider==='codex'&&connection.model&&connection.model!=='default'&&connection.effort;
+  const exactSelection=engineeringSelectionSupported(session,connection);
   const running=job?.state==='running',uncertain=job?.state==='starting';
   const lastProgress=events.filter(event=>event.runId===job?.run&&['progress','message'].includes(event.kind)).at(-1);
   const [lastReceived,setLastReceived]=useState(null),[now,setNow]=useState(Date.now());

package/src/ImplementationDelivery.jsx

@@ -3,10 +3,10 @@ import {FinalChecklist} from './FinalChecklist.jsx';
 import {BrainActivity} from './BrainActivity.jsx';
 import {completeProjectZip} from './final-package.mjs';
 import React,{useEffect,useState,useRef} from 'react';
-import {engineeringCall,verifiedHandoffDownload} from './engineering-client.mjs';
+import {engineeringCall,verifiedHandoffDownload,engineeringDeliveryNeedsRefresh} from './engineering-client.mjs';
 import {ArtifactChecks} from './ArtifactChecks.jsx';
 
-export function ImplementationDelivery({project,session,onBuild,onSave,contextBusy=false,designBundle,onDesignDownload,onDownloaded,checkReceipt,onExplore,onNavigate}){
+export function ImplementationDelivery({project,session,workStatus,onBuild,onSave,contextBusy=false,designBundle,onDesignDownload,onDownloaded,checkReceipt,onExplore,onNavigate}){
  const [orcaResult,setOrcaResult]=useState(null);
  const projectRef=useRef(project);projectRef.current=project;
  const [prepared,setPrepared]=useState(null),[preparing,setPreparing]=useState(false);
@@ -18,7 +18,11 @@ export function ImplementationDelivery({project,session,onBuild,onSave,contextBu
    if(!controller.signal.aborted)setLoaded({project,report:value});
   }).catch(e=>{if(!controller.signal.aborted){if(e.status===404&&e.message.startsWith('Save or restore this project'))setLoaded({project,report:{artifact:null}});else setError(e.message);}});
   return()=>controller.abort();
- },[project,session.token,retry]);
+ },[project,session.token,retry,workStatus?.run,workStatus?.state,workStatus?.last_status]);
+ useEffect(()=>{
+  if(!engineeringDeliveryNeedsRefresh(report,workStatus))return;
+  const timer=setTimeout(()=>setRetry(value=>value+1),2500);return()=>clearTimeout(timer);
+ },[report,workStatus?.run,workStatus?.state]);
  useEffect(()=>{
   if(!report?.canPackage||designBundle?.project!==project){setPrepared(null);return;}
   let stopped=false;const controller=new AbortController();setPreparing(true);setError('');

package/src/OutputsView.jsx

@@ -37,7 +37,7 @@ function Preview({name,content}){
  if(name.endsWith('.md'))return <Document text={content}/>;
  return <CodePreview className="output-code" content={content} name={name}/>;
 }
-export function OutputsView({project,run,environment,session,onDownload,onBack,emulation,onDiscuss,discussionBusy,onBuild,onSave,onDownloaded,onReview,checkReceipt,onNavigate}){
+export function OutputsView({project,run,environment,session,workStatus,onDownload,onBack,emulation,onDiscuss,discussionBusy,onBuild,onSave,onDownloaded,onReview,checkReceipt,onNavigate}){
  const [exploration,setExploration]=useState(null);
  const projectRef=useRef(project);projectRef.current=project;
  const [packing,setPacking]=useState(false);
@@ -60,7 +60,7 @@ export function OutputsView({project,run,environment,session,onDownload,onBack,e
   <header className="doc-head"><h2>Delivery</h2></header>
   <button className="link" onClick={onReview||onBack}>Back to Review</button>
   {isReadyExample(project)&&<ReadyExampleChecklist/>}
-  {session?.engineeringEnabled&&(isReadyExample(project)?<details><summary>Checks for your edited project</summary><ImplementationDelivery key={project.id} project={project} session={session} onBuild={onBuild} onSave={onSave} contextBusy={discussionBusy} designBundle={loading?null:bundle} onDesignDownload={onDownload} onDownloaded={onDownloaded} checkReceipt={checkReceipt} onExplore={setExploration} onNavigate={onNavigate}/></details>:<ImplementationDelivery key={project.id} project={project} session={session} onBuild={onBuild} onSave={onSave} contextBusy={discussionBusy} designBundle={loading?null:bundle} onDesignDownload={onDownload} onDownloaded={onDownloaded} checkReceipt={checkReceipt} onExplore={setExploration} onNavigate={onNavigate}/>)}
+  {session?.engineeringEnabled&&(isReadyExample(project)?<details><summary>Checks for your edited project</summary><ImplementationDelivery key={project.id} project={project} session={session} workStatus={workStatus} onBuild={onBuild} onSave={onSave} contextBusy={discussionBusy} designBundle={loading?null:bundle} onDesignDownload={onDownload} onDownloaded={onDownloaded} checkReceipt={checkReceipt} onExplore={setExploration} onNavigate={onNavigate}/></details>:<ImplementationDelivery key={project.id} project={project} session={session} workStatus={workStatus} onBuild={onBuild} onSave={onSave} contextBusy={discussionBusy} designBundle={loading?null:bundle} onDesignDownload={onDownload} onDownloaded={onDownloaded} checkReceipt={checkReceipt} onExplore={setExploration} onNavigate={onNavigate}/>)}
   <section aria-label="Project file explorer"><h3>Explore files</h3>
 
   {!session?.engineeringEnabled&&<><p>Design package · no implementation generated.</p><button className="btn" disabled={!bundle||loading||!!error||packing} onClick={downloadDesign}>{packing?'Preparing ZIP…':'Download project ZIP'}</button></>}

package/src/ReadyExample.jsx

@@ -3,7 +3,7 @@ import receipt from './reference-example/receipt.json';
 export function ReadyExampleDownload({compact=false}){
  const [busy,setBusy]=useState(false),[error,setError]=useState('');
  async function download(){setBusy(true);setError('');try{
-  const response=await fetch(receipt.url);if(!response.ok)throw Error('Example download unavailable. Retry.');
+  const response=await fetch(import.meta.env.BASE_URL+receipt.url.replace(/^\//,''));if(!response.ok)throw Error('Example download unavailable. Retry.');
   const bytes=await response.arrayBuffer();const hash=[...new Uint8Array(await crypto.subtle.digest('SHA-256',bytes))].map(n=>n.toString(16).padStart(2,'0')).join('');
   if(hash!==receipt.sha256)throw Error('Example integrity check failed. Retry.');
   const url=URL.createObjectURL(new Blob([bytes],{type:'application/zip'})),link=document.createElement('a');link.href=url;link.download='atmem-ai-complete-example.zip';link.click();setTimeout(()=>URL.revokeObjectURL(url),60000);

package/src/chat-composer.css

@@ -0,0 +1,62 @@
+/* Keep the conversation and the place to reply visibly distinct. */
+.chat { container-type:inline-size; }
+.chat > .chat-body { display:flex;flex:1;flex-direction:column;min-height:0;min-width:0; }
+.chat-history { position:relative;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden; }
+.chat-history-label { margin:8px 16px 0;font-size:12px;font-weight:600;color:var(--ink-2); }
+.chat-history .messages { min-height:0;padding-top:10px; }
+.chat-compose-pane { overflow-anchor:none;display:flex;flex-direction:column;flex-shrink:0;min-width:0; }
+.chat-history .chat-jump-latest { bottom:12px;right:16px; }
+.chat .composer { border:2px solid var(--color-brand-text);background:var(--paper);padding:10px;gap:6px; }
+.composer-label { display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.4; }
+.chat .composer textarea { box-sizing:border-box;min-height:76px;padding:8px;background:var(--board);border-radius:8px; }
+.chat .composer textarea:focus { outline:2px solid var(--color-brand-text);outline-offset:-2px; }
+.chat .composer-actions .send { display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:70px;padding:0 10px;border-radius:10px;background:var(--color-brand);color:var(--color-brand-ink);font-weight:700; }
+.chat .composer-actions .send:disabled { background:var(--line);color:var(--ink-2); }
+/* A wide chat drawer can use the same two-column conversation/reply layout. */
+@container (min-width:600px) {
+ .chat-body { display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr); }
+ .chat-compose-pane { min-height:0;overflow:auto;padding-top:8px;border-left:1px solid var(--line); }
+ .chat-compose-pane .composer { order:-1;position:sticky;top:8px;flex-shrink:0;z-index:1; }
+}
+@media (max-width:900px) {
+ .app:not(.chat-closed) { height:100dvh;min-height:0;grid-template-rows:auto auto minmax(0,2fr) minmax(300px,3fr);overflow:hidden; }
+ .app:not(.chat-closed) .chat { height:auto;min-height:0;overflow:hidden; }
+ .chat > .chat-body { display:grid;grid-template-columns:minmax(0,1fr) minmax(148px,.9fr); }
+ .chat-compose-pane { min-height:0;overflow:auto;border-left:1px solid var(--line);padding:8px 0 0; }
+ .chat-compose-pane .composer { order:-1;position:sticky;top:8px;flex-shrink:0;z-index:1;margin:0 8px 8px;padding:8px; }
+ .chat-head { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:8px 12px; }
+ .chat-heading-row { grid-column:1/-1; }
+ .chat-head .model { grid-column:1;grid-row:2;justify-self:start;max-width:100%; }
+ .chat-head .live-toggle { grid-column:2;grid-row:2;order:0;flex-basis:auto;white-space:nowrap; }
+ .chat .composer textarea { min-height:64px;max-height:180px;font-size:16px; }
+ .chat .composer-actions { gap:4px; }
+ .chat .composer-actions .attach-button,.chat .composer-actions .mic { width:28px;height:32px;padding:3px;flex-shrink:0; }
+ .chat .composer-actions .send { min-width:54px;padding:0 7px;font-size:12px; }
+ .chat-history-label { margin-left:12px; }
+ .board-start { top:50%;max-height:calc(100% - 24px);overflow:auto; }
+ .board-start h2 { margin-top:0;font-size:18px; }
+ .board-surface:has(.board-start) > .board-components:not([data-expanded=true]) { top:auto;bottom:8px; }
+ .chat-history .messages { padding:10px 12px; }
+ .chat .skills { flex-wrap:nowrap;overflow-x:auto;flex-shrink:0; }
+ .chat .skills > * { flex-shrink:0;white-space:nowrap; }
+ .chat-compose-pane .prompts { padding:0 8px 8px; }
+}
+@media (max-width:900px) and (max-height:600px) {
+ .app:not(.chat-closed) { grid-template-rows:auto auto minmax(0,1fr) minmax(238px,3fr); }
+ .chat .composer textarea { min-height:54px; }
+ .chat-head { padding-top:6px;padding-bottom:4px; }
+}
+
+@media (max-width:900px) and (min-height:760px) { .chat .composer textarea { min-height:88px; } }
+/* Keep navigation usable when a short window or on-screen keyboard reduces height. */
+@media (max-width:900px) and (max-height:600px) {
+ .app:not(.chat-closed) { grid-template-rows:auto auto minmax(0,1fr) minmax(280px,3fr); }
+ .unified-journey { flex-direction:row;align-items:center;padding:4px;gap:4px; }
+ .unified-journey .stage-tabs { flex:1;min-width:0;width:0;padding:4px; }
+ .unified-journey .journey-current { flex:0 1 110px;min-width:0;max-width:110px;padding:0; }
+ .unified-journey .journey-current .btn { padding:6px 8px;font-size:11px;min-height:36px; }
+ .chat-compose-pane .composer { padding:6px;gap:4px; }
+}
+/* Keep the next action on the same row as the scrolling stage tabs. */
+.unified-journey .journey-current { flex:0 0 auto;max-width:none;margin:0;padding:0; }
+.unified-journey .journey-current .btn { white-space:nowrap;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.2; }

package/src/engineering-client.mjs

@@ -1,5 +1,12 @@
 // Backend-owned jobs: no native thread IDs, host paths or model credentials.
 import {unzipSync} from 'fflate';
+export function engineeringSelectionSupported(session,connection){
+ if(!connection?.model||connection.model==='default'||!connection.effort)return false;
+ return connection.provider==='codex'||!!(session?.hosted&&connection.provider==='openrouter'&&connection.effort==='medium');
+}
+export function engineeringDeliveryNeedsRefresh(report,job){
+ return ['starting','running'].includes((job||report?.session)?.state)||!!report?.checks?.some(check=>['queued','running'].includes(check.state));
+}
 export async function engineeringCall(session, action, payload, {signal,fetcher=fetch}={}) {
   if(!session?.token)throw new Error('Connect to the session service first.');
   const response=await fetcher(`/api/engineering/${action}`,{method:'POST',signal,

package/src/hosted-workspace.mjs

@@ -0,0 +1,52 @@
+// Same-origin parent owns Firebase identity; the workspace never receives a token or provider key.
+export const HOSTED=import.meta.env?.VITE_ARCHITECT_HOSTED==='1';
+let initial=null,port=null,sequence=0;const waiting=new Map(),versions=new Map();let changeSequence=0;
+export function hostedRevision(id){return versions.get(id)||0;}
+export function noteHostedChange(projectId){const version=++changeSequence;versions.set(projectId,version);return hostedCall('changed',{projectId,version});}
+export function hostedInitial(){if(!initial)throw Error('Hosted workspace is not connected.');return initial;}
+export function hostedCall(action,payload={},signal){
+ if(!port)return Promise.reject(Error('Return to Architect and reopen your project.'));
+ if(signal?.aborted)return Promise.reject(new DOMException('Aborted','AbortError'));
+ const id=++sequence;
+ return new Promise((resolve,reject)=>{
+  const timeout=setTimeout(()=>finish(Error('The workspace request timed out. Your draft remains open.')),10*60*1000);
+  const abort=()=>{port.postMessage({type:'abort',id});finish(new DOMException('Aborted','AbortError'));};
+  function finish(error,value){clearTimeout(timeout);signal?.removeEventListener('abort',abort);waiting.delete(id);error?reject(error):resolve(value);}
+  waiting.set(id,finish);signal?.addEventListener('abort',abort,{once:true});port.postMessage({type:'request',id,action,payload});
+ });
+}
+export async function connectHostedWorkspace(){
+ if(!HOSTED)return;
+ if(window.parent===window)throw Error('Open your project from atmem.ai/architect.');
+ initial=await new Promise((resolve,reject)=>{
+  const timeout=setTimeout(()=>{window.removeEventListener('message',receive);reject(Error('Return to Architect and reopen your project.'));},15000);
+  function receive(event){
+   if(event.origin!==location.origin||event.source!==parent||event.data?.type!=='atmem.workspace.initialize'||event.ports.length!==1)return;
+   clearTimeout(timeout);window.removeEventListener('message',receive);port=event.ports[0];
+   port.onmessage=({data})=>{if(data?.type==='response')waiting.get(data.id)?.(data.error?Error(data.error):null,data.value);};port.start();resolve(event.data.initial);
+  }
+  window.addEventListener('message',receive);window.parent.postMessage({type:'atmem.workspace.ready'},location.origin);
+ });
+ // Do not leave project drafts, conversations or profile state in a shared browser's local storage.
+ const values=new Map([['atmem-architect-theme',initial.theme||'light']]);
+ const transient={getItem:key=>values.get(String(key))??null,setItem:(key,value)=>values.set(String(key),String(value)),removeItem:key=>values.delete(String(key)),clear:()=>values.clear(),key:index=>[...values.keys()][index]??null,get length(){return values.size;}};
+ Object.defineProperty(window,'localStorage',{value:transient,configurable:true});
+ const network=window.fetch.bind(window);
+ window.fetch=async(input,options={})=>{
+  const url=new URL(typeof input==='string'?input:input.url,location.href);
+  if(url.origin!==location.origin||!url.pathname.startsWith('/api/'))return network(input,options);
+  let body=null;
+  if(options.body){
+   if(typeof options.body==='string')body=JSON.parse(options.body);
+   else{
+    const bytes=new Uint8Array(options.body instanceof Blob?await options.body.arrayBuffer():options.body);
+    let binary='';for(let start=0;start<bytes.length;start+=8192)binary+=String.fromCharCode(...bytes.subarray(start,start+8192));
+    body={__workspaceBinary:btoa(binary)};
+   }
+  }
+  if(url.pathname==='/api/projects/save'&&body)body.bridgeVersion??=hostedRevision(body.id);
+  const result=await hostedCall('fetch',{path:url.pathname,method:options.method||'GET',body},options.signal);
+  const content=result.base64?Uint8Array.from(atob(result.base64),character=>character.charCodeAt(0)):result.bytes?new Uint8Array(result.bytes):JSON.stringify(result.body);
+  return new Response(content,{status:result.status,headers:result.headers||{'Content-Type':'application/json'}});
+ };
+}

package/src/journey-workspace.css

@@ -4,8 +4,9 @@
 .stage-tabs>button[aria-selected=true]{outline:2px solid var(--accent,#be5679);outline-offset:-2px;font-weight:600}
 .stage-tabs>button.stage-complete{background:#e7f4eb;color:#215d3b;border-color:#a9cdb4}
 .stage-tabs>button>span{font-size:.85em;border:1px solid currentColor;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
-.unified-journey{display:flex;flex-direction:column;align-items:stretch}
-.unified-journey .journey-current{padding:4px 14px;display:flex;gap:12px;align-items:center}
+.unified-journey{display:flex;flex-direction:row;align-items:center}
+.unified-journey .stage-tabs{width:auto;flex:0 1 auto;min-width:0;padding:2px}
+.unified-journey .journey-current{margin:0;padding:0;display:flex;flex:0 0 auto;gap:0;align-items:center}
 .unified-journey .journey-current p{margin:4px 0;flex:1}
 .project-rename{display:flex;align-items:center;min-width:0}.project-rename>svg{opacity:0}.project-rename:hover>svg,.project-rename:focus-within>svg{opacity:1}
 .bar .projects-btn{display:inline-flex;align-items:center;gap:7px;width:auto;min-width:100px;padding:7px 10px}
@@ -109,3 +110,5 @@
 .star-prompt{width:min(460px,calc(100vw - 32px));max-width:460px;border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--paper);color:var(--ink);box-shadow:0 18px 60px #0003}.star-prompt::backdrop{background:#0005}.star-prompt header,.star-prompt h2,.star-prompt-actions{display:flex;align-items:center;gap:10px}.star-prompt header{justify-content:space-between}.star-prompt h2{font-size:1.2rem}.star-prompt h2>svg{color:var(--accent);fill:var(--accent-soft)}.star-prompt p{margin:18px 0;line-height:1.5}.star-prompt-actions>a{flex:1;text-decoration:none}.star-prompt-actions>button{min-width:90px}
 
 .check-run-action{display:inline-flex;margin-left:12px;flex-shrink:0}.check-run-action>button:disabled{pointer-events:none}.check-run-action:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
+
+@media(max-width:650px){.unified-journey .stage-tabs{flex:1;min-width:0;width:0}.unified-journey .journey-current{max-width:120px}.unified-journey .journey-current>.btn{white-space:normal;padding:7px 9px;font-size:12px;min-height:36px}}

package/src/local-agent.mjs

@@ -99,7 +99,7 @@ export async function discoverLocalAgent() {
   });
   if (!response.ok) throw Error("Local sidecar unavailable");
   const session = await response.json();
-  if (!session.token || session.status !== "local-sidecar")
+  if (!session.token || !["local-sidecar","hosted-workspace"].includes(session.status))
     throw Error("Invalid local sidecar response");
   return session;
 }

package/src/main.jsx

@@ -1,3 +1,4 @@
+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';
@@ -171,6 +172,7 @@ import { zipSync, strToU8 } from "fflate";
 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 = {
@@ -257,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.
@@ -273,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());
@@ -665,14 +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 [introOpen,setIntroOpen]=useState(false),[voiceOpenRequest,setVoiceOpenRequest]=useState(0);
-  const [project, setProject] = useState(()=>new URL(location.href).searchParams.get('example')==='1'&&!projectIdFromUrl(location.href)?readyExample():readSaved());
+  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));
@@ -917,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);
@@ -1216,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));
@@ -1649,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);
@@ -1711,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);
@@ -1739,20 +1753,30 @@ function App() {
     })();
     return () => { active = false; };
   }, [session?.token]);
-  function newProject() { if(!busy&&!agentBusy&&!intake.length)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());
   }
-  function openReadyExample(){
+  async function openReadyExample(){
     if(busy||agentBusy||intake.length)return;
-    const example=readyExample();example.id=crypto.randomUUID();switchTo(example);setModal(null);
+    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) {
@@ -1868,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"
@@ -1879,7 +1903,8 @@ function App() {
           /><PencilRuler size={14} aria-hidden="true"/></label>
         </nav>
         <div className="bar-actions">
-          {isReadyExample(project)&&<><ReadyExampleDownload compact/><button className="btn" onClick={newProject} disabled={busy||agentBusy}>Create new project</button></>}
+          {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"
@@ -1915,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>
@@ -2197,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>}
@@ -2208,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) && (
@@ -2241,10 +2266,11 @@ 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>}
@@ -2292,6 +2318,8 @@ 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=>{
@@ -2306,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>
                 )}
@@ -2349,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 && (
@@ -2371,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); }}
@@ -2401,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 hideTrigger openRequest={voiceOpenRequest} 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);
           }}/>}
@@ -2413,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">
@@ -2494,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>
               </>
             ) : (
               <>
@@ -2509,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

@@ -8,3 +8,17 @@
 @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}}