@surph_ai/cli 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surph_ai/cli",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "main": "index.js",
   "types": "./types.d.ts",

package/toolserver/app.js

@@ -12,10 +12,12 @@ configureApp(app, {
 
 app.use(config)
 
+const rpc = require('./routes/rpc')
 const api = require('./routes/api')
 const tool = require('./routes/tool')
 const index = require('./routes/index')
 
+app.use('/rpc', rpc)
 app.use('/api', api)
 app.use('/tools', tool)
 app.use('/', index)

package/toolserver/routes/api.js

@@ -7,6 +7,12 @@ const BASE_URL = 'https://surph.ai'
 // const BASE_URL = 'http://localhost:3005' // for local testing
 const PATH_RE = /^\/[a-zA-Z0-9_\-/]+$/
 
+// `req.url` includes the query string (e.g. `/tides?slug=rss-reader`) while
+// `req.path` drops it. Upstream handlers like /api/tides key off `?slug=…`;
+// dropping the query silently returned the default (first) record, which
+// mismatched every non-first tide the user clicked.
+const buildUpstreamUrl = (req) => `${BASE_URL}/api${req.url}`
+
 router.post('*', async (req, res, next) => {
   const path = req.path
   if (!PATH_RE.test(path) || path.includes('//') || path.includes('..')) {
@@ -15,7 +21,7 @@ router.post('*', async (req, res, next) => {
   }
 
   try {
-    const url = `${BASE_URL}/api${path}`
+    const url = buildUpstreamUrl(req)
     const upstream = await fetch(`${url}`, {
       method: 'POST',
       body: JSON.stringify(req.body || {}),
@@ -43,7 +49,7 @@ router.get('*', async (req, res, next) => {
   }
 
   try {
-    const url = `${BASE_URL}/api${path}`
+    const url = buildUpstreamUrl(req)
     const upstream = await fetch(`${url}`, {
       method: 'GET',
       headers: {

package/toolserver/routes/index.js

@@ -2,8 +2,13 @@ const { Router } = require('express')
 const os = require('os')
 const path = require('path')
 const fs = require('fs')
-const router = Router()
+const userConfiguration = require('../../utils/userConfiguration')
 const manifest = require('../../../../../manifest.json')
+const { getCanvasPickerSource } = require('../../utils/canvasPickerSource')
+
+const SURPH_S3_URL = 'https://surph.s3.us-east-1.amazonaws.com'
+
+const router = Router()
 
 // Written by `surph login` — user-scoped, cross-platform via os.homedir().
 // Resolves to ~/.surph/session.json on mac/linux and C:\Users\<name>\.surph\
@@ -22,20 +27,6 @@ const readSurphSession = () => {
   }
 }
 
-const fetchUser = async (username) => {
-  try {
-    const response = await fetch(`https://surph.ai/api/users?username=${username}`)
-    const { payload: users } = await response.json()
-    if (users.length === 0) {
-      throw new Error(`User ${username} not found.`)
-    }
-
-    return users[0]
-  } catch (error) {
-    return null
-  }
-}
-
 router.get('/', async (req, res, next) => {
   try {
     const toolSlugs = Object.keys(manifest)
@@ -44,14 +35,37 @@ router.get('/', async (req, res, next) => {
     // production shape the web app consumes — useSettings.js reads
     // `preloaded.user` and downstream code branches on `_id`.
     const session = readSurphSession()
-    const user = session?.userId? await fetchUser(session.username) : null
+    const { user, contexts, tides, tools } = session?.userId? await userConfiguration({ id: session.userId }) : null
+    const creator = {
+      _id: user._id,
+      username: user.username,
+      avatar: user.avatar
+    }
+
+    const localTools = toolSlugs.map(slug => {
+      const tool = manifest[slug]
+      let isTideTool = false
+      tides.forEach(t => {
+        if (!t.tools)
+          return
+      
+        if (t.tools.indexOf(slug) > -1) {
+          isTideTool = true
+        }
+      })
+
+      return isTideTool ? { ...tool, creator, origin: 'tide' } : { ...tool, creator }
+    })
 
     const context = {
       env: 'sandbox',
       mode: 'desktop',
-      config: { ...req.config, entry: 'web' },
-      tools: toolSlugs.map(slug => (manifest[slug])),
       user,
+      config: { ...req.config, entry: 'web' },
+      contexts,
+      tides,
+      tools: localTools // sdk mode is for local tool development only, do not clutter with live tools.
+      // tools: [ ...tools, ...localTools ]
     }
 
     res.render('index', {
@@ -66,4 +80,81 @@ router.get('/', async (req, res, next) => {
   }
 })
 
+
+// Only surph-bucket URLs are fetchable via `?src`. Prevents SSRF (blind
+// requests to internal metadata endpoints, etc). Keep this narrow — widening
+// the allowlist is trivial later; narrowing after external URLs go live is not.
+const TEMPLATE_SRC_ORIGIN = 'https://surph.s3.us-east-1.amazonaws.com/'
+
+router.get('/template/:tide/:slug', async (req, res, next) => {
+  try {
+    const resp = await fetch(`${SURPH_S3_URL}/tides/${req.params.tide}/templates/${req.params.slug}.json`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    })
+
+    if (!resp.ok) {
+      throw new Error(`HTTP ${resp.status}: ${resp.statusText}`)
+    }
+
+    const template = await resp.json();
+    // Optional static-render mode: `?src=<s3-json-url>` fetches the JSON
+    // server-side and splices it into `template.sampleData`, which the
+    // existing canvas.html hydration path already reads. Turns any authored
+    // template into a URL-driven static view with zero component changes.
+    // Fetch runs server-side so no CORS setup on S3, and the origin allowlist
+    // above blocks SSRF.
+    const src = typeof req.query?.src === 'string' ? req.query.src : null;
+    if (src) {
+      if (!src.startsWith(TEMPLATE_SRC_ORIGIN)) {
+        res.status(400).json({
+          success: false,
+          error: `src must start with ${TEMPLATE_SRC_ORIGIN}`,
+        });
+        return;
+      }
+      try {
+        const dataResp = await fetch(src, {
+          method: 'GET',
+          headers: { 'Accept': 'application/json' },
+        });
+        if (dataResp.ok) {
+          const data = await dataResp.json();
+          if (data && typeof data === 'object' && !Array.isArray(data)) {
+            template.sampleData = data;
+          }
+        } else {
+          console.warn(`[template] src fetch non-OK: HTTP ${dataResp.status} for ${src}`);
+        }
+      } catch (err) {
+        console.warn(`[template] src fetch failed for ${src}: ${err?.message}`);
+      }
+      // Whole point of ?src is freshness — never cache the host page.
+      res.set('Cache-Control', 'no-store');
+    }
+
+    // Mustache renders objects as `[object Object]`, so pre-stringify for the
+    // inline script hydration. Escape `<` to `\u003c` so a stray `</script>`
+    // in template.code (arbitrary user JS) can't terminate the script tag.
+    const templateJson = JSON.stringify(template).replace(/</g, '\\u003c');
+    const tideSlug = JSON.stringify(req.params.tide);
+
+    res.render('canvas', {
+      template,
+      templateJson,
+      tideSlug,
+      CDN: 'https://surph.s3.us-east-1.amazonaws.com/webapp/static'
+      // pickerSource: getCanvasPickerSource()
+    })
+  } catch (error) {
+    console.error('Error fetching template: ', error.message)
+
+    res.status(500).json({
+      success: false,
+      error: error.message,
+    })
+  }
+})
+
+
 module.exports = router

package/toolserver/routes/rpc.js

@@ -0,0 +1,28 @@
+const { Router } = require('express');
+const router = Router();
+const SURPH_RPC_URL = 'https://rpc.surph.ai';
+// const SURPH_RPC_URL = 'http://localhost:5000' // for local testing
+const PATH_RE = /^\/[a-zA-Z0-9_\-/]+$/;
+router.post('*', async (req, res) => {
+    const path = req.path;
+    if (!PATH_RE.test(path) || path.includes('//') || path.includes('..')) {
+        res.status(400).json({ error: 'invalid path' });
+        return;
+    }
+    try {
+        const upstream = await fetch(`${SURPH_RPC_URL}${path}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(req.body || {}),
+        });
+        const body = await upstream.text();
+        const contentType = upstream.headers.get('content-type');
+        if (contentType)
+            res.set('Content-Type', contentType);
+        res.status(upstream.status).send(body);
+    }
+    catch (e) {
+        res.status(502).json({ error: e?.message || 'upstream RPC failed' });
+    }
+});
+module.exports = router;

package/toolserver/templates/canvas.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-Language" content="en" />
+
+  <title>{{ template.name }}</title>
+  <link rel="shortcut icon" href="https://surph.s3.us-east-1.amazonaws.com/admin/assets/icon-green.svg">
+
+  <!-- Keep in sync with TAILWIND_STYLESHEET in src/features/tide/components/TemplateCanvas.jsx -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
+
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      min-height: 100vh;
+      background: #ffffff;
+      font-family: system-ui, -apple-system, Inter, Arial, sans-serif;
+      color: #1e0a3c;
+    }
+    #canvas-mount {
+      max-width: 100%;
+      margin: 0px auto;
+      padding: 0 0px 0px 0;
+    }
+    #canvas-error {
+      max-width: 100%;
+      margin: 40px auto;
+      padding: 16px;
+      background: #fff;
+      border: 1px solid #e5b5b5;
+      border-radius: 8px;
+      color: #a03030;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.85rem;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+  <div id="canvas-mount"></div>
+
+  <script type="text/javascript">
+    window.__TEMPLATE__ = {{{ templateJson }}};
+    window.__CANVAS_TIDE__ = {{{ tideSlug }}};
+  </script>
+  <script type="text/javascript">
+    (function () {
+      var mount = document.getElementById('canvas-mount');
+      var showError = function (msg) {
+        var box = document.createElement('div');
+        box.id = 'canvas-error';
+        box.textContent = msg;
+        mount.parentNode.insertBefore(box, mount);
+      };
+
+      var template = window.__TEMPLATE__;
+      if (!template || !template.slug || !template.code) {
+        showError('Missing template payload.');
+        return;
+      }
+
+      // Evaluate template.code in a fresh function scope. The code registers
+      // a factory at `window.__tideFactories[template.slug]` — no DOM side
+      // effects until we call the factory below.
+      try {
+        (new Function(template.code))();
+      } catch (err) {
+        console.error('[canvas] template code failed:', err);
+        showError('Template code failed to evaluate: ' + (err && err.message ? err.message : err));
+        return;
+      }
+
+      var factory = window.__tideFactories && window.__tideFactories[template.slug];
+      if (typeof factory !== 'function') {
+        showError('Template slug "' + template.slug + '" did not register a factory. Expected `window.__tideFactories["' + template.slug + '"]` to be a function.');
+        return;
+      }
+
+      // Build the container div, stamp all fetch/scope attrs on it BEFORE
+      // calling the factory. The factory reads these attributes inside
+      // `_fetchState` to decide between "seed from initialState" (draft /
+      // preview) and "fetch from S3" (live). Board slug wins over user id
+      // when both are present — server-side saveTemplateData uses the same
+      // board-wins rule.
+      var container = document.createElement('div');
+      container.id = 'tpl-' + template.slug;
+      container.setAttribute('data-tpl', template.slug);
+
+      var qs = new URLSearchParams(window.location.search);
+      var userId = qs.get('u');
+      var boardSlug = qs.get('b');
+      var tideParam = qs.get('t') || (window.__CANVAS_TIDE__ || null);
+      // Live mode: template will self-fetch from S3. Test mode counts as live
+      // (author's own user id is present) — sampleData must not leak in either.
+      // Draft/preview (no user, no board) is the only mode where sampleData is
+      // the intended first-open content.
+      var isLiveMode = !!(tideParam && template.dataKey && (boardSlug || userId));
+      if (isLiveMode) {
+        container.setAttribute('data-tide-slug', tideParam);
+        container.setAttribute('data-data-key', template.dataKey);
+        container.setAttribute('data-template-slug', template.slug);
+        if (userId) container.setAttribute('data-user-id', userId);
+        if (boardSlug) container.setAttribute('data-board-slug', boardSlug);
+      }
+      // For tides with dynamicContext: which subscribed context is currently
+      // selected in the parent chat. RPC handlers read it via
+      // `root.getAttribute('data-active-context-slug')` when they need to
+      // scope a call to whatever context the user is looking at.
+      var activeContextSlug = qs.get('c');
+      if (activeContextSlug) container.setAttribute('data-active-context-slug', activeContextSlug);
+
+      mount.appendChild(container);
+
+      var initialState = (!isLiveMode && template.sampleData && typeof template.sampleData === 'object') ? template.sampleData : {};
+      var instance;
+      try {
+        instance = factory(container, initialState);
+      } catch (err) {
+        console.error('[canvas] factory failed:', err);
+        showError('Template factory failed to run: ' + (err && err.message ? err.message : err));
+        return;
+      }
+      if (!instance || typeof instance.setState !== 'function') {
+        showError('Template factory did not return a valid instance handle.');
+        return;
+      }
+      // One instance per canvas iframe. Parent bridges through here.
+      window.__tide = instance;
+
+      // ---------------------------------------------------------------
+      // postMessage adapter — parent ↔ template bridge
+      // ---------------------------------------------------------------
+      // Convention:
+      //   parent → template:  postMessage({ kind: 'surph-tide-message', payload })
+      //     → calls `window.__tide.setState(payload)`. Also dispatched as a
+      //       `surph-tide-message` CustomEvent on the container for templates
+      //       that want non-state reactions.
+      //   template → parent:  container dispatches a bubbling `surph-event`
+      //     (via the composer's dispatchSurphEvent helper) → forwarded to
+      //       parent as postMessage({ kind: 'surph-tide-event', slug, detail }).
+      //
+      // Origin is locked to the canvas's own origin — parent and canvas are
+      // served from the same host today. Broaden if that changes.
+      var TRUSTED_ORIGIN = window.location.origin;
+      var parentTarget =
+        (window.opener && window.opener !== window) ? window.opener :
+        (window.parent && window.parent !== window) ? window.parent :
+        null;
+
+      window.addEventListener('message', function (event) {
+        if (event.origin !== TRUSTED_ORIGIN) return;
+        var data = event.data;
+        if (!data) return;
+
+        // Refresh signal from parent — saveTemplateData just wrote to this
+        // template's data file and the parent is telling us to re-read it.
+        // Filter by dataKey so an invalidation for a sibling template on the
+        // same tide doesn't refetch us.
+        if (data.kind === 'surph-tide-refresh') {
+          if (data.dataKey && template.dataKey && data.dataKey !== template.dataKey) return;
+          if (typeof instance.refresh === 'function') {
+            try { instance.refresh(); }
+            catch (err) { console.error('[canvas] refresh() failed:', err); }
+          }
+          return;
+        }
+
+        if (data.kind !== 'surph-tide-message') return;
+        var payload = data.payload != null ? data.payload : {};
+        // Canonical hydration path: replace the mount's state via setState.
+        // This is the ONLY thing that overrides the sampleData/fetched
+        // initial state — if we relied on the template to opt in via a
+        // custom event listener, any template that forgot to listen would
+        // render sampleData forever.
+        if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+          try { instance.setState(payload); }
+          catch (err) { console.error('[canvas] setState from surph-tide-message failed:', err); }
+        }
+        container.dispatchEvent(new CustomEvent('surph-tide-message', {
+          detail: payload,
+          bubbles: true,
+        }));
+      });
+
+      // `surph-event` bubbles from the container to window (no shadow-DOM
+      // boundary anymore). Listen on window to catch any re-parenting.
+      window.addEventListener('surph-event', function (event) {
+        if (!parentTarget) return;
+        parentTarget.postMessage({
+          kind: 'surph-tide-event',
+          slug: template.slug,
+          detail: event.detail != null ? event.detail : {}
+        }, TRUSTED_ORIGIN);
+      });
+
+      // Ready handshake — lets the parent know the template is mounted and
+      // listening. Parent can queue outbound messages until this arrives.
+      if (parentTarget) {
+        parentTarget.postMessage({
+          kind: 'surph-tide-ready',
+          slug: template.slug
+        }, TRUSTED_ORIGIN);
+      }
+    })();
+  </script>
+  <script src="{{{CDN}}}/js/canvasPickerSource.js"></script>
+</body>
+</html>

package/utils/userConfiguration.js

@@ -0,0 +1,29 @@
+const REST_API_URL = 'https://surph-mongo-http-19075ff8d93f.herokuapp.com'
+
+// fetch user contexts, threads, tides, etc.
+const userConfiguration = async (user, includeTides = true) => {
+  try {
+    const userId = user?._id || user?.id || null;
+    if (!userId) return null;
+
+    const response = await fetch(`${REST_API_URL}/queries/user_configuration`, {
+      method: 'POST',
+      body: JSON.stringify({ user: userId}),
+      headers: {
+        'Accept': 'application/json',
+        'Content-type': 'application/json',
+        'x-surph-client': 'surph-webapp',
+      }
+    })
+
+    const { payload } = await response.json()
+    const { user: _user, contexts, tides, tools } = payload
+    // console.log('PAYLOAD: ' + JSON.stringify({ contexts, tides, tools }))
+
+    return { user: _user, contexts, tides, tools }
+  } catch (error) {
+    throw error
+  }
+}
+
+module.exports = userConfiguration;