@stacksjs/ts-cloud 0.7.56 → 0.7.58

package/dist/ui-src/pages/partials/nav.stx

@@ -1,92 +1,509 @@
 <script server>
-// Mode- and scope-aware, fully server-rendered nav. The deployment mode,
-// environment list and viewer role are injected with the dashboard data; the
-// environment switcher is plain links (`?env=<name>`) the server handles - no
-// client JavaScript needed.
-//
-// The nav offers only what the viewer can actually reach. A member (a
-// collaborator invited to specific sites) has no box-level access, so the
-// server, database and environment-switching surfaces are not shown - the
-// server would refuse them anyway, and offering a link that 403s is worse than
-// not offering it. This is presentation only: access is enforced server-side.
 let __nav = null
 try { __nav = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __nav = null }
-// Server and serverless are mutually exclusive; the dashboard shows one or the other.
+
 const navMode = __nav?.mode ?? 'server'
 const isMember = (__nav?.viewer?.role ?? 'admin') === 'member'
-const showServer = navMode === 'server' && !isMember
-const showServerless = navMode === 'serverless' && !isMember
+const viewerCapabilities = __nav?.viewer?.capabilities ?? []
+const legacyMember = __nav?.viewer?.organizationSource === 'legacy'
+const legacyVisibleCapabilities = new Set(['project:read', 'config:read', 'deployments:read', 'deployments:create', 'runtime:read', 'runtime:logs'])
+const canView = capability => !isMember || (viewerCapabilities.includes(capability) && (!legacyMember || legacyVisibleCapabilities.has(capability)))
 const navEnvs = __nav?.environments ?? []
-const navEnv = __nav?.environment ?? ''
-// Only the box owner can switch the active environment (it is process-wide).
-const showEnvSwitch = navEnvs.length > 1 && !isMember
+const navEnv = __nav?.environment ?? env ?? 'production'
+const navProject = __nav?.project?.name ?? __nav?.project?.slug ?? name ?? 'Project'
+const navProvider = __nav?.server?.provider ?? __nav?.provider ?? ''
+const navRegion = __nav?.server?.region ?? __nav?.project?.region ?? __nav?.region ?? ''
+const envHref = path => `${path}?env=${encodeURIComponent(navEnv)}`
+const isActive = (...keys) => keys.includes(active ?? '')
 </script>
-<nav>
-  <div class="brand"><span class="dot"></span> ts-cloud</div>
-  <div class="tabs">
-    @if (showServer)
-      @if ((active ?? '') === 'server')
-        <a href="/" class="active">Server</a>
-      @else
-        <a href="/">Server</a>
-      @endif
+
+<a class="skip-link" href="#main-content">Skip to content</a>
+<button class="nav-toggle-button" type="button" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false"><span></span><span></span><span></span></button>
+<button class="nav-scrim" type="button" aria-label="Close navigation"></button>
+
+<aside class="app-sidebar" id="primary-navigation" aria-label="Primary navigation">
+  <a class="brand" href="{{ envHref(navMode === 'serverless' ? '/serverless' : '/') }}"><span class="dot"></span><span>ts-cloud</span></a>
+
+  <div class="sidebar-context">
+    <span class="context-label">Project</span>
+    <strong>{{ navProject }}</strong>
+    @if (navProvider || navRegion)
+      <span class="context-detail">{{ [navProvider, navRegion].filter(Boolean).join(' · ') }}</span>
     @endif
-    @if (showServerless)
-      @if ((active ?? '') === 'serverless')
-        <a href="/serverless" class="active">Serverless</a>
-      @else
-        <a href="/serverless">Serverless</a>
+  </div>
+
+  <div class="environment-picker" aria-label="Environment">
+    <span class="context-label">Environment</span>
+    <details>
+      <summary class="environment-current {{ navEnv === 'production' ? 'production' : '' }}">
+        <span>{{ navEnv === 'production' ? 'PROD' : 'ENV' }}</span>
+        <strong>{{ navEnv }}</strong>
+      </summary>
+      @if (navEnvs.length > 1)
+        <div class="environment-menu">
+          @foreach (navEnvs as e)
+            <a class="{{ e === navEnv ? 'active' : '' }}" href="?env={{ encodeURIComponent(e) }}">
+              <span>{{ e }}</span>@if (e === 'production')<small>Production</small>@else<small>Environment</small>@endif
+            </a>
+          @endforeach
+        </div>
       @endif
-    @endif
-    @if (isMember)
-      @if ((active ?? '') === 'sites')
-        <a href="/server/sites" class="active">Sites</a>
-      @else
-        <a href="/server/sites">Sites</a>
+    </details>
+  </div>
+
+  <button class="command-trigger" type="button" aria-keyshortcuts="Meta+K Control+K">
+    <span>Search resources</span><kbd>⌘ K</kbd>
+  </button>
+
+  <div class="nav-groups">
+    @if (navMode === 'server')
+      @if (canView('runtime:read') || canView('audit:read'))
+        <section class="nav-group">
+          <h2>Overview</h2>
+          @if (canView('runtime:read'))<a class="{{ isActive('server') ? 'active' : '' }}" href="{{ envHref('/') }}">Dashboard</a>@endif
+          @if (canView('audit:read'))<a href="{{ envHref('/server/activity') }}">Activity</a>@endif
+        </section>
       @endif
-      @if ((active ?? '') === 'deployments')
-        <a href="/server/deployments" class="active">Deployments</a>
-      @else
-        <a href="/server/deployments">Deployments</a>
+      <section class="nav-group">
+        <h2>Applications</h2>
+        @if (canView('project:read'))<a class="{{ isActive('sites') ? 'active' : '' }}" href="{{ envHref('/server/sites') }}">Services</a>@endif
+        @if (canView('deployments:read'))<a class="{{ isActive('deployments') ? 'active' : '' }}" href="{{ envHref('/server/deployments') }}">Deployments</a>@endif
+        @if (canView('runtime:logs'))<a class="{{ isActive('logs') ? 'active' : '' }}" href="{{ envHref('/server/logs') }}">Logs</a>@endif
+        @if (canView('sources:read'))<a class="{{ isActive('integrations') ? 'active' : '' }}" href="{{ envHref('/integrations') }}">Git integrations</a>@endif
+        @if (canView('applications:read'))<a class="{{ isActive('application-create') ? 'active' : '' }}" href="{{ envHref('/applications/new') }}">Create application</a>@endif
+        @if (canView('applications:read'))<a class="{{ isActive('compose-applications') ? 'active' : '' }}" href="{{ envHref('/applications/compose') }}">Compose applications</a>@endif
+      </section>
+      @if (canView('deployments:read') || canView('runtime:read') || canView('automation:read') || canView('backups:read') || canView('runtime:restart'))
+        <section class="nav-group">
+          <h2>Operations</h2>
+          @if (canView('deployments:read'))<a class="{{ isActive('operation-queue') ? 'active' : '' }}" href="{{ envHref('/operations/queue') }}">Deployment queue</a>@endif
+          @if (canView('deployments:read'))<a class="{{ isActive('previews') ? 'active' : '' }}" href="{{ envHref('/operations/previews') }}">Preview environments</a>@endif
+          @if (canView('deployments:read'))<a class="{{ isActive('releases') ? 'active' : '' }}" href="{{ envHref('/operations/releases') }}">Releases & promotion</a>@endif
+          @if (canView('deployments:read'))<a class="{{ isActive('regions') ? 'active' : '' }}" href="{{ envHref('/operations/regions') }}">Regions & failover</a>@endif
+          @if (canView('deployments:read'))<a class="{{ isActive('maintenance') ? 'active' : '' }}" href="{{ envHref('/operations/maintenance') }}">Maintenance & DR</a>@endif
+          @if (canView('runtime:read'))<a class="{{ isActive('workloads') ? 'active' : '' }}" href="{{ envHref('/operations/workloads') }}">Workloads</a>@endif
+          @if (canView('runtime:logs'))<a class="{{ isActive('observability') ? 'active' : '' }}" href="{{ envHref('/operations/observability') }}">Observability</a>@endif
+          @if (canView('runtime:read'))<a class="{{ isActive('alerts') ? 'active' : '' }}" href="{{ envHref('/operations/alerts') }}">Alerts & health</a>@endif
+          @if (canView('runtime:read'))<a href="{{ envHref('/server/metrics') }}">Metrics</a><a href="{{ envHref('/server/services') }}">Runtime services</a>@endif
+          @if (canView('automation:read'))<a class="{{ isActive('jobs') ? 'active' : '' }}" href="{{ envHref('/operations/jobs') }}">Workers & schedules</a>@endif
+          @if (canView('config:read'))<a class="{{ isActive('configuration') ? 'active' : '' }}" href="{{ envHref('/operations/configuration') }}">Environment &amp; secrets</a>@endif
+          @if (canView('backups:read'))<a class="{{ isActive('backups') ? 'active' : '' }}" href="{{ envHref('/data/backups') }}">Backups &amp; recovery</a>@endif
+          @if (canView('data:read'))<a class="{{ isActive('volumes') ? 'active' : '' }}" href="{{ envHref('/data/volumes') }}">Persistent volumes</a>@endif
+          @if (canView('runtime:restart'))<a href="{{ envHref('/server/actions') }}">Run operations</a>@endif
+        </section>
       @endif
-      @if ((active ?? '') === 'logs')
-        <a href="/server/logs" class="active">Logs</a>
-      @else
-        <a href="/server/logs">Logs</a>
+      @if (canView('data:read') || canView('fleet:read') || canView('security:read') || canView('runtime:terminal'))
+        <section class="nav-group">
+          <h2>Infrastructure</h2>
+          @if (canView('data:read'))<a class="{{ isActive('data-services') ? 'active' : '' }}" href="{{ envHref('/data/services') }}">Data services</a>@endif
+          @if (canView('data:read'))<a class="{{ isActive('volumes') ? 'active' : '' }}" href="{{ envHref('/data/volumes') }}">Persistent volumes</a>@endif
+          @if (canView('fleet:read'))<a href="{{ envHref('/server/firewall') }}">Network & firewall</a><a href="{{ envHref('/server/ssh-keys') }}">SSH keys</a>@endif
+          @if (canView('fleet:read'))<a class="{{ isActive('fleet') ? 'active' : '' }}" href="{{ envHref('/server/fleet') }}">Fleet inventory</a><a class="{{ isActive('capacity') ? 'active' : '' }}" href="{{ envHref('/server/capacity') }}">Capacity & placement</a>@endif
+          @if (canView('security:read'))<a href="{{ envHref('/security') }}">Security posture</a>@endif
+          @if (canView('runtime:terminal'))<a href="{{ envHref('/server/terminal') }}">Terminal</a>@endif
+        </section>
       @endif
-    @endif
-    @if (showServer)
-      @if ((active ?? '') === 'database')
-        <a href="/server/database" class="active">Databases</a>
-      @else
-        <a href="/server/database">Databases</a>
+    @else
+      @if (canView('project:read') || canView('deployments:read') || canView('runtime:read'))
+        <section class="nav-group">
+          <h2>Overview</h2>
+          @if (canView('project:read'))<a class="{{ isActive('serverless') ? 'active' : '' }}" href="{{ envHref('/serverless') }}">Dashboard</a>@endif
+          @if (canView('deployments:read'))<a href="{{ envHref('/serverless/deployments') }}">Deployments</a>@endif
+          @if (canView('runtime:logs'))<a href="{{ envHref('/serverless/logs') }}">Logs</a>@endif
+          @if (canView('runtime:read'))<a href="{{ envHref('/serverless/metrics') }}">Metrics</a><a href="{{ envHref('/serverless/traces') }}">Traces</a>@endif
+        </section>
       @endif
-    @endif
-    @if (!isMember)
-      @if ((active ?? '') === 'team')
-        <a href="/server/team" class="active">Team</a>
-      @else
-        <a href="/server/team">Team</a>
+      @if (canView('config:read') || canView('data:read') || canView('automation:read') || canView('backups:read') || canView('project:read'))
+        <section class="nav-group">
+          <h2>Compute & data</h2>
+          @if (canView('config:read'))<a href="{{ envHref('/serverless/functions') }}">Functions</a>@endif
+          @if (canView('data:read'))<a href="{{ envHref('/serverless/queues') }}">Queues</a><a class="{{ isActive('data-services') ? 'active' : '' }}" href="{{ envHref('/data/services') }}">Data services</a>@endif
+          @if (canView('backups:read'))<a class="{{ isActive('backups') ? 'active' : '' }}" href="{{ envHref('/data/backups') }}">Backups &amp; recovery</a>@endif
+          @if (canView('project:read'))<a href="{{ envHref('/serverless/assets') }}">Assets</a>@endif
+        </section>
+      @endif
+      @if (canView('secrets:read') || canView('fleet:read') || canView('runtime:read'))
+        <section class="nav-group">
+          <h2>Settings</h2>
+          @if (canView('config:read'))<a class="{{ isActive('configuration') ? 'active' : '' }}" href="{{ envHref('/operations/configuration') }}">Environment &amp; secrets</a>@endif
+          @if (canView('fleet:read'))<a href="{{ envHref('/serverless/firewall') }}">Network</a>@endif
+          @if (canView('runtime:read'))<a href="{{ envHref('/serverless/alarms') }}">Alerts</a>@endif
+          @if (canView('project:read'))<a href="{{ envHref('/serverless/cost') }}">Costs</a>@endif
+        </section>
       @endif
     @endif
-  </div>
-  <div class="nav-meta">
-    <span>{{ name ?? '' }}</span>
-    @if (showEnvSwitch)
-      <span class="env-switch" title="Switch environment">
-        @foreach (navEnvs as e)
-          @if (e === navEnv)
-            <a class="active env-opt" href="?env={{ e }}">{{ e }}</a>
-          @else
-            <a class="env-opt" href="?env={{ e }}">{{ e }}</a>
-          @endif
-        @endforeach
-      </span>
-    @else
-      <span class="env">{{ navEnv || env || '' }}</span>
+    @if (navMode === 'serverless' && canView('security:read'))
+      <section class="nav-group">
+        <h2>Security</h2>
+        <a class="{{ isActive('security-posture') ? 'active' : '' }}" href="{{ envHref('/security') }}">Posture & policy</a>
+      </section>
+    @endif
+    @if (navMode === 'serverless' && (canView('sources:read') || canView('applications:read')))
+      <section class="nav-group">
+        <h2>Delivery</h2>
+        @if (canView('applications:read'))<a class="{{ isActive('application-create') ? 'active' : '' }}" href="{{ envHref('/applications/new') }}">Create application</a>@endif
+        @if (canView('sources:read'))<a class="{{ isActive('integrations') ? 'active' : '' }}" href="{{ envHref('/integrations') }}">Git integrations</a>@endif
+      </section>
+    @endif
+    @if (navMode === 'serverless' && (canView('deployments:read') || canView('runtime:read') || canView('automation:read')))
+      <section class="nav-group">
+        <h2>Operations</h2>
+        @if (canView('deployments:read'))<a class="{{ isActive('operation-queue') ? 'active' : '' }}" href="{{ envHref('/operations/queue') }}">Deployment queue</a>@endif
+        @if (canView('deployments:read'))<a class="{{ isActive('previews') ? 'active' : '' }}" href="{{ envHref('/operations/previews') }}">Preview environments</a>@endif
+        @if (canView('deployments:read'))<a class="{{ isActive('releases') ? 'active' : '' }}" href="{{ envHref('/operations/releases') }}">Releases & promotion</a>@endif
+        @if (canView('deployments:read'))<a class="{{ isActive('regions') ? 'active' : '' }}" href="{{ envHref('/operations/regions') }}">Regions & failover</a>@endif
+        @if (canView('deployments:read'))<a class="{{ isActive('maintenance') ? 'active' : '' }}" href="{{ envHref('/operations/maintenance') }}">Maintenance & DR</a>@endif
+        @if (canView('runtime:read'))<a class="{{ isActive('workloads') ? 'active' : '' }}" href="{{ envHref('/operations/workloads') }}">Workloads</a>@endif
+        @if (canView('runtime:logs'))<a class="{{ isActive('observability') ? 'active' : '' }}" href="{{ envHref('/operations/observability') }}">Observability</a>@endif
+        @if (canView('runtime:read'))<a class="{{ isActive('alerts') ? 'active' : '' }}" href="{{ envHref('/operations/alerts') }}">Alerts & health</a>@endif
+        @if (canView('automation:read'))<a class="{{ isActive('jobs') ? 'active' : '' }}" href="{{ envHref('/operations/jobs') }}">Workers & schedules</a>@endif
+      </section>
     @endif
-    <form method="post" action="/api/logout" class="signout">
-      <button type="submit">Sign out</button>
+    @if (canView('users:read'))
+      <section class="nav-group">
+        <h2>Organization</h2>
+        <a class="{{ isActive('team') ? 'active' : '' }}" href="{{ envHref('/server/team') }}">People & access</a>
+        <a class="{{ isActive('automation') ? 'active' : '' }}" href="{{ envHref('/account/automation') }}">API & automation</a>
+      </section>
+    @endif
+    <section class="nav-group">
+      <h2>Account</h2>
+      <a class="{{ isActive('account-security') ? 'active' : '' }}" href="{{ envHref('/account/security') }}">Sign-in & security</a>
+    </section>
+  </div>
+
+  <form method="post" action="/api/logout" class="signout">
+    <button type="submit">Sign out</button>
+  </form>
+</aside>
+
+<dialog class="command-palette" aria-labelledby="command-title">
+  <div class="command-search">
+    <span aria-hidden="true">⌕</span>
+    <input type="search" placeholder="Search services, domains, deployments…" aria-label="Search resources" autocomplete="off">
+    <button type="button" class="command-close" aria-label="Close search">Esc</button>
+  </div>
+  <h2 id="command-title" class="sr-only">Search resources and navigation</h2>
+  <div class="command-status" role="status">Start typing to search this project.</div>
+  <section class="saved-views" aria-labelledby="saved-views-title">
+    <div class="saved-views-heading">
+      <h3 id="saved-views-title">Saved views</h3>
+      <form class="save-view-form">
+        <label class="sr-only" for="save-view-name">Saved view name</label>
+        <input id="save-view-name" maxlength="64" placeholder="Name this view" autocomplete="off">
+        <button type="submit">Save current filters</button>
+      </form>
+    </div>
+    <div class="saved-view-list"></div>
+  </section>
+  @if (!isMember)
+    <form class="tag-result-form">
+      <label for="tag-result-name">Tag selected resource</label>
+      <input id="tag-result-name" maxlength="32" placeholder="customer-facing" pattern="[A-Za-z0-9][A-Za-z0-9 -]{0,31}" autocomplete="off">
+      <input class="tag-color" type="color" value="#5a8be0" aria-label="Tag color">
+      <button type="submit">Add tag</button>
     </form>
+  @endif
+  <div class="command-results" role="listbox" aria-label="Search results"></div>
+  <footer><span>↑ ↓ navigate</span><span>Enter open</span><span>Esc close</span></footer>
+</dialog>
+
+<div class="context-bar" aria-label="Current scope">
+  <div class="context-path">
+    <div class="context-breadcrumb">
+      <span>{{ navProject }}</span><i>/</i><strong>{{ navEnv }}</strong>
+      @if (navProvider || navRegion)<small>{{ [navProvider, navRegion].filter(Boolean).join(' · ') }}</small>@endif
+    </div>
+    <div class="context-filters" aria-label="Active filters"></div>
   </div>
-</nav>
+  <span class="scope-safety {{ navEnv === 'production' ? 'production' : '' }}">{{ navEnv === 'production' ? 'Production scope' : `${navEnv} scope` }}</span>
+</div>
+
+<script>
+(() => {
+  const environment = new URLSearchParams(location.search).get('env')
+  const scopedUrl = (value) => {
+    const url = new URL(value, location.href)
+    if (url.origin !== location.origin || !environment) return value
+    if (!url.searchParams.has('env')) url.searchParams.set('env', environment)
+    return url.href
+  }
+  const main = document.querySelector('.wrap')
+  if (main && !main.id) main.id = 'main-content'
+  const sidebar = document.querySelector('.app-sidebar')
+  const toggle = document.querySelector('.nav-toggle-button')
+  const scrim = document.querySelector('.nav-scrim')
+  const setMenu = (open) => {
+    document.body.classList.toggle('nav-open', open)
+    toggle?.setAttribute('aria-expanded', String(open))
+    toggle?.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation')
+  }
+  toggle?.addEventListener('click', () => setMenu(!document.body.classList.contains('nav-open')))
+  scrim?.addEventListener('click', () => { setMenu(false); toggle?.focus() })
+  for (const anchor of sidebar?.querySelectorAll('.nav-group a[href]') || []) {
+    const target = new URL(anchor.href, location.href)
+    anchor.classList.toggle('active', target.pathname === location.pathname)
+    if (target.pathname === location.pathname) anchor.setAttribute('aria-current', 'page')
+    else anchor.removeAttribute('aria-current')
+  }
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && document.body.classList.contains('nav-open')) {
+      setMenu(false)
+      toggle?.focus()
+    }
+  })
+
+  const palette = document.querySelector('.command-palette')
+  const commandTrigger = document.querySelector('.command-trigger')
+  const commandInput = palette?.querySelector('input[type="search"]')
+  const commandResults = palette?.querySelector('.command-results')
+  const commandStatus = palette?.querySelector('.command-status')
+  const commandClose = palette?.querySelector('.command-close')
+  const savedViews = palette?.querySelector('.saved-views')
+  const savedViewList = palette?.querySelector('.saved-view-list')
+  const saveViewForm = palette?.querySelector('.save-view-form')
+  const saveViewName = palette?.querySelector('#save-view-name')
+  const tagResultForm = palette?.querySelector('.tag-result-form')
+  const tagResultName = palette?.querySelector('#tag-result-name')
+  const tagResultColor = palette?.querySelector('.tag-color')
+  const contextFilters = document.querySelector('.context-filters')
+  let searchTimer
+  let selectedResult = -1
+  let favoriteKeys = new Set()
+
+  const preferenceRequest = (body, method = 'POST') => fetch('/api/search/preferences', {
+    method,
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+  const renderFilterChips = () => {
+    contextFilters?.replaceChildren()
+    const ignored = new Set(['env', 'project'])
+    for (const [key, value] of new URLSearchParams(location.search)) {
+      if (ignored.has(key) || !value) continue
+      const chip = document.createElement('button')
+      chip.type = 'button'
+      chip.className = 'filter-chip'
+      chip.textContent = `${key}: ${value} ×`
+      chip.setAttribute('aria-label', `Remove ${key} filter ${value}`)
+      chip.addEventListener('click', () => {
+        const url = new URL(location.href)
+        url.searchParams.delete(key, value)
+        location.assign(url)
+      })
+      contextFilters?.append(chip)
+    }
+  }
+
+  const renderSavedViews = (filters) => {
+    savedViewList?.replaceChildren()
+    for (const filter of filters) {
+      const row = document.createElement('div')
+      row.className = 'saved-view-row'
+      const link = document.createElement('a')
+      const url = new URL(filter.routeId || '/', location.origin)
+      if (url.origin !== location.origin) continue
+      for (const [key, value] of Object.entries(filter.query || {})) url.searchParams.set(key, String(value))
+      link.href = scopedUrl(url.href)
+      link.textContent = filter.name
+      const remove = document.createElement('button')
+      remove.type = 'button'
+      remove.textContent = 'Remove'
+      remove.setAttribute('aria-label', `Remove saved view ${filter.name}`)
+      remove.addEventListener('click', async () => {
+        const response = await preferenceRequest({ id: filter.id }, 'DELETE')
+        if (response.ok) row.remove()
+      })
+      row.append(link, remove)
+      savedViewList?.append(row)
+    }
+    savedViews?.classList.toggle('empty', filters.length === 0)
+  }
+
+  const loadPreferences = async () => {
+    try {
+      const response = await fetch('/api/search/preferences')
+      if (!response.ok) return
+      const data = await response.json()
+      favoriteKeys = new Set((data.navigation || []).filter(item => item.favorite).map(item => `${item.entityType}:${item.entityId}`))
+      renderSavedViews(data.savedFilters || [])
+    } catch {}
+  }
+
+  const closePalette = () => {
+    palette?.close()
+    commandTrigger?.focus()
+  }
+  const openPalette = () => {
+    if (!palette?.open) palette?.showModal()
+    commandInput?.focus()
+    loadPreferences()
+  }
+  const selectResult = (index) => {
+    const links = [...(commandResults?.querySelectorAll('a[role="option"]') || [])]
+    if (!links.length) return
+    selectedResult = Math.max(0, Math.min(index, links.length - 1))
+    links.forEach((link, position) => link.classList.toggle('selected', position === selectedResult))
+    links[selectedResult]?.scrollIntoView({ block: 'nearest' })
+    const selectedType = links[selectedResult]?.dataset.entityType
+    const taggable = ['service', 'server', 'database'].includes(selectedType)
+    tagResultForm?.querySelector('button')?.toggleAttribute('disabled', !taggable)
+  }
+  const appendHighlighted = (parent, value, query) => {
+    const text = String(value || '')
+    const wanted = query.trim().toLowerCase()
+    const index = wanted ? text.toLowerCase().indexOf(wanted) : -1
+    if (index < 0) { parent.textContent = text; return }
+    parent.append(document.createTextNode(text.slice(0, index)))
+    const mark = document.createElement('mark')
+    mark.textContent = text.slice(index, index + wanted.length)
+    parent.append(mark, document.createTextNode(text.slice(index + wanted.length)))
+  }
+  const renderResults = (results) => {
+    commandResults.replaceChildren()
+    selectedResult = -1
+    if (!results.length) {
+      commandStatus.textContent = commandInput.value.trim() ? 'No matching resources in your current access scope.' : 'Start typing to search this project.'
+      return
+    }
+    commandStatus.textContent = `${results.length} result${results.length === 1 ? '' : 's'}`
+    const groups = new Map()
+    for (const result of results) {
+      if (!groups.has(result.type)) {
+        const group = document.createElement('section')
+        group.className = 'command-group'
+        group.setAttribute('role', 'group')
+        group.setAttribute('aria-label', `${result.type} results`)
+        const heading = document.createElement('h3')
+        heading.textContent = `${result.type}s`
+        group.append(heading)
+        groups.set(result.type, group)
+        commandResults.append(group)
+      }
+      const row = document.createElement('div')
+      row.className = 'command-result-row'
+      const link = document.createElement('a')
+      link.href = scopedUrl(result.href)
+      link.setAttribute('role', 'option')
+      link.dataset.entityType = result.type
+      link.dataset.entityId = result.id
+      const type = document.createElement('span')
+      type.className = 'command-type'
+      type.textContent = result.type
+      const copy = document.createElement('span')
+      copy.className = 'command-copy'
+      const title = document.createElement('strong')
+      appendHighlighted(title, result.title, commandInput.value)
+      const subtitle = document.createElement('small')
+      appendHighlighted(subtitle, [result.subtitle, result.environment, result.provider, ...(result.tags || []).map(tag => `#${tag.name}`)].filter(Boolean).join(' · '), commandInput.value)
+      copy.append(title, subtitle)
+      link.append(type, copy)
+      link.addEventListener('click', () => {
+        fetch('/api/search/preferences', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ action: 'visit', entityType: result.type, entityId: result.id }) }).catch(() => {})
+      })
+      const favorite = document.createElement('button')
+      const favoriteKey = `${result.type}:${result.id}`
+      const setFavoriteLabel = () => {
+        const active = favoriteKeys.has(favoriteKey)
+        favorite.textContent = active ? '★' : '☆'
+        favorite.setAttribute('aria-label', `${active ? 'Remove' : 'Add'} ${result.title} ${active ? 'from' : 'to'} favorites`)
+        favorite.classList.toggle('active', active)
+      }
+      favorite.type = 'button'
+      favorite.className = 'favorite-result'
+      setFavoriteLabel()
+      favorite.addEventListener('click', async () => {
+        const active = !favoriteKeys.has(favoriteKey)
+        const response = await preferenceRequest({ action: 'favorite', entityType: result.type, entityId: result.id, favorite: active })
+        if (!response.ok) return
+        if (active) favoriteKeys.add(favoriteKey)
+        else favoriteKeys.delete(favoriteKey)
+        setFavoriteLabel()
+      })
+      row.append(link, favorite)
+      groups.get(result.type).append(row)
+    }
+    selectResult(0)
+  }
+  const search = () => {
+    clearTimeout(searchTimer)
+    const query = commandInput?.value.trim() || ''
+    if (!query) { renderResults([]); return }
+    commandStatus.textContent = 'Searching…'
+    searchTimer = setTimeout(async () => {
+      try {
+        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
+        const data = await response.json()
+        renderResults(response.ok ? (data.results || []) : [])
+      }
+      catch { commandStatus.textContent = 'Search is temporarily unavailable.' }
+    }, 120)
+  }
+
+  commandTrigger?.addEventListener('click', openPalette)
+  commandClose?.addEventListener('click', closePalette)
+  commandInput?.addEventListener('input', search)
+  commandInput?.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') { event.preventDefault(); closePalette() }
+    else if (event.key === 'ArrowDown') { event.preventDefault(); selectResult(selectedResult + 1) }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); selectResult(selectedResult - 1) }
+    else if (event.key === 'Enter' && selectedResult >= 0) {
+      event.preventDefault()
+      commandResults.querySelectorAll('a[role="option"]')[selectedResult]?.click()
+    }
+  })
+  saveViewForm?.addEventListener('submit', async (event) => {
+    event.preventDefault()
+    const name = saveViewName?.value.trim()
+    if (!name) { saveViewName?.focus(); return }
+    const query = Object.fromEntries(new URLSearchParams(location.search))
+    const response = await preferenceRequest({ action: 'save-filter', name, routeId: location.pathname, query })
+    if (!response.ok) { commandStatus.textContent = 'Could not save this view.'; return }
+    saveViewName.value = ''
+    await loadPreferences()
+    commandStatus.textContent = `Saved view “${name}”.`
+  })
+  tagResultForm?.addEventListener('submit', async (event) => {
+    event.preventDefault()
+    const selected = commandResults.querySelectorAll('a[role="option"]')[selectedResult]
+    const name = tagResultName?.value.trim()
+    if (!selected?.dataset.entityId || !name) { tagResultName?.focus(); return }
+    const response = await fetch('/api/tags', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ resourceId: selected.dataset.entityId, name, color: tagResultColor?.value || '#5a8be0' }),
+    })
+    if (!response.ok) { commandStatus.textContent = 'Could not assign that tag.'; return }
+    tagResultName.value = ''
+    const subtitle = selected.querySelector('small')
+    if (subtitle && !subtitle.textContent.includes(`#${name}`)) subtitle.append(document.createTextNode(` · #${name}`))
+    commandStatus.textContent = `Tagged ${selected.querySelector('strong')?.textContent || 'resource'} with #${name}.`
+  })
+  palette?.addEventListener('cancel', (event) => { event.preventDefault(); closePalette() })
+  document.addEventListener('keydown', (event) => {
+    const shortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k'
+    const slash = event.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)
+    if (shortcut || slash) { event.preventDefault(); openPalette() }
+  })
+  renderFilterChips()
+  window.addEventListener('ts-cloud:filters-changed', renderFilterChips)
+  if (!environment) return
+
+  const originalFetch = window.fetch.bind(window)
+  window.fetch = (input, init) => {
+    if (typeof input === 'string') return originalFetch(scopedUrl(input), init)
+    if (input instanceof URL) return originalFetch(new URL(scopedUrl(input.href)), init)
+    if (input instanceof Request) return originalFetch(new Request(scopedUrl(input.url), input), init)
+    return originalFetch(input, init)
+  }
+
+  document.addEventListener('click', (event) => {
+    const anchor = event.target.closest?.('a[href]')
+    if (!anchor || anchor.target || anchor.hasAttribute('download')) return
+    const href = anchor.getAttribute('href')
+    if (!href || href.startsWith('#') || href.startsWith('mailto:')) return
+    anchor.href = scopedUrl(href)
+  })
+})()
+</script>

package/dist/ui-src/pages/partials/op-confirm.stx

@@ -1,7 +1,7 @@
-<div class="op-confirm panel" @show="pending() !== null">
-  <span>Type <b class="mono">{{ confirmTok() }}</b> to {{ confirmVerb() }}:</span>
-  <input class="op-confirm-input" :value="typed()" @input="typed.set($event.target.value)" @keydown.enter="runOp()" placeholder="confirm" autocomplete="off">
-  <button class="btn sm" :disabled="!canRun()" @click="runOp()">Run</button>
-  <button class="btn ghost sm" @click="cancelOp()">Cancel</button>
+<div class="op-confirm panel" @show="pending() !== null" role="group" aria-labelledby="op-confirm-prompt">
+  <span id="op-confirm-prompt">Type <b class="mono">{{ confirmTok() }}</b> to {{ confirmVerb() }}:</span>
+  <input @ref="opConfirmInput" class="op-confirm-input" :value="typed()" @input="typed.set($event.target.value)" @keydown.enter="runOp()" placeholder="confirm" autocomplete="off" aria-labelledby="op-confirm-prompt">
+  <button type="button" class="btn sm" :class="{ danger: confirmDanger() }" :disabled="!canRun()" @click="runOp()">{{ confirmLabel() }}</button>
+  <button type="button" class="btn ghost sm" :disabled="busy()" @click="cancelOp()">Cancel</button>
 </div>
-<pre class="action-output op-output" @show="opShown()">{{ opOutput() }}</pre>
+<pre class="action-output op-output" @show="opShown()" aria-live="polite">{{ opOutput() }}</pre>