orbit-general

Orbit General Briefing

Cross-connector morning briefing that lives at the top of "我的设计". Pulls the past 24 hours of activity from every authenticated connector and lays them out as one editorial bento dashboard.

⚠️ 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 number and order of sections
• Same number of bento modules in the same order
• Same connector list (do not add or drop connectors)
• Same KPI labels, same Top 3 entries, same "people waiting" set
• Same footer string
• Same <script> block at the end (link injection)

Step 3. You may freshen mock data values (counts, names, times) so they read as "today" — but you must not invent new UI elements, sections, modules, badges, callouts, ribbons, banners, decorations or chrome that aren't already in example.html. If a detail is not in the example, it does not belong in your output.

The body sections below are a reference for the visual language and tokens — they are not a license to add features the example doesn't already render.

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html. 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 / chrome defined in example.html.

This is a hard constraint: an Orbit briefing must read as Open Orbit's own editorial bento language, not as the user's brand.

Canvas tokens (use these exact values)

--bg:        #FAF7F2     /* off-white page */
--surface:   #FFFFFF     /* card */
--fg:        #1A1816     /* ink */
--muted:     #6B6660     /* secondary text */
--border:    #EAE5DD     /* 1px hairline only */
--orange:    #D86A47     /* accent (CTAs, hero highlight, meeting blocks) */
--green:     #2E7D5B     /* ok / done */
--yellow:    #C9982E     /* waiting */
--red:       #C0473A     /* alert / fail */
--radius-l:  24px        /* outer container */
--radius-m:  16px        /* bento cards */
--radius-s:  12px        /* inner blocks */

Type stack:

• Display serif: 'Cormorant', Georgia, serif — KPI numerals, Hero h1, Top 3 serial numbers, italic comment quotes
• Body sans: 'Inter', -apple-system, system-ui, sans-serif
• Numbers: always font-variant-numeric: tabular-nums

No shadows. No gradients. No emoji as primary visuals. Connector icons must be monochrome line SVG (1.5 stroke).

Page sections (top to bottom)

1. Hero — single row, ~80px tall. Left: ☀ 早安, Eli (Cormorant 38px, with , in --orange). Right of name: · 2026 年 5 月 6 日 · 星期三 (muted, 18px). Far right: round avatar (40px) + small ⚙ + ✕ icons.

2. KPI strip — single row, ~120px tall, 5 columns equal width. Each cell: serif number (Cormorant 64px, --fg) over a muted uppercase tracking label (Inter 11px, letter-spacing 0.06em). Optional ▲/▼ delta tag in --green/--red next to the number. Suggested labels: 待办 / 待 review / 会议 / @ 我 / agent 跑完.

3. Today's timeline — full width, ~140px tall. Horizontal time axis from 09:00 → 19:00, hour ticks below. Meeting blocks: filled --orange rounded rectangles spanning their start/end, with the meeting name + attendee count inside. Deep-work suggestions: pale-green translucent bands behind the axis. "Now" indicator: a 1px vertical --red line with a pulsing dot (@keyframes pulse 2s ease-in-out infinite) and a tiny 现在 label.

4. Top 3 — 3 equal cards, ~220px tall. Each card: huge serif numeral 1 / 2 / 3 (Cormorant 96px, in --fg) left-aligned; one-sentence task headline (Inter 18px medium); a meta row at the bottom with the connector source label + line-icon

   • 等待 Xh waiting time. Cards have --border 1px outline only.

5. Connector modules — adaptive bento, the heart of the briefing. Render 10–16 modules. Sizes vary: data-rich connectors take a 2-column or 2-row span, simple ones stay 1×1. No two modules should look identical. Pick UI per the data family below.

6. People waiting on you — full-width strip ~110px tall. Title left: 5 人在等你 · 最久 22h (serif 24px). Right: 5 overlapping circular avatars (44px, ~8px overlap), each with the person's name + waiting reason underneath in 12px muted.

7. Footer — single line, ~52px. Left: Open Orbit · auto-generated 06:42 · N connectors. Right: 由 Nexu Labs 出品. Border-top 1px, all text 12px muted.

Connector → UI mapping (pick the matching family)

Fallback heuristics (for unknown connectors)

When a connector doesn't match any family above, infer by the data shape it returns:

• Returns numbers + a time series → treat as Alerts (big number + heatmap)
• Returns rows with status field → treat as Task mgmt (status-dot list)
• Returns rows with from / subject → treat as Comms (avatar + quote)
• Returns documents / file names → treat as Files (list + thumbnails)
• Returns a small set of named "states" (deploy / build / cycle) → treat as Status
• Returns dated events → treat as Time (agenda list)

If still ambiguous, fall back to a status-dot list (the safest default).

Implementation constraints (paired do / don't)