@tablestore/tablestore-agent-cli 0.2.8 → 0.2.9

package/dist/dashboard-runtime/dashboard/src/components/retrieval/retrieval-result-card.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import { useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import type { RetrievalResult } from "@/types/retrieval";
 import { IMAGE_FALLBACK_DATA_PREFIX } from "@/lib/constants";
+import { useI18n } from "@/i18n/i18n-context";
 import { extractFileName } from "@/lib/utils";
 
 interface RetrievalResultCardProps {
@@ -11,9 +14,15 @@ interface RetrievalResultCardProps {
   rank: number;
 }
 
-export function RetrievalResultCard({ result, rank }: RetrievalResultCardProps) {
+export function RetrievalResultCard({
+  result,
+  rank,
+}: RetrievalResultCardProps) {
+  const { t } = useI18n();
   const [zoomedImage, setZoomedImage] = useState<string | null>(null);
-  const fileName = result.ossKey ? extractFileName(result.ossKey) : "未知文件";
+  const fileName = result.ossKey
+    ? extractFileName(result.ossKey)
+    : t("retrieval.common.unknownFile");
 
   const isImageChunk = result.chunkType?.toLowerCase() === "image";
   const chunkBadgeVariant = isImageChunk ? "default" : "secondary";
@@ -61,7 +70,7 @@ export function RetrievalResultCard({ result, rank }: RetrievalResultCardProps)
         {isImageChunk && result.imageBase64 && imageSrc && (
           <img
             src={imageSrc}
-            alt="检索结果图片"
+            alt={t("retrieval.results.resultImageAlt")}
             className="max-w-[200px] rounded-md cursor-pointer hover:opacity-80 transition-opacity"
             onClick={() => setZoomedImage(imageSrc)}
           />
@@ -95,11 +104,13 @@ export function RetrievalResultCard({ result, rank }: RetrievalResultCardProps)
       {/* 图片放大预览 */}
       <Dialog open={!!zoomedImage} onOpenChange={() => setZoomedImage(null)}>
         <DialogContent className="max-w-[90vw] max-h-[90vh] p-2 flex items-center justify-center border-none bg-black/90 data-[state=open]:animate-none data-[state=closed]:animate-none duration-0">
-          <DialogTitle className="sr-only">图片放大预览</DialogTitle>
+          <DialogTitle className="sr-only">
+            {t("retrieval.common.imageZoomTitle")}
+          </DialogTitle>
           {zoomedImage && (
             <img
               src={zoomedImage}
-              alt="放大预览"
+              alt={t("retrieval.common.imageZoomAlt")}
               className="max-w-full max-h-[85vh] object-contain"
             />
           )}

package/dist/dashboard-runtime/dashboard/src/components/retrieval/retrieval-results.tsx

@@ -1,8 +1,9 @@
-'use client';
+"use client";
 
 import { FileSearch } from "lucide-react";
 import { EmptyState } from "@/components/shared/empty-state";
 import { RetrievalResultCard } from "./retrieval-result-card";
+import { useI18n } from "@/i18n/i18n-context";
 import type { RetrievalResult } from "@/types/retrieval";
 
 interface RetrievalResultsProps {
@@ -10,7 +11,11 @@ interface RetrievalResultsProps {
   elapsedMs?: number;
 }
 
-export function RetrievalResults({ results, elapsedMs }: RetrievalResultsProps) {
+export function RetrievalResults({
+  results,
+  elapsedMs,
+}: RetrievalResultsProps) {
+  const { t } = useI18n();
   if (results === null) {
     return null;
   }
@@ -19,8 +24,8 @@ export function RetrievalResults({ results, elapsedMs }: RetrievalResultsProps)
     return (
       <EmptyState
         icon={FileSearch}
-        title="没有检索到结果"
-        description="尝试调整查询内容或检索参数"
+        title={t("retrieval.results.noResultsTitle")}
+        description={t("retrieval.results.noResultsDesc")}
       />
     );
   }
@@ -28,11 +33,9 @@ export function RetrievalResults({ results, elapsedMs }: RetrievalResultsProps)
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <span>
-          共 <strong className="text-foreground">{results.length}</strong> 条结果
-        </span>
+        <span>{t("retrieval.results.count", { count: results.length })}</span>
         {elapsedMs !== undefined && (
-          <span>· 耗时 {elapsedMs}ms</span>
+          <span>· {t("retrieval.results.elapsed", { ms: elapsedMs })}</span>
         )}
       </div>
 

package/dist/dashboard-runtime/dashboard/src/components/shared/confirm-dialog.tsx

@@ -1,4 +1,3 @@
-
 "use client";
 
 import { useState, useCallback, type ReactNode } from "react";
@@ -12,6 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface ConfirmDialogProps {
   open: boolean;
@@ -34,13 +34,14 @@ export function ConfirmDialog({
   onOpenChange,
   title,
   description,
-  confirmText = "确认",
-  cancelText = "取消",
+  confirmText,
+  cancelText,
   variant = "default",
   onConfirm,
   confirmInput,
   children,
 }: ConfirmDialogProps) {
+  const { t } = useI18n();
   const [inputValue, setInputValue] = useState("");
 
   const requiresInput = confirmInput !== undefined && confirmInput !== "";
@@ -59,7 +60,7 @@ export function ConfirmDialog({
       }
       onOpenChange(nextOpen);
     },
-    [onOpenChange]
+    [onOpenChange],
   );
 
   const isDanger = variant === "danger";
@@ -69,13 +70,15 @@ export function ConfirmDialog({
       <DialogContent className="sm:max-w-120">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          <DialogDescription className="break-all">{description}</DialogDescription>
+          <DialogDescription className="break-all">
+            {description}
+          </DialogDescription>
         </DialogHeader>
 
         {requiresInput && (
           <div className="py-2">
             <p className="mb-2 text-sm text-muted-foreground">
-              请输入 <strong>{confirmInput}</strong> 以确认操作
+              {t("common.confirmInputPrompt", { value: confirmInput ?? "" })}
             </p>
             <Input
               value={inputValue}
@@ -90,14 +93,14 @@ export function ConfirmDialog({
 
         <DialogFooter>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
-            {cancelText}
+            {cancelText ?? t("common.cancel")}
           </Button>
           <Button
             variant={isDanger ? "destructive" : "default"}
             onClick={handleConfirm}
             disabled={isConfirmDisabled}
           >
-            {confirmText}
+            {confirmText ?? t("common.confirm")}
           </Button>
         </DialogFooter>
       </DialogContent>

package/dist/dashboard-runtime/dashboard/src/components/shared/data-table/data-table-pagination.tsx

@@ -1,7 +1,14 @@
+"use client";
 
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { Table } from "@tanstack/react-table";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -10,6 +17,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({
   table,
 }: DataTablePaginationProps<TData>) {
+  const { t } = useI18n();
   const selectedCount = table.getFilteredSelectedRowModel().rows.length;
   const totalCount = table.getFilteredRowModel().rows.length;
   const pageIndex = table.getState().pagination.pageIndex;
@@ -21,10 +29,16 @@ export function DataTablePagination<TData>({
     <div className="flex items-center justify-between px-4 py-3">
       <div className="text-sm text-muted-foreground">
         {selectedCount > 0 && (
-          <span>已选 {selectedCount} 项 · </span>
+          <span>
+            {t("common.paginationSelected", { count: selectedCount })}
+          </span>
         )}
         <span>
-          第 {startItem}-{endItem} 项，共 {totalCount} 项
+          {t("common.paginationRange", {
+            start: startItem,
+            end: endItem,
+            total: totalCount,
+          })}
         </span>
       </div>
 
@@ -35,7 +49,7 @@ export function DataTablePagination<TData>({
           className="h-8 w-8"
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
-          aria-label="第一页"
+          aria-label={t("common.firstPage")}
         >
           <ChevronsLeft size={16} />
         </Button>
@@ -45,7 +59,7 @@ export function DataTablePagination<TData>({
           className="h-8 w-8"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          aria-label="上一页"
+          aria-label={t("common.prevPage")}
         >
           <ChevronLeft size={16} />
         </Button>
@@ -55,7 +69,7 @@ export function DataTablePagination<TData>({
           className="h-8 w-8"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          aria-label="下一页"
+          aria-label={t("common.nextPage")}
         >
           <ChevronRight size={16} />
         </Button>
@@ -65,7 +79,7 @@ export function DataTablePagination<TData>({
           className="h-8 w-8"
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
-          aria-label="最后一页"
+          aria-label={t("common.lastPage")}
         >
           <ChevronsRight size={16} />
         </Button>

package/dist/dashboard-runtime/dashboard/src/components/shared/data-table/data-table-toolbar.tsx

@@ -1,4 +1,3 @@
-
 import type { ReactNode } from "react";
 import type { Table } from "@tanstack/react-table";
 import { SearchInput } from "@/components/shared/search-input";
@@ -13,7 +12,7 @@ interface DataTableToolbarProps<TData> {
 export function DataTableToolbar<TData>({
   table,
   searchKey,
-  searchPlaceholder = "搜索…",
+  searchPlaceholder,
   children,
 }: DataTableToolbarProps<TData>) {
   const searchColumn = searchKey ? table.getColumn(searchKey) : undefined;

package/dist/dashboard-runtime/dashboard/src/components/shared/data-table/data-table.tsx

@@ -1,4 +1,3 @@
-
 "use client";
 
 import {
@@ -18,13 +17,17 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   onRowClick?: (row: TData) => void;
   rowSelection?: RowSelectionState;
-  onRowSelectionChange?: (updater: RowSelectionState | ((prev: RowSelectionState) => RowSelectionState)) => void;
+  onRowSelectionChange?: (
+    updater:
+      RowSelectionState | ((prev: RowSelectionState) => RowSelectionState),
+  ) => void;
   getRowId?: (row: TData) => string;
 }
 
@@ -36,9 +39,12 @@ export function DataTable<TData, TValue>({
   onRowSelectionChange: externalOnRowSelectionChange,
   getRowId,
 }: DataTableProps<TData, TValue>) {
-  const [internalRowSelection, setInternalRowSelection] = useState<RowSelectionState>({});
+  const { t } = useI18n();
+  const [internalRowSelection, setInternalRowSelection] =
+    useState<RowSelectionState>({});
   const rowSelection = externalRowSelection ?? internalRowSelection;
-  const setRowSelection = externalOnRowSelectionChange ?? setInternalRowSelection;
+  const setRowSelection =
+    externalOnRowSelectionChange ?? setInternalRowSelection;
 
   const table = useReactTable({
     data,
@@ -57,10 +63,16 @@ export function DataTable<TData, TValue>({
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="bg-accent">
               {headerGroup.headers.map((header) => (
-                <TableHead key={header.id} className="text-sm font-medium text-muted-foreground">
+                <TableHead
+                  key={header.id}
+                  className="text-sm font-medium text-muted-foreground"
+                >
                   {header.isPlaceholder
                     ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -75,7 +87,7 @@ export function DataTable<TData, TValue>({
                 onClick={() => onRowClick?.(row.original)}
                 className={cn(
                   "h-12 transition-colors hover:bg-accent data-[state=selected]:bg-primary/5",
-                  onRowClick && "cursor-pointer"
+                  onRowClick && "cursor-pointer",
                 )}
               >
                 {row.getVisibleCells().map((cell) => (
@@ -87,8 +99,11 @@ export function DataTable<TData, TValue>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
-                暂无数据
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center text-muted-foreground"
+              >
+                {t("common.noData")}
               </TableCell>
             </TableRow>
           )}

package/dist/dashboard-runtime/dashboard/src/components/shared/empty-state.tsx

@@ -1,4 +1,3 @@
-
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
 
@@ -25,9 +24,7 @@ export function EmptyState({
           <Icon className="text-primary" size={36} strokeWidth={1.75} />
         </div>
       )}
-      <h3 className="mb-2 text-base font-semibold text-foreground">
-        {title}
-      </h3>
+      <h3 className="mb-2 text-base font-semibold text-foreground">{title}</h3>
       <p className="mb-6 max-w-sm text-sm text-muted-foreground">
         {description}
       </p>

package/dist/dashboard-runtime/dashboard/src/components/shared/error-state.tsx

@@ -38,9 +38,7 @@ export function ErrorState({ error, onRetry }: ErrorStateProps) {
         {error.message}
       </p>
       {hint && (
-        <p className="mb-6 max-w-md text-xs text-muted-foreground/80">
-          {hint}
-        </p>
+        <p className="mb-6 max-w-md text-xs text-muted-foreground/80">{hint}</p>
       )}
       {!hint && <div className="mb-6" />}
       {onRetry && (

package/dist/dashboard-runtime/dashboard/src/components/shared/json-viewer.tsx

@@ -1,4 +1,3 @@
-
 interface JsonViewerProps {
   data: unknown;
   collapsed?: boolean;
@@ -37,7 +36,7 @@ function syntaxHighlight(jsonString: string): string {
         cls = "text-muted-foreground"; // null
       }
       return `<span class="${cls}">${match}</span>`;
-    }
+    },
   );
 }
 

package/dist/dashboard-runtime/dashboard/src/components/shared/llm-model-selector.tsx

@@ -27,6 +27,7 @@ import {
 } from "@/components/ui/select";
 import { useLLMProviders } from "@/hooks/use-llm-providers";
 import { useLLMProviderModels } from "@/hooks/use-llm-provider-models";
+import { useI18n } from "@/i18n/i18n-context";
 import { cn } from "@/lib/utils";
 
 interface LLMModelSelectorProps {
@@ -63,6 +64,7 @@ export function LLMModelSelector({
   providerLabel = "Provider",
   modelLabel = "Model",
 }: LLMModelSelectorProps) {
+  const { t } = useI18n();
   const { data: providers = [], isLoading: providersLoading } =
     useLLMProviders();
   const {
@@ -110,10 +112,10 @@ export function LLMModelSelector({
             <SelectValue
               placeholder={
                 providersLoading
-                  ? "加载中..."
+                  ? t("common.modelSelector.loading")
                   : providers.length === 0
-                    ? "请先在「模型提供商」中创建配置"
-                    : "选择 Provider"
+                    ? t("common.modelSelector.noProviders")
+                    : t("common.modelSelector.selectProvider")
               }
             />
           </SelectTrigger>
@@ -143,7 +145,7 @@ export function LLMModelSelector({
             ) : (
               <RefreshCw className="mr-1 h-3 w-3" />
             )}
-            刷新列表
+            {t("common.modelSelector.refreshList")}
           </Button>
         </div>
         <LLMModelCombobox
@@ -180,6 +182,7 @@ function LLMModelCombobox({
   disabled,
   fetching,
 }: LLMModelComboboxProps) {
+  const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
 
@@ -219,7 +222,7 @@ function LLMModelCombobox({
               !value && "text-[hsl(var(--subtle))]",
             )}
           >
-            {value || "选择或输入模型名"}
+            {value || t("common.modelSelector.selectOrInputModel")}
           </span>
           <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -232,7 +235,7 @@ function LLMModelCombobox({
       >
         <Command shouldFilter={false}>
           <CommandInput
-            placeholder="搜索或输入模型名"
+            placeholder={t("common.modelSelector.searchOrInputModel")}
             value={query}
             onValueChange={setQuery}
           />
@@ -240,20 +243,22 @@ function LLMModelCombobox({
             {filtered.length === 0 && !showCustom ? (
               <CommandEmpty>
                 {fetching
-                  ? "正在拉取模型列表..."
+                  ? t("common.modelSelector.fetchingModels")
                   : options.length === 0
-                    ? "点击「刷新列表」拉取可用模型"
-                    : "无匹配结果"}
+                    ? t("common.modelSelector.emptyModels")
+                    : t("common.modelSelector.noMatch")}
               </CommandEmpty>
             ) : null}
             {filtered.length > 0 && (
-              <CommandGroup heading={showCustom ? "可选模型" : undefined}>
+              <CommandGroup
+                heading={
+                  showCustom
+                    ? t("common.modelSelector.availableModels")
+                    : undefined
+                }
+              >
                 {filtered.map((id) => (
-                  <CommandItem
-                    key={id}
-                    value={id}
-                    onSelect={() => commit(id)}
-                  >
+                  <CommandItem key={id} value={id} onSelect={() => commit(id)}>
                     <Check
                       className={cn(
                         "h-4 w-4",
@@ -266,14 +271,14 @@ function LLMModelCombobox({
               </CommandGroup>
             )}
             {showCustom && (
-              <CommandGroup heading="使用自定义">
+              <CommandGroup heading={t("common.modelSelector.useCustom")}>
                 <CommandItem
                   value={`__custom__${trimmed}`}
                   onSelect={() => commit(trimmed)}
                 >
                   <Plus className="h-4 w-4 text-[hsl(var(--primary))]" />
                   <span className="truncate">
-                    使用 &quot;{trimmed}&quot;
+                    {t("common.modelSelector.useTyped", { value: trimmed })}
                   </span>
                 </CommandItem>
               </CommandGroup>

package/dist/dashboard-runtime/dashboard/src/components/shared/metadata-field-input.tsx

@@ -9,6 +9,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { MetadataField } from "@/types/knowledge-base";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface MetadataFieldInputProps {
   field: MetadataField;
@@ -26,11 +27,12 @@ export function MetadataFieldInput({
   value,
   onChange,
 }: MetadataFieldInputProps) {
+  const { t } = useI18n();
   if (field.type === "boolean") {
     return (
       <Select value={value} onValueChange={onChange}>
         <SelectTrigger>
-          <SelectValue placeholder="不设置" />
+          <SelectValue placeholder={t("common.metadataUnset")} />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="true">true</SelectItem>
@@ -46,7 +48,13 @@ export function MetadataFieldInput({
   return (
     <Input
       type={isNumber ? "number" : field.type === "date" ? "date" : "text"}
-      placeholder={isList ? "值1, 值2, 值3" : isNumber ? "输入数字" : "输入值"}
+      placeholder={
+        isList
+          ? t("common.metadataListPlaceholder")
+          : isNumber
+            ? t("common.metadataNumberPlaceholder")
+            : t("common.metadataValuePlaceholder")
+      }
       value={value}
       onChange={(e) => onChange(e.target.value)}
     />

package/dist/dashboard-runtime/dashboard/src/components/shared/metadata-form.tsx

@@ -1,4 +1,3 @@
-
 "use client";
 
 import { useCallback } from "react";
@@ -13,6 +12,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { MetadataField, MetadataFieldType } from "@/types/knowledge-base";
+import { useI18n } from "@/i18n/i18n-context";
 
 const FIELD_TYPE_OPTIONS: { value: MetadataFieldType; label: string }[] = [
   { value: "string", label: "String" },
@@ -33,6 +33,7 @@ interface MetadataFormProps {
 }
 
 export function MetadataForm({ value, onChange }: MetadataFormProps) {
+  const { t } = useI18n();
   const addField = useCallback(() => {
     onChange([...value, { name: "", type: "string" }]);
   }, [value, onChange]);
@@ -41,16 +42,16 @@ export function MetadataForm({ value, onChange }: MetadataFormProps) {
     (index: number) => {
       onChange(value.filter((_, i) => i !== index));
     },
-    [value, onChange]
+    [value, onChange],
   );
 
   const updateField = useCallback(
     (index: number, patch: Partial<MetadataField>) => {
       onChange(
-        value.map((field, i) => (i === index ? { ...field, ...patch } : field))
+        value.map((field, i) => (i === index ? { ...field, ...patch } : field)),
       );
     },
-    [value, onChange]
+    [value, onChange],
   );
 
   return (
@@ -62,7 +63,7 @@ export function MetadataForm({ value, onChange }: MetadataFormProps) {
             onChange={(event) =>
               updateField(index, { name: event.target.value })
             }
-            placeholder="字段名"
+            placeholder={t("common.fieldNamePlaceholder")}
             className="h-9 flex-1"
           />
           <Select
@@ -90,7 +91,9 @@ export function MetadataForm({ value, onChange }: MetadataFormProps) {
             size="icon"
             onClick={() => removeField(index)}
             className="h-9 w-9 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-            aria-label={`删除字段 ${field.name || index + 1}`}
+            aria-label={t("common.removeField", {
+              name: field.name || index + 1,
+            })}
           >
             <Trash2 size={16} />
           </Button>
@@ -104,7 +107,7 @@ export function MetadataForm({ value, onChange }: MetadataFormProps) {
         className="gap-1.5 text-primary hover:bg-primary/10"
       >
         <Plus size={16} />
-        添加字段
+        {t("common.addField")}
       </Button>
     </div>
   );

package/dist/dashboard-runtime/dashboard/src/components/shared/refresh-button.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface RefreshButtonProps {
   /** Whether an async fetch is currently in-flight. */
@@ -52,12 +53,14 @@ const SPIN_PERIOD_MS = 800;
 export function RefreshButton({
   loading,
   onClick,
-  title = "刷新",
+  title,
   className,
   size = "icon",
   label,
   variant = "ghost",
 }: RefreshButtonProps) {
+  const { t } = useI18n();
+  const resolvedTitle = title ?? t("common.refresh");
   const iconRef = useRef<HTMLSpanElement | null>(null);
   /** Currently-running cycle; null when idle. */
   const animRef = useRef<Animation | null>(null);
@@ -145,8 +148,8 @@ export function RefreshButton({
       // We don't disable while loading: the icon is its own affordance, and
       // disabling produces a "dead" hit state that feels worse than letting
       // a redundant click no-op silently.
-      title={title}
-      aria-label={label ?? title}
+      title={resolvedTitle}
+      aria-label={label ?? resolvedTitle}
       aria-busy={loading || undefined}
       className={cn(
         "group text-muted-foreground transition-colors duration-150",