feat: Sample Tag Viewer — read-only tag browser for AKAI disk images
Backend: - extract.go: listTags() navigates to volume, runs akaiutil lstags - extract.go: parseTags() parses tag name/index from lstags output - serve.go: GET /api/disk/partitions — list partitions on an ISO - serve.go: GET /api/disk/volumes — list volumes on a partition - serve.go: GET /api/volume/tags — list tags on a volume Web UI: - Tag Viewer section with ISO path input and Browse button - Partition selector buttons - Volume grid with click-to-select - Tag chips with color-coded dots (20-color palette) Tests: - 6 parseTags tests (basic, spaces, defaults, no tags, empty, no-type) - 1 listTags integration test - 4 API endpoint tests (partitions, missing-ISO, missing-params, tags) Karpathy: read-only view first — no write operations yet (settagi, clrtagi)
This commit is contained in:
+110
@@ -380,6 +380,10 @@ document.addEventListener('click', function(e) {
|
||||
listItem(btn.dataset.identifier);
|
||||
} else if (action === 'play') {
|
||||
playWav(btn.dataset.wav);
|
||||
} else if (action === 'tag-part') {
|
||||
selectPartition(btn.dataset.iso, btn.dataset.part);
|
||||
} else if (action === 'tag-vol') {
|
||||
viewVolumeTags(btn.dataset.iso, btn.dataset.part, btn.dataset.vol);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -396,3 +400,109 @@ document.querySelectorAll('.section-toggle').forEach(h => {
|
||||
document.getElementById('wav-collapse-all').addEventListener('click', function () {
|
||||
document.querySelectorAll('.library-card').forEach(c => c.classList.add('collapsed'));
|
||||
});
|
||||
|
||||
// ─── Tag Viewer ─────────────────────────────────────────────────────
|
||||
|
||||
const TAG_COLORS = [
|
||||
'#e94560', '#4ecca3', '#f0c040', '#7c3aed', '#06b6d4',
|
||||
'#f97316', '#84cc16', '#ec4899', '#3b82f6', '#14b8a6',
|
||||
'#a855f7', '#ef4444', '#22c55e', '#eab308', '#6366f1',
|
||||
'#10b981', '#f43f5e', '#8b5cf6', '#0ea5e9', '#d946ef'
|
||||
]
|
||||
|
||||
document.getElementById('tag-browse-btn').addEventListener('click', browseISO)
|
||||
|
||||
async function browseISO() {
|
||||
const iso = document.getElementById('tag-iso-path').value
|
||||
const results = document.getElementById('tag-results')
|
||||
const status = document.getElementById('tag-status')
|
||||
const partsEl = document.getElementById('tag-partitions')
|
||||
const volsEl = document.getElementById('tag-volumes')
|
||||
const detailEl = document.getElementById('tag-detail')
|
||||
|
||||
partsEl.innerHTML = ''
|
||||
volsEl.innerHTML = ''
|
||||
detailEl.innerHTML = ''
|
||||
status.textContent = 'Loading partitions...'
|
||||
results.style.display = 'block'
|
||||
|
||||
try {
|
||||
const resp = await fetch(`${API}/disk/partitions?iso=${encodeURIComponent(iso)}`)
|
||||
const data = await resp.json()
|
||||
if (data.error) {
|
||||
status.textContent = data.error
|
||||
return
|
||||
}
|
||||
status.textContent = data.length + ' partition' + (data.length === 1 ? '' : 's')
|
||||
partsEl.innerHTML = data.map(p => `
|
||||
<button class="tag-part-btn" data-action="tag-part" data-iso="${esc(iso)}" data-part="${esc(p)}">Partition ${esc(p)}</button>
|
||||
`).join('')
|
||||
} catch (e) {
|
||||
status.textContent = 'Failed: ' + e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function selectPartition(iso, part) {
|
||||
const volsEl = document.getElementById('tag-volumes')
|
||||
const detailEl = document.getElementById('tag-detail')
|
||||
|
||||
document.querySelectorAll('.tag-part-btn').forEach(b => {
|
||||
b.classList.toggle('active', b.dataset.part === part)
|
||||
})
|
||||
volsEl.innerHTML = 'Loading volumes...'
|
||||
detailEl.innerHTML = ''
|
||||
|
||||
try {
|
||||
const resp = await fetch(`${API}/disk/volumes?iso=${encodeURIComponent(iso)}&part=${encodeURIComponent(part)}`)
|
||||
const data = await resp.json()
|
||||
if (data.error) {
|
||||
volsEl.innerHTML = '<span class="no-files">' + data.error + '</span>'
|
||||
return
|
||||
}
|
||||
if (!Array.isArray(data) || data.length === 0) {
|
||||
volsEl.innerHTML = '<span class="no-files">No volumes on Partition ' + part + '</span>'
|
||||
return
|
||||
}
|
||||
volsEl.innerHTML = data.map(v => `
|
||||
<div class="vol-item" data-action="tag-vol" data-iso="${esc(iso)}" data-part="${esc(part)}" data-vol="${esc(v.Name)}">${esc(v.Name)}</div>
|
||||
`).join('')
|
||||
} catch (e) {
|
||||
volsEl.innerHTML = 'Failed: ' + e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function viewVolumeTags(iso, part, vol) {
|
||||
const detailEl = document.getElementById('tag-detail')
|
||||
document.querySelectorAll('.vol-item').forEach(el => {
|
||||
el.classList.toggle('selected', el.textContent === vol)
|
||||
})
|
||||
detailEl.innerHTML = 'Loading tags...'
|
||||
|
||||
try {
|
||||
const resp = await fetch(`${API}/volume/tags?iso=${encodeURIComponent(iso)}&part=${encodeURIComponent(part)}&vol=${encodeURIComponent(vol)}`)
|
||||
const data = await resp.json()
|
||||
if (data.error) {
|
||||
detailEl.innerHTML = '<span class="no-files">' + data.error + '</span>'
|
||||
return
|
||||
}
|
||||
if (!Array.isArray(data) || data.length === 0) {
|
||||
detailEl.innerHTML = '<span class="no-files">No tags on this volume</span>'
|
||||
return
|
||||
}
|
||||
|
||||
const colorKeys = TAG_COLORS
|
||||
detailEl.innerHTML = `
|
||||
<h4>Tags: ${esc(vol)}</h4>
|
||||
<div class="tag-list">
|
||||
${data.map(t => {
|
||||
const color = colorKeys[(t.index - 1) % colorKeys.length]
|
||||
return `<span class="tag-chip">
|
||||
<span class="tag-dot" style="background:${color}"></span>
|
||||
${esc(t.name)}
|
||||
</span>`
|
||||
}).join('')}
|
||||
</div>`
|
||||
} catch (e) {
|
||||
detailEl.innerHTML = 'Failed: ' + e.message
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,22 @@
|
||||
<div id="extract-status"></div>
|
||||
</section>
|
||||
|
||||
<section id="tag-section">
|
||||
<h2 class="section-toggle" data-section="tag-body">Tag Viewer <span class="toggle-icon">▾</span></h2>
|
||||
<div id="tag-body">
|
||||
<div class="tag-controls">
|
||||
<input type="text" id="tag-iso-path" placeholder="ISO file path" value="./output/isos">
|
||||
<button id="tag-browse-btn">Browse</button>
|
||||
</div>
|
||||
<div id="tag-results" style="display:none">
|
||||
<div id="tag-status"></div>
|
||||
<div id="tag-partitions" class="tag-partitions"></div>
|
||||
<div id="tag-volumes" class="tag-volumes"></div>
|
||||
<div id="tag-detail" class="tag-detail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wav-section">
|
||||
<h2 class="section-toggle" data-section="wav-body">Sample Library <span class="toggle-icon">▾</span></h2>
|
||||
<div id="wav-body">
|
||||
|
||||
@@ -387,6 +387,130 @@ h2 {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Tag viewer */
|
||||
.tag-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag-controls input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--bg3);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
.tag-controls button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-controls button:hover { opacity: 0.9; }
|
||||
|
||||
.tag-status {
|
||||
font-size: 13px;
|
||||
color: var(--text2);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tag-partitions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tag-part-btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--bg3);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.tag-part-btn:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.tag-part-btn.active {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tag-volumes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vol-item {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--bg3);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vol-item:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.vol-item.selected {
|
||||
border-color: var(--green);
|
||||
background: rgba(78, 204, 163, 0.1);
|
||||
}
|
||||
|
||||
.tag-detail {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag-detail h4 {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--bg3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tag-chip .tag-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Sample cards */
|
||||
.sample-card {
|
||||
background: var(--bg);
|
||||
|
||||
Reference in New Issue
Block a user