fix(web): 精簡 AwoooP 導航資訊架構

apps/web/src/app/[locale]/awooop/layout.tsx

@@ -2,27 +2,20 @@
 // WOOO AIOps - AwoooP Operator Console 佈局
 // =============================================================================
 // AwoooP 專屬工作殼，在 DashboardLayout main 區域內運作。
-// 2026-06-04 D0：參考 Google Ads 管理後台 IA，改為二層 section menu + scope bar + top tabs。
+// 2026-06-06 D1：全站 sidebar 作為唯一主導航，頁面內只保留 scope bar 與工具列。
 // 視覺仍維持 WOOO Open Design token、8px panel radius 與既有色彩規範。
 
 "use client";
 
 import { AppLayout } from "@/components/layout";
-import { Link, usePathname } from "@/i18n/routing";
+import { usePathname } from "@/i18n/routing";
 import {
-  Activity,
   BrainCircuit,
-  Building2,
   CalendarDays,
-  ClipboardList,
   Download,
-  FileText,
-  LayoutDashboard,
   MessageSquareText,
   RefreshCw,
-  ShieldCheck,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 
 // =============================================================================
@@ -33,44 +26,30 @@ const navItems = [
   {
     labelKey: "overview",
     href: "/awooop" as const,
-    icon: LayoutDashboard,
     exact: true,
-    groupKey: "overviewGroup",
   },
   {
     labelKey: "workItems",
     href: "/awooop/work-items" as const,
-    icon: ClipboardList,
-    groupKey: "operationsGroup",
   },
   {
     labelKey: "runs",
     href: "/awooop/runs" as const,
-    icon: Activity,
-    groupKey: "operationsGroup",
   },
   {
     labelKey: "approvals",
     href: "/awooop/approvals" as const,
-    icon: ShieldCheck,
-    groupKey: "operationsGroup",
   },
   {
     labelKey: "contracts",
     href: "/awooop/contracts" as const,
-    icon: FileText,
-    groupKey: "platformGroup",
   },
   {
     labelKey: "tenants",
     href: "/awooop/tenants" as const,
-    icon: Building2,
-    groupKey: "platformGroup",
   },
 ];
 
-const navGroups = ["overviewGroup", "operationsGroup", "platformGroup"] as const;
-
 // =============================================================================
 // AwoooP Console 佈局
 // =============================================================================
@@ -138,58 +117,7 @@ export default function AwoooPLayout({
           </div>
         </div>
 
-        <div className="grid w-full max-w-full grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)]">
-          <aside
-            className="hidden border-r border-[#e0ddd4] bg-[#faf9f3] lg:block"
-            aria-label={t("sectionMenuLabel")}
-          >
-            <div className="sticky top-[68px] max-h-[calc(100vh-68px)] overflow-y-auto px-3 py-4">
-              <div className="mb-4">
-                <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9a968b]">
-                  {t("sectionEyebrow")}
-                </p>
-                <p className="mt-1 text-sm font-semibold text-[#141413]">
-                  {t(`nav.${activeItem.labelKey}`)}
-                </p>
-              </div>
-
-              <nav className="space-y-4" role="navigation" aria-label={t("navLabel")}>
-                {navGroups.map((groupKey) => (
-                  <section key={groupKey}>
-                    <h2 className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9a968b]">
-                      {t(`groups.${groupKey}`)}
-                    </h2>
-                    <div className="space-y-1">
-                      {navItems.filter((item) => item.groupKey === groupKey).map((item) => {
-                        const Icon = item.icon;
-                        const isActive =
-                          pathname === item.href ||
-                          (!item.exact && pathname?.startsWith(item.href + "/"));
-
-                        return (
-                          <Link
-                            key={item.href}
-                            href={item.href}
-                            aria-current={isActive ? "page" : undefined}
-                            className={cn(
-                              "flex min-h-9 items-center gap-2 rounded-button px-2.5 py-2 text-sm font-medium transition-colors",
-                              isActive
-                                ? "bg-[#e7f0ff] text-[#0b57d0]"
-                                : "text-[#4b4943] hover:bg-white hover:text-[#141413]"
-                            )}
-                          >
-                            <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
-                            <span className="min-w-0 break-words">{t(`nav.${item.labelKey}`)}</span>
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  </section>
-                ))}
-              </nav>
-            </div>
-          </aside>
-
+        <div className="w-full max-w-full">
           <div className="min-w-0">
             <div className="border-b border-[#e0ddd4] bg-[#f3f1ea] px-3 pt-4 sm:px-5">
               <div className="flex flex-wrap items-center justify-between gap-3">
@@ -218,30 +146,6 @@ export default function AwoooPLayout({
                   </span>
                 </div>
               </div>
-
-              <nav className="mt-4 flex max-w-full gap-5 overflow-x-auto" aria-label={t("tabsLabel")}>
-                {navItems.map((item) => {
-                  const isActive =
-                    pathname === item.href ||
-                    (!item.exact && pathname?.startsWith(item.href + "/"));
-
-                  return (
-                    <Link
-                      key={item.href}
-                      href={item.href}
-                      aria-current={isActive ? "page" : undefined}
-                      className={cn(
-                        "shrink-0 border-b-2 px-0.5 pb-2 text-sm font-medium transition-colors",
-                        isActive
-                          ? "border-[#0b57d0] text-[#141413]"
-                          : "border-transparent text-[#77736a] hover:text-[#141413]"
-                      )}
-                    >
-                      {t(`nav.${item.labelKey}`)}
-                    </Link>
-                  );
-                })}
-              </nav>
             </div>
 
             <main className="px-3 py-4 sm:px-5 sm:py-5">{children}</main>

apps/web/src/app/[locale]/awooop/page.tsx

@@ -809,27 +809,27 @@ function SecurityMirrorPanel() {
         })}
       </div>
 
-      <div className="grid gap-4 p-4 xl:grid-cols-[1.15fr_0.85fr]">
-        <div className="border border-[#e0ddd4] bg-white">
-          <div className="border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3 text-xs font-semibold text-[#141413]">
+      <div className="grid min-w-0 gap-4 p-4 xl:grid-cols-[1.15fr_0.85fr]">
+        <div className="min-w-0 overflow-hidden border border-[#e0ddd4] bg-white">
+          <div className="break-words border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3 text-xs font-semibold text-[#141413]">
             {t("checkpointsTitle")}
           </div>
           <div className="divide-y divide-[#eee9dd]">
             {securityMirrorCheckpoints.map((checkpoint) => {
               const Icon = checkpoint.icon;
               return (
-                <div key={checkpoint.key} className="grid gap-3 px-4 py-3 md:grid-cols-[160px_1fr]">
-                  <div className="flex items-center gap-2">
+                <div key={checkpoint.key} className="grid min-w-0 gap-3 px-4 py-3 md:grid-cols-[160px_1fr]">
+                  <div className="flex min-w-0 items-center gap-2">
                     <Icon className="h-4 w-4 text-[#d97757]" aria-hidden="true" />
-                    <span className="font-mono text-xs font-semibold text-[#141413]">
+                    <span className="min-w-0 break-words font-mono text-xs font-semibold text-[#141413]">
                       {checkpoint.status}
                     </span>
                   </div>
                   <div className="min-w-0">
-                    <p className="text-sm font-semibold text-[#141413]">
+                    <p className="break-words text-sm font-semibold text-[#141413]">
                       {t(`checkpoints.${checkpoint.key}.title` as never)}
                     </p>
-                    <p className="mt-1 text-xs leading-5 text-[#5f5b52]">
+                    <p className="mt-1 break-words text-xs leading-5 text-[#5f5b52]">
                       {t(`checkpoints.${checkpoint.key}.detail` as never)}
                     </p>
                   </div>
@@ -839,11 +839,11 @@ function SecurityMirrorPanel() {
           </div>
         </div>
 
-        <div className="border border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
+        <div className="min-w-0 overflow-hidden border border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
           <p className="text-xs font-semibold text-[#77736a]">{t("boundaryLabel")}</p>
           <p className="mt-2 text-sm font-semibold text-[#141413]">{t("boundaryTitle")}</p>
-          <p className="mt-2 text-xs leading-5 text-[#5f5b52]">{t("boundaryDetail")}</p>
-          <div className="mt-4 grid gap-2 font-mono text-xs text-[#141413]">
+          <p className="mt-2 break-words text-xs leading-5 text-[#5f5b52]">{t("boundaryDetail")}</p>
+          <div className="mt-4 grid gap-2 break-all font-mono text-xs text-[#141413]">
             <span>read_only_production_landing_evidence_count=1</span>
             <span>execution_router_linked=false</span>
             <span>runtime_execution_authorized=false</span>

apps/web/src/components/layout/sidebar.tsx

@@ -30,10 +30,12 @@ import {
   Bell,
   BookOpen,
   BrainCircuit,
+  Building2,
   ChevronLeft,
   ChevronRight,
   ClipboardList,
   DollarSign,
+  FileText,
   GitBranch,
   HelpCircle,
   LayoutDashboard,
@@ -93,6 +95,8 @@ const NAV_SECTIONS: NavSection[] = [
       { id: 'awooop-work-items', href: '/awooop/work-items', labelKey: 'workItems', Icon: ClipboardList },
       { id: 'awooop-runs', href: '/awooop/runs', labelKey: 'runMonitor', Icon: Activity },
       { id: 'awooop-approvals', href: '/awooop/approvals', labelKey: 'approvalQueue', Icon: ShieldCheck, badge: true },
+      { id: 'awooop-contracts', href: '/awooop/contracts', labelKey: 'contracts', Icon: FileText },
+      { id: 'awooop-tenants', href: '/awooop/tenants', labelKey: 'tenants', Icon: Building2 },
       { id: 'alerts', href: '/alerts', labelKey: 'alerts', Icon: Bell },
     ],
   },