@agent-platform/ui 0.0.14 → 0.0.16

package/dist/index.js

@@ -2,7 +2,7 @@ import { createContext, useRef, useEffect, useState, useMemo, useCallback, useCo
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { CaretDown, Gear, Paperclip, PaperPlaneTilt } from '@phosphor-icons/react/dist/ssr';
+import { ChevronDown, PlusCircle, Send, Wrench } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
 import ReactMarkdown from 'react-markdown';
@@ -103,10 +103,8 @@ function Button({
 function AgentHeader({
   historyLabel = "\u5C65\u6B74",
   onHistoryClick,
-  onSettingsClick,
   onNewChatClick,
   newChatLabel = "\u65B0\u898F\u30C1\u30E3\u30C3\u30C8",
-  settingsAriaLabel = "\u8A2D\u5B9A",
   isHistoryOpen = false,
   className
 }) {
@@ -127,7 +125,7 @@ function AgentHeader({
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: historyLabel }),
               /* @__PURE__ */ jsx(
-                CaretDown,
+                ChevronDown,
                 {
                   className: cn("size-4 transition-transform duration-200", isHistoryOpen && "rotate-180")
                 }
@@ -135,27 +133,9 @@ function AgentHeader({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-sm",
-              onClick: onSettingsClick,
-              "aria-label": settingsAriaLabel,
-              className: "text-foreground",
-              children: /* @__PURE__ */ jsx(Gear, { className: "size-5" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              onClick: onNewChatClick,
-              className: "bg-foreground text-background text-xs font-medium hover:bg-foreground/90",
-              children: newChatLabel
-            }
-          )
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "xs", onClick: onNewChatClick, children: [
+          /* @__PURE__ */ jsx(PlusCircle, { className: "size-4", color: "gray" }),
+          newChatLabel
         ] })
       ]
     }
@@ -328,7 +308,6 @@ function AgentInput({
   value: controlledValue,
   onChange,
   onSend,
-  onAttach,
   placeholder = "AI\u306B\u76F8\u8AC7\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
   disabled = false,
   isLoading = false,
@@ -386,19 +365,6 @@ function AgentInput({
       "data-slot": "agent-input",
       className: cn("w-full border-t border-border bg-muted px-3 pb-3 pt-2", className),
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1 p-2 rounded-lg border border-border bg-background transition-colors", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "icon-sm",
-            onClick: onAttach,
-            disabled,
-            "aria-label": "\u30D5\u30A1\u30A4\u30EB\u3092\u6DFB\u4ED8",
-            className: "mb-0.5 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4", weight: "bold" })
-          }
-        ),
         /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -420,7 +386,7 @@ function AgentInput({
             onClick: handleSend,
             disabled: !canSend,
             "aria-label": "\u9001\u4FE1 (\u2318+Enter)",
-            children: /* @__PURE__ */ jsx(PaperPlaneTilt, { className: "size-5", weight: "fill" })
+            children: /* @__PURE__ */ jsx(Send, { className: "size-5" })
           }
         )
       ] })
@@ -491,44 +457,16 @@ function Markdown({ content, className }) {
   const normalizedContent = normalizeAgentMarkdown(content);
   return /* @__PURE__ */ jsx("div", { className: cn("text-sm leading-relaxed", className), children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: normalizedContent }) });
 }
-var defaultStatusLabels = {
-  pending: "\u5F85\u6A5F\u4E2D",
-  "awaiting-approval": "\u627F\u8A8D\u5F85\u3061",
-  executing: "\u5B9F\u884C\u4E2D",
-  completed: "\u5B8C\u4E86",
-  error: "\u30A8\u30E9\u30FC"
-};
-var statusColors = {
-  pending: "bg-muted text-muted-foreground",
-  "awaiting-approval": "bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300",
-  executing: "bg-primary/10 text-primary",
-  completed: "bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400",
-  error: "bg-destructive/10 text-destructive"
-};
-function ToolCallCard({
-  toolCallState,
-  statusLabels,
-  parametersLabel = "\u30D1\u30E9\u30E1\u30FC\u30BF",
-  resultLabel = "\u7D50\u679C\u3092\u8868\u793A"
-}) {
-  const { toolCall, status, result, error } = toolCallState;
-  const toolLabel = toolCall.toolName;
-  const mergedStatusLabels = statusLabels ? { ...defaultStatusLabels, ...statusLabels } : defaultStatusLabels;
-  const statusLabel = mergedStatusLabels[status];
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-md p-1 mt-3 bg-card", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: toolLabel }),
-      status === "executing" ? /* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-spin rounded-full border border-primary border-t-transparent" }) : /* @__PURE__ */ jsx("span", { className: cn("rounded-full px-2 py-0.5 text-[11px]", statusColors[status]), children: statusLabel })
+function ToolCallGroup({ toolCallStates }) {
+  if (toolCallStates.length === 0) return null;
+  const isExecuting = toolCallStates.some((s) => s.status === "executing");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Wrench, { size: 14, strokeWidth: 1.5, className: "text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground/60", children: [
+      toolCallStates.map((s) => s.toolCall.toolName).join(", "),
+      !isExecuting && " \u3092\u5B9F\u884C\u3057\u307E\u3057\u305F"
     ] }),
-    /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: parametersLabel }),
-      /* @__PURE__ */ jsx("pre", { className: "mt-1 ml-4 overflow-x-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: JSON.stringify(toolCall.input, null, 2) })
-    ] }),
-    status === "completed" && result !== void 0 && /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: resultLabel }),
-      /* @__PURE__ */ jsx("pre", { className: "mt-1 ml-4 max-h-40 overflow-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
-    ] }),
-    status === "error" && error && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded bg-destructive/10 p-2 text-xs text-destructive", children: error })
+    isExecuting && /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 animate-spin rounded-full border border-muted-foreground/40 border-t-transparent shrink-0" })
   ] });
 }
 
@@ -539,6 +477,20 @@ function extractTextContent(content) {
 function extractToolCalls(content) {
   return content.filter((part) => part.type === "tool-call").map((part) => part.toolCall);
 }
+function extractToolResults(content) {
+  return content.filter((part) => part.type === "tool-result").map((part) => part.toolResult);
+}
+function resolveToolCallState(toolCall, pendingToolCalls, toolResults) {
+  const pending = pendingToolCalls.find((p) => p.toolCall.toolCallId === toolCall.toolCallId);
+  if (pending) return pending;
+  const matchingResult = toolResults.find((r) => r.toolCallId === toolCall.toolCallId);
+  return {
+    toolCall,
+    status: matchingResult?.isError ? "error" : "completed",
+    result: matchingResult?.result,
+    error: matchingResult?.isError ? String(matchingResult.result) : void 0
+  };
+}
 function shouldShowLoadingIndicator({
   messages,
   isLoading
@@ -553,60 +505,40 @@ function shouldShowLoadingIndicator({
 function MessageItem({ message, pendingToolCalls }) {
   const isUser = message.role === "user";
   const textContent = extractTextContent(message.content);
+  if (isUser) {
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end my-2", children: /* @__PURE__ */ jsx("div", { className: "max-w-3/4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted text-foreground px-3 py-2.5", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: textContent }) }) }) });
+  }
   const toolCalls = extractToolCalls(message.content);
-  if (!isUser && message.isStreaming && !textContent && toolCalls.length === 0) {
+  if (message.isStreaming && !textContent && toolCalls.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("flex", isUser ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsxs("div", { className: "max-w-3/4 space-y-1.5", children: [
-    textContent && /* @__PURE__ */ jsx(
-      "div",
+  if (toolCalls.length === 0 && textContent.length === 0) {
+    return null;
+  }
+  const toolResults = toolCalls.length > 0 ? extractToolResults(message.content) : [];
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    textContent.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Markdown, { content: textContent }) }),
+    toolCalls.length > 0 && /* @__PURE__ */ jsx(
+      ToolCallGroup,
       {
-        className: cn(
-          "rounded-lg px-3 py-2",
-          isUser ? "bg-muted text-foreground" : "border border-border bg-card text-card-foreground"
-        ),
-        children: isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: textContent }) : /* @__PURE__ */ jsx(Markdown, { content: textContent })
-      }
-    ),
-    !isUser && toolCalls.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-2 space-y-1.5 border-l-2 border-border pl-2", children: toolCalls.map((tc) => {
-      const toolCallState = pendingToolCalls.find(
-        (p) => p.toolCall.toolCallId === tc.toolCallId
-      );
-      if (toolCallState) {
-        return /* @__PURE__ */ jsx(
-          ToolCallCard,
-          {
-            toolCallState
-          },
-          tc.toolCallId
-        );
+        toolCallStates: toolCalls.map(
+          (tc) => resolveToolCallState(tc, pendingToolCalls, toolResults)
+        )
       }
-      return null;
-    }) })
+    )
   ] }) });
 }
-function LoadingDots() {
-  return /* @__PURE__ */ jsxs("span", { className: "flex gap-0.5", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [animation-delay:0ms]" }),
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [animation-delay:150ms]" }),
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [animation-delay:300ms]" })
-  ] });
-}
 function MessageLoading({ className }) {
-  return /* @__PURE__ */ jsx("output", { className: cn("flex justify-start", className), "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: /* @__PURE__ */ jsx("div", { className: "max-w-xl", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-card px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u8003\u3048\u4E2D" }),
-    /* @__PURE__ */ jsx(LoadingDots, {})
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxs("output", { className: cn("flex items-center gap-1.5 my-1", className), "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-spin rounded-full border border-primary border-t-transparent" }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground leading-1", children: "\u8003\u3048\u4E2D" })
+  ] });
 }
-function MessageList({
-  messages,
-  pendingToolCalls,
-  isLoading = false
-}) {
+function MessageList({ messages, pendingToolCalls, isLoading = false }) {
   const bottomRef = useRef(null);
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, isLoading]);
+  }, []);
   if (messages.length === 0 && !isLoading) {
     return null;
   }
@@ -614,15 +546,8 @@ function MessageList({
     messages,
     isLoading
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3", children: [
-    messages.map((message) => /* @__PURE__ */ jsx(
-      MessageItem,
-      {
-        message,
-        pendingToolCalls
-      },
-      message.id
-    )),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 py-5 px-4", children: [
+    messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, pendingToolCalls }, message.id)),
     showLoadingIndicator && /* @__PURE__ */ jsx(MessageLoading, {}),
     /* @__PURE__ */ jsx("div", { ref: bottomRef })
   ] });
@@ -739,7 +664,7 @@ function AgentContainerView({
     "div",
     {
       "data-slot": "agent-container",
-      className: cn("flex h-full w-full flex-col mx-auto max-w-[1120px]", className),
+      className: cn("flex h-full w-full flex-col mx-auto max-w-180", className),
       children: [
         /* @__PURE__ */ jsxs("div", { ref: historyAreaRef, className: "relative", children: [
           /* @__PURE__ */ jsx(
@@ -772,24 +697,18 @@ function AgentContainerView({
           ),
           error && /* @__PURE__ */ jsx("div", { className: "mx-4 mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600", children: error })
         ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 bg-background px-4 py-4", children: /* @__PURE__ */ jsx(AgentGreeting, {}) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "fixed bottom-0 left-0 right-0 mx-auto w-full max-w-[1120px] bg-background",
-            children: [
-              layoutState.shouldShowInput && /* @__PURE__ */ jsx(AgentInput, { ...inputProps }),
-              layoutState.shouldShowToolApprovalPanel && /* @__PURE__ */ jsx(
-                ToolApprovalPanel,
-                {
-                  activeApprovalRequest,
-                  approveToolCall,
-                  rejectToolCall,
-                  toolApprovalLabels
-                }
-              )
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "fixed bottom-0 left-0 right-0 mx-auto w-full max-w-180 bg-background", children: [
+          layoutState.shouldShowInput && /* @__PURE__ */ jsx(AgentInput, { ...inputProps }),
+          layoutState.shouldShowToolApprovalPanel && /* @__PURE__ */ jsx(
+            ToolApprovalPanel,
+            {
+              activeApprovalRequest,
+              approveToolCall,
+              rejectToolCall,
+              toolApprovalLabels
+            }
+          )
+        ] })
       ]
     }
   );

package/dist/styles/agent-ui.css

@@ -4,18 +4,9 @@
   :root, :host {
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-amber-50: oklch(98.7% 0.022 95.277);
-    --color-amber-300: oklch(87.9% 0.169 91.605);
-    --color-amber-700: oklch(55.5% 0.163 48.998);
-    --color-amber-950: oklch(27.9% 0.077 45.635);
-    --color-green-50: oklch(98.2% 0.018 155.826);
-    --color-green-400: oklch(79.2% 0.209 151.711);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --color-green-950: oklch(26.6% 0.065 152.934);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
-    --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -87,6 +78,9 @@
   .my-1\.5 {
     margin-block: calc(var(--spacing) * 1.5);
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
   .my-3 {
     margin-block: calc(var(--spacing) * 3);
   }
@@ -105,21 +99,12 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mb-0\.5 {
-    margin-bottom: calc(var(--spacing) * 0.5);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .ml-4 {
-    margin-left: calc(var(--spacing) * 4);
-  }
   .flex {
     display: flex;
   }
@@ -152,8 +137,8 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
-  .h-0\.5 {
-    height: calc(var(--spacing) * 0.5);
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
   }
   .h-3 {
     height: calc(var(--spacing) * 3);
@@ -173,9 +158,6 @@
   .h-full {
     height: 100%;
   }
-  .max-h-40 {
-    max-height: calc(var(--spacing) * 40);
-  }
   .max-h-\[60vh\] {
     max-height: 60vh;
   }
@@ -185,8 +167,8 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
-  .w-0\.5 {
-    width: calc(var(--spacing) * 0.5);
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
   }
   .w-3 {
     width: calc(var(--spacing) * 3);
@@ -197,15 +179,12 @@
   .max-w-3\/4 {
     max-width: calc(3 / 4 * 100%);
   }
-  .max-w-\[1120px\] {
-    max-width: 1120px;
+  .max-w-180 {
+    max-width: calc(var(--spacing) * 180);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xl {
-    max-width: var(--container-xl);
-  }
   .min-w-full {
     min-width: 100%;
   }
@@ -224,9 +203,6 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .resize-none {
     resize: none;
   }
@@ -260,9 +236,6 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -290,9 +263,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .overflow-auto {
-    overflow: auto;
-  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -343,6 +313,12 @@
   .border-input {
     border-color: var(--input);
   }
+  .border-muted-foreground\/40 {
+    border-color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
+    }
+  }
   .border-primary {
     border-color: var(--primary);
   }
@@ -352,9 +328,6 @@
   .border-l-primary {
     border-left-color: var(--primary);
   }
-  .bg-amber-50 {
-    background-color: var(--color-amber-50);
-  }
   .bg-background {
     background-color: var(--background);
   }
@@ -376,27 +349,9 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
-  .bg-destructive\/10 {
-    background-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
-    }
-  }
-  .bg-foreground {
-    background-color: var(--foreground);
-  }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
   .bg-muted {
     background-color: var(--muted);
   }
-  .bg-muted-foreground\/50 {
-    background-color: var(--muted-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
-    }
-  }
   .bg-muted\/50 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -415,12 +370,6 @@
       background-color: color-mix(in oklab, var(--primary) 5%, transparent);
     }
   }
-  .bg-primary\/10 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -475,6 +424,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -487,9 +439,6 @@
   .pb-\[97px\] {
     padding-bottom: 97px;
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -515,8 +464,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[11px\] {
-    font-size: 11px;
+  .leading-1 {
+    --tw-leading: calc(var(--spacing) * 1);
+    line-height: calc(var(--spacing) * 1);
   }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
@@ -547,27 +497,21 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-amber-700 {
-    color: var(--color-amber-700);
-  }
-  .text-background {
-    color: var(--background);
-  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
-  .text-destructive {
-    color: var(--destructive);
-  }
   .text-foreground {
     color: var(--foreground);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-muted-foreground\/60 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+    }
+  }
   .text-primary {
     color: var(--primary);
   }
@@ -635,15 +579,6 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .\[animation-delay\:0ms\] {
-    animation-delay: 0ms;
-  }
-  .\[animation-delay\:150ms\] {
-    animation-delay: 150ms;
-  }
-  .\[animation-delay\:300ms\] {
-    animation-delay: 300ms;
-  }
   .\[publish\:check-auth\] {
     publish: check-auth;
   }
@@ -679,16 +614,6 @@
       }
     }
   }
-  .hover\:bg-foreground\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--foreground);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
@@ -733,13 +658,6 @@
       }
     }
   }
-  .hover\:text-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--foreground);
-      }
-    }
-  }
   .hover\:text-primary\/80 {
     &:hover {
       @media (hover: hover) {
@@ -855,11 +773,6 @@
       border-color: var(--input);
     }
   }
-  .dark\:bg-amber-950 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-amber-950);
-    }
-  }
   .dark\:bg-destructive\/60 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--destructive);
@@ -868,11 +781,6 @@
       }
     }
   }
-  .dark\:bg-green-950 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-green-950);
-    }
-  }
   .dark\:bg-input\/30 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--input);
@@ -881,16 +789,6 @@
       }
     }
   }
-  .dark\:text-amber-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-amber-300);
-    }
-  }
-  .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-green-400);
-    }
-  }
   .dark\:hover\:bg-accent\/50 {
     @media (prefers-color-scheme: dark) {
       &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-platform/ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -25,7 +25,6 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -33,13 +32,13 @@
     "better-auth": "^1.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.574.0",
     "radix-ui": "^1.4.3",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/cli": "^4",
     "@types/react": "^19",
     "@types/react-dom": "^19",