@contractspec/module.ai-chat 0.0.0-canary-20260113170453

package/dist/presentation/components/ChatMessage.js

@@ -0,0 +1,136 @@
+'use client';
+
+import { CodePreview } from "./CodePreview.js";
+import * as React from "react";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback } from "@contractspec/lib.ui-kit-web/ui/avatar";
+import { Skeleton } from "@contractspec/lib.ui-kit-web/ui/skeleton";
+import { AlertCircle, Bot, Check, Copy, User } from "lucide-react";
+import { Button } from "@contractspec/lib.design-system";
+
+//#region src/presentation/components/ChatMessage.tsx
+/**
+* Extract code blocks from message content
+*/
+function extractCodeBlocks(content) {
+	const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+	const blocks = [];
+	let match;
+	while ((match = codeBlockRegex.exec(content)) !== null) blocks.push({
+		language: match[1] ?? "text",
+		code: match[2] ?? "",
+		raw: match[0]
+	});
+	return blocks;
+}
+/**
+* Render message content with code blocks
+*/
+function MessageContent({ content }) {
+	const codeBlocks = extractCodeBlocks(content);
+	if (codeBlocks.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "whitespace-pre-wrap",
+		children: content
+	});
+	let remaining = content;
+	const parts = [];
+	let key = 0;
+	for (const block of codeBlocks) {
+		const [before, after] = remaining.split(block.raw);
+		if (before) parts.push(/* @__PURE__ */ jsx("p", {
+			className: "whitespace-pre-wrap",
+			children: before.trim()
+		}, key++));
+		parts.push(/* @__PURE__ */ jsx(CodePreview, {
+			code: block.code,
+			language: block.language,
+			className: "my-2"
+		}, key++));
+		remaining = after ?? "";
+	}
+	if (remaining.trim()) parts.push(/* @__PURE__ */ jsx("p", {
+		className: "whitespace-pre-wrap",
+		children: remaining.trim()
+	}, key++));
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+/**
+* Chat message component
+*/
+function ChatMessage({ message, className, showCopy = true, showAvatar = true }) {
+	const [copied, setCopied] = React.useState(false);
+	const isUser = message.role === "user";
+	const isError = message.status === "error";
+	const isStreaming = message.status === "streaming";
+	const handleCopy = React.useCallback(async () => {
+		await navigator.clipboard.writeText(message.content);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}, [message.content]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group flex gap-3", isUser && "flex-row-reverse", className),
+		children: [showAvatar && /* @__PURE__ */ jsx(Avatar, {
+			className: "h-8 w-8 shrink-0",
+			children: /* @__PURE__ */ jsx(AvatarFallback, {
+				className: cn(isUser ? "bg-primary text-primary-foreground" : "bg-muted"),
+				children: isUser ? /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex max-w-[80%] flex-col gap-1", isUser && "items-end"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("rounded-2xl px-4 py-2", isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground", isError && "border-destructive bg-destructive/10 border"),
+					children: isError && message.error ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-destructive font-medium",
+							children: message.error.code
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: message.error.message
+						})] })]
+					}) : isStreaming && !message.content ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })]
+					}) : /* @__PURE__ */ jsx(MessageContent, { content: message.content })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-2 text-xs", "text-muted-foreground opacity-0 transition-opacity", "group-hover:opacity-100"),
+					children: [
+						/* @__PURE__ */ jsx("span", { children: new Date(message.createdAt).toLocaleTimeString([], {
+							hour: "2-digit",
+							minute: "2-digit"
+						}) }),
+						message.usage && /* @__PURE__ */ jsxs("span", { children: [message.usage.inputTokens + message.usage.outputTokens, " tokens"] }),
+						showCopy && !isUser && message.content && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-6 w-6 p-0",
+							onPress: handleCopy,
+							"aria-label": copied ? "Copied" : "Copy message",
+							children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+						})
+					]
+				}),
+				message.reasoning && /* @__PURE__ */ jsxs("details", {
+					className: "text-muted-foreground mt-2 text-sm",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer hover:underline",
+						children: "View reasoning"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "bg-muted mt-1 rounded-md p-2",
+						children: /* @__PURE__ */ jsx("p", {
+							className: "whitespace-pre-wrap",
+							children: message.reasoning
+						})
+					})]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { ChatMessage };
+//# sourceMappingURL=ChatMessage.js.map

package/dist/presentation/components/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","names":[],"sources":["../../../src/presentation/components/ChatMessage.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { Avatar, AvatarFallback } from '@contractspec/lib.ui-kit-web/ui/avatar';\nimport { Skeleton } from '@contractspec/lib.ui-kit-web/ui/skeleton';\nimport { Bot, User, AlertCircle, Copy, Check } from 'lucide-react';\nimport { Button } from '@contractspec/lib.design-system';\nimport type { ChatMessage as ChatMessageType } from '../../core/message-types';\nimport { CodePreview } from './CodePreview';\n\nexport interface ChatMessageProps {\n  message: ChatMessageType;\n  className?: string;\n  /** Show copy button */\n  showCopy?: boolean;\n  /** Show avatar */\n  showAvatar?: boolean;\n}\n\n/**\n * Extract code blocks from message content\n */\nfunction extractCodeBlocks(\n  content: string\n): { language: string; code: string; raw: string }[] {\n  const codeBlockRegex = /```(\\w+)?\\n([\\s\\S]*?)```/g;\n  const blocks: { language: string; code: string; raw: string }[] = [];\n  let match;\n\n  while ((match = codeBlockRegex.exec(content)) !== null) {\n    blocks.push({\n      language: match[1] ?? 'text',\n      code: match[2] ?? '',\n      raw: match[0],\n    });\n  }\n\n  return blocks;\n}\n\n/**\n * Render message content with code blocks\n */\nfunction MessageContent({ content }: { content: string }) {\n  const codeBlocks = extractCodeBlocks(content);\n\n  if (codeBlocks.length === 0) {\n    return <p className=\"whitespace-pre-wrap\">{content}</p>;\n  }\n\n  // Split content by code blocks and render\n  let remaining = content;\n  const parts: React.ReactNode[] = [];\n  let key = 0;\n\n  for (const block of codeBlocks) {\n    const [before, after] = remaining.split(block.raw);\n    if (before) {\n      parts.push(\n        <p key={key++} className=\"whitespace-pre-wrap\">\n          {before.trim()}\n        </p>\n      );\n    }\n    parts.push(\n      <CodePreview\n        key={key++}\n        code={block.code}\n        language={block.language}\n        className=\"my-2\"\n      />\n    );\n    remaining = after ?? '';\n  }\n\n  if (remaining.trim()) {\n    parts.push(\n      <p key={key++} className=\"whitespace-pre-wrap\">\n        {remaining.trim()}\n      </p>\n    );\n  }\n\n  return <>{parts}</>;\n}\n\n/**\n * Chat message component\n */\nexport function ChatMessage({\n  message,\n  className,\n  showCopy = true,\n  showAvatar = true,\n}: ChatMessageProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const isUser = message.role === 'user';\n  const isError = message.status === 'error';\n  const isStreaming = message.status === 'streaming';\n\n  const handleCopy = React.useCallback(async () => {\n    await navigator.clipboard.writeText(message.content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [message.content]);\n\n  return (\n    <div\n      className={cn(\n        'group flex gap-3',\n        isUser && 'flex-row-reverse',\n        className\n      )}\n    >\n      {showAvatar && (\n        <Avatar className=\"h-8 w-8 shrink-0\">\n          <AvatarFallback\n            className={cn(\n              isUser ? 'bg-primary text-primary-foreground' : 'bg-muted'\n            )}\n          >\n            {isUser ? (\n              <User className=\"h-4 w-4\" />\n            ) : (\n              <Bot className=\"h-4 w-4\" />\n            )}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      <div\n        className={cn('flex max-w-[80%] flex-col gap-1', isUser && 'items-end')}\n      >\n        <div\n          className={cn(\n            'rounded-2xl px-4 py-2',\n            isUser\n              ? 'bg-primary text-primary-foreground'\n              : 'bg-muted text-foreground',\n            isError && 'border-destructive bg-destructive/10 border'\n          )}\n        >\n          {isError && message.error ? (\n            <div className=\"flex items-start gap-2\">\n              <AlertCircle className=\"text-destructive mt-0.5 h-4 w-4 shrink-0\" />\n              <div>\n                <p className=\"text-destructive font-medium\">\n                  {message.error.code}\n                </p>\n                <p className=\"text-muted-foreground text-sm\">\n                  {message.error.message}\n                </p>\n              </div>\n            </div>\n          ) : isStreaming && !message.content ? (\n            <div className=\"flex flex-col gap-2\">\n              <Skeleton className=\"h-4 w-48\" />\n              <Skeleton className=\"h-4 w-32\" />\n            </div>\n          ) : (\n            <MessageContent content={message.content} />\n          )}\n        </div>\n\n        {/* Message meta */}\n        <div\n          className={cn(\n            'flex items-center gap-2 text-xs',\n            'text-muted-foreground opacity-0 transition-opacity',\n            'group-hover:opacity-100'\n          )}\n        >\n          <span>\n            {new Date(message.createdAt).toLocaleTimeString([], {\n              hour: '2-digit',\n              minute: '2-digit',\n            })}\n          </span>\n\n          {message.usage && (\n            <span>\n              {message.usage.inputTokens + message.usage.outputTokens} tokens\n            </span>\n          )}\n\n          {showCopy && !isUser && message.content && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-6 w-6 p-0\"\n              onPress={handleCopy}\n              aria-label={copied ? 'Copied' : 'Copy message'}\n            >\n              {copied ? (\n                <Check className=\"h-3 w-3\" />\n              ) : (\n                <Copy className=\"h-3 w-3\" />\n              )}\n            </Button>\n          )}\n        </div>\n\n        {/* Reasoning (for models that support it) */}\n        {message.reasoning && (\n          <details className=\"text-muted-foreground mt-2 text-sm\">\n            <summary className=\"cursor-pointer hover:underline\">\n              View reasoning\n            </summary>\n            <div className=\"bg-muted mt-1 rounded-md p-2\">\n              <p className=\"whitespace-pre-wrap\">{message.reasoning}</p>\n            </div>\n          </details>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/presentation/components/CodePreview.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/presentation/components/CodePreview.d.ts
+interface CodePreviewProps {
+  /** Code content */
+  code: string;
+  /** Programming language */
+  language?: string;
+  /** File name */
+  filename?: string;
+  /** Additional class name */
+  className?: string;
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Show execute button (for applicable languages) */
+  showExecute?: boolean;
+  /** Called when execute is clicked */
+  onExecute?: (code: string) => void;
+  /** Show download button */
+  showDownload?: boolean;
+  /** Max height before scroll */
+  maxHeight?: number;
+}
+/**
+ * Code preview component with syntax highlighting placeholder
+ */
+declare function CodePreview({
+  code,
+  language,
+  filename,
+  className,
+  showCopy,
+  showExecute,
+  onExecute,
+  showDownload,
+  maxHeight
+}: CodePreviewProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CodePreview };
+//# sourceMappingURL=CodePreview.d.ts.map

package/dist/presentation/components/CodePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodePreview.d.ts","names":[],"sources":["../../../src/presentation/components/CodePreview.tsx"],"sourcesContent":[],"mappings":";;;UAOiB,gBAAA;;;EAAA;EAgDD,QAAA,CAAA,EAAA,MAAW;EACzB;EACA,QAAA,CAAA,EAAA,MAAA;EACA;EACA,SAAA,CAAA,EAAA,MAAA;EACA;EACA,QAAA,CAAA,EAAA,OAAA;EACA;EACA,WAAA,CAAA,EAAA,OAAA;EACA;EACC,SAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAgB;EAAA,YAAA,CAAA,EAAA,OAAA;;;;;;;iBAVH,WAAA;;;;;;;;;;GAUb,mBAAgB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/presentation/components/CodePreview.js

@@ -0,0 +1,127 @@
+'use client';
+
+import * as React from "react";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, Download, Play } from "lucide-react";
+import { Button } from "@contractspec/lib.design-system";
+
+//#region src/presentation/components/CodePreview.tsx
+/**
+* Language display names
+*/
+const LANGUAGE_NAMES = {
+	ts: "TypeScript",
+	tsx: "TypeScript (React)",
+	typescript: "TypeScript",
+	js: "JavaScript",
+	jsx: "JavaScript (React)",
+	javascript: "JavaScript",
+	json: "JSON",
+	md: "Markdown",
+	yaml: "YAML",
+	yml: "YAML",
+	bash: "Bash",
+	sh: "Shell",
+	sql: "SQL",
+	py: "Python",
+	python: "Python",
+	go: "Go",
+	rust: "Rust",
+	rs: "Rust"
+};
+/**
+* Code preview component with syntax highlighting placeholder
+*/
+function CodePreview({ code, language = "text", filename, className, showCopy = true, showExecute = false, onExecute, showDownload = false, maxHeight = 400 }) {
+	const [copied, setCopied] = React.useState(false);
+	const displayLanguage = LANGUAGE_NAMES[language.toLowerCase()] ?? language;
+	const lines = code.split("\n");
+	const handleCopy = React.useCallback(async () => {
+		await navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}, [code]);
+	const handleDownload = React.useCallback(() => {
+		const blob = new Blob([code], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = filename ?? `code.${language}`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}, [
+		code,
+		filename,
+		language
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("overflow-hidden rounded-lg border", "bg-muted/50", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center justify-between px-3 py-1.5", "bg-muted/80 border-b"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: [filename && /* @__PURE__ */ jsx("span", {
+					className: "text-foreground font-mono",
+					children: filename
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: displayLanguage
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					showExecute && onExecute && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: () => onExecute(code),
+						className: "h-7 w-7 p-0",
+						"aria-label": "Execute code",
+						children: /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" })
+					}),
+					showDownload && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: handleDownload,
+						className: "h-7 w-7 p-0",
+						"aria-label": "Download code",
+						children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
+					}),
+					showCopy && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: handleCopy,
+						className: "h-7 w-7 p-0",
+						"aria-label": copied ? "Copied" : "Copy code",
+						children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto",
+			style: { maxHeight },
+			children: /* @__PURE__ */ jsx("pre", {
+				className: "p-3",
+				children: /* @__PURE__ */ jsx("code", {
+					className: "text-sm",
+					children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mr-4 w-8 text-right select-none",
+							children: i + 1
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: line || " "
+						})]
+					}, i))
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+export { CodePreview };
+//# sourceMappingURL=CodePreview.js.map

package/dist/presentation/components/CodePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodePreview.js","names":[],"sources":["../../../src/presentation/components/CodePreview.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { Button } from '@contractspec/lib.design-system';\nimport { Copy, Check, Play, Download } from 'lucide-react';\n\nexport interface CodePreviewProps {\n  /** Code content */\n  code: string;\n  /** Programming language */\n  language?: string;\n  /** File name */\n  filename?: string;\n  /** Additional class name */\n  className?: string;\n  /** Show copy button */\n  showCopy?: boolean;\n  /** Show execute button (for applicable languages) */\n  showExecute?: boolean;\n  /** Called when execute is clicked */\n  onExecute?: (code: string) => void;\n  /** Show download button */\n  showDownload?: boolean;\n  /** Max height before scroll */\n  maxHeight?: number;\n}\n\n/**\n * Language display names\n */\nconst LANGUAGE_NAMES: Record<string, string> = {\n  ts: 'TypeScript',\n  tsx: 'TypeScript (React)',\n  typescript: 'TypeScript',\n  js: 'JavaScript',\n  jsx: 'JavaScript (React)',\n  javascript: 'JavaScript',\n  json: 'JSON',\n  md: 'Markdown',\n  yaml: 'YAML',\n  yml: 'YAML',\n  bash: 'Bash',\n  sh: 'Shell',\n  sql: 'SQL',\n  py: 'Python',\n  python: 'Python',\n  go: 'Go',\n  rust: 'Rust',\n  rs: 'Rust',\n};\n\n/**\n * Code preview component with syntax highlighting placeholder\n */\nexport function CodePreview({\n  code,\n  language = 'text',\n  filename,\n  className,\n  showCopy = true,\n  showExecute = false,\n  onExecute,\n  showDownload = false,\n  maxHeight = 400,\n}: CodePreviewProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const displayLanguage = LANGUAGE_NAMES[language.toLowerCase()] ?? language;\n  const lines = code.split('\\n');\n\n  const handleCopy = React.useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const handleDownload = React.useCallback(() => {\n    const blob = new Blob([code], { type: 'text/plain' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = filename ?? `code.${language}`;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n  }, [code, filename, language]);\n\n  return (\n    <div\n      className={cn(\n        'overflow-hidden rounded-lg border',\n        'bg-muted/50',\n        className\n      )}\n    >\n      {/* Header */}\n      <div\n        className={cn(\n          'flex items-center justify-between px-3 py-1.5',\n          'bg-muted/80 border-b'\n        )}\n      >\n        <div className=\"flex items-center gap-2 text-sm\">\n          {filename && (\n            <span className=\"text-foreground font-mono\">{filename}</span>\n          )}\n          <span className=\"text-muted-foreground\">{displayLanguage}</span>\n        </div>\n\n        <div className=\"flex items-center gap-1\">\n          {showExecute && onExecute && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onPress={() => onExecute(code)}\n              className=\"h-7 w-7 p-0\"\n              aria-label=\"Execute code\"\n            >\n              <Play className=\"h-3.5 w-3.5\" />\n            </Button>\n          )}\n\n          {showDownload && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onPress={handleDownload}\n              className=\"h-7 w-7 p-0\"\n              aria-label=\"Download code\"\n            >\n              <Download className=\"h-3.5 w-3.5\" />\n            </Button>\n          )}\n\n          {showCopy && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onPress={handleCopy}\n              className=\"h-7 w-7 p-0\"\n              aria-label={copied ? 'Copied' : 'Copy code'}\n            >\n              {copied ? (\n                <Check className=\"h-3.5 w-3.5 text-green-500\" />\n              ) : (\n                <Copy className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* Code content */}\n      <div className=\"overflow-auto\" style={{ maxHeight }}>\n        <pre className=\"p-3\">\n          <code className=\"text-sm\">\n            {lines.map((line, i) => (\n              <div key={i} className=\"flex\">\n                <span className=\"text-muted-foreground mr-4 w-8 text-right select-none\">\n                  {i + 1}\n                </span>\n                <span className=\"flex-1\">{line || ' '}</span>\n              </div>\n            ))}\n          </code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,iBAAyC;CAC7C,IAAI;CACJ,KAAK;CACL,YAAY;CACZ,IAAI;CACJ,KAAK;CACL,YAAY;CACZ,MAAM;CACN,IAAI;CACJ,MAAM;CACN,KAAK;CACL,MAAM;CACN,IAAI;CACJ,KAAK;CACL,IAAI;CACJ,QAAQ;CACR,IAAI;CACJ,MAAM;CACN,IAAI;CACL;;;;AAKD,SAAgB,YAAY,EAC1B,MACA,WAAW,QACX,UACA,WACA,WAAW,MACX,cAAc,OACd,WACA,eAAe,OACf,YAAY,OACO;CACnB,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,MAAM;CAEjD,MAAM,kBAAkB,eAAe,SAAS,aAAa,KAAK;CAClE,MAAM,QAAQ,KAAK,MAAM,KAAK;CAE9B,MAAM,aAAa,MAAM,YAAY,YAAY;AAC/C,QAAM,UAAU,UAAU,UAAU,KAAK;AACzC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,KAAK,CAAC;CAEV,MAAM,iBAAiB,MAAM,kBAAkB;EAC7C,MAAM,OAAO,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,cAAc,CAAC;EACrD,MAAM,MAAM,IAAI,gBAAgB,KAAK;EACrC,MAAM,IAAI,SAAS,cAAc,IAAI;AACrC,IAAE,OAAO;AACT,IAAE,WAAW,YAAY,QAAQ;AACjC,WAAS,KAAK,YAAY,EAAE;AAC5B,IAAE,OAAO;AACT,WAAS,KAAK,YAAY,EAAE;AAC5B,MAAI,gBAAgB,IAAI;IACvB;EAAC;EAAM;EAAU;EAAS,CAAC;AAE9B,QACE,qBAAC;EACC,WAAW,GACT,qCACA,eACA,UACD;aAGD,qBAAC;GACC,WAAW,GACT,iDACA,uBACD;cAED,qBAAC;IAAI,WAAU;eACZ,YACC,oBAAC;KAAK,WAAU;eAA6B;MAAgB,EAE/D,oBAAC;KAAK,WAAU;eAAyB;MAAuB;KAC5D,EAEN,qBAAC;IAAI,WAAU;;KACZ,eAAe,aACd,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe,UAAU,KAAK;MAC9B,WAAU;MACV,cAAW;gBAEX,oBAAC,QAAK,WAAU,gBAAgB;OACzB;KAGV,gBACC,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAW;gBAEX,oBAAC,YAAS,WAAU,gBAAgB;OAC7B;KAGV,YACC,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,SAAS,WAAW;gBAE/B,SACC,oBAAC,SAAM,WAAU,+BAA+B,GAEhD,oBAAC,QAAK,WAAU,gBAAgB;OAE3B;;KAEP;IACF,EAGN,oBAAC;GAAI,WAAU;GAAgB,OAAO,EAAE,WAAW;aACjD,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAK,WAAU;eACb,MAAM,KAAK,MAAM,MAChB,qBAAC;MAAY,WAAU;iBACrB,oBAAC;OAAK,WAAU;iBACb,IAAI;QACA,EACP,oBAAC;OAAK,WAAU;iBAAU,QAAQ;QAAW;QAJrC,EAKJ,CACN;MACG;KACH;IACF;GACF"}

package/dist/presentation/components/ContextIndicator.d.ts

@@ -0,0 +1,26 @@
+import { WorkspaceSummary } from "../../context/workspace-context.js";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/presentation/components/ContextIndicator.d.ts
+interface ContextIndicatorProps {
+  /** Workspace summary */
+  summary?: WorkspaceSummary;
+  /** Whether context is active */
+  active?: boolean;
+  /** Additional class name */
+  className?: string;
+  /** Show details */
+  showDetails?: boolean;
+}
+/**
+ * Indicator showing active workspace context
+ */
+declare function ContextIndicator({
+  summary,
+  active,
+  className,
+  showDetails
+}: ContextIndicatorProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+export { ContextIndicator };
+//# sourceMappingURL=ContextIndicator.d.ts.map

package/dist/presentation/components/ContextIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextIndicator.d.ts","names":[],"sources":["../../../src/presentation/components/ContextIndicator.tsx"],"sourcesContent":[],"mappings":";;;;UAciB,qBAAA;;YAEL;EAFK;EAcD,MAAA,CAAA,EAAA,OAAA;EACd;EACA,SAAA,CAAA,EAAA,MAAA;EACA;EACA,WAAA,CAAA,EAAA,OAAA;;;;;iBAJc,gBAAA;;;;;GAKb,wBAAqB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/presentation/components/ContextIndicator.js

@@ -0,0 +1,97 @@
+'use client';
+
+import "react";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FileCode, FolderOpen, Info, Zap } from "lucide-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@contractspec/lib.ui-kit-web/ui/tooltip";
+
+//#region src/presentation/components/ContextIndicator.tsx
+/**
+* Indicator showing active workspace context
+*/
+function ContextIndicator({ summary, active = false, className, showDetails = true }) {
+	if (!summary && !active) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1.5 text-sm", "text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", { children: "No workspace context" })]
+	});
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", active ? "text-foreground" : "text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsxs(Badge, {
+			variant: active ? "default" : "secondary",
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Zap, { className: "h-3 w-3" }), "Context"]
+		}), summary && showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 text-xs",
+			children: [/* @__PURE__ */ jsx(FolderOpen, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: summary.name })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 text-xs",
+			children: [/* @__PURE__ */ jsx(FileCode, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", { children: [summary.specs.total, " specs"] })]
+		})] })]
+	});
+	if (!summary) return content;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: content
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		className: "max-w-[300px]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 text-sm",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "font-medium",
+					children: summary.name
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground text-xs",
+					children: summary.path
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "border-t pt-2",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-1 text-xs",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: "Commands:" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-right",
+								children: summary.specs.commands
+							}),
+							/* @__PURE__ */ jsx("span", { children: "Queries:" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-right",
+								children: summary.specs.queries
+							}),
+							/* @__PURE__ */ jsx("span", { children: "Events:" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-right",
+								children: summary.specs.events
+							}),
+							/* @__PURE__ */ jsx("span", { children: "Presentations:" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-right",
+								children: summary.specs.presentations
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "border-t pt-2 text-xs",
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [summary.files.total, " files"] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "mx-1",
+							children: "•"
+						}),
+						/* @__PURE__ */ jsxs("span", { children: [summary.files.specFiles, " spec files"] })
+					]
+				})
+			]
+		})
+	})] }) });
+}
+
+//#endregion
+export { ContextIndicator };
+//# sourceMappingURL=ContextIndicator.js.map

package/dist/presentation/components/ContextIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextIndicator.js","names":[],"sources":["../../../src/presentation/components/ContextIndicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@contractspec/lib.ui-kit-web/ui/tooltip';\nimport { FolderOpen, FileCode, Zap, Info } from 'lucide-react';\nimport type { WorkspaceSummary } from '../../context/workspace-context';\n\nexport interface ContextIndicatorProps {\n  /** Workspace summary */\n  summary?: WorkspaceSummary;\n  /** Whether context is active */\n  active?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Show details */\n  showDetails?: boolean;\n}\n\n/**\n * Indicator showing active workspace context\n */\nexport function ContextIndicator({\n  summary,\n  active = false,\n  className,\n  showDetails = true,\n}: ContextIndicatorProps) {\n  if (!summary && !active) {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1.5 text-sm',\n          'text-muted-foreground',\n          className\n        )}\n      >\n        <Info className=\"h-4 w-4\" />\n        <span>No workspace context</span>\n      </div>\n    );\n  }\n\n  const content = (\n    <div\n      className={cn(\n        'flex items-center gap-2',\n        active ? 'text-foreground' : 'text-muted-foreground',\n        className\n      )}\n    >\n      <Badge\n        variant={active ? 'default' : 'secondary'}\n        className=\"flex items-center gap-1\"\n      >\n        <Zap className=\"h-3 w-3\" />\n        Context\n      </Badge>\n\n      {summary && showDetails && (\n        <>\n          <div className=\"flex items-center gap-1 text-xs\">\n            <FolderOpen className=\"h-3.5 w-3.5\" />\n            <span>{summary.name}</span>\n          </div>\n\n          <div className=\"flex items-center gap-1 text-xs\">\n            <FileCode className=\"h-3.5 w-3.5\" />\n            <span>{summary.specs.total} specs</span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n\n  if (!summary) {\n    return content;\n  }\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>{content}</TooltipTrigger>\n        <TooltipContent side=\"bottom\" className=\"max-w-[300px]\">\n          <div className=\"flex flex-col gap-2 text-sm\">\n            <div className=\"font-medium\">{summary.name}</div>\n            <div className=\"text-muted-foreground text-xs\">{summary.path}</div>\n\n            <div className=\"border-t pt-2\">\n              <div className=\"grid grid-cols-2 gap-1 text-xs\">\n                <span>Commands:</span>\n                <span className=\"text-right\">{summary.specs.commands}</span>\n                <span>Queries:</span>\n                <span className=\"text-right\">{summary.specs.queries}</span>\n                <span>Events:</span>\n                <span className=\"text-right\">{summary.specs.events}</span>\n                <span>Presentations:</span>\n                <span className=\"text-right\">\n                  {summary.specs.presentations}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"border-t pt-2 text-xs\">\n              <span>{summary.files.total} files</span>\n              <span className=\"mx-1\">•</span>\n              <span>{summary.files.specFiles} spec files</span>\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAgB,iBAAiB,EAC/B,SACA,SAAS,OACT,WACA,cAAc,QACU;AACxB,KAAI,CAAC,WAAW,CAAC,OACf,QACE,qBAAC;EACC,WAAW,GACT,qCACA,yBACA,UACD;aAED,oBAAC,QAAK,WAAU,YAAY,EAC5B,oBAAC,oBAAK,yBAA2B;GAC7B;CAIV,MAAM,UACJ,qBAAC;EACC,WAAW,GACT,2BACA,SAAS,oBAAoB,yBAC7B,UACD;aAED,qBAAC;GACC,SAAS,SAAS,YAAY;GAC9B,WAAU;cAEV,oBAAC,OAAI,WAAU,YAAY;IAErB,EAEP,WAAW,eACV,4CACE,qBAAC;GAAI,WAAU;cACb,oBAAC,cAAW,WAAU,gBAAgB,EACtC,oBAAC,oBAAM,QAAQ,OAAY;IACvB,EAEN,qBAAC;GAAI,WAAU;cACb,oBAAC,YAAS,WAAU,gBAAgB,EACpC,qBAAC,qBAAM,QAAQ,MAAM,OAAM,YAAa;IACpC,IACL;GAED;AAGR,KAAI,CAAC,QACH,QAAO;AAGT,QACE,oBAAC,6BACC,qBAAC,sBACC,oBAAC;EAAe;YAAS;GAAyB,EAClD,oBAAC;EAAe,MAAK;EAAS,WAAU;YACtC,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eAAe,QAAQ;MAAW;IACjD,oBAAC;KAAI,WAAU;eAAiC,QAAQ;MAAW;IAEnE,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,oBAAC,oBAAK,cAAgB;OACtB,oBAAC;QAAK,WAAU;kBAAc,QAAQ,MAAM;SAAgB;OAC5D,oBAAC,oBAAK,aAAe;OACrB,oBAAC;QAAK,WAAU;kBAAc,QAAQ,MAAM;SAAe;OAC3D,oBAAC,oBAAK,YAAc;OACpB,oBAAC;QAAK,WAAU;kBAAc,QAAQ,MAAM;SAAc;OAC1D,oBAAC,oBAAK,mBAAqB;OAC3B,oBAAC;QAAK,WAAU;kBACb,QAAQ,MAAM;SACV;;OACH;MACF;IAEN,qBAAC;KAAI,WAAU;;MACb,qBAAC,qBAAM,QAAQ,MAAM,OAAM,YAAa;MACxC,oBAAC;OAAK,WAAU;iBAAO;QAAQ;MAC/B,qBAAC,qBAAM,QAAQ,MAAM,WAAU,iBAAkB;;MAC7C;;IACF;GACS,IACT,GACM"}

package/dist/presentation/components/ModelPicker.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { ProviderMode, ProviderName } from "@contractspec/lib.ai-providers";
+
+//#region src/presentation/components/ModelPicker.d.ts
+interface ModelSelection {
+  provider: ProviderName;
+  model: string;
+  mode: ProviderMode;
+}
+interface ModelPickerProps {
+  /** Currently selected provider/model */
+  value: ModelSelection;
+  /** Called when selection changes */
+  onChange: (value: ModelSelection) => void;
+  /** Available providers (with availability info) */
+  availableProviders?: {
+    provider: ProviderName;
+    available: boolean;
+    mode: ProviderMode;
+    reason?: string;
+  }[];
+  /** Additional class name */
+  className?: string;
+  /** Compact mode (smaller) */
+  compact?: boolean;
+}
+/**
+ * Model picker component for selecting AI provider and model
+ */
+declare function ModelPicker({
+  value,
+  onChange,
+  availableProviders,
+  className,
+  compact
+}: ModelPickerProps): react_jsx_runtime3.JSX.Element;
+//#endregion
+export { ModelPicker };
+//# sourceMappingURL=ModelPicker.d.ts.map

package/dist/presentation/components/ModelPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelPicker.d.ts","names":[],"sources":["../../../src/presentation/components/ModelPicker.tsx"],"sourcesContent":[],"mappings":";;;;UAsBiB,cAAA;YACL;;EADK,IAAA,EAGT,YAHuB;AAM/B;AAES,UAFQ,gBAAA,CAER;EAEW;EAGN,KAAA,EALL,cAKK;EAEJ;EAAY,QAAA,EAAA,CAAA,KAAA,EALF,cAKE,EAAA,GAAA,IAAA;EAqCN;EACd,kBAAA,CAAA,EAAA;IACA,QAAA,EAzCY,YAyCZ;IACA,SAAA,EAAA,OAAA;IACA,IAAA,EAzCQ,YAyCR;IACA,MAAA,CAAA,EAAA,MAAA;EACC,CAAA,EAAA;EAAgB;EAAA,SAAA,CAAA,EAAA,MAAA;;;;;;;iBANH,WAAA;;;;;;GAMb,mBAAgB,kBAAA,CAAA,GAAA,CAAA"}