@askrjs/cli 0.0.10 → 0.0.12

package/dist/runner-Ca43qqzG.js

@@ -0,0 +1,289 @@
+import { t as inspectBundledSkills } from "./skills-CSGdAZHN.js";
+import { discoverWorkspaceProject } from "./discovery-DUDrZCIC.js";
+import { analysisHasBlockingFindings, runAnalysis } from "./runner-BRjjPhZY.js";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import semver from "semver";
+//#region src/guardrails/runner.ts
+const SUPPORTED_NODE_RANGE = "^20.19.0 || >=22.12.0";
+const VALIDATION_SCRIPTS = [
+	"lint",
+	"typecheck",
+	"test",
+	"build"
+];
+function summary(findings) {
+	return {
+		passed: findings.filter((entry) => entry.status === "pass").length,
+		warnings: findings.filter((entry) => entry.status === "warning").length,
+		errors: findings.filter((entry) => entry.status === "error").length
+	};
+}
+function dependencyRecord(manifest, section) {
+	const value = manifest[section];
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function hasAskrDependency(manifest) {
+	return [
+		"dependencies",
+		"devDependencies",
+		"peerDependencies",
+		"optionalDependencies"
+	].some((section) => "@askrjs/askr" in dependencyRecord(manifest, section));
+}
+async function existingLockfiles(root) {
+	return (await Promise.all([
+		"package-lock.json",
+		"pnpm-lock.yaml",
+		"yarn.lock",
+		"bun.lock",
+		"bun.lockb"
+	].map(async (name) => ({
+		name,
+		exists: Boolean(await fs.stat(path.join(root, name)).catch(() => null))
+	})))).filter((entry) => entry.exists).map((entry) => entry.name);
+}
+function declaredPackageManager(manifest) {
+	if (typeof manifest.packageManager !== "string") return null;
+	return /^(npm|pnpm|yarn|bun)@/.exec(manifest.packageManager)?.[1] ?? null;
+}
+function lockfilePackageManager(lockfile) {
+	if (lockfile === "package-lock.json") return "npm";
+	if (lockfile === "pnpm-lock.yaml") return "pnpm";
+	if (lockfile === "yarn.lock") return "yarn";
+	return "bun";
+}
+function packageManagerFinding(lockfiles, manifest) {
+	const declared = declaredPackageManager(manifest);
+	if (lockfiles.length > 1) return {
+		id: "askr/doctor-package-manager",
+		status: "error",
+		message: `Multiple package-manager lockfiles are present: ${lockfiles.join(", ")}.`,
+		remediation: "Keep the lockfile for the project's canonical package manager."
+	};
+	if (lockfiles.length === 0) return {
+		id: "askr/doctor-package-manager",
+		status: "warning",
+		message: "No package-manager lockfile is present.",
+		remediation: "Install dependencies with the project's chosen package manager."
+	};
+	const detected = lockfilePackageManager(lockfiles[0]);
+	if (declared && declared !== detected) return {
+		id: "askr/doctor-package-manager",
+		status: "error",
+		message: `packageManager declares ${declared}, but ${lockfiles[0]} belongs to ${detected}.`,
+		remediation: "Align packageManager and the committed lockfile."
+	};
+	return {
+		id: "askr/doctor-package-manager",
+		status: "pass",
+		message: `Package manager is ${declared ?? detected} (${lockfiles[0]}).`
+	};
+}
+async function skillsFinding(root) {
+	const status = await inspectBundledSkills({ cwd: root });
+	if (status.installed === 0) return {
+		id: "askr/doctor-agent-guidance",
+		status: "warning",
+		message: "Project-local Askr agent skills are not installed.",
+		remediation: "Run `askr skills install`, or `askr skills sync` for an existing project."
+	};
+	if (!status.current) return {
+		id: "askr/doctor-agent-guidance",
+		status: "warning",
+		message: `Project-local Askr agent skills are stale (${[
+			status.missing.length > 0 ? `${status.missing.length} missing` : "",
+			status.modified.length > 0 ? `${status.modified.length} modified` : "",
+			status.obsolete.length > 0 ? `${status.obsolete.length} obsolete` : ""
+		].filter(Boolean).join(", ")}).`,
+		remediation: "Run `askr skills sync` to restore the current bundled guidance."
+	};
+	return {
+		id: "askr/doctor-agent-guidance",
+		status: "pass",
+		message: `${status.bundled} project-local Askr agent skill(s) are current.`
+	};
+}
+function analysisFinding(analysis) {
+	if (analysis.summary.errors > 0) return {
+		id: "askr/doctor-analysis",
+		status: "error",
+		message: `Static analysis found ${analysis.summary.errors} error(s) and ${analysis.summary.warnings} warning(s).`,
+		remediation: "Run `askr repair`, review remaining findings, then run `askr check`."
+	};
+	if (analysis.summary.warnings > 0) return {
+		id: "askr/doctor-analysis",
+		status: "warning",
+		message: `Static analysis found ${analysis.summary.warnings} warning(s).`,
+		remediation: "Review the reported performance or lifecycle guidance."
+	};
+	return {
+		id: "askr/doctor-analysis",
+		status: "pass",
+		message: `Static analysis is clean across ${analysis.workspaces.length} workspace(s).`
+	};
+}
+async function runDoctor(options, runtime = {}) {
+	const project = await discoverWorkspaceProject({
+		cwd: options.cwd,
+		workspacePatterns: [...options.workspacePatterns]
+	});
+	const analysis = await runAnalysis({
+		cwd: options.cwd,
+		workspacePatterns: [...options.workspacePatterns],
+		check: true
+	});
+	const rootWorkspace = project.workspaces.find((workspace) => workspace.isRoot);
+	if (!rootWorkspace) throw new Error("Discovered project is missing its root workspace.");
+	const nodeVersion = runtime.nodeVersion ?? process.versions.node;
+	const findings = [semver.satisfies(nodeVersion, SUPPORTED_NODE_RANGE) ? {
+		id: "askr/doctor-node",
+		status: "pass",
+		message: `Node ${nodeVersion} satisfies ${SUPPORTED_NODE_RANGE}.`
+	} : {
+		id: "askr/doctor-node",
+		status: "error",
+		message: `Node ${nodeVersion} does not satisfy ${SUPPORTED_NODE_RANGE}.`,
+		remediation: `Install a Node version matching ${SUPPORTED_NODE_RANGE}.`
+	}, packageManagerFinding(await existingLockfiles(project.root), rootWorkspace.manifest)];
+	const sourceWorkspaces = new Set(analysis.workspaces.filter((workspace) => workspace.files > 0).map((workspace) => workspace.name));
+	const missingFramework = project.selectedWorkspaces.filter((workspace) => sourceWorkspaces.has(workspace.name) && !hasAskrDependency(workspace.manifest));
+	findings.push(missingFramework.length === 0 ? {
+		id: "askr/doctor-framework-dependency",
+		status: "pass",
+		message: "Source workspaces declare @askrjs/askr."
+	} : {
+		id: "askr/doctor-framework-dependency",
+		status: "error",
+		message: `Source workspace(s) do not declare @askrjs/askr: ${missingFramework.map((workspace) => workspace.name).join(", ")}.`,
+		remediation: "Declare @askrjs/askr in each application workspace."
+	});
+	findings.push(await skillsFinding(project.root), analysisFinding(analysis));
+	return {
+		schemaVersion: 1,
+		command: "doctor",
+		root: project.root,
+		findings,
+		analysis,
+		summary: summary(findings)
+	};
+}
+function scriptsFromManifest(manifest) {
+	const scripts = manifest.scripts;
+	if (!scripts || typeof scripts !== "object" || Array.isArray(scripts)) return {};
+	return Object.fromEntries(Object.entries(scripts).filter((entry) => typeof entry[1] === "string"));
+}
+async function defaultRunScript(executable, args, cwd) {
+	return new Promise((resolve, reject) => {
+		const child = spawn(executable, [...args], {
+			cwd,
+			env: {
+				...process.env,
+				NO_COLOR: "1"
+			},
+			stdio: [
+				"ignore",
+				"pipe",
+				"pipe"
+			]
+		});
+		let stdout = "";
+		let stderr = "";
+		child.stdout.setEncoding("utf8").on("data", (chunk) => {
+			stdout += chunk;
+		});
+		child.stderr.setEncoding("utf8").on("data", (chunk) => {
+			stderr += chunk;
+		});
+		child.on("error", reject);
+		child.on("close", (code) => {
+			resolve({
+				status: code === 0 ? "passed" : "failed",
+				exitCode: code,
+				stdout,
+				stderr
+			});
+		});
+	});
+}
+function managerCommand(lockfiles, manifest) {
+	return {
+		executable: declaredPackageManager(manifest) ?? (lockfiles.length === 1 ? lockfilePackageManager(lockfiles[0]) : "npm"),
+		args: (script) => ["run", script]
+	};
+}
+async function runCheck(options, runtime = {}) {
+	const project = await discoverWorkspaceProject({
+		cwd: options.cwd,
+		workspacePatterns: [...options.workspacePatterns]
+	});
+	const rootWorkspace = project.workspaces.find((workspace) => workspace.isRoot);
+	if (!rootWorkspace) throw new Error("Discovered project is missing its root workspace.");
+	const analysis = await runAnalysis({
+		cwd: options.cwd,
+		workspacePatterns: [...options.workspacePatterns],
+		check: true
+	});
+	const scripts = scriptsFromManifest(rootWorkspace.manifest);
+	const selected = VALIDATION_SCRIPTS.filter((name) => scripts[name]);
+	const manager = managerCommand(await existingLockfiles(project.root), rootWorkspace.manifest);
+	const results = [];
+	if (analysisHasBlockingFindings(analysis)) for (const name of selected) results.push({
+		name,
+		status: "skipped",
+		command: `${manager.executable} run ${name}`,
+		exitCode: null,
+		stdout: "",
+		stderr: "",
+		reason: "static analysis must pass first"
+	});
+	else for (const [index, name] of selected.entries()) {
+		const args = manager.args(name);
+		const result = await (runtime.runScript ?? defaultRunScript)(manager.executable, args, project.root);
+		results.push({
+			name,
+			command: [manager.executable, ...args].join(" "),
+			...result
+		});
+		if (result.status === "failed") {
+			for (const skipped of selected.slice(index + 1)) results.push({
+				name: skipped,
+				status: "skipped",
+				command: `${manager.executable} run ${skipped}`,
+				exitCode: null,
+				stdout: "",
+				stderr: "",
+				reason: `${name} failed`
+			});
+			break;
+		}
+	}
+	const failed = analysisHasBlockingFindings(analysis) || results.some((entry) => entry.status === "failed");
+	return {
+		schemaVersion: 1,
+		command: "check",
+		root: project.root,
+		analysis,
+		scripts: results,
+		status: failed ? "failed" : "passed"
+	};
+}
+async function runRepair(options) {
+	const analysis = await runAnalysis({
+		cwd: options.cwd,
+		workspacePatterns: [...options.workspacePatterns],
+		check: false
+	});
+	const needsReview = analysisHasBlockingFindings(analysis);
+	return {
+		schemaVersion: 1,
+		command: "repair",
+		root: analysis.root,
+		analysis,
+		status: needsReview ? "needs-review" : "clean",
+		nextAction: needsReview ? "Review the remaining semantic diagnostics, then run `askr repair` again." : "Run `askr check` to execute the full validation path."
+	};
+}
+//#endregion
+export { runCheck, runDoctor, runRepair };

package/dist/skills/askr-ssr-ssg/SKILL.md

@@ -34,6 +34,8 @@ Use this when the app renders outside the browser or produces static output. The
 ## Copy This Shape
 
 ```ts
+import { createRouteRegistry } from "@askrjs/askr/router";
+
 const registry = createRouteRegistry(() => {
   page("/docs/{slug}", DocsPage, {
     entries: async () => [{ slug: "getting-started" }, { slug: "routing" }],

package/dist/{skills-C2KzfTl9.js → skills-CSGdAZHN.js}

@@ -4,6 +4,7 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { constants } from "node:fs";
 import { fileURLToPath } from "node:url";
+import { createHash } from "node:crypto";
 //#region src/bin/skill-review.ts
 const TEXT_FILE_EXTENSIONS = /* @__PURE__ */ new Set([
 	".cjs",
@@ -303,6 +304,7 @@ const REVIEW_PROMPTS = [
 				re("local Sidebar", String.raw`export\s+(?:default\s+)?function\s+Sidebar\b`)
 			]),
 			requireAny("Keeps Askr-native route or state primitives in use.", [
+				re("registerRoutes", String.raw`\bregisterRoutes\s*\(`),
 				re("createRouteRegistry", String.raw`\bcreateRouteRegistry\s*\(`),
 				re("state()", String.raw`\bstate\s*\(`),
 				re("resource()", String.raw`\bresource\s*\(`)
@@ -554,6 +556,53 @@ async function listBundledSkills() {
 	const source = await findBundledSkillsDir();
 	return (await fs.readdir(source, { withFileTypes: true })).filter((entry) => entry.isDirectory()).map((entry) => entry.name).sort();
 }
+async function directoryFingerprint(directory) {
+	if (!(await fs.stat(directory).catch(() => null))?.isDirectory()) return null;
+	const hash = createHash("sha256");
+	const visit = async (current, relative) => {
+		const entries = await fs.readdir(current, { withFileTypes: true });
+		entries.sort((left, right) => left.name.localeCompare(right.name));
+		for (const entry of entries) {
+			const childRelative = relative ? `${relative}/${entry.name}` : entry.name;
+			const child = path.join(current, entry.name);
+			hash.update(`${entry.isDirectory() ? "d" : "f"}:${childRelative}\0`);
+			if (entry.isDirectory()) await visit(child, childRelative);
+			else if (entry.isFile()) hash.update(await fs.readFile(child));
+			else if (entry.isSymbolicLink()) hash.update(await fs.readlink(child));
+		}
+	};
+	await visit(directory, "");
+	return hash.digest("hex");
+}
+async function inspectBundledSkills(options = {}) {
+	const root = path.resolve(options.cwd ?? process.cwd());
+	const sourceRoot = await findBundledSkillsDir();
+	const targetRoot = path.join(root, PROJECT_SKILLS_DIR);
+	const bundledNames = await listBundledSkills();
+	const targetEntries = await fs.readdir(targetRoot, { withFileTypes: true }).catch(() => []);
+	const targetDirectories = new Set(targetEntries.filter((entry) => entry.isDirectory()).map((entry) => entry.name));
+	const missing = [];
+	const modified = [];
+	for (const name of bundledNames) {
+		if (!targetDirectories.has(name)) {
+			missing.push(name);
+			continue;
+		}
+		const [sourceFingerprint, targetFingerprint] = await Promise.all([directoryFingerprint(path.join(sourceRoot, name)), directoryFingerprint(path.join(targetRoot, name))]);
+		if (sourceFingerprint !== targetFingerprint) modified.push(name);
+	}
+	const bundledSet = new Set(bundledNames);
+	const obsolete = [...targetDirectories].filter((name) => name.startsWith(MANAGED_PREFIX) && !bundledSet.has(name)).sort();
+	const installed = bundledNames.filter((name) => targetDirectories.has(name)).length;
+	return {
+		bundled: bundledNames.length,
+		installed,
+		missing,
+		modified,
+		obsolete,
+		current: missing.length === 0 && modified.length === 0 && obsolete.length === 0
+	};
+}
 async function copyDir(src, dest) {
 	const entries = await fs.readdir(src, { withFileTypes: true });
 	await fs.mkdir(dest, { recursive: true });
@@ -741,4 +790,4 @@ async function main() {
 }
 if (isDirectExecution(import.meta.url)) main();
 //#endregion
-export { runSkillsCli as n, syncBundledSkills as r, installBundledSkills as t };
+export { syncBundledSkills as i, installBundledSkills as n, runSkillsCli as r, inspectBundledSkills as t };

package/dist/skills.d.ts

@@ -1,5 +1,16 @@
 //#region src/bin/skills.d.ts
 type CliIo = Pick<Console, "error" | "log">;
+interface BundledSkillStatus {
+  readonly bundled: number;
+  readonly installed: number;
+  readonly missing: readonly string[];
+  readonly modified: readonly string[];
+  readonly obsolete: readonly string[];
+  readonly current: boolean;
+}
+declare function inspectBundledSkills(options?: {
+  cwd?: string;
+}): Promise<BundledSkillStatus>;
 declare function installBundledSkills(options?: {
   cwd?: string;
   force?: boolean;
@@ -15,4 +26,4 @@ declare function syncBundledSkills(options?: {
 }>;
 declare function runSkillsCli(args?: string[], io?: CliIo): Promise<number>;
 //#endregion
-export { installBundledSkills, runSkillsCli, syncBundledSkills };
+export { BundledSkillStatus, inspectBundledSkills, installBundledSkills, runSkillsCli, syncBundledSkills };

package/dist/skills.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import { n as runSkillsCli, r as syncBundledSkills, t as installBundledSkills } from "./skills-C2KzfTl9.js";
-export { installBundledSkills, runSkillsCli, syncBundledSkills };
+import { i as syncBundledSkills, n as installBundledSkills, r as runSkillsCli, t as inspectBundledSkills } from "./skills-CSGdAZHN.js";
+export { inspectBundledSkills, installBundledSkills, runSkillsCli, syncBundledSkills };

package/dist/ssg.d.ts

@@ -38,6 +38,7 @@ interface SsgDeps {
   existsSync?: typeof existsSync;
   importConfig?: (filePath: string) => Promise<unknown>;
   createStaticGen?: (options: {
+    routes?: unknown[];
     registry?: unknown;
     outputDir: string;
     seed?: unknown;

package/dist/ssg.js

@@ -458,8 +458,9 @@ async function runSsgCli(args = process.argv.slice(2), deps = {}, io = console)
 		}
 		const configModule = imported;
 		const candidate = configModule.default ?? configModule.staticConfig ?? configModule;
-		if (!(candidate.registry !== void 0) || Object.prototype.hasOwnProperty.call(candidate, "routes")) {
-			io.error("Error: Config must provide a route registry and no raw routes array");
+		const hasRoutes = Array.isArray(candidate.routes);
+		if (hasRoutes === (candidate.registry !== void 0)) {
+			io.error("Error: Config must provide exactly one route source: routes or registry");
 			return 1;
 		}
 		const config = candidate;
@@ -467,7 +468,7 @@ async function runSsgCli(args = process.argv.slice(2), deps = {}, io = console)
 			io.error("Error: Config must provide siteUrl to generate sitemap.xml, or set sitemap: false");
 			return 1;
 		}
-		io.log("Generating registered routes...");
+		io.log(hasRoutes ? `Generating ${config.routes?.length ?? 0} routes...` : "Generating registered routes...");
 		const createStaticGen = typeof resolvedDeps.createStaticGen === "function" ? resolvedDeps.createStaticGen : await loadCreateStaticGen();
 		cliStagingDir = await createSiblingStage(resolvedOutputDir, "askr-ssg");
 		if (parsed.incremental && !parsed.forceFull && await pathExists(resolvedOutputDir)) await fs$1.cp(resolvedOutputDir, cliStagingDir, {
@@ -476,7 +477,7 @@ async function runSsgCli(args = process.argv.slice(2), deps = {}, io = console)
 		});
 		const generationOutputDir = cliStagingDir;
 		const ssg = createStaticGen({
-			registry: config.registry,
+			...hasRoutes ? { routes: config.routes } : { registry: config.registry },
 			outputDir: generationOutputDir,
 			seed: config.seed,
 			dataOverrides: config.dataOverrides,

package/dist/templates/full-stack/AGENTS.md

@@ -9,3 +9,9 @@ This project is the progressive full-stack stage of an Askr application.
 - Keep `index.html` as the only document source. Preserve exactly one `<!--askr-head-->` and one `<!--askr-app-->` marker.
 - Use native forms first; enhanced submission must preserve the same validation and authorization behavior.
 - Never log cookies, authorization values, tokens, form fields, request bodies, or personal data.
+
+## 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/full-stack/package.json

@@ -10,8 +10,9 @@
     "test": "vp test run",
     "typecheck": "tsc --noEmit",
     "lint": "vp lint src server.ts tests vite.config.ts",
+    "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/spa/AGENTS.md

@@ -16,7 +16,7 @@ npm run fmt        # Prettier
 
 ## Architecture
 
-- **Routing:** `src/main.tsx` imports `src/pages/_routes.tsx`, then boots `createSPA()` with the route manifest. Route branches live under `src/pages/public`, `src/pages/auth`, and `src/pages/app`.
+- **Routing:** `src/main.tsx` imports the `pageRegistry` from `src/pages/_routes.tsx`, then passes it to `createSPA()`. Route branches live under `src/pages/public`, `src/pages/auth`, and `src/pages/app`.
 - **Layouts:** `_layout.tsx` files own shells. The root layout owns `ThemeScope`; public layouts own landing chrome, auth layouts own sign-in chrome, and app layouts own authenticated sidebar chrome.
 - **UI:** Prefer the `@askrjs/themes/components` catalog before writing local components. Use app-local components only for product concepts such as `MetricCard` and `StatusBadge`; keep charts in `@askrjs/charts`.
 - **State:** `const [value, setValue] = state(initial)`. Read with `value()`, update with `setValue(...)`. Use `derive()` for computed values and `resource()` for async data.
@@ -58,3 +58,9 @@ tests/
 - Use `Link` and `navigate` from `@askrjs/askr/router`.
 - Use headless `@askrjs/ui/*` for behavior primitives and `@askrjs/themes/*` for composed visual surfaces.
 - Avoid hardcoded color systems, custom component catalogs, and React habits like effect-driven data loading.
+
+## 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/spa/README.md

@@ -16,7 +16,7 @@ npm test         # Run tests with Vitest
 
 ```
 src/
-|-- main.tsx                         # SPA boot and route manifest
+|-- main.tsx                         # SPA boot and route registry
 |-- pages/
 |   |-- _routes.tsx                  # Top-level route branches
 |   |-- _layout.tsx                  # Theme provider and app root

package/dist/templates/spa/package.json

@@ -11,8 +11,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/spa/src/main.tsx

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

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

@@ -6,6 +6,7 @@ import {
   SettingsIcon,
   SunIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import { Link, navigate } from '@askrjs/askr/router';
 import { Button } from '@askrjs/themes/components';
 import { Container, Inline, Stack } from '@askrjs/themes/components';
@@ -42,14 +43,16 @@ export default function AppLayout({ children }: { children?: unknown }) {
             </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>
-            ))}
+            <For each={[...appNavItems]} by={(item) => item.href}>
+              {(item) => (
+                <NavLink href={item.href} match={item.match}>
+                  <Inline as="span" gap="2" align="center">
+                    {icons[item.icon]}
+                    <span>{item.label}</span>
+                  </Inline>
+                </NavLink>
+              )}
+            </For>
           </NavGroup>
           <NavGroup label="Session" align="end">
             <NavLink href="/" match="exact">