@chatcode/cco-better-sidebar 0.18.0-alpha.0

package/src/client/AiRatioSection.tsx

@@ -0,0 +1,292 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Input } from '@deepseek-ai/dsh-client-ui-primitives'
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import clsx from 'clsx'
+import { api, SidebarApiError, type ChatCodeCommitRecord } from './api.ts'
+import { t } from './locales.ts'
+import css from './AiRatioSection.module.css'
+
+/** Commit rows per page (the portal's page size). */
+const PAGE_SIZE = 10
+
+export type AiRatioSectionProps = PropsRuntime<'settings.section'>
+
+/** One query's outcome. */
+type QueryState =
+  | { kind: 'loading' }
+  | { kind: 'ready'; records: ChatCodeCommitRecord[] }
+  | { kind: 'signin' }
+  | { kind: 'error'; message: string }
+
+const isoDay = (date: Date): string =>
+  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+
+/** The current month's first/last day (the query row's default range). */
+const monthRange = (): { begin: string; end: string } => {
+  const now = new Date()
+  return {
+    begin: isoDay(new Date(now.getFullYear(), now.getMonth(), 1)),
+    end: isoDay(new Date(now.getFullYear(), now.getMonth() + 1, 0)),
+  }
+}
+
+/** Coerce one platform number defensively (absent/negative/garbage → 0). */
+const num = (value: unknown): number => {
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0
+}
+
+/** The portal's per-record ratio: additions=0 → 0, else round(ai/added*100). */
+const ratioOf = (record: ChatCodeCommitRecord): number => {
+  const added = num(record.additions)
+  return added === 0 ? 0 : Math.round((num(record.aiTotal) / added) * 100)
+}
+
+/** Ratio ink: ≥70 success, ≥50 business, else warn (the portal's green/blue/orange). */
+const ratioColor = (ratio: number): string =>
+  ratio >= 70
+    ? 'var(--dsw-alias-state-success-primary)'
+    : ratio >= 50
+      ? 'var(--dsw-alias-state-business-primary)'
+      : 'var(--dsw-alias-state-warn-primary)'
+
+const intOf = (value: number): string => value.toLocaleString()
+
+const textOf = (value: unknown): string => (typeof value === 'string' ? value : value === undefined || value === null ? '' : String(value))
+
+export function AiRatioSection(_props: AiRatioSectionProps) {
+  const initial = useMemo(monthRange, [])
+  const [begin, setBegin] = useState(initial.begin)
+  const [end, setEnd] = useState(initial.end)
+  const [query, setQuery] = useState<QueryState>({ kind: 'loading' })
+  const [page, setPage] = useState(1)
+  const controllerRef = useRef<AbortController | null>(null)
+
+  const runQuery = (rangeBegin: string, rangeEnd: string): void => {
+    controllerRef.current?.abort()
+    const controller = new AbortController()
+    controllerRef.current = controller
+    setQuery({ kind: 'loading' })
+    setPage(1)
+    api.chatcodeGitCommitStats(rangeBegin, rangeEnd, controller.signal)
+      .then(records => {
+        if (controller.signal.aborted) return
+        setQuery({ kind: 'ready', records })
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return
+        const code = error instanceof SidebarApiError ? error.code : ''
+        if (code === 'chatcode-unavailable' || code === 'chatcode-unauthorized') {
+          setQuery({ kind: 'signin' })
+          return
+        }
+        setQuery({ kind: 'error', message: error instanceof Error ? error.message : String(error) })
+      })
+  }
+
+  useEffect(() => {
+    runQuery(initial.begin, initial.end)
+    return () => { controllerRef.current?.abort() }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only default query
+  }, [])
+
+  const rangeValid = begin !== '' && end !== '' && begin <= end
+
+  const overview = useMemo(() => {
+    const records = query.kind === 'ready' ? query.records : []
+    let added = 0
+    let ai = 0
+    for (const record of records) {
+      added += num(record.additions)
+      ai += num(record.aiTotal)
+    }
+    return { added, ai, ratio: added > 0 ? Math.round((ai / added) * 100) : 0, count: records.length }
+  }, [query])
+
+  const pages = query.kind === 'ready' ? Math.max(1, Math.ceil(query.records.length / PAGE_SIZE)) : 1
+  const current = Math.min(page, pages)
+  const rows = query.kind === 'ready'
+    ? query.records.slice((current - 1) * PAGE_SIZE, current * PAGE_SIZE)
+    : []
+
+  const exportCsv = (): void => {
+    if (query.kind !== 'ready' || query.records.length === 0) return
+    const header = [
+      t('aiRatioColProject'), t('aiRatioColName'), t('aiRatioColEmail'), t('aiRatioColAuthorEmail'),
+      t('aiRatioColAdditions'), t('aiRatioColDeletions'), t('aiRatioColTotal'), t('aiRatioColAi'),
+      t('aiRatioColRatio'), t('aiRatioColOrg'), t('aiRatioColDept'), t('aiRatioColTitle'),
+      t('aiRatioColShortId'), t('aiRatioColDate'),
+    ]
+    const lines = query.records.map(record => [
+      textOf(record.projectName), textOf(record.name), textOf(record.email), textOf(record.authorEmail),
+      num(record.additions), num(record.deletions), num(record.total), num(record.aiTotal),
+      `${ratioOf(record)}%`, textOf(record.orgname), textOf(record.deptname), textOf(record.title),
+      textOf(record.shortId), textOf(record.authoredDate),
+    ])
+    const csv = [header, ...lines]
+      .map(cells => cells.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+      .join('\r\n')
+    const blob = new Blob([`\ufeff${csv}`], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `ai-code-ratio_${begin}_${end}.csv`
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <section className={css.section} aria-label={t('aiRatioTitle')}>
+      <div className={css.queryRow}>
+        <Input
+          type="date"
+          className={css.dateInput}
+          value={begin}
+          aria-label={t('aiRatioDateStart')}
+          onChange={event => { setBegin(event.currentTarget.value) }}
+        />
+        <span className={css.dash}>–</span>
+        <Input
+          type="date"
+          className={css.dateInput}
+          value={end}
+          aria-label={t('aiRatioDateEnd')}
+          onChange={event => { setEnd(event.currentTarget.value) }}
+        />
+        <button
+          type="button"
+          className={css.primaryButton}
+          disabled={!rangeValid || query.kind === 'loading'}
+          onClick={() => { runQuery(begin, end) }}
+        >
+          {query.kind === 'loading' ? t('aiRatioQuerying') : t('aiRatioQuery')}
+        </button>
+        <button
+          type="button"
+          className={css.exportButton}
+          disabled={query.kind !== 'ready' || query.records.length === 0}
+          onClick={exportCsv}
+        >
+          {t('aiRatioExport')}
+        </button>
+      </div>
+
+      <div className={css.overview}>
+        <div className={css.card}>
+          <span className={css.cardLabel}>{t('aiRatioOverviewAdded')}</span>
+          <span className={clsx(css.cardValue, css.addedValue)}>{intOf(overview.added)}</span>
+        </div>
+        <div className={css.card}>
+          <span className={css.cardLabel}>{t('aiRatioOverviewAi')}</span>
+          <span className={clsx(css.cardValue, css.adoptedValue)}>{intOf(overview.ai)}</span>
+        </div>
+        <div className={clsx(css.card, overview.ratio >= 50 ? css.ratioCardHigh : css.ratioCardLow)}>
+          <span className={css.cardLabel}>{t('aiRatioOverviewRatio')}</span>
+          <span className={clsx(css.cardValue, css.cardRatio)}>{overview.ratio}%</span>
+        </div>
+        <div className={css.card}>
+          <span className={css.cardLabel}>{t('aiRatioOverviewCommits')}</span>
+          <span className={clsx(css.cardValue, css.commitsValue)}>{intOf(overview.count)}</span>
+        </div>
+      </div>
+
+      <div className={css.tableHeading}>{t('aiRatioTableTitle')}</div>
+
+      {query.kind === 'loading' ? (
+        <div className={css.state}>{t('aiRatioLoading')}</div>
+      ) : query.kind === 'signin' ? (
+        <div className={css.state}>{t('aiRatioLoginRequired')}</div>
+      ) : query.kind === 'error' ? (
+        <div className={css.stateError}>
+          <span>{query.message === '' ? t('aiRatioError') : `${t('aiRatioError')}：${query.message}`}</span>
+          <button type="button" className={css.exportButton} disabled={!rangeValid} onClick={() => { runQuery(begin, end) }}>
+            {t('aiRatioRetry')}
+          </button>
+        </div>
+      ) : query.records.length === 0 ? (
+        <div className={css.state}>{t('aiRatioEmpty')}</div>
+      ) : (
+        <>
+          <div className={css.tableWrap}>
+            <table className={css.table}>
+              <thead>
+                <tr>
+                  <th>{t('aiRatioColProject')}</th>
+                  <th>{t('aiRatioColName')}</th>
+                  <th>{t('aiRatioColEmail')}</th>
+                  <th>{t('aiRatioColAuthorEmail')}</th>
+                  <th className={css.num}>{t('aiRatioColAdditions')}</th>
+                  <th className={css.num}>{t('aiRatioColDeletions')}</th>
+                  <th className={css.num}>{t('aiRatioColTotal')}</th>
+                  <th className={css.num}>{t('aiRatioColAi')}</th>
+                  <th>{t('aiRatioColRatio')}</th>
+                  <th>{t('aiRatioColOrg')}</th>
+                  <th>{t('aiRatioColDept')}</th>
+                  <th>{t('aiRatioColTitle')}</th>
+                  <th>{t('aiRatioColShortId')}</th>
+                  <th>{t('aiRatioColDate')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((record, index) => {
+                  const ratio = ratioOf(record)
+                  return (
+                    <tr key={`${textOf(record.shortId)}-${index}`}>
+                      <td title={textOf(record.projectName)}>{textOf(record.projectName)}</td>
+                      <td>{textOf(record.name)}</td>
+                      <td title={textOf(record.email)}>{textOf(record.email)}</td>
+                      <td title={textOf(record.authorEmail)}>{textOf(record.authorEmail)}</td>
+                      <td className={css.num}>{intOf(num(record.additions))}</td>
+                      <td className={css.num}>{intOf(num(record.deletions))}</td>
+                      <td className={css.num}>{intOf(num(record.total))}</td>
+                      <td className={clsx(css.num, num(record.aiTotal) > 0 && css.aiValue)}>
+                        {intOf(num(record.aiTotal))}
+                      </td>
+                      <td>
+                        <span className={css.ratioValue} style={{ color: ratioColor(ratio) }}>{ratio}%</span>
+                        <span className={css.ratioBar} aria-hidden="true">
+                          <span style={{ width: `${Math.min(ratio, 100)}%`, background: ratioColor(ratio) }} />
+                        </span>
+                      </td>
+                      <td title={textOf(record.orgname)}>{textOf(record.orgname)}</td>
+                      <td title={textOf(record.deptname)}>{textOf(record.deptname)}</td>
+                      <td title={textOf(record.title)}>{textOf(record.title)}</td>
+                      <td>{textOf(record.shortId)}</td>
+                      <td className={css.dateCell}>{textOf(record.authoredDate)}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+          <div className={css.pager}>
+            <button
+              type="button"
+              className={css.exportButton}
+              aria-label={t('aiRatioPrevPage')}
+              disabled={current <= 1}
+              onClick={() => { setPage(current - 1) }}
+            >
+              ‹
+            </button>
+            <span className={css.pageInfo}>
+              {t('aiRatioPageInfo', { page: current, pages, count: query.records.length })}
+            </span>
+            <button
+              type="button"
+              className={css.exportButton}
+              aria-label={t('aiRatioNextPage')}
+              disabled={current >= pages}
+              onClick={() => { setPage(current + 1) }}
+            >
+              ›
+            </button>
+          </div>
+        </>
+      )}
+    </section>
+  )
+}

package/src/client/BrowserView.tsx

@@ -0,0 +1,289 @@
+/**
+ * The built-in browser tab: an address bar plus a sandboxed iframe.
+ *
+ * Security model (see browser.ts + the sandbox tokens below): the iframe is
+ * ALWAYS sandboxed without `allow-same-origin` (opaque origin — the visited
+ * page can never sit on the GUI's origin, read its storage, or reach
+ * /sidebar/api) and without `allow-top-navigation` (a page must not hijack
+ * the GUI). The address bar only accepts http(s) and refuses loopback /
+ * the GUI's own origin. The side card setting "关闭浏览器沙箱" drops the
+ * sandbox attribute entirely for fully trusted sites — the visited page then
+ * runs with the GUI's own origin and full session access, so a persistent
+ * warning bar renders while it is off.
+ *
+ * The URL is persisted onto the tab (path/title via the patchTab reducer)
+ * so a reload restores the visited page; the back/forward stack only tracks
+ * address-bar navigations (in-frame link clicks are cross-origin and
+ * invisible — a documented limitation).
+ */
+import { useEffect, useState } from 'react'
+import {
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconLinkOutline14,
+  IconRefreshOutline14,
+  IconWarningOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { VscLinkExternal } from 'react-icons/vsc'
+import { api } from './api.ts'
+import { embeddabilityOf, isAllowedLoopbackUrl, normalizeBrowserUrl } from './browser.ts'
+import { patchTab } from './state.ts'
+import { SandboxStatusBar } from './SandboxStatusBar.tsx'
+import { t } from './locales.ts'
+import type { TabComponentProps } from './service.ts'
+import css from './sidebar.module.css'
+
+/**
+ * The browser iframe sandbox tokens. NO allow-same-origin (opaque origin —
+ * no GUI storage/API access), NO allow-top-navigation (a browsed page must
+ * not hijack the GUI). allow-forms/allow-popups/allow-downloads/allow-modals
+ * keep login flows working; allow-popups-to-escape-sandbox lets OAuth
+ * popups open as normal tabs (they are cross-origin to the GUI either way).
+ */
+export const BROWSER_IFRAME_SANDBOX =
+  'allow-scripts allow-forms allow-popups allow-downloads allow-modals allow-popups-to-escape-sandbox'
+
+/** allow-same-origin appended for explicitly allowlisted local addresses. */
+const BROWSER_IFRAME_SANDBOX_SAME_ORIGIN =
+  `${BROWSER_IFRAME_SANDBOX} allow-same-origin`
+
+/**
+ * The sandbox tokens for one URL: allowlisted loopback addresses (local dev
+ * servers the user explicitly trusts) additionally get `allow-same-origin`
+ * so Vite/module/HMR pipelines that need a real origin work; every other
+ * site keeps the opaque-origin sandbox. `allow-same-origin` does NOT give
+ * the page access to the GUI — it stays cross-origin to it and to every
+ * other site — but it does give it its OWN origin privileges (localStorage,
+ * fetch without CORS), so it is only granted for the explicit allowlist.
+ *
+ * The GUI itself is the one hard exception: even when its own host is
+ * allowlisted (a bare-host entry covers every port, so the GUI origin
+ * matches), a page at the GUI's exact origin must never get
+ * `allow-same-origin` — that would make it same-origin with its parent and
+ * hand it the GUI's storage/API (and the ability to shed the sandbox). The
+ * GUI keeps the opaque-origin sandbox no matter what the allowlist says.
+ */
+export function iframeSandboxFor(url: string | undefined, allowedLoopback: string, selfOrigin?: string): string | undefined {
+  if (url === undefined) return undefined
+  if (selfOrigin !== undefined) {
+    let parsed: URL
+    try {
+      parsed = new URL(url)
+    } catch {
+      return BROWSER_IFRAME_SANDBOX
+    }
+    if (parsed.origin === selfOrigin) return BROWSER_IFRAME_SANDBOX
+  }
+  return isAllowedLoopbackUrl(url, allowedLoopback)
+    ? BROWSER_IFRAME_SANDBOX_SAME_ORIGIN
+    : BROWSER_IFRAME_SANDBOX
+}
+
+export function BrowserView(props: TabComponentProps) {
+  const { store, tab } = props
+  // The current address (initialized from the persisted tab.path so a
+  // reload restores the visited page).
+  const [url, setUrl] = useState<string | undefined>(tab.path)
+  const [input, setInput] = useState<string>(tab.path ?? '')
+  /** Blocked/invalid hint shown under the address bar (null = none). */
+  const [message, setMessage] = useState<string | null>(null)
+  /** Address-bar navigation history (in-frame clicks are not tracked). */
+  const [history, setHistory] = useState<string[]>(tab.path !== undefined ? [tab.path] : [])
+  const [cursor, setCursor] = useState<number>(tab.path !== undefined ? 0 : -1)
+  /** Bumped on reload to remount the iframe (also remounts on sandbox flip). */
+  const [reloadKey, setReloadKey] = useState(0)
+  /** TEMPORARY sandbox unlock for THIS surface only (never writes the global
+   *  side card setting; lasts until the tab unmounts or the user restores). */
+  const [localUnlock, setLocalUnlock] = useState(false)
+  const noSandbox = store.getPrefs().browserNoSandbox === true || localUnlock
+  /** A site that refuses to be embedded (X-Frame-Options / frame-ancestors):
+   *  the probe verdict shown instead of the blank iframe. */
+  const [embedBlocked, setEmbedBlocked] = useState<string | null>(null)
+  /** The user asked to load the refused site anyway (keeps the plain iframe). */
+  const [forceEmbed, setForceEmbed] = useState(false)
+
+  // Probe every navigation (address bar, history, restored path): when the
+  // target forbids embedding, show the reason + open-in-browser instead of
+  // the browser's cryptic "refused to connect" blank frame. A failed probe
+  // (unreachable) keeps the plain iframe.
+  useEffect(() => {
+    if (url === undefined) return
+    let cancelled = false
+    setEmbedBlocked(null)
+    setForceEmbed(false)
+    void api.browserProbe(url).then((probe) => {
+      if (!cancelled && embeddabilityOf(probe) === 'blocked') setEmbedBlocked(url)
+    }).catch(() => { /* unreachable: keep the plain iframe */ })
+    return () => { cancelled = true }
+  }, [url])
+
+  const persist = (nextUrl: string): void => {
+    let host = nextUrl
+    try { host = new URL(nextUrl).hostname } catch { /* keep the URL as title */ }
+    store.reduce(state => patchTab(state, tab.id, { path: nextUrl, title: host }))
+  }
+
+  const navigateTo = (raw: string): void => {
+    const result = normalizeBrowserUrl(raw, window.location.origin, store.getPrefs().browserAllowedLoopback)
+    if (result.kind === 'ok') {
+      const next = result.url
+      setUrl(next)
+      setInput(next)
+      setMessage(null)
+      // Push onto the stack, dropping any stale forward entries.
+      setHistory(previous => [...previous.slice(0, cursor + 1), next])
+      setCursor(previous => previous + 1)
+      setReloadKey(key => key + 1)
+      persist(next)
+      return
+    }
+    setMessage(result.kind === 'invalid'
+      ? t('browserInvalid')
+      : result.reason === 'scheme' ? t('browserBlockedScheme')
+      : t('browserBlockedLoopback'))
+  }
+
+  const goBack = (): void => {
+    if (cursor <= 0) return
+    const next = history[cursor - 1]!
+    setCursor(cursor - 1)
+    setUrl(next)
+    setInput(next)
+    setReloadKey(key => key + 1)
+  }
+
+  const goForward = (): void => {
+    if (cursor >= history.length - 1) return
+    const next = history[cursor + 1]!
+    setCursor(cursor + 1)
+    setUrl(next)
+    setInput(next)
+    setReloadKey(key => key + 1)
+  }
+
+  return (
+    <div className={css.browser}>
+      <div className={css.browserBar}>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserBack')}
+          title={t('browserBack')}
+          disabled={cursor <= 0}
+          onClick={goBack}
+        >
+          <IconChevronLeftOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserForward')}
+          title={t('browserForward')}
+          disabled={cursor >= history.length - 1}
+          onClick={goForward}
+        >
+          <IconChevronRightOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          onClick={() => { setReloadKey(key => key + 1) }}
+        >
+          <IconRefreshOutline14 />
+        </button>
+        <input
+          className={css.browserInput}
+          value={input}
+          placeholder={t('browserPlaceholder')}
+          spellCheck={false}
+          onChange={event => { setInput(event.target.value) }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') navigateTo(input)
+          }}
+        />
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserGo')}
+          title={t('browserGo')}
+          onClick={() => { navigateTo(input) }}
+        >
+          <IconLinkOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserOpenExternal')}
+          title={t('browserOpenExternal')}
+          disabled={url === undefined}
+          onClick={() => {
+            if (url !== undefined) window.open(url, '_blank', 'noopener')
+          }}
+        >
+          <VscLinkExternal size={15} />
+        </button>
+      </div>
+      {message !== null && <div className={css.browserMessage}>{message}</div>}
+      <SandboxStatusBar
+        sandboxed={!noSandbox}
+        local={localUnlock}
+        dangerCopy={t('browserNoSandboxWarning')}
+        onUnlock={() => { setLocalUnlock(true) }}
+        onRestore={() => { setLocalUnlock(false) }}
+      />
+      {url === undefined ? (
+        <div className={css.browserStart}>{t('browserStart')}</div>
+      ) : embedBlocked !== null && !forceEmbed ? (
+        <BrowserEmbedBlocked
+          url={embedBlocked}
+          onOpenInBrowser={() => { window.open(embedBlocked, '_blank', 'noopener') }}
+          onLoadAnyway={() => { setForceEmbed(true) }}
+        />
+      ) : (
+        <iframe
+          key={`${reloadKey}:${noSandbox ? 'ns' : 'sb'}`}
+          className={css.browserFrame}
+          src={url}
+          sandbox={noSandbox ? undefined : iframeSandboxFor(url, store.getPrefs().browserAllowedLoopback, window.location.origin)}
+          referrerPolicy="no-referrer"
+          allow=""
+          title={url}
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * The embed-refusal panel: shown when the probed site forbids being
+ * displayed inside other pages (X-Frame-Options / frame-ancestors) — the
+ * iframe would only show the browser's "refused to connect" blank. Explains
+ * the reason and offers the real-browser open plus a load-anyway escape.
+ * Exported so the copy and the actions are testable without a DOM.
+ */
+export function BrowserEmbedBlocked(props: {
+  url: string
+  onOpenInBrowser: () => void
+  onLoadAnyway: () => void
+}) {
+  const { url, onOpenInBrowser, onLoadAnyway } = props
+  let host = url
+  try { host = new URL(url).hostname } catch { /* keep the raw URL */ }
+  return (
+    <div className={css.browserBlocked}>
+      <IconWarningOutline16 size={16} />
+      <div className={css.browserBlockedTitle}>{t('browserEmbedBlocked', { host })}</div>
+      <div className={css.browserBlockedDesc}>{t('browserEmbedBlockedDesc')}</div>
+      <div className={css.browserBlockedActions}>
+        <button type="button" className={css.browserBlockedButton} onClick={onOpenInBrowser}>
+          {t('browserOpenExternal')}
+        </button>
+        <button type="button" className={css.browserBlockedButton} onClick={onLoadAnyway}>
+          {t('browserEmbedAnyway')}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/client/ChatcodeGate.tsx

@@ -0,0 +1,35 @@
+/** Mandatory Web sign-in surface. The host remains the authority for every decision. */
+import { useEffect, useRef } from 'react'
+import type { ChatCodeAuthState } from './api.ts'
+import { useChatcodeAccount } from './useChatcodeAccount.ts'
+
+type GateDecision = 'allow' | 'login' | 'wait'
+
+/** Decide whether this browser visit has enough verified ChatCode state to enter the workbench. */
+export function chatcodeGateDecision(chatcode: ChatCodeAuthState | undefined, verifiedThisVisit: boolean): GateDecision {
+  if (chatcode?.available === false || chatcode?.required !== true) return 'allow'
+  if (chatcode.validation === 'valid' && chatcode.expired !== true) return 'allow'
+  if (chatcode.validation === 'unavailable') return verifiedThisVisit ? 'allow' : 'login'
+  if (chatcode.expired === true || chatcode.validation === 'invalid'
+    || (chatcode.configured === false && chatcode.validation === 'none')) return 'login'
+  return 'wait'
+}
+
+export function ChatcodeGate(): JSX.Element | null {
+  const { chatcode } = useChatcodeAccount()
+  const verifiedThisVisit = useRef(false)
+  // The auth bundle is optional for standalone better-sidebar consumers.
+  // Its route always answers available=false when no auth bundle is mounted,
+  // so keep the first frame covered until that answer arrives. This prevents
+  // the application flashing usable controls before mandatory auth is known.
+  useEffect(() => {
+    if (chatcode?.validation === 'valid' && chatcode.expired !== true) verifiedThisVisit.current = true
+    // A new browser visit must observe a successful remote validation. Once
+    // this visit has passed that check, a later company-network outage does
+    // not interrupt ongoing work.
+    if (chatcodeGateDecision(chatcode, verifiedThisVisit.current) !== 'login') return
+    const back = `${window.location.pathname}${window.location.search}${window.location.hash}`
+    window.location.replace(`/sidebar/login?return=${encodeURIComponent(back)}`)
+  }, [chatcode])
+  return null
+}