@bardioc/create-bardioc-app 0.4.0 → 0.5.2

package/templates/vite/CLAUDE.md

@@ -1,6 +1,13 @@
 # {{DISPLAY_NAME}}
 
-Bardioc app. Vite + React 19 + TypeScript 6 + @bardioc/app-sdk.
+Bardioc hosted app. Vite + React 19 + TypeScript 6 + `@bardioc/app-sdk`, with
+`@bardioc/ui` (components + theme), `@bardioc/i18n` (translations), and `@bardioc/types`.
+
+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,
+charts, a searchable/filterable `DataTable`, combobox, language switcher), translations,
+the SDK transport (graph + OS), notifications, app-scoped IndexedDB persistence, and an
+explicit auth-onboarding screen. Build your app by editing these pieces.
 
 **Global rules apply.**
 
@@ -8,16 +15,53 @@ Bardioc app. Vite + React 19 + TypeScript 6 + @bardioc/app-sdk.
 
 ## Code style
 
-### Comments
+- Single-line comments only (`// WHY, not WHAT`); no `/* */` blocks; no task refs.
+- 150–200 LOC per component, 600 LOC hard max per file. Decompose early.
+- Constants: `SCREAMING_SNAKE_CASE`. Prefer `switch`/early-return over long `else-if`.
+
+---
 
-- Single-line: `// WHY, not WHAT`
-- No `/* */` blocks
-- No task refs
+## Structure
 
-### Constraints
+```
+src/
+  main.tsx                # providers: AppSdkProvider (in host) + AppI18nProvider
+  App.tsx                 # auth gate → DashboardProvider+AppShell, or Onboarding
+  index.css               # Tailwind v4 + @bardioc/ui theme tokens
+  i18n.tsx                # I18nProvider, OS-locale sync, useTranslation/useI18n
+  locales/                # en.json / de.json translation strings
+  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
+  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)
+    header.tsx            # location combobox + language switcher + sync
+  climate/
+    types.ts              # Station/ClimateState + METRICS config (icon, unit, color)
+    climate-data.ts       # demo-data generator (replace with your real source)
+    use-climate.ts        # hook: IndexedDB load/persist + OS-probe sync + history
+    overview-view.tsx     # location card + metrics + chart + persistence indicator
+    stations-view.tsx     # DataTable (search + FilterDropdown + row select)
+    location-card.tsx     # Card + BadgeStatus widget
+    metrics-grid.tsx      # GenericMetrics widget (5 readings)
+    conditions-chart.tsx  # BarChartMultiple widget (7-day outlook)
+    location-select.tsx   # Combobox station switcher
+  events/
+    live-events-view.tsx  # live graph events via useGraphEvents (SSE, permission "events")
+  graph/
+    requests.ts           # catalog of every SDK transport request (graph + OS)
+    explorer-view.tsx     # run real requests; mock fallback when unauthorized
+  profile/
+    use-profile.ts        # os.profile fetch (+ operatorLabel helper)
+    profile-view.tsx      # real profile data + error state
+```
 
-- 600 LOC max per file
-- Constants: `SCREAMING_SNAKE_CASE`
+Views are selected from the sidebar (`ViewId` in `climate/types.ts`); each view consumes
+shared state from `useDashboard()`. The same sections are also driven from the **OS top menu**
+(`useCommandMenu` in `app-shell.tsx`): each view is a checkable command under a `View` menu, plus
+an `app`-kind root next to the host's About / Version entries — the example of OS menu integration.
 
 ---
 
@@ -30,85 +74,180 @@ pnpm build            # → dist/
 pnpm bundle           # → {{APP_NAME}}.zip
 ```
 
-`.env`:
-
-```bash
-VITE_APP_NAME={{APP_NAME}}
-VITE_APP_ID=your-app-id
-VITE_ENABLE_DEV_AUTH=true
-DEV_AUTH_HOST_URL=https://your-host
-DEV_SESSION_KEY=
-```
-
-Standalone host-backed dev sessions are opt-in. Without `VITE_ENABLE_DEV_AUTH=true`, local `pnpm dev` runs outside the host iframe as a preview shell only and will not call the dev-session flow. Run `bardioc login` once, then `pnpm dev` will mint and refresh `DEV_SESSION_KEY` automatically.
+`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.
 
 ---
 
-## SDK API
+## UI — `@bardioc/ui`
 
-**Graph API**
-Access the graph database via `bridge.transport.graph.*`:
+Tailwind v4 + the Bardioc design system. **Never restyle with raw hex/oklch** — use the theme
+tokens (`bg-background`, `text-foreground`, `text-muted-foreground`, `bg-card`, `border-border`,
+`bg-primary`, and chart tokens `var(--chart-1..5)`). Theme is wired in `src/index.css`:
 
-```typescript
-const bridge = useSdk();
-await bridge.transport.graph.get('node-id');
-await bridge.transport.graph.gremlin('node-id', 'g.V().limit(10)');
+```css
+@import 'tailwindcss';
+@import '@bardioc/ui/styles/theme.css';
+@import '@bardioc/ui/styles/components.css';
+@source './**/*.{ts,tsx}';
 ```
 
-**OS API**
-Access OS resources via `bridge.transport.os.*`:
+Import components from the public subpaths (never reach into `@bardioc/ui/src`):
 
 ```typescript
-await bridge.transport.os.profile.get();
-await bridge.transport.os.organization.getStructure();
+import {
+  Badge,
+  BadgeStatus,
+  Button,
+  Card,
+  Combobox,
+  CheckboxGroup,
+  ConnectedLanguageSwitcher,
+  DataTable,
+  Empty,
+  FilterDropdown,
+  Kbd,
+  SidebarBasic,
+  SidebarContainedProvider,
+  SortableColumnHeader,
+  Toaster,
+  TruncatedCellText,
+  toast,
+} from '@bardioc/ui/components';
+import { GenericMetrics } from '@bardioc/ui/components/metrics';
+import { BarChartMultiple } from '@bardioc/ui/components/charts';
+import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
+import type { TReactTable } from '@bardioc/ui/types'; // TReactTable.ColumnDef<Row>
 ```
 
-**Notifications**
+Prefer a Bardioc component over a raw HTML element. Icons come from `lucide-react`. The
+sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
+OS windows); the language switcher is `ConnectedLanguageSwitcher useI18n={useI18n}`.
 
-```typescript
-const notify = useNotify();
-notify('Done', 'success');
-```
+---
+
+## i18n — `@bardioc/i18n`
 
-**Provider** (only in iframe)
+All user-facing strings go through `t()`. Locales: `en`, `de` (`@bardioc/types`).
 
 ```typescript
-const isInsideIframe = window.parent !== window;
-{isInsideIframe && (
-  <AppSdkProvider appId={APP_ID}><App /></AppSdkProvider>
-)}
+import { useTranslation } from './i18n';
+
+const { t } = useTranslation();
+t('metrics.oxygen', { fallback: 'Oxygen' });
+t('overview.updated', { fallback: 'Updated {time}', params: { time } });
 ```
 
+- Add a string → add the key to **both** `src/locales/en.json` and `src/locales/de.json`.
+- `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.
+
 ---
 
-## Anti-patterns
+## Persistence — app-scoped IndexedDB
 
-**❌ bridge.notify in components**
+The SDK gives every app a sandboxed IndexedDB via `bridge.idb(storeName)`. Requires the
+`"indexdb"` permission (already in `public/app-manifest.json`).
 
 ```typescript
-function MyComponent() {
-  const bridge = useSdk();
-  bridge.notify('Done', 'success');
-}
+const store = bridge.idb('climate');
+await store.put('state', value);
+const saved = await store.get<ClimateState>('state');
+await store.query({ prefix: 'log:', limit: 50 }); // history — see use-climate.ts
 ```
 
-**✅ useNotify hook**
+The Overview shows a live "Persisted to IndexedDB · Saved … · N snapshots" indicator so the
+write path is visible. For small key-value state, `bridge.storage.get/set/delete` (permission
+`"storage"`) is simpler.
 
-```typescript
-function MyComponent() {
-  const notify = useNotify();
-  notify('Done', 'success');
-}
-```
+---
 
-**❌ provider outside iframe**
+## SDK API
 
 ```typescript
-<AppSdkProvider appId={APP_ID}><App /></AppSdkProvider>
+const bridge = useSdk(); // host bridge (only inside the host/dev session)
+const notify = useAppNotify(); // OS host notification + local toast (src/use-app-notify.ts)
+const osConfig = useOsConfig(); // { theme, language, instanceId, ... }
 ```
 
-**✅ conditional rendering**
+**Graph** — `bridge.transport.graph.*`: `get(id)`, `getByXid`, `query(lucene, opts)`,
+`gremlin(rootId, query)`, `create`, `update`, `connect`, `timeseries.get/query`. Note: `query`
+resolves to a `{ items: [...] }` envelope at runtime (not a bare array) — normalize before
+indexing, and escape `/` in Lucene as `\/` (`ogit\/_type:"…"`). Hard-coded ids/types won't exist
+in every instance: discover them from a wildcard `query('*')` first (see `graph/requests.ts`).
+
+**OS** — `bridge.transport.os.*`: `profile.get()`, `organization.getStructure()`, `applications.list()`.
+
+**Live events** — `useGraphEvents({ types }, handler)` (`@bardioc/app-sdk/react`) opens a scoped
+graph-event SSE stream while mounted (permission `"events"`). Each `handler` receives a
+`GraphEvent` (`id`, `type`, `timestamp`, `body?`). See `events/live-events-view.tsx`. No events
+arrive outside a valid session — render an empty state.
+
+**OS menu** — `useCommandMenu(commands, menu)` (`@bardioc/app-sdk/react`) pushes an app menu tree
+into the host menu bar. `commands` are `{ id, title, checked?, handler }`; `menu` is `SdkMenuRoot[]`
+where each root has `label`, optional `kind: 'app'`, and `items` of `{ type: 'command', commandId,
+label?, leftIcon? }`. `leftIcon` is a lucide export name (string) the host resolves. See
+`shell/app-shell.tsx` — view switching is mirrored here as checkable commands.
+
+The **Graph Explorer** view runs the full catalog in `graph/requests.ts` against the live
+transport. The graph presets issue real calls — a wildcard `query('*')`, a query by the type of a
+real node, a node `get`, and a Gremlin `both()` neighbor traversal. The typed/get/gremlin presets
+each pull a real id and type from a wildcard query first (`sampleNodes` → `toItems`), so they
+return live data instead of empties. Network calls fail (401/timeout) outside a valid session —
+always `try/catch` and fall back (see `use-climate.ts` and `explorer-view.tsx`, which show
+simulated data).
 
-```typescript
-{isInsideIframe && <AppSdkProvider appId={APP_ID}><App /></AppSdkProvider>}
-```
+---
+
+## Manifest — `public/app-manifest.json`
+
+The starter ships a full manifest as a showcase of every supported field (validated by
+`validateManifest` in `@bardioc/app-sdk`):
+
+- `permissions`: `notify`, `transport`, `indexdb`, `events` (the APIs this app actually uses).
+  Other valid values: `storage` (host-deferred) and the deprecated `kernel-proxy` — do not add
+  `kernel-proxy` for hosted apps.
+- `window`: `size` (`xs|sm|md|lg|xl` or a custom `{ width, height, minWidth?, minHeight? }`),
+  `resizable`, `maximizable`, `minimizable`, `customScroll`, `centered`, `isHeaderless`,
+  `isInstanceAware`, `canHaveMultipleWindows`.
+- Metadata: `author`, `categories`, `showInDock`, `showInDockAppsMenu`.
+
+Trim any field you don't need — only `manifestVersion`, `id`, `name`, `version` are required.
+
+---
+
+## How to…
+
+- **Add a metric tile** → add a `MetricDef` (key, icon, unit, color) to `METRICS` in `types.ts`,
+  add the field to `ClimateReading` + the generator, and add `metrics.*` strings to `src/locales/{en,de}.json`.
+- **Add a view** → add a `ViewId` (`climate/types.ts`), a `NAV` entry + `case` in `shell/app-shell.tsx`,
+  a `nav.*` string in `src/locales/{en,de}.json`, and the view component. The `NAV` entry (with its
+  `iconName`) is auto-wired into both the sidebar and the OS `View` menu.
+- **Add an OS menu command** → add an `AppCommand` (`{ id, title, handler }`) and a matching
+  `{ type: 'command', commandId }` item under a `SdkMenuRoot` in `app-shell.tsx`; set `checked` for
+  toggles. Add any `menu.*` label to `src/locales/{en,de}.json`.
+- **Add a table column** → push a `TReactTable.ColumnDef<Station>` in `stations-view.tsx`.
+- **Add an SDK request** → add an entry to `SDK_REQUESTS` in `graph/requests.ts` (it shows in the Explorer).
+- **Use real data** → replace `generateState()` with `bridge.transport.graph.*` calls in
+  `use-climate.ts`; keep the IndexedDB write so it persists across reloads.
+- **Read the manifest** → `fetch(\`${import.meta.env.BASE_URL}app-manifest.json\`)`(served at the
+Vite base in dev and inside the host). See`shell/about-dialog.tsx` — it shows version, id,
+  description, and permissions straight from the manifest.
+
+---
+
+## Anti-patterns
+
+| ❌ Don't                                     | ✅ Do                                                 |
+| -------------------------------------------- | ----------------------------------------------------- |
+| `bridge.notify(...)` in a component          | `const notify = useNotify()`                          |
+| `<AppSdkProvider>` rendered outside the host | gate on `isInsideIframe()` / dev session (`main.tsx`) |
+| raw `#1a1a1a` / `oklch(...)` colors          | theme tokens (`bg-card`, `var(--chart-1)`)            |
+| hard-code a label string                     | `t('key', { fallback })` in `en` **and** `de`         |
+| reach into `@bardioc/ui/src/...`             | import from `@bardioc/ui/components` etc.             |

package/templates/vite/package.json

@@ -4,19 +4,23 @@
   "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": "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:version": "changeset version && npm install",
     "release:publish": "changeset publish"
   },
   "dependencies": {
     "@bardioc/app-sdk": "latest",
+    "@bardioc/i18n": "^0.1.6",
+    "@bardioc/types": "^0.3.0",
+    "@bardioc/ui": "^0.2.11",
+    "lucide-react": "^0.544.0",
     "react": "19.2.6",
     "react-dom": "19.2.6"
   },

package/templates/vite/public/app-manifest.json

@@ -0,0 +1,25 @@
+{
+  "manifestVersion": 2,
+  "id": "{{APP_NAME}}",
+  "name": "{{DISPLAY_NAME}}",
+  "description": "{{DISPLAY_NAME}} — a Bardioc hosted app",
+  "version": "0.0.1",
+  "entry": "index.html",
+  "icon": "icon.svg",
+  "author": { "name": "{{DISPLAY_NAME}} Team" },
+  "categories": ["productivity"],
+  "permissions": ["notify", "transport", "indexdb", "events"],
+  "showInDock": true,
+  "showInDockAppsMenu": true,
+  "window": {
+    "size": "lg",
+    "resizable": true,
+    "maximizable": true,
+    "minimizable": true,
+    "customScroll": false,
+    "centered": false,
+    "isHeaderless": false,
+    "isInstanceAware": false,
+    "canHaveMultipleWindows": false
+  }
+}

package/templates/vite/src/App.tsx

@@ -1,141 +1,19 @@
 import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
-import { useSdk, useNotify } from '@bardioc/app-sdk/react';
-import { useState } from 'react';
+import { Onboarding } from './auth/onboarding';
+import { DashboardProvider } from './dashboard-provider';
+import { AppShell } from './shell/app-shell';
 
-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] = useState<ResultState>({ status: 'idle' });
-  const [running, setRunning] = useState(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);
-  }
+export function App() {
+  const authorized =
+    isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
 
-  function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
-    setResult({
-      status: 'success',
-      request: 'SDK_NOTIFY',
-      data: { ok: true, message: 'Notification sent to OS' },
-    });
+  if (!authorized) {
+    return <Onboarding />;
   }
 
   return (
-    <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
-      <div className="flex flex-col gap-1">
-        <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
-        <p className="text-muted-foreground m-0 text-xs leading-5">
-          Minimal hosted-app demo for API transport and SDK APIs.
-        </p>
-      </div>
-
-      <div className="flex flex-wrap gap-2">
-        <button
-          className="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={() => void runGetProfile()}
-          disabled={running}
-        >
-          Get Profile
-        </button>
-        <button
-          className="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
-          className="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 className="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
-        {result.status === 'idle' && (
-          <div className="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>
-        )}
-        {result.status === 'loading' && (
-          <div className="flex h-full flex-col items-center justify-center gap-2 p-3">
-            <div className="text-muted-foreground font-mono text-xs">{result.request}</div>
-            <div className="text-muted-foreground text-xs">Loading…</div>
-          </div>
-        )}
-        {result.status === 'error' && (
-          <div className="flex h-full flex-col gap-2 p-3 text-xs">
-            {result.request && (
-              <div className="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
-                {result.request}
-              </div>
-            )}
-            <div className="text-destructive whitespace-pre-wrap break-all">{result.message}</div>
-          </div>
-        )}
-        {result.status === 'success' && (
-          <div className="flex h-full flex-col gap-0 overflow-hidden">
-            <div className="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs">
-              {result.request}
-            </div>
-            <pre className="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">
-              {JSON.stringify(result.data, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
-    </div>
+    <DashboardProvider>
+      <AppShell />
+    </DashboardProvider>
   );
 }
-
-export function App() {
-  const showSdkDemo = isInsideIframe() || (import.meta.env.VITE_ENABLE_DEV_AUTH === 'true' && isDevStandalone());
-
-  return (
-    <div className="bg-background text-foreground min-h-screen">
-      {showSdkDemo ? (
-        <SdkDemo />
-      ) : (
-        <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
-          <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
-          <p className="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 className="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/vite/src/auth/onboarding.tsx

@@ -0,0 +1,67 @@
+import { isInsideIframe } from '@bardioc/app-sdk/dev';
+import { Button, Empty, Kbd } from '@bardioc/ui/components';
+import { PlugZap } from 'lucide-react';
+import { useTranslation } from '../i18n';
+
+function DetectedRow({ label, ok }: Readonly<{ label: string; ok: boolean }>) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className="text-muted-foreground">{label}</span>
+      <span className={ok ? 'text-success' : 'text-muted-foreground'}>
+        {ok ? t('auth.yes', { fallback: 'yes' }) : t('auth.no', { fallback: 'no' })}
+      </span>
+    </div>
+  );
+}
+
+export function Onboarding() {
+  const { t } = useTranslation();
+  const insideHost = isInsideIframe();
+  const devAuth = import.meta.env.VITE_ENABLE_DEV_AUTH === 'true';
+
+  return (
+    <Empty
+      fullPage
+      icon={PlugZap}
+      iconVariant="chip"
+      titleSize="lg"
+      title={t('auth.title', { fallback: 'Connect to Bardioc OS' })}
+      description={t('auth.description', {
+        fallback: 'This dashboard reads live data through the Bardioc SDK transport.',
+      })}
+      actions={
+        <Button onClick={() => globalThis.location.reload()}>
+          {t('auth.retry', { fallback: 'Reload' })}
+        </Button>
+      }
+    >
+      <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:' })}
+        </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>
+          </li>
+          <li>
+            <div>{t('auth.step3', { fallback: 'Start the dev server:' })}</div>
+            <Kbd>pnpm dev</Kbd>
+          </li>
+        </ol>
+        <div className="border-border mt-3 space-y-1 border-t pt-3">
+          <p className="text-foreground font-medium">
+            {t('auth.detectedTitle', { fallback: 'Detected environment' })}
+          </p>
+          <DetectedRow
+            label={t('auth.insideHost', { fallback: 'Inside host iframe' })}
+            ok={insideHost}
+          />
+          <DetectedRow label={t('auth.devAuth', { fallback: 'Dev auth enabled' })} ok={devAuth} />
+        </div>
+      </div>
+    </Empty>
+  );
+}