-
+
{{ viewer.snapshot.value.url }}
diff --git a/plugins/og/app/app/components/previews/TelegramPreview.vue b/plugins/og/app/app/components/previews/TelegramPreview.vue
index 107b4ac84..ee6ad7999 100644
--- a/plugins/og/app/app/components/previews/TelegramPreview.vue
+++ b/plugins/og/app/app/components/previews/TelegramPreview.vue
@@ -11,12 +11,12 @@ const time = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-di
- {{ card.url }}
+ {{ card.url }}
-
+
-
+
{{ card.hostname }}
diff --git a/plugins/og/app/main.ts b/plugins/og/app/main.ts
index 41492cdef..9306b3092 100644
--- a/plugins/og/app/main.ts
+++ b/plugins/og/app/main.ts
@@ -1,5 +1,7 @@
import { createApp } from 'vue'
+import { applyPanelBranding } from '../../../design/panel-theme'
import App from './app/app.vue'
+import '../../../packages/hub-ui/src/client/primary-ramp.css'
const media = window.matchMedia('(prefers-color-scheme: dark)')
function applyScheme(dark: boolean): void {
@@ -10,3 +12,6 @@ applyScheme(media.matches)
media.addEventListener('change', event => applyScheme(event.matches))
createApp(App).mount('#app')
+
+const stopPanelTheme = applyPanelBranding()
+import.meta.hot?.dispose(stopPanelTheme)
diff --git a/plugins/terminals/app/main.ts b/plugins/terminals/app/main.ts
index d545c981c..40cfdfd28 100644
--- a/plugins/terminals/app/main.ts
+++ b/plugins/terminals/app/main.ts
@@ -1,4 +1,8 @@
+///
+
+import { applyPanelBranding } from '../../../design/panel-theme'
import { mountTerminals } from './client/index'
+import '../../../packages/hub-ui/src/client/primary-ramp.css'
const app = document.getElementById('app')
if (!app)
@@ -7,3 +11,6 @@ if (!app)
mountTerminals(app).catch((error) => {
app.textContent = `Failed to connect: ${error instanceof Error ? error.message : String(error)}`
})
+
+const stopPanelTheme = applyPanelBranding()
+import.meta.hot?.dispose(stopPanelTheme)
diff --git a/tests/panel-branding.test.ts b/tests/panel-branding.test.ts
new file mode 100644
index 000000000..2a90c6723
--- /dev/null
+++ b/tests/panel-branding.test.ts
@@ -0,0 +1,74 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { applyPanelBranding } from '../design/panel-theme'
+
+const setup = vi.hoisted(() => vi.fn())
+vi.mock('devframe/client', () => ({ setupDevframeConnection: setup }))
+
+let values: Map
+let cleanup: (() => void) | undefined
+
+beforeEach(() => {
+ values = new Map()
+ setup.mockReset()
+ vi.stubGlobal('window', { parent: {} })
+ vi.stubGlobal('CSS', { supports: (_: string, color: string) => color === '#6b84fd' })
+ vi.stubGlobal('document', {
+ documentElement: {
+ style: {
+ getPropertyValue: (name: string) => values.get(name) ?? '',
+ getPropertyPriority: () => '',
+ setProperty: (name: string, value: string) => values.set(name, value),
+ removeProperty: (name: string) => values.delete(name),
+ },
+ },
+ })
+})
+
+afterEach(() => {
+ cleanup?.()
+ cleanup = undefined
+ vi.unstubAllGlobals()
+})
+
+it('keeps standalone SPAs independent of hub branding', () => {
+ window.parent = window
+ cleanup = applyPanelBranding()
+ expect(setup).not.toHaveBeenCalled()
+ expect(values.size).toBe(0)
+})
+
+it('maps startup metadata to one CSS input and restores the previous palette on cleanup', async () => {
+ values.set('--devframe-primary', 'red')
+ setup.mockResolvedValue({ connectionMeta: { configs: { ui: { branding: { primaryColor: '#6b84fd' } } } } })
+ cleanup = applyPanelBranding()
+ await vi.waitFor(() => expect(values.get('--devframe-primary')).toBe('#6b84fd'))
+ expect([...values.keys()]).toEqual(['--devframe-primary'])
+ cleanup()
+ expect(values.get('--devframe-primary')).toBe('red')
+})
+
+it.each([undefined, '', 'invalid-color'])('keeps the default palette for missing or invalid branding (%s)', async (primaryColor) => {
+ setup.mockResolvedValue({ connectionMeta: { configs: { ui: { branding: { primaryColor } } } } })
+ cleanup = applyPanelBranding()
+ await setup.mock.results[0].value
+ expect(values.size).toBe(0)
+})
+
+it('keeps the default palette when connection metadata is unavailable', async () => {
+ setup.mockRejectedValue(new Error('Unavailable'))
+ cleanup = applyPanelBranding()
+ await new Promise(resolve => setTimeout(resolve, 0))
+ expect(values.size).toBe(0)
+})
+
+it('ignores metadata that arrives after the SPA has been disposed', async () => {
+ let resolve!: (value: unknown) => void
+ setup.mockReturnValue(new Promise((done) => {
+ resolve = done
+ }))
+ cleanup = applyPanelBranding()
+ cleanup()
+ resolve({ connectionMeta: { configs: { ui: { branding: { primaryColor: '#6b84fd' } } } } })
+ await setup.mock.results[0].value
+ expect(values.size).toBe(0)
+})
diff --git a/turbo.json b/turbo.json
index e3c5c8990..7cbcb286c 100644
--- a/turbo.json
+++ b/turbo.json
@@ -69,36 +69,43 @@
},
"@devframes/plugin-code-server#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-terminals#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-inspect#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-og#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-data-inspector#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-messages#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/hub#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-assets#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
@@ -164,11 +171,13 @@
},
"@devframes/plugin-git#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},
"@devframes/plugin-a11y#build": {
"outputLogs": "new-only",
+ "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/design/panel-theme.ts", "$TURBO_ROOT$/packages/hub-ui/src/client/primary-ramp.css"],
"dependsOn": ["devframe#build", "@devframes/vite#build", "@devframes/json-render#build"],
"outputs": ["dist/**", "assets-pkg/dist/**"]
},