@startsimpli/integrations 0.1.5 → 0.2.1

package/src/components/Markdown.tsx

@@ -0,0 +1,193 @@
+/**
+ * The small amount of Markdown that actually arrives in a corpus, rendered.
+ *
+ * WHY THIS EXISTS. Sources write Markdown and the corpus stores it verbatim —
+ * Granola's summary is `## Decisions` and `**$4,800 per month**`, and a model
+ * asked for prose answers in the same dialect. Rendering that as plain text puts
+ * literal hashes and asterisks on the screen, which reads as a bug in the
+ * product rather than as punctuation from the source.
+ *
+ * WHY IT IS ~100 LINES AND NOT A DEPENDENCY. A Markdown library is a peer
+ * dependency every consuming app has to install and a sanitiser decision every
+ * consuming app has to get right. This renders to REACT ELEMENTS — there is no
+ * `dangerouslySetInnerHTML` anywhere below, so untrusted document text cannot
+ * become markup, which is the property that actually matters for a surface whose
+ * whole job is displaying text somebody else wrote.
+ *
+ * WHAT IT DELIBERATELY DOES NOT DO. No tables, no block quotes, no images, no
+ * single-asterisk emphasis (`*` appears in real prose far more often than it
+ * means italics, and a false positive silently eats characters out of a
+ * contract). Anything unrecognised falls through as its own literal text, which
+ * is the same thing the screen showed before — never worse.
+ */
+import * as React from 'react';
+
+/**
+ * Markdown reduced to the text a human would read aloud.
+ *
+ * For places that need a STRING rather than elements — a truncated one-line
+ * preview, a title, an `aria-label`. Same syntax coverage as the renderer.
+ */
+export function stripMarkdown(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/```[\s\S]*?```/g, (block) => block.replace(/```[^\n]*\n?/g, ''))
+    .replace(/^\s{0,3}#{1,6}\s+/gm, '')
+    .replace(/^\s{0,3}([-*_])\s*\1\s*\1[-*_\s]*$/gm, '')
+    .replace(/^\s{0,3}[-*+]\s+/gm, '')
+    .replace(/^\s{0,3}>\s?/gm, '')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/[ \t]+\n/g, '\n')
+    .trim();
+}
+
+/** `**bold**`, `` `code` `` and `[text](url)` inside one line of text. */
+function inline(text: string, keyPrefix: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  // One pass, one regex: whichever construct starts first wins, so a link whose
+  // label contains asterisks is still a link.
+  const pattern = /(\*\*|__)([\s\S]+?)\1|`([^`]+)`|\[([^\]]+)\]\(([^)\s]+)[^)]*\)/g;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  let index = 0;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > cursor) nodes.push(text.slice(cursor, match.index));
+    index += 1;
+    const key = `${keyPrefix}-${index}`;
+    if (match[2] !== undefined) {
+      nodes.push(<strong key={key}>{match[2]}</strong>);
+    } else if (match[3] !== undefined) {
+      nodes.push(
+        <code key={key} className="rounded bg-black/5 px-1 py-0.5 text-[0.9em]">
+          {match[3]}
+        </code>,
+      );
+    } else if (match[4] !== undefined) {
+      const href = match[5] ?? '';
+      const safe = /^(https?:|mailto:)/i.test(href);
+      nodes.push(
+        safe ? (
+          <a key={key} href={href} target="_blank" rel="noreferrer" className="underline">
+            {match[4]}
+          </a>
+        ) : (
+          // A `javascript:` or otherwise unrecognised scheme keeps its LABEL and
+          // loses its link. Silently dropping the text would edit the document.
+          <React.Fragment key={key}>{match[4]}</React.Fragment>
+        ),
+      );
+    }
+    cursor = pattern.lastIndex;
+  }
+  if (cursor < text.length) nodes.push(text.slice(cursor));
+  return nodes.length ? nodes : [text];
+}
+
+const HEADING_CLASS = ['font-semibold', 'font-semibold', 'font-medium'];
+
+/**
+ * Block-level Markdown as React elements.
+ *
+ * `className` lands on the wrapper so an app's theme slot still styles the whole
+ * block exactly as it did when this was a `<p>` of raw text.
+ */
+export function Markdown({ text, className }: { text: string; className?: string }) {
+  const blocks = React.useMemo(() => parseBlocks(text ?? ''), [text]);
+  if (!text) return null;
+  return (
+    <div className={className}>
+      {blocks.map((block, blockIndex) => {
+        const key = `b${blockIndex}`;
+        if (block.kind === 'heading') {
+          const level = Math.min(block.level ?? 3, 3);
+          return (
+            <p
+              key={key}
+              className={`${HEADING_CLASS[level - 1] ?? 'font-medium'} ${blockIndex ? 'mt-3' : ''}`}
+            >
+              {inline(block.lines[0] ?? '', key)}
+            </p>
+          );
+        }
+        if (block.kind === 'list') {
+          return (
+            <ul key={key} className={`list-disc space-y-1 pl-5 ${blockIndex ? 'mt-2' : ''}`}>
+              {block.lines.map((line, lineIndex) => (
+                <li key={`${key}-${lineIndex}`}>{inline(line, `${key}-${lineIndex}`)}</li>
+              ))}
+            </ul>
+          );
+        }
+        if (block.kind === 'rule') {
+          return <hr key={key} className="my-3 border-black/10" />;
+        }
+        return (
+          <p key={key} className={`whitespace-pre-wrap ${blockIndex ? 'mt-2' : ''}`}>
+            {inline(block.lines.join('\n'), key)}
+          </p>
+        );
+      })}
+    </div>
+  );
+}
+
+interface Block {
+  kind: 'paragraph' | 'heading' | 'list' | 'rule';
+  lines: string[];
+  level?: number;
+}
+
+function parseBlocks(text: string): Block[] {
+  const blocks: Block[] = [];
+  let paragraph: string[] = [];
+  let list: string[] = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length) blocks.push({ kind: 'paragraph', lines: paragraph });
+    paragraph = [];
+  };
+  const flushList = () => {
+    if (list.length) blocks.push({ kind: 'list', lines: list });
+    list = [];
+  };
+
+  for (const raw of text.replace(/\r\n/g, '\n').split('\n')) {
+    const line = raw.replace(/\s+$/, '');
+    const heading = /^\s{0,3}(#{1,6})\s+(.*)$/.exec(line);
+    const bullet = /^\s{0,3}[-*+]\s+(.*)$/.exec(line);
+    const numbered = /^\s{0,3}\d+[.)]\s+(.*)$/.exec(line);
+    const rule = /^\s{0,3}([-*_])\s*\1\s*\1[-*_\s]*$/.test(line);
+
+    if (!line.trim()) {
+      flushList();
+      flushParagraph();
+      continue;
+    }
+    if (rule) {
+      flushList();
+      flushParagraph();
+      blocks.push({ kind: 'rule', lines: [] });
+      continue;
+    }
+    if (heading) {
+      flushList();
+      flushParagraph();
+      blocks.push({ kind: 'heading', lines: [heading[2] ?? ''], level: heading[1].length });
+      continue;
+    }
+    if (bullet || numbered) {
+      flushParagraph();
+      list.push((bullet ? bullet[1] : numbered?.[1]) ?? '');
+      continue;
+    }
+    flushList();
+    paragraph.push(line);
+  }
+  flushList();
+  flushParagraph();
+  return blocks;
+}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './ConnectAccountCard';
 export * from './EmailList';
 export * from './EventList';
 export * from './EventListItem';
+export * from './Markdown';
 export * from './ReconsentPromptCard';
 
 // The connections layer (bd startsim-768w.22.3.4): ONE schema-driven form and
@@ -29,3 +30,4 @@ export type {
 // connections. Same rule as above — the page composers ship, not just the parts.
 export * from './pages/LibraryPage';
 export * from './pages/AskPage';
+export * from './pages/TrackerPage';

package/src/components/pages/AskPage.tsx

@@ -31,6 +31,7 @@
  */
 import * as React from 'react';
 
+import { Markdown, stripMarkdown } from '../Markdown';
 import type {
   AskMode,
   AskRequest,
@@ -259,7 +260,10 @@ function AnswerPanel({
         </p>
       ) : null}
 
-      <div className={`mt-3 ${cn.answer}`}>{result.answer}</div>
+      {/* A model asked for prose answers in Markdown. Rendering it as literal
+          text puts "**$4,800**" on the screen, which reads as the product
+          failing rather than as the model emphasising the number. */}
+      <Markdown text={result.answer} className={`mt-3 ${cn.answer}`} />
 
       {canSave ? (
         <button
@@ -300,7 +304,10 @@ function AnswerPanel({
             {/* The model's own quote, so the claim can be checked against the
                 record without opening it. */}
             {citation.quote ? (
-              <p className="mt-1 text-sm italic text-gray-600">“{citation.quote}”</p>
+              // Flattened, not rendered: a quotation is a span of the record's
+              // own words, and it should read as one line inside the quote
+              // marks rather than re-opening as a heading or a bullet.
+              <p className="mt-1 text-sm italic text-gray-600">“{stripMarkdown(citation.quote)}”</p>
             ) : null}
           </div>
         ))}
@@ -337,7 +344,7 @@ function ConsideredList({
   return (
     <details className="mt-3">
       <summary className="cursor-pointer text-sm text-gray-600">
-        {unused.length} more record{unused.length === 1 ? '' : 's'} were searched but not cited
+        {unused.length} more record{unused.length === 1 ? ' was' : 's were'} searched but not cited
       </summary>
       <div className="mt-2 space-y-1">
         {unused.map((item) => (
@@ -360,16 +367,34 @@ function ConsideredList({
   );
 }
 
+/**
+ * Who answered, said plainly.
+ *
+ * THREE CASES, not two (bd startsim-768w.38.21). A live model names itself. A
+ * STUB says it is a stub. And a workspace with NO provider configured is not a
+ * stub at all — "Answered by a none stub ((provider default))" was neither
+ * English nor true. Every branch keeps the `live: false` honesty; the point is
+ * to say the true thing clearly, not to soften it.
+ */
+function providerSentence(provider: AskResult['provider']): string {
+  const model = provider.model?.trim() ?? '';
+  if (provider.live) {
+    return model ? `Answered by ${provider.provider} · ${model}` : `Answered by ${provider.provider}`;
+  }
+  if (!provider.provider || provider.provider === 'none') {
+    return 'No model is configured for this workspace — no live model was called.';
+  }
+  return model
+    ? `Answered by a ${provider.provider} stub (${model}) — no live model was called`
+    : `Answered by a ${provider.provider} stub — no live model was called`;
+}
+
 function ProvenanceFooter({
   result, classNames: cn,
 }: { result: AskResult; classNames: Record<AskSlot, string> }) {
   return (
     <div className="mt-4 border-t pt-2">
-      <p className={cn.muted}>
-        {result.provider.live
-          ? `Answered by ${result.provider.provider} · ${result.provider.model}`
-          : `Answered by a ${result.provider.provider} stub (${result.provider.model}) — no live model was called`}
-      </p>
+      <p className={cn.muted}>{providerSentence(result.provider)}</p>
       {/* A non-zero drop means something upstream returned rows from another
           workspace. It is stated rather than swallowed, because the guard
           catching it is good news about the guard and bad news about the API. */}

package/src/components/pages/LibraryPage.tsx

@@ -27,6 +27,7 @@
  */
 import * as React from 'react';
 
+import { Markdown, stripMarkdown } from '../Markdown';
 import { enforceScope } from '../../corpus/retrieval';
 import type {
   CorpusApi,
@@ -107,8 +108,13 @@ function relative(value: string | null | undefined, now: number): string {
   return `${Math.round(hours / 24)}d ago`;
 }
 
+/**
+ * A row's one-line preview. The Markdown is FLATTENED rather than rendered
+ * here — a truncated heading and half a bold span are worse than plain prose,
+ * and the row is a summary, not the document.
+ */
 function preview(document: SourceDocument, length = 180): string {
-  const text = document.body || document.sections[0]?.text || '';
+  const text = stripMarkdown(document.body || document.sections[0]?.text || '');
   if (!text) return '';
   return text.length > length ? `${text.slice(0, length).trim()}…` : text;
 }
@@ -586,7 +592,9 @@ function DocumentDetail({
       {document.body ? (
         <div className="mt-3">
           <p className="text-sm font-medium text-gray-900">Summary</p>
-          <p className="mt-1 whitespace-pre-wrap text-sm text-gray-700">{document.body}</p>
+          {/* Sources write Markdown — a literal "## Decisions" on the screen
+              reads as a broken product, not as the source's punctuation. */}
+          <Markdown text={document.body} className="mt-1 text-sm text-gray-700" />
         </div>
       ) : null}