@askrjs/cli 0.0.2

package/dist/templates/spa/src/pages/public/home.tsx

@@ -0,0 +1,143 @@
+import {
+  ActivityIcon,
+  ArrowRightIcon,
+  BotIcon,
+  CheckCircle2Icon,
+  ShieldCheckIcon,
+} from '@askrjs/lucide';
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/themes/components';
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@askrjs/themes/components';
+import {
+  Block,
+  Box,
+  Container,
+  Inline,
+  Section,
+  Stack,
+} from '@askrjs/themes/components';
+import { EmptyState } from '@askrjs/themes/components';
+
+const capabilities = [
+  {
+    icon: <BotIcon size={16} aria-hidden="true" />,
+    title: 'Agent runs',
+    description:
+      'Track queued, running, approval, and completed work without collapsing it into one loading state.',
+  },
+  {
+    icon: <ActivityIcon size={16} aria-hidden="true" />,
+    title: 'Evented operations',
+    description:
+      'Make pending writes, projection lag, and stale read models visible before users need to ask.',
+  },
+  {
+    icon: <ShieldCheckIcon size={16} aria-hidden="true" />,
+    title: 'App-ready shell',
+    description:
+      'Use route branches, layouts, and theme primitives instead of a one-page demo wrapper.',
+  },
+];
+
+export default function HomePage() {
+  return (
+    <>
+      <Section paddingY="2xl">
+        <Container size="xl">
+          <Block gap="lg" align="center" class="hero-grid">
+            <Stack gap="lg" class="hero-copy">
+              <Badge>Route-first Askr SPA</Badge>
+              <Stack gap="md">
+                <h1>Operate agent workflows with a UI that tells the truth.</h1>
+                <p class="lead">
+                  {'{{appName}}'} is a focused Askr console for agentic
+                  products: public branch, auth branch, app branch, theme
+                  primitives, consistency-aware states, and no invented layout
+                  system.
+                </p>
+              </Stack>
+              <Inline gap="3" wrap="wrap">
+                <Button asChild>
+                  <Link href="/login">
+                    Open console <ArrowRightIcon size={16} aria-hidden="true" />
+                  </Link>
+                </Button>
+                <Button variant="secondary" asChild>
+                  <Link href="/app">View demo dashboard</Link>
+                </Button>
+              </Inline>
+            </Stack>
+
+            <Card variant="raised" class="hero-card">
+              <CardHeader>
+                <Inline gap="2" align="center">
+                  <span class="status-dot" />
+                  <Badge>Projection current</Badge>
+                </Inline>
+                <CardTitle>Command center</CardTitle>
+                <CardDescription>
+                  A concise preview of the authenticated shell users see after
+                  sign-in.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Stack gap="3">
+                  <Box class="hero-row" p="3">
+                    <strong>12 active runs</strong>
+                    <span>3 need review</span>
+                  </Box>
+                  <Box class="hero-row" p="3">
+                    <strong>98.7% success rate</strong>
+                    <span>last 24 hours</span>
+                  </Box>
+                  <Box class="hero-row" p="3">
+                    <strong>event id 18,442</strong>
+                    <span>read model synced</span>
+                  </Box>
+                </Stack>
+              </CardContent>
+            </Card>
+          </Block>
+        </Container>
+      </Section>
+
+      <Section paddingY="xl">
+        <Container size="xl">
+          <Block gap="md" class="feature-grid">
+            {capabilities.map((item) => (
+              <Card>
+                <CardHeader>
+                  <span class="card-icon">{item.icon}</span>
+                  <CardTitle>{item.title}</CardTitle>
+                  <CardDescription>{item.description}</CardDescription>
+                </CardHeader>
+              </Card>
+            ))}
+          </Block>
+        </Container>
+      </Section>
+
+      <Section paddingY="xl">
+        <Container size="lg">
+          <EmptyState
+            icon={<CheckCircle2Icon size={26} aria-hidden="true" />}
+            title="Built from solved primitives"
+            description="The page uses Container, Section, Block, Stack, Inline, Box, Card, Badge, Button, Header, Navbar, and EmptyState from @askrjs/themes."
+            actions={
+              <Button asChild>
+                <Link href="/app/agents">Inspect agent runs</Link>
+              </Button>
+            }
+          />
+        </Container>
+      </Section>
+    </>
+  );
+}

package/dist/templates/spa/src/shared/format.ts

@@ -0,0 +1,12 @@
+export function formatRelativeTime(value: string): string {
+  const date = new Date(value);
+  const diffMs = Date.now() - date.getTime();
+  const diffMinutes = Math.max(1, Math.round(diffMs / 60000));
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m ago`;
+  }
+
+  const diffHours = Math.round(diffMinutes / 60);
+  return `${diffHours}h ago`;
+}

package/dist/templates/spa/src/shared/navigation.ts

@@ -0,0 +1,15 @@
+export const appNavItems = [
+  { href: '/app', label: 'Dashboard', icon: 'home', match: 'exact' as const },
+  {
+    href: '/app/agents',
+    label: 'Agent runs',
+    icon: 'agents',
+    match: 'exact' as const,
+  },
+  {
+    href: '/app/settings',
+    label: 'Settings',
+    icon: 'settings',
+    match: 'exact' as const,
+  },
+] as const;

package/dist/templates/spa/src/styles/components.css

@@ -0,0 +1,49 @@
+@layer components {
+  .brand-link,
+  .sidebar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+  }
+
+  .brand-mark {
+    display: inline-grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-primary);
+    color: var(--ak-color-primary-contrast);
+    font-weight: var(--ak-font-weight-bold);
+  }
+
+  .eyebrow {
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-xs);
+    font-weight: var(--ak-font-weight-bold);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .lead {
+    color: var(--ak-color-text);
+    font-size: var(--ak-font-size-lg);
+  }
+
+  .status-dot {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 999px;
+    background: var(--ak-color-success);
+  }
+
+  .card-icon {
+    display: inline-grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-primary-soft);
+    color: var(--ak-color-primary);
+  }
+}

package/dist/templates/spa/src/styles/layout.css

@@ -0,0 +1,192 @@
+@layer layout {
+  .app-root {
+    min-block-size: 100dvh;
+    background: var(--spa-surface-glow), var(--ak-color-bg);
+  }
+
+  .public-shell,
+  .auth-shell,
+  .app-shell {
+    min-block-size: 100dvh;
+  }
+
+  .public-shell,
+  .auth-shell {
+    display: grid;
+    grid-template-rows: auto 1fr;
+  }
+
+  .public-header,
+  .auth-header,
+  .app-header {
+    position: sticky;
+    z-index: 20;
+    top: 0;
+    border-bottom: 1px solid var(--ak-color-border-subtle);
+    background: var(--spa-header-backdrop);
+    backdrop-filter: blur(14px);
+  }
+
+  .public-main,
+  .auth-main,
+  .app-main {
+    min-width: 0;
+  }
+
+  .public-main {
+    inline-size: min(100%, var(--spa-shell-max-width));
+    margin-inline: auto;
+    padding: var(--ak-space-xl) var(--spa-shell-gutter) var(--ak-space-2xl);
+  }
+
+  .auth-main {
+    display: grid;
+    place-items: center;
+    padding: var(--ak-space-xl) var(--spa-shell-gutter);
+  }
+
+  .auth-page {
+    inline-size: min(100%, var(--spa-auth-card-width));
+  }
+
+  .page-heading {
+    display: flex;
+    gap: var(--ak-space-md);
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .hero-grid,
+  .operations-grid,
+  .settings-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.16fr) minmax(20rem, 0.84fr);
+    gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);
+    align-items: start;
+  }
+
+  .feature-grid,
+  .metric-grid,
+  .agent-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--ak-space-md);
+  }
+
+  .chart-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
+    gap: var(--ak-space-md);
+  }
+
+  .hero-copy {
+    max-inline-size: 48rem;
+  }
+
+  .hero-card {
+    width: 100%;
+  }
+
+  .hero-row {
+    display: flex;
+    gap: var(--ak-space-md);
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--ak-color-border-subtle);
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-surface-muted);
+  }
+
+  .hero-row span {
+    color: var(--ak-color-text-muted);
+  }
+
+  .run-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--ak-font-size-sm);
+  }
+
+  .run-table th,
+  .run-table td {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid var(--ak-color-border-subtle);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .run-table th {
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-xs);
+    font-weight: var(--ak-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .run-table td:last-child,
+  .run-table th:last-child {
+    text-align: right;
+  }
+
+  .run-table-wrap {
+    min-width: 0;
+  }
+
+  .timeline {
+    display: grid;
+    gap: var(--ak-space-md);
+  }
+
+  .timeline-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ak-space-md);
+  }
+
+  .timeline-dot {
+    display: grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 999px;
+    background: var(--ak-color-surface-muted);
+    color: var(--ak-color-primary);
+  }
+
+  @media (max-width: 64rem) {
+    .hero-grid,
+    .operations-grid,
+    .settings-grid,
+    .chart-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .feature-grid,
+    .metric-grid,
+    .agent-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 42rem) {
+    .feature-grid,
+    .metric-grid,
+    .agent-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .run-table {
+      min-width: 42rem;
+    }
+
+    .run-table-wrap {
+      overflow-x: auto;
+    }
+
+    .page-heading,
+    .hero-row {
+      align-items: stretch;
+      flex-direction: column;
+    }
+  }
+}

package/dist/templates/spa/src/styles/reset.css

@@ -0,0 +1,44 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #app {
+    margin: 0;
+    min-height: 100%;
+  }
+
+  body {
+    min-block-size: 100dvh;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  svg {
+    display: block;
+    flex: 0 0 auto;
+  }
+}

package/dist/templates/spa/src/styles/theme.css

@@ -0,0 +1,57 @@
+@layer theme {
+  body {
+    background:
+      radial-gradient(
+        1100px 620px at 100% -12%,
+        color-mix(in srgb, var(--ak-color-primary) 13%, transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        820px 420px at -8% 14%,
+        color-mix(in srgb, var(--ak-color-primary) 8%, transparent),
+        transparent 64%
+      ),
+      var(--ak-color-bg);
+    color: var(--ak-color-fg);
+    font-family: var(--ak-font-family);
+    font-size: var(--ak-font-size-md);
+    line-height: 1.55;
+  }
+
+  h1 {
+    font-size: var(--ak-font-size-display);
+    line-height: 1.06;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  h2 {
+    font-size: var(--ak-font-size-heading);
+    line-height: 1.3;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  .lead,
+  .muted,
+  p {
+    color: var(--ak-color-muted);
+    line-height: 1.65;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--ak-color-primary) 30%, transparent);
+    color: var(--ak-color-fg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/templates/spa/src/styles/tokens.css

@@ -0,0 +1,20 @@
+@layer tokens {
+  :root {
+    --spa-shell-gutter: clamp(var(--ak-space-lg), 2vw, var(--ak-space-xl));
+    --spa-shell-max-width: min(
+      var(--ak-layout-content-max-width),
+      calc(100% - 2 * var(--spa-shell-gutter))
+    );
+    --spa-auth-card-width: min(100%, 28rem);
+    --spa-header-backdrop: color-mix(
+      in srgb,
+      var(--ak-color-bg) 92%,
+      transparent
+    );
+    --spa-surface-glow: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ak-color-surface-muted) 58%, transparent),
+      transparent 22rem
+    );
+  }
+}

package/dist/templates/spa/src/styles.css

@@ -0,0 +1,7 @@
+@import '@askrjs/themes/default';
+@import '@askrjs/charts/default';
+@import './styles/reset.css';
+@import './styles/tokens.css';
+@import './styles/theme.css';
+@import './styles/layout.css';
+@import './styles/components.css';

package/dist/templates/spa/src/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/dist/templates/spa/tests/app.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vite-plus/test';
+
+describe('SPA template structure', () => {
+  it('documents the route-first shell and theme layers the app should keep', () => {
+    const structure = [
+      'src/main.tsx',
+      'src/pages/_routes.tsx',
+      'src/pages/_layout.tsx',
+      'src/pages/public/_routes.tsx',
+      'src/pages/public/_layout.tsx',
+      'src/pages/public/home.tsx',
+      'src/pages/auth/_routes.tsx',
+      'src/pages/auth/_layout.tsx',
+      'src/pages/auth/login.tsx',
+      'src/pages/app/_routes.tsx',
+      'src/pages/app/_layout.tsx',
+      'src/pages/app/admin-home.tsx',
+      'src/styles.css',
+      'src/styles/reset.css',
+      'src/styles/tokens.css',
+      'src/styles/theme.css',
+      'src/styles/layout.css',
+      'src/styles/components.css',
+      'src/features/operations/operations.query.ts',
+      'src/adapters/operations-client.ts',
+      'src/components/shared/metric-card.tsx',
+    ];
+
+    expect(structure).toContain('src/pages/_routes.tsx');
+    expect(structure).toContain('src/pages/app/_layout.tsx');
+    expect(structure).toContain('src/pages/auth/_layout.tsx');
+    expect(structure).toContain('src/styles/tokens.css');
+    expect(structure).toContain('src/styles/layout.css');
+    expect(structure).toContain('src/features/operations/operations.query.ts');
+    expect(structure).toContain('src/adapters/operations-client.ts');
+  });
+});

package/dist/templates/spa/tests/components/shared.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vite-plus/test';
+import MetricCard from '../../src/components/shared/metric-card';
+import StatusBadge from '../../src/components/shared/status-badge';
+
+describe('shared app components', () => {
+  it('exports small app-local wrappers around theme primitives', () => {
+    expect(MetricCard).toBeDefined();
+    expect(StatusBadge).toBeDefined();
+    expect(typeof MetricCard).toBe('function');
+    expect(typeof StatusBadge).toBe('function');
+  });
+});

package/dist/templates/spa/tests/resources.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { getOperationsSnapshot } from '../src/adapters/operations-client';
+import { loadOperations } from '../src/features/operations/operations.query';
+
+describe('operations data flow', () => {
+  it('loads the dashboard snapshot through the feature query boundary', async () => {
+    const snapshot = await loadOperations({});
+
+    expect(snapshot.metrics.length).toBeGreaterThan(0);
+    expect(snapshot.runs.length).toBeGreaterThan(0);
+    expect(snapshot.lastEventId).toMatch(/^evt_/);
+  });
+
+  it('keeps cancellation owned by the adapter', async () => {
+    const controller = new AbortController();
+    const request = getOperationsSnapshot({ signal: controller.signal });
+
+    controller.abort();
+
+    await expect(request).rejects.toThrow(/aborted/i);
+  });
+});

package/dist/templates/spa/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@askrjs/askr"
+  },
+  "include": ["src", "tests"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/templates/spa/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts"]
+}

package/dist/templates/spa/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  lint: {
+    ignorePatterns: ['dist/**', 'node_modules/**', 'coverage/**'],
+  },
+  fmt: {
+    semi: true,
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+  },
+  server: {
+    port: 5173,
+    open: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});