カスタムダッシュボードウィジェット

あなたのダッシュボード、あなたのカード——平易な言葉で説明するか、生のHTMLで書くか。常にサンドボックスの中で。

---

これは何か

DuDuClawのホームダッシュボードは、ウィジェットのリスト(エージェント名簿、タスク、チャネルの健全性…)です。Custom Widgetsは、この固定カタログを自作カードで拡張します。ランタイムを共有する2つの作成方法があります:

• AIガイド付きフロー(全ユーザー利用可):データソースを選び、表示スタイルを選び、欲しいものを自分の言葉で説明する。モデルがウィジェットを生成し、その場でプレビューし、フィードバックを送ってもう一度回し、満足したら保存する。
• 生HTML(管理者限定):同じライブプレビュー付きの完全なHTML編集画面——ディストリビューターのエンジニアが1社の企業向けにデプロイをカスタマイズするために作られたもの。ウィジェットは.jsonファイルとしてエクスポート/インポートできるため、ディストリビューターは1つの顧客導入から次の導入へカードを持ち運べる。

保存されたウィジェットはWidget Studio(/widgets)に置かれます:インスタンス全体に共有したり、他人が共有したカードを自分のボードに追加したり、出発点として複製したりできます。

サンドボックス

カスタムウィジェットは、単一の自己完結型HTMLフラグメントです。ダッシュボードはこれをiframe内でレンダリングし、以下を適用します:

• sandbox="allow-scripts"、そしてallow-same-originは付けない——ウィジェットは固有のoriginを取得し、ダッシュボードのDOM、Cookie、localStorage、ログイントークンを読み取れません。
• あらゆる外部リソースとネットワーク呼び出し(fetch/XHRを含む)をブロックする、注入されたContent-Security-Policy。ウィジェットが見たデータは外に出られません。
• 唯一のデータの扉となる、注入されたSDKシム:

const t = await duduclaw.call('tasks.summary');
// { total, by_status, completed_today, recent: [...] }
duduclaw.onTheme((mode) => { /* 'light' | 'dark' */ });

duduclaw.callは固定の読み取り専用アローリスト——agents.summary、tasks.summary、cost.summary、channels.status、system.status——を、現在の閲覧者のセッションを通してプロキシします。そのため、ロールとデータスコープのルールは他の場所とまったく同じように適用されます。リストにないものはすべて拒否され、呼び出しはウィジェットごとにレート制限されます。

テーマはダッシュボードに自動追従し(CSS変数--fg、--muted、--accent、--card、--borderに加えてdata-theme属性)、フレームはコンテンツに合わせて自動的にサイズ調整されます。

信頼ではなくアローリスト方式のブリッジを使う理由

ディストリビューターが書いたHTMLは顧客のダッシュボード上で動きます。分離がなければ、「エンジニアにページをカスタマイズさせる」ことは「ウィジェットを編集できる誰もが、ログイン中の管理者として振る舞えるようにする」ことを意味します。サンドボックスはこれを逆転させます:悪意のある、またはバグのあるウィジェットができる最悪のことは、自分のカードの中に見苦しいものを描くことだけです。権限昇格はできず、データを持ち出すこともできず(ネットワーク出口なし)、それを見ている人がすでに見ることを許可されている以上のデータを見ることもできません。

レイアウトと共有

• ウィジェットはcustom:<id>エントリとして個人のレイアウトに参加し、他の組み込みカードと同じように並べ替えたり非表示にしたりできます。サーバーは、閲覧権限のないウィジェットを参照するレイアウトエントリを拒否します(フェイルクローズ)。
• 共有はインスタンス全体に及び、オーナーが管理します。管理者は共有ウィジェットをモデレート(削除)できます。
• 読み取り専用の代理閲覧モードを使うマネージャーは、部下のカスタムウィジェットがインライン表示されるのを見ることができます——ボードの他の部分と同じ厳格な階層権限が適用されます。

制限

項目	制限
ウィジェットHTMLサイズ	256 KB
ブリッジ呼び出し	ウィジェットごとに毎秒10回
ブリッジメソッド	読み取り専用サマリー5種類(フェイルクローズ)
ウィジェットからのネットワーク出口	なし(CSPでブロック)

生成はアカウントローテーション付きのClaude CLIパスで実行され、Direct APIフォールバックを備え、ツール能力ゼロのセットで動きます——ウィジェット生成がファイルに触れたり、コマンドを実行したりすることは決してありません。