The admin app shell is already designed

AppShell is the composed entry

The template root layout is AppShell from @happyvertical/smrt-svelte/app. It wraps Provider, ThemeProvider, the theme CSS, and AdminShell, takes a small explicit nav, and exposes nav and dock slots. Its Provider registers the generated read-only WebMCP tools when the browser exposes modelContext. The same subpath holds OwnerSetupForm, ShellSettingsPage, and RuntimeDiagnosticsWebMcp, which the template mounts on its setup and settings routes. The subpath is browser-only and imports nothing from the server or from $app.

• runtimeDiagnostics, on for signed-in sessions, owns exactly one additional read-only tool, smrt.runtime.diagnostics.read, which fetches the mounted diagnostics route as the page user.
• Generated REST routes do not create pages. Add each human-facing route to nav explicitly.

<script lang="ts">
  import { page } from '$app/state';
  import { webMcpToolDefinitions } from '@happyvertical/smrt-virt-web';
  import { AppShell } from '@happyvertical/smrt-svelte/app';
  import type { ShellNavItem } from '@happyvertical/smrt-svelte/workspace';

  let { data, children } = $props();

  const settingsHref = '/settings';

  const nav: ShellNavItem[] = [
    { href: '/', label: 'Items', description: 'The example s-m-r-t object' },
    { href: settingsHref, label: 'Settings', description: 'Workspace layout and shortcuts' }
  ];

  const webmcp = $derived(
    typeof document !== 'undefined' && 'modelContext' in document
      ? { definitions: webMcpToolDefinitions, basePath: '/api', effects: ['read'] as const }
      : false
  );
</script>

<AppShell
  title="s-m-r-t app"
  {webmcp}
  {nav}
  currentHref={page.url.pathname}
  runtimeDiagnostics={data.session.authenticated}
  {settingsHref}
>
  {@render children()}
</AppShell>

Four edges, four scopes

Top, left, right, and bottom panels have explicit geometry and responsive presentation. App, tenant, focus, and system scopes make ownership legible instead of accumulating one giant sidebar.

Navigation comes from the manifest

tenantNavFromManifest groups resources by package and filters them by permitted resources. Build it in +layout.server.ts and the first render arrives with the correct navigation—no client fetch required.

• Collections, internal and test classes, and anything without a REST list route are dropped.
• A subtype that shares its parent collection is dropped, because the shared endpoint is already polymorphic.
• permittedResources filters by role, expanding through inheritance so a permitted subtype keeps the link it routes through.
• Sections and items are sorted, so reordering the manifest never reshuffles the sidebar.

import { tenantNavFromManifest } from '@happyvertical/smrt-svelte/workspace';
import { manifest } from '$lib/manifest';

export const load = async ({ locals }) => ({
  nav: tenantNavFromManifest(manifest, {
    permittedResources: locals.permittedResources,
    sectionHints: { '@happyvertical/smrt-content': 'Content' },
    basePath: ''
  })
});

Activities accept any transport

Jobs, polling, SSE, WebSockets, and application events all adapt into one activity registry. The shell itself stays transport-agnostic and SSR-safe.

AdminShell is the surface to build on

Earlier releases shipped a sidebar-and-inspector WorkspaceShell and a role-driven RoleShell. The four-edge AdminShell replaced both, and those primitives are no longer exported. Focus tools now live on the shell. The previous dock stays available on a separate legacy subpath. An existing application can migrate one screen at a time.