@slats/claude-assets-sync 0.3.0 → 0.3.2

package/scripts/dev-ui.tsx

@@ -0,0 +1,288 @@
+#!/usr/bin/env node
+import { render, Box, Text, useApp, useInput } from 'ink';
+import React, { useEffect, useState } from 'react';
+
+import { Banner } from '../src/ui/components/Banner.js';
+import { ConfirmForce } from '../src/ui/components/ConfirmForce.js';
+import { ErrorPanel } from '../src/ui/components/ErrorPanel.js';
+import { Footer } from '../src/ui/components/Footer.js';
+import { ProgressBar } from '../src/ui/components/ProgressBar.js';
+import { ScopePicker } from '../src/ui/components/ScopePicker.js';
+import { Spinner } from '../src/ui/components/Spinner.js';
+import { StepTracker } from '../src/ui/components/StepTracker.js';
+import { Summary } from '../src/ui/components/Summary.js';
+import { TargetCard } from '../src/ui/components/TargetCard.js';
+import { colors } from '../src/ui/theme/colors.js';
+import { icons } from '../src/ui/theme/icons.js';
+import type { Phase } from '../src/ui/types/index.js';
+import { VERSION } from '../src/utils/version.js';
+
+import { buildPhase, PHASES, type PhaseKey } from './dev-ui-fixtures.js';
+
+interface CliArgs {
+  mode: 'usage' | 'phase' | 'tour';
+  phase?: PhaseKey;
+  tourMs?: number;
+}
+
+function parseArgs(argv: readonly string[]): CliArgs {
+  if (argv.includes('--tour')) {
+    const msArg = argv.find((a) => a.startsWith('--ms='));
+    const tourMs = msArg ? Number(msArg.slice(5)) : 2500;
+    return { mode: 'tour', tourMs };
+  }
+  const phaseArg = argv.find((a) => a.startsWith('--phase='));
+  if (phaseArg) {
+    const phaseKey = phaseArg.slice(8);
+    if (!PHASES.includes(phaseKey as PhaseKey)) {
+      console.error(
+        `Unknown phase: ${phaseKey}. Available: ${PHASES.join(', ')}`,
+      );
+      process.exit(2);
+    }
+    return { mode: 'phase', phase: phaseKey as PhaseKey };
+  }
+  return { mode: 'usage' };
+}
+
+function Usage(): React.ReactElement {
+  return (
+    <Box flexDirection="column">
+      <Text bold color={colors.primary}>
+        {icons.triangleRight} claude-assets-sync — dev UI runner
+      </Text>
+      <Box marginLeft={2} marginTop={1} flexDirection="column">
+        <Text color={colors.muted}>Preview individual Ink screens or tour them all.</Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text>
+            <Text color={colors.success} bold>yarn dev:ui</Text>
+            <Text color={colors.muted}>{' --phase=<name>      '}</Text>
+            <Text dimColor>single phase preview</Text>
+          </Text>
+          <Text>
+            <Text color={colors.success} bold>yarn dev:ui</Text>
+            <Text color={colors.muted}>{' --tour [--ms=2500]  '}</Text>
+            <Text dimColor>cycle through all phases</Text>
+          </Text>
+          <Text>
+            <Text color={colors.success} bold>yarn dev:cli</Text>
+            <Text color={colors.muted}>{' <args>             '}</Text>
+            <Text dimColor>run the actual CLI against real packages</Text>
+          </Text>
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Text bold>Available phases:</Text>
+          {PHASES.map((p) => (
+            <Text key={p} color={colors.muted}>
+              {'  '}·{' '}
+              <Text color={colors.accent}>{p}</Text>
+            </Text>
+          ))}
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Text bold>Examples:</Text>
+          <Text color={colors.muted}>
+            {'  '}yarn dev:ui --phase=diff-review
+          </Text>
+          <Text color={colors.muted}>
+            {'  '}yarn dev:ui --phase=applying
+          </Text>
+          <Text color={colors.muted}>
+            {'  '}yarn dev:ui --tour --ms=1800
+          </Text>
+          <Text color={colors.muted}>
+            {'  '}yarn dev:cli --package @canard/schema-form --scope=project --dry-run
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+interface FixtureViewProps {
+  readonly phase: Phase;
+  readonly targetCount: number;
+}
+
+function FixtureView({ phase, targetCount }: FixtureViewProps): React.ReactElement {
+  return (
+    <Box flexDirection="column">
+      <Banner version={VERSION} scope="user" />
+      <Box marginTop={1}>
+        <StepTracker phase={phase} targetCount={targetCount} scope="user" />
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {renderPhaseBody(phase)}
+      </Box>
+      <Footer phase={phase} version={VERSION} />
+    </Box>
+  );
+}
+
+function renderPhaseBody(phase: Phase): React.ReactNode {
+  switch (phase.kind) {
+    case 'booting':
+    case 'resolving':
+      return <Spinner label="resolving targets…" />;
+    case 'scope-select':
+      return <ScopePicker onSelect={phase.pending} />;
+    case 'planning':
+      return (
+        <Box flexDirection="column">
+          <Spinner label="building plans…" />
+          <Box flexDirection="column" marginLeft={2} marginTop={1}>
+            {[...phase.progress.values()].map((step) => (
+              <Box key={step.packageName}>
+                <Text
+                  color={
+                    step.status === 'done'
+                      ? colors.success
+                      : step.status === 'running'
+                        ? colors.warn
+                        : step.status === 'failed'
+                          ? colors.danger
+                          : colors.muted
+                  }
+                  bold={step.status === 'running'}
+                >
+                  {step.status === 'done'
+                    ? icons.check
+                    : step.status === 'failed'
+                      ? icons.cross
+                      : step.status === 'running'
+                        ? icons.bulletActive
+                        : icons.bulletPending}{' '}
+                </Text>
+                <Text>{step.packageName}</Text>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      );
+    case 'diff-review':
+      return (
+        <Box flexDirection="column">
+          {phase.plans.map((tp, idx) => (
+            <TargetCard
+              key={tp.target.name}
+              target={tp.target}
+              plan={tp.plan}
+              expanded
+              highlighted={idx === phase.focusedIndex}
+            />
+          ))}
+        </Box>
+      );
+    case 'force-confirm':
+      return <ConfirmForce warnings={phase.warnings} onAnswer={phase.pending} />;
+    case 'applying': {
+      const elapsedMs = Math.max(Date.now() - phase.progress.startedAt, 1);
+      const rate = phase.progress.done / elapsedMs;
+      const remaining = phase.progress.total - phase.progress.done;
+      const eta = rate > 0 ? remaining / rate / 1000 : undefined;
+      return (
+        <Box flexDirection="column">
+          <ProgressBar
+            done={phase.progress.done}
+            total={phase.progress.total}
+            etaSeconds={eta}
+            label={phase.progress.current}
+          />
+          <Box flexDirection="column" marginLeft={2} marginTop={1}>
+            {phase.plans.map((tp) => (
+              <TargetCard
+                key={tp.target.name}
+                target={tp.target}
+                plan={tp.plan}
+                expanded={false}
+              />
+            ))}
+          </Box>
+        </Box>
+      );
+    }
+    case 'summary':
+      return (
+        <Box flexDirection="column">
+          {phase.plans.map((tp) => (
+            <TargetCard
+              key={tp.target.name}
+              target={tp.target}
+              plan={tp.plan}
+              expanded={false}
+            />
+          ))}
+          <Summary
+            reports={phase.reports}
+            exitCode={phase.exitCode}
+            dryRun={phase.dryRun}
+          />
+        </Box>
+      );
+    case 'error':
+      return <ErrorPanel error={phase.error} />;
+    default: {
+      const _exhaustive: never = phase;
+      void _exhaustive;
+      return null;
+    }
+  }
+}
+
+function PhaseApp({ phaseKey }: { phaseKey: PhaseKey }): React.ReactElement {
+  const { exit } = useApp();
+  const phase = buildPhase(phaseKey);
+  useInput((input) => {
+    if (input === 'q' || input === '') exit();
+  });
+  return <FixtureView phase={phase} targetCount={3} />;
+}
+
+function TourApp({ intervalMs }: { intervalMs: number }): React.ReactElement {
+  const { exit } = useApp();
+  const [idx, setIdx] = useState(0);
+  useEffect(() => {
+    const handle = setInterval(() => {
+      setIdx((current) => {
+        if (current + 1 >= PHASES.length) {
+          setTimeout(() => exit(), 300);
+          return current;
+        }
+        return current + 1;
+      });
+    }, intervalMs);
+    return () => clearInterval(handle);
+  }, [intervalMs, exit]);
+  useInput((input) => {
+    if (input === 'q' || input === '') exit();
+    if (input === ' ')
+      setIdx((current) =>
+        current + 1 >= PHASES.length ? current : current + 1,
+      );
+  });
+  const phaseKey = PHASES[idx];
+  const phase = buildPhase(phaseKey);
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={colors.accent} bold>
+          [tour {idx + 1}/{PHASES.length}]
+        </Text>
+        <Text color={colors.muted} dimColor>
+          {'  '}
+          {phaseKey}  ·  space:next  ·  q/esc:exit
+        </Text>
+      </Box>
+      <FixtureView phase={phase} targetCount={3} />
+    </Box>
+  );
+}
+
+const args = parseArgs(process.argv.slice(2));
+if (args.mode === 'usage') {
+  render(<Usage />);
+} else if (args.mode === 'phase') {
+  render(<PhaseApp phaseKey={args.phase!} />);
+} else if (args.mode === 'tour') {
+  render(<TourApp intervalMs={args.tourMs ?? 2500} />);
+}

package/dist/commands/runCli/runCli.cjs

@@ -1,53 +0,0 @@
-'use strict';
-
-var commander = require('commander');
-var logger = require('../../utils/logger.cjs');
-var version = require('../../utils/version.cjs');
-var resolveTargets = require('./utils/resolveTargets.cjs');
-var runInject = require('./utils/runInject.cjs');
-
-async function runCli(argv = process.argv) {
-    const cmd = new commander.Command();
-    cmd
-        .name('inject-claude-settings')
-        .description("Inject target consumer(s)' Claude assets into the selected .claude directory")
-        .version(version.VERSION)
-        .option('--package <name...>', 'Target(s). "@<scope>" = whole npm scope; "@<scope>/<name>" or "<name>" = one package. Repeat the flag or comma-separate values.', collectPackageValues, [])
-        .option('--scope <scope>', 'Target scope: user (~/.claude) | project (nearest ancestor .claude or <cwd>/.claude)')
-        .option('--dry-run', 'Preview without writing', false)
-        .option('--force', 'Overwrite user modifications', false)
-        .option('--root <path>', 'Override scope resolution cwd (default: cwd)')
-        .action(async (flags) => {
-        const targets = flags.package ?? [];
-        if (targets.length === 0) {
-            logger.logger.error('missing required flag: --package <name> (e.g. --package=@canard/schema-form or --package=@canard)');
-            process.exit(2);
-        }
-        const originCwd = flags.root ?? process.cwd();
-        const metadataList = await resolveTargets.resolveTargets(targets, originCwd);
-        if (metadataList.length === 0) {
-            logger.logger.warn(`no packages resolved from --package target(s): ${targets.join(', ')}`);
-            return;
-        }
-        await runInject.runInject(flags, metadataList);
-    });
-    try {
-        await cmd.parseAsync([...argv]);
-    }
-    catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        logger.logger.error(msg);
-        process.exit(1);
-    }
-}
-function collectPackageValues(value, previous = []) {
-    return [
-        ...previous,
-        ...value
-            .split(',')
-            .map((s) => s.trim())
-            .filter(Boolean),
-    ];
-}
-
-exports.runCli = runCli;

package/dist/commands/runCli/utils/classifyTarget.cjs

@@ -1,48 +0,0 @@
-'use strict';
-
-const NPM_NAME_PATTERN = /^[a-z0-9][a-z0-9._-]*$/;
-function classifyTarget(target) {
-    if (typeof target !== 'string' || target.length === 0) {
-        return { kind: 'invalid', reason: 'empty --package value' };
-    }
-    if (target.startsWith('@')) {
-        const body = target.slice(1);
-        const slashIndex = body.indexOf('/');
-        if (slashIndex === -1) {
-            if (!NPM_NAME_PATTERN.test(body)) {
-                return {
-                    kind: 'invalid',
-                    reason: `invalid scope alias "${target}" — expected "@<scope>" with lowercase alphanumerics, ".", "-", or "_"`,
-                };
-            }
-            return { kind: 'scope', scope: body };
-        }
-        const scopePart = body.slice(0, slashIndex);
-        const namePart = body.slice(slashIndex + 1);
-        if (!NPM_NAME_PATTERN.test(scopePart) ||
-            namePart.length === 0 ||
-            namePart.includes('/') ||
-            !NPM_NAME_PATTERN.test(namePart)) {
-            return {
-                kind: 'invalid',
-                reason: `invalid scoped package "${target}" — expected "@<scope>/<name>"`,
-            };
-        }
-        return { kind: 'package', name: target };
-    }
-    if (target.includes('/')) {
-        return {
-            kind: 'invalid',
-            reason: `invalid target "${target}" — unscoped package names cannot contain "/"`,
-        };
-    }
-    if (!NPM_NAME_PATTERN.test(target)) {
-        return {
-            kind: 'invalid',
-            reason: `invalid package name "${target}" — expected lowercase alphanumerics, ".", "-", or "_"`,
-        };
-    }
-    return { kind: 'package', name: target };
-}
-
-exports.classifyTarget = classifyTarget;

package/dist/commands/runCli/utils/injectOne.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-require('node:crypto');
-require('node:fs/promises');
-require('node:path');
-var injectDocs = require('../../../core/injectDocs/injectDocs.cjs');
-require('node:os');
-require('node:fs');
-require('@inquirer/prompts');
-require('picocolors');
-var confirmForce = require('../../../prompts/confirmForce.cjs');
-var heartbeat = require('../../../utils/heartbeat.cjs');
-var logger = require('../../../utils/logger.cjs');
-
-async function injectOne(target, scope, flags, originCwd) {
-    if (!target.hashesPresent) {
-        logger.logger.warn(`${target.name}: dist/claude-hashes.json missing — build the package (e.g. yarn build) to regenerate the hash manifest first.`);
-        return 0;
-    }
-    logger.logger.heading(`${target.name}@${target.version}`);
-    const stopHeartbeat = heartbeat.startHeartbeat({
-        label: `injecting ${target.name}`,
-    });
-    try {
-        const report = await injectDocs.injectDocs({
-            packageName: target.name,
-            packageVersion: target.version,
-            packageRoot: target.packageRoot,
-            assetRoot: target.assetRoot,
-            scope,
-            originCwd,
-            dryRun: flags.dryRun ?? false,
-            force: flags.force ?? false,
-            confirmForce: async (plan) => {
-                const diverged = plan.actions.filter((a) => a.kind === 'warn-diverged');
-                const orphans = plan.actions.filter((a) => a.kind === 'warn-orphan');
-                return confirmForce.confirmForceAsync(diverged.length, orphans.length, [...diverged, ...orphans].map((a) => a.relPath).slice(0, 3));
-            },
-        });
-        return report.exitCode;
-    }
-    finally {
-        stopHeartbeat();
-    }
-}
-
-exports.injectOne = injectOne;

package/dist/commands/runCli/utils/injectOne.d.ts

@@ -1,3 +0,0 @@
-import { type Scope } from '../../../core/index.js';
-import type { ConsumerPackage, DefaultFlags } from '../type.js';
-export declare function injectOne(target: ConsumerPackage, scope: Scope, flags: DefaultFlags, originCwd: string): Promise<number>;

package/dist/commands/runCli/utils/injectOne.mjs

@@ -1,45 +0,0 @@
-import 'node:crypto';
-import 'node:fs/promises';
-import 'node:path';
-import { injectDocs } from '../../../core/injectDocs/injectDocs.mjs';
-import 'node:os';
-import 'node:fs';
-import '@inquirer/prompts';
-import 'picocolors';
-import { confirmForceAsync } from '../../../prompts/confirmForce.mjs';
-import { startHeartbeat } from '../../../utils/heartbeat.mjs';
-import { logger } from '../../../utils/logger.mjs';
-
-async function injectOne(target, scope, flags, originCwd) {
-    if (!target.hashesPresent) {
-        logger.warn(`${target.name}: dist/claude-hashes.json missing — build the package (e.g. yarn build) to regenerate the hash manifest first.`);
-        return 0;
-    }
-    logger.heading(`${target.name}@${target.version}`);
-    const stopHeartbeat = startHeartbeat({
-        label: `injecting ${target.name}`,
-    });
-    try {
-        const report = await injectDocs({
-            packageName: target.name,
-            packageVersion: target.version,
-            packageRoot: target.packageRoot,
-            assetRoot: target.assetRoot,
-            scope,
-            originCwd,
-            dryRun: flags.dryRun ?? false,
-            force: flags.force ?? false,
-            confirmForce: async (plan) => {
-                const diverged = plan.actions.filter((a) => a.kind === 'warn-diverged');
-                const orphans = plan.actions.filter((a) => a.kind === 'warn-orphan');
-                return confirmForceAsync(diverged.length, orphans.length, [...diverged, ...orphans].map((a) => a.relPath).slice(0, 3));
-            },
-        });
-        return report.exitCode;
-    }
-    finally {
-        stopHeartbeat();
-    }
-}
-
-export { injectOne };

package/dist/commands/runCli/utils/resolvePackage.cjs

@@ -1,77 +0,0 @@
-'use strict';
-
-var node_fs = require('node:fs');
-var promises = require('node:fs/promises');
-var node_module = require('node:module');
-var node_path = require('node:path');
-var logger = require('../../../utils/logger.cjs');
-
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-async function resolvePackage(name, options = {}) {
-    const pkgJsonPath = resolvePackageJsonPath(name);
-    if (!pkgJsonPath) {
-        logger.logger.error(`cannot resolve package "${name}". Install it in the current project or pass the correct name.`);
-        process.exit(2);
-    }
-    const packageRoot = node_path.dirname(pkgJsonPath);
-    const raw = await promises.readFile(pkgJsonPath, 'utf-8');
-    const pkg = JSON.parse(raw);
-    if (typeof pkg.name !== 'string' || typeof pkg.version !== 'string') {
-        if (options.skipMissingAsset) {
-            logger.logger.warn(`"${name}" package.json is missing a string "name" or "version" — skipping.`);
-            return null;
-        }
-        logger.logger.error(`${pkgJsonPath} must define string "name" and "version".`);
-        process.exit(2);
-    }
-    const assetPath = pkg.claude?.assetPath;
-    if (typeof assetPath !== 'string' || assetPath.length === 0) {
-        if (options.skipMissingAsset) {
-            logger.logger.warn(`"${name}" is missing "claude.assetPath" — skipping (the package does not ship Claude assets).`);
-            return null;
-        }
-        logger.logger.error(`"${name}" is missing "claude.assetPath" in its package.json — the package does not ship Claude assets.`);
-        process.exit(2);
-    }
-    return {
-        packageRoot,
-        packageName: pkg.name,
-        packageVersion: pkg.version,
-        assetPath,
-    };
-}
-function resolvePackageJsonPath(name) {
-    const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('commands/runCli/utils/resolvePackage.cjs', document.baseURI).href)));
-    try {
-        return require$1.resolve(`${name}/package.json`);
-    }
-    catch (err) {
-        const code = err?.code;
-        if (code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED')
-            return null;
-    }
-    let mainEntry;
-    try {
-        mainEntry = require$1.resolve(name);
-    }
-    catch {
-        return null;
-    }
-    let dir = node_path.dirname(mainEntry);
-    while (dir && dir !== node_path.dirname(dir)) {
-        const candidate = node_path.resolve(dir, 'package.json');
-        if (node_fs.existsSync(candidate)) {
-            try {
-                const pkg = JSON.parse(node_fs.readFileSync(candidate, 'utf-8'));
-                if (pkg.name === name)
-                    return candidate;
-            }
-            catch {
-            }
-        }
-        dir = node_path.dirname(dir);
-    }
-    return null;
-}
-
-exports.resolvePackage = resolvePackage;

package/dist/commands/runCli/utils/resolveScopeAlias.cjs

@@ -1,69 +0,0 @@
-'use strict';
-
-var node_fs = require('node:fs');
-var promises = require('node:fs/promises');
-var node_path = require('node:path');
-var logger = require('../../../utils/logger.cjs');
-var resolvePackage = require('./resolvePackage.cjs');
-
-async function resolveScopeAlias(scope, rootCwd) {
-    const packagesRoot = findPackagesRoot(rootCwd);
-    if (!packagesRoot) {
-        logger.logger.error(`cannot locate a monorepo root with a "packages/" directory starting from "${rootCwd}". Scope alias "@${scope}" requires a workspace root.`);
-        process.exit(2);
-    }
-    const scopeDir = node_path.join(packagesRoot, 'packages', scope);
-    let entries;
-    try {
-        entries = await promises.readdir(scopeDir);
-    }
-    catch {
-        logger.logger.error(`scope alias "@${scope}" has no matching directory at ${scopeDir}.`);
-        process.exit(2);
-    }
-    const matchedNames = [];
-    const expectedPrefix = `@${scope}/`;
-    for (const entry of entries) {
-        const pkgJsonPath = node_path.join(scopeDir, entry, 'package.json');
-        if (!node_fs.existsSync(pkgJsonPath))
-            continue;
-        let parsed;
-        try {
-            const raw = await promises.readFile(pkgJsonPath, 'utf-8');
-            parsed = JSON.parse(raw);
-        }
-        catch {
-            continue;
-        }
-        if (typeof parsed.name === 'string' &&
-            parsed.name.startsWith(expectedPrefix) &&
-            parsed.name.length > expectedPrefix.length) {
-            matchedNames.push(parsed.name);
-        }
-    }
-    if (matchedNames.length === 0) {
-        logger.logger.warn(`scope alias "@${scope}" matched no workspace packages under ${scopeDir}.`);
-        return [];
-    }
-    const resolved = [];
-    for (const name of matchedNames) {
-        const meta = await resolvePackage.resolvePackage(name, { skipMissingAsset: true });
-        if (meta)
-            resolved.push(meta);
-    }
-    return resolved;
-}
-function findPackagesRoot(start) {
-    let cur = node_path.resolve(start);
-    while (true) {
-        if (node_fs.existsSync(node_path.join(cur, 'package.json')) && node_fs.existsSync(node_path.join(cur, 'packages'))) {
-            return cur;
-        }
-        const parent = node_path.dirname(cur);
-        if (parent === cur)
-            return null;
-        cur = parent;
-    }
-}
-
-exports.resolveScopeAlias = resolveScopeAlias;

package/dist/commands/runCli/utils/resolveScopeFlag.cjs

@@ -1,28 +0,0 @@
-'use strict';
-
-require('node:crypto');
-require('node:fs/promises');
-require('node:path');
-var logger = require('../../../utils/logger.cjs');
-var scope = require('../../../core/scope/scope.cjs');
-var selectScope = require('../../../prompts/selectScope.cjs');
-require('@inquirer/prompts');
-require('picocolors');
-
-async function resolveScopeFlag(flag) {
-    if (flag) {
-        if (!scope.isValidScope(flag)) {
-            logger.logger.error(`Invalid --scope: ${flag}. Expected user | project.`);
-            process.exit(2);
-        }
-        return flag;
-    }
-    if (!scope.isInteractive()) {
-        logger.logger.error('--scope is required in non-interactive environments.');
-        logger.logger.error('  Pass --scope=user | --scope=project.');
-        process.exit(2);
-    }
-    return selectScope.selectScopeAsync();
-}
-
-exports.resolveScopeFlag = resolveScopeFlag;