@sentry/junior-dashboard 0.61.0 → 0.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.d.ts +1 -0
- package/dist/app.js +44 -37
- package/dist/assets.d.ts +2 -0
- package/dist/client/api.d.ts +1 -1
- package/dist/client/components/Metric.d.ts +22 -0
- package/dist/client/components/TelemetryMetrics.d.ts +24 -0
- package/dist/client/components/TranscriptText.d.ts +1 -0
- package/dist/client/components/transcriptRenderModel.d.ts +24 -8
- package/dist/client/format.d.ts +65 -13
- package/dist/client/toolInvocations.d.ts +7 -0
- package/dist/client/types.d.ts +17 -100
- package/dist/client.js +59 -55992
- package/dist/handler.js +44 -37
- package/dist/index.d.ts +8 -0
- package/dist/index.js +564 -0
- package/dist/nitro.d.ts +6 -1
- package/dist/tailwind.css +1 -1
- package/dist/url.d.ts +13 -0
- package/package.json +8 -5
- package/src/app.ts +24 -16
- package/src/assets.ts +2 -0
- package/src/auth.ts +2 -35
- package/src/client/components/ConversationRowStats.tsx +3 -2
- package/src/client/components/Metric.tsx +159 -0
- package/src/client/components/TelemetryMetrics.tsx +124 -0
- package/src/client/components/ToolFrame.tsx +3 -3
- package/src/client/components/TranscriptText.tsx +5 -2
- package/src/client/components/TranscriptToolView.tsx +9 -7
- package/src/client/components/TranscriptTurn.tsx +435 -84
- package/src/client/components/TurnDurationChart.tsx +229 -78
- package/src/client/components/transcriptRenderModel.ts +66 -22
- package/src/client/format.ts +369 -103
- package/src/client/pages/ConversationPage.tsx +77 -38
- package/src/client/toolInvocations.ts +16 -0
- package/src/client/types.ts +34 -90
- package/src/index.ts +74 -0
- package/src/nitro.ts +6 -1
- package/src/url.ts +68 -0
package/dist/nitro.d.ts
CHANGED
|
@@ -8,7 +8,12 @@ export interface JuniorDashboardNitroOptions {
|
|
|
8
8
|
sessionMaxAgeSeconds?: number;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
}
|
|
11
|
-
/**
|
|
11
|
+
/**
|
|
12
|
+
* Mount the authenticated Junior dashboard into a Nitro deployment.
|
|
13
|
+
*
|
|
14
|
+
* @deprecated Register `juniorDashboardPlugin()` in `createApp({ plugins })`;
|
|
15
|
+
* this helper remains for existing Nitro apps.
|
|
16
|
+
*/
|
|
12
17
|
export declare function juniorDashboardNitro(options: JuniorDashboardNitroOptions): {
|
|
13
18
|
nitro: {
|
|
14
19
|
setup(nitro: unknown): void;
|
package/dist/tailwind.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-3xl:48rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-\[1\]{z-index:1}.col-span-full{grid-column:1/-1}.m-0{margin:calc(var(--spacing) * 0)}.my-4{margin-block:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.max-h-\[60vh\]{max-height:60vh}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-28{min-height:calc(var(--spacing) * 28)}.min-h-48{min-height:calc(var(--spacing) * 48)}.min-h-\[4\.5rem\]{min-height:4.5rem}.min-h-\[calc\(100vh-5rem\)\]{min-height:calc(100vh - 5rem)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-64{min-width:calc(var(--spacing) * 64)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.basis-1\/2{flex-basis:50%}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-\[0\.875rem_minmax\(0\,1fr\)\]{grid-template-columns:.875rem minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)_auto\]{grid-template-columns:auto minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_minmax\(12rem\,max-content\)\]{grid-template-columns:minmax(0,1fr) minmax(12rem,max-content)}.grid-cols-\[minmax\(13rem\,1\.7fr\)_minmax\(13rem\,1fr\)\]{grid-template-columns:minmax(13rem,1.7fr) minmax(13rem,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-items-end{justify-items:end}.gap-0{gap:calc(var(--spacing) * 0)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-x-1{column-gap:calc(var(--spacing) * 1)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:calc(var(--spacing) * 1)}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-\[\#beaaff\]\/15{border-color:oklab(78.6663% .0494663 -.109708/.15)}.border-\[\#beaaff\]\/20{border-color:oklab(78.6663% .0494663 -.109708/.2)}.border-\[\#beaaff\]\/70{border-color:oklab(78.6663% .0494663 -.109708/.7)}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400\/25{border-color:#fcbb0040}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/25{border-color:color-mix(in oklab, var(--color-amber-400) 25%, transparent)}}.border-emerald-300{border-color:var(--color-emerald-300)}.border-emerald-400\/25{border-color:#00d29440}@supports (color:color-mix(in lab, red, red)){.border-emerald-400\/25{border-color:color-mix(in oklab, var(--color-emerald-400) 25%, transparent)}}.border-rose-300{border-color:var(--color-rose-300)}.border-rose-400{border-color:var(--color-rose-400)}.border-rose-400\/25{border-color:#ff667f40}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/25{border-color:color-mix(in oklab, var(--color-rose-400) 25%, transparent)}}.border-rose-400\/50{border-color:#ff667f80}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/50{border-color:color-mix(in oklab, var(--color-rose-400) 50%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.border-b-\[\#beaaff\]{border-bottom-color:#beaaff}.border-b-transparent{border-bottom-color:#0000}.border-b-white\/10{border-bottom-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-b-white\/10{border-bottom-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-l-\[\#888\]{border-left-color:#888}.border-l-\[\#beaaff\]\/60{border-left-color:oklab(78.6663% .0494663 -.109708/.6)}.border-l-amber-300{border-left-color:var(--color-amber-300)}.border-l-amber-400{border-left-color:var(--color-amber-400)}.border-l-emerald-400{border-left-color:var(--color-emerald-400)}.border-l-rose-400{border-left-color:var(--color-rose-400)}.border-l-violet-300{border-left-color:var(--color-violet-300)}.border-l-white{border-left-color:var(--color-white)}.border-l-white\/25{border-left-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.border-l-white\/25{border-left-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.border-l-white\/35{border-left-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.border-l-white\/35{border-left-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.border-l-white\/70{border-left-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.border-l-white\/70{border-left-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-\[\#0b0b0b\]{background-color:#0b0b0b}.bg-\[\#111\]{background-color:#111}.bg-\[\#050505\]{background-color:#050505}.bg-\[\#050505\]\/95{background-color:oklab(11.4918% 7.45058e-9 7.45058e-9/.95)}.bg-\[\#b8b8b8\]{background-color:#b8b8b8}.bg-\[\#beaaff\]\/20{background-color:oklab(78.6663% .0494663 -.109708/.2)}.bg-\[\#beaaff\]\/50{background-color:oklab(78.6663% .0494663 -.109708/.5)}.bg-\[rgba\(190\,170\,255\,0\.08\)\]{background-color:#beaaff14}.bg-amber-300{background-color:var(--color-amber-300)}.bg-amber-300\/\[0\.06\]{background-color:#ffd2360f}@supports (color:color-mix(in lab, red, red)){.bg-amber-300\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-amber-300) 6%, transparent)}}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-400\/10{background-color:#fcbb001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/10{background-color:color-mix(in oklab, var(--color-amber-400) 10%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-emerald-300{background-color:var(--color-emerald-300)}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-rose-300{background-color:var(--color-rose-300)}.bg-rose-400{background-color:var(--color-rose-400)}.bg-rose-400\/10{background-color:#ff667f1a}@supports (color:color-mix(in lab, red, red)){.bg-rose-400\/10{background-color:color-mix(in oklab, var(--color-rose-400) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/35{background-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.bg-white\/35{background-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.p-0{padding:calc(var(--spacing) * 0)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.76rem\]{font-size:.76rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.84rem\]{font-size:.84rem}.text-\[0\.86rem\]{font-size:.86rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[1\.04rem\]{font-size:1.04rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.75rem\]{font-size:1.75rem}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#666\]{color:#666}.text-\[\#777\]{color:#777}.text-\[\#888\]{color:#888}.text-\[\#b8b8b8\]{color:#b8b8b8}.text-\[\#d6d6d6\]{color:#d6d6d6}.text-\[\#d8ccff\]{color:#d8ccff}.text-\[\#f4f4f4\]{color:#f4f4f4}.text-amber-200{color:var(--color-amber-200)}.text-amber-300{color:var(--color-amber-300)}.text-black{color:var(--color-black)}.text-emerald-300{color:var(--color-emerald-300)}.text-inherit{color:inherit}.text-rose-300{color:var(--color-rose-300)}.text-violet-200{color:var(--color-violet-200)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-white{-webkit-text-decoration-color:var(--color-white);-webkit-text-decoration-color:var(--color-white);text-decoration-color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.\[color-scheme\:dark\]{color-scheme:dark}.saturate-50{--tw-saturate:saturate(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[filter\,stroke\,stroke-width\]{transition-property:filter,stroke,stroke-width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[\#beaaff\]\/45:hover{border-color:oklab(78.6663% .0494663 -.109708/.45)}.hover\:border-white:hover{border-color:var(--color-white)}.hover\:border-white\/25:hover{border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/25:hover{border-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.hover\:border-white\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/30:hover{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:border-b-white\/45:hover{border-bottom-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.hover\:border-b-white\/45:hover{border-bottom-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.hover\:bg-\[\#151515\]:hover{background-color:#151515}.hover\:bg-\[rgba\(190\,170\,255\,0\.06\)\]:hover{background-color:#beaaff0f}.hover\:bg-\[rgba\(190\,170\,255\,0\.07\)\]:hover{background-color:#beaaff12}.hover\:bg-white\/\[0\.04\]:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.04\]:hover{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.hover\:bg-white\/\[0\.05\]:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.05\]:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus-visible\:stroke-emerald-400:focus-visible{stroke:var(--color-emerald-400)}.focus-visible\:stroke-2:focus-visible{stroke-width:2px}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:w-full{width:100%}.max-md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-md\:flex-col{flex-direction:column}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:items-stretch{align-items:stretch}.max-md\:justify-between{justify-content:space-between}.max-md\:justify-items-start{justify-items:start}.max-md\:gap-1{gap:calc(var(--spacing) * 1)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:py-4{padding-block:calc(var(--spacing) * 4)}.max-md\:text-left{text-align:left}}@media (min-width:40rem){.sm\:basis-1\/3{flex-basis:33.3333%}}@media (min-width:48rem){.md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.md\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:text-right{text-align:right}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media (min-width:64rem){.lg\:grid-cols-\[minmax\(21rem\,0\.32fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(21rem,.32fr) minmax(0,1fr)}}.\[\&_code\]\:break-words code{overflow-wrap:break-word}.\[\&_code\]\:whitespace-pre-wrap code{white-space:pre-wrap}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:\!overflow-visible pre{overflow:visible!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:font-mono pre{font-family:var(--font-mono)}.\[\&_pre\]\:text-\[0\.86rem\] pre{font-size:.86rem}.\[\&_pre\]\:leading-relaxed pre{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_pre\]\:break-words pre{overflow-wrap:break-word}.\[\&_pre\]\:whitespace-pre-wrap pre{white-space:pre-wrap}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-3xl:48rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-30{z-index:30}.z-\[1\]{z-index:1}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.m-0{margin:calc(var(--spacing) * 0)}.my-4{margin-block:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-px{height:1px}.max-h-72{max-height:calc(var(--spacing) * 72)}.max-h-\[60vh\]{max-height:60vh}.min-h-6{min-height:calc(var(--spacing) * 6)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-28{min-height:calc(var(--spacing) * 28)}.min-h-48{min-height:calc(var(--spacing) * 48)}.min-h-\[4\.5rem\]{min-height:4.5rem}.min-h-\[calc\(100vh-5rem\)\]{min-height:calc(100vh - 5rem)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-4{min-width:calc(var(--spacing) * 4)}.min-w-64{min-width:calc(var(--spacing) * 64)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.basis-1\/2{flex-basis:50%}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-\[0\.875rem_minmax\(0\,1fr\)\]{grid-template-columns:.875rem minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)_auto\]{grid-template-columns:auto minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_minmax\(12rem\,max-content\)\]{grid-template-columns:minmax(0,1fr) minmax(12rem,max-content)}.grid-cols-\[minmax\(13rem\,1\.7fr\)_minmax\(13rem\,1fr\)\]{grid-template-columns:minmax(13rem,1.7fr) minmax(13rem,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-items-end{justify-items:end}.gap-0{gap:calc(var(--spacing) * 0)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-x-1{column-gap:calc(var(--spacing) * 1)}.gap-x-1\.5{column-gap:calc(var(--spacing) * 1.5)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:calc(var(--spacing) * 1)}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-\[\#b59cff\]{border-color:#b59cff}.border-\[\#beaaff\]\/20{border-color:oklab(78.6663% .0494663 -.109708/.2)}.border-\[\#beaaff\]\/70{border-color:oklab(78.6663% .0494663 -.109708/.7)}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400\/25{border-color:#fcbb0040}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/25{border-color:color-mix(in oklab, var(--color-amber-400) 25%, transparent)}}.border-emerald-300{border-color:var(--color-emerald-300)}.border-emerald-400\/25{border-color:#00d29440}@supports (color:color-mix(in lab, red, red)){.border-emerald-400\/25{border-color:color-mix(in oklab, var(--color-emerald-400) 25%, transparent)}}.border-rose-300{border-color:var(--color-rose-300)}.border-rose-400{border-color:var(--color-rose-400)}.border-rose-400\/25{border-color:#ff667f40}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/25{border-color:color-mix(in oklab, var(--color-rose-400) 25%, transparent)}}.border-rose-400\/50{border-color:#ff667f80}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/50{border-color:color-mix(in oklab, var(--color-rose-400) 50%, transparent)}}.border-transparent{border-color:#0000}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.border-b-\[\#beaaff\]{border-bottom-color:#beaaff}.border-b-transparent{border-bottom-color:#0000}.border-b-white\/10{border-bottom-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-b-white\/10{border-bottom-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-l-\[\#888\]{border-left-color:#888}.border-l-\[\#beaaff\]\/60{border-left-color:oklab(78.6663% .0494663 -.109708/.6)}.border-l-amber-300{border-left-color:var(--color-amber-300)}.border-l-amber-400{border-left-color:var(--color-amber-400)}.border-l-emerald-400{border-left-color:var(--color-emerald-400)}.border-l-rose-400{border-left-color:var(--color-rose-400)}.border-l-violet-300{border-left-color:var(--color-violet-300)}.border-l-white{border-left-color:var(--color-white)}.border-l-white\/25{border-left-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.border-l-white\/25{border-left-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.border-l-white\/35{border-left-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.border-l-white\/35{border-left-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.border-l-white\/70{border-left-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.border-l-white\/70{border-left-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-\[\#0b0b0b\]{background-color:#0b0b0b}.bg-\[\#111\]{background-color:#111}.bg-\[\#050505\]{background-color:#050505}.bg-\[\#050505\]\/95{background-color:oklab(11.4918% 7.45058e-9 7.45058e-9/.95)}.bg-\[\#b8b8b8\]{background-color:#b8b8b8}.bg-\[\#beaaff\]\/20{background-color:oklab(78.6663% .0494663 -.109708/.2)}.bg-\[\#beaaff\]\/50{background-color:oklab(78.6663% .0494663 -.109708/.5)}.bg-\[rgba\(190\,170\,255\,0\.08\)\]{background-color:#beaaff14}.bg-amber-300{background-color:var(--color-amber-300)}.bg-amber-300\/\[0\.06\]{background-color:#ffd2360f}@supports (color:color-mix(in lab, red, red)){.bg-amber-300\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-amber-300) 6%, transparent)}}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-400\/10{background-color:#fcbb001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/10{background-color:color-mix(in oklab, var(--color-amber-400) 10%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-emerald-300{background-color:var(--color-emerald-300)}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-rose-300{background-color:var(--color-rose-300)}.bg-rose-400{background-color:var(--color-rose-400)}.bg-rose-400\/10{background-color:#ff667f1a}@supports (color:color-mix(in lab, red, red)){.bg-rose-400\/10{background-color:color-mix(in oklab, var(--color-rose-400) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/35{background-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.bg-white\/35{background-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.p-0{padding:calc(var(--spacing) * 0)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.74rem\]{font-size:.74rem}.text-\[0\.76rem\]{font-size:.76rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.84rem\]{font-size:.84rem}.text-\[0\.86rem\]{font-size:.86rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[1\.04rem\]{font-size:1.04rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.75rem\]{font-size:1.75rem}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#9a9a9a\]{color:#9a9a9a}.text-\[\#666\]{color:#666}.text-\[\#777\]{color:#777}.text-\[\#888\]{color:#888}.text-\[\#b8b8b8\]{color:#b8b8b8}.text-\[\#d6d6d6\]{color:#d6d6d6}.text-\[\#d8ccff\]{color:#d8ccff}.text-\[\#f4f4f4\]{color:#f4f4f4}.text-amber-200{color:var(--color-amber-200)}.text-amber-300{color:var(--color-amber-300)}.text-black{color:var(--color-black)}.text-emerald-300{color:var(--color-emerald-300)}.text-inherit{color:inherit}.text-rose-300{color:var(--color-rose-300)}.text-violet-200{color:var(--color-violet-200)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-white{-webkit-text-decoration-color:var(--color-white);-webkit-text-decoration-color:var(--color-white);text-decoration-color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.\[color-scheme\:dark\]{color-scheme:dark}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black\/35{--tw-shadow-color:#00000059}@supports (color:color-mix(in lab, red, red)){.shadow-black\/35{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 35%, transparent) var(--tw-shadow-alpha), transparent)}}.saturate-50{--tw-saturate:saturate(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[filter\,stroke\,stroke-width\]{transition-property:filter,stroke,stroke-width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:bg-white\/20:is(:where(.group):hover *){background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-white\/20:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[\#beaaff\]\/40:hover{border-color:oklab(78.6663% .0494663 -.109708/.4)}.hover\:border-white:hover{border-color:var(--color-white)}.hover\:border-white\/25:hover{border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/25:hover{border-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.hover\:border-white\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/30:hover{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:border-white\/45:hover{border-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/45:hover{border-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.hover\:border-b-white\/45:hover{border-bottom-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.hover\:border-b-white\/45:hover{border-bottom-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.hover\:bg-\[\#151515\]:hover{background-color:#151515}.hover\:bg-\[rgba\(190\,170\,255\,0\.07\)\]:hover{background-color:#beaaff12}.hover\:bg-white\/\[0\.05\]:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.05\]:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-\[\#b8b8b8\]:hover{color:#b8b8b8}.hover\:text-\[\#d6d6d6\]:hover{color:#d6d6d6}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus-visible\:border-white\/45:focus-visible{border-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.focus-visible\:border-white\/45:focus-visible{border-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.focus-visible\:stroke-emerald-400:focus-visible{stroke:var(--color-emerald-400)}.focus-visible\:stroke-2:focus-visible{stroke-width:2px}.focus-visible\:outline:focus-visible,.focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[\#beaaff\]\/55:focus-visible{outline-color:oklab(78.6663% .0494663 -.109708/.55)}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:w-full{width:100%}.max-md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-md\:flex-col{flex-direction:column}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:items-stretch{align-items:stretch}.max-md\:justify-between{justify-content:space-between}.max-md\:justify-items-start{justify-items:start}.max-md\:gap-1{gap:calc(var(--spacing) * 1)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:py-4{padding-block:calc(var(--spacing) * 4)}.max-md\:text-left{text-align:left}}@media (min-width:40rem){.sm\:basis-1\/3{flex-basis:33.3333%}}@media (min-width:48rem){.md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.md\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:text-right{text-align:right}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media (min-width:64rem){.lg\:grid-cols-\[minmax\(21rem\,0\.32fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(21rem,.32fr) minmax(0,1fr)}}.\[\&_code\]\:break-words code{overflow-wrap:break-word}.\[\&_code\]\:whitespace-pre-wrap code{white-space:pre-wrap}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:\!overflow-visible pre{overflow:visible!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:font-mono pre{font-family:var(--font-mono)}.\[\&_pre\]\:text-\[0\.86rem\] pre{font-size:.86rem}.\[\&_pre\]\:leading-relaxed pre{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_pre\]\:break-words pre{overflow-wrap:break-word}.\[\&_pre\]\:whitespace-pre-wrap pre{white-space:pre-wrap}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes pulse{50%{opacity:.5}}
|
package/dist/url.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface DashboardBaseURLConfig {
|
|
2
|
+
baseURL?: string;
|
|
3
|
+
}
|
|
4
|
+
export interface DashboardConversationURLConfig extends DashboardBaseURLConfig {
|
|
5
|
+
basePath?: string;
|
|
6
|
+
conversationId: string;
|
|
7
|
+
}
|
|
8
|
+
/** Normalize dashboard route prefixes so plugin and Nitro paths agree. */
|
|
9
|
+
export declare function normalizeDashboardPath(path: string | undefined, fallback: string): string;
|
|
10
|
+
/** Resolve the dashboard origin used for browser auth and external links. */
|
|
11
|
+
export declare function resolveDashboardBaseURL(config?: DashboardBaseURLConfig): string;
|
|
12
|
+
/** Build the dashboard conversation URL shown from outside the browser app. */
|
|
13
|
+
export declare function buildDashboardConversationURL(config: DashboardConversationURLConfig): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sentry/junior-dashboard",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.63.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
},
|
|
14
14
|
"exports": {
|
|
15
15
|
".": {
|
|
16
|
-
"types": "./dist/
|
|
17
|
-
"default": "./dist/
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"default": "./dist/index.js"
|
|
18
18
|
},
|
|
19
19
|
"./nitro": {
|
|
20
20
|
"types": "./dist/nitro.d.ts",
|
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
"react-router": "^7.16.0",
|
|
40
40
|
"recharts": "^3.8.1",
|
|
41
41
|
"shiki": "4.1.0",
|
|
42
|
-
"@sentry/junior": "0.
|
|
42
|
+
"@sentry/junior-plugin-api": "0.63.0",
|
|
43
|
+
"@sentry/junior": "0.63.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@tailwindcss/cli": "^4.3.0",
|
|
@@ -52,8 +53,10 @@
|
|
|
52
53
|
"vitest": "^4.1.7"
|
|
53
54
|
},
|
|
54
55
|
"scripts": {
|
|
55
|
-
"build": "
|
|
56
|
+
"build": "pnpm run build:client && pnpm run build:css && pnpm run build:server && tsc -p tsconfig.build.json --emitDeclarationOnly",
|
|
57
|
+
"build:client": "tsup --config tsup.client.config.ts",
|
|
56
58
|
"build:css": "tailwindcss -i src/tailwind.css -o dist/tailwind.css --minify",
|
|
59
|
+
"build:server": "tsup --config tsup.config.ts",
|
|
57
60
|
"test": "vitest run -c vitest.config.ts",
|
|
58
61
|
"typecheck": "tsc --noEmit"
|
|
59
62
|
}
|
package/src/app.ts
CHANGED
|
@@ -4,6 +4,7 @@ import path from "node:path";
|
|
|
4
4
|
import type { JuniorReporting } from "@sentry/junior/reporting";
|
|
5
5
|
import { createJuniorReporting } from "@sentry/junior/reporting";
|
|
6
6
|
import { initSentry } from "@sentry/junior/instrumentation";
|
|
7
|
+
import { dashboardClientAsset, dashboardTailwindAsset } from "./assets";
|
|
7
8
|
import {
|
|
8
9
|
createDashboardAuth,
|
|
9
10
|
resolveGoogleHostedDomainHint,
|
|
@@ -18,6 +19,7 @@ const DASHBOARD_CLIENT_VERSION = Date.now().toString(36);
|
|
|
18
19
|
|
|
19
20
|
export interface JuniorDashboardOptions {
|
|
20
21
|
basePath?: string;
|
|
22
|
+
baseURL?: string;
|
|
21
23
|
authPath?: string;
|
|
22
24
|
authRequired?: boolean;
|
|
23
25
|
allowedGoogleDomains?: string[];
|
|
@@ -146,18 +148,15 @@ function dashboardSessionBypass(): DashboardSession {
|
|
|
146
148
|
};
|
|
147
149
|
}
|
|
148
150
|
|
|
149
|
-
function
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
return readFileSync(localDistUrl, "utf8");
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
const sourceDistUrl = new URL(`../dist/${fileName}`, import.meta.url);
|
|
156
|
-
if (existsSync(sourceDistUrl)) {
|
|
157
|
-
return readFileSync(sourceDistUrl, "utf8");
|
|
151
|
+
function readAssetUrl(url: URL): string {
|
|
152
|
+
if (!existsSync(url)) {
|
|
153
|
+
return "";
|
|
158
154
|
}
|
|
155
|
+
return readFileSync(url, "utf8");
|
|
156
|
+
}
|
|
159
157
|
|
|
160
|
-
|
|
158
|
+
function readWorkspaceAsset(fileName: string): string {
|
|
159
|
+
const assetPath = path.join(
|
|
161
160
|
process.cwd(),
|
|
162
161
|
"node_modules",
|
|
163
162
|
"@sentry",
|
|
@@ -165,15 +164,18 @@ function readDashboardAsset(fileName: string): string {
|
|
|
165
164
|
"dist",
|
|
166
165
|
fileName,
|
|
167
166
|
);
|
|
168
|
-
if (existsSync(
|
|
169
|
-
return
|
|
167
|
+
if (!existsSync(assetPath)) {
|
|
168
|
+
return "";
|
|
170
169
|
}
|
|
171
|
-
|
|
172
|
-
return "";
|
|
170
|
+
return readFileSync(assetPath, "utf8");
|
|
173
171
|
}
|
|
174
172
|
|
|
175
173
|
function readDashboardClient(): string {
|
|
176
|
-
const client =
|
|
174
|
+
const client =
|
|
175
|
+
dashboardClientAsset ||
|
|
176
|
+
readAssetUrl(new URL("./client.js", import.meta.url)) ||
|
|
177
|
+
readAssetUrl(new URL("../dist/client.js", import.meta.url)) ||
|
|
178
|
+
readWorkspaceAsset("client.js");
|
|
177
179
|
if (!client) {
|
|
178
180
|
throw new Error("Junior dashboard client bundle was not found");
|
|
179
181
|
}
|
|
@@ -185,7 +187,12 @@ function dashboardTimeZone(): string {
|
|
|
185
187
|
}
|
|
186
188
|
|
|
187
189
|
function readDashboardTailwind(): string {
|
|
188
|
-
return
|
|
190
|
+
return (
|
|
191
|
+
dashboardTailwindAsset ||
|
|
192
|
+
readAssetUrl(new URL("./tailwind.css", import.meta.url)) ||
|
|
193
|
+
readAssetUrl(new URL("../dist/tailwind.css", import.meta.url)) ||
|
|
194
|
+
readWorkspaceAsset("tailwind.css")
|
|
195
|
+
);
|
|
189
196
|
}
|
|
190
197
|
|
|
191
198
|
function dashboardPagePaths(basePath: string): string[] {
|
|
@@ -307,6 +314,7 @@ export function createDashboardApp(
|
|
|
307
314
|
? (options.auth ??
|
|
308
315
|
createDashboardAuth({
|
|
309
316
|
authPath,
|
|
317
|
+
baseURL: options.baseURL,
|
|
310
318
|
trustedOrigins: options.trustedOrigins ?? [],
|
|
311
319
|
googleHostedDomain: resolveGoogleHostedDomainHint(allowedDomains),
|
|
312
320
|
sessionMaxAgeSeconds: options.sessionMaxAgeSeconds,
|
package/src/assets.ts
ADDED
package/src/auth.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { betterAuth } from "better-auth/minimal";
|
|
2
|
+
import { resolveDashboardBaseURL } from "./url";
|
|
2
3
|
|
|
3
4
|
const DEFAULT_SESSION_MAX_AGE_SECONDS = 60 * 60 * 8;
|
|
4
5
|
|
|
@@ -56,40 +57,6 @@ function firstHostedDomain(domains: string[]): string | undefined {
|
|
|
56
57
|
return domains.length === 1 ? domains[0] : undefined;
|
|
57
58
|
}
|
|
58
59
|
|
|
59
|
-
function withHttps(host: string): string {
|
|
60
|
-
return /^https?:\/\//.test(host) ? host : `https://${host}`;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function stripTrailingSlashes(value: string): string {
|
|
64
|
-
let end = value.length;
|
|
65
|
-
while (end > 1 && value.charCodeAt(end - 1) === 47) {
|
|
66
|
-
end -= 1;
|
|
67
|
-
}
|
|
68
|
-
return end === value.length ? value : value.slice(0, end);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function resolveBaseURL(config: DashboardAuthConfig): string {
|
|
72
|
-
const explicit =
|
|
73
|
-
config.baseURL ??
|
|
74
|
-
process.env.BETTER_AUTH_URL ??
|
|
75
|
-
process.env.JUNIOR_BASE_URL;
|
|
76
|
-
if (explicit?.trim()) {
|
|
77
|
-
return stripTrailingSlashes(withHttps(explicit.trim()));
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
const vercelProd = process.env.VERCEL_PROJECT_PRODUCTION_URL?.trim();
|
|
81
|
-
if (vercelProd) {
|
|
82
|
-
return stripTrailingSlashes(withHttps(vercelProd));
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const vercelUrl = process.env.VERCEL_URL?.trim();
|
|
86
|
-
if (vercelUrl) {
|
|
87
|
-
return stripTrailingSlashes(withHttps(vercelUrl));
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
return "http://localhost:3000";
|
|
91
|
-
}
|
|
92
|
-
|
|
93
60
|
/** Create the Better Auth bridge used by dashboard browser routes. */
|
|
94
61
|
export function createDashboardAuth(
|
|
95
62
|
config: DashboardAuthConfig,
|
|
@@ -100,7 +67,7 @@ export function createDashboardAuth(
|
|
|
100
67
|
process.env.JUNIOR_SECRET,
|
|
101
68
|
"JUNIOR_SECRET or BETTER_AUTH_SECRET",
|
|
102
69
|
);
|
|
103
|
-
const baseURL =
|
|
70
|
+
const baseURL = resolveDashboardBaseURL({ baseURL: config.baseURL });
|
|
104
71
|
const googleClientId = required(
|
|
105
72
|
config.googleClientId ?? process.env.GOOGLE_CLIENT_ID,
|
|
106
73
|
"GOOGLE_CLIENT_ID",
|
|
@@ -16,10 +16,11 @@ export function ConversationRowStats(props: {
|
|
|
16
16
|
const runtime = formatDurationTotal(
|
|
17
17
|
props.conversation.turns.map((turn) => turn.cumulativeDurationMs),
|
|
18
18
|
);
|
|
19
|
+
const turnCount = props.conversation.turns.length;
|
|
19
20
|
const primaryStats = [
|
|
20
|
-
`${
|
|
21
|
+
`${turnCount} ${turnCount === 1 ? "turn" : "turns"}`,
|
|
21
22
|
tokens,
|
|
22
|
-
runtime ? `${runtime} runtime` :
|
|
23
|
+
runtime ? `${runtime} runtime` : "",
|
|
23
24
|
].filter(Boolean);
|
|
24
25
|
const secondaryStats = [
|
|
25
26
|
props.timeLabel,
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useId,
|
|
3
|
+
useRef,
|
|
4
|
+
useState,
|
|
5
|
+
type CSSProperties,
|
|
6
|
+
type ReactNode,
|
|
7
|
+
} from "react";
|
|
8
|
+
|
|
9
|
+
import { cn } from "../styles";
|
|
10
|
+
|
|
11
|
+
export type MetricTooltipLine = {
|
|
12
|
+
label?: string;
|
|
13
|
+
labelStyle?: "code";
|
|
14
|
+
value: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export type MetricListItem = {
|
|
18
|
+
content: ReactNode;
|
|
19
|
+
key: string;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
type TooltipPosition = {
|
|
23
|
+
left: number;
|
|
24
|
+
top: number;
|
|
25
|
+
width: number;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
function clamp(value: number, min: number, max: number): number {
|
|
29
|
+
return Math.min(Math.max(value, min), max);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function tooltipPosition(
|
|
33
|
+
trigger: HTMLElement,
|
|
34
|
+
align: "left" | "right" | undefined,
|
|
35
|
+
): TooltipPosition {
|
|
36
|
+
const margin = 16;
|
|
37
|
+
const viewportWidth = window.innerWidth;
|
|
38
|
+
const width = Math.min(320, Math.max(256, viewportWidth - margin * 2));
|
|
39
|
+
const rect = trigger.getBoundingClientRect();
|
|
40
|
+
const preferredLeft = align === "right" ? rect.right - width : rect.left;
|
|
41
|
+
return {
|
|
42
|
+
left: Math.round(
|
|
43
|
+
clamp(preferredLeft, margin, viewportWidth - width - margin),
|
|
44
|
+
),
|
|
45
|
+
top: Math.round(rect.bottom + 8),
|
|
46
|
+
width,
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/** Render compact metadata text with an optional styled hover/focus tooltip. */
|
|
51
|
+
export function MetricValue(props: {
|
|
52
|
+
align?: "left" | "right";
|
|
53
|
+
children: ReactNode;
|
|
54
|
+
className?: string;
|
|
55
|
+
tooltip?: MetricTooltipLine[];
|
|
56
|
+
}) {
|
|
57
|
+
const tooltipId = useId();
|
|
58
|
+
const triggerRef = useRef<HTMLSpanElement>(null);
|
|
59
|
+
const [position, setPosition] = useState<TooltipPosition | null>(null);
|
|
60
|
+
const tooltip = props.tooltip?.filter((line) => line.value.trim());
|
|
61
|
+
if (!tooltip?.length) {
|
|
62
|
+
return <span className={props.className}>{props.children}</span>;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const showTooltip = () => {
|
|
66
|
+
if (!triggerRef.current) return;
|
|
67
|
+
setPosition(tooltipPosition(triggerRef.current, props.align));
|
|
68
|
+
};
|
|
69
|
+
const hideTooltip = () => setPosition(null);
|
|
70
|
+
const tooltipStyle: CSSProperties | undefined = position
|
|
71
|
+
? {
|
|
72
|
+
left: position.left,
|
|
73
|
+
top: position.top,
|
|
74
|
+
width: position.width,
|
|
75
|
+
}
|
|
76
|
+
: undefined;
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<span className={cn("relative inline-flex", props.className)}>
|
|
80
|
+
<span
|
|
81
|
+
aria-describedby={position ? tooltipId : undefined}
|
|
82
|
+
className="border-b border-dotted border-white/20 outline-none transition-colors hover:border-white/45 focus-visible:border-white/45"
|
|
83
|
+
onBlur={hideTooltip}
|
|
84
|
+
onFocus={showTooltip}
|
|
85
|
+
onMouseEnter={showTooltip}
|
|
86
|
+
onMouseLeave={hideTooltip}
|
|
87
|
+
ref={triggerRef}
|
|
88
|
+
tabIndex={0}
|
|
89
|
+
>
|
|
90
|
+
{props.children}
|
|
91
|
+
</span>
|
|
92
|
+
{position ? (
|
|
93
|
+
<span
|
|
94
|
+
className="pointer-events-none fixed z-30 border border-white/15 bg-[#050505] px-3 py-2 text-left text-[0.76rem] font-normal leading-relaxed text-[#b8b8b8] shadow-xl shadow-black/35"
|
|
95
|
+
id={tooltipId}
|
|
96
|
+
role="tooltip"
|
|
97
|
+
style={tooltipStyle}
|
|
98
|
+
>
|
|
99
|
+
<span className="grid max-h-72 grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1.5 overflow-y-auto">
|
|
100
|
+
{tooltip.map((line, index) => (
|
|
101
|
+
<span
|
|
102
|
+
className={
|
|
103
|
+
line.label
|
|
104
|
+
? "contents"
|
|
105
|
+
: "col-span-2 block min-w-0 break-words text-[#d6d6d6]"
|
|
106
|
+
}
|
|
107
|
+
key={`${index}-${line.label ?? ""}-${line.value}`}
|
|
108
|
+
>
|
|
109
|
+
{line.label ? (
|
|
110
|
+
<span
|
|
111
|
+
className={cn(
|
|
112
|
+
"min-w-0 break-words font-medium text-[#888]",
|
|
113
|
+
line.labelStyle === "code" &&
|
|
114
|
+
"break-all font-mono text-[0.74rem] text-[#d6d6d6]",
|
|
115
|
+
)}
|
|
116
|
+
>
|
|
117
|
+
{line.label}
|
|
118
|
+
</span>
|
|
119
|
+
) : null}
|
|
120
|
+
{line.label ? (
|
|
121
|
+
<span className="whitespace-nowrap text-right text-[#d6d6d6]">
|
|
122
|
+
{line.value}
|
|
123
|
+
</span>
|
|
124
|
+
) : (
|
|
125
|
+
line.value
|
|
126
|
+
)}
|
|
127
|
+
</span>
|
|
128
|
+
))}
|
|
129
|
+
</span>
|
|
130
|
+
</span>
|
|
131
|
+
) : null}
|
|
132
|
+
</span>
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/** Render inline metadata with consistent dot spacing across dashboard headers. */
|
|
137
|
+
export function MetricList(props: {
|
|
138
|
+
className?: string;
|
|
139
|
+
items: MetricListItem[];
|
|
140
|
+
}) {
|
|
141
|
+
return (
|
|
142
|
+
<div
|
|
143
|
+
className={cn(
|
|
144
|
+
"flex flex-wrap items-center gap-x-1.5 gap-y-1",
|
|
145
|
+
props.className,
|
|
146
|
+
)}
|
|
147
|
+
>
|
|
148
|
+
{props.items.map((item, index) => (
|
|
149
|
+
<span
|
|
150
|
+
className="inline-flex min-w-0 items-center gap-x-1.5"
|
|
151
|
+
key={item.key}
|
|
152
|
+
>
|
|
153
|
+
{index > 0 ? <span className="text-[#666]">·</span> : null}
|
|
154
|
+
<span className="min-w-0">{item.content}</span>
|
|
155
|
+
</span>
|
|
156
|
+
))}
|
|
157
|
+
</div>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import {
|
|
2
|
+
formatCompactNumber,
|
|
3
|
+
formatMs,
|
|
4
|
+
formatTime,
|
|
5
|
+
formatTokenSummary,
|
|
6
|
+
type MessageSummary,
|
|
7
|
+
type TokenUsageSummary,
|
|
8
|
+
type ToolCallSummary,
|
|
9
|
+
} from "../format";
|
|
10
|
+
import { MetricValue, type MetricTooltipLine } from "./Metric";
|
|
11
|
+
|
|
12
|
+
function plural(label: string, count: number): string {
|
|
13
|
+
return `${formatCompactNumber(count)} ${label}${count === 1 ? "" : "s"}`;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function isMetricTooltipLine(
|
|
17
|
+
line: MetricTooltipLine | undefined,
|
|
18
|
+
): line is MetricTooltipLine {
|
|
19
|
+
return Boolean(line);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function tokenTooltip(summary: TokenUsageSummary): MetricTooltipLine[] {
|
|
23
|
+
const lines: Array<MetricTooltipLine | undefined> = [
|
|
24
|
+
summary.inputTokens !== undefined
|
|
25
|
+
? { label: "input", value: formatCompactNumber(summary.inputTokens) }
|
|
26
|
+
: undefined,
|
|
27
|
+
summary.outputTokens !== undefined
|
|
28
|
+
? { label: "output", value: formatCompactNumber(summary.outputTokens) }
|
|
29
|
+
: undefined,
|
|
30
|
+
summary.cachedInputTokens !== undefined
|
|
31
|
+
? {
|
|
32
|
+
label: "cached",
|
|
33
|
+
value: formatCompactNumber(summary.cachedInputTokens),
|
|
34
|
+
}
|
|
35
|
+
: undefined,
|
|
36
|
+
summary.cacheCreationTokens !== undefined
|
|
37
|
+
? {
|
|
38
|
+
label: "cache write",
|
|
39
|
+
value: formatCompactNumber(summary.cacheCreationTokens),
|
|
40
|
+
}
|
|
41
|
+
: undefined,
|
|
42
|
+
summary.providerTotalTokens !== undefined
|
|
43
|
+
? {
|
|
44
|
+
label: "provider",
|
|
45
|
+
value: formatCompactNumber(summary.providerTotalTokens),
|
|
46
|
+
}
|
|
47
|
+
: undefined,
|
|
48
|
+
];
|
|
49
|
+
return lines.filter(isMetricTooltipLine);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/** Render total token usage with a hoverable breakdown. */
|
|
53
|
+
export function TokenMetric(props: {
|
|
54
|
+
align?: "left" | "right";
|
|
55
|
+
summary: TokenUsageSummary | undefined;
|
|
56
|
+
}) {
|
|
57
|
+
if (!props.summary) return null;
|
|
58
|
+
return (
|
|
59
|
+
<MetricValue align={props.align} tooltip={tokenTooltip(props.summary)}>
|
|
60
|
+
{formatTokenSummary(props.summary)}
|
|
61
|
+
</MetricValue>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/** Render a duration value with start/end timestamps in the tooltip. */
|
|
66
|
+
export function DurationMetric(props: {
|
|
67
|
+
align?: "left" | "right";
|
|
68
|
+
endedAt?: string;
|
|
69
|
+
label: string;
|
|
70
|
+
startedAt?: string;
|
|
71
|
+
}) {
|
|
72
|
+
if (!props.label || props.label === "none") return null;
|
|
73
|
+
const lines: Array<MetricTooltipLine | undefined> = [
|
|
74
|
+
props.startedAt
|
|
75
|
+
? { label: "started", value: formatTime(props.startedAt) }
|
|
76
|
+
: undefined,
|
|
77
|
+
props.endedAt
|
|
78
|
+
? { label: "ended", value: formatTime(props.endedAt) }
|
|
79
|
+
: undefined,
|
|
80
|
+
];
|
|
81
|
+
const tooltip = lines.filter(isMetricTooltipLine);
|
|
82
|
+
return (
|
|
83
|
+
<MetricValue align={props.align} tooltip={tooltip}>
|
|
84
|
+
{props.label}
|
|
85
|
+
</MetricValue>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/** Render a tool-call count with top tool names, counts, and matched duration. */
|
|
90
|
+
export function ToolCallsMetric(props: {
|
|
91
|
+
align?: "left" | "right";
|
|
92
|
+
loading?: boolean;
|
|
93
|
+
summary: ToolCallSummary | undefined;
|
|
94
|
+
}) {
|
|
95
|
+
if (props.loading) return <span>tool calls loading</span>;
|
|
96
|
+
if (!props.summary || props.summary.total <= 0) return null;
|
|
97
|
+
const tooltip = props.summary.items.map((item) => ({
|
|
98
|
+
label: item.name,
|
|
99
|
+
labelStyle: "code" as const,
|
|
100
|
+
value: [
|
|
101
|
+
plural("call", item.count),
|
|
102
|
+
item.totalDurationMs !== undefined
|
|
103
|
+
? formatMs(item.totalDurationMs)
|
|
104
|
+
: undefined,
|
|
105
|
+
]
|
|
106
|
+
.filter(Boolean)
|
|
107
|
+
.join(" · "),
|
|
108
|
+
}));
|
|
109
|
+
return (
|
|
110
|
+
<MetricValue align={props.align} tooltip={tooltip}>
|
|
111
|
+
{plural("tool call", props.summary.total)}
|
|
112
|
+
</MetricValue>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/** Render a conversational message count. */
|
|
117
|
+
export function MessagesMetric(props: {
|
|
118
|
+
loading?: boolean;
|
|
119
|
+
summary: MessageSummary | undefined;
|
|
120
|
+
}) {
|
|
121
|
+
if (props.loading) return <span>messages loading</span>;
|
|
122
|
+
if (!props.summary) return null;
|
|
123
|
+
return <MetricValue>{plural("message", props.summary.total)}</MetricValue>;
|
|
124
|
+
}
|