mcp-rubber-duck 1.9.4 → 1.10.0

package/src/tools/compare-ducks.ts

@@ -55,12 +55,32 @@ export async function compareDucksTool(
 
   logger.info(`Compared ${responses.length} ducks, ${successCount} successful`);
 
+  // Build structured data for UI consumption
+  const structuredData = responses.map(r => ({
+    provider: r.provider,
+    nickname: r.nickname,
+    model: r.model,
+    content: r.content,
+    latency: r.latency,
+    tokens: r.usage ? {
+      prompt: r.usage.prompt_tokens,
+      completion: r.usage.completion_tokens,
+      total: r.usage.total_tokens,
+    } : null,
+    cached: r.cached,
+    error: r.content.startsWith('Error:') ? r.content : undefined,
+  }));
+
   return {
     content: [
       {
         type: 'text',
         text: response,
       },
+      {
+        type: 'text',
+        text: JSON.stringify(structuredData),
+      },
     ],
   };
 }

package/src/tools/duck-debate.ts

@@ -124,12 +124,39 @@ export async function duckDebateTool(
 
   logger.info(`Debate completed: ${rounds} rounds, synthesized by ${synthesizerProvider}`);
 
+  // Build structured data for UI consumption
+  const structuredData = {
+    topic: result.topic,
+    format: result.format,
+    totalRounds: result.totalRounds,
+    participants: result.participants.map(p => ({
+      provider: p.provider,
+      nickname: p.nickname,
+      position: p.position,
+    })),
+    rounds: result.rounds.map(roundArgs =>
+      roundArgs.map(arg => ({
+        round: arg.round,
+        provider: arg.provider,
+        nickname: arg.nickname,
+        position: arg.position,
+        content: arg.content,
+      }))
+    ),
+    synthesis: result.synthesis,
+    synthesizer: result.synthesizer,
+  };
+
   return {
     content: [
       {
         type: 'text',
         text: formattedOutput,
       },
+      {
+        type: 'text',
+        text: JSON.stringify(structuredData),
+      },
     ],
   };
 }

package/src/tools/duck-vote.ts

@@ -76,12 +76,36 @@ export async function duckVoteTool(
     `winner: ${aggregatedResult.winner || 'none'}`
   );
 
+  // Build structured data for UI consumption
+  const structuredData = {
+    question: aggregatedResult.question,
+    options: aggregatedResult.options,
+    winner: aggregatedResult.winner,
+    isTie: aggregatedResult.isTie,
+    tally: aggregatedResult.tally,
+    confidenceByOption: aggregatedResult.confidenceByOption,
+    votes: aggregatedResult.votes.map(v => ({
+      voter: v.voter,
+      nickname: v.nickname,
+      choice: v.choice,
+      confidence: v.confidence,
+      reasoning: v.reasoning,
+    })),
+    totalVoters: aggregatedResult.totalVoters,
+    validVotes: aggregatedResult.validVotes,
+    consensusLevel: aggregatedResult.consensusLevel,
+  };
+
   return {
     content: [
       {
         type: 'text',
         text: formattedOutput,
       },
+      {
+        type: 'text',
+        text: JSON.stringify(structuredData),
+      },
     ],
   };
 }

package/src/tools/get-usage-stats.ts

@@ -75,12 +75,26 @@ export function getUsageStatsTool(
 
   logger.info(`Retrieved usage stats for period: ${period}`);
 
+  // Build structured data for UI consumption
+  const structuredData = {
+    period: stats.period,
+    startDate: stats.startDate,
+    endDate: stats.endDate,
+    totals: stats.totals,
+    usage: stats.usage,
+    costByProvider: stats.costByProvider,
+  };
+
   return {
     content: [
       {
         type: 'text',
         text: output,
       },
+      {
+        type: 'text',
+        text: JSON.stringify(structuredData),
+      },
     ],
   };
 }

package/src/ui/compare-ducks/app.ts

@@ -0,0 +1,88 @@
+import { App } from '@modelcontextprotocol/ext-apps';
+
+interface CompareResponse {
+  provider: string;
+  nickname: string;
+  model: string;
+  content: string;
+  latency: number;
+  tokens: { prompt: number; completion: number; total: number } | null;
+  cached: boolean;
+  error?: string;
+}
+
+const app = new App({ name: 'CompareDucks', version: '1.0.0' }, {});
+
+app.ontoolresult = (params) => {
+  const container = document.getElementById('app')!;
+  if (params.isError) {
+    container.innerHTML = `<div class="error-banner">Tool execution failed</div>`;
+    return;
+  }
+
+  // Parse JSON from second content item
+  const content = params.content;
+  if (!content || !Array.isArray(content) || content.length < 2) {
+    container.innerHTML = `<div class="error-banner">No structured data received</div>`;
+    return;
+  }
+
+  try {
+    const data: CompareResponse[] = JSON.parse(
+      (content[1] as { type: string; text: string }).text
+    );
+    render(data);
+  } catch {
+    container.innerHTML = `<div class="error-banner">Failed to parse response data</div>`;
+  }
+};
+
+function render(responses: CompareResponse[]) {
+  const container = document.getElementById('app')!;
+  const successCount = responses.filter((r) => !r.error).length;
+
+  let html = `<div class="summary-bar">${successCount}/${responses.length} ducks responded successfully</div>`;
+  html += `<div class="grid">`;
+
+  for (const r of responses) {
+    const isError = !!r.error;
+    const latencyClass =
+      r.latency < 2000 ? 'fast' : r.latency < 5000 ? 'medium' : 'slow';
+
+    html += `<div class="card${isError ? ' card-error' : ''}">`;
+    html += `<div class="card-header">`;
+    html += `<span class="nickname">${esc(r.nickname)}</span>`;
+    html += `<span class="provider">${esc(r.provider)}</span>`;
+    html += `</div>`;
+
+    if (!isError) {
+      html += `<div class="badges">`;
+      html += `<span class="badge model">${esc(r.model)}</span>`;
+      if (r.tokens) {
+        html += `<span class="badge tokens">${r.tokens.total} tokens</span>`;
+      }
+      if (r.cached) {
+        html += `<span class="badge cached">Cached</span>`;
+      }
+      html += `</div>`;
+      html += `<div class="latency-bar ${latencyClass}" style="width:${Math.min(100, (r.latency / 10000) * 100)}%"></div>`;
+      html += `<div class="latency-label">${r.latency}ms</div>`;
+      html += `<div class="content"><pre>${esc(r.content)}</pre></div>`;
+    } else {
+      html += `<div class="content error-text"><pre>${esc(r.content)}</pre></div>`;
+    }
+
+    html += `</div>`;
+  }
+
+  html += `</div>`;
+  container.innerHTML = html;
+}
+
+function esc(s: string): string {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+app.connect().catch(console.error);

package/src/ui/compare-ducks/mcp-app.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Compare Ducks</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.5;
+      color: #1a1a2e;
+      background: #f8f9fa;
+      padding: 16px;
+    }
+    .summary-bar {
+      background: #e3f2fd;
+      color: #1565c0;
+      padding: 8px 16px;
+      border-radius: 8px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      text-align: center;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 16px;
+    }
+    .card {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      border-radius: 12px;
+      padding: 16px;
+      overflow: hidden;
+    }
+    .card-error { border-color: #ef5350; }
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+    .nickname { font-weight: 700; font-size: 1.1em; }
+    .provider { font-size: 0.85em; opacity: 0.7; }
+    .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
+    .badge {
+      font-size: 0.75em;
+      padding: 2px 8px;
+      border-radius: 12px;
+      background: #e8eaf6;
+      color: #3949ab;
+      font-weight: 500;
+    }
+    .badge.cached { background: #e8f5e9; color: #2e7d32; }
+    .latency-bar {
+      height: 4px;
+      border-radius: 2px;
+      margin-bottom: 4px;
+      min-width: 4px;
+    }
+    .latency-bar.fast { background: #4caf50; }
+    .latency-bar.medium { background: #ff9800; }
+    .latency-bar.slow { background: #f44336; }
+    .latency-label { font-size: 0.75em; opacity: 0.6; margin-bottom: 8px; }
+    .content pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.9em;
+      background: #f5f5f5;
+      padding: 12px;
+      border-radius: 8px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .error-text pre { color: #ef5350; }
+    .error-banner {
+      background: #ffebee;
+      color: #c62828;
+      padding: 12px;
+      border-radius: 8px;
+      text-align: center;
+      font-weight: 600;
+    }
+    @media (prefers-color-scheme: dark) {
+      body { background: #1a1a2e; color: #e0e0e0; }
+      .card { background: #16213e; border-color: #0f3460; color: #e0e0e0; }
+      .badge { background: #0f3460; color: #a0c4ff; }
+      .summary-bar { background: #0f3460; color: #a0c4ff; }
+      .content pre { background: #0d1b2a; color: #d0d0d0; }
+      .error-banner { background: #5c1a1a; color: #ff8a80; }
+      .card-error { border-color: #8b3a3a; }
+      .latency-label { color: #a0a0a0; }
+      .provider { color: #9e9e9e; }
+    }
+  </style>
+</head>
+<body>
+  <div id="app"><p style="text-align:center;opacity:0.5">Waiting for results...</p></div>
+  <script type="module" src="./app.ts"></script>
+</body>
+</html>

package/src/ui/duck-debate/app.ts

@@ -0,0 +1,111 @@
+import { App } from '@modelcontextprotocol/ext-apps';
+
+interface DebateData {
+  topic: string;
+  format: 'oxford' | 'socratic' | 'adversarial';
+  totalRounds: number;
+  participants: { provider: string; nickname: string; position: string }[];
+  rounds: { round: number; provider: string; nickname: string; position: string; content: string }[][];
+  synthesis: string;
+  synthesizer: string;
+}
+
+const formatMeta: Record<string, { emoji: string; label: string; style: string }> = {
+  oxford: { emoji: '\uD83C\uDF93', label: 'Oxford', style: 'oxford' },
+  socratic: { emoji: '\uD83C\uDFDB\uFE0F', label: 'Socratic', style: 'socratic' },
+  adversarial: { emoji: '\u2694\uFE0F', label: 'Adversarial', style: 'adversarial' },
+};
+
+const positionColors: Record<string, string> = {
+  pro: '#4caf50',
+  con: '#f44336',
+  neutral: '#9e9e9e',
+};
+
+const app = new App({ name: 'DuckDebate', version: '1.0.0' }, {});
+
+app.ontoolresult = (params) => {
+  const container = document.getElementById('app')!;
+  if (params.isError) {
+    container.innerHTML = `<div class="error-banner">Tool execution failed</div>`;
+    return;
+  }
+
+  const content = params.content;
+  if (!content || !Array.isArray(content) || content.length < 2) {
+    container.innerHTML = `<div class="error-banner">No structured data received</div>`;
+    return;
+  }
+
+  try {
+    const data: DebateData = JSON.parse(
+      (content[1] as { type: string; text: string }).text
+    );
+    render(data);
+  } catch {
+    container.innerHTML = `<div class="error-banner">Failed to parse debate data</div>`;
+  }
+};
+
+function render(data: DebateData) {
+  const container = document.getElementById('app')!;
+  const fmt = formatMeta[data.format] || formatMeta.oxford;
+
+  let html = `<div class="debate ${fmt.style}">`;
+
+  // Header
+  html += `<div class="header">`;
+  html += `<div class="format-badge">${fmt.emoji} ${fmt.label} Debate</div>`;
+  html += `<h2 class="topic">${esc(data.topic)}</h2>`;
+  html += `<div class="meta">${data.totalRounds} rounds &middot; ${data.participants.length} participants</div>`;
+  html += `</div>`;
+
+  // Participants
+  html += `<div class="participants">`;
+  for (const p of data.participants) {
+    const color = positionColors[p.position] || '#9e9e9e';
+    html += `<span class="participant" style="border-color:${color}">`;
+    html += `<span class="pos-dot" style="background:${color}"></span>`;
+    html += `${esc(p.nickname)} <small>(${p.position})</small>`;
+    html += `</span>`;
+  }
+  html += `</div>`;
+
+  // Rounds
+  html += `<div class="rounds">`;
+  for (let i = 0; i < data.rounds.length; i++) {
+    const round = data.rounds[i];
+    html += `<details class="round">`;
+    html += `<summary class="round-header">Round ${i + 1}</summary>`;
+    html += `<div class="round-body">`;
+    for (const arg of round) {
+      const color = positionColors[arg.position] || '#9e9e9e';
+      html += `<div class="argument" style="border-left-color:${color}">`;
+      html += `<div class="arg-header">`;
+      html += `<span class="arg-name">${esc(arg.nickname)}</span>`;
+      html += `<span class="arg-pos" style="color:${color}">${arg.position.toUpperCase()}</span>`;
+      html += `</div>`;
+      html += `<div class="arg-content">${esc(arg.content)}</div>`;
+      html += `</div>`;
+    }
+    html += `</div></details>`;
+  }
+  html += `</div>`;
+
+  // Synthesis
+  html += `<div class="synthesis">`;
+  html += `<h3>Synthesis <small>by ${esc(data.synthesizer)}</small></h3>`;
+  html += `<div class="synthesis-content">${esc(data.synthesis)}</div>`;
+  html += `</div>`;
+
+  html += `</div>`;
+  container.innerHTML = html;
+}
+
+function esc(s: string): string {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+app.connect().catch(console.error);

package/src/ui/duck-debate/mcp-app.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Duck Debate</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.5;
+      color: #1a1a2e;
+      background: #f8f9fa;
+      padding: 16px;
+    }
+    .header { text-align: center; margin-bottom: 20px; }
+    .format-badge {
+      display: inline-block;
+      padding: 4px 16px;
+      border-radius: 20px;
+      font-weight: 600;
+      font-size: 0.9em;
+      margin-bottom: 8px;
+    }
+    .oxford .format-badge { background: #e8eaf6; color: #283593; }
+    .socratic .format-badge { background: #f3e5f5; color: #6a1b9a; }
+    .adversarial .format-badge { background: #fbe9e7; color: #bf360c; }
+    .topic { font-size: 1.2em; margin-bottom: 4px; }
+    .meta { font-size: 0.85em; opacity: 0.6; }
+    .participants {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    .participant {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      border: 2px solid;
+      border-radius: 20px;
+      font-size: 0.85em;
+      background: #fff;
+    }
+    .pos-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .rounds { margin-bottom: 20px; }
+    .round { margin-bottom: 8px; }
+    .round-header {
+      cursor: pointer;
+      padding: 8px 16px;
+      background: #e8eaf6;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 0.95em;
+    }
+    .round-body { padding: 12px 0; }
+    .argument {
+      background: #fff;
+      border-left: 4px solid;
+      border-radius: 0 8px 8px 0;
+      padding: 12px 16px;
+      margin-bottom: 10px;
+    }
+    .arg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .arg-name { font-weight: 700; }
+    .arg-pos { font-size: 0.75em; font-weight: 700; letter-spacing: 0.5px; }
+    .arg-content { white-space: pre-wrap; word-break: break-word; font-size: 0.9em; }
+    .synthesis {
+      background: #fffde7;
+      border: 2px solid #ffd54f;
+      border-radius: 12px;
+      padding: 16px;
+    }
+    .synthesis h3 { margin-bottom: 8px; }
+    .synthesis small { font-weight: 400; opacity: 0.6; }
+    .synthesis-content { white-space: pre-wrap; word-break: break-word; font-size: 0.9em; }
+    .error-banner { background: #ffebee; color: #c62828; padding: 12px; border-radius: 8px; text-align: center; font-weight: 600; }
+    @media (prefers-color-scheme: dark) {
+      body { background: #1a1a2e; color: #e0e0e0; }
+      .argument { background: #16213e; color: #e0e0e0; }
+      .synthesis { background: #1b3a4b; border-color: #0f3460; color: #e0e0e0; }
+      .round-header { background: #16213e; color: #e0e0e0; }
+      .participant { background: #16213e; color: #e0e0e0; }
+      .oxford .format-badge { background: #1a237e; color: #9fa8da; }
+      .socratic .format-badge { background: #4a148c; color: #ce93d8; }
+      .adversarial .format-badge { background: #4e1a00; color: #ffab91; }
+      .error-banner { background: #5c1a1a; color: #ff8a80; }
+    }
+  </style>
+</head>
+<body>
+  <div id="app"><p style="text-align:center;opacity:0.5">Waiting for results...</p></div>
+  <script type="module" src="./app.ts"></script>
+</body>
+</html>

package/src/ui/duck-vote/app.ts

@@ -0,0 +1,128 @@
+import { App } from '@modelcontextprotocol/ext-apps';
+
+interface VoteData {
+  question: string;
+  options: string[];
+  winner: string | null;
+  isTie: boolean;
+  tally: Record<string, number>;
+  confidenceByOption: Record<string, number>;
+  votes: {
+    voter: string;
+    nickname: string;
+    choice: string;
+    confidence: number;
+    reasoning: string;
+  }[];
+  totalVoters: number;
+  validVotes: number;
+  consensusLevel: 'unanimous' | 'majority' | 'plurality' | 'split' | 'none';
+}
+
+const consensusConfig: Record<string, { color: string; label: string }> = {
+  unanimous: { color: '#4caf50', label: 'Unanimous' },
+  majority: { color: '#2196f3', label: 'Majority' },
+  plurality: { color: '#ff9800', label: 'Plurality' },
+  split: { color: '#ff5722', label: 'Split' },
+  none: { color: '#9e9e9e', label: 'No Consensus' },
+};
+
+const app = new App({ name: 'DuckVote', version: '1.0.0' }, {});
+
+app.ontoolresult = (params) => {
+  const container = document.getElementById('app')!;
+  if (params.isError) {
+    container.innerHTML = `<div class="error-banner">Tool execution failed</div>`;
+    return;
+  }
+
+  const content = params.content;
+  if (!content || !Array.isArray(content) || content.length < 2) {
+    container.innerHTML = `<div class="error-banner">No structured data received</div>`;
+    return;
+  }
+
+  try {
+    const data: VoteData = JSON.parse(
+      (content[1] as { type: string; text: string }).text
+    );
+    render(data);
+  } catch {
+    container.innerHTML = `<div class="error-banner">Failed to parse vote data</div>`;
+  }
+};
+
+function render(data: VoteData) {
+  const container = document.getElementById('app')!;
+  const cfg = consensusConfig[data.consensusLevel] || consensusConfig.none;
+  const maxVotes = Math.max(...Object.values(data.tally), 1);
+
+  let html = `<h2 class="question">${esc(data.question)}</h2>`;
+
+  // Winner card
+  if (data.winner) {
+    html += `<div class="winner-card">`;
+    html += `<span class="winner-label">Winner</span>`;
+    html += `<span class="winner-name">${esc(data.winner)}</span>`;
+    if (data.isTie) {
+      html += `<span class="tie-note">Tie-breaker by confidence</span>`;
+    }
+    html += `</div>`;
+  } else {
+    html += `<div class="winner-card no-winner"><span class="winner-label">No valid votes</span></div>`;
+  }
+
+  // Consensus badge
+  html += `<div class="consensus-badge" style="background:${cfg.color}">${cfg.label}</div>`;
+
+  // Bar chart
+  html += `<div class="tally-section"><h3>Vote Tally</h3>`;
+  const sortedOptions = [...data.options].sort(
+    (a, b) => (data.tally[b] || 0) - (data.tally[a] || 0)
+  );
+  for (const opt of sortedOptions) {
+    const votes = data.tally[opt] || 0;
+    const conf = data.confidenceByOption[opt] || 0;
+    const pct = (votes / maxVotes) * 100;
+    const isWinner = opt === data.winner;
+    html += `<div class="bar-row${isWinner ? ' winner-row' : ''}">`;
+    html += `<div class="bar-label">${esc(opt)}</div>`;
+    html += `<div class="bar-track"><div class="bar-fill" style="width:${pct}%"></div></div>`;
+    html += `<div class="bar-value">${votes} vote${votes !== 1 ? 's' : ''} (${conf}%)</div>`;
+    html += `</div>`;
+  }
+  html += `</div>`;
+
+  // Individual voters
+  html += `<div class="voters-section"><h3>Individual Votes</h3><div class="voters-grid">`;
+  for (const v of data.votes) {
+    const hasChoice = !!v.choice;
+    html += `<div class="voter-card${!hasChoice ? ' invalid-vote' : ''}">`;
+    html += `<div class="voter-name">${esc(v.nickname)}</div>`;
+    if (hasChoice) {
+      html += `<div class="voter-choice">${esc(v.choice)}</div>`;
+      html += `<div class="confidence-bar-wrap"><div class="confidence-bar" style="width:${v.confidence}%"></div></div>`;
+      html += `<div class="confidence-label">${v.confidence}% confidence</div>`;
+      if (v.reasoning) {
+        html += `<details class="reasoning"><summary>Reasoning</summary><p>${esc(v.reasoning)}</p></details>`;
+      }
+    } else {
+      html += `<div class="voter-choice invalid">Invalid vote</div>`;
+    }
+    html += `</div>`;
+  }
+  html += `</div></div>`;
+
+  // Footer
+  html += `<div class="footer">${data.validVotes}/${data.totalVoters} valid votes</div>`;
+
+  container.innerHTML = html;
+}
+
+function esc(s: string): string {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+app.connect().catch(console.error);