From 17fc6cabdfec3cb88a5d04e9dfd6e12bb013cc1a Mon Sep 17 00:00:00 2001 From: Kevin White Date: Tue, 8 Sep 2026 18:58:51 +0000 Subject: [PATCH] Add Project Opal turndown banner to standalone UI shell and deprecation notice to README.md --- README.md | 9 + .../visual-editor/public/styles/shell.css | 168 +++++++++++++++++- packages/visual-editor/shell/index.html | 31 ++++ .../src/shell/opal-shell-host.ts | 25 +++ 4 files changed, 227 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9a2902b154a..8be04410eff 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,14 @@ # Breadboard +> [!WARNING] +> **Deprecation Notice (November 2026):** Breadboard and Project Opal are graduating out of Google Labs and will be sunset on **November 17, 2026**. +> +> - **Hosted Services:** Web access via [opal.google.com](http://opal.google.com), [breadboard-ai.web.app](https://breadboard-ai.web.app), and backend execution services will turn off on November 17, 2026. +> - **User Files:** Saved workflow files are stored in JSON format inside your personal Google Drive (`My Drive > Opal`). We recommend copying any prompt text you wish to keep before November 17, or downloading the JSON files from Drive anytime after to view in any plain text editor. +> - **Where to Build Next:** Try [**Skills in Gemini**](https://blog.google/products-and-platforms/products/gemini/automate-tasks-with-skills/) for chat automations, or [**Google AI Studio**](https://aistudio.google.com) for advanced model prompting and multi-step workflows. +> - **Repository Status:** This repository will be placed in read-only / archived mode on November 17, 2026. +> - For full details, please see the [**Opal FAQ**](https://developers.google.com/opal/faq). + **A library for prototyping generative AI applications.** ![Stability](https://img.shields.io/badge/stability-wip-green) [![Discord](https://img.shields.io/discord/1138546999872999556?logo=discord)](https://discord.gg/breadboard) diff --git a/packages/visual-editor/public/styles/shell.css b/packages/visual-editor/public/styles/shell.css index ad372388319..7530a9fa913 100644 --- a/packages/visual-editor/public/styles/shell.css +++ b/packages/visual-editor/public/styles/shell.css @@ -9,14 +9,127 @@ --sys-color--body-background-dark: #131314; } -iframe#opal-app { +body { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; width: 100vw; - height: 100vh; /* fallback */ - height: 100dvh; /* account for iOS URL bar dynamic height */ + overflow: hidden; + margin: 0; + padding: 0; + font-family: "Google Sans", Roboto, Arial, sans-serif; +} + +.turndown-banner { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 24px; + background-color: #f0f4f9; + color: #1f1f1f; + border-bottom: 1px solid #e0e2ec; + font-size: 14px; + line-height: 20px; + z-index: 100; + box-sizing: border-box; + flex-shrink: 0; +} + +.turndown-banner[hidden] { + display: none !important; +} + +.banner-leading-icon { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: #0b57d0; +} + +.banner-leading-icon .info-icon { + width: 20px; + height: 20px; +} + +.banner-content { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 6px; + flex: 1 1 auto; +} + +.banner-title { + font-weight: 600; + color: #1f1f1f; +} + +.banner-description { + font-weight: 400; + color: #444746; +} + +.banner-actions { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; +} + +.banner-action-link { + color: #0b57d0; + font-weight: 500; + text-decoration: none; + border-radius: 4px; + padding: 4px 8px; + transition: background-color 0.2s ease; +} + +.banner-action-link:hover { + background-color: rgba(11, 87, 208, 0.08); + text-decoration: underline; +} + +.banner-action-link:focus-visible { + outline: 2px solid #0b57d0; + outline-offset: 2px; +} + +.banner-dismiss-button { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + cursor: pointer; + padding: 6px; + border-radius: 50%; + color: #444746; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.banner-dismiss-button:hover { + background-color: rgba(0, 0, 0, 0.06); + color: #1f1f1f; +} + +.banner-dismiss-button:focus-visible { + outline: 2px solid #0b57d0; + outline-offset: 2px; +} + +.banner-dismiss-button .close-icon { + width: 18px; + height: 18px; +} + +iframe#opal-app { + flex: 1 1 auto; + min-height: 0; + width: 100%; border: none; - position: fixed; - top: 0; - left: 0; background: var(--sys-color--body-background-light); } @@ -67,6 +180,49 @@ iframe[src^="https://drive"] } @media (prefers-color-scheme: dark) { + .turndown-banner { + background-color: #1e1f20; + color: #e3e3e3; + border-bottom-color: #444746; + } + + .banner-leading-icon { + color: #a8c7fa; + } + + .banner-title { + color: #e3e3e3; + } + + .banner-description { + color: #c4c7c5; + } + + .banner-action-link { + color: #a8c7fa; + } + + .banner-action-link:hover { + background-color: rgba(168, 199, 250, 0.08); + } + + .banner-action-link:focus-visible { + outline-color: #a8c7fa; + } + + .banner-dismiss-button { + color: #c4c7c5; + } + + .banner-dismiss-button:hover { + background-color: rgba(255, 255, 255, 0.08); + color: #e3e3e3; + } + + .banner-dismiss-button:focus-visible { + outline-color: #a8c7fa; + } + iframe#opal-app { background: var(--sys-color--body-background-dark); } diff --git a/packages/visual-editor/shell/index.html b/packages/visual-editor/shell/index.html index 3fa9223a104..e0248377fbe 100644 --- a/packages/visual-editor/shell/index.html +++ b/packages/visual-editor/shell/index.html @@ -21,6 +21,37 @@ /> +
+ + + +