Store schema against data, allow listing objects by type

bfollington · bfollington · commit 7382c18e17f3 · 2025-01-07T15:19:23.000+10:00
diff --git a/typescript/packages/common-ui/src/components/common-table.ts b/typescript/packages/common-ui/src/components/common-table.ts
@@ -37,43 +37,111 @@ export class CommonCardElement extends LitElement {
       }
       .value {
         color: #666;
+        max-height: 128px;
+        overflow-y: auto;
+      }
+      pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+        margin: 0;
+      }
+      .string-value {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      .self-pill {
+        display: inline-block;
+        background: #f3f4f6;
+        border-radius: 12px;
+        padding: 2px 8px;
+        font-family: monospace;
+        font-size: 10px;
       }
     `
   ];
 
   override render() {
-    if (!this.schema || !this.item) {
-      return html`<div>Missing schema or data</div>`;
+    if (!this.item) {
+      return html`<div>Missing data</div>`;
+    }
+
+    if (this.schema) {
+      const entries = Object.entries(this.schema.shape);
+      const nonSelfEntries = entries.filter(([key]) => key !== 'self');
+      const selfEntry = entries.find(([key]) => key === 'self');
+
+      return html`
+        ${nonSelfEntries.map(([key, schema]) => html`
+          <div class="field">
+            <div class="label">${key.replace(/([A-Z])/g, ' $1').trim()}</div>
+            <div class="value">${this.formatValue(this.item[key], schema, key)}</div>
+          </div>
+        `)}
+        ${selfEntry ? html`
+          <div class="field">
+            <div class="label">${selfEntry[0].replace(/([A-Z])/g, ' $1').trim()}</div>
+            <div class="value">${this.formatValue(this.item[selfEntry[0]], selfEntry[1], selfEntry[0])}</div>
+          </div>
+        ` : ''}
+      `;
     }
 
+    const entries = Object.entries(this.item);
+    const nonSelfEntries = entries.filter(([key]) => key !== 'self');
+    const selfEntry = entries.find(([key]) => key === 'self');
+
     return html`
-      ${Object.entries(this.schema.shape).map(([key, schema]) => html`
+      ${nonSelfEntries.map(([key, value]) => html`
         <div class="field">
           <div class="label">${key.replace(/([A-Z])/g, ' $1').trim()}</div>
-          <div class="value">${this.formatValue(this.item[key], schema)}</div>
+          <div class="value">${this.formatValue(value, undefined, key)}</div>
         </div>
       `)}
+      ${selfEntry ? html`
+        <div class="field">
+          <div class="label">${selfEntry[0].replace(/([A-Z])/g, ' $1').trim()}</div>
+          <div class="value">${this.formatValue(selfEntry[1], undefined, selfEntry[0])}</div>
+        </div>
+      ` : ''}
     `;
   }
 
-  formatValue(value: any, schema: any) {
+  formatValue(value: any, schema?: any, key?: string) {
     if (value === null || value === undefined) {
       return '';
     }
 
-    switch (schema._def.typeName) {
-      case 'ZodArray':
-      case 'ZodObject':
-        return html`<pre>${JSON.stringify(value, null, 2)}</pre>`;
-      case 'ZodBoolean':
-        return value ? '✓' : '✗';
-      case 'ZodDate':
-        return new Date(value).toLocaleString();
-      default:
-        return String(value);
+    if (key === 'self') {
+      return html`<span class="self-pill">${value.toString()}</span>`;
+    }
+
+    if (schema) {
+      switch (schema._def.typeName) {
+        case 'ZodArray':
+        case 'ZodObject':
+          return html`<pre>${JSON.stringify(value, null, 2)}</pre>`;
+        case 'ZodBoolean':
+          return value ? '✓' : '✗';
+        case 'ZodDate':
+          return new Date(value).toLocaleString();
+        case 'ZodString':
+          return html`<div class="string-value">${value}</div>`;
+        default:
+          return String(value);
+      }
     }
+
+    if (typeof value === 'object') {
+      return html`<pre>${JSON.stringify(value, null, 2)}</pre>`;
+    } else if (typeof value === 'boolean') {
+      return value ? '✓' : '✗';
+    } else if (value instanceof Date) {
+      return value.toLocaleString();
+    }
+    return html`<div class="string-value">${value}</div>`;
   }
 }
+
 @customElement("common-table")
 export class CommonTableElement extends LitElement {
   @property({ type: Object }) schema: ZodObject<any> = null;
diff --git a/typescript/packages/lookslike-high-level/src/data.ts b/typescript/packages/lookslike-high-level/src/data.ts
@@ -62,6 +62,7 @@ import { spellManager } from './spells/19_process_manager.jsx'
 import { shaderManager } from './spells/20_shader_editor.jsx'
 import { schemaGenerator } from './spells/21_model_builder.jsx'
 import { search } from './spells/22_search.jsx'
+import { notebook } from './spells/23_notes.jsx'
 
 export type Charm = {
   [NAME]?: string;
@@ -262,6 +263,7 @@ addCharms([
   shaderManager.spawn({ shaderManager: 1 }),
   schemaGenerator.spawn({ schemaGenerator: 1 }),
   search.spawn({ search: 1 }),
+  notebook.spawn({ notes: 1 }),
   FetchService.spawn() as any,
   GmailService.spawn() as any,
   ViewService.spawn() as any,
diff --git a/typescript/packages/lookslike-high-level/src/spells/16_contacts.tsx b/typescript/packages/lookslike-high-level/src/spells/16_contacts.tsx
@@ -7,15 +7,15 @@ import { event, subview, Transact } from "../sugar.js";
 import { Charm, initRules, typedBehavior } from "./spell.jsx";
 import { z } from "zod";
 import { Reference } from "merkle-reference";
-import { resolve } from "../sugar/sugar.jsx";
+import { importEntity, resolve, tagWithSchema } from "../sugar/sugar.jsx";
 import { Ref, UiFragment } from "../sugar/zod.js";
 
 const Contact = z.object({
   name: z.string().min(1).max(255).describe("The name of the contact"),
   email: z.string().email().describe("The email address of the contact"),
   phone: z.string().min(10).max(20).describe("The phone number of the contact"),
   // nickname: z.string().nullable().default(null).describe("The nickname of the contact"),
-});
+}).describe('Contact');
 
 const AddressBook = z.object({
   focused: Ref.describe("The contact that is currently being edited"),
@@ -57,22 +57,17 @@ const contactEditor = typedBehavior(Contact, {
 
 export const addressBook = typedBehavior(
   AddressBook.pick({
-    focused: true,
+    // focused: true,
     '~/common/ui/list': true
   }), {
-  render: ({ self, focused, '~/common/ui/list': contactList }) => (
-    <div entity={self} >
+  render: ({ self, '~/common/ui/list': contactList }) => (
+    <div entity={self} name="Contacts">
       <div>
-        {focused ? (
-          <div>
-            <button onclick="~/on/close-editor">Close</button>
-            <Charm self={focused} spell={contactEditor as any} />
-          </div>
-        ) : <common-form
+        <common-form
           schema={Contact}
           reset
           onsubmit="~/on/add-contact"
-        />}
+        />
       </div>
 
       <br />
@@ -88,14 +83,16 @@ export const addressBook = typedBehavior(
         const ev = Session.resolve<SubmitEvent>(event);
         const contact = ev.detail.value;
 
-        cmd.add({ Import: contact })
-        cmd.add(...Transact.assert(self, { contacts: refer(contact) }))
+        const { self: id, instructions } = importEntity(contact, Contact)
+        cmd.add(...instructions);
+        cmd.add(...Transact.assert(self, { contacts: id }));
       }),
 
     onEditContact: event("~/on/edit-contact")
       .transact(({ self, event }, cmd) => {
         const ev = Session.resolve<EditEvent>(event);
         cmd.add(...Transact.set(self, { focused: ev.detail.item }))
+        cmd.add(...tagWithSchema(self, Contact))
       }),
 
     onDeleteContact: event("~/on/delete-contact")
diff --git a/typescript/packages/lookslike-high-level/src/spells/18_music.tsx b/typescript/packages/lookslike-high-level/src/spells/18_music.tsx
@@ -12,27 +12,27 @@ import { Ref, UiFragment } from "../sugar/zod.js";
 
 export const Artist = z.object({
   name: z.string().min(1).max(255).describe("The name of the artist"),
-});
+}).describe('Artist');
 
 export const Song = z.object({
   title: z.string().min(1).max(255).describe("The title of the song"),
   artists: z.array(Artist).min(1).describe("The artists who performed the song"),
   duration: z.number().min(1).describe("The duration in seconds"),
   year: z.number().min(1900).max(2100).describe("The release year")
-});
+}).describe('Song');
 
 export const Album = z.object({
   "album/title": z.string().min(1).max(255).describe("The album title"),
   artist: Artist.describe("The primary artist"),
   songs: z.array(Song).min(1).describe("The songs on the album"),
   year: z.number().min(1900).max(2100).describe("The release year")
-});
+}).describe('Album');
 
 const Playlist = z.object({
   name: z.string().min(1).max(255).describe("The playlist name"),
   description: z.string().max(1000).describe("The playlist description"),
   songs: z.array(Song).describe("The songs in the playlist")
-});
+}).describe('Playlist');
 
 const MusicLibrary = z.object({
   focused: Ref.describe("The item that is currently being edited"),
diff --git a/typescript/packages/lookslike-high-level/src/spells/19_process_manager.tsx b/typescript/packages/lookslike-high-level/src/spells/19_process_manager.tsx
@@ -45,7 +45,7 @@ export const Spell = z.object({
   sourceCode: z.string().min(1).max(8192).describe("The spell's source code"),
   notes: z.string().describe("Notes about the spell"),
   instances: z.array(Ref).describe("References to charm instances of this spell")
-});
+}).describe('Spell');
 
 const Charm = z.object({
   spell: Ref.describe("Reference to the spell this charm instantiates"),
@@ -163,7 +163,7 @@ const spellEditor = typedBehavior(Spell, {
         const ev = Session.resolve<SubmitEvent<z.infer<typeof Spell>>>(event);
         const spell = ev.detail.value;
         cmd.add(...Transact.set(self, spell))
-        cmd.add(tagWithSchema(self, Spell))
+        cmd.add(...tagWithSchema(self, Spell))
       }),
 
     onModifyWithAI: event("~/on/modify-with-ai")
diff --git a/typescript/packages/lookslike-high-level/src/spells/20_shader_editor.tsx b/typescript/packages/lookslike-high-level/src/spells/20_shader_editor.tsx
@@ -47,9 +47,9 @@ const SHADER_TEMPLATE = `    precision mediump float;
 // Define the core schemas
 export const Shader = z.object({
   name: z.string().min(1).max(255).describe("The name of the shader"),
-  sourceCode: z.string().min(1).max(8192).describe("The shader's GLSL source code"),
+  sourceCode: z.string().min(1).max(2 * 8192).describe("The shader's GLSL source code"),
   notes: z.string().describe("Notes about the shader")
-});
+}).describe('Shader');
 
 const ShaderEditor = z.object({
   editingShader: Ref.describe("The shader currently being edited"),
@@ -107,7 +107,7 @@ const shaderEditor = typedBehavior(Shader, {
         const ev = Session.resolve<SubmitEvent<z.infer<typeof Shader>>>(event);
         const shader = ev.detail.value;
         cmd.add(...Transact.set(self, shader))
-        cmd.add(tagWithSchema(self, Shader))
+        cmd.add(...tagWithSchema(self, Shader))
       }),
 
     onModifyWithAI: event("~/on/modify-with-ai")
diff --git a/typescript/packages/lookslike-high-level/src/spells/22_search.tsx b/typescript/packages/lookslike-high-level/src/spells/22_search.tsx
diff --git a/typescript/packages/lookslike-high-level/src/spells/23_notes.tsx b/typescript/packages/lookslike-high-level/src/spells/23_notes.tsx
diff --git a/typescript/packages/lookslike-high-level/src/sugar/sugar.tsx b/typescript/packages/lookslike-high-level/src/sugar/sugar.tsx
