instar 0.24.18 → 0.24.19

package/dashboard/index.html

@@ -1921,345 +1921,88 @@
     .spark.s-skipped { background: #333; }
 
     /* ── Discovery Tab ──────────────────────────────────────── */
-    /* Systems Tab */
-    .systems-container {
-      grid-column: 1 / -1;
-      overflow-y: auto;
-      background: var(--bg);
-      padding: 20px;
-    }
-
-    .systems-main {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-
-    .systems-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 20px;
-    }
-
-    .systems-header h2 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-    }
-
-    .systems-refresh {
-      font-size: 11px;
-      padding: 4px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text-dim);
-      cursor: pointer;
-    }
-
-    .systems-refresh:hover {
-      border-color: var(--text-dim);
-      color: var(--text);
-    }
+    /* ── Systems Tab ──────────────────────────────────────────── */
+    .systems-container { grid-column: 1 / -1; overflow-y: auto; background: var(--bg); padding: 20px; }
+    .systems-main { max-width: 960px; margin: 0 auto; }
+    .systems-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+    .systems-header h2 { font-size: 16px; font-weight: 600; color: var(--text-bright); }
+    .systems-refresh { font-size: 11px; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
+    .systems-refresh:hover { border-color: var(--text-dim); color: var(--text); }
 
     /* Health Banner */
-    .health-banner {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px 24px;
-      border-radius: 10px;
-      margin-bottom: 24px;
-      border: 1px solid var(--border);
-    }
-
-    .health-banner.healthy {
-      background: rgba(76, 175, 80, 0.08);
-      border-color: rgba(76, 175, 80, 0.25);
-    }
-
-    .health-banner.error {
-      background: rgba(244, 67, 54, 0.08);
-      border-color: rgba(244, 67, 54, 0.25);
-    }
-
-    .health-banner.degraded {
-      background: rgba(255, 152, 0, 0.08);
-      border-color: rgba(255, 152, 0, 0.25);
-    }
-
-    .health-icon {
-      font-size: 28px;
-      line-height: 1;
-      flex-shrink: 0;
-    }
-
+    .health-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 10px; margin-bottom: 24px; border: 1px solid var(--border); }
+    .health-banner.healthy { background: rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.25); }
+    .health-banner.error { background: rgba(244,67,54,0.08); border-color: rgba(244,67,54,0.25); }
+    .health-banner.degraded { background: rgba(255,152,0,0.08); border-color: rgba(255,152,0,0.25); }
+    .health-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
     .health-banner.healthy .health-icon { color: var(--accent); }
     .health-banner.error .health-icon { color: var(--red); }
     .health-banner.degraded .health-icon { color: var(--orange); }
-
-    .health-text {
-      flex: 1;
-    }
-
-    .health-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-      margin-bottom: 4px;
-    }
-
-    .health-meta {
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-
-    /* Issues Panel */
-    .issues-panel {
-      margin-bottom: 24px;
-    }
-
-    .issue-card {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 12px 16px;
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-left: 3px solid var(--red);
-      border-radius: 6px;
-      margin-bottom: 8px;
-    }
-
-    .issue-card.warning {
-      border-left-color: var(--orange);
-    }
-
-    .issue-card-icon {
-      font-size: 14px;
-      margin-top: 1px;
-      flex-shrink: 0;
-    }
-
-    .issue-card-content {
-      flex: 1;
-    }
-
-    .issue-card-label {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-bright);
-      margin-bottom: 2px;
-    }
-
-    .issue-card-desc {
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-
-    /* Capabilities Grid */
-    .capabilities-section {
-      margin-bottom: 24px;
-    }
-
-    .capabilities-section-title {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 12px;
-    }
-
-    /* Capability Cards */
-    .capability-card {
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      margin-bottom: 6px;
-      overflow: hidden;
-      transition: border-color 0.15s;
-    }
-
-    .capability-card:hover {
-      border-color: rgba(255,255,255,0.12);
-    }
-
-    .capability-card.expanded {
-      border-color: var(--accent);
-    }
-
-    .capability-card-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 14px 16px;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .cap-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-
+    .health-text { flex: 1; }
+    .health-title { font-size: 15px; font-weight: 600; color: var(--text-bright); margin-bottom: 3px; }
+    .health-meta { font-size: 12px; color: var(--text-dim); }
+
+    /* Issues */
+    .issues-panel { margin-bottom: 24px; }
+    .issue-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 6px; margin-bottom: 8px; }
+    .issue-card.warning { border-left-color: var(--orange); }
+    .issue-card-icon { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
+    .issue-card-content { flex: 1; }
+    .issue-card-label { font-size: 13px; font-weight: 500; color: var(--text-bright); margin-bottom: 2px; }
+    .issue-card-desc { font-size: 12px; color: var(--text-dim); }
+
+    /* Card Grid */
+    .cap-section-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
+    .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 24px; }
+    .cap-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; display: flex; flex-direction: column; gap: 8px; }
+    .cap-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
+    .cap-card-top { display: flex; align-items: center; gap: 10px; }
+    .cap-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
     .cap-dot.active { background: var(--accent); }
     .cap-dot.error { background: var(--red); }
-
-    .cap-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .cap-label {
-      font-size: 13px;
-      color: var(--text-bright);
-      font-weight: 500;
-      margin-bottom: 2px;
-    }
-
-    .cap-metric {
-      font-size: 11px;
-      color: var(--text-dim);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .cap-arrow {
-      font-size: 10px;
-      color: var(--text-dim);
-      transition: transform 0.2s;
-      flex-shrink: 0;
-    }
-
-    .capability-card.expanded .cap-arrow {
-      transform: rotate(90deg);
-    }
-
-    /* Capability Detail (expandable) */
-    .cap-detail {
-      display: none;
-      padding: 0 16px 14px;
-      border-top: 1px solid var(--border);
-    }
-
-    .capability-card.expanded .cap-detail {
-      display: block;
-    }
-
-    .cap-detail-desc {
-      font-size: 12px;
-      color: var(--text-dim);
-      margin: 12px 0 10px;
-      line-height: 1.5;
-    }
-
-    .cap-detail-label {
-      font-size: 10px;
-      font-weight: 600;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 6px;
-    }
-
-    .cap-detail-processes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-
-    .cap-detail-proc {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      font-size: 11px;
-      color: var(--text);
-    }
-
-    .cap-detail-proc-dot {
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-    }
-
-    /* Events Disclosure */
-    .events-disclosure {
-      margin-top: 8px;
-    }
-
-    .events-disclosure-toggle {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 0;
-      cursor: pointer;
-      user-select: none;
-      font-size: 12px;
-      color: var(--text-dim);
-      border: none;
-      background: none;
-      width: 100%;
-      text-align: left;
-    }
-
-    .events-disclosure-toggle:hover {
-      color: var(--text);
-    }
-
-    .events-disclosure-arrow {
-      font-size: 10px;
-      transition: transform 0.2s;
-    }
-
-    .events-disclosure.expanded .events-disclosure-arrow {
-      transform: rotate(90deg);
-    }
-
-    .events-disclosure-body {
-      display: none;
-      background: var(--bg-panel);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-
-    .events-disclosure.expanded .events-disclosure-body {
-      display: block;
-    }
-
-    .systems-event-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 14px;
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-    }
-
-    .systems-event-row:last-child {
-      border-bottom: none;
-    }
-
-    .systems-event-time {
-      color: var(--text-dim);
-      white-space: nowrap;
-      font-size: 11px;
-      min-width: 60px;
-    }
-
-    .systems-event-text {
-      color: var(--text);
-      flex: 1;
-    }
+    .cap-card-name { font-size: 14px; font-weight: 600; color: var(--text-bright); flex: 1; }
+    .cap-card-arrow { font-size: 11px; color: var(--text-dim); }
+    .cap-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .cap-card-metric { font-size: 12px; color: var(--accent); font-weight: 500; padding-top: 4px; border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cap-card.error .cap-card-metric { color: var(--red); }
+    .cap-card-stats { display: flex; gap: 12px; flex-wrap: wrap; }
+    .cap-stat { font-size: 11px; color: var(--text-dim); }
+    .cap-stat-value { font-weight: 600; color: var(--text); margin-right: 3px; }
+
+    /* Detail View */
+    .cap-detail-view { display: none; }
+    .cap-detail-view.active { display: block; }
+    .cap-detail-back { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; border: none; background: none; padding: 0; margin-bottom: 16px; }
+    .cap-detail-back:hover { color: var(--text); }
+    .cap-detail-header { margin-bottom: 20px; }
+    .cap-detail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+    .cap-detail-title h3 { font-size: 18px; font-weight: 600; color: var(--text-bright); margin: 0; }
+    .cap-detail-description { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 700px; }
+    .cap-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; }
+    .cap-stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; text-align: center; }
+    .cap-stat-card-value { font-size: 20px; font-weight: 700; color: var(--text-bright); }
+    .cap-stat-card-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px; }
+    .cap-detail-section { margin-bottom: 20px; }
+    .cap-detail-section-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+    .cap-process-list { display: flex; flex-direction: column; gap: 6px; }
+    .cap-process-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; }
+    .cap-process-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+    .cap-process-name { font-size: 13px; color: var(--text-bright); font-weight: 500; flex: 1; }
+    .cap-process-status { font-size: 11px; color: var(--text-dim); }
+    .cap-last-activity { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+
+    /* Events */
+    .events-disclosure { margin-top: 8px; }
+    .events-disclosure-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; user-select: none; font-size: 12px; color: var(--text-dim); border: none; background: none; width: 100%; text-align: left; }
+    .events-disclosure-toggle:hover { color: var(--text); }
+    .events-disclosure-arrow { font-size: 10px; transition: transform 0.2s; }
+    .events-disclosure.expanded .events-disclosure-arrow { transform: rotate(90deg); }
+    .events-disclosure-body { display: none; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; }
+    .events-disclosure.expanded .events-disclosure-body { display: block; }
+    .systems-event-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
+    .systems-event-row:last-child { border-bottom: none; }
+    .systems-event-time { color: var(--text-dim); white-space: nowrap; font-size: 11px; min-width: 60px; }
+    .systems-event-text { color: var(--text); flex: 1; }
 
     .discovery-container {
       grid-column: 1 / -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "0.24.18",
+  "version": "0.24.19",
   "description": "Persistent autonomy infrastructure for AI agents",
   "type": "module",
   "main": "dist/index.js",

package/src/data/builtin-manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./builtin-manifest.schema.json",
   "schemaVersion": 1,
-  "generatedAt": "2026-03-28T21:31:33.464Z",
-  "instarVersion": "0.24.18",
+  "generatedAt": "2026-03-29T00:58:31.406Z",
+  "instarVersion": "0.24.19",
   "entryCount": 179,
   "entries": {
     "hook:session-start": {

package/upgrades/0.24.19.md

@@ -0,0 +1,21 @@
+# Upgrade Guide — vNEXT
+
+<!-- bump: patch -->
+
+## What Changed
+
+### Systems Dashboard CSS Fix — v3 Styles Restored
+
+The Systems dashboard CSS was still referencing old v2 class names (`.capability-card`, `.cap-info`, `.cap-label`) while the JavaScript had been updated to generate v3 classes (`.cap-card`, `.cap-card-name`, `.cap-card-desc`, `.cap-grid`). This mismatch caused the dashboard cards to render without proper styling.
+
+The CSS has been fully replaced with v3 styles covering: card grid layout, detail views, stat cards, process list indicators, and responsive grid breakpoints.
+
+## What to Tell Your User
+
+The Systems dashboard styling has been fixed. If the cards and layout looked broken or unstyled, that's now resolved — everything renders cleanly with the new card grid design.
+
+## Summary of New Capabilities
+
+| Capability | How to Use |
+|-----------|-----------|
+| Systems dashboard CSS fix | Automatic — dashboard renders correctly now |