From 39db0cc32e0d16c95b37c7904ba30373b1216f9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mija=C3=ADl=20Rond=C3=B3n?= <mijail@littlehorse.io>
Date: Tue, 30 Apr 2024 11:56:21 -0500
Subject: [PATCH] feat(dashboard): interactive nodes (#775)

* feat(dashboard): add taskRun details

* feat(wfRun): improve thread selector
---
 dashboard-new/package-lock.json               |  1 +
 dashboard-new/package.json                    |  3 +-
 .../components/Diagram.tsx                    | 10 +--
 .../components/EdgeTypes/Default.tsx          |  0
 .../components/EdgeTypes/EdgeDetails.tsx      |  0
 .../components/EdgeTypes}/extractEdges.ts     |  0
 .../components/EdgeTypes/index.ts             |  0
 .../components/Layouter.tsx                   |  0
 .../(diagram)/components/Modals/Modals.tsx    | 10 +++
 .../(diagram)/components/Modals/TaskRun.tsx   | 69 ++++++++++++++++++
 .../(diagram)/components/Modals/index.ts      | 13 ++++
 .../components/NodeTypes/Entrypoint.tsx       |  0
 .../components/NodeTypes/Exit.tsx             |  0
 .../components/NodeTypes/ExternalEvent.tsx    |  0
 .../components/NodeTypes/Fade.tsx             |  0
 .../components/NodeTypes/NodeDetails.tsx      |  0
 .../components/NodeTypes/Nop.tsx              |  0
 .../components/NodeTypes/Sleep.tsx            |  0
 .../NodeTypes/StartMultipleThreads.tsx        |  0
 .../components/NodeTypes/StartThread.tsx      |  0
 .../components/NodeTypes/StatusPin.tsx        |  0
 .../components/NodeTypes/Task}/Task.tsx       |  4 +-
 .../NodeTypes/Task}/TaskDetails.tsx           | 43 +++++++++--
 .../components/NodeTypes/Task/getTaskRun.ts   | 10 +++
 .../components/NodeTypes/Task/index.ts        |  1 +
 .../components/NodeTypes/UserTask.tsx         |  2 +-
 .../components/NodeTypes/WaitForThreads.tsx   |  0
 .../components/NodeTypes}/extractNodes.ts     |  0
 .../components/NodeTypes/index.ts             | 14 ++--
 .../(diagram)/components/ThreadPanel.tsx      | 71 +++++++++++++++++++
 .../(diagram)/context/ModalContext.tsx        | 23 ++++++
 .../(diagram)/context/ThreadContext.tsx       | 13 ++++
 .../(diagram)/context/index.ts                |  2 +
 .../(diagram)/hooks/useModal.tsx              |  7 ++
 .../(diagram)/hooks/useScrollbar.tsx          | 31 ++++++++
 .../(diagram)/hooks/useThread.tsx             |  7 ++
 .../app/(authenticated)/(diagram)/layout.tsx  | 18 +++++
 .../wfRun/[...ids]/components/Details.tsx     |  0
 .../wfRun/[...ids]/components/WfRun.tsx       | 12 ++--
 .../wfRun/[...ids]/getWfRun.ts                |  0
 .../{ => (diagram)}/wfRun/[...ids]/page.tsx   |  0
 .../wfSpec/[...props]/actions/getVersions.ts  |  0
 .../wfSpec/[...props]/actions/getWfSpec.ts    |  0
 .../wfSpec/[...props]/actions/searchWfRun.ts  |  0
 .../wfSpec/[...props]/components/Details.tsx  |  0
 .../[...props]/components/Mutations.tsx       |  0
 .../wfSpec/[...props]/components/Thread.tsx   |  0
 .../[...props]/components/Variables.tsx       |  0
 .../wfSpec/[...props]/components/Versions.tsx |  0
 .../wfSpec/[...props]/components/WfRuns.tsx   |  0
 .../[...props]/components/WfRunsHeader.tsx    |  0
 .../wfSpec/[...props]/components/WfSpec.tsx   |  7 +-
 .../wfSpec/[...props]/page.tsx                |  0
 .../[...props]/components/ThreadPanel.tsx     | 52 --------------
 .../wfSpec/[...props]/hooks/useThread.tsx     | 18 -----
 dashboard-new/src/app/utils/variables.ts      | 14 ++--
 56 files changed, 348 insertions(+), 107 deletions(-)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/Diagram.tsx (88%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/EdgeTypes/Default.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/EdgeTypes/EdgeDetails.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props]/components => (diagram)/components/EdgeTypes}/extractEdges.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/EdgeTypes/index.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/Layouter.tsx (100%)
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/Modals.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/TaskRun.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/index.ts
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/Entrypoint.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/Exit.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/ExternalEvent.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/Fade.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/NodeDetails.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/Nop.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/Sleep.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/StartMultipleThreads.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/StartThread.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/StatusPin.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props]/components/NodeTypes => (diagram)/components/NodeTypes/Task}/Task.tsx (94%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props]/components/NodeTypes => (diagram)/components/NodeTypes/Task}/TaskDetails.tsx (58%)
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/getTaskRun.ts
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/index.ts
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/UserTask.tsx (96%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/WaitForThreads.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props]/components => (diagram)/components/NodeTypes}/extractNodes.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{wfSpec/[...props] => (diagram)}/components/NodeTypes/index.ts (96%)
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/components/ThreadPanel.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/context/ModalContext.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/context/ThreadContext.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/context/index.ts
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/hooks/useModal.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/hooks/useScrollbar.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/hooks/useThread.tsx
 create mode 100644 dashboard-new/src/app/(authenticated)/(diagram)/layout.tsx
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfRun/[...ids]/components/Details.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfRun/[...ids]/components/WfRun.tsx (68%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfRun/[...ids]/getWfRun.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfRun/[...ids]/page.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/actions/getVersions.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/actions/getWfSpec.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/actions/searchWfRun.ts (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/Details.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/Mutations.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/Thread.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/Variables.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/Versions.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/WfRuns.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/WfRunsHeader.tsx (100%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/components/WfSpec.tsx (84%)
 rename dashboard-new/src/app/(authenticated)/{ => (diagram)}/wfSpec/[...props]/page.tsx (100%)
 delete mode 100644 dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/ThreadPanel.tsx
 delete mode 100644 dashboard-new/src/app/(authenticated)/wfSpec/[...props]/hooks/useThread.tsx

diff --git a/dashboard-new/package-lock.json b/dashboard-new/package-lock.json
index ef16fb3a3d..65dd98a6d9 100644
--- a/dashboard-new/package-lock.json
+++ b/dashboard-new/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "dashboard",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@headlessui/react": "^1.7.18",
         "@heroicons/react": "^2.1.1",
diff --git a/dashboard-new/package.json b/dashboard-new/package.json
index c8e34fedc3..0e070cc83e 100644
--- a/dashboard-new/package.json
+++ b/dashboard-new/package.json
@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "prettier --check .",
     "lint:fix": "prettier --write .",
-    "test": "jest"
+    "test": "jest",
+    "preinstall": "cd ../sdk-js && npm i && npm run build"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.18",
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Diagram.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/Diagram.tsx
similarity index 88%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Diagram.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/Diagram.tsx
index b68db5e689..709d5eaafd 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Diagram.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/Diagram.tsx
@@ -1,18 +1,18 @@
 'use client'
-import { ThreadRunWithNodeRuns } from '@/app/(authenticated)/wfRun/[...ids]/getWfRun'
+import { ThreadRunWithNodeRuns } from '@/app/(authenticated)/(diagram)/wfRun/[...ids]/getWfRun'
 import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
 import { WfRun } from 'littlehorse-client/dist/proto/wf_run'
 import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec'
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import ReactFlow, { Controls, useEdgesState, useNodesState } from 'reactflow'
 import 'reactflow/dist/base.css'
-import { ThreadProvider, ThreadType } from '../hooks/useThread'
+import { ThreadProvider, ThreadType } from '../context'
 import { edgeTypes } from './EdgeTypes'
+import { extractEdges } from './EdgeTypes/extractEdges'
 import { Layouter } from './Layouter'
 import nodeTypes from './NodeTypes'
+import { extractNodes } from './NodeTypes/extractNodes'
 import { ThreadPanel } from './ThreadPanel'
-import { extractEdges } from './extractEdges'
-import { extractNodes } from './extractNodes'
 
 type Props = {
   wfRun?: WfRun & { threadRuns: ThreadRunWithNodeRuns[] }
@@ -54,6 +54,7 @@ export const Diagram: FC<Props> = ({ spec, wfRun }) => {
 
   return (
     <ThreadProvider value={{ thread, setThread }}>
+      <ThreadPanel spec={spec} wfRun={wfRun} />
       <div className="mb-4 min-h-[800px] min-w-full rounded border-2 border-slate-100 bg-slate-50 shadow-inner">
         <ReactFlow
           nodes={nodes}
@@ -66,7 +67,6 @@ export const Diagram: FC<Props> = ({ spec, wfRun }) => {
           snapToGrid={true}
           className="min-h-[800px] min-w-full bg-slate-50"
         >
-          <ThreadPanel spec={spec} wfRun={wfRun} />
           <Controls />
         </ReactFlow>
         <Layouter nodeRuns={threadNodeRuns} />
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/Default.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/Default.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/Default.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/Default.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/EdgeDetails.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/EdgeDetails.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/EdgeDetails.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/EdgeDetails.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/extractEdges.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/extractEdges.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/extractEdges.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/extractEdges.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/index.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/index.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/EdgeTypes/index.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/EdgeTypes/index.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Layouter.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/Layouter.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Layouter.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/Layouter.tsx
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/Modals.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/Modals.tsx
new file mode 100644
index 0000000000..cbb372d24d
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/Modals.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import { ModalComponents } from '.'
+import { useModal } from '../../hooks/useModal'
+
+export const Modals: FC = () => {
+  const { modal } = useModal()
+  if (!modal) return null
+  const Component = ModalComponents[modal.type]
+  return <Component {...modal} />
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/TaskRun.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/TaskRun.tsx
new file mode 100644
index 0000000000..9794ec2c3d
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/TaskRun.tsx
@@ -0,0 +1,69 @@
+import { getVariableValue } from '@/app/utils'
+import { Dialog } from '@headlessui/react'
+import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'
+import { FC, useMemo, useState } from 'react'
+import { Modal } from '../../context'
+import { useModal } from '../../hooks/useModal'
+
+export const TaskRun: FC<Modal> = ({ data }) => {
+  const { showModal, setShowModal } = useModal()
+  const [attemptIndex, setAttemptIndex] = useState(data.attempts.length - 1)
+  const attempt = useMemo(() => data.attempts[attemptIndex], [attemptIndex, data.attempts])
+  return (
+    <Dialog open={showModal} className="relative z-50" onClose={() => setShowModal(false)}>
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="w-1/3 min-w-fit rounded bg-white p-2">
+          <Dialog.Title className="mb-2 flex items-center justify-between">
+            <h2 className="text-lg font-bold">TaskRun</h2>
+            <div className="item-center flex gap-1 bg-gray-200 px-2 py-1">
+              <span className="font-mono text-sm">{data.id?.taskGuid}</span>
+              <ClipboardDocumentIcon className="h-4 w-4 fill-transparent stroke-blue-500" />
+            </div>
+          </Dialog.Title>
+          <Dialog.Description>
+            <div className="">
+              <div className="flex items-center justify-between bg-green-200 p-2">
+                <div className="flex items-center gap-1">
+                  <div className="flex gap-1">
+                    {data.attempts.reverse().map((_, i) => {
+                      const index = data.attempts.length - i - 1
+                      return (
+                        <button
+                          key={`attempt-${index}`}
+                          className={`border-2 border-blue-500 px-2 ${attemptIndex === index ? 'text-blue-500' : 'bg-blue-500 text-white'}`}
+                          onClick={() => setAttemptIndex(index)}
+                        >
+                          {index}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+                <div className="">
+                  <div className="">{attempt.status}</div>
+                </div>
+              </div>
+              <div className="p-2">
+                <div className="flex items-center gap-2">
+                  <div className="font-bold">startTime:</div>
+                  <div className="">{attempt.startTime}</div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="font-bold">endTime:</div>
+                  <div className="">{attempt.endTime}</div>
+                </div>
+              </div>
+              {attempt.output && (
+                <div className="mt-2 flex flex-col rounded bg-zinc-500 p-1 text-white">
+                  <h3 className="font-bold">Output</h3>
+                  <pre className="overflow-x-auto">{getVariableValue(attempt.output)}</pre>
+                </div>
+              )}
+            </div>
+          </Dialog.Description>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/index.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/index.ts
new file mode 100644
index 0000000000..6fe97e6e21
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/Modals/index.ts
@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import { Modal } from '../../context'
+import { TaskRun } from './TaskRun'
+
+export * from './Modals'
+
+export type ModalComponent = FC<Modal>
+
+export const ModalComponents = {
+  taskRun: TaskRun,
+} as const
+
+export type ModalType = keyof typeof ModalComponents
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Entrypoint.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Entrypoint.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Entrypoint.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Entrypoint.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Exit.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Exit.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Exit.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Exit.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/ExternalEvent.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/ExternalEvent.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/ExternalEvent.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/ExternalEvent.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Fade.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Fade.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Fade.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Fade.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/NodeDetails.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/NodeDetails.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/NodeDetails.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/NodeDetails.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Nop.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Nop.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Nop.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Nop.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Sleep.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Sleep.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Sleep.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Sleep.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StartMultipleThreads.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StartMultipleThreads.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StartMultipleThreads.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StartMultipleThreads.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StartThread.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StartThread.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StartThread.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StartThread.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StatusPin.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StatusPin.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/StatusPin.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/StatusPin.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Task.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx
similarity index 94%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Task.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx
index 73508a7e3a..a499501c63 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/Task.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx
@@ -2,8 +2,8 @@ import { getVariable } from '@/app/utils'
 import { Cog6ToothIcon } from '@heroicons/react/16/solid'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
-import { NodeProps } from '.'
-import { Fade } from './Fade'
+import { NodeProps } from '..'
+import { Fade } from '../Fade'
 import { TaskDetails } from './TaskDetails'
 
 const Node: FC<NodeProps> = ({ selected, data }) => {
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/TaskDetails.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
similarity index 58%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/TaskDetails.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
index 27614ca8e9..3340f6f124 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/TaskDetails.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
@@ -1,12 +1,31 @@
 import { getVariable } from '@/app/utils'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid'
+import { ArrowTopRightOnSquareIcon, EyeIcon } from '@heroicons/react/24/solid'
+import { useQuery } from '@tanstack/react-query'
 import { TaskNode } from 'littlehorse-client/dist/proto/common_wfspec'
 import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
 import Link from 'next/link'
-import { FC } from 'react'
-import { NodeDetails } from './NodeDetails'
+import { FC, useCallback } from 'react'
+import { useModal } from '../../../hooks/useModal'
+import { NodeDetails } from '../NodeDetails'
+import { getTaskRun } from './getTaskRun'
 
 export const TaskDetails: FC<{ task?: TaskNode; nodeRun?: NodeRun }> = ({ task, nodeRun }) => {
+  const { data } = useQuery({
+    queryKey: ['taskRun', nodeRun],
+    queryFn: async () => {
+      if (nodeRun?.task?.taskRunId) return await getTaskRun(nodeRun.task.taskRunId)
+    },
+  })
+
+  const { setModal, setShowModal } = useModal()
+
+  const onClick = useCallback(() => {
+    if (data) {
+      setModal({ type: 'taskRun', data: data })
+      setShowModal(true)
+    }
+  }, [data, setModal, setShowModal])
+
   if (!task) return null
   return (
     <NodeDetails>
@@ -30,11 +49,15 @@ export const TaskDetails: FC<{ task?: TaskNode; nodeRun?: NodeRun }> = ({ task,
       {task.variables && task.variables.length > 0 && (
         <div className="whitespace-nowrap">
           <h3 className="font-bold">Inputs</h3>
-          <ul className="list-inside list-disc">
+          <ol className="list-inside list-decimal">
             {task.variables.map((variable, i) => (
-              <li key={`variable.${i}`}>{getVariable(variable)}</li>
+              <li className="mb-1 flex gap-1" key={`variable.${i}`}>
+                <div className="bg-gray-200 px-2 font-mono text-fuchsia-500">arg{i}</div>
+                <div> = </div>
+                <div className="truncate">{getVariable(variable)}</div>
+              </li>
             ))}
-          </ul>
+          </ol>
         </div>
       )}
       {nodeRun && nodeRun.errorMessage && (
@@ -43,6 +66,14 @@ export const TaskDetails: FC<{ task?: TaskNode; nodeRun?: NodeRun }> = ({ task,
           <pre className="overflow-x-auto">{nodeRun.errorMessage}</pre>
         </div>
       )}
+      {nodeRun && (
+        <div className="mt-2 flex justify-center">
+          <button className="flex items-center gap-1 p-1 text-blue-500 hover:bg-gray-200" onClick={onClick}>
+            <EyeIcon className="h-4 w-4" />
+            Inspect TaskRun
+          </button>
+        </div>
+      )}
     </NodeDetails>
   )
 }
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/getTaskRun.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/getTaskRun.ts
new file mode 100644
index 0000000000..567f6e7a77
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/getTaskRun.ts
@@ -0,0 +1,10 @@
+'use server'
+import { lhClient } from '@/app/lhClient'
+import { WithTenant } from '@/types'
+import { TaskRunId } from 'littlehorse-client/dist/proto/object_id'
+
+export type TaskRunRequestProps = TaskRunId & WithTenant
+export const getTaskRun = async ({ tenantId, ...req }: TaskRunRequestProps) => {
+  const client = await lhClient({ tenantId })
+  return client.getTaskRun(req)
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/index.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/index.ts
new file mode 100644
index 0000000000..2db9097d43
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/index.ts
@@ -0,0 +1 @@
+export * from './Task'
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/UserTask.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/UserTask.tsx
similarity index 96%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/UserTask.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/UserTask.tsx
index 5f25790f1c..c8e4edaadd 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/UserTask.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/UserTask.tsx
@@ -36,7 +36,7 @@ const Node: FC<NodeProps> = ({ data, selected }) => {
           {userTask.notes && (
             <div className="rounded bg-gray-200 p-1">
               <h3 className="mb-1 font-bold">Notes</h3>
-              <pre>{getVariable(userTask.notes)}</pre>
+              <pre className="overflow-x-auto">{getVariable(userTask.notes)}</pre>
             </div>
           )}
         </div>
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/WaitForThreads.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/WaitForThreads.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/WaitForThreads.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/WaitForThreads.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/extractNodes.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/extractNodes.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/extractNodes.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/extractNodes.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/index.ts b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/index.ts
similarity index 96%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/index.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/index.ts
index 1afd601106..e52d6302d1 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/NodeTypes/index.ts
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/NodeTypes/index.ts
@@ -1,18 +1,18 @@
+import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
+import { Node } from 'littlehorse-client/dist/proto/wf_spec'
 import { ComponentType } from 'react'
 import { NodeProps as NodeFlow } from 'reactflow'
-import { NodeType } from '../extractNodes'
 import { Entrypoint } from './Entrypoint'
 import { Exit } from './Exit'
+import { ExternalEvent } from './ExternalEvent'
 import { Nop } from './Nop'
+import { Sleep } from './Sleep'
+import { StartMultipleThreads } from './StartMultipleThreads'
+import { StartThread } from './StartThread'
 import { Task } from './Task'
-import { ExternalEvent } from './ExternalEvent'
 import { UserTask } from './UserTask'
 import { WaitForThreads } from './WaitForThreads'
-import { StartThread } from './StartThread'
-import { Sleep } from './Sleep'
-import { NodeRun } from 'littlehorse-client/dist/proto/node_run'
-import { Node } from 'littlehorse-client/dist/proto/wf_spec'
-import { StartMultipleThreads } from './StartMultipleThreads'
+import { NodeType } from './extractNodes'
 
 const nodeTypes: Record<NodeType, ComponentType<NodeProps>> = {
   ENTRYPOINT: Entrypoint,
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/components/ThreadPanel.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/components/ThreadPanel.tsx
new file mode 100644
index 0000000000..88a36329a4
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/components/ThreadPanel.tsx
@@ -0,0 +1,71 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
+import { WfRun } from 'littlehorse-client/dist/proto/wf_run'
+import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec'
+import { FC, useEffect, useMemo } from 'react'
+import { useScrollbar } from '../hooks/useScrollbar'
+import { useThread } from '../hooks/useThread'
+
+export const ThreadPanel: FC<{ spec: WfSpec; wfRun?: WfRun }> = ({ spec, wfRun }) => {
+  const { thread, setThread } = useThread()
+  const threads = useMemo(() => extractThreads(spec, wfRun), [spec, wfRun])
+  const { scroll, itemsRef, containerRef, maxScroll, scrollLeft, scrollRight } = useScrollbar()
+
+  return (
+    <div className="relative mb-2 flex items-center">
+      <div
+        className={`absolute left-0 top-0 z-10 flex after:h-[38px] after:w-[50px] after:bg-gradient-to-r after:from-white after:to-transparent after:content-[''] ${scroll === 0 ? 'hidden' : ''}`}
+      >
+        <button className="bg-white" onClick={() => scrollLeft()}>
+          <ChevronLeftIcon className="h-6 w-6" />
+        </button>
+      </div>
+      <div className="flex touch-pan-y items-center overflow-hidden text-nowrap" ref={containerRef}>
+        <div
+          className="flex gap-2 duration-[15ms] ease-[cubic-bezier(.05,0,0,1)] will-change-transform	"
+          style={{ transform: `translateX(${scroll}px)` }}
+          ref={itemsRef}
+        >
+          {threads.map(({ name, number }) => (
+            <button
+              className={
+                'border-[1px] p-2 text-sm shadow ' +
+                (name === thread.name && number !== undefined && number === thread.number
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-white text-black')
+              }
+              key={`${name}-${number}`}
+              onClick={() => {
+                setThread(prev => {
+                  const current = number === undefined ? { name } : { name, number }
+                  return {
+                    ...prev,
+                    ...current,
+                  }
+                })
+              }}
+            >
+              {`${name}${number !== undefined ? `-${number}` : ''}`}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div
+        className={`absolute right-0 top-0 flex before:h-[38px] before:w-[50px] before:bg-gradient-to-l before:from-white before:to-transparent before:content-[''] ${!maxScroll || -scroll >= maxScroll ? 'hidden' : ''}`}
+      >
+        <button className="bg-white" onClick={() => scrollRight()}>
+          <ChevronRightIcon className="h-6 w-6" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+const extractThreads = (spec: WfSpec, wfRun?: WfRun): { name: string; number?: number }[] => {
+  if (wfRun) {
+    return wfRun.threadRuns.map(threadRun => ({
+      name: threadRun.threadSpecName,
+      number: threadRun.number,
+    }))
+  }
+  return Object.keys(spec.threadSpecs).map(name => ({ name }))
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/context/ModalContext.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/context/ModalContext.tsx
new file mode 100644
index 0000000000..a47891b180
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/context/ModalContext.tsx
@@ -0,0 +1,23 @@
+import { TaskRun } from 'littlehorse-client/dist/proto/task_run'
+import { Dispatch, SetStateAction, createContext } from 'react'
+import { ModalType } from '../components/Modals'
+
+export type Modal = {
+  type: ModalType
+  data: TaskRun
+}
+
+type ModalContextType = {
+  modal: Modal | null
+  setModal: Dispatch<SetStateAction<Modal | null>>
+  showModal: boolean
+  setShowModal: Dispatch<SetStateAction<boolean>>
+}
+export const ModalContext = createContext<ModalContextType>({
+  modal: null,
+  setModal: () => {},
+  showModal: false,
+  setShowModal: () => {},
+})
+
+export const ModalProvider = ModalContext.Provider
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/context/ThreadContext.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/context/ThreadContext.tsx
new file mode 100644
index 0000000000..95be9d5491
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/context/ThreadContext.tsx
@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction, createContext } from 'react'
+
+export type ThreadType = {
+  name: string
+  number: number
+}
+type ThreadContextType = {
+  thread: ThreadType
+  setThread: Dispatch<SetStateAction<ThreadType>>
+}
+export const ThreadContext = createContext<ThreadContextType>({ thread: { name: '', number: 0 }, setThread: () => {} })
+
+export const ThreadProvider = ThreadContext.Provider
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/context/index.ts b/dashboard-new/src/app/(authenticated)/(diagram)/context/index.ts
new file mode 100644
index 0000000000..e7e696758c
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/context/index.ts
@@ -0,0 +1,2 @@
+export * from './ModalContext'
+export * from './ThreadContext'
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useModal.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useModal.tsx
new file mode 100644
index 0000000000..20848d542e
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useModal.tsx
@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { ModalContext } from '../context'
+
+export const useModal = () => {
+  const { modal, setModal, showModal, setShowModal } = useContext(ModalContext)
+  return { modal, setModal, showModal, setShowModal }
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useScrollbar.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useScrollbar.tsx
new file mode 100644
index 0000000000..45288b944c
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useScrollbar.tsx
@@ -0,0 +1,31 @@
+import { useState, useRef, useMemo, useCallback } from "react"
+
+const SCROLL_STEP = 450
+
+export const useScrollbar = () => {
+  const [scroll, setScroll] = useState(0)
+
+  const itemsRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const maxScroll = useMemo(() => {
+    if (!itemsRef.current || !containerRef.current) return
+    return itemsRef.current.getBoundingClientRect().width - containerRef.current?.getBoundingClientRect().width
+  }, [itemsRef, containerRef])
+
+  const scrollRight = useCallback(() => {
+    setScroll(prev => {
+      if (maxScroll === undefined) return 0
+      const newVal = prev - SCROLL_STEP
+      return newVal <= -maxScroll ? -maxScroll : newVal
+    })
+  }, [maxScroll, setScroll])
+
+  const scrollLeft = useCallback(() => {
+    setScroll(prev => {
+      const newVal = prev + SCROLL_STEP
+      return newVal > 0 ? 0 : newVal
+    })
+  }, [setScroll])
+
+  return { scroll, maxScroll, itemsRef, containerRef, scrollRight, scrollLeft }
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useThread.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useThread.tsx
new file mode 100644
index 0000000000..e325d08b2d
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/hooks/useThread.tsx
@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { ThreadContext } from '../context'
+
+export const useThread = () => {
+  const { thread, setThread } = useContext(ThreadContext)
+  return { thread, setThread }
+}
diff --git a/dashboard-new/src/app/(authenticated)/(diagram)/layout.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/layout.tsx
new file mode 100644
index 0000000000..798095e7bb
--- /dev/null
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/layout.tsx
@@ -0,0 +1,18 @@
+'use client'
+import { useState } from 'react'
+import { ReactFlowProvider } from 'reactflow'
+import { Modal, ModalProvider } from './context'
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const [modal, setModal] = useState<Modal | null>(null)
+  const [showModal, setShowModal] = useState(false)
+  return (
+    <ReactFlowProvider>
+      <ModalProvider value={{ modal, setModal, showModal, setShowModal }}>{children}</ModalProvider>
+    </ReactFlowProvider>
+  )
+}
diff --git a/dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/Details.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/Details.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/Details.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/Details.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/WfRun.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/WfRun.tsx
similarity index 68%
rename from dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/WfRun.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/WfRun.tsx
index d9cf0365ab..d80dbfeca8 100644
--- a/dashboard-new/src/app/(authenticated)/wfRun/[...ids]/components/WfRun.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/WfRun.tsx
@@ -1,20 +1,24 @@
 'use client'
+import { Diagram } from '@/app/(authenticated)/(diagram)/components/Diagram'
 import { Navigation } from '@/app/(authenticated)/components/Navigation'
-import { Diagram } from '@/app/(authenticated)/wfSpec/[...props]/components/Diagram'
 import { FC } from 'react'
-import { ReactFlowProvider } from 'reactflow'
 import { WfRunResponse } from '../getWfRun'
 import { Details } from './Details'
+import { useModal } from '../../../hooks/useModal'
+import { Modals } from '../../../components/Modals'
 
 export const WfRun: FC<WfRunResponse> = ({ wfRun, wfSpec, nodeRuns }) => {
+  const { modal, showModal } = useModal()
   return (
-    <ReactFlowProvider>
+    <>
       <Navigation
         href={`/wfSpec/${wfRun.wfSpecId?.name}/${wfRun.wfSpecId?.majorVersion}/${wfRun.wfSpecId?.revision}`}
         title="Go back to WfSpec"
       />
       <Details {...wfRun} />
       <Diagram spec={wfSpec} wfRun={wfRun} nodeRuns={nodeRuns} />
-    </ReactFlowProvider>
+
+      <Modals />
+    </>
   )
 }
diff --git a/dashboard-new/src/app/(authenticated)/wfRun/[...ids]/getWfRun.ts b/dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/getWfRun.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfRun/[...ids]/getWfRun.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/getWfRun.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfRun/[...ids]/page.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/page.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfRun/[...ids]/page.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfRun/[...ids]/page.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/getVersions.ts b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/getVersions.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/getVersions.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/getVersions.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/getWfSpec.ts b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/getWfSpec.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/getWfSpec.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/getWfSpec.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/searchWfRun.ts b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/searchWfRun.ts
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/actions/searchWfRun.ts
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/actions/searchWfRun.ts
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Details.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Details.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Details.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Details.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Mutations.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Mutations.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Mutations.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Mutations.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Thread.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Thread.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Thread.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Thread.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Variables.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Variables.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Variables.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Variables.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Versions.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Versions.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/Versions.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/Versions.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfRuns.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfRuns.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfRuns.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfRuns.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfRunsHeader.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfRunsHeader.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfSpec.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfSpec.tsx
similarity index 84%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfSpec.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfSpec.tsx
index 9a1d19e88e..b59f60ca40 100644
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/WfSpec.tsx
+++ b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/components/WfSpec.tsx
@@ -2,18 +2,17 @@
 import { Navigation } from '@/app/(authenticated)/components/Navigation'
 import { WfSpec as Spec } from 'littlehorse-client/dist/proto/wf_spec'
 import { FC } from 'react'
+import { Diagram } from '../../../components/Diagram'
 import { Details } from './Details'
-import { Diagram } from './Diagram'
 import { Thread } from './Thread'
 import { WfRuns } from './WfRuns'
-import { ReactFlowProvider } from 'reactflow'
 
 type WfSpecProps = {
   spec: Spec
 }
 export const WfSpec: FC<WfSpecProps> = ({ spec }) => {
   return (
-    <ReactFlowProvider>
+    <>
       <Navigation href="/" title="Go back to WfSpecs" />
       <Details status={spec.status} id={spec.id} />
       <Diagram spec={spec} />
@@ -23,6 +22,6 @@ export const WfSpec: FC<WfSpecProps> = ({ spec }) => {
           <Thread key={name} name={name} spec={spec.threadSpecs[name]} />
         ))}
       <WfRuns id={spec.id} />
-    </ReactFlowProvider>
+    </>
   )
 }
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/page.tsx b/dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/page.tsx
similarity index 100%
rename from dashboard-new/src/app/(authenticated)/wfSpec/[...props]/page.tsx
rename to dashboard-new/src/app/(authenticated)/(diagram)/wfSpec/[...props]/page.tsx
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/ThreadPanel.tsx b/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/ThreadPanel.tsx
deleted file mode 100644
index aac90f32e2..0000000000
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/components/ThreadPanel.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { WfRun } from 'littlehorse-client/dist/proto/wf_run'
-import { WfSpec } from 'littlehorse-client/dist/proto/wf_spec'
-import { FC } from 'react'
-import { Panel } from 'reactflow'
-import { useThread } from '../hooks/useThread'
-
-export const ThreadPanel: FC<{ spec: WfSpec; wfRun?: WfRun }> = ({ spec, wfRun }) => {
-  const { thread, setThread } = useThread()
-  return (
-    <Panel position="top-left">
-      <div className="flex w-full items-center justify-between gap-2">
-        {wfRun ? (
-          <>
-            {wfRun.threadRuns.map(threadRun => (
-              <button
-                className={
-                  'border-[1px] p-2 text-sm shadow ' +
-                  (threadRun.threadSpecName === thread.name && threadRun.number === thread.number
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-white text-black')
-                }
-                key={`${threadRun.threadSpecName}-${threadRun.number}`}
-                onClick={() => {
-                  setThread({ name: threadRun.threadSpecName, number: threadRun.number })
-                }}
-              >
-                {threadRun.threadSpecName}-{threadRun.number}
-              </button>
-            ))}
-          </>
-        ) : (
-          <>
-            {Object.keys(spec.threadSpecs)
-              .reverse()
-              .map(threadName => (
-                <button
-                  className={
-                    'border-[1px] p-2 text-sm shadow ' +
-                    (threadName === thread.name ? 'bg-blue-500 text-white' : 'bg-white text-black')
-                  }
-                  key={threadName}
-                  onClick={() => setThread(prev => ({ ...prev, name: threadName }))}
-                >
-                  {threadName}
-                </button>
-              ))}
-          </>
-        )}
-      </div>
-    </Panel>
-  )
-}
diff --git a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/hooks/useThread.tsx b/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/hooks/useThread.tsx
deleted file mode 100644
index 35c9917081..0000000000
--- a/dashboard-new/src/app/(authenticated)/wfSpec/[...props]/hooks/useThread.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Dispatch, SetStateAction, createContext, useContext } from 'react'
-
-export type ThreadType = {
-  name: string
-  number: number
-}
-type ThreadContextType = {
-  thread: ThreadType
-  setThread: Dispatch<SetStateAction<ThreadType>>
-}
-const ThreadContext = createContext<ThreadContextType>({ thread: { name: '', number: 0 }, setThread: () => {} })
-
-export const ThreadProvider = ThreadContext.Provider
-
-export const useThread = () => {
-  const { thread, setThread } = useContext(ThreadContext)
-  return { thread, setThread }
-}
diff --git a/dashboard-new/src/app/utils/variables.ts b/dashboard-new/src/app/utils/variables.ts
index 1a36527e52..30d5569cae 100644
--- a/dashboard-new/src/app/utils/variables.ts
+++ b/dashboard-new/src/app/utils/variables.ts
@@ -7,7 +7,13 @@ export const getVariable = (variable?: VariableAssignment) => {
   if (variable.variableName) {
     return getValueFromVariableName(variable)
   }
-  if (variable.literalValue) return getValueFromLiteralValue(variable)
+  if (variable.literalValue) return getVariableValue(variable.literalValue)
+}
+
+export const getVariableValue = (variable?: VariableValue) => {
+  if (!variable) return
+  const key = Object.keys(variable)[0] as keyof VariableValue
+  return variable[key]
 }
 
 const getValueFromVariableName = ({
@@ -19,12 +25,6 @@ const getValueFromVariableName = ({
   return `{${variableName}}`
 }
 
-const getValueFromLiteralValue = ({ literalValue }: Pick<VariableAssignment, 'literalValue'>) => {
-  if (!literalValue) return
-  const key = Object.keys(literalValue)[0] as keyof VariableValue
-  return literalValue[key]
-}
-
 const getValueFromFormatString = ({ formatString }: Pick<VariableAssignment, 'formatString'>): string | undefined => {
   if (!formatString) return
   const template = getVariable(formatString.format)