mu-coding 0.8.0 → 0.9.0

package/src/tui/components/messages/markdown.tsx

@@ -0,0 +1,402 @@
+import { Box, Text } from 'ink';
+import type React from 'react';
+import { useTheme } from '../../context/ThemeContext';
+import type { Theme } from '../../theme/types';
+
+/**
+ * Lightweight Markdown renderer for assistant messages. Intentionally
+ * pragmatic — covers headings, lists, tables, blockquotes, code blocks,
+ * and the common inline tokens (bold, italic, inline code, links).
+ *
+ * Implementation is two-pass:
+ *  - `parseBlocks` splits the raw text into a list of typed blocks
+ *  - each block has its own React renderer that delegates inline
+ *    formatting to `renderInline` for paragraph / list / heading content.
+ *
+ * No external markdown dependency: the renderer must work in any host
+ * shipping `mu-coding` without forcing them to ship a parser.
+ */
+
+// ─── Block model ──────────────────────────────────────────────────────────────
+
+type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; text: string }
+  | { type: 'paragraph'; text: string }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'code'; lang: string; lines: string[] }
+  | { type: 'quote'; lines: string[] }
+  | { type: 'table'; header: string[]; rows: string[][] }
+  | { type: 'hr' };
+
+const FENCE = /^```(.*)$/;
+const HEADING = /^(#{1,3})\s+(.*)$/;
+const UL_ITEM = /^(\s*)[-*+]\s+(.*)$/;
+const OL_ITEM = /^(\s*)\d+\.\s+(.*)$/;
+const QUOTE = /^>\s?(.*)$/;
+const HR = /^\s*(---|\*\*\*|___)\s*$/;
+const TABLE_SEP = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/;
+const TABLE_ROW = /^\s*\|.*\|\s*$/;
+
+function splitTableRow(line: string): string[] {
+  // Trim outer pipes then split. Handles `| a | b |` and `a | b`.
+  const trimmed = line.trim().replace(/^\|/, '').replace(/\|$/, '');
+  return trimmed.split('|').map((c) => c.trim());
+}
+
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: block parsing is dispatch-heavy
+function parseBlocks(input: string): Block[] {
+  const lines = input.split('\n');
+  const blocks: Block[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Code fence — capture until matching closing fence (or EOF).
+    const fence = line.match(FENCE);
+    if (fence) {
+      const lang = fence[1].trim();
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !FENCE.test(lines[i])) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++; // skip closing fence
+      blocks.push({ type: 'code', lang, lines: codeLines });
+      continue;
+    }
+
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    if (HR.test(line)) {
+      blocks.push({ type: 'hr' });
+      i++;
+      continue;
+    }
+
+    const heading = line.match(HEADING);
+    if (heading) {
+      blocks.push({ type: 'heading', level: heading[1].length as 1 | 2 | 3, text: heading[2] });
+      i++;
+      continue;
+    }
+
+    // Quote — consume consecutive `> ` lines.
+    if (QUOTE.test(line)) {
+      const quoteLines: string[] = [];
+      while (i < lines.length && QUOTE.test(lines[i])) {
+        quoteLines.push((lines[i].match(QUOTE) as RegExpMatchArray)[1]);
+        i++;
+      }
+      blocks.push({ type: 'quote', lines: quoteLines });
+      continue;
+    }
+
+    // Table — header row, separator row, then body rows.
+    if (TABLE_ROW.test(line) && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1])) {
+      const header = splitTableRow(line);
+      i += 2; // skip header + separator
+      const rows: string[][] = [];
+      while (i < lines.length && TABLE_ROW.test(lines[i])) {
+        rows.push(splitTableRow(lines[i]));
+        i++;
+      }
+      blocks.push({ type: 'table', header, rows });
+      continue;
+    }
+
+    // List — ordered or unordered, contiguous items only.
+    const ulMatch = line.match(UL_ITEM);
+    const olMatch = line.match(OL_ITEM);
+    if (ulMatch || olMatch) {
+      const ordered = !!olMatch;
+      const re = ordered ? OL_ITEM : UL_ITEM;
+      const items: string[] = [];
+      while (i < lines.length) {
+        const m = lines[i].match(re);
+        if (!m) break;
+        items.push(m[2]);
+        i++;
+      }
+      blocks.push({ type: 'list', ordered, items });
+      continue;
+    }
+
+    // Paragraph — contiguous non-empty, non-block lines.
+    const paraLines: string[] = [];
+    while (i < lines.length) {
+      const cur = lines[i];
+      if (cur.trim() === '') break;
+      if (FENCE.test(cur) || HEADING.test(cur) || QUOTE.test(cur) || HR.test(cur)) break;
+      if (UL_ITEM.test(cur) || OL_ITEM.test(cur)) break;
+      if (TABLE_ROW.test(cur) && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1])) break;
+      paraLines.push(cur);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      blocks.push({ type: 'paragraph', text: paraLines.join(' ') });
+    }
+  }
+
+  return blocks;
+}
+
+// ─── Inline rendering ─────────────────────────────────────────────────────────
+
+interface InlineToken {
+  kind: 'text' | 'bold' | 'italic' | 'code' | 'link';
+  text: string;
+  href?: string;
+}
+
+const INLINE_PATTERNS: { kind: InlineToken['kind']; re: RegExp; capture: number; href?: number }[] = [
+  // Order matters: longer / more specific patterns first.
+  { kind: 'code', re: /`([^`\n]+)`/, capture: 1 },
+  { kind: 'link', re: /\[([^\]]+)\]\(([^)]+)\)/, capture: 1, href: 2 },
+  { kind: 'bold', re: /\*\*([^*\n]+)\*\*/, capture: 1 },
+  { kind: 'bold', re: /__([^_\n]+)__/, capture: 1 },
+  { kind: 'italic', re: /\*([^*\n]+)\*/, capture: 1 },
+  { kind: 'italic', re: /_([^_\n]+)_/, capture: 1 },
+];
+
+function tokenizeInline(input: string): InlineToken[] {
+  const out: InlineToken[] = [];
+  let cursor = 0;
+  while (cursor < input.length) {
+    let bestIdx = -1;
+    let bestMatch: { kind: InlineToken['kind']; text: string; href?: string; raw: string } | null = null;
+    for (const p of INLINE_PATTERNS) {
+      const sub = input.slice(cursor);
+      const m = sub.match(p.re);
+      if (m && m.index !== undefined) {
+        if (bestIdx === -1 || m.index < bestIdx) {
+          bestIdx = m.index;
+          bestMatch = {
+            kind: p.kind,
+            text: m[p.capture],
+            href: p.href !== undefined ? m[p.href] : undefined,
+            raw: m[0],
+          };
+        }
+      }
+    }
+    if (!bestMatch || bestIdx === -1) {
+      out.push({ kind: 'text', text: input.slice(cursor) });
+      break;
+    }
+    if (bestIdx > 0) {
+      out.push({ kind: 'text', text: input.slice(cursor, cursor + bestIdx) });
+    }
+    out.push({ kind: bestMatch.kind, text: bestMatch.text, href: bestMatch.href });
+    cursor += bestIdx + bestMatch.raw.length;
+  }
+  return out;
+}
+
+function renderInline(text: string, theme: Theme, baseColor?: string): React.ReactNode[] {
+  const tokens = tokenizeInline(text);
+  return tokens.map((tok, i) => {
+    const key = `${i}-${tok.kind}`;
+    if (tok.kind === 'text') {
+      return (
+        <Text key={key} color={baseColor}>
+          {tok.text}
+        </Text>
+      );
+    }
+    if (tok.kind === 'bold') {
+      return (
+        <Text key={key} color={baseColor} bold={true}>
+          {tok.text}
+        </Text>
+      );
+    }
+    if (tok.kind === 'italic') {
+      return (
+        <Text key={key} color={baseColor} italic={true}>
+          {tok.text}
+        </Text>
+      );
+    }
+    if (tok.kind === 'code') {
+      return (
+        <Text key={key} color={theme.markdown.codeText} backgroundColor={theme.markdown.codeBackground}>
+          {` ${tok.text} `}
+        </Text>
+      );
+    }
+    if (tok.kind === 'link') {
+      return (
+        <Text key={key} color={theme.markdown.link} underline={true}>
+          {tok.text}
+          {tok.href ? (
+            <Text color={theme.markdown.link} dimColor={true}>
+              {' '}
+              ({tok.href})
+            </Text>
+          ) : null}
+        </Text>
+      );
+    }
+    return null;
+  });
+}
+
+// ─── Block renderers ──────────────────────────────────────────────────────────
+
+function HeadingBlock({ block, theme }: { block: Extract<Block, { type: 'heading' }>; theme: Theme }) {
+  const prefix = block.level === 1 ? '# ' : block.level === 2 ? '## ' : '### ';
+  return (
+    <Box marginBottom={1}>
+      <Text color={theme.markdown.heading} bold={block.level <= 2}>
+        {prefix}
+        {block.text}
+      </Text>
+    </Box>
+  );
+}
+
+function ParagraphBlock({
+  block,
+  theme,
+  color,
+}: {
+  block: Extract<Block, { type: 'paragraph' }>;
+  theme: Theme;
+  color?: string;
+}) {
+  return (
+    <Box marginBottom={1}>
+      <Text wrap="wrap" color={color}>
+        {renderInline(block.text, theme, color)}
+      </Text>
+    </Box>
+  );
+}
+
+function ListBlock({ block, theme, color }: { block: Extract<Block, { type: 'list' }>; theme: Theme; color?: string }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {block.items.map((item, idx) => {
+        const marker = block.ordered ? `${idx + 1}.` : '•';
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: list items have no stable id
+          <Box key={idx}>
+            <Text color={theme.markdown.bullet}>{`  ${marker} `}</Text>
+            <Box flexShrink={1} flexGrow={1}>
+              <Text wrap="wrap" color={color}>
+                {renderInline(item, theme, color)}
+              </Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function CodeBlock({ block, theme }: { block: Extract<Block, { type: 'code' }>; theme: Theme }) {
+  return (
+    <Box flexDirection="column" marginBottom={1} paddingX={1} backgroundColor={theme.markdown.codeBlockBackground}>
+      {block.lang && (
+        <Text dimColor={true} color={theme.markdown.codeBlockText}>
+          {block.lang}
+        </Text>
+      )}
+      {block.lines.map((ln, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: code lines have no stable id and may repeat
+        <Text key={`${i}-${ln}`} color={theme.markdown.codeBlockText}>
+          {ln || ' '}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function QuoteBlock({ block, theme }: { block: Extract<Block, { type: 'quote' }>; theme: Theme }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {block.lines.map((ln, i) => (
+        <Box key={`${i}-${ln}`}>
+          <Text color={theme.markdown.blockquote}> │ </Text>
+          <Box flexShrink={1} flexGrow={1}>
+            <Text wrap="wrap" color={theme.markdown.blockquote} italic={true}>
+              {renderInline(ln, theme, theme.markdown.blockquote)}
+            </Text>
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function TableBlock({ block, theme }: { block: Extract<Block, { type: 'table' }>; theme: Theme }) {
+  // Compute column widths based on the longest cell per column.
+  const colCount = Math.max(block.header.length, ...block.rows.map((r) => r.length));
+  const widths: number[] = new Array(colCount).fill(0);
+  for (let c = 0; c < colCount; c++) {
+    widths[c] = (block.header[c] ?? '').length;
+    for (const row of block.rows) {
+      widths[c] = Math.max(widths[c], (row[c] ?? '').length);
+    }
+  }
+  const renderRow = (cells: string[], bold: boolean, key: string) => (
+    <Box key={key}>
+      {Array.from({ length: colCount }, (_, c) => (
+        <Box key={c} marginRight={c === colCount - 1 ? 0 : 2}>
+          <Text bold={bold}>{(cells[c] ?? '').padEnd(widths[c])}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+  const sep = (
+    <Box>
+      {Array.from({ length: colCount }, (_, c) => (
+        <Box key={c} marginRight={c === colCount - 1 ? 0 : 2}>
+          <Text color={theme.markdown.tableBorder}>{'─'.repeat(widths[c])}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {renderRow(block.header, true, 'header')}
+      {sep}
+      {block.rows.map((r, i) => renderRow(r, false, `r-${i}`))}
+    </Box>
+  );
+}
+
+function HrBlock({ theme }: { theme: Theme }) {
+  return (
+    <Box marginBottom={1}>
+      <Text color={theme.markdown.tableBorder}>{'─'.repeat(40)}</Text>
+    </Box>
+  );
+}
+
+// ─── Public renderer ─────────────────────────────────────────────────────────
+
+export function MarkdownContent({ content, color }: { content: string; color?: string }) {
+  const theme = useTheme();
+  const blocks = parseBlocks(content);
+  return (
+    <Box flexDirection="column">
+      {blocks.map((b, i) => {
+        const key = `${i}-${b.type}`;
+        if (b.type === 'heading') return <HeadingBlock key={key} block={b} theme={theme} />;
+        if (b.type === 'paragraph') return <ParagraphBlock key={key} block={b} theme={theme} color={color} />;
+        if (b.type === 'list') return <ListBlock key={key} block={b} theme={theme} color={color} />;
+        if (b.type === 'code') return <CodeBlock key={key} block={b} theme={theme} />;
+        if (b.type === 'quote') return <QuoteBlock key={key} block={b} theme={theme} />;
+        if (b.type === 'table') return <TableBlock key={key} block={b} theme={theme} />;
+        if (b.type === 'hr') return <HrBlock key={key} theme={theme} />;
+        return null;
+      })}
+    </Box>
+  );
+}

package/src/tui/components/messages/reasoningBlock.tsx

@@ -4,12 +4,14 @@ import { useTheme } from '../../context/ThemeContext';
 export function ReasoningBlock({ reasoning }: { reasoning: string }) {
   const theme = useTheme();
   return (
-    <Box flexDirection="column" marginTop={0} marginBottom={1}>
-      <Text color={theme.reasoning.title} italic={true}>
-        thinking
-      </Text>
-      <Text color={theme.reasoning.body} italic={true} wrap="wrap">
-        {reasoning}
+    <Box marginBottom={0}>
+      <Text wrap="wrap">
+        <Text color={theme.reasoning.title} italic={true}>
+          thinking:{' '}
+        </Text>
+        <Text color={theme.reasoning.body} italic={true}>
+          {reasoning}
+        </Text>
       </Text>
     </Box>
   );

package/src/tui/components/messages/streamingOutput.tsx

@@ -5,7 +5,7 @@ import { ReasoningBlock } from './reasoningBlock';
 export function StreamingOutput({ currentText, currentReasoning }: { currentText: string; currentReasoning: string }) {
   const theme = useTheme();
   return (
-    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={0}>
       {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
       <Text wrap="wrap">
         {currentText}

package/src/tui/components/messages/toolCallBlock.tsx

@@ -47,7 +47,7 @@ export function ToolCallBlock({
   const argSummary = getArgSummary(args, hint);
 
   return (
-    <Box flexDirection="column" flexShrink={0}>
+    <Box flexDirection="column" flexShrink={0} marginTop={1} marginBottom={1}>
       {!hasResult ? (
         <Box>
           <Text dimColor={true}>
@@ -114,7 +114,7 @@ function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
           </>
         )}
       </Text>
-      <Box flexDirection="column" backgroundColor={theme.tool.previewBackground} padding={1} marginTop={1}>
+      <Box flexDirection="column" backgroundColor={theme.tool.previewBackground} paddingX={1} paddingY={0}>
         <Text color={theme.tool.previewText}>{preview}</Text>
       </Box>
     </Box>

package/src/tui/components/messages/userMessage.tsx

@@ -11,7 +11,7 @@ export function UserMessage({ msg }: { msg: ChatMessage }) {
     <Box
       flexDirection="column"
       flexShrink={0}
-      marginY={1}
+      marginBottom={1}
       backgroundColor={theme.user.background}
       paddingX={1}
       paddingY={1}
@@ -23,9 +23,9 @@ export function UserMessage({ msg }: { msg: ChatMessage }) {
       borderStyle="single"
     >
       {badge && (
-        <Box marginBottom={1}>
+        <Box>
           <Text color={msg.display?.color} bold={true}>
-            [{badge}]
+            {badge.charAt(0).toUpperCase() + badge.slice(1)}
           </Text>
         </Box>
       )}

package/src/tui/components/primitives/toast.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useInput, useStdout } from 'ink';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../context/ThemeContext';
 
 export interface Toast {
@@ -8,22 +8,53 @@ export interface Toast {
   color?: string;
 }
 
+const TOAST_TIMEOUT_MS = 60_000;
+
 let nextId = 0;
 
 export function useToast() {
   const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const show = useCallback((message: string, color?: string) => {
-    const id = nextId++;
-    setToasts((prev) => [...prev, { id, message, color }]);
-  }, []);
+  const timersRef = useRef(new Map<number, ReturnType<typeof setTimeout>>());
 
   const dismiss = useCallback((id: number) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
+  const show = useCallback(
+    (message: string, color?: string) => {
+      const id = nextId++;
+      setToasts((prev) => [...prev, { id, message, color }]);
+      const timer = setTimeout(() => dismiss(id), TOAST_TIMEOUT_MS);
+      timersRef.current.set(id, timer);
+    },
+    [dismiss],
+  );
+
   const dismissFirst = useCallback(() => {
-    setToasts((prev) => prev.slice(1));
+    setToasts((prev) => {
+      const [first, ...rest] = prev;
+      if (first) {
+        const timer = timersRef.current.get(first.id);
+        if (timer) {
+          clearTimeout(timer);
+          timersRef.current.delete(first.id);
+        }
+      }
+      return rest;
+    });
+  }, []);
+
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    };
   }, []);
 
   return { toasts, show, dismiss, dismissFirst };

package/src/tui/components/statusBar.tsx

@@ -5,27 +5,36 @@ export interface StatusBarSegment {
   text: string;
   color?: string;
   dim?: boolean;
+  /** Pin to the left zone of the status bar. Defaults to right-aligned. */
+  align?: 'left' | 'right';
+}
+
+function renderZone(segments: StatusBarSegment[], separatorColor: string) {
+  return segments.map((seg, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: positional static list
+    <Box key={i}>
+      {i > 0 && (
+        <Text color={separatorColor} dimColor={true}>
+          {' '}
+          ·{' '}
+        </Text>
+      )}
+      <Text color={seg.color} dimColor={seg.dim}>
+        {seg.text}
+      </Text>
+    </Box>
+  ));
 }
 
 export function StatusBar({ segments }: { segments: StatusBarSegment[] }) {
   const theme = useTheme();
+  const left = segments.filter((s) => s.align === 'left');
+  const right = segments.filter((s) => s.align !== 'left');
   return (
-    <Box flexShrink={0} paddingX={1} marginY={1}>
+    <Box flexShrink={0} paddingX={1} marginTop={1}>
+      <Box>{renderZone(left, theme.status.separator)}</Box>
       <Box justifyContent="flex-end" flexGrow={1}>
-        {segments.map((seg, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: positional static list
-          <Box key={i}>
-            {i > 0 && (
-              <Text color={theme.status.separator} dimColor={true}>
-                {' '}
-                ·{' '}
-              </Text>
-            )}
-            <Text color={seg.color} dimColor={seg.dim}>
-              {seg.text}
-            </Text>
-          </Box>
-        ))}
+        {renderZone(right, theme.status.separator)}
       </Box>
     </Box>
   );

package/src/tui/hooks/useChordKeyboard.ts

@@ -0,0 +1,87 @@
+/**
+ * Two-key emacs-style chord prefix.
+ *
+ * `useChordKeyboard` takes a prefix predicate (e.g. "Ctrl+X") and a map of
+ * follow-up handlers. Pressing the prefix arms a chord state for
+ * `timeoutMs` (default 1000); the next key event dispatches to the
+ * matching handler, or — if nothing matches before the timer fires — the
+ * chord is dropped silently.
+ *
+ * Integrates with Ink's `useInput` so it cooperates with the rest of the
+ * keyboard pipeline; keys consumed while armed are swallowed regardless of
+ * whether they matched a follow-up handler, so a stray `g` after `Ctrl+X`
+ * does not leak into the chat input.
+ */
+
+import { type Key, useInput } from 'ink';
+import { useEffect, useRef } from 'react';
+
+export interface ChordKey {
+  /** Lower-case input character, when the press produced one. */
+  input: string;
+  /** Modifiers / arrow keys provided by Ink. */
+  key: Key;
+}
+
+export type ChordPredicate = (k: ChordKey) => boolean;
+export type ChordHandler = () => void;
+
+export interface ChordSpec {
+  /** Predicate matching the prefix (e.g. `({key, input}) => key.ctrl && input === 'x'`). */
+  prefix: ChordPredicate;
+  /**
+   * Follow-up handlers. The first matching predicate (by insertion order)
+   * runs; non-matching follow-ups still consume the key and clear the
+   * armed state — i.e. the chord is "spent" on any keypress.
+   */
+  followUps: Array<{
+    match: ChordPredicate;
+    handler: ChordHandler;
+  }>;
+  /** When false, the hook is dormant. Defaults to `true`. */
+  isActive?: boolean;
+  /** Window after the prefix during which a follow-up is accepted. */
+  timeoutMs?: number;
+}
+
+export function useChordKeyboard(spec: ChordSpec): void {
+  const armedRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timeoutMs = spec.timeoutMs ?? 1000;
+
+  // Clear any pending timer if the component using the hook unmounts mid-chord.
+  useEffect(() => {
+    return () => {
+      if (armedRef.current) {
+        clearTimeout(armedRef.current);
+        armedRef.current = null;
+      }
+    };
+  }, []);
+
+  useInput(
+    (input, key) => {
+      const event: ChordKey = { input, key };
+
+      if (armedRef.current) {
+        // We're inside the chord window. Any keypress consumes the chord;
+        // dispatch when one of the follow-ups matches.
+        clearTimeout(armedRef.current);
+        armedRef.current = null;
+        for (const fu of spec.followUps) {
+          if (fu.match(event)) {
+            fu.handler();
+            return;
+          }
+        }
+        return;
+      }
+
+      if (spec.prefix(event)) {
+        armedRef.current = setTimeout(() => {
+          armedRef.current = null;
+        }, timeoutMs);
+      }
+    },
+    { isActive: spec.isActive ?? true },
+  );
+}