fixing issues with stacks

ui/app/build/[slug]/page.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import type { Stack } from './types';
+
+interface WorkflowProps {
+  slug: string;
+}
+
+const Workflow: React.FC<WorkflowProps> = ({ slug }) => {
+  const [stackInfo, setStackInfo] = useState<Stack | null>(null);
+  const stackSlug = slug ?? null;
+
+  useEffect(() => {
+    // this should import the jsonl file from ../../stacks/v2/${slug}.jsonl
+  }, [slug]);
+
+  return (
+    <div>
+      <h1>Workflow</h1>
+    </div>
+  );
+};

ui/app/build/[slug]/types.ts

@@ -0,0 +1,17 @@
+export interface StackItem {
+  type: string;
+  description: string;
+  variables?: string[];
+}
+
+export interface Stack {
+  created: number;
+  updated: number;
+  name: string;
+  description: string;
+  trigger: {
+    type: string;
+  };
+  stack: StackItem[];
+  variables: Record<string, string>;
+}

ui/app/api/stacks/v2/summarize-commits.jsonl → ui/app/components/stacks/v2/summarize-commits.jsonl

@@ -1,6 +1,8 @@
 {
   "created": 1484938100,
   "updated": 1484938100,
+  "name": "Github Commits",
+  "description": "This recipe summarizes the commits from a Github user in the last month",
   "trigger": {
     "type": "click"
   },

ui/app/stacks/[slug]/page.tsx

@@ -62,10 +62,10 @@ const Chat = ({ params }: { params: { slug: string } }) => {
 
   const DynamicComponent = useMemo(() => {
     if (!stack) return null; // FIXME: redirect or show an error, change DynamicComponent usage below as well
-    return dynamic(() => import(`@/app/components/stacks/${stack.slug}`), {
+    return dynamic(() => import(`@/app/components/stacks/v1/${stack.slug}`), {
       ssr: false,
       loading: () => {
-        return <div></div>;
+        return <div>No such stack</div>;
       },
     });
   }, [stack?.slug]);
@@ -202,6 +202,7 @@ const Container = tw.div`
   justify-center
   items-center
   h-screen
+  w-full
   space-y-6
   pb-32
 `;