fraim-framework 2.0.152 → 2.0.153

package/public/ai-hub/script.js

@@ -21,9 +21,10 @@ const state = {
   selectedJob: null,   // chosen in modal step 1
   selectedEmployeeId: null,
   selectedPersonaKey: null,  // R4: null = "All employees"
-  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
-  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
-};
+  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
+  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
+  panelState: {},            // { [convId]: { coach?: boolean } }
+};
 
 const els = {};
 
@@ -37,11 +38,12 @@ function gatherElements() {
     'new-conv-btn', 'conv-list',
     // Issue #385: team roster
     'team-roster',
-    'empty', 'active-conv', 'active-title', 'active-job', 'active-identity', 'run-state-pill', 'summary-strip',
+    'empty', 'active-conv', 'active-title', 'active-job', 'active-identity', 'run-state-pill',
     'progress', 'stage', 'latest', 'artifact-slot', 'messages',
     'coach-text', 'send', 'micro-manage', 'micro-log',
     'status-line', 'coach-note',
-    'modal', 'step1', 'step2',
+    'coach-panel', 'coach-summary',
+    'modal', 'step1', 'step2',
     'cancel1', 'next1', 'back2', 'start',
     'job-search', 'job-catalog', 'job-pick-status',
     // Issue #385: hire-required notice, persona job filter
@@ -224,10 +226,34 @@ function findConversation(id) {
   return null;
 }
 
-function activeConversation() {
-  if (!state.activeId) return null;
-  return findConversation(state.activeId);
-}
+function activeConversation() {
+  if (!state.activeId) return null;
+  return findConversation(state.activeId);
+}
+
+function panelStateFor(convId) {
+  if (!convId) return {};
+  if (!state.panelState[convId]) state.panelState[convId] = {};
+  return state.panelState[convId];
+}
+
+function defaultCoachOpen(conv) {
+  return true;
+}
+
+function syncConversationPanels(conv, switchedConv) {
+  const coach = els['coach-panel'];
+  if (!conv || !coach) return;
+  const panelState = panelStateFor(conv.id);
+  if (switchedConv) {
+    coach.open = panelState.coach ?? defaultCoachOpen(conv);
+  }
+  if (els['coach-summary']) {
+    els['coach-summary'].textContent = conv.status === 'running'
+      ? 'Open to coach or redirect the work.'
+      : 'Open when you want to steer the next step.';
+  }
+}
 
 function upsertConversation(conv) {
   const list = projectConversations().slice();
@@ -565,7 +591,6 @@ function renderActive() {
   renderConversationIdentity(conv);
   els['active-job'].textContent = `${conv.jobTitle} · ${friendlyProjectName(conv.projectPath || state.projectPath)}`;
   renderRunStatePill(conv);
-  els['summary-strip'].textContent = buildConversationSummary(conv);
   els['coach-note'].textContent = conv.status === 'running'
     ? 'The employee is still working. Add coaching here to tighten the next step without losing context.'
     : 'The employee is waiting on you. Send the next instruction to continue this run.';
@@ -579,7 +604,7 @@ function renderActive() {
 
   // If we switched conversations (or this is the first render), wipe and
   // start fresh. Otherwise we're going to do an incremental update below.
-  const switchedConv = renderedConvId !== conv.id;
+  const switchedConv = renderedConvId !== conv.id;
   if (switchedConv) {
     els['artifact-slot'].innerHTML = '';
     els['messages'].innerHTML = '';
@@ -590,6 +615,7 @@ function renderActive() {
     renderedArtifactKey = null;
   }
   const statusChanged = renderedStatus !== conv.status;
+  syncConversationPanels(conv, switchedConv);
 
   // Artifact callout — only re-render when the latest artifact actually
   // changed. Avoids the 'pulse' animation re-firing on every poll tick.
@@ -1025,21 +1051,23 @@ function closeTemplatePopover() {
   btn.setAttribute('aria-expanded', 'false');
 }
 
-function applyTemplateInvocation(managerJobId) {
-  const conv = activeConversation();
+function applyTemplateInvocation(managerJobId) {
+  const conv = activeConversation();
   // Use the conversation's own employee for the invocation symbol, NOT
   // the manager's last selection in another conversation (R2.5).
   const employeeId = (conv && conv.employeeId) || state.selectedEmployeeId || 'claude';
   const symbol = FRAIM_INVOCATION_SYMBOL[employeeId] || '/fraim';
-  const invocation = `${symbol} ${managerJobId}`;
-  const textarea = els['coach-text'];
-  const prior = textarea.value;
-  // Append (with a single space separator if needed) — never replace.
-  let combined;
-  if (prior.length === 0) combined = invocation;
-  else if (/\s$/.test(prior)) combined = prior + invocation;
-  else combined = prior + ' ' + invocation;
-  textarea.value = combined;
+  const invocation = `${symbol} ${managerJobId}`;
+  const textarea = els['coach-text'];
+  const prior = textarea.value;
+  let combined;
+  if (prior.trim().length === 0) {
+    combined = invocation;
+  } else {
+    const strippedPrior = prior.replace(/(?:^|\n|\s)[/$]fraim\s+[a-z0-9-]+(?:\s|$)/ig, ' ').replace(/\s+/g, ' ').trim();
+    combined = strippedPrior ? `${invocation}\n\n${strippedPrior}` : invocation;
+  }
+  textarea.value = combined;
   // Caret at the end.
   textarea.setSelectionRange(combined.length, combined.length);
   textarea.focus();
@@ -1100,9 +1128,32 @@ function surfaceText(role, text, conv) {
     }
   }
 
+  if (role === 'employee') {
+    const resumedMatch = raw.match(/^Resumed\s+\w+\s+session\s+[a-f0-9-]+:\s*(.*)$/i);
+    if (resumedMatch) {
+      const cleaned = surfaceText('manager', resumedMatch[1], conv);
+      if (conv.status === 'completed') return 'Done - please review.';
+      return cleaned ? `Working on: ${cleaned}` : 'Working on it...';
+    }
+  }
+
   return raw;
 }
 
+function extractExplicitFraimInvocation(text) {
+  const raw = String(text || '');
+  const match = raw.match(/(?:^|\n|\s)([$/]fraim)\s+([a-z0-9][a-z0-9-]*)(?=\s|$)/i);
+  if (!match || match.index == null) return null;
+  const before = raw.slice(0, match.index).trim();
+  const after = raw.slice(match.index + match[0].length).trim();
+  const remainder = [before, after].filter(Boolean).join('\n\n').trim();
+  return {
+    symbol: match[1],
+    jobId: match[2],
+    remainder,
+  };
+}
+
 function latestEmployeeSurfaceText(conv) {
   const messages = conv.messages || [];
   for (let i = messages.length - 1; i >= 0; i -= 1) {
@@ -1664,22 +1715,18 @@ function fraimInvocationFor(employeeId, jobId, kind) {
 // AND what we show in the timeline so the manager sees what the agent
 // received. For freeform jobs (no FRAIM job assigned), the instructions
 // are sent verbatim with no invocation prefix.
-function buildAgentMessage(employeeId, jobId, kind, instructions, stubPath) {
-  const trimmed = (instructions || '').trim();
-  const invocation = fraimInvocationFor(employeeId, jobId, kind);
-  // Freeform: no FRAIM prefix, no stub reference — just the raw instructions.
-  if (!invocation) return trimmed;
-  const stub = (kind === 'start' && stubPath) ? `\n[Job stub: ${stubPath}]` : '';
-  if (!trimmed) return `${invocation}${stub}`;
-  // For continue turns, applyTemplateInvocation already writes the full
-  // FRAIM invocation (e.g. "/fraim follow-your-mentor") into the textarea.
-  // If the text already starts with a known FRAIM symbol, don't prepend again.
-  if (kind === 'continue') {
-    const knownSymbols = Object.values(FRAIM_INVOCATION_SYMBOL);
-    if (knownSymbols.some((s) => trimmed.startsWith(s))) return trimmed;
-  }
-  return `${invocation}${stub}\n\n${trimmed}`;
-}
+function buildAgentMessage(employeeId, jobId, kind, instructions, stubPath) {
+  const trimmed = (instructions || '').trim();
+  const explicit = extractExplicitFraimInvocation(trimmed);
+  const effectiveJobId = explicit?.jobId || jobId;
+  const invocation = fraimInvocationFor(employeeId, effectiveJobId, kind);
+  // Freeform: no FRAIM prefix, no stub reference — just the raw instructions.
+  if (!invocation) return explicit?.remainder || trimmed;
+  const remainder = explicit ? explicit.remainder : trimmed;
+  const stub = (kind === 'start' && stubPath) ? `\n[Job stub: ${stubPath}]` : '';
+  if (!remainder) return `${invocation}${stub}`;
+  return `${invocation}${stub}\n\n${remainder}`;
+}
 
 async function startRun(job, instructions, employeeId) {
   // Prefix the manager's typed instructions with the FRAIM invocation so
@@ -2021,17 +2068,25 @@ function wireEvents() {
     }
   });
 
-  if (els['active-employee-select']) {
-    els['active-employee-select'].addEventListener('change', () => {
+  if (els['active-employee-select']) {
+    els['active-employee-select'].addEventListener('change', () => {
       // Only update the global preference here. Do NOT update conv.employeeId —
       // the send handler compares sel.value vs conv.employeeId to detect a
       // switch; updating conv here would make them equal and the restart would
       // never fire.
-      state.selectedEmployeeId = els['active-employee-select'].value;
-    });
-  }
-
-  // Issue #347 R2 — template picker.
+      state.selectedEmployeeId = els['active-employee-select'].value;
+    });
+  }
+
+  if (els['coach-panel']) {
+    els['coach-panel'].addEventListener('toggle', () => {
+      const conv = activeConversation();
+      if (!conv) return;
+      panelStateFor(conv.id).coach = els['coach-panel'].open;
+    });
+  }
+
+  // Issue #347 R2 — template picker.
   if (els['template-picker-btn']) {
     els['template-picker-btn'].addEventListener('click', (e) => {
       e.stopPropagation();

package/public/ai-hub/styles.css

@@ -388,9 +388,9 @@ button { font: inherit; cursor: pointer; }
 }
 
 .conv-header,
-.coach,
-.micro,
-.progress {
+.support-stack,
+.panel-details,
+.micro {
   flex-shrink: 0;
 }
 .conv-topline {
@@ -482,24 +482,76 @@ button { font: inherit; cursor: pointer; }
 
 .conv-header h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
 .conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
-.summary-strip {
-  background: rgba(255, 255, 255, 0.56);
+.conversation-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+  flex-shrink: 0;
+}
+.conversation-status > * {
+  min-width: 0;
+}
+.status-stack {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.support-stack {
+  display: grid;
+  gap: 8px;
+}
+.panel-details {
+  background: rgba(255, 255, 255, 0.4);
   border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 18px;
-  padding: 14px 16px;
+  border-radius: 22px;
+  overflow: hidden;
+}
+.panel-details > summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+}
+.panel-details > summary::-webkit-details-marker { display: none; }
+.panel-details > summary::before {
+  content: "▸";
+  font-size: 11px;
+  color: var(--muted);
+  transition: transform 100ms ease;
+  flex-shrink: 0;
+}
+.panel-details[open] > summary::before { transform: rotate(90deg); }
+.panel-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.panel-kicker {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.panel-summary-text {
+  font-size: 13px;
   color: var(--text);
-  font-size: 14px;
-  line-height: 1.55;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--muted);
+.panel-body {
+  padding: 0 14px 12px;
+}
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 8px;
@@ -571,6 +623,15 @@ button { font: inherit; cursor: pointer; }
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.5; transform: scale(0.8); }
 }
+.progress-inline {
+  flex: 1 1 auto;
+}
+.tracker-inline {
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(31, 67, 125, 0.08);
+  border-radius: 18px;
+  padding: 8px 12px;
+}
 
 .thread-surface {
   display: flex;
@@ -578,7 +639,7 @@ button { font: inherit; cursor: pointer; }
   gap: 14px;
   min-height: 0;
   flex: 1;
-  padding: 18px 18px 16px;
+  padding: 22px 22px 18px;
   border-radius: 28px;
   border: 1px solid rgba(31, 67, 125, 0.1);
   background:
@@ -622,11 +683,11 @@ button { font: inherit; cursor: pointer; }
 }
 .message.manager {
   justify-items: end;
-  padding-left: 24%;
+  padding-left: 30%;
 }
 .message.employee {
   justify-items: start;
-  padding-right: 24%;
+  padding-right: 30%;
 }
 .message.system {
   justify-items: stretch;
@@ -687,11 +748,11 @@ button { font: inherit; cursor: pointer; }
 }
 .bubble {
   border-radius: 26px;
-  padding: 16px 18px;
+  padding: 14px 16px;
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.55;
   box-shadow: 0 12px 26px rgba(35, 30, 23, 0.05);
-  max-width: min(760px, 100%);
+  max-width: min(620px, 100%);
 }
 .message.manager .bubble {
   background: var(--accent);
@@ -750,8 +811,8 @@ button { font: inherit; cursor: pointer; }
 
 .coach textarea {
   width: 100%;
-  min-height: 56px;
-  max-height: 30vh;
+  min-height: 48px;
+  max-height: 22vh;
   resize: vertical;
   border: 1px solid var(--line);
   border-radius: 18px;
@@ -762,17 +823,17 @@ button { font: inherit; cursor: pointer; }
 }
 .coach textarea:focus { outline: none; border-color: var(--accent); }
 .coach {
-  background: rgba(255, 255, 255, 0.38);
-  border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 22px;
-  padding: 16px 18px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
 }
-.coach-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
+.coach-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
 .coach-note {
-  margin-top: 10px;
+  margin-top: 8px;
   color: var(--muted);
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 11px;
+  line-height: 1.4;
 }
 .send-button {
   background: var(--accent);
@@ -787,14 +848,11 @@ button { font: inherit; cursor: pointer; }
 .send-button:disabled { background: #c5d2cb; cursor: not-allowed; }
 
 .micro {
-  margin-top: auto;
-  border-top: 1px solid var(--line);
-  padding-top: 14px;
+  margin-top: 0;
   position: sticky;
   bottom: 0;
-  z-index: 4;
-  background:
-    linear-gradient(180deg, rgba(248, 244, 235, 0), rgba(248, 244, 235, 0.96) 22%);
+  z-index: 2;
+  background: rgba(255, 255, 255, 0.4);
 }
 .micro summary {
   cursor: pointer;
@@ -812,10 +870,10 @@ button { font: inherit; cursor: pointer; }
   transition: transform 100ms;
 }
 .micro[open] summary::before { transform: rotate(90deg); }
-.micro-log {
-  margin-top: 12px;
-  background: #1f2a24;
-  color: #c5d2cb;
+.micro-log {
+  margin: 0 16px 16px;
+  background: #1f2a24;
+  color: #c5d2cb;
   border-radius: 8px;
   padding: 12px 14px;
   font-family: Consolas, Menlo, monospace;
@@ -1025,6 +1083,9 @@ button.small { padding: 4px 10px; font-size: 12px; }
   .thread-surface {
     padding: 16px 14px 14px;
   }
+  .panel-summary-text {
+    white-space: normal;
+  }
   .message,
   .message.manager,
   .message.employee,
@@ -1217,14 +1278,14 @@ button.small { padding: 4px 10px; font-size: 12px; }
 
 /* Totals line (R4). 12px muted, no border, single row that wraps if it
    absolutely must. Discoverable via hover tooltips per spec R4.4. */
-.totals {
-  font-size: 12px;
-  color: var(--muted);
-  padding-top: 4px;
-  display: flex;
-  gap: 14px;
-  flex-wrap: wrap;
-}
+.totals {
+  font-size: 11px;
+  color: var(--muted);
+  padding-top: 2px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 .totals span { cursor: help; }
 .totals .sep { color: var(--line); }
 .totals strong { color: var(--text); font-weight: 600; }