@stacksjs/defaults 0.70.229 → 0.70.230

package/resources/components/Dashboard/Deployments/DeploymentDetail.stx

@@ -0,0 +1,149 @@
+<script client>
+import type { DeploymentRecord } from '../../../../functions/deployments'
+import { fetchDeployment } from '../../../../functions/deployments'
+import { pushToast } from '../../../../functions/toasts'
+
+const deployment = state<DeploymentRecord | null>(null)
+const isLoading = state(true)
+const loadError = state('')
+
+function record(): DeploymentRecord | null {
+  return deployment()
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'long', timeStyle: 'medium' }).format(date)
+}
+
+function formatDuration(value: number | null): string {
+  if (value === null)
+    return 'Not recorded'
+  if (value < 60)
+    return `${Math.round(value)} seconds`
+  const minutes = Math.floor(value / 60)
+  const seconds = Math.round(value % 60)
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
+}
+
+function statusClass(status: string): string {
+  if (['success', 'successful', 'completed', 'ready'].includes(status))
+    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+  if (['failed', 'error', 'cancelled'].includes(status))
+    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+}
+
+function statusLabel(status: string): string {
+  if (!status)
+    return 'Unknown'
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+async function loadDeployment(): Promise<void> {
+  const route = useRoute()
+  const id = String(route.params.id || '')
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    deployment.set(id ? await fetchDeployment(id) : null)
+  }
+  catch (error) {
+    loadError.set('Deployment could not be loaded.')
+    pushToast('error', 'Could not load deployment', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+onMount(() => {
+  void loadDeployment()
+})
+</script>
+
+<div class="space-y-6">
+  <header>
+    <StxLink to="/deployments" class="inline-flex items-center mb-3 font-medium text-blue-600 text-sm dark:text-blue-400">
+      <span class="mr-1 h-4 w-4 i-hugeicons-arrow-left-02"></span>
+      Deployments
+    </StxLink>
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Deployment details</h1>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">A single Deployment model record.</p>
+      </div>
+      <span :if="record()" :class="'inline-flex px-2 py-1 font-medium text-xs rounded-md ' + statusClass(record()?.status || '')">{{ statusLabel(record()?.status || '') }}</span>
+    </div>
+  </header>
+
+  <div :if="isLoading()" class="px-5 py-12 text-center text-gray-500 text-sm bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">Loading deployment</div>
+  <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() && !loadError() && !record()" class="px-5 py-12 text-center bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <p class="font-semibold text-gray-900 dark:text-white">Deployment not found</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The requested Deployment model record does not exist.</p>
+  </div>
+
+  <template :if="record()">
+    <section class="grid gap-4 grid-cols-1 lg:grid-cols-2">
+      <div class="p-5 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <h2 class="font-semibold text-gray-900 dark:text-white">Source</h2>
+        <dl class="grid gap-4 mt-4 text-sm">
+          <div>
+            <dt class="text-gray-500 dark:text-neutral-400">Commit</dt>
+            <dd class="mt-1 font-mono text-gray-900 dark:text-white">{{ record()?.commitHash || 'Not recorded' }}</dd>
+          </div>
+          <div>
+            <dt class="text-gray-500 dark:text-neutral-400">Message</dt>
+            <dd class="mt-1 text-gray-900 dark:text-white">{{ record()?.commitMessage || 'Not recorded' }}</dd>
+          </div>
+          <div class="grid gap-4 grid-cols-2">
+            <div>
+              <dt class="text-gray-500 dark:text-neutral-400">Branch</dt>
+              <dd class="mt-1 font-mono text-gray-900 dark:text-white">{{ record()?.branch || 'Not recorded' }}</dd>
+            </div>
+            <div>
+              <dt class="text-gray-500 dark:text-neutral-400">Author</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ record()?.author || 'Not recorded' }}</dd>
+            </div>
+          </div>
+        </dl>
+      </div>
+
+      <div class="p-5 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <h2 class="font-semibold text-gray-900 dark:text-white">Execution</h2>
+        <dl class="grid gap-4 mt-4 text-sm">
+          <div class="grid gap-4 grid-cols-2">
+            <div>
+              <dt class="text-gray-500 dark:text-neutral-400">Environment</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ record()?.environment || 'Not recorded' }}</dd>
+            </div>
+            <div>
+              <dt class="text-gray-500 dark:text-neutral-400">Duration</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ formatDuration(record()?.duration ?? null) }}</dd>
+            </div>
+          </div>
+          <div>
+            <dt class="text-gray-500 dark:text-neutral-400">Created</dt>
+            <dd class="mt-1 text-gray-900 dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd>
+          </div>
+          <div :if="record()?.url">
+            <dt class="text-gray-500 dark:text-neutral-400">Deployment URL</dt>
+            <dd class="mt-1"><a :href="record()?.url || '#'" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">{{ record()?.url }}</a></dd>
+          </div>
+        </dl>
+      </div>
+    </section>
+
+    <section :if="record()?.errorLog" class="overflow-hidden bg-white dark:bg-neutral-800 border border-red-200 rounded-lg dark:border-red-900">
+      <div class="px-4 py-3 border-b border-red-200 dark:border-red-900">
+        <h2 class="font-semibold text-red-800 dark:text-red-200">Error log</h2>
+      </div>
+      <pre class="overflow-x-auto p-4 font-mono text-red-800 text-xs whitespace-pre-wrap dark:text-red-200">{{ record()?.errorLog }}</pre>
+    </section>
+  </template>
+</div>

package/resources/components/Dashboard/Deployments/DeploymentList.stx

@@ -1,94 +1,212 @@
-<script>
-interface DeploymentListProps {
-  showModal?: boolean
+<script client>
+import type { DeploymentRecord } from '../../../../functions/deployments'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+import { fetchDeployments, summarizeDeployments } from '../../../../functions/deployments'
+import { pushToast } from '../../../../functions/toasts'
+
+interface DeploymentStartResponse {
+  success: boolean
+  message: string
+  pid?: number
+}
+
+const deployments = state<DeploymentRecord[]>([])
+const search = state('')
+const status = state('all')
+const isLoading = state(true)
+const loadError = state('')
+const showDeployModal = state(false)
+const isStarting = state(false)
+const environment = state('production')
+const domain = state('')
+const summary = derived(() => summarizeDeployments(deployments()))
+const environmentOptions = [
+  { value: 'production', label: 'Production' },
+  { value: 'staging', label: 'Staging' },
+  { value: 'development', label: 'Development' },
+]
+
+function rows(): DeploymentRecord[] {
+  const query = search().trim().toLowerCase()
+  return deployments().filter((deployment) => {
+    if (status() !== 'all' && deployment.status !== status())
+      return false
+    if (!query)
+      return true
+    return [
+      deployment.commitHash,
+      deployment.commitMessage,
+      deployment.branch,
+      deployment.environment,
+      deployment.author,
+    ].some(value => value.toLowerCase().includes(query))
+  })
 }
 
-const { showModal = false } = defineProps<DeploymentListProps>()
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat().format(value)
+}
+
+function formatDuration(value: number | null): string {
+  if (value === null)
+    return 'Not recorded'
+  if (value < 60)
+    return `${Math.round(value)}s`
+  const minutes = Math.floor(value / 60)
+  const seconds = Math.round(value % 60)
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
+}
+
+async function loadDeployments(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    deployments.set(await fetchDeployments())
+  }
+  catch (error) {
+    loadError.set('Deployment records could not be loaded.')
+    pushToast('error', 'Could not load deployments', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function startDeployment(dryRun: boolean): Promise<void> {
+  isStarting.set(true)
+  try {
+    const result = await dashboardApi<DeploymentStartResponse>('/api/dashboard/deployments', {
+      method: 'POST',
+      body: {
+        confirmed: !dryRun,
+        dryRun,
+        environment: environment(),
+        domain: domain().trim(),
+      },
+    })
+    if (!result.success)
+      throw new Error(result.message)
+    showDeployModal.set(false)
+    pushToast('success', result.message, {
+      detail: result.pid ? `Process ${result.pid}` : undefined,
+    })
+    if (!dryRun)
+      await loadDeployments()
+  }
+  catch (error) {
+    pushToast('error', dryRun ? 'Could not preview deployment' : 'Could not start deployment', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    isStarting.set(false)
+  }
+}
+
+onMount(() => {
+  void loadDeployments()
+})
 </script>
-<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
-    <div class="mb-8 px-4 sm:px-6 lg:px-8">
-      <div>
-        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">
-          Last 30 days
-        </h3>
 
-        <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
-          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-            <dt>
-              <div class="absolute p-3 bg-blue-500 rounded-md">
-                <div class="h-6 w-6 text-white i-hugeicons-rocket-01"></div>
-              </div>
-              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
-                Total Deployments
-              </p>
-            </dt>
-            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
-                71,897
-              </p>
-              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
-                <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd"></path>
-                </svg>
-                <span class="sr-only"> Increased by </span>
-                122
-              </p>
-            </dd>
-          </div>
+<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">Deployments</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Deployment model records through the guarded dashboard API.</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button :disabled="isStarting()" variant="outline" @click="startDeployment(true)">
+        Preview
+      </Button>
+      <Button :disabled="isStarting()" @click="showDeployModal.set(true)">
+        Deploy
+      </Button>
+      <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
+        <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </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 class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-            <dt>
-              <div class="absolute p-3 bg-blue-500 rounded-md">
-                <div class="h-6 w-6 text-white i-hugeicons-clock-01"></div>
-              </div>
-              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
-                Avg. Deploy Time
-              </p>
-            </dt>
-            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
-                3.65 mins
-              </p>
-              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
-                <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd"></path>
-                </svg>
-                <span class="sr-only"> Increased by </span>
-                12 s
-              </p>
-            </dd>
-          </div>
+  <section class="grid gap-3 grid-cols-2 lg:grid-cols-4">
+    <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">Recorded</p>
+      <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(summary().total) }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">Successful</p>
+      <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(summary().successful) }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">Failed</p>
+      <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(summary().failed) }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">Average duration</p>
+      <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatDuration(summary().averageDuration) }}</p>
+    </div>
+  </section>
 
-          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-            <dt>
-              <div class="absolute p-3 bg-blue-500 rounded-md">
-                <div class="h-6 w-6 text-white i-hugeicons-checkmark-circle-02"></div>
-              </div>
-              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
-                Success Rate
-              </p>
-            </dt>
-            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
-                94.57%
-              </p>
-              <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm dark:text-red-400">
-                <svg class="flex-shrink-0 self-center h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd"></path>
-                </svg>
-                <span class="sr-only"> Decreased by </span>
-                3.2%
-              </p>
-            </dd>
-          </div>
-        </dl>
+  <section class="space-y-3">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <h2 class="font-semibold text-gray-900 dark:text-white">Deployment history</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">No estimated totals or synthetic build activity.</p>
+      </div>
+      <div class="flex gap-2">
+        <label class="sr-only" for="deployment-status">Status</label>
+        <select id="deployment-status" x-model="status" class="px-3 py-2 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700">
+          <option value="all">All statuses</option>
+          <option value="success">Success</option>
+          <option value="failed">Failed</option>
+          <option value="running">Running</option>
+          <option value="pending">Pending</option>
+          <option value="cancelled">Cancelled</option>
+        </select>
+        <label class="sr-only" for="deployment-search">Search deployments</label>
+        <input id="deployment-search" x-model="search" type="search" placeholder="Search deployments" class="px-3 py-2 w-56 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700" />
       </div>
     </div>
+    <DeploymentTable :deployments="rows()" :loading="isLoading" />
+  </section>
 
-    <slot name="deployScript" />
-    <slot name="deploymentHistory" />
-  </div>
+  <section class="grid gap-6 grid-cols-1 xl:grid-cols-2">
+    <DeployScript />
+    <LiveTerminalOutput />
+  </section>
 
-  @if(showModal)
-    <slot name="modal" />
-  @endif
+  <Modal
+    :isOpen="showDeployModal()"
+    title="Start deployment"
+    description="This runs ./buddy deploy as a real background process and records its status."
+    size="sm"
+    @close="showDeployModal.set(false)"
+  >
+    <div class="space-y-4">
+      <Select
+        v-model:value="environment"
+        :options="environmentOptions"
+        label="Environment"
+        placeholder=""
+      />
+      <Input
+        v-model:value="domain"
+        type="text"
+        label="Domain"
+        placeholder="app.example.com"
+        hint="Optional. Leave blank to use the configured deployment domain."
+      />
+      <div class="p-3 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">
+        A deployment can create or update cloud resources. Confirm only after reviewing the target environment.
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2 items-center">
+        <Button :disabled="isStarting()" variant="ghost" @click="showDeployModal.set(false)">Cancel</Button>
+        <Button :loading="isStarting()" @click="startDeployment(false)">Start deployment</Button>
+      </div>
+    </template>
+  </Modal>
+</div>

package/resources/components/Dashboard/Deployments/DeploymentTable.stx

@@ -0,0 +1,87 @@
+<script client>
+import type { DeploymentRecord } from '../../../../functions/deployments'
+
+const deployments = useReactiveProp('deployments', [])
+const loading = useReactiveProp('loading', false)
+
+function rows(): DeploymentRecord[] {
+  return deployments() as DeploymentRecord[]
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function formatDuration(value: number | null): string {
+  if (value === null)
+    return '-'
+  if (value < 60)
+    return `${Math.round(value)}s`
+  const minutes = Math.floor(value / 60)
+  const seconds = Math.round(value % 60)
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
+}
+
+function statusClass(status: string): string {
+  if (['success', 'successful', 'completed', 'ready'].includes(status))
+    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+  if (['failed', 'error', 'cancelled'].includes(status))
+    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+  if (['pending', 'queued', 'running', 'deploying'].includes(status))
+    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
+}
+
+function statusLabel(status: string): string {
+  if (!status)
+    return 'Unknown'
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <div :if="loading()" class="px-5 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">Loading deployments</div>
+  <div :if="!loading() && rows().length === 0" class="px-5 py-12 text-center">
+    <div class="mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-rocket-01"></div>
+    <p class="font-semibold text-gray-900 dark:text-white">No deployment records found</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Records appear when a deployment integration writes to the Deployment model.</p>
+  </div>
+  <div :if="rows().length > 0" 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-700/50">
+        <tr>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Commit</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Environment</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Duration</th>
+          <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Created</th>
+          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="deployment in rows()">
+          <tr>
+            <td class="px-4 py-3">
+              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ deployment.commitMessage || 'No commit message' }}</p>
+              <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ deployment.commitHash || 'No commit hash' }} · {{ deployment.branch || 'No branch' }}</p>
+            </td>
+            <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ deployment.environment || 'Not recorded' }}</td>
+            <td class="px-4 py-3">
+              <span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-md ' + statusClass(deployment.status)">{{ statusLabel(deployment.status) }}</span>
+            </td>
+            <td class="px-4 py-3 font-mono text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatDuration(deployment.duration) }}</td>
+            <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(deployment.createdAt) }}</td>
+            <td class="px-4 py-3 text-right">
+              <StxLink :to="'/deployments/' + deployment.id" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">View</StxLink>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>

package/resources/components/Dashboard/Deployments/LiveTerminalOutput.stx

@@ -1,18 +1,99 @@
-<script>
-interface LiveTerminalOutputProps {
-  live?: boolean
+<script client>
+import { fetchDeploymentTerminal } from '../../../../functions/deployments'
+
+const output = state('')
+const filePath = state('storage/logs/deployments.log')
+const exists = state(false)
+const isLoading = state(true)
+const loadError = state('')
+const autoRefresh = state(true)
+const visibility = useDocumentVisibility()
+
+async function loadOutput(showLoading = true): Promise<void> {
+  if (showLoading)
+    isLoading.set(true)
+  loadError.set('')
+  try {
+    const terminal = await fetchDeploymentTerminal()
+    output.set(terminal.output)
+    filePath.set(terminal.path)
+    exists.set(terminal.exists)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : 'Deployment output could not be loaded.')
+  }
+  finally {
+    if (showLoading)
+      isLoading.set(false)
+  }
+}
+
+function toggleAutoRefresh(): void {
+  autoRefresh.set(!autoRefresh())
 }
 
-const { live = true } = defineProps<LiveTerminalOutputProps>()
+const { pause: pauseRefresh, resume: resumeRefresh } = useIntervalFn(() => {
+  if (autoRefresh() && visibility.value === 'visible')
+    void loadOutput(false)
+}, 4000, { immediate: false })
+
+effect(() => {
+  if (autoRefresh())
+    resumeRefresh()
+  else
+    pauseRefresh()
+})
+
+onMount(() => {
+  void loadOutput()
+})
+
+onDestroy(() => {
+  pauseRefresh()
+})
 </script>
-<div class="pt-12 px-4 sm:px-6 lg:px-8">
-    <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">
-            <slot />
-          </div>
-        </div>
+
+<section class="flex flex-col min-h-[32rem] bg-neutral-950 border border-neutral-800 rounded-xl">
+  <header class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between px-5 py-4 border-b border-neutral-800">
+    <div>
+      <div class="flex gap-2 items-center">
+        <span aria-hidden="true" class="h-4 w-4 text-emerald-400 i-hugeicons-command-line"></span>
+        <h2 class="font-semibold text-white">Deployment output</h2>
+        <span :if="autoRefresh()" class="flex relative h-2 w-2">
+          <span class="inline-flex absolute h-full w-full bg-emerald-400 rounded-full opacity-75 animate-ping"></span>
+          <span class="inline-flex relative h-2 w-2 bg-emerald-500 rounded-full"></span>
+        </span>
       </div>
+      <p class="mt-1 font-mono text-neutral-500 text-xs">{{ filePath() }}</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button variant="secondary" interaction="toggle" :pressed="autoRefresh()" @click="toggleAutoRefresh">
+        {{ autoRefresh() ? 'Live on' : 'Live off' }}
+      </Button>
+      <Button variant="secondary" iconOnly :loading="isLoading()" ariaLabel="Refresh deployment output" @click="loadOutput">
+        <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+      </Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" role="alert" class="m-5 p-4 text-red-300 text-sm bg-red-950/40 border border-red-900 rounded-lg">
+    {{ loadError() }}
+  </div>
+
+  <div :if="!loadError()" class="flex-1 min-h-0">
+    <pre
+      :if="output()"
+      role="log"
+      aria-live="polite"
+      aria-label="Deployment terminal output"
+      class="overflow-auto p-5 max-h-[35rem] min-h-[26rem] font-mono leading-6 text-emerald-300 text-xs whitespace-pre-wrap"
+    >{{ output() }}</pre>
+    <div :if="!isLoading() && !output()" class="flex flex-col items-center justify-center px-6 py-20 min-h-[26rem] text-center">
+      <span aria-hidden="true" class="h-8 w-8 text-neutral-700 i-hugeicons-command-line"></span>
+      <p class="mt-3 font-medium text-neutral-300">No deployment output yet</p>
+      <p class="mt-1 max-w-sm text-neutral-500 text-sm">
+        {{ exists() ? 'The deployment log is empty.' : 'Start a deployment to create the log.' }}
+      </p>
     </div>
   </div>
+</section>