@oddessentials/agent-guild 0.4.0 → 0.5.0

package/web/index.html

@@ -16,6 +16,7 @@
     <div class="brand">
       <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="8" fill="currentColor"/><path d="M9 22l7-12 7 12" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
       <h1>Agent Guild</h1>
+      <span id="version" class="version" hidden></span>
     </div>
     <div class="topbar-end">
       <div id="connection" class="connection" role="status" aria-live="polite">
@@ -24,6 +25,7 @@
       <span id="upgrade-note" class="upgrade-note" hidden></span>
       <button id="upgrade" class="btn upgrade" type="button" hidden></button>
       <button id="theme-toggle" class="btn theme-toggle" type="button"></button>
+      <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
       <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
     </div>
   </header>
@@ -73,9 +75,15 @@
   <section id="stopped" class="auth notice" hidden aria-live="polite">
     <h2 id="stopped-title">Stopping the session manager…</h2>
     <p id="stopped-text">Ending every session. This can take a few seconds.</p>
-    <p>To start again, run this command or double-click the launcher:</p>
-    <pre>agent-guild open</pre>
-    <p>This page reconnects by itself when the manager is back.</p>
+    <div id="stopped-help" class="stopped-help" hidden>
+      <p id="stopped-how">To start again, open a terminal and run:</p>
+      <div class="command">
+        <pre>agent-guild open</pre>
+        <button id="copy-command" class="btn" type="button" title="Copy the command">Copy</button>
+      </div>
+      <p id="stopped-launcher" hidden>Or double-click <code id="stopped-launcher-path"></code> in your file manager.</p>
+      <p>This page reconnects by itself when the manager is back.</p>
+    </div>
   </section>
 
   <div id="terminal-panel" class="terminal-panel" hidden role="dialog" aria-modal="false" aria-labelledby="panel-title">
@@ -131,6 +139,30 @@
     <p id="news-status" class="news-status" hidden></p>
   </dialog>
 
+  <dialog id="history" class="models history" aria-labelledby="history-title">
+    <div class="models-bar">
+      <span id="history-icon" class="provider-icon small"></span>
+      <div class="models-heading">
+        <h2 id="history-title"></h2>
+        <p id="history-sub" class="sub"></p>
+      </div>
+      <button id="history-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="history-tools">
+      <input id="history-filter" type="search" placeholder="Filter by title, folder or id" aria-label="Filter sessions" spellcheck="false" autocomplete="off">
+      <label class="history-here"><input id="history-here" type="checkbox"><span>Working folder only</span></label>
+    </div>
+    <div class="models-body">
+      <div id="history-list" class="history-list" role="list"></div>
+      <p id="history-note" class="models-note"></p>
+    </div>
+    <form id="history-form" class="history-form">
+      <label for="history-id">Resume by id</label>
+      <input id="history-id" type="text" placeholder="Session id or name" spellcheck="false" autocomplete="off">
+      <button type="submit" class="btn">Resume</button>
+    </form>
+  </dialog>
+
   <div id="tip" class="tip" aria-hidden="true" hidden><strong id="tip-title"></strong><span id="tip-source"></span><p id="tip-text"></p></div>
 
   <div id="toast" class="toast" role="alert" hidden></div>
@@ -194,6 +226,17 @@
     </section>
   </template>
 
+  <template id="history-template">
+    <article class="history-row" role="listitem">
+      <div class="history-main">
+        <div class="history-title"></div>
+        <div class="history-meta"></div>
+      </div>
+      <button class="session-id" type="button"></button>
+      <button class="btn primary history-resume" type="button"></button>
+    </article>
+  </template>
+
   <template id="session-template">
     <article class="session-card" role="listitem" tabindex="0">
       <span class="level-badge" aria-hidden="true"></span>
@@ -201,7 +244,7 @@
         <span class="provider-icon"></span>
         <div class="card-title">
           <div class="name"></div>
-          <div class="meta"></div>
+          <div class="meta"><span class="meta-text"></span><button class="session-id" type="button" hidden></button></div>
         </div>
         <button class="model-pill" type="button"></button>
         <span class="status-pill"></span>
@@ -213,6 +256,7 @@
       </div>
       <div class="card-actions">
         <button class="btn primary open" type="button">Open</button>
+        <button class="btn resume" type="button" hidden>Resume</button>
         <button class="btn rename" type="button">Rename</button>
         <button class="btn danger stop" type="button">Stop</button>
         <button class="btn remove" type="button">Remove</button>

package/web/styles.css

@@ -49,6 +49,10 @@ code, pre { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospa
 }
 .brand { display: flex; align-items: center; gap: 10px; }
 .brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
+.version {
+  font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
+  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-variant-numeric: tabular-nums;
+}
 .topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; min-width: 0; }
 .connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
 .connection .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
@@ -249,8 +253,8 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .btn.danger { color: var(--danger); }
 .btn.danger:hover { border-color: var(--danger); }
 .btn:disabled { opacity: 0.6; cursor: progress; }
-.stop-manager, .theme-toggle, .upgrade { white-space: nowrap; }
-.btn.upgrade { color: var(--warn); border-color: var(--warn); }
+.stop-manager, .restart-manager, .theme-toggle, .upgrade { white-space: nowrap; }
+.btn.upgrade, .btn.restart-manager.pending { color: var(--warn); border-color: var(--warn); }
 .upgrade-note { font-size: 0.85rem; color: var(--warn); }
 
 .empty { color: var(--muted); margin: 8px 0 0; }
@@ -259,8 +263,12 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .auth p { margin: 0; color: var(--muted); line-height: 1.5; }
 .auth pre { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
 .auth form { display: flex; gap: 8px; }
+.stopped-help { display: grid; gap: 12px; }
+.command { display: flex; align-items: center; gap: 8px; }
+.command pre { flex: 1; min-width: 0; overflow-x: auto; }
+.stopped-help code { color: var(--text); overflow-wrap: anywhere; }
 .notice h2 { color: var(--danger); }
-.notice.stopping h2 { color: var(--warn); }
+.notice.stopping h2, .notice.restarting h2 { color: var(--warn); }
 .error { color: var(--danger); min-height: 1.2em; }
 
 .terminal-panel {
@@ -394,6 +402,38 @@ a.news-link:visited { color: var(--muted); }
 .news-status { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
 .news-status span { display: block; }
 
+.history-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 0; }
+.history-tools input[type="search"] {
+  flex: 1 1 220px; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem;
+}
+.history-tools input:focus-visible, .history-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.history-here { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
+.history-here:has(input:disabled) { opacity: 0.6; cursor: default; }
+.history .models-body { padding-top: 6px; }
+.history-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px;
+  padding: 10px 8px; border-bottom: 1px solid var(--border);
+}
+.history-main { min-width: 0; }
+.history-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.history-row.untitled .history-title { font-weight: 500; color: var(--muted); }
+.history-meta { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.history-row.running .history-meta { color: var(--ok); }
+.session-id {
+  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; padding: 2px 7px;
+  border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: copy; white-space: nowrap;
+}
+.session-id:hover { color: var(--text); border-color: var(--muted); }
+.session-id:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.card-title .meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.card-title .meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.history-form { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
+.history-form input {
+  flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem;
+}
+
 .toast {
   position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
   max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 8px;
@@ -427,4 +467,7 @@ a.news-link:visited { color: var(--muted); }
   .news-row { flex-wrap: wrap; }
   .news-row .news-link { flex-basis: 100%; white-space: normal; }
   .news-panel { border-left: 0; }
+  .history-row { grid-template-columns: minmax(0, 1fr) auto; }
+  .history-row .session-id { grid-row: 2; justify-self: start; }
+  .history-form { flex-wrap: wrap; }
 }