Step 1 — brief

A character, in your own words.

Soul → Self → Mask → Surface. Persona writes downward; you write upward.

Brief — write like you'd describe someone to a friend

setBrief(e.target.value)} rows={6}/>
        </div>

<div className="grid grid-2" style={{gap:10, marginBottom:14}}>
          <div className="field"><label>Language</label>
            <select className="select" value={adv.language} onChange={e=>setAdv({...adv,language:e.target.value})}>
              <option value="tr">Türkçe</option><option value="en">English</option><option value="es">Español</option><option value="de">Deutsch</option><option value="fr">Français</option><option value="ja">日本語</option><option value="zh">中文</option>
            </select>
          </div>
          <div className="field"><label>Archetype hint</label>
            <select className="select" value={adv.archetype} onChange={e=>setAdv({...adv,archetype:e.target.value})}>
              <option value="sage">Sage</option><option value="witness">Witness</option><option value="caregiver">Caregiver</option><option value="trickster">Trickster</option><option value="craftsman">Craftsman</option><option value="auto">— let model choose —</option>
            </select>
          </div>
          <div className="field"><label>Locale</label>
            <input className="input" value={adv.locale} onChange={e=>setAdv({...adv,locale:e.target.value})}/>
          </div>
          <div className="field"><label>Voice style</label>
            <select className="select" value={adv.style} onChange={e=>setAdv({...adv,style:e.target.value})}>
              <option value="literary">Literary, sparse</option><option value="warm">Warm, conversational</option><option value="clinical">Clinical, precise</option><option value="streetwise">Streetwise, blunt</option>
            </select>
          </div>
        </div>

<div className="card flat" style={{padding:16, marginBottom:14}}>
          <div className="eyebrow" style={{marginBottom:10}}>Pipeline knobs</div>
          {[
            ["Consistency audit (extra Opus call)", "audit", "+$0.18"],
            ["Voice fingerprint vector", "fingerprint", "+$0.04"],
            ["Provocation test suite (24 prompts)", "suite", "+$0.22"],
          ].map(([lbl,k,cost])=>(
            <div key={k} className="row between" style={{padding:"8px 0",borderTop:"1px solid var(--line)"}}>
              <div>
                <div style={{fontSize:13.5}}>{lbl}</div>
                <div className="muted" style={{fontSize:11.5}}>{cost} · org-default: on</div>
              </div>
              <div className={"toggle "+(adv[k]?"on":"")} onClick={()=>setAdv({...adv,[k]:!adv[k]})}/>
            </div>
          ))}
        </div>

<div className="row between" style={{marginBottom:8}}>
          <div className="muted" style={{fontSize:12}}>Estimated: <span style={{color:"var(--ink)"}}>~27s</span> · <span style={{color:"var(--ink)"}}>$0.84</span> · <span style={{color:"var(--ink)"}}>4,030 tokens</span></div>
        </div>
        <button className="btn primary" style={{width:"100%",justifyContent:"center"}} disabled={runState.running} onClick={start}>
          {runState.running? "Generating…" : "Generate persona"}
        </button>
      </div>

<div>
        <div className="page-head">
          <div className="eyebrow">Step 2 — pipeline</div>
          <h2 className="page-title" style={{fontSize:22}}>{runState.done ? "Done. Meet Mert." : runState.running ? "Building character…" : "Ready when you are."}</h2>
        </div>

<div className="pipeline">
          {PIPELINE_STEPS.map((s,i)=>{
            const status = runState.done ? "done" : i < runState.step ? "done" : i===runState.step && runState.running ? "running" : "queued";
            return (
              <div key={i} className={"pipe-step "+status}>
                <div className="num">{status==="done"?"✓":i+1}</div>
                <div className="body">
                  <div className="row between">
                    <div className="nm">{s.name}</div>
                    <div className="meta" style={{margin:0}}>
                      <span className="m">{s.model}</span><span className="m">{s.ms}</span>
                    </div>
                  </div>
                  <div className="desc">{s.desc}</div>
                  {(status==="running" || status==="done") && (
                    <div className="stream">{s.stream}</div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

{runState.done && (
          <div className="row" style={{marginTop:16,gap:10}}>
            <button className="btn primary" onClick={()=>go("detail", D2.personas[0])}>Open persona →</button>
            <button className="btn">Save & create another</button>
            <button className="btn ghost">Discard</button>
          </div>
        )}
      </div>
    </div>
  );
};

// ---------- Library ----------
const PageLibrary = ({ go }) => {
  const [q, setQ] = useState("");
  const [view, setView] = useState("grid");
  const [filter, setFilter] = useState("all");
  const filtered = D2.personas.filter(p => {
    if (filter !== "all" && p.visibility !== filter) return false;
    if (q && !(p.name+p.tagline+p.archetype).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  return (
    <div className="page">
      <div className="page-head row between">
        <div>
          <div className="eyebrow">152 personas · Studio</div>
          <h1 className="page-title">Library</h1>
        </div>
        <div className="row" style={{gap:10}}>
          <button className="btn">{I("download",14)} Export</button>
          <button className="btn primary" onClick={()=>go("create")}>{I("plus",14)} New persona</button>
        </div>
      </div>

<div className="row" style={{marginBottom:18,gap:12,flexWrap:"wrap"}}>
        <div className="search" style={{flex:1,minWidth:280}}>
          {I("search",14)}
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search by name, tagline, archetype, language…"/>
        </div>
        <div className="pill-tabs">
          {["all","public","workspace","private"].map(k => (
            <span key={k} className={"pt "+(filter===k?"on":"")} onClick={()=>setFilter(k)}>{k}</span>
          ))}
        </div>
        <div className="pill-tabs">
          <span className={"pt "+(view==="grid"?"on":"")} onClick={()=>setView("grid")}>Grid</span>
          <span className={"pt "+(view==="table"?"on":"")} onClick={()=>setView("table")}>Table</span>
        </div>
      </div>

<div className="row" style={{marginBottom:18,gap:6,flexWrap:"wrap"}}>
        {["sage","witness","caregiver","truth-teller","craftsman"].map(t=>
          <span key={t} className="tag"><span className="dot"/>{t}</span>
        )}
        {["tr","en","fr","ru"].map(t=>
          <span key={t} className="tag sky"><span className="dot"/>lang:{t}</span>
        )}
        <span className="tag moss"><span className="dot"/>quality > 4.0</span>
        <span className="tag" style={{cursor:"pointer"}}>{I("plus",10)} add filter</span>
      </div>

{view==="grid" ? (
        <div className="grid grid-4">
          {filtered.map(p => <PersonaCard key={p.id} p={p} onClick={()=>go("detail",p)}/>)}
        </div>
      ) : (
        <div className="card" style={{padding:0}}>
        <table className="tbl">
          <thead><tr><th>Name</th><th>Archetype</th><th>Language</th><th>Quality</th><th>Distinct.</th><th>Visibility</th><th>Updated</th></tr></thead>
          <tbody>
            {filtered.map(p=>(
              <tr key={p.id} onClick={()=>go("detail",p)} style={{cursor:"pointer"}}>
                <td><div style={{fontFamily:"var(--serif)",fontSize:15}}>{p.name}</div><div className="muted" style={{fontSize:12}}>{p.tagline}</div></td>
                <td>{p.archetype}</td>
                <td className="mono">{p.lang}</td>
                <td className="mono">{(p.quality||4.0).toFixed(2)}</td>
                <td className="mono">{(p.distinctiveness||0.5).toFixed(2)}</td>
                <td><span className={"tag "+(p.visibility==="public"?"moss":p.visibility==="workspace"?"sky":"")}><span className="dot"/>{p.visibility}</span></td>
                <td className="mono muted">2d ago</td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      )}
    </div>
  );
};

// ---------- DNA Radar ----------
const DNARadar = ({ values, size=240 }) => {
  const cx = size/2, cy = size/2, r = size/2 - 30;
  const labels = Object.keys(values);
  const n = labels.length;
  const pt = (i, val) => {
    const a = -Math.PI/2 + (i/n)*Math.PI*2;
    const rr = r * (val/100);
    return [cx + Math.cos(a)*rr, cy + Math.sin(a)*rr];
  };
  const labelPt = (i) => {
    const a = -Math.PI/2 + (i/n)*Math.PI*2;
    return [cx + Math.cos(a)*(r+18), cy + Math.sin(a)*(r+18)];
  };
  const points = labels.map((k,i) => pt(i, values[k]).join(",")).join(" ");
  return (
    <svg width={size} height={size}>
      {[0.25,0.5,0.75,1].map((rr,i)=>(
        <polygon key={i} className="dna-grid" points={
          labels.map((_,j)=>{
            const a = -Math.PI/2 + (j/n)*Math.PI*2;
            return `${cx+Math.cos(a)*r*rr},${cy+Math.sin(a)*r*rr}`;
          }).join(" ")
        }/>
      ))}
      {labels.map((k,i)=>{
        const a = -Math.PI/2 + (i/n)*Math.PI*2;
        return <line key={k} x1={cx} y1={cy} x2={cx+Math.cos(a)*r} y2={cy+Math.sin(a)*r} className="dna-grid"/>;
      })}
      <polygon points={points} className="dna-shape"/>
      {labels.map((k,i)=>{
        const [x,y] = pt(i,values[k]);
        return <circle key={k} cx={x} cy={y} r={3} className="dna-vertex"/>;
      })}
      {labels.map((k,i)=>{
        const [x,y] = labelPt(i);
        return <text key={k} x={x} y={y} textAnchor="middle" dominantBaseline="middle" className="dna-axis-label">{k}</text>;
      })}
    </svg>
  );
};

window.PageCreate = PageCreate;
window.PageLibrary = PageLibrary;
window.DNARadar = DNARadar;
window.BigFiveBars = BigFiveBars;