Collapse system info card by default

apps/web/src/components/SettingsPane.tsx

@@ -68,9 +68,9 @@ export const SettingsPane = ({
           />
           <AdvancedPlayCard />
           <EvernoteImportGuideCard onShowGuide={onShowGuide} />
-          <SystemInfoCard />
           <McpConfigCard />
           <SessionCard authRequired={authRequired} isLoggingOut={isLoggingOut} onLogout={onLogout} />
+          <SystemInfoCard />
         </div>
       </div>
     </div>

apps/web/src/components/settings/SystemInfoCard.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useState } from "react";
-import { Copy, Info } from "lucide-react";
+import { ChevronDown, Copy, Info } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { copyTextToClipboard } from "./settings-utils";
 
 type SystemInfoItem = {
@@ -54,6 +55,7 @@ const detectOperatingSystem = (userAgent: string, platform: string) => {
 export const SystemInfoCard = () => {
   const { t, i18n } = useTranslation();
   const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   const infoItems = useMemo<SystemInfoItem[]>(() => {
     const language = navigator.language || i18n.language;
@@ -97,8 +99,13 @@ export const SystemInfoCard = () => {
   return (
     <Card className="w-full min-w-0 overflow-hidden shadow-none">
       <CardHeader className="p-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="min-w-0">
+        <button
+          className="flex w-full min-w-0 items-start justify-between gap-3 text-left"
+          type="button"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((current) => !current)}
+        >
+          <span className="min-w-0">
             <CardTitle className="flex items-center gap-2 text-sm">
               <Info className="h-4 w-4 text-emerald-700" />
               {t("systemInfo.title")}
@@ -106,32 +113,44 @@ export const SystemInfoCard = () => {
             <CardDescription className="mt-1 text-xs leading-4">
               {t("systemInfo.description")}
             </CardDescription>
-          </div>
-          <Button
-            size="sm"
-            variant="outline"
-            className="h-8 w-full bg-white px-3 text-xs sm:w-auto"
-            type="button"
-            onClick={() => void handleCopy()}
-          >
-            <Copy className="h-3.5 w-3.5" />
-            {copied ? t("common.copied") : t("systemInfo.copy")}
-          </Button>
-        </div>
+          </span>
+          <ChevronDown
+            className={cn(
+              "mt-0.5 h-4 w-4 shrink-0 text-slate-400 transition-transform",
+              expanded ? "rotate-180" : "rotate-0"
+            )}
+          />
+        </button>
       </CardHeader>
-      <CardContent className="grid gap-2 p-4 pt-0 sm:grid-cols-2">
-        {infoItems.map((item) => (
-          <div
-            key={item.label}
-            className="min-w-0 rounded-lg border border-slate-200 bg-white px-3 py-2.5"
-          >
-            <div className="text-[11px] font-semibold uppercase text-slate-400">{item.label}</div>
-            <div className="mt-1 truncate font-mono text-xs font-semibold text-slate-800" title={item.value}>
-              {item.value}
-            </div>
+      {expanded && (
+        <CardContent className="grid gap-3 p-4 pt-0">
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-8 w-full bg-white px-3 text-xs sm:w-auto"
+              type="button"
+              onClick={() => void handleCopy()}
+            >
+              <Copy className="h-3.5 w-3.5" />
+              {copied ? t("common.copied") : t("systemInfo.copy")}
+            </Button>
           </div>
-        ))}
-      </CardContent>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {infoItems.map((item) => (
+              <div
+                key={item.label}
+                className="min-w-0 rounded-lg border border-slate-200 bg-white px-3 py-2.5"
+              >
+                <div className="text-[11px] font-semibold uppercase text-slate-400">{item.label}</div>
+                <div className="mt-1 truncate font-mono text-xs font-semibold text-slate-800" title={item.value}>
+                  {item.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      )}
     </Card>
   );
 };