demo.js

const CATALOG = [
  { id: "agentfleet", name: "AgentFleet", blurb: "Self-hostable multi-agent operations. A goal becomes a task DAG, with evals, cost governance, and guardrails.", url: "https://github.com/hharsha98/agentfleet", tags: ["agent", "fleet", "orchestr", "dag", "eval", "guardrail", "ops"] },
  { id: "vibespace", name: "Vibespace", blurb: "Agentic development environment: terminal grid for coding agents, a kanban that dispatches them, shared memory.", url: "https://github.com/hharsha98/Vibespace", tags: ["ide", "terminal", "kanban", "claude", "cursor", "codex", "vibe"] },
  { id: "agent-os", name: "Agent OS", blurb: "Local command center for agents already on the machine. Dry-run by default, sandboxed, gated control.", url: "https://github.com/hharsha98/agent-os", tags: ["local", "os", "sandbox", "dry-run", "desktop"] },
  { id: "retrievallab", name: "RetrievalLab", blurb: "Advanced RAG made visible: hybrid search, reranking, query transforms, recall@k and MRR.", url: "https://github.com/hharsha98/retrievallab", tags: ["rag", "retriev", "search", "rerank", "citation", "pdf", "chunk"] },
  { id: "agentops", name: "AgentOps Studio", blurb: "Operations lab — orchestration, cited RAG, MCP-style tools, traces. A different product from AgentFleet.", url: "https://github.com/hharsha98/agentops-studio", tags: ["mcp", "trace", "observ", "llmops", "docker", "kubernetes"] },
  { id: "careeragent", name: "CareerAgent", blurb: "Job-hunt agents: cited CV chat, company research, tailored bullets, Kanban tracking.", url: "https://github.com/hharsha98/careeragent", tags: ["career", "cv", "job", "resume", "hiring"] },
];
const EXTRAS = [
  ["Studio site", "https://agentic-systems-studio.com", "Product home for Agentic Systems Studio."],
  ["Retrieval Lab Demo", "https://huggingface.co/spaces/hharsha/retrieval-lab-demo", "Browser chat-with-PDF with citations."],
  ["Showcase dataset", "https://huggingface.co/datasets/hharsha/agentic-systems-showcase", "Project records. No invented papers."],
  ["LinkedIn", "https://www.linkedin.com/in/hanumanthu1", "Hanumanthu Harsha Vardhan."],
];
const CHECKLIST = [
  "Pin the model and the prompt template; log both with the trace id.",
  "Store retrieved passage ids, not just the final answer, so citations can be audited.",
  "Gate tool side effects. Read-only by default; writes need an explicit confirm step.",
  "Run a small golden set (recall@k or a rubric) before changing the chunker or the embedder.",
  "Ship the public demo without a card. This page does not request GPU hardware.",
  "Cloud notes for this profile: AWS and GCP only. Do not describe Azure estates that are not owned.",
];

function pick(goal) {
  const text = goal.toLowerCase();
  const scored = CATALOG.map((item) => {
    let score = item.tags.reduce((n, tag) => n + (text.includes(tag) ? 1 : 0), 0);
    if (text.includes(item.name.toLowerCase()) || text.includes(item.id)) score += 3;
    return { score, item };
  }).sort((a, b) => b.score - a.score);
  const chosen = scored.filter((row) => row.score > 0).slice(0, 3).map((row) => row.item);
  return chosen.length ? chosen : [CATALOG[0], CATALOG[3], CATALOG[4]];
}

function escapeHtml(s) {
  return s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
}

function renderCards() {
  const bits = CATALOG.map((item) => `<a class="card" href="${item.url}" target="_blank" rel="noreferrer"><strong>${item.name}</strong><span>${item.blurb}</span></a>`);
  for (const [name, url, blurb] of EXTRAS) {
    bits.push(`<a class="card" href="${url}" target="_blank" rel="noreferrer"><strong>${name}</strong><span>${blurb}</span></a>`);
  }
  document.getElementById("cards").innerHTML = bits.join("");
}

function run() {
  const goal = document.getElementById("goal").value.trim();
  const out = document.getElementById("trace");
  if (goal.length < 8) {
    out.textContent = "Give the agent a goal of at least a short sentence.";
    return;
  }
  const projects = pick(goal);
  const wantsRetrieval = projects.some((p) => p.id === "retrievallab") || /rag|pdf|retriev|citation/.test(goal.toLowerCase());
  const plan = [
    "Restate the goal and refuse anything that is not in the studio catalog.",
    "Select at most three public projects whose tags overlap the goal.",
    "If the goal is about documents, attach the retrieval demo contract (chunk, embed, cite).",
    "Attach an LLMOps checklist and name AWS/GCP only.",
    "Write the answer as a trace, not as a hidden chain of thought.",
  ];
  const names = projects.map((p) => p.name).join(", ");
  const toolItems = projects.map((p) => `<li><code>${escapeHtml(p.name)}</code> — ${escapeHtml(p.blurb)} → <a href="${p.url}">${p.url}</a></li>`).join("");
  const retrieval = wantsRetrieval
    ? `<p><strong>retrieval_notes</strong> — contract for the public demo, not a second product.</p>
       <ul>
         <li>Chunk on page boundaries, embed, return top-k and a citation table.</li>
         <li>If generation is unavailable, keep the extractive sentences. Do not fill gaps from memory.</li>
         <li>Try it: <a href="https://huggingface.co/spaces/hharsha/retrieval-lab-demo">Retrieval Lab</a></li>
       </ul>`
    : "";
  out.innerHTML = `
    <h3>1 · Plan</h3>
    <ol>${plan.map((s) => `<li>${s}</li>`).join("")}</ol>
    <h3>2 · Tools</h3>
    <p><strong>repo_catalog</strong> — read-only lookup over the six public products.</p>
    <ul>${toolItems}</ul>
    ${retrieval}
    <p><strong>llmops_checklist</strong></p>
    <ul>${CHECKLIST.map((s) => `<li>${s}</li>`).join("")}</ul>
    <h3>3 · Answer</h3>
    <p>For “${escapeHtml(goal.replace(/\.$/, ""))}”, start with <strong>${escapeHtml(names)}</strong>. Ship the smallest loop a reviewer can click: a catalog entry, a retrieval path with citations, and a checklist that gates side effects. The trace above is the whole agent. It ran in the browser on rules and this catalog — there is no hidden paid model on this Space.</p>
    <p>Studio: <a href="https://agentic-systems-studio.com">agentic-systems-studio.com</a> · GitHub: <a href="https://github.com/hharsha98">hharsha98</a> · Nuremberg.</p>
  `;
}

renderCards();
document.getElementById("run").addEventListener("click", run);
run();