feat(chat): 全局 Readable Slash Command 设置

MarkShawn2020 · claude · MarkShawn2020 · commit 0206e3c3ab41 · 2026-01-09T10:48:28.000+07:00
- 将 "Original View" 重命名为 "Readable Slash Command"
- 新增 useReadableText hook 统一处理 slash command 转换
- 应用到所有显示 session summary 的位置：
  - ProjectList, SessionList, MessageView
  - VerticalFeatureTabs, RecentActivity, ProjectDashboard
- tooltip prompts 先转换再截断，避免正则匹配失败

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/src/components/GlobalHeader/VerticalFeatureTabs.tsx b/src/components/GlobalHeader/VerticalFeatureTabs.tsx
@@ -4,7 +4,6 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   ChevronLeftIcon,
-  ChatBubbleIcon,
   DotsVerticalIcon,
 } from "@radix-ui/react-icons";
 import {
@@ -15,7 +14,12 @@ import {
 } from "@/store";
 import { useNavigate, useInvokeQuery } from "@/hooks";
 import { invoke } from "@tauri-apps/api/core";
-import type { Session } from "@/types";
+import type { Session, Message } from "@/types";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,6 +29,7 @@ import { ProjectLogo } from "@/views/Workspace/ProjectLogo";
 import { SessionDropdownMenuItems } from "@/components/shared/SessionMenuItems";
 import { NewTerminalSplitButton } from "@/components/ui/new-terminal-button";
 import type { WorkspaceData, WorkspaceProject } from "@/views/Workspace/types";
+import { useReadableText, restoreSlashCommand } from "@/views/Chat/utils";
 
 const MIN_WIDTH = 180;
 const MAX_WIDTH = 400;
@@ -133,6 +138,7 @@ function ProjectSessionsGroup({
 }: ProjectSessionsGroupProps) {
   const [workspace, setWorkspace] = useAtom(workspaceDataAtom);
   const navigate = useNavigate();
+  const toReadable = useReadableText();
 
   // Fetch all CC sessions, then filter by project path
   const { data: allSessions = [], isLoading } = useInvokeQuery<Session[]>(
@@ -181,7 +187,7 @@ function ProjectSessionsGroup({
       const currentProject = currentWorkspace.projects.find((p) => p.id === project.id);
       if (!currentProject) return currentWorkspace;
 
-      const title = session.summary || "Untitled";
+      const title = toReadable(session.summary) || "Untitled";
       const command = `claude --resume "${session.id}"`;
       const panels = currentProject.panels || [];
       const panelId = panels[0]?.id;
@@ -391,6 +397,10 @@ interface SessionItemProps {
 }
 
 function SessionItem({ session, onResume }: SessionItemProps) {
+  const [userPrompts, setUserPrompts] = useState<string[] | null>(null);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const toReadable = useReadableText();
+
   const formatDate = (ts: number) => {
     const d = new Date(ts * 1000);
     const now = new Date();
@@ -408,21 +418,69 @@ function SessionItem({ session, onResume }: SessionItemProps) {
     }
   };
 
+  // Lazy-load user prompts when tooltip opens
+  const handleTooltipOpen = async (open: boolean) => {
+    setIsTooltipOpen(open);
+    if (open && userPrompts === null) {
+      try {
+        const messages = await invoke<Message[]>("get_session_messages", {
+          projectId: session.project_id,
+          sessionId: session.id,
+        });
+        const prompts = messages
+          .filter((m) => m.role === "user")
+          .map((m) => {
+            // Convert first, then truncate (order matters for regex matching)
+            const text = restoreSlashCommand(m.content.trim());
+            return text.length > 100 ? text.slice(0, 100) + "..." : text;
+          });
+        setUserPrompts(prompts);
+      } catch {
+        setUserPrompts([]);
+      }
+    }
+  };
+
   return (
     <div className="flex items-center gap-0.5 group">
-      <button
-        onClick={onResume}
-        className="flex-1 flex items-center gap-1.5 px-2 py-1 rounded text-left transition-colors text-muted-foreground hover:text-ink hover:bg-card-alt min-w-0"
-        title={`Resume: ${session.summary || "Untitled"}`}
-      >
-        <ChatBubbleIcon className="w-2.5 h-2.5 flex-shrink-0" />
-        <span className="text-xs truncate flex-1">
-          {session.summary || "Untitled"}
-        </span>
-        <span className="text-[10px] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
-          {formatDate(session.last_modified)}
-        </span>
-      </button>
+      <Tooltip open={isTooltipOpen} onOpenChange={handleTooltipOpen}>
+        <TooltipTrigger asChild>
+          <button
+            onClick={onResume}
+            className="flex-1 flex items-center gap-1.5 px-2 py-1 rounded text-left transition-colors text-muted-foreground hover:text-ink hover:bg-card-alt min-w-0"
+          >
+            <span className="text-xs truncate flex-1">
+              {toReadable(session.summary) || "Untitled"}
+            </span>
+            <span className="text-[10px] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+              {formatDate(session.last_modified)}
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right" className="max-w-[300px] p-2 bg-card text-ink border border-border">
+          <div className="space-y-1.5">
+            <div className="text-[10px] text-muted-foreground font-medium uppercase tracking-wide">
+              User Prompts ({userPrompts?.length ?? "..."})
+            </div>
+            {userPrompts === null ? (
+              <div className="text-xs text-muted-foreground">Loading...</div>
+            ) : userPrompts.length === 0 ? (
+              <div className="text-xs text-muted-foreground">No prompts</div>
+            ) : (
+              <div className="space-y-1 max-h-[200px] overflow-y-auto">
+                {userPrompts.map((prompt, i) => (
+                  <div
+                    key={i}
+                    className="text-xs text-ink/80 bg-muted/50 rounded px-1.5 py-1 truncate"
+                  >
+                    {prompt}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button
diff --git a/src/components/home/RecentActivity.tsx b/src/components/home/RecentActivity.tsx
@@ -1,5 +1,6 @@
 import { FolderOpen, MessageSquare } from "lucide-react";
 import type { Project, Session } from "../../types";
+import { useReadableText } from "../../views/Chat/utils";
 
 type ActivityItem =
   | { type: "project"; data: Project }
@@ -20,6 +21,8 @@ export function RecentActivity({
   onSessionClick,
   maxItems = 5,
 }: RecentActivityProps) {
+  const toReadable = useReadableText();
+
   // Merge and sort by last_modified
   const activities: ActivityItem[] = [
     ...projects.map((p) => ({ type: "project" as const, data: p })),
@@ -94,7 +97,7 @@ export function RecentActivity({
               <MessageSquare className="w-4 h-4 text-muted-foreground/70 shrink-0" />
               <div className="flex-1 min-w-0">
                 <p className="text-sm text-foreground truncate group-hover:text-primary transition-colors">
-                  {session.summary || "Untitled session"}
+                  {toReadable(session.summary) || "Untitled session"}
                 </p>
                 <p className="text-xs text-muted-foreground">
                   {session.message_count} messages
diff --git a/src/components/shared/SessionMenuItems.tsx b/src/components/shared/SessionMenuItems.tsx
@@ -84,7 +84,7 @@ export function SessionDropdownMenuItems({
           <DropdownMenuSeparator />
           {setOriginalChat && (
             <DropdownMenuCheckboxItem checked={originalChat} onCheckedChange={setOriginalChat}>
-              Original View
+              Readable Slash Command
             </DropdownMenuCheckboxItem>
           )}
           {setMarkdownPreview && (
@@ -153,7 +153,7 @@ export function SessionContextMenuItems({
           <ContextMenuSeparator />
           {setOriginalChat && (
             <ContextMenuCheckboxItem checked={originalChat} onCheckedChange={setOriginalChat}>
-              Original View
+              Readable Slash Command
             </ContextMenuCheckboxItem>
           )}
           {setMarkdownPreview && (
diff --git a/src/views/Chat/MessageView.tsx b/src/views/Chat/MessageView.tsx
@@ -21,7 +21,7 @@ import { useAtom } from "jotai";
 import { originalChatAtom, markdownPreviewAtom } from "../../store";
 import { CollapsibleContent } from "./CollapsibleContent";
 import { ExportDialog } from "./ExportDialog";
-import { restoreSlashCommand } from "./utils";
+import { useReadableText } from "./utils";
 import { useAppConfig } from "../../context";
 import type { Message } from "../../types";
 
@@ -38,9 +38,10 @@ export function MessageView({ projectId, projectPath, sessionId, summary: initia
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
   const [freshSummary, setFreshSummary] = useState<string | null>(initialSummary);
-  const displaySummary = freshSummary ? restoreSlashCommand(freshSummary) : "Session";
   const [originalChat, setOriginalChat] = useAtom(originalChatAtom);
   const [markdownPreview, setMarkdownPreview] = useAtom(markdownPreviewAtom);
+  const toReadable = useReadableText();
+  const displaySummary = toReadable(freshSummary) || "Session";
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [exportDialogOpen, setExportDialogOpen] = useState(false);
   const [sessionFilePath, setSessionFilePath] = useState("");
@@ -58,9 +59,7 @@ export function MessageView({ projectId, projectPath, sessionId, summary: initia
       .catch(() => {});
   }, [projectId, sessionId]);
 
-  const processContent = (content: string) => {
-    return originalChat ? restoreSlashCommand(content) : content;
-  };
+  const processContent = (content: string) => toReadable(content);
 
   const handleCopyContent = (content: string) => {
     invoke("copy_to_clipboard", { text: content });
diff --git a/src/views/Chat/ProjectList.tsx b/src/views/Chat/ProjectList.tsx
@@ -6,7 +6,7 @@ import { useAtom } from "jotai";
 import { chatViewModeAtom, allProjectsSortByAtom, hideEmptySessionsAllAtom } from "../../store";
 import { useAppConfig } from "../../context";
 import { VirtualChatList } from "./VirtualChatList";
-import { formatRelativeTime } from "./utils";
+import { formatRelativeTime, useReadableText } from "./utils";
 import { useInvokeQuery } from "../../hooks";
 import type { Project, Session, ChatMessage, SearchResult, ChatsResponse } from "../../types";
 
@@ -19,6 +19,7 @@ interface ProjectListProps {
 export function ProjectList({ onSelectProject, onSelectSession, onSelectChat }: ProjectListProps) {
   const { formatPath } = useAppConfig();
   const [viewMode, setViewMode] = useAtom(chatViewModeAtom);
+  const toReadable = useReadableText();
 
   // Use react-query for cached data fetching
   const { data: projects, isLoading: loadingProjects } = useInvokeQuery<Project[]>(["projects"], "list_projects");
@@ -270,7 +271,7 @@ export function ProjectList({ onSelectProject, onSelectSession, onSelectChat }:
               onClick={() => onSelectSession(session)}
               className="w-full text-left bg-card rounded-xl p-4 border border-border hover:border-primary transition-colors"
             >
-              <p className="font-medium text-ink line-clamp-2">{session.summary || "Untitled session"}</p>
+              <p className="font-medium text-ink line-clamp-2">{toReadable(session.summary) || "Untitled session"}</p>
               <p className="text-sm text-muted-foreground mt-1 truncate">
                 {session.project_path ? formatPath(session.project_path) : session.project_id}
               </p>
diff --git a/src/views/Chat/SessionList.tsx b/src/views/Chat/SessionList.tsx
@@ -7,9 +7,9 @@ import { ContextFileItem } from "../../components/ContextFileItem";
 import { useAtom } from "jotai";
 import { sessionContextTabAtom, sessionSelectModeAtom, hideEmptySessionsAtom, userPromptsOnlyAtom } from "../../store";
 import { useAppConfig } from "../../context";
-import { formatDate } from "./utils";
+import { formatDate, useReadableText } from "./utils";
 import { useInvokeQuery } from "../../hooks";
-import type { Session, ContextFile, Message, SearchResult } from "../../types";
+import type { Session, ContextFile, Message, SearchResult, SessionUsageEntry, SessionUsage } from "../../types";
 
 interface SessionListProps {
   projectId: string;
@@ -18,8 +18,22 @@ interface SessionListProps {
   onSelect: (s: Session) => void;
 }
 
+// Format token count (e.g., 1234567 -> "1.23M")
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toString();
+}
+
+// Format cost (e.g., 0.1234 -> "$0.12")
+function formatCost(cost: number): string {
+  if (cost < 0.01) return `$${cost.toFixed(4)}`;
+  return `$${cost.toFixed(2)}`;
+}
+
 export function SessionList({ projectId, projectPath, onBack, onSelect }: SessionListProps) {
   const { formatPath } = useAppConfig();
+  const toReadable = useReadableText();
 
   // Use react-query for cached data
   const { data: sessions = [], isLoading: loadingSessions } = useInvokeQuery<Session[]>(
@@ -37,6 +51,33 @@ export function SessionList({ projectId, projectPath, onBack, onSelect }: Sessio
     { projectPath },
   );
 
+  // Load usage data separately (lazy loading for performance)
+  const { data: usageData = [] } = useInvokeQuery<SessionUsageEntry[]>(
+    ["sessionsUsage", projectId],
+    "get_sessions_usage",
+    { projectId }
+  );
+
+  // Create usage map for quick lookup
+  const usageMap = useMemo(() => {
+    const map = new Map<string, SessionUsage>();
+    usageData.forEach((entry) => map.set(entry.session_id, entry.usage));
+    return map;
+  }, [usageData]);
+
+  // Calculate total usage for all sessions
+  const totalUsage = useMemo(() => {
+    let total = { input_tokens: 0, output_tokens: 0, cache_creation_tokens: 0, cache_read_tokens: 0, cost_usd: 0 };
+    usageData.forEach((entry) => {
+      total.input_tokens += entry.usage.input_tokens;
+      total.output_tokens += entry.usage.output_tokens;
+      total.cache_creation_tokens += entry.usage.cache_creation_tokens;
+      total.cache_read_tokens += entry.usage.cache_read_tokens;
+      total.cost_usd += entry.usage.cost_usd;
+    });
+    return total;
+  }, [usageData]);
+
   const globalContext = useMemo(() => allContextFiles.filter((f) => f.scope === "global"), [allContextFiles]);
   const loading = loadingSessions || loadingContext;
 
@@ -108,7 +149,7 @@ generator: "Lovcode"
           .replace(/\s+/g, "-");
       const toc = selected
         .map((s, i) => {
-          const title = `Session ${i + 1}: ${s.summary || "Untitled"}`;
+          const title = `Session ${i + 1}: ${toReadable(s.summary) || "Untitled"}`;
           return `- [${title}](#${toAnchor(title)})`;
         })
         .join("\n");
@@ -126,7 +167,7 @@ generator: "Lovcode"
           .join("\n\n---\n\n");
         const msgCountLabel = userPromptsOnly ? `${messages.length} prompts` : `${session.message_count} messages`;
         const meta = `_${msgCountLabel} · ${formatDate(session.last_modified)}_`;
-        parts.push(`## Session ${i + 1}: ${session.summary || "Untitled"}\n\n${meta}\n\n${sessionMd}`);
+        parts.push(`## Session ${i + 1}: ${toReadable(session.summary) || "Untitled"}\n\n${meta}\n\n${sessionMd}`);
       }
       const body = parts.join("\n\n<br>\n\n---\n\n<br>\n\n");
       const header = `# ${projectName}
@@ -162,9 +203,21 @@ generator: "Lovcode"
         <button onClick={onBack} className="text-muted-foreground hover:text-ink mb-2 flex items-center gap-1 text-sm">
           <span>←</span> Projects
         </button>
-        <h1 className="font-serif text-2xl font-semibold text-ink truncate">
-          {projectPath ? formatPath(projectPath) : projectId}
-        </h1>
+        <div className="flex items-center justify-between gap-4">
+          <h1 className="font-serif text-2xl font-semibold text-ink truncate">
+            {projectPath ? formatPath(projectPath) : projectId}
+          </h1>
+          {totalUsage.cost_usd > 0 && (
+            <div className="flex items-center gap-3 text-sm text-muted-foreground shrink-0">
+              <span title="Total tokens (input + output)">
+                {formatTokens(totalUsage.input_tokens + totalUsage.output_tokens)} tokens
+              </span>
+              <span className="font-medium text-primary" title="Estimated cost">
+                {formatCost(totalUsage.cost_usd)}
+              </span>
+            </div>
+          )}
+        </div>
       </header>
 
       <div className="relative mb-6">
@@ -305,6 +358,7 @@ generator: "Lovcode"
           <div className="space-y-3">
             {filteredSessions.map((session) => {
               const isSelected = selectedIds.has(session.id);
+              const usage = usageMap.get(session.id);
               return (
                 <div
                   key={session.id}
@@ -315,10 +369,21 @@ generator: "Lovcode"
                 >
                   <div className="flex items-start justify-between gap-2">
                     <div className="flex-1 min-w-0">
-                      <p className="font-medium text-ink line-clamp-2">{session.summary || "Untitled session"}</p>
-                      <p className="text-sm text-muted-foreground mt-2">
-                        {session.message_count} messages · {formatDate(session.last_modified)}
-                      </p>
+                      <p className="font-medium text-ink line-clamp-2">{toReadable(session.summary) || "Untitled session"}</p>
+                      <div className="flex items-center gap-3 mt-2 text-sm text-muted-foreground">
+                        <span>{session.message_count} messages</span>
+                        <span>·</span>
+                        <span>{formatDate(session.last_modified)}</span>
+                        {usage && usage.cost_usd > 0 && (
+                          <>
+                            <span>·</span>
+                            <span title={`Input: ${formatTokens(usage.input_tokens)}, Output: ${formatTokens(usage.output_tokens)}`}>
+                              {formatTokens(usage.input_tokens + usage.output_tokens)} tokens
+                            </span>
+                            <span className="text-primary font-medium">{formatCost(usage.cost_usd)}</span>
+                          </>
+                        )}
+                      </div>
                     </div>
                     {selectMode && (
                       <input
diff --git a/src/views/Chat/index.ts b/src/views/Chat/index.ts
@@ -5,5 +5,5 @@ export { ExportDialog } from "./ExportDialog";
 export { MessageView } from "./MessageView";
 export { CollapsibleContent } from "./CollapsibleContent";
 export { CopyButton } from "./CopyButton";
-export { restoreSlashCommand, formatRelativeTime, formatDate } from "./utils";
+export { restoreSlashCommand, formatRelativeTime, formatDate, useReadableText } from "./utils";
 export type { SortKey, ChatViewMode, ExportFormat, MarkdownStyle } from "./types";
diff --git a/src/views/Chat/utils.ts b/src/views/Chat/utils.ts
diff --git a/src/views/Workspace/ProjectDashboard.tsx b/src/views/Workspace/ProjectDashboard.tsx
