KeeperHub / KeeperHub/keeperhub

Monitoring surfaces are not usable on a phone: analytics and run history are desktop-only

Open
#2,295 5 comments 0 reactions 0 assignees View on GitHub
accepted enhancement help wanted
Dominant language
TypeScript
Stars
24
Forks
93
Avg merge
1d 4h
Merged PRs (30d)
253

Description

## Reason: what cannot be done today

KeeperHub runs workflows that move funds. The person who owns them wants to know they are healthy while away from a desk, and today that means opening a desktop-shaped application on a phone.

The groundwork exists but is not applied to the monitoring surfaces. The app sets a viewport (`app/layout.tsx:71`) and ships a `useIsMobile` hook at a 768px breakpoint (`hooks/use-mobile.ts`), used by the navigation sidebar, the overlay container and the workflow page.

The screens someone would actually check while away have had almost none of that attention. Counting `sm:`/`md:`/`lg:`/`xl:` utilities across the 13 files in `components/analytics/`: 11 in total, 9 of them in just two files (`kpi-cards.tsx` and `analytics-header.tsx`). Zero in `runs-table.tsx`, zero in `time-series-chart.tsx`, zero in `gas-breakdown-chart.tsx`, zero in `runs-filters.tsx`, zero in `project-drawer.tsx`. The KPI cards at the top reflow; nothing below them does.

Two specific shapes to expect:

- `components/analytics/runs-table.tsx` is a real `` table whose cells are `whitespace-nowrap`, with no `overflow-x` container. On a narrow screen that forces the page to scroll horizontally rather than the table.
- `components/workflow/workflow-runs.tsx` is the per-run step log - 1472 lines of expandable step panels, not a table - and carries zero responsive utilities.

## Scope

Make the read-only monitoring path usable on a phone. Specifically:

- The workflow list, with enough per-row status to tell healthy from failing
- A single workflow's run history, and a single run's detail and logs
- Analytics
- The pieces of navigation needed to move between those

**Explicitly not in scope: the workflow editor.** Editing a node graph on a phone is a different and much larger problem, and nobody has asked for it. If a route is not usable on a small screen and is not on the list above, the correct outcome is that it degrades gracefully, not that it is rebuilt.

Also not in scope: a native application. That is a plausible follow-up once these screens work, and it is a separate decision.

## Suggested approach

Start with an audit rather than with code: walk the four surfaces above at a phone viewport and record what breaks and how. A short written list on this issue is genuinely useful on its own and makes the work splittable across contributors. Expect the failures to be dominated by fixed-width tables, and expect the fix for each table to be a decision about which columns matter on a small screen rather than a CSS change.

Where a pattern is needed, follow the existing `useIsMobile` usage rather than introducing a second mechanism.

## What "done" looks like

Every screen in scope is readable and navigable at 375px wide with no horizontal scrolling, no clipped content, and no control that cannot be tapped. Screenshots at that width, before and after, on the pull request.

---
Tracking: [KEEP-186](https://linear.app/keeperhubapp/issue/KEEP-186) (internal tracker, not publicly accessible)

Contributor guide

Open the contributing guide

Research direction

Start with a 375px audit of the workflow list, run history and detail/log views, analytics, and navigation. Read app/layout.tsx:71, hooks/use-mobile.ts, components/analytics/runs-table.tsx, and components/workflow/workflow-runs.tsx first; record fixed-width and interaction failures, then verify each in-scope screen has no horizontal scrolling, clipped content, or untappable controls.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.