{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "8aaee0bd-59fc-441c-8527-4edc3e0c37bb",
   "metadata": {},
   "outputs": [],
   "source": [
    "// simple log function\n",
    "const log: <T>(s: T, prefix?: string) => void = (s, prefix?) =>\n",
    "  console.log(\n",
    "    (prefix ? prefix : \"\") + \": \" +\n",
    "      JSON.stringify(s, null, 2),\n",
    "  );\n",
    "\n",
    "//function logDocImpl(doc: DocImpl) {\n",
    "//  console.log(\"docImpl: entityId=\" + doc.entityId + \", value=\" + doc.value + \", space=\" + doc.space + \", sourceCell=\" + doc.sourceCell + \", ephemeral=\" + doc.ephemeral);\n",
    "//}\n",
    "function logDocImpl(doc: DocImpl, prefix?: string) {\n",
    "  let logString = \"docImpl: \\n\" +\n",
    "    \"  entityId=\" + JSON.stringify(doc.entityId) + \"\\n\" +\n",
    "    \"  space=\" + doc.space + \"\\n\" +\n",
    "    \"  sourceCell=\" + doc.sourceCell + \"\\n\" +\n",
    "    \"  ephemeral=\" + doc.ephemeral;\n",
    "\n",
    "  // Check if value is an array and add each object individually to the log string\n",
    "  if (Array.isArray(doc.value)) {\n",
    "    logString += \"\\n    value contains \" + doc.value.length + \" objects:\";\n",
    "    doc.value.forEach((item, index) => {\n",
    "      // Convert to JSON string with 2-space indentation\n",
    "      const jsonString = JSON.stringify(item, null, 2);\n",
    "\n",
    "      // Split the JSON string into lines\n",
    "      const jsonLines = jsonString.split(\"\\n\");\n",
    "\n",
    "      // Add the first line with the value[index] prefix\n",
    "      logString += `\\n    value[${index}]: ${jsonLines[0]}`;\n",
    "\n",
    "      // For remaining lines, add 4 additional spaces to maintain consistent indentation\n",
    "      for (let i = 1; i < jsonLines.length; i++) {\n",
    "        logString += \"\\n      \" + jsonLines[i];\n",
    "      }\n",
    "    });\n",
    "  } else {\n",
    "    // For non-array values, apply the same indentation logic\n",
    "    const jsonString = JSON.stringify(doc.value, null, 2);\n",
    "    const jsonLines = jsonString.split(\"\\n\");\n",
    "\n",
    "    // Add the first line with the value: prefix\n",
    "    logString += \"\\n  value: \" + jsonLines[0];\n",
    "\n",
    "    // For remaining lines, add proper indentation\n",
    "    for (let i = 1; i < jsonLines.length; i++) {\n",
    "      logString += \"\\n    \" + jsonLines[i];\n",
    "    }\n",
    "  }\n",
    "  console.log((prefix ? prefix : \"\") + \": \" + logString);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8fe4a001-c69b-40fb-ae3f-917d41561f1b",
   "metadata": {},
   "source": [
    "### Introduction\n",
    "\n",
    "This exploration tries to show what the various \"parts\" of the system does. It\n",
    "tries to make explicit all the things that usually happen in the backgroun.\n",
    "\n",
    "This means we won't be using the highest level abstractions. I believe this will\n",
    "show what's really happening under the hood and give you a better idea of what's\n",
    "in the guts of the system.\n",
    "\n",
    "### List of Charms\n",
    "\n",
    "The first thing I'd like to do is be able to see a list of our charms, just like\n",
    "when you go to the toolshed common knowledge page.\n",
    "\n",
    "The call I'd like to do is `getDoc<CellLink[]>([], \"charms\", SPACE);`\n",
    "\n",
    "BUT before we can access charms, we need to set up our connection to the\n",
    "database. Let's do that. NOTE: notice that `signer` is undefined in the Storage\n",
    "object. We'll get back to that later."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f7936edf-cc47-4f4e-a886-92faaedb3497",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "StorageImpl {\n",
       "  storageProviders: Map(0) {},\n",
       "  remoteStorageUrl: URL {\n",
       "    href: \u001b[32m\"https://toolshed.saga-castor.ts.net/\"\u001b[39m,\n",
       "    origin: \u001b[32m\"https://toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    protocol: \u001b[32m\"https:\"\u001b[39m,\n",
       "    username: \u001b[32m\"\"\u001b[39m,\n",
       "    password: \u001b[32m\"\"\u001b[39m,\n",
       "    host: \u001b[32m\"toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    hostname: \u001b[32m\"toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    port: \u001b[32m\"\"\u001b[39m,\n",
       "    pathname: \u001b[32m\"/\"\u001b[39m,\n",
       "    hash: \u001b[32m\"\"\u001b[39m,\n",
       "    search: \u001b[32m\"\"\u001b[39m\n",
       "  },\n",
       "  signer: \u001b[90mundefined\u001b[39m,\n",
       "  docIsSyncing: Set(0) {},\n",
       "  docIsLoading: Map(0) {},\n",
       "  loadingPromises: Map(0) {},\n",
       "  loadingResolves: Map(0) {},\n",
       "  writeDependentDocs: Map(0) {},\n",
       "  writeValues: Map(0) {},\n",
       "  readDependentDocs: Map(0) {},\n",
       "  readValues: Map(0) {},\n",
       "  currentBatch: [],\n",
       "  currentBatchProcessing: \u001b[33mfalse\u001b[39m,\n",
       "  currentBatchResolve: \u001b[36m[Function (anonymous)]\u001b[39m,\n",
       "  currentBatchPromise: Promise { \u001b[36m<pending>\u001b[39m },\n",
       "  lastBatchTime: \u001b[33m0\u001b[39m,\n",
       "  lastBatchDebounceCount: \u001b[33m0\u001b[39m,\n",
       "  debounceTimeout: \u001b[1mnull\u001b[22m,\n",
       "  batchStartTime: \u001b[33m0\u001b[39m,\n",
       "  cancel: \u001b[36m[Function: cancelAll]\u001b[39m,\n",
       "  addCancel: \u001b[36m[Function: addCancel]\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import { storage } from \"../runner/src/storage.ts\";\n",
    "\n",
    "// where our server is\n",
    "const API_URL = \"https://toolshed.saga-castor.ts.net/\";\n",
    "\n",
    "// `storage` is a singleton and you have to give it the server URL\n",
    "storage.setRemoteStorage(new URL(API_URL));\n",
    "storage; // notice signer is undefined"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5558236d-0fe0-4013-9d31-e5f537ad5154",
   "metadata": {},
   "source": [
    "### Space\n",
    "\n",
    "Spaces are in flux and we'll have private and public spaces, but for now, we\n",
    "still have the ability to pass in a simple string for the space. We'll use\n",
    "\"common-knowledge\" which is our default space.\n",
    "\n",
    "### getDoc()\n",
    "\n",
    "Now we have storage set up \"enough\" to call getDoc(value, cause, space). The\n",
    "value we pass in here is basically the empty value `[]` which is the same as\n",
    "undefined. The cause is a special hardcoded string \"charms\" that we use.\n",
    "CharmManager has this hardcoded string in it. Lastly we pass in the space which\n",
    "we already talked about."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "c8bddbac-278a-42de-90c3-aabc001b0663",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{\n",
       "  get: \u001b[36m[Function: get]\u001b[39m,\n",
       "  getAsQueryResult: \u001b[36m[Function: getAsQueryResult]\u001b[39m,\n",
       "  asCell: \u001b[36m[Function: asCell]\u001b[39m,\n",
       "  send: \u001b[36m[Function: send]\u001b[39m,\n",
       "  updates: \u001b[36m[Function: updates]\u001b[39m,\n",
       "  getAtPath: \u001b[36m[Function: getAtPath]\u001b[39m,\n",
       "  setAtPath: \u001b[36m[Function: setAtPath]\u001b[39m,\n",
       "  freeze: \u001b[36m[Function: freeze]\u001b[39m,\n",
       "  isFrozen: \u001b[36m[Function: isFrozen]\u001b[39m,\n",
       "  toJSON: \u001b[36m[Function: toJSON]\u001b[39m,\n",
       "  value: \u001b[36m[Getter]\u001b[39m,\n",
       "  entityId: \u001b[36m[Getter/Setter]\u001b[39m,\n",
       "  space: \u001b[36m[Getter/Setter]\u001b[39m,\n",
       "  sourceCell: \u001b[36m[Getter/Setter]\u001b[39m,\n",
       "  ephemeral: \u001b[36m[Getter/Setter]\u001b[39m,\n",
       "  copyTrap: \u001b[36m[Getter]\u001b[39m,\n",
       "  registerSchemaUse: \u001b[36m[Function: registerSchemaUse]\u001b[39m,\n",
       "  [\u001b[32mSymbol(toOpaqueRef)\u001b[39m]: \u001b[36m[Function: [toOpaqueRef]]\u001b[39m,\n",
       "  [\u001b[32mSymbol(isDoc)\u001b[39m]: \u001b[33mtrue\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import { DocImpl, getDoc } from \"../runner/src/doc.ts\";\n",
    "import { createRef } from \"../runner/src/doc-map.ts\";\n",
    "\n",
    "// space is usually a did now, but it still accepts a string\n",
    "const SPACE = \"common-knowledge\";\n",
    "\n",
    "const allCharmsDoc: DocImpl<CellLink[]> = getDoc<CellLink[]>(\n",
    "  [],\n",
    "  \"charms\",\n",
    "  SPACE,\n",
    ");\n",
    "allCharmsDoc;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ae00cac7-6470-4785-aa73-f60dda006386",
   "metadata": {},
   "source": [
    "### More on getDoc()\n",
    "\n",
    "How does getDoc() find the doc it's looking for? As we discussed, getDoc()\n",
    "received a `value` and `cause` parameters.\n",
    "\n",
    "Within getDoc(), we take these two parameters and create an `EntityId` from\n",
    "them. What this means is that if we call getDoc() with different value and cause\n",
    "parameters, we should get different `EntityId`s. Let's test this out. We'll get\n",
    "another \"well known\" document for the pinned charms. If we're right, the IDs\n",
    "will be different."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "0fb9e20d-b098-43dd-8165-2bf42c38478f",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "allCharmsDoc entity id: {\n",
      "  \"/\": \"baedreiahv63wxwgaem4hzjkizl4qncfgvca7pj5cvdon7cukumfon3ioye\"\n",
      "}\n",
      "pinsDoc entity id: {\n",
      "  \"/\": \"baedreihxpwcmhvzpf5weuf4ceow4zbahqikvu5ploox36ipeuvqnminyba\"\n",
      "}\n",
      "is the same?: false\n"
     ]
    }
   ],
   "source": [
    "import { deepEqual } from \"../builder/src/utils.ts\";\n",
    "\n",
    "// get the pinned charms doc\n",
    "const pinsDoc: DocImpl<CellLink[]> = getDoc<CellLink[]>(\n",
    "  [],\n",
    "  \"pinned-charms\",\n",
    "  SPACE,\n",
    ");\n",
    "\n",
    "// see that the entityId for both allCharmsDoc and pinsDoc are different\n",
    "log(allCharmsDoc.entityId, \"allCharmsDoc entity id\");\n",
    "log(pinsDoc.entityId, \"pinsDoc entity id\");\n",
    "log(deepEqual(allCharmsDoc, pinsDoc), \"is the same?\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "218d5164-2d6f-454a-80e2-756e935d68c8",
   "metadata": {},
   "source": [
    "### createRef\n",
    "\n",
    "Let's continue our detour, how do EntityIds get created. This uses the enigmatic\n",
    "merkle-reference. We don't need to understand how merkle-references are made,\n",
    "just that it creates a unique digital fingerprint of the Doc, like a hash.\n",
    "\n",
    "Let's recreate the allCharmsDocEntityId from the \"value\" and \"cause\" arugments\n",
    "to getDoc. As a reminder, this was our getDoc call:\n",
    "\n",
    "```ts\n",
    "const allCharmsDoc: DocImpl<CellLink[]> = getDoc<CellLink[]>(\n",
    "  [],\n",
    "  \"charms\",\n",
    "  SPACE,\n",
    ");\n",
    "```\n",
    "\n",
    "So we should be able to pass in [] and \"charms\" to createRef() and get back the\n",
    "same entity ID. Let's try it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "9bba8a6b-b97b-45f6-9aaf-e03f1b228055",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "recreated allCharmsDoc entityid: {\n",
      "  \"/\": \"baedreiahv63wxwgaem4hzjkizl4qncfgvca7pj5cvdon7cukumfon3ioye\"\n",
      "}\n",
      "original allCharmsDoc entityid: {\n",
      "  \"/\": \"baedreiahv63wxwgaem4hzjkizl4qncfgvca7pj5cvdon7cukumfon3ioye\"\n",
      "}\n",
      "are they the same?: true\n"
     ]
    }
   ],
   "source": [
    "const recreatedEntityId: EntityId = createRef([], \"charms\");\n",
    "log(recreatedEntityId, \"recreated allCharmsDoc entityid\");\n",
    "log(allCharmsDoc.entityId, \"original allCharmsDoc entityid\");\n",
    "log(deepEqual(recreatedEntityId, allCharmsDoc.entityId), \"are they the same?\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2d16fb25-fa33-4bc6-b877-4501eb730a38",
   "metadata": {},
   "source": [
    "### Spaces dont matter\n",
    "\n",
    "Did you notice that we don't care about spaces when we make the id? If I use a\n",
    "different space for the original allCharmsDoc, I should get back the same\n",
    "EntityID from getDoc(). Let's verify!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "0239e733-15fe-4905-81a3-30cb4699bbe3",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "entityid for allCharmsDoc but with different space: {\n",
      "  \"/\": \"baedreiahv63wxwgaem4hzjkizl4qncfgvca7pj5cvdon7cukumfon3ioye\"\n",
      "}\n",
      "entityid for original allCharmsDoc in the 'charms' space: {\n",
      "  \"/\": \"baedreiahv63wxwgaem4hzjkizl4qncfgvca7pj5cvdon7cukumfon3ioye\"\n",
      "}\n",
      "are they the same?: true\n"
     ]
    }
   ],
   "source": [
    "const differentSpaceDoc: DocImpl<CellLink[]> = getDoc<CellLink[]>(\n",
    "  [],\n",
    "  \"charms\",\n",
    "  \"some other space\",\n",
    ");\n",
    "log(\n",
    "  differentSpaceDoc.entityId,\n",
    "  \"entityid for allCharmsDoc but with different space\",\n",
    ");\n",
    "log(\n",
    "  allCharmsDoc.entityId,\n",
    "  \"entityid for original allCharmsDoc in the 'charms' space\",\n",
    ");\n",
    "log(\n",
    "  deepEqual(differentSpaceDoc.entityId, allCharmsDoc.entityId),\n",
    "  \"are they the same?\",\n",
    ");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc7a24ea-15ee-4555-8f6c-cb5bb18a1f75",
   "metadata": {},
   "source": [
    "To further demystify getDoc(), the parameters we pass in really can be anything."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "904ac02f-9280-4573-a959-7a95788ff157",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "crazydoc: {\n",
      "  \"/\": \"baedreiekup34zo6rx6l33orhkktrzxgnrxxt7p3rmlnqylb4dv2swcc4kq\"\n",
      "}\n"
     ]
    }
   ],
   "source": [
    "const some_val = [\"arrays\", \"are\", { value: \"good\" }];\n",
    "const some_cause = { some: \"random\", value: 42 };\n",
    "const some_space = \"random string in here\";\n",
    "const crazyDoc = getDoc<number>(some_val, some_cause, some_space);\n",
    "log(crazyDoc, \"crazydoc\");\n",
    "\n",
    "// can try changing val, cause, space and see that nested objects change merke-reference"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "0f93ff4f-676c-4372-bb24-ed6c283d721e",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      ": docImpl: \n",
      "  entityId={\"/\":\"baedreiekup34zo6rx6l33orhkktrzxgnrxxt7p3rmlnqylb4dv2swcc4kq\"}\n",
      "  space=random string in here\n",
      "  sourceCell=undefined\n",
      "  ephemeral=false\n",
      "    value contains 3 objects:\n",
      "    value[0]: \"arrays\"\n",
      "    value[1]: \"are\"\n",
      "    value[2]: {\n",
      "        \"value\": \"good\"\n",
      "      }\n"
     ]
    }
   ],
   "source": [
    "// let's see what this crazy doc looks like\n",
    "logDocImpl(crazyDoc);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "65af0146-ebee-4c2e-bb56-bf2522a60e99",
   "metadata": {},
   "outputs": [],
   "source": [
    "// we'll set this charmsDoc to the doc we want to use from here on to get the list of charms\n",
    "// either to pinsDoc or allCharmsDoc\n",
    "const charmsDoc = pinsDoc;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "843c5bec-2653-4284-ad53-2cc51ca247d0",
   "metadata": {},
   "source": [
    "### Back on track\n",
    "\n",
    "Back from the short detour, we want to continue to get the charms list. Right\n",
    "now, we have `charmsDoc` that has an EntityID but we haven't loaded the doc from\n",
    "Storage yet (the database). So let's do that now. However, we are...\n",
    "\n",
    "### Stuck on Storage\n",
    "\n",
    "We're making a point to access data via the `Storage` interface rather than\n",
    "through CharmManager or other possibly more convenient methods. Thus, our next\n",
    "step is to call `Storage.syncCell(docImpl);` This would let us get the data for\n",
    "the doc. However, this would crash with an exception. Jake ran into this the\n",
    "hard way and the system somehow ate the exception.\n",
    "\n",
    "### Another short detour, questioning our Identity\n",
    "\n",
    "Remember when we saw the signer property was undefined in storage before? We\n",
    "have to set that now in order to call syncCell. What we need to call `setSigner`\n",
    "on `storage`. We create a signer via the Identity module."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0714bfaa-cc87-420e-b64d-bb90bb89db48",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "user identity (looks empty but its just private fields: {}\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "StorageImpl {\n",
       "  storageProviders: Map(0) {},\n",
       "  remoteStorageUrl: URL {\n",
       "    href: \u001b[32m\"https://toolshed.saga-castor.ts.net/\"\u001b[39m,\n",
       "    origin: \u001b[32m\"https://toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    protocol: \u001b[32m\"https:\"\u001b[39m,\n",
       "    username: \u001b[32m\"\"\u001b[39m,\n",
       "    password: \u001b[32m\"\"\u001b[39m,\n",
       "    host: \u001b[32m\"toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    hostname: \u001b[32m\"toolshed.saga-castor.ts.net\"\u001b[39m,\n",
       "    port: \u001b[32m\"\"\u001b[39m,\n",
       "    pathname: \u001b[32m\"/\"\u001b[39m,\n",
       "    hash: \u001b[32m\"\"\u001b[39m,\n",
       "    search: \u001b[32m\"\"\u001b[39m\n",
       "  },\n",
       "  signer: Identity {},\n",
       "  docIsSyncing: Set(0) {},\n",
       "  docIsLoading: Map(0) {},\n",
       "  loadingPromises: Map(0) {},\n",
       "  loadingResolves: Map(0) {},\n",
       "  writeDependentDocs: Map(0) {},\n",
       "  writeValues: Map(0) {},\n",
       "  readDependentDocs: Map(0) {},\n",
       "  readValues: Map(0) {},\n",
       "  currentBatch: [],\n",
       "  currentBatchProcessing: \u001b[33mfalse\u001b[39m,\n",
       "  currentBatchResolve: \u001b[36m[Function (anonymous)]\u001b[39m,\n",
       "  currentBatchPromise: Promise { \u001b[36m<pending>\u001b[39m },\n",
       "  lastBatchTime: \u001b[33m0\u001b[39m,\n",
       "  lastBatchDebounceCount: \u001b[33m0\u001b[39m,\n",
       "  debounceTimeout: \u001b[1mnull\u001b[22m,\n",
       "  batchStartTime: \u001b[33m0\u001b[39m,\n",
       "  cancel: \u001b[36m[Function: cancelAll]\u001b[39m,\n",
       "  addCancel: \u001b[36m[Function: addCancel]\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import { DIDKey, Identity } from \"../identity/src/index.ts\";\n",
    "\n",
    "// key system similar to mneumonic registration\n",
    "const user_identity: Identity<DIDKey> = await Identity.fromPassphrase(\n",
    "  \"some passphrase\",\n",
    ");\n",
    "\n",
    "// NOTE: we can use this key directly with storage, however, to better replicate\n",
    "// the long term goals, we derive a new key from the root key\n",
    "// this is a lot like how users will have their own keys for each of their spaces\n",
    "// we would normally pass in the space name (which is like the \"common-knowledge\" part of the URL)\n",
    "const space_key = await user_identity.derive(SPACE);\n",
    "\n",
    "// helper function? why not\n",
    "function initializeStorage(\n",
    "  storage: Storage,\n",
    "  remoteStorageURL: string,\n",
    "  signer: Signer,\n",
    "): Storage {\n",
    "  storage.setRemoteStorage(new URL(remoteStorageURL));\n",
    "  storage.setSigner(signer);\n",
    "  return storage;\n",
    "}\n",
    "\n",
    "// use `space_key` the derived space-based identity as the signer for the storage\n",
    "const myStorage = initializeStorage(storage, API_URL, space_key);\n",
    "\n",
    "log(user_identity, \"user identity (looks empty but its just private fields\");\n",
    "myStorage; // notice signer is no longer undefined"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2fff337d-be9c-40cb-b8b3-f276f3375466",
   "metadata": {},
   "source": [
    "### Lessgo Sync!\n",
    "\n",
    "Now we are all clear to call syncCell! syncCell returns a Promise(), so we await\n",
    "on it before accessing the object.\n",
    "\n",
    "While it's called syncCell, it really syncs either DocImpls or Cells. We'll get\n",
    "into that more later.\n",
    "\n",
    "```ts\n",
    "interface Storage {\n",
    "    syncCell<T>(\n",
    "        subject: DocImpl<T> | Cell<any>,\n",
    "        expectedInStorage: boolean = false,\n",
    "      ): Promise<DocImpl<T>> | DocImpl<T> \n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "ced12094-6ca1-415b-9b67-4e22690d7198",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "before syncCell: docImpl: \n",
      "  entityId={\"/\":\"baedreihxpwcmhvzpf5weuf4ceow4zbahqikvu5ploox36ipeuvqnminyba\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=undefined\n",
      "  ephemeral=false\n",
      "    value contains 0 objects:\n",
      "after syncCell: docImpl: \n",
      "  entityId={\"/\":\"baedreihxpwcmhvzpf5weuf4ceow4zbahqikvu5ploox36ipeuvqnminyba\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=undefined\n",
      "  ephemeral=false\n",
      "    value contains 4 objects:\n",
      "    value[0]: {\n",
      "        \"cell\": {\n",
      "          \"/\": \"baedreietbxsdgmw67da47dp6aqervnk2zyppevhx4p4mn3pet6onvaxcmy\"\n",
      "        },\n",
      "        \"path\": []\n",
      "      }\n",
      "    value[1]: {\n",
      "        \"cell\": {\n",
      "          \"/\": \"baedreih6pdtzk4xvjuxlsp3htrugtipgndn6xtd4cwbdr6wgscb6fh2nlu\"\n",
      "        },\n",
      "        \"path\": []\n",
      "      }\n",
      "    value[2]: {\n",
      "        \"cell\": {\n",
      "          \"/\": \"baedreiel5fi755jovxnou5bpdsuvcylibayiaaipaysi2tiip26ik3b6ya\"\n",
      "        },\n",
      "        \"path\": []\n",
      "      }\n",
      "    value[3]: {\n",
      "        \"cell\": {\n",
      "          \"/\": \"baedreid2qh2k6gcie4ezckqukkplpeqlz7jnxirt7aehxdcw4sfg5aszh4\"\n",
      "        },\n",
      "        \"path\": []\n",
      "      }\n"
     ]
    }
   ],
   "source": [
    "// start syncing on this document\n",
    "// notice that we call syncCell on a DocImpl\n",
    "// also, we have to await on this before accessing otherwise we may get a race condition!\n",
    "logDocImpl(charmsDoc, \"before syncCell\");\n",
    "await myStorage.syncCell(charmsDoc);\n",
    "logDocImpl(charmsDoc, \"after syncCell\");"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3965fe43-6723-4a97-ab94-7f5118ac34d7",
   "metadata": {},
   "source": [
    "### Document Loaded but not the Charms\n",
    "\n",
    "We have retrieved the document now, however, it doesn't actually contain the\n",
    "charms, just references to them as you can see via the `value` fields. Each\n",
    "element in the value array\n",
    "\n",
    "We have to look at each of the elements in the `value` array and load each one.\n",
    "Each one has the format:\n",
    "\n",
    "```ts\n",
    "{\n",
    "    \"cell\": {\n",
    "      \"/\": \"baedreid2qh2k6gcie4ezckqukkplpeqlz7jnxirt7aehxdcw4sfg5aszh4\"\n",
    "    },\n",
    "    \"path\": []\n",
    "}\n",
    "```\n",
    "\n",
    "This is a CellLink, which you can find in runner/src/cell.ts:\n",
    "\n",
    "```ts\n",
    "/**\n",
    " * Cell link.\n",
    " *\n",
    " * A cell link is a doc and a path within that doc.\n",
    " */\n",
    "export type CellLink = {\n",
    "  space?: string;\n",
    "  cell: DocImpl<any>;\n",
    "  path: PropertyKey[];\n",
    "};\n",
    "```\n",
    "\n",
    "We sometimes call these DocLinks, they are the same thing. In cell.ts, you'll\n",
    "still see\n",
    "\n",
    "```\n",
    "* @method getAsDocLink Returns a document link for the cell.\n",
    "* @returns {CellLink}\n",
    "```\n",
    "\n",
    "We'll take each of the CellLinks and call getDocByEntityId(), this will load the\n",
    "docImpl for us. This time we do _NOT_ need to sync on each child because the\n",
    "first syncCell also sync'd on all the child cells. NOTE: this logic of loading\n",
    "dependencies happens in `runner/src/storage.ts:_processCurrentBatch()`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "3be96f91-33dc-47de-bee2-64886dc77793",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      ": docImpl: \n",
      "  entityId={\"/\":\"baedreietbxsdgmw67da47dp6aqervnk2zyppevhx4p4mn3pet6onvaxcmy\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=[object Object]\n",
      "  ephemeral=false\n",
      "  value: {\n",
      "      \"$NAME\": \"Common Time\",\n",
      "      \"$UI\": {\n",
      "        \"type\": \"vnode\",\n",
      "        \"name\": \"common-iframe\",\n",
      "        \"props\": {\n",
      "          \"src\": \"<html>\\n<head>\\n<script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\\\"></script>\\n<script src=\\\"https://unpkg.com/@babel/standalone/babel.min.js\\\"></script>\\n<script>\\nwindow.onerror = function (message, source, lineno, colno, error) {\\n  window.parent.postMessage(\\n    {\\n      type: \\\"error\\\",\\n      data: {\\n        description: message,\\n        source: source,\\n        lineno: lineno,\\n        colno: colno,\\n        stacktrace: error && error.stack ? error.stack : new Error().stack,\\n      },\\n    },\\n    \\\"*\\\",\\n  );\\n  return false;\\n};\\n\\nfunction useDoc(key) {\\n  const [doc, setDoc] = React.useState(undefined);\\n\\n  React.useEffect(() => {\\n    function handleMessage(event) {\\n      if (\\n        event.data &&\\n        event.data.type === \\\"update\\\" &&\\n        Array.isArray(event.data.data) &&\\n        event.data.data[0] === key\\n      ) {\\n        setDoc(event.data.data[1]);\\n      }\\n    }\\n\\n    window.addEventListener(\\\"message\\\", handleMessage);\\n    window.parent.postMessage({ type: \\\"subscribe\\\", data: key }, \\\"*\\\");\\n\\n    return () => {\\n      window.removeEventListener(\\\"message\\\", handleMessage);\\n      window.parent.postMessage({ type: \\\"unsubscribe\\\", data: key }, \\\"*\\\");\\n    };\\n  }, [key]);\\n\\n  const updateDoc = (newValue) => {\\n    if (typeof newValue === \\\"function\\\") {\\n      newValue = newValue(doc);\\n    }\\n    window.parent.postMessage({ type: \\\"write\\\", data: [key, newValue] }, \\\"*\\\");\\n  };\\n\\n  return [doc, updateDoc];\\n}\\n\\nwindow.llm = (() => {\\n  const inflight = [];\\n\\n  async function llm(payload) {\\n    return new Promise((resolve, reject) => {\\n      let stringified = JSON.stringify(payload);\\n      inflight.push([stringified, resolve, reject]);\\n      window.parent.postMessage({\\n        type: \\\"llm-request\\\",\\n        data: stringified,\\n      }, \\\"*\\\");\\n    });\\n  };\\n\\n  window.addEventListener(\\\"message\\\", e => {\\n    if (e.data.type !== \\\"llm-response\\\") {\\n      return;\\n    }\\n    let { request, data, error } = e.data;\\n    let index = inflight.findIndex(([payload, res, rej]) => request === payload);\\n    if (index !== -1) {\\n      let [_, res, rej] = inflight[index];\\n      inflight.splice(index, 1);\\n      if (data) {\\n        res(data);\\n      } else {\\n        rej(data);\\n      }\\n    }\\n  });\\n  return llm;\\n})();\\n\\nwindow.generateImage = function(prompt) {\\n  return '/api/ai/img?prompt=' + encodeURIComponent(prompt);\\n}\\n</script>\\n<title>Common Time</title>\\n</head>\\n<body>\\n<div id=\\\"root\\\"></div>\\n<script type=\\\"text/babel\\\">\\nfunction WorldClock() {\\n  const [locations, setLocations] = useDoc(\\\"locations\\\");\\n  const [currentTime, setCurrentTime] = React.useState(Date.now());\\n  const [editingLocationId, setEditingLocationId] = React.useState(null);\\n\\n  // Update current time every second for live updates\\n  React.useEffect(() => {\\n    const interval = setInterval(() => {\\n      setCurrentTime(Date.now());\\n    }, 1000);\\n    return () => clearInterval(interval);\\n  }, []);\\n\\n  const addLocation = () => {\\n    const newId = (locations && locations.length > 0) ? Math.max(...locations.map(l => l.id)) + 1 : 1;\\n    const newLocation = {\\n      id: newId,\\n      name: \\\"New Location\\\",\\n      timezone: \\\"UTC\\\",\\n      weather: \\\"Clear\\\",\\n      picture: { src: \\\"\\\", alt: \\\"\\\", description: \\\"\\\" },\\n      portal: { name: \\\"\\\", description: \\\"\\\" },\\n      lastUpdated: new Date().toISOString()\\n    };\\n    setLocations(prevLocations => (prevLocations || []).concat(newLocation));\\n    setEditingLocationId(newId); // Start editing the new location immediately\\n  };\\n\\n  const removeLocation = (id) => {\\n    setLocations(prevLocations => prevLocations.filter(location => location.id !== id));\\n    if (editingLocationId === id) {\\n      setEditingLocationId(null); // Stop editing if the current location is removed\\n    }\\n  };\\n\\n  const startEditing = (id) => {\\n    setEditingLocationId(id);\\n  };\\n\\n  const stopEditing = () => {\\n    setEditingLocationId(null);\\n  };\\n\\n  const updateLocation = (id, updatedFields) => {\\n    setLocations(prevLocations =>\\n      prevLocations.map(location =>\\n        location.id === id ? { ...location, ...updatedFields } : location\\n      )\\n    );\\n  };\\n\\n  if (!locations) {\\n    return <div className=\\\"flex justify-center items-center h-screen\\\">Loading...</div>;\\n  }\\n\\n  return (\\n    <div className=\\\"max-w-6xl mx-auto p-4\\\">\\n      <h1 className=\\\"text-2xl font-bold mb-4 text-gray-800\\\">Common Time</h1>\\n      <div className=\\\"flex flex-row flex-wrap gap-0 justify-start\\\">\\n        {locations.map((location) => (\\n          editingLocationId === location.id ? (\\n            <EditLocationCard\\n              key={location.id}\\n              location={location}\\n              onSave={updateLocation}\\n              onCancel={stopEditing}\\n            />\\n          ) : (\\n            <LocationCard\\n              key={location.id}\\n              location={{ ...location, currentTime }}\\n              onEdit={() => startEditing(location.id)}\\n              onRemove={() => removeLocation(location.id)}\\n            />\\n          )\\n        ))}\\n      </div>\\n      <button\\n        onClick={addLocation}\\n        className=\\\"mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\\\"\\n      >\\n        Add Location\\n      </button>\\n    </div>\\n  );\\n}\\n\\nfunction LocationCard({ location, onEdit, onRemove }) {\\n  const { name, timezone, currentTime, weather, picture, portal, lastUpdated } = location;\\n\\n  // Get the local time in the location's timezone\\n  const localTime = new Date(currentTime).toLocaleString('en-US', {\\n    timeZone: timezone\\n  });\\n  const localDate = new Date(localTime);\\n  const hour = localDate.getHours();\\n\\n  // Determine time of day\\n  const timeOfDay =\\n    hour >= 5 && hour < 12 ? 'morning' :\\n    hour >= 12 && hour < 17 ? 'afternoon' :\\n    hour >= 17 && hour < 20 ? 'evening' : 'night';\\n\\n  const formattedTime = localDate.toLocaleTimeString([], {\\n    hour: '2-digit',\\n    minute: '2-digit',\\n    second: '2-digit'\\n  });\\n\\n  const formattedDate = localDate.toLocaleDateString([], {\\n    month: 'short',\\n    day: 'numeric',\\n  });\\n\\n  // Generate a dynamic image based on location, accurate time of day and weather\\n  const imagePrompt = `${name} cityscape ${weather} ${timeOfDay}, minimalist style, vertical composition, ${hour}:00`;\\n  const imageSrc = generateImage(imagePrompt);\\n\\n  return (\\n    <div className=\\\"bg-white border-r border-gray-200 last:border-r-0 w-[120px]\\\">\\n      <div className=\\\"aspect-[2/3] relative\\\">\\n        <img\\n          className=\\\"w-full h-full object-cover\\\"\\n          src={imageSrc}\\n          alt={`${name} - ${weather} - ${timeOfDay}`}\\n          onError={(e) => {\\n            e.target.onerror = null;\\n            e.target.src = 'data:image/svg+xml,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"50\\\" height=\\\"75\\\" viewBox=\\\"0 0 50 75\\\"><rect width=\\\"100%\\\" height=\\\"100%\\\" fill=\\\"%23f0f0f0\\\"/><text x=\\\"50%\\\" y=\\\"50%\\\" font-family=\\\"Arial\\\" font-size=\\\"10\\\" fill=\\\"%23999\\\" text-anchor=\\\"middle\\\" dy=\\\".3em\\\">Loading...</text></svg>';\\n          }}\\n        />\\n      </div>\\n      <div className=\\\"p-1.5\\\">\\n        <h2 className=\\\"text-xs font-semibold mb-0.5 truncate\\\">{name}</h2>\\n        <div className=\\\"space-y-0.5\\\">\\n          <p className=\\\"text-sm font-medium\\\">{formattedTime}</p>\\n          <p className=\\\"text-xs text-gray-600\\\">{formattedDate}</p>\\n          <p className=\\\"text-xs text-gray-600 truncate\\\">{weather}</p>\\n        </div>\\n        <div className=\\\"mt-1 flex space-x-1\\\">\\n          <button onClick={onEdit} className=\\\"text-xs text-blue-500 hover:text-blue-700\\\">Edit</button>\\n          <button onClick={onRemove} className=\\\"text-xs text-red-500 hover:text-red-700\\\">Remove</button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction EditLocationCard({ location, onSave, onCancel }) {\\n  const [editedLocation, setEditedLocation] = React.useState(location);\\n\\n  const handleChange = (field, value) => {\\n    setEditedLocation({ ...editedLocation, [field]: value });\\n  };\\n\\n  const handleSave = () => {\\n    onSave(editedLocation.id, editedLocation);\\n    onCancel();\\n  };\\n\\n  return (\\n    <div className=\\\"bg-white border-r border-gray-200 last:border-r-0 w-[120px] p-1.5\\\">\\n      <input\\n        type=\\\"text\\\"\\n        value={editedLocation.name}\\n        onChange={(e) => handleChange('name', e.target.value)}\\n        className=\\\"text-xs font-semibold mb-0.5 w-full border rounded px-1\\\"\\n        placeholder=\\\"Location Name\\\"\\n      />\\n      <input\\n        type=\\\"text\\\"\\n        value={editedLocation.timezone}\\n        onChange={(e) => handleChange('timezone', e.target.value)}\\n        className=\\\"text-xs text-gray-600 w-full border rounded px-1 my-1\\\"\\n        placeholder=\\\"Timezone\\\"\\n      />\\n      <input\\n        type=\\\"text\\\"\\n        value={editedLocation.weather}\\n        onChange={(e) => handleChange('weather', e.target.value)}\\n        className=\\\"text-xs text-gray-600 w-full border rounded px-1\\\"\\n        placeholder=\\\"Weather\\\"\\n      />\\n      <div className=\\\"mt-1 flex space-x-1\\\">\\n        <button onClick={handleSave} className=\\\"text-xs text-green-500 hover:text-green-700\\\">Save</button>\\n        <button onClick={onCancel} className=\\\"text-xs text-gray-500 hover:text-gray-700\\\">Cancel</button>\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction App() {\\n  return (\\n    <WorldClock />\\n  );\\n}\\n\\nconst root = ReactDOM.createRoot(document.getElementById('root'));\\nroot.render(<App />);\\n</script>\\n</body>\\n</html>\",\n",
      "          \"$context\": {\n",
      "            \"$alias\": {\n",
      "              \"cell\": {\n",
      "                \"/\": \"baedreig6yfypxumwytzlmw4wbvwcdxcfroa4lj46qrcoxck3lptmfa5y2u\"\n",
      "              },\n",
      "              \"path\": [\n",
      "                \"argument\"\n",
      "              ]\n",
      "            }\n",
      "          }\n",
      "        },\n",
      "        \"children\": []\n",
      "      }\n",
      "    }\n",
      ": docImpl: \n",
      "  entityId={\"/\":\"baedreih6pdtzk4xvjuxlsp3htrugtipgndn6xtd4cwbdr6wgscb6fh2nlu\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=[object Object]\n",
      "  ephemeral=false\n",
      "  value: {\n",
      "      \"$NAME\": \"Exercise Tracker\",\n",
      "      \"$UI\": {\n",
      "        \"type\": \"vnode\",\n",
      "        \"name\": \"common-iframe\",\n",
      "        \"props\": {\n",
      "          \"src\": \"<html>\\n<head>\\n<script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\\\"></script>\\n<script src=\\\"https://unpkg.com/@babel/standalone/babel.min.js\\\"></script>\\n<script>\\nwindow.onerror = function (message, source, lineno, colno, error) {\\n  window.parent.postMessage(\\n    {\\n      type: \\\"error\\\",\\n      data: {\\n        description: message,\\n        source: source,\\n        lineno: lineno,\\n        colno: colno,\\n        stacktrace: error && error.stack ? error.stack : new Error().stack,\\n      },\\n    },\\n    \\\"*\\\",\\n  );\\n  return false;\\n};\\n\\nfunction useDoc(key) {\\n  const [doc, setDoc] = React.useState(undefined);\\n\\n  React.useEffect(() => {\\n    function handleMessage(event) {\\n      if (\\n        event.data &&\\n        event.data.type === \\\"update\\\" &&\\n        Array.isArray(event.data.data) &&\\n        event.data.data[0] === key\\n      ) {\\n        setDoc(event.data.data[1]);\\n      }\\n    }\\n\\n    window.addEventListener(\\\"message\\\", handleMessage);\\n    window.parent.postMessage({ type: \\\"subscribe\\\", data: key }, \\\"*\\\");\\n\\n    return () => {\\n      window.removeEventListener(\\\"message\\\", handleMessage);\\n      window.parent.postMessage({ type: \\\"unsubscribe\\\", data: key }, \\\"*\\\");\\n    };\\n  }, [key]);\\n\\n  const updateDoc = (newValue) => {\\n    if (typeof newValue === \\\"function\\\") {\\n      newValue = newValue(doc);\\n    }\\n    window.parent.postMessage({ type: \\\"write\\\", data: [key, newValue] }, \\\"*\\\");\\n  };\\n\\n  return [doc, updateDoc];\\n}\\n\\nwindow.llm = (() => {\\n  const inflight = [];\\n\\n  async function llm(payload) {\\n    return new Promise((resolve, reject) => {\\n      let stringified = JSON.stringify(payload);\\n      inflight.push([stringified, resolve, reject]);\\n      window.parent.postMessage({\\n        type: \\\"llm-request\\\",\\n        data: stringified,\\n      }, \\\"*\\\");\\n    });\\n  };\\n\\n  window.addEventListener(\\\"message\\\", e => {\\n    if (e.data.type !== \\\"llm-response\\\") {\\n      return;\\n    }\\n    let { request, data, error } = e.data;\\n    let index = inflight.findIndex(([payload, res, rej]) => request === payload);\\n    if (index !== -1) {\\n      let [_, res, rej] = inflight[index];\\n      inflight.splice(index, 1);\\n      if (data) {\\n        res(data);\\n      } else {\\n        rej(data);\\n      }\\n    }\\n  });\\n  return llm;\\n})();\\n\\nwindow.generateImage = function(prompt) {\\n  return '/api/ai/img?prompt=' + encodeURIComponent(prompt);\\n}\\n</script>\\n<title>Exercise Tracker</title>\\n</head>\\n<body>\\n<div id=\\\"root\\\"></div>\\n<script type=\\\"text/babel\\\">\\nconst { useState, useEffect, useRef } = React;\\n\\nfunction ExerciseTracker() {\\n  const [workoutData, setWorkoutData] = useDoc(\\\"workoutExercises\\\");\\n  const [newExercise, setNewExercise] = useState({\\n    name: \\\"\\\",\\n    description: \\\"\\\",\\n    bodyParts: [],\\n    equipment: []\\n  });\\n  const [bodyPartInput, setBodyPartInput] = useState(\\\"\\\");\\n  const [equipmentInput, setEquipmentInput] = useState(\\\"\\\");\\n  const [isLoading, setIsLoading] = useState(false);\\n  const [searchTerm, setSearchTerm] = useState(\\\"\\\");\\n  const [activeTab, setActiveTab] = useState(\\\"exercises\\\");\\n  const [selectedExercise, setSelectedExercise] = useState(null);\\n  const [bodyPartFilter, setBodyPartFilter] = useState(\\\"\\\");\\n  const [allBodyParts, setAllBodyParts] = useState([]);\\n\\n  // Update all body parts list whenever workout data changes\\n  useEffect(() => {\\n    if (Array.isArray(workoutData)) {\\n      const bodyPartsSet = new Set();\\n      workoutData.forEach(exercise => {\\n        if (Array.isArray(exercise.bodyParts)) {\\n          exercise.bodyParts.forEach(part => {\\n            if (part && part.name && typeof part.name === 'string') {\\n              bodyPartsSet.add(part.name.toLowerCase());\\n            }\\n          });\\n        }\\n      });\\n      setAllBodyParts(Array.from(bodyPartsSet).sort());\\n    }\\n  }, [workoutData]);\\n\\n  // Generate exercise suggestions\\n  const handleGenerateExercises = async () => {\\n    setIsLoading(true);\\n    try {\\n      const result = await llm({\\n        messages: [\\n          \\\"I need some exercise suggestions for a workout tracker app.\\\",\\n          \\\"I'd be happy to help! What kind of exercises are you looking for?\\\",\\n          \\\"Please generate 5 exercises with name, description, body parts targeted, and equipment needed.\\\"\\n        ]\\n      });\\n      \\n      // Parse the response and format it into our exercise structure\\n      const exercises = parseExercisesFromLLM(result);\\n      \\n      // Add the generated exercises to our workout data\\n      setWorkoutData(prev => {\\n        const currentExercises = Array.isArray(prev) ? prev : [];\\n        return [...currentExercises, ...exercises];\\n      });\\n    } catch (error) {\\n      console.error(\\\"Error generating exercises:\\\", error);\\n    } finally {\\n      setIsLoading(false);\\n    }\\n  };\\n\\n  // Parse LLM response into exercise objects\\n  const parseExercisesFromLLM = (response) => {\\n    try {\\n      // This is a simple parsing approach - adjust based on actual LLM response format\\n      const exercises = [];\\n      const lines = response.split('\\\\n');\\n      let currentExercise = null;\\n      \\n      for (const line of lines) {\\n        if (line.match(/^\\\\d+\\\\.\\\\s+/)) {\\n          // New exercise starts\\n          if (currentExercise) {\\n            exercises.push(currentExercise);\\n          }\\n          const name = line.replace(/^\\\\d+\\\\.\\\\s+/, '').trim();\\n          currentExercise = {\\n            name,\\n            description: \\\"\\\",\\n            bodyParts: [],\\n            equipment: []\\n          };\\n        } else if (currentExercise) {\\n          if (line.toLowerCase().includes(\\\"description\\\") || line.toLowerCase().includes(\\\":\\\")) {\\n            currentExercise.description += line.replace(/description:?/i, '').trim() + \\\" \\\";\\n          } else if (line.toLowerCase().includes(\\\"body part\\\") || line.toLowerCase().includes(\\\"target\\\")) {\\n            const parts = line.split(\\\":\\\")[1]?.trim().split(\\\",\\\") || [];\\n            currentExercise.bodyParts = parts.map(part => ({ name: part.trim() })).filter(part => part.name);\\n          } else if (line.toLowerCase().includes(\\\"equipment\\\")) {\\n            const equip = line.split(\\\":\\\")[1]?.trim().split(\\\",\\\") || [];\\n            currentExercise.equipment = equip.map(item => ({ name: item.trim() })).filter(item => item.name);\\n          } else {\\n            currentExercise.description += line.trim() + \\\" \\\";\\n          }\\n        }\\n      }\\n      \\n      if (currentExercise) {\\n        exercises.push(currentExercise);\\n      }\\n      \\n      return exercises;\\n    } catch (error) {\\n      console.error(\\\"Error parsing LLM response:\\\", error);\\n      return [];\\n    }\\n  };\\n\\n  const handleAddExercise = () => {\\n    if (!newExercise.name) return;\\n    \\n    setWorkoutData(prev => {\\n      const currentExercises = Array.isArray(prev) ? prev : [];\\n      return [...currentExercises, { ...newExercise }];\\n    });\\n    \\n    // Reset form\\n    setNewExercise({\\n      name: \\\"\\\",\\n      description: \\\"\\\",\\n      bodyParts: [],\\n      equipment: []\\n    });\\n    setBodyPartInput(\\\"\\\");\\n    setEquipmentInput(\\\"\\\");\\n  };\\n\\n  const handleAddBodyPart = () => {\\n    if (!bodyPartInput.trim()) return;\\n    setNewExercise(prev => ({\\n      ...prev,\\n      bodyParts: [...prev.bodyParts, { name: bodyPartInput.trim() }]\\n    }));\\n    setBodyPartInput(\\\"\\\");\\n  };\\n\\n  const handleAddEquipment = () => {\\n    if (!equipmentInput.trim()) return;\\n    setNewExercise(prev => ({\\n      ...prev,\\n      equipment: [...prev.equipment, { name: equipmentInput.trim() }]\\n    }));\\n    setEquipmentInput(\\\"\\\");\\n  };\\n\\n  const handleRemoveExercise = (index) => {\\n    setWorkoutData(prev => {\\n      if (!Array.isArray(prev)) return [];\\n      return prev.filter((_, i) => i !== index);\\n    });\\n  };\\n\\n  const handleRemoveBodyPart = (index) => {\\n    setNewExercise(prev => ({\\n      ...prev,\\n      bodyParts: prev.bodyParts.filter((_, i) => i !== index)\\n    }));\\n  };\\n\\n  const handleRemoveEquipment = (index) => {\\n    setNewExercise(prev => ({\\n      ...prev,\\n      equipment: prev.equipment.filter((_, i) => i !== index)\\n    }));\\n  };\\n\\n  const filteredExercises = () => {\\n    if (!Array.isArray(workoutData)) return [];\\n    \\n    return workoutData.filter(exercise => {\\n      // Filter by search term\\n      const matchesSearch = !searchTerm || \\n        exercise.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||\\n        exercise.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||\\n        (Array.isArray(exercise.bodyParts) && exercise.bodyParts.some(part => \\n          part && part.name && part.name.toLowerCase().includes(searchTerm.toLowerCase())\\n        )) ||\\n        (Array.isArray(exercise.equipment) && exercise.equipment.some(item => \\n          item && item.name && item.name.toLowerCase().includes(searchTerm.toLowerCase())\\n        ));\\n      \\n      // Filter by body part\\n      const matchesBodyPart = !bodyPartFilter || \\n        (Array.isArray(exercise.bodyParts) && exercise.bodyParts.some(part => \\n          part && part.name && part.name.toLowerCase() === bodyPartFilter.toLowerCase()\\n        ));\\n      \\n      return matchesSearch && matchesBodyPart;\\n    });\\n  };\\n\\n  const handleViewExercise = (exercise) => {\\n    setSelectedExercise(exercise);\\n    setActiveTab(\\\"details\\\");\\n  };\\n\\n  const handleClearFilters = () => {\\n    setSearchTerm(\\\"\\\");\\n    setBodyPartFilter(\\\"\\\");\\n  };\\n\\n  // Generate a cartoon/stick figure image prompt for exercises\\n  const generateExerciseImagePrompt = (exercise) => {\\n    const bodyParts = Array.isArray(exercise.bodyParts) \\n      ? exercise.bodyParts.map(part => part.name).join(', ')\\n      : '';\\n    \\n    const equipment = Array.isArray(exercise.equipment) \\n      ? exercise.equipment.map(item => item.name).join(', ')\\n      : '';\\n    \\n    return `Simple cartoon stick figure demonstrating ${exercise.name} exercise${bodyParts ? ' targeting ' + bodyParts : ''}${equipment ? ' using ' + equipment : ''}. Clean white background, minimalist style, clear demonstration.`;\\n  };\\n\\n  return (\\n    <div className=\\\"min-h-screen bg-gray-50 p-4\\\">\\n      <header className=\\\"bg-blue-600 text-white p-4 rounded-lg shadow-md mb-6\\\">\\n        <h1 className=\\\"text-2xl font-bold\\\">Exercise Tracker</h1>\\n        <p className=\\\"text-sm opacity-80\\\">Track your workouts and exercises</p>\\n      </header>\\n\\n      {/* Tab Navigation */}\\n      <div className=\\\"flex border-b border-gray-200 mb-6\\\">\\n        <button \\n          className={`px-4 py-2 font-medium ${activeTab === 'exercises' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500'}`}\\n          onClick={() => setActiveTab('exercises')}\\n        >\\n          Exercises\\n        </button>\\n        <button \\n          className={`px-4 py-2 font-medium ${activeTab === 'add' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500'}`}\\n          onClick={() => setActiveTab('add')}\\n        >\\n          Add Exercise\\n        </button>\\n        {selectedExercise && (\\n          <button \\n            className={`px-4 py-2 font-medium ${activeTab === 'details' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500'}`}\\n            onClick={() => setActiveTab('details')}\\n          >\\n            Exercise Details\\n          </button>\\n        )}\\n      </div>\\n\\n      {/* Exercise List Tab */}\\n      {activeTab === 'exercises' && (\\n        <div>\\n          <div className=\\\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6\\\">\\n            <div className=\\\"w-full md:w-auto flex flex-col md:flex-row gap-4\\\">\\n              {/* Search input */}\\n              <div className=\\\"relative flex-1 min-w-[250px]\\\">\\n                <input\\n                  type=\\\"text\\\"\\n                  placeholder=\\\"Search exercises...\\\"\\n                  className=\\\"w-full p-2 pl-8 border rounded-md\\\"\\n                  value={searchTerm}\\n                  onChange={(e) => setSearchTerm(e.target.value)}\\n                />\\n                <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-5 w-5 absolute left-2 top-2.5 text-gray-400\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                  <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\\\" />\\n                </svg>\\n              </div>\\n              \\n              {/* Body part filter dropdown */}\\n              <div className=\\\"min-w-[200px]\\\">\\n                <select\\n                  className=\\\"w-full p-2 border rounded-md bg-white\\\"\\n                  value={bodyPartFilter}\\n                  onChange={(e) => setBodyPartFilter(e.target.value)}\\n                >\\n                  <option value=\\\"\\\">All Body Parts</option>\\n                  {allBodyParts.map((part, index) => (\\n                    <option key={index} value={part}>\\n                      {part.charAt(0).toUpperCase() + part.slice(1)}\\n                    </option>\\n                  ))}\\n                </select>\\n              </div>\\n              \\n              {/* Clear filters button - only show if filters are active */}\\n              {(searchTerm || bodyPartFilter) && (\\n                <button\\n                  onClick={handleClearFilters}\\n                  className=\\\"px-3 py-2 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100\\\"\\n                >\\n                  Clear Filters\\n                </button>\\n              )}\\n            </div>\\n            \\n            <button\\n              className=\\\"w-full md:w-auto bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition flex items-center justify-center\\\"\\n              onClick={handleGenerateExercises}\\n              disabled={isLoading}\\n            >\\n              {isLoading ? (\\n                <>\\n                  <svg className=\\\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\">\\n                    <circle className=\\\"opacity-25\\\" cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"10\\\" stroke=\\\"currentColor\\\" strokeWidth=\\\"4\\\"></circle>\\n                    <path className=\\\"opacity-75\\\" fill=\\\"currentColor\\\" d=\\\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\\\"></path>\\n                  </svg>\\n                  Generating...\\n                </>\\n              ) : (\\n                <>Generate Exercises</>\\n              )}\\n            </button>\\n          </div>\\n\\n          <div className=\\\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\\\">\\n            {Array.isArray(workoutData) && workoutData.length > 0 ? (\\n              filteredExercises().length > 0 ? (\\n                filteredExercises().map((exercise, index) => (\\n                  <div key={index} className=\\\"bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition\\\">\\n                    {/* Square image preview */}\\n                    <div className=\\\"w-full aspect-square mb-3 overflow-hidden rounded-lg bg-gray-100\\\">\\n                      <img \\n                        src={generateImage(generateExerciseImagePrompt(exercise))} \\n                        alt={exercise.name}\\n                        className=\\\"w-full h-full object-cover\\\"\\n                        loading=\\\"lazy\\\"\\n                      />\\n                    </div>\\n                    \\n                    <div className=\\\"flex justify-between items-start\\\">\\n                      <h3 className=\\\"text-lg font-semibold text-gray-800\\\">{exercise.name}</h3>\\n                      <div className=\\\"flex space-x-2\\\">\\n                        <button \\n                          onClick={() => handleViewExercise(exercise)}\\n                          className=\\\"text-blue-500 hover:text-blue-700\\\"\\n                        >\\n                          <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-5 w-5\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                            <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\\\" />\\n                            <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\\\" />\\n                          </svg>\\n                        </button>\\n                        <button \\n                          onClick={() => handleRemoveExercise(index)}\\n                          className=\\\"text-red-500 hover:text-red-700\\\"\\n                        >\\n                          <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-5 w-5\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                            <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\" />\\n                          </svg>\\n                        </button>\\n                      </div>\\n                    </div>\\n                    <p className=\\\"text-gray-600 mt-2 line-clamp-2\\\">{exercise.description}</p>\\n                    \\n                    <div className=\\\"mt-3\\\">\\n                      <div className=\\\"flex flex-wrap gap-1 mb-2\\\">\\n                        {Array.isArray(exercise.bodyParts) && exercise.bodyParts.map((part, i) => (\\n                          part && part.name && (\\n                            <span \\n                              key={i} \\n                              className={`text-xs px-2 py-1 rounded cursor-pointer ${\\n                                bodyPartFilter === part.name.toLowerCase() \\n                                  ? 'bg-blue-600 text-white' \\n                                  : 'bg-blue-100 text-blue-800 hover:bg-blue-200'\\n                              }`}\\n                              onClick={() => setBodyPartFilter(part.name.toLowerCase())}\\n                            >\\n                              {part.name}\\n                            </span>\\n                          )\\n                        ))}\\n                      </div>\\n                      <div className=\\\"flex flex-wrap gap-1\\\">\\n                        {Array.isArray(exercise.equipment) && exercise.equipment.map((item, i) => (\\n                          item && item.name && (\\n                            <span key={i} className=\\\"bg-green-100 text-green-800 text-xs px-2 py-1 rounded\\\">\\n                              {item.name}\\n                            </span>\\n                          )\\n                        ))}\\n                      </div>\\n                    </div>\\n                  </div>\\n                ))\\n              ) : (\\n                <div className=\\\"col-span-full text-center py-10 bg-white rounded-lg shadow\\\">\\n                  <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-12 w-12 mx-auto text-gray-400\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                    <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\\\" />\\n                  </svg>\\n                  <h3 className=\\\"mt-2 text-lg font-medium text-gray-900\\\">No matching exercises</h3>\\n                  <p className=\\\"mt-1 text-sm text-gray-500\\\">Try adjusting your filters or search terms.</p>\\n                  <div className=\\\"mt-6\\\">\\n                    <button\\n                      onClick={handleClearFilters}\\n                      className=\\\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700\\\"\\n                    >\\n                      Clear Filters\\n                    </button>\\n                  </div>\\n                </div>\\n              )\\n            ) : (\\n              <div className=\\\"col-span-full text-center py-10 bg-white rounded-lg shadow\\\">\\n                <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-12 w-12 mx-auto text-gray-400\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                  <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M13 10V3L4 14h7v7l9-11h-7z\\\" />\\n                </svg>\\n                <h3 className=\\\"mt-2 text-lg font-medium text-gray-900\\\">No exercises yet</h3>\\n                <p className=\\\"mt-1 text-sm text-gray-500\\\">Get started by adding a new exercise or generating some suggestions.</p>\\n                <div className=\\\"mt-6\\\">\\n                  <button\\n                    onClick={() => setActiveTab('add')}\\n                    className=\\\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700\\\"\\n                  >\\n                    Add Exercise\\n                  </button>\\n                </div>\\n              </div>\\n            )}\\n          </div>\\n        </div>\\n      )}\\n\\n      {/* Add Exercise Tab */}\\n      {activeTab === 'add' && (\\n        <div className=\\\"bg-white p-6 rounded-lg shadow-md\\\">\\n          <h2 className=\\\"text-xl font-semibold mb-4\\\">Add New Exercise</h2>\\n          \\n          <div className=\\\"mb-4\\\">\\n            <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n              Exercise Name\\n            </label>\\n            <input\\n              type=\\\"text\\\"\\n              className=\\\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\\\"\\n              value={newExercise.name}\\n              onChange={(e) => setNewExercise({...newExercise, name: e.target.value})}\\n              placeholder=\\\"e.g., Push-ups\\\"\\n            />\\n          </div>\\n          \\n          <div className=\\\"mb-4\\\">\\n            <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n              Description\\n            </label>\\n            <textarea\\n              className=\\\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\\\"\\n              value={newExercise.description}\\n              onChange={(e) => setNewExercise({...newExercise, description: e.target.value})}\\n              placeholder=\\\"Describe the exercise and how to perform it correctly\\\"\\n              rows=\\\"3\\\"\\n            />\\n          </div>\\n          \\n          <div className=\\\"mb-4\\\">\\n            <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n              Body Parts\\n            </label>\\n            <div className=\\\"flex\\\">\\n              <input\\n                type=\\\"text\\\"\\n                className=\\\"shadow appearance-none border rounded-l w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\\\"\\n                value={bodyPartInput}\\n                onChange={(e) => setBodyPartInput(e.target.value)}\\n                placeholder=\\\"e.g., Chest\\\"\\n              />\\n              <button\\n                className=\\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r\\\"\\n                onClick={handleAddBodyPart}\\n              >\\n                Add\\n              </button>\\n            </div>\\n            <div className=\\\"flex flex-wrap gap-2 mt-2\\\">\\n              {newExercise.bodyParts.map((part, index) => (\\n                <div key={index} className=\\\"bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded flex items-center\\\">\\n                  {part.name}\\n                  <button \\n                    onClick={() => handleRemoveBodyPart(index)}\\n                    className=\\\"ml-1 text-blue-600 hover:text-blue-800\\\"\\n                  >\\n                    <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-3 w-3\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                      <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n                    </svg>\\n                  </button>\\n                </div>\\n              ))}\\n            </div>\\n          </div>\\n          \\n          <div className=\\\"mb-6\\\">\\n            <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n              Equipment\\n            </label>\\n            <div className=\\\"flex\\\">\\n              <input\\n                type=\\\"text\\\"\\n                className=\\\"shadow appearance-none border rounded-l w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\\\"\\n                value={equipmentInput}\\n                onChange={(e) => setEquipmentInput(e.target.value)}\\n                placeholder=\\\"e.g., Dumbbells\\\"\\n              />\\n              <button\\n                className=\\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r\\\"\\n                onClick={handleAddEquipment}\\n              >\\n                Add\\n              </button>\\n            </div>\\n            <div className=\\\"flex flex-wrap gap-2 mt-2\\\">\\n              {newExercise.equipment.map((item, index) => (\\n                <div key={index} className=\\\"bg-green-100 text-green-800 text-xs px-2 py-1 rounded flex items-center\\\">\\n                  {item.name}\\n                  <button \\n                    onClick={() => handleRemoveEquipment(index)}\\n                    className=\\\"ml-1 text-green-600 hover:text-green-800\\\"\\n                  >\\n                    <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-3 w-3\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                      <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n                    </svg>\\n                  </button>\\n                </div>\\n              ))}\\n            </div>\\n          </div>\\n          \\n          {/* Preview of the exercise image */}\\n          {newExercise.name && (\\n            <div className=\\\"mb-6\\\">\\n              <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n                Exercise Preview\\n              </label>\\n              <div className=\\\"w-full max-w-[200px] aspect-square overflow-hidden rounded-lg bg-gray-100 mx-auto\\\">\\n                <img \\n                  src={generateImage(generateExerciseImagePrompt(newExercise))} \\n                  alt={`Preview of ${newExercise.name}`}\\n                  className=\\\"w-full h-full object-cover\\\"\\n                />\\n              </div>\\n            </div>\\n          )}\\n          \\n          <div className=\\\"flex justify-end\\\">\\n            <button\\n              className=\\\"bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mr-2\\\"\\n              onClick={() => {\\n                setNewExercise({\\n                  name: \\\"\\\",\\n                  description: \\\"\\\",\\n                  bodyParts: [],\\n                  equipment: []\\n                });\\n                setBodyPartInput(\\\"\\\");\\n                setEquipmentInput(\\\"\\\");\\n                setActiveTab(\\\"exercises\\\");\\n              }}\\n            >\\n              Cancel\\n            </button>\\n            <button\\n              className=\\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\\\"\\n              onClick={handleAddExercise}\\n              disabled={!newExercise.name}\\n            >\\n              Save Exercise\\n            </button>\\n          </div>\\n        </div>\\n      )}\\n\\n      {/* Exercise Details Tab */}\\n      {activeTab === 'details' && selectedExercise && (\\n        <div className=\\\"bg-white p-6 rounded-lg shadow-md\\\">\\n          <div className=\\\"flex justify-between items-center mb-4\\\">\\n            <h2 className=\\\"text-2xl font-bold text-gray-800\\\">{selectedExercise.name}</h2>\\n            <button\\n              onClick={() => setActiveTab('exercises')}\\n              className=\\\"text-gray-500 hover:text-gray-700\\\"\\n            >\\n              <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-6 w-6\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n              </svg>\\n            </button>\\n          </div>\\n\\n          <div className=\\\"mb-6\\\">\\n            {/* Square image container */}\\n            <div className=\\\"w-full max-w-md mx-auto aspect-square mb-4 overflow-hidden rounded-lg\\\">\\n              <img \\n                src={generateImage(generateExerciseImagePrompt(selectedExercise))} \\n                alt={selectedExercise.name}\\n                className=\\\"w-full h-full object-cover\\\"\\n              />\\n            </div>\\n            \\n            <h3 className=\\\"text-lg font-semibold text-gray-700 mb-2\\\">Description</h3>\\n            <p className=\\\"text-gray-600 mb-4\\\">{selectedExercise.description}</p>\\n            \\n            <div className=\\\"grid grid-cols-1 md:grid-cols-2 gap-4\\\">\\n              <div>\\n                <h3 className=\\\"text-lg font-semibold text-gray-700 mb-2\\\">Body Parts</h3>\\n                <div className=\\\"flex flex-wrap gap-2\\\">\\n                  {Array.isArray(selectedExercise.bodyParts) && selectedExercise.bodyParts.length > 0 ? (\\n                    selectedExercise.bodyParts.map((part, index) => (\\n                      part && part.name && (\\n                        <span key={index} className=\\\"bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm\\\">\\n                          {part.name}\\n                        </span>\\n                      )\\n                    ))\\n                  ) : (\\n                    <p className=\\\"text-gray-500 italic\\\">No body parts specified</p>\\n                  )}\\n                </div>\\n              </div>\\n              \\n              <div>\\n                <h3 className=\\\"text-lg font-semibold text-gray-700 mb-2\\\">Equipment</h3>\\n                <div className=\\\"flex flex-wrap gap-2\\\">\\n                  {Array.isArray(selectedExercise.equipment) && selectedExercise.equipment.length > 0 ? (\\n                    selectedExercise.equipment.map((item, index) => (\\n                      item && item.name && (\\n                        <span key={index} className=\\\"bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm\\\">\\n                          {item.name}\\n                        </span>\\n                      )\\n                    ))\\n                  ) : (\\n                    <p className=\\\"text-gray-500 italic\\\">No equipment needed</p>\\n                  )}\\n                </div>\\n              </div>\\n            </div>\\n          </div>\\n          \\n          <div className=\\\"flex justify-end\\\">\\n            <button\\n              className=\\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\\\"\\n              onClick={() => setActiveTab('exercises')}\\n            >\\n              Back to Exercises\\n            </button>\\n          </div>\\n        </div>\\n      )}\\n    </div>\\n  );\\n}\\n\\nReactDOM.render(<ExerciseTracker />, document.getElementById('root'));\\n</script>\\n</body>\\n</html>\",\n",
      "          \"$context\": {\n",
      "            \"$alias\": {\n",
      "              \"cell\": {\n",
      "                \"/\": \"baedreiedh6j73hk3cx65jrw2d26h3spgidiqkcv436ehocl5dqh2mavyvy\"\n",
      "              },\n",
      "              \"path\": [\n",
      "                \"argument\"\n",
      "              ]\n",
      "            }\n",
      "          }\n",
      "        },\n",
      "        \"children\": []\n",
      "      }\n",
      "    }\n",
      ": docImpl: \n",
      "  entityId={\"/\":\"baedreiel5fi755jovxnou5bpdsuvcylibayiaaipaysi2tiip26ik3b6ya\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=[object Object]\n",
      "  ephemeral=false\n",
      "  value: {\n",
      "      \"$NAME\": \"Multi-User Chat App\",\n",
      "      \"$UI\": {\n",
      "        \"type\": \"vnode\",\n",
      "        \"name\": \"common-iframe\",\n",
      "        \"props\": {\n",
      "          \"src\": \"<html>\\n<head>\\n<script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\\\"></script>\\n<script src=\\\"https://unpkg.com/@babel/standalone/babel.min.js\\\"></script>\\n<script>\\nwindow.onerror = function (message, source, lineno, colno, error) {\\n  window.parent.postMessage(\\n    {\\n      type: \\\"error\\\",\\n      data: {\\n        description: message,\\n        source: source,\\n        lineno: lineno,\\n        colno: colno,\\n        stacktrace: error && error.stack ? error.stack : new Error().stack,\\n      },\\n    },\\n    \\\"*\\\",\\n  );\\n  return false;\\n};\\n\\nfunction useDoc(key) {\\n  const [doc, setDoc] = React.useState(undefined);\\n\\n  React.useEffect(() => {\\n    function handleMessage(event) {\\n      if (\\n        event.data &&\\n        event.data.type === \\\"update\\\" &&\\n        Array.isArray(event.data.data) &&\\n        event.data.data[0] === key\\n      ) {\\n        setDoc(event.data.data[1]);\\n      }\\n    }\\n\\n    window.addEventListener(\\\"message\\\", handleMessage);\\n    window.parent.postMessage({ type: \\\"subscribe\\\", data: key }, \\\"*\\\");\\n\\n    return () => {\\n      window.removeEventListener(\\\"message\\\", handleMessage);\\n      window.parent.postMessage({ type: \\\"unsubscribe\\\", data: key }, \\\"*\\\");\\n    };\\n  }, [key]);\\n\\n  const updateDoc = (newValue) => {\\n    if (typeof newValue === \\\"function\\\") {\\n      newValue = newValue(doc);\\n    }\\n    window.parent.postMessage({ type: \\\"write\\\", data: [key, newValue] }, \\\"*\\\");\\n  };\\n\\n  return [doc, updateDoc];\\n}\\n\\nwindow.llm = (() => {\\n  const inflight = [];\\n\\n  async function llm(payload) {\\n    return new Promise((resolve, reject) => {\\n      let stringified = JSON.stringify(payload);\\n      inflight.push([stringified, resolve, reject]);\\n      window.parent.postMessage({\\n        type: \\\"llm-request\\\",\\n        data: stringified,\\n      }, \\\"*\\\");\\n    });\\n  };\\n\\n  window.addEventListener(\\\"message\\\", e => {\\n    if (e.data.type !== \\\"llm-response\\\") {\\n      return;\\n    }\\n    let { request, data, error } = e.data;\\n    let index = inflight.findIndex(([payload, res, rej]) => request === payload);\\n    if (index !== -1) {\\n      let [_, res, rej] = inflight[index];\\n      inflight.splice(index, 1);\\n      if (data) {\\n        res(data);\\n      } else {\\n        rej(data);\\n      }\\n    }\\n  });\\n  return llm;\\n})();\\n\\nwindow.generateImage = function(prompt) {\\n  return '/api/ai/img?prompt=' + encodeURIComponent(prompt);\\n}\\n</script>\\n<title>Multi-User Chat App</title>\\n</head>\\n<body class=\\\"bg-gray-100 min-h-screen\\\">\\n<div id=\\\"root\\\"></div>\\n<script type=\\\"text/babel\\\">\\nconst { useState, useEffect, useRef } = React;\\n\\nfunction ChatApp() {\\n  const [chatData, setChatData] = useDoc(\\\"messages\\\");\\n  const [newMessage, setNewMessage] = useState(\\\"\\\");\\n  const [username, setUsername] = useState(\\\"\\\");\\n  const [isUsernameSet, setIsUsernameSet] = useState(false);\\n  const messagesEndRef = useRef(null);\\n  \\n  // Scroll to bottom of messages\\n  useEffect(() => {\\n    if (messagesEndRef.current) {\\n      messagesEndRef.current.scrollIntoView({ behavior: \\\"smooth\\\" });\\n    }\\n  }, [chatData]);\\n\\n  const handleSendMessage = () => {\\n    if (!newMessage.trim()) return;\\n    \\n    const message = {\\n      author: username,\\n      content: newMessage,\\n      timestamp: new Date().toISOString()\\n    };\\n    \\n    setChatData(prevData => {\\n      const messages = Array.isArray(prevData) ? [...prevData] : [];\\n      return [...messages, message];\\n    });\\n    \\n    setNewMessage(\\\"\\\");\\n  };\\n\\n  const handleKeyPress = (e) => {\\n    if (e.key === 'Enter' && !e.shiftKey) {\\n      e.preventDefault();\\n      handleSendMessage();\\n    }\\n  };\\n\\n  const setUserName = () => {\\n    if (username.trim()) {\\n      setIsUsernameSet(true);\\n    }\\n  };\\n\\n  const formatTime = (timestamp) => {\\n    if (!timestamp) return \\\"\\\";\\n    const date = new Date(timestamp);\\n    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\\n  };\\n\\n  if (!isUsernameSet) {\\n    return (\\n      <div className=\\\"flex items-center justify-center min-h-screen\\\">\\n        <div className=\\\"bg-white p-8 rounded-lg shadow-md w-full max-w-md\\\">\\n          <h1 className=\\\"text-2xl font-bold text-center mb-6 text-indigo-600\\\">Join the Chat</h1>\\n          <div className=\\\"mb-4\\\">\\n            <label className=\\\"block text-gray-700 text-sm font-bold mb-2\\\">\\n              Choose a username\\n            </label>\\n            <input\\n              type=\\\"text\\\"\\n              value={username}\\n              onChange={(e) => setUsername(e.target.value)}\\n              className=\\\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\\\"\\n              placeholder=\\\"Your name\\\"\\n              onKeyPress={(e) => e.key === 'Enter' && setUserName()}\\n            />\\n          </div>\\n          <button\\n            onClick={setUserName}\\n            className=\\\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full\\\"\\n          >\\n            Join Chat\\n          </button>\\n        </div>\\n      </div>\\n    );\\n  }\\n\\n  return (\\n    <div className=\\\"container mx-auto max-w-4xl h-screen flex flex-col p-4\\\">\\n      <header className=\\\"bg-indigo-600 text-white p-4 rounded-t-lg shadow-md\\\">\\n        <h1 className=\\\"text-2xl font-bold\\\">Multi-User Chat</h1>\\n        <p className=\\\"text-sm\\\">Logged in as: {username}</p>\\n      </header>\\n      \\n      <div className=\\\"flex-grow bg-white rounded-b-lg shadow-md overflow-hidden flex flex-col\\\">\\n        <div className=\\\"flex-grow p-4 overflow-y-auto\\\">\\n          {!chatData || chatData.length === 0 ? (\\n            <div className=\\\"text-center text-gray-500 my-8\\\">\\n              No messages yet. Be the first to say hello!\\n            </div>\\n          ) : (\\n            <div className=\\\"space-y-4\\\">\\n              {chatData.map((message, index) => (\\n                <div \\n                  key={index} \\n                  className={`flex ${message.author === username ? 'justify-end' : 'justify-start'}`}\\n                >\\n                  <div \\n                    className={`max-w-xs md:max-w-md rounded-lg px-4 py-2 ${\\n                      message.author === username \\n                        ? 'bg-indigo-500 text-white rounded-br-none' \\n                        : 'bg-gray-200 text-gray-800 rounded-bl-none'\\n                    }`}\\n                  >\\n                    <div className=\\\"font-bold text-sm\\\">\\n                      {message.author}\\n                    </div>\\n                    <p className=\\\"text-sm whitespace-pre-wrap break-words\\\">{message.content}</p>\\n                    <div className={`text-xs mt-1 ${message.author === username ? 'text-indigo-100' : 'text-gray-500'}`}>\\n                      {formatTime(message.timestamp)}\\n                    </div>\\n                  </div>\\n                </div>\\n              ))}\\n              <div ref={messagesEndRef} />\\n            </div>\\n          )}\\n        </div>\\n        \\n        <div className=\\\"border-t p-4 bg-gray-50\\\">\\n          <div className=\\\"flex\\\">\\n            <textarea\\n              value={newMessage}\\n              onChange={(e) => setNewMessage(e.target.value)}\\n              onKeyPress={handleKeyPress}\\n              className=\\\"flex-grow border rounded-l-lg p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500\\\"\\n              placeholder=\\\"Type a message...\\\"\\n              rows=\\\"2\\\"\\n            />\\n            <button\\n              onClick={handleSendMessage}\\n              disabled={!newMessage.trim()}\\n              className={`px-4 py-2 rounded-r-lg ${\\n                newMessage.trim() \\n                  ? 'bg-indigo-600 hover:bg-indigo-700 text-white' \\n                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'\\n              }`}\\n            >\\n              Send\\n            </button>\\n          </div>\\n          <p className=\\\"text-xs text-gray-500 mt-1\\\">Press Enter to send, Shift+Enter for new line</p>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\\nReactDOM.createRoot(document.getElementById('root')).render(<ChatApp />);\\n</script>\\n</body>\\n</html>\",\n",
      "          \"$context\": {\n",
      "            \"$alias\": {\n",
      "              \"cell\": {\n",
      "                \"/\": \"baedreiewvjjphy2id2dqsubt4aim66b2sleps4cs7n2mae6hftgthgcc2a\"\n",
      "              },\n",
      "              \"path\": [\n",
      "                \"argument\"\n",
      "              ]\n",
      "            }\n",
      "          }\n",
      "        },\n",
      "        \"children\": []\n",
      "      }\n",
      "    }\n",
      ": docImpl: \n",
      "  entityId={\"/\":\"baedreid2qh2k6gcie4ezckqukkplpeqlz7jnxirt7aehxdcw4sfg5aszh4\"}\n",
      "  space=common-knowledge\n",
      "  sourceCell=[object Object]\n",
      "  ephemeral=false\n",
      "  value: {\n",
      "      \"$NAME\": \"Origami Visualizer\",\n",
      "      \"$UI\": {\n",
      "        \"type\": \"vnode\",\n",
      "        \"name\": \"common-iframe\",\n",
      "        \"props\": {\n",
      "          \"src\": \"<html>\\n<head>\\n<script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\\\"></script>\\n<script crossorigin src=\\\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\\\"></script>\\n<script src=\\\"https://unpkg.com/@babel/standalone/babel.min.js\\\"></script>\\n<script>\\nwindow.onerror = function (message, source, lineno, colno, error) {\\n  window.parent.postMessage(\\n    {\\n      type: \\\"error\\\",\\n      data: {\\n        description: message,\\n        source: source,\\n        lineno: lineno,\\n        colno: colno,\\n        stacktrace: error && error.stack ? error.stack : new Error().stack,\\n      },\\n    },\\n    \\\"*\\\",\\n  );\\n  return false;\\n};\\n\\nfunction useDoc(key) {\\n  const [doc, setDoc] = React.useState(undefined);\\n\\n  React.useEffect(() => {\\n    function handleMessage(event) {\\n      if (\\n        event.data &&\\n        event.data.type === \\\"update\\\" &&\\n        Array.isArray(event.data.data) &&\\n        event.data.data[0] === key\\n      ) {\\n        setDoc(event.data.data[1]);\\n      }\\n    }\\n\\n    window.addEventListener(\\\"message\\\", handleMessage);\\n    window.parent.postMessage({ type: \\\"subscribe\\\", data: key }, \\\"*\\\");\\n\\n    return () => {\\n      window.removeEventListener(\\\"message\\\", handleMessage);\\n      window.parent.postMessage({ type: \\\"unsubscribe\\\", data: key }, \\\"*\\\");\\n    };\\n  }, [key]);\\n\\n  const updateDoc = (newValue) => {\\n    if (typeof newValue === \\\"function\\\") {\\n      newValue = newValue(doc);\\n    }\\n    window.parent.postMessage({ type: \\\"write\\\", data: [key, newValue] }, \\\"*\\\");\\n  };\\n\\n  return [doc, updateDoc];\\n}\\n\\nwindow.llm = (() => {\\n  const inflight = [];\\n\\n  async function llm(payload) {\\n    return new Promise((resolve, reject) => {\\n      let stringified = JSON.stringify(payload);\\n      inflight.push([stringified, resolve, reject]);\\n      window.parent.postMessage({\\n        type: \\\"llm-request\\\",\\n        data: stringified,\\n      }, \\\"*\\\");\\n    });\\n  };\\n\\n  window.addEventListener(\\\"message\\\", e => {\\n    if (e.data.type !== \\\"llm-response\\\") {\\n      return;\\n    }\\n    let { request, data, error } = e.data;\\n    let index = inflight.findIndex(([payload, res, rej]) => request === payload);\\n    if (index !== -1) {\\n      let [_, res, rej] = inflight[index];\\n      inflight.splice(index, 1);\\n      if (data) {\\n        res(data);\\n      } else {\\n        rej(data);\\n      }\\n    }\\n  });\\n  return llm;\\n})();\\n\\nwindow.generateImage = function(prompt) {\\n  return '/api/ai/img?prompt=' + encodeURIComponent(prompt);\\n}\\n</script>\\n<title>Origami Visualizer</title>\\n</head>\\n<body>\\n<div id=\\\"root\\\"></div>\\n<script type=\\\"text/babel\\\">\\nconst { useState, useEffect, useRef } = React;\\n\\nfunction OrigamiVisualizer() {\\n  const [gallery, setGallery] = useDoc(\\\"gallery\\\");\\n  const [loading, setLoading] = useState(false);\\n  const [error, setError] = useState(null);\\n  const [prompt, setPrompt] = useState(\\\"\\\");\\n  const [selectedDesign, setSelectedDesign] = useState(null);\\n  const [initialized, setInitialized] = useState(false);\\n  const svgContainerRef = useRef(null);\\n\\n  // Initialize gallery if it doesn't exist, but only after we've received data from useDoc\\n  useEffect(() => {\\n    // Only proceed if we've received a value from useDoc (even if it's null)\\n    if (gallery === undefined) {\\n      return; // Still waiting for initial data\\n    }\\n    \\n    // If gallery is null (doesn't exist yet), create it\\n    if (gallery === null && !initialized) {\\n      setGallery({\\n        id: crypto.randomUUID(),\\n        name: \\\"My Origami Gallery\\\",\\n        description: \\\"A collection of AI-generated origami designs\\\",\\n        creationDate: new Date().toISOString(),\\n        modificationDate: new Date().toISOString(),\\n        origamiDesigns: []\\n      });\\n      setInitialized(true);\\n    } \\n    // If gallery exists and has designs, select the first one by default\\n    else if (gallery && gallery.origamiDesigns && gallery.origamiDesigns.length > 0 && !selectedDesign) {\\n      setSelectedDesign(gallery.origamiDesigns[0]);\\n      setInitialized(true);\\n    } else {\\n      setInitialized(true);\\n    }\\n  }, [gallery, setGallery, selectedDesign, initialized]);\\n\\n  const generateOrigami = async () => {\\n    if (!prompt.trim()) {\\n      setError(\\\"Please enter a prompt\\\");\\n      return;\\n    }\\n\\n    setLoading(true);\\n    setError(null);\\n\\n    try {\\n      const promptPayload = {\\n        model: \\\"anthropic:claude-3-7-sonnet-latest\\\",\\n        messages: [\\n          \\\"You are an expert in origami design. Generate SVG code for origami designs based on user prompts.\\\",\\n          \\\"I'll generate SVG code for origami designs. The SVG should be simple, clean, and represent folding patterns.\\\",\\n          `Create an origami design for: ${prompt}. Provide only the SVG code with viewBox and appropriate dimensions. Use simple lines, dashed lines for folds, and minimal styling. The SVG should represent a folding pattern diagram, not the final 3D result.`\\n        ]\\n      };\\n\\n      const svgData = await llm(promptPayload);\\n      \\n      // Extract SVG code from the response\\n      const svgMatch = svgData.match(/<svg[\\\\s\\\\S]*?<\\\\/svg>/);\\n      const extractedSvg = svgMatch ? svgMatch[0] : null;\\n      \\n      if (!extractedSvg) {\\n        throw new Error(\\\"Could not extract valid SVG from the response\\\");\\n      }\\n\\n      // Add the new design to the gallery\\n      const newDesign = {\\n        id: crypto.randomUUID(),\\n        name: prompt,\\n        description: `Origami design for \\\"${prompt}\\\"`,\\n        svgData: extractedSvg,\\n        creationDate: new Date().toISOString(),\\n        modificationDate: new Date().toISOString(),\\n        userPrompt: {\\n          id: crypto.randomUUID(),\\n          promptText: prompt,\\n          creationDate: new Date().toISOString()\\n        }\\n      };\\n\\n      setGallery(prevGallery => {\\n        if (!prevGallery) {\\n          // If gallery doesn't exist yet, create it with this design\\n          return {\\n            id: crypto.randomUUID(),\\n            name: \\\"My Origami Gallery\\\",\\n            description: \\\"A collection of AI-generated origami designs\\\",\\n            creationDate: new Date().toISOString(),\\n            modificationDate: new Date().toISOString(),\\n            origamiDesigns: [newDesign]\\n          };\\n        }\\n        \\n        return {\\n          ...prevGallery,\\n          modificationDate: new Date().toISOString(),\\n          origamiDesigns: [...(prevGallery.origamiDesigns || []), newDesign]\\n        };\\n      });\\n\\n      setSelectedDesign(newDesign);\\n      setPrompt(\\\"\\\");\\n    } catch (err) {\\n      setError(\\\"Failed to generate origami design: \\\" + (err.message || \\\"Unknown error\\\"));\\n      console.error(\\\"Error generating origami:\\\", err);\\n    } finally {\\n      setLoading(false);\\n    }\\n  };\\n\\n  const deleteDesign = (id) => {\\n    setGallery(prevGallery => {\\n      if (!prevGallery) return null;\\n      \\n      const updatedDesigns = prevGallery.origamiDesigns.filter(design => design.id !== id);\\n      \\n      if (selectedDesign && selectedDesign.id === id) {\\n        setSelectedDesign(updatedDesigns.length > 0 ? updatedDesigns[0] : null);\\n      }\\n      \\n      return {\\n        ...prevGallery,\\n        modificationDate: new Date().toISOString(),\\n        origamiDesigns: updatedDesigns\\n      };\\n    });\\n  };\\n\\n  // Display the selected design's SVG\\n  useEffect(() => {\\n    if (svgContainerRef.current && selectedDesign) {\\n      svgContainerRef.current.innerHTML = selectedDesign.svgData;\\n    }\\n  }, [selectedDesign]);\\n\\n  // Show loading state while waiting for initial data\\n  if (gallery === undefined) {\\n    return (\\n      <div className=\\\"flex items-center justify-center min-h-screen\\\">\\n        <div className=\\\"text-center\\\">\\n          <div className=\\\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4\\\"></div>\\n          <p className=\\\"text-gray-600\\\">Loading gallery data...</p>\\n        </div>\\n      </div>\\n    );\\n  }\\n\\n  return (\\n    <div className=\\\"container mx-auto px-4 py-8\\\">\\n      <header className=\\\"mb-8 text-center\\\">\\n        <h1 className=\\\"text-3xl font-bold text-gray-800 mb-2\\\">\\n          {gallery && gallery.name ? gallery.name : \\\"Origami Visualizer\\\"}\\n        </h1>\\n        <p className=\\\"text-gray-600\\\">\\n          {gallery && gallery.description \\n            ? gallery.description \\n            : \\\"Generate and visualize origami designs using AI\\\"}\\n        </p>\\n      </header>\\n\\n      <div className=\\\"mb-8\\\">\\n        <div className=\\\"flex flex-col md:flex-row gap-4\\\">\\n          <input\\n            type=\\\"text\\\"\\n            value={prompt}\\n            onChange={(e) => setPrompt(e.target.value)}\\n            placeholder=\\\"Describe an origami design (e.g., crane, flower, boat)...\\\"\\n            className=\\\"flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\\\"\\n            disabled={loading}\\n          />\\n          <button\\n            onClick={generateOrigami}\\n            disabled={loading || !prompt.trim()}\\n            className={`px-6 py-3 rounded-lg font-medium ${\\n              loading || !prompt.trim()\\n                ? \\\"bg-gray-300 text-gray-500 cursor-not-allowed\\\"\\n                : \\\"bg-blue-600 text-white hover:bg-blue-700\\\"\\n            }`}\\n          >\\n            {loading ? (\\n              <span className=\\\"flex items-center\\\">\\n                <svg className=\\\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                  <circle className=\\\"opacity-25\\\" cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"10\\\" stroke=\\\"currentColor\\\" strokeWidth=\\\"4\\\"></circle>\\n                  <path className=\\\"opacity-75\\\" fill=\\\"currentColor\\\" d=\\\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\\\"></path>\\n                </svg>\\n                Generating...\\n              </span>\\n            ) : (\\n              \\\"Generate Origami\\\"\\n            )}\\n          </button>\\n        </div>\\n        {error && <p className=\\\"mt-2 text-red-500\\\">{error}</p>}\\n      </div>\\n\\n      <div className=\\\"grid grid-cols-1 md:grid-cols-3 gap-6\\\">\\n        {/* Gallery sidebar */}\\n        <div className=\\\"md:col-span-1 bg-gray-50 p-4 rounded-lg\\\">\\n          <h2 className=\\\"text-xl font-semibold mb-4\\\">Gallery</h2>\\n          {gallery && gallery.origamiDesigns && gallery.origamiDesigns.length > 0 ? (\\n            <div className=\\\"space-y-3 max-h-[600px] overflow-y-auto pr-2\\\">\\n              {gallery.origamiDesigns.map((design) => (\\n                <div \\n                  key={design.id} \\n                  className={`p-3 rounded-lg cursor-pointer transition-colors ${\\n                    selectedDesign && selectedDesign.id === design.id\\n                      ? \\\"bg-blue-100 border border-blue-300\\\"\\n                      : \\\"bg-white border border-gray-200 hover:bg-gray-100\\\"\\n                  }`}\\n                  onClick={() => setSelectedDesign(design)}\\n                >\\n                  <div className=\\\"flex justify-between items-start\\\">\\n                    <h3 className=\\\"font-medium text-gray-800\\\">{design.name}</h3>\\n                    <button \\n                      onClick={(e) => {\\n                        e.stopPropagation();\\n                        deleteDesign(design.id);\\n                      }}\\n                      className=\\\"text-gray-400 hover:text-red-500\\\"\\n                      title=\\\"Delete design\\\"\\n                    >\\n                      <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-5 w-5\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                        <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={2} d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\" />\\n                      </svg>\\n                    </button>\\n                  </div>\\n                  <p className=\\\"text-sm text-gray-500 mt-1\\\">\\n                    {new Date(design.creationDate).toLocaleDateString()}\\n                  </p>\\n                </div>\\n              ))}\\n            </div>\\n          ) : (\\n            <div className=\\\"text-center py-8 text-gray-500\\\">\\n              <p>No designs yet. Create your first origami design!</p>\\n            </div>\\n          )}\\n        </div>\\n\\n        {/* Design viewer */}\\n        <div className=\\\"md:col-span-2 bg-white border border-gray-200 rounded-lg p-6\\\">\\n          {selectedDesign ? (\\n            <div>\\n              <h2 className=\\\"text-2xl font-semibold mb-2\\\">{selectedDesign.name}</h2>\\n              <p className=\\\"text-gray-600 mb-4\\\">{selectedDesign.description}</p>\\n              \\n              <div className=\\\"bg-gray-50 p-4 rounded-lg mb-4\\\">\\n                <p className=\\\"text-sm text-gray-500 mb-2\\\">\\n                  <span className=\\\"font-medium\\\">Prompt:</span> {selectedDesign.userPrompt.promptText}\\n                </p>\\n                <p className=\\\"text-sm text-gray-500\\\">\\n                  <span className=\\\"font-medium\\\">Created:</span> {new Date(selectedDesign.creationDate).toLocaleString()}\\n                </p>\\n              </div>\\n              \\n              <div className=\\\"border border-gray-200 rounded-lg p-4 bg-white flex justify-center items-center min-h-[300px]\\\" ref={svgContainerRef}>\\n                {/* SVG will be inserted here */}\\n              </div>\\n            </div>\\n          ) : (\\n            <div className=\\\"flex flex-col items-center justify-center h-[400px] text-gray-500\\\">\\n              <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" className=\\\"h-16 w-16 mb-4\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke=\\\"currentColor\\\">\\n                <path strokeLinecap=\\\"round\\\" strokeLinejoin=\\\"round\\\" strokeWidth={1} d=\\\"M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\\\" />\\n              </svg>\\n              <p className=\\\"text-lg\\\">Select a design from the gallery or create a new one</p>\\n            </div>\\n          )}\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\\nReactDOM.render(<OrigamiVisualizer />, document.getElementById(\\\"root\\\"));\\n</script>\\n</body>\\n</html>\",\n",
      "          \"$context\": {\n",
      "            \"$alias\": {\n",
      "              \"cell\": {\n",
      "                \"/\": \"baedreib3n7bscm5fre6c5rskgpa7xzbd6fx6g3fbmiv7fwor5nsqk4s5au\"\n",
      "              },\n",
      "              \"path\": [\n",
      "                \"argument\"\n",
      "              ]\n",
      "            }\n",
      "          }\n",
      "        },\n",
      "        \"children\": []\n",
      "      }\n",
      "    }\n"
     ]
    }
   ],
   "source": [
    "import { getDocByEntityId } from \"../runner/src/doc-map.ts\";\n",
    "\n",
    "// lets load and look at each charm in the charms arrays\n",
    "const allCharmsArray: CellLink[] = charmsDoc.value;\n",
    "allCharmsArray.forEach(async (charmRef) => {\n",
    "  // pull out the entity id from each element of the array\n",
    "  const charmCellId: EntityId = charmRef[\"cell\"];\n",
    "\n",
    "  // create the empty docImpl that has the EntityId in it\n",
    "  const charmCellDoc = getDocByEntityId(SPACE, charmCellId);\n",
    "  logDocImpl(charmCellDoc);\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "c29819f8-0a4b-4b8c-bc8f-5c5dc677127a",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "ename": "ReferenceError",
     "evalue": "manager is not defined",
     "output_type": "error",
     "traceback": [
      "Stack trace:",
      "ReferenceError: manager is not defined",
      "    at <anonymous>:3:1"
     ]
    }
   ],
   "source": [
    "// lets see what the $UI.props.$context.$alias is about\n",
    "\n",
    "//log(charm); //charm[\"$UI\"]//.props[\"$context\"][\"$alias\"]\n",
    "manager.runPersistent(allCharmsArray[0].cell.value, undefined, \"foo\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "44a2494d-feab-4db1-bce1-7ec8a7fc98be",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "382aeb8b-d07f-468e-a37f-63b32f85455c",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f03a0bcb-6c5d-47f1-a0d5-3c3c211da20e",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6231d245-6e6e-4929-aae0-6d808a7153f4",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dd377c84-2a3e-4b24-91b0-083e623caa61",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Deno",
   "language": "typescript",
   "name": "deno"
  },
  "language_info": {
   "codemirror_mode": "typescript",
   "file_extension": ".ts",
   "mimetype": "text/x.typescript",
   "name": "typescript",
   "nbconvert_exporter": "script",
   "pygments_lexer": "typescript",
   "version": "5.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}