@askrjs/cli 0.0.2

package/dist/templates/spa/src/pages/app/_layout.tsx

@@ -0,0 +1,94 @@
+import {
+  BotIcon,
+  HomeIcon,
+  LogOutIcon,
+  MoonIcon,
+  SettingsIcon,
+  SunIcon,
+} from '@askrjs/lucide';
+import { Link, navigate } from '@askrjs/askr/router';
+import { Button } from '@askrjs/themes/components';
+import { Container, Inline, Stack } from '@askrjs/themes/components';
+import { Header, Shell, ShellMain, ShellNav } from '@askrjs/themes/components';
+import {
+  NavBrand,
+  NavGroup,
+  NavLink,
+  Sidebar,
+} from '@askrjs/themes/components';
+import { Badge } from '@askrjs/themes/components';
+import { ThemeToggle } from '@askrjs/themes/theme';
+import { appNavItems } from '../../shared/navigation';
+
+const icons = {
+  home: <HomeIcon size={16} aria-hidden="true" />,
+  agents: <BotIcon size={16} aria-hidden="true" />,
+  settings: <SettingsIcon size={16} aria-hidden="true" />,
+};
+
+export default function AppLayout({ children }: { children?: unknown }) {
+  return (
+    <Shell variant="sidebar" class="app-shell">
+      <ShellNav>
+        <Sidebar
+          aria-label="Workspace navigation"
+          breakpoint="md"
+          collapsible="icon"
+        >
+          <NavBrand>
+            <Link href="/app" class="brand-link">
+              <span class="brand-mark">A</span>
+              <strong>{'{{appName}}'}</strong>
+            </Link>
+          </NavBrand>
+          <NavGroup label="Workspace">
+            {appNavItems.map((item) => (
+              <NavLink href={item.href} match={item.match}>
+                <Inline as="span" gap="2" align="center">
+                  {icons[item.icon]}
+                  <span>{item.label}</span>
+                </Inline>
+              </NavLink>
+            ))}
+          </NavGroup>
+          <NavGroup label="Session" align="end">
+            <NavLink href="/" match="exact">
+              <Inline as="span" gap="2" align="center">
+                <LogOutIcon size={16} aria-hidden="true" />
+                <span>Sign out</span>
+              </Inline>
+            </NavLink>
+          </NavGroup>
+        </Sidebar>
+      </ShellNav>
+      <ShellMain>
+        <Header position="sticky" class="app-header">
+          <Container size="full">
+            <Inline justify="between" align="center" gap="3" wrap="wrap">
+              <Stack gap="none">
+                <span class="eyebrow">Operations console</span>
+                <strong>Agent workflow control plane</strong>
+              </Stack>
+              <Inline gap="2" align="center" wrap="wrap">
+                <Badge>event stream healthy</Badge>
+                <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" onPress={() => navigate('/')}>
+                  Public site
+                </Button>
+              </Inline>
+            </Inline>
+          </Container>
+        </Header>
+        <Container size="full" class="app-main">
+          {children}
+        </Container>
+      </ShellMain>
+    </Shell>
+  );
+}

package/dist/templates/spa/src/pages/app/_routes.tsx

@@ -0,0 +1,10 @@
+import { route } from '@askrjs/askr/router';
+import AgentRunsPage from './agent-runs';
+import AdminHomePage from './admin-home';
+import SettingsPage from './settings';
+
+export function registerAppRoutes(): void {
+  route('/app', AdminHomePage);
+  route('/app/agents', AgentRunsPage);
+  route('/app/settings', SettingsPage);
+}

package/dist/templates/spa/src/pages/app/admin-home.tsx

@@ -0,0 +1,152 @@
+import { resource } from '@askrjs/askr/resources';
+import { BarChart, Sparkline } from '@askrjs/charts/components';
+import { AlertCircleIcon, RefreshCwIcon } from '@askrjs/lucide';
+import { Button } from '@askrjs/themes/components';
+import {
+  Alert,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Skeleton,
+} from '@askrjs/themes/components';
+import { Block, Inline, Section, Stack } from '@askrjs/themes/components';
+import { EmptyState } from '@askrjs/themes/components';
+import MetricCard from '../../components/shared/metric-card';
+import StatusBadge from '../../components/shared/status-badge';
+import { loadOperations } from '../../features/operations/operations.query';
+import { formatRelativeTime } from '../../shared/format';
+
+export default function AdminHomePage() {
+  const operations = resource(({ signal }) => loadOperations({ signal }), []);
+  const snapshot = operations.value;
+
+  if (operations.error && !snapshot) {
+    return (
+      <Section>
+        <EmptyState
+          icon={<AlertCircleIcon size={24} aria-hidden="true" />}
+          title="Operations could not load"
+          description="The dashboard keeps failures recoverable. Retry the owning resource instead of hiding the error in a toast."
+          actions={<Button onPress={() => operations.refresh()}>Retry</Button>}
+        />
+      </Section>
+    );
+  }
+
+  return (
+    <Stack gap="5">
+      <section class="page-heading">
+        <Stack gap="2">
+          <Badge>projection v{snapshot?.version ?? '...'}</Badge>
+          <h1>Workspace home</h1>
+          <p class="lead">
+            A consistency-aware dashboard for agent runs, queue health, and
+            event-sourced read models.
+          </p>
+        </Stack>
+        <Inline gap="2" align="center">
+          {operations.pending && snapshot ? <Badge>refreshing</Badge> : null}
+          <Button variant="secondary" onPress={() => operations.refresh()}>
+            <RefreshCwIcon size={14} aria-hidden="true" /> Refresh
+          </Button>
+        </Inline>
+      </section>
+
+      {operations.pending && !snapshot ? (
+        <Block gap="md">
+          <Skeleton style="height: 8rem" />
+          <Skeleton style="height: 8rem" />
+          <Skeleton style="height: 8rem" />
+        </Block>
+      ) : null}
+
+      {snapshot ? (
+        <>
+          <Block gap="md" class="metric-grid">
+            {snapshot.metrics.map((metric) => (
+              <MetricCard
+                label={metric.label}
+                value={metric.value}
+                trend={metric.trend}
+              />
+            ))}
+          </Block>
+
+          <Block gap="md" align="stretch" class="chart-grid">
+            <Card>
+              <CardHeader>
+                <CardTitle>Run throughput</CardTitle>
+                <CardDescription>
+                  Accepted commands by work type.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <BarChart label="Run throughput" data={snapshot.throughput} />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Projection lag</CardTitle>
+                <CardDescription>
+                  Lower is better; stale states stay visible.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Sparkline label="Projection lag" data={snapshot.lag} />
+              </CardContent>
+            </Card>
+          </Block>
+
+          {snapshot.consistency !== 'fresh' ? (
+            <Alert variant="warning">
+              Read models are {snapshot.consistency}. Last processed event is{' '}
+              {snapshot.lastEventId}.
+            </Alert>
+          ) : null}
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent agent runs</CardTitle>
+              <CardDescription>
+                Run state is modeled as product state, not a single loading
+                boolean.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div class="run-table-wrap">
+                <table class="run-table">
+                  <thead>
+                    <tr>
+                      <th>Run</th>
+                      <th>Status</th>
+                      <th>Owner</th>
+                      <th>Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {snapshot.runs.map((run) => (
+                      <tr>
+                        <td>
+                          <strong>{run.title}</strong>
+                          <span>{run.id}</span>
+                        </td>
+                        <td>
+                          <StatusBadge status={run.status} />
+                        </td>
+                        <td>{run.owner}</td>
+                        <td>{formatRelativeTime(run.updatedAt)}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      ) : null}
+    </Stack>
+  );
+}

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