Merge pull request #244 from underctrl-io/devtools-ai-indicator

feat(devtools): add ai indicator to commands

Author: twlite

package.json

@@ -59,7 +59,9 @@
       "http-proxy-middleware@>=1.3.0 <2.0.9": ">=2.0.9",
       "http-proxy-middleware@>=1.3.0 <2.0.8": ">=2.0.8",
       "undici@>=6.0.0 <6.21.2": ">=6.21.2",
-      "webpack-dev-server@<=5.2.0": ">=5.2.1"
+      "webpack-dev-server@<=5.2.0": ">=5.2.1",
+      "brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12",
+      "brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2"
     },
     "onlyBuiltDependencies": [
       "@swc/core",

packages/devtools-ui/src/routes/commands.tsx

@@ -26,6 +26,8 @@ interface CommandData {
   parentPath: string;
   relativePath: string;
   middlewares: string[];
+  supportsAI: boolean;
+  description?: string;
 }
 
 interface MiddlewareData {
@@ -52,12 +54,25 @@ const CommandDetails = ({
 }) => {
   return (
     <Card className="p-4 mt-4 bg-muted/50 border-l-4 border-l-primary rounded-sm">
-      <h3 className="text-lg font-bold mb-2">{command.name}</h3>
+      <h3 className="text-lg font-bold mb-2">
+        {command.name}
+        {command.supportsAI && (
+          <Badge variant="outline" className="ml-2">
+            ✨
+          </Badge>
+        )}
+      </h3>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
         <div>
           <p className="text-muted-foreground">ID:</p>
           <p className="font-mono text-xs break-all">{command.id}</p>
         </div>
+        {command.description && (
+          <div>
+            <p className="text-muted-foreground">Description:</p>
+            <p className="italic">{command.description}</p>
+          </div>
+        )}
         <div>
           <p className="text-muted-foreground">Category:</p>
           <p>{command.category || 'Uncategorized'}</p>
@@ -106,13 +121,15 @@ const TreeNode = ({
   hasMiddleware = false,
   onClick,
   isSelected,
+  supportsAI,
 }: {
   name: string;
   children?: React.ReactNode;
   isCommand?: boolean;
   hasMiddleware?: boolean;
   onClick?: () => void;
   isSelected?: boolean;
+  supportsAI?: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const hasChildren = Boolean(children);
@@ -159,6 +176,11 @@ const TreeNode = ({
             <Shield className="h-3 w-3 mr-1" />λ
           </Badge>
         )}
+        {supportsAI && (
+          <Badge variant="outline" className="ml-2 py-0 h-5">
+            ✨
+          </Badge>
+        )}
       </div>
 
       {hasChildren && isOpen && (
@@ -236,6 +258,7 @@ function CommandHierarchy() {
                       key={command.id}
                       name={command.name}
                       isCommand={true}
+                      supportsAI={command.supportsAI}
                       hasMiddleware={command.middlewares.length > 0}
                       onClick={() => setSelectedCommand(command.id)}
                       isSelected={selectedCommand === command.id}

packages/devtools/src/server/routes/commands.ts

@@ -14,11 +14,13 @@ app.get('/', (req, res) => {
       {
         id: command.command.id,
         name: command.data.command.name,
+        description: command.data.command.description,
         path: command.command.path,
         category: command.command.category,
         parentPath: command.command.parentPath,
         relativePath: command.command.relativePath,
         middlewares: command.command.middlewares,
+        supportsAI: !!command.data.ai,
       },
     ];
   });