@alashi/cli 0.1.0

package/templates/basic-app/ui/index.html

@@ -0,0 +1,466 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__APP_NAME__</title>
+<style>
+  :root {
+    --bg: #f6f7fb;
+    --panel: #ffffff;
+    --border: #e4e6ef;
+    --text: #1c1e26;
+    --muted: #6b7080;
+    --accent: #6d28d9;
+    --accent-soft: #ede9fe;
+    --sidebar: #17141f;
+    --sidebar-text: #b9b3c9;
+    --ok: #15803d;
+    --err: #b91c1c;
+    --radius: 10px;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font-family: system-ui, -apple-system, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    display: flex;
+    min-height: 100vh;
+  }
+
+  /* ---- shell ---- */
+  #sidebar {
+    width: 230px;
+    flex-shrink: 0;
+    background: var(--sidebar);
+    color: var(--sidebar-text);
+    display: flex;
+    flex-direction: column;
+    padding: 1.25rem 0.75rem;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+  }
+  #brand {
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.05rem;
+    padding: 0 0.75rem 1.25rem;
+    letter-spacing: 0.02em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #brand .dot { color: var(--accent); }
+  nav a {
+    display: block;
+    color: var(--sidebar-text);
+    text-decoration: none;
+    padding: 0.55rem 0.75rem;
+    border-radius: 8px;
+    margin-bottom: 2px;
+    font-size: 0.95rem;
+  }
+  nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
+  nav a.active { background: var(--accent); color: #fff; font-weight: 600; }
+  #sidebar footer {
+    margin-top: auto;
+    padding: 0.75rem;
+    font-size: 0.75rem;
+    color: #5d5871;
+  }
+
+  main { flex: 1; min-width: 0; padding: 2rem 2.5rem; }
+  .page { display: none; }
+  .page.visible { display: block; }
+  h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
+  .subtitle { color: var(--muted); margin: 0 0 1.5rem; font-size: 0.95rem; }
+
+  /* ---- components ---- */
+  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
+  .card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem 1.25rem;
+  }
+  .card .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
+  .card .value { font-size: 1.6rem; font-weight: 700; margin-top: 0.25rem; }
+
+  .panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+  }
+
+  table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
+  th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
+  th, td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
+  tr:last-child td { border-bottom: none; }
+  .empty { color: var(--muted); padding: 1.5rem 0; text-align: center; }
+
+  button {
+    font: inherit;
+    border: 1px solid var(--border);
+    background: var(--panel);
+    border-radius: 8px;
+    padding: 0.45rem 0.9rem;
+    cursor: pointer;
+  }
+  button:hover { border-color: var(--accent); color: var(--accent); }
+  button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+  button.primary:hover { opacity: 0.92; color: #fff; }
+  button:disabled { opacity: 0.5; cursor: default; }
+  input[type='text'] {
+    font: inherit;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+  input[type='text']:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
+  .row { display: flex; gap: 0.5rem; }
+  .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
+  .badge.ok { background: #dcfce7; color: var(--ok); }
+  .badge.err { background: #fee2e2; color: var(--err); }
+  .muted { color: var(--muted); }
+
+  /* ---- chat ---- */
+  #chat-layout { display: flex; gap: 1rem; height: calc(100vh - 9rem); }
+  #conversations-panel { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; }
+  #conversations { list-style: none; margin: 0.75rem 0 0; padding: 0; overflow-y: auto; }
+  #conversations li {
+    padding: 0.45rem 0.6rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.88rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #conversations li:hover { background: var(--bg); }
+  #conversations li.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+  #chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+  #log { flex: 1; overflow-y: auto; padding-right: 0.5rem; }
+  .msg { max-width: 82%; padding: 0.6rem 0.85rem; border-radius: 12px; margin-bottom: 0.6rem; white-space: pre-wrap; overflow-wrap: break-word; }
+  .msg.user { background: var(--accent); color: #fff; margin-left: auto; }
+  .msg.assistant { background: var(--bg); border: 1px solid var(--border); }
+  #chat-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+  #chat-status { min-height: 1.2rem; font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }
+</style>
+</head>
+<body>
+<aside id="sidebar">
+  <div id="brand">__APP_NAME__<span class="dot">.</span></div>
+  <nav>
+    <a href="#/overview" data-page="overview">Overview</a>
+    <a href="#/chat" data-page="chat">Chat</a>
+    <a href="#/notes" data-page="notes">Notes</a>
+    <a href="#/jobs" data-page="jobs">Jobs</a>
+  </nav>
+  <footer>powered by alashi</footer>
+</aside>
+
+<main>
+  <section class="page" id="page-overview">
+    <h1>Overview</h1>
+    <p class="subtitle" id="greeting"></p>
+    <div class="cards">
+      <div class="card"><div class="label">Notes</div><div class="value" id="stat-notes">–</div></div>
+      <div class="card"><div class="label">Conversations</div><div class="value" id="stat-convos">–</div></div>
+      <div class="card"><div class="label">Last heartbeat</div><div class="value" id="stat-heartbeat" style="font-size:1rem">–</div></div>
+    </div>
+    <div class="panel muted">
+      Edit <code>index.mjs</code> for API routes, jobs, and manifest; <code>ui/index.html</code> for this page.
+      The app's SQLite database and files live in its data directory.
+    </div>
+  </section>
+
+  <section class="page" id="page-chat">
+    <h1>Chat</h1>
+    <p class="subtitle">Talks to the engine through the alashi host.</p>
+    <div id="chat-layout">
+      <div class="panel" id="conversations-panel">
+        <button id="new-chat" type="button">+ New chat</button>
+        <ul id="conversations"></ul>
+      </div>
+      <div class="panel" id="chat-main">
+        <div id="log"></div>
+        <form id="chat-form">
+          <input id="chat-input" type="text" placeholder="Say something" autocomplete="off">
+          <button id="chat-send" class="primary" type="submit">Send</button>
+        </form>
+        <div id="chat-status"></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="page" id="page-notes">
+    <h1>Notes</h1>
+    <p class="subtitle">A tiny CRUD example backed by the app's own SQLite database.</p>
+    <div class="panel">
+      <form id="note-form" class="row" style="margin-bottom:1rem">
+        <input id="note-input" type="text" placeholder="Add a note" autocomplete="off">
+        <button class="primary" type="submit">Add</button>
+      </form>
+      <table>
+        <thead><tr><th>Note</th><th style="width:12rem">Created</th><th style="width:5rem"></th></tr></thead>
+        <tbody id="notes-body"></tbody>
+      </table>
+      <div class="empty" id="notes-empty" hidden>No notes yet.</div>
+    </div>
+  </section>
+
+  <section class="page" id="page-jobs">
+    <h1>Jobs</h1>
+    <p class="subtitle">Manifest-declared schedules, run by the host.</p>
+    <div class="panel">
+      <table>
+        <thead><tr><th>Job</th><th>Schedule</th><th>Next run</th><th>Last run</th><th>Status</th><th style="width:7rem"></th></tr></thead>
+        <tbody id="jobs-body"></tbody>
+      </table>
+      <div class="empty" id="jobs-empty" hidden>No jobs declared.</div>
+    </div>
+  </section>
+</main>
+
+<script>
+const APP = decodeURIComponent(location.pathname.split('/')[2]);
+const appApi = (path) => `/app/${APP}/api${path}`;
+const hostApi = (path) => `/api/apps/${APP}${path}`;
+
+function el(tag, props = {}, children = []) {
+  const node = document.createElement(tag);
+  Object.assign(node, props);
+  for (const child of children) node.append(child);
+  return node;
+}
+
+const fmt = (iso) => (iso ? new Date(iso).toLocaleString() : '–');
+
+/* ---- routing ---- */
+const loaders = { overview: loadOverview, chat: loadChat, notes: loadNotes, jobs: loadJobs };
+
+function route() {
+  const page = (location.hash.replace('#/', '') || 'overview').split('?')[0];
+  const known = Object.hasOwn(loaders, page) ? page : 'overview';
+  for (const section of document.querySelectorAll('.page')) {
+    section.classList.toggle('visible', section.id === `page-${known}`);
+  }
+  for (const link of document.querySelectorAll('nav a')) {
+    link.classList.toggle('active', link.dataset.page === known);
+  }
+  loaders[known]();
+}
+window.addEventListener('hashchange', route);
+
+/* ---- overview ---- */
+async function loadOverview() {
+  try {
+    const summary = await (await fetch(appApi('/summary'))).json();
+    document.getElementById('greeting').textContent = summary.greeting ?? '';
+    document.getElementById('stat-notes').textContent = summary.notes;
+    document.getElementById('stat-heartbeat').textContent = fmt(summary.lastHeartbeat);
+    const { conversations } = await (await fetch(hostApi('/chat/conversations'))).json();
+    document.getElementById('stat-convos').textContent = conversations.length;
+  } catch {
+    document.getElementById('greeting').textContent = 'Failed to load summary.';
+  }
+}
+
+/* ---- notes ---- */
+async function loadNotes() {
+  const { notes } = await (await fetch(appApi('/notes'))).json();
+  const body = document.getElementById('notes-body');
+  body.replaceChildren(
+    ...notes.map((note) =>
+      el('tr', {}, [
+        el('td', { textContent: note.text }),
+        el('td', { textContent: fmt(note.created_at), className: 'muted' }),
+        el('td', {}, [
+          el('button', {
+            textContent: 'Delete',
+            onclick: async () => {
+              await fetch(appApi(`/notes/${note.id}`), { method: 'DELETE' });
+              loadNotes();
+            },
+          }),
+        ]),
+      ]),
+    ),
+  );
+  document.getElementById('notes-empty').hidden = notes.length > 0;
+}
+
+document.getElementById('note-form').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const input = document.getElementById('note-input');
+  const text = input.value.trim();
+  if (!text) return;
+  input.value = '';
+  await fetch(appApi('/notes'), {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ text }),
+  });
+  loadNotes();
+});
+
+/* ---- jobs ---- */
+async function loadJobs() {
+  const { jobs } = await (await fetch(hostApi('/jobs'))).json();
+  const body = document.getElementById('jobs-body');
+  body.replaceChildren(
+    ...jobs.map((job) => {
+      const last = job.recentRuns[0];
+      const status = !job.valid
+        ? el('span', { textContent: 'invalid schedule', className: 'badge err' })
+        : job.running
+          ? el('span', { textContent: 'running', className: 'badge ok' })
+          : last
+            ? el('span', { textContent: last.ok ? 'ok' : 'failed', className: `badge ${last.ok ? 'ok' : 'err'}` })
+            : el('span', { textContent: 'never run', className: 'muted' });
+      return el('tr', {}, [
+        el('td', { textContent: job.name }),
+        el('td', {}, [el('code', { textContent: job.schedule })]),
+        el('td', { textContent: fmt(job.nextRun), className: 'muted' }),
+        el('td', { textContent: fmt(job.lastRun), className: 'muted' }),
+        el('td', {}, [status]),
+        el('td', {}, [
+          el('button', {
+            textContent: 'Run now',
+            onclick: async (e) => {
+              e.target.disabled = true;
+              await fetch(hostApi(`/jobs/${job.name}/run`), { method: 'POST' });
+              loadJobs();
+            },
+          }),
+        ]),
+      ]);
+    }),
+  );
+  document.getElementById('jobs-empty').hidden = jobs.length > 0;
+}
+
+/* ---- chat ---- */
+const log = document.getElementById('log');
+const chatStatus = document.getElementById('chat-status');
+let conversationId = null;
+let chatLoaded = false;
+
+function appendMsg(text, role) {
+  const div = el('div', { textContent: text, className: `msg ${role}` });
+  log.appendChild(div);
+  log.scrollTop = log.scrollHeight;
+  return div;
+}
+
+async function loadConversations() {
+  const { conversations } = await (await fetch(hostApi('/chat/conversations'))).json();
+  document.getElementById('conversations').replaceChildren(
+    ...conversations.map((conv) =>
+      el('li', {
+        textContent: conv.title || conv.id,
+        title: conv.title || conv.id,
+        className: conv.id === conversationId ? 'active' : '',
+        onclick: () => openConversation(conv.id),
+      }),
+    ),
+  );
+  return conversations;
+}
+
+async function openConversation(id) {
+  conversationId = id;
+  log.replaceChildren();
+  chatStatus.textContent = 'loading history…';
+  try {
+    const { messages } = await (await fetch(hostApi(`/chat/${id}/history`))).json();
+    for (const message of messages) appendMsg(message.text, message.role);
+    chatStatus.textContent = '';
+  } catch (err) {
+    chatStatus.textContent = String(err);
+  }
+  loadConversations();
+}
+
+function loadChat() {
+  if (chatLoaded) return;
+  chatLoaded = true;
+  loadConversations()
+    .then((conversations) => {
+      if (conversations.length > 0) openConversation(conversations[0].id);
+    })
+    .catch(() => {});
+}
+
+document.getElementById('new-chat').addEventListener('click', () => {
+  conversationId = null;
+  log.replaceChildren();
+  chatStatus.textContent = '';
+  loadConversations();
+});
+
+document.getElementById('chat-form').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const input = document.getElementById('chat-input');
+  const send = document.getElementById('chat-send');
+  const message = input.value.trim();
+  if (!message) return;
+  input.value = '';
+  send.disabled = true;
+  appendMsg(message, 'user');
+  const reply = appendMsg('', 'assistant');
+  chatStatus.textContent = 'thinking…';
+
+  try {
+    const res = await fetch(hostApi('/chat'), {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message, ...(conversationId ? { conversationId } : {}) }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
+    const isNew = !conversationId;
+    conversationId = res.headers.get('x-conversation-id') || conversationId;
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const frames = buffer.split('\n\n');
+      buffer = frames.pop();
+      for (const frame of frames) {
+        const dataLine = frame.split('\n').find((line) => line.startsWith('data: '));
+        if (!dataLine) continue;
+        const agentEvent = JSON.parse(dataLine.slice(6));
+        if (agentEvent.type === 'text') {
+          reply.textContent += agentEvent.text;
+          log.scrollTop = log.scrollHeight;
+        }
+        if (agentEvent.type === 'tool_use') chatStatus.textContent = `using tool: ${agentEvent.name}`;
+        if (agentEvent.type === 'result') {
+          chatStatus.textContent = agentEvent.ok
+            ? `done${agentEvent.costUsd ? ` ($${agentEvent.costUsd.toFixed(4)})` : ''}`
+            : `error: ${agentEvent.error}`;
+        }
+      }
+    }
+    if (isNew) loadConversations();
+  } catch (err) {
+    chatStatus.textContent = String(err);
+  } finally {
+    send.disabled = false;
+    input.focus();
+  }
+});
+
+route();
+</script>
+</body>
+</html>