Repository navigation
Conversation
There was a problem hiding this comment.
Pull request overview
Implements the initial end-to-end “check-in” extension flow: a React/Tailwind side panel UI, a dedicated capture popup window for camera permission + recording, and a MV3 background service worker to orchestrate alarms/notifications and persist the check-in cycle state.
Changes:
- Adds Vite multi-entry build for side panel (index.html), background service worker, and capture popup page.
- Implements UI state machine components (idle/pending/ready/player/error + capture/confirm/countdown/skeleton) and shared panel layout primitives.
- Adds background orchestration (alarms, notifications, cycle storage) plus camera capture + local download handoff.
Reviewed changes
Copilot reviewed 35 out of 43 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Configures Vite/Rollup multi-entry build for side panel, background, and capture pages. |
| src/style.css | Adds Tailwind v4 theme tokens and keyframe animations used by the UI. |
| src/panel/states/SkeletonState.jsx | Skeleton/loading state UI. |
| src/panel/states/ReadyState.jsx | “Reel ready” UI with play/later actions. |
| src/panel/states/PlayerState.jsx | Reel player UI (video or placeholder + progress). |
| src/panel/states/PendingState.jsx | Pending/processing UI variants based on clip/job status. |
| src/panel/states/IdleState.jsx | Entry prompt UI (“Yes, check in” / “Not now”). |
| src/panel/states/ErrorState.jsx | Generic error UI for failed cycles. |
| src/panel/states/CountdownState.jsx | Countdown/progress-driving state for post-confirmation flow. |
| src/panel/states/ConfirmState.jsx | Confirmation step before handing off the captured clip. |
| src/panel/states/CaptureState.jsx | Recording UI showing the live video element and countdown text. |
| src/panel/SidePanel.jsx | Main side panel state resolution and message dispatch to background. |
| src/main.jsx | Side panel React entrypoint. |
| src/lib/constants.js | Centralizes extension constants (states, message types, timings, routes). |
| src/lib/chromeApi.js | Wraps chrome.* APIs with dev-mode fallbacks + helpers. |
| src/lib/checkIn.js | Builds payload and saves captured clip via chrome.downloads. |
| src/hooks/useCycleStatus.js | React hook syncing cycle state with chrome.storage.local (or dev fallback). |
| src/hooks/useCameraCapture.js | Hook for getUserMedia + MediaRecorder flow and cleanup. |
| src/components/ui/TagPill.jsx | Small UI primitive for status labels. |
| src/components/ui/ProgressBar.jsx | UI primitive for percent progress. |
| src/components/ui/Button.jsx | Button component with variants. |
| src/components/ui/BreathingDot.jsx | Animated indicator component keyed by state. |
| src/components/layout/SprocketRail.jsx | Left-side “film sprocket” rail layout element. |
| src/components/layout/PanelShell.jsx | Panel frame/layout wrapper for side panel and capture window. |
| src/components/layout/PanelHeader.jsx | Shared header with optional progress bar. |
| src/capture/main.jsx | Capture popup React entrypoint. |
| src/capture/CaptureWindow.jsx | Capture popup state machine (skeleton→record→confirm→countdown→close). |
| src/capture/capture.html | Capture popup HTML entrypoint. |
| src/background/index.js | MV3 service worker orchestration: alarms, notifications, window management, cycle persistence. |
| src/App.jsx | App wrapper rendering the side panel. |
| public/manifest.json | MV3 manifest (side panel, permissions, minimum Chrome version, host permissions). |
| package.json | Adds React/Vite/Tailwind dependencies and scripts. |
| package-lock.json | Locks dependency graph. |
| MINDSTREAM_PROJECT_SUMMARY.md | Adds “single source of truth” project summary and flow documentation. |
| index.html | Side panel HTML entrypoint. |
| eslint.config.js | ESLint flat config for JS/JSX + React hooks/refresh. |
| .gitignore | Standard ignores for Node/Vite outputs and tooling artifacts. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+32
to
+33
| return () => clearInterval(interval); | ||
| }, [onComplete, onProgress]); |
Comment on lines
+8
to
+10
| import { useCameraCapture } from "../hooks/useCameraCapture.js"; | ||
| import { useCycleStatus } from "../hooks/useCycleStatus.js"; | ||
| import { saveCapture } from "../lib/checkIn.js"; |
Comment on lines
+24
to
+26
| const camera = useCameraCapture(); | ||
| const { setCycle } = useCycleStatus(); | ||
| const startedRef = useRef(false); |
| export default function PlayerState({ reelUrl, caption, onDone }) { | ||
| return ( | ||
| <div className="flex flex-col animate-fadein"> | ||
| <div className="w-full aspect-9/13 rounded-[14px] border border-hairline bg-[linear-gradient(200deg,#233A38,#101615)] relative overflow-hidden flex flex-col justify-end mb-3.5"> |
Comment on lines
+28
to
+31
| 2. **Consent & Skeleton State:** If the user clicks/accepts, the side panel opens and immediately shows a **skeleton loader** while the browser's native camera-permission dialog is pending. (That permission prompt is controlled by the browser, not the extension — the skeleton just covers the wait until the user responds to it.) | ||
| 3. **The 3-Second Snap:** Once permission is granted, the panel shows a **live capture indicator** (the outgoing clip/preview) for ~3 seconds while `getUserMedia` records. | ||
| 4. **Contextual Enrichment:** Alongside the clip, the extension packages local telemetry — active tab domain/category, time of day, session duration, idle time. | ||
| 5. **Hand-off & Close:** The panel POSTs the payload, then shows an **in-panel countdown modal** — _"Your reel will be generated soon... 3, 2, 1"_ — then closes the side panel via `chrome.sidePanel.close({ tabId })` (Chrome 141+; see §8 for the version caveat and fallback). |
Comment on lines
+160
to
+183
| async function handlePulseTick() { | ||
| const cycle = await getCycle(); | ||
|
|
||
| switch (cycle.cycle_status) { | ||
| case CYCLE_STATUS.PENDING: | ||
| // Already in flight — do nothing, let the alarm fire again later. | ||
| return; | ||
|
|
||
| case CYCLE_STATUS.READY: | ||
| // Finished but unviewed — nudge again rather than starting a new cycle. | ||
| createReadyNotification(); | ||
| return; | ||
|
|
||
| case CYCLE_STATUS.IDLE: | ||
| case CYCLE_STATUS.FAILED: | ||
| default: | ||
| chrome.notifications.create(NOTIFICATION_IDS.PULSE_PROMPT, { | ||
| type: "basic", | ||
| iconUrl: "icons/icon-128.png", | ||
| title: "Quick check-in?", | ||
| message: "Want a quick snap check-in to reset your focus?", | ||
| priority: 1, | ||
| }); | ||
| } |
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.