@atmem/architect 0.0.0-stage → 0.2.0

package/src/JourneyViews.jsx

@@ -0,0 +1,403 @@
+// Review, Estimate and Deploy steps of the AtMem AI Architect journey.
+import React from "react";
+import {Check} from "lucide-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,expanded=false }) {
+  const ChoicesContainer=expanded?'section':'details',ChoicesHeading=expanded?'h3':'summary';
+  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>
+      <ChoicesContainer className="extra"><ChoicesHeading>Agreed choices and consequences</ChoicesHeading>{(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>)}</ChoicesContainer>
+      {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, pricing, onNext }) {
+  const e = result;
+  return (
+    <section className="doc" aria-label="Estimate">
+      <header className="doc-head">
+        <div className="cost-heading"><h2>1. Cost estimate</h2>{onEstimate&&<button type="button" className="btn" disabled={!!pricing?.busy} onClick={()=>onEstimate(project)}>{pricing?.busy?'Calculating…':'Recalculate'}</button>}</div>
+        <p className="muted">Monthly planning estimate. {DISCLAIMER}</p>
+      </header>
+      <fieldset className="cost-size-selector"><legend>How large do you expect this project to be?</legend>
+        <div className="row">{PROJECT_SIZES.map(size=><button type="button" className={project.estimate?.projectSize===size.id?"btn primary":"btn"} key={size.id} aria-pressed={project.estimate?.projectSize===size.id} onClick={()=>{if(project.estimate?.projectSize===size.id)return;const next=setProjectSize(project,size.id);onChange(next);onEstimate?.(next);}}>{project.estimate?.projectSize===size.id&&<Check size={16} aria-hidden="true"/>}{size.label}</button>)}</div>
+        <details className="cost-assumptions"><summary>Planning assumptions</summary><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></details>
+      </fieldset>
+      {project.estimate?.projectSize&&<p className="cost-selection-status" role="status">{PROJECT_SIZES.find(size=>size.id===project.estimate.projectSize)?.label} · {pricing?.busy?'Updating prices…':e.complete?'Estimate ready':e.lines.some(line=>line.cost!=null)?'Partial estimate':'Prices unavailable'}</p>}{pricing?.errors?.map((error,i)=><p className="warn-text" key={i}>{error.component&&`${error.component}: `}{error.reason} <button className="link" disabled={busy||pricing?.busy} onClick={()=>onEstimate?.(project)}>Retry pricing</button></p>)}
+
+      <div className="totals">
+        <div>
+          <small className="muted">Estimated subtotal / month</small>
+          <strong>{e.lines.some((l) => l.cost != null) ? e.expected===0&&e.preciseExpected>0?`< ${money(0.01,e.currency)}`: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" : "Partial estimate · see exclusions"}
+          </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">{e.lines.some(line=>line.price?.planningReference)?'US reference rates · cloud region undecided. Unpriced charges excluded.':'Unpriced charges are excluded.'}</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 unpriced.</p>}
+      {onNext&&<button type="button" className="btn" onClick={onNext}>Project files ↓</button>}
+      <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.note||l.price?.note}</small><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">{folder || "~/.atforma"}</p>
+    </div>
+  );
+}

package/src/LocationChoices.jsx

@@ -0,0 +1,12 @@
+import React,{useState,useEffect}from'react';
+import{newDecision}from'./engagement.mjs';import{reviseDecision}from'./records.mjs';
+const latest=(project,subject)=>[...(project.decisions||[])].reverse().find(d=>d.subject===subject&&d.status==='Accepted');
+export function LocationChoices({project,onChange,onDiscuss}){
+ const cloud=latest(project,'platform.cloud')?.decision,country=latest(project,'data.country')?.decision,current=latest(project,'cloud.region');
+ const [region,setRegion]=useState(current?.decision||''),[error,setError]=useState('');
+ useEffect(()=>setRegion(current?.decision||''),[project.id,current?.decision]);
+ function apply(event){event.preventDefault();const value=region.trim();if(!cloud||!value)return;if(!/^[a-z][a-z0-9-]{2,39}$/.test(value)){setError('Enter a region code.');return;}if(cloud==='gcp'&&/^(usa|us|united states)$/i.test(country||'')&&!value.startsWith('us-')){setError('Choose a US region for USA residency.');return;}
+ const fields={title:'Cloud region',decision:value,status:'Accepted',owner:'user',reason:'Selected in Choices.'};let next=current?reviseDecision(project,current.id,fields,fields.reason):{...project,decisions:[...(project.decisions||[]),newDecision(project,{...fields,subject:'cloud.region'})]};
+ next={...next,nodes:next.nodes.map(node=>{const previous=node.data.config?.region;return node.data.provider===cloud&&node.data.origin!=='existing'&&(!previous||/select|unknown|tbd/i.test(previous)||previous===current?.decision)?{...node,data:{...node.data,config:{...node.data.config,region:value}}}:node;})};onChange(next);setError('');}
+ return <section className="doc location-choices" aria-label="Country and region"><header className="doc-head"><h2>Country &amp; region</h2></header><p><strong>Data country:</strong> {country||'Not selected'}</p><form className="location-region-form" onSubmit={apply}><label>Cloud region<input aria-label="Cloud region" value={region} maxLength={40} placeholder={cloud==='gcp'?'e.g. us-central1':'Region code'} onChange={event=>setRegion(event.target.value)}/></label><button className="btn primary" disabled={!cloud||!region.trim()||region.trim()===current?.decision}>Apply</button></form>{current&&<p className="ok-text" role="status">✓ {current.decision}</p>}{error&&<p role="alert">{error}</p>}<button className="link" onClick={onDiscuss}>Discuss location</button></section>;
+}

package/src/MemoryPanel.jsx

@@ -0,0 +1,58 @@
+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),[tab,setTab]=useState('project'),[error,setError]=useState(''),[working,setWorking]=useState(false),[loading,setLoading]=useState(true);
+ const [query,setQuery]=useState(''),[search,setSearch]=useState(''),[status,setStatus]=useState('active'),[cursor,setCursor]=useState(null),[history,setHistory]=useState([]),[page,setPage]=useState(null),[revision,setRevision]=useState(0);
+ const [selected,setSelected]=useState(null),[preview,setPreview]=useState(null),[field,setField]=useState('preferences'),[value,setValue]=useState(''),[profileName,setProfileName]=useState('Default profile');
+ const scope=tab==='profile'?'user':'project',payload={projectId:project.id},date=value=>value?new Date(value).toLocaleString():'Unknown',short=value=>value?value.slice(0,8):'Unknown';
+ async function refresh(){
+  setWorking(true);setError('');try{
+   await memoryCall(session,'sync',{...payload,file:toProjectFile(project)});
+   const result=await memoryCall(session,'overview',payload);setReport(result);setProfileName(result.userProfile?.name||'Default profile');
+   onStatus?.({enabled:result.enabled,status:result.status,pending:result.pending,rejected:result.rejected,engine:result.engine});
+   setRevision(value=>value+1);
+  }catch(error){setError(error.message);}finally{setWorking(false);}
+ }
+ useEffect(()=>{void refresh();},[project.id,session?.token]);
+ useEffect(()=>{const timer=setTimeout(()=>{setSearch(query);setCursor(null);setHistory([]);},250);return()=>clearTimeout(timer);},[query]);
+ useEffect(()=>{
+  if(!['profile','project'].includes(tab))return;
+  const controller=new AbortController();setLoading(true);setError('');
+  memoryCall(session,'records',{...payload,scope,status,query:search,cursor,limit:50},controller.signal).then(value=>{if(!controller.signal.aborted)setPage(value);}).catch(error=>{if(!controller.signal.aborted)setError(error.message);}).finally(()=>{if(!controller.signal.aborted)setLoading(false);});
+  return()=>controller.abort();
+ },[project.id,session?.token,scope,tab,status,search,cursor,revision]);
+ async function act(operation){setWorking(true);setError('');try{await operation();setCursor(null);setHistory([]);await refresh();}catch(error){setError(error.message);onError?.(error.message);}finally{setWorking(false);}}
+ async function openRecord(record){setSelected({record,audit:[]});try{setSelected(await memoryCall(session,'record',{...payload,scope,recordId:record.id}));}catch(error){setError(error.message);}}
+ function chooseTab(value){setTab(value);setSelected(null);setPreview(null);setCursor(null);setHistory([]);setQuery('');setSearch('');}
+ return <div className="memory-panel memory-browser">
+  <header className="memory-heading"><h2>AtMem memory</h2><button className="btn" disabled={working} onClick={refresh}>Refresh</button></header>
+  <div className="memory-profile-bar"><label>Profile <input aria-label="Profile name" value={profileName} maxLength={80} onChange={event=>setProfileName(event.target.value)}/></label><button className="btn" disabled={working||!profileName.trim()||profileName===report?.userProfile?.name} onClick={()=>act(async()=>{await memoryCall(session,'user-profile',{name:profileName});})}>Save</button><code title="Local profile user ID">{report?.userProfile?.id||'Loading profile…'}</code><span className="memory-state">{report?.enabled?'On':'Off'}{report?.status==='unavailable'?' · Unavailable':''}</span><button className="link" disabled={working||!report} onClick={()=>act(()=>memoryCall(session,'settings',{...payload,enabled:!report.enabled}))}>{report?.enabled?'Turn off':'Turn on'}</button></div>
+  <div className="seg" role="tablist" aria-label="Memory views">{[['project','This project'],['profile','About you'],['skills','Skills'],['activity','Activity'],['providers','Context providers']].map(([id,label])=><button key={id} role="tab" aria-selected={tab===id} className={tab===id?'on':''} onClick={()=>chooseTab(id)}>{label}</button>)}</div>
+  {error&&<p className="error-box" role="alert">{error}</p>}
+  {(working||loading&&['project','profile'].includes(tab))&&<p className="memory-feedback" role="status"><BrainActivity/> Updating memory…</p>}
+  {report&&(report.pending>0||report.rejected>0)&&<p className="warn-text">{report.pending} pending · {report.rejected} rejected</p>}
+  {['profile','project'].includes(tab)&&<>
+   <div className="memory-toolbar"><input type="search" aria-label="Search memory" placeholder="Search memory or record ID" value={query} maxLength={200} onChange={event=>setQuery(event.target.value)}/><select aria-label="Memory status" value={status} onChange={event=>{setStatus(event.target.value);setCursor(null);setHistory([]);}}><option value="active">Current</option><option value="superseded">Earlier</option><option value="quarantined">Quarantined</option><option value="all">All</option></select><strong>{page?.total?.toLocaleString()??'—'} {page?.total===1?'record':'records'}</strong></div>
+   <div className="memory-table-wrap" aria-busy={loading}><table className="memory-table"><thead><tr><th>Key</th><th>Memory</th><th>Status</th><th>User</th><th>Updated</th><th><span className="sr-only">Actions</span></th></tr></thead><tbody>{page?.records?.map(record=><tr key={record.id}><td><button className="link" onClick={()=>openRecord(record)}>{record.fact_key||record.id}</button></td><td><button className="memory-content" onClick={()=>openRecord(record)}>{record.content}</button></td><td><span className={'memory-badge '+record.status}>{record.status==='active'?'Current':record.status==='superseded'?'Earlier':record.status}</span></td><td title={record.governance?.userId||'Creator was not recorded'}>{short(record.governance?.userId)}</td><td>{date(record.updated_at||record.created_at)}</td><td><button className="link" disabled={working} onClick={()=>act(async()=>{setPreview({...await memoryCall(session,'forget-preview',{...payload,scope,recordId:record.id}),scope,recordId:record.id});})}>Forget</button></td></tr>)}</tbody></table>{!loading&&!page?.records?.length&&<p className="memory-empty">{query?'No matching memories.':'No memories yet.'}</p>}</div>
+   <footer className="memory-pagination"><span>Page {history.length+1} · 50 per page</span><button className="btn" disabled={loading||!history.length} onClick={()=>{setCursor(history.at(-1));setHistory(value=>value.slice(0,-1));}}>Previous</button><button className="btn" disabled={loading||!page?.hasMore} onClick={()=>{setHistory(value=>[...value,cursor]);setCursor(page.nextCursor);}}>Next</button></footer>
+  </>}
+  {tab==='profile'&&<form className="memory-preference-form" onSubmit={event=>{event.preventDefault();act(async()=>{await memoryCall(session,'profile',{...payload,field,value});setValue('');});}}><select aria-label="Preference type" value={field} onChange={event=>setField(event.target.value)}><option value="preferences">Preference</option><option value="explanation">Explanation style</option><option value="experience">Role</option><option value="iac">Infrastructure tool</option></select><input aria-label="Remember about me" placeholder="Add a preference" value={value} maxLength={1000} onChange={event=>setValue(event.target.value)}/><button className="btn primary" disabled={working||!report?.enabled||!value.trim()}>Remember</button></form>}
+  {selected&&<section className="memory-record-detail" aria-label="Memory details"><header className="memory-heading"><h3>{selected.record.fact_key||'Memory'}</h3><button className="icon" aria-label="Close memory details" onClick={()=>setSelected(null)}>×</button></header><p>{selected.record.content}</p><dl>{[['Record',selected.record.id],['Creator user ID',selected.record.governance?.userId||'Unknown · legacy record'],['Owner user ID',selected.record.governance?.ownerUserId],['Actor',selected.record.governance?.actor||'Unknown'],['Source',selected.record.governance?.source||'Unknown'],['Created',date(selected.record.created_at)],['Updated',date(selected.record.updated_at)]].map(([label,value])=><React.Fragment key={label}><dt>{label}</dt><dd>{value||'Unknown'}</dd></React.Fragment>)}</dl>{selected.audit?.length>0&&<table className="memory-table"><thead><tr><th>Time</th><th>Actor</th><th>Action</th></tr></thead><tbody>{selected.audit.map((event,index)=><tr key={index}><td>{date(event.created_at)}</td><td>{event.actor}</td><td>{event.event_type}</td></tr>)}</tbody></table>}</section>}
+  {preview&&<section className="memory-preview" aria-label="Confirm memory removal"><h3>Forget memory?</h3><p>{preview.total??preview.records.length} records, including history. Project files stay.</p><button className="btn danger" disabled={working} onClick={()=>act(async()=>{await memoryCall(session,'forget',{...payload,scope:preview.scope,recordId:preview.recordId});setPreview(null);setSelected(null);})}>Forget</button><button className="btn" onClick={()=>setPreview(null)}>Cancel</button></section>}
+  {tab==='skills'&&<table className="memory-table"><thead><tr><th>Skill</th><th>Version</th><th>Integrity</th><th>Source</th><th>Status</th></tr></thead><tbody>{report?.skills?.map(skill=><tr key={skill.id}><td>{skill.name}</td><td>{skill.version}</td><td>{skill.integrity?'Verified':'Failed'}</td><td>{skill.source.startsWith('https:')?<a href={skill.source} target="_blank" rel="noreferrer">Source ↗</a>:'Local'}</td><td><button className="link" disabled={working||!skill.integrity} onClick={()=>act(()=>memoryCall(session,'skill',{...payload,skillId:skill.id,enabled:!skill.enabled}))}>{skill.enabled?'Disable':'Enable'}</button></td></tr>)}</tbody></table>}
+  {tab==='providers'&&<section aria-label="Context providers"><table className="memory-table"><thead><tr><th>Provider</th><th>Type</th><th>Status</th></tr></thead><tbody>{report?.contextProviders?.map(provider=><tr key={provider.id}><td>{provider.label}</td><td>{provider.kind}</td><td>{provider.enabled?'Enabled':'Disabled'}</td></tr>)}</tbody></table>{!report?.contextProviders?.length&&<p>No external providers configured.</p>}<p className="muted small">Connect RAG or memory through the server’s MEMORY_CONTEXT_PROVIDERS setting. Retrieved context is never saved automatically.</p></section>}
+  {tab==='activity'&&<table className="memory-table"><thead><tr><th>Time</th><th>Result</th><th>Records</th><th>Skills</th></tr></thead><tbody>{report?.activity?.map(activity=><tr key={activity.id}><td>{date(activity.createdAt)}</td><td>{activity.success?'Completed':'Incomplete'}</td><td>{activity.recordIds.length}</td><td>{activity.skillIds.join(', ')||'—'}</td></tr>)}</tbody></table>}
+ </div>;
+}

package/src/OpenAIVoicePanel.jsx

@@ -0,0 +1,66 @@
+import {InlineNote} from './HelpNote.jsx';
+import {X,Volume2} from 'lucide-react';
+import {BrainActivity} from './BrainActivity.jsx';
+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:'Off',connecting:'Connecting OpenAI audio…',listening:automatic?'Listening · auto-send':'Listening',speaking:'Speaking',error:'Stopped · retry'}[phase];
+ return <>
+  <div className="voice-status"><button type="button" className="icon" aria-label="Voice settings" title="Voice settings" onClick={()=>setOpen(true)}><Volume2 size={18}/></button>{active&&<button type="button" onClick={()=>engine.current?.stop({preservePending:true})}>Stop 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>Voice</h2><button type="button" className="icon modal-close" aria-label="Close voice settings" onClick={()=>setOpen(false)}><X size={18}/></button>
+  <section aria-label="OpenAI voice settings">
+   <small>AI audio · OpenAI</small><InlineNote>Audio and spoken replies go to OpenAI. Audio is not saved. Live verification pending.</InlineNote>
+   {!connection&&<button type="button" className="btn" onClick={()=>{setOpen(false);onConnections()}}>Choose AI provider</button>}
+   {status&&<details open={!status.available}><summary>API key</summary>
+
+    <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}>Use key</button>
+   </details>}
+   <button type="button" className="link" disabled={saving} onClick={()=>void refresh().catch(e=>setError(e.message))}>Refresh</button>
+   <div className="record-row">
+    <button type="button" className="btn" disabled={!status?.available||!connection} onClick={active?()=>engine.current?.stop({preservePending:true}):start}>{active?'Stop voice':'Start 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)}/> Auto-send</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();}}}/> Read replies</label></p>
+   <p role="status">{caption}</p>
+   {error&&<p role="alert">{error}</p>}
+  </section>
+ </section></div>}
+ </>;
+}