pinokiod 8.0.39 → 8.0.41

package/server/views/vault.ejs

@@ -12,1545 +12,18 @@
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
-<style>
-.vault-page {
-  --vault-warning: #b06a09;
-  --vault-warning-soft: color-mix(in srgb, var(--vault-warning) 8%, var(--task-panel));
-  --vault-selected: color-mix(in srgb, var(--task-accent) 10%, var(--task-panel));
-  --vault-inline: 18px;
-  --vault-control-height: 28px;
-  --vault-row-height: 44px;
-  --vault-tree-row: 26px;
-  --vault-tree-path-row: 34px;
-}
-body.dark.vault-page {
-  --vault-warning: #dca451;
-  --vault-warning-soft: color-mix(in srgb, var(--vault-warning) 8%, var(--task-panel));
-  --vault-selected: color-mix(in srgb, var(--task-accent) 9%, var(--task-panel));
-}
-.vault-shell,
-.vault-shell * { box-sizing: border-box; }
-body.vault-page .task-container {
-  display: flex;
-  min-height: 0;
-  overflow: hidden;
-}
-.vault-shell {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-.vault-shell .task-shell-body {
-  display: block;
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-  padding: 0;
-}
-.vault-body {
-  display: flex;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex-direction: column;
-  color: var(--task-text);
-}
-.vault-overview {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 7px var(--vault-inline);
-  border-bottom: 1px solid var(--task-border);
-}
-.vault-metrics {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  align-items: stretch;
-}
-.vault-metric {
-  min-width: 0;
-  padding: 0 12px;
-  border: 0;
-  border-left: 1px solid var(--task-border);
-}
-.vault-metric:first-child { padding-left: 0; border-left: 0; }
-.vault-metric-value {
-  display: block;
-  color: var(--task-text);
-  font-size: 15px;
-  line-height: 1.15;
-  font-weight: 650;
-  letter-spacing: -0.015em;
-  white-space: nowrap;
-}
-.vault-metric-label {
-  display: block;
-  margin-top: 1px;
-  color: var(--task-muted);
-  font-size: 10.5px;
-  line-height: 1.2;
-  white-space: nowrap;
-}
-button.vault-metric {
-  appearance: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-button.vault-metric:hover .vault-metric-label,
-button.vault-metric:focus-visible .vault-metric-label { color: var(--task-text); }
-.vault-overview-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  flex: 0 0 auto;
-}
-.vault-button,
-.vault-icon-button,
-.vault-text-button {
-  appearance: none;
-  border: 1px solid var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
-  color: var(--task-text);
-  font: inherit;
-  cursor: pointer;
-}
-.vault-button {
-  display: inline-flex;
-  min-height: var(--vault-control-height);
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding: 6px 12px;
-  border-radius: 7px;
-  font-size: 12px;
-  line-height: 1;
-  white-space: nowrap;
-}
-.vault-button:hover { background: var(--task-soft); }
-.vault-button.primary {
-  border-color: var(--task-accent-surface);
-  background: var(--task-accent-surface);
-  color: var(--task-accent-contrast);
-}
-.vault-button.primary:hover { background: var(--task-accent-hover); }
-.vault-button:disabled { opacity: .5; cursor: default; }
-.vault-icon-button {
-  width: var(--vault-control-height);
-  height: var(--vault-control-height);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border-radius: 7px;
-  font-size: 12px;
-}
-.vault-icon-button:hover { background: var(--task-soft); }
-.vault-advanced { position: relative; }
-.vault-advanced > summary { list-style: none; cursor: pointer; }
-.vault-advanced > summary::-webkit-details-marker { display: none; }
-.vault-advanced-menu {
-  position: absolute;
-  z-index: 20;
-  top: calc(100% + 6px);
-  right: 0;
-  width: 272px;
-  box-sizing: border-box;
-  padding: 12px;
-  border: 1px solid var(--task-border-strong);
-  border-radius: 9px;
-  background: var(--task-panel);
-  box-shadow: 0 12px 30px color-mix(in srgb, var(--task-text) 10%, transparent);
-}
-.vault-advanced-title { color: var(--task-text); font-size: 12.5px; font-weight: 650; }
-.vault-advanced-copy { margin: 4px 0 10px; color: var(--task-muted); font-size: 11px; line-height: 1.45; }
-.vault-button:focus-visible,
-.vault-icon-button:focus-visible,
-.vault-text-button:focus-visible,
-button.vault-metric:focus-visible,
-.vault-rail-add:focus-visible,
-.vault-nav-row:focus-visible,
-.vault-search input:focus-visible,
-.vault-select:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--task-accent) 55%, transparent);
-  outline-offset: 2px;
-}
-.vault-scan-state,
-.vault-result,
-.vault-feedback {
-  display: none;
-  align-items: center;
-  min-height: 38px;
-  gap: 9px;
-  padding: 6px var(--vault-inline);
-  border-bottom: 1px solid var(--task-border);
-  font-size: 12.5px;
-}
-.vault-scan-state {
-  position: relative;
-  overflow: hidden;
-}
-.vault-scan-state.show,
-.vault-result.show,
-.vault-feedback.show { display: flex; }
-.vault-scan-state i,
-.vault-result > i { color: var(--task-accent); }
-.vault-result strong { font-weight: 650; }
-.vault-result-detail,
-.vault-scan-detail { color: var(--task-muted); }
-.vault-scan-detail {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.vault-scan-percent {
-  flex: 0 0 auto;
-  margin-left: auto;
-  color: var(--task-muted);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 650;
-}
-.vault-progress-track {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  overflow: hidden;
-  background: color-mix(in srgb, var(--task-accent) 12%, transparent);
-}
-.vault-progress-bar {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--task-accent);
-  transform-origin: left center;
-}
-.vault-progress-bar.determinate {
-  transform: scaleX(var(--vault-progress, 0));
-  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
-}
-.vault-progress-bar.indeterminate {
-  transform: scaleX(1);
-  animation: vault-progress-pulse 1.4s ease-in-out infinite;
-}
-@keyframes vault-progress-pulse {
-  0%, 100% { opacity: .22; }
-  50% { opacity: .78; }
-}
-.vault-result .vault-button { min-height: 28px; margin-left: auto; padding: 4px 10px; }
-.vault-feedback { min-height: 34px; background: var(--task-soft); }
-.vault-feedback.error { color: var(--vault-warning); }
-.vault-explorer {
-  display: grid;
-  min-height: 0;
-  flex: 1 1 auto;
-  grid-template-columns: 248px minmax(0, 1fr);
-  overflow: hidden;
-}
-.vault-rail {
-  min-width: 0;
-  min-height: 0;
-  border-right: 1px solid var(--task-border);
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-.vault-rail-section {
-  display: block;
-  min-height: 0;
-  padding: 12px 9px;
-}
-.vault-rail-section + .vault-rail-section { border-top: 1px solid var(--task-border); }
-.vault-rail-label {
-  margin: 0 7px 6px;
-  color: var(--task-muted);
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: .08em;
-}
-.vault-rail-heading {
-  display: flex;
-  height: 20px;
-  align-items: center;
-  margin: 0 5px 4px 7px;
-}
-.vault-rail-heading .vault-rail-label { flex: 1 1 auto; margin: 0; }
-.vault-rail-add {
-  width: 20px;
-  height: 20px;
-  display: inline-flex;
-  flex: 0 0 20px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--task-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 10px;
-}
-.vault-rail-add:hover { background: var(--task-soft); color: var(--task-text); }
-.vault-rail-add:disabled { opacity: .45; cursor: default; }
-.vault-nav-list { display: grid; gap: 0; }
-.vault-nav-row {
-  width: 100%;
-  min-width: 0;
-  height: var(--vault-tree-row);
-  min-height: var(--vault-tree-row);
-  max-height: var(--vault-tree-row);
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 6px;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--task-text);
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-}
-.vault-nav-row:hover { background: var(--task-soft); }
-.vault-nav-row.selected {
-  border-color: color-mix(in srgb, var(--task-accent) 72%, var(--task-border-strong));
-  background: var(--vault-selected);
-}
-.vault-nav-row > i { width: 15px; color: var(--task-muted); text-align: center; font-size: 11.5px; }
-.vault-nav-copy { min-width: 0; }
-.vault-nav-name {
-  display: block;
-  overflow: hidden;
-  font-size: 11.75px;
-  font-weight: 520;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.vault-nav-path {
-  display: block;
-  overflow: hidden;
-  margin-top: 1px;
-  color: var(--task-muted);
-  font-size: 10px;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.vault-nav-count {
-  color: var(--task-muted);
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-}
-.vault-nav-count.attention { color: var(--vault-warning); font-weight: 650; }
-#vault-locations {
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: 0;
-}
-.vault-source-line {
-  display: grid;
-  flex: 0 0 auto;
-  height: var(--vault-tree-row);
-  min-height: var(--vault-tree-row);
-  max-height: var(--vault-tree-row);
-  grid-template-columns: 18px minmax(0, 1fr);
-  align-items: start;
-  align-self: stretch;
-  margin: 0;
-}
-.vault-source-line.has-path {
-  height: var(--vault-tree-path-row);
-  min-height: var(--vault-tree-path-row);
-  max-height: var(--vault-tree-path-row);
-}
-.vault-source-line.depth-1 { padding-left: 12px; }
-.vault-source-line.depth-2 { padding-left: 24px; }
-.vault-source-toggle {
-  width: 18px;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--task-muted);
-  cursor: pointer;
-  font-size: 10px;
-}
-.vault-source-toggle.placeholder { cursor: default; }
-.vault-source-line .vault-nav-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
-.vault-source-line.has-path .vault-nav-row {
-  height: var(--vault-tree-path-row);
-  min-height: var(--vault-tree-path-row);
-  max-height: var(--vault-tree-path-row);
-}
-.vault-rail-footer { padding: 0 16px 12px; }
-.vault-text-button {
-  padding: 2px 0;
-  border: 0;
-  background: transparent;
-  color: var(--task-muted);
-  font-size: 11.5px;
-}
-.vault-text-button:hover { color: var(--task-text); }
-.vault-pane {
-  display: grid;
-  min-width: 0;
-  min-height: 0;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  overflow: hidden;
-}
-.vault-pane-action-note { color: var(--task-muted); font-size: 11.5px; white-space: nowrap; }
-.vault-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 44px;
-  padding: 6px var(--vault-inline);
-  border-bottom: 1px solid var(--task-border);
-}
-.vault-search { position: relative; width: min(320px, 55%); }
-.vault-search i {
-  position: absolute;
-  top: 50%;
-  left: 10px;
-  color: var(--task-muted);
-  font-size: 12px;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-.vault-search input,
-.vault-select {
-  height: 30px;
-  box-sizing: border-box;
-  border: 1px solid var(--task-border-strong);
-  border-radius: 7px;
-  background: var(--task-panel);
-  color: var(--task-text);
-  font: inherit;
-  font-size: 12px;
-}
-.vault-search input { width: 100%; padding: 5px 10px 5px 30px; }
-.vault-search input::placeholder { color: var(--task-muted); }
-.vault-select { padding: 4px 28px 4px 9px; }
-.vault-toolbar-count { margin-left: auto; color: var(--task-muted); font-size: 11.5px; white-space: nowrap; }
-.vault-table { min-width: 660px; }
-.vault-table-wrap {
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-.vault-columns,
-.vault-file-row,
-.vault-group-row {
-  display: grid;
-  grid-template-columns: minmax(220px, 1.6fr) minmax(64px, .4fr) minmax(118px, .8fr) minmax(96px, .6fr) minmax(76px, auto);
-  align-items: center;
-  column-gap: 10px;
-}
-.vault-table.matches .vault-columns,
-.vault-table.matches .vault-file-row,
-.vault-table.matches .vault-group-row {
-  grid-template-columns: minmax(210px, 1.5fr) minmax(64px, .4fr) minmax(140px, 1fr) minmax(96px, .55fr) minmax(76px, auto);
-}
-.vault-columns {
-  min-height: 34px;
-  padding: 0 var(--vault-inline);
-  border-bottom: 1px solid var(--task-border);
-  color: var(--task-muted);
-  font-size: 10.5px;
-  font-weight: 600;
-}
-.vault-file-row {
-  min-height: var(--vault-row-height);
-  padding: 6px var(--vault-inline);
-  border-bottom: 1px solid var(--task-border);
-  font-size: 12px;
-}
-.vault-file-row:hover { background: color-mix(in srgb, var(--task-soft) 64%, transparent); }
-.vault-file-row.directory { min-height: 38px; padding-top: 4px; padding-bottom: 4px; background: color-mix(in srgb, var(--task-soft) 38%, transparent); }
-.vault-group-row {
-  min-height: 48px;
-  padding: 6px var(--vault-inline);
-  border-bottom: 1px solid var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-soft) 56%, transparent);
-}
-.vault-group-main { min-width: 0; }
-.vault-group-title {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 8px;
-  color: var(--task-text);
-  font-size: 12.5px;
-  font-weight: 600;
-}
-.vault-group-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.vault-group-meta { margin: 2px 0 0 23px; color: var(--task-muted); font-size: 10px; }
-.vault-group-action { grid-column: 5; justify-self: end; }
-.vault-group-action .vault-button { min-height: 28px; padding: 4px 9px; }
-.vault-name-cell { display: flex; min-width: 0; align-items: center; gap: 8px; }
-.vault-name-cell.indent-1 { padding-left: 18px; }
-.vault-name-cell.indent-2 { padding-left: 36px; }
-.vault-name-icon { width: 16px; flex: 0 0 16px; color: var(--task-muted); text-align: center; }
-.vault-disclosure {
-  width: 16px;
-  height: 24px;
-  flex: 0 0 16px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--task-muted);
-  cursor: pointer;
-  font-size: 10px;
-}
-.vault-name-copy { min-width: 0; }
-.vault-file-name {
-  display: block;
-  overflow: hidden;
-  color: var(--task-text);
-  font-size: 12px;
-  font-weight: 520;
-  line-height: 1.3;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.vault-file-path {
-  display: block;
-  overflow: hidden;
-  color: var(--task-muted);
-  font-size: 10.5px;
-  line-height: 1.3;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.vault-match-path {
-  display: block;
-  min-width: 0;
-  color: var(--task-muted);
-  font-size: 10.5px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-  white-space: normal;
-  word-break: break-word;
-}
-.vault-size,
-.vault-space { color: var(--task-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.vault-status { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: var(--task-text); }
-.vault-status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--task-muted); }
-.vault-status-dot.warning { background: var(--vault-warning); }
-.vault-status i { width: 12px; color: var(--task-muted); text-align: center; }
-.vault-row-action { justify-self: end; }
-.vault-row-action .vault-text-button { color: var(--task-text); font-size: 11.5px; }
-.vault-detail {
-  padding: 8px var(--vault-inline) 9px 56px;
-  border-bottom: 1px solid var(--task-border);
-  background: color-mix(in srgb, var(--task-soft) 48%, transparent);
-}
-.vault-detail-label { margin-bottom: 5px; color: var(--task-muted); font-size: 10px; font-weight: 650; }
-.vault-location-detail { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--task-text); font-size: 10.5px; }
-.vault-location-detail i { color: var(--task-muted); }
-.vault-empty {
-  display: grid;
-  min-height: 190px;
-  place-items: center;
-  padding: 28px;
-  text-align: center;
-}
-.vault-empty-inner { max-width: 420px; }
-.vault-empty i { color: var(--task-muted); font-size: 18px; }
-.vault-empty h3 { margin: 9px 0 4px; font-size: 14px; }
-.vault-empty p { margin: 0; color: var(--task-muted); font-size: 12px; line-height: 1.55; }
-.vault-empty .vault-button { margin-top: 10px; }
-.vault-pane-footer {
-  padding: 9px var(--vault-inline) 11px;
-  color: var(--task-muted);
-  font-size: 10.5px;
-}
-.vault-event-kind { font-weight: 570; }
-.vault-event-time { color: var(--task-muted); font-size: 10.5px; }
-.vault-unavailable { color: var(--task-muted); font-size: 11px; }
-@media (max-width: 1140px) {
-  .vault-overview { align-items: flex-start; flex-direction: column; }
-  .vault-overview-actions { width: 100%; justify-content: flex-start; }
-  .vault-metric { padding-right: 12px; padding-left: 12px; }
-  .vault-explorer { grid-template-columns: 224px minmax(0, 1fr); }
-}
-@media (max-width: 820px) {
-  body.vault-page .task-container { display: block; overflow-y: auto; }
-  .vault-shell,
-  .vault-shell .task-shell-body,
-  .vault-body { height: auto; overflow: visible; }
-  .vault-metrics { width: 100%; overflow-x: auto; }
-  .vault-explorer { display: block; overflow: visible; }
-  .vault-rail { max-height: 330px; border-right: 0; border-bottom: 1px solid var(--task-border); }
-  .vault-pane { display: block; overflow: visible; }
-  .vault-table-wrap { overflow-x: auto; overflow-y: visible; }
-}
-@media (pointer: coarse) {
-  .vault-button,
-  .vault-result .vault-button,
-  .vault-group-action .vault-button { min-height: 40px; }
-  .vault-icon-button { width: 40px; height: 40px; }
-  .vault-rail-add { width: 28px; height: 28px; flex-basis: 28px; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .vault-page * { scroll-behavior: auto !important; }
-  .vault-progress-bar { transition: none; }
-  .vault-progress-bar.indeterminate {
-    animation: none;
-    opacity: .5;
-    transform: scaleX(1);
-  }
-}
-</style>
+<link href="/vault.css" rel="stylesheet"/>
 </head>
-<body class='<%=theme%> main-sidebar-page task-launcher-page task-page vault-page' data-agent="<%=agent%>">
+<body class='<%=theme%> main-sidebar-page task-launcher-page task-page vault-page' data-agent="<%=agent%>" data-vault-mode="global">
 <%- include('partials/app_navheader', { agent }) %>
 <main>
   <div class='task-container'>
-      <section class='task-shell vault-shell'>
-      <div class='task-shell-body'>
-        <div class='vault-body'>
-          <section class='vault-overview'>
-            <div class='vault-metrics' id='vault-metrics'></div>
-            <div class='vault-overview-actions'>
-              <button class='vault-button primary' id='btn-scan' type='button'></button>
-              <details class='vault-advanced' id='vault-advanced'>
-                <summary class='vault-icon-button' id='btn-vault-options'><i class='fa-solid fa-ellipsis'></i></summary>
-                <div class='vault-advanced-menu'>
-                  <div class='vault-advanced-title' id='vault-repair-title'></div>
-                  <p class='vault-advanced-copy' id='vault-repair-description'></p>
-                  <button class='vault-button' id='btn-repair' type='button'></button>
-                </div>
-              </details>
-            </div>
-          </section>
-          <div class='vault-scan-state' id='vault-scan-state'></div>
-          <div class='vault-result' id='vault-result'></div>
-          <div class='vault-feedback' id='vault-feedback'></div>
-          <section class='vault-explorer' id='vault-explorer'>
-            <aside class='vault-rail'>
-              <div class='vault-rail-section'>
-                <div class='vault-rail-label' id='views-label'></div>
-                <div class='vault-nav-list' id='vault-views'></div>
-              </div>
-              <div class='vault-rail-section'>
-                <div class='vault-rail-heading'>
-                  <div class='vault-rail-label' id='locations-label'></div>
-                  <button class='vault-rail-add' id='btn-add-source' type='button' aria-label='Add external folder' title='Add external folder'><i class='fa-solid fa-plus'></i></button>
-                </div>
-                <div id='vault-locations'></div>
-              </div>
-              <div class='vault-rail-footer' id='vault-rail-footer'></div>
-            </aside>
-            <section class='vault-pane' aria-label='Vault files'>
-              <div class='vault-toolbar' id='vault-toolbar'></div>
-              <div class='vault-table-wrap' id='vault-table-wrap'></div>
-              <footer class='vault-pane-footer' id='vault-pane-footer'></footer>
-            </section>
-          </section>
-        </div>
-      </div>
-    </section>
+      <%- include('partials/vault_workspace', { appMode: false }) %>
   </div>
   <%- include('partials/main_sidebar', { selected: 'vault' }) %>
 </main>
 <script src="/Socket.js"></script>
-<script>
-const COPY = {
-  title: "Vault",
-  subtitle: "One copy on disk, shared by every app that uses it. Nothing is scanned or changed unless you ask.",
-  views: "VIEWS",
-  locations: "LOCATIONS",
-  all: "All tracked files",
-  duplicates: "Duplicates",
-  shared: "Shared",
-  independent: "Independent",
-  reclaimable: "Reclaimable",
-  activity: "Activity",
-  pinokio: "Pinokio",
-  apps: "Apps",
-  external: "External folders",
-  add_external_folder: "Add external folder",
-  external_added: "Added to Locations. Run a scan when you’re ready.",
-  external_exists: "That folder is already in Locations.",
-  external_other_disk: "Added to Locations. It can be scanned, but this disk cannot share space with the Vault.",
-  on_disk: "On disk",
-  saved: "Saved",
-  already_shared: "Already shared",
-  already_shared_help: "Space already avoided by files sharing the same data",
-  saved_by_vault: "Saved by Vault",
-  saved_by_vault_help: "Space saved through your Deduplicate actions",
-  can_save: "Can save",
-  pinokio_folder: "Pinokio folder",
-  last_scanned: "Last scanned",
-  never: "Never",
-  scan: "Scan now",
-  scan_again: "Scan again",
-  scanning: "Scanning…",
-  vault_options: "Vault options",
-  repair_index: "Repair Vault index",
-  repair_action: "Repair index",
-  repair_description: "Reconstruct Vault’s internal records if tracked files or sharing status look incorrect. This does not scan for new duplicates.",
-  repairing: "Repairing…",
-  repair_done: "Vault index repaired",
-  scan_progress: "Scanning your configured locations",
-  scan_analyzing: "Analyzing large files",
-  scan_finishing: "Finishing scan",
-  scan_estimate_help: "Estimated from your last completed scan",
-  scan_folders: "folders checked",
-  scan_files: "files checked",
-  analyzing: "analyzing",
-  waiting: "files waiting",
-  scan_complete: "Scan complete",
-  found_in: "found in",
-  locations_lower: "locations",
-  can_be_saved: "can be saved",
-  review: "Review",
-  search_all: "Search tracked files",
-  search_duplicates: "Search duplicates",
-  search_shared: "Search shared files",
-  search_independent: "Search independent files",
-  search_activity: "Search activity",
-  all_statuses: "All statuses",
-  by_location: "By location",
-  name: "Name",
-  size: "Size",
-  status: "Vault status",
-  matches: "Matches",
-  space: "Space",
-  duplicate: "Duplicate",
-  tracked: "Tracked",
-  different_disk: "Different disk",
-  saved_suffix: "saved",
-  can_save_suffix: "can save",
-  unavailable: "Unavailable",
-  sharing_unavailable: "Sharing is unavailable on this disk",
-  without_sharing: "without sharing",
-  saved_all_time: "saved all-time",
-  just_now: "Just now",
-  minutes_ago: "m ago",
-  hours_ago: "h ago",
-  event: "event",
-  events: "events",
-  unknown_location: "Unknown location",
-  expand: "Expand",
-  collapse: "Collapse",
-  file: "file",
-  files: "files",
-  location: "location",
-  deduplicate: "Deduplicate",
-  ignore: "Ignore",
-  make_independent: "Make independent",
-  allow_sharing: "Allow sharing again",
-  reclaim: "Reclaim",
-  reclaim_all: "Reclaim all",
-  undo: "Undo",
-  identical_contents_at: "Identical contents at",
-  no_files: "Nothing tracked yet",
-  no_files_hint: "Run a scan to find large files. Scanning never changes them.",
-  scan_waiting: "Waiting for scan results",
-  scan_waiting_hint: "Tracked files will appear here when this scan finishes.",
-  no_duplicates: "Everything is already shared",
-  no_duplicates_hint: "There are no files waiting for your review.",
-  no_shared: "Nothing is shared yet",
-  no_shared_hint: "Shared files will appear here after you review duplicates.",
-  no_independent: "No independent files",
-  no_independent_hint: "Files you choose to keep separate will appear here.",
-  no_reclaimable: "Nothing to reclaim",
-  no_reclaimable_hint: "Files no longer used by any configured location will appear here.",
-  no_activity: "No activity yet",
-  no_activity_hint: "Scans and actions will be recorded here.",
-  view_all: "View all tracked files",
-  show_all_locations: "Show all locations",
-  tracked_note: "Only tracked files 100 MB and larger appear here. Files keep their current locations.",
-  duplicate_note: "Only files waiting for review are shown.",
-  disabled: "The vault is turned off (PINOKIO_VAULT=false).",
-  done: "Done",
-  converted: "Deduplicated",
-  ignored: "Kept independent",
-  reclaimed: "Reclaimed",
-  allowed: "Sharing allowed again",
-  event_convert: "Deduplicated",
-  event_found: "Duplicate found",
-  event_adopt: "Added to your vault",
-  event_reclaim: "Reclaimed",
-  event_undo: "Undid deduplication",
-  event_diverged: "Changed by an app — no longer shared",
-  event_detach: "Made independent",
-  event_reshare: "Sharing allowed again"
-}
-
-const state = {
-  data: null,
-  view: "all",
-  sourceId: null,
-  query: "",
-  statusFilter: "all",
-  collapsedSources: new Set(),
-  collapsedDirs: new Set(),
-  expandedFiles: new Set(),
-  scanRequested: false,
-  scanBaseline: null,
-  scanResult: null,
-  feedback: null
-}
-
-const el = (id) => document.getElementById(id)
-const esc = (value) => String(value == null ? "" : value).replace(/[&<>"']/g, (char) => ({
-  "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
-}[char]))
-const attr = esc
-const fmt = (value) => {
-  const n = Number(value) || 0
-  if (!n) return "0 B"
-  const units = ["B", "KB", "MB", "GB", "TB"]
-  const index = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)))
-  const digits = index > 1 ? 1 : 0
-  return `${(n / Math.pow(1024, index)).toFixed(digits)} ${units[index]}`
-}
-const countLabel = (count, singular = COPY.file, plural = COPY.files) => `${count} ${count === 1 ? singular : plural}`
-const basename = (value) => String(value || "").split(/[\\/]/).filter(Boolean).pop() || ""
-const dirname = (value) => {
-  const parts = String(value || "").split("/").filter(Boolean)
-  parts.pop()
-  return parts.join(" / ")
-}
-const timeAgo = (ts) => {
-  if (!ts) return COPY.never
-  const seconds = Math.max(0, Math.floor((Date.now() - ts) / 1000))
-  if (seconds < 60) return COPY.just_now
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}${COPY.minutes_ago}`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}${COPY.hours_ago}`
-  return new Date(ts).toLocaleDateString()
-}
-const post = async (payload) => {
-  const response = await fetch("/vault/action", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(payload)
-  })
-  return response.json()
-}
-const sourceById = (id) => (state.data.sources || []).find((source) => source.id === id)
-const sourceChildren = (id) => (state.data.sources || []).filter((source) => source.parent_id === id)
-const sourcePath = (source) => {
-  if (!source) return ""
-  if (source.kind === "pinokio") return `~/${basename(source.root)}`
-  if (source.kind === "external") return source.target_path || source.display_path || ""
-  if (source.kind === "app") return ""
-  return source.display_path || source.root || ""
-}
-const isDescendantSource = (candidateId, parentId) => {
-  if (!parentId) return true
-  if (candidateId === parentId) return true
-  let current = sourceById(candidateId)
-  const seen = new Set()
-  while (current && current.parent_id && !seen.has(current.id)) {
-    if (current.parent_id === parentId) return true
-    seen.add(current.id)
-    current = sourceById(current.parent_id)
-  }
-  return false
-}
-
-const buildItems = () => {
-  const data = state.data
-  const items = []
-  const duplicatePaths = new Set(data.duplicates.map((item) => item.path))
-  const excludedPaths = new Set(data.excluded.map((item) => item.path))
-  for (const blob of data.blobs) {
-    const linkedNames = blob.names.filter((name) => name.mode === "link")
-    for (const name of blob.names) {
-      if (duplicatePaths.has(name.path) || excludedPaths.has(name.path)) continue
-      const shared = name.mode === "link" && linkedNames.length > 1
-      items.push({
-        kind: "file", path: name.path, relative_path: name.relative_path || basename(name.path),
-        source_id: name.source_id, source_kind: name.source_kind, source_label: name.source_label,
-        size: blob.size || 0, hash: blob.hash, blob, status: shared ? "shared" : "tracked",
-        locations: blob.names, saved: shared ? (blob.size || 0) * Math.max(1, linkedNames.length - 1) : 0
-      })
-    }
-  }
-  for (const duplicate of data.duplicates) {
-    items.push({
-      kind: "file", path: duplicate.path, relative_path: duplicate.relative_path || basename(duplicate.path),
-      source_id: duplicate.source_id, source_kind: duplicate.source_kind, source_label: duplicate.source_label,
-      size: duplicate.size || 0, hash: duplicate.hash, status: "duplicate",
-      shareable: duplicate.shareable !== false, matches: duplicate.matches || [], saved: 0
-    })
-  }
-  for (const independent of data.excluded) {
-    items.push({
-      kind: "file", path: independent.path, relative_path: independent.relative_path || basename(independent.path),
-      source_id: independent.source_id, source_kind: independent.source_kind, source_label: independent.source_label,
-      size: independent.size || 0, status: "independent", saved: 0
-    })
-  }
-  return items
-}
-
-const getCounts = (items) => ({
-  all: items.length,
-  duplicates: items.filter((item) => item.status === "duplicate").length,
-  shared: items.filter((item) => item.status === "shared").length,
-  independent: items.filter((item) => item.status === "independent").length,
-  reclaimable: state.data.blobs.filter((blob) => blob.orphan).length,
-  activity: state.data.events.length
-})
-
-const sourceDuplicateCount = (id) => state.data.duplicates.filter((item) => isDescendantSource(item.source_id, id)).length
-const sourceTrackedCount = (id, items) => items.filter((item) => isDescendantSource(item.source_id, id)).length
-const activeItems = (items) => {
-  let result = items
-  if (state.view === "duplicates") result = result.filter((item) => item.status === "duplicate")
-  if (state.view === "shared") result = result.filter((item) => item.status === "shared")
-  if (state.view === "independent") result = result.filter((item) => item.status === "independent")
-  if (state.sourceId) result = result.filter((item) => isDescendantSource(item.source_id, state.sourceId))
-  if (state.view === "all" && state.statusFilter !== "all") result = result.filter((item) => item.status === state.statusFilter)
-  const query = state.query.trim().toLowerCase()
-  if (query) result = result.filter((item) => `${item.relative_path} ${item.path} ${item.source_label || ""}`.toLowerCase().includes(query))
-  return result
-}
-
-const viewIcon = {
-  all: "fa-regular fa-file-lines",
-  duplicates: "fa-regular fa-copy",
-  shared: "fa-solid fa-link",
-  independent: "fa-solid fa-code-branch",
-  reclaimable: "fa-regular fa-trash-can",
-  activity: "fa-solid fa-wave-square"
-}
-const viewLabel = {
-  all: COPY.all,
-  duplicates: COPY.duplicates,
-  shared: COPY.shared,
-  independent: COPY.independent,
-  reclaimable: COPY.reclaimable,
-  activity: COPY.activity
-}
-
-const renderViews = (items) => {
-  const counts = getCounts(items)
-  el("views-label").textContent = COPY.views
-  const views = ["all", "duplicates", "shared", "independent", "reclaimable", "activity"]
-  el("vault-views").innerHTML = views.map((view) => `
-    <button class="vault-nav-row ${state.view === view ? "selected" : ""}" type="button" data-view="${view}">
-      <i class="${viewIcon[view]}"></i>
-      <span class="vault-nav-copy"><span class="vault-nav-name">${esc(viewLabel[view])}</span></span>
-      <span class="vault-nav-count ${view === "duplicates" && counts[view] ? "attention" : ""}">${counts[view]}</span>
-    </button>`).join("")
-}
-
-const renderSourceNode = (source, depth, items) => {
-  const children = sourceChildren(source.id).filter((child) => {
-    const count = state.view === "duplicates" ? sourceDuplicateCount(child.id) : sourceTrackedCount(child.id, items)
-    return child.kind === "virtual" || count > 0 || (child.kind === "external" && child.available)
-  })
-  const duplicateCount = sourceDuplicateCount(source.id)
-  const trackedCount = sourceTrackedCount(source.id, items)
-  if (state.view === "duplicates" && duplicateCount === 0) return ""
-  const collapsed = state.collapsedSources.has(source.id)
-  const pathText = source.kind === "virtual" ? (source.id === "apps" ? "api" : "") : sourcePath(source)
-  const count = state.view === "duplicates" ? duplicateCount : trackedCount
-  const icon = source.kind === "app" ? "fa-regular fa-folder-open" : "fa-regular fa-folder"
-  let html = `<div class="vault-source-line depth-${Math.min(depth, 2)} ${pathText ? "has-path" : ""}">`
-  if (children.length) {
-    html += `<button class="vault-source-toggle" type="button" data-toggle-source="${attr(source.id)}" aria-label="${collapsed ? COPY.expand : COPY.collapse}"><i class="fa-solid fa-chevron-${collapsed ? "right" : "down"}"></i></button>`
-  } else {
-    html += `<span class="vault-source-toggle placeholder"></span>`
-  }
-  html += `<button class="vault-nav-row ${state.sourceId === source.id ? "selected" : ""}" type="button" data-source="${attr(source.id)}">
-    <i class="${icon}"></i>
-    <span class="vault-nav-copy"><span class="vault-nav-name">${esc(source.label)}</span>${pathText ? `<span class="vault-nav-path" title="${attr(pathText)}">${esc(pathText)}</span>` : ""}</span>
-    <span class="vault-nav-count ${duplicateCount ? "attention" : ""}">${count || ""}</span>
-  </button></div>`
-  if (!collapsed) html += children.map((child) => renderSourceNode(child, depth + 1, items)).join("")
-  return html
-}
-
-const renderLocations = (items) => {
-  el("locations-label").textContent = COPY.locations
-  const pinokio = sourceById("pinokio")
-  const external = sourceById("external")
-  let html = pinokio ? renderSourceNode(pinokio, 0, items) : ""
-  if (external && sourceChildren("external").length) html += renderSourceNode(external, 0, items)
-  el("vault-locations").innerHTML = html
-  el("vault-rail-footer").innerHTML = state.view === "duplicates"
-    ? `<button class="vault-text-button" type="button" data-view="all">${esc(COPY.show_all_locations)}</button>`
-    : ""
-}
-
-const selectedSource = () => state.sourceId ? sourceById(state.sourceId) : null
-const scopeDuplicates = (sourceId) => state.data.duplicates.filter((item) => item.source_id === sourceId)
-const batchAction = (source) => {
-  if (!source || source.kind === "virtual" || source.kind === "pinokio") return ""
-  const duplicates = scopeDuplicates(source.id)
-  if (!duplicates.length) return ""
-  const shareable = duplicates.filter((item) => item.shareable !== false)
-  if (!source.shareable || !shareable.length) return `<div class="vault-pane-action-note">${esc(COPY.sharing_unavailable)}</div>`
-  return `<button class="vault-button" type="button" data-deduplicate-scope="${attr(source.id)}">${esc(COPY.deduplicate)} ${countLabel(shareable.length)}</button>`
-}
-
-const toolbarSummary = (visibleItems) => {
-  if (state.view === "duplicates") {
-    const locations = new Set(visibleItems.map((item) => item.source_id).filter(Boolean)).size
-    const bytes = visibleItems.filter((item) => item.shareable).reduce((sum, item) => sum + item.size, 0)
-    return `${countLabel(visibleItems.length)} · ${countLabel(locations, COPY.location, COPY.locations_lower)} · ${fmt(bytes)} ${COPY.can_save_suffix}`
-  } else if (state.view === "activity") {
-    return countLabel(visibleItems.length, COPY.event, COPY.events)
-  } else if (state.view === "reclaimable") {
-    return `${countLabel(visibleItems.length)} · ${fmt(state.data.reclaimable)}`
-  }
-  const duplicateCount = visibleItems.filter((item) => item.status === "duplicate").length
-  const saveable = visibleItems.filter((item) => item.status === "duplicate" && item.shareable).reduce((sum, item) => sum + item.size, 0)
-  return `${countLabel(visibleItems.length)}${duplicateCount ? ` · ${countLabel(duplicateCount, COPY.duplicate.toLowerCase(), COPY.duplicates.toLowerCase())} · ${fmt(saveable)} ${COPY.can_save_suffix}` : ""}`
-}
-
-const updateToolbarSummary = (visibleItems) => {
-  const summary = el("vault-toolbar-summary")
-  if (summary) summary.textContent = toolbarSummary(visibleItems)
-}
-
-const searchPlaceholder = () => {
-  if (state.view === "duplicates") return COPY.search_duplicates
-  if (state.view === "shared") return COPY.search_shared
-  if (state.view === "independent") return COPY.search_independent
-  if (state.view === "activity") return COPY.search_activity
-  const source = selectedSource()
-  return source && source.kind === "app" ? `Search in ${source.label}` : COPY.search_all
-}
-const renderToolbar = (visibleItems) => {
-  if (state.view === "reclaimable") {
-    const count = state.data.blobs.filter((blob) => blob.orphan).length
-    el("vault-toolbar").innerHTML = count
-      ? `<span class="vault-toolbar-count" id="vault-toolbar-summary">${esc(toolbarSummary(visibleItems))}</span><button class="vault-button" type="button" id="btn-reclaim-all">${esc(COPY.reclaim_all)}</button>`
-      : ""
-    return
-  }
-  const source = selectedSource()
-  el("vault-toolbar").innerHTML = `<label class="vault-search"><i class="fa-solid fa-magnifying-glass"></i><input id="vault-search" value="${attr(state.query)}" placeholder="${attr(searchPlaceholder())}" /></label>
-    ${state.view === "all" ? `<select class="vault-select" id="vault-status-filter" aria-label="${attr(COPY.all_statuses)}">
-      <option value="all" ${state.statusFilter === "all" ? "selected" : ""}>${esc(COPY.all_statuses)}</option>
-      <option value="duplicate" ${state.statusFilter === "duplicate" ? "selected" : ""}>${esc(COPY.duplicates)}</option>
-      <option value="shared" ${state.statusFilter === "shared" ? "selected" : ""}>${esc(COPY.shared)}</option>
-      <option value="tracked" ${state.statusFilter === "tracked" ? "selected" : ""}>${esc(COPY.tracked)}</option>
-      <option value="independent" ${state.statusFilter === "independent" ? "selected" : ""}>${esc(COPY.independent)}</option>
-    </select>` : state.view === "duplicates" ? `<span class="vault-select">${esc(COPY.by_location)}</span>` : ""}
-    <span class="vault-toolbar-count" id="vault-toolbar-summary">${esc(toolbarSummary(visibleItems))}</span>
-    ${state.view === "all" ? batchAction(source) : ""}`
-}
-
-const statusMarkup = (item) => {
-  if (item.status === "duplicate") {
-    return item.shareable
-      ? `<span class="vault-status"><span class="vault-status-dot warning"></span>${esc(COPY.duplicate)}</span>`
-      : `<span class="vault-status"><i class="fa-regular fa-circle-xmark"></i>${esc(COPY.different_disk)}</span>`
-  }
-  if (item.status === "shared") return `<span class="vault-status"><i class="fa-solid fa-link"></i>${esc(COPY.shared)} · ${item.locations.length} ${esc(COPY.locations_lower)}</span>`
-  if (item.status === "independent") return `<span class="vault-status"><i class="fa-solid fa-code-branch"></i>${esc(COPY.independent)}</span>`
-  return `<span class="vault-status"><span class="vault-status-dot"></span>${esc(COPY.tracked)}</span>`
-}
-const spaceMarkup = (item) => {
-  if (item.status === "duplicate") return item.shareable ? `${fmt(item.size)} ${COPY.can_save_suffix}` : COPY.unavailable
-  if (item.status === "shared") return `${fmt(item.saved)} ${COPY.saved_suffix}`
-  return "—"
-}
-const rowAction = (item) => {
-  if (item.status === "duplicate") return `<button class="vault-text-button" type="button" data-detach="${attr(item.path)}">${esc(COPY.ignore)}</button>`
-  if (item.status === "independent") return `<button class="vault-text-button" type="button" data-reshare="${attr(item.path)}">${esc(COPY.allow_sharing)}</button>`
-  return `<button class="vault-text-button" type="button" data-detach="${attr(item.path)}">${esc(COPY.make_independent)}</button>`
-}
-
-const fileDetail = (item) => {
-  if (!state.expandedFiles.has(item.path) || !item.locations || item.locations.length < 2) return ""
-  return `<div class="vault-detail"><div class="vault-detail-label">${esc(COPY.identical_contents_at)} ${countLabel(item.locations.length, COPY.location, COPY.locations_lower)}</div>${item.locations.map((location) => `
-    <div class="vault-location-detail"><i class="fa-regular fa-file"></i><span>${esc(location.source_label || "")}${location.relative_path ? ` / ${esc(location.relative_path)}` : ""}</span></div>`).join("")}</div>`
-}
-
-const renderFileRow = (item, depth = 0, showMatch = false) => {
-  const directoryPath = dirname(item.relative_path)
-  const match = (item.matches || []).find((location) => location.path !== item.path)
-  const expandable = item.locations && item.locations.length > 1
-  return `<div class="vault-file-row">
-    <div class="vault-name-cell indent-${Math.min(depth, 2)}">
-      ${expandable ? `<button class="vault-disclosure" type="button" data-expand-file="${attr(item.path)}"><i class="fa-solid fa-chevron-${state.expandedFiles.has(item.path) ? "down" : "right"}"></i></button>` : `<span class="vault-disclosure"></span>`}
-      <i class="fa-regular fa-file vault-name-icon"></i>
-      <span class="vault-name-copy"><span class="vault-file-name">${esc(basename(item.relative_path))}</span>${directoryPath && depth === 0 ? `<span class="vault-file-path">${esc(directoryPath)}</span>` : ""}</span>
-    </div>
-    <span class="vault-size">${item.size ? fmt(item.size) : "—"}</span>
-    <span>${showMatch ? (match ? `<span class="vault-match-path">${esc(match.path)}</span>` : "—") : statusMarkup(item)}</span>
-    <span class="vault-space">${esc(spaceMarkup(item))}</span>
-    <span class="vault-row-action">${rowAction(item)}</span>
-  </div>${fileDetail(item)}`
-}
-
-const makeTree = (items) => {
-  const root = { dirs: new Map(), files: [] }
-  for (const item of items) {
-    const parts = String(item.relative_path || basename(item.path)).split("/").filter(Boolean)
-    const fileName = parts.pop() || basename(item.path)
-    item._treeName = fileName
-    let node = root
-    for (const part of parts) {
-      if (!node.dirs.has(part)) node.dirs.set(part, { name: part, dirs: new Map(), files: [] })
-      node = node.dirs.get(part)
-    }
-    node.files.push(item)
-  }
-  return root
-}
-const nodeItems = (node) => [...node.files, ...[...node.dirs.values()].flatMap((child) => nodeItems(child))]
-const renderTreeNode = (node, prefix, depth) => {
-  let current = node
-  const labels = [node.name]
-  while (current.files.length === 0 && current.dirs.size === 1) {
-    current = [...current.dirs.values()][0]
-    labels.push(current.name)
-  }
-  const key = [...prefix, ...labels].join("/")
-  const collapsed = state.collapsedDirs.has(key)
-  const items = nodeItems(current)
-  const duplicateCount = items.filter((item) => item.status === "duplicate").length
-  const shareableBytes = items.filter((item) => item.status === "duplicate" && item.shareable).reduce((sum, item) => sum + item.size, 0)
-  const shared = items.filter((item) => item.status === "shared").length
-  const summary = duplicateCount ? countLabel(duplicateCount, COPY.duplicate.toLowerCase(), COPY.duplicates.toLowerCase()) : shared ? COPY.shared : COPY.tracked
-  let html = `<div class="vault-file-row directory">
-    <div class="vault-name-cell indent-${Math.min(depth, 2)}"><button class="vault-disclosure" type="button" data-toggle-dir="${attr(key)}"><i class="fa-solid fa-chevron-${collapsed ? "right" : "down"}"></i></button><i class="fa-regular fa-folder vault-name-icon"></i><span class="vault-file-name">${esc(labels.join(" / "))}</span></div>
-    <span class="vault-size">${countLabel(items.length)}</span><span>${esc(summary)}</span><span class="vault-space">${shareableBytes ? `${fmt(shareableBytes)} ${COPY.can_save_suffix}` : "—"}</span><span></span>
-  </div>`
-  if (!collapsed) {
-    html += current.files.sort((a, b) => a._treeName.localeCompare(b._treeName)).map((item) => renderFileRow(item, depth + 1)).join("")
-    html += [...current.dirs.values()].sort((a, b) => a.name.localeCompare(b.name)).map((child) => renderTreeNode(child, [...prefix, ...labels], depth + 1)).join("")
-  }
-  return html
-}
-const renderTree = (items) => {
-  const tree = makeTree(items)
-  return tree.files.map((item) => renderFileRow(item)).join("") + [...tree.dirs.values()].sort((a, b) => a.name.localeCompare(b.name)).map((node) => renderTreeNode(node, [], 0)).join("")
-}
-
-const groupTitle = (source) => {
-  if (!source) return COPY.unknown_location
-  const parts = [source.label]
-  let current = source
-  while (current && current.parent_id) {
-    current = sourceById(current.parent_id)
-    if (current) parts.unshift(current.label)
-  }
-  return parts.join(" / ")
-}
-const sourceSort = (a, b) => {
-  const first = sourceById(a[0])
-  const second = sourceById(b[0])
-  const rank = (source) => source && source.kind === "external" ? 1 : source ? 0 : 2
-  return rank(first) - rank(second) || groupTitle(first).localeCompare(groupTitle(second))
-}
-const renderDuplicateGroups = (items) => {
-  const groups = new Map()
-  for (const item of items) {
-    const key = item.source_id || "unknown"
-    if (!groups.has(key)) groups.set(key, [])
-    groups.get(key).push(item)
-  }
-  return [...groups.entries()].sort(sourceSort).map(([sourceId, group]) => {
-    const source = sourceById(sourceId)
-    const bytes = group.filter((item) => item.shareable).reduce((sum, item) => sum + item.size, 0)
-    const action = source && source.shareable && group.some((item) => item.shareable)
-      ? `<button class="vault-button" type="button" data-deduplicate-scope="${attr(sourceId)}">${esc(COPY.deduplicate)} ${countLabel(group.filter((item) => item.shareable).length)}</button>`
-      : `<span class="vault-unavailable">${esc(COPY.sharing_unavailable)}</span>`
-    return `<div class="vault-group-row"><div class="vault-group-main"><div class="vault-group-title"><i class="fa-regular fa-folder"></i><span>${esc(groupTitle(source))}</span></div><div class="vault-group-meta">${countLabel(group.length, COPY.duplicate.toLowerCase(), COPY.duplicates.toLowerCase())} · ${bytes ? fmt(bytes) : COPY.unavailable}</div></div><div class="vault-group-action">${action}</div></div>${group.sort((a, b) => a.relative_path.localeCompare(b.relative_path)).map((item) => renderFileRow(item, 0, true)).join("")}`
-  }).join("")
-}
-
-const renderInventoryGroups = (items) => {
-  const groups = new Map()
-  for (const item of items) {
-    const key = item.source_id || "unknown"
-    if (!groups.has(key)) groups.set(key, [])
-    groups.get(key).push(item)
-  }
-  return [...groups.entries()].sort(sourceSort).map(([sourceId, group]) => {
-    const source = sourceById(sourceId)
-    const duplicates = group.filter((item) => item.status === "duplicate")
-    const saveable = duplicates.filter((item) => item.shareable).reduce((sum, item) => sum + item.size, 0)
-    const shared = group.filter((item) => item.status === "shared").length
-    const meta = [countLabel(group.length)]
-    if (duplicates.length) meta.push(countLabel(duplicates.length, COPY.duplicate.toLowerCase(), COPY.duplicates.toLowerCase()))
-    else if (shared) meta.push(`${shared} ${COPY.shared.toLowerCase()}`)
-    if (saveable) meta.push(`${fmt(saveable)} ${COPY.can_save_suffix}`)
-    const action = batchAction(source)
-    return `<div class="vault-group-row"><div class="vault-group-main"><div class="vault-group-title"><i class="fa-regular fa-folder"></i><span>${esc(groupTitle(source))}</span></div><div class="vault-group-meta">${esc(meta.join(" · "))}</div></div>${action ? `<div class="vault-group-action">${action}</div>` : ""}</div>${renderTree(group)}`
-  }).join("")
-}
-
-const emptyState = (view) => {
-  const scanning = scanActive(state.data && state.data.scan)
-  const content = {
-    all: scanning
-      ? [COPY.scan_waiting, COPY.scan_waiting_hint, "fa-solid fa-circle-notch fa-spin"]
-      : [COPY.no_files, COPY.no_files_hint, "fa-regular fa-folder-open"],
-    duplicates: [COPY.no_duplicates, COPY.no_duplicates_hint, "fa-regular fa-circle-check"],
-    shared: [COPY.no_shared, COPY.no_shared_hint, "fa-solid fa-link"],
-    independent: [COPY.no_independent, COPY.no_independent_hint, "fa-solid fa-code-branch"],
-    reclaimable: [COPY.no_reclaimable, COPY.no_reclaimable_hint, "fa-regular fa-circle-check"],
-    activity: [COPY.no_activity, COPY.no_activity_hint, "fa-solid fa-wave-square"]
-  }[view]
-  return `<div class="vault-empty"><div class="vault-empty-inner"><i class="${content[2]}"></i><h3>${esc(content[0])}</h3><p>${esc(content[1])}</p>${view === "duplicates" ? `<button class="vault-button" type="button" data-view="all">${esc(COPY.view_all)}</button>` : view === "all" && !scanning ? `<button class="vault-button" type="button" id="btn-empty-scan">${esc(COPY.scan)}</button>` : ""}</div></div>`
-}
-
-const renderReclaimable = () => {
-  const blobs = state.data.blobs.filter((blob) => blob.orphan)
-  if (!blobs.length) return emptyState("reclaimable")
-  return blobs.map((blob) => `<div class="vault-file-row"><div class="vault-name-cell"><span class="vault-disclosure"></span><i class="fa-regular fa-file vault-name-icon"></i><span class="vault-name-copy"><span class="vault-file-name">${esc(blob.names[0] ? basename(blob.names[0].path) : `${blob.hash.slice(0, 12)}…`)}</span></span></div><span class="vault-size">${fmt(blob.size)}</span><span>${esc(COPY.reclaimable)}</span><span class="vault-space">${fmt(blob.size)}</span><span class="vault-row-action"><button class="vault-text-button" type="button" data-reclaim="${attr(blob.hash)}">${esc(COPY.reclaim)}</button></span></div>`).join("")
-}
-
-const renderActivity = () => {
-  const labels = {
-    convert: COPY.event_convert, found: COPY.event_found, adopt: COPY.event_adopt,
-    reclaim: COPY.event_reclaim, undo: COPY.event_undo, diverged: COPY.event_diverged,
-    detach: COPY.event_detach, reshare: COPY.event_reshare, skip_download: COPY.event_adopt
-  }
-  const query = state.query.toLowerCase()
-  const events = state.data.events.filter((event) => !query || `${labels[event.kind] || event.kind} ${event.path || ""}`.toLowerCase().includes(query))
-  if (!events.length) return emptyState("activity")
-  const seenBatches = new Set()
-  return events.map((event) => {
-    let undo = ""
-    if (event.kind === "convert" && event.batch_id && !seenBatches.has(event.batch_id)) {
-      seenBatches.add(event.batch_id)
-      undo = `<button class="vault-text-button" type="button" data-undo="${attr(event.batch_id)}">${esc(COPY.undo)}</button>`
-    }
-    const location = event.path ? state.data.sources.find((source) => source.id === event.source_id) : null
-    return `<div class="vault-file-row"><div class="vault-name-cell"><span class="vault-disclosure"></span><i class="fa-solid fa-wave-square vault-name-icon"></i><span class="vault-name-copy"><span class="vault-file-name vault-event-kind">${esc(labels[event.kind] || event.kind)}</span><span class="vault-file-path">${esc(location ? `${location.label} / ` : "")}${esc(event.path ? basename(event.path) : (event.hash || "").slice(0, 12))}</span></span></div><span class="vault-size">${event.bytes_saved ? fmt(event.bytes_saved) : event.size ? fmt(event.size) : "—"}</span><span class="vault-event-time">${esc(new Date(event.ts).toLocaleString())}</span><span></span><span class="vault-row-action">${undo}</span></div>`
-  }).join("")
-}
-
-const renderTable = (items) => {
-  let body = ""
-  let matches = false
-  if (state.view === "duplicates") {
-    matches = true
-    body = items.length ? renderDuplicateGroups(items) : emptyState("duplicates")
-  } else if (state.view === "reclaimable") {
-    body = renderReclaimable()
-  } else if (state.view === "activity") {
-    body = renderActivity()
-  } else {
-    body = items.length ? (state.sourceId ? renderTree(items) : renderInventoryGroups(items)) : emptyState(state.view)
-  }
-  const third = matches ? COPY.matches : state.view === "activity" ? COPY.last_scanned : COPY.status
-  el("vault-table-wrap").innerHTML = `<div class="vault-table ${matches ? "matches" : ""}"><div class="vault-columns"><span>${esc(COPY.name)}</span><span>${esc(COPY.size)}</span><span>${esc(third)}</span><span>${esc(COPY.space)}</span><span></span></div>${body}</div>`
-}
-
-const renderOverview = () => {
-  const data = state.data
-  const last = data.last_scan
-  const folderMetric = last ? `<div class="vault-metric"><span class="vault-metric-value">${fmt(last.home_bytes_total == null ? last.bytes_total : last.home_bytes_total)}</span><span class="vault-metric-label">${esc(COPY.pinokio_folder)}</span></div>` : ""
-  el("vault-metrics").innerHTML = `${folderMetric}
-    <div class="vault-metric" title="${attr(`${fmt(data.bytes_without_sharing)} ${COPY.without_sharing}`)}"><span class="vault-metric-value">${fmt(data.bytes_on_disk)}</span><span class="vault-metric-label">${esc(COPY.on_disk)}</span></div>
-    <div class="vault-metric" title="${attr(COPY.already_shared_help)}"><span class="vault-metric-value">${fmt(data.saved_by_sharing)}</span><span class="vault-metric-label">${esc(COPY.already_shared)}</span></div>
-    <div class="vault-metric" title="${attr(COPY.saved_by_vault_help)}"><span class="vault-metric-value">${fmt(data.lifetime_bytes_saved)}</span><span class="vault-metric-label">${esc(COPY.saved_by_vault)}</span></div>
-    <button class="vault-metric" type="button" id="btn-review-metric"><span class="vault-metric-value">${fmt(data.pending_bytes)}</span><span class="vault-metric-label">${esc(COPY.can_save)}</span></button>
-    <div class="vault-metric"><span class="vault-metric-value">${esc(timeAgo(last && last.ts))}</span><span class="vault-metric-label">${esc(COPY.last_scanned)}</span></div>`
-  const scanning = data.scan && (data.scan.active || data.scan.queued > 0)
-  el("btn-scan").innerHTML = scanning ? `<i class="fa-solid fa-circle-notch fa-spin"></i>${esc(COPY.scanning)}` : `<i class="fa-solid fa-rotate"></i>${esc(last ? COPY.scan_again : COPY.scan)}`
-  el("btn-scan").disabled = !!scanning
-  el("btn-vault-options").setAttribute("aria-label", COPY.vault_options)
-  el("vault-repair-title").textContent = COPY.repair_index
-  el("vault-repair-description").textContent = COPY.repair_description
-  el("btn-repair").textContent = COPY.repair_action
-  el("btn-repair").disabled = !!scanning
-  const scanState = el("vault-scan-state")
-  if (scanning) {
-    const scan = data.scan
-    const walking = scan.walk_duration_ms == null
-    const hashTotal = scan.hash_total || 0
-    const hashDone = Math.min(scan.hashed || 0, hashTotal)
-    const hashRatio = hashTotal ? Math.min(1, hashDone / hashTotal) : 1
-    const phase = walking ? COPY.scan_progress : hashTotal ? COPY.scan_analyzing : COPY.scan_finishing
-    const hasEstimate = Number.isFinite(scan.estimated_files) && scan.estimated_files > 0
-    const walkWeight = Number.isFinite(scan.estimated_walk_weight) ? scan.estimated_walk_weight : 0.8
-    const walkRatio = hasEstimate ? Math.min(1, (scan.files || 0) / scan.estimated_files) : null
-    const progressRatio = walking
-      ? (hasEstimate ? walkRatio * walkWeight : null)
-      : (hasEstimate ? walkWeight + ((1 - walkWeight) * hashRatio) : hashRatio)
-    const progressValue = progressRatio == null ? null : Math.max(0, Math.min(100, Math.round(progressRatio * 100)))
-    const details = [`${scan.dirs || 0} ${COPY.scan_folders}`, `${scan.files || 0} ${COPY.scan_files}`, fmt(scan.bytes_total || 0)]
-    if (scan.current_file) details.push(`${COPY.analyzing} ${scan.current_file}`)
-    if (walking && scan.queued > 1) details.push(`${scan.queued} ${COPY.waiting}`)
-    const estimated = hasEstimate && progressValue < 100
-    const percent = progressValue == null ? "" : `<span class="vault-scan-percent"${estimated ? ` title="${attr(COPY.scan_estimate_help)}"` : ""}>${estimated ? "~" : ""}${progressValue}%</span>`
-    const progressAttrs = progressValue == null
-      ? `role="progressbar" aria-label="${attr(phase)}"`
-      : `role="progressbar" aria-label="${attr(phase)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${progressValue}"${estimated ? ` aria-valuetext="${attr(`About ${progressValue} percent. ${COPY.scan_estimate_help}.`)}"` : ""}`
-    const progressStyle = progressValue == null ? "" : ` style="--vault-progress:${progressRatio}"`
-    scanState.classList.add("show")
-    scanState.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i><strong>${esc(phase)}</strong><span class="vault-scan-detail">${esc(details.join(" · "))}</span>${percent}<span class="vault-progress-track" ${progressAttrs}><span class="vault-progress-bar ${progressValue == null ? "indeterminate" : "determinate"}"${progressStyle}></span></span>`
-  } else {
-    scanState.classList.remove("show")
-    scanState.innerHTML = ""
-  }
-}
-
-const renderResult = () => {
-  const result = el("vault-result")
-  if (!state.scanResult) {
-    result.classList.remove("show")
-    result.innerHTML = ""
-    return
-  }
-  const info = state.scanResult
-  result.classList.add("show")
-  const duplicateLabel = countLabel(info.count, COPY.duplicate.toLowerCase(), COPY.duplicates.toLowerCase())
-  result.innerHTML = `<i class="fa-regular fa-circle-check"></i><strong>${esc(COPY.scan_complete)}</strong><span class="vault-result-detail">${duplicateLabel} ${esc(COPY.found_in)} ${countLabel(info.locations, COPY.location, COPY.locations_lower)} · ${fmt(info.bytes)} ${esc(COPY.can_be_saved)}</span><button class="vault-button" type="button" id="btn-review-result">${esc(COPY.review)} ${duplicateLabel}<i class="fa-solid fa-chevron-right"></i></button>`
-}
-const renderFeedback = () => {
-  const feedback = el("vault-feedback")
-  if (!state.feedback) {
-    feedback.className = "vault-feedback"
-    feedback.innerHTML = ""
-    return
-  }
-  feedback.className = `vault-feedback show ${state.feedback.error ? "error" : ""}`
-  feedback.innerHTML = `<i class="fa-solid fa-${state.feedback.error ? "triangle-exclamation" : "circle-check"}"></i><span>${esc(state.feedback.message)}</span>`
-}
-
-const render = () => {
-  if (!state.data) return
-  renderOverview()
-  renderResult()
-  renderFeedback()
-  if (!state.data.enabled) {
-    el("vault-explorer").style.display = "none"
-    return
-  }
-  el("vault-explorer").style.display = "grid"
-  const items = buildItems()
-  renderViews(items)
-  renderLocations(items)
-  const visible = activeItems(items)
-  renderToolbar(visible)
-  renderTable(visible)
-  el("vault-pane-footer").textContent = state.view === "duplicates" ? COPY.duplicate_note : COPY.tracked_note
-}
-
-const scanActive = (scan) => !!(scan && (scan.active || scan.queued > 0))
-const fetchJson = async (url) => {
-  const response = await fetch(url)
-  if (!response.ok) throw new Error(`Vault status request failed (${response.status})`)
-  return response.json()
-}
-const applyFullData = (data) => {
-  const scanning = scanActive(data.scan)
-  const completed = state.scanRequested && !scanning && data.last_scan && data.last_scan.ts !== state.scanBaseline
-  state.data = data
-  if (completed) {
-    state.scanRequested = false
-    const shareable = data.duplicates.filter((item) => item.shareable !== false)
-    state.scanResult = {
-      count: shareable.length,
-      locations: new Set(shareable.map((item) => item.source_id).filter(Boolean)).size,
-      bytes: shareable.reduce((sum, item) => sum + item.size, 0)
-    }
-  }
-  render()
-  return scanning
-}
-const refresh = async () => {
-  let delay = 15000
-  try {
-    const progressOnly = !!(state.data && scanActive(state.data.scan))
-    if (progressOnly) {
-      const progress = await fetchJson("/info/dedup?progress=1")
-      state.data.scan = progress.scan
-      state.data.last_scan = progress.last_scan
-      if (scanActive(progress.scan)) {
-        delay = 1500
-        renderOverview()
-        renderFeedback()
-      } else {
-        delay = applyFullData(await fetchJson("/info/dedup")) ? 1500 : 15000
-      }
-    } else {
-      delay = applyFullData(await fetchJson("/info/dedup")) ? 1500 : 15000
-    }
-  } catch (error) {
-    state.feedback = { error: true, message: error && error.message ? error.message : String(error) }
-    renderFeedback()
-    delay = 5000
-  } finally {
-    clearTimeout(window.__vaultRefresh)
-    window.__vaultRefresh = setTimeout(refresh, delay)
-  }
-}
-
-const runAction = async (payload, success) => {
-  state.feedback = null
-  renderFeedback()
-  const result = await post(payload)
-  if (result.error) state.feedback = { error: true, message: result.error }
-  else state.feedback = { error: false, message: typeof success === "function" ? success(result) : success }
-  await refresh()
-}
-
-const chooseExternalFolder = () => new Promise((resolve, reject) => {
-  const picker = new Socket()
-  let settled = false
-  const finish = (value) => {
-    if (settled) return
-    settled = true
-    resolve(value)
-  }
-  const fail = (error) => {
-    if (settled) return
-    settled = true
-    reject(error)
-  }
-  picker.run({
-    method: "kernel.bin.filepicker",
-    params: { title: COPY.add_external_folder, type: "folder" }
-  }, (packet) => {
-    if (packet.type === "result") {
-      const paths = packet.data && Array.isArray(packet.data.paths) ? packet.data.paths : []
-      finish(paths[0] || null)
-      picker.close()
-    } else if (packet.type === "error") {
-      const message = packet.data && packet.data.message ? packet.data.message : "The folder picker could not be opened."
-      fail(new Error(message))
-      picker.close()
-    }
-  }).then(() => finish(null)).catch(fail)
-})
-
-document.addEventListener("click", async (event) => {
-  const advanced = el("vault-advanced")
-  if (advanced.open && !advanced.contains(event.target)) advanced.open = false
-  const target = event.target.closest("button")
-  if (!target) return
-  if (target.dataset.view) {
-    state.view = target.dataset.view
-    state.sourceId = null
-    state.query = ""
-    state.statusFilter = "all"
-    if (state.view === "duplicates") state.scanResult = null
-    render()
-  } else if (target.dataset.source) {
-    state.sourceId = state.sourceId === target.dataset.source ? null : target.dataset.source
-    render()
-  } else if (target.dataset.toggleSource) {
-    const id = target.dataset.toggleSource
-    if (state.collapsedSources.has(id)) state.collapsedSources.delete(id)
-    else state.collapsedSources.add(id)
-    renderLocations(buildItems())
-  } else if (target.dataset.toggleDir) {
-    const key = target.dataset.toggleDir
-    if (state.collapsedDirs.has(key)) state.collapsedDirs.delete(key)
-    else state.collapsedDirs.add(key)
-    render()
-  } else if (target.dataset.expandFile) {
-    const file = target.dataset.expandFile
-    if (state.expandedFiles.has(file)) state.expandedFiles.delete(file)
-    else state.expandedFiles.add(file)
-    render()
-  } else if (target.id === "btn-add-source") {
-    target.disabled = true
-    try {
-      const folderPath = await chooseExternalFolder()
-      if (!folderPath) return
-      const result = await post({ action: "add_source", path: folderPath })
-      if (result.error) {
-        state.feedback = { error: true, message: result.error }
-      } else {
-        state.view = "all"
-        state.sourceId = result.source && result.source.id ? result.source.id : null
-        state.query = ""
-        state.feedback = {
-          error: false,
-          message: result.created === false
-            ? COPY.external_exists
-            : result.source && result.source.shareable === false
-              ? COPY.external_other_disk
-              : COPY.external_added
-        }
-      }
-      await refresh()
-    } catch (error) {
-      state.feedback = { error: true, message: error && error.message ? error.message : String(error) }
-      renderFeedback()
-    } finally {
-      target.disabled = false
-    }
-  } else if (target.id === "btn-scan" || target.id === "btn-empty-scan") {
-    state.scanRequested = true
-    state.scanBaseline = state.data.last_scan ? state.data.last_scan.ts : null
-    state.scanResult = null
-    state.feedback = null
-    await post({ action: "scan" })
-    await refresh()
-  } else if (target.id === "btn-repair") {
-    target.disabled = true
-    target.textContent = COPY.repairing
-    await runAction({ action: "repair" }, COPY.repair_done)
-    advanced.open = false
-  } else if (target.id === "btn-review-result" || target.id === "btn-review-metric") {
-    state.view = "duplicates"
-    state.sourceId = null
-    state.query = ""
-    state.scanResult = null
-    render()
-  } else if (target.dataset.deduplicateScope) {
-    await runAction({ action: "deduplicate", scope_id: target.dataset.deduplicateScope }, (result) => `${COPY.converted}: ${fmt(result.bytes_saved || 0)}`)
-  } else if (target.dataset.detach) {
-    await runAction({ action: "detach", path: target.dataset.detach }, COPY.ignored)
-  } else if (target.dataset.reshare) {
-    await runAction({ action: "reshare", path: target.dataset.reshare }, COPY.allowed)
-  } else if (target.dataset.reclaim) {
-    await runAction({ action: "reclaim", hash: target.dataset.reclaim }, (result) => `${COPY.reclaimed}: ${fmt(result.bytes_freed || 0)}`)
-  } else if (target.id === "btn-reclaim-all") {
-    await runAction({ action: "reclaim_all" }, (result) => `${COPY.reclaimed}: ${fmt(result.bytes_freed || 0)}`)
-  } else if (target.dataset.undo) {
-    await runAction({ action: "undo", batch_id: target.dataset.undo }, (result) => `${COPY.event_undo} (${result.undone || 0})`)
-  }
-})
-
-document.addEventListener("input", (event) => {
-  if (event.target.id !== "vault-search") return
-  state.query = event.target.value
-  const items = activeItems(buildItems())
-  updateToolbarSummary(items)
-  renderTable(items)
-})
-document.addEventListener("change", (event) => {
-  if (event.target.id !== "vault-status-filter") return
-  state.statusFilter = event.target.value
-  render()
-})
-
-el("btn-scan").textContent = COPY.scan
-el("btn-add-source").setAttribute("aria-label", COPY.add_external_folder)
-el("btn-add-source").setAttribute("title", COPY.add_external_folder)
-el("btn-vault-options").setAttribute("aria-label", COPY.vault_options)
-el("vault-repair-title").textContent = COPY.repair_index
-el("vault-repair-description").textContent = COPY.repair_description
-el("btn-repair").textContent = COPY.repair_action
-refresh()
-</script>
+<script src="/storage-size.js"></script>
+<script src="/vault.js"></script>
 </body>
 </html>