);
}
function TsFlash({ flash }) {
if (!flash) return null;
const danger = flash.kind === 'error';
// Fixed top-right toast: always visible regardless of how far the skill list
// is scrolled. Solid background so it stays readable over page content.
// Portaled to so it escapes any ancestor stacking context — the sticky
// right rail and the sticky device panel each form a stacking context that
// would otherwise trap this fixed toast beneath the page header and hide it
// (only toasts raised from the right rail were affected, hence portaling all).
const node = (
{flash.text}
);
return (typeof ReactDOM !== 'undefined' && ReactDOM.createPortal)
? ReactDOM.createPortal(node, document.body)
: node;
}
function useFlash() {
const [flash, setFlash] = useTwS(null);
const timer = useTwR(null);
const show = (text, kind = 'ok') => {
setFlash({ text, kind });
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => setFlash(null), 4000);
};
return [flash, show];
}
const fieldStyle = {
height: 34, padding: '0 10px', fontSize: 13, width: '100%',
border: '1px solid var(--border)', borderRadius: 8,
background: 'var(--surface)', color: 'var(--text-primary)', outline: 'none',
};
// Two-column grid for skill lists (fills the panel width instead of leaving the
// right half blank). minmax(0,1fr) lets columns shrink so long names truncate
// rather than overflow. Row spacing comes from SkillRow's own marginBottom.
const skillGridStyle = {
display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', columnGap: 10,
};
// Skill name: single line, ellipsis when it overflows its (possibly narrow) cell.
const skillNameStyle = {
fontSize: 13, fontWeight: 500, display: 'block',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
};
function TsField({ label, children }) {
return (
);
}
// Prompt detail modal — wide + scrollable for long prompt content, with Copy.
function PromptModal({ item, onClose }) {
if (!item) return null;
const copy = () => { try { navigator.clipboard.writeText(item.content || ''); } catch (e) { /* clipboard blocked */ } };
return (
{oversized && (
Too large to upload{sizeBytes ? ` · ${_fmtBytes(sizeBytes)}` : ''}
)}
);
}
function _fmtBytes(n) {
if (!n) return '';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let i = 0, v = n;
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
return `${v >= 10 || i === 0 ? Math.round(v) : v.toFixed(1)} ${units[i]}`;
}
// Detail card shown in the right rail when a skill row is clicked.
// Long descriptions are truncated to a few lines with a hard cutoff (no fade)
// and a Show more/less toggle, so they can't push the rest of the panel out of
// view.
function DescriptionBlock({ text }) {
const [open, setOpen] = useTwS(false);
const needsClamp = (text || '').length > 220 || (text || '').split('\n').length > 6;
const clampStyle = open ? {} : {
display: '-webkit-box', WebkitLineClamp: 6, WebkitBoxOrient: 'vertical', overflow: 'hidden',
};
return (
{text}
{needsClamp && (
)}
);
}
// On-demand modal showing the full SKILL.md text for a skill bundle.
function SkillMdModal({ orgId, bundleId, name, onClose }) {
const [state, setState] = useTwS({ status: 'loading', content: '', files: [] });
useTwE(() => {
let cancelled = false;
(async () => {
try {
const res = await tsGetSkillFiles(orgId, bundleId);
if (cancelled) return;
setState({ status: 'done', content: res.skill_md || '', files: res.files || [] });
} catch (e) { if (!cancelled) setState({ status: 'error', content: '', files: [] }); }
})();
return () => { cancelled = true; };
}, [orgId, bundleId]);
return (