peak peek, downhill from here

README.md

···
 # Peek
 
-![peek logo of eyeball peeking up from bottom](https://raw.githubusercontent.com/autonome/Peek/master/icons/banner.png)
+Please meet Peek, a web user agent application designed for using the web where, when and how you want it.
+
+** WARNING**
+* Peek is not a web browser! There are no tabs, and no windows in the browser sense of them. If that's what you're looking for, there are a few decent browsers for you to choose from.
+* Peek is not safe for general use yet! It is a crude proof of concept I whipped up while on vacation. While I have thoughts on security model and user interface, I have not written it up into a proper security model yet.
+
+## Features
+
+You can use Peek in three ways, with more coming:
+
+* Peeks - Keyboard activated modal chromeless web pages mapped to `Opt+0-9`
+* Slides - Gesture activated modal chromeless web pages which slide in from left/right/bottom/top
+* Scripts - Scripts periodically executed against a web page in the background which extract data and notify on changes
+
+### Peeks
+
+Peeks are keyboard activated modal chromeless web pages mapped to `Opt+0-9` and closed on blur, the `Escape` key or `cmd/ctrl+w`.
+
+### Slides
+
+Slides are gesture activated modal chromeless web pages which slide in from left/right/bottom/top, and closed on blur, the `Escape` key or `cmd/ctrl+w`.
+
+### Scripts
+
+Scripts periodically load a web page in the background and extract data matching a CSS selector, stores it, and notify the user when the resulting data changes.
+
+Ok, so not really "scripts" yet. But safe and effective enough for now.
+
+## Why
+
+Some thoughts driving the design of Peek:
+
+* Web user agents should be bounded by the user, not browser vendor business models
+* Windows and tabs should have died a long time ago, a mixed metaphor constraining the ability of the web to grow/thrive/change and meet user needs
+* Security user interface must be a clear articulation of risks and trade-offs, and users should own the decisions
+
+# Architecture / Implementation
 
-Quickly peek at your favorite web pages without breaking your flow.
+Peek is designed to be modular and configurable around the idea that parts of it can run in different environments.
+
+For example:
+* Definitely planning on a mobile app which syncs and runs your peeks/slides/scripts
+* I'd like to have a decentralized compute option for running your scripts outside of your clients and syncing the data
+* Want cloud storage for all config and data, esp infinite history, so can do fun things with it
 
-Peek lets you choose 10 web pages to open with a keyboard shortcut, without opening a new tab, and able to close with the `escape` key.
+## Desktop App
 
-I use this for:
+Proof of concept is Electron. By far the best option today for cross-platform desktop apps which need a web rendering engine. There's really nothing else remotely suited (yet).
 
-* Translating text
-* See my Github notifications
-* Calendar schedule
-* Check email periodically instead of having it open all the time
-* Stock or cryptocurrency prices
-* Slack instances I don't want loaded all the time
-* Check the weather
+The user interface is just Tweakpane panels and modal chromeless web pages rn.
 
-## Usage
+TODO
+* Need to look at whether could library-ize some of what Agregore implemented for non-HTTP protocol support.
+* Min browser might be interesting as a forkable base to work from and contribute to, if they're open to it. At least, should look more at the architecture.
 
-* Create up to 10 bookmarks with "peek#" plus the number 0-9 in the title. Eg "My favorite website peek#1".
+## Mobile
 
-* Use the keyboard shortcut `alt+shift` plus the number you put in the bookmark title to peek at that URL.
+TBD
 
-* A new minimal window will open with your chosen URL loaded.
+## Cloud
 
-* Hit the `escape` key to close the window.
+* Going full crypto payments for distributed compute on this one.
 
-(If no bookmark is configured for an index, Peek will just load about:home.) 
+## Future
 
-## TODO
+* GCLI - not just a command bar, but like the Ubiquity extension
+* Lossless personal encrypted archive of web history
+* Implement the Firefox "awesomebar" scoring and search algorithm so that Peek *learns* you
+* Extension model designed for web user agent user interface experimentation
+* Panorama
 
-* ESC doesn't work sometimes
+## History
 
-* test on windows/linux
+Peek was a browser extension that let you quickly peek at your favorite web pages without breaking your flow - loading pages mapped to keyboard shortcuts into a modal window with no controls, closable via the `Escape` key.
 
-* fix window to have a maximum size
+However, as browser extension APIs become increasingly limited, it was not possible to create a decent user experience and I abandoned it. You can access the extension in this repo [in the extension directory](/autonome/peek/extension/).
 
-* add feature to long-press links to peek (in pb mode?)
+The only way to create the ideal user experience for a web user agent that *Does What I Want* is to make it a browser-ish application, and that's what Peek is now.
 

assets/icons/AppIcon.appiconset/Contents.json

···
+{
+    "images":[
+        {
+            "idiom":"iphone",
+            "size":"20x20",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"20x20",
+            "scale":"3x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"29x29",
+            "scale":"1x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"29x29",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"29x29",
+            "scale":"3x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"40x40",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"40x40",
+            "scale":"3x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"60x60",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"60x60",
+            "scale":"3x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"iphone",
+            "size":"76x76",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"20x20",
+            "scale":"1x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"20x20",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"29x29",
+            "scale":"1x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"29x29",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"40x40",
+            "scale":"1x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"40x40",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"76x76",
+            "scale":"1x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"76x76",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+            "idiom":"ipad",
+            "size":"83.5x83.5",
+            "scale":"2x",
+            "filename":"[e-mail]"
+        },
+        {
+          "size" : "1024x1024",
+          "idiom" : "ios-marketing",
+          "scale" : "1x",
+          "filename" : "[e-mail]"
+        }
+    ],
+    "info":{
+        "version":1,
+        "author":"makeappicon"
+    }
+}

assets/icons/README.md

···
+## iTunesArtwork & iTunesArtwork@2x (App Icon) file extension:
+
+PNG extension is prepended to these two files - 
+
+While Apple suggested to omit the extension for these files, 
+the '.png' extension is actually required for iTunesConnect submission.
+
+This is done for you so you don't have to.
+
+However, for Ad_hoc or Enterprise distirbution, the extension should be removed
+from the files before adding to XCode to avoid error.
+
+refs: https://developer.apple.com/library/ios/qa/qa1686/_index.html
+
+## iTunesArtwork & iTunesArtwork@2x (App Icon) transparency handling:
+
+As images with alpha channels or transparencies cannot be set as an application's icon on
+iTunesConnect, all transparent pixels in your images will be converted into 
+solid blacks.
+
+To achieve the best result, you're advised to adjust the transparency settings 
+in your source files before converting them with makeAppIcon.
+
+refs: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/AppIcons.html

config.js

···
+const Store = require('electron-store');
+
+const store = new Store();
+store.clear();
+
+store.set('prefs', {
+  globalKeyCmd: 'CommandOrControl+Escape',
+  peekKeyPrefix: 'Option+'
+});
+
+store.set('peeks', [
+]);
+
+store.set('scripts', [
+]);
+
+module.exports = store;

content-main.js

···
+console.log('content-main');
+
+setTimeout(() => {
+  const s = "selector: '.percent > span:nth-child(2)";
+  const r = document.querySelector(s);
+  const value = r ? r.textContent : null;
+  console.log('cs val', value;
+}, 1000);

defaults.js

···
+
+const Store = require('electron-store');
+
+const prefsSchema = {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "peek.prefs.schema.json",
+  "title": "Peek - prefs",
+  "description": "Peek user preferences",
+  "type": "object",
+	"properties": {
+    "globalKeyCmd": {
+      "description": "Global OS hotkey to load app",
+      "type": "string",
+      "default": "CommandOrControl+Escape"
+    },
+    "peekKeyPrefix": {
+      "description": "Global OS hotkey prefix to trigger peeks - will be followed by 0-9",
+      "type": "string",
+      "default": "Option+"
+    },
+  },
+  "required": [ "globalKeyCmd", "peekKeyPrefix"]
+};
+
+const peekSchema = {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "peek.peek.schema.json",
+  "title": "Peek - page peek",
+  "description": "Peek page peek",
+  "type": "object",
+	"properties": {
+    "keyNum": {
+      "description": "Number on keyboard to open this peek, 0-9",
+      "type": "integer",
+      "default": 0
+    },
+    "title": {
+      "description": "Name of the peek - user defined label",
+      "type": "string",
+      "default": "New Peek"
+    },
+    "address": {
+      "description": "URL to execute script against",
+      "type": "string",
+      "default": "https://example.com"
+    },
+    "persistState": {
+      "description": "Whether to persist local state or load page into empty container - defaults to false",
+      "type": "boolean",
+      "default": false
+    },
+    "keepLive": {
+      "description": "Whether to keep page alive in background or load fresh when triggered - defaults to false",
+      "type": "boolean",
+      "default": false
+    },
+    "allowSound": {
+      "description": "Whether to allow the page to emit sound or not (eg for background music player peeks - defaults to false",
+      "type": "boolean",
+      "default": false
+    },
+    "height": {
+      "description": "User-defined height of peek page",
+      "type": "integer",
+      "default": 600
+    },
+    "width": {
+      "description": "User-defined width of peek page",
+      "type": "integer",
+      "default": 800
+    },
+  },
+  "required": [ "keyNum", "title", "address", "persistState", "keepLive", "allowSound",
+								"height", "width" ]
+};
+
+const scriptSchema = {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "peek.script.schema.json",
+  "title": "Peek - script",
+  "description": "Peek background script",
+  "type": "object",
+	"properties": {
+    "id": {
+      "description": "The unique identifier for a script",
+      "type": "string",
+      "default": "peek:script:REPLACEME"
+    },
+    "title": {
+      "description": "Name of the script - user defined",
+      "type": "string",
+      "default": "New Script"
+    },
+    "version": {
+      "description": "Version number of the script",
+      "type": "string",
+      "default": "1.0.0"
+    },
+    "address": {
+      "description": "URL to execute script against",
+      "type": "string",
+      "default": "https://example.com"
+    },
+    "selector": {
+      "description": "CSS Selector for the script",
+      "type": "string",
+      "default": "body > h1"
+    },
+    "value": {
+      "description": "Which element property to return - currently 'textContent' is the only supported value",
+      "type": "string",
+      "default": "textContent"
+    },
+    "interval": {
+      "description": "How often to execute the script, in milliseconds - defaults to five minutes",
+      "type": "integer",
+      "default": 300000,
+			"minimum": 0
+    },
+    "storeHistory": {
+      "description": "Whether to store historic values - defaults to false",
+      "type": "boolean",
+      "default": false
+    },
+  },
+  "required": [ "id", "title", "address", "version", "selector", "value",
+								"interval", "storeHistory" ]
+};
+
+const schemas = {
+	prefs: prefsSchema,
+	peek: peekSchema,
+	script: scriptSchema
+};
+
+const fullSchema = {
+  prefs: prefsSchema,
+  peek: peekSchema,
+  script: scriptSchema,
+  peeks: {
+    type: 'array',
+    items: {
+      type: 'peek'
+    }
+  },
+  scripts: {
+    type: 'array',
+    items: {
+      type: 'script'
+    }
+  },
+};
+
+const defaults = {
+  prefs: {
+    globalKeyCmd: 'CommandOrControl+Escape',
+    peekKeyPrefix: 'Option+'
+  },
+  peeks: [
+    {
+      keyNum: 0,
+      title: 'localhost',
+      address: 'http://localhost/',
+      persistState: false,
+      keepLive: false,
+      allowSound: false,
+      height: '',
+      width: '',
+    },
+    {
+      keyNum: 1,
+      title: 'everytimezone',
+      address: 'https://everytimezone.com/',
+      persistState: false,
+      keepLive: false,
+      allowSound: false,
+      height: '',
+      width: '',
+    }
+  ],
+  scripts: [
+    {
+      id: 'peek:script:localhost:test',
+      title: 'localhost test',
+      address: 'http://localhost/',
+      version: '1',
+      selector: 'body > h1',
+      value: 'textContent',
+      interval: 300000,
+      storehistory: false
+    },
+  ]
+};
+
+const set = data => {
+  store.set('prefs', data.prefs);
+  store.set('peeks', data.peeks);
+  store.set('scripts', data.scripts);
+};
+
+const store = new Store({
+  // TODO: re-enable schemas
+  //schema: fullSchema,
+  watch: true
+});
+
+// DEBUG
+store.clear();
+
+const tmp = store.get('prefs');
+if (!tmp) {
+  console.log('initializing datastore');
+  store.set('prefs', defaults.prefs);
+  store.set('peeks', defaults.peeks);
+  store.set('scripts', defaults.scripts);
+}
+
+module.exports = {
+	schemas,
+	data: {
+    get prefs() { return store.get('prefs'); },
+    get peeks() { return store.get('peeks'); },
+    get scripts() { return store.get('scripts'); }
+  },
+  set,
+  watch: fn => {
+    store.onDidAnyChange(newData => {
+      fn(newData)
+    });
+  }
+};

extension/README.md

···
+# Peek
+
+![peek logo of eyeball peeking up from bottom](https://raw.githubusercontent.com/autonome/Peek/master/icons/banner.png)
+
+Quickly peek at your favorite web pages without breaking your flow.
+
+Peek lets you choose 10 web pages to open with a keyboard shortcut, without opening a new tab, and able to close with the `escape` key.
+
+I use this for:
+
+* Translating text
+* See my Github notifications
+* Calendar schedule
+* Check email periodically instead of having it open all the time
+* Stock or cryptocurrency prices
+* Slack instances I don't want loaded all the time
+* Check the weather
+
+## Usage
+
+* Create up to 10 bookmarks with "peek#" plus the number 0-9 in the title. Eg "My favorite website peek#1".
+
+* Use the keyboard shortcut `alt+shift` plus the number you put in the bookmark title to peek at that URL.
+
+* A new minimal window will open with your chosen URL loaded.
+
+* Hit the `escape` key to close the window.
+
+(If no bookmark is configured for an index, Peek will just load about:home.) 
+
+## TODO
+
+* ESC doesn't work sometimes
+
+* test on windows/linux
+
+* fix window to have a maximum size
+
+* add feature to long-press links to peek (in pb mode?)
+

forge.config.js

···
+module.exports = {
+  packagerConfig: {},
+  rebuildConfig: {},
+  makers: [
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-zip',
+      platforms: ['darwin'],
+    },
+    {
+      name: '@electron-forge/maker-deb',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-rpm',
+      config: {},
+    },
+  ],
+};

index.js

···
+// main.js
+(async () => {
+
+console.log('main');
+
+// Modules to control application life and create native browser window
+const {
+  electron,
+  app,
+  BrowserView,
+  BrowserWindow,
+  globalShortcut,
+  ipcMain,
+  Menu,
+  nativeTheme,
+  Tray
+} = require('electron');
+
+const path = require('path');
+
+const labels = {
+  app: {
+    title: 'Peek'
+  },
+  tray: {
+    tooltip: 'Click to open Peek'
+  }
+};
+
+// keep app out of dock and tab switcher
+app.dock.hide();
+
+// load data
+let { data, schemas, set, watch } = require('./defaults');
+
+const ICON_RELATIVE_PATH = 'assets/icons/AppIcon.appiconset/[e-mail]';
+const ICON_PATH = path.join(__dirname, ICON_RELATIVE_PATH);
+
+const isDev = require('electron-is-dev');
+
+if (isDev) {
+  // Enable live reload for Electron too
+  require('electron-reload')(__dirname, {
+    // Note that the path to electron may vary according to the main file
+    electron: require(`${__dirname}/node_modules/electron`)
+  });
+  /*
+  try {
+	  require('electron-reloader')(module);
+  } catch {}
+  */
+}
+
+const unhandled = require('electron-unhandled');
+unhandled();
+
+// system dark mode handling
+ipcMain.handle('dark-mode:toggle', () => {
+  if (nativeTheme.shouldUseDarkColors) {
+    nativeTheme.themeSource = 'light';
+  } else {
+    nativeTheme.themeSource = 'dark';
+  }
+  return nativeTheme.shouldUseDarkColors
+});
+
+ipcMain.handle('dark-mode:system', () => {
+  nativeTheme.themeSource = 'system';
+});
+
+let _windows = [];
+let _peekWins = {};
+
+let _win = null;
+const getMainWindow = () => {
+  //console.log('getMainWindow', _win === null);
+  if (_win === null) {
+    _win = createMainWindow();
+  }
+  return _win;
+};
+
+const createMainWindow = () => {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('main.html');
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools()
+
+  return mainWindow;
+};
+
+// 
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    getMainWindow().show();
+  }
+});
+
+const initTray = () => {
+  const tray = new Tray(ICON_PATH);
+  tray.setToolTip(labels.tray.tooltip);
+  tray.on('click', () => {
+    getMainWindow().show();
+  });
+  return tray;
+};
+
+const execContentScript = (script, cb) => {
+  const view = new BrowserView({
+    webPreferences: {
+      // isolate content and do not persist it
+      partition: Date.now()
+    }
+  });
+
+  //win.setBrowserView(view)
+  //view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
+  view.webContents.loadURL(script.address);
+
+  const str = `
+    const s = "${script.selector}";
+    const r = document.querySelector(s);
+    const value = r ? r.textContent : null;
+    value;
+  `;
+
+  view.webContents.on('dom-ready', async () => {
+    try {
+      const r = await view.webContents.executeJavaScript(str);
+      cb(r);
+    } catch(ex) {
+      console.error('cs exec error', ex);
+      cb(null);
+    }
+  });
+};
+
+const initScripts = scripts => {
+  return;
+  // debounce me somehow so not shooting em all off
+  // at once every time app starts
+  scripts.forEach(script => {
+    const r = execContentScript(script, (res) => {
+      console.log('cs r', res);
+    });
+  });
+};
+
+const initGlobalShortcuts = prefs => {
+  // register global activation shortcut
+  if (!globalShortcut.isRegistered(prefs.globalKeyCmd)) {
+    const onActivate = () => {
+      getMainWindow().show();
+    };
+
+    const ret = globalShortcut.register(prefs.globalKeyCmd, onActivate);
+
+    if (!ret) {
+      console.error('Unable to register global key command.')
+    }
+  }
+};
+
+const showPeek = (peek) => {
+  const height = peek.height || 600;
+  const width = peek.width || 800;
+  
+  let win = null;
+
+  const key = 'peek' + peek.keyNum;
+
+  if (_peekWins[key]) {
+    console.log('peek', peek.keyNum, 'using stored window');
+    win = _peekWins[key];
+    win.show();
+  }
+  else {
+    console.log('peek', peek.keyNum, 'creating new window');
+    win = new BrowserWindow({
+      height,
+      width,
+      center: true,
+      skipTaskbar: true,
+      autoHideMenuBar: true,
+      titleBarStyle: 'hidden',
+      webPreferences: {
+        preload: path.join(__dirname, 'peek-preload.js'),
+        // isolate content and do not persist it
+        partition: Date.now()
+      }
+    });
+  }
+
+  const onGoAway = () => {
+    if (peek.keepLive) {
+      _peekWins[key] = win;
+      win.hide();
+    }
+    else {
+      win.destroy();
+    }
+  }
+  win.on('blur', onGoAway);
+  win.on('close', onGoAway);
+
+  /*
+  const str = `
+    window.addEventListener('keyup', e => {
+      if (e.key == 'Escape') {
+        console.log('peek script esc');
+      }
+    });
+    1;
+  `;
+
+  win.webContents.on('dom-ready', async () => {
+    try {
+      const r = await win.webContents.executeJavaScript(str);
+      console.log(r);
+    } catch(ex) {
+      console.error('cs exec error', ex);
+    }
+  });
+  */
+
+  //win.setBounds({ x: 0, y: 0, width, height })
+  win.loadURL(peek.address);
+};
+
+const initPeeks = (cmdPrefix, peeks) => {
+  peeks.forEach((p, i) => {
+    if (!globalShortcut.isRegistered(cmdPrefix + `${i}`)) {
+      const ret = globalShortcut.register(cmdPrefix + `${i}`, () => {
+        showPeek(p);
+      });
+
+      if (!ret) {
+        console.error('Unable to register peek');
+      }
+    }
+  });
+};
+
+const initData = data => {
+  // initialize prefs
+  const prefs = data.prefs;
+  initGlobalShortcuts(prefs);
+
+  // initialize peeks
+  const peeks = data.peeks;
+  if (peeks.length > 0) {
+    initPeeks(prefs.peekKeyPrefix, peeks);
+  }
+
+  // initialize scripts
+  const scripts = data.scripts;
+  if (scripts.length > 0) {
+    initScripts(scripts);
+  }
+};
+
+const onReady = () => {
+  // create main app window on app start
+  const win = getMainWindow();
+
+  initData(data);
+
+  initTray();
+
+  watch(newData => {
+    initData(newData);
+    getMainWindow().webContents.send('configchange', {});
+  });
+};
+
+app.whenReady().then(onReady);
+
+// when renderer is ready, send over user data
+ipcMain.on('getconfig', () => {
+  getMainWindow().webContents.send('config', {
+		data,
+		schemas
+  });
+});
+
+// listen for updates
+ipcMain.on('setconfig', (event, newData) => {
+  // write to datastore
+  set(newData);
+});
+
+// ipc ESC handler
+ipcMain.on('esc', (event, title) => {
+  console.log('esc');
+  const win = getMainWindow();
+  win.close();
+  _win = null;
+  /*
+  if (win.isVisible()) {
+    console.log('win is visible, hide it');
+    win.hide();
+  }
+  */
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  console.log('window-all-closed', process.platform);
+  if (process.platform !== 'darwin') {
+    onQuit();
+  }
+});
+
+const onQuit = () => {
+  console.log('onquit');
+  // Unregister all shortcuts on app close
+  globalShortcut.unregisterAll();
+
+  app.quit();
+};
+
+})();

main.css

···
+body {
+  font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
+  font-feature-settings: "tnum";
+  font-size: 12.4px;
+  font-variant-numeric: tabular-nums;
+}
+
+body > div {
+  margin-bottom: 10px;
+}
+
+body > div > div { 
+  margin-bottom: 10px;
+}
+
+h1 {
+  margin-top: 1px;
+  margin-bottom: 2px;
+}

main.html

···
+<!--index.html-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
+    <title>peek</title>
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <div>
+      <h1>peek</h1>
+    </div>
+
+    <div class="houseofpane">
+    </div>
+
+    <div>
+      Node.js <span id="node-version"></span><br>
+      Chromium <span id="chrome-version"></span><br>
+      Electron <span id="electron-version"></span><br>
+    </div>
+
+    <script type=module src="./node_modules/tweakpane/dist/tweakpane.js"></script>
+    <script type=module src="./renderer.js"></script>
+
+  </body>
+</html>

package.json

···
+{
+  "name": "Peek",
+  "version": "0.0.1",
+  "description": "Peek is a web user agent for working with the web in a more agent-ish fashion than a browser.",
+  "main": "index.js",
+  "author": "dietrich ayala",
+  "license": "MIT",
+  "devDependencies": {
+    "@electron-forge/cli": "^6.0.5",
+    "@electron-forge/maker-deb": "^6.0.5",
+    "@electron-forge/maker-rpm": "^6.0.5",
+    "@electron-forge/maker-squirrel": "^6.0.5",
+    "@electron-forge/maker-zip": "^6.0.5",
+    "electron": "^23.1.2",
+    "electron-is-dev": "^2.0.0",
+    "electron-reload": "^2.0.0-alpha.1",
+    "electron-reloader": "^1.2.3"
+  },
+  "dependencies": {
+    "electron-squirrel-startup": "^1.0.0",
+    "electron-store": "^8.1.0",
+    "electron-unhandled": "^4.0.1",
+    "tweakpane": "^3.1.7"
+  },
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make"
+  }
+}

peek-preload.js

···
+
+
+console.log('peek preload');
+
+/*
+window.addEventListener('keyup', e => {
+  if (e.key == 'Escape') {
+    console.log('peek preload esc');
+  }
+});
+*/

preload.js

···
+console.log('preload');
+const {app, contextBridge, ipcRenderer} = require('electron')
+
+let api = {};
+
+api.onConfigChange = callback => {
+  ipcRenderer.on('configchange', (ev, msg) => {
+    callback(msg);
+  });
+};
+
+api.getConfig = new Promise((resolve, reject) => {
+  // TODO: race potential
+  ipcRenderer.once('config', (ev, msg) => {
+    resolve(msg);
+  });
+  ipcRenderer.send('getconfig');
+});
+
+api.setConfig = cfg => {
+  //console.log('preload: setConfig', cfg);
+  ipcRenderer.send('setconfig', cfg);
+};
+
+contextBridge.exposeInMainWorld('app', api);
+
+window.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector)
+    if (element) element.innerText = text
+  }
+
+  for (const dependency of ['chrome', 'node', 'electron']) {
+    replaceText(`${dependency}-version`, process.versions[dependency])
+  }
+});
+
+window.addEventListener('keyup', e => {
+  if (e.key == 'Escape') {
+    ipcRenderer.send('esc', '');
+  }
+});
+

renderer.js

···
+console.log('renderer');
+
+// TODO: move to proper l10n
+const labels = {
+  shortcutsPane: {
+    paneTitle: 'Keyboard Shortcuts',
+    globalKeyCmd: 'Global activation shortcut',
+    peekKeyPrefix: 'Peek shortcut prefix',
+  },
+  peeksPane: {
+    paneTitle: 'Peeks',
+    testBtn: 'Try',
+    newFolder: 'New peek',
+    addBtn: 'Add',
+    delBtn: 'Delete',
+  },
+  scriptsPane: {
+    paneTitle: 'Scripts',
+    testBtn: 'Try',
+    newFolder: 'New script',
+    addBtn: 'Add',
+    delBtn: 'Delete',
+  }
+};
+
+// TODO: capture and internally navigate out of panes
+window.addEventListener('keyup', e => {
+  //console.log('renderer', 'onkeyup', e);
+  if (e.key == 'Escape') {
+    //ipcRenderer.send('esc', '');
+  }
+});
+
+// send changes back to main process
+// it will notify us when saved
+// and we'll reload entirely 😐
+const updateToMain = data => {
+  console.log('renderer: updating to main', data);
+  window.app.setConfig(data);
+};
+
+const containerEl = document.querySelector('.houseofpane');
+let panes = [];
+
+const init = cfg => {
+  console.log('renderer: init');
+  console.log('renderer: cfg', cfg);
+
+  // blow away panes if this is an update
+  if (panes.length > 0) {
+    panes.forEach(p => {
+      p.dispose();
+    });
+    panes = [];
+  }
+
+  containerEl.replaceChildren();
+
+  // build panes and wire up change handlers
+	let { data, schemas } = cfg;
+
+  panes.push(initShortcutsPane(containerEl, labels.shortcutsPane, schemas.prefs, data.prefs, newPrefs => {
+    data.prefs = newPrefs;
+    updateToMain(data);
+  }));
+
+  panes.push(initPeeksPane(containerEl, labels.peeksPane, schemas.peek, data.peeks, newPeeks => {
+    data.peeks = newPeeks;
+    updateToMain(data);
+  }));
+
+  panes.push(initScriptsPane(containerEl, labels.scriptsPane, schemas.script, data.scripts, newScripts => {
+    data.scripts = newScripts;
+    updateToMain(data);
+  }));
+};
+
+// listen for data changes
+window.app.onConfigChange(() => {
+  console.log('onconfigchange');
+  window.app.getConfig.then(init);
+});
+
+// initialization: get data and load ui
+window.app.getConfig.then(init);
+
+const fillPaneFromSchema = (pane, labels, schema, data, onChange) => {
+	const props = schema.properties;
+  Object.keys(props).forEach(k => {
+    // schema for property
+    const s = props[k];
+
+    // value (or default)
+		const v =
+      (data && data.hasOwnProperty(k))
+      ? data[k]
+      : props[k].default;
+
+		const params = {};
+    const opts = {};
+
+    if (s.type == 'integer') {
+      opts.step = 1;
+    }
+
+		params[k] = v;
+    const input = pane.addInput(params, k, opts);
+    // TODO: consider inline state management
+    input.on('change', ev => {
+      // TODO: validate against schema
+      console.log('change', k, ev.value)
+      //data[k] = ev.value;
+    });
+  });
+};
+
+// TODO: fuckfuckfuck
+// https://github.com/cocopon/tweakpane/issues/431
+const exportPaneData = pane => {
+  const children = pane.rackApi_.children.filter(p => p.children);
+  const val = pane.rackApi_.children.filter(p => p.children).map(paneChild => {
+    return paneChild.children.reduce((obj, field) => {
+      const k = field.label;
+      if (!k) {
+        return obj;
+      }
+
+      let v = null;
+
+      const input = field.element.querySelector('.tp-txtv_i')
+      if (input) {
+        v = input.value;
+      }
+
+      const checkbox = field.element.querySelector('.tp-ckbv_i');
+      if (checkbox) {
+        v = checkbox.checked;
+      }
+
+      // TODO: drop fields not supported for now
+      if (v) {
+        obj[k] = v;
+      }
+
+      return obj;
+    }, {});
+  });
+  return val;
+};
+
+const initShortcutsPane = (container, labels, schema, prefs, onChange) => {
+  const pane = new Tweakpane.Pane({
+    container: container,
+    title: labels.paneTitle
+  });
+
+  fillPaneFromSchema(pane, labels, schema, prefs);
+
+  const update = (ev) => {
+    // TODO: this won't work forever
+    // gotta fix when tweakpane state export exists
+    // also, gotta add accelerator validation
+    prefs[ev.presetKey] = ev.value;
+    onChange(prefs);
+  };
+
+  // handle changes to existing entries
+  pane.on('change', update);
+
+  return pane;
+};
+
+const initPeeksPane = (container, labels, schema, peeks, onChange) => {
+  const pane = new Tweakpane.Pane({
+    container: container,
+    title: labels.paneTitle
+  });
+
+  const update = (all) => {
+    const newData = exportPaneData(pane);
+    // remove "new item" entry if not
+    if (!all) {
+      newData.pop();
+    }
+    console.log(newData)
+    onChange(newData);
+  };
+
+  peeks.forEach(entry => {
+    const folder = pane.addFolder({
+      title: entry.title,
+      expanded: false
+    });
+
+    const onChange = newEntry => {
+    };
+
+    fillPaneFromSchema(folder, labels, schema, entry, onChange);
+
+    // TODO: implement
+    folder.addButton({title: labels.testBtn});
+
+    // TODO: implement
+    const delBtn = folder.addButton({title: labels.delBtn});
+    delBtn.on('click', () => {
+      //folder.dispose();
+      pane.remove(folder);
+      // https://github.com/cocopon/tweakpane/issues/533
+      update();
+    });
+
+    folder.on('change', update);
+  });
+
+  // add new item entry
+  const folder = pane.addFolder({
+    title: labels.newFolder
+  });
+
+  fillPaneFromSchema(folder, labels, schema);
+
+  const btn = pane.addButton({title: labels.addBtn});
+
+  // handle adds of new entries
+	btn.on('click', () => {
+    update(true);
+  });
+
+  // handle changes to existing entries
+  //pane.on('change', update);
+
+  return pane;
+};
+
+const initScriptsPane = (container, labels, schema, scripts, onChange) => {
+  const pane = new Tweakpane.Pane({
+    container: container,
+    title: labels.paneTitle
+  });
+
+  scripts.forEach(entry => {
+    const folder = pane.addFolder({
+      title: entry.title,
+      expanded: false
+    });
+    fillPaneFromSchema(folder, labels, schema, entry);
+    // TODO: implement
+    folder.addButton({title: labels.testBtn});
+    // TODO: implement
+    folder.addButton({title: labels.delBtn});
+  });
+
+  const folder = pane.addFolder({
+    title: labels.newFolder
+  });
+
+  fillPaneFromSchema(folder, labels, schema);
+
+  const btn = pane.addButton({title: labels.addBtn});
+
+  const update = () => {
+    const newData = exportPaneData(pane);
+    onChange(newData);
+  };
+
+  // handle adds of new entries
+	btn.on('click', update);
+
+  // handle changes to existing entries
+  pane.on('change', update);
+
+  return pane;
+};
+

scripts.js

···
+// Manage content script execution
+
+const manager = {
+
+};