dxcomplete 0.2.1 → 0.3.0

package/website/app.js

@@ -34,3 +34,180 @@ roleButtons.forEach((button, index) => {
     detailPanel.textContent = detail;
   });
 });
+
+const accountPanel = document.querySelector("[data-account]");
+let accountState;
+
+if (accountPanel) {
+  loadAccount();
+}
+
+async function loadAccount() {
+  accountPanel.innerHTML = `<p>Loading account state...</p>`;
+
+  try {
+    const response = await fetch("/api/dxcomplete/web/session", {
+      credentials: "same-origin"
+    });
+    accountState = await response.json();
+    renderAccount();
+  } catch {
+    accountPanel.innerHTML = `
+      <div class="account-message account-message--error">
+        Account state could not be loaded. Try again in a moment.
+      </div>
+    `;
+  }
+}
+
+function renderAccount(created) {
+  const error = new URLSearchParams(window.location.search).get("error");
+
+  if (!accountState?.authenticated) {
+    accountPanel.innerHTML = `
+      ${error ? `<div class="account-message account-message--error">Sign in could not be completed.</div>` : ""}
+      <div class="account-intro">
+        <p>Use Google sign in to create and view your DX Complete workspaces.</p>
+        <a class="account-primary" href="${escapeHtml(accountState?.signInUrl || "/api/dxcomplete/web/auth/google/start?returnTo=/account.html")}">Sign in with Google</a>
+      </div>
+    `;
+    return;
+  }
+
+  const workspaces = Array.isArray(accountState.workspaces) ? accountState.workspaces : [];
+  accountPanel.innerHTML = `
+    <div class="account-bar">
+      <div>
+        <span>Signed in</span>
+        <strong>${escapeHtml(accountState.actor?.email || accountState.actor?.displayName || "Google account")}</strong>
+      </div>
+      <button class="account-secondary" type="button" data-account-logout>Sign out</button>
+    </div>
+
+    <form class="account-form" data-account-form>
+      <label for="workspace-name">Workspace name</label>
+      <div class="account-form__row">
+        <input id="workspace-name" name="name" type="text" minlength="2" maxlength="120" required autocomplete="organization" />
+        <button class="account-primary" type="submit">Create workspace</button>
+      </div>
+      <p>Use a service or project name that your team will recognize later.</p>
+    </form>
+
+    <div data-account-result>
+      ${created ? renderCreatedWorkspace(created) : ""}
+    </div>
+
+    <div class="account-list">
+      <h2>Your Workspaces</h2>
+      ${workspaces.length ? workspaces.map(renderWorkspaceSummary).join("") : "<p>No workspaces yet.</p>"}
+    </div>
+  `;
+
+  accountPanel.querySelector("[data-account-logout]")?.addEventListener("click", logoutAccount);
+  accountPanel.querySelector("[data-account-form]")?.addEventListener("submit", createWorkspace);
+}
+
+async function createWorkspace(event) {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const result = accountPanel.querySelector("[data-account-result]");
+  const button = form.querySelector("button[type='submit']");
+  const formData = new FormData(form);
+  const name = String(formData.get("name") || "");
+
+  button.disabled = true;
+  result.innerHTML = `<div class="account-message">Creating workspace...</div>`;
+
+  try {
+    const response = await fetch("/api/dxcomplete/web/workspaces", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: {
+        "content-type": "application/json",
+        "x-dxc-csrf-token": accountState.csrfToken
+      },
+      body: JSON.stringify({ name })
+    });
+    const body = await response.json();
+
+    if (!response.ok) {
+      throw new Error(body.error_description || "Workspace could not be created.");
+    }
+
+    form.reset();
+    await refreshAccountState();
+    renderAccount(body);
+  } catch (error) {
+    result.innerHTML = `
+      <div class="account-message account-message--error">
+        ${escapeHtml(error instanceof Error ? error.message : "Workspace could not be created.")}
+      </div>
+    `;
+  } finally {
+    button.disabled = false;
+  }
+}
+
+async function logoutAccount() {
+  await fetch("/api/dxcomplete/web/logout", {
+    method: "POST",
+    credentials: "same-origin",
+    headers: {
+      "x-dxc-csrf-token": accountState.csrfToken
+    }
+  }).catch(() => undefined);
+
+  await loadAccount();
+}
+
+async function refreshAccountState() {
+  const response = await fetch("/api/dxcomplete/web/session", {
+    credentials: "same-origin"
+  });
+  accountState = await response.json();
+}
+
+function renderCreatedWorkspace(created) {
+  const env = created.install?.env || {};
+  const workspace = created.install?.workspaceConfig || {};
+  const envBlock = [
+    `DXC_SERVICE_URL=${env.DXC_SERVICE_URL || ""}`,
+    `DXC_SERVICE_CLIENT_ID=${env.DXC_SERVICE_CLIENT_ID || ""}`,
+    `DXC_SERVICE_CLIENT_SECRET=${env.DXC_SERVICE_CLIENT_SECRET || ""}`
+  ].join("\n");
+  const workspaceBlock = JSON.stringify(workspace, null, 2);
+
+  return `
+    <div class="account-result">
+      <h2>Workspace Created</h2>
+      <p>Save these values now. The secret is shown only once.</p>
+      <h3>Service Values</h3>
+      <pre><code>${escapeHtml(envBlock)}</code></pre>
+      <h3>Workspace JSON</h3>
+      <pre><code>${escapeHtml(workspaceBlock)}</code></pre>
+    </div>
+  `;
+}
+
+function renderWorkspaceSummary(workspace) {
+  const clients = Array.isArray(workspace.serviceClients) ? workspace.serviceClients : [];
+  return `
+    <article class="account-workspace">
+      <h3>${escapeHtml(workspace.name || workspace.workspaceId)}</h3>
+      <p>${escapeHtml(workspace.workspaceId || "")}</p>
+      <dl>
+        <div><dt>Roles</dt><dd>${escapeHtml((workspace.roles || []).join(", ") || "member")}</dd></div>
+        <div><dt>Service clients</dt><dd>${clients.length}</dd></div>
+      </dl>
+    </article>
+  `;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}

package/website/flow.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/glossary.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/index.html

@@ -17,6 +17,10 @@
           <small>Plan, deliver, run, measure</small>
         </span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
 
     <div class="layout">

package/website/objects.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/operating-guide.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/outcomes.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-build.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-elicit.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-go-live.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-measure.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-operate.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-orient.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/phase-weigh.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/roles.html

@@ -13,6 +13,10 @@
         <span class="brand-mark" aria-hidden="true">DX</span>
         <span><strong>DX Complete</strong><small>Plan, deliver, run, measure</small></span>
       </div>
+      <div class="topbar__actions">
+        <a class="topbar__link" href="https://www.npmjs.com/package/dxcomplete" target="_blank" rel="noreferrer">npm</a>
+        <a class="topbar__link" href="./account.html">Sign in</a>
+      </div>
     </header>
     <div class="layout">
       <aside class="sidebar" aria-label="Documentation pages">

package/website/styles.css

@@ -59,7 +59,7 @@ a {
   display: flex;
   min-height: 72px;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: 1.5rem;
   border-bottom: 1px solid rgb(215 220 226 / 84%);
   background: rgb(246 247 249 / 92%);
@@ -100,6 +100,211 @@ a {
   box-shadow: 0 8px 22px rgb(25 32 44 / 7%);
 }
 
+.topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.topbar__link {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--accent-strong);
+  font-size: 0.84rem;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0.62rem 0.78rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+  white-space: nowrap;
+}
+
+.topbar__link:hover,
+.topbar__link:focus {
+  border-color: var(--accent);
+  color: var(--ink);
+  transform: translateY(-1px);
+}
+
+.account-panel {
+  display: grid;
+  gap: 1.25rem;
+  margin-top: 2rem;
+}
+
+.account-intro,
+.account-bar,
+.account-form,
+.account-result,
+.account-workspace,
+.account-message {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: 0 12px 34px rgb(25 32 44 / 6%);
+}
+
+.account-intro,
+.account-form,
+.account-result,
+.account-workspace,
+.account-message {
+  padding: 1.25rem;
+}
+
+.account-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+}
+
+.account-bar span,
+.account-form label {
+  display: block;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.account-bar strong {
+  display: block;
+  margin-top: 0.1rem;
+}
+
+.account-primary,
+.account-secondary {
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-weight: 800;
+  line-height: 1;
+  min-height: 42px;
+  padding: 0.75rem 0.95rem;
+  text-decoration: none;
+}
+
+.account-primary {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.account-primary:hover,
+.account-primary:focus {
+  background: var(--accent-strong);
+}
+
+.account-primary:disabled {
+  cursor: progress;
+  opacity: 0.72;
+}
+
+.account-secondary {
+  border-color: var(--line);
+  background: var(--surface);
+  color: var(--accent-strong);
+}
+
+.account-secondary:hover,
+.account-secondary:focus {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
+.account-form__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.account-form input {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--ink);
+  font: inherit;
+  min-height: 42px;
+  padding: 0.65rem 0.75rem;
+}
+
+.account-form p,
+.account-intro p,
+.account-workspace p,
+.account-message {
+  color: var(--muted);
+}
+
+.account-result {
+  border-color: rgb(30 127 117 / 32%);
+  background: #f7fbfa;
+}
+
+.account-result h2,
+.account-result h3,
+.account-list h2,
+.account-workspace h3 {
+  margin: 0;
+}
+
+.account-result h3 {
+  margin-top: 1.2rem;
+  font-size: 0.95rem;
+}
+
+.account-result pre {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #20242b;
+  color: #ffffff;
+  margin: 0.5rem 0 0;
+  padding: 1rem;
+}
+
+.account-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.account-workspace dl {
+  display: grid;
+  gap: 0.45rem;
+  margin: 1rem 0 0;
+}
+
+.account-workspace dl div {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 0.75rem;
+}
+
+.account-workspace dt {
+  color: var(--muted);
+  font-weight: 800;
+}
+
+.account-workspace dd {
+  margin: 0;
+}
+
+.account-message--error {
+  border-color: rgb(180 98 18 / 34%);
+  background: #fff8ef;
+  color: #6d3a08;
+}
+
 .layout {
   display: grid;
   grid-template-columns: 290px minmax(0, 1fr);
@@ -1099,6 +1304,10 @@ p {
     padding: 18px 20px;
   }
 
+  .topbar__actions {
+    flex-wrap: wrap;
+  }
+
   .layout {
     display: block;
   }
@@ -1148,10 +1357,17 @@ p {
   .record-groups dl div,
   .record-item summary,
   .record-fields div,
+  .account-form__row,
+  .account-workspace dl div,
   .glossary-list div {
     grid-template-columns: 1fr;
   }
 
+  .account-bar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
 }
 
 @media (max-width: 520px) {

package/dist/http/service.d.ts

@@ -1,7 +0,0 @@
-import type { IncomingMessage, ServerResponse } from "node:http";
-export declare function closeDxcompleteServiceRuntime(): Promise<void>;
-export declare function closeDxcompleteHttpRuntime(): Promise<void>;
-export default function handleDxcompleteServiceRequest(req: IncomingMessage & {
-    body?: unknown;
-    query?: Record<string, unknown>;
-}, res: ServerResponse): Promise<void>;