feat(24-02): UI components — ChatSearchDialog, ChatMessageBookmark, ChatBookmarkList, ChatBranchSelector

- ChatSearchDialog: CommandDialog with shouldFilter=false for server-side FTS, term highlighting via React components
- ChatMessageBookmark: ghost icon button with fill-current for bookmarked state, aria-label toggle
- ChatBookmarkList: scrollable list with skeleton loading, empty state, navigation callbacks
- ChatBranchSelector: horizontal branch picker bar with GitBranch icon, active branch highlight

ui/src/components/ChatBookmarkList.tsx

@@ -0,0 +1,64 @@
+import { Bookmark } from "lucide-react";
+import { useChatBookmarks } from "../hooks/useChatBookmarks";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface ChatBookmarkListProps {
+  companyId: string;
+  onNavigate: (conversationId: string, messageId: string) => void;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDays = Math.floor(diffHr / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+export function ChatBookmarkList({ companyId, onNavigate }: ChatBookmarkListProps) {
+  const { data, isLoading } = useChatBookmarks(companyId);
+  const bookmarks = data?.items ?? [];
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-1 space-y-0.5">
+        {isLoading ? (
+          Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-14 w-full rounded" />
+          ))
+        ) : bookmarks.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-10 gap-2 text-muted-foreground">
+            <Bookmark className="h-8 w-8 opacity-30" />
+            <p className="text-sm">No bookmarks yet</p>
+          </div>
+        ) : (
+          bookmarks.map((bookmark) => (
+            <button
+              key={bookmark.id}
+              type="button"
+              className="w-full text-left px-2 py-2 rounded hover:bg-accent transition-colors"
+              onClick={() => onNavigate(bookmark.conversationId, bookmark.message.id)}
+            >
+              <p className="text-xs text-muted-foreground truncate mb-0.5">
+                {bookmark.conversationTitle ?? "Untitled conversation"}
+              </p>
+              <p className="text-sm text-foreground line-clamp-2">
+                {bookmark.message.content.slice(0, 120)}
+              </p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {formatRelativeTime(bookmark.createdAt)}
+              </p>
+            </button>
+          ))
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

ui/src/components/ChatBranchSelector.tsx

@@ -0,0 +1,62 @@
+import { GitBranch } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ChatConversation } from "@paperclipai/shared";
+
+interface ChatBranchSelectorProps {
+  conversationId: string;
+  branches: ChatConversation[];
+  activeBranchId: string | null;
+  onSelectBranch: (id: string) => void;
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+export function ChatBranchSelector({
+  conversationId,
+  branches,
+  activeBranchId,
+  onSelectBranch,
+}: ChatBranchSelectorProps) {
+  if (branches.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-1 px-2 py-1 border-b border-border overflow-x-auto">
+      <GitBranch className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      <span className="text-xs text-muted-foreground shrink-0 mr-1">Branch:</span>
+
+      {/* Original conversation */}
+      <button
+        type="button"
+        className={cn(
+          "shrink-0 rounded px-2 py-0.5 text-xs transition-colors",
+          activeBranchId === null || activeBranchId === conversationId
+            ? "bg-accent text-accent-foreground"
+            : "hover:bg-accent/50 text-muted-foreground",
+        )}
+        onClick={() => onSelectBranch(conversationId)}
+        title="Original conversation"
+      >
+        Original
+      </button>
+
+      {branches.map((branch, index) => (
+        <button
+          key={branch.id}
+          type="button"
+          className={cn(
+            "shrink-0 rounded px-2 py-0.5 text-xs transition-colors",
+            activeBranchId === branch.id
+              ? "bg-accent text-accent-foreground"
+              : "hover:bg-accent/50 text-muted-foreground",
+          )}
+          onClick={() => onSelectBranch(branch.id)}
+          title={`Created ${formatDate(branch.createdAt)}`}
+        >
+          {branch.title ?? `Branch ${index + 1}`}
+        </button>
+      ))}
+    </div>
+  );
+}

ui/src/components/ChatMessageBookmark.tsx

@@ -0,0 +1,35 @@
+import { Bookmark } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface ChatMessageBookmarkProps {
+  messageId: string;
+  conversationId: string;
+  isBookmarked: boolean;
+  onToggle: () => void;
+}
+
+export function ChatMessageBookmark({ isBookmarked, onToggle }: ChatMessageBookmarkProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onToggle}
+          aria-label={isBookmarked ? "Remove bookmark" : "Bookmark message"}
+        >
+          <Bookmark
+            className={cn(
+              "h-3.5 w-3.5",
+              isBookmarked && "fill-current",
+            )}
+          />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{isBookmarked ? "Remove bookmark" : "Bookmark message"}</TooltipContent>
+    </Tooltip>
+  );
+}

ui/src/components/ChatSearchDialog.tsx

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { useChatSearch } from "../hooks/useChatSearch";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Command } from "cmdk";
+
+interface ChatSearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  companyId: string | null;
+  onNavigate: (conversationId: string, messageId: string) => void;
+}
+
+function stripMarkdown(text: string): string {
+  return text
+    .replace(/```[\s\S]*?```/g, "")
+    .replace(/`[^`]+`/g, "")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/#{1,6}\s/g, "")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/>\s/g, "")
+    .trim();
+}
+
+/** Split text into segments, marking portions that match the query terms */
+function splitWithHighlight(text: string, query: string): Array<{ text: string; highlight: boolean }> {
+  if (!query.trim()) return [{ text, highlight: false }];
+  const terms = query.trim().split(/\s+/).filter(Boolean);
+  const pattern = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  const re = new RegExp(`(${pattern})`, "gi");
+  const parts = text.split(re);
+  return parts.map((part) => ({
+    text: part,
+    highlight: re.test(part),
+  }));
+}
+
+function HighlightedText({ text, query }: { text: string; query: string }) {
+  const segments = splitWithHighlight(text, query);
+  return (
+    <>
+      {segments.map((seg, i) =>
+        seg.highlight ? (
+          <mark key={i} className="bg-yellow-200 dark:bg-yellow-800 rounded-sm">
+            {seg.text}
+          </mark>
+        ) : (
+          <span key={i}>{seg.text}</span>
+        ),
+      )}
+    </>
+  );
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDays = Math.floor(diffHr / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+export function ChatSearchDialog({ open, onOpenChange, companyId, onNavigate }: ChatSearchDialogProps) {
+  const [query, setQuery] = useState("");
+  const { data } = useChatSearch(companyId, query);
+  const results = data?.items ?? [];
+
+  function handleSelect(conversationId: string, messageId: string) {
+    onNavigate(conversationId, messageId);
+    onOpenChange(false);
+    setQuery("");
+  }
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={(v) => {
+        onOpenChange(v);
+        if (!v) setQuery("");
+      }}
+      title="Search messages"
+      description="Search all messages across conversations"
+    >
+      <Command shouldFilter={false}>
+        <CommandInput
+          placeholder="Search all messages..."
+          value={query}
+          onValueChange={setQuery}
+        />
+        <CommandList>
+          {query.trim().length >= 2 && results.length === 0 && (
+            <CommandEmpty>No results found.</CommandEmpty>
+          )}
+          {results.map((result) => {
+            const snippet = stripMarkdown(result.content).slice(0, 120);
+            return (
+              <CommandItem
+                key={result.messageId}
+                value={result.messageId}
+                onSelect={() => handleSelect(result.conversationId, result.messageId)}
+                className="flex flex-col items-start gap-0.5 py-2"
+              >
+                <div className="flex w-full items-center gap-2">
+                  <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <span className="text-xs text-muted-foreground truncate flex-1">
+                    {result.conversationTitle ?? "Untitled conversation"}
+                  </span>
+                  <span className="text-xs text-muted-foreground shrink-0 capitalize">
+                    {result.role}
+                  </span>
+                  <span className="text-xs text-muted-foreground shrink-0">
+                    {formatRelativeTime(result.createdAt)}
+                  </span>
+                </div>
+                <p className="pl-5 text-sm text-foreground line-clamp-2">
+                  <HighlightedText text={snippet} query={query} />
+                </p>
+              </CommandItem>
+            );
+          })}
+        </CommandList>
+      </Command>
+    </CommandDialog>
+  );
+}