1035 lines
29 KiB
HTML
1035 lines
29 KiB
HTML
<style>
|
|
@font-face {
|
|
font-family: 'M-1m Code';
|
|
src: url('/card-templates/todo-item-live/assets/mplus-1m-regular-sub.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'M-1m Code';
|
|
src: url('/card-templates/todo-item-live/assets/mplus-1m-bold-sub.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans Condensed';
|
|
src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-400.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans Condensed';
|
|
src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-600.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans Condensed';
|
|
src: url('/card-templates/todo-item-live/assets/ibm-plex-sans-condensed-700.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
.task-card {
|
|
--task-accent: #58706f;
|
|
--task-accent-soft: rgba(88, 112, 111, 0.12);
|
|
--task-ink: #2f241e;
|
|
--task-muted: #7e6659;
|
|
--task-surface: rgba(255, 248, 239, 0.92);
|
|
--task-surface-strong: rgba(250, 238, 221, 0.95);
|
|
--task-border: rgba(87, 65, 50, 0.14);
|
|
--task-button-ink: #214240;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--task-border);
|
|
background:
|
|
radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%),
|
|
linear-gradient(145deg, rgba(253, 245, 235, 0.98), rgba(242, 227, 211, 0.97));
|
|
color: var(--task-ink);
|
|
font-family: 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.68),
|
|
0 18px 36px rgba(79, 56, 43, 0.12);
|
|
}
|
|
|
|
.task-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
135deg,
|
|
rgba(122, 97, 78, 0.035) 0,
|
|
rgba(122, 97, 78, 0.035) 2px,
|
|
transparent 2px,
|
|
transparent 10px
|
|
);
|
|
pointer-events: none;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.task-card__inner {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 15px 14px 13px 14px;
|
|
}
|
|
|
|
.task-card__topline {
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 4;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.task-card__lane-button {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.task-card__lane {
|
|
min-width: 0;
|
|
font-size: 0.64rem;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
color: var(--task-muted);
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.task-card__lane-caret {
|
|
flex: 0 0 auto;
|
|
font-family: 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
|
|
font-size: 0.66rem;
|
|
line-height: 1;
|
|
color: var(--task-muted);
|
|
transform: translateY(-1px);
|
|
transition: transform 0.18s ease;
|
|
}
|
|
|
|
.task-card__lane-button[data-open='1'] .task-card__lane-caret {
|
|
transform: translateY(-1px) rotate(180deg);
|
|
}
|
|
|
|
.task-card__lane-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.task-card__stamp {
|
|
display: none;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
font-size: 0.72rem;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
color: var(--task-muted);
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.task-card__title {
|
|
font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
|
|
font-size: 0.96rem;
|
|
line-height: 1.06;
|
|
font-weight: 700;
|
|
letter-spacing: -0.008em;
|
|
color: var(--task-ink);
|
|
text-wrap: balance;
|
|
word-break: break-word;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.task-card__tags {
|
|
display: none;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.task-card__tags::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.task-card__tag {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
border-radius: 999px;
|
|
padding: 4px 9px;
|
|
background: var(--task-accent-soft);
|
|
color: var(--task-button-ink);
|
|
font-size: 0.71rem;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
border: 1px solid rgba(0, 0, 0, 0.035);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.task-card__tag:disabled {
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.task-card__tag--action {
|
|
border-style: dashed;
|
|
background: rgba(255, 248, 239, 0.74);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.task-card__tag--holding {
|
|
background: rgba(165, 95, 75, 0.18);
|
|
color: #7b2f20;
|
|
}
|
|
|
|
.task-card__body {
|
|
display: none;
|
|
font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
|
|
font-size: 0.86rem;
|
|
line-height: 1.34;
|
|
font-weight: 400;
|
|
letter-spacing: 0.005em;
|
|
color: #624d40;
|
|
opacity: 0.95;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.task-card__body--placeholder {
|
|
opacity: 0.62;
|
|
font-style: italic;
|
|
}
|
|
|
|
.task-card__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.task-card__meta-chip {
|
|
display: none;
|
|
align-items: center;
|
|
min-height: 25px;
|
|
border-radius: 999px;
|
|
padding: 5px 9px;
|
|
background: var(--task-surface);
|
|
color: var(--task-muted);
|
|
font-size: 0.69rem;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.task-card__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.task-card__button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 8px 11px;
|
|
background: var(--task-accent);
|
|
color: #f9f4ed;
|
|
font: 700 0.74rem/1 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
|
|
letter-spacing: 0.02em;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.task-card__button--secondary {
|
|
background: var(--task-surface-strong);
|
|
color: var(--task-button-ink);
|
|
}
|
|
|
|
.task-card__button:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.task-card__move {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 150px;
|
|
padding: 6px;
|
|
border-radius: 14px;
|
|
background: rgba(255, 248, 239, 0.96);
|
|
box-shadow:
|
|
0 10px 24px rgba(79, 56, 43, 0.12),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.task-card__move-button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
background: rgba(255, 248, 239, 0.78);
|
|
color: var(--task-button-ink);
|
|
font: 700 0.7rem/1 'M-1m Code', var(--card-font, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
|
|
cursor: pointer;
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
text-align: left;
|
|
}
|
|
|
|
.task-card__title--editing,
|
|
.task-card__body--editing {
|
|
cursor: text;
|
|
}
|
|
|
|
.task-card__inline-editor {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: none;
|
|
resize: none;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
line-height: inherit;
|
|
letter-spacing: inherit;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.task-card__inline-editor::placeholder {
|
|
color: rgba(98, 77, 64, 0.6);
|
|
opacity: 1;
|
|
font-style: italic;
|
|
}
|
|
|
|
.task-card__inline-editor--title {
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.task-card__inline-editor--body {
|
|
min-height: 1.34em;
|
|
}
|
|
</style>
|
|
|
|
<div data-task-item-card class="task-card">
|
|
<div class="task-card__inner">
|
|
<div class="task-card__topline">
|
|
<button
|
|
data-task-lane-toggle
|
|
type="button"
|
|
class="task-card__lane-button"
|
|
aria-expanded="false"
|
|
data-open="0"
|
|
>
|
|
<span data-task-subtitle class="task-card__lane">Task</span>
|
|
<span class="task-card__lane-caret">▾</span>
|
|
</button>
|
|
<span data-task-status class="task-card__stamp"></span>
|
|
<div data-task-move-menu class="task-card__move"></div>
|
|
</div>
|
|
|
|
<div data-task-summary class="task-card__title">Loading...</div>
|
|
<div data-task-tags class="task-card__tags"></div>
|
|
<div data-task-description class="task-card__body"></div>
|
|
|
|
<div class="task-card__meta">
|
|
<div data-task-due class="task-card__meta-chip"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const script = document.currentScript;
|
|
const root = script?.closest('[data-nanobot-card-root]');
|
|
const state = window.__nanobotGetCardState?.(script) || {};
|
|
if (!(root instanceof HTMLElement)) return;
|
|
const doc = root.ownerDocument || document;
|
|
const view = doc.defaultView || window;
|
|
|
|
const cardEl = root.querySelector('[data-task-item-card]');
|
|
const laneToggleEl = root.querySelector('[data-task-lane-toggle]');
|
|
const subtitleEl = root.querySelector('[data-task-subtitle]');
|
|
const statusEl = root.querySelector('[data-task-status]');
|
|
const summaryEl = root.querySelector('[data-task-summary]');
|
|
const tagsEl = root.querySelector('[data-task-tags]');
|
|
const dueEl = root.querySelector('[data-task-due]');
|
|
const descriptionEl = root.querySelector('[data-task-description]');
|
|
const moveMenuEl = root.querySelector('[data-task-move-menu]');
|
|
if (
|
|
!(cardEl instanceof HTMLElement) ||
|
|
!(laneToggleEl instanceof HTMLButtonElement) ||
|
|
!(subtitleEl instanceof HTMLElement) ||
|
|
!(statusEl instanceof HTMLElement) ||
|
|
!(summaryEl instanceof HTMLElement) ||
|
|
!(tagsEl instanceof HTMLElement) ||
|
|
!(dueEl instanceof HTMLElement) ||
|
|
!(descriptionEl instanceof HTMLElement) ||
|
|
!(moveMenuEl instanceof HTMLElement)
|
|
) return;
|
|
|
|
const taskPath = typeof state.task_path === 'string' ? state.task_path.trim() : '';
|
|
const taskKey = typeof state.task_key === 'string' ? state.task_key.trim() : '';
|
|
const title = typeof state.title === 'string' ? state.title.trim() : '';
|
|
const lane = typeof state.lane === 'string' ? state.lane.trim() : 'backlog';
|
|
const created = typeof state.created === 'string' ? state.created.trim() : '';
|
|
const updated = typeof state.updated === 'string' ? state.updated.trim() : '';
|
|
const due = typeof state.due === 'string' ? state.due.trim() : '';
|
|
const body = typeof state.body === 'string' ? state.body.trim() : '';
|
|
const tags = Array.isArray(state.tags)
|
|
? state.tags.map((value) => String(value || '').trim()).filter(Boolean)
|
|
: [];
|
|
const metadata = state && typeof state.metadata === 'object' && state.metadata && !Array.isArray(state.metadata)
|
|
? state.metadata
|
|
: {};
|
|
|
|
const laneLabels = {
|
|
backlog: 'Backlog',
|
|
'in-progress': 'In Progress',
|
|
blocked: 'Blocked',
|
|
done: 'Done',
|
|
canceled: 'Canceled',
|
|
};
|
|
|
|
const laneThemes = {
|
|
backlog: {
|
|
accent: '#5f7884',
|
|
accentSoft: 'rgba(95, 120, 132, 0.13)',
|
|
muted: '#6b7e87',
|
|
buttonInk: '#294a57',
|
|
},
|
|
'in-progress': {
|
|
accent: '#4f7862',
|
|
accentSoft: 'rgba(79, 120, 98, 0.13)',
|
|
muted: '#5e7768',
|
|
buttonInk: '#214437',
|
|
},
|
|
blocked: {
|
|
accent: '#a55f4b',
|
|
accentSoft: 'rgba(165, 95, 75, 0.13)',
|
|
muted: '#906659',
|
|
buttonInk: '#6c2f21',
|
|
},
|
|
done: {
|
|
accent: '#6d7f58',
|
|
accentSoft: 'rgba(109, 127, 88, 0.12)',
|
|
muted: '#6b755d',
|
|
buttonInk: '#304121',
|
|
},
|
|
canceled: {
|
|
accent: '#7b716a',
|
|
accentSoft: 'rgba(123, 113, 106, 0.12)',
|
|
muted: '#7b716a',
|
|
buttonInk: '#433932',
|
|
},
|
|
};
|
|
|
|
const actionLabels = {
|
|
backlog: 'Backlog',
|
|
'in-progress': 'Start',
|
|
blocked: 'Block',
|
|
done: 'Done',
|
|
canceled: 'Cancel',
|
|
};
|
|
|
|
const moveOptionsForLane = (value) => {
|
|
return ['backlog', 'in-progress', 'blocked', 'done', 'canceled']
|
|
.filter((targetLane) => targetLane !== value)
|
|
.map((targetLane) => ({
|
|
lane: targetLane,
|
|
label: actionLabels[targetLane] || targetLane,
|
|
}));
|
|
};
|
|
|
|
const applyTheme = () => {
|
|
const theme = laneThemes[lane] || laneThemes.backlog;
|
|
cardEl.style.setProperty('--task-accent', theme.accent);
|
|
cardEl.style.setProperty('--task-accent-soft', theme.accentSoft);
|
|
cardEl.style.setProperty('--task-muted', theme.muted);
|
|
cardEl.style.setProperty('--task-button-ink', theme.buttonInk);
|
|
};
|
|
|
|
const setStatus = (label, fg, bg) => {
|
|
statusEl.textContent = label;
|
|
statusEl.style.color = fg || 'var(--task-muted)';
|
|
statusEl.style.background = bg && bg !== 'transparent' ? bg : 'transparent';
|
|
statusEl.style.border = bg && bg !== 'transparent' ? '1px solid rgba(0, 0, 0, 0.04)' : '0';
|
|
statusEl.style.padding = bg && bg !== 'transparent' ? '5px 8px' : '0';
|
|
statusEl.style.display = label ? 'inline-flex' : 'none';
|
|
};
|
|
|
|
const parseDueTimeMs = () => {
|
|
if (!due) return null;
|
|
const raw = due.includes('T') ? due : `${due}T12:00:00`;
|
|
const parsed = new Date(raw).getTime();
|
|
return Number.isFinite(parsed) ? parsed : null;
|
|
};
|
|
|
|
const parseCreatedTimeMs = () => {
|
|
if (!created) return null;
|
|
const parsed = new Date(created).getTime();
|
|
return Number.isFinite(parsed) ? parsed : null;
|
|
};
|
|
|
|
const computeScore = () => {
|
|
const now = Date.now();
|
|
const dueMs = parseDueTimeMs();
|
|
let score = 54;
|
|
if (Number.isFinite(dueMs)) {
|
|
const hoursUntilDue = (dueMs - now) / (60 * 60 * 1000);
|
|
if (hoursUntilDue <= 0) score = 100;
|
|
else if (hoursUntilDue <= 6) score = 96;
|
|
else if (hoursUntilDue <= 24) score = 92;
|
|
else if (hoursUntilDue <= 72) score = 82;
|
|
else if (hoursUntilDue <= 168) score = 72;
|
|
else score = 62;
|
|
} else {
|
|
const createdMs = parseCreatedTimeMs();
|
|
if (Number.isFinite(createdMs)) {
|
|
const ageDays = Math.max(0, (now - createdMs) / (24 * 60 * 60 * 1000));
|
|
if (ageDays >= 30) score = 80;
|
|
else if (ageDays >= 21) score = 76;
|
|
else if (ageDays >= 14) score = 72;
|
|
else if (ageDays >= 7) score = 68;
|
|
else if (ageDays >= 3) score = 62;
|
|
else if (ageDays >= 1) score = 58;
|
|
}
|
|
}
|
|
if (lane === 'blocked') return Math.min(100, score + 4);
|
|
if (lane === 'in-progress') return Math.min(100, score + 2);
|
|
return score;
|
|
};
|
|
|
|
const formatDue = () => {
|
|
if (!due) return '';
|
|
const raw = due.includes('T') ? due : `${due}T00:00:00`;
|
|
const parsed = new Date(raw);
|
|
if (Number.isNaN(parsed.getTime())) return `Due ${due}`;
|
|
if (due.includes('T')) {
|
|
return `Due ${parsed.toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}`;
|
|
}
|
|
return `Due ${parsed.toLocaleDateString([], { month: 'short', day: 'numeric' })}`;
|
|
};
|
|
|
|
const summarizeBody = () => {
|
|
if (!body) return '';
|
|
const trimmed = body.trim();
|
|
if (!trimmed || /^##\s+Imported\b/i.test(trimmed)) return '';
|
|
const [firstSection] = trimmed.split(/\n##\s+/);
|
|
const summary = firstSection
|
|
.split(/\n{2,}/)
|
|
.map((part) => part.trim())
|
|
.find(Boolean);
|
|
if (!summary) return '';
|
|
if (summary.toLowerCase() === title.toLowerCase()) return '';
|
|
return summary;
|
|
};
|
|
|
|
const publishLiveContent = (statusValue, exists = true, error = '') => {
|
|
window.__nanobotSetCardLiveContent?.(script, {
|
|
kind: 'file_task',
|
|
exists,
|
|
task_path: taskPath || null,
|
|
task_key: taskKey || null,
|
|
title: title || null,
|
|
lane,
|
|
created: created || null,
|
|
updated: updated || null,
|
|
due: due || null,
|
|
tags,
|
|
metadata,
|
|
score: computeScore(),
|
|
status: statusValue,
|
|
error: error || null,
|
|
});
|
|
};
|
|
|
|
const shellQuote = (value) => `'${String(value).replace(/'/g, `'\"'\"'`)}'`;
|
|
|
|
const parseExecPayload = (result) => {
|
|
if (result && typeof result === 'object' && result.parsed && typeof result.parsed === 'object') {
|
|
return result.parsed;
|
|
}
|
|
const raw = typeof result?.content === 'string' ? result.content : '';
|
|
const cleaned = raw.replace(/\nExit code:\s*\d+\s*$/i, '').trim();
|
|
if (!cleaned) return null;
|
|
try {
|
|
return JSON.parse(cleaned);
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const parseToolPayload = (result) => {
|
|
if (result && typeof result === 'object' && result.parsed && typeof result.parsed === 'object') {
|
|
return result.parsed;
|
|
}
|
|
const raw = typeof result?.content === 'string' ? result.content : '';
|
|
if (!raw.trim()) return null;
|
|
try {
|
|
return JSON.parse(raw);
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
let activeInlineEdit = null;
|
|
|
|
const setBusy = (busy) => {
|
|
laneToggleEl.disabled = busy || !taskPath;
|
|
for (const button of moveMenuEl.querySelectorAll('button')) {
|
|
if (button instanceof HTMLButtonElement) button.disabled = busy;
|
|
}
|
|
for (const button of tagsEl.querySelectorAll('button')) {
|
|
if (button instanceof HTMLButtonElement) button.disabled = busy;
|
|
}
|
|
summaryEl.style.pointerEvents = busy ? 'none' : '';
|
|
descriptionEl.style.pointerEvents = busy ? 'none' : '';
|
|
if (activeInlineEdit?.input instanceof HTMLTextAreaElement) {
|
|
activeInlineEdit.input.disabled = busy;
|
|
}
|
|
};
|
|
|
|
const closeMoveMenu = () => {
|
|
moveMenuEl.style.display = 'none';
|
|
laneToggleEl.setAttribute('aria-expanded', 'false');
|
|
laneToggleEl.dataset.open = '0';
|
|
};
|
|
|
|
const positionMoveMenu = () => {
|
|
if (moveMenuEl.style.display !== 'flex') return;
|
|
const rect = laneToggleEl.getBoundingClientRect();
|
|
const menuRect = moveMenuEl.getBoundingClientRect();
|
|
const gutter = 12;
|
|
let left = rect.left;
|
|
let top = rect.bottom + 6;
|
|
if (left + menuRect.width > view.innerWidth - gutter) {
|
|
left = Math.max(gutter, view.innerWidth - gutter - menuRect.width);
|
|
}
|
|
if (top + menuRect.height > view.innerHeight - gutter) {
|
|
top = Math.max(gutter, rect.top - menuRect.height - 6);
|
|
}
|
|
moveMenuEl.style.left = `${Math.round(left)}px`;
|
|
moveMenuEl.style.top = `${Math.round(top)}px`;
|
|
};
|
|
|
|
const openMoveMenu = () => {
|
|
if (laneToggleEl.disabled) return;
|
|
moveMenuEl.style.display = 'flex';
|
|
moveMenuEl.style.visibility = 'hidden';
|
|
moveMenuEl.style.left = '0px';
|
|
moveMenuEl.style.top = '0px';
|
|
positionMoveMenu();
|
|
moveMenuEl.style.visibility = 'visible';
|
|
laneToggleEl.setAttribute('aria-expanded', 'true');
|
|
laneToggleEl.dataset.open = '1';
|
|
};
|
|
|
|
const refreshCards = () => {
|
|
closeMoveMenu();
|
|
window.dispatchEvent(new Event('nanobot:cards-refresh'));
|
|
};
|
|
|
|
const autosizeInlineEditor = (editor, minHeight = 0) => {
|
|
editor.style.height = '0px';
|
|
const nextHeight = Math.max(Math.ceil(minHeight), editor.scrollHeight);
|
|
editor.style.height = `${Math.max(nextHeight, 20)}px`;
|
|
};
|
|
|
|
const beginInlineEdit = (field) => {
|
|
if (!taskPath || activeInlineEdit) return;
|
|
closeMoveMenu();
|
|
const host = field === 'title' ? summaryEl : descriptionEl;
|
|
const currentValue = field === 'title' ? title : body;
|
|
const editor = document.createElement('textarea');
|
|
const minHeight = host.getBoundingClientRect().height;
|
|
|
|
editor.className = `task-card__inline-editor ${
|
|
field === 'title' ? 'task-card__inline-editor--title' : 'task-card__inline-editor--body'
|
|
}`;
|
|
editor.rows = 1;
|
|
editor.value = currentValue;
|
|
editor.placeholder = field === 'description' ? 'Add description' : '';
|
|
editor.setAttribute('aria-label', field === 'title' ? 'Edit task title' : 'Edit task description');
|
|
|
|
host.textContent = '';
|
|
host.classList.remove('task-card__body--placeholder');
|
|
host.classList.add(field === 'title' ? 'task-card__title--editing' : 'task-card__body--editing');
|
|
host.appendChild(editor);
|
|
autosizeInlineEditor(editor, minHeight);
|
|
|
|
const cancel = () => {
|
|
if (activeInlineEdit?.input !== editor) return;
|
|
activeInlineEdit = null;
|
|
render();
|
|
};
|
|
|
|
const commit = async () => {
|
|
if (activeInlineEdit?.input !== editor) return;
|
|
const nextValue = editor.value.trim();
|
|
if (field === 'title' && !nextValue) {
|
|
editor.focus();
|
|
return;
|
|
}
|
|
activeInlineEdit = null;
|
|
if (nextValue === currentValue) {
|
|
render();
|
|
return;
|
|
}
|
|
const ok = await runTaskEdit(field === 'title' ? { title: nextValue } : { description: nextValue });
|
|
if (!ok) render();
|
|
};
|
|
|
|
activeInlineEdit = {
|
|
field,
|
|
input: editor,
|
|
cancel,
|
|
commit,
|
|
};
|
|
|
|
editor.addEventListener('input', () => {
|
|
autosizeInlineEditor(editor, minHeight);
|
|
});
|
|
|
|
editor.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
});
|
|
|
|
editor.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
cancel();
|
|
return;
|
|
}
|
|
if (field === 'title' && event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault();
|
|
editor.blur();
|
|
return;
|
|
}
|
|
if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
|
|
event.preventDefault();
|
|
editor.blur();
|
|
}
|
|
});
|
|
|
|
editor.addEventListener('blur', () => {
|
|
if (activeInlineEdit?.input !== editor) return;
|
|
void commit();
|
|
});
|
|
|
|
view.requestAnimationFrame(() => {
|
|
editor.focus();
|
|
const end = editor.value.length;
|
|
editor.setSelectionRange(end, end);
|
|
});
|
|
};
|
|
|
|
const runTransition = async (targetLane) => {
|
|
if (!taskPath) return;
|
|
setBusy(true);
|
|
setStatus('Saving', '#6e5b4d', 'rgba(255, 244, 227, 0.9)');
|
|
try {
|
|
const command = [
|
|
'python3',
|
|
'/home/kacper/nanobot/scripts/task_cards.py',
|
|
'move',
|
|
'--task',
|
|
shellQuote(taskPath),
|
|
'--lane',
|
|
shellQuote(targetLane),
|
|
].join(' ');
|
|
const result = await window.__nanobotCallToolAsync?.(
|
|
'exec',
|
|
{
|
|
command,
|
|
max_output_chars: 50000,
|
|
},
|
|
{
|
|
pollMs: 350,
|
|
timeoutMs: 30000,
|
|
},
|
|
);
|
|
const payload = parseExecPayload(result);
|
|
if (payload && typeof payload === 'object' && payload.sync && typeof payload.sync === 'object') {
|
|
publishLiveContent(targetLane, targetLane !== 'done' && targetLane !== 'canceled', '');
|
|
}
|
|
refreshCards();
|
|
} catch (error) {
|
|
console.error('Task transition failed', error);
|
|
setBusy(false);
|
|
setStatus('Unavailable', '#8e3023', '#f3d3cc');
|
|
publishLiveContent(lane, true, String(error));
|
|
}
|
|
};
|
|
|
|
const runTagMutation = async (action, tagValue) => {
|
|
if (!taskPath) return;
|
|
const cleanedTag = String(tagValue || '').trim();
|
|
if (!cleanedTag) return;
|
|
setBusy(true);
|
|
setStatus('Saving', '#6e5b4d', 'rgba(255, 244, 227, 0.9)');
|
|
try {
|
|
const result = await window.__nanobotCallTool?.('task_board', {
|
|
action,
|
|
task: taskPath,
|
|
tags: [cleanedTag],
|
|
});
|
|
const payload = parseToolPayload(result);
|
|
if (payload && typeof payload === 'object' && payload.error) {
|
|
throw new Error(String(payload.error));
|
|
}
|
|
refreshCards();
|
|
} catch (error) {
|
|
console.error(`Task tag mutation failed (${action})`, error);
|
|
setBusy(false);
|
|
setStatus('Unavailable', '#8e3023', '#f3d3cc');
|
|
publishLiveContent(lane, true, String(error));
|
|
}
|
|
};
|
|
|
|
const runTaskEdit = async (changes) => {
|
|
if (!taskPath) return;
|
|
setBusy(true);
|
|
setStatus('Saving', '#6e5b4d', 'rgba(255, 244, 227, 0.9)');
|
|
try {
|
|
const result = await window.__nanobotCallTool?.('task_board', {
|
|
action: 'edit',
|
|
task: taskPath,
|
|
...changes,
|
|
});
|
|
const payload = parseToolPayload(result);
|
|
if (payload && typeof payload === 'object' && payload.error) {
|
|
throw new Error(String(payload.error));
|
|
}
|
|
refreshCards();
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Task edit failed', error);
|
|
setBusy(false);
|
|
setStatus('Unavailable', '#8e3023', '#f3d3cc');
|
|
publishLiveContent(lane, true, String(error));
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const promptForTag = async () => {
|
|
if (!taskPath) return;
|
|
const value = window.prompt('Add tag to task', '');
|
|
if (value == null) return;
|
|
const cleaned = value.trim();
|
|
if (!cleaned) return;
|
|
await runTagMutation('add_tag', cleaned);
|
|
};
|
|
|
|
const bindTagRemoval = (button, tagValue) => {
|
|
let holdTimer = null;
|
|
let holdTriggered = false;
|
|
const clearHold = () => {
|
|
if (holdTimer !== null) {
|
|
window.clearTimeout(holdTimer);
|
|
holdTimer = null;
|
|
}
|
|
button.classList.remove('task-card__tag--holding');
|
|
};
|
|
|
|
button.addEventListener('pointerdown', (event) => {
|
|
if (!taskPath || button.disabled) return;
|
|
if (event.pointerType === 'mouse' && event.button !== 0) return;
|
|
holdTriggered = false;
|
|
button.classList.add('task-card__tag--holding');
|
|
holdTimer = window.setTimeout(async () => {
|
|
holdTimer = null;
|
|
holdTriggered = true;
|
|
button.classList.remove('task-card__tag--holding');
|
|
const confirmed = window.confirm(`Remove ${tagValue} from this task?`);
|
|
if (!confirmed) return;
|
|
await runTagMutation('remove_tag', tagValue);
|
|
}, 650);
|
|
});
|
|
|
|
for (const eventName of ['pointerup', 'pointerleave', 'pointercancel']) {
|
|
button.addEventListener(eventName, clearHold);
|
|
}
|
|
|
|
button.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault();
|
|
});
|
|
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (holdTriggered) {
|
|
holdTriggered = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderTags = () => {
|
|
tagsEl.innerHTML = '';
|
|
for (const tag of tags) {
|
|
const chip = document.createElement('button');
|
|
chip.type = 'button';
|
|
chip.className = 'task-card__tag';
|
|
chip.textContent = tag;
|
|
chip.title = `Hold to remove ${tag}`;
|
|
bindTagRemoval(chip, tag);
|
|
tagsEl.appendChild(chip);
|
|
}
|
|
|
|
const addTagButton = document.createElement('button');
|
|
addTagButton.type = 'button';
|
|
addTagButton.className = 'task-card__tag task-card__tag--action';
|
|
addTagButton.textContent = '+';
|
|
addTagButton.title = 'Add tag';
|
|
addTagButton.disabled = !taskPath;
|
|
addTagButton.addEventListener('click', async (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
await promptForTag();
|
|
});
|
|
tagsEl.appendChild(addTagButton);
|
|
|
|
tagsEl.style.display = 'flex';
|
|
};
|
|
|
|
const renderMoveMenu = () => {
|
|
moveMenuEl.innerHTML = '';
|
|
const options = moveOptionsForLane(lane);
|
|
if (!options.length || !taskPath) {
|
|
laneToggleEl.disabled = true;
|
|
closeMoveMenu();
|
|
return;
|
|
}
|
|
laneToggleEl.disabled = false;
|
|
for (const option of options) {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = 'task-card__move-button';
|
|
button.textContent = option.label;
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
runTransition(option.lane);
|
|
});
|
|
moveMenuEl.appendChild(button);
|
|
}
|
|
};
|
|
|
|
laneToggleEl.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const open = moveMenuEl.style.display === 'flex';
|
|
if (open) closeMoveMenu();
|
|
else openMoveMenu();
|
|
});
|
|
|
|
doc.addEventListener('pointerdown', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof Node)) return;
|
|
if (moveMenuEl.style.display !== 'flex') return;
|
|
if (moveMenuEl.contains(target) || laneToggleEl.contains(target)) return;
|
|
closeMoveMenu();
|
|
});
|
|
|
|
view.addEventListener('resize', closeMoveMenu);
|
|
view.addEventListener('scroll', closeMoveMenu, true);
|
|
|
|
if (moveMenuEl.parentElement !== doc.body) {
|
|
doc.body.appendChild(moveMenuEl);
|
|
}
|
|
|
|
summaryEl.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginInlineEdit('title');
|
|
});
|
|
|
|
descriptionEl.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
beginInlineEdit('description');
|
|
});
|
|
|
|
const render = () => {
|
|
applyTheme();
|
|
subtitleEl.textContent = laneLabels[lane] || 'Task';
|
|
summaryEl.textContent = title || '(Untitled task)';
|
|
summaryEl.title = taskPath ? 'Tap to edit title' : '';
|
|
|
|
const dueText = formatDue();
|
|
dueEl.textContent = dueText;
|
|
dueEl.style.display = dueText ? 'inline-flex' : 'none';
|
|
|
|
setStatus('', 'var(--task-muted)', 'transparent');
|
|
|
|
const bodySummary = summarizeBody();
|
|
descriptionEl.textContent = bodySummary || 'Add description';
|
|
descriptionEl.title = taskPath ? 'Tap to edit description' : '';
|
|
descriptionEl.style.display = taskPath ? 'block' : 'none';
|
|
descriptionEl.classList.toggle('task-card__body--placeholder', !bodySummary);
|
|
|
|
renderTags();
|
|
renderMoveMenu();
|
|
closeMoveMenu();
|
|
publishLiveContent(lane, true, '');
|
|
};
|
|
|
|
render();
|
|
})();
|
|
</script>
|