Skip to content

feat(desktop): spinner startup surface and first-launch GitHub star onboarding - #5749

Merged
lidge-jun merged 2 commits into
devfrom
devin/1790255318-tauri-spinner-star-onboarding
Sep 24, 2026
Merged

lidge-jun merged 2 commits into
devfrom
devin/1790255318-tauri-spinner-star-onboarding

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

1. Tauri startup surface (desktop/ui/index.html) → spinner, in the dashboard's design language

  • Reuses the GUI tokens (monochrome light-dark() palette, OpenAI Sans/Pretendard stack, pill buttons, hairline cards) and the brand mask (desktop/ui/logo.png, copied from gui/public/logo.png).
  • Layout: logo + wordmark → spinner → headline/detail → thin progress bar + n / total → collapsed Details disclosure holding the existing phase checklist (active row gets a mini spinner).
  • One setSurface(state) (running | consent | failed | idle) drives spinner / progress / status mark, so the spinner never keeps turning over a failure or the takeover question. Failure auto-opens Details. prefers-reduced-motion swaps the spin for a slow pulse.
  • Shell contract unchanged: same commands/events, nonce'd inline script, #failure[hidden] rule, 4 reportPageFailure( occurrences, bounded handshake — tests/clients/desktop-startup-surface.test.ts passes untouched.

2. First-launch star onboarding (gui/src/components/desktop-star-onboarding.tsx)

  • Shown once, only inside the desktop shell (isDesktopShell()), only against the local runtime (targetsSettled && !targets.connected), ~1.2s after the dashboard paints. Persisted with localStorage["ocx-desktop-star-onboarding"].
  • Reads the existing GET /api/github/star:
    • starred → never shown, marked seen.
    • not-starred (user's gh signed in) → primary button calls the existing POST /api/github/star (one click = consent), shows a "Thanks" state, and pushes starred into the sidebar's sidebar-star:<base> resource so the sidebar orb updates right away. A secondary "Open the GitHub page instead" link is offered too.
    • unauthenticated / GET error → primary button opens https://github.com/lidge-jun/opencodex in the system browser (the shell's navigation guard hands external URLs to the opener).
    • POST failure → the dialog stays open with an explanation and an "Open the GitHub page" button; nothing is marked seen until the user picks an action.
  • If enabled turns false (e.g. switching to a remote target) the dialog is unmounted without being marked seen.
  • Styles live in gui/src/styles/star-onboarding.css (keeps styles.css under its file-size ratchet cap), with an explicit reduced-motion rule.
  • 12 new onboarding.star.* keys, translated for all 10 locales.

On gh integration (as asked): I did not add a new gh flow. The repo already has a guarded gh-backed star route (host pinned to github.com, trusted executable resolution, output never returned, marked session-only / "must never gain a CLI verb" in the route registry). The onboarding just reuses it when gh is already signed in and otherwise falls back to the browser. I don't recommend having the app run gh auth login for this: it opens a device-code/browser OAuth flow and asks for repo-level scopes just to leave a star, which is a much bigger ask than the browser page (where the user is almost always signed in already).

Verification

  • bun test tests/clients/desktop-startup-surface.test.ts (21 pass)
  • cd gui && bun test tests — full GUI suite passes, including new tests/desktop-star-onboarding.test.tsx (first launch asks → POST only on click; dismiss remembered; already starred never asked; signed-out gh → browser path; failed POST keeps the dialog open; disabled prompt not shown; plain browser tab never asked), plus locale parity.
  • bun run typecheck, bun run privacy:scan, bun run structure:check, cd gui && bun run lint && bun run lint:i18n
  • Screenshots below: the startup page rendered in headless Chrome with a mocked __TAURI__ bridge, and the modal from the Vite dev GUI with a desktop UA. Not run in a real Tauri build.

Startup — running (light / dark):
boot running
boot running dark

Startup — failure / takeover consent:
boot failed
boot consent

Star onboarding (light / dark, browser fallback path):
star light
star dark

Checklist

  • Scope stays focused and avoids unrelated cleanup.
  • Docs or release notes were updated when needed.
  • Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults. (No new routes; the star write happens only on an explicit click, through the existing session-only route.)

Link to Devin session: https://app.devin.ai/sessions/2111e048133c47e391562c8e1f8ab36a
Open in Devin Desktop: https://app.devin.ai/desktop/session/2111e048133c47e391562c8e1f8ab36a?variant=devin

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

  • Required local validation passed; commands, results, and any full-suite exception are documented.

  • I pushed my PR to a recent dev commit (at most 10 behind; a maintainer may still ask for the exact tip before merge).

  • I resolved all correct Codex and CodeRabbit findings.

  • My PR is ready for review.

@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

  • Disable automatic comment, CI, and merge conflict monitoring

@coderabbitai

coderabbitai Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository: lidge-jun/opencodex/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Advanced

Run ID: f6bad2ea-2478-4f09-abbf-77994fff08e6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown
Contributor

✅ Deterministic PR hygiene checks passed.

@github-actions github-actions Bot added the enhancement New feature or request label Sep 24, 2026
@github-actions github-actions Bot changed the title feat(desktop): spinner startup surface and first-launch GitHub star onboarding [WRONG BRANCH] feat(desktop): spinner startup surface and first-launch GitHub star onboarding Sep 24, 2026
@github-actions

github-actions Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

⏳ DRAFT

  • review readiness checklist open (0/4 boxes ticked).

What to do

  • Tick all four boxes in the PR description once you're done (currently 0/4).

Review readiness checklist

  • ⬜ Required local validation passed; commands, results, and any full-suite exception are documented.
  • ⬜ I pushed my PR to a recent dev commit (at most 10 behind; a maintainer may still ask for the exact tip before merge).
  • ⬜ I resolved all correct Codex and CodeRabbit findings.
  • ⬜ My PR is ready for review.

0/4 boxes ticked.

Automatic draft conversion failed. Please convert this pull request to a draft manually until every box above is ticked.

@github-actions
github-actions Bot marked this pull request as draft September 24, 2026 13:16
…nboarding

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@devin-ai-integration
devin-ai-integration Bot force-pushed the devin/1790255318-tauri-spinner-star-onboarding branch from ebdc2fe to fc0336a Compare September 24, 2026 13:18
@devin-ai-integration
devin-ai-integration Bot changed the base branch from main to dev September 24, 2026 13:18
@lidge-jun

Copy link
Copy Markdown
Owner

리뷰 · 우선순위 46 / 80

이 PR은 데스크톱 앱이 켜질 때 보이는 시작 화면을 다시 그리고, 대시보드가 처음 열리면 GitHub 스타를 한 번 부탁하는 창을 더합니다.

시작 화면은 로고, 돌아가는 원, 얇은 진행 막대, 지금 단계 / 전체 숫자를 보여 줍니다. 단계 목록은 Details 안에 접혀 있습니다. 실패하거나 사용자에게 물어야 하면 원을 멈추고, 실패면 Details를 엽니다. 셸이 주고받는 명령 이름은 그대로라서, 시작 화면 테스트는 문장을 고치지 않고 통과한다고 적혀 있습니다.

스타 창은 데스크톱 앱 안에서, 로컬 런타임일 때만, 처음 한 번 뜹니다. 이미 스타한 설치는 창을 보지 않습니다. gh에 로그인돼 있으면 버튼을 눌렀을 때만 기존 POST /api/github/star로 스타합니다. 로그인이 없거나 그 요청이 실패하면 github.com 페이지를 시스템 브라우저로 엽니다. 셸은 https 이동을 막고 브라우저로 넘기므로, 대시보드 자체가 GitHub로 바뀌지는 않습니다.

지금 base는 dev입니다. 같은 일을 하는 다른 열린 PR은 없습니다.

desktop/ui/index.html의 setSurface - 돌아가는 원, 진행 막대, 실패 표시를 상태 하나로 같이 끕니다. 실패인데 원이 계속 도는 경우는 이 코드에서 안 보입니다.

gui/src/components/desktop-star-onboarding.tsx의 starWithGh - 스타에 실패하면 창을 바로 닫고 브라우저만 엽니다. 그 순간 localStorage에 이미 본 것으로 저장됩니다. 브라우저 창이 뒤에 가려지면, 사용자는 실패한 줄 모르고 앱은 다시 묻지 않습니다.

같은 파일의 DesktopStarOnboarding - enabled가 꺼져도, 이미 떠 있는 창은 닫히지 않습니다. 로컬 화면에서 원격으로 바꾼 뒤에도 창이 남을 수 있습니다.

gui/src/styles.css의 .star-onboarding - 시작 화면은 동작 줄이기 설정을 지키는데, 이 창이 나타날 때는 애니메이션을 그대로 둡니다.

desktop/ui/logo.png - 대시보드 로고를 복사한 파일입니다. 원본 로고가 바뀌어도 이쪽은 혼자 남지 않게 같이 봐야 합니다.

메인테이너의 판단이 필요한 지점

제목 앞에 [WRONG BRANCH]가 남아 있고, PR은 draft입니다. 게이트 댓글은 타깃이 main이라고 적습니다. GitHub API로 보면 base는 dev입니다. 타깃이 정말 dev로 바뀌었는지, 제목 앞글을 지워도 되는지는 사람이 한 번 확인해야 합니다. 설명의 준비 체크 4칸은 아직 비어 있습니다.

첫 문장이 "마음에 드시나요?"입니다. 앱을 써 보기도 전에 스타를 부탁합니다. 이 부탁을 첫 실행에 둘지, 몇 번 쓴 뒤로 미룰지는 제품 선택입니다. gh로 스타하는 길은 새로 만들지 않았고, 클릭 전에는 스타하지 않습니다.

너의 추천

base가 dev인 것은 맞으니, 브랜치 때문에 닫을 일은 아닙니다. 닫을 중복 PR도 없습니다. draft이고 체크리스트가 비어 있으니 지금은 머지하지 않으면 됩니다. 스타가 실패했을 때는 창을 바로 닫지 말고, 브라우저로 넘긴다는 말을 보여 준 다음에 본 것으로 저장하는 쪽이 안전합니다. 동작 줄이기도 시작 화면과 같이 맞추면 됩니다. 스타 부탁을 첫 화면에 둘지는 메인테이너가 정하면 됩니다.

이 댓글은 grok-bot이 작성했습니다

@github-actions github-actions Bot changed the title [WRONG BRANCH] feat(desktop): spinner startup surface and first-launch GitHub star onboarding feat(desktop): spinner startup surface and first-launch GitHub star onboarding Sep 24, 2026
…lit styles

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

@lidge-jun 리뷰(#5814926359) 반영했습니다 (caa4a05):

  • gh 스타 실패: 창을 바로 닫거나 브라우저를 열지 않고, 창 안에 "gh로 스타하지 못했어요, GitHub 페이지에서 눌러 주세요"(onboarding.star.failed, 10개 언어)를 보여 주며 주 버튼이 "GitHub 페이지로 열기"로 바뀝니다. 사용자가 그 버튼이나 "나중에"를 눌렀을 때만 본 것으로 저장합니다. 테스트 추가.
  • enabled가 꺼진 경우: 떠 있던 창도 렌더링하지 않고, 본 것으로 저장하지도 않습니다(로컬로 돌아오면 다시 뜸). 테스트 추가.
  • 동작 줄이기: 전역 @media (prefers-reduced-motion: reduce) { * { animation: none !important } }가 이미 적용되지만, 스타일을 gui/src/styles/star-onboarding.css로 옮기면서 명시 규칙도 넣었습니다(styles.css 파일 크기 ratchet CI 실패도 이걸로 해결).
  • desktop/ui/logo.png 복사본: Tauri frontendDist가 desktop/ui라 GUI 번들 자산을 참조할 수 없어 복사했습니다. 원본 로고 변경 시 같이 바꿔야 하는 건 맞습니다.
  • base / 제목: base를 dev로 바꾸고 브랜치를 최신 dev 위로 옮겼습니다. [WRONG BRANCH] 접두어는 게이트가 다음 실행에서 지웁니다.
  • 첫 실행 타이밍: 제품 판단이라 그대로 두었습니다. N회 실행 후로 미루는 것도 간단합니다.

@lidge-jun
lidge-jun marked this pull request as ready for review September 24, 2026 14:55
@lidge-jun
lidge-jun merged commit e1927bd into dev Sep 24, 2026
41 checks passed
@lidge-jun
lidge-jun deleted the devin/1790255318-tauri-spinner-star-onboarding branch September 24, 2026 14:55
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-09-24T15:00:11.271410Z caa4a05 Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: caa4a05b25

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread desktop/ui/index.html
#failure { margin-top: 1.25rem; display: grid; gap: .75rem; }
:root {
color-scheme: light dark;
--bg: light-dark(#ffffff, #212121);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add fallbacks for light-dark() on macOS 13

The desktop bundle supports macOS 13, whose original WKWebView predates CSS light-dark(). Because these variables have no preceding fallback values, every consuming declaration becomes invalid there: the logo mask and spinner lose their colors, progress indicators disappear, and the consent/failure cards and buttons lose most of their visual treatment. Keep concrete light defaults before these declarations and use prefers-color-scheme for legacy dark mode, or otherwise retain the previous compatible palette.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant