@oddessentials/agent-guild 0.6.0 → 0.7.0

package/web/art/art.css

@@ -191,6 +191,7 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 .models-source { padding: 10px 36px 30px; }
 .history-tools { padding: 10px 36px 0; }
 .history-form { padding: 10px 36px 30px; }
+.github-accounts { padding: 10px 36px; }
 .model-group h4, .news-day, .changelog-type { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--gold-ink); }
 .news-bar { padding: 16px 18px 12px; }
 .news-filters, .news-status { padding-left: 18px; padding-right: 18px; }
@@ -444,6 +445,7 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
   .models-source { padding: 10px 26px 24px; }
   .history-tools { padding: 10px 26px 0; }
   .history-form { padding: 10px 26px 24px; }
+  .github-accounts { padding: 10px 26px; }
   .auth { padding: 32px 30px; }
 }
 

package/web/index.html

@@ -34,10 +34,13 @@
     <section class="launcher" aria-labelledby="launch-heading">
       <div class="section-head">
         <h2 id="launch-heading">Start a session</h2>
-        <label class="cwd">
-          <span>Working folder</span>
-          <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
-        </label>
+        <div class="launch-tools">
+          <label class="cwd">
+            <span>Working folder</span>
+            <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
+          </label>
+          <button id="github-open" class="btn github-open" type="button" aria-haspopup="dialog">Clone from GitHub…</button>
+        </div>
       </div>
       <div id="providers" class="providers" role="list"></div>
     </section>
@@ -182,6 +185,54 @@
     </form>
   </dialog>
 
+  <dialog id="github" class="models history github" aria-labelledby="github-title">
+    <div class="models-bar">
+      <span class="github-mark" aria-hidden="true"></span>
+      <div class="models-heading">
+        <h2 id="github-title">GitHub</h2>
+        <p id="github-sub" class="sub"></p>
+      </div>
+      <button id="github-close" class="btn" type="button">Close</button>
+    </div>
+    <div id="github-accounts" class="github-accounts" hidden>
+      <div id="github-chips" class="github-chips" role="tablist" aria-label="GitHub accounts"></div>
+      <button id="github-add" class="btn github-add" type="button">Add account</button>
+    </div>
+    <div class="models-body">
+      <section id="github-card" class="github-card" aria-live="polite" hidden></section>
+      <div id="github-status" class="github-status" hidden></div>
+      <div id="github-tools" class="history-tools github-tools" hidden>
+        <input id="github-filter" type="search" placeholder="Filter repositories" aria-label="Filter repositories" spellcheck="false" autocomplete="off">
+        <button id="github-refresh" class="btn" type="button">Refresh</button>
+        <button id="github-new" class="btn" type="button" aria-expanded="false" aria-controls="github-create">New repository</button>
+      </div>
+      <form id="github-create" class="github-card github-create" hidden>
+        <h3>New repository</h3>
+        <div class="github-fields">
+          <label><span>Owner</span><select id="github-create-owner"></select></label>
+          <label><span>Name</span><input id="github-create-name" type="text" required maxlength="100" pattern="[A-Za-z0-9._\-]+" spellcheck="false" autocomplete="off" placeholder="my-project"></label>
+          <label class="wide"><span>Description</span><input id="github-create-description" type="text" maxlength="350" autocomplete="off" placeholder="Optional"></label>
+        </div>
+        <div class="github-options">
+          <label><input id="github-create-private" type="checkbox" checked> Private</label>
+          <label><input id="github-create-readme" type="checkbox" checked> Start with a README</label>
+          <label><input id="github-create-clone" type="checkbox" checked> <span id="github-create-clone-label">Clone it</span></label>
+        </div>
+        <p id="github-create-error" class="github-error" role="alert" hidden></p>
+        <div class="github-actions">
+          <button id="github-create-submit" class="btn primary" type="submit">Create repository</button>
+          <button id="github-create-cancel" class="btn" type="button">Cancel</button>
+        </div>
+      </form>
+      <div id="github-list" class="history-list" role="list"></div>
+      <p id="github-note" class="models-note" hidden></p>
+    </div>
+    <div class="history-form github-form">
+      <label for="github-parent">Clone into</label>
+      <input id="github-parent" type="text" placeholder="Folder that holds your clones" spellcheck="false" autocomplete="off">
+    </div>
+  </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>
@@ -259,6 +310,16 @@
     </article>
   </template>
 
+  <template id="github-repo-template">
+    <article class="history-row github-repo" role="listitem">
+      <div class="history-main">
+        <div class="history-title"><span class="repo-name"></span></div>
+        <div class="history-meta"></div>
+      </div>
+      <button class="btn github-action" type="button"></button>
+    </article>
+  </template>
+
   <template id="session-template">
     <article class="session-card" role="listitem" tabindex="0">
       <span class="card-art" aria-hidden="true"></span>
@@ -281,6 +342,7 @@
       <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 primary use-folder" type="button" hidden>Use folder</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

@@ -40,6 +40,7 @@
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
   --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
+  --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
   --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 10.8v6.2' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='7.3' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 15px;
@@ -519,6 +520,73 @@ a.news-link:visited { color: var(--muted); }
   background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem;
 }
 
+.launch-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 360px; flex-wrap: wrap; max-width: 680px; }
+.launch-tools .cwd { max-width: none; }
+.github-open { white-space: nowrap; }
+.github-open::before, .github-mark {
+  content: ""; display: inline-block; flex: none; background-color: currentColor; mask: var(--icon-github) center / contain no-repeat;
+}
+.github-open::before { width: 1em; height: 1em; margin: 0 0.45em 0 0; vertical-align: -0.15em; }
+.github-mark { width: 26px; height: 26px; color: var(--heading); }
+.github-accounts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+.github-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.github-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; font-size: 0.8rem; }
+.github-avatar {
+  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; object-fit: cover;
+  background: var(--c, var(--muted)); color: #fff; font-size: 0.68rem; font-weight: 700;
+}
+.github-add { padding: 3px 10px; font-size: 0.8rem; }
+.github .models-body { padding-top: 10px; }
+.github-card {
+  display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface-2); font-size: 0.9rem; line-height: 1.45;
+}
+.github-card h3 { margin: 0; font-size: 1rem; }
+.github-card p { margin: 0; }
+.github-small { color: var(--muted); font-size: 0.8rem; }
+.github-error { color: var(--danger); }
+.github-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.github-actions a.btn { text-decoration: none; }
+.github-scopes { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 0.85rem; }
+.github-scopes code, .github-card code { font-size: 0.8rem; padding: 0 4px; border-radius: 4px; background: var(--surface); }
+.github-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
+.github-steps li.done { color: var(--ok); }
+.github-steps li.done::after { content: " ✓"; }
+.github-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.github-code-text {
+  font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.12em; padding: 6px 14px;
+  border-radius: var(--radius); border: 1px dashed var(--muted); background: var(--surface); color: var(--heading); user-select: all;
+}
+.github-waiting::before {
+  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warn);
+  animation: pulse 1.4s ease-in-out infinite;
+}
+.github-status { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 2px 0 8px; font-size: 0.85rem; }
+.github-ready { color: var(--ok); font-weight: 600; }
+.github-ready::before { content: "✓ "; }
+.github-status-actions { display: flex; gap: 8px; }
+.history-tools.github-tools { padding: 0 0 4px; }
+.github-repo { grid-template-columns: minmax(0, 1fr) auto; }
+.github-repo .history-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.github-repo .repo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.github-repo .repo-owner { color: var(--muted); font-weight: 500; }
+.github-repo .badge { flex: none; }
+.github-repo.conflict .history-meta { color: var(--warn); }
+.github-create { margin-top: 10px; }
+.github-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
+.github-fields label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--muted); }
+.github-fields label.wide { grid-column: 1 / -1; }
+.github-fields input, .github-fields select {
+  min-width: 0; padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem;
+}
+.github-fields input:focus-visible, .github-fields select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.github-options { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; }
+.github-options label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+.github-options label:has(input:disabled) { opacity: 0.6; cursor: default; }
+.github .models-note { display: grid; gap: 4px; font-size: 0.85rem; }
+.toast .toast-action { margin-left: 12px; padding: 2px 10px; background: transparent; box-shadow: none; color: inherit; border-color: currentColor; }
+
 .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: var(--radius);
@@ -544,6 +612,7 @@ a.news-link:visited { color: var(--muted); }
 @media (prefers-reduced-motion: reduce) {
   .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .toast:not([hidden]), .tip:not([hidden]) { animation: none; }
   .model-name::before, .provider .copies summary::before, .btn, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
+  .github-waiting::before { animation: none; }
   .btn:active:not(:disabled) { transform: none; }
 }
 
@@ -554,6 +623,9 @@ a.news-link:visited { color: var(--muted); }
   .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
   .session-grid { grid-template-columns: 1fr; }
   .cwd { flex-basis: 100%; }
+  .launch-tools { flex-basis: 100%; justify-content: stretch; }
+  .launch-tools .github-open { flex: 1 1 auto; }
+  .github-fields { grid-template-columns: minmax(0, 1fr); }
   .models { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
   .model-columns, .model-toggle { grid-template-columns: minmax(0, 1fr) repeat(3, 4.6rem); }
   .model-columns span:last-child, .model-context { display: none; }