@oddessentials/agent-guild 0.3.0 → 0.5.0

package/web/art/art.css

@@ -155,6 +155,26 @@
   .badge { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; }
   .model-pill:hover { border-color: var(--gold-dim); }
 
+  .news-latest {
+    border-radius: 6px; border-color: #4a3d25; background: var(--card-bg);
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+  .news-row + .news-row, .news-bar, .news-filters, .news-item, .news-status { border-color: #2a2418; }
+  .news-link { color: #f3ead8; }
+  a.news-link:visited { color: var(--muted); }
+  .news-panel {
+    background: #12141a; border-left-color: #4a3d25;
+    box-shadow: inset 1px 0 0 rgba(232, 196, 124, 0.08), -24px 0 60px rgba(0, 0, 0, 0.6);
+  }
+  .news-panel::backdrop { background: rgba(5, 6, 9, 0.72); }
+  .news-bar { padding: 16px 18px 12px; }
+  .news-filters, .news-status { padding-left: 18px; padding-right: 18px; }
+  .news-body { padding: 0 18px 14px; }
+  .news-day { background: #12141a; color: #c9ab72; }
+  .news-filter { border-color: #4a3d25; background: rgba(0, 0, 0, 0.35); }
+  .news-filter:hover { border-color: var(--gold-dim); }
+  .news-filter[aria-pressed="true"] { border-color: #b8955a; color: #fff; background: linear-gradient(#8e8ef6, #6262d6); }
+
   .session-card { padding-left: 152px; min-height: 196px; }
   .session-card::before {
     inset: 0 auto 0 0; width: 168px; background-size: 168px auto;

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>
@@ -47,6 +49,15 @@
       <div id="sessions" class="session-grid" role="list"></div>
       <p id="empty" class="empty">No sessions yet. Pick a provider above to start one. Sessions keep running when you close this page.</p>
     </section>
+
+    <section class="news" aria-labelledby="news-heading">
+      <div class="section-head">
+        <h2 id="news-heading">Latest news <span id="news-count" class="count"></span></h2>
+        <button id="news-all" class="btn" type="button" aria-haspopup="dialog">All news</button>
+      </div>
+      <ol id="news-latest" class="news-latest" hidden></ol>
+      <p id="news-note" class="empty">Loading news…</p>
+    </section>
   </main>
 
   <section id="auth" class="auth" hidden>
@@ -64,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">
@@ -105,6 +122,47 @@
     <p id="models-source" class="models-source"></p>
   </dialog>
 
+  <dialog id="news" class="news-panel" aria-labelledby="news-title">
+    <div class="news-bar">
+      <div class="news-heading">
+        <h2 id="news-title">News</h2>
+        <p id="news-sub" class="sub"></p>
+      </div>
+      <button id="news-close" class="btn" type="button">Close</button>
+    </div>
+    <div id="news-filters" class="news-filters" role="group" aria-label="Show"></div>
+    <div class="news-body">
+      <button id="news-fresh" class="btn news-fresh" type="button" hidden></button>
+      <div id="news-list"></div>
+      <p id="news-empty" class="news-empty" hidden></p>
+    </div>
+    <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>
@@ -168,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>
@@ -175,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>
@@ -187,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 {
@@ -341,6 +349,91 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .models-note { margin: 14px 0 0; color: var(--muted); }
 .models-source { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
 
+.news-latest {
+  list-style: none; margin: 0; padding: 0;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
+}
+.news-row { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; padding: 9px 14px; }
+.news-row + .news-row { border-top: 1px solid var(--border); }
+.news-row .news-link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.news-row .badge, .news-row .news-meta { flex: none; }
+.news-link { color: var(--text); font-weight: 600; text-decoration: none; }
+a.news-link:hover, .news-discussion:hover { text-decoration: underline; }
+a.news-link:visited { color: var(--muted); }
+.news-link:focus-visible, .news-discussion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+.news-meta { color: var(--muted); font-size: 0.78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+.news-panel {
+  width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0;
+  border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text);
+  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.25);
+}
+.news-panel[open] { display: flex; flex-direction: column; animation: news-in 0.18s ease-out; }
+.news-panel::backdrop { background: rgba(15, 17, 21, 0.4); }
+.news-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.news-heading { flex: 1; min-width: 0; }
+.news-heading .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }
+.news-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+.news-filter {
+  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
+}
+.news-filter:hover { border-color: var(--muted); }
+.news-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.news-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.news-body { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; }
+.news-fresh { width: 100%; margin-top: 12px; }
+.news-day {
+  position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 6px; background: var(--surface);
+  color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
+}
+.news-items { list-style: none; margin: 0; padding: 0; }
+.news-item { padding: 10px 0; border-top: 1px solid var(--border); }
+.news-head { display: flex; align-items: baseline; gap: 6px; }
+.news-head .news-link { overflow-wrap: anywhere; }
+.news-head .badge { flex: none; margin-left: auto; }
+.news-item .news-meta { display: block; margin-top: 3px; }
+.news-summary {
+  margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+.news-discussion { color: inherit; text-decoration: none; }
+.news-empty { margin: 14px 0 0; 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;
@@ -350,9 +443,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 @keyframes pulse { 50% { opacity: 0.35; } }
 @keyframes ring { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
 @keyframes stat-fill { from { transform: scaleX(0); } }
+@keyframes news-in { from { transform: translateX(24px); opacity: 0; } }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill { animation: none; }
+  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .news-panel[open] { animation: none; }
   .model-name::before { transition: none; }
 }
 
@@ -370,4 +464,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   .model-detail .stat { padding-bottom: 6px; }
   .model-detail .stat-reading { row-gap: 1px; }
   .model-detail .stat-note { grid-column: 1 / -1; }
+  .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; }
 }