@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Queue/QueueTable.stx

@@ -0,0 +1,127 @@
+<script>
+interface QueueTableProps {
+  queues?: any[]
+}
+
+const { queues = [] } = defineProps<QueueTableProps>()
+
+function parseName(payload) {
+    try {
+      const parsedPayload = JSON.parse(payload)
+      return parsedPayload.name
+    } catch (e) {
+      return ''
+    }
+  }
+
+  function parseDescription(payload) {
+    try {
+      const parsedPayload = JSON.parse(payload)
+      const parsedClassPayload = JSON.parse(parsedPayload.classPayload)
+      return parsedClassPayload.description
+    } catch (e) {
+      return ''
+    }
+  }
+
+  function parseTries(payload) {
+    try {
+      const parsedPayload = JSON.parse(payload)
+      const parsedClassPayload = JSON.parse(parsedPayload.classPayload)
+      return Number(parsedClassPayload.tries)
+    } catch (e) {
+      return 0
+    }
+  }
+
+  function parsePath(payload) {
+    try {
+      const parsedPayload = JSON.parse(payload)
+      return parsedPayload.path
+    } catch (e) {
+      return ''
+    }
+  }
+</script>
+<div class="pt-12 px-4 sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="font-semibold leading-6 text-base text-gray-900">
+        Jobs
+      </h1>
+      <p class="mt-2 text-gray-700 text-sm">
+        A list of all the Jobs.
+      </p>
+    </div>
+
+    <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+      <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+        Create Job
+      </button>
+    </div>
+  </div>
+
+  <div class="flow-root mt-8">
+    <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+      <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <table class="min-w-full divide-gray-300 divide-y">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">
+                  Name
+                </th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                  Description
+                </th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                  Path
+                </th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                  Tries
+                </th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right">
+                  Created At
+                </th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right">
+                  Updated At
+                </th>
+                <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                  <span class="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+
+            <tbody class="bg-white divide-gray-200 divide-y">
+              @foreach(queues as queue)
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">
+                    {{ parseName(queue.payload) }}
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                    {{ parseDescription(queue.payload) }}
+                  </td>
+                  <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap">
+                    {{ parsePath(queue.payload) }}
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                    {{ parseTries(queue.payload) }}
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">
+                    {{ queue.created_at }}
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">
+                    {{ queue.updated_at }}
+                  </td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 hover:text-blue-900">Open<span class="sr-only">, Action in IDE</span></a>
+                  </td>
+                </tr>
+              @endforeach
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/resources/components/Dashboard/Settings/Forms/AIForm.stx

@@ -0,0 +1,126 @@
+<script>
+interface AIFormProps {
+  selectedModel?: string
+  deployAI?: boolean
+}
+
+const { selectedModel = 'meta.llama2-70b-chat-v1', deployAI = false } = defineProps<AIFormProps>()
+
+const models = [
+    { id: 'amazon.titan-embed-text-v1', name: 'amazon.titan-embed-text-v1', online: false },
+    { id: 'amazon.titan-text-express-v1', name: 'amazon.titan-text-express-v1', online: true },
+    { id: 'amazon.titan-text-lite-v1', name: 'amazon.titan-text-lite-v1', online: true },
+    { id: 'amazon.titan-embed-image-v1', name: 'amazon.titan-embed-image-v1', online: false },
+    { id: 'amazon.titan-image-generator-v1', name: 'amazon.titan-image-generator-v1', online: false },
+    { id: 'anthropic.claude-v1', name: 'anthropic.claude-v1', online: false },
+    { id: 'anthropic.claude-v2', name: 'anthropic.claude-v2', online: false },
+    { id: 'anthropic.claude-v2:1', name: 'anthropic.claude-v2:1', online: false },
+    { id: 'anthropic.claude-instant-v1', name: 'anthropic.claude-instant-v1', online: false },
+    { id: 'meta.llama2-13b-chat-v1', name: 'meta.llama2-13b-chat-v1', online: false },
+    { id: 'meta.llama2-70b-chat-v1', name: 'meta.llama2-70b-chat-v1', online: true },
+  ]
+</script>
+<form>
+    <div class="space-y-12">
+      <div class="pb-12 border-b border-gray-900/10">
+        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
+          <div class="sm:col-span-3">
+            <label for="default-config" class="block font-medium leading-6 text-gray-900 text-sm">Deploy AI Endpoints</label>
+            <div class="mt-2">
+              <button
+                type="button"
+                class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ deployAI ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                role="switch"
+                aria-checked="{{ deployAI ? 'true' : 'false' }}"
+                data-action="toggle-deploy-ai"
+              >
+                <span class="sr-only">Deploy</span>
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 {{ deployAI ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+              </button>
+            </div>
+          </div>
+
+          <div class="sm:col-span-3"></div>
+
+          <div class="sm:col-span-3">
+            <div>
+              <label for="combobox" class="block font-medium leading-6 text-gray-900 text-sm">Models</label>
+              <div class="relative mt-2">
+                <input
+                  id="combobox"
+                  type="text"
+                  class="pl-3 pr-12 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm bg-white border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm"
+                  role="combobox"
+                  aria-controls="options"
+                  aria-expanded="false"
+                  value="{{ selectedModel }}"
+                >
+                <button
+                  type="button"
+                  class="flex absolute inset-y-0 right-0 items-center px-2 rounded-r-md focus:outline-none"
+                >
+                  <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+
+                <ul
+                  id="options"
+                  class="hidden absolute overflow-auto z-10 mt-1 py-1 max-h-60 w-full text-base sm:text-sm bg-white ring-1 ring-black ring-opacity-5 rounded-md focus:outline-none shadow-lg"
+                  role="listbox"
+                >
+                  @foreach(models as model)
+                    <li
+                      class="relative pl-3 pr-9 py-2 text-gray-900 hover:text-white hover:bg-indigo-600 cursor-default select-none"
+                      role="option"
+                      tabindex="-1"
+                      data-action="select-model"
+                      data-model-id="{{ model.id }}"
+                    >
+                      <div class="flex items-center">
+                        <span class="inline-block h-2 w-2 flex-shrink-0 rounded-full {{ model.online ? 'bg-green-400' : 'bg-gray-200' }}" aria-hidden="true"></span>
+                        <span class="ml-3 truncate {{ selectedModel == model.id ? 'font-semibold' : '' }}">
+                          {{ model.name }}
+                          <span class="sr-only"> is {{ model.online ? 'online' : 'offline' }}</span>
+                        </span>
+                      </div>
+                      @if(selectedModel == model.id)
+                        <span class="flex absolute inset-y-0 right-0 items-center pr-4 text-indigo-600">
+                          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path
+                              fill-rule="evenodd"
+                              d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      @endif
+                    </li>
+                  @endforeach
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/AnalyticsForm.stx

@@ -0,0 +1,52 @@
+<script>
+interface AnalyticsFormProps {
+  driver?: string
+  googleAnalyticsId?: string
+  fathomSiteId?: string
+}
+
+const { driver = 'Fathom', googleAnalyticsId = '', fathomSiteId = '' } = defineProps<AnalyticsFormProps>()
+</script>
+<form>
+    <div class="space-y-12">
+      <div class="pb-12 border-b border-gray-900/10">
+        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
+          <div class="sm:col-span-3">
+            <label for="driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
+            <div class="mt-2">
+              <select id="driver" name="driver" autocomplete="country-name" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                <option {{ driver == 'Fathom' ? 'selected' : '' }}>Fathom</option>
+                <option {{ driver == 'Google Analytics' ? 'selected' : '' }}>Google Analytics</option>
+              </select>
+            </div>
+          </div>
+          <div class="sm:col-span-3"></div>
+
+          <div class="sm:col-span-3">
+            <label for="google-analytics" class="block font-medium leading-6 text-gray-900 text-sm">Google Analytics (tracking-id)</label>
+            <div class="mt-2">
+              <input id="google-analytics" type="text" name="google-analytics" placeholder="UA-XXXXXXXXX-X" value="{{ googleAnalyticsId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label for="fathom" class="block font-medium leading-6 text-gray-900 text-sm">Fathom (site-id)</label>
+            <div class="mt-2">
+              <input id="fathom" type="text" placeholder="WOLZMJDL" name="fathom" value="{{ fathomSiteId }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/AppForm.stx

@@ -0,0 +1,157 @@
+<script>
+interface AppFormProps {
+  appName?: string
+  appKey?: string
+  appUrl?: string
+  description?: string
+  environment?: string
+  redirectUrls?: string
+  timezone?: string
+  locale?: string
+  fallbackLocale?: string
+  cipher?: string
+  appDebug?: boolean
+  maintenanceMode?: boolean
+  docMode?: boolean
+}
+
+const { appName = 'Stacks', appKey = '', appUrl = 'stacks.localhost', description = '', environment = 'local', redirectUrls = 'stacks.localhost,localhost:3000,stack.com', timezone = 'America/Los_Angeles', locale = 'en', fallbackLocale = 'en', cipher = 'aes-256-cbc', appDebug = false, maintenanceMode = false, docMode = true } = defineProps<AppFormProps>()
+</script>
+<form>
+    <div class="space-y-12">
+      <div class="pb-12 border-b border-gray-900/10">
+        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
+          <div class="sm:col-span-3">
+            <label for="name" class="block font-medium leading-6 text-gray-900 text-sm">App Name</label>
+            <div class="mt-2">
+              <input id="name" type="text" name="name" placeholder="App Name" value="{{ appName }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="key" class="block font-medium leading-6 text-gray-900 text-sm">App Key</label>
+            <div class="mt-2">
+              <input id="key" type="text" name="key" placeholder="" value="{{ appKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="url" class="block font-medium leading-6 text-gray-900 text-sm">App Url</label>
+            <div class="mt-2">
+              <input id="url" type="text" name="url" placeholder="https://test.test" value="{{ appUrl }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+
+          <div class="sm:col-span-full">
+            <label for="description" class="block font-medium leading-6 text-gray-900 text-sm">Description</label>
+            <div class="mt-2">
+              <textarea id="description" name="description" rows="3" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">{{ description }}</textarea>
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label for="env" class="block font-medium leading-6 text-gray-900 text-sm">Environment</label>
+            <div class="mt-2">
+              <input id="env" type="text" name="env" placeholder="production" value="{{ environment }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label for="redirects" class="block font-medium leading-6 text-gray-900 text-sm">Redirect Urls</label>
+            <div class="mt-2">
+              <input id="redirects" type="text" name="redirects" placeholder="https://test.test" value="{{ redirectUrls }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+
+          <div class="sm:col-span-2">
+            <label for="app-debug" class="block font-medium leading-6 text-gray-900 text-sm">App Debug</label>
+            <div class="mt-2">
+              <button
+                type="button"
+                class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ appDebug ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                role="switch"
+                aria-checked="{{ appDebug ? 'true' : 'false' }}"
+                data-action="toggle-app-debug"
+              >
+                <span class="sr-only">App Debug</span>
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 {{ appDebug ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+              </button>
+            </div>
+          </div>
+          <div class="sm:col-span-2">
+            <label for="maintenance-mode" class="block font-medium leading-6 text-gray-900 text-sm">Maintenance Mode</label>
+            <div class="mt-2">
+              <button
+                type="button"
+                class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ maintenanceMode ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                role="switch"
+                aria-checked="{{ maintenanceMode ? 'true' : 'false' }}"
+                data-action="toggle-maintenance"
+              >
+                <span class="sr-only">Maintenance Mode</span>
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 {{ maintenanceMode ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+              </button>
+            </div>
+          </div>
+          <div class="sm:col-span-2">
+            <label for="doc-mode" class="block font-medium leading-6 text-gray-900 text-sm">Doc Mode</label>
+            <div class="mt-2">
+              <button
+                type="button"
+                class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ docMode ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                role="switch"
+                aria-checked="{{ docMode ? 'true' : 'false' }}"
+                data-action="toggle-doc-mode"
+              >
+                <span class="sr-only">Doc Mode</span>
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 {{ docMode ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+              </button>
+            </div>
+          </div>
+
+          <div class="sm:col-span-2">
+            <label for="timezone" class="block font-medium leading-6 text-gray-900 text-sm">Timezone</label>
+            <div class="mt-2">
+              <input id="timezone" type="text" name="timezone" placeholder="UTC" value="{{ timezone }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-2">
+            <label for="locale" class="block font-medium leading-6 text-gray-900 text-sm">Locale</label>
+            <div class="mt-2">
+              <input id="locale" type="text" name="locale" placeholder="UTC" value="{{ locale }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-2">
+            <label for="fallback-locale" class="block font-medium leading-6 text-gray-900 text-sm">Fallback Locale</label>
+            <div class="mt-2">
+              <input id="fallback-locale" type="text" name="fallback-locale" placeholder="UTC" value="{{ fallbackLocale }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-2">
+            <label for="cipher" class="block font-medium leading-6 text-gray-900 text-sm">Cipher</label>
+            <div class="mt-2">
+              <input id="cipher" type="text" name="cipher" placeholder="AES-256-CBC" value="{{ cipher }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/CLIForm.stx

@@ -0,0 +1,66 @@
+<script>
+interface CLIFormProps {
+  name?: string
+  description?: string
+  command?: string
+  deploy?: boolean
+}
+
+const { name = 'My Custom CLI', description = 'My Custom CLI', command = 'my-custom-cli', deploy = true } = defineProps<CLIFormProps>()
+</script>
+<form>
+    <div class="space-y-12">
+      <div class="pb-12 border-b border-gray-900/10">
+        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
+          <div class="sm:col-span-full">
+            <label for="deploy" class="block font-medium leading-6 text-gray-900 text-sm">Deploy</label>
+            <div class="mt-2">
+              <button
+                type="button"
+                class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ deploy ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                role="switch"
+                aria-checked="{{ deploy ? 'true' : 'false' }}"
+                data-action="toggle-deploy"
+              >
+                <span class="sr-only">Deploy</span>
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 {{ deploy ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+              </button>
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
+            <div class="mt-2">
+              <input id="name" type="text" name="name" placeholder="My Custom CLI" value="{{ name }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+          <div class="sm:col-span-full">
+            <label for="description" class="block font-medium leading-6 text-gray-900 text-sm">Description</label>
+            <div class="mt-2">
+              <textarea id="description" name="description" rows="3" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">{{ description }}</textarea>
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="command" class="block font-medium leading-6 text-gray-900 text-sm">Command</label>
+            <div class="mt-2">
+              <input id="command" type="text" name="command" placeholder="my-custom-cli" value="{{ command }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>