feat: add Instance tab for small-team sharing flows #263#294
feat: add Instance tab for small-team sharing flows #263#294vipu2404-cyber wants to merge 1 commit into
Conversation
github-actions
Bot
added
the
needs linked issue
📝 WalkthroughWalkthroughThis PR adds a new Next.js page component for shared instance administration. The component implements a multi-view UI with local React state managing join/create instance flows, pending request submission, and an admin dashboard for approving incoming requests and viewing directory profiles. ChangesInstance Management Page
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
PR Context Summary
Suggested issue links
Use |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/app/instance/page.tsx`:
- Around line 203-205: The disconnect button's hover color (className on the
button that calls setCurrentView("no-instance-view")) uses hover:text-zinc-200
which becomes low-contrast in light mode; update the className to use
theme-specific hover classes such as hover:text-zinc-700
dark:hover:text-zinc-200 (or equivalent light/dark-friendly tokens) so the label
remains readable in both themes while keeping the existing layout and onClick
behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0f6a44ac-416c-421f-a0bd-be2b0bd07782
📒 Files selected for processing (1)
frontend/src/app/instance/page.tsx
| <button onClick={() => setCurrentView("no-instance-view")} className="mt-8 text-xs text-zinc-400 hover:text-zinc-200 flex items-center gap-1 transition-colors"> | ||
| ← Disconnect Dashboard Session | ||
| </button> |
There was a problem hiding this comment.
Fix hover text contrast on light mode disconnect control.
hover:text-zinc-200 makes the label very low-contrast on light backgrounds when the control is interacted with. Use theme-specific hover colors so it stays readable in both themes.
Suggested patch
- <button onClick={() => setCurrentView("no-instance-view")} className="mt-8 text-xs text-zinc-400 hover:text-zinc-200 flex items-center gap-1 transition-colors">
+ <button onClick={() => setCurrentView("no-instance-view")} className="mt-8 text-xs text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 flex items-center gap-1 transition-colors">As per coding guidelines, "Frontend text must be visible in both dark and light mode when UI is touched".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button onClick={() => setCurrentView("no-instance-view")} className="mt-8 text-xs text-zinc-400 hover:text-zinc-200 flex items-center gap-1 transition-colors"> | |
| ← Disconnect Dashboard Session | |
| </button> | |
| <button onClick={() => setCurrentView("no-instance-view")} className="mt-8 text-xs text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 flex items-center gap-1 transition-colors"> | |
| ← Disconnect Dashboard Session | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/app/instance/page.tsx` around lines 203 - 205, The disconnect
button's hover color (className on the button that calls
setCurrentView("no-instance-view")) uses hover:text-zinc-200 which becomes
low-contrast in light mode; update the className to use theme-specific hover
classes such as hover:text-zinc-700 dark:hover:text-zinc-200 (or equivalent
light/dark-friendly tokens) so the label remains readable in both themes while
keeping the existing layout and onClick behavior.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| )} | ||
|
|
||
| {currentView === "error" && ( | ||
| <div className="p-4 border rounded-xl border-red-200 bg-red-50 text-red-900 dark:border-red-950/20 dark:text-red-200 dark:border-red-900/50 text-sm"> |
There was a problem hiding this comment.
🟡 Medium instance/page.tsx:59
The error state div on line 59 uses dark:border-red-950/20 twice instead of dark:bg-red-950/20 for the background. In dark mode, the error box renders with no background color, making the text unreadable against the dark page background. Change the first dark:border-red-950/20 to dark:bg-red-950/20 to match the warning box pattern on line 42.
- <div className="p-4 border rounded-xl border-red-200 bg-red-50 text-red-900 dark:border-red-950/20 dark:text-red-200 dark:border-red-900/50 text-sm">
+ <div className="p-4 border rounded-xl border-red-200 bg-red-50 text-red-900 dark:bg-red-950/20 dark:text-red-200 dark:border-red-900/50 text-sm">🤖 Copy this AI Prompt to have your agent fix this:
In file frontend/src/app/instance/page.tsx around line 59:
The error state div on line 59 uses `dark:border-red-950/20` twice instead of `dark:bg-red-950/20` for the background. In dark mode, the error box renders with no background color, making the text unreadable against the dark page background. Change the first `dark:border-red-950/20` to `dark:bg-red-950/20` to match the warning box pattern on line 42.
Evidence trail:
frontend/src/app/instance/page.tsx line 59 at REVIEWED_COMMIT: dark-mode classes are `dark:border-red-950/20 dark:text-red-200 dark:border-red-900/50` — two `dark:border-*` and no `dark:bg-*`. Compare line 42: `dark:bg-amber-950/20 dark:text-amber-200 dark:border-amber-900/50` — correct pattern with `dark:bg-*`.
ApprovabilityVerdict: Needs human review 1 blocking correctness issue found. This PR adds a new Instance Management feature page with multiple user-facing workflows (joining instances, creating admin instances, approval dashboard). New feature additions introducing new components and workflows warrant human review regardless of current implementation scope. You can customize Macroscope's approvability policy. Learn more. |
1 participant
Hi @Abhash-Chakraborty,
I have added the frontend UI for the opt-in shared instance management tab as requested in issue #263.
What was done:
instancepage route underfrontend/src/app/instance/page.tsx.Please review it! Thanks!
Summary by CodeRabbit
Release Notes