@contractspec/lib.example-shared-ui 0.0.0-canary-20260113170453

package/src/EvolutionSidebar.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { Button } from '@contractspec/lib.design-system';
+import { Card } from '@contractspec/lib.ui-kit-web/ui/card';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import type { TemplateId } from './lib/types';
+import { type SpecSuggestion, useEvolution } from './hooks/useEvolution';
+
+export interface EvolutionSidebarProps {
+  templateId: TemplateId;
+  /** Whether sidebar is expanded */
+  expanded?: boolean;
+  /** Toggle expanded state */
+  onToggle?: () => void;
+  /** Callback for logging actions */
+  onLog?: (message: string) => void;
+  /** Navigate to full evolution mode */
+  onOpenEvolution?: () => void;
+}
+
+/**
+ * Compact sidebar for Evolution Engine.
+ * Shows top anomalies, pending suggestions, and quick actions.
+ * Collapsible by default.
+ */
+export function EvolutionSidebar({
+  templateId,
+  expanded = false,
+  onToggle,
+  onLog,
+  onOpenEvolution,
+}: EvolutionSidebarProps) {
+  const {
+    anomalies,
+    suggestions,
+    loading,
+    approveSuggestion,
+    rejectSuggestion,
+    operationCount,
+  } = useEvolution(templateId);
+
+  const pendingSuggestions = useMemo(
+    () => suggestions.filter((s) => s.status === 'pending'),
+    [suggestions]
+  );
+
+  const topAnomalies = useMemo(
+    () =>
+      anomalies
+        .sort((a, b) => {
+          const severityOrder = { high: 0, medium: 1, low: 2 };
+          return severityOrder[a.severity] - severityOrder[b.severity];
+        })
+        .slice(0, 3),
+    [anomalies]
+  );
+
+  const handleApprove = useCallback(
+    (id: string) => {
+      approveSuggestion(id);
+      onLog?.(`Approved suggestion ${id.slice(0, 8)}`);
+    },
+    [approveSuggestion, onLog]
+  );
+
+  const handleReject = useCallback(
+    (id: string) => {
+      rejectSuggestion(id);
+      onLog?.(`Rejected suggestion ${id.slice(0, 8)}`);
+    },
+    [rejectSuggestion, onLog]
+  );
+
+  // Collapsed view - just show badge
+  if (!expanded) {
+    return (
+      <button
+        onClick={onToggle}
+        className="flex items-center gap-2 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-sm transition hover:bg-violet-500/20"
+        type="button"
+      >
+        <span>🤖</span>
+        <span>Evolution</span>
+        {pendingSuggestions.length > 0 && (
+          <Badge
+            variant="secondary"
+            className="border-amber-500/30 bg-amber-500/20 text-amber-400"
+          >
+            {pendingSuggestions.length}
+          </Badge>
+        )}
+        {anomalies.length > 0 && pendingSuggestions.length === 0 && (
+          <Badge variant="destructive">{anomalies.length}</Badge>
+        )}
+      </button>
+    );
+  }
+
+  // Expanded view
+  return (
+    <Card className="w-80 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-violet-500/20 bg-violet-500/5 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span>🤖</span>
+          <span className="text-sm font-semibold">Evolution</span>
+        </div>
+        <div className="flex items-center gap-1">
+          {onOpenEvolution && (
+            <Button variant="ghost" size="sm" onPress={onOpenEvolution}>
+              Expand
+            </Button>
+          )}
+          <button
+            onClick={onToggle}
+            className="text-muted-foreground hover:text-foreground p-1"
+            type="button"
+            title="Collapse"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto p-3">
+        {/* Stats */}
+        <div className="mb-3 flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">
+            {operationCount} ops tracked
+          </span>
+          <div className="flex items-center gap-2">
+            {anomalies.length > 0 && (
+              <Badge variant="destructive">{anomalies.length} anomalies</Badge>
+            )}
+            {pendingSuggestions.length > 0 && (
+              <Badge
+                variant="secondary"
+                className="border-amber-500/30 bg-amber-500/20 text-amber-400"
+              >
+                {pendingSuggestions.length} pending
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {loading && (
+          <div className="text-muted-foreground py-4 text-center text-sm">
+            Generating suggestions...
+          </div>
+        )}
+
+        {/* Top Anomalies */}
+        {topAnomalies.length > 0 && (
+          <div className="mb-4">
+            <p className="mb-2 text-xs font-semibold text-violet-400 uppercase">
+              Top Issues
+            </p>
+            <div className="space-y-2">
+              {topAnomalies.map((anomaly, index) => (
+                <div
+                  key={`${anomaly.operation.name}-${index}`}
+                  className="rounded border border-amber-500/20 bg-amber-500/5 p-2 text-xs"
+                >
+                  <div className="flex items-center gap-2">
+                    <span>
+                      {anomaly.severity === 'high'
+                        ? '🔴'
+                        : anomaly.severity === 'medium'
+                          ? '🟠'
+                          : '🟡'}
+                    </span>
+                    <span className="truncate font-medium">
+                      {anomaly.operation.name}
+                    </span>
+                  </div>
+                  <p className="text-muted-foreground mt-1 truncate">
+                    {anomaly.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Pending Suggestions */}
+        {pendingSuggestions.length > 0 && (
+          <div>
+            <p className="mb-2 text-xs font-semibold text-violet-400 uppercase">
+              Pending Suggestions
+            </p>
+            <div className="space-y-2">
+              {pendingSuggestions.slice(0, 3).map((suggestion) => (
+                <CompactSuggestionCard
+                  key={suggestion.id}
+                  suggestion={suggestion}
+                  onApprove={handleApprove}
+                  onReject={handleReject}
+                />
+              ))}
+              {pendingSuggestions.length > 3 && (
+                <p className="text-muted-foreground text-center text-xs">
+                  +{pendingSuggestions.length - 3} more suggestions
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {anomalies.length === 0 &&
+          pendingSuggestions.length === 0 &&
+          !loading && (
+            <div className="text-muted-foreground py-4 text-center text-xs">
+              No issues detected. Keep coding!
+            </div>
+          )}
+      </div>
+
+      {/* Footer */}
+      {onOpenEvolution && (
+        <div className="border-t border-violet-500/20 p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full"
+            onPress={onOpenEvolution}
+          >
+            Open Evolution Dashboard →
+          </Button>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+/**
+ * Compact suggestion card for sidebar
+ */
+function CompactSuggestionCard({
+  suggestion,
+  onApprove,
+  onReject,
+}: {
+  suggestion: SpecSuggestion;
+  onApprove: (id: string) => void;
+  onReject: (id: string) => void;
+}) {
+  return (
+    <div className="rounded border border-violet-500/20 bg-violet-500/5 p-2">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium">
+            {suggestion.proposal.summary}
+          </p>
+          <div className="mt-1 flex items-center gap-2 text-xs">
+            <Badge variant="secondary">{suggestion.priority}</Badge>
+            <span className="text-muted-foreground">
+              {(suggestion.confidence * 100).toFixed(0)}%
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="mt-2 flex justify-end gap-1">
+        <button
+          onClick={() => onReject(suggestion.id)}
+          className="rounded px-2 py-0.5 text-xs text-red-400 hover:bg-red-400/10"
+          type="button"
+        >
+          Reject
+        </button>
+        <button
+          onClick={() => onApprove(suggestion.id)}
+          className="rounded bg-violet-500/20 px-2 py-0.5 text-xs text-violet-400 hover:bg-violet-500/30"
+          type="button"
+        >
+          Approve
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/LocalDataIndicator.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { RefreshCw, Shield } from 'lucide-react';
+import { useState } from 'react';
+
+import { useTemplateRuntime } from './lib/runtime-context';
+
+export function LocalDataIndicator() {
+  const { projectId, templateId, template, installer } = useTemplateRuntime();
+  const [isResetting, setIsResetting] = useState(false);
+
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      await installer.install(templateId, { projectId });
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <div className="border-border bg-muted/40 text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs">
+      <Shield className="h-3.5 w-3.5 text-violet-400" />
+      <span>
+        Local runtime ·{' '}
+        <span className="text-foreground font-semibold">{template.name}</span>
+      </span>
+      <button
+        type="button"
+        className="border-border text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold"
+        onClick={handleReset}
+        disabled={isResetting}
+      >
+        <RefreshCw className="h-3 w-3" />
+        {isResetting ? 'Resetting…' : 'Reset data'}
+      </button>
+    </div>
+  );
+}

package/src/MarkdownView.tsx

@@ -0,0 +1,389 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  ErrorState,
+  LoaderBlock,
+} from '@contractspec/lib.design-system';
+import { Card } from '@contractspec/lib.ui-kit-web/ui/card';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import type { PresentationTarget } from '@contractspec/lib.contracts';
+import type { TransformEngine } from '@contractspec/lib.contracts';
+import type { TemplateId } from './lib/types';
+
+import { useTemplateRuntime } from './lib/runtime-context';
+
+export interface MarkdownViewProps {
+  /** Optional override, otherwise comes from context */
+  templateId?: TemplateId;
+  presentationId?: string;
+  className?: string;
+}
+
+interface MarkdownOutput {
+  mimeType: string;
+  body: string;
+}
+
+/**
+ * MarkdownView renders template presentations as markdown using TransformEngine.
+ * It allows switching between available presentations for the template.
+ */
+export function MarkdownView({
+  templateId: propTemplateId,
+  presentationId,
+  className,
+}: MarkdownViewProps) {
+  const {
+    engine,
+    template,
+    templateId: contextTemplateId,
+    resolvePresentation,
+    fetchData,
+  } = useTemplateRuntime();
+
+  // Prefer prop if given, else context
+  const templateId = propTemplateId ?? contextTemplateId;
+  const presentations = (template?.presentations as string[]) ?? [];
+
+  const [selectedPresentation, setSelectedPresentation] = useState<string>('');
+  const [markdownContent, setMarkdownContent] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Initialize selected presentation
+  useEffect(() => {
+    if (presentationId && presentations.includes(presentationId)) {
+      setSelectedPresentation(presentationId);
+    } else if (presentations.length > 0 && !selectedPresentation) {
+      setSelectedPresentation(presentations[0] ?? '');
+    }
+  }, [presentationId, presentations, selectedPresentation]);
+
+  // Render markdown when presentation changes
+  const renderMarkdown = useCallback(async () => {
+    if (!selectedPresentation || !engine) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      if (!resolvePresentation) {
+        throw new Error('resolvePresentation not available in runtime context');
+      }
+
+      const descriptor = resolvePresentation(selectedPresentation);
+
+      if (!descriptor) {
+        throw new Error(
+          `Presentation descriptor not found: ${selectedPresentation}`
+        );
+      }
+
+      // Fetch data for this presentation using the data fetcher from context
+      const dataResult = await fetchData(selectedPresentation);
+
+      // Render to markdown using the engine with data context
+      const result = await engine.render<MarkdownOutput>(
+        'markdown' as PresentationTarget,
+        descriptor as Parameters<TransformEngine['render']>[1],
+        { data: dataResult.data } // Pass data in context for schema-driven rendering
+      );
+
+      setMarkdownContent(result.body);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error('Failed to render markdown')
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    selectedPresentation,
+    templateId,
+    engine,
+    resolvePresentation,
+    fetchData,
+  ]);
+
+  useEffect(() => {
+    renderMarkdown();
+  }, [renderMarkdown]);
+
+  if (!presentations.length) {
+    return (
+      <Card className={className}>
+        <div className="p-6 text-center">
+          <p className="text-muted-foreground">
+            No presentations available for this template.
+          </p>
+        </div>
+      </Card>
+    );
+  }
+
+  // Copy markdown to clipboard
+  const handleCopy = useCallback(() => {
+    if (markdownContent) {
+      navigator.clipboard.writeText(markdownContent);
+    }
+  }, [markdownContent]);
+
+  return (
+    <div className={className}>
+      {/* Presentation Selector */}
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <span className="text-muted-foreground text-sm font-medium">
+          Presentation:
+        </span>
+        {presentations.map((name) => (
+          <Button
+            key={name}
+            variant={selectedPresentation === name ? 'default' : 'outline'}
+            size="sm"
+            onPress={() => setSelectedPresentation(name)}
+          >
+            {formatPresentationName(name)}
+          </Button>
+        ))}
+        <div className="ml-auto flex items-center gap-2">
+          <Badge variant="secondary">LLM-friendly</Badge>
+          <Button
+            variant="outline"
+            size="sm"
+            onPress={handleCopy}
+            disabled={!markdownContent || loading}
+          >
+            Copy
+          </Button>
+        </div>
+      </div>
+
+      {/* Content Area */}
+      <Card className="overflow-hidden">
+        {loading && <LoaderBlock label="Rendering markdown..." />}
+
+        {error && (
+          <ErrorState
+            title="Render failed"
+            description={error.message}
+            onRetry={renderMarkdown}
+            retryLabel="Retry"
+          />
+        )}
+
+        {!loading && !error && markdownContent && (
+          <div className="p-6">
+            <MarkdownRenderer content={markdownContent} />
+          </div>
+        )}
+
+        {!loading && !error && !markdownContent && (
+          <div className="p-6 text-center">
+            <p className="text-muted-foreground">
+              Select a presentation to view its markdown output.
+            </p>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+/**
+ * Simple markdown renderer using pre-formatted display
+ * For production, consider using react-markdown or similar
+ */
+function MarkdownRenderer({ content }: { content: string }) {
+  const lines = content.split('\n');
+  const rendered: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i] ?? '';
+
+    // Check for table (starts with | and next line is separator)
+    if (line.startsWith('|') && lines[i + 1]?.match(/^\|[\s-|]+\|$/)) {
+      const tableLines: string[] = [line];
+      i++;
+      // Collect all table lines
+      while (i < lines.length && (lines[i]?.startsWith('|') ?? false)) {
+        tableLines.push(lines[i] ?? '');
+        i++;
+      }
+      rendered.push(renderTable(tableLines, rendered.length));
+      continue;
+    }
+
+    // Headers
+    if (line.startsWith('# ')) {
+      rendered.push(
+        <h1 key={i} className="mb-4 text-2xl font-bold">
+          {line.slice(2)}
+        </h1>
+      );
+    } else if (line.startsWith('## ')) {
+      rendered.push(
+        <h2 key={i} className="mt-6 mb-3 text-xl font-semibold">
+          {line.slice(3)}
+        </h2>
+      );
+    } else if (line.startsWith('### ')) {
+      rendered.push(
+        <h3 key={i} className="mt-4 mb-2 text-lg font-medium">
+          {line.slice(4)}
+        </h3>
+      );
+    }
+    // Blockquotes
+    else if (line.startsWith('> ')) {
+      rendered.push(
+        <blockquote
+          key={i}
+          className="text-muted-foreground my-2 border-l-4 border-violet-500/50 pl-4 italic"
+        >
+          {line.slice(2)}
+        </blockquote>
+      );
+    }
+    // List items
+    else if (line.startsWith('- ')) {
+      rendered.push(
+        <li key={i} className="ml-4 list-disc">
+          {formatInlineMarkdown(line.slice(2))}
+        </li>
+      );
+    }
+    // Bold text (lines starting with **)
+    else if (line.startsWith('**') && line.includes(':**')) {
+      const [label, ...rest] = line.split(':**');
+      rendered.push(
+        <p key={i} className="my-1">
+          <strong>{label?.slice(2)}:</strong>
+          {rest.join(':**')}
+        </p>
+      );
+    }
+    // Italic text (lines starting with _)
+    else if (line.startsWith('_') && line.endsWith('_')) {
+      rendered.push(
+        <p key={i} className="text-muted-foreground my-1 italic">
+          {line.slice(1, -1)}
+        </p>
+      );
+    }
+    // Empty lines
+    else if (!line.trim()) {
+      rendered.push(<div key={i} className="h-2" />);
+    }
+    // Regular text
+    else {
+      rendered.push(
+        <p key={i} className="my-1">
+          {formatInlineMarkdown(line)}
+        </p>
+      );
+    }
+
+    i++;
+  }
+
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none">
+      {rendered}
+    </div>
+  );
+}
+
+/**
+ * Render a markdown table
+ */
+function renderTable(lines: string[], keyPrefix: number): React.ReactNode {
+  if (lines.length < 2) return null;
+
+  const parseRow = (row: string) =>
+    row
+      .split('|')
+      .slice(1, -1)
+      .map((cell) => cell.trim());
+
+  const headers = parseRow(lines[0] ?? '');
+  // Skip separator line (index 1)
+  const dataRows = lines.slice(2).map(parseRow);
+
+  return (
+    <div key={`table-${keyPrefix}`} className="my-4 overflow-x-auto">
+      <table className="border-border min-w-full border-collapse border text-sm">
+        <thead>
+          <tr className="bg-muted/50">
+            {headers.map((header, idx) => (
+              <th
+                key={idx}
+                className="border-border border px-3 py-2 text-left font-semibold"
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {dataRows.map((row, rowIdx) => (
+            <tr key={rowIdx} className="hover:bg-muted/30">
+              {row.map((cell, cellIdx) => (
+                <td key={cellIdx} className="border-border border px-3 py-2">
+                  {formatInlineMarkdown(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Format inline markdown (bold, code)
+ */
+function formatInlineMarkdown(text: string): React.ReactNode {
+  // Handle **bold** text
+  const parts = text.split(/(\*\*[^*]+\*\*)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <strong key={i}>{part.slice(2, -2)}</strong>;
+    }
+    // Handle `code` text
+    if (part.includes('`')) {
+      const codeParts = part.split(/(`[^`]+`)/g);
+      return codeParts.map((cp, j) => {
+        if (cp.startsWith('`') && cp.endsWith('`')) {
+          return (
+            <code
+              key={`${i}-${j}`}
+              className="rounded bg-violet-500/10 px-1.5 py-0.5 font-mono text-sm"
+            >
+              {cp.slice(1, -1)}
+            </code>
+          );
+        }
+        return cp;
+      });
+    }
+    return part;
+  });
+}
+
+/**
+ * Format presentation name for display
+ */
+function formatPresentationName(name: string): string {
+  // Extract the last part after the last dot
+  const parts = name.split('.');
+  const lastPart = parts[parts.length - 1] ?? name;
+  // Convert kebab-case to Title Case
+  return lastPart
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}