@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/BCFPanel.tsx

@@ -16,40 +16,16 @@
 import React, { useCallback, useState, useMemo, useRef } from 'react';
 import {
   X,
-  Plus,
   MessageSquare,
-  Camera,
   Upload,
   Download,
-  ChevronLeft,
-  Send,
-  Trash2,
-  Edit2,
   User,
-  Calendar,
-  AlertCircle,
-  CheckCircle,
-  Clock,
-  Filter,
-  MousePointer2,
-  Focus,
-  EyeOff,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { useViewerStore } from '@/store';
-import type { BCFTopic, BCFComment, BCFViewpoint } from '@ifc-lite/bcf';
+import type { BCFTopic, BCFViewpoint } from '@ifc-lite/bcf';
 import {
   readBCF,
   writeBCF,
@@ -58,767 +34,9 @@ import {
   createBCFComment,
 } from '@ifc-lite/bcf';
 import { useBCF } from '@/hooks/useBCF';
-
-// ============================================================================
-// Constants
-// ============================================================================
-
-const TOPIC_TYPES = ['Issue', 'Request', 'Comment', 'Error', 'Warning', 'Info'];
-const TOPIC_STATUSES = ['Open', 'In Progress', 'Resolved', 'Closed'];
-const PRIORITIES = ['High', 'Medium', 'Low'];
-
-// ============================================================================
-// Helper Components
-// ============================================================================
-
-function StatusBadge({ status }: { status?: string }) {
-  const variant = useMemo(() => {
-    switch (status?.toLowerCase()) {
-      case 'open':
-        return 'default';
-      case 'in progress':
-        return 'secondary';
-      case 'resolved':
-      case 'closed':
-        return 'outline';
-      default:
-        return 'default';
-    }
-  }, [status]);
-
-  const Icon = useMemo(() => {
-    switch (status?.toLowerCase()) {
-      case 'open':
-        return AlertCircle;
-      case 'in progress':
-        return Clock;
-      case 'resolved':
-      case 'closed':
-        return CheckCircle;
-      default:
-        return AlertCircle;
-    }
-  }, [status]);
-
-  return (
-    <Badge variant={variant} className="text-xs gap-1">
-      <Icon className="h-3 w-3" />
-      {status || 'Open'}
-    </Badge>
-  );
-}
-
-function PriorityBadge({ priority }: { priority?: string }) {
-  const colorClass = useMemo(() => {
-    switch (priority?.toLowerCase()) {
-      case 'high':
-        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-      case 'medium':
-        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-      case 'low':
-        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-      default:
-        return '';
-    }
-  }, [priority]);
-
-  if (!priority) return null;
-
-  return (
-    <Badge variant="outline" className={`text-xs ${colorClass}`}>
-      {priority}
-    </Badge>
-  );
-}
-
-function formatDate(isoDate: string): string {
-  try {
-    const date = new Date(isoDate);
-    return date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    });
-  } catch {
-    return isoDate;
-  }
-}
-
-function formatDateTime(isoDate: string): string {
-  try {
-    const date = new Date(isoDate);
-    return date.toLocaleString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  } catch {
-    return isoDate;
-  }
-}
-
-// ============================================================================
-// Topic List View
-// ============================================================================
-
-interface TopicListProps {
-  topics: BCFTopic[];
-  onSelectTopic: (topicId: string) => void;
-  onCreateTopic: () => void;
-  statusFilter: string;
-  onStatusFilterChange: (status: string) => void;
-  author: string;
-  onSetAuthor: (author: string) => void;
-}
-
-function TopicList({
-  topics,
-  onSelectTopic,
-  onCreateTopic,
-  statusFilter,
-  onStatusFilterChange,
-  author,
-  onSetAuthor,
-}: TopicListProps) {
-  const [editingEmail, setEditingEmail] = useState(false);
-  const [emailInput, setEmailInput] = useState(author);
-  const isDefaultEmail = author === 'user@example.com';
-
-  const handleSaveEmail = useCallback(() => {
-    if (emailInput.trim() && emailInput.includes('@')) {
-      onSetAuthor(emailInput.trim());
-      setEditingEmail(false);
-    }
-  }, [emailInput, onSetAuthor]);
-  const filteredTopics = useMemo(() => {
-    if (!statusFilter || statusFilter === 'all') return topics;
-    return topics.filter(
-      (t) => t.topicStatus?.toLowerCase() === statusFilter.toLowerCase()
-    );
-  }, [topics, statusFilter]);
-
-  // Sort by creation date (newest first)
-  const sortedTopics = useMemo(() => {
-    return [...filteredTopics].sort(
-      (a, b) => new Date(b.creationDate).getTime() - new Date(a.creationDate).getTime()
-    );
-  }, [filteredTopics]);
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Filter */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
-        <Filter className="h-4 w-4 text-muted-foreground" />
-        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
-          <SelectTrigger className="h-8 flex-1">
-            <SelectValue placeholder="All statuses" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All statuses</SelectItem>
-            {TOPIC_STATUSES.map((status) => (
-              <SelectItem key={status} value={status.toLowerCase()}>
-                {status}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Button size="sm" variant="outline" onClick={onCreateTopic}>
-          <Plus className="h-4 w-4" />
-        </Button>
-      </div>
-
-      {/* Topic List */}
-      <ScrollArea className="flex-1">
-        {sortedTopics.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-8 px-4 text-muted-foreground text-sm">
-            <MessageSquare className="h-8 w-8 mb-2 opacity-50" />
-            <p>No topics</p>
-            <Button
-              variant="link"
-              size="sm"
-              onClick={onCreateTopic}
-              className="mt-1"
-            >
-              Create first topic
-            </Button>
-
-            {/* Email setup nudge */}
-            <div className="mt-6 w-full max-w-xs">
-              <div className="border border-border rounded-lg p-3 bg-muted/30">
-                {editingEmail ? (
-                  <div className="space-y-2">
-                    <Label className="text-xs text-muted-foreground">Your email for BCF authorship</Label>
-                    <Input
-                      value={emailInput}
-                      onChange={(e) => setEmailInput(e.target.value)}
-                      placeholder="your@email.com"
-                      className="h-8 text-sm"
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') handleSaveEmail();
-                        if (e.key === 'Escape') setEditingEmail(false);
-                      }}
-                      autoFocus
-                    />
-                    <div className="flex gap-2 justify-end">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => {
-                          setEmailInput(author);
-                          setEditingEmail(false);
-                        }}
-                        className="h-7 text-xs"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        size="sm"
-                        onClick={handleSaveEmail}
-                        disabled={!emailInput.trim() || !emailInput.includes('@')}
-                        className="h-7 text-xs"
-                      >
-                        Save
-                      </Button>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs text-muted-foreground mb-0.5">Author</p>
-                      <p className={`text-sm truncate ${isDefaultEmail ? 'text-amber-600 dark:text-amber-400' : 'text-foreground'}`}>
-                        {author}
-                      </p>
-                    </div>
-                    <Button
-                      variant={isDefaultEmail ? 'default' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setEmailInput(author);
-                        setEditingEmail(true);
-                      }}
-                      className="h-7 text-xs shrink-0"
-                    >
-                      {isDefaultEmail ? 'Set email' : <Edit2 className="h-3 w-3" />}
-                    </Button>
-                  </div>
-                )}
-              </div>
-              {isDefaultEmail && !editingEmail && (
-                <p className="text-xs text-muted-foreground mt-2 text-center">
-                  Set your email to identify your issues and comments
-                </p>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="divide-y divide-border">
-            {sortedTopics.map((topic) => (
-              <button
-                key={topic.guid}
-                onClick={() => onSelectTopic(topic.guid)}
-                className="w-full text-left p-3 hover:bg-accent/50 transition-colors"
-              >
-                <div className="flex items-start justify-between gap-2 mb-1">
-                  <h4 className="font-medium text-sm line-clamp-1 flex-1">
-                    {topic.title}
-                  </h4>
-                  <StatusBadge status={topic.topicStatus} />
-                </div>
-                {topic.description && (
-                  <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
-                    {topic.description}
-                  </p>
-                )}
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <PriorityBadge priority={topic.priority} />
-                  <span className="flex items-center gap-1">
-                    <User className="h-3 w-3" />
-                    {topic.creationAuthor.split('@')[0]}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Calendar className="h-3 w-3" />
-                    {formatDate(topic.creationDate)}
-                  </span>
-                  {topic.comments.length > 0 && (
-                    <span className="flex items-center gap-1">
-                      <MessageSquare className="h-3 w-3" />
-                      {topic.comments.length}
-                    </span>
-                  )}
-                  {topic.viewpoints.length > 0 && (
-                    <span className="flex items-center gap-1">
-                      <Camera className="h-3 w-3" />
-                      {topic.viewpoints.length}
-                    </span>
-                  )}
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-      </ScrollArea>
-    </div>
-  );
-}
-
-// ============================================================================
-// Topic Detail View
-// ============================================================================
-
-interface TopicDetailProps {
-  topic: BCFTopic;
-  onBack: () => void;
-  onAddComment: (text: string, viewpointGuid?: string) => void;
-  onAddViewpoint: () => void;
-  onActivateViewpoint: (viewpoint: BCFViewpoint) => void;
-  onDeleteViewpoint: (viewpointGuid: string) => void;
-  onUpdateStatus: (status: string) => void;
-  onDeleteTopic: () => void;
-  // Viewer state info for capture feedback
-  selectionCount: number;
-  hasIsolation: boolean;
-  hasHiddenEntities: boolean;
-}
-
-function TopicDetail({
-  topic,
-  onBack,
-  onAddComment,
-  onAddViewpoint,
-  onActivateViewpoint,
-  onDeleteViewpoint,
-  onUpdateStatus,
-  onDeleteTopic,
-  selectionCount,
-  hasIsolation,
-  hasHiddenEntities,
-}: TopicDetailProps) {
-  const [commentText, setCommentText] = useState('');
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [selectedViewpointGuid, setSelectedViewpointGuid] = useState<string | null>(null);
-
-  // Get the selected viewpoint for display
-  const selectedViewpoint = useMemo(() => {
-    if (!selectedViewpointGuid) return null;
-    return topic.viewpoints.find(vp => vp.guid === selectedViewpointGuid) || null;
-  }, [selectedViewpointGuid, topic.viewpoints]);
-
-  const handleSubmitComment = useCallback(() => {
-    if (commentText.trim()) {
-      // Associate comment with selected viewpoint if one is selected
-      onAddComment(commentText.trim(), selectedViewpointGuid || undefined);
-      setCommentText('');
-      setSelectedViewpointGuid(null); // Clear selection after commenting
-    }
-  }, [commentText, onAddComment, selectedViewpointGuid]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmitComment();
-      }
-    },
-    [handleSubmitComment]
-  );
-
-  return (
-    <div className="flex flex-col h-full relative">
-      {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
-        <Button variant="ghost" size="sm" onClick={onBack}>
-          <ChevronLeft className="h-4 w-4" />
-        </Button>
-        <h3 className="font-medium text-sm flex-1 truncate">{topic.title}</h3>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setShowDeleteConfirm(true)}
-          className="text-destructive hover:text-destructive"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      </div>
-
-      <ScrollArea className="flex-1">
-        <div className="p-3 space-y-4">
-          {/* Topic Info */}
-          <div className="space-y-2">
-            <div className="flex items-center gap-2 flex-wrap">
-              <Select value={topic.topicStatus || 'Open'} onValueChange={onUpdateStatus}>
-                <SelectTrigger className="h-7 w-auto">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {TOPIC_STATUSES.map((status) => (
-                    <SelectItem key={status} value={status}>
-                      {status}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <PriorityBadge priority={topic.priority} />
-              {topic.topicType && (
-                <Badge variant="outline" className="text-xs">
-                  {topic.topicType}
-                </Badge>
-              )}
-            </div>
-
-            {topic.description && (
-              <p className="text-sm text-muted-foreground">{topic.description}</p>
-            )}
-
-            <div className="text-xs text-muted-foreground space-y-1">
-              <p>
-                Created by {topic.creationAuthor} on{' '}
-                {formatDateTime(topic.creationDate)}
-              </p>
-              {topic.assignedTo && <p>Assigned to: {topic.assignedTo}</p>}
-              {topic.dueDate && <p>Due: {formatDate(topic.dueDate)}</p>}
-            </div>
-          </div>
-
-          <Separator />
-
-          {/* Viewpoints */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <h4 className="text-sm font-medium">Viewpoints</h4>
-              <Button variant="outline" size="sm" onClick={onAddViewpoint}>
-                <Camera className="h-3 w-3 mr-1" />
-                Capture
-              </Button>
-            </div>
-
-            {/* Capture info - what will be included */}
-            {(selectionCount > 0 || hasIsolation || hasHiddenEntities) && (
-              <div className="mb-2 p-2 bg-muted/50 rounded-md text-xs text-muted-foreground">
-                <p className="font-medium mb-1">Capture will include:</p>
-                <ul className="space-y-0.5">
-                  {selectionCount > 0 && (
-                    <li className="flex items-center gap-1">
-                      <MousePointer2 className="h-3 w-3" />
-                      {selectionCount} selected {selectionCount === 1 ? 'object' : 'objects'}
-                    </li>
-                  )}
-                  {hasIsolation && (
-                    <li className="flex items-center gap-1">
-                      <Focus className="h-3 w-3" />
-                      Isolated objects (others hidden)
-                    </li>
-                  )}
-                  {hasHiddenEntities && !hasIsolation && (
-                    <li className="flex items-center gap-1">
-                      <EyeOff className="h-3 w-3" />
-                      Hidden objects
-                    </li>
-                  )}
-                </ul>
-              </div>
-            )}
-
-            {topic.viewpoints.length === 0 ? (
-              <p className="text-xs text-muted-foreground">No viewpoints captured</p>
-            ) : (
-              <div className="space-y-2">
-                {topic.viewpoints.map((vp) => {
-                  const isSelected = selectedViewpointGuid === vp.guid;
-                  const commentCount = topic.comments.filter(c => c.viewpointGuid === vp.guid).length;
-                  return (
-                    <div
-                      key={vp.guid}
-                      className={`rounded-md overflow-hidden border-2 transition-colors ${
-                        isSelected ? 'border-primary bg-primary/5' : 'border-border'
-                      }`}
-                    >
-                      {/* Snapshot */}
-                      <div className="relative group">
-                        {vp.snapshot ? (
-                          <img
-                            src={vp.snapshot}
-                            alt="Viewpoint"
-                            className="w-full aspect-video object-cover cursor-pointer hover:opacity-90 transition-opacity"
-                            onClick={() => onActivateViewpoint(vp)}
-                          />
-                        ) : (
-                          <div
-                            className="w-full aspect-video bg-muted flex items-center justify-center cursor-pointer hover:bg-muted/80 transition-colors"
-                            onClick={() => onActivateViewpoint(vp)}
-                          >
-                            <Camera className="h-6 w-6 text-muted-foreground" />
-                          </div>
-                        )}
-                        {/* Delete button - hover only */}
-                        <Button
-                          variant="destructive"
-                          size="icon"
-                          className="absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onDeleteViewpoint(vp.guid);
-                          }}
-                        >
-                          <Trash2 className="h-3 w-3" />
-                        </Button>
-                      </div>
-                      {/* Action bar - always visible */}
-                      <div className="flex items-center justify-between px-2 py-1.5 bg-muted/30">
-                        <Button
-                          variant={isSelected ? 'default' : 'ghost'}
-                          size="sm"
-                          className="h-7 text-xs gap-1"
-                          onClick={() => setSelectedViewpointGuid(isSelected ? null : vp.guid)}
-                        >
-                          <MessageSquare className="h-3 w-3" />
-                          {commentCount > 0 ? `${commentCount} comment${commentCount > 1 ? 's' : ''}` : 'Comment'}
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-7 text-xs"
-                          onClick={() => onActivateViewpoint(vp)}
-                        >
-                          Go to view
-                        </Button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          <Separator />
-
-          {/* Comments */}
-          <div>
-            <h4 className="text-sm font-medium mb-2">
-              Comments ({topic.comments.length})
-            </h4>
-
-            <div className="space-y-3">
-              {topic.comments.map((comment) => {
-                // Find associated viewpoint if any
-                const associatedViewpoint = comment.viewpointGuid
-                  ? topic.viewpoints.find(vp => vp.guid === comment.viewpointGuid)
-                  : null;
-                return (
-                  <div
-                    key={comment.guid}
-                    className="bg-muted/50 rounded-md p-2 text-sm"
-                  >
-                    {/* Show associated viewpoint thumbnail if present */}
-                    {associatedViewpoint?.snapshot && (
-                      <div
-                        className="mb-2 rounded overflow-hidden border border-border cursor-pointer hover:opacity-80 transition-opacity"
-                        onClick={() => onActivateViewpoint(associatedViewpoint)}
-                      >
-                        <img
-                          src={associatedViewpoint.snapshot}
-                          alt="Associated viewpoint"
-                          className="w-full h-16 object-cover"
-                        />
-                      </div>
-                    )}
-                    <div className="flex items-center gap-2 mb-1 text-xs text-muted-foreground">
-                      <User className="h-3 w-3" />
-                      <span>{comment.author.split('@')[0]}</span>
-                      <span>-</span>
-                      <span>{formatDateTime(comment.date)}</span>
-                      {comment.viewpointGuid && (
-                        <span className="flex items-center gap-0.5">
-                          <Camera className="h-3 w-3" />
-                        </span>
-                      )}
-                    </div>
-                    <p className="whitespace-pre-wrap">{comment.comment}</p>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      </ScrollArea>
-
-      {/* Comment Input */}
-      <div className="border-t border-border p-3">
-        {/* Show selected viewpoint indicator */}
-        {selectedViewpoint && (
-          <div className="flex items-center gap-2 mb-2 p-2 bg-primary/10 rounded-md">
-            {selectedViewpoint.snapshot && (
-              <img
-                src={selectedViewpoint.snapshot}
-                alt="Selected viewpoint"
-                className="w-10 h-10 object-cover rounded"
-              />
-            )}
-            <div className="flex-1 min-w-0">
-              <p className="text-xs text-muted-foreground">Commenting on viewpoint</p>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 shrink-0"
-              onClick={() => setSelectedViewpointGuid(null)}
-            >
-              <X className="h-3 w-3" />
-            </Button>
-          </div>
-        )}
-        <div className="flex gap-2">
-          <Input
-            placeholder={selectedViewpoint ? "Add comment on viewpoint..." : "Add a comment..."}
-            value={commentText}
-            onChange={(e) => setCommentText(e.target.value)}
-            onKeyDown={handleKeyDown}
-            className="flex-1"
-          />
-          <Button size="icon" onClick={handleSubmitComment} disabled={!commentText.trim()}>
-            <Send className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Delete Confirmation */}
-      {showDeleteConfirm && (
-        <div className="absolute inset-0 bg-background/90 flex items-center justify-center p-4">
-          <div className="bg-card border rounded-lg p-4 max-w-xs">
-            <h4 className="font-medium mb-2">Delete Topic?</h4>
-            <p className="text-sm text-muted-foreground mb-4">
-              This will permanently delete this topic and all its comments and viewpoints.
-            </p>
-            <div className="flex gap-2 justify-end">
-              <Button variant="outline" size="sm" onClick={() => setShowDeleteConfirm(false)}>
-                Cancel
-              </Button>
-              <Button
-                variant="destructive"
-                size="sm"
-                onClick={() => {
-                  onDeleteTopic();
-                  setShowDeleteConfirm(false);
-                }}
-              >
-                Delete
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ============================================================================
-// Create Topic Dialog
-// ============================================================================
-
-interface CreateTopicFormProps {
-  onSubmit: (topic: Partial<BCFTopic>) => void;
-  onCancel: () => void;
-  author: string;
-}
-
-function CreateTopicForm({ onSubmit, onCancel, author }: CreateTopicFormProps) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [topicType, setTopicType] = useState('Issue');
-  const [priority, setPriority] = useState('Medium');
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      if (title.trim()) {
-        onSubmit({
-          title: title.trim(),
-          description: description.trim() || undefined,
-          topicType,
-          priority,
-        });
-      }
-    },
-    [title, description, topicType, priority, onSubmit]
-  );
-
-  return (
-    <form onSubmit={handleSubmit} className="p-3 space-y-4">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="font-medium">New Topic</h3>
-        <Button variant="ghost" size="sm" type="button" onClick={onCancel}>
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="title">Title *</Label>
-        <Input
-          id="title"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Brief description of the issue"
-          required
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="description">Description</Label>
-        <textarea
-          id="description"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder="Detailed description (optional)"
-          className="w-full min-h-[80px] px-3 py-2 text-sm rounded-md border border-input bg-background"
-        />
-      </div>
-
-      <div className="grid grid-cols-2 gap-3">
-        <div className="space-y-2">
-          <Label>Type</Label>
-          <Select value={topicType} onValueChange={setTopicType}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {TOPIC_TYPES.map((type) => (
-                <SelectItem key={type} value={type}>
-                  {type}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Priority</Label>
-          <Select value={priority} onValueChange={setPriority}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {PRIORITIES.map((p) => (
-                <SelectItem key={p} value={p}>
-                  {p}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      <div className="flex gap-2 justify-end pt-2">
-        <Button variant="outline" type="button" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button type="submit" disabled={!title.trim()}>
-          Create Topic
-        </Button>
-      </div>
-    </form>
-  );
-}
+import { BCFTopicList } from './bcf/BCFTopicList';
+import { BCFTopicDetail } from './bcf/BCFTopicDetail';
+import { BCFCreateTopicForm } from './bcf/BCFCreateTopicForm';
 
 // ============================================================================
 // Main BCF Panel Component
@@ -1105,13 +323,13 @@ export function BCFPanel({ onClose }: BCFPanelProps) {
       {/* Content */}
       <div className="flex-1 overflow-hidden relative">
         {showCreateForm ? (
-          <CreateTopicForm
+          <BCFCreateTopicForm
             onSubmit={handleCreateTopic}
             onCancel={() => setShowCreateForm(false)}
             author={bcfAuthor}
           />
         ) : activeTopic ? (
-          <TopicDetail
+          <BCFTopicDetail
             topic={activeTopic}
             onBack={() => setActiveTopic(null)}
             onAddComment={handleAddComment}
@@ -1125,7 +343,7 @@ export function BCFPanel({ onClose }: BCFPanelProps) {
             hasHiddenEntities={hasHiddenEntities}
           />
         ) : (
-          <TopicList
+          <BCFTopicList
             topics={topics}
             onSelectTopic={setActiveTopic}
             onCreateTopic={() => setShowCreateForm(true)}