feat(web): changes inbox grouped by run, with per-entry filter

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/src/theme.css

@@ -392,3 +392,84 @@ input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px;
   .alert { flex-direction: column; align-items: stretch; }
   .box form .two { grid-template-columns: 1fr; }
 }
+
+/* =====================================================================================
+   Task 18 screens: Changes, Sources, Log, Lists, Owned, Settings, About
+   ===================================================================================== */
+
+/* ---------- Load errors ---------- */
+.load-error { padding: 18px 0; color: var(--text-muted); display: grid; gap: 10px; justify-items: start; }
+.stale-banner {
+  display: flex; align-items: center; gap: 10px; justify-content: space-between;
+  background: #3a1d24; border: 1px solid #f8717144; color: #ffd4d4;
+  border-radius: var(--r-control); padding: 6px 6px 6px 12px; font-size: 0.8rem; margin: 0 0 12px;
+}
+.stale-banner .btn.ghost { color: #ffd4d4; }
+.stale-banner.in-list { margin: 4px 16px 8px; }
+
+/* ---------- Screen frame ---------- */
+.screen { height: 100%; overflow-y: auto; }
+.screen-inner { padding: 26px 32px 64px; max-width: 900px; }
+.screen-head { margin-bottom: 20px; }
+.screen-head h1 { font-size: 1.35rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.012em; text-wrap: balance; }
+.screen-head .lede { color: var(--text-muted); margin-top: 5px; max-width: 64ch; }
+.screen-head.with-action { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
+.section { margin-top: 30px; }
+.section > h2, .section-head h2 { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.005em; }
+.section > .hint, .section-head + .hint { margin: 4px 0 12px; max-width: 64ch; display: block; }
+.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
+.empty-state { padding: 34px 0 12px; max-width: 46ch; color: var(--text-muted); }
+.empty-state strong { display: block; color: var(--text); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
+.empty-state .btn { margin-top: 14px; }
+.filter-note { font-size: 0.84rem; color: var(--text-muted); margin: -6px 0 18px; }
+.filter-note b { color: var(--text); font-weight: 600; }
+.more-note { margin-top: 14px; }
+.btn.primary-soft { background: #6d5dfc33; color: #ded9ff; }
+.btn.primary-soft:hover:not(:disabled) { background: #6d5dfc55; }
+.btn.danger { color: #ffb4a8; }
+.btn.danger:hover:not(:disabled) { background: #4a1f2a; color: #ffd4d4; }
+.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 550; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--pill-text); white-space: nowrap; }
+.badge.ok::before, .badge.off::before, .badge.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.badge.ok { color: var(--ok); background: #34d39914; }
+.badge.off { color: var(--text-muted); }
+.badge.bad { color: #ffb4a8; background: #f8717114; }
+.secret-once {
+  margin-top: 12px; border: 1px solid #fbbf2455; background: #fbbf240d; border-radius: var(--r-control);
+  padding: 10px 12px; display: grid; gap: 8px;
+}
+.secret-once p { font-size: 0.8rem; color: var(--text-muted); }
+.secret-once .copy-row { display: flex; gap: 8px; align-items: center; }
+.secret-once code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; color: var(--rating); background: var(--surface-0); padding: 6px 9px; border-radius: 6px; }
+
+/* ---------- Changes ---------- */
+.run-group { margin-top: 26px; }
+.run-group:first-of-type { margin-top: 6px; }
+.run-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 0.78rem; font-weight: 500; color: var(--text-faint); margin-bottom: 8px; }
+.run-head .who { color: var(--text-muted); font-weight: 600; }
+.changes { list-style: none; display: grid; gap: 10px; }
+.change { background: var(--surface-2); border-radius: var(--r-box); padding: 13px 16px 14px; display: grid; gap: 8px; }
+.change.skeleton { height: 128px; }
+.change-skeleton { display: grid; gap: 10px; }
+.change-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.change .kind { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: #fdba74; }
+.change .kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
+.change-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--text-muted); }
+.change-title a, .change-title b { color: var(--text); font-weight: 600; }
+.change-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
+.change .when { flex: none; font-size: 0.74rem; color: var(--text-faint); }
+.change-msg { color: var(--warn-text); font-size: 0.86rem; }
+.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--surface-3); border-radius: var(--r-control); overflow: hidden; }
+.diff > div { background: #221e40; padding: 8px 12px; min-width: 0; }
+.diff dt { font-size: 0.72rem; color: var(--text-faint); font-weight: 600; margin-bottom: 2px; }
+.diff dd { font-size: 0.86rem; overflow-wrap: anywhere; }
+.diff .was dd { color: var(--text-muted); }
+.diff .now dd { color: var(--text); }
+.diff dd.stars { color: var(--rating); font-size: 0.8rem; }
+.change-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
+
+@media (max-width: 860px) {
+  .screen-inner { padding: 18px 16px 48px; }
+  .diff { grid-template-columns: 1fr; }
+  .change-top { flex-wrap: wrap; }
+  .change-title { white-space: normal; }
+}