@askrjs/cli 0.0.10 → 0.0.12

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

@@ -1,4 +1,5 @@
 import { resource } from '@askrjs/askr/resources';
+import { For, Show } from '@askrjs/askr/control';
 import { createPlot } from '@askrjs/charts';
 import { AlertCircleIcon, RefreshCwIcon } from '@askrjs/lucide';
 import { Button } from '@askrjs/themes/components';
@@ -66,105 +67,111 @@ export default function AdminHomePage() {
         </Block>
       ) : null}
 
-      {snapshot ? (
-        <>
-          <Block gap="md" class="metric-grid">
-            {snapshot.metrics.map((metric) => (
-              <MetricCard
-                label={metric.label}
-                value={metric.value}
-                trend={metric.trend}
-              />
-            ))}
-          </Block>
+      <Show when={snapshot}>
+        {(currentSnapshot) => (
+          <>
+            <Block gap="md" class="metric-grid">
+              <For each={currentSnapshot.metrics} by={(metric) => metric.label}>
+                {(metric) => (
+                  <MetricCard
+                    label={metric.label}
+                    value={metric.value}
+                    trend={metric.trend}
+                  />
+                )}
+              </For>
+            </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={currentSnapshot.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={currentSnapshot.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>
+
+            {currentSnapshot.consistency !== 'fresh' ? (
+              <Alert variant="warning">
+                Read models are {currentSnapshot.consistency}. Last processed
+                event is {currentSnapshot.lastEventId}.
+              </Alert>
+            ) : null}
 
-          <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>
+                <CardTitle>Recent agent runs</CardTitle>
                 <CardDescription>
-                  Lower is better; stale states stay visible.
+                  Run state is modeled as product state, not a single loading
+                  boolean.
                 </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) => (
+                <div class="run-table-wrap">
+                  <table class="run-table">
+                    <thead>
                       <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>
+                        <th>Run</th>
+                        <th>Status</th>
+                        <th>Owner</th>
+                        <th>Updated</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </CardContent>
-          </Card>
-        </>
-      ) : null}
+                    </thead>
+                    <tbody>
+                      <For each={currentSnapshot.runs} by={(run) => run.id}>
+                        {(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>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </Show>
     </Stack>
   );
 }

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

@@ -4,6 +4,7 @@ import {
   Clock3Icon,
   ShieldAlertIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import {
   Badge,
   Card,
@@ -18,12 +19,14 @@ import StatusBadge, {
 } from '../../components/shared/status-badge';
 
 const runs: Array<{
+  id: string;
   title: string;
   status: RunStatus;
   event: string;
   description: string;
 }> = [
   {
+    id: 'reconcile-billing-projection',
     title: 'Reconcile billing projection',
     status: 'running',
     event: 'tool call: compare-ledger',
@@ -31,6 +34,7 @@ const runs: Array<{
       'Streaming events are appended to the timeline and reconciled by event id.',
   },
   {
+    id: 'approve-enterprise-workspace',
     title: 'Approve enterprise workspace',
     status: 'requires-action',
     event: 'approval requested',
@@ -38,6 +42,7 @@ const runs: Array<{
       'Human gates are explicit product states, not hidden inside generated text.',
   },
   {
+    id: 'refresh-onboarding-cohort',
     title: 'Refresh onboarding cohort',
     status: 'succeeded',
     event: 'projection caught up',
@@ -61,32 +66,34 @@ export default function AgentRunsPage() {
       </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>
-        ))}
+        <For each={runs} by={(run) => run.id}>
+          {(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>
+          )}
+        </For>
       </Block>
     </Stack>
   );

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

@@ -5,6 +5,7 @@ import {
   CheckCircle2Icon,
   ShieldCheckIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/themes/components';
 import {
@@ -111,15 +112,17 @@ export default function HomePage() {
       <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>
-            ))}
+            <For each={capabilities} by={(item) => item.title}>
+              {(item) => (
+                <Card>
+                  <CardHeader>
+                    <span class="card-icon">{item.icon}</span>
+                    <CardTitle>{item.title}</CardTitle>
+                    <CardDescription>{item.description}</CardDescription>
+                  </CardHeader>
+                </Card>
+              )}
+            </For>
           </Block>
         </Container>
       </Section>

package/dist/templates/ssg/AGENTS.md

@@ -53,3 +53,9 @@ tests/                 # Vitest tests
 - Use askr-ui components for interactive elements and askr-themes layout/shell primitives for structure
 - Style with `--ak-*` tokens
 - Keep SSG routes synchronous at render time unless you intentionally wire SSR data into generation
+
+## Recovery and completion
+
+- Run `askr repair` after analyzer failures; it applies only safe mechanical fixes.
+- Resolve remaining semantic diagnostics deliberately.
+- Run `npm run check` before declaring work complete. It requires clean Askr analysis, then runs lint, typecheck, tests, and build.

package/dist/templates/ssg/package.json

@@ -13,8 +13,9 @@
     "typecheck": "tsc --noEmit",
     "lint": "vp lint .",
     "lint:fix": "npm run lint -- --fix",
+    "analyze": "askr analyze --check",
     "fmt": "vp fmt .",
-    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+    "check": "askr check"
   },
   "dependencies": {
     "@askrjs/askr": ">=0.0.53 <0.1.0",

package/dist/templates/ssg/src/components/site-shell.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Header } from '@askrjs/themes/components';
 import {
@@ -35,9 +36,9 @@ export function SiteHeader() {
             class="navbar-group"
             data-align="end"
           >
-            {navItems.map((item) => (
-              <NavLink href={item.href}>{item.label}</NavLink>
-            ))}
+            <For each={[...navItems]} by={(item) => item.href}>
+              {(item) => <NavLink href={item.href}>{item.label}</NavLink>}
+            </For>
           </Nav>
         </Box>
       </Container>

package/dist/templates/ssg/src/pages/about.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -54,17 +55,19 @@ export default function Workflow() {
       />
 
       <CardGrid>
-        {steps.map((step) => (
-          <Card
-            eyebrow={step.number}
-            title={step.title}
-            description={step.body}
-          >
-            <p>
-              <code>{step.command}</code>
-            </p>
-          </Card>
-        ))}
+        <For each={steps} by={(step) => step.number}>
+          {(step) => (
+            <Card
+              eyebrow={step.number}
+              title={step.title}
+              description={step.body}
+            >
+              <p>
+                <code>{step.command}</code>
+              </p>
+            </Card>
+          )}
+        </For>
       </CardGrid>
 
       <Card

package/dist/templates/ssg/src/pages/content.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -50,13 +51,15 @@ export default function Content() {
       />
 
       <CardGrid>
-        {routeMap.map((route) => (
-          <Card
-            eyebrow={route.path}
-            title={route.title}
-            description={route.note}
-          />
-        ))}
+        <For each={[...routeMap]} by={(route) => route.path}>
+          {(route) => (
+            <Card
+              eyebrow={route.path}
+              title={route.title}
+              description={route.note}
+            />
+          )}
+        </For>
       </CardGrid>
     </>
   );

package/dist/templates/ssg/src/pages/example.tsx

@@ -67,8 +67,6 @@ export default function Preview() {
           <div class="preview-controls">
             <Input
               type="number"
-              min="1"
-              step="1"
               value={String(userId())}
               onInput={(event: Event) => {
                 const nextValue = Number.parseInt(

package/dist/templates/ssg/src/pages/home.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -42,9 +43,11 @@ export default function Home() {
       />
 
       <CardGrid>
-        {highlights.map((highlight) => (
-          <Card title={highlight.title} description={highlight.body} />
-        ))}
+        <For each={highlights} by={(highlight) => highlight.title}>
+          {(highlight) => (
+            <Card title={highlight.title} description={highlight.body} />
+          )}
+        </For>
       </CardGrid>
     </>
   );

package/dist/templates/ssr/AGENTS.md

@@ -26,3 +26,9 @@ npm run fmt
 ```
 
 Use askr-ui primitives for interactive controls, `--ak-*` theme tokens for styling, and preserve the shared server/browser route registry.
+
+## Recovery and completion
+
+- Run `askr repair` after analyzer failures; it applies only safe mechanical fixes.
+- Resolve remaining semantic diagnostics deliberately.
+- Run `npm run check` before declaring work complete. It requires clean Askr analysis, then runs lint, typecheck, tests, and build.

package/dist/templates/ssr/package.json

@@ -10,8 +10,9 @@
     "typecheck": "tsc --noEmit",
     "lint": "vp lint src server.ts tests vite.config.ts",
     "lint:fix": "npm run lint -- --fix",
+    "analyze": "askr analyze --check",
     "fmt": "vp fmt \"src/**/*.{ts,tsx,css}\" \"server.ts\" \"tests/**/*.{ts,tsx}\" \"*.md\"",
-    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+    "check": "askr check"
   },
   "dependencies": {
     "@askrjs/askr": ">=0.0.53 <0.1.0",

package/dist/templates/startkit/AGENTS.md

@@ -75,3 +75,6 @@ tests/               # Vitest tests
 - Run `npm run typecheck` for type-sensitive changes.
 - Run `npm run build` when app boot, routing, or packaging changes.
 - Confirm loading, empty, error, stale, and pending states remain truthful for user-visible flows.
+- Run `askr repair` after analyzer failures; it applies only safe mechanical fixes.
+- Resolve remaining semantic diagnostics deliberately.
+- Run `npm run check` before declaring work complete. It requires clean Askr analysis, then runs lint, typecheck, tests, and build.

package/dist/templates/startkit/package.json

@@ -11,9 +11,10 @@
     "typecheck": "tsc --noEmit",
     "lint": "vp lint .",
     "lint:fix": "npm run lint -- --fix",
+    "analyze": "askr analyze --check",
     "fmt": "vp fmt .",
     "fmt:check": "vp fmt --check .",
-    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+    "check": "askr check"
   },
   "dependencies": {
     "@askrjs/askr": ">=0.0.53 <0.1.0",

package/dist/templates/startkit/src/components/app-sidebar.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import {
   LayoutDashboardIcon,
@@ -67,27 +68,31 @@ export default function AppSidebar() {
         </NavBrand>
 
         <NavGroup id="workspace-nav-group" label="Workspace">
-          {primaryNav.map((item) => {
-            const Icon = item.icon;
-            return (
-              <NavLink href={item.href}>
-                <Icon size={16} aria-hidden={true} />
-                <span>{item.label}</span>
-              </NavLink>
-            );
-          })}
+          <For each={primaryNav} by={(item) => item.href}>
+            {(item) => {
+              const Icon = item.icon;
+              return (
+                <NavLink href={item.href}>
+                  <Icon size={16} aria-hidden={true} />
+                  <span>{item.label}</span>
+                </NavLink>
+              );
+            }}
+          </For>
         </NavGroup>
 
         <NavGroup id="other-nav-group" label="Other" placement="bottom">
-          {secondaryNav.map((item) => {
-            const Icon = item.icon;
-            return (
-              <NavLink href={item.href}>
-                <Icon size={16} aria-hidden={true} />
-                <span>{item.label}</span>
-              </NavLink>
-            );
-          })}
+          <For each={secondaryNav} by={(item) => item.href}>
+            {(item) => {
+              const Icon = item.icon;
+              return (
+                <NavLink href={item.href}>
+                  <Icon size={16} aria-hidden={true} />
+                  <span>{item.label}</span>
+                </NavLink>
+              );
+            }}
+          </For>
         </NavGroup>
       </Navbar>
     </aside>

package/dist/templates/startkit/src/components/data-table.tsx

@@ -58,18 +58,20 @@ export default function DataTable<Row>(props: {
       <table class={props.tableClass}>
         <thead>
           <tr>
-            {props.columns.map((column) => (
-              <th class={column.class}>{column.header}</th>
-            ))}
+            <For each={props.columns} by={(column) => column.key}>
+              {(column) => <th class={column.class}>{column.header}</th>}
+            </For>
           </tr>
         </thead>
         <tbody>
           <For each={props.rows} by={props.rowKey}>
             {(row: Row) => (
               <tr class={props.rowClass?.(row)}>
-                {props.columns.map((column) => (
-                  <td class={column.class}>{column.render(row)}</td>
-                ))}
+                <For each={props.columns} by={(column) => column.key}>
+                  {(column) => (
+                    <td class={column.class}>{column.render(row)}</td>
+                  )}
+                </For>
               </tr>
             )}
           </For>

package/dist/templates/startkit/src/pages/workspace/dashboard.tsx

@@ -1,4 +1,5 @@
 import { state } from '@askrjs/askr';
+import { For } from '@askrjs/askr/control';
 import { resource } from '@askrjs/askr/resources';
 import { Button } from '@askrjs/ui/button';
 import {
@@ -61,19 +62,21 @@ export default function DashboardPage() {
       />
 
       <div class="stat-grid">
-        {stats().map((stat) => {
-          const Icon =
-            iconByStatKey[stat.key as keyof typeof iconByStatKey] ??
-            BarChart3Icon;
-          return (
-            <StatCard
-              label={stat.label}
-              value={stat.value}
-              trend={stat.trend}
-              icon={Icon}
-            />
-          );
-        })}
+        <For each={stats} by={(stat) => stat.key}>
+          {(stat) => {
+            const Icon =
+              iconByStatKey[stat.key as keyof typeof iconByStatKey] ??
+              BarChart3Icon;
+            return (
+              <StatCard
+                label={stat.label}
+                value={stat.value}
+                trend={stat.trend}
+                icon={Icon}
+              />
+            );
+          }}
+        </For>
       </div>
 
       <section class="panel stack-md">