App ビューアー

ウェブサイトを読み込み中で、App ビューアーは正常に動作しています。少し待ってください。2 分以上かかる場合は、Refresh アイコンをクリックするか、Console パネルでエラーを確認してください。

エージェントはビルド中に問題に遭遇することがあり、それが原因でウェブページのエラーが発生する場合があります。Resolve をクリックすると、エージェントが修復します。修正が完了すると、プレビューは通常の状態に戻ります。赤いメッセージは警告であり、危機ではありません。

バッジの削除には Pro 以上が必要です。右上のアバターをクリックし、Settings を選択してから Plans & Billing に進み、Pro または Max プランを選択してください。アップグレード後、公開済みページから Atoms バッジは自動的に削除されます。

1. Design Mode を開き、位置ずれやスタイルの誤りがある正確な要素を選択します。
2. ページとブレークポイント、現在の問題、望ましい結果、変更してはいけない点を伝えます。
3. padding、配置、幅、色、折り返し動作など、測定可能な指示を使います。見た目の一致が重要な場合は参照画像を添付してください。
4. 1 つ変更を適用したら、デスクトップとモバイルのレイアウトに加え、読み込み中、空状態、hover、error などの重要な状態を確認します。
5. 結果によって別の箇所が壊れた場合は、最後に正常だったバージョンに戻り、対象をより狭くして再試行します。

1. 問題が App ビューアー のみに影響しているのか、Preview URL にも影響しているのか、公開済みサイトにも影響しているのかを確認します。
2. 一度 Refresh し、Preview を新しいタブで開き、Incognito ウィンドウでもテストします。
3. 現在のタスクまたはビルドがまだ実行中かどうかを確認します。完了してから再試行してください。
4. Cloud & AI の残高不足やアプリ停止が明示的に表示されている場合は、Settings → Cloud & AI を開いてその残高を確認します。真っ白な画面だけを理由にチャージしないでください。
5. Console または Network のエラーを記録しますが、cookie、token、secret 値は共有しないでください。

画面が真っ白なままの場合は、Chat Link、完全な Viewer URL、時刻とタイムゾーン、影響を受ける環境、スクリーンショット、秘匿情報を除いたエラー詳細を添えて Support に連絡してください。

1. App ビューアー のみなのか、Preview URL なのか、公開済みサイトなのか、どこに影響しているかを確認します。
2. 一度 Refresh し、Preview を新しいタブで開き、Incognito ウィンドウでもテストします。
3. 現在のタスクまたはビルドがまだ実行中かどうかを確認し、完了するまで待ちます。
4. 最後に正常に動作していたバージョンをテストします。それが動作する場合は、真っ白な画面を引き起こした最近の変更を比較します。
5. 残高不足またはアプリ停止が製品上で明示的に報告された場合にのみ、Settings → Cloud & AI を開いてください。

問題が続く場合は、Chat Link、完全な Viewer URL、バージョン、時刻とタイムゾーン、影響を受ける環境、スクリーンショット、秘匿情報を除いた Console または Network エラーを添えて Support に連絡してください。

Preview と公開済みサイトは独立したチャネルです。保存やプレビューでは変更は本番環境に反映されません。

1. Publish パネルで Update をクリックする — Publish パネルを開いて Update をクリックします。ステータスが Up to date になるまで待ちます。
2. 公開サイトをハードリフレッシュする — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押すか、URL を Incognito ウィンドウで開いてブラウザキャッシュの影響を除外します。
3. 公開バージョン番号を確認する — Publish パネルで、バージョンが Preview で見えているものと一致していることを確認します。異なる場合は、再度公開してください。
4. プラットフォームの Prod サブドメインをテストする — カスタムドメインを使用している場合は、デフォルトの Prod URL も別途開いてください。Prod サブドメインは更新されているのにカスタムドメインが更新されていない場合、問題は DNS または CDN キャッシュです。

問題が解決しない場合は、Preview URL、Prod URL、比較用の並列スクリーンショット、Publish または Update をクリックした時刻を提供してください。

エージェントがレイアウトやスタイルを変更すると、小さい画面でのレスポンシブ動作を意図せず壊してしまうことがあります。

1. まずモバイル幅でプレビューする — 公開前に、App ビューアーのツールバーにある device toggle を使ってモバイル表示に切り替え、結果を確認します。
2. モバイル表示で Design Mode を使う — device toggle をモバイルに設定した状態で Design Mode に切り替えます。崩れている要素をクリックすると、その画面サイズのそのコンポーネントだけをエージェントが対象にできます。
3. 明示的なレスポンシブ制約を伝える — モバイルレイアウトをどう見せたいかを正確に伝えてください。例: "On screens narrower than 768px, stack the cards in a single column and set padding to 16px."
4. 既存のメディアクエリを保持するよう依頼する — デスクトップ変更を依頼するときは、"Do not modify any existing responsive or mobile styles." を追加してください。

問題が解決しない場合は、Chat Link、崩れたモバイルレイアウトのスクリーンショット、期待するレイアウトの参照画像を提供してください。

画像が壊れて見える、プレースホルダーアイコンが表示される、または読み込まれない場合:

1. 画像ファイルパスを確認する — Files セクションを開き、コード内で参照されているパスに画像ファイルが存在することを確認します。エージェントが編集中にファイルを移動または名前変更した可能性があります。
2. ファイルサイズと形式を確認する — 非常に大きな画像や未対応形式は読み込まれないことがあります。画像を圧縮するか、PNG、JPG、WebP に変換してください。
3. Cloud storage を確認する — Settings > Cloud & AI に移動し、利用可能なストレージ容量があることを確認します。
4. ハードリフレッシュする — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押して、キャッシュされた画像参照をクリアします。

問題が解決しない場合は、Chat Link、表示されない画像の URL、壊れた状態のスクリーンショットを提供してください。

エージェントが無関係な要素を変更したり、ページの他の部分にリグレッションを持ち込んだりした場合:

1. ロールバックする — History に移動し、最後に安定していたバージョンから リミックス します。これにより、コードを保持したままチャットコンテキストをリセットできます。
2. Design Mode で対象を限定する — Design Mode に切り替えて、特定の要素を直接クリックします。これにより、エージェントの編集範囲がそのコンポーネントに固定されます。
3. 明示的な制約を追加する — 変更してはいけないものを明確に伝えます。例: "Change only the header background color to #1A365D. Do not modify the navigation bar, footer, or any other component."
4. 1 プロンプトにつき 1 変更にする — 1 つ変更し、結果を確認してから次に進みます。

エージェントが繰り返し他の要素を壊す場合は、安定版から リミックス し、対象を厳密に絞った指示でやり直してください。

Preview パネルにビルドエラー、赤いエラーバナー、または不足しているパッケージに関するメッセージが表示される場合:

1. Resolve ボタンを使う — App ビューアーに問題の報告通知が表示されたら、Resolve をクリックしてください。AI が特定されたすべてのエラーを自動で分析して修正します。Resolve ボタンが表示されない場合は、Console パネルから正確なエラーメッセージをコピーし、"Fix this build error: [error message]." を添えてエージェントに貼り付けてください。
2. 最近の変更を確認する — 特定の編集後にエラーが発生した場合は、History に移動して最後に正常だったバージョンと比較し、どの変更が問題を引き起こしたかを特定します。
3. 最後に正常だったバージョンから リミックス する — エラーの解決が難しい場合は、最後に成功したチェックポイントから リミックス し、変更を段階的に再適用します。
4. パッケージ互換性を確認する — エラーが特定のパッケージを参照している場合は、エージェントに "Check whether [package name] is compatible with the current project setup and fix any version conflicts." と依頼してください。

注: エラーメッセージがプラットフォームコンポーネント（App ビューアー、startup script、Publish、deploy record）やサードパーティパッケージの内部ファイル（例: @vue/compiler-core、vite）を参照している場合、これはエージェントの問題ではなくプラットフォームの問題である可能性があります。完全なエラーメッセージを添えて Support に連絡してください。

問題が解決しない場合は、完全なエラーメッセージ、Chat Link、エラーのスクリーンショットを提供してください。

エージェントが変更完了を確認しているのに、見た目の結果が変わっていない場合:

1. ハードリフレッシュする — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押します。CSS の変更はブラウザにキャッシュされることがよくあります。
2. CSS の詳細度競合を確認する — エージェントが追加したスタイルが既存ルールに上書きされている可能性があります。エージェントに "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed." と依頼してください。
3. Design Mode で確認する — Design Mode に切り替えて要素をクリックします。左側のビジュアルエディターには現在適用されている色、spacing、タイポグラフィ、レイアウトプロパティが表示されるため、依頼した変更が適用されたか確認できます。
4. 正しいファイルを確認する — グローバルスタイルシートとコンポーネント単位のスタイルの両方があるプロジェクトでは、エージェントが間違ったファイルを編集した可能性があります。"Where did you apply the change? Show me the file path and line." と尋ねてください。

問題が解決しない場合は、Chat Link、変更されていない要素のスクリーンショット、依頼した正確なスタイル値を提供してください。

Design Mode はビジュアルレイアウトを使って対象コンポーネントを判断します。ネストされた要素や重なった要素があると、誤った選択が起こることがあります。

1. ズームインする — クリック前に対象領域を拡大してください。近接してネストされたコンポーネントを区別しやすくなります。
2. テキスト説明を代替手段として使う — 何度クリックしても間違った要素が選ばれる場合は、代わりにチャットで説明してください。例: "Select the second button inside the pricing card in the right column."
3. ファイルパスで指定する — どのファイルにそのコンポーネントがあるかわかっている場合は、エージェントに直接伝えてください。"Edit the element in src/components/PricingCard.tsx, line 42."

選択の問題が続く場合は、目的の要素を強調したスクリーンショットと Chat Link を提供してください。