@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/session-kit/display/MD.tsx

@@ -1,162 +0,0 @@
-/**
- * Minimal, dependency-free markdown renderer for transcript bodies
- * (bold, inline code, fenced blocks, bullet lists). The host shell has
- * a full `MarkdownRenderer` (ReactMarkdown + mermaid + syntax
- * highlighting), but that renderer imports framework modules
- * (`next/navigation`, …) and cannot live in this layer-agnostic kernel
- * package.
- *
- * So the kit ships this tiny fallback AND every body-rendering component
- * accepts a `renderMarkdown` prop — the host injects its own renderer
- * for rich content, the kit falls back to `MD` when none is supplied.
- *
- * Inline formatting is parsed into real React nodes (no
- * `dangerouslySetInnerHTML`) so it is XSS-safe by construction.
- */
-import { Fragment, type ReactElement, type ReactNode } from 'react';
-
-/** Signature a host markdown renderer must satisfy to plug into the kit. */
-export type MarkdownRender = (text: string) => ReactNode;
-
-const INLINE_CODE_STYLE = {
-  fontSize: 12,
-  padding: '1px 5px',
-  background: 'hsl(var(--paper-sunk))',
-  border: '1px solid hsl(var(--rule))',
-  borderRadius: 4,
-  color: 'hsl(var(--ink))',
-} as const;
-
-/** Parse `**bold**` and `` `code` `` spans into React nodes. */
-function renderInline(text: string): ReactNode[] {
-  const nodes: ReactNode[] = [];
-  // Split on bold or inline-code tokens, keeping the delimiters.
-  const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g);
-  parts.forEach((part, index) => {
-    if (!part) {
-      return;
-    }
-    if (part.startsWith('**') && part.endsWith('**')) {
-      nodes.push(
-        <strong
-          key={index}
-          style={{ fontWeight: 600, color: 'hsl(var(--ink))' }}
-        >
-          {part.slice(2, -2)}
-        </strong>,
-      );
-      return;
-    }
-    if (part.startsWith('`') && part.endsWith('`')) {
-      nodes.push(
-        <code key={index} className="mono" style={INLINE_CODE_STYLE}>
-          {part.slice(1, -1)}
-        </code>,
-      );
-      return;
-    }
-    // Plain text — preserve hard line breaks.
-    const lines = part.split('\n');
-    lines.forEach((line, lineIndex) => {
-      if (lineIndex > 0) {
-        nodes.push(<br key={`${index}-br-${lineIndex}`} />);
-      }
-      if (line) {
-        nodes.push(<Fragment key={`${index}-t-${lineIndex}`}>{line}</Fragment>);
-      }
-    });
-  });
-  return nodes;
-}
-
-export interface MDProps {
-  readonly children: string;
-}
-
-export function MD({ children }: MDProps): ReactElement {
-  const text = children;
-  const blocks = text.split(/\n\n+/);
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
-      {blocks.map((block, index) => {
-        if (block.startsWith('```')) {
-          const code = block.replace(/```[a-z]*\n?/i, '').replace(/```$/, '');
-          return (
-            <pre
-              key={index}
-              className="mono"
-              style={{
-                margin: 0,
-                padding: '11px 13px',
-                background: 'hsl(var(--paper-sunk))',
-                border: '1px solid hsl(var(--rule))',
-                borderRadius: 8,
-                fontSize: 12,
-                lineHeight: 1.6,
-                overflowX: 'auto',
-                color: 'hsl(var(--ink-2))',
-                whiteSpace: 'pre',
-              }}
-            >
-              {code}
-            </pre>
-          );
-        }
-        if (/^[-•]\s/m.test(block)) {
-          const items = block.split('\n').filter(Boolean);
-          return (
-            <ul
-              key={index}
-              style={{
-                margin: 0,
-                paddingLeft: 2,
-                listStyle: 'none',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 5,
-              }}
-            >
-              {items.map((item, itemIndex) => (
-                <li
-                  key={itemIndex}
-                  style={{
-                    display: 'flex',
-                    gap: 9,
-                    fontSize: 13.5,
-                    lineHeight: 1.55,
-                    color: 'hsl(var(--ink-2))',
-                  }}
-                >
-                  <span
-                    style={{
-                      marginTop: 8,
-                      width: 4,
-                      height: 4,
-                      borderRadius: '50%',
-                      background: 'hsl(var(--ink-4))',
-                      flexShrink: 0,
-                    }}
-                  />
-                  <span>{renderInline(item.replace(/^[-•]\s/, ''))}</span>
-                </li>
-              ))}
-            </ul>
-          );
-        }
-        return (
-          <p
-            key={index}
-            style={{
-              margin: 0,
-              fontSize: 13.5,
-              lineHeight: 1.62,
-              color: 'hsl(var(--ink-2))',
-            }}
-          >
-            {renderInline(block)}
-          </p>
-        );
-      })}
-    </div>
-  );
-}

package/src/session-kit/display/MessageTurn.tsx

@@ -1,157 +0,0 @@
-/**
- * A single message turn. User turns render a right-aligned soft bubble;
- * agent turns render a thin gutter + role caption + flowing body.
- *
- * The body is rendered by `renderMarkdown` when supplied (host shells wire
- * the host's full `MarkdownRenderer` here) and falls back to the kit's
- * built-in `MD` otherwise — so the kit is self-contained but never
- * forces its tiny renderer on a host that has a richer one.
- */
-
-import { MD, type MarkdownRender } from './MD';
-import { TypingDots } from './TypingDots';
-import { SessionSkin, TurnRole } from '../lib/enums';
-import { portalAccent, type PortalAccentVar } from '../lib/portal-accent';
-
-import type { ReactElement, ReactNode } from 'react';
-
-export interface SessionMessage {
-  readonly role: TurnRole;
-  readonly content?: string;
-  /** Agent display name (caption). */
-  readonly agent?: string;
-  /** Optional phase chip text. */
-  readonly phase?: string;
-  /** True while this turn is actively streaming. */
-  readonly streaming?: boolean;
-}
-
-export interface MessageTurnProps {
-  readonly msg: SessionMessage;
-  readonly skin?: SessionSkin;
-  /** Active portal accent token; defaults to the brand accent. */
-  readonly accentVar?: PortalAccentVar;
-  /** Host markdown renderer; falls back to the kit's `MD`. */
-  readonly renderMarkdown?: MarkdownRender;
-  /** Agent avatar glyph (host-supplied) shown in the gutter. */
-  readonly agentIcon?: ReactNode;
-  /** Inline widgets (tool strip, diff, todo, …) rendered below the body. */
-  readonly children?: ReactNode;
-}
-
-export function MessageTurn({
-  msg,
-  skin = SessionSkin.Minimal,
-  accentVar,
-  renderMarkdown,
-  agentIcon,
-  children,
-}: MessageTurnProps): ReactElement {
-  if (msg.role === TurnRole.User) {
-    return (
-      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '2px 0' }}>
-        <div
-          style={{
-            maxWidth: '78%',
-            padding: '9px 13px',
-            borderRadius: '12px 12px 4px 12px',
-            background: 'hsl(var(--paper-sunk))',
-            border: '1px solid hsl(var(--rule))',
-            fontSize: 13.5,
-            lineHeight: 1.55,
-            color: 'hsl(var(--ink))',
-          }}
-        >
-          {msg.content}
-        </div>
-      </div>
-    );
-  }
-
-  const accent = portalAccent(accentVar);
-  const renderBody: MarkdownRender = renderMarkdown ?? ((t) => <MD>{t}</MD>);
-  const functional = skin === SessionSkin.Functional;
-
-  return (
-    <div style={{ display: 'flex', gap: 12, padding: '2px 0' }}>
-      <div
-        style={{
-          width: 26,
-          flexShrink: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: 4,
-        }}
-      >
-        <span
-          style={{
-            width: 26,
-            height: 26,
-            borderRadius: 8,
-            display: 'grid',
-            placeItems: 'center',
-            background: functional ? portalAccent(accentVar, 0.12) : 'transparent',
-            color: accent,
-            border: functional ? 'none' : '1px solid hsl(var(--rule-2))',
-          }}
-        >
-          {agentIcon}
-        </span>
-        <span
-          style={{
-            flex: 1,
-            width: 1.5,
-            background: 'hsl(var(--rule))',
-            borderRadius: 1,
-            minHeight: 8,
-          }}
-        />
-      </div>
-      <div style={{ flex: 1, minWidth: 0, paddingBottom: 6 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
-          <span className="cap" style={{ color: 'hsl(var(--ink-3))' }}>
-            {msg.agent ?? 'Agent'}
-          </span>
-          {msg.phase && (
-            <span
-              className="mono"
-              style={{
-                fontSize: 10,
-                color: accent,
-                padding: '1px 6px',
-                background: portalAccent(accentVar, 0.09),
-                borderRadius: 5,
-                border: `1px solid ${portalAccent(accentVar, 0.2)}`,
-              }}
-            >
-              {msg.phase}
-            </span>
-          )}
-          {msg.streaming && (
-            <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 5,
-                fontSize: 11,
-                color: 'hsl(var(--info))',
-              }}
-            >
-              <TypingDots />
-            </span>
-          )}
-        </div>
-        {msg.content && (
-          <div
-            className={msg.streaming && !children ? 'xk-caret' : ''}
-            style={{ display: 'inline' }}
-          >
-            {renderBody(msg.content)}
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/session-kit/display/ThinkingPanel.tsx

@@ -1,81 +0,0 @@
-/**
- * Collapsible agent-reasoning panel. Dashed left border when open.
- * The disclosure + brain icons are host-supplied.
- */
-import { useState, type ReactElement, type ReactNode } from 'react';
-
-import { SessionSkin } from '../lib/enums';
-
-export interface ThinkingPanelProps {
-  readonly text: string;
-  readonly skin?: SessionSkin;
-  readonly defaultOpen?: boolean;
-  /** Icon shown when collapsed (e.g. a chevron-right). */
-  readonly collapsedIcon?: ReactNode;
-  /** Icon shown when expanded (e.g. a chevron-down). */
-  readonly expandedIcon?: ReactNode;
-  /** Leading "thinking" glyph (e.g. a brain). */
-  readonly leadingIcon?: ReactNode;
-}
-
-export function ThinkingPanel({
-  text,
-  skin = SessionSkin.Minimal,
-  defaultOpen = false,
-  collapsedIcon,
-  expandedIcon,
-  leadingIcon,
-}: ThinkingPanelProps): ReactElement {
-  // `skin` is accepted for API parity with the rest of the kit; the
-  // thinking panel renders identically in both skins today.
-  void skin;
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div style={{ marginTop: 9 }}>
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 7,
-          fontSize: 12,
-          color: 'hsl(var(--ink-3))',
-          padding: '3px 2px',
-          transition: 'color 140ms ease',
-        }}
-      >
-        {open ? expandedIcon : collapsedIcon}
-        {leadingIcon && (
-          <span style={{ display: 'inline-flex', color: 'hsl(var(--p-people))' }}>
-            {leadingIcon}
-          </span>
-        )}
-        <span style={{ fontWeight: 500 }}>Thinking</span>
-        <span className="mono" style={{ fontSize: 10.5, opacity: 0.6 }}>
-          {text.length} chars
-        </span>
-      </button>
-      {open && (
-        <div
-          style={{
-            marginTop: 5,
-            marginLeft: 6,
-            paddingLeft: 12,
-            borderLeft: '1.5px dashed hsl(var(--rule-2))',
-            fontSize: 12.5,
-            lineHeight: 1.6,
-            fontStyle: 'italic',
-            color: 'hsl(var(--ink-3))',
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            wordBreak: 'break-word',
-            minWidth: 0,
-          }}
-        >
-          {text}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/session-kit/display/TodoChecklist.tsx

@@ -1,120 +0,0 @@
-/**
- * Plan / todo checklist. Each row's state is a `TodoState` enum value.
- * The header glyph, the "done" check, and the "active" spinner are
- * host-supplied icon nodes.
- */
-import { SessionSkin, TodoState } from '../lib/enums';
-
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-
-
-export interface TodoItem {
-  readonly label: string;
-  readonly state: TodoState;
-}
-
-export interface TodoChecklistProps {
-  readonly items: ReadonlyArray<TodoItem>;
-  readonly skin?: SessionSkin;
-  readonly title?: string;
-  /** Header glyph (e.g. a check icon). */
-  readonly titleIcon?: ReactNode;
-  /** Check mark rendered inside a completed item's box. */
-  readonly doneIcon?: ReactNode;
-  /** Spinner rendered inside the active item's box. */
-  readonly activeIcon?: ReactNode;
-  readonly style?: CSSProperties;
-}
-
-export function TodoChecklist({
-  items,
-  skin = SessionSkin.Minimal,
-  title = 'Plan',
-  titleIcon,
-  doneIcon,
-  activeIcon,
-  style,
-}: TodoChecklistProps): ReactElement {
-  const done = items.filter((i) => i.state === TodoState.Done).length;
-  return (
-    <div
-      style={{
-        marginTop: 9,
-        border: '1px solid hsl(var(--rule))',
-        borderRadius: 9,
-        background: 'hsl(var(--paper-elev))',
-        overflow: 'hidden',
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '8px 12px',
-          borderBottom: '1px solid hsl(var(--rule))',
-          background:
-            skin === SessionSkin.Functional ? 'hsl(var(--muted))' : 'transparent',
-        }}
-      >
-        {titleIcon && (
-          <span style={{ display: 'inline-flex', color: 'hsl(var(--primary))' }}>
-            {titleIcon}
-          </span>
-        )}
-        <span className="cap">{title}</span>
-        <span style={{ flex: 1 }} />
-        <span className="mono" style={{ fontSize: 11, color: 'hsl(var(--ink-3))' }}>
-          {done}/{items.length}
-        </span>
-      </div>
-      <div style={{ padding: '6px 0' }}>
-        {items.map((item, index) => {
-          const isDone = item.state === TodoState.Done;
-          const isActive = item.state === TodoState.Active;
-          return (
-            <div
-              key={index}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 10,
-                padding: '5px 12px',
-              }}
-            >
-              <span
-                style={{
-                  width: 16,
-                  height: 16,
-                  borderRadius: 5,
-                  flexShrink: 0,
-                  display: 'grid',
-                  placeItems: 'center',
-                  border: isDone
-                    ? 'none'
-                    : `1.5px solid ${isActive ? 'hsl(var(--warning))' : 'hsl(var(--rule-2))'}`,
-                  background: isDone ? 'hsl(var(--success))' : 'transparent',
-                  color: '#fff',
-                }}
-              >
-                {isDone && doneIcon}
-                {isActive && activeIcon}
-              </span>
-              <span
-                style={{
-                  fontSize: 13,
-                  color: isDone ? 'hsl(var(--ink-4))' : 'hsl(var(--ink-2))',
-                  textDecoration: isDone ? 'line-through' : 'none',
-                  fontWeight: isActive ? 500 : 400,
-                }}
-              >
-                {item.label}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/session-kit/display/TokenMeter.tsx

@@ -1,89 +0,0 @@
-/**
- * Token/cost meter — input & output token counts plus a running dollar
- * cost. Used both inside the ContextHeader and (in host shells) absolute
- * top-right of the composer.
- */
-import { SessionSkin } from '../lib/enums';
-
-import type { CSSProperties, ReactElement } from 'react';
-
-
-export interface TokenCounts {
-  readonly input: number;
-  readonly output: number;
-}
-
-export interface TokenMeterProps {
-  readonly tokens: TokenCounts;
-  readonly cost: number;
-  readonly skin?: SessionSkin;
-  /**
-   * When true, shows a pulsing `--info` dot — used by the composer while
-   * the agent is streaming (that is when token movement matters).
-   */
-  readonly streaming?: boolean;
-  readonly style?: CSSProperties;
-}
-
-function fmt(n: number): string {
-  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
-}
-
-export function TokenMeter({
-  tokens,
-  cost,
-  skin = SessionSkin.Minimal,
-  streaming = false,
-  style,
-}: TokenMeterProps): ReactElement {
-  const functional = skin === SessionSkin.Functional;
-  return (
-    <span
-      className="mono"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 9,
-        fontSize: 11,
-        color: 'hsl(var(--ink-3))',
-        padding: functional ? '3px 9px' : 0,
-        background: functional ? 'hsl(var(--muted))' : 'transparent',
-        border: functional ? '1px solid hsl(var(--rule))' : 'none',
-        borderRadius: 7,
-        ...style,
-      }}
-    >
-      {streaming && (
-        <span
-          className="xk-pulse-soft"
-          style={{
-            width: 5,
-            height: 5,
-            borderRadius: '50%',
-            background: 'hsl(var(--info))',
-            flexShrink: 0,
-          }}
-        />
-      )}
-      <span title="input tokens">
-        {fmt(tokens.input)}
-        <span style={{ opacity: 0.55 }}> in</span>
-      </span>
-      <span title="output tokens">
-        {fmt(tokens.output)}
-        <span style={{ opacity: 0.55 }}> out</span>
-      </span>
-      <span
-        style={{
-          width: 3,
-          height: 3,
-          borderRadius: '50%',
-          background: 'hsl(var(--ink-4))',
-        }}
-      />
-      <span style={{ color: 'hsl(var(--ink-2))', fontWeight: 600 }}>
-        ${cost.toFixed(3)}
-      </span>
-    </span>
-  );
-}