Updating to include new UI components and claude-kit

samples/TheCritic/package.json

@@ -7,7 +7,7 @@
     "doc": "docs"
   },
   "scripts": {
-	"dev": "FORCE_COLOR=1 vite",
+    "dev": "FORCE_COLOR=1 vite",
     "run": "tsx run.ts",
     "build:vite": "FORCE_COLOR=1 vite build",
     "generate:graphs": "tsx src/make-graphs.ts",
@@ -16,10 +16,6 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "exports": {
-    ".": "./dist/src/runtime.js",
-    "./worker": "./dist/src/worker.js"
-  },
   "type": "module",
   "files": [
     "dist/src"
@@ -34,12 +30,14 @@
     "typescript": "^5.3.2",
     "vite": "^5.0.2",
     "vite-plugin-full-reload": "^1.1.0",
+    "vite-plugin-top-level-await": "^1.3.1",
+    "vite-plugin-wasm": "^3.2.2",
     "vite-plugin-watch-and-run": "^1.4.3"
   },
   "dependencies": {
     "@google-labs/breadboard": "^0.5.1",
     "@google-labs/core-kit": "^0.0.1",
     "@google-labs/llm-starter": "^0.2.1",
-    "@paulkinlan/claude-breadboard-kit": "^2.2.2"
+    "@paulkinlan/claude-breadboard-kit": "^2.2.4"
   }
 }

samples/TheCritic/public/styles/global.css

@@ -67,6 +67,11 @@ header a {
   margin: 0;
 }
 
+#app {
+	display: grid;
+    grid-template-columns: 1fr 2fr;
+}
+
 @media (min-width: 500px) {
   #title {
     font-size: 20px;

samples/TheCritic/src/index.ts

@@ -3,10 +3,11 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+//import '@anthropic-ai/sdk/shims/web'
 
-import {register} from "./ui";
+import { register } from "./ui";
 
-import { ThePanel } from "./boards/the-panel";
+register();
 
+const w = new Worker(new URL("./worker.ts", import.meta.url), { type: "module"});
 
-register();

samples/TheCritic/src/ui/index.ts

@@ -18,3 +18,4 @@ export const get = () => {
   return document.querySelector("#app");
 };
 
+// TODO: add a UI Controller that will handle UI events and udpate the board.

samples/TheCritic/src/worker.ts

@@ -0,0 +1,7 @@
+
+import '@anthropic-ai/sdk/shims/web'
+import { Panel } from './boards/the-panel';
+
+
+const panel = new Panel();
+panel.addCritic("Paul", "You are a member of the EFF (Electronic Frontier Foundation) and you are a privacy advocate");

samples/TheCritic/tsconfig.json

@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "esnext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -30,4 +30,4 @@
     "excludeNotDocumented": true,
     "hideInPageTOC": true
   }
-}
+}

samples/TheCritic/vite.config.ts

@@ -1,39 +1,25 @@
-import { config } from "dotenv";
 import { defineConfig } from "vite";
-import watchAndRun from "vite-plugin-watch-and-run";
-import fullReload from "vite-plugin-full-reload";
-import path from "path";
+import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
 
 export const buildCustomAllowList = (value?: string) => {
-  if (!value) return {};
-  return { fs: { allow: [value] } };
+	if (!value) return {};
+	return { fs: { allow: [value] } };
 };
-
-export default defineConfig(async (_) => {
-  config();
-  return {
-    build: {
-      lib: {
-        entry: {
-          worker: "src/worker.ts",
-          sample: "./index.html",
-        },
-        name: "Breadboard Web Runtime",
-        formats: ["es"],
-      },
-      target: "esnext",
-    },
-    server: {
-      ...buildCustomAllowList(process.env.VITE_FS_ALLOW),
-    },
-    plugins: [
-      watchAndRun([
-        {
-          watch: path.resolve("src/boards/**/*.ts"),
-          run: "npm run generate:graphs",
-        },
-      ]),
-      fullReload(["public/*.json"]),
-    ],
-  };
+export default defineConfig({
+	build: {
+		lib: {
+			entry: {
+				worker: "src/worker.ts",
+				sample: "./index.html",
+			},
+			name: "Breadboard Web Runtime",
+			formats: ["es"],
+		},
+		target: "esnext",
+	},
+	worker: {
+		plugins: [wasm(), topLevelAwait()]
+	},
+	plugins: [wasm(), topLevelAwait()],
 });