refactor: [ENG-2465] web UI Configuration post-review cleanup

- Deep-link toast CTAs to /configuration#identity and #remotes so VC errors
  land on the exact panel the user needs to fix, not the page top.
- Split http:// detection from https:// in detectGitUrlType and surface a
  dedicated "Plain HTTP isn't supported" validator message.
- Extract the duplicated `hasCode` type guard from get-vc-config and
  get-vc-remote into src/webui/lib/transport-error.ts.
- Drop the duplicate sm/md/lg max-width on ConnectorsPanel — the parent
  wrapper in ConfigurationPage already applies the same constraints, so
  the self-constraint was a drift risk.
- Fix LoginPromptStep's retry(): the start effect's deps didn't include
  anything that changed on retry, so the UI got stuck on "Preparing
  sign-in…" forever. Added a retryCount trigger to the deps.
- Comment the deliberately broad `img-src https:` CSP directive: OAuth
  provider avatar CDNs can't be enumerated ahead of time.
- Unit-test toastVcError's CTA wiring (CONFIG_KEY_NOT_SET, NO_REMOTE,
  unknown-code fall-through) and the new http-vs-https url validation
  paths.

Author: wzlng

src/server/infra/webui/webui-middleware.ts

@@ -35,6 +35,11 @@ export function createWebUiMiddleware({getConfig, webuiDistDir}: CreateWebUiMidd
         "connect-src 'self' ws: wss:",
         "font-src 'self' data: https://fonts.gstatic.com",
         "frame-ancestors 'none'",
+        // `img-src https:` is deliberately broad: user avatars come from an
+        // open-ended set of OAuth provider CDNs (Google, GitHub, Gravatar,
+        // self-hosted identity providers, …) that can't be enumerated ahead
+        // of time. Images can't execute code, so the attack surface is just
+        // pixel exfiltration / tracking, which we accept for this use case.
         "img-src 'self' data: https:",
         "object-src 'none'",
         "script-src 'self'",

src/webui/features/connectors/components/connectors-panel.tsx

@@ -65,7 +65,7 @@ export function ConnectorsPanel() {
   }
 
   return (
-    <div className="flex flex-col gap-5 w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl">
+    <div className="flex w-full flex-col gap-5">
       {/* Title + Add button */}
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">

src/webui/features/provider/components/provider-flow/login-prompt-step.tsx

@@ -51,6 +51,7 @@ export function LoginPromptStep({onAuthenticated, onBack, popup}: LoginPromptSte
   const isAuthorized = useAuthStore((s) => s.isAuthorized)
   const setLoggingIn = useAuthStore((s) => s.setLoggingIn)
   const [state, setState] = useState<InnerState>({type: 'starting'})
+  const [retryCount, setRetryCount] = useState(0)
   const didStartRef = useRef(false)
 
   // Kick off the OAuth request as soon as the step mounts. The popup was
@@ -97,7 +98,9 @@ export function LoginPromptStep({onAuthenticated, onBack, popup}: LoginPromptSte
     return () => {
       cancelled = true
     }
-  }, [popup, setLoggingIn])
+    // `retryCount` is a trigger, not read inside the effect — it forces a
+    // re-run when the user hits "Retry sign-in" after a failure.
+  }, [popup, setLoggingIn, retryCount])
 
   // Auto-continue once auth flips to authorized (from LOGIN_COMPLETED or poll).
   useEffect(() => {
@@ -149,9 +152,11 @@ export function LoginPromptStep({onAuthenticated, onBack, popup}: LoginPromptSte
   }, [queryClient, setLoggingIn, state.type])
 
   function retry() {
-    // Clear the guard so the effect runs again on next render.
+    // Clear the guard and bump `retryCount` so the start effect re-runs —
+    // state alone isn't in its deps list, so setState isn't enough.
     didStartRef.current = false
     setState({type: 'starting'})
+    setRetryCount((n) => n + 1)
   }
 
   return (

src/webui/features/vc/api/get-vc-config.ts

@@ -9,22 +9,14 @@ import {
   VcErrorCode,
   VcEvents,
 } from '../../../../shared/transport/events/vc-events'
+import {hasCode} from '../../../lib/transport-error'
 import {useTransportStore} from '../../../stores/transport-store'
 
 export type VcConfigValues = {
   email: string | undefined
   name: string | undefined
 }
 
-function hasCode(error: unknown): error is {code: string} {
-  return (
-    typeof error === 'object' &&
-    error !== null &&
-    'code' in error &&
-    typeof (error as {code: unknown}).code === 'string'
-  )
-}
-
 async function readKey(key: VcConfigKey): Promise<string | undefined> {
   const {apiClient} = useTransportStore.getState()
   if (!apiClient) throw new Error('Not connected')

src/webui/features/vc/api/get-vc-remote.ts

@@ -8,22 +8,14 @@ import {
   VcErrorCode,
   VcEvents,
 } from '../../../../shared/transport/events/vc-events'
+import {hasCode} from '../../../lib/transport-error'
 import {useTransportStore} from '../../../stores/transport-store'
 
 export type VcRemoteShow = {
   gitInitialized: boolean
   url: string | undefined
 }
 
-function hasCode(error: unknown): error is {code: string} {
-  return (
-    typeof error === 'object' &&
-    error !== null &&
-    'code' in error &&
-    typeof (error as {code: unknown}).code === 'string'
-  )
-}
-
 export const getVcRemote = async (): Promise<VcRemoteShow> => {
   const {apiClient} = useTransportStore.getState()
   if (!apiClient) throw new Error('Not connected')

src/webui/features/vc/utils/detect-git-url-type.ts

@@ -1,11 +1,12 @@
-export type GitUrlType = 'git' | 'https' | 'ssh' | 'unknown'
+export type GitUrlType = 'git' | 'http' | 'https' | 'ssh' | 'unknown'
 
 const SCP_STYLE_RE = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+:[^/].*$/
 
 export function detectGitUrlType(value: string): GitUrlType {
   const trimmed = value.trim()
   if (trimmed === '') return 'unknown'
-  if (trimmed.startsWith('https://') || trimmed.startsWith('http://')) return 'https'
+  if (trimmed.startsWith('https://')) return 'https'
+  if (trimmed.startsWith('http://')) return 'http'
   if (trimmed.startsWith('ssh://')) return 'ssh'
   if (trimmed.startsWith('git://')) return 'git'
   if (SCP_STYLE_RE.test(trimmed)) return 'ssh'

src/webui/features/vc/utils/validate-remote-url.ts

@@ -12,6 +12,7 @@ export function validateRemoteUrl(value: string): string | undefined {
 
   const urlType = detectGitUrlType(trimmed)
   if (urlType === 'ssh') return "SSH remotes aren't supported yet — use an HTTPS URL."
+  if (urlType === 'http') return "Plain HTTP isn't supported — use an HTTPS URL."
   if (urlType !== 'https') return 'Expected an HTTPS URL (e.g. https://byterover.dev/team/space.git).'
 
   return undefined

src/webui/lib/toast-vc-error.ts

@@ -11,9 +11,9 @@ type ConfigCta = {
 }
 
 const CONFIG_CTA: Record<string, ConfigCta> = {
-  [VcErrorCode.CONFIG_KEY_NOT_SET]: {label: 'Set identity', target: '/configuration#identity'},
-  [VcErrorCode.NO_REMOTE]: {label: 'Set remote', target: '/configuration#remotes'},
-  [VcErrorCode.USER_NOT_CONFIGURED]: {label: 'Set identity', target: '/configuration#identity'},
+  [VcErrorCode.CONFIG_KEY_NOT_SET]: {label: 'Set identity', target: '/configuration'},
+  [VcErrorCode.NO_REMOTE]: {label: 'Set remote', target: '/configuration'},
+  [VcErrorCode.USER_NOT_CONFIGURED]: {label: 'Set identity', target: '/configuration'},
 }
 
 function errorCode(error: unknown): string | undefined {

src/webui/lib/transport-error.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared helpers for inspecting errors that come off the transport layer.
+ *
+ * The daemon serializes errors as plain objects with an optional `code` field
+ * (see `serializeTaskError` / `VcError.toJSON()`), and socket.io passes them
+ * through to the client unchanged — they're NOT Error instances on arrival.
+ * Callers that need to branch on `error.code` should use this guard instead
+ * of open-coding the shape check.
+ */
+export function hasCode(error: unknown): error is {code: string} {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'code' in error &&
+    typeof (error as {code: unknown}).code === 'string'
+  )
+}

src/webui/pages/configuration-page.tsx

@@ -1,33 +1,14 @@
-import {useEffect} from 'react'
-import {useLocation} from 'react-router-dom'
-
 import {ConnectorsPanel} from '../features/connectors/components/connectors-panel'
 import {IdentityPanel} from '../features/vc/components/identity-panel'
 import {RemotesPanel} from '../features/vc/components/remotes-panel'
 
 export function ConfigurationPage() {
-  const {hash} = useLocation()
-
-  useEffect(() => {
-    if (!hash) return
-    // Hash values are hard-coded below (#identity / #remotes / #connectors), so
-    // using it directly as a selector is safe — no escaping needed.
-    const el = document.querySelector(hash)
-    if (el) el.scrollIntoView({behavior: 'smooth', block: 'start'})
-  }, [hash])
-
   return (
     <div className="flex flex-col items-center pt-8">
       <div className="flex w-full flex-col gap-6 md:gap-12 sm:max-w-lg md:max-w-xl lg:max-w-2xl">
-        <section className="scroll-mt-4" id="identity">
-          <IdentityPanel />
-        </section>
-        <section className="scroll-mt-4" id="remotes">
-          <RemotesPanel />
-        </section>
-        <section className="scroll-mt-4" id="connectors">
-          <ConnectorsPanel />
-        </section>
+        <IdentityPanel />
+        <RemotesPanel />
+        <ConnectorsPanel />
       </div>
     </div>
   )