refactor: update HTML exports to named constants and enhance dynamic loading in UIRegistry

Author: tsck

src/ui/lib/tools/list-databases.ts

@@ -1,3 +1,11 @@
+// Converts kebab-case to PascalCase: "list-databases" -> "ListDatabases"
+function toPascalCase(kebabCase: string): string {
+    return kebabCase
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join("");
+}
+
 /**
  * UI Registry that manages bundled UI HTML strings for tools.
  */
@@ -28,9 +36,14 @@ export class UIRegistry {
         }
 
         try {
-            const module = (await import(`../lib/tools/${toolName}.js`)) as { default: string };
-            this.cache.set(toolName, module.default);
-            return module.default;
+            const module = (await import(`../lib/tools/${toolName}.js`)) as Record<string, string>;
+            const exportName = `${toPascalCase(toolName)}Html`;
+            const html = module[exportName];
+            if (html === undefined) {
+                return null;
+            }
+            this.cache.set(toolName, html);
+            return html;
         } catch {
             return null;
         }

src/ui/registry/registry.ts

@@ -107,7 +107,7 @@ function generateUIModule(): Plugin {
  * Tool: ${toolName}
  * Component: ${componentName}
  */
-export default ${JSON.stringify(html)};
+export const ${componentName}Html = ${JSON.stringify(html)};
 `;
                 writeFileSync(join(toolsDir, `${toolName}.ts`), toolModuleContent);
                 generatedTools.push(toolName);