procesio-cli 0.1.1__py3-none-any.whl

procesio_cli/dashboard/web/procesio_env.js

@@ -0,0 +1,187 @@
+// PROCESIO environments panel. Switch the default environment, add a client
+// environment, and see credentials grouped by the environment they authenticate.
+// Every operation calls an existing procesio tool action via /api/procesio/* -
+// the dashboard adds no logic of its own, so this stays a thin, maintainable shell.
+(function () {
+  const App = window.App;
+  const el = App.el;
+  const toast = App.toast;
+  const NAME_RE = /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
+
+  function closeModal() { document.getElementById("modalRoot").innerHTML = ""; }
+
+  function shell(title, hint, body, foot) {
+    const root = document.getElementById("modalRoot");
+    root.innerHTML = "";
+    const box = el("div", { class: "modal" },
+      el("h3", null, title),
+      hint ? el("p", { class: "hint" }, hint) : null,
+      body,
+      el("div", { class: "modal-foot" }, ...foot));
+    const bg = el("div", { class: "modal-bg" }, box);
+    bg.addEventListener("click", (e) => { if (e.target === bg) closeModal(); });
+    root.appendChild(bg);
+    return box;
+  }
+
+  async function open() {
+    const body = el("div");
+    shell("PROCESIO environments",
+      "An environment is one PROCESIO installation (<Client>-<ENV>) with its own hosts and credentials. Switching the default moves every action - and the credential bound to it - onto that installation. Unbound credentials stay on Internal-PROD.",
+      body, [el("button", { class: "btn ghost", onclick: closeModal }, "Close")]);
+    await render(body);
+  }
+
+  async function render(body) {
+    body.innerHTML = "";
+    body.appendChild(el("div", { class: "meta" }, "loading environments..."));
+    let data;
+    try { data = await API.get("/api/procesio/state"); }
+    catch (e) { body.innerHTML = ""; body.appendChild(el("div", { class: "errmsg" }, String(e.message || e))); return; }
+    body.innerHTML = "";
+
+    if (data.environments_error) {
+      body.appendChild(el("div", { class: "errmsg" },
+        "Could not read environments: " + (data.environments_error.message || "unknown")
+        + ". Is a procesio credential set up?"));
+    }
+    renderEnvironments(body, data.environments);
+    renderCredentials(body, data.credentials, data.environments);
+  }
+
+  // -- environments ---------------------------------------------------------
+
+  function renderEnvironments(body, env) {
+    if (!env) return;
+    const def = env.default_environment;
+    const rows = el("div", { class: "rows" });
+    (env.environments || []).forEach(e => {
+      const isDef = e.name === def;
+      const badge = el("span", { class: "meta", style: "margin-left:8px" },
+        (e.builtin ? "built-in" : "custom") + " · " + (e.web_base || ""));
+      const controls = el("div", { class: "v" });
+      if (isDef) controls.appendChild(el("span", { class: "dot green", title: "active default" }));
+      else controls.appendChild(el("button", { class: "btn ghost sm",
+        onclick: () => switchTo(body, e.name) }, "Make default"));
+      if (!e.builtin) controls.appendChild(el("button", { class: "btn danger sm",
+        onclick: () => removeEnv(body, e.name) }, "Remove"));
+      rows.appendChild(el("div", { class: "row" },
+        el("div", { class: "k" },
+          el("span", { class: "dot " + (isDef ? "green" : "amber") }),
+          " " + e.name + (isDef ? " (default)" : ""),
+          (e.credentials && e.credentials.length)
+            ? el("span", { class: "meta", style: "margin-left:8px" }, e.credentials.length + " cred(s)")
+            : el("span", { class: "meta", style: "margin-left:8px; color:var(--warn,#b26a00)" }, "no credential"),
+          badge),
+        controls));
+    });
+    body.appendChild(el("h4", { style: "margin:6px 0 4px" }, "Environments"));
+    body.appendChild(rows);
+    body.appendChild(addEnvForm(body));
+  }
+
+  function addEnvForm(body) {
+    const name = el("input", { placeholder: "Client-ENV, e.g. Delgaz-PROD" });
+    const web = el("input", { placeholder: "web API host, https://webapi.<host>" });
+    const app = el("input", { placeholder: "front-end host, https://<host>" });
+    const forms = el("input", { placeholder: "forms host, https://forms.<host>" });
+    const makeDefault = el("input", { type: "checkbox" });
+    const add = el("button", { class: "btn" }, "Add environment");
+    add.addEventListener("click", async () => {
+      const payload = {
+        name: (name.value || "").trim(),
+        web_base: (web.value || "").trim(),
+        app_base: (app.value || "").trim(),
+        forms_base: (forms.value || "").trim(),
+        make_default: makeDefault.checked,
+      };
+      if (!NAME_RE.test(payload.name)) { toast("name must look like Client-ENV (letters/digits/.-_)", "bad"); return; }
+      if (!payload.web_base || !payload.app_base || !payload.forms_base) { toast("all three host URLs are required", "bad"); return; }
+      add.disabled = true;
+      try {
+        const r = await API.post("/api/procesio/add-environment", payload);
+        if (r.ok) { toast("added '" + payload.name + "'", "ok"); if (payload.make_default) App.refresh(); await render(body); }
+        else toast("add failed: " + ((r.error && r.error.message) || "unknown"), "bad");
+      } catch (e) { toast("add failed: " + e.message, "bad"); }
+      finally { add.disabled = false; }
+    });
+    return el("details", { class: "field", style: "margin-top:12px" },
+      el("summary", null, "Add a client environment"),
+      el("div", { class: "col", style: "margin-top:8px" },
+        name, web, app, forms,
+        el("label", { class: "chk" }, makeDefault, " make it the default now"),
+        el("div", { class: "rowflex" }, add)));
+  }
+
+  async function switchTo(body, name) {
+    try {
+      const r = await API.post("/api/procesio/set-environment", { name });
+      if (r.ok) {
+        toast("switched to " + name, "ok");
+        App.refresh();
+        if (App.validateOne) App.validateOne({ kind: "tool", name: "procesio" });
+      } else toast("switch failed: " + ((r.error && r.error.message) || "unknown"), "bad");
+    } catch (e) { toast("switch failed: " + e.message, "bad"); }
+    await render(body);
+  }
+
+  async function removeEnv(body, name) {
+    if (!confirm("Remove the environment '" + name + "'? This only deletes its URL entry - credentials are untouched.")) return;
+    try {
+      const r = await API.post("/api/procesio/remove-environment", { name });
+      toast(r.ok ? "removed '" + name + "'" : "remove failed: " + ((r.error && r.error.message) || ""), r.ok ? "ok" : "bad");
+      if (r.ok) App.refresh();
+    } catch (e) { toast("remove failed: " + e.message, "bad"); }
+    await render(body);
+  }
+
+  // -- credentials ----------------------------------------------------------
+
+  function renderCredentials(body, creds, env) {
+    body.appendChild(el("h4", { style: "margin:16px 0 4px" }, "Credentials by environment"));
+    if (!creds) { body.appendChild(el("div", { class: "meta" }, "no credentials readable")); return; }
+    const def = creds.default;
+    const rows = el("div", { class: "rows" });
+    (creds.profiles || []).forEach(p => {
+      const isDef = p.is_default;
+      const controls = el("div", { class: "v" });
+      if (!isDef) controls.appendChild(el("button", { class: "btn ghost sm",
+        onclick: () => makeDefaultCred(body, p.name) }, "Make default"));
+      controls.appendChild(el("button", { class: "btn danger sm",
+        onclick: () => removeCred(body, p.name) }, "Remove"));
+      rows.appendChild(el("div", { class: "row" },
+        el("div", { class: "k" },
+          el("span", { class: "dot " + (isDef ? "green" : "amber") }),
+          " " + p.name + (isDef ? " (default)" : ""),
+          el("span", { class: "meta", style: "margin-left:8px" },
+            (p.type || "") + " · " + (p.environment || "Internal-PROD")
+            + (p.workspace ? " · " + p.workspace : ""))),
+        controls));
+    });
+    body.appendChild(rows);
+    body.appendChild(el("p", { class: "hint", style: "margin-top:8px" },
+      "To add a credential bound to an environment (it needs a secret), run: "
+      + "run-tool procesio add-credential --name <label> --type userpass --username <you> --environment <Client-ENV>"));
+  }
+
+  async function makeDefaultCred(body, name) {
+    try {
+      const r = await API.post("/api/procesio/set-default-credential", { name });
+      if (r.ok) { toast("default credential -> " + name, "ok"); App.refresh(); if (App.validateOne) App.validateOne({ kind: "tool", name: "procesio" }); }
+      else toast("failed: " + ((r.error && r.error.message) || "unknown"), "bad");
+    } catch (e) { toast("failed: " + e.message, "bad"); }
+    await render(body);
+  }
+
+  async function removeCred(body, name) {
+    if (!confirm("Remove the credential profile '" + name + "'? This deletes it from Windows Credential Manager.")) return;
+    try {
+      const r = await API.post("/api/procesio/remove-credential", { name });
+      toast(r.ok ? "removed '" + name + "'" : "remove failed: " + ((r.error && r.error.message) || ""), r.ok ? "ok" : "bad");
+      if (r.ok) App.refresh();
+    } catch (e) { toast("remove failed: " + e.message, "bad"); }
+    await render(body);
+  }
+
+  if (window.Actions) window.Actions.procesioEnvironments = () => open();
+})();

procesio_cli/dashboard/web/styles.css

@@ -0,0 +1,207 @@
+:root {
+  --bg: #0e1116;
+  --panel: #161b22;
+  --panel2: #1c232d;
+  --border: #2a323d;
+  --text: #e6edf3;
+  --muted: #8b949e;
+  --accent: #4c8dff;
+  --accent2: #2f6bd0;
+  --green: #3fb950;
+  --red: #f85149;
+  --amber: #d29922;
+  --gray: #6e7681;
+  --shadow: 0 4px 16px rgba(0,0,0,.35);
+  --radius: 10px;
+  --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f4f6f9; --panel: #ffffff; --panel2: #f0f3f7; --border: #d6dde5;
+    --text: #1b2430; --muted: #5a6673; --shadow: 0 4px 14px rgba(20,30,50,.10);
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; background: var(--bg); color: var(--text);
+  font-family: var(--sans); font-size: 14px; line-height: 1.5;
+}
+h1 { font-size: 17px; margin: 0; }
+.sub { margin: 0; color: var(--muted); font-size: 12px; font-family: var(--mono); }
+.hidden { display: none !important; }
+
+.topbar {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 14px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 20;
+}
+.brand { display: flex; gap: 14px; align-items: center; }
+.logo {
+  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .5px;
+}
+.topactions { display: flex; gap: 8px; }
+
+.btn {
+  background: var(--accent); color: #fff; border: none; border-radius: 8px;
+  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
+  font-family: var(--sans);
+}
+.btn:hover { background: var(--accent2); }
+.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
+.btn.ghost:hover { background: var(--panel2); }
+.btn.sm { padding: 4px 10px; font-size: 12px; }
+.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--border); }
+.btn.danger:hover { background: rgba(248,81,73,.12); }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+
+.summary { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 22px 6px; }
+.stat {
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px 16px; min-width: 120px; flex: 1;
+}
+.stat .n { font-size: 22px; font-weight: 700; font-family: var(--mono); }
+.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
+.stat .sub2 { font-size: 12px; margin-top: 2px; }
+
+.banner {
+  margin: 8px 22px; padding: 16px 18px; border-radius: var(--radius);
+  background: rgba(76,141,255,.08); border: 1px solid var(--accent);
+}
+.banner h3 { margin: 0 0 6px; }
+.banner ol { margin: 8px 0 12px 18px; padding: 0; color: var(--muted); }
+.banner li { margin: 3px 0; }
+
+.tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
+.tab {
+  background: none; border: none; color: var(--muted); padding: 9px 14px;
+  cursor: pointer; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent;
+}
+.tab:hover { color: var(--text); }
+.tab.active { color: var(--text); border-bottom-color: var(--accent); }
+
+.toolbar { display: flex; gap: 14px; align-items: center; padding: 12px 22px; flex-wrap: wrap; }
+.toolbar input[type=search] {
+  flex: 1; min-width: 200px; background: var(--panel); border: 1px solid var(--border);
+  border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px;
+}
+.chk { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
+
+.content { padding: 6px 22px 60px; }
+.loading { color: var(--muted); padding: 40px; text-align: center; }
+
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
+
+.card {
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
+}
+.card.err { border-color: var(--red); }
+.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
+.card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
+.card-title .name { font-family: var(--mono); }
+.card-desc { color: var(--muted); font-size: 12.5px; margin: 0; }
+.badge {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
+  padding: 2px 7px; border-radius: 20px; background: var(--panel2); color: var(--muted);
+  border: 1px solid var(--border);
+}
+
+.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
+.dot.green { background: var(--green); box-shadow: 0 0 0 3px rgba(63,185,80,.15); }
+.dot.red { background: var(--red); box-shadow: 0 0 0 3px rgba(248,81,73,.15); }
+.dot.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(210,153,34,.15); }
+.dot.gray { background: var(--gray); }
+.dot.pulse { animation: pulse 1s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
+
+.rows { display: flex; flex-direction: column; gap: 6px; }
+.row {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  background: var(--panel2); border-radius: 7px; padding: 6px 10px; font-size: 13px;
+}
+.row .k { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
+.row .v { display: flex; align-items: center; gap: 8px; }
+.pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
+.pill.ok { color: var(--green); background: rgba(63,185,80,.12); }
+.pill.bad { color: var(--red); background: rgba(248,81,73,.12); }
+.pill.unknown { color: var(--muted); background: var(--panel); border: 1px solid var(--border); }
+.pill.warn { color: var(--amber); background: rgba(210,153,34,.12); }
+
+.card-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
+.meta { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
+.errmsg { color: var(--red); font-size: 12px; font-family: var(--mono); word-break: break-word; }
+
+.section-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
+.section-title h2 { font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
+.section-title .line { flex: 1; height: 1px; background: var(--border); }
+
+/* modal */
+.modal-bg {
+  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center;
+  z-index: 50; padding: 20px;
+}
+.modal {
+  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
+  box-shadow: var(--shadow); width: min(560px, 100%); max-height: 88vh; overflow: auto;
+  padding: 20px 22px;
+}
+.modal h3 { margin: 0 0 4px; }
+.modal .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
+.field { margin-bottom: 12px; }
+.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
+.field input, .field textarea, .field select {
+  width: 100%; background: var(--panel2); border: 1px solid var(--border);
+  border-radius: 7px; padding: 8px 10px; color: var(--text); font-size: 13px; font-family: var(--mono);
+}
+.field textarea { min-height: 120px; resize: vertical; }
+.field .err { color: var(--red); font-size: 11.5px; margin-top: 4px; }
+.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+
+.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
+.toast {
+  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
+  border-radius: 8px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px; max-width: 360px;
+}
+.toast.ok { border-left-color: var(--green); }
+.toast.bad { border-left-color: var(--red); }
+
+pre.log {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
+  font-family: var(--mono); font-size: 12px; max-height: 300px; overflow: auto; white-space: pre-wrap;
+}
+code { font-family: var(--mono); background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
+a { color: var(--accent); }
+
+.intro {
+  margin: 14px 22px 0; padding: 12px 16px; border-radius: var(--radius);
+  background: var(--panel); border: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
+}
+.intro-main { font-size: 13px; color: var(--muted); max-width: 780px; }
+.intro-main strong { color: var(--text); }
+.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+
+.setup { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; display: inline-block; width: fit-content; }
+.setup.ok { color: var(--green); background: rgba(63,185,80,.12); }
+.setup.warn { color: var(--amber); background: rgba(210,153,34,.14); }
+.setup.bad { color: var(--red); background: rgba(248,81,73,.12); }
+.card-desc.clamp {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; max-height: 3.1em;
+}
+
+.steps { margin: 2px 0 14px 20px; padding: 0; color: var(--text); font-size: 13px; }
+.steps li { margin: 5px 0; }
+details.advanced { margin: 8px 0 4px; }
+details.advanced summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
+
+.copilot-log { max-height: 340px; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 4px; }
+.cmsg { padding: 8px 12px; border-radius: 10px; font-size: 13px; max-width: 88%; line-height: 1.45; }
+.cmsg.user { align-self: flex-end; background: var(--accent); color: #fff; }
+.cmsg.bot { align-self: flex-start; background: var(--panel2); border: 1px solid var(--border); }
+.csugg { align-self: flex-start; }
+.rowflex { display: flex; gap: 8px; }