npm - agentainer - Versions diffs - 0.1.7 → 2.0.1 - Mend

agentainer 0.1.7 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/README.md +248 -677
package/agentainer +16 -18
package/agentainer.example.yaml +86 -0
package/bin/agentainer.js +9 -8
package/examples/academic-coauthor.yaml +123 -0
package/examples/accessibility-audit.yaml +152 -0
package/examples/affiliate-product-reviews.yaml +106 -0
package/examples/api-design.yaml +157 -0
package/examples/app-store-optimization.yaml +108 -0
package/examples/brainstorm.yaml +27 -128
package/examples/brand-voice-style-guide.yaml +109 -0
package/examples/bug-hunt.yaml +51 -96
package/examples/candidate-screen.yaml +122 -0
package/examples/case-study-writer.yaml +100 -0
package/examples/changelog-release-notes.yaml +114 -0
package/examples/chatbot-builder.yaml +138 -0
package/examples/code-review.yaml +73 -0
package/examples/comparison-guide-writer.yaml +106 -0
package/examples/competitive-intel.yaml +126 -0
package/examples/content-studio.yaml +91 -0
package/examples/course-creator.yaml +133 -0
package/examples/customer-support-triage.yaml +118 -0
package/examples/daily-briefing.yaml +119 -0
package/examples/data-pipeline-builder.yaml +135 -0
package/examples/debate.yaml +16 -90
package/examples/design-system.yaml +138 -0
package/examples/ebook-generator.yaml +90 -0
package/examples/ecommerce-listing-optimizer.yaml +126 -0
package/examples/email-newsletter.yaml +103 -0
package/examples/faq-knowledge-sync.yaml +107 -0
package/examples/game-design.yaml +122 -0
package/examples/glossary-term-writer.yaml +103 -0
package/examples/incident-response.yaml +52 -109
package/examples/knowledge-base.yaml +115 -0
package/examples/landing-page-converter.yaml +103 -0
package/examples/legal-contract-review.yaml +118 -0
package/examples/linkedin-ghostwriter.yaml +93 -0
package/examples/localization.yaml +56 -123
package/examples/meeting-notes.yaml +111 -0
package/examples/migration-planner.yaml +127 -0
package/examples/onboarding-buddy.yaml +111 -0
package/examples/performance-audit.yaml +123 -0
package/examples/podcast-production.yaml +117 -0
package/examples/postmortem.yaml +119 -0
package/examples/pr-review-gate.yaml +123 -0
package/examples/press-release-wire.yaml +96 -0
package/examples/product-spec.yaml +107 -0
package/examples/prompt-engineering-lab.yaml +109 -0
package/examples/quickstart.yaml +48 -0
package/examples/rag-builder.yaml +145 -0
package/examples/refactor-planner.yaml +127 -0
package/examples/research.yaml +25 -0
package/examples/resume-tailor.yaml +116 -0
package/examples/rfp-response.yaml +124 -0
package/examples/sales-coach.yaml +123 -0
package/examples/security-audit.yaml +120 -0
package/examples/seo-audit-and-fix.yaml +138 -0
package/examples/seo-content-factory.yaml +103 -0
package/examples/social-media.yaml +103 -0
package/examples/software-company.yaml +71 -128
package/examples/startup-validator.yaml +115 -0
package/examples/tdd-pingpong.yaml +36 -68
package/examples/technical-documentation.yaml +112 -0
package/examples/test-factory.yaml +114 -0
package/examples/tutorial-howto-creator.yaml +111 -0
package/examples/twitter-x-thread-factory.yaml +91 -0
package/examples/white-paper-research.yaml +96 -0
package/examples/writers-room.yaml +49 -111
package/examples/youtube-script-studio.yaml +107 -0
package/hooks/claude_stop.sh +5 -3
package/hooks/codex_notify.sh +4 -3
package/lib/cli.py +933 -0
package/lib/config.py +267 -308
package/lib/hooks.py +246 -0
package/lib/lock.py +75 -0
package/lib/log.py +64 -0
package/lib/mail.py +699 -0
package/lib/minyaml.py +1 -39
package/lib/reconcile.py +544 -0
package/lib/sessions.py +223 -0
package/lib/supervisor.py +216 -0
package/lib/telegram.py +372 -0
package/lib/tmux.py +355 -0
package/lib/turn.py +167 -0
package/lib/ui.py +1219 -0
package/llms.txt +145 -429
package/package.json +9 -7
package/scripts/check-deps.js +18 -61
package/ui/app.js +1136 -0
package/ui/index.html +404 -0
package/agents.example.yaml +0 -257
package/examples/code-review-broadcast.yaml +0 -109
package/examples/existing-repo.yaml +0 -74
package/examples/multi-language-broadcast.yaml +0 -127
package/examples/ping-pong.yaml +0 -89
package/examples/red-team.yaml +0 -117
package/examples/research-swarm.yaml +0 -129
package/lib/swarm.py +0 -2461

package/ui/index.html ADDED Viewed

@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<meta name="color-scheme" content="light dark" />
+<title>Agentainer</title>
+<style>
+  /* ---- design tokens (light + dark) ------------------------------------ */
+  :root {
+    color-scheme: light dark;
+    --bg: #f4f6f9;
+    --surface: #ffffff;
+    --surface-2: #eef1f5;
+    --border: #e2e6ec;
+    --text: #171a1f;
+    --muted: #667085;
+    --accent: #2563eb;
+    --accent-fg: #ffffff;
+    --accent-soft: #e6efff;
+    --ok-bg: #e3f6e9; --ok-fg: #157a3c;
+    --busy-bg: #fdf0d5; --busy-fg: #9a6b00;
+    --no-bg: #fde2e1; --no-fg: #b4231d;
+    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
+    --shadow-lg: 0 8px 28px rgba(16,24,40,.18);
+    --radius: 14px;
+    --radius-sm: 10px;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #0d0f13;
+      --surface: #161a21;
+      --surface-2: #1e232c;
+      --border: #262c37;
+      --text: #e7eaee;
+      --muted: #8b93a1;
+      --accent: #4f8cff;
+      --accent-fg: #0b1220;
+      --accent-soft: #17233b;
+      --ok-bg: #16351f; --ok-fg: #7ee29a;
+      --busy-bg: #3a3416; --busy-fg: #ffd97a;
+      --no-bg: #3a1d1d; --no-fg: #ff9b9b;
+      --shadow: 0 1px 2px rgba(0,0,0,.4);
+      --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
+    }
+  }
+  * { box-sizing: border-box; }
+  /* The `hidden` attribute must win over class-level `display` rules (e.g. the
+     login card's `.center { display: grid }`), or hiding it visually no-ops. */
+  [hidden] { display: none !important; }
+  html, body { height: 100%; }
+  body {
+    margin: 0;
+    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+  }
+  button, input, textarea, select { font: inherit; color: inherit; }
+  button { cursor: pointer; }
+  a { color: var(--accent); }
+  /* ---- app bar --------------------------------------------------------- */
+  header#bar {
+    position: sticky; top: 0; z-index: 20;
+    display: flex; align-items: center; gap: .75rem;
+    padding: .6rem max(.9rem, env(safe-area-inset-left)) .6rem max(.9rem, env(safe-area-inset-left));
+    background: color-mix(in srgb, var(--surface) 88%, transparent);
+    backdrop-filter: saturate(1.4) blur(10px);
+    border-bottom: 1px solid var(--border);
+  }
+  .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em; }
+  .brand .dot {
+    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
+    background: linear-gradient(135deg, var(--accent), #7c3aed);
+    display: grid; place-items: center; color: #fff; font-size: 15px;
+    box-shadow: var(--shadow);
+  }
+  .brand small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; margin-top: -2px; }
+  header#bar .spacer { flex: 1 1 auto; }
+  .navbtn {
+    background: transparent; border: 1px solid transparent; color: var(--muted);
+    padding: .4rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
+  }
+  .navbtn.active { color: var(--text); background: var(--surface-2); border-color: var(--border); }
+  .navbtn:hover { color: var(--text); }
+  .navbtn { position: relative; }
+  /* availability switch */
+  .avail { display: inline-flex; align-items: center; gap: .5rem; }
+  .avail .lbl { font-size: .82rem; color: var(--muted); white-space: nowrap; }
+  .switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
+  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
+  .switch .track {
+    position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2);
+    border: 1px solid var(--border); transition: background .18s;
+  }
+  .switch .knob {
+    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
+    background: #fff; box-shadow: var(--shadow); transition: transform .18s;
+  }
+  .switch input:checked + .track { background: var(--ok-fg); border-color: var(--ok-fg); }
+  .switch input:checked + .track + .knob { transform: translateX(18px); }
+  /* ---- layout ---------------------------------------------------------- */
+  main { max-width: 1080px; margin: 0 auto; padding: 1rem max(.9rem, env(safe-area-inset-left)) 3rem; }
+  .muted { color: var(--muted); }
+  .banner { color: var(--no-fg); min-height: 1.1rem; margin: .2rem 0; font-size: .9rem; }
+  .center { min-height: 60vh; display: grid; place-items: center; }
+  .card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); box-shadow: var(--shadow);
+  }
+  /* login */
+  #login .card { padding: 1.5rem; width: min(420px, 92vw); }
+  #login h2 { margin: .2rem 0 .3rem; }
+  input.field, textarea.field, select.field {
+    width: 100%; background: var(--surface-2); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: .6rem .7rem;
+  }
+  input.field:focus, textarea.field:focus, select.field:focus {
+    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0;
+    border-color: var(--accent);
+  }
+  .btn {
+    background: var(--accent); color: var(--accent-fg); border: 1px solid transparent;
+    padding: .55rem .9rem; border-radius: var(--radius-sm); font-weight: 650;
+    box-shadow: var(--shadow);
+  }
+  .btn:hover { filter: brightness(1.06); }
+  .btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; }
+  .btn.danger { background: var(--no-bg); color: var(--no-fg); box-shadow: none; }
+  .btn.sm { padding: .35rem .6rem; font-size: .85rem; }
+  /* pills */
+  .pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
+  .pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
+  .pill.busy { background: var(--busy-bg); color: var(--busy-fg); }
+  .pill.no { background: var(--no-bg); color: var(--no-fg); }
+  .pill.mute { background: var(--surface-2); color: var(--muted); }
+  /* truthful state pills */
+  .pill.st-working { background: var(--ok-bg); color: var(--ok-fg); }
+  .pill.st-waiting { background: var(--surface-2); color: var(--muted); }
+  .pill.st-attention { background: var(--busy-bg); color: var(--busy-fg); }
+  .pill.st-stalled { background: var(--no-bg); color: var(--no-fg); }
+  .pill.st-stopped { background: var(--surface-2); color: var(--muted); opacity: .7; }
+  .dotpulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+  .pill.st-working .dotpulse { animation: dotpulse 1.2s ease-in-out infinite; }
+  @keyframes dotpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
+  @media (prefers-reduced-motion: reduce) { .pill.st-working .dotpulse { animation: none; } }
+  .pill.upbtn { border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; font-family: inherit; }
+  .pill.upbtn:hover:not(:disabled) { background: var(--accent); color: #fff; }
+  .pill.upbtn:disabled, .pill.downbtn:disabled { opacity: .6; cursor: default; }
+  .pill.downbtn { border: 1px solid var(--no-fg); background: transparent; color: var(--no-fg); cursor: pointer; font-family: inherit; }
+  .pill.downbtn:hover:not(:disabled) { background: var(--no-fg); color: #fff; }
+  /* stalled-recovery quick actions (Esc / Restart) on a card */
+  .pill.recover { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-family: inherit; }
+  .pill.recover:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+  .pill.recover:disabled { opacity: .6; cursor: default; }
+  /* connection-honesty indicator in the app bar */
+  .connind {
+    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
+    font-size: .76rem; font-weight: 650; padding: .2rem .55rem; border-radius: 999px;
+    border: 1px solid var(--border); background: var(--surface-2);
+    font-variant-numeric: tabular-nums;
+  }
+  .connind.live { color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok-fg) 40%, var(--border)); }
+  .connind.stale { color: var(--busy-fg); border-color: color-mix(in srgb, var(--busy-fg) 45%, var(--border)); }
+  /* avatar */
+  .avatar {
+    width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
+    font-weight: 700; color: #fff; font-size: .95rem;
+  }
+  .avatar.sm { width: 32px; height: 32px; border-radius: 10px; font-size: .82rem; }
+  /* ---- agents overview grid ------------------------------------------- */
+  .grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+  .agentcard { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
+  .agentcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+  .agentcard .top { display: flex; align-items: center; gap: .7rem; }
+  .agentcard .name { font-weight: 700; }
+  .agentcard .role { color: var(--muted); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
+  .agentcard .meta { display: flex; flex-wrap: wrap; gap: .4rem; }
+  .sectiontitle { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .3rem 0 .8rem; flex-wrap: wrap; }
+  .sectiontitle h2 { margin: 0; font-size: 1.05rem; }
+  .agents-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
+  .tgl { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
+  .tgl input { margin: 0; }
+  .rateline { margin-left: auto; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  /* onboarding: template picker (empty state) */
+  .tpl-intro { margin: .2rem 0 .7rem; }
+  .tplgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+  .tpl { text-align: left; padding: .9rem; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
+  .tpl:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+  .tpl:disabled { opacity: .6; cursor: default; }
+  .tpl-title { font-weight: 700; }
+  .tpl-sum { font-size: .84rem; }
+  .tpl-meta { font-size: .74rem; }
+  /* ---- mail app -------------------------------------------------------- */
+  .mailhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
+  .mailhead .who { display: flex; align-items: center; gap: .6rem; }
+  .mailhead h2 { margin: 0; font-size: 1.05rem; }
+  .mail { display: grid; grid-template-columns: 300px 1fr; gap: .9rem; align-items: start; }
+  .contacts { padding: .4rem; overflow: hidden; }
+  .contact {
+    display: flex; gap: .6rem; align-items: center; padding: .55rem .55rem; border-radius: var(--radius-sm);
+    cursor: pointer; border: 1px solid transparent;
+  }
+  .contact:hover { background: var(--surface-2); }
+  .contact.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
+  .contact .info { min-width: 0; flex: 1 1 auto; }
+  .contact .cn { display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
+  .contact .cn b { font-weight: 650; }
+  .contact .cn .t { color: var(--muted); font-size: .72rem; white-space: nowrap; }
+  .contact .prev { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .badge { background: var(--accent); color: var(--accent-fg); border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .05rem .42rem; }
+  .thread { display: flex; flex-direction: column; min-height: 60vh; }
+  .thread .scroll { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; overflow-y: auto; flex: 1 1 auto; }
+  .msg { max-width: 78%; padding: .55rem .75rem; border-radius: 14px; box-shadow: var(--shadow); word-wrap: break-word; overflow-wrap: anywhere; }
+  .msg .m-head { font-size: .68rem; color: var(--muted); margin-bottom: .2rem; display: flex; gap: .5rem; }
+  /* rendered markdown inside a bubble */
+  .msg .m-body > :first-child { margin-top: 0; }
+  .msg .m-body > :last-child { margin-bottom: 0; }
+  .msg p { margin: 0 0 .45rem; }
+  .msg .md-h { margin: .4rem 0 .3rem; font-size: 1rem; line-height: 1.3; }
+  .msg ul, .msg ol { margin: .2rem 0 .45rem; padding-left: 1.25rem; }
+  .msg li { margin: .1rem 0; }
+  .msg code { background: rgba(127,127,127,.18); padding: .05rem .3rem; border-radius: 5px; font: .85em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .msg pre.md-pre { background: rgba(127,127,127,.16); padding: .5rem .6rem; border-radius: 8px; overflow-x: auto; margin: .35rem 0; }
+  .msg pre.md-pre code { background: none; padding: 0; }
+  .msg blockquote { margin: .3rem 0; padding-left: .6rem; border-left: 3px solid rgba(127,127,127,.4); opacity: .9; }
+  .msg a { color: inherit; text-decoration: underline; }
+  .msg.out code, .msg.out pre.md-pre { background: rgba(255,255,255,.2); }
+  .m-more { display: block; margin-top: .3rem; padding: 0; background: none; border: none; cursor: pointer; font: inherit; font-size: .72rem; color: var(--accent); text-decoration: underline; opacity: .85; }
+  .m-more:hover { opacity: 1; }
+  .msg.out .m-more { color: color-mix(in srgb, var(--accent-fg) 85%, transparent); }
+  .m-status { font-size: .66rem; margin-top: .25rem; text-align: right; color: var(--muted); letter-spacing: .01em; }
+  .msg.out .m-status { color: color-mix(in srgb, var(--accent-fg) 78%, transparent); }
+  .m-status.s-read { color: var(--ok-fg); }
+  .msg.out .m-status.s-read { color: color-mix(in srgb, var(--accent-fg) 92%, var(--ok-fg)); }
+  .msg.in { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; }
+  .msg.out { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 5px; }
+  .msg.out .m-head { color: color-mix(in srgb, var(--accent-fg) 75%, transparent); }
+  .msg.system { align-self: center; background: transparent; border: 1px dashed var(--border); color: var(--muted); font-size: .85rem; box-shadow: none; max-width: 90%; }
+  .empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }
+  .compose { border-top: 1px solid var(--border); padding: .7rem; display: flex; gap: .5rem; align-items: flex-end; }
+  .compose textarea { min-height: 44px; max-height: 40vh; resize: vertical; }
+  .composenote { padding: .7rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
+  /* terminal panel */
+  .terminal { margin-top: .9rem; padding: .8rem; }
+  .terminal .thead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; gap: .5rem; }
+  pre.pane {
+    background: #0b0d11; color: #cdd6e4; border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: .7rem; max-height: 42vh; overflow: auto; white-space: pre; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  pre.pane.wrap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
+  .terminal .thead .wrapchk { margin-right: auto; display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
+  .terminal .thead .wrapchk input { margin: 0; }
+  .keyrow { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
+  .keybtn {
+    font: 600 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    padding: .34rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
+    background: var(--surface-2); color: var(--text); cursor: pointer; min-width: 2.1rem;
+  }
+  .keybtn:hover { background: var(--surface); border-color: var(--accent); }
+  .keybtn:active { transform: translateY(1px); }
+  .typerow { display: flex; gap: .5rem; margin-top: .5rem; }
+  /* ---- settings -------------------------------------------------------- */
+  .settings { display: flex; flex-direction: column; gap: 1rem; }
+  .formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
+  .fld { display: flex; flex-direction: column; gap: .3rem; }
+  .fld label { font-size: .8rem; color: var(--muted); font-weight: 600; }
+  .panel { padding: 1rem; }
+  .panel h3 { margin: 0 0 .2rem; }
+  .agentrow { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid var(--border); }
+  .agentrow:last-child { border-bottom: none; }
+  .agentrow .info { flex: 1 1 auto; min-width: 0; }
+  .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
+  .rowend { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
+  .toast {
+    position: fixed; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
+    background: var(--text); color: var(--bg); padding: .55rem .9rem; border-radius: 999px;
+    box-shadow: var(--shadow-lg); font-size: .88rem; z-index: 50; opacity: 0; transition: opacity .2s, transform .2s;
+    pointer-events: none; max-width: 90vw;
+  }
+  .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
+  /* modal */
+  .modal-back { position: fixed; inset: 0; background: rgba(6,8,12,.55); display: grid; place-items: center; z-index: 40; padding: 1rem; }
+  .modal { width: min(560px, 96vw); max-height: 90vh; overflow: auto; padding: 1.2rem; }
+  .modal h3 { margin-top: 0; }
+  /* segmented tabs (Mail / Terminal) */
+  .tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
+  .tab { border: none; background: transparent; color: var(--muted); padding: .3rem .8rem; border-radius: 999px; font-weight: 600; font-size: .88rem; }
+  .tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
+  /* activity timeline */
+  .timeline { display: flex; flex-direction: column; }
+  .event { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); font-size: .88rem; flex-wrap: wrap; }
+  .event:last-child { border-bottom: none; }
+  .event .t { color: var(--muted); font-size: .74rem; min-width: 3.2rem; font-variant-numeric: tabular-nums; }
+  /* topology graph */
+  .edge { stroke: currentColor; stroke-width: 1.6; opacity: .55; }
+  /* live flow: an edge into a node that currently holds unread mail */
+  .edge-live { stroke: var(--accent); opacity: .95; stroke-width: 2.4; stroke-dasharray: 5 4; animation: edgeflow .6s linear infinite; }
+  @keyframes edgeflow { to { stroke-dashoffset: -9; } }
+  /* status rings, colored by the agent's live state */
+  .gring { stroke-width: 2.5; }
+  .gring-working { stroke: var(--ok-fg); animation: ringpulse 1.4s ease-in-out infinite; }
+  .gring-attention { stroke: var(--busy-fg); }
+  .gring-stalled { stroke: var(--no-fg); }
+  .gring-stopped { stroke: var(--muted); }
+  @keyframes ringpulse { 0%, 100% { opacity: .9; } 50% { opacity: .3; } }
+  @media (prefers-reduced-motion: reduce) { .edge-live, .gring-working { animation: none; } }
+  .gnode-t { fill: #fff; font-weight: 700; font-size: 11px; }
+  .gnode-l { fill: var(--muted); font-size: 10px; }
+  .gnode { cursor: pointer; }
+  .gnode circle { transition: opacity .12s; }
+  .gnode:hover circle, .gnode:focus circle { opacity: .82; }
+  .gnode:hover .gnode-l, .gnode:focus .gnode-l { fill: var(--text); }
+  .gnode:focus { outline: none; }
+  .hide { display: none !important; }
+  /* ---- responsive ------------------------------------------------------ */
+  @media (max-width: 760px) {
+    .brand small { display: none; }
+    .avail .lbl { display: none; }
+    /* keep the app bar from overflowing on phones; the banner still reports
+       a dropped connection, so the chip is redundant here. */
+    .connind { display: none; }
+    .mail { grid-template-columns: 1fr; }
+    /* On mobile show either the contacts list OR the open thread. */
+    body[data-pane="thread"] .contacts { display: none; }
+    body[data-pane="list"] .thread-wrap { display: none; }
+    .msg { max-width: 88%; }
+    main { padding: .8rem .7rem 4rem; }
+  }
+</style>
+</head>
+<body data-pane="list">
+  <header id="bar">
+    <div class="brand">
+      <span class="dot">◆</span>
+      <span>Agentainer<small id="swarmMeta">control plane</small></span>
+    </div>
+    <span class="spacer"></span>
+    <span class="connind" id="connind" hidden></span>
+    <div class="avail" id="availWrap" hidden>
+      <span class="lbl" id="availLbl">You: away</span>
+      <label class="switch" title="Receive mail from agents">
+        <input type="checkbox" id="availToggle" />
+        <span class="track"></span><span class="knob"></span>
+      </label>
+    </div>
+    <nav id="nav" hidden>
+      <button class="navbtn active" data-view="agents">Agents</button>
+      <button class="navbtn" data-view="activity">Activity</button>
+      <button class="navbtn" data-view="settings">Settings</button>
+    </nav>
+  </header>
+  <main>
+    <div class="banner" id="banner"></div>
+    <!-- login -->
+    <section id="login" class="center">
+      <div class="card">
+        <h2>Connect</h2>
+        <p class="muted" style="margin-top:0">Enter the access token printed when you run <code>agentainer up</code> (also shown by <code>agentainer serve</code>).</p>
+        <div class="fld">
+          <input id="token" class="field" type="password" placeholder="UI token" autocomplete="off" />
+        </div>
+        <div class="rowend">
+          <button class="btn" id="connect">Connect</button>
+        </div>
+      </div>
+    </section>
+    <!-- everything below is rendered by app.js -->
+    <section id="view" hidden></section>
+  </main>
+  <div id="toast" class="toast"></div>
+  <div id="modalRoot"></div>
+  <script src="app.js"></script>
+</body>
+</html>

package/agents.example.yaml DELETED Viewed

@@ -1,257 +0,0 @@
-# =============================================================================
-# Agentainer example configuration
-#
-#   cp agents.example.yaml agents.yaml
-#   agentainer validate --show-prompts     # check it without launching anything
-#   agentainer up                          # launch the swarm
-#
-# Every key is documented inline. Anything marked (optional) can be omitted.
-# =============================================================================
-swarm:
-  name: dev-swarm
-  # Where agent working directories are created. One folder per agent, named
-  # after the agent. Relative paths resolve against this file's directory.
-  root: ./workspace
-  # (optional) Create missing agent folders automatically. Default true.
-  # Set to false to point agents at directories that must already exist, so a
-  # typo in a path fails loudly instead of silently creating an empty folder.
-  create_workdirs: true
-  # (optional) Prefix for tmux session names. With `swarm-`, the agent named
-  # `developer` lives in the tmux session `swarm-developer`.
-  session_prefix: ""
-  # (optional) Timing knobs, all in milliseconds.
-  send_delay_ms: 150      # pause before pasting text into a pane
-  enter_delay_ms: 250     # pause between pasting text and pressing Enter
-  max_forward_hops: 3     # stops auto-forward loops (A -> B -> A -> ...)
-  # (optional) How long to keep probing an agent's input box for a response
-  # before giving up and typing the first prompt anyway. Some CLIs (Claude Code)
-  # silently discard keystrokes for several seconds partway through startup, so
-  # Agentainer waits for the input box to echo a throwaway token before typing.
-  ready_timeout_ms: 60000
-  # (optional) An agent is "busy" from when a message is submitted to it until its
-  # next captured turn end; senders are refused meanwhile and told to --queue or
-  # --wait. If a capture never fires (crashed CLI, bad hook) the agent would look
-  # busy forever, so after this long it is treated as idle again, with a warning.
-  busy_timeout_ms: 900000
-  # (optional) How messages look on the wire.
-  #   tagged -- messages arrive inside <swarm-message from=".." id=".."> ... </swarm-message>,
-  #             and an agent sends one by writing <swarm-send to="..."> ... </swarm-send>
-  #             in its reply. No shell quoting, so multi-line bodies survive intact.
-  #   plain  -- the older "[swarm] message from <sender>:" header.
-  message_format: tagged
-  # (optional) An agent that answers a question as plain prose sends nothing: only a
-  # <swarm-send> block is delivered. When it owes a reply and its turn ends without
-  # one, Agentainer messages it explaining how to send. This is how many times.
-  max_reply_reminders: 1
-  # (optional) Reattach agents to their previous conversations on `up`, using the ids
-  # recorded in <root>/.swarm/sessions.yaml. Same as passing `up --resume` every time.
-  # Useful after a reboot. `up --no-resume` overrides it.
-  resume: false
-  # (optional) Only used by agents with `capture: pane` (gemini, hermes).
-  pane_idle_ms: 2500      # pane must be unchanged this long to count as "done"
-  pane_poll_ms: 700       # how often the watcher samples the pane
-  pane_scrollback: 400    # lines of scrollback to diff
-  # (optional) tmux comfort settings for when you `agentainer attach <agent>`.
-  # The default tmux scrollback (2000 lines) is too small to hold a long
-  # multi-agent conversation, so Agentainer raises it before creating sessions.
-  # mouse mode lets you wheel-scroll the backlog; press q to leave copy mode.
-  # Both are applied to the tmux server, so they also affect your other sessions.
-  tmux_history_limit: 50000   # lines of scrollback per agent pane (0 = leave tmux's default)
-  tmux_mouse: true            # enable mouse wheel scrolling in the panes
-# -----------------------------------------------------------------------------
-# defaults (optional) -- applied to every agent that does not override them.
-# -----------------------------------------------------------------------------
-defaults:
-  type: claude
-  append_agents_that_you_can_talk_to_prompt: true
-  in_first_prompt_append_your_task_will_be_sent_in_the_next_prompt: false
-  env:
-    SWARM_DEMO: "1"
-# -----------------------------------------------------------------------------
-# agent_types (optional) -- override the built-in launch commands, or define
-# entirely new agent types. Built-ins are: claude, codex, gemini, hermes.
-#
-#   capture: how Agentainer learns that an agent finished a turn.
-#     hook -- the CLI can run an external program on turn completion.
-#             Supported for claude (Stop hook) and codex (notify program).
-#     pane -- no such facility: poll the tmux pane and diff it. Heuristic.
-#     none -- do not capture at all.
-#
-#   boot_delay_ms: a grace period before Agentainer starts probing the input
-#     box. It does NOT need to cover the full startup time -- delivery of the
-#     first prompt is verified and retried, so a small value is fine.
-# -----------------------------------------------------------------------------
-agent_types:
-  claude:
-    command: "claude --dangerously-skip-permissions"
-    capture: hook
-    boot_delay_ms: 3000
-  codex:
-    command: "codex --yolo"
-    capture: hook
-    boot_delay_ms: 3000
-  gemini:
-    command: "gemini --yolo"
-    capture: pane
-    boot_delay_ms: 4000
-  hermes:
-    command: "hermes"
-    capture: pane
-    boot_delay_ms: 3000
-# -----------------------------------------------------------------------------
-# agents -- one tmux session and one directory each.
-# -----------------------------------------------------------------------------
-agents:
-  - name: orchestrator
-    type: claude
-    # (optional) Override the type's command, e.g. to pin a model.
-    command: "claude --dangerously-skip-permissions --model opus"
-    # Who this agent is allowed to message. Use "*" for "everyone else".
-    # An agent that tries to message anyone not listed here is refused.
-    can_talk_to: ["researcher", "developer", "reviewer"]
-    first_prompt: |
-      You are the ORCHESTRATOR of a small software team.
-      Your job is to break the user's goal into concrete pieces of work, hand
-      each piece to the right specialist, and assemble their answers into a
-      final result. You do not write production code yourself.
-      Team:
-        - researcher: investigates prior art, APIs and docs
-        - developer:  writes the implementation
-        - reviewer:   critiques diffs and finds bugs
-      Start by asking the researcher what they can find, then brief the developer.
-    # This agent is told its task arrives in a follow-up prompt, so it will
-    # acknowledge and wait rather than inventing work.
-    in_first_prompt_append_your_task_will_be_sent_in_the_next_prompt: true
-  - name: researcher
-    type: gemini
-    command: "gemini --yolo"
-    can_talk_to: ["orchestrator", "developer"]
-    # Whenever this agent finishes a turn, its final message is automatically
-    # relayed to these agents. Every name here must also be in can_talk_to.
-    # Leave it out (the default) to let the agent decide when to speak.
-    forward_responses_to: ["orchestrator"]
-    first_prompt: |
-      You are the RESEARCHER. You investigate libraries, APIs, prior art and
-      documentation, then report findings concisely with sources.
-      You never write production code. When you have an answer, state it plainly:
-      what exists, what it costs, and what you recommend.
-  - name: developer
-    type: codex
-    command: "codex --yolo"
-    can_talk_to: ["orchestrator", "reviewer"]
-    # (optional) Per-agent environment variables, exported into its tmux session.
-    env:
-      GIT_AUTHOR_NAME: "swarm-developer"
-    # (optional) Before typing the first prompt, type a throwaway token and wait
-    # for the input box to echo it back. Defaults to true; turn it off only for
-    # a command that is not an interactive TUI.
-    ready_probe: true
-    # (optional) Refuse incoming messages while this agent is mid-turn, so a second
-    # agent is told "developer is busy, --queue it or --wait" instead of interrupting.
-    # Needs a capture to know when a turn ends; forced off when capture: none.
-    busy_check: true
-    # (optional) Read <swarm-send> blocks out of this agent's replies and deliver
-    # them. Needs a capture; forced off when capture: none or message_format: plain.
-    parse_outbound_tags: true
-    # (optional) Nudge this agent when it owes a reply but sent nothing, or when the
-    # block it wrote could not be delivered. Off when its tags are not parsed.
-    reply_reminder: true
-    # (optional) How to reattach this agent to a previous conversation. `resume_args`
-    # is appended to `command`; `resume_command` replaces it outright, which you need
-    # when the command goes through an alias or wrapper. {session_id} is substituted.
-    #
-    # resume_args: "resume {session_id}"                       # -> codex --yolo resume <id>
-    # resume_command: "bash -ic 'mywrapper --resume {session_id}'"
-    first_prompt: |
-      You are the DEVELOPER. You implement what the orchestrator asks for, in
-      the working directory you were started in.
-      Write real, runnable code. When you finish a unit of work, send the
-      reviewer a short summary of what you changed and why, and ask for review.
-  - name: reviewer
-    type: claude
-    command: "claude --dangerously-skip-permissions"
-    can_talk_to: ["developer", "orchestrator"]
-    # (optional) Run this agent somewhere specific instead of <root>/<name>.
-    # Relative paths resolve against this file. `~` is expanded. The
-    # placeholders {name}, {root}, {swarm} and {type} are substituted, so a
-    # single `defaults.workdir` can serve every agent, e.g. "{root}/{name}-wt".
-    #
-    # Several agents may share one directory (they then see each other's edits;
-    # Agentainer warns you). Pair `create_workdir: false` with an existing
-    # project so a bad path is an error, not a new empty folder.
-    #
-    # workdir: ~/projects/acme-api
-    # create_workdir: false
-    # (optional) Read the prompt from a file instead of inlining it here.
-    # first_prompt_file: ./prompts/reviewer.md
-    first_prompt: |
-      You are the REVIEWER. You read the developer's changes and hunt for real
-      bugs: wrong logic, unhandled errors, race conditions, security problems.
-      Be specific and cite file:line. If a change is fine, say so briefly rather
-      than inventing nitpicks. Report your verdict back to the developer.
-  - name: scribe
-    type: hermes
-    command: "hermes"
-    # This agent listens only: nobody can be messaged by it, and its own
-    # responses are not captured.
-    can_talk_to: []
-    capture: none
-    # Turn off the auto-appended communication block, since it has no peers.
-    append_agents_that_you_can_talk_to_prompt: false
-    first_prompt: |
-      You are the SCRIBE. Keep a running changelog of the project in NOTES.md.
-# -----------------------------------------------------------------------------
-# templates (optional) -- override the text Agentainer appends to first prompts.
-# Available placeholders: {agent} {swarm} {peers} {prefix} {inbox} {workdir}
-# -----------------------------------------------------------------------------
-#
-# templates:
-#   comms: |
-#     You are {agent}. You may message: {peers}.
-#     Send with: swarm send --to <agent> "message"
-#   task_notice: |
-#     Stand by. Your real task arrives in the next message.