Add allowedHosts configuration for dev server tunnel preview by korpseluv · Pull Request #21 · korpseluv/osu-dash

korpseluv · 2026-01-02T14:01:51Z

Summary

/

Why

Why is this change needed?

Testing

npm run build
npm run typecheck
Manual check (screenshots optional)

Security / privacy

No secrets added
No new replay parsing/network behavior without opt-in
No new endpoints exposed in production unintentionally

Notes

Anything reviewers should know.

…gation

…s and improve synchronization

…rate graph hover functionality

…allback user

Copilot

Pull request overview

This pull request adds configuration for allowed hosts in the Vite dev server to support tunnel-based preview environments. However, the PR includes several additional unrelated changes that extend beyond the stated purpose, including favicon updates, tab navigation with URL hash support, SVG-based graph interaction improvements, accessibility enhancements, and UI styling refinements.

Key Changes:

Added allowedHosts configuration to Vite server settings with environment variable support
Implemented URL hash-based tab navigation with browser history integration
Enhanced graph interaction with SVG coordinate space mapping for improved accuracy
Added keyboard accessibility and ARIA attributes to interactive score cards

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 11 comments.

File	Description
nuxt.config.ts	Added Vite server allowedHosts configuration with environment variable fallback; updated favicon references from PNG to ICO format
app/app.vue	Added URL hash-based tab navigation; improved SVG graph coordinate mapping; enhanced accessibility with keyboard support; refined badge and timeline styling; made fallback username configurable via runtime config
.env.example	Added example environment variables for OSU_TARGET_USER and ALLOWED_HOSTS configuration
.github/PULL_REQUEST_TEMPLATE.md	Added typecheck step to testing checklist

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-02T14:05:39Z

+                class="group relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/40 p-4 backdrop-blur transition-all duration-500 ease-out hover:-translate-y-px hover:border-white/30 cursor-pointer"
+                role="button"
+                tabindex="0"
+                @click="score.deep_stats && openDetail(score)"
+                @keyup.enter="score.deep_stats && openDetail(score)"


The conditional rendering logic 'score.deep_stats && openDetail(score)' on both click and keyup handlers will silently do nothing if deep_stats is falsy. For better accessibility and user feedback, consider disabling the interactive elements (removing role, tabindex, cursor-pointer) when deep_stats is not available, or providing visual feedback that the item is not clickable.

Copilot · 2026-01-02T14:05:39Z

+              badge.tone === 'badge-s' ? 'bg-white/6 text-white ring-2 ring-white/10 shadow-[0_0_8px_rgba(255,255,255,0.04)]' : '',
              badge.label === 'F' ? 'line-through opacity-60 border border-white/20 text-white' : '',
-              !['badge-ss','badge-s','badge-a'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''
+              !['badge-ss','badge-s'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''


Line 838 checks if badge.tone is NOT in the array ['badge-ss','badge-s'], but line 835-836 define styles for 'badge-ss' and 'badge-s'. The removed line 837 previously had a check for 'badge-a', which is now missing from line 838. If 'badge-a' is still a valid tone value, it will now incorrectly fall through to the default border styling instead of having its own specific styling.

Suggested change

!['badge-ss','badge-s'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''

!['badge-ss','badge-s','badge-a'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''

Copilot · 2026-01-02T14:05:40Z

                  class="relative mb-5 last:mb-0"
                >
-                  <span class="absolute -left-1.5 mt-0.5 h-3 w-3 rounded-full border border-white bg-black" />
+                  <span class="absolute -left-4 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full border border-white bg-black" />


The timeline dot positioning changed from '-left-1.5 mt-0.5' to '-left-4 top-1/2 -translate-y-1/2'. This change shifts the dot 16px to the left (from -6px to -16px) and centers it vertically. Verify that there is sufficient left padding or margin in the parent container to accommodate the additional -10px shift, otherwise the dot may be clipped or overflow outside the visible area.

Copilot · 2026-01-02T14:05:40Z

    plugins: [tsconfigPaths()],
+    server: {
+      // allow hosts for previewing the dev server through a tunnel
+      // Can be set via env: `NUXT_ALLOWED_HOSTS` or `VITE_ALLOWED_HOSTS` (comma-separated).


The comment mentions "VITE_ALLOWED_HOSTS" as an option, but based on the environment variable naming convention used in the project (NUXT_*), using VITE_ALLOWED_HOSTS might not work as expected. Consider clarifying in the comment whether VITE_ALLOWED_HOSTS is actually supported, or if only NUXT_ALLOWED_HOSTS should be documented.

Copilot · 2026-01-02T14:05:40Z

 OSU_REPLAY_PATH="/path/to/your/osu/exports"
-NUXT_ENABLE_REPLAY_WATCHER="false"
+NUXT_ENABLE_REPLAY_WATCHER="false"
+NUXT_ALLOWED_HOSTS="osu.korpseluv.com"


The default value 'osu.korpseluv.com' in the .env.example file should match the intention of being an example. Consider using a placeholder like 'your-tunnel-domain.com' or 'example.com' instead of what appears to be a specific/personal domain.

Suggested change

NUXT_ALLOWED_HOSTS="osu.korpseluv.com"

NUXT_ALLOWED_HOSTS="your-tunnel-domain.com"

Copilot · 2026-01-02T14:05:41Z

+onMounted(() => {
+  // initialize from the fragment when the component mounts
+  setTabFromHash()
+  window.addEventListener('hashchange', setTabFromHash)
+})
+
+onBeforeUnmount(() => {


The tab navigation logic uses window.location.hash directly without checking if window is defined on line 397, but the check is present on line 390. While line 390 guards setTabFromHash's initial read, line 397 is inside onMounted which only runs client-side, so the additional check on line 390 may be redundant. Consider removing the typeof window check on line 390 for consistency, or document why it's needed.

Suggested change

onMounted(() => {

// initialize from the fragment when the component mounts

setTabFromHash()

window.addEventListener('hashchange', setTabFromHash)

})

onBeforeUnmount(() => {

onMounted(() => {

if (typeof window === 'undefined') return

// initialize from the fragment when the component mounts

setTabFromHash()

window.addEventListener('hashchange', setTabFromHash)

})

onBeforeUnmount(() => {

if (typeof window === 'undefined') return

Copilot · 2026-01-02T14:05:41Z


        <div class="flex flex-row flex-wrap gap-2">
-          <div
+              <div


The indentation appears to have changed from the original alignment. The opening div tag now has inconsistent indentation (extra spaces) compared to the surrounding code, which may indicate a formatting issue.

Copilot · 2026-01-02T14:05:41Z

+    server: {
+      // allow hosts for previewing the dev server through a tunnel
+      // Can be set via env: `NUXT_ALLOWED_HOSTS` or `VITE_ALLOWED_HOSTS` (comma-separated).
+      allowedHosts: (process.env.NUXT_ALLOWED_HOSTS || process.env.VITE_ALLOWED_HOSTS || 'osu.korpseluv.com')


The hardcoded default value 'osu.korpseluv.com' should not be in the production configuration. This appears to be a personal or development-specific hostname. The default should either be empty, use 'localhost', or be documented that it must be overridden via environment variables. Having a specific external domain as the default could cause security issues or unexpected behavior for other developers.

Suggested change

allowedHosts: (process.env.NUXT_ALLOWED_HOSTS || process.env.VITE_ALLOWED_HOSTS || 'osu.korpseluv.com')

allowedHosts: (process.env.NUXT_ALLOWED_HOSTS || process.env.VITE_ALLOWED_HOSTS || 'localhost')

Copilot · 2026-01-02T14:05:41Z

+  const svg = chartRef.value
+  if (svg && typeof svg.getScreenCTM === 'function') {
+    try {
+      const pt = (svg.createSVGPoint ? svg.createSVGPoint() : (new DOMPoint() as any)) as any


The fallback for DOMPoint when createSVGPoint is unavailable casts to 'any', which bypasses type safety. Consider defining a proper interface or type for the point object to maintain type safety, ensuring it has x, y properties and a matrixTransform method.

Copilot · 2026-01-02T14:05:41Z

+watch(activeTab, (val) => {
+  const frag = val === 'deep' ? 'deep-stats' : val
+  try {
+    history.replaceState(null, '', `#${frag}`)
+  } catch (e) {
+    if (typeof window !== 'undefined') window.location.hash = `#${frag}`
+  }
+})


The watch callback for activeTab changes the URL without checking if we're in a browser environment. While the watch will only run client-side in practice, the explicit window check on line 410 suggests defensive programming, but it's inconsistent with line 408 which doesn't check before calling history.replaceState. Consider adding a guard at the start of the watch callback to ensure window/history are available.

korpseluv added 10 commits January 2, 2026 12:56

Deep stats cards are now fully clickable

cfd98f2

Update favicon links in nuxt.config.ts to use .ico format

72d7c3e

Adjust position of event indicator in graph for improved visibility

2cf6c70

Enhance badge styling for improved visibility and accessibility

00d61f0

Add tab management and URL fragment synchronization for improved navi…

3268f08

…gation

Refactor URL fragment handling for tab navigation to simplify mapping…

b2500c4

…s and improve synchronization

Refactor chart interaction to improve SVG coordinate mapping for accu…

98697c2

…rate graph hover functionality

a

f59f88f

Update environment configuration to use runtime OSU target user for f…

d37032b

…allback user

Add allowedHosts configuration for dev server tunnel preview

838546b

Copilot AI review requested due to automatic review settings January 2, 2026 14:01

korpseluv merged commit bb984e2 into main Jan 2, 2026
4 checks passed

Copilot started reviewing on behalf of korpseluv January 2, 2026 14:02 View session

Copilot AI reviewed Jan 2, 2026

View reviewed changes

Navigation Menu

Add allowedHosts configuration for dev server tunnel preview - #21

Add allowedHosts configuration for dev server tunnel preview#21
korpseluv merged 10 commits into
mainfrom
cutting-edge

korpseluv commented Jan 2, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Copilot AI Jan 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	!['badge-ss','badge-s'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''
	!['badge-ss','badge-s','badge-a'].includes(badge.tone) && badge.label !== 'F' ? 'border border-white/30 text-white' : ''

	NUXT_ALLOWED_HOSTS="osu.korpseluv.com"
	NUXT_ALLOWED_HOSTS="your-tunnel-domain.com"

	allowedHosts: (process.env.NUXT_ALLOWED_HOSTS \|\| process.env.VITE_ALLOWED_HOSTS \|\| 'osu.korpseluv.com')
	allowedHosts: (process.env.NUXT_ALLOWED_HOSTS \|\| process.env.VITE_ALLOWED_HOSTS \|\| 'localhost')

Conversation

korpseluv commented Jan 2, 2026

Summary

Why

Testing

Security / privacy

Notes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants