@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/forms/app-combobox.tsx

@@ -18,7 +18,14 @@
 import { useState } from "react"
 import { Check } from "lucide-react"
 import type { AnyReactFormApi } from "@tanstack/react-form"
-import { Input } from "@/components/ui/input"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
 import {
   Popover,
   PopoverContent,
@@ -49,11 +56,6 @@ export function AppCombobox({
 }: AppComboboxProps) {
   const displayPlaceholder = placeholder ?? m.common_form_search()
   const [open, setOpen] = useState(false)
-  const [filter, setFilter] = useState("")
-
-  const filtered = options.filter((o) =>
-    o.label.toLowerCase().includes(filter.toLowerCase()),
-  )
 
   return (
     <AppField
@@ -65,36 +67,39 @@ export function AppCombobox({
     >
       {(field) => (
         <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger render={<Input id={field.name}
-              value={field.value ?? ""}
-              placeholder={displayPlaceholder}
-              readOnly
-              onClick={() => setOpen(true)} />}></PopoverTrigger>
-          <PopoverContent className="w-[200px] p-0">
-            <Input
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-              className="border-b"
-              placeholder={displayPlaceholder}
-            />
-            <div className="max-h-[200px] overflow-auto">
-              {filtered.map((opt) => (
-                <div
-                  key={opt.value}
-                  className="flex items-center justify-between p-2 hover:bg-accent cursor-pointer"
-                  onClick={() => {
-                    field.handleChange(opt.value)
-                    setFilter("")
-                    setOpen(false)
-                  }}
-                >
-                  <span>{opt.label}</span>
-                  {field.value === opt.value && (
-                    <Check className="h-4 w-4 text-primary" />
-                  )}
-                </div>
-              ))}
-            </div>
+          <PopoverTrigger render={<button
+              type="button"
+              role="combobox"
+              aria-expanded={open}
+              className="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50">
+              <span className={field.value ? "" : "text-muted-foreground"}>
+                {options.find((opt) => opt.value === field.value)?.label || displayPlaceholder}
+              </span>
+            </button>}></PopoverTrigger>
+          <PopoverContent className="w-50 p-0">
+            <Command>
+              <CommandInput placeholder={displayPlaceholder} />
+              <CommandList className="max-h-50">
+                <CommandEmpty>{m.common_form_noMatch()}</CommandEmpty>
+                <CommandGroup>
+                  {options.map((opt) => (
+                    <CommandItem
+                      key={opt.value}
+                      value={opt.value}
+                      onSelect={() => {
+                        field.handleChange(opt.value)
+                        setOpen(false)
+                      }}
+                    >
+                      <span>{opt.label}</span>
+                      {field.value === opt.value && (
+                        <Check className="ml-auto h-4 w-4 text-primary" />
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
           </PopoverContent>
         </Popover>
       )}

package/src/components/forms/app-date-picker.tsx

@@ -15,6 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+import { useState } from "react"
 import type { AnyReactFormApi } from "@tanstack/react-form"
 import { Input } from "@/components/ui/input"
 import {
@@ -44,6 +45,7 @@ export function AppDatePicker({
   validators,
 }: AppDatePickerProps) {
   const displayPlaceholder = placeholder ?? m.common_form_selectDate()
+  const [open, setOpen] = useState(false)
   return (
     <AppField
       name={name}
@@ -52,23 +54,29 @@ export function AppDatePicker({
       description={description}
       validators={validators}
     >
-      {(field) => (
-        <Popover>
-          <PopoverTrigger render={<Input id={field.name}
-              value={field.value ?? ""}
-              placeholder={displayPlaceholder}
-              readOnly />}></PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
-            <Calendar
-              mode="single"
-selected={
-                 field.value ? new Date(field.value) : undefined
-               }
-              onSelect={(d) => field.handleChange(d?.toISOString() ?? "")}
-            />
-          </PopoverContent>
-        </Popover>
-      )}
+      {(field) => {
+        // 非法日期串守卫：Invalid Date 直传 Calendar 会静默渲染异常
+        const parsed = field.value ? new Date(field.value) : undefined
+        const selected = parsed && !Number.isNaN(parsed.getTime()) ? parsed : undefined
+        return (
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger render={<Input id={field.name}
+                value={field.value ?? ""}
+                placeholder={displayPlaceholder}
+                readOnly />}></PopoverTrigger>
+            <PopoverContent className="w-auto p-0">
+              <Calendar
+                mode="single"
+                selected={selected}
+                onSelect={(d) => {
+                  field.handleChange(d?.toISOString() ?? "")
+                  setOpen(false) // 选后关闭弹层，与 Combobox 交互一致
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        )
+      }}
     </AppField>
   )
 }

package/src/components/forms/app-field-error.tsx

@@ -21,7 +21,10 @@ export function AppFieldError({ field }: { field: AnyFieldApi }) {
   if (!field.meta.isTouched || field.meta.isValid) return null
   return (
     <span className="block text-sm text-destructive mt-1">
-      {field.errors.map((e) => e.message).join(", ")}
+      {/* 校验错误可为纯字符串（无 message 属性），直接渲染会输出字面量 undefined */}
+      {field.errors
+        .map((e) => (typeof e === "string" ? e : e?.message ?? String(e)))
+        .join(", ")}
     </span>
   )
 }

package/src/components/forms/app-field.tsx

@@ -26,8 +26,14 @@ import {
   FieldDescription,
   FieldLabel,
 } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
 import { AppFieldError } from "./app-field-error"
 
+/**
+ * TODO(待决策)：TanStack Form v2（alpha）的 validators 泛型尚未稳定，
+ * 精确映射 FieldValidators 需随 v2 正式版补全；当前经 AnyReactFormApi 通道透传。
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppFieldValidators<TValue> = any
 
 export interface AppFieldProps<TValue> {
@@ -70,11 +76,18 @@ export function AppField<TValue>({
 }
 
 function DefaultInput({ field }: { field: AnyFieldApi }) {
+  // 对象值禁止 String() 化回写（"[object Object]" 静默破坏数据形状）：
+  // 非原始值仅 JSON 只读展示，禁用编辑，由调用方提供类型化子组件接管
+  const isPrimitive =
+    field.value === null ||
+    field.value === undefined ||
+    ["string", "number", "boolean"].includes(typeof field.value)
   return (
-    <input
+    <Input
       id={field.name}
       name={field.name}
-      value={String(field.value ?? "")}
+      value={isPrimitive ? String(field.value ?? "") : JSON.stringify(field.value)}
+      disabled={!isPrimitive}
       onChange={(e) => field.handleChange(e.target.value)}
       onBlur={field.handleBlur}
     />

package/src/components/forms/app-form-dialog.tsx

@@ -15,9 +15,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import type { ReactNode } from "react"
-import { useForm } from "@tanstack/react-form"
+import { useForm, type AnyReactFormApi } from "@tanstack/react-form"
 import {
   Dialog,
   DialogContent,
@@ -27,6 +27,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
+import { toast } from "@/components/ui/toast"
 import { AppSubmit } from "./app-submit"
 import { m } from "@/paraglide/messages.js";
 
@@ -36,12 +37,14 @@ export interface AppFormDialogProps<TValue> {
   title: string
   description?: string
   defaultValues: TValue
+  // TanStack Form v2（alpha）validators 泛型未稳定，经 unknown 通道透传
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   validators?: any
   onSubmit?: (values: TValue) => Promise<void>
   submitLabel?: string
   cancelLabel?: string
   children: (
-    form: any,
+    form: AnyReactFormApi,
   ) => ReactNode
 }
 
@@ -69,6 +72,9 @@ export function AppFormDialog<TValue>({
         setIsSaving(true)
         try {
           await onSubmit(value as TValue)
+        } catch (err) {
+          console.error(err instanceof Error ? err.message : "unknown")
+          toast.error(m.common_form_operationFailed())
         } finally {
           setIsSaving(false)
         }
@@ -76,6 +82,12 @@ export function AppFormDialog<TValue>({
     },
   })
 
+  // 对话框复用（不 remount）编辑不同实体时随 open 重置表单值；
+  // 刻意只依赖 open（defaultValues 变化不重置，避免打断输入）
+  useEffect(() => {
+    if (open) form.reset(defaultValues as any)
+  }, [open])
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>

package/src/components/forms/app-submit.tsx

@@ -18,6 +18,7 @@
 import { Loader2 } from "lucide-react"
 import type { ReactNode } from "react"
 import type { AnyReactFormApi } from "@tanstack/react-form"
+import { Button } from "@/components/ui/button"
 
 export function AppSubmit({
   form,
@@ -35,31 +36,27 @@ export function AppSubmit({
       <form.Subscribe<boolean>
 selector={(state: any) => state.isSubmitting}
          children={(isSub: boolean) => (
-          <button
-            type="submit"
-            disabled={isSub || disabled}
-            className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 disabled:opacity-50"
-          >
+          <Button type="submit" disabled={isSub || disabled}>
             {isSub ? (
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
             ) : null}
             {children}
-          </button>
+          </Button>
         )}
       />
     )
   }
 
+  // 用 || 而非 ??：isSubmitting 为 false 时外部 disabled 仍须生效（?? 会短路放行）
   return (
-    <button
+    <Button
       type="submit"
-      disabled={isSubmitting ?? disabled}
-      className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 disabled:opacity-50"
+      disabled={isSubmitting || disabled}
     >
       {isSubmitting ? (
         <Loader2 className="mr-2 h-4 w-4 animate-spin" />
       ) : null}
       {children}
-    </button>
+    </Button>
   )
 }

package/src/components/forms/hooks/use-form-submit.ts

@@ -41,6 +41,8 @@ export function useFormSubmit<TData, TResult>(
         }
         return true
       } catch (err) {
+        // 真实错误留痕（自定义 toastError 文案会掩盖原始信息，线上排障需要）
+        console.error(err instanceof Error ? err.message : "unknown")
         const msg = err instanceof Error ? err.message : m.common_form_operationFailed()
         toast.error(config?.toastError ?? msg)
         return false

package/src/components/forms/schemas/common.ts

@@ -20,7 +20,5 @@ import { m } from '@/paraglide/messages.js'
 
 export const emailSchema = z.string().email(m.common_form_invalidEmail())
 export const passwordSchema = z.string().min(6, m.common_form_passwordMin())
-export const requiredTextSchema = z
-  .string()
-  .min(1, m.common_form_required())
-  .transform((v) => v.trim())
+// trim 先于 min(1)：纯空白串（"   "）不得绕过必填校验（min 在原始值上执行会漏放）
+export const requiredTextSchema = z.string().trim().min(1, m.common_form_required())

package/src/components/harness/ai-chat-history/components/conversation-header.tsx

@@ -43,6 +43,7 @@ export function ConversationHeader({
         </div>
         {showNewButton && onNewConversation && (
           <Button
+            // min-h-44px：移动端触控目标最低标准（≥44px），sm 起桌面端收紧
             className="min-h-[44px] w-full shrink-0 sm:min-h-[24px]"
             onClick={onNewConversation}
             type="button"

package/src/components/harness/ai-chat-history/components/conversation-item.tsx

@@ -29,6 +29,8 @@ import { cn } from "@/lib/utils";
 import { formatChatDate } from "@/lib/datetime";
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -94,6 +96,7 @@ export function ConversationItem({
       setShowDeleteDialog(false);
     } catch (error) {
       console.error("Failed to delete conversation:", error instanceof Error ? error.message : String(error));
+      toast.error(m.chat_history_deleteFailed());
     } finally {
       setIsDeleting(false);
     }
@@ -103,6 +106,8 @@ export function ConversationItem({
     <>
       <div
         className={cn(
+          // min-h-60px：移动端列表项触控目标约定（60px ≥ 44px 最低标准）
+          // tap-highlight 透明：原生点击高亮与卡片 hover 态视觉冲突
           "group relative flex flex-col gap-2 rounded-lg border p-3 transition-colors",
           "min-h-[60px] touch-manipulation [-webkit-tap-highlight-color:transparent]",
           isActive
@@ -115,6 +120,7 @@ export function ConversationItem({
         <div className="flex items-start gap-3">
           <button
             aria-label={m.chat_history_selectConversation({ title: conversation.title ?? "" })}
+            // min-h-44px：移动端触控目标最低标准（≥44px），sm 起桌面端收紧
             className="flex min-h-[44px] min-w-0 flex-1 flex-col gap-1 rounded-sm text-left [-webkit-tap-highlight-color:transparent] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:min-h-[24px]"
             disabled={isLoading}
             onClick={onSelect}
@@ -129,10 +135,14 @@ export function ConversationItem({
             {isEditing ? (
               <input
                 aria-label={m.chat_history_editTitle()}
+                // min-h-44px：移动端触控目标最低标准（≥44px），sm 起桌面端收紧
                 className="min-h-[44px] w-full rounded-md border bg-background px-2 py-1.5 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:min-h-[24px] sm:text-sm"
                 onBlur={onRenameSubmit}
                 onChange={(e) => onEditValueChange(e.target.value)}
                 onKeyDown={(e) => {
+                  // 编辑态拦截冒泡：外层 button 的 Enter/Space 处理会阻止空格
+                  // 输入并双触发提交；点击移动光标也会误触会话切换
+                  e.stopPropagation();
                   if (e.key === "Enter") {
                     e.preventDefault();
                     onRenameSubmit();
@@ -141,6 +151,7 @@ export function ConversationItem({
                     onRenameCancel();
                   }
                 }}
+                onClick={(e) => e.stopPropagation()}
                 ref={inputRef}
                 value={editValue}
               />
@@ -151,10 +162,19 @@ export function ConversationItem({
                     {conversation.title ?? m.chat_newConversation()}
                   </h4>
                   {conversation.pendingInteraction && (
-                    <span
-                      className="size-2 shrink-0 rounded-full bg-amber-500"
-                      title={m.harness_conversation_pending()}
-                    />
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={
+                          <span
+                            aria-label={m.harness_conversation_pending()}
+                            className="inline-block size-2 shrink-0 rounded-full bg-amber-500"
+                          />
+                        }
+                      />
+                      <TooltipContent>
+                        <p>{m.harness_conversation_pending()}</p>
+                      </TooltipContent>
+                    </Tooltip>
                   )}
                 </div>
                 {conversation.lastMessage && (

package/src/components/harness/ai-chat-history/components/empty-state.tsx

@@ -48,6 +48,7 @@ export function EmptyState({
       </div>
       {!searchQuery && showNewButton && onNewConversation && (
         <Button
+          // min-h-44px：移动端触控目标最低标准（≥44px），sm 起桌面端收紧
           className="min-h-[44px] sm:min-h-[24px]"
           onClick={onNewConversation}
           type="button"

package/src/components/harness/ai-chat-history/index.tsx

@@ -28,6 +28,7 @@ import { ConversationHeader } from "./components/conversation-header";
 import { ConversationSearch } from "./components/conversation-search";
 import { EmptyState } from "./components/empty-state";
 import type { Conversation, AIChatHistoryProps } from "./types";
+import { toast } from "@/components/ui/toast";
 import { m } from "@/paraglide/messages.js";
 
 export type { Conversation, AIChatHistoryProps };
@@ -54,12 +55,8 @@ export default function AIChatHistory({
   );
   const containerRef = useRef<HTMLDivElement>(null);
   const timezone = useTimezone();
-  const groupLabelKeys: Record<string, () => string> = {
-      今天: m.chat_groups_today,
-      昨天: m.chat_groups_yesterday,
-      本周: m.chat_groups_thisWeek,
-      更早: m.chat_groups_earlier,
-    }
+  // group.label 已由 groupConversationsByDate 内部完成 i18n（g() 返回译文），
+  // 不再做「中文译文 → 消息函数」的反查双层映射
 
   const filteredConversations = useMemo(() => {
     if (!searchQuery.trim()) return conversations;
@@ -104,6 +101,7 @@ export default function AIChatHistory({
         setEditingId(null);
       } catch (error) {
         console.error("Failed to rename conversation:", error instanceof Error ? error.message : String(error));
+        toast.error(m.chat_history_renameFailed());
       } finally {
         setLoadingStates((prev) => {
           const next = { ...prev };
@@ -126,6 +124,18 @@ export default function AIChatHistory({
   ]);
 
   function focusItem(e: KeyboardEvent) {
+    // 编辑态守卫：焦点在输入类元素（重命名 input 等）时不劫持方向键，
+    // 否则输入框内的光标移动被列表导航抢占
+    const active = document.activeElement;
+    if (
+      active instanceof HTMLElement &&
+      (active.tagName === "INPUT" ||
+        active.tagName === "TEXTAREA" ||
+        active.tagName === "SELECT" ||
+        active.isContentEditable)
+    ) {
+      return;
+    }
     const items = containerRef.current?.querySelectorAll<HTMLElement>(
       '[role="listitem"] button'
     );
@@ -180,7 +190,7 @@ export default function AIChatHistory({
                   editingId={editingId}
                   editValue={editValue}
                   isLoading={loadingStates}
-                  label={groupLabelKeys[group.label]?.() ?? group.label}
+                  label={group.label}
                   onArchive={onArchive}
                   onFork={onFork}
                   onDelete={onDelete}

package/src/components/harness/ai-chat-history/utils/group-conversations.ts

@@ -40,6 +40,9 @@ export function groupConversationsByDate(conversations: Conversation[], timezone
   conversations: Conversation[];
 }[] {
   const groups: Record<string, Conversation[]> = {};
+  // 记录每组最早一条消息时间：日期标签按时间序排序（字典序对「10月9日/10月10日」
+  // 这类本地化文案会排错）
+  const earliestAt: Record<string, number> = {};
 
   conversations.forEach((conv) => {
     if (!conv.lastMessageAt) {
@@ -54,6 +57,9 @@ export function groupConversationsByDate(conversations: Conversation[], timezone
     const label = formatChatDate(conv.lastMessageAt, timezone);
     if (!groups[label]) {
       groups[label] = [];
+      earliestAt[label] = new Date(conv.lastMessageAt).getTime();
+    } else {
+      earliestAt[label] = Math.min(earliestAt[label], new Date(conv.lastMessageAt).getTime());
     }
     groups[label].push(conv);
   });
@@ -68,13 +74,16 @@ export function groupConversationsByDate(conversations: Conversation[], timezone
     }
   });
 
+  const earlierKey = g(EARLIER);
+  // 其余日期分组按组内最早消息时间升序（旧→新）；earlierKey 已在上方固定占位，
+  // 不参与此循环（否则会被 push 两次，列表渲染重复条目且 label 作 React key 撞车）
   Object.keys(groups)
-    .sort()
+    .filter((label) => label !== earlierKey)
+    .sort((a, b) => (earliestAt[a] ?? 0) - (earliestAt[b] ?? 0))
     .forEach((label) => {
       result.push({ label, conversations: groups[label] });
     });
 
-  const earlierKey = g(EARLIER);
   if (groups[earlierKey]) {
     result.push({ label: earlierKey, conversations: groups[earlierKey] });
   }

package/src/components/harness/ai-citations/components/citation-item.tsx

@@ -57,7 +57,7 @@ export function CitationItemHeader({
       >
         <div className="flex items-center gap-3">
           <CitationNumber
-            aria-label={`Citation ${citation.number}`}
+            aria-label={m.citation_item_label({ number: citation.number })}
             asButton={false}
             number={citation.number}
           />
@@ -85,12 +85,12 @@ export function CitationItemHeader({
 
   return (
     <div
-      aria-label={`Citation ${citation.number}`}
+      aria-label={m.citation_item_label({ number: citation.number })}
       className="flex items-center gap-3 rounded-lg bg-card px-2"
       role="group"
     >
       <CitationNumber
-        aria-label={`Citation ${citation.number}`}
+        aria-label={m.citation_item_label({ number: citation.number })}
         asButton={false}
         number={citation.number}
       />
@@ -147,7 +147,7 @@ export function CitationItem({
             id={`citation-content-${citation.id}`}
           >
             <ul
-              aria-label={`Sources for citation ${citation.number}`}
+              aria-label={m.citation_item_sourcesLabel({ number: citation.number })}
               className="ml-6 flex flex-col gap-2 border-l pl-6"
               role="list"
             >

package/src/components/harness/ai-citations/components/citations-list.tsx

@@ -78,6 +78,7 @@ export function CitationsList({
     [citations]
   );
   const listRef = useRef<HTMLUListElement>(null);
+  const REVEAL_BATCH = 5;
   const [visibleCount, setVisibleCount] = useState(0);
 
   useEffect(() => {
@@ -86,8 +87,9 @@ export function CitationsList({
 
   useEffect(() => {
     if (visibleCount >= validCitations.length) return;
+    // 按批揭示（每 100ms 一批 5 条）：逐条揭示在引用多时需 N×100ms 才渲染完
     const timer = setTimeout(() => {
-      setVisibleCount((prev) => prev + 1);
+      setVisibleCount((prev) => Math.min(prev + REVEAL_BATCH, validCitations.length));
     }, 100);
     return () => clearTimeout(timer);
   }, [visibleCount, validCitations.length]);
@@ -108,7 +110,8 @@ export function CitationsList({
 
   return (
     <ul
-      aria-label="Citations list"
+      aria-label={m.citation_list_label()}
+      // max-h-500px：引用列表滚动视口上限（无标准刻度对应值），超出内部滚动
       className="flex max-h-[500px] flex-col gap-3 overflow-y-auto"
       ref={listRef}
       role="list"