@askrjs/cli 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-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/templates/spa/tests/components/shared.test.tsx

@@ -1,12 +0,0 @@
-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/templates/spa/tests/resources.test.ts

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