/* ATP prototype — three tabs: 1) Builder — pick endpoint, fill params, send, see request/response 2) Chat — type message → kernel routes to agent → reply + envelope 3) Playground — prompt | ATP envelope | raw response, side-by-side Uses window.claude.complete() for real LLM replies where applicable. */ const { useState, useEffect, useRef, useMemo } = React; const API_BASE = 'https://api.artemis.city'; // visual only — routes mounted under /api/v1/* /* The four agents the kernel routes between (see src/interface/agent_router.yaml). */ const KERNEL_AGENTS = [ { id: 'artemis', role: 'Mayor protocol, governance' }, { id: 'planner', role: 'Architect, planning' }, { id: 'pack_rat', role: 'Courier, safe transfer' }, { id: 'daemon', role: 'System anchor, memory' }, ]; /* Build an ATPMessage (shape matches src/agents/atp/__init__.py — dataclass). */ function makeATPMessage({ mode, context, priority, action_type, target_zone, special_notes, content }) { return { mode: mode || 'BUILD', context: context || '', priority: priority || 'NORMAL', action_type: action_type || 'EXECUTE', target_zone: target_zone || 'chat/', special_notes: special_notes || '', content: content || '', }; } /* Pick a mode + action_type from free text — same heuristic the router yaml uses on keywords. */ function inferAtpFromText(text) { const t = text.toLowerCase(); if (/summari[sz]e|tl;dr|distill|brief/.test(t)) return { mode: 'SYNTHESIZE', action_type: 'SUMMARIZE' }; if (/audit|review|check|policy|governance/.test(t)) return { mode: 'REVIEW', action_type: 'REFLECT' }; if (/plan|roadmap|scaffold|blueprint|checklist/.test(t)) return { mode: 'BUILD', action_type: 'SCAFFOLD' }; if (/save|persist|archive|capture|note/.test(t)) return { mode: 'CAPTURE', action_type: 'EXECUTE' }; if (/commit|finalize|merge|ship/.test(t)) return { mode: 'COMMIT', action_type: 'EXECUTE' }; return { mode: 'BUILD', action_type: 'EXECUTE' }; } /* Render an ATPMessage as the `#Mode: …` hash-prefix text the parser reads. */ function atpToHashBlock(m) { return `#Mode: ${m.mode}\n#Context: ${m.context}\n#Priority: ${m.priority}\n#ActionType: ${m.action_type}\n#TargetZone: ${m.target_zone}\n#SpecialNotes: ${m.special_notes || 'None'}`; } /* Syntax-highlight JSON */ function HJSON({ data }) { if (data == null) return null; const text = typeof data === 'string' ? data : JSON.stringify(data, null, 2); // Highlight keys/strings/numbers/booleans const html = text .replace(/&/g, '&').replace(/$1$2') .replace(/:\s*("(?:\\.|[^"\\])*")/g, ': $1') .replace(/\b(-?\d+(?:\.\d+)?)\b/g, '$1') .replace(/\b(true|false|null)\b/g, '$1') .replace(/([{}\[\],])/g, '$1'); return 
;
}

/* ====== Tab 1: Builder ====== */
function Builder() {
  const [activeId, setActiveId] = useState(ENDPOINTS[0].id);
  const endpoint = ENDPOINTS.find((e) => e.id === activeId);

  // Init values from endpoint defaults
  const [values, setValues] = useState({});
  useEffect(() => {
    const v = {};
    endpoint.params.forEach((p) => { if (p.default !== undefined) v[p.name] = p.default; });
    setValues(v);
    setResp(null);
  }, [activeId]);

  const [pending, setPending] = useState(false);
  const [resp, setResp] = useState(null);
  const [respMs, setRespMs] = useState(0);

  async function send() {
    setPending(true);
    const t0 = performance.now();
    // Simulated network latency
    await new Promise((r) => setTimeout(r, 280 + Math.random() * 320));
    const payload = endpoint.sample(values);
    setResp(payload);
    setRespMs(Math.round(performance.now() - t0));
    setPending(false);
  }

  const requestPreview = useMemo(() => {
    const queryParams = endpoint.method === 'GET'
      ? Object.entries(values).filter(([, v]) => v !== '' && v !== undefined).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')
      : '';
    let urlPath = endpoint.path;
    Object.entries(values).forEach(([k, v]) => {
      urlPath = urlPath.replace(`{${k}}`, encodeURIComponent(v));
    });
    return {
      method: endpoint.method,
      url: API_BASE + urlPath + (queryParams ? '?' + queryParams : ''),
      headers: {
        Authorization: 'Bearer ',
        'X-Kernel-Session': 'a4f3-elect-12',
        'Content-Type': 'application/json',
      },
      body: endpoint.method !== 'GET' ? values : undefined,
    };
  }, [endpoint, values]);

  return (
    

      

        
Endpoints
{ENDPOINTS.length} routes

        

          {ENDPOINT_GROUPS.map((g) => (
            

              
{g.name}

              {g.items.map((e) => (
                
 setActiveId(e.id)}>
                  

                    {e.method}
                    {e.path}
                  

                  {e.desc}
                

              ))}
            

          ))}
        

      


      

        

          
{endpoint.method}{endpoint.path}

          params · {endpoint.params.length}
        

        

          
{endpoint.desc}

          {endpoint.params.length === 0 && (
            
No parameters — send the request directly.

          )}
          {endpoint.params.map((p) => (
            

              
              {p.type.startsWith('enum:') ? (
                
              ) : p.multi ? (