heroku-dash 0.1.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.
@@ -77,8 +79,8 @@ While data is loading, an OpenCode-inspired purple scanner (`■` / `⬝`) sweep
 | View | What you can do |
 | --- | --- |
 | **1 Overview** | Inspect app identity, team, region, stack, URLs, formation, and latest release |
-| **2 Resources** | Inspect process commands, desired quantity, dyno size, individual dyno states and ages; scale quantity and size |
-| **3 Add-ons** | Inspect services, plans, provisioning state, billing app, and local/shared attachments |
+| **2 Resources** | Inspect process commands, desired quantity, dyno size, individual dyno states and ages; scale quantity and size; optionally view costs and CPU/RAM allocations |
+| **3 Add-ons** | Inspect services, plans, provisioning state, billing app, and local/shared attachments; optionally view billed costs and capacity limits |
 | **4 Config** | View config keys; reveal or copy a selected value; create, replace, or delete variables |
 | **5 Settings** | Inspect domains, ACM state, buildpacks, region, stack, and space; toggle maintenance mode |
 | **6 Releases** | Inspect the latest 20 releases, including status, author, description, and timestamp |
@@ -128,6 +130,25 @@ Press **`y`** to copy the selected variable's value without revealing it. Reveal
 
 Clipboard access uses the system clipboard on the machine running `dash` (macOS, Windows, or a Linux desktop). On Wayland, install `wl-clipboard`; X11 uses `xsel`, with a bundled fallback. A desktop clipboard must be accessible to the terminal; headless/SSH sessions without one show a copy error instead.
 
+## Optional costs and limits with heroku-resources
+
+Install [heroku-resources](https://github.com/rmm5t/heroku-resources) alongside dash, then restart the dashboard:
+
+```sh
+heroku plugins:install heroku-resources
+heroku dash
+```
+
+Dash detects the installed plugin automatically, including a locally linked checkout. It reuses the pricing, dyno specification, add-on limit, and pending-plan-change helpers from **heroku-resources 0.5.1**. The integration is optional: if the plugin is absent or its helpers are incompatible, the details pane explains why enrichment is unavailable.
+
+- **Resources details:** RAM per dyno, total allocated RAM for a process, CPU allocation, estimated monthly process cost, and the per-dyno size rate. Scaled-to-zero processes are included. One-off dynos show a full-month size rate, not a claim about their actual charge.
+- **Add-ons details:** billed price and billing app, active/billed plans, provider status, connection limit, RAM allocation, and disk capacity where supported. Postgres and Key-Value Store limits come from the companion plugin's service lookups; other services may have a price but no available limits.
+- **Billing semantics:** prices are USD estimates, not invoices. Eco uses the shared account-level $5/month plan. Contract and metered prices are identified explicitly. Shared attachments identify their billing app. During plan changes, limits describe the active allocation while price reflects the billed plan.
+
+Enrichment loads when you open **Resources** or **Add-ons**, using the current Heroku account and GET requests only, including in `--read-only` mode. It works for apps outside pipelines too. Direct helper reuse avoids fetching an entire pipeline stage via `heroku resources --json`.
+
+Switching between views reuses the current app's fetched details. App refreshes refresh enrichment for the active resource view; dyno-size metadata is cached for five minutes. Press **`R`** to refresh immediately, including the size cache. Individual unavailable add-ons or limits don't block the rest of the dashboard. The offline demo does not perform these lookups.
+
 ## Metrics and current scope
 
 The Metrics view uses real snapshots from the public Heroku Platform API. It counts `up` and `idle` formation dynos as healthy, excludes one-off processes from desired-formation health, and shows recent release outcomes. Dyno age is time since creation, not a historical uptime guarantee. During deploys, overlapping dynos can exceed the desired count.
@@ -180,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 initial release is **`heroku-dash@0.1.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
@@ -198,16 +219,27 @@ npm run test:live -- ~/work/hermod ~/work/heimdall
 
 The live-check transport **rejects every method except GET**. It verifies repository-to-pipeline resolution and renders all seven app views, printing counts rather than config values. It reads every app in the detected pipelines.
 
+To verify cost/limit enrichment with the installed `heroku-resources` plugin against specific apps:
+
+```sh
+npm run test:resources -- hermod-staging heimdall-staging
+```
+
+This check also enforces GET-only access, including calls to Heroku's Postgres and Key-Value Store service APIs. It prints resource counts, without fetching config vars.
+
 After linking the plugin, macOS/Linux users with Python 3 can exercise the actual CLI in a pseudo-terminal:
 
 ```sh
 python3 scripts/terminal-check.py
 python3 scripts/terminal-check.py --repo ~/work/hermod
 python3 scripts/terminal-check.py --repo ~/work/heimdall
+python3 scripts/terminal-check.py --repo ~/work/heimdall --resources
 ```
 
 Without `--repo`, this uses the offline demo. Live terminal checks always pass `--read-only --refresh 0`; mutation behavior is tested only with mocked APIs.
 
+`--resources` also checks Resources/Add-ons cost details in the actual terminal UI; use a pipeline whose first app has dynos and add-ons, with `heroku-resources` installed.
+
 ### Layout
 
 ```text
@@ -215,8 +247,10 @@ src/commands/dash.js   Command flags, authentication, startup
 src/project.js         Git context and pipeline resolution
 src/hierarchy.js       Team and pipeline parents for resource breadcrumbs
 src/api.js             Platform API reads, pagination, guarded writes
+src/resources.js       Optional adapter to the installed heroku-resources plugin
 src/ui/dashboard.js    Terminal navigation, prompts, refresh, lifecycle
 src/ui/views.js        View models, config masking, operational metrics
+src/ui/resource-details.js  Cost and capacity details and billing annotations
 src/ui/details.js      Highlighted values and scroll-aware click targets
 src/ui/theme.js        Nerd Font icons, semantic colors, styled labels
 src/ui/text.js         Terminal-safe text sanitization

package/oclif.manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroku-dash",
-  "version": "0.1.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",
@@ -19,6 +19,7 @@
     "test": "node --test",
     "check": "npm run lint && npm test && npm run build",
     "test:live": "node scripts/live-check.js",
+    "test:resources": "node scripts/resources-check.js",
     "prepack": "npm run build",
     "prepublishOnly": "npm run lint && npm test"
   },

package/src/commands/dash.js

@@ -2,6 +2,7 @@ import {Command} from '@heroku-cli/command'
 import {Flags} from '@oclif/core'
 import {HerokuAPI} from '../api.js'
 import {inspectProject, resolveContext} from '../project.js'
+import {loadResourcesIntegration} from '../resources.js'
 
 export default class Dash extends Command {
   static promptFlagActive = false
@@ -42,6 +43,7 @@ export default class Dash extends Command {
       context.team = catalog.teams.find(t => t.id === flags.team || t.name === flags.team)
       if (!context.team) this.error(`Team not found: ${flags.team}`)
     }
-    await runDashboard({api, catalog, context, refresh: flags.refresh})
+    const resources = await loadResourcesIntegration(this.config, api)
+    await runDashboard({api, catalog, context, resources, refresh: flags.refresh})
   }
 }

package/src/demo.js

@@ -27,5 +27,5 @@ export function createDemo() {
   api.pipelineApps = async () => structuredClone(apps)
   api.appData = async id => data(apps.find(a => a.id === id || a.name === id))
   api.config = async () => ({NODE_ENV: 'production', EXAMPLE_SECRET: 'demo-only-value', WEB_CONCURRENCY: '2'})
-  return {api, catalog, context: {pipeline, reason: 'Offline demo'}}
+  return {api, catalog, resources: {available: false, message: 'Cost and limit lookup is disabled in the offline demo.'}, context: {pipeline, reason: 'Offline demo'}}
 }

package/src/resources.js

@@ -0,0 +1,92 @@
+import {join} from 'node:path'
+import {pathToFileURL} from 'node:url'
+import {errorMessage} from './api.js'
+
+const SDK_HEADERS = {Accept: 'application/vnd.heroku+json; version=3.sdk', 'Accept-Expansion': 'addon_service,plan'}
+const SIZE_CACHE_MS = 5 * 60_000
+
+export async function loadResourcesIntegration(config, api, importModule = url => import(url)) {
+  const plugin = config.plugins?.get('heroku-resources')
+  if (!plugin) return {available: false, message: 'Install heroku-resources and restart dash to show costs and limits.'}
+  try {
+    const [specs, limits, report] = await Promise.all(['specs', 'addon-limits', 'report'].map(name =>
+      importModule(pathToFileURL(join(plugin.root, 'src', `${name}.js`)).href),
+    ))
+    for (const name of ['memoryForSize', 'cpuForSize', 'monthlyCostForSize']) {
+      if (typeof specs[name] !== 'function') throw new Error('Incompatible dyno helpers')
+    }
+    if (typeof limits.fetchAddonDetails !== 'function' || typeof report.buildReport !== 'function') throw new Error('Incompatible add-on helpers')
+    return new ResourcesIntegration(api, {specs, ...limits, ...report}, plugin.version)
+  } catch {
+    return {available: false, message: `Cost/limit integration is unavailable with this installation of heroku-resources (${plugin.version ?? 'unknown version'}). Check or update the plugin, then restart dash.`}
+  }
+}
+
+export class ResourcesIntegration {
+  constructor(api, helpers, version) {
+    Object.assign(this, {api, helpers, version, available: true})
+    // The companion helpers receive only GET access, using dash's authenticated
+    // client. They cannot prompt for login or perform writes through this adapter.
+    this.reader = {get: async (path, options = {}) => ({body: await api.get(path, {...options, method: 'GET'})})}
+  }
+
+  async sizes(force) {
+    if (!this.sizeRequest || (this.sizeLoadedAt && (force || Date.now() - this.sizeLoadedAt > SIZE_CACHE_MS))) {
+      this.sizeLoadedAt = 0
+      const request = this.api.list('/dyno-sizes').then(sizes => {
+        this.sizeLoadedAt = Date.now()
+        return sizes
+      }).catch(error => {
+        this.sizeRequest = null
+        throw error
+      })
+      this.sizeRequest = request
+    }
+    return this.sizeRequest
+  }
+
+  async dynos(data, {force = false} = {}) {
+    const sizes = await this.sizes(force)
+    const {memoryForSize, cpuForSize, monthlyCostForSize} = this.helpers.specs
+    const shielded = data.app.space?.shield === true
+    const allocation = (size, quantity) => {
+      const ramPerDynoMb = memoryForSize(size, shielded, sizes)
+      return {
+        ramPerDynoMb,
+        allocatedRamMb: ramPerDynoMb === null ? null : ramPerDynoMb * quantity,
+        cpuPerDyno: cpuForSize(size, 1, shielded, sizes),
+        cpu: cpuForSize(size, quantity, shielded, sizes),
+        ...monthlyCostForSize(size, quantity, shielded, sizes),
+        unitMonthlyCost: monthlyCostForSize(size, 1, shielded, sizes).monthlyCost,
+      }
+    }
+    return {
+      formations: Object.fromEntries(data.formation.map(f => [f.type, allocation(f.size, f.quantity)])),
+      instances: Object.fromEntries(data.dynos.map(d => [d.name, allocation(d.size, 1)])),
+    }
+  }
+
+  async addons(data) {
+    const owned = await this.api.list(`/apps/${encodeURIComponent(data.app.id)}/addons`, {headers: SDK_HEADERS})
+    const all = new Map(owned.map(addon => [addon.id, addon]))
+    for (const attachment of data.attachments) {
+      if (!all.has(attachment.addon.id)) all.set(attachment.addon.id, null)
+    }
+    const entries = await Promise.all([...all].map(async ([id, resource]) => {
+      try {
+        const addon = resource ?? await this.api.get(`/addons/${encodeURIComponent(id)}`, {headers: SDK_HEADERS})
+        const details = await this.helpers.fetchAddonDetails(this.reader, addon)
+        const report = this.helpers.buildReport(null, null, [{app: data.app, dynos: [], formation: [], addons: [{...addon, ...details}]}], [])
+        if (!report.addons?.[0]) throw new Error('Unexpected heroku-resources add-on report')
+        return [id, {
+          ...report.addons[0],
+          billingApp: addon.app?.name ?? (resource ? data.app.name : null),
+          shared: addon.app?.id ? addon.app.id !== data.app.id : !resource,
+        }]
+      } catch (error) {
+        return [id, {error: errorMessage(error)}]
+      }
+    }))
+    return {byId: Object.fromEntries(entries)}
+  }
+}

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,14 +5,15 @@ 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%'
 const frame = () => ({border: {type: 'line'}, style: {fg: palette.fg, bg: palette.bg, border: {fg: palette.border}, focus: {border: {fg: palette.accent}}}})
 
 export class Dashboard {
-  constructor({api, catalog, context, refresh = 30, demo = false, screen, writeClipboard = clipboard.write}) {
-    Object.assign(this, {api, catalog, context, refresh, demo, writeClipboard})
+  constructor({api, catalog, context, resources = null, refresh = 30, demo = false, screen, writeClipboard = clipboard.write}) {
+    Object.assign(this, {api, catalog, context, resources, refresh, demo, writeClipboard})
     this.screen = screen ?? blessed.screen({smartCSR: true, fullUnicode: true, title: 'heroku dash', dockBorders: true, autoPadding: true})
     this.tab = 0
     this.mode = 'pipelines'
@@ -26,6 +27,9 @@ export class Dashboard {
     this.generation = 0
     this.navGeneration = 0
     this.config = null
+    this.resourceData = {}
+    this.resourceErrors = {}
+    this.resourceRequests = new Map()
     this.revealed = new Set()
     this.copying = false
     this.busy = false
@@ -49,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}})
@@ -107,7 +118,7 @@ export class Dashboard {
     key(['a'], () => this.setMode('apps'))
     key(['/'], () => void this.filterNav())
     key(['escape'], () => void this.back())
-    key(['R'], () => void this.reload())
+    key(['R', 'S-r'], () => void this.reload())
     key(['[', 'left', 'h'], () => this.changeTab((this.tab + TABS.length - 1) % TABS.length))
     key([']', 'right', 'l'], () => this.changeTab((this.tab + 1) % TABS.length))
     for (let i = 0; i < TABS.length; i++) key([String(i + 1)], () => this.changeTab(i))
@@ -189,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]]
@@ -243,6 +255,7 @@ export class Dashboard {
 
   clearApp() {
     this.generation++
+    this.resetResourceDetails()
     for (const key of ['app', 'pipeline', 'config']) this.loading.delete(key)
     this.syncLoadingAnimation()
     this.app = null
@@ -314,7 +327,7 @@ export class Dashboard {
     await this.loadApp()
   }
 
-  async loadApp(automatic = false) {
+  async loadApp(automatic = false, {forceResources = false} = {}) {
     if (!this.app || this.busy || this.closed) return false
     const generation = this.generation
     const app = this.app
@@ -328,11 +341,13 @@ export class Dashboard {
       this.pipeline = hierarchy.pipeline
       this.breadcrumbTeam = hierarchy.team
       Object.assign(data.errors, hierarchy.errors)
+      this.resetResourceDetails()
       this.data = data
       this.app = data.app
       this.message = `${automatic ? 'Auto-refreshed' : 'Updated'} ${new Date(data.fetchedAt).toLocaleTimeString()}${Object.keys(data.errors).length ? ' · Some sections unavailable; see Overview.' : ''}`
       this.messageTone = Object.keys(data.errors).length ? 'warning' : 'success'
       this.drawApp()
+      void this.loadResourceDetails({force: forceResources})
       return true
     } catch (error) {
       if (generation === this.generation) {
@@ -352,7 +367,52 @@ export class Dashboard {
     const {app, formation, errors} = this.data
     this.summary.setContent(`${badge('apps', app.name, 'cyan')}   ${app.maintenance ? badge('warning', 'MAINTENANCE', 'warning') : badge('success', 'ACTIVE', 'success')}\n${badge('teams', app.team?.name ?? 'Personal / shared', 'muted')}  ·  ${badge('globe', app.region?.name, 'info')}  ·  ${badge('stack', app.stack?.name, 'muted')}\n${badge('resources', errors.formation ? 'Dynos unavailable' : `${formation.reduce((sum, f) => sum + f.quantity, 0)} configured dynos`, errors.formation ? 'warning' : 'fg')}  ·  ${badge('addons', `${this.data.addons.length} add-ons`, 'fg')}  ·  ${badge('refresh', this.refresh ? `refresh ${this.refresh}s` : 'manual refresh', 'muted')}`)
     this.main.setLabel(` ${icons[tabIcons[this.tab]]}  ${TABS[this.tab]} `)
-    this.setRows(appRows(TABS[this.tab], this.data, {config: this.config, configError: this.configError, revealed: this.revealed}), true)
+    this.setRows(appRows(TABS[this.tab], this.data, {
+      config: this.config, configError: this.configError, revealed: this.revealed,
+      resources: {provider: this.resources, data: this.resourceData, errors: this.resourceErrors},
+    }), true)
+  }
+
+  resetResourceDetails() {
+    this.resourceData = {}
+    this.resourceErrors = {}
+    this.resourceRequests.clear()
+    for (const kind of ['dynos', 'addons']) this.loading.delete(`resources-${kind}`)
+    this.syncLoadingAnimation()
+  }
+
+  async loadResourceDetails({force = false} = {}) {
+    const kind = {Resources: 'dynos', 'Add-ons': 'addons'}[TABS[this.tab]]
+    if (!kind || !this.resources?.available || !this.data || this.closed) return
+    if (!force && (this.resourceData[kind] || this.resourceErrors[kind] || this.resourceRequests.has(kind))) return
+    const data = this.data
+    const generation = this.generation
+    const request = {}
+    this.resourceRequests.set(kind, request)
+    const current = () => !this.closed && generation === this.generation && this.data === data && this.resourceRequests.get(kind) === request
+    const finishLoading = this.beginLoading(`resources-${kind}`, `Loading ${kind === 'dynos' ? 'dyno costs and allocations' : 'add-on costs and limits'}…`)
+    try {
+      const result = await this.resources[kind](data, {force})
+      if (!current()) return
+      this.resourceData[kind] = result
+      delete this.resourceErrors[kind]
+    } catch (error) {
+      if (!current()) return
+      this.resourceErrors[kind] = errorMessage(error)
+    } finally {
+      if (current()) {
+        this.resourceRequests.delete(kind)
+        if ({Resources: 'dynos', 'Add-ons': 'addons'}[TABS[this.tab]] === kind) {
+          // getScroll() includes Blessed's cursor offset; childBase is the
+          // actual first visible line that should survive this redraw.
+          const scroll = this.detail.childBase
+          this.drawApp()
+          this.detail.setScroll(scroll)
+          this.render()
+        }
+      }
+      finishLoading()
+    }
   }
 
   setRows(rows, preserve = false) {
@@ -363,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
@@ -371,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 `)
@@ -386,6 +464,7 @@ export class Dashboard {
     this.main.select(0)
     this.drawApp()
     if (TABS[index] === 'Config' && !this.config) void this.loadConfig()
+    void this.loadResourceDetails()
   }
 
   async loadConfig() {
@@ -426,7 +505,7 @@ export class Dashboard {
     if (this.busy) return
     if (this.app) {
       this.revealed.clear()
-      await this.loadApp()
+      await this.loadApp(false, {forceResources: true})
       if (TABS[this.tab] === 'Config') await this.loadConfig()
     } else if (this.pipeline) await this.openPipeline(this.pipeline)
     else {

package/src/ui/resource-details.js

@@ -0,0 +1,49 @@
+const money = value => Number.isFinite(value) ? new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(value) : 'Unavailable'
+const ram = value => Number.isFinite(value) ? `${value >= 1024 ? value / 1024 : value} ${value >= 1024 ? 'GB' : 'MB'}` : 'Unavailable'
+const field = (name, value) => `${name.padEnd(17)} ${value ?? 'Unavailable'}`
+
+function unavailable(resources, kind) {
+  if (!resources?.provider?.available) return resources?.provider?.message ?? 'Install heroku-resources and restart dash to show costs and limits.'
+  if (resources.errors?.[kind]) return `Costs / limits unavailable: ${resources.errors[kind]}`
+  if (!resources.data?.[kind]) return 'Loading costs and limits from heroku-resources…'
+  return null
+}
+
+export function dynoDetails(resources, kind, name) {
+  const note = unavailable(resources, 'dynos')
+  if (note) return `\n\nCOST & ALLOCATION\n${note}`
+  const item = resources.data.dynos[kind]?.[name]
+  if (!item) return '\n\nCOST & ALLOCATION\nNo matching dyno specification available.'
+  const process = kind === 'formations'
+  const price = item.ecoPlan ? 'Shared $5/month account plan (not per dyno)'
+    : Number.isFinite(item.monthlyCost) ? `${money(item.monthlyCost)}/month${process ? ' for this process' : ' per dyno (full-month rate)'}` : 'Unavailable'
+  return `\n\nCOST & ALLOCATION\n${[
+    field('RAM / dyno', ram(item.ramPerDynoMb)),
+    ...(process ? [field('Allocated RAM', ram(item.allocatedRamMb))] : []),
+    field('CPU / dyno', item.cpuPerDyno),
+    ...(process ? [field('CPU allocation', item.cpu)] : []),
+    field('Estimated cost', price),
+    ...(process && !item.ecoPlan && Number.isFinite(item.unitMonthlyCost) ? [field('Size rate', `${money(item.unitMonthlyCost)}/dyno/month`)] : []),
+    field('Source', `heroku-resources ${resources.provider.version ?? ''}`),
+  ].join('\n')}\n\nAllocations are size limits, not live usage.\nCosts are USD full-month estimates; actual billing is prorated.`
+}
+
+export function addonDetails(resources, id) {
+  const note = unavailable(resources, 'addons')
+  if (note) return `\n\nCOST & LIMITS\n${note}`
+  const item = resources.data.addons.byId[id]
+  if (!item || item.error) return `\n\nCOST & LIMITS\n${item?.error ?? 'No matching add-on information available.'}`
+  const cost = item.contract ? 'Contract pricing (amount unknown)' : item.metered ? 'Metered / usage-based pricing'
+    : Number.isFinite(item.costCents) && item.costUnit ? `${money(item.costCents / 100)}/${item.costUnit}` : 'Unavailable'
+  return `\n\nCOST & LIMITS\n${[
+    field('Billed cost', cost),
+    field('Billing app', item.billingApp),
+    field('Billed plan', item.plan),
+    field('Active plan', item.activePlan),
+    field('Provider status', item.providerStatus),
+    field('Connection limit', item.maxConnections),
+    field('RAM limit', item.ram),
+    field('Disk capacity', item.diskSize),
+    field('Source', `heroku-resources ${resources.provider.version ?? ''}`),
+  ].join('\n')}${item.shared ? '\n\nShared attachment: the add-on is billed to its owning app.' : ''}${item.planChangePending ? '\n\nPlan change pending: limits describe the active plan; cost reflects the billed plan.' : ''}\n\nLimits are capacity, not current usage. Prices are USD; unavailable limits are not zero.`
+}

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',
@@ -64,12 +65,12 @@ export function scannerFrame(frame) {
 export function stateStyle(state) {
   if (['up', 'idle', 'succeeded', 'provisioned', 'active'].includes(state)) return {icon: 'success', tone: 'success'}
   if (['crashed', 'failed', 'error'].includes(state)) return {icon: 'error', tone: 'error'}
-  if (['starting', 'pending', 'provisioning', 'deprovisioning', 'maintenance'].includes(state)) return {icon: 'clock', tone: 'warning'}
+  if (['starting', 'pending', 'provisioning', 'deprovisioning', 'maintenance', 'upgrade pending', 'plan change pending'].includes(state)) return {icon: 'clock', tone: 'warning'}
   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,5 +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()) {
@@ -30,22 +32,33 @@ export function operationalMetrics(data) {
   }
 }
 
-export function appRows(tab, data, {config, configError, revealed = new Set()} = {}) {
+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') {
@@ -53,22 +66,31 @@ export function appRows(tab, data, {config, configError, revealed = new Set()} =
     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.'],
-    ]), {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],
-    ]), {...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()) rows.push(row(`${addon.name}  ·  ${addon.plan?.name ?? 'shared attachment'}  ·  ${addon.state ?? '—'}`, lines([
-      ['Name', addon.name], ['Service', addon.addon_service?.name], ['Plan', addon.plan?.name],
-      ['State', addon.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],
-    ]), {...stateStyle(addon.state), icon: /postgres|redis|mysql|mongo|key-value/i.test(addon.addon_service?.name ?? addon.plan?.name ?? '') ? 'database' : 'addons', emphasis: addon.state}))
+    for (const addon of all.values()) {
+      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 ?? 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,
+        columns: [addon.name, service, plan, state]}))
+    }
   }
   if (tab === 'Config') {
     if (configError) rows.push(row('Config vars unavailable', configError, {icon: 'error', tone: 'error', emphasis: 'unavailable'}))
@@ -85,17 +107,20 @@ export function appRows(tab, data, {config, configError, revealed = new Set()} =
     }
   }
   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')
@@ -111,17 +136,27 @@ export function appRows(tab, data, {config, configError, revealed = new Set()} =
     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
 }