@ssm123ssm/vault 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssm123ssm/vault",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "description": "Preview Vault agent CLI",
   "bin": {

package/preview-agent.js

@@ -235,36 +235,206 @@ async function selectDirectoryViaServer() {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Preview Agent - Select Folder</title>
     <style>
-      body { font-family: ui-sans-serif, system-ui; background:#0f1117; color:#f3f1eb; margin:0; }
-      .wrap { max-width: 720px; margin: 0 auto; padding: 24px; }
-      .card { background:#151a24; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px; }
-      .path { font-family: ui-monospace, SFMono-Regular; font-size: 12px; }
-      .list { margin-top:12px; display:grid; gap:8px; }
-      button { background:#222837; color:#f3f1eb; border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:8px 12px; cursor:pointer; }
-      button:hover { border-color:#f97316; }
-      .primary { background:#f97316; color:#1a1410; font-weight:600; }
-      .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+      :root {
+        --bg: #0b0f14;
+        --bg-2: #0f1624;
+        --panel: #141c2b;
+        --panel-2: #0f1522;
+        --text: #e9edf2;
+        --muted: #94a3b8;
+        --accent: #ff7a18;
+        --accent-2: #ffb347;
+        --border: rgba(255,255,255,0.08);
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        color: var(--text);
+        font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+        background:
+          radial-gradient(1100px 600px at 15% -10%, rgba(255, 179, 71, 0.16), transparent 60%),
+          radial-gradient(900px 500px at 90% 0%, rgba(255, 122, 24, 0.18), transparent 55%),
+          linear-gradient(180deg, var(--bg), var(--bg-2));
+      }
+      .wrap { max-width: 900px; margin: 0 auto; padding: 28px 24px 40px; }
+      header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 18px; }
+      h2 { margin: 0; font-size: 22px; letter-spacing: 0.3px; }
+      .subtitle { color: var(--muted); font-size: 13px; }
+      .panel {
+        background: linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+        border: 1px solid var(--border);
+        border-radius: 18px;
+        padding: 16px;
+        box-shadow: 0 20px 50px rgba(0,0,0,0.35);
+      }
+      .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
+      .pathline {
+        margin-top: 10px;
+        display:flex;
+        align-items:center;
+        gap:10px;
+        padding: 10px 12px;
+        border-radius: 12px;
+        background: var(--panel-2);
+        border: 1px solid var(--border);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+        font-size: 12px;
+        color: #d6dee8;
+        overflow-x: auto;
+      }
+      .breadcrumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top: 10px; }
+      .crumb {
+        border: 1px solid transparent;
+        background: rgba(255,255,255,0.05);
+        color: #e2e8f0;
+        padding: 6px 10px;
+        border-radius: 999px;
+        cursor: pointer;
+        font-size: 12px;
+      }
+      .crumb:hover { border-color: rgba(255,255,255,0.2); }
+      .list { margin-top:14px; display:grid; gap:10px; }
+      .entry {
+        display:flex;
+        align-items:center;
+        justify-content:space-between;
+        width: 100%;
+        background: var(--panel);
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 12px 14px;
+        cursor: pointer;
+        text-align: left;
+      }
+      .entry:hover { border-color: rgba(255, 122, 24, 0.6); }
+      .entry span { font-size: 14px; }
+      .entry small { color: var(--muted); }
+      .muted { color: var(--muted); font-size: 12px; }
+      .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
+      button {
+        background: rgba(255,255,255,0.06);
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 10px 14px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: border-color 0.2s ease, transform 0.2s ease;
+      }
+      button:hover { border-color: rgba(255, 122, 24, 0.7); transform: translateY(-1px); }
+      button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+      .primary {
+        background: linear-gradient(135deg, var(--accent), var(--accent-2));
+        color: #1b1209;
+        font-weight: 600;
+        border: none;
+      }
+      .ghost { background: transparent; }
+      input[type="text"] {
+        background: rgba(10, 14, 20, 0.6);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 10px 12px;
+        color: var(--text);
+        font-size: 13px;
+        min-width: 220px;
+      }
+      .footer { margin-top: 14px; font-size: 12px; color: var(--muted); }
     </style>
   </head>
   <body>
     <div class="wrap">
-      <h2>Select a folder for this project</h2>
-      <div class="card">
-        <div class="row">
-          <button id="upBtn">Up</button>
-          <button id="useBtn" class="primary">Use this folder</button>
+      <header>
+        <div>
+          <h2>Choose a folder</h2>
+          <div class="subtitle">Pick the folder that should be linked to this project.</div>
+        </div>
+        <div class="muted" id="status">Waiting for selection…</div>
+      </header>
+      <div class="panel">
+        <div class="toolbar">
+          <button id="upBtn" class="ghost">Up one level</button>
+          <input id="filter" type="text" placeholder="Filter folders…" />
         </div>
-        <div class="path" id="path"></div>
+        <div class="pathline" id="path"></div>
+        <div class="breadcrumbs" id="breadcrumbs"></div>
         <div class="list" id="list"></div>
+        <div class="actions">
+          <button id="confirmBtn" class="primary">Confirm selection</button>
+          <button id="closeBtn" class="ghost">Close window</button>
+        </div>
       </div>
-      <p style="font-size:12px;opacity:0.7;margin-top:12px;">Leave this window open until selection is confirmed.</p>
+      <div class="footer">Leave this window open until selection is confirmed. Closing it early will cancel the assignment.</div>
     </div>
     <script>
       let currentPath = "";
+      let allEntries = [];
       const pathEl = document.getElementById("path");
       const listEl = document.getElementById("list");
       const upBtn = document.getElementById("upBtn");
-      const useBtn = document.getElementById("useBtn");
+      const confirmBtn = document.getElementById("confirmBtn");
+      const closeBtn = document.getElementById("closeBtn");
+      const statusEl = document.getElementById("status");
+      const filterEl = document.getElementById("filter");
+      const crumbsEl = document.getElementById("breadcrumbs");
+
+      function splitPathSegments(input) {
+        const hasBackslash = input.includes("\\\\") && !input.includes("/");
+        const sep = hasBackslash ? "\\\\" : "/";
+        const parts = input.split(sep).filter(Boolean);
+        const prefix = !hasBackslash && input.startsWith("/") ? "/" : "";
+        return { parts, sep, prefix };
+      }
+
+      function renderBreadcrumbs(pathValue) {
+        crumbsEl.innerHTML = "";
+        const { parts, sep, prefix } = splitPathSegments(pathValue);
+        if (!parts.length) return;
+        let acc = prefix || "";
+        parts.forEach((part, index) => {
+          if (!acc) {
+            acc = part;
+          } else if (acc === "/" || acc.endsWith(sep)) {
+            acc = acc + part;
+          } else {
+            acc = acc + sep + part;
+          }
+          const btn = document.createElement("button");
+          btn.className = "crumb";
+          btn.textContent = part;
+          btn.onclick = () => load(acc);
+          crumbsEl.appendChild(btn);
+          if (index < parts.length - 1) {
+            const dot = document.createElement("span");
+            dot.className = "muted";
+            dot.textContent = "›";
+            crumbsEl.appendChild(dot);
+          }
+        });
+      }
+
+      function renderList() {
+        const term = (filterEl.value || "").trim().toLowerCase();
+        listEl.innerHTML = "";
+        const entries = allEntries.filter((entry) =>
+          entry.name.toLowerCase().includes(term)
+        );
+        if (!entries.length) {
+          const empty = document.createElement("div");
+          empty.className = "muted";
+          empty.textContent = "No folders match this filter.";
+          listEl.appendChild(empty);
+          return;
+        }
+        entries.forEach((entry) => {
+          const btn = document.createElement("button");
+          btn.className = "entry";
+          btn.innerHTML = "<span>" + entry.name + "/</span><small>Open</small>";
+          btn.onclick = () => load(entry.path);
+          listEl.appendChild(btn);
+        });
+      }
 
       async function load(path) {
         const res = await fetch("/api/list?path=" + encodeURIComponent(path || ""));
@@ -272,25 +442,33 @@ async function selectDirectoryViaServer() {
         if (!res.ok) return;
         currentPath = data.path;
         pathEl.textContent = currentPath;
-        listEl.innerHTML = "";
-        data.entries.forEach((entry) => {
-          const btn = document.createElement("button");
-          btn.textContent = entry.name + "/";
-          btn.onclick = () => load(entry.path);
-          listEl.appendChild(btn);
-        });
+        allEntries = data.entries || [];
+        renderList();
+        renderBreadcrumbs(currentPath);
         upBtn.onclick = () => load(data.parent);
+        confirmBtn.disabled = !currentPath;
       }
 
-      useBtn.onclick = async () => {
+      confirmBtn.onclick = async () => {
+        if (!currentPath) return;
+        statusEl.textContent = "Confirming selection…";
         await fetch("/api/select", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ path: currentPath }),
         });
-        useBtn.textContent = "Selected";
+        confirmBtn.textContent = "Confirmed";
+        statusEl.textContent = "Selection confirmed. You can close this window.";
+        setTimeout(() => window.close(), 150);
       };
 
+      closeBtn.onclick = () => {
+        window.close();
+        statusEl.textContent = "You can close this window now.";
+      };
+
+      filterEl.addEventListener("input", () => renderList());
+
       load("");
     </script>
   </body>
@@ -786,6 +964,14 @@ function runDaemon() {
             const sourceDir = daemonMode || uiMode
               ? await selectDirectoryViaServer()
               : await selectDirectory(process.cwd());
+            const selectionMode = daemonMode
+              ? "daemon"
+              : uiMode
+              ? "ui"
+              : "interactive";
+            console.log(
+              `[${agentLabel}] Selected folder (${selectionMode}): ${sourceDir}`
+            );
             config.projects = config.projects || {};
             config.projects[command.projectId] = {
               source: sourceDir,