d057e09fa2
Some checks are pending
build-and-push / image (push) Waiting to run
- Implemented demand pane for managing trend-driven design jobs. - Created diffusion pane for generating images via Stable Diffusion. - Added inbox pane for sweeping and routing artifacts through the CxAI inbox classifier. - Developed items pane for CRUD operations against /api/items. - Introduced lang pane for running language pipelines. - Established mac pane for macOS app distribution information. - Integrated slack pane for sending messages and displaying diagnostics. - Built system pane for process introspection and version information. - Launched tools pane for browsing and invoking MCP tools. - Set up websocket pane for connecting to the /ws/echo service.
50 lines
2.1 KiB
JavaScript
50 lines
2.1 KiB
JavaScript
// panes/api.js — interactive request explorer.
|
|
import { registerPane } from '../app.js';
|
|
import { jraw } from '../lib/api.js';
|
|
import { fmtJSON } from '../lib/ui.js';
|
|
|
|
const TPL = `
|
|
<div class="pane-head">
|
|
<div><div class="title">API Explorer</div><div class="sub">Hit any backend route.</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="flex gap-2 mb-3">
|
|
<select class="input" id="ax-method" style="max-width:120px">
|
|
<option>GET</option><option>POST</option><option>PUT</option><option>PATCH</option><option>DELETE</option>
|
|
</select>
|
|
<input class="input" id="ax-path" value="/api/health" placeholder="/api/…"/>
|
|
<button class="btn btn-primary" id="ax-send">Send</button>
|
|
<button class="btn btn-ghost" id="ax-clear">Clear</button>
|
|
</div>
|
|
<label class="field mb-3"><span class="lbl">Body (JSON or text)</span><textarea class="input" id="ax-body" rows="5"></textarea></label>
|
|
<div class="card-title"><h2>Response</h2><span class="muted mono" id="ax-status">—</span></div>
|
|
<pre id="ax-out" class="muted">no request yet</pre>
|
|
</div>
|
|
`;
|
|
|
|
registerPane('api', {
|
|
label: 'API Explorer',
|
|
init(host) {
|
|
host.innerHTML = TPL;
|
|
host.querySelector('#ax-send').addEventListener('click', async () => {
|
|
const m = host.querySelector('#ax-method').value;
|
|
const p = host.querySelector('#ax-path').value;
|
|
const b = host.querySelector('#ax-body').value.trim();
|
|
const t0 = performance.now();
|
|
try {
|
|
const r = await jraw(m, p, m === 'GET' ? '' : b);
|
|
const dt = Math.round(performance.now() - t0);
|
|
host.querySelector('#ax-status').textContent = `${r.status} · ${dt}ms · ${r.raw.length}b`;
|
|
host.querySelector('#ax-out').textContent = typeof r.body === 'string' ? r.body : fmtJSON(r.body);
|
|
} catch (e) {
|
|
host.querySelector('#ax-status').textContent = 'error';
|
|
host.querySelector('#ax-out').textContent = e.message;
|
|
}
|
|
});
|
|
host.querySelector('#ax-clear').addEventListener('click', () => {
|
|
host.querySelector('#ax-out').textContent = '';
|
|
host.querySelector('#ax-status').textContent = '—';
|
|
});
|
|
},
|
|
});
|