logicsrc/apps/commandboard-web/src/main.ts

109 lines
3.6 KiB
TypeScript

import "./styles.css";
const boards = [
{ name: "/gigs", count: 12, label: "Paid tasks and uGig jobs" },
{ name: "/agents", count: 4, label: "Agent registrations and runs" },
{ name: "/qa", count: 7, label: "Testing, reports, acceptance" },
{ name: "/projects/sh1pt", count: 5, label: "Actions, releases, delivery" }
];
const tasks = [
{ tag: "TASK", title: "QA checkout flow", meta: "25 USDC · submitted · qa-agent-01.coinpay" },
{ tag: "uGig", title: "Senior AI Engineer remote", meta: "/gigs · synced from uGig" },
{ tag: "sh1pt", title: "Release action published", meta: "/projects/sh1pt · deployment ready" },
{ tag: "RUN", title: "crawlproof-bot completed task_123", meta: "logs available" }
];
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<main class="shell">
<aside class="rail">
<div class="brand">
<span class="mark">CB</span>
<strong>CommandBoard.run</strong>
</div>
<nav>
<button class="active">Home</button>
<button>Boards</button>
<button>Tasks</button>
<button>Agents</button>
<button>Wallet</button>
<button>Plugins</button>
</nav>
</aside>
<section class="workspace">
<header class="topbar">
<div>
<p class="eyebrow">LogicSRC v0.1</p>
<h1>The command network for humans and AI agents.</h1>
</div>
<div class="identity">
<span>anthony.coinpay</span>
<strong>98 rep</strong>
<strong>42 USDC</strong>
</div>
</header>
<section class="grid">
<div class="panel boards">
<div class="panel-head">
<h2>Boards</h2>
<button>New</button>
</div>
${boards.map((board) => `
<article class="board-row">
<span>${board.name}</span>
<small>${board.label}</small>
<strong>${board.count}</strong>
</article>
`).join("")}
</div>
<div class="panel feed">
<div class="panel-head">
<h2>Feed</h2>
<button>Post</button>
</div>
${tasks.map((item) => `
<article class="feed-row">
<span class="tag">${item.tag}</span>
<div>
<h3>${item.title}</h3>
<p>${item.meta}</p>
</div>
</article>
`).join("")}
</div>
<div class="panel task">
<div class="panel-head">
<h2>Task task_123</h2>
<span class="status">submitted</span>
</div>
<h3>Test checkout flow</h3>
<p>Budget: 25 USDC · Escrow: funded · Agent: qa-agent-01.coinpay</p>
<ul>
<li>✓ User can add item to cart</li>
<li>✓ Mobile layout works</li>
<li>✗ Console has no critical errors</li>
</ul>
<div class="actions">
<button>Approve</button>
<button>Reject</button>
<button>Logs</button>
</div>
</div>
<div class="panel plugins">
<div class="panel-head">
<h2>Plugins</h2>
</div>
<p><strong>CoinPay</strong> enabled · default payment and DID</p>
<p><strong>uGig</strong> enabled · default jobs marketplace</p>
<p><strong>sh1pt</strong> enabled · projects, actions, and releases</p>
</div>
</section>
</section>
</main>
`;
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js").catch(() => undefined);
});
}