{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tool-renderer", "title": "Tool Renderer", "description": "A component that provides real-time preview of CLI command execution and output.", "dependencies": [ "react" ], "registryDependencies": [ "button", "scroll-area", "tabs" ], "files": [ { "path": "registry/commandly/tool-renderer.tsx", "content": "import { ParameterValue } from \"@/components/commandly/types/flat\";\nimport { Command, Tool } from \"@/components/commandly/types/flat\";\nimport {\n ParameterRenderContext,\n ParameterRendererEntry,\n} from \"@/components/commandly/types/renderer\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command as UICommand,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { MultiSelect } from \"@/components/ui/multi-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronsUpDownIcon, InfoIcon, PlusIcon, XIcon } from \"lucide-react\";\nimport React, { useMemo } from \"react\";\n\nconst findDefaultCommand = (tool: Tool): Command | null => {\n const nameMatchCommand = tool.commands.find(\n (command) => command.name.toLowerCase() === tool.binaryName.toLowerCase(),\n );\n if (nameMatchCommand) return nameMatchCommand;\n\n return tool.commands.length > 0 ? tool.commands[0] : null;\n};\n\ninterface ParameterLabelProps {\n name: string;\n longFlag?: string;\n shortFlag?: string;\n isRequired?: boolean;\n isGlobal?: boolean;\n description?: string;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction ParameterLabel({\n name,\n longFlag,\n shortFlag,\n isRequired,\n isGlobal,\n description,\n className,\n children,\n}: ParameterLabelProps) {\n return (\n \n );\n}\n\nfunction FlagInput({ parameter, value, onUpdate }: ParameterRenderContext) {\n return (\n
\n \n \n
\n );\n}\n\nfunction OptionEnumInput({ parameter, value, onUpdate }: ParameterRenderContext) {\n const [open, setOpen] = React.useState(false);\n const separator = parameter.enum?.separator || \",\";\n const options =\n parameter.enum?.values?.map((e) => ({\n value: e.value,\n label: e.displayName || e.value,\n })) ?? [];\n\n const label = (\n \n );\n\n if (parameter.enum?.allowMultiple) {\n const selected = Array.isArray(value)\n ? (value as string[]).filter(Boolean)\n : value\n ? (value as string).split(separator).filter(Boolean)\n : [];\n return (\n
\n {label}\n onUpdate(vals.join(separator))}\n placeholder=\"Select options\"\n />\n
\n );\n }\n\n return (\n
\n {label}\n \n \n \n {options.find((o) => o.value === value)?.label ?? \"Select an option\"}\n \n \n \n \n \n \n \n No option found.\n \n {options.map((option) => (\n {\n onUpdate(currentValue === value ? \"\" : currentValue);\n setOpen(false);\n }}\n >\n {option.label}\n \n \n ))}\n \n \n \n \n \n
\n );\n}\n\nfunction OptionBooleanInput({ parameter, value, onUpdate }: ParameterRenderContext) {\n return (\n
\n onUpdate(checked.toString())}\n />\n \n
\n );\n}\n\nfunction OptionTextInput({ parameter, value, onUpdate }: ParameterRenderContext) {\n return (\n
\n \n onUpdate(e.target.value)}\n placeholder=\"Enter value\"\n />\n
\n );\n}\n\nfunction ArgumentInput({ parameter, value, onUpdate }: ParameterRenderContext) {\n return (\n
\n \n \n {parameter.parameterType}\n {parameter.position !== undefined && ` (${parameter.position})`}\n \n \n onUpdate(e.target.value)}\n placeholder=\"Enter value\"\n />\n
\n );\n}\n\ninterface RepeatableWrapperProps {\n parameter: ParameterRenderContext[\"parameter\"];\n value: ParameterRenderContext[\"value\"];\n onUpdate: ParameterRenderContext[\"onUpdate\"];\n renderEntry: ParameterRendererEntry[\"component\"];\n}\n\nfunction RepeatableWrapper({ parameter, value, onUpdate, renderEntry }: RepeatableWrapperProps) {\n const toArray = (v: ParameterRenderContext[\"value\"]): string[] => {\n if (Array.isArray(v)) return v;\n if (v !== undefined && v !== \"\" && v !== false) return [String(v)];\n return [\"\"];\n };\n\n const values = toArray(value);\n\n const updateAt = (index: number, val: ParameterRenderContext[\"value\"]) => {\n const next = [...values];\n next[index] = String(val);\n onUpdate(next);\n };\n\n const addRow = () => onUpdate([...values, \"\"]);\n\n const removeAt = (index: number) => {\n const next = values.filter((_, i) => i !== index);\n onUpdate(next);\n };\n\n return (\n
\n {values.map((val, index) => (\n \n
\n {renderEntry({ parameter, value: val, onUpdate: (v) => updateAt(index, v) })}\n
\n {index > 0 && (\n removeAt(index)}\n >\n \n \n )}\n
\n ))}\n \n \n Add another\n \n \n );\n}\n\nexport function defaultComponents(): ParameterRendererEntry[] {\n return [\n { condition: (p) => p.parameterType === \"Flag\", component: (ctx) => },\n {\n condition: (p) => p.parameterType === \"Argument\",\n component: (ctx) => ,\n },\n {\n condition: (p) => p.parameterType === \"Option\" && p.dataType === \"Enum\",\n component: (ctx) => ,\n },\n {\n condition: (p) => p.parameterType === \"Option\" && p.dataType === \"Boolean\",\n component: (ctx) => ,\n },\n {\n condition: (p) => p.parameterType === \"Option\",\n component: (ctx) => ,\n },\n ];\n}\n\ninterface ToolRendererProps {\n selectedCommand?: Command | null;\n tool: Tool;\n catalog?: ParameterRendererEntry[];\n parameterValues: Record;\n updateParameterValue: (parameterKey: string, value: ParameterValue) => void;\n}\n\nexport function ToolRenderer({\n selectedCommand: providedCommand,\n tool,\n catalog = defaultComponents(),\n parameterValues,\n updateParameterValue,\n}: ToolRendererProps) {\n const selectedCommand =\n providedCommand === undefined ? findDefaultCommand(tool) : providedCommand;\n const hasCommands = tool.commands.length > 0;\n\n const visibleParameters = useMemo(() => {\n if (!hasCommands || !selectedCommand) {\n return tool.parameters.filter((p) => !p.commandKey || p.isGlobal);\n }\n return tool.parameters.filter(\n (param) => param.commandKey === selectedCommand?.key || param.isGlobal,\n );\n }, [tool, hasCommands, selectedCommand]);\n\n return (\n \n
\n {visibleParameters.length > 0 ? (\n visibleParameters.map((parameter) => {\n const value = parameterValues[parameter.key] ?? \"\";\n const onUpdate = (val: ParameterValue) => updateParameterValue(parameter.key, val);\n const entry = catalog.find((e) => e.condition(parameter));\n if (!entry) return null;\n return (\n \n {parameter.isRepeatable ? (\n \n ) : (\n entry.component({ parameter, value, onUpdate })\n )}\n \n );\n })\n ) : (\n

No parameters available for this command.

\n )}\n
\n \n );\n}\n", "type": "registry:component", "target": "components/commandly/tool-renderer.tsx" }, { "path": "registry/commandly/types/renderer.ts", "content": "import type { Parameter, ParameterValue } from \"@/components/commandly/types/flat\";\nimport type { ReactElement } from \"react\";\n\nexport type ParameterRenderContext = {\n parameter: Parameter;\n value: ParameterValue;\n onUpdate: (value: ParameterValue) => void;\n};\n\nexport type ParameterRendererEntry = {\n condition: (parameter: Parameter) => boolean;\n component: (context: ParameterRenderContext) => ReactElement | null;\n};\n", "type": "registry:file", "target": "components/commandly/types/renderer.ts" }, { "path": "registry/commandly/types/flat.ts", "content": "export interface ToolInfo {\n /** A brief human-readable description of what the tool does. */\n description?: string;\n /** The version string of the tool (e.g. \"1.0.0\"). */\n version?: string;\n /** The homepage or documentation URL for the tool. */\n url?: string;\n}\n\nexport interface Command {\n /** Unique identifier for this command within the tool. */\n key: string;\n /** Key of the parent command; used to represent subcommand nesting. */\n parentCommandKey?: string;\n /** Human-readable display name of the command. */\n name: string;\n /** Brief description of what this command does. */\n description?: string;\n /** Whether this command opens an interactive session or prompt. */\n interactive?: boolean;\n /** Display sort position relative to sibling commands. */\n sortOrder?: number;\n}\n\nexport interface ParameterEnumValue {\n /** The raw value passed to the CLI for this choice. */\n value: string;\n /** Human-readable label shown to the user for this enum choice. */\n displayName: string;\n /** Description of what this enum value does or represents. */\n description?: string;\n /** Whether this is the default selection when no value is provided. */\n isDefault?: boolean;\n /** Display sort position relative to sibling enum values. */\n sortOrder?: number;\n}\n\nexport interface ParameterEnumValues {\n /** The list of allowed enum choices. */\n values: ParameterEnumValue[];\n /** Whether the user can select multiple values at once. */\n allowMultiple?: boolean;\n /** Separator character used when joining multiple selected values. */\n separator?: string;\n}\n\nexport type ParameterValidationType =\n | \"min_length\"\n | \"max_length\"\n | \"min_value\"\n | \"max_value\"\n | \"regex\";\n\nexport interface ParameterValidation {\n /** Unique identifier for this validation rule. */\n key: string;\n /** The type of validation to apply. */\n validationType: ParameterValidationType;\n /** The value to validate against (e.g. the max length number, or a regex pattern). */\n validationValue: string;\n /** The error message to display when validation fails. */\n errorMessage: string;\n}\n\nexport type ParameterDependencyType = \"requires\" | \"conflicts_with\";\n\nexport interface ParameterDependency {\n /** Unique identifier for this dependency rule. */\n key: string;\n /** Key of the parameter that owns this dependency. */\n parameterKey: string;\n /** Key of the parameter this dependency references. */\n dependsOnParameterKey: string;\n /** Whether this parameter requires or conflicts with the referenced parameter. */\n dependencyType: ParameterDependencyType;\n /** Optional value that the referenced parameter must have for this dependency to apply. */\n conditionValue?: string;\n}\n\nexport type ParameterValue = string | number | boolean | string[];\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ToolMetadata {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ParameterMetadata {\n /** Arbitrary tags for categorising or filtering parameters. */\n tags?: string[];\n}\n\nexport type ParameterType = \"Flag\" | \"Option\" | \"Argument\";\n\nexport type ParameterDataType = \"String\" | \"Number\" | \"Boolean\" | \"Enum\";\n\nexport interface Parameter {\n /** Unique identifier for this parameter within the tool. */\n key: string;\n /** Human-readable display name of the parameter. */\n name: string;\n /** Key of the command this parameter belongs to; omit for global parameters. */\n commandKey?: string;\n /** Brief description of what this parameter does or accepts. */\n description?: string;\n /** Optional grouping label for organising related parameters in the UI. */\n group?: string;\n /** Additional metadata such as tags. */\n metadata?: ParameterMetadata;\n /** Whether this is a boolean flag, a key-value option, or a positional argument. */\n parameterType: ParameterType;\n /** The data type of the parameter's value. */\n dataType: ParameterDataType;\n /** Whether the user must provide this parameter. */\n isRequired?: boolean;\n /** Whether this parameter can be specified multiple times. */\n isRepeatable?: boolean;\n /** Whether this parameter applies to all commands rather than a single command. */\n isGlobal?: boolean;\n /** The single-character short flag (e.g. \"-v\"). */\n shortFlag?: string;\n /** The long-form flag or option name (e.g. \"--verbose\"). */\n longFlag?: string;\n /** Zero-based position index for positional arguments. */\n position?: number;\n /** Display sort position relative to sibling parameters. */\n sortOrder?: number;\n /** Separator character used when the option accepts multiple values in one argument (e.g. \",\"). */\n arraySeparator?: string;\n /** Separator between key and value for key=value style options (e.g. \"=\"). */\n keyValueSeparator?: string;\n /** Allowed enum choices when dataType is \"Enum\". */\n enum?: ParameterEnumValues;\n /** Validation rules applied to this parameter's value. */\n validations?: ParameterValidation[];\n /** Dependencies on other parameters (requires or conflicts-with relationships). */\n dependencies?: ParameterDependency[];\n}\n\nexport type ExclusionType = \"mutual_exclusive\" | \"required_one_of\";\n\nexport interface ExclusionGroup {\n /** Unique identifier for this exclusion group. */\n key?: string;\n /** Key of the command this exclusion group belongs to; omit for global groups. */\n commandKey?: string;\n /** Human-readable name for this exclusion group. */\n name: string;\n /** Whether parameters in this group are mutually exclusive or one is required. */\n exclusionType: ExclusionType;\n /** Keys of the parameters that participate in this exclusion group. */\n parameterKeys: string[];\n}\n\nexport interface Tool {\n /** Unique binary name for the tool that it can be invoked from the command line (e.g. \"httpx\"). */\n binaryName: string;\n /** Human-readable display name for the tool (e.g. \"HTTPx\"). */\n displayName: string;\n /** Whether the root tool invocation opens an interactive session or prompt. */\n interactive?: boolean;\n /** General information about the tool such as description, version, and URL. */\n info?: ToolInfo;\n /** List of all commands and subcommands defined for this tool. */\n commands: Command[];\n /** Flat list of all parameters across all commands and global scope. */\n parameters: Parameter[];\n /** Groups of parameters with mutual exclusion or required-one-of constraints. */\n exclusionGroups?: ExclusionGroup[];\n /** Arbitrary metadata attached to the tool. */\n metadata?: ToolMetadata;\n}\n", "type": "registry:file", "target": "components/commandly/types/flat.ts" }, { "path": "registry/commandly/types/nested.ts", "content": "import type {\n ExclusionType,\n ParameterDataType,\n ParameterDependencyType,\n ParameterEnumValues,\n ParameterMetadata,\n ParameterType,\n ParameterValidationType,\n ToolInfo,\n ToolMetadata,\n} from \"@/components/commandly/types/flat\";\n\nexport interface NestedParameterValidation {\n /** The type of validation to apply. */\n validationType: ParameterValidationType;\n /** The value to validate against (e.g. max length number or regex pattern). */\n validationValue: string;\n /** The error message to display when validation fails. */\n errorMessage: string;\n}\n\nexport interface NestedParameterDependency {\n /** Name of the parameter this dependency references. */\n dependsOnParameter: string;\n /** Whether this parameter requires or conflicts with the referenced parameter. */\n dependencyType: ParameterDependencyType;\n /** Optional value that the referenced parameter must have for this dependency to apply. */\n conditionValue?: string;\n}\n\nexport interface NestedParameter {\n /** Human-readable display name of the parameter. */\n name: string;\n /** Brief description of what this parameter does or accepts. */\n description?: string;\n /** Optional grouping label for organising related parameters in the UI. */\n group?: string;\n /** Whether this is a boolean flag, a key-value option, or a positional argument. */\n parameterType: ParameterType;\n /** The data type of the parameter's value. */\n dataType: ParameterDataType;\n /** Additional metadata such as tags. */\n metadata?: ParameterMetadata;\n /** Whether the user must provide this parameter. */\n isRequired?: boolean;\n /** Whether this parameter can be specified multiple times. */\n isRepeatable?: boolean;\n /** Whether this parameter applies to all commands rather than a single command. */\n isGlobal?: boolean;\n /** The single-character short flag (e.g. \"-v\"). */\n shortFlag?: string;\n /** The long-form flag or option name (e.g. \"--verbose\"). */\n longFlag?: string;\n /** Zero-based position index for positional arguments. */\n position?: number;\n /** Display sort position relative to sibling parameters. */\n sortOrder?: number;\n /** Separator character used when the option accepts multiple values in one argument (e.g. \",\"). */\n arraySeparator?: string;\n /** Separator between key and value for key=value style options (e.g. \"=\"). */\n keyValueSeparator?: string;\n /** Allowed enum choices when dataType is \"Enum\". */\n enum?: ParameterEnumValues;\n /** Validation rules applied to this parameter's value. */\n validations?: NestedParameterValidation[];\n /** Dependencies on other parameters (requires or conflicts-with relationships). */\n dependencies?: NestedParameterDependency[];\n}\n\nexport interface NestedCommand {\n /** Human-readable display name of the command. */\n name: string;\n /** Brief description of what this command does. */\n description?: string;\n /** Whether this command opens an interactive session or prompt. */\n interactive?: boolean;\n /** Display sort position relative to sibling commands. */\n sortOrder?: number;\n /** Parameters that belong directly to this command. */\n parameters: NestedParameter[];\n /** Nested subcommands of this command. */\n subcommands: NestedCommand[] /** Groups of parameters with mutual exclusion or required-one-of constraints scoped to this command. */;\n exclusionGroups?: NestedExclusionGroup[];\n}\n\nexport interface NestedExclusionGroup {\n /** Human-readable name for this exclusion group. */\n name: string;\n /** Whether parameters in this group are mutually exclusive or one is required. */\n exclusionType: ExclusionType;\n /** Names of the parameters that participate in this exclusion group. */\n parameters: string[];\n}\n\nexport interface NestedTool {\n /** Unique binary name for the tool that it can be invoked from the command line (e.g. \"httpx\"). */\n binaryName: string;\n /** Human-readable display name for the tool (e.g. \"HTTPx\"). */\n displayName: string;\n /** Whether the root tool invocation opens an interactive session or prompt. */\n interactive?: boolean;\n /** General information about the tool such as description, version, and URL. */\n info?: ToolInfo;\n /** The homepage or documentation URL for the tool. */\n url?: string;\n /** Parameters that belong to the root invocation when no commands exist. */\n rootParameters: NestedParameter[];\n /** Parameters that apply to all commands globally. */\n globalParameters: NestedParameter[];\n /** Hierarchical list of commands and their nested subcommands. */\n commands: NestedCommand[];\n /** Groups of parameters with mutual exclusion or required-one-of constraints. */\n exclusionGroups?: NestedExclusionGroup[] | null;\n /** Arbitrary metadata attached to the tool. */\n metadata?: ToolMetadata;\n}\n", "type": "registry:file", "target": "components/commandly/types/nested.ts" } ], "type": "registry:component" }