+ ): void {
+ if (changedProperties.has('value')) {
+ this.#updateTextareaHeight()
+ }
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-prompt.ts b/typescript/packages/lookslike-prototype/src/components/com-prompt.ts
new file mode 100644
index 000000000..6a74b5b7b
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-prompt.ts
@@ -0,0 +1,30 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+ display: block;
+}
+
+.main {
+ padding: var(--gap);
+
+ &:focus {
+ outline: none;
+ }
+}
+`
+
+@customElement('com-prompt')
+export class ComPrompt extends LitElement {
+ static styles = [base, styles]
+
+ render() {
+ return html`
+
+
+
+ `
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-response.ts b/typescript/packages/lookslike-prototype/src/components/com-response.ts
new file mode 100644
index 000000000..92acc09f1
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-response.ts
@@ -0,0 +1,31 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+ display: block;
+}
+
+.main {
+ background-color: var(--color-secondary-background);
+ padding: var(--gap);
+
+ &:focus {
+ outline: none;
+ }
+}
+`
+
+@customElement('com-response')
+export class ComResponse extends LitElement {
+ static styles = [base, styles]
+
+ render() {
+ return html`
+
+
+
+ `
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-thread-group.ts b/typescript/packages/lookslike-prototype/src/components/com-thread-group.ts
new file mode 100644
index 000000000..cac427e2a
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-thread-group.ts
@@ -0,0 +1,25 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+ background: var(--color-card);
+ display: flex;
+ flex-direction: column;
+ border-radius: var(--radius);
+ overflow: hidden;
+}
+`
+
+@customElement('com-thread-group')
+export class ComThreadGroup extends LitElement {
+ static styles = [base, styles]
+
+ render() {
+ return html`
+
+
+ `
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-thread.ts b/typescript/packages/lookslike-prototype/src/components/com-thread.ts
new file mode 100644
index 000000000..f0dd7cc45
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-thread.ts
@@ -0,0 +1,123 @@
+import { LitElement, html, css } from 'lit-element'
+import { customElement, property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { base } from '../styles'
+import { createElement } from '../ui'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import pretty from 'pretty'
+import { createRxJSNetworkFromJson } from '../graph'
+import { Recipe, RecipeNode } from '../data'
+import { Context, snapshot } from '../state'
+
+const styles = css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap);
+ }
+
+ /* temp styles, delete */
+ .code {
+ background: #f4f4f4;
+ padding: 1rem;
+ border-radius: 5px;
+ font-size: 0.7rem;
+ line-height: 1.5;
+ margin-top: 1rem;
+ }
+
+ pre {
+ white-space: pre-wrap;
+ }
+
+ .local-variable {
+ font-size: 0.5rem;
+ font-family: monospace;
+ border: 1px solid #ccc;
+ padding: 0 0.5rem;
+ background-color: #f0f0f0;
+ }
+`
+
+function definitionToHtml(node: RecipeNode, context: any) {
+ if (!node) {
+ return html`loading...
`
+ }
+
+ if (node.contentType === 'text/javascript') {
+ const val = snapshot(context).outputs[node.id]
+ return html``
+ }
+
+ if (node.contentType === 'application/json+vnd.common.ui') {
+ const el = createElement(node.body, snapshot(context).inputs[node.id] || {})
+
+ return html`${unsafeHTML(el.outerHTML)}
+
+
+
+ `
+ }
+
+ if (node.contentType === 'application/json') {
+ const val = snapshot(context).outputs[node.id]
+ return html``
+ }
+
+ return html`${JSON.stringify(node, null, 2)}`
+}
+
+@customElement('com-thread')
+export class ComThread extends LitElement {
+ static styles = [base, styles]
+
+ @property({ type: Object }) graph = {} as Recipe
+ @property({ type: Object }) context = {} as Context
+
+ @property({ type: Function }) setContext = (_: Context) => { }
+
+
+ lastGraph: Recipe = []
+
+ response(node: RecipeNode, context: object) {
+ return html`
+ ${definitionToHtml(node, context)}
+ ${node.id}
+ ${repeat(Object.entries(node.in), ([key, value]) => html`${key}: ${value}`)}
+ `
+ }
+
+ render() {
+ if (this.graph != this.lastGraph) {
+ this.context = createRxJSNetworkFromJson(this.graph)
+
+ // trigger a re-render if any output changes
+ Object.values(this.context.outputs).forEach((output) => {
+ output.subscribe(() => {
+ this.setContext(this.context)
+ this.requestUpdate()
+ })
+ });
+
+ this.lastGraph = this.graph
+ }
+
+ return html`
+ ${repeat(
+ this.graph,
+ (node) => html`
+
+ ${repeat(
+ node.messages?.filter(m => m.role === 'user') || [],
+ (node) => {
+ return html`
+ ${node.content}
+ `
+ })}
+ ${this.response(node, this.context)}
+
+ `)
+ }
+ `
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-toggle.ts b/typescript/packages/lookslike-prototype/src/components/com-toggle.ts
new file mode 100644
index 000000000..96e017e13
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-toggle.ts
@@ -0,0 +1,44 @@
+import { LitElement, html, css } from 'lit-element'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('com-toggle')
+export class ComToggle extends LitElement {
+ static styles = css`
+ .expander {
+ }
+
+ input {
+ display: none;
+ }
+
+ label {
+ display: block;
+ cursor: pointer;
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ font-size: .5rem;
+ font-family: monospace;
+ padding: 0 .5rem;
+ }
+
+ input:checked + label + .content {
+ display: block;
+ }
+
+ .content {
+ display: none;
+ }
+ `;
+
+ render() {
+ return html`
+
+ `;
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/components/com-unibox.ts b/typescript/packages/lookslike-prototype/src/components/com-unibox.ts
new file mode 100644
index 000000000..e22d88928
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/components/com-unibox.ts
@@ -0,0 +1,50 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+ :host {
+ display: block;
+ }
+
+ .unibox {
+ --min-height: calc(var(--unit) * 15);
+ display: grid;
+ background-color: var(--color-white);
+ border-radius: calc(var(--min-height) / 2);
+ grid-template-columns: 1fr min-content;
+ grid-template-areas: "main end";
+ gap: var(--gap);
+ padding: calc(var(--unit) * 2);
+ min-height: var(--min-height);
+ }
+
+ .unibox-main {
+ grid-area: main;
+ align-self: center;
+ padding-left: calc(var(--unit) * 4);
+ }
+
+ .unibox-end {
+ grid-area: end;
+ }
+`
+
+@customElement('com-unibox')
+export class ComUnibox extends LitElement {
+ static styles = [base, styles]
+
+ render() {
+ return html`
+
+ `
+ }
+}
+
diff --git a/typescript/packages/lookslike-prototype/src/data.ts b/typescript/packages/lookslike-prototype/src/data.ts
new file mode 100644
index 000000000..0866205bb
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/data.ts
@@ -0,0 +1,95 @@
+export type Recipe = RecipeNode[]
+export type NodePath = [string, string]
+export type InputMap = { [port: string]: NodePath };
+
+export type RecipeNode = {
+ id: string, // an actual unique ID
+ messages?: Message[], // could be empty if a user hand-authored the node etc.
+ contentType: string,
+ outputType: any,
+ in: InputMap,
+ body: string | object
+};
+
+export type Message = {
+ role: 'user' | 'assistant',
+ content: string,
+}
+
+export const emptyGraph: Recipe = [];
+export const todoAppMockup: Recipe = [
+ {
+ "id": "todos",
+ "messages": [
+ {
+ "role": "user",
+ "content": "get my todos"
+ },
+ {
+ "role": "assistant",
+ "content": "..."
+ }
+ ],
+ "contentType": "text/javascript",
+ "in": {},
+ "outputType": {
+ "$id": "https://common.tools/stream.schema.json",
+ "type": {
+ "$id": "https://common.tools/todos.json"
+ }
+ },
+ "body": "return system.get('todos')"
+ },
+ {
+ "id": "todoUi",
+ "messages": [
+ {
+ "role": "user",
+ "content": "render todo"
+ },
+ {
+ "role": "assistant",
+ "content": "..."
+ }
+ ],
+ "contentType": "application/json+vnd.common.ui",
+ "in": {
+ "todos": [".", "todos"]
+ },
+ "outputType": {
+ "$id": "https://common.tools/ui.schema.json"
+ },
+ "body": {
+ "tag": "ul",
+ "props": {
+ "className": "todo"
+ },
+ "children": {
+ "type": "repeat",
+ "binding": "todos",
+ "template": {
+ "tag": "li",
+ "props": {},
+ "children": [
+ {
+ "tag": "input",
+ "props": {
+ "type": "checkbox",
+ "checked": { type: 'boolean', binding: 'checked' }
+ }
+ },
+ {
+ "tag": "span",
+ "props": {
+ "className": "todo-label"
+ },
+ "children": [
+ { type: 'string', binding: 'label' }
+ ]
+ }
+ ]
+ }
+ }
+ }
+ }
+]
diff --git a/typescript/packages/lookslike-prototype/src/eval.ts b/typescript/packages/lookslike-prototype/src/eval.ts
new file mode 100644
index 000000000..c492941e4
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/eval.ts
@@ -0,0 +1,137 @@
+import { IO, Runtime, Value, infer } from '@commontools/runtime';
+
+export function prepare(code: string) {
+ const func = new Function('system', 'inputs', 'return async function() {' + code + '}');
+ return func;
+}
+
+export function serializationBoundary(obj: any) {
+ console.log('serializationBoundary', obj);
+ return JSON.parse(JSON.stringify(obj));
+}
+
+export async function run(src: string, inputs: { [key: string]: any }) {
+ const rt = new Runtime();
+ const io = new ProxyIO(inputs);
+
+ io.reset();
+
+ const module = await rt.eval('text/javascript', code(src), io);
+
+ for (const key in inputs) {
+ const input = infer(JSON.stringify(inputs[key]));
+ io.write(key, input);
+ }
+
+ console.log('Running the module:');
+ module.run();
+ const returnValue = io.read('__result__');
+ return JSON.parse(returnValue?.val);
+}
+
+
+const code = (src: string) => `
+ import { read, write } from 'common:io/state@0.0.1';
+
+ export class Body {
+ async run() {
+ function input(key) {
+ const ref = read(key);
+ console.log('read(' + key + '):', ref);
+ const value = ref?.deref()?.val;
+ console.log('value(' + key + '):', value);
+ return JSON.parse(value);
+ }
+
+ console.log('[begin]');
+ const fn = function() { ${src} };
+ const result = fn();
+ write('__result__', { tag: 'string', val: JSON.stringify(result) });
+ console.log('[end]');
+ }
+ }
+
+ export const module = {
+ Body,
+
+ create() {
+ console.log('Creating!');
+ return new Body();
+ }
+ };`
+
+const EXAMPLE_MODULE_JS = `
+import { read, write } from 'common:io/state@0.0.1';
+
+export class Body {
+ run() {
+ console.log('Running!');
+ const foo = read('foo');
+ console.log('Reference:', foo);
+ const value = foo?.deref();
+ console.log('Value:', value);
+ }
+}
+
+export const module = {
+ Body,
+
+ create() {
+ console.log('Creating!');
+ return new Body();
+ }
+};`;
+
+class ProxyIO implements IO {
+ private inputs: { [key: string]: any };
+
+ constructor(inputs: { [key: string]: any }) {
+ this.inputs = inputs;
+ }
+
+ reset() { }
+
+ read(key: string): Value | undefined {
+ console.log(`Reading '${key}' from inputs`);
+ const val = infer(this.inputs[key]);
+ return val;
+ }
+
+ write(key: string, value: Value): void {
+ console.log(`Writing '${key} => ${value.val}' to inputs`);
+ this.inputs[key] = value.val;
+ }
+}
+
+class LocalStorageIO implements IO {
+ reset() {
+ localStorage.clear();
+ }
+
+ read(key: string): Value | undefined {
+ console.log(`Reading '${key}' from local storage`);
+ let rawValue = localStorage.getItem(key);
+ return infer(rawValue);
+ }
+
+ write(key: string, value: Value): void {
+ console.log(`Writing '${key} => ${value.val}' to local storage`);
+ // YOLO (don't do it this way actually)
+ localStorage.setItem(key, value.val);
+ }
+}
+
+export const demo = async () => {
+ const rt = new Runtime();
+ const io = new LocalStorageIO();
+
+ io.reset();
+
+ const module = await rt.eval('text/javascript', EXAMPLE_MODULE_JS, io);
+
+ console.log(`Setting 'foo => bar' at the host level`);
+ io.write('foo', infer('bar'));
+
+ console.log('Running the module:');
+ module.run();
+};
diff --git a/typescript/packages/lookslike-prototype/src/format.ts b/typescript/packages/lookslike-prototype/src/format.ts
new file mode 100644
index 000000000..4d78010bb
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/format.ts
@@ -0,0 +1,7 @@
+import * as prettier from 'prettier'
+import prettierPluginBabel from 'prettier/plugins/babel'
+import prettierPluginEstree from "prettier/plugins/estree";
+
+export async function format(code: string) {
+ return await prettier.format(code, { semi: true, parser: "babel", plugins: [prettierPluginBabel, prettierPluginEstree] });
+}
diff --git a/typescript/packages/lookslike-prototype/src/graph.ts b/typescript/packages/lookslike-prototype/src/graph.ts
new file mode 100644
index 000000000..eed694b42
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/graph.ts
@@ -0,0 +1,102 @@
+import { BehaviorSubject, combineLatest, filter } from 'rxjs';
+import { createElement } from './ui';
+import { prepare, run } from './eval';
+import { Recipe, RecipeNode } from './data';
+import { snapshot, system } from './state';
+
+export function collectSymbols(recipe: Recipe) {
+ const symbols = [] as { symbol: string, type: any }[];
+ recipe.forEach(node => {
+ symbols.push({ symbol: node.id, type: node.outputType })
+ });
+ return symbols;
+}
+
+// inflate the RxJS network from a JSON graph definition
+export function createRxJSNetworkFromJson(recipe: Recipe) {
+ // track all inputs and outputs
+ const context = {
+ inputs: {} as { [key: string]: { [key: string]: BehaviorSubject } },
+ outputs: {} as { [key: string]: BehaviorSubject }
+ };
+
+ // populate context namespace
+ recipe.forEach(node => {
+ const nodeName = node.id;
+ context.outputs[nodeName] = new BehaviorSubject(null);
+
+ // foreach input in the signature, create a placeholder cell
+ if (node.in) {
+ const inputs = node.in;
+ context.inputs[nodeName] = {};
+ for (const inputName in inputs) {
+ context.inputs[nodeName][inputName] = new BehaviorSubject(null);
+ }
+ }
+ });
+
+ // set up reactive bindings based on edges
+ recipe.forEach(node => {
+ if (node.in) {
+ const inputs = node.in;
+ for (const inputName in inputs) {
+ const [sourceContext, sourceNode] = inputs[inputName];
+ if (sourceContext !== '.') throw Error('remote refs not allowed (yet)')
+ const source = context.outputs[sourceNode];
+ const target = context.inputs[node.id][inputName];
+
+ source.pipe(filter(value => value != null)).subscribe(value => {
+ target.next(value);
+ });
+ }
+ }
+ });
+
+ // process node definitions and set up reactive logic
+ recipe.forEach(async node => {
+ if (!node.body) return;
+ const inputObservables = [];
+ const inputs = {} as { [key: string]: BehaviorSubject };
+
+ for (const inputName in node.in) {
+ const outputName = node.in[inputName][1];
+ if (context.outputs[outputName]) {
+ inputObservables.push(context.outputs[outputName].pipe(filter(value => value !== null)));
+ inputs[inputName] = context.outputs[outputName];
+ }
+ }
+
+ const initial = Object.entries(inputs).map(([k, v]) => [k, v.getValue()])
+ if (initial.every(([_k, v]) => v !== null)) {
+ await executeNode(node, Object.fromEntries(initial), context.outputs)
+ }
+
+ combineLatest(inputObservables).subscribe(async values => {
+ const inputValues = values.reduce((acc, value, index) => {
+ const key = Object.keys(inputs)[index];
+ acc[key] = value;
+ return acc;
+ }, {});
+
+ await executeNode(node, inputValues, context.outputs)
+ });
+ });
+
+ return context;
+}
+
+async function executeNode(node: RecipeNode, inputs: { [key: string]: any }, outputs: { [key: string]: BehaviorSubject }) {
+ const { contentType } = node;
+ if (contentType === 'text/javascript' && typeof node.body === 'string') {
+ const result = await run(node.body, inputs);
+ outputs[node.id].next(result);
+ } else if (contentType === 'application/json+vnd.common.ui') {
+ const renderedTemplate = createElement(node.body, inputs);
+ outputs[node.id].next(renderedTemplate);
+ } else if (contentType === 'application/json' && typeof node.body === 'string') {
+ const url = node.body;
+ const response = await fetch(url);
+ const data = await response.json();
+ outputs[node.id].next(data);
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/llm.ts b/typescript/packages/lookslike-prototype/src/llm.ts
new file mode 100644
index 000000000..204b64684
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/llm.ts
@@ -0,0 +1,247 @@
+import Instructor from "@instructor-ai/instructor";
+import OpenAI from "openai";
+import { fetchApiKey } from "./apiKey";
+import { ChatCompletionMessage, ChatCompletionMessageParam, ChatCompletionTool } from "openai/resources";
+
+const apiKey = fetchApiKey() as string
+
+const openai = new OpenAI({
+ apiKey: apiKey,
+ dangerouslyAllowBrowser: true,
+});
+
+const toolSpec: ChatCompletionTool[] = [
+ {
+ "type": "function",
+ "function": {
+ "name": "listNodes",
+ "description": "Lists all nodes in the graph.",
+ "parameters": {}
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "addCodeNode",
+ "description": "Adds a new code node to the graph written in javascript.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "node": {
+ "type": "object",
+ "properties": {
+ "in": {
+ "type": "object",
+ },
+ "outputType": {
+ "type": "object"
+ },
+ }
+ },
+ "code": { "type": "string" }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "addUiNode",
+ "description": "Adds a new ui node to the graph written using a hyperscript style.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "node": {
+ "type": "object",
+ "properties": {
+ "in": {
+ "type": "object",
+ },
+ "outputType": {
+ "type": "object"
+ },
+ }
+ },
+ "body": { "type": "object" }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "addFetchNode",
+ "description": "Adds a new fetch node to the graph to retrieve (GET) data from the web.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "url": { "type": "string" }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "addMusicSearchNode",
+ "description": `Adds a new fetch node to the graph to search last.fm.
+
+ Results are stored in result.albumsmatches.album
+ `,
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "query": { "type": "string" }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "replaceNode",
+ "description": "Replaces an existing node in the graph.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "newNode": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" },
+ "data": { "type": "object" }
+ },
+ "required": ["id", "data"]
+ }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "deleteNode",
+ "description": "Deletes a node from the graph.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" }
+ }
+ }
+ }
+ },
+ {
+ "type": "function",
+ "function": {
+ "name": "getNodeOutputValue",
+ "description": "Snapshot the current value of node from the graph.",
+ "parameters": {
+ "type": "object",
+ "properties": {
+ "id": { "type": "string" }
+ }
+ }
+ }
+ }
+]
+
+
+let model = "gpt-4o";
+// let model = "gpt-4-turbo-preview";
+export const client = Instructor({
+ client: openai,
+ mode: "JSON",
+});
+
+export async function generateImage(prompt: string) {
+ const response = await openai.images.generate({
+ model: "dall-e-3",
+ prompt: prompt,
+ n: 1,
+ size: "1024x1024",
+ });
+ return response.data[0].url;
+}
+
+export async function processUserInput(input: string, system: string, availableFunctions: { [key: string]: Function }) {
+ let messages: ChatCompletionMessageParam[] = [
+ { role: "system", content: system },
+ { role: "user", content: input }
+ ]
+
+
+ let running = true
+ while (running) {
+ console.log("messages", messages)
+ const response = await client.chat.completions.create({
+ messages,
+ model,
+ tools: toolSpec,
+ tool_choice: "auto"
+ });
+
+ if (response.choices[0].finish_reason === 'stop') {
+ return response
+ }
+
+ const latest = response.choices[0].message
+ messages.push(latest)
+ console.log(latest)
+
+ const toolCalls = latest.tool_calls
+ if (toolCalls) {
+ for (const toolCall of toolCalls) {
+ console.log("toolCall", toolCall)
+ const functionName = toolCall.function.name;
+ const functionToCall = availableFunctions[functionName];
+ // escape all newlines in arguments string
+ const functionArgs = JSON.parse(toolCall.function.arguments.replace(/\n/g, "\n"));
+ const functionResponse = functionToCall(functionArgs);
+ console.log("response", toolCall.id, functionResponse)
+ messages.push({
+ tool_call_id: toolCall.id,
+ role: "tool",
+ content: functionResponse,
+ });
+ }
+ }
+ }
+}
+
+export async function doLLM(input: string, system: string, response_model: any) {
+ try {
+ console.log("input", input);
+ console.log("system", system);
+
+ return await client.chat.completions.create({
+ messages: [
+ { role: "system", content: system },
+ { role: "user", content: input },
+ ],
+ model,
+ });
+ } catch (error) {
+ console.error("Error analyzing text:", error);
+ return null;
+ }
+}
+
+export function grabViewTemplate(txt: string) {
+ return txt.match(/```vue\n([\s\S]+?)```/)?.[1];
+}
+
+export function grabJson(txt: string) {
+ return JSON.parse(txt.match(/```json\n([\s\S]+?)```/)[1]);
+}
+
+export function extractResponse(data: any) {
+ return data.choices[0].message.content;
+}
+
+export function extractImage(data: any) {
+ return data.data[0].url;
+}
diff --git a/typescript/packages/lookslike-prototype/src/main.css b/typescript/packages/lookslike-prototype/src/main.css
new file mode 100644
index 000000000..b02e9d2d8
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/main.css
@@ -0,0 +1,36 @@
+:where(*) {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+}
+
+:root {
+ --unit: 4px;
+ --gap: calc(var(--unit) * 5);
+ --content-width: 800px;
+ --family-sans: "Helvetica Neue", "Helvetica", sans-serif;
+ --family-serif: "Times New Roman", "Times", serif;
+ --color-white: #fff;
+ --color-sepia: #F7F2ED;
+ --color-sepia-2: #EFE8E1;
+ --color-sepia-3: #FDFAF7;
+ --color-brown: #946E47;
+ --color-green: #DBDC87;
+ --color-green-2: #8C8E0B;
+ --color-background: var(--color-sepia);
+ --color-secondary-background: var(--color-sepia-2);
+ --color-card: var(--color-sepia-3);
+ --color-text: #222;
+ --body-size: 16px;
+ --body-line: 24px;
+ --body-font: var(--body-size)/var(--body-line) var(--family-sans);
+ --icon-box-size: calc(var(--unit) * 4);
+ --radius: calc(var(--unit) * 4);
+}
+
+.theme {
+ background-color: var(--color-background);
+ color: var(--color-text);
+ font: var(--body-font);
+}
diff --git a/typescript/packages/lookslike-prototype/src/main.ts b/typescript/packages/lookslike-prototype/src/main.ts
new file mode 100644
index 000000000..d8e1275a0
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/main.ts
@@ -0,0 +1,14 @@
+export * as ComAppGrid from './components/com-app-grid.js'
+export * as ComContent from './components/com-content.js'
+export * as ComChat from './components/com-chat.js'
+export * as ComThread from './components/com-thread.js'
+export * as ComPrompt from './components/com-prompt.js'
+export * as ComResponse from './components/com-response.js'
+export * as ComThreadGroup from './components/com-thread-group.js'
+export * as ComButton from './components/com-button.js'
+export * as ComUnibox from './components/com-unibox.js'
+export * as ComEditor from './components/com-editor.js'
+export * as ComToggle from './components/com-toggle.js'
+export * as ComCode from './components/com-code.js'
+export * as ComData from './components/com-data.js'
+export * as ComApp from './components/com-app.js'
diff --git a/typescript/packages/lookslike-prototype/src/state.ts b/typescript/packages/lookslike-prototype/src/state.ts
new file mode 100644
index 000000000..7db6715bc
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/state.ts
@@ -0,0 +1,78 @@
+import { get, set, del, keys } from 'idb-keyval';
+
+// Helper function for serialization boundary (this can be customized as needed)
+const serializationBoundary = (data: any) => {
+ return JSON.stringify(data);
+};
+
+export async function listKeys() {
+ return await keys();
+}
+
+export type Context = {
+ inputs: { [node: string]: { [input: string]: any } },
+ outputs: { [node: string]: any },
+}
+
+export function snapshot(ctx: Context) {
+ const snapshot: Context = {
+ inputs: {},
+ outputs: {}
+ }
+
+ for (const key in ctx.outputs) {
+ const value = ctx.outputs[key].getValue()
+ snapshot.outputs[key] = value
+ }
+
+ for (const key in ctx.inputs) {
+ snapshot.inputs[key] = {}
+ for (const inputKey in ctx.inputs[key]) {
+ const value = ctx.inputs[key][inputKey].getValue()
+ snapshot.inputs[key][inputKey] = value
+ }
+ }
+
+ return snapshot
+}
+
+// System object that interacts with IndexedDB
+export const system = {
+ get: async (key: string) => {
+ const data = await get(key);
+ if (data) {
+ return data;
+ }
+
+ // Fallback to hardcoded data if nothing is found in IndexedDB
+ if (key === 'todos') {
+ const todos = [
+ { label: 'Buy groceries', checked: false },
+ { label: 'Vacuum house', checked: true },
+ { label: 'Learn RxJS', checked: false }
+ ];
+ await set(key, todos);
+ return serializationBoundary(todos);
+ }
+
+ if (key === 'emails') {
+ const emails = [
+ { subject: 'Meeting', from: 'John', date: '2020-01-01', read: false },
+ { subject: 'Lunch', from: 'Jane', date: '2020-01-02', read: true },
+ { subject: 'Dinner', from: 'Joe', date: '2020-01-03', read: false }
+ ];
+ await set(key, emails);
+ return serializationBoundary(emails);
+ }
+
+ return [];
+ },
+
+ set: async (key: string, value: any) => {
+ await set(key, value);
+ },
+
+ delete: async (key: string) => {
+ await del(key);
+ }
+};
diff --git a/typescript/packages/lookslike-prototype/src/styles.ts b/typescript/packages/lookslike-prototype/src/styles.ts
new file mode 100644
index 000000000..6ec029b79
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/styles.ts
@@ -0,0 +1,40 @@
+import { css } from 'lit'
+
+export const base = css`
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+}
+
+:root {
+ --unit: 4px;
+ --gap: calc(var(--unit) * 5);
+ --content-width: 800px;
+ --family-sans: "Helvetica Neue", "Helvetica", sans-serif;
+ --family-serif: "Times New Roman", "Times", serif;
+ --color-white: #fff;
+ --color-sepia: #F7F2ED;
+ --color-sepia-2: #EFE8E1;
+ --color-sepia-3: #FDFAF7;
+ --color-brown: #946E47;
+ --color-green: #DBDC87;
+ --color-green-2: #8C8E0B;
+ --color-background: var(--color-sepia);
+ --color-secondary-background: var(--color-sepia-2);
+ --color-card: var(--color-sepia-3);
+ --color-text: #222;
+ --body-size: 16px;
+ --body-line: 24px;
+ --body-font: var(--body-size)/var(--body-line) var(--family-sans);
+ --icon-box-size: calc(var(--unit) * 4);
+ --radius: calc(var(--unit) * 4);
+}
+
+.theme {
+ background-color: var(--color-background);
+ color: var(--color-text);
+ font: var(--body-font);
+}
+`
\ No newline at end of file
diff --git a/typescript/packages/lookslike-prototype/src/ui.js b/typescript/packages/lookslike-prototype/src/ui.js
new file mode 100644
index 000000000..ed5bcc748
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/ui.js
@@ -0,0 +1,101 @@
+
+export const STREAM = 'https://common.tools/stream-binding.schema.json'
+export const CELL = 'https://common.tools/cell-binding.schema.json'
+
+function readValue(context, binding) {
+ const path = binding.split('.');
+ let value = context;
+ if (path.length > 1) {
+ for (let i = 0; i < path.length; i++) {
+ value = value?.[path?.[i]];
+ }
+ } else {
+ value = context?.[path?.[0]];
+ }
+
+ return value;
+}
+
+export function createElement(node, context) {
+ if (typeof node === 'string') {
+ const textNode = document.createTextNode(node);
+ return textNode;
+ }
+
+ if (!node || typeof node !== 'object') return null;
+
+ // repeat node
+ if (!node.tag && node.type == 'repeat') {
+ const container = document.createElement('div');
+ const items = readValue(context, node.binding) || [];
+ items.forEach(item => {
+ container.appendChild(createElement(node.template, item));
+ });
+ return container
+ }
+
+ // element nodes
+ const element = document.createElement(node.tag);
+
+ // set attributes
+ for (const [key, value] of Object.entries(node.props || {})) {
+ if (typeof value === 'object' && value.type) {
+ // Handle specific types and bind reactive sources from context
+ if (value.type && value["$id"] && value["$id"] === CELL) {
+ let name = value.name || key;
+ if (!context[name]) continue;
+ element[key] = context[name].getValue();
+ context[name].subscribe(newValue => element[key] = newValue);
+ } else {
+ if (value.binding) {
+ if (key === 'checked' || 'disabled' || 'hidden') {
+ if (context[value.binding]) {
+ element.setAttribute('checked', 'checked'); // Update the attribute
+ } else {
+ element.removeAttribute('checked'); // Remove the attribute if not checked
+ }
+ } else {
+ element[key] = context[value.binding];
+ }
+ } else {
+ // the value is not in a subfield, context is the value
+ element[key] = context;
+ }
+ }
+ } else if (value["$id"] && value["$id"] === STREAM && value.name) {
+ if (context[value.name]) {
+ element.addEventListener(key, context[value.name]);
+ }
+ } else {
+ element[key] = value;
+ }
+ }
+
+ let children = node.children || [];
+ if (!Array.isArray(children)) {
+ children = [children];
+ }
+
+ // recursively create and append child elements
+ children.forEach(childNode => {
+ if (childNode.type === 'string' || typeof childNode === 'text' || typeof childNode === 'number') {
+ if (childNode.binding && typeof context === 'object') {
+ const value = readValue(context, childNode.binding);
+ const node = document.createTextNode(value)
+ element.appendChild(node);
+ return
+ } else {
+ const node = document.createTextNode(context)
+ element.appendChild(node);
+ return
+ }
+ }
+
+ const childElement = createElement(childNode, context);
+ if (childElement) {
+ element.appendChild(childElement);
+ }
+ });
+
+ return element;
+}
diff --git a/typescript/packages/lookslike-prototype/src/wasm.ts b/typescript/packages/lookslike-prototype/src/wasm.ts
new file mode 100644
index 000000000..23096b4fe
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/wasm.ts
@@ -0,0 +1,57 @@
+import { IO, Runtime, Value, infer } from '@commontools/runtime';
+console.log('wow')
+
+const EXAMPLE_MODULE_JS = `
+import { read, write } from 'common:io/state@0.0.1';
+
+export class Body {
+ run() {
+ console.log('Running!');
+ const foo = read('foo');
+ console.log('Reference:', foo);
+ const value = foo?.deref();
+ console.log('Value:', value);
+ }
+}
+
+export const module = {
+ Body,
+
+ create() {
+ console.log('Creating!');
+ return new Body();
+ }
+};`;
+
+class LocalStorageIO implements IO {
+ reset() {
+ localStorage.clear();
+ }
+
+ read(key: string): Value | undefined {
+ console.log(`Reading '${key}' from local storage`);
+ let rawValue = localStorage.getItem(key);
+ return infer(rawValue);
+ }
+
+ write(key: string, value: Value): void {
+ console.log(`Writing '${key} => ${value.val}' to local storage`);
+ // YOLO (don't do it this way actually)
+ localStorage.setItem(key, value.val);
+ }
+}
+
+export const demo = async () => {
+ const rt = new Runtime();
+ const io = new LocalStorageIO();
+
+ io.reset();
+
+ const module = await rt.eval('text/javascript', EXAMPLE_MODULE_JS, io);
+
+ console.log(`Setting 'foo => bar' at the host level`);
+ io.write('foo', infer('bar'));
+
+ console.log('Running the module:');
+ module.run();
+};
diff --git a/typescript/packages/lookslike-prototype/tsconfig.json b/typescript/packages/lookslike-prototype/tsconfig.json
new file mode 100644
index 000000000..2e084ceea
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/tsconfig.json
@@ -0,0 +1,32 @@
+{
+ "compilerOptions": {
+ "target": "es2017",
+ "module": "es2015",
+ "moduleResolution": "node",
+ "lib": [
+ "esnext.array",
+ "esnext",
+ "es2017",
+ "dom"
+ ],
+ "declaration": true,
+ "declarationMap": true,
+ "sourceMap": true,
+ "inlineSources": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "outDir": "./",
+ // Only necessary because @types/uglify-js can't find types for source-map
+ "skipLibCheck": true,
+ "experimentalDecorators": true
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": []
+}
diff --git a/typescript/packages/lookslike-prototype/vite.config.js b/typescript/packages/lookslike-prototype/vite.config.js
new file mode 100644
index 000000000..edb6fa879
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/vite.config.js
@@ -0,0 +1,12 @@
+// vite.config.js
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ build: {
+ target: 'esnext'
+ },
+ resolve: {
+ preserveSymlinks: true
+ }
+})
\ No newline at end of file
diff --git a/typescript/packages/runtime-demo/index.html b/typescript/packages/runtime-demo/index.html
index cc8e35529..df9a2c810 100644
--- a/typescript/packages/runtime-demo/index.html
+++ b/typescript/packages/runtime-demo/index.html
@@ -23,6 +23,8 @@
+
+
diff --git a/typescript/packages/runtime-demo/package.json b/typescript/packages/runtime-demo/package.json
index 0dbfcf435..c4807b075 100644
--- a/typescript/packages/runtime-demo/package.json
+++ b/typescript/packages/runtime-demo/package.json
@@ -19,7 +19,11 @@
},
"homepage": "https://github.com/commontoolsinc/labs#readme",
"devDependencies": {
+ "@commontools/module": "^0.0.1",
+ "@commontools/data": "^0.0.1",
+ "@commontools/io": "^0.0.1",
"@commontools/usuba-rt": "^0.0.1",
+ "@commontools/runtime": "^0.0.1",
"@shoelace-style/shoelace": "^2.15.1",
"typescript": "^5.2.2",
"vite": "^5.2.0",
@@ -28,12 +32,16 @@
"wireit": {
"build": {
"dependencies": [
+ "../../common/module:build",
+ "../../common/data:build",
+ "../../common/io:build",
+ "../../common/runtime:build",
"../usuba-rt:build"
],
"command": "vite build"
},
"clean": {
- "command": "rm -rf ./lib ./dist ./.wireit"
+ "command": "rm -rf ./lib ./dist ./.wireit ./node_modules"
}
}
}
\ No newline at end of file
diff --git a/typescript/packages/runtime-demo/src/demo5.ts b/typescript/packages/runtime-demo/src/demo5.ts
new file mode 100644
index 000000000..39c2208bb
--- /dev/null
+++ b/typescript/packages/runtime-demo/src/demo5.ts
@@ -0,0 +1,91 @@
+import { Runtime } from '@commontools/usuba-rt';
+import { wit as commonModuleWit } from '@commontools/module';
+import { wit as commonDataWit } from '@commontools/data';
+import { wit as commonIoWit } from '@commontools/io';
+
+const EXAMPLE_MODULE_JS = `
+import { read } from 'common:io/state@0.0.1';
+
+export class Body {
+ run() {
+ console.log('Running!');
+ const foo = read('foo');
+ console.log('Reference:', foo);
+ const value = foo?.deref();
+ console.log('Value:', value);
+ }
+}
+
+export const module = {
+ Body,
+
+ create() {
+ console.log('Creating!');
+ return new Body();
+ }
+};`;
+
+export const demo = async () => {
+ const runtime = new Runtime([commonDataWit, commonIoWit]);
+
+ console.log(Runtime);
+
+ const module = await runtime.defineModule({
+ contentType: 'text/javascript',
+ wit: commonModuleWit,
+ sourceCode: EXAMPLE_MODULE_JS,
+ });
+
+ class Reference {
+ #value: any;
+ constructor(value: any) {
+ this.#value = value;
+ }
+ deref() {
+ return this.#value;
+ }
+ }
+
+ const theOnlyReference = new Reference({
+ tag: 'string',
+ val: 'WOOT',
+ });
+
+ const api = await module.instantiate({
+ 'common:data/types': {
+ Map: Map,
+ Reference,
+ },
+ 'common:io/state': {
+ Stream: class Stream {
+ next() {
+ console.log('Not implemented!');
+ }
+ },
+ read(name: string) {
+ return theOnlyReference;
+ },
+ write(_name: string, _value: any) {
+ console.log('Write ignored!');
+ },
+ subscribe(_name: string) {
+ console.log('Subscribe ignored!');
+ },
+ },
+ });
+ const {
+ module: { create },
+ }: any = api;
+
+ console.log(api, create);
+
+ const body = create();
+
+ body.run();
+ body.run();
+ body.run();
+ body.run();
+ body.run();
+
+ console.log('FIN');
+};
diff --git a/typescript/packages/runtime-demo/src/demo6.ts b/typescript/packages/runtime-demo/src/demo6.ts
new file mode 100644
index 000000000..2923ddbee
--- /dev/null
+++ b/typescript/packages/runtime-demo/src/demo6.ts
@@ -0,0 +1,73 @@
+import { IO, Runtime, Dictionary, Value, infer } from '@commontools/runtime';
+
+const EXAMPLE_MODULE_JS = `
+import { read, write } from 'common:io/state@0.0.1';
+
+export class Body {
+ run() {
+ console.log('Running!');
+
+ const foo = read('foo');
+ const value = foo?.deref();
+
+ console.log('Value:', value);
+
+ const bar = read('bar');
+ const dict = bar?.deref()?.val;
+ const dictValue = dict.get('baz');
+
+ console.log('Dictionary value:', dictValue.deref()?.val);
+ }
+}
+
+export const module = {
+ Body,
+
+ create() {
+ console.log('Creating!');
+ return new Body();
+ }
+};`;
+
+const bar = {
+ baz: 'quux',
+};
+
+class LocalStorageIO implements IO {
+ reset() {
+ localStorage.clear();
+ }
+
+ read(key: string): Value | undefined {
+ if (key == 'bar') {
+ console.log(`Reading special key '${key}'...`);
+ return infer(bar);
+ }
+
+ console.log(`Reading '${key}' from local storage`);
+
+ let rawValue = localStorage.getItem(key);
+ return infer(rawValue);
+ }
+
+ write(key: string, value: Value): void {
+ console.log(`Writing '${key} => ${value.val}' to local storage`);
+ // YOLO (don't do it this way actually)
+ localStorage.setItem(key, value.val);
+ }
+}
+
+export const demo = async () => {
+ const rt = new Runtime();
+ const io = new LocalStorageIO();
+
+ io.reset();
+
+ const module = await rt.eval('text/javascript', EXAMPLE_MODULE_JS, io);
+
+ console.log(`Setting 'foo => bar' at the host level`);
+ io.write('foo', infer('bar'));
+
+ console.log('Running the module:');
+ module.run();
+};
diff --git a/typescript/packages/runtime-demo/src/index.ts b/typescript/packages/runtime-demo/src/index.ts
index 886cb67fc..a347fd603 100644
--- a/typescript/packages/runtime-demo/src/index.ts
+++ b/typescript/packages/runtime-demo/src/index.ts
@@ -2,8 +2,12 @@ import { demo as demoOne } from './demo1.js';
import { demo as demoTwo } from './demo2.js';
import { demo as demoThree } from './demo3.js';
import { demo as demoFour } from './demo4.js';
+import { demo as demoFive } from './demo5.js';
+import { demo as demoSix } from './demo6.js';
(self as any).demoOne = demoOne;
(self as any).demoTwo = demoTwo;
(self as any).demoThree = demoThree;
(self as any).demoFour = demoFour;
+(self as any).demoFive = demoFive;
+(self as any).demoSix = demoSix;
diff --git a/typescript/packages/usuba-api/scripts/fix-paths.sh b/typescript/packages/usuba-api/scripts/fix-paths.sh
index 348a002eb..511782741 100755
--- a/typescript/packages/usuba-api/scripts/fix-paths.sh
+++ b/typescript/packages/usuba-api/scripts/fix-paths.sh
@@ -11,7 +11,14 @@ set -euo pipefail
pushd $SCRIPT_DIR/../src/openapi-client
-find ./ -type f -exec sed -i "/import\|export/ s/\(.* '\.\/[^']*\)/\0.js/g" {} +
+SED=sed
+
+if command -v gsed &> /dev/null;
+then
+ SED=gsed
+fi
+
+find ./ -type f -exec $SED -i "/import\|export/ s/\(.* '\.\/[^']*\)/\0.js/g" {} +
popd