@bardioc/create-bardioc-app 0.4.0

package/templates/solid/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "{{APP_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bardioc-dev-session -- vite",
+    "dev:live": "BARDIOC_TUNNEL=1 bardioc-dev-session -- vite",
+    "build": "tsc && vite build && node scripts/stamp-manifest.mjs dist",
+    "bundle": "tsc && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit",
+    "changeset": "changeset",
+    "release:status": "changeset status --verbose",
+    "release:version": "changeset version && pnpm install --lockfile-only",
+    "release:publish": "changeset publish"
+  },
+  "dependencies": {
+    "@bardioc/app-sdk": "latest",
+    "solid-js": "^1.9.7"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^22.19.19",
+    "solid-devtools": "^0.33.0",
+    "tailwindcss": "4.3.0",
+    "typescript": "6.0.3",
+    "vite": "8.0.13",
+    "vite-plugin-solid": "^2.11.6"
+  }
+}

package/templates/solid/public/icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="15.3012" x2="-2.25993" y1="1.77049" y2="12.9254"><stop offset=".4898" stop-color="#c084fc"/><stop offset="1" stop-color="#9333ea"/></linearGradient><path d="m14.3984 3.35791c1.9618.00013 3.5514 1.59021 3.5518 3.55176v8.08593c0 1.9602-1.5896 3.5507-3.5518 3.5508h-8.84567c-1.96194-.0002-3.55273-1.5909-3.55273-3.5527v-8.08403c.00042-1.96151 1.59105-3.55156 3.55273-3.55176zm4.5186 12.18069c.0121-.1019.0221-.2048.0273-.3086.004-.0776.0059-.1559.0059-.2344v-8.08593c0-.18616-.0124-.36951-.0342-.54981.0218.18056.0352.36435.0352.55078v8.08496c0 .1837-.013.3649-.0342.543zm-17.8672.1318c-.03282-.2205-.0498-.4471-.0498-.6767 0 .2298.01694.456.0498.6767zm.00098-9.44042c-.03187.21266-.0494.43015-.05078.65137.00138-.22122.01891-.43871.05078-.65137zm3.60254-3.7832c.0723-.01449.14526-.02707.21875-.03809-.07349.01102-.14645.0236-.21875.03809zm.66504-.08301c-.14548.00737-.2891.02225-.43066.04297.14156-.02072.28518-.0356.43066-.04297zm9.31444 0c.1368.00693.272.02032.4053.03906-.1332-.01872-.2686-.03213-.4053-.03906zm-9.76171 17.13183c-.06758-.0101-.1346-.0221-.20117-.0352.06658.0131.13359.0251.20117.0352zm-2.92578-1.7256c-.0288-.0374-.0573-.075-.08496-.1133.02766.0383.05616.0759.08496.1133zm16.82719-12.11912c.0144.05023.0292.10044.042.15137-.0128-.05093-.0276-.10114-.042-.15137zm.0449.16504c.0166.06713.0313.13485.0449.20312-.0135-.06826-.0284-.13599-.0449-.20312zm.0644.31152c.006.03443.0124.06883.0176.10352-.0052-.03469-.0116-.06909-.0176-.10352zm-17.81246 9.65526c-.00653-.0373-.01393-.0746-.01954-.1123.00561.0377.01301.075.01954.1123zm17.57126-10.5244c.0165.04237.0326.08495.0479.12793-.0153-.04298-.0314-.08556-.0479-.12793zm-14.12888-2.78027c.04696-.01099.09409-.02174.1416-.03125-.04751.00952-.09464.02026-.1416.03125z" fill="url(#a)"/><g opacity=".31"><path d="m3.24438 5.75049v7.11941c0 1.4408.99919 2.6095 2.23108 2.6095h9.00044c1.2319 0 2.231-1.1687 2.231-2.6095v-7.11941z" fill="#fff" fill-opacity=".6"/></g><rect x="6" y="7" width="8" height="1.5" rx="0.75" fill="#eddcff"/><rect x="6" y="10" width="8" height="1.5" rx="0.75" fill="#eddcff"/><rect x="6" y="13" width="5" height="1.5" rx="0.75" fill="#eddcff"/></svg>

package/templates/solid/src/App.tsx

@@ -0,0 +1,150 @@
+import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+import { createSignal } from 'solid-js';
+import { useSdk, useNotify } from './bardioc-sdk';
+
+type ResultState =
+  | { status: 'idle' }
+  | { status: 'loading'; request: string }
+  | { status: 'success'; request: string; data: unknown }
+  | { status: 'error'; request: string; message: string };
+
+function SdkDemo() {
+  const bridge = useSdk();
+  const notify = useNotify();
+  const [result, setResult] = createSignal<ResultState>({ status: 'idle' });
+  const [running, setRunning] = createSignal(false);
+
+  async function runGetProfile() {
+    if (running()) return;
+    setRunning(true);
+
+    const request = 'transport.os.profile.get()';
+    setResult({ status: 'loading', request });
+
+    const startTime = Date.now();
+    notify('Getting user profile', 'info');
+
+    try {
+      const data = await bridge.transport.os.profile.get();
+
+      const duration = Date.now() - startTime;
+      notify(`Profile loaded (${duration}ms)`, 'success');
+      setResult({ status: 'success', request, data });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      notify(`Failed: ${message}`, 'error');
+      setResult({ status: 'error', request, message });
+    }
+
+    setRunning(false);
+  }
+
+  function handleNotify() {
+    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    setResult({
+      status: 'success',
+      request: 'SDK_NOTIFY',
+      data: { ok: true, message: 'Notification sent to OS' },
+    });
+  }
+
+  return (
+    <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
+      <div class="flex flex-col gap-1">
+        <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+        <p class="text-muted-foreground m-0 text-xs leading-5">
+          Minimal hosted-app demo for API transport and SDK APIs.
+        </p>
+      </div>
+
+      <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"
+          onclick={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"
+          onclick={handleNotify}
+          disabled={running()}
+        >
+          Send Notification OS
+        </button>
+        <button
+          class="border-border text-muted-foreground hover:text-foreground rounded border px-3 py-1 text-xs"
+          onclick={() => setResult({ status: 'idle' })}
+          disabled={running()}
+        >
+          Clear
+        </button>
+      </div>
+
+      <div class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
+        {(() => {
+          const r = result();
+          if (r.status === 'idle') {
+            return (
+              <div 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>
+            );
+          }
+          if (r.status === 'loading') {
+            return (
+              <div class="flex h-full flex-col items-center justify-center gap-2 p-3">
+                <div class="text-muted-foreground font-mono text-xs">{r.request}</div>
+                <div class="text-muted-foreground text-xs">Loading…</div>
+              </div>
+            );
+          }
+          if (r.status === 'error') {
+            return (
+              <div class="flex h-full flex-col gap-2 p-3 text-xs">
+                <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
+                  {r.request}
+                </div>
+                <div class="text-destructive whitespace-pre-wrap break-all">{r.message}</div>
+              </div>
+            );
+          }
+          if (r.status === 'success') {
+            return (
+              <div 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">
+                  {r.request}
+                </div>
+                <pre class="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">
+                  {JSON.stringify(r.data, null, 2)}
+                </pre>
+              </div>
+            );
+          }
+        })()}
+      </div>
+    </div>
+  );
+}
+
+export function App() {
+  const showSdkDemo = isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
+
+  return (
+    <div class="bg-background text-foreground min-h-screen">
+      {showSdkDemo ? (
+        <SdkDemo />
+      ) : (
+        <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
+          <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+          <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
+            Open this app inside Bardioc OS to use transport requests and send host notifications.
+          </p>
+          <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
+            Outside the host iframe this page is only a local preview shell.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/solid/src/bardioc-sdk.tsx

@@ -0,0 +1,33 @@
+import { createHostBridge, type HostBridge, type NotifyLevel } from '@bardioc/app-sdk';
+import { createContext, onCleanup, onMount, useContext, type JSX } from 'solid-js';
+
+const BardiocContext = createContext<HostBridge>();
+
+export function AppSdkProvider(props: { appId: string; children: JSX.Element }) {
+	const bridge = createHostBridge({ appId: props.appId });
+
+	onMount(() => {
+		void bridge.connect();
+	});
+
+	onCleanup(() => {
+		bridge.destroy();
+	});
+
+	return <BardiocContext.Provider value={bridge}>{props.children}</BardiocContext.Provider>;
+}
+
+export function useSdk(): HostBridge {
+	const bridge = useContext(BardiocContext);
+	if (!bridge) {
+		throw new Error('useSdk() must be used inside AppSdkProvider');
+	}
+	return bridge;
+}
+
+export function useNotify() {
+	const bridge = useSdk();
+	return (message: string, level?: NotifyLevel) => {
+		bridge.notify(message, level);
+	};
+}

package/templates/solid/src/index.css

@@ -0,0 +1,76 @@
+@import 'tailwindcss';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  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);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+code {
+  font-family: inherit;
+}
+
+.bg-background {
+  background-color: var(--background);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+
+.border-border {
+  border-color: var(--border);
+}
+
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.text-primary-foreground {
+  color: var(--primary-foreground);
+}
+
+.text-destructive {
+  color: var(--destructive);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: var(--ring);
+}
+
+.hover\:bg-primary\/90:hover {
+  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
+}
+
+.hover\:text-foreground:hover {
+  color: var(--foreground);
+}

package/templates/solid/src/main.tsx

@@ -0,0 +1,50 @@
+import {
+  ensureDevAuthSession,
+  installDevBridge,
+  isDevStandalone,
+  isInsideIframe,
+} from '@bardioc/app-sdk/dev';
+import { render } from 'solid-js/web';
+import { App } from './App';
+import { AppSdkProvider } from './bardioc-sdk';
+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 useSdkProvider = insideIframe || devStandalone;
+
+if (useSdkProvider && !APP_ID) {
+  throw new Error('Missing VITE_APP_ID for SDK runtime');
+}
+
+async function bootstrap() {
+  if (devStandalone) {
+    await ensureDevAuthSession({ appId: APP_ID, appName: APP_NAME });
+    installDevBridge({ appId: APP_ID, appName: APP_NAME, debug: false });
+  }
+
+  const root = document.getElementById('root')!;
+
+  if (useSdkProvider) {
+    render(
+      () => (
+        <AppSdkProvider appId={APP_ID!}>
+          <App />
+        </AppSdkProvider>
+      ),
+      root
+    );
+  } else {
+    render(() => <App />, root);
+  }
+}
+
+bootstrap();

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

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

package/templates/solid/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/solid/vite.config.ts

@@ -0,0 +1,17 @@
+import { bardiocApp, bardiocDevAuth } from '@bardioc/app-sdk/vite';
+import tailwindcss from '@tailwindcss/vite';
+import solid from 'vite-plugin-solid';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, '');
+  const appName = env.VITE_APP_NAME?.trim();
+
+  if (!appName) {
+    throw new Error('Missing VITE_APP_NAME for Vite config');
+  }
+
+  return {
+    plugins: [bardiocDevAuth({ appName }), solid(), bardiocApp({ appName, port: {{PORT}} }), tailwindcss()],
+  };
+});

package/templates/svelte/.env.example

@@ -0,0 +1,5 @@
+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=

package/templates/svelte/_gitignore

@@ -0,0 +1,6 @@
+.env
+.env.local
+dist
+node_modules
+*.zip
+.linked/

package/templates/svelte/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="dark" style="height: 100%; margin: 0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{DISPLAY_NAME}}</title>
+    <link rel="stylesheet" href="/fonts/bardioc-fonts.css" />
+  </head>
+  <body style="height: 100%; margin: 0">
+    <div id="app" style="height: 100%"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/svelte/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "{{APP_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bardioc-dev-session -- vite",
+    "dev:live": "BARDIOC_TUNNEL=1 bardioc-dev-session -- vite",
+    "build": "svelte-check && vite build && node scripts/stamp-manifest.mjs dist",
+    "bundle": "svelte-check && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
+    "preview": "vite preview",
+    "check-types": "svelte-check",
+    "changeset": "changeset",
+    "release:status": "changeset status --verbose",
+    "release:version": "changeset version && pnpm install --lockfile-only",
+    "release:publish": "changeset publish"
+  },
+  "dependencies": {
+    "@bardioc/app-sdk": "latest",
+    "svelte": "^5.33.14"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^22.19.19",
+    "svelte-check": "^4.2.1",
+    "tailwindcss": "4.3.0",
+    "typescript": "6.0.3",
+    "vite": "8.0.13"
+  }
+}

package/templates/svelte/public/icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="15.3012" x2="-2.25993" y1="1.77049" y2="12.9254"><stop offset=".4898" stop-color="#c084fc"/><stop offset="1" stop-color="#9333ea"/></linearGradient><path d="m14.3984 3.35791c1.9618.00013 3.5514 1.59021 3.5518 3.55176v8.08593c0 1.9602-1.5896 3.5507-3.5518 3.5508h-8.84567c-1.96194-.0002-3.55273-1.5909-3.55273-3.5527v-8.08403c.00042-1.96151 1.59105-3.55156 3.55273-3.55176zm4.5186 12.18069c.0121-.1019.0221-.2048.0273-.3086.004-.0776.0059-.1559.0059-.2344v-8.08593c0-.18616-.0124-.36951-.0342-.54981.0218.18056.0352.36435.0352.55078v8.08496c0 .1837-.013.3649-.0342.543zm-17.8672.1318c-.03282-.2205-.0498-.4471-.0498-.6767 0 .2298.01694.456.0498.6767zm.00098-9.44042c-.03187.21266-.0494.43015-.05078.65137.00138-.22122.01891-.43871.05078-.65137zm3.60254-3.7832c.0723-.01449.14526-.02707.21875-.03809-.07349.01102-.14645.0236-.21875.03809zm.66504-.08301c-.14548.00737-.2891.02225-.43066.04297.14156-.02072.28518-.0356.43066-.04297zm9.31444 0c.1368.00693.272.02032.4053.03906-.1332-.01872-.2686-.03213-.4053-.03906zm-9.76171 17.13183c-.06758-.0101-.1346-.0221-.20117-.0352.06658.0131.13359.0251.20117.0352zm-2.92578-1.7256c-.0288-.0374-.0573-.075-.08496-.1133.02766.0383.05616.0759.08496.1133zm16.82719-12.11912c.0144.05023.0292.10044.042.15137-.0128-.05093-.0276-.10114-.042-.15137zm.0449.16504c.0166.06713.0313.13485.0449.20312-.0135-.06826-.0284-.13599-.0449-.20312zm.0644.31152c.006.03443.0124.06883.0176.10352-.0052-.03469-.0116-.06909-.0176-.10352zm-17.81246 9.65526c-.00653-.0373-.01393-.0746-.01954-.1123.00561.0377.01301.075.01954.1123zm17.57126-10.5244c.0165.04237.0326.08495.0479.12793-.0153-.04298-.0314-.08556-.0479-.12793zm-14.12888-2.78027c.04696-.01099.09409-.02174.1416-.03125-.04751.00952-.09464.02026-.1416.03125z" fill="url(#a)"/><g opacity=".31"><path d="m3.24438 5.75049v7.11941c0 1.4408.99919 2.6095 2.23108 2.6095h9.00044c1.2319 0 2.231-1.1687 2.231-2.6095v-7.11941z" fill="#fff" fill-opacity=".6"/></g><rect x="6" y="7" width="8" height="1.5" rx="0.75" fill="#eddcff"/><rect x="6" y="10" width="8" height="1.5" rx="0.75" fill="#eddcff"/><rect x="6" y="13" width="5" height="1.5" rx="0.75" fill="#eddcff"/></svg>

package/templates/svelte/src/App.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { HostBridge, NotifyLevel } from '@bardioc/app-sdk';
+  import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+  import { type Snippet } from 'svelte';
+  import './index.css';
+
+  type ResultState =
+    | { status: 'idle' }
+    | { status: 'loading'; request: string }
+    | { status: 'success'; request: string; data: unknown }
+    | { status: 'error'; request: string; message: string };
+
+  let { bridge = null, children }: { bridge?: HostBridge | null; children?: Snippet } = $props();
+
+  const showSdkDemo = isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
+
+  let result = $state<ResultState>({ status: 'idle' });
+  let running = $state(false);
+
+  function notify(message: string, level?: NotifyLevel) {
+    bridge?.notify(message, level);
+  }
+
+  async function runGetProfile() {
+    if (running || !bridge) return;
+    running = true;
+
+    const request = 'transport.os.profile.get()';
+    result = { status: 'loading', request };
+
+    const startTime = Date.now();
+    notify('Getting user profile', 'info');
+
+    try {
+      const data = await bridge.transport.os.profile.get();
+
+      const duration = Date.now() - startTime;
+      notify(`Profile loaded (${duration}ms)`, 'success');
+      result = { status: 'success', request, data };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      notify(`Failed: ${message}`, 'error');
+      result = { status: 'error', request, message };
+    }
+
+    running = false;
+  }
+
+  function handleNotify() {
+    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    result = {
+      status: 'success',
+      request: 'SDK_NOTIFY',
+      data: { ok: true, message: 'Notification sent to OS' },
+    };
+  }
+
+  function clearResult() {
+    result = { status: 'idle' };
+  }
+</script>
+
+<div class="bg-background text-foreground min-h-screen">
+  {#if showSdkDemo}
+    <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
+      <div class="flex flex-col gap-1">
+        <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+        <p class="text-muted-foreground m-0 text-xs leading-5">
+          Minimal hosted-app demo for API transport and SDK APIs.
+        </p>
+      </div>
+
+      <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"
+          onclick={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"
+          onclick={handleNotify}
+          disabled={running}
+        >
+          Send Notification OS
+        </button>
+        <button
+          class="border-border text-muted-foreground hover:text-foreground rounded border px-3 py-1 text-xs"
+          onclick={clearResult}
+          disabled={running}
+        >
+          Clear
+        </button>
+      </div>
+
+      <div class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
+        {#if result.status === 'idle'}
+          <div 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>
+        {:else if result.status === 'loading'}
+          <div 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>
+        {:else if result.status === 'error'}
+          <div class="flex h-full flex-col gap-2 p-3 text-xs">
+            <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
+              {result.request}
+            </div>
+            <div class="text-destructive whitespace-pre-wrap break-all">{result.message}</div>
+          </div>
+        {:else if result.status === 'success'}
+          <div 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>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {:else}
+    <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
+      <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+      <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
+        Open this app inside Bardioc OS to use transport requests and send host notifications.
+      </p>
+      <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
+        Outside the host iframe this page is only a local preview shell.
+      </div>
+    </div>
+  {/if}
+</div>