@inkeep/agents-manage-ui 0.31.4 → 0.31.6

package/src/components/agent/ship/node-js-guide.tsx

@@ -0,0 +1,67 @@
+import { useParams } from 'next/navigation';
+import { Streamdown } from 'streamdown';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { DocsLink, Header } from './guide-header';
+
+export function NodeJsGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const apiUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`;
+  const { agentId } = useParams();
+
+  return (
+    <div>
+      <Header.Container>
+        <Header.Title title="Node.js Backend" />
+        <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/chat-api`} />
+      </Header.Container>
+      <Streamdown>
+        {`Example Next.js API route (\`app/api/chat/route.ts\`):
+
+\`\`\`typescript
+export async function POST(req: Request) {
+  const { messages, conversationId } = await req.json();
+
+  const response = await fetch('${apiUrl}', {
+    method: 'POST',
+    headers: {
+      'Authorization': \`Bearer \${process.env.INKEEP_AGENT_API_KEY}\`,
+      'Content-Type': 'application/json',
+      'x-emit-operations': 'true',
+    },
+    body: JSON.stringify({
+      messages,
+      conversationId,
+    }),
+  });
+
+  return new Response(response.body, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}
+\`\`\`
+
+Example response (Server-Sent Events stream):
+
+\`\`\`bash
+data: {"type":"data-operation","data":{"type":"agent_initializing","details":{"sessionId":"chatds-12345678910111","agentId":"${agentId}"}}}
+
+data: {"type":"text-start","id":"1234567891011-abcdefghi"}
+
+data: {"type":"text-delta","id":"1234567891011-abcdefghi","delta":"I answer"}
+
+data: {"type":"text-delta","id":"1234567891011-abcdefghi","delta":" technical questions"}
+
+data: {"type":"text-end","id":"1234567891011-abcdefghi"}
+
+data: [DONE]
+\`\`\`
+`}
+      </Streamdown>
+    </div>
+  );
+}

package/src/components/agent/ship/sdk-guide.tsx

@@ -0,0 +1,102 @@
+import { Streamdown } from 'streamdown';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { DocsLink, Header } from './guide-header';
+
+export function SdkGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const apiUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`;
+
+  return (
+    <div>
+      <Header.Container>
+        <Header.Title title="Vercel SDK" />
+        <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/vercel-ai-sdk/use-chat`} />
+      </Header.Container>
+      <Streamdown>
+        {`Install the package:
+
+\`\`\`bash
+npm install ai @ai-sdk/react
+\`\`\`
+
+Example Next.js implementation using Vercel AI SDK:
+
+\`\`\`tsx
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState } from "react";
+
+export default function Page() {
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: "${apiUrl}",
+      headers: {
+        Authorization: "Bearer INKEEP_AGENT_API_KEY",
+      },
+    }),
+  });
+  const [input, setInput] = useState("");
+
+  return (
+    <div className="max-w-2xl mx-auto p-4">
+      <div className="space-y-4 mb-4">
+        {messages.map((message) => (
+          <div key={message.id} className="border rounded p-3">
+            <div className="font-semibold mb-2">
+              {message.role === "user" ? "👤 User" : "🤖 Assistant"}
+            </div>
+
+            <div className="space-y-2">
+              {message.parts.map((part, partIndex) => {
+                const partKey = \`\${message.id}-\${part.type}-\${partIndex}\`;
+
+                if (part.type === "text") {
+                  return (
+                    <div key={partKey} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                
+                return null;
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (input.trim()) {
+            sendMessage({ text: input });
+            setInput("");
+          }
+        }}
+        className="flex gap-2"
+      >
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type your message..."
+          className="flex-1 p-2 border rounded"
+        />
+        <button
+          type="submit"
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+\`\`\`
+`}
+      </Streamdown>
+    </div>
+  );
+}

package/src/components/agent/ship/ship-modal.tsx

@@ -0,0 +1,143 @@
+import {
+  Hexagon,
+  Key,
+  type LucideProps,
+  MessagesSquare,
+  RocketIcon,
+  SquareTerminal,
+  X,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import type { ComponentType } from 'react';
+import { MCPIcon } from '@/components/icons/mcp-icon';
+import { VercelIcon } from '@/components/icons/vercel';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ApiGuide } from './api-guide';
+import { ChatUIGuide } from './chat-ui-guide/chat-ui-guide';
+import { McpGuide } from './mcp-guide/mcp-guide';
+import { NodeJsGuide } from './node-js-guide';
+import { SdkGuide } from './sdk-guide';
+
+const TAB_VALUES = {
+  CHAT_UI: 'chat-ui',
+  MCP_SERVER: 'mcp-server',
+  SDK: 'sdk',
+  NODE_JS: 'node-js',
+  API: 'api',
+} as const;
+
+type TabValue = (typeof TAB_VALUES)[keyof typeof TAB_VALUES];
+
+type TabItem = {
+  label: string;
+  value: TabValue;
+  IconComponent?: React.ComponentType<LucideProps>;
+};
+
+const shipModalTabComponents: Record<TabValue, ComponentType> = {
+  [TAB_VALUES.CHAT_UI]: ChatUIGuide,
+  [TAB_VALUES.MCP_SERVER]: McpGuide,
+  [TAB_VALUES.SDK]: SdkGuide,
+  [TAB_VALUES.NODE_JS]: NodeJsGuide,
+  [TAB_VALUES.API]: ApiGuide,
+};
+
+const shipModalTabItems: TabItem[] = [
+  {
+    label: 'Chat UI',
+    value: TAB_VALUES.CHAT_UI,
+    IconComponent: MessagesSquare,
+  },
+  {
+    label: 'MCP Server',
+    value: TAB_VALUES.MCP_SERVER,
+    IconComponent: MCPIcon,
+  },
+  {
+    label: 'Vercel SDK',
+    value: TAB_VALUES.SDK,
+    IconComponent: VercelIcon,
+  },
+  {
+    label: 'Node JS',
+    value: TAB_VALUES.NODE_JS,
+    IconComponent: Hexagon,
+  },
+  {
+    label: 'REST API',
+    value: TAB_VALUES.API,
+    IconComponent: SquareTerminal,
+  },
+];
+
+export function ShipModal() {
+  const params = useParams();
+  const { tenantId, projectId } = params;
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <RocketIcon className="size-4" />
+          Ship
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-full! w-7xl" position="top" showCloseButton={false}>
+        <DialogHeader>
+          <div className="flex items-center justify-between w-full gap-2">
+            <DialogTitle>Talk to your agent</DialogTitle>
+            <div className="flex items-center gap-2">
+              <Button asChild variant="outline" size="sm">
+                <Link
+                  href={`/${tenantId}/projects/${projectId}/api-keys`}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  <Key className="size-4" />
+                  Create API key
+                </Link>
+              </Button>
+              <DialogClose asChild>
+                <Button variant="ghost" className="size-8">
+                  <X className="size-4 text-muted-foreground" />
+                  <span className="sr-only">Close</span>
+                </Button>
+              </DialogClose>
+            </div>
+          </div>
+          <DialogDescription className="sr-only">Talk to your agent.</DialogDescription>
+        </DialogHeader>
+        <Tabs defaultValue={TAB_VALUES.CHAT_UI} className="min-w-0">
+          <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-4">
+            {shipModalTabItems.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                variant="underline"
+                value={tab.value}
+                className="text-sm gap-2"
+              >
+                {tab.IconComponent && <tab.IconComponent className="size-4" />}
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {Object.entries(shipModalTabComponents).map(([value, Component]) => (
+            <TabsContent key={value} value={value} className="py-4">
+              <Component />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/agent/ship/utils.ts

@@ -0,0 +1,25 @@
+export const replaceTemplatePlaceholders = (
+  template: string,
+  replacements: Record<string, string>
+): string => {
+  let result = template;
+  for (const [key, value] of Object.entries(replacements)) {
+    result = result.replace(new RegExp(`{{${key}}}`, 'g'), value);
+  }
+  return result;
+};
+
+export function toCamelCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase())
+    .replace(/^[^a-zA-Z]+/, '');
+}
+
+export const indentJson = (json: string, spaces: number): string => {
+  const indent = ' '.repeat(spaces);
+  return json
+    .split('\n')
+    .map((line, index) => (index === 0 ? line : `${indent}${line}`))
+    .join('\n');
+};

package/src/components/agent/toolbar/toolbar.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { isMacOs } from '@/lib/utils';
+import { ShipModal } from '../ship/ship-modal';
 
 interface ToolbarProps {
   onSubmit: () => void;
@@ -55,6 +56,7 @@ export function Toolbar({
 
   return (
     <div className="flex gap-2 flex-wrap justify-end content-start">
+      {!inPreviewDisabled && <ShipModal />}
       {dirty || inPreviewDisabled ? (
         <Tooltip>
           <TooltipTrigger asChild>

package/src/components/data-components/render/component-render-generator.tsx

@@ -16,15 +16,6 @@ import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
-const StyledTabsTrigger = (props: React.ComponentProps<typeof TabsTrigger>) => {
-  return (
-    <TabsTrigger
-      {...props}
-      className="bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2"
-    />
-  );
-};
-
 interface ComponentPreviewGeneratorProps {
   tenantId: string;
   projectId: string;
@@ -306,9 +297,15 @@ export function ComponentRenderGenerator({
         <Card className="px-2 py-4 pt-0">
           <Tabs defaultValue="render" className="w-full">
             <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-2">
-              <StyledTabsTrigger value="render">Render</StyledTabsTrigger>
-              <StyledTabsTrigger value="code">Code</StyledTabsTrigger>
-              <StyledTabsTrigger value="data">Sample Data</StyledTabsTrigger>
+              <TabsTrigger variant="underline" value="render">
+                Render
+              </TabsTrigger>
+              <TabsTrigger variant="underline" value="code">
+                Code
+              </TabsTrigger>
+              <TabsTrigger variant="underline" value="data">
+                Sample Data
+              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="render">

package/src/components/form/json-schema-builder.tsx

@@ -107,12 +107,15 @@ const Property: FC<PropertyProps> = ({ fieldId, depth = 0, prefix }) => {
         <>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Checkbox
-                checked={Boolean(field.isRequired)}
-                onCheckedChange={(checked) =>
-                  updateField(field.id, { isRequired: checked === true })
-                }
-              />
+              {/* without the wrapping div the checkbox doesn't get the data-state="checked" attribute and the styles are not applied */}
+              <div>
+                <Checkbox
+                  checked={Boolean(field.isRequired)}
+                  onCheckedChange={(checked) =>
+                    updateField(field.id, { isRequired: checked === true })
+                  }
+                />
+              </div>
             </TooltipTrigger>
             <TooltipContent>Mark this field as required</TooltipContent>
           </Tooltip>
@@ -180,7 +183,7 @@ const Property: FC<PropertyProps> = ({ fieldId, depth = 0, prefix }) => {
           <Button
             type="button"
             onClick={() => addChild(field.id)}
-            variant="secondary"
+            variant="link"
             size="sm"
             className="self-start text-xs"
             style={{ marginLeft: indentStyle + 24 + (prefix ? 82 : 0) }}
@@ -248,7 +251,7 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
     <>
       <Table>
         <TableHeader>
-          <TableRow>
+          <TableRow noHover>
             <TableHead className="w-[15%] text-center">Type</TableHead>
             <TableHead className="w-[42%] text-center">Name</TableHead>
             <TableHead className="text-center">Description</TableHead>
@@ -262,7 +265,7 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
       <Button
         type="button"
         onClick={() => addChild()}
-        variant="secondary"
+        variant="link"
         size="sm"
         className="self-start text-xs"
       >

package/src/components/form/json-schema-input.tsx

@@ -55,7 +55,7 @@ export function JsonSchemaInput<T extends FieldValues>({
             ) : (
               <JsonSchemaBuilder value={value} onChange={field.onChange} />
             )}
-            <span className="absolute flex items-center end-0 top-0 gap-2 text-sm">
+            <span className="absolute flex items-center end-0 -top-[2.5px] gap-2 text-sm font-medium">
               JSON
               <Switch checked={isJsonSchemaModeChecked} onCheckedChange={setJsonSchemaMode} />
             </span>

package/src/components/icons/claude.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const ClaudeIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Claude icon</title>
+    <g clipPath="url(#clip0_23_202)">
+      <path
+        d="M4.704 15.96L9.432 13.32L9.504 13.08L9.432 12.96H9.192L8.4 12.912L5.712 12.84L3.36 12.72L1.08 12.6L0.504 12.48L0 11.76L0.048 11.4L0.528 11.088L1.224 11.136L2.736 11.256L5.016 11.4L6.672 11.496L9.12 11.784H9.504L9.552 11.616L9.432 11.52L9.336 11.424L6.96 9.84L4.416 8.16L3.072 7.176L2.352 6.696L1.992 6.216L1.848 5.208L2.496 4.488L3.384 4.56L3.6 4.608L4.488 5.304L6.408 6.768L8.88 8.64L9.24 8.928L9.384 8.832L9.408 8.76L9.24 8.496L7.92 6L6.48 3.504L5.832 2.472L5.664 1.848C5.592 1.608 5.568 1.368 5.568 1.128L6.288 0.12L6.72 0L7.728 0.144L8.112 0.48L8.736 1.92L9.72 4.152L11.28 7.176L11.76 8.088L12 8.904L12.072 9.144H12.24V9.024L12.36 7.296L12.6 5.208L12.84 2.52L12.912 1.752L13.296 0.84L14.016 0.36L14.64 0.624L15.12 1.32L15.048 1.752L14.784 3.6L14.16 6.504L13.8 8.472H14.016L14.256 8.208L15.24 6.912L16.896 4.848L17.616 4.008L18.48 3.12L19.032 2.688H20.064L20.808 3.816L20.472 4.992L19.416 6.336L18.528 7.464L17.256 9.168L16.488 10.536L16.56 10.632H16.728L19.608 10.008L21.144 9.744L22.968 9.432L23.808 9.816L23.904 10.2L23.568 11.016L21.6 11.496L19.296 11.976L15.864 12.768L15.816 12.792L15.864 12.864L17.4 13.008L18.072 13.056H19.704L22.728 13.296L23.52 13.776L23.976 14.424L23.904 14.904L22.68 15.528L21.048 15.144L17.208 14.232L15.912 13.92H15.72V14.016L16.824 15.096L18.816 16.896L21.36 19.224L21.48 19.8L21.168 20.28L20.832 20.232L18.624 18.552L17.76 17.832L15.84 16.2H15.72V16.368L16.152 17.016L18.504 20.544L18.624 21.624L18.456 21.96L17.832 22.2L17.184 22.056L15.792 20.136L14.352 17.976L13.224 16.008L13.104 16.104L12.408 23.352L12.096 23.712L11.376 24L10.776 23.52L10.44 22.8L10.776 21.312L11.16 19.392L11.472 17.856L11.76 15.96L11.928 15.336V15.288H11.76L10.32 17.28L8.16 20.232L6.432 22.056L6.024 22.224L5.304 21.864L5.376 21.192L5.76 20.64L8.16 17.568L9.6 15.672L10.56 14.568L10.536 14.448H10.464L4.128 18.576L3 18.72L2.52 18.24L2.568 17.52L2.808 17.28L4.728 15.96H4.704Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_23_202">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+));
+
+ClaudeIcon.displayName = 'ClaudeIcon';

package/src/components/icons/cursor.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const CursorIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Cursor icon</title>
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M22.1323 5.6806L12.5245 0.133623C12.216 -0.0445409 11.8353 -0.0445409 11.5268 0.133623L1.91947 5.6806C1.66012 5.83035 1.5 6.10727 1.5 6.40723V17.5928C1.5 17.8923 1.66012 18.1697 1.91947 18.3194L11.5272 23.8664C11.8358 24.0445 12.2164 24.0445 12.525 23.8664L22.1327 18.3194C22.3921 18.1697 22.5522 17.8927 22.5522 17.5928V6.40723C22.5522 6.10774 22.3921 5.83035 22.1327 5.6806H22.1323ZM21.5288 6.85558L12.2539 22.9201C12.1912 23.0283 12.0257 22.9841 12.0257 22.8587V12.3399C12.0257 12.1297 11.9133 11.9353 11.7311 11.8297L2.62176 6.57052C2.51351 6.50784 2.55771 6.34227 2.6831 6.34227H21.2329C21.4963 6.34227 21.6609 6.6278 21.5292 6.85605H21.5288V6.85558Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));
+
+CursorIcon.displayName = 'CursorIcon';

package/src/components/icons/vercel.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const VercelIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Vercel icon</title>
+    <g clipPath="url(#clip0_24_207)">
+      <path d="M11.9573 1.5L23.9146 22.2109H0L11.9573 1.5Z" fill="currentColor" />
+    </g>
+    <defs></defs>
+  </SvgIcon>
+));
+
+VercelIcon.displayName = 'VercelIcon';

package/src/components/icons/vs-code.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const VSCodeIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>VS Code icon</title>
+    <g clipPath="url(#clip0_22_190)">
+      <path
+        d="M18.0011 0.957249C18.0011 0.203854 17.1576 0.203846 16.7827 0.29802C17.3075 -0.116349 17.9231 -0.0158829 18.1417 0.10968L23.2103 2.59498C23.6933 2.83179 23.9996 3.32452 23.9996 3.86449V20.2141C23.9996 20.7613 23.6851 21.2593 23.1923 21.4923L18.4229 23.7475C18.0948 23.8887 17.3825 24.2372 16.7827 23.7474C17.5325 23.8888 17.9387 23.3551 18.0011 22.9941V0.957249Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.8439 0.285044C17.2418 0.206418 18.0016 0.242881 18.0016 0.957858V6.58559L2.63451 18.2108C2.3659 18.4141 1.98789 18.3803 1.75911 18.1327L0.175313 16.419C-0.0728021 16.1505 -0.0554421 15.7302 0.213964 15.4834L16.783 0.29863L16.8439 0.285044Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0016 17.461L2.63451 5.83572C2.3659 5.63251 1.98789 5.66623 1.75911 5.91379L0.175313 7.62757C-0.0728021 7.89602 -0.0554421 8.31628 0.213964 8.56322L16.783 23.7479C17.5329 23.8892 17.9391 23.3555 18.0016 22.9945V17.461Z"
+        fill="currentColor"
+      />
+    </g>
+  </SvgIcon>
+));
+
+VSCodeIcon.displayName = 'VSCodeIcon';

package/src/components/icons/windsurf.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const WindsurfIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Windsurf icon</title>
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M23.7787 5.00376H23.55C22.3463 5.00188 21.3695 5.97669 21.3695 7.18024V12.0478C21.3695 13.0198 20.566 13.8072 19.6098 13.8072C19.0417 13.8072 18.4746 13.5213 18.138 13.0414L13.1667 5.94109C12.7542 5.35149 12.083 5 11.3564 5C10.223 5 9.20307 5.96357 9.20307 7.15308V12.0488C9.20307 13.0208 8.40623 13.8081 7.44346 13.8081C6.87349 13.8081 6.30724 13.5222 5.97068 13.0424L0.407794 5.09655C0.28217 4.91657 0 5.00564 0 5.22498V9.47015C0 9.68481 0.0656303 9.89291 0.188421 10.0691L5.66319 17.8874C5.98663 18.3495 6.46382 18.6926 7.01408 18.8173C8.39123 19.1303 9.65869 18.0702 9.65869 16.7195V11.8266C9.65869 10.8546 10.4462 10.0672 11.4183 10.0672H11.4211C12.007 10.0672 12.5564 10.3531 12.8929 10.833L17.8652 17.9324C18.2787 18.523 18.9152 18.8735 19.6745 18.8735C20.8332 18.8735 21.826 17.909 21.826 16.7204V11.8257C21.826 10.8537 22.6135 10.0663 23.5856 10.0663H23.7797C23.9015 10.0663 24 9.96787 24 9.84604V5.22402C24 5.10219 23.9015 5.00376 23.7797 5.00376H23.7787Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));
+
+WindsurfIcon.displayName = 'WindsurfIcon';

package/src/components/traces/timeline/hierarchical-timeline.tsx

@@ -44,7 +44,7 @@ function TreeNodeItem({
           className="absolute left-0 top-0 border-l border-border"
           style={{
             left: node.depth > 0 ? `${(node.depth - 1) * indentSize + 7}px` : '7px',
-            bottom: '-16px',
+            bottom: '-19px',
           }}
         />
       )}
@@ -55,11 +55,11 @@ function TreeNodeItem({
             width: `${node.depth * indentSize}px`,
             minWidth: `${node.depth * indentSize}px`,
           }}
-          className="relative flex-shrink-0"
+          className="relative shrink-0"
         >
           {node.depth > 0 && (
             <div
-              className="absolute top-[16px] border-t border-border"
+              className="absolute top-[19px] border-t border-border"
               style={{
                 left: `${(node.depth - 1) * indentSize + 7}px`,
                 width: `${indentSize - 7}px`,

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,47 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover';
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ColorPickerInputProps {
+  color: string;
+  setColor: (color: string) => void;
+  placeholder: string;
+}
+
+export function ColorPickerInput({ placeholder, color, setColor }: ColorPickerInputProps) {
+  return (
+    <div className="relative flex items-center flex-row max-w-full">
+      <div className="absolute left-3 text-sm text-muted-foreground">#</div>
+      <HexColorInput
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:bg-muted',
+          'pl-7 pr-12'
+        )}
+        color={color}
+        onChange={setColor}
+        placeholder={placeholder}
+      />
+      <div className="z-10 absolute right-3">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              aria-label="color picker"
+              className="flex flex-row gap-2 rounded w-6 h-6"
+              size="sm"
+              variant="ghost"
+              style={{ background: color }}
+            >
+              <span className="sr-only">Color picker</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-row w-fit p-2">
+            <HexColorPicker color={color} onChange={setColor} />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}