Add files via upload

web/static/js/monitor.js

@@ -3637,10 +3637,15 @@ function buildMcpTimelineSvg(points, rangeKey) {
     const tickIdx = points.length <= 2
         ? points.map((_, i) => i)
         : [0, Math.floor((points.length - 1) / 2), points.length - 1];
-    const xLabels = tickIdx.map((idx) => {
+    const xLabels = tickIdx.map((idx, ti) => {
         const c = coords[idx];
         const label = formatMcpTimelineLabel(c.p.t, rangeKey, locale);
-        return `<text class="mcp-stats-timeline-axis" x="${c.x.toFixed(2)}" y="${H - 5}" text-anchor="middle">${escapeHtml(label)}</text>`;
+        let anchor = 'middle';
+        if (tickIdx.length > 1) {
+            if (ti === 0) anchor = 'start';
+            else if (ti === tickIdx.length - 1) anchor = 'end';
+        }
+        return `<text class="mcp-stats-timeline-axis" x="${c.x.toFixed(2)}" y="${H - 5}" text-anchor="${anchor}">${escapeHtml(label)}</text>`;
     }).join('');
 
     const dots = coords.map((c) => {

web/static/js/skills.js

@@ -468,6 +468,11 @@ function showAddSkillModal() {
     modal.style.display = 'flex';
 }
 
+function skillPackagePathDepth(path) {
+    if (!path) return 0;
+    return (String(path).replace(/\/$/, '').match(/\//g) || []).length;
+}
+
 function renderSkillPackageTree() {
     const el = document.getElementById('skill-package-tree');
     if (!el) return;
@@ -479,13 +484,19 @@ function renderSkillPackageTree() {
     }
     el.innerHTML = rows.map(f => {
         const path = f.path || '';
+        const indent = 8 + skillPackagePathDepth(path) * 14;
         if (f.is_dir) {
-            return `<div style="padding:4px 6px;opacity:0.85;font-weight:600;">${escapeHtml(path)}/</div>`;
+            const dirLabel = path.endsWith('/') ? path : path + '/';
+            return `<div class="skill-tree-row skill-tree-dir" style="padding-left:${indent}px" title="${escapeHtml(_t('skillModal.folderHint'))}">` +
+                `<span class="skill-tree-icon" aria-hidden="true">📁</span>` +
+                `<span class="skill-tree-label">${escapeHtml(dirLabel)}</span>` +
+                `</div>`;
         }
-        const sel = path === skillActivePath
-            ? 'font-weight:600;background:rgba(99,102,241,0.12);'
-            : '';
-        return `<div style="padding:4px 6px;cursor:pointer;border-radius:4px;margin-bottom:2px;${sel}" data-skill-tree-path="${escapeHtml(path)}" class="skill-tree-item">${escapeHtml(path)}</div>`;
+        const selected = path === skillActivePath ? ' is-selected' : '';
+        return `<div class="skill-tree-row skill-tree-file${selected}" style="padding-left:${indent}px" data-skill-tree-path="${escapeHtml(path)}" title="${escapeHtml(_t('skillModal.clickToEdit'))}">` +
+            `<span class="skill-tree-icon" aria-hidden="true">📄</span>` +
+            `<span class="skill-tree-label">${escapeHtml(path)}</span>` +
+            `</div>`;
     }).join('');
     el.querySelectorAll('[data-skill-tree-path]').forEach(node => {
         node.addEventListener('click', () => {