@atmem/architect 0.2.0 → 0.2.2

package/src/ProjectChecks.jsx

@@ -1,43 +1,57 @@
-import React,{useEffect,useMemo,useRef,useState}from'react';
+import React,{useEffect,useMemo,useRef,useState,useId}from'react';
+import{postLargeJson}from'./large-request.mjs';
 import{BrainActivity}from'./BrainActivity.jsx';
 import{engineeringCall}from'./engineering-client.mjs';
 import{terraformSketch}from'./terraform.mjs';
 import{verifiedReceipt}from'./validation-receipt.mjs';
-export function ProjectChecks({project,environment,session,onReceipt,onBusy,receipt}){
- const [report,setReport]=useState(null),[catalog,setCatalog]=useState([]),[checks,setChecks]=useState([]),[result,setResult]=useState(null),[working,setWorking]=useState(false),[error,setError]=useState('');
+export function ProjectChecks({project,environment,session,onReceipt,onBusy,receipt,generationPending=false}){
+ const [report,setReport]=useState(null),[catalogReady,setCatalogReady]=useState(false),[catalog,setCatalog]=useState([]),[checks,setChecks]=useState([]),[result,setResult]=useState(null),[working,setWorking]=useState(false),[error,setError]=useState('');
+ const hintId=useId();
+ const [uploadProgress,setUploadProgress]=useState(null);
  const active=useRef(null),locked=useRef(false),files=useMemo(()=>terraformSketch(project,environment),[project,environment]),key=JSON.stringify(files);
  useEffect(()=>{let stopped=false;setResult(null);active.current?.abort();let previous=receipt;try{previous=previous||JSON.parse(localStorage.getItem('atmem-tf-receipt:'+project.id)||'null');}catch{}void verifiedReceipt(files,previous).then(value=>{if(!stopped){setResult(value);onReceipt?.(value);}});return()=>{stopped=true;active.current?.abort();};},[key]);
  useEffect(()=>{
+  setReport(null);setCatalog([]);setChecks([]);setCatalogReady(false);
   if(!session?.engineeringEnabled)return;
   let stopped=false,timer;const controller=new AbortController();
   async function poll(){try{
    const value=await engineeringCall(session,'delivery',{projectId:project.id},{signal:controller.signal});if(stopped)return;setReport(value);
-   if(value.artifact){const payload={projectId:project.id,sessionId:value.session.id};const [definitions,results]=await Promise.all([engineeringCall(session,'validators',payload,{signal:controller.signal}),engineeringCall(session,'validation/list',{...payload,artifactId:value.artifact.id},{signal:controller.signal})]);if(!stopped){setCatalog(definitions.validators||[]);setChecks(results.checks||[]);}}
+   if(value.artifact){const payload={projectId:project.id,sessionId:value.session.id};const [definitions,results]=await Promise.all([engineeringCall(session,'validators',payload,{signal:controller.signal}),engineeringCall(session,'validation/list',{...payload,artifactId:value.artifact.id},{signal:controller.signal})]);if(!stopped){setCatalog(definitions.validators||[]);setChecks(results.checks||[]);setCatalogReady(true);}}else{setCatalog([]);setChecks([]);setCatalogReady(false);}
   }catch(e){if(!stopped&&e.name!=='AbortError'&&e.status!==404)setError(e.message);}finally{if(!stopped)timer=setTimeout(poll,2000);}}
   void poll();return()=>{stopped=true;clearTimeout(timer);controller.abort();};
  },[project.id,session?.token,session?.engineeringEnabled]);
  const running=checks.some(c=>c.state!=='finished'&&c.state!=='recovery_required');
- useEffect(()=>{onBusy?.(working||running);return()=>onBusy?.(false);},[working,running,onBusy]);
- async function run(){
-  if(locked.current)return;locked.current=true;setWorking(true);setError('');const controller=new AbortController();active.current=controller;
+ useEffect(()=>{onBusy?.(!!working||running);return()=>onBusy?.(false);},[working,running,onBusy]);
+ const available=catalog.filter(v=>v.available!==false);
+ async function run(kind){
+  if(generationPending||locked.current||!session?.token||kind==='application'&&(!report?.artifact||!available.length))return;
+  locked.current=true;setWorking(kind);setError('');const controller=new AbortController();active.current=controller;
   try{
-   const jobs=[];
-   if(report?.artifact)for(const validator of catalog.filter(v=>v.available!==false)){
-    const previous=checks.filter(c=>c.validatorId===validator.id&&c.contractSha256===validator.contractSha256).at(-1);
-    if(previous&&previous.state!=='finished')continue;
-    jobs.push(engineeringCall(session,'validation/start',{projectId:project.id,sessionId:report.session.id,artifactId:report.artifact.id,validatorId:validator.id,retry:!!previous},{signal:controller.signal}));
+   if(kind==='application'){
+    const payload={projectId:project.id,sessionId:report.session.id,artifactId:report.artifact.id};
+    await Promise.all(available.map(validator=>{
+     const previous=checks.filter(c=>c.validatorId===validator.id&&c.contractSha256===validator.contractSha256).at(-1);
+     if(previous&&previous.state!=='finished')return;
+     return engineeringCall(session,'validation/start',{...payload,validatorId:validator.id,retry:!!previous},{signal:controller.signal});
+    }));
+    const results=await engineeringCall(session,'validation/list',payload,{signal:controller.signal});
+    if(!controller.signal.aborted)setChecks(results.checks||[]);
+   }else{
+    const value=await postLargeJson('/api/terraform/validate',{project,environment},{token:session.token,signal:AbortSignal.any([controller.signal,AbortSignal.timeout(500000)]),onProgress:setUploadProgress});
+    const verified=await verifiedReceipt(files,value);if(!controller.signal.aborted){setResult(value);onReceipt?.(verified);try{if(verified)localStorage.setItem('atmem-tf-receipt:'+project.id,JSON.stringify(verified));else localStorage.removeItem('atmem-tf-receipt:'+project.id);}catch{}}
    }
-   const outcomesPending=Promise.allSettled(jobs);
-   const response=await fetch('/api/terraform/validate',{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${session.token}`},body:JSON.stringify({project,environment}),signal:AbortSignal.any([controller.signal,AbortSignal.timeout(500000)])});const value=await response.json();
-   if(!response.ok)throw Error(value.detail||'Terraform checks could not start.');
-   const verified=await verifiedReceipt(files,value);if(!controller.signal.aborted){setResult(value);onReceipt?.(verified);try{if(verified)localStorage.setItem('atmem-tf-receipt:'+project.id,JSON.stringify(verified));else localStorage.removeItem('atmem-tf-receipt:'+project.id);}catch{}}
-   const outcomes=await outcomesPending;const failed=outcomes.find(o=>o.status==='rejected');if(failed)throw failed.reason;
-  }catch(e){if(!controller.signal.aborted){setResult({status:'failed',message:e.message});setError(e.message);}}
-  finally{locked.current=false;setWorking(false);}
+  }catch(e){if(!controller.signal.aborted){setError(e.message);}}
+  finally{locked.current=false;setWorking(false);setUploadProgress(null);}
  }
  const label=status=>({passed:'Passed',failed:'Failed',incomplete:'Incomplete',unavailable:'Not run'}[status]||'Not run');
- return <section className="project-checks" aria-label="Project checks"><div className="section-action"><h3>Checks</h3><button className="btn" disabled={!session?.token||working||running} onClick={run}>{working||running?<><BrainActivity size={22}/> Checking…</>:'Run checks'}</button></div>
- <ul className="check-rows"><li><span>Terraform</span><strong className={result?.status==='passed'?'check-complete':'check-pending'}>{working?'Running…':label(result?.status)}</strong></li>{checks.map(c=><li key={c.id}><span>{c.label}</span><strong className={c.result?.status==='passed'?'check-complete':'check-pending'}>{c.state==='finished'?label(c.result?.status):c.state==='recovery_required'?'Needs recovery':'Running…'}</strong></li>)}{!checks.length&&<li><span>Application checks</span><strong className="check-pending">{report?.artifact?'Not configured':'Generate files first'}</strong></li>}</ul>
+ const terraformHint=generationPending?'Project files are being generated. Wait until generation finishes.':'Validate the Terraform draft from your saved design.';
+ const applicationHint=generationPending?'Project files are being generated. Wait until generation finishes.':!report?.artifact?'Generate project files first.':!catalogReady?'Loading available application tests.':!available.length?'No application tests are configured.':'Run the generated application tests.';
+ const applicationStatus=generationPending?'Generating files…':!report?.artifact?'Generate files first':working==='application'||running?'Running…':checks.length?checks.every(c=>c.state==='finished'&&c.result?.status==='passed')?'Passed':'Needs attention':!catalogReady?'Loading…':available.length?'Not run':'Not configured';
+ return <section className="project-checks" aria-label="Project checks"><div className="section-action"><h3>Checks</h3></div>
+ <ul className="check-rows">
+  <li><span>Terraform validation</span><strong className={result?.status==='passed'?'check-complete':'check-pending'}>{working==='terraform'?uploadProgress!==null?`Uploading ${uploadProgress}%`:'Running…':label(result?.status)}</strong><span className="check-run-action" title={terraformHint} tabIndex={generationPending?0:undefined} aria-label={terraformHint}><button className="btn" aria-label="Run Terraform validation" title={terraformHint} disabled={generationPending||!session?.token||!!working||running} onClick={()=>run('terraform')}>{working==='terraform'?<><BrainActivity size={18}/> Running…</>:'Run'}</button></span></li>
+  <li><span>Application tests</span><strong id={hintId} className={applicationStatus==='Passed'?'check-complete':'check-pending'}>{applicationStatus}</strong><span className="check-run-action" title={applicationHint} tabIndex={generationPending||!report?.artifact||!available.length?0:undefined} aria-label={applicationHint}><button className="btn" aria-label="Run application tests" aria-describedby={hintId} title={applicationHint} disabled={generationPending||!session?.token||!!working||running||!report?.artifact||!available.length} onClick={()=>run('application')}>{working==='application'||running?<><BrainActivity size={18}/> Running…</>:'Run'}</button></span></li>
+ </ul>
  {(result||checks.length>0)&&<details><summary>Check details</summary>{result&&<><p>{result.message}</p>{result.checks?.map((c,i)=><details key={i}><summary>{c.name} · {c.passed?'Passed':'Failed'}</summary><pre>{c.output}</pre></details>)}</>}{checks.map(c=><details key={c.id}><summary>{c.label}</summary><pre>{c.result?.output||c.result?.reason||c.state}</pre></details>)}</details>}
  {error&&<p role="alert">{error}</p>}
  </section>;

package/src/ReadyExample.jsx

@@ -0,0 +1,16 @@
+import React,{useState} from 'react';
+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 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);
+ }catch(e){setError(e.message)}finally{setBusy(false)}}
+ return <><button type="button" className={compact?'btn ready-download':'btn primary'} onClick={download} disabled={busy}>{busy?'Preparing…':compact?'Download example ZIP':'Download complete example'}</button>{error&&<p role="alert">{error}</p>}</>;
+}
+export function ReadyExampleChecklist(){
+ const rows=[['Requirements','Recorded'],['Cloud','AWS'],['Data country','Australia'],['Cloud region','Sydney'],['Cost worksheet','USD 7.56/month · sample'],['Implementation','Source + built runtime'],['Application checks','13 local tests passed'],['Terraform checks','Validated · 2 mock plans passed']];
+ return <section className="final-checklist ready-reference" aria-label="Prepared example checklist"><h3>Complete reference example</h3><p>These checks apply to the bundled example ZIP. Your edited project has separate checks.</p><ul>{rows.map(([name,value])=><li key={name}><span className="check-complete">✓</span><span>{name}</span><strong>{value}</strong></li>)}</ul><ReadyExampleDownload/><details><summary>Evidence and scope</summary><p>Local fixtures and mocked AWS. Live deployment and real tenant integration have not run.</p><p>Illustrative AWS usage; assumptions and official price snapshots are included.</p></details></section>;
+}

package/src/StarPrompt.jsx

@@ -0,0 +1,26 @@
+import React,{useEffect,useRef}from'react';
+import{Star,X}from'lucide-react';
+export const STAR_URL='https://github.com/aetna000/atmem-ai-architect';
+const KEY='atmem-architect-star-prompt-v1',SNOOZE=30*24*60*60*1000;
+export function shouldOfferStar(value,now=Date.now()){
+ if(!value)return true;
+ try{const record=JSON.parse(value);return record.choice!=='opened'&&(!Number.isFinite(record.after)||record.after<=now);}catch{return true;}
+}
+export function StarPrompt({offer=0}){
+ const dialog=useRef(null),choice=useRef('later');
+ function dismiss(value='later'){
+  choice.current=value;
+  try{localStorage.setItem(KEY,JSON.stringify({choice:value,after:Date.now()+SNOOZE}));}catch{}
+  dialog.current?.close();
+ }
+ useEffect(()=>{
+  if(!offer)return;
+  let allowed=true;try{allowed=shouldOfferStar(localStorage.getItem(KEY));}catch{}
+  if(allowed&&!dialog.current.open){choice.current='later';dialog.current.showModal();}
+ },[offer]);
+ return <dialog ref={dialog} className="star-prompt" aria-labelledby="star-prompt-title" onCancel={event=>{event.preventDefault();dismiss();}}>
+  <header><h2 id="star-prompt-title"><Star size={22} aria-hidden="true"/> Enjoying Architect?</h2><button type="button" className="icon" aria-label="Close star invitation" onClick={()=>dismiss()}><X size={20}/></button></header>
+  <p>If Architect helped, a GitHub star helps others find it.</p>
+  <div className="star-prompt-actions"><a className="btn primary" href={STAR_URL} target="_blank" rel="noopener noreferrer" onClick={()=>dismiss('opened')}><Star size={18} aria-hidden="true"/> Star on GitHub</a><button type="button" className="btn" onClick={()=>dismiss()}>Later</button></div>
+ </dialog>;
+}

package/src/engineering.css

@@ -29,3 +29,13 @@
 .architecture-work > ul { max-height: 24rem; overflow: auto; padding-left: 1.3rem; }
 .architecture-work pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
 .architecture-work small { display: block; }
+
+.generation-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line, #e1e6ee); margin: 1rem 0 .5rem; }
+.generation-progress > span { display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--action, #f3a2b4); animation: generation-sweep 1.8s ease-in-out infinite; }
+@keyframes generation-sweep { from { transform: translateX(-80%); } to { transform: translateX(266%); } }
+@media (prefers-reduced-motion: reduce) { .generation-progress > span { animation: none; width: 100%; opacity: .65; } }
+
+.engineering-progress-count { display: inline-block; font-variant-numeric: tabular-nums; transform-origin: center; }
+.engineering-progress-count.updated { animation: progress-count-pulse 360ms ease-out; }
+@keyframes progress-count-pulse { 0% { opacity: .55; transform: scale(.92); } 45% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } }
+@media (prefers-reduced-motion: reduce) { .engineering-progress-count.updated { animation: none; } }

package/src/journey-workspace.css

@@ -104,3 +104,8 @@
 .memory-modal{height:auto!important;max-height:88vh!important}.memory-profile-bar input,.memory-toolbar input,.memory-toolbar select,.memory-preference-form input,.memory-preference-form select{font:inherit;font-size:.85rem;min-height:36px;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}.memory-table th:last-child{width:84px;white-space:nowrap}.memory-table td:last-child{white-space:nowrap}.memory-table th:nth-child(4){width:90px}.memory-table th:nth-child(5){width:130px}.memory-table th:nth-child(3){width:84px}.memory-toolbar>strong{color:var(--muted);font-weight:500}.memory-pagination .btn{min-height:32px}.memory-record-detail .memory-table{table-layout:auto}.memory-table .memory-content:hover{text-decoration:underline;text-underline-offset:3px}
 
 .location-region-form{display:flex;align-items:flex-end;gap:12px}.location-region-form label{display:flex;flex-direction:column;gap:6px}.location-region-form input{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
+
+.final-checklist li>button:not(:disabled),.final-checklist li>button:not(:disabled) *{cursor:pointer}.final-checklist[aria-busy="true"] li>button,.final-checklist[aria-busy="true"] li>button *{cursor:wait}.final-checklist li>button:disabled{opacity:1}.checklist-label{display:flex;flex-direction:column;gap:4px;min-width:0}.checklist-label small{font-size:.75rem;color:var(--muted);font-weight:400;overflow-wrap:anywhere}.checklist-loading{font-size:.85rem;color:var(--muted)}
+.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}

package/src/large-request.mjs

@@ -0,0 +1,25 @@
+// Preserve the entire JSON payload; chunk transport changes no project content.
+export async function postLargeJson(url,payload,{token,signal,onProgress,fetcher=fetch}={}){
+ const data=new TextEncoder().encode(JSON.stringify(payload));
+ if(data.length>64*1024*1024)throw Error('Project exceeds the 64 MiB validation upload limit.');
+ const post=async(path,value,requestSignal=signal)=>{
+  const response=await fetcher(path,{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${token}`},body:JSON.stringify(value),signal:requestSignal});
+  const result=await response.json();if(!response.ok)throw Error(result.detail||'Validation request could not start.');return result;
+ };
+ if(data.length<=192000)return post(url,payload);
+ const sha256=[...new Uint8Array(await crypto.subtle.digest('SHA-256',data))].map(x=>x.toString(16).padStart(2,'0')).join('');
+ const {uploadId,chunkBytes}=await post('/api/terraform/uploads/start',{bytes:data.length,sha256});
+ try{
+  if(chunkBytes!==131072)throw Error('The upload service returned an unsupported chunk size.');
+  for(let offset=0,index=0;offset<data.length;offset+=chunkBytes,index++){
+   const chunk=data.subarray(offset,offset+chunkBytes);let text='';
+   for(let i=0;i<chunk.length;i+=8192)text+=String.fromCharCode(...chunk.subarray(i,i+8192));
+   await post('/api/terraform/uploads/chunk',{uploadId,index,data:btoa(text)});
+   onProgress?.(Math.round(Math.min(offset+chunkBytes,data.length)/data.length*100));
+  }
+  onProgress?.(null);
+  return await post(url+'-upload',{uploadId});
+ }finally{
+  await post('/api/terraform/uploads/cancel',{uploadId},AbortSignal.timeout(5000)).catch(()=>{});
+ }
+}

package/src/main.jsx

@@ -1,3 +1,7 @@
+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';
 import {InlineNote} from './HelpNote.jsx';
 import {ProjectChecks} from './ProjectChecks.jsx';
@@ -99,6 +103,7 @@ import {
   Rocket,
   BrainCircuit,
   Waypoints,
+  Volume2,
   Mic,
   Square,
   Eraser,
@@ -165,6 +170,7 @@ 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';
 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 = {
@@ -644,6 +650,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?`,
@@ -663,7 +670,9 @@ 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 [project, setProject] = useState(readSaved);
+  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 projectRef = useRef(project);
   projectRef.current = project;
   const [initialCanvasView] = useState(()=>readCanvasView(project));
@@ -695,7 +704,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),
@@ -749,7 +758,8 @@ function App() {
   const pricingKey=pricingSignature(project);
   async function refreshEstimate(selected){
     if(!session?.token)return;
-    const requested=selected.estimate?.projectSize?selected:setProjectSize(selected,'small');
+    const resolved=prefillAcceptedSettings(selected);
+    const requested=resolved.estimate?.projectSize?resolved:setProjectSize(resolved,'small');
     if(requested!==selected)updateEngagement(requested);
     const request=++pricingRequest.current;pricingAttempt.current.add(pricingSignature(requested));
     const baseline=JSON.stringify([requested.estimate?.prices,requested.estimate?.details]);
@@ -778,6 +788,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);
@@ -1578,15 +1594,17 @@ function App() {
   const exportFiles = (files, suffix) => {
     download(zipSync(Object.fromEntries(Object.entries(files).map(([name, content]) => [name, typeof content === "string" ? strToU8(content) : content]))), `${slug}-r${project.revision}-${suffix}.zip`, "application/zip");
   };
-  const downloadBundle = bundle => {
+  const downloadBundle = async bundle => {
+    bundle=await(bundle.prepare?.()||bundle);
+    if(bundle.project!==projectRef.current)throw Error('Design changed while preparing files. Download again.');
     download(zipSync(Object.fromEntries(Object.entries(bundle.files).map(([name,content])=>[name,typeof content === "string"?strToU8(content):content]))),bundle.filename,"application/zip");
     if(bundle.project?.id===projectRef.current.id)updateEngagement(acknowledgeStage(projectRef.current,'delivery'));
-    notify("ZIP downloaded.");
+    notify("ZIP downloaded.");setStarOffer(value=>value+1);
   };
   const exportPack = async () => {
     try {
       notify("Preparing documents and diagram exports…");
-      downloadBundle(await outputBundle(project,run,environment));
+      await downloadBundle(await outputBundle(project,run,environment));
     } catch(e) { notify(e.message); }
   };
   const exportTerraform = async (validation = null) => {
@@ -1661,6 +1679,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;
@@ -1719,8 +1739,14 @@ function App() {
     })();
     return () => { active = false; };
   }, [session?.token]);
-  function newProject() {
-    setModal("start-over");
+  function newProject() { if(!busy&&!agentBusy&&!intake.length)setModal("start-over"); }
+  function createOwnProject(){
+    switchTo(validateImport(emptyProject()));setModal(connection?null:'connections');
+    requestAnimationFrame(()=>document.querySelector('input[aria-label="Project name"]')?.focus());
+  }
+  function openReadyExample(){
+    if(busy||agentBusy||intake.length)return;
+    const example=readyExample();example.id=crypto.randomUUID();switchTo(example);setModal(null);
   }
   async function binProject(id) {
     try {
@@ -1834,7 +1860,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 />
@@ -1853,6 +1879,7 @@ 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></>}
           {storageError && <span className="warn-text">Not saved</span>}
           <button
             className="icon"
@@ -1877,6 +1904,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>
@@ -1887,6 +1917,7 @@ function App() {
             <hr />
             <button role="menuitem" onClick={() => setModal("connections")}><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>
         )}
       </header>
@@ -1913,7 +1944,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}
@@ -1979,8 +2010,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} />
@@ -2026,8 +2057,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>
               </>
             )}
@@ -2164,12 +2195,12 @@ function App() {
         <header className="review-intro"><h2>Review</h2></header>
         <div className="review-design-status"><ShieldCheck size={18}/><span>{findings.filter(f=>f.status==='open').length} design items</span><button className="icon" aria-label="Open design checks in specification" title="Specification" onClick={()=>visitJourney('scope')}><Code2 size={16}/></button></div>
         <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} 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'});}}} />}
+        {["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&&<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 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.complete?{...next,extensions:{...next.extensions,journey:{...next.extensions.journey,estimate:journey(next).keys.estimate}}}:next);visitJourney('delivery');}}>Complete →</button></footer>}
+        {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>}
         </div>
 
 
@@ -2177,7 +2208,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={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);requestAnimationFrame(()=>requestAnimationFrame(()=>{const element=document.querySelector(selector);if(element){element.setAttribute('tabindex','-1');element.focus({preventScroll:true});element.scrollIntoView({block:'start'});}}));}} checkReceipt={checkReceipt} onDownloaded={()=>updateEngagement(acknowledgeStage(projectRef.current,'delivery'))} 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 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) && (
@@ -2192,7 +2223,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} />
@@ -2214,6 +2245,10 @@ function App() {
               <span className={`led ${connection && session ? "on" : ""}`} />
               {connection ? `${connection.model}${connection.effort ? ` · ${EFFORT_LABEL[connection.effort] || connection.effort}` : ""}` : "Connect a model"}
             </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>
@@ -2263,6 +2298,7 @@ function App() {
               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}`}>
@@ -2324,7 +2360,7 @@ function App() {
               </button>
             ))}
           </div>
-          {(agentBusy||generationPending||['starting','running'].includes(engineeringStatus?.state)||pricingState.busy||checking)&&<div className="chat-working-status" role="status" aria-live="polite"><BrainActivity size={26}/><span>{agentBusy?architectAction:generationPending?'Starting project generation…':['starting','running'].includes(engineeringStatus?.state)?'Generating project files…':checking?'Running checks…':'Calculating costs…'}</span></div>}
+          {(agentBusy||generationPending||['starting','running'].includes(engineeringStatus?.state)||pricingState.busy||checking)&&<div className="chat-working-status" role="status" aria-live="polite"><BrainActivity size={26}/><span>{agentBusy?architectAction:generationPending?'Generating project files…':['starting','running'].includes(engineeringStatus?.state)?'Generating project files…':checking?'Running checks…':'Calculating costs…'}</span></div>}
           {readingAttachments&&<p className="attachment-status" role="status"><BrainActivity/> Reading files…</p>}
           {attachmentError&&<p className="attachment-status" role="alert">{attachmentError}</p>}
           {!!attachments.length&&<div className="attachment-tray" aria-label="Attachments ready to send">{attachments.map(a=><div className="attachment-chip" key={a.id}>{a.data&&a.mime.startsWith('image/')?<img src={`data:${a.mime};base64,${a.data}`} alt=""/>:<Paperclip size={16}/>}<span>{a.name}<small>{!a.data?'Original missing · attach again':a.mime.startsWith('image/')?'Image':a.mime==='application/pdf'||a.mime.includes('wordprocessingml')?'Text will be extracted; embedded images omitted':'Document text'}</small></span><button className="icon" aria-label={`Remove ${a.name}`} onClick={()=>setAttachments(list=>list.filter(item=>item.id!==a.id))}><X size={14}/></button></div>)}<p>Sent to your selected architect with this message. Original files are not stored in project files.</p></div>}
@@ -2369,7 +2405,7 @@ function App() {
             </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={()=>setModal('connections')} 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);
           }}/>}
@@ -2387,6 +2423,7 @@ function App() {
           {toast === "Preparing documents and diagram exports…"&&<BrainActivity/>}{toast}
         </div>
       )}
+      <StarPrompt offer={starOffer}/>
       {modal && (
         <div className="backdrop" onMouseDown={(e) => e.target === e.currentTarget && !(modal === "welcome" && !connection) && setModal(null)}>
           <section className={`modal ${modal==="memory"?"memory-modal":""}`} role="dialog" aria-modal="true" aria-label={modal}>
@@ -2421,22 +2458,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

package/src/onboarding.css

@@ -0,0 +1,10 @@
+@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}

package/src/output-bundle.mjs

@@ -1,13 +1,25 @@
 import {verifiedReceipt} from './validation-receipt.mjs';
 import {deliveryPack} from './delivery.mjs';
-export async function outputBundle(project,run,environment,checks){
+export const VISUAL_PATHS=['spec-kit/implementation-spec.pdf','specification.pdf','diagram.svg','diagram.png','diagram.pdf'];
+export async function outputBundle(project,run,environment,checks,{deferVisuals=false}={}){
   const snapshot=structuredClone(project);
   const files=deliveryPack(snapshot,run,environment);
-  const {visualFiles}=await import('./visual-export.mjs');
-  Object.assign(files,await visualFiles(snapshot,files['specification.md'],files['spec-kit/implementation-spec.md']));
   if(checks){const terraform=Object.fromEntries(Object.entries(files).filter(([name])=>name.startsWith('terraform/')).map(([name,value])=>[name.slice(10),value]));const receipt=await verifiedReceipt(terraform,checks);if(receipt)files['terraform/validation-receipt.json']=JSON.stringify(receipt,null,2);}
   const manifest=JSON.parse(files['manifest.json']);manifest.files=Object.keys(files);
   files['manifest.json']=JSON.stringify(manifest,null,2);
   const slug=snapshot.name.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'')||'atflow';
-  return {project,files,manifest,filename:`${slug}-r${snapshot.revision}-delivery.zip`};
+  const base={project,files,manifest,filename:`${slug}-r${snapshot.revision}-delivery.zip`,visualPaths:VISUAL_PATHS};
+  let pending;
+  async function prepare(){
+    if(!pending)pending=(async()=>{
+      const {visualFiles}=await import('./visual-export.mjs');
+      const fullFiles={...files,...await visualFiles(snapshot,files['specification.md'],files['spec-kit/implementation-spec.md'])};
+      const fullManifest={...manifest,files:Object.keys(fullFiles)};
+      fullFiles['manifest.json']=JSON.stringify(fullManifest,null,2);
+      const full={...base,files:fullFiles,manifest:fullManifest,visualPaths:[]};
+      return {...full,prepare:()=>Promise.resolve(full)};
+    })().catch(error=>{pending=null;throw error;});
+    return pending;
+  }
+  return deferVisuals?{...base,prepare}:prepare();
 }

package/src/pricing.mjs

@@ -1,7 +1,8 @@
+import {prefillAcceptedSettings} from './engineering-defaults.mjs';
 import { setPrice, usage } from './estimate.mjs';
 const patterns = {aws:/\bs3\b/i,azure:/blob|data lake|azure storage/i,gcp:/cloud storage|storage bucket/i,ibm:/object storage|\bcos\b/i};
 export const storageNodes = p => p.nodes.filter(n=>patterns[n.data.provider]?.test(`${n.data.label} ${n.data.service || ''}`));
-const sources = {'AWS public Price List':'https://pricing.us-east-1.amazonaws.com/','Azure Retail Prices API':'https://prices.azure.com/','Google Cloud Billing Catalog':'https://cloud.google.com/'};
+const sources = {'AWS public Price List':'https://pricing.us-east-1.amazonaws.com/','Azure Retail Prices API':'https://prices.azure.com/','Google Cloud Billing Catalog':'https://cloud.google.com/','Google Cloud public pricing':'https://cloud.google.com/storage/pricing'};
 export function applyPriceQuotes(project, quotes) {
  let p=project;
  for(const quote of quotes||[]){
@@ -11,7 +12,7 @@ export function applyPriceQuotes(project, quotes) {
    if(n.data.provider!==quote.provider || n.data.config?.region!==quote.region || existing?.source && !sources[existing.source])continue;
    // Shared usage is decimal GB; preserve the conversion in the quote note.
    const factor=quote.unit==='GiB-month'?1e9/(1024**3):1;
-   p=setPrice(p,n.id,{price:quote.price*factor,currency:quote.currency,source:quote.source,url:quote.url,date:quote.date,region:quote.region,service:quote.service,tierLimit:quote.tierLimit,coverageIncomplete:true,note:quote.coverage+(factor!==1?`; provider GiB converted from decimal GB using ${factor}`:'')});
+   p=setPrice(p,n.id,{price:quote.price*factor,currency:quote.currency,source:quote.source,url:quote.url,date:quote.date,region:quote.region,service:quote.service,tierLimit:quote.tierLimit,coverageIncomplete:true,sourceSha256:quote.sourceSha256,hourlyPrice:quote.hourlyPrice,hoursPerMonth:quote.hoursPerMonth,note:quote.coverage+(factor!==1?`; provider GiB converted from decimal GB using ${factor}`:'')});
   }
  }
  return p;
@@ -49,9 +50,10 @@ export function applyLambdaQuote(project,node,quote){
  return {...project,estimate:{...project.estimate,details:[...current.filter(line=>!line.id.startsWith(prefix)),...generated]}};
 }
 export async function fetchPlanningPrices(session,project){
+ project=prefillAcceptedSettings(project);
  const storage=await fetchStoragePrices(session,project);let next=applyPriceQuotes(project,storage.quotes);const errors=[...storage.errors];
  for(const node of lambdaNodes(project)){
-  const region=node.data.config?.region;if(!region||!/^[a-z]{2}-(?:gov-)?[a-z]+-\d$/.test(region)){errors.push({component:node.data.label,reason:'Choose the AWS region in Choices to price this component.'});continue;}
+  const region=node.data.config?.region;if(!region||!/^[a-z]{2}-(?:gov-)?[a-z]+-\d$/.test(region)){errors.push({provider:'aws',action:'choose-region',reason:'Choose an AWS region in Choices.'});continue;}
   try{
    const architecture=node.data.config?.architecture==='arm64'?'arm64':'x86_64';
    const response=await fetch('/api/pricing/lambda',{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${session.token}`},body:JSON.stringify({projectId:project.id,region,architecture}),signal:AbortSignal.timeout(20000)}),quote=await response.json();
@@ -63,7 +65,7 @@ export async function fetchPlanningPrices(session,project){
   const region=node.data.config?.region||'',service=/cloud run/i.test(`${node.data.service||''} ${node.data.label}`)?'cloud-run':'cloud-sql';
   try{const response=await fetch('/api/pricing/google',{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${session.token}`},body:JSON.stringify({projectId:project.id,region,service,planningReference:!region||/select|unknown|tbd/i.test(region)}),signal:AbortSignal.timeout(20000)}),quote=await response.json();if(!response.ok)throw Error(quote.detail||'Google pricing could not be verified.');next=applyGoogleQuote(next,node,quote);}catch(error){errors.push({component:node.data.label,reason:error.message});}
  }
- return {project:next,errors};
+ return {project:next,errors:[...new Map(errors.map(error=>[`${error.provider||''}:${error.reason}:${error.action||''}`,error])).values()]};
 }
 
 export const googleNodes=p=>p.nodes.filter(n=>n.data.provider==='gcp'&&n.data.origin!=='existing'&&/cloud run|cloud sql/i.test(`${n.data.service||''} ${n.data.label}`));