Integrate with common-ui

typescript/packages/common-ui/src/components/button.ts

@@ -0,0 +1,12 @@
+import { view } from "../hyperscript/render.js";
+
+export const button = view("button", {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+    "@click": {
+      type: "object",
+      properties: { "@type": { type: "string" }, name: { type: "string" } },
+    },
+  },
+});

typescript/packages/common-ui/src/components/h1.ts

@@ -0,0 +1,8 @@
+import { view } from "../hyperscript/render.js";
+
+export const h1 = view("h1", {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+  },
+});

typescript/packages/common-ui/src/components/p.ts

@@ -0,0 +1,8 @@
+import { view } from "../hyperscript/render.js";
+
+export const p = view("p", {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+  },
+});

typescript/packages/common-ui/src/components/span.ts

@@ -0,0 +1,8 @@
+import { view } from "../hyperscript/render.js";
+
+export const span = view("span", {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+  },
+});

typescript/packages/common-ui/src/hyperscript/render.ts

@@ -109,4 +109,4 @@ export default render;
 const setProp = (element: HTMLElement, key: string, value: any) => {
   // @ts-ignore
   element[key] = value;
-}
+}

typescript/packages/common-ui/src/hyperscript/tags.ts

@@ -4,4 +4,8 @@ export { div } from "../components/div.js";
 export { navpanel } from "../components/navpanel.js";
 export { record } from "../components/record.js";
 export { dict } from "../components/dict.js";
-export { datatable } from "../components/datatable.js";
+export { datatable } from "../components/datatable.js";
+export { span } from "../components/span.js";
+export { h1 } from "../components/h1.js";
+export { p } from "../components/p.js";
+export { button } from "../components/button.js";

typescript/packages/lookslike-prototype/package.json

@@ -7,6 +7,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "dev": "vite",
     "build": "wireit",
     "clean": "wireit"
   },
@@ -33,7 +34,8 @@
         "../../common/runtime:build",
         "../usuba-rt:build",
         "../common-frp:build",
-        "../common-frp-lit:build"
+        "../common-frp-lit:build",
+        "../common-ui:build"
       ],
       "command": "vite build"
     },
@@ -51,6 +53,7 @@
     "@codemirror/view": "^6.27.0",
     "@commontools/common-frp": "^0.0.1",
     "@commontools/common-frp-lit": "^0.0.1",
+    "@commontools/common-ui": "^0.0.1",
     "@commontools/data": "^0.0.1",
     "@commontools/io": "^0.0.1",
     "@commontools/module": "^0.0.1",
@@ -65,6 +68,7 @@
     "idb-keyval": "^6.2.1",
     "json-schema": "^0.4.0",
     "lit": "^3.1.3",
+    "marked": "^13.0.0",
     "openai": "^4.47.2",
     "prettier": "^3.3.0",
     "pretty": "^2.0.0",

typescript/packages/lookslike-prototype/src/agent/implement.ts

@@ -0,0 +1,163 @@
+
+export const codePrompt = `
+  Your task is to take a user description or request and produce a series of nodes for a computation graph. Nodes can be code blocks or UI components and they communicate with named ports.
+
+  You will construct the graph using the available tools to add, remove, replace and list nodes.
+  You will provide the required edges to connect data from the environment to the inputs of the node. The keys of \`in\` are the names of local inputs and the values are NodePaths (of the form [context, nodeId], where context is typically '.' meaning local namespace).
+
+  "Imagine some todos" ->
+
+  addCodeNode({
+    "id": "todos",
+    "code": "return [{ label: 'Water my plants', checked: false }, { label: 'Buy milk', checked: true }];"
+  })
+
+  Tasks that take no inputs require no edges.
+  All function bodies must take zero parameters. Inputs can be accessed via 'read' and 'deref'.
+
+  ---
+
+  "Remind me to water the plants" ->
+
+  addCodeNode({
+    "id": "addReminder",
+    "code": "const todos = input('todos');\nconst newTodo = { label: 'water the plants', checked: false };\nconst newTodos = [...todos, newTodo];\nreturn newTodos;"
+  })
+
+  Tasks that take no inputs require no edges.
+
+  ---
+
+
+  "Take the existing todos and filter to unchecked" ->
+
+  addCodeNode({
+    "id": "filteredTodos",
+    "code": "const todos = input('todos');\nreturn todos.filter(todo => todo.checked);"
+  })
+
+  Tasks that filter other data must pipe the data through the edges.
+  All function bodies must take zero parameters. Inputs can be accessed via 'input()', values may be null.
+  Always respond with code, even for static data. Wrap your response in a json block. Respond with nothing else.
+
+  ---
+
+  "render each image by url" ->
+  The output of a code node will be bound to the input named 'images'
+
+  addUiNode({
+    "id": "imageUi",
+    "uiTree": {
+      "tag": "ul",
+      "props": {
+        "className": "image"
+      },
+      "children": [
+        "type": "repeat",
+        "binding": "images",
+        "template": {
+          "tag": "li",
+          "props": {},
+          "children": [
+            {
+              "tag": "img",
+              "props": {
+                "src": { "@type": 'binding', "name": 'src' },
+              },
+              "children": []
+            }
+          ],
+        }
+      ]
+    }
+  })
+
+  ---
+
+  "show some text" ->
+  The output of a code node will be bound to the input named 'text'
+
+  addUiNode({
+    "id": "imageUi",
+    "uiTree": {
+      "tag": "span",
+      "props": {
+        "innerText": { "@type": "binding", "name": "text" }
+      },
+      "children": []
+    }
+  })
+
+  ---
+
+  "make a clickable button" ->
+
+  addEventNode({
+    "id": "clickEvent"
+  })
+
+  addUiNode({
+    "id": "buttonUi",
+    "uiTree": {
+      "tag": "button",
+      "props": {
+        "innerText": "Click me",
+        "@click": { "@type": "binding", "name": "onClicked"}
+      },
+      "children": []
+    }
+  })
+
+  addConnection({
+    "from": "clickEvent",
+    "to": ["buttonUi", "onClicked"]
+  })
+
+  ---
+
+  "render my todos" ->
+  The output of a code node will be bound to the input named 'todos'
+
+  addUiNode({
+    "id": "todoUi",
+    "uiTree": {
+      "tag": "ul",
+      "props": {
+        "className": "todo"
+      },
+      "children": [
+        {
+          "@type": "repeat",
+          "name": "todos",
+          "template": {
+            "tag": "li",
+            "props": {},
+            "children": [
+              {
+                "tag": "input",
+                "props": {
+                  "type": "checkbox",
+                  "checked": { "@type": "binding", "name": "checked" }
+                },
+                "children": []
+              },
+              {
+                "tag": "span",
+                "props": {
+                  "className": "todo-label",
+                  "innerText": { "@type": "binding", "name": "label" }
+                },
+                "children": []
+              }
+            ]
+          }
+        }
+      ]
+    }
+  })
+
+  UI trees cannot use any javascript methods, code blocks must prepare the data for the UI to consume.
+  Plain text nodes MUST be applied using the innerText prop in a span, you cannot use a raw string.
+  GLSL shaders cannot declare uniforms other than iTime, iResolution, iMouse and iChannel0 (the user's webcam).
+  notalk;justgo
+`;