@askrjs/cli 0.0.2

package/templates/spa/src/pages/app/agent-runs.tsx

@@ -0,0 +1,93 @@
+import {
+  BotIcon,
+  CheckCircle2Icon,
+  Clock3Icon,
+  ShieldAlertIcon,
+} from '@askrjs/lucide';
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@askrjs/themes/components';
+import { Block, Inline, Stack } from '@askrjs/themes/components';
+import StatusBadge, {
+  type RunStatus,
+} from '../../components/shared/status-badge';
+
+const runs: Array<{
+  title: string;
+  status: RunStatus;
+  event: string;
+  description: string;
+}> = [
+  {
+    title: 'Reconcile billing projection',
+    status: 'running',
+    event: 'tool call: compare-ledger',
+    description:
+      'Streaming events are appended to the timeline and reconciled by event id.',
+  },
+  {
+    title: 'Approve enterprise workspace',
+    status: 'requires-action',
+    event: 'approval requested',
+    description:
+      'Human gates are explicit product states, not hidden inside generated text.',
+  },
+  {
+    title: 'Refresh onboarding cohort',
+    status: 'succeeded',
+    event: 'projection caught up',
+    description:
+      'The read model confirms the command reached the user-visible view.',
+  },
+];
+
+export default function AgentRunsPage() {
+  return (
+    <Stack gap="5">
+      <section class="page-heading">
+        <Stack gap="2">
+          <Badge>agent workflows</Badge>
+          <h1>Agent runs</h1>
+          <p class="lead">
+            Timelines make queued, running, approval, failure, and projection
+            catch-up states easy to inspect.
+          </p>
+        </Stack>
+      </section>
+
+      <Block gap="md" class="agent-grid">
+        {runs.map((run) => (
+          <Card>
+            <CardHeader>
+              <Inline justify="between" align="start" gap="3">
+                <span class="card-icon">
+                  {run.status === 'succeeded' ? (
+                    <CheckCircle2Icon size={18} aria-hidden="true" />
+                  ) : run.status === 'requires-action' ? (
+                    <ShieldAlertIcon size={18} aria-hidden="true" />
+                  ) : (
+                    <BotIcon size={18} aria-hidden="true" />
+                  )}
+                </span>
+                <StatusBadge status={run.status} />
+              </Inline>
+              <CardTitle>{run.title}</CardTitle>
+              <CardDescription>{run.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Inline gap="2" align="center">
+                <Clock3Icon size={14} aria-hidden="true" />
+                <span>{run.event}</span>
+              </Inline>
+            </CardContent>
+          </Card>
+        ))}
+      </Block>
+    </Stack>
+  );
+}

package/templates/spa/src/pages/app/settings.tsx

@@ -0,0 +1,91 @@
+import { state } from '@askrjs/askr';
+import { Input } from '@askrjs/ui';
+import {
+  Button,
+  Field,
+  FieldHint,
+  InputGroup,
+  InputGroupText,
+} from '@askrjs/themes/components';
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@askrjs/themes/components';
+import { Block, Stack } from '@askrjs/themes/components';
+
+export default function SettingsPage() {
+  const [endpoint, setEndpoint] = state(
+    'https://api.example.test'
+  ) as unknown as [
+    ReturnType<typeof state<string>>,
+    ReturnType<typeof state<string>>['set'],
+  ];
+
+  return (
+    <Stack gap="5">
+      <section class="page-heading">
+        <Stack gap="2">
+          <Badge>environment</Badge>
+          <h1>Settings</h1>
+          <p class="lead">
+            Configuration stays in shared boundaries and adapters receive it
+            through one clear path.
+          </p>
+        </Stack>
+      </section>
+
+      <Block gap="md" align="start" class="settings-grid">
+        <Card>
+          <CardHeader>
+            <CardTitle>API adapter</CardTitle>
+            <CardDescription>
+              Keep generated clients and transport concerns out of route
+              components.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Field>
+              <label htmlFor="api-endpoint">Base URL</label>
+              <InputGroup>
+                <InputGroupText>URL</InputGroupText>
+                <Input
+                  id="api-endpoint"
+                  value={endpoint()}
+                  onInput={(event: Event) =>
+                    setEndpoint((event.currentTarget as HTMLInputElement).value)
+                  }
+                />
+              </InputGroup>
+              <FieldHint>
+                Demo-only value. Real apps should validate public config at
+                startup.
+              </FieldHint>
+            </Field>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Consistency policy</CardTitle>
+            <CardDescription>
+              Event-sourced apps should expose lag, retries, and stale states
+              directly.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Stack gap="3">
+              <Badge>pending-write copy enabled</Badge>
+              <Badge>projection lag visible</Badge>
+              <Badge>manual refresh available</Badge>
+              <Button variant="secondary">Save settings</Button>
+            </Stack>
+          </CardContent>
+        </Card>
+      </Block>
+    </Stack>
+  );
+}

package/templates/spa/src/pages/auth/_layout.tsx

@@ -0,0 +1,38 @@
+import { Link } from '@askrjs/askr/router';
+import { MoonIcon, SunIcon } from '@askrjs/lucide';
+import { Button } from '@askrjs/themes/components';
+import { Container, Inline } from '@askrjs/themes/components';
+import { Header } from '@askrjs/themes/components';
+import { ThemeToggle } from '@askrjs/themes/theme';
+
+export default function AuthLayout({ children }: { children?: unknown }) {
+  return (
+    <div class="auth-shell">
+      <Header position="sticky" class="auth-header">
+        <Container size="full">
+          <Inline justify="between" align="center" gap="3" wrap="wrap">
+            <Link href="/" class="brand-link">
+              <span class="brand-mark">A</span>
+              <strong>{'{{appName}}'}</strong>
+            </Link>
+            <Inline gap="2" align="center" wrap="wrap">
+              <ThemeToggle
+                variant="ghost"
+                size="icon"
+                aria-label="Toggle color theme"
+                lightIcon={<SunIcon size={18} aria-hidden="true" />}
+                darkIcon={<MoonIcon size={18} aria-hidden="true" />}
+              />
+              <Button variant="secondary" asChild>
+                <Link href="/">Back to site</Link>
+              </Button>
+            </Inline>
+          </Inline>
+        </Container>
+      </Header>
+      <main class="auth-main">
+        <Container size="sm">{children}</Container>
+      </main>
+    </div>
+  );
+}

package/templates/spa/src/pages/auth/_routes.tsx

@@ -0,0 +1,6 @@
+import { route } from '@askrjs/askr/router';
+import LoginPage from './login';
+
+export function registerAuthRoutes(): void {
+  route('/login', LoginPage);
+}

package/templates/spa/src/pages/auth/login.tsx

@@ -0,0 +1,63 @@
+import { state } from '@askrjs/askr';
+import { navigate } from '@askrjs/askr/router';
+import { LockKeyholeIcon } from '@askrjs/lucide';
+import { Input } from '@askrjs/ui';
+import {
+  Button,
+  Container,
+  Field,
+  FieldHint,
+  InputGroup,
+  InputGroupText,
+} from '@askrjs/themes/components';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@askrjs/themes/components';
+import { Stack } from '@askrjs/themes/components';
+
+export default function LoginPage() {
+  const [email, setEmail] = state('ops@example.com');
+
+  return (
+    <Container size="sm" class="auth-page">
+      <Card variant="raised">
+        <CardHeader>
+          <span class="card-icon">
+            <LockKeyholeIcon size={18} aria-hidden="true" />
+          </span>
+          <CardTitle>Sign in</CardTitle>
+          <CardDescription>
+            This starter keeps auth mocked, but the auth shell is isolated from
+            the public landing layout and ready for a real session provider.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Stack gap="4">
+            <Field>
+              <label htmlFor="email">Work email</label>
+              <InputGroup>
+                <InputGroupText>@</InputGroupText>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email()}
+                  onInput={(event: Event) =>
+                    setEmail((event.currentTarget as HTMLInputElement).value)
+                  }
+                />
+              </InputGroup>
+              <FieldHint>Use any address to enter the demo console.</FieldHint>
+            </Field>
+            <Button onPress={() => navigate('/app')}>
+              Continue to console
+            </Button>
+          </Stack>
+        </CardContent>
+      </Card>
+    </Container>
+  );
+}

package/templates/spa/src/pages/not-found.tsx

@@ -0,0 +1,22 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/themes/components';
+import { Container, Section } from '@askrjs/themes/components';
+import { EmptyState } from '@askrjs/themes/components';
+
+export default function NotFoundPage() {
+  return (
+    <Section paddingY="2xl">
+      <Container size="sm">
+        <EmptyState
+          title="Page not found"
+          description="The route tree is explicit, so unknown paths fall back here."
+          actions={
+            <Button asChild>
+              <Link href="/">Return home</Link>
+            </Button>
+          }
+        />
+      </Container>
+    </Section>
+  );
+}

package/templates/spa/src/pages/public/_layout.tsx

@@ -0,0 +1,47 @@
+import { MoonIcon, SunIcon } from '@askrjs/lucide';
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/themes/components';
+import { Container, Inline } from '@askrjs/themes/components';
+import { Header } from '@askrjs/themes/components';
+import { NavBrand, NavGroup, Navbar, NavLink } from '@askrjs/themes/components';
+import { ThemeToggle } from '@askrjs/themes/theme';
+
+export default function PublicLayout({ children }: { children?: unknown }) {
+  return (
+    <div class="public-shell">
+      <Header position="sticky" class="public-header">
+        <Container>
+          <Navbar aria-label="Public navigation" breakpoint="md">
+            <NavBrand>
+              <Link href="/" class="brand-link">
+                <span class="brand-mark">A</span>
+                <strong>{'{{appName}}'}</strong>
+              </Link>
+            </NavBrand>
+            <NavGroup align="center">
+              <NavLink href="/" match="exact">
+                Overview
+              </NavLink>
+              <NavLink href="/login">Sign in</NavLink>
+            </NavGroup>
+            <NavGroup align="end">
+              <Inline gap="2" align="center">
+                <ThemeToggle
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Toggle color theme"
+                  lightIcon={<SunIcon size={18} aria-hidden="true" />}
+                  darkIcon={<MoonIcon size={18} aria-hidden="true" />}
+                />
+                <Button asChild>
+                  <Link href="/login">Open console</Link>
+                </Button>
+              </Inline>
+            </NavGroup>
+          </Navbar>
+        </Container>
+      </Header>
+      <main class="public-main">{children}</main>
+    </div>
+  );
+}

package/templates/spa/src/pages/public/_routes.tsx

@@ -0,0 +1,6 @@
+import { route } from '@askrjs/askr/router';
+import HomePage from './home';
+
+export function registerPublicRoutes(): void {
+  route('/', HomePage);
+}

package/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/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/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/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);
+  }
+}