@askrjs/cli 0.0.3 → 0.0.4

package/templates/spa/src/components/shared/status-badge.tsx

@@ -1,24 +0,0 @@
-import { Badge } from '@askrjs/themes/components';
-
-export type RunStatus =
-  | 'queued'
-  | 'running'
-  | 'requires-action'
-  | 'succeeded'
-  | 'failed';
-
-export type StatusBadgeProps = {
-  status: RunStatus;
-};
-
-const labels: Record<RunStatus, string> = {
-  queued: 'queued',
-  running: 'running',
-  'requires-action': 'needs review',
-  succeeded: 'succeeded',
-  failed: 'failed',
-};
-
-export default function StatusBadge({ status }: StatusBadgeProps) {
-  return <Badge data-status={status}>{labels[status]}</Badge>;
-}

package/templates/spa/src/features/operations/operations.query.ts

@@ -1,9 +0,0 @@
-import { getOperationsSnapshot } from '../../adapters/operations-client';
-
-export function loadOperations({
-  signal = new AbortController().signal,
-}: {
-  signal?: AbortSignal;
-}) {
-  return getOperationsSnapshot({ signal });
-}

package/templates/spa/src/main.tsx

@@ -1,10 +0,0 @@
-import { createSPA } from '@askrjs/askr/boot';
-import { getManifest } from '@askrjs/askr/router';
-
-import './styles.css';
-import './pages/_routes';
-
-await createSPA({
-  root: document.getElementById('app')!,
-  manifest: getManifest(),
-});

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

@@ -1,9 +0,0 @@
-import { ThemeScope } from '@askrjs/themes/theme';
-
-export default function RootLayout({ children }: { children?: unknown }) {
-  return (
-    <ThemeScope defaultTheme="tabby">
-      <div class="app-root">{children}</div>
-    </ThemeScope>
-  );
-}

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

@@ -1,27 +0,0 @@
-import { fallback, group, registerRoutes } from '@askrjs/askr/router';
-import RootLayout from './_layout';
-import AuthLayout from './auth/_layout';
-import { registerAuthRoutes } from './auth/_routes';
-import { registerAppRoutes } from './app/_routes';
-import AppLayout from './app/_layout';
-import NotFoundPage from './not-found';
-import { registerPublicRoutes } from './public/_routes';
-import PublicLayout from './public/_layout';
-
-registerRoutes(() => {
-  group({ layout: RootLayout }, () => {
-    group({ layout: PublicLayout }, () => {
-      registerPublicRoutes();
-    });
-
-    group({ layout: AuthLayout }, () => {
-      registerAuthRoutes();
-    });
-
-    group({ layout: AppLayout }, () => {
-      registerAppRoutes();
-    });
-
-    fallback(NotFoundPage);
-  });
-});

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

@@ -1,94 +0,0 @@
-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/templates/spa/src/pages/app/_routes.tsx

@@ -1,10 +0,0 @@
-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/templates/spa/src/pages/app/admin-home.tsx

@@ -1,170 +0,0 @@
-import { resource } from '@askrjs/askr/resources';
-import { createPlot } from '@askrjs/charts';
-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 type { OperationsChartRow } from '../../adapters/operations-client';
-import { loadOperations } from '../../features/operations/operations.query';
-import { formatRelativeTime } from '../../shared/format';
-
-const OperationsPlot = createPlot<OperationsChartRow>();
-
-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>
-                <OperationsPlot.Root
-                  data={snapshot.throughput}
-                  rowKey="label"
-                  label="Run throughput"
-                  description="Accepted commands by work type."
-                >
-                  <OperationsPlot.Bar x="label" y="value" />
-                </OperationsPlot.Root>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>Projection lag</CardTitle>
-                <CardDescription>
-                  Lower is better; stale states stay visible.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <OperationsPlot.Root
-                  data={snapshot.lag}
-                  rowKey="label"
-                  label="Projection lag"
-                  description="Projection lag over the last hour."
-                >
-                  <OperationsPlot.Line x="label" y="value" />
-                  <OperationsPlot.Point x="label" y="value" />
-                </OperationsPlot.Root>
-              </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/templates/spa/src/pages/app/agent-runs.tsx

@@ -1,93 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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>
-  );
-}