aidevops 3.31.29 → 3.31.31

package/README.md

@@ -58,7 +58,7 @@ The result: an AI operations platform that manages projects across every busines
 [![Copyright](https://img.shields.io/badge/Copyright-Marcus%20Quinn%202025--2026-blue.svg)](https://github.com/marcusquinn)
 
 <!-- Release & Version Info -->
-[![Version](https://img.shields.io/badge/Version-3.31.29-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
+[![Version](https://img.shields.io/badge/Version-3.31.31-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
 [![npm version](https://img.shields.io/npm/v/aidevops)](https://www.npmjs.com/package/aidevops)
 [![Homebrew](https://img.shields.io/badge/homebrew-marcusquinn%2Ftap-orange)](https://github.com/marcusquinn/homebrew-tap)
 [![GitHub repository](https://img.shields.io/badge/github-repository-181717.svg?logo=github)](https://github.com/marcusquinn/aidevops)

package/VERSION

@@ -1 +1 @@
-3.31.29
+3.31.31

package/aidevops.sh

@@ -5,7 +5,7 @@
 # AI DevOps Framework CLI
 # Usage: aidevops <command> [options]
 #
-# Version: 3.31.29
+# Version: 3.31.31
 
 set -euo pipefail
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidevops",
-  "version": "3.31.29",
+  "version": "3.31.31",
   "description": "AI DevOps Framework - AI-assisted development workflows, code quality, and deployment automation",
   "type": "module",
   "workspaces": [

package/packages/gui-web/src/PulseWorkersSurface.tsx

@@ -94,10 +94,19 @@ export function PulseWorkersSurface({ status }: { status: GuiStatusData }): Reac
           </div>
           <button disabled={!actionById(pulse.actions, "create_systemic_fix")?.enabled} onClick={() => void runPulseWorkerAction(actionById(pulse.actions, "create_systemic_fix"), setJobs, setSelectedJobId, setDismissedJobIds)} title="Create a worker-ready systemic-fix task from selected evidence" type="button">Create systemic fix task</button>
         </article>
+      </section>
 
-        <section className="pulse-chart-grid" aria-label="Pulse trend charts">
+      <section className="planned-card pulse-trends-panel" aria-label="Pulse trend charts">
+        <div className="split-heading">
+          <div>
+            <p className="eyebrow">Operational trends</p>
+            <h3>Key indicators</h3>
+          </div>
+          <span className="count-pill">single-column chart stack</span>
+        </div>
+        <div className="pulse-chart-grid pulse-chart-stack">
           {chartSeries.map((chart) => <PulseChartPanel chart={chart} key={chart.id} />)}
-        </section>
+        </div>
       </section>
 
       <section className="planned-card pulse-filter-panel" aria-label="Pulse filters">
@@ -220,19 +229,70 @@ function actionById(actions: GuiPulseWorkerActionSummary[], id: GuiPulseWorkerAc
 
 function PulseChartPanel({ chart }: { chart: GuiPulseWorkerChartSeries }): ReactElement {
   const maxValue = Math.max(...chart.points.map((point) => point.value), 1);
+  const values = chart.points.map((point) => point.value);
+  const latestValue = values.at(-1) ?? 0;
+  const firstValue = values[0] ?? latestValue;
+  const trend = latestValue - firstValue;
+  const svgPaths = chartSvgPaths(values);
 
   return (
-    <article className="planned-card pulse-chart-panel">
-      <p className="eyebrow">Trends · day/week/month/year</p>
-      <h3>{chart.label}</h3>
+    <article className="pulse-chart-panel">
+      <p className="eyebrow">Trends · compact bars · day/week/month/year</p>
+      <div className="pulse-chart-heading">
+        <h4>{chart.label}</h4>
+        <div className="pulse-chart-meta">
+          <span><strong>{formatChartValue(latestValue, chart.unit)}</strong><small>Latest</small></span>
+          <span><strong>{trendSummary(trend, chart.unit)}</strong><small>Δ period</small></span>
+        </div>
+      </div>
       <div className="pulse-chart-placeholder" aria-label={`${chart.label} chart for day week month year buckets`} role="img">
-        {chart.points.map((point) => <span key={`${chart.id}-${point.period}`} style={{ "--bar-height": `${Math.max(18, Math.round((point.value / maxValue) * 100))}%` } as CSSProperties}>{point.period}</span>)}
+        <svg aria-hidden="true" className="pulse-chart-sparkline" focusable="false" preserveAspectRatio="none" viewBox="0 0 100 48">
+          <path className="pulse-chart-area" d={svgPaths.area} />
+          <path className="pulse-chart-line" d={svgPaths.line} />
+          {svgPaths.points.map((point) => <circle className="pulse-chart-dot" cx={point.x} cy={point.y} key={`${chart.id}-dot-${point.x}`} r="1.6" />)}
+        </svg>
+        {chart.points.map((point) => <span data-value={formatChartValue(point.value, chart.unit)} key={`${chart.id}-${point.period}`} style={{ "--bar-height": `${Math.max(18, Math.round((point.value / maxValue) * 100))}%` } as CSSProperties} title={`${point.period_label}: ${formatChartValue(point.value, chart.unit)}`}>{point.period}</span>)}
       </div>
       <p>{chart.unit} · {chart.points.map((point) => `${point.period_label}: ${point.value}`).join(" · ")}</p>
     </article>
   );
 }
 
+function chartSvgPaths(values: number[]): { line: string; area: string; points: Array<{ x: number; y: number }> } {
+  if (values.length === 0) {
+    return { line: "M0 24 L100 24", area: "M0 24 L100 24 L100 48 L0 48 Z", points: [] };
+  }
+
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const height = 48;
+  const padding = 5;
+  const span = Math.max(max - min, 1);
+  const points = values.map((value, index) => {
+    const x = values.length <= 1 ? 50 : (index / (values.length - 1)) * 100;
+    const y = max === min ? height / 2 : padding + ((max - value) / span) * (height - padding * 2);
+    return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
+  });
+  const line = points.map((point, index) => `${index === 0 ? "M" : "L"}${point.x} ${point.y}`).join(" ");
+  const first = points[0] ?? { x: 0, y: height / 2 };
+  const last = points.at(-1) ?? first;
+
+  return { line, area: `${line} L${last.x} ${height} L${first.x} ${height} Z`, points };
+}
+
+function formatChartValue(value: number, unit: GuiPulseWorkerChartSeries["unit"]): string {
+  if (unit === "percent") return `${value}%`;
+  if (unit === "cost_ref") return `$${value.toFixed(2)}`;
+  if (unit === "milliseconds") return `${Math.round(value)}ms`;
+  if (unit === "tokens") return `${new Intl.NumberFormat("en", { notation: "compact" }).format(value)} tokens`;
+  return new Intl.NumberFormat("en").format(value);
+}
+
+function trendSummary(delta: number, unit: GuiPulseWorkerChartSeries["unit"]): string {
+  const sign = delta > 0 ? "+" : "";
+  return `${sign}${formatChartValue(delta, unit)}`;
+}
+
 function PulseDrilldownPanel({ event }: { event: PulseEvent | undefined }): ReactElement {
   if (event === undefined) {
     return (

package/packages/gui-web/src/RecommendedAppsSurface.tsx

@@ -72,6 +72,7 @@ export const recommendedApps = ([
   { name: "Nextcloud Talk", description: "Open source video calls, chat, and collaboration for Nextcloud.", websiteUrl: "https://nextcloud.com/talk/", repoUrl: "https://github.com/nextcloud/spreed", iosUrl: "https://apps.apple.com/us/app/nextcloud-talk/id1296825574", androidUrl: "https://play.google.com/store/apps/details?id=com.nextcloud.talk2&hl=en", os: ["ios", "android"], platforms: ["webapp"] },
   { name: "OBS Studio", description: "Open source video recording and live streaming.", websiteUrl: "https://obsproject.com/", alternativeToUrl: "https://alternativeto.net/software/open-broadcaster-software/", repoUrl: "https://github.com/obsproject/obs-studio", os: ["macos", "linux", "windows"], platforms: [] },
   { name: "ONLYOFFICE", description: "Office and document collaboration.", websiteUrl: "https://www.onlyoffice.com/", alternativeToUrl: "https://alternativeto.net/software/onlyoffice/", repoUrl: "https://github.com/ONLYOFFICE/", iosUrl: "https://apps.apple.com/us/app/onlyoffice-documents/id944896972", androidUrl: "https://play.google.com/store/apps/details?id=com.onlyoffice.documents", os: ["macos", "linux", "windows", "ios", "android"], platforms: ["webapp", "saas", "api"] },
+  { name: "OpenPanel", description: "Open source web and product analytics with privacy-first dashboards, funnels, retention, session replay, revenue, and MCP access.", websiteUrl: "https://openpanel.dev/", repoUrl: "https://github.com/Openpanel-dev/openpanel", os: ["linux"], platforms: ["webapp", "saas", "api"] },
   { name: "OpenScreen", description: "Open screen-sharing project.", websiteUrl: "https://github.com/getopenscreen/openscreen/releases", alternativeToUrl: "https://alternativeto.net/software/openscreen/", repoUrl: "https://github.com/getopenscreen/openscreen", os: ["macos", "linux", "windows"], platforms: [] },
   { name: "Osaurus", description: "AI app workspace.", websiteUrl: "https://osaurus.ai/", alternativeToUrl: "https://alternativeto.net/software/osaurus/", os: ["macos"], platforms: [] },
   { name: "Parallels Desktop", description: "Run Windows, Linux, and virtual machines on macOS.", websiteUrl: "https://www.parallels.com/products/desktop/", alternativeToUrl: "https://alternativeto.net/software/parallels-desktop/about/", os: ["macos"], platforms: [] },

package/packages/gui-web/src/styles.css

@@ -2428,7 +2428,7 @@ code {
 }
 
 .pulse-overview-layout {
-  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .pulse-kpi-card {
@@ -2450,16 +2450,66 @@ code {
   line-height: 1;
 }
 
+.pulse-chart-heading {
+  align-items: start;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
+}
+
+.pulse-chart-heading h4 {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.pulse-chart-meta {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.pulse-chart-meta span {
+  background: color-mix(in srgb, var(--accent) 9%, var(--surface-muted));
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  display: grid;
+  gap: 2px;
+  padding: 8px;
+}
+
+.pulse-chart-meta strong {
+  color: var(--accent);
+  font-size: 0.98rem;
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.pulse-chart-meta small {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 .pulse-attention-panel,
 .pulse-chart-panel,
 .pulse-activity-panel,
 .pulse-drilldown-panel,
 .pulse-actions-panel,
-.pulse-filter-panel {
+.pulse-filter-panel,
+.pulse-trends-panel {
   display: grid;
   gap: 12px;
 }
 
+.pulse-chart-panel {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 14px;
+}
+
 .pulse-attention-critical,
 .pulse-status-blocked strong,
 .pulse-status-failed strong {
@@ -2480,19 +2530,24 @@ code {
 
 .pulse-chart-placeholder {
   align-items: end;
-  background: var(--surface-muted);
+  background:
+    linear-gradient(180deg, transparent 24%, color-mix(in srgb, var(--border) 42%, transparent) 24% 25%, transparent 25% 49%, color-mix(in srgb, var(--border) 34%, transparent) 49% 50%, transparent 50% 74%, color-mix(in srgb, var(--border) 28%, transparent) 74% 75%, transparent 75%),
+    var(--surface-elevated);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 12px;
   display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  min-height: 180px;
-  padding: 14px;
+  gap: 10px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  min-height: 148px;
+  overflow: hidden;
+  padding: 28px 14px 12px;
+  position: relative;
 }
 
 .pulse-chart-placeholder span {
   align-items: end;
-  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 52%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
   border: 1px solid var(--border-accent);
   border-radius: 12px 12px 4px 4px;
   color: var(--accent-strong);
@@ -2500,9 +2555,40 @@ code {
   font-size: 0.75rem;
   font-weight: 900;
   justify-content: center;
-  min-height: max(40px, var(--bar-height, calc(40px + var(--bar-index, 1) * 18px)));
+  min-height: max(32px, var(--bar-height, calc(40px + var(--bar-index, 1) * 18px)));
   padding: 8px 4px;
+  position: relative;
   text-transform: uppercase;
+  z-index: 1;
+}
+
+.pulse-chart-sparkline {
+  height: 44%;
+  inset: 16px 14px auto;
+  opacity: 0.72;
+  pointer-events: none;
+  position: absolute;
+  width: calc(100% - 28px);
+  z-index: 2;
+}
+
+.pulse-chart-area {
+  fill: color-mix(in srgb, var(--accent) 18%, transparent);
+  stroke: none;
+}
+
+.pulse-chart-line {
+  fill: none;
+  stroke: var(--accent);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.6;
+}
+
+.pulse-chart-dot {
+  fill: var(--surface-elevated);
+  stroke: var(--accent);
+  stroke-width: 1.4;
 }
 
 .pulse-chart-grid,
@@ -2512,6 +2598,10 @@ code {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
+.pulse-chart-stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .pulse-filter-group {
   border: 1px solid var(--border);
   border-radius: 14px;
@@ -4108,6 +4198,15 @@ button.managed-toggle:focus-visible {
     grid-template-columns: 1fr;
   }
 
+  .pulse-chart-heading,
+  .pulse-chart-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .pulse-chart-placeholder {
+    min-height: 128px;
+  }
+
   .pulse-activity-table {
     display: none;
   }

package/setup.sh

@@ -12,7 +12,7 @@ shopt -s inherit_errexit 2>/dev/null || true
 # AI Assistant Server Access Framework Setup Script
 # Helps developers set up the framework for their infrastructure
 #
-# Version: 3.31.29
+# Version: 3.31.31
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)