Merge branch 'main' into feat/usage-dashboard-refinement

Resolve conflicts in usage dashboard components: - RequestLogTable.tsx: keep PR's new `range: UsageRangeSelection` API (replaces the old timeMode/rollingWindowSeconds mechanism), while preserving main's advanced pagination (ellipsis pages + jump input) and page-reset effect. Removed obsolete handleRefresh and datetime converters that are no longer needed under the new range API. - UsageDashboard.tsx: keep PR's redesigned filter panel with calendar picker and preset buttons. Drop the stale `timeRange={timeRange}` prop that was auto-preserved from main but references a variable that no longer exists in the PR's design.
2026-07-28 00:35:32 +08:00 · 2026-04-15 11:33:24 +08:00
parent 654e537746 78198e262b
commit 0c4226a271
82 changed files with 2910 additions and 1879 deletions
@@ -154,7 +154,7 @@ export function EditProviderDialog({
  }, [
    open, // 修复：编辑保存后再次打开显示旧数据，依赖 open 确保每次打开时重新读取最新 provider 数据
    provider?.id, // 只依赖 ID，provider 对象更新不会触发重新计算
-    provider?.meta, // 需要依赖 meta 以便正确初始化 testConfig 和 proxyConfig
+    provider?.meta, // 需要依赖 meta 以便正确初始化 testConfig
    initialSettingsConfig,
  ]);

@@ -7,6 +7,7 @@ import {
  Minus,
  Play,
  Plus,
+  ShieldAlert,
  Terminal,
  TestTube2,
  Trash2,
@@ -36,6 +37,7 @@ interface ProviderActionsProps {
  isAutoFailoverEnabled?: boolean;
  isInFailoverQueue?: boolean;
  onToggleFailover?: (enabled: boolean) => void;
+  isOfficialBlockedByProxy?: boolean;
  // OpenClaw: default model
  isDefaultModel?: boolean;
  onSetAsDefault?: () => void;
@@ -60,6 +62,7 @@ export function ProviderActions({
  isAutoFailoverEnabled = false,
  isInFailoverQueue = false,
  onToggleFailover,
+  isOfficialBlockedByProxy = false,
  // OpenClaw: default model
  isDefaultModel = false,
  onSetAsDefault,
@@ -166,6 +169,16 @@ export function ProviderActions({
      };
    }

+    if (isOfficialBlockedByProxy) {
+      return {
+        disabled: true,
+        variant: "secondary" as const,
+        className: "opacity-40 cursor-not-allowed",
+        icon: <ShieldAlert className="h-4 w-4" />,
+        text: t("provider.blockedByProxy", { defaultValue: "已拦截" }),
+      };
+    }
+
    if (isCurrent) {
      return {
        disabled: true,
@@ -175,6 +175,8 @@ export function ProviderCard({

  const usageEnabled = provider.meta?.usage_script?.enabled ?? false;
  const isOfficial = isOfficialProvider(provider, appId);
+  const isOfficialBlockedByProxy =
+    isProxyTakeover && (provider.category === "official" || isOfficial);
  const isCopilot =
    provider.meta?.providerType === PROVIDER_TYPES.GITHUB_COPILOT ||
    provider.meta?.usage_script?.templateType === "github_copilot";
@@ -424,6 +426,7 @@ export function ProviderCard({
              isInConfig={isInConfig}
              isTesting={isTesting}
              isProxyTakeover={isProxyTakeover}
+              isOfficialBlockedByProxy={isOfficialBlockedByProxy}
              isOmo={isAnyOmo}
              onSwitch={() => onSwitch(provider)}
              onEdit={() => onEdit(provider)}
@@ -1,19 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
-import {
-  ChevronDown,
-  ChevronRight,
-  FlaskConical,
-  Globe,
-  Coins,
-  Eye,
-  EyeOff,
-  X,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, FlaskConical, Coins } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { Button } from "@/components/ui/button";
 import {
  Select,
  SelectContent,
@@ -22,7 +12,7 @@ import {
  SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
-import type { ProviderTestConfig, ProviderProxyConfig } from "@/types";
+import type { ProviderTestConfig } from "@/types";

 export type PricingModelSourceOption = "inherit" | "request" | "response";

@@ -34,136 +24,31 @@ interface ProviderPricingConfig {

 interface ProviderAdvancedConfigProps {
  testConfig: ProviderTestConfig;
-  proxyConfig: ProviderProxyConfig;
  pricingConfig: ProviderPricingConfig;
  onTestConfigChange: (config: ProviderTestConfig) => void;
-  onProxyConfigChange: (config: ProviderProxyConfig) => void;
  onPricingConfigChange: (config: ProviderPricingConfig) => void;
 }

-/** 从 ProviderProxyConfig 构建完整 URL */
-function buildProxyUrl(config: ProviderProxyConfig): string {
-  if (!config.proxyHost) return "";
-
-  const protocol = config.proxyType || "http";
-  const host = config.proxyHost;
-  const port = config.proxyPort || (protocol === "socks5" ? 1080 : 7890);
-
-  return `${protocol}://${host}:${port}`;
-}
-
-/** 从完整 URL 解析为 ProviderProxyConfig */
-function parseProxyUrl(url: string): Partial<ProviderProxyConfig> {
-  if (!url.trim()) {
-    return { proxyHost: undefined, proxyPort: undefined, proxyType: undefined };
-  }
-
-  try {
-    const parsed = new URL(url);
-    const protocol = parsed.protocol.replace(":", "") as
-      | "http"
-      | "https"
-      | "socks5";
-    const host = parsed.hostname;
-    const port = parsed.port ? parseInt(parsed.port, 10) : undefined;
-
-    return {
-      proxyType: protocol,
-      proxyHost: host || undefined,
-      proxyPort: port,
-    };
-  } catch {
-    // 尝试简单解析（不是标准 URL 格式）
-    const match = url.match(/^(?:(\w+):\/\/)?([^:]+)(?::(\d+))?$/);
-    if (match) {
-      return {
-        proxyType: (match[1] as "http" | "https" | "socks5") || "http",
-        proxyHost: match[2] || undefined,
-        proxyPort: match[3] ? parseInt(match[3], 10) : undefined,
-      };
-    }
-    return {};
-  }
-}
-
 export function ProviderAdvancedConfig({
  testConfig,
-  proxyConfig,
  pricingConfig,
  onTestConfigChange,
-  onProxyConfigChange,
  onPricingConfigChange,
 }: ProviderAdvancedConfigProps) {
  const { t } = useTranslation();
  const [isTestConfigOpen, setIsTestConfigOpen] = useState(testConfig.enabled);
-  const [isProxyConfigOpen, setIsProxyConfigOpen] = useState(
-    proxyConfig.enabled,
-  );
  const [isPricingConfigOpen, setIsPricingConfigOpen] = useState(
    pricingConfig.enabled,
  );
-  const [showPassword, setShowPassword] = useState(false);
-
-  // 代理 URL 输入状态（仅在初始化时从 proxyConfig 构建）
-  const [proxyUrl, setProxyUrl] = useState(() => buildProxyUrl(proxyConfig));
-
-  // 标记是否为用户主动输入（用于区分外部更新和用户输入）
-  const [isUserTyping, setIsUserTyping] = useState(false);

  useEffect(() => {
    setIsTestConfigOpen(testConfig.enabled);
  }, [testConfig.enabled]);

-  // 同步外部 proxyConfig.enabled 变化到展开状态
-  useEffect(() => {
-    setIsProxyConfigOpen(proxyConfig.enabled);
-  }, [proxyConfig.enabled]);
-
-  // 同步外部 pricingConfig.enabled 变化到展开状态
  useEffect(() => {
    setIsPricingConfigOpen(pricingConfig.enabled);
  }, [pricingConfig.enabled]);

-  // 仅在外部 proxyConfig 变化且非用户输入时同步（如：重置表单、加载数据）
-  useEffect(() => {
-    if (!isUserTyping) {
-      const newUrl = buildProxyUrl(proxyConfig);
-      if (newUrl !== proxyUrl) {
-        setProxyUrl(newUrl);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [proxyConfig.proxyType, proxyConfig.proxyHost, proxyConfig.proxyPort]);
-
-  // 处理代理 URL 变化（用户输入时不触发 URL 重建）
-  const handleProxyUrlChange = (value: string) => {
-    setIsUserTyping(true);
-    setProxyUrl(value);
-    const parsed = parseProxyUrl(value);
-    onProxyConfigChange({
-      ...proxyConfig,
-      ...parsed,
-    });
-  };
-
-  // 输入框失焦时结束用户输入状态
-  const handleProxyUrlBlur = () => {
-    setIsUserTyping(false);
-  };
-
-  // 清除代理配置
-  const handleClearProxy = () => {
-    setProxyUrl("");
-    onProxyConfigChange({
-      ...proxyConfig,
-      proxyType: undefined,
-      proxyHost: undefined,
-      proxyPort: undefined,
-      proxyUsername: undefined,
-      proxyPassword: undefined,
-    });
-  };
-
  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-border/50 bg-muted/20">
@@ -342,141 +227,6 @@ export function ProviderAdvancedConfig({
        </div>
      </div>

-      {/* 代理配置 */}
-      <div className="rounded-lg border border-border/50 bg-muted/20">
-        <button
-          type="button"
-          className="flex w-full items-center justify-between p-4 hover:bg-muted/30 transition-colors"
-          onClick={() => setIsProxyConfigOpen(!isProxyConfigOpen)}
-        >
-          <div className="flex items-center gap-3">
-            <Globe className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">
-              {t("providerAdvanced.proxyConfig", {
-                defaultValue: "代理配置",
-              })}
-            </span>
-          </div>
-          <div className="flex items-center gap-3">
-            <div
-              className="flex items-center gap-2"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <Label
-                htmlFor="proxy-config-enabled"
-                className="text-sm text-muted-foreground"
-              >
-                {t("providerAdvanced.useCustomProxy", {
-                  defaultValue: "使用单独代理",
-                })}
-              </Label>
-              <Switch
-                id="proxy-config-enabled"
-                checked={proxyConfig.enabled}
-                onCheckedChange={(checked) => {
-                  onProxyConfigChange({ ...proxyConfig, enabled: checked });
-                  if (checked) setIsProxyConfigOpen(true);
-                }}
-              />
-            </div>
-            {isProxyConfigOpen ? (
-              <ChevronDown className="h-4 w-4 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="h-4 w-4 text-muted-foreground" />
-            )}
-          </div>
-        </button>
-        <div
-          className={cn(
-            "overflow-hidden transition-all duration-200",
-            isProxyConfigOpen
-              ? "max-h-[500px] opacity-100"
-              : "max-h-0 opacity-0",
-          )}
-        >
-          <div className="border-t border-border/50 p-4 space-y-3">
-            <p className="text-sm text-muted-foreground">
-              {t("providerAdvanced.proxyConfigDesc", {
-                defaultValue:
-                  "为此供应商配置单独的网络代理，不启用时使用系统代理或全局设置。",
-              })}
-            </p>
-
-            {/* 代理地址输入框（仿照全局代理样式） */}
-            <div className="flex gap-2">
-              <Input
-                placeholder="http://127.0.0.1:7890 / socks5://127.0.0.1:1080"
-                value={proxyUrl}
-                onChange={(e) => handleProxyUrlChange(e.target.value)}
-                onBlur={handleProxyUrlBlur}
-                className="font-mono text-sm flex-1"
-                disabled={!proxyConfig.enabled}
-              />
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                disabled={!proxyConfig.enabled || !proxyUrl}
-                onClick={handleClearProxy}
-                title={t("common.clear", { defaultValue: "清除" })}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-
-            {/* 认证信息：用户名 + 密码（可选） */}
-            <div className="flex gap-2">
-              <Input
-                placeholder={t("providerAdvanced.proxyUsername", {
-                  defaultValue: "用户名（可选）",
-                })}
-                value={proxyConfig.proxyUsername || ""}
-                onChange={(e) =>
-                  onProxyConfigChange({
-                    ...proxyConfig,
-                    proxyUsername: e.target.value || undefined,
-                  })
-                }
-                className="font-mono text-sm flex-1"
-                disabled={!proxyConfig.enabled}
-              />
-              <div className="relative flex-1">
-                <Input
-                  type={showPassword ? "text" : "password"}
-                  placeholder={t("providerAdvanced.proxyPassword", {
-                    defaultValue: "密码（可选）",
-                  })}
-                  value={proxyConfig.proxyPassword || ""}
-                  onChange={(e) =>
-                    onProxyConfigChange({
-                      ...proxyConfig,
-                      proxyPassword: e.target.value || undefined,
-                    })
-                  }
-                  className="font-mono text-sm pr-10"
-                  disabled={!proxyConfig.enabled}
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
-                  onClick={() => setShowPassword(!showPassword)}
-                  tabIndex={-1}
-                  disabled={!proxyConfig.enabled}
-                >
-                  {showPassword ? (
-                    <EyeOff className="h-4 w-4 text-muted-foreground" />
-                  ) : (
-                    <Eye className="h-4 w-4 text-muted-foreground" />
-                  )}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
      {/* 计费配置 */}
      <div className="rounded-lg border border-border/50 bg-muted/20">
        <button
@@ -13,7 +13,6 @@ import type {
  ProviderCategory,
  ProviderMeta,
  ProviderTestConfig,
-  ProviderProxyConfig,
  ClaudeApiFormat,
  ClaudeApiKeyField,
 } from "@/types";
@@ -192,9 +191,6 @@ export function ProviderForm({
  const [testConfig, setTestConfig] = useState<ProviderTestConfig>(
    () => initialData?.meta?.testConfig ?? { enabled: false },
  );
-  const [proxyConfig, setProxyConfig] = useState<ProviderProxyConfig>(
-    () => initialData?.meta?.proxyConfig ?? { enabled: false },
-  );
  const [pricingConfig, setPricingConfig] = useState<{
    enabled: boolean;
    costMultiplier?: string;
@@ -231,7 +227,6 @@ export function ProviderForm({
      supportsFullUrl ? (initialData?.meta?.isFullUrl ?? false) : false,
    );
    setTestConfig(initialData?.meta?.testConfig ?? { enabled: false });
-    setProxyConfig(initialData?.meta?.proxyConfig ?? { enabled: false });
    setPricingConfig({
      enabled:
        initialData?.meta?.costMultiplier !== undefined ||
@@ -1075,7 +1070,6 @@ export function ProviderForm({
          ? selectedGitHubAccountId
          : undefined,
      testConfig: testConfig.enabled ? testConfig : undefined,
-      proxyConfig: proxyConfig.enabled ? proxyConfig : undefined,
      costMultiplier: pricingConfig.enabled
        ? pricingConfig.costMultiplier
        : undefined,
@@ -1847,10 +1841,8 @@ export function ProviderForm({
            appId !== "openclaw" && (
              <ProviderAdvancedConfig
                testConfig={testConfig}
-                proxyConfig={proxyConfig}
                pricingConfig={pricingConfig}
                onTestConfigChange={setTestConfig}
-                onProxyConfigChange={setProxyConfig}
                onPricingConfigChange={setPricingConfig}
              />
            )}
@@ -85,7 +85,7 @@ export function SessionItem({
              {getProviderLabel(session.providerId, t)}
            </TooltipContent>
          </Tooltip>
-          <span className="text-sm font-medium truncate flex-1">
+          <span className="text-sm font-medium line-clamp-2 flex-1">
            {searchQuery ? highlightText(title, searchQuery) : title}
          </span>
          <ChevronRight
@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSessionSearch } from "@/hooks/useSessionSearch";
 import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
 import {
@@ -69,8 +70,7 @@ export function SessionManagerPage({ appId }: { appId: string }) {
  const { data, isLoading, refetch } = useSessionsQuery();
  const sessions = data ?? [];
  const detailRef = useRef<HTMLDivElement | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
-  const messageRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
  const [activeMessageIndex, setActiveMessageIndex] = useState<number | null>(
    null,
  );
@@ -134,6 +134,20 @@ export function SessionManagerPage({ appId }: { appId: string }) {
  const deleteSessionMutation = useDeleteSessionMutation();
  const isDeleting = deleteSessionMutation.isPending || isBatchDeleting;

+  const virtualizer = useVirtualizer({
+    count: messages.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 120,
+    overscan: 5,
+    gap: 12,
+  });
+
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [selectedKey]);
+
  useEffect(() => {
    const validKeys = new Set(
      sessions.map((session) => getSessionKey(session)),
@@ -166,37 +180,36 @@ export function SessionManagerPage({ appId }: { appId: string }) {
  }, [messages]);

  const scrollToMessage = (index: number) => {
-    const el = messageRefs.current.get(index);
-    if (el) {
-      el.scrollIntoView({ behavior: "smooth", block: "center" });
-      setActiveMessageIndex(index);
-      setTocDialogOpen(false); // 关闭弹窗
-      // 清除高亮状态
-      setTimeout(() => setActiveMessageIndex(null), 2000);
-    }
+    virtualizer.scrollToIndex(index, { align: "center", behavior: "smooth" });
+    setActiveMessageIndex(index);
+    setTocDialogOpen(false);
+    setTimeout(() => setActiveMessageIndex(null), 2000);
  };

-  // 清理定时器
-  useEffect(() => {
-    return () => {
-      // 这里的 setTimeout 其实无法直接清理，因为它在函数闭包里。
-      // 如果要严格清理，需要用 useRef 存 timer id。
-      // 但对于 2秒的高亮清除，通常不清理也没大问题。
-      // 为了代码规范，我们在组件卸载时将 activeMessageIndex 重置 (虽然 React 会处理)
-    };
-  }, []);
+  const handleCopy = useCallback(
+    async (text: string, successMessage: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.success(successMessage);
+      } catch (error) {
+        toast.error(
+          extractErrorMessage(error) ||
+            t("common.error", { defaultValue: "Copy failed" }),
+        );
+      }
+    },
+    [t],
+  );

-  const handleCopy = async (text: string, successMessage: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast.success(successMessage);
-    } catch (error) {
-      toast.error(
-        extractErrorMessage(error) ||
-          t("common.error", { defaultValue: "Copy failed" }),
+  const handleMessageCopy = useCallback(
+    (content: string) => {
+      void handleCopy(
+        content,
+        t("sessionManager.messageCopied", { defaultValue: "已复制消息内容" }),
      );
-    }
-  };
+    },
+    [handleCopy, t],
+  );

  const handleResume = async () => {
    if (!selectedSession?.resumeCommand) return;
@@ -973,9 +986,9 @@ export function SessionManagerPage({ appId }: { appId: string }) {
                  <CardContent className="flex-1 min-h-0 p-0">
                    <div className="flex h-full min-w-0">
                      {/* 消息列表 */}
-                      <ScrollArea className="flex-1 min-w-0">
-                        <div className="p-4 min-w-0">
-                          <div className="flex items-center gap-2 mb-3">
+                      <div className="flex-1 min-w-0 flex flex-col">
+                        <div className="px-4 pt-4 pb-2 min-w-0">
+                          <div className="flex items-center gap-2">
                            <MessageSquare className="size-4 text-muted-foreground" />
                            <span className="text-sm font-medium">
                              {t("sessionManager.conversationHistory", {
@@ -986,7 +999,11 @@ export function SessionManagerPage({ appId }: { appId: string }) {
                              {messages.length}
                            </Badge>
                          </div>
-
+                        </div>
+                        <div
+                          ref={scrollContainerRef}
+                          className="flex-1 overflow-y-auto px-4 pb-4 min-w-0"
+                        >
                          {isLoadingMessages ? (
                            <div className="flex items-center justify-center py-12">
                              <RefreshCw className="size-5 animate-spin text-muted-foreground" />
@@ -999,32 +1016,41 @@ export function SessionManagerPage({ appId }: { appId: string }) {
                              </p>
                            </div>
                          ) : (
-                            <div className="space-y-3">
-                              {messages.map((message, index) => (
-                                <SessionMessageItem
-                                  key={`${message.role}-${index}`}
-                                  message={message}
-                                  index={index}
-                                  isActive={activeMessageIndex === index}
-                                  searchQuery={search}
-                                  setRef={(el) => {
-                                    if (el) messageRefs.current.set(index, el);
-                                  }}
-                                  onCopy={(content) =>
-                                    handleCopy(
-                                      content,
-                                      t("sessionManager.messageCopied", {
-                                        defaultValue: "已复制消息内容",
-                                      }),
-                                    )
-                                  }
-                                />
-                              ))}
-                              <div ref={messagesEndRef} />
+                            <div
+                              style={{
+                                height: virtualizer.getTotalSize(),
+                                position: "relative",
+                              }}
+                            >
+                              {virtualizer
+                                .getVirtualItems()
+                                .map((virtualRow) => (
+                                  <div
+                                    key={virtualRow.key}
+                                    data-index={virtualRow.index}
+                                    ref={virtualizer.measureElement}
+                                    style={{
+                                      position: "absolute",
+                                      top: 0,
+                                      left: 0,
+                                      width: "100%",
+                                      transform: `translateY(${virtualRow.start}px)`,
+                                    }}
+                                  >
+                                    <SessionMessageItem
+                                      message={messages[virtualRow.index]}
+                                      isActive={
+                                        activeMessageIndex === virtualRow.index
+                                      }
+                                      searchQuery={search}
+                                      onCopy={handleMessageCopy}
+                                    />
+                                  </div>
+                                ))}
                            </div>
                          )}
                        </div>
-                      </ScrollArea>
+                      </div>

                      {/* 右侧目录 - 类似少数派 (大屏幕) */}
                      <SessionTocSidebar
@@ -1,4 +1,5 @@
-import { Copy } from "lucide-react";
+import { memo, useState } from "react";
+import { ChevronDown, ChevronUp, Copy } from "lucide-react";
 import { useTranslation } from "react-i18next";

 import { Button } from "@/components/ui/button";
@@ -16,29 +17,40 @@ import {
  highlightText,
 } from "./utils";

+const COLLAPSE_THRESHOLD = 3000;
+const COLLAPSED_LENGTH = 1500;
+
 interface SessionMessageItemProps {
  message: SessionMessage;
-  index: number;
  isActive: boolean;
  searchQuery?: string;
-  setRef: (el: HTMLDivElement | null) => void;
  onCopy: (content: string) => void;
 }

-export function SessionMessageItem({
+export const SessionMessageItem = memo(function SessionMessageItem({
  message,
  isActive,
  searchQuery,
-  setRef,
  onCopy,
 }: SessionMessageItemProps) {
  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  const isLong = message.content.length > COLLAPSE_THRESHOLD;
+  const hasSearchMatch =
+    isLong &&
+    !expanded &&
+    !!searchQuery &&
+    message.content.toLowerCase().includes(searchQuery.toLowerCase());
+  const collapsed = isLong && !expanded && !hasSearchMatch;
+  const displayContent = collapsed
+    ? message.content.slice(0, COLLAPSED_LENGTH) + "…"
+    : message.content;

  return (
    <div
-      ref={setRef}
      className={cn(
-        "rounded-lg border px-3 py-2.5 relative group transition-all min-w-0",
+        "rounded-lg border px-3 py-2.5 relative group transition-shadow min-w-0",
        message.role.toLowerCase() === "user"
          ? "bg-primary/5 border-primary/20 ml-8"
          : message.role.toLowerCase() === "assistant"
@@ -76,9 +88,36 @@ export function SessionMessageItem({
      </div>
      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed min-w-0">
        {searchQuery
-          ? highlightText(message.content, searchQuery)
-          : message.content}
+          ? highlightText(displayContent, searchQuery)
+          : displayContent}
      </div>
+      {isLong && !hasSearchMatch && (
+        <button
+          type="button"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((v) => !v)}
+          className="flex items-center gap-1 mt-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {expanded ? (
+            <>
+              <ChevronUp className="size-3" />
+              {t("sessionManager.collapseContent", {
+                defaultValue: "收起",
+              })}
+            </>
+          ) : (
+            <>
+              <ChevronDown className="size-3" />
+              {t("sessionManager.expandContent", {
+                defaultValue: "展开完整内容",
+              })}
+              <span className="text-muted-foreground/60">
+                ({Math.round(message.content.length / 1000)}k)
+              </span>
+            </>
+          )}
+        </button>
+      )}
    </div>
  );
-}
+});
@@ -3,6 +3,7 @@ import type { SettingsFormState } from "@/hooks/useSettings";
 import { AppWindow, MonitorUp, Power, EyeOff } from "lucide-react";
 import { ToggleRow } from "@/components/ui/toggle-row";
 import { AnimatePresence, motion } from "framer-motion";
+import { isLinux } from "@/lib/platform";

 interface WindowSettingsProps {
  settings: SettingsFormState;
@@ -75,6 +76,18 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
            onChange({ minimizeToTrayOnClose: value })
          }
        />
+
+        {isLinux() && (
+          <ToggleRow
+            icon={<AppWindow className="h-4 w-4 text-amber-500" />}
+            title={t("settings.useAppWindowControls")}
+            description={t("settings.useAppWindowControlsDescription")}
+            checked={!!settings.useAppWindowControls}
+            onCheckedChange={(value) =>
+              onChange({ useAppWindowControls: value })
+            }
+          />
+        )}
      </div>
    </section>
  );
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
  Table,
@@ -45,8 +45,15 @@ export function RequestLogTable({
  const [appliedFilters, setAppliedFilters] = useState<LogFilters>({});
  const [draftFilters, setDraftFilters] = useState<LogFilters>({});
  const [page, setPage] = useState(0);
+  const [pageInput, setPageInput] = useState("");
  const pageSize = 20;

+  // Reset page when the dashboard range changes
+  useEffect(() => {
+    setPage(0);
+  }, [range.preset, range.customStartDate, range.customEndDate]);
+
+  // When dashboard-level app filter is active (not "all"), override the local appType filter
  const dashboardAppTypeActive = dashboardAppType && dashboardAppType !== "all";
  const effectiveFilters: LogFilters = dashboardAppTypeActive
    ? { ...appliedFilters, appType: dashboardAppType }
@@ -77,6 +84,15 @@ export function RequestLogTable({
    setPage(0);
  };

+  const handleGoToPage = () => {
+    const trimmed = pageInput.trim();
+    if (!/^\d+$/.test(trimmed)) return;
+    const parsed = Number(trimmed);
+    if (parsed < 1 || parsed > totalPages) return;
+    setPage(parsed - 1);
+    setPageInput("");
+  };
+
  const language = i18n.resolvedLanguage || i18n.language || "en";
  const locale = getLocaleFromLanguage(language);

@@ -362,26 +378,80 @@ export function RequestLogTable({

          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <span>{t("usage.totalRecords", { total })}</span>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
              <Button
-                size="sm"
                variant="outline"
+                size="sm"
+                onClick={() => setPage(Math.max(0, page - 1))}
                disabled={page === 0}
-                onClick={() => setPage((p) => Math.max(0, p - 1))}
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
-              <span>
-                {page + 1} / {Math.max(totalPages, 1)}
-              </span>
+              {(() => {
+                const pages: (number | string)[] = [];
+                // 3 head + 3 tail + 3 neighborhood = 9 max distinct pages
+                if (totalPages <= 9) {
+                  for (let i = 0; i < totalPages; i++) pages.push(i);
+                } else {
+                  const pageSet = new Set<number>();
+                  for (let i = 0; i < 3; i++) pageSet.add(i);
+                  for (let i = totalPages - 3; i < totalPages; i++)
+                    pageSet.add(i);
+                  for (
+                    let i = Math.max(0, page - 1);
+                    i <= Math.min(totalPages - 1, page + 1);
+                    i++
+                  )
+                    pageSet.add(i);
+                  const sorted = Array.from(pageSet).sort((a, b) => a - b);
+                  for (let i = 0; i < sorted.length; i++) {
+                    if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
+                      pages.push(`ellipsis-${i}`);
+                    }
+                    pages.push(sorted[i]);
+                  }
+                }
+                return pages.map((p) =>
+                  typeof p === "string" ? (
+                    <span key={p} className="px-2 text-muted-foreground">
+                      ...
+                    </span>
+                  ) : (
+                    <Button
+                      key={p}
+                      variant={p === page ? "default" : "outline"}
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => setPage(p)}
+                    >
+                      {p + 1}
+                    </Button>
+                  ),
+                );
+              })()}
              <Button
-                size="sm"
                variant="outline"
+                size="sm"
+                onClick={() => setPage(page + 1)}
                disabled={page >= totalPages - 1}
-                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
+              <div className="flex items-center gap-1 ml-2">
+                <Input
+                  type="text"
+                  value={pageInput}
+                  onChange={(e) => setPageInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleGoToPage();
+                  }}
+                  placeholder={t("usage.pageInputPlaceholder")}
+                  className="h-8 w-16 text-center text-xs"
+                />
+                <Button variant="outline" size="sm" onClick={handleGoToPage}>
+                  {t("usage.goToPage")}
+                </Button>
+              </div>
            </div>
          </div>
        </>