@atmem/architect 0.0.0-stage → 0.2.0-alpha.4.1

package/src/EngineeringPanel.jsx

@@ -0,0 +1,151 @@
+import {ArchitectureWorkPanel} from './ArchitectureWorkPanel.jsx';
+import React,{useEffect,useRef,useState} from 'react';
+import {engineeringCall,engineeringConversation,mergeEngineeringEvents} from './engineering-client.mjs';
+import './engineering.css';
+import {ArtifactChecks} from './ArtifactChecks.jsx';
+import {verifyArtifactWork} from './artifact-work.mjs';
+import {hasArchitectureDesign,buildIntent,BUILD_AND_TEST_REQUEST} from './design-build-flow.mjs';
+
+export function EngineeringPanel({projectId,session,connection,saveProject,onConnections,project,onWorkModelChange,onIntentContext,onDesign,onDelivery,buildRequest,onBuildRequestHandled,contextBusy=false}){
+  const draftKey=`atmem-engineering-draft-v1:${projectId}`;
+  const [job,setJob]=useState(null),[events,setEvents]=useState([]),[draft,setDraft]=useState(()=>{try{return localStorage.getItem(draftKey)||'';}catch{return '';}}),
+    [busy,setBusy]=useState(false),[error,setError]=useState(''),[loading,setLoading]=useState(true),[artifact,setArtifact]=useState(null);
+  const [draftError,setDraftError]=useState('');
+  const [restoreBlocked,setRestoreBlocked]=useState(false),[restoreAttempt,setRestoreAttempt]=useState(0);
+  useEffect(()=>{try{localStorage.setItem(draftKey,draft);setDraftError('');}catch{setDraftError('This draft could not be saved in your browser. Keep this view open or copy it before leaving.');}},[draftKey,draft]);
+  const live=useRef(true),cursor=useRef(0),actionLock=useRef(false);
+  const finalization=events.filter(event=>event.runId===job?.run&&event.kind.startsWith('finalization_')).at(-1);
+  useEffect(()=>{live.current=true;return()=>{live.current=false;};},[]);
+  const call=(action,payload={},options)=>engineeringCall(session,action,{projectId,...(job?{sessionId:job.id}:{}),...payload},options);
+  useEffect(()=>{
+    if(!job)return;
+    const controller=new AbortController();let stopped=false;
+    engineeringCall(session,'artifacts',{projectId,sessionId:job.id},{signal:controller.signal}).then(result=>{
+      if(!stopped)setArtifact(result.artifacts.find(item=>item.runId===job.run)||result.artifacts[0]||null);
+    }).catch(e=>{if(!stopped&&e.name!=='AbortError')setError(e.message);});
+    return()=>{stopped=true;controller.abort();};
+  },[job?.id,job?.run,finalization?.artifactId,projectId,session.token]);
+  useEffect(()=>{
+    const controller=new AbortController();let stopped=false;
+    setLoading(true);setRestoreBlocked(false);
+    (async()=>{let restored=false;try{
+      const result=await engineeringCall(session,'list',{projectId},{signal:controller.signal});
+      const previous=result.sessions.at(-1);
+      if(previous){
+        restored=true;
+        if(!stopped)setJob(previous);
+        const recovered=await engineeringCall(session,'recover',{projectId,sessionId:previous.id},{signal:controller.signal});
+        if(!stopped)setJob(recovered);
+      }
+    }catch(e){if(!stopped&&e.name!=='AbortError'&&(e.status!==404||restored)){setError(e.message);setRestoreBlocked(true);}}finally{if(!stopped)setLoading(false);}})();
+    return()=>{stopped=true;controller.abort();};
+  },[projectId,session.token,restoreAttempt]);
+  useEffect(()=>{
+    if(!job)return;
+    const controller=new AbortController();let stopped=false,timer;
+    async function poll(){try{
+      const result=await engineeringCall(session,'events',{projectId,sessionId:job.id,after:cursor.current},{signal:controller.signal});
+      if(stopped)return;
+      setEvents(current=>mergeEngineeringEvents(current,result.events));
+      if(result.events.length)cursor.current=result.events.at(-1).sequence;
+      setJob(result.session);
+    }catch(e){if(!stopped&&e.name!=='AbortError')setError(e.message);}finally{if(!stopped)timer=setTimeout(poll,1000);}}
+    void poll();return()=>{stopped=true;clearTimeout(timer);controller.abort();};
+  },[job?.id,projectId,session.token]);
+  useEffect(()=>{if(job&&onIntentContext){try{onIntentContext(projectId,job.id,events);}catch(e){setError(e.message);}}},[job?.id,events,onIntentContext]);
+  async function act(operation){
+    if(actionLock.current)return;
+    actionLock.current=true;setBusy(true);setError('');
+    try{await operation();}catch(e){if(live.current)setError(e.message);}finally{actionLock.current=false;if(live.current)setBusy(false);}
+  }
+  const exactSelection=connection?.provider==='codex'&&connection.model&&connection.model!=='default'&&connection.effort;
+  const running=job?.state==='running',uncertain=job?.state==='starting';
+  const conversation=engineeringConversation(events);
+  const hasDesign=hasArchitectureDesign(project),canSubmit=running?!!draft.trim():!!buildIntent(project,draft);
+  const consumedBuild=useRef(null);
+  function submitIntent(event,requestedText){
+    event?.preventDefault();
+    const submitted=requestedText??(running?draft:buildIntent(project,draft));
+    if(!submitted||submitted.length>80000||loading||restoreBlocked||actionLock.current||uncertain||contextBusy||(!job&&(!exactSelection||!hasDesign)))return false;
+    void act(async()=>{
+      let current=job;
+      let saved=await saveProject();
+      if(!/^[a-f0-9]{64}$/.test(saved?.sha256||''))throw Error('The server did not confirm the saved design context. Your draft is retained.');
+      if(!current){
+        current=await call('create',{model:connection.model,effort:connection.effort});
+        if(live.current)setJob(current);
+        // Native session creation can outlast pending autosaves. Confirm the
+        // context immediately before submitting, without replaying any intent.
+        saved=await saveProject();
+        if(!/^[a-f0-9]{64}$/.test(saved?.sha256||''))throw Error('The server did not confirm the saved design context. Your draft is retained.');
+      }
+      // The new session ID is explicit: React state may not have rendered yet.
+      const next=await call(current.state==='running'?'steer':'start',{sessionId:current.id,text:submitted,contextSha256:saved.sha256});
+      if(live.current){setJob(next);setArtifact(null);setDraft(value=>value===submitted?'':value);}
+    });
+    return true;
+  }
+  useEffect(()=>{
+    if(!buildRequest||buildRequest.projectId!==projectId||consumedBuild.current===buildRequest.id||loading||restoreBlocked||contextBusy||uncertain||busy||(!job&&!exactSelection))return;
+    if(submitIntent(null,buildRequest.intent==='test'?BUILD_AND_TEST_REQUEST:buildIntent(project,''))){
+      consumedBuild.current=buildRequest.id;onBuildRequestHandled?.(buildRequest.id);
+    }
+  },[buildRequest,projectId,loading,restoreBlocked,contextBusy,uncertain,busy,exactSelection,job?.id]);
+  async function linkMappings(){
+    const result=await call('reconciliation',{artifactId:artifact.id});
+    if(result.status==='proposal_missing')throw Error(result.message);
+    const verified=await verifyArtifactWork(result);
+    if(verified.payload.artifactId!==artifact.id||verified.payload.artifactSha256!==artifact.sha256||verified.payload.sessionId!==job.id)throw Error('The mapping receipt does not match this captured package.');
+    onWorkModelChange({kind:'artifact',verified},projectId);
+  }
+  return <div className="engineering-panel">
+    <h2>Generate and verify</h2>
+    <p>Generate the agreed design and run applicable local checks here. Review results and corrections before opening Delivery.</p>
+    {onDesign&&<button onClick={onDesign}>Return to Design</button>}
+
+    {buildRequest?.projectId===projectId&&<p role="status">{restoreBlocked?'Your implementation request is waiting. Retry loading earlier work before starting.':uncertain?'Your implementation request is waiting. Recover the existing request first to avoid duplicate work.':contextBusy?'Your implementation request is waiting for the current design changes.':!job&&!exactSelection?'Your implementation request is waiting here. Choose a model and reasoning level below; it will then start automatically.':'Your implementation request is queued.'} <button onClick={()=>onBuildRequestHandled?.(buildRequest.id)}>Cancel queued request</button></p>}
+    {restoreBlocked&&<button disabled={loading||busy} onClick={()=>{setError('');setRestoreAttempt(value=>value+1);}}>Retry loading earlier work</button>}
+    {loading?<p role="status">Finding your project’s work…</p>:<>
+      {job?<>
+        <p role="status">{running?'Working':uncertain?'Recovering acceptance of your last request':job.last_status?({completed:'Work completed',interrupted:'Work stopped',failed:'Work needs attention'}[job.last_status]||job.last_status):'Ready'} · {job.model} · {job.effort}</p>
+        <p className="muted">Each request includes your saved design. Earlier versions remain in the work history.</p>
+      </>:<>
+        <p>{exactSelection?`${connection.model} · ${connection.effort}`:'Choose a Codex model and reasoning level to start.'}</p>
+        {!exactSelection&&<button onClick={onConnections}>Choose model</button>}
+        {contextBusy&&<p role="status">Finish the current design changes before starting new work.</p>}
+      </>}
+      {conversation.length>0&&<section className="engineering-conversation" role="log" aria-label="Project conversation" aria-live="polite">{conversation.map(entry=><article key={entry.id} className={`engineering-entry ${entry.role}`}>
+        <strong>{entry.role==='user'?'You':'Architect'}</strong>
+        {entry.status==='pending'&&<span> · Sending update</span>}
+        {entry.status==='uncertain'&&<span> · Delivery uncertain; recover before resending</span>}
+        <pre>{entry.text}</pre>
+      </article>)}</section>}
+      {!hasDesign&&!job?<p>Start with the Board or Requirements. Add the components or responsibilities before building an implementation.</p>:<form onSubmit={submitIntent}>
+        <label htmlFor="engineering-intent">{running?'Add an implementation update':hasDesign?'Additional instructions (optional)':'Continue implementation'}</label>
+        <textarea id="engineering-intent" rows={4} value={draft} onChange={e=>setDraft(e.target.value)}/>
+        {draft.length>80000&&<p role="alert">This update exceeds 80,000 characters. Edit it before sending; your draft is retained.</p>}
+        <button disabled={busy||restoreBlocked||uncertain||contextBusy||!canSubmit||draft.length>80000||(!job&&!exactSelection)}>{running?'Send update':hasDesign?'Generate and verify':'Continue implementation'}</button>
+      </form>}
+      {job&&<>
+        {finalization&&<p role="status"><strong>Recorded verification update: </strong>{finalization.text}</p>}
+        <div className="engineering-actions">
+          <button disabled={busy} onClick={()=>act(async()=>{const next=await call('recover');if(live.current)setJob(next);})}>Refresh connection status</button>
+          {running&&<button disabled={busy} onClick={()=>act(async()=>{const next=await call('interrupt');if(live.current)setJob(next);})}>Stop work</button>}
+          {!running&&!uncertain&&job.last_status&&<button disabled={busy} onClick={()=>act(async()=>{const captured=await call('capture');if(live.current)setArtifact(captured);})}>Refresh package snapshot</button>}
+        </div>
+        <details><summary>Engineering progress ({events.length})</summary><ol>{events.filter(event=>!['message','accepted','steering_submitted'].includes(event.kind)).map(event=><li key={event.sequence}>{event.kind}{event.text?` · ${event.text}`:''}</li>)}</ol></details>
+      </>}
+      {artifact&&<div className="engineering-artifact"><p>Implementation draft · {artifact.files.filter(file=>file.kind==='file').length} {artifact.files.filter(file=>file.kind==='file').length===1?'file':'files'} · work {artifact.turnStatus}. Capture does not establish full project acceptance.</p>
+        {artifact.runId!==job?.run&&<p>This package is from an earlier turn. It does not cover the current work.</p>}
+        {onDelivery&&<button disabled={busy} onClick={onDelivery}>Review and download handoff</button>}
+
+        {!running&&!uncertain&&job?.last_status==='completed'&&artifact.runId===job.run&&<button disabled={busy} onClick={()=>act(async()=>{await call('recheck',{runId:job.run,artifactId:artifact.id});const next=await call('state');if(live.current)setJob(next);})}>Recheck and repair</button>}
+        {onWorkModelChange&&!running&&!uncertain&&job?.last_status==='completed'&&artifact.runId===job.run&&<button disabled={busy||contextBusy} onClick={()=>act(linkMappings)}>Link proposed mappings</button>}
+        <ArtifactChecks key={artifact.id} session={session} projectId={projectId} sessionId={job.id} artifact={artifact}/>
+      </div>}
+    </>}
+    {(hasDesign||job)&&<ArchitectureWorkPanel project={project} onChange={onWorkModelChange} busy={busy||contextBusy}/>}
+    {error&&<p role="alert">{error}</p>}
+    {draftError&&<p role="alert">{draftError}</p>}
+  </div>;
+}

package/src/ImplementationDelivery.jsx

@@ -0,0 +1,55 @@
+import React,{useEffect,useState} from 'react';
+import {engineeringCall,verifiedHandoffDownload} from './engineering-client.mjs';
+import {ArtifactChecks} from './ArtifactChecks.jsx';
+
+export function ImplementationDelivery({project,session,onBuild,onSave,contextBusy=false}){
+ const [loaded,setLoaded]=useState(null),[error,setError]=useState(''),[retry,setRetry]=useState(0),[busy,setBusy]=useState(false);
+ const report=loaded?.project===project?loaded.report:null;
+ useEffect(()=>{
+  const controller=new AbortController();setError('');setLoaded(null);
+  engineeringCall(session,'delivery',{projectId:project.id},{signal:controller.signal}).then(value=>{
+   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]);
+ async function download(){
+  if(!report?.artifact||busy||contextBusy)return;
+  setBusy(true);setError('');
+  try{
+   let current=report;
+   if(onSave){
+    const saved=await onSave(project);
+    if(!/^[a-f0-9]{64}$/.test(saved?.sha256||''))throw Error('The current design save was not confirmed. Nothing was downloaded.');
+    current=await engineeringCall(session,'delivery',{projectId:project.id});
+    setLoaded({project,report:current});
+    if(current.savedFileSha256!==saved.sha256)
+      throw Error('The saved design changed after confirmation. Review the refreshed Delivery information before downloading.');
+    const confirmedSameDesign=current.relation==='matches_saved_design'&&current.savedFileSha256===saved.sha256;
+    if(current.artifact?.id!==report.artifact.id||current.session?.id!==report.session.id||(current.savedDesignSha256!==report.savedDesignSha256&&!confirmedSameDesign))
+      throw Error('The saved design or package changed. Review the refreshed Delivery information before downloading.');
+   }
+   const payload={projectId:project.id,sessionId:current.session.id,artifactId:current.artifact.id};
+   const blob=await verifiedHandoffDownload(session,{...payload,savedDesignSha256:current.savedDesignSha256},current.artifact);
+   const url=URL.createObjectURL(blob),link=document.createElement('a');link.href=url;
+   link.download=`architect-handoff-${report.artifact.id}.zip`;link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
+  }catch(e){setError(e.message)}finally{setBusy(false)}
+ }
+ return <section aria-label="Implementation delivery">
+  <h3>Project package</h3>
+  {!report&&!error&&<p role="status">Finding the captured implementation and its checks…</p>}
+  {report&&!report.artifact&&<><p>No implementation package has been captured for this project yet. Next: open Review to generate the project and inspect its checks. Return here for the final package.</p>{onBuild&&<button className="btn primary" disabled={contextBusy} onClick={onBuild}>Go to Review</button>}</>}
+  {report?.artifact&&<>
+   <p>{report.relation==='matches_saved_design'?'This package used the latest saved design.':report.relation==='design_changed'?'The saved design has changed since this implementation. New or changed requirements need implementation and checks.':report.relation==='earlier_turn'?'This is an earlier package. A later implementation turn has not produced a completed package yet.':'The submitted design receipt is unavailable. Its relationship to the current design is unknown.'} Capture and local checks do not establish full project acceptance.</p>
+   <p>{report.artifact.files.filter(file=>file.kind==='file').length} files · {report.artifact.model} · {report.artifact.effort}</p>
+   {report.canPackage&&<button className="btn primary" disabled={busy||contextBusy} onClick={()=>download()}>Download project package (ZIP)</button>}
+   {report.relation!=='matches_saved_design'&&onBuild&&<button className="btn" disabled={busy||contextBusy} onClick={onBuild}>Review latest design</button>}
+   <p>The handoff includes the captured files, their original ZIP, submitted and latest saved requirements/design, and recorded local checks. Missing implementation or Spec Kit content remains work to complete.</p>
+   <ArtifactChecks key={report.artifact.id} session={session} projectId={project.id} sessionId={report.session.id} artifact={report.artifact} readOnly/>
+   <details><summary>Package files and source receipt</summary><p>Artifact SHA-256: {report.artifact.sha256}</p><ul>{report.artifact.files.filter(file=>file.kind==='file').map(file=><li key={file.path}>{file.path}</li>)}</ul></details>
+  </>}
+  {busy&&<p role="status">Preparing and verifying your handoff download…</p>}
+  {contextBusy&&<p role="status">Finish the current design changes before downloading a combined handoff.</p>}
+  {error&&<p role="alert">{error}</p>}
+  <button className="link" disabled={busy} onClick={()=>setRetry(value=>value+1)}>Refresh delivery</button>
+ </section>;
+}

package/src/JourneyViews.jsx

@@ -0,0 +1,400 @@
+// Review, Estimate and Deploy steps of the AtMem AI Architect journey.
+import React from "react";
+import { ATTRIBUTES, acceptRisk, blockers } from "./review.mjs";
+import { DISCLAIMER, INPUTS, PROJECT_SIZES, setProjectSize, setPrice, setUsage } from "./estimate.mjs";
+import { deploymentSteps } from "./document.mjs";
+import { GATE } from "./engagement.mjs";
+import { DetailedCharges, ConsultingView, ResourcesView } from "./DeliveryViews.jsx";
+import { resourcePlan } from "./resources.mjs";
+
+const money = (v, c) => (v == null ? "—" : `${c || ""} ${v.toLocaleString("en", { maximumFractionDigits: 2 })}`.trim());
+
+function Accept({ onAccept }) {
+  const [open, setOpen] = React.useState(false),
+    [reason, setReason] = React.useState(""),
+    [owner, setOwner] = React.useState("");
+  if (!open)
+    return (
+      <button className="link small" onClick={() => setOpen(true)}>
+        Accept risk
+      </button>
+    );
+  return (
+    <div className="revise">
+      <input aria-label="Why accept" placeholder="Why is this acceptable?" value={reason} onChange={(e) => setReason(e.target.value)} />
+      <input aria-label="Risk owner" placeholder="Owner" value={owner} onChange={(e) => setOwner(e.target.value)} />
+      <button className="btn" disabled={!reason.trim() || !owner.trim()} onClick={() => onAccept(reason, owner)}>
+        Accept
+      </button>
+    </div>
+  );
+}
+
+export function ReviewView({ project, findings, onChange, onOpen, onAddRequirement }) {
+  const names = Object.fromEntries(project.nodes.map((n) => [n.id, n.data.label]));
+  const block = blockers(findings);
+  const open = findings.filter((f) => f.status === "open");
+  return (
+    <section className="doc" aria-label="Review">
+      <header className="doc-head">
+        <h2>Review</h2>
+        <p className="muted">
+          {block.length
+            ? `${block.length} blocker${block.length > 1 ? "s" : ""} to fix before deployment.`
+            : open.length
+              ? `No blockers. ${open.length} thing${open.length > 1 ? "s" : ""} worth a look.`
+              : "Nothing open. Rules run on every change."}
+        </p>
+      </header>
+      <details className="extra"><summary>Agreed choices and consequences</summary>{(project.decisions||[]).filter(d=>d.status==='Accepted').map(d=><article key={d.id||d.subject}><strong>{d.title||d.subject}</strong><p>{d.decision}</p>{d.context&&<p>{d.context}</p>}{d.consequences&&<p>{d.consequences}</p>}</article>)}</details>
+      {ATTRIBUTES.map(([id, label]) => {
+        const fs = findings.filter((f) => f.attribute === id);
+        if (!fs.length) return null;
+        return (
+          <div key={id} className="finding-group">
+            <h3>{label}</h3>
+            {fs.map((f) => (
+              <article key={f.key} className={`finding sev-${f.severity} ${f.status}`}>
+                <div className="finding-head">
+                  <span className={`sev ${f.severity}`}>{f.severity}</span>
+                  <strong>{f.statement}</strong>
+                </div>
+                <p className="muted">{f.rationale}</p>
+                <p>{f.action}</p>
+                <div className="finding-foot">
+                  {f.components.map((c) => (
+                    <button key={c} className="chip" onClick={() => onOpen(c)}>
+                      {names[c] || c}
+                    </button>
+                  ))}
+                  <span className="muted small">{f.source}</span>
+                  {["AVL-001", "PRF-001"].includes(f.rule) && f.status === "open" && (
+                    <button className="link small" onClick={() => onAddRequirement(f.rule === "AVL-001" ? "availability" : "performance")}>
+                      Add target
+                    </button>
+                  )}
+                  {f.status === "accepted" ? (
+                    <span className="small">
+                      Accepted by {f.acceptance.owner}: {f.acceptance.reason}
+                    </span>
+                  ) : (
+                    <Accept onAccept={(reason, owner) => onChange(acceptRisk(project, f, reason, owner))} />
+                  )}
+                </div>
+              </article>
+            ))}
+          </div>
+        );
+      })}
+    </section>
+  );
+}
+
+export function EstimateView({ project, result, onChange, onEstimate, busy=false }) {
+  const e = result;
+  return (
+    <section className="doc" aria-label="Estimate">
+      <header className="doc-head">
+        <h2>Costs</h2>
+        <p className="muted">Choose an expected project size. We use it to estimate usage; you can refine the assumptions later. {DISCLAIMER}</p>
+      </header>
+      <fieldset disabled={busy}><legend>How large do you expect this project to be?</legend>
+        <div className="row">{PROJECT_SIZES.map(size=><button type="button" className="btn" key={size.id} aria-pressed={project.estimate?.projectSize===size.id} onClick={()=>{const next=setProjectSize(project,size.id);onChange(next);onEstimate?.(next);}}>{size.label}</button>)}</div>
+        <p className="muted small">Small: 10,000 requests / 10 GB; Medium: 100,000 / 100 GB; Large: 1 million / 1 TB; Extra Large: 10 million / 10 TB per month. Existing usage figures take priority. Model assumptions: 3,000 tokens per request and 730 endpoint hours; training usage needs separate agreement.</p>
+      </fieldset>
+      {busy&&<p role="status">Architect is preparing the estimate…</p>}
+      {onEstimate&&project.estimate?.projectSize&&<button className="link" disabled={busy} onClick={()=>onEstimate(project)}>Refresh estimate with Architect</button>}
+      <div className="totals">
+        <div>
+          <small className="muted">Estimated subtotal / month</small>
+          <strong>{e.lines.some((l) => l.cost != null) ? money(e.expected, e.currency) : "—"}</strong>
+        </div>
+        <div>
+          <small className="muted">Range</small>
+          <span>
+            {e.lines.some((l) => l.cost != null) ? `${money(e.low, e.currency)} – ${money(e.high, e.currency)}` : "—"}
+          </span>
+        </div>
+        <div>
+          <small className="muted">Status</small>
+          <span className={e.complete ? "ok-text" : "warn-text"}>
+            {e.complete ? "All entered charges estimated" : e.mixedCurrencies ? "Currency needs review" : "Some charges not yet estimated"}
+          </span>
+        </div>
+        {e.budget && (
+          <div>
+            <small className="muted">Budget</small>
+            <span className={e.budget.comparable && e.expected > e.budget.amount ? "bad-text" : ""}>
+              {e.budget.currency} {e.budget.amount.toLocaleString("en")}
+              {e.budget.comparable ? (e.expected > e.budget.amount ? " · over" : " · within") : " · not compared"}
+            </span>
+          </div>
+        )}
+      </div>
+      <p className="muted small">The subtotal includes priced charges only. Architect needs to resolve unpriced services before this becomes a full estimate.</p>
+      {e.drivers.length > 0 && (
+        <p className="small">
+          Biggest drivers: {e.drivers.map((d) => `${d.component} (${money(d.cost, d.price.currency)})`).join(", ")}
+        </p>
+      )}
+      {e.lines.some(l=>l.cost==null)&&<p role="status">{e.lines.filter(l=>l.cost==null).length} charges await {e.lines.some(l=>l.quantity==null)?'usage assumptions or service pricing':'service pricing'}. {onEstimate?'Ask Architect using the estimate action above; detailed inputs are optional below.':'Service prices must be connected before these charges can be calculated.'}</p>}
+      <details className="extra"><summary>Cost breakdown and price sources</summary><div className="resource-schedule" aria-label="Estimate breakdown">{e.lines.map(l=><article key={l.id}><strong>{l.component} · {l.driver}</strong><span>{l.cost==null?'Not yet estimated':money(l.cost,l.price.currency)+'/month'}</span><small>{l.quantity??'Usage unresolved'} {l.unit}{l.price&&<> · {l.price.source}{l.price.url&&<> · <a href={l.price.url} target="_blank" rel="noreferrer">price source</a></>}</>}</small></article>)}</div></details>
+      <details className="extra"><summary>Adjust usage assumptions and prices</summary>
+      {e.lines.some((l) => !l.detailed) && <>
+      <div className="doc-sub">
+        <h3>Usage</h3>
+      </div>
+      <div className="usage">
+        {INPUTS.filter((i) => e.lines.some((l) => l.inputs.includes(i.id))).map((i) => {
+          const u = e.usage[i.id];
+          return (
+            <label key={i.id} className="field">
+              {i.label}
+              <input
+                aria-label={i.label}
+                inputMode="decimal"
+                placeholder={u.value != null ? String(u.value) : "unknown"}
+                value={project.estimate?.usage?.[i.id] ?? ""}
+                onChange={(ev) => onChange(setUsage(project, i.id, ev.target.value))}
+              />
+              <small className={u.source === "needed" ? "warn-text" : "muted"}>
+                {u.source === "needed" ? "needed by a line below" : `${u.value?.toLocaleString("en")} ${i.unit} · ${u.source}`}
+              </small>
+              {i.hint && <small className="muted">{i.hint}</small>}
+            </label>
+          );
+        })}
+      </div>
+      </>}
+      {e.lines.some((l) => !l.detailed) &&
+      <div className="doc-sub">
+        <h3>Lines</h3>
+        <span className="muted small">Price per unit, with where it came from.</span>
+      </div>
+      }
+      {e.lines.some((l) => !l.detailed) ? (
+        <div className="lines">
+          {e.lines.filter((l) => !l.detailed).map((l) => {
+            const p = project.estimate?.prices?.[l.id] || {};
+            const set = (patch) => onChange(setPrice(project, l.id, patch));
+            return (
+              <div key={l.id} className={`line ${l.status.replace(" ", "-")}`}>
+                <span>
+                  <strong>{l.component}</strong>
+                  <small className="muted">
+                    {l.driver} · {l.quantity == null ? `needs ${l.missing.map((m) => INPUTS.find((i) => i.id === m).label.toLowerCase()).join(", ")}` : `${l.quantity.toLocaleString("en")} ${l.unit}`}
+                  </small>
+                </span>
+                <input
+                  aria-label={`${l.component} unit price`}
+                  inputMode="decimal"
+                  placeholder={`price / ${l.unit}`}
+                  value={p.price ?? ""}
+                  onChange={(ev) => set({ price: ev.target.value === "" ? undefined : Number(ev.target.value) })}
+                />
+                <input aria-label={`${l.component} currency`} className="cur" value={p.currency || "USD"} onChange={(ev) => set({ currency: ev.target.value.toUpperCase().slice(0, 3) })} />
+                <input aria-label={`${l.component} price source`} placeholder="source or URL" value={p.url || (p.source && p.source !== "entered by you" ? p.source : "")} onChange={(ev) => set({ url: ev.target.value })} />
+                <span className="cost">{l.cost == null ? <em className="muted">{l.status}</em> : money(l.cost, l.price.currency)}</span>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        !project.nodes.length && <p className="muted">Sketch a design first; lines appear for each component that has a running cost.</p>
+      )}
+      {e.notCosted.length > 0 && <p className="muted small">Not costed in this release: {e.notCosted.join(", ")}.</p>}
+      <div className="row small">
+        <label className="inline">
+          Low ×
+          <input aria-label="Low factor" value={e.factors.low} onChange={(ev) => onChange({ ...project, estimate: { ...(project.estimate || {}), low: Number(ev.target.value) || 0 } })} />
+        </label>
+        <label className="inline">
+          High ×
+          <input aria-label="High factor" value={e.factors.high} onChange={(ev) => onChange({ ...project, estimate: { ...(project.estimate || {}), high: Number(ev.target.value) || 0 } })} />
+        </label>
+      </div>
+      </details>
+      <details className="extra"><summary>Advanced charge worksheet</summary><DetailedCharges project={project} onChange={onChange} /></details>
+      {e.lines.some((l) => l.detailed) && <div className="resource-schedule" aria-label="Detailed cost breakdown">{e.lines.filter((l) => l.detailed).map((l) => <article key={l.id}><strong>{l.component} · {l.driver}</strong><span>{l.quantity ?? "?"} {l.unit} × {l.price ? money(l.price.price, l.price.currency) : "price needed"} = {l.cost == null ? l.status : money(l.cost, l.price.currency)}/month</span></article>)}</div>}
+      <details className="extra"><summary>What we still need for a full estimate · {e.gaps.length} worksheet gaps</summary><ul>{e.gaps.map((g,i) => <li key={i}>{g}</li>)}</ul><p className="muted small">Check networking, security, logging, backups, support, licences, taxes and delivery effort. A detailed worksheet still needs validation against the selected services.</p></details>
+      <details className="extra"><summary>Optional delivery effort estimate</summary><ConsultingView project={project} onChange={onChange} /></details>
+    </section>
+  );
+}
+
+export function DeployView({ project, findings, environment, onEnvironment, onPlan, onPulumi, onDocument, onPack, onTerraform, onChange }) {
+  const block = blockers(findings);
+  const infrastructure = resourcePlan(project);
+  const gate = project.gate || {};
+  return (
+    <section className="doc" aria-label="Deploy">
+      <header className="doc-head">
+        <h2>Deploy</h2>
+        <p className="muted">A reviewable plan and document. AtMem AI Architect never provisions anything on its own.</p>
+      </header>
+      <div className="ready no">
+        <strong>{block.length ? "Not ready for deployment" : "No automated review blockers"}</strong>
+        {!block.length && <p className="small">{infrastructure.gaps.length ? `${infrastructure.gaps.length} infrastructure and integration tasks remain.` : "Infrastructure and account validation are still required."}</p>}
+        {block.length > 0 && (
+          <ul>
+            {block.map((f) => (
+              <li key={f.key}>{f.statement}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <div className="row">
+        <div className="seg">
+          {["staging", "production"].map((env) => (
+            <button key={env} className={environment === env ? "on" : ""} onClick={() => onEnvironment(env)}>
+              {env[0].toUpperCase() + env.slice(1)}
+            </button>
+          ))}
+        </div>
+        <button className="btn primary" onClick={onDocument}>
+          Deployment document
+        </button>
+        <button className="btn primary" onClick={onPack}>Download delivery pack</button>
+        <button className="btn" onClick={onTerraform}>Terraform sketch</button>
+        <button className="btn" onClick={onPlan}>
+          Export {environment} plan
+        </button>
+        <button className="btn ghost" onClick={onPulumi}>
+          Pulumi
+        </button>
+      </div>
+      <p className="muted small">The delivery pack includes the specification, diagram, decisions, estimates, resource schedule, editable project and Terraform sketch, all from the current snapshot. Change the project and regenerate it.</p>
+      <p className="warn-text small">Deployment access and execution are not connected. Resource coverage and implementation work are listed below; automated review alone cannot establish deployment readiness.</p>
+      <ResourcesView project={project} />
+      <div className="doc-sub">
+        <h3>Draft steps</h3>
+        <span className="muted small">Validate against the provider's documentation before use.</span>
+      </div>
+      <ol className="steps-list">
+        {deploymentSteps(project).map((s) => (
+          <li key={s}>{s}</li>
+        ))}
+      </ol>
+      <details className="extra">
+        <summary>Scale gate — scale only when value exceeds cost and risk</summary>
+        {GATE.map((g) => (
+          <label key={g.id} className="field">
+            {g.label}
+            <textarea
+              rows={2}
+              aria-label={g.label}
+              placeholder={g.hint}
+              value={gate[g.id] || ""}
+              onChange={(e) => onChange({ ...project, gate: { ...gate, [g.id]: e.target.value } })}
+            />
+          </label>
+        ))}
+      </details>
+    </section>
+  );
+}
+
+// Test run companion card: what's in scope and whether the success measures passed.
+export function TestCard({ project, run, onOpen }) {
+  const tested = run && run.revision === project.revision && run.status !== "running";
+  const results = Object.fromEntries((tested ? run.steps : []).flatMap((s) => (s.output?.measures || []).map((m) => [m.label, m])));
+  const outputs = project.nodes.filter((n) => n.data.measures?.length);
+  return (
+    <aside className="deploy build" aria-label="Test">
+      <h3>Test run</h3>
+      <p className="small">Runs each block in order with built-in sample data, on this computer. No AI model is called, nothing touches a cloud account, and it costs nothing.</p>
+      <p className="muted small">Faded blocks are outside the prototype scope.</p>
+      {outputs.length ? (
+        <ul className="checks">
+          {outputs.flatMap((n) =>
+            n.data.measures.map((m) => {
+              const r = results[m.label];
+              return (
+                <li key={n.id + m.label} className={r ? (r.pass ? "ok" : "bad") : ""}>
+                  <button className="link-plain" onClick={() => onOpen(n.id)}>
+                    {m.label} {m.op} {String(m.target)}
+                    {r && <span className="muted"> · {String(r.value)}</span>}
+                  </button>
+                </li>
+              );
+            }),
+          )}
+        </ul>
+      ) : (
+        <p className="muted small">Success measures live on a final check block.</p>
+      )}
+    </aside>
+  );
+}
+
+const when = (iso) => {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const mins = Math.round((Date.now() - d) / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins} min ago`;
+  if (mins < 60 * 24) return `${Math.round(mins / 60)} h ago`;
+  return d.toLocaleDateString();
+};
+
+// Projects saved under your account on this computer, with a rubbish bin.
+export function ProjectsDialog({ list, currentId, onOpen, onNew, onBin, onRestore, onPurge, folder }) {
+  const [confirm, setConfirm] = React.useState(null);
+  return (
+    <div className="projects">
+      <div className="row-between">
+        <h2>Projects</h2>
+        <button className="button run-button" onClick={onNew}>
+          New project
+        </button>
+      </div>
+      {list.projects.length ? (
+        <ul className="project-list">
+          {list.projects.map((p) => (
+            <li key={p.id} className={p.id === currentId ? "current" : ""}>
+              <button className="open" onClick={() => onOpen(p.id)} disabled={p.id === currentId}>
+                <strong>{p.name}</strong>
+                <small>
+                  {p.id === currentId ? "open now" : when(p.updatedAt)} · {p.blocks} block{p.blocks === 1 ? "" : "s"}
+                </small>
+              </button>
+              <button className="icon bin" aria-label={`Move ${p.name} to the bin`} title="Move to bin" onClick={() => onBin(p.id)}>
+                🗑
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="muted">No saved projects yet. Your current one saves itself as you work.</p>
+      )}
+      {list.bin.length > 0 && (
+        <details className="bin-list">
+          <summary>Rubbish bin · {list.bin.length}</summary>
+          <ul className="project-list">
+            {list.bin.map((p) => (
+              <li key={p.id}>
+                <span className="open">
+                  <strong>{p.name}</strong>
+                  <small>binned {when(p.binnedAt)}</small>
+                </span>
+                <button className="btn" onClick={() => onRestore(p.id)}>
+                  Restore
+                </button>
+                {confirm === p.id ? (
+                  <button className="btn danger" onClick={() => (onPurge(p.id), setConfirm(null))}>
+                    Delete forever?
+                  </button>
+                ) : (
+                  <button className="btn ghost danger" onClick={() => setConfirm(p.id)}>
+                    Delete
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+      <p className="modal-fine">Saved in {folder || "~/.atforma"} under your account on this computer.</p>
+    </div>
+  );
+}