@plannotator/ui 0.22.0

package/components/ai/AIProviderBar.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { getProviderMeta } from '../ProviderIcons';
+import { type AIProviderOption } from '../../utils/aiProvider';
+
+interface AIProviderBarProps {
+  providers: AIProviderOption[];
+  selectedProviderId: string | null;
+  selectedModel: string | null;
+  selectedReasoningEffort?: string | null;
+  onProviderChange: (providerId: string) => void;
+  onModelChange: (model: string) => void;
+  onReasoningEffortChange?: (effort: string | null) => void;
+}
+
+export const AIProviderBar: React.FC<AIProviderBarProps> = ({
+  providers,
+  selectedProviderId,
+  selectedModel,
+  selectedReasoningEffort,
+  onProviderChange,
+  onModelChange,
+  onReasoningEffortChange,
+}) => {
+  if (providers.length === 0) {
+    return (
+      <div className="border-t border-border/50 px-2 py-1.5 text-[11px] text-muted-foreground/50">
+        No AI providers available
+      </div>
+    );
+  }
+
+  const currentProvider = providers.find(p => p.id === selectedProviderId) ?? providers[0];
+  const effectiveProviderId = currentProvider?.id ?? '';
+  const models = currentProvider?.models ?? [];
+  const defaultModel = models.find(m => m.default) ?? models[0];
+  const effectiveModel = selectedModel ?? defaultModel?.id ?? '';
+  const currentModel = models.find(m => m.id === effectiveModel) ?? defaultModel;
+  const reasoningEfforts = currentModel?.reasoningEfforts ?? [];
+  const meta = getProviderMeta(currentProvider?.name ?? 'AI');
+  const Icon = meta.icon;
+  // Show only when the selected model actually reports reasoning efforts.
+  const showReasoningEffort = !!onReasoningEffortChange && reasoningEfforts.length > 0;
+
+  return (
+    <div className="border-t border-border/50 px-2 py-1.5 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+      <Icon className="w-3.5 h-3.5 flex-shrink-0" />
+      <select
+        value={effectiveProviderId ?? ''}
+        onChange={(event) => onProviderChange(event.target.value)}
+        className="min-w-0 max-w-[8rem] bg-transparent text-[11px] text-foreground focus:outline-none"
+        aria-label="AI provider"
+      >
+        {providers.map(provider => {
+          const providerMeta = getProviderMeta(provider.name);
+          return (
+            <option key={provider.id} value={provider.id}>
+              {providerMeta.label}
+            </option>
+          );
+        })}
+      </select>
+
+      {models.length > 0 && (
+        <select
+          value={effectiveModel}
+          onChange={(event) => onModelChange(event.target.value)}
+          className="min-w-0 flex-1 bg-transparent text-[11px] text-foreground focus:outline-none"
+          aria-label="AI model"
+        >
+          {models.map(model => (
+            <option key={model.id} value={model.id}>
+              {model.label}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {showReasoningEffort && (
+        <select
+          value={selectedReasoningEffort ?? ''}
+          onChange={(event) => onReasoningEffortChange?.(event.target.value || null)}
+          className="w-16 bg-transparent text-[11px] text-foreground focus:outline-none"
+          aria-label="Reasoning effort"
+        >
+          <option value="">Auto</option>
+          {reasoningEfforts.map(effort => (
+            <option key={effort.id} value={effort.id}>
+              {effort.label}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+};

package/components/ai/DocumentAIChatPanel.tsx

@@ -0,0 +1,313 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { AIChatEntry, PendingPermission } from '../../hooks/useAIChat';
+import type { AIProviderOption } from '../../utils/aiProvider';
+import { formatRelativeTime, renderChatMarkdown } from '../../utils/aiChatFormat';
+import { OverlayScrollArea } from '../OverlayScrollArea';
+import { SparklesIcon } from '../SparklesIcon';
+import { AIProviderBar } from './AIProviderBar';
+import { submitHint } from '../../utils/platform';
+
+interface DocumentAIChatPanelProps {
+  messages: AIChatEntry[];
+  isCreatingSession: boolean;
+  isStreaming: boolean;
+  onAskGeneral?: (question: string) => void;
+  /** Stop the in-flight answer. When provided, the input shows a Stop button while streaming. */
+  onStop?: () => void;
+  permissionRequests?: PendingPermission[];
+  onRespondToPermission?: (requestId: string, allow: boolean) => void;
+  aiProviders?: AIProviderOption[];
+  aiConfig?: { providerId: string | null; model: string | null; reasoningEffort?: string | null };
+  onAIConfigChange?: (config: { providerId?: string | null; model?: string | null; reasoningEffort?: string | null }) => void;
+}
+
+function truncate(text: string, max = 180): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, max).trimEnd()}...`;
+}
+
+function formatToolInput(toolName: string, input: Record<string, unknown>): string | null {
+  if (!input || Object.keys(input).length === 0) return null;
+
+  if (toolName === 'Bash' && typeof input.command === 'string') {
+    return input.command;
+  }
+  if ((toolName === 'Read' || toolName === 'Write' || toolName === 'Edit') && typeof input.file_path === 'string') {
+    return input.file_path;
+  }
+  if (toolName === 'Glob' && typeof input.pattern === 'string') {
+    return input.pattern;
+  }
+  if (toolName === 'Grep' && typeof input.pattern === 'string') {
+    const path = typeof input.path === 'string' ? ` in ${input.path}` : '';
+    return `${input.pattern}${path}`;
+  }
+  if ((toolName === 'WebFetch' || toolName === 'WebSearch') && typeof input.url === 'string') {
+    return input.url;
+  }
+
+  try {
+    return truncate(JSON.stringify(input), 240);
+  } catch {
+    return String(input);
+  }
+}
+
+export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
+  messages,
+  isCreatingSession,
+  isStreaming,
+  onAskGeneral,
+  onStop,
+  permissionRequests = [],
+  onRespondToPermission,
+  aiProviders = [],
+  aiConfig,
+  onAIConfigChange,
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [generalInput, setGeneralInput] = useState('');
+  const latestMessage = messages[messages.length - 1];
+  const latestResponseText = latestMessage?.response.text ?? '';
+
+  useEffect(() => {
+    if (!scrollRef.current) return;
+    const last = scrollRef.current.querySelector('[data-ai-message]:last-child');
+    last?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+  }, [messages.length, latestResponseText]);
+
+  const handleGeneralSubmit = useCallback(() => {
+    const question = generalInput.trim();
+    if (!question || !onAskGeneral) return;
+    onAskGeneral(question);
+    setGeneralInput('');
+  }, [generalInput, onAskGeneral]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <OverlayScrollArea className="flex-1 min-h-0">
+        <div ref={scrollRef} className="p-2 space-y-3">
+          {messages.length === 0 && !isCreatingSession && (
+            <div className="flex flex-col items-center justify-center h-48 text-center px-4 text-muted-foreground">
+              <div className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center mb-3">
+                <SparklesIcon className="w-5 h-5" />
+              </div>
+              <p className="text-xs">
+                {onAskGeneral ? (
+                  <>Select text and click <strong>Ask AI</strong>, or ask a general question below.</>
+                ) : (
+                  <>Select text and click <strong>Ask AI</strong>.</>
+                )}
+              </p>
+            </div>
+          )}
+
+          {isCreatingSession && messages.length === 0 && (
+            <div className="text-xs text-muted-foreground text-center py-4">
+              <span className="ai-streaming-cursor" /> Starting AI session...
+            </div>
+          )}
+
+          {messages.map(entry => (
+            <DocumentQAPair key={entry.question.id} entry={entry} />
+          ))}
+        </div>
+      </OverlayScrollArea>
+
+      {/* Pending permission requests — pinned just above the input/model bar so
+          the user sees them right where they act, not buried at the top. */}
+      {permissionRequests.filter(p => !p.decided).length > 0 && (
+        <div className="border-t border-border/50 p-2 space-y-2">
+          {permissionRequests.filter(p => !p.decided).map(permission => (
+            <PermissionCard
+              key={permission.requestId}
+              permission={permission}
+              onRespond={onRespondToPermission ?? (() => {})}
+            />
+          ))}
+        </div>
+      )}
+
+      <AIProviderBar
+        providers={aiProviders}
+        selectedProviderId={aiConfig?.providerId ?? null}
+        selectedModel={aiConfig?.model ?? null}
+        selectedReasoningEffort={aiConfig?.reasoningEffort ?? null}
+        onProviderChange={(providerId) => onAIConfigChange?.({ providerId })}
+        onModelChange={(model) => onAIConfigChange?.({ model })}
+        onReasoningEffortChange={(reasoningEffort) => onAIConfigChange?.({ reasoningEffort })}
+      />
+
+      {onAskGeneral && (
+        <GeneralInput
+          value={generalInput}
+          onChange={setGeneralInput}
+          onSubmit={handleGeneralSubmit}
+          disabled={isStreaming}
+          isStreaming={isStreaming}
+          onStop={onStop}
+        />
+      )}
+    </div>
+  );
+};
+
+const DocumentQAPair = memo<{ entry: AIChatEntry }>(({ entry }) => {
+  const { question, response } = entry;
+  const renderedResponse = useMemo(
+    () => response.text ? renderChatMarkdown(response.text) : null,
+    [response.text],
+  );
+  const scope = question.scope;
+
+  return (
+    <div data-ai-message data-question-id={question.id} className="flex flex-col gap-1.5">
+      <div className="p-2.5 rounded-lg border border-transparent hover:bg-muted/30 transition-colors">
+        <div className="flex items-center justify-between gap-2 mb-1">
+          <div className="flex items-center gap-1.5 min-w-0">
+            {scope?.kind === 'selection' && (
+              <span className="text-[9px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                selection
+              </span>
+            )}
+            {scope?.label && (
+              <span className="text-[10px] text-muted-foreground truncate">
+                {scope.label}
+              </span>
+            )}
+          </div>
+          <span className="text-[10px] text-muted-foreground/50 flex-shrink-0">
+            {formatRelativeTime(question.createdAt)}
+          </span>
+        </div>
+        {scope?.text && (
+          <p className="text-[10px] text-muted-foreground/70 border-l border-border pl-2 mb-1.5 line-clamp-3">
+            {truncate(scope.text)}
+          </p>
+        )}
+        <p className="text-xs text-foreground/80 whitespace-pre-wrap">{question.prompt}</p>
+      </div>
+
+      <div className="group relative p-2.5 rounded-lg border border-border/50 bg-popover/50 hover:bg-muted/30 transition-colors">
+        {response.error ? (
+          <p className="text-xs text-destructive">{response.error}</p>
+        ) : response.text ? (
+          <div className="text-xs">
+            {renderedResponse}
+            {response.isStreaming && <span className="ai-streaming-cursor inline-block ml-0.5" />}
+          </div>
+        ) : response.isStreaming ? (
+          <span className="text-xs text-muted-foreground">
+            <span className="ai-streaming-cursor" /> Thinking...
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+const PermissionCard: React.FC<{
+  permission: PendingPermission;
+  onRespond: (requestId: string, allow: boolean) => void;
+}> = ({ permission, onRespond }) => {
+  const label = permission.title || permission.displayName || permission.toolName;
+  const toolInput = formatToolInput(permission.toolName, permission.toolInput);
+
+  return (
+    <div className="p-2.5 rounded-lg border border-warning/30 bg-warning/5">
+      <p className="text-[10px] font-medium text-warning uppercase tracking-wider mb-1">
+        Permission Request
+      </p>
+      <p className="text-xs font-mono text-foreground/80 break-all">
+        {label}
+      </p>
+      {toolInput && (
+        <p className="mt-1 px-2 py-1 rounded bg-background/60 border border-warning/20 text-[10px] font-mono text-foreground/80 break-all">
+          {toolInput}
+        </p>
+      )}
+      {permission.description && (
+        <p className="text-[10px] text-muted-foreground mt-0.5">{permission.description}</p>
+      )}
+      <div className="flex gap-2 mt-2">
+        <button
+          onClick={() => onRespond(permission.requestId, true)}
+          className="flex-1 px-2 py-1.5 rounded-md bg-primary text-primary-foreground text-[10px] font-medium hover:opacity-90 transition-opacity"
+        >
+          Allow
+        </button>
+        <button
+          onClick={() => onRespond(permission.requestId, false)}
+          className="flex-1 px-2 py-1.5 rounded-md bg-muted text-foreground text-[10px] font-medium hover:bg-muted/80 transition-colors"
+        >
+          Deny
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const GeneralInput: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  disabled?: boolean;
+  isStreaming?: boolean;
+  onStop?: () => void;
+}> = ({ value, onChange, onSubmit, disabled, isStreaming, onStop }) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }, [value]);
+
+  return (
+    <div className="border-t border-border/50 p-2">
+      <div className="flex items-end gap-1.5">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder="Ask about this document..."
+          rows={1}
+          className="flex-1 px-2.5 py-1.5 bg-muted rounded-md text-xs text-foreground placeholder:text-muted-foreground/50 resize-none focus:outline-none focus:ring-1 focus:ring-primary/50 leading-relaxed"
+          style={{ maxHeight: 120 }}
+          disabled={disabled}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.nativeEvent.isComposing && !disabled) {
+              event.preventDefault();
+              onSubmit();
+            }
+          }}
+        />
+        {isStreaming && onStop ? (
+          <button
+            onClick={onStop}
+            className="p-1.5 mb-px rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors flex-shrink-0"
+            title="Stop generating"
+            aria-label="Stop generating"
+          >
+            <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+              <rect x="6" y="6" width="12" height="12" rx="2" />
+            </svg>
+          </button>
+        ) : (
+          <button
+            onClick={onSubmit}
+            disabled={disabled || !value.trim()}
+            className="p-1.5 mb-px rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors flex-shrink-0"
+            title={`Send (${submitHint})`}
+            aria-label="Send AI question"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/components/blocks/AlertBlock.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { AlertKind } from '../../types';
+import { renderProseBody } from './proseBody';
+
+interface AlertBlockProps {
+  blockId: string;
+  kind: AlertKind;
+  body: string;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  githubRepo?: string;
+  onNavigateAnchor?: (hash: string) => void;
+}
+
+const TITLE: Record<AlertKind, string> = {
+  note: 'Note',
+  tip: 'Tip',
+  warning: 'Warning',
+  caution: 'Caution',
+  important: 'Important',
+};
+
+const Icon: React.FC<{ kind: AlertKind }> = ({ kind }) => {
+  const common = { viewBox: '0 0 16 16', width: '16', height: '16', fill: 'currentColor', 'aria-hidden': true as const };
+  switch (kind) {
+    case 'note':
+      return <svg {...common}><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>;
+    case 'tip':
+      return <svg {...common}><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"/></svg>;
+    case 'warning':
+      return <svg {...common}><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>;
+    case 'caution':
+      return <svg {...common}><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>;
+    case 'important':
+      return <svg {...common}><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>;
+  }
+};
+
+export const AlertBlock: React.FC<AlertBlockProps> = ({
+  blockId, kind, body, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, githubRepo, onNavigateAnchor,
+}) => {
+  return (
+    <div
+      className={`alert alert-${kind} my-4 pl-4 pr-3 py-2 border-l-[3px]`}
+      data-block-id={blockId}
+      data-block-type="alert"
+      data-alert-kind={kind}
+    >
+      <div className="alert-title flex items-center gap-2 font-semibold mb-1">
+        <Icon kind={kind} />
+        <span>{TITLE[kind]}</span>
+      </div>
+      {renderProseBody({ body, imageBaseDir, onImageClick, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor, githubRepo })}
+    </div>
+  );
+};

package/components/blocks/Callout.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { renderProseBody } from './proseBody';
+
+interface CalloutProps {
+  blockId: string;
+  kind: string;
+  body: string;
+  containerClassName: string;
+  blockType: 'alert' | 'directive';
+  kindAttribute: string;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  githubRepo?: string;
+  onNavigateAnchor?: (hash: string) => void;
+}
+
+export const Callout: React.FC<CalloutProps> = ({
+  blockId,
+  kind,
+  body,
+  containerClassName,
+  blockType,
+  kindAttribute,
+  onOpenLinkedDoc,
+  onOpenCodeFile,
+  imageBaseDir,
+  onImageClick,
+  githubRepo,
+  onNavigateAnchor,
+}) => {
+  const kindAttr =
+    blockType === 'alert' ? { 'data-alert-kind': kindAttribute } : { 'data-directive-kind': kindAttribute };
+  return (
+    <div
+      className={containerClassName}
+      data-block-id={blockId}
+      data-block-type={blockType}
+      {...kindAttr}
+    >
+      <div className={`${blockType}-title text-xs font-semibold uppercase tracking-wide mb-1`}>
+        {kind}
+      </div>
+      {renderProseBody({
+        body,
+        // Callout inherits text color from the container (directive tint per
+        // kind). Only pass size/leading classes, not a text-foreground value.
+        paragraphClassName: 'text-[15px] leading-relaxed',
+        listClassName: 'text-[15px] leading-relaxed',
+        imageBaseDir,
+        onImageClick,
+        onOpenLinkedDoc,
+        onOpenCodeFile,
+        onNavigateAnchor,
+        githubRepo,
+      })}
+    </div>
+  );
+};

package/components/blocks/CodeBlock.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github-dark.css';
+import { Block } from '../../types';
+
+interface CodeBlockProps {
+  block: Block;
+  onHover: (element: HTMLElement) => void;
+  onLeave: () => void;
+  isHovered: boolean;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave, isHovered }) => {
+  const [copied, setCopied] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const codeRef = useRef<HTMLElement>(null);
+
+  // Highlight code block on mount and when content/language changes
+  useEffect(() => {
+    if (codeRef.current) {
+      // Reset any previous highlighting
+      codeRef.current.removeAttribute('data-highlighted');
+      codeRef.current.className = `hljs font-mono${block.language ? ` language-${block.language}` : ''}`;
+      hljs.highlightElement(codeRef.current);
+    }
+  }, [block.content, block.language]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(block.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [block.content]);
+
+  const handleMouseEnter = () => {
+    if (containerRef.current) {
+      onHover(containerRef.current);
+    }
+  };
+
+  // Build className for code element
+  const codeClassName = `hljs font-mono${block.language ? ` language-${block.language}` : ''}`;
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative group my-5"
+      data-block-id={block.id}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={onLeave}
+    >
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded-md bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10"
+        title={copied ? 'Copied!' : 'Copy code'}
+      >
+        {copied ? (
+          <svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        ) : (
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+        )}
+      </button>
+      <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30">
+        <code ref={codeRef} className={codeClassName}>{block.content}</code>
+      </pre>
+    </div>
+  );
+};