@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Ci/CiDashboard.stx

@@ -0,0 +1,441 @@
+<script client>
+  // CI tracking surface (stacksjs/stacks#1844).
+  //
+  // Renders the snapshot exposed by `/api/dashboard/ci/status`
+  // (Action: Dashboard/Ci/StatusAction → @stacksjs/github). Active tab +
+  // status filter live in the `ciStore` so they survive SPA navigation.
+  //
+  // No <script server>, no window./document. reads — per #1838 the page
+  // is pure presentation against the store.
+  import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
+  import { ciStore } from '~/storage/framework/defaults/views/dashboard/stores/ci'
+
+  // Import the store definition directly so its typed setup and persistence
+  // are part of this page's client bundle. A name-only useStore('ci') lookup
+  // cannot create a store whose defining module was never imported.
+  const ci = ciStore
+  // Role check is now backed by the real RBAC store + `/api/dashboard/auth/me`
+  // (stacksjs/stacks#1843). `isDev()` returns true if the authenticated user
+  // holds the `admin` or `dev` role, OR if the request is unauthenticated
+  // (i.e. local dev dashboard with no bearer token) — see `useRole.ts` for
+  // the full resolution chain.
+  const { isDev } = useRole()
+  const canView = derived(() => isDev())
+
+  // Lift store signals so template :if/:text auto-unwrap them.
+  const loading = derived(() => ci.loading())
+  const error = derived(() => ci.error())
+  const disabled = derived(() => ci.disabled())
+  const orgs = derived(() => ci.orgs())
+  const repos = derived(() => ci.reposForTab())
+  const totals = derived(() => ci.tabTotals())
+  const tabRunners = derived(() => ci.tabRunners())
+  const activeTab = derived(() => ci.activeTab())
+  const statusFilter = derived(() => ci.statusFilter())
+
+  const passingText = derived(() => totals().passing + ' passing')
+  const failingText = derived(() => totals().failing + ' failing')
+  const totalText = derived(() => totals().total + ' total')
+  const runnersText = derived(() => {
+    const r = tabRunners()
+    return 'Runners: ' + r.running + ' running, ' + r.queued + ' queued / ' + r.cap + ' cap'
+  })
+
+  function tabClass(id) {
+    const base = 'px-4 py-2 font-medium text-sm whitespace-nowrap bg-transparent border-b-2 transition-colors cursor-pointer '
+    return activeTab() === id
+      ? base + 'border-violet-400 text-violet-600 dark:text-violet-400'
+      : base + 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
+  }
+
+  function filterClass(id) {
+    const base = 'px-3 py-1 text-xs rounded-full border transition-colors cursor-pointer '
+    return statusFilter() === id
+      ? base + 'bg-violet-500 border-violet-500 text-white'
+      : base + 'bg-transparent border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400'
+  }
+
+  function borderColor(status) {
+    if (status === 'success') return 'border-color: rgba(16,185,129,0.3)'
+    if (status === 'failure' || status === 'error') return 'border-color: rgba(239,68,68,0.3)'
+    if (status === 'pending') return 'border-color: rgba(234,179,8,0.3)'
+    return 'border-color: rgba(39,39,42,1)'
+  }
+
+  function isSuccess(status) { return status === 'success' }
+  function isFailing(status) { return status === 'failure' || status === 'error' }
+  function isPending(status) { return status === 'pending' }
+  function isNoRuns(status) { return status === 'no_runs' }
+
+  function timeAgo(dateStr) {
+    if (!dateStr) return ''
+    const diff = Date.now() - new Date(dateStr).getTime()
+    const mins = Math.floor(diff / 60000)
+    if (mins < 60) return mins + 'm ago'
+    const hrs = Math.floor(mins / 60)
+    if (hrs < 24) return hrs + 'h ago'
+    const days = Math.floor(hrs / 24)
+    return days + 'd ago'
+  }
+
+  function truncate(str, len) {
+    if (!str) return ''
+    return str.length > len ? str.slice(0, len) + '...' : str
+  }
+
+  // ─── Drilldown drawer state (stacksjs/stacks#1848) ──────────────
+  const drilldownTarget = derived(() => ci.drilldown())
+  const drilldownRuns = derived(() => ci.drilldownRuns())
+  const loadingDrilldown = derived(() => ci.loadingDrilldown())
+  const drilldownError = derived(() => ci.drilldownError())
+  const expandedRunId = derived(() => ci.expandedRunId())
+  const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
+  const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
+
+  function runRowClass(conclusion, status) {
+    const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
+    if (status !== 'completed') return base + 'border-yellow-400'
+    if (conclusion === 'success') return base + 'border-emerald-400'
+    if (conclusion === 'failure' || conclusion === 'timed_out') return base + 'border-red-400'
+    if (conclusion === 'cancelled') return base + 'border-zinc-400'
+    return base + 'border-zinc-200 dark:border-zinc-800'
+  }
+
+  function runStatusBadge(conclusion, status) {
+    if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
+    if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
+    if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
+    return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
+  }
+
+  function formatDuration(ms) {
+    if (ms == null) return ''
+    const s = Math.floor(ms / 1000)
+    if (s < 60) return s + 's'
+    const m = Math.floor(s / 60)
+    const rem = s % 60
+    if (m < 60) return m + 'm' + (rem ? ' ' + rem + 's' : '')
+    const h = Math.floor(m / 60)
+    return h + 'h ' + (m % 60) + 'm'
+  }
+
+  function jobsForRun(runId) {
+    return jobsByRunId()[runId] || []
+  }
+
+  function failedJobs(runId) {
+    return jobsForRun(runId).filter(j => j.conclusion && j.conclusion !== 'success' && j.conclusion !== 'skipped' && j.conclusion !== 'neutral')
+  }
+
+  // ─── Runner pressure sparkline (stacksjs/stacks#1850) ────────────
+  //
+  // Inline SVG sparkline — no chart lib. The path is built off the
+  // active tab's sample history with a simple linear scale: x maps
+  // to sample index (oldest left, newest right), y maps to queue
+  // depth normalised against the larger of the org's cap or the
+  // peak queue depth, inverted so higher pressure paints higher
+  // on the chart.
+  const runnerHistory = derived(() => {
+    const tab = activeTab()
+    return (ci.runnerHistoryByOrg()[tab] || [])
+  })
+
+  effect(() => {
+    const tab = activeTab()
+    if (!tab) return
+    // Lazy-load history for the active org tab when it changes.
+    // The store dedupes if already fetched.
+    Promise.resolve().then(() => ci.loadRunnerHistory(tab))
+  })
+
+  function sparklinePath() {
+    const samples = runnerHistory()
+    if (!samples || samples.length === 0) return ''
+    const w = 200
+    const h = 24
+    const r = tabRunners()
+    const cap = Math.max(1, r.cap || 1)
+    let maxQueued = cap
+    for (const s of samples)
+      if (s.queued > maxQueued) maxQueued = s.queued
+    const n = samples.length
+    const stepX = n === 1 ? 0 : w / (n - 1)
+    const points = samples.map((s, i) => {
+      const x = i * stepX
+      const y = h - (s.queued / maxQueued) * h
+      return [x, y]
+    })
+    return points.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' ')
+  }
+
+  function hasHistory() {
+    const samples = runnerHistory()
+    return samples && samples.length >= 2
+  }
+
+  // Top-level fetch — runs on both hard reload (SSR hydration) and SPA
+  // mount, since `<script client>` re-executes on every entry. The store
+  // tracks its own loading flag so back-to-back calls don't double-fire.
+  ci.load()
+</script>
+
+<template>
+<div class="mx-auto px-6 py-8 max-w-7xl">
+  <!-- Role-gated wrapper. Collapses to the "requires dev role" message
+      when an authenticated client-role user lands here. Unauthenticated
+      viewers (dev dashboard on localhost) see the surface as if they
+      were a dev. -->
+  <div :if="!canView" class="px-5 py-8 text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+    <p class="text-sm text-zinc-600 dark:text-zinc-400">This surface requires the dev role.</p>
+  </div>
+
+  <div :if="canView">
+  <header class="mb-6">
+    <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100">CI Status</h1>
+    <p class="mt-1 text-sm text-zinc-500">GitHub Actions health across the configured orgs. Configure in <code class="text-xs">config/dashboard.ts</code>.</p>
+  </header>
+
+  <!-- Disabled state — the surface is off in config/dashboard.ts -->
+  <div :if="disabled" class="px-5 py-8 text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+    <p class="text-sm text-zinc-600 dark:text-zinc-400">CI tracking is disabled.</p>
+    <p class="mt-1 text-xs text-zinc-500">Enable it in <code>config/dashboard.ts</code> by setting <code>ci.enabled = true</code> and listing one or more orgs.</p>
+  </div>
+
+  <!-- Loading state -->
+  <div :if="loading && !disabled" class="flex items-center justify-center" style="min-height: 50vh">
+    <div class="flex flex-col gap-4 items-center">
+      <span aria-hidden="true" class="h-7 w-7 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
+      <span class="text-sm text-zinc-400">Fetching CI status…</span>
+    </div>
+  </div>
+
+  <!-- Error state -->
+  <div :if="error && !loading && !disabled" class="px-5 py-4 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
+    <p class="font-medium text-red-700 text-sm dark:text-red-300">Snapshot failed</p>
+    <p class="mt-1 text-red-600 text-xs dark:text-red-400" :text="error"></p>
+    <p class="mt-2 text-xs text-zinc-500">Most often: <code>GITHUB_TOKEN</code> is missing or lacks <code>public_repo</code> scope.</p>
+  </div>
+
+  <!-- Loaded state -->
+  <div :if="!loading && !error && !disabled">
+    <!-- Org tabs -->
+    <div class="flex overflow-x-auto gap-1 items-center mb-4 border-b border-zinc-200 dark:border-zinc-800" role="tablist" aria-label="Organizations">
+      <button
+        :for="org in orgs"
+        type="button"
+        role="tab"
+        :aria-selected="String(activeTab() === org)"
+        @click="ci.setActiveTab(org)"
+        :class="tabClass(org)"
+        :text="org"
+      ></button>
+    </div>
+
+    <!-- Status-filter chips -->
+    <div class="flex flex-wrap gap-2 mb-4" role="group" aria-label="Status filter">
+      <button type="button" :aria-pressed="String(statusFilter() === 'all')" @click="ci.setStatusFilter('all')" :class="filterClass('all')">All</button>
+      <button type="button" :aria-pressed="String(statusFilter() === 'passing')" @click="ci.setStatusFilter('passing')" :class="filterClass('passing')">Passing</button>
+      <button type="button" :aria-pressed="String(statusFilter() === 'failing')" @click="ci.setStatusFilter('failing')" :class="filterClass('failing')">Failing</button>
+      <button type="button" :aria-pressed="String(statusFilter() === 'pending')" @click="ci.setStatusFilter('pending')" :class="filterClass('pending')">Pending</button>
+    </div>
+
+    <!-- Summary line + runner sparkline -->
+    <div class="flex flex-wrap gap-x-4 gap-y-1 items-center mb-2 text-sm">
+      <span class="font-medium text-emerald-600 dark:text-emerald-400" :text="passingText"></span>
+      <span class="font-medium text-red-500 dark:text-red-400" :text="failingText"></span>
+      <span class="text-zinc-400" :text="totalText"></span>
+      <span class="text-zinc-300 dark:text-zinc-700">·</span>
+      <span class="text-zinc-500 dark:text-zinc-400" :text="runnersText"></span>
+    </div>
+    <!-- Sparkline showing recent queue depth for the active org —
+        appears only when alerts are on (history collection is gated
+        on `ci.alerts.enabled`). Drawn inline as a single SVG path
+        so we don't pull a chart library for 20 datapoints. -->
+    <div :if="hasHistory()" class="flex gap-2 items-center mb-5">
+      <span class="text-[10px] text-zinc-400 tracking-wide uppercase">Queue depth (last hour)</span>
+      <svg width="200" height="24" viewBox="0 0 200 24" class="text-violet-400">
+        <path :d="sparklinePath()" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+      </svg>
+    </div>
+
+    <!-- Repo cards -->
+    <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))">
+      <div
+        :for="repo in repos"
+        :style="borderColor(repo.status)"
+        @click="ci.openDrilldown(repo)"
+        class="flex gap-3 items-start px-4 py-3 bg-zinc-50 dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 border rounded-lg transition-colors cursor-pointer"
+      >
+        <span :if="isSuccess(repo.status)" aria-hidden="true" class="mt-0.5 h-4 w-4 text-emerald-500 i-hugeicons-checkmark-circle-02"></span>
+        <span :if="isFailing(repo.status)" aria-hidden="true" class="mt-0.5 h-4 w-4 text-red-500 i-hugeicons-cancel-circle"></span>
+        <span :if="isPending(repo.status)" aria-hidden="true" class="mt-0.5 h-4 w-4 text-yellow-500 animate-spin i-hugeicons-loading-03"></span>
+        <span :if="isNoRuns(repo.status)" aria-hidden="true" class="mt-0.5 h-4 w-4 text-zinc-500 i-hugeicons-minus-sign"></span>
+
+        <div class="flex-1 min-w-0">
+          <div class="flex gap-2 items-center">
+            <!-- Inner links stop propagation so they remain "open repo
+                in a new tab" rather than triggering the drilldown
+                drawer on the parent card. -->
+            <a :href="repo.url" target="_blank" @click.stop class="font-medium no-underline text-sm text-zinc-900 dark:text-zinc-100 hover:underline" :text="repo.name"></a>
+            <span :if="repo.commitSha" class="font-mono text-xs text-zinc-400" :text="repo.commitSha"></span>
+            <span :if="repo.updatedAt" class="text-xs text-zinc-400" :text="timeAgo(repo.updatedAt)"></span>
+          </div>
+
+          <div :if="repo.commitMessage" class="mt-1">
+            <a :href="repo.commitUrl || repo.url" target="_blank" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline" :text="truncate(repo.commitMessage, 50)"></a>
+          </div>
+
+          <div :if="repo.commitAuthor" class="mt-0.5">
+            <span class="text-xs text-zinc-400" :text="repo.commitAuthor"></span>
+          </div>
+
+          <div :if="repo.renovatePRs > 0 || repo.actionsPRs > 0" class="mt-2 pt-2 border-t border-zinc-200/60 dark:border-zinc-800">
+            <div class="mb-1 text-xs text-zinc-400">Pull Requests</div>
+            <div class="flex flex-wrap gap-x-3 gap-y-0.5">
+              <a :if="repo.renovatePRs > 0" :href="repo.renovatePRsUrl" target="_blank" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
+                renovatebot: <span :text="repo.renovatePRs"></span>
+              </a>
+              <a :if="repo.actionsPRs > 0" :href="repo.actionsPRsUrl" target="_blank" @click.stop class="no-underline text-xs text-zinc-500 dark:text-zinc-400 hover:underline">
+                github-actions: <span :text="repo.actionsPRs"></span>
+              </a>
+            </div>
+          </div>
+
+          <div :if="repo.failedJobs && repo.failedJobs.length > 0" class="mt-2 pt-2 border-red-500/10 border-t">
+            <a
+              :for="job in repo.failedJobs"
+              :href="job.url"
+              target="_blank"
+              @click.stop
+              class="flex gap-1.5 items-center mt-1 no-underline hover:underline"
+            >
+              <span aria-hidden="true" class="h-3 w-3 text-red-400/70 i-hugeicons-cancel-circle"></span>
+              <span class="text-red-400/80 text-xs" :text="job.name"></span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty filter result -->
+    <div :if="repos.length === 0" class="px-4 py-8 text-center text-sm text-zinc-500">
+      No repos match the current filter.
+    </div>
+  </div>
+  </div>
+
+  <!-- ────────── Drilldown drawer (#1848) ────────── -->
+  <!-- Slide-in side panel triggered by a repo-card click. Lists the
+      last 20 workflow runs as a vertical timeline; failing runs
+      expand inline to their failed-jobs list. Closes on backdrop
+      click + Escape. -->
+  <div
+    :if="drilldownTarget()"
+    class="flex fixed inset-0 z-50 justify-end dashboard-modal-layer"
+    @click="ci.closeDrilldown()"
+    @keydown.escape.window="ci.closeDrilldown()"
+  >
+    <div class="absolute inset-0 bg-black/40"></div>
+    <aside
+      @click.stop
+      class="overflow-y-auto relative h-full max-w-2xl w-full bg-white dark:bg-zinc-950 border-l border-zinc-200 dark:border-zinc-800 shadow-2xl"
+    >
+      <!-- Header -->
+      <div class="flex sticky top-0 z-10 gap-3 items-start px-5 py-4 bg-white dark:bg-zinc-950 border-b border-zinc-200 dark:border-zinc-800">
+        <div class="flex-1 min-w-0">
+          <p class="text-xs text-zinc-500 tracking-wide uppercase">Run history</p>
+          <h3 class="font-semibold text-lg text-zinc-900 truncate dark:text-zinc-100" :text="drilldownTarget().fullName"></h3>
+        </div>
+        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close run history" @click="ci.closeDrilldown()">
+          <span aria-hidden="true" class="h-5 w-5 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+
+      <!-- Error -->
+      <div :if="drilldownError()" class="mt-4 mx-5 px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
+        <p class="text-red-700 text-xs dark:text-red-300" :text="drilldownError()"></p>
+      </div>
+
+      <!-- Loading -->
+      <div :if="loadingDrilldown() && drilldownRuns().length === 0" class="px-5 py-12 text-center">
+        <span aria-hidden="true" class="mx-auto h-6 w-6 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
+        <p class="mt-2 text-xs text-zinc-500">Fetching recent runs…</p>
+      </div>
+
+      <!-- Runs list -->
+      <ul :if="drilldownRuns().length > 0" class="px-5 py-3">
+        <li
+          :for="run in drilldownRuns"
+          class="border-b border-zinc-100 dark:border-zinc-900 last:border-0"
+        >
+          <div
+            @click="ci.toggleRunJobs(run.id)"
+            :class="runRowClass(run.conclusion, run.status)"
+          >
+            <div class="flex gap-3 items-start justify-between">
+              <div class="flex-1 min-w-0">
+                <div class="flex gap-2 items-center">
+                  <span
+                    :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${runStatusBadge(run.conclusion, run.status).cls}`"
+                    :text="runStatusBadge(run.conclusion, run.status).label"
+                  ></span>
+                  <span class="font-medium text-sm text-zinc-800 truncate dark:text-zinc-200" :text="run.name"></span>
+                </div>
+                <p :if="run.commitMessage" class="mt-1 text-xs text-zinc-500 truncate" :text="truncate(run.commitMessage, 80)"></p>
+                <div class="flex gap-2 items-center mt-1 text-[10px] text-zinc-400">
+                  <span class="font-mono" :text="run.headShaShort"></span>
+                  <span :if="run.headBranch" :text="run.headBranch"></span>
+                  <span :if="run.commitAuthor">·</span>
+                  <span :if="run.commitAuthor" :text="run.commitAuthor"></span>
+                  <span>·</span>
+                  <span :text="timeAgo(run.updatedAt)"></span>
+                  <span :if="run.durationMs">·</span>
+                  <span :if="run.durationMs" :text="formatDuration(run.durationMs)"></span>
+                </div>
+              </div>
+              <a
+                :href="run.url"
+                target="_blank"
+                @click.stop
+                class="flex-shrink-0 no-underline text-violet-600 text-xs dark:text-violet-400 hover:underline"
+              >view ↗</a>
+            </div>
+          </div>
+
+          <!-- Expanded: failed job list -->
+          <div :if="expandedRunId() === run.id" class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-100 dark:border-zinc-900">
+            <div :if="loadingJobsRunId() === run.id" class="py-2 text-xs text-zinc-500">
+              Loading jobs…
+            </div>
+            <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-xs text-zinc-400">
+              No job detail.
+            </div>
+            <div :if="loadingJobsRunId() !== run.id && failedJobs(run.id).length > 0" class="space-y-1.5">
+              <p class="text-[10px] text-zinc-500 tracking-wide uppercase">Failed jobs</p>
+              <a
+                :for="job in failedJobs(run.id)"
+                :href="job.url"
+                target="_blank"
+                @click.stop
+                class="flex gap-1.5 items-center no-underline text-red-700 text-xs dark:text-red-400 hover:underline"
+              >
+                <span aria-hidden="true" class="h-2.5 w-2.5 i-hugeicons-cancel-circle"></span>
+                <span :text="job.name"></span>
+                <span :if="job.durationMs" class="text-zinc-400" :text="'(' + formatDuration(job.durationMs) + ')'"></span>
+              </a>
+            </div>
+            <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-xs text-zinc-500">
+              All <span :text="jobsForRun(run.id).length"></span> jobs passed.
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <!-- Empty -->
+      <div :if="!loadingDrilldown() && !drilldownError() && drilldownRuns().length === 0" class="px-5 py-12 text-center">
+        <p class="text-sm text-zinc-500">No recent runs.</p>
+      </div>
+    </aside>
+  </div>
+</div>
+</template>

package/resources/components/Dashboard/CodeEditor.stx

@@ -1,41 +1,73 @@
-<script>
-interface CodeEditorProps {
-  live?: boolean
-  lang?: string
-  theme?: string
-  content?: string
+<script client>
+type CodeEditorLanguage = 'env' | 'json' | 'typescript' | 'text'
+
+const liveValue = useReactiveProp('value', '')
+const liveLanguage = useReactiveProp('language', 'text' as CodeEditorLanguage)
+const liveLabel = useReactiveProp('label', 'Code editor')
+const liveLoading = useReactiveProp('loading', false)
+const liveReadonly = useReactiveProp('readonly', false)
+const emit = defineEmits()
+
+const lineCount = derived(() => Math.max(1, liveValue().split('\n').length))
+const characterCount = derived(() => liveValue().length)
+
+function inputValue(event: Event): string {
+  return (event.target as HTMLTextAreaElement).value
 }
 
-const { live = false, lang = 'typescript', theme = 'github_dark', content = `echo 'Hello World!' } = defineProps<CodeEditorProps>()
+function handleInput(event: Event): void {
+  const value = inputValue(event)
+  emit('update:value', value)
+  emit('input', value)
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (!(event.metaKey || event.ctrlKey))
+    return
 
-mv ./test/test.ts ./jello
-cp`
+  if (event.key.toLowerCase() === 's') {
+    event.preventDefault()
+    emit('save')
+  }
+  else if (event.shiftKey && event.key.toLowerCase() === 'f') {
+    event.preventDefault()
+    emit('format')
+  }
+}
 </script>
-<header class="flex items-center justify-between p-4 bg-[#1f2428] border-[#30363d] border-b rounded-t-lg">
+
+<div class="overflow-hidden bg-[#0d1117] border border-[#30363d] rounded-xl shadow-sm">
+  <div class="flex items-center justify-between px-4 py-3 bg-[#161b22] border-[#30363d] border-b">
+    <div class="flex gap-3 items-center min-w-0">
+      <div class="flex gap-1.5" aria-hidden="true">
+        <span class="h-2.5 w-2.5 bg-[#f85149] rounded-full"></span>
+        <span class="h-2.5 w-2.5 bg-[#db9d16] rounded-full"></span>
+        <span class="h-2.5 w-2.5 bg-[#2ea043] rounded-full"></span>
+      </div>
+      <span class="font-mono text-[#c9d1d9] text-xs truncate" :text="liveLabel()"></span>
+    </div>
     <div class="flex gap-2 items-center">
-      <div class="h-3 w-3 bg-[#f85149] rounded-full"></div>
-      <div class="h-3 w-3 bg-[#db9d16] rounded-full"></div>
-      <div class="h-3 w-3 bg-[#2ea043] rounded-full"></div>
+      <span :if="liveLoading()" class="h-3.5 w-3.5 text-[#8c959f] animate-spin i-hugeicons-loading-03" aria-label="Loading"></span>
+      <span class="px-2 py-0.5 font-semibold text-[#8c959f] text-[10px] uppercase bg-[#21262d] border border-[#30363d] rounded" :text="liveLanguage()"></span>
     </div>
+  </div>
 
-    @if(!live)
-      <span class="font-mono text-[#c9d1d9] text-sm">Deploy Script</span>
-    @else
-      <span class="font-mono text-[#c9d1d9] text-sm">Live Terminal Output</span>
-    @endif
-  </header>
+  <textarea
+    x-model="liveValue"
+    :aria-label="liveLabel()"
+    :readonly="liveReadonly()"
+    :disabled="liveLoading()"
+    spellcheck="false"
+    autocomplete="off"
+    autocapitalize="off"
+    rows="24"
+    class="block p-4 min-h-[28rem] w-full font-mono leading-6 text-[#c9d1d9] text-[13px] bg-[#0d1117] border-0 outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-inset disabled:opacity-60 resize-y"
+    @input="handleInput"
+    @keydown="handleKeydown"
+  ></textarea>
 
-  <div class="bg-[#0d1117] rounded-b-lg stx-code-editor" style="height: 300px; font-size: 14px;">
-    <pre class="p-4 font-mono text-[#c9d1d9] text-sm">{{ content }}</pre>
+  <div class="flex items-center justify-between px-4 py-2 font-mono text-[#8c959f] text-[10px] bg-[#161b22] border-[#30363d] border-t">
+    <span :text="`${lineCount()} lines`"></span>
+    <span :text="`${characterCount()} characters`"></span>
   </div>
-<style>
-select {
-  margin-right: 15px;
-}
-
-.stx-code-editor {
-  font-size: 14px;
-  flex: 1;
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-}
-</style>
+</div>