// Teklens.AI — Guided builder for Skills & Agents. // Creating/refining a skill or agent is an AI-guided conversation, not a manual form. // LEFT : a reduced chat (model selector + attach + send) that drives creation & edits. // RIGHT : live artifact tabs (Preview / Skill / Agent / Data / Template) with pencil-edit. // Reuses globals from skills-agents.jsx & app: Icon, renderTemplatePreview, AgentMultiSelect, // WidgetSamplePreview, WidgetCode, PreviewPane, OutputBadge, LineageBadge, saEffLineage, // IconPicker, OutputSelector, AGENT_MODEL_DEFAULT, MODELS_LIST, SA_TOOLS. function BuilderModelInline({ value, onChange }) { const [open, setOpen] = useState(false); const list = typeof MODELS_LIST !== "undefined" && MODELS_LIST || []; const cur = list.find((m) => m.label === value); return (
{open && <>
setOpen(false)} />
{list.map((m) => )}
}
); } // Per-skill "design the output" conversations — authored to match each skill's actual output. const DESIGN_CHATS = { "risk-analyzer": [ { role: "user", text: "For the output, make a widget: an overall risk score in a ring at the top-right with a short summary beside it, then the individual risks ranked below — each with severity, likelihood, impact and the file evidence." }, { role: "tool", tool: "design_widget", status: "completed" }, { role: "assistant", text: "Done. The widget leads with the **risk-score ring (top-right)** and a headline summary, then a ranked list of **risk cards** — each showing a severity dot, likelihood × impact, the `file · lines · owner` evidence and a suggested mitigation. The live preview is on the right; tweak the data structure or sample to adjust." }], "idea-estimator": [ { role: "user", text: "Design the output as a widget with two gauges up top — complexity and total risk — then the top risks as a tagged list and a short resourcing breakdown below." }, { role: "tool", tool: "design_widget", status: "completed" }, { role: "assistant", text: "Built it. Two **dial gauges** (complexity + total risk) head the card, followed by the **top-risks list** with severity tags and a resourcing breakdown. Sample data is rendering in the preview — adjust the schema or sample to change it." }], "release-note-generator": [ { role: "user", text: "The output should be an HTML page: a version + date header with a one-line theme summary, then grouped sections for New Features, Fixes and Breaking Changes." }, { role: "tool", tool: "design_template", status: "completed" }, { role: "assistant", text: "Here's the **HTML template** — a header band carrying `{{version}}` and `{{date}}`, the theme line, then styled category sections (Breaking Changes flagged in amber). The curly placeholders fill per run; the preview shows it with sample release data." }], "tech-debt-report": [ { role: "user", text: "Make it a Markdown report — an overall debt score and the top three concerns, then a section per hotspot with severity, the evidence and a suggested fix with rough effort." }, { role: "tool", tool: "design_template", status: "completed" }, { role: "assistant", text: "Done — a **Markdown template** opening with the debt score and top-three concerns, then a `### Hotspot · severity` block per area with evidence and a **Fix** line. The preview renders a filled example." }] }; function seedDesignChat(item) { if (DESIGN_CHATS[item.id]) return DESIGN_CHATS[item.id]; const byOutput = { widget: "a **widget** — describe the layout (the key number, a summary, then the supporting detail) and I'll wire it to a data structure.", html: "an **HTML template** — tell me the sections and I'll lay them out with curly placeholders the skill fills each run.", markdown: "a **Markdown template** — tell me the headings and structure and I'll add curly placeholders for the skill to fill.", none: "**nothing fixed** — this skill replies inline, so there's no layout to design. Switch the output to Markdown, HTML or Widget on the Build step to design a format." }; return [ { role: "assistant", text: `Now let's design the **output**. This skill produces ${byOutput[item.output] || byOutput.none}` }]; } // Seed the builder conversation so it reads like an AI session — separate threads per step. function seedBuilderChat(item, kind, step) { if (kind === "agent") { return [ { role: "user", text: `Create an agent that ${item.desc || "investigates and returns findings to the thread."}` }, { role: "tool", tool: "scaffold_agent", status: "completed" }, { role: "assistant", text: `I've drafted **${item.name}**. The prompt and model are on the right — refine them in chat, or click any pencil to edit directly.` }]; } if (step === "design") return seedDesignChat(item); return [ { role: "user", text: `Create a skill called "${item.name}" that ${item.desc || "produces a useful artefact."}` }, { role: "tool", tool: "scaffold_skill", status: "completed" }, { role: "assistant", text: `I've drafted **${item.name}**. The routing description, instructions and agents are on the right — refine them in chat, or click any pencil to edit a section directly.` }]; } function BuilderChat({ item, kind, model, setModel, onRename, step }) { const isSkill = kind === "skill"; const stepKey = step === "design" ? "design" : "define"; const [msgsByStep, setMsgsByStep] = useState(() => ({ define: seedBuilderChat(item, kind, "define"), design: seedBuilderChat(item, kind, "design") })); const msgs = msgsByStep[stepKey]; const [editingName, setEditingName] = useState(false); const scrollRef = useRef(null); useEffect(() => {if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;}, [msgs]); const send = (text) => { const t = (text || "").trim();if (!t) return; const tool = stepKey === "design" ? item.output === "widget" ? "design_widget" : "design_template" : isSkill ? "update_skill" : "update_agent"; const reply = stepKey === "design" ? `Updated the **output** — applied "${t}". The preview on the right reflects the change.` : `Updated **${item.name}** — applied "${t}". Check the panel on the right to review the change.`; setMsgsByStep((prev) => ({ ...prev, [stepKey]: [...prev[stepKey], { role: "user", text: t }, { role: "tool", tool, status: "completed" }, { role: "assistant", text: reply }] })); }; const phase = isSkill ? stepKey === "design" ? "Designing the output" : "Building the skill" : "Building the agent"; return (
{/* header */}
{editingName ? onRename(e.target.value)} onBlur={() => setEditingName(false)} onKeyDown={(e) => e.key === "Enter" && setEditingName(false)} className="text-[19px] font-semibold text-[var(--text)] bg-transparent outline-none border-b border-[var(--accent)] min-w-0 flex-1" /> :

{item.name}

}
{phase}
{/* messages */}
{msgs.map((m, i) => )}
{/* composer — same element as Ask Teklens, reduced to attach · voice · model */}
); } function BuilderMsg({ m }) { if (m.role === "user") return
{m.text}
; if (m.role === "tool") return (
{m.tool} Completed
); return
{renderTemplatePreview(m.text)}
; } // ---------- right pane: artifact tabs ---------- function BuilderTabHeader({ tabs, tab, setTab }) { const ICONS = { preview: "eye", skill: "file", instructions: "file", agent: "robot", agents: "robot", data: "json", template: "code", tools: "tool" }; return (
{tabs.map((t) => { const on = tab === t.id; return ( ); })}
); } function PencilEdit({ editing, onToggle }) { return ; } // A rendered-markdown / inline-edit section used by most tabs. function ProseSection({ value, onChange, placeholder }) { const [editing, setEditing] = useState(false); return (
setEditing((e) => !e)} />
{editing ?