Landing page + Tempo-style docs theme#93
Merged
Merged
Conversation
Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…n glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/MATRIX_GREEN/mid/MATRIX_DIM/MATRIX_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced Matrix-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent Matrix cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no Matrix moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…dmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed.
- Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname.
- Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout).
Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'.
donbeave
added a commit
that referenced
this pull request
Apr 20, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced franchise-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent franchise cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no franchise moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark franchise theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
donbeave
added a commit
that referenced
this pull request
Apr 21, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced franchise-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent franchise cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no franchise moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark franchise theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
donbeave
added a commit
that referenced
this pull request
Apr 21, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced franchise-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent franchise cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no franchise moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark franchise theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
donbeave
added a commit
that referenced
this pull request
Apr 21, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced product-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent product cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no product moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark product theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
donbeave
added a commit
that referenced
this pull request
Apr 21, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced product-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent product cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no product moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark product theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
donbeave
added a commit
that referenced
this pull request
May 7, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced product-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent product cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no product moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark product theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Signed-off-by: Alexey Zhokhov <alexey@zhokhov.com> Co-authored-by: Codex <codex@openai.com>
donbeave
added a commit
that referenced
this pull request
May 7, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced product-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent product cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no product moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark product theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Signed-off-by: Alexey Zhokhov <alexey@zhokhov.com> Co-authored-by: Codex <codex@openai.com>
donbeave
added a commit
that referenced
this pull request
May 7, 2026
* design: add landing page mockup for jackin.tailrocks.com Full-page mockup with editorial split hero and seven sections: Vocabulary, Problem, Mental Model (org × agent-class × workspace composition machine with mounts), How It Works, Security, Ecosystem + Install. Hero rain is a faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient, 35ms frame rate. Standalone HTML with inlined CSS/JS, no build step required. * design: landing page iteration — full-screen rain hero + scroll-driven glossary Hero: - Full-screen (min-height: 100vh) with flex-centered content - Nav moved inside hero-stage so rain falls from Y=0 through the nav - Nav dropped its border + nav-links; Star button now CTA-only (no count) - Trim pass: removed meta-row, pill band, sub-stats, footer, and duplicate brew-install buttons; tightened hero to headline + deck + CTA Rain: - Faithful port of src/tui.rs digital_rain — ASCII char pool, age-based color gradient (WHITE/pale/PHOSPHOR_GREEN/mid/PHOSPHOR_DIM/PHOSPHOR_DARK), per-column speed/fade, mutation probabilities, 35ms frame rate - 32% canvas opacity + radial vignette + bottom-fade so text stays legible Section 2 (Vocabulary) — full redesign: - Replaced product-mapping table with scroll-driven dictionary - Sticky rail (300px) + Fraunces-serif detail panel - Nine entries now include Agent class + Workspace with explicit relationships (Agent class "built on top of the Construct"; Workspace is "a named list of mounts and access rules"; Jacking in is "Loading an agent into a workspace") - Section is 500vh tall; scroll progress drives which entry is active; rail items are also click-to-jump with smooth scrollTo - Introduces Fraunces serif alongside Inter + JetBrains Mono Section 4 (Composition Machine): - Extended to three dimensions: organization × agent-class × workspace - Three orgs preloaded (jackin-project, chainargos, acme) with realistic agent/workspace configs; workspaces show per-mount rw/ro tags - Cross-path mounts render src → dst; same-path mounts render once - Allowed-agents rejection renders a red "not loaded" state Section 7 (Ecosystem): - Repo names follow the jackin- prefix convention (jackin-project/jackin-agent-smith, your-org/jackin-your-agent) - Install block shows the cd step before jackin load; copy button removed * design: red pill/blue pill, cloning section, 5-agent cast Section 03 — "The false choice" reframed as red pill / blue pill: - Two-tone CSS pill capsules (colored + white halves with gloss highlight) - Blue pill = "Babysit every prompt" (gated, productivity destroyed) - Red pill = "Full YOLO on host" (unfiltered, risk maximum) - Transition: "Refuse the pill. You're the Operator — define the construct instead." — operator = Morpheus, above the choice Section 04 — Kitchen-Sink vs Role-Specific callout: - Two-card insight block below the composition machine's axis note - Left: neutral "Kitchen-Sink Agent" (Every toolchain/plugin/convention) - Right: green-accented "Role-Specific Agent" (Only relevant tools/plugins) - Argues the *why* of narrow agent classes without adding a new section Section 06 — New: "Parallel work" (clone the agent, split the work): - Three clone cards: agent-smith #1/#2/#3 on different branches (feature/auth-redesign, feature/payment-v2, fix/api-timeout) - Each card: pulsing live dot, branch name, container/DinD/history/network - Four scenarios: parallel features, service fan-out, divide and conquer, experiment safely - Old Section 06 (Security) renumbered to 07; old 07 (Ecosystem) to 08 Section 08 — Ecosystem rewritten with 5-agent product cast: - agent-smith (built-in, default) - the-architect (built-in, Rust dev) - agent-jones (archetype: company specialist — scentbird/jackin-agent-jones) - agent-brown (archetype: role-specific frontend) - your-own (build-your-own template) - Section title: "Every org builds a cast" * design: real agent-class structure + redesigned Cast section Section 04 (The Approach): - Route 01 is now prose + toolset chips (no Dockerfile), describing the-architect concretely: what it adds on top of the construct - Route 02 uses tabbed builder (manifest / Dockerfile) showing both files that make up a real jackin agent class - Dockerfile patterns now match jackin conventions: FROM projectjackin (not jackin-project), mise install … && mise use --global, and the USER root / apt-get / USER claude pattern for system packages - Dropped fictional features (password-manager ENV, EXPOSE port) since they're not part of jackin today - Each route now shows CLI + REPO mapping (e.g. jackin load the-architect vs github.com/jackin-project/jackin-the-architect) Section 05 (Cast) — full redesign: - Reduced from 6 cards to 3 character cards + 1 full-width invite strip - Dropped the Architect (covered in Section 04 Route 01) and DB maintainer (no product moniker) — zero duplication with Section 04 - Cards lead with the Fraunces-serif character name, not the role identifier, making Smith/Jones/Brown the visual anchors - Removed placeholder repo paths — they were fake noise - "Create your own role" is now a distinctly-styled full-width strip below the character trio, with a real link to the developing/creating-agents docs - Intro updated: "Smith, Jones, Brown — archetypes to adopt. Every other role, yours to cast." Section 02 (Vocabulary): - Construct image reference fixed to projectjackin/construct:trixie (matches docs/developing/construct-image.mdx) * design: tighten Section 06 Mental Model copy - Intro shortened from ~60 words to 15: "Same agent in different workspaces. Same workspace with different agents. Pick both — see what runs." - Dropped the axis-note block entirely (it was re-teaching Section 02's dictionary definitions) - Simplified machine sublabels: "the tool profile" / "workdir + mounts" / "the resulting container" (down from 2-3 words each) - Kitchen-Sink/Role-Specific callout notes compressed to single lines: "Too much context — worse decisions." and "Focused context — better results, faster." - Section is now ~60% shorter on copy with the interactive machine unchanged * design: daily-loop redesign, drop Security, simplify Install, add wordmark footer Section 06 (Mental Model): - acme → your-org across composition machine data and tabs Section 07 (How it Works): - Redesigned from vertical filmstrip into "The daily loop" with five vertical frames, each using a 2-column layout (info left, full terminal right with chrome dots) - Added new "clone" frame between load and hardline that demonstrates parallel agents with cd setup and two load cycles on different paths - Each frame: Fraunces-serif command name, italic mythos line (Jacking in, More of me, The hardline, Pulling out, Casting out), description paragraph, full terminal with colored output - Frame 01 load now shows the cd ~/Projects/my-app setup step Section 08 (Parallel work — clone cards + scenarios): - Deleted entirely. The clone story is now Entry 02 of the daily loop. Old CSS (.clones, .clone-card, .scenarios, .scenario) also removed. Section 08 (Security Model — honest version): - Deleted. The section is documented elsewhere; on the landing it was slowing down the path to install. Section 08 (Install — was 09/10): - Simplified: dropped the rehash intro "Load an agent. Give it full autonomy inside..." that restated Section 07's loop - Dropped the cd step from the install block (shown in Section 07) - Dropped comment lines inside the code block - Dropped "Your host stays untouched" closing h2 (repeats the hero) - Title is now one word: "Install." - Sec-label changed to "08 · Jack in" to avoid duplicating the title and to bookend the hero's Operator narrative - CTA links point to real URLs (tailrocks.com/ and GitHub) Terminal chrome: - Removed "operator@construct" label from all six terminal bars (one in hero code panel, five in Section 07 loop) Footer (new): - Added big Inter 900 "jackin'" wordmark at clamp(120px, 24vw, 300px) with green accent apostrophe — modern full-width branding end-mark - Small mono meta row above: GitHub · Docs · Apache 2.0 Page total: 8 sections (was 10). ~250 lines lighter. * design: fix Install copy — accurate count + bookend the hero The previous intro "Three lines, then load" was misleading: load IS the third line, not a follow-up. Swapped to "Tap, install, load — you're in." — three verbs that map 1:1 to the three install block lines, with "you're in" echoing the hero tagline's "inside." * design: add spec for landing page implementation Captures the design decisions from the landing-v2.html mockup and specifies the Vocs/React integration plan. Option 3 (landing at /, docs URLs unchanged) — replaces the current HomePage.Root in docs/pages/index.mdx with a set of React components under layout: landing frontmatter. Spec covers palette, typography trio (Inter + JetBrains Mono + Fraunces), section-by-section structure, interaction patterns (tabs, scroll-driven rail+detail, composition machine), a component inventory mapping the mockup to ~14 React components, and technical constraints (Vocs 1.4+, React 19, Tailwind v4, Bun). The mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; this spec is the design intent + integration plan for implementation. * plan: landing page implementation plan — 18 tasks across 5 phases Task-by-task plan for converting the landing-v2.html mockup into Vocs React components under docs/components/landing/. Covers: - Scaffold + design tokens (tasks 1-2) - Simple static sections first to establish patterns (tasks 3-5): InstallBlock, WordmarkFooter, PillCards - Shared TabbedBuilder + ApproachCards + CastRoster (tasks 6-8) - CompositionMachine with state + FocusCallout (tasks 9-10) - Scroll-driven VocabularyDictionary (task 11) - DailyLoop with 5 frames (task 12) - Hero stack: rainEngine (TDD with unit tests), DigitalRain, CodePanel, HeroStage + HeroContent (tasks 13-16) - Responsive + accessibility pass (task 17) - Build verification + visual regression (task 18) Each task: exact file paths, step-by-step instructions with code, TDD for pure logic (rain engine), dev-server visual verification for React components, commit at end. Mockup at docs/superpowers/mockups/landing-v2.html remains the source of truth for pixel-level details; plan references it for CSS copying. * landing: scaffold Landing component and mount under layout: landing * landing: add design tokens, base CSS, font imports * landing: add InstallBlock (Section 08 · Jack in) * landing: add WordmarkFooter * landing: add PillCards (Section 03) * landing: add TabbedBuilder component * landing: add ApproachCards (Section 04) with TabbedBuilder * landing: add CastRoster (Section 05) * landing: add CompositionMachine (Section 06) * landing: add FocusCallout inside Section 06 * landing: add VocabularyDictionary (Section 02) scroll-driven * landing: add DailyLoop (Section 07) * landing: add rainEngine (ported from src/tui.rs) with unit tests * landing: add DigitalRain React component wrapping rainEngine * landing: add CodePanel with tabbed typing animations * landing: add HeroStage + HeroContent, assemble full page * landing: remove duplicate .landing-btn-primary rule from hero block * landing: a11y polish (buttons + focus styles), rAF cleanup, reduced-motion CSS * landing: inset focus outline on voc items (avoid overflow-hidden clip) * landing: final a11y polish — unnest hero section, guard window in jumpTo * landing: fix CSS delivery + layout chrome - Move global CSS from docs/pages/_root.css (Vocs ignores) to docs/styles.css (the file Vocs actually loads via virtual:styles). Old _root.css deleted. - Reorder @import before non-@import rules so they aren't invalidated. - Set showTopNav/showLogo/showSidebar/showOutline/showAiCta to false in index.mdx frontmatter — Vocs defaults these to true regardless of layout. - Override max-width on .vocs_DocsLayout_content when data-layout is landing so the page renders full-bleed. * landing: also zero .vocs_Content max-width + padding for full-bleed The Vocs <article class="vocs_Content"> wrapper sits inside .vocs_DocsLayout_content and has its own max-width cap plus horizontal padding, so overriding DocsLayout_content alone still left the landing boxed. Extend the override to vocs_Content too. * landing: load Google Fonts at runtime + fix Docs CTA href - Runtime font injection in Landing.tsx. The CSS @import url() for Google Fonts was stripped by Tailwind v4's bundler, so neither Inter (beyond fallback) nor Fraunces was actually reaching the browser. Injecting the link tags from useEffect guarantees the fonts actually load (Inter 400-900, JetBrains Mono 400-600, Fraunces 400-700). - Dead @import url() removed from styles.css (it was silently being dropped by the bundler anyway). - Read the Docs CTA in InstallBlock now uses /getting-started/why relative link instead of pointing to its own hostname. * landing: hide Vocs footer on landing + WordmarkFooter flex layout * landing: fix Vocs cascade + shell width + relative links * landing: align OK columns in terminal output blocks * landing: denied-state code inherits font + exile column alignment * landing: exile frame — one more space before OK for agent lines * docs: apply dark product theme + shared font loader - Add theme block in vocs.config.ts with dark colorScheme, #00ff41 accentColor, and Inter / JetBrains Mono font families. Overrides vocs color tokens (background, text, border, heading) to match the landing palette (--landing-bg = #0a0b0a, etc). - Move runtime font-link injection from Landing.tsx to a shared docs/layout.tsx consumer component, so fonts load on every page rather than only the landing. - Landing.tsx no longer needs to inject fonts (picked up by layout). * docs: deeper chrome theming — mono nav + green hairline sidebar headers * docs: neutral inline-code chip + terminal-like code block bg * docs: bump Vocs fontWeight tokens (300->400 regular, 500->600 semibold) * docs: code blocks as framed terminal cards * docs: scope inline-code bg + reset Ask-in-ChatGPT button styling * docs: switch to Tempo-inspired neutral look for docs chrome * docs: adopt Tempo's Radix color ramps + semantic tokens * docs: Tempo 1:1 — single light-dark() rule, no theme config Matches tempoxyz/docs approach as closely as Vocs 1.4.1 allows: - Remove the 'theme' key from vocs.config.ts entirely (Tempo has none). All Vocs chrome colors are mapped to Radix gray tokens via CSS in docs-theme.css using the light-dark() function, so a single declaration covers both modes. - Mirror Tempo's src/pages/_root.css structure in docs/styles.css: @import 'tailwindcss' important, @source './', the @Utility scrollbar-* blocks, [data-v-logo] img sizing, and the @custom-variant dark selector (broadened to match both Vocs's .dark class AND the inline color-scheme style Tempo uses). - Bridge Vocs's .dark class toggle to CSS color-scheme so the light-dark() tokens resolve correctly without injecting a script. - Use :root, :root.dark selectors for the Vocs overrides so they match Vocs's internal specificity (Vocs uses :root.dark in dark mode — plain :root loses the cascade battle). Monochrome accent (black-on-light, white-on-dark) matches Tempo's branding choice. Landing page is untouched — scoped by .landing-root and data-layout='landing'. * docs: default-to-dark init script + more visible theme toggle * docs: Tempo-style outline indicator + Ask AI label * docs: fix outline double-border + match Tempo indicator behavior 1:1 --------- Signed-off-by: Alexey Zhokhov <alexey@zhokhov.com> Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ships two connected pieces:
/— cyberpunk-inspired design, digital-rain hero, 8-section scroll-driven flow from problem to install.light-dark()auto-switching, OS fonts, pill radii, animated outline indicator. Defaults to dark; system/light/dark toggle in the sidebar.Landing and docs share CSS tokens but are visually distinct: the landing keeps its brand colors (neon green on deep black, Inter + Fraunces + JetBrains Mono), while the docs are calm and editorial with monochrome accents and system fonts.
Landing page (8 sections)
src/tui.rs), tagline, tabbed CodePanel typing outload/hardline/ejectscriptsthe-architectvs cast your own (tabbedjackin.agent.toml+ Dockerfile)load→clone→hardline→eject→exile) with full terminal outputDesign language
#00ff41only on "Operator", brand mark, terminal prompts, success checks. Everything else neutralsrc/tui.rs'sdigital_rain(same char pool, age→color gradient, 35ms frame rate). Pure-logic engine has 5 passing unit testsImplementation
docs/components/landing/docs/components/landing/styles.csswith design tokensdocs/layout.tsx(Google Fonts@import url(...)gets stripped by the bundler)layout: landingfrontmatter +showTopNav/showLogo/showSidebar/showOutline/showAiCta: falsefor a full-bleed canvas.vocs_DocsLayout_content+.vocs_Contentwidth caps overridden so the landing renders edge-to-edgeDocs theme
Tempo-inspired (
https://docs.tempo.xyz):docs/tempo-tokens.css(verbatim copy of Tempo's@themeblock — gray, grayA, blackA, whiteA, blue, amber, green, red, violet, jade palettes withlight-dark()auto-switching)--background-color-*,--border-color-*,--text-color-*--height-button: 42px,--spacing-dialog: 360px,--radius-default: calc(infinity * 1px)pill radii:root, :root.darkrules (singlelight-dark()declaration covers both modes)Theme mode (light / dark / system)
public/default-dark.jsinit scriptlocalStorage['vocs.theme']Tempo-style outline (right "On this page" rail)
docs/layout.tsx— slides + resizes to the active<li>withcubic-bezier(0, 0, 0.2, 1)150ms easing<li>.offsetTop/offsetHeightfor stable coordinate-space measurementsTest plan
bun run buildclean (11–13s)bun test— 5/5 rainEngine tests pass#fcfcfc, dark-mode bg#191919(verified via Playwright computed styles)/getting-started/quickstart).landing-root+[data-layout="landing"])