@worca/ui 0.42.0 → 0.44.0

package/app/styles.css

@@ -8170,6 +8170,60 @@ sl-dialog.markdown-dialog::part(body) {
   color: var(--fg);
 }
 
+.template-action-dialog .dialog-collisions {
+  border-left: 3px solid var(--sl-color-warning-500, #f59e0b);
+  padding: 10px 12px;
+  background: var(--sl-color-warning-50, rgba(245, 158, 11, 0.05));
+  border-radius: 4px;
+  min-width: 0;
+}
+.template-action-dialog .dialog-collisions-header {
+  margin-bottom: 6px;
+}
+.template-action-dialog .dialog-collision-list {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.template-action-dialog .dialog-collision-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.template-action-dialog .dialog-collision-alias {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.template-action-dialog .dialog-collision-alias code {
+  font-family: var(--sl-font-mono);
+  font-size: 13px;
+  color: var(--fg);
+}
+.template-action-dialog .collision-action-select,
+.template-action-dialog .collision-rename-input {
+  width: 100%;
+  min-width: 0;
+}
+.template-action-dialog .dialog-collision-row[data-rename="false"] .collision-action-select {
+  grid-column: 2 / span 2;
+}
+.template-action-dialog .dialog-new-aliases-hint {
+  margin-top: 8px;
+}
+.template-action-dialog .dialog-new-aliases-hint code {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  color: var(--fg);
+  margin-right: 4px;
+}
+
 .editor-content {
   flex: 1;
   overflow-y: auto;
@@ -9241,7 +9295,10 @@ body.help-mode-active sl-tab {
   border-right: none;
 }
 
-/* File column header — sticky left, wider than data cells */
+/* File column header — sticky left, wider than data cells.
+   ``position: relative`` so the drag handle (.access-col-file-resizer)
+   can pin to the right edge with position:absolute. ``sticky`` already
+   establishes a containing block for absolute children. */
 .access-col-file-header {
   position: sticky;
   left: 0;
@@ -9254,6 +9311,37 @@ body.help-mode-active sl-tab {
   border-right: 2px solid var(--border, #e2e8f0);
 }
 
+/* Drag handle for resizing the file column. Pinned to the right edge of
+   the header; on pointerdown it captures the pointer and rewrites the
+   shared --fa-file-col-width CSS var on the .run-file-access root, which
+   the grid template + sticky cells both read so they move in lockstep. */
+.access-col-file-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 5;
+  background: transparent;
+}
+
+.access-col-file-resizer:hover,
+.access-col-file-resizer--active {
+  background: rgba(59, 130, 246, 0.35);
+}
+
+/* Body-level cursor lock during a drag (set via JS) — keeps the cursor as
+   col-resize even when the pointer leaves the handle's 7px hit area, which
+   is otherwise easy to do at faster drag speeds. */
+.access-col-file-resizing,
+.access-col-file-resizing * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
 .access-col-header--collapsed {
   background: rgba(59, 130, 246, 0.06);
   color: #3b82f6;
@@ -9338,10 +9426,12 @@ body.help-mode-active sl-tab {
   justify-content: flex-start;
   gap: 6px;
   padding: 3px 8px;
-  /* One indent step == a dir's [chevron 18px + gap 6px], so a child's content
-     (file name, or sub-folder chevron) starts exactly under its parent's
-     folder icon. */
-  padding-left: calc(8px + var(--depth, 0) * 24px);
+  /* One indent step == the full chevron + folder-icon prefix on a dir row:
+     chevron 18px + gap 6px + folder-icon 14px + gap 6px = 44px. A child file
+     row (no chevron/folder prefix) lands its name at exactly the x-position
+     of its parent folder's name, and a nested dir row's text aligns with
+     its grandparent's text — what a treegrid is supposed to look like. */
+  padding-left: calc(8px + var(--depth, 0) * 44px);
   background: inherit;
   border-right: 2px solid var(--border, #e2e8f0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",

package/server/file-access-aggregator.js

@@ -361,6 +361,14 @@ function fragmentRecordsToFileAccess(records, repoRoot) {
  * Relativise an absolute fragment path against the repo root (a live stand-in
  * for the Python GitPathOracle respelling). Paths already relative, or outside
  * the repo, are returned unchanged; the repo root itself maps to null.
+ *
+ * Tolerant recovery: when ``repoRoot`` is a worktree under
+ * ``<project>/.worktrees/<id>`` and ``rawPath`` is an absolute path pointing
+ * at a sibling clone of the same project (e.g. the main checkout), strip the
+ * prefix up to and including the project basename so the entry groups under
+ * the project tree instead of rendering the full absolute path. Mirrors the
+ * Python ``_recover_basename_tail`` in ``path_canon.py`` so live and
+ * completion-time views agree.
  */
 function canonicalizePath(rawPath, repoRoot) {
   if (!rawPath) return null;
@@ -368,7 +376,31 @@ function canonicalizePath(rawPath, repoRoot) {
     return rawPath.slice(repoRoot.length + 1);
   }
   if (rawPath === repoRoot) return null;
-  return rawPath;
+  return recoverWorktreeBasenameTail(rawPath, repoRoot) ?? rawPath;
+}
+
+/**
+ * Recover repo-relative tail from a raw absolute path that fell outside a
+ * worktree root. Returns null when the heuristic doesn't apply so the caller
+ * can fall back to the raw path unchanged.
+ */
+function recoverWorktreeBasenameTail(rawPath, repoRoot) {
+  if (!rawPath || !repoRoot) return null;
+  const rootParts = repoRoot.split('/');
+  const wtIdx = rootParts.indexOf('.worktrees');
+  if (wtIdx <= 0) return null;
+  const projectBasename = rootParts[wtIdx - 1];
+  if (!projectBasename) return null;
+  const rawParts = rawPath.split('/');
+  // Scan from the right — the tail closest to the leaf is the most likely
+  // intended target when the basename appears more than once.
+  for (let i = rawParts.length - 1; i >= 0; i--) {
+    if (rawParts[i] === projectBasename) {
+      const tail = rawParts.slice(i + 1).join('/');
+      return tail || null;
+    }
+  }
+  return null;
 }
 
 function ensureFile(fileData, path) {
@@ -451,7 +483,47 @@ function buildTree(fileData) {
 
   // Rollup dir totals and cells bottom-up, then serialise to arrays.
   rollupDir(root);
-  return [...root.children.values()].map(serializeNode);
+  return collapseSingleChildDirs(
+    [...root.children.values()].map(serializeNode),
+  );
+}
+
+/**
+ * Collapse chains of single-child intermediate directories into one synthetic
+ * node. Without this, a stray absolute path (e.g. /Volumes/Apps/dev/.../foo.js)
+ * renders as a six-deep chain of single-row dirs that buries the filename.
+ *
+ * Rule: walk bottom-up, then while a dir's only child is also a dir, merge:
+ * adopt the child's children/cells/totals (which equal the parent's, since
+ * the parent rolled up from the single child) and visually concatenate the
+ * names so the collapsed segments stay visible without burning rows.
+ *
+ * The collapsed node keeps the deeper child's ``path`` so per-file drawer
+ * lookups (which key on the file's full path) continue to work.
+ */
+function collapseSingleChildDirs(nodes) {
+  return nodes.map(collapseNode);
+}
+
+function collapseNode(node) {
+  if (node.type !== 'dir') return node;
+  // Recurse first so the rule applies bottom-up.
+  let current = { ...node, children: node.children.map(collapseNode) };
+  while (current.children.length === 1 && current.children[0].type === 'dir') {
+    const child = current.children[0];
+    current = {
+      ...current,
+      path: child.path,
+      name: `${current.name}/${child.name}`,
+      children: child.children,
+      // cells/totals of a parent with a single dir child equal the child's
+      // (rollup invariant), so adopting the child's keeps the row identical
+      // to what it would have rendered before the collapse.
+      cells: child.cells,
+      totals: child.totals,
+    };
+  }
+  return current;
 }
 
 function rollupDir(node) {

package/server/paths.js

@@ -23,6 +23,17 @@ export function worcaHome() {
   return join(homedir(), '.worca');
 }
 
+/**
+ * @returns {string} Absolute path to the user-global settings.json
+ * (`~/.worca/settings.json` by default, $WORCA_HOME-aware). The Python
+ * runtime reads this layer first and deep-merges project settings on top,
+ * so any UI surface that needs to mirror runtime resolution (e.g. model
+ * alias dropdowns) must layer this in.
+ */
+export function globalSettingsPath() {
+  return join(worcaHome(), 'settings.json');
+}
+
 /**
  * @param {string=} override Caller-supplied path that wins over $WORCA_HOME.
  * @returns {string} Absolute path to the fleet-runs directory.

package/server/project-routes.js

@@ -29,7 +29,7 @@ import { getDefaultBranch } from './git-helpers.js';
 import { extractAndStripGlobalKeys } from './global-keys.js';
 import { LaunchLock } from './launch-lock.js';
 import { createModelEnvRouter } from './model-env-routes.js';
-import { preferencesPath } from './paths.js';
+import { globalSettingsPath, preferencesPath } from './paths.js';
 import { readPreferences } from './preferences.js';
 import { ProcessManager } from './process-manager.js';
 import { countRunningPipelinesAcrossProjects } from './process-registry.js';
@@ -45,6 +45,7 @@ import {
 import {
   deepMerge,
   localPathFor,
+  readEffectiveSettings,
   readLocalSettings,
   readMergedSettings,
 } from './settings-merge.js';
@@ -488,6 +489,28 @@ export function createProjectScopedRoutes({
     }
   });
 
+  // GET /api/projects/:projectId/effective-settings
+  //
+  // Returns the fully-layered settings the Python runtime sees: user-global
+  // base → user-global .local → project base → project .local. Used by UI
+  // surfaces that must mirror runtime alias resolution (e.g. the per-agent
+  // model dropdown in the template editor — without this, aliases that live
+  // only in user-global ~/.worca/settings.json are invisible to projects).
+  router.get('/effective-settings', (req, res) => {
+    const { settingsPath } = req.project;
+    try {
+      const merged = readEffectiveSettings(settingsPath, globalSettingsPath());
+      res.json({
+        worca: merged.worca || {},
+        permissions: merged.permissions || {},
+      });
+    } catch (err) {
+      res
+        .status(500)
+        .json({ error: { code: 'read_error', message: err.message } });
+    }
+  });
+
   // POST /api/projects/:projectId/settings
   router.post('/settings', async (req, res) => {
     const { settingsPath } = req.project;

package/server/settings-merge.js

@@ -81,3 +81,48 @@ export function readLocalSettings(settingsPath) {
     return {};
   }
 }
+
+/**
+ * Read the full effective settings stack the way the Python runtime resolves
+ * it: user-global base → user-global .local → project base → project .local.
+ * Each layer deep-merges over the previous. Missing files are treated as
+ * empty objects. Used by UI surfaces (model alias dropdowns, etc.) that must
+ * mirror what `worca.utils.settings.resolve_model` sees at run time.
+ *
+ * `globalSettingsPath` is passed in so callers can substitute it during
+ * tests; production callers thread the result of `paths.globalSettingsPath()`.
+ */
+export function readEffectiveSettings(projectSettingsPath, globalSettingsPath) {
+  const layers = [];
+  if (globalSettingsPath) {
+    try {
+      layers.push(JSON.parse(readFileSync(globalSettingsPath, 'utf8')));
+    } catch {
+      /* missing or invalid — treat as empty */
+    }
+    const globalLocal = localPathFor(globalSettingsPath);
+    if (existsSync(globalLocal)) {
+      try {
+        layers.push(JSON.parse(readFileSync(globalLocal, 'utf8')));
+      } catch {
+        /* invalid — skip */
+      }
+    }
+  }
+  if (projectSettingsPath) {
+    try {
+      layers.push(JSON.parse(readFileSync(projectSettingsPath, 'utf8')));
+    } catch {
+      /* missing or invalid — treat as empty */
+    }
+    const projectLocal = localPathFor(projectSettingsPath);
+    if (existsSync(projectLocal)) {
+      try {
+        layers.push(JSON.parse(readFileSync(projectLocal, 'utf8')));
+      } catch {
+        /* invalid — skip */
+      }
+    }
+  }
+  return layers.reduce((acc, layer) => deepMerge(acc, layer), {});
+}

package/server/templates-routes.js

@@ -313,6 +313,12 @@ function exportBundle(projectRoot, id, mode = 'standalone') {
   const dir = mkdtempSync(join(tmpdir(), 'worca-bundle-'));
   try {
     const bundlePath = join(dir, `${id}-bundle.out`);
+    // --include-models / --include-pricing: bundle the project's worca.models
+    // and worca.pricing entries that the template references (e.g. a custom
+    // "glm-ds" alias). The CLI already filters to *referenced* aliases via
+    // collect_referenced_model_aliases, so built-ins the importer already has
+    // (opus/sonnet/haiku) aren't shipped redundantly. Without these flags a
+    // bundle that names a custom alias is broken on import.
     runWorcaTemplates(projectRoot, [
       'export',
       '--to',
@@ -321,6 +327,8 @@ function exportBundle(projectRoot, id, mode = 'standalone') {
       id,
       '--mode',
       normalizedMode,
+      '--include-models',
+      '--include-pricing',
     ]);
     if (existsSync(bundlePath)) {
       const buf = readFileSync(bundlePath);
@@ -354,7 +362,15 @@ function exportBundle(projectRoot, id, mode = 'standalone') {
 function exportGist(projectRoot, id) {
   const stdout = runWorcaTemplates(
     projectRoot,
-    ['export', '--to', 'gist', '--templates', id],
+    [
+      'export',
+      '--to',
+      'gist',
+      '--templates',
+      id,
+      '--include-models',
+      '--include-pricing',
+    ],
     { timeout: 30000 },
   );
   // The CLI prints the gist URL (from `gh gist create`) as its final stdout line.
@@ -362,6 +378,50 @@ function exportGist(projectRoot, id) {
   return match ? match[0] : null;
 }
 
+function _parseResolutionsHeader(req) {
+  const raw = req.headers['x-resolutions'];
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch {
+    /* fall through */
+  }
+  return null;
+}
+
+function _writeResolutionsFile(dir, resolutions) {
+  if (!resolutions || Object.keys(resolutions).length === 0) return null;
+  const path = join(dir, 'resolutions.json');
+  writeFileSync(path, JSON.stringify(resolutions), 'utf8');
+  return path;
+}
+
+function _baseImportArgs(
+  bundlePath,
+  dstTier,
+  resolutionsPath,
+  onModelConflict,
+) {
+  const args = [
+    'import',
+    '--from',
+    bundlePath,
+    '--scope',
+    dstTier,
+    '--non-interactive',
+  ];
+  if (resolutionsPath) {
+    args.push('--resolutions', resolutionsPath);
+  }
+  if (onModelConflict) {
+    args.push('--on-model-conflict', onModelConflict);
+  }
+  return args;
+}
+
 function handleZipImport(req, res) {
   const dstTier = req.query.dst_tier;
   if (!isValidTier(dstTier)) {
@@ -373,18 +433,18 @@ function handleZipImport(req, res) {
   if (rejectBuiltinWrite(res, dstTier, 'import to')) return;
 
   const zipBuffer = req.body;
-  const tmpPath = join(
-    tmpdir(),
-    `worca-import-${Math.random().toString(36).slice(2)}.zip`,
-  );
+  const resolutions = _parseResolutionsHeader(req);
+  const onModelConflict = req.query.on_model_conflict || null;
+  const dir = mkdtempSync(join(tmpdir(), 'worca-import-'));
+  const tmpPath = join(dir, 'bundle.zip');
   try {
     writeFileSync(tmpPath, zipBuffer);
+    const resolutionsPath = _writeResolutionsFile(dir, resolutions);
     const stdout = runWorcaTemplates(
       req.project.projectRoot,
-      ['import', '--from', tmpPath, '--scope', dstTier, '--non-interactive'],
+      _baseImportArgs(tmpPath, dstTier, resolutionsPath, onModelConflict),
       { timeout: 60000 },
     );
-    // Best-effort summary: the CLI may print imported template ids to stdout
     const imported = [];
     for (const line of (stdout || '').split('\n')) {
       const m = line.match(/imported[:\s]+([a-z0-9_-]+)/i);
@@ -396,16 +456,76 @@ function handleZipImport(req, res) {
       .status(statusForCliCode(err.cliCode))
       .json({ ok: false, error: err.message, code: err.cliCode });
   } finally {
+    cleanupTemp(dir);
+  }
+}
+
+function handleImportPreview(req, res) {
+  const dstTier = req.query.dst_tier;
+  if (!isValidTier(dstTier)) {
+    return res.status(400).json({
+      ok: false,
+      error: `dst_tier must be one of: ${TIERS.join(', ')}`,
+    });
+  }
+  if (rejectBuiltinWrite(res, dstTier, 'import to')) return;
+
+  const ctype = req.headers['content-type'] || '';
+  const dir = mkdtempSync(join(tmpdir(), 'worca-import-preview-'));
+  try {
+    let bundlePath;
+    if (ctype.startsWith('application/zip')) {
+      bundlePath = join(dir, 'bundle.zip');
+      writeFileSync(bundlePath, req.body);
+    } else {
+      const { bundle } = req.body || {};
+      if (!bundle || typeof bundle !== 'object') {
+        return res
+          .status(400)
+          .json({ ok: false, error: 'bundle must be a JSON object' });
+      }
+      bundlePath = join(dir, 'bundle.json');
+      writeFileSync(bundlePath, JSON.stringify(bundle), 'utf8');
+    }
+    const stdout = runWorcaTemplates(
+      req.project.projectRoot,
+      [
+        'import',
+        '--from',
+        bundlePath,
+        '--scope',
+        dstTier,
+        '--non-interactive',
+        '--preview',
+      ],
+      { timeout: 30000 },
+    );
     try {
-      rmSync(tmpPath, { force: true });
+      const payload = JSON.parse(stdout);
+      res.json({ ok: true, ...payload });
     } catch {
-      /* ignore cleanup errors */
+      res.status(500).json({
+        ok: false,
+        error: 'CLI preview output was not valid JSON',
+        raw: stdout,
+      });
     }
+  } catch (err) {
+    res
+      .status(statusForCliCode(err.cliCode))
+      .json({ ok: false, error: err.message, code: err.cliCode });
+  } finally {
+    cleanupTemp(dir);
   }
 }
 
 function handleJsonImport(req, res) {
-  const { bundle, dst_tier: dstTier } = req.body || {};
+  const {
+    bundle,
+    dst_tier: dstTier,
+    resolutions,
+    on_model_conflict: onModelConflict,
+  } = req.body || {};
   if (!bundle || typeof bundle !== 'object') {
     return res
       .status(400)
@@ -419,7 +539,10 @@ function handleJsonImport(req, res) {
   }
   if (rejectBuiltinWrite(res, dstTier, 'import to')) return;
   try {
-    const result = importBundle(req.project.projectRoot, bundle, dstTier);
+    const result = importBundle(req.project.projectRoot, bundle, dstTier, {
+      resolutions,
+      onModelConflict,
+    });
     res.json({ ok: true, ...result });
   } catch (err) {
     res
@@ -428,17 +551,19 @@ function handleJsonImport(req, res) {
   }
 }
 
-function importBundle(projectRoot, bundle, tier) {
+function importBundle(projectRoot, bundle, tier, opts = {}) {
   if (!bundle || !Array.isArray(bundle.templates)) {
     throw new Error('Bundle must contain a "templates" array');
   }
+  const { resolutions, onModelConflict } = opts;
   const dir = mkdtempSync(join(tmpdir(), 'worca-import-'));
   const bundlePath = join(dir, 'bundle.json');
   try {
     writeFileSync(bundlePath, JSON.stringify(bundle), 'utf8');
+    const resolutionsPath = _writeResolutionsFile(dir, resolutions);
     runWorcaTemplates(
       projectRoot,
-      ['import', '--from', bundlePath, '--scope', tier, '--non-interactive'],
+      _baseImportArgs(bundlePath, tier, resolutionsPath, onModelConflict),
       { timeout: 60000 },
     );
     const targetDir = dirForTier(projectRoot, tier);
@@ -577,6 +702,12 @@ export function createTemplatesRoutes() {
     },
   );
 
+  router.post(
+    '/templates/import/preview',
+    expressRaw({ type: 'application/zip', limit: '1mb' }),
+    (req, res) => handleImportPreview(req, res),
+  );
+
   /**
    * POST /api/projects/:projectId/templates/validate
    * Body: { config }