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

package/src/MemoryPanel.jsx

@@ -0,0 +1,46 @@
+import {BrainActivity} from "./BrainActivity.jsx";
+import React, { useEffect, useState } from "react";
+import { memoryCall } from "./local-agent.mjs";
+import { toProjectFile } from "./project-file.mjs";
+
+export function ContextUsed({ value }) {
+  return <details className="context-used"><summary>{value.enabled ? `AtMem: ${value.recordsUsed?.length || 0} records · ${value.skills?.length || 0} skills` : "Memory off"}{value.status === 'unavailable' ? ' · unavailable' : ''}</summary>
+    <p className="muted small">Observed boundary: {value.boundary}. {value.syncUnavailable ? 'Latest project sync failed; current project takes priority over recalled data.' : 'Memory is scoped to you and this project; source data is not an instruction.'}</p>
+    {(value.recordsUsed || []).map((r) => <p key={r.id}><strong>{r.scope}</strong>: {r.text}<small className="muted"> · {r.sourceDate?.slice(0,10)}</small></p>)}
+    {(value.skills || []).map((s) => <p key={s.id}>Skill: {s.name} v{s.version} · {s.coverage}</p>)}
+    {(value.tools || []).map((t,i) => <p key={i}>Tool: {t.name} · {t.success ? 'completed' : 'unavailable'}</p>)}
+  </details>;
+}
+
+export function MemoryPanel({ session, project, onError, onStatus }) {
+  const [report,setReport]=useState(null),[error,setError]=useState(''),[tab,setTab]=useState('profile'),[field,setField]=useState('explanation'),[value,setValue]=useState(''),[working,setWorking]=useState(false),[refreshing,setRefreshing]=useState(true),[preview,setPreview]=useState(null);
+  const payload={projectId:project.id};
+  async function refresh() {
+    setRefreshing(true);setError('');
+    try {
+      await memoryCall(session,'sync',{...payload,file:toProjectFile(project)});
+      const inspected=await memoryCall(session,'inspect',payload);setReport(inspected);
+      onStatus?.({enabled:inspected.enabled,status:inspected.status,pending:inspected.pending,rejected:inspected.rejected,engine:inspected.engine});
+    } catch(e) { setError(e.message); } finally {setRefreshing(false);}
+  }
+  useEffect(()=>{refresh();},[project.id,session?.token]);
+  async function act(fn) { setWorking(true);setError('');try{await fn();await refresh();}catch(e){setError(e.message);onError?.(e.message);}finally{setWorking(false);} }
+  const records=report?.[tab] || [];
+  return <div className="memory-panel">
+    <h2>AtMem dashboard</h2>
+    <p className="muted small">Durable preferences and confirmed decisions only. Drafts, canvas comments and routine edits stay in your project; they do not become long-term memory.</p>
+    {(working||refreshing)&&<p role="status"><BrainActivity/> Updating memory…</p>}
+    {error && <p className="error-box" role="alert">{error}</p>}
+    {!report ? <button className="btn" onClick={refresh}>Retry memory connection</button> : <>
+      <div className="row"><span className={report.status==='unavailable'?'warn-text':'muted'}>{report.enabled ? report.status==='unavailable'?'Memory unavailable — project only':`${report.engine} · connected` : 'Memory off for this project'}</span><span className="small">{report.pending} pending · {report.rejected} rejected</span><button className="btn ghost" disabled={working} onClick={()=>act(async()=>{await memoryCall(session,'settings',{...payload,enabled:!report.enabled});})}>{report.enabled?'Turn memory off':'Turn memory on'}</button></div>
+      <p className="muted small">Policy: {report.policy}. Corrections supersede earlier values. Forget explicitly removes the selected memory and its history; project files remain separate.</p>
+      <div className="seg" role="tablist" aria-label="Memory views">{[['profile','About you'],['project','This project'],['skills','Skills'],['activity','Activity']].map(([id,label])=><button key={id} role="tab" aria-selected={tab===id} className={tab===id?'on':''} onClick={()=>{setTab(id);setPreview(null);}}>{label}</button>)}</div>
+      {tab==='profile' && <form className="memory-profile" onSubmit={e=>{e.preventDefault();act(async()=>{await memoryCall(session,'profile',{...payload,field,value});setValue('');});}}><label className="field">Preference<select aria-label="Preference type" value={field} onChange={e=>setField(e.target.value)}><option value="explanation">How to explain things</option><option value="experience">Experience and role</option><option value="iac">Infrastructure tool preference</option><option value="preferences">Other confirmed preferences</option></select></label><label className="field">What should AtMem AI Architect remember?<textarea aria-label="Remember about me" value={value} maxLength={1000} onChange={e=>setValue(e.target.value)} placeholder="For example: explain things concisely; I prefer Pulumi." /></label><button className="btn primary" disabled={working||!report.enabled||!value.trim()}>Remember preference</button></form>}
+      {(tab==='profile'||tab==='project') && <><div className="resource-schedule">{records.map(r=><article key={r.id}><strong>{r.status==='active'?'Current':'Earlier value'} · {r.fact_key}</strong><span>{r.content}</span><small>{r.created_at?.slice(0,10)} · {r.id}</small>{r.status==='active' && <button className="btn ghost" disabled={working} onClick={()=>act(async()=>setPreview({...(await memoryCall(session,'forget-preview',{...payload,scope:tab==='profile'?'user':'project',recordId:r.id})),scope:tab==='profile'?'user':'project',recordId:r.id}))}>Preview forget</button>}</article>)}</div>{!records.length&&<p className="muted">No memories recorded in this view yet.</p>}</>}
+      {preview && <section className="memory-preview"><h3>Review removal</h3><p>{preview.notice}</p><p>{preview.records.length} current/historical records will be removed.</p><button className="btn danger" disabled={working} onClick={()=>act(async()=>{await memoryCall(session,'forget',{...payload,scope:preview.scope,recordId:preview.recordId});setPreview(null);})}>Confirm forget</button><button className="btn ghost" onClick={()=>setPreview(null)}>Keep memory</button></section>}
+      {tab==='skills' && <div className="resource-schedule">{report.skills.map(s=><article key={s.id}><strong>{s.name} v{s.version}</strong><small>{s.coverage} · integrity {s.integrity?'verified':'failed'}</small><span>{s.source.startsWith('https:')?<a href={s.source} target="_blank" rel="noreferrer">Pinned source</a>:s.source}</span><small>SHA256: {s.digest.slice(0,16)}… · tools: {s.tools.join(', ')}</small><button className="btn ghost" disabled={working||!s.integrity} onClick={()=>act(async()=>memoryCall(session,'skill',{...payload,skillId:s.id,enabled:!s.enabled}))}>{s.enabled?'Disable':'Enable'} {s.id}</button></article>)}<p className="muted small">Upstream files are pinned references with their licences. Missing companion files and cloud tool packages are not activated. AtMem AI Architect loads its reviewed specialist guidance; no bundled scripts run.</p></div>}
+      {tab==='activity' && <div className="resource-schedule">{report.activity.map(a=><article key={a.id}><strong>{a.success?'Architect turn completed':'Turn did not complete'} · {a.createdAt.slice(0,19)}</strong><span>{a.recordIds.length} memory records · skills: {a.skillIds.join(', ')}</span><small>{a.boundary} · context digest {a.contextDigest.slice(0,16)}…</small>{a.tools.map((t,i)=><small key={i}>{t.name}: {t.success?'completed':'unavailable'}</small>)}</article>)}{!report.activity.length&&<p className="muted">No recorded architect turns for this project yet.</p>}</div>}
+      <button className="btn ghost" disabled={working} onClick={()=>act(refresh)}>Refresh / retry pending sync</button>
+    </>}
+  </div>;
+}

package/src/OpenAIVoicePanel.jsx

@@ -0,0 +1,65 @@
+import React,{useEffect,useRef,useState} from 'react';
+import {OpenAIVoice} from './openai-voice.mjs';
+
+export function OpenAIVoicePanel({session,connection,transportRef,onTranscript,onStart,onConnections}){
+ const [status,setStatus]=useState(null),[phase,setPhase]=useState('off'),[error,setError]=useState(''),[key,setKey]=useState(''),[saving,setSaving]=useState(false),[automatic,setAutomatic]=useState(false),[readReplies,setReadReplies]=useState(true),[open,setOpen]=useState(false);
+ const props=useRef({onTranscript,onStart,automatic});props.current={onTranscript,onStart,automatic};
+ const engine=useRef(null),live=useRef(true);
+ const active=!['off','error'].includes(phase);
+ async function refresh(){
+  const response=await fetch('/api/voice/openai/status');
+  if(!response.ok)throw Error('The voice service is unavailable. Check the Architect server.');
+  const body=await response.json();if(live.current)setStatus(body);
+ }
+ useEffect(()=>{
+  live.current=true;setPhase('off');void refresh().catch(e=>{if(live.current)setError(e.message)});
+  return()=>{live.current=false;engine.current?.stop();if(transportRef.current===engine.current)transportRef.current=null;};
+ },[session.token]);
+ async function configure(){
+  setSaving(true);setError('');
+  try{
+   const response=await fetch('/api/voice/openai/credentials',{method:'POST',headers:{Authorization:`Bearer ${session.token}`,'Content-Type':'application/json'},body:JSON.stringify({key})});
+   if(!response.ok)throw Error('The voice key could not be configured. Check the server connection.');
+   setKey('');await refresh();
+  }catch(e){setError(e.message)}finally{setSaving(false)}
+ }
+ function start(){
+  if(active||!status?.available||!connection)return;
+  props.current.onStart?.();setError('');engine.current?.stop();
+  const current=new OpenAIVoice({session,
+   onState:value=>{if(live.current)setPhase(value)},onError:value=>{if(live.current)setError(value)},
+   onTranscript:(text,meta)=>{
+    if(props.current.automatic&&!meta.ordered){setAutomatic(false);setError('Automatic sending paused. Review the retained transcript in chat.');}
+    props.current.onTranscript(text,props.current.automatic&&meta.ordered);
+   }});
+  current.readReplies=readReplies;engine.current=current;transportRef.current=current;void current.start().then(()=>{if(live.current&&current.channel?.readyState==='open')setOpen(false)});
+ }
+ const caption={off:'Voice is off. Local dictation remains available from the microphone button.',connecting:'Connecting OpenAI audio…',listening:automatic?'Listening — completed turns go to your selected Architect. Existing drafts remain for review.':'Listening — review the transcript in chat, then Send.',speaking:'Speaking the written Architect reply.',error:'Voice stopped; continue in text or retry.'}[phase];
+ return <>
+  <div className="voice-status"><button type="button" onClick={()=>setOpen(true)}>OpenAI voice</button>{active&&<button type="button" onClick={()=>engine.current?.stop({preservePending:true})}>Stop OpenAI voice</button>}{active&&error.includes('playback')&&<button type="button" onClick={()=>void engine.current?.resumeAudio()}>Enable voice playback</button>}{(active||error)&&<span role="status">{error||caption}</span>}</div>
+  {open&&<div className="backdrop" onMouseDown={event=>{if(event.target===event.currentTarget)setOpen(false)}}><section className="modal" role="dialog" aria-modal="true" aria-label="OpenAI voice" onKeyDown={event=>{if(event.key==='Escape'){event.stopPropagation();setOpen(false)}}}>
+  <h2>OpenAI voice</h2><button type="button" className="btn ghost" onClick={()=>setOpen(false)}>Close voice settings</button>
+  <section aria-label="OpenAI voice settings">
+   <p>Voice preview — live OpenAI audio verification is pending.</p>
+   <p>AI-generated audio from OpenAI. Microphone audio and spoken reply text are sent to OpenAI. Architect does not save the audio. Written chat remains the source for design decisions.</p>
+   <p>Architecture answers still use {connection?`${connection.model}${connection.effort?' · '+connection.effort:''}`:'your selected Architect'}. The audio model is {status?.model||'loading'}.</p>
+   {!connection&&<button type="button" className="btn" onClick={()=>{setOpen(false);onConnections()}}>Choose Architect connection</button>}
+   {status&&<details open={!status.available}><summary>Voice API setup</summary>
+    <p>Configure a dedicated OpenAI API key for voice. Your Architect connection stays unchanged. The server keeps this key in memory for its current session. An existing server OpenAI key can also be used.</p>
+    <label className="dialog-field">OpenAI voice API key<input aria-label="OpenAI voice API key" type="password" autoComplete="off" value={key} onChange={event=>setKey(event.target.value)}/></label>
+    <button type="button" className="btn" disabled={saving||active||!key.trim()} onClick={configure}>Configure voice key</button>
+   </details>}
+   <button type="button" className="link" disabled={saving} onClick={()=>void refresh().catch(e=>setError(e.message))}>Check voice connection</button>
+   <div className="record-row">
+    <button type="button" className="btn" disabled={!status?.available||!connection} onClick={active?()=>engine.current?.stop({preservePending:true}):start}>{active?'Stop OpenAI voice':'Start OpenAI voice'}</button>
+    {active&&<button type="button" className="btn" onClick={()=>engine.current?.interrupt()}>Stop speaking</button>}
+    {active&&error.includes('playback')&&<button type="button" className="btn" onClick={()=>void engine.current?.resumeAudio()}>Enable voice playback</button>}
+   </div>
+   <p><label><input type="checkbox" checked={automatic} onChange={event=>setAutomatic(event.target.checked)}/> Send spoken turns automatically</label></p>
+   <p><label><input type="checkbox" checked={readReplies} onChange={event=>{setReadReplies(event.target.checked);if(engine.current){engine.current.readReplies=event.target.checked;if(!event.target.checked)engine.current.interrupt();}}}/> Speak Architect replies</label></p>
+   <p role="status">{caption}</p>
+   {error&&<p role="alert">{error}</p>}
+  </section>
+ </section></div>}
+ </>;
+}

package/src/OutputsView.jsx

@@ -0,0 +1,65 @@
+import {CodePreview} from './CodePreview.jsx';
+import {BrainActivity} from "./BrainActivity.jsx";
+import React,{useEffect,useState} from 'react';
+import {EmulationPanel} from './EmulationPanel.jsx';
+import {outputBundle} from './output-bundle.mjs';
+import {ImplementationDelivery} from './ImplementationDelivery.jsx';
+
+// Render generated Markdown as text elements, never executable HTML.
+function Document({text}){
+  const lines=text.split('\n'),blocks=[];let paragraph=[],list=[],ordered=false,code=null;
+  const clean=s=>s.replace(/\*\*|`/g,'');
+  function flush(){if(paragraph.length){blocks.push(<p key={blocks.length}>{clean(paragraph.join(' '))}</p>);paragraph=[];}if(list.length){const List=ordered?'ol':'ul';blocks.push(<List key={blocks.length}>{list.map((line,i)=><li key={i}>{clean(line)}</li>)}</List>);list=[];}}
+  for(const line of lines){
+    if(line.startsWith('```')){flush();if(code!==null){blocks.push(<pre key={blocks.length}>{code.join('\n')}</pre>);code=null;}else code=[];continue;}
+    if(code!==null){code.push(line);continue;}
+    const heading=line.match(/^(#{1,6})\s+(.+)/);
+    if(heading){flush();const Tag=`h${Math.min(heading[1].length+1,6)}`;blocks.push(<Tag key={blocks.length}>{heading[2]}</Tag>);}
+    else if(/^\s*([-*]|\d+\.)\s/.test(line)){const nextOrdered=/^\s*\d+\./.test(line);if(paragraph.length||(list.length&&ordered!==nextOrdered))flush();ordered=nextOrdered;list.push(line.replace(/^\s*([-*]|\d+\.)\s/,''));}
+    else if(line.startsWith('|')){flush();if(!/^\|[- :|]+\|$/.test(line))blocks.push(<p className="output-table-row" key={blocks.length}>{clean(line)}</p>);}
+    else if(!line.trim())flush();else paragraph.push(line.replace(/^> /,''));
+  }
+  flush();return <article className="output-document">{blocks}</article>;
+}
+function Preview({name,content}){
+ const [url,setUrl]=useState(null);
+ const visual=/\.(pdf|png|svg)$/.test(name);
+ useEffect(()=>{
+   if(!visual){setUrl(null);return;}
+   const type=name.endsWith('.pdf')?'application/pdf':name.endsWith('.svg')?'image/svg+xml':'image/png';
+   const next=URL.createObjectURL(new Blob([content],{type}));setUrl(next);return ()=>URL.revokeObjectURL(next);
+ },[name,content,visual]);
+ if(visual)return !url?<p role="status"><BrainActivity/> Preparing preview…</p>:name.endsWith('.pdf')?<iframe className="output-pdf" src={url} title={`Preview ${name}`}/>:<img className="output-image" src={url} alt={`Preview ${name}`}/>;
+ if(name.endsWith('.md'))return <Document text={content}/>;
+ return <CodePreview className="output-code" content={content} name={name}/>;
+}
+export function OutputsView({project,run,environment,session,onDownload,onBack,emulation,onDiscuss,discussionBusy,onBuild,onSave}){
+ const [bundle,setBundle]=useState(null),[error,setError]=useState(''),[loading,setLoading]=useState(true),[retry,setRetry]=useState(0),[selected,setSelected]=useState('spec-kit/implementation-spec.md');
+ useEffect(()=>{
+   let active=true;setLoading(true);setError('');
+   outputBundle(project,run,environment).then(value=>{if(active){setBundle(value);setLoading(false);}}).catch(e=>{if(active){setError(e.message);setLoading(false);}});
+   return ()=>{active=false;};
+ },[project,run,environment,retry]);
+ const readiness=bundle?.files['spec-kit/readiness.json']?JSON.parse(bundle.files['spec-kit/readiness.json']):null;
+ const groups=bundle?[['Spec Kit',Object.keys(bundle.files).filter(n=>n.startsWith('spec-kit/')).sort((a,b)=>Number(b.includes('implementation-spec'))-Number(a.includes('implementation-spec')))],['Specification & handoff',Object.keys(bundle.files).filter(n=>!n.includes('/')&&!/^diagram\./.test(n))],['Design',Object.keys(bundle.files).filter(n=>/^diagram\./.test(n))],['Terraform',Object.keys(bundle.files).filter(n=>n.startsWith('terraform/'))]]:[];
+ return <section className="doc outputs-view" aria-label="Outputs">
+  <header className="doc-head"><h2>Delivery</h2><p className="muted">Browse the requirements, design, infrastructure and recorded checks. After generation in Review, download one complete project package here.</p></header>
+  <button className="link" onClick={onBack}>Back to architecture</button>
+  {session?.engineeringEnabled&&<ImplementationDelivery key={project.id} project={project} session={session} onBuild={onBuild} onSave={onSave} contextBusy={discussionBusy}/>}
+  <details open={!session?.engineeringEnabled}><summary>Design draft: requirements, Spec Kit and infrastructure</summary>
+  <p>Reference documents from the current design. The final package above retains both the submitted design and the latest saved design, with any differences identified.</p>
+  {!session?.engineeringEnabled&&<><p>Implementation generation is unavailable in this session. This package contains the design and engineering tasks; it does not contain a verified application.</p><button className="btn" disabled={!bundle||loading||!!error} onClick={()=>onDownload(bundle)}>Download design package (ZIP)</button></>}
+
+  {loading&&<p role="status"><BrainActivity/> Preparing the current outputs…</p>}
+  {error&&<div role="alert"><p>{error}</p><button className="btn" onClick={()=>setRetry(n=>n+1)}>Retry preparing outputs</button></div>}
+  {bundle&&!loading&&!error&&<>
+   <p className="muted small">Design r{bundle.manifest.designRevision} · {Object.keys(bundle.files).length} files · Generated {new Date(bundle.manifest.generatedAt).toLocaleString()}. Changes to the project refresh this directory. Download contains these exact files.</p>
+   {readiness&&<aside aria-label="Handoff readiness"><strong>Engineering handoff — decisions and implementation remain</strong><p>{readiness.counts.priorityDecisions} priority decisions · {readiness.counts.generatedFoundations} generated foundations / {readiness.counts.components} logical components</p><p>Next: {readiness.nextAction}</p><button className="link" onClick={()=>setSelected('spec-kit/readiness.md')}>Review handoff gaps</button></aside>}
+   <div className="outputs-browser" data-snapshot-id={bundle.manifest.snapshotId}>
+    <nav className="outputs-directory" aria-label="Output files">{groups.map(([title,names])=><details key={title} open><summary>{title}</summary>{names.map(name=><button type="button" key={name} aria-current={selected===name?'page':undefined} onClick={()=>setSelected(name)} title={name}>{name.includes('/')?name.split('/').at(-1):name}</button>)}</details>)}</nav>
+    <div className="output-preview" aria-label="Output preview"><h3>{selected}</h3>{bundle.files[selected]!==undefined&&<Preview key={selected} name={selected} content={bundle.files[selected]}/>}</div>
+   </div>
+  </>}
+  </details>
+ </section>;
+}

package/src/TerraformView.jsx

@@ -0,0 +1,57 @@
+import {CodePreview} from './CodePreview.jsx';
+import {moduleValidationCoverage} from './terraform-validation-coverage.mjs';
+import {generationQuality} from './generation-quality.mjs';
+import {BrainActivity} from "./BrainActivity.jsx";
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {EmulationPanel} from './EmulationPanel.jsx';
+import {terraformSketch} from './terraform.mjs';
+import {resourcePlan} from './resources.mjs';
+import {toProjectFile} from './project-file.mjs';
+
+export function TerraformView({project,environment,session,onDelivery,onBack,emulation,onDiscuss,discussionBusy,onBuild}){
+  const files=useMemo(()=>terraformSketch(project,environment),[project,environment]);
+  const plan=useMemo(()=>resourcePlan(project),[project]);
+  const [file,setFile]=useState('main.tf.json'),[step,setStep]=useState('code'),[result,setResult]=useState(null),[running,setRunning]=useState(false);
+  const controller=useRef(null);
+  const key=JSON.stringify(files);
+  useEffect(()=>{setResult(null);setRunning(false);controller.current?.abort();controller.current=null;return ()=>{controller.current?.abort();controller.current=null;};},[key]);
+  async function test(){
+    if(running)return;
+    const request=new AbortController();controller.current=request;setRunning(true);setResult(null);
+    const timer=setTimeout(()=>request.abort(),500000);
+    try{
+      toProjectFile(project);
+      if(!session?.token)throw Error('Connect the local service before running Terraform validation.');
+      const response=await fetch('/api/terraform/validate',{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${session.token}`},body:JSON.stringify({project,environment}),signal:request.signal});
+      const body=await response.json();if(!response.ok)throw Error(typeof body.detail==='string'?body.detail:'Terraform validation failed.');
+      if(!request.signal.aborted)setResult({...moduleValidationCoverage(body,quality.modules),filesKey:key});
+    }catch(e){if(!request.signal.aborted)setResult({status:'failed',message:e.message,checks:[]});else if(controller.current===request)setResult({status:'failed',message:'Validation stopped or timed out; no success was recorded.',checks:[]});}
+    finally{clearTimeout(timer);if(controller.current===request)setRunning(false);}
+  }
+  const quality=useMemo(()=>generationQuality(project,plan,files),[project,plan,files]);
+  const gaps=JSON.parse(files['main.tf.json']).locals.unfinished_work;
+  return <section className="doc terraform-view" aria-label="Terraform">
+    <header className="doc-head"><h2>Generated infrastructure</h2><p className="muted">Review generated resources, required integrations and the evidence for this configuration. Provider-specific capabilities and their limits are recorded in the export.</p></header>
+    <div className="row"><button className="link" onClick={onBack}>Back to architecture</button><button className="btn" onClick={onDelivery}>Continue to Delivery</button></div>
+    <aside aria-label="Export quality"><strong>{quality.infrastructureComplete?'Infrastructure generated — validation required':'Implementation work remains'}</strong><p>{quality.providers.join(', ')||'No deployment provider selected'} · {quality.components.length} components · {quality.findings.length} coverage findings</p><p className="small">{result?.status==='passed'&&result.filesKey===key?'Current configuration checks passed. These checks apply to this configuration.':'No current validation receipt is attached. Run Terraform checks to generate evidence for these files.'} Application behavior and account deployment require their own tests.</p></aside>
+
+    <div className="seg" role="tablist" aria-label="Terraform steps"><button role="tab" aria-selected={step==='code'} onClick={()=>setStep('code')}>1. Resources & code</button><button role="tab" aria-selected={step==='test'} onClick={()=>setStep('test')}>2. Test Terraform</button></div>
+    {step==='code'?<>
+      <h3>Resource coverage</h3>
+      {plan.rows.map(r=><p key={r.id||r.address}><strong>{r.label||r.service}</strong> — {r.terraform}<br/><small>{r.provider} · {r.region}</small></p>)}
+      {!!plan.gaps.length&&<details><summary>{plan.gaps.length} implementation gaps</summary><ul>{plan.gaps.map((g,i)=><li key={i}>{g}</li>)}</ul></details>}
+      <div className="row" aria-label="Terraform files">{Object.keys(files).map(name=><button className="btn" key={name} aria-pressed={file===name} onClick={()=>setFile(name)}>{name}</button>)}</div>
+      <CodePreview className="terraform-code" name={file} content={files[file]}/>
+      <button className="btn primary" onClick={()=>setStep('test')}>Continue to Test Terraform →</button>
+    </>:<>
+      <h3>Test this Terraform draft</h3>
+      <p>Checks the generated configuration against Terraform and the provider schema, then runs available generated application tests and mock-provider plans. Provider initialization downloads the official provider if needed; it uses a temporary directory with no cloud credentials or backend.</p>
+      <p><strong>Resource and integration coverage: {gaps.length?'Incomplete':'No recorded gaps'}</strong>{gaps.length?` — ${gaps.length} unfinished tasks block a deployment plan.`:''}</p>
+      <button className="btn primary" disabled={running} onClick={test}>{running?'Testing Terraform…':'Run Terraform checks'}</button>
+      {running&&<p role="status"><BrainActivity/> Initializing providers, validating configuration and running generated local tests. This may take a few minutes.</p>}
+      {result&&<div role="status"><h3>{result.status==='passed'?'Configuration validated':result.status==='unavailable'?'Terraform validation not run':result.status==='incomplete'?'Validation incomplete':'Validation failed'}</h3><p>{result.message}</p>{result.checks?.map((c,i)=><details key={i}><summary>{c.passed?'Passed':'Failed'}: {c.name}</summary><pre className="terraform-code">{c.output}</pre></details>)}</div>}
+      <h3>Cloud deployment plan — not run</h3><p>A real plan must verify the selected account, region, permissions and proposed changes. Cloud access is not connected. Passing these checks does not prove a real deployment or live application behavior.</p>
+      <button className="btn" disabled>Run cloud plan (under development)</button>
+    </>}
+  </section>;
+}