fix: address code review — query params for node IDs, correct brand colors

- F2: Switch /ui/node and /ui/fragments/detail from path variables to
  query parameters (?nodeId=...) to avoid Tomcat %2F rejection for node
  IDs containing slashes. Use #uris.escapeQueryStringParam() in templates.
- F2: Update all th:href links in detail-panel, nodes-grid, and
  search-results to use query param format.
- F2: Update ExplorerController endpoints and tests accordingly.
- F3: Create separate explorer-tailwind.config.ts with original blue
  brand colors (#3b82f6/#2563eb) and 0.3s animation timing, avoiding
  regression in the React app's indigo branding.
- F3: Revert React tailwind.config.ts to original (no template scanning).
- F3: Add explorer.css to .gitignore as a build artifact.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 3 people

.gitignore

@@ -43,6 +43,8 @@ src/main/frontend/node_modules/
 src/main/frontend/node/
 src/main/frontend/dist/
 src/main/frontend/tsconfig.tsbuildinfo
+# Generated explorer CSS (rebuild via: cd src/main/frontend && npm run build:explorer-css)
+src/main/resources/static/css/explorer.css
 
 # Distribution
 *.tar.gz

src/main/frontend/explorer-tailwind.config.ts

@@ -0,0 +1,57 @@
+import type { Config } from 'tailwindcss';
+
+/**
+ * Tailwind config for the Thymeleaf explorer UI templates.
+ * Separate from the React app config to preserve the original blue brand colors.
+ */
+export default {
+  darkMode: 'class',
+  content: [
+    '../resources/templates/**/*.html',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a5f',
+        },
+        surface: {
+          DEFAULT: '#f8fafc',
+          dark: '#0f172a',
+        },
+        card: {
+          DEFAULT: '#ffffff',
+          dark: '#1e293b',
+        },
+        muted: {
+          DEFAULT: '#64748b',
+          dark: '#94a3b8',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

src/main/frontend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build && npm run build:explorer-css",
-    "build:explorer-css": "npx tailwindcss -i ./src/explorer.css -o ../resources/static/css/explorer.css --minify",
+    "build:explorer-css": "npx tailwindcss -c ./explorer-tailwind.config.ts -i ./src/explorer.css -o ../resources/static/css/explorer.css --minify",
     "preview": "vite preview"
   },
   "dependencies": {

src/main/frontend/tailwind.config.ts

@@ -2,11 +2,7 @@ import type { Config } from 'tailwindcss';
 
 export default {
   darkMode: 'class',
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    '../resources/templates/**/*.html',
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {
@@ -24,7 +20,6 @@ export default {
           950: '#1e1b4b',
         },
         surface: {
-          DEFAULT: '#f8fafc',
           0: '#ffffff',
           50: '#f8fafc',
           100: '#f1f5f9',
@@ -38,15 +33,6 @@ export default {
           850: '#162032',
           900: '#0f172a',
           950: '#0a0a1a',
-          dark: '#0f172a',
-        },
-        card: {
-          DEFAULT: '#ffffff',
-          dark: '#1e293b',
-        },
-        muted: {
-          DEFAULT: '#64748b',
-          dark: '#94a3b8',
         },
       },
       fontFamily: {

src/main/java/io/github/randomcodespace/iq/web/ExplorerController.java

@@ -50,8 +50,8 @@ public String nodesByKind(
         return "explorer/nodes";
     }
 
-    @GetMapping("/node/{nodeId}")
-    public String nodeDetail(@PathVariable String nodeId, Model model) {
+    @GetMapping("/node")
+    public String nodeDetail(@RequestParam String nodeId, Model model) {
         Map<String, Object> detail = queryService.nodeDetailWithEdges(nodeId);
         model.addAttribute("detail", detail);
         return "explorer/detail";
@@ -76,8 +76,8 @@ public String nodesFragment(
         return "explorer/fragments/nodes-grid";
     }
 
-    @GetMapping("/fragments/detail/{nodeId}")
-    public String detailFragment(@PathVariable String nodeId, Model model) {
+    @GetMapping("/fragments/detail")
+    public String detailFragment(@RequestParam String nodeId, Model model) {
         Map<String, Object> detail = queryService.nodeDetailWithEdges(nodeId);
         model.addAttribute("detail", detail);
         return "explorer/fragments/detail-panel";

src/main/resources/templates/explorer/fragments/detail-panel.html

@@ -107,7 +107,7 @@ <h2 class="font-semibold mb-4">
                         <span th:if="${edge['target_kind'] != null}"
                               class="text-[10px] px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 capitalize whitespace-nowrap"
                               th:text="${edge['target_kind']}">class</span>
-                        <a th:href="@{/ui/node/{id}(id=${edge['target']})}"
+                        <a th:href="@{/ui/node(nodeId=${edge['target']})}"
                            class="text-brand-600 dark:text-brand-400 hover:underline text-sm truncate"
                            th:text="${edge['target_label'] != null ? edge['target_label'] : edge['target']}">target</a>
                     </div>
@@ -137,7 +137,7 @@ <h2 class="font-semibold mb-4">
                           th:text="${node['kind']}">class</span>
                     <svg class="w-4 h-4 text-muted dark:text-muted-dark shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                     <div class="flex items-center gap-2 min-w-0">
-                        <a th:href="@{/ui/node/{id}(id=${node['id']})}"
+                        <a th:href="@{/ui/node(nodeId=${node['id']})}"
                            class="text-brand-600 dark:text-brand-400 hover:underline text-sm truncate"
                            th:text="${node['label']}">label</a>
                         <span th:if="${node['layer'] != null}"

src/main/resources/templates/explorer/fragments/nodes-grid.html

@@ -25,7 +25,7 @@ <h2 class="text-lg font-semibold capitalize" th:text="${kind}">kind</h2>
             <div class="flex items-start justify-between gap-4">
                 <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-2 mb-1">
-                        <a th:href="@{/ui/node/{id}(id=${node['id']})}"
+                        <a th:href="@{/ui/node(nodeId=${node['id']})}"
                            class="font-medium text-brand-600 dark:text-brand-400 hover:underline truncate"
                            th:text="${node['label']}">label</a>
                         <span th:if="${node['layer'] != null}"
@@ -49,7 +49,7 @@ <h2 class="text-lg font-semibold capitalize" th:text="${kind}">kind</h2>
                               class="text-[10px] px-1.5 py-0.5 rounded bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 font-mono"
                               th:text="${ann}">@ann</span>
                     </div>
-                    <button th:attr="hx-get='/ui/fragments/detail/' + ${#uris.escapePathSegment(node['id'])}"
+                    <button th:attr="hx-get='/ui/fragments/detail?nodeId=' + ${#uris.escapeQueryStringParam(node['id'])}"
                             hx-target="#content" hx-swap="innerHTML"
                             class="text-xs font-medium px-3 py-1.5 rounded-md text-muted dark:text-muted-dark hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors whitespace-nowrap">
                         Details

src/main/resources/templates/explorer/fragments/search-results.html

@@ -26,7 +26,7 @@ <h2 class="text-lg font-semibold">
             <div class="flex items-start justify-between gap-4">
                 <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-2 mb-1">
-                        <a th:href="@{/ui/node/{id}(id=${node['id']})}"
+                        <a th:href="@{/ui/node(nodeId=${node['id']})}"
                            class="font-medium text-brand-600 dark:text-brand-400 hover:underline truncate"
                            th:text="${node['label']}">label</a>
                         <span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 capitalize"
@@ -38,7 +38,7 @@ <h2 class="text-lg font-semibold">
                     <div th:if="${node['file_path'] != null}" class="text-xs text-muted dark:text-muted-dark font-mono truncate"
                          th:text="${node['file_path']}">file</div>
                 </div>
-                <button th:attr="hx-get='/ui/fragments/detail/' + ${#uris.escapePathSegment(node['id'])}"
+                <button th:attr="hx-get='/ui/fragments/detail?nodeId=' + ${#uris.escapeQueryStringParam(node['id'])}"
                         hx-target="#content" hx-swap="innerHTML"
                         class="text-xs font-medium px-3 py-1.5 rounded-md text-muted dark:text-muted-dark hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors whitespace-nowrap">
                     Details

src/test/java/io/github/randomcodespace/iq/web/ExplorerControllerTest.java

@@ -125,7 +125,7 @@ void nodeDetailShouldReturnDetailView() throws Exception {
 
         when(queryService.nodeDetailWithEdges("cls:test:class:UserService")).thenReturn(detail);
 
-        mockMvc.perform(get("/ui/node/cls:test:class:UserService"))
+        mockMvc.perform(get("/ui/node").param("nodeId", "cls:test:class:UserService"))
                 .andExpect(status().isOk())
                 .andExpect(view().name("explorer/detail"))
                 .andExpect(model().attributeExists("detail"));
@@ -135,7 +135,7 @@ void nodeDetailShouldReturnDetailView() throws Exception {
     void nodeDetailWithNullShouldStillReturnView() throws Exception {
         when(queryService.nodeDetailWithEdges("missing")).thenReturn(null);
 
-        mockMvc.perform(get("/ui/node/missing"))
+        mockMvc.perform(get("/ui/node").param("nodeId", "missing"))
                 .andExpect(status().isOk())
                 .andExpect(view().name("explorer/detail"));
     }
@@ -201,7 +201,7 @@ void detailFragmentShouldReturnFragmentView() throws Exception {
 
         when(queryService.nodeDetailWithEdges("n1")).thenReturn(detail);
 
-        mockMvc.perform(get("/ui/fragments/detail/n1"))
+        mockMvc.perform(get("/ui/fragments/detail").param("nodeId", "n1"))
                 .andExpect(status().isOk())
                 .andExpect(view().name("explorer/fragments/detail-panel"))
                 .andExpect(model().attributeExists("detail"));