loadout-ai 0.4.1 → 0.5.0

package/dashboard/index.html

@@ -1,249 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Loadout dashboard</title>
-    <link rel="stylesheet" href="/styles.css" />
-  </head>
-  <body>
-    <a class="skip-link" href="#dashboard-content">Skip to dashboard content</a>
-    <main id="dashboard-content" tabindex="-1">
-      <header aria-labelledby="page-title">
-        <p class="eyebrow">LOADOUT</p>
-        <h1 id="page-title">Your agent control center.</h1>
-        <p class="subhead">
-          Evidence health, safe updates, policy setups, and real packages from
-          this machine.
-        </p>
-        <nav class="dashboard-nav" aria-label="Dashboard views">
-          <a href="#home" data-route="home">Home</a>
-          <a href="#discover" data-route="discover">Discover</a>
-          <a href="#installed" data-route="installed">Installed</a>
-          <a href="#updates" data-route="updates">Updates</a>
-        </nav>
-        <div class="refresh-row">
-          <button
-            id="refresh-dashboard"
-            type="button"
-            aria-describedby="refresh-help"
-          >
-            Refresh dashboard
-          </button>
-          <span id="refresh-help" class="muted"
-            >Reads local Loadout data only. It does not install, update, or send
-            anything.</span
-          >
-        </div>
-        <p
-          id="dashboard-notice"
-          class="sr-only"
-          role="status"
-          aria-live="polite"
-        ></p>
-      </header>
-
-      <section id="home" data-screen aria-labelledby="status-heading">
-        <div class="section-title">
-          <h2 id="status-heading">Agent status</h2>
-        </div>
-        <div
-          id="status"
-          class="state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Loading agent status…
-        </div>
-      </section>
-
-      <section data-screen="home" aria-labelledby="sync-heading">
-        <div class="section-title">
-          <h2 id="sync-heading">Synchronize</h2>
-          <span>Explicit approval required</span>
-        </div>
-        <div
-          class="action-bar"
-          role="group"
-          aria-label="Synchronize manifest actions"
-        >
-          <button id="preview-sync" type="button" aria-describedby="sync-help">
-            Preview manifest
-          </button>
-          <button id="apply-sync" type="button" disabled>
-            Apply safe plan
-          </button>
-          <button id="rollback-sync" class="secondary" type="button" disabled>
-            Undo last dashboard change
-          </button>
-        </div>
-        <p id="sync-help" class="muted">
-          Preview is read-only. Applying remains disabled until a safe plan is
-          reviewed and acknowledged.
-        </p>
-        <label class="approval-control" for="sync-acknowledgement"
-          ><input id="sync-acknowledgement" type="checkbox" disabled /> I
-          reviewed this safe plan and want to apply it.</label
-        >
-        <div id="sync-result" class="state" role="status" aria-live="polite">
-          Preview <code>loadout.json</code> before applying anything.
-        </div>
-      </section>
-
-      <section data-screen="home" aria-labelledby="health-heading">
-        <div class="section-title">
-          <h2 id="health-heading">Health</h2>
-          <span id="health-label"></span>
-        </div>
-        <div
-          id="health"
-          class="state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Checking setup health…
-        </div>
-      </section>
-
-      <section id="updates" data-screen aria-labelledby="updates-heading">
-        <div class="section-title">
-          <h2 id="updates-heading">Updates</h2>
-          <span id="updates-count"></span>
-        </div>
-        <div
-          id="updates-list"
-          class="state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Checking installed packages…
-        </div>
-      </section>
-
-      <section data-screen="home" aria-labelledby="recommendations-heading">
-        <div class="section-title">
-          <h2 id="recommendations-heading">Rule-based project suggestions</h2>
-          <span id="project-signals"></span>
-        </div>
-        <div
-          id="recommendations"
-          class="grid state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Reading local project signals…
-        </div>
-      </section>
-
-      <section data-screen="home" aria-labelledby="profiles-heading">
-        <div class="section-title">
-          <h2 id="profiles-heading">Loadout policy profiles</h2>
-          <span>Preview only</span>
-        </div>
-        <div
-          id="profiles"
-          class="grid state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Loading profiles…
-        </div>
-      </section>
-
-      <section id="discover" data-screen aria-labelledby="catalog-heading">
-        <div class="section-title">
-          <h2 id="catalog-heading">Discover packages</h2>
-          <span id="catalog-count"></span>
-        </div>
-        <p class="muted">
-          Browse verified catalog records already available in this local
-          checkout. Package details are read-only; add a package to
-          <code>loadout.json</code>, then preview it before any write.
-        </p>
-        <div
-          class="catalog-filters"
-          role="search"
-          aria-label="Filter catalog packages"
-        >
-          <label for="catalog-search"
-            >Search
-            <input
-              id="catalog-search"
-              type="search"
-              autocomplete="off"
-              placeholder="Name, category, or repository"
-          /></label>
-          <label for="catalog-tier"
-            >Trust tier
-            <select id="catalog-tier">
-              <option value="">All tiers</option>
-              <option value="official">Official</option>
-              <option value="stable">Stable</option>
-              <option value="trending">Trending</option>
-              <option value="community">Community</option>
-            </select></label
-          >
-          <label for="catalog-category"
-            >Outcome
-            <select id="catalog-category">
-              <option value="">All outcomes</option>
-            </select></label
-          >
-        </div>
-        <div
-          id="catalog"
-          class="grid state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Loading catalog…
-        </div>
-      </section>
-
-      <section data-screen="discover" aria-labelledby="registry-heading">
-        <div class="section-title">
-          <h2 id="registry-heading">Local registry</h2>
-          <span id="registry-count"></span>
-        </div>
-        <div
-          id="registry"
-          class="grid state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Loading locally published packages…
-        </div>
-      </section>
-
-      <section id="installed" data-screen aria-labelledby="installed-heading">
-        <div class="section-title">
-          <h2 id="installed-heading">Installed packages</h2>
-          <span id="installed-count"></span>
-        </div>
-        <p id="last-snapshot" class="muted"></p>
-        <div
-          id="installed-list"
-          class="grid state"
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-        >
-          Reading managed package state…
-        </div>
-      </section>
-
-      <footer>
-        Dashboard mutations require a private session token, an explicit
-        preview, and acknowledgement. Risky plans remain CLI-only.
-      </footer>
-    </main>
-    <script type="module" src="/app.js"></script>
-  </body>
-</html>

package/dashboard/styles.css

@@ -1,384 +0,0 @@
-:root {
-  color-scheme: dark;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-  background: #101114;
-  color: #f4f4f5;
-}
-body {
-  margin: 0;
-  line-height: 1.5;
-}
-main {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 64px 24px;
-}
-header {
-  margin-bottom: 44px;
-}
-.eyebrow {
-  color: #a78bfa;
-  letter-spacing: 0.18em;
-  font-size: 12px;
-  font-weight: 700;
-}
-h1 {
-  font-size: clamp(2.3rem, 7vw, 5rem);
-  line-height: 0.98;
-  max-width: 720px;
-  margin: 12px 0;
-}
-.subhead {
-  color: #a1a1aa;
-  font-size: 18px;
-}
-h2 {
-  font-size: 24px;
-}
-.dashboard-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 24px;
-}
-.dashboard-nav a {
-  border: 1px solid #3f3f46;
-  border-radius: 999px;
-  color: #d4d4d8;
-  padding: 7px 12px;
-  text-decoration: none;
-}
-.dashboard-nav a[aria-current="page"] {
-  border-color: #8b5cf6;
-  background: #2e1065;
-  color: #ede9fe;
-}
-.dashboard-nav a:focus-visible {
-  outline: 3px solid #c4b5fd;
-  outline-offset: 2px;
-}
-.skip-link {
-  position: fixed;
-  z-index: 10;
-  top: 12px;
-  left: 12px;
-  transform: translateY(-160%);
-  border-radius: 8px;
-  background: #f4f4f5;
-  color: #18181b;
-  padding: 8px 12px;
-  font-weight: 700;
-  text-decoration: none;
-}
-.skip-link:focus {
-  transform: translateY(0);
-  outline: 3px solid #c4b5fd;
-  outline-offset: 2px;
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-.section-title {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-}
-.section-title span,
-small,
-.muted {
-  color: #b4b4bc;
-}
-.state {
-  border: 1px solid #27272a;
-  border-radius: 14px;
-  padding: 18px;
-  color: #a1a1aa;
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.success {
-  border-color: #14532d;
-  color: #bbf7d0;
-}
-.error {
-  border-color: #7f1d1d;
-  color: #fecaca;
-}
-.attention {
-  border-color: #854d0e;
-  color: #fef3c7;
-}
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 14px;
-}
-section[hidden] {
-  display: none;
-}
-article {
-  border: 1px solid #27272a;
-  border-radius: 14px;
-  padding: 18px;
-  background: #18181b;
-}
-article h3 {
-  margin: 0 0 8px;
-}
-article p {
-  min-height: 42px;
-  color: #d4d4d8;
-  line-height: 1.4;
-}
-small {
-  font-size: 12px;
-}
-.updates-grid {
-  display: grid;
-  gap: 12px;
-}
-.update-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.card-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.update-heading h3 {
-  margin: 0;
-}
-.badge {
-  border-radius: 999px;
-  padding: 4px 9px;
-  font-size: 11px;
-  color: #d4d4d8;
-  background: #27272a;
-}
-.badge.official {
-  background: #164e63;
-  color: #cffafe;
-}
-.badge.stable,
-.badge.native {
-  background: #14532d;
-  color: #bbf7d0;
-}
-.badge.trending,
-.badge.adapted {
-  background: #713f12;
-  color: #fef3c7;
-}
-.badge.community,
-.badge.unsupported {
-  background: #3f3f46;
-  color: #e4e4e7;
-}
-.update-available {
-  border-color: #854d0e;
-}
-.update-available .badge {
-  color: #fef3c7;
-  background: #713f12;
-}
-.up-to-date .badge {
-  color: #bbf7d0;
-  background: #14532d;
-}
-.error-text {
-  color: #fecaca !important;
-  min-height: auto;
-}
-details {
-  margin-top: 10px;
-  color: #d4d4d8;
-}
-summary {
-  cursor: pointer;
-}
-summary:focus-visible {
-  outline: 3px solid #c4b5fd;
-  outline-offset: 3px;
-  border-radius: 4px;
-}
-li {
-  margin: 5px 0;
-}
-dl {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 6px 12px;
-  margin: 12px 0;
-}
-dt {
-  color: #a1a1aa;
-}
-dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-.safety {
-  border-left: 3px solid #f59e0b;
-  padding-left: 10px;
-}
-.health-list {
-  border: 1px solid #27272a;
-  border-radius: 14px;
-  padding: 18px;
-}
-.health-list p {
-  margin: 10px 0 0;
-  color: #d4d4d8;
-}
-.metric-row {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.metric-row strong {
-  font-size: 24px;
-}
-.metric-row span {
-  color: #a1a1aa;
-  margin-right: 14px;
-}
-.finding-level {
-  display: inline-block;
-  min-width: 58px;
-  color: #a1a1aa;
-  text-transform: uppercase;
-  font-size: 10px;
-  letter-spacing: 0.08em;
-}
-section {
-  margin-top: 36px;
-}
-footer {
-  margin-top: 52px;
-  padding-top: 18px;
-  border-top: 1px solid #27272a;
-  color: #71717a;
-  font-size: 13px;
-}
-.action-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-.refresh-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 20px;
-}
-.refresh-row .muted {
-  max-width: 560px;
-  font-size: 13px;
-}
-.catalog-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin: 12px 0 16px;
-}
-.catalog-filters label {
-  display: grid;
-  gap: 5px;
-  color: #d4d4d8;
-  font-size: 13px;
-}
-input[type="search"],
-select {
-  border: 1px solid #3f3f46;
-  border-radius: 8px;
-  background: #18181b;
-  color: #f4f4f5;
-  font: inherit;
-  min-height: 38px;
-  padding: 0 10px;
-}
-input[type="search"] {
-  min-width: min(300px, 75vw);
-}
-.approval-control {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin: 14px 0;
-  color: #d4d4d8;
-}
-.approval-control input {
-  width: 18px;
-  height: 18px;
-  margin-top: 2px;
-  accent-color: #8b5cf6;
-}
-button {
-  appearance: none;
-  border: 1px solid #7c3aed;
-  border-radius: 10px;
-  background: #7c3aed;
-  color: white;
-  padding: 10px 14px;
-  font: inherit;
-  font-weight: 650;
-  cursor: pointer;
-}
-button.secondary {
-  background: transparent;
-  color: #d4d4d8;
-  border-color: #3f3f46;
-}
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-button:focus-visible,
-input:focus-visible {
-  outline: 3px solid #c4b5fd;
-  outline-offset: 2px;
-}
-code {
-  color: #c4b5fd;
-}
-@media (max-width: 560px) {
-  main {
-    padding: 42px 16px;
-  }
-  .section-title {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .section-title h2 {
-    margin-bottom: 0;
-  }
-  .refresh-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .catalog-filters label,
-  input[type="search"],
-  select {
-    width: 100%;
-  }
-  .action-bar > button {
-    flex: 1 1 180px;
-  }
-}