@motiadev/plugin-logs 0.14.0-beta.165-076789 → 0.14.0-beta.165-634707
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/index.css +0 -3
- package/dist/index.css.map +1 -1
- package/dist/index.js +0 -337
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.css
CHANGED
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.css","names":[],"sources":["../src/styles.css"],"sourcesContent":["/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --spacing: 0.25rem;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --font-weight-500: var(--font-weight-500);\n --font-weight-600: var(--font-weight-600);\n --font-weight-700: var(--font-weight-700);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n 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\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .absolute {\n position: absolute;\n }\n .relative {\n position: relative;\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-\\[34px\\] {\n height: 34px;\n }\n .h-full {\n height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[500px\\] {\n max-width: 500px;\n }\n .flex-1 {\n flex: 1;\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .grid-rows-\\[auto_1fr\\] {\n grid-template-rows: auto 1fr;\n }\n .items-center {\n align-items: center;\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .bg-muted-foreground\\/10 {\n background-color: var(--muted-foreground);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent);\n }\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .px-9\\! {\n padding-inline: calc(var(--spacing) * 9) !important;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .text-muted-foreground\\/50 {\n color: var(--muted-foreground);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\n }\n }\n .capitalize {\n text-transform: capitalize;\n }\n .hover\\:bg-muted-foreground\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted-foreground);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent);\n }\n }\n }\n }\n .hover\\:bg-muted-foreground\\/20 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--muted-foreground);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);\n }\n }\n }\n }\n .hover\\:text-muted-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--muted-foreground);\n }\n }\n }\n .hover\\:text-primary {\n &:hover {\n @media (hover: hover) {\n color: var(--primary);\n }\n }\n }\n}\n:root {\n --default-font-family: \"DM Sans\", ui-sans-serif, sans-serif;\n --font-dm-mono: \"DM Mono\", ui-monospace, monospace;\n line-height: 1.5;\n font-size: 16px;\n color-scheme: light dark;\n 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\" ), serif;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n font-optical-sizing: auto;\n --font-weight-500: 500;\n --font-weight-600: 600;\n --font-weight-700: 700;\n --accent-1000: #2862fe;\n --accent-970: #2862fef7;\n --accent-950: #2862fef2;\n --accent-900: #2862fee5;\n --accent-800: #2862fecc;\n --accent-700: #2862feb2;\n --accent-600: #2862fe99;\n --accent-500: #2862fe80;\n --accent-400: #2862fe66;\n --accent-300: #2862fe4d;\n --accent-200: #2862fe33;\n --accent-100: #2862fe1a;\n --accent-50: #2862fe0d;\n --accent-30: #2862fe08;\n --dark-1000: #0a0a0a;\n --dark-970: #0a0a0af7;\n --dark-950: #0a0a0af2;\n --dark-900: #0a0a0ae5;\n --dark-800: #0a0a0acc;\n --dark-700: #0a0a0ab2;\n --dark-600: #0a0a0a99;\n --dark-500: #0a0a0a80;\n --dark-400: #0a0a0a66;\n --dark-300: #0a0a0a4d;\n --dark-200: #0a0a0a33;\n --dark-100: #0a0a0a1a;\n --dark-50: #0a0a0a0d;\n --dark-30: #0a0a0a08;\n --light-1000: #ffffff;\n --light-970: #fffffff7;\n --light-950: #fffffff2;\n --light-900: #ffffffe5;\n --light-800: #ffffffcc;\n --light-700: #ffffffb2;\n --light-600: #ffffff99;\n --light-500: #ffffff80;\n --light-400: #ffffff66;\n --light-300: #ffffff4d;\n --light-200: #ffffff33;\n --light-100: #ffffff1a;\n --light-50: #ffffff0d;\n --light-30: #ffffff08;\n --error: #d61355;\n --canvas-background: #ebebeb;\n --background: var(--light-1000);\n --foreground: var(--dark-1000);\n --surface-content: var(--dark-30);\n --surface-component: var(--dark-50);\n --surface-light-100: var(--dark-100);\n --surface-light-200: var(--dark-200);\n --border: var(--dark-100);\n --border-accent: var(--accent-1000);\n --states-hover: var(--dark-30);\n --states-selected: var(--dark-100);\n --states-active: var(--accent-1000);\n --text-header: var(--dark-1000);\n --text-body: var(--dark-600);\n --text-placeholder: var(--dark-400);\n --text-accent: var(--accent-1000);\n --text-error: var(--error);\n --icon-active: var(--dark-1000);\n --icon-light: var(--dark-600);\n --icon-component: var(--dark-400);\n --icon-accent: var(--accent-1000);\n --primary: var(--accent-1000);\n --primary-foreground: var(--light-1000);\n --secondary: var(--surface-component);\n --secondary-foreground: var(--text-body);\n --muted: var(--surface-light-100);\n --muted-foreground: var(--text-body);\n --accent: var(--accent-1000);\n --accent-foreground: var(--light-1000);\n --destructive: var(--error);\n --destructive-foreground: var(--light-1000);\n --card: var(--surface-content);\n --card-foreground: var(--foreground);\n --popover: var(--surface-content);\n --popover-foreground: var(--foreground);\n --input: var(--states-hover);\n --ring: var(--border-accent);\n --chart-1: var(--accent-1000);\n --chart-2: var(--accent-800);\n --chart-3: var(--accent-600);\n --chart-4: var(--accent-400);\n --chart-5: var(--accent-200);\n --header: var(--background);\n --header-foreground: var(--text-header);\n --header-primary: var(--primary);\n --header-primary-foreground: var(--primary-foreground);\n --header-accent: var(--surface-component);\n --header-accent-foreground: var(--text-body);\n --header-border: var(--border);\n --header-ring: var(--ring);\n --sidebar: var(--background);\n --sidebar-foreground: var(--text-header);\n --sidebar-primary: var(--primary);\n --sidebar-primary-foreground: var(--primary-foreground);\n --sidebar-accent: var(--surface-component);\n --sidebar-accent-foreground: var(--text-body);\n --sidebar-border: var(--border);\n --sidebar-ring: var(--ring);\n}\n.dark {\n --canvas-background: #030303;\n --background: var(--dark-1000);\n --foreground: var(--light-1000);\n --surface-content: var(--light-30);\n --surface-component: var(--light-50);\n --surface-light-100: var(--light-100);\n --surface-light-200: var(--light-200);\n --border: var(--light-100);\n --states-hover: var(--light-30);\n --states-selected: var(--light-100);\n --text-header: var(--light-1000);\n --text-body: var(--light-600);\n --text-placeholder: var(--light-400);\n --icon-active: var(--light-1000);\n --icon-light: var(--light-600);\n --icon-component: var(--light-400);\n --secondary-foreground: var(--light-600);\n --muted-foreground: var(--light-600);\n --card: var(--surface-content);\n --card-foreground: var(--foreground);\n --popover: var(--surface-content);\n --popover-foreground: var(--foreground);\n --input: var(--states-hover);\n --ring: var(--border-accent);\n --chart-1: var(--accent-1000);\n --chart-2: var(--accent-800);\n --chart-3: var(--accent-600);\n --chart-4: var(--accent-400);\n --chart-5: var(--accent-200);\n --header: var(--background);\n --header-foreground: var(--text-header);\n --header-primary: var(--primary);\n --header-primary-foreground: var(--primary-foreground);\n --header-accent: var(--surface-component);\n --header-accent-foreground: var(--text-body);\n --header-border: var(--border);\n --header-ring: var(--ring);\n --sidebar: var(--background);\n --sidebar-foreground: var(--text-header);\n --sidebar-primary: var(--primary);\n --sidebar-primary-foreground: var(--primary-foreground);\n --sidebar-accent: var(--surface-component);\n --sidebar-accent-foreground: var(--text-body);\n --sidebar-border: var(--border);\n --sidebar-ring: var(--ring);\n}\n@layer base {\n * {\n border-color: var(--border);\n }\n body {\n background-color: var(--background);\n color: var(--foreground);\n }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n 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\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities;\n.json-view {\n background-color: transparent !important;\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n }\n }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"index.css","names":[],"sources":["../src/styles.css"],"sourcesContent":["export default undefined;"],"mappings":"AAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,337 +0,0 @@
|
|
|
1
|
-
import { Stream } from "@motiadev/stream-client-browser";
|
|
2
|
-
import { create } from "zustand";
|
|
3
|
-
import { c } from "react/compiler-runtime";
|
|
4
|
-
import { Button, Input, LevelDot, Sidebar, Table, TableBody, TableCell, TableRow, cn } from "@motiadev/ui";
|
|
5
|
-
import { Search, Trash, X } from "lucide-react";
|
|
6
|
-
import { useMemo, useState } from "react";
|
|
7
|
-
import ReactJson from "react18-json-view";
|
|
8
|
-
import "react18-json-view/src/dark.css";
|
|
9
|
-
import "react18-json-view/src/style.css";
|
|
10
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
|
|
12
|
-
//#region src/stores/use-logs-store.ts
|
|
13
|
-
const useLogsStore = create()((set) => ({
|
|
14
|
-
logs: [],
|
|
15
|
-
selectedLogId: void 0,
|
|
16
|
-
addLog: (log) => set((state) => {
|
|
17
|
-
if (state.logs.find((l) => l.id === log.id)) return state;
|
|
18
|
-
return { logs: [log, ...state.logs] };
|
|
19
|
-
}),
|
|
20
|
-
setLogs: (logs) => set({ logs: [...logs].reverse() }),
|
|
21
|
-
resetLogs: () => {
|
|
22
|
-
set({ logs: [] });
|
|
23
|
-
},
|
|
24
|
-
selectLogId: (logId) => set({ selectedLogId: logId })
|
|
25
|
-
}));
|
|
26
|
-
|
|
27
|
-
//#endregion
|
|
28
|
-
//#region src/utils/init-log-listener.ts
|
|
29
|
-
const streamName = "__motia.logs";
|
|
30
|
-
const groupId = "default";
|
|
31
|
-
const type = "log";
|
|
32
|
-
const initLogListener = () => {
|
|
33
|
-
const subscription = new Stream(window.location.origin.replace("http", "ws")).subscribeGroup(streamName, groupId);
|
|
34
|
-
const store = useLogsStore.getState();
|
|
35
|
-
subscription.addChangeListener((logs) => {
|
|
36
|
-
if (logs) store.setLogs(logs);
|
|
37
|
-
});
|
|
38
|
-
subscription.onEvent(type, store.addLog);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
//#endregion
|
|
42
|
-
//#region src/utils/format-timestamp.ts
|
|
43
|
-
const formatTimestamp = (time) => {
|
|
44
|
-
const date = new Date(Number(time));
|
|
45
|
-
return `${date.toLocaleDateString("en-US", {
|
|
46
|
-
year: void 0,
|
|
47
|
-
month: "short",
|
|
48
|
-
day: "2-digit"
|
|
49
|
-
})}, ${date.toLocaleTimeString("en-US", {
|
|
50
|
-
hour: "2-digit",
|
|
51
|
-
minute: "2-digit",
|
|
52
|
-
second: "2-digit",
|
|
53
|
-
hourCycle: "h24"
|
|
54
|
-
})}.${date.getMilliseconds().toString().padStart(3, "0")}`;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
//#endregion
|
|
58
|
-
//#region src/components/log-detail.tsx
|
|
59
|
-
const defaultProps = [
|
|
60
|
-
"id",
|
|
61
|
-
"msg",
|
|
62
|
-
"time",
|
|
63
|
-
"level",
|
|
64
|
-
"step",
|
|
65
|
-
"flows",
|
|
66
|
-
"traceId"
|
|
67
|
-
];
|
|
68
|
-
const LogDetail = ({ log, onClose }) => {
|
|
69
|
-
const [hasOtherProps, setHasOtherProps] = useState(false);
|
|
70
|
-
const otherPropsObject = useMemo(() => {
|
|
71
|
-
if (!log) return null;
|
|
72
|
-
const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
|
|
73
|
-
setHasOtherProps(otherProps.length > 0);
|
|
74
|
-
return otherProps.reduce((acc, key_0) => {
|
|
75
|
-
acc[key_0] = log[key_0];
|
|
76
|
-
return acc;
|
|
77
|
-
}, {});
|
|
78
|
-
}, [log]);
|
|
79
|
-
if (!log) return null;
|
|
80
|
-
return /* @__PURE__ */ jsx(Sidebar, {
|
|
81
|
-
onClose,
|
|
82
|
-
title: "Logs Details",
|
|
83
|
-
subtitle: "Details including custom properties",
|
|
84
|
-
actions: [{
|
|
85
|
-
icon: /* @__PURE__ */ jsx(X, {}),
|
|
86
|
-
onClick: onClose,
|
|
87
|
-
label: "Close"
|
|
88
|
-
}],
|
|
89
|
-
details: [
|
|
90
|
-
{
|
|
91
|
-
label: "Level",
|
|
92
|
-
value: /* @__PURE__ */ jsxs("div", {
|
|
93
|
-
className: "flex items-center gap-2",
|
|
94
|
-
children: [/* @__PURE__ */ jsx(LevelDot, { level: log.level }), /* @__PURE__ */ jsx("div", {
|
|
95
|
-
className: "capitalize",
|
|
96
|
-
children: log.level
|
|
97
|
-
})]
|
|
98
|
-
})
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
label: "Time",
|
|
102
|
-
value: formatTimestamp(log.time)
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
label: "Step",
|
|
106
|
-
value: log.step
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
label: "Flows",
|
|
110
|
-
value: log.flows.join(", ")
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
label: "Trace ID",
|
|
114
|
-
value: log.traceId
|
|
115
|
-
}
|
|
116
|
-
],
|
|
117
|
-
children: hasOtherProps && /* @__PURE__ */ jsx(ReactJson, {
|
|
118
|
-
src: otherPropsObject,
|
|
119
|
-
theme: "default",
|
|
120
|
-
enableClipboard: true
|
|
121
|
-
})
|
|
122
|
-
});
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
//#endregion
|
|
126
|
-
//#region src/components/logs-page.tsx
|
|
127
|
-
const LogsPage = () => {
|
|
128
|
-
const $ = c(41);
|
|
129
|
-
const logs = useLogsStore(_temp);
|
|
130
|
-
const resetLogs = useLogsStore(_temp2);
|
|
131
|
-
const selectedLogId = useLogsStore(_temp3);
|
|
132
|
-
const selectLogId = useLogsStore(_temp4);
|
|
133
|
-
let t0;
|
|
134
|
-
if ($[0] !== logs || $[1] !== selectedLogId) {
|
|
135
|
-
t0 = selectedLogId ? logs.find((log) => log.id === selectedLogId) : void 0;
|
|
136
|
-
$[0] = logs;
|
|
137
|
-
$[1] = selectedLogId;
|
|
138
|
-
$[2] = t0;
|
|
139
|
-
} else t0 = $[2];
|
|
140
|
-
const selectedLog = t0;
|
|
141
|
-
const [search, setSearch] = useState("");
|
|
142
|
-
let t1;
|
|
143
|
-
if ($[3] !== logs || $[4] !== search) {
|
|
144
|
-
let t2$1;
|
|
145
|
-
if ($[6] !== search) {
|
|
146
|
-
t2$1 = (log_0) => log_0.msg.toLowerCase().includes(search.toLowerCase()) || log_0.traceId.toLowerCase().includes(search.toLowerCase()) || log_0.step.toLowerCase().includes(search.toLowerCase());
|
|
147
|
-
$[6] = search;
|
|
148
|
-
$[7] = t2$1;
|
|
149
|
-
} else t2$1 = $[7];
|
|
150
|
-
t1 = logs.filter(t2$1);
|
|
151
|
-
$[3] = logs;
|
|
152
|
-
$[4] = search;
|
|
153
|
-
$[5] = t1;
|
|
154
|
-
} else t1 = $[5];
|
|
155
|
-
const filteredLogs = t1;
|
|
156
|
-
let t2;
|
|
157
|
-
if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
|
|
158
|
-
t2 = (e) => setSearch(e.target.value);
|
|
159
|
-
$[8] = t2;
|
|
160
|
-
} else t2 = $[8];
|
|
161
|
-
let t3;
|
|
162
|
-
if ($[9] !== search) {
|
|
163
|
-
t3 = /* @__PURE__ */ jsx(Input, {
|
|
164
|
-
variant: "shade",
|
|
165
|
-
value: search,
|
|
166
|
-
onChange: t2,
|
|
167
|
-
className: "px-9! font-medium",
|
|
168
|
-
placeholder: "Search by Trace ID or Message"
|
|
169
|
-
});
|
|
170
|
-
$[9] = search;
|
|
171
|
-
$[10] = t3;
|
|
172
|
-
} else t3 = $[10];
|
|
173
|
-
let t4;
|
|
174
|
-
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
|
|
175
|
-
t4 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
|
|
176
|
-
$[11] = t4;
|
|
177
|
-
} else t4 = $[11];
|
|
178
|
-
let t5;
|
|
179
|
-
if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
|
|
180
|
-
t5 = /* @__PURE__ */ jsx(X, {
|
|
181
|
-
className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground",
|
|
182
|
-
onClick: () => setSearch("")
|
|
183
|
-
});
|
|
184
|
-
$[12] = t5;
|
|
185
|
-
} else t5 = $[12];
|
|
186
|
-
let t6;
|
|
187
|
-
if ($[13] !== t3) {
|
|
188
|
-
t6 = /* @__PURE__ */ jsxs("div", {
|
|
189
|
-
className: "flex-1 relative",
|
|
190
|
-
children: [
|
|
191
|
-
t3,
|
|
192
|
-
t4,
|
|
193
|
-
t5
|
|
194
|
-
]
|
|
195
|
-
});
|
|
196
|
-
$[13] = t3;
|
|
197
|
-
$[14] = t6;
|
|
198
|
-
} else t6 = $[14];
|
|
199
|
-
let t7;
|
|
200
|
-
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
|
|
201
|
-
t7 = /* @__PURE__ */ jsx(Trash, {});
|
|
202
|
-
$[15] = t7;
|
|
203
|
-
} else t7 = $[15];
|
|
204
|
-
let t8;
|
|
205
|
-
if ($[16] !== resetLogs) {
|
|
206
|
-
t8 = /* @__PURE__ */ jsxs(Button, {
|
|
207
|
-
variant: "default",
|
|
208
|
-
onClick: resetLogs,
|
|
209
|
-
className: "h-[34px]",
|
|
210
|
-
children: [t7, " Clear"]
|
|
211
|
-
});
|
|
212
|
-
$[16] = resetLogs;
|
|
213
|
-
$[17] = t8;
|
|
214
|
-
} else t8 = $[17];
|
|
215
|
-
let t9;
|
|
216
|
-
if ($[18] !== t6 || $[19] !== t8) {
|
|
217
|
-
t9 = /* @__PURE__ */ jsxs("div", {
|
|
218
|
-
className: "flex p-2 border-b gap-2",
|
|
219
|
-
"data-testid": "logs-search-container",
|
|
220
|
-
children: [t6, t8]
|
|
221
|
-
});
|
|
222
|
-
$[18] = t6;
|
|
223
|
-
$[19] = t8;
|
|
224
|
-
$[20] = t9;
|
|
225
|
-
} else t9 = $[20];
|
|
226
|
-
let t10;
|
|
227
|
-
if ($[21] !== filteredLogs || $[22] !== selectLogId || $[23] !== selectedLogId) {
|
|
228
|
-
let t11$1;
|
|
229
|
-
if ($[25] !== selectLogId || $[26] !== selectedLogId) {
|
|
230
|
-
t11$1 = (log_1, index) => /* @__PURE__ */ jsxs(TableRow, {
|
|
231
|
-
"data-testid": "log-row",
|
|
232
|
-
className: cn("font-mono font-semibold cursor-pointer border-0", {
|
|
233
|
-
"bg-muted-foreground/10 hover:bg-muted-foreground/20": selectedLogId === log_1.id,
|
|
234
|
-
"hover:bg-muted-foreground/10": selectedLogId !== log_1.id
|
|
235
|
-
}),
|
|
236
|
-
onClick: () => selectLogId(log_1.id),
|
|
237
|
-
children: [
|
|
238
|
-
/* @__PURE__ */ jsxs(TableCell, {
|
|
239
|
-
"data-testid": `time-${index}`,
|
|
240
|
-
className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground",
|
|
241
|
-
children: [/* @__PURE__ */ jsx(LevelDot, { level: log_1.level }), formatTimestamp(log_1.time)]
|
|
242
|
-
}),
|
|
243
|
-
/* @__PURE__ */ jsx(TableCell, {
|
|
244
|
-
"data-testid": `trace-${log_1.traceId}`,
|
|
245
|
-
className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground",
|
|
246
|
-
onClick: () => setSearch(log_1.traceId),
|
|
247
|
-
children: log_1.traceId
|
|
248
|
-
}),
|
|
249
|
-
/* @__PURE__ */ jsx(TableCell, {
|
|
250
|
-
"data-testid": `step-${index}`,
|
|
251
|
-
"aria-label": log_1.step,
|
|
252
|
-
className: "whitespace-nowrap",
|
|
253
|
-
children: log_1.step
|
|
254
|
-
}),
|
|
255
|
-
/* @__PURE__ */ jsx(TableCell, {
|
|
256
|
-
"data-testid": `msg-${index}`,
|
|
257
|
-
"aria-label": log_1.msg,
|
|
258
|
-
className: "whitespace-nowrap max-w-[500px] truncate w-full",
|
|
259
|
-
children: log_1.msg
|
|
260
|
-
})
|
|
261
|
-
]
|
|
262
|
-
}, index);
|
|
263
|
-
$[25] = selectLogId;
|
|
264
|
-
$[26] = selectedLogId;
|
|
265
|
-
$[27] = t11$1;
|
|
266
|
-
} else t11$1 = $[27];
|
|
267
|
-
t10 = filteredLogs.map(t11$1);
|
|
268
|
-
$[21] = filteredLogs;
|
|
269
|
-
$[22] = selectLogId;
|
|
270
|
-
$[23] = selectedLogId;
|
|
271
|
-
$[24] = t10;
|
|
272
|
-
} else t10 = $[24];
|
|
273
|
-
let t11;
|
|
274
|
-
if ($[28] !== t10) {
|
|
275
|
-
t11 = /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, {
|
|
276
|
-
className: "font-mono font-medium",
|
|
277
|
-
children: t10
|
|
278
|
-
}) });
|
|
279
|
-
$[28] = t10;
|
|
280
|
-
$[29] = t11;
|
|
281
|
-
} else t11 = $[29];
|
|
282
|
-
let t12;
|
|
283
|
-
if ($[30] !== t11 || $[31] !== t9) {
|
|
284
|
-
t12 = /* @__PURE__ */ jsxs("div", {
|
|
285
|
-
className: "grid grid-rows-[auto_1fr] h-full",
|
|
286
|
-
"data-testid": "logs-container",
|
|
287
|
-
children: [t9, t11]
|
|
288
|
-
});
|
|
289
|
-
$[30] = t11;
|
|
290
|
-
$[31] = t9;
|
|
291
|
-
$[32] = t12;
|
|
292
|
-
} else t12 = $[32];
|
|
293
|
-
let t13;
|
|
294
|
-
if ($[33] !== selectLogId) {
|
|
295
|
-
t13 = () => selectLogId(void 0);
|
|
296
|
-
$[33] = selectLogId;
|
|
297
|
-
$[34] = t13;
|
|
298
|
-
} else t13 = $[34];
|
|
299
|
-
let t14;
|
|
300
|
-
if ($[35] !== selectedLog || $[36] !== t13) {
|
|
301
|
-
t14 = /* @__PURE__ */ jsx(LogDetail, {
|
|
302
|
-
log: selectedLog,
|
|
303
|
-
onClose: t13
|
|
304
|
-
});
|
|
305
|
-
$[35] = selectedLog;
|
|
306
|
-
$[36] = t13;
|
|
307
|
-
$[37] = t14;
|
|
308
|
-
} else t14 = $[37];
|
|
309
|
-
let t15;
|
|
310
|
-
if ($[38] !== t12 || $[39] !== t14) {
|
|
311
|
-
t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t14] });
|
|
312
|
-
$[38] = t12;
|
|
313
|
-
$[39] = t14;
|
|
314
|
-
$[40] = t15;
|
|
315
|
-
} else t15 = $[40];
|
|
316
|
-
return t15;
|
|
317
|
-
};
|
|
318
|
-
function _temp(state) {
|
|
319
|
-
return state.logs;
|
|
320
|
-
}
|
|
321
|
-
function _temp2(state_0) {
|
|
322
|
-
return state_0.resetLogs;
|
|
323
|
-
}
|
|
324
|
-
function _temp3(state_1) {
|
|
325
|
-
return state_1.selectedLogId;
|
|
326
|
-
}
|
|
327
|
-
function _temp4(state_2) {
|
|
328
|
-
return state_2.selectLogId;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
//#endregion
|
|
332
|
-
//#region src/index.ts
|
|
333
|
-
initLogListener();
|
|
334
|
-
|
|
335
|
-
//#endregion
|
|
336
|
-
export { LogsPage };
|
|
337
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["create","Log","LogsState","logs","selectedLogId","addLog","log","setLogs","resetLogs","selectLogId","logId","useLogsStore","set","undefined","state","find","l","id","reverse","Stream","useLogsStore","Log","streamName","groupId","type","initLogListener","stream","window","location","origin","replace","subscription","subscribeGroup","store","getState","addChangeListener","logs","setLogs","onEvent","addLog","formatTimestamp","time","date","Date","Number","toLocaleDateString","year","undefined","month","day","toLocaleTimeString","hour","minute","second","hourCycle","getMilliseconds","toString","padStart","LevelDot","Sidebar","X","React","useMemo","useState","ReactJson","Log","formatTimestamp","Props","log","onClose","defaultProps","LogDetail","FC","hasOtherProps","setHasOtherProps","otherPropsObject","otherProps","Object","keys","filter","key","includes","length","reduce","acc","Record","icon","onClick","label","value","level","time","step","flows","join","traceId","Button","cn","Input","LevelDot","Table","TableBody","TableCell","TableRow","Search","Trash","X","useMemo","useState","useLogsStore","formatTimestamp","LogDetail","LogsPage","$","_c","logs","_temp","resetLogs","_temp2","selectedLogId","_temp3","selectLogId","_temp4","t0","find","log","id","undefined","selectedLog","search","setSearch","t1","t2","log_0","msg","toLowerCase","includes","traceId","step","filter","filteredLogs","Symbol","for","e","target","value","t3","t4","t5","t6","t7","t8","t9","t10","t11","log_1","index","level","time","map","t12","t13","t14","t15","state","state_0","state_1","state_2","initLogListener","LogsPage","Log"],"sources":["../src/stores/use-logs-store.ts","../src/utils/init-log-listener.ts","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx","../src/index.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n logs: Log[]\n selectedLogId?: string\n addLog: (log: Log) => void\n setLogs: (logs: Log[]) => void\n resetLogs: () => void\n selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n logs: [],\n selectedLogId: undefined,\n addLog: (log) =>\n set((state) => {\n if (state.logs.find((l) => l.id === log.id)) {\n return state\n }\n return {\n logs: [log, ...state.logs],\n }\n }),\n setLogs: (logs) =>\n set({\n logs: [...logs].reverse(),\n }),\n resetLogs: () => {\n set({ logs: [] })\n },\n selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\nconst type = 'log'\n\nexport const initLogListener = () => {\n const stream = new Stream(window.location.origin.replace('http', 'ws'))\n const subscription = stream.subscribeGroup<Log>(streamName, groupId)\n const store = useLogsStore.getState()\n\n subscription.addChangeListener((logs) => {\n if (logs) {\n store.setLogs(logs)\n }\n })\n\n subscription.onEvent(type, store.addLog)\n}\n","export const formatTimestamp = (time: number) => {\n const date = new Date(Number(time))\n return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n log?: Log\n onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n const [hasOtherProps, setHasOtherProps] = useState(false)\n\n const otherPropsObject = useMemo(() => {\n if (!log) {\n return null\n }\n\n const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n setHasOtherProps(otherProps.length > 0)\n\n return otherProps.reduce(\n (acc, key) => {\n acc[key] = log[key]\n return acc\n },\n {} as Record<string, unknown>,\n )\n }, [log])\n\n if (!log) {\n return null\n }\n\n return (\n <Sidebar\n onClose={onClose}\n title=\"Logs Details\"\n subtitle=\"Details including custom properties\"\n actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n details={[\n {\n label: 'Level',\n value: (\n <div className=\"flex items-center gap-2\">\n <LevelDot level={log.level} />\n <div className=\"capitalize\">{log.level}</div>\n </div>\n ),\n },\n { label: 'Time', value: formatTimestamp(log.time) },\n { label: 'Step', value: log.step },\n { label: 'Flows', value: log.flows.join(', ') },\n { label: 'Trace ID', value: log.traceId },\n ]}\n >\n {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n </Sidebar>\n )\n}\n","import { Button, cn, Input, LevelDot, Table, TableBody, TableCell, TableRow } from '@motiadev/ui'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nexport const LogsPage = () => {\n const logs = useLogsStore((state) => state.logs)\n const resetLogs = useLogsStore((state) => state.resetLogs)\n const selectedLogId = useLogsStore((state) => state.selectedLogId)\n const selectLogId = useLogsStore((state) => state.selectLogId)\n const selectedLog = useMemo(\n () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n [logs, selectedLogId],\n )\n\n const [search, setSearch] = useState('')\n const filteredLogs = useMemo(() => {\n return logs.filter((log) => {\n return (\n log.msg.toLowerCase().includes(search.toLowerCase()) ||\n log.traceId.toLowerCase().includes(search.toLowerCase()) ||\n log.step.toLowerCase().includes(search.toLowerCase())\n )\n })\n }, [logs, search])\n\n return (\n <>\n <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n <div className=\"flex-1 relative\">\n <Input\n variant=\"shade\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n className=\"px-9! font-medium\"\n placeholder=\"Search by Trace ID or Message\"\n />\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n <X\n className=\"cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground\"\n onClick={() => setSearch('')}\n />\n </div>\n <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n <Trash /> Clear\n </Button>\n </div>\n <Table>\n <TableBody className=\"font-mono font-medium\">\n {filteredLogs.map((log, index) => (\n <TableRow\n data-testid=\"log-row\"\n className={cn('font-mono font-semibold cursor-pointer border-0', {\n 'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n 'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n })}\n key={index}\n onClick={() => selectLogId(log.id)}\n >\n <TableCell\n data-testid={`time-${index}`}\n className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground\"\n >\n <LevelDot level={log.level} />\n {formatTimestamp(log.time)}\n </TableCell>\n <TableCell\n data-testid={`trace-${log.traceId}`}\n className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground\"\n onClick={() => setSearch(log.traceId)}\n >\n {log.traceId}\n </TableCell>\n <TableCell data-testid={`step-${index}`} aria-label={log.step} className=\"whitespace-nowrap\">\n {log.step}\n </TableCell>\n <TableCell\n data-testid={`msg-${index}`}\n aria-label={log.msg}\n className=\"whitespace-nowrap max-w-[500px] truncate w-full\"\n >\n {log.msg}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n </>\n )\n}\n","import { initLogListener } from './utils/init-log-listener'\n\nexport { LogsPage } from './components/logs-page'\nexport type { Log } from './types/log'\n\ninitLogListener()\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["create","Log","LogsState","logs","selectedLogId","addLog","log","setLogs","resetLogs","selectLogId","logId","useLogsStore","set","undefined","state","find","l","id","reverse","Stream","useLogsStore","Log","streamName","groupId","type","initLogListener","stream","window","location","origin","replace","subscription","subscribeGroup","store","getState","addChangeListener","logs","setLogs","onEvent","addLog","formatTimestamp","time","date","Date","Number","toLocaleDateString","year","undefined","month","day","toLocaleTimeString","hour","minute","second","hourCycle","getMilliseconds","toString","padStart","LevelDot","Sidebar","X","React","useMemo","useState","ReactJson","Log","formatTimestamp","Props","log","onClose","defaultProps","LogDetail","FC","hasOtherProps","setHasOtherProps","otherPropsObject","otherProps","Object","keys","filter","key","includes","length","reduce","acc","Record","icon","onClick","label","value","level","time","step","flows","join","traceId","Button","cn","Input","LevelDot","Table","TableBody","TableCell","TableRow","Search","Trash","X","useMemo","useState","useLogsStore","formatTimestamp","LogDetail","LogsPage","$","_c","$i","Symbol","for","logs","_temp","resetLogs","_temp2","selectedLogId","_temp3","selectLogId","_temp4","t0","find","log","id","undefined","selectedLog","search","setSearch","t1","t2","log_0","msg","toLowerCase","includes","traceId","step","filter","filteredLogs","e","target","value","t3","t4","t5","t6","t7","t8","t9","t10","t11","log_1","index","level","time","map","t12","t13","t14","t15","state","state_0","state_1","state_2","initLogListener","LogsPage","Log"],"sources":["../src/stores/use-logs-store.ts","../src/utils/init-log-listener.ts","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx","../src/index.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n logs: Log[]\n selectedLogId?: string\n addLog: (log: Log) => void\n setLogs: (logs: Log[]) => void\n resetLogs: () => void\n selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n logs: [],\n selectedLogId: undefined,\n addLog: (log) =>\n set((state) => {\n if (state.logs.find((l) => l.id === log.id)) {\n return state\n }\n return {\n logs: [log, ...state.logs],\n }\n }),\n setLogs: (logs) =>\n set({\n logs: [...logs].reverse(),\n }),\n resetLogs: () => {\n set({ logs: [] })\n },\n selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\nconst type = 'log'\n\nexport const initLogListener = () => {\n const stream = new Stream(window.location.origin.replace('http', 'ws'))\n const subscription = stream.subscribeGroup<Log>(streamName, groupId)\n const store = useLogsStore.getState()\n\n subscription.addChangeListener((logs) => {\n if (logs) {\n store.setLogs(logs)\n }\n })\n\n subscription.onEvent(type, store.addLog)\n}\n","export const formatTimestamp = (time: number) => {\n const date = new Date(Number(time))\n return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n log?: Log\n onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n const [hasOtherProps, setHasOtherProps] = useState(false)\n\n const otherPropsObject = useMemo(() => {\n if (!log) {\n return null\n }\n\n const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n setHasOtherProps(otherProps.length > 0)\n\n return otherProps.reduce(\n (acc, key) => {\n acc[key] = log[key]\n return acc\n },\n {} as Record<string, unknown>,\n )\n }, [log])\n\n if (!log) {\n return null\n }\n\n return (\n <Sidebar\n onClose={onClose}\n title=\"Logs Details\"\n subtitle=\"Details including custom properties\"\n actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n details={[\n {\n label: 'Level',\n value: (\n <div className=\"flex items-center gap-2\">\n <LevelDot level={log.level} />\n <div className=\"capitalize\">{log.level}</div>\n </div>\n ),\n },\n { label: 'Time', value: formatTimestamp(log.time) },\n { label: 'Step', value: log.step },\n { label: 'Flows', value: log.flows.join(', ') },\n { label: 'Trace ID', value: log.traceId },\n ]}\n >\n {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n </Sidebar>\n )\n}\n","import { Button, cn, Input, LevelDot, Table, TableBody, TableCell, TableRow } from '@motiadev/ui'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nexport const LogsPage = () => {\n const logs = useLogsStore((state) => state.logs)\n const resetLogs = useLogsStore((state) => state.resetLogs)\n const selectedLogId = useLogsStore((state) => state.selectedLogId)\n const selectLogId = useLogsStore((state) => state.selectLogId)\n const selectedLog = useMemo(\n () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n [logs, selectedLogId],\n )\n\n const [search, setSearch] = useState('')\n const filteredLogs = useMemo(() => {\n return logs.filter((log) => {\n return (\n log.msg.toLowerCase().includes(search.toLowerCase()) ||\n log.traceId.toLowerCase().includes(search.toLowerCase()) ||\n log.step.toLowerCase().includes(search.toLowerCase())\n )\n })\n }, [logs, search])\n\n return (\n <>\n <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n <div className=\"flex-1 relative\">\n <Input\n variant=\"shade\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n className=\"px-9! font-medium\"\n placeholder=\"Search by Trace ID or Message\"\n />\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n <X\n className=\"cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground\"\n onClick={() => setSearch('')}\n />\n </div>\n <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n <Trash /> Clear\n </Button>\n </div>\n <Table>\n <TableBody className=\"font-mono font-medium\">\n {filteredLogs.map((log, index) => (\n <TableRow\n data-testid=\"log-row\"\n className={cn('font-mono font-semibold cursor-pointer border-0', {\n 'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n 'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n })}\n key={index}\n onClick={() => selectLogId(log.id)}\n >\n <TableCell\n data-testid={`time-${index}`}\n className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground\"\n >\n <LevelDot level={log.level} />\n {formatTimestamp(log.time)}\n </TableCell>\n <TableCell\n data-testid={`trace-${log.traceId}`}\n className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground\"\n onClick={() => setSearch(log.traceId)}\n >\n {log.traceId}\n </TableCell>\n <TableCell data-testid={`step-${index}`} aria-label={log.step} className=\"whitespace-nowrap\">\n {log.step}\n </TableCell>\n <TableCell\n data-testid={`msg-${index}`}\n aria-label={log.msg}\n className=\"whitespace-nowrap max-w-[500px] truncate w-full\"\n >\n {log.msg}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n </>\n )\n}\n","import { initLogListener } from './utils/init-log-listener'\n\nexport { LogsPage } from './components/logs-page'\nexport type { Log } from './types/log'\n\ninitLogListener()\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@motiadev/plugin-logs",
|
|
3
|
-
"version": "0.14.0-beta.165-
|
|
3
|
+
"version": "0.14.0-beta.165-634707",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
"zustand": "^5.0.8"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@motiadev/
|
|
23
|
-
"@motiadev/
|
|
24
|
-
"@motiadev/
|
|
22
|
+
"@motiadev/ui": "0.14.0-beta.165-634707",
|
|
23
|
+
"@motiadev/core": "0.14.0-beta.165-634707",
|
|
24
|
+
"@motiadev/stream-client-browser": "0.14.0-beta.165-634707"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
|
|
28
|
-
"@bosh-code/tsdown-plugin-tailwindcss": "^1.0.1",
|
|
29
28
|
"@rollup/plugin-babel": "^6.1.0",
|
|
30
29
|
"@tailwindcss/postcss": "^4.1.17",
|
|
30
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
31
31
|
"@types/node": "^24.10.1",
|
|
32
32
|
"@types/react": "^19.2.7",
|
|
33
33
|
"babel-plugin-react-compiler": "^1.0.0",
|