npm - @open-agent-toolkit/cli - Versions diffs - 0.2.20 → 0.2.22 - Mend

@open-agent-toolkit/cli 0.2.20 → 0.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/assets/skills/explainer-kit/templates/deck-shell.html CHANGED Viewed

@@ -24,6 +24,7 @@
         --sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
         --serif: ui-serif, Georgia, serif;
         --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+        /* AUTHOR EXTENSION REGION: resolved theme tokens */
         {{THEME_CSS}}
       }
       * {
@@ -39,6 +40,9 @@
         color: var(--ink);
         font-family: var(--sans);
       }
+      noscript p {
+        color: var(--muted);
+      }
       .deck {
         display: flex;
         width: 100%;
@@ -197,16 +201,28 @@
       }
     </style>
   </head>
-  <body>
+  <body data-explainer-shell="deck-shell">
     <noscript>
       <p>This deck remains available below as a readable vertical document.</p>
     </noscript>
-    <main class="deck" aria-label="{{TITLE}}">{{SLIDES}}</main>
-    <nav class="deck-controls" aria-label="Slide navigation">
+    <main class="deck" data-shell-anchor="deck" aria-label="{{TITLE}}">
+      <!-- AUTHOR EXTENSION REGION: semantic section.slide frames -->
+      {{SLIDES}}
+      <!-- END AUTHOR EXTENSION REGION -->
+    </main>
+    <nav
+      class="deck-controls"
+      data-shell-anchor="deck-controls"
+      aria-label="Slide navigation"
+    >
       <button type="button" data-direction="-1" aria-label="Previous slide">
         ←
       </button>
-      <span id="deck-counter" aria-live="polite"></span>
+      <span
+        id="deck-counter"
+        data-shell-anchor="deck-counter"
+        aria-live="polite"
+      ></span>
       <button type="button" data-direction="1" aria-label="Next slide">
         →
       </button>
@@ -214,11 +230,15 @@
     <div
       class="deck-progress"
       id="deck-progress"
+      data-shell-anchor="deck-progress"
       role="progressbar"
       aria-label="Slide progress"
       aria-valuemin="1"
     >
-      <span class="deck-progress__bar"></span>
+      <span
+        class="deck-progress__bar"
+        data-shell-anchor="deck-progress-bar"
+      ></span>
     </div>
     <script>
       (() => {

package/assets/skills/explainer-kit/templates/diagram-shell.html CHANGED Viewed

@@ -20,6 +20,7 @@
         --accent: hsl(215 28% 32%);
         --sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
         --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+        /* AUTHOR EXTENSION REGION: resolved theme tokens */
         {{THEME_CSS}}
       }
       * {
@@ -125,35 +126,56 @@
       }
     </style>
   </head>
-  <body>
+  <body data-explainer-shell="diagram-shell">
     <main>
       <header>
-        <h1 id="diagram-title">{{TITLE}}</h1>
-        <p id="diagram-description">{{DESCRIPTION}}</p>
+        <h1 id="diagram-title" data-shell-anchor="diagram-title">{{TITLE}}</h1>
+        <p id="diagram-description" data-shell-anchor="diagram-description">
+          {{DESCRIPTION}}
+        </p>
       </header>
-      <section class="diagram-shell" aria-labelledby="diagram-title">
+      <section
+        class="diagram-shell"
+        data-shell-anchor="diagram-shell"
+        aria-labelledby="diagram-title"
+      >
         <p class="diagram-hint">
           Use the controls or Ctrl/Command + wheel to zoom; drag to pan.
         </p>
-        <div class="zoom-controls" aria-label="Diagram zoom">
+        <div
+          class="zoom-controls"
+          data-shell-anchor="zoom-controls"
+          aria-label="Diagram zoom"
+        >
           <button type="button" data-zoom="in" aria-label="Zoom in">+</button>
           <button type="button" data-zoom="out" aria-label="Zoom out">−</button>
           <button type="button" data-zoom="reset" aria-label="Reset zoom">
             ↺
           </button>
         </div>
-        <div class="diagram-viewport">
+        <div class="diagram-viewport" data-shell-anchor="diagram-viewport">
           <svg
             class="diagram-canvas"
+            data-shell-anchor="diagram-canvas"
             viewBox="0 0 1200 720"
             role="img"
             aria-labelledby="diagram-title diagram-description"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <!-- AUTHOR EXTENSION REGION: accessible inline SVG diagram -->
             {{DIAGRAM}}
+            <!-- END AUTHOR EXTENSION REGION -->
           </svg>
         </div>
-        <div class="legend" aria-label="Diagram legend">{{LEGEND}}</div>
+        <div
+          class="legend"
+          data-shell-anchor="diagram-legend"
+          aria-label="Diagram legend"
+        >
+          <!-- AUTHOR EXTENSION REGION: optional visual legend -->
+          {{LEGEND}}
+          <!-- END AUTHOR EXTENSION REGION -->
+        </div>
       </section>
     </main>
     <script>

package/assets/skills/explainer-kit/templates/engineer-tour.html CHANGED Viewed

@@ -24,6 +24,7 @@
         --sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
         --serif: ui-serif, Georgia, serif;
         --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+        /* AUTHOR EXTENSION REGION: resolved theme tokens */
         {{THEME_CSS}}
       }
       * {
@@ -56,8 +57,7 @@
         padding-block: 2.5rem;
       }
       .toc-brand,
-      .eyebrow,
-      .section-number {
+      .eyebrow {
         color: var(--muted);
         font: 0.7rem/1.4 var(--mono);
         letter-spacing: 0.12em;
@@ -116,12 +116,105 @@
         max-width: 100%;
         margin: 0;
         overflow-x: auto;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
         padding: 1rem;
         font-family: var(--mono);
       }
       .snippet:not(.open) pre {
         display: none;
       }
+      .diagram-scroll {
+        max-width: 100%;
+        overflow-x: auto;
+      }
+      .diagram-scroll > svg {
+        display: block;
+      }
+      /* Narrative renderer block output. The renderer emits these for any
+         markdown artifact, so the shell must style them or the structure
+         renders as unformatted text. */
+      .callout {
+        min-width: 0;
+        border: 1px solid var(--border);
+        border-inline-start: 0.25rem solid var(--accent);
+        border-radius: 0.6rem;
+        background: var(--panel);
+        padding: 1rem;
+        overflow-wrap: anywhere;
+      }
+      .callout--important {
+        border-inline-start-color: var(--success, var(--accent));
+      }
+      .callout--warning {
+        border-inline-start-color: var(--warning);
+      }
+      .callout--caution {
+        border-inline-start-color: var(--danger, var(--warning));
+      }
+      .callout__label {
+        color: var(--muted);
+        font: 0.72rem/1.4 var(--mono);
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .timeline {
+        display: grid;
+        gap: 0.8rem;
+        padding-inline-start: 0;
+        list-style: none;
+      }
+      .timeline li {
+        display: grid;
+        grid-template-columns: minmax(7rem, 0.25fr) 1fr;
+        gap: 1rem;
+        border-inline-start: 0.2rem solid var(--accent);
+        padding-inline-start: 1rem;
+      }
+      .timeline time {
+        color: var(--muted);
+        font-family: var(--mono);
+      }
+      .table-scroll,
+      pre {
+        max-width: 100%;
+        overflow-x: auto;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      th,
+      td {
+        border-block-end: 1px solid var(--border);
+        padding: 0.6rem;
+        text-align: start;
+      }
+      pre {
+        border: 1px solid var(--border);
+        border-radius: 0.6rem;
+        background: var(--panel);
+        padding: 1rem;
+        font-family: var(--mono);
+      }
+      code {
+        font-family: var(--mono);
+      }
+      blockquote {
+        margin-inline: 0;
+        border-inline-start: 0.2rem solid var(--border);
+        color: var(--muted);
+        padding-inline-start: 1rem;
+      }
+      figure {
+        margin-inline: 0;
+      }
+      figcaption {
+        color: var(--muted);
+        font: 0.8rem/1.5 var(--mono);
+      }
       .diagram-rail {
         position: sticky;
         top: 0;
@@ -140,6 +233,19 @@
         width: 100%;
         height: auto;
       }
+      .diagram-card .node rect {
+        fill: var(--panel-muted);
+        stroke: var(--accent);
+        stroke-width: 1.5;
+      }
+      .diagram-card .edge {
+        fill: none;
+        stroke: var(--muted);
+      }
+      .diagram-card text {
+        fill: var(--ink);
+        font: 0.85rem var(--sans);
+      }
       .diagram-card .node,
       .diagram-card .edge {
         transition: opacity 180ms ease, stroke 180ms ease, fill 180ms ease;
@@ -199,25 +305,43 @@
       }
     </style>
   </head>
-  <body>
-    <div class="layout">
-      <nav class="toc" aria-label="Tour sections">
+  <body data-explainer-shell="engineer-tour">
+    <div class="layout" data-shell-anchor="tour-layout">
+      <nav
+        class="toc"
+        data-shell-anchor="tour-navigation"
+        aria-label="Tour sections"
+      >
         <div class="toc-brand">{{EYEBROW}}</div>
+        <!-- AUTHOR EXTENSION REGION: section navigation -->
         {{NAVIGATION}}
+        <!-- END AUTHOR EXTENSION REGION -->
       </nav>
-      <main class="tour-body">
+      <main class="tour-body" data-shell-anchor="tour-body">
         <header>
           <div class="eyebrow">{{EYEBROW}}</div>
           <h1>{{TITLE}}</h1>
           <p>{{DESCRIPTION}}</p>
         </header>
+        <!-- AUTHOR EXTENSION REGION: narrative tour sections -->
         {{CONTENT}}
-        <footer>{{FOOTER}}</footer>
+        <!-- END AUTHOR EXTENSION REGION -->
+        <footer>
+          <!-- AUTHOR EXTENSION REGION: supporting references and next steps -->
+          {{FOOTER}}
+          <!-- END AUTHOR EXTENSION REGION -->
+        </footer>
       </main>
-      <aside class="diagram-rail" aria-label="System diagram">
-        <div class="diagram-card">
+      <aside
+        class="diagram-rail"
+        data-shell-anchor="diagram-rail"
+        aria-label="System diagram"
+      >
+        <div class="diagram-card" data-shell-anchor="diagram-card">
           <svg viewBox="0 0 360 540" role="img" aria-label="{{TITLE}}">
+            <!-- AUTHOR EXTENSION REGION: synchronized system diagram -->
             {{DIAGRAM}}
+            <!-- END AUTHOR EXTENSION REGION -->
           </svg>
         </div>
       </aside>

package/assets/skills/explainer-kit/templates/house-style.html CHANGED Viewed

@@ -118,11 +118,76 @@
       .callout {
         border-inline-start: 0.25rem solid var(--accent);
       }
+      .callout--tip,
+      .callout--note {
+        border-inline-start-color: var(--accent);
+      }
+      .callout--important {
+        border-inline-start-color: var(--success);
+      }
+      .callout--warning {
+        border-inline-start-color: var(--warning);
+      }
+      .callout--caution {
+        border-inline-start-color: var(--danger);
+      }
+      .callout__label {
+        color: var(--muted);
+        font: 0.72rem/1.4 var(--mono);
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      blockquote {
+        margin-inline: 0;
+        border-inline-start: 0.2rem solid var(--border);
+        padding-inline-start: 1rem;
+        color: var(--muted);
+      }
+      .task-list {
+        padding-inline-start: 0;
+        list-style: none;
+      }
+      .task-list li {
+        display: flex;
+        align-items: baseline;
+        gap: 0.5rem;
+      }
+      .task-list li > p {
+        margin-block: 0.2rem;
+      }
+      .timeline {
+        display: grid;
+        gap: 0.8rem;
+        padding-inline-start: 0;
+        list-style: none;
+      }
+      .timeline li {
+        display: grid;
+        grid-template-columns: minmax(7rem, 0.25fr) 1fr;
+        gap: 1rem;
+        border-inline-start: 0.2rem solid var(--accent);
+        padding-inline-start: 1rem;
+      }
+      .timeline time {
+        color: var(--muted);
+        font-family: var(--mono);
+      }
       .table-scroll,
+      .diagram-scroll,
       pre {
         max-width: 100%;
         overflow-x: auto;
       }
+      .diagram-scroll > svg {
+        display: block;
+      }
+      pre {
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--panel-muted);
+        padding: 1rem;
+      }
       table {
         width: 100%;
         border-collapse: collapse;
@@ -137,6 +202,23 @@
       pre {
         font-family: var(--mono);
       }
+      :not(pre) > code {
+        border-radius: calc(var(--radius) / 2);
+        background: var(--panel-muted);
+        padding: 0.1em 0.3em;
+      }
+      figure {
+        margin-inline: 0;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--panel);
+        padding: 1rem;
+      }
+      figcaption {
+        margin-block-start: 0.5rem;
+        color: var(--muted);
+        font-size: 0.9rem;
+      }
       footer {
         border-block-start: 1px solid var(--border);
         color: var(--muted);

package/assets/skills/oat-brainstorm/SKILL.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 name: oat-brainstorm
-version: 1.1.1
+version: 1.1.2
 description: Use when the user explicitly invokes the `brainstorm` verb, including `/oat-brainstorm`, "let's brainstorm", "brainstorm this", "can we brainstorm X", or "help me brainstorm X". For ambiguous exploratory phrasing ("I've been thinking", "what if", "help me think through"), do NOT auto-enter; respond conversationally and offer mode only after ≥2 sustained exploratory turns. Do NOT use for review, debug, PR, status, implementation, or active-workflow questions.
 disable-model-invocation: false
 user-invocable: true

package/assets/skills/oat-brainstorm/scripts/helper.js CHANGED Viewed

@@ -1,5 +1,5 @@
-(function() {
-  const WS_URL = 'ws://' + window.location.host;
+(function () {
+  const WS_URL = `ws://${window.location.host}`;
   let ws = null;
   let eventQueue = [];
@@ -7,7 +7,7 @@
     ws = new WebSocket(WS_URL);
     ws.onopen = () => {
-      eventQueue.forEach(e => ws.send(JSON.stringify(e)));
+      eventQueue.forEach((e) => ws.send(JSON.stringify(e)));
       eventQueue = [];
     };
@@ -41,7 +41,7 @@
       type: 'click',
       text: target.textContent.trim(),
       choice: target.dataset.choice,
-      id: target.id || null
+      id: target.id || null,
     });
     // Update indicator bar (defer so toggleSelect runs first)
@@ -51,12 +51,16 @@
       const container = target.closest('.options') || target.closest('.cards');
       const selected = container ? container.querySelectorAll('.selected') : [];
       if (selected.length === 0) {
-        indicator.textContent = 'Click an option above, then return to the terminal';
+        indicator.textContent =
+          'Click an option above, then return to the terminal';
       } else if (selected.length === 1) {
-        const label = selected[0].querySelector('h3, .content h3, .card-body h3')?.textContent?.trim() || selected[0].dataset.choice;
-        indicator.innerHTML = '<span class="selected-text">' + label + ' selected</span> — return to terminal to continue';
+        const label =
+          selected[0]
+            .querySelector('h3, .content h3, .card-body h3')
+            ?.textContent?.trim() || selected[0].dataset.choice;
+        indicator.innerHTML = `<span class="selected-text">${label} selected</span> — return to terminal to continue`;
       } else {
-        indicator.innerHTML = '<span class="selected-text">' + selected.length + ' selected</span> — return to terminal to continue';
+        indicator.innerHTML = `<span class="selected-text">${selected.length} selected</span> — return to terminal to continue`;
       }
     }, 0);
   });
@@ -64,11 +68,13 @@
   // Frame UI: selection tracking
   window.selectedChoice = null;
-  window.toggleSelect = function(el) {
+  window.toggleSelect = function (el) {
     const container = el.closest('.options') || el.closest('.cards');
     const multi = container && container.dataset.multiselect !== undefined;
     if (container && !multi) {
-      container.querySelectorAll('.option, .card').forEach(o => o.classList.remove('selected'));
+      container
+        .querySelectorAll('.option, .card')
+        .forEach((o) => o.classList.remove('selected'));
     }
     if (multi) {
       el.classList.toggle('selected');
@@ -81,7 +87,8 @@
   // Expose API for explicit use
   window.brainstorm = {
     send: sendEvent,
-    choice: (value, metadata = {}) => sendEvent({ type: 'choice', value, ...metadata })
+    choice: (value, metadata = {}) =>
+      sendEvent({ type: 'choice', value, ...metadata }),
   };
   connect();