aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/lib/queries.ts20
-rw-r--r--packages/ui/assets/Logo.tsx2
-rw-r--r--packages/ui/components/avatar.tsx2
-rw-r--r--packages/ui/components/button.tsx2
-rw-r--r--packages/ui/components/card.tsx2
-rw-r--r--packages/ui/components/grid-plus.tsx45
-rw-r--r--packages/ui/components/tabs.tsx2
-rw-r--r--packages/ui/globals.css311
-rw-r--r--packages/ui/memory-graph/memory-graph.tsx42
9 files changed, 267 insertions, 161 deletions
diff --git a/packages/lib/queries.ts b/packages/lib/queries.ts
index 3e9e1ab9..23084d33 100644
--- a/packages/lib/queries.ts
+++ b/packages/lib/queries.ts
@@ -10,13 +10,11 @@ type DocumentWithMemories = DocumentsResponse["documents"][0]
export const fetchSubscriptionStatus = (
autumn: ReturnType<typeof useCustomer>,
+ isEnabled: boolean,
) =>
useQuery({
queryFn: async () => {
const allPlans = [
- "pro",
- "memory_starter",
- "memory_growth",
"consumer_pro",
]
const statusMap: Record<string, boolean | null> = {}
@@ -24,7 +22,7 @@ export const fetchSubscriptionStatus = (
await Promise.all(
allPlans.map(async (plan) => {
try {
- const res = await autumn.check({
+ const res = autumn.check({
productId: plan,
})
statusMap[plan] = res.data?.allowed ?? false
@@ -40,31 +38,35 @@ export const fetchSubscriptionStatus = (
queryKey: ["subscription-status"],
refetchInterval: 5000, // Refetch every 5 seconds
staleTime: 4000, // Consider data stale after 4 seconds
+ enabled: isEnabled,
})
// Feature checks
-export const fetchMemoriesFeature = (autumn: ReturnType<typeof useCustomer>) =>
+export const fetchMemoriesFeature = (autumn: ReturnType<typeof useCustomer>, isEnabled: boolean) =>
useQuery({
queryFn: async () => {
- const res = await autumn.check({ featureId: "memories" })
+ const res = autumn.check({ featureId: "memories" })
return res.data
},
queryKey: ["autumn-feature", "memories"],
staleTime: 30 * 1000, // 30 seconds
gcTime: 5 * 60 * 1000, // 5 minutes
+ enabled: isEnabled,
})
export const fetchConnectionsFeature = (
autumn: ReturnType<typeof useCustomer>,
+ isEnabled: boolean,
) =>
useQuery({
queryFn: async () => {
- const res = await autumn.check({ featureId: "connections" })
+ const res = autumn.check({ featureId: "connections" })
return res.data
},
queryKey: ["autumn-feature", "connections"],
staleTime: 30 * 1000, // 30 seconds
gcTime: 5 * 60 * 1000, // 5 minutes
+ enabled: isEnabled,
})
// Product checks
@@ -73,7 +75,7 @@ export const fetchConsumerProProduct = (
) =>
useQuery({
queryFn: async () => {
- const res = await autumn.check({ productId: "consumer_pro" })
+ const res = autumn.check({ productId: "consumer_pro" })
return res.data
},
queryKey: ["autumn-product", "consumer_pro"],
@@ -84,7 +86,7 @@ export const fetchConsumerProProduct = (
export const fetchProProduct = (autumn: ReturnType<typeof useCustomer>) =>
useQuery({
queryFn: async () => {
- const res = await autumn.check({ productId: "pro" })
+ const res = autumn.check({ productId: "pro" })
return res.data
},
queryKey: ["autumn-product", "pro"],
diff --git a/packages/ui/assets/Logo.tsx b/packages/ui/assets/Logo.tsx
index 3b9e98a9..805687d7 100644
--- a/packages/ui/assets/Logo.tsx
+++ b/packages/ui/assets/Logo.tsx
@@ -38,7 +38,7 @@ export const LogoFull = ({
xmlns="http://www.w3.org/2000/svg"
>
<title>supermemory Logo</title>
- <g clipPath="url(#a)" fill="#EFEFEF">
+ <g clipPath="url(#a)" fill="currentColor">
<path d="M330.13 132.123c-11.97 0-21.792-2.607-29.438-7.823-7.66-5.216-12.284-12.665-13.888-22.362l21.477-5.59c.859 4.351 2.319 7.766 4.353 10.244 2.033 2.493 4.567 4.251 7.588 5.317 3.021 1.052 6.329 1.585 9.908 1.585 5.427 0 9.436-.966 12.027-2.882 2.592-1.931 3.895-4.308 3.895-7.175 0-2.868-1.231-5.058-3.709-6.614-2.477-1.556-6.414-2.824-11.855-3.818l-5.183-.936c-6.414-1.24-12.285-2.954-17.582-5.13-5.312-2.175-9.565-5.187-12.772-9.034-3.207-3.847-4.811-8.817-4.811-14.898 0-9.192 3.336-16.238 9.994-21.151 6.672-4.899 15.421-7.363 26.288-7.363 10.237 0 18.756 2.306 25.543 6.887 6.787 4.597 11.226 10.62 13.33 18.068l-21.663 6.7c-.988-4.711-2.992-8.068-6.013-10.057-3.022-1.988-6.759-2.982-11.197-2.982-4.439 0-7.846.778-10.18 2.334-2.348 1.556-3.522 3.703-3.522 6.426 0 2.982 1.231 5.187 3.708 6.613 2.463 1.427 5.799 2.522 9.994 3.257l5.183.936c6.916 1.24 13.173 2.882 18.785 4.942 5.613 2.046 10.051 4.971 13.33 8.76 3.265 3.79 4.911 8.919 4.911 15.374 0 9.682-3.493 17.175-10.466 22.448-6.973 5.288-16.323 7.924-28.049 7.924h.014ZM409.294 131.749c-7.159 0-13.416-1.643-18.785-4.942-5.369-3.285-9.536-7.853-12.499-13.688-2.964-5.835-4.439-12.549-4.439-20.114v-55.14h23.324v53.282c0 6.959 1.69 12.174 5.097 15.647 3.394 3.472 8.233 5.216 14.533 5.216 7.159 0 12.714-2.392 16.666-7.176 3.952-4.783 5.928-11.454 5.928-20.027V37.865h23.324v92.4h-22.952v-12.103h-3.336c-1.475 3.112-4.252 6.152-8.333 9.135-4.066 2.982-10.252 4.466-18.513 4.466l-.015-.014ZM479.095 167.525V37.865h22.952v11.18h3.336c2.09-3.601 5.369-6.8 9.807-9.595 4.439-2.795 10.796-4.193 19.072-4.193 7.402 0 14.261 1.83 20.546 5.49 6.3 3.66 11.355 9.034 15.177 16.108 3.823 7.074 5.742 15.647 5.742 25.704v2.983c0 10.057-1.919 18.63-5.742 25.704-3.822 7.074-8.891 12.449-15.177 16.108-6.3 3.66-13.144 5.49-20.546 5.49-5.555 0-10.209-.648-13.974-1.96-3.766-1.296-6.787-2.982-9.078-5.028-2.291-2.046-4.109-4.121-5.455-6.239h-3.336v47.879h-23.324v.029Zm48.137-55.141c7.288 0 13.301-2.334 18.055-6.988 4.753-4.654 7.13-11.454 7.13-20.402v-1.859c0-8.947-2.405-15.748-7.216-20.402-4.811-4.653-10.796-6.987-17.955-6.987-7.159 0-13.144 2.334-17.955 6.987-4.81 4.654-7.216 11.455-7.216 20.402v1.86c0 8.947 2.406 15.747 7.216 20.401 4.811 4.654 10.796 6.988 17.955 6.988h-.014ZM629.792 132.873c-9.135 0-17.182-1.96-24.155-5.864-6.973-3.919-12.399-9.438-16.294-16.584-3.88-7.147-5.827-15.561-5.827-25.243v-2.234c0-9.682 1.904-18.096 5.741-25.243 3.823-7.146 9.193-12.665 16.108-16.584 6.916-3.904 14.934-5.864 24.069-5.864s16.852 2.017 23.51 6.051c6.658 4.035 11.855 9.625 15.549 16.772 3.709 7.146 5.556 15.43 5.556 24.868v8.011h-66.837c.244 6.34 2.592 11.484 7.03 15.46 4.439 3.977 9.88 5.965 16.294 5.965 6.415 0 11.354-1.426 14.433-4.279 3.078-2.853 5.426-6.023 7.03-9.495l19.071 10.057c-1.732 3.227-4.223 6.743-7.502 10.532-3.279 3.79-7.617 7.017-13.058 9.683-5.427 2.665-12.342 4.005-20.733 4.005l.015-.014Zm-22.408-59.434h42.954c-.501-5.346-2.62-9.625-6.386-12.852-3.765-3.228-8.677-4.842-14.719-4.842s-11.297 1.614-14.991 4.842c-3.708 3.227-5.985 7.52-6.844 12.852h-.014ZM685.517 130.265v-92.4h22.952v10.431h3.336c1.36-3.731 3.608-6.454 6.758-8.198 3.15-1.743 6.816-2.608 11.011-2.608h11.111v20.863h-11.483c-5.928 0-10.796 1.585-14.619 4.755-3.823 3.17-5.742 8.04-5.742 14.624v52.533h-23.324ZM749.562 130.265v-92.4h22.951v10.057h3.337c1.603-3.098 4.252-5.807 7.96-8.098 3.709-2.29 8.577-3.443 14.619-3.443 6.543 0 11.784 1.268 15.736 3.818 3.951 2.55 6.972 5.864 9.077 9.97h3.336c2.091-3.976 5.055-7.261 8.892-9.87 3.823-2.607 9.249-3.904 16.294-3.904 5.67 0 10.824 1.21 15.463 3.631 4.625 2.42 8.333 6.08 11.111 10.993 2.778 4.914 4.166 11.08 4.166 18.544v60.731H859.18v-59.06c0-5.086-1.303-8.904-3.88-11.454-2.591-2.55-6.242-3.819-10.924-3.819-5.312 0-9.407 1.715-12.314 5.13-2.906 3.415-4.353 8.285-4.353 14.624v54.593h-23.324v-59.06c0-5.085-1.303-8.904-3.88-11.454-2.591-2.55-6.242-3.818-10.924-3.818-5.312 0-9.407 1.715-12.314 5.13-2.906 3.414-4.353 8.284-4.353 14.624v54.592H749.59l-.028-.057ZM940.249 132.873c-9.135 0-17.182-1.96-24.155-5.864-6.972-3.919-12.399-9.438-16.293-16.584-3.881-7.147-5.828-15.561-5.828-25.243v-2.234c0-9.682 1.904-18.096 5.742-25.243 3.823-7.146 9.192-12.665 16.107-16.584 6.916-3.904 14.934-5.864 24.069-5.864s16.852 2.017 23.51 6.051c6.658 4.035 11.855 9.625 15.549 16.772 3.709 7.146 5.556 15.43 5.556 24.868v8.011h-66.837c.244 6.34 2.592 11.484 7.031 15.46 4.438 3.977 9.879 5.965 16.294 5.965 6.414 0 11.354-1.426 14.446-4.279 3.079-2.853 5.427-6.023 7.031-9.495l19.071 10.057c-1.732 3.227-4.224 6.743-7.503 10.532-3.278 3.79-7.617 7.017-13.058 9.683-5.426 2.665-12.342 4.005-20.732 4.005v-.014Zm-22.393-59.434h42.954c-.502-5.346-2.621-9.625-6.386-12.852-3.766-3.228-8.677-4.842-14.719-4.842s-11.297 1.614-14.991 4.842c-3.708 3.227-5.985 7.52-6.844 12.852h-.014ZM995.975 130.265v-92.4h22.955v10.057h3.33c1.61-3.098 4.25-5.807 7.96-8.098 3.71-2.29 8.58-3.443 14.62-3.443 6.55 0 11.79 1.268 15.74 3.818 3.95 2.55 6.97 5.864 9.08 9.97h3.33c2.09-3.976 5.06-7.261 8.89-9.87 3.83-2.607 9.25-3.904 16.3-3.904 5.67 0 10.82 1.21 15.46 3.631 4.62 2.42 8.33 6.08 11.11 10.993 2.78 4.914 4.17 11.08 4.17 18.544v60.731h-23.33v-59.06c0-5.086-1.3-8.904-3.88-11.454-2.59-2.55-6.24-3.819-10.92-3.819-5.31 0-9.41 1.715-12.32 5.13-2.9 3.415-4.35 8.285-4.35 14.624v54.593h-23.32v-59.06c0-5.085-1.3-8.904-3.88-11.454-2.59-2.55-6.24-3.818-10.93-3.818-5.31 0-9.4 1.715-12.31 5.13-2.91 3.414-4.35 8.284-4.35 14.624v54.592h-23.327l-.028-.057ZM1188.52 132.873c-9.13 0-17.34-1.859-24.62-5.591-7.29-3.731-13.03-9.134-17.23-16.209-4.19-7.074-6.3-15.59-6.3-25.517v-2.982c0-9.942 2.09-18.443 6.3-25.517 4.2-7.075 9.94-12.478 17.23-16.21 7.27-3.731 15.49-5.59 24.62-5.59 9.14 0 17.34 1.859 24.63 5.59 7.27 3.732 13.02 9.135 17.22 16.21 4.2 7.074 6.29 15.59 6.29 25.517v2.982c0 9.942-2.1 18.443-6.29 25.517-4.19 7.075-9.93 12.478-17.22 16.209-7.29 3.732-15.49 5.591-24.63 5.591Zm0-20.863c7.16 0 13.08-2.335 17.77-6.988 4.7-4.654 7.03-11.34 7.03-20.028v-1.859c0-8.688-2.32-15.373-6.94-20.027-4.63-4.654-10.58-6.988-17.87-6.988-7.29 0-13.09 2.334-17.77 6.988-4.7 4.654-7.03 11.34-7.03 20.027v1.86c0 8.687 2.33 15.373 7.03 20.027 4.7 4.653 10.61 6.988 17.77 6.988h.01ZM1248.87 130.265v-92.4h22.96v10.431h3.33c1.36-3.731 3.61-6.454 6.76-8.198 3.15-1.743 6.81-2.608 11.01-2.608h11.11v20.863h-11.48c-5.93 0-10.8 1.585-14.62 4.755-3.82 3.17-5.74 8.04-5.74 14.624v52.533h-23.33ZM1322.93 167.525v-20.489h49.98c3.45 0 5.18-1.859 5.18-5.59v-23.284h-3.33c-.99 2.118-2.54 4.222-4.63 6.34-2.1 2.118-4.94 3.847-8.52 5.215-3.58 1.369-8.14 2.046-13.7 2.046-7.16 0-13.43-1.642-18.78-4.942-5.37-3.285-9.54-7.852-12.5-13.688-2.97-5.835-4.44-12.549-4.44-20.113V37.865h23.32v53.282c0 6.959 1.69 12.174 5.1 15.647 3.39 3.472 8.23 5.216 14.53 5.216 7.16 0 12.72-2.392 16.67-7.176 3.95-4.783 5.93-11.454 5.93-20.027V37.865h23.32V146.66c0 6.34-1.85 11.397-5.56 15.187-3.7 3.789-8.64 5.677-14.8 5.677H1322.93ZM1420.63 44.853h7.98v22.822h6.58V44.853h7.98V38.7h-22.54v6.153ZM1465.12 38.7l-4.5 22.794-4.48-22.794h-10.88v28.975h6.43v-20.69l4.09 20.69h9.7l4.09-20.69v20.69h6.43V38.7h-10.88ZM205.864 66.263h-76.401V0h-24.684v71.897c0 7.636 3.021 14.97 8.391 20.373l62.383 62.777 17.454-17.564-46.076-46.365h58.948v-24.84l-.015-.015ZM12.872 30.517l46.075 46.365H0v24.84h76.4v66.264h24.685V96.089c0-7.637-3.021-14.97-8.39-20.374l-62.37-62.762-17.453 17.564Z" />
</g>
<defs>
diff --git a/packages/ui/components/avatar.tsx b/packages/ui/components/avatar.tsx
index db668678..ba7bdc54 100644
--- a/packages/ui/components/avatar.tsx
+++ b/packages/ui/components/avatar.tsx
@@ -11,7 +11,7 @@ function Avatar({
return (
<AvatarPrimitive.Root
className={cn(
- "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+ "relative flex size-8 shrink-0 overflow-hidden rounded-full hover:cursor-pointer",
className,
)}
data-slot="avatar"
diff --git a/packages/ui/components/button.tsx b/packages/ui/components/button.tsx
index 3a671e03..6aee692a 100644
--- a/packages/ui/components/button.tsx
+++ b/packages/ui/components/button.tsx
@@ -19,12 +19,14 @@ const buttonVariants = cva(
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
+ settingsNav: "cursor-pointer rounded-sm bg-transparent",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
+ settingsNav: "h-8 gap-0 px-0 py-0",
},
},
defaultVariants: {
diff --git a/packages/ui/components/card.tsx b/packages/ui/components/card.tsx
index 2086d12e..40732f25 100644
--- a/packages/ui/components/card.tsx
+++ b/packages/ui/components/card.tsx
@@ -18,7 +18,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn(
- "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+ "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
className,
)}
data-slot="card-header"
diff --git a/packages/ui/components/grid-plus.tsx b/packages/ui/components/grid-plus.tsx
new file mode 100644
index 00000000..b5b31bdb
--- /dev/null
+++ b/packages/ui/components/grid-plus.tsx
@@ -0,0 +1,45 @@
+interface PlusPatternBackgroundProps {
+ plusSize?: number;
+ plusColor?: string;
+ backgroundColor?: string;
+ className?: string;
+ style?: React.CSSProperties;
+ fade?: boolean;
+ [key: string]: any;
+}
+
+export const BackgroundPlus: React.FC<PlusPatternBackgroundProps> = ({
+ plusColor = "#6b6b6b",
+ backgroundColor = "transparent",
+ plusSize = 60,
+ className,
+ fade = true,
+ style,
+ ...props
+}) => {
+ const encodedPlusColor = encodeURIComponent(plusColor);
+
+ const maskStyle: React.CSSProperties = fade
+ ? {
+ maskImage: "radial-gradient(circle, white 10%, transparent 90%)",
+ WebkitMaskImage: "radial-gradient(circle, white 10%, transparent 90%)",
+ }
+ : {};
+
+ const backgroundStyle: React.CSSProperties = {
+ backgroundColor,
+ backgroundImage: `url("data:image/svg+xml,%3Csvg width='${plusSize}' height='${plusSize}' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='${encodedPlusColor}' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+ ...maskStyle,
+ ...style,
+ };
+
+ return (
+ <div
+ className={`absolute inset-0 h-full w-full ${className}`}
+ style={backgroundStyle}
+ {...props}
+ />
+ );
+};
+
+export default BackgroundPlus; \ No newline at end of file
diff --git a/packages/ui/components/tabs.tsx b/packages/ui/components/tabs.tsx
index 4f316dd1..42aae355 100644
--- a/packages/ui/components/tabs.tsx
+++ b/packages/ui/components/tabs.tsx
@@ -40,7 +40,7 @@ function TabsTrigger({
return (
<TabsPrimitive.Trigger
className={cn(
- "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "data-[state=active]:bg-accent dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-md [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
data-slot="tabs-trigger"
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index b82b94da..c6c904c9 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -4,160 +4,167 @@
@source "../../apps/**/*.tsx";
@source "../../packages/**/*.tsx";
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
- --color-background: var(--color-sm-shark-alt);
- --color-background: var(--color-sm-shark-alt);
+@theme {
+ --color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans:
"Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- --font-sans:
+ --font-serif:
"Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: var(--font-mono);
- --color-sidebar-ring: var(--sidebar-ring);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar: var(--sidebar);
- --color-chart-5: var(--chart-5);
- --color-chart-4: var(--chart-4);
- --color-chart-3: var(--chart-3);
- --color-chart-2: var(--chart-2);
- --color-chart-1: var(--chart-1);
- --color-ring: var(--ring);
- --color-input: var(--input);
- --color-border: var(--border);
- --color-destructive: var(--destructive);
- --color-accent-foreground: var(--accent-foreground);
- --color-accent: var(--accent);
- --color-muted-foreground: var(--muted-foreground);
- --color-muted: var(--muted);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-secondary: var(--secondary);
- --color-primary-foreground: var(--primary-foreground);
- --color-primary: var(--primary);
- --color-popover-foreground: var(--popover-foreground);
- --color-popover: var(--popover);
- --color-card-foreground: var(--card-foreground);
--color-card: var(--card);
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
-
- /* Design System */
- --color-sm-alto: #dedede;
- --color-sm-black: #000000;
- --color-sm-boulder: #777777;
- --color-sm-bunker: #090b0e;
- --color-sm-charcoal: #2e2e2e;
- --color-sm-dodger-blue: #267ffa;
- --color-sm-chelsea-gem: #aa5d00;
- --color-sm-dove-gray: #696969;
- --color-sm-emperor: #545454;
- --color-sm-gallery: #efefef;
- --color-sm-gray: #888888;
- --color-sm-heliotrope: #c472fb;
- --color-sm-japanese-laurel: #008000;
- --color-sm-mercury: #e1e1e1;
- --color-sm-mine-shaft: #383838;
- --color-sm-niagara: #0aa49f;
- --color-sm-picton-blue: #3f96e6;
- --color-sm-red-orange: #fb2c36;
- --color-sm-seance: #7928a1;
- --color-sm-selective-yellow: #ffb900;
- --color-sm-shark: #1c2026;
- --color-sm-shark-alt: #1c2026;
- --color-sm-light-shark: #2b2e33;
- --color-sm-silver-chalice: #b0b0b0;
- --color-sm-tundora: #4d4d4d;
- --color-sm-white: #ffffff;
- --color-sm-white-alt: #fefefe;
- --color-sm-wild-watermelon: #ff4d8d;
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
}
:root {
- --radius: 0.625rem;
- --background: oklch(1 0 0);
- --foreground: oklch(0.141 0.005 285.823);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.141 0.005 285.823);
+ --radius: 0.75rem;
+ --background: oklch(0.9846 0.0017 247.8389);
+ --foreground: oklch(0.2744 0.0073 285.9081);
+ --card: oklch(0.9851 0 0);
+ --card-foreground: oklch(0.2744 0.0073 285.9081);
--popover: oklch(1 0 0);
- --popover-foreground: oklch(0.141 0.005 285.823);
- --primary: oklch(0.21 0.006 285.885);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.967 0.001 286.375);
- --secondary-foreground: oklch(0.21 0.006 285.885);
- --muted: oklch(0.967 0.001 286.375);
- --muted-foreground: oklch(0.552 0.016 285.938);
- --accent: oklch(0.967 0.001 286.375);
- --accent-foreground: oklch(0.21 0.006 285.885);
- --destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.92 0.004 286.32);
- --input: oklch(0.92 0.004 286.32);
- --ring: oklch(0.705 0.015 286.067);
- --chart-1: oklch(0.646 0.222 41.116);
- --chart-2: oklch(0.6 0.118 184.704);
- --chart-3: oklch(0.398 0.07 227.392);
- --chart-4: oklch(0.828 0.189 84.429);
- --chart-5: oklch(0.769 0.188 70.08);
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.141 0.005 285.823);
- --sidebar-primary: oklch(0.21 0.006 285.885);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.967 0.001 286.375);
- --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
- --sidebar-border: oklch(0.92 0.004 286.32);
- --sidebar-ring: oklch(0.705 0.015 286.067);
+ --popover-foreground: oklch(0.2744 0.0073 285.9081);
+ --primary: oklch(0.614 0.2014 258.1073);
+ --primary-foreground: oklch(0.9851 0 0);
+ --secondary: oklch(0.9378 0.0296 262.5395);
+ --secondary-foreground: oklch(0.614 0.2014 258.1073);
+ --muted: oklch(0.9846 0.0017 247.8389);
+ --muted-foreground: oklch(0.5693 0 0);
+ --accent: oklch(0.92 0.0054 286.2936);
+ --accent-foreground: oklch(0.2744 0.0073 285.9081);
+ --destructive: oklch(0.6368 0.2078 25.3313);
+ --border: oklch(0.9366 0.0017 247.8401);
+ --input: oklch(0.9702 0 0);
+ --ring: oklch(1 0 0);
+ --chart-1: oklch(0.7197 0.1448 266.6983);
+ --chart-2: oklch(0.8101 0.1488 148.2032);
+ --chart-3: oklch(0.7507 0.1353 58.4182);
+ --chart-4: oklch(0.7253 0.1752 349.7607);
+ --chart-5: oklch(0.7535 0.139 232.6615);
+ --sidebar: oklch(0.9851 0 0);
+ --sidebar-foreground: oklch(0.2744 0.0073 285.9081);
+ --sidebar-primary: oklch(0.9851 0 0);
+ --sidebar-primary-foreground: oklch(0.2744 0.0073 285.9081);
+ --sidebar-accent: oklch(0.92 0.0054 286.2936);
+ --sidebar-accent-foreground: oklch(0.2744 0.0073 285.9081);
+ --sidebar-border: oklch(0.9366 0.0017 247.8401);
+ --sidebar-ring: oklch(0.9889 0.0053 17.2475);
+ --destructive-foreground: oklch(0.967 0.0029 264.5419);
+ --font-sans: Space Grotesk, ui-sans-serif, sans-serif, system-ui;
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+ --font-mono: Space Mono, ui-monospace, monospace;
+ --shadow-color: oklch(0 0 0);
+ --shadow-opacity: 0.04;
+ --shadow-blur: 3px;
+ --shadow-spread: 0px;
+ --shadow-offset-x: 0;
+ --shadow-offset-y: 1px;
+ --letter-spacing: -0.01em;
+ --spacing: 0.24rem;
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
+ --shadow-sm:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
+ --shadow:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
+ --shadow-md:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 2px 4px -1px hsl(0 0% 0% / 0.04);
+ --shadow-lg:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 4px 6px -1px hsl(0 0% 0% / 0.04);
+ --shadow-xl:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 8px 10px -1px hsl(0 0% 0% / 0.04);
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1);
+ --tracking-normal: -0.01em;
}
.dark {
- --background: oklch(0.141 0.005 285.823);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.21 0.006 285.885);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.21 0.006 285.885);
+ --background: oklch(0.1487 0.0073 258.0408);
+ --foreground: oklch(0.967 0.0029 264.5419);
+ --card: oklch(0.1487 0.0073 258.0408);
+ --card-foreground: oklch(0.967 0.0029 264.5419);
+ --popover: oklch(0.2264 0 0);
--popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.92 0.004 286.32);
- --primary-foreground: oklch(0.21 0.006 285.885);
- --secondary: oklch(0.274 0.006 286.033);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.274 0.006 286.033);
- --muted-foreground: oklch(0.705 0.015 286.067);
- --accent: oklch(0.274 0.006 286.033);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.552 0.016 285.938);
- --chart-1: oklch(0.488 0.243 264.376);
- --chart-2: oklch(0.696 0.17 162.48);
- --chart-3: oklch(0.769 0.188 70.08);
- --chart-4: oklch(0.627 0.265 303.9);
- --chart-5: oklch(0.645 0.246 16.439);
- --sidebar: var(--color-sm-black);
- --sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.488 0.243 264.376);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.274 0.006 286.033);
- --sidebar-accent-foreground: oklch(0.985 0 0);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@layer base {
- * {
- @apply border-border outline-ring/50;
- }
- body {
- @apply bg-background text-foreground;
- }
+ --primary: oklch(0.614 0.2014 258.1073);
+ --primary-foreground: oklch(0.967 0.0029 264.5419);
+ --secondary: oklch(0.967 0.0029 264.5419);
+ --secondary-foreground: oklch(0.1487 0.0073 258.0408);
+ --muted: oklch(0.1482 0.0055 247.8035);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.3012 0 0);
+ --accent-foreground: oklch(0.967 0.0029 264.5419);
+ --destructive: oklch(0.6368 0.2078 25.3313);
+ --border: oklch(0.3715 0 0);
+ --input: oklch(0.262 0.0074 285.8781);
+ --ring: oklch(0 0 0);
+ --chart-1: oklch(0.7197 0.1448 266.6983);
+ --chart-2: oklch(0.8101 0.1488 148.2032);
+ --chart-3: oklch(0.7507 0.1353 58.4182);
+ --chart-4: oklch(0.7253 0.1752 349.7607);
+ --chart-5: oklch(0.7535 0.139 232.6615);
+ --sidebar: oklch(0.2264 0 0);
+ --sidebar-foreground: oklch(0.967 0.0029 264.5419);
+ --sidebar-primary: oklch(0.2264 0 0);
+ --sidebar-primary-foreground: oklch(0.967 0.0029 264.5419);
+ --sidebar-accent: oklch(0.3012 0 0);
+ --sidebar-accent-foreground: oklch(0.967 0.0029 264.5419);
+ --sidebar-border: oklch(0.3715 0 0);
+ --sidebar-ring: oklch(0 0 0);
+ --destructive-foreground: oklch(0.967 0.0029 264.5419);
+ --radius: 0.75rem;
+ --font-sans: Space Grotesk, ui-sans-serif, sans-serif, system-ui;
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+ --font-mono: Space Mono, ui-monospace, monospace;
+ --shadow-color: oklch(0 0 0);
+ --shadow-opacity: 0.04;
+ --shadow-blur: 3px;
+ --shadow-spread: 0px;
+ --shadow-offset-x: 0;
+ --shadow-offset-y: 1px;
+ --letter-spacing: -0.01em;
+ --spacing: 0.24rem;
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
+ --shadow-sm:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
+ --shadow:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
+ --shadow-md:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 2px 4px -1px hsl(0 0% 0% / 0.04);
+ --shadow-lg:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 4px 6px -1px hsl(0 0% 0% / 0.04);
+ --shadow-xl:
+ 0 1px 3px 0px hsl(0 0% 0% / 0.04), 0 8px 10px -1px hsl(0 0% 0% / 0.04);
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1);
}
/* Custom Scrollbar Styles */
@@ -223,3 +230,31 @@
.memory-sheet-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.15);
}
+
+/* Memory Dialog Scrollbar Styles */
+.memory-dialog-scroll::-webkit-scrollbar {
+ width: 8px;
+}
+
+.memory-dialog-scroll::-webkit-scrollbar-track {
+ background: hsl(var(--muted) / 0.05);
+}
+
+.memory-dialog-scroll::-webkit-scrollbar-thumb {
+ background: hsl(var(--border) / 0.5);
+ border-radius: 4px;
+}
+
+.memory-dialog-scroll::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--border) / 0.7);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ letter-spacing: var(--tracking-normal);
+ }
+}
diff --git a/packages/ui/memory-graph/memory-graph.tsx b/packages/ui/memory-graph/memory-graph.tsx
index 912a741a..69c544f3 100644
--- a/packages/ui/memory-graph/memory-graph.tsx
+++ b/packages/ui/memory-graph/memory-graph.tsx
@@ -129,17 +129,19 @@ export const MemoryGraph = ({
containerSize.width > 0 &&
containerSize.height > 0
) {
- // For consumer variant, auto-fit to show all content
- if (variant === "consumer") {
+ // Auto-fit to show all content for both variants
+ // Add a small delay to ensure the canvas is fully initialized
+ const timer = setTimeout(() => {
autoFitToViewport(nodes, containerSize.width, containerSize.height);
hasAutoFittedRef.current = true;
- }
+ }, 100);
+
+ return () => clearTimeout(timer);
}
}, [
nodes,
containerSize.width,
containerSize.height,
- variant,
autoFitToViewport,
]);
@@ -175,16 +177,36 @@ export const MemoryGraph = ({
useEffect(() => {
const updateSize = () => {
if (containerRef.current) {
- setContainerSize({
- width: containerRef.current.clientWidth,
- height: containerRef.current.clientHeight,
+ const newWidth = containerRef.current.clientWidth;
+ const newHeight = containerRef.current.clientHeight;
+
+ // Only update if size actually changed and is valid
+ setContainerSize((prev) => {
+ if (prev.width !== newWidth || prev.height !== newHeight) {
+ return { width: newWidth, height: newHeight };
+ }
+ return prev;
});
}
};
- updateSize();
+ // Use a slight delay to ensure DOM is fully rendered
+ const timer = setTimeout(updateSize, 0);
+ updateSize(); // Also call immediately
+
window.addEventListener("resize", updateSize);
- return () => window.removeEventListener("resize", updateSize);
+
+ // Use ResizeObserver for more accurate container size detection
+ const resizeObserver = new ResizeObserver(updateSize);
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current);
+ }
+
+ return () => {
+ clearTimeout(timer);
+ window.removeEventListener("resize", updateSize);
+ resizeObserver.disconnect();
+ };
}, []);
// Enhanced node drag start that includes nodes data
@@ -390,7 +412,7 @@ export const MemoryGraph = ({
WebkitUserSelect: "none",
}}
>
- {containerSize.width > 0 && (
+ {(containerSize.width > 0 && containerSize.height > 0) && (
<GraphCanvas
draggingNodeId={draggingNodeId}
edges={edges}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 04:09:25 +0000