@agentproto/apps 0.4.0 → 0.5.1

package/dist/bin/sync.mjs

@@ -0,0 +1,944 @@
+#!/usr/bin/env node
+import { mkdir, writeFile } from 'fs/promises';
+import { homedir } from 'os';
+import { join, dirname } from 'path';
+import { parseArgs } from 'util';
+import { defineApp } from '@agentproto/app-kit';
+import { defineAgent } from '@agentproto/agent';
+import { defineWorkflow } from '@agentproto/workflow';
+
+/**
+ * @agentproto/apps v0.1.0
+ * Ready-made agentproto apps (teams of agents + workflows) built on app-kit.
+ */
+
+var implementer = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/implementer",
+    description: "Implements the requested code change.",
+    model: "claude-sonnet-5",
+    boundaries: ["Change only what the task asks", "Match the surrounding style"],
+    tools: ["list_dir", "read_file", "write_file", "edit_file", "run_command"],
+    workflows: [{ ref: "deliver-change" }]
+  }),
+  body: "You implement the requested change. Read the task and the surrounding code first, make the smallest correct change that satisfies it, then run the tests. Do not touch anything the task didn't ask for."
+};
+var reviewer = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/reviewer",
+    description: "Reviews the diff and reports findings.",
+    model: "claude-sonnet-5",
+    boundaries: ["Report findings only", "Never edit files", "Never run gh pr merge"],
+    // Read-only + run_command (to inspect the diff / run tests). No write/edit
+    // tools — the "never edit files" boundary is enforced by capability too.
+    tools: ["list_dir", "read_file", "run_command"],
+    workflows: [{ ref: "deliver-change" }]
+  }),
+  body: "You are a rigorous reviewer. Read the diff, and report each real issue as `file:line \u2014 why`. Change nothing; you only report."
+};
+var fixer = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/fixer",
+    description: "Applies the reviewer's findings, precisely and minimally.",
+    model: "claude-sonnet-5",
+    boundaries: ["Apply only the listed findings", "No unrelated refactors"],
+    tools: ["list_dir", "read_file", "write_file", "edit_file", "run_command"],
+    workflows: [{ ref: "deliver-change" }]
+  }),
+  body: "You apply the reviewer's findings. Address each listed finding exactly, add nothing extra, and re-run the tests when done."
+};
+var deliverChange = defineWorkflow({
+  id: "deliver-change",
+  name: "Deliver a code change",
+  description: "Implement the change, review the diff, apply fixes, verify.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  steps: [
+    {
+      id: "implement",
+      kind: "agent",
+      agent: { ref: "@agentproto/implementer" },
+      prompt: "Implement the requested change."
+    },
+    {
+      id: "review",
+      kind: "agent",
+      agent: { ref: "@agentproto/reviewer" },
+      prompt: "Review the diff the implementer just produced. Report every real issue as `file:line \u2014 why`."
+    },
+    {
+      id: "fix",
+      kind: "agent",
+      agent: { ref: "@agentproto/fixer" },
+      prompt: "Apply the reviewer's findings, then re-run the tests."
+    }
+  ]
+});
+
+// src/code-team/index.ts
+var codeTeam = defineApp({
+  id: "@agentproto/code-team",
+  name: "Code Team",
+  version: "0.1.0",
+  description: "Implement, review, and fix code changes.",
+  agents: [implementer, reviewer, fixer],
+  workflows: [deliverChange]
+});
+var researcher = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/researcher",
+    description: "Reads the provided sources and summarizes them for the writer.",
+    model: "claude-sonnet-5",
+    boundaries: ["Cite every claim", "Prefer primary sources"],
+    tools: ["list_dir", "read_file", "run_command"],
+    workflows: [{ ref: "produce-content" }]
+  }),
+  body: "You read the source material already in the workspace (list_dir, then read_file the sources), extract the key facts, and hand the writer a tight brief with a citation for every claim. Use run_command only to fetch a URL already named in the task; do not invent sources."
+};
+var writer = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/writer",
+    description: "Drafts the piece from the researcher's brief.",
+    model: "claude-sonnet-5",
+    boundaries: ["Stay on the brief", "One idea per paragraph"],
+    tools: ["list_dir", "read_file", "write_file", "edit_file"],
+    workflows: [{ ref: "produce-content" }]
+  }),
+  body: "You draft the piece from the brief and its sources. Lead with the point, keep one idea per paragraph, and don't invent facts the brief doesn't have."
+};
+var editor = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/editor",
+    description: "Edits the draft for voice, clarity, and length.",
+    model: "claude-sonnet-5",
+    boundaries: ["Preserve the writer's meaning", "Cut, don't pad"],
+    tools: ["read_file", "edit_file"],
+    workflows: [{ ref: "produce-content" }]
+  }),
+  body: "You edit the draft. Tighten the voice, cut fluff, fix clarity \u2014 without changing what the writer meant. Leave it shorter than you found it."
+};
+var illustrator = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/illustrator",
+    description: "Art-directs the cover illustration for each article.",
+    model: "claude-sonnet-5",
+    boundaries: ["One cover per article", "Text-free prompts only"],
+    tools: ["read_file", "write_file", "run_command"],
+    workflows: [{ ref: "produce-cover" }]
+  }),
+  body: "You art-direct a single cover illustration for the article. Read the article (read_file) to extract the one visual idea that best represents the piece, then write the art direction (write_file) as a clean, text-free image prompt. Keep the visual discipline tight: bold flat shapes, limited risograph-style palettes, strong negative space, and a single focal subject. Never include text, lettering, logos, watermarks, or UI chrome in the prompt. Produce exactly one cover per article; if the article calls for a literal diagram or chart, fall back to a precise gpt-image-1 style description and treat the diagram itself as the image subject. Use run_command only to inspect generated assets or move files during the upload step."
+};
+var produceContent = defineWorkflow({
+  id: "produce-content",
+  name: "Produce a piece of content",
+  description: "Read the sources, draft the piece, edit it, then commit it.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  // Concrete workspace tools (fs + exec), so the workflow describes a process
+  // a standard runtime can actually run — not abstract tools nothing provides.
+  steps: [
+    { id: "research", kind: "tool", tool: "read_file" },
+    { id: "draft", kind: "tool", tool: "write_file" },
+    { id: "edit", kind: "tool", tool: "edit_file" },
+    { id: "publish", kind: "tool", tool: "run_command" }
+  ]
+});
+var produceCover = defineWorkflow({
+  id: "produce-cover",
+  name: "Produce a cover illustration",
+  description: "Read the article, derive the cover concept, generate the base image, clean it up, and upload the final cover.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  steps: [
+    { id: "concept-from-article", kind: "tool", tool: "content.cover-concept" },
+    { id: "base-gen", kind: "tool", tool: "content.cover-base-gen" },
+    { id: "cleanup", kind: "tool", tool: "content.cover-cleanup" },
+    { id: "upload", kind: "tool", tool: "content.cover-upload" }
+  ]
+});
+
+// src/content-team/index.ts
+var contentTeam = defineApp({
+  id: "@agentproto/content-team",
+  name: "Content Team",
+  version: "0.1.0",
+  description: "Research, draft, edit, and illustrate content.",
+  agents: [researcher, writer, editor, illustrator],
+  workflows: [produceContent, produceCover]
+});
+var triager = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/triager",
+    description: "Triages your inbox \u2014 finds unread mail, categorizes, labels, archives.",
+    model: "claude-sonnet-5",
+    boundaries: [
+      "Always show the triage plan before applying",
+      "Never delete \u2014 only archive, label, or mark read",
+      "Ask before applying bulk actions on more than 20 messages"
+    ],
+    tools: [
+      "mailbox_list",
+      "mailbox_search",
+      "mailbox_list_threads",
+      "mailbox_get_thread",
+      "mailbox_labels_list",
+      "mailbox_label_create",
+      "mailbox_triage_plan",
+      "mailbox_triage_apply"
+    ],
+    workflows: [{ ref: "triage-inbox" }]
+  }),
+  body: "You scan the inbox for unread messages using mailbox_search. Categorize them (urgent, needs-reply, newsletter, notification, spam). Create a triage plan: label each category, archive newsletters+notifications, keep urgent+needs-reply in inbox. Show the plan before applying. Use mailbox_triage_plan to build the plan and mailbox_triage_apply to execute it after user confirmation."
+};
+var triageInbox = defineWorkflow({
+  id: "triage-inbox",
+  name: "Triage Inbox",
+  description: "Scan inbox, categorize unread messages, create and apply triage plan.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  steps: [
+    {
+      id: "triage",
+      kind: "agent",
+      agent: { ref: "@agentproto/triager" },
+      prompt: "Scan the inbox for unread messages. Categorize them (urgent, needs-reply, newsletter, notification, spam). Create a triage plan: label each category, archive newsletters+notifications, keep urgent+needs-reply in inbox. Show me the plan before applying."
+    }
+  ]
+});
+
+// src/mail-triage/ui.ts
+var MAIL_TRIAGE_TOOLS = [
+  "imported:agentpush/mailbox_list",
+  "imported:agentpush/mailbox_search",
+  "imported:agentpush/mailbox_triage_plan",
+  "imported:agentpush/mailbox_triage_apply",
+  "app_run",
+  "app_status",
+  "agent_output"
+];
+var APP_ID = "@agentproto/mail-triage";
+var AGENT_ID = "@agentproto/triager";
+var CATEGORIES = ["urgent", "needs-reply", "newsletter", "notification"];
+var MAIL_TRIAGE_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mail Triage</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;background:var(--bg);color:var(--text)}
+#app{display:flex;flex-direction:column;height:100%;overflow-y:auto}
+#toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg2);flex-shrink:0}
+#toolbar .title{font-size:13px;font-weight:600;flex:1}
+select,input[type=text]{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:4px;font-size:12px;font-family:inherit}
+.abtn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}
+.abtn:hover{background:var(--border)}
+.abtn:disabled{opacity:.4;cursor:default}
+.abtn.primary{background:var(--blue);border-color:var(--blue);color:#04101c}
+.abtn.primary:hover{opacity:.9}
+#content{padding:14px;display:flex;flex-direction:column;gap:16px}
+section{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:12px}
+section h3{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
+#summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
+.tile{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px;text-align:center}
+.tile .count{font-size:22px;font-weight:700}
+.tile .label{font-size:11px;color:var(--text2);text-transform:capitalize}
+.tile.urgent .count{color:var(--red)}
+.tile.needs-reply .count{color:var(--yellow)}
+.tile.newsletter .count{color:var(--blue)}
+.tile.notification .count{color:var(--purple)}
+#plan-list,#search-results,#log{max-height:260px;overflow-y:auto;font-size:12px}
+.plan-item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
+.plan-item .subj{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.plan-item .tag{color:var(--text2);font-size:11px;white-space:nowrap}
+#log{font-family:Menlo,Monaco,monospace;white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px}
+.searchbar{display:flex;gap:8px;margin-bottom:8px}
+.searchbar input{flex:1}
+.actions{display:flex;gap:8px;margin-top:10px}
+#status{padding:6px 14px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+.empty{color:var(--text2);padding:8px 0}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="toolbar">
+    <span class="title">Mail Triage</span>
+    <select id="mailbox-select"></select>
+    <button class="abtn" id="refresh-btn">Refresh</button>
+  </div>
+  <div id="content">
+    <section>
+      <h3>Inbox summary</h3>
+      <div id="summary"></div>
+    </section>
+
+    <section>
+      <h3>Search</h3>
+      <div class="searchbar">
+        <input type="text" id="search-input" placeholder="e.g. is:unread">
+        <button class="abtn" id="search-btn">Search</button>
+      </div>
+      <div id="search-results"><div class="empty">No search run yet.</div></div>
+    </section>
+
+    <section>
+      <h3>Triage plan</h3>
+      <div class="actions">
+        <button class="abtn primary" id="triage-btn">Triage</button>
+        <button class="abtn" id="apply-btn" disabled>Apply</button>
+      </div>
+      <div id="plan-list" style="margin-top:10px"><div class="empty">No plan yet \u2014 click Triage.</div></div>
+    </section>
+
+    <section>
+      <h3>Triager agent</h3>
+      <div class="actions">
+        <button class="abtn" id="run-agent-btn">Run Triager Agent</button>
+      </div>
+      <div id="log" style="margin-top:10px"><div class="empty">Agent has not run yet.</div></div>
+    </section>
+  </div>
+  <div id="status">Connecting&#8230;</div>
+</div>
+<script>
+var APP_ID = ${JSON.stringify(APP_ID)};
+var AGENT_ID = ${JSON.stringify(AGENT_ID)};
+var CATEGORIES = ${JSON.stringify(CATEGORIES)};
+var callTool = null;
+var currentPlan = null;
+var pollHandle = null;
+
+function setStatus(msg) {
+  document.getElementById("status").textContent = msg;
+}
+
+// See media-viewer/ui.ts for why this loop exists: app_tool_call wraps its
+// dispatch result in at least one more {content:[{type:"text",text:...}]}
+// shell than the underlying tool returned.
+function unwrapText(result) {
+  var cur = result;
+  for (var i = 0; i < 4; i++) {
+    if (typeof cur === "string") {
+      try {
+        cur = JSON.parse(cur);
+        continue;
+      } catch (e) {
+        return cur;
+      }
+    }
+    if (cur && Array.isArray(cur.content) && cur.content[0] && typeof cur.content[0].text === "string") {
+      cur = cur.content[0].text;
+      continue;
+    }
+    break;
+  }
+  return cur;
+}
+
+function callApp(tool, args) {
+  return callTool("app_tool_call", { appId: APP_ID, tool: tool, args: args || {} }).then(unwrapText);
+}
+
+function asList(value, keys) {
+  if (Array.isArray(value)) return value;
+  if (value && typeof value === "object") {
+    for (var i = 0; i < keys.length; i++) {
+      if (Array.isArray(value[keys[i]])) return value[keys[i]];
+    }
+  }
+  return [];
+}
+
+function renderSummary(counts) {
+  var el = document.getElementById("summary");
+  el.innerHTML = "";
+  CATEGORIES.forEach(function (cat) {
+    var tile = document.createElement("div");
+    tile.className = "tile " + cat;
+    var count = counts && counts[cat] !== undefined ? counts[cat] : "\u2013";
+    tile.innerHTML = '<div class="count"></div><div class="label"></div>';
+    tile.querySelector(".count").textContent = String(count);
+    tile.querySelector(".label").textContent = cat.replace("-", " ");
+    el.appendChild(tile);
+  });
+}
+
+function loadMailboxes() {
+  setStatus("Loading mailboxes\\u2026");
+  return callApp("imported:agentpush/mailbox_list", {})
+    .then(function (result) {
+      var mailboxes = asList(result, ["mailboxes", "items"]);
+      var select = document.getElementById("mailbox-select");
+      select.innerHTML = "";
+      if (mailboxes.length === 0) {
+        var opt = document.createElement("option");
+        opt.textContent = "inbox";
+        opt.value = "inbox";
+        select.appendChild(opt);
+      } else {
+        mailboxes.forEach(function (mb) {
+          var name = typeof mb === "string" ? mb : mb.name || mb.id || JSON.stringify(mb);
+          var opt = document.createElement("option");
+          opt.value = name;
+          opt.textContent = name;
+          select.appendChild(opt);
+        });
+      }
+      setStatus("Ready");
+    })
+    .catch(function (err) {
+      setStatus("Error loading mailboxes: " + err.message);
+    });
+}
+
+function renderSearchResults(items) {
+  var el = document.getElementById("search-results");
+  el.innerHTML = "";
+  if (items.length === 0) {
+    el.innerHTML = '<div class="empty">No results.</div>';
+    return;
+  }
+  items.forEach(function (item) {
+    var row = document.createElement("div");
+    row.className = "plan-item";
+    var subj = typeof item === "string" ? item : item.subject || item.title || JSON.stringify(item);
+    var from = item && item.from ? item.from : "";
+    row.innerHTML = '<span class="subj"></span><span class="tag"></span>';
+    row.querySelector(".subj").textContent = subj;
+    row.querySelector(".tag").textContent = from;
+    el.appendChild(row);
+  });
+}
+
+function renderPlan(plan) {
+  var items = asList(plan, ["actions", "items", "plan"]);
+  var el = document.getElementById("plan-list");
+  el.innerHTML = "";
+  if (items.length === 0) {
+    el.innerHTML = '<div class="empty">Plan is empty.</div>';
+    return;
+  }
+  var counts = {};
+  items.forEach(function (item) {
+    var cat = (item && (item.category || item.tag)) || "notification";
+    counts[cat] = (counts[cat] || 0) + 1;
+    var row = document.createElement("div");
+    row.className = "plan-item";
+    var subj = (item && (item.subject || item.title)) || JSON.stringify(item);
+    var action = (item && (item.action || item.category)) || "";
+    row.innerHTML = '<span class="subj"></span><span class="tag"></span>';
+    row.querySelector(".subj").textContent = subj;
+    row.querySelector(".tag").textContent = action;
+    el.appendChild(row);
+  });
+  renderSummary(counts);
+}
+
+document.getElementById("refresh-btn").addEventListener("click", loadMailboxes);
+
+document.getElementById("search-btn").addEventListener("click", function () {
+  var query = document.getElementById("search-input").value;
+  var mailbox = document.getElementById("mailbox-select").value;
+  setStatus("Searching\\u2026");
+  callApp("imported:agentpush/mailbox_search", { mailbox: mailbox, query: query })
+    .then(function (result) {
+      renderSearchResults(asList(result, ["messages", "items", "results"]));
+      setStatus("Ready");
+    })
+    .catch(function (err) {
+      setStatus("Search failed: " + err.message);
+    });
+});
+
+document.getElementById("triage-btn").addEventListener("click", function () {
+  var mailbox = document.getElementById("mailbox-select").value;
+  setStatus("Building triage plan\\u2026");
+  document.getElementById("apply-btn").disabled = true;
+  callApp("imported:agentpush/mailbox_triage_plan", { mailbox: mailbox })
+    .then(function (plan) {
+      currentPlan = plan;
+      renderPlan(plan);
+      document.getElementById("apply-btn").disabled = false;
+      setStatus("Plan ready \\u2014 review, then Apply.");
+    })
+    .catch(function (err) {
+      setStatus("Triage plan failed: " + err.message);
+    });
+});
+
+document.getElementById("apply-btn").addEventListener("click", function () {
+  if (!currentPlan) return;
+  setStatus("Applying triage plan\\u2026");
+  callApp("imported:agentpush/mailbox_triage_apply", { plan: currentPlan })
+    .then(function () {
+      setStatus("Plan applied.");
+      document.getElementById("apply-btn").disabled = true;
+    })
+    .catch(function (err) {
+      setStatus("Apply failed: " + err.message);
+    });
+});
+
+function appendLog(text) {
+  var el = document.getElementById("log");
+  if (el.querySelector(".empty")) el.innerHTML = "";
+  el.textContent += (el.textContent ? "\\n" : "") + text;
+  el.scrollTop = el.scrollHeight;
+}
+
+function pollAgentRun(appRunId) {
+  if (pollHandle) clearTimeout(pollHandle);
+  callApp("app_status", { appRunId: appRunId })
+    .then(function (status) {
+      var sessions = (status && status.sessions) || [];
+      var sessionId = sessions[0] && sessions[0].sessionId;
+      var tail = sessionId
+        ? callApp("agent_output", { sessionId: sessionId, lastN: 200, clean: true })
+        : Promise.resolve("");
+      return tail.then(function (output) {
+        if (output) appendLog(typeof output === "string" ? output : JSON.stringify(output));
+        var done = status && (status.status === "ended" || status.status === "done" || status.endedAt);
+        if (!done) {
+          pollHandle = setTimeout(function () { pollAgentRun(appRunId); }, 2000);
+        } else {
+          setStatus("Agent run finished.");
+        }
+      });
+    })
+    .catch(function (err) {
+      setStatus("Agent status failed: " + err.message);
+    });
+}
+
+document.getElementById("run-agent-btn").addEventListener("click", function () {
+  document.getElementById("log").innerHTML = "";
+  setStatus("Starting triager agent\\u2026");
+  callApp("app_run", { appId: APP_ID, agents: [AGENT_ID], prompt: "Triage my inbox." })
+    .then(function (run) {
+      appendLog("Started app run " + (run && run.appRunId));
+      pollAgentRun(run.appRunId);
+    })
+    .catch(function (err) {
+      setStatus("Run failed: " + err.message);
+    });
+});
+
+window.McpApp.connect()
+  .then(function (bridge) {
+    callTool = bridge.callTool;
+    return loadMailboxes();
+  })
+  .catch(function (err) {
+    setStatus("Standalone mode \\u2014 no host bridge (" + err.message + ")");
+    renderSummary(null);
+  });
+
+renderSummary(null);
+</script>
+</body>
+</html>`;
+
+// src/mail-triage/index.ts
+var mailTriage = defineApp({
+  id: "@agentproto/mail-triage",
+  name: "Mail Triage",
+  version: "0.1.0",
+  description: "Triage your inbox \u2014 categorize, label, archive.",
+  agents: [triager],
+  workflows: [triageInbox],
+  ui: {
+    html: MAIL_TRIAGE_HTML,
+    title: "Mail Triage",
+    tools: [...MAIL_TRIAGE_TOOLS]
+  }
+});
+var cataloger = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/media-cataloger",
+    description: "Scans a folder for media files (images, video, audio), collects metadata, and produces a structured catalog.",
+    model: "claude-sonnet-5",
+    boundaries: [
+      "Read-only \u2014 never modify, rename, move, or delete files",
+      "Only catalog files with recognized media extensions",
+      "Report exact file sizes and paths, never estimate"
+    ],
+    tools: ["list_dir", "read_file", "file_info"],
+    workflows: [{ ref: "scan-media" }]
+  }),
+  body: [
+    "You scan a workspace folder for media files and produce a structured JSON catalog.",
+    "",
+    "Walk the target directory recursively using list_dir. For each file, check the",
+    "extension against known media types:",
+    "- Images: .jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .ico, .avif",
+    "- Video: .mp4, .webm, .mov, .avi, .mkv",
+    "- Audio: .mp3, .wav, .ogg, .flac, .aac, .m4a",
+    "",
+    "For each media file found, use file_info to get size and modification date.",
+    "",
+    "Output a JSON object with this shape:",
+    "```json",
+    "{",
+    '  "folder": "<scanned path>",',
+    '  "scannedAt": "<ISO timestamp>",',
+    '  "summary": { "total": N, "images": N, "video": N, "audio": N, "totalSizeBytes": N },',
+    '  "files": [',
+    "    {",
+    '      "path": "relative/path.jpg",',
+    '      "name": "file.jpg",',
+    '      "type": "image",',
+    '      "extension": ".jpg",',
+    '      "sizeBytes": 123456,',
+    '      "modifiedAt": "2026-08-01T12:00:00Z"',
+    "    }",
+    "  ]",
+    "}",
+    "```",
+    "",
+    "Sort files by type (images first, then video, then audio), then by name."
+  ].join("\n")
+};
+var scanMedia = defineWorkflow({
+  id: "scan-media",
+  name: "Scan Media",
+  description: "Scan a folder for media files, collect metadata, and produce a structured catalog.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  steps: [
+    {
+      id: "catalog",
+      kind: "agent",
+      agent: { ref: "@agentproto/media-cataloger" },
+      prompt: "Scan the workspace root folder for media files (images, video, audio). Walk all subdirectories recursively. For each media file, collect its path, name, type, extension, size, and modification date. Output the full catalog as a single JSON object."
+    }
+  ]
+});
+
+// src/media-viewer/ui.ts
+var MEDIA_VIEWER_TOOLS = ["directory_list", "file_info", "file_read"];
+var APP_ID2 = "@agentproto/media-viewer";
+var MEDIA_VIEWER_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Media Viewer</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;background:var(--bg);color:var(--text)}
+#app{display:flex;flex-direction:column;height:100%}
+#toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--bg2);flex-shrink:0}
+#toolbar .title{font-size:13px;font-weight:600;flex:1}
+#breadcrumb{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.abtn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}
+.abtn:hover{background:var(--border)}
+#body{flex:1;display:flex;overflow:hidden}
+#grid-wrap{flex:1;overflow-y:auto;padding:14px}
+#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
+.cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);cursor:pointer;text-align:center}
+.cell:hover{background:var(--bg3);border-color:var(--blue)}
+.cell.selected{border-color:var(--blue);background:var(--bg3)}
+.icon{font-size:28px;line-height:1}
+.name{font-size:11px;color:var(--text);word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+#empty{color:var(--text2);padding:24px;text-align:center}
+#details{width:280px;border-left:1px solid var(--border);background:var(--bg2);padding:14px;overflow-y:auto;flex-shrink:0}
+#details h3{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
+#details .row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);font-size:12px}
+#details .row span:first-child{color:var(--text2)}
+#preview{margin-top:10px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-family:Menlo,Monaco,monospace;font-size:11px;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow-y:auto}
+#status{padding:6px 14px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="toolbar">
+    <button class="abtn" id="up-btn" title="Up one level">&uarr;</button>
+    <span class="title">Media Viewer</span>
+    <span id="breadcrumb">.</span>
+    <button class="abtn" id="refresh-btn">Refresh</button>
+  </div>
+  <div id="body">
+    <div id="grid-wrap">
+      <div id="grid"></div>
+      <div id="empty" style="display:none">No files in this folder.</div>
+    </div>
+    <div id="details" style="display:none"></div>
+  </div>
+  <div id="status">Connecting&#8230;</div>
+</div>
+<script>
+var APP_ID = ${JSON.stringify(APP_ID2)};
+var currentPath = ".";
+var entries = [];
+var callTool = null;
+
+function setStatus(msg) {
+  document.getElementById("status").textContent = msg;
+}
+
+// app_tool_call wraps its dispatch result at least once (its own
+// text-result body is the JSON-stringified inner MCP tool result); peel
+// back through nested {content:[{type:"text",text:...}]} shells until the
+// payload stops looking like one, so this works whichever layer the host's
+// own bridge already unwrapped.
+function unwrapText(result) {
+  var cur = result;
+  for (var i = 0; i < 4; i++) {
+    if (typeof cur === "string") {
+      try {
+        cur = JSON.parse(cur);
+        continue;
+      } catch (e) {
+        return cur;
+      }
+    }
+    if (cur && Array.isArray(cur.content) && cur.content[0] && typeof cur.content[0].text === "string") {
+      cur = cur.content[0].text;
+      continue;
+    }
+    break;
+  }
+  return cur;
+}
+
+function callApp(tool, args) {
+  return callTool("app_tool_call", { appId: APP_ID, tool: tool, args: args || {} }).then(unwrapText);
+}
+
+function parseDirectoryListing(raw) {
+  var text = typeof raw === "string" ? raw : "";
+  return text
+    .split("\\n")
+    .map(function (line) { return line.trim(); })
+    .filter(function (line) { return line.length > 0; })
+    .map(function (line) {
+      var isDir = line.indexOf("[DIR]") === 0;
+      var name = line.replace(/^\\[(FILE|DIR)\\]\\s*/, "");
+      return { name: name, isDir: isDir };
+    });
+}
+
+function iconFor(entry) {
+  if (entry.isDir) return "\\uD83D\\uDCC1";
+  var ext = (entry.name.split(".").pop() || "").toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "avif"].indexOf(ext) !== -1) return "\\uD83D\\uDDBC\\uFE0F";
+  if (["mp4", "webm", "mov", "avi", "mkv"].indexOf(ext) !== -1) return "\\uD83C\\uDFA5";
+  if (["mp3", "wav", "ogg", "flac", "aac", "m4a"].indexOf(ext) !== -1) return "\\uD83C\\uDFB5";
+  return "\\uD83D\\uDCC4";
+}
+
+function joinPath(base, name) {
+  if (base === "." || base === "") return name;
+  return base.replace(/\\/+$/, "") + "/" + name;
+}
+
+function parentPath(path) {
+  if (path === "." || path.indexOf("/") === -1) return ".";
+  return path.slice(0, path.lastIndexOf("/")) || ".";
+}
+
+function renderGrid() {
+  document.getElementById("breadcrumb").textContent = currentPath;
+  var grid = document.getElementById("grid");
+  var empty = document.getElementById("empty");
+  grid.innerHTML = "";
+  if (entries.length === 0) {
+    empty.style.display = "block";
+    return;
+  }
+  empty.style.display = "none";
+  entries.forEach(function (entry, idx) {
+    var cell = document.createElement("div");
+    cell.className = "cell";
+    cell.dataset.idx = String(idx);
+    cell.innerHTML = '<div class="icon">' + iconFor(entry) + '</div><div class="name"></div>';
+    cell.querySelector(".name").textContent = entry.name;
+    cell.addEventListener("click", function () { onSelect(entry, cell); });
+    grid.appendChild(cell);
+  });
+}
+
+function onSelect(entry, cell) {
+  Array.prototype.forEach.call(document.querySelectorAll(".cell"), function (c) {
+    c.classList.remove("selected");
+  });
+  cell.classList.add("selected");
+  if (entry.isDir) {
+    loadDirectory(joinPath(currentPath, entry.name));
+    return;
+  }
+  showFileDetails(joinPath(currentPath, entry.name));
+}
+
+function showFileDetails(path) {
+  var details = document.getElementById("details");
+  details.style.display = "block";
+  details.innerHTML = "<h3>Loading&#8230;</h3>";
+  setStatus("Reading " + path + "\\u2026");
+  callApp("file_info", { path: path })
+    .then(function (info) {
+      var rows = "";
+      if (info && typeof info === "object") {
+        ["name", "type", "size", "modified"].forEach(function (key) {
+          if (info[key] !== undefined) {
+            rows += '<div class="row"><span>' + key + '</span><span></span></div>';
+          }
+        });
+      }
+      details.innerHTML = "<h3>Details</h3>" + rows + '<div id="preview">Loading preview&#8230;</div>';
+      var rowEls = details.querySelectorAll(".row span:last-child");
+      var keys = ["name", "type", "size", "modified"].filter(function (key) {
+        return info && info[key] !== undefined;
+      });
+      keys.forEach(function (key, i) {
+        rowEls[i].textContent = String(info[key]);
+      });
+      return callApp("file_read", { path: path });
+    })
+    .then(function (content) {
+      var pre = document.getElementById("preview");
+      if (!pre) return;
+      var text = typeof content === "string" ? content : JSON.stringify(content);
+      pre.textContent = text.length > 2000 ? text.slice(0, 2000) + "\\u2026 (truncated)" : (text || "(empty file)");
+      setStatus("Ready \\u00b7 " + currentPath);
+    })
+    .catch(function (err) {
+      var pre = document.getElementById("preview");
+      if (pre) pre.textContent = "Preview unavailable (" + err.message + ")";
+      setStatus("Ready \\u00b7 " + currentPath);
+    });
+}
+
+function loadDirectory(path) {
+  document.getElementById("details").style.display = "none";
+  setStatus("Loading " + path + "\\u2026");
+  return callApp("directory_list", { path: path })
+    .then(function (raw) {
+      currentPath = path;
+      entries = parseDirectoryListing(raw).sort(function (a, b) {
+        if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+      renderGrid();
+      setStatus("Ready \\u00b7 " + entries.length + " entries \\u00b7 " + path);
+    })
+    .catch(function (err) {
+      entries = [];
+      renderGrid();
+      setStatus("Error: " + err.message);
+    });
+}
+
+document.getElementById("up-btn").addEventListener("click", function () {
+  loadDirectory(parentPath(currentPath));
+});
+document.getElementById("refresh-btn").addEventListener("click", function () {
+  loadDirectory(currentPath);
+});
+
+window.McpApp.connect()
+  .then(function (bridge) {
+    callTool = bridge.callTool;
+    return loadDirectory(".");
+  })
+  .catch(function (err) {
+    setStatus("Standalone mode \\u2014 no host bridge (" + err.message + ")");
+    entries = [];
+    renderGrid();
+  });
+</script>
+</body>
+</html>`;
+
+// src/media-viewer/index.ts
+var mediaViewer = defineApp({
+  id: "@agentproto/media-viewer",
+  name: "Media Viewer",
+  version: "0.1.0",
+  description: "Scan a folder for images, video, and audio \u2014 gallery view.",
+  agents: [cataloger],
+  workflows: [scanMedia],
+  ui: {
+    html: MEDIA_VIEWER_HTML,
+    title: "Media Viewer",
+    tools: [...MEDIA_VIEWER_TOOLS]
+  }
+});
+
+// src/bin/sync.ts
+var APPS = [
+  { slug: "code-team", category: "team", handle: codeTeam },
+  { slug: "content-team", category: "team", handle: contentTeam },
+  { slug: "mail-triage", category: "app", handle: mailTriage },
+  { slug: "media-viewer", category: "app", handle: mediaViewer }
+];
+async function syncApps(baseDir) {
+  const catalog = [];
+  for (const { slug, category, handle } of APPS) {
+    const dir = join(baseDir, slug);
+    await handle.emit(dir);
+    catalog.push({
+      appId: handle.id ?? slug,
+      name: handle.name ?? slug,
+      description: handle.description ?? "",
+      dir,
+      category
+    });
+    console.log(`emitted ${handle.id ?? slug} -> ${dir}`);
+  }
+  return catalog;
+}
+async function writeCatalog(baseDir, catalog) {
+  const catalogPath = join(baseDir, "..", "app-catalog.json");
+  await mkdir(dirname(catalogPath), { recursive: true });
+  await writeFile(catalogPath, JSON.stringify({ apps: catalog }, null, 2) + "\n", "utf8");
+  return catalogPath;
+}
+async function main(argv) {
+  const { values } = parseArgs({
+    args: [...argv],
+    allowPositionals: false,
+    strict: true,
+    options: { "base-dir": { type: "string" } }
+  });
+  const baseDir = values["base-dir"] ?? join(homedir(), ".agentproto", "apps");
+  await mkdir(baseDir, { recursive: true });
+  const catalog = await syncApps(baseDir);
+  const catalogPath = await writeCatalog(baseDir, catalog);
+  console.log(`wrote catalog (${catalog.length} apps) -> ${catalogPath}`);
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main(process.argv.slice(2)).catch((err) => {
+    console.error(err instanceof Error ? err.message : String(err));
+    process.exitCode = 1;
+  });
+}
+
+export { syncApps, writeCatalog };
+//# sourceMappingURL=sync.mjs.map
+//# sourceMappingURL=sync.mjs.map