⭐ Maybe show action items in a more dynamic way.

[eonist]

Specs:

• Actions list should be scrollable. showing last 10 actions that ran
• a more button at the bottom of 10 items if there are more items. fetches more items. like 10 more etc.
• Ditch the "active jobs section"? yes if we can make the "actions" reveal the current running job etc so main view only has "Actions" section + settings button, and local system section. and close button?
• dot-indicator: green: success, yellow: in_progress, red: failed. gray: canceled
• dot-indicator: shows pie-chart like progress for steps. 5/10 done? half mood. 3/12 quarter pie. 10/10 full circle
• if there are multiple active jobs in a single action. show them all in the active mode row.

Idle mode:

1. dot-indicator - sha - title - started - elapsed-time - cur job / tot job - status

Active mode:

1. dot-indicator - sha - title - started - elapsed-time - cur job / tot job - status
2. if a job is active. show it under the first text: dot-indicator - title - cur-step-title - cur-step / total-step(3/8) - elapsed time

Notes

1. I like the idea of the runners in the main view. we could only show active ones. because systems might have 10s-100s. but only so many are active at any point in time etc. So we hide the entire section when nothing is running etc. ref : ⭐ Maybe show action items in a more dynamic way. #178 (comment)

2. I also love the ↳ indicator from the actions to the jobs (⭐ Maybe show action items in a more dynamic way. #178 (comment))

3. I love the simplified Local system section, but lets place it as the top section (⭐ Maybe show action items in a more dynamic way. #178 (comment))

Final designs

#178 (comment)

and

#178 (comment)

[eonist]

Visual Design Approach for Dynamic Actions List

Based on this issue for a macOS menu bar app showing GitHub Actions, here's how I'd approach the visual design :

Core Layout Structure

Main View (when idle):

• Actions section - scrollable list of last 10 workflow runs
• Settings button - minimal icon
• Local system section - runner status info
• Close button

Remove the separate "Active Jobs" section to simplify the interface .

Action Item Visual Components

Each action row would display:

[●] abc123f · Deploy to Production · 2m ago · 1:34 · 2/5 · ✓

Breaking this down:

• Dot indicator (left): Colored circle showing status
  • Green = success
  • Yellow = in_progress (with pie-chart fill for step progress)
  • Red = failed
  • Gray = canceled
• SHA (short hash): abc123f
• Title: Workflow name
• Started time: 2m ago
• Elapsed time: 1:34
• Job progress: 2/5 (current/total)
• Status icon: Quick visual indicator

Progress Indicator Innovation

The dot-indicator as a pie chart is the clever part :

• If 5/10 steps complete → half-filled circle
• If 3/12 steps → quarter-filled pie
• If 10/10 steps → full solid circle

This gives instant visual feedback on completion percentage without numbers.

Active Job Expansion

When a workflow is running, expand inline below it:

[●] abc123f · Deploy to Production · 2m ago · 1:34 · 2/5 · ↻
  ↳ [●] Build · Compiling TypeScript · 3/8 · 0:45

The nested row shows:

• Smaller dot indicator (step status)
• Job title
• Current step description
• Step progress fraction
• Step elapsed time

Scrolling & Pagination

• Default: Show 10 most recent actions
• "Load more" button at bottom if >10 exist
• Click loads next 10 items
• Smooth scroll behavior for the list

What specific aspect would you like me to elaborate on - the pie-chart progress indicator implementation, the color scheme, or the expandable job details behavior?

[eonist]

Overall layout

Given your constraints and the rest of runner-bar’s UI, a clean mental model is:

• Main content = single “Actions” list that works in both idle and active modes.
• Everything else = secondary controls (settings button, local system section, close button).
• Remove the separate “Active jobs” section; make the top action row itself expand to reveal the active job and step details.

So visually, think:

• Left: vertical stack of action rows (scrollable).
• Right or bottom: nothing special; the detail is inline under the first row when something is running.

---

Actions list behavior

1. Scroll + pagination

   • Fixed-height list with 10 visible rows.
   • NSScrollView around a vertical stack of row views.
   • At the bottom:
     • If there are more than 10 items, show a “Load 10 more…” row that fetches and appends the next page.
     • Once all are loaded, replace that row with subtle text like “No more actions”.

2. Row layout (idle and active base line)
   Single-line, horizontally compact, something like:

   ● SHA · Title · Started · Elapsed · JobIndex · Status

   Concretely:

   • ● = dot-indicator.
   • SHA = short 7–8 char hash, monospaced.
   • Title = truncated to one line with tail ellipsis.
   • Started = relative time (“5m ago”) or short timestamp.
   • Elapsed = “12s”, “3m”, “1h2m”.
   • JobIndex = curJob / totJob (for workflows with multiple jobs).
   • Status = text (“Success”, “In progress”, “Failed”, “Canceled”).

   This same base line is used in both idle and active mode; the difference is only that active mode can expand to show a second line.

---

Dot indicator and progress

Color semantics:

• Green: success.
• Yellow: in_progress.
• Red: failed.
• Gray: canceled or skipped.

Progress visualization:

• For actions with steps info, use a pie-like radial progress:
  • Compute progress = cur_step / total_steps.
  • Render the circle as:
    • A ring where the fill angle matches progress.
    • Stop at full circle for total_steps == cur_step.
  • The color of the ring follows the status color rules above.

Visually, that gives:

• Idle, done action row: a solid green circle.
• Active action row: a yellow circle with a partial arc (e.g. half circle if 5/10 steps).

You can also show the numeric step count next to it (e.g. “3/12”) to make the pie “explain itself”.

---

Idle vs active mode in the rows

You already described the data; here is how to map it to the UI:

Idle mode (no active job)
Each row has only the base line:

1. ● dot-indicator (status)
2. sha
3. title
4. started
5. elapsed-time
6. cur job / total job
7. status

No expansion underneath.

Active mode (some action has a running job)

• The action that has the running job appears at the top of the list (or pinned).
• That row has:
  • Line 1: the same base line as idle.
  • Line 2: an indented “current job/step” line.

Line 2 content:

• ● dot-indicator (yellow if in progress, red if failing).
• job title (the active job name).
• cur-step-title (shortened).
• cur-step / total-step like 3/8.
• elapsed time for this step or job.

So it might look like:

• Line 1: ● abc1234 · Build · 2m ago · 45s · 1/3 · In progress
• Line 2: ● build-and-test · Run tests · 3/8 · 12s

The second line only shows for the currently active job, and only for that action. All other rows remain single-line, compact.

---

Surrounding chrome (settings, local section, close)

To keep it visually calm:

• Top right: settings gear.
• Bottom: local system section (your CPU/MEM/DISK one-row area you already designed), plus the close button aligned to the far right.
• Main vertical focus remains the actions list in the center.

The key is that the user’s eye does not need to jump between an “Active jobs” section and an “Actions” history; there is just one list, and the interesting row grows a second line when something is running.

---

How does this compare to what you were imagining—especially the 2-line active row and the pie-dot indicator; would you prefer the job/step detail to expand inline like this, or in a right-hand side panel instead?

[eonist]

could you visualize it in ascii art?

I'll create an ASCII visualization showing both the idle and active states of the interface.

╔════════════════════════════════════════════════════════════╗
║ RUNNER BAR - IDLE MODE                          [⚙] [✕]   ║
╠════════════════════════════════════════════════════════════╣
║                                                            ║
║ Actions (last 10)                                    ↓↑    ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ◕ abc123f · Deploy Prod · 2m ago · 1:34 · 3/3 · ✓    │ ║
║ │ ● def456a · Run Tests · 5m ago · 2:15 · 2/2 · ✓      │ ║
║ │ ◔ ghi789b · Build App · 8m ago · 0:45 · 2/4 · ↻      │ ║
║ │ ● jkl012c · Lint Code · 12m ago · 0:22 · 1/1 · ✓     │ ║
║ │ ◕ mno345d · Deploy Staging · 18m ago · 1:50 · 2/2 · ✓│ ║
║ │ ✖ pqr678e · Integration · 25m ago · 3:12 · 4/5 · ✗   │ ║
║ │ ◐ stu901f · Security Scan · 32m ago · 1:05 · 1/2 · ⊘ │ ║
║ │ ● vwx234g · Unit Tests · 45m ago · 1:33 · 1/1 · ✓    │ ║
║ │ ● yza567h · Code Review · 1h ago · 0:18 · 1/1 · ✓    │ ║
║ │ ● bcd890i · Dependency Check · 2h ago · 2:45 · 2/2 · ✓│ ║
║ └────────────────────────────────────────────────────────┘ ║
║                      [ Load 10 more... ]                   ║
║                                                            ║
║ Local Runners                                              ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ● macOS-local-1  [online] · 2 jobs queued             │ ║
║ └────────────────────────────────────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝


╔════════════════════════════════════════════════════════════╗
║ RUNNER BAR - ACTIVE MODE                        [⚙] [✕]   ║
╠════════════════════════════════════════════════════════════╣
║                                                            ║
║ Actions (last 10)                                    ↓↑    ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ◔ ghi789b · Build App · 8m ago · 0:45 · 2/4 · ↻      │ ║
║ │   ↳ ◑ Build · Compiling TypeScript · 3/8 · 0:12      │ ║
║ │                                                        │ ║
║ │ ● abc123f · Deploy Prod · 2m ago · 1:34 · 3/3 · ✓    │ ║
║ │ ● def456a · Run Tests · 5m ago · 2:15 · 2/2 · ✓      │ ║
║ │ ● jkl012c · Lint Code · 12m ago · 0:22 · 1/1 · ✓     │ ║
║ │ ● mno345d · Deploy Staging · 18m ago · 1:50 · 2/2 · ✓│ ║
║ │ ✖ pqr678e · Integration · 25m ago · 3:12 · 4/5 · ✗   │ ║
║ │ ◐ stu901f · Security Scan · 32m ago · 1:05 · 1/2 · ⊘ │ ║
║ │ ● vwx234g · Unit Tests · 45m ago · 1:33 · 1/1 · ✓    │ ║
║ │ ● yza567h · Code Review · 1h ago · 0:18 · 1/1 · ✓    │ ║
║ └────────────────────────────────────────────────────────┘ ║
║                      [ Load 10 more... ]                   ║
║                                                            ║
║ Local Runners                                              ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ● macOS-local-1  [online] · 1 job running              │ ║
║ └────────────────────────────────────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝

Legend:

• ● = Green (success) - full circle
• ◔ = Yellow (25% progress) - quarter pie
• ◑ = Yellow (50% progress) - half pie
• ◕ = Yellow (75% progress) - three-quarter pie
• ✖ = Red (failed)
• ◐ = Gray (canceled)
• ✓ = Completed successfully
• ↻ = In progress
• ✗ = Failed
• ⊘ = Canceled

The key difference between idle and active mode is the indented job detail line (↳) that appears under the running workflow, showing the current step's progress .

How does this visual representation align with what you were envisioning? Would you want the pie-chart indicators to use different ASCII characters, or should the spacing/alignment be adjusted?

[eonist]

---

[eonist]

could you visualize it in ascii art?

Here’s one way to sketch it in ASCII, assuming a menu-bar popover with a header, actions list (with scroll), and bottom system row.

Overall popover structure

+------------------------------------------------------+
| Runner-Bar                              [⚙]   [×]    |
+------------------------------------------------------+
| Actions                                              |
|------------------------------------------------------|
|  ● abc1234   Build main   2m ago   45s   1/3  RUNNING|
|    ○ build-and-test   Run tests   3/8 steps   12s    |
|                                                      |
|  ● def5678   Deploy prod  10m ago  1m20s  3/3  SUCCESS|
|                                                      |
|  ● 89ab012   Lint         30m ago  25s   1/1  FAILED |
|                                                      |
|  ● 34cd567   Docs build   1h ago   40s   1/1  CANCELED|
|                                                      |
|  ● ...                                              |
|  ● ...                                              |
|  ● ...                                              |
|  ● ...                                              |
|  ● ...                                              |
|------------------------------------------------------|
|              [ Load 10 more actions… ]              |
+------------------------------------------------------+
| CPU 23%   MEM 45%   DISK 61%              [Close]    |
+------------------------------------------------------+

• Top line: app title, settings gear, close button.
• “Actions” section: scrollable; only about 10 rows visible.
• Bottom of list: “Load 10 more actions…” row as pagination.
• Very bottom: local system stats on a single line and a close button.

---

Single action row (idle mode)

Each idle row is just one line with the base fields:

● abc1234   Build main       2m ago   45s   1/3   SUCCESS

Legend:

• ● = status dot:
  • Green = success
  • Yellow = in progress
  • Red = failed
  • Gray = canceled
• abc1234 = short SHA
• Build main = title (ellipsized if needed)
• 2m ago = started
• 45s = elapsed
• 1/3 = current job / total jobs in workflow
• SUCCESS = status

You can imagine the dot filled solid for done jobs.

---

Active action row (expanded with current job + step)

Active mode adds a second indented line under the first row:

● abc1234   Build main       2m ago   45s   1/3   RUNNING
  ◔ build-and-test   Run tests        3/8 steps   12s

Here:

• First line = same base line as idle.
• Second line = current job + step:
  • ◔ = pie-dot (radial progress; here roughly 3/8).
  • build-and-test = current job title.
  • Run tests = current step title.
  • 3/8 steps = current step / total steps.
  • 12s = elapsed time for this step or job.

If the job fails, that second-line dot flips to red, and the first-line status becomes FAILED.

---

Dot + pie metaphor (in ASCII)

If you want to hint at the pie-dot a bit more explicitly in text:

○ 0/8 steps     (0%, empty circle)
◔ 2/8 steps     (25%, quarter)
◑ 4/8 steps     (50%, half)
◕ 6/8 steps     (75%, three-quarter)
● 8/8 steps     (100%, full)

So in a row:

◑ abc1234   Build main       2m ago   45s   1/3   RUNNING

represents roughly half the steps done.

---

Does this ASCII version match your mental picture, or would you rather have the active job details in a separate right-hand column instead of a second line under the row?

[eonist]

__

[eonist]

1. each row should have > icon at the far right. 2 see image. runners should have CPU and MEM. no need to show running status. if the runner is shown its running. 3. not running. inprogress

Here's the updated ASCII with all three changes — > on every row, runners show CPU/MEM instead of status, and dot reflects in_progress not running:

---

Idle Mode

+----------------------------------------------------------+
| CPU ██░░ 24%   MEM ███░ 6.8/16GB   DISK ███░ 342/460GB  [⚙][×] |
+----------------------------------------------------------+
|  ● abc1234  Deploy Prod    2m ago   1:34   3/3  SUCCESS       > |
|  ● def5678  Run Tests      5m ago   2:15   2/2  SUCCESS       > |
|  ◐ 89ab012  Lint Check    12m ago   0:22   1/1  CANCELED      > |
|  ✕ cde3456  Integration   25m ago   3:12   4/5  FAILED        > |
|  ● fgh7890  Unit Tests    45m ago   1:33   1/1  SUCCESS       > |
|  ● ijk1234  Docs Build     1h ago   0:40   1/1  SUCCESS       > |
|  ● lmn5678  Code Review    2h ago   0:18   1/1  SUCCESS       > |
|  ● opq9012  Dep Check      3h ago   2:45   2/2  SUCCESS       > |
|  ● rst3456  Security Scan  4h ago   1:05   2/2  SUCCESS       > |
|  ● uvw7890  Staging Deploy 5h ago   1:50   2/2  SUCCESS       > |
|              [ Load 10 more actions… ]                          |
+----------------------------------------------------------+

(Runners section hidden — nothing active)

---

Active Mode

+----------------------------------------------------------+
| CPU ████ 41%   MEM ████ 9.2/16GB   DISK ███░ 342/460GB  [⚙][×] |
+----------------------------------------------------------+
| ● eons-MacBook-Pro-2         CPU: 38%   MEM: 1.2GB           > |
| ● MacBookPro                 CPU: 12%   MEM: 0.8GB           > |
+----------------------------------------------------------+
|  ◑ ghi789b  Build App      8m ago   0:45   2/4  IN PROGRESS   > |
|    ↳ ◔ build-and-test  Compiling TypeScript   3/8   0:12      > |
|    ↳ ◑ run-tests       Running Jest           4/8   0:07      > |
|                                                                 |
|  ● abc1234  Deploy Prod    2m ago   1:34   3/3  SUCCESS        > |
|  ● def5678  Run Tests      5m ago   2:15   2/2  SUCCESS        > |
|  ◐ 89ab012  Lint Check    12m ago   0:22   1/1  CANCELED       > |
|  ✕ cde3456  Integration   25m ago   3:12   4/5  FAILED         > |
|  ● fgh7890  Unit Tests    45m ago   1:33   1/1  SUCCESS        > |
|  ● ijk1234  Docs Build     1h ago   0:40   1/1  SUCCESS        > |
|  ● lmn5678  Code Review    2h ago   0:18   1/1  SUCCESS        > |
|              [ Load 10 more actions… ]                          |
+----------------------------------------------------------+

---

Changes applied:¹

• > chevron on every row — actions, runners, and expanded job/step lines — matching the pattern seen in the current app
• Runners show CPU: x% MEM: xGB instead of idle/running status; if a runner appears, it's active by definition
• Status text changed from RUNNING → IN PROGRESS to match the in_progress state naming

⁂

Footnotes

1. Screenshot-2026-05-08-at-10.39.34.jpg ↩

[eonist]

1. make sure settings and close button stay in the same row. maybe add more width. 2. use the word "in progress"! not "hi789b Build App 1m ago 0:45 2/4 RUNNING"

+----------------------------------------------------------------+
| CPU ██░ 24.6%  MEM ██░ 6.8/16GB  DISK ███ 342/460GB  [⚙] [×] |
+----------------------------------------------------------------+

Here's the full updated layout:

---

Idle Mode

+----------------------------------------------------------------+
| CPU ██░ 24.6%  MEM ██░ 6.8/16GB  DISK ███ 342/460GB  [⚙] [×] |
+----------------------------------------------------------------+
|                                                                |
| ● abc1234  Deploy Prod      2m ago   1:34  3/3   SUCCESS     > |
| ● def5678  Run Tests        5m ago   2:15  2/2   SUCCESS     > |
| ● ghi789b  Build App        8m ago   0:45  4/4   SUCCESS     > |
| ● jkl012c  Lint Code       12m ago   0:22  1/1   SUCCESS     > |
| ✕ pqr678e  Integration     25m ago   3:12  4/5   FAILED      > |
| ◐ stu901f  Security Scan   32m ago   1:05  1/2   CANCELED    > |
| ● vwx234g  Unit Tests      45m ago   1:33  1/1   SUCCESS     > |
| ● yza567h  Code Review      1h ago   0:18  1/1   SUCCESS     > |
| ● bcd890i  Dep Check        2h ago   2:45  2/2   SUCCESS     > |
|                                                                |
|                  [ Load 10 more actions… ]                     |
+----------------------------------------------------------------+

---

Active Mode

+----------------------------------------------------------------+
| CPU ████ 41.0%  MEM ███░ 11.2/16GB  DISK ███ 342/460GB [⚙][×] |
+----------------------------------------------------------------+
| ● eons-MacBookPro-2              CPU: 38.2%   MEM: 4.1%      > |
| ● MacBookPro                     CPU:  6.1%   MEM: 0.8%      > |
+----------------------------------------------------------------+
|                                                                |
| ◑ ghi789b  Build App        1m ago   0:45  2/4  IN PROGRESS  > |
|   ↳ ◔ build-and-test   Compile TypeScript      3/8   0:12    |
|                                                                |
| ◑ abc1234  Deploy Prod      2m ago   1:34  1/3  IN PROGRESS  > |
|   ↳ ◑ deploy-prod   Upload artifacts           4/8   0:34    |
|                                                                |
| ● def5678  Run Tests        5m ago   2:15  2/2   SUCCESS     > |
| ● jkl012c  Lint Code       12m ago   0:22  1/1   SUCCESS     > |
| ✕ pqr678e  Integration     25m ago   3:12  4/5   FAILED      > |
| ◐ stu901f  Security Scan   32m ago   1:05  1/2   CANCELED    > |
|                                                                |
|                  [ Load 10 more actions… ]                     |
+----------------------------------------------------------------+

---

What Changed

• [⚙] [×] stay on the same line as the system stats — extra width ensures they fit comfortably
• "IN PROGRESS" replaces "RUNNING" everywhere a job is active
• ↳ child rows have no > since they're not independently tappable — matches the pattern from your current UI¹

⁂

Footnotes

1. Screenshot-2026-05-08-at-10.39.34.jpg ↩