@imfusion/web-ui 0.5.1-dev.28.g1156ad00 → 0.5.1-dev.30.gf9b152db

package/bin/install.js

@@ -30,6 +30,7 @@ import {
   symlinkSync,
   writeFileSync
 } from "node:fs";
+import { spawnSync } from "node:child_process";
 import { dirname, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import * as p from "@clack/prompts";
@@ -136,6 +137,19 @@ const hooksSettingsTemplate = resolve(skillsRoot, "imf-web-ui-agent-setup", "tem
 const hooksDestDir = resolve(projectRoot, ".agents", "hooks", "imf-web-ui");
 const settingsPath = resolve(projectRoot, ".claude", "settings.json");
 
+// Serializing the file reflows entries this installer doesn't own; the
+// consumer's own Prettier puts them back. Best-effort: absent, or the path is
+// .prettierignore'd, nothing happens.
+function formatSettings() {
+  let toolRoot = projectRoot;
+  while (toolRoot !== dirname(toolRoot) && !existsSync(resolve(toolRoot, "node_modules", ".bin"))) {
+    toolRoot = dirname(toolRoot);
+  }
+  const prettier = resolve(toolRoot, "node_modules", ".bin", "prettier");
+  if (!existsSync(prettier)) return;
+  spawnSync(prettier, ["--write", settingsPath], { cwd: projectRoot, stdio: "ignore" });
+}
+
 function installHookScripts() {
   const scripts = readdirSync(hooksSourceDir).filter(name => name.endsWith(".sh"));
   mkdirSync(hooksDestDir, { recursive: true });
@@ -147,9 +161,24 @@ function installHookScripts() {
   return scripts.length;
 }
 
+// A registration is identified by the script it runs, not the command string:
+// "$VAR/..." and "${VAR}/..." are the same hook.
+const HOOKS_DIR_SEGMENT = ".agents/hooks/imf-web-ui/";
+
+function hookScriptId(command) {
+  if (typeof command !== "string") return null;
+  const at = command.lastIndexOf(HOOKS_DIR_SEGMENT);
+  if (at === -1) return null;
+  return command.slice(at + HOOKS_DIR_SEGMENT.length).replace(/["'\s]+$/, "");
+}
+
+function entryScriptIds(entry) {
+  return (entry.hooks ?? []).map(hook => hookScriptId(hook.command)).filter(Boolean);
+}
+
 // Merge, never clobber: a registration is added only when no existing entry
-// for that event already runs the same command, so re-runs are idempotent
-// and hand-written settings survive.
+// for that event already runs the same script, so re-runs are idempotent and
+// hand-written settings survive. A run that adds nothing writes nothing.
 function mergeHookRegistrations() {
   const template = JSON.parse(readFileSync(hooksSettingsTemplate, "utf-8"));
   let settings = {};
@@ -165,9 +194,9 @@ function mergeHookRegistrations() {
   for (const [event, entries] of Object.entries(template.hooks)) {
     settings.hooks[event] ??= [];
     for (const entry of entries) {
-      const commands = entry.hooks.map(hook => hook.command);
+      const scripts = entryScriptIds(entry);
       const present = settings.hooks[event].some(existing =>
-        (existing.hooks ?? []).some(hook => commands.includes(hook.command))
+        entryScriptIds(existing).some(script => scripts.includes(script))
       );
       if (!present) {
         settings.hooks[event].push(entry);
@@ -175,8 +204,10 @@ function mergeHookRegistrations() {
       }
     }
   }
+  if (added === 0) return 0;
   mkdirSync(dirname(settingsPath), { recursive: true });
   writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+  formatSettings();
   return added;
 }
 

package/bin/install.test.ts

@@ -27,7 +27,7 @@ function runInstall(cwd: string, ...args: string[]) {
 function readSettings(cwd: string) {
   return JSON.parse(readFileSync(join(cwd, ".claude", "settings.json"), "utf-8")) as {
     permissions?: { allow: string[] };
-    hooks: Record<string, { hooks: { command: string }[] }[]>;
+    hooks: Record<string, { hooks: { command?: string }[] }[]>;
   };
 }
 
@@ -103,7 +103,53 @@ describe("web-ui-install", () => {
     const commands = settings.hooks.PostToolUse.flatMap(entry => entry.hooks.map(hook => hook.command));
     expect(commands).toContain("echo existing");
     // the shipped registration is added exactly once across both runs
-    expect(commands.filter(command => command.includes("post-tool-use.sh"))).toHaveLength(1);
+    expect(commands.filter(command => command?.includes("post-tool-use.sh"))).toHaveLength(1);
+  });
+
+  it("recognises registrations written with braced ${CLAUDE_PROJECT_DIR}", () => {
+    mkdirSync(join(consumer, ".claude"), { recursive: true });
+    writeFileSync(
+      join(consumer, ".claude", "settings.json"),
+      JSON.stringify({
+        hooks: {
+          PostToolUse: [
+            {
+              matcher: "Edit|MultiEdit|Write",
+              hooks: [
+                {
+                  type: "command",
+                  command: '"${CLAUDE_PROJECT_DIR}/.agents/hooks/imf-web-ui/post-tool-use.sh"',
+                  statusMessage: "Verifying file"
+                }
+              ]
+            },
+            // a foreign entry carrying no `command` at all must not throw
+            { matcher: "Bash", hooks: [{ type: "command", args: ["${CLAUDE_PROJECT_DIR}/other/gate.mjs"] }] }
+          ]
+        }
+      })
+    );
+
+    runInstall(consumer, "--hooks");
+
+    const settings = readSettings(consumer);
+    const commands = settings.hooks.PostToolUse.flatMap(entry => entry.hooks.map(hook => hook.command));
+    expect(commands.filter(command => command?.includes("post-tool-use.sh"))).toHaveLength(1);
+    expect(commands).toContain('"${CLAUDE_PROJECT_DIR}/.agents/hooks/imf-web-ui/post-tool-use.sh"');
+  });
+
+  it("does not touch settings.json when every registration is already present", () => {
+    runInstall(consumer, "--hooks");
+    const settingsFile = join(consumer, ".claude", "settings.json");
+    const settings = readSettings(consumer);
+    settings.hooks.PreToolUse = [{ hooks: [{ command: "./other/gate.mjs" }] }];
+    const before = JSON.stringify(settings, null, 4) + "\n";
+    writeFileSync(settingsFile, before);
+
+    const result = runInstall(consumer, "--hooks");
+
+    expect(readFileSync(settingsFile, "utf-8")).toBe(before);
+    expect(result.stdout).toContain("Hook registrations already present");
   });
 
   it("upserts the fenced AGENTS.md block and leaves the rest untouched", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.5.1-dev.28.g1156ad00",
+  "version": "0.5.1-dev.30.gf9b152db",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "license": "UNLICENSED",
@@ -61,7 +61,7 @@
     "codegen:llms": "tsx src/llms/gen-llms.ts",
     "verify:format": "prettier --check .",
     "verify:lint": "eslint . --cache --max-warnings=0",
-    "verify:typecheck": "npm run codegen && tsc -p tsconfig.lib.json --noEmit && tsc -p .storybook/tsconfig.json --noEmit",
+    "verify:typecheck": "npm run codegen && tsc -p tsconfig.json --noEmit && tsc -p tsconfig.lib.json --noEmit && tsc -p .storybook/tsconfig.json --noEmit",
     "verify:tests": "vitest run",
     "verify:deps": "tsx scripts/check-pinned-dependencies.ts",
     "verify:changelog": "tsx scripts/verify/changelog.ts",