@allbluecn/web-app 0.12.0 → 0.12.3

package/src/plugins/core/prd/components/page-version-panel.tsx

@@ -539,7 +539,8 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
           style={{ paddingLeft: `${12 + depth * 16}px` }}
         >
           <Checkbox
-            checked={isFolder && indeterminate ? "indeterminate" : allSelected}
+            checked={isFolder && indeterminate ? false : allSelected}
+            indeterminate={isFolder && indeterminate}
             disabled={isEmptyFolder}
             onCheckedChange={() => {
               if (!isEmptyFolder) {
@@ -584,10 +585,10 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
               (allPageVersionsByPage.get(node.id) || []).length > 1 ? (
                 <Select
                   value={String(selectedPageVersionNo.get(node.id) ?? node.version)}
-                  onValueChange={(value: string) => {
+                  onValueChange={(value) => {
                     setSelectedPageVersionNo((prev) => {
                       const next = new Map(prev);
-                      next.set(node.id, parseInt(value));
+                      next.set(node.id, parseInt(value ?? ""));
                       return next;
                     });
                   }}
@@ -789,47 +790,35 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
 
                             <div className="flex items-center gap-0.5 shrink-0" onClick={(e) => e.stopPropagation()}>
                               <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <button
-                                    onClick={() => restorePageVersion(pv.id)}
-                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors"
-                                  >
+                                <TooltipTrigger render={<button onClick={() => restorePageVersion(pv.id)}
+                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" />}>
                                     <RotateCcw className="size-3" />
-                                  </button>
-                                </TooltipTrigger>
+                                  </TooltipTrigger>
                                 <TooltipContent>
                                   <p>{m.version_restoreToThis()}</p>
                                 </TooltipContent>
                               </Tooltip>
                               <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <button
-                                    onClick={() => {
+                                <TooltipTrigger render={<button onClick={() => {
                                       setEditDialogVersionId(pv.id);
                                       setEditDialogNotes(pv.notes || "");
                                       setEditDialogOpen(true);
                                     }}
-                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors"
-                                  >
+                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" />}>
                                     <Pencil className="size-3" />
-                                  </button>
-                                </TooltipTrigger>
+                                  </TooltipTrigger>
                                 <TooltipContent>
                                   <p>{m.version_editNotes()}</p>
                                 </TooltipContent>
                               </Tooltip>
                               <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <button
-                                    onClick={() => {
+                                <TooltipTrigger render={<button onClick={() => {
                                       setDeleteVersionId(pv.id);
                                       setDeleteConfirmOpen(true);
                                     }}
-                                    className="size-5 flex items-center justify-center rounded hover:bg-destructive/10 text-muted-foreground/50 hover:text-destructive transition-colors"
-                                  >
+                                    className="size-5 flex items-center justify-center rounded hover:bg-destructive/10 text-muted-foreground/50 hover:text-destructive transition-colors" />}>
                                     <Trash2 className="size-3" />
-                                  </button>
-                                </TooltipTrigger>
+                                  </TooltipTrigger>
                                 <TooltipContent>
                                   <p>{m.version_deleteVersion()}</p>
                                 </TooltipContent>
@@ -866,17 +855,13 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
                   {m.version_selectedCount({ count: selectedCount })}
                 </span>
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => loadPages(true)}
+                  <TooltipTrigger render={<button onClick={() => loadPages(true)}
                       disabled={syncing || pagesLoading}
-                      className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground transition-colors"
-                    >
+                      className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground transition-colors" />}>
                       <RefreshCw
                         className={cn("size-3.5", syncing && "animate-spin")}
                       />
-                    </button>
-                  </TooltipTrigger>
+                    </TooltipTrigger>
                   <TooltipContent>
                     <p>{m.version_syncPages()}</p>
                   </TooltipContent>
@@ -886,7 +871,8 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
             <div className="flex items-center gap-2 px-2 py-1 mb-1.5">
               <label className="flex items-center gap-1.5 cursor-pointer ml-1">
                 <Checkbox
-                  checked={indeterminateAll ? "indeterminate" : allPagesSelected}
+                  checked={indeterminateAll ? false : allPagesSelected}
+                  indeterminate={indeterminateAll}
                   onCheckedChange={() => {
                     if (allPagesSelected) {
                       setSelectedPageIds(new Set());
@@ -899,14 +885,10 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
                 <span className="text-[10px] text-muted-foreground">{m.version_selectAll()}</span>
               </label>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={selectLatestPages}
-                    className="text-[10px] text-muted-foreground hover:text-foreground ml-2 "
-                  >
+                <TooltipTrigger render={<button onClick={selectLatestPages}
+                    className="text-[10px] text-muted-foreground hover:text-foreground ml-2 " />}>
                     {m.version_selectLatest()}
-                  </button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>
                   <p>{m.version_selectLatestHint()}</p>
                 </TooltipContent>
@@ -957,8 +939,7 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
               className="h-7 text-xs md:text-xs mt-2"
             />
             <Tooltip>
-              <TooltipTrigger asChild>
-                <span tabIndex={0}>
+              <TooltipTrigger render={<span tabIndex={0} />}>
                   <Button
                     size="sm"
                     className="w-full mt-2 h-7 text-xs"
@@ -967,8 +948,7 @@ export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
                   >
                     {isUpdateMode ? m.version_update() : m.version_publish()} v{major}.{minor}.{patch} PRD
                   </Button>
-                </span>
-              </TooltipTrigger>
+                </TooltipTrigger>
               {versionTooLow && (
                 <TooltipContent>
                   <p>{m.version_versionTooLow()}</p>

package/src/plugins/core/prd/components/page-version-tree.tsx

@@ -157,16 +157,12 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
                 PAGE v{node.pageVersion.version}
               </span>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
+                <TooltipTrigger render={<Button variant="ghost"
                     size="icon"
                     className="size-6"
-                    onClick={() => node.pageVersion && onRestore(node.pageVersion)}
-                  >
+                    onClick={() => node.pageVersion && onRestore(node.pageVersion)} />}>
                     <RotateCcw className="size-3" />
-                  </Button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>
                   <p>{m.version_restoreToCurrent()}</p>
                 </TooltipContent>
@@ -280,16 +276,12 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
                       <span className="flex-1 truncate">{pv.pageName}</span>
                       <span className="text-muted-foreground text-[10px]">PAGE v{pv.version}</span>
                       <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="ghost"
+                        <TooltipTrigger render={<Button variant="ghost"
                             size="icon"
                             className="size-6"
-                            onClick={() => onRestore(pv)}
-                          >
+                            onClick={() => onRestore(pv)} />}>
                             <RotateCcw className="size-3" />
-                          </Button>
-                        </TooltipTrigger>
+                          </TooltipTrigger>
                         <TooltipContent>
                           <p>{m.version_restoreToCurrent()}</p>
                         </TooltipContent>

package/src/plugins/core/prd/components/prd-agent-panel.tsx

@@ -19,7 +19,7 @@ import { m } from '@/paraglide/messages.js'
 import { useState, useRef, useEffect, useCallback } from "react"
 import { Bot, Loader2, User, Plus, Trash2, ChevronDown, MessageSquare } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import type { CanvasElement } from "@allbluecn/kernel"
 import type { PrototypeComponentConfig } from "@/components/prototype"
 import { getAllComponents } from "@/lib/prototype-registry"
@@ -302,8 +302,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
       {/* 会话选择器 */}
       <div className="shrink-0 flex items-center gap-1 px-2 py-1.5 border-b">
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button className="flex flex-1 items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted min-w-0">
+          <DropdownMenuTrigger render={<button className="flex flex-1 items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted min-w-0" />}>
               <MessageSquare className="size-3 shrink-0" />
               <span className="truncate">
                 {conversationId
@@ -311,8 +310,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
                   : m.agent_newConv()}
               </span>
               <ChevronDown className="size-3 shrink-0" />
-            </button>
-          </DropdownMenuTrigger>
+            </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="min-w-56 max-h-80 overflow-y-auto rounded-lg p-1">
             {groupConversations(conversations).map(({ label, items }) => (
               items.length > 0 && (

package/src/plugins/core/prd/components/prd-comment-review-panel.tsx

@@ -21,7 +21,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { MessageSquare, ClipboardCheck, Check, X, Reply, ChevronUp } from "lucide-react";
-import { toast } from '@/components/ui/sonner';
+import { toast } from '@/components/ui/toast';
 import { useSession } from "@/components/shared-kit/auth/auth-client";
 import { maskEmail, formatTime, formatEditedTime } from "@/lib/comment-utils";
 import { UserAvatar } from "@/components/shared-kit";
@@ -130,9 +130,7 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
           >
             {tab.icon} {tab.label()}{tab.key === "comment" && commentCount > 0 && (
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="text-[10px] text-muted-foreground ml-0.5">({commentCount})</span>
-                </TooltipTrigger>
+                <TooltipTrigger render={<span className="text-[10px] text-muted-foreground ml-0.5" />}>({commentCount})</TooltipTrigger>
                 <TooltipContent side="top" className="text-xs">{m.comment_countTooltip({ count: commentCount })}</TooltipContent>
               </Tooltip>
             )}

package/src/plugins/core/prd/components/prd-doc-panel.tsx

@@ -51,38 +51,30 @@ export function PRDDocPanel({ className, content, onContentChange, autoSaveTime,
         
         <div className="flex items-center gap-2">
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onWidthModeChange("wider")}
+            <TooltipTrigger render={<button onClick={() => onWidthModeChange("wider")}
                 className={cn(
                   "p-1.5 rounded-md hover:bg-muted transition-colors",
                   widthMode === "wider"
                     ? "text-foreground bg-muted"
                     : "text-muted-foreground hover:text-foreground"
-                )}
-              >
+                )} />}>
                 <Maximize2 className="size-3" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p>{m.docPanel_wider()}</p>
             </TooltipContent>
           </Tooltip>
 
             <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onWidthModeChange("default")}
+            <TooltipTrigger render={<button onClick={() => onWidthModeChange("default")}
                 className={cn(
                   "p-1.5 rounded-md hover:bg-muted transition-colors",
                   widthMode === "default"
                     ? "text-foreground bg-muted"
                     : "text-muted-foreground hover:text-foreground"
-                )}
-              >
+                )} />}>
                 <Minimize2 className="size-3" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p>{m.docPanel_defaultWidth()}</p>
             </TooltipContent>

package/src/plugins/core/prd/components/prd-editor-layout.tsx

@@ -38,7 +38,7 @@ import { useTimezone } from "@/components/shared-kit/timezone/timezone-provider"
 import type { PRD } from "@allbluecn/kernel";
 import { updatePrdPageFn, getPrdPageFn } from "../serverFns/pages"
 import { updatePrdFn } from "../serverFns/prd"
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 
 interface PRDEditorLayoutProps {
   prd: PRD;

package/src/plugins/core/prd/components/prd-left-sidebar.tsx

@@ -345,14 +345,10 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                           <Input placeholder={m.sidebar_searchComponents()} className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30" value={search} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)} />
                         </div>
                         <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button
-                              onClick={() => setViewMode((m) => (m === "list" ? "grid" : "list"))}
-                              className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground"
-                            >
+                          <TooltipTrigger render={<button onClick={() => setViewMode((m) => (m === "list" ? "grid" : "list"))}
+                              className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground" />}>
                               {viewMode === "list" ? <LayoutGrid className="size-3.5" /> : <List className="size-3.5" />}
-                            </button>
-                          </TooltipTrigger>
+                            </TooltipTrigger>
                           <TooltipContent>
                             <p>{viewMode === "list" ? m.sidebar_gridView() : m.sidebar_listView()}</p>
                           </TooltipContent>
@@ -383,15 +379,13 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                                   {items.map((item) => (
                                     <TooltipProvider key={item.id}>
                                       <Tooltip>
-                                        <TooltipTrigger asChild>
-                                          <div className="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-muted/50 cursor-grab active:cursor-grabbing group text-sm" draggable onDragStart={(e) => { e.dataTransfer.setData("text/plain", `proto:${item.prototypeKey}`); }}>
+                                        <TooltipTrigger render={<div className="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-muted/50 cursor-grab active:cursor-grabbing group text-sm" draggable onDragStart={(e) => { e.dataTransfer.setData("text/plain", `proto:${item.prototypeKey}`); }} />}>
                                             <GripVertical className="size-3 shrink-0 text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors" />
                                             {React.createElement(COMPONENT_ICONS[item.prototypeKey ?? ""] ?? ComponentIcon, { className: "size-4 shrink-0 text-muted-foreground" })}
                                             <div className="min-w-0 flex-1">
                                               <div className="text-sm truncate">{item.name}</div>
                                             </div>
-                                          </div>
-                                        </TooltipTrigger>
+                                          </TooltipTrigger>
                                         <TooltipContent side="right" className="max-w-55">
                                           <div className="space-y-1">
                                             <p className="text-xs font-medium">{item.name}</p>

package/src/plugins/core/prd/components/prd-navigation.tsx

@@ -51,7 +51,11 @@ import {
   Settings as SettingsIcon,
   Trash2,
   MoreVertical,
+  Sparkles,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import AISuggestedPrompts from "@/components/hextaui/ai-suggested-prompts";
+import { startHandoffWithContext } from '@/lib/ai/chat-handoff'
 
 interface PRDNavigationProps {
   prd: PRD;
@@ -128,6 +132,20 @@ export function PRDNavigation({
     await router.navigate({ to: "/dashboard" });
   };
 
+  const handleAskAiSelect = (prompt: { title: string; prompt: string }) => {
+    startHandoffWithContext(
+      prompt.prompt,
+      { board: 'prd', entityId: prd.id },
+    )
+    void router.navigate({ to: '/harness' })
+  }
+
+  const prdPrompts = [
+    { id: 'prd-analyze', title: m.prd_askAi_analyze(), prompt: `请帮我分析这份PRD「${prd.name}」的核心需求和功能点`, category: m.prd_askAi_cat_analysis() },
+    { id: 'prd-prototype', title: m.prd_askAi_prototype(), prompt: `请根据PRD「${prd.name}」生成原型设计建议`, category: m.prd_askAi_cat_design() },
+    { id: 'prd-extract', title: m.prd_askAi_extract(), prompt: `请从PRD「${prd.name}」中提取关键需求项和验收标准`, category: m.prd_askAi_cat_extraction() },
+  ]
+
   const IconComponent = ICON_MAP[prd.icon] || FileText;
 
   return (
@@ -181,18 +199,32 @@ export function PRDNavigation({
         </div>
 
         <div className="flex items-center gap-1">
-          {/* {onCollapseHeader && (
+          <Popover>
+            <PopoverTrigger render={<Button variant="ghost" size="sm" className="h-8 gap-1.5" aria-label={m.prd_askAi_button()} />}>
+                <Sparkles className="size-3.5" />
+                <span className="hidden sm:inline">{m.prd_askAi_button()}</span>
+              </PopoverTrigger>
+            <PopoverContent className="w-96 p-3" align="end" side="bottom" sideOffset={4}>
+              <AISuggestedPrompts
+                categories={[m.prd_askAi_cat_all(), m.prd_askAi_cat_analysis(), m.prd_askAi_cat_design(), m.prd_askAi_cat_extraction()]}
+                onSelect={handleAskAiSelect}
+                prompts={prdPrompts}
+                showCategories
+                showSearch={false}
+              />
+            </PopoverContent>
+          </Popover>
+
+          {onVersion && (
             <div className="flex">
               <Button variant="outline" size="sm" className="h-8 rounded-r-none gap-1.5" onClick={onCollapseHeader}>
                 <ArrowUpToLine className="size-3.5" />
                 <span className="hidden sm:inline">收起顶栏</span>
               </Button>
               <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" size="sm" className="h-8 rounded-l-none border-l-0 px-1.5">
+                <DropdownMenuTrigger render={<Button variant="outline" size="sm" className="h-8 rounded-l-none border-l-0 px-1.5" />}>
                     <ChevronDown className="size-3.5" />
-                  </Button>
-                </DropdownMenuTrigger>
+                  </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   {onPageFullscreen && (
                     <DropdownMenuItem onClick={onPageFullscreen}>
@@ -209,9 +241,9 @@ export function PRDNavigation({
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-          )} */}
+          )}
 
-         {onVersion && (
+          {onVersion && (
            <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={onVersion}>
              <History className="size-3.5" />
              <span className="hidden sm:inline">{m.navigation_version()}</span>
@@ -240,11 +272,9 @@ export function PRDNavigation({
         </Dialog>
 
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="h-8 px-2">
+          <DropdownMenuTrigger render={<Button variant="ghost" size="sm" className="h-8 px-2" />}>
               <MoreVertical className="size-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
+            </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             {onExport && (
               <DropdownMenuItem onClick={onExport}>

package/src/plugins/core/prd/components/prd-prototype-panel.tsx

@@ -86,40 +86,28 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
         </div>
         <div className="flex items-center gap-2">
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => setDevice("desktop")}
-                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "desktop" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")}
-              >
+            <TooltipTrigger render={<button onClick={() => setDevice("desktop")}
+                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "desktop" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")} />}>
                 <Monitor className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p>{m.prototypePanel_desktop()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => setDevice("tablet")}
-                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "tablet" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")}
-              >
+            <TooltipTrigger render={<button onClick={() => setDevice("tablet")}
+                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "tablet" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")} />}>
                 <Tablet className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p>{m.prototypePanel_tablet()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => setDevice("mobile")}
-                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "mobile" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")}
-              >
+            <TooltipTrigger render={<button onClick={() => setDevice("mobile")}
+                className={cn("p-1.5 rounded-md hover:bg-muted transition-colors", device === "mobile" ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground")} />}>
                 <Smartphone className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p>{m.prototypePanel_mobile()}</p>
             </TooltipContent>

package/src/plugins/core/prd/components/prd-right-sidebar.tsx

@@ -137,21 +137,17 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
             </div>
             <div className="flex items-center gap-0.5">
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="size-6" onClick={handlePinToggle}>
+                <TooltipTrigger render={<Button variant="ghost" size="icon" className="size-6" onClick={handlePinToggle} />}>
                     {isPinned ? <PinOff className="size-3.5" /> : <Pin className="size-3.5" />}
-                  </Button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>
                   <p>{isPinned ? m.rightSidebar_unpin() : m.rightSidebar_pin()}</p>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="size-6" onClick={handleClose}>
+                <TooltipTrigger render={<Button variant="ghost" size="icon" className="size-6" onClick={handleClose} />}>
                     <X className="size-3.5" />
-                  </Button>
-                </TooltipTrigger>
+                  </TooltipTrigger>
                 <TooltipContent>
                   <p>{m.rightSidebar_collapse()}</p>
                 </TooltipContent>
@@ -182,19 +178,15 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
         <div className="flex flex-col items-center gap-2 py-3 w-full">
           {TABS.map((tab) => (
             <Tooltip key={tab.key}>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => handleTabClick(tab.key)}
+              <TooltipTrigger render={<button onClick={() => handleTabClick(tab.key)}
                   className={cn(
                     "flex items-center justify-center w-6 py-3 rounded transition-colors text-[10px] font-medium leading-tight whitespace-pre-line",
                     activeTab === tab.key && state === "collapsed"
                       ? "text-foreground bg-muted/50"
                       : "text-muted-foreground hover:text-foreground hover:bg-muted/30"
-                  )}
-                >
+                  )} />}>
                   {tab.label().split("").join("\n")}
-                </button>
-              </TooltipTrigger>
+                </TooltipTrigger>
               <TooltipContent>
                 <p>{tab.label()}</p>
               </TooltipContent>

package/src/plugins/core/prd/components/prd-share-panel/components/single-version-share-card.tsx

@@ -33,7 +33,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { toast } from '@/components/ui/sonner';
+import { toast } from '@/components/ui/toast';
 import { EXPIRY_OPTIONS } from "../constants";
 
 interface SingleVersionShare {
@@ -79,26 +79,20 @@ export function SingleVersionShareCard({
         </div>
         <div className="flex items-center gap-2">
           <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-7" onClick={() => onCopy(share.link)}>
+            <TooltipTrigger render={<Button variant="ghost" size="sm" className="h-7" onClick={() => onCopy(share.link)} />}>
                 <Copy className="size-3" />
-              </Button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p className="text-xs">{m.sharePanel_copyShareLink()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
+            <TooltipTrigger render={<Button variant="ghost"
                 size="sm"
                 className="h-7 text-destructive hover:text-destructive hover:bg-destructive/10"
-                onClick={() => onDelete(share.id)}
-              >
+                onClick={() => onDelete(share.id)} />}>
                 <Trash2 className="size-3" />
-              </Button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent>
               <p className="text-xs">{m.sharePanel_deleteShareLink()}</p>
             </TooltipContent>
@@ -133,33 +127,25 @@ export function SingleVersionShareCard({
               disabled={!share.hasPassword}
             />
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
+              <TooltipTrigger render={<Button variant="outline"
                   size="sm"
                   className="h-8 w-8 p-0"
                   onClick={() => { navigator.clipboard.writeText(share.password); toast.success(m.sharePanel_passwordCopied()); }}
-                  disabled={!share.hasPassword}
-                >
+                  disabled={!share.hasPassword} />}>
                   <Copy className="size-3" />
-                </Button>
-              </TooltipTrigger>
+                </TooltipTrigger>
               <TooltipContent>
                 <p className="text-xs">{m.sharePanel_copyPassword()}</p>
               </TooltipContent>
             </Tooltip>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
+              <TooltipTrigger render={<Button variant="outline"
                   size="sm"
                   className="h-8 w-8 p-0"
                   onClick={() => onPasswordReset(share.id)}
-                  disabled={!share.hasPassword}
-                >
+                  disabled={!share.hasPassword} />}>
                   <RefreshCw className="size-3" />
-                </Button>
-              </TooltipTrigger>
+                </TooltipTrigger>
               <TooltipContent>
                 <p className="text-xs">{m.sharePanel_generateRandomPassword()}</p>
               </TooltipContent>
@@ -172,7 +158,7 @@ export function SingleVersionShareCard({
             <span className="text-xs text-muted-foreground">{m.sharePanel_expiry()}:</span>
             <Select
               value={getExpiryDaysValue(share.expiresAt)}
-              onValueChange={(v) => onExpiryUpdate(share.id, v)}
+              onValueChange={(v) => onExpiryUpdate(share.id, v ?? "")}
             >
               <SelectTrigger className="h-8 text-xs">
                 <SelectValue placeholder={m.sharePanel_selectExpiry()} />