@askrjs/cli 0.0.2 → 0.0.4

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>
-  );
-}

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

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

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

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

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

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

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

@@ -1,49 +0,0 @@
-@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/templates/spa/src/styles/layout.css

@@ -1,192 +0,0 @@
-@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/templates/spa/src/styles/reset.css

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