@bardioc/create-bardioc-app 0.4.0 → 0.5.2

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

@@ -0,0 +1,141 @@
+{
+  "app": { "title": "Weather Dashboard", "tagline": "Live planetary readings" },
+  "nav": {
+    "overview": "Overview",
+    "stations": "Stations",
+    "explorer": "Graph Explorer",
+    "events": "Live Events",
+    "profile": "Profile"
+  },
+  "menu": {
+    "view": "View",
+    "about": "About this app"
+  },
+  "about": {
+    "title": "About this app",
+    "version": "Version",
+    "id": "App ID",
+    "description": "Description",
+    "permissions": "Permissions",
+    "error": "Could not read app-manifest.json",
+    "source": "Read live from public/app-manifest.json"
+  },
+  "genericTable": {
+    "filterPlaceholder": "Filter results...",
+    "itemLabel": "rows",
+    "showing": "{from} to {to} of {total}",
+    "columns": "Columns",
+    "noResults": "No results found.",
+    "goToPreviousPage": "Go to previous page",
+    "goToNextPage": "Go to next page"
+  },
+  "common": { "button": { "previous": "Previous", "next": "Next" } },
+  "header": {
+    "search": "Search stations…",
+    "sync": "Sync",
+    "syncing": "Syncing…",
+    "location": "Station",
+    "savedAt": "Saved {time}",
+    "neverSaved": "Not yet saved"
+  },
+  "auth": {
+    "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:",
+    "detectedTitle": "Detected environment",
+    "insideHost": "Inside host iframe",
+    "devAuth": "Dev auth enabled",
+    "yes": "yes",
+    "no": "no",
+    "retry": "Reload"
+  },
+  "overview": {
+    "operator": "Operator",
+    "noOperator": "Operator unavailable",
+    "updated": "Updated {time}",
+    "persistence": "Persisted to IndexedDB",
+    "notPersisted": "Preview — not persisted (open inside Bardioc OS to persist)",
+    "historyOne": "{count} snapshot in history",
+    "historyOther": "{count} snapshots in history",
+    "source": "Source"
+  },
+  "conditions": { "sunny": "Sunny", "cloudy": "Cloudy", "rainy": "Rainy" },
+  "source": { "graph": "Bardioc graph", "mock": "Simulated" },
+  "metrics": {
+    "oxygen": "Oxygen",
+    "temperature": "Surface temp",
+    "humidity": "Humidity",
+    "windSpeed": "Wind speed",
+    "vegetation": "Vegetation",
+    "oxygenHint": "Atmospheric mix",
+    "temperatureHint": "Ground level",
+    "humidityHint": "Relative",
+    "windSpeedHint": "Sustained",
+    "vegetationHint": "Surface cover"
+  },
+  "chart": { "title": "7-day outlook", "description": "Daylight hours by condition" },
+  "stations": {
+    "title": "Monitoring stations",
+    "description": "All stations reporting to this instance. Search, filter, or select one.",
+    "search": "Search stations…",
+    "filter": "Condition",
+    "colName": "Station",
+    "colRegion": "Region",
+    "colCondition": "Condition",
+    "colTemp": "Temp",
+    "colHumidity": "Humidity",
+    "colVegetation": "Vegetation",
+    "itemLabel": "stations",
+    "empty": "No stations match your filters",
+    "apply": "Apply",
+    "clear": "Clear"
+  },
+  "explorer": {
+    "title": "Graph Explorer",
+    "description": "Run real Bardioc SDK transport requests. Without a session, each request falls back to simulated data so you can still explore the shape.",
+    "run": "Run request",
+    "running": "Running…",
+    "empty": "Select a request and run it to see the response",
+    "live": "Live",
+    "mock": "Simulated",
+    "categoryGraph": "Graph",
+    "categoryOs": "OS",
+    "request": "Request",
+    "durationMs": "{ms} ms"
+  },
+  "profile": {
+    "title": "Operator profile",
+    "description": "Pulled live from the OS transport (os.profile).",
+    "name": "Name",
+    "displayName": "Display name",
+    "firstName": "First name",
+    "lastName": "Last name",
+    "email": "Email",
+    "id": "ID",
+    "organization": "Organization",
+    "units": "Units",
+    "members": "Members",
+    "raw": "Raw response",
+    "errorTitle": "Could not load profile",
+    "errorHint": "The transport returned an error. Authorize a session, then reload.",
+    "unknown": "Unknown"
+  },
+  "events": {
+    "title": "Live Events",
+    "description": "Live graph events streamed from the OS over SSE (permission \"events\").",
+    "emptyTitle": "Waiting for events",
+    "emptyHost": "No graph events yet — activity will appear here as it happens.",
+    "emptyStandalone": "Open inside Bardioc OS (or a dev session) to receive live events."
+  },
+  "notify": {
+    "synced": "Synced {count} stations",
+    "saved": "Saved to IndexedDB",
+    "stationSelected": "Active station: {name}",
+    "localeChanged": "Language switched to {locale}",
+    "queryOk": "Request ok ({ms} ms)",
+    "queryFailed": "Request failed — showing simulated data"
+  }
+}

package/templates/vite/src/main.tsx

@@ -8,11 +8,13 @@ import { AppSdkProvider } from '@bardioc/app-sdk/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
+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';
+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');
@@ -35,10 +37,14 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {useSdkProvider ? (
       <AppSdkProvider appId={APP_ID}>
-        <App />
+        <AppI18nProvider syncWithOs>
+          <App />
+        </AppI18nProvider>
       </AppSdkProvider>
     ) : (
-      <App />
+      <AppI18nProvider>
+        <App />
+      </AppI18nProvider>
     )}
   </StrictMode>
-);
+);

package/templates/vite/src/profile/profile-view.tsx

@@ -0,0 +1,75 @@
+import { Avatar, Card, Empty } from '@bardioc/ui/components';
+import { UserX } from 'lucide-react';
+import { useDashboard } from '../dashboard-provider';
+import { useTranslation } from '../i18n';
+import { operatorLabel } from './use-profile';
+
+function Row({ label, value }: Readonly<{ label: string; value: string }>) {
+  return (
+    <div className="flex items-baseline gap-2 text-sm">
+      <span className="text-muted-foreground w-28 shrink-0">{label}</span>
+      <span className="truncate font-medium">{value}</span>
+    </div>
+  );
+}
+
+function asString(value: unknown, fallback: string): string {
+  return typeof value === 'string' && value.trim() ? value : fallback;
+}
+
+export function ProfileView() {
+  const { t } = useTranslation();
+  const { profile } = useDashboard();
+  const unknown = t('profile.unknown', { fallback: 'Unknown' });
+
+  if (profile.loading) {
+    return <p className="text-muted-foreground p-6 text-sm">…</p>;
+  }
+
+  if (profile.error || !profile.profile) {
+    return (
+      <Empty
+        icon={UserX}
+        iconVariant="chip"
+        title={t('profile.errorTitle', { fallback: 'Could not load profile' })}
+        description={profile.error ?? t('profile.errorHint', { fallback: '' })}
+      />
+    );
+  }
+
+  const data = profile.profile;
+  const name = operatorLabel(data) ?? unknown;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h2 className="text-lg font-semibold">
+          {t('profile.title', { fallback: 'Operator profile' })}
+        </h2>
+        <p className="text-muted-foreground text-xs">
+          {t('profile.description', { fallback: '' })}
+        </p>
+      </div>
+
+      <Card>
+        <div className="flex items-center gap-4">
+          <Avatar firstName={name} size="lg" />
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <Row
+              label={t('profile.displayName', { fallback: 'Display name' })}
+              value={asString(data.display_name, unknown)}
+            />
+            <Row
+              label={t('profile.firstName', { fallback: 'First name' })}
+              value={asString(data.first_name, unknown)}
+            />
+            <Row
+              label={t('profile.lastName', { fallback: 'Last name' })}
+              value={asString(data.last_name, unknown)}
+            />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/vite/src/profile/use-profile.ts

@@ -0,0 +1,52 @@
+import { useSdk } from '@bardioc/app-sdk/react';
+import { useEffect, useState } from 'react';
+
+type Record_ = Record<string, unknown>;
+
+export interface ProfileState {
+  loading: boolean;
+  profile: Record_ | null;
+  error: string | null;
+}
+
+// os.profile.get() returns the BFF profile in snake_case (display_name, first_name, last_name).
+function profileString(profile: Record_, key: string): string {
+  const value = profile[key];
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+export function operatorLabel(profile: Record_ | null): string | null {
+  if (!profile) return null;
+  const display = profileString(profile, 'display_name') || profileString(profile, 'name');
+  if (display) return display;
+  const full =
+    `${profileString(profile, 'first_name')} ${profileString(profile, 'last_name')}`.trim();
+  return full || null;
+}
+
+export function useProfile(): ProfileState {
+  const bridge = useSdk();
+  const [state, setState] = useState<ProfileState>({
+    loading: true,
+    profile: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      try {
+        const profile = (await bridge.transport.os.profile.get()) as Record_;
+        if (active) setState({ loading: false, profile, error: null });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        if (active) setState({ loading: false, profile: null, error: message });
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [bridge]);
+
+  return state;
+}

package/templates/vite/src/shell/about-dialog.tsx

@@ -0,0 +1,129 @@
+import { BardiocLogoIcon, Dialog } from '@bardioc/ui/components';
+import { HashIcon, PackageIcon, ShieldCheckIcon, TagIcon } from 'lucide-react';
+import { useEffect, useState, type ReactNode } from 'react';
+import { useTranslation } from '../i18n';
+
+interface AppManifest {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  permissions?: string[];
+}
+
+interface AboutDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// Reads the app's own manifest (public/app-manifest.json) at runtime. The manifest is served at
+// the Vite base path, so the same code works in dev and inside the host — this is the example of
+// reading metadata (name, version, permissions) from the manifest instead of hard-coding it.
+async function loadManifest(): Promise<AppManifest> {
+  const response = await fetch(`${import.meta.env.BASE_URL}app-manifest.json`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to load manifest: ${response.status}`);
+  }
+  return (await response.json()) as AppManifest;
+}
+
+function AboutRow({
+  icon,
+  label,
+  value,
+}: Readonly<{ icon: ReactNode; label: string; value: string }>) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg p-2">
+      <div className="text-foreground flex items-center gap-2">
+        {icon}
+        <span className="text-xs font-semibold">{label}</span>
+      </div>
+      <span className="text-muted-foreground truncate text-xs">{value}</span>
+    </div>
+  );
+}
+
+export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>) {
+  const { t } = useTranslation();
+  const [manifest, setManifest] = useState<AppManifest | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    let cancelled = false;
+    setFailed(false);
+    loadManifest()
+      .then(data => {
+        if (!cancelled) {
+          setManifest(data);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setFailed(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const dash = '—';
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      modal
+      showCloseOnHeader
+      width={440}
+      title={t('about.title', { fallback: 'About this app' })}
+    >
+      <div className="flex flex-col items-center gap-4 px-2 pb-2">
+        <div className="flex flex-col items-center gap-2 py-2">
+          <BardiocLogoIcon width={48} height={48} aria-hidden="true" />
+          <h2 className="text-lg font-semibold">
+            {manifest?.name ?? t('app.title', { fallback: 'Weather Dashboard' })}
+          </h2>
+        </div>
+
+        {failed ? (
+          <p className="text-destructive text-sm">
+            {t('about.error', { fallback: 'Could not read app-manifest.json' })}
+          </p>
+        ) : (
+          <div className="w-full">
+            <AboutRow
+              icon={<TagIcon className="size-4" />}
+              label={t('about.version', { fallback: 'Version' })}
+              value={manifest?.version ?? dash}
+            />
+            <AboutRow
+              icon={<HashIcon className="size-4" />}
+              label={t('about.id', { fallback: 'App ID' })}
+              value={manifest?.id ?? dash}
+            />
+            <AboutRow
+              icon={<PackageIcon className="size-4" />}
+              label={t('about.description', { fallback: 'Description' })}
+              value={manifest?.description ?? dash}
+            />
+            <AboutRow
+              icon={<ShieldCheckIcon className="size-4" />}
+              label={t('about.permissions', { fallback: 'Permissions' })}
+              value={manifest?.permissions?.join(', ') ?? dash}
+            />
+          </div>
+        )}
+
+        <p className="text-muted-foreground text-center text-xs">
+          {t('about.source', { fallback: 'Read live from public/app-manifest.json' })}
+        </p>
+      </div>
+    </Dialog>
+  );
+}

package/templates/vite/src/shell/app-shell.tsx

@@ -0,0 +1,160 @@
+import type { SdkMenuRoot } from '@bardioc/app-sdk';
+import { useCommandMenu, type AppCommand } from '@bardioc/app-sdk/react';
+import {
+  BardiocLogoIcon,
+  SidebarBasic,
+  SidebarContainedProvider,
+  Toaster,
+} from '@bardioc/ui/components';
+import { ScrollArea } from '@bardioc/ui/shadcn';
+import {
+  Activity,
+  LayoutDashboard,
+  Network,
+  Table2,
+  UserRound,
+  type LucideIcon,
+} from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { OverviewView } from '../climate/overview-view';
+import { StationsView } from '../climate/stations-view';
+import type { ViewId } from '../climate/types';
+import { LiveEventsView } from '../events/live-events-view';
+import { ExplorerView } from '../graph/explorer-view';
+import { useI18n, useTranslation } from '../i18n';
+import { ProfileView } from '../profile/profile-view';
+import { useAppNotify } from '../use-app-notify';
+import { AboutDialog } from './about-dialog';
+import { Header } from './header';
+
+// `icon` is the sidebar's React component; `iconName` is the matching lucide export name the
+// OS resolves for the top-menu entry (host calls resolveLucideIcon on the string).
+const NAV: Array<{ id: ViewId; icon: LucideIcon; iconName: string; labelKey: string }> = [
+  { id: 'overview', icon: LayoutDashboard, iconName: 'LayoutDashboard', labelKey: 'nav.overview' },
+  { id: 'stations', icon: Table2, iconName: 'Table2', labelKey: 'nav.stations' },
+  { id: 'explorer', icon: Network, iconName: 'Network', labelKey: 'nav.explorer' },
+  { id: 'events', icon: Activity, iconName: 'Activity', labelKey: 'nav.events' },
+  { id: 'profile', icon: UserRound, iconName: 'UserRound', labelKey: 'nav.profile' },
+];
+
+function ViewContent({ view }: Readonly<{ view: ViewId }>) {
+  switch (view) {
+    case 'overview':
+      return <OverviewView />;
+    case 'stations':
+      return <StationsView />;
+    case 'explorer':
+      return <ExplorerView />;
+    case 'events':
+      return <LiveEventsView />;
+    case 'profile':
+      return <ProfileView />;
+    default:
+      return null;
+  }
+}
+
+export function AppShell() {
+  const { t } = useTranslation();
+  const { locale } = useI18n();
+  const notify = useAppNotify();
+  const [view, setView] = useState<ViewId>('overview');
+  const [aboutOpen, setAboutOpen] = useState(false);
+
+  const firstLocale = useRef(true);
+  useEffect(() => {
+    if (firstLocale.current) {
+      firstLocale.current = false;
+      return;
+    }
+    notify(
+      t('notify.localeChanged', { fallback: 'Language switched to {locale}', params: { locale } }),
+      'info'
+    );
+  }, [locale, notify, t]);
+
+  const items = NAV.map(entry => ({
+    name: entry.id,
+    label: t(entry.labelKey, { fallback: entry.id }),
+    icon: entry.icon,
+  }));
+
+  // Mirror the section switcher into the OS top menu: each view is a checkable command, so the
+  // active section can be changed from the host menu bar (next to About / Version) — not just
+  // the in-app sidebar. This is the example of OS menu integration via the SDK.
+  const commands = useMemo<AppCommand[]>(
+    () => [
+      {
+        id: 'app.about',
+        title: t('menu.about', { fallback: 'About this app' }),
+        handler: () => setAboutOpen(true),
+      },
+      ...NAV.map(entry => ({
+        id: `view.${entry.id}`,
+        title: t(entry.labelKey, { fallback: entry.id }),
+        checked: view === entry.id,
+        handler: () => setView(entry.id),
+      })),
+    ],
+    [t, view]
+  );
+
+  const menu = useMemo<SdkMenuRoot[]>(
+    () => [
+      {
+        label: t('app.title', { fallback: 'Weather Dashboard' }),
+        kind: 'app',
+        items: [{ type: 'command', commandId: 'app.about' }],
+      },
+      {
+        label: t('menu.view', { fallback: 'View' }),
+        items: NAV.map(entry => ({
+          type: 'command' as const,
+          commandId: `view.${entry.id}`,
+          label: t(entry.labelKey, { fallback: entry.id }),
+          leftIcon: entry.iconName,
+        })),
+      },
+    ],
+    [t]
+  );
+
+  useCommandMenu(commands, menu);
+
+  const header = (
+    <div className="flex items-center gap-2 px-2 py-1">
+      <BardiocLogoIcon className="size-5" />
+      <span className="truncate text-sm font-semibold">
+        {t('app.title', { fallback: 'Climate Dashboard' })}
+      </span>
+    </div>
+  );
+
+  return (
+    <SidebarContainedProvider defaultCollapsed={false}>
+      <div className="bg-background text-foreground flex h-full min-h-0">
+        <SidebarBasic
+          header={header}
+          rail={false}
+          items={items}
+          selectedItem={view}
+          onItemSelected={item => {
+            if (!item) return;
+            setView(item as ViewId);
+          }}
+          className="border-r"
+        />
+        <main className="flex min-w-0 flex-1 flex-col">
+          <Header />
+          <ScrollArea className="min-h-0 flex-1">
+            <div className="p-4">
+              <ViewContent view={view} />
+            </div>
+          </ScrollArea>
+        </main>
+      </div>
+      <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
+      <Toaster position="bottom-right" />
+    </SidebarContainedProvider>
+  );
+}

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

@@ -0,0 +1,39 @@
+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';
+
+export function Header() {
+  const { t } = useTranslation();
+  const { state, syncing, refresh, setActiveStation } = useDashboard();
+
+  return (
+    <header className="border-border flex shrink-0 items-center justify-end gap-3 border-b px-4 py-2">
+      <div className="flex shrink-0 items-center gap-2">
+        {state?.stations && (
+          <LocationSelect
+            stations={state.stations}
+            value={state.activeStationId}
+            onSelect={setActiveStation}
+          />
+        )}
+        <ConnectedLanguageSwitcher
+          useI18n={useI18n}
+          supportedLocales={[...SUPPORTED_LOCALES]}
+          flags={{ en: 'EN', de: 'DE' }}
+        />
+        <Button
+          className="gap-2"
+          size="sm"
+          onClick={() => void refresh()}
+          disabled={syncing || !state}
+        >
+          <RefreshCw className={`size-4 ${syncing ? 'animate-spin' : ''}`} />
+          {t('header.sync', { fallback: 'Sync' })}
+        </Button>
+      </div>
+    </header>
+  );
+}

package/templates/vite/src/use-app-notify.ts

@@ -0,0 +1,23 @@
+import { isInsideIframe } from '@bardioc/app-sdk/dev';
+import { useNotify } from '@bardioc/app-sdk/react';
+import { toast } from '@bardioc/ui/components';
+import { useCallback } from 'react';
+
+export type NotifyLevel = 'success' | 'error' | 'info' | 'warning';
+
+// Inside the OS shell we route to the Bardioc-native channel only (the host renders it), which
+// also proves host↔app notification wiring. Standalone we fall back to a local toast.
+export function useAppNotify() {
+  const sdkNotify = useNotify();
+
+  return useCallback(
+    (message: string, level: NotifyLevel = 'info') => {
+      if (isInsideIframe()) {
+        sdkNotify(message, level);
+      } else {
+        toast[level](message);
+      }
+    },
+    [sdkNotify]
+  );
+}

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

@@ -1,11 +1,11 @@
 /// <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;
+  readonly VITE_APP_ID: string;
+  readonly VITE_ENABLE_DEV_AUTH?: string;
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
-}
+  readonly env: ImportMetaEnv;
+}

package/templates/vue/package.json

@@ -12,7 +12,7 @@
     "check-types": "vue-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": {