willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-ai/src/components/ToolCallCard/index.tsx

@@ -0,0 +1,131 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { Spinner } from "@willa-ui/content/components/Spinner";
+import classNames from "classnames";
+
+import { CardToggle, useCardCollapse } from "#ai/internal/cardCollapse";
+
+export type ToolCallCardStatus = "pending" | "running" | "success" | "error";
+
+export type ToolCallCardProps = {
+  name: ReactNode;
+  status?: ToolCallCardStatus;
+  description?: ReactNode;
+  parameters?: ReactNode;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  summary?: ReactNode;
+  onCollapsedChange?: (collapsed: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<"section">, "children" | "title">;
+
+export function ToolCallCard({
+  name,
+  status = "pending",
+  description,
+  parameters,
+  meta,
+  icon,
+  actions,
+  children,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  summary,
+  onCollapsedChange,
+  className,
+  ...props
+}: ToolCallCardProps) {
+  const hasBody = parameters || children;
+  const { canCollapse, isCollapsed, resolvedSummary, toggleCollapsed } =
+    useCardCollapse({
+      collapsible,
+      collapsed,
+      defaultCollapsed,
+      hasContent: Boolean(hasBody),
+      summary,
+      defaultSummary: "查看工具输入和执行结果",
+      onCollapsedChange,
+    });
+
+  return (
+    <section
+      {...props}
+      className={classNames(
+        "willa-tool-call-card",
+        `willa-tool-call-card--${status}`,
+        canCollapse && "willa-tool-call-card--collapsible",
+        isCollapsed && "willa-tool-call-card--collapsed",
+        className,
+      )}
+      data-status={status}
+    >
+      <span className="willa-tool-call-card-mark" aria-hidden="true">
+        {icon ?? <ToolCallStatusMark status={status} />}
+      </span>
+      <div className="willa-tool-call-card-body">
+        <div className="willa-tool-call-card-header">
+          <div className="willa-tool-call-card-title-row">
+            <span className="willa-tool-call-card-name">{name}</span>
+            <span className="willa-tool-call-card-status">
+              {toolCallStatusLabelMap[status]}
+            </span>
+          </div>
+          {meta ? (
+            <span className="willa-tool-call-card-meta">{meta}</span>
+          ) : null}
+        </div>
+        {description ? (
+          <div className="willa-tool-call-card-description">{description}</div>
+        ) : null}
+        {canCollapse ? (
+          <CardToggle
+            className="willa-tool-call-card-toggle"
+            textClassName="willa-tool-call-card-toggle-text"
+            iconClassName="willa-tool-call-card-toggle-icon"
+            summary={resolvedSummary}
+            expanded={!isCollapsed}
+            onClick={toggleCollapsed}
+          />
+        ) : null}
+        {hasBody && !isCollapsed ? (
+          <div className="willa-tool-call-card-content" role="list">
+            {parameters ? (
+              <div className="willa-tool-call-card-parameters" role="listitem">
+                {parameters}
+              </div>
+            ) : null}
+            {children ? (
+              <div className="willa-tool-call-card-result" role="listitem">
+                {children}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+        {actions ? (
+          <div className="willa-tool-call-card-actions">{actions}</div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+const ToolCallStatusMark = ({ status }: { status: ToolCallCardStatus }) => {
+  if (status === "running") {
+    return <Spinner size="xs" label="" aria-hidden="true" />;
+  }
+
+  return <span className="willa-tool-call-card-status-dot" />;
+};
+
+const toolCallStatusLabelMap: Record<ToolCallCardStatus, string> = {
+  pending: "等待中",
+  running: "执行中",
+  success: "已完成",
+  error: "失败",
+};
+
+ToolCallCard.displayName = "ToolCallCard";

package/packages/willa-ai/src/components/TraceViewer/index.css

@@ -0,0 +1,438 @@
+.willa-trace-viewer {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 1rem;
+  border: 1px solid var(--willa-trace-viewer-border);
+  border-radius: 1rem;
+  background: var(--willa-trace-viewer-bg);
+  box-shadow: var(--willa-trace-viewer-shadow);
+  color: var(--willa-trace-viewer-text);
+  font-family: var(--willa-body-font);
+  padding: 1rem;
+}
+
+.willa-trace-viewer__header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.willa-trace-viewer__heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.32rem;
+}
+
+.willa-trace-viewer__title,
+.willa-trace-viewer__detail-title {
+  margin: 0;
+  overflow: hidden;
+  color: var(--willa-trace-viewer-title);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-trace-viewer__title {
+  font-size: 1rem;
+  line-height: 1.35;
+}
+
+.willa-trace-viewer__description,
+.willa-trace-viewer__detail-description {
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.82rem;
+  line-height: 1.58;
+}
+
+.willa-trace-viewer__body {
+  display: grid;
+  min-width: 0;
+  align-items: start;
+  grid-template-columns: minmax(15rem, 0.95fr) minmax(18rem, 1.05fr);
+  gap: 0.72rem;
+}
+
+.willa-trace-viewer__list,
+.willa-trace-viewer__detail,
+.willa-trace-viewer__empty {
+  min-width: 0;
+  border: 1px solid var(--willa-trace-viewer-panel-border);
+  border-radius: 0.82rem;
+  background: var(--willa-trace-viewer-panel-bg);
+}
+
+.willa-trace-viewer__list {
+  display: grid;
+  align-self: start;
+  align-content: flex-start;
+  height: fit-content;
+  overflow: hidden;
+}
+
+.willa-trace-viewer__detail {
+  align-self: start;
+}
+
+.willa-trace-viewer__detail--empty {
+  min-height: 8rem;
+  place-items: center;
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.willa-trace-viewer__row {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  grid-template-columns: 1.2rem minmax(0, 1fr);
+  align-items: start;
+  gap: 0.32rem;
+  border-block-end: 1px solid var(--willa-trace-viewer-row-divider);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  padding-inline-start: calc(
+    0.74rem + var(--willa-trace-viewer-row-indent, 0rem)
+  );
+  transition:
+    background 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-trace-viewer__row--nested::before {
+  position: absolute;
+  inset-block: 0.5rem;
+  inset-inline-start: calc(
+    0.62rem + var(--willa-trace-viewer-row-indent, 0rem)
+  );
+  border-inline-start: 1px solid var(--willa-trace-viewer-row-divider);
+  content: "";
+}
+
+.willa-trace-viewer__row-content {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.56rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0.68rem 0.72rem 0.68rem 0.18rem;
+  text-align: start;
+  transition: color 150ms ease;
+}
+
+.willa-trace-viewer__row:last-child {
+  border-block-end: 0;
+}
+
+.willa-trace-viewer__row:hover {
+  background: var(--willa-trace-viewer-row-bg-hover);
+}
+
+.willa-trace-viewer__row:focus-within {
+  box-shadow: inset 0 0 0 2px var(--willa-trace-viewer-focus-ring);
+}
+
+.willa-trace-viewer__row-content:focus-visible,
+.willa-trace-viewer__row-toggle:focus-visible {
+  outline: none;
+}
+
+.willa-trace-viewer__row--selected {
+  background: var(--willa-trace-viewer-row-bg-active);
+  box-shadow: inset 0.18rem 0 0 var(--willa-trace-viewer-row-active-border);
+}
+
+.willa-trace-viewer__row-toggle,
+.willa-trace-viewer__row-toggle-spacer {
+  position: relative;
+  z-index: 1;
+  display: inline-grid;
+  width: 1.2rem;
+  height: 1.2rem;
+  place-items: center;
+  align-self: start;
+  margin-block-start: 0.72rem;
+}
+
+.willa-trace-viewer__row-toggle {
+  border: 0;
+  border-radius: 0.32rem;
+  background: transparent;
+  color: var(--willa-trace-viewer-muted);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background 150ms ease,
+    color 150ms ease;
+}
+
+.willa-trace-viewer__row-toggle:hover {
+  background: var(--willa-trace-viewer-chip-bg);
+  color: var(--willa-trace-viewer-title);
+}
+
+.willa-trace-viewer__row-toggle-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  transition: transform 150ms ease;
+}
+
+.willa-trace-viewer__row-toggle[aria-expanded="false"]
+  .willa-trace-viewer__row-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.willa-trace-viewer__status-dot {
+  width: 0.52rem;
+  height: 0.52rem;
+  margin-block-start: 0.36rem;
+  border-radius: 50%;
+  background: var(--willa-trace-viewer-status-color);
+  box-shadow: 0 0 0 0.22rem var(--willa-trace-viewer-status-ring);
+}
+
+.willa-trace-viewer__row--parent > .willa-trace-viewer__row-content {
+  padding-block: 0.74rem;
+}
+
+.willa-trace-viewer__row--parent .willa-trace-viewer__row-title {
+  font-weight: 720;
+}
+
+.willa-trace-viewer__row-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.18rem;
+}
+
+.willa-trace-viewer__row-title {
+  overflow: hidden;
+  color: var(--willa-trace-viewer-title);
+  font-size: 0.86rem;
+  font-weight: 650;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-trace-viewer__row-description {
+  overflow: hidden;
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.74rem;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-trace-viewer__row-meta {
+  display: inline-flex;
+  min-width: 0;
+  align-self: start;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.36rem;
+}
+
+.willa-trace-viewer__kind,
+.willa-trace-viewer__meta-value,
+.willa-trace-viewer__status {
+  display: inline-flex;
+  min-height: 1.32rem;
+  align-items: center;
+  border: 1px solid var(--willa-trace-viewer-chip-border);
+  border-radius: 0.48rem;
+  background: var(--willa-trace-viewer-chip-bg);
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.72rem;
+  font-weight: 620;
+  line-height: 1;
+  padding: 0 0.42rem;
+  white-space: nowrap;
+}
+
+.willa-trace-viewer__detail {
+  display: grid;
+  align-content: flex-start;
+  gap: 0.72rem;
+  padding: 0.8rem;
+}
+
+.willa-trace-viewer__detail-header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.72rem;
+}
+
+.willa-trace-viewer__detail-heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.32rem;
+}
+
+.willa-trace-viewer__detail-title-row {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.42rem;
+}
+
+.willa-trace-viewer__detail-title {
+  font-size: 0.96rem;
+  line-height: 1.35;
+}
+
+.willa-trace-viewer__metrics {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.44rem;
+  margin: 0;
+}
+
+.willa-trace-viewer__summary {
+  flex: none;
+  justify-content: flex-end;
+}
+
+.willa-trace-viewer__metric {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.34rem;
+  border: 1px solid var(--willa-trace-viewer-metric-border);
+  border-radius: 0.54rem;
+  background: var(--willa-trace-viewer-metric-bg);
+  padding: 0.32rem 0.48rem;
+}
+
+.willa-trace-viewer__metric dt {
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.72rem;
+  line-height: 1.2;
+}
+
+.willa-trace-viewer__metric dd {
+  margin: 0;
+  color: var(--willa-trace-viewer-title);
+  font-size: 0.78rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.willa-trace-viewer__block {
+  display: grid;
+  min-width: 0;
+  gap: 0.34rem;
+  border: 1px solid var(--willa-trace-viewer-block-border);
+  border-radius: 0.68rem;
+  background: var(--willa-trace-viewer-block-bg);
+  padding: 0.62rem;
+}
+
+.willa-trace-viewer__block--danger {
+  border-color: var(--willa-trace-viewer-error-border);
+  background: var(--willa-trace-viewer-error-bg);
+}
+
+.willa-trace-viewer__block-label {
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.willa-trace-viewer__block-value {
+  min-width: 0;
+  overflow: auto;
+  color: var(--willa-trace-viewer-text);
+  font-size: 0.78rem;
+  line-height: 1.56;
+  white-space: pre-wrap;
+}
+
+.willa-trace-viewer__empty {
+  display: grid;
+  min-height: 8rem;
+  place-items: center;
+  color: var(--willa-trace-viewer-muted);
+  font-size: 0.86rem;
+  line-height: 1.5;
+  padding: 1rem;
+}
+
+.willa-trace-viewer__row--pending,
+.willa-trace-viewer__status--pending {
+  --willa-trace-viewer-status-color: var(--willa-trace-viewer-pending);
+}
+
+.willa-trace-viewer__row--running,
+.willa-trace-viewer__status--running {
+  --willa-trace-viewer-status-color: var(--willa-trace-viewer-running);
+}
+
+.willa-trace-viewer__row--success,
+.willa-trace-viewer__status--success {
+  --willa-trace-viewer-status-color: var(--willa-trace-viewer-success);
+}
+
+.willa-trace-viewer__row--error,
+.willa-trace-viewer__status--error {
+  --willa-trace-viewer-status-color: var(--willa-trace-viewer-error);
+}
+
+.willa-trace-viewer__status {
+  color: var(--willa-trace-viewer-status-color);
+}
+
+@media (max-width: 767px) {
+  .willa-trace-viewer {
+    gap: 0.76rem;
+    border-radius: 0.9rem;
+    padding: 0.76rem;
+  }
+
+  .willa-trace-viewer__header,
+  .willa-trace-viewer__detail-header {
+    display: grid;
+  }
+
+  .willa-trace-viewer__summary {
+    justify-content: flex-start;
+  }
+
+  .willa-trace-viewer__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .willa-trace-viewer__row {
+    grid-template-columns: 1.2rem minmax(0, 1fr);
+  }
+
+  .willa-trace-viewer__row-meta {
+    grid-column: 2;
+    justify-content: flex-start;
+  }
+
+  .willa-trace-viewer__row-content {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+}