heroku-dash 0.1.0 → 0.2.0

package/README.md

@@ -77,8 +77,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 +128,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 +199,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.2.0`**. For subsequent releases, increment the version before publishing, for example:
 
 ```sh
 npm version patch --no-git-tag-version
@@ -198,16 +217,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 +245,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.2.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroku-dash",
-  "version": "0.1.0",
+  "version": "0.2.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/dashboard.js

@@ -11,8 +11,8 @@ 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 +26,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
@@ -107,7 +110,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))
@@ -243,6 +246,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 +318,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 +332,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 +358,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) {
@@ -386,6 +437,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 +478,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

@@ -64,7 +64,7 @@ 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'}
 }
 

package/src/ui/views.js

@@ -1,5 +1,6 @@
 import {clean, single} from './text.js'
 import {stateStyle} from './theme.js'
+import {addonDetails, dynoDetails} from './resource-details.js'
 
 export {clean, single} from './text.js'
 export function age(date, now = Date.now()) {
@@ -30,7 +31,7 @@ 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 error = section => {
@@ -53,22 +54,25 @@ 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}))
     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}))
+    ]) + dynoDetails(resources, 'instances', d.name), {...stateStyle(d.state), emphasis: d.state}))
   }
   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 state = resources?.data?.addons?.byId?.[addon.id]?.state ?? addon.state
+      rows.push(row(`${addon.name}  ·  ${addon.plan?.name ?? 'shared attachment'}  ·  ${state ?? '—'}`, lines([
+        ['Name', addon.name], ['Service', addon.addon_service?.name], ['Plan', addon.plan?.name],
+        ['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}))
+    }
   }
   if (tab === 'Config') {
     if (configError) rows.push(row('Config vars unavailable', configError, {icon: 'error', tone: 'error', emphasis: 'unavailable'}))