Initial import: open-design source for helix-mind.ai distribution

This repository contains the open-design daemon CLI source code, built and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use by the HelixMind /design slash command. Licenses: Apache-2.0 (root) + MIT (skills/*)
2026-05-06 20:50:24 +02:00
commit 5dd70b5016
1336 changed files with 287186 additions and 0 deletions
--- a/skills/orbit-github/SKILL.md
+++ b/skills/orbit-github/SKILL.md
@@ -0,0 +1,160 @@
+---
+name: orbit-github
+description: |
+  Open Orbit briefing skill — selected by the Orbit pipeline when
+  GitHub is the user's only connected connector, or when the user
+  explicitly scopes their daily digest to GitHub. Pulls the past 24
+  hours of PRs, review requests, issues, CI runs, and merges from the
+  user's authenticated GitHub connection and renders them in a layout
+  that mirrors GitHub's native Notifications + PR-diff visual language.
+  This skill should not be triggered manually — it is invoked by
+  Orbit's daily-digest scheduler against live GitHub data.
+triggers:
+  - "github briefing"
+  - "github digest"
+  - "pr digest"
+  - "github 简报"
+  - "代码活动汇总"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: orbit
+  featured: 2
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  example_prompt: "Generate today's Open Orbit GitHub briefing. GitHub is my only connected connector — pull yesterday's PRs, review requests, issues, CI runs, and merges and render them as a GitHub Notifications + PR-diff page."
+---
+
+# Orbit · GitHub Briefing
+
+Single-connector Orbit template scoped to GitHub.
+
+## ⚠️ Source-of-truth protocol (read this first)
+
+**Step 1.** Open and read the shipped `example.html` in this folder
+before writing any output. That file is the canonical design — your
+job is to **reproduce it**, not reinterpret it.
+
+**Step 2.** Mirror the example's structure 1:1:
+- Same DOM hierarchy and class names
+- Same nav-bar items (and only those)
+- Same left-rail filter list (and only those)
+- Same event groups in the same order, with the same row count
+- Same diff-preview placement, same CI-fail block, same attention block
+- Same `<script>` block at the end (filter / hover / link injection)
+
+**Step 3.** You may refresh mock values (PR numbers, titles, times,
+CI commit messages) so they read as "today", but you must **not**
+invent extra UI: no extra rail entries, no extra notifications,
+no extra event types, no extra badges, no extra chrome ornaments. If
+something is not already present in `example.html`, it does not
+belong in your output.
+
+The sections below are a **reference for tokens and visual language** —
+not a license to extend the page.
+
+## ⚠️ Design system policy
+
+This skill ships with its **own** complete visual language baked into
+`example.html` (GitHub's Primer chrome). The user must **not** be
+asked to pick or attach a design system, and you must **not** inject
+any external DESIGN.md tokens into the output.
+
+- If the active project has a design system attached, **ignore it**.
+- If the user supplies brand tokens or a Figma file, **ignore them**.
+- Use exclusively the colors / fonts / radii defined in `example.html`.
+
+This is a hard constraint: the briefing must read as a real GitHub
+page, not as the user's brand.
+
+## Canvas tokens (use these exact values)
+
+```
+page bg:           #f6f8fa
+card bg:           #ffffff
+nav bar:           #24292f  /* GitHub black header */
+nav text:          #ffffff
+ink:               #1f2328
+muted:             #59636e
+border:            #d0d7de
+hairline:          rgba(208,215,222,0.32)
+
+state · open:      #1a7f37
+state · merged:    #8250df
+state · closed:    #cf222e
+state · draft:     #6e7781
+
+attention bg:      #fff8c5  /* yellow review-request block */
+attention border:  #d4a72c
+ci-fail bg:        #ffebe9
+ci-fail border:    #cf222e
+```
+
+Type stack:
+- `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
+- Sizes: nav 14px, headings 16/20px, body 14px, meta 12px
+
+## Page sections
+
+1. **Top nav bar** — full-width, dark (`#24292f`), 60px tall.
+   Left: octocat SVG logo (white, 32px) + search input
+   (`rgba(255,255,255,0.08)` background, white placeholder ghosted).
+   Right: `+` plus dropdown, notifications bell with red dot if
+   unread > 0, round avatar.
+
+2. **Header row** — light bar under the nav, 56px.
+   Left: page breadcrumb `Inbox · Daily Digest · May 6`.
+   Right: filter dropdown chips (`Type ▾  Date ▾  Status ▾`).
+
+3. **Two-pane main**:
+   - **Left rail** (240px): vertical filter list. Items:
+     `Inbox · Saved · Done · All` then divider then
+     `Participating · Mentions · Review requests · Assigned · Comments`.
+     Active item: light gray pill background.
+   - **Main pane** (flex 1): event stream grouped by category.
+
+4. **Category groups in main pane** (in this order):
+   - **Review requests waiting on you** — yellow attention block
+     (bg `#fff8c5`, 1px border `#d4a72c`). Each row: avatar + repo
+     path + PR title + reviewer-state row of small dots
+     (✓ green / ⏳ yellow / ○ gray) + "X of Y reviewers" + age.
+   - **CI / Checks** — each failed run is a red-bordered card
+     (border-color `#cf222e`, bg `#ffebe9`) with a `✗` red glyph,
+     run name, branch name (mono), commit message, age.
+   - **Issues assigned to you** — plain rows, status circle (open
+     green / closed red), title, repo path, age, label pills.
+   - **Activity** — quieter rows for merges/closes; muted text,
+     small `merged` purple pill or `closed` red pill.
+
+5. **Optional PR-diff preview** — inline under one PR row, show
+   2–3 lines of mock code in a 12px monospace block with red `−` /
+   green `+` prefixed lines and `#ffebe9` / `#dafbe1` row tints.
+
+6. **Footer** — single line, 12px muted:
+   `Open Orbit · auto-generated 06:42 · GitHub only`.
+
+## Pill / chip rules
+
+- State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding.
+  Foreground white, background by state color above.
+- Labels (`bug`, `p1`, `frontend` …): GitHub label rounded pill, each
+  with its own arbitrary color. Use varied real-world label hues.
+- Reviewer dots: 8px filled circles, 2px gap, with `✓ ⏳ ○` glyphs only
+  if you can keep them visually subtle.
+
+## Implementation constraints (paired do / don't)
+
+| Don't | Do |
+|---|---|
+| Mix light and dark themes | Stay on the light Primer theme (`#f6f8fa` page bg, `#ffffff` cards) |
+| Use non-GitHub typography | Use `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif` exclusively |
+| Render avatars as squares or rounded squares | Always circles, with overlap `≤ 6px` for reviewer stacks |
+| Use shadows / gradients / glows on chrome | Flat surfaces; differentiate with `#d0d7de` 1px borders |
+| Use lorem ipsum | Write real-shaped GitHub copy: PR titles like `feat: orbit briefing card`, branches like `chore/upgrade-deps`, commit subjects under 72 chars |
+| Render a CI failure as a normal row | Wrap in a red-bordered card (`#cf222e` border, `#ffebe9` bg) with a red `✗` glyph and run name |
+| Render a review request as a normal row | Sit it in the yellow attention block (`#fff8c5` bg, `#d4a72c` border) with reviewer status dots row |
+| Use placeholder repo names like `org/repo` | Use `nexu-io/open-design` (this org's actual primary repo) |
+| Pluck arbitrary label colors | Use realistic dev-team hues — `bug` red, `enhancement` blue, `documentation` light blue, `frontend` purple |
--- a/skills/orbit-github/example.html
+++ b/skills/orbit-github/example.html
@@ -0,0 +1,770 @@
+<!doctype html>
+<html lang="en">
+<head><script>(function(){
+  function makeStore(){
+    var data = {};
+    var api = {
+      getItem: function(k){ return Object.prototype.hasOwnProperty.call(data, k) ? data[k] : null; },
+      setItem: function(k, v){ data[k] = String(v); },
+      removeItem: function(k){ delete data[k]; },
+      clear: function(){ data = {}; },
+      key: function(i){ return Object.keys(data)[i] || null; }
+    };
+    Object.defineProperty(api, 'length', { get: function(){ return Object.keys(data).length; } });
+    return api;
+  }
+  function tryShim(name){
+    var works = false;
+    try { works = !!window[name] && typeof window[name].getItem === 'function'; void window[name].length; }
+    catch (_) { works = false; }
+    if (works) return;
+    try { Object.defineProperty(window, name, { configurable: true, value: makeStore() }); }
+    catch (_) { try { window[name] = makeStore(); } catch (__) {} }
+  }
+  tryShim('localStorage');
+  tryShim('sessionStorage');
+})();</script>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Orbit · GitHub Briefing — 2026-05-06</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #1f2328;
+      background: #f6f8fa;
+    }
+
+    /* ── GitHub Top Nav ── */
+    .gh-header {
+      background: #24292f;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .gh-header svg { fill: #ffffff; }
+    .gh-header-logo { flex-shrink: 0; }
+    .gh-header-logo svg { width: 32px; height: 32px; }
+    .gh-header-logo svg:hover { fill: rgba(255,255,255,0.7); }
+
+    .gh-header-search {
+      margin-left: 16px;
+      flex: 1;
+      max-width: 540px;
+    }
+    .gh-header-search input {
+      width: 100%;
+      background: rgba(255,255,255,0.08);
+      border: 1px solid rgba(255,255,255,0.2);
+      border-radius: 6px;
+      padding: 5px 12px;
+      font-size: 14px;
+      color: #ffffff;
+      outline: none;
+      font-family: inherit;
+    }
+    .gh-header-search input::placeholder { color: rgba(255,255,255,0.4); }
+    .gh-header-search input:focus {
+      background: rgba(255,255,255,0.12);
+      border-color: rgba(255,255,255,0.4);
+    }
+    .gh-header-search-slash {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: 1px solid rgba(255,255,255,0.2);
+      border-radius: 4px;
+      padding: 0 5px;
+      font-size: 11px;
+      color: rgba(255,255,255,0.4);
+      line-height: 18px;
+    }
+
+    .gh-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: auto;
+    }
+    .gh-avatar-header {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #6366f1, #8b5cf6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: 600;
+      color: #ffffff;
+      cursor: pointer;
+    }
+
+    /* ── Page Layout ── */
+    .page-container {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 24px 32px;
+      display: flex;
+      gap: 24px;
+    }
+
+    /* ── Left Sidebar Nav ── */
+    .sidebar {
+      width: 256px;
+      flex-shrink: 0;
+    }
+    .sidebar-nav {
+      list-style: none;
+    }
+    .sidebar-nav li button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      border-radius: 6px;
+      color: #1f2328;
+      font-size: 14px;
+      font-weight: 400;
+      font-family: inherit;
+      background: none;
+      border: none;
+      width: 100%;
+      cursor: pointer;
+      text-align: left;
+    }
+    .sidebar-nav li button:hover {
+      background: rgba(208,215,222,0.32);
+    }
+    .sidebar-nav li button.active {
+      background: rgba(208,215,222,0.48);
+      font-weight: 600;
+    }
+    .sidebar-nav li button svg {
+      fill: #656d76;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+    .sidebar-nav li button.active svg { fill: #1f2328; }
+    .sidebar-count {
+      margin-left: auto;
+      background: rgba(208,215,222,0.48);
+      padding: 0 6px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #1f2328;
+      line-height: 20px;
+    }
+
+    /* ── Main Content ── */
+    .main-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* ── Section Groups ── */
+    .event-group {
+      margin-bottom: 16px;
+    }
+    .event-group-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      border: 1px solid #d0d7de;
+      border-radius: 6px 6px 0 0;
+      background: #f6f8fa;
+    }
+    .event-group-header.warning {
+      background: #fff8c5;
+      border-color: #d4a72c;
+    }
+    .event-group-header.ci-fail {
+      background: #ffebe9;
+      border-color: #cf222e;
+    }
+    .event-group-header .count {
+      background: rgba(208,215,222,0.48);
+      padding: 0 6px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+    }
+    .event-group-header.warning .count {
+      background: rgba(154,103,0,0.12);
+      color: #9a6700;
+    }
+    .event-group-header.ci-fail .count {
+      background: rgba(207,34,46,0.12);
+      color: #cf222e;
+    }
+
+    /* ── Event Rows ── */
+    .event-list {
+      border: 1px solid #d0d7de;
+      border-top: none;
+      border-radius: 0 0 6px 6px;
+      background: #ffffff;
+    }
+    .event-row {
+      padding: 12px 16px;
+      border-bottom: 1px solid #d0d7de;
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    .event-row:last-child { border-bottom: none; }
+
+    .event-icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      margin-top: 3px;
+    }
+    .event-icon svg { width: 16px; height: 16px; }
+
+    .event-body {
+      flex: 1;
+      min-width: 0;
+    }
+    .event-title-line {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: 4px;
+      font-size: 14px;
+    }
+    .event-repo {
+      color: #656d76;
+      font-weight: 400;
+    }
+    .event-sep { color: #656d76; }
+    .event-pr-label {
+      color: #656d76;
+    }
+    .event-title-text {
+      font-weight: 600;
+      color: #1f2328;
+    }
+    .event-title-text a {
+      color: #0969da;
+      text-decoration: none;
+    }
+    .event-title-text a:hover { text-decoration: underline; }
+    .event-timestamp {
+      margin-left: auto;
+      color: #656d76;
+      font-size: 12px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .event-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 4px;
+      font-size: 12px;
+      color: #656d76;
+    }
+
+    /* ── Status Pills ── */
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 18px;
+      white-space: nowrap;
+    }
+    .pill-open { background: #1a7f37; color: #ffffff; }
+    .pill-merged { background: #8250df; color: #ffffff; }
+    .pill-closed { background: #cf222e; color: #ffffff; }
+    .pill-draft { background: #6e7781; color: #ffffff; }
+    .pill svg { width: 12px; height: 12px; fill: currentColor; }
+
+    /* ── Labels ── */
+    .gh-label {
+      display: inline-block;
+      padding: 0 7px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      border: 1px solid transparent;
+    }
+    .label-backend { background: #ddf4ff; color: #0550ae; border-color: rgba(5,80,174,0.2); }
+    .label-p1 { background: #ffebe9; color: #a40e26; border-color: rgba(164,14,38,0.2); }
+
+    /* ── Reviewer Avatars ── */
+    .reviewer-stack {
+      display: flex;
+      align-items: center;
+      gap: 0;
+    }
+    .reviewer-avatar {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      border: 2px solid #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 9px;
+      font-weight: 600;
+      color: #ffffff;
+      margin-left: -4px;
+      position: relative;
+    }
+    .reviewer-avatar:first-child { margin-left: 0; }
+
+    .reviewer-status {
+      position: absolute;
+      bottom: -2px;
+      right: -2px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      border: 1.5px solid #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .reviewer-status.approved { background: #1a7f37; }
+    .reviewer-status.pending { background: #bf8700; }
+    .reviewer-status.none { background: #d0d7de; }
+    .reviewer-status svg { width: 6px; height: 6px; fill: #ffffff; }
+
+    /* ── Diff Preview ── */
+    .diff-preview {
+      margin-top: 8px;
+      border: 1px solid #d0d7de;
+      border-radius: 6px;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+      font-size: 12px;
+      line-height: 20px;
+      overflow: hidden;
+    }
+    .diff-header {
+      background: #f6f8fa;
+      padding: 4px 12px;
+      color: #656d76;
+      font-size: 12px;
+      border-bottom: 1px solid #d0d7de;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .diff-header svg { width: 12px; height: 12px; fill: #656d76; }
+    .diff-line {
+      padding: 0 12px;
+      white-space: pre;
+    }
+    .diff-line.add {
+      background: #dafbe1;
+      color: #116329;
+    }
+    .diff-line.remove {
+      background: #ffebe9;
+      color: #82071e;
+    }
+    .diff-line.context {
+      background: #ffffff;
+      color: #656d76;
+    }
+    .diff-line-number {
+      display: inline-block;
+      width: 32px;
+      text-align: right;
+      color: rgba(31,35,40,0.3);
+      user-select: none;
+      padding-right: 8px;
+    }
+
+    /* ── CI Fail Card ── */
+    .ci-fail-card .event-row {
+      border-left: 3px solid #cf222e;
+    }
+
+    /* ── Conversation Indicator ── */
+    .convo-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      background: #fff8c5;
+      color: #9a6700;
+    }
+    .convo-badge svg { width: 12px; height: 12px; fill: currentColor; }
+
+    /* ── Footer ── */
+    .orbit-footer {
+      text-align: center;
+      padding: 24px 16px 32px;
+      font-size: 12px;
+      color: #656d76;
+    }
+    .orbit-footer strong {
+      color: #1f2328;
+      font-weight: 600;
+    }
+
+    /* ── Responsive ── */
+    @media (max-width: 768px) {
+      .page-container {
+        flex-direction: column;
+        padding: 16px;
+      }
+      .sidebar { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+
+<!-- ════════ GitHub Header ════════ -->
+<header class="gh-header">
+  <!-- Octocat Logo -->
+  <a class="gh-header-logo" href="#">
+    <svg viewBox="0 0 16 16" width="32" height="32">
+      <path 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"/>
+    </svg>
+  </a>
+
+  <!-- Search -->
+  <div class="gh-header-search" style="position:relative;">
+    <input type="text" placeholder="Type / to search" />
+    <span class="gh-header-search-slash">/</span>
+  </div>
+
+  <!-- Action buttons -->
+  <div class="gh-header-actions">
+    <div class="gh-avatar-header">E</div>
+  </div>
+</header>
+
+<!-- ════════ Page ════════ -->
+<div class="page-container">
+
+  <!-- ── Sidebar ── -->
+  <nav class="sidebar" data-od-id="sidebar">
+    <ul class="sidebar-nav" id="sidebarNav">
+      <li>
+        <button class="active" data-filter="all">
+          <svg viewBox="0 0 16 16"><path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75C0 1.784.784 1 1.75 1ZM1.5 2.75v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"/></svg>
+          All
+          <span class="sidebar-count">5</span>
+        </button>
+      </li>
+      <li>
+        <button data-filter="participating">
+          <svg viewBox="0 0 16 16"><path d="M1.5 14.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25v12.5ZM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm9.22 3.72a.749.749 0 0 1 1.06 0l3.5 3.5a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L10 7.31 7.28 10.03a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734Z"/></svg>
+          Participating
+        </button>
+      </li>
+      <li>
+        <button data-filter="mentions">
+          <svg viewBox="0 0 16 16"><path d="M4.75 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm3.25.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm4 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"/><path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25Z"/></svg>
+          Mentions
+        </button>
+      </li>
+      <li>
+        <button data-filter="reviews">
+          <svg viewBox="0 0 16 16"><path d="M3.5 9.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm5-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"/></svg>
+          Review requests
+          <span class="sidebar-count">2</span>
+        </button>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- ── Main Content ── -->
+  <main class="main-content" data-od-id="main-content">
+
+    <!-- ═══ Review Requests ═══ -->
+    <div class="event-group" data-od-id="review-requests" data-category="reviews">
+      <div class="event-group-header warning">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="#9a6700"><path d="M8 2c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6Zm.25 3a.75.75 0 0 0-1.5 0v3c0 .199.079.39.22.53l2 2a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L8.25 7.69Z"/></svg>
+        Review requests waiting on you
+        <span class="count">2</span>
+      </div>
+      <div class="event-list">
+
+        <!-- PR #2371 -->
+        <div class="event-row">
+          <div class="event-icon">
+            <svg viewBox="0 0 16 16" fill="#1a7f37"><path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"/></svg>
+          </div>
+          <div class="event-body">
+            <div class="event-title-line">
+              <span class="event-repo">open-design/web</span>
+              <span class="event-sep">·</span>
+              <span class="event-pr-label">PR #2371</span>
+              <span class="event-sep">·</span>
+              <span class="pill pill-open">
+                <svg viewBox="0 0 16 16"><path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354Z"/></svg>
+                Open
+              </span>
+              <span class="event-title-text"><a href="#">feat: orbit briefing card</a></span>
+              <span class="event-timestamp">opened 2d ago by marie</span>
+            </div>
+            <div class="event-meta">
+              <!-- Reviewer Avatars -->
+              <div class="reviewer-stack">
+                <div class="reviewer-avatar" style="background:#2da44e;" title="alex — approved">A
+                  <span class="reviewer-status approved"><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg></span>
+                </div>
+                <div class="reviewer-avatar" style="background:#0969da;" title="sam — approved">S
+                  <span class="reviewer-status approved"><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg></span>
+                </div>
+                <div class="reviewer-avatar" style="background:#cf222e;" title="jess — approved">J
+                  <span class="reviewer-status approved"><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg></span>
+                </div>
+                <div class="reviewer-avatar" style="background:#8250df;" title="eli — pending">E
+                  <span class="reviewer-status pending"></span>
+                </div>
+                <div class="reviewer-avatar" style="background:#bf3989;" title="cody — pending">C
+                  <span class="reviewer-status pending"></span>
+                </div>
+              </div>
+              <span style="color:#656d76;">✓ 3 of 5 reviewers approved · waiting on <strong style="color:#1f2328;">you</strong> + <strong style="color:#1f2328;">cody</strong></span>
+            </div>
+
+            <!-- Diff Preview -->
+            <div class="diff-preview">
+              <div class="diff-header">
+                <svg viewBox="0 0 16 16"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914Z"/></svg>
+                src/components/OrbitBriefingCard.tsx
+              </div>
+              <div class="diff-line context"><span class="diff-line-number">42</span>  return (</div>
+              <div class="diff-line remove"><span class="diff-line-number">43</span>-   &lt;div className="briefing-legacy"&gt;</div>
+              <div class="diff-line add"><span class="diff-line-number">43</span>+   &lt;Card variant="orbit" density="compact"&gt;</div>
+              <div class="diff-line add"><span class="diff-line-number">44</span>+     &lt;BriefingHeader provider={provider} /&gt;</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PR #2389 -->
+        <div class="event-row">
+          <div class="event-icon">
+            <svg viewBox="0 0 16 16" fill="#1a7f37"><path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"/></svg>
+          </div>
+          <div class="event-body">
+            <div class="event-title-line">
+              <span class="event-repo">open-design/web</span>
+              <span class="event-sep">·</span>
+              <span class="event-pr-label">PR #2389</span>
+              <span class="event-sep">·</span>
+              <span class="pill pill-open">
+                <svg viewBox="0 0 16 16"><path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354Z"/></svg>
+                Open
+              </span>
+              <span class="event-title-text"><a href="#">refactor: skill loader</a></span>
+              <span class="event-timestamp">1d ago</span>
+            </div>
+            <div class="event-meta">
+              <span class="convo-badge">
+                <svg viewBox="0 0 16 16"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg>
+                Conversation needs your reply
+              </span>
+              <span style="color:#656d76;">@cody asked a question</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ═══ CI / Checks ═══ -->
+    <div class="event-group ci-fail-card" data-od-id="ci-checks" data-category="ci">
+      <div class="event-group-header ci-fail">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="#cf222e"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"/></svg>
+        CI / Checks
+        <span class="count">1</span>
+      </div>
+      <div class="event-list">
+        <div class="event-row">
+          <div class="event-icon">
+            <svg viewBox="0 0 16 16" fill="#cf222e"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/></svg>
+          </div>
+          <div class="event-body">
+            <div class="event-title-line">
+              <span class="event-repo">open-design/web</span>
+              <span class="event-sep">·</span>
+              <span style="color:#1f2328;font-weight:600;">main</span>
+              <span class="event-sep">·</span>
+              <span style="color:#cf222e;font-weight:600;">✗ test (e2e) failed</span>
+              <span class="event-timestamp">2h ago</span>
+            </div>
+            <div class="event-meta">
+              <svg viewBox="0 0 16 16" width="12" height="12" fill="#656d76"><path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.25a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/></svg>
+              <span>Last commit: <code style="font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;background:#f6f8fa;border:1px solid #d0d7de;padding:1px 5px;border-radius:4px;font-size:0.85em;">chore(deps): bump cheerio to 1.0.2</code></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Issues assigned to you ═══ -->
+    <div class="event-group" data-od-id="issues" data-category="issues" data-mentions>
+      <div class="event-group-header">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="#1a7f37"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"/></svg>
+        Issues assigned to you
+        <span class="count">1</span>
+      </div>
+      <div class="event-list">
+        <div class="event-row">
+          <div class="event-icon">
+            <svg viewBox="0 0 16 16" fill="#1a7f37"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"/></svg>
+          </div>
+          <div class="event-body">
+            <div class="event-title-line">
+              <span class="event-repo">open-design/web</span>
+              <span class="event-sep">·</span>
+              <span class="event-pr-label">ENG-148</span>
+              <span class="event-sep">·</span>
+              <span class="pill pill-open">
+                <svg viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"/></svg>
+                Open
+              </span>
+              <span class="event-title-text"><a href="#">Auth middleware refactor</a></span>
+              <span class="event-timestamp">no activity 5d</span>
+            </div>
+            <div class="event-meta">
+              <span class="gh-label label-backend">backend</span>
+              <span class="gh-label label-p1">p1</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Activity ═══ -->
+    <div class="event-group" data-od-id="activity" data-category="activity">
+      <div class="event-group-header">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="#656d76"><path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.25a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/></svg>
+        Activity
+        <span class="count">1</span>
+      </div>
+      <div class="event-list">
+        <div class="event-row">
+          <div class="event-icon">
+            <svg viewBox="0 0 16 16" fill="#8250df"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"/></svg>
+          </div>
+          <div class="event-body">
+            <div class="event-title-line">
+              <span class="event-repo">open-design/web</span>
+              <span class="event-sep">·</span>
+              <span class="event-pr-label">PR #2401</span>
+              <span class="event-sep">·</span>
+              <span class="pill pill-merged">
+                <svg viewBox="0 0 16 16"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"/></svg>
+                Merged
+              </span>
+              <span class="event-title-text">merged into main by <strong>bob</strong></span>
+              <span class="event-timestamp">18h ago</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</div>
+
+<!-- ════════ Footer ════════ -->
+<footer class="orbit-footer">
+  <strong>Open Orbit</strong> · auto-generated 06:42 · 2026-05-06
+</footer>
+
+<script>
+(function() {
+  var nav = document.getElementById('sidebarNav');
+  var groups = document.querySelectorAll('.event-group');
+
+  nav.addEventListener('click', function(e) {
+    var btn = e.target.closest('button');
+    if (!btn) return;
+
+    // Toggle active
+    nav.querySelectorAll('button').forEach(function(b) { b.classList.remove('active'); });
+    btn.classList.add('active');
+
+    var filter = btn.getAttribute('data-filter');
+
+    groups.forEach(function(g) {
+      if (filter === 'all') {
+        g.style.display = '';
+      } else if (filter === 'participating') {
+        // User participates in reviews + issues assigned
+        g.style.display = (g.hasAttribute('data-category') &&
+          (g.dataset.category === 'reviews' || g.dataset.category === 'issues')) ? '' : 'none';
+      } else if (filter === 'mentions') {
+        g.style.display = g.hasAttribute('data-mentions') ? '' : 'none';
+      } else if (filter === 'reviews') {
+        g.style.display = g.dataset.category === 'reviews' ? '' : 'none';
+      }
+    });
+  });
+
+  // Row hover highlight + click-to-open-on-GitHub
+  const REPO = 'https://github.com/nexu-io/open-design';
+  function buildUrl(label) {
+    const t = (label || '').trim();
+    const prMatch = t.match(/PR\s*#(\d+)/i);
+    if (prMatch) return REPO + '/pull/' + prMatch[1];
+    const issueIdMatch = t.match(/^[A-Z]+-(\d+)/);
+    if (issueIdMatch) return REPO + '/issues?q=' + encodeURIComponent(t);
+    const hashMatch = t.match(/#(\d+)/);
+    if (hashMatch) return REPO + '/issues/' + hashMatch[1];
+    return REPO;
+  }
+  document.querySelectorAll('.event-row').forEach(function(row) {
+    const label = row.querySelector('.event-pr-label')?.textContent;
+    const url = buildUrl(label);
+    row.style.cursor = 'pointer';
+    row.style.transition = 'background 80ms ease-out';
+    row.addEventListener('mouseenter', function() { row.style.background = '#f6f8fa'; });
+    row.addEventListener('mouseleave', function() { row.style.background = ''; });
+    row.addEventListener('click', function(e) {
+      // Don't override clicks on inner real anchors
+      if (e.target.closest('a')) return;
+      window.open(url, '_blank', 'noopener,noreferrer');
+    });
+    // Upgrade the title placeholder anchor to a real URL
+    const titleAnchor = row.querySelector('.event-title-text a');
+    if (titleAnchor) {
+      titleAnchor.href = url;
+      titleAnchor.target = '_blank';
+      titleAnchor.rel = 'noopener noreferrer';
+    }
+  });
+  // Top logo also points to the repo
+  const headerLogo = document.querySelector('.gh-header-logo');
+  if (headerLogo) {
+    headerLogo.href = REPO;
+    headerLogo.target = '_blank';
+    headerLogo.rel = 'noopener noreferrer';
+  }
+})();
+</script>
+</body>
+</html>