@tablestore/tablestore-agent-cli 0.1.9 → 0.2.1

package/dist/dashboard-runtime/dashboard/src/components/layout/detail-sidebar.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ArrowLeft, PanelLeftClose, PanelLeft } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { useSidebarCollapsed } from "@/hooks/use-sidebar-collapsed";
+import { useDetailSidebarCollapsed } from "@/hooks/use-detail-sidebar-collapsed";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+/**
+ * webUI-style "detail-page" secondary sidebar. Pairs with the primary
+ * application sidebar to give a master-detail layout for entity pages
+ * (knowledge bases, memory stores) that have many sub-routes and rich
+ * persistent context (description, tags, timestamps, etc.).
+ *
+ * The component is generic — consumers compose Header / Menu / Footer
+ * children to fit their entity, mirroring the way webUI's `.detail-layout`
+ * pattern is assembled around different entity types.
+ */
+export function DetailSidebar({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const { collapsed } = useDetailSidebarCollapsed();
+  // When collapsed, render nothing — the parent `DetailLayout` renders a
+  // `DetailSidebarRestoreButton` so the user can bring the sidebar back.
+  // Returning null (rather than a zero-width aside) keeps the flex math
+  // simple: the right pane just fills the row.
+  if (collapsed) return null;
+  return (
+    <aside
+      className={cn(
+        // Hidden on mobile (the primary mobile drawer already provides
+        // entity-level navigation); on desktop renders as a flex column
+        // that fills the parent shell's full height. Inside, header is
+        // auto-sized, menu fills with `flex-1 overflow-y-auto`, and the
+        // back button is anchored to the bottom — even when the menu is
+        // short or the page content is shorter than the viewport.
+        "hidden h-full w-[220px] shrink-0 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))] overflow-hidden md:flex",
+        className,
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+/**
+ * Floating "open detail sidebar" button shown in the right pane when the
+ * detail sidebar is collapsed. Anchored to the top-left of the content
+ * area so it lands roughly where the sidebar's header would have been —
+ * matching VSCode's restore-from-collapsed pattern.
+ */
+function DetailSidebarRestoreButton() {
+  const { toggle } = useDetailSidebarCollapsed();
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label="展开侧边栏"
+            onClick={toggle}
+            className="hidden md:flex absolute left-3 top-3 z-10 h-8 w-8 items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--muted-foreground))] shadow-sm transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]"
+          >
+            <PanelLeft className="h-4 w-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={6}>
+          展开侧边栏
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+const detailIconAccent = cva(
+  "flex h-9 w-9 items-center justify-center rounded-lg [&>svg]:h-[18px] [&>svg]:w-[18px]",
+  {
+    variants: {
+      accent: {
+        primary: "bg-[hsl(var(--primary-soft))] text-[hsl(var(--primary))]",
+        success: "bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
+        warning: "bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
+        danger: "bg-[hsl(var(--danger-soft))] text-[hsl(var(--danger))]",
+        purple: "bg-[hsl(var(--purple-soft))] text-[hsl(var(--purple))]",
+      },
+    },
+    defaultVariants: {
+      accent: "primary",
+    },
+  },
+);
+
+interface DetailSidebarHeaderProps
+  extends VariantProps<typeof detailIconAccent> {
+  icon: React.ReactNode;
+  name: React.ReactNode;
+  typeLabel?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  /** Tags / chips / dates / extra info. Wrapped in a flex container with
+   *  small text already applied. */
+  extra?: React.ReactNode;
+}
+
+export function DetailSidebarHeader({
+  icon,
+  accent,
+  name,
+  typeLabel,
+  description,
+  actions,
+  extra,
+}: DetailSidebarHeaderProps) {
+  const { toggle } = useDetailSidebarCollapsed();
+  return (
+    <header className="flex flex-col gap-2 border-b border-[hsl(var(--border-light))] px-4 pb-4 pt-4">
+      <div className="flex items-start justify-between gap-2">
+        <div className={detailIconAccent({ accent })}>{icon}</div>
+        {/*
+          Right-side controls: any consumer-supplied actions (delete, etc.)
+          plus a built-in "collapse sidebar" button. The collapse button is
+          baked in so every detail page gets it for free; it sits to the
+          right of consumer actions so it always lands at the far edge —
+          the visual anchor users learn to reach for.
+        */}
+        <div className="-mt-1 -mr-1 flex items-center gap-0.5">
+          {actions}
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="收起侧边栏"
+                  onClick={toggle}
+                  className="flex h-7 w-7 items-center justify-center rounded-md text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
+                >
+                  <PanelLeftClose className="h-4 w-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={6}>
+                收起侧边栏
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+      <div className="space-y-0.5">
+        <div className="text-sm font-semibold leading-tight text-[hsl(var(--foreground))]">
+          {name}
+        </div>
+        {typeLabel ? (
+          <div className="text-[11px] font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">
+            {typeLabel}
+          </div>
+        ) : null}
+      </div>
+      {description ? (
+        <p className="line-clamp-3 text-[13px] leading-snug text-[hsl(var(--muted-foreground))]">
+          {description}
+        </p>
+      ) : null}
+      {extra ? (
+        <div className="flex flex-col gap-1.5 text-[11px] text-[hsl(var(--subtle))]">
+          {extra}
+        </div>
+      ) : null}
+    </header>
+  );
+}
+
+interface DetailSidebarMenuItem {
+  /** Full URL including any search params; passed straight to next/link. */
+  href: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  /** Optional badge or count rendered on the right edge. */
+  endAdornment?: React.ReactNode;
+}
+
+export function DetailSidebarMenu({
+  items,
+  className,
+}: {
+  items: DetailSidebarMenuItem[];
+  className?: string;
+}) {
+  const pathname = usePathname() ?? "";
+  return (
+    <nav className={cn("flex-1 overflow-y-auto px-2 py-2", className)}>
+      <ul className="space-y-0.5">
+        {items.map((item) => {
+          // Strip any querystring from the href so we can match it against
+          // the bare pathname; otherwise an href like "/foo?bar=baz" never
+          // equals pathname "/foo" and the active state is missed.
+          const hrefPath = item.href.split("?")[0];
+          const active =
+            pathname === hrefPath || pathname.startsWith(`${hrefPath}/`);
+          return (
+            <li key={item.href}>
+              <Link
+                href={item.href}
+                className={cn(
+                  "flex h-8 items-center gap-2 rounded-md px-3 text-[13px] font-medium transition-colors duration-150",
+                  active
+                    ? "bg-[hsl(var(--sidebar-active-bg))] text-[hsl(var(--sidebar-active-fg))]"
+                    : "text-[hsl(var(--sidebar-text))] hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]",
+                )}
+              >
+                {item.icon ? (
+                  <span className="[&>svg]:h-4 [&>svg]:w-4">{item.icon}</span>
+                ) : null}
+                <span className="flex-1 truncate">{item.label}</span>
+                {item.endAdornment ? (
+                  <span className="ml-auto text-[11px]">
+                    {item.endAdornment}
+                  </span>
+                ) : null}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
+
+interface DetailSidebarBackProps {
+  href: string;
+  label?: React.ReactNode;
+}
+
+export function DetailSidebarBack({
+  href,
+  label = "返回列表",
+}: DetailSidebarBackProps) {
+  return (
+    <div className="border-t border-[hsl(var(--border-light))] p-3">
+      <Link
+        href={href}
+        className="flex h-8 items-center justify-center gap-1.5 rounded-md text-[13px] font-medium text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--primary))]"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        {label}
+      </Link>
+    </div>
+  );
+}
+
+/**
+ * Master-detail shell. Uses the "fixed shell, internal scroll" pattern that
+ * Slack / Linear / Notion use for chrome-heavy apps: the layout pins to
+ * the viewport with `position: fixed` so it stays exactly one viewport
+ * tall regardless of `<main>`'s padding or any sibling page content. The
+ * sidebar fills the full available height as a static column; only the
+ * right content area scrolls.
+ *
+ * The fixed positioning sidesteps the body-scroll / negative-margin math
+ * that an in-flow shell would have to do — `<main>` keeps its standard
+ * `min-h-screen + px-7 py-5`, body never overflows past the viewport, and
+ * the back button stays anchored to the bottom of the viewport even when
+ * the right pane's content is shorter than one screen.
+ *
+ * Left offset mirrors the primary sidebar's collapsed state via
+ * `useSidebarCollapsed`, keeping the master-detail row in lockstep with
+ * the rest of the application chrome.
+ */
+/**
+ * Generic full-viewport application shell. Pins to the viewport with
+ * `position: fixed`, accounts for the primary sidebar's collapse state,
+ * and reserves the mobile primary-nav bar's 56px above. Used as the
+ * foundation for any page that wants a chrome-heavy "app surface" feel
+ * — the master-detail layout, the chat homepage, etc.
+ */
+export function AppShellLayout({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { collapsed } = useSidebarCollapsed();
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-30 flex items-stretch overflow-hidden bg-[hsl(var(--background))] transition-[left] duration-200 ease-out",
+        "max-md:top-14",
+        collapsed ? "md:left-16" : "md:left-[220px]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DetailLayout({
+  sidebar,
+  children,
+}: {
+  sidebar: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const { collapsed } = useDetailSidebarCollapsed();
+  return (
+    <AppShellLayout>
+      {sidebar}
+      {/*
+        Wrap the right pane in a `relative` so the restore button can pin
+        to its top-left without scrolling away with the content. Splitting
+        the previous single `flex-1 overflow-y-auto` into a `relative` outer
+        + an inner `absolute inset-0` scroll container achieves this without
+        changing the visible layout for the expanded case.
+      */}
+      <div className="relative min-w-0 flex-1">
+        {collapsed ? <DetailSidebarRestoreButton /> : null}
+        <div className="absolute inset-0 overflow-y-auto px-7 py-5 max-md:px-4">
+          {children}
+        </div>
+      </div>
+    </AppShellLayout>
+  );
+}
+
+/**
+ * Cancels the surrounding right-pane padding so a child component can
+ * span the full height/width of the detail layout. Used by workbench-
+ * style pages (split form + workspace) that own their internal padding
+ * and scroll regions and don't want to inherit the page-level inset.
+ *
+ * The negative `-mx-7 -my-5` matches the right pane's `px-7 py-5`
+ * padding so the cancellation is exact; mobile uses px-4 / no extra
+ * vertical padding so we only cancel the horizontal axis there.
+ *
+ * `h-full` plus `overflow-hidden` forces the child to be exactly one
+ * pane tall — no body-scroll fall-back — so workbench panes can lay
+ * out flex columns with internal scroll without overflowing the shell.
+ */
+export function DetailFullBleed({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "-mx-7 -my-5 flex h-[calc(100%+2.5rem)] overflow-hidden max-md:-mx-4 max-md:my-0 max-md:h-full",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface WorkbenchLayoutProps {
+  /** Left configuration column (form / parameters). Scrolls internally. */
+  aside: React.ReactNode;
+  /** Right work surface (chat / results). Owns its own scroll. */
+  children: React.ReactNode;
+  /** Width of the aside on desktop. Defaults to 360px. */
+  asideWidth?: number;
+}
+
+/**
+ * Two-pane workbench shell for detail-page subroutes that want a fixed
+ * configuration column on the left and a full-height work surface on the
+ * right (QA test, retrieval test, memory search). On viewports below the
+ * `lg` breakpoint the configuration stacks above the workspace instead
+ * of sitting beside it.
+ *
+ * Wraps with `DetailFullBleed` so the panes go edge-to-edge — pages don't
+ * need to think about the surrounding right-pane padding.
+ */
+export function WorkbenchLayout({
+  aside,
+  children,
+  asideWidth = 360,
+}: WorkbenchLayoutProps) {
+  return (
+    <DetailFullBleed className="flex-col lg:flex-row">
+      <aside
+        style={{ ["--workbench-aside-w" as string]: `${asideWidth}px` }}
+        className={cn(
+          "shrink-0 overflow-y-auto border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-6 py-5 max-md:px-4",
+          "lg:w-[var(--workbench-aside-w)] lg:border-b-0 lg:border-r",
+        )}
+      >
+        {aside}
+      </aside>
+      <main className="flex min-h-0 min-w-0 flex-1 flex-col">
+        {children}
+      </main>
+    </DetailFullBleed>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/layout/help-link.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { HelpCircle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const HELP_URL_KB = "https://help.aliyun.com/zh/tablestore/knowledge-base-rag/";
+const HELP_URL_DEFAULT = "https://help.aliyun.com/zh/tablestore/";
+
+function resolveHelpUrl(pathname: string | null): string {
+  if (pathname?.startsWith("/knowledge-base")) return HELP_URL_KB;
+  return HELP_URL_DEFAULT;
+}
+
+interface HelpLinkProps {
+  collapsed?: boolean;
+}
+
+/**
+ * Pathname-aware help link, surfaced in the sidebar footer. Knowledge-base
+ * pages get the RAG help URL; other surfaces fall back to the general portal,
+ * preserving the routing previously hosted in the deprecated breadcrumb bar.
+ */
+export function HelpLink({ collapsed }: HelpLinkProps) {
+  const pathname = usePathname();
+  const url = resolveHelpUrl(pathname);
+
+  if (collapsed) {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        title="帮助"
+        aria-label="帮助"
+        className="flex h-8 w-8 items-center justify-center rounded-md text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
+      >
+        <HelpCircle className="h-4 w-4" />
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+      title="帮助"
+      className={cn(
+        "flex h-8 items-center gap-2 rounded-md px-3 text-sm text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]",
+      )}
+    >
+      <HelpCircle className="h-4 w-4 shrink-0" />
+      <span>帮助</span>
+    </a>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/layout/page-header.tsx

@@ -1,23 +1,142 @@
+"use client";
+
 import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ChevronRight } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const SEGMENT_LABELS: Record<string, string> = {
+  'knowledge-base': '知识库',
+  memory: '记忆库',
+  'llm-providers': '大模型',
+  projects: '项目管理',
+  documents: '文档',
+  retrieval: '检索测试',
+  qa: '问答测试',
+  search: '记忆检索',
+  units: '长期记忆',
+  messages: '短期记忆',
+  requests: '请求审计',
+  settings: '设置',
+  create: '新建',
+  new: '新建',
+  chat: '对话',
+};
+
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+function buildCrumbs(pathname: string): Crumb[] {
+  // Detail-page sub-routes are wrapped by a DetailSidebar that already
+  // surfaces entity context + a "返回列表" affordance. Suppress the
+  // automatic breadcrumb there so we don't repeat the hierarchy in two
+  // places (sidebar AND header).
+  if (
+    /^\/knowledge-base\/[^/]+(?:\/.*)?$/.test(pathname) ||
+    /^\/memory\/[^/]+(?:\/.*)?$/.test(pathname)
+  ) {
+    return [];
+  }
+
+  const parts = pathname.split('/').filter(Boolean);
+  if (parts.length === 0) return [];
+
+  const crumbs: Crumb[] = [];
+  let acc = '';
+  parts.forEach((raw, index) => {
+    acc += `/${raw}`;
+    const decoded = decodeURIComponent(raw);
+    const label = SEGMENT_LABELS[decoded] ?? decoded;
+    crumbs.push({
+      label,
+      href: index < parts.length - 1 ? acc : undefined,
+    });
+  });
+  return crumbs;
+}
 
 interface PageHeaderProps {
-  title: string;
-  description?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Hide the auto-derived breadcrumb above the title. */
+  hideBreadcrumb?: boolean;
+  /** Action buttons rendered on the right side. */
   children?: ReactNode;
+  className?: string;
 }
 
-export function PageHeader({ title, description, children }: PageHeaderProps) {
+/**
+ * Page-level header with a webUI-flavoured layout: small breadcrumb on top,
+ * 20px h1 with optional description on the next line, optional action slot
+ * on the right. Replaces the old separate BreadcrumbBar — by deriving the
+ * crumbs from `usePathname()` we keep the same surface the dashboard had
+ * while merging it into the page-header position webUI uses.
+ */
+export function PageHeader({
+  title,
+  description,
+  hideBreadcrumb,
+  children,
+  className,
+}: PageHeaderProps) {
+  const pathname = usePathname() ?? '/';
+  const crumbs = hideBreadcrumb ? [] : buildCrumbs(pathname);
+
   return (
-    <div className="flex items-start justify-between gap-4">
-      <div className="space-y-1">
-        <h1 className="text-[32px] font-semibold leading-tight text-foreground">
-          {title}
-        </h1>
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
+    <div className={cn('mb-5 flex flex-col gap-2', className)}>
+      {crumbs.length > 1 && (
+        <nav
+          aria-label="面包屑"
+          className="flex items-center gap-1 text-[13px] text-[hsl(var(--muted-foreground))]"
+        >
+          <Link
+            href="/"
+            className="transition-colors hover:text-[hsl(var(--foreground))]"
+          >
+            主页
+          </Link>
+          {crumbs.map((crumb, index) => (
+            <span
+              key={`${crumb.label}-${index}`}
+              className="flex items-center gap-1"
+            >
+              <ChevronRight className="h-3 w-3 opacity-60" />
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className="transition-colors hover:text-[hsl(var(--foreground))]"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="font-medium text-[hsl(var(--foreground))]">
+                  {crumb.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </nav>
+      )}
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-xl font-semibold leading-tight text-[hsl(var(--foreground))]">
+            {title}
+          </h1>
+          {description && (
+            <p className="text-[13px] text-[hsl(var(--muted-foreground))]">
+              {description}
+            </p>
+          )}
+        </div>
+        {children && (
+          <div className="flex shrink-0 items-center gap-2">{children}</div>
         )}
       </div>
-      {children && <div className="flex items-center gap-2">{children}</div>}
     </div>
   );
 }