Skip to content

Add SpecGraph SIB presentation shell #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SoundBlaster wants to merge 1 commit into from
Closed

Add SpecGraph SIB presentation shell #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions presentation/specgraph-sib/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# SpecGraph / SIB Metrics Presentation Shell

Static 16:9 HTML deck for a future SpecGraph, SpecSpace, and SIB Metrics
presentation.

Open `index.html` directly in a browser. The deck intentionally avoids build
tooling, slide transitions, autoplay, and animation so the artifact can double
as a landing-style page and a presentation surface.

## Editing Notes

- Keep each slide short: one main claim, one visual, and a small amount of
supporting text.
- Use diagrams for relationships between `SpecGraph`, `SpecSpace`, `Metrics`,
and the AI-driven SDLC loop.
- Preserve the warm editorial style from the SpecGraph landing page: serif
display type, strict rules, monochrome surfaces, and a single blue signal
accent.
- Prefer semantic HTML sections with `data-slide` for future content changes.

196 changes: 196 additions & 0 deletions presentation/specgraph-sib/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>SpecGraph / SpecSpace / SIB Metrics - Presentation Shell</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="deck-shell" aria-label="SpecGraph presentation deck">
<header class="deck-topbar" aria-label="Presentation controls">
<a class="brand" href="#slide-1" aria-label="Go to title slide">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 36 36" role="img">
<circle cx="18" cy="18" r="15.5" fill="none" stroke="currentColor" stroke-width="1.5" />
<path d="M11 20.5 17 10l8 15h-9l4-7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="25" cy="25" r="2.8" fill="currentColor" />
</svg>
</span>
<span>SpecGraph</span>
</a>
<div class="topbar-meta">
<span>Presentation shell</span>
<span>SpecSpace + SIB Metrics</span>
</div>
<nav class="deck-nav" aria-label="Slide navigation">
<button class="icon-button" id="prevSlide" type="button" aria-label="Previous slide" title="Previous slide">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m15 18-6-6 6-6" />
</svg>
</button>
<output class="slide-count" id="slideCount" aria-live="polite">01 / 06</output>
<button class="icon-button" id="nextSlide" type="button" aria-label="Next slide" title="Next slide">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
</header>

<section class="stage" aria-live="polite">
<article class="slide is-active title-slide" id="slide-1" data-slide aria-label="Title">
Comment on lines +44 to +45
<div class="slide-grid two-column">
<div class="copy-block">
<p class="eyebrow">AI-driven SDLC observability</p>
<h1>SpecGraph, <span class="muted-serif">SpecSpace</span> and SIB Metrics</h1>
<p class="lede">A landing-style deck for explaining specification-first development, operator-guided agents, and measurable software delivery loops.</p>
</div>
<div class="hero-panel" aria-label="Conceptual graph diagram">
<div class="graph-field">
<span class="node node-intent">Intent</span>
<span class="node node-spec">Spec</span>
<span class="node node-runtime">Runtime</span>
<span class="node node-metric">Metric</span>
<span class="edge edge-a"></span>
<span class="edge edge-b"></span>
<span class="edge edge-c"></span>
<span class="edge edge-d"></span>
</div>
<div class="panel-caption">
<span>governed graph</span>
<span>measured lifecycle</span>
</div>
</div>
</div>
</article>

<article class="slide" id="slide-2" data-slide aria-label="Problem framing">
<div class="slide-grid split-rule">
<div>
<p class="eyebrow">Problem frame</p>
<h2>LLM work needs a stable evidence plane.</h2>
</div>
<div class="statement-stack">
<section class="statement">
<span class="statement-index">01</span>
<h3>Intent drifts</h3>
<p>Prompts, diffs, reviews, and runtime behavior often live in different systems.</p>
</section>
<section class="statement">
<span class="statement-index">02</span>
<h3>Progress is opaque</h3>
<p>Teams see activity, but not always specification coverage or verification depth.</p>
</section>
<section class="statement">
<span class="statement-index">03</span>
<h3>Metrics lack lineage</h3>
<p>SIB-style signals become useful only when they are tied back to governed artifacts.</p>
</section>
</div>
</div>
</article>

<article class="slide" id="slide-3" data-slide aria-label="SpecGraph role">
<div class="slide-grid diagram-layout">
<div class="copy-block">
<p class="eyebrow">SpecGraph role</p>
<h2>Executable product ontology.</h2>
<p class="body-copy">SpecGraph keeps product intent, decomposition, readiness, evidence, and downstream handoffs connected as reviewable graph state.</p>
</div>
<div class="flow-diagram" aria-label="SpecGraph ontology flow">
<div class="flow-row">
<span>Intent</span>
<span>Pre-Spec</span>
<span>Spec Node</span>
</div>
<div class="flow-row offset">
<span>Proposal</span>
<span>Evidence</span>
<span>Handoff</span>
</div>
<div class="diagram-note">canonical state + derived surfaces</div>
</div>
</div>
</article>

<article class="slide" id="slide-4" data-slide aria-label="SpecSpace role">
<div class="slide-grid two-column">
<div class="surface-panel">
<div class="window-bar">
<span></span><span></span><span></span>
</div>
<div class="surface-grid">
<div class="surface-main">Graph canvas</div>
<div class="surface-side">
<span>Inspector</span>
<span>Metrics</span>
<span>Agent context</span>
</div>
</div>
</div>
<div class="copy-block">
<p class="eyebrow">SpecSpace role</p>
<h2>Operator surface for graph-guided agents.</h2>
<p class="body-copy">SpecSpace turns graph state into a human-operable interface: inspect, steer, compare, and pass context to agents without making derived metrics canonical truth.</p>
</div>
</div>
</article>

<article class="slide" id="slide-5" data-slide aria-label="SIB Metrics bridge">
<div class="slide-grid split-rule">
<div>
<p class="eyebrow">SIB Metrics bridge</p>
<h2>Measure the SDLC as a governed loop.</h2>
</div>
<div class="metric-band">
<section>
<span class="metric-label">Input</span>
<strong>Spec quality</strong>
<p>Structure, verifiability, lineage, and readiness before implementation.</p>
</section>
<section>
<span class="metric-label">Behavior</span>
<strong>Process observability</strong>
<p>Agent runs, interventions, review gates, and evidence production.</p>
</section>
<section>
<span class="metric-label">Outcome</span>
<strong>SIB signal</strong>
<p>Derived diagnostic pressure, not automatic policy authority.</p>
</section>
</div>
</div>
</article>

<article class="slide" id="slide-6" data-slide aria-label="Content roadmap">
<div class="slide-grid closing-layout">
<div class="copy-block">
<p class="eyebrow">Content next</p>
<h2>Few words, strong diagrams, clear measurement story.</h2>
</div>
<ol class="roadmap">
<li><span>01</span> Define the AI-driven SDLC loop.</li>
<li><span>02</span> Map SpecGraph and SpecSpace responsibilities.</li>
<li><span>03</span> Introduce SIB metric families and authority boundaries.</li>
<li><span>04</span> Show how evidence becomes reviewable graph state.</li>
</ol>
</div>
</article>
</section>

<footer class="deck-footer">
<div class="progress-track" aria-hidden="true">
<span id="progressBar"></span>
</div>
<span>Use arrow keys, Page Up / Page Down, Home / End.</span>
</footer>
</main>

<script src="slides.js"></script>
</body>
</html>

73 changes: 73 additions & 0 deletions presentation/specgraph-sib/slides.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
(function () {
const slides = Array.from(document.querySelectorAll("[data-slide]"));
const prevButton = document.getElementById("prevSlide");
const nextButton = document.getElementById("nextSlide");
const slideCount = document.getElementById("slideCount");
const progressBar = document.getElementById("progressBar");
let activeIndex = 0;

Comment on lines +2 to +8
function formatIndex(index) {
return String(index + 1).padStart(2, "0");
}

function updateSlide(nextIndex) {
activeIndex = Math.max(0, Math.min(nextIndex, slides.length - 1));

slides.forEach((slide, index) => {
slide.classList.toggle("is-active", index === activeIndex);
slide.setAttribute("aria-hidden", String(index !== activeIndex));
});

prevButton.disabled = activeIndex === 0;
nextButton.disabled = activeIndex === slides.length - 1;
slideCount.value = `${formatIndex(activeIndex)} / ${formatIndex(slides.length - 1)}`;
slideCount.textContent = `${formatIndex(activeIndex)} / ${formatIndex(slides.length - 1)}`;
Comment on lines +23 to +24

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Show the total slide count instead of the last index

With six data-slide articles in this deck, the runtime counter overwrites the initial 01 / 06 markup with 01 / 05 on load and ends at 06 / 05 on the final slide, because the denominator is slides.length - 1 while the numerator is 1-based. This makes the visible navigation state wrong for every slide; use slides.length for the denominator.

Useful? React with 👍 / 👎.

progressBar.style.width = `${((activeIndex + 1) / slides.length) * 100}%`;

const activeSlide = slides[activeIndex];
if (activeSlide && window.location.hash !== `#${activeSlide.id}`) {
history.replaceState(null, "", `#${activeSlide.id}`);
}
}

function slideFromHash() {
const hash = window.location.hash.replace("#", "");
const index = slides.findIndex((slide) => slide.id === hash);
return index >= 0 ? index : 0;
}

prevButton.addEventListener("click", () => updateSlide(activeIndex - 1));
nextButton.addEventListener("click", () => updateSlide(activeIndex + 1));

document.addEventListener("keydown", (event) => {
if (event.defaultPrevented) return;

switch (event.key) {
case "ArrowLeft":
case "PageUp":
event.preventDefault();
updateSlide(activeIndex - 1);
break;
case "ArrowRight":
case "PageDown":
case " ":
event.preventDefault();
updateSlide(activeIndex + 1);
break;
case "Home":
event.preventDefault();
updateSlide(0);
break;
case "End":
event.preventDefault();
updateSlide(slides.length - 1);
break;
default:
break;
}
});

window.addEventListener("hashchange", () => updateSlide(slideFromHash()));
updateSlide(slideFromHash());
})();

Loading