@bongos/core 1.19.299 → 1.19.301

package/modules/hall-ui/public/idea.css

@@ -0,0 +1,89 @@
+/* modules/hall-ui/public/idea.css — the idea-detail page (task 1002929 / R153
+   of goal 1000062).
+
+   Promoted out of an inline <style> because tests/hall_audit.mjs budgets an inline
+   block at 15 lines and this is ~60: past that the documented pattern (task 2176)
+   is a per-page stylesheet. The exceptions in that budget map are grandfathered or
+   deliberate; a brand-new page has no business claiming one.
+
+   Built on the hall's tokens. No --line/--panel: neither is defined in style.css,
+   so a fallback is all you would ever get and both assume a dark ground the hall
+   does not have by default (--bg is #f5f6f8). */
+
+/* Page-local, like task.html (task 751) — this page adds a handful of shapes
+   and reuses the hall's tokens for everything else. No --line/--panel here:
+   neither is defined in style.css, so a fallback is all you would ever get
+   and both assume a dark ground the hall does not have by default. */
+
+.idea-detail__back { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 10px; }
+.idea-detail__back:hover { color: var(--ink); text-decoration: underline; }
+
+/* The grade is the first thing to read: it decides what the rest of the page
+   even contains. Three states, distinguished by colour AND by word — a badge
+   that only differs by hue is unreadable to a chunk of readers. */
+.ig-grade {
+  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
+  border-radius: 999px; font-size: 12px; font-weight: 600;
+  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
+}
+.ig-grade--full  { background: var(--ok-weak);     color: var(--ok);          border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
+.ig-grade--spark { background: var(--warn-weak);   color: var(--warn);        border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
+.ig-grade--quick { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
+
+.ig-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 4px; }
+.ig-title { margin: 0; font-size: 1.15rem; text-wrap: balance; }
+
+.ig-meta {
+  font-size: 13px; color: var(--ink-soft); margin: 0 0 16px;
+  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
+}
+.ig-meta strong { color: var(--ink); font-weight: 600; }
+
+/* Attribution is its own block, not a line in the meta run: on a developed
+   idea it carries TWO people and the whole point of R146 was that both
+   survive. Burying that in a comma list is how one of them gets lost. */
+.ig-credit {
+  display: grid; gap: 6px;
+  padding: 12px 14px; margin: 0 0 18px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface-2); font-size: 13px;
+}
+.ig-credit__row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
+.ig-credit__who { color: var(--ink); font-weight: 600; }
+.ig-credit__role { color: var(--ink-faint); }
+
+/* The five answers, laid out to be READ: one column, generous leading, a
+   measure that stops around 70 characters. */
+.ig-answers { display: grid; gap: 18px; margin: 4px 0 0; }
+.ig-answer__q { margin: 0 0 4px; font-size: 0.92rem; font-weight: 600; }
+.ig-answer__a { margin: 0; max-width: 70ch; line-height: 1.65; white-space: pre-wrap; }
+.ig-answer__a[data-empty="1"] { color: var(--ink-faint); font-style: italic; }
+
+.ig-score { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
+.ig-score__track { width: 140px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
+.ig-score__fill { height: 100%; border-radius: 4px; background: var(--accent); }
+.ig-score__fill[data-band="full"] { background: var(--ok); }
+.ig-score__fill[data-band="part"] { background: var(--warn); }
+.ig-score__fill[data-band="thin"] { background: var(--danger); }
+.ig-score__n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
+
+.ig-body { max-width: 70ch; line-height: 1.65; white-space: pre-wrap; margin: 4px 0 0; }
+.ig-empty { color: var(--ink-faint); font-size: 0.9rem; }
+.ig-note { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.55; margin: 14px 0 0; }
+.ig-sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
+.ig-sub__h { margin: 0 0 8px; font-size: 0.95rem; }
+
+/* ---- the mark control (task 1002930 / R154) -----------------------------
+   Author-only, and rendered as its own block rather than a button in a toolbar:
+   offering your idea up for someone else to develop is a decision, and the one
+   sentence explaining what it means to you is the part that makes it one. */
+.ig-mark {
+  margin-top: 20px;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.ig-mark__lede { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); max-width: 62ch; line-height: 1.55; }
+.ig-mark__err { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
+.ig-mark__err:empty { display: none; }

package/modules/hall-ui/public/idea.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Idea — {{worldName}}</title>
+  <meta name="description" content="One idea, read end to end: its grade, its five answers, how complete they are, who had the thought and who developed it.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/idea.css">
+</head>
+<body data-page="idea" data-page-title="Idea">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+      <div class="page-head">
+        <!-- This page is deliberately not in the nav (it is always reached from a
+             link), so a deep-linked visitor needs a way back before the body loads
+             — the task.html precedent. -->
+        <a class="idea-detail__back" href="/ideas">← Back to Ideas</a>
+        <p class="page-head__sub" id="idea-sub">Loading idea…</p>
+      </div>
+
+      <main>
+        <section class="scroll" id="idea-scroll" aria-labelledby="idea-h">
+          <div id="idea-body">
+            <p class="deeplink-card__title" id="idea-h">Loading…</p>
+          </div>
+        </section>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/dom-utils.js?v=2026-06-23-contrib" defer></script>
+<!-- task-detail.js still owns the #/idea/N and #/blocker/N overlay, so a ref
+     written inside an idea's own prose keeps resolving from this page. -->
+<script src="/builders/task-detail.js?v=2026-07-03-taskdetail2" defer></script>
+<script src="/builders/brand-apply.js?v=2026-06-19-r56" defer></script>
+<script src="/builders/idea.js?v=2026-08-22-r153" defer></script>
+</body>
+</html>

package/modules/hall-ui/public/idea.js

@@ -0,0 +1,289 @@
+// modules/hall-ui/public/idea.js — the idea-detail PAGE (/idea/:id).
+// Task 1002929 / BV1.R153 of goal 1000062 (three grades of idea).
+//
+// A real page rather than a wider modal, following task 751: that task replaced
+// the #/task/N overlay with /task/:id so a record got a shareable URL and working
+// back/forward. A Full Idea is five prose answers — the thing an overlay is worst
+// at — so it earns the same treatment.
+//
+// THE OVERLAY IS NOT REPLACED. task-detail.js keeps owning #/idea/N, because ~320
+// of its ~650 lines are the Metic+ triage panel (promote → POST /tasks, merge,
+// discard, with goal hints and version pickers). Moving that machinery is its own
+// task; breaking a shipped triage flow to make a read prettier would be a bad
+// trade. So the overlay stays the fast peek and links here, and this page stays a
+// READ — the summary→detail relationship the hall already has between the Work
+// board and /task/:id.
+//
+// WHAT THE GRADE DECIDES. The grade is not decoration on this page, it selects
+// what the page contains:
+//   full  → the five answers, each under its own question, plus the score
+//   spark → the body, plus "someone is invited to develop this"
+//   quick → the body, and NOTHING about the five fields
+// The done-when names that last case explicitly: a quick idea must render with no
+// empty five-field skeleton. Five headings over five dashes is not an empty
+// state, it is a page telling a builder they did something wrong by filing a
+// quick idea — which is the opposite of what a quick idea is for.
+//
+// The five QUESTIONS come from GET /inbox/template, not from this file, for the
+// same reason the composer's do (R152): the labels live in the R141 declaration,
+// and a copy here would silently ignore a per-project template.
+//
+// THE MARK CONTROL (task 1002930 / R154) is the one WRITE on this page, and it is
+// AUTHOR-ONLY — a done-when, and the server enforces it regardless (R144 checks
+// captured_by and no rank overrides it). Hiding it from a non-author is therefore
+// cosmetic, exactly like the hall's nav gates: the wall is the route. It renders
+// only on an OPEN quick-or-spark idea, because those are the only states R144
+// accepts — showing a button that is guaranteed to 409 teaches the rule wrong.
+
+(() => {
+  'use strict';
+
+  const API = '/api/gds';
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const { escapeHtml, $, fmtDate } = window.OTB;
+
+  const ideaId = () => {
+    const m = /\/idea\/(\d+)/.exec(location.pathname);
+    return m ? m[1] : null;
+  };
+
+  const hallBase = () => (location.hostname.startsWith('builders.') ? '' : '/builders');
+
+  // ---------------------------------------------------------------------------
+  // pieces
+  // ---------------------------------------------------------------------------
+
+  // Colour AND word. A badge distinguished only by hue tells a colour-blind
+  // reader nothing, and this badge decides how to read the whole page.
+  const GRADE_WORD = { full: 'Full Idea', spark: 'Big Idea Spark', quick: 'Quick idea' };
+
+  function gradeBadge(grade) {
+    const g = GRADE_WORD[grade] ? grade : 'quick';
+    return `<span class="ig-grade ig-grade--${escapeHtml(g)}">${escapeHtml(GRADE_WORD[g])}</span>`;
+  }
+
+  function scoreRow(score) {
+    if (!Number.isInteger(score)) {
+      // A Full Idea with no score is a real state (R142 returns null for
+      // anything it cannot score, and that is stored as-is). Say so rather than
+      // drawing an empty bar that reads as zero.
+      return '<p class="ig-empty">Not scored.</p>';
+    }
+    const band = score >= 80 ? 'full' : score >= 40 ? 'part' : 'thin';
+    return `
+      <div class="ig-score">
+        <span class="ig-score__track"><span class="ig-score__fill" data-band="${band}" style="width:${score}%"></span></span>
+        <span class="ig-score__n">${score}/100 complete</span>
+      </div>`;
+  }
+
+  // Who had the thought, and who wrote it out. Two rows when they are two people
+  // — R146's whole point is that the author survives being developed by someone
+  // else, so this never collapses them into one line.
+  function credit(idea) {
+    const who = (login, id) => (login ? `@${escapeHtml(login)}` : (id ? `builder ${escapeHtml(String(id))}` : 'someone'));
+    const rows = [];
+    rows.push(`
+      <div class="ig-credit__row">
+        <span class="ig-credit__who">${who(idea.filed_by_login, idea.captured_by)}</span>
+        <span class="ig-credit__role">had the thought${idea.captured_at ? ` · ${escapeHtml(fmtDate(idea.captured_at))}` : ''}</span>
+      </div>`);
+    if (idea.developed_by) {
+      const same = String(idea.developed_by) === String(idea.captured_by);
+      rows.push(`
+        <div class="ig-credit__row">
+          <span class="ig-credit__who">${who(idea.developed_by_login, idea.developed_by)}</span>
+          <span class="ig-credit__role">${same ? 'developed it themselves' : 'developed it into a Full Idea'}${idea.developed_at ? ` · ${escapeHtml(fmtDate(idea.developed_at))}` : ''}</span>
+        </div>`);
+    }
+    return `<div class="ig-credit">${rows.join('')}</div>`;
+  }
+
+  function prose(text) {
+    const s = String(text == null ? '' : text).trim();
+    return s
+      ? `<p class="ig-body">${escapeHtml(s)}</p>`
+      : '<p class="ig-body" data-empty="1">No description.</p>';
+  }
+
+  // The five answers, in TEMPLATE order, each under its own question. Missing
+  // answers are marked rather than hidden: on a Full Idea a blank answer is
+  // information (it is why the score is what it is).
+  function answers(idea, template) {
+    const values = (idea.field_values && typeof idea.field_values === 'object') ? idea.field_values : {};
+    return `<div class="ig-answers">${template.fields.map((f) => {
+      const v = String(values[f.key] == null ? '' : values[f.key]).trim();
+      return `
+        <div class="ig-answer">
+          <p class="ig-answer__q">${escapeHtml(f.label)}</p>
+          <p class="ig-answer__a"${v ? '' : ' data-empty="1"'}>${v ? escapeHtml(v) : 'Not answered.'}</p>
+        </div>`;
+    }).join('')}</div>`;
+  }
+
+  // ---- the R154 mark control -------------------------------------------------
+
+  // Rendered only when the viewer IS the author. The server re-checks; this is
+  // the same cosmetic-gate posture as shell.js's nav.
+  function markControl(idea, viewer) {
+    const isAuthor = viewer && idea.captured_by != null
+      && String(viewer.id) === String(idea.captured_by);
+    if (!isAuthor) return '';
+    if (idea.status !== 'open') return '';
+    if (idea.grade === 'full') return '';
+    const sparked = idea.grade === 'spark';
+    return `
+      <div class="ig-mark">
+        <p class="ig-mark__lede">${sparked
+          ? 'You have offered this up for development. Anyone can turn it into a Full Idea; you keep the credit for having had it.'
+          : 'Not sure you have the full picture? Offer it up and someone else can develop it into a Full Idea — you keep the credit for the thought.'}</p>
+        <button type="button" class="btn${sparked ? ' btn--ghost' : ''}" id="ig-mark-btn">${sparked ? 'Withdraw the spark mark' : 'Mark as a Big Idea Spark'}</button>
+        <p class="ig-mark__err" id="ig-mark-err" role="alert"></p>
+      </div>`;
+  }
+
+  async function toggleMark(idea) {
+    const btn = $('#ig-mark-btn');
+    const err = $('#ig-mark-err');
+    if (!btn) return;
+    // Which direction to go is read from the IDEA, not from a data- attribute on
+    // the button. The idea is already in hand, so a DOM round-trip would be a
+    // second copy of the same fact — and the one that goes stale first, since the
+    // grade is what the server actually returns.
+    const sparked = idea.grade === 'spark';
+    btn.disabled = true;
+    err.textContent = '';
+    const r = sparked
+      ? await api.inbox.deleteInboxIdSpark({ id: idea.id })
+      : await api.inbox.postInboxIdSpark({ id: idea.id, body: {} });
+    if (!r.ok) {
+      btn.disabled = false;
+      // The server's own words, per code — a generic failure here would hide the
+      // one thing worth knowing (that the rule is about authorship, or state).
+      const e = r.data && r.data.error;
+      const code = e && typeof e === 'object' ? e.code : e;
+      err.textContent = code === 'not_your_idea'
+        ? 'Only the builder who filed this idea can offer it up for development.'
+        : code === 'not_a_quick_idea'
+          ? 'This is already a Full Idea — there is nothing to hand off.'
+          : code === 'idea_not_open'
+            ? 'This idea is no longer open, so it cannot be marked.'
+            : `Could not change the mark (${r.status}).`;
+      return;
+    }
+    // Re-render from what the server returned rather than toggling a local flag:
+    // the response is the authority on the new grade, and R144 is idempotent so a
+    // no-op comes back as the same truth.
+    const next = (r.data && r.data.idea) ? r.data.idea : idea;
+    window.OTB.toast(next.grade === 'spark' ? 'Offered up for development.' : 'Mark withdrawn.');
+    boot({ ...idea, ...next });
+  }
+
+  function statusLine(idea) {
+    const bits = [];
+    bits.push(`<span><strong>${escapeHtml(idea.status || 'open')}</strong></span>`);
+    if (idea.kind) bits.push(`<span>${escapeHtml(idea.kind)}</span>`);
+    if (idea.promoted_to_task_id) {
+      bits.push(`<span>became <a href="${hallBase()}/task/${encodeURIComponent(idea.promoted_to_task_id)}">task ${escapeHtml(String(idea.promoted_to_task_id))}</a></span>`);
+    }
+    if (idea.merged_into_idea_id) {
+      bits.push(`<span>merged into <a href="${hallBase()}/idea/${encodeURIComponent(idea.merged_into_idea_id)}">idea ${escapeHtml(String(idea.merged_into_idea_id))}</a></span>`);
+    }
+    return `<p class="ig-meta">${bits.join('')}</p>`;
+  }
+
+  // ---------------------------------------------------------------------------
+  // render
+  // ---------------------------------------------------------------------------
+
+  // Cached across a re-render: the template and the viewer do not change when the
+  // grade does, and re-fetching them on every mark toggle would be two needless
+  // requests plus a visible flicker.
+  const state = { template: null, viewer: null };
+
+  function render(idea, template, viewer) {
+    const grade = GRADE_WORD[idea.grade] ? idea.grade : 'quick';
+    const parts = [];
+
+    parts.push(`<div class="ig-head">${gradeBadge(grade)}</div>`);
+    parts.push(`<h1 class="ig-title" id="idea-h">${escapeHtml(idea.title || `Idea ${idea.id}`)}</h1>`);
+    parts.push(statusLine(idea));
+    parts.push(credit(idea));
+
+    if (grade === 'full') {
+      parts.push(scoreRow(idea.completeness_score));
+      if (template) {
+        parts.push(answers(idea, template));
+      } else {
+        // The template read failed. Show the raw answers rather than nothing —
+        // but WITHOUT inventing an order, since jsonb key order is not the
+        // template's order and pretending otherwise would misreport the idea.
+        parts.push('<p class="ig-empty">Could not load the question labels; showing the answers as stored.</p>');
+        parts.push(`<div class="ig-answers">${Object.keys(idea.field_values || {}).map((k) =>
+          `<div class="ig-answer"><p class="ig-answer__q">${escapeHtml(k)}</p><p class="ig-answer__a">${escapeHtml(String(idea.field_values[k] || ''))}</p></div>`
+        ).join('')}</div>`);
+      }
+      // A Full Idea's body_md is the original quick-idea text it grew out of, when
+      // it had one. Shown after the answers, subordinate to them.
+      if (String(idea.body_md || '').trim()) {
+        parts.push(`<div class="ig-sub"><h2 class="ig-sub__h">As first filed</h2>${prose(idea.body_md)}</div>`);
+      }
+    } else {
+      // quick AND spark: the body, and NOT a five-field skeleton.
+      parts.push(prose(idea.body_md));
+      if (grade === 'spark') {
+        parts.push(`<p class="ig-note">Its author marked this as needing development — anyone can turn it into a Full Idea, and they keep the credit for having had it. <a href="${hallBase()}/ideas">Write one</a>.</p>`);
+      } else {
+        parts.push('<p class="ig-note">A quick idea is a thought filed fast. It is not an unfinished Full Idea — only its author can offer it up for development.</p>');
+      }
+    }
+
+    parts.push(markControl(idea, viewer));
+
+    $('#idea-body').innerHTML = parts.join('');
+    $('#idea-sub').textContent = `Idea ${idea.id}`;
+    document.title = `${idea.title || `Idea ${idea.id}`} — idea ${idea.id}`;
+  }
+
+  // render + wire. Separate from render() so the mark toggle can re-render from
+  // the server's response without re-fetching anything.
+  function boot(idea) {
+    render(idea, state.template, state.viewer);
+    const btn = $('#ig-mark-btn');
+    if (btn) btn.addEventListener('click', () => { toggleMark(idea); });
+  }
+
+  function fail(msg) {
+    $('#idea-body').innerHTML = `<p class="deeplink-card__title" id="idea-h">${escapeHtml(msg)}</p>`;
+    $('#idea-sub').textContent = '';
+  }
+
+  async function main() {
+    const id = ideaId();
+    if (!id) return fail('No idea id in the address.');
+
+    const r = await api.inbox.getInboxId({ id });
+    if (r.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
+    if (r.status === 404) return fail(`No idea ${id}.`);
+    if (!r.ok || !r.data || !r.data.idea) return fail('Could not load this idea.');
+    const idea = r.data.idea;
+
+    // The labels are only needed for a Full Idea, so a quick idea costs one
+    // request for them, not two — and a template outage cannot stop a quick idea
+    // rendering.
+    if (idea.grade === 'full') {
+      const key = idea.template_key;
+      const t = await api.inbox.getInboxTemplate(key ? { query: { template_key: key } } : {});
+      if (t.ok && t.data && t.data.template) state.template = t.data.template;
+    }
+    // Who is looking — for the author-only mark control (R154). Best-effort: the
+    // page is a READ first, so a /me hiccup must hide the button, never blank the
+    // idea. The route is the wall regardless.
+    const me = await api.me.getMe({});
+    if (me.ok && me.data && me.data.builder) state.viewer = me.data.builder;
+
+    boot(idea);
+  }
+
+  main();
+})();

package/modules/hall-ui/public/ideas.css

@@ -118,3 +118,30 @@
 .fi-mrow__fill { display: block; height: 100%; width: 0; border-radius: 0.2rem; background: var(--accent); transition: width 0.18s ease-out; }
 
 .fi-meter__note { margin: 0.9rem 0 0; font-size: 0.76rem; opacity: 0.65; line-height: 1.5; }
+
+/* ---- the spark queue + develop mode (task 1002930 / R154) --------------- */
+
+.fi-queue { display: grid; gap: 10px; }
+.fi-spark {
+  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
+  padding: 12px 14px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.fi-spark__title { margin: 0; font-weight: 600; font-size: 0.92rem; flex: 1 1 20rem; }
+.fi-spark__title a { color: inherit; }
+.fi-spark__who { font-size: 0.8rem; color: var(--ink-faint); }
+.fi-spark__go { font-size: 0.84rem; white-space: nowrap; }
+.fi-queue-empty { font-size: 0.88rem; color: var(--ink-faint); }
+
+/* The spark being developed. Bordered on the leading edge rather than boxed: it
+   is context for the fields below it, not a competing card. */
+.fi-develop {
+  margin: 0 0 6px;
+  padding: 2px 0 2px 14px;
+  border-left: 3px solid var(--warn);
+}
+.fi-develop__label { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warn); }
+.fi-develop__title { margin: 4px 0 0; font-weight: 600; }
+.fi-develop__body { margin: 4px 0 0; max-width: 70ch; line-height: 1.6; white-space: pre-wrap; color: var(--ink-soft); font-size: 0.9rem; }
+.fi-develop__who { margin: 6px 0 0; font-size: 0.8rem; color: var(--ink-faint); }

package/modules/hall-ui/public/ideas.html

@@ -23,11 +23,22 @@
       <div class="page-head"><p class="page-head__sub" id="fi-sub">Loading the idea template…</p></div>
 
       <main>
-        <!-- The composer. ONE section, deliberately: this page's whole job is
-             "write the thing down", and the second panel that would explain the
-             grades belongs in the Primer, not above the field you came to fill in.
-             The idea detail view (R153) and the spark queue (R154) are separate
-             tasks and will add their own sections here. -->
+        <!-- The spark queue (task 1002930 / R154). ABOVE the composer, because
+             "what is already waiting" is the thing to scan before starting
+             something new — and because a queue nobody sees is not a pickup
+             surface. Collapsed to a single line when empty so it never pushes the
+             composer down the page for nothing. -->
+        <section class="scroll" id="fi-queue-scroll" aria-labelledby="fi-queue-h">
+          <h2 id="fi-queue-h" class="scroll__h">Waiting to be developed</h2>
+          <p class="scroll__lede">
+            Ideas whose author has said "I had the thought but not the full picture".
+            Anyone can develop one — the author keeps the credit for having had it,
+            and you are recorded as its developer.
+          </p>
+          <div id="fi-queue"><p class="fi-note">Loading…</p></div>
+        </section>
+
+        <!-- The composer. The idea detail view lives on its own page (R153). -->
         <section class="scroll" id="fi-compose-scroll" aria-labelledby="fi-compose-h">
           <h2 id="fi-compose-h" class="scroll__h">Write a Full Idea</h2>
           <p class="scroll__lede">
@@ -37,7 +48,18 @@
           </p>
 
           <form id="fi-form" novalidate>
-            <label class="fi-label" for="fi-title">
+            <!-- DEVELOP MODE (R154): when the composer was opened from a spark,
+                 this block carries the spark's own words and the title becomes a
+                 read-only fact rather than a field — developing an idea must not
+                 quietly rename it out from under its author. -->
+            <div class="fi-develop" id="fi-develop" hidden>
+              <p class="fi-develop__label">Developing a Big Idea Spark</p>
+              <p class="fi-develop__title" id="fi-develop-title"></p>
+              <p class="fi-develop__body" id="fi-develop-body"></p>
+              <p class="fi-develop__who" id="fi-develop-who"></p>
+            </div>
+
+            <label class="fi-label" for="fi-title" id="fi-title-label">
               Title
               <span class="fi-hint">One line. This is what the idea is called everywhere else.</span>
             </label>
@@ -90,6 +112,6 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
-<script src="/builders/ideas.js?v=2026-08-22-r152"></script>
+<script src="/builders/ideas.js?v=2026-08-22-r154"></script>
 </body>
 </html>