@oddessentials/agent-guild 0.34.0 → 0.36.0

package/web/environment.js

@@ -1,4 +1,6 @@
 const STATES = { pending: 'Not checked', not_found: 'Not found', unavailable: 'Runtime unavailable', failed: 'Probe failed' };
+const DESIGN_STATES = { pending: 'Not checked', not_found: 'Not found', on_path: 'On PATH', not_on_path: 'Not on PATH', failed: 'Probe failed' };
+const DOCKER_STATES = { pending: 'Not checked', running: 'Running', stopped: 'Not running', denied: 'No access', remote: 'Not checked', not_found: 'Not found', failed: 'Probe failed' };
 const PIN_STATES = { configured: 'Configured', unreadable: 'Unreadable', invalid: 'Invalid' };
 const SCOPES = [
   ['manager', 'Manager', 'Manager environment'],
@@ -9,6 +11,37 @@ const SCOPES = [
 
 export function runtimeValue(row) { return row.status === 'ok' ? row.version : STATES[row.status] || 'Probe failed'; }
 
+export function designValue(row) {
+  const state = DESIGN_STATES[row.status] || DESIGN_STATES.failed;
+  if (!row.version) return state;
+  return row.status === 'not_on_path' ? `${row.version} · Not on PATH` : row.version;
+}
+
+export function formatMemory(bytes) { return `${(bytes / 1024 ** 3).toFixed(1)} GB`; }
+
+// Label, value and detail lines for each System row.
+export function systemRows(system) {
+  const rows = [];
+  const wsl = system.wsl;
+  rows.push({ label: 'OS', value: system.os, details: [wsl && `WSL ${wsl.version}${wsl.distro ? ` · ${wsl.distro}` : ''}`, system.osDetail] });
+  rows.push({ label: 'Architecture', value: system.hostArch ? `${system.arch} · emulated on ${system.hostArch}` : system.arch, details: [] });
+  rows.push({ label: 'CPU', value: `${system.cpu.threads} threads`, details: [system.cpu.model] });
+  rows.push({ label: 'Memory', value: formatMemory(system.memory), details: [wsl && 'Memory of the WSL virtual machine, set in .wslconfig. Windows can have more.'] });
+  if (wsl) rows.push({ label: 'Windows interop', value: wsl.interop ? 'On' : 'Off', details: [!wsl.interop && 'Agents cannot run Windows programs from this distribution.'] });
+  if (Array.isArray(system.wslDistributions)) {
+    const list = system.wslDistributions;
+    rows.push({
+      label: 'WSL', value: !list.length ? 'None installed' : list.length === 1 ? '1 distribution' : `${list.length} distributions`,
+      details: list.map((item) => `${item.name}${item.version ? ` · WSL ${item.version}` : ''}${item.default ? ' · default' : ''}`),
+    });
+  }
+  return rows.map((row) => ({ ...row, details: row.details.filter(Boolean) }));
+}
+
+export function dockerValue(docker) {
+  return docker.status === 'running' && docker.version ? docker.version : DOCKER_STATES[docker.status] || DOCKER_STATES.failed;
+}
+
 export function createEnvironmentUI({
   api, onAuthError, isAuthError = () => false, document = globalThis.document,
   workingFolder = () => '', sessions = () => [],
@@ -36,11 +69,16 @@ export function createEnvironmentUI({
           : !manager ? 'Not checked' : !found.length ? 'No runtime versions verified' : 'Manager environment';
   }
 
-  function rowElement(row) {
+  function rowHead(label, value) {
     const node = element('section', undefined, 'environment-row');
     const head = element('div', undefined, 'environment-row-head');
-    head.append(element('strong', row.label), element('span', runtimeValue(row)));
+    head.append(element('strong', label), element('span', value));
     node.append(head);
+    return node;
+  }
+
+  function rowElement(row) {
+    const node = rowHead(row.label, runtimeValue(row));
     if (row.command) node.append(element('p', `Command: ${row.command}`, 'environment-detail'));
     if (row.path) node.append(element('code', row.path, 'environment-path'));
     const detail = row.detail || (row.status === 'not_found' ? 'No executable was found on the manager’s PATH.' : '');
@@ -54,11 +92,37 @@ export function createEnvironmentUI({
     return node;
   }
 
+  function designElement(row) {
+    const node = rowHead(row.label, designValue(row));
+    if (row.command) node.append(element('p', `Command: ${row.command}`, 'environment-detail'));
+    if (row.path) node.append(element('code', row.path, 'environment-path'));
+    if (row.status === 'not_on_path') node.append(element('p', 'Installed outside PATH. Agents can run it once its folder is on PATH.', 'environment-detail'));
+    if (row.detail) node.append(element('p', row.detail, 'environment-detail'));
+    return node;
+  }
+
+  function systemElement(row) {
+    const node = rowHead(row.label, row.value);
+    for (const detail of row.details) node.append(element('p', detail, 'environment-detail'));
+    return node;
+  }
+
+  function dockerElement(docker) {
+    const node = rowHead('Docker Engine', dockerValue(docker));
+    if (docker.platform) node.append(element('p', docker.platform, 'environment-detail'));
+    if (docker.os) node.append(element('p', `${docker.os}${docker.arch ? `/${docker.arch}` : ''}${docker.wsl2 ? ' · runs in WSL 2' : ''}`, 'environment-detail'));
+    if (docker.context) node.append(element('p', `Context: ${docker.context}`, 'environment-detail'));
+    if (docker.endpoint) node.append(element('code', docker.endpoint, 'environment-path'));
+    if (docker.detail) node.append(element('p', docker.detail, 'environment-detail'));
+    if (docker.status !== 'pending') {
+      node.append(element('p', docker.cli ? 'Command: docker' : 'The docker command is not on PATH.', 'environment-detail'));
+      if (docker.cli) node.append(element('code', docker.cli, 'environment-path'));
+    }
+    return node;
+  }
+
   function pinElement(row) {
-    const node = element('section', undefined, 'environment-row');
-    const head = element('div', undefined, 'environment-row-head');
-    head.append(element('strong', row.label), element('span', PIN_STATES[row.status] || 'Invalid'));
-    node.append(head);
+    const node = rowHead(row.label, PIN_STATES[row.status] || 'Invalid');
     node.append(element('p', row.source, 'environment-detail'));
     if (row.version) node.append(element('code', row.version, 'environment-path'));
     if (row.detail) node.append(element('p', row.detail, 'environment-detail'));
@@ -143,6 +207,18 @@ export function createEnvironmentUI({
     $('environment-tools-note').hidden = !showTools;
     $('environment-tools').hidden = !showTools;
     $('environment-tools-empty').hidden = !showTools;
+    $('environment-runtimes-heading').textContent = scope === 'project' ? 'Version pins' : 'Runtimes';
+    $('environment-runtimes-heading').hidden = scope === 'session' && data?.availability === 'unavailable';
+    for (const id of ['environment-design-heading', 'environment-design-note', 'environment-design']) $(id).hidden = !showTools;
+    $('environment-design').replaceChildren(...(showTools ? data?.designTools || [] : []).map(designElement));
+    const docker = showTools && data?.docker ? data.docker : null;
+    $('environment-docker-heading').hidden = !docker;
+    $('environment-docker').hidden = !docker;
+    $('environment-docker').replaceChildren(...(docker ? [dockerElement(docker)] : []));
+    const system = scope === 'manager' && data?.system ? data.system : null;
+    $('environment-system-heading').hidden = !system;
+    $('environment-system').hidden = !system;
+    $('environment-system').replaceChildren(...(system ? systemRows(system).map(systemElement) : []));
     if (scope === 'project' && data && folder === projectFolder) {
       $('environment-runtimes').hidden = true;
       $('environment-runtimes').replaceChildren();
@@ -157,8 +233,8 @@ export function createEnvironmentUI({
     }
     if (showTools) {
       $('environment-tools').replaceChildren(...tools.map((tool) => {
-        const node = element('section', undefined, 'environment-row');
-        node.append(element('strong', `${tool.label} · Detected`), element('code', tool.path, 'environment-path'));
+        const node = rowHead(tool.label, 'Detected');
+        node.append(element('code', tool.path, 'environment-path'));
         return node;
       }));
       $('environment-tools-empty').hidden = Boolean(tools.length);

package/web/index.html

@@ -400,12 +400,20 @@
       <select id="environment-session" hidden></select>
       <p id="environment-status" class="environment-detail" role="status"></p>
       <button id="environment-refresh" class="btn" type="button">Refresh</button>
+      <h3 id="environment-system-heading" hidden>System</h3>
+      <div id="environment-system" hidden></div>
+      <h3 id="environment-runtimes-heading">Runtimes</h3>
       <div id="environment-runtimes"></div>
       <div id="environment-pins" hidden></div>
       <h3 id="environment-tools-heading">Detected tools</h3>
       <p id="environment-tools-note" class="environment-detail">Presence only. Activation and the runtimes these tools manage are not checked.</p>
       <div id="environment-tools"></div>
       <p id="environment-tools-empty" class="environment-detail"></p>
+      <h3 id="environment-design-heading">Design tools</h3>
+      <p id="environment-design-note" class="environment-detail">Agents can run a tool only when it is on PATH. A version is read only from the tool's own program.</p>
+      <div id="environment-design"></div>
+      <h3 id="environment-docker-heading">Docker</h3>
+      <div id="environment-docker"></div>
       <p id="environment-manager-node" class="environment-detail"></p>
     </div>
   </dialog>
@@ -529,7 +537,7 @@
 
   <template id="provider-template">
     <article class="provider" role="listitem">
-      <span class="card-art" aria-hidden="true"></span>
+      <span class="card-art" aria-hidden="true"><span class="spent-veil"></span></span>
       <div class="provider-head">
         <span class="provider-icon"></span>
         <span class="provider-text">

package/web/styles.css

@@ -153,6 +153,16 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
 .account-chip.unsigned { border-style: dashed; }
 .provider .usage { display: grid; gap: 4px; }
 .provider .usage:empty { display: none; }
+/* Spent portrait: the art stills and a danger wash sits inside the frame. The card stays usable. */
+.provider .spent-veil {
+  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
+  background:
+    radial-gradient(ellipse at 50% 42%, transparent 28%, color-mix(in srgb, var(--danger) 46%, transparent) 100%),
+    linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 52%);
+  transition: opacity 0.4s var(--ease);
+}
+.provider.spent .card-art::before { filter: grayscale(1) brightness(0.82); }
+.provider.spent .spent-veil { opacity: 1; }
 .environment-summary { min-width: 0; font-size: .78rem; }
 .environment-open { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-align: left; }
 .environment-open:hover { text-decoration: underline; }
@@ -1054,6 +1064,7 @@ a.btn.github-out::after {
   .btn.voice[aria-pressed="true"]::before { animation: none; }
   .drag-handle, .session-grid::before, .session-grid.reordering::before,
   .session-grid > .session-card.dragging, .session-grid > .session-card.settling { transition: none; }
+  .provider .spent-veil { transition: none; }
 }
 
 @media (max-width: 640px) {