@floless/app 0.7.1 → 0.9.0

package/dist/web/app.css

@@ -987,6 +987,9 @@
     background: var(--accent-bright);
     box-shadow: 0 0 14px var(--accent-glow);
   }
+  /* A disabled action reads as inert — never a primary that looks clickable but isn't. */
+  .modal-actions button:disabled { opacity: 0.5; cursor: default; }
+  .modal-actions button.primary:disabled:hover { background: var(--accent); box-shadow: none; }
   .modal.library {
     width: 720px;
     max-height: 82vh;
@@ -2262,3 +2265,221 @@ body {
   .req-thumb { width: 46px; height: 46px; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); overflow: hidden; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s; }
   .req-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .req-thumb:hover { border-color: var(--accent-dim); }
+
+  /* ============================================================================
+   * Release notes — the click-to-open popover on the footer update pills, and the
+   * relaunch-surviving "what's new" panel after a floless.app self-update.
+   * Baseline tokens only (shadcn dark slate-blue): no new fonts/colours/aesthetics.
+   * The popover's upward shadow IS the elevation cue (no decorative arrow); change
+   * types are typeset, never coloured badges (only `.added` borrows --accent).
+   * ==========================================================================*/
+
+  /* ── Popover (shared by #app-update and #aware-update) ───────────────────── */
+  .relnotes-popover {
+    position: fixed;
+    width: 320px;
+    background: var(--surface);
+    border: 1px solid var(--border-strong);
+    border-radius: 8px;
+    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-strong);
+    z-index: 1000;
+    color: var(--text);
+    animation: relnotes-in 0.14s ease-out;
+  }
+  .relnotes-popover[hidden] { display: none; }
+  @keyframes relnotes-in {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .relnotes-header { padding: 16px 16px 0; }
+  .relnotes-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
+  .relnotes-summary { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
+  .relnotes-body {
+    padding: 12px 16px;
+    max-height: 260px;
+    overflow-y: auto;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+  }
+  .relnotes-actions { padding: 12px 16px; display: flex; gap: 8px; align-items: center; }
+
+  /* Typed change bullets — REUSED verbatim by the what's-new panel (one renderer). */
+  .relnotes-group { margin-bottom: 12px; }
+  .relnotes-group:last-child { margin-bottom: 0; }
+  .relnotes-type {
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-weight: 600;
+    color: var(--text-dim);
+    margin-bottom: 5px;
+  }
+  .relnotes-type.added { color: var(--accent); }
+  .relnotes-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
+  .relnotes-item {
+    position: relative;
+    font-size: 12px;
+    color: var(--text-muted);
+    line-height: 1.45;
+    padding-left: 12px;
+  }
+  .relnotes-item::before { content: "–"; position: absolute; left: 0; color: var(--text-dim); }
+
+  /* Skeleton — renders instantly while notes load; the action row is live beneath it. */
+  .relnotes-skel { display: flex; flex-direction: column; gap: 8px; }
+  .relnotes-skel-line {
+    height: 11px;
+    border-radius: 3px;
+    background: var(--surface-2);
+    position: relative;
+    overflow: hidden;
+  }
+  .relnotes-skel-line:nth-child(2) { width: 85%; }
+  .relnotes-skel-line:nth-child(3) { width: 70%; }
+  .relnotes-skel-line::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, var(--surface-3), transparent);
+    animation: relnotes-shimmer 1.3s ease-in-out infinite;
+  }
+  @keyframes relnotes-shimmer { to { transform: translateX(100%); } }
+  .relnotes-unavailable { font-size: 12px; color: var(--text-dim); font-style: italic; }
+
+  /* Action row — Update now reuses the modal .primary recipe; the changelog link is a ghost. */
+  .relnotes-update {
+    background: var(--accent);
+    color: #fff;
+    border: 1px solid var(--accent);
+    font-weight: 600;
+    padding: 7px 14px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background 0.15s, box-shadow 0.15s;
+  }
+  .relnotes-update:hover { background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow); }
+  .relnotes-update[disabled] { opacity: 0.6; cursor: default; }
+  .relnotes-update[disabled]:hover { background: var(--accent); box-shadow: none; }
+  .relnotes-changelog {
+    margin-left: auto;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-dim);
+    padding: 7px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+  }
+  .relnotes-changelog:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); }
+  .relnotes-update:focus-visible,
+  .relnotes-changelog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+  /* The AWARE version label becomes a notes affordance after an in-place upgrade. */
+  .aware-version.relnotes-reopen { cursor: pointer; }
+  .aware-version.relnotes-reopen:hover { color: var(--accent-bright); }
+
+  /* ── What's-new panel (floless.app post-update) ─────────────────────────────
+     A 4th grid row above the footer — NOT absolutely positioned. .has-whats-new
+     inserts an `auto` row + a full-width `whats-new` area between the body and footer. */
+  .app.has-whats-new {
+    grid-template-rows: 60px 1fr auto 44px;
+    grid-template-areas:
+      "header   header   header"
+      "chat     canvas   inspect"
+      "whats-new whats-new whats-new"
+      "footer   footer   footer";
+  }
+  .whats-new {
+    grid-area: whats-new;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    font-size: 12px;
+    padding: 0 18px;
+    overflow: hidden;
+  }
+  .whats-new[hidden] { display: none; }
+  .whats-new-summary { display: flex; align-items: center; gap: 10px; height: 44px; }
+  .whats-new-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--accent);
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  .whats-new-summary-text {
+    font-size: 12px;
+    color: var(--text-muted);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .whats-new-toggle {
+    flex-shrink: 0;
+    background: transparent;
+    border: 1px solid var(--border-strong);
+    color: var(--text-muted);
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+  }
+  .whats-new-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
+  .whats-new-link {
+    flex-shrink: 0;
+    color: var(--text-dim);
+    font-size: 11px;
+    text-decoration: none;
+    padding: 4px 6px;
+    border-radius: 4px;
+    transition: color 0.15s;
+  }
+  .whats-new-link:hover { color: var(--accent-bright); }
+  .whats-new-dismiss {
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    color: var(--text-dim);
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+  }
+  .whats-new-dismiss:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
+  .whats-new-toggle:focus-visible,
+  .whats-new-link:focus-visible,
+  .whats-new-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .whats-new-detail {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.18s ease-out;
+    overflow: hidden;
+  }
+  .whats-new-detail.open { grid-template-rows: 1fr; }
+  .whats-new-detail-inner { overflow: hidden; padding-bottom: 14px; }
+
+  /* Reduced motion — kill the popover entry, the skeleton shimmer, and the
+     what's-new expand transition; the surfaces still read via their static styling.
+     Mirrors the .rtn-fired-flash / node-running reduced-motion precedents above. */
+  @media (prefers-reduced-motion: reduce) {
+    .relnotes-popover { animation: none; }
+    .relnotes-skel-line::after { animation: none; }
+    .whats-new-detail { transition: none; }
+  }

package/dist/web/app.js

@@ -972,6 +972,7 @@ function handleMenuAction(action) {
     case 'find':         openFind(); break;
     case 'integrations': openIntegrations(); break;
     case 'routines': openRoutines(); break;
+    case 'report-issue': openReportIssue(); break;
   }
 }