@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/App/SourceInventory.stx

@@ -0,0 +1,228 @@
+<script client>
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+type InventoryMode = 'actions' | 'commands'
+
+interface SourceItem {
+  name: string
+  description: string
+  path: string
+  origin: 'Application' | 'Framework'
+  modifiedAt: string
+  method?: string
+  aliases?: string[]
+  options?: string[]
+}
+
+interface InventoryResponse {
+  items: SourceItem[]
+  stats: Record<string, number>
+}
+
+const mode = useReactiveProp<InventoryMode>('mode', 'actions')
+const items = state<SourceItem[]>([])
+const stats = state<Record<string, number>>({})
+const search = state('')
+const loading = state(true)
+const loadError = state('')
+const copyMessage = state('')
+
+const page = derived(() => mode() === 'actions'
+  ? {
+      title: 'Actions',
+      description: 'Inspect application overrides and framework Actions from their native TypeScript sources.',
+      empty: 'No Action modules were found.',
+      scaffold: 'buddy make:action MyAction',
+      icon: 'i-hugeicons-energy',
+      detailLabel: 'Method',
+    }
+  : {
+      title: 'Commands',
+      description: 'Inspect the custom commands registered by app/Commands.ts.',
+      empty: 'No application commands are registered.',
+      scaffold: 'buddy make:command my-command',
+      icon: 'i-hugeicons-command-line',
+      detailLabel: 'Aliases and options',
+    })
+
+const filteredItems = derived(() => {
+  const query = search().trim().toLowerCase()
+  if (!query)
+    return items()
+  return items().filter(item => [
+    item.name,
+    item.description,
+    item.path,
+    item.origin,
+    item.method,
+    ...(item.aliases || []),
+    ...(item.options || []),
+  ].join(' ').toLowerCase().includes(query))
+})
+
+function statValue(key: string): number {
+  return Number(stats()[key] || 0)
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Unknown'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
+}
+
+function formatAliases(item: SourceItem): string {
+  return item.aliases?.length ? item.aliases.join(', ') : 'None'
+}
+
+function formatOptions(item: SourceItem): string {
+  return item.options?.length ? item.options.join(', ') : 'None'
+}
+
+function methodClass(method = 'ANY'): string {
+  if (['GET', 'HEAD', 'OPTIONS'].includes(method))
+    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+  if (method === 'ANY')
+    return 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800'
+  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+}
+
+async function loadInventory(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const endpoint = mode() === 'actions'
+      ? '/api/dashboard/source/actions'
+      : '/api/dashboard/source/commands'
+    const response = await dashboardApi<InventoryResponse>(endpoint)
+    items.set(response.items || [])
+    stats.set(response.stats || {})
+  }
+  catch (error) {
+    items.set([])
+    stats.set({})
+    loadError.set(error instanceof Error ? error.message : 'Source inventory could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+async function copyScaffoldCommand(): Promise<void> {
+  copyMessage.set('')
+  try {
+    await globalThis.navigator.clipboard.writeText(page().scaffold)
+    copyMessage.set(`Copied: ${page().scaffold}`)
+  }
+  catch {
+    copyMessage.set(`Run: ${page().scaffold}`)
+  }
+}
+
+onMount(() => {
+  void loadInventory()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+    <div>
+      <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">{{ page().title }}</h1>
+      <p class="mt-1 max-w-3xl text-neutral-500 text-sm dark:text-neutral-400">{{ page().description }}</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button variant="secondary" :loading="loading()" @click="loadInventory">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+      <Button @click="copyScaffoldCommand">
+        <span class="h-4 w-4 i-hugeicons-copy-01"></span>
+        Copy scaffold command
+      </Button>
+    </div>
+  </header>
+
+  <div :if="copyMessage()" role="status" class="px-4 py-3 text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 border border-blue-200 rounded-lg dark:border-blue-900">
+    {{ copyMessage() }}
+  </div>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadInventory">Try again</Button>
+  </div>
+
+  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+    <StatsCard :title="mode() === 'actions' ? 'Total Actions' : 'Registered Entries'" :icon="page().icon" iconBg="primary">
+      <template #value>{{ statValue(mode() === 'actions' ? 'total' : 'registered') }}</template>
+    </StatsCard>
+    <StatsCard :title="mode() === 'actions' ? 'Application Overrides' : 'Command Modules'" icon="i-hugeicons-source-code" iconBg="success">
+      <template #value>{{ statValue(mode() === 'actions' ? 'application' : 'total') }}</template>
+    </StatsCard>
+    <StatsCard :title="mode() === 'actions' ? 'Framework Defaults' : 'Aliases'" icon="i-hugeicons-git-branch" iconBg="info">
+      <template #value>{{ statValue(mode() === 'actions' ? 'framework' : 'aliases') }}</template>
+    </StatsCard>
+    <StatsCard :title="mode() === 'actions' ? 'Write Handlers' : 'Declared Options'" icon="i-hugeicons-settings-02" iconBg="warning">
+      <template #value>{{ statValue(mode() === 'actions' ? 'writes' : 'options') }}</template>
+    </StatsCard>
+  </div>
+
+  <Card padding="none">
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-5 border-b border-neutral-200 dark:border-neutral-700">
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Native source inventory</h2>
+        <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Application files override matching framework defaults.</p>
+      </div>
+      <label class="block relative w-full sm:max-w-xs">
+        <span class="sr-only">Search {{ page().title.toLowerCase() }}</span>
+        <span class="absolute left-3 top-2.5 h-4 w-4 text-neutral-400 i-hugeicons-search-01"></span>
+        <input x-model="search" type="search" :placeholder="'Search ' + page().title.toLowerCase()" class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+      </label>
+    </div>
+
+    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
+      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+      Reading source files...
+    </div>
+
+    <EmptyState
+      :if="!loading() && !loadError() && filteredItems().length === 0"
+      :icon="page().icon"
+      :title="search() ? 'No matching source files' : page().empty"
+      :description="search() ? 'Try a different name, path, method, or alias.' : 'Use the scaffold command to add one through the native framework workflow.'"
+    />
+
+    <div :if="!loading() && filteredItems().length > 0" class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
+          <tr>
+            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">{{ page().detailLabel }}</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Origin</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Path</th>
+            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Modified</th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
+          <tr :for="item in filteredItems()">
+            <td class="pl-5 pr-4 py-3.5">
+              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ item.name }}</p>
+              <p class="mt-0.5 max-w-md text-neutral-500 text-xs dark:text-neutral-400">{{ item.description }}</p>
+            </td>
+            <td class="px-4 py-3.5">
+              <span :if="mode() === 'actions'" :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + methodClass(item.method)">{{ item.method || 'ANY' }}</span>
+              <div :if="mode() === 'commands'" class="space-y-1 text-xs">
+                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Aliases:</span> {{ formatAliases(item) }}</p>
+                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Options:</span> {{ formatOptions(item) }}</p>
+              </div>
+            </td>
+            <td class="px-4 py-3.5">
+              <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + (item.origin === 'Application' ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40' : 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800')">{{ item.origin }}</span>
+            </td>
+            <td class="px-4 py-3.5 font-mono text-neutral-600 text-xs dark:text-neutral-300">{{ item.path }}</td>
+            <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(item.modifiedAt) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Card>
+</div>

package/resources/components/Dashboard/Auth/AccessTokens.stx

@@ -0,0 +1,400 @@
+<script client>
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+
+interface AccessTokenRow {
+  id: number
+  name: string
+  scopes: string[]
+  expires_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+interface TokenListResponse {
+  tokens: AccessTokenRow[]
+  count: number
+}
+
+interface CreatedTokenResponse {
+  access_token: string
+  token_type: string
+  expires_in: number
+  token: {
+    id: number
+    name: string
+    scopes: string[]
+    expires_at: string | null
+  }
+}
+
+const availableScopes = [
+  { name: 'read', description: 'Read application resources' },
+  { name: 'write', description: 'Create and update resources' },
+  { name: 'delete', description: 'Delete application resources' },
+  { name: 'deploy', description: 'Run deployment operations' },
+  { name: 'admin', description: 'Use administrative operations' },
+]
+
+const tokens = state<AccessTokenRow[]>([])
+const loading = state(true)
+const authenticationRequired = state(false)
+const loadError = state('')
+const actionError = state('')
+const actionMessage = state('')
+const showCreate = state(false)
+const creating = state(false)
+const tokenName = state('')
+const expiryMinutes = state('10080')
+const selectedScopes = state<string[]>(['read'])
+const createdToken = state('')
+const copied = state(false)
+const confirmingRevoke = state<number | null>(null)
+const revoking = state<number | null>(null)
+
+const activeCount = derived(() => tokens().filter(token => tokenStatus(token) === 'active').length)
+const expiredCount = derived(() => tokens().filter(token => tokenStatus(token) === 'expired').length)
+
+function tokenStatus(token: AccessTokenRow): 'active' | 'expired' {
+  if (!token.expires_at)
+    return 'active'
+  return new Date(token.expires_at).getTime() <= Date.now() ? 'expired' : 'active'
+}
+
+function statusClass(token: AccessTokenRow): string {
+  return tokenStatus(token) === 'active'
+    ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+    : 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+}
+
+function formatDate(value: string | null): string {
+  if (!value)
+    return 'Never'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
+}
+
+function toggleScope(event: Event, scope: string): void {
+  const enabled = (event.target as HTMLInputElement).checked
+  selectedScopes.set(enabled
+    ? [...new Set([...selectedScopes(), scope])]
+    : selectedScopes().filter(item => item !== scope))
+}
+
+function resetCreateForm(): void {
+  tokenName.set('')
+  expiryMinutes.set('10080')
+  selectedScopes.set(['read'])
+  createdToken.set('')
+  copied.set(false)
+}
+
+function openCreate(): void {
+  if (authenticationRequired())
+    return
+
+  resetCreateForm()
+  actionError.set('')
+  showCreate.set(true)
+}
+
+function closeCreate(): void {
+  showCreate.set(false)
+  resetCreateForm()
+}
+
+async function loadTokens(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const response = await dashboardApi<TokenListResponse>('/auth/tokens')
+    tokens.set(response.tokens || [])
+    authenticationRequired.set(false)
+  }
+  catch (error) {
+    tokens.set([])
+    if (error instanceof DashboardApiError && error.status === 401) {
+      authenticationRequired.set(true)
+    }
+    else {
+      loadError.set(error instanceof Error ? error.message : 'Access tokens could not be loaded.')
+    }
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+async function createAccessToken(): Promise<void> {
+  actionError.set('')
+  actionMessage.set('')
+
+  if (!tokenName().trim()) {
+    actionError.set('Enter a name for this token.')
+    return
+  }
+  if (selectedScopes().length === 0) {
+    actionError.set('Select at least one scope.')
+    return
+  }
+
+  creating.set(true)
+  try {
+    const response = await dashboardApi<CreatedTokenResponse>('/auth/token', {
+      method: 'POST',
+      body: {
+        name: tokenName().trim(),
+        scopes: selectedScopes(),
+        expires_in_minutes: Number(expiryMinutes()),
+        with_refresh_token: false,
+      },
+    })
+    createdToken.set(response.access_token)
+    actionMessage.set('Token created. Copy it now because it will not be shown again.')
+    await loadTokens()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError && error.status === 401) {
+      authenticationRequired.set(true)
+      showCreate.set(false)
+      actionError.set('')
+    }
+    else {
+      actionError.set(error instanceof Error ? error.message : 'The access token could not be created.')
+    }
+  }
+  finally {
+    creating.set(false)
+  }
+}
+
+async function copyCreatedToken(): Promise<void> {
+  actionError.set('')
+  try {
+    await globalThis.navigator.clipboard.writeText(createdToken())
+    copied.set(true)
+  }
+  catch {
+    actionError.set('Clipboard access is unavailable. Select and copy the token manually.')
+  }
+}
+
+async function revokeToken(id: number): Promise<void> {
+  if (confirmingRevoke() !== id) {
+    confirmingRevoke.set(id)
+    return
+  }
+
+  actionError.set('')
+  actionMessage.set('')
+  revoking.set(id)
+  try {
+    await dashboardApi(`/auth/tokens/${id}`, { method: 'DELETE' })
+    confirmingRevoke.set(null)
+    actionMessage.set('Access token revoked.')
+    await loadTokens()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError && error.status === 401) {
+      authenticationRequired.set(true)
+      actionError.set('')
+    }
+    else {
+      actionError.set(error instanceof Error ? error.message : 'The access token could not be revoked.')
+    }
+  }
+  finally {
+    revoking.set(null)
+  }
+}
+
+onMount(() => {
+  void loadTokens()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+    <div>
+      <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Access Tokens</h1>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Create and revoke personal API credentials for the signed-in account.</p>
+    </div>
+    <Button :if="!loading() && !authenticationRequired()" @click="openCreate">
+      <span class="h-4 w-4 i-hugeicons-key-02"></span>
+      Create Token
+    </Button>
+    <Button :if="!loading() && authenticationRequired()" tag="a" href="/login">
+      <span class="h-4 w-4 i-hugeicons-login-03"></span>
+      Sign in
+    </Button>
+  </header>
+
+  <div :if="!loading() && !authenticationRequired()" class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+    <StatsCard title="Total Tokens" icon="i-hugeicons-key-01" iconBg="primary">
+      <template #value>{{ tokens().length }}</template>
+    </StatsCard>
+    <StatsCard title="Active" icon="i-hugeicons-checkmark-circle-02" iconBg="success">
+      <template #value>{{ activeCount() }}</template>
+    </StatsCard>
+    <StatsCard title="Expired" icon="i-hugeicons-clock-01" iconBg="warning">
+      <template #value>{{ expiredCount() }}</template>
+    </StatsCard>
+  </div>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadTokens">Try again</Button>
+  </div>
+
+  <div :if="actionError()" role="alert" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">{{ actionError() }}</div>
+  <div :if="actionMessage()" role="status" class="px-4 py-3 text-green-700 text-sm dark:text-green-300 bg-green-50 dark:bg-green-950/40 border border-green-200 rounded-lg dark:border-green-900">{{ actionMessage() }}</div>
+
+  <Card padding="none">
+    <div class="flex items-center justify-between p-5 border-b border-neutral-200 dark:border-neutral-700">
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Personal Access Tokens</h2>
+        <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Existing token values are hashed and cannot be retrieved.</p>
+      </div>
+      <Button :if="!authenticationRequired()" variant="secondary" :loading="loading()" @click="loadTokens">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+    </div>
+
+    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
+      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+      Loading access tokens...
+    </div>
+
+    <EmptyState
+      :if="!loading() && authenticationRequired()"
+      icon="i-hugeicons-user-lock-01"
+      title="Sign in to manage access tokens"
+      description="Personal access tokens belong to an authenticated account. Sign in to create, inspect, or revoke them."
+    >
+      <template #action>
+        <Button tag="a" href="/login">
+          <span class="h-4 w-4 i-hugeicons-login-03"></span>
+          Sign in
+        </Button>
+      </template>
+    </EmptyState>
+
+    <EmptyState
+      :if="!loading() && !authenticationRequired() && !loadError() && tokens().length === 0"
+      icon="i-hugeicons-key-01"
+      title="No access tokens"
+      description="Create a scoped token when an integration needs API access."
+    >
+      <template #action>
+        <Button @click="openCreate">
+          <span class="h-4 w-4 i-hugeicons-add-01"></span>
+          Create Token
+        </Button>
+      </template>
+    </EmptyState>
+
+    <div :if="!loading() && !authenticationRequired() && tokens().length > 0" class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
+          <tr>
+            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Token</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Scopes</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
+            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Expires</th>
+            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Action</th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
+          <tr :for="token in tokens()">
+            <td class="pl-5 pr-4 py-3.5">
+              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ token.name }}</p>
+              <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Created {{ formatDate(token.created_at) }}</p>
+            </td>
+            <td class="px-4 py-3.5">
+              <div class="flex flex-wrap gap-1">
+                <span :for="scope in token.scopes" class="inline-flex px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded">{{ scope }}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(token)">{{ tokenStatus(token) }}</span></td>
+            <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(token.expires_at) }}</td>
+            <td class="pr-5 py-3.5 text-right whitespace-nowrap">
+              <Button variant="danger" size="sm" :loading="revoking() === token.id" @click="revokeToken(token.id)">
+                {{ revoking() === token.id ? 'Revoking...' : confirmingRevoke() === token.id ? 'Confirm Revoke' : 'Revoke' }}
+              </Button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Card>
+
+  <div :if="showCreate()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 dashboard-modal-layer" @click.self="closeCreate">
+    <div role="dialog" aria-modal="true" aria-labelledby="create-token-title" class="p-6 max-w-lg w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
+      <div class="flex gap-4 items-start justify-between">
+        <div>
+          <h2 id="create-token-title" class="font-semibold text-lg text-neutral-900 dark:text-white">Create Access Token</h2>
+          <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Grant only the scopes this integration needs.</p>
+        </div>
+        <Button variant="ghost" iconOnly ariaLabel="Close create token dialog" @click="closeCreate">
+          <span class="h-5 w-5 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+
+      <div :if="createdToken()" class="mt-6 space-y-4">
+        <div role="status" class="px-4 py-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 rounded-lg dark:border-amber-900">
+          {{ actionMessage() }}
+        </div>
+        <label class="block">
+          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">New token</span>
+          <textarea readonly rows="4" class="block mt-2 p-3 w-full font-mono text-neutral-900 text-xs dark:text-white bg-neutral-50 dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700">{{ createdToken() }}</textarea>
+        </label>
+        <div class="flex gap-2 justify-end">
+          <Button variant="secondary" @click="closeCreate">Done</Button>
+          <Button @click="copyCreatedToken">
+            <span class="h-4 w-4 i-hugeicons-copy-01"></span>
+            {{ copied() ? 'Copied' : 'Copy Token' }}
+          </Button>
+        </div>
+      </div>
+
+      <form :if="!createdToken()" class="mt-6 space-y-5" @submit.prevent="createAccessToken">
+        <label class="block">
+          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Token name</span>
+          <input x-model="tokenName" type="text" maxlength="255" required placeholder="CI deployment" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+        </label>
+
+        <label class="block">
+          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Expires after</span>
+          <select x-model="expiryMinutes" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+            <option value="60">1 hour</option>
+            <option value="1440">1 day</option>
+            <option value="10080">7 days</option>
+            <option value="43200">30 days</option>
+          </select>
+        </label>
+
+        <fieldset>
+          <legend class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Scopes</legend>
+          <div class="grid gap-2 grid-cols-1 sm:grid-cols-2 mt-2">
+            <label :for="scope in availableScopes" class="flex gap-3 items-start p-3 border border-neutral-200 rounded-lg dark:border-neutral-700">
+              <input type="checkbox" :checked="selectedScopes().includes(scope.name)" class="mt-0.5 h-4 w-4 text-blue-600 rounded" @change="toggleScope($event, scope.name)">
+              <span>
+                <span class="block font-medium text-neutral-900 text-sm dark:text-white">{{ scope.name }}</span>
+                <span class="block mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ scope.description }}</span>
+              </span>
+            </label>
+          </div>
+        </fieldset>
+
+        <div :if="actionError()" role="alert" class="px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-lg">{{ actionError() }}</div>
+
+        <div class="flex gap-2 justify-end pt-2">
+          <Button variant="secondary" :disabled="creating()" @click="closeCreate">Cancel</Button>
+          <Button type="submit" :loading="creating()">
+            {{ creating() ? 'Creating...' : 'Create Token' }}
+          </Button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>