claudity 1.0.0

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="450px" height="450px" viewBox="0 0 450 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Combined Shape</title>
+    <g id="claudity" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="og" transform="translate(-375, -90)" fill="#00FF88">
+            <path d="M487.5,104.0625 L487.5,90 L515.625,90 L515.625,118.125 L529.6875,118.125 L529.6875,146.25 L543.75,146.25 L543.75,174.375 L557.8125,174.375 L557.8125,202.5 L571.875,202.5 L571.875,216.5625 L585.9375,216.5625 L585.9375,244.6875 L600,244.6875 L600,174.375 L614.0625,174.375 L614.0625,118.125 L628.125,118.125 L628.125,104.0625 L656.25,104.0625 L656.25,174.375 L642.1875,174.375 L642.1875,216.5625 L628.125,216.5625 L628.125,244.6875 L642.1875,244.6875 L642.1875,230.625 L656.25,230.625 L656.25,216.5625 L670.3125,216.5625 L670.3125,202.5 L684.375,202.5 L684.375,188.4375 L698.4375,188.4375 L698.4375,174.375 L712.5,174.375 L712.5,160.3125 L726.5625,160.3125 L726.5625,146.25 L754.6875,146.25 L754.6875,160.3125 L768.75,160.3125 L768.75,188.4375 L754.6875,188.4375 L754.6875,202.5 L740.625,202.5 L740.625,216.5625 L726.5625,216.5625 L726.5625,230.625 L712.5,230.625 L712.5,244.6875 L698.4375,244.6875 L698.4375,258.75 L684.375,258.75 L684.375,272.8125 L670.3125,272.8125 L670.3125,286.875 L712.5,286.875 L712.5,272.8125 L754.6875,272.8125 L754.6875,258.75 L810.9375,258.75 L810.9375,272.8125 L825,272.8125 L825,300.9375 L726.5625,300.9375 L726.5625,315 L684.375,315 L684.375,329.0625 L782.8125,329.0625 L782.8125,343.125 L810.9375,343.125 L810.9375,357.1875 L825,357.1875 L825,385.3125 L754.6875,385.3125 L754.6875,371.25 L726.5625,371.25 L726.5625,357.1875 L684.375,357.1875 L684.375,371.25 L698.4375,371.25 L698.4375,385.3125 L726.5625,385.3125 L726.562,399.375 L740.625,399.375 L740.625,413.437 L754.6875,413.4375 L754.687,427.5 L768.75,427.5 L768.75,455.625 L740.625,455.625 L740.625,441.562 L726.5625,441.5625 L726.562,427.5 L712.5,427.5 L712.5,413.437 L698.4375,413.4375 L698.4375,399.375 L684.375,399.375 L684.375,385.3125 L670.3125,385.3125 L670.3125,413.4375 L684.375,413.4375 L684.375,441.5625 L698.4375,441.5625 L698.4375,455.625 L712.5,455.625 L712.5,483.75 L726.5625,483.75 L726.5625,511.875 L698.4375,511.875 L698.4375,497.8125 L684.375,497.8125 L684.375,469.6875 L670.3125,469.6875 L670.3125,455.625 L656.25,455.625 L656.25,427.5 L642.1875,427.5 L642.1875,413.4375 L628.125,413.4375 L628.125,540 L600,540 L600,525.9375 L585.9375,525.9375 L585.9375,455.625 L600,455.625 L600,413.4375 L571.875,413.4375 L571.875,427.5 L557.8125,427.5 L557.8125,441.5625 L543.75,441.5625 L543.75,455.625 L529.6875,455.625 L529.6875,469.6875 L515.625,469.6875 L515.625,483.75 L473.4375,483.75 L473.4375,455.625 L487.5,455.625 L487.5,441.5625 L501.5625,441.5625 L501.5625,427.5 L515.625,427.5 L515.625,413.4375 L529.6875,413.4375 L529.6875,399.375 L543.75,399.375 L543.75,371.25 L529.6875,371.25 L529.6875,385.3125 L501.5625,385.3125 L501.5625,399.375 L473.4375,399.375 L473.4375,413.4375 L459.375,413.4375 L459.375,427.5 L445.3125,427.5 L445.3125,441.5625 L403.125,441.5625 L403.125,413.4375 L417.1875,413.4375 L417.1875,399.375 L445.3125,399.375 L445.3125,385.3125 L459.375,385.3125 L459.375,371.25 L487.5,371.25 L487.5,357.1875 L515.625,357.1875 L515.625,343.125 L529.6875,343.125 L529.6875,329.0625 L389.0625,329.0625 L389.0625,315 L375,315 L375,286.875 L487.5,286.875 L487.5,300.9375 L529.6875,300.9375 L529.6875,272.8125 L515.625,272.8125 L515.625,258.75 L487.5,258.75 L487.5,244.6875 L459.375,244.6875 L459.375,230.625 L431.25,230.625 L431.25,216.5625 L417.1875,216.5625 L417.1875,188.4375 L431.25,188.4375 L431.25,174.375 L459.375,174.375 L459.375,188.4375 L473.4375,188.4375 L473.4375,202.5 L487.5,202.5 L487.5,216.5625 L501.5625,216.5625 L501.5625,230.625 L515.625,230.625 L515.625,244.6875 L543.75,244.6875 L543.75,230.625 L529.6875,230.625 L529.6875,202.5 L515.625,202.5 L515.625,174.375 L501.5625,174.375 L501.5625,146.25 L487.5,146.25 L487.5,132.1875 L473.4375,132.1875 L473.4375,104.0625 L487.5,104.0625 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

package/public/index.html

@@ -0,0 +1,262 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>claudity</title>
+  <meta name="description" content="evolving agents that live where you chat ★ powered by claude code">
+  <meta name="theme-color" content="#000000">
+  <meta name="color-scheme" content="dark">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <button type="button" aria-label="menu" aria-expanded="false" aria-controls="agent-nav" title="menu" data-action="toggle-nav">
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
+  </button>
+  <div data-overlay hidden></div>
+  <nav aria-label="agents" id="agent-nav">
+    <header>
+      <h1>claudity <span>beta</span></h1>
+      <button type="button" aria-label="create agent" title="create agent">
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/></svg>
+      </button>
+    </header>
+    <ul role="listbox" aria-label="agents"></ul>
+    <footer>
+      <button type="button" data-action="connections" title="connections">
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M419.5 96c-16.6 0-32.7 4.5-46.8 12.7-15.8-16-34.2-29.4-54.5-39.5 28.2-24 64.1-37.2 101.3-37.2 86.4 0 156.5 70 156.5 156.5 0 41.5-16.5 81.3-45.8 110.6l-71.1 71.1c-29.3 29.3-69.1 45.8-110.6 45.8-86.4 0-156.5-70-156.5-156.5 0-1.5 0-3 .1-4.5 .5-17.7 15.2-31.6 32.9-31.1s31.6 15.2 31.1 32.9c0 .9 0 1.8 0 2.6 0 51.1 41.4 92.5 92.5 92.5 24.5 0 48-9.7 65.4-27.1l71.1-71.1c17.3-17.3 27.1-40.9 27.1-65.4 0-51.1-41.4-92.5-92.5-92.5zM275.2 173.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5 0-48 9.7-65.4 27.1L91.1 258.2c-17.3 17.3-27.1 40.9-27.1 65.4 0 51.1 41.4 92.5 92.5 92.5 16.5 0 32.6-4.4 46.7-12.6 15.8 16 34.2 29.4 54.6 39.5-28.2 23.9-64 37.2-101.3 37.2-86.4 0-156.5-70-156.5-156.5 0-41.5 16.5-81.3 45.8-110.6l71.1-71.1c29.3-29.3 69.1-45.8 110.6-45.8 86.6 0 156.5 70.6 156.5 156.9 0 1.3 0 2.6 0 3.9-.4 17.7-15.1 31.6-32.8 31.2s-31.6-15.1-31.2-32.8c0-.8 0-1.5 0-2.3 0-33.7-18-63.3-44.8-79.6z"/></svg>
+        <span>connections</span>
+      </button>
+      <div data-toggles>
+        <button type="button" data-action="toggle-sound" aria-label="toggle sound" aria-pressed="true" title="toggle sound">
+          <svg aria-hidden="true" data-icon="sound-on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M533.6 32.5c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C557.5 113.8 592 180.8 592 256s-34.5 142.2-88.7 186.3c-10.3 8.4-11.8 23.5-3.5 33.8s23.5 11.8 33.8 3.5C598.5 426.7 640 346.2 640 256S598.5 85.2 533.6 32.5zM473.1 107c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C475.3 170.7 496 210.9 496 256s-20.7 85.3-53.2 111.8c-10.3 8.4-11.8 23.5-3.5 33.8s23.5 11.8 33.8 3.5c43.2-35.2 70.9-88.9 70.9-149s-27.7-113.8-70.9-149zm-60.5 74.5c-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C393.1 227.6 400 241 400 256s-6.9 28.4-17.7 37.3c-10.3 8.4-11.8 23.5-3.5 33.8s23.5 11.8 33.8 3.5C434.1 312.9 448 286.1 448 256s-13.9-56.9-35.4-74.5zM80 352l48 0 134.1 119.2c6.4 5.7 14.6 8.8 23.1 8.8 19.2 0 34.8-15.6 34.8-34.8l0-378.4c0-19.2-15.6-34.8-34.8-34.8-8.5 0-16.7 3.1-23.1 8.8L128 160 80 160c-26.5 0-48 21.5-48 48l0 96c0 26.5 21.5 48 48 48z"/></svg>
+          <svg aria-hidden="true" data-icon="sound-off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M48 352l48 0 134.1 119.2c6.4 5.7 14.6 8.8 23.1 8.8 19.2 0 34.8-15.6 34.8-34.8l0-378.4c0-19.2-15.6-34.8-34.8-34.8-8.5 0-16.7 3.1-23.1 8.8L96 160 48 160c-26.5 0-48 21.5-48 48l0 96c0 26.5 21.5 48 48 48zM367 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>
+          <span>sound</span>
+        </button>
+        <button type="button" data-action="toggle-theme" aria-label="toggle theme" title="toggle theme">
+          <svg aria-hidden="true" data-icon="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"/></svg>
+          <svg aria-hidden="true" data-icon="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"/></svg>
+          <span>theme</span>
+        </button>
+      </div>
+    </footer>
+  </nav>
+
+  <main>
+    <section aria-label="setup" role="region">
+      <div>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M9.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L146.7 256 9.4 118.6zM224 384l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+        <h2>authentication required</h2>
+        <p>run this command in your terminal to connect your claude subscription</p>
+        <pre>claude setup-token</pre>
+        <p>claudity reads your credentials from the macos keychain automatically</p>
+        <button type="button" data-action="check-auth" title="check authentication status">check again</button>
+        <p data-setup-alt>not working?</p>
+        <div data-setup-buttons>
+          <button type="button" data-action="open-setup-token">enter setup token</button>
+          <button type="button" data-action="open-api-key">enter api key</button>
+        </div>
+      </div>
+    </section>
+
+    <dialog aria-label="setup token">
+      <h2>enter setup token</h2>
+      <p>run <code>claude setup-token</code> and paste the token here</p>
+      <form aria-label="setup-token">
+        <input type="password" placeholder="sk-ant-oat01-..." aria-label="setup token">
+        <button type="submit">save</button>
+      </form>
+      <p data-error hidden></p>
+    </dialog>
+
+    <dialog aria-label="api key">
+      <h2>enter api key</h2>
+      <p>paste your anthropic api key</p>
+      <form aria-label="api-key">
+        <input type="password" placeholder="sk-ant-api03-..." aria-label="api key">
+        <button type="submit">save</button>
+      </form>
+      <p data-error hidden></p>
+    </dialog>
+
+    <section aria-label="empty" hidden role="region">
+      <div>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M352 0c0-17.7-14.3-32-32-32S288-17.7 288 0l0 64-96 0c-53 0-96 43-96 96l0 224c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-224c0-53-43-96-96-96l-96 0 0-64zM160 368c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zm120 0c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zm120 0c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zM224 176a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm144 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM64 224c0-17.7-14.3-32-32-32S0 206.3 0 224l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96zm544-32c-17.7 0-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32z"/></svg>
+        <p>select or create an agent to begin</p>
+      </div>
+    </section>
+
+    <section aria-label="connections" hidden>
+      <header>
+        <h2>connections</h2>
+      </header>
+      <div data-platforms></div>
+    </section>
+
+    <section aria-label="chat" hidden>
+      <header>
+        <div>
+          <h2></h2>
+        </div>
+        <aside>
+          <button type="button" aria-label="edit agent" title="edit agent" data-action="edit-agent">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L368 46.1 465.9 144 490.3 119.6c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L432 177.9 334.1 80 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>
+          </button>
+          <button type="button" aria-label="agent records" title="agent records" data-action="view-files">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M288 0L128 0C110.3 0 96 14.3 96 32s14.3 32 32 32L128 215.5 7.5 426.3C2.6 435 0 444.7 0 454.7 0 486.4 25.6 512 57.3 512l333.4 0c31.6 0 57.3-25.6 57.3-57.3 0-10-2.6-19.8-7.5-28.4L320 215.5 320 64c17.7 0 32-14.3 32-32S337.7 0 320 0L288 0zM192 215.5l0-151.5 64 0 0 151.5c0 11.1 2.9 22.1 8.4 31.8l41.6 72.7-164 0 41.6-72.7c5.5-9.7 8.4-20.6 8.4-31.8z"/></svg>
+          </button>
+          <button type="button" aria-label="delete agent" title="delete agent" data-action="delete-agent">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M136.7 5.9L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-8.7-26.1C306.9-7.2 294.7-16 280.9-16L167.1-16c-13.8 0-26 8.8-30.4 21.9zM416 144L32 144 53.1 467.1C54.7 492.4 75.7 512 101 512L347 512c25.3 0 46.3-19.6 47.9-44.9L416 144z"/></svg>
+          </button>
+        </aside>
+      </header>
+
+      <div aria-label="messages" role="log" aria-live="polite"></div>
+
+      <form aria-label="input">
+        <textarea placeholder="say something..." rows="1" aria-label="message"></textarea>
+        <button type="submit" aria-label="send message" title="send message">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M536.4-26.3c9.8-3.5 20.6-1 28 6.3s9.8 18.2 6.3 28l-178 496.9c-5 13.9-18.1 23.1-32.8 23.1-14.2 0-27-8.6-32.3-21.7l-64.2-158c-4.5-11-2.5-23.6 5.2-32.6l94.5-112.4c5.1-6.1 4.7-15-.9-20.6s-14.6-6-20.6-.9L229.2 276.1c-9.1 7.6-21.6 9.6-32.6 5.2L38.1 216.8c-13.1-5.3-21.7-18.1-21.7-32.3 0-14.7 9.2-27.8 23.1-32.8l496.9-178z"/></svg>
+        </button>
+      </form>
+    </section>
+  </main>
+
+  <dialog aria-label="create agent">
+    <form method="dialog">
+      <h2>create agent</h2>
+      <label>
+        <span>name</span>
+        <input type="text" name="name" placeholder="atlas" required>
+      </label>
+      <label data-toggle>
+        <span>default agent</span>
+        <input type="checkbox" name="is_default" checked>
+        <i></i>
+      </label>
+      <p data-hint>default agent receives messages without a prefix from all connections</p>
+      <label data-select>
+        <span>model</span>
+        <select name="model">
+          <option value="haiku">haiku</option>
+          <option value="sonnet">sonnet</option>
+          <option value="opus" selected>opus</option>
+        </select>
+      </label>
+      <label data-select>
+        <span>thinking</span>
+        <select name="thinking">
+          <option value="low">low</option>
+          <option value="medium">medium</option>
+          <option value="high" selected>high</option>
+        </select>
+      </label>
+      <p data-error hidden></p>
+      <footer>
+        <button type="button" data-action="cancel-dialog">cancel</button>
+        <button type="submit">create</button>
+      </footer>
+    </form>
+  </dialog>
+
+  <dialog aria-label="edit agent">
+    <form method="dialog">
+      <h2>edit agent</h2>
+      <input type="hidden" name="id">
+      <label>
+        <span>name</span>
+        <input type="text" name="name" required>
+      </label>
+      <label data-toggle>
+        <span>default agent</span>
+        <input type="checkbox" name="is_default">
+        <i></i>
+      </label>
+      <p data-hint>default agent receives messages without a prefix from all connections</p>
+      <label data-select>
+        <span>model</span>
+        <select name="model">
+          <option value="haiku">haiku</option>
+          <option value="sonnet">sonnet</option>
+          <option value="opus">opus</option>
+        </select>
+      </label>
+      <label data-select>
+        <span>thinking</span>
+        <select name="thinking">
+          <option value="low">low</option>
+          <option value="medium">medium</option>
+          <option value="high">high</option>
+        </select>
+      </label>
+      <label data-toggle>
+        <span>heartbeat</span>
+        <input type="checkbox" name="heartbeat_enabled">
+        <i></i>
+      </label>
+      <p data-hint>agent periodically checks in and acts on pending tasks autonomously</p>
+      <label data-select>
+        <span>heartbeat interval</span>
+        <select name="heartbeat_interval">
+          <option value="300000">5 minutes</option>
+          <option value="900000">15 minutes</option>
+          <option value="1800000" selected>30 minutes</option>
+          <option value="3600000">1 hour</option>
+          <option value="7200000">2 hours</option>
+        </select>
+      </label>
+      <label data-toggle>
+        <span>show heartbeat messages</span>
+        <input type="checkbox" name="show_heartbeat">
+        <i></i>
+      </label>
+      <p data-error hidden></p>
+      <footer>
+        <button type="button" data-action="cancel-dialog">cancel</button>
+        <button type="submit">save</button>
+      </footer>
+    </form>
+  </dialog>
+
+  <dialog aria-label="connection">
+    <header></header>
+    <div data-body></div>
+    <footer>
+      <button type="button" data-action="cancel-dialog">close</button>
+    </footer>
+  </dialog>
+
+  <dialog aria-label="confirm delete">
+    <h2>delete agent</h2>
+    <p data-confirm-msg></p>
+    <p data-error hidden></p>
+    <footer>
+      <button type="button" data-action="cancel-dialog">cancel</button>
+      <button type="button" data-action="confirm-delete" title="permanently delete this agent">delete</button>
+    </footer>
+  </dialog>
+
+
+  <dialog aria-label="agent records">
+    <h2>agent records</h2>
+    <nav data-file-list></nav>
+    <div data-file-editor hidden>
+      <header>
+        <button type="button" data-action="file-back" aria-label="back" title="back">&larr;</button>
+        <span data-file-name></span>
+      </header>
+      <textarea data-file-content rows="16" aria-label="file content"></textarea>
+      <footer>
+        <button type="button" data-action="cancel-dialog">close</button>
+        <button type="button" data-action="save-file" title="save changes">save</button>
+      </footer>
+    </div>
+    <footer data-list-footer>
+      <button type="button" data-action="cancel-dialog">close</button>
+    </footer>
+  </dialog>
+
+  <script src="js/app.js"></script>
+</body>
+</html>