oh-my-opencode-dashboard 0.0.3 → 0.0.5

package/src/server/dev.ts

@@ -26,14 +26,16 @@ const resolvedProjectPath = projectPath ?? process.cwd()
 
 const app = new Hono()
 
+const storageRoot = getOpenCodeStorageDir()
+
 const store = createDashboardStore({
   projectRoot: resolvedProjectPath,
-  storageRoot: getOpenCodeStorageDir(),
+  storageRoot,
   watch: true,
   pollIntervalMs: 2000,
 })
 
-app.route("/api", createApi(store))
+app.route("/api", createApi({ store, storageRoot }))
 
 Bun.serve({
   fetch: app.fetch,

package/src/server/start.ts

@@ -21,14 +21,16 @@ const port = parseInt(values.port || '51234')
 
 const app = new Hono()
 
+const storageRoot = getOpenCodeStorageDir()
+
 const store = createDashboardStore({
   projectRoot: project,
-  storageRoot: getOpenCodeStorageDir(),
+  storageRoot,
   watch: true,
   pollIntervalMs: 2000,
 })
 
-app.route('/api', createApi(store))
+app.route('/api', createApi({ store, storageRoot }))
 
 const distRoot = join(import.meta.dir, '../../dist')
 

package/src/styles.css

@@ -349,6 +349,133 @@ body {
   color: rgba(31, 36, 38, 0.62);
 }
 
+.bgTaskRowTitleWrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.bgTaskRowTitleText {
+  min-width: 0;
+}
+
+.bgTaskToggle {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 10px;
+  border: 1px solid rgba(31, 36, 38, 0.16);
+  background: rgba(255, 255, 255, 0.62);
+  box-shadow: 0 6px 14px rgba(29, 32, 33, 0.06);
+  color: rgba(31, 36, 38, 0.72);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  flex: 0 0 auto;
+  margin-top: 2px;
+  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+
+.bgTaskToggle::before {
+  content: "\25B8";
+  font-size: 12px;
+  line-height: 1;
+  transform: translateX(0.5px);
+}
+
+.bgTaskToggle:hover {
+  transform: translateY(-1px);
+  background: rgba(255, 255, 255, 0.78);
+  border-color: rgba(31, 36, 38, 0.20);
+}
+
+.bgTaskToggle:active {
+  transform: translateY(0px);
+}
+
+.bgTaskToggle:focus-visible {
+  outline: 2px solid rgba(15, 90, 81, 0.30);
+  outline-offset: 2px;
+}
+
+.bgTaskToggle[aria-expanded="true"] {
+  background: rgba(15, 90, 81, 0.10);
+  border-color: rgba(15, 90, 81, 0.22);
+  color: var(--teal-ink);
+}
+
+.bgTaskToggle[aria-expanded="true"]::before {
+  content: "\25BE";
+  transform: translateY(-0.5px);
+}
+
+.table td.bgTaskDetailCell {
+  padding: 0 10px 14px;
+}
+
+.bgTaskDetail {
+  padding: 12px 12px 10px;
+  border-radius: 14px;
+  border: 1px solid rgba(31, 36, 38, 0.08);
+  background: rgba(255, 255, 255, 0.54);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.28),
+    0 10px 22px rgba(29, 32, 33, 0.05);
+  backdrop-filter: blur(8px);
+}
+
+.bgTaskDetailHeader {
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+
+.bgTaskDetailEmpty {
+  font-size: 13px;
+}
+
+.bgTaskToolCallsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 10px;
+}
+
+.bgTaskToolCall {
+  border-radius: 14px;
+  border: 1px solid rgba(31, 36, 38, 0.10);
+  background:
+    radial-gradient(120px 50px at 12% 18%, rgba(15, 90, 81, 0.06), transparent 70%),
+    rgba(255, 255, 255, 0.64);
+  padding: 10px 11px;
+}
+
+.bgTaskToolCallRow {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) max-content;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.bgTaskToolCallTool,
+.bgTaskToolCallStatus,
+.bgTaskToolCallId {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bgTaskToolCallTime {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.bgTaskToolCallId {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: 0.78;
+}
+
 .details {
   border-radius: var(--radius);
   border: 1px solid rgba(31, 36, 38, 0.12);
@@ -655,4 +782,8 @@ body {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .bgTaskToolCallsGrid {
+    grid-template-columns: 1fr;
+  }
 }

package/src/timeseries-stacked.test.ts

@@ -0,0 +1,261 @@
+import { describe, it, expect } from "vitest";
+import { computeStackedSegments, AgentCounts, StackedSegment } from "./timeseries-stacked";
+
+describe("computeStackedSegments", () => {
+  describe("Edge cases", () => {
+    it("should return empty array when chartHeight <= 0", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 5, atlas: 3 };
+      
+      expect(computeStackedSegments(counts, 20, 0)).toEqual([]);
+      expect(computeStackedSegments(counts, 20, -5)).toEqual([]);
+    });
+
+    it("should return empty array when scaleMax <= 0", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 5, atlas: 3 };
+      
+      expect(computeStackedSegments(counts, 0, 100)).toEqual([]);
+      expect(computeStackedSegments(counts, -10, 100)).toEqual([]);
+    });
+
+    it("should return empty array when all counts are zero", () => {
+      const counts: AgentCounts = { sisyphus: 0, prometheus: 0, atlas: 0 };
+      
+      const result = computeStackedSegments(counts, 20, 100);
+      expect(result).toEqual([]);
+    });
+
+    it("should handle invalid/missing counts gracefully", () => {
+      const invalidCounts = {
+        sisyphus: NaN,
+        prometheus: Infinity,
+        atlas: -5,
+      } as unknown as AgentCounts;
+      
+      const result = computeStackedSegments(invalidCounts, 20, 100);
+      expect(result).toEqual([]);
+    });
+
+    it("should handle mixed valid/invalid counts", () => {
+      const mixedCounts = {
+        sisyphus: 10,
+        prometheus: NaN,
+        atlas: -3,
+      } as unknown as AgentCounts;
+      
+      const result = computeStackedSegments(mixedCounts, 20, 100);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({
+        tone: "teal",
+        y: 50,
+        height: 50,
+      });
+    });
+  });
+
+  describe("Single agent scenarios", () => {
+    it("should return one segment when only sisyphus is non-zero", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 0, atlas: 0 };
+      
+      const result = computeStackedSegments(counts, 20, 100);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({
+        tone: "teal",
+        y: 50,
+        height: 50,
+      });
+    });
+
+    it("should return one segment when only prometheus is non-zero", () => {
+      const counts: AgentCounts = { sisyphus: 0, prometheus: 15, atlas: 0 };
+      
+      const result = computeStackedSegments(counts, 30, 120);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({
+        tone: "red",
+        y: 60,
+        height: 60,
+      });
+    });
+
+    it("should return one segment when only atlas is non-zero", () => {
+      const counts: AgentCounts = { sisyphus: 0, prometheus: 0, atlas: 8 };
+      
+      const result = computeStackedSegments(counts, 16, 80);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({
+        tone: "green",
+        y: 40,
+        height: 40,
+      });
+    });
+
+    it("should round to at least 1px for non-zero values", () => {
+      const counts: AgentCounts = { sisyphus: 1, prometheus: 0, atlas: 0 };
+      
+      const result = computeStackedSegments(counts, 1000, 100);
+      expect(result).toHaveLength(1);
+      expect(result[0].height).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe("Multiple agent scenarios", () => {
+    it("should return multiple segments in correct order (bottom to top)", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 20, atlas: 15 };
+      
+      const result = computeStackedSegments(counts, 50, 100);
+      expect(result).toHaveLength(3);
+      
+      // Check order: teal (sisyphus) -> red (prometheus) -> green (atlas)
+      expect(result[0].tone).toBe("teal");
+      expect(result[1].tone).toBe("red");
+      expect(result[2].tone).toBe("green");
+      
+      // Check positions (y increases upward, so atlas should have smallest y)
+      expect(result[0].y).toBeGreaterThan(result[1].y);
+      expect(result[1].y).toBeGreaterThan(result[2].y);
+    });
+
+    it("should correctly calculate heights for all agents", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 20, atlas: 15 };
+      
+      const result = computeStackedSegments(counts, 50, 100);
+      const totalHeight = result.reduce((sum, seg) => sum + seg.height, 0);
+      
+      expect(totalHeight).toBeLessThanOrEqual(100);
+      
+      // Expected heights: 20, 40, 30
+      expect(result[0].height).toBe(20); // sisyphus
+      expect(result[1].height).toBe(40); // prometheus  
+      expect(result[2].height).toBe(30); // atlas
+    });
+
+    it("should handle zero values mixed with non-zero values", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 0, atlas: 15 };
+      
+      const result = computeStackedSegments(counts, 30, 90);
+      expect(result).toHaveLength(2);
+      
+      // Should only have teal (sisyphus) and green (atlas)
+      expect(result[0].tone).toBe("teal");
+      expect(result[1].tone).toBe("green");
+      
+      // Check positioning
+      expect(result[0].y).toBeGreaterThan(result[1].y);
+    });
+  });
+
+  describe("Clamping and overflow behavior", () => {
+    it("should ensure sum of heights never exceeds chartHeight", () => {
+      const counts: AgentCounts = { sisyphus: 100, prometheus: 100, atlas: 100 };
+      
+      const result = computeStackedSegments(counts, 100, 50); // Should overflow
+      const totalHeight = result.reduce((sum, seg) => sum + seg.height, 0);
+      
+      expect(totalHeight).toBeLessThanOrEqual(50);
+    });
+
+    it("should preserve at least 1px for non-zero agents when possible", () => {
+      const counts: AgentCounts = { sisyphus: 1, prometheus: 1, atlas: 1 };
+      
+      const result = computeStackedSegments(counts, 100, 10);
+      
+      // All agents should be visible with at least 1px each
+      expect(result).toHaveLength(3);
+      expect(result.every(seg => seg.height >= 1)).toBe(true);
+    });
+
+    it("should distribute overflow reduction fairly", () => {
+      const counts: AgentCounts = { sisyphus: 40, prometheus: 35, atlas: 25 };
+      
+      const result = computeStackedSegments(counts, 100, 80);
+      const totalHeight = result.reduce((sum, seg) => sum + seg.height, 0);
+      
+      expect(totalHeight).toBeLessThanOrEqual(80);
+      
+      // Larger segments should be reduced more
+      const heights = result.map(seg => seg.height);
+      expect(Math.max(...heights)).toBeLessThanOrEqual(40); // Original largest was 40
+    });
+
+    it("should handle extreme overflow gracefully", () => {
+      const counts: AgentCounts = { sisyphus: 1000, prometheus: 1000, atlas: 1000 };
+      
+      const result = computeStackedSegments(counts, 100, 5);
+      const totalHeight = result.reduce((sum, seg) => sum + seg.height, 0);
+      
+      expect(totalHeight).toBeLessThanOrEqual(5);
+      // Should still try to show all agents
+      expect(result.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe("Deterministic behavior", () => {
+    it("should produce identical results for identical inputs", () => {
+      const counts: AgentCounts = { sisyphus: 15, prometheus: 25, atlas: 10 };
+      
+      const result1 = computeStackedSegments(counts, 60, 100);
+      const result2 = computeStackedSegments(counts, 60, 100);
+      
+      expect(result1).toEqual(result2);
+    });
+
+    it("should maintain consistent segment order regardless of input magnitudes", () => {
+      const testCases = [
+        { sisyphus: 100, prometheus: 1, atlas: 1 },
+        { sisyphus: 1, prometheus: 100, atlas: 1 },
+        { sisyphus: 1, prometheus: 1, atlas: 100 },
+        { sisyphus: 50, prometheus: 25, atlas: 75 },
+      ] as AgentCounts[];
+      
+      testCases.forEach(counts => {
+        const result = computeStackedSegments(counts, 100, 100);
+        const tones = result.map(seg => seg.tone);
+        
+        if (result.length === 3) {
+          expect(tones).toEqual(["teal", "red", "green"]);
+        } else if (result.length === 2) {
+          // Should still be in correct order, just missing zero-valued agents
+          expect(tones).toEqual(expect.arrayContaining([
+            expect.stringMatching(/teal|red|green/)
+          ]));
+          // Check that order is preserved for present agents
+          const toneIndex = (t: string) => ["teal", "red", "green"].indexOf(t);
+          for (let i = 1; i < tones.length; i++) {
+            expect(toneIndex(tones[i])).toBeGreaterThan(toneIndex(tones[i-1]));
+          }
+        }
+      });
+    });
+  });
+
+  describe("Boundary conditions", () => {
+    it("should handle very small chartHeight", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 5, atlas: 3 };
+      
+      const result = computeStackedSegments(counts, 20, 1);
+      const totalHeight = result.reduce((sum, seg) => sum + seg.height, 0);
+      
+      expect(totalHeight).toBeLessThanOrEqual(1);
+    });
+
+    it("should handle very large scaleMax", () => {
+      const counts: AgentCounts = { sisyphus: 10, prometheus: 5, atlas: 3 };
+      
+      const result = computeStackedSegments(counts, 1000000, 100);
+      
+      // Should produce very small but non-zero heights
+      expect(result.length).toBeGreaterThan(0);
+      expect(result.every(seg => seg.height >= 1)).toBe(true);
+    });
+
+    it("should handle fractional results correctly", () => {
+      const counts: AgentCounts = { sisyphus: 1, prometheus: 1, atlas: 1 };
+      
+      const result = computeStackedSegments(counts, 3, 10);
+      
+      // All heights should be integers
+      expect(result.every(seg => Number.isInteger(seg.height))).toBe(true);
+      expect(result.every(seg => Number.isInteger(seg.y))).toBe(true);
+    });
+  });
+});

package/src/timeseries-stacked.ts

@@ -0,0 +1,145 @@
+/**
+ * Pure helper for computing stacked bar segment dimensions.
+ * Independent of React/DOM for testability.
+ */
+
+export type AgentTone = "teal" | "red" | "green";
+
+export interface StackedSegment {
+  tone: AgentTone;
+  y: number;
+  height: number;
+}
+
+export interface AgentCounts {
+  sisyphus: number;
+  prometheus: number;
+  atlas: number;
+}
+
+/**
+ * Compute stacked bar segments for a single bucket.
+ * 
+ * Segment order (bottom to top):
+ * 1. Sisyphus (teal) - bottom
+ * 2. Prometheus (red) - middle  
+ * 3. Atlas (green) - top
+ * 
+ * @param counts - Agent counts for this bucket
+ * @param scaleMax - Maximum value for scaling (must be > 0)
+ * @param chartHeight - Available height in pixels
+ * @returns Ordered segments from bottom to top
+ */
+export function computeStackedSegments(
+  counts: AgentCounts,
+  scaleMax: number,
+  chartHeight: number
+): StackedSegment[] {
+  // Handle edge cases
+  if (chartHeight <= 0 || scaleMax <= 0) {
+    return [];
+  }
+
+  // Validate and sanitize counts
+  const sanitized = {
+    sisyphus: Math.max(0, Number.isFinite(counts.sisyphus) ? counts.sisyphus : 0),
+    prometheus: Math.max(0, Number.isFinite(counts.prometheus) ? counts.prometheus : 0),
+    atlas: Math.max(0, Number.isFinite(counts.atlas) ? counts.atlas : 0),
+  };
+
+  const total = sanitized.sisyphus + sanitized.prometheus + sanitized.atlas;
+  if (total === 0) {
+    return [];
+  }
+
+  // Compute raw heights
+  const rawHeights = {
+    sisyphus: (sanitized.sisyphus / scaleMax) * chartHeight,
+    prometheus: (sanitized.prometheus / scaleMax) * chartHeight,
+    atlas: (sanitized.atlas / scaleMax) * chartHeight,
+  };
+
+  // Round to pixels, ensuring sum never exceeds chartHeight
+  const roundedHeights = {
+    sisyphus: Math.max(1, Math.round(rawHeights.sisyphus)) * (sanitized.sisyphus > 0 ? 1 : 0),
+    prometheus: Math.max(1, Math.round(rawHeights.prometheus)) * (sanitized.prometheus > 0 ? 1 : 0),
+    atlas: Math.max(1, Math.round(rawHeights.atlas)) * (sanitized.atlas > 0 ? 1 : 0),
+  };
+
+  // Ensure non-zero agents remain visible when possible
+  let totalRounded = roundedHeights.sisyphus + roundedHeights.prometheus + roundedHeights.atlas;
+  
+  // Distribute any overflow reduction fairly
+  if (totalRounded > chartHeight) {
+    const excess = totalRounded - chartHeight;
+    const weights = [
+      { key: 'sisyphus' as keyof typeof roundedHeights, height: roundedHeights.sisyphus },
+      { key: 'prometheus' as keyof typeof roundedHeights, height: roundedHeights.prometheus },
+      { key: 'atlas' as keyof typeof roundedHeights, height: roundedHeights.atlas },
+    ].filter(w => w.height > 0);
+
+    if (weights.length > 0) {
+      let remainingExcess = excess;
+      const totalWeight = weights.reduce((sum, w) => sum + w.height, 0);
+      
+      for (const weight of weights) {
+        if (remainingExcess <= 0) break;
+        const reduction = Math.min(
+          Math.max(1, weight.height - 1), // Keep at least 1px for non-zero agents
+          Math.round((weight.height / totalWeight) * excess)
+        );
+        roundedHeights[weight.key] -= reduction;
+        remainingExcess -= reduction;
+      }
+      
+      // If still over, trim from largest segments
+      totalRounded = roundedHeights.sisyphus + roundedHeights.prometheus + roundedHeights.atlas;
+      while (totalRounded > chartHeight) {
+        const sortedWeights = weights
+          .map(w => ({ ...w, height: roundedHeights[w.key] }))
+          .filter(w => w.height > 1) // Only trim segments > 1px
+          .sort((a, b) => b.height - a.height);
+        
+        if (sortedWeights.length === 0) break;
+        roundedHeights[sortedWeights[0].key]--;
+        totalRounded--;
+      }
+    }
+  }
+
+  // Build segments from bottom to top
+  const segments: StackedSegment[] = [];
+  let currentY = chartHeight; // Start from bottom
+
+  // Sisyphus (teal) - bottom
+  if (roundedHeights.sisyphus > 0) {
+    currentY -= roundedHeights.sisyphus;
+    segments.push({
+      tone: "teal",
+      y: currentY,
+      height: roundedHeights.sisyphus,
+    });
+  }
+
+  // Prometheus (red) - middle
+  if (roundedHeights.prometheus > 0) {
+    currentY -= roundedHeights.prometheus;
+    segments.push({
+      tone: "red",
+      y: currentY,
+      height: roundedHeights.prometheus,
+    });
+  }
+
+  // Atlas (green) - top
+  if (roundedHeights.atlas > 0) {
+    currentY -= roundedHeights.atlas;
+    segments.push({
+      tone: "green",
+      y: currentY,
+      height: roundedHeights.atlas,
+    });
+  }
+
+  return segments;
+}