@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Billing/BillingSettings.stx

@@ -0,0 +1,88 @@
+<script client>
+import type { BillingPaymentMethod, BillingSubscription, BillingTransaction } from '../../../../functions/billing/dashboard'
+import { fetchBillingOverview } from '../../../../functions/billing/dashboard'
+import { useAuth } from '../../../../functions/auth'
+
+const loading = state(true)
+const authenticated = state(false)
+const loadError = state('')
+const unavailable = state<string[]>([])
+const subscription = state<BillingSubscription | null>(null)
+const paymentMethods = state<BillingPaymentMethod[]>([])
+const transactions = state<BillingTransaction[]>([])
+
+async function loadBilling(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  unavailable.set([])
+
+  try {
+    const auth = useAuth()
+    const user = await auth.fetchAuthUser()
+    authenticated.set(Boolean(user?.id))
+    if (!user?.id)
+      return
+
+    const overview = await fetchBillingOverview()
+    subscription.set(overview.subscription)
+    paymentMethods.set(overview.paymentMethods)
+    transactions.set(overview.transactions)
+    unavailable.set(overview.unavailable)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+onMount(() => { void loadBilling() })
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">Settings</p>
+      <h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Billing</h1>
+      <p class="mt-1 max-w-2xl text-gray-500 text-sm dark:text-neutral-400">Inspect the active subscription, provider-backed payment methods, and persisted transaction records for the signed-in user.</p>
+    </div>
+    <Button :if="authenticated()" variant="secondary" :loading="loading()" @click="loadBilling()">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <section :if="loading()" aria-live="polite" class="flex items-center justify-center py-20 text-gray-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+    Loading billing details
+  </section>
+
+  <section :else-if="!authenticated()" class="p-8 text-center bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-square-lock-02"></span>
+    <h2 class="mt-3 font-semibold text-gray-900 text-lg dark:text-white">Sign in to view billing</h2>
+    <p class="mt-2 mx-auto max-w-lg text-gray-500 text-sm dark:text-neutral-400">Billing APIs are scoped to the authenticated user. No account or payment data is exposed to an anonymous dashboard session.</p>
+    <div class="mt-5"><Button tag="a" href="/login"><span class="h-4 w-4 i-hugeicons-login-03"></span>Sign in</Button></div>
+  </section>
+
+  <template :else>
+    <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+      <span>{{ loadError() }}</span>
+      <Button variant="secondary" size="sm" @click="loadBilling()">Retry</Button>
+    </div>
+
+    <div :if="unavailable().length" role="status" class="p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+      <p class="font-semibold">Some provider-backed details are unavailable.</p>
+      <ul class="mt-2 pl-5 space-y-1 list-disc">
+        <template :for="message in unavailable()"><li>{{ message }}</li></template>
+      </ul>
+    </div>
+
+    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(22rem,0.8fr)]">
+      <BillingPlanSummary :subscription="subscription()" />
+      <BillingPaymentMethodsPanel :methods="paymentMethods()" />
+    </div>
+
+    <BillingTransactionHistory :transactions="transactions()" />
+  </template>
+</div>

package/resources/components/Dashboard/Billing/BillingTransactionHistory.stx

@@ -0,0 +1,50 @@
+<script client>
+import type { BillingTransaction } from '../../../../functions/billing/dashboard'
+
+const transactions = useReactiveProp('transactions', [] as BillingTransaction[])
+
+function amount(transaction: BillingTransaction): string {
+  if (transaction.amount === null)
+    return 'Not reported'
+  return `${new Intl.NumberFormat().format(transaction.amount)} minor units`
+}
+</script>
+
+<section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <header class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+    <div>
+      <h2 class="font-semibold text-base text-gray-900 dark:text-white">Transaction history</h2>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Persisted PaymentTransaction model records for this user.</p>
+    </div>
+    <span class="h-5 w-5 text-gray-400 i-hugeicons-transaction-history"></span>
+  </header>
+
+  <div :if="transactions().length === 0" class="px-6 py-14 text-center">
+    <span class="inline-block h-7 w-7 text-gray-400 i-hugeicons-receipt-dollar"></span>
+    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No transactions recorded</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Successful persisted billing transactions will appear here.</p>
+  </div>
+
+  <div :else class="overflow-x-auto">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-900/50">
+        <tr>
+          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Transaction</th>
+          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Type</th>
+          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
+          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Provider reference</th>
+        </tr>
+      </thead>
+      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="transaction in transactions()" :key="transaction.id">
+          <tr>
+            <td class="px-5 py-4 max-w-lg"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ transaction.name || 'Unnamed transaction' }}</p><p :if="transaction.description" class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ transaction.description }}</p></td>
+            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ transaction.type || 'unknown' }}</span></td>
+            <td class="px-5 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ amount(transaction) }}</td>
+            <td class="px-5 py-4 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ transaction.providerId || 'Not reported' }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</section>

package/resources/components/Dashboard/Buddy/BuddyAssistant.stx

@@ -0,0 +1,190 @@
+<script client>
+import type { BuddyChatMessage, BuddyChatState } from '../../../../functions/buddy-chat'
+import { askBuddy, clearBuddyChat, fetchBuddyChat } from '../../../../functions/buddy-chat'
+import { pushToast } from '../../../../functions/toasts'
+
+const chatState = state<BuddyChatState | null>(null)
+const messages = state<BuddyChatMessage[]>([])
+const prompt = state('')
+const isLoading = state(true)
+const isSending = state(false)
+const loadError = state('')
+
+function providerName(): string {
+  const provider = chatState()?.provider
+  if (provider === 'openai')
+    return 'OpenAI'
+  if (provider === 'anthropic')
+    return 'Anthropic'
+  if (provider === 'ollama')
+    return 'Ollama'
+  return 'AI provider'
+}
+
+function setSuggestion(value: string): void {
+  prompt.set(value)
+}
+
+async function loadChat(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    const data = await fetchBuddyChat()
+    chatState.set(data)
+    messages.set(data.history)
+  }
+  catch (error) {
+    loadError.set('Buddy status could not be loaded.')
+    pushToast('error', 'Could not load Buddy', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function sendMessage(): Promise<void> {
+  const content = prompt().trim()
+  if (!content || isSending() || !chatState()?.configured)
+    return
+
+  const previous = messages()
+  messages.set([...previous, { role: 'user', content }])
+  prompt.set('')
+  isSending.set(true)
+  try {
+    const result = await askBuddy(content)
+    messages.set([...messages(), { role: 'assistant', content: result.content }])
+  }
+  catch (error) {
+    messages.set(previous)
+    prompt.set(content)
+    pushToast('error', 'Buddy could not answer', { detail: String(error) })
+  }
+  finally {
+    isSending.set(false)
+  }
+}
+
+async function clearHistory(): Promise<void> {
+  try {
+    await clearBuddyChat()
+    messages.set([])
+    pushToast('success', 'Buddy conversation cleared')
+  }
+  catch (error) {
+    pushToast('error', 'Could not clear conversation', { detail: String(error) })
+  }
+}
+
+onMount(() => {
+  void loadChat()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Buddy</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Ask framework questions through your configured Stacks AI provider.</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <span :class="'inline-flex items-center px-2.5 py-1 font-medium text-xs rounded-full ' + (chatState()?.configured ? 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-950' : 'text-amber-700 bg-amber-100 dark:text-amber-300 dark:bg-amber-950')">
+        <span :class="'mr-1.5 h-1.5 w-1.5 rounded-full ' + (chatState()?.configured ? 'bg-green-500' : 'bg-amber-500')"></span>
+        {{ providerName() }} {{ chatState()?.configured ? 'ready' : 'needs configuration' }}
+      </span>
+      <Button :if="messages().length > 0" variant="secondary" size="sm" @click="clearHistory">
+        Clear
+      </Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+    {{ loadError() }}
+  </div>
+
+  <div :if="!isLoading() && chatState() && !chatState()?.configured" class="p-5 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 rounded-lg dark:border-amber-900">
+    <div class="flex gap-3">
+      <span class="mt-0.5 h-5 w-5 text-amber-600 i-hugeicons-key-01"></span>
+      <div>
+        <h2 class="font-semibold text-amber-900 dark:text-amber-200">Configure {{ providerName() }}</h2>
+        <p class="mt-1 text-amber-800 text-sm dark:text-amber-300">
+          Add the provider key to your environment, then restart the dashboard. Secrets remain server-side and are never returned to this page.
+        </p>
+        <code class="inline-block mt-3 px-2 py-1 font-mono text-amber-900 text-xs dark:text-amber-200 bg-amber-100 dark:bg-amber-950 rounded">
+          {{ chatState()?.provider === 'openai' ? 'OPENAI_API_KEY' : 'ANTHROPIC_API_KEY' }}
+        </code>
+        <StxLink to="/environment" class="inline-flex items-center ml-3 font-medium text-amber-800 text-sm dark:text-amber-300">
+          Open environment
+          <span class="ml-1 h-4 w-4 i-hugeicons-arrow-right-02"></span>
+        </StxLink>
+      </div>
+    </div>
+  </div>
+
+  <section class="flex overflow-hidden flex-col min-h-[36rem] bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-neutral-700">
+      <div>
+        <h2 class="font-semibold text-gray-900 dark:text-white">Framework conversation</h2>
+        <p class="text-gray-500 text-xs dark:text-neutral-400">Session history is held by the running Buddy process.</p>
+      </div>
+      <div :if="chatState()?.repository" class="text-right">
+        <p class="font-medium text-gray-700 text-xs dark:text-neutral-200">{{ chatState()?.repository?.name }}</p>
+        <p class="font-mono text-gray-500 text-xs dark:text-neutral-400">{{ chatState()?.repository?.branch }}</p>
+      </div>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-5">
+      <div :if="isLoading()" class="flex items-center justify-center h-full text-gray-500 text-sm dark:text-neutral-400">
+        Loading Buddy
+      </div>
+
+      <div :if="!isLoading() && messages().length === 0" class="flex flex-col items-center justify-center h-full text-center">
+        <div class="flex items-center justify-center h-11 w-11 text-blue-600 bg-blue-50 dark:bg-blue-950/30 rounded-lg i-hugeicons-ai-chat-02"></div>
+        <h3 class="mt-4 font-semibold text-gray-900 dark:text-white">Start with a Stacks question</h3>
+        <p class="mt-1 max-w-lg text-gray-500 text-sm dark:text-neutral-400">Buddy answers questions only from this page. It does not edit files or run commands.</p>
+        <div class="grid gap-2 grid-cols-1 sm:grid-cols-2 mt-5 max-w-2xl w-full">
+          <Button variant="outline" fullWidth @click="setSuggestion('How do I create a model that generates authenticated CRUD APIs?')">
+            Model with authenticated APIs
+          </Button>
+          <Button variant="outline" fullWidth @click="setSuggestion('How should I build a reactive form with stx signals?')">
+            Reactive stx form
+          </Button>
+        </div>
+      </div>
+
+      <div :if="messages().length > 0" class="mx-auto space-y-4 max-w-4xl">
+        <template :for="message in messages()">
+          <div :class="'flex ' + (message.role === 'user' ? 'justify-end' : 'justify-start')">
+            <div :class="'max-w-[85%] px-4 py-3 text-sm whitespace-pre-wrap rounded-lg ' + (message.role === 'user' ? 'text-white bg-blue-600' : 'text-gray-800 dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700')">
+              {{ message.content }}
+            </div>
+          </div>
+        </template>
+        <div :if="isSending()" class="flex justify-start">
+          <div class="inline-flex items-center px-4 py-3 text-gray-500 text-sm dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-lg">
+            <span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
+            Buddy is thinking
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <form class="p-4 bg-gray-50 dark:bg-neutral-800 border-gray-200 border-t dark:border-neutral-700" @submit.prevent="sendMessage">
+      <div class="flex gap-3 items-end mx-auto max-w-4xl">
+        <textarea
+          x-model="prompt"
+          :disabled="!chatState()?.configured || isSending()"
+          maxlength="4000"
+          rows="3"
+          aria-label="Ask Buddy"
+          placeholder="Ask about models, actions, routes, stx, Crosswind, testing, or deployment"
+          class="block px-3 py-2 min-h-20 w-full text-gray-900 text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 disabled:opacity-60 resize-y"
+        ></textarea>
+        <Button type="submit" :disabled="!chatState()?.configured || prompt().trim().length < 3" :loading="isSending()">
+          <span :if="!isSending()" class="h-4 w-4 i-hugeicons-sent"></span>
+          Send
+        </Button>
+      </div>
+    </form>
+  </section>
+</div>