From 7a46167c579324e31aef03fedd262046eb5c21a3 Mon Sep 17 00:00:00 2001
From: divyeshio <79130336+divyeshio@users.noreply.github.com>
Date: Thu, 12 Mar 2026 23:03:31 +0530
Subject: [PATCH 1/4] feat: add shimmer effect component and suggestion UI
 elements

- Introduced a new `Shimmer` component for loading placeholders.
- Created `Suggestions` and `Suggestion` components for displaying suggestions with buttons.
- Added a `Tool` component with collapsible sections for tool details and status badges.
- Removed obsolete `AIParsing` and `NewToolDialog` components.
- Updated tool editing route to handle new tool creation more effectively.
- Implemented local storage management for tools and AI keys.
- Enhanced button and button group components for better UI consistency.
- Added collapsible UI components for better organization of tool details.
- Updated prompt generation logic for AI interactions.
- Improved local storage mock for testing purposes.
---
 bun.lock                                      |  52 +
 components.json                               |   5 +-
 package.json                                  |   8 +
 public/tools.json                             |   6 +
 registry/commandly/generated-command.tsx      |   3 +-
 registry/commandly/json-output.tsx            | 118 ++-
 .../commandly/lib/types/commandly-nested.ts   |   1 +
 .../commandly/lib/utils/commandly-nested.ts   |   1 +
 registry/commandly/lib/utils/commandly.ts     |   2 +
 registry/commandly/tool-editor/ai-chat.tsx    | 890 ++++++++++++++++++
 .../commandly/tool-editor/command-tree.tsx    |   2 +-
 .../dialogs/tool-details-dialog.tsx           |  10 +
 .../commandly/tool-editor/parameter-list.tsx  |   2 +-
 .../commandly/tool-editor/preview-tabs.tsx    | 159 ++--
 .../commandly/tool-editor/tool-editor.tsx     | 110 ++-
 src/components/ai-elements/code-block.tsx     | 556 +++++++++++
 src/components/ai-elements/conversation.tsx   | 154 +++
 src/components/ai-elements/message.tsx        | 302 ++++++
 src/components/ai-elements/shimmer.tsx        |  72 ++
 src/components/ai-elements/suggestion.tsx     |  54 ++
 src/components/ai-elements/tool.tsx           | 177 ++++
 src/components/tool-editor-ui/ai-parsing.tsx  | 200 ----
 .../tool-editor-ui/dialogs/new-tool.tsx       | 104 --
 src/components/tool-editor-ui/prompt.ts       |  44 +-
 src/components/tool-editor-ui/tool-card.tsx   |   2 +-
 src/components/ui/button-group.tsx            |  83 ++
 src/components/ui/button.tsx                  |  35 +-
 src/components/ui/collapsible.tsx             |  31 +
 src/index.css                                 |   2 +
 src/lib/ai-keys.ts                            |  37 +
 src/routes/tools/$toolName/edit.tsx           |  24 +-
 src/routes/tools/index.tsx                    |  49 +-
 tests/vitest.setup.ts                         |  17 +
 33 files changed, 2848 insertions(+), 464 deletions(-)
 create mode 100644 registry/commandly/tool-editor/ai-chat.tsx
 create mode 100644 src/components/ai-elements/code-block.tsx
 create mode 100644 src/components/ai-elements/conversation.tsx
 create mode 100644 src/components/ai-elements/message.tsx
 create mode 100644 src/components/ai-elements/shimmer.tsx
 create mode 100644 src/components/ai-elements/suggestion.tsx
 create mode 100644 src/components/ai-elements/tool.tsx
 delete mode 100644 src/components/tool-editor-ui/ai-parsing.tsx
 delete mode 100644 src/components/tool-editor-ui/dialogs/new-tool.tsx
 create mode 100644 src/components/ui/button-group.tsx
 create mode 100644 src/components/ui/collapsible.tsx
 create mode 100644 src/lib/ai-keys.ts

diff --git a/bun.lock b/bun.lock
index c31ffc2..ac9d279 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,7 +5,12 @@
     "": {
       "name": "commandly",
       "dependencies": {
+        "@ai-sdk/anthropic": "^3.0.58",
+        "@ai-sdk/google": "^3.0.43",
+        "@ai-sdk/groq": "^3.0.29",
+        "@ai-sdk/mistral": "^3.0.24",
         "@ai-sdk/openai": "^3.0.41",
+        "@ai-sdk/xai": "^3.0.67",
         "@modelcontextprotocol/sdk": "^1.27.1",
         "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
@@ -23,6 +28,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "lucide-react": "^0.577.0",
+        "motion": "^12.36.0",
         "next-themes": "^0.4.6",
         "nitro": "^3.0.1-alpha.2",
         "nuqs": "^2.8.9",
@@ -30,9 +36,11 @@
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "sonner": "^2.0.7",
+        "streamdown": "^2.4.0",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
         "tailwindcss-animate": "^1.0.7",
+        "use-stick-to-bottom": "^1.1.3",
         "zod": "^4.3.6",
       },
       "devDependencies": {
@@ -72,14 +80,26 @@
 
     "@adobe/css-tools": ["@adobe/css-tools@4.4.3", "", {}, "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA=="],
 
+    "@ai-sdk/anthropic": ["@ai-sdk/anthropic@3.0.58", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-/53SACgmVukO4bkms4dpxpRlYhW8Ct6QZRe6sj1Pi5H00hYhxIrqfiLbZBGxkdRvjsBQeP/4TVGsXgH5rQeb8Q=="],
+
     "@ai-sdk/gateway": ["@ai-sdk/gateway@3.0.66", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19", "@vercel/oidc": "3.1.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-SIQ0YY0iMuv+07HLsZ+bB990zUJ6S4ujORAh+Jv1V2KGNn73qQKnGO0JBk+w+Res8YqOFSycwDoWcFlQrVxS4A=="],
 
+    "@ai-sdk/google": ["@ai-sdk/google@3.0.43", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-NGCgP5g8HBxrNdxvF8Dhww+UKfqAkZAmyYBvbu9YLoBkzAmGKDBGhVptN/oXPB5Vm0jggMdoLycZ8JReQM8Zqg=="],
+
+    "@ai-sdk/groq": ["@ai-sdk/groq@3.0.29", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-I/tUoHuOvGXbIr1dJ0CLRLA7W0UPDMtrYT5mgeb3O+P+6I5BAm/7riPwr22Xw5YTzpwQxcoDQlIczOU9XDXBpA=="],
+
+    "@ai-sdk/mistral": ["@ai-sdk/mistral@3.0.24", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-krBTH2KHxtX8lCkSYSL4ZKSpn2EoJ5cNmBa9BmFL62KO1h5lYY6ivEwQb93TgY/hs2pkAIe4HJFIMX5kG1XtXg=="],
+
     "@ai-sdk/openai": ["@ai-sdk/openai@3.0.41", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-IZ42A+FO+vuEQCVNqlnAPYQnnUpUfdJIwn1BEDOBywiEHa23fw7PahxVtlX9zm3/zMvTW4JKPzWyvAgDu+SQ2A=="],
 
+    "@ai-sdk/openai-compatible": ["@ai-sdk/openai-compatible@2.0.35", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-g3wA57IAQFb+3j4YuFndgkUdXyRETZVvbfAWM+UX7bZSxA3xjes0v3XKgIdKdekPtDGsh4ZX2byHD0gJIMPfiA=="],
+
     "@ai-sdk/provider": ["@ai-sdk/provider@3.0.8", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ=="],
 
     "@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@4.0.19", "", { "dependencies": { "@ai-sdk/provider": "3.0.8", "@standard-schema/spec": "^1.1.0", "eventsource-parser": "^3.0.6" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-3eG55CrSWCu2SXlqq2QCsFjo3+E7+Gmg7i/oRVoSZzIodTuDSfLb3MRje67xE9RFea73Zao7Lm4mADIfUETKGg=="],
 
+    "@ai-sdk/xai": ["@ai-sdk/xai@3.0.67", "", { "dependencies": { "@ai-sdk/openai-compatible": "2.0.35", "@ai-sdk/provider": "3.0.8", "@ai-sdk/provider-utils": "4.0.19" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-KQQIDc91dUA5IGFMnXBuvPBeraYNTdpDC1qUS+JG8vE+/299//5sZFafI1kKYUu3f3p7LaZrKXYgZ1Ni7QIRbw=="],
+
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
     "@antfu/ni": ["@antfu/ni@25.0.0", "", { "dependencies": { "ansis": "^4.0.0", "fzf": "^0.5.2", "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" }, "bin": { "na": "bin/na.mjs", "ni": "bin/ni.mjs", "nr": "bin/nr.mjs", "nci": "bin/nci.mjs", "nlx": "bin/nlx.mjs", "nun": "bin/nun.mjs", "nup": "bin/nup.mjs" } }, "sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA=="],
@@ -1224,6 +1244,8 @@
 
     "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],
 
+    "framer-motion": ["framer-motion@12.36.0", "", { "dependencies": { "motion-dom": "^12.36.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw=="],
+
     "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
 
     "fs-extra": ["fs-extra@11.3.2", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A=="],
@@ -1286,12 +1308,18 @@
 
     "hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
 
+    "hast-util-raw": ["hast-util-raw@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "hast-util-from-parse5": "^8.0.0", "hast-util-to-parse5": "^8.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "parse5": "^7.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw=="],
+
+    "hast-util-sanitize": ["hast-util-sanitize@5.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "unist-util-position": "^5.0.0" } }, "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg=="],
+
     "hast-util-to-estree": ["hast-util-to-estree@3.1.3", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-attach-comments": "^3.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "zwitch": "^2.0.0" } }, "sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w=="],
 
     "hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
 
     "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
 
+    "hast-util-to-parse5": ["hast-util-to-parse5@8.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA=="],
+
     "hast-util-to-string": ["hast-util-to-string@3.0.1", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A=="],
 
     "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
@@ -1306,6 +1334,8 @@
 
     "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
 
+    "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
+
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
     "htmlparser2": ["htmlparser2@10.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.2.1", "entities": "^6.0.0" } }, "sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g=="],
@@ -1480,6 +1510,8 @@
 
     "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
+    "marked": ["marked@17.0.4", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-NOmVMM+KAokHMvjWmC5N/ZOvgmSWuqJB8FoYI019j4ogb/PeRMKoKIjReZ2w3376kkA8dSJIP8uD993Kxc0iRQ=="],
+
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
@@ -1610,6 +1642,12 @@
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
 
+    "motion": ["motion@12.36.0", "", { "dependencies": { "framer-motion": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5BMQuktYUX8aEByKWYx5tR4X3G08H2OMgp46wTxZ4o7CDDstyy4A0fe9RLNMjZiwvntCWGDvs16sC87/emz4Yw=="],
+
+    "motion-dom": ["motion-dom@12.36.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
+
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -1784,12 +1822,18 @@
 
     "regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
 
+    "rehype-harden": ["rehype-harden@1.1.8", "", { "dependencies": { "unist-util-visit": "^5.0.0" } }, "sha512-Qn7vR1xrf6fZCrkm9TDWi/AB4ylrHy+jqsNm1EHOAmbARYA6gsnVJBq/sdBh6kmT4NEZxH5vgIjrscefJAOXcw=="],
+
     "rehype-parse": ["rehype-parse@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-from-html": "^2.0.0", "unified": "^11.0.0" } }, "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag=="],
 
     "rehype-pretty-code": ["rehype-pretty-code@0.14.3", "", { "dependencies": { "@types/hast": "^3.0.4", "hast-util-to-string": "^3.0.0", "parse-numeric-range": "^1.3.0", "rehype-parse": "^9.0.0", "unified": "^11.0.5", "unist-util-visit": "^5.0.0" }, "peerDependencies": { "shiki": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" } }, "sha512-Cz692FeYusTjT5cfFWLc4r7JhgC3/JlJptgUh4iffBxWxUnWW1oqbWFi7jGCeq00DYUm8yzoTnvpocaYa5x82g=="],
 
+    "rehype-raw": ["rehype-raw@7.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-raw": "^9.0.0", "vfile": "^6.0.0" } }, "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww=="],
+
     "rehype-recma": ["rehype-recma@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "hast-util-to-estree": "^3.0.0" } }, "sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw=="],
 
+    "rehype-sanitize": ["rehype-sanitize@6.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-sanitize": "^5.0.0" } }, "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg=="],
+
     "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
 
     "remark-mdx": ["remark-mdx@3.1.1", "", { "dependencies": { "mdast-util-mdx": "^3.0.0", "micromark-extension-mdxjs": "^3.0.0" } }, "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg=="],
@@ -1800,6 +1844,8 @@
 
     "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
+    "remend": ["remend@1.2.2", "", {}, "sha512-4ZJgIB9EG9fQE41mOJCRHMmnxDTKHWawQoJWZyUbZuj680wVyogu2ihnj8Edqm7vh2mo/TWHyEZpn2kqeDvS7w=="],
+
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
@@ -1896,6 +1942,8 @@
 
     "stdin-discarder": ["stdin-discarder@0.2.2", "", {}, "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ=="],
 
+    "streamdown": ["streamdown@2.4.0", "", { "dependencies": { "clsx": "^2.1.1", "hast-util-to-jsx-runtime": "^2.3.6", "html-url-attributes": "^3.0.1", "marked": "^17.0.1", "rehype-harden": "^1.1.8", "rehype-raw": "^7.0.0", "rehype-sanitize": "^6.0.0", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", "remend": "1.2.2", "tailwind-merge": "^3.4.0", "unified": "^11.0.5", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-fRk4HEYNznRLmxoVeT8wsGBwHF6/Yrdey6k+ZrE1Qtp4NyKwm7G/6e2Iw8penY4yLx31TlAHWT5Bsg1weZ9FZg=="],
+
     "strict-event-emitter": ["strict-event-emitter@0.5.1", "", {}, "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ=="],
 
     "string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
@@ -2024,6 +2072,8 @@
 
     "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
+    "use-stick-to-bottom": ["use-stick-to-bottom@1.1.3", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-GgRLdeGhxBxpcbrBbEIEoOKUQ9d46/eaSII+wyv1r9Du+NbCn1W/OE+VddefvRP4+5w/1kATN/6g2/BAC/yowQ=="],
+
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
@@ -2304,6 +2354,8 @@
 
     "hast-util-from-html/parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
+    "hast-util-raw/parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
+
     "html-encoding-sniffer/@exodus/bytes": ["@exodus/bytes@1.7.0", "", { "peerDependencies": { "@exodus/crypto": "^1.0.0-rc.4" }, "optionalPeers": ["@exodus/crypto"] }, "sha512-5i+BtvujK/vM07YCGDyz4C4AyDzLmhxHMtM5HpUyPRtJPBdFPsj290ffXW+UXY21/G7GtXeHD2nRmq0T1ShyQQ=="],
 
     "http-errors/statuses": ["statuses@2.0.1", "", {}, "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="],
diff --git a/components.json b/components.json
index 8bfc737..ddce61a 100644
--- a/components.json
+++ b/components.json
@@ -10,6 +10,7 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {
+    "@ai-elements": "https://ai-sdk.dev/elements/api/registry/{name}.json"
+  }
 }
diff --git a/package.json b/package.json
index 2b5a3f8..2e25f79 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,12 @@
     "tools:build": "bun run ./scripts/generate-tools-json.ts"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.58",
+    "@ai-sdk/google": "^3.0.43",
+    "@ai-sdk/groq": "^3.0.29",
+    "@ai-sdk/mistral": "^3.0.24",
     "@ai-sdk/openai": "^3.0.41",
+    "@ai-sdk/xai": "^3.0.67",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
@@ -40,6 +45,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
+    "motion": "^12.36.0",
     "next-themes": "^0.4.6",
     "nitro": "^3.0.1-alpha.2",
     "nuqs": "^2.8.9",
@@ -47,9 +53,11 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "sonner": "^2.0.7",
+    "streamdown": "^2.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-stick-to-bottom": "^1.1.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/public/tools.json b/public/tools.json
index 53f68e0..1a3429e 100644
--- a/public/tools.json
+++ b/public/tools.json
@@ -11,6 +11,12 @@
     "description": "cdncheck is a tool for identifying the technology associated with dns / ip network addresses.",
     "url": "https://github.com/projectdiscovery/cdncheck"
   },
+  {
+    "name": "curl",
+    "displayName": "Curl",
+    "description": "curl is a command line tool and library for transferring data with URLs.",
+    "url": "https://curl.se/"
+  },
   {
     "name": "dnsx",
     "displayName": "DNSX",
diff --git a/registry/commandly/generated-command.tsx b/registry/commandly/generated-command.tsx
index a68ebb3..213e298 100644
--- a/registry/commandly/generated-command.tsx
+++ b/registry/commandly/generated-command.tsx
@@ -26,10 +26,11 @@ export function GeneratedCommand({
   }, [tool]);
 
   const currentParameters = useMemo(() => {
-    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand.key) || [];
+    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand?.key) || [];
   }, [tool, selectedCommand]);
 
   const generateCommand = useCallback(() => {
+    if (!selectedCommand) return;
     const commandPath = getCommandPath(selectedCommand, tool);
     let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;
 
diff --git a/registry/commandly/json-output.tsx b/registry/commandly/json-output.tsx
index 3a57a65..72ff58a 100644
--- a/registry/commandly/json-output.tsx
+++ b/registry/commandly/json-output.tsx
@@ -8,11 +8,12 @@ import {
 } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { Tool } from "@/registry/commandly/lib/types/commandly";
 import { exportToStructuredJSON } from "@/registry/commandly/lib/utils/commandly";
 import { convertToNestedStructure } from "@/registry/commandly/lib/utils/commandly-nested";
-import { CheckIcon, ChevronsUpDownIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, ChevronsUpDownIcon, CopyIcon, Edit2Icon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -23,18 +24,42 @@ const jsonOptions = [
 
 interface JsonTypeComponentProps {
   tool: Tool;
+  onApply?: (tool: Tool) => void;
 }
 
-export function JsonOutput({ tool }: JsonTypeComponentProps) {
+export function JsonOutput({ tool, onApply }: JsonTypeComponentProps) {
   const [open, setOpen] = useState(false);
   const [jsonString, setJsonString] = useState<string>();
   const [jsonType, setJsonType] = useState<"nested" | "flat">("flat");
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+
   useEffect(() => {
     const config =
       jsonType === "flat" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);
     setJsonString(JSON.stringify(config, null, 2));
   }, [jsonType, tool]);
 
+  const handleEditToggle = () => {
+    setEditValue(jsonString ?? "");
+    setIsEditing(true);
+  };
+
+  const handleApply = () => {
+    try {
+      const parsed = JSON.parse(editValue) as Tool;
+      onApply!(parsed);
+      setIsEditing(false);
+    } catch {
+      toast.error("Invalid JSON", { description: "Please fix the JSON before applying." });
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue("");
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -83,27 +108,78 @@ export function JsonOutput({ tool }: JsonTypeComponentProps) {
             </PopoverContent>
           </Popover>
         </CardTitle>
-        <CardAction
-          className="rounded-md"
-          onClick={() => {
-            navigator.clipboard.writeText(jsonString!);
-            toast("Copied!");
-          }}
-        >
-          <CopyIcon className="h-4 w-4 dark:stroke-primary" />
-        </CardAction>
+        <div className="flex gap-3">
+          {onApply && !isEditing && (
+            <CardAction
+              className="rounded-md"
+              onClick={handleEditToggle}
+            >
+              <Edit2Icon className="h-4 w-4 dark:stroke-primary" />
+            </CardAction>
+          )}
+          {onApply && isEditing && (
+            <CardAction
+              className="rounded-md"
+              onClick={handleCancel}
+            >
+              <XIcon className="h-4 w-4 dark:stroke-primary" />
+            </CardAction>
+          )}
+          <CardAction
+            className="rounded-md"
+            onClick={() => {
+              navigator.clipboard.writeText(jsonString!);
+              toast("Copied!");
+            }}
+          >
+            <CopyIcon className="h-4 w-4 dark:stroke-primary" />
+          </CardAction>
+        </div>
       </CardHeader>
       <CardContent>
-        <ScrollArea
-          className="max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]"
-          type="hover"
-        >
-          <pre className="max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200">
-            {jsonString}
-          </pre>
-          <ScrollBar orientation="vertical" />
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
+        {isEditing ? (
+          <div className="flex flex-col gap-2">
+            <ScrollArea
+              className="max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-360px)]"
+              type="hover"
+            >
+              <Textarea
+                className="min-h-[calc(100vh-400px)] font-mono text-sm"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                spellCheck={false}
+              />
+              <ScrollBar orientation="vertical" />
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCancel}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleApply}
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <ScrollArea
+            className="max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]"
+            type="hover"
+          >
+            <pre className="max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200">
+              {jsonString}
+            </pre>
+            <ScrollBar orientation="vertical" />
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        )}
       </CardContent>
     </Card>
   );
diff --git a/registry/commandly/lib/types/commandly-nested.ts b/registry/commandly/lib/types/commandly-nested.ts
index dda997d..1a9d248 100644
--- a/registry/commandly/lib/types/commandly-nested.ts
+++ b/registry/commandly/lib/types/commandly-nested.ts
@@ -65,6 +65,7 @@ export interface NestedExclusionGroup {
 }
 
 export interface NestedTool {
+  $schema?: string;
   name: string;
   displayName: string;
   description?: string;
diff --git a/registry/commandly/lib/utils/commandly-nested.ts b/registry/commandly/lib/utils/commandly-nested.ts
index f45baa2..0bdd0df 100644
--- a/registry/commandly/lib/utils/commandly-nested.ts
+++ b/registry/commandly/lib/utils/commandly-nested.ts
@@ -65,6 +65,7 @@ export const convertToNestedStructure = (tool: Tool): NestedTool => {
   );
 
   return {
+    $schema: "https://commandly.divyeshio.in/specification/nested.json",
     name: tool.name,
     url: tool.url,
     displayName: tool.displayName,
diff --git a/registry/commandly/lib/utils/commandly.ts b/registry/commandly/lib/utils/commandly.ts
index 93bf1fe..d9c19be 100644
--- a/registry/commandly/lib/utils/commandly.ts
+++ b/registry/commandly/lib/utils/commandly.ts
@@ -85,10 +85,12 @@ export const exportToStructuredJSON = (tool: Tool) => {
   };
 
   return {
+    $schema: "https://commandly.divyeshio.in/specification/flat.json",
     name: tool.name,
     displayName: tool.displayName,
     description: tool.description,
     version: tool.version,
+    url: tool.url,
     commands: tool.commands.map(flattenCommand),
     parameters: tool.parameters,
     exclusionGroups: tool.exclusionGroups,
diff --git a/registry/commandly/tool-editor/ai-chat.tsx b/registry/commandly/tool-editor/ai-chat.tsx
new file mode 100644
index 0000000..ce72a34
--- /dev/null
+++ b/registry/commandly/tool-editor/ai-chat.tsx
@@ -0,0 +1,890 @@
+import { useToolBuilder } from "./tool-editor.context";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import { Shimmer } from "@/components/ai-elements/shimmer";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import {
+  Tool as ToolCard,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import { generateChatSystemPrompt } from "@/components/tool-editor-ui/prompt";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { useAIKeys, type AIProvider } from "@/lib/ai-keys";
+import { cn, replaceKey } from "@/lib/utils";
+import { Tool } from "@/registry/commandly/lib/types/commandly";
+import { exportToStructuredJSON } from "@/registry/commandly/lib/utils/commandly";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { createGroq } from "@ai-sdk/groq";
+import { createMistral } from "@ai-sdk/mistral";
+import { createOpenAI } from "@ai-sdk/openai";
+import { createXai } from "@ai-sdk/xai";
+import { stepCountIs, streamText, tool } from "ai";
+import {
+  CheckIcon,
+  ChevronsUpDownIcon,
+  GlobeIcon,
+  Loader2Icon,
+  SendIcon,
+  Settings2Icon,
+  SparklesIcon,
+  SquarePenIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface ToolCallEntry {
+  toolCallId: string;
+  toolName: string;
+  title: string;
+  input: Record<string, unknown>;
+  state: "input-available" | "output-available" | "output-error";
+  output?: unknown;
+  errorText?: string;
+}
+
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+  toolApplied?: boolean;
+  toolCalls?: ToolCallEntry[];
+  isEditing?: boolean;
+  editingContent?: string;
+}
+
+const PROMPT_PILLS = [
+  {
+    label: "Sorting & Grouping",
+    text: "Sort all parameters, grouping similar ones together (e.g., output options, filter options, connection options). Update parameter names and descriptions to be consistent within each group. Anything related to verbose, debug, or logging should be at the end",
+  },
+  {
+    label: "Update from docs",
+    text: "Update this tool's description, parameter descriptions, and types to accurately reflect the official documentation. Make descriptions concise and in sentence case.",
+  },
+  {
+    label: "Fix types & validation",
+    text: "Fix parameter types (string, number, boolean, array), mark required parameters correctly, and add appropriate validation rules where needed.",
+  },
+];
+
+const MODEL_GROUPS: {
+  provider: AIProvider;
+  label: string;
+  logoUrl: string;
+  keyPlaceholder: string;
+  models: { value: string; label: string }[];
+}[] = [
+  {
+    provider: "openai",
+    label: "OpenAI",
+    logoUrl: "https://www.google.com/s2/favicons?domain=openai.com&sz=32",
+    keyPlaceholder: "sk-...",
+    models: [
+      { value: "gpt-5-2025-08-07", label: "GPT-5" },
+      { value: "gpt-5.4-2026-03-05", label: "GPT-5.4" },
+      { value: "gpt-5-mini-2025-08-07", label: "GPT-5 mini" },
+      { value: "gpt-5-nano-2025-08-07", label: "GPT-5 nano" },
+      { value: "gpt-5-codex", label: "GPT-5 Codex" },
+      { value: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+      { value: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+      { value: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
+      { value: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex mini" },
+      { value: "o4-mini-2025-04-16", label: "o4-mini" },
+      { value: "o3-2025-04-16", label: "o3" },
+      { value: "gpt-4.1-2025-04-14", label: "GPT-4.1" },
+      { value: "gpt-4.1-mini-2025-04-14", label: "GPT-4.1 mini" },
+      { value: "gpt-4.1-nano-2025-04-14", label: "GPT-4.1 nano" },
+    ],
+  },
+  {
+    provider: "anthropic",
+    label: "Anthropic",
+    logoUrl: "https://www.google.com/s2/favicons?domain=anthropic.com&sz=32",
+    keyPlaceholder: "sk-ant-...",
+    models: [
+      { value: "claude-opus-4-6", label: "Claude Opus 4.6" },
+      { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+      { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+      { value: "claude-opus-4-5", label: "Claude Opus 4.5" },
+      { value: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+    ],
+  },
+  {
+    provider: "google",
+    label: "Google",
+    logoUrl: "https://www.google.com/s2/favicons?domain=google.com&sz=32",
+    keyPlaceholder: "AIza...",
+    models: [
+      { value: "gemini-3.1-pro-preview", label: "Gemini 3.1 Pro" },
+      { value: "gemini-3-flash-preview", label: "Gemini 3 Flash" },
+      { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+      { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+      { value: "gemini-2.5-flash-lite", label: "Gemini 2.5 Flash Lite" },
+    ],
+  },
+  {
+    provider: "groq",
+    label: "Groq",
+    logoUrl: "https://www.google.com/s2/favicons?domain=groq.com&sz=32",
+    keyPlaceholder: "gsk_...",
+    models: [
+      { value: "meta-llama/llama-4-maverick-17b-128e-instruct", label: "Llama 4 Maverick" },
+      { value: "meta-llama/llama-4-scout-17b-16e-instruct", label: "Llama 4 Scout" },
+      { value: "qwen/qwen3-32b", label: "Qwen 3 32B" },
+      { value: "llama-3.3-70b-versatile", label: "Llama 3.3 70B" },
+      { value: "llama-3.1-8b-instant", label: "Llama 3.1 8B" },
+    ],
+  },
+  {
+    provider: "mistral",
+    label: "Mistral",
+    logoUrl: "https://www.google.com/s2/favicons?domain=mistral.ai&sz=32",
+    keyPlaceholder: "...",
+    models: [
+      { value: "mistral-large-latest", label: "Mistral Large" },
+      { value: "magistral-medium-latest", label: "Magistral Medium" },
+      { value: "codestral-latest", label: "Codestral" },
+      { value: "mistral-medium-latest", label: "Mistral Medium" },
+      { value: "mistral-small-latest", label: "Mistral Small" },
+    ],
+  },
+  {
+    provider: "xai",
+    label: "xAI",
+    logoUrl: "https://www.google.com/s2/favicons?domain=x.ai&sz=32",
+    keyPlaceholder: "xai-...",
+    models: [
+      { value: "grok-4-0709", label: "Grok 4" },
+      { value: "grok-3", label: "Grok 3" },
+      { value: "grok-3-mini", label: "Grok 3 mini" },
+    ],
+  },
+];
+
+function providerForModel(model: string): AIProvider {
+  if (model.startsWith("claude")) return "anthropic";
+  if (model.startsWith("gemini")) return "google";
+  if (model.startsWith("llama") || model.startsWith("meta-llama") || model.startsWith("qwen"))
+    return "groq";
+  if (model.startsWith("mistral") || model.startsWith("codestral") || model.startsWith("magistral"))
+    return "mistral";
+  if (model.startsWith("grok")) return "xai";
+  return "openai";
+}
+
+function createModelInstance(provider: AIProvider, key: string, model: string) {
+  switch (provider) {
+    case "anthropic":
+      return createAnthropic({ apiKey: key })(model);
+    case "google":
+      return createGoogleGenerativeAI({ apiKey: key })(model);
+    case "groq":
+      return createGroq({ apiKey: key })(model);
+    case "mistral":
+      return createMistral({ apiKey: key })(model);
+    case "xai":
+      return createXai({ apiKey: key })(model);
+    default:
+      return createOpenAI({ apiKey: key })(model);
+  }
+}
+
+function tryParsePartialTool(json: string): Tool | null {
+  if (!json.trim()) return null;
+  try {
+    const parsed = JSON.parse(json) as Tool;
+    if (parsed?.name && Array.isArray(parsed?.commands) && Array.isArray(parsed?.parameters))
+      return parsed;
+  } catch {
+    /* continue */
+  }
+
+  const lines = json.split("\n");
+  let candidate = lines.slice(0, -1).join("\n").trimEnd().replace(/,\s*$/, "");
+  if (!candidate) return null;
+
+  const stack: string[] = [];
+  let inStr = false;
+  let escaped = false;
+  for (const ch of candidate) {
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\" && inStr) {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inStr = !inStr;
+      continue;
+    }
+    if (inStr) continue;
+    if (ch === "{") stack.push("}");
+    else if (ch === "[") stack.push("]");
+    else if (ch === "}" || ch === "]") stack.pop();
+  }
+  candidate += stack.reverse().join("");
+
+  try {
+    const parsed = JSON.parse(candidate) as Tool;
+    if (parsed?.name && Array.isArray(parsed?.commands) && Array.isArray(parsed?.parameters))
+      return parsed;
+  } catch {
+    /* ignore */
+  }
+
+  return null;
+}
+
+function useAIChat(
+  currentTool: Tool,
+  onApply: (tool: Tool) => void,
+  context: { selectedCommandName?: string; selectedParameterName?: string },
+  onStreamingTool?: (tool: Tool | null) => void,
+  onGeneratingChange?: (isGenerating: boolean) => void,
+) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [model, setModel] = useState(MODEL_GROUPS[0].models[0].value);
+  const schemaRef = useRef<object | null>(null);
+
+  const provider = providerForModel(model);
+  const openAIKeys = useAIKeys("openai");
+  const anthropicKeys = useAIKeys("anthropic");
+  const googleKeys = useAIKeys("google");
+  const groqKeys = useAIKeys("groq");
+  const mistralKeys = useAIKeys("mistral");
+  const xaiKeys = useAIKeys("xai");
+  const tavilyKeys = useAIKeys("tavily");
+
+  const allProviderKeys = {
+    openai: openAIKeys,
+    anthropic: anthropicKeys,
+    google: googleKeys,
+    groq: groqKeys,
+    mistral: mistralKeys,
+    xai: xaiKeys,
+  };
+  const currentKeys = allProviderKeys[provider as Exclude<AIProvider, "tavily">];
+
+  useEffect(() => {
+    fetch("/specification/flat.json")
+      .then((r) => r.json())
+      .then((s) => {
+        schemaRef.current = s;
+      })
+      .catch(() => {});
+  }, []);
+
+  const sendMessage = useCallback(
+    async (textOverride?: string) => {
+      const userText = (textOverride ?? input).trim();
+      if (!userText || isStreaming || !model) return;
+
+      if (!currentKeys.key) {
+        toast.error("API key not configured", {
+          description: "Open settings to add your API key.",
+        });
+        return;
+      }
+
+      if (!textOverride) setInput("");
+      const userMessage: ChatMessage = { role: "user", content: userText };
+      setMessages((prev) => [...prev, userMessage, { role: "assistant", content: "" }]);
+      setIsStreaming(true);
+
+      try {
+        const toolJson = JSON.stringify(exportToStructuredJSON(currentTool), null, 2);
+        const schema = schemaRef.current ? JSON.stringify(schemaRef.current, null, 2) : "{}";
+        const systemPrompt = generateChatSystemPrompt(toolJson, schema, {
+          selectedCommand: context.selectedCommandName,
+          selectedParameter: context.selectedParameterName,
+        });
+        const aiModel = createModelInstance(provider, currentKeys.key, model);
+
+        const editToolDef = tool({
+          description: "Apply the updated CLI tool definition to the editor.",
+          inputSchema: z.object({
+            name: z.string(),
+            displayName: z.string().optional(),
+            description: z.string().optional(),
+            version: z.string().optional(),
+            url: z.string().optional(),
+            category: z.string().optional(),
+            tags: z.array(z.string()).optional(),
+            commands: z.array(z.any()),
+            parameters: z.array(z.any()),
+          }),
+          execute: async (input) => {
+            try {
+              onApply(replaceKey(input as unknown as Tool) as Tool);
+              return { success: true };
+            } catch {
+              return { success: false };
+            }
+          },
+        });
+
+        const webSearchTool =
+          tavilyKeys.isSaved && tavilyKeys.key
+            ? tool({
+                description:
+                  "Search the web for CLI tool documentation, help text, or related information.",
+                inputSchema: z.object({ query: z.string().describe("The search query") }),
+                execute: async ({ query }: { query: string }) => {
+                  const resp = await fetch("https://api.tavily.com/search", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                      api_key: tavilyKeys.key,
+                      query,
+                      search_depth: "basic",
+                      max_results: 5,
+                    }),
+                  });
+                  if (!resp.ok) throw new Error("Web search failed");
+                  const data = (await resp.json()) as {
+                    results?: { title: string; url: string; content: string }[];
+                  };
+                  return (
+                    data.results?.map((r) => ({
+                      title: r.title,
+                      url: r.url,
+                      content: r.content,
+                    })) ?? []
+                  );
+                },
+              })
+            : undefined;
+
+        const { fullStream } = streamText({
+          model: aiModel,
+          system: systemPrompt,
+          messages: [...messages, userMessage].map((m) => ({ role: m.role, content: m.content })),
+          tools: {
+            editTool: editToolDef,
+            ...(webSearchTool ? { webSearch: webSearchTool } : {}),
+          },
+          stopWhen: stepCountIs(5),
+        });
+
+        let fullText = "";
+        let editToolCallId: string | null = null;
+        let editToolBuffer = "";
+
+        for await (const part of fullStream) {
+          if (part.type === "text-delta") {
+            fullText += part.text;
+            setMessages((prev) => {
+              const updated = [...prev];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: fullText,
+                toolCalls: updated[updated.length - 1].toolCalls,
+                toolApplied: updated[updated.length - 1].toolApplied,
+              };
+              return updated;
+            });
+          } else if (part.type === "tool-input-start" && part.toolName === "editTool") {
+            editToolCallId = part.id;
+            onGeneratingChange?.(true);
+            setMessages((prev) => {
+              const updated = [...prev];
+              const last = updated[updated.length - 1];
+              const entry: ToolCallEntry = {
+                toolCallId: part.id,
+                toolName: "editTool",
+                title: "Applying changes",
+                input: {},
+                state: "input-available",
+              };
+              updated[updated.length - 1] = {
+                ...last,
+                toolCalls: [...(last.toolCalls ?? []), entry],
+              };
+              return updated;
+            });
+          } else if (
+            part.type === "tool-input-delta" &&
+            editToolCallId &&
+            part.id === editToolCallId
+          ) {
+            editToolBuffer += part.delta;
+            const partial = tryParsePartialTool(editToolBuffer);
+            if (partial) onStreamingTool?.(partial);
+          } else if (part.type === "tool-call" && part.toolName === "webSearch") {
+            const query = (part.input as { query: string }).query;
+            setMessages((prev) => {
+              const updated = [...prev];
+              const last = updated[updated.length - 1];
+              const entry: ToolCallEntry = {
+                toolCallId: part.toolCallId,
+                toolName: "webSearch",
+                title: "Web Search",
+                input: { query },
+                state: "input-available",
+              };
+              updated[updated.length - 1] = {
+                ...last,
+                toolCalls: [...(last.toolCalls ?? []), entry],
+              };
+              return updated;
+            });
+          } else if (part.type === "tool-result" && part.toolName === "webSearch") {
+            setMessages((prev) => {
+              const updated = [...prev];
+              const last = updated[updated.length - 1];
+              const toolCalls = (last.toolCalls ?? []).map((tc) =>
+                tc.toolCallId === part.toolCallId
+                  ? { ...tc, state: "output-available" as const, output: part.output }
+                  : tc,
+              );
+              updated[updated.length - 1] = { ...last, toolCalls };
+              return updated;
+            });
+          } else if (part.type === "tool-result" && part.toolName === "editTool") {
+            onGeneratingChange?.(false);
+            onStreamingTool?.(null);
+            setMessages((prev) => {
+              const updated = [...prev];
+              const last = updated[updated.length - 1];
+              const toolCalls = (last.toolCalls ?? []).map((tc) =>
+                tc.toolCallId === editToolCallId
+                  ? { ...tc, state: "output-available" as const }
+                  : tc,
+              );
+              updated[updated.length - 1] = { ...last, toolCalls, toolApplied: true };
+              return updated;
+            });
+          }
+        }
+
+        onGeneratingChange?.(false);
+        onStreamingTool?.(null);
+      } catch (error) {
+        onGeneratingChange?.(false);
+        onStreamingTool?.(null);
+        toast.error(error instanceof Error ? error.message : "AI request failed");
+        setMessages((prev) => prev.slice(0, -2));
+      } finally {
+        setIsStreaming(false);
+      }
+    },
+    [
+      input,
+      isStreaming,
+      currentKeys.key,
+      model,
+      provider,
+      currentTool,
+      messages,
+      context,
+      tavilyKeys,
+      onApply,
+      onGeneratingChange,
+      onStreamingTool,
+    ],
+  );
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setInput("");
+  }, []);
+
+  return {
+    messages,
+    input,
+    setInput,
+    isStreaming,
+    model,
+    setModel,
+    provider,
+    sendMessage,
+    clearMessages,
+    allProviderKeys,
+    tavilyKeys,
+  };
+}
+
+interface AIChatPanelProps {
+  tool: Tool;
+  onApply: (tool: Tool) => void;
+  isOpen: boolean;
+  onStreamingTool?: (tool: Tool | null) => void;
+  onGeneratingChange?: (isGenerating: boolean) => void;
+}
+
+export function AIChatPanel({
+  tool,
+  onApply,
+  isOpen,
+  onStreamingTool,
+  onGeneratingChange,
+}: AIChatPanelProps) {
+  const { selectedCommand, selectedParameter } = useToolBuilder();
+  const chat = useAIChat(
+    tool,
+    onApply,
+    {
+      selectedCommandName: selectedCommand?.name,
+      selectedParameterName: selectedParameter?.name ?? undefined,
+    },
+    onStreamingTool,
+    onGeneratingChange,
+  );
+  const [modelOpen, setModelOpen] = useState(false);
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider>(chat.provider);
+
+  const currentGroup = MODEL_GROUPS.find((g) => g.provider === chat.provider);
+  const currentModelLabel =
+    MODEL_GROUPS.flatMap((g) => g.models).find((m) => m.value === chat.model)?.label ?? chat.model;
+  const selectedGroup =
+    MODEL_GROUPS.find((g) => g.provider === selectedProvider) ?? MODEL_GROUPS[0];
+  const selectedProviderKeys =
+    chat.allProviderKeys[selectedProvider as Exclude<AIProvider, "tavily">];
+
+  return (
+    <div
+      className={cn(
+        "flex h-full shrink-0 flex-col border-l border-border/50 bg-background transition-[width,opacity] duration-200",
+        isOpen ? "w-1/4 opacity-100" : "w-0 overflow-hidden opacity-0",
+      )}
+    >
+      <div className="flex shrink-0 items-center justify-between border-b border-border/50 px-3 py-2">
+        <span className="text-sm font-bold">AI Generate</span>
+        <div className="flex items-center gap-1">
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-7 w-7"
+            disabled={chat.messages.length === 0}
+            onClick={chat.clearMessages}
+          >
+            <SquarePenIcon className="h-3.5 w-3.5" />
+          </Button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-7 w-7"
+              >
+                <Settings2Icon className="h-3.5 w-3.5" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-80"
+              side="bottom"
+              align="end"
+            >
+              <p className="mb-3 text-sm font-medium">API Keys</p>
+              <div className="flex max-h-72 flex-col gap-4 overflow-y-auto pr-1">
+                {MODEL_GROUPS.map((g, gi) => {
+                  const keys = chat.allProviderKeys[g.provider as Exclude<AIProvider, "tavily">];
+                  return (
+                    <div key={g.provider}>
+                      {gi > 0 && <Separator className="mb-4" />}
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-1.5">
+                          <img
+                            src={g.logoUrl}
+                            alt={g.label}
+                            className="h-4 w-4 rounded"
+                          />
+                          <span className="text-xs font-medium">{g.label}</span>
+                          {keys.isSaved && <CheckIcon className="ml-auto h-3 w-3 text-green-600" />}
+                        </div>
+                        <Input
+                          type="password"
+                          value={keys.key}
+                          onChange={(e) => keys.setKey(e.target.value)}
+                          className="h-8 text-xs"
+                          placeholder={g.keyPlaceholder}
+                        />
+                        <div className="flex items-center gap-1.5">
+                          <Checkbox
+                            id={`${g.provider}-save-key`}
+                            checked={keys.isSaved}
+                            onCheckedChange={(c) =>
+                              keys.setSaved(c === "indeterminate" ? false : c)
+                            }
+                          />
+                          <Label
+                            htmlFor={`${g.provider}-save-key`}
+                            className="cursor-pointer text-xs"
+                          >
+                            Save key locally
+                          </Label>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+                <Separator />
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-1.5">
+                    <GlobeIcon className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-xs font-medium">Tavily (Web Search)</span>
+                    {chat.tavilyKeys.isSaved && (
+                      <CheckIcon className="ml-auto h-3 w-3 text-green-600" />
+                    )}
+                  </div>
+                  <Input
+                    type="password"
+                    value={chat.tavilyKeys.key}
+                    onChange={(e) => chat.tavilyKeys.setKey(e.target.value)}
+                    className="h-8 text-xs"
+                    placeholder="tvly-..."
+                  />
+                  <div className="flex items-center gap-1.5">
+                    <Checkbox
+                      id="tavily-save-key"
+                      checked={chat.tavilyKeys.isSaved}
+                      onCheckedChange={(c) =>
+                        chat.tavilyKeys.setSaved(c === "indeterminate" ? false : c)
+                      }
+                    />
+                    <Label
+                      htmlFor="tavily-save-key"
+                      className="cursor-pointer text-xs"
+                    >
+                      Save key locally
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      <Conversation className="min-h-0 flex-1">
+        <ConversationContent className="gap-3 p-3">
+          {chat.messages.length === 0 ? (
+            <ConversationEmptyState>
+              <div className="text-muted-foreground">
+                <SparklesIcon className="size-8" />
+              </div>
+              <div className="space-y-1">
+                <h3 className="text-sm font-medium">Generate or modify this tool</h3>
+                <p className="text-sm text-muted-foreground">
+                  Describe what you want or ask to modify the tool
+                </p>
+              </div>
+              <Suggestions className="justify-center">
+                {PROMPT_PILLS.map((pill) => (
+                  <Suggestion
+                    key={pill.label}
+                    suggestion={pill.text}
+                    onClick={chat.sendMessage}
+                    disabled={chat.isStreaming}
+                    className="text-xs"
+                  >
+                    {pill.label}
+                  </Suggestion>
+                ))}
+              </Suggestions>
+            </ConversationEmptyState>
+          ) : (
+            chat.messages.map((msg, i) => (
+              <div
+                key={i}
+                className={cn(
+                  "flex flex-col gap-1",
+                  msg.role === "user" ? "items-end" : "items-start",
+                )}
+              >
+                {msg.toolCalls?.map((tc) => (
+                  <ToolCard
+                    key={tc.toolCallId}
+                    className="w-full"
+                  >
+                    <ToolHeader
+                      type="dynamic-tool"
+                      toolName={tc.toolName}
+                      title={tc.title}
+                      state={tc.state}
+                    />
+                    {tc.toolName !== "editTool" && (
+                      <ToolContent>
+                        <ToolInput input={tc.input} />
+                        {tc.state === "output-available" && (
+                          <ToolOutput
+                            output={tc.output}
+                            errorText={tc.errorText}
+                          />
+                        )}
+                      </ToolContent>
+                    )}
+                  </ToolCard>
+                ))}
+                <div
+                  className={cn(
+                    "max-w-[85%] rounded-lg px-3 py-2 text-sm wrap-break-word whitespace-pre-wrap",
+                    msg.role === "user"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted text-foreground",
+                  )}
+                >
+                  {msg.content ? (
+                    msg.content
+                  ) : (
+                    <div className="space-y-1.5 py-0.5">
+                      <Shimmer className="text-sm">Generating response...</Shimmer>
+                    </div>
+                  )}
+                </div>
+                {msg.toolApplied && (
+                  <div className="mt-1 flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+                    <CheckIcon className="h-3 w-3" />
+                    <span>Applied</span>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+
+      <div className="flex shrink-0 flex-col gap-2 border-t border-border/50 p-3">
+        <div className="flex gap-2">
+          <Textarea
+            className="field-sizing-fixed min-h-24 flex-1 resize-none"
+            placeholder="Ask AI to modify the tool…"
+            value={chat.input}
+            onChange={(e) => chat.setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                chat.sendMessage();
+              }
+            }}
+          />
+          <Button
+            size="sm"
+            disabled={
+              chat.isStreaming ||
+              !chat.input.trim() ||
+              !chat.allProviderKeys[chat.provider as Exclude<AIProvider, "tavily">]?.key ||
+              !chat.model
+            }
+            onClick={() => chat.sendMessage()}
+            className="self-end"
+          >
+            {chat.isStreaming ? (
+              <Loader2Icon className="h-4 w-4 animate-spin" />
+            ) : (
+              <SendIcon className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        <Popover
+          open={modelOpen}
+          onOpenChange={(open) => {
+            setModelOpen(open);
+            if (open) setSelectedProvider(chat.provider);
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              className="h-8 w-fit justify-between gap-2 px-2 text-xs"
+            >
+              <div className="flex items-center gap-1.5">
+                {currentGroup && (
+                  <img
+                    src={currentGroup.logoUrl}
+                    alt={currentGroup.label}
+                    className="h-4 w-4 rounded"
+                  />
+                )}
+                {currentModelLabel}
+              </div>
+              <ChevronsUpDownIcon className="h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-80 p-2"
+            align="start"
+          >
+            <div className="flex gap-2">
+              <div className="flex w-12 flex-col gap-1 border-r border-border/50 pr-2">
+                {MODEL_GROUPS.map((g) => {
+                  const isKeyConfigured =
+                    chat.allProviderKeys[g.provider as Exclude<AIProvider, "tavily">]?.isSaved;
+                  return (
+                    <button
+                      key={g.provider}
+                      onClick={() => setSelectedProvider(g.provider)}
+                      title={`${g.label}${!isKeyConfigured ? " (no API key)" : ""}`}
+                      className={cn(
+                        "flex h-9 w-10 items-center justify-center rounded border border-transparent transition-all",
+                        selectedProvider === g.provider
+                          ? "border-border bg-accent"
+                          : "opacity-50 hover:bg-muted hover:opacity-80",
+                      )}
+                    >
+                      <img
+                        src={g.logoUrl}
+                        alt={g.label}
+                        className="h-5 w-5 rounded"
+                      />
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="flex-1">
+                <p className="mb-1.5 px-1 text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+                  {selectedGroup.label}
+                </p>
+                {!selectedProviderKeys?.isSaved && (
+                  <p className="mb-1.5 px-1 text-[10px] text-amber-500">No API key configured</p>
+                )}
+                {selectedGroup.models.map((m) => {
+                  const isKeyConfigured = selectedProviderKeys?.isSaved;
+                  return (
+                    <button
+                      key={m.value}
+                      disabled={!isKeyConfigured}
+                      onClick={() => {
+                        chat.setModel(m.value);
+                        setModelOpen(false);
+                      }}
+                      className={cn(
+                        "flex w-full items-center justify-between rounded px-2 py-2 text-xs transition-colors",
+                        isKeyConfigured
+                          ? "cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                          : "cursor-not-allowed opacity-40",
+                        chat.model === m.value && "bg-accent text-accent-foreground",
+                      )}
+                    >
+                      {m.label}
+                      {chat.model === m.value && <CheckIcon className="h-3 w-3" />}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}
diff --git a/registry/commandly/tool-editor/command-tree.tsx b/registry/commandly/tool-editor/command-tree.tsx
index f36ed4f..609f35a 100644
--- a/registry/commandly/tool-editor/command-tree.tsx
+++ b/registry/commandly/tool-editor/command-tree.tsx
@@ -203,7 +203,7 @@ export function CommandTree() {
 
   return (
     <>
-      <ScrollArea className="flex-1 p-1">
+      <ScrollArea className="flex-1 border-r border-muted p-1">
         <div className="p-2">
           {rootCommands.map((command) => (
             <CommandNode
diff --git a/registry/commandly/tool-editor/dialogs/tool-details-dialog.tsx b/registry/commandly/tool-editor/dialogs/tool-details-dialog.tsx
index d4e1c9d..97ef762 100644
--- a/registry/commandly/tool-editor/dialogs/tool-details-dialog.tsx
+++ b/registry/commandly/tool-editor/dialogs/tool-details-dialog.tsx
@@ -127,6 +127,16 @@ export function ToolDetailsDialog() {
             </div>
           </div>
 
+          <div className="flex flex-col gap-3">
+            <Label htmlFor="tool-url">URL</Label>
+            <Input
+              id="tool-url"
+              value={tool.url ?? ""}
+              onChange={(e) => updateTool({ url: e.target.value || undefined })}
+              placeholder="https://example.com"
+            />
+          </div>
+
           <div className="flex flex-col gap-2">
             <Label>Tags</Label>
             <TagsInput
diff --git a/registry/commandly/tool-editor/parameter-list.tsx b/registry/commandly/tool-editor/parameter-list.tsx
index e555706..b1e49fe 100644
--- a/registry/commandly/tool-editor/parameter-list.tsx
+++ b/registry/commandly/tool-editor/parameter-list.tsx
@@ -80,7 +80,7 @@ export function ParameterList({ title, isGlobal = false }: ParameterListProps) {
           return (
             <div
               key={parameter.key}
-              className={"cursor-pointer rounded border p-3 hover:bg-muted/50"}
+              className={"cursor-pointer rounded border border-muted p-3 hover:bg-muted/50"}
               onClick={() => setSelectedParameter(parameter)}
             >
               <div className="mb-2 flex items-center justify-between">
diff --git a/registry/commandly/tool-editor/preview-tabs.tsx b/registry/commandly/tool-editor/preview-tabs.tsx
index 6b1fae8..643cd02 100644
--- a/registry/commandly/tool-editor/preview-tabs.tsx
+++ b/registry/commandly/tool-editor/preview-tabs.tsx
@@ -3,82 +3,127 @@ import { JsonOutput } from "../json-output";
 import { ToolRenderer } from "../tool-renderer";
 import { HelpMenu } from "./help-menu";
 import { useToolBuilder } from "./tool-editor.context";
+import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { TerminalIcon } from "lucide-react";
+import { Tool } from "@/registry/commandly/lib/types/commandly";
+import { TerminalIcon, WandSparklesIcon } from "lucide-react";
 import { useState } from "react";
 
 interface PreviewTabsProps {
   onSaveCommand?: (command: string) => void;
+  streamingTool?: Tool | null;
+  isAIGenerating?: boolean;
 }
 
-export function PreviewTabs({ onSaveCommand }: PreviewTabsProps) {
+export function PreviewTabs({ onSaveCommand, streamingTool, isAIGenerating }: PreviewTabsProps) {
   const [currentTab, setActiveTab] = useState("ui");
 
-  const { selectedCommand, tool, parameterValues, setParameterValue } = useToolBuilder();
+  const { selectedCommand, tool, parameterValues, setParameterValue, initializeTool } =
+    useToolBuilder();
+  const displayTool = streamingTool ?? tool;
 
   return (
-    <div className="flex h-full max-w-full justify-center rounded-xl">
+    <div className="flex h-full max-w-full flex-col">
       <Tabs
         value={currentTab}
         onValueChange={setActiveTab}
-        className="w-full"
+        className="flex h-full w-full flex-col"
       >
-        <TabsList className="mx-auto flex w-fit justify-center">
-          <TabsTrigger value="json">Json</TabsTrigger>
-          <TabsTrigger value="ui">Preview</TabsTrigger>
-          <TabsTrigger value="help">Help</TabsTrigger>
-        </TabsList>
-        <TabsContent value="json">
-          <JsonOutput tool={tool} />
-        </TabsContent>
-        <TabsContent
-          value="ui"
-          className="flex flex-col gap-4"
-        >
-          <Card>
-            <CardHeader hidden={true}>
-              <CardDescription hidden={true}></CardDescription>
-              <CardTitle>Runtime Preview</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <ToolRenderer
-                selectedCommand={selectedCommand}
+        <div className="relative mx-auto flex w-fit items-center gap-2">
+          <TabsList className="flex w-fit justify-center">
+            <TabsTrigger value="json">Json</TabsTrigger>
+            <TabsTrigger value="ui">Preview</TabsTrigger>
+            <TabsTrigger value="help">Help</TabsTrigger>
+          </TabsList>
+          {isAIGenerating && <WandSparklesIcon className="h-4 w-4 animate-pulse text-purple-500" />}
+        </div>
+        <div className="relative min-h-0 flex-1">
+          <TabsContent
+            value="json"
+            className="absolute inset-0 flex flex-col"
+          >
+            {streamingTool ? (
+              <>
+                <div className="shrink-0 border-b p-2">
+                  <Badge
+                    variant="secondary"
+                    className="text-xs"
+                  >
+                    AI preview — not yet applied
+                  </Badge>
+                </div>
+                <ScrollArea className="min-h-0 flex-1">
+                  <div className="p-2">
+                    <JsonOutput tool={streamingTool} />
+                  </div>
+                </ScrollArea>
+              </>
+            ) : (
+              <JsonOutput
                 tool={tool}
-                parameterValues={parameterValues}
-                updateParameterValue={(key, value) => setParameterValue(key, value)}
+                onApply={initializeTool}
               />
-            </CardContent>
-          </Card>
+            )}
+          </TabsContent>
+          <TabsContent
+            value="ui"
+            className="absolute inset-0 flex flex-col gap-2 p-1"
+          >
+            <Card className="flex min-h-0 flex-1 flex-col">
+              <CardHeader hidden={true}>
+                <CardDescription hidden={true}></CardDescription>
+                <CardTitle>Runtime Preview</CardTitle>
+              </CardHeader>
+              <CardContent className="min-h-0 flex-1 p-0">
+                <ScrollArea className="h-full">
+                  <div className="space-y-4 p-6">
+                    <ToolRenderer
+                      selectedCommand={selectedCommand}
+                      tool={displayTool}
+                      parameterValues={parameterValues}
+                      updateParameterValue={(key, value) => setParameterValue(key, value)}
+                    />
+                  </div>
+                </ScrollArea>
+              </CardContent>
+            </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <TerminalIcon className="h-5 w-5" />
-                Generated Command
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <GeneratedCommand
-                tool={tool}
-                parameterValues={parameterValues}
-                onSaveCommand={onSaveCommand}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="help">
-          <Card className="rounded-xl p-0">
-            <CardHeader hidden={true}>
-              <CardDescription hidden={true}>
-                Get help with using this tool and its features.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="p-0">
-              <HelpMenu />
-            </CardContent>
-          </Card>
-        </TabsContent>
+            <div className="shrink-0">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <TerminalIcon className="h-5 w-5" />
+                    Generated Command
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <GeneratedCommand
+                    tool={tool}
+                    parameterValues={parameterValues}
+                    onSaveCommand={onSaveCommand}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+          <TabsContent
+            value="help"
+            className="absolute inset-0 overflow-y-auto"
+          >
+            <Card className="rounded-xl p-0">
+              <CardHeader hidden={true}>
+                <CardDescription hidden={true}>
+                  Get help with using this tool and its features.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="p-0">
+                <HelpMenu />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </div>
       </Tabs>
     </div>
   );
diff --git a/registry/commandly/tool-editor/tool-editor.tsx b/registry/commandly/tool-editor/tool-editor.tsx
index aee6494..6aecc68 100644
--- a/registry/commandly/tool-editor/tool-editor.tsx
+++ b/registry/commandly/tool-editor/tool-editor.tsx
@@ -1,14 +1,17 @@
 import { ExclusionGroupsDialog } from "../tool-editor/dialogs/exclusion-groups-dialog";
 import { ParameterDetailsDialog } from "../tool-editor/dialogs/parameter-details-dialog";
 import { ToolDetailsDialog } from "../tool-editor/dialogs/tool-details-dialog";
+import { AIChatPanel } from "./ai-chat";
 import { CommandTree } from "./command-tree";
 import { SavedCommandsDialog } from "./dialogs/saved-commands-dialog";
 import { ParameterList } from "./parameter-list";
 import { PreviewTabs } from "./preview-tabs";
 import { ToolBuilderProvider, useToolBuilder } from "./tool-editor.context";
 import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { SavedCommand, Tool } from "@/registry/commandly/lib/types/commandly";
-import { SaveIcon, Edit2Icon, LayersIcon, GitPullRequestIcon } from "lucide-react";
+import { SaveIcon, Edit2Icon, LayersIcon, GitPullRequestIcon, SparklesIcon } from "lucide-react";
+import { useState } from "react";
 import { toast } from "sonner";
 
 const GITHUB_REPO = "divyeshio/commandly";
@@ -59,7 +62,14 @@ function ToolEditorContent({
   onSaveCommand,
   onDeleteSavedCommand,
 }: ToolEditorContentProps) {
-  const { tool, setDialogOpen } = useToolBuilder();
+  const { tool, setDialogOpen, initializeTool } = useToolBuilder();
+  const [chatOpen, setChatOpen] = useState(false);
+  const [streamingTool, setStreamingTool] = useState<Tool | null>(null);
+  const [isAIGenerating, setIsAIGenerating] = useState(false);
+
+  const [initialToolJson, setInitialToolJson] = useState(() => JSON.stringify(tool));
+  const isDirty = JSON.stringify(tool) !== initialToolJson;
+  const isValid = tool.name.trim() !== "" && tool.displayName.trim() !== "";
 
   const handleContribute = async () => {
     const json = JSON.stringify(tool, null, 2);
@@ -93,20 +103,20 @@ function ToolEditorContent({
   };
 
   return (
-    <div className="flex bg-background">
-      <div className="flex w-72 flex-col overflow-hidden border-r border-muted">
-        <div className="flex flex-col justify-center gap-2 border-b border-muted p-2">
-          <p className="p-3">Commands</p>
+    <div className="flex h-[calc(100svh-4rem)] bg-background">
+      <div className="flex h-full w-72 flex-col overflow-hidden">
+        <div className="flex flex-col justify-center gap-2 border-t border-r border-b border-muted p-1">
+          <p className="p-2">Commands</p>
         </div>
         <CommandTree />
       </div>
 
-      <div className="flex flex-1 flex-col">
-        <div className="border-b border-muted p-4">
+      <div className="flex h-full flex-1 flex-col overflow-hidden">
+        <div className="border-t border-b border-muted p-2">
           <div className="flex justify-between">
             <div className="flex items-center justify-between gap-2">
               <span
-                className="text-lg font-medium"
+                className="ml-3 text-lg font-medium"
                 style={{
                   viewTransitionName: `tool-card-title-${tool.name}`,
                 }}
@@ -124,17 +134,26 @@ function ToolEditorContent({
             </div>
             <div className="flex items-center gap-2">
               {onSave && (
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={() => {
-                    onSave(tool);
-                    toast("Tool saved successfully!");
-                  }}
-                >
-                  <SaveIcon className="mr-2 h-4 w-4" />
-                  Save
-                </Button>
+                <>
+                  {isDirty && !isValid && (
+                    <span className="text-xs text-destructive">
+                      Name and display name are required
+                    </span>
+                  )}
+                  <Button
+                    variant="default"
+                    size="sm"
+                    disabled={!isDirty || !isValid}
+                    onClick={() => {
+                      onSave(tool);
+                      setInitialToolJson(JSON.stringify(tool));
+                      toast("Tool saved successfully!");
+                    }}
+                  >
+                    <SaveIcon className="mr-2 h-4 w-4" />
+                    Save
+                  </Button>
+                </>
               )}
               <Button
                 variant="outline"
@@ -160,24 +179,49 @@ function ToolEditorContent({
                 <GitPullRequestIcon className="mr-2 h-4 w-4" />
                 Contribute
               </Button>
+              <Button
+                variant={chatOpen ? "default" : "outline"}
+                size="sm"
+                onClick={() => setChatOpen((o) => !o)}
+              >
+                <SparklesIcon className="mr-2 h-4 w-4" />
+                Generate
+              </Button>
             </div>
           </div>
         </div>
 
-        <div className="flex content-between gap-4 p-4">
-          <div className="flex min-w-80 flex-2/5 flex-col gap-4">
-            <ParameterList
-              title="Global Parameters"
-              isGlobal={true}
-            />
-            <ParameterList
-              title="Command Parameters"
-              isGlobal={false}
-            />
-          </div>
-          <div className="max-w-3xl flex-3/5">
-            <PreviewTabs onSaveCommand={onSaveCommand} />
+        <div className="flex min-h-0 flex-1 overflow-hidden">
+          <div className="flex min-h-0 flex-1 gap-4 overflow-hidden p-4">
+            <div className="flex min-w-80 flex-2/5 flex-col overflow-hidden">
+              <ScrollArea className="h-full">
+                <div className="flex flex-col gap-4 pr-3 pb-4">
+                  <ParameterList
+                    title="Global Parameters"
+                    isGlobal={true}
+                  />
+                  <ParameterList
+                    title="Command Parameters"
+                    isGlobal={false}
+                  />
+                </div>
+              </ScrollArea>
+            </div>
+            <div className="h-full max-w-3xl flex-3/5 overflow-hidden">
+              <PreviewTabs
+                onSaveCommand={onSaveCommand}
+                streamingTool={streamingTool}
+                isAIGenerating={isAIGenerating}
+              />
+            </div>
           </div>
+          <AIChatPanel
+            tool={tool}
+            onApply={initializeTool}
+            isOpen={chatOpen}
+            onStreamingTool={setStreamingTool}
+            onGeneratingChange={setIsAIGenerating}
+          />
         </div>
       </div>
 
diff --git a/src/components/ai-elements/code-block.tsx b/src/components/ai-elements/code-block.tsx
new file mode 100644
index 0000000..bc12997
--- /dev/null
+++ b/src/components/ai-elements/code-block.tsx
@@ -0,0 +1,556 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ComponentProps, CSSProperties, HTMLAttributes } from "react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { BundledLanguage, BundledTheme, HighlighterGeneric, ThemedToken } from "shiki";
+import { createHighlighter } from "shiki";
+
+// Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline
+// oxlint-disable-next-line eslint(no-bitwise)
+const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1;
+// oxlint-disable-next-line eslint(no-bitwise)
+const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2;
+const isUnderline = (fontStyle: number | undefined) =>
+  // oxlint-disable-next-line eslint(no-bitwise)
+  fontStyle && fontStyle & 4;
+
+// Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint
+interface KeyedToken {
+  token: ThemedToken;
+  key: string;
+}
+interface KeyedLine {
+  tokens: KeyedToken[];
+  key: string;
+}
+
+const addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>
+  lines.map((line, lineIdx) => ({
+    key: `line-${lineIdx}`,
+    tokens: line.map((token, tokenIdx) => ({
+      key: `line-${lineIdx}-${tokenIdx}`,
+      token,
+    })),
+  }));
+
+// Token rendering component
+const TokenSpan = ({ token }: { token: ThemedToken }) => (
+  <span
+    className="dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]"
+    style={
+      {
+        backgroundColor: token.bgColor,
+        color: token.color,
+        fontStyle: isItalic(token.fontStyle) ? "italic" : undefined,
+        fontWeight: isBold(token.fontStyle) ? "bold" : undefined,
+        textDecoration: isUnderline(token.fontStyle) ? "underline" : undefined,
+        ...token.htmlStyle,
+      } as CSSProperties
+    }
+  >
+    {token.content}
+  </span>
+);
+
+// Line number styles using CSS counters
+const LINE_NUMBER_CLASSES = cn(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none",
+);
+
+// Line rendering component
+const LineSpan = ({
+  keyedLine,
+  showLineNumbers,
+}: {
+  keyedLine: KeyedLine;
+  showLineNumbers: boolean;
+}) => (
+  <span className={showLineNumbers ? LINE_NUMBER_CLASSES : "block"}>
+    {keyedLine.tokens.length === 0
+      ? "\n"
+      : keyedLine.tokens.map(({ token, key }) => (
+          <TokenSpan
+            key={key}
+            token={token}
+          />
+        ))}
+  </span>
+);
+
+// Types
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: BundledLanguage;
+  showLineNumbers?: boolean;
+};
+
+interface TokenizedCode {
+  tokens: ThemedToken[][];
+  fg: string;
+  bg: string;
+}
+
+interface CodeBlockContextType {
+  code: string;
+}
+
+// Context
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+
+// Highlighter cache (singleton per language)
+const highlighterCache = new Map<
+  string,
+  Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
+>();
+
+// Token cache
+const tokensCache = new Map<string, TokenizedCode>();
+
+// Subscribers for async token updates
+const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
+
+const getTokensCacheKey = (code: string, language: BundledLanguage) => {
+  const start = code.slice(0, 100);
+  const end = code.length > 100 ? code.slice(-100) : "";
+  return `${language}:${code.length}:${start}:${end}`;
+};
+
+const getHighlighter = (
+  language: BundledLanguage,
+): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+
+  const highlighterPromise = createHighlighter({
+    langs: [language],
+    themes: ["github-light", "github-dark"],
+  });
+
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+
+// Create raw tokens for immediate display while highlighting loads
+const createRawTokens = (code: string): TokenizedCode => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map((line) =>
+    line === ""
+      ? []
+      : [
+          {
+            color: "inherit",
+            content: line,
+          } as ThemedToken,
+        ],
+  ),
+});
+
+// Synchronous highlight with callback for async results
+export const highlightCode = (
+  code: string,
+  language: BundledLanguage,
+  // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)
+  callback?: (result: TokenizedCode) => void,
+): TokenizedCode | null => {
+  const tokensCacheKey = getTokensCacheKey(code, language);
+
+  // Return cached result if available
+  const cached = tokensCache.get(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+
+  // Subscribe callback if provided
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, new Set());
+    }
+    subscribers.get(tokensCacheKey)?.add(callback);
+  }
+
+  // Start highlighting in background - fire-and-forget async pattern
+  getHighlighter(language)
+    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)
+    .then((highlighter) => {
+      const availableLangs = highlighter.getLoadedLanguages();
+      const langToUse = availableLangs.includes(language) ? language : "text";
+
+      const result = highlighter.codeToTokens(code, {
+        lang: langToUse,
+        themes: {
+          dark: "github-dark",
+          light: "github-light",
+        },
+      });
+
+      const tokenized: TokenizedCode = {
+        bg: result.bg ?? "transparent",
+        fg: result.fg ?? "inherit",
+        tokens: result.tokens,
+      };
+
+      // Cache the result
+      tokensCache.set(tokensCacheKey, tokenized);
+
+      // Notify all subscribers
+      const subs = subscribers.get(tokensCacheKey);
+      if (subs) {
+        for (const sub of subs) {
+          sub(tokenized);
+        }
+        subscribers.delete(tokensCacheKey);
+      }
+    })
+    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then), eslint-plugin-promise(prefer-await-to-callbacks)
+    .catch((error) => {
+      console.error("Failed to highlight code:", error);
+      subscribers.delete(tokensCacheKey);
+    });
+
+  return null;
+};
+
+const CodeBlockBody = memo(
+  ({
+    tokenized,
+    showLineNumbers,
+    className,
+  }: {
+    tokenized: TokenizedCode;
+    showLineNumbers: boolean;
+    className?: string;
+  }) => {
+    const preStyle = useMemo(
+      () => ({
+        backgroundColor: tokenized.bg,
+        color: tokenized.fg,
+      }),
+      [tokenized.bg, tokenized.fg],
+    );
+
+    const keyedLines = useMemo(() => addKeysToTokens(tokenized.tokens), [tokenized.tokens]);
+
+    return (
+      <pre
+        className={cn(
+          "m-0 p-4 text-sm dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",
+          className,
+        )}
+        style={preStyle}
+      >
+        <code
+          className={cn(
+            "font-mono text-sm",
+            showLineNumbers && "[counter-increment:line_0] [counter-reset:line]",
+          )}
+        >
+          {keyedLines.map((keyedLine) => (
+            <LineSpan
+              key={keyedLine.key}
+              keyedLine={keyedLine}
+              showLineNumbers={showLineNumbers}
+            />
+          ))}
+        </code>
+      </pre>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.tokenized === nextProps.tokenized &&
+    prevProps.showLineNumbers === nextProps.showLineNumbers &&
+    prevProps.className === nextProps.className,
+);
+
+CodeBlockBody.displayName = "CodeBlockBody";
+
+export const CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { language: string }) => (
+  <div
+    className={cn(
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className,
+    )}
+    data-language={language}
+    style={{
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...style,
+    }}
+    {...props}
+  />
+);
+
+export const CodeBlockHeader = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-xs text-muted-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const CodeBlockTitle = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex items-center gap-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const CodeBlockFilename = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn("font-mono", className)}
+    {...props}
+  >
+    {children}
+  </span>
+);
+
+export const CodeBlockActions = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-my-1 -mr-1 flex items-center gap-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false,
+}: {
+  code: string;
+  language: BundledLanguage;
+  showLineNumbers?: boolean;
+}) => {
+  // Memoized raw tokens for immediate display
+  const rawTokens = useMemo(() => createRawTokens(code), [code]);
+
+  // Synchronous cache lookup — avoids setState in effect for cached results
+  const syncTokens = useMemo(
+    () => highlightCode(code, language) ?? rawTokens,
+    [code, language, rawTokens],
+  );
+
+  // Async highlighting result (populated after shiki loads)
+  const [asyncTokens, setAsyncTokens] = useState<TokenizedCode | null>(null);
+  const asyncKeyRef = useRef({ code, language });
+
+  // Invalidate stale async tokens synchronously during render
+  if (asyncKeyRef.current.code !== code || asyncKeyRef.current.language !== language) {
+    asyncKeyRef.current = { code, language };
+    setAsyncTokens(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    highlightCode(code, language, (result) => {
+      if (!cancelled) {
+        setAsyncTokens(result);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language]);
+
+  const tokenized = asyncTokens ?? syncTokens;
+
+  return (
+    <div className="relative overflow-auto">
+      <CodeBlockBody
+        showLineNumbers={showLineNumbers}
+        tokenized={tokenized}
+      />
+    </div>
+  );
+};
+
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) => {
+  const contextValue = useMemo(() => ({ code }), [code]);
+
+  return (
+    <CodeBlockContext.Provider value={contextValue}>
+      <CodeBlockContainer
+        className={className}
+        language={language}
+        {...props}
+      >
+        {children}
+        <CodeBlockContent
+          code={code}
+          language={language}
+          showLineNumbers={showLineNumbers}
+        />
+      </CodeBlockContainer>
+    </CodeBlockContext.Provider>
+  );
+};
+
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+      }
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};
+
+export type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
+
+export const CodeBlockLanguageSelector = (props: CodeBlockLanguageSelectorProps) => (
+  <Select {...props} />
+);
+
+export type CodeBlockLanguageSelectorTriggerProps = ComponentProps<typeof SelectTrigger>;
+
+export const CodeBlockLanguageSelectorTrigger = ({
+  className,
+  ...props
+}: CodeBlockLanguageSelectorTriggerProps) => (
+  <SelectTrigger
+    className={cn("h-7 border-none bg-transparent px-2 text-xs shadow-none", className)}
+    size="sm"
+    {...props}
+  />
+);
+
+export type CodeBlockLanguageSelectorValueProps = ComponentProps<typeof SelectValue>;
+
+export const CodeBlockLanguageSelectorValue = (props: CodeBlockLanguageSelectorValueProps) => (
+  <SelectValue {...props} />
+);
+
+export type CodeBlockLanguageSelectorContentProps = ComponentProps<typeof SelectContent>;
+
+export const CodeBlockLanguageSelectorContent = ({
+  align = "end",
+  ...props
+}: CodeBlockLanguageSelectorContentProps) => (
+  <SelectContent
+    align={align}
+    {...props}
+  />
+);
+
+export type CodeBlockLanguageSelectorItemProps = ComponentProps<typeof SelectItem>;
+
+export const CodeBlockLanguageSelectorItem = (props: CodeBlockLanguageSelectorItemProps) => (
+  <SelectItem {...props} />
+);
diff --git a/src/components/ai-elements/conversation.tsx b/src/components/ai-elements/conversation.tsx
new file mode 100644
index 0000000..a7facc6
--- /dev/null
+++ b/src/components/ai-elements/conversation.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { UIMessage } from "ai";
+import { ArrowDownIcon, DownloadIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+
+export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn("flex flex-col gap-8 p-4", className)}
+    {...props}
+  />
+);
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <Button
+        className={cn(
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+          className,
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+    )
+  );
+};
+
+const getMessageText = (message: UIMessage): string =>
+  message.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("");
+
+export type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  messages: UIMessage[];
+  filename?: string;
+  formatMessage?: (message: UIMessage, index: number) => string;
+};
+
+const defaultFormatMessage = (message: UIMessage): string => {
+  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${getMessageText(message)}`;
+};
+
+export const messagesToMarkdown = (
+  messages: UIMessage[],
+  formatMessage: (message: UIMessage, index: number) => string = defaultFormatMessage,
+): string => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+
+export const ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}: ConversationDownloadProps) => {
+  const handleDownload = useCallback(() => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  }, [messages, filename, formatMessage]);
+
+  return (
+    <Button
+      className={cn(
+        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        className,
+      )}
+      onClick={handleDownload}
+      size="icon"
+      type="button"
+      variant="outline"
+      {...props}
+    >
+      {children ?? <DownloadIcon className="size-4" />}
+    </Button>
+  );
+};
diff --git a/src/components/ai-elements/message.tsx b/src/components/ai-elements/message.tsx
new file mode 100644
index 0000000..8eeda84
--- /dev/null
+++ b/src/components/ai-elements/message.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { UIMessage } from "ai";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Streamdown } from "streamdown";
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+  <div
+    className={cn(
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:text-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({ className, children, ...props }: MessageActionsProps) => (
+  <div
+    className={cn("flex items-center gap-1", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}: MessageActionProps) => {
+  const button = (
+    <Button
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+interface MessageBranchContextType {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+}
+
+const MessageBranchContext = createContext<MessageBranchContextType | null>(null);
+
+const useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+
+  if (!context) {
+    throw new Error("MessageBranch components must be used within MessageBranch");
+  }
+
+  return context;
+};
+
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+
+export const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}: MessageBranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+
+  const handleBranchChange = useCallback(
+    (newBranch: number) => {
+      setCurrentBranch(newBranch);
+      onBranchChange?.(newBranch);
+    },
+    [onBranchChange],
+  );
+
+  const goToPrevious = useCallback(() => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+
+  const goToNext = useCallback(() => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+
+  const contextValue = useMemo<MessageBranchContextType>(
+    () => ({
+      branches,
+      currentBranch,
+      goToNext,
+      goToPrevious,
+      setBranches,
+      totalBranches: branches.length,
+    }),
+    [branches, currentBranch, goToNext, goToPrevious],
+  );
+
+  return (
+    <MessageBranchContext.Provider value={contextValue}>
+      <div
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        {...props}
+      />
+    </MessageBranchContext.Provider>
+  );
+};
+
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageBranchContent = ({ children, ...props }: MessageBranchContentProps) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => (Array.isArray(children) ? children : [children]),
+    [children],
+  );
+
+  // Use useEffect to update branches when they change
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+
+  return childrenArray.map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden",
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+
+export type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+
+export const MessageBranchSelector = ({ className, ...props }: MessageBranchSelectorProps) => {
+  const { totalBranches } = useMessageBranch();
+
+  // Don't render if there's only one branch
+  if (totalBranches <= 1) {
+    return null;
+  }
+
+  return (
+    <ButtonGroup
+      className={cn(
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className,
+      )}
+      orientation="horizontal"
+      {...props}
+    />
+  );
+};
+
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+
+export const MessageBranchPrevious = ({ children, ...props }: MessageBranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Previous branch"
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronLeftIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+
+export const MessageBranchNext = ({ children, ...props }: MessageBranchNextProps) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Next branch"
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const MessageBranchPage = ({ className, ...props }: MessageBranchPageProps) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+
+  return (
+    <ButtonGroupText
+      className={cn("border-none bg-transparent text-muted-foreground shadow-none", className)}
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </ButtonGroupText>
+  );
+};
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className)}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && nextProps.isAnimating === prevProps.isAnimating,
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({ className, children, ...props }: MessageToolbarProps) => (
+  <div
+    className={cn("mt-4 flex w-full items-center justify-between gap-4", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
diff --git a/src/components/ai-elements/shimmer.tsx b/src/components/ai-elements/shimmer.tsx
new file mode 100644
index 0000000..36f5906
--- /dev/null
+++ b/src/components/ai-elements/shimmer.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { MotionProps } from "motion/react";
+import { motion } from "motion/react";
+import type { CSSProperties, ElementType, JSX } from "react";
+import { memo, useMemo } from "react";
+
+type MotionHTMLProps = MotionProps & Record<string, unknown>;
+
+// Cache motion components at module level to avoid creating during render
+const motionComponentCache = new Map<
+  keyof JSX.IntrinsicElements,
+  React.ComponentType<MotionHTMLProps>
+>();
+
+const getMotionComponent = (element: keyof JSX.IntrinsicElements) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+
+export interface TextShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = getMotionComponent(Component as keyof JSX.IntrinsicElements);
+
+  const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
+        className,
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);
diff --git a/src/components/ai-elements/suggestion.tsx b/src/components/ai-elements/suggestion.tsx
new file mode 100644
index 0000000..15a1add
--- /dev/null
+++ b/src/components/ai-elements/suggestion.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+
+export const Suggestions = ({ className, children, ...props }: SuggestionsProps) => (
+  <ScrollArea
+    className="w-full overflow-x-auto whitespace-nowrap"
+    {...props}
+  >
+    <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>{children}</div>
+    <ScrollBar
+      className="hidden"
+      orientation="horizontal"
+    />
+  </ScrollArea>
+);
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = useCallback(() => {
+    onClick?.(suggestion);
+  }, [onClick, suggestion]);
+
+  return (
+    <Button
+      className={cn("cursor-pointer rounded-full px-4", className)}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};
diff --git a/src/components/ai-elements/tool.tsx b/src/components/ai-elements/tool.tsx
new file mode 100644
index 0000000..48ad2a4
--- /dev/null
+++ b/src/components/ai-elements/tool.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { CodeBlock } from "./code-block";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { DynamicToolUIPart, ToolUIPart } from "ai";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { isValidElement } from "react";
+
+export type ToolProps = ComponentProps<typeof Collapsible>;
+
+export const Tool = ({ className, ...props }: ToolProps) => (
+  <Collapsible
+    className={cn("group not-prose mb-4 w-full rounded-md border", className)}
+    {...props}
+  />
+);
+
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
+
+export type ToolHeaderProps = {
+  title?: string;
+  className?: string;
+} & (
+  | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
+  | {
+      type: DynamicToolUIPart["type"];
+      state: DynamicToolUIPart["state"];
+      toolName: string;
+    }
+);
+
+const statusLabels: Record<ToolPart["state"], string> = {
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "input-available": "Running",
+  "input-streaming": "Pending",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error",
+};
+
+const statusIcons: Record<ToolPart["state"], ReactNode> = {
+  "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
+  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+  "input-available": <ClockIcon className="size-4 animate-pulse" />,
+  "input-streaming": <CircleIcon className="size-4" />,
+  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+  "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
+  "output-error": <XCircleIcon className="size-4 text-red-600" />,
+};
+
+export const getStatusBadge = (status: ToolPart["state"]) => (
+  <Badge
+    className="gap-1.5 rounded-full text-xs"
+    variant="secondary"
+  >
+    {statusIcons[status]}
+    {statusLabels[status]}
+  </Badge>
+);
+
+export const ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}: ToolHeaderProps) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+
+  return (
+    <CollapsibleTrigger
+      className={cn("flex w-full items-center justify-between gap-4 p-3", className)}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        <WrenchIcon className="size-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{title ?? derivedName}</span>
+        {getStatusBadge(state)}
+      </div>
+      <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+    </CollapsibleTrigger>
+  );
+};
+
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:animate-in data-[state=open]:slide-in-from-top-2",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: ToolPart["input"];
+};
+
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+  <div
+    className={cn("space-y-2 overflow-hidden", className)}
+    {...props}
+  >
+    <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+      Parameters
+    </h4>
+    <div className="rounded-md bg-muted/50">
+      <CodeBlock
+        code={JSON.stringify(input, null, 2)}
+        language="json"
+      />
+    </div>
+  </div>
+);
+
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output: ToolPart["output"];
+  errorText: ToolPart["errorText"];
+};
+
+export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+
+  let Output = <div>{output as ReactNode}</div>;
+
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = (
+      <CodeBlock
+        code={JSON.stringify(output, null, 2)}
+        language="json"
+      />
+    );
+  } else if (typeof output === "string") {
+    Output = (
+      <CodeBlock
+        code={output}
+        language="json"
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn("space-y-2", className)}
+      {...props}
+    >
+      <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+        {errorText ? "Error" : "Result"}
+      </h4>
+      <div
+        className={cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
+        )}
+      >
+        {errorText && <div>{errorText}</div>}
+        {Output}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/tool-editor-ui/ai-parsing.tsx b/src/components/tool-editor-ui/ai-parsing.tsx
deleted file mode 100644
index 6b52f38..0000000
--- a/src/components/tool-editor-ui/ai-parsing.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { generateSystemPrompt } from "@/components/tool-editor-ui/prompt";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import { replaceKey } from "@/lib/utils";
-import { Tool } from "@/registry/commandly/lib/types/commandly";
-import { createOpenAI } from "@ai-sdk/openai";
-import { useDebouncedValue } from "@tanstack/react-pacer";
-import { streamText } from "ai";
-import { Loader2Icon, Wand2Icon } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-
-export function AIParsing({ onParseCompleted }: { onParseCompleted: (tool: Tool | null) => void }) {
-  const [helpText, setHelpText] = useState("");
-  const [json, setJson] = useState("");
-  const [model, setModel] = useState("");
-  const [isParsingHelp, setIsParsingHelp] = useState(false);
-  const [apiKey, setApiKey] = useState("");
-  const scrollRef = useRef<HTMLTextAreaElement>(null);
-  const [parseCount, setParseCount] = useState(0);
-  const [isUserTouched, setIsUserTouched] = useState(false);
-  const [savedKey, setSavedKey] = useState<boolean>(false);
-
-  useEffect(() => {
-    const savedApiKey = localStorage.getItem("ai-api-key");
-    if (savedApiKey) {
-      setApiKey(savedApiKey);
-      setSavedKey(true);
-    }
-  }, []);
-
-  const parseHelpWithAI = async () => {
-    if (!helpText.trim()) {
-      return;
-    }
-    setJson("");
-    setParseCount((prev) => prev + 1);
-    setIsUserTouched(false);
-    setIsParsingHelp(true);
-    try {
-      const openai = createOpenAI({ apiKey: apiKey });
-      const jsonSchema = await fetch("/specification/flat.json").then((r) => r.json());
-      const systemPrompt = generateSystemPrompt(helpText, JSON.stringify(jsonSchema, null, 2));
-
-      const { textStream } = streamText({
-        model: openai(model),
-        prompt: systemPrompt,
-        onFinish({ text }) {
-          validateJson(text);
-        },
-      });
-
-      for await (const text of textStream) {
-        setJson((prev) => prev + text);
-        scrollRef.current!.scrollTop = scrollRef.current!.scrollHeight;
-      }
-    } catch (error) {
-      console.error("Error with AI parsing:", error);
-      setJson("");
-      toast.error(error instanceof Error ? error.message : String(error));
-    }
-    setIsParsingHelp(false);
-  };
-
-  const validateJson = useCallback(
-    (jsonString: string) => {
-      try {
-        const parsedTool = JSON.parse(jsonString) as Tool;
-        const modifiedTool = replaceKey(parsedTool);
-        setJson(JSON.stringify(modifiedTool, null, 2));
-        onParseCompleted(modifiedTool);
-      } catch (error) {
-        console.error("Error parsing JSON:", error);
-        onParseCompleted(null);
-        toast.error("Failed to parse JSON. Please check the format.");
-      }
-    },
-    [onParseCompleted],
-  );
-  const [debouncedQuery] = useDebouncedValue(json, {
-    wait: 2000,
-    enabled: isUserTouched,
-  });
-
-  useEffect(() => {
-    if (json && isUserTouched) {
-      validateJson(debouncedQuery);
-    }
-  }, [debouncedQuery, isUserTouched, json, validateJson]);
-
-  return (
-    <div className="space-y-4">
-      <div className="flex gap-3">
-        <Label htmlFor="ai-model">Model</Label>
-        <Select onValueChange={setModel}>
-          <SelectTrigger className="w-45">
-            <SelectValue placeholder="Select a model" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="gpt-5">GPT 5</SelectItem>
-            <SelectItem value="gpt-5-mini">GPT 5 Mini</SelectItem>
-            <SelectItem value="gpt-5-nano">GPT 5 Nano</SelectItem>
-            <SelectItem value="gpt-4.1-2025-04-14">GPT 4.1</SelectItem>
-            <SelectItem value="gpt-4.1-mini-2025-04-14">GPT 4.1 Mini</SelectItem>
-            <SelectItem value="o4-mini-2025-04-16">o4-mini</SelectItem>
-          </SelectContent>
-        </Select>
-        <Label htmlFor="ai-key">Key</Label>
-        <Input
-          id="ai-key"
-          type="password"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-        />
-        <div className="flex items-center gap-2">
-          <Label htmlFor="save-ai-key">Save</Label>
-          <Checkbox
-            id="save-ai-key"
-            checked={savedKey}
-            onCheckedChange={(checked) => {
-              const save = checked == "indeterminate" ? false : checked;
-              if (save && apiKey.trim() !== "") {
-                localStorage.setItem("ai-api-key", apiKey);
-              } else {
-                localStorage.removeItem("ai-api-key");
-              }
-              setSavedKey(save);
-            }}
-          />
-        </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <Label htmlFor="help-text">Help Text Output</Label>
-        <ScrollArea className="box-border max-h-[35dvh] min-h-[30dvh] w-full min-w-2xl rounded-lg border border-input bg-background ring-offset-background focus-within:ring-1 focus-within:ring-ring">
-          <Textarea
-            className="max-h-[30dvh] min-h-[30dvh] min-w-2xl"
-            id="help-text"
-            value={helpText}
-            onChange={(e) => setHelpText(e.target.value)}
-            placeholder="Paste the output of 'your-tool --help' here..."
-            rows={30}
-          />
-        </ScrollArea>
-        <Label htmlFor="parsed-json">Parsed JSON</Label>
-        <ScrollArea className="box-border max-h-[35dvh] min-h-[30dvh] w-full min-w-2xl rounded-lg border border-input bg-background ring-offset-background focus-within:ring-1 focus-within:ring-ring">
-          <Textarea
-            className="max-h-[30dvh] min-h-[30dvh] min-w-2xl"
-            id="parsed-json"
-            ref={scrollRef}
-            value={json}
-            readOnly={isParsingHelp}
-            onChange={(e) => {
-              setJson(e.target.value);
-              setIsUserTouched(true);
-            }}
-            rows={30}
-          />
-        </ScrollArea>
-      </div>
-      <div className="flex gap-2">
-        <Button
-          onClick={parseHelpWithAI}
-          disabled={isParsingHelp || helpText === "" || model === "" || apiKey === ""}
-          className="flex-1"
-        >
-          {isParsingHelp ? (
-            <>
-              <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
-              Parsing with AI...
-            </>
-          ) : (
-            <>
-              <Wand2Icon className="mr-2 h-4 w-4" />
-              Parse with AI
-            </>
-          )}
-        </Button>
-        {parseCount > 0 && (
-          <Button
-            disabled={isParsingHelp || !isUserTouched}
-            onClick={() => validateJson(json)}
-          >
-            Re-validate
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/tool-editor-ui/dialogs/new-tool.tsx b/src/components/tool-editor-ui/dialogs/new-tool.tsx
deleted file mode 100644
index 7ef5714..0000000
--- a/src/components/tool-editor-ui/dialogs/new-tool.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { AIParsing } from "../ai-parsing";
-import { ImportJSON } from "../import";
-import { ManualNewToolComponent } from "../manual-new-tool";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Tool } from "@/registry/commandly/lib/types/commandly";
-import { Edit2Icon, UploadIcon, Wand2Icon } from "lucide-react";
-import { useState } from "react";
-
-export function NewToolDialog({
-  handleNavigation,
-  children,
-}: {
-  handleNavigation: (tool: Tool) => void;
-  children: React.ReactNode;
-}) {
-  const [tab, setTab] = useState("manual");
-
-  const [aiParsedTool, setAIParsedTool] = useState<Tool | null>(null);
-  const [importedTool, setImportedTool] = useState<Tool | null>(null);
-  const [manualTool, setManualTool] = useState<Tool | null>(null);
-
-  const canSubmit = () => {
-    if (tab === "manual") {
-      return manualTool?.name && manualTool?.displayName ? true : false;
-    }
-    if (tab === "import") {
-      return importedTool ? true : false;
-    }
-    if (tab === "ai") {
-      return aiParsedTool ? true : false;
-    }
-  };
-
-  const onSubmit = () => {
-    if (tab === "manual") {
-      handleNavigation(manualTool!);
-    }
-    if (tab === "import") {
-      handleNavigation(importedTool!);
-    }
-    if (tab === "ai") {
-      console.log("AI Parsed Tool");
-      handleNavigation(aiParsedTool!);
-    }
-  };
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="min-h-[95dvh] w-2xl min-w-fit">
-        <DialogHeader>
-          <DialogTitle>New Tool</DialogTitle>
-          <DialogDescription />
-        </DialogHeader>
-        <Tabs
-          value={tab}
-          onValueChange={(tab) => setTab(tab)}
-          className="w-full"
-        >
-          <TabsList className="w-full">
-            <TabsTrigger value="import">
-              <UploadIcon className="mr-1 h-4 w-4" /> Import JSON
-            </TabsTrigger>
-            <TabsTrigger value="manual">
-              <Edit2Icon className="mr-1 h-4 w-4" /> Manual
-            </TabsTrigger>
-            <TabsTrigger value="ai">
-              <Wand2Icon className="mr-1 h-4 w-4" /> Parse Help with AI
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="import">
-            <ImportJSON onParseCompleted={setImportedTool} />
-          </TabsContent>
-          <TabsContent value="manual">
-            <ManualNewToolComponent onSubmit={setManualTool} />
-          </TabsContent>
-          <TabsContent value="ai">
-            <AIParsing onParseCompleted={setAIParsedTool} />
-          </TabsContent>
-        </Tabs>
-
-        <DialogFooter>
-          <Button
-            type="submit"
-            disabled={!canSubmit()}
-            onClick={() => onSubmit()}
-          >
-            Create
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/components/tool-editor-ui/prompt.ts b/src/components/tool-editor-ui/prompt.ts
index 8661d52..ad88098 100644
--- a/src/components/tool-editor-ui/prompt.ts
+++ b/src/components/tool-editor-ui/prompt.ts
@@ -43,7 +43,7 @@ ${jsonSchema}
         
 6. **Descriptions:** Use the full sentence or phrase that follows the parameter declaration. Trim leading/trailing whitespace.
     
-7. **Uniqueness:** Ensure every \`id\` is a fresh GUIDv7.
+7. **Uniqueness:** Ensure every \`key\` is unique.
     
 8. **Count Check:** If the help text claims “Options: 5”, ensure exactly five parameter entries.
     
@@ -77,3 +77,45 @@ ${helpText}
 
 `;
 };
+
+export const generateChatSystemPrompt = (
+  currentToolJson: string,
+  jsonSchema: string,
+  context?: { selectedCommand?: string; selectedParameter?: string },
+) => {
+  const contextBlock =
+    context?.selectedCommand || context?.selectedParameter
+      ? `\n<current_context>\n${context.selectedCommand ? `Selected command: ${context.selectedCommand}` : ""}${context.selectedParameter ? `\nSelected parameter: ${context.selectedParameter}` : ""}\n</current_context>\n`
+      : "";
+
+  return `You are **CommandlyAssistant**, an expert AI assistant for building and editing CLI tool definitions in the Commandly visual command-builder.
+
+<current_tool>
+${currentToolJson}
+</current_tool>
+
+<json_schema>
+${jsonSchema}
+</json_schema>
+${contextBlock}
+<capabilities>
+You can:
+1. Modify the current tool definition by calling the \`editTool\` function with the complete updated tool object (e.g. "add a --verbose flag", "rename the main command to 'run'", "make --output required").
+2. Parse CLI help text that the user pastes and produce a full Tool JSON from scratch via \`editTool\`.
+3. Answer questions about the current tool structure.
+4. Search the web for CLI documentation using the webSearch tool when you need up-to-date information.
+</capabilities>
+
+<output_rules>
+- To apply changes to the tool, call the \`editTool\` function with the complete updated tool object. Do NOT output JSON in a code fence for modifications.
+- Make only the changes the user requested. Preserve all other fields, IDs, keys, and structure exactly as-is — including validations, exclusionGroups, dependencies, enumValues, tags, and any other existing data.
+- Do not add empty arrays or objects for optional properties that have no values (e.g. do not include \`"validations": []\`, \`"exclusionGroups": []\`, \`"tags": []\`, \`"dependencies": []\`, or \`"enumValues": []\` unless the user explicitly asked to add them or they already exist in the tool).
+- After calling editTool, write a brief plain-text explanation of what was changed.
+- If the user asks a question without requesting changes, answer in plain text without calling any tool.
+- All parameter keys must be unique values.
+- All descriptions in sentence case.
+- If a parameter is not global, it must have a commandKey. Global parameters must not have a commandKey.
+- Do not include fields not present in the schema.
+</output_rules>
+`;
+};
diff --git a/src/components/tool-editor-ui/tool-card.tsx b/src/components/tool-editor-ui/tool-card.tsx
index f39392b..719050d 100644
--- a/src/components/tool-editor-ui/tool-card.tsx
+++ b/src/components/tool-editor-ui/tool-card.tsx
@@ -81,7 +81,7 @@ export function ToolCard({
               <Link
                 to="/tools/$toolName/edit"
                 params={{ toolName: tool.name! }}
-                search={{ newTool: isLocal ? tool.name : undefined }}
+                search={{ isNew: false }}
               >
                 <Edit2Icon className="size-4" />
               </Link>
diff --git a/src/components/ui/button-group.tsx b/src/components/ui/button-group.tsx
new file mode 100644
index 0000000..cd550d7
--- /dev/null
+++ b/src/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8cb9afc..4d38506 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,31 +1,34 @@
-import * as React from "react";
-import { Slot as SlotPrimitive } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:hover:text-primary dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -37,23 +40,25 @@ const buttonVariants = cva(
 
 function Button({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
-  const Comp = asChild ? SlotPrimitive.Slot : "button"
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
       data-slot="button"
+      data-variant={variant}
+      data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..63fc8ef
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/index.css b/src/index.css
index fca2f43..387062f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@source "../node_modules/streamdown/dist/*.js";
+
 @custom-variant dark (&:is(.dark *));
 
 @plugin "tailwindcss-animate";
diff --git a/src/lib/ai-keys.ts b/src/lib/ai-keys.ts
new file mode 100644
index 0000000..97523dc
--- /dev/null
+++ b/src/lib/ai-keys.ts
@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+export type AIProvider = "openai" | "anthropic" | "google" | "groq" | "mistral" | "xai" | "tavily";
+
+const STORAGE_KEYS: Record<AIProvider, string> = {
+  openai: "ai-api-key",
+  anthropic: "ai-api-key-anthropic",
+  google: "ai-api-key-google",
+  groq: "ai-api-key-groq",
+  mistral: "ai-api-key-mistral",
+  xai: "ai-api-key-xai",
+  tavily: "ai-api-key-tavily",
+};
+
+export function useAIKeys(provider: AIProvider) {
+  const storageKey = STORAGE_KEYS[provider];
+  const [key, setKeyState] = useState(() => localStorage.getItem(storageKey) ?? "");
+  const [isSaved, setIsSavedState] = useState(() => !!localStorage.getItem(storageKey));
+
+  const setKey = (newKey: string) => {
+    setKeyState(newKey);
+    if (isSaved && newKey.trim()) {
+      localStorage.setItem(storageKey, newKey);
+    }
+  };
+
+  const setSaved = (save: boolean) => {
+    if (save && key.trim()) {
+      localStorage.setItem(storageKey, key);
+    } else {
+      localStorage.removeItem(storageKey);
+    }
+    setIsSavedState(save);
+  };
+
+  return { key, setKey, isSaved, setSaved };
+}
diff --git a/src/routes/tools/$toolName/edit.tsx b/src/routes/tools/$toolName/edit.tsx
index 2cd4202..ee30261 100644
--- a/src/routes/tools/$toolName/edit.tsx
+++ b/src/routes/tools/$toolName/edit.tsx
@@ -2,7 +2,6 @@ import { fetchToolDetails } from "@/lib/api/tools.api";
 import { SavedCommand, Tool } from "@/registry/commandly/lib/types/commandly";
 import {
   addSavedCommandToStorage,
-  defaultTool,
   getSavedCommandsFromStorage,
   removeSavedCommandFromStorage,
   slugify,
@@ -15,20 +14,17 @@ import { toast } from "sonner";
 export const Route = createFileRoute("/tools/$toolName/edit")({
   component: RouteComponent,
   validateSearch: (search) => ({
-    newTool: typeof search.newTool === "string" ? search.newTool : undefined,
+    isNew: search.isNew === true,
   }),
-  loaderDeps: ({ search: { newTool } }) => ({
-    newTool,
+  loaderDeps: ({ search: { isNew } }) => ({
+    isNew,
   }),
-  loader: async ({ params: { toolName }, deps: { newTool } }) => {
-    if (newTool) {
-      const newToolData = localStorage.getItem(`tool-${newTool}`);
-      if (newToolData) {
-        return JSON.parse(newToolData) as Tool;
-      } else {
-        return defaultTool() as Tool;
-      }
+  loader: async ({ params: { toolName }, deps: { isNew } }) => {
+    if (isNew) {
+      return { name: "", displayName: "", commands: [], parameters: [] } as Tool;
     } else {
+      const local = localStorage.getItem(`tool-${toolName}`);
+      if (local) return JSON.parse(local) as Tool;
       return await fetchToolDetails(toolName);
     }
   },
@@ -44,7 +40,7 @@ export const Route = createFileRoute("/tools/$toolName/edit")({
 
 function RouteComponent() {
   const tool = Route.useLoaderData();
-  const { newTool } = Route.useSearch();
+  const { isNew } = Route.useSearch();
 
   const [savedCommands, setSavedCommands] = useState<SavedCommand[]>(() =>
     tool ? getSavedCommandsFromStorage(tool.name) : [],
@@ -78,7 +74,7 @@ function RouteComponent() {
     <div className="mt-16">
       <ToolEditor
         tool={tool!}
-        isNewTool={!!newTool}
+        isNewTool={!!isNew}
         onSave={(tool) => {
           localStorage.setItem(`tool-${tool.name}`, JSON.stringify(tool));
         }}
diff --git a/src/routes/tools/index.tsx b/src/routes/tools/index.tsx
index a901345..b4bbe57 100644
--- a/src/routes/tools/index.tsx
+++ b/src/routes/tools/index.tsx
@@ -1,5 +1,4 @@
 import { SkeletonCard } from "@/components/square-card-skeleton";
-import { NewToolDialog } from "@/components/tool-editor-ui/dialogs/new-tool";
 import { ToolCard } from "@/components/tool-editor-ui/tool-card";
 import { Button } from "@/components/ui/button";
 import { Input, InputIcon, InputRoot } from "@/components/ui/input";
@@ -20,7 +19,7 @@ import { type Tool } from "@/registry/commandly/lib/types/commandly";
 import { queryOptions } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { SearchIcon } from "lucide-react";
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 export const toolsQueryOptions = () =>
   queryOptions({
@@ -46,6 +45,30 @@ function RouteComponent() {
     new Set((loaderData.serverTools || []).map((t) => t.name).filter((n): n is string => !!n)),
   );
 
+  useEffect(() => {
+    const localTools: Partial<Tool>[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("tool-")) {
+        try {
+          const tool = JSON.parse(localStorage.getItem(key)!) as Partial<Tool>;
+          if (tool?.name && !serverToolNames.has(tool.name)) {
+            localTools.push(tool);
+          }
+        } catch {
+          // ignore malformed localStorage entries
+        }
+      }
+    }
+    if (localTools.length > 0) {
+      setTools((prev) => {
+        const existingNames = new Set(prev.map((t) => t.name));
+        const newTools = localTools.filter((t) => !existingNames.has(t.name));
+        return [...newTools, ...prev];
+      });
+    }
+  }, [serverToolNames]);
+
   const [searchValue, setSearchValue] = useState("");
   const [filterCategory, setFilterCategory] = useState("");
   const [filterTag, setFilterTag] = useState("");
@@ -68,12 +91,11 @@ function RouteComponent() {
     return Array.from(set);
   }, [tools]);
 
-  const handleNavigation = (importedTool: Tool) => {
-    localStorage.setItem(`tool-${importedTool.name}`, JSON.stringify(importedTool));
+  const handleNewTool = () => {
     navigation({
       to: "/tools/$toolName/edit",
-      params: { toolName: importedTool.name },
-      search: { newTool: importedTool.name },
+      params: { toolName: "new" },
+      search: { isNew: true },
     });
   };
 
@@ -154,14 +176,13 @@ function RouteComponent() {
             />
           </InputRoot>
           <div className="flex items-center gap-3">
-            <NewToolDialog handleNavigation={handleNavigation}>
-              <Button
-                variant="default"
-                className="shadow-sm"
-              >
-                New Tool
-              </Button>
-            </NewToolDialog>
+            <Button
+              variant="default"
+              className="shadow-sm"
+              onClick={handleNewTool}
+            >
+              New Tool
+            </Button>
           </div>
         </div>
         <ScrollArea className="flex *:data-radix-scroll-area-viewport:max-h-[calc(100vh-180px)]">
diff --git a/tests/vitest.setup.ts b/tests/vitest.setup.ts
index 8b79492..7bd1118 100644
--- a/tests/vitest.setup.ts
+++ b/tests/vitest.setup.ts
@@ -12,3 +12,20 @@ global.ResizeObserver = class ResizeObserver {
 };
 
 Element.prototype.scrollIntoView = function () {};
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value;
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+Object.defineProperty(globalThis, "localStorage", { value: localStorageMock, writable: true });

From 5faaab7037075b295581493b5a108c8fcd11d8ef Mon Sep 17 00:00:00 2001
From: divyeshio <79130336+divyeshio@users.noreply.github.com>
Date: Fri, 13 Mar 2026 00:47:10 +0530
Subject: [PATCH 2/4] feat: enhance AI chat functionality with message handling
 and context management

---
 registry/commandly/tool-editor/ai-chat.tsx  | 346 +++++++++++++++-----
 src/components/tool-editor-ui/prompt.ts     | 155 ++++-----
 src/components/tool-editor-ui/tool-card.tsx |   2 +-
 src/routes/tools/$toolName/edit.tsx         |   8 +-
 src/routes/tools/index.tsx                  |   2 +-
 5 files changed, 327 insertions(+), 186 deletions(-)

diff --git a/registry/commandly/tool-editor/ai-chat.tsx b/registry/commandly/tool-editor/ai-chat.tsx
index ce72a34..a1e5835 100644
--- a/registry/commandly/tool-editor/ai-chat.tsx
+++ b/registry/commandly/tool-editor/ai-chat.tsx
@@ -5,6 +5,13 @@ import {
   ConversationEmptyState,
   ConversationScrollButton,
 } from "@/components/ai-elements/conversation";
+import {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
 import {
@@ -14,7 +21,7 @@ import {
   ToolInput,
   ToolOutput,
 } from "@/components/ai-elements/tool";
-import { generateChatSystemPrompt } from "@/components/tool-editor-ui/prompt";
+import { generatePrompt } from "@/components/tool-editor-ui/prompt";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -36,12 +43,16 @@ import { stepCountIs, streamText, tool } from "ai";
 import {
   CheckIcon,
   ChevronsUpDownIcon,
+  CopyIcon,
   GlobeIcon,
-  Loader2Icon,
+  PencilIcon,
+  RefreshCcwIcon,
   SendIcon,
   Settings2Icon,
   SparklesIcon,
+  SquareIcon,
   SquarePenIcon,
+  XIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -263,6 +274,9 @@ function useAIChat(
   const [isStreaming, setIsStreaming] = useState(false);
   const [model, setModel] = useState(MODEL_GROUPS[0].models[0].value);
   const schemaRef = useRef<object | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const toolSnapshotRef = useRef<Tool | null>(null);
+  const isToolAppliedRef = useRef(false);
 
   const provider = providerForModel(model);
   const openAIKeys = useAIKeys("openai");
@@ -292,31 +306,24 @@ function useAIChat(
       .catch(() => {});
   }, []);
 
-  const sendMessage = useCallback(
-    async (textOverride?: string) => {
-      const userText = (textOverride ?? input).trim();
-      if (!userText || isStreaming || !model) return;
-
-      if (!currentKeys.key) {
-        toast.error("API key not configured", {
-          description: "Open settings to add your API key.",
-        });
-        return;
-      }
-
-      if (!textOverride) setInput("");
-      const userMessage: ChatMessage = { role: "user", content: userText };
-      setMessages((prev) => [...prev, userMessage, { role: "assistant", content: "" }]);
-      setIsStreaming(true);
+  const runStream = useCallback(
+    async (userText: string, history: ChatMessage[]) => {
+      abortControllerRef.current = new AbortController();
+      toolSnapshotRef.current = currentTool;
+      isToolAppliedRef.current = false;
 
       try {
         const toolJson = JSON.stringify(exportToStructuredJSON(currentTool), null, 2);
         const schema = schemaRef.current ? JSON.stringify(schemaRef.current, null, 2) : "{}";
-        const systemPrompt = generateChatSystemPrompt(toolJson, schema, {
-          selectedCommand: context.selectedCommandName,
-          selectedParameter: context.selectedParameterName,
+        const systemPrompt = generatePrompt(schema, {
+          currentToolJson: toolJson,
+          context: {
+            selectedCommand: context.selectedCommandName,
+            selectedParameter: context.selectedParameterName,
+          },
         });
         const aiModel = createModelInstance(provider, currentKeys.key, model);
+        const userMessage: ChatMessage = { role: "user", content: userText };
 
         const editToolDef = tool({
           description: "Apply the updated CLI tool definition to the editor.",
@@ -333,6 +340,7 @@ function useAIChat(
           }),
           execute: async (input) => {
             try {
+              isToolAppliedRef.current = true;
               onApply(replaceKey(input as unknown as Tool) as Tool);
               return { success: true };
             } catch {
@@ -376,12 +384,13 @@ function useAIChat(
         const { fullStream } = streamText({
           model: aiModel,
           system: systemPrompt,
-          messages: [...messages, userMessage].map((m) => ({ role: m.role, content: m.content })),
+          messages: [...history, userMessage].map((m) => ({ role: m.role, content: m.content })),
           tools: {
             editTool: editToolDef,
             ...(webSearchTool ? { webSearch: webSearchTool } : {}),
           },
           stopWhen: stepCountIs(5),
+          abortSignal: abortControllerRef.current.signal,
         });
 
         let fullText = "";
@@ -466,7 +475,7 @@ function useAIChat(
               const last = updated[updated.length - 1];
               const toolCalls = (last.toolCalls ?? []).map((tc) =>
                 tc.toolCallId === editToolCallId
-                  ? { ...tc, state: "output-available" as const }
+                  ? { ...tc, state: "output-available" as const, output: part.output }
                   : tc,
               );
               updated[updated.length - 1] = { ...last, toolCalls, toolApplied: true };
@@ -480,21 +489,25 @@ function useAIChat(
       } catch (error) {
         onGeneratingChange?.(false);
         onStreamingTool?.(null);
-        toast.error(error instanceof Error ? error.message : "AI request failed");
+        const isAbort = error instanceof Error && error.name === "AbortError";
+        if (isAbort) {
+          if (isToolAppliedRef.current && toolSnapshotRef.current) {
+            onApply(toolSnapshotRef.current);
+          }
+        } else {
+          toast.error(error instanceof Error ? error.message : "AI request failed");
+        }
         setMessages((prev) => prev.slice(0, -2));
       } finally {
         setIsStreaming(false);
       }
     },
     [
-      input,
-      isStreaming,
-      currentKeys.key,
-      model,
-      provider,
       currentTool,
-      messages,
       context,
+      provider,
+      currentKeys.key,
+      model,
       tavilyKeys,
       onApply,
       onGeneratingChange,
@@ -502,6 +515,50 @@ function useAIChat(
     ],
   );
 
+  const sendMessage = useCallback(
+    async (textOverride?: string) => {
+      const userText = (textOverride ?? input).trim();
+      if (!userText || isStreaming || !model) return;
+
+      if (!currentKeys.key) {
+        toast.error("API key not configured", {
+          description: "Open settings to add your API key.",
+        });
+        return;
+      }
+
+      if (!textOverride) setInput("");
+      const history = messages;
+      setMessages((prev) => [
+        ...prev,
+        { role: "user", content: userText },
+        { role: "assistant", content: "" },
+      ]);
+      setIsStreaming(true);
+      await runStream(userText, history);
+    },
+    [input, isStreaming, model, currentKeys.key, messages, runStream],
+  );
+
+  const stopStreaming = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+
+  const resendFromIndex = useCallback(
+    async (index: number, newContent: string) => {
+      if (isStreaming || !newContent.trim() || !model || !currentKeys.key) return;
+      const history = messages.slice(0, index);
+      setMessages([
+        ...history,
+        { role: "user", content: newContent },
+        { role: "assistant", content: "" },
+      ]);
+      setIsStreaming(true);
+      await runStream(newContent, history);
+    },
+    [isStreaming, model, currentKeys.key, messages, runStream],
+  );
+
   const clearMessages = useCallback(() => {
     setMessages([]);
     setInput("");
@@ -516,12 +573,162 @@ function useAIChat(
     setModel,
     provider,
     sendMessage,
+    stopStreaming,
+    resendFromIndex,
     clearMessages,
     allProviderKeys,
     tavilyKeys,
   };
 }
 
+interface MessagePartProps {
+  msg: ChatMessage;
+  index: number;
+  isLast: boolean;
+  isStreaming: boolean;
+  editingIndex: number | null;
+  editingValue: string;
+  setEditingIndex: (i: number | null) => void;
+  setEditingValue: (v: string) => void;
+  onResend: (index: number, content: string) => void;
+  onRetry: () => void;
+}
+
+function MessagePart({
+  msg,
+  index,
+  isLast,
+  isStreaming,
+  editingIndex,
+  editingValue,
+  setEditingIndex,
+  setEditingValue,
+  onResend,
+  onRetry,
+}: MessagePartProps) {
+  return (
+    <Message from={msg.role}>
+      {msg.toolCalls?.map((tc) => (
+        <ToolCard
+          key={tc.toolCallId}
+          className="w-full"
+        >
+          <ToolHeader
+            type="dynamic-tool"
+            toolName={tc.toolName}
+            title={tc.title}
+            state={tc.state}
+          />
+          {tc.toolName !== "editTool" && (
+            <ToolContent>
+              <ToolInput input={tc.input} />
+              {tc.state === "output-available" && (
+                <ToolOutput
+                  output={tc.output}
+                  errorText={tc.errorText}
+                />
+              )}
+            </ToolContent>
+          )}
+        </ToolCard>
+      ))}
+      {msg.role === "user" ? (
+        editingIndex === index ? (
+          <div className="flex w-full flex-col gap-1.5">
+            <Textarea
+              className="field-sizing-fixed min-h-16 resize-none text-sm"
+              value={editingValue}
+              autoFocus
+              onChange={(e) => setEditingValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  onResend(index, editingValue);
+                  setEditingIndex(null);
+                } else if (e.key === "Escape") {
+                  setEditingIndex(null);
+                }
+              }}
+            />
+            <div className="flex justify-end gap-1.5">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-7 px-2"
+                onClick={() => setEditingIndex(null)}
+              >
+                <XIcon className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                size="sm"
+                className="h-7 px-2"
+                disabled={!editingValue.trim()}
+                onClick={() => {
+                  onResend(index, editingValue);
+                  setEditingIndex(null);
+                }}
+              >
+                <CheckIcon className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <MessageContent>{msg.content}</MessageContent>
+            {!isStreaming && (
+              <MessageActions>
+                <MessageAction
+                  tooltip="Edit message"
+                  onClick={() => {
+                    setEditingIndex(index);
+                    setEditingValue(msg.content);
+                  }}
+                >
+                  <PencilIcon className="h-3 w-3" />
+                </MessageAction>
+              </MessageActions>
+            )}
+          </>
+        )
+      ) : (
+        <>
+          <MessageContent>
+            {msg.content ? (
+              <MessageResponse>{msg.content}</MessageResponse>
+            ) : (
+              <div className="space-y-1.5 py-0.5">
+                <Shimmer className="text-sm">Generating response...</Shimmer>
+              </div>
+            )}
+          </MessageContent>
+          {msg.content && !isStreaming && isLast && (
+            <MessageActions>
+              <MessageAction
+                tooltip="Retry"
+                onClick={onRetry}
+              >
+                <RefreshCcwIcon className="h-3 w-3" />
+              </MessageAction>
+              <MessageAction
+                tooltip="Copy"
+                onClick={() => navigator.clipboard.writeText(msg.content)}
+              >
+                <CopyIcon className="h-3 w-3" />
+              </MessageAction>
+            </MessageActions>
+          )}
+        </>
+      )}
+      {msg.toolApplied && (
+        <div className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+          <CheckIcon className="h-3 w-3" />
+          <span>Applied</span>
+        </div>
+      )}
+    </Message>
+  );
+}
+
 interface AIChatPanelProps {
   tool: Tool;
   onApply: (tool: Tool) => void;
@@ -550,6 +757,8 @@ export function AIChatPanel({
   );
   const [modelOpen, setModelOpen] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState<AIProvider>(chat.provider);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editingValue, setEditingValue] = useState("");
 
   const currentGroup = MODEL_GROUPS.find((g) => g.provider === chat.provider);
   const currentModelLabel =
@@ -703,60 +912,19 @@ export function AIChatPanel({
             </ConversationEmptyState>
           ) : (
             chat.messages.map((msg, i) => (
-              <div
+              <MessagePart
                 key={i}
-                className={cn(
-                  "flex flex-col gap-1",
-                  msg.role === "user" ? "items-end" : "items-start",
-                )}
-              >
-                {msg.toolCalls?.map((tc) => (
-                  <ToolCard
-                    key={tc.toolCallId}
-                    className="w-full"
-                  >
-                    <ToolHeader
-                      type="dynamic-tool"
-                      toolName={tc.toolName}
-                      title={tc.title}
-                      state={tc.state}
-                    />
-                    {tc.toolName !== "editTool" && (
-                      <ToolContent>
-                        <ToolInput input={tc.input} />
-                        {tc.state === "output-available" && (
-                          <ToolOutput
-                            output={tc.output}
-                            errorText={tc.errorText}
-                          />
-                        )}
-                      </ToolContent>
-                    )}
-                  </ToolCard>
-                ))}
-                <div
-                  className={cn(
-                    "max-w-[85%] rounded-lg px-3 py-2 text-sm wrap-break-word whitespace-pre-wrap",
-                    msg.role === "user"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-muted text-foreground",
-                  )}
-                >
-                  {msg.content ? (
-                    msg.content
-                  ) : (
-                    <div className="space-y-1.5 py-0.5">
-                      <Shimmer className="text-sm">Generating response...</Shimmer>
-                    </div>
-                  )}
-                </div>
-                {msg.toolApplied && (
-                  <div className="mt-1 flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
-                    <CheckIcon className="h-3 w-3" />
-                    <span>Applied</span>
-                  </div>
-                )}
-              </div>
+                msg={msg}
+                index={i}
+                isLast={i === chat.messages.length - 1}
+                isStreaming={chat.isStreaming}
+                editingIndex={editingIndex}
+                editingValue={editingValue}
+                setEditingIndex={setEditingIndex}
+                setEditingValue={setEditingValue}
+                onResend={chat.resendFromIndex}
+                onRetry={() => chat.resendFromIndex(i - 1, chat.messages[i - 1]?.content ?? "")}
+              />
             ))
           )}
         </ConversationContent>
@@ -780,16 +948,16 @@ export function AIChatPanel({
           <Button
             size="sm"
             disabled={
-              chat.isStreaming ||
-              !chat.input.trim() ||
-              !chat.allProviderKeys[chat.provider as Exclude<AIProvider, "tavily">]?.key ||
-              !chat.model
+              !chat.isStreaming &&
+              (!chat.input.trim() ||
+                !chat.allProviderKeys[chat.provider as Exclude<AIProvider, "tavily">]?.key ||
+                !chat.model)
             }
-            onClick={() => chat.sendMessage()}
+            onClick={() => (chat.isStreaming ? chat.stopStreaming() : chat.sendMessage())}
             className="self-end"
           >
             {chat.isStreaming ? (
-              <Loader2Icon className="h-4 w-4 animate-spin" />
+              <SquareIcon className="h-4 w-4" />
             ) : (
               <SendIcon className="h-4 w-4" />
             )}
diff --git a/src/components/tool-editor-ui/prompt.ts b/src/components/tool-editor-ui/prompt.ts
index ad88098..0610fd8 100644
--- a/src/components/tool-editor-ui/prompt.ts
+++ b/src/components/tool-editor-ui/prompt.ts
@@ -1,121 +1,92 @@
-export const generateSystemPrompt = (helpText: string, jsonSchema: string) => {
-  return `You are **CLIHelpParser**, an expert AI assistant specialized in understanding and converting arbitrary command‑line help text into a precise, schema‑compliant JSON representation suitable for driving a visual command‑builder.
+export const generatePrompt = (
+  jsonSchema: string,
+  options?: {
+    helpText?: string;
+    currentToolJson?: string;
+    context?: { selectedCommand?: string; selectedParameter?: string };
+  },
+) => {
+  const hasCurrentTool = !!options?.currentToolJson;
+  const hasHelpText = !!options?.helpText;
+
+  const contextBlock =
+    options?.context?.selectedCommand || options?.context?.selectedParameter
+      ? `\n<current_context>\n${options.context.selectedCommand ? `Selected command: ${options.context.selectedCommand}` : ""}${options.context.selectedParameter ? `\nSelected parameter: ${options.context.selectedParameter}` : ""}\n</current_context>\n`
+      : "";
+
+  const currentToolBlock = hasCurrentTool
+    ? `\n<current_tool>\n${options?.currentToolJson}\n</current_tool>\n`
+    : "";
+
+  const helpTextBlock = hasHelpText ? `\n<help_text>\n${options?.helpText}\n</help_text>\n` : "";
+
+  return `You are **CommandlyAssistant**, an expert AI assistant for building, editing, and parsing CLI tool definitions in the Commandly visual command-builder.
 
-<system_preamble>  
-You will be given the raw “help” output (e.g. from \`tool--help\` or \`tool help\` of any CLI tool. Your sole task is to parse every command, subcommand, positional argument, flag, and option into a JSON object exactly matching the prescribed schema. Do not explain, apologize, or add any fields beyond the schema. If you encounter ambiguity, choose the interpretation that best preserves hierarchy and explicit notation in the original text.  
-</system_preamble>  
+${hasCurrentTool ? "<system_context>\nYou are helping the user modify an existing CLI tool definition.\n</system_context>" : ""}
+${hasHelpText ? "<system_context>\nYou are parsing raw CLI help text and converting it to a structured JSON definition.\n</system_context>" : ""}
 
 <json_schema>
 ${jsonSchema}
 </json_schema>
-
+${currentToolBlock}
+${contextBlock}
 <parameter_definitions>
-
-1. **flag** – Boolean switches that take no value (\`--verbose\`, \` - h\`).
-    
-2. **option** – Key‑value pairs (\`--name value\`, \` - n=value\`). Always require a value.
-    
-3. **argument** – Positional items without a leading dash (e.g. \`clean\`, \`compile\`).  
-    </parameter_definitions>
-    
+1. **flag** - Boolean switches that take no value (\`--verbose\`, \`-h\`).
+2. **option** - Key-value pairs (\`--name value\`, \`-n=value\`). Always require a value.
+3. **argument** - Positional items without a leading dash (e.g. \`clean\`, \`compile\`).
+</parameter_definitions>
 
 <parsing_rules>
-
-1. **Hierarchy Preservation:** Maintain parent→child relationships. Subcommands nest under “subcommands” arrays.
-    
-2. **Exact Naming:** Keep all prefixes ('-', '--') on flags/options. Don’t normalize or strip.
-    
-3. **Aliases:** If a line lists multiple forms (e.g. \`- v, --verbose\`), split into \`aliases\`. The primary \`name\` is the first listed.
-    
+1. **Hierarchy Preservation:** Maintain parent→child relationships. Subcommands nest under "subcommands" arrays.
+2. **Exact Naming:** Keep all prefixes ('-', '--') on flags/options. Don't normalize or strip.
+3. **Aliases:** If a line lists multiple forms (e.g. \`-v, --verbose\`), split into \`aliases\`. The primary \`name\` is the first listed.
 4. **Data Types:**
-    
-    - If a parameter’s help text says \`<string>\`, \`<int>\`, or \`number\`, map to \`"string"\` or \`"number"\`.
-        
-    - If \`[]\` appears (e.g. \`--items <string[]>\`), datatype is \`"array"\`.
-        
-    - If unspecified and it takes a value, default to \`"string"\`.
-        
-    - Flags default to \`"boolean"\`.
-        
+   - If a parameter's help text says \`<string>\`, \`<int>\`, or \`number\`, map to \`"string"\` or \`"number"\`.
+   - If \`[]\` appears (e.g. \`--items <string[]>\`), datatype is \`"array"\`.
+   - If unspecified and it takes a value, default to \`"string"\`.
+   - Flags default to \`"boolean"\`.
 5. **Required vs Optional:**
-
-    - If notation uses \`[]\`, mark \`required: false\`, otherwise \`true\`.
-        
+   - If notation uses \`[]\`, mark \`required: false\`, otherwise \`true\`.
 6. **Descriptions:** Use the full sentence or phrase that follows the parameter declaration. Trim leading/trailing whitespace.
-    
 7. **Uniqueness:** Ensure every \`key\` is unique.
-    
-8. **Count Check:** If the help text claims “Options: 5”, ensure exactly five parameter entries.
-    
-9. **No Extras:** Do **not** include any fields not in the schema or deviate from JSON (no comments, no trailing commas). 
-    
-10. IMPORTANT: There needs to be at least one command in the commands list. If parsing help text does not results in any command, then create a command with same name as tool name.
-11. Name property of parameter should be user-friendly.  Example : longFlag "--help" should be converted to "Help"
-12. Always output formatted json, with proper indentation.
-13. If there is only one command, then do not mark all parameters as global.
-14. DO NOT add backticks or any other formatting to the output. The output should be pure JSON without any additional formatting.
-15. Make sure all the ids are unique and are in the format of GUIDv7.
-16. All description should be in sentence case.
-
-17. IMPORTANT: Add Tags to relevant parameters. You can add multiple tags but make sure, they are relevant to the parameter. You can follow the following guidelines for tags:
-    - If the parameter related to taking input of targets like domain, urls, add tag "target" and "non-configurable".
-    - If the parameter modifies the output in anyway then add "output". If the parameter configures output file then add "output-file", if the parameter configures output directory then add "output-directory".
+8. **Count Check:** If the help text claims "Options: 5", ensure exactly five parameter entries.
+9. **No Extras:** Do not include any fields not in the schema or deviate from JSON (no comments, no trailing commas).
+10. IMPORTANT: There needs to be at least one command in the commands list. If parsing help text does not result in any command, then create a command with same name as tool name.
+11. **User-Friendly Names:** Name property should be user-friendly. Example: longFlag "--help" should be converted to "Help".
+12. **Formatting:** Always output formatted JSON with proper indentation.
+13. **Single Command:** If there is only one command, then do not mark all parameters as global.
+14. **JSON Output:** Do NOT add backticks or any other formatting to JSON output. The output should be pure JSON without any additional formatting.
+15. **Unique IDs:** Make sure all keys are unique.
+16. **Sentence Case:** All descriptions should be in sentence case.
+17. **Tags:** Add tags to relevant parameters. You can add multiple tags but make sure they are relevant. Follow these guidelines:
+    - If the parameter is related to taking input of targets like domain, URLs, add tags "target" and "non-configurable".
+    - If the parameter modifies the output in any way then add "output". If it configures output file then add "output-file", if output directory then add "output-directory".
     - If the parameter is about disabling update check, or enabling/disabling color in output or verbose output or silent output or adding stats, add tag "non-configurable".
     - If the parameter is used to pass configuration files like provider config or configuration file, add tag "configuration-file".
-
-18. IMPORTANT: If the parameter is not global then make sure to add commandId to the parameter object. If the parameter is global then do not add commandId to the parameter object.
-19. If short flag is not present then do not add it to the parameter object.
+18. **Command Association:** If the parameter is not global then make sure to add commandKey to the parameter object. If the parameter is global then do not add commandKey to the parameter object.
+19. **Short Flags:** If short flag is not present then do not add it to the parameter object.
 </parsing_rules>
 
-<output_instruction>  
-Produce **only** the final JSON object. It must be syntactically valid, conform exactly to the schema, and nothing else.  
-</output_instruction>
-    
-<help_text>
-${helpText}
-</help_text>
-
-`;
-};
-
-export const generateChatSystemPrompt = (
-  currentToolJson: string,
-  jsonSchema: string,
-  context?: { selectedCommand?: string; selectedParameter?: string },
-) => {
-  const contextBlock =
-    context?.selectedCommand || context?.selectedParameter
-      ? `\n<current_context>\n${context.selectedCommand ? `Selected command: ${context.selectedCommand}` : ""}${context.selectedParameter ? `\nSelected parameter: ${context.selectedParameter}` : ""}\n</current_context>\n`
-      : "";
-
-  return `You are **CommandlyAssistant**, an expert AI assistant for building and editing CLI tool definitions in the Commandly visual command-builder.
-
-<current_tool>
-${currentToolJson}
-</current_tool>
-
-<json_schema>
-${jsonSchema}
-</json_schema>
-${contextBlock}
 <capabilities>
 You can:
-1. Modify the current tool definition by calling the \`editTool\` function with the complete updated tool object (e.g. "add a --verbose flag", "rename the main command to 'run'", "make --output required").
-2. Parse CLI help text that the user pastes and produce a full Tool JSON from scratch via \`editTool\`.
-3. Answer questions about the current tool structure.
-4. Search the web for CLI documentation using the webSearch tool when you need up-to-date information.
+1. Parse CLI help text and produce a complete tool JSON from scratch.
+2. Modify an existing tool definition by calling the \`editTool\` function with the complete updated tool object.
+3. Answer questions about CLI tool structure.
+4. Search the web for CLI documentation when needed.
 </capabilities>
 
 <output_rules>
 - To apply changes to the tool, call the \`editTool\` function with the complete updated tool object. Do NOT output JSON in a code fence for modifications.
-- Make only the changes the user requested. Preserve all other fields, IDs, keys, and structure exactly as-is — including validations, exclusionGroups, dependencies, enumValues, tags, and any other existing data.
-- Do not add empty arrays or objects for optional properties that have no values (e.g. do not include \`"validations": []\`, \`"exclusionGroups": []\`, \`"tags": []\`, \`"dependencies": []\`, or \`"enumValues": []\` unless the user explicitly asked to add them or they already exist in the tool).
+- When modifying an existing tool, make only the requested changes. Preserve all other fields, keys, and structure exactly as-is — including validations, exclusionGroups, dependencies, enumValues, tags, and any other existing data.
+- Do not add empty arrays or objects for optional properties that have no values (e.g. do not include \`"validations": []\`, \`"exclusionGroups": []\`, \`"tags": []\`, \`"dependencies": []\`, or \`"enumValues": []\` unless explicitly requested or they already exist).
 - After calling editTool, write a brief plain-text explanation of what was changed.
 - If the user asks a question without requesting changes, answer in plain text without calling any tool.
 - All parameter keys must be unique values.
-- All descriptions in sentence case.
+- All descriptions should be in sentence case.
 - If a parameter is not global, it must have a commandKey. Global parameters must not have a commandKey.
-- Do not include fields not present in the schema.
+- Do not add fields not present in the schema.
+- When parsing help text: Produce only the final JSON object. It must be syntactically valid, conform exactly to the schema, and nothing else.
 </output_rules>
+${helpTextBlock}
 `;
 };
diff --git a/src/components/tool-editor-ui/tool-card.tsx b/src/components/tool-editor-ui/tool-card.tsx
index 719050d..ab92953 100644
--- a/src/components/tool-editor-ui/tool-card.tsx
+++ b/src/components/tool-editor-ui/tool-card.tsx
@@ -81,7 +81,7 @@ export function ToolCard({
               <Link
                 to="/tools/$toolName/edit"
                 params={{ toolName: tool.name! }}
-                search={{ isNew: false }}
+                search={{ isNew: false, isLocal: isLocal }}
               >
                 <Edit2Icon className="size-4" />
               </Link>
diff --git a/src/routes/tools/$toolName/edit.tsx b/src/routes/tools/$toolName/edit.tsx
index ee30261..a514425 100644
--- a/src/routes/tools/$toolName/edit.tsx
+++ b/src/routes/tools/$toolName/edit.tsx
@@ -15,9 +15,11 @@ export const Route = createFileRoute("/tools/$toolName/edit")({
   component: RouteComponent,
   validateSearch: (search) => ({
     isNew: search.isNew === true,
+    isLocal: search.isLocal === true,
   }),
-  loaderDeps: ({ search: { isNew } }) => ({
+  loaderDeps: ({ search: { isNew, isLocal } }) => ({
     isNew,
+    isLocal,
   }),
   loader: async ({ params: { toolName }, deps: { isNew } }) => {
     if (isNew) {
@@ -40,7 +42,7 @@ export const Route = createFileRoute("/tools/$toolName/edit")({
 
 function RouteComponent() {
   const tool = Route.useLoaderData();
-  const { isNew } = Route.useSearch();
+  const { isNew, isLocal } = Route.useSearch();
 
   const [savedCommands, setSavedCommands] = useState<SavedCommand[]>(() =>
     tool ? getSavedCommandsFromStorage(tool.name) : [],
@@ -74,7 +76,7 @@ function RouteComponent() {
     <div className="mt-16">
       <ToolEditor
         tool={tool!}
-        isNewTool={!!isNew}
+        isNewTool={!!isNew || !!isLocal}
         onSave={(tool) => {
           localStorage.setItem(`tool-${tool.name}`, JSON.stringify(tool));
         }}
diff --git a/src/routes/tools/index.tsx b/src/routes/tools/index.tsx
index b4bbe57..705426c 100644
--- a/src/routes/tools/index.tsx
+++ b/src/routes/tools/index.tsx
@@ -95,7 +95,7 @@ function RouteComponent() {
     navigation({
       to: "/tools/$toolName/edit",
       params: { toolName: "new" },
-      search: { isNew: true },
+      search: { isNew: true, isLocal: true },
     });
   };
 

From d25956b4f0d9f97d67a161bfba64d5f158c8168d Mon Sep 17 00:00:00 2001
From: divyeshio <79130336+divyeshio@users.noreply.github.com>
Date: Fri, 13 Mar 2026 00:53:32 +0530
Subject: [PATCH 3/4] feat: implement cleanup functions for tool and parameters
 to enhance data integrity

---
 registry/commandly/lib/utils/commandly.ts     | 39 +++++++++++++++++++
 .../tool-editor/tool-editor.context.tsx       |  5 ++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/registry/commandly/lib/utils/commandly.ts b/registry/commandly/lib/utils/commandly.ts
index d9c19be..447832f 100644
--- a/registry/commandly/lib/utils/commandly.ts
+++ b/registry/commandly/lib/utils/commandly.ts
@@ -348,3 +348,42 @@ export function generateHashCode(s: string): string {
 
   return h.toString();
 }
+
+const isEmpty = (value: unknown[] | Record<string, unknown> | null | undefined): boolean => {
+  if (value == null) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  return Object.keys(value).length === 0;
+};
+
+const cleanParameter = (param: Parameter): Parameter => {
+  const cleaned = { ...param };
+
+  if (isEmpty(cleaned.enumValues)) delete cleaned.enumValues;
+  if (isEmpty(cleaned.validations)) delete cleaned.validations;
+  if (isEmpty(cleaned.dependencies)) delete cleaned.dependencies;
+
+  if (cleaned.metadata) {
+    const meta = { ...cleaned.metadata };
+    if (isEmpty(meta.tags)) delete meta.tags;
+    if (isEmpty(meta as Record<string, unknown>)) {
+      delete cleaned.metadata;
+    } else {
+      cleaned.metadata = meta;
+    }
+  }
+
+  return cleaned;
+};
+
+export const cleanupTool = (tool: Tool): Tool => {
+  const cleaned = { ...tool };
+
+  if (isEmpty(cleaned.tags)) delete cleaned.tags;
+  if (isEmpty(cleaned.exclusionGroups)) delete cleaned.exclusionGroups;
+  if (isEmpty(cleaned.metadata as Record<string, unknown> | null | undefined))
+    delete cleaned.metadata;
+
+  cleaned.parameters = cleaned.parameters.map(cleanParameter);
+
+  return cleaned;
+};
diff --git a/registry/commandly/tool-editor/tool-editor.context.tsx b/registry/commandly/tool-editor/tool-editor.context.tsx
index 5266e13..6d72f15 100644
--- a/registry/commandly/tool-editor/tool-editor.context.tsx
+++ b/registry/commandly/tool-editor/tool-editor.context.tsx
@@ -6,6 +6,7 @@ import {
   ParameterValue,
 } from "@/registry/commandly/lib/types/commandly";
 import {
+  cleanupTool,
   createNewCommand,
   defaultTool,
   getAllSubcommands,
@@ -74,10 +75,10 @@ function getDefaultState(tool: Tool): ToolBuilderState {
 function toolBuilderReducer(state: ToolBuilderState, action: Action): ToolBuilderState {
   switch (action.type) {
     case "INITIALIZE_TOOL":
-      return getDefaultState(action.payload);
+      return getDefaultState(cleanupTool(action.payload));
 
     case "UPDATE_TOOL":
-      return { ...state, tool: { ...state.tool, ...action.payload } };
+      return { ...state, tool: cleanupTool({ ...state.tool, ...action.payload }) };
 
     case "ADD_SUBCOMMAND":
       return {

From 4a131508e2fb3de98b9098adf11eaeaab8754886 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Mar 2026 04:32:21 +0000
Subject: [PATCH 4/4] chore: update generated specifications and registry

---
 public/r/generated-command.json  |  8 ++++----
 public/r/json-output.json        |  4 ++--
 public/r/tool-editor.json        | 22 +++++++++++-----------
 public/r/tool-renderer.json      |  2 +-
 public/r/ui.json                 | 10 +++++-----
 public/specification/nested.json |  3 +++
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/public/r/generated-command.json b/public/r/generated-command.json
index e902808..710fe37 100644
--- a/public/r/generated-command.json
+++ b/public/r/generated-command.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/commandly/generated-command.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand?.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    if (!selectedCommand) return;\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/generated-command.tsx"
     },
@@ -25,17 +25,17 @@
     },
     {
       "path": "registry/commandly/lib/types/commandly-nested.ts",
-      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
+      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  $schema?: string;\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly.ts",
-      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n",
+      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/flat.json\",\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    url: tool.url,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n\nconst isEmpty = (value: unknown[] | Record<string, unknown> | null | undefined): boolean => {\n  if (value == null) return true;\n  if (Array.isArray(value)) return value.length === 0;\n  return Object.keys(value).length === 0;\n};\n\nconst cleanParameter = (param: Parameter): Parameter => {\n  const cleaned = { ...param };\n\n  if (isEmpty(cleaned.enumValues)) delete cleaned.enumValues;\n  if (isEmpty(cleaned.validations)) delete cleaned.validations;\n  if (isEmpty(cleaned.dependencies)) delete cleaned.dependencies;\n\n  if (cleaned.metadata) {\n    const meta = { ...cleaned.metadata };\n    if (isEmpty(meta.tags)) delete meta.tags;\n    if (isEmpty(meta as Record<string, unknown>)) {\n      delete cleaned.metadata;\n    } else {\n      cleaned.metadata = meta;\n    }\n  }\n\n  return cleaned;\n};\n\nexport const cleanupTool = (tool: Tool): Tool => {\n  const cleaned = { ...tool };\n\n  if (isEmpty(cleaned.tags)) delete cleaned.tags;\n  if (isEmpty(cleaned.exclusionGroups)) delete cleaned.exclusionGroups;\n  if (isEmpty(cleaned.metadata as Record<string, unknown> | null | undefined))\n    delete cleaned.metadata;\n\n  cleaned.parameters = cleaned.parameters.map(cleanParameter);\n\n  return cleaned;\n};\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly-nested.ts",
-      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
+      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/nested.json\",\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
       "type": "registry:lib"
     }
   ],
diff --git a/public/r/json-output.json b/public/r/json-output.json
index 30a4fdb..7091b4a 100644
--- a/public/r/json-output.json
+++ b/public/r/json-output.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/commandly/json-output.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n}\n\nexport function JsonOutput({ tool }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <CardAction\n          className=\"rounded-md\"\n          onClick={() => {\n            navigator.clipboard.writeText(jsonString!);\n            toast(\"Copied!\");\n          }}\n        >\n          <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <ScrollArea\n          className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n          type=\"hover\"\n        >\n          <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n            {jsonString}\n          </pre>\n          <ScrollBar orientation=\"vertical\" />\n          <ScrollBar orientation=\"horizontal\" />\n        </ScrollArea>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon, Edit2Icon, XIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n  onApply?: (tool: Tool) => void;\n}\n\nexport function JsonOutput({ tool, onApply }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(\"\");\n\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  const handleEditToggle = () => {\n    setEditValue(jsonString ?? \"\");\n    setIsEditing(true);\n  };\n\n  const handleApply = () => {\n    try {\n      const parsed = JSON.parse(editValue) as Tool;\n      onApply!(parsed);\n      setIsEditing(false);\n    } catch {\n      toast.error(\"Invalid JSON\", { description: \"Please fix the JSON before applying.\" });\n    }\n  };\n\n  const handleCancel = () => {\n    setIsEditing(false);\n    setEditValue(\"\");\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <div className=\"flex gap-3\">\n          {onApply && !isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleEditToggle}\n            >\n              <Edit2Icon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          {onApply && isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleCancel}\n            >\n              <XIcon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          <CardAction\n            className=\"rounded-md\"\n            onClick={() => {\n              navigator.clipboard.writeText(jsonString!);\n              toast(\"Copied!\");\n            }}\n          >\n            <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n          </CardAction>\n        </div>\n      </CardHeader>\n      <CardContent>\n        {isEditing ? (\n          <div className=\"flex flex-col gap-2\">\n            <ScrollArea\n              className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-360px)]\"\n              type=\"hover\"\n            >\n              <Textarea\n                className=\"min-h-[calc(100vh-400px)] font-mono text-sm\"\n                value={editValue}\n                onChange={(e) => setEditValue(e.target.value)}\n                spellCheck={false}\n              />\n              <ScrollBar orientation=\"vertical\" />\n              <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n            <div className=\"flex justify-end gap-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={handleCancel}\n              >\n                Cancel\n              </Button>\n              <Button\n                size=\"sm\"\n                onClick={handleApply}\n              >\n                Apply\n              </Button>\n            </div>\n          </div>\n        ) : (\n          <ScrollArea\n            className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n            type=\"hover\"\n          >\n            <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n              {jsonString}\n            </pre>\n            <ScrollBar orientation=\"vertical\" />\n            <ScrollBar orientation=\"horizontal\" />\n          </ScrollArea>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/json-output.tsx"
     },
@@ -24,7 +24,7 @@
     },
     {
       "path": "registry/commandly/lib/types/commandly-nested.ts",
-      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
+      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  $schema?: string;\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
       "type": "registry:lib"
     }
   ],
diff --git a/public/r/tool-editor.json b/public/r/tool-editor.json
index 8b97eca..6e6d3f4 100644
--- a/public/r/tool-editor.json
+++ b/public/r/tool-editor.json
@@ -24,31 +24,31 @@
   "files": [
     {
       "path": "registry/commandly/tool-editor/tool-editor.tsx",
-      "content": "import { ExclusionGroupsDialog } from \"../tool-editor/dialogs/exclusion-groups-dialog\";\nimport { ParameterDetailsDialog } from \"../tool-editor/dialogs/parameter-details-dialog\";\nimport { ToolDetailsDialog } from \"../tool-editor/dialogs/tool-details-dialog\";\nimport { CommandTree } from \"./command-tree\";\nimport { SavedCommandsDialog } from \"./dialogs/saved-commands-dialog\";\nimport { ParameterList } from \"./parameter-list\";\nimport { PreviewTabs } from \"./preview-tabs\";\nimport { ToolBuilderProvider, useToolBuilder } from \"./tool-editor.context\";\nimport { Button } from \"@/components/ui/button\";\nimport { SavedCommand, Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { SaveIcon, Edit2Icon, LayersIcon, GitPullRequestIcon } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\nconst GITHUB_REPO = \"divyeshio/commandly\";\nconst MAX_URL_JSON_LENGTH = 4000;\n\ninterface ToolEditorProps {\n  tool: Tool;\n  onSave?: (tool: Tool) => void;\n  isNewTool?: boolean;\n  savedCommands?: SavedCommand[];\n  onSaveCommand?: (command: string) => void;\n  onDeleteSavedCommand?: (commandKey: string) => void;\n}\n\nexport default function ToolEditor({\n  tool: toolToEdit,\n  onSave,\n  isNewTool = false,\n  savedCommands,\n  onSaveCommand,\n  onDeleteSavedCommand,\n}: ToolEditorProps) {\n  return (\n    <ToolBuilderProvider tool={toolToEdit}>\n      <ToolEditorContent\n        onSave={onSave}\n        isNewTool={isNewTool}\n        savedCommands={savedCommands ?? []}\n        onSaveCommand={onSaveCommand}\n        onDeleteSavedCommand={onDeleteSavedCommand}\n      />\n    </ToolBuilderProvider>\n  );\n}\n\ninterface ToolEditorContentProps {\n  onSave?: (tool: Tool) => void;\n  isNewTool?: boolean;\n  savedCommands: SavedCommand[];\n  onSaveCommand?: (command: string) => void;\n  onDeleteSavedCommand?: (commandKey: string) => void;\n}\n\nfunction ToolEditorContent({\n  onSave,\n  isNewTool = false,\n  savedCommands,\n  onSaveCommand,\n  onDeleteSavedCommand,\n}: ToolEditorContentProps) {\n  const { tool, setDialogOpen } = useToolBuilder();\n\n  const handleContribute = async () => {\n    const json = JSON.stringify(tool, null, 2);\n    const filePath = `public/tools-collection/${tool.name}.json`;\n\n    if (isNewTool) {\n      const message = encodeURIComponent(`feat(tools): add ${tool.name}`);\n      const filename = encodeURIComponent(filePath);\n      if (json.length <= MAX_URL_JSON_LENGTH) {\n        window.open(\n          `https://github.com/${GITHUB_REPO}/new/main?filename=${filename}&value=${encodeURIComponent(json)}&message=${message}`,\n          \"_blank\",\n        );\n      } else {\n        await navigator.clipboard.writeText(json);\n        toast(\"JSON copied to clipboard\", {\n          description: \"Paste it into the file editor that will open.\",\n        });\n        window.open(\n          `https://github.com/${GITHUB_REPO}/new/main?filename=${filename}&message=${message}`,\n          \"_blank\",\n        );\n      }\n    } else {\n      await navigator.clipboard.writeText(json);\n      toast(\"JSON copied to clipboard\", {\n        description: \"Paste it into the file editor that will open to create a PR.\",\n      });\n      window.open(`https://github.com/${GITHUB_REPO}/edit/main/${filePath}`, \"_blank\");\n    }\n  };\n\n  return (\n    <div className=\"flex bg-background\">\n      <div className=\"flex w-72 flex-col overflow-hidden border-r border-muted\">\n        <div className=\"flex flex-col justify-center gap-2 border-b border-muted p-2\">\n          <p className=\"p-3\">Commands</p>\n        </div>\n        <CommandTree />\n      </div>\n\n      <div className=\"flex flex-1 flex-col\">\n        <div className=\"border-b border-muted p-4\">\n          <div className=\"flex justify-between\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <span\n                className=\"text-lg font-medium\"\n                style={{\n                  viewTransitionName: `tool-card-title-${tool.name}`,\n                }}\n              >\n                {tool.displayName ? `${tool.displayName} (${tool.name})` : `${tool.name}`}\n              </span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 w-6 p-0\"\n                onClick={() => setDialogOpen(\"editTool\", true)}\n              >\n                <Edit2Icon className=\"h-4 w-4\" />\n              </Button>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {onSave && (\n                <Button\n                  variant=\"default\"\n                  size=\"sm\"\n                  onClick={() => {\n                    onSave(tool);\n                    toast(\"Tool saved successfully!\");\n                  }}\n                >\n                  <SaveIcon className=\"mr-2 h-4 w-4\" />\n                  Save\n                </Button>\n              )}\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setDialogOpen(\"savedCommands\", true)}\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Saved Commands\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setDialogOpen(\"exclusionGroups\", true)}\n              >\n                <LayersIcon className=\"mr-2 h-4 w-4\" />\n                Exclusion Groups\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={handleContribute}\n              >\n                <GitPullRequestIcon className=\"mr-2 h-4 w-4\" />\n                Contribute\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex content-between gap-4 p-4\">\n          <div className=\"flex min-w-80 flex-2/5 flex-col gap-4\">\n            <ParameterList\n              title=\"Global Parameters\"\n              isGlobal={true}\n            />\n            <ParameterList\n              title=\"Command Parameters\"\n              isGlobal={false}\n            />\n          </div>\n          <div className=\"max-w-3xl flex-3/5\">\n            <PreviewTabs onSaveCommand={onSaveCommand} />\n          </div>\n        </div>\n      </div>\n\n      <ParameterDetailsDialog />\n      <ToolDetailsDialog />\n      <SavedCommandsDialog\n        savedCommands={savedCommands}\n        onDeleteCommand={onDeleteSavedCommand ?? (() => {})}\n      />\n      <ExclusionGroupsDialog />\n    </div>\n  );\n}\n",
+      "content": "import { ExclusionGroupsDialog } from \"../tool-editor/dialogs/exclusion-groups-dialog\";\nimport { ParameterDetailsDialog } from \"../tool-editor/dialogs/parameter-details-dialog\";\nimport { ToolDetailsDialog } from \"../tool-editor/dialogs/tool-details-dialog\";\nimport { AIChatPanel } from \"./ai-chat\";\nimport { CommandTree } from \"./command-tree\";\nimport { SavedCommandsDialog } from \"./dialogs/saved-commands-dialog\";\nimport { ParameterList } from \"./parameter-list\";\nimport { PreviewTabs } from \"./preview-tabs\";\nimport { ToolBuilderProvider, useToolBuilder } from \"./tool-editor.context\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { SavedCommand, Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { SaveIcon, Edit2Icon, LayersIcon, GitPullRequestIcon, SparklesIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst GITHUB_REPO = \"divyeshio/commandly\";\nconst MAX_URL_JSON_LENGTH = 4000;\n\ninterface ToolEditorProps {\n  tool: Tool;\n  onSave?: (tool: Tool) => void;\n  isNewTool?: boolean;\n  savedCommands?: SavedCommand[];\n  onSaveCommand?: (command: string) => void;\n  onDeleteSavedCommand?: (commandKey: string) => void;\n}\n\nexport default function ToolEditor({\n  tool: toolToEdit,\n  onSave,\n  isNewTool = false,\n  savedCommands,\n  onSaveCommand,\n  onDeleteSavedCommand,\n}: ToolEditorProps) {\n  return (\n    <ToolBuilderProvider tool={toolToEdit}>\n      <ToolEditorContent\n        onSave={onSave}\n        isNewTool={isNewTool}\n        savedCommands={savedCommands ?? []}\n        onSaveCommand={onSaveCommand}\n        onDeleteSavedCommand={onDeleteSavedCommand}\n      />\n    </ToolBuilderProvider>\n  );\n}\n\ninterface ToolEditorContentProps {\n  onSave?: (tool: Tool) => void;\n  isNewTool?: boolean;\n  savedCommands: SavedCommand[];\n  onSaveCommand?: (command: string) => void;\n  onDeleteSavedCommand?: (commandKey: string) => void;\n}\n\nfunction ToolEditorContent({\n  onSave,\n  isNewTool = false,\n  savedCommands,\n  onSaveCommand,\n  onDeleteSavedCommand,\n}: ToolEditorContentProps) {\n  const { tool, setDialogOpen, initializeTool } = useToolBuilder();\n  const [chatOpen, setChatOpen] = useState(false);\n  const [streamingTool, setStreamingTool] = useState<Tool | null>(null);\n  const [isAIGenerating, setIsAIGenerating] = useState(false);\n\n  const [initialToolJson, setInitialToolJson] = useState(() => JSON.stringify(tool));\n  const isDirty = JSON.stringify(tool) !== initialToolJson;\n  const isValid = tool.name.trim() !== \"\" && tool.displayName.trim() !== \"\";\n\n  const handleContribute = async () => {\n    const json = JSON.stringify(tool, null, 2);\n    const filePath = `public/tools-collection/${tool.name}.json`;\n\n    if (isNewTool) {\n      const message = encodeURIComponent(`feat(tools): add ${tool.name}`);\n      const filename = encodeURIComponent(filePath);\n      if (json.length <= MAX_URL_JSON_LENGTH) {\n        window.open(\n          `https://github.com/${GITHUB_REPO}/new/main?filename=${filename}&value=${encodeURIComponent(json)}&message=${message}`,\n          \"_blank\",\n        );\n      } else {\n        await navigator.clipboard.writeText(json);\n        toast(\"JSON copied to clipboard\", {\n          description: \"Paste it into the file editor that will open.\",\n        });\n        window.open(\n          `https://github.com/${GITHUB_REPO}/new/main?filename=${filename}&message=${message}`,\n          \"_blank\",\n        );\n      }\n    } else {\n      await navigator.clipboard.writeText(json);\n      toast(\"JSON copied to clipboard\", {\n        description: \"Paste it into the file editor that will open to create a PR.\",\n      });\n      window.open(`https://github.com/${GITHUB_REPO}/edit/main/${filePath}`, \"_blank\");\n    }\n  };\n\n  return (\n    <div className=\"flex h-[calc(100svh-4rem)] bg-background\">\n      <div className=\"flex h-full w-72 flex-col overflow-hidden\">\n        <div className=\"flex flex-col justify-center gap-2 border-t border-r border-b border-muted p-1\">\n          <p className=\"p-2\">Commands</p>\n        </div>\n        <CommandTree />\n      </div>\n\n      <div className=\"flex h-full flex-1 flex-col overflow-hidden\">\n        <div className=\"border-t border-b border-muted p-2\">\n          <div className=\"flex justify-between\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <span\n                className=\"ml-3 text-lg font-medium\"\n                style={{\n                  viewTransitionName: `tool-card-title-${tool.name}`,\n                }}\n              >\n                {tool.displayName ? `${tool.displayName} (${tool.name})` : `${tool.name}`}\n              </span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 w-6 p-0\"\n                onClick={() => setDialogOpen(\"editTool\", true)}\n              >\n                <Edit2Icon className=\"h-4 w-4\" />\n              </Button>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {onSave && (\n                <>\n                  {isDirty && !isValid && (\n                    <span className=\"text-xs text-destructive\">\n                      Name and display name are required\n                    </span>\n                  )}\n                  <Button\n                    variant=\"default\"\n                    size=\"sm\"\n                    disabled={!isDirty || !isValid}\n                    onClick={() => {\n                      onSave(tool);\n                      setInitialToolJson(JSON.stringify(tool));\n                      toast(\"Tool saved successfully!\");\n                    }}\n                  >\n                    <SaveIcon className=\"mr-2 h-4 w-4\" />\n                    Save\n                  </Button>\n                </>\n              )}\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setDialogOpen(\"savedCommands\", true)}\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Saved Commands\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setDialogOpen(\"exclusionGroups\", true)}\n              >\n                <LayersIcon className=\"mr-2 h-4 w-4\" />\n                Exclusion Groups\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={handleContribute}\n              >\n                <GitPullRequestIcon className=\"mr-2 h-4 w-4\" />\n                Contribute\n              </Button>\n              <Button\n                variant={chatOpen ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => setChatOpen((o) => !o)}\n              >\n                <SparklesIcon className=\"mr-2 h-4 w-4\" />\n                Generate\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex min-h-0 flex-1 overflow-hidden\">\n          <div className=\"flex min-h-0 flex-1 gap-4 overflow-hidden p-4\">\n            <div className=\"flex min-w-80 flex-2/5 flex-col overflow-hidden\">\n              <ScrollArea className=\"h-full\">\n                <div className=\"flex flex-col gap-4 pr-3 pb-4\">\n                  <ParameterList\n                    title=\"Global Parameters\"\n                    isGlobal={true}\n                  />\n                  <ParameterList\n                    title=\"Command Parameters\"\n                    isGlobal={false}\n                  />\n                </div>\n              </ScrollArea>\n            </div>\n            <div className=\"h-full max-w-3xl flex-3/5 overflow-hidden\">\n              <PreviewTabs\n                onSaveCommand={onSaveCommand}\n                streamingTool={streamingTool}\n                isAIGenerating={isAIGenerating}\n              />\n            </div>\n          </div>\n          <AIChatPanel\n            tool={tool}\n            onApply={initializeTool}\n            isOpen={chatOpen}\n            onStreamingTool={setStreamingTool}\n            onGeneratingChange={setIsAIGenerating}\n          />\n        </div>\n      </div>\n\n      <ParameterDetailsDialog />\n      <ToolDetailsDialog />\n      <SavedCommandsDialog\n        savedCommands={savedCommands}\n        onDeleteCommand={onDeleteSavedCommand ?? (() => {})}\n      />\n      <ExclusionGroupsDialog />\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/tool-editor.tsx"
     },
     {
       "path": "registry/commandly/tool-editor/tool-editor.context.tsx",
-      "content": "import {\n  Tool,\n  Command,\n  Parameter,\n  ExclusionGroup,\n  ParameterValue,\n} from \"@/registry/commandly/lib/types/commandly\";\nimport {\n  createNewCommand,\n  defaultTool,\n  getAllSubcommands,\n  slugify,\n} from \"@/registry/commandly/lib/utils/commandly\";\nimport {\n  createContext,\n  useContext,\n  useReducer,\n  useEffect,\n  useMemo,\n  useRef,\n  ReactNode,\n} from \"react\";\nimport { toast } from \"sonner\";\n\nexport interface ToolBuilderState {\n  tool: Tool;\n  selectedCommand: Command;\n  selectedParameter: Parameter | null;\n  editingCommand: Command | null;\n  parameterValues: Record<string, ParameterValue>;\n  dialogs: {\n    parameterDetails: boolean;\n    editTool: boolean;\n    savedCommands: boolean;\n    exclusionGroups: boolean;\n  };\n}\n\ntype DialogKey = \"parameterDetails\" | \"editTool\" | \"savedCommands\" | \"exclusionGroups\";\n\ntype Action =\n  | { type: \"INITIALIZE_TOOL\"; payload: Tool }\n  | { type: \"UPDATE_TOOL\"; payload: Partial<Tool> }\n  | { type: \"ADD_SUBCOMMAND\"; payload: Command }\n  | { type: \"DELETE_COMMAND\"; payload: string }\n  | { type: \"UPDATE_COMMAND\"; payload: { commandKey: string; updates: Partial<Command> } }\n  | { type: \"REMOVE_PARAMETER\"; payload: string }\n  | { type: \"SET_DIALOG_OPEN\"; payload: { dialog: DialogKey; open: boolean } }\n  | { type: \"SET_SELECTED_COMMAND\"; payload: Command }\n  | { type: \"SET_SELECTED_PARAMETER\"; payload: Parameter | null }\n  | { type: \"SET_EDITING_COMMAND\"; payload: Command | null }\n  | { type: \"UPSERT_PARAMETER\"; payload: Parameter }\n  | { type: \"ADD_EXCLUSION_GROUP\"; payload: ExclusionGroup }\n  | { type: \"UPDATE_EXCLUSION_GROUP\"; payload: ExclusionGroup }\n  | { type: \"REMOVE_EXCLUSION_GROUP\"; payload: string }\n  | { type: \"SET_PARAMETER_VALUE\"; payload: { key: string; value: ParameterValue } };\n\nfunction getDefaultState(tool: Tool): ToolBuilderState {\n  return {\n    tool,\n    selectedCommand: tool.commands[0] ?? ({} as Command),\n    selectedParameter: null,\n    editingCommand: null,\n    parameterValues: {},\n    dialogs: {\n      parameterDetails: false,\n      editTool: false,\n      savedCommands: false,\n      exclusionGroups: false,\n    },\n  };\n}\n\nfunction toolBuilderReducer(state: ToolBuilderState, action: Action): ToolBuilderState {\n  switch (action.type) {\n    case \"INITIALIZE_TOOL\":\n      return getDefaultState(action.payload);\n\n    case \"UPDATE_TOOL\":\n      return { ...state, tool: { ...state.tool, ...action.payload } };\n\n    case \"ADD_SUBCOMMAND\":\n      return {\n        ...state,\n        tool: { ...state.tool, commands: [...state.tool.commands, action.payload] },\n      };\n\n    case \"DELETE_COMMAND\": {\n      const subcommands = getAllSubcommands(action.payload, state.tool.commands);\n      const commandsToDelete = [action.payload, ...subcommands.map((c) => c.key)];\n      const newCommands = state.tool.commands.filter((cmd) => !commandsToDelete.includes(cmd.key));\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          commands: newCommands,\n          parameters: state.tool.parameters.filter(\n            (param) => !commandsToDelete.includes(param.commandKey || \"\"),\n          ),\n          exclusionGroups: state.tool.exclusionGroups?.filter(\n            (group) => !commandsToDelete.includes(group.commandKey || \"\"),\n          ),\n        },\n        selectedCommand:\n          state.selectedCommand?.key === action.payload ? newCommands[0] : state.selectedCommand,\n      };\n    }\n\n    case \"UPDATE_COMMAND\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          commands: state.tool.commands.map((cmd) => {\n            if (cmd.key === action.payload.commandKey) return { ...cmd, ...action.payload.updates };\n            if (action.payload.updates.isDefault) return { ...cmd, isDefault: false };\n            return cmd;\n          }),\n        },\n      };\n\n    case \"REMOVE_PARAMETER\": {\n      const next = {\n        ...state,\n        tool: {\n          ...state.tool,\n          parameters: state.tool.parameters.filter((p) => p.key !== action.payload),\n          exclusionGroups: state.tool.exclusionGroups?.map((group) => ({\n            ...group,\n            parameterKeys: group.parameterKeys.filter((key) => key !== action.payload),\n          })),\n        },\n      };\n      if (state.selectedParameter?.key === action.payload) next.selectedParameter = null;\n      return next;\n    }\n\n    case \"SET_DIALOG_OPEN\":\n      return {\n        ...state,\n        dialogs: { ...state.dialogs, [action.payload.dialog]: action.payload.open },\n      };\n\n    case \"SET_SELECTED_COMMAND\":\n      return { ...state, selectedCommand: action.payload };\n\n    case \"SET_SELECTED_PARAMETER\":\n      return { ...state, selectedParameter: action.payload };\n\n    case \"SET_EDITING_COMMAND\":\n      return { ...state, editingCommand: action.payload };\n\n    case \"UPSERT_PARAMETER\": {\n      const exists = state.tool.parameters.some((p) => p.key === action.payload.key);\n      const newParameters = exists\n        ? state.tool.parameters.map((param) => {\n            if (param.key !== action.payload.key) return param;\n            const updatedParam = {\n              ...param,\n              ...action.payload,\n              dependencies: action.payload.dependencies || [],\n              validations: action.payload.validations || [],\n              enumValues: action.payload.enumValues || [],\n            };\n            if (action.payload.isGlobal && action.payload.isGlobal !== param.isGlobal) {\n              updatedParam.commandKey = undefined;\n            }\n            if (action.payload.isGlobal === false && param.isGlobal) {\n              updatedParam.commandKey = state.selectedCommand?.key;\n            }\n            return updatedParam;\n          })\n        : [...state.tool.parameters, action.payload];\n      return { ...state, tool: { ...state.tool, parameters: newParameters } };\n    }\n\n    case \"ADD_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: [...(state.tool.exclusionGroups ?? []), action.payload],\n        },\n      };\n\n    case \"UPDATE_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: state.tool.exclusionGroups?.map((group) =>\n            group.key === action.payload.key ? action.payload : group,\n          ),\n        },\n      };\n\n    case \"REMOVE_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: state.tool.exclusionGroups?.filter(\n            (group) => group.key !== action.payload,\n          ),\n        },\n      };\n\n    case \"SET_PARAMETER_VALUE\":\n      return {\n        ...state,\n        parameterValues: { ...state.parameterValues, [action.payload.key]: action.payload.value },\n      };\n\n    default:\n      return state;\n  }\n}\n\ninterface ToolBuilderContextValue extends ToolBuilderState {\n  initializeTool: (tool: Tool) => void;\n  updateTool: (updates: Partial<Tool>) => void;\n  addSubcommand: (parentKey?: string) => string;\n  deleteCommand: (commandKey: string) => void;\n  updateCommand: (commandKey: string, updates: Partial<Command>) => void;\n  removeParameter: (parameterKey: string) => void;\n  addExclusionGroup: (group: Omit<ExclusionGroup, \"key\">) => void;\n  updateExclusionGroup: (updatedGroup: ExclusionGroup) => void;\n  removeExclusionGroup: (groupKey: string) => void;\n  setDialogOpen: (dialog: DialogKey, open: boolean) => void;\n  setSelectedCommand: (command: Command) => void;\n  setSelectedParameter: (parameter: Parameter | null) => void;\n  setEditingCommand: (command: Command | null) => void;\n  upsertParameter: (parameter: Parameter) => void;\n  setParameterValue: (key: string, value: ParameterValue) => void;\n  getParametersForCommand: (commandKey: string) => Parameter[];\n  getGlobalParameters: () => Parameter[];\n  getExclusionGroupsForCommand: (commandKey: string) => ExclusionGroup[];\n}\n\nconst ToolBuilderContext = createContext<ToolBuilderContextValue | null>(null);\n\ninterface ToolBuilderProviderProps {\n  tool: Tool;\n  children: ReactNode;\n  initialState?: Partial<ToolBuilderState>;\n}\n\nexport function ToolBuilderProvider({ tool, children, initialState }: ToolBuilderProviderProps) {\n  const [state, dispatch] = useReducer(toolBuilderReducer, undefined, () => ({\n    ...getDefaultState(tool),\n    ...initialState,\n  }));\n\n  const isFirstRender = useRef(true);\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n    dispatch({ type: \"INITIALIZE_TOOL\", payload: tool });\n  }, [tool]);\n\n  const contextValue = useMemo(\n    (): ToolBuilderContextValue => ({\n      ...state,\n\n      initializeTool: (t: Tool) => dispatch({ type: \"INITIALIZE_TOOL\", payload: t }),\n\n      updateTool: (updates: Partial<Tool>) => dispatch({ type: \"UPDATE_TOOL\", payload: updates }),\n\n      addSubcommand: (parentKey?: string) => {\n        const newCommand = createNewCommand(parentKey);\n        dispatch({ type: \"ADD_SUBCOMMAND\", payload: newCommand });\n        toast(\"Command Added\", { description: \"New command has been created successfully.\" });\n        return newCommand.key;\n      },\n\n      deleteCommand: (commandKey: string) => {\n        dispatch({ type: \"DELETE_COMMAND\", payload: commandKey });\n        toast(\"Command Deleted\", {\n          description: \"Command and all its subcommands have been deleted.\",\n        });\n      },\n\n      updateCommand: (commandKey: string, updates: Partial<Command>) =>\n        dispatch({ type: \"UPDATE_COMMAND\", payload: { commandKey, updates } }),\n\n      removeParameter: (parameterKey: string) => {\n        dispatch({ type: \"REMOVE_PARAMETER\", payload: parameterKey });\n        toast(\"Parameter Deleted\", { description: \"Parameter has been removed successfully.\" });\n      },\n\n      addExclusionGroup: (group: Omit<ExclusionGroup, \"key\">) => {\n        const newGroup: ExclusionGroup = {\n          ...group,\n          key: slugify(group.name),\n          commandKey: state.selectedCommand?.key,\n        };\n        dispatch({ type: \"ADD_EXCLUSION_GROUP\", payload: newGroup });\n        toast(\"Group Added\", {\n          description: \"New exclusion group has been created successfully.\",\n        });\n      },\n\n      updateExclusionGroup: (updatedGroup: ExclusionGroup) => {\n        dispatch({ type: \"UPDATE_EXCLUSION_GROUP\", payload: updatedGroup });\n        toast(\"Group Updated\", { description: \"Exclusion group has been updated successfully.\" });\n      },\n\n      removeExclusionGroup: (groupKey: string) => {\n        dispatch({ type: \"REMOVE_EXCLUSION_GROUP\", payload: groupKey });\n        toast(\"Group Removed\", { description: \"Exclusion group has been removed successfully.\" });\n      },\n\n      setDialogOpen: (dialog: DialogKey, open: boolean) =>\n        dispatch({ type: \"SET_DIALOG_OPEN\", payload: { dialog, open } }),\n\n      setSelectedCommand: (command: Command) =>\n        dispatch({ type: \"SET_SELECTED_COMMAND\", payload: command }),\n\n      setSelectedParameter: (parameter: Parameter | null) =>\n        dispatch({ type: \"SET_SELECTED_PARAMETER\", payload: parameter }),\n\n      setEditingCommand: (command: Command | null) =>\n        dispatch({ type: \"SET_EDITING_COMMAND\", payload: command }),\n\n      upsertParameter: (parameter: Parameter) => {\n        const exists = state.tool.parameters.some((p) => p.key === parameter.key);\n        dispatch({ type: \"UPSERT_PARAMETER\", payload: parameter });\n        if (exists) {\n          toast(\"Parameter Updated\", { description: \"Parameter has been updated successfully.\" });\n        } else {\n          toast(\"Parameter Added\", {\n            description: `New ${parameter.isGlobal ? \"global \" : \"\"}parameter has been created successfully.`,\n          });\n        }\n      },\n\n      setParameterValue: (key: string, value: ParameterValue) =>\n        dispatch({ type: \"SET_PARAMETER_VALUE\", payload: { key, value } }),\n\n      getParametersForCommand: (commandKey: string) =>\n        state.tool.parameters.filter((p) => !p.isGlobal && p.commandKey === commandKey),\n\n      getGlobalParameters: () => state.tool.parameters.filter((p) => p.isGlobal),\n\n      getExclusionGroupsForCommand: (commandKey: string) =>\n        state.tool.exclusionGroups?.filter((group) => group.commandKey === commandKey) ?? [],\n    }),\n    [state],\n  );\n\n  return <ToolBuilderContext.Provider value={contextValue}>{children}</ToolBuilderContext.Provider>;\n}\n\nexport function useToolBuilder(): ToolBuilderContextValue {\n  const context = useContext(ToolBuilderContext);\n  if (!context) {\n    throw new Error(\"useToolBuilder must be used within a ToolBuilderProvider\");\n  }\n  return context;\n}\n\nexport { defaultTool };\n",
+      "content": "import {\n  Tool,\n  Command,\n  Parameter,\n  ExclusionGroup,\n  ParameterValue,\n} from \"@/registry/commandly/lib/types/commandly\";\nimport {\n  cleanupTool,\n  createNewCommand,\n  defaultTool,\n  getAllSubcommands,\n  slugify,\n} from \"@/registry/commandly/lib/utils/commandly\";\nimport {\n  createContext,\n  useContext,\n  useReducer,\n  useEffect,\n  useMemo,\n  useRef,\n  ReactNode,\n} from \"react\";\nimport { toast } from \"sonner\";\n\nexport interface ToolBuilderState {\n  tool: Tool;\n  selectedCommand: Command;\n  selectedParameter: Parameter | null;\n  editingCommand: Command | null;\n  parameterValues: Record<string, ParameterValue>;\n  dialogs: {\n    parameterDetails: boolean;\n    editTool: boolean;\n    savedCommands: boolean;\n    exclusionGroups: boolean;\n  };\n}\n\ntype DialogKey = \"parameterDetails\" | \"editTool\" | \"savedCommands\" | \"exclusionGroups\";\n\ntype Action =\n  | { type: \"INITIALIZE_TOOL\"; payload: Tool }\n  | { type: \"UPDATE_TOOL\"; payload: Partial<Tool> }\n  | { type: \"ADD_SUBCOMMAND\"; payload: Command }\n  | { type: \"DELETE_COMMAND\"; payload: string }\n  | { type: \"UPDATE_COMMAND\"; payload: { commandKey: string; updates: Partial<Command> } }\n  | { type: \"REMOVE_PARAMETER\"; payload: string }\n  | { type: \"SET_DIALOG_OPEN\"; payload: { dialog: DialogKey; open: boolean } }\n  | { type: \"SET_SELECTED_COMMAND\"; payload: Command }\n  | { type: \"SET_SELECTED_PARAMETER\"; payload: Parameter | null }\n  | { type: \"SET_EDITING_COMMAND\"; payload: Command | null }\n  | { type: \"UPSERT_PARAMETER\"; payload: Parameter }\n  | { type: \"ADD_EXCLUSION_GROUP\"; payload: ExclusionGroup }\n  | { type: \"UPDATE_EXCLUSION_GROUP\"; payload: ExclusionGroup }\n  | { type: \"REMOVE_EXCLUSION_GROUP\"; payload: string }\n  | { type: \"SET_PARAMETER_VALUE\"; payload: { key: string; value: ParameterValue } };\n\nfunction getDefaultState(tool: Tool): ToolBuilderState {\n  return {\n    tool,\n    selectedCommand: tool.commands[0] ?? ({} as Command),\n    selectedParameter: null,\n    editingCommand: null,\n    parameterValues: {},\n    dialogs: {\n      parameterDetails: false,\n      editTool: false,\n      savedCommands: false,\n      exclusionGroups: false,\n    },\n  };\n}\n\nfunction toolBuilderReducer(state: ToolBuilderState, action: Action): ToolBuilderState {\n  switch (action.type) {\n    case \"INITIALIZE_TOOL\":\n      return getDefaultState(cleanupTool(action.payload));\n\n    case \"UPDATE_TOOL\":\n      return { ...state, tool: cleanupTool({ ...state.tool, ...action.payload }) };\n\n    case \"ADD_SUBCOMMAND\":\n      return {\n        ...state,\n        tool: { ...state.tool, commands: [...state.tool.commands, action.payload] },\n      };\n\n    case \"DELETE_COMMAND\": {\n      const subcommands = getAllSubcommands(action.payload, state.tool.commands);\n      const commandsToDelete = [action.payload, ...subcommands.map((c) => c.key)];\n      const newCommands = state.tool.commands.filter((cmd) => !commandsToDelete.includes(cmd.key));\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          commands: newCommands,\n          parameters: state.tool.parameters.filter(\n            (param) => !commandsToDelete.includes(param.commandKey || \"\"),\n          ),\n          exclusionGroups: state.tool.exclusionGroups?.filter(\n            (group) => !commandsToDelete.includes(group.commandKey || \"\"),\n          ),\n        },\n        selectedCommand:\n          state.selectedCommand?.key === action.payload ? newCommands[0] : state.selectedCommand,\n      };\n    }\n\n    case \"UPDATE_COMMAND\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          commands: state.tool.commands.map((cmd) => {\n            if (cmd.key === action.payload.commandKey) return { ...cmd, ...action.payload.updates };\n            if (action.payload.updates.isDefault) return { ...cmd, isDefault: false };\n            return cmd;\n          }),\n        },\n      };\n\n    case \"REMOVE_PARAMETER\": {\n      const next = {\n        ...state,\n        tool: {\n          ...state.tool,\n          parameters: state.tool.parameters.filter((p) => p.key !== action.payload),\n          exclusionGroups: state.tool.exclusionGroups?.map((group) => ({\n            ...group,\n            parameterKeys: group.parameterKeys.filter((key) => key !== action.payload),\n          })),\n        },\n      };\n      if (state.selectedParameter?.key === action.payload) next.selectedParameter = null;\n      return next;\n    }\n\n    case \"SET_DIALOG_OPEN\":\n      return {\n        ...state,\n        dialogs: { ...state.dialogs, [action.payload.dialog]: action.payload.open },\n      };\n\n    case \"SET_SELECTED_COMMAND\":\n      return { ...state, selectedCommand: action.payload };\n\n    case \"SET_SELECTED_PARAMETER\":\n      return { ...state, selectedParameter: action.payload };\n\n    case \"SET_EDITING_COMMAND\":\n      return { ...state, editingCommand: action.payload };\n\n    case \"UPSERT_PARAMETER\": {\n      const exists = state.tool.parameters.some((p) => p.key === action.payload.key);\n      const newParameters = exists\n        ? state.tool.parameters.map((param) => {\n            if (param.key !== action.payload.key) return param;\n            const updatedParam = {\n              ...param,\n              ...action.payload,\n              dependencies: action.payload.dependencies || [],\n              validations: action.payload.validations || [],\n              enumValues: action.payload.enumValues || [],\n            };\n            if (action.payload.isGlobal && action.payload.isGlobal !== param.isGlobal) {\n              updatedParam.commandKey = undefined;\n            }\n            if (action.payload.isGlobal === false && param.isGlobal) {\n              updatedParam.commandKey = state.selectedCommand?.key;\n            }\n            return updatedParam;\n          })\n        : [...state.tool.parameters, action.payload];\n      return { ...state, tool: { ...state.tool, parameters: newParameters } };\n    }\n\n    case \"ADD_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: [...(state.tool.exclusionGroups ?? []), action.payload],\n        },\n      };\n\n    case \"UPDATE_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: state.tool.exclusionGroups?.map((group) =>\n            group.key === action.payload.key ? action.payload : group,\n          ),\n        },\n      };\n\n    case \"REMOVE_EXCLUSION_GROUP\":\n      return {\n        ...state,\n        tool: {\n          ...state.tool,\n          exclusionGroups: state.tool.exclusionGroups?.filter(\n            (group) => group.key !== action.payload,\n          ),\n        },\n      };\n\n    case \"SET_PARAMETER_VALUE\":\n      return {\n        ...state,\n        parameterValues: { ...state.parameterValues, [action.payload.key]: action.payload.value },\n      };\n\n    default:\n      return state;\n  }\n}\n\ninterface ToolBuilderContextValue extends ToolBuilderState {\n  initializeTool: (tool: Tool) => void;\n  updateTool: (updates: Partial<Tool>) => void;\n  addSubcommand: (parentKey?: string) => string;\n  deleteCommand: (commandKey: string) => void;\n  updateCommand: (commandKey: string, updates: Partial<Command>) => void;\n  removeParameter: (parameterKey: string) => void;\n  addExclusionGroup: (group: Omit<ExclusionGroup, \"key\">) => void;\n  updateExclusionGroup: (updatedGroup: ExclusionGroup) => void;\n  removeExclusionGroup: (groupKey: string) => void;\n  setDialogOpen: (dialog: DialogKey, open: boolean) => void;\n  setSelectedCommand: (command: Command) => void;\n  setSelectedParameter: (parameter: Parameter | null) => void;\n  setEditingCommand: (command: Command | null) => void;\n  upsertParameter: (parameter: Parameter) => void;\n  setParameterValue: (key: string, value: ParameterValue) => void;\n  getParametersForCommand: (commandKey: string) => Parameter[];\n  getGlobalParameters: () => Parameter[];\n  getExclusionGroupsForCommand: (commandKey: string) => ExclusionGroup[];\n}\n\nconst ToolBuilderContext = createContext<ToolBuilderContextValue | null>(null);\n\ninterface ToolBuilderProviderProps {\n  tool: Tool;\n  children: ReactNode;\n  initialState?: Partial<ToolBuilderState>;\n}\n\nexport function ToolBuilderProvider({ tool, children, initialState }: ToolBuilderProviderProps) {\n  const [state, dispatch] = useReducer(toolBuilderReducer, undefined, () => ({\n    ...getDefaultState(tool),\n    ...initialState,\n  }));\n\n  const isFirstRender = useRef(true);\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n    dispatch({ type: \"INITIALIZE_TOOL\", payload: tool });\n  }, [tool]);\n\n  const contextValue = useMemo(\n    (): ToolBuilderContextValue => ({\n      ...state,\n\n      initializeTool: (t: Tool) => dispatch({ type: \"INITIALIZE_TOOL\", payload: t }),\n\n      updateTool: (updates: Partial<Tool>) => dispatch({ type: \"UPDATE_TOOL\", payload: updates }),\n\n      addSubcommand: (parentKey?: string) => {\n        const newCommand = createNewCommand(parentKey);\n        dispatch({ type: \"ADD_SUBCOMMAND\", payload: newCommand });\n        toast(\"Command Added\", { description: \"New command has been created successfully.\" });\n        return newCommand.key;\n      },\n\n      deleteCommand: (commandKey: string) => {\n        dispatch({ type: \"DELETE_COMMAND\", payload: commandKey });\n        toast(\"Command Deleted\", {\n          description: \"Command and all its subcommands have been deleted.\",\n        });\n      },\n\n      updateCommand: (commandKey: string, updates: Partial<Command>) =>\n        dispatch({ type: \"UPDATE_COMMAND\", payload: { commandKey, updates } }),\n\n      removeParameter: (parameterKey: string) => {\n        dispatch({ type: \"REMOVE_PARAMETER\", payload: parameterKey });\n        toast(\"Parameter Deleted\", { description: \"Parameter has been removed successfully.\" });\n      },\n\n      addExclusionGroup: (group: Omit<ExclusionGroup, \"key\">) => {\n        const newGroup: ExclusionGroup = {\n          ...group,\n          key: slugify(group.name),\n          commandKey: state.selectedCommand?.key,\n        };\n        dispatch({ type: \"ADD_EXCLUSION_GROUP\", payload: newGroup });\n        toast(\"Group Added\", {\n          description: \"New exclusion group has been created successfully.\",\n        });\n      },\n\n      updateExclusionGroup: (updatedGroup: ExclusionGroup) => {\n        dispatch({ type: \"UPDATE_EXCLUSION_GROUP\", payload: updatedGroup });\n        toast(\"Group Updated\", { description: \"Exclusion group has been updated successfully.\" });\n      },\n\n      removeExclusionGroup: (groupKey: string) => {\n        dispatch({ type: \"REMOVE_EXCLUSION_GROUP\", payload: groupKey });\n        toast(\"Group Removed\", { description: \"Exclusion group has been removed successfully.\" });\n      },\n\n      setDialogOpen: (dialog: DialogKey, open: boolean) =>\n        dispatch({ type: \"SET_DIALOG_OPEN\", payload: { dialog, open } }),\n\n      setSelectedCommand: (command: Command) =>\n        dispatch({ type: \"SET_SELECTED_COMMAND\", payload: command }),\n\n      setSelectedParameter: (parameter: Parameter | null) =>\n        dispatch({ type: \"SET_SELECTED_PARAMETER\", payload: parameter }),\n\n      setEditingCommand: (command: Command | null) =>\n        dispatch({ type: \"SET_EDITING_COMMAND\", payload: command }),\n\n      upsertParameter: (parameter: Parameter) => {\n        const exists = state.tool.parameters.some((p) => p.key === parameter.key);\n        dispatch({ type: \"UPSERT_PARAMETER\", payload: parameter });\n        if (exists) {\n          toast(\"Parameter Updated\", { description: \"Parameter has been updated successfully.\" });\n        } else {\n          toast(\"Parameter Added\", {\n            description: `New ${parameter.isGlobal ? \"global \" : \"\"}parameter has been created successfully.`,\n          });\n        }\n      },\n\n      setParameterValue: (key: string, value: ParameterValue) =>\n        dispatch({ type: \"SET_PARAMETER_VALUE\", payload: { key, value } }),\n\n      getParametersForCommand: (commandKey: string) =>\n        state.tool.parameters.filter((p) => !p.isGlobal && p.commandKey === commandKey),\n\n      getGlobalParameters: () => state.tool.parameters.filter((p) => p.isGlobal),\n\n      getExclusionGroupsForCommand: (commandKey: string) =>\n        state.tool.exclusionGroups?.filter((group) => group.commandKey === commandKey) ?? [],\n    }),\n    [state],\n  );\n\n  return <ToolBuilderContext.Provider value={contextValue}>{children}</ToolBuilderContext.Provider>;\n}\n\nexport function useToolBuilder(): ToolBuilderContextValue {\n  const context = useContext(ToolBuilderContext);\n  if (!context) {\n    throw new Error(\"useToolBuilder must be used within a ToolBuilderProvider\");\n  }\n  return context;\n}\n\nexport { defaultTool };\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/tool-editor.context.tsx"
     },
     {
       "path": "registry/commandly/tool-editor/command-tree.tsx",
-      "content": "import { CommandDialog } from \"../tool-editor/dialogs/command-dialog\";\nimport { useToolBuilder } from \"./tool-editor.context\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { ChevronDownIcon, ChevronRightIcon, Edit2Icon, PlusIcon, Trash2Icon } from \"lucide-react\";\nimport { useState, useEffect } from \"react\";\n\ninterface CommandNodeProps {\n  command: Command;\n  level?: number;\n  allCommands: Command[];\n  toolName: string;\n  selectedCommandKey?: string;\n  expandedCommands: Set<string>;\n  onToggle: (commandKey: string) => void;\n  onSelect: (command: Command) => void;\n  onEdit: (command: Command) => void;\n  onAddSubcommand: (parentKey?: string) => void;\n  onDelete: (commandKey: string) => void;\n}\n\nfunction CommandNode({\n  command,\n  level = 0,\n  allCommands,\n  toolName,\n  selectedCommandKey,\n  expandedCommands,\n  onToggle,\n  onSelect,\n  onEdit,\n  onAddSubcommand,\n  onDelete,\n}: CommandNodeProps) {\n  const isExpanded = expandedCommands.has(command.key);\n  const subcommands = allCommands.filter((cmd) => cmd.parentCommandKey === command.key);\n  const hasSubcommands = subcommands.length > 0;\n  const isSelected = selectedCommandKey === command.key;\n  const isRoot = command.name === toolName;\n\n  return (\n    <div key={command.key}>\n      <div\n        className={`group flex cursor-pointer items-center gap-2 rounded-md p-2 hover:bg-muted/50 ${\n          isSelected ? \"bg-muted\" : \"\"\n        }`}\n        style={{ paddingLeft: `${level * 16 + 8}px` }}\n        onClick={() => onSelect(command)}\n      >\n        {hasSubcommands ? (\n          <Button\n            id=\"expand-button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-4 w-4 p-0\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggle(command.key);\n            }}\n          >\n            {isExpanded ? (\n              <ChevronDownIcon className=\"h-3 w-3\" />\n            ) : (\n              <ChevronRightIcon className=\"h-3 w-3\" />\n            )}\n          </Button>\n        ) : (\n          <div className=\"w-4\" />\n        )}\n\n        <span className=\"flex-1 text-sm font-medium\">{command.name}</span>\n        {command.isDefault && (\n          <Badge\n            variant=\"secondary\"\n            className=\"text-xs\"\n          >\n            default\n          </Badge>\n        )}\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onEdit(command);\n          }}\n        >\n          <Edit2Icon className=\"h-3 w-3\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onAddSubcommand(command.key);\n          }}\n        >\n          <PlusIcon className=\"h-3 w-3\" />\n        </Button>\n        {!isRoot && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onDelete(command.key);\n            }}\n          >\n            <Trash2Icon className=\"h-3 w-3 text-destructive\" />\n          </Button>\n        )}\n      </div>\n\n      {isExpanded && hasSubcommands && (\n        <div>\n          {subcommands.map((subcmd) => (\n            <CommandNode\n              key={subcmd.key}\n              command={subcmd}\n              level={level + 1}\n              allCommands={allCommands}\n              toolName={toolName}\n              selectedCommandKey={selectedCommandKey}\n              expandedCommands={expandedCommands}\n              onToggle={onToggle}\n              onSelect={onSelect}\n              onEdit={onEdit}\n              onAddSubcommand={onAddSubcommand}\n              onDelete={onDelete}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function CommandTree() {\n  const {\n    tool,\n    selectedCommand,\n    editingCommand,\n    addSubcommand,\n    setSelectedCommand,\n    setEditingCommand,\n    deleteCommand,\n  } = useToolBuilder();\n\n  const [expandedCommands, setExpandedCommands] = useState<Set<string>>(\n    new Set([tool.commands[0]?.key]),\n  );\n  const [isDialogOpen, setIsDialogOpen] = useState(false);\n  const [lastAddedCommand, setLastAddedCommand] = useState<{\n    key: string;\n    parentKey?: string;\n  } | null>(null);\n\n  const toggleExpanded = (commandKey: string) => {\n    setExpandedCommands((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(commandKey)) {\n        newSet.delete(commandKey);\n      } else {\n        newSet.add(commandKey);\n      }\n      return newSet;\n    });\n  };\n\n  const handleAddSubcommand = (parentKey?: string) => {\n    const newKey = addSubcommand(parentKey);\n    setLastAddedCommand({ key: newKey, parentKey });\n  };\n\n  useEffect(() => {\n    if (!lastAddedCommand) return;\n    const { key, parentKey } = lastAddedCommand;\n    const newCmd = tool.commands.find((cmd) => cmd.key === key);\n    if (newCmd) {\n      setSelectedCommand(newCmd);\n      if (parentKey) {\n        setExpandedCommands((prev) => {\n          const newSet = new Set(prev);\n          newSet.add(parentKey);\n          return newSet;\n        });\n      }\n      setLastAddedCommand(null);\n    }\n  }, [tool.commands, lastAddedCommand, setSelectedCommand]);\n\n  const handleEdit = (command: Command) => {\n    setEditingCommand(command);\n    setIsDialogOpen(true);\n  };\n\n  const rootCommands = tool.commands.filter((cmd) => !cmd.parentCommandKey);\n\n  return (\n    <>\n      <ScrollArea className=\"flex-1 p-1\">\n        <div className=\"p-2\">\n          {rootCommands.map((command) => (\n            <CommandNode\n              key={command.key}\n              command={command}\n              allCommands={tool.commands}\n              toolName={tool.name}\n              selectedCommandKey={selectedCommand?.key}\n              expandedCommands={expandedCommands}\n              onToggle={toggleExpanded}\n              onSelect={setSelectedCommand}\n              onEdit={handleEdit}\n              onAddSubcommand={handleAddSubcommand}\n              onDelete={deleteCommand}\n            />\n          ))}\n        </div>\n        <div className=\"p-2\">\n          <Button\n            className=\"w-full\"\n            onClick={() => handleAddSubcommand()}\n          >\n            <PlusIcon className=\"mr-1 h-3 w-3\" />\n            Add Command\n          </Button>\n        </div>\n      </ScrollArea>\n      {editingCommand && (\n        <CommandDialog\n          isOpen={isDialogOpen}\n          onOpenChange={(open) => {\n            setIsDialogOpen(open);\n            setEditingCommand(null);\n          }}\n        />\n      )}\n    </>\n  );\n}\n",
+      "content": "import { CommandDialog } from \"../tool-editor/dialogs/command-dialog\";\nimport { useToolBuilder } from \"./tool-editor.context\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { ChevronDownIcon, ChevronRightIcon, Edit2Icon, PlusIcon, Trash2Icon } from \"lucide-react\";\nimport { useState, useEffect } from \"react\";\n\ninterface CommandNodeProps {\n  command: Command;\n  level?: number;\n  allCommands: Command[];\n  toolName: string;\n  selectedCommandKey?: string;\n  expandedCommands: Set<string>;\n  onToggle: (commandKey: string) => void;\n  onSelect: (command: Command) => void;\n  onEdit: (command: Command) => void;\n  onAddSubcommand: (parentKey?: string) => void;\n  onDelete: (commandKey: string) => void;\n}\n\nfunction CommandNode({\n  command,\n  level = 0,\n  allCommands,\n  toolName,\n  selectedCommandKey,\n  expandedCommands,\n  onToggle,\n  onSelect,\n  onEdit,\n  onAddSubcommand,\n  onDelete,\n}: CommandNodeProps) {\n  const isExpanded = expandedCommands.has(command.key);\n  const subcommands = allCommands.filter((cmd) => cmd.parentCommandKey === command.key);\n  const hasSubcommands = subcommands.length > 0;\n  const isSelected = selectedCommandKey === command.key;\n  const isRoot = command.name === toolName;\n\n  return (\n    <div key={command.key}>\n      <div\n        className={`group flex cursor-pointer items-center gap-2 rounded-md p-2 hover:bg-muted/50 ${\n          isSelected ? \"bg-muted\" : \"\"\n        }`}\n        style={{ paddingLeft: `${level * 16 + 8}px` }}\n        onClick={() => onSelect(command)}\n      >\n        {hasSubcommands ? (\n          <Button\n            id=\"expand-button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-4 w-4 p-0\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggle(command.key);\n            }}\n          >\n            {isExpanded ? (\n              <ChevronDownIcon className=\"h-3 w-3\" />\n            ) : (\n              <ChevronRightIcon className=\"h-3 w-3\" />\n            )}\n          </Button>\n        ) : (\n          <div className=\"w-4\" />\n        )}\n\n        <span className=\"flex-1 text-sm font-medium\">{command.name}</span>\n        {command.isDefault && (\n          <Badge\n            variant=\"secondary\"\n            className=\"text-xs\"\n          >\n            default\n          </Badge>\n        )}\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onEdit(command);\n          }}\n        >\n          <Edit2Icon className=\"h-3 w-3\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n          onClick={(e) => {\n            e.stopPropagation();\n            onAddSubcommand(command.key);\n          }}\n        >\n          <PlusIcon className=\"h-3 w-3\" />\n        </Button>\n        {!isRoot && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-4 w-4 p-0 opacity-0 group-hover:opacity-100\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onDelete(command.key);\n            }}\n          >\n            <Trash2Icon className=\"h-3 w-3 text-destructive\" />\n          </Button>\n        )}\n      </div>\n\n      {isExpanded && hasSubcommands && (\n        <div>\n          {subcommands.map((subcmd) => (\n            <CommandNode\n              key={subcmd.key}\n              command={subcmd}\n              level={level + 1}\n              allCommands={allCommands}\n              toolName={toolName}\n              selectedCommandKey={selectedCommandKey}\n              expandedCommands={expandedCommands}\n              onToggle={onToggle}\n              onSelect={onSelect}\n              onEdit={onEdit}\n              onAddSubcommand={onAddSubcommand}\n              onDelete={onDelete}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function CommandTree() {\n  const {\n    tool,\n    selectedCommand,\n    editingCommand,\n    addSubcommand,\n    setSelectedCommand,\n    setEditingCommand,\n    deleteCommand,\n  } = useToolBuilder();\n\n  const [expandedCommands, setExpandedCommands] = useState<Set<string>>(\n    new Set([tool.commands[0]?.key]),\n  );\n  const [isDialogOpen, setIsDialogOpen] = useState(false);\n  const [lastAddedCommand, setLastAddedCommand] = useState<{\n    key: string;\n    parentKey?: string;\n  } | null>(null);\n\n  const toggleExpanded = (commandKey: string) => {\n    setExpandedCommands((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(commandKey)) {\n        newSet.delete(commandKey);\n      } else {\n        newSet.add(commandKey);\n      }\n      return newSet;\n    });\n  };\n\n  const handleAddSubcommand = (parentKey?: string) => {\n    const newKey = addSubcommand(parentKey);\n    setLastAddedCommand({ key: newKey, parentKey });\n  };\n\n  useEffect(() => {\n    if (!lastAddedCommand) return;\n    const { key, parentKey } = lastAddedCommand;\n    const newCmd = tool.commands.find((cmd) => cmd.key === key);\n    if (newCmd) {\n      setSelectedCommand(newCmd);\n      if (parentKey) {\n        setExpandedCommands((prev) => {\n          const newSet = new Set(prev);\n          newSet.add(parentKey);\n          return newSet;\n        });\n      }\n      setLastAddedCommand(null);\n    }\n  }, [tool.commands, lastAddedCommand, setSelectedCommand]);\n\n  const handleEdit = (command: Command) => {\n    setEditingCommand(command);\n    setIsDialogOpen(true);\n  };\n\n  const rootCommands = tool.commands.filter((cmd) => !cmd.parentCommandKey);\n\n  return (\n    <>\n      <ScrollArea className=\"flex-1 border-r border-muted p-1\">\n        <div className=\"p-2\">\n          {rootCommands.map((command) => (\n            <CommandNode\n              key={command.key}\n              command={command}\n              allCommands={tool.commands}\n              toolName={tool.name}\n              selectedCommandKey={selectedCommand?.key}\n              expandedCommands={expandedCommands}\n              onToggle={toggleExpanded}\n              onSelect={setSelectedCommand}\n              onEdit={handleEdit}\n              onAddSubcommand={handleAddSubcommand}\n              onDelete={deleteCommand}\n            />\n          ))}\n        </div>\n        <div className=\"p-2\">\n          <Button\n            className=\"w-full\"\n            onClick={() => handleAddSubcommand()}\n          >\n            <PlusIcon className=\"mr-1 h-3 w-3\" />\n            Add Command\n          </Button>\n        </div>\n      </ScrollArea>\n      {editingCommand && (\n        <CommandDialog\n          isOpen={isDialogOpen}\n          onOpenChange={(open) => {\n            setIsDialogOpen(open);\n            setEditingCommand(null);\n          }}\n        />\n      )}\n    </>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/command-tree.tsx"
     },
     {
       "path": "registry/commandly/tool-editor/parameter-list.tsx",
-      "content": "import { useToolBuilder } from \"./tool-editor.context\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ExclusionGroup, ParameterType } from \"@/registry/commandly/lib/types/commandly\";\nimport { createNewParameter, validateDefaultValue } from \"@/registry/commandly/lib/utils/commandly\";\nimport {\n  CheckCircleIcon,\n  FileTextIcon,\n  FlagIcon,\n  GlobeIcon,\n  HashIcon,\n  LayersIcon,\n  PlusIcon,\n  Trash2Icon,\n  XCircleIcon,\n} from \"lucide-react\";\n\ninterface ParameterListProps {\n  title: string;\n  isGlobal?: boolean;\n}\n\nfunction ParameterIcon({ type }: { type: ParameterType }) {\n  switch (type) {\n    case \"Flag\":\n      return <FlagIcon className=\"h-4 w-4\" />;\n    case \"Option\":\n      return <HashIcon className=\"h-4 w-4\" />;\n    case \"Argument\":\n      return <FileTextIcon className=\"h-4 w-4\" />;\n    default:\n      return <HashIcon className=\"h-4 w-4\" />;\n  }\n}\n\nexport function ParameterList({ title, isGlobal = false }: ParameterListProps) {\n  const {\n    selectedCommand,\n    getGlobalParameters,\n    getParametersForCommand,\n    getExclusionGroupsForCommand,\n    setSelectedParameter,\n    removeParameter,\n  } = useToolBuilder();\n\n  const globalParameters = getGlobalParameters();\n  const commandParameters = selectedCommand?.key\n    ? getParametersForCommand(selectedCommand.key)\n    : [];\n  const exclusionGroups = selectedCommand?.key\n    ? getExclusionGroupsForCommand(selectedCommand.key)\n    : [];\n\n  const parameters = isGlobal ? globalParameters : commandParameters;\n\n  const getParameterExclusionGroups = (parameterKey: string): ExclusionGroup[] => {\n    return exclusionGroups.filter((group) => group.parameterKeys.includes(parameterKey));\n  };\n\n  return (\n    <div>\n      <div className=\"mb-4 flex items-center justify-between\">\n        <h3 className=\"flex items-center gap-2 text-lg font-semibold\">\n          {isGlobal && <GlobeIcon className=\"h-5 w-5\" />}\n          {title} ({parameters.length})\n        </h3>\n        <Button\n          onClick={() => setSelectedParameter(createNewParameter(isGlobal, selectedCommand?.key))}\n          size=\"sm\"\n        >\n          <PlusIcon className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div className=\"space-y-2\">\n        {parameters.map((parameter) => {\n          const validation = validateDefaultValue(parameter);\n          const paramGroups = getParameterExclusionGroups(parameter.key);\n\n          return (\n            <div\n              key={parameter.key}\n              className={\"cursor-pointer rounded border p-3 hover:bg-muted/50\"}\n              onClick={() => setSelectedParameter(parameter)}\n            >\n              <div className=\"mb-2 flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <ParameterIcon type={parameter.parameterType} />\n                  <span className=\"text-sm font-medium\">\n                    {parameter.name}\n                    {(parameter.longFlag || parameter.shortFlag) && (\n                      <span className=\"ml-1 text-muted-foreground\">\n                        ({[parameter.longFlag, parameter.shortFlag].filter(Boolean).join(\", \")})\n                      </span>\n                    )}\n                  </span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-6 w-6 p-0\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    removeParameter(parameter.key);\n                  }}\n                >\n                  <Trash2Icon className=\"h-3 w-3 text-destructive\" />\n                </Button>\n              </div>\n              <div className=\"flex flex-wrap items-center gap-1\">\n                {parameter.isRequired && (\n                  <Badge\n                    variant=\"destructive\"\n                    className=\"text-xs\"\n                  >\n                    required\n                  </Badge>\n                )}\n                <Badge\n                  variant=\"outline\"\n                  className=\"text-xs\"\n                >\n                  {parameter.parameterType}\n                </Badge>\n                <Badge\n                  variant=\"secondary\"\n                  className=\"text-xs\"\n                >\n                  {parameter.dataType}\n                </Badge>\n                {isGlobal && (\n                  <Badge\n                    variant=\"default\"\n                    className=\"text-xs\"\n                  >\n                    global\n                  </Badge>\n                )}\n                {paramGroups.map((group) => (\n                  <Badge\n                    key={group.key}\n                    variant=\"secondary\"\n                    className=\"flex items-center gap-1 bg-muted text-xs\"\n                  >\n                    <LayersIcon className=\"h-3 w-3\" />\n                    {group.name}\n                  </Badge>\n                ))}\n                {!validation.isValid && <XCircleIcon className=\"h-3 w-3 text-destructive\" />}\n                {validation.isValid && parameter.defaultValue && (\n                  <CheckCircleIcon className=\"h-3 w-3 text-green-500\" />\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import { useToolBuilder } from \"./tool-editor.context\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ExclusionGroup, ParameterType } from \"@/registry/commandly/lib/types/commandly\";\nimport { createNewParameter, validateDefaultValue } from \"@/registry/commandly/lib/utils/commandly\";\nimport {\n  CheckCircleIcon,\n  FileTextIcon,\n  FlagIcon,\n  GlobeIcon,\n  HashIcon,\n  LayersIcon,\n  PlusIcon,\n  Trash2Icon,\n  XCircleIcon,\n} from \"lucide-react\";\n\ninterface ParameterListProps {\n  title: string;\n  isGlobal?: boolean;\n}\n\nfunction ParameterIcon({ type }: { type: ParameterType }) {\n  switch (type) {\n    case \"Flag\":\n      return <FlagIcon className=\"h-4 w-4\" />;\n    case \"Option\":\n      return <HashIcon className=\"h-4 w-4\" />;\n    case \"Argument\":\n      return <FileTextIcon className=\"h-4 w-4\" />;\n    default:\n      return <HashIcon className=\"h-4 w-4\" />;\n  }\n}\n\nexport function ParameterList({ title, isGlobal = false }: ParameterListProps) {\n  const {\n    selectedCommand,\n    getGlobalParameters,\n    getParametersForCommand,\n    getExclusionGroupsForCommand,\n    setSelectedParameter,\n    removeParameter,\n  } = useToolBuilder();\n\n  const globalParameters = getGlobalParameters();\n  const commandParameters = selectedCommand?.key\n    ? getParametersForCommand(selectedCommand.key)\n    : [];\n  const exclusionGroups = selectedCommand?.key\n    ? getExclusionGroupsForCommand(selectedCommand.key)\n    : [];\n\n  const parameters = isGlobal ? globalParameters : commandParameters;\n\n  const getParameterExclusionGroups = (parameterKey: string): ExclusionGroup[] => {\n    return exclusionGroups.filter((group) => group.parameterKeys.includes(parameterKey));\n  };\n\n  return (\n    <div>\n      <div className=\"mb-4 flex items-center justify-between\">\n        <h3 className=\"flex items-center gap-2 text-lg font-semibold\">\n          {isGlobal && <GlobeIcon className=\"h-5 w-5\" />}\n          {title} ({parameters.length})\n        </h3>\n        <Button\n          onClick={() => setSelectedParameter(createNewParameter(isGlobal, selectedCommand?.key))}\n          size=\"sm\"\n        >\n          <PlusIcon className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div className=\"space-y-2\">\n        {parameters.map((parameter) => {\n          const validation = validateDefaultValue(parameter);\n          const paramGroups = getParameterExclusionGroups(parameter.key);\n\n          return (\n            <div\n              key={parameter.key}\n              className={\"cursor-pointer rounded border border-muted p-3 hover:bg-muted/50\"}\n              onClick={() => setSelectedParameter(parameter)}\n            >\n              <div className=\"mb-2 flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <ParameterIcon type={parameter.parameterType} />\n                  <span className=\"text-sm font-medium\">\n                    {parameter.name}\n                    {(parameter.longFlag || parameter.shortFlag) && (\n                      <span className=\"ml-1 text-muted-foreground\">\n                        ({[parameter.longFlag, parameter.shortFlag].filter(Boolean).join(\", \")})\n                      </span>\n                    )}\n                  </span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-6 w-6 p-0\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    removeParameter(parameter.key);\n                  }}\n                >\n                  <Trash2Icon className=\"h-3 w-3 text-destructive\" />\n                </Button>\n              </div>\n              <div className=\"flex flex-wrap items-center gap-1\">\n                {parameter.isRequired && (\n                  <Badge\n                    variant=\"destructive\"\n                    className=\"text-xs\"\n                  >\n                    required\n                  </Badge>\n                )}\n                <Badge\n                  variant=\"outline\"\n                  className=\"text-xs\"\n                >\n                  {parameter.parameterType}\n                </Badge>\n                <Badge\n                  variant=\"secondary\"\n                  className=\"text-xs\"\n                >\n                  {parameter.dataType}\n                </Badge>\n                {isGlobal && (\n                  <Badge\n                    variant=\"default\"\n                    className=\"text-xs\"\n                  >\n                    global\n                  </Badge>\n                )}\n                {paramGroups.map((group) => (\n                  <Badge\n                    key={group.key}\n                    variant=\"secondary\"\n                    className=\"flex items-center gap-1 bg-muted text-xs\"\n                  >\n                    <LayersIcon className=\"h-3 w-3\" />\n                    {group.name}\n                  </Badge>\n                ))}\n                {!validation.isValid && <XCircleIcon className=\"h-3 w-3 text-destructive\" />}\n                {validation.isValid && parameter.defaultValue && (\n                  <CheckCircleIcon className=\"h-3 w-3 text-green-500\" />\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/parameter-list.tsx"
     },
     {
       "path": "registry/commandly/tool-editor/preview-tabs.tsx",
-      "content": "import { GeneratedCommand } from \"../generated-command\";\nimport { JsonOutput } from \"../json-output\";\nimport { ToolRenderer } from \"../tool-renderer\";\nimport { HelpMenu } from \"./help-menu\";\nimport { useToolBuilder } from \"./tool-editor.context\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { TerminalIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface PreviewTabsProps {\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function PreviewTabs({ onSaveCommand }: PreviewTabsProps) {\n  const [currentTab, setActiveTab] = useState(\"ui\");\n\n  const { selectedCommand, tool, parameterValues, setParameterValue } = useToolBuilder();\n\n  return (\n    <div className=\"flex h-full max-w-full justify-center rounded-xl\">\n      <Tabs\n        value={currentTab}\n        onValueChange={setActiveTab}\n        className=\"w-full\"\n      >\n        <TabsList className=\"mx-auto flex w-fit justify-center\">\n          <TabsTrigger value=\"json\">Json</TabsTrigger>\n          <TabsTrigger value=\"ui\">Preview</TabsTrigger>\n          <TabsTrigger value=\"help\">Help</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"json\">\n          <JsonOutput tool={tool} />\n        </TabsContent>\n        <TabsContent\n          value=\"ui\"\n          className=\"flex flex-col gap-4\"\n        >\n          <Card>\n            <CardHeader hidden={true}>\n              <CardDescription hidden={true}></CardDescription>\n              <CardTitle>Runtime Preview</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <ToolRenderer\n                selectedCommand={selectedCommand}\n                tool={tool}\n                parameterValues={parameterValues}\n                updateParameterValue={(key, value) => setParameterValue(key, value)}\n              />\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <TerminalIcon className=\"h-5 w-5\" />\n                Generated Command\n              </CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <GeneratedCommand\n                tool={tool}\n                parameterValues={parameterValues}\n                onSaveCommand={onSaveCommand}\n              />\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"help\">\n          <Card className=\"rounded-xl p-0\">\n            <CardHeader hidden={true}>\n              <CardDescription hidden={true}>\n                Get help with using this tool and its features.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"p-0\">\n              <HelpMenu />\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n",
+      "content": "import { GeneratedCommand } from \"../generated-command\";\nimport { JsonOutput } from \"../json-output\";\nimport { ToolRenderer } from \"../tool-renderer\";\nimport { HelpMenu } from \"./help-menu\";\nimport { useToolBuilder } from \"./tool-editor.context\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { TerminalIcon, WandSparklesIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface PreviewTabsProps {\n  onSaveCommand?: (command: string) => void;\n  streamingTool?: Tool | null;\n  isAIGenerating?: boolean;\n}\n\nexport function PreviewTabs({ onSaveCommand, streamingTool, isAIGenerating }: PreviewTabsProps) {\n  const [currentTab, setActiveTab] = useState(\"ui\");\n\n  const { selectedCommand, tool, parameterValues, setParameterValue, initializeTool } =\n    useToolBuilder();\n  const displayTool = streamingTool ?? tool;\n\n  return (\n    <div className=\"flex h-full max-w-full flex-col\">\n      <Tabs\n        value={currentTab}\n        onValueChange={setActiveTab}\n        className=\"flex h-full w-full flex-col\"\n      >\n        <div className=\"relative mx-auto flex w-fit items-center gap-2\">\n          <TabsList className=\"flex w-fit justify-center\">\n            <TabsTrigger value=\"json\">Json</TabsTrigger>\n            <TabsTrigger value=\"ui\">Preview</TabsTrigger>\n            <TabsTrigger value=\"help\">Help</TabsTrigger>\n          </TabsList>\n          {isAIGenerating && <WandSparklesIcon className=\"h-4 w-4 animate-pulse text-purple-500\" />}\n        </div>\n        <div className=\"relative min-h-0 flex-1\">\n          <TabsContent\n            value=\"json\"\n            className=\"absolute inset-0 flex flex-col\"\n          >\n            {streamingTool ? (\n              <>\n                <div className=\"shrink-0 border-b p-2\">\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"text-xs\"\n                  >\n                    AI preview — not yet applied\n                  </Badge>\n                </div>\n                <ScrollArea className=\"min-h-0 flex-1\">\n                  <div className=\"p-2\">\n                    <JsonOutput tool={streamingTool} />\n                  </div>\n                </ScrollArea>\n              </>\n            ) : (\n              <JsonOutput\n                tool={tool}\n                onApply={initializeTool}\n              />\n            )}\n          </TabsContent>\n          <TabsContent\n            value=\"ui\"\n            className=\"absolute inset-0 flex flex-col gap-2 p-1\"\n          >\n            <Card className=\"flex min-h-0 flex-1 flex-col\">\n              <CardHeader hidden={true}>\n                <CardDescription hidden={true}></CardDescription>\n                <CardTitle>Runtime Preview</CardTitle>\n              </CardHeader>\n              <CardContent className=\"min-h-0 flex-1 p-0\">\n                <ScrollArea className=\"h-full\">\n                  <div className=\"space-y-4 p-6\">\n                    <ToolRenderer\n                      selectedCommand={selectedCommand}\n                      tool={displayTool}\n                      parameterValues={parameterValues}\n                      updateParameterValue={(key, value) => setParameterValue(key, value)}\n                    />\n                  </div>\n                </ScrollArea>\n              </CardContent>\n            </Card>\n\n            <div className=\"shrink-0\">\n              <Card>\n                <CardHeader>\n                  <CardTitle className=\"flex items-center gap-2\">\n                    <TerminalIcon className=\"h-5 w-5\" />\n                    Generated Command\n                  </CardTitle>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <GeneratedCommand\n                    tool={tool}\n                    parameterValues={parameterValues}\n                    onSaveCommand={onSaveCommand}\n                  />\n                </CardContent>\n              </Card>\n            </div>\n          </TabsContent>\n          <TabsContent\n            value=\"help\"\n            className=\"absolute inset-0 overflow-y-auto\"\n          >\n            <Card className=\"rounded-xl p-0\">\n              <CardHeader hidden={true}>\n                <CardDescription hidden={true}>\n                  Get help with using this tool and its features.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-0\">\n                <HelpMenu />\n              </CardContent>\n            </Card>\n          </TabsContent>\n        </div>\n      </Tabs>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/preview-tabs.tsx"
     },
@@ -72,7 +72,7 @@
     },
     {
       "path": "registry/commandly/tool-editor/dialogs/tool-details-dialog.tsx",
-      "content": "import { useToolBuilder } from \"../tool-editor.context\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { MultiSelect } from \"@/components/ui/multi-select\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { SupportedToolInputType, SupportedToolOutputType } from \"@/lib/types\";\nimport { ToolMetadata } from \"@/registry/commandly/lib/types/commandly\";\nimport { TagsInput } from \"@/registry/commandly/ui/tags-input\";\nimport { SettingsIcon } from \"lucide-react\";\n\nconst supportedInputOptions = [\n  { value: \"StandardInput\", label: \"Standard Input\" },\n  { value: \"Parameter\", label: \"Parameter\" },\n];\n\nconst supportedOutputOptions = [\n  { value: \"StandardOutput\", label: \"Standard Output\" },\n  { value: \"File\", label: \"File\" },\n];\n\nexport function ToolDetailsDialog() {\n  const { tool, dialogs, setDialogOpen, updateTool } = useToolBuilder();\n\n  const isOpen = dialogs.editTool;\n  return (\n    <Dialog\n      open={isOpen}\n      onOpenChange={(open) => setDialogOpen(\"editTool\", open)}\n    >\n      <DialogContent className=\"max-w-2xl\">\n        <DialogHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            <SettingsIcon className=\"h-5 w-5\" />\n            Edit Tool Settings\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"space-y-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-name-full\">Tool Name</Label>\n              <Input\n                id=\"tool-name-full\"\n                value={tool.name}\n                onChange={(e) => {\n                  const newName = e.target.value;\n                  const prevName = tool.name;\n                  updateTool({\n                    name: newName,\n                    commands: tool.commands.map((cmd) =>\n                      cmd.name === prevName ? { ...cmd, name: newName } : cmd,\n                    ),\n                  });\n                }}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-display-name\">Display Name</Label>\n              <Input\n                id=\"tool-display-name\"\n                value={tool.displayName}\n                onChange={(e) => updateTool({ displayName: e.target.value })}\n              />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-version-full\">Version</Label>\n              <Input\n                id=\"tool-version-full\"\n                value={tool.version}\n                onChange={(e) => updateTool({ version: e.target.value })}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-category\">Category</Label>\n              <Input\n                id=\"tool-category\"\n                value={tool.category}\n                onChange={(e) => updateTool({ category: e.target.value })}\n              />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-name-full\">Supported Input</Label>\n              <MultiSelect\n                options={supportedInputOptions}\n                onValueChange={(value) =>\n                  updateTool({\n                    metadata: {\n                      ...tool.metadata,\n                      supportedInput: value.map((v) => v as SupportedToolInputType),\n                    } as ToolMetadata,\n                  })\n                }\n                defaultValue={tool.metadata?.supportedInput}\n                placeholder=\"Select input types\"\n                variant=\"default\"\n                maxCount={0}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-display-name\">Supported Output</Label>\n              <MultiSelect\n                options={supportedOutputOptions}\n                onValueChange={(value) =>\n                  updateTool({\n                    metadata: {\n                      ...tool.metadata,\n                      supportedOutput: value.map((v) => v as SupportedToolOutputType),\n                    } as ToolMetadata,\n                  })\n                }\n                defaultValue={tool.metadata?.supportedOutput}\n                placeholder=\"Select output types\"\n                variant=\"default\"\n                maxCount={0}\n              />\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-2\">\n            <Label>Tags</Label>\n            <TagsInput\n              value={tool.tags || []}\n              onValueChange={(tags) => {\n                updateTool({ tags });\n              }}\n              placeholder=\"Add tags\"\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <Label htmlFor=\"tool-description\">Description</Label>\n            <Textarea\n              id=\"tool-description\"\n              value={tool.description}\n              onChange={(e) => updateTool({ description: e.target.value })}\n              rows={3}\n            />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button\n            variant=\"outline\"\n            onClick={() => setDialogOpen(\"editTool\", false)}\n          >\n            Close\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "content": "import { useToolBuilder } from \"../tool-editor.context\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { MultiSelect } from \"@/components/ui/multi-select\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { SupportedToolInputType, SupportedToolOutputType } from \"@/lib/types\";\nimport { ToolMetadata } from \"@/registry/commandly/lib/types/commandly\";\nimport { TagsInput } from \"@/registry/commandly/ui/tags-input\";\nimport { SettingsIcon } from \"lucide-react\";\n\nconst supportedInputOptions = [\n  { value: \"StandardInput\", label: \"Standard Input\" },\n  { value: \"Parameter\", label: \"Parameter\" },\n];\n\nconst supportedOutputOptions = [\n  { value: \"StandardOutput\", label: \"Standard Output\" },\n  { value: \"File\", label: \"File\" },\n];\n\nexport function ToolDetailsDialog() {\n  const { tool, dialogs, setDialogOpen, updateTool } = useToolBuilder();\n\n  const isOpen = dialogs.editTool;\n  return (\n    <Dialog\n      open={isOpen}\n      onOpenChange={(open) => setDialogOpen(\"editTool\", open)}\n    >\n      <DialogContent className=\"max-w-2xl\">\n        <DialogHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            <SettingsIcon className=\"h-5 w-5\" />\n            Edit Tool Settings\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"space-y-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-name-full\">Tool Name</Label>\n              <Input\n                id=\"tool-name-full\"\n                value={tool.name}\n                onChange={(e) => {\n                  const newName = e.target.value;\n                  const prevName = tool.name;\n                  updateTool({\n                    name: newName,\n                    commands: tool.commands.map((cmd) =>\n                      cmd.name === prevName ? { ...cmd, name: newName } : cmd,\n                    ),\n                  });\n                }}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-display-name\">Display Name</Label>\n              <Input\n                id=\"tool-display-name\"\n                value={tool.displayName}\n                onChange={(e) => updateTool({ displayName: e.target.value })}\n              />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-version-full\">Version</Label>\n              <Input\n                id=\"tool-version-full\"\n                value={tool.version}\n                onChange={(e) => updateTool({ version: e.target.value })}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-category\">Category</Label>\n              <Input\n                id=\"tool-category\"\n                value={tool.category}\n                onChange={(e) => updateTool({ category: e.target.value })}\n              />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-name-full\">Supported Input</Label>\n              <MultiSelect\n                options={supportedInputOptions}\n                onValueChange={(value) =>\n                  updateTool({\n                    metadata: {\n                      ...tool.metadata,\n                      supportedInput: value.map((v) => v as SupportedToolInputType),\n                    } as ToolMetadata,\n                  })\n                }\n                defaultValue={tool.metadata?.supportedInput}\n                placeholder=\"Select input types\"\n                variant=\"default\"\n                maxCount={0}\n              />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"tool-display-name\">Supported Output</Label>\n              <MultiSelect\n                options={supportedOutputOptions}\n                onValueChange={(value) =>\n                  updateTool({\n                    metadata: {\n                      ...tool.metadata,\n                      supportedOutput: value.map((v) => v as SupportedToolOutputType),\n                    } as ToolMetadata,\n                  })\n                }\n                defaultValue={tool.metadata?.supportedOutput}\n                placeholder=\"Select output types\"\n                variant=\"default\"\n                maxCount={0}\n              />\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <Label htmlFor=\"tool-url\">URL</Label>\n            <Input\n              id=\"tool-url\"\n              value={tool.url ?? \"\"}\n              onChange={(e) => updateTool({ url: e.target.value || undefined })}\n              placeholder=\"https://example.com\"\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-2\">\n            <Label>Tags</Label>\n            <TagsInput\n              value={tool.tags || []}\n              onValueChange={(tags) => {\n                updateTool({ tags });\n              }}\n              placeholder=\"Add tags\"\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <Label htmlFor=\"tool-description\">Description</Label>\n            <Textarea\n              id=\"tool-description\"\n              value={tool.description}\n              onChange={(e) => updateTool({ description: e.target.value })}\n              rows={3}\n            />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button\n            variant=\"outline\"\n            onClick={() => setDialogOpen(\"editTool\", false)}\n          >\n            Close\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/tool-editor/dialogs/tool-details-dialog.tsx"
     },
@@ -90,7 +90,7 @@
     },
     {
       "path": "registry/commandly/generated-command.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand?.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    if (!selectedCommand) return;\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/generated-command.tsx"
     },
@@ -107,7 +107,7 @@
     },
     {
       "path": "registry/commandly/json-output.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n}\n\nexport function JsonOutput({ tool }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <CardAction\n          className=\"rounded-md\"\n          onClick={() => {\n            navigator.clipboard.writeText(jsonString!);\n            toast(\"Copied!\");\n          }}\n        >\n          <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <ScrollArea\n          className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n          type=\"hover\"\n        >\n          <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n            {jsonString}\n          </pre>\n          <ScrollBar orientation=\"vertical\" />\n          <ScrollBar orientation=\"horizontal\" />\n        </ScrollArea>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon, Edit2Icon, XIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n  onApply?: (tool: Tool) => void;\n}\n\nexport function JsonOutput({ tool, onApply }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(\"\");\n\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  const handleEditToggle = () => {\n    setEditValue(jsonString ?? \"\");\n    setIsEditing(true);\n  };\n\n  const handleApply = () => {\n    try {\n      const parsed = JSON.parse(editValue) as Tool;\n      onApply!(parsed);\n      setIsEditing(false);\n    } catch {\n      toast.error(\"Invalid JSON\", { description: \"Please fix the JSON before applying.\" });\n    }\n  };\n\n  const handleCancel = () => {\n    setIsEditing(false);\n    setEditValue(\"\");\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <div className=\"flex gap-3\">\n          {onApply && !isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleEditToggle}\n            >\n              <Edit2Icon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          {onApply && isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleCancel}\n            >\n              <XIcon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          <CardAction\n            className=\"rounded-md\"\n            onClick={() => {\n              navigator.clipboard.writeText(jsonString!);\n              toast(\"Copied!\");\n            }}\n          >\n            <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n          </CardAction>\n        </div>\n      </CardHeader>\n      <CardContent>\n        {isEditing ? (\n          <div className=\"flex flex-col gap-2\">\n            <ScrollArea\n              className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-360px)]\"\n              type=\"hover\"\n            >\n              <Textarea\n                className=\"min-h-[calc(100vh-400px)] font-mono text-sm\"\n                value={editValue}\n                onChange={(e) => setEditValue(e.target.value)}\n                spellCheck={false}\n              />\n              <ScrollBar orientation=\"vertical\" />\n              <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n            <div className=\"flex justify-end gap-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={handleCancel}\n              >\n                Cancel\n              </Button>\n              <Button\n                size=\"sm\"\n                onClick={handleApply}\n              >\n                Apply\n              </Button>\n            </div>\n          </div>\n        ) : (\n          <ScrollArea\n            className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n            type=\"hover\"\n          >\n            <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n              {jsonString}\n            </pre>\n            <ScrollBar orientation=\"vertical\" />\n            <ScrollBar orientation=\"horizontal\" />\n          </ScrollArea>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/json-output.tsx"
     },
@@ -118,17 +118,17 @@
     },
     {
       "path": "registry/commandly/lib/types/commandly-nested.ts",
-      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
+      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  $schema?: string;\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly.ts",
-      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n",
+      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/flat.json\",\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    url: tool.url,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n\nconst isEmpty = (value: unknown[] | Record<string, unknown> | null | undefined): boolean => {\n  if (value == null) return true;\n  if (Array.isArray(value)) return value.length === 0;\n  return Object.keys(value).length === 0;\n};\n\nconst cleanParameter = (param: Parameter): Parameter => {\n  const cleaned = { ...param };\n\n  if (isEmpty(cleaned.enumValues)) delete cleaned.enumValues;\n  if (isEmpty(cleaned.validations)) delete cleaned.validations;\n  if (isEmpty(cleaned.dependencies)) delete cleaned.dependencies;\n\n  if (cleaned.metadata) {\n    const meta = { ...cleaned.metadata };\n    if (isEmpty(meta.tags)) delete meta.tags;\n    if (isEmpty(meta as Record<string, unknown>)) {\n      delete cleaned.metadata;\n    } else {\n      cleaned.metadata = meta;\n    }\n  }\n\n  return cleaned;\n};\n\nexport const cleanupTool = (tool: Tool): Tool => {\n  const cleaned = { ...tool };\n\n  if (isEmpty(cleaned.tags)) delete cleaned.tags;\n  if (isEmpty(cleaned.exclusionGroups)) delete cleaned.exclusionGroups;\n  if (isEmpty(cleaned.metadata as Record<string, unknown> | null | undefined))\n    delete cleaned.metadata;\n\n  cleaned.parameters = cleaned.parameters.map(cleanParameter);\n\n  return cleaned;\n};\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly-nested.ts",
-      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
+      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/nested.json\",\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
       "type": "registry:lib"
     }
   ],
diff --git a/public/r/tool-renderer.json b/public/r/tool-renderer.json
index 914efb2..aa474da 100644
--- a/public/r/tool-renderer.json
+++ b/public/r/tool-renderer.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "registry/commandly/lib/types/commandly-nested.ts",
-      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
+      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  $schema?: string;\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
       "type": "registry:lib"
     }
   ],
diff --git a/public/r/ui.json b/public/r/ui.json
index ce70ce8..2e99ec2 100644
--- a/public/r/ui.json
+++ b/public/r/ui.json
@@ -23,13 +23,13 @@
   "files": [
     {
       "path": "registry/commandly/generated-command.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Parameter, ParameterValue, Tool, Command } from \"@/registry/commandly/lib/types/commandly\";\nimport { getCommandPath } from \"@/registry/commandly/lib/utils/commandly\";\nimport { TerminalIcon, CopyIcon, SaveIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useState, useMemo } from \"react\";\nimport { toast } from \"sonner\";\n\ninterface GeneratedCommandProps {\n  tool: Tool;\n  selectedCommand?: Command;\n  parameterValues: Record<string, ParameterValue>;\n  onSaveCommand?: (command: string) => void;\n}\n\nexport function GeneratedCommand({\n  tool,\n  selectedCommand,\n  parameterValues,\n  onSaveCommand,\n}: GeneratedCommandProps) {\n  selectedCommand = selectedCommand || tool.commands[0];\n  const [generatedCommand, setGeneratedCommand] = useState(\"\");\n\n  const globalParameters = useMemo(() => {\n    return tool.parameters?.filter((p) => p.isGlobal) || [];\n  }, [tool]);\n\n  const currentParameters = useMemo(() => {\n    return tool?.parameters?.filter((p) => p.commandKey === selectedCommand?.key) || [];\n  }, [tool, selectedCommand]);\n\n  const generateCommand = useCallback(() => {\n    if (!selectedCommand) return;\n    const commandPath = getCommandPath(selectedCommand, tool);\n    let command = tool.name == commandPath ? tool.name : `${tool.name} ${commandPath}`;\n\n    const parametersWithValues: Array<{\n      param: Parameter;\n      value: ParameterValue;\n    }> = [];\n\n    globalParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    currentParameters.forEach((param) => {\n      const value = parameterValues[param.key];\n      if (value !== undefined && value !== \"\" && value !== false && !param.isGlobal) {\n        parametersWithValues.push({ param, value });\n      }\n    });\n\n    const positionalParams = parametersWithValues\n      .filter(({ param }) => param.parameterType === \"Argument\")\n      .sort((a, b) => (a.param.position || 0) - (b.param.position || 0));\n\n    parametersWithValues.forEach(({ param, value }) => {\n      if (param.parameterType === \"Flag\") {\n        if (value === true) {\n          const flag = param.shortFlag || param.longFlag;\n          if (flag) command += ` ${flag}`;\n        }\n      } else if (param.parameterType === \"Option\") {\n        const flag = param.shortFlag || param.longFlag;\n        if (flag) {\n          const separator = param.keyValueSeparator ?? \" \";\n          command += ` ${flag}${separator}${value}`;\n        }\n      } else if (param.parameterType === \"Argument\") {\n        command += ` ${value}`;\n      }\n    });\n\n    positionalParams.forEach(({ value }) => {\n      command += ` ${value}`;\n    });\n\n    setGeneratedCommand(command);\n  }, [tool, parameterValues, selectedCommand, globalParameters, currentParameters]);\n\n  useEffect(() => {\n    generateCommand();\n  }, [generateCommand]);\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(generatedCommand);\n    toast(\"Command copied!\");\n  };\n\n  return (\n    <div>\n      {tool.commands.length === 0 ? (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">No commands available for this tool.</p>\n        </div>\n      ) : generatedCommand ? (\n        <div className=\"space-y-4\">\n          <div className=\"rounded bg-muted p-4 font-mono text-sm\">{generatedCommand}</div>\n          <div className=\"flex gap-2\">\n            <Button\n              onClick={copyCommand}\n              variant=\"outline\"\n              className=\"flex-1\"\n            >\n              <CopyIcon className=\"mr-2 h-4 w-4\" />\n              Copy Command\n            </Button>\n            {onSaveCommand && (\n              <Button\n                onClick={() => onSaveCommand(generatedCommand)}\n                variant=\"outline\"\n                className=\"flex-1\"\n              >\n                <SaveIcon className=\"mr-2 h-4 w-4\" />\n                Save Command\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : (\n        <div className=\"py-8 text-center\">\n          <TerminalIcon className=\"mx-auto mb-4 h-12 w-12 text-muted-foreground\" />\n          <p className=\"text-muted-foreground\">Configure parameters to generate the command.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/generated-command.tsx"
     },
     {
       "path": "registry/commandly/json-output.tsx",
-      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n}\n\nexport function JsonOutput({ tool }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <CardAction\n          className=\"rounded-md\"\n          onClick={() => {\n            navigator.clipboard.writeText(jsonString!);\n            toast(\"Copied!\");\n          }}\n        >\n          <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <ScrollArea\n          className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n          type=\"hover\"\n        >\n          <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n            {jsonString}\n          </pre>\n          <ScrollBar orientation=\"vertical\" />\n          <ScrollBar orientation=\"horizontal\" />\n        </ScrollArea>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Command as UICommand,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\nimport { Tool } from \"@/registry/commandly/lib/types/commandly\";\nimport { exportToStructuredJSON } from \"@/registry/commandly/lib/utils/commandly\";\nimport { convertToNestedStructure } from \"@/registry/commandly/lib/utils/commandly-nested\";\nimport { CheckIcon, ChevronsUpDownIcon, CopyIcon, Edit2Icon, XIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nconst jsonOptions = [\n  { value: \"nested\", label: \"Nested\" },\n  { value: \"flat\", label: \"Flat\" },\n];\n\ninterface JsonTypeComponentProps {\n  tool: Tool;\n  onApply?: (tool: Tool) => void;\n}\n\nexport function JsonOutput({ tool, onApply }: JsonTypeComponentProps) {\n  const [open, setOpen] = useState(false);\n  const [jsonString, setJsonString] = useState<string>();\n  const [jsonType, setJsonType] = useState<\"nested\" | \"flat\">(\"flat\");\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(\"\");\n\n  useEffect(() => {\n    const config =\n      jsonType === \"flat\" ? exportToStructuredJSON(tool) : convertToNestedStructure(tool);\n    setJsonString(JSON.stringify(config, null, 2));\n  }, [jsonType, tool]);\n\n  const handleEditToggle = () => {\n    setEditValue(jsonString ?? \"\");\n    setIsEditing(true);\n  };\n\n  const handleApply = () => {\n    try {\n      const parsed = JSON.parse(editValue) as Tool;\n      onApply!(parsed);\n      setIsEditing(false);\n    } catch {\n      toast.error(\"Invalid JSON\", { description: \"Please fix the JSON before applying.\" });\n    }\n  };\n\n  const handleCancel = () => {\n    setIsEditing(false);\n    setEditValue(\"\");\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>\n          <span className=\"text-sm\">Output type: </span>\n          <Popover\n            open={open}\n            onOpenChange={setOpen}\n          >\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                aria-expanded={open}\n                className=\"w-48 justify-between\"\n              >\n                {jsonOptions.find((option) => option.value === jsonType)?.label}\n                <ChevronsUpDownIcon className=\"opacity-50\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-48 p-0\">\n              <UICommand>\n                <CommandList>\n                  <CommandGroup>\n                    {jsonOptions.map((option) => (\n                      <CommandItem\n                        key={option.value}\n                        value={option.value}\n                        onSelect={(currentValue) => {\n                          setJsonType(currentValue as \"nested\" | \"flat\");\n                          setOpen(false);\n                        }}\n                      >\n                        {option.label}\n                        <CheckIcon\n                          className={cn(\n                            \"ml-auto h-4 w-4\",\n                            jsonType === option.value ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </UICommand>\n            </PopoverContent>\n          </Popover>\n        </CardTitle>\n        <div className=\"flex gap-3\">\n          {onApply && !isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleEditToggle}\n            >\n              <Edit2Icon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          {onApply && isEditing && (\n            <CardAction\n              className=\"rounded-md\"\n              onClick={handleCancel}\n            >\n              <XIcon className=\"h-4 w-4 dark:stroke-primary\" />\n            </CardAction>\n          )}\n          <CardAction\n            className=\"rounded-md\"\n            onClick={() => {\n              navigator.clipboard.writeText(jsonString!);\n              toast(\"Copied!\");\n            }}\n          >\n            <CopyIcon className=\"h-4 w-4 dark:stroke-primary\" />\n          </CardAction>\n        </div>\n      </CardHeader>\n      <CardContent>\n        {isEditing ? (\n          <div className=\"flex flex-col gap-2\">\n            <ScrollArea\n              className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-360px)]\"\n              type=\"hover\"\n            >\n              <Textarea\n                className=\"min-h-[calc(100vh-400px)] font-mono text-sm\"\n                value={editValue}\n                onChange={(e) => setEditValue(e.target.value)}\n                spellCheck={false}\n              />\n              <ScrollBar orientation=\"vertical\" />\n              <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n            <div className=\"flex justify-end gap-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={handleCancel}\n              >\n                Cancel\n              </Button>\n              <Button\n                size=\"sm\"\n                onClick={handleApply}\n              >\n                Apply\n              </Button>\n            </div>\n          </div>\n        ) : (\n          <ScrollArea\n            className=\"max-w-full *:data-radix-scroll-area-viewport:max-h-[calc(100vh-320px)]\"\n            type=\"hover\"\n          >\n            <pre className=\"max-h max-w-full rounded-md bg-card font-mono text-sm dark:text-gray-200\">\n              {jsonString}\n            </pre>\n            <ScrollBar orientation=\"vertical\" />\n            <ScrollBar orientation=\"horizontal\" />\n          </ScrollArea>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/commandly/json-output.tsx"
     },
@@ -51,17 +51,17 @@
     },
     {
       "path": "registry/commandly/lib/types/commandly-nested.ts",
-      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
+      "content": "import type {\n  ExclusionType,\n  ParameterDataType,\n  ParameterDependencyType,\n  ParameterMetadata,\n  ParameterType,\n  ParameterValidationType,\n  ToolMetadata,\n} from \"./commandly\";\n\nexport interface NestedParameterEnumValue {\n  value: string;\n  displayName: string;\n  description?: string;\n  isDefault?: boolean;\n  sortOrder?: number;\n}\n\nexport interface NestedParameterValidation {\n  validationType: ParameterValidationType;\n  validationValue: string;\n  errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n  dependsOnParameter: string;\n  dependencyType: ParameterDependencyType;\n  conditionValue?: string;\n}\n\nexport interface NestedParameter {\n  name: string;\n  description?: string;\n  parameterType: ParameterType;\n  dataType: ParameterDataType;\n  metadata?: ParameterMetadata;\n  isRequired: boolean;\n  isRepeatable: boolean;\n  isGlobal: boolean;\n  defaultValue?: string;\n  shortFlag?: string;\n  longFlag?: string;\n  position?: number;\n  sortOrder?: number;\n  arraySeparator?: string;\n  keyValueSeparator?: string;\n  enumValues?: NestedParameterEnumValue[];\n  validations?: NestedParameterValidation[];\n  dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n  name: string;\n  description?: string;\n  isDefault: boolean;\n  sortOrder: number;\n  parameters: NestedParameter[];\n  subcommands: NestedCommand[];\n}\n\nexport interface NestedExclusionGroup {\n  name: string;\n  exclusionType: ExclusionType;\n  parameters: string[];\n}\n\nexport interface NestedTool {\n  $schema?: string;\n  name: string;\n  displayName: string;\n  description?: string;\n  version?: string;\n  url?: string;\n  globalParameters: NestedParameter[];\n  commands: NestedCommand[];\n  exclusionGroups?: NestedExclusionGroup[] | null;\n  metadata?: ToolMetadata;\n}\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly.ts",
-      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n",
+      "content": "import type {\n  Command,\n  ExclusionGroup,\n  Parameter,\n  SavedCommand,\n  Tool,\n} from \"@/registry/commandly/lib/types/commandly\";\n\nexport const buildCommandHierarchy = (commands: Command[]): Command[] => {\n  return commands.sort(\n    (a, b) => (a.sortOrder ?? commands.indexOf(a)) - (b.sortOrder ?? commands.indexOf(b)),\n  );\n};\n\nexport const slugify = (text: string): string => {\n  return text\n    .toString()\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\") // Replace spaces with -\n    .replace(/[^\\w-]+/g, \"\") // Remove all non-word chars\n    .replace(/--+/g, \"-\") // Replace multiple - with single -\n    .replace(/^-+/, \"\") // Trim - from start of text\n    .replace(/-+$/, \"\"); // Trim - from end of text\n};\n\nexport const getCommandPath = (command: Command, tool: Tool): string => {\n  const findCommandPath = (\n    targetKey: string,\n    commands: Command[],\n    path: string[] = [],\n  ): string[] | null => {\n    for (const cmd of commands) {\n      if (cmd.name === targetKey) {\n        return [...path, cmd.name];\n      }\n\n      const childCommands = commands.filter((c) => c.parentCommandKey === cmd.key);\n      if (childCommands.length > 0) {\n        const subPath = findCommandPath(targetKey, childCommands, [...path, cmd.name]);\n        if (subPath) {\n          return subPath;\n        }\n      }\n    }\n    return null;\n  };\n\n  const rootCommands = tool.commands.filter((c) => !c.parentCommandKey);\n  const path = findCommandPath(command.name, rootCommands);\n\n  if (!path) return command.name;\n\n  if (command.name === tool.name && command.isDefault) {\n    return tool.name;\n  }\n\n  const rootCommand = tool.commands.find((c) => c.name === tool.name);\n  if (rootCommand?.isDefault && path[0] === tool.name) {\n    path[0] = tool.name;\n  }\n\n  return path.join(\" \");\n};\n\nexport const getAllSubcommands = (commandKey: string, commands: Command[]): Command[] => {\n  const result: Command[] = [];\n\n  const findSubcommands = (parentKey: string) => {\n    commands.forEach((cmd) => {\n      if (cmd.parentCommandKey === parentKey) {\n        result.push(cmd);\n        findSubcommands(cmd.key);\n      }\n    });\n  };\n\n  findSubcommands(commandKey);\n  return result;\n};\n\nexport const exportToStructuredJSON = (tool: Tool) => {\n  const flattenCommand = (cmd: Command) => {\n    return { ...cmd };\n  };\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/flat.json\",\n    name: tool.name,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    url: tool.url,\n    commands: tool.commands.map(flattenCommand),\n    parameters: tool.parameters,\n    exclusionGroups: tool.exclusionGroups,\n    metadata: tool.metadata,\n  };\n};\n\nexport const flattenImportedData = (importedData: Record<string, unknown>): Tool => {\n  const {\n    name,\n    displayName,\n    commands = [],\n    exclusionGroups = [],\n    metadata = {\n      supportedInput: [],\n      supportedOutput: [],\n    },\n  } = importedData as {\n    name: string;\n    displayName?: string;\n    parameters?: Parameter[];\n    commands?: Record<string, unknown>[];\n    exclusionGroups?: ExclusionGroup[];\n    metadata?: Tool[\"metadata\"];\n  };\n\n  const allParameters: Parameter[] = [];\n\n  const flattenCommandParameters = (\n    command: Record<string, unknown>,\n    parentKey?: string,\n  ): Command[] => {\n    const {\n      parameters = [],\n      subcommands = [],\n      ...commandData\n    } = command as {\n      parameters?: Parameter[];\n      subcommands?: Record<string, unknown>[];\n      [key: string]: unknown;\n    };\n\n    (parameters as Parameter[]).forEach((param: Parameter) => {\n      allParameters.push({\n        ...param,\n        commandKey: command.key as string,\n        isGlobal: !command.name,\n      });\n    });\n\n    const flatCommand: Command = {\n      ...commandData,\n      parentCommandKey: parentKey,\n    } as Command;\n\n    const flatCommands = [flatCommand];\n\n    (subcommands as Record<string, unknown>[]).forEach((subcmd) => {\n      flatCommands.push(...flattenCommandParameters(subcmd, command.key as string));\n    });\n\n    return flatCommands;\n  };\n\n  const flatCommands: Command[] = [];\n  (commands as Record<string, unknown>[]).forEach((cmd) => {\n    flatCommands.push(...flattenCommandParameters(cmd));\n  });\n\n  return {\n    name: name,\n    displayName: displayName || name,\n    commands: flatCommands,\n    parameters: allParameters,\n    exclusionGroups,\n    metadata,\n  };\n};\n\nexport const defaultTool = (toolName?: string, displayName?: string): Tool => {\n  const finalToolName = toolName || \"my-tool\";\n  return {\n    name: finalToolName,\n    displayName: displayName || \"My Tool\",\n    commands: [\n      {\n        key: slugify(finalToolName),\n        name: finalToolName,\n        description: \"Main command\",\n        isDefault: true,\n        sortOrder: 0,\n      },\n    ],\n    parameters: [\n      {\n        key: \"--help\",\n        name: \"Help\",\n        description: \"Displays help menu of tool\",\n        parameterType: \"Flag\",\n        dataType: \"String\",\n        isRequired: false,\n        isGlobal: true,\n        shortFlag: \"-h\",\n        longFlag: \"--help\",\n        isRepeatable: false,\n      },\n    ],\n  };\n};\n\nexport const validateDefaultValue = (\n  parameter: Parameter,\n): { isValid: boolean; error?: string } => {\n  const { defaultValue, validations, dataType } = parameter;\n\n  if (!defaultValue || !validations) return { isValid: true };\n\n  switch (dataType) {\n    case \"Number\":\n      if (!/^-?\\d+$/.test(defaultValue)) {\n        return { isValid: false, error: \"Default value must be an integer\" };\n      }\n      break;\n    case \"Boolean\":\n      if (![\"true\", \"false\", \"1\", \"0\"].includes(defaultValue.toLowerCase())) {\n        return {\n          isValid: false,\n          error: \"Default value must be true/false or 1/0\",\n        };\n      }\n      break;\n  }\n\n  for (const validation of validations) {\n    const value = dataType === \"Number\" ? Number(defaultValue) : defaultValue;\n\n    switch (validation.validationType) {\n      case \"min_length\":\n        if (typeof value === \"string\" && value.length < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too short\",\n          };\n        }\n        break;\n      case \"max_length\":\n        if (typeof value === \"string\" && value.length > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too long\",\n          };\n        }\n        break;\n      case \"min_value\":\n        if (typeof value === \"number\" && value < Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too small\",\n          };\n        }\n        break;\n      case \"max_value\":\n        if (typeof value === \"number\" && value > Number(validation.validationValue)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value too large\",\n          };\n        }\n        break;\n      case \"regex\":\n        if (typeof value === \"string\" && !new RegExp(validation.validationValue).test(value)) {\n          return {\n            isValid: false,\n            error: validation.errorMessage || \"Value doesn't match pattern\",\n          };\n        }\n        break;\n    }\n  }\n\n  return { isValid: true };\n};\n\nexport const createNewCommand = (parentKey?: string): Command => {\n  const name = randomCommandName();\n  return {\n    key: slugify(name),\n    parentCommandKey: parentKey,\n    name,\n    isDefault: false,\n    sortOrder: 1,\n  };\n};\n\nexport const createNewParameter = (isGlobal: boolean, commandKey?: string): Parameter => {\n  return {\n    key: \"\",\n    name: \"\",\n    commandKey: isGlobal ? undefined : commandKey,\n    parameterType: \"Option\",\n    dataType: \"String\",\n    isRequired: false,\n    isRepeatable: false,\n    isGlobal,\n    longFlag: \"\",\n  };\n};\n\nexport const getSavedCommandsFromStorage = (toolId: string): SavedCommand[] => {\n  try {\n    const saved = localStorage.getItem(`saved-${toolId}`);\n    return saved ? JSON.parse(saved) : [];\n  } catch {\n    return [];\n  }\n};\n\nexport const saveSavedCommandsToStorage = (toolId: string, commands: SavedCommand[]): void => {\n  try {\n    localStorage.setItem(toolId, JSON.stringify(commands));\n  } catch (error) {\n    console.error(\"Failed to save commands to localStorage:\", error);\n  }\n};\n\nexport const addSavedCommandToStorage = (toolId: string, command: SavedCommand): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = [...existingCommands, command];\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const removeSavedCommandFromStorage = (toolId: string, commandKey: string): void => {\n  const existingCommands = getSavedCommandsFromStorage(toolId);\n  const updatedCommands = existingCommands.filter((cmd) => cmd.key !== commandKey);\n  saveSavedCommandsToStorage(toolId, updatedCommands);\n};\n\nexport const clearSavedCommandsFromStorage = (toolId: string): void => {\n  localStorage.removeItem(toolId);\n};\n\nexport const randomCommandName = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n  let result = \"\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < 7; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n};\n\nexport function generateHashCode(s: string): string {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;\n\n  return h.toString();\n}\n\nconst isEmpty = (value: unknown[] | Record<string, unknown> | null | undefined): boolean => {\n  if (value == null) return true;\n  if (Array.isArray(value)) return value.length === 0;\n  return Object.keys(value).length === 0;\n};\n\nconst cleanParameter = (param: Parameter): Parameter => {\n  const cleaned = { ...param };\n\n  if (isEmpty(cleaned.enumValues)) delete cleaned.enumValues;\n  if (isEmpty(cleaned.validations)) delete cleaned.validations;\n  if (isEmpty(cleaned.dependencies)) delete cleaned.dependencies;\n\n  if (cleaned.metadata) {\n    const meta = { ...cleaned.metadata };\n    if (isEmpty(meta.tags)) delete meta.tags;\n    if (isEmpty(meta as Record<string, unknown>)) {\n      delete cleaned.metadata;\n    } else {\n      cleaned.metadata = meta;\n    }\n  }\n\n  return cleaned;\n};\n\nexport const cleanupTool = (tool: Tool): Tool => {\n  const cleaned = { ...tool };\n\n  if (isEmpty(cleaned.tags)) delete cleaned.tags;\n  if (isEmpty(cleaned.exclusionGroups)) delete cleaned.exclusionGroups;\n  if (isEmpty(cleaned.metadata as Record<string, unknown> | null | undefined))\n    delete cleaned.metadata;\n\n  cleaned.parameters = cleaned.parameters.map(cleanParameter);\n\n  return cleaned;\n};\n",
       "type": "registry:lib"
     },
     {
       "path": "registry/commandly/lib/utils/commandly-nested.ts",
-      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
+      "content": "import {\n  NestedCommand,\n  NestedExclusionGroup,\n  NestedParameter,\n  NestedTool,\n} from \"../types/commandly-nested\";\nimport type { Tool, Command, Parameter } from \"@/registry/commandly/lib/types/commandly\";\n\nexport const convertToNestedStructure = (tool: Tool): NestedTool => {\n  const globalParameters = tool.parameters.filter((p) => p.isGlobal);\n\n  const convertParameter = (param: Parameter): NestedParameter => {\n    const { ...rest } = param;\n    return {\n      ...rest,\n      validations: param.validations?.map((v) => {\n        return {\n          validationType: v.validationType,\n          validationValue: v.validationValue,\n          errorMessage: v.errorMessage,\n        };\n      }),\n      metadata: param.metadata,\n      dataType: param.dataType,\n      dependencies: param.dependencies?.map((dep) => {\n        const dependsOnParam = tool.parameters.find((p) => p.key === dep.dependsOnParameterKey);\n        return {\n          dependsOnParameter: dependsOnParam?.longFlag || \"\",\n          dependencyType: dep.dependencyType,\n          conditionValue: dep.conditionValue,\n        };\n      }),\n    };\n  };\n\n  const buildNestedCommands = (commands: Command[], parentKey?: string): NestedCommand[] => {\n    return commands\n      .filter((cmd) => cmd.parentCommandKey === parentKey)\n      .map((cmd) => {\n        const commandParameters = tool.parameters.filter(\n          (p) => p.commandKey === cmd.key && !p.isGlobal,\n        );\n        return {\n          name: cmd.name,\n          description: cmd.description,\n          isDefault: cmd.isDefault ?? false,\n          sortOrder: cmd.sortOrder ?? 0,\n          parameters: commandParameters.map(convertParameter),\n          subcommands: buildNestedCommands(commands, cmd.key),\n        };\n      });\n  };\n\n  const nestedExclusionGroups: NestedExclusionGroup[] | undefined = tool.exclusionGroups?.map(\n    (group) => {\n      return {\n        name: group.name,\n        exclusionType: group.exclusionType,\n        parameters: group.parameterKeys.map((pk) => {\n          const param = tool.parameters.find((p) => p.key === pk);\n          return param?.longFlag || \"\";\n        }),\n      };\n    },\n  );\n\n  return {\n    $schema: \"https://commandly.divyeshio.in/specification/nested.json\",\n    name: tool.name,\n    url: tool.url,\n    displayName: tool.displayName,\n    description: tool.description,\n    version: tool.version,\n    metadata: tool.metadata,\n    globalParameters: globalParameters.map(convertParameter),\n    commands: buildNestedCommands(tool.commands),\n    exclusionGroups: nestedExclusionGroups,\n  };\n};\n",
       "type": "registry:lib"
     }
   ],
diff --git a/public/specification/nested.json b/public/specification/nested.json
index 2974eba..2f51eca 100644
--- a/public/specification/nested.json
+++ b/public/specification/nested.json
@@ -1,6 +1,9 @@
 {
   "type": "object",
   "properties": {
+    "$schema": {
+      "type": "string"
+    },
     "name": {
       "type": "string"
     },