npm - octocode-cli - Versions diffs - 1.3.1 → 1.5.0 - Mend

octocode-cli 1.3.1 → 1.5.0

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 (101) hide show

package/skills/octocode-slides/scripts/slide.html ADDED Viewed

@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<!--
+  ╔══════════════════════════════════════════════════════════════════════════╗
+  ║  OCTOCODE SLIDES — INDIVIDUAL SLIDE PAGE                                 ║
+  ║  Generated from: skills/octocode-slides/scripts/slide.html               ║
+  ║                                                                          ║
+  ║  CANONICAL SLIDE SKELETON — a slide uses up to four regions:             ║
+  ║                                                                          ║
+  ║    .slide-logo     optional · brand mark, anchored top-right             ║
+  ║    .slide-header   optional · .title + .description                      ║
+  ║    .slide-content  REQUIRED · smart flex body                            ║
+  ║    .slide-footer   optional · source / page / link                       ║
+  ║                                                                          ║
+  ║  Only .slide-content is required. The skeleton is a contract for         ║
+  ║  WHERE things go when present, not a recipe for what every slide must    ║
+  ║  contain. Use only the regions that serve this slide; omit the rest.     ║
+  ║                                                                          ║
+  ║  LLM INSTRUCTIONS:                                                       ║
+  ║  1. Replace every <!-- LLM: ... --> comment with actual content          ║
+  ║  2. Change slide--TYPE on the root .slide div (see types below)          ║
+  ║  3. Keep regions this slide needs; delete the rest. Variety is good.     ║
+  ║  4. Logo / footer rhythm is usually deck-wide (always-on, always-off,    ║
+  ║     or always-except-hero). Pick one posture in Phase 4 and stick to it. ║
+  ║  5. Add CDN <script>/<link> tags in <head> only when needed              ║
+  ║  6. Remove this comment block before saving the final slide              ║
+  ║                                                                          ║
+  ║  SLIDE TYPES:                                                            ║
+  ║    slide--title        slide--agenda        slide--section               ║
+  ║    slide--content      slide--two-col       slide--quote                 ║
+  ║    slide--code         slide--chart         slide--timeline              ║
+  ║    slide--comparison   slide--closing       slide--markdown-content      ║
+  ║    slide--stats        slide--image                                      ║
+  ║                                                                          ║
+  ║  See references/html-templates.md for the full markup for each type.    ║
+  ║  See references/wireframes.md to pick a layout from content.            ║
+  ╚══════════════════════════════════════════════════════════════════════════╝
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- LLM: Set this to the slide heading. Used as tab title in standalone mode. -->
+  <title><!-- LLM: Slide title (e.g., "The Problem") --></title>
+  <!-- Always include both CSS files. Paths are relative to slides/ subfolder. -->
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/theme.css">
+  <!--
+    ═══════════════════════════════════════════════════════════════════
+    LLM: ADD CDN LIBRARIES HERE — only if this specific slide needs them.
+    highlight.js (code syntax coloring):
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css">
+      <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
+      Then add at bottom of body: <script>hljs.highlightAll();</script>
+    marked.js (render Markdown content):
+      <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
+    Chart.js (bar, line, donut, scatter, radar):
+      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    ECharts / uPlot / ApexCharts / D3 / Mermaid / Motion:
+      See references/html-templates.md and references/resources.md.
+    ═══════════════════════════════════════════════════════════════════
+  -->
+</head>
+<body>
+<!--
+  ═══════════════════════════════════════════════════════════════════════════
+  SLIDE CONTAINER — change slide--TYPE to the correct type for this slide.
+  Each type sets centering, padding, and color treatment via base.css.
+  ═══════════════════════════════════════════════════════════════════════════
+-->
+<div class="slide slide--<!-- LLM: TYPE (e.g., content) -->">
+  <!--
+    ─── REGION 1 · LOGO (optional) ───
+    Brand mark anchored top-right. Decide once for the whole deck whether to
+    show a logo on every slide. Mixing some-with, some-without breaks rhythm.
+    Delete this header if the deck has no logo.
+  -->
+  <!--
+  <header class="slide-logo">
+    <img src="../assets/logo.svg" alt="LLM: Brand name">
+  </header>
+  -->
+  <!--
+    ─── REGION 2 · HEADER (optional) ───
+    Title + description, stacked. The description is muted subtitle text and
+    is optional — use it to add a "why this matters" line under a claim title.
+    Centered slide types (title, section, quote, closing) carry their heading
+    here using .display instead of .title.
+    Pure-message slides (single quote, single number) can omit this region.
+  -->
+  <header class="slide-header">
+    <!--
+      Heading classes:
+        .display  → large accent display text (title/section/closing slides)
+        .title    → standard slide heading (content/code/chart/timeline/etc.)
+    -->
+    <h2 class="title fade-in"><!-- LLM: Slide heading — claim sentence --></h2>
+    <!-- description is optional — delete this <p> if not needed -->
+    <p class="description"><!-- LLM: One-line description (optional) --></p>
+  </header>
+  <!--
+    ─── REGION 3 · CONTENT (required) ───
+    The body of the slide. Uses flex column by default with vertical gap.
+    Add a modifier class when the default flex isn't right:
+      slide-content--center  → center on both axes (single number, hero block)
+      slide-content--middle  → vertically center only
+      slide-content--row     → flex-row (text + image side-by-side)
+      slide-content--grid-2  → 2 equal columns
+      slide-content--grid-3  → 3 equal columns
+    Common bodies (replace this comment with one of these):
+      Bullets:
+        <ul class="bullets">
+          <li class="slide-up delay-1">{{Point}}</li>
+          ...max 4 items
+        </ul>
+      Two columns:
+        Use slide-content--grid-2 on this <main>, then:
+        <div class="col"><h3 class="col-heading">{{Left}}</h3>...</div>
+        <div class="col"><h3 class="col-heading">{{Right}}</h3>...</div>
+      Code (with highlight.js):
+        <pre class="code-block slide-up delay-1"><code class="language-{{lang}}">
+        {{ ≤ 20 lines }}
+        </code></pre>
+        <p class="code-caption">{{One-line takeaway}}</p>
+      Quote:
+        <p class="quote-mark fade-in" aria-hidden="true">"</p>
+        <blockquote class="quote-text slide-up">{{quote}}</blockquote>
+        <cite class="quote-attr fade-in delay-2">— {{Name}}</cite>
+      KPI grid (1–3 numbers):
+        <div class="stat-grid">
+          <div class="stat-item"><span class="stat-value">{{N}}</span>
+                                 <span class="stat-label">{{label}}</span></div>
+        </div>
+      Chart (HTML+CSS bars — no JS library):
+        <div class="bar-chart slide-up" role="img" aria-label="{{description}}">
+          <div class="bar-row">
+            <span class="bar-label">{{Label}}</span>
+            <div class="bar" style="--pct:75%"><span>{{Value}}</span></div>
+          </div>
+        </div>
+        <p class="chart-insight">{{Insight}}</p>
+    Full per-type templates → references/html-templates.md
+  -->
+  <main class="slide-content">
+    <!-- LLM: Replace this comment with the body markup for this slide type -->
+  </main>
+  <!--
+    ─── REGION 4 · FOOTER (optional) ───
+    Source line, page number, link, or attribution. Like the logo, this is
+    a deck-wide decision. Include on every slide or none. Footer must not
+    introduce new evidence — sources/links/page numbers only.
+    Delete this footer if the deck has no footer.
+  -->
+  <!--
+  <footer class="slide-footer">
+    <span><!-- LLM: Source or context --></span>
+    <span><!-- LLM: Page number or link --></span>
+  </footer>
+  -->
+</div><!-- end .slide -->
+<!--
+  ═══════════════════════════════════════════════════════════════════════════
+  SPEAKER NOTES — hidden in the presentation, surfaced by the P key.
+  Always include this. Write 2–4 sentences the presenter would say.
+  ═══════════════════════════════════════════════════════════════════════════
+-->
+<aside class="speaker-notes">
+  <!-- LLM: Speaker notes go here -->
+</aside>
+<!--
+  ═══════════════════════════════════════════════════════════════════════════
+  CDN LIBRARY INIT SCRIPTS (at end of body)
+  Place library initialization scripts here, after slide content.
+  highlight.js (if added in <head>):
+    <script>hljs.highlightAll();</script>
+  marked.js (if added in <head>):
+    <script>
+      marked.setOptions({ breaks: true, gfm: true });
+      document.querySelectorAll('[data-md]').forEach(el => {
+        el.innerHTML = marked.parse(el.textContent.trim());
+      });
+    </script>
+  Mermaid.js (if added in <head>):
+    <script>mermaid.initialize({ theme: 'dark', startOnLoad: true });</script>
+  Chart.js (if added in <head>):
+    <script>
+      new Chart(document.getElementById('chart'), {
+        type: 'bar',
+        data: { labels: [...], datasets: [{ data: [...],
+          backgroundColor: getComputedStyle(document.documentElement)
+            .getPropertyValue('--accent').trim() }] },
+        options: { responsive: false, animation: { duration: 800 },
+                   plugins: { legend: { display: false } } }
+      });
+    </script>
+  Motion animation (use type="module"):
+    <script type="module">
+      import { animate, stagger, timeline } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm";
+      if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        animate('.bullets li, .agenda-list li, .stat-item, .tl-item',
+          { opacity: [0,1], y: [16,0] },
+          { delay: stagger(0.12), duration: 0.45, easing: [0.22,1,0.36,1] });
+      }
+    </script>
+  LLM: Only keep the script blocks this slide actually uses. Delete the rest.
+  ═══════════════════════════════════════════════════════════════════════════
+-->
+<!-- LLM: Put CDN init scripts here if needed. Delete this comment otherwise. -->
+<!--
+  NAVBRIDGE — keeps arrow-key navigation working when the iframe has focus.
+  Forwards key events to the parent index.html via postMessage.
+  Path is one level up from slides/ — keep this path unchanged.
+-->
+<script src="../js/navbridge.js"></script>
+</body>
+</html>

package/skills/octocode-stats/SKILL.md ADDED Viewed

@@ -0,0 +1,73 @@
+---
+name: octocode-stats
+description: Render an Octocode MCP usage dashboard from `${OCTOCODE_HOME}/stats.json` or `~/.octocode/stats.json`. Use when the user asks to show Octocode stats, usage, tokens/chars saved, cache hits, errors, rate limits, or visualize `stats.json`.
+---
+# Octocode Stats Dashboard
+Generate a local HTML dashboard from Octocode usage stats. The build script owns all parsing, calculations, rendering, and browser-opening behavior; do not reimplement those calculations in chat or another script.
+## When to Activate
+Use this skill when the user asks to:
+- Show Octocode stats, usage, dashboard, or report
+- Check tokens/chars saved
+- Inspect tool response savings
+- Inspect GitHub cache hits or avoided rate limits
+- Compare raw GitHub/package payload size with the final tool response sent back
+- Review errors, rate limits, or package registry failures
+- Render `stats.json` or data under `~/.octocode/`
+Do not use it for session ID lookup, credentials, or unrelated configuration files.
+## Workflow
+1. Resolve the stats file:
+   - `${OCTOCODE_HOME}/stats.json` when `OCTOCODE_HOME` is set
+   - `~/.octocode/stats.json` otherwise
+   - A user-provided path via `--stats <path>` when explicitly requested
+2. If the stats file is missing, say:
+   `No stats yet — run any Octocode MCP tool first, then re-run this skill.`
+3. Run the dashboard builder from the repo root:
+```bash
+node skills/octocode-stats/scripts/build_dashboard.mjs
+```
+Common flags:
+- `--stats <path>`: read a non-default stats file
+- `--output <path>`: write the dashboard somewhere else
+- `--no-open`: generate without opening the browser
+- `--allow-empty`: render an empty-state dashboard even when stats are missing
+- `--help`: print script usage
+4. Report only the useful result:
+   - Dashboard path
+   - Stats source path
+   - Total tool calls
+   - Estimated tokens saved
+   - GitHub cache hits
+   - Errors
+If the browser did not open, include a manual `open <dashboard-path>` command on macOS.
+## Measurement Notes
+- Token counts are estimates: `estimatedTokensSaved = savedChars / 4`. Always describe them as approximate.
+- `charsSavedByTool` is cumulative response-savings data, not a recent activity log and not a complete per-tool call ledger.
+- Tool response savings may exclude zero-savings tools from visual breakdowns, while total measured calls can still include those calls.
+- `rawChars`, `responseChars`, and `savedChars` are measurements from the response pipeline, not a perfect partition where `raw = response + saved`.
+- `responseChars` is the final tool response after output pagination; `rawChars` counts upstream API/command/file payloads that were actually fetched or read.
+- For paginated upstream APIs, only pages that were actually requested are counted. Later pages appear in stats when those tool calls run.
+- Avoid invented comparisons like pages, words, books, or money unless the script explicitly computes them.
+## References
+- Schema: [packages/octocode-shared/src/session/schemas.ts](https://github.com/bgauryy/octocode-mcp/blob/main/packages/octocode-shared/src/session/schemas.ts)
+- Stats path: [packages/octocode-shared/src/paths.ts](https://github.com/bgauryy/octocode-mcp/blob/main/packages/octocode-shared/src/paths.ts)
+- Session docs: [docs/SESSION_PERSISTENCE.md](https://github.com/bgauryy/octocode-mcp/blob/main/docs/dev/architecture/SESSION_PERSISTENCE.md)
+- Config: [docs/CONFIGURATION_REFERENCE.md](https://github.com/bgauryy/octocode-mcp/blob/main/docs/configuration/CONFIGURATION_REFERENCE.md)