diff --git a/frontend/app/src/components/v1/agent-prism/DetailsView/DetailsViewJsonOutput.tsx b/frontend/app/src/components/v1/agent-prism/DetailsView/DetailsViewJsonOutput.tsx index 4ca5995d87..ee2fd924d5 100644 --- a/frontend/app/src/components/v1/agent-prism/DetailsView/DetailsViewJsonOutput.tsx +++ b/frontend/app/src/components/v1/agent-prism/DetailsView/DetailsViewJsonOutput.tsx @@ -19,10 +19,10 @@ export const DetailsViewJsonOutput: FC = ({ className={`overflow-x-hidden rounded-xl p-4 text-left ${className}`} data={content} id={`json-pretty-${id}`} - keyStyle={`color: oklch(var(--${agentPrismPrefix}-code-key));`} - mainStyle={`color: oklch(var(--${agentPrismPrefix}-code-base)); font-size: 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;`} - stringStyle={`color: oklch(var(--${agentPrismPrefix}-code-string));`} - valueStyle={`color: oklch(var(--${agentPrismPrefix}-code-number));`} + keyStyle={`color: hsl(var(--${agentPrismPrefix}-code-key));`} + mainStyle={`color: hsl(var(--${agentPrismPrefix}-code-base)); font-size: 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;`} + stringStyle={`color: hsl(var(--${agentPrismPrefix}-code-string));`} + valueStyle={`color: hsl(var(--${agentPrismPrefix}-code-number));`} /> ); }; diff --git a/frontend/app/src/components/v1/agent-prism/theme/index.ts b/frontend/app/src/components/v1/agent-prism/theme/index.ts index b0687c31ed..04a8d53df7 100644 --- a/frontend/app/src/components/v1/agent-prism/theme/index.ts +++ b/frontend/app/src/components/v1/agent-prism/theme/index.ts @@ -95,5 +95,5 @@ export const agentPrismTailwindColors = Object.fromEntries( ) as AgentPrismColors; function token(name: string) { - return `oklch(var(--${agentPrismPrefix}-${name}) / )`; + return `hsl(var(--${agentPrismPrefix}-${name}) / )`; } diff --git a/frontend/app/src/components/v1/agent-prism/theme/theme.css b/frontend/app/src/components/v1/agent-prism/theme/theme.css index c44c3ea3ce..1530396682 100644 --- a/frontend/app/src/components/v1/agent-prism/theme/theme.css +++ b/frontend/app/src/components/v1/agent-prism/theme/theme.css @@ -1,245 +1,234 @@ +/* Bridged to the project's CSS variables. */ :root { - @media (prefers-color-scheme: light) { - /* General purpose colors */ - --agentprism-background: 1 0 0; /* white */ - --agentprism-foreground: 21% 0.034 264.665; /* gray.900 */ - --agentprism-primary: 21% 0.034 264.665; /* gray.900 */ - --agentprism-primary-foreground: 98.5% 0.002 247.839; /* gray.50 */ - --agentprism-secondary: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */ - --agentprism-muted: 98.5% 0.002 247.839; /* gray.50 */ - --agentprism-muted-foreground: 44.6% 0.03 256.802; /* gray.600 */ - --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-accent-foreground: 96.7% 0.003 264.542; /* gray.100 */ - - /* Brand colors */ - --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */ - --agentprism-brand-foreground: 1 0 0; /* white */ - --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */ - --agentprism-brand-secondary-foreground: 1 0 0; /* white */ - - /* Borders */ - --agentprism-border: 92.8% 0.006 264.531; /* gray.200 */ - --agentprism-border-subtle: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-border-strong: 87.2% 0.01 258.338; /* gray.300 */ - --agentprism-border-inverse: 21% 0.034 264.665; /* gray.900 */ - - /* Success status color */ - --agentprism-success: 69.6% 0.17 162.48; /* emerald.500 */ - --agentprism-success-muted: 97.9% 0.021 166.113; /* emerald.50 */ - --agentprism-success-muted-foreground: 50.8% 0.118 165.612; /* emerald.700 */ - - /* Error status color */ - --agentprism-error: 63.7% 0.237 25.331; /* red.500 */ - --agentprism-error-muted: 97.1% 0.013 17.38; /* red.50 */ - --agentprism-error-muted-foreground: 57.7% 0.245 27.325; /* red.600 */ - - /* Warning status color */ - --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */ - --agentprism-warning-muted: 98.7% 0.026 102.212; /* yellow.50 */ - --agentprism-warning-muted-foreground: 55.4% 0.135 66.442; /* yellow.700 */ - - /* Pending status color */ - --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */ - --agentprism-pending-muted: 94.3% 0.029 294.588; /* violet.100 */ - --agentprism-pending-muted-foreground: 54.1% 0.281 293.009; /* violet.600 */ - - /* Code syntax highlighting */ - --agentprism-code-string: 57.7% 0.245 27.325; /* red.600 */ - --agentprism-code-number: 57.7% 0.245 27.325; /* red.600 */ - --agentprism-code-key: 54.6% 0.245 262.881; /* blue.600 */ - --agentprism-code-base: 55.1% 0.027 264.364; /* gray.500 */ - - /* Generic badge colors */ - --agentprism-badge-default: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-badge-default-foreground: 44.6% 0.03 256.802; /* gray.600 */ - - /* Trace colors (llm) */ - --agentprism-avatar-llm: 62.7% 0.265 303.9; /* purple.500 */ - --agentprism-badge-llm: 97.7% 0.014 308.299; /* purple.50 */ - --agentprism-badge-llm-foreground: 62.7% 0.265 303.9; /* purple.500 */ - --agentprism-timeline-llm: 71.4% 0.203 305.504; /* purple.400 */ - - /* Trace colors (agent) */ - --agentprism-avatar-agent: 58.5% 0.233 277.117; /* indigo.500 */ - --agentprism-badge-agent: 96.2% 0.018 272.314; /* indigo.50 */ - --agentprism-badge-agent-foreground: 58.5% 0.233 277.117; /* indigo.500 */ - --agentprism-timeline-agent: 67.3% 0.182 276.935; /* indigo.400 */ - - /* Trace colors (tool) */ - --agentprism-avatar-tool: 70.5% 0.213 47.604; /* orange.500 */ - --agentprism-badge-tool: 98% 0.016 73.684; /* orange.50 */ - --agentprism-badge-tool-foreground: 70.5% 0.213 47.604; /* orange.500 */ - --agentprism-timeline-tool: 75% 0.183 55.934; /* orange.400 */ - - /* Trace colors (chain) */ - --agentprism-avatar-chain: 70.4% 0.14 182.503; /* teal.500 */ - --agentprism-badge-chain: 98.4% 0.014 180.72; /* teal.50 */ - --agentprism-badge-chain-foreground: 70.4% 0.14 182.503; /* teal.500 */ - --agentprism-timeline-chain: 77.7% 0.152 181.912; /* teal.400 */ - - /* Trace colors (retrieval) */ - --agentprism-avatar-retrieval: 71.5% 0.143 215.221; /* cyan.500 */ - --agentprism-badge-retrieval: 98.4% 0.019 200.873; /* cyan.50 */ - --agentprism-badge-retrieval-foreground: 71.5% 0.143 215.221; /* cyan.500 */ - --agentprism-timeline-retrieval: 78.9% 0.154 211.53; /* cyan.400 */ - - /* Trace colors (embedding) */ - --agentprism-avatar-embedding: 69.6% 0.17 162.48; /* emerald.500 */ - --agentprism-badge-embedding: 97.9% 0.021 166.113; /* emerald.50 */ - --agentprism-badge-embedding-foreground: 69.6% 0.17 162.48; /* emerald.500 */ - --agentprism-timeline-embedding: 76.5% 0.177 163.223; /* emerald.400 */ - - /* Trace colors (guardrail) */ - --agentprism-avatar-guardrail: 63.7% 0.237 25.331; /* red.500 */ - --agentprism-badge-guardrail: 97.1% 0.013 17.38; /* red.50 */ - --agentprism-badge-guardrail-foreground: 63.7% 0.237 25.331; /* red.500 */ - --agentprism-timeline-guardrail: 70.4% 0.191 22.216; /* red.400 */ - - /* Trace colors (create agent) */ - --agentprism-avatar-create-agent: 68.5% 0.169 237.323; /* sky.500 */ - --agentprism-badge-create-agent: 97.7% 0.013 236.62; /* sky.50 */ - --agentprism-badge-create-agent-foreground: 68.5% 0.169 237.323; /* sky.500 */ - --agentprism-timeline-create-agent: 74.6% 0.16 232.661; /* sky.400 */ - - /* Trace colors (span) */ - --agentprism-avatar-span: 71.5% 0.143 215.221; /* cyan.500 */ - --agentprism-badge-span: 98.4% 0.019 200.873; /* cyan.50 */ - --agentprism-badge-span-foreground: 71.5% 0.143 215.221; /* cyan.500 */ - --agentprism-timeline-span: 78.9% 0.154 211.53; /* cyan.400 */ - - /* Trace colors (event) */ - --agentprism-avatar-event: 69.6% 0.17 162.48; /* emerald.500 */ - --agentprism-badge-event: 97.9% 0.021 166.113; /* emerald.50 */ - --agentprism-badge-event-foreground: 69.6% 0.17 162.48; /* emerald.500 */ - --agentprism-timeline-event: 76.5% 0.177 163.223; /* emerald.400 */ - - /* Trace colors (unknown) */ - --agentprism-avatar-unknown: 55.1% 0.027 264.364; /* gray.500 */ - --agentprism-badge-unknown: 98.5% 0.002 247.839; /* gray.50 */ - --agentprism-badge-unknown-foreground: 55.1% 0.027 264.364; /* gray.500 */ - --agentprism-timeline-unknown: 70.7% 0.022 261.325; /* gray.400 */ - } - - @media (prefers-color-scheme: dark) { - /* General purpose colors */ - --agentprism-background: 13% 0.028 261.692; /* gray.950 */ - --agentprism-foreground: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-primary: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-primary-foreground: 13% 0.028 261.692; /* gray.950 */ - --agentprism-secondary: 27.8% 0.033 256.848; /* gray.800 */ - --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */ - --agentprism-muted: 21% 0.034 264.665; /* gray.900 */ - --agentprism-muted-foreground: 70.7% 0.022 261.325; /* gray.400 */ - --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */ - --agentprism-accent-foreground: 21% 0.034 264.665; /* gray.900 */ - - /* Brand colors */ - --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */ - --agentprism-brand-foreground: 1 0 0; /* white */ - --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */ - --agentprism-brand-secondary-foreground: 1 0 0; /* white */ - - /* Borders */ - --agentprism-border: 44.6% 0.03 256.802; /* gray.600 */ - --agentprism-border-subtle: 37.3% 0.034 259.733; /* gray.700 */ - --agentprism-border-strong: 55.1% 0.027 264.364; /* gray.500 */ - --agentprism-border-inverse: 92.8% 0.006 264.531; /* gray.200 */ - - /* Success status color */ - --agentprism-success: 72.3% 0.219 149.579; /* green.500 */ - --agentprism-success-muted: 26.6% 0.065 152.934; /* green.950 */ - --agentprism-success-muted-foreground: 87.1% 0.15 154.449; /* green.300 */ - - /* Error status color */ - --agentprism-error: 63.7% 0.237 25.331; /* red.500 */ - --agentprism-error-muted: 25.8% 0.092 26.042; /* red.950 */ - --agentprism-error-muted-foreground: 80.8% 0.114 19.571; /* red.300 */ - - /* Warning status color */ - --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */ - --agentprism-warning-muted: 28.6% 0.066 53.813; /* yellow.950 */ - --agentprism-warning-muted-foreground: 90.5% 0.182 98.111; /* yellow.300 */ - - /* Pending status color */ - --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */ - --agentprism-pending-muted: 28.3% 0.141 291.089; /* violet.950 */ - --agentprism-pending-muted-foreground: 70.2% 0.183 293.541; /* violet.400 */ - - /* Code syntax highlighting */ - --agentprism-code-string: 70.4% 0.191 22.216; /* red.400 */ - --agentprism-code-number: 70.4% 0.191 22.216; /* red.400 */ - --agentprism-code-key: 80.9% 0.105 251.813; /* blue.300 */ - --agentprism-code-base: 70.7% 0.022 261.325; /* gray.400 */ - - /* Generic badge colors */ - --agentprism-badge-default: 21% 0.034 264.665; /* gray.900 */ - --agentprism-badge-default-foreground: 70.7% 0.022 261.325; /* gray.400 */ - - /* Trace colors (llm) */ - --agentprism-avatar-llm: 82.7% 0.119 306.383; /* purple.300 */ - --agentprism-badge-llm: 29.1% 0.149 302.717; /* purple.950 */ - --agentprism-badge-llm-foreground: 82.7% 0.119 306.383; /* purple.300 */ - --agentprism-timeline-llm: 71.4% 0.203 305.504; /* purple.400 */ - - /* Trace colors (agent) */ - --agentprism-avatar-agent: 78.5% 0.115 274.713; /* indigo.300 */ - --agentprism-badge-agent: 25.7% 0.09 281.288; /* indigo.950 */ - --agentprism-badge-agent-foreground: 78.5% 0.115 274.713; /* indigo.300 */ - --agentprism-timeline-agent: 67.3% 0.182 276.935; /* indigo.400 */ - - /* Trace colors (tool) */ - --agentprism-avatar-tool: 83.7% 0.128 66.29; /* orange.300 */ - --agentprism-badge-tool: 26.6% 0.079 36.259; /* orange.950 */ - --agentprism-badge-tool-foreground: 83.7% 0.128 66.29; /* orange.300 */ - --agentprism-timeline-tool: 75% 0.183 55.934; /* orange.400 */ - - /* Trace colors (chain) */ - --agentprism-avatar-chain: 85.5% 0.138 181.071; /* teal.300 */ - --agentprism-badge-chain: 27.7% 0.046 192.524; /* teal.950 */ - --agentprism-badge-chain-foreground: 85.5% 0.138 181.071; /* teal.300 */ - --agentprism-timeline-chain: 77.7% 0.152 181.912; /* teal.400 */ - - /* Trace colors (retrieval) */ - --agentprism-avatar-retrieval: 86.5% 0.127 207.078; /* cyan.300 */ - --agentprism-badge-retrieval: 30.2% 0.056 229.695; /* cyan.950 */ - --agentprism-badge-retrieval-foreground: 86.5% 0.127 207.078; /* cyan.300 */ - --agentprism-timeline-retrieval: 78.9% 0.154 211.53; /* cyan.400 */ - - /* Trace colors (embedding) */ - --agentprism-avatar-embedding: 84.5% 0.143 164.978; /* emerald.300 */ - --agentprism-badge-embedding: 26.2% 0.051 172.552; /* emerald.950 */ - --agentprism-badge-embedding-foreground: 84.5% 0.143 164.978; /* emerald.300 */ - --agentprism-timeline-embedding: 76.5% 0.177 163.223; /* emerald.400 */ - - /* Trace colors (guardrail) */ - --agentprism-avatar-guardrail: 80.8% 0.114 19.571; /* red.300 */ - --agentprism-badge-guardrail: 25.8% 0.092 26.042; /* red.950 */ - --agentprism-badge-guardrail-foreground: 80.8% 0.114 19.571; /* red.300 */ - --agentprism-timeline-guardrail: 70.4% 0.191 22.216; /* red.400 */ - - /* Trace colors (create agent) */ - --agentprism-avatar-create-agent: 82.8% 0.111 230.318; /* sky.300 */ - --agentprism-badge-create-agent: 29.3% 0.066 243.157; /* sky.950 */ - --agentprism-badge-create-agent-foreground: 82.8% 0.111 230.318; /* sky.300 */ - --agentprism-timeline-create-agent: 74.6% 0.16 232.661; /* sky.400 */ - - /* Trace colors (span) */ - --agentprism-avatar-span: 86.5% 0.127 207.078; /* cyan.300 */ - --agentprism-badge-span: 30.2% 0.056 229.695; /* cyan.950 */ - --agentprism-badge-span-foreground: 86.5% 0.127 207.078; /* cyan.300 */ - --agentprism-timeline-span: 78.9% 0.154 211.53; /* cyan.400 */ - - /* Trace colors (event) */ - --agentprism-avatar-event: 84.5% 0.143 164.978; /* emerald.300 */ - --agentprism-badge-event: 26.2% 0.051 172.552; /* emerald.950 */ - --agentprism-badge-event-foreground: 84.5% 0.143 164.978; /* emerald.300 */ - --agentprism-timeline-event: 76.5% 0.177 163.223; /* emerald.400 */ - - /* Trace colors (unknown) */ - --agentprism-avatar-unknown: 87.2% 0.01 258.338; /* gray.300 */ - --agentprism-badge-unknown: 13% 0.028 261.692; /* gray.950 */ - --agentprism-badge-unknown-foreground: 87.2% 0.01 258.338; /* gray.300 */ - --agentprism-timeline-unknown: 70.7% 0.022 261.325; /* gray.400 */ - } + --agentprism-background: var(--background); + --agentprism-foreground: var(--foreground); + --agentprism-primary: var(--primary); + --agentprism-primary-foreground: var(--primary-foreground); + --agentprism-secondary: var(--secondary); + --agentprism-secondary-foreground: var(--secondary-foreground); + --agentprism-muted: var(--muted); + --agentprism-muted-foreground: var(--muted-foreground); + --agentprism-accent: var(--accent); + --agentprism-accent-foreground: var(--accent-foreground); + --agentprism-border: var(--border); +} + +/* Non-bridged colors — light theme */ +:root { + /* Brand colors */ + --agentprism-brand: 260.9 100% 65.9%; + --agentprism-brand-foreground: 0 0% 100%; + --agentprism-brand-secondary: 24.6 100% 50%; + --agentprism-brand-secondary-foreground: 0 0% 100%; + + /* Borders without project equivalents */ + --agentprism-border-subtle: 220 15% 95.9%; + --agentprism-border-strong: 216 13.1% 84%; + --agentprism-border-inverse: 221 100% 11.1%; + + /* Success status color */ + --agentprism-success: 159.7 100% 36.9%; + --agentprism-success-muted: 151.8 80.9% 95.8%; + --agentprism-success-muted-foreground: 161.8 100% 23.9%; + + /* Error status color */ + --agentprism-error: 356.9 95.9% 57.7%; + --agentprism-error-muted: 360 88.2% 97.3%; + --agentprism-error-muted-foreground: 357.2 100% 45.3%; + + /* Warning status color */ + --agentprism-warning: 44.2 100% 47.1%; + --agentprism-warning-muted: 54.5 90.6% 95.3%; + --agentprism-warning-muted-foreground: 34.4 100% 32.6%; + + /* Pending status color */ + --agentprism-pending: 260.9 100% 65.9%; + --agentprism-pending-muted: 251.4 93.5% 95.5%; + --agentprism-pending-muted-foreground: 265.5 99.1% 56.5%; + + /* Code syntax highlighting */ + --agentprism-code-string: 357.2 100% 45.3%; + --agentprism-code-number: 357.2 100% 45.3%; + --agentprism-code-key: 221.3 97.1% 53.5%; + --agentprism-code-base: 220 100% 46.3%; + + /* Generic badge colors */ + --agentprism-badge-default: 220 15% 95.9%; + --agentprism-badge-default-foreground: 215 100% 34.2%; + + /* Trace colors (llm) */ + --agentprism-avatar-llm: 273.3 100% 63.8%; + --agentprism-badge-llm: 270 98.8% 98%; + --agentprism-badge-llm-foreground: 273.3 100% 63.8%; + --agentprism-timeline-llm: 272.3 100% 74%; + + /* Trace colors (agent) */ + --agentprism-avatar-agent: 241 100% 68.6%; + --agentprism-badge-agent: 225.8 100% 96.7%; + --agentprism-badge-agent-foreground: 241 100% 68.6%; + --agentprism-timeline-agent: 235.5 100% 74.4%; + + /* Trace colors (tool) */ + --agentprism-avatar-tool: 24.6 100% 50%; + --agentprism-badge-tool: 33.8 100% 96.5%; + --agentprism-badge-tool-foreground: 24.6 100% 50%; + --agentprism-timeline-tool: 31.8 100% 50.7%; + + /* Trace colors (chain) */ + --agentprism-avatar-chain: 173.6 100% 36.7%; + --agentprism-badge-chain: 166.1 77.1% 96.7%; + --agentprism-badge-chain-foreground: 173.6 100% 36.7%; + --agentprism-timeline-chain: 173.4 100% 41.8%; + + /* Trace colors (retrieval) */ + --agentprism-avatar-retrieval: 189.5 100% 42.9%; + --agentprism-badge-retrieval: 183.2 99.9% 96.2%; + --agentprism-badge-retrieval-foreground: 189.5 100% 42.9%; + --agentprism-timeline-retrieval: 187.8 100% 47.5%; + + /* Trace colors (embedding) */ + --agentprism-avatar-embedding: 159.7 100% 36.9%; + --agentprism-badge-embedding: 151.8 80.9% 95.8%; + --agentprism-badge-embedding-foreground: 159.7 100% 36.9%; + --agentprism-timeline-embedding: 161.2 100% 41.6%; + + /* Trace colors (guardrail) */ + --agentprism-avatar-guardrail: 356.9 95.9% 57.7%; + --agentprism-badge-guardrail: 360 88.2% 97.3%; + --agentprism-badge-guardrail-foreground: 356.9 95.9% 57.7%; + --agentprism-timeline-guardrail: 358.7 100% 69.6%; + + /* Trace colors (create agent) */ + --agentprism-avatar-create-agent: 199.3 100% 47.9%; + --agentprism-badge-create-agent: 203.3 100% 97%; + --agentprism-badge-create-agent-foreground: 199.3 100% 47.9%; + --agentprism-timeline-create-agent: 195.8 100% 50%; + + /* Trace colors (span) */ + --agentprism-avatar-span: 189.5 100% 42.9%; + --agentprism-badge-span: 183.2 99.9% 96.2%; + --agentprism-badge-span-foreground: 189.5 100% 42.9%; + --agentprism-timeline-span: 187.8 100% 47.5%; + + /* Trace colors (event) */ + --agentprism-avatar-event: 159.7 100% 36.9%; + --agentprism-badge-event: 151.8 80.9% 95.8%; + --agentprism-badge-event-foreground: 159.7 100% 36.9%; + --agentprism-timeline-event: 161.2 100% 41.6%; + + /* Trace colors (unknown) */ + --agentprism-avatar-unknown: 220 100% 46.3%; + --agentprism-badge-unknown: 210 24.2% 98.1%; + --agentprism-badge-unknown-foreground: 220 100% 46.3%; + --agentprism-timeline-unknown: 217.9 11.9% 64.3%; +} + +/* Non-bridged colors — dark theme */ +.dark { + /* Brand colors */ + --agentprism-brand: 260.9 100% 65.9%; + --agentprism-brand-foreground: 0 0% 100%; + --agentprism-brand-secondary: 24.6 100% 50%; + --agentprism-brand-secondary-foreground: 0 0% 100%; + + /* Borders without project equivalents */ + --agentprism-border-subtle: 216.9 100% 26.8%; + --agentprism-border-strong: 220 100% 46.3%; + --agentprism-border-inverse: 220 13.6% 91%; + + /* Success status color */ + --agentprism-success: 144.1 100% 39.4%; + --agentprism-success-muted: 145.4 100% 9.6%; + --agentprism-success-muted-foreground: 142.7 81.2% 71.4%; + + /* Error status color */ + --agentprism-error: 356.9 95.9% 57.7%; + --agentprism-error-muted: 359.3 100% 15.3%; + --agentprism-error-muted-foreground: 359.7 100% 81.7%; + + /* Warning status color */ + --agentprism-warning: 44.2 100% 47.1%; + --agentprism-warning-muted: 26.2 100% 14%; + --agentprism-warning-muted-foreground: 51.5 100% 56.3%; + + /* Pending status color */ + --agentprism-pending: 260.9 100% 65.9%; + --agentprism-pending-muted: 262.2 100% 22.9%; + --agentprism-pending-muted-foreground: 256.9 100% 75.8%; + + /* Code syntax highlighting */ + --agentprism-code-string: 358.7 100% 69.6%; + --agentprism-code-number: 358.7 100% 69.6%; + --agentprism-code-key: 210.7 100% 77.8%; + --agentprism-code-base: 217.9 11.9% 64.3%; + + /* Generic badge colors */ + --agentprism-badge-default: 221 100% 11.1%; + --agentprism-badge-default-foreground: 217.9 11.9% 64.3%; + + /* Trace colors (llm) */ + --agentprism-avatar-llm: 271.1 100% 84.9%; + --agentprism-badge-llm: 274.3 100% 20.7%; + --agentprism-badge-llm-foreground: 271.1 100% 84.9%; + --agentprism-timeline-llm: 272.3 100% 74%; + + /* Trace colors (agent) */ + --agentprism-avatar-agent: 229.5 100% 82%; + --agentprism-badge-agent: 244.4 100% 20.2%; + --agentprism-badge-agent-foreground: 229.5 100% 82%; + --agentprism-timeline-agent: 235.5 100% 74.4%; + + /* Trace colors (tool) */ + --agentprism-avatar-tool: 31.6 100% 70.7%; + --agentprism-badge-tool: 12.9 100% 14.4%; + --agentprism-badge-tool-foreground: 31.6 100% 70.7%; + --agentprism-timeline-tool: 31.8 100% 50.7%; + + /* Trace colors (chain) */ + --agentprism-avatar-chain: 171.4 81.8% 60.2%; + --agentprism-badge-chain: 178.7 100% 9.6%; + --agentprism-badge-chain-foreground: 171.4 81.8% 60.2%; + --agentprism-timeline-chain: 173.4 100% 41.8%; + + /* Trace colors (retrieval) */ + --agentprism-avatar-retrieval: 186.7 97.5% 65.9%; + --agentprism-badge-retrieval: 196.7 100% 14.6%; + --agentprism-badge-retrieval-foreground: 186.7 97.5% 65.9%; + --agentprism-timeline-retrieval: 187.8 100% 47.5%; + + /* Trace colors (embedding) */ + --agentprism-avatar-embedding: 157.3 76.3% 64.2%; + --agentprism-badge-embedding: 165.9 100% 8.7%; + --agentprism-badge-embedding-foreground: 157.3 76.3% 64.2%; + --agentprism-timeline-embedding: 161.2 100% 41.6%; + + /* Trace colors (guardrail) */ + --agentprism-avatar-guardrail: 359.7 100% 81.7%; + --agentprism-badge-guardrail: 359.3 100% 15.3%; + --agentprism-badge-guardrail-foreground: 359.7 100% 81.7%; + --agentprism-timeline-guardrail: 358.7 100% 69.6%; + + /* Trace colors (create agent) */ + --agentprism-avatar-create-agent: 198.5 100% 72.7%; + --agentprism-badge-create-agent: 203.6 100% 15.5%; + --agentprism-badge-create-agent-foreground: 198.5 100% 72.7%; + --agentprism-timeline-create-agent: 195.8 100% 50%; + + /* Trace colors (span) */ + --agentprism-avatar-span: 186.7 97.5% 65.9%; + --agentprism-badge-span: 196.7 100% 14.6%; + --agentprism-badge-span-foreground: 186.7 97.5% 65.9%; + --agentprism-timeline-span: 187.8 100% 47.5%; + + /* Trace colors (event) */ + --agentprism-avatar-event: 157.3 76.3% 64.2%; + --agentprism-badge-event: 165.9 100% 8.7%; + --agentprism-badge-event-foreground: 157.3 76.3% 64.2%; + --agentprism-timeline-event: 161.2 100% 41.6%; + + /* Trace colors (unknown) */ + --agentprism-avatar-unknown: 216 13.1% 84%; + --agentprism-badge-unknown: 224.1 100% 4.2%; + --agentprism-badge-unknown-foreground: 216 13.1% 84%; + --agentprism-timeline-unknown: 217.9 11.9% 64.3%; } diff --git a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/observability.tsx b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/observability.tsx new file mode 100644 index 0000000000..9f8f123e24 --- /dev/null +++ b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/observability.tsx @@ -0,0 +1,57 @@ +import { Waterfall } from '../../waterfall'; +import { TabOption } from '../step-run-detail'; +import { TaskRunTrace } from './task-run-trace'; +import { Loading } from '@/components/v1/ui/loading'; +import { useSidePanel } from '@/hooks/use-side-panel'; +import api from '@/lib/api/api'; +import { useQuery } from '@tanstack/react-query'; +import { useCallback } from 'react'; + +export const Observability = ({ + taskRunId, + isRunning, +}: { + taskRunId: string; + isRunning: boolean; +}) => { + const { open } = useSidePanel(); + + const handleTaskRunExpand = useCallback( + (taskRunId: string) => { + open({ + type: 'task-run-details', + content: { + taskRunId, + defaultOpenTab: TabOption.Output, + showViewTaskRunButton: true, + }, + }); + }, + [open], + ); + + const tracesQuery = useQuery({ + queryKey: ['task:trace', taskRunId], + queryFn: async () => { + const res = await api.v1TaskGetTrace(taskRunId); + return res.data.rows || []; + }, + refetchInterval: isRunning ? 1000 : false, + }); + + if (!tracesQuery.isFetched) { + return ; + } + + if (!tracesQuery.data || tracesQuery.data.length === 0) { + return ( + + ); + } + + return ; +}; diff --git a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/otel-span-adapter.ts b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/otel-span-adapter.ts similarity index 100% rename from frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/otel-span-adapter.ts rename to frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/otel-span-adapter.ts diff --git a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/task-run-trace.tsx b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/task-run-trace.tsx similarity index 64% rename from frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/task-run-trace.tsx rename to frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/task-run-trace.tsx index 39aacd6fe4..533a747cea 100644 --- a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/task-run-trace.tsx +++ b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/task-run-trace.tsx @@ -1,37 +1,21 @@ import { convertOtelSpans } from './otel-span-adapter'; import { TreeView } from '@/components/v1/agent-prism/TreeView'; -import { Loading } from '@/components/v1/ui/loading'; -import api from '@/lib/api/api'; +import { OtelSpan } from '@/lib/api/generated/data-contracts'; import { openTelemetrySpanAdapter } from '@evilmartians/agent-prism-data'; import { flattenSpans } from '@evilmartians/agent-prism-data'; -import { useQuery } from '@tanstack/react-query'; import { useEffect, useMemo, useState } from 'react'; export function TaskRunTrace({ - taskExternalId, - isRunning, + spans, + taskRunId, }: { - taskExternalId: string; - isRunning: boolean; + spans: OtelSpan[]; + taskRunId: string; }) { - const tracesQuery = useQuery({ - queryKey: ['task:trace', taskExternalId], - queryFn: async () => { - const res = await api.v1TaskGetTrace(taskExternalId); - return res.data; - }, - refetchInterval: isRunning ? 100 : false, - }); - const traceSpans = useMemo(() => { - const rows = tracesQuery.data?.rows; - if (!rows || rows.length === 0) { - return []; - } - - const otlpSpans = convertOtelSpans(rows, taskExternalId); + const otlpSpans = convertOtelSpans(spans, taskRunId); return openTelemetrySpanAdapter.convertRawSpansToSpanTree(otlpSpans); - }, [tracesQuery.data, taskExternalId]); + }, [spans, taskRunId]); const allIds = useMemo( () => flattenSpans(traceSpans).map((s) => s.id), @@ -47,18 +31,6 @@ export function TaskRunTrace({ } }, [allIds]); - if (tracesQuery.isLoading) { - return ; - } - - if (tracesQuery.isError) { - return ( -
- Failed to load traces. -
- ); - } - if (traceSpans.length === 0) { return (
diff --git a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail.tsx b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail.tsx index 355d2e3ead..3f434c4b85 100644 --- a/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail.tsx +++ b/frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail.tsx @@ -5,10 +5,9 @@ import { useIsTaskRunSkipped } from '../../../hooks/use-is-task-run-skipped'; import { isTerminalState } from '../../../hooks/use-workflow-details'; import { TaskRunMiniMap } from '../mini-map'; import { StepRunEvents } from '../step-run-events-for-workflow-run'; -import { Waterfall } from '../waterfall'; +import { Observability } from './observability/observability'; import { V1StepRunOutput } from './step-run-output'; import { TaskRunLogs } from './task-run-logs'; -import { TaskRunTrace } from './task-run-trace'; import RelativeDate from '@/components/v1/molecules/relative-date'; import { CopyWorkflowConfigButton } from '@/components/v1/shared/copy-workflow-config'; import { Button } from '@/components/v1/ui/button'; @@ -20,7 +19,6 @@ import { TabsList, TabsTrigger, } from '@/components/v1/ui/tabs'; -import { useSidePanel } from '@/hooks/use-side-panel'; import { V1TaskStatus, V1TaskSummary, queries } from '@/lib/api'; import { emptyGolangUUID, formatDuration } from '@/lib/utils'; import { TaskRunActionButton } from '@/pages/main/v1/task-runs-v1/actions'; @@ -29,15 +27,14 @@ import { appRoutes } from '@/router'; import { useQuery } from '@tanstack/react-query'; import { Link, useParams } from '@tanstack/react-router'; import { FullscreenIcon } from 'lucide-react'; -import { useCallback, useState } from 'react'; +import { useState } from 'react'; export enum TabOption { Output = 'output', ChildWorkflowRuns = 'child-workflow-runs', Input = 'input', Logs = 'logs', - Trace = 'trace', - Waterfall = 'waterfall', + Observability = 'observability', AdditionalMetadata = 'additional-metadata', Activity = 'activity', } @@ -107,21 +104,7 @@ export const TaskRunDetail = ({ defaultOpenTab = TabOption.Output, showViewTaskRunButton, }: TaskRunDetailProps) => { - const { open } = useSidePanel(); const [logsResetKey, setLogsResetKey] = useState(0); - const handleTaskRunExpand = useCallback( - (taskRunId: string) => { - open({ - type: 'task-run-details', - content: { - taskRunId, - defaultOpenTab: TabOption.Output, - showViewTaskRunButton: true, - }, - }); - }, - [open], - ); const taskRunQuery = useQuery({ ...queries.v1Tasks.get(taskRunId), refetchInterval: (query) => { @@ -210,8 +193,8 @@ export const TaskRunDetail = ({ Overview {isStandaloneTaskRun && ( - - Waterfall + + Observability )} @@ -250,9 +233,6 @@ export const TaskRunDetail = ({ Logs - - Trace - - - - {isStandaloneTaskRun && ( - - + )} diff --git a/frontend/app/tailwind.config.js b/frontend/app/tailwind.config.js index 93f70cd30a..340b0de898 100644 --- a/frontend/app/tailwind.config.js +++ b/frontend/app/tailwind.config.js @@ -25,7 +25,7 @@ const agentPrismTokens = [ const agentPrismColors = Object.fromEntries( agentPrismTokens.map((name) => [ `agentprism-${name}`, - `oklch(var(--agentprism-${name}) / )`, + `hsl(var(--agentprism-${name}) / )`, ]) );