diff --git a/plugins/secrets/frontend/src/index.js b/plugins/secrets/frontend/src/index.js new file mode 100644 index 0000000..3dc5e52 --- /dev/null +++ b/plugins/secrets/frontend/src/index.js @@ -0,0 +1,390 @@ +/* =========================================================== + Secrets Plugin - Verstak v2 Frontend Bundle + Contract: window.VerstakPluginRegister(id, { components }) + =========================================================== */ + +(function () { + 'use strict'; + + var PLUGIN_ID = 'verstak.secrets'; + var ScopeGlobal = 'global'; + var ScopeWorkspace = 'workspace'; + + function injectStyles() { + if (document.getElementById('secrets-style-injected')) return; + var style = document.createElement('style'); + style.id = 'secrets-style-injected'; + style.textContent = STYLES; + document.head.appendChild(style); + } + + var STYLES = [ + '.secrets-root{display:grid;grid-template-columns:minmax(17rem,20rem) minmax(0,1fr);height:100%;min-height:0;background:#0d0f14;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}', + '.secrets-panel{min-height:0;overflow:auto;border-right:1px solid #252b36;background:#11151d}', + '.secrets-main{min-width:0;min-height:0;overflow:auto;padding:1rem;background:#0d0f14}', + '.secrets-toolbar{display:flex;align-items:center;gap:.5rem;padding:.65rem .75rem;border-bottom:1px solid #252b36}', + '.secrets-title{font-weight:600;font-size:.88rem}', + '.secrets-count{color:#8b949e;font-size:.76rem}', + '.secrets-spacer{flex:1}', + '.secrets-btn{height:2rem;padding:0 .65rem;border:1px solid #303844;border-radius:4px;background:#1b222d;color:#d8dee9;font:inherit;font-size:.78rem;cursor:pointer}', + '.secrets-btn:hover{border-color:#56b6c2;background:#222b38}', + '.secrets-btn.primary{background:#176b5f;border-color:#248879;color:white}', + '.secrets-btn:disabled{opacity:.45;cursor:default}', + '.secrets-group{padding:.6rem .55rem .25rem;color:#8b949e;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}', + '.secrets-list{display:grid;gap:.25rem;padding:.2rem .45rem .75rem}', + '.secrets-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem;align-items:center;text-align:left;border:1px solid transparent;border-radius:5px;background:transparent;color:#d8dee9;padding:.5rem .55rem;cursor:pointer}', + '.secrets-item:hover{background:#171d27;border-color:#293241}', + '.secrets-item.active{background:#18232f;border-color:#56b6c2}', + '.secrets-item-title{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}', + '.secrets-item-meta{font-size:.72rem;color:#8b949e;margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}', + '.secrets-empty{padding:1.5rem;color:#8b949e;font-size:.84rem;text-align:center}', + '.secrets-card{max-width:46rem;display:grid;gap:.8rem}', + '.secrets-card h2{font-size:1rem;margin:0;color:#f0f6fc}', + '.secrets-form{display:grid;gap:.65rem;border:1px solid #252b36;border-radius:6px;padding:.9rem;background:#11151d}', + '.secrets-row{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.65rem;align-items:center}', + '.secrets-label{font-size:.78rem;color:#8b949e}', + '.secrets-input,.secrets-textarea,.secrets-select{width:100%;box-sizing:border-box;border:1px solid #303844;border-radius:4px;background:#0d1117;color:#e6edf3;font:inherit;font-size:.84rem;padding:.45rem .55rem;outline:none}', + '.secrets-textarea{min-height:6rem;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}', + '.secrets-input:focus,.secrets-textarea:focus,.secrets-select:focus{border-color:#56b6c2}', + '.secrets-actions{display:flex;gap:.5rem;flex-wrap:wrap}', + '.secrets-status{font-size:.78rem;color:#8b949e;min-height:1rem}', + '.secrets-status.error{color:#ff8f8f}', + '.secrets-secret-value{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #303844;background:#0d1117;border-radius:4px;padding:.7rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}', + '@media(max-width:780px){.secrets-root{grid-template-columns:1fr}.secrets-panel{border-right:0;border-bottom:1px solid #252b36;max-height:45vh}.secrets-row{grid-template-columns:1fr}}' + ].join('\n'); + + function el(tag, attrs, children) { + var elem = document.createElement(tag); + if (attrs) { + Object.keys(attrs).forEach(function (key) { + if (attrs[key] == null) return; + if (key === 'className') elem.className = attrs[key]; + else if (key.slice(0, 2) === 'on') elem.addEventListener(key.slice(2).toLowerCase(), attrs[key]); + else if (key === 'textContent') elem.textContent = attrs[key]; + else elem.setAttribute(key, attrs[key]); + }); + } + if (children) { + (Array.isArray(children) ? children : [children]).forEach(function (child) { + if (child == null) return; + elem.appendChild(typeof child === 'string' ? document.createTextNode(child) : child); + }); + } + return elem; + } + + function text(value) { + return String(value == null ? '' : value); + } + + function cleanWorkspace(value) { + return text(value).trim().replace(/^\/+|\/+$/g, ''); + } + + function workspaceFromProps(props) { + var node = props && props.workspaceNode; + return cleanWorkspace((props && (props.workspaceRootPath || props.workspaceName || props.workspaceNodeId)) + || (node && (node.rootPath || node.name || node.id))); + } + + function scopeLabel(record) { + var scope = record && record.scope || {}; + if (scope.kind === ScopeWorkspace) return cleanWorkspace(scope.workspaceRootPath) || 'Workspace'; + return 'Global'; + } + + function selectedIDFromProps(props) { + var resource = props && props.resource || {}; + var path = text(resource.path || props && props.secretId); + if (path.indexOf('verstak-secret://') === 0) return decodeURIComponent(path.slice('verstak-secret://'.length)); + return decodeURIComponent(path.replace(/^\/+/, '')); + } + + function groupRecords(records) { + var groups = {}; + records.forEach(function (record) { + var label = scopeLabel(record); + groups[label] = groups[label] || []; + groups[label].push(record); + }); + return Object.keys(groups).sort(function (a, b) { + if (a === 'Global') return -1; + if (b === 'Global') return 1; + return a.localeCompare(b); + }).map(function (label) { + groups[label].sort(function (a, b) { + return text(a.title || a.id).localeCompare(text(b.title || b.id)); + }); + return { label: label, records: groups[label] }; + }); + } + + function writeClipboard(api, value) { + if (api && api.clipboard && typeof api.clipboard.writeText === 'function') return api.clipboard.writeText(value); + if (window.navigator && window.navigator.clipboard && typeof window.navigator.clipboard.writeText === 'function') { + return window.navigator.clipboard.writeText(value); + } + return Promise.reject(new Error('clipboard API unavailable')); + } + + var SecretsView = { + mount: function (containerEl, props, api) { + injectStyles(); + containerEl.innerHTML = ''; + + var disposed = false; + var workspaceRoot = workspaceFromProps(props || {}); + var selectedID = selectedIDFromProps(props || {}); + var records = []; + var selectedRecord = null; + var selectedValue = ''; + var unlocked = false; + var statusText = ''; + var statusError = false; + + function setStatus(message, isError) { + statusText = message || ''; + statusError = !!isError; + render(); + } + + function renderLocked() { + var passwordInput = el('input', { + className: 'secrets-input', + type: 'password', + 'data-secret-master-password': '', + placeholder: 'Master password' + }); + var unlockBtn = el('button', { + className: 'secrets-btn primary', + type: 'button', + 'data-secret-unlock': '', + onClick: function () { + unlockBtn.disabled = true; + api.secrets.unlock(passwordInput.value).then(function () { + unlocked = true; + return loadRecords(); + }).catch(function (err) { + unlockBtn.disabled = false; + setStatus((err && err.message) ? err.message : String(err), true); + }); + } + }, ['Unlock']); + containerEl.innerHTML = ''; + containerEl.appendChild(el('div', { className: 'secrets-root' }, [ + el('div', { className: 'secrets-panel' }, [ + el('div', { className: 'secrets-toolbar' }, [ + el('span', { className: 'secrets-title' }, ['Secrets']) + ]) + ]), + el('div', { className: 'secrets-main' }, [ + el('div', { className: 'secrets-card' }, [ + el('h2', {}, ['Unlock secrets']), + el('div', { className: 'secrets-form' }, [ + el('div', { className: 'secrets-row' }, [ + el('label', { className: 'secrets-label' }, ['Password']), + passwordInput + ]), + el('div', { className: 'secrets-actions' }, [unlockBtn]), + el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText]) + ]) + ]) + ]) + ])); + } + + function renderList() { + var children = [ + el('div', { className: 'secrets-toolbar' }, [ + el('span', { className: 'secrets-title' }, ['Secrets']), + el('span', { className: 'secrets-count' }, [String(records.length)]), + el('span', { className: 'secrets-spacer' }), + el('button', { className: 'secrets-btn', type: 'button', onClick: showNewSecret }, ['New']) + ]) + ]; + if (!records.length) { + children.push(el('div', { className: 'secrets-empty' }, ['No secrets'])); + return children; + } + groupRecords(records).forEach(function (group) { + children.push(el('div', { className: 'secrets-group' }, [group.label])); + children.push(el('div', { className: 'secrets-list' }, group.records.map(function (record) { + var active = selectedRecord && selectedRecord.id === record.id; + return el('button', { + className: active ? 'secrets-item active' : 'secrets-item', + type: 'button', + onClick: function () { selectRecord(record.id); } + }, [ + el('span', {}, [ + el('span', { className: 'secrets-item-title' }, [record.title || record.id]), + el('span', { className: 'secrets-item-meta' }, [record.username ? record.username + ' · ' + record.id : record.id]) + ]) + ]); + }))); + }); + return children; + } + + function renderSelected() { + if (!selectedRecord) return el('div', { className: 'secrets-card' }, [ + el('h2', {}, ['Select a secret']) + ]); + return el('div', { className: 'secrets-card' }, [ + el('h2', {}, [selectedRecord.title || selectedRecord.id]), + el('div', { className: 'secrets-status' }, [ + scopeLabel(selectedRecord) + (selectedRecord.username ? ' · ' + selectedRecord.username : '') + ]), + el('div', { className: 'secrets-secret-value' }, [selectedValue ? selectedValue : 'Value hidden']), + el('div', { className: 'secrets-actions' }, [ + el('button', { + className: 'secrets-btn', + type: 'button', + 'data-secret-copy-link': selectedRecord.id, + onClick: function () { copySecretLink(selectedRecord.id); } + }, ['Copy secret link']) + ]), + el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText]) + ]); + } + + function renderNewSecret() { + var title = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'Title' }); + var id = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'stable.id' }); + var username = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'optional username' }); + var value = el('textarea', { className: 'secrets-textarea', placeholder: 'Secret value' }); + var scope = el('select', { className: 'secrets-select' }, [ + el('option', { value: ScopeGlobal }, ['Global']), + el('option', { value: ScopeWorkspace }, [workspaceRoot || 'Workspace']) + ]); + if (workspaceRoot) scope.value = ScopeWorkspace; + return el('div', { className: 'secrets-card' }, [ + el('h2', {}, ['New secret']), + el('div', { className: 'secrets-form' }, [ + el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['Title']), title]), + el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['ID']), id]), + el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['Username']), username]), + el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['Scope']), scope]), + el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['Value']), value]), + el('div', { className: 'secrets-actions' }, [ + el('button', { + className: 'secrets-btn primary', + type: 'button', + onClick: function () { + var nextID = text(id.value).trim() || text(title.value).trim().toLowerCase().replace(/[^a-z0-9._-]+/g, '.').replace(/^\.+|\.+$/g, ''); + api.secrets.write({ + id: nextID, + title: text(title.value).trim() || nextID, + username: text(username.value).trim(), + value: text(value.value), + scope: scope.value === ScopeWorkspace ? { kind: ScopeWorkspace, workspaceRootPath: workspaceRoot } : { kind: ScopeGlobal } + }).then(function (record) { + selectedID = record.id; + selectedRecord = record; + selectedValue = ''; + return loadRecords(); + }).catch(function (err) { + setStatus((err && err.message) ? err.message : String(err), true); + }); + } + }, ['Save']) + ]), + el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText]) + ]) + ]); + } + + var mode = 'selected'; + + function render() { + if (disposed) return; + if (!unlocked) { + renderLocked(); + return; + } + containerEl.innerHTML = ''; + containerEl.appendChild(el('div', { className: 'secrets-root' }, [ + el('div', { className: 'secrets-panel' }, renderList()), + el('div', { className: 'secrets-main' }, [ + mode === 'new' ? renderNewSecret() : renderSelected() + ]) + ])); + } + + function loadRecords() { + return api.secrets.list().then(function (items) { + records = Array.isArray(items) ? items : []; + var wanted = selectedID || (selectedRecord && selectedRecord.id) || ''; + if (wanted) { + var found = records.find(function (record) { return record.id === wanted; }); + if (found) return selectRecord(found.id); + } + selectedRecord = records[0] || null; + selectedValue = ''; + mode = 'selected'; + render(); + }); + } + + function selectRecord(id) { + mode = 'selected'; + selectedID = id; + selectedRecord = records.find(function (record) { return record.id === id; }) || null; + selectedValue = ''; + render(); + if (!id) return Promise.resolve(); + return api.secrets.read(id).then(function (record) { + if (disposed) return; + selectedRecord = record; + selectedValue = text(record.value); + render(); + }).catch(function (err) { + if (disposed) return; + setStatus((err && err.message) ? err.message : String(err), true); + }); + } + + function showNewSecret() { + mode = 'new'; + statusText = ''; + statusError = false; + render(); + } + + function copySecretLink(id) { + api.secrets.copyLink(id).then(function (link) { + return writeClipboard(api, link).then(function () { + setStatus('Secret link copied', false); + }); + }).catch(function (err) { + setStatus((err && err.message) ? err.message : String(err), true); + }); + } + + api.secrets.status().then(function (status) { + unlocked = !!(status && status.unlocked); + if (unlocked) return loadRecords(); + render(); + }).catch(function (err) { + statusText = (err && err.message) ? err.message : String(err); + statusError = true; + renderLocked(); + }); + + containerEl.__secretsCleanup = function () { + disposed = true; + }; + }, + + unmount: function (containerEl) { + if (containerEl.__secretsCleanup) { + containerEl.__secretsCleanup(); + containerEl.__secretsCleanup = null; + } + containerEl.innerHTML = ''; + } + }; + + window.VerstakPluginRegister(PLUGIN_ID, { + components: { SecretsView: SecretsView } + }); +})(); diff --git a/plugins/secrets/plugin.json b/plugins/secrets/plugin.json new file mode 100644 index 0000000..aac1f06 --- /dev/null +++ b/plugins/secrets/plugin.json @@ -0,0 +1,41 @@ +{ + "schemaVersion": 1, + "id": "verstak.secrets", + "name": "Secrets", + "version": "0.1.0", + "apiVersion": "0.1.0", + "description": "Encrypted global and workspace-scoped secret manager.", + "source": "official", + "icon": "key-round", + "provides": [ + "secret-store", + "secrets.read-ui", + "secrets.write-ui" + ], + "permissions": [ + "secrets.read", + "secrets.write", + "ui.register" + ], + "frontend": { + "entry": "frontend/src/index.js" + }, + "contributes": { + "settingsPanels": [ + { + "id": "verstak.secrets.settings", + "title": "Secrets", + "icon": "key-round", + "component": "SecretsView" + } + ], + "workspaceItems": [ + { + "id": "verstak.secrets.workspace", + "title": "Secrets", + "icon": "key-round", + "component": "SecretsView" + } + ] + } +} diff --git a/scripts/check.sh b/scripts/check.sh index e7032b5..f36a176 100755 --- a/scripts/check.sh +++ b/scripts/check.sh @@ -225,6 +225,8 @@ if command -v node &>/dev/null; then report "browser inbox frontend behavior" $? node "$ROOT/scripts/smoke-search-plugin.js" report "search frontend behavior" $? + node "$ROOT/scripts/smoke-secrets-plugin.js" + report "secrets frontend behavior" $? node "$ROOT/scripts/smoke-sync-plugin.js" report "sync frontend behavior" $? else diff --git a/scripts/smoke-secrets-plugin.js b/scripts/smoke-secrets-plugin.js new file mode 100755 index 0000000..ba5469d --- /dev/null +++ b/scripts/smoke-secrets-plugin.js @@ -0,0 +1,191 @@ +#!/usr/bin/env node +const fs = require('fs'); +const path = require('path'); +const vm = require('vm'); + +const root = path.resolve(__dirname, '..'); +const sourcePath = path.join(root, 'plugins', 'secrets', 'frontend', 'src', 'index.js'); +const manifestPath = path.join(root, 'plugins', 'secrets', 'plugin.json'); +const source = fs.readFileSync(sourcePath, 'utf8'); +const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8')); + +class FakeNode { + constructor(tagName) { + this.tagName = String(tagName || '').toUpperCase(); + this.children = []; + this.attributes = {}; + this.listeners = {}; + this.className = ''; + this.value = ''; + this.disabled = false; + this.parentNode = null; + this._textContent = ''; + } + + appendChild(node) { + this.children.push(node); + node.parentNode = this; + return node; + } + + setAttribute(name, value) { + this.attributes[name] = String(value); + } + + getAttribute(name) { + return this.attributes[name]; + } + + addEventListener(type, handler) { + this.listeners[type] = this.listeners[type] || []; + this.listeners[type].push(handler); + } + + dispatchEvent(type, event = {}) { + (this.listeners[type] || []).forEach((handler) => handler({ target: this, preventDefault() {}, stopPropagation() {}, ...event })); + } + + click() { + this.dispatchEvent('click'); + } + + set textContent(value) { + this._textContent = String(value || ''); + this.children = []; + } + + get textContent() { + if (this.tagName === '#TEXT') return this._textContent; + return this._textContent + this.children.map((child) => child.textContent).join(''); + } + + set innerHTML(value) { + this._textContent = String(value || ''); + this.children = []; + } + + get innerHTML() { + return this.textContent; + } +} + +function walk(node, fn) { + if (fn(node)) return node; + for (const child of node.children) { + const found = walk(child, fn); + if (found) return found; + } + return null; +} + +function makeDocument() { + return { + head: new FakeNode('head'), + body: new FakeNode('body'), + createElement(tagName) { + return new FakeNode(tagName); + }, + createTextNode(text) { + const node = new FakeNode('#text'); + node.textContent = text; + return node; + }, + getElementById() { + return null; + }, + }; +} + +function loadComponent(document) { + const registry = {}; + vm.runInNewContext(source, { + console, + document, + window: { + VerstakPluginRegister(pluginId, bundle) { + registry[pluginId] = bundle.components || {}; + }, + navigator: { clipboard: { writeText: async () => undefined } }, + }, + setTimeout, + clearTimeout, + }, { filename: sourcePath }); + const component = registry['verstak.secrets'] && registry['verstak.secrets'].SecretsView; + if (!component) throw new Error('SecretsView was not registered'); + return component; +} + +async function flush() { + for (let i = 0; i < 12; i++) { + await Promise.resolve(); + await new Promise((resolve) => setTimeout(resolve, 0)); + } +} + +(async () => { + if (!manifest.provides.includes('secret-store')) throw new Error('secrets manifest must provide secret-store'); + if (!manifest.provides.includes('secrets.read-ui')) throw new Error('secrets manifest must provide secrets.read-ui'); + if (!manifest.provides.includes('secrets.write-ui')) throw new Error('secrets manifest must provide secrets.write-ui'); + if (!manifest.permissions.includes('secrets.read')) throw new Error('secrets manifest must request secrets.read'); + if (!manifest.permissions.includes('secrets.write')) throw new Error('secrets manifest must request secrets.write'); + if (!manifest.permissions.includes('ui.register')) throw new Error('secrets manifest must request ui.register'); + if (!(manifest.contributes.workspaceItems || []).some((item) => item.component === 'SecretsView')) throw new Error('secrets workspace item missing'); + if (!(manifest.contributes.settingsPanels || []).some((item) => item.component === 'SecretsView')) throw new Error('secrets settings panel missing'); + + const document = makeDocument(); + const component = loadComponent(document); + const records = [ + { id: 'global.server', title: 'Global Server', username: 'root', scope: { kind: 'global' }, updatedAt: '2026-06-29T00:00:00Z' }, + { id: 'client-a.db', title: 'Client A DB', username: 'app', scope: { kind: 'workspace', workspaceRootPath: 'ClientA' }, updatedAt: '2026-06-29T00:00:00Z' }, + ]; + let unlocked = false; + const readCalls = []; + const copied = []; + const api = { + secrets: { + status: async () => ({ unlocked }), + unlock: async (password) => { + if (password !== 'master') throw new Error('bad password'); + unlocked = true; + }, + list: async () => records, + read: async (id) => { + readCalls.push(id); + return { ...records.find((record) => record.id === id), value: 'secret-value' }; + }, + write: async (record) => ({ ...record, id: record.id || 'generated.id', updatedAt: '2026-06-29T00:00:00Z' }), + copyLink: async (id) => `[${records.find((record) => record.id === id).title}](verstak-secret://${id})`, + }, + clipboard: { + writeText: async (text) => copied.push(text), + }, + }; + + const container = document.createElement('div'); + component.mount(container, { workspaceRootPath: 'ClientA', resource: { path: 'client-a.db' } }, api); + await flush(); + + if (!container.textContent.includes('Unlock secrets')) throw new Error('locked screen did not render'); + const passwordInput = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-master-password') === ''); + const unlockButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-unlock') === ''); + if (!passwordInput || !unlockButton) throw new Error('unlock controls missing'); + passwordInput.value = 'master'; + unlockButton.click(); + await flush(); + + if (!container.textContent.includes('Global')) throw new Error('global group missing'); + if (!container.textContent.includes('ClientA')) throw new Error('workspace group missing'); + if (!container.textContent.includes('Client A DB')) throw new Error('workspace secret missing'); + if (!readCalls.includes('client-a.db')) throw new Error('deep-linked secret was not selected/read'); + + const copyButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-copy-link') === 'client-a.db'); + if (!copyButton) throw new Error('copy link button missing'); + copyButton.click(); + await flush(); + if (!copied.includes('[Client A DB](verstak-secret://client-a.db)')) throw new Error('secret link was not copied'); + + console.log('secrets plugin smoke passed'); +})().catch((err) => { + console.error(err); + process.exit(1); +});