@bardioc/create-bardioc-app 0.5.3 → 0.5.5

package/templates/svelte/src/App.svelte

@@ -12,7 +12,7 @@
 
   let { bridge = null, children }: { bridge?: HostBridge | null; children?: Snippet } = $props();
 
-  const showSdkDemo = isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
+  const showSdkDemo = isInsideIframe() || isDevStandalone();
 
   let result = $state<ResultState>({ status: 'idle' });
   let running = $state(false);

package/templates/svelte/src/index.css

@@ -1,76 +1,79 @@
 @import 'tailwindcss';
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 html,
 body,
 #app {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 
 :root {
-  --background: oklch(17.88% 0.0075 229.38);
-  --foreground: oklch(98.69% 0.0093 99.98);
-  --muted-foreground: oklch(86.03% 0.0056 95.11);
-  --border: oklch(1 0 0 / 10%);
-  --primary: oklch(97.02% 0 0);
-  --primary-foreground: oklch(36.94% 0.0053 236.64);
-  --destructive: oklch(68.04% 0.1386 21.38);
-  --ring: oklch(79.43% 0.0084 98.91);
+    --background: oklch(17.88% 0.0075 229.38);
+    --foreground: oklch(98.69% 0.0093 99.98);
+    --muted-foreground: oklch(86.03% 0.0056 95.11);
+    --border: oklch(1 0 0 / 10%);
+    --primary: oklch(97.02% 0 0);
+    --primary-foreground: oklch(36.94% 0.0053 236.64);
+    --destructive: oklch(68.04% 0.1386 21.38);
+    --ring: oklch(79.43% 0.0084 98.91);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: system-ui, -apple-system, sans-serif;
+    background: var(--background);
+    color: var(--foreground);
+    font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
 }
 
 code {
-  font-family: inherit;
+    font-family: inherit;
 }
 
 .bg-background {
-  background-color: var(--background);
+    background-color: var(--background);
 }
 
 .text-foreground {
-  color: var(--foreground);
+    color: var(--foreground);
 }
 
 .text-muted-foreground {
-  color: var(--muted-foreground);
+    color: var(--muted-foreground);
 }
 
 .border-border {
-  border-color: var(--border);
+    border-color: var(--border);
 }
 
 .bg-primary {
-  background-color: var(--primary);
+    background-color: var(--primary);
 }
 
 .text-primary-foreground {
-  color: var(--primary-foreground);
+    color: var(--primary-foreground);
 }
 
 .text-destructive {
-  color: var(--destructive);
+    color: var(--destructive);
 }
 
 .focus\:ring-ring:focus {
-  --tw-ring-color: var(--ring);
+    --tw-ring-color: var(--ring);
 }
 
 .hover\:bg-primary\/90:hover {
-  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
+    background-color: oklch(from var(--primary) calc(l * 0.9) c h);
 }
 
 .hover\:text-foreground:hover {
-  color: var(--foreground);
+    color: var(--foreground);
 }

package/templates/svelte/src/main.ts

@@ -1,42 +1,26 @@
-import {
-  ensureDevAuthSession,
-  installDevBridge,
-  isDevStandalone,
-  isInsideIframe,
-} from '@bardioc/app-sdk/dev';
 import { createHostBridge } from '@bardioc/app-sdk';
+import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { mount } from 'svelte';
 import App from './App.svelte';
 import './index.css';
 
 const APP_NAME = import.meta.env.VITE_APP_NAME?.trim();
-const APP_ID = import.meta.env.VITE_APP_ID?.trim();
-const standaloneDevAuthEnabled = import.meta.env.DEV && import.meta.env.VITE_ENABLE_DEV_AUTH === 'true';
 
 if (!APP_NAME) {
   throw new Error('Missing VITE_APP_NAME for runtime');
 }
 
 const insideIframe = isInsideIframe();
-const devStandalone = standaloneDevAuthEnabled && isDevStandalone();
+const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
-if (useSdkProvider && !APP_ID) {
-  throw new Error('Missing VITE_APP_ID for SDK runtime');
+if (devStandalone) {
+  installDevBridge({ debug: false });
 }
 
-async function bootstrap() {
-  if (devStandalone) {
-    await ensureDevAuthSession({ appId: APP_ID, appName: APP_NAME });
-    installDevBridge({ appId: APP_ID, appName: APP_NAME, debug: false });
-  }
+const bridge = useSdkProvider ? createHostBridge({ appId: APP_NAME }) : null;
 
-  const bridge = useSdkProvider ? createHostBridge({ appId: APP_ID! }) : null;
-
-  mount(App, {
-    target: document.getElementById('app')!,
-    props: { bridge },
-  });
-}
-
-bootstrap();
+mount(App, {
+  target: document.getElementById('app')!,
+  props: { bridge },
+});

package/templates/svelte/src/vite-env.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_APP_NAME: string
-  readonly VITE_APP_ID: string
-  readonly VITE_ENABLE_DEV_AUTH?: string
+  readonly VITE_APP_NAME: string;
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+  readonly env: ImportMetaEnv;
 }

package/templates/vite/.env.example

@@ -1,14 +1,9 @@
 # Hosted app slug used by local runtime/dev-auth wiring.
 VITE_APP_NAME={{APP_NAME}}
 
-# Get this from the BardiocOS AppStore after registering your app.
-# Required only for standalone dev auth/token exchange; host iframe runtime can omit it.
-VITE_APP_ID=your-app-client-id-here
+# Paste the dev secret from the BardiocOS AppStore after registering your app.
+# Used by the Vite dev-auth proxy to sign requests to the BFF.
+DEV_SECRET=
 
-# Opt into the host-backed standalone dev session when running outside the host iframe.
-VITE_ENABLE_DEV_AUTH=false
-
-# Required host URL for standalone dev auth. Run `bardioc login` once, then
-# `npm run dev` will refresh DEV_SESSION_KEY automatically before Vite starts.
-DEV_AUTH_HOST_URL=
-DEV_SESSION_KEY=
+# Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
+API_BASE_URL=

package/templates/vite/CLAUDE.md

@@ -1,7 +1,7 @@
 # {{DISPLAY_NAME}}
 
 Bardioc hosted app. Vite + React 19 + TypeScript 6 + `@bardioc/app-sdk`, with
-`@bardioc/ui` (components + theme), `@bardioc/i18n` (translations), and `@bardioc/types`.
+`@bardioc/ui` (components + theme) and `@bardioc/i18n-core` (translations).
 
 The starter ships a **Climate Dashboard** — a worked example of how a real Bardioc app
 is wired: a sidebar shell with multiple views, `@bardioc/ui` components (cards, metrics,
@@ -33,7 +33,7 @@ src/
   dashboard-provider.tsx  # context: climate state + profile, via useDashboard()
   use-app-notify.ts       # OS host notification (useNotify) mirrored to a local toast
   auth/
-    onboarding.tsx        # Empty full-page screen with the CLI dev-session steps
+    onboarding.tsx        # Empty full-page screen with the DEV_SECRET dev-auth steps
   shell/
     app-shell.tsx         # Sidebar + view routing + Toaster + OS top-menu integration (useCommandMenu)
     about-dialog.tsx      # "About" Dialog — reads public/app-manifest.json at runtime (manifest example)
@@ -75,8 +75,8 @@ pnpm bundle           # → {{APP_NAME}}.zip
 ```
 
 `npm run dev` runs plain Vite — a local preview shell (no transport): the dashboard renders, but
-live SDK data comes only when the app is opened inside the host. `.env` (see `.env.example`): set
-`VITE_APP_ID` (from the BardiocOS AppStore) when you wire the app up to the host.
+live SDK data comes only when the app is opened inside the host, or when `DEV_SECRET` and
+`API_BASE_URL` are set for standalone dev auth (see `.env.example`).
 
 ---
 
@@ -127,9 +127,9 @@ OS windows); the language switcher is `ConnectedLanguageSwitcher useI18n={useI18
 
 ---
 
-## i18n — `@bardioc/i18n`
+## i18n — `@bardioc/i18n-core`
 
-All user-facing strings go through `t()`. Locales: `en`, `de` (`@bardioc/types`).
+All user-facing strings go through `t()`. Locales: `en`, `de` (defined in `src/i18n.tsx`).
 
 ```typescript
 import { useTranslation } from './i18n';
@@ -143,10 +143,8 @@ t('overview.updated', { fallback: 'Updated {time}', params: { time } });
 - `AppI18nProvider syncWithOs` follows the OS language (`useOsConfig().language`); the header's
   `ConnectedLanguageSwitcher` lets the user switch it manually.
 - Always pass a `fallback` so a missing key degrades gracefully.
-- `@bardioc/ui` components translate against this **same** provider — only the app's `en/de.json`
-  are loaded (the base `@bardioc/i18n` bundle is not merged). So shared-component keys must live in
-  the app locales: `common.button.previous/next` and the `genericTable.*` set (DataTable pagination
-  "1 to 5 of 5", Previous/Next). Without them those strings silently fall back to English.
+- `@bardioc/ui` component strings ship with the `@bardioc/ui` package itself — the app only
+  carries its own `en/de.json`.
 
 ---
 

package/templates/vite/index.html

@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" class="dark" style="height: 100%; margin: 0">
+<!doctype html>
+<html lang="en" class="dark" style="height: 100%; margin: 0; color-scheme: dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/templates/vite/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "dev:live": "BARDIOC_TUNNEL=1 vite",
     "build": "tsc && vite build && node scripts/stamp-manifest.mjs dist",
     "bundle": "rm -f {{APP_NAME}}.zip && tsc && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
     "preview": "vite preview",
@@ -17,9 +16,8 @@
   },
   "dependencies": {
     "@bardioc/app-sdk": "latest",
-    "@bardioc/i18n": "^0.1.6",
-    "@bardioc/types": "^0.3.0",
-    "@bardioc/ui": "^0.2.11",
+    "@bardioc/i18n-core": "latest",
+    "@bardioc/ui": "latest",
     "lucide-react": "^0.544.0",
     "react": "19.2.6",
     "react-dom": "19.2.6"

package/templates/vite/src/App.tsx

@@ -4,8 +4,7 @@ import { DashboardProvider } from './dashboard-provider';
 import { AppShell } from './shell/app-shell';
 
 export function App() {
-  const authorized =
-    isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
+  const authorized = isInsideIframe() || isDevStandalone();
 
   if (!authorized) {
     return <Onboarding />;

package/templates/vite/src/auth/onboarding.tsx

@@ -18,7 +18,6 @@ function DetectedRow({ label, ok }: Readonly<{ label: string; ok: boolean }>) {
 export function Onboarding() {
   const { t } = useTranslation();
   const insideHost = isInsideIframe();
-  const devAuth = import.meta.env.VITE_ENABLE_DEV_AUTH === 'true';
 
   return (
     <Empty
@@ -38,16 +37,16 @@ export function Onboarding() {
     >
       <div className="border-border bg-card mt-4 w-full max-w-md rounded-lg border p-4 text-left text-xs leading-6">
         <p className="text-foreground mb-2 font-medium">
-          {t('auth.stepsTitle', { fallback: 'Run standalone with a dev session:' })}
+          {t('auth.stepsTitle', { fallback: 'Run standalone with dev auth:' })}
         </p>
         <ol className="text-muted-foreground list-decimal space-y-2 pl-4">
-          <li>{t('auth.step1', { fallback: 'Set VITE_ENABLE_DEV_AUTH=true in .env' })}</li>
           <li>
-            <div>{t('auth.step2', { fallback: 'Authorize once in the app folder:' })}</div>
-            <Kbd>bardioc login</Kbd>
+            {t('auth.step1', {
+              fallback: 'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env',
+            })}
           </li>
           <li>
-            <div>{t('auth.step3', { fallback: 'Start the dev server:' })}</div>
+            <div>{t('auth.step2', { fallback: 'Start the dev server:' })}</div>
             <Kbd>pnpm dev</Kbd>
           </li>
         </ol>
@@ -59,7 +58,6 @@ export function Onboarding() {
             label={t('auth.insideHost', { fallback: 'Inside host iframe' })}
             ok={insideHost}
           />
-          <DetectedRow label={t('auth.devAuth', { fallback: 'Dev auth enabled' })} ok={devAuth} />
         </div>
       </div>
     </Empty>

package/templates/vite/src/climate/conditions-chart.tsx

@@ -16,14 +16,12 @@ export function ConditionsChart({ forecast }: Readonly<ConditionsChartProps>) {
     rainy: { label: t('conditions.rainy', { fallback: 'Rainy' }), color: 'var(--chart-1)' },
   };
 
-  const seriesData = forecast.map(
-    (entry): Record<string, string | number> => ({
-      day: entry.day,
-      sunny: entry.sunny,
-      cloudy: entry.cloudy,
-      rainy: entry.rainy,
-    })
-  );
+  const seriesData = forecast.map((entry): Record<string, string | number> => ({
+    day: entry.day,
+    sunny: entry.sunny,
+    cloudy: entry.cloudy,
+    rainy: entry.rainy,
+  }));
 
   return (
     <BarChartMultiple

package/templates/vite/src/events/live-events-view.tsx

@@ -24,9 +24,7 @@ export function LiveEventsView() {
   return (
     <div className="flex h-full min-w-0 flex-col gap-3">
       <div>
-        <h2 className="text-lg font-semibold">
-          {t('events.title', { fallback: 'Live Events' })}
-        </h2>
+        <h2 className="text-lg font-semibold">{t('events.title', { fallback: 'Live Events' })}</h2>
         <p className="text-muted-foreground text-xs">
           {t('events.description', {
             fallback: 'Live graph events streamed from the OS over SSE (permission "events").',

package/templates/vite/src/i18n.tsx

@@ -1,22 +1,20 @@
 import { useOsConfig } from '@bardioc/app-sdk/react';
 import {
   I18nProvider as BaseI18nProvider,
-  mergeTranslations,
   useI18n,
   type I18nConfig,
   type TranslationMessages,
-} from '@bardioc/i18n';
-import { deMessages as baseDe, enMessages as baseEn } from '@bardioc/i18n/translations';
-import { SUPPORTED_LOCALES, type Locale } from '@bardioc/types';
+} from '@bardioc/i18n-core';
 import { useEffect, useMemo, type ReactNode } from 'react';
 import deMessages from './locales/de.json';
 import enMessages from './locales/en.json';
 
-// Layer the app's strings over the @bardioc base bundle so built-in @bardioc/ui component text
-// (table pagination, combobox, sidebar, window controls, …) is translated too. App keys win.
+export const SUPPORTED_LOCALES = ['en', 'de'] as const;
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+
 const DEFAULT_MESSAGES: Record<Locale, TranslationMessages> = {
-  en: mergeTranslations(baseEn, enMessages),
-  de: mergeTranslations(baseDe, deMessages),
+  en: enMessages,
+  de: deMessages,
 };
 
 const STORAGE_KEY = '{{APP_NAME}}.locale';
@@ -65,4 +63,4 @@ export function AppI18nProvider({ children, syncWithOs = false }: Readonly<AppI1
   );
 }
 
-export { useI18n, useTranslation } from '@bardioc/i18n';
+export { useI18n, useTranslation } from '@bardioc/i18n-core';

package/templates/vite/src/locales/de.json

@@ -42,9 +42,8 @@
     "title": "Mit Bardioc OS verbinden",
     "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc OS oder eigenständig mit einer CLI-Dev-Session.",
     "stepsTitle": "Eigenständig mit Dev-Session ausführen:",
-    "step1": "Setze VITE_ENABLE_DEV_AUTH=true und DEV_AUTH_HOST_URL=<dein-host> in .env",
-    "step2": "Einmal im App-Ordner autorisieren:",
-    "step3": "Dev-Server starten — der Session-Key wird automatisch erzeugt und erneuert:",
+    "step1": "Setze DEV_SECRET=<dein-secret> und API_BASE_URL=<dein-host> in .env",
+    "step2": "Dev-Server starten:",
     "detectedTitle": "Erkannte Umgebung",
     "insideHost": "Im Host-Iframe",
     "devAuth": "Dev-Auth aktiviert",

package/templates/vite/src/locales/en.json

@@ -42,9 +42,8 @@
     "title": "Connect to Bardioc OS",
     "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc OS, or standalone with a CLI dev session.",
     "stepsTitle": "Run standalone with a dev session:",
-    "step1": "Set VITE_ENABLE_DEV_AUTH=true and DEV_AUTH_HOST_URL=<your-host> in .env",
-    "step2": "Authorize once in the app folder:",
-    "step3": "Start the dev server — the session key is minted and refreshed automatically:",
+    "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env",
+    "step2": "Start the dev server:",
     "detectedTitle": "Detected environment",
     "insideHost": "Inside host iframe",
     "devAuth": "Dev auth enabled",

package/templates/vite/src/main.tsx

@@ -1,9 +1,4 @@
-import {
-  ensureDevAuthSession,
-  installDevBridge,
-  isDevStandalone,
-  isInsideIframe,
-} from '@bardioc/app-sdk/dev';
+import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { AppSdkProvider } from '@bardioc/app-sdk/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -12,43 +7,31 @@ import { AppI18nProvider } from './i18n';
 import './index.css';
 
 const APP_NAME = import.meta.env.VITE_APP_NAME?.trim();
-const APP_ID = import.meta.env.VITE_APP_ID?.trim();
-const standaloneDevAuthEnabled =
-  import.meta.env.DEV && import.meta.env.VITE_ENABLE_DEV_AUTH === 'true';
 
 if (!APP_NAME) {
   throw new Error('Missing VITE_APP_NAME for runtime');
 }
 
 const insideIframe = isInsideIframe();
-const devStandalone = standaloneDevAuthEnabled && isDevStandalone();
+const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
-const SDK_APP_ID = APP_ID ?? APP_NAME;
 
-async function bootstrap() {
-  if (devStandalone) {
-    if (!APP_ID) {
-      throw new Error('Missing VITE_APP_ID for standalone dev auth');
-    }
-    await ensureDevAuthSession({ appId: APP_ID, appName: APP_NAME });
-    installDevBridge({ appId: APP_ID, appName: APP_NAME, debug: false });
-  }
+if (devStandalone) {
+  installDevBridge({ debug: false });
+}
 
-  createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-      {useSdkProvider ? (
-        <AppSdkProvider appId={SDK_APP_ID}>
-          <AppI18nProvider syncWithOs>
-            <App />
-          </AppI18nProvider>
-        </AppSdkProvider>
-      ) : (
-        <AppI18nProvider>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    {useSdkProvider ? (
+      <AppSdkProvider appId={APP_NAME}>
+        <AppI18nProvider syncWithOs>
           <App />
         </AppI18nProvider>
-      )}
-    </StrictMode>
-  );
-}
-
-bootstrap();
+      </AppSdkProvider>
+    ) : (
+      <AppI18nProvider>
+        <App />
+      </AppI18nProvider>
+    )}
+  </StrictMode>
+);

package/templates/vite/src/shell/header.tsx

@@ -1,9 +1,8 @@
-import { SUPPORTED_LOCALES } from '@bardioc/types';
 import { Button, ConnectedLanguageSwitcher } from '@bardioc/ui/components';
 import { RefreshCw } from 'lucide-react';
 import { LocationSelect } from '../climate/location-select';
 import { useDashboard } from '../dashboard-provider';
-import { useI18n, useTranslation } from '../i18n';
+import { SUPPORTED_LOCALES, useI18n, useTranslation } from '../i18n';
 
 export function Header() {
   const { t } = useTranslation();

package/templates/vite/src/vite-env.d.ts

@@ -2,8 +2,6 @@
 
 interface ImportMetaEnv {
   readonly VITE_APP_NAME: string;
-  readonly VITE_APP_ID?: string;
-  readonly VITE_ENABLE_DEV_AUTH?: string;
 }
 
 interface ImportMeta {

package/templates/vue/.env.example

@@ -1,5 +1,9 @@
+# Hosted app slug used by local runtime/dev-auth wiring.
 VITE_APP_NAME={{APP_NAME}}
-VITE_APP_ID=your-app-client-id-here
-VITE_ENABLE_DEV_AUTH=false
-DEV_AUTH_HOST_URL=
-DEV_SESSION_KEY=
+
+# Paste the dev secret from the BardiocOS AppStore after registering your app.
+# Used by the Vite dev-auth proxy to sign requests to the BFF.
+DEV_SECRET=
+
+# Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
+API_BASE_URL=

package/templates/vue/index.html

@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" class="dark" style="height: 100%; margin: 0">
+<!doctype html>
+<html lang="en" class="dark" style="height: 100%; margin: 0; color-scheme: dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/templates/vue/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "bardioc-dev-session -- vite",
-    "dev:live": "BARDIOC_TUNNEL=1 bardioc-dev-session -- vite",
+    "dev": "vite",
+    "dev:live": "BARDIOC_TUNNEL=1 vite",
     "build": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist",
     "bundle": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
     "preview": "vite preview",

package/templates/vue/src/App.vue

@@ -9,7 +9,7 @@ type ResultState =
   | { status: 'success'; request: string; data: unknown }
   | { status: 'error'; request: string; message: string };
 
-const showSdkDemo = isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
+const showSdkDemo = isInsideIframe() || isDevStandalone();
 const bridge = useBardiocBridge();
 const notify = useNotify();
 const result = ref<ResultState>({ status: 'idle' });
@@ -67,14 +67,14 @@ function clearResult() {
 
         <div class="flex flex-wrap gap-2">
           <button
-            class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+            class="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
             @click="runGetProfile"
             :disabled="running"
           >
             Get Profile
           </button>
           <button
-            class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+            class="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
             @click="handleNotify"
             :disabled="running"
           >
@@ -89,11 +89,20 @@ function clearResult() {
           </button>
         </div>
 
-        <div class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
-          <div v-if="result.status === 'idle'" class="text-muted-foreground flex h-full items-center justify-center p-3 text-center text-xs leading-5">
-            Run a query to see results. If the host session is missing, the transport route will return 401.
+        <div
+          class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border"
+        >
+          <div
+            v-if="result.status === 'idle'"
+            class="text-muted-foreground flex h-full items-center justify-center p-3 text-center text-xs leading-5"
+          >
+            Run a query to see results. If the host session is missing, the transport route will
+            return 401.
           </div>
-          <div v-else-if="result.status === 'loading'" class="flex h-full flex-col items-center justify-center gap-2 p-3">
+          <div
+            v-else-if="result.status === 'loading'"
+            class="flex h-full flex-col items-center justify-center gap-2 p-3"
+          >
             <div class="text-muted-foreground font-mono text-xs">{{ result.request }}</div>
             <div class="text-muted-foreground text-xs">Loading…</div>
           </div>
@@ -103,11 +112,18 @@ function clearResult() {
             </div>
             <div class="text-destructive whitespace-pre-wrap break-all">{{ result.message }}</div>
           </div>
-          <div v-else-if="result.status === 'success'" class="flex h-full flex-col gap-0 overflow-hidden">
-            <div class="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs">
+          <div
+            v-else-if="result.status === 'success'"
+            class="flex h-full flex-col gap-0 overflow-hidden"
+          >
+            <div
+              class="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs"
+            >
               {{ result.request }}
             </div>
-            <pre class="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">{{ JSON.stringify(result.data, null, 2) }}</pre>
+            <pre class="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">{{
+              JSON.stringify(result.data, null, 2)
+            }}</pre>
           </div>
         </div>
       </div>