@xemahq/ui-kernel 0.1.6 → 0.1.7

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

@@ -0,0 +1,153 @@
+/**
+ * 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 = String(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

@@ -0,0 +1,157 @@
+/**
+ * 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 (Pillar 2 wires
+ * 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

@@ -0,0 +1,78 @@
+/**
+ * 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',
+          }}
+        >
+          {text}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+/**
+ * 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

@@ -0,0 +1,89 @@
+/**
+ * Token/cost meter — input & output token counts plus a running dollar
+ * cost. Used both inside the ContextHeader and (in Pillar 2) 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>
+  );
+}