Polish task center and autopilot transition

Author: 2686521696

client/src/App.shell-layout.test.tsx

@@ -147,4 +147,18 @@ describe("AppShell fixed sidebar layout", () => {
     expect(shell).toContain("--sidebar-width:0px");
     expect(shell).toContain("padding-left:0");
   });
+
+  it("does not keep the task sidebar offset when the home URL has query or hash state", () => {
+    locationState.current = "/?from=tasks#autopilot";
+    viewportState.isMobile = false;
+    viewportState.isTablet = false;
+
+    const markup = renderToStaticMarkup(<AppShell />);
+    const shell = markup.match(/<div class="min-h-screen[^>]*>/)?.[0] ?? "";
+
+    expect(markup).not.toContain('data-testid="app-sidebar"');
+    expect(shell).toContain("--sidebar-width:0px");
+    expect(shell).toContain("padding-left:0");
+    expect(shell).not.toContain("transition-[padding-left]");
+  });
 });

client/src/App.tsx

@@ -107,6 +107,11 @@ function RecoveryGuard() {
   );
 }
 
+function isHomeLocation(location: string) {
+  const [pathname] = location.trim().split(/[?#]/, 1);
+  return pathname === "" || pathname === "/";
+}
+
 export function AppShell() {
   const { isMobile, isTablet } = useViewportTier();
   const [location] = useLocation();
@@ -117,24 +122,29 @@ export function AppShell() {
   }, [isTablet]);
 
   const sidebarWidth = isMobile ? 0 : sidebarCollapsed ? 64 : 248;
+  const isHome = isHomeLocation(location);
 
   return (
     <>
       <RecoveryGuard />
 
-      {!isMobile && location !== "/" && (
+      {!isMobile && !isHome && (
         <AppSidebar
           collapsed={sidebarCollapsed}
           onToggleCollapse={() => setSidebarCollapsed(current => !current)}
         />
       )}
 
       <div
-        className="min-h-screen transition-[padding-left] duration-[250ms] ease-in-out"
+        className={
+          isHome
+            ? "min-h-screen"
+            : "min-h-screen transition-[padding-left] duration-[250ms] ease-in-out"
+        }
         style={
           {
-            "--sidebar-width": `${location === "/" ? 0 : sidebarWidth}px`,
-            paddingLeft: location === "/" ? 0 : sidebarWidth,
+            "--sidebar-width": `${isHome ? 0 : sidebarWidth}px`,
+            paddingLeft: isHome ? 0 : sidebarWidth,
           } as React.CSSProperties
         }
       >

client/src/components/AppSidebar.tsx

@@ -20,11 +20,17 @@ type SidebarTone = "light" | "glass";
 function SidebarHeader({
   collapsed,
   tone,
+  locale,
 }: {
   collapsed: boolean;
   tone: SidebarTone;
+  locale: string;
 }) {
   const glass = tone === "glass";
+  const subtitle =
+    locale === "zh-CN"
+      ? "办公空间协同决策智能体平台"
+      : "Collaborative agent office platform";
 
   return (
     <div
@@ -44,7 +50,7 @@ function SidebarHeader({
         <span className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(125,211,252,0.42),transparent_42%),linear-gradient(135deg,rgba(255,255,255,0.96),rgba(224,242,254,0.46))]" />
         <span className="relative">CP</span>
       </span>
-      {!collapsed && (
+      {!collapsed ? (
         <span className="min-w-0">
           <span
             className={cn(
@@ -55,10 +61,10 @@ function SidebarHeader({
             Cube Pets Office
           </span>
           <span className="mt-1.5 block truncate text-[11px] font-semibold leading-none text-slate-500">
-            办公室已成为桌面运转的伙伴
+            {subtitle}
           </span>
         </span>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -122,13 +128,13 @@ function SidebarNavItem({
       >
         <Icon className="size-[17px] shrink-0" />
       </span>
-      {!collapsed && <span className="truncate">{label}</span>}
-      {active && (
+      {!collapsed ? <span className="truncate">{label}</span> : null}
+      {active ? (
         <>
           <span className="absolute left-0 top-1/2 h-7 w-1 -translate-y-1/2 rounded-r-full bg-sky-400 shadow-[0_0_18px_rgba(56,189,248,0.68)]" />
           <span className="pointer-events-none absolute inset-y-2 right-2 w-12 rounded-full bg-[radial-gradient(circle,rgba(125,211,252,0.22),transparent_68%)]" />
         </>
-      )}
+      ) : null}
     </button>
   );
 
@@ -139,11 +145,11 @@ function SidebarNavItem({
           <TooltipTrigger asChild>{content}</TooltipTrigger>
           <TooltipContent side="right" sideOffset={8}>
             {label}
-            {isDisabled && (
+            {isDisabled ? (
               <span className="ml-1 text-xs opacity-60">
                 ({comingSoonLabel})
               </span>
-            )}
+            ) : null}
           </TooltipContent>
         </Tooltip>
       </li>
@@ -156,11 +162,14 @@ function SidebarNavItem({
 function SidebarUserBlock({
   collapsed,
   tone,
+  locale,
 }: {
   collapsed: boolean;
   tone: SidebarTone;
+  locale: string;
 }) {
   const glass = tone === "glass";
+  const modeLabel = locale === "zh-CN" ? "高级模式" : "Advanced mode";
 
   return (
     <div
@@ -185,16 +194,16 @@ function SidebarUserBlock({
       >
         MC
       </div>
-      {!collapsed && (
+      {!collapsed ? (
         <span className="min-w-0">
           <span className="block truncate text-sm font-bold text-slate-800">
             Mission Control
           </span>
           <span className="mt-0.5 block truncate text-[11px] font-medium text-slate-500">
-            高级模式
+            {modeLabel}
           </span>
         </span>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -233,21 +242,22 @@ export function AppSidebar({
   embedded = false,
 }: AppSidebarProps) {
   const [location, setLocation] = useLocation();
-  const { copy } = useI18n();
+  const { locale, copy } = useI18n();
   const activeId = getActiveSidebarId(location);
-  const sidebarCopy = copy.sidebar;
   const sidebarTone: SidebarTone = embedded ? "glass" : "light";
+  const isZh = locale === "zh-CN";
+  const sidebarCopy = copy.sidebar;
 
   const labelMap: Record<string, string> = {
-    autopilot: sidebarCopy.autopilot,
-    tasks: sidebarCopy.tasks,
-    projects: sidebarCopy.projects,
-    knowledge: sidebarCopy.knowledge,
-    datasource: sidebarCopy.datasource,
-    dashboard: sidebarCopy.dashboard,
-    marketplace: sidebarCopy.marketplace,
-    notifications: sidebarCopy.notifications,
-    settings: sidebarCopy.settings,
+    autopilot: isZh ? "自动驾驶" : sidebarCopy.autopilot,
+    tasks: isZh ? "任务中心" : sidebarCopy.tasks,
+    projects: isZh ? "项目空间" : sidebarCopy.projects,
+    knowledge: isZh ? "知识库" : sidebarCopy.knowledge,
+    datasource: isZh ? "数据源" : sidebarCopy.datasource,
+    dashboard: isZh ? "数据看板" : sidebarCopy.dashboard,
+    marketplace: isZh ? "智能体市场" : sidebarCopy.marketplace,
+    notifications: isZh ? "通知中心" : sidebarCopy.notifications,
+    settings: isZh ? "设置与集成" : sidebarCopy.settings,
   };
 
   return (
@@ -272,7 +282,11 @@ export function AppSidebar({
         color: "#1e293b",
       }}
     >
-      <SidebarHeader collapsed={collapsed} tone={sidebarTone} />
+      <SidebarHeader
+        collapsed={collapsed}
+        tone={sidebarTone}
+        locale={locale}
+      />
 
       <nav
         className={cn(
@@ -281,9 +295,9 @@ export function AppSidebar({
         )}
         aria-label="Main navigation"
       >
-        {!collapsed && (
+        {!collapsed ? (
           <span className="pointer-events-none absolute bottom-8 left-[31px] top-5 w-px bg-gradient-to-b from-transparent via-sky-100/80 to-transparent" />
-        )}
+        ) : null}
         <ul role="list" className="relative flex flex-col gap-2.5">
           {SIDEBAR_NAV_ITEMS.map(item => (
             <SidebarNavItem
@@ -319,9 +333,13 @@ export function AppSidebar({
 
       <SidebarStatusBlock collapsed={collapsed} tone={sidebarTone} />
 
-      <SidebarUserBlock collapsed={collapsed} tone={sidebarTone} />
+      <SidebarUserBlock
+        collapsed={collapsed}
+        tone={sidebarTone}
+        locale={locale}
+      />
 
-      {!collapsed && <SidebarTaskStats tone={sidebarTone} />}
+      {!collapsed ? <SidebarTaskStats tone={sidebarTone} /> : null}
     </aside>
   );
 }

client/src/components/Scene3D.tsx

@@ -163,7 +163,7 @@ export function Scene3D({
   return (
     <div
       ref={containerRef}
-      className="absolute inset-0 z-0 h-full w-full touch-pan-y"
+      className="absolute inset-0 z-0 h-full w-full touch-pan-y bg-[linear-gradient(180deg,#eef6fb_0%,#f7fbfd_48%,#e5f1f4_100%)]"
       style={{ visibility: hidden ? "hidden" : "visible" }}
     >
       <Canvas

client/src/components/launch/LaunchRuntimeMeta.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
-import { Loader2, Monitor, Paperclip, Send, Server } from "lucide-react";
+import { Loader2, Monitor, Paperclip, Server } from "lucide-react";
 
-import { GlowButton } from "@/components/ui/GlowButton";
 import { Button } from "@/components/ui/button";
 import type { RuntimeMode } from "@/lib/store";
 import { cn } from "@/lib/utils";
@@ -35,9 +34,6 @@ export function LaunchRuntimeMeta({
   maxAttachments,
   onPickFiles,
   operatorActionRail,
-  onSubmit,
-  submitLabel,
-  submitDisabled = false,
 }: {
   locale: string;
   runtimeMode: RuntimeMode;
@@ -46,16 +42,13 @@ export function LaunchRuntimeMeta({
   maxAttachments?: number;
   onPickFiles?: () => void;
   operatorActionRail?: ReactNode;
-  onSubmit?: () => void;
-  submitLabel?: string;
-  submitDisabled?: boolean;
 }) {
   const hasSharedActionRail = Boolean(operatorActionRail);
 
   return (
     <div
       className={cn(
-        "mt-1.5 flex gap-1.5 text-xs text-stone-500",
+        "mt-3 flex gap-2 text-xs text-slate-500",
         hasSharedActionRail
           ? "flex-wrap items-end"
           : "overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
@@ -71,7 +64,7 @@ export function LaunchRuntimeMeta({
           <Button
             type="button"
             variant="outline"
-            className="h-7 rounded-full px-2.5 text-[11px] whitespace-nowrap"
+            className="h-8 rounded-full border-slate-200/80 bg-white/74 px-3 text-[11px] font-semibold text-slate-600 shadow-none whitespace-nowrap hover:bg-white hover:text-slate-900"
             disabled={
               isPreparingFiles ||
               (typeof maxAttachments === "number" &&
@@ -88,7 +81,7 @@ export function LaunchRuntimeMeta({
           </Button>
         ) : null}
 
-        <span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-stone-50 px-2 py-0.75 whitespace-nowrap">
+        <span className="inline-flex h-8 items-center gap-1.5 rounded-full border border-slate-200/80 bg-white/62 px-3 text-[11px] font-semibold text-slate-600 whitespace-nowrap">
           {runtimeMode === "advanced" ? (
             <Server className="size-3.5" />
           ) : (
@@ -98,7 +91,7 @@ export function LaunchRuntimeMeta({
         </span>
 
         {attachmentCount > 0 ? (
-          <span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-stone-50 px-2 py-0.75 whitespace-nowrap">
+          <span className="inline-flex h-8 items-center gap-1 rounded-full border border-slate-200/80 bg-white/62 px-3 text-[11px] font-semibold text-slate-600 whitespace-nowrap">
             {getLaunchAttachmentCountLabel(locale, attachmentCount)}
           </span>
         ) : null}
@@ -113,18 +106,6 @@ export function LaunchRuntimeMeta({
         )}
       >
         {operatorActionRail}
-
-        {!hasSharedActionRail && onSubmit && submitLabel ? (
-          <GlowButton
-            type="button"
-            disabled={submitDisabled}
-            className="h-7 shrink-0 rounded-full px-2.5 text-[11px] font-semibold shadow-[0_10px_24px_rgba(94,139,114,0.18)]"
-            onClick={onSubmit}
-          >
-            <Send className="size-3.5" />
-            {submitLabel}
-          </GlowButton>
-        ) : null}
       </div>
     </div>
   );