agenter-app 0.0.0-stage → 1.0.0

package/public/index.html

@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Agenter</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23b7d4a6'/%3E%3Cpath d='M16 7l8 9-8 9-8-9z' fill='%23161813'/%3E%3C/svg%3E">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap">
+  <link rel="stylesheet" href="/style.css">
+  <script>
+    // Applied before first paint so there's no flash of the wrong theme.
+    (() => {
+      const read = (k) => { try { return JSON.parse(localStorage.getItem('agenter.' + k)); } catch { return null; } };
+      const theme = read('theme') || 'system';
+      const dark = theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+      const accent = read('accent');
+      if (accent && accent !== 'sage') document.documentElement.dataset.accent = accent;
+    })();
+  </script>
+</head>
+<body>
+  <div class="app" id="app">
+    <aside class="sidebar" id="sidebar">
+      <div class="brand-row">
+        <div class="brand"><span class="logo"></span>Agenter</div>
+        <span class="conn" id="conn" title="Connecting…"></span>
+      </div>
+
+      <button class="nav-item" id="navInbox" type="button">
+        <svg class="ic" viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+        <span>Inbox</span>
+        <span class="count" id="inboxCount" hidden></span>
+      </button>
+
+      <button class="nav-item" id="navNew" type="button" title="Start a Claude or Codex session that runs here">
+        <svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
+        <span>New session</span>
+      </button>
+
+      <div class="search">
+        <svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input id="search" type="search" placeholder="Filter sessions" autocomplete="off" spellcheck="false">
+        <kbd>/</kbd>
+      </div>
+
+      <div class="session-list" id="sessionList"></div>
+
+      <section class="usage" id="usage" hidden aria-label="Plan usage"></section>
+
+      <div class="sidebar-foot">
+        <details class="settings" id="settingsPanel">
+        <summary>
+          <svg class="ic" viewBox="0 0 24 24"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/></svg>
+          Settings
+          <svg class="ic chev" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
+        </summary>
+        <div class="settings-body">
+        <label class="switch" title="When a session finishes its turn, keep it waiting here so you can reply from the dashboard">
+          <input type="checkbox" id="holdAll"><span class="track"></span><span>Hold finished sessions</span>
+        </label>
+        <label class="select-row" title="While something waits here, VS Code shows a spinner. After this long it goes back to VS Code.">
+          <span>Hand back to VS Code after</span>
+          <select id="holdMinutes">
+            <option value="1">1 min</option>
+            <option value="3">3 min</option>
+            <option value="10">10 min</option>
+            <option value="30">30 min</option>
+            <option value="0">Never</option>
+          </select>
+        </label>
+        <label class="switch">
+          <input type="checkbox" id="soundToggle"><span class="track"></span><span>Sound alerts</span>
+        </label>
+        <div class="theme-row">
+          <span>Theme</span>
+          <div class="segmented" id="themePicker" role="radiogroup" aria-label="Theme">
+            <button type="button" role="radio" data-theme-pick="system" title="Match Windows">
+              <svg class="ic" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
+            </button>
+            <button type="button" role="radio" data-theme-pick="light" title="Light">
+              <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+            </button>
+            <button type="button" role="radio" data-theme-pick="dark" title="Dark">
+              <svg class="ic" viewBox="0 0 24 24"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="accent-row" id="accentPicker" role="radiogroup" aria-label="Accent color">
+          <span>Accent</span>
+          <button type="button" role="radio" data-accent="sage" style="--sw:#b7d4a6" title="Sage"></button>
+          <button type="button" role="radio" data-accent="clay" style="--sw:#dc9474" title="Clay"></button>
+          <button type="button" role="radio" data-accent="teal" style="--sw:#73cfcb" title="Teal"></button>
+          <button type="button" role="radio" data-accent="rose" style="--sw:#e58aa6" title="Rose"></button>
+          <button type="button" role="radio" data-accent="lavender" style="--sw:#b8acf2" title="Lavender"></button>
+        </div>
+        </div>
+        </details>
+        <div class="foot-row">
+          <button class="btn ghost small" id="notifyBtn" type="button" hidden>
+            <svg class="ic" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+            Enable notifications
+          </button>
+          <button class="btn ghost small" id="helpBtn" type="button" title="Keyboard shortcuts">Shortcuts <kbd>?</kbd></button>
+          <button class="btn ghost small" id="clearEnded" type="button" title="Hide sessions that aren't live">Clear earlier</button>
+        </div>
+      </div>
+    </aside>
+    <div class="scrim" id="scrim"></div>
+
+    <main class="main">
+      <header class="main-head" id="mainHead"></header>
+      <div class="split" id="split">
+        <div class="chat-col">
+          <div class="scroll" id="scroll">
+            <div class="content" id="content"></div>
+          </div>
+          <div class="dock" id="dock"></div>
+        </div>
+        <div class="splitter" id="splitter" role="separator" aria-orientation="vertical" title="Drag to resize" hidden></div>
+        <section class="preview" id="preview" aria-label="App preview" hidden>
+          <form class="pv-bar" id="pvForm" autocomplete="off">
+            <button class="btn ghost icon" type="button" data-pv-reload title="Reload">
+              <svg class="ic" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
+            </button>
+            <input class="pv-url mono" id="pvUrl" type="text" placeholder="http://localhost:5173" spellcheck="false" aria-label="App address">
+            <button class="btn ghost icon" type="button" data-pv-pop title="Open in your browser">
+              <svg class="ic" viewBox="0 0 24 24"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
+            </button>
+            <button class="btn ghost icon" type="button" data-pv-close title="Close preview">
+              <svg class="ic" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          </form>
+          <div class="pv-apps" id="pvApps"></div>
+          <div class="pv-body" id="pvBody"></div>
+        </section>
+      </div>
+    </main>
+  </div>
+
+  <div class="toasts" id="toasts" aria-live="polite"></div>
+
+  <dialog id="newDialog" class="new-dialog">
+    <form id="newForm" autocomplete="off">
+      <div class="new-head">
+        <h2>New session</h2>
+        <div class="segmented" id="newAgent" role="radiogroup" aria-label="Agent">
+          <button type="button" role="radio" data-new-agent="claude">Claude</button>
+          <button type="button" role="radio" data-new-agent="codex">Codex</button>
+        </div>
+      </div>
+      <p class="dlg-sub" id="newSub"></p>
+      <label class="field-label" for="newCwd">Project folder</label>
+      <input class="field mono" id="newCwd" list="newCwdList" placeholder="C:\Users\you\Projects\my-app" spellcheck="false" required>
+      <datalist id="newCwdList"></datalist>
+      <label class="field-label" for="newMsg">First message</label>
+      <textarea class="field" id="newMsg" rows="4" placeholder="What should Claude do?" required></textarea>
+      <div class="dlg-error" id="newError" hidden></div>
+      <div class="dlg-actions">
+        <button class="btn ghost" type="button" data-new-cancel>Cancel</button>
+        <button class="btn primary" type="submit" id="newStart">Start session</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog id="helpDialog">
+    <h2>Keyboard shortcuts</h2>
+    <dl class="keys">
+      <dt><kbd>A</kbd></dt><dd>Allow the permission request showing the key hints (the oldest one). If it's off screen, the first press scrolls to it. Not available for destructive-looking commands</dd>
+      <dt><kbd>Shift</kbd> <kbd>A</kbd></dt><dd>Always allow it</dd>
+      <dt><kbd>D</kbd></dt><dd>Deny it (type a reason first to tell Claude what to do instead)</dd>
+      <dt><kbd>R</kbd></dt><dd>Jump to the reply box</dd>
+      <dt><kbd>Enter</kbd></dt><dd>Send a reply (<kbd>Shift</kbd>+<kbd>Enter</kbd> for a new line)</dd>
+      <dt><kbd>J</kbd> / <kbd>K</kbd></dt><dd>Next / previous session</dd>
+      <dt><kbd>N</kbd></dt><dd>Next session that needs you</dd>
+      <dt><kbd>I</kbd></dt><dd>Open the inbox</dd>
+      <dt><kbd>/</kbd></dt><dd>Filter sessions</dd>
+      <dt><kbd>T</kbd></dt><dd>Switch theme (system → light → dark)</dd>
+      <dt><kbd>Esc</kbd></dt><dd>Leave a text box / close this</dd>
+    </dl>
+    <form method="dialog"><button class="btn primary">Got it</button></form>
+  </dialog>
+
+  <script src="/app.js"></script>
+</body>
+</html>