Minimum viable search results UI

Author: bfollington

typescript/packages/common-os-ui/src/components/os-charm-row.ts

@@ -45,6 +45,15 @@ export class OsCharmRow extends LitElement {
           max-width: calc(var(--u) * 90);
         }
 
+        .charm-row-subtitle {
+          color: var(--text-secondary);
+          font-size: 0.9em;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: calc(var(--u) * 90);
+        }
+
         & > .charm-row-extra {
           opacity: 0;
           transition: opacity var(--dur-md) var(--ease-out-expo);
@@ -63,12 +72,18 @@ export class OsCharmRow extends LitElement {
   @property({ type: String })
   text = "";
 
+  @property({ type: String })
+  subtitle = "";
+
   override render() {
     return html`
       <div class="charm-row toolbar">
         <div class="hstack gap-sm toolbar-start">
           <os-charm-icon class="charm-row-icon" icon="${this.icon}"></os-charm-icon>
-          <div class="charm-row-text body">${this.text}</div>
+          <div class="vstack">
+            <div class="charm-row-text body">${this.text}</div>
+            ${this.subtitle ? html`<div class="charm-row-subtitle">${this.subtitle}</div>` : ""}
+          </div>
         </div>
         <div class="hstack gap-sm toolbar-end charm-row-extra">
           <os-icon-button-plain icon="more_vert"></os-icon-button-plain>

typescript/packages/lookslike-high-level/src/components/common-spell-editor.ts

@@ -6,25 +6,7 @@ import { addCharms } from "@commontools/charm";
 import { tsToExports } from "../localBuild.js";
 import { iterate, llmTweakSpec, generateSuggestions } from "./spell-ai.js";
 import { createRef, ref } from "lit/directives/ref.js";
-
-// NOTE(ja): copied from sidebar.ts ... we need a toasty?
-const toasty = (message: string) => {
-  const toastEl = document.createElement("div");
-  toastEl.textContent = message;
-  toastEl.style.cssText = `
-    position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #333;
-    color: white;
-    padding: 8px 16px;
-    border-radius: 4px;
-    z-index: 1000;
-  `;
-  document.body.appendChild(toastEl);
-  setTimeout(() => toastEl.remove(), 3000);
-};
+import { toasty } from "./toasty.js";
 
 @customElement("common-spell-editor")
 export class CommonSpellEditor extends LitElement {

typescript/packages/lookslike-high-level/src/components/index.ts

@@ -14,3 +14,4 @@ export * as CommonSpellEditor from "./common-spell-editor.js";
 export * as CommonMermaid from "./mermaid.js";
 export * as CommonPicker from "./picker.js";
 export * as CommonCanvasLayout from "./canvas-layout.js";
+export * as CommonSearchResults from "./search-results.js";

typescript/packages/lookslike-high-level/src/components/search-results.ts

@@ -0,0 +1,140 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+export interface SpellSearchResult {
+  key: string;
+  name: string;
+  description: string;
+  matchType: string;
+  compatibleBlobs: {
+    key: string;
+    snippet: string;
+    data: {
+      count: number;
+      blobCreatedAt: string;
+      blobAuthor: string;
+    };
+  }[];
+}
+
+function formatRelativeTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInMillis = now.getTime() - date.getTime();
+  const diffInMinutes = Math.floor(diffInMillis / (1000 * 60));
+  const diffInHours = Math.floor(diffInMillis / (1000 * 60 * 60));
+  const diffInDays = Math.floor(diffInMillis / (1000 * 60 * 60 * 24));
+
+  if (diffInMinutes < 1) {
+    return "just now";
+  }
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes} minute${diffInMinutes === 1 ? "" : "s"} ago`;
+  }
+  if (diffInHours < 24) {
+    return `${diffInHours} hour${diffInHours === 1 ? "" : "s"} ago`;
+  }
+  if (diffInDays < 30) {
+    return `${diffInDays} day${diffInDays === 1 ? "" : "s"} ago`;
+  }
+
+  return date.toLocaleDateString();
+}
+
+@customElement("common-search-results")
+export default class SearchResults extends LitElement {
+  @property({ type: Boolean })
+  searchOpen = false;
+
+  @property({ type: Array })
+  results: SpellSearchResult[] = [];
+
+  @state()
+  focusedResult: SpellSearchResult | null = null;
+
+  private handleClose() {
+    this.searchOpen = false;
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  private handleSearch(e: CustomEvent) {
+    const query = e.detail.query;
+    this.dispatchEvent(new CustomEvent("search", { detail: { query } }));
+  }
+
+  private handleResultClick(result: SpellSearchResult) {
+    this.focusedResult = result;
+    this.dispatchEvent(new CustomEvent("select", { detail: { result } }));
+    this.searchOpen = false;
+  }
+
+  override render() {
+    return html`
+      <style>
+        .results-grid {
+          max-height: 50vh;
+          overflow-y: auto;
+        }
+
+        .result-card {
+        }
+
+        .blob-list {
+          margin-top: 1rem;
+        }
+
+        .blob-item {
+          padding: 0.5rem;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        .blob-item:hover {
+          background: #f5f5f5;
+        }
+
+        .blob-meta {
+          font-size: 0.9em;
+          color: #666;
+          margin-top: 0.25rem;
+        }
+      </style>
+
+      <os-dialog .open=${this.searchOpen} @closedialog=${this.handleClose}>
+        <div class="results-grid">
+          ${repeat(
+            this.results,
+            (result) => result.key,
+            (result) => html`
+              <div class="result-card">
+                <div class="blob-list">
+                  ${repeat(
+                    result.compatibleBlobs,
+                    (blob) => blob.key,
+                    (blob) => html`
+                      <os-charm-row
+                        icon="search"
+                        text=${result.description}
+                        subtitle=${`${blob.key}, ${formatRelativeTime(blob.data.blobCreatedAt)}`}
+                        @click=${() =>
+                          this.dispatchEvent(
+                            new CustomEvent("spell-cast", {
+                              detail: {
+                                spell: result,
+                                blob: blob,
+                              },
+                            }),
+                          )}
+                      ></os-charm-row>
+                    `,
+                  )}
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+      </os-dialog>
+    `;
+  }
+}

typescript/packages/lookslike-high-level/src/components/sidebar.ts

@@ -22,6 +22,7 @@ import { home } from "../recipes/home.jsx";
 import { render } from "@commontools/html";
 import { saveRecipe } from "../data.js";
 import { castNewRecipe } from "./iframe-spell-ai.js";
+import { toasty } from "./toasty.js";
 
 const uploadBlob = async (data: any) => {
   const id = refer(data).toString();
@@ -35,25 +36,6 @@ const uploadBlob = async (data: any) => {
   });
 };
 
-// bf: TODO, send a "toast" event on window and an use another element to handle it
-const toasty = (message: string) => {
-  const toastEl = document.createElement("div");
-  toastEl.textContent = message;
-  toastEl.style.cssText = `
-    position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #333;
-    color: white;
-    padding: 8px 16px;
-    border-radius: 4px;
-    z-index: 1000;
-  `;
-  document.body.appendChild(toastEl);
-  setTimeout(() => toastEl.remove(), 3000);
-};
-
 @customElement("common-debug")
 export class CommonDebug extends LitElement {
   @property({ type: Object })

typescript/packages/lookslike-high-level/src/components/toasty.ts

@@ -0,0 +1,18 @@
+// NOTE(ja): copied from sidebar.ts ... we need a toasty?
+export const toasty = (message: string) => {
+  const toastEl = document.createElement("div");
+  toastEl.textContent = message;
+  toastEl.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 4px;
+    z-index: 1000;
+  `;
+  document.body.appendChild(toastEl);
+  setTimeout(() => toastEl.remove(), 3000);
+};

typescript/packages/lookslike-high-level/src/components/window-manager.ts

@@ -30,8 +30,10 @@ import { UI, NAME, TYPE } from "@commontools/builder";
 import { matchRoute, navigate } from "../router.js";
 import { buildRecipe } from "../localBuild.js";
 import * as iframeSpellAi from "./iframe-spell-ai.js";
+import { SpellSearchResult } from "./search-results.js";
+import { toasty } from "./toasty.js";
 
-async function castSpell(value: string, openCharm: (charmId: string) => void) {
+async function castSpell(value: string, showResults: (results: SpellSearchResult[]) => void) {
   const searchUrl =
     typeof window !== "undefined"
       ? window.location.protocol + "//" + window.location.host + "/api/ai/spell/search"
@@ -48,7 +50,7 @@ async function castSpell(value: string, openCharm: (charmId: string) => void) {
       query: value,
       tags: [],
       options: {
-        limit: 10,
+        limit: 32,
         includeCompatibility: true,
       },
     }),
@@ -66,20 +68,7 @@ async function castSpell(value: string, openCharm: (charmId: string) => void) {
     } = await response.json();
     console.log("Search response:", searchResponse);
 
-    let recipeKey = searchResponse.spells?.[0]?.key;
-    let blob = searchResponse.spells?.[0]?.compatibleBlobs?.[0];
-
-    if (recipeKey && blob) {
-      const recipeId = recipeKey.replace("spell-", "");
-      await syncRecipe(recipeId);
-
-      const recipe = getRecipe(recipeId);
-      if (!recipe) return;
-
-      const charm: DocImpl<Charm> = await runPersistent(recipe, blob.data);
-      addCharms([charm]);
-      openCharm(JSON.stringify(charm.entityId));
-    }
+    showResults(searchResponse.spells as any);
   }
 }
 
@@ -213,6 +202,9 @@ export class CommonWindowManager extends LitElement {
   @state()
   private focusedProxy: Charm | null = null;
 
+  @state()
+  private spellSearchResults: SpellSearchResult[] = [];
+
   handleUniboxSubmit(event: CustomEvent) {
     const value = event.detail.value;
     const shiftKey = event.detail.shiftKey;
@@ -221,7 +213,39 @@ export class CommonWindowManager extends LitElement {
     if (this.focusedCharm) {
       iframeSpellAi.iterate(this.focusedCharm, value, shiftKey);
     } else {
-      castSpell(value, this.openCharm.bind(this));
+      castSpell(value, this.showResults.bind(this));
+    }
+  }
+
+  showResults(results: SpellSearchResult[]) {
+    if (!results || results.length === 0) {
+      toasty("No results");
+      return;
+    }
+    this.spellSearchResults = results;
+  }
+
+  async onSpellCast(event: CustomEvent) {
+    const { spell: result, blob } = event.detail;
+    const recipeKey = result?.key;
+
+    if (recipeKey && blob) {
+      toasty("Syncing...");
+      const recipeId = recipeKey.replace("spell-", "");
+      await syncRecipe(recipeId);
+
+      const recipe = getRecipe(recipeId);
+      if (!recipe) return;
+
+      toasty("Casting...");
+      const charm: DocImpl<Charm> = await runPersistent(recipe, blob.data);
+      addCharms([charm]);
+      openCharm(JSON.stringify(charm.entityId));
+      toasty("Ready!");
+
+      this.spellSearchResults = [];
+    } else {
+      toasty("Failed to cast");
     }
   }
 
@@ -351,6 +375,12 @@ export class CommonWindowManager extends LitElement {
           </os-charm-chip-group>
         </os-dialog>
 
+        <common-search-results
+          .searchOpen=${this.spellSearchResults.length > 0}
+          .results=${this.spellSearchResults}
+          @spell-cast=${this.onSpellCast}
+        ></common-search-results>
+
         <os-fabgroup class="pin-br" slot="overlay" @submit=${onAiBoxSubmit}>
           ${repeat(
             Array.isArray(this.suggestions) ? this.suggestions : [],