@m6d/cortex-react 1.0.0

package/src/components/MessageTextPart.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from 'react';
+import type { TextPart, UIMessage } from '@tanstack/ai';
+import { renderMarkdown, StreamTextSmoother } from '@cortex/client';
+import { cx } from '../cx';
+
+type MessageTextPartProps = {
+  role: UIMessage['role'];
+  textPart: TextPart;
+  streaming?: boolean;
+};
+
+export function MessageTextPart(props: MessageTextPartProps) {
+  const { role, textPart, streaming = false } = props;
+
+  // Non-streaming text paints on the first frame — only a streaming assistant
+  // part starts empty and drains in through the smoother (Angular's constructor
+  // effect ran before the first render, so it never committed an empty bubble).
+  const initialText = role === 'assistant' && streaming ? '' : textPart.content;
+  const [displayedText, setDisplayedText] = useState(initialText);
+  const displayedTextRef = useRef(initialText);
+  const smootherRef = useRef<StreamTextSmoother | null>(null);
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    function setText(text: string) {
+      displayedTextRef.current = text;
+      setDisplayedText(text);
+    }
+
+    if (role !== 'assistant' || !streaming) {
+      smootherRef.current?.destroy();
+      smootherRef.current = null;
+      setText(textPart.content);
+      isFirstRenderRef.current = false;
+      return;
+    }
+
+    if (!smootherRef.current) {
+      smootherRef.current = new StreamTextSmoother(setText);
+      smootherRef.current.seed(displayedTextRef.current);
+    }
+
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      smootherRef.current.seed(textPart.content);
+      return;
+    }
+
+    smootherRef.current.update(textPart.content, false);
+  }, [role, streaming, textPart]);
+
+  useEffect(
+    () => () => {
+      smootherRef.current?.destroy();
+      smootherRef.current = null;
+    },
+    [],
+  );
+
+  return (
+    <div
+      className={cx(
+        'cortex-text-part',
+        role === 'assistant' && 'cortex-text-part--assistant',
+        role === 'user' && 'cortex-text-part--user',
+      )}
+    >
+      <div
+        className={cx(
+          'cortex-text-bubble',
+          role === 'assistant' && 'cortex-text-bubble--assistant',
+          role === 'user' && 'cortex-text-bubble--user',
+        )}
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(displayedText) }}
+      />
+    </div>
+  );
+}

package/src/components/MessageTokenUsage.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import type { MessageMetadata } from '@cortex/contracts/wire';
+import { cachePercent } from '@cortex/client';
+import { useCortex } from '../context';
+import { cx } from '../cx';
+import { num } from '../format';
+
+type MessageTokenUsageProps = {
+  usage: NonNullable<MessageMetadata['tokenUsage']>;
+  modelId?: string;
+};
+
+export function MessageTokenUsage({ usage, modelId }: MessageTokenUsageProps) {
+  const { t } = useCortex();
+  const [expanded, setExpanded] = useState(false);
+
+  const cacheRatio = cachePercent(usage) ?? 0;
+
+  return (
+    <div className={cx('cortex-token-usage', expanded && 'cortex-token-usage--expanded')}>
+      <button className="cortex-token-usage__summary" onClick={() => setExpanded((v) => !v)}>
+        <span className="cortex-token-usage__total">
+          <span className="cortex-token-usage__total-number">{num(usage.total)}</span>
+          <span className="cortex-token-usage__total-label">{t('translate_tokens')}</span>
+        </span>
+
+        {modelId ? <span className="cortex-token-usage__model">{modelId}</span> : null}
+
+        <span className="cortex-token-usage__pills">
+          <span className="cortex-token-usage__pill">
+            <span className="cortex-token-usage__dot cortex-token-usage__dot--input"></span>
+            {num(usage.input.total)}
+          </span>
+          <span className="cortex-token-usage__pill">
+            <span className="cortex-token-usage__dot cortex-token-usage__dot--output"></span>
+            {num(usage.output.total)}
+          </span>
+        </span>
+
+        {cacheRatio > 0 ? (
+          <span className="cortex-token-usage__cache-badge">{cacheRatio}%</span>
+        ) : null}
+
+        <svg
+          className="cortex-token-usage__chevron"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+        >
+          <path
+            d="M3 4.5L6 7.5L9 4.5"
+            stroke="currentColor"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      <div className="cortex-token-usage__details">
+        <div className="cortex-token-usage__details-inner">
+          <div className="cortex-token-usage__columns">
+            <div className="cortex-token-usage__col">
+              <div className="cortex-token-usage__col-header">
+                <span className="cortex-token-usage__dot cortex-token-usage__dot--input"></span>
+                <span className="cortex-token-usage__col-label">{t('translate_input')}</span>
+                <span className="cortex-token-usage__col-total">{num(usage.input.total)}</span>
+              </div>
+              <div className="cortex-token-usage__rows">
+                {usage.input.noCache ? (
+                  <div className="cortex-token-usage__row">
+                    <span className="cortex-token-usage__row-label">{t('translate_fresh')}</span>
+                    <span className="cortex-token-usage__row-value">
+                      {num(usage.input.noCache)}
+                    </span>
+                  </div>
+                ) : null}
+                {usage.input.cacheRead ? (
+                  <div className="cortex-token-usage__row">
+                    <span className="cortex-token-usage__row-label">
+                      {t('translate_cache_read')}
+                    </span>
+                    <span className="cortex-token-usage__row-value">
+                      {num(usage.input.cacheRead)}
+                    </span>
+                  </div>
+                ) : null}
+                {usage.input.cacheWrite ? (
+                  <div className="cortex-token-usage__row">
+                    <span className="cortex-token-usage__row-label">
+                      {t('translate_cache_write')}
+                    </span>
+                    <span className="cortex-token-usage__row-value">
+                      {num(usage.input.cacheWrite)}
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+              {cacheRatio > 0 ? (
+                <div className="cortex-token-usage__cache-bar-row">
+                  <div className="cortex-token-usage__cache-bar">
+                    <div
+                      className="cortex-token-usage__cache-fill"
+                      style={{ width: `${cacheRatio}%` }}
+                    ></div>
+                  </div>
+                  <span className="cortex-token-usage__cache-label">
+                    {t('translate_n_percent_cached', { percent: cacheRatio })}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+
+            <div className="cortex-token-usage__col">
+              <div className="cortex-token-usage__col-header">
+                <span className="cortex-token-usage__dot cortex-token-usage__dot--output"></span>
+                <span className="cortex-token-usage__col-label">{t('translate_output')}</span>
+                <span className="cortex-token-usage__col-total">{num(usage.output.total)}</span>
+              </div>
+              <div className="cortex-token-usage__rows">
+                {usage.output.text ? (
+                  <div className="cortex-token-usage__row">
+                    <span className="cortex-token-usage__row-label">{t('translate_text')}</span>
+                    <span className="cortex-token-usage__row-value">{num(usage.output.text)}</span>
+                  </div>
+                ) : null}
+                {usage.output.reasoning ? (
+                  <div className="cortex-token-usage__row">
+                    <span className="cortex-token-usage__row-label">
+                      {t('translate_reasoning')}
+                    </span>
+                    <span className="cortex-token-usage__row-value">
+                      {num(usage.output.reasoning)}
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MessageToolCallAnimated.tsx

@@ -0,0 +1,86 @@
+import type { ToolCallPart, UIMessage } from '@tanstack/ai';
+import { toolCallAnimation } from '@cortex/client';
+import { cx } from '../cx';
+import { useCortex } from '../context';
+
+type MessageToolCallAnimatedProps = {
+  message: UIMessage;
+  toolCallPart: ToolCallPart;
+};
+
+export function MessageToolCallAnimated({ message, toolCallPart }: MessageToolCallAnimatedProps) {
+  const { config, t, addToolResult } = useCortex();
+
+  const Custom = config.toolComponents?.[toolCallPart.name];
+  if (Custom) {
+    return (
+      <div className="cortex-tool-call-animated">
+        <Custom
+          toolCallPart={toolCallPart}
+          message={message}
+          setOutput={(output) => addToolResult(toolCallPart.id, toolCallPart.name, output)}
+        />
+      </div>
+    );
+  }
+
+  const { state, active, titleKey } = toolCallAnimation(toolCallPart);
+
+  return (
+    <div className="cortex-tool-call-animated">
+      <div className="cortex-tool-pill">
+        {/* Spinner, then whichever glyph the call settled on */}
+        <span className="cortex-tool-pill__icon">
+          <span
+            className={cx(
+              'cortex-tool-pill__spinner',
+              active && 'cortex-tool-pill__spinner--visible',
+            )}
+          ></span>
+          <svg
+            className={cx(
+              'cortex-tool-pill__svg',
+              'cortex-tool-pill__svg--check',
+              state === 'complete' && 'cortex-tool-pill__svg--visible',
+            )}
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              d="M5.5 10.5 L8.5 13.5 L14.5 7"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <svg
+            className={cx(
+              'cortex-tool-pill__svg',
+              'cortex-tool-pill__svg--error',
+              state === 'error' && 'cortex-tool-pill__svg--visible',
+            )}
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              d="M6.5 6.5 L13.5 13.5 M13.5 6.5 L6.5 13.5"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </span>
+
+        <span
+          className={cx(
+            'cortex-tool-pill__title',
+            state === 'error' && 'cortex-tool-pill__title--error',
+          )}
+        >
+          {t(titleKey)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/MessageToolCallOutcome.tsx

@@ -0,0 +1,95 @@
+import type { ToolCallPart } from '@tanstack/ai';
+import { toolCallOutputText } from '@cortex/client';
+import { useCortex } from '../context';
+import { CopyButton } from './CopyButton';
+import { JsonTree } from './JsonTree';
+
+type MessageToolCallOutcomeProps = {
+  toolCallPart: ToolCallPart;
+};
+
+/**
+ * How a tool call ended: its output, its error, or the approval exchange that stopped
+ * it. Exactly one of those applies, so this is a single switch on the state rather
+ * than the four independent conditions the shape suggests.
+ */
+export function MessageToolCallOutcome({ toolCallPart }: MessageToolCallOutcomeProps) {
+  const { t } = useCortex();
+  const { state, approval } = toolCallPart;
+  const output: unknown = toolCallPart.output;
+  const outputText = toolCallOutputText(toolCallPart);
+
+  function section() {
+    if (state === 'complete') {
+      return (
+        <div className="dbg-tool__section dbg-tool__section--success">
+          <div className="dbg-tool__section-bar">
+            <span className="dbg-tool__section-label dbg-tool__section-label--success">
+              {t('translate_output')}
+            </span>
+            <span className="dbg-tool__section-lang">json</span>
+            <CopyButton value={outputText} />
+          </div>
+          <div dir="ltr" className="dbg-tool__tree">
+            <JsonTree data={output} expandDepth={2} />
+          </div>
+        </div>
+      );
+    }
+
+    if (state === 'error') {
+      return (
+        <div className="dbg-tool__section dbg-tool__section--error">
+          <div className="dbg-tool__section-bar">
+            <span className="dbg-tool__section-label dbg-tool__section-label--error">
+              {t('translate_error')}
+            </span>
+            <CopyButton value={outputText} />
+          </div>
+          <pre dir="ltr" className="dbg-tool__error-pre">
+            {outputText}
+          </pre>
+        </div>
+      );
+    }
+
+    if (state === 'approval-requested') {
+      return (
+        <div className="dbg-tool__section dbg-tool__section--approval">
+          <div className="dbg-tool__section-bar">
+            <span className="dbg-tool__section-label dbg-tool__section-label--approval">
+              {t('translate_approval_requested')}
+            </span>
+            <span className="dbg-tool__section-lang">{approval?.id}</span>
+          </div>
+          <div className="dbg-tool__message dbg-tool__message--approval">
+            {t('translate_waiting_for_approval')}
+          </div>
+        </div>
+      );
+    }
+
+    if (state === 'approval-responded') {
+      return (
+        <div className="dbg-tool__section dbg-tool__section--approval">
+          <div className="dbg-tool__section-bar">
+            <span className="dbg-tool__section-label dbg-tool__section-label--approval">
+              {t('translate_approval_response')}
+            </span>
+            <span className="dbg-tool__section-lang">{approval?.id}</span>
+          </div>
+          <div className="dbg-tool__message dbg-tool__message--approval">
+            {t(approval?.approved ? 'translate_tool_approved' : 'translate_tool_response_received')}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  // Angular renders this component inside its own host element, which keeps the
+  // outcome section out of `.dbg-tool__section:not(:first-child)` separators.
+  // This wrapper is that host's equivalent.
+  return <div>{section()}</div>;
+}

package/src/components/MessageToolCallPart.tsx

@@ -0,0 +1,95 @@
+import type { ToolCallPart } from '@tanstack/ai';
+import { highlightCode, splitToolCallInput } from '@cortex/client';
+import { useCortex } from '../context';
+import { CopyButton } from './CopyButton';
+import { JsonTree } from './JsonTree';
+import { MessageToolCallOutcome } from './MessageToolCallOutcome';
+import { MessageToolCallStatus } from './MessageToolCallStatus';
+
+type MessageToolCallPartProps = {
+  toolCallPart: ToolCallPart;
+};
+
+/**
+ * One tool call in the debug view: what it was asked to do, and — delegated to the
+ * status badge and outcome panel — where it got to and how it ended.
+ */
+export function MessageToolCallPart({ toolCallPart }: MessageToolCallPartProps) {
+  const { t } = useCortex();
+
+  const { codeSnippets, remainingInput, remainingInputText } = splitToolCallInput(
+    toolCallPart.input,
+  );
+
+  return (
+    <details className="dbg-tool" data-state={toolCallPart.state}>
+      <summary className="dbg-tool__summary">
+        <div className="dbg-tool__header">
+          <div className="dbg-tool__meta">
+            <div className="dbg-tool__title-row">
+              <span className="dbg-tool__name" title={toolCallPart.name}>
+                {toolCallPart.name}
+              </span>
+            </div>
+            <div className="dbg-tool__id-row">
+              <span className="dbg-tool__id">{toolCallPart.id}</span>
+            </div>
+          </div>
+
+          <div className="dbg-tool__actions">
+            <MessageToolCallStatus toolCallPart={toolCallPart} />
+
+            <svg
+              className="dbg-tool__chevron"
+              width="14"
+              height="14"
+              viewBox="0 0 20 20"
+              fill="none"
+            >
+              <path
+                d="m5.75 8.25 4.25 4.25 4.25-4.25"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </summary>
+
+      <div className="dbg-tool__body">
+        {codeSnippets.map((snippet) => (
+          <div className="dbg-tool__section" key={snippet.key}>
+            <div className="dbg-tool__section-bar">
+              <span className="dbg-tool__section-label">{snippet.key}</span>
+              <span className="dbg-tool__section-lang">{snippet.lang}</span>
+              <CopyButton value={snippet.value} />
+            </div>
+            <pre dir="ltr" className="dbg-tool__pre">
+              <code
+                className="hljs"
+                dangerouslySetInnerHTML={{ __html: highlightCode(snippet.value, snippet.lang) }}
+              ></code>
+            </pre>
+          </div>
+        ))}
+
+        {!!remainingInput && (
+          <div className="dbg-tool__section">
+            <div className="dbg-tool__section-bar">
+              <span className="dbg-tool__section-label">{t('translate_input')}</span>
+              <span className="dbg-tool__section-lang">json</span>
+              <CopyButton value={remainingInputText} />
+            </div>
+            <div dir="ltr" className="dbg-tool__tree">
+              <JsonTree data={remainingInput} expandDepth={2} />
+            </div>
+          </div>
+        )}
+
+        <MessageToolCallOutcome toolCallPart={toolCallPart} />
+      </div>
+    </details>
+  );
+}

package/src/components/MessageToolCallStatus.tsx

@@ -0,0 +1,35 @@
+import type { ToolCallPart } from '@tanstack/ai';
+import { toolCallBadge } from '@cortex/client';
+import { cx } from '../cx';
+import { useCortex } from '../context';
+
+type MessageToolCallStatusProps = {
+  toolCallPart: ToolCallPart;
+};
+
+/**
+ * The badge in a tool call's header saying where the call has got to. Split out of
+ * the tool-call part so that part is left describing layout rather than branching
+ * seven ways on a state it does not otherwise care about.
+ */
+export function MessageToolCallStatus({ toolCallPart }: MessageToolCallStatusProps) {
+  const { t } = useCortex();
+  const badge = toolCallBadge(toolCallPart);
+
+  // The outer span stands in for Angular's <cortex-message-tool-call-status>
+  // host, keeping the badge itself out of flex-item blockification.
+  return (
+    <span>
+      <span
+        className={cx('dbg-tool__state', badge.modifier && `dbg-tool__state--${badge.modifier}`)}
+      >
+        {badge.pulse && (
+          <span
+            className={cx('dbg-tool__pulse', badge.pulse === 'violet' && 'dbg-tool__pulse--violet')}
+          ></span>
+        )}
+        {t(badge.labelKey)}
+      </span>
+    </span>
+  );
+}

package/src/components/SubtleActivity.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { useCortex } from '../context';
+import { cx } from '../cx';
+
+type LabelState = 'idle' | 'exiting' | 'enter-start' | 'entering';
+
+type SubtleActivityProps = {
+  labels: string[];
+  className?: string;
+};
+
+export function SubtleActivity({ labels, className }: SubtleActivityProps) {
+  const { t } = useCortex();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [labelState, setLabelState] = useState<LabelState>('idle');
+
+  // Read through a ref so a changing labels array never restarts the cycle.
+  const labelCount = useRef(labels.length);
+  labelCount.current = labels.length;
+
+  useEffect(() => {
+    // The three timeouts run in sequence, so one handle covers all of them.
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    let frame: number | undefined;
+
+    function scheduleNextTransition() {
+      timeout = setTimeout(() => {
+        setLabelState('exiting');
+
+        timeout = setTimeout(() => {
+          setCurrentIndex((i) => (i + 1) % labelCount.current);
+          setLabelState('enter-start');
+
+          frame = requestAnimationFrame(() => {
+            setLabelState('entering');
+
+            timeout = setTimeout(() => {
+              setLabelState('idle');
+              scheduleNextTransition();
+            }, 300);
+          });
+        }, 300);
+      }, 2000);
+    }
+
+    scheduleNextTransition();
+
+    return () => {
+      if (timeout) clearTimeout(timeout);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <div className={cx('cortex-subtle-activity', className)}>
+      <div className="cortex-subtle-activity__dots">
+        <span className="cortex-subtle-activity__dot"></span>
+        <span className="cortex-subtle-activity__dot cortex-subtle-activity__dot--d1"></span>
+        <span className="cortex-subtle-activity__dot cortex-subtle-activity__dot--d2"></span>
+      </div>
+
+      <div className="cortex-subtle-activity__label-mask">
+        <span
+          className={cx(
+            'cortex-subtle-activity__label',
+            `cortex-subtle-activity__label--${labelState}`,
+          )}
+        >
+          {t(labels[currentIndex])}
+        </span>
+      </div>
+    </div>
+  );
+}