agenter-app 1.1.0 → 1.3.0

package/public/index.html

@@ -17,11 +17,14 @@
   <div class="app" id="app">
     <aside class="sidebar" id="sidebar">
       <div class="brand-row">
-        <div class="brand"><span class="logo"></span>Agenter</div>
+        <div class="brand"><span class="logo"></span><span class="brand-name">Agenter</span></div>
         <span class="conn" id="conn" title="Connecting…"></span>
+        <button class="btn ghost icon nav-min-btn" id="navMinBtn" type="button" data-nav-min title="Collapse sidebar (B)" aria-label="Collapse sidebar" aria-expanded="true">
+          <svg class="ic" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
       </div>
 
-      <button class="nav-item" id="navInbox" type="button">
+      <button class="nav-item" id="navInbox" type="button" title="Inbox">
         <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>
@@ -80,13 +83,24 @@
             </button>
           </div>
         </div>
-        <div class="accent-row" id="accentPicker" role="radiogroup" aria-label="Accent color">
+        <div class="accent-row">
           <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 class="swatches" id="accentPicker" role="radiogroup" aria-label="Accent color">
+            <button type="button" role="radio" data-accent="sage" style="--sw:#b7d4a6" title="Sage"></button>
+            <button type="button" role="radio" data-accent="mint" style="--sw:#8fe0b4" title="Mint"></button>
+            <button type="button" role="radio" data-accent="teal" style="--sw:#73cfcb" title="Teal"></button>
+            <button type="button" role="radio" data-accent="sky" style="--sw:#8cc4ef" title="Sky"></button>
+            <button type="button" role="radio" data-accent="indigo" style="--sw:#a0aef5" title="Indigo"></button>
+            <button type="button" role="radio" data-accent="lavender" style="--sw:#b8acf2" title="Lavender"></button>
+            <button type="button" role="radio" data-accent="plum" style="--sw:#d49ae0" title="Plum"></button>
+            <button type="button" role="radio" data-accent="magenta" style="--sw:#f08fd0" title="Magenta"></button>
+            <button type="button" role="radio" data-accent="rose" style="--sw:#e58aa6" title="Rose"></button>
+            <button type="button" role="radio" data-accent="coral" style="--sw:#f29a8b" title="Coral"></button>
+            <button type="button" role="radio" data-accent="clay" style="--sw:#dc9474" title="Clay"></button>
+            <button type="button" role="radio" data-accent="amber" style="--sw:#eec15f" title="Amber"></button>
+            <button type="button" role="radio" data-accent="lemon" style="--sw:#e3d96b" title="Lemon"></button>
+            <button type="button" role="radio" data-accent="slate" style="--sw:#a9b8c6" title="Slate"></button>
+          </div>
         </div>
         </div>
         </details>
@@ -103,6 +117,7 @@
     <div class="scrim" id="scrim"></div>
 
     <main class="main">
+      <div class="update-bar" id="updateBar" role="status" hidden></div>
       <header class="main-head" id="mainHead"></header>
       <div class="split" id="split">
         <div class="chat-col">
@@ -129,11 +144,42 @@
           <div class="pv-body" id="pvBody"></div>
         </section>
       </div>
+      <section class="term" id="term" aria-label="Terminal" hidden>
+        <div class="term-bar">
+          <span class="term-title">PowerShell</span>
+          <span class="term-cwd mono" id="termCwd"></span>
+          <button class="btn ghost small" type="button" id="termStop" data-term-stop title="Stop the running command. This also ends the shell, so variables start fresh" hidden>Stop</button>
+          <button class="btn ghost small" type="button" data-term-clear>Clear</button>
+          <button class="btn ghost icon" type="button" data-term-toggle title="Close terminal" aria-label="Close terminal">
+            <svg class="ic" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        </div>
+        <pre class="term-out" id="termOut" tabindex="0"></pre>
+        <form class="term-line" id="termForm" autocomplete="off">
+          <span class="term-prompt mono" id="termPrompt">&gt;</span>
+          <input class="term-input mono" id="termInput" type="text" spellcheck="false" aria-label="Command" placeholder="Type a command">
+        </form>
+      </section>
     </main>
   </div>
 
   <div class="toasts" id="toasts" aria-live="polite"></div>
 
+  <div id="moreMenu" class="more-menu" popover role="menu" aria-label="More actions">
+    <button type="button" role="menuitem" data-memory>
+      <svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+      <span>Memory</span>
+    </button>
+    <button type="button" role="menuitem" data-carry>
+      <svg class="ic" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+      <span>Carry to a new chat</span>
+    </button>
+    <button type="button" role="menuitem" data-open-vscode>
+      <svg class="ic" viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+      <span>Open in VS Code</span>
+    </button>
+  </div>
+
   <dialog id="newDialog" class="new-dialog">
     <form id="newForm" autocomplete="off">
       <div class="new-head">
@@ -145,18 +191,48 @@
       </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>
+      <div class="folder-row">
+        <input class="field mono" id="newCwd" list="newCwdList" placeholder="C:\Users\you\Projects\my-app" spellcheck="false" required>
+        <button class="btn" type="button" id="newBrowse">Browse…</button>
+      </div>
       <datalist id="newCwdList"></datalist>
+      <div class="new-carry" id="newCarry" hidden>
+        <span id="newCarryText"></span>
+        <button class="btn ghost small" type="button" data-carry-drop>Remove</button>
+      </div>
       <label class="field-label" for="newMsg">First message</label>
-      <textarea class="field" id="newMsg" rows="4" placeholder="What should Claude do?" required></textarea>
+      <textarea class="field" id="newMsg" rows="4" placeholder="What should Claude do?"></textarea>
+      <div class="attach-row" data-attach="new" hidden></div>
       <div class="dlg-error" id="newError" hidden></div>
       <div class="dlg-actions">
+        <button class="btn ghost attach-left" type="button" data-attach-pick title="Attach images (or paste / drop them)">
+          <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>Attach images
+        </button>
         <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="memDialog" class="mem-dialog">
+    <div class="mem-head">
+      <h2>Memory</h2>
+      <span id="memSub"></span>
+    </div>
+    <div class="mem-body">
+      <nav class="mem-list" id="memList" aria-label="Memory files"></nav>
+      <div class="mem-edit">
+        <div class="mem-path mono" id="memPath"></div>
+        <textarea class="field mono" id="memText" spellcheck="false" aria-label="File contents"></textarea>
+        <div class="dlg-error" id="memError" hidden></div>
+      </div>
+    </div>
+    <div class="dlg-actions">
+      <button class="btn ghost" type="button" data-mem-close>Close</button>
+      <button class="btn primary" type="button" id="memSave" disabled>Save</button>
+    </div>
+  </dialog>
+
   <dialog id="helpDialog">
     <h2>Keyboard shortcuts</h2>
     <dl class="keys">
@@ -170,11 +246,14 @@
       <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>`</kbd></dt><dd>Show or hide the terminal</dd>
+      <dt><kbd>B</kbd></dt><dd>Collapse or expand the sidebar</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>
 
+  <input type="file" id="attachInput" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
   <script src="/app.js"></script>
 </body>
 </html>

package/public/style.css

@@ -72,6 +72,15 @@
 :root[data-accent="teal"] { --accent: #73cfcb; --accent-deep: #1d7a76; }
 :root[data-accent="rose"] { --accent: #e58aa6; --accent-deep: #ad3a61; }
 :root[data-accent="lavender"] { --accent: #b8acf2; --accent-deep: #6450c4; }
+:root[data-accent="mint"] { --accent: #8fe0b4; --accent-deep: #1b7049; }
+:root[data-accent="sky"] { --accent: #8cc4ef; --accent-deep: #27689f; }
+:root[data-accent="indigo"] { --accent: #a0aef5; --accent-deep: #3f51bf; }
+:root[data-accent="plum"] { --accent: #d49ae0; --accent-deep: #8b3a9b; }
+:root[data-accent="magenta"] { --accent: #f08fd0; --accent-deep: #a82a83; }
+:root[data-accent="coral"] { --accent: #f29a8b; --accent-deep: #b03f2b; }
+:root[data-accent="amber"] { --accent: #eec15f; --accent-deep: #855b05; }
+:root[data-accent="lemon"] { --accent: #e3d96b; --accent-deep: #6d640b; }
+:root[data-accent="slate"] { --accent: #a9b8c6; --accent-deep: #4b5f72; }
 
 * { box-sizing: border-box; }
 html, body { height: 100%; margin: 0; }
@@ -101,7 +110,9 @@ kbd {
   width: 300px; flex: none; display: flex; flex-direction: column; gap: 6px;
   background: var(--sidebar); border-right: 1px solid var(--border); padding: 14px 10px 10px; min-height: 0;
 }
-.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
+.brand-row { display: flex; align-items: center; gap: 8px; padding: 0 6px 8px; }
+.brand-row .brand { margin-right: auto; }
+.nav-min-btn { padding: 4px; color: var(--muted); }
 .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
 .logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); position: relative; }
 .logo::after { content: ""; position: absolute; inset: 6px; background: var(--accent-text); transform: rotate(45deg); border-radius: 2px; }
@@ -115,6 +126,7 @@ kbd {
 }
 .nav-item:hover { background: var(--hover); }
 .nav-item.active { background: var(--panel); box-shadow: var(--shadow-sm); }
+.nav-item:disabled { opacity: .6; cursor: progress; }
 .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warn); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 19px; }
 
 .search { position: relative; display: flex; align-items: center; margin: 4px 0 2px; }
@@ -236,7 +248,8 @@ kbd {
 .segmented button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .segmented .ic { width: 14px; height: 14px; }
 .accent-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
-.accent-row span { margin-right: auto; }
+.accent-row > span { margin-right: auto; }
+.swatches { display: grid; grid-template-columns: repeat(7, 16px); gap: 7px; }
 .accent-row button {
   width: 16px; height: 16px; border-radius: 4px; border: 0; padding: 0; cursor: pointer;
   background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
@@ -276,16 +289,17 @@ kbd {
 .btn.primary kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
 
 /* ---------- main ---------- */
-.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+/* Measured as a container: what matters is the room left beside the sidebar, not the window. */
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; container: main / inline-size; }
 .main-head {
-  display: flex; align-items: center; gap: 12px; padding: 12px 24px; min-height: 64px;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 24px; min-height: 64px;
   border-bottom: 1px solid var(--border); background: var(--panel);
 }
-.head-text { min-width: 0; flex: 1; }
+.head-text { min-width: 0; flex: 1 1 180px; }
 .head-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
 .head-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .head-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
+.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
 .menu-btn { display: none; }
 .path-chip { cursor: pointer; border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; }
 .path-chip:hover { color: var(--text); text-decoration: underline; }
@@ -318,6 +332,59 @@ dialog.new-dialog { max-width: 520px; }
 .new-dialog .dlg-error { margin-top: 12px; font-size: 13px; color: var(--danger); }
 .new-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
 
+.new-dialog .folder-row { display: flex; gap: 8px; }
+.new-dialog .folder-row .field { flex: 1; min-width: 0; }
+.new-carry { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 12.5px; }
+.new-carry[hidden] { display: none; }
+.new-carry span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- update bar ---------- */
+.update-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 24px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 13px; }
+.update-bar[hidden] { display: none; }
+.update-bar .update-text { flex: 1 1 240px; min-width: 0; }
+.update-bar .update-text code { font-size: 12px; }
+
+/* ---------- more menu ---------- */
+.more-menu { position: fixed; inset: auto; margin: 0; min-width: 200px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
+.more-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 13px; text-align: left; }
+.more-menu button:hover, .more-menu button:focus-visible { background: var(--hover); outline: none; }
+.more-menu .ic { color: var(--muted); }
+
+/* ---------- terminal ---------- */
+.term { flex: none; height: min(36vh, 360px); min-height: 160px; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--code-bg); }
+.term[hidden] { display: none; }
+.term-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
+.term-title { font-size: 12px; font-weight: 600; flex: none; }
+.term-cwd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
+.term-bar .btn.icon { padding: 4px; }
+.term-out { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px; font-size: 12.5px; line-height: 1.45; outline: none; }
+.term-line { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--border); }
+.term-prompt { color: var(--accent-ink); flex: none; }
+.term-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); padding: 0; }
+.term-input::placeholder { color: var(--muted); }
+
+/* ---------- memory ---------- */
+dialog.mem-dialog { max-width: 860px; }
+.mem-dialog[open] { display: flex; flex-direction: column; height: min(640px, calc(100vh - 48px)); }
+.mem-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; min-width: 0; }
+.mem-head h2 { margin: 0; flex: none; }
+.mem-head span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mem-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; }
+.mem-list { overflow-y: auto; }
+.mem-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 8px 4px; }
+.mem-group:first-child { padding-top: 0; }
+.mem-file { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 13px; text-align: left; }
+.mem-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mem-file:hover { background: var(--hover); }
+.mem-file[aria-current="true"] { background: var(--accent-soft); }
+.mem-file .new { margin-left: auto; flex: none; color: var(--muted); font-size: 11px; }
+.mem-file .dirty { margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
+.mem-edit { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
+.mem-path { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mem-edit textarea { flex: 1; min-height: 0; resize: none; line-height: 1.5; }
+.mem-dialog .dlg-error { font-size: 13px; color: var(--danger); }
+.mem-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+
 /* ---------- steering ---------- */
 .kind-steer .reply-row .hint { white-space: normal; }
 .link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
@@ -363,6 +430,9 @@ dialog.new-dialog { max-width: 520px; }
 .convo { display: flex; flex-direction: column; gap: 10px; }
 .msg-user { align-self: flex-end; max-width: 78%; background: var(--accent-soft); border: 1px solid transparent; padding: 9px 14px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word; }
 .msg-user.from-dash { border-color: var(--accent-ink); }
+.carried { margin-top: 6px; font-size: 12.5px; color: var(--text-2); white-space: normal; }
+.carried > summary { cursor: pointer; }
+.carried pre { margin-top: 6px; max-height: 280px; overflow: auto; font-size: 12px; }
 .live-echo { display: flex; justify-content: flex-end; margin-top: 12px; }
 .msg-claude { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
 .claude-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-ink); }
@@ -479,6 +549,19 @@ dialog.new-dialog { max-width: 520px; }
 .reply-box textarea { width: 100%; min-height: 64px; max-height: 260px; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; padding: 10px 12px 4px; outline: none; display: block; }
 .reply-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 12px; }
 .reply-row .hint { color: var(--muted); font-size: 12px; margin-right: auto; }
+.reply-box.drop-over, #newForm.drop-over .field#newMsg { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
+
+/* Images waiting to go with a message. */
+.attach-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 2px; }
+.attach-row[hidden] { display: none; }
+#newDialog .attach-row { padding: 10px 0 0; }
+.thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); flex: none; }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; opacity: .85; }
+.thumb-x:hover, .thumb-x:focus-visible { opacity: 1; background: var(--danger); }
+.attach-btn { padding-inline: 7px; }
+.attach-btn .ic { margin: 0; }
+.new-dialog .dlg-actions .attach-left { margin-right: auto; }
 
 .question { margin-bottom: 14px; }
 .q-title { font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
@@ -495,7 +578,7 @@ dialog.new-dialog { max-width: 520px; }
 .section-title { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 26px 0 10px; }
 #inboxPending > .section-title { margin-top: 0; }
 .all-clear { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
-.all-clear .big { width: 38px; height: 38px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
+.all-clear .big { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
 .all-clear b { display: block; }
 .all-clear span { color: var(--muted); font-size: 13px; }
 .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
@@ -538,23 +621,49 @@ dialog form { text-align: right; }
   *, *::before, *::after { animation: none !important; transition: none !important; }
 }
 
+/* ---------- collapsed sidebar: a rail of icons and sessions ---------- */
+@media (min-width: 801px) {
+  .app.nav-min .sidebar { width: 60px; padding: 14px 8px 10px; align-items: stretch; }
+  .app.nav-min .brand-row { flex-direction: column; padding: 0 0 8px; }
+  .app.nav-min .brand { margin: 0; }
+  .app.nav-min .brand-name, .app.nav-min .search, .app.nav-min .usage, .app.nav-min .sidebar-foot, .app.nav-min .group-label { display: none; }
+  .app.nav-min .nav-item { justify-content: center; padding: 8px 0; position: relative; }
+  .app.nav-min .nav-item > span:not(.count) { display: none; }
+  .app.nav-min .nav-item .count { position: absolute; top: 0; right: 0; min-width: 16px; padding: 0 4px; line-height: 15px; font-size: 10px; }
+  .app.nav-min .session-list { margin: 0; padding: 0; }
+  .app.nav-min .s-item { grid-template-columns: 32px; justify-content: center; padding: 6px 0; }
+  .app.nav-min .s-main, .app.nav-min .s-when { display: none; }
+}
+
 /* ---------- small screens ---------- */
 @media (max-width: 800px) {
   .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); width: min(300px, 86vw); }
   .app.nav-open .sidebar { transform: none; }
   .app.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 30; }
   .menu-btn { display: inline-flex; }
+  .search kbd { display: none; }
+}
+
+/* Going by the space beside the sidebar, so the same room lays out the same way whether
+   the sidebar is open, collapsed or a drawer. */
+@container main (max-width: 900px) {
+  .head-actions .label { display: none; }
+}
+@container main (max-width: 760px) {
   .main-head { padding: 10px 16px; }
+  .update-bar { padding: 8px 16px; }
   .content { padding: 16px; }
   .dock { padding: 0 16px 14px; }
-  .head-actions .label { display: none; }
   .msg-user { max-width: 92%; }
-  .btn kbd, .reply-row .hint, .search kbd { display: none; }
+  .btn kbd, .reply-row .hint { display: none; }
   .tools { margin-left: 8px; }
   /* No room side by side: the app goes on top, the conversation below. */
   .split { flex-direction: column; }
   .splitter { display: none; }
-  .preview { order: -1; width: auto; max-width: none; min-width: 0; height: 48vh; border-bottom: 1px solid var(--border); }
+  .preview { order: -1; width: auto; max-width: none; min-width: 0; height: 48vh; flex: none; border-bottom: 1px solid var(--border); }
+}
+@media (max-width: 640px) {
+  .mem-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 5fr); }
 }
 
 .auth-lost { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 10px; background: #5c2a26; color: #fff; font-size: 13px; }

package/scripts/pick-folder.ps1

@@ -0,0 +1,85 @@
+# The Windows folder window behind New session. Prints the folder you chose, or nothing if
+# you cancel.
+Add-Type -AssemblyName System.Windows.Forms
+
+# Windows won't let a background process take focus, so without this the window could open
+# behind the dashboard and clicking New session would seem to do nothing. Joining the input
+# of the window that has focus is what makes SetForegroundWindow allowed.
+Add-Type @"
+using System;
+using System.Text;
+using System.Runtime.InteropServices;
+public static class PickFolderWindow {
+  [DllImport("user32.dll")] static extern IntPtr GetForegroundWindow();
+  [DllImport("user32.dll")] static extern uint GetWindowThreadProcessId(IntPtr h, IntPtr p);
+  [DllImport("kernel32.dll")] static extern uint GetCurrentThreadId();
+  [DllImport("user32.dll")] static extern bool AttachThreadInput(uint a, uint b, bool attach);
+  [DllImport("user32.dll")] static extern bool SetForegroundWindow(IntPtr h);
+  [DllImport("user32.dll")] static extern bool BringWindowToTop(IntPtr h);
+  [DllImport("user32.dll")] static extern bool IsWindowVisible(IntPtr h);
+  [DllImport("user32.dll", CharSet = CharSet.Unicode)] static extern int GetClassName(IntPtr h, StringBuilder name, int size);
+  delegate bool WindowVisitor(IntPtr h, IntPtr data);
+  [DllImport("user32.dll")] static extern bool EnumThreadWindows(uint thread, WindowVisitor visit, IntPtr data);
+  [DllImport("user32.dll")] static extern bool SetWindowPos(IntPtr h, IntPtr after, int x, int y, int cx, int cy, uint flags);
+  // Dialogs are the #32770 class. Runs on the dialog's thread, so its windows are ours.
+  static IntPtr FindDialog(uint thread) {
+    IntPtr found = IntPtr.Zero;
+    EnumThreadWindows(thread, (h, data) => {
+      StringBuilder name = new StringBuilder(16);
+      GetClassName(h, name, 16);
+      if (name.ToString() != "#32770" || !IsWindowVisible(h)) return true;
+      found = h;
+      return false;
+    }, IntPtr.Zero);
+    return found;
+  }
+  // True once the dialog really has focus.
+  public static bool BringForward() {
+    uint self = GetCurrentThreadId();
+    IntPtr dialog = FindDialog(self);
+    if (dialog == IntPtr.Zero) return false; // not up yet
+    if (GetForegroundWindow() == dialog) return true;
+    SetWindowPos(dialog, new IntPtr(-1), 0, 0, 0, 0, 0x0043); // topmost, no move or size, show
+    uint focused = GetWindowThreadProcessId(GetForegroundWindow(), IntPtr.Zero);
+    bool joined = focused != 0 && focused != self && AttachThreadInput(self, focused, true);
+    BringWindowToTop(dialog);
+    SetForegroundWindow(dialog);
+    if (joined) AttachThreadInput(self, focused, false);
+    return GetForegroundWindow() == dialog;
+  }
+}
+"@
+
+[Console]::OutputEncoding = [Text.UTF8Encoding]::new($false)
+
+$owner = New-Object System.Windows.Forms.Form
+$owner.TopMost = $true
+# Windows can still refuse focus, and this keeps the window findable when it does.
+$owner.ShowInTaskbar = $true
+$owner.Text = 'Agenter: choose a folder'
+$owner.FormBorderStyle = 'None'
+$owner.Opacity = 0
+$owner.StartPosition = 'Manual'
+$owner.Location = New-Object System.Drawing.Point(-32000, -32000)
+$owner.Show()
+
+$dialog = New-Object System.Windows.Forms.FolderBrowserDialog
+$dialog.Description = 'Choose the project folder for this session'
+$dialog.ShowNewFolderButton = $true
+if ($env:AGENTER_PICK_START -and (Test-Path -LiteralPath $env:AGENTER_PICK_START)) { $dialog.SelectedPath = $env:AGENTER_PICK_START }
+
+# Runs inside the dialog's own message loop. Keeps trying for a few seconds, then lets you be.
+$raise = New-Object System.Windows.Forms.Timer
+$raise.Interval = 50
+$script:tries = 0
+$raise.add_Tick({
+  $script:tries++
+  if ([PickFolderWindow]::BringForward() -or $script:tries -ge 60) { $raise.Stop() }
+})
+$raise.Start()
+
+if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) {
+  [Console]::Out.Write($dialog.SelectedPath)
+}
+$raise.Dispose()
+$owner.Dispose()