feat: Apple-style console theme site-wide, IP copy formats and full names

.downstream/native-domains.md

@@ -112,12 +112,14 @@ actual model-quality diagnostics remain separately budgeted and coordinated.
 
 `observability.theme_enabled` (public `flat_theme_enabled`, default on) toggles
 `html.flat-theme`; switching it off restores the upstream look. The console look
-lives only in the central layer: `frontend/src/styles/flat-theme.css` (tokens and
-Geist/Geist Mono Latin subsets; CJK uses system fonts), `frontend/tailwind.config.js`
-(every palette, radius, shadow and gradient resolves through a CSS variable whose
-fallback is the upstream value; hue families fold into danger/warning/info/success/
-purple; `primary` is ink), `frontend/src/style.css` (upstream recipes plus a
-`:where(.flat-theme)` console block) and the shared components and layout. Page
+lives only in the central layer: `frontend/src/styles/flat-theme.css` (tokens, the
+Inter and Geist Mono Latin subsets; Chinese uses MiSans loaded at runtime from
+Xiaomi's font service by `utils/flatTheme.ts`, falling back to system fonts),
+`frontend/tailwind.config.js` (every palette, radius, shadow and gradient resolves
+through a CSS variable whose fallback is the upstream value; `primary` is Apple blue
+and the hue families map to Apple system colours), `frontend/src/style.css`
+(upstream recipes plus a `flat-theme` console block: colour only where upstream has
+colour, Liquid Glass only on chrome) and the shared components and layout. Page
 files keep upstream class strings; after upstream merges, re-run the ops-repo
 de-sweep (`artifacts/tmp/admin-rework/ui/desweep/desweep.py`) instead of restyling
 pages.

THIRD_PARTY_NOTICES.md

@@ -38,6 +38,10 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-## Geist
+## Inter
 
-The frontend includes the Geist and Geist Mono variable fonts by Vercel, taken from the npm package [`geist` 1.7.2](https://www.npmjs.com/package/geist) and subset to the Latin range with fontTools (no other glyph changes). The fonts are distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/geist/OFL.txt`.
+The frontend includes the Inter 4.001 variable font (weights 100-900) by The Inter Project Authors (https://github.com/rsms/inter), the Latin subset file `files/inter-latin-wght-normal.woff2` of the npm package [`@fontsource-variable/inter` 5.3.0](https://www.npmjs.com/package/@fontsource-variable/inter) with no glyph changes. The font is distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/inter/OFL.txt`.
+
+## Geist Mono
+
+The frontend includes the Geist Mono variable font by Vercel, taken from the npm package [`geist` 1.7.2](https://www.npmjs.com/package/geist) and subset to the Latin range with fontTools (no other glyph changes). The font is distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/geist/OFL.txt`.

frontend/src/assets/fonts/inter/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

frontend/src/components/admin/account/AccountStatsModal.vue

@@ -520,17 +520,17 @@ const trendChartData = computed(() => {
       {
         label: t('usage.accountBilled') + ' (USD)',
         data: stats.value.history.map((h) => h.actual_cost),
-        borderColor: '#3b82f6',
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        borderColor: presentation.value.tone('#3b82f6'),
+        backgroundColor: presentation.value.tone('rgba(59, 130, 246, 0.1)'),
         fill: true,
         tension: 0.3,
         yAxisID: 'y'
       },
       {
         label: t('usage.userBilled') + ' (USD)',
         data: stats.value.history.map((h) => h.user_cost),
-        borderColor: '#10b981',
-        backgroundColor: 'rgba(16, 185, 129, 0.08)',
+        borderColor: presentation.value.tone('#10b981'),
+        backgroundColor: presentation.value.tone('rgba(16, 185, 129, 0.08)'),
         fill: false,
         tension: 0.3,
         borderDash: [5, 5],
@@ -539,8 +539,8 @@ const trendChartData = computed(() => {
       {
         label: t('admin.accounts.stats.requests'),
         data: stats.value.history.map((h) => h.requests),
-        borderColor: '#f97316',
-        backgroundColor: 'rgba(249, 115, 22, 0.1)',
+        borderColor: presentation.value.tone('#f97316'),
+        backgroundColor: presentation.value.tone('rgba(249, 115, 22, 0.1)'),
         fill: false,
         tension: 0.3,
         yAxisID: 'y1'
@@ -605,7 +605,7 @@ const lineChartOptions = computed(() => ({
         color: chartColors.value.grid
       },
       ticks: {
-        color: '#3b82f6',
+        color: presentation.value.toneText('#3b82f6'),
         font: {
           size: 10
         },
@@ -614,7 +614,7 @@ const lineChartOptions = computed(() => ({
       title: {
         display: true,
         text: t('usage.accountBilled') + ' (USD)',
-        color: '#3b82f6',
+        color: presentation.value.toneText('#3b82f6'),
         font: {
           size: 11
         }
@@ -628,7 +628,7 @@ const lineChartOptions = computed(() => ({
         drawOnChartArea: false
       },
       ticks: {
-        color: '#f97316',
+        color: presentation.value.toneText('#f97316'),
         font: {
           size: 10
         },
@@ -637,7 +637,7 @@ const lineChartOptions = computed(() => ({
       title: {
         display: true,
         text: t('admin.accounts.stats.requests'),
-        color: '#f97316',
+        color: presentation.value.toneText('#f97316'),
         font: {
           size: 11
         }

frontend/src/components/admin/account/BatchAccountTestModal.vue

@@ -91,6 +91,7 @@ import BaseDialog from '@/components/common/BaseDialog.vue'
 import { adminAPI } from '@/api/admin'
 import type { Account } from '@/types'
 import type { BatchTestAccountEvent } from '@/api/admin/accounts'
+import { extractApiErrorMessage } from '@/utils/apiError'
 
 type KnownAccount = Pick<Account, 'id' | 'name' | 'platform'>
 const props = defineProps<{ show: boolean; accountIds: number[]; accounts: KnownAccount[] }>()
@@ -184,7 +185,7 @@ const loadModels = async () => {
       row.supportedModels = (await adminAPI.accounts.getAvailableModels(row.id)).map(model => model.id)
       if (row.status === 'checking') row.status = 'ready'
     } catch (error) {
-      if (row.status === 'checking') { row.status = 'skipped'; row.error = String(error) }
+      if (row.status === 'checking') { row.status = 'skipped'; row.error = extractApiErrorMessage(error, t('common.unknownError')) }
     }
   }
   await Promise.all(Array.from({ length: Math.min(CATALOG_CONCURRENCY, queue.length) }, async () => {

frontend/src/components/admin/account/ReAuthAccountModal.vue

@@ -22,7 +22,7 @@
                   : isAntigravity
                     ? 'from-purple-500 to-purple-600'
                     : isGrok
-                      ? 'bg-zinc-700 '
+                      ? 'from-zinc-700 to-zinc-900'
                       : 'from-orange-500 to-orange-600'
             ]"
           >

frontend/src/components/admin/payment/DailyRevenueChart.vue

@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import { usePresentationColors } from '@/composables/usePresentationColors'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
@@ -38,6 +39,7 @@ import type { DailyPaymentStats } from '@/types/payment'
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler)
 
 const { t } = useI18n()
+const presentation = usePresentationColors()
 
 const props = defineProps<{
   data: DailyPaymentStats[]
@@ -58,7 +60,7 @@ const chartData = computed(() => {
     labels: props.data.map(d => d.date),
     datasets: [
       ...currencies.map((currency, index) => {
-        const [borderColor, backgroundColor] = colors[index % colors.length]
+        const [borderColor, backgroundColor] = colors[index % colors.length].map(presentation.value.tone)
         return {
           label: `${currency} ${t('payment.admin.revenue')}`,
           data: props.data.map(day => day.amount[currency] || 0),
@@ -73,8 +75,8 @@ const chartData = computed(() => {
       {
         label: t('payment.admin.orderCount'),
         data: props.data.map(d => d.count),
-        borderColor: 'rgb(16, 185, 129)',
-        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+        borderColor: presentation.value.tone('rgb(16, 185, 129)'),
+        backgroundColor: presentation.value.tone('rgba(16, 185, 129, 0.1)'),
         fill: false,
         tension: 0.3,
         pointRadius: 3,

frontend/src/components/admin/usage/UsageTable.vue

@@ -315,6 +315,7 @@
   <Teleport to="body">
     <div
       v-if="tokenTooltipVisible"
+      ref="tokenTooltipRef"
       class="fixed z-[9999] pointer-events-none -translate-y-1/2"
       :style="{
         left: tokenTooltipPosition.x + 'px',
@@ -390,7 +391,7 @@
             <span class="font-semibold text-blue-400">{{ ((tokenTooltipData?.input_tokens || 0) + (tokenTooltipData?.output_tokens || 0) + (tokenTooltipData?.cache_creation_tokens || 0) + (tokenTooltipData?.cache_read_tokens || 0)).toLocaleString() }}</span>
           </div>
         </div>
-        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800" :style="tooltipArrowStyle(tokenTooltipPosition)"></div>
       </div>
     </div>
   </Teleport>
@@ -399,6 +400,7 @@
   <Teleport to="body">
     <div
       v-if="tooltipVisible"
+      ref="tooltipRef"
       class="fixed z-[9999] pointer-events-none -translate-y-1/2"
       :style="{
         left: tooltipPosition.x + 'px',
@@ -527,14 +529,14 @@
             </div>
           </template>
         </div>
-        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800" :style="tooltipArrowStyle(tooltipPosition)"></div>
       </div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { formatDateTime, formatReasoningEffort, reasoningEffortValuesEqual } from '@/utils/format'
@@ -690,15 +692,54 @@ const copyRequestId = (requestId: string) => copyIdentifier(requestId, t('admin.
 const copyUpstreamRequestId = (upstreamRequestId: string) =>
   copyIdentifier(upstreamRequestId, t('admin.usage.upstreamRequestIdCopied'))
 
+// Tooltip placement: right of the trigger; on its left when the popover would run past the right edge of the
+// viewport (clamped to the margin when neither side fits), and moved up or down to stay on screen, the arrow still
+// pointing at the trigger. Measured once the popover has rendered, so every value stays readable.
+type TooltipPosition = { x: number; y: number; flip: boolean; arrowY: number | null; arrow: boolean }
+const TOOLTIP_GAP = 8
+const VIEWPORT_MARGIN = 8
+const initialTooltipPosition = (trigger: DOMRect): TooltipPosition =>
+  ({ x: trigger.right + TOOLTIP_GAP, y: trigger.top + trigger.height / 2, flip: false, arrowY: null, arrow: true })
+
+const placeTooltip = (trigger: DOMRect, el: HTMLElement | null, position: TooltipPosition) => {
+  if (!el) return
+  const { width, height } = el.getBoundingClientRect()
+  const viewportWidth = document.documentElement.clientWidth
+  const viewportHeight = document.documentElement.clientHeight
+  const right = trigger.right + TOOLTIP_GAP
+  const left = trigger.left - TOOLTIP_GAP - width
+  const fitsRight = right + width <= viewportWidth - VIEWPORT_MARGIN
+  const fitsLeft = left >= VIEWPORT_MARGIN
+  position.flip = !fitsRight && fitsLeft
+  position.arrow = fitsRight || fitsLeft
+  position.x = fitsRight ? right : fitsLeft ? left : Math.max(VIEWPORT_MARGIN, viewportWidth - VIEWPORT_MARGIN - width)
+  // the box is centred on y (-translate-y-1/2)
+  const anchorY = trigger.top + trigger.height / 2
+  const half = height / 2
+  position.y = Math.max(VIEWPORT_MARGIN + half, Math.min(anchorY, viewportHeight - VIEWPORT_MARGIN - half))
+  position.arrowY = position.y === anchorY ? null : Math.max(10, Math.min(height - 10, anchorY - position.y + half))
+}
+
+// the arrow moves to the right edge (mirrored) when the popover sits left of its trigger
+const tooltipArrowStyle = (position: TooltipPosition) => ({
+  ...(position.arrowY === null ? {} : { top: `${position.arrowY}px` }),
+  ...(position.flip ? { left: '100%', right: 'auto', scale: '-1 1' } : {}),
+  ...(position.arrow ? {} : { display: 'none' })
+})
+
 // Tooltip state - cost
 const tooltipVisible = ref(false)
-const tooltipPosition = ref({ x: 0, y: 0 })
+const tooltipPosition = ref<TooltipPosition>({ x: 0, y: 0, flip: false, arrowY: null, arrow: true })
 const tooltipData = ref<AdminUsageLog | null>(null)
+const tooltipRef = ref<HTMLElement | null>(null)
+let tooltipShowCount = 0
 
 // Tooltip state - token
 const tokenTooltipVisible = ref(false)
-const tokenTooltipPosition = ref({ x: 0, y: 0 })
+const tokenTooltipPosition = ref<TooltipPosition>({ x: 0, y: 0, flip: false, arrowY: null, arrow: true })
 const tokenTooltipData = ref<AdminUsageLog | null>(null)
+const tokenTooltipRef = ref<HTMLElement | null>(null)
+let tokenTooltipShowCount = 0
 
 const getRequestTypeLabel = (row: AdminUsageLog): string => {
   const requestType = resolveUsageRequestType(row)
@@ -737,13 +778,15 @@ const formatDuration = (ms: number | null | undefined): string => {
 }
 
 // Cost tooltip functions
-const showTooltip = (event: MouseEvent, row: AdminUsageLog) => {
+const showTooltip = async (event: MouseEvent, row: AdminUsageLog) => {
   const target = event.currentTarget as HTMLElement
   const rect = target.getBoundingClientRect()
+  const shown = ++tooltipShowCount
   tooltipData.value = row
-  tooltipPosition.value.x = rect.right + 8
-  tooltipPosition.value.y = rect.top + rect.height / 2
+  tooltipPosition.value = initialTooltipPosition(rect)
   tooltipVisible.value = true
+  await nextTick()
+  if (shown === tooltipShowCount && tooltipVisible.value) placeTooltip(rect, tooltipRef.value, tooltipPosition.value)
 }
 
 const hideTooltip = () => {
@@ -752,13 +795,15 @@ const hideTooltip = () => {
 }
 
 // Token tooltip functions
-const showTokenTooltip = (event: MouseEvent, row: AdminUsageLog) => {
+const showTokenTooltip = async (event: MouseEvent, row: AdminUsageLog) => {
   const target = event.currentTarget as HTMLElement
   const rect = target.getBoundingClientRect()
+  const shown = ++tokenTooltipShowCount
   tokenTooltipData.value = row
-  tokenTooltipPosition.value.x = rect.right + 8
-  tokenTooltipPosition.value.y = rect.top + rect.height / 2
+  tokenTooltipPosition.value = initialTooltipPosition(rect)
   tokenTooltipVisible.value = true
+  await nextTick()
+  if (shown === tokenTooltipShowCount && tokenTooltipVisible.value) placeTooltip(rect, tokenTooltipRef.value, tokenTooltipPosition.value)
 }
 
 const hideTokenTooltip = () => {