heroku-dash 0.2.0 → 0.3.0

package/README.md

@@ -66,6 +66,8 @@ When remotes span multiple pipelines, the browser asks you to choose one. Use `-
 
 The left sidebar browses teams, pipelines, or apps. Choosing a team scopes its pipelines and apps; **All teams / personal** clears the scope. Pipelines list apps ordered by stage. Open an app to see its seven views, with a selectable resource list above a scrollable details pane.
 
+Overview, Resources, Add-ons, Settings, and Metrics use aligned tables with fixed column headers and right-aligned quantities. Columns adapt to the terminal width; narrow layouts hide the Resources age and Add-ons service columns. Full values, including shortened names and hidden columns, remain available in Details.
+
 The heading shows the resource hierarchy: **team › pipeline › app**, including when you open an app or pipeline directly. Personal resources use **Personal**, and apps without a pipeline use **No pipeline**. Opening a resource resolves its parents without changing the sidebar's team filter.
 
 Nerd Font icons identify teams, pipelines, apps, process types, databases, and the app views. **Green** indicates healthy/successful states, **amber** indicates pending states or maintenance, **red** indicates failures, and **gray** indicates inactive or unknown states. Config rows use a lock for masked values and an amber eye for revealed values. Status text remains visible alongside icons and colors.
@@ -199,7 +201,7 @@ npm publish
 
 `npm publish` runs lint and tests through `prepublishOnly`, then generates the command manifest through `prepack`. The package includes the runtime source, `oclif.manifest.json`, README, and MIT license. Development dependencies are needed to publish, but aren't required when installing the published plugin. Package access is explicitly public.
 
-The current package version is **`heroku-dash@0.2.0`**. For subsequent releases, increment the version before publishing, for example:
+The current package version is **`heroku-dash@0.3.0`**. For subsequent releases, increment the version before publishing, for example:
 
 ```sh
 npm version patch --no-git-tag-version

package/oclif.manifest.json

@@ -101,5 +101,5 @@
       ]
     }
   },
-  "version": "0.2.0"
+  "version": "0.3.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroku-dash",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A keyboard-driven terminal dashboard for Heroku",
   "author": "Ryan McGeary <ryan@mcgeary.org>",
   "homepage": "https://github.com/rmm5t/heroku-dash",

package/src/ui/columns.js

@@ -0,0 +1,75 @@
+import blessed from 'blessed'
+import {single} from './text.js'
+
+function cell(value, width, right = false) {
+  let text = single(value)
+  if (blessed.unicode.strWidth(text) > width) {
+    let clipped = ''
+    let length = 0
+    for (const character of text) {
+      const size = blessed.unicode.strWidth(character)
+      if (length + size > width - 1) break
+      clipped += character
+      length += size
+    }
+    text = width > 0 ? `${clipped}…` : ''
+  }
+  const padding = ' '.repeat(Math.max(0, width - blessed.unicode.strWidth(text)))
+  return right ? padding + text : text + padding
+}
+
+export const TABLE_COLUMNS = {
+  Overview: [
+    {label: 'Item / Process', min: 14, weight: 1, max: 24},
+    {label: 'Size / Value', min: 10, weight: 3},
+    {label: 'Qty', width: 4, right: true},
+    {label: 'Status', width: 13},
+  ],
+  Resources: [
+    {label: 'Process / Dyno', min: 14, weight: 1, max: 26},
+    {label: 'Size', min: 12, weight: 2},
+    {label: 'Qty', width: 4, right: true},
+    {label: 'State / Action', width: 14},
+    {label: 'Age', width: 9, hideBelow: 72},
+  ],
+  'Add-ons': [
+    {label: 'Add-on', min: 16, weight: 2},
+    {label: 'Service', min: 14, weight: 1, hideBelow: 78},
+    {label: 'Plan', min: 12, weight: 1},
+    {label: 'State', width: 19},
+  ],
+  Settings: [
+    {label: 'Setting / Type', min: 14, weight: 1, max: 24},
+    {label: 'Value', min: 16, weight: 4},
+    {label: 'Status / Action', width: 16},
+  ],
+  Metrics: [
+    {label: 'Metric / Process', compact: 'Metric', min: 14, weight: 3},
+    {label: 'Target / Total', compact: 'Total/Goal', min: 11, weight: 1, max: 16, right: true},
+    {label: 'Current', min: 11, weight: 1, max: 16, right: true},
+    {label: 'Status', width: 13},
+  ],
+}
+
+export function tableColumns(values, width, layout = 'Overview') {
+  width = Math.max(0, Math.floor(width))
+  const columns = TABLE_COLUMNS[layout].map((column, index) => ({...column, index}))
+    .filter(column => width >= (column.hideBelow ?? 0))
+  const widths = columns.map(column => column.width ?? column.min)
+  let extra = width - widths.reduce((sum, size) => sum + size, 0) - (columns.length - 1) * 2
+  const value = column => values ? values[column.index] : width < 72 ? column.compact ?? column.label : column.label
+  if (extra < 0) return cell(columns.map(column => single(value(column))).join('  '), width)
+  while (extra > 0) {
+    const flexible = columns.map((column, index) => ({...column, position: index}))
+      .filter(column => column.weight && widths[column.position] < (column.max ?? Infinity))
+    if (!flexible.length) break
+    const weight = flexible.reduce((sum, column) => sum + column.weight, 0)
+    const remaining = extra
+    for (const column of flexible) {
+      const share = Math.min(extra, Math.max(1, Math.floor(remaining * column.weight / weight)), (column.max ?? Infinity) - widths[column.position])
+      widths[column.position] += share
+      extra -= share
+    }
+  }
+  return columns.map((column, index) => cell(value(column), widths[index], column.right)).join('  ')
+}

package/src/ui/dashboard.js

@@ -5,6 +5,7 @@ import {errorMessage} from '../api.js'
 import {resolveHierarchy} from '../hierarchy.js'
 import {appRows, clean, single, sortApps, STAGES, TABS} from './views.js'
 import {detailContent, isValueClick} from './details.js'
+import {tableColumns} from './columns.js'
 import {badge, icons, paint, palette, rowLabel, SCANNER_INTERVAL, scannerFrame, shortcut, stageStyles, tabIcons} from './theme.js'
 
 const SIDEBAR_WIDTH = '22%'
@@ -52,6 +53,13 @@ export class Dashboard {
     this.summary = blessed.box({parent, top: 6, height: 5, left: SIDEBAR_WIDTH, right: 0, padding: {left: 2, right: 1}, style: {fg: palette.fg, bg: palette.bg}})
     this.main = blessed.list({parent, top: 11, height: '40%-4', left: SIDEBAR_WIDTH, right: 0, ...frame(), label: ` ${icons.apps}  Apps `, keys: true, mouse: true, tags: false,
       scrollbar: {ch: '│', style: {bg: palette.border}}, style: {...frame().style, selected: {bg: palette.selected, fg: 'white'}, item: {fg: palette.fg}}})
+    this.columnHeader = blessed.box({parent: this.main, top: -1, left: 0, right: 1, height: 1, fixed: true, hidden: true, tags: false, autoFocus: false,
+      style: {fg: palette.muted, bg: palette.panel, bold: true}})
+    this.columnHeader.on('click', () => {
+      if (this.modal || this.closed) return
+      this.main.focus()
+      this.render()
+    })
     this.detail = blessed.box({parent, top: '40%+7', bottom: 4, left: SIDEBAR_WIDTH, right: 0, ...frame(), label: ` ${icons.overview}  Details `, padding: {left: 1, right: 1}, scrollable: true, alwaysScroll: true, keys: true, vi: true, mouse: true, tags: false,
       scrollbar: {ch: '│', style: {bg: palette.border}}})
     this.status = blessed.box({parent, bottom: 2, height: 2, left: 0, right: 0, padding: {left: 1}, tags: false, style: {fg: palette.muted, bg: palette.bg}})
@@ -192,6 +200,7 @@ export class Dashboard {
 
   render() {
     if (this.closed) return
+    this.layoutColumns()
     const team = this.app || this.pipeline ? this.breadcrumbTeam?.name ?? 'Loading team…' : this.team?.name
     const pipeline = this.pipeline?.name ?? (this.app ? this.data ? this.data.errors.coupling ? 'Pipeline unavailable' : 'No pipeline' : 'Loading pipeline…' : null)
     const scope = [['teams', team], ['pipelines', pipeline], ['apps', this.app?.name]]
@@ -414,7 +423,7 @@ export class Dashboard {
     this.updatingRows = true
     try {
       this.rows = rows
-      this.main.setItems(rows.map(rowLabel))
+      this.main.setItems(rows.map(row => rowLabel(row, this.main.width - this.main.iwidth - 1)))
       this.main.select(Math.min(selected, Math.max(0, rows.length - 1)))
     } finally {
       this.updatingRows = false
@@ -422,6 +431,24 @@ export class Dashboard {
     this.drawDetail()
   }
 
+  layoutColumns() {
+    const columnar = this.rows.find(row => row.columns)
+    this.main.padding.top = columnar ? 1 : 0
+    // Keep the border label above the new header padding (Blessed normally
+    // repositions labels only after scrolling or resizing).
+    if (this.main._label) this.main._label.rtop = this.main.childBase - this.main.itop
+    if (!columnar) { this.columnHeader.hide(); return }
+    const width = this.main.width - this.main.iwidth - 1
+    this.columnHeader.setContent(`    ${tableColumns(null, width - 4, columnar.columnLayout)}`)
+    this.columnHeader.show()
+    this.columnHeader.setFront()
+    // Reflow on resize without rebuilding the list or changing its selection.
+    for (const [index, row] of this.rows.entries()) {
+      const label = rowLabel(row, width)
+      if (this.main.ritems[index] !== label) this.main.setItem(index, label)
+    }
+  }
+
   drawDetail() {
     const row = this.rows[this.main.selected]
     this.detail.setLabel(` ${icons[row?.icon] ?? icons.overview}  Details `)

package/src/ui/theme.js

@@ -1,5 +1,6 @@
 import blessed from 'blessed'
 import {clean, single} from './text.js'
+import {tableColumns} from './columns.js'
 
 export const palette = {
   bg: '#161b22', panel: '#1c212b', fg: '#c9d1d9', muted: '#8b949e',
@@ -68,8 +69,8 @@ export function stateStyle(state) {
   return {icon: 'stopped', tone: 'muted'}
 }
 
-export function rowLabel(row) {
-  const text = single(row.label)
+export function rowLabel(row, width = 90) {
+  const text = row.columns ? tableColumns(row.columns, Math.max(0, width - 4), row.columnLayout) : single(row.label)
   const emphasis = row.emphasis ? single(row.emphasis) : ''
   let offset = emphasis ? text.indexOf(emphasis) : -1
   // A state such as "up" must highlight the state column, not "backup.1".

package/src/ui/views.js

@@ -1,6 +1,7 @@
 import {clean, single} from './text.js'
 import {stateStyle} from './theme.js'
 import {addonDetails, dynoDetails} from './resource-details.js'
+import {TABLE_COLUMNS} from './columns.js'
 
 export {clean, single} from './text.js'
 export function age(date, now = Date.now()) {
@@ -34,19 +35,30 @@ export function operationalMetrics(data) {
 export function appRows(tab, data, {config, configError, revealed = new Set(), resources} = {}) {
   const {app, formation, dynos, addons, attachments, releases, domains, buildpacks, errors} = data
   const rows = []
+  const noticeColumns = (label, status) => TABLE_COLUMNS[tab]?.map((column, index) => index === 0 ? label : /^(State|Status)/.test(column.label) ? status : '—')
   const error = section => {
-    if (errors[section]) rows.push(row(`${section} unavailable`, errors[section], {icon: 'error', tone: 'error', emphasis: 'unavailable'}))
+    if (errors[section]) rows.push(row(`${section} unavailable`, errors[section], {
+      icon: 'error', tone: 'error', emphasis: 'Unavailable',
+      columns: noticeColumns(section, 'Unavailable'),
+    }))
   }
   if (tab === 'Overview') {
     rows.push(row(`${app.name}  ·  ${app.maintenance ? 'MAINTENANCE' : 'ACTIVE'}`, lines([
       ['App', app.name], ['Team', app.team?.name ?? 'Personal / shared'], ['Region', app.region?.name],
       ['Stack', app.stack?.name], ['Generation', app.generation?.name], ['Web URL', app.web_url],
       ['Git URL', app.git_url], ['Created', app.created_at], ['Updated', app.updated_at], ['ID', app.id],
-    ]), {...stateStyle(app.maintenance ? 'maintenance' : 'active'), emphasis: app.maintenance ? 'MAINTENANCE' : 'ACTIVE'}))
+    ]), {...stateStyle(app.maintenance ? 'maintenance' : 'active'), emphasis: app.maintenance ? 'MAINTENANCE' : 'ACTIVE',
+      columns: ['App', app.name, '—', app.maintenance ? 'MAINTENANCE' : 'ACTIVE']}))
     rows.push(row(`${formation.reduce((n, f) => n + f.quantity, 0)} configured dynos  ·  ${addons.length} add-ons`,
-      'Use Resources to inspect and scale process types.\nUse Add-ons to inspect plans and attachments.\nConfig values are masked until explicitly revealed.', {icon: 'resources'}))
-    for (const f of formation) rows.push(row(`${f.type}  ·  ${f.quantity} × ${f.size}`, f.command, {icon: 'resources', tone: f.quantity ? 'cyan' : 'muted'}))
-    if (releases[0]) rows.push(row(`Latest release: v${releases[0].version}  ·  ${releases[0].status}`, releases[0].description, {...stateStyle(releases[0].status), emphasis: releases[0].status}))
+      'Use Resources to inspect and scale process types.\nUse Add-ons to inspect plans and attachments.\nConfig values are masked until explicitly revealed.', {
+        icon: 'resources', columns: ['Total dynos', errors.addons ? 'Add-ons unavailable' : `${addons.length} add-ons`, errors.formation ? '—' : formation.reduce((n, f) => n + f.quantity, 0), errors.formation ? 'Unavailable' : 'Configured'],
+      }))
+    for (const f of formation) rows.push(row(`${f.type}  ·  ${f.quantity} × ${f.size}`, lines([
+      ['Process', f.type], ['Quantity', f.quantity], ['Size', f.size], ['Command', f.command],
+    ]), {icon: 'resources', tone: f.quantity ? 'cyan' : 'muted', columns: [f.type, f.size, f.quantity, f.quantity ? 'Configured' : 'Scaled to 0']}))
+    if (releases[0]) rows.push(row(`Latest release: v${releases[0].version}  ·  ${releases[0].status}`, releases[0].description, {
+      ...stateStyle(releases[0].status), emphasis: releases[0].status, columns: ['Latest release', `v${releases[0].version}`, '—', releases[0].status],
+    }))
     for (const section of Object.keys(errors)) error(section)
   }
   if (tab === 'Resources') {
@@ -54,24 +66,30 @@ export function appRows(tab, data, {config, configError, revealed = new Set(), r
     for (const f of formation) rows.push(row(`${f.type.padEnd(16)} ${String(f.quantity).padStart(3)} × ${f.size}    [s] scale`, lines([
       ['Process', f.type], ['Quantity', f.quantity], ['Size', f.size], ['Command', f.command],
       ['Updated', f.updated_at], ['Action', 'Press s to change quantity / size. Scaling may change billing.'],
-    ]) + dynoDetails(resources, 'formations', f.type), {kind: 'formation', value: f, icon: 'resources', tone: f.quantity ? 'cyan' : 'muted', emphasis: f.type}))
+    ]) + dynoDetails(resources, 'formations', f.type), {kind: 'formation', value: f, icon: 'resources', tone: f.quantity ? 'cyan' : 'muted', emphasis: f.type,
+      columns: [f.type, f.size, f.quantity, '[s] scale', '—']}))
     for (const d of dynos) rows.push(row(`  ${d.name.padEnd(20)} ${d.state.padEnd(10)} ${d.size}  ·  ${age(d.created_at)}`, lines([
       ['Dyno', d.name], ['State', d.state], ['Size', d.size], ['Release', d.release ? `v${d.release.version}` : '—'],
-      ['Created', d.created_at], ['Command', d.command],
-    ]) + dynoDetails(resources, 'instances', d.name), {...stateStyle(d.state), emphasis: d.state}))
+      ['Age', age(d.created_at)], ['Created', d.created_at], ['Command', d.command],
+    ]) + dynoDetails(resources, 'instances', d.name), {...stateStyle(d.state), emphasis: d.state,
+      columns: [d.name, d.size, '—', d.state, age(d.created_at)]}))
   }
   if (tab === 'Add-ons') {
     error('addons'); error('attachments')
     const all = new Map(addons.map(addon => [addon.id, addon]))
     for (const attachment of attachments) if (!all.has(attachment.addon.id)) all.set(attachment.addon.id, attachment.addon)
     for (const addon of all.values()) {
-      const state = resources?.data?.addons?.byId?.[addon.id]?.state ?? addon.state
+      const enriched = resources?.data?.addons?.byId?.[addon.id]
+      const state = enriched?.state ?? addon.state
+      const service = addon.addon_service?.human_name ?? enriched?.service ?? addon.addon_service?.name ?? '—'
+      const plan = enriched?.plan ?? addon.plan?.human_name ?? addon.plan?.name?.replace(/^[^:]+:/, '')
       rows.push(row(`${addon.name}  ·  ${addon.plan?.name ?? 'shared attachment'}  ·  ${state ?? '—'}`, lines([
-        ['Name', addon.name], ['Service', addon.addon_service?.name], ['Plan', addon.plan?.name],
+        ['Name', addon.name], ['Service', addon.addon_service?.name ?? enriched?.service], ['Plan', addon.plan?.name ?? enriched?.plan],
         ['State', state], ['Billing app', addon.app?.name], ['Created', addon.created_at],
         ['Attachments', attachments.filter(a => a.addon.id === addon.id).map(a => a.name).join(', ') || '—'],
         ['Config keys', addon.config_vars?.join(', ')], ['ID', addon.id],
-      ]) + addonDetails(resources, addon.id), {...stateStyle(state), icon: /postgres|redis|mysql|mongo|key-value/i.test(addon.addon_service?.name ?? addon.plan?.name ?? '') ? 'database' : 'addons', emphasis: state}))
+      ]) + addonDetails(resources, addon.id), {...stateStyle(state), icon: /postgres|redis|mysql|mongo|key-value/i.test(addon.addon_service?.name ?? addon.plan?.name ?? '') ? 'database' : 'addons', emphasis: state,
+        columns: [addon.name, service, plan, state]}))
     }
   }
   if (tab === 'Config') {
@@ -89,17 +107,20 @@ export function appRows(tab, data, {config, configError, revealed = new Set(), r
     }
   }
   if (tab === 'Settings') {
-    rows.push(row(`Maintenance mode: ${app.maintenance ? 'ON' : 'OFF'}    [m] toggle`, 'Press m to toggle maintenance mode. This changes how the app serves requests.', {icon: 'settings', tone: app.maintenance ? 'warning' : 'success', emphasis: app.maintenance ? 'ON' : 'OFF'}))
+    rows.push(row(`Maintenance mode: ${app.maintenance ? 'ON' : 'OFF'}    [m] toggle`, 'Press m to toggle maintenance mode. This changes how the app serves requests.', {icon: 'settings', tone: app.maintenance ? 'warning' : 'success', emphasis: app.maintenance ? 'ON' : 'OFF',
+      columns: ['Maintenance', app.maintenance ? 'ON' : 'OFF', '[m] toggle']}))
     rows.push(row(`Region: ${app.region?.name}  ·  Stack: ${app.stack?.name}`, lines([
       ['Region', app.region?.name], ['Stack', app.stack?.name], ['Build stack', app.build_stack?.name],
       ['Space', app.space?.name ?? 'Common Runtime'], ['ACM', app.acm ? 'Enabled' : 'Disabled'],
-    ]), {icon: 'globe', tone: 'info'}))
+    ]), {icon: 'globe', tone: 'info', columns: ['Region / stack', `${app.region?.name ?? '—'} / ${app.stack?.name ?? '—'}`, '—']}))
     error('domains'); error('buildpacks')
     for (const domain of domains) rows.push(row(`Domain  ${domain.hostname}`, lines([
       ['Hostname', domain.hostname], ['Kind', domain.kind], ['CNAME', domain.cname],
       ['Status', domain.status], ['ACM status', domain.acm_status], ['ACM reason', domain.acm_status_reason],
-    ]), {icon: 'globe', tone: 'info'}))
-    for (const item of buildpacks) rows.push(row(`Buildpack  ${item.ordinal}. ${item.buildpack?.name ?? item.buildpack?.url}`, item.buildpack?.url, {icon: 'code', tone: 'accent'}))
+    ]), {icon: 'globe', tone: 'info', columns: ['Domain', domain.hostname, domain.status]}))
+    for (const item of buildpacks) rows.push(row(`Buildpack  ${item.ordinal}. ${item.buildpack?.name ?? item.buildpack?.url}`, lines([
+      ['Buildpack', item.buildpack?.name], ['Order', item.ordinal], ['URL', item.buildpack?.url],
+    ]), {icon: 'code', tone: 'accent', columns: [`Buildpack ${item.ordinal}`, item.buildpack?.name ?? item.buildpack?.url, '—']}))
   }
   if (tab === 'Releases') {
     error('releases')
@@ -115,17 +136,27 @@ export function appRows(tab, data, {config, configError, revealed = new Set(), r
     rows.push(row(`Dyno health    ${available ? `${m.healthy} / ${m.desired} configured dynos up or idle` : 'unavailable'}`, available
       ? `${m.healthy} up / idle   ${m.starting} starting   ${m.crashed} crashed\n${m.total} total dynos, including one-off processes.\n\nBased on current dyno states, not historical availability.\nEco dynos in the idle state are counted as healthy.\nDuring a deploy, overlapping dynos can exceed the desired count.`
       : 'Dyno health cannot be computed because formation or dyno data is unavailable.',
-    {icon: 'metrics', tone: !available ? 'muted' : m.crashed ? 'error' : m.healthy < m.desired ? 'warning' : 'success', emphasis: 'Dyno health'}))
+    {icon: 'metrics', tone: !available ? 'muted' : m.crashed ? 'error' : m.healthy < m.desired ? 'warning' : 'success', emphasis: 'Dyno health',
+      columns: ['Dyno health', available ? m.desired : '—', available ? m.healthy : '—', available ? 'Up / idle' : 'Unavailable']}))
     for (const f of formation) {
       const members = dynos.filter(d => d.type === f.type)
       const running = members.filter(d => ['up', 'idle'].includes(d.state)).length
-      rows.push(row(`${f.type}  ·  desired ${f.quantity}  ·  running ${running}`, members.map(d => `${d.name.padEnd(22)} ${d.state.padEnd(10)} age ${age(d.created_at)}`).join('\n') || 'No dynos currently running.',
-        {icon: 'resources', tone: errors.dynos ? 'muted' : members.some(d => d.state === 'crashed') ? 'error' : running < f.quantity ? 'warning' : f.quantity ? 'success' : 'muted', emphasis: `running ${running}`}))
+      const crashed = members.some(d => d.state === 'crashed')
+      const status = errors.dynos ? 'Unavailable' : crashed ? 'Crashed' : running < f.quantity ? 'Below target' : !f.quantity && !running ? 'Scaled to 0' : 'Up / idle'
+      const detail = lines([['Process', f.type], ['Desired', f.quantity], ['Running', errors.dynos ? 'Unavailable' : running]])
+        + '\n\n' + (errors.dynos ? `Dyno data unavailable: ${errors.dynos}` : members.map(d => `${d.name.padEnd(22)} ${d.state.padEnd(10)} age ${age(d.created_at)}`).join('\n') || 'No dynos currently running.')
+      rows.push(row(`${f.type}  ·  desired ${f.quantity}  ·  running ${running}`, detail,
+        {icon: 'resources', tone: errors.dynos ? 'muted' : crashed ? 'error' : running < f.quantity ? 'warning' : f.quantity ? 'success' : 'muted', emphasis: status,
+          columns: [f.type, f.quantity, errors.dynos ? '—' : running, status]}))
     }
     if (!errors.releases) rows.push(row(`Deployments    ${releases.filter(r => r.status === 'succeeded').length} succeeded / ${releases.length} recent releases`,
-      `Latest ${releases.length} releases (up to 20).\n${releases.filter(r => r.status === 'failed').length} failed releases.\nLatest release: ${releases[0] ? `v${releases[0].version}, ${age(releases[0].created_at)} ago` : 'none'}.`, {icon: 'releases', tone: releases.some(r => r.status === 'failed') ? 'warning' : 'info'}))
-    rows.push(row('Telemetry availability', 'CPU, memory, throughput, and latency charts are not exposed by the public Heroku Platform API.\n\nThis view shows live operational snapshots, not APM time-series metrics.\nPress o to open the app’s metrics page in the web dashboard.', {icon: 'overview', tone: 'muted'}))
-    rows.push(row(`Snapshot: ${new Date(data.fetchedAt).toLocaleTimeString()}`, 'Press R to refresh. Automatic refresh follows --refresh (default: 30 seconds).', {icon: 'clock', tone: 'muted'}))
+      `Latest ${releases.length} releases (up to 20).\n${releases.filter(r => r.status === 'failed').length} failed releases.\nLatest release: ${releases[0] ? `v${releases[0].version}, ${age(releases[0].created_at)} ago` : 'none'}.`, {icon: 'releases', tone: releases.some(r => r.status === 'failed') ? 'warning' : 'info',
+        columns: ['Releases OK', releases.length, releases.filter(r => r.status === 'succeeded').length, !releases.length ? 'No releases' : releases.some(r => r.status === 'failed') ? `${releases.filter(r => r.status === 'failed').length} failed` : 'Succeeded']}))
+    rows.push(row('Telemetry availability', 'CPU, memory, throughput, and latency charts are not exposed by the public Heroku Platform API.\n\nThis view shows live operational snapshots, not APM time-series metrics.\nPress o to open the app’s metrics page in the web dashboard.', {icon: 'overview', tone: 'muted', columns: ['Telemetry', '—', '—', 'Web only']}))
+    rows.push(row(`Snapshot: ${new Date(data.fetchedAt).toLocaleTimeString()}`, `Snapshot: ${data.fetchedAt}\n\nPress R to refresh. Automatic refresh follows --refresh (default: 30 seconds).`, {icon: 'clock', tone: 'muted',
+      columns: ['Snapshot', '—', new Date(data.fetchedAt).toLocaleTimeString(), 'Fetched']}))
   }
-  return rows.length ? rows : [row('No items', `No ${tab.toLowerCase()} to display.`, {icon: 'search', tone: 'muted'})]
+  const result = rows.length ? rows : [row('No items', `No ${tab.toLowerCase()} to display.`, {icon: 'search', tone: 'muted', columns: noticeColumns('No items', 'Empty')})]
+  for (const item of result) if (item.columns) item.columnLayout = tab
+  return result
 }