From 56adc246c80a1f814b7a9f22d1cecbc83a11deab Mon Sep 17 00:00:00 2001
From: Harshith Mullapudi <harshithmullapudi@gmail.com>
Date: Tue, 10 Jun 2025 12:26:04 +0530
Subject: [PATCH] Feat: UI changes

---
 .eslintignore                                 |   4 +-
 apps/webapp/.eslintignore                     |   1 +
 apps/webapp/.eslintrc                         |  15 ++-
 apps/webapp/app/components/dashboard/index.ts |   1 +
 .../app/components/dashboard/ingest.tsx       |  47 +++++++
 .../app/components/graph/graph-popover.tsx    |  27 +---
 .../components/graph/graph-visualization.tsx  |  17 ++-
 apps/webapp/app/components/graph/graph.tsx    |   2 +-
 .../app/components/graph/node-colors.ts       |  52 ++++----
 apps/webapp/app/components/graph/utils.ts     | 107 ++++++++++++++++
 .../app/components/layout/LoginPageLayout.tsx |  15 +--
 .../app/components/sidebar/app-sidebar.tsx    |   4 +-
 .../app/components/sidebar/nav-main.tsx       |   9 +-
 apps/webapp/app/components/ui/resizable.tsx   |  47 +++++++
 apps/webapp/app/components/ui/tabs.tsx        |  53 ++++++++
 apps/webapp/app/components/ui/textarea.tsx    |  36 ++++++
 .../app/hooks/use-autosize-textarea.tsx       |  23 ++++
 apps/webapp/app/hooks/use-local-state.tsx     |  26 ++++
 apps/webapp/app/hooks/useWorkspace.ts         |   5 +-
 apps/webapp/app/lib/ingest.queue.ts           |  45 -------
 apps/webapp/app/lib/ingest.server.ts          | 116 ++++++++++++++++++
 apps/webapp/app/lib/model.server.ts           |   2 +-
 apps/webapp/app/lib/neo4j.server.ts           |  91 +++++++++++++-
 apps/webapp/app/root.tsx                      |   5 +-
 apps/webapp/app/routes/_index.tsx             |  47 ++-----
 apps/webapp/app/routes/auth.google.tsx        |   1 -
 .../app/routes/confirm-basic-details.tsx      |   4 -
 apps/webapp/app/routes/home.dashboard.tsx     |  95 ++++++++++++++
 apps/webapp/app/routes/home.tsx               |  58 +++++++++
 apps/webapp/app/routes/ingest.tsx             |  48 +-------
 apps/webapp/app/routes/search.tsx             |   5 +-
 .../app/services/apiRateLimit.server.ts       |  15 ++-
 apps/webapp/app/services/googleAuth.server.ts |   2 -
 .../app/services/graphModels/episode.ts       |   5 -
 .../app/services/graphModels/statement.ts     |   1 -
 .../app/services/knowledgeGraph.server.ts     |   3 +-
 apps/webapp/app/services/search.server.ts     |   2 +-
 apps/webapp/app/services/search/rerank.ts     |   2 +-
 apps/webapp/app/services/search/utils.ts      |  10 +-
 apps/webapp/app/utils/pathBuilder.ts          |   8 ++
 .../app/utils/presets/{apps.ts => nodes.ts}   |   4 +
 apps/webapp/package.json                      |   2 +-
 apps/webapp/vite.config.ts                    |   2 +-
 packages/types/src/graph/graph.entity.ts      |   1 -
 pnpm-lock.yaml                                |  14 +++
 turbo.json                                    |  17 +--
 46 files changed, 840 insertions(+), 256 deletions(-)
 create mode 100644 apps/webapp/.eslintignore
 create mode 100644 apps/webapp/app/components/dashboard/index.ts
 create mode 100644 apps/webapp/app/components/dashboard/ingest.tsx
 create mode 100644 apps/webapp/app/components/graph/utils.ts
 create mode 100644 apps/webapp/app/components/ui/resizable.tsx
 create mode 100644 apps/webapp/app/components/ui/tabs.tsx
 create mode 100644 apps/webapp/app/components/ui/textarea.tsx
 create mode 100644 apps/webapp/app/hooks/use-autosize-textarea.tsx
 create mode 100644 apps/webapp/app/hooks/use-local-state.tsx
 delete mode 100644 apps/webapp/app/lib/ingest.queue.ts
 create mode 100644 apps/webapp/app/lib/ingest.server.ts
 create mode 100644 apps/webapp/app/routes/home.dashboard.tsx
 create mode 100644 apps/webapp/app/routes/home.tsx
 rename apps/webapp/app/utils/presets/{apps.ts => nodes.ts} (96%)

diff --git a/.eslintignore b/.eslintignore
index 827344f..bd515ce 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,6 @@
 */**.js
 */**.d.ts
 packages/*/dist
-packages/*/lib
\ No newline at end of file
+packages/*/lib
+
+build/
\ No newline at end of file
diff --git a/apps/webapp/.eslintignore b/apps/webapp/.eslintignore
new file mode 100644
index 0000000..d298be1
--- /dev/null
+++ b/apps/webapp/.eslintignore
@@ -0,0 +1 @@
+public/
\ No newline at end of file
diff --git a/apps/webapp/.eslintrc b/apps/webapp/.eslintrc
index 9f1bc38..9a70110 100644
--- a/apps/webapp/.eslintrc
+++ b/apps/webapp/.eslintrc
@@ -5,7 +5,6 @@
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {
-   
         "@typescript-eslint/consistent-type-imports": [
           "warn",
           {
@@ -13,15 +12,15 @@
             // during some autofixes, so easier to just turn it off
             "prefer": "type-imports",
             "disallowTypeAnnotations": true,
-            "fixStyle": "inline-type-imports"
-          }
+            "fixStyle": "inline-type-imports",
+          },
         ],
-    
+
         "import/no-duplicates": ["warn", { "prefer-inline": true }],
         // lots of undeclared vars, enable this rule if you want to clean them up
-        "turbo/no-undeclared-env-vars": "off"
-      }
-    }
+        "turbo/no-undeclared-env-vars": "off",
+      },
+    },
   ],
-  "ignorePatterns": []
+  "ignorePatterns": ["public/"],
 }
diff --git a/apps/webapp/app/components/dashboard/index.ts b/apps/webapp/app/components/dashboard/index.ts
new file mode 100644
index 0000000..6e99c11
--- /dev/null
+++ b/apps/webapp/app/components/dashboard/index.ts
@@ -0,0 +1 @@
+export * from "./ingest";
diff --git a/apps/webapp/app/components/dashboard/ingest.tsx b/apps/webapp/app/components/dashboard/ingest.tsx
new file mode 100644
index 0000000..d2ece62
--- /dev/null
+++ b/apps/webapp/app/components/dashboard/ingest.tsx
@@ -0,0 +1,47 @@
+import { PlusIcon } from "lucide-react";
+import { Button } from "../ui";
+import { Textarea } from "../ui/textarea";
+import { useState } from "react";
+import { z } from "zod";
+import { EpisodeType } from "@core/types";
+
+export const IngestBodyRequest = z.object({
+  episodeBody: z.string(),
+  referenceTime: z.string(),
+  type: z.enum([EpisodeType.Conversation, EpisodeType.Text]), // Assuming these are the EpisodeType values
+  source: z.string(),
+  spaceId: z.string().optional(),
+  sessionId: z.string().optional(),
+});
+
+export const Ingest = () => {
+  const [text, setText] = useState("");
+
+  return (
+    <div className="flex flex-col">
+      <form method="POST" action="/home/dashboard" className="flex flex-col">
+        <input type="hidden" name="type" value="TEXT" />
+        <input
+          type="hidden"
+          name="referenceTime"
+          value={new Date().toISOString()}
+        />
+        <input type="hidden" name="source" value="local" />
+
+        <Textarea
+          name="episodeBody"
+          value={text}
+          placeholder="Tell what you want to add"
+          onChange={(e) => setText(e.target.value)}
+        />
+
+        <div className="mt-2 flex justify-end">
+          <Button type="submit" variant="secondary" className="gap-1">
+            <PlusIcon size={16} />
+            Add
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/webapp/app/components/graph/graph-popover.tsx b/apps/webapp/app/components/graph/graph-popover.tsx
index e8ce04b..7af0ddf 100644
--- a/apps/webapp/app/components/graph/graph-popover.tsx
+++ b/apps/webapp/app/components/graph/graph-popover.tsx
@@ -75,10 +75,11 @@ export function GraphPopovers({
     if (!nodePopupContent) {
       return [];
     }
+
     const entityProperties = Object.fromEntries(
-      Object.entries(nodePopupContent.node.attributes || {}).filter(
-        ([key]) => key !== "labels",
-      ),
+      Object.entries(nodePopupContent.node.attributes || {}).filter(([key]) => {
+        return key !== "labels" && !key.includes("Embedding");
+      }),
     );
 
     return Object.entries(entityProperties).map(([key, value]) => ({
@@ -181,24 +182,6 @@ export function GraphPopovers({
                   </div>
                 </div>
               )}
-
-              {nodePopupContent?.node.labels?.length ? (
-                <div className="border-border border-t pt-2">
-                  <p className="mb-1 text-sm font-medium text-black dark:text-white">
-                    Labels:
-                  </p>
-                  <div className="mt-1 flex flex-wrap gap-2">
-                    {nodePopupContent.node.labels.map((label) => (
-                      <span
-                        key={label}
-                        className="bg-muted rounded-md px-2 py-1 text-xs"
-                      >
-                        {label}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
             </div>
           </div>
         </PopoverContent>
@@ -215,7 +198,7 @@ export function GraphPopovers({
           sideOffset={5}
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          <div className="bg-muted mb-4 rounded-md p-2">
+          <div className="bg-grayAlpha-100 mb-4 rounded-md p-2">
             <p className="text-sm break-all">
               {edgePopupContent?.source.name || "Unknown"} →{" "}
               <span className="font-medium">
diff --git a/apps/webapp/app/components/graph/graph-visualization.tsx b/apps/webapp/app/components/graph/graph-visualization.tsx
index bd6118e..f25a5d0 100644
--- a/apps/webapp/app/components/graph/graph-visualization.tsx
+++ b/apps/webapp/app/components/graph/graph-visualization.tsx
@@ -1,18 +1,14 @@
 "use client";
 
 import { useState, useMemo, forwardRef } from "react";
-import { Graph, GraphRef } from "./graph";
+import { Graph, type GraphRef } from "./graph";
 import { GraphPopovers } from "./graph-popover";
 import type { RawTriplet, NodePopupContent, EdgePopupContent } from "./type";
-import { toGraphTriplets } from "./type";
+
 import { createLabelColorMap, getNodeColor } from "./node-colors";
 
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
 import { useTheme } from "remix-themes";
+import { toGraphTriplets } from "./utils";
 
 interface GraphVisualizationProps {
   triplets: RawTriplet[];
@@ -29,7 +25,7 @@ export const GraphVisualization = forwardRef<GraphRef, GraphVisualizationProps>(
       width = window.innerWidth * 0.85,
       height = window.innerHeight * 0.85,
       zoomOnMount = true,
-      className = "border border-border rounded-md h-[85vh] overflow-hidden relative",
+      className = "rounded-md h-full overflow-hidden relative",
     },
     ref,
   ) => {
@@ -120,11 +116,12 @@ export const GraphVisualization = forwardRef<GraphRef, GraphVisualizationProps>(
       setShowNodePopup(false);
       setShowEdgePopup(false);
     };
+
     return (
       <div className={className}>
         {/* Entity Types Legend Button */}
         <div className="absolute top-4 left-4 z-50">
-          <HoverCard>
+          {/* <HoverCard>
             <HoverCardTrigger asChild>
               <button className="bg-primary/10 text-primary hover:bg-primary/20 rounded-md px-2.5 py-1 text-xs transition-colors">
                 Entity Types
@@ -151,7 +148,7 @@ export const GraphVisualization = forwardRef<GraphRef, GraphVisualizationProps>(
                 </div>
               </div>
             </HoverCardContent>
-          </HoverCard>
+          </HoverCard> */}
         </div>
 
         {triplets.length > 0 ? (
diff --git a/apps/webapp/app/components/graph/graph.tsx b/apps/webapp/app/components/graph/graph.tsx
index cfd81fc..199d07b 100644
--- a/apps/webapp/app/components/graph/graph.tsx
+++ b/apps/webapp/app/components/graph/graph.tsx
@@ -991,7 +991,7 @@ export const Graph = forwardRef<GraphRef, GraphProps>(
       const svgElement = d3.select(svgRef.current);
 
       // Update background
-      svgElement.style("background-color", theme.background);
+      svgElement.style("background-color", "var(--background-3)");
 
       // Update nodes - use getNodeColor for proper color assignment
       svgElement
diff --git a/apps/webapp/app/components/graph/node-colors.ts b/apps/webapp/app/components/graph/node-colors.ts
index e1f8745..1d81634 100644
--- a/apps/webapp/app/components/graph/node-colors.ts
+++ b/apps/webapp/app/components/graph/node-colors.ts
@@ -3,36 +3,32 @@ import colors from "tailwindcss/colors";
 // Define a color palette for node coloring
 export const nodeColorPalette = {
   light: [
-    colors.pink[500], // Entity (default)
-    colors.blue[500],
-    colors.emerald[500],
-    colors.amber[500],
-    colors.indigo[500],
-    colors.orange[500],
-    colors.teal[500],
-    colors.purple[500],
-    colors.cyan[500],
-    colors.lime[500],
-    colors.rose[500],
-    colors.violet[500],
-    colors.green[500],
-    colors.red[500],
+    "var(--custom-color-1)", // Entity (default)
+    "var(--custom-color-2)",
+    "var(--custom-color-3)",
+    "var(--custom-color-4)",
+    "var(--custom-color-5)",
+    "var(--custom-color-6)",
+    "var(--custom-color-7)",
+    "var(--custom-color-8)",
+    "var(--custom-color-9)",
+    "var(--custom-color-10)",
+    "var(--custom-color-11)",
+    "var(--custom-color-12)",
   ],
   dark: [
-    colors.pink[400], // Entity (default)
-    colors.blue[400],
-    colors.emerald[400],
-    colors.amber[400],
-    colors.indigo[400],
-    colors.orange[400],
-    colors.teal[400],
-    colors.purple[400],
-    colors.cyan[400],
-    colors.lime[400],
-    colors.rose[400],
-    colors.violet[400],
-    colors.green[400],
-    colors.red[400],
+    "var(--custom-color-1)", // Entity (default)
+    "var(--custom-color-2)",
+    "var(--custom-color-3)",
+    "var(--custom-color-4)",
+    "var(--custom-color-5)",
+    "var(--custom-color-6)",
+    "var(--custom-color-7)",
+    "var(--custom-color-8)",
+    "var(--custom-color-9)",
+    "var(--custom-color-10)",
+    "var(--custom-color-11)",
+    "var(--custom-color-12)",
   ],
 };
 
diff --git a/apps/webapp/app/components/graph/utils.ts b/apps/webapp/app/components/graph/utils.ts
new file mode 100644
index 0000000..2ee0a83
--- /dev/null
+++ b/apps/webapp/app/components/graph/utils.ts
@@ -0,0 +1,107 @@
+import type {
+  Node,
+  Edge,
+  GraphNode,
+  GraphEdge,
+  RawTriplet,
+  GraphTriplet,
+} from "./type";
+
+export function toGraphNode(node: Node): GraphNode {
+  const primaryLabel =
+    node.labels?.find((label) => label != "Entity") || "Entity";
+
+  return {
+    id: node.uuid,
+    value: node.name,
+    uuid: node.uuid,
+    name: node.name,
+    created_at: node.created_at,
+    updated_at: node.updated_at,
+    attributes: node.attributes,
+    summary: node.summary,
+    labels: node.labels,
+    primaryLabel,
+  };
+}
+
+export function toGraphEdge(edge: Edge): GraphEdge {
+  return {
+    id: edge.uuid,
+    value: edge.name,
+    ...edge,
+  };
+}
+
+export function toGraphTriplet(triplet: RawTriplet): GraphTriplet {
+  return {
+    source: toGraphNode(triplet.sourceNode),
+    relation: toGraphEdge(triplet.edge),
+    target: toGraphNode(triplet.targetNode),
+  };
+}
+
+export function toGraphTriplets(triplets: RawTriplet[]): GraphTriplet[] {
+  return triplets.map(toGraphTriplet);
+}
+
+export function createTriplets(edges: Edge[], nodes: Node[]): RawTriplet[] {
+  // Create a Set of node UUIDs that are connected by edges
+  const connectedNodeIds = new Set<string>();
+
+  // Create triplets from edges
+  const edgeTriplets = edges
+    .map((edge) => {
+      const sourceNode = nodes.find(
+        (node) => node.uuid === edge.source_node_uuid,
+      );
+      const targetNode = nodes.find(
+        (node) => node.uuid === edge.target_node_uuid,
+      );
+
+      if (!sourceNode || !targetNode) return null;
+
+      // Add source and target node IDs to connected set
+      connectedNodeIds.add(sourceNode.uuid);
+      connectedNodeIds.add(targetNode.uuid);
+
+      return {
+        sourceNode,
+        edge,
+        targetNode,
+      };
+    })
+    .filter(
+      (t): t is RawTriplet =>
+        t !== null && t.sourceNode !== undefined && t.targetNode !== undefined,
+    );
+
+  // Find isolated nodes (nodes that don't appear in any edge)
+  const isolatedNodes = nodes.filter(
+    (node) => !connectedNodeIds.has(node.uuid),
+  );
+
+  // For isolated nodes, create special triplets
+  const isolatedTriplets: RawTriplet[] = isolatedNodes.map((node) => {
+    // Create a special marker edge for isolated nodes
+    const virtualEdge: Edge = {
+      uuid: `isolated-node-${node.uuid}`,
+      source_node_uuid: node.uuid,
+      target_node_uuid: node.uuid,
+      // Use a special type that we can filter out in the Graph component
+      type: "_isolated_node_",
+      name: "", // Empty name so it doesn't show a label
+      created_at: node.created_at,
+      updated_at: node.updated_at,
+    };
+
+    return {
+      sourceNode: node,
+      edge: virtualEdge,
+      targetNode: node,
+    };
+  });
+
+  // Combine edge triplets with isolated node triplets
+  return [...edgeTriplets, ...isolatedTriplets];
+}
diff --git a/apps/webapp/app/components/layout/LoginPageLayout.tsx b/apps/webapp/app/components/layout/LoginPageLayout.tsx
index 6462bb1..1619af8 100644
--- a/apps/webapp/app/components/layout/LoginPageLayout.tsx
+++ b/apps/webapp/app/components/layout/LoginPageLayout.tsx
@@ -6,13 +6,14 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
   const [, setTheme] = useTheme();
 
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <div className="text-foreground flex flex-col items-center pt-8 font-mono">
-        <Logo width={50} height={50} />
-        C.O.R.E
-      </div>
-
-      <div className="flex h-full flex-grow items-center justify-center">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="bg-background-3 flex size-6 items-center justify-center rounded-md">
+            <Logo width={20} height={20} />
+          </div>
+          <div className="font-mono">C.O.R.E.</div>
+        </a>
         {children}
       </div>
     </div>
diff --git a/apps/webapp/app/components/sidebar/app-sidebar.tsx b/apps/webapp/app/components/sidebar/app-sidebar.tsx
index 20aaac2..7b1252d 100644
--- a/apps/webapp/app/components/sidebar/app-sidebar.tsx
+++ b/apps/webapp/app/components/sidebar/app-sidebar.tsx
@@ -25,12 +25,12 @@ const data = {
   navMain: [
     {
       title: "Dashboard",
-      url: "#",
+      url: "/",
       icon: DashboardIcon,
     },
     {
       title: "API",
-      url: "#",
+      url: "/api",
       icon: Code,
     },
   ],
diff --git a/apps/webapp/app/components/sidebar/nav-main.tsx b/apps/webapp/app/components/sidebar/nav-main.tsx
index f7703ff..92bea66 100644
--- a/apps/webapp/app/components/sidebar/nav-main.tsx
+++ b/apps/webapp/app/components/sidebar/nav-main.tsx
@@ -8,6 +8,7 @@ import {
   SidebarMenuItem,
 } from "../ui/sidebar";
 import { NavUser } from "./nav-user";
+import { useLocation } from "@remix-run/react";
 
 export const NavMain = ({
   items,
@@ -18,14 +19,18 @@ export const NavMain = ({
     icon?: any;
   }[];
 }) => {
+  const location = useLocation();
+
   return (
     <SidebarGroup>
       <SidebarGroupContent className="flex flex-col gap-2">
-        <SidebarMenu></SidebarMenu>
         <SidebarMenu>
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton tooltip={item.title}>
+              <SidebarMenuButton
+                tooltip={item.title}
+                isActive={location.pathname.includes(item.url)}
+              >
                 {item.icon && <item.icon />}
                 <span>{item.title}</span>
               </SidebarMenuButton>
diff --git a/apps/webapp/app/components/ui/resizable.tsx b/apps/webapp/app/components/ui/resizable.tsx
new file mode 100644
index 0000000..8d3cc4f
--- /dev/null
+++ b/apps/webapp/app/components/ui/resizable.tsx
@@ -0,0 +1,47 @@
+import type { ImperativePanelHandle } from "react-resizable-panels";
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "../../lib/utils";
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "bg-background-1 focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export type { ImperativePanelHandle };
diff --git a/apps/webapp/app/components/ui/tabs.tsx b/apps/webapp/app/components/ui/tabs.tsx
new file mode 100644
index 0000000..7bdf651
--- /dev/null
+++ b/apps/webapp/app/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "bg-grayAlpha-100 inline-flex h-9 items-center justify-center rounded-md p-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-accent data-[state=active]:text-accent-foreground inline-flex items-center justify-center rounded px-3 py-1 whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/webapp/app/components/ui/textarea.tsx b/apps/webapp/app/components/ui/textarea.tsx
new file mode 100644
index 0000000..bc9e856
--- /dev/null
+++ b/apps/webapp/app/components/ui/textarea.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { useAutoSizeTextArea } from "../../hooks/use-autosize-textarea";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, value, ...props }, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const textAreaRef = React.useRef<any>(ref);
+    const id = React.useMemo(() => {
+      return `id${Math.random().toString(16).slice(2)}`;
+    }, []);
+
+    useAutoSizeTextArea(id, textAreaRef.current, value);
+
+    return (
+      <textarea
+        className={cn(
+          "bg-input placeholder:text-muted-foreground focus-visible:ring-ring h-auto min-h-[30px] w-full rounded px-3 py-2 focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        id={id}
+        ref={textAreaRef}
+        contentEditable
+        value={value}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/apps/webapp/app/hooks/use-autosize-textarea.tsx b/apps/webapp/app/hooks/use-autosize-textarea.tsx
new file mode 100644
index 0000000..efc2f8f
--- /dev/null
+++ b/apps/webapp/app/hooks/use-autosize-textarea.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+// Updates the height of a <textarea> when the value changes.
+export const useAutoSizeTextArea = (
+  id: string,
+  textAreaRef: HTMLTextAreaElement | null,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any,
+) => {
+  React.useLayoutEffect(() => {
+    const textArea = textAreaRef ?? document.getElementById(id);
+
+    if (textArea && textArea.style && value) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textArea.style.height = "auto";
+      const scrollHeight = textArea.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textArea.style.height = `${10 + scrollHeight}px`;
+    }
+  }, [textAreaRef, value, id]);
+};
diff --git a/apps/webapp/app/hooks/use-local-state.tsx b/apps/webapp/app/hooks/use-local-state.tsx
new file mode 100644
index 0000000..5be6024
--- /dev/null
+++ b/apps/webapp/app/hooks/use-local-state.tsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+export const useLocalCommonState = <T,>(key: string, initialValue?: T) => {
+  const path = "userSettings";
+  const [state, setState] = useState<T>(() => {
+    // Try to load from localStorage on initial render
+    const savedObject = localStorage?.getItem(path);
+    const parsedObject = savedObject ? JSON.parse(savedObject) : {};
+    return key in parsedObject ? parsedObject[key] : initialValue;
+  });
+
+  // Save to localStorage whenever state changes
+  useEffect(() => {
+    const savedObject = localStorage.getItem(path);
+    const parsedObject = savedObject ? JSON.parse(savedObject) : {};
+    localStorage.setItem(
+      path,
+      JSON.stringify({
+        ...parsedObject,
+        [key]: state,
+      }),
+    );
+  }, [state, path, key]);
+
+  return [state, setState] as const;
+};
diff --git a/apps/webapp/app/hooks/useWorkspace.ts b/apps/webapp/app/hooks/useWorkspace.ts
index 6c96eaf..fc63f39 100644
--- a/apps/webapp/app/hooks/useWorkspace.ts
+++ b/apps/webapp/app/hooks/useWorkspace.ts
@@ -1,13 +1,14 @@
 import { type Workspace } from "@core/database";
 import { type UIMatch } from "@remix-run/react";
-import { type loader } from "~/routes/_index";
+
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { loader } from "~/routes/home";
 
 export function useOptionalWorkspace(
   matches?: UIMatch[],
 ): Workspace | undefined {
   const routeMatch = useTypedMatchesData<typeof loader>({
-    id: "routes/_index",
+    id: "routes/home",
     matches,
   }) as any;
 
diff --git a/apps/webapp/app/lib/ingest.queue.ts b/apps/webapp/app/lib/ingest.queue.ts
deleted file mode 100644
index 43e8ef5..0000000
--- a/apps/webapp/app/lib/ingest.queue.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// lib/ingest.queue.ts
-import { Queue, Worker } from "bullmq";
-import IORedis from "ioredis";
-import { env } from "~/env.server";
-import { KnowledgeGraphService } from "../services/knowledgeGraph.server";
-
-const connection = new IORedis({
-  port: env.REDIS_PORT,
-  host: env.REDIS_HOST,
-  maxRetriesPerRequest: null,
-  enableReadyCheck: false,
-});
-
-const userQueues = new Map<string, Queue>();
-const userWorkers = new Map<string, Worker>();
-
-async function processUserJob(userId: string, job: any) {
-  try {
-    console.log(job);
-    console.log(`Processing job for user ${userId}`);
-    const knowledgeGraphService = new KnowledgeGraphService();
-
-    knowledgeGraphService.addEpisode({ ...job.data.body, userId });
-
-    // your processing logic
-  } catch (err) {
-    console.error(`Error processing job for user ${userId}:`, err);
-  }
-}
-
-export function getUserQueue(userId: string) {
-  if (!userQueues.has(userId)) {
-    const queueName = `ingest-${userId}`;
-    const queue = new Queue(queueName, { connection });
-    userQueues.set(userId, queue);
-
-    const worker = new Worker(queueName, (job) => processUserJob(userId, job), {
-      connection,
-      concurrency: 1,
-    });
-    userWorkers.set(userId, worker);
-  }
-
-  return userQueues.get(userId)!;
-}
diff --git a/apps/webapp/app/lib/ingest.server.ts b/apps/webapp/app/lib/ingest.server.ts
new file mode 100644
index 0000000..04c7d01
--- /dev/null
+++ b/apps/webapp/app/lib/ingest.server.ts
@@ -0,0 +1,116 @@
+// lib/ingest.queue.ts
+import { Queue, Worker } from "bullmq";
+import IORedis from "ioredis";
+import { env } from "~/env.server";
+import { KnowledgeGraphService } from "../services/knowledgeGraph.server";
+import { z } from "zod";
+import { EpisodeType } from "@core/types";
+import { prisma } from "~/db.server";
+import { IngestionStatus } from "@core/database";
+import { logger } from "~/services/logger.service";
+
+const connection = new IORedis({
+  port: env.REDIS_PORT,
+  host: env.REDIS_HOST,
+  maxRetriesPerRequest: null,
+  enableReadyCheck: false,
+});
+
+const userQueues = new Map<string, Queue>();
+const userWorkers = new Map<string, Worker>();
+
+async function processUserJob(userId: string, job: any) {
+  try {
+    logger.log(`Processing job for user ${userId}`);
+
+    await prisma.ingestionQueue.update({
+      where: { id: job.data.queueId },
+      data: {
+        status: IngestionStatus.PROCESSING,
+      },
+    });
+
+    const knowledgeGraphService = new KnowledgeGraphService();
+
+    const episodeDetails = await knowledgeGraphService.addEpisode({
+      ...job.data.body,
+      userId,
+    });
+
+    await prisma.ingestionQueue.update({
+      where: { id: job.data.queueId },
+      data: {
+        status: IngestionStatus.COMPLETED,
+      },
+    });
+
+    // your processing logic
+  } catch (err) {
+    await prisma.ingestionQueue.update({
+      where: { id: job.data.queueId },
+      data: {
+        status: IngestionStatus.FAILED,
+      },
+    });
+
+    console.error(`Error processing job for user ${userId}:`, err);
+  }
+}
+
+export function getUserQueue(userId: string) {
+  if (!userQueues.has(userId)) {
+    const queueName = `ingest-user-${userId}`;
+    const queue = new Queue(queueName, { connection });
+    userQueues.set(userId, queue);
+
+    const worker = new Worker(queueName, (job) => processUserJob(userId, job), {
+      connection,
+      concurrency: 1,
+    });
+    userWorkers.set(userId, worker);
+  }
+
+  return userQueues.get(userId)!;
+}
+
+export const IngestBodyRequest = z.object({
+  episodeBody: z.string(),
+  referenceTime: z.string(),
+  type: z.enum([EpisodeType.Conversation, EpisodeType.Text]), // Assuming these are the EpisodeType values
+  source: z.string(),
+  spaceId: z.string().optional(),
+  sessionId: z.string().optional(),
+});
+
+export const addToQueue = async (
+  body: z.infer<typeof IngestBodyRequest>,
+  userId: string,
+) => {
+  const queuePersist = await prisma.ingestionQueue.create({
+    data: {
+      spaceId: body.spaceId,
+      data: body,
+      status: IngestionStatus.PENDING,
+      priority: 1,
+    },
+  });
+
+  const ingestionQueue = getUserQueue(userId);
+
+  const jobDetails = await ingestionQueue.add(
+    `ingest-user-${userId}`, // 👈 unique name per user
+    {
+      queueId: queuePersist.id,
+      spaceId: body.spaceId,
+      userId: userId,
+      body,
+    },
+    {
+      jobId: `${userId}-${Date.now()}`, // unique per job but grouped under user
+    },
+  );
+
+  return {
+    id: jobDetails.id,
+  };
+};
diff --git a/apps/webapp/app/lib/model.server.ts b/apps/webapp/app/lib/model.server.ts
index e567cd6..6a89ede 100644
--- a/apps/webapp/app/lib/model.server.ts
+++ b/apps/webapp/app/lib/model.server.ts
@@ -1,4 +1,4 @@
-import { LLMMappings, LLMModelEnum } from "@recall/types";
+import { LLMMappings, LLMModelEnum } from "@core/types";
 import {
   type CoreMessage,
   type LanguageModelV1,
diff --git a/apps/webapp/app/lib/neo4j.server.ts b/apps/webapp/app/lib/neo4j.server.ts
index e3c5628..8f5b8ff 100644
--- a/apps/webapp/app/lib/neo4j.server.ts
+++ b/apps/webapp/app/lib/neo4j.server.ts
@@ -1,4 +1,5 @@
 import neo4j from "neo4j-driver";
+import { type RawTriplet } from "~/components/graph/type";
 import { env } from "~/env.server";
 import { logger } from "~/services/logger.service";
 
@@ -17,6 +18,8 @@ const driver = neo4j.driver(
   },
 );
 
+let schemaInitialized = false;
+
 // Test the connection
 const verifyConnectivity = async () => {
   try {
@@ -28,7 +31,6 @@ const verifyConnectivity = async () => {
     return false;
   }
 };
-
 // Run a Cypher query
 const runQuery = async (cypher: string, params = {}) => {
   const session = driver.session();
@@ -43,9 +45,94 @@ const runQuery = async (cypher: string, params = {}) => {
   }
 };
 
+// Get all nodes and relationships for a user
+export const getAllNodesForUser = async (userId: string) => {
+  const session = driver.session();
+  try {
+    const result = await session.run(
+      `MATCH (n)-[r]->(m)
+       WHERE n.userId = $userId OR m.userId = $userId
+       RETURN n, r, m`,
+      { userId },
+    );
+    return result.records;
+  } catch (error) {
+    logger.error(`Error getting nodes for user ${userId}: ${error}`);
+    throw error;
+  } finally {
+    await session.close();
+  }
+};
+
+export const getNodeLinks = async (userId: string) => {
+  const result = await getAllNodesForUser(userId);
+  const triplets: RawTriplet[] = [];
+
+  result.forEach((record) => {
+    const sourceNode = record.get("n");
+    const targetNode = record.get("m");
+    const edge = record.get("r");
+    triplets.push({
+      sourceNode: {
+        uuid: sourceNode.identity.toString(),
+        labels: sourceNode.labels,
+        attributes: sourceNode.properties,
+        name: sourceNode.properties.name || "",
+        created_at: sourceNode.properties.created_at || "",
+        updated_at: sourceNode.properties.updated_at || "",
+      },
+      edge: {
+        uuid: edge.identity.toString(),
+        type: edge.type,
+        source_node_uuid: sourceNode.identity.toString(),
+        target_node_uuid: targetNode.identity.toString(),
+        name: edge.properties.name || "",
+        created_at: edge.properties.created_at || "",
+        updated_at: edge.properties.updated_at || "",
+      },
+      targetNode: {
+        uuid: targetNode.identity.toString(),
+        labels: targetNode.labels,
+        attributes: targetNode.properties,
+        name: targetNode.properties.name || "",
+        created_at: targetNode.properties.created_at || "",
+        updated_at: targetNode.properties.updated_at || "",
+      },
+    });
+  });
+
+  return triplets;
+};
+
+export async function initNeo4jSchemaOnce() {
+  if (schemaInitialized) return;
+
+  const session = driver.session();
+
+  try {
+    // Check if schema already exists
+    const result = await session.run(`
+      SHOW INDEXES YIELD name WHERE name = "entity_name" RETURN name
+    `);
+
+    if (result.records.length === 0) {
+      // Run your schema creation here (indexes, constraints, etc.)
+      await initializeSchema();
+    }
+
+    schemaInitialized = true;
+  } catch (e: any) {
+    logger.error("Error in initialising", e);
+  } finally {
+    await session.close();
+  }
+}
+
 // Initialize the database schema
 const initializeSchema = async () => {
   try {
+    logger.info("Initialising neo4j schema");
+
     // Create constraints for unique IDs
     await runQuery(
       "CREATE CONSTRAINT episode_uuid IF NOT EXISTS FOR (n:Episode) REQUIRE n.uuid IS UNIQUE",
@@ -122,6 +209,4 @@ const closeDriver = async () => {
   logger.info("Neo4j driver closed");
 };
 
-// await initializeSchema();
-
 export { driver, verifyConnectivity, runQuery, initializeSchema, closeDriver };
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
index df5773d..cda0df3 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -1,6 +1,5 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -42,6 +41,7 @@ import {
   useTheme,
 } from "remix-themes";
 import clsx from "clsx";
+import { initNeo4jSchemaOnce } from "./lib/neo4j.server";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
@@ -50,6 +50,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const toastMessage = session.get("toastMessage") as ToastMessage;
   const { getTheme } = await themeSessionResolver(request);
 
+  await initNeo4jSchemaOnce();
+
   const posthogProjectKey = env.POSTHOG_PROJECT_KEY;
 
   return typedjson(
@@ -126,7 +128,6 @@ function App() {
           <ScrollRestoration />
 
           <Scripts />
-          <LiveReload />
         </body>
       </html>
     </>
diff --git a/apps/webapp/app/routes/_index.tsx b/apps/webapp/app/routes/_index.tsx
index 778c8ae..08c715a 100644
--- a/apps/webapp/app/routes/_index.tsx
+++ b/apps/webapp/app/routes/_index.tsx
@@ -1,15 +1,12 @@
 import { redirect, type MetaFunction } from "@remix-run/node";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { typedjson } from "remix-typedjson";
-import { AppSidebar } from "~/components/sidebar/app-sidebar";
-import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
-import { clearRedirectTo, commitSession } from "~/services/redirectTo.server";
 
-import { requireUser, requireWorkpace } from "~/services/session.server";
-import { confirmBasicDetailsPath } from "~/utils/pathBuilder";
+import { requireUser } from "~/services/session.server";
+import { confirmBasicDetailsPath, dashboardPath } from "~/utils/pathBuilder";
+
 export const meta: MetaFunction = () => {
   return [
-    { title: "C.O.R.E" },
+    { title: "C.O.R.E." },
     { name: "description", content: "Welcome to C.O.R.E!" },
   ];
 };
@@ -20,41 +17,11 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   //you have to confirm basic details before you can do anything
   if (!user.confirmedBasicDetails) {
     return redirect(confirmBasicDetailsPath());
+  } else {
+    return redirect(dashboardPath());
   }
-
-  const workspace = await requireWorkpace(request);
-
-  return typedjson(
-    {
-      workspace,
-    },
-    {
-      headers: {
-        "Set-Cookie": await commitSession(await clearRedirectTo(request)),
-      },
-    },
-  );
 };
 
 export default function Index() {
-  return (
-    <SidebarProvider
-      style={
-        {
-          "--sidebar-width": "calc(var(--spacing) * 54)",
-          "--header-height": "calc(var(--spacing) * 12)",
-          background: "var(--background)",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset className="bg-background-2">
-        <div className="flex flex-1 flex-col">
-          <div className="@container/main flex flex-1 flex-col gap-2">
-            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6"></div>
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
+  return <p>Loading</p>;
 }
diff --git a/apps/webapp/app/routes/auth.google.tsx b/apps/webapp/app/routes/auth.google.tsx
index 41a995d..86d9335 100644
--- a/apps/webapp/app/routes/auth.google.tsx
+++ b/apps/webapp/app/routes/auth.google.tsx
@@ -13,7 +13,6 @@ export let loader: LoaderFunction = async ({ request }) => {
   try {
     // call authenticate as usual, in successRedirect use returnTo or a fallback
     const rf = await authenticator.authenticate("google", request);
-    console.log(rf);
 
     return rf;
   } catch (error) {
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index 54f0b3a..2ba8893 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -68,12 +68,8 @@ export default function ConfirmBasicDetails() {
     lastSubmission: lastSubmission as any,
     constraint: getFieldsetConstraint(schema),
     onValidate({ formData }) {
-      console.log(parse(formData, { schema }));
       return parse(formData, { schema });
     },
-    onSubmit(event, context) {
-      console.log(event);
-    },
     defaultValue: {
       integrations: [],
     },
diff --git a/apps/webapp/app/routes/home.dashboard.tsx b/apps/webapp/app/routes/home.dashboard.tsx
new file mode 100644
index 0000000..75d915c
--- /dev/null
+++ b/apps/webapp/app/routes/home.dashboard.tsx
@@ -0,0 +1,95 @@
+import { useLocalCommonState } from "~/hooks/use-local-state";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "~/components/ui/resizable";
+import { parse } from "@conform-to/zod";
+import { json } from "@remix-run/node";
+
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { Ingest } from "~/components/dashboard/ingest";
+import {
+  type LoaderFunctionArgs,
+  type ActionFunctionArgs,
+} from "@remix-run/server-runtime";
+import { requireUserId } from "~/services/session.server";
+import { useActionData } from "@remix-run/react";
+import { addToQueue, IngestBodyRequest } from "~/lib/ingest.server";
+import { getNodeLinks } from "~/lib/neo4j.server";
+import { useTypedLoaderData } from "remix-typedjson";
+
+import { GraphVisualization } from "~/components/graph/graph-visualization";
+
+export async function action({ request }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+
+  const formData = await request.formData();
+  const submission = parse(formData, { schema: IngestBodyRequest });
+
+  if (!submission.value || submission.intent !== "submit") {
+    return json(submission);
+  }
+
+  return await addToQueue(submission.value, userId);
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const nodeLinks = await getNodeLinks(userId);
+
+  return nodeLinks;
+}
+
+export default function Dashboard() {
+  const nodeLinks = useTypedLoaderData<typeof loader>();
+
+  const actionData = useActionData<typeof action>();
+
+  const [size, setSize] = useState(15);
+
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel
+        collapsible={false}
+        className="h-[calc(100vh_-_20px)] overflow-hidden rounded-md"
+        order={1}
+        id="home"
+      >
+        <div className="home flex h-full flex-col overflow-y-auto p-3">
+          <h2 className="text-xl"> Graph </h2>
+          <p className="text-muted-foreground"> Your memory graph </p>
+
+          <div className="bg-background-3 mt-2 grow rounded">
+            {typeof window !== "undefined" && (
+              <GraphVisualization triplets={nodeLinks} />
+            )}
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle className="bg-border w-[0.5px]" />
+
+      <ResizablePanel
+        className="rounded-md"
+        collapsible={false}
+        maxSize={50}
+        minSize={25}
+        defaultSize={size}
+        onResize={(size) => setSize(size)}
+        order={2}
+        id="rightScreen"
+      >
+        <Tabs defaultValue="ingest" className="p-3 text-base">
+          <TabsList>
+            <TabsTrigger value="ingest">Add</TabsTrigger>
+            <TabsTrigger value="retrieve">Retrieve</TabsTrigger>
+          </TabsList>
+          <TabsContent value="ingest">
+            <Ingest actionData={actionData} />
+          </TabsContent>
+        </Tabs>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
diff --git a/apps/webapp/app/routes/home.tsx b/apps/webapp/app/routes/home.tsx
new file mode 100644
index 0000000..4a45257
--- /dev/null
+++ b/apps/webapp/app/routes/home.tsx
@@ -0,0 +1,58 @@
+import {
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+} from "@remix-run/server-runtime";
+import {
+  requireUser,
+  requireUserId,
+  requireWorkpace,
+} from "~/services/session.server";
+
+import { Outlet, useActionData } from "@remix-run/react";
+import { typedjson } from "remix-typedjson";
+import { clearRedirectTo, commitSession } from "~/services/redirectTo.server";
+
+import { AppSidebar } from "~/components/sidebar/app-sidebar";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const user = await requireUser(request);
+  const workspace = await requireWorkpace(request);
+
+  return typedjson(
+    {
+      user,
+      workspace,
+    },
+    {
+      headers: {
+        "Set-Cookie": await commitSession(await clearRedirectTo(request)),
+      },
+    },
+  );
+};
+
+export default function Home() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 54)",
+          "--header-height": "calc(var(--spacing) * 12)",
+          background: "var(--background)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset className="bg-background-2">
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex h-full flex-col">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/apps/webapp/app/routes/ingest.tsx b/apps/webapp/app/routes/ingest.tsx
index dba820c..a86e739 100644
--- a/apps/webapp/app/routes/ingest.tsx
+++ b/apps/webapp/app/routes/ingest.tsx
@@ -1,20 +1,7 @@
-import { EpisodeType } from "@core/types";
-import { json, LoaderFunctionArgs } from "@remix-run/node";
-import { z } from "zod";
-import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
-import { getUserQueue } from "~/lib/ingest.queue";
-import { prisma } from "~/db.server";
-import { IngestionStatus } from "@core/database";
+import { json } from "@remix-run/node";
 
-export const IngestBodyRequest = z.object({
-  name: z.string(),
-  episodeBody: z.string(),
-  referenceTime: z.string(),
-  type: z.enum([EpisodeType.Conversation, EpisodeType.Text]), // Assuming these are the EpisodeType values
-  source: z.string(),
-  spaceId: z.string().optional(),
-  sessionId: z.string().optional(),
-});
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { addToQueue, IngestBodyRequest } from "~/lib/ingest.server";
 
 const { action, loader } = createActionApiRoute(
   {
@@ -25,32 +12,9 @@ const { action, loader } = createActionApiRoute(
     },
     corsStrategy: "all",
   },
-  async ({ body, headers, params, authentication }) => {
-    const queuePersist = await prisma.ingestionQueue.create({
-      data: {
-        spaceId: body.spaceId,
-        data: body,
-        status: IngestionStatus.PENDING,
-        priority: 1,
-      },
-    });
-
-    const ingestionQueue = getUserQueue(authentication.userId);
-
-    await ingestionQueue.add(
-      `ingest-user-${authentication.userId}`, // 👈 unique name per user
-      {
-        queueId: queuePersist.id,
-        spaceId: body.spaceId,
-        userId: authentication.userId,
-        body,
-      },
-      {
-        jobId: `${authentication.userId}-${Date.now()}`, // unique per job but grouped under user
-      },
-    );
-
-    return json({});
+  async ({ body, authentication }) => {
+    const response = addToQueue(body, authentication.userId);
+    return json({ ...response });
   },
 );
 
diff --git a/apps/webapp/app/routes/search.tsx b/apps/webapp/app/routes/search.tsx
index d9097a8..f8cb7be 100644
--- a/apps/webapp/app/routes/search.tsx
+++ b/apps/webapp/app/routes/search.tsx
@@ -20,7 +20,10 @@ const { action, loader } = createActionApiRoute(
     corsStrategy: "all",
   },
   async ({ body, authentication }) => {
-    const results = await searchService.search(body.query, authentication.userId);
+    const results = await searchService.search(
+      body.query,
+      authentication.userId,
+    );
     return json(results);
   },
 );
diff --git a/apps/webapp/app/services/apiRateLimit.server.ts b/apps/webapp/app/services/apiRateLimit.server.ts
index 5dca750..d5d1085 100644
--- a/apps/webapp/app/services/apiRateLimit.server.ts
+++ b/apps/webapp/app/services/apiRateLimit.server.ts
@@ -24,10 +24,13 @@ export const apiRateLimiter = authorizationRateLimitMiddleware({
     stale: 60_000 * 20, // Date is stale after 20 minutes
   },
   limiterConfigOverride: async (authorizationValue) => {
-    const authenticatedEnv = await authenticateAuthorizationHeader(authorizationValue, {
-      allowPublicKey: true,
-      allowJWT: true,
-    });
+    const authenticatedEnv = await authenticateAuthorizationHeader(
+      authorizationValue,
+      {
+        allowPublicKey: true,
+        allowJWT: true,
+      },
+    );
 
     if (!authenticatedEnv || !authenticatedEnv.ok) {
       return;
@@ -61,4 +64,6 @@ export const apiRateLimiter = authorizationRateLimitMiddleware({
   },
 });
 
-export type RateLimitMiddleware = ReturnType<typeof authorizationRateLimitMiddleware>;
+export type RateLimitMiddleware = ReturnType<
+  typeof authorizationRateLimitMiddleware
+>;
diff --git a/apps/webapp/app/services/googleAuth.server.ts b/apps/webapp/app/services/googleAuth.server.ts
index 3cc5b4c..c475e80 100644
--- a/apps/webapp/app/services/googleAuth.server.ts
+++ b/apps/webapp/app/services/googleAuth.server.ts
@@ -25,8 +25,6 @@ export function addGoogleStrategy(
         throw new Error("Google login requires an email address");
       }
 
-      console.log(tokens);
-
       try {
         logger.debug("Google login", {
           emails,
diff --git a/apps/webapp/app/services/graphModels/episode.ts b/apps/webapp/app/services/graphModels/episode.ts
index 6ec7464..b78366a 100644
--- a/apps/webapp/app/services/graphModels/episode.ts
+++ b/apps/webapp/app/services/graphModels/episode.ts
@@ -5,7 +5,6 @@ export async function saveEpisode(episode: EpisodicNode): Promise<string> {
   const query = `
     MERGE (e:Episode {uuid: $uuid})
     ON CREATE SET
-      e.name = $name,
       e.content = $content,
       e.contentEmbedding = $contentEmbedding,
       e.type = $type,
@@ -17,7 +16,6 @@ export async function saveEpisode(episode: EpisodicNode): Promise<string> {
       e.space = $space,
       e.sessionId = $sessionId
     ON MATCH SET
-      e.name = $name,
       e.content = $content,
       e.contentEmbedding = $contentEmbedding,
       e.type = $type,
@@ -31,7 +29,6 @@ export async function saveEpisode(episode: EpisodicNode): Promise<string> {
 
   const params = {
     uuid: episode.uuid,
-    name: episode.name,
     content: episode.content,
     source: episode.source,
     type: episode.type,
@@ -61,7 +58,6 @@ export async function getEpisode(uuid: string): Promise<EpisodicNode | null> {
   const episode = result[0].get("e").properties;
   return {
     uuid: episode.uuid,
-    name: episode.name,
     content: episode.content,
     contentEmbedding: episode.contentEmbedding,
     type: episode.type,
@@ -115,7 +111,6 @@ export async function getRecentEpisodes(params: {
     const episode = record.get("e").properties;
     return {
       uuid: episode.uuid,
-      name: episode.name,
       content: episode.content,
       contentEmbedding: episode.contentEmbedding,
       type: episode.type,
diff --git a/apps/webapp/app/services/graphModels/statement.ts b/apps/webapp/app/services/graphModels/statement.ts
index b982ebc..3a66e27 100644
--- a/apps/webapp/app/services/graphModels/statement.ts
+++ b/apps/webapp/app/services/graphModels/statement.ts
@@ -266,7 +266,6 @@ export async function getTripleForStatement({
   // Episode might be null
   const provenance: EpisodicNode = {
     uuid: episodeProps.uuid,
-    name: episodeProps.name,
     content: episodeProps.content,
     source: episodeProps.source,
     type: episodeProps.type,
diff --git a/apps/webapp/app/services/knowledgeGraph.server.ts b/apps/webapp/app/services/knowledgeGraph.server.ts
index 8ccc586..966382a 100644
--- a/apps/webapp/app/services/knowledgeGraph.server.ts
+++ b/apps/webapp/app/services/knowledgeGraph.server.ts
@@ -64,7 +64,6 @@ export class KnowledgeGraphService {
       // Step 2: Episode Creation - Create or retrieve the episode
       const episode: EpisodicNode = {
         uuid: crypto.randomUUID(),
-        name: params.name,
         content: params.episodeBody,
         source: params.source,
         type: params.type || EpisodeType.Text,
@@ -115,7 +114,7 @@ export class KnowledgeGraphService {
       return {
         episodeUuid: episode.uuid,
         // nodesCreated: hydratedNodes.length,
-        // statementsCreated: resolvedStatements.length,
+        statementsCreated: resolvedStatements.length,
         processingTimeMs,
       };
     } catch (error) {
diff --git a/apps/webapp/app/services/search.server.ts b/apps/webapp/app/services/search.server.ts
index 3315e27..5898869 100644
--- a/apps/webapp/app/services/search.server.ts
+++ b/apps/webapp/app/services/search.server.ts
@@ -1,5 +1,5 @@
 import { openai } from "@ai-sdk/openai";
-import type { StatementNode } from "@recall/types";
+import type { StatementNode } from "@core/types";
 import { embed } from "ai";
 import { logger } from "./logger.service";
 import { applyCrossEncoderReranking, applyWeightedRRF } from "./search/rerank";
diff --git a/apps/webapp/app/services/search/rerank.ts b/apps/webapp/app/services/search/rerank.ts
index 18e5eb0..caf10fa 100644
--- a/apps/webapp/app/services/search/rerank.ts
+++ b/apps/webapp/app/services/search/rerank.ts
@@ -1,4 +1,4 @@
-import { LLMModelEnum, type StatementNode } from "@recall/types";
+import { LLMModelEnum, type StatementNode } from "@core/types";
 import { combineAndDeduplicateStatements } from "./utils";
 import { type CoreMessage } from "ai";
 import { makeModelCall } from "~/lib/model.server";
diff --git a/apps/webapp/app/services/search/utils.ts b/apps/webapp/app/services/search/utils.ts
index 0a320fc..e456981 100644
--- a/apps/webapp/app/services/search/utils.ts
+++ b/apps/webapp/app/services/search/utils.ts
@@ -1,4 +1,4 @@
-import type { EntityNode, StatementNode } from "@recall/types";
+import type { EntityNode, StatementNode } from "@core/types";
 import type { SearchOptions } from "../search.server";
 import type { Embedding } from "ai";
 import { logger } from "../logger.service";
@@ -35,8 +35,7 @@ export async function performBM25Search(
     };
 
     const records = await runQuery(cypher, params);
-    // return records.map((record) => record.get("s").properties as StatementNode);
-    return [];
+    return records.map((record) => record.get("s").properties as StatementNode);
   } catch (error) {
     logger.error("BM25 search error:", { error });
     return [];
@@ -81,7 +80,7 @@ export async function performVectorSearch(
       WHERE 
         s.validAt <= $validAt 
         AND (s.invalidAt IS NULL OR s.invalidAt > $validAt)
-        AND (s.userId = $userId OR s.isPublic = true)
+        AND (s.userId = $userId)
       WITH s, vector.similarity.cosine(s.factEmbedding, $embedding) AS score
       WHERE score > 0.7
       RETURN s, score
@@ -95,8 +94,7 @@ export async function performVectorSearch(
     };
 
     const records = await runQuery(cypher, params);
-    // return records.map((record) => record.get("s").properties as StatementNode);
-    return [];
+    return records.map((record) => record.get("s").properties as StatementNode);
   } catch (error) {
     logger.error("Vector search error:", { error });
     return [];
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index 23f0ffb..0fb0e5a 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -2,6 +2,14 @@ export function confirmBasicDetailsPath() {
   return `/confirm-basic-details`;
 }
 
+export function homePath() {
+  return `/home`;
+}
+
+export function dashboardPath() {
+  return `/home/dashboard`;
+}
+
 export function rootPath() {
   return `/`;
 }
diff --git a/apps/webapp/app/utils/presets/apps.ts b/apps/webapp/app/utils/presets/nodes.ts
similarity index 96%
rename from apps/webapp/app/utils/presets/apps.ts
rename to apps/webapp/app/utils/presets/nodes.ts
index 2be8912..2e02d23 100644
--- a/apps/webapp/app/utils/presets/apps.ts
+++ b/apps/webapp/app/utils/presets/nodes.ts
@@ -30,6 +30,10 @@ export const GENERAL_NODE_TYPES = {
     name: "Event",
     description: "A meeting, deadline, or any time-based occurrence",
   },
+  ALIAS: {
+    name: "Alias",
+    description: "An alternative name or identifier for an entity",
+  },
 } as const;
 
 // App-specific node types
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index ad61b1d..430c528 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -54,7 +54,6 @@
     "cross-env": "^7.0.3",
     "d3": "^7.9.0",
     "dayjs": "^1.11.10",
-
     "express": "^4.18.1",
     "ioredis": "^5.6.1",
     "isbot": "^4.1.0",
@@ -72,6 +71,7 @@
     "remix-themes": "^1.3.1",
     "remix-typedjson": "0.3.1",
     "remix-utils": "^7.7.0",
+    "react-resizable-panels": "^1.0.9",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar-hide": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/apps/webapp/vite.config.ts b/apps/webapp/vite.config.ts
index 274903a..4954924 100644
--- a/apps/webapp/vite.config.ts
+++ b/apps/webapp/vite.config.ts
@@ -24,8 +24,8 @@ export default defineConfig({
     tsconfigPaths(),
   ],
   server: {
+    middlewareMode: true,
     allowedHosts: true,
-    port: 3033,
   },
   ssr: {
     noExternal: ["helix-ts"],
diff --git a/packages/types/src/graph/graph.entity.ts b/packages/types/src/graph/graph.entity.ts
index ec6d624..8fa00e9 100644
--- a/packages/types/src/graph/graph.entity.ts
+++ b/packages/types/src/graph/graph.entity.ts
@@ -9,7 +9,6 @@ export enum EpisodeType {
  */
 export interface EpisodicNode {
   uuid: string;
-  name: string;
   content: string;
   contentEmbedding?: number[];
   type: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca3a362..af5d63a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,6 +195,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^1.0.9
+        version: 1.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       remix-auth:
         specifier: ^4.2.0
         version: 4.2.0
@@ -5656,6 +5659,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-resizable-panels@1.0.10:
+    resolution: {integrity: sha512-0+g0CNqregkuocr+Mi+e6wgWVARnKTYIX3U1QK7GlkLQKCmbymZakx80YGwcRO7HNnKJTQ5v38HlBos/cGxWvg==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
+
   react-router-dom@6.30.0:
     resolution: {integrity: sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==}
     engines: {node: '>=14.0.0'}
@@ -12629,6 +12638,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.23
 
+  react-resizable-panels@1.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-router-dom@6.30.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@remix-run/router': 1.23.0
diff --git a/turbo.json b/turbo.json
index 363667f..82fb0c9 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,18 +3,19 @@
   "ui": "tui",
   "tasks": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["$TURBO_DEFAULT$", ".env*"],
-      "outputs": ["dist/**", "public/build/**", "build/**", "app/styles/tailwind.css", ".cache"]
+      "dependsOn": [ "^build" ],
+      "inputs": [ "$TURBO_DEFAULT$", ".env*" ],
+      "outputs": [ "dist/**", "public/build/**", "build/**", "app/styles/tailwind.css", ".cache" ]
     },
     "lint": {
-      "dependsOn": ["^lint"]
+      "dependsOn": [ "^lint" ]
     },
     "check-types": {
-      "dependsOn": ["^check-types"]
+      "dependsOn": [ "^check-types" ]
     },
     "dev": {
-      "cache": false
+      "cache": false,
+      "interactive": true
     },
     "db:generate": {
       "cache": false
@@ -30,10 +31,10 @@
       "cache": false
     },
     "generate": {
-      "dependsOn": ["^generate"]
+      "dependsOn": [ "^generate" ]
     }
   },
-  "globalDependencies": [".env"],
+  "globalDependencies": [ ".env" ],
   "globalEnv": [
     "NODE_ENV",
     "REMIX_APP_PORT",