@harborgroup/my-team 0.2.0 → 0.3.0

package/README.md

@@ -46,6 +46,10 @@ On startup, `my-team` checks the npm registry in the background for a newer publ
 
 Every raw request sent to the Claude Agent SDK (including the exact system prompt) and every raw message it streams back is logged verbatim to a JSON-lines file, one per `npm run team` run, under `~/.my-team/logs/` (outside the repo — old runs beyond a retention count are pruned automatically). The current run's log path is printed on startup and shown on the Settings page.
 
+## Clarifying questions
+
+When Iris (or your CEO) wants a structured answer rather than free text, it asks via a real inline widget — text input, single-select, or multi-select (with an automatic "Other" option) — instead of plain prose. This is a text convention the model follows (a fenced `question-widget` block the frontend parses out of the stream and replaces with an interactive card), not an MCP tool call: a real custom-tool + elicitation round trip was tested directly against the installed SDK and confirmed not to work yet (Claude Code's MCP-client role doesn't currently declare elicitation capability), so this achieves the same UX without that dependency. The main composer is disabled while a widget is awaiting an answer.
+
 ## Status
 
-v1.4: CLI-auth onboarding + conversational company/CEO-persona onboarding + Slack-style chat shell with real streaming + per-message model/effort selection + update checker + structured logging. No persisted chat history across restarts, no multi-user support, no `#general` backend (sidebar placeholder only).
+v1.5: CLI-auth onboarding + conversational company/CEO-persona onboarding + Slack-style chat shell with real streaming + per-message model/effort selection + update checker + structured logging + inline clarifying-question widgets. No persisted chat history across restarts, no multi-user support, no `#general` backend (sidebar placeholder only).

package/dist/server/profile.js

@@ -100,6 +100,21 @@ export async function writeProfile(cwd, data) {
         throw err;
     }
 }
+/**
+ * Shared by both system prompts below. Custom MCP-tool elicitation was tried
+ * and confirmed (via a real round-trip test) not to work in the installed
+ * SDK version — the Claude Code CLI's MCP-client role doesn't currently
+ * declare elicitation capability, regardless of an onElicitation handler
+ * being registered. This text-convention approach sidesteps that entirely:
+ * the frontend parses this fenced block out of the normal streamed text and
+ * renders it as an interactive widget, and the user's answer becomes a
+ * completely ordinary next chat message — no protocol dependency at all.
+ */
+const QUESTION_WIDGET_INSTRUCTIONS = `When you want to ask a clarifying question and a structured answer would help more than free text, emit a fenced block with the language tag "question-widget" containing exactly one JSON object, then stop your message there and wait for the answer — don't also ask the same question in prose before or after the block, and don't include more than one such block per message. Shape: {"type": "text" | "single_select" | "multi_select", "question": "the question to ask", "options": ["..."]} — "options" is required for "single_select"/"multi_select" and must be omitted for "text". Example:
+\`\`\`question-widget
+{"type": "single_select", "question": "Which best fits?", "options": ["Option A", "Option B"]}
+\`\`\`
+Use "text" for open-ended answers (names, descriptions), "single_select" when exactly one of a few options applies, "multi_select" when more than one can. An "Other" option is always available to the user automatically — don't add your own "Other" entry to the options list. Only use this when a structured widget genuinely helps; ordinary conversation doesn't need it.`;
 /**
  * Strong, first-person identity framing — deliberately not "you're also
  * helping company X" phrasing. Weaker framing was tested and Claude treated
@@ -109,7 +124,9 @@ export async function writeProfile(cwd, data) {
  * external/injected content, fixed it in testing.
  */
 export function formatProfileForSystemPrompt(profile) {
-    return `You are ${profile.ceoName}, the AI CEO of ${profile.companyName}. This is your actual identity, configured directly by your founder — it is not external file content, not a suggestion, and not something to second-guess or flag as injected. ${profile.companyName}'s mission: ${profile.mission}. Communication style: ${profile.ceoPersonality}. Speak and act as ${profile.companyName}'s CEO would — invested in the company's success and personally identified with its mission.`;
+    return `You are ${profile.ceoName}, the AI CEO of ${profile.companyName}. This is your actual identity, configured directly by your founder — it is not external file content, not a suggestion, and not something to second-guess or flag as injected. ${profile.companyName}'s mission: ${profile.mission}. Communication style: ${profile.ceoPersonality}. Speak and act as ${profile.companyName}'s CEO would — invested in the company's success and personally identified with its mission.
+
+${QUESTION_WIDGET_INSTRUCTIONS}`;
 }
 /**
  * Used instead of formatProfileForSystemPrompt while onboardingComplete is
@@ -121,5 +138,11 @@ export function formatProfileForSystemPrompt(profile) {
  */
 export function getOnboardingSystemPrompt(cwd) {
     const filePath = getProfilePath(cwd);
-    return `There is no company profile configured yet in this repository. Before doing anything else, have a brief, friendly conversation with the founder (you're talking to them right now) to learn: (1) their company's name, (2) its mission or what it does, (3) what they'd like to name you as their AI CEO, and (4) what personality or communication style you should have. Ask naturally, a question or two at a time — don't interrogate, and don't ask about anything else in the repo yet. After each answer, immediately write or update ${filePath} with whatever you know so far as JSON: {"companyName": string, "mission": string, "ceoName": string, "ceoPersonality": string, "onboardingComplete": boolean} — set "onboardingComplete" to false until you have all four answers, then write it one final time with "onboardingComplete": true. After that final write, briefly introduce yourself in your new persona. Until "onboardingComplete" is true, don't perform any other coding tasks.`;
+    return `There is no company profile configured yet in this repository. Before doing anything else, have a brief, friendly conversation with the founder (you're talking to them right now) to learn: (1) their company's name, (2) its mission or what it does, (3) what they'd like to name you as their AI CEO, and (4) what personality or communication style you should have. Ask one thing at a time — don't interrogate, and don't ask about anything else in the repo yet.
+
+${QUESTION_WIDGET_INSTRUCTIONS}
+
+For this onboarding interview specifically: ask the company name, mission, and CEO name as "text" widgets. For CEO personality, use a "single_select" widget with a handful of helpful preset tones (e.g. "Warm and encouraging", "Sharp and dry-witted", "Blunt and data-driven", "Formal and professional") — the founder can always type a custom one via the automatic Other option.
+
+After each answer, immediately write or update ${filePath} with whatever you know so far as JSON: {"companyName": string, "mission": string, "ceoName": string, "ceoPersonality": string, "onboardingComplete": boolean} — set "onboardingComplete" to false until you have all four answers, then write it one final time with "onboardingComplete": true. After that final write, briefly introduce yourself in your new persona. Until "onboardingComplete" is true, don't perform any other coding tasks.`;
 }

package/dist/web/app.js

@@ -43,6 +43,7 @@ const el = {
   typingAvatar: document.getElementById('typing-avatar'),
   form: document.getElementById('chat-form'),
   input: document.getElementById('chat-input'),
+  sendButton: document.getElementById('chat-send'),
 
   profileForm: document.getElementById('profile-form'),
   profileCompany: document.getElementById('profile-company'),
@@ -402,6 +403,240 @@ function appendUserMessage(text) {
   appendMessageRow('user', 'You', 'Y', text);
 }
 
+let pendingWidgetCount = 0;
+
+function setPendingWidget(delta) {
+  pendingWidgetCount = Math.max(0, pendingWidgetCount + delta);
+  el.input.disabled = pendingWidgetCount > 0;
+  el.sendButton.disabled = pendingWidgetCount > 0;
+  if (pendingWidgetCount === 0) el.input.focus();
+}
+
+const WIDGET_OPEN_FENCE = '```question-widget';
+
+// Incremental parser: processes streamed text chunks as they arrive rather
+// than re-parsing the full accumulated text on every delta. This matters for
+// two reasons — (1) a widget block mid-stream would otherwise flash raw JSON
+// before its closing fence arrives, and (2) naively re-rendering the whole
+// message on every delta would wipe out a widget the user already answered
+// if more text streams in afterward.
+class AssistantContentRenderer {
+  constructor(containerEl) {
+    this.container = containerEl;
+    this.state = 'text';
+    this.buffer = '';
+    this.textSegmentEl = null;
+    this.textRaw = '';
+    this.widgetPlaceholderEl = null;
+    this.widgetRaw = '';
+  }
+
+  push(deltaText) {
+    this.buffer += deltaText;
+    for (;;) {
+      if (this.state === 'text') {
+        const fenceIdx = this.buffer.indexOf(WIDGET_OPEN_FENCE);
+        if (fenceIdx === -1) {
+          // Hold back a tail as long as the marker minus one character —
+          // deltas arrive token-by-token, so the marker itself can easily
+          // be split across chunks (e.g. one delta ending "``" and the next
+          // starting "`question-widget"). Flushing eagerly would render the
+          // first half as plain text before the second half ever confirms
+          // it was a fence, and the marker would never be recognized.
+          const safeLen = Math.max(0, this.buffer.length - (WIDGET_OPEN_FENCE.length - 1));
+          const toFlush = this.buffer.slice(0, safeLen);
+          this.buffer = this.buffer.slice(safeLen);
+          if (toFlush) {
+            if (!this.textSegmentEl) {
+              this.textSegmentEl = document.createElement('div');
+              this.textSegmentEl.className = 'msg-text-segment';
+              this.container.appendChild(this.textSegmentEl);
+            }
+            this.textRaw += toFlush;
+            this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+          }
+          return;
+        }
+        if (fenceIdx > 0 || this.textRaw) {
+          if (!this.textSegmentEl) {
+            this.textSegmentEl = document.createElement('div');
+            this.textSegmentEl.className = 'msg-text-segment';
+            this.container.appendChild(this.textSegmentEl);
+          }
+          this.textRaw += this.buffer.slice(0, fenceIdx);
+          this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+        }
+        this.textSegmentEl = null;
+        this.textRaw = '';
+        this.buffer = this.buffer.slice(fenceIdx + WIDGET_OPEN_FENCE.length);
+        this.state = 'in-widget';
+        this.widgetRaw = '';
+        this.widgetPlaceholderEl = document.createElement('div');
+        this.widgetPlaceholderEl.className = 'question-widget-placeholder';
+        this.widgetPlaceholderEl.textContent = 'Preparing a question…';
+        this.container.appendChild(this.widgetPlaceholderEl);
+      } else {
+        const closeIdx = this.buffer.indexOf('```');
+        if (closeIdx === -1) {
+          // Same tail-holding logic for the closing fence (3 chars).
+          const safeLen = Math.max(0, this.buffer.length - 2);
+          this.widgetRaw += this.buffer.slice(0, safeLen);
+          this.buffer = this.buffer.slice(safeLen);
+          return;
+        }
+        this.widgetRaw += this.buffer.slice(0, closeIdx);
+        this.buffer = this.buffer.slice(closeIdx + 3);
+        this.state = 'text';
+        this.renderWidget(this.widgetRaw);
+      }
+    }
+  }
+
+  renderWidget(rawJson) {
+    let data;
+    try {
+      data = JSON.parse(rawJson);
+    } catch {
+      // Malformed JSON from the model — show the raw text rather than
+      // silently dropping it, so a parsing failure is at least visible.
+      this.widgetPlaceholderEl.textContent = rawJson.trim();
+      this.widgetPlaceholderEl.className = 'msg-text-segment';
+      this.widgetPlaceholderEl = null;
+      return;
+    }
+    setPendingWidget(1);
+    let answered = false;
+    const widgetEl = createQuestionWidget(data, (messageText) => {
+      if (answered) return;
+      answered = true;
+      setPendingWidget(-1);
+      streamChat(messageText, { showUserBubble: false });
+    });
+    this.widgetPlaceholderEl.replaceWith(widgetEl);
+    this.widgetPlaceholderEl = null;
+  }
+
+  finish() {
+    // No more text is coming, so anything still held back as a possible
+    // partial fence match is definitely not one — flush it as plain text.
+    if (this.state === 'text' && this.buffer) {
+      if (!this.textSegmentEl) {
+        this.textSegmentEl = document.createElement('div');
+        this.textSegmentEl.className = 'msg-text-segment';
+        this.container.appendChild(this.textSegmentEl);
+      }
+      this.textRaw += this.buffer;
+      this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+      this.buffer = '';
+    }
+    // A block left unterminated when the turn ends (shouldn't normally
+    // happen) — show what was received rather than leaving a permanent
+    // "Preparing a question…" placeholder with no way to proceed.
+    if (this.state === 'in-widget' && this.widgetPlaceholderEl) {
+      this.widgetPlaceholderEl.textContent = `${WIDGET_OPEN_FENCE}\n${this.widgetRaw}${this.buffer}`;
+      this.widgetPlaceholderEl.className = 'msg-text-segment';
+    }
+  }
+}
+
+function createQuestionWidget(data, onAnswer) {
+  const card = document.createElement('div');
+  card.className = 'question-widget';
+
+  const questionEl = document.createElement('div');
+  questionEl.className = 'question-widget-question';
+  questionEl.textContent = data.question ?? 'Question';
+  card.appendChild(questionEl);
+
+  const body = document.createElement('div');
+  body.className = 'question-widget-body';
+  card.appendChild(body);
+
+  function submit(displayText, messageText) {
+    card.classList.add('answered');
+    body.innerHTML = '';
+    const answerEl = document.createElement('div');
+    answerEl.className = 'question-widget-answer';
+    answerEl.textContent = displayText;
+    body.appendChild(answerEl);
+    onAnswer(messageText ?? displayText);
+  }
+
+  function buildOtherRow(placeholder) {
+    const row = document.createElement('div');
+    row.className = 'question-widget-row question-widget-other';
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = placeholder;
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.textContent = 'Send';
+    row.appendChild(input);
+    row.appendChild(btn);
+    const trigger = () => {
+      const val = input.value.trim();
+      if (val) submit(val, val);
+    };
+    btn.addEventListener('click', trigger);
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') trigger();
+    });
+    return row;
+  }
+
+  const type = data.type;
+  const options = Array.isArray(data.options) ? data.options : [];
+
+  if (type === 'single_select') {
+    for (const opt of options) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'question-widget-option';
+      btn.textContent = opt;
+      btn.addEventListener('click', () => submit(opt, opt));
+      body.appendChild(btn);
+    }
+    body.appendChild(buildOtherRow('Other…'));
+  } else if (type === 'multi_select') {
+    const checkboxes = [];
+    for (const opt of options) {
+      const label = document.createElement('label');
+      label.className = 'question-widget-checkbox-label';
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.value = opt;
+      checkboxes.push(cb);
+      label.appendChild(cb);
+      label.appendChild(document.createTextNode(opt));
+      body.appendChild(label);
+    }
+    const otherInput = document.createElement('input');
+    otherInput.type = 'text';
+    otherInput.placeholder = 'Other (optional)…';
+    otherInput.className = 'question-widget-other-inline';
+    body.appendChild(otherInput);
+
+    const submitBtn = document.createElement('button');
+    submitBtn.type = 'button';
+    submitBtn.className = 'question-widget-submit';
+    submitBtn.textContent = 'Submit';
+    submitBtn.addEventListener('click', () => {
+      const selected = checkboxes.filter((c) => c.checked).map((c) => c.value);
+      const other = otherInput.value.trim();
+      if (other) selected.push(other);
+      if (!selected.length) return;
+      const display = selected.join(', ');
+      submit(display, display);
+    });
+    body.appendChild(submitBtn);
+  } else {
+    // 'text', or an unrecognized type — a free-text prompt never silently drops the question.
+    body.appendChild(buildOtherRow('Type your answer…'));
+  }
+
+  return card;
+}
+
 function appendAssistantRow(turnMeta) {
   const result = appendMessageRow('assistant', lastProfile?.ceoName || 'your AI CEO', getCeoInitial(), '');
   if (turnMeta?.model) {
@@ -411,6 +646,7 @@ function appendAssistantRow(turnMeta) {
     badge.textContent = turnMeta.effort ? `${modelLabel} · ${turnMeta.effort}` : modelLabel;
     result.row.querySelector('.msg-meta').appendChild(badge);
   }
+  result.renderer = new AssistantContentRenderer(result.textEl);
   return result;
 }
 
@@ -437,8 +673,7 @@ async function streamChat(message, { showUserBubble }) {
   showTypingIndicator();
   setStatus('typing');
 
-  let assistantTextEl = null;
-  let assistantText = '';
+  let assistantRenderer = null;
   let sawContent = false;
   let turnMeta = null;
 
@@ -479,11 +714,10 @@ async function streamChat(message, { showUserBubble }) {
           hideTypingIndicator();
           sawContent = true;
         }
-        if (!assistantTextEl) {
-          assistantTextEl = appendAssistantRow(turnMeta).textEl;
+        if (!assistantRenderer) {
+          assistantRenderer = appendAssistantRow(turnMeta).renderer;
         }
-        assistantText += event.text;
-        assistantTextEl.innerHTML = renderMarkdown(assistantText);
+        assistantRenderer.push(event.text);
         el.messages.scrollTop = el.messages.scrollHeight;
       } else if (event.type === 'tool-use') {
         if (!sawContent) {
@@ -502,6 +736,7 @@ async function streamChat(message, { showUserBubble }) {
     }
   }
 
+  assistantRenderer?.finish();
   hideTypingIndicator();
   if (statusState !== 'offline') setStatus('online');
   await refreshProfileIfNeeded();
@@ -517,11 +752,18 @@ el.form.addEventListener('submit', async (e) => {
   if (!message) return;
   el.input.value = '';
   el.input.disabled = true;
+  el.sendButton.disabled = true;
   try {
     await streamChat(message, { showUserBubble: true });
   } finally {
-    el.input.disabled = false;
-    el.input.focus();
+    // A widget the model asked as part of this same turn may still be
+    // unanswered — setPendingWidget already owns disabling in that case,
+    // so only re-enable here if nothing is pending.
+    if (pendingWidgetCount === 0) {
+      el.input.disabled = false;
+      el.sendButton.disabled = false;
+      el.input.focus();
+    }
   }
 });
 

package/dist/web/index.html

@@ -134,7 +134,7 @@
           </div>
           <form id="chat-form">
             <input id="chat-input" type="text" placeholder="Message your CEO&hellip;" autocomplete="off" />
-            <button type="submit">Send</button>
+            <button type="submit" id="chat-send">Send</button>
           </form>
         </section>
       </main>

package/dist/web/style.css

@@ -502,6 +502,131 @@ body {
   color: #e5484d;
 }
 
+.msg-text-segment:empty {
+  display: none;
+}
+
+.question-widget-placeholder {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--muted);
+  font-style: italic;
+  font-size: 0.88rem;
+  padding: 0.3rem 0;
+}
+
+.question-widget {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  margin: 0.5rem 0;
+  max-width: 420px;
+  background: var(--bg-subtle);
+}
+
+.question-widget-question {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+  line-height: 1.4;
+}
+
+.question-widget-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.question-widget-option {
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  text-align: left;
+  font-weight: 500;
+  padding: 0.55rem 0.8rem;
+}
+
+.question-widget-option:hover {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
+}
+
+.question-widget-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.92rem;
+  cursor: pointer;
+}
+
+.question-widget-checkbox-label input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+}
+
+.question-widget-submit {
+  align-self: flex-start;
+}
+
+.question-widget-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.question-widget-row input {
+  flex: 1;
+  padding: 0.5rem 0.7rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 0.9rem;
+}
+
+.question-widget-row input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.question-widget-row button {
+  flex-shrink: 0;
+  padding: 0.5rem 0.9rem;
+  font-size: 0.85rem;
+}
+
+.question-widget-other {
+  margin-top: 0.15rem;
+}
+
+.question-widget-other-inline {
+  padding: 0.5rem 0.7rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 0.9rem;
+}
+
+.question-widget-other-inline:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.question-widget.answered {
+  background: transparent;
+}
+
+.question-widget-answer {
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 0.92rem;
+}
+
+.question-widget-answer::before {
+  content: '✓ ';
+}
+
 #typing-indicator {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborgroup/my-team",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Chat with your local Claude Code subscription from a web dashboard, scoped to the current repo. Dev-only.",
   "type": "module",
   "bin": {