Feature/extension reflow - #7
Merged
Merged
Conversation
…tification interactivity
There was a problem hiding this comment.
Pull request overview
This PR refactors the MindStream extension UI and supporting infrastructure to a new achromatic design system, introduces a first-run onboarding flow, and restructures the capture + generation pipeline across the side panel, a dedicated capture window, and the local backend.
Changes:
- Added an onboarding wizard (with Motion shared-layout logo transition) and a one-time “onboarding complete” transition screen.
- Split camera capture into a dedicated popup window with a new
useCameraCapturehook and updated cycle/settings persistence viachrome.storage.localwrappers. - Updated the local backend to support render presets, health/key reporting, job cancellation, and improved job polling/notification handling.
Reviewed changes
Copilot reviewed 51 out of 85 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Adds multi-entry build outputs for extension pages (panel/background/capture). |
| src/style.css | Replaces Tailwind theme tokens with a new achromatic, shadcn-aligned palette and animation tokens. |
| src/panel/states/SkeletonState.jsx | Tweaks skeleton UI spacing; still contains legacy token usage (see comments). |
| src/panel/states/ReadyState.jsx | Redesigns “ready” UI with thumbnail, Lucide icons, and dismiss affordance. |
| src/panel/states/PlayerState.jsx | Replaces prior layout with a full-bleed video player + auto-hiding overlay. |
| src/panel/states/PendingState.jsx | Consolidates pending sub-states into a unified step list UI. |
| src/panel/states/OnboardingState.jsx | Adds multi-step onboarding wizard with backend/key checks and Motion transitions. |
| src/panel/states/OnboardingComplete.jsx | Adds a timed transition screen after onboarding completes. |
| src/panel/states/IdleState.jsx | Redesigns idle state UI with new typography and CTA layout. |
| src/panel/states/ErrorState.jsx | Redesigns error state and adds specialized backend-not-running messaging. |
| src/panel/states/CountdownState.jsx | Adds a success-style confirmation state and an explicit “Okay” CTA. |
| src/panel/states/ConfirmState.jsx | Updates confirm UI styling for captured clip preview. |
| src/panel/states/CaptureState.jsx | Updates capture UI and mirroring; still contains legacy token usage (see comments). |
| src/panel/SidePanel.jsx | Integrates onboarding gating, settings hook, and reel dismissal reset logic. |
| src/main.jsx | Adds the Vite/React entrypoint for the side panel app. |
| src/lib/constants.js | Adds SETTINGS storage key, presets, default settings, and new API routes. |
| src/lib/chromeApi.js | Introduces storage wrappers + dev-mode fallbacks, plus safer side panel APIs. |
| src/lib/checkIn.js | Extends check-in payload to include preset + user_name derived from settings. |
| src/hooks/useSettings.js | New hook for persistent settings with subscription updates. |
| src/hooks/useCycleStatus.js | New hook for persistent cycle status with subscription updates. |
| src/hooks/useCameraCapture.js | New hook managing getUserMedia + recording lifecycle and cleanup. |
| src/components/ui/TagPill.jsx | Removes TagPill component (no longer used in updated UI). |
| src/components/ui/ProgressBar.jsx | Adds ProgressBar component (note: styling token issues flagged). |
| src/components/ui/Logo.jsx | Adds Motion-based Logo component for shared-layout transitions (note: sizing issue flagged). |
| src/components/ui/Button.jsx | Redesigns Button variants and base styling. |
| src/components/ui/BreathingDot.jsx | Simplifies dot durations and updates styling to new token set. |
| src/components/layout/SprocketRail.jsx | Removes SprocketRail layout element from the panel shell. |
| src/components/layout/PanelShell.jsx | Updates overall panel layout and adds a “player” full-screen branch. |
| src/components/layout/PanelHeader.jsx | Adds Motion, optional Logo, step indicator, and new progress bar style. |
| src/capture/main.jsx | Adds the Vite/React entrypoint for the capture popup window. |
| src/capture/CaptureWindow.jsx | Implements the capture window flow and background messaging. |
| src/capture/capture.html | Adds capture window HTML shell. |
| src/background/index.js | Improves alarm lifecycle, notifications, and adds an active polling loop + cancel handling. |
| src/App.jsx | Adds the root React component (SidePanel wrapper). |
| README.md | Adds minimal repository README header. |
| public/manifest.json | Updates icons and reformats permissions. |
| package.json | Adds lucide-react and motion dependencies. |
| package-lock.json | Locks new dependencies and updates transitive package versions. |
| opencode.json | Adds remote Motion MCP configuration for opencode. |
| MINDSTREAM_PROJECT_SUMMARY.md | Updates compositor references from MoviePy to MovieLite/FFmpeg. |
| index.html | Adds Vite app HTML shell for local/dev rendering. |
| IMPLEMENTATION_SUMMARY.md | Documents the onboarding logo transition approach and testing steps. |
| eslint.config.js | Adds ESLint flat config for JS/JSX + React hooks/refresh rules. |
| CardReference.jsx | Adds a reference Motion example file. |
| backend/test.sh | Updates backend test script messaging and documents preset usage. |
| backend/test_presets.py | Adds backend unit tests for preset resolution logic. |
| backend/server.js | Adds .env loading, presets, cancellation endpoint, health endpoint, and single-active-job enforcement. |
| backend/requirements.txt | Defines Python deps (MovieLite stack + genai + dotenv + tqdm). |
| backend/README.md | Documents backend render presets and how they map to behavior. |
| backend/package.json | Adds backend npm package manifest and start script. |
| backend/output/reels/.gitkeep | Keeps output directory in git. |
| backend/output/audio/sample-job-001.srt | Removes sample SRT artifact. |
| backend/output/audio/.gitkeep | Keeps audio output directory in git. |
| backend/movielite_docs/api.md | Adds MovieLite API reference documentation into repo. |
| backend/movielite_docs/advanced.md | Adds MovieLite advanced usage guide into repo. |
| backend/data/sample_emotion_result.json | Updates sample emotion label + user_name in sample data. |
| backend/benchmark_render_presets.py | Adds a systemd-run based benchmark harness for render presets (bug flagged). |
| backend/assets/backgrounds/.gitkeep | Keeps backgrounds asset directory in git. |
| backend/assets/audio/README.md | Adds instructions/prompts for required ambient audio assets. |
| backend/assets/audio/.gitkeep | Keeps audio asset directory in git. |
| backend/.gitignore | Adds calibration output file to ignore list. |
| backend/.env.example | Adds example environment file listing required/optional keys. |
| .opencode/skills/motion/transition-preview/index.md | Adds Motion skill content for transition preview. |
| .opencode/skills/motion/SKILL.md | Adds Motion skill description/config. |
| .opencode/skills/motion/performance-audit/index.md | Adds Motion skill content for performance audit guidance. |
| .opencode/skills/motion/css-spring/index.md | Adds Motion skill content for CSS spring generation. |
| .opencode/skills/motion/codex/index.md | Adds Motion skill content for docs/examples search guidance. |
| .opencode/skills/motion/best-practices/vue.md | Adds Motion best practices for Vue. |
| .opencode/skills/motion/best-practices/react.md | Adds Motion best practices for React. |
| .opencode/skills/motion/best-practices/motion.md | Adds Motion best practices for vanilla JS/HTML. |
| .opencode/skills/motion/best-practices/index.md | Adds Motion best practices index. |
| .opencode/skills/motion/best-practices/base-ui.md | Adds Motion best practices for Base UI integration. |
| .gitignore | Adds repo-wide ignore rules for node, dist, env files, python venv, and backend outputs. |
Suppressed comments (2)
src/panel/states/SkeletonState.jsx:8
- This shimmer line uses legacy theme tokens (
bg-panel-raised) and a removed animation utility (animate-shimmer). With the updated@themeinsrc/style.css, these utilities won’t resolve, so the skeleton shimmer will render incorrectly.
This issue also appears on line 15 of the same file.
src/panel/states/SkeletonState.jsx:19
- The main skeleton state still uses legacy Tailwind theme utilities (
text-fog(-dim),bg-panel-raised,border-hairline,animate-shimmer) that are no longer defined insrc/style.cssafter the token refactor. This will leave key UI elements unstyled (and the shimmer animation missing).
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+4
to
+7
| const sizeClasses = { | ||
| small: "w-6", | ||
| medium: "w-29", | ||
| }; |
Comment on lines
+21
to
+25
| <div className="font-mono text-[10.5px] tracking-[0.14em] uppercase text-coral mb-2 flex items-center gap-2"> | ||
| <div className="w-1.5 h-1.5 rounded-full bg-coral animate-blink" /> | ||
| Recording | ||
| </div> | ||
| <h1 className="text-[22px] font-bold leading-tight mb-2.5 tracking-[-0.01em]"> | ||
| <h1 className="text-[21px] font-bold leading-tight mb-3 tracking-[-0.02em]"> |
Comment on lines
+38
to
+42
| <div className="w-10 h-10 rounded-full bg-teal-soft border border-teal text-teal flex items-center justify-center mb-4"> | ||
| <svg width="14" height="12" viewBox="0 0 14 12" fill="none"> | ||
| <path d="M1.5 6L5.5 10L12.5 1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> | ||
| </svg> | ||
| </div> |
Comment on lines
+11
to
15
| <div className="font-mono text-[10.5px] tracking-[0.14em] uppercase text-teal mb-2"> | ||
| Got it | ||
| </div> | ||
| <h1 className="text-[22px] font-bold leading-tight mb-2.5 tracking-[-0.01em]"> | ||
| <h1 className="text-[21px] font-bold leading-tight mb-3 tracking-[-0.02em]"> | ||
| Use this one? |
Comment on lines
+40
to
45
| export const DEFAULT_SETTINGS = { | ||
| preset: GENERATION_PRESETS.NORMAL, | ||
| user_name: "Friend", | ||
| onboarding_complete: false, | ||
| onboarding_transition_shown: false, | ||
| }; |
Comment on lines
+55
to
+60
| from reel_generator import ReelGenerator | ||
|
|
||
| generator = ReelGenerator(preset=" ") | ||
| generator._spinner = lambda _: contextlib.nullcontext() | ||
| # Benchmark Linux scheduling without affinity: let the kernel place workers. | ||
| generator.preset_cfg["writer_processes"] = args.workers |
Comment on lines
+16
to
+23
| const eqIdx = trimmed.indexOf('='); | ||
| if (eqIdx > 0) { | ||
| const key = trimmed.slice(0, eqIdx).trim(); | ||
| const value = trimmed.slice(eqIdx + 1).trim().replace(/^["']|["']$/g, ''); | ||
| if (key && !process.env[key]) { | ||
| process.env[key] = value; | ||
| } | ||
| } |
Comment on lines
+15
to
+20
| <div | ||
| onClick={onPlay} | ||
| role="button" | ||
| tabIndex={0} | ||
| onKeyDown={(e) => e.key === "Enter" && onPlay()} | ||
| aria-label="Play your focus reset reel" |
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
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.
No description provided.