feat: resource monitoring

Author: captjt

README.md

@@ -14,6 +14,7 @@ A terminal UI application for managing your local development environment - hot
 - **Log Search** - Search and filter logs with regex support and match highlighting
 - **Log Export** - Export logs to files for debugging or sharing
 - **Service Details** - View detailed service info including PID, env vars, and uptime
+- **Resource Monitoring** - Real-time CPU and memory usage per service with sparkline graphs
 - **Hot Config Reload** - Update your config without restarting DevProc
 - **Keyboard-Driven** - Fast navigation with vim-style keybindings
 
@@ -242,6 +243,7 @@ groups:
 | `Tab`           | Toggle single/all logs view  |
 | `c`             | Clear logs                   |
 | `f`             | Toggle follow mode           |
+| `m`             | Toggle resource monitor view |
 | `g` / `G`       | Scroll to top / bottom       |
 | `PgUp` / `PgDn` | Page up / down               |
 | `Ctrl+u/d`      | Half page up / down          |

bun.lock

@@ -2,7 +2,7 @@
 
 This document outlines planned features and improvements for DevProc, organized by priority and complexity.
 
-## Current State (v0.4.x)
+## Current State (v0.5.x)
 
 - [x] Service management (start, stop, restart)
 - [x] Dependency ordering with healthchecks
@@ -15,6 +15,7 @@ This document outlines planned features and improvements for DevProc, organized
 - [x] Service details panel
 - [x] Animated spinners for starting/stopping
 - [x] Restart count badges
+- [x] Resource monitoring (CPU/memory per service)
 
 ---
 
@@ -51,19 +52,19 @@ This document outlines planned features and improvements for DevProc, organized
 
 ---
 
-## Medium Term (v0.5.x)
+## Completed (v0.5.x)
 
 ### Resource Monitoring
 
-**Priority: High | Complexity: High**
+- [x] Real-time CPU % and memory usage in service list
+- [x] Resource graph in log panel (toggle with `m`)
+- [x] History tracking with sparkline visualization
+- [x] Color-coded CPU (green/yellow/red based on usage)
+- [x] Implementation: Uses `ps` command on macOS/Linux
 
-Display CPU and memory usage per service.
+---
 
-- Real-time CPU % and memory usage in service list
-- Optional resource graph in log panel (toggle with `m`)
-- Alerts when thresholds exceeded
-- History tracking for trends
-- Implementation: Use `ps` or `/proc` on Linux, `ps` on macOS
+## Medium Term (v0.6.x)
 
 ### Notifications
 
@@ -274,15 +275,21 @@ Want to help build these features? Here's how:
 
 ### Help Wanted
 
-- Resource monitoring (platform-specific code)
 - Docker API integration
 - Kubernetes support
 
 ---
 
 ## Changelog
 
-### v0.4.0 (Current)
+### v0.5.0 (Current)
+
+- Added resource monitoring (CPU/memory per service)
+- Real-time CPU % and memory usage displayed in service list
+- Resource graph view with sparkline visualization (toggle with `m`)
+- Color-coded CPU usage indicators
+
+### v0.4.0
 
 - Added log search with regex support
 - Added search match highlighting

docs/ROADMAP.md

@@ -33,9 +33,11 @@
     "build": "bun run scripts/build.ts",
     "build:all": "bun run scripts/build.ts --all",
     "test": "bun test",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prettier:write": "prettier --write ."
   },
   "devDependencies": {
+    "prettier": "3.6.2",
     "@types/bun": "latest"
   },
   "peerDependencies": {
@@ -46,5 +48,9 @@
     "@opentui/solid": "^0.1.50",
     "yaml": "^2.8.1",
     "zod": "^4.1.13"
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 120
   }
 }

package.json

@@ -5,6 +5,7 @@ import type { ScrollBoxRenderable } from "@opentui/core";
 import type { ProcessManager } from "./process/manager";
 import { useServices, type DisplayItem } from "./ui/hooks/useServices";
 import { useLogs, type SearchMatch } from "./ui/hooks/useLogs";
+import { formatBytes, formatCpu, generateSparkline } from "./process/resources";
 
 interface AppProps {
   manager: ProcessManager;
@@ -100,6 +101,9 @@ export function App(props: AppProps) {
   // Service details panel
   const [showDetails, setShowDetails] = createSignal(false);
 
+  // Resource graph view
+  const [showResourceGraph, setShowResourceGraph] = createSignal(false);
+
   // Spinner animation state
   const [spinnerFrame, setSpinnerFrame] = createSignal(0);
 
@@ -569,6 +573,12 @@ export function App(props: AppProps) {
           setShowDetails(true);
           event.preventDefault();
           break;
+
+        // Resource graph toggle
+        case "m":
+          setShowResourceGraph((prev) => !prev);
+          event.preventDefault();
+          break;
       }
     },
   );
@@ -633,6 +643,9 @@ export function App(props: AppProps) {
                       const indent = serviceItem.group ? "  " : "";
                       const restartBadge =
                         service.restartCount > 0 ? `↻${service.restartCount}` : "";
+                      const resources = service.resources;
+                      const isRunning =
+                        service.status === "running" || service.status === "healthy";
                       return (
                         <box height={1} paddingLeft={1} paddingRight={1} flexDirection="row">
                           <text>{indent}</text>
@@ -650,6 +663,14 @@ export function App(props: AppProps) {
                           <Show when={restartBadge}>
                             <text fg="yellow">{restartBadge} </text>
                           </Show>
+                          <Show when={isRunning && resources}>
+                            <text fg={resources!.cpu > 80 ? "red" : resources!.cpu > 50 ? "yellow" : "cyan"}>
+                              {formatCpu(resources!.cpu).padStart(5)}
+                            </text>
+                            <text> </text>
+                            <text fg="cyan">{formatBytes(resources!.memory).padStart(7)}</text>
+                            <text> </text>
+                          </Show>
                           <text fg="gray">{service.port ? `:${service.port}` : ""}</text>
                           <text> </text>
                           <text fg="gray">{formatUptime(service.startedAt)}</text>
@@ -666,28 +687,92 @@ export function App(props: AppProps) {
         {/* Log panel */}
         <box flexGrow={1} flexDirection="column" borderStyle="rounded" borderColor="gray">
           <box height={1} paddingLeft={1} flexDirection="row">
-            <text fg="cyan" attributes={TextAttributes.BOLD}>
-              Logs{" "}
-              {viewMode() === "single" && selectedService()
-                ? `(${selectedService()!.name})`
-                : "(all)"}
-            </text>
+            <Show
+              when={showResourceGraph()}
+              fallback={
+                <text fg="cyan" attributes={TextAttributes.BOLD}>
+                  Logs{" "}
+                  {viewMode() === "single" && selectedService()
+                    ? `(${selectedService()!.name})`
+                    : "(all)"}
+                </text>
+              }
+            >
+              <text fg="cyan" attributes={TextAttributes.BOLD}>
+                Resources{" "}
+                {selectedService() ? `(${selectedService()!.name})` : ""}
+              </text>
+            </Show>
             <box flexGrow={1} />
-            <Show when={isSearchActive()}>
+            <Show when={!showResourceGraph() && isSearchActive()}>
               <text fg="yellow">
                 /{searchQuery()} [{currentMatchIndex() + 1}/{searchMatches().length}]{" "}
               </text>
             </Show>
-            <Show when={searchMode()}>
+            <Show when={!showResourceGraph() && searchMode()}>
               <text fg="cyan">/{searchInput()}_</text>
             </Show>
-            <Show when={!searchMode() && !following() && scrollInfo().total > 0}>
+            <Show when={!showResourceGraph() && !searchMode() && !following() && scrollInfo().total > 0}>
               <text fg="gray">
                 {scrollInfo().current}/{scrollInfo().total}{" "}
               </text>
             </Show>
-            <text fg={following() ? "green" : "gray"}>{following() ? "[follow]" : "[scroll]"}</text>
+            <Show when={!showResourceGraph()}>
+              <text fg={following() ? "green" : "gray"}>{following() ? "[follow]" : "[scroll]"}</text>
+            </Show>
+            <Show when={showResourceGraph()}>
+              <text fg="cyan">[m] logs</text>
+            </Show>
           </box>
+
+          {/* Resource graph view */}
+          <Show when={showResourceGraph() && selectedService()}>
+            {(() => {
+              const service = selectedService()!;
+              const history = props.manager.getResourceHistory(service.name);
+              const cpuValues = history.map((h) => h.cpu);
+              const memValues = history.map((h) => h.memory / (1024 * 1024)); // Convert to MB for display
+              const resources = service.resources;
+
+              return (
+                <box flexDirection="column" padding={1} flexGrow={1}>
+                  <text fg="yellow" attributes={TextAttributes.BOLD}>
+                    CPU Usage
+                  </text>
+                  <box height={1} flexDirection="row">
+                    <text fg="cyan">{generateSparkline(cpuValues, 50)}</text>
+                    <text> </text>
+                    <text fg={resources && resources.cpu > 80 ? "red" : resources && resources.cpu > 50 ? "yellow" : "green"}>
+                      {resources ? formatCpu(resources.cpu) : "N/A"}
+                    </text>
+                  </box>
+                  <text> </text>
+                  <text fg="yellow" attributes={TextAttributes.BOLD}>
+                    Memory Usage
+                  </text>
+                  <box height={1} flexDirection="row">
+                    <text fg="magenta">{generateSparkline(memValues, 50)}</text>
+                    <text> </text>
+                    <text fg="green">{resources ? formatBytes(resources.memory) : "N/A"}</text>
+                  </box>
+                  <text> </text>
+                  <text fg="gray">
+                    History: {history.length} samples ({history.length}s)
+                  </text>
+                  <Show when={resources}>
+                    <text fg="gray">
+                      Memory %: {resources!.memoryPercent.toFixed(1)}% of system
+                    </text>
+                  </Show>
+                  <box flexGrow={1} />
+                  <text fg="gray">Press [m] to return to logs</text>
+                </box>
+              );
+            })()}
+          </Show>
+
+          {/* Logs view */}
+          <Show when={!showResourceGraph()}>
           <scrollbox
             ref={(el: ScrollBoxRenderable) => (scrollboxRef = el)}
             flexGrow={1}
@@ -785,6 +870,7 @@ export function App(props: AppProps) {
               </For>
             </box>
           </scrollbox>
+          </Show>
         </box>
       </box>
 
@@ -803,6 +889,8 @@ export function App(props: AppProps) {
         <text>lear </text>
         <text fg="gray">[f]</text>
         <text>ollow </text>
+        <text fg="gray">[m]</text>
+        <text>onitor </text>
         <text fg="gray">| </text>
         <text fg="gray">[?]</text>
         <text>help </text>
@@ -834,7 +922,7 @@ export function App(props: AppProps) {
           <text>Space Toggle group | i Service info</text>
           <text> </text>
           <text fg="yellow">Logs</text>
-          <text>Tab Toggle view | c Clear | f Follow</text>
+          <text>Tab Toggle view | c Clear | f Follow | m Monitor</text>
           <text>g/G Top/bottom | PgUp/PgDn | Ctrl+u/d</text>
           <text>e Export service logs | E Export all logs</text>
           <text> </text>

src/app.tsx

@@ -5,7 +5,7 @@ import { loadConfig } from "./config/loader";
 import { ProcessManager } from "./process/manager";
 import { App } from "./app";
 
-const VERSION = "0.4.0";
+const VERSION = "0.5.0";
 
 function printHelp() {
   console.log(`