@timber-js/app 0.2.0-alpha.2 → 0.2.0-alpha.200

package/src/cli.ts

@@ -10,27 +10,64 @@
 //   timber build    — Run multi-environment build via createBuilder/buildApp
 //   timber preview  — Serve the production build
 //   timber check    — Validate types + routes without building
+//   timber graph    — Classify a file's module environment(s) (design/47)
 
-const COMMANDS = ['dev', 'build', 'preview', 'check'] as const;
+// Type-only — the implementation is imported dynamically inside runCheck so the
+// CLI's other commands never load the route scanner.
+import type { CheckDeps } from './cli-check.ts';
+
+export type { CheckDeps };
+
+const COMMANDS = ['dev', 'build', 'preview', 'check', 'schema', 'init', 'graph'] as const;
 type Command = (typeof COMMANDS)[number];
 
 export interface ParsedArgs {
   command: Command;
   config: string | undefined;
+  /** `--project`: the tsconfig `timber check` passes to tsgo. */
+  project: string | undefined;
+  /** `timber graph` only: emit the machine-readable JSON contract. */
+  json: boolean;
+  /** `timber graph` only: classify the whole project. */
+  all: boolean;
+  /** Positional arguments after the command (`schema sync`, `graph <file>`). */
+  rest: string[];
 }
 
 export interface CommandOptions {
+  /** Path to a Vite config file. Means the same thing for every command. */
   config?: string;
+  /** `timber check` only: the tsconfig to type-check. */
+  project?: string;
 }
 
 /**
  * Parse CLI arguments into a structured command + options.
- * Accepts: timber <command> [--config|-c <path>]
+ * Accepts: timber <command> [--config|-c <path>] [--project <path>]
+ *
+ * `--config` names a **Vite** config file for every command, `check` included
+ * (TIM-1332): `check` resolves the project through Vite, so a project that
+ * builds with `--config ./custom.vite.config.ts` has to be checkable the same
+ * way. `--project` names the tsconfig, spelled as tsgo and tsc spell it, and
+ * is meaningful only for `check`.
+ *
+ * Before TIM-1332 `--config` meant the tsconfig for `check` alone — one flag
+ * with two meanings, which the docs had to carry a note to explain and which
+ * left custom Vite configs unreachable from `check` entirely.
+ *
+ * Unknown flags are an error, not silently ignored — `timber dev --port 4000`
+ * starting on the default port would contradict fail-loudly. The surface stays
+ * deliberately small (design/11-platform.md §CLI); port selection goes through
+ * the PORT env var or server.port in vite.config.ts.
+ *
+ * Each subcommand declares its exact flags (the `check --project` precedent,
+ * TIM-1332): `graph` additionally accepts a file positional plus `--json` and
+ * `--all`, and those two are rejected everywhere else.
  */
 export function parseArgs(args: string[]): ParsedArgs {
   if (args.length === 0) {
     throw new Error(
-      'No command provided. Usage: timber <dev|build|preview|check> [--config <path>]'
+      'No command provided. Usage: timber <dev|build|preview|check|schema|init|graph> [--config <path>]'
     );
   }
 
@@ -40,16 +77,60 @@ export function parseArgs(args: string[]): ParsedArgs {
   }
 
   let config: string | undefined;
+  let project: string | undefined;
+  let json = false;
+  let all = false;
+  const rest: string[] = [];
   for (let i = 1; i < args.length; i++) {
-    if (args[i] === '--config' || args[i] === '-c') {
+    const arg = args[i];
+    if (arg === '--config' || arg === '-c') {
       config = args[++i];
       if (!config) {
         throw new Error('--config requires a path argument');
       }
+    } else if (arg === '--json' || arg === '--all') {
+      if (command !== 'graph') {
+        throw new Error(
+          `${arg} is only valid for \`timber graph\` (the module-environment query).`
+        );
+      }
+      if (arg === '--json') json = true;
+      else all = true;
+    } else if (arg === '--project') {
+      if (command !== 'check') {
+        throw new Error(
+          `--project is only valid for \`timber check\` (it names the tsconfig to type-check). ` +
+            `To point \`timber ${command}\` at a different Vite config, use --config <path>.`
+        );
+      }
+      project = args[++i];
+      if (!project) {
+        throw new Error('--project requires a path argument');
+      }
+    } else if (arg.startsWith('-')) {
+      const portHint =
+        arg === '--port' || arg === '-p'
+          ? ' To change the port, set the PORT environment variable (PORT=4000 timber dev) ' +
+            'or server.port in vite.config.ts.'
+          : '';
+      throw new Error(
+        `Unknown option: ${arg}. The timber CLI accepts --config <path>` +
+          ` (and --project <path> for \`check\`).${portHint}`
+      );
+    } else if (command === 'schema' || command === 'init' || command === 'graph') {
+      rest.push(arg);
+    } else {
+      throw new Error(`Unexpected argument: ${arg}. Usage: timber ${command} [--config <path>]`);
     }
   }
 
-  return { command: command as Command, config };
+  if (command === 'graph' && rest.length > 1) {
+    throw new Error(
+      `timber graph takes one file. Usage: timber graph <file> [--json], or timber graph --all --json`
+    );
+  }
+
+  return { command: command as Command, config, project, json, all, rest };
 }
 
 // ─── Command Implementations ─────────────────────────────────────────────────
@@ -63,7 +144,12 @@ export interface ViteDeps {
 
 /**
  * Start the Vite dev server.
- * Middleware re-runs on file change via HMR wiring in timber-routing.
+ *
+ * The timber plugin binds the port immediately with a holding page
+ * (in rootSync's config hook) so browsers see a "starting..." page
+ * instead of ERR_CONNECTION_REFUSED during initialization.
+ *
+ * See design/21-dev-server.md, TIM-665.
  */
 export async function runDev(options: CommandOptions, _deps?: ViteDeps): Promise<void> {
   const createServer = _deps?.createServer ?? (await import('vite')).createServer;
@@ -92,7 +178,7 @@ export async function runBuild(options: CommandOptions, _deps?: ViteDeps): Promi
  * Exported for testing — the actual runPreview function uses this internally.
  */
 export function resolvePreviewStrategy(
-  adapter: import('./adapters/types').TimberPlatformAdapter | undefined
+  adapter: import('./adapters/types.ts').TimberPlatformAdapter | undefined
 ): 'adapter' | 'vite' {
   if (adapter && typeof adapter.preview === 'function') {
     return 'adapter';
@@ -100,46 +186,27 @@ export function resolvePreviewStrategy(
   return 'vite';
 }
 
-/**
- * Load timber.config.ts from the project root.
- * Returns the config object with adapter, output, etc.
- * Returns null if no config file is found.
- */
-async function loadTimberConfig(
-  root: string
-): Promise<{ adapter?: import('./adapters/types').TimberPlatformAdapter; output?: string } | null> {
-  const { existsSync } = await import('node:fs');
-  const { join } = await import('node:path');
-  const { pathToFileURL } = await import('node:url');
-
-  const configNames = ['timber.config.ts', 'timber.config.js', 'timber.config.mjs'];
-
-  for (const name of configNames) {
-    const configPath = join(root, name);
-    if (existsSync(configPath)) {
-      // Use Vite's built-in config loading to handle TypeScript
-      const mod = await import(pathToFileURL(configPath).href);
-      return mod.default ?? mod;
-    }
-  }
-  return null;
-}
-
 /**
  * Serve the production build for local testing.
  * If the adapter provides a preview() method, it takes priority.
  * Otherwise falls back to Vite's built-in preview server.
+ *
+ * Uses the same loadTimberConfigFile loader as dev/build — one loader,
+ * one set of module semantics. A config file that exists but fails to
+ * load throws (naming the file) instead of silently degrading to plain
+ * Vite preview. See TIM-1066.
  */
 export async function runPreview(options: CommandOptions, _deps?: ViteDeps): Promise<void> {
-  const { join } = await import('node:path');
+  const { loadTimberConfigFile, resolveBuildDir } = await import('./plugin-context.ts');
 
-  // Try to load timber config for adapter-specific preview
   const root = process.cwd();
-  const config = await loadTimberConfig(root).catch(() => null);
-  const adapter = config?.adapter as import('./adapters/types').TimberPlatformAdapter | undefined;
+  const config = loadTimberConfigFile(root);
+  const adapter = config?.adapter as
+    | import('./adapters/types.ts').TimberPlatformAdapter
+    | undefined;
 
   if (resolvePreviewStrategy(adapter) === 'adapter') {
-    const buildDir = join(root, 'dist');
+    const buildDir = resolveBuildDir(root, config?.buildDir);
     const timberConfig = { output: (config?.output ?? 'server') as 'server' | 'static' };
     await adapter!.preview!(timberConfig, buildDir);
     return;
@@ -154,31 +221,153 @@ export async function runPreview(options: CommandOptions, _deps?: ViteDeps): Pro
 }
 
 /**
- * Validate types and routes without producing build output.
- * Runs tsgo --noEmit for type checking.
+ * Validate routes and types without producing build output.
+ *
+ * Runs the route pass first — resolve the project through Vite, scan it, fail
+ * on proven-fatal convention errors, print warnings, and regenerate the route
+ * types — then `tsgo --noEmit`. Codegen has to precede the type pass: the
+ * generated `.timber/*.d.ts` files are what type `<Link href>` and
+ * `useSegmentParams()`, and a fresh clone has never produced them. See
+ * `cli-check.ts` for the full reasoning.
+ *
+ * `--config` names the **Vite** config, as it does for every other command, so
+ * an app that builds with a custom one is checkable the same way.
+ * `--project` names the tsconfig handed to tsgo.
  */
-export async function runCheck(options: CommandOptions): Promise<void> {
-  const { execFile } = await import('node:child_process');
-
-  await new Promise<void>((resolve, reject) => {
-    const configArgs = options.config ? ['--project', options.config] : [];
-    execFile('tsgo', ['--noEmit', ...configArgs], (err, stdout, stderr) => {
-      if (stdout) process.stdout.write(stdout);
-      if (stderr) process.stderr.write(stderr);
-      if (err) {
-        reject(new Error(`Type check failed with exit code ${err.code}`));
-      } else {
-        resolve();
-      }
-    });
-  });
+export async function runCheck(options: CommandOptions, _deps?: CheckDeps): Promise<void> {
+  const { checkRoutes, runTypeCheck } = await import('./cli-check.ts');
+  const { root } = await checkRoutes({ viteConfigFile: options.config }, _deps);
+  // tsgo runs from the root the route pass resolved, not from cwd — that is
+  // where it just wrote the declarations tsgo has to read.
+  await runTypeCheck({ root, config: options.project }, _deps);
+}
+
+// ─── Schema Subcommand ───────────────────────────────────────────────────────
+
+/**
+ * `timber schema sync` — scan filesystem for dynamic segments, diff against
+ * app/schema.ts, and append missing entries with type-appropriate codec defaults.
+ *
+ * See design/41-global-params.md §Auto-Scaffolding
+ */
+export async function runSchema(args: string[]): Promise<void> {
+  const subcommand = args[0];
+
+  if (subcommand !== 'sync') {
+    throw new Error(
+      `Unknown schema subcommand: ${subcommand ?? '(none)'}. Usage: timber schema sync`
+    );
+  }
+
+  const { runSchemaSync, defaultCodecForSegment } = await import('./cli-schema-sync.ts');
+  const result = runSchemaSync(process.cwd());
+
+  if (result.filesystemSegments.length === 0) {
+    console.log('[timber] No dynamic segments found in app/.');
+    return;
+  }
+
+  if (result.created) {
+    console.log(`[timber] Created app/schema.ts with ${result.addedSegments.length} segment(s):`);
+    for (const seg of result.addedSegments) {
+      console.log(`  + ${seg}: ${defaultCodecForSegment(seg)}`);
+    }
+    return;
+  }
+
+  if (result.addedSegments.length === 0 && result.removedSegments.length === 0) {
+    console.log('[timber] Schema is up to date — all segments are registered.');
+    return;
+  }
+
+  if (result.addedSegments.length > 0) {
+    console.log(`[timber] Added ${result.addedSegments.length} segment(s) to app/schema.ts:`);
+    for (const seg of result.addedSegments) {
+      console.log(`  + ${seg}: ${defaultCodecForSegment(seg)}`);
+    }
+  }
+
+  if (result.removedSegments.length > 0) {
+    console.log(
+      `[timber] Removed ${result.removedSegments.length} stale segment(s) from app/schema.ts:`
+    );
+    for (const seg of result.removedSegments) {
+      console.log(`  - ${seg}`);
+    }
+  }
+}
+
+// ─── Init Subcommand ─────────────────────────────────────────────────────────
+
+/**
+ * `timber init` — write AGENTS.md (and a CLAUDE.md symlink to it) to the
+ * project root so AI coding agents can discover timber.js documentation and
+ * conventions.
+ *
+ * The content is read from the installed @timber-js/app package itself, so it
+ * stays in sync with the installed version.
+ */
+export async function runInit(): Promise<void> {
+  const { readFileSync, writeFileSync, existsSync, symlinkSync } = await import('node:fs');
+  const { resolve, dirname } = await import('node:path');
+  const { fileURLToPath } = await import('node:url');
+
+  const root = process.cwd();
+  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+  const agentSkillPath = resolve(packageRoot, 'agent-skill.md');
+  if (!existsSync(agentSkillPath)) {
+    throw new Error(
+      'agent-skill.md not found in @timber-js/app package. ' +
+        'This may be a development install — try reinstalling.'
+    );
+  }
+
+  const agentSkill = readFileSync(agentSkillPath, 'utf-8');
+
+  const agentsPath = resolve(root, 'AGENTS.md');
+  const claudePath = resolve(root, 'CLAUDE.md');
+
+  const wrote: string[] = [];
+
+  if (existsSync(agentsPath)) {
+    console.log('[timber] AGENTS.md already exists — skipping (delete it first to regenerate)');
+  } else {
+    writeFileSync(agentsPath, agentSkill);
+    wrote.push('AGENTS.md');
+  }
+
+  if (existsSync(claudePath)) {
+    console.log('[timber] CLAUDE.md already exists — skipping (delete it first to regenerate)');
+  } else {
+    try {
+      // Relative target so the link survives the project directory moving.
+      // The 'file' type argument is required for Windows (ignored elsewhere).
+      symlinkSync('AGENTS.md', claudePath, 'file');
+      wrote.push('CLAUDE.md (symlink)');
+    } catch {
+      // Windows without Developer Mode or admin rights can't create symlinks
+      // (EPERM) — fall back to a plain pointer file.
+      writeFileSync(claudePath, 'Read AGENTS.md for project context and conventions.\n');
+      wrote.push('CLAUDE.md');
+    }
+  }
+
+  if (wrote.length > 0) {
+    console.log(
+      `[timber] Created ${wrote.join(' and ')} — AI agents can now discover timber.js docs.`
+    );
+    console.log('[timber] Full documentation: node_modules/@timber-js/app/docs/');
+  } else {
+    console.log('[timber] Nothing to do — both files already exist.');
+  }
 }
 
 // ─── Main Entry Point ────────────────────────────────────────────────────────
 
 async function main(): Promise<void> {
   const parsed = parseArgs(process.argv.slice(2));
-  const options: CommandOptions = { config: parsed.config };
+  const options: CommandOptions = { config: parsed.config, project: parsed.project };
 
   switch (parsed.command) {
     case 'dev':
@@ -193,6 +382,24 @@ async function main(): Promise<void> {
     case 'check':
       await runCheck(options);
       break;
+    case 'schema':
+      await runSchema(parsed.rest);
+      break;
+    case 'init':
+      await runInit();
+      break;
+    case 'graph': {
+      // Lazy import — the graph implementation (and, on a cache miss,
+      // Vite + the crawl child) never loads for the other commands.
+      const { runGraph } = await import('./analyze/graph-command.ts');
+      await runGraph({
+        file: parsed.rest[0],
+        config: parsed.config,
+        json: parsed.json,
+        all: parsed.all,
+      });
+      break;
+    }
   }
 }
 

package/src/client/browser-dev.ts

@@ -1,5 +1,6 @@
 /**
- * Dev-only browser helpers — server log replay and client error forwarding.
+ * Dev-only browser helpers — server log replay, client error forwarding,
+ * and compiling overlay.
  *
  * These are only active when import.meta.hot is available (Vite dev mode).
  * Extracted from browser-entry.ts to keep files under 500 lines.
@@ -7,7 +8,7 @@
  * See design/21-dev-server.md §"HMR Wiring"
  */
 
-import { isPageUnloading } from './unload-guard.js';
+import { isPageUnloading } from './unload-guard.ts';
 
 // ─── HMR Hot Interface ──────────────────────────────────────────────
 
@@ -100,6 +101,132 @@ export function setupServerLogReplay(hot: Pick<HotInterface, 'on'>): void {
   });
 }
 
+// ─── Compiling Overlay ──────────────────────────────────────────
+
+/**
+ * Compiling overlay state.
+ *
+ * A small non-blocking indicator in the bottom-left corner that shows
+ * "Compiling..." during HMR/module updates. Uses a 200ms debounce so
+ * near-instant updates never flash the indicator.
+ *
+ * The overlay is lazily created on first show and reused thereafter.
+ * All styles are inline — no external CSS dependency.
+ */
+
+let overlayEl: HTMLDivElement | null = null;
+let showTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let pendingUpdates = 0;
+
+/** Debounce delay before showing the overlay (ms). */
+const SHOW_DELAY_MS = 200;
+
+/**
+ * Get the effective debounce delay.
+ * Checks for a test override on `window.__timber_compiling_debounce`
+ * (number) to allow E2E tests to bypass the debounce.
+ */
+function getShowDelay(): number {
+  const win = window as unknown as { __timber_compiling_debounce?: number };
+  return typeof win.__timber_compiling_debounce === 'number'
+    ? win.__timber_compiling_debounce
+    : SHOW_DELAY_MS;
+}
+
+/**
+ * Lazily create the overlay DOM element.
+ * Appended to document.body with fixed positioning in the bottom-left.
+ */
+function getOrCreateOverlay(): HTMLDivElement {
+  if (overlayEl) return overlayEl;
+
+  const el = document.createElement('div');
+  el.setAttribute('data-timber-compiling-overlay', '');
+  Object.assign(el.style, {
+    position: 'fixed',
+    bottom: '16px',
+    left: '16px',
+    padding: '6px 12px',
+    background: 'rgba(0, 0, 0, 0.85)',
+    color: '#fff',
+    fontSize: '13px',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontWeight: '500',
+    borderRadius: '6px',
+    zIndex: '2147483647',
+    pointerEvents: 'none',
+    opacity: '0',
+    transition: 'opacity 150ms ease',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+    lineHeight: '1',
+  });
+  el.textContent = 'Compiling…';
+  document.body.appendChild(el);
+  overlayEl = el;
+  return el;
+}
+
+/**
+ * Signal that an HMR/module update has started.
+ *
+ * If an update is already tracked, this increments the counter.
+ * The overlay is shown after SHOW_DELAY_MS to avoid flashing
+ * for fast updates.
+ *
+ * When the delay is 0 (E2E test override), the overlay is shown
+ * synchronously to eliminate the race where hideCompilingOverlay()
+ * clears the show timeout before it fires.
+ */
+export function showCompilingOverlay(): void {
+  pendingUpdates++;
+  if (pendingUpdates === 1) {
+    const delay = getShowDelay();
+    if (delay <= 0) {
+      // Synchronous show — no setTimeout race with hideCompilingOverlay().
+      // Used by E2E tests to guarantee the overlay is visible before
+      // the async HMR refresh begins its network roundtrip.
+      const el = getOrCreateOverlay();
+      el.style.opacity = '1';
+    } else {
+      // Production path — debounce to avoid flashing for fast updates
+      showTimeoutId = setTimeout(() => {
+        showTimeoutId = null;
+        const el = getOrCreateOverlay();
+        el.style.opacity = '1';
+      }, delay);
+    }
+  }
+}
+
+/**
+ * Signal that an HMR/module update has completed.
+ *
+ * When all pending updates are resolved, the overlay is hidden.
+ * If the overlay was never shown (update completed within the
+ * debounce window), the timeout is cleared — no visual flash.
+ *
+ * Test hook: if `window.__timber_hold_compiling_overlay` is true,
+ * the overlay stays visible. E2E tests use this to avoid a race
+ * where the RSC refresh completes between polling intervals,
+ * making the overlay impossible to observe.
+ */
+export function hideCompilingOverlay(): void {
+  const win = window as unknown as { __timber_hold_compiling_overlay?: boolean };
+  if (win.__timber_hold_compiling_overlay) return;
+
+  pendingUpdates = Math.max(0, pendingUpdates - 1);
+  if (pendingUpdates === 0) {
+    if (showTimeoutId !== null) {
+      clearTimeout(showTimeoutId);
+      showTimeoutId = null;
+    }
+    if (overlayEl) {
+      overlayEl.style.opacity = '0';
+    }
+  }
+}
+
 // ─── Client Error Forwarding ────────────────────────────────────────
 
 /**
@@ -115,6 +242,10 @@ export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): voi
     if (!event.error && !event.message) return;
     // Skip errors during page unload — these are abort-related, not application errors
     if (isPageUnloading()) return;
+    // Skip framework signal digests (redirect/deny) — these are control-flow
+    // signals, not application errors. They should never surface as dev
+    // overlays even if they escape an error boundary. See TIM-838.
+    if (isFrameworkSignalError(event.error)) return;
 
     const error = event.error;
     hot.send('timber:client-error', {
@@ -129,6 +260,8 @@ export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): voi
     if (!reason) return;
     // Skip rejections during page unload — aborted fetches/streams cause these
     if (isPageUnloading()) return;
+    // Skip framework signal digests (redirect/deny). See TIM-838.
+    if (isFrameworkSignalError(reason)) return;
 
     const message = reason instanceof Error ? reason.message : String(reason);
     const stack = reason instanceof Error ? (reason.stack ?? '') : '';
@@ -140,3 +273,25 @@ export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): voi
     });
   });
 }
+
+/**
+ * Detect errors whose `digest` marks them as a framework control-flow signal
+ * (RedirectSignal, DenySignal). These must never surface as dev overlays —
+ * they are expected during navigation and are handled by the error boundary
+ * and router. Exported for tests.
+ *
+ * See also: isControlFlowSignal() in server/primitives.ts (server-side,
+ * handles both instanceof and digest detection).
+ */
+export function isFrameworkSignalError(error: unknown): boolean {
+  if (!error || typeof error !== 'object') return false;
+  const digest = (error as { digest?: unknown }).digest;
+  if (typeof digest !== 'string') return false;
+  try {
+    const parsed = JSON.parse(digest) as { type?: unknown } | null;
+    if (!parsed || typeof parsed !== 'object') return false;
+    return parsed.type === 'redirect' || parsed.type === 'deny';
+  } catch {
+    return false;
+  }
+}