Skip to content

Unify history item UI with TaskItem and TaskItemHeader #4151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 2, 2025
Merged

Unify history item UI with TaskItem and TaskItemHeader #4151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c980e25
refactor: Unify history item UI with TaskItem and TaskItemHeader
May 27, 2025
23b2a8f
test: fix TaskItem and HistoryView test failures after refactor
May 27, 2025
c2bbae9
ui: move token and cost info from header to dedicated footer
May 30, 2025
43d847a
test: update history component tests to match implementation
May 30, 2025
0a660d3
Move cache information from header to footer to be consistent with co…
daniel-lxs May 30, 2025
89c4b70
Fix ESLint warnings: remove unused imports and variables
daniel-lxs May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 11 additions & 57 deletions webview-ui/src/components/history/HistoryPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,21 @@
import { memo } from "react"

import { vscode } from "@/utils/vscode"
import { formatLargeNumber, formatDate } from "@/utils/format"

import { CopyButton } from "./CopyButton"
import { useTaskSearch } from "./useTaskSearch"

import { Coins } from "lucide-react"
import TaskItem from "./TaskItem"

const HistoryPreview = () => {
const { tasks, showAllWorkspaces } = useTaskSearch()
const { tasks } = useTaskSearch()

return (
<>
<div className="flex flex-col gap-3">
{tasks.length !== 0 && (
<>
{tasks.slice(0, 3).map((item) => (
<div
key={item.id}
className="bg-vscode-editor-background rounded relative overflow-hidden cursor-pointer border border-vscode-toolbar-hoverBackground/30 hover:border-vscode-toolbar-hoverBackground/60"
onClick={() => vscode.postMessage({ type: "showTaskWithId", text: item.id })}>
<div className="flex flex-col gap-2 p-3 pt-1">
<div className="flex justify-between items-center">
<span className="text-xs font-medium text-vscode-descriptionForeground uppercase">
{formatDate(item.ts)}
</span>
<CopyButton itemTask={item.task} />
</div>
<div
className="text-vscode-foreground overflow-hidden whitespace-pre-wrap"
style={{
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
wordBreak: "break-word",
overflowWrap: "anywhere",
}}>
{item.task}
</div>
<div className="flex flex-row gap-2 text-xs text-vscode-descriptionForeground">
<span>↑ {formatLargeNumber(item.tokensIn || 0)}</span>
<span>↓ {formatLargeNumber(item.tokensOut || 0)}</span>
{!!item.totalCost && (
<span>
<Coins className="inline-block size-[1em]" />{" "}
{"$" + item.totalCost?.toFixed(2)}
</span>
)}
</div>
{showAllWorkspaces && item.workspace && (
<div className="flex flex-row gap-1 text-vscode-descriptionForeground text-xs mt-1">
<span className="codicon codicon-folder scale-80" />
<span>{item.workspace}</span>
</div>
)}
</div>
</div>
))}
</>
)}
</div>
</>
<div className="flex flex-col gap-3">
{tasks.length !== 0 && (
<>
{tasks.slice(0, 3).map((item) => (
<TaskItem key={item.id} item={item} variant="compact" />
))}
</>
)}
</div>
)
}

Expand Down
252 changes: 11 additions & 241 deletions webview-ui/src/components/history/HistoryView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import React, { memo, useState } from "react"
import { DeleteTaskDialog } from "./DeleteTaskDialog"
import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
import prettyBytes from "pretty-bytes"
import { Virtuoso } from "react-virtuoso"

import { VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"

import { vscode } from "@/utils/vscode"
import { formatLargeNumber, formatDate } from "@/utils/format"
import { cn } from "@/lib/utils"
import { Button, Checkbox } from "@/components/ui"
import { useAppTranslation } from "@/i18n/TranslationContext"

import { Tab, TabContent, TabHeader } from "../common/Tab"
import { useTaskSearch } from "./useTaskSearch"
import { ExportButton } from "./ExportButton"
import { CopyButton } from "./CopyButton"
import TaskItem from "./TaskItem"

type HistoryViewProps = {
onDone: () => void
Expand Down Expand Up @@ -210,245 +206,19 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
)),
}}
itemContent={(index, item) => (
<div
data-testid={`task-item-${item.id}`}
<TaskItem
key={item.id}
className={cn("cursor-pointer", {
item={item}
variant="full"
showWorkspace={showAllWorkspaces}
isSelectionMode={isSelectionMode}
isSelected={selectedTaskIds.includes(item.id)}
onToggleSelection={toggleTaskSelection}
onDelete={setDeleteTaskId}
className={cn({
"border-b border-vscode-panel-border": index < tasks.length - 1,
"bg-vscode-list-activeSelectionBackground":
isSelectionMode && selectedTaskIds.includes(item.id),
})}
onClick={() => {
if (isSelectionMode) {
toggleTaskSelection(item.id, !selectedTaskIds.includes(item.id))
} else {
vscode.postMessage({ type: "showTaskWithId", text: item.id })
}
}}>
<div className="flex items-start p-3 gap-2 ml-2">
{/* Show checkbox in selection mode */}
{isSelectionMode && (
<div
className="task-checkbox mt-1"
onClick={(e) => {
e.stopPropagation()
}}>
<Checkbox
checked={selectedTaskIds.includes(item.id)}
onCheckedChange={(checked) =>
toggleTaskSelection(item.id, checked === true)
}
variant="description"
/>
</div>
)}

<div className="flex-1">
<div className="flex justify-between items-center">
<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
{formatDate(item.ts)}
</span>
<div className="flex flex-row">
{!isSelectionMode && (
<Button
variant="ghost"
size="sm"
title={t("history:deleteTaskTitle")}
data-testid="delete-task-button"
onClick={(e) => {
e.stopPropagation()

if (e.shiftKey) {
vscode.postMessage({
type: "deleteTaskWithId",
text: item.id,
})
} else {
setDeleteTaskId(item.id)
}
}}>
<span className="codicon codicon-trash" />
{item.size && prettyBytes(item.size)}
</Button>
)}
</div>
</div>
<div
style={{
fontSize: "var(--vscode-font-size)",
color: "var(--vscode-foreground)",
display: "-webkit-box",
WebkitLineClamp: 3,
WebkitBoxOrient: "vertical",
overflow: "hidden",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
overflowWrap: "anywhere",
}}
data-testid="task-content"
dangerouslySetInnerHTML={{ __html: item.task }}
/>
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
<div
data-testid="tokens-container"
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}>
<div
style={{
display: "flex",
alignItems: "center",
gap: "4px",
flexWrap: "wrap",
}}>
<span
style={{
fontWeight: 500,
color: "var(--vscode-descriptionForeground)",
}}>
{t("history:tokensLabel")}
</span>
<span
data-testid="tokens-in"
style={{
display: "flex",
alignItems: "center",
gap: "3px",
color: "var(--vscode-descriptionForeground)",
}}>
<i
className="codicon codicon-arrow-up"
style={{
fontSize: "12px",
fontWeight: "bold",
marginBottom: "-2px",
}}
/>
{formatLargeNumber(item.tokensIn || 0)}
</span>
<span
data-testid="tokens-out"
style={{
display: "flex",
alignItems: "center",
gap: "3px",
color: "var(--vscode-descriptionForeground)",
}}>
<i
className="codicon codicon-arrow-down"
style={{
fontSize: "12px",
fontWeight: "bold",
marginBottom: "-2px",
}}
/>
{formatLargeNumber(item.tokensOut || 0)}
</span>
</div>
{!item.totalCost && !isSelectionMode && (
<div className="flex flex-row gap-1">
<CopyButton itemTask={item.task} />
<ExportButton itemId={item.id} />
</div>
)}
</div>

{!!item.cacheWrites && (
<div
data-testid="cache-container"
style={{
display: "flex",
alignItems: "center",
gap: "4px",
flexWrap: "wrap",
}}>
<span
style={{
fontWeight: 500,
color: "var(--vscode-descriptionForeground)",
}}>
{t("history:cacheLabel")}
</span>
<span
data-testid="cache-writes"
style={{
display: "flex",
alignItems: "center",
gap: "3px",
color: "var(--vscode-descriptionForeground)",
}}>
<i
className="codicon codicon-database"
style={{
fontSize: "12px",
fontWeight: "bold",
marginBottom: "-1px",
}}
/>
+{formatLargeNumber(item.cacheWrites || 0)}
</span>
<span
data-testid="cache-reads"
style={{
display: "flex",
alignItems: "center",
gap: "3px",
color: "var(--vscode-descriptionForeground)",
}}>
<i
className="codicon codicon-arrow-right"
style={{
fontSize: "12px",
fontWeight: "bold",
marginBottom: 0,
}}
/>
{formatLargeNumber(item.cacheReads || 0)}
</span>
</div>
)}

{!!item.totalCost && (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginTop: -2,
}}>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<span
style={{
fontWeight: 500,
color: "var(--vscode-descriptionForeground)",
}}>
{t("history:apiCostLabel")}
</span>
<span style={{ color: "var(--vscode-descriptionForeground)" }}>
${item.totalCost?.toFixed(4)}
</span>
</div>
{!isSelectionMode && (
<div className="flex flex-row gap-1">
<CopyButton itemTask={item.task} />
<ExportButton itemId={item.id} />
</div>
)}
</div>
)}

{showAllWorkspaces && item.workspace && (
<div className="flex flex-row gap-1 text-vscode-descriptionForeground text-xs">
<span className="codicon codicon-folder scale-80" />
<span>{item.workspace}</span>
</div>
)}
</div>
</div>
</div>
</div>
/>
)}
/>
</TabContent>
Expand Down
Loading