메뉴
Send interactive HTML bubbles on Clawline via `message.sendAttachment`. Use for interactive prompts, dashboards, and reports that should render as widgets instead of raw HTML or plain text.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Prepare or verify OpenClaw stable/beta releases, changelogs, release notes, publish commands, and artifacts.
Discord release/beta mood summaries from Discrawl with quotes, no URLs by default, and issue/PR correlation.
Send a live terminal bubble into a Clawline chat stream. The bubble connects to a per-bubble destination via the provider over WebSocket and renders an interactive terminal inside the message flow. Use when Flynn asks to send a terminal, share a live shell, or embed a terminal in chat. Also use when another skill or workflow needs to surface a live terminal session to the user.
Send screenshots, images, logs, or generated files as actual Clawline attachments; use when the user asks to attach, send, share, upload, or show a file/screenshot in Clawline.
Explain and control the Clawline alert-instructions overlay appended to alerts.
Resolve a Clawline stream by display name and send messages to it. Use when Flynn asks you to talk to, ping, or ask another agent/stream directly. Acts as stream-aware chat DNS — look up the name, send to the session.
| name | interactive-html |
| description | Send interactive HTML bubbles on Clawline via `message.sendAttachment`. Use for interactive prompts, dashboards, and reports that should render as widgets instead of raw HTML or plain text. |
| metadata | {"openclaw":{"skillKey":"interactive-html"}} |
Use interactive HTML bubbles for Clawline when the user should see an inline widget instead of raw HTML or plain text.
application/vnd.clawline.interactive-html+json{"version":1,"html":"..."}buffer.message tool with:
action: "sendAttachment"contentType: "application/vnd.clawline.interactive-html+json"buffer: "<base64 payload>"Example call shape:
{
"action": "sendAttachment",
"target": "user:<id>",
"contentType": "application/vnd.clawline.interactive-html+json",
"buffer": "<base64({\"version\":1,\"html\":\"<html>...</html>\"})>"
}
Targeting a specific stream: Use a fully qualified session key as
targetto deliver into a specific Clawline stream rather than the user's default stream.{ "action": "sendAttachment", "target": "agent:main:clawline:flynn:s_4a2b448d", "contentType": "application/vnd.clawline.interactive-html+json", "buffer": "<base64({\"version\":1,\"html\":\"<html>...</html>\"})>" }Using
target: "flynn"ortarget: "user:<id>"routes to the user's default/personal stream. To keep attachments in the current session, pass the full session key (available fromsession_status).
<meta name="viewport" content="width=device-width, initial-scale=1">--clawline-bubble-bg--clawline-fgSend callbacks through:
window.webkit.messageHandlers.clawline.postMessage({ action: "submit", data: { ... } });
data, not value. (value arrives as null on the client.)data: 64KB serialized JSON.Reserved actions:
_close
summary field:window.webkit.messageHandlers.clawline.postMessage({ action: "_close", summary: "Done" });_resize
data.height or top-level height:window.webkit.messageHandlers.clawline.postMessage({ action: "_resize", data: { height: 280 } });window.webkit.messageHandlers.clawline.postMessage({ action: "_resize", height: 280 });<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
padding: 12px;
background: var(--clawline-bubble-bg);
color: var(--clawline-fg);
font:
16px -apple-system,
system-ui,
sans-serif;
}
.row {
display: flex;
gap: 8px;
}
button {
flex: 1;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
}
</style>
</head>
<body>
<p>Proceed with deployment?</p>
<div class="row">
<button onclick="pick(true)">Yes</button>
<button onclick="pick(false)">No</button>
</div>
<script>
const bridge = window.webkit.messageHandlers.clawline;
function pick(ok) {
bridge.postMessage({ action: "choice", data: { answer: ok ? "yes" : "no" } });
bridge.postMessage({ action: "_close", summary: ok ? "Selected Yes" : "Selected No" });
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
padding: 12px;
background: var(--clawline-bubble-bg);
color: var(--clawline-fg);
font:
16px -apple-system,
system-ui,
sans-serif;
}
fieldset {
border: 0;
padding: 0;
margin: 0 0 10px;
}
label {
display: block;
margin: 8px 0;
}
button {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
}
</style>
</head>
<body>
<fieldset>
<legend>Pick environment</legend>
<label><input type="radio" name="env" value="dev" checked /> Dev</label>
<label><input type="radio" name="env" value="staging" /> Staging</label>
<label><input type="radio" name="env" value="prod" /> Production</label>
</fieldset>
<button onclick="submitChoice()">Submit</button>
<script>
const bridge = window.webkit.messageHandlers.clawline;
function submitChoice() {
const picked = document.querySelector('input[name="env"]:checked');
const value = picked ? picked.value : "dev";
bridge.postMessage({ action: "choice", data: { env: value } });
bridge.postMessage({ action: "_close", summary: "Selected: " + value });
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
padding: 12px;
background: var(--clawline-bubble-bg);
color: var(--clawline-fg);
font:
16px -apple-system,
system-ui,
sans-serif;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
button {
padding: 10px 0;
border-radius: 10px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
}
</style>
</head>
<body>
<p>Rate confidence:</p>
<div class="grid">
<button onclick="rate(1)">1</button>
<button onclick="rate(2)">2</button>
<button onclick="rate(3)">3</button>
<button onclick="rate(4)">4</button>
<button onclick="rate(5)">5</button>
</div>
<script>
const bridge = window.webkit.messageHandlers.clawline;
function rate(n) {
bridge.postMessage({ action: "rating", data: { value: n } });
bridge.postMessage({ action: "_close", summary: "Rating: " + n + "/5" });
}
</script>
</body>
</html>