fraim-framework 2.0.163 → 2.0.164

package/public/ai-hub/script.js

@@ -539,10 +539,18 @@ function stripReviewHandoffBlocks(text) {
     .trim();
 }
 
+function stripHubInjectedPromptBlocks(text) {
+  return String(text || '')
+    .replace(/(?:^|\n)\s*\[How to talk to me\][\s\S]*?(?=\n\s*\[[^\]\n]+\]|\n\s*#{1,6}\s|\n\s*[-*]\s|\n{2,}|$)/gi, '\n')
+    .replace(/(?:^|\n)\s*(?:[$/]fraim)\s+[a-z0-9-]+(?:\s*\[[^\]\n]*\])?[^\n]*(?=\n|$)/gi, '\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
 // R8: render markdown subset safely. HTML is escaped first.
 function formatEmployeeText(text) {
   if (!text) return '';
-  const visibleText = stripReviewHandoffBlocks(text);
+  const visibleText = stripHubInjectedPromptBlocks(stripReviewHandoffBlocks(text));
   if (!visibleText) return '';
   // 1. Escape HTML entities.
   let s = visibleText
@@ -2084,7 +2092,7 @@ function stripStubReference(text) {
 }
 
 function surfaceText(role, text, conv) {
-  const raw = stripStubReference(text);
+  const raw = stripHubInjectedPromptBlocks(stripStubReference(text));
   if (!raw) return '';
 
   if (role === 'manager') {
@@ -2207,20 +2215,13 @@ function ensureThreadMessageViewportObserver() {
 }
 
 function syncThreadMessageViewport() {
-  const panel = els['thread-panel'];
   const messages = els['messages'];
-  if (!panel || !messages || !panel.open) return;
-  const summary = panel.querySelector('summary');
-  const panelHeight = panel.clientHeight || panel.getBoundingClientRect().height || 0;
-  const summaryHeight = summary ? (summary.offsetHeight || summary.getBoundingClientRect().height || 0) : 0;
-  const available = Math.floor(panelHeight - summaryHeight - 2);
-  if (available > 0) {
-    messages.style.height = `${Math.max(120, available)}px`;
-    messages.style.maxHeight = `${Math.max(120, available)}px`;
-  } else {
-    messages.style.height = '';
-    messages.style.maxHeight = '';
-  }
+  if (!messages) return;
+  // Flex layout now owns the thread height: #thread-panel[open] grows to fill the
+  // available real estate and #messages (flex child, overflow-y:auto) scrolls
+  // internally. Clear any legacy inline sizing so CSS stays authoritative.
+  messages.style.height = '';
+  messages.style.maxHeight = '';
 }
 
 function scrollThreadAfterViewportSync(conv, runningShouldStickToBottom, shouldScrollForUpdate) {
@@ -2249,7 +2250,8 @@ function scrollThreadForReview(conv) {
     return;
   }
 
-  const target = [...nodes].reverse().find((node) =>
+  const completion = host.querySelector('#review-completion');
+  const target = completion || [...nodes].reverse().find((node) =>
     node.classList.contains('employee') || node.classList.contains('system')
   ) || nodes[nodes.length - 1];
 
@@ -2257,7 +2259,7 @@ function scrollThreadForReview(conv) {
   const targetRect = target.getBoundingClientRect();
   const currentTop = host.scrollTop;
   const targetTopInsideHost = currentTop + (targetRect.top - hostRect.top);
-  const reviewOffset = Math.max(24, host.clientHeight * 0.16);
+  const reviewOffset = completion ? 8 : Math.max(24, host.clientHeight * 0.16);
   const desiredTop = Math.max(0, targetTopInsideHost - reviewOffset);
   host.scrollTo({ top: desiredTop, behavior: 'smooth' });
 }
@@ -2513,6 +2515,25 @@ function artifactLabel(artifact) {
   return artifact.label || artifact.name || artifact.path || artifact.url || 'artifact';
 }
 
+function artifactBasename(artifact) {
+  const raw = artifact && (artifact.path || artifact.url || artifact.name || '');
+  const cleaned = String(raw || '').split(/[?#]/)[0];
+  return cleaned.split(/[\\/]/).filter(Boolean).pop() || '';
+}
+
+function artifactDisplayLabel(artifact) {
+  const label = artifactLabel(artifact);
+  const base = artifactBasename(artifact);
+  if (!base || label === base || String(label).includes(base)) return label;
+  return `${label} (${base})`;
+}
+
+function reviewArtifactSummary(handoff) {
+  const artifacts = handoff && Array.isArray(handoff.artifacts) ? handoff.artifacts : [];
+  if (!artifacts.length) return '';
+  return artifacts.map(artifactDisplayLabel).join('; ');
+}
+
 function artifactLocalPath(artifact) {
   if (!artifact) return '';
   const raw = artifact.path
@@ -2564,7 +2585,7 @@ function deriveFormatFromReviewHandoff(handoff) {
   const actions = artifacts.length > 0
     ? artifacts.map((artifact, index) => ({
         id: `review-artifact-${index}`,
-        label: artifacts.length === 1 ? `Review ${artifact.label}` : artifact.label,
+        label: artifactDisplayLabel(artifact),
         primary: index === 0,
         kind: artifactActionKind(artifact),
         artifact,
@@ -2628,7 +2649,7 @@ function deriveDeliverableFormat(conv) {
       key: 'markdown',
       label: artifactName || artifactLabel(artifact),
       actions: [
-        { id: 'download-docx', label: 'Download as .docx', primary: true, kind: 'export', artifact },
+        { id: 'open-artifact', label: artifactDisplayLabel(artifact), primary: true, kind: 'doc', artifact },
         { id: 'inline-feedback', label: 'Type feedback inline', primary: false, kind: 'feedback', artifact },
       ],
     };
@@ -2649,7 +2670,7 @@ function deriveDeliverableFormat(conv) {
 // read-side already gives us and degrade gracefully when a field is unknown.
 function stripMarkdownForDisplay(text) {
   if (!text) return text;
-  return stripReviewHandoffBlocks(text)
+  return stripHubInjectedPromptBlocks(stripReviewHandoffBlocks(text))
     .replace(/\*\*(.+?)\*\*/g, '$1')
     .replace(/\*(.+?)\*/g, '$1')
     .replace(/^---+$/gm, '')
@@ -2678,8 +2699,10 @@ function buildReviewCardRows(conv, fmt) {
         : `Completed "${conv.title || conv.jobTitle || 'the assigned work'}".`;
     return [
       { k: 'What changed', v: whatChanged },
-      reliableLabel
-        ? { k: 'Files updated', v: `${fmt.label}` }
+      handoff && handoff.reviewTarget && handoff.reviewTarget.type === 'artifact_set'
+        ? { k: 'Files updated', v: reviewArtifactSummary(handoff) || `${fmt.label}` }
+        : reliableLabel
+          ? { k: 'Files updated', v: `${fmt.label}` }
         : { k: 'Where to look', v: 'Open the updated files in your project (the Brief section shows the project context & rules) to review.' },
       { k: 'What to do next', v: 'Approve, or type what to change in the Coach box below.' },
     ];
@@ -2687,15 +2710,27 @@ function buildReviewCardRows(conv, fmt) {
   const whatIDid = lastEmployee
     ? clampSummaryText(stripMarkdownForDisplay(lastEmployee), 220)
     : `Completed “${conv.title || conv.jobTitle || 'the assigned work'}”.`;
+  if (handoff && handoff.reviewTarget && handoff.reviewTarget.type === 'artifact_set') {
+    return [
+      { k: 'Files to review', v: reviewArtifactSummary(handoff) || `${fmt.label}` },
+      { k: 'What I need', v: 'Your review — approve, or tell me what to sharpen.' },
+    ];
+  }
   const rows = [{ k: 'What I did', v: whatIDid }];
-  if (reliableLabel) rows.push({ k: 'Deliverable', v: `${fmt.label}` });
+  if (reliableLabel) {
+    rows.push({ k: 'Deliverable', v: `${fmt.label}` });
+  }
   rows.push({ k: 'What I need', v: 'Your review — approve, or tell me what to sharpen.' });
   return rows;
 }
 
-// The completion card lives as the LAST child of #messages so the thread
-// panel's flex/scroll geometry is unchanged (it scrolls with the thread, like
-// any employee turn). Find-or-create keeps it idempotent across poll ticks.
+// The completion card is a decision surface, not chat history. Keep it outside
+// the collapsible thread so the exact deliverables remain visible even when the
+// manager minimizes the conversation transcript.
+// The "Ready for your review" card is the employee's review turn, so it lives as
+// the LAST child of #messages — inside the manager/employee thread. Keeping it in
+// the thread (rather than as a separate panel below it) means it scrolls with the
+// conversation and the thread does not need to collapse to surface it.
 function reviewCompletionHost() {
   const messages = els['messages'];
   if (!messages) return null;
@@ -2713,6 +2748,12 @@ function clearReviewCompletion() {
   const messages = els['messages'];
   const existing = messages && messages.querySelector('#review-completion');
   if (existing) existing.remove();
+  if (messages) {
+    messages.classList.remove('review-focused');
+    messages.querySelectorAll('.review-source-message').forEach((node) => {
+      node.classList.remove('review-source-message');
+    });
+  }
 }
 
 function renderReviewExperience(conv) {
@@ -2792,9 +2833,9 @@ function renderReviewExperience(conv) {
   }
 }
 
-// Comments follow the artifact (R7.7): a PR opens GitHub; markdown previews /
-// exports; report views inline. Nothing new is invented — these surface what the
-// read-side already knows and otherwise leave a status hint.
+// Comments follow the artifact (R7.7): a PR opens GitHub; local artifacts open
+// from disk; reports view inline. Nothing new is invented - these surface what
+// the read-side already knows and otherwise leave a status hint.
 async function handleArtifactAction(conv, action) {
   const artifact = action.artifact || ((conv && conv.artifacts && conv.artifacts[0]) || null);
   if (action.kind === 'github') {
@@ -2838,55 +2879,6 @@ async function handleArtifactAction(conv, action) {
     }
     return;
   }
-  if (action.kind === 'export') {
-    // Download the deliverable as .docx for Word annotation. Try the on-disk file
-    // first; if it doesn't actually exist (404 — e.g. the employee named a file it
-    // never created) or there is no path, fall back to exporting the employee's
-    // written deliverable text. Either way we download a real .docx, never a JSON
-    // error. Feedback comes back through the Coach box (no "Done reviewing").
-    const artifactPath = artifact && (artifact.path || artifact.where || artifact.url);
-    const hasLocalFile = artifactPath && !String(artifactPath).startsWith('http');
-    const baseName = ((artifact && artifact.name) || conversationTitle(conv) || 'deliverable');
-    const triggerDownload = (blob) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = String(baseName).replace(/\.[^.]+$/, '') + '.docx';
-      a.style.display = 'none';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    };
-    const isDocx = (resp) => (resp.headers.get('content-type') || '').includes('word');
-    try {
-      let blob = null;
-      if (hasLocalFile) {
-        const resp = await fetch('/api/ai-hub/artifact/export-docx?path=' + encodeURIComponent(artifactPath));
-        if (resp.ok && isDocx(resp)) blob = await resp.blob();
-        // else: file missing on disk → fall through to the inline export below.
-      }
-      if (!blob) {
-        const inline = (typeof latestEmployeeSurfaceText === 'function' && latestEmployeeSurfaceText(conv)) || '';
-        if (!inline.trim()) {
-          showStatus('Nothing to download yet — the employee has not produced a file or a written deliverable.', true);
-          return;
-        }
-        const resp = await fetch('/api/ai-hub/artifact/export-docx', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ content: inline, filename: baseName }),
-        });
-        if (!resp.ok) { const e = await resp.json().catch(() => ({})); throw new Error(e.error || 'Export failed.'); }
-        blob = await resp.blob();
-      }
-      triggerDownload(blob);
-      showStatus('Downloaded as .docx — mark it up in Word, then type your feedback in the Coach box below to send changes back.', false);
-    } catch (err) {
-      showStatus(err instanceof Error ? err.message : 'Could not export the deliverable.', true);
-    }
-    return;
-  }
   // Any other action: feedback goes through the Coach box.
   showStatus('Type your feedback in the Coach box below — it becomes a coaching message for the employee.', false);
 }

package/public/ai-hub/styles.css

@@ -1,5 +1,7 @@
 :root {
   color-scheme: light dark;
+  /* #ai-hub-polish: allow block-size:auto to animate (accordion open/close). */
+  interpolate-size: allow-keywords;
   /* Light theme — Apple-style near-white */
   --bg: #f5f5f7;
   --surface: #ffffff;
@@ -855,6 +857,11 @@ img.conv-employee-avatar {
   flex-shrink: 0;
 }
 .panel-details[open] > summary::before { transform: rotate(90deg); }
+.panel-details:not([open]) > .panel-body,
+.panel-details:not([open]) > .messages,
+.panel-details:not([open]) > .micro-log {
+  display: none;
+}
 .panel-summary-copy {
   display: flex;
   flex-direction: column;
@@ -1314,13 +1321,18 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 
 .micro {
   margin-top: 0;
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 48%, var(--soft));
   /* Removed: position:sticky / bottom:0 / z-index:2 — sticky caused the
      micro-manage label to float over the coach section in the flex column.
      It's now a normal flow element at the bottom of the support-stack. */
 }
+.micro .panel-kicker {
+  color: var(--accent-strong);
+}
 .micro summary {
   cursor: pointer;
-  color: var(--muted);
+  color: var(--text);
   font-size: 14px;
   list-style: none;
   display: flex;
@@ -2404,7 +2416,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
 .syn-row:last-child { border-bottom: none; }
 .syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 90px; flex-shrink: 0; padding-top: 1px; }
-.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
+.syn-val { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 13px; color: var(--text); line-height: 1.5; }
 .syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
 
 /* Learnings */
@@ -2467,7 +2479,22 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .ctx-acc > summary .ca-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
 .ctx-acc[open] > summary .ca-chev { transform: rotate(90deg); }
 .ctx-acc > summary .ca-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
-.ctx-acc-body { padding: 4px 14px 14px; }
+/* #ai-hub-polish F2: a long section must not bury the others. Cap the body and
+   let it scroll internally so every accordion header stays reachable. */
+.ctx-acc-body { padding: 4px 14px 14px; max-height: min(62vh, 620px); overflow-y: auto; }
+
+/* #ai-hub-polish F1: ease the open/close instead of snapping. Animate the
+   <details> content slot; interpolate-size lets block-size animate to/from auto.
+   @supports keeps older engines on the instant (pre-polish) behavior, and the
+   prefers-reduced-motion block above neutralizes the transition. */
+@supports selector(::details-content) {
+  .ctx-acc::details-content {
+    block-size: 0;
+    overflow: clip;
+    transition: block-size .24s ease, content-visibility .24s allow-discrete;
+  }
+  .ctx-acc[open]::details-content { block-size: auto; }
+}
 
 /* #521: project-onboarding loop banner inside the Brief — "team is processing /
    here's their understanding to review". */
@@ -2639,26 +2666,115 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   padding: 16px 18px;
 }
 
-/* Conversation view (full height): thread gets priority with a usable floor and
-   scrolls its messages internally; the support-stack stacks naturally and scrolls
-   on its own when both coach + micro-manage are open (it must NOT be a height-
-   distributing grid, or it clips the open panels — the original bug). */
+/* Conversation view (full height): the open panels SHARE the available real
+   estate instead of being pinned to fixed caps. Each open panel grows to fill its
+   slice and scrolls internally when its content overflows (its own scrollbar).
+   #active-conv keeps overflow-y:auto only as a fallback for very short windows
+   where the panels' min-heights can't all fit. */
 .workspace-conv #active-conv {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+.workspace-conv #active-conv > .conv-topline,
+.workspace-conv #active-conv > .conversation-status { flex: 0 0 auto; }
+
+/* Manager/employee thread — the primary conversation. The "Ready for review"
+   card lives inside #messages, so it scrolls with the thread. Open thread grows
+   to fill spare height; collapsed it is just its summary bar. */
+.workspace-conv #thread-panel { flex: 0 0 auto; min-height: 0; }
+/* Open thread is the sole space-filler: it grows to take all height the support
+   stack does not need, and scrolls #messages internally. Collapsed it is just
+   its summary bar. */
+.workspace-conv #thread-panel[open] {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 120px;
+}
+.workspace-conv #thread-panel > summary { flex: 0 0 auto; }
+/* Chromium wraps <details> content in a ::details-content slot, so #messages is
+   not a direct flex child of the panel. Make the slot a column flex container
+   that fills the panel; then #messages can flex-grow and scroll inside it. */
+.workspace-conv #thread-panel[open]::details-content {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
-  display: grid;
-  grid-template-rows: auto auto minmax(200px, 1fr) auto;
 }
-.workspace-conv #thread-panel[open] { min-height: 0; display: flex; flex-direction: column; }
-.workspace-conv #thread-panel > summary { flex-shrink: 0; }
-.workspace-conv #thread-panel #messages { flex: 1; min-height: 0; overflow-y: auto; }
+.workspace-conv #thread-panel[open] #messages {
+  flex: 1 1 0;
+  min-height: 0;
+  max-height: none;
+  overflow-y: auto;
+}
+.workspace-conv #thread-panel:not([open]) #messages { display: none; }
+
+/* Support stack: Coach (input) + Micro-manage (log). It sizes to its content and
+   never grows past it, so the thread keeps the spare real estate. Each open body
+   has a viewport-relative cap and scrolls internally, so it shows more on bigger
+   screens (and far more than the old 1-line peek) without crowding the thread. */
 .workspace-conv .support-stack {
-  display: block;          /* override base display:grid so panels stack, not clip */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   min-height: 0;
-  max-height: 48vh;        /* bounded; scrolls internally if both panels open */
+  flex: 0 1 auto;
+}
+.workspace-conv .support-stack > .panel-details--coach { flex: 0 0 auto; }
+.workspace-conv .support-stack > .panel-details--coach[open] > .panel-body {
+  max-height: clamp(140px, 24vh, 260px);
+  overflow-y: auto;
+}
+.workspace-conv .panel-details--coach .panel-body { padding-bottom: 8px; }
+.workspace-conv .coach-input textarea {
+  min-height: 44px;
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+.workspace-conv .coach-note { display: none; }
+.workspace-conv .quick-coach-row { gap: 5px; margin-bottom: 8px; }
+.workspace-conv .quick-coach-btn { padding: 4px 9px; }
+
+.workspace-conv .support-stack > .micro { flex: 0 0 auto; min-height: 0; }
+.workspace-conv .support-stack > .micro[open] > .micro-log {
+  max-height: clamp(120px, 24vh, 260px);
   overflow-y: auto;
 }
 .workspace-conv .support-stack > .panel-details,
-.workspace-conv .support-stack > .micro { margin-bottom: 8px; }
+.workspace-conv .support-stack > .micro { margin-bottom: 0; }
+
+@media (max-width: 820px) {
+  /* On narrow screens drop the fill model: panels flow naturally and the page
+     scrolls, with each open body keeping a viewport-relative scroll cap. */
+  .workspace-conv #active-conv {
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+  }
+  .workspace-conv #thread-panel[open],
+  .workspace-conv .support-stack,
+  .workspace-conv .support-stack:has(.micro[open]),
+  .workspace-conv .support-stack > .micro[open] {
+    flex: 0 0 auto;
+    display: block;
+    min-height: 0;
+  }
+  .workspace-conv #thread-panel[open] #messages,
+  .workspace-conv .support-stack > .micro[open] > .micro-log {
+    flex: initial;
+    height: auto;
+    max-height: clamp(140px, 32vh, 280px);
+    overflow-y: auto;
+  }
+  .workspace-conv .support-stack > .panel-details[open] > .panel-body {
+    max-height: clamp(140px, 32vh, 280px);
+    overflow-y: auto;
+  }
+}
 
 @media (max-width: 640px) {
   body.hub-shell { overflow-x: hidden; }
@@ -2885,6 +3001,39 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .workspace-conv > .page { overflow: hidden; }
 .workspace-conv .layout { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
 
+@media (max-width: 820px) {
+  body.hub-shell {
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+  .hub-area,
+  .area-main,
+  #proj-workspace,
+  .workspace-conv,
+  .workspace-conv > .page,
+  .workspace-conv .layout {
+    overflow: visible;
+  }
+}
+
+/* #ai-hub-polish F3: Company & Manager areas had no narrow-width layout — the
+   fixed 244px rail pushed the main column off the right edge (horizontal scroll).
+   Below the Projects-workspace breakpoint, stack the rail above the content and
+   let the page shrink so nothing overflows. 2-column stays intact on tablets. */
+@media (max-width: 640px) {
+  body.hub-shell { overflow-x: hidden; }
+  .area-shell { flex-direction: column; }
+  .area-rail {
+    width: 100%;
+    flex-shrink: 0;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid var(--line);
+  }
+  .hub-area-page { padding: 22px 16px 40px; min-width: 0; max-width: 100%; }
+}
+
 
 /* ── #512 Round 2: actual class names from rendered HTML ────────────────── */
 
@@ -2899,8 +3048,16 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
 .syn-row:last-child { border-bottom: none; }
 .syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 88px; flex-shrink: 0; padding-top: 2px; }
-.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
+.syn-val { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 13px; color: var(--text); line-height: 1.5; }
 .syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
+/* #ai-hub-polish: at phone widths the fixed label column starves the value and
+   forces mid-word wraps. Stack label over value so the value gets full width.
+   Placed after the duplicate .syn-* block above so source order lets it win. */
+@media (max-width: 560px) {
+  .syn-row { flex-wrap: wrap; gap: 4px 12px; }
+  .syn-label { width: 100%; }
+  .syn-val { flex: 1 1 100%; }
+}
 
 /* Issue #512 R3/R8 — Team Context inline editor. */
 /* ctx-content is now a div with rendered markdown (formatEmployeeText), not a raw <pre> */